/* ── Root variables ─────────────────────────────────────────────────── */
:root {
    --sacco-primary:  #1a56db;
    --sacco-success:  #057a55;
    --sacco-card-bg:  #f8fafc;
}

body {
    background-color: #f1f5f9;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.92rem;
}

/* ── Sidebar card layout ────────────────────────────────────────────── */
.sidebar {
    min-height: calc(100vh - 70px);
    background: #fff;
    border-right: 1px solid #e2e8f0;
}

/* ── Stat cards ─────────────────────────────────────────────────────── */
.stat-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.stat-card .icon-box {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}

/* ── Section cards ──────────────────────────────────────────────────── */
.card { border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card-header { background: #fff; border-bottom: 1px solid #e2e8f0; font-weight: 600; }

/* ── Tables ─────────────────────────────────────────────────────────── */
.table th { background: #f8fafc; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.table-hover tbody tr:hover { background-color: #f0f7ff; }

/* ── Avatar ─────────────────────────────────────────────────────────── */
.avatar-sm { width: 34px; height: 34px; font-size: .85rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; border-radius: 50%; }

/* ── Notification dropdown ──────────────────────────────────────────── */
.notif-dropdown { min-width: 320px; max-height: 360px; overflow-y: auto; }
.notif-dropdown .dropdown-item { white-space: normal; }

/* ── Progress bar ───────────────────────────────────────────────────── */
.progress { border-radius: 50px; }

/* ── Form helpers ───────────────────────────────────────────────────── */
.form-label { font-weight: 500; }
.required::after { content: " *"; color: #dc3545; }

/* ── Auth pages ─────────────────────────────────────────────────────── */
.auth-wrapper {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1a56db 0%, #0e3a8c 100%);
}
.auth-card { width: 100%; max-width: 460px; border-radius: 16px; }

/* ── Status timeline ────────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: .65rem; top: 0; bottom: 0; width: 2px; background: #e2e8f0; }
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-item::before {
    content: ''; position: absolute; left: -1.75rem; top: .25rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--bs-primary); border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--bs-primary);
}
.timeline-item.done::before { background: var(--bs-success); box-shadow: 0 0 0 2px var(--bs-success); }
.timeline-item.pending::before { background: #e2e8f0; box-shadow: 0 0 0 2px #94a3b8; }

/* ── Loan progress ──────────────────────────────────────────────────── */
.loan-card { border-left: 4px solid var(--bs-primary); }
.loan-card.completed { border-left-color: var(--bs-success); }

/* ── Print styles ───────────────────────────────────────────────────── */
@media print {
    .navbar, .footer, .btn, .alert, .sidebar { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}