/* Shared visual system for the SACCO workspace. Kept separate from templates so every module stays consistent. */
:root {
    --sacco-ink: #172b4d;
    --sacco-muted: #66758a;
    --sacco-line: #e3eaf2;
    --sacco-canvas: #f6f8fb;
    --sacco-navy: #102c4e;
    --sacco-navy-2: #1c4675;
    --sacco-gold: #e6b84f;
    --sacco-blue-soft: #e8f1f8;
}

html { font-size: 15px; }
body.sacco-app {
    font-family: "DM Sans", "Segoe UI", Tahoma, sans-serif;
    color: var(--sacco-ink);
    background: var(--sacco-canvas);
    line-height: 1.45;
}
body.sacco-app::before { content: none; }

/* Navigation: quiet, aligned, and predictable. */
.sacco-app .sidebar {
    width: 236px;
    background: var(--sacco-navy);
    box-shadow: none;
    border-right: 1px solid rgba(255,255,255,.06);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sacco-app .sidebar-header {
    min-height: 76px;
    padding: 18px 18px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sacco-app .sidebar-header h4 { display:flex; align-items:center; gap:10px; font-size:.92rem; letter-spacing:.01em; }
.sacco-app .sidebar-header h4 > span { display:flex; flex-direction:column; line-height:1.15; }
.sacco-app .sidebar-header .sidebar-brand-name { color:#fff; font-weight:700; }
.sacco-app .sidebar-header h4 small { color:#9db0cc; font-size:.64rem; font-weight:400; margin-top:3px; }
.sacco-app .sidebar-header h4 i { width:34px; height:34px; display:grid; place-items:center; margin:0; color:var(--sacco-navy); background:var(--sacco-gold); border-radius:9px; font-size:.95rem; }
.sacco-app .sidebar nav { padding:16px 10px 20px; margin-top:0 !important; }
.sacco-app .sidebar .nav { gap:2px; }
.sacco-app .sidebar .nav-item { margin:0; }
.sacco-app .sidebar .nav-link {
    min-height:38px;
    padding:9px 11px;
    margin:0;
    gap:0;
    color:#afc0d8;
    border-radius:8px;
    font-size:.79rem;
    font-weight:500;
    transition:background .15s ease, color .15s ease;
}
.sacco-app .sidebar .nav-link i { width:21px; margin-right:10px; color:#7f99bd; font-size:.9rem; text-align:center; }
.sacco-app .sidebar .nav-link:hover { color:#fff; background:rgba(255,255,255,.08); transform:none; }
.sacco-app .sidebar .nav-link.active { color:#fff; background:var(--sacco-navy-2); box-shadow:inset 3px 0 var(--sacco-gold); font-weight:600; }
.sacco-app .sidebar .nav-link.active i { color:var(--sacco-gold); }
.sacco-app .sidebar .nav-item.mt-4 { margin-top:22px !important; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.sacco-app .main-wrapper { margin-left:236px; }

/* Top bar and page rhythm. */
.sacco-app .top-navbar {
    min-height:68px;
    padding:0 28px;
    border-bottom:1px solid var(--sacco-line);
    box-shadow:0 1px 3px rgba(20,42,73,.035);
}
.sacco-app .top-navbar > .d-flex > div:first-child { display:flex; align-items:center; gap:12px; }
.sacco-app .top-navbar h5 { color:var(--sacco-ink) !important; font-size:.96rem; font-weight:700; }
.sacco-app .top-navbar h5::first-letter { text-transform:uppercase; }
.sacco-app .main-content { max-width:none; padding:25px 28px 30px; }
.sacco-app .breadcrumb { margin-bottom:18px; font-size:.72rem; }
.sacco-app .breadcrumb-item a { color:#5d83a3; }
.sacco-app .breadcrumb-item.active { color:var(--sacco-muted); }
.sacco-app .user-info { gap:10px; }
.sacco-app .user-avatar { width:35px; height:35px; background:#dce9ff; color:#2159bf; font-size:.8rem; }
.sacco-app .user-info small { color:var(--sacco-muted) !important; font-size:.68rem; }

/* Compact controls and forms, with enough breathing room for touch. */
.sacco-app label, .sacco-app .form-label { color:#334155; font-size:.75rem; font-weight:600; margin-bottom:5px; }
.sacco-app .form-control, .sacco-app .form-select,
.sacco-app input[type="text"], .sacco-app input[type="number"], .sacco-app input[type="email"],
.sacco-app input[type="password"], .sacco-app input[type="date"], .sacco-app input[type="month"],
.sacco-app input[type="time"], .sacco-app input[type="datetime-local"], .sacco-app input[type="tel"],
.sacco-app input[type="url"], .sacco-app input[type="file"], .sacco-app textarea {
    min-height:46px;
    padding:10px 12px;
    color:var(--sacco-ink);
    border:1px solid #d7e0ea;
    border-radius:7px;
    font-size:1rem;
    line-height:1.35;
    background:#fff;
}
.sacco-app textarea { min-height:104px; }
.sacco-app input[type="file"] { padding:9px 10px; }
.sacco-app .form-control:focus, .sacco-app .form-select:focus { border-color:#78a4c4; box-shadow:0 0 0 3px rgba(74,144,164,.13); }
.sacco-app .input-group-text { min-height:46px; padding:10px 12px; border-color:#d7e0ea; background:#f8fafc; color:var(--sacco-muted); font-size:.9rem; }
.sacco-app .btn { min-height:44px; padding:10px 14px; border-radius:7px; font-size:.85rem; font-weight:600; transition:background .15s, border-color .15s, box-shadow .15s; }
.sacco-app .btn:hover { transform:none; box-shadow:0 3px 9px rgba(28,48,81,.09); }
.sacco-app .btn-sm { min-height:36px; padding:7px 10px; font-size:.78rem; }
.sacco-app .btn-lg { min-height:48px; padding:11px 16px; font-size:.95rem; }
.sacco-app .form-check-input { width:15px; height:15px; margin-top:.18em; }
.sacco-app .form-check-label { font-size:.78rem; font-weight:500; }
.sacco-app .form-text, .sacco-app small.form-text, .sacco-app .field-hint { display:block; margin-top:6px; color:#5f7186; font-size:.78rem; line-height:1.45; }
.sacco-app .required-marker { color:#b42318; font-weight:700; }
.sacco-app .optional-marker { color:#66758a; font-size:.75rem; font-weight:400; }
.sacco-app .field-error, .sacco-app .errorlist { display:block; margin:6px 0 0; padding:0; color:#b42318; font-size:.8rem; font-weight:600; }
.sacco-app .errorlist { list-style:none; }
.sacco-app .form-control.is-invalid, .sacco-app .form-select.is-invalid { border-color:#b42318; background-image:none; }
.sacco-app .form-control[readonly], .sacco-app .form-control:disabled, .sacco-app .form-select:disabled { color:#66758a; background:#f1f4f7; cursor:not-allowed; }
.sacco-app :focus-visible { outline:3px solid rgba(230,184,79,.9); outline-offset:2px; }
.sacco-app .form-error-summary { margin-bottom:18px; padding:13px 16px; color:#7a271a; background:#fff4f2; border:1px solid #f0b7ad; border-left:4px solid #b42318; border-radius:8px; }
.sacco-app .form-error-summary h2 { margin:0 0 6px; font-size:.95rem; }
.sacco-app .form-error-summary ul { margin:0; padding-left:20px; font-size:.82rem; }
.sacco-app .form-error-summary a { color:#7a271a; font-weight:600; }
.sacco-app .password-input-wrap { position:relative; display:flex; align-items:stretch; }
.sacco-app .password-input-wrap .form-control { flex:1; padding-right:48px; }
.sacco-app .password-toggle { position:absolute; right:5px; top:5px; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#53647c; }
.sacco-app .password-toggle:hover { background:#eef3f7; color:#1e3d59; }
.sacco-app form[aria-busy="true"] { opacity:.82; }
.sacco-app form[aria-busy="true"] button[type="submit"] { cursor:wait; }

/* Cards, summaries, tables, badges, alerts. */
.sacco-app .card, .sacco-app .table-card { border:1px solid var(--sacco-line); border-radius:11px; box-shadow:0 4px 16px rgba(28,48,81,.04); }
.sacco-app .card-header, .sacco-app .table-card .card-header { padding:13px 16px; border-bottom:1px solid var(--sacco-line); background:#fafbfd; }
.sacco-app .card-header h5, .sacco-app .card-header h6 { color:var(--sacco-ink); font-size:.88rem; font-weight:700; }
.sacco-app .card-body { padding:16px; }
.sacco-app .table { color:#334155; }
.sacco-app .table thead { background:#f7f9fc; }
.sacco-app .table thead th { padding:9px 10px; color:#5b6f87; font-size:.64rem; font-weight:700; letter-spacing:.06em; }
.sacco-app .table > :not(caption) > * > * { padding:9px 10px; font-size:.77rem; vertical-align:middle; border-color:#edf1f5; }
.sacco-app .table tbody tr:hover { background:#fbfdff; }
.sacco-app .table-card .card-header { padding:10px 12px; }
.sacco-app .table-card .card-body { padding:12px; }
.sacco-app .table thead th { padding:7px 8px; font-size:.62rem; }
.sacco-app .table > :not(caption) > * > * { padding:6px 8px; font-size:.74rem; line-height:1.25; }
.sacco-app .table-sm > :not(caption) > * > * { padding:4px 6px; font-size:.72rem; }
.sacco-app .table .btn-sm { min-height:30px; padding:4px 7px; font-size:.72rem; }
.sacco-app .badge { padding:4px 7px; border-radius:999px; font-size:.64rem; font-weight:700; }
.sacco-app .alert { border:1px solid transparent; border-radius:8px; padding:9px 12px; font-size:.78rem; }
.sacco-app .page-header { margin-bottom:20px; }
.sacco-app .page-header h2 { color:var(--sacco-ink); font-size:1.35rem; font-weight:700; }
.sacco-app .stat-card { border:1px solid rgba(255,255,255,.12); border-radius:11px; box-shadow:0 4px 14px rgba(28,48,81,.08); }
.sacco-app .stat-card .card-body { padding:16px; }

/* Mobile navigation. */
.mobile-nav-toggle { display:none; width:34px; height:34px; padding:0; border:0; border-radius:7px; background:transparent; color:#748399; }
.mobile-nav-toggle:hover { background:#f0f4f8; }
.sidebar-backdrop { display:none; }

@media (max-width:768px) {
    .sacco-app .sidebar { width:236px; transform:translateX(-100%); transition:transform .2s ease; z-index:1050; }
    .sacco-app .main-wrapper { margin-left:0; }
    .sacco-app .top-navbar { padding:0 16px; }
    .sacco-app .main-content { padding:18px 16px 24px; }
    .mobile-nav-toggle { display:grid; place-items:center; }
    body.sidebar-open .sacco-app .sidebar, body.sidebar-open .sidebar { transform:translateX(0); }
    body.sidebar-open .sidebar-backdrop { display:block; position:fixed; inset:0; z-index:1040; background:rgba(15,29,52,.46); }
}
@media (max-width:575.98px) {
    .sacco-app .top-navbar h5 { font-size:.86rem; }
    .sacco-app .user-info > div:last-child { display:none; }
    .sacco-app .main-content { padding:15px 12px 20px; }
    .sacco-app .card-body { padding:13px; }
    .sacco-app .table-responsive { border:1px solid var(--sacco-line); border-radius:8px; }
    .sacco-app .row > [class*="col-"] { margin-bottom:4px; }
}