/* Branch Finance — design tokens inspired by the Lifecare Pharmacy POS reference */
:root {
    --bg: #effaff;
    --surface: #ffffff;
    --surface-2: #f7fbfd;
    --ink: #1f2937;
    --ink-soft: #4b5563;
    --muted: #9ca3af;
    --border: #e5edf2;
    --primary: #1e6ef0;
    --primary-600: #155dcc;
    --accent-green: #1ea672;
    --accent-green-dark: #15835a;
    --warn: #f6c66b;
    --pink: #f29ab0;
    --bank: #7fb6f0;
    --danger: #dc3545;
    --shadow-sm: 0 1px 2px rgba(20, 40, 70, .06);
    --shadow-md: 0 6px 18px rgba(20, 40, 70, .08);
    --radius: 10px;
    --radius-lg: 14px;
}

* { box-sizing: border-box; }

/* ----- Layout ----- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
}
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}
.app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: calc(100vh - 64px);
}
.app-main {
    padding: 24px 28px 48px;
}

/* ----- Topbar ----- */
.app-topbar {
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-left { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-logo {
    width: 40px; height: 40px;
    background: var(--accent-green);
    color: #fff;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: var(--shadow-sm);
}
.brand-name { font-weight: 700; letter-spacing: 1px; font-size: 18px; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); text-decoration: none; }
.user-avatar { font-size: 28px; color: #f0a868; line-height: 1; }
.user-name { font-weight: 500; }
.btn-bell {
    width: 40px; height: 40px; border-radius: 999px;
    background: #e6f4f6; color: var(--ink-soft);
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}

/* ----- Layout ----- */
.app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: calc(100vh - 64px);
}
.app-main {
    padding: 24px 28px 48px;
}
.app-sidebar { background: transparent; padding: 24px 16px; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.side-link i { font-size: 18px; }
.side-link:hover { background: #e3f1f7; }
.side-link.active {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.side-version {
    color: var(--muted);
    font-size: 12px;
    padding: 8px 16px;
    cursor: default;
}

/* ----- Cards ----- */
.card-soft {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}
.card-soft + .card-soft { margin-top: 16px; }
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.page-head h1 { font-size: 20px; font-weight: 700; margin: 0; }
.crumbs { color: var(--ink-soft); font-size: 13px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs .back-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 12px 4px 8px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:12px; font-weight:600; text-decoration:none; transition:all .15s; }
.crumbs .back-pill:hover { background:#e2e8f0; color:#0f172a; }
.crumbs .back-pill i { font-size:13px; }
.crumbs .sep { color:#cbd5e1; font-size:14px; font-weight:300; }
.crumbs .home-link { display:inline-flex; align-items:center; gap:4px; color:#64748b; font-size:13px; }
.crumbs .home-link:hover { color:var(--primary); }
.crumbs .current { color:#0f172a; font-weight:600; font-size:13px; }

/* ----- Tables ----- */
.table-soft { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-soft thead th {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    color: var(--accent-green);
    background: #f5fbf7;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #e1efe6;
    font-weight: 700;
}
.table-soft tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    vertical-align: middle;
}
.table-soft tbody tr:hover { background: var(--surface-2); }
.table-soft .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ----- Buttons ----- */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-success { background: var(--accent-green); border-color: var(--accent-green); }
.btn-success:hover { background: var(--accent-green-dark); border-color: var(--accent-green-dark); }
.btn-pill { border-radius: 999px; padding: 10px 22px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 12px; }
.btn-cash { background: #e9ecef; color: var(--ink); }
.btn-credit { background: var(--warn); color: #4a3500; }
.btn-mpesa { background: var(--pink); color: #5a1830; }
.btn-bank { background: var(--bank); color: #0a3a72; }
.btn-pill:hover { filter: brightness(.95); }

/* ----- Forms ----- */
.form-label { font-weight: 600; color: var(--ink-soft); font-size: 13px; }
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 10px 12px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 110, 240, .15);
}
.input-card {
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    padding: 16px;
    background: #fff;
    position: relative;
    margin-top: 8px;
}
.input-card label.floating {
    position: absolute; top: -10px; left: 14px;
    background: #fff; padding: 0 8px; color: var(--primary);
    font-size: 12px; font-weight: 600;
}

/* ----- Stat cards (dashboard) ----- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.stat-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 20px 22px;
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.stat-card .label { color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.stat-card .value { font-size: 26px; font-weight: 800; margin-top: 0; color: #0f172a; line-height: 1.2; }
.stat-card .delta { font-size: 12px; margin-top: 4px; color: #94a3b8; }

/* ----- Auth ----- */
.auth-main {
    min-height: 100vh; background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px;
    border: 1px solid var(--border);
}
.auth-logo {
    width: 56px; height: 56px; border-radius: 999px;
    background: var(--accent-green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 16px;
}

/* Login split layout with quiet brand slideshow */
.auth-split {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    min-height: 540px;
}
.auth-split .auth-card {
    border: none; border-radius: 0; box-shadow: none;
    align-self: center; max-width: none;
    padding: 48px 56px;
}
.auth-stage {
    position: relative;
    background: #0f3a52;
    overflow: hidden;
    color: #fff;
}
.auth-slideshow { position: absolute; inset: 0; }
.auth-slideshow .slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: authFade 30s infinite;
}
.auth-slideshow .slide:nth-child(1) { animation-delay:  0s; }
.auth-slideshow .slide:nth-child(2) { animation-delay:  6s; }
.auth-slideshow .slide:nth-child(3) { animation-delay: 12s; }
.auth-slideshow .slide:nth-child(4) { animation-delay: 18s; }
.auth-slideshow .slide:nth-child(5) { animation-delay: 24s; }
@keyframes authFade {
    0%   { opacity: 0; transform: scale(1.05); }
    4%   { opacity: 1; transform: scale(1.00); }
    20%  { opacity: 1; transform: scale(1.02); }
    24%  { opacity: 0; transform: scale(1.04); }
    100% { opacity: 0; }
}
.auth-stage-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(8,40,60,.78), rgba(8,40,60,.55) 55%, rgba(8,40,60,.85));
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 36px 40px;
}
.auth-stage-overlay h2 { font-size: 22px; font-weight: 700; margin: 0 0 6px; letter-spacing: .3px; }
.auth-stage-overlay p { margin: 0; font-size: 13px; color: rgba(255,255,255,.82); max-width: 380px; }
@media (max-width: 820px) {
    .auth-split { grid-template-columns: 1fr; max-width: 460px; }
    .auth-stage { min-height: 180px; }
    .auth-split .auth-card { padding: 32px; }
}

/* ----- Status badges ----- */
.badge-status { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.badge-paid    { background: #dff5e9; color: #15835a; }
.badge-partial { background: #fff3d6; color: #8a5a00; }
.badge-unpaid  { background: #fde2e6; color: #a3142a; }
.badge-claimed { background: #e3eefd; color: #15448a; }

/* Closed-day visual cue on tables — subtle, not loud */
.table-soft tbody tr.row-closed td { background: #f6faf7; color: var(--ink-soft); }
.table-soft tbody tr.row-closed td .num { color: var(--ink-soft); }

/* Scroll wrapper so wide tables remain usable on small screens */
.card-soft { overflow-x: auto; }

/* Day-summary report inside modal */
.summary-report { font-size: 13px; }
.summary-report .sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.summary-report .sr-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.summary-report .sr-cell .lbl { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.summary-report .sr-cell .val { font-weight: 700; font-size: 16px; margin-top: 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-report .sr-meta { color: var(--ink-soft); font-size: 12px; margin-bottom: 10px; }

/* ----- Footer total bar ----- */
.total-bar {
    margin-top: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: var(--shadow-sm);
}
.total-bar .total-label { font-weight: 700; color: var(--ink-soft); }
.total-bar .total-value { font-size: 22px; font-weight: 800; }

/* ----- Misc ----- */
a.text-link { color: var(--primary); text-decoration: none; }
a.text-link:hover { text-decoration: underline; }
.muted { color: var(--ink-soft); }
.right { text-align: right; }
.actions { display: flex; gap: 6px; }
.actions .btn { padding: 4px 10px; font-size: 12px; }

/* ----- Unified row actions (square icon buttons, horizontal) ----- */
.actions-th { text-align: right; }
.actions-cell { text-align: right; white-space: nowrap; }
.actions-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.actions-sep {
    width: 1px; height: 22px;
    background: var(--border);
    margin: 0 4px;
    display: inline-block;
}
.btn-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 14px;
    text-decoration: none;
    padding: 0; line-height: 1;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
    cursor: pointer;
}
.btn-icon:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.btn-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-icon-primary { border-color: rgba(30,110,240,.35); color: var(--primary); }
.btn-icon-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-icon-warn { border-color: rgba(246,198,107,.55); color: #8a5a00; }
.btn-icon-warn:hover { background: var(--warn); color: #4a3500; border-color: var(--warn); }
.btn-icon-danger { border-color: rgba(220,53,69,.4); color: var(--danger); }
.btn-icon-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ----- Empty state ----- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-soft); }
.empty-state i { font-size: 36px; opacity: .45; }

/* ----- Petty cash preview block ----- */
.petty-block {
    margin-top: 10px;
    background: linear-gradient(135deg, #f5fbf7, #effaff);
    border: 1px solid #d6ecdc;
    border-radius: 10px;
    padding: 10px 12px;
}
.petty-block dt { font-weight: 500; color: var(--ink-soft); }
.petty-block dd { font-variant-numeric: tabular-nums; }
.petty-block .pc-over { color: var(--danger); font-weight: 700; }

/* ----- SMS / Email log inline list ----- */
.notif-log { margin-top: 14px; }
.notif-log h6 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin: 0 0 8px; }
.notif-log-item {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    background: #fff;
}
.notif-log-item.failed { border-left: 3px solid var(--danger); }
.notif-log-item.sent { border-left: 3px solid var(--accent-green); }
.notif-log-item .channel { font-weight: 700; text-transform: uppercase; font-size: 11px; }
.notif-log-item .resp { color: var(--ink-soft); font-family: Menlo, Consolas, monospace; font-size: 11px; word-break: break-word; }

/* ----- Sidebar toggle (mobile) ----- */
.sidebar-toggle {
    display: none;
    width: 40px; height: 40px; border-radius: 999px;
    background: #e6f4f6; color: var(--ink-soft); border: none;
    align-items: center; justify-content: center; font-size: 20px;
    margin-right: 8px;
}
.sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
    z-index: 80;
}
body.sidebar-open .sidebar-backdrop { display: block; }

@media (max-width: 991.98px) {
    .sidebar-toggle { display: inline-flex; }
    .app-topbar { grid-template-columns: auto 1fr auto; padding: 0 14px; gap: 8px; }
    .app-topbar .brand-name small { display: none !important; }
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed; top: 64px; left: 0; bottom: 0;
        width: 260px; background: var(--surface);
        padding: 16px; transform: translateX(-105%);
        transition: transform .22s ease; z-index: 90;
        box-shadow: var(--shadow-md); overflow-y: auto;
    }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .side-link span { display: inline; }
    .side-link { padding: 12px 14px; }
    .app-main { padding: 16px 14px 32px; }
}

@media (max-width: 575.98px) {
    .page-head h1 { font-size: 18px; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 10px 12px; }
    .stat-card .value { font-size: 16px; }
    .stat-card .label { font-size: 10px; }
    .stat-card .delta { font-size: 9px; }
    .modal-dialog { margin: 0; max-width: 100%; }
    .modal-content { border-radius: 0; min-height: 100vh; }
    .btn-pill { padding: 9px 16px; font-size: 11px; }
    /* iOS/Android zoom prevention */
    .form-control, .form-select { font-size: 16px; padding: 11px 12px; min-height: 44px; }
    .table-soft thead th, .table-soft tbody td { padding: 10px 10px; font-size: 13px; }
    .crumbs { font-size: 12px; }
    .crumbs .back-pill { font-size: 11px; padding: 3px 10px 3px 6px; }
    .crumbs .sep, .crumbs .home-link { display: none; }
    /* Modal backdrop cleanup for mobile */
    body { overflow-y: auto; }
}

/* ----- Toast container ----- */
.toast-stack {
    position: fixed; right: 18px; top: 78px; z-index: 1080;
    display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.toast-fms {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius); padding: 12px 14px;
    box-shadow: var(--shadow-md); font-size: 13px;
    animation: toastIn .22s ease;
}
.toast-fms.success { border-left-color: var(--accent-green); }
.toast-fms.error   { border-left-color: var(--danger); }
@keyframes toastIn { from { transform: translateX(8px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

@media (max-width: 575.98px) {
    .toast-stack {
        position: fixed; left: 16px; right: 16px; top: 16px; max-width: none;
    }
}

/* ----- Enterprise polish ----- */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.kpi-link:focus-visible .stat-card { box-shadow: 0 0 0 3px rgba(30,110,240,.25); }
.btn-pill[disabled], .btn-pill:disabled { opacity: .7; cursor: not-allowed; }
.spinner-border-sm { vertical-align: -.125em; }

/* ============================================================
   Login redesign (v2) — professional, brand-aligned, background slideshow
   ============================================================ */
.auth-shell-v2 {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 20px 20px 70px;
    box-sizing: border-box;
}
.auth-slideshow { position: absolute; inset: 0; }
.auth-slideshow .slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: authFade 25s infinite;
}
.auth-slideshow .slide:nth-child(1) { animation-delay:  0s; }
.auth-slideshow .slide:nth-child(2) { animation-delay:  5s; }
.auth-slideshow .slide:nth-child(3) { animation-delay: 10s; }
.auth-slideshow .slide:nth-child(4) { animation-delay: 15s; }
.auth-slideshow .slide:nth-child(5) { animation-delay: 20s; }
@keyframes authFade {
    0%   { opacity: 0; transform: scale(1.08); }
    5%   { opacity: 1; transform: scale(1.00); }
    20%  { opacity: 1; transform: scale(1.03); }
    25%  { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}
.auth-slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(15,40,60,.78), rgba(15,40,60,.65) 50%, rgba(15,40,60,.85));
}
.auth-card-v2 {
    position: relative; z-index: 2;
    width: 100%; max-width: 440px;
    /* background: rgba(255,255,255,.94); */
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid rgba(229,237,242,.9);
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(15,58,82,.35), 0 10px 25px -10px rgba(30,110,240,.25);
    padding: 36px 36px 32px;
    margin: 40px 20px;
}

.auth-brand { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
    text-align: center;
}
.auth-brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.auth-brand-mark {
    width: 52px; height: 52px; border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-green), #29c08c);
    color: #fff; font-size: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px -6px rgba(30,166,114,.55);
}
.auth-brand-name { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--ink); line-height: 1; }
.auth-brand-tagline { font-size: 12px; color: var(--ink-soft); margin-top: 4px; letter-spacing: .3px; }

.auth-title { font-size: 22px; font-weight: 700; margin: 6px 0 6px; color: var(--ink); }
.auth-subtitle { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 20px; }

.auth-alert {
    display: flex; align-items: center; gap: 10px;
    background: #fde2e6; color: #a3142a; border: 1px solid #f5c2c9;
    border-radius: 12px; padding: 10px 12px; margin-bottom: 16px;
    font-size: 13px; font-weight: 600;
}
.auth-alert i { font-size: 16px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .3px; text-transform: uppercase; }
.auth-input-wrap {
    display: flex; align-items: center;
    background: #fff; border: 1px solid var(--border);
    border-radius: 12px; padding: 0 12px;
    transition: border-color .15s, box-shadow .15s;
}
.auth-input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(30,110,240,.12); }
.auth-input-wrap > i { font-size: 16px; color: var(--ink-soft); }
.auth-input {
    flex: 1; border: 0; outline: 0; background: transparent;
    padding: 12px 10px; font-size: 14px; color: var(--ink); min-height: 44px;
}
.auth-input::placeholder { color: var(--muted); }
.auth-input-toggle {
    border: 0; background: transparent; color: var(--ink-soft);
    padding: 6px 4px; cursor: pointer; font-size: 16px; line-height: 1;
}
.auth-input-toggle:hover { color: var(--primary); }

.auth-submit {
    margin-top: 6px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--primary), #2c8af2);
    color: #fff; font-weight: 700; letter-spacing: .4px;
    border-radius: 12px; padding: 14px 18px; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 10px 22px -8px rgba(30,110,240,.55);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s;
}
.auth-submit:hover { transform: translateY(-1px); filter: brightness(1.04); }
.auth-submit:active { transform: translateY(0); }

.auth-hint { margin: 18px 0 0; text-align: center; color: var(--ink-soft); font-size: 12px; }
.auth-hint code { background: #eef4fb; padding: 2px 6px; border-radius: 6px; color: var(--primary); }

.auth-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #fff;
    padding: 12px 16px;
    margin-top: auto;
}
.auth-center {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.auth-footer code {
    background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.3);
    padding: 2px 8px; border-radius: 6px; color: #fff; font-weight: 600;
}
.auth-footer-sep { opacity: .7; }
.auth-footer i { color: #fff; }

@media (max-width: 480px) {
    .auth-card-v2 { padding: 26px 22px; border-radius: 16px; }
    .auth-title { font-size: 19px; }
    .auth-footer { font-size: 11px; }
}

/* =====================================================================
   Loading + micro-interactions
   ===================================================================== */
#fmsBar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--primary), var(--accent-green));
    box-shadow: 0 0 10px rgba(30,110,240,.6);
    z-index: 9999; transition: width .25s ease, opacity .3s ease;
    pointer-events: none;
}
.kpi-link, .stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.btn:active { transform: scale(.97); }
.btn[disabled] .spinner-border { vertical-align: -2px; }

/* =====================================================================
   Mobile / Android responsiveness audit
   ===================================================================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .table-soft { min-width: 640px; }

/* Modals — Android-safe */
@media (max-width: 575.98px) {
    .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
    .modal-dialog-centered { min-height: calc(100% - 1rem); }
    .modal-fullscreen-sm-down .modal-dialog,
    .modal-fullscreen-sm-down.modal-dialog { margin: 0; max-width: 100%; height: 100%; }
    .modal-fullscreen-sm-down .modal-content { border-radius: 0; min-height: 100%; }
    .modal-body { -webkit-overflow-scrolling: touch; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-footer > .btn { flex: 1 1 100%; }
    .summary-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .app-main { padding: 16px 14px 32px; }
    .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-head .btn { width: 100%; justify-content: center; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card .value { font-size: 20px; }
    input, select, textarea, .form-control, .form-select { font-size: 16px !important; min-height: 44px; }
    .btn { min-height: 42px; }
    .btn-sm { min-height: 34px; }
    .toast-stack { left: 12px !important; right: 12px !important; bottom: 12px !important; top: auto !important; }
    .sidebar-backdrop.show { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; }
    .crumbs { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .crumbs .home-link, .crumbs .sep { display: none; }
    .crumbs .current { font-size: 11px; }
    .crumbs .back-pill { font-size: 10px; padding: 2px 8px 2px 5px; }
    .dash-filter { position: static !important; }
    .dash-filter .quick { width: 100%; }
    .dash-filter .quick a { flex: 1; text-align: center; }
    .filter-chip { font-size: 11px; }
}

@media (max-width: 420px) {
    .auth-card-v2 { padding: 22px 18px; }
    .page-head h1 { font-size: 20px; }
    .crumbs a:not(:last-child), .crumbs .sep { display: none; }
}

/* =====================================================================
   v3 — Corporate polish + Android-first refinement
   (No new colors; only spacing, weight, radius, elevation, motion)
   ===================================================================== */

/* Numeric columns: tabular figures everywhere money shows */
.num, .table-soft .num, .stat-card .value, .total-bar .total-value,
.summary-report .sr-cell .val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; }

/* Cards — uniform 12px radius, hairline border, soft elevation */
.card-soft { border-radius: 12px; box-shadow: 0 1px 2px rgba(20,40,70,.04), 0 4px 14px -8px rgba(20,40,70,.08); }
.card-soft + .card-soft { margin-top: 18px; }

/* Page heading rhythm */
.page-head h1 { letter-spacing: -.01em; }
.crumbs { letter-spacing: .01em; }

/* Tables — sticky header inside scroll container, refined row hover */
.table-scroll { border-radius: 10px; }
.table-scroll > .table-soft thead th { position: sticky; top: 0; z-index: 2; background: #f5fbf7; }
.table-soft tbody tr { transition: background .12s ease; }
.table-soft tbody tr:hover { background: #f1f8fc; }
.table-soft tbody td { font-size: 13.5px; }

/* Buttons — consistent corporate height */
.btn { border-radius: 10px; font-weight: 600; }
.btn-pill { letter-spacing: .6px; }
.btn-primary, .btn-success, .btn-warning, .btn-danger { box-shadow: 0 6px 14px -8px rgba(20,40,70,.25); }

/* KPI card — tighter, more confident */
.stat-card { border-radius: 12px; padding: 12px 16px; }
.stat-card .label { font-weight: 600; letter-spacing: .05em; font-size: 10px; margin-bottom: 2px; }
.stat-card .value { font-size: 18px; letter-spacing: -.01em; }
.stat-card .delta { font-size: 10px; margin-top: 2px; }
.stat-card:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -16px rgba(20,40,70,.25); }

/* Badges — uniform shape */
.badge-status { padding: 5px 10px; border-radius: 6px; font-size: 10.5px; }

/* Branch chip in topbar */
.branch-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: #e8f3ec; color: var(--accent-green-dark);
    font-weight: 700; font-size: 12px; letter-spacing: .3px;
    border: 1px solid #d3ead8; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.branch-chip.missing {
    background: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}
.branch-chip i { font-size: 13px; }

/* Top app bar elevation when scrolled */
.app-topbar { box-shadow: 0 1px 0 var(--border); }

/* Inputs — consistent corporate feel */
.form-control, .form-select { box-shadow: none; transition: border-color .12s, box-shadow .12s; }

/* Skeleton shimmer for loading states */
.skeleton { position: relative; overflow: hidden; background: #eef3f6; border-radius: 8px; }
.skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* =====================================================================
   Android-first refinements
   ===================================================================== */

/* Use dynamic viewport height so Chrome Android URL bar doesn't clip */
@supports (height: 100dvh) {
    .auth-shell-v2 { height: 100dvh; }
    .app-shell { min-height: calc(100dvh - 64px); }
}

/* Safe-area insets for notched Android devices */
.app-topbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.app-main { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); }

/* Sidebar drawer animation polish */
@media (max-width: 991.98px) {
    .app-sidebar { box-shadow: 12px 0 28px -16px rgba(15,40,60,.28); }
    .sidebar-backdrop { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: opacity .2s ease; }
    body.sidebar-open { overflow: hidden; }
    .branch-chip { max-width: 140px; font-size: 11px; padding: 5px 10px; }
}

/* Phones — denser cards, larger touch areas, cleaner page-head */
@media (max-width: 575.98px) {
    .app-topbar { height: 58px; }
    .app-shell { min-height: calc(100vh - 58px); }
    .app-sidebar { top: 58px; }
    .brand-name { font-size: 16px; letter-spacing: .5px; }
    .brand-logo { width: 34px; height: 34px; font-size: 18px; }
    .topbar-date { display: none !important; }
    .user-name { display: none; }
    .btn-bell { width: 36px; height: 36px; font-size: 16px; }
    .card-soft { padding: 16px; border-radius: 12px; }
    .stat-card { padding: 14px; }
    .stat-card .value { font-size: 20px; }
    .page-head { margin-bottom: 14px; }
    .page-head h1 { font-size: 18px; }
    .table-soft thead th { font-size: 11px; padding: 10px 10px; }
    .table-soft tbody td { font-size: 13px; padding: 10px; }
    .actions { flex-wrap: wrap; }
    .actions .btn { padding: 6px 10px; font-size: 12px; min-height: 36px; }
    /* Form rows stack cleanly */
    .row > [class*="col-"] + [class*="col-"] { margin-top: 12px; }
    /* Bottom-sheet feel for primary modals */
    .modal-fullscreen-sm-down .modal-content { border-radius: 16px 16px 0 0; }
}

/* Tap feedback — subtle, snappy */
@media (hover: none) {
    .table-soft tbody tr:hover { background: transparent; }
    .btn:active { transform: scale(.98); filter: brightness(.97); }
    .side-link:active { background: #e3f1f7; }
}

/* Print-friendly reports */
@media print {
    .app-topbar, .app-sidebar, .page-head .btn, .actions, .sidebar-backdrop { display: none !important; }
    .app-shell { grid-template-columns: 1fr; }
    .app-main { padding: 0; }
    .card-soft { box-shadow: none; border-color: #ccc; }
}

/* =====================================================================
   v4 — system-wide responsive hardening for Android and small screens
   ===================================================================== */
html { overflow-x: hidden; }
body { overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
.app-shell, .app-main, .card-soft, .stat-grid, .table-scroll, .table-responsive,
.page-head, .total-bar, form, fieldset { min-width: 0; }
.app-main { width: 100%; max-width: 100vw; }
.card-soft { overflow-x: visible; }
.table-scroll, .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.table-scroll > .table-soft,
.table-responsive > .table,
.table-responsive > .table-soft { min-width: 680px; margin-bottom: 0; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stat-grid > *, .kpi-link, .stat-card { min-width: 0; }
.stat-card { height: 100%; overflow: hidden; }
.stat-card .label, .stat-card .delta { overflow-wrap: anywhere; }
.stat-card .value {
    line-height: 1.15;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}
.page-head > div { min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }
.actions { min-width: 0; flex-wrap: wrap; }
.modal { padding-left: 0 !important; padding-right: 0 !important; }
.modal-dialog { max-width: min(100% - 1rem, var(--bs-modal-width, 500px)); }
.modal-content { max-height: calc(100dvh - 1rem); overflow: hidden; }
.modal-dialog-scrollable .modal-content { max-height: calc(100dvh - 1rem); }
.modal-body { overflow-x: hidden; }

@media (max-width: 991.98px) {
    .app-topbar { min-width: 0; }
    .topbar-left, .topbar-right, .brand { min-width: 0; }
    .brand { justify-content: center; overflow: hidden; }
    .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-sidebar { width: min(82vw, 280px); max-width: calc(100vw - 28px); }
}

@media (max-width: 767.98px) {
    .app-main { padding: 14px 12px max(28px, calc(env(safe-area-inset-bottom) + 20px)); }
    .page-head { align-items: stretch; }
    .page-head .btn { min-height: 44px; }
    .card-soft { padding: 14px; }
    form.card-soft.d-flex { flex-direction: column; align-items: stretch !important; }
    form.card-soft.d-flex > * { width: 100%; min-width: 0; }
    form.card-soft .row .btn { width: 100%; justify-content: center; }
    .total-bar { align-items: stretch; flex-direction: column; gap: 8px; padding: 14px; }
    .total-bar .total-value { font-size: 20px; overflow-wrap: anywhere; }
    .row > [class*="col-"] + [class*="col-"] { margin-top: 0; }
    .dash-filter .d-flex { min-width: 0; }
    .filter-chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dash-filter .quick { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .dash-filter .quick a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 8px; }
}

@media (max-width: 575.98px) {
    .app-topbar { grid-template-columns: auto minmax(72px, 1fr) auto; gap: 6px; padding-inline: 10px; }
    .sidebar-toggle { width: 38px; height: 38px; margin-right: 4px; flex: 0 0 auto; }
    .branch-chip { max-width: 112px; padding: 5px 8px; }
    .topbar-right { gap: 8px; }
    .user-avatar { font-size: 24px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .stat-card { padding: 13px 12px; }
    .stat-card .label { font-size: 10.5px; line-height: 1.25; letter-spacing: .35px; }
    .stat-card .value { font-size: 18px; margin-top: 7px; }
    .stat-card .delta { font-size: 11px; line-height: 1.3; }
    .table-scroll,
    .table-responsive { margin-inline: -2px; padding-bottom: 2px; }
    .table-scroll::after,
    .table-responsive::after {
        content: "";
        position: sticky;
        right: 0;
        display: block;
        width: 22px;
        height: 1px;
        margin-top: -1px;
        background: linear-gradient(90deg, transparent, var(--surface));
        pointer-events: none;
    }
    .modal-dialog,
    .modal-dialog-centered { margin: 0; max-width: 100%; min-height: 100dvh; }
    .modal-content,
    .modal-dialog-scrollable .modal-content { min-height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .modal-header, .modal-footer { flex-shrink: 0; }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 380px) {
    .app-main { padding-inline: 10px; }
    .stat-grid { grid-template-columns: 1fr !important; }
    .dash-filter .quick { grid-template-columns: 1fr; }
    .branch-chip { display: none; }
}

/* ===== v10: premium loading + confirm modal ===== */
.fms-skel {
    display: inline-block;
    width: 80%;
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef2f7 0%, #f7f9fc 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: fmsShimmer 1.2s ease-in-out infinite;
}
@keyframes fmsShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.fms-confirm-modal .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}
.fms-confirm-modal .modal-title { font-weight: 700; }
.fms-confirm-modal .btn-pill { padding: 8px 20px; font-weight: 600; }

button[disabled] .spinner-border { vertical-align: -2px; }

/* ===== v11: chart polish + skeleton row ===== */
.fms-skel-row td { padding: 14px 12px; }
.fms-skel-row .fms-skel { width: 100%; height: 12px; }
.chart-box { background:#fff; border:1px solid var(--border, #e7eef5); border-radius:14px; padding:16px; height:100%; }
.chart-title { font-size:13px; font-weight:700; color:var(--ink, #1f2d3d); margin-bottom:6px; letter-spacing:.2px; }
.chart-sub   { font-size:11px; color:var(--muted, #6b7a8c); margin-bottom:10px; }
.chart-empty { text-align:center; color:var(--muted, #6b7a8c); padding:48px 12px; font-size:13px; }
.apex-chart-host { min-height: 280px; }
@media (prefers-reduced-motion: reduce) {
  #fmsBar, .fms-skel { transition: none !important; animation: none !important; }
}

/* ===== ONA EYE CARE preview card ===== */
.ona-report{border:1px solid #e6ebf2;background:linear-gradient(180deg,#fff,#fbfcfd)}
.ona-report .ona-header{border-bottom:2px solid #0a2540;padding-bottom:8px;margin-bottom:14px}
.ona-report .ona-brand{color:#0a2540;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ona-report .ona-divider{height:1px;background:linear-gradient(90deg,transparent,#cbd5e1,transparent);margin:10px 0}
.ona-report .ona-mono{font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.ona-report .ona-counts{border-top:1px dashed #e2e8f0;padding-top:10px;margin-top:6px}
.ona-report .ona-count{flex:1 1 22%;display:flex;flex-direction:column;align-items:center;text-align:center;background:#f8fafc;border-radius:8px;padding:8px 4px;min-width:60px}
.ona-report .ona-count span:first-child{font-size:10px;letter-spacing:.08em;color:#64748b}
.ona-report .ona-count span:last-child{font-size:18px;color:#0a2540;margin-top:2px}

/* ============================================================
   v13 — Enterprise polish layer (system-wide, additive only)
   Targets existing global selectors used across all pages:
   .card-soft, .table, .btn, .form-control, .form-label,
   .modal-content, .kpi, .page-header, .badge, etc.
   ============================================================ */

:root {
  --ent-ink: #0b1a2b;
  --ent-ink-soft: #475569;
  --ent-muted: #64748b;
  --ent-border: #e3e9f0;
  --ent-border-strong: #cfd8e3;
  --ent-surface: #ffffff;
  --ent-surface-2: #f6f9fc;
  --ent-primary: #1e6ef0;
  --ent-primary-700: #1357c4;
  --ent-success: #0f9d6b;
  --ent-warning: #d68910;
  --ent-danger: #c0392b;
  --ent-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --ent-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --ent-shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --ent-radius: 10px;
  --ent-radius-lg: 14px;
  --ent-fs-xs: 11px;
  --ent-fs-sm: 12.5px;
  --ent-fs-base: 14px;
}

/* Typography rhythm */
body { font-feature-settings: "cv02","cv03","cv04","ss01"; -webkit-font-smoothing: antialiased; color: var(--ent-ink); }
h1, .h1 { font-weight: 700; letter-spacing: -0.02em; color: var(--ent-ink); }
h2, .h2 { font-weight: 700; letter-spacing: -0.015em; color: var(--ent-ink); }
h3, .h3, h4, .h4 { font-weight: 600; letter-spacing: -0.01em; color: var(--ent-ink); }
.text-muted, .muted { color: var(--ent-muted) !important; }

/* Page header — confident hierarchy */
.page-header { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ent-border); }
.page-header h1, .page-header .h1 { font-size: 22px; margin: 0 0 4px; }
.page-header .lead, .page-header .subtitle { font-size: 13px; color: var(--ent-muted); margin: 0; }

/* Cards — crisper borders, less gradient noise */
.card-soft, .card {
  background: var(--ent-surface);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  box-shadow: var(--ent-shadow-xs);
}
.card-soft .card-header, .card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ent-border);
  padding: 14px 18px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ent-ink);
  letter-spacing: -0.005em;
}
.card-soft .card-body, .card .card-body { padding: 18px; }

/* KPI tiles — enterprise dashboard */
.kpi {
  background: var(--ent-surface);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  padding: 16px 18px;
  box-shadow: var(--ent-shadow-xs);
  transition: box-shadow .15s ease, transform .15s ease;
}
.kpi:hover { box-shadow: var(--ent-shadow-sm); }
.kpi .kpi-label,
.kpi .label { font-size: var(--ent-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ent-muted); font-weight: 600; }
.kpi .kpi-value,
.kpi .value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ent-ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi .kpi-delta { font-size: 11.5px; font-weight: 600; margin-top: 6px; }
.kpi .kpi-delta.up { color: var(--ent-success); }
.kpi .kpi-delta.down { color: var(--ent-danger); }

/* Tables — enterprise grade */
.table {
  --bs-table-bg: transparent;
  font-size: 13px;
  color: var(--ent-ink);
  border-color: var(--ent-border);
}
.table thead th {
  background: var(--ent-surface-2);
  color: var(--ent-ink-soft);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--ent-border-strong);
  padding: 11px 12px;
  white-space: nowrap;
  position: relative;
}
.table tbody td {
  padding: 12px;
  border-color: var(--ent-border);
  vertical-align: middle;
}
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background: #f1f6fb; }
.table tfoot td, .table .totals-row td {
  background: var(--ent-surface-2);
  font-weight: 700;
  border-top: 2px solid var(--ent-border-strong);
  font-variant-numeric: tabular-nums;
}
.table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sticky table headers inside scroll containers */
.table-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--ent-border); border-radius: var(--ent-radius-lg); }
.table-scroll .table { margin: 0; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--ent-border-strong); }

/* Buttons — consistent weight, less rubbery */
.btn { font-weight: 600; font-size: 13px; letter-spacing: -.005em; border-radius: 8px; padding: 7px 14px; transition: background-color .12s, box-shadow .12s, transform .04s; }
.btn:active { transform: translateY(1px); }
.btn-pill { border-radius: 999px; padding: 7px 16px; }
.btn-primary { background: var(--ent-primary); border-color: var(--ent-primary); }
.btn-primary:hover { background: var(--ent-primary-700); border-color: var(--ent-primary-700); }
.btn-outline-secondary { color: var(--ent-ink-soft); border-color: var(--ent-border-strong); }
.btn-outline-secondary:hover { background: var(--ent-surface-2); color: var(--ent-ink); border-color: var(--ent-border-strong); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(30, 110, 240, .25); outline: none; }

/* Forms — clearer focus, better grouping */
.form-label { font-size: 12px; font-weight: 600; color: var(--ent-ink-soft); letter-spacing: .01em; margin-bottom: 5px; text-transform: none; }
.form-control, .form-select {
  font-size: 13.5px;
  padding: 8px 12px;
  border: 1px solid var(--ent-border-strong);
  border-radius: 8px;
  background: var(--ent-surface);
  color: var(--ent-ink);
  transition: border-color .12s, box-shadow .12s;
}
.form-control::placeholder { color: #94a3b8; }
.form-control:focus, .form-select:focus {
  border-color: var(--ent-primary);
  box-shadow: 0 0 0 3px rgba(30, 110, 240, .15);
  outline: none;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ent-danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .15); }
.invalid-feedback { font-size: 11.5px; font-weight: 500; }
.form-text { color: var(--ent-muted); font-size: 11.5px; }
.input-group-text { background: var(--ent-surface-2); border-color: var(--ent-border-strong); color: var(--ent-ink-soft); font-size: 12.5px; }

/* Field group / fieldset visual */
.form-section {
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-lg);
  padding: 18px;
  margin-bottom: 18px;
  background: var(--ent-surface);
}
.form-section > .form-section-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ent-muted); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ent-border);
}

/* Modals — quieter chrome, sharper title */
.modal-content { border: 1px solid var(--ent-border); border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .22); }
.modal-header { border-bottom: 1px solid var(--ent-border); padding: 16px 20px; }
.modal-title { font-weight: 700; letter-spacing: -.01em; font-size: 16px; }
.modal-body { padding: 20px; font-size: 13.5px; }
.modal-footer { border-top: 1px solid var(--ent-border); padding: 14px 20px; gap: 8px; }

/* Badges */
.badge { font-weight: 600; font-size: 11px; padding: 4px 8px; border-radius: 6px; letter-spacing: .02em; }
.badge.bg-success-soft { background: #e6f7ef; color: var(--ent-success); }
.badge.bg-warning-soft { background: #fdf3e2; color: var(--ent-warning); }
.badge.bg-danger-soft  { background: #fbeae7; color: var(--ent-danger); }
.badge.bg-info-soft    { background: #e7f0fc; color: var(--ent-primary-700); }

/* Empty / loading / error states */
.empty-state { text-align: center; padding: 48px 24px; color: var(--ent-muted); }
.empty-state .empty-icon { font-size: 36px; color: #cbd5e1; margin-bottom: 10px; }
.empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--ent-ink); margin: 0 0 4px; }
.empty-state .empty-sub { font-size: 12.5px; color: var(--ent-muted); }
.state-error { border-left: 3px solid var(--ent-danger); background: #fef6f5; color: #7a2218; padding: 12px 14px; border-radius: 8px; font-size: 13px; }
.state-success { border-left: 3px solid var(--ent-success); background: #effaf4; color: #0a5d40; padding: 12px 14px; border-radius: 8px; font-size: 13px; }

/* Pagination */
.pagination { gap: 4px; }
.pagination .page-link { border-radius: 8px !important; border: 1px solid var(--ent-border); color: var(--ent-ink-soft); font-size: 12.5px; font-weight: 600; padding: 6px 10px; }
.pagination .page-item.active .page-link { background: var(--ent-primary); border-color: var(--ent-primary); color: #fff; }

/* Filter bar above tables */
.filters-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 14px 16px; background: var(--ent-surface); border: 1px solid var(--ent-border); border-radius: var(--ent-radius-lg); margin-bottom: 14px; }
.filters-bar .form-label { margin-bottom: 4px; }
.filters-bar .form-control, .filters-bar .form-select { min-width: 140px; }

/* Sidebar refinement */
.app-sidebar { border-right: 1px solid var(--ent-border); }
.app-sidebar .nav-link { font-size: 13px; font-weight: 500; color: var(--ent-ink-soft); border-radius: 8px; padding: 8px 12px; }
.app-sidebar .nav-link:hover { background: var(--ent-surface-2); color: var(--ent-ink); }
.app-sidebar .nav-link.active { background: #e7f0fc; color: var(--ent-primary-700); font-weight: 600; }

/* Skeleton shimmer (already used by loading.js) — calmer */
.fms-skel { background: linear-gradient(90deg, #eef2f7 0%, #f6f9fc 50%, #eef2f7 100%); background-size: 200% 100%; animation: fmsShimmer 1.2s linear infinite; border-radius: 6px; }
@keyframes fmsShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Tabular numerics everywhere it matters */
.money, .num, td.money, .table .money { font-variant-numeric: tabular-nums; }

/* Responsive — tables become scroll containers on small screens */
@media (max-width: 768px) {
  .app-main { padding: 16px 14px 40px; }
  .page-header h1 { font-size: 19px; }
  .kpi .kpi-value, .kpi .value { font-size: 20px; }
  .table-responsive { border: 1px solid var(--ent-border); border-radius: var(--ent-radius-lg); }
  .filters-bar { padding: 12px; }
  .filters-bar .form-control, .filters-bar .form-select { min-width: 100%; flex: 1 1 100%; }
  .modal-body { padding: 16px; }
}

/* Accessibility — visible focus ring on interactive controls */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--ent-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Print — reports */
@media print {
  .app-sidebar, .app-topbar, .filters-bar, .btn, .pagination { display: none !important; }
  .app-main { padding: 0; }
  .card-soft, .card { border: none; box-shadow: none; }
  .table thead th { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Collection form — premium professional refresh (scoped to .collection-premium)
   Visual-only: no markup or JS contracts changed.
   ───────────────────────────────────────────────────────────────────────── */
.collection-premium {
  --cp-surface: #ffffff;
  --cp-surface-2: #f8fafc;
  --cp-border: #e6eaf2;
  --cp-border-strong: #d6dbe6;
  --cp-text: #0f172a;
  --cp-muted: #64748b;
  --cp-accent: #0a2540;
  --cp-accent-soft: #eef2f7;
  --cp-gold: #c79a3a;
  --cp-radius: 16px;
  --cp-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 32px -20px rgba(15,23,42,.18);
}
.collection-premium .cp-main {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  padding: 28px 28px 24px;
  position: relative;
}
.collection-premium .cp-main::before {
  content: ""; display: block; position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: var(--cp-radius) var(--cp-radius) 0 0;
  background: linear-gradient(90deg, var(--cp-accent) 0%, #1a3a66 55%, var(--cp-gold) 100%);
}
.collection-premium .cp-main hr {
  margin: 28px -28px;
  border: 0; border-top: 1px solid var(--cp-border);
}
.collection-premium .cp-main h2.h6 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cp-accent); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.collection-premium .cp-main h2.h6 i { color: var(--cp-gold); }
.collection-premium .form-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cp-muted); font-weight: 600; margin-bottom: 6px;
}
.collection-premium .form-control,
.collection-premium .form-select {
  border-radius: 10px;
  border: 1px solid var(--cp-border-strong);
  height: 42px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.collection-premium .form-control:focus,
.collection-premium .form-select:focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px rgba(10,37,64,.10);
}
.collection-premium .form-control-sm,
.collection-premium .form-select-sm { height: 36px; font-size: 13px; }
.collection-premium .btn-pill { border-radius: 999px; padding: .45rem 1rem; font-weight: 600; }
.collection-premium .btn-outline-primary { border-color: var(--cp-accent); color: var(--cp-accent); }
.collection-premium .btn-outline-primary:hover { background: var(--cp-accent); color: #fff; }
.collection-premium .btn-primary {
  background: var(--cp-accent); border-color: var(--cp-accent);
  box-shadow: 0 6px 18px -10px rgba(10,37,64,.6);
}
.collection-premium .btn-primary:hover { background: #14365b; border-color: #14365b; }
.collection-premium .table-soft { font-size: 13.5px; }
.collection-premium .table-soft thead th {
  background: var(--cp-surface-2);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 11px; color: var(--cp-muted); font-weight: 600;
  border-bottom: 1px solid var(--cp-border);
}
.collection-premium .table-soft tbody tr { transition: background .12s; }
.collection-premium .table-soft tbody tr:hover { background: var(--cp-accent-soft); }
.collection-premium .ona-report {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  padding: 22px;
  position: sticky; top: 16px;
}
.collection-premium .ona-report .ona-brand {
  color: var(--cp-accent) !important;
  border-left: 3px solid var(--cp-gold);
  padding-left: 10px;
}
.collection-premium .ona-divider {
  height: 1px; background: linear-gradient(90deg, transparent, var(--cp-border), transparent);
  margin: 14px 0;
}
.collection-premium .ona-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "tnum";
  letter-spacing: -.01em;
}
.collection-premium .ona-count {
  flex: 1 1 0; min-width: 80px;
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-border);
  border-radius: 10px; padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.collection-premium .badge.bg-primary-subtle {
  background: var(--cp-accent) !important; color: #fff !important;
  letter-spacing: .12em; font-size: 10px; padding: 4px 8px;
}
.collection-premium .alert {
  border-radius: 12px; border: 1px solid var(--cp-border);
  font-size: 13px;
}
.collection-premium .list-group-item-action:hover { background: var(--cp-accent-soft); }
@media (max-width: 991.98px) {
  .collection-premium .ona-report { position: static; }
  .collection-premium .cp-main { padding: 20px; }
  .collection-premium .cp-main hr { margin: 22px -20px; }
}
@media print {
  .collection-premium .col-lg-4 { display: none; }
  .collection-premium .col-lg-8 { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .collection-premium .cp-main { box-shadow: none; border: none; padding: 0; }
}

/* =========================================================
   Communication Center — Compose (scoped .cc-* styles)
   ========================================================= */
.cc-wrap { max-width: 1180px; margin: 0 auto; }
.cc-steps { gap: .25rem; flex-wrap: wrap; }
.cc-steps .nav-link {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bs-light, #f6f7fb);
  color: #4a5567; border: 1px solid #e6e9ef;
  padding: .55rem 1rem; border-radius: 999px; font-weight: 500;
  transition: all .15s ease;
}
.cc-steps .nav-link:hover { border-color: #c7d2fe; color: #1e3a8a; }
.cc-steps .nav-link.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.cc-steps .cc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.25); font-size: .78rem; font-weight: 700;
}
.cc-steps .nav-link:not(.active) .cc-num { background: #e0e7ff; color: #3730a3; }

.cc-rows-wrap { max-height: 460px; overflow: auto; border: 1px solid #eef0f4; border-radius: 8px; }
.cc-thead th { position: sticky; top: 0; background: #fafbfd; z-index: 1; }

.cc-preview {
  min-height: 140px; padding: 1rem 1.1rem;
  border-radius: 10px; border: 1px solid #e6e9ef;
  background: linear-gradient(180deg, #fafbff, #f5f7fb);
  white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem; color: #1f2937;
}

.cc-confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
.cc-confirm-grid > div {
  display: flex; justify-content: space-between; padding: .55rem .8rem;
  background: #f8fafc; border: 1px solid #eef0f4; border-radius: 8px;
}
.cc-confirm-grid span { color: #64748b; }
.cc-confirm-grid b { color: #0f172a; }

.cc-send-box {
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(79,70,229,.05));
  border: 1px dashed #c7d2fe; border-radius: 10px;
}

#cc-send[aria-busy="true"] { opacity: .8; cursor: progress; }

@media (max-width: 640px) {
  .cc-steps .nav-link { padding: .45rem .7rem; font-size: .85rem; }
  .cc-confirm-grid { grid-template-columns: 1fr; }
}

/* ===== Sidebar groups (Finance / HR / Settings) ===== */
.side-group { display: flex; flex-direction: column; }
.side-group-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; background: transparent; border: 0;
  color: inherit; font-weight: 600; text-align: left; width: 100%;
  cursor: pointer; border-radius: .5rem;
}
.side-group-head:hover { background: rgba(0,0,0,.04); }
.side-group-head span { flex: 1; }
.side-chev { transition: transform .18s ease; opacity: .6; font-size: .8em; }
.side-group.open .side-chev { transform: rotate(180deg); }
.side-group-body { display: none; padding-left: .8rem; border-left: 2px solid rgba(0,0,0,.06); margin-left: .9rem; }
.side-group.open .side-group-body { display: flex; flex-direction: column; gap: .15rem; }
.side-group-body .side-link { padding-left: .8rem; font-size: .92em; }

/* ===== Communication Center premium grid ===== */
.cc-pro-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cc-pro-card {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .9rem 1rem; background: #fff; border: 1px solid #e7e9ee;
  border-left: 4px solid #cfd4dc; border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(20,20,40,.04);
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cc-pro-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,20,40,.1); border-color: #6366f1; }
.cc-pro-card:active { transform: translateY(0); }
.cc-pro-action {
  display: none; font-size: .7rem; color: #6366f1; margin-top: .2rem; font-weight: 600;
}
.cc-pro-card:hover .cc-pro-action { display: block; }
.cc-pro-card.risk-low    { border-left-color: #1f9d55; }
.cc-pro-card.risk-medium { border-left-color: #d97706; }
.cc-pro-card.risk-high   { border-left-color: #dc2626; }

/* ===== Premium shared form styles ===== */
.fm-wrap { max-width:820px; margin:0 auto; }
.fm-card { background:#fff; border-radius:16px; box-shadow:0 2px 16px rgba(15,23,42,.06); overflow:hidden; }
.fm-head { padding:24px 32px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:12px; }
.fm-head-icon { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#1e6ef0,#1357c4);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0; }
.fm-head-text { flex:1; }
.fm-head-text h2 { margin:0; font-size:18px; font-weight:700; color:#0f172a; }
.fm-head-text p { margin:2px 0 0; font-size:13px; color:#64748b; }
.fm-body { padding:28px 32px; }
.fm-field { margin-bottom:20px; }
.fm-field label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#334155; margin-bottom:6px; }
.fm-field label i { color:#1e6ef0; font-size:15px; }
input.fm-input, select.fm-input, textarea.fm-input { width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px;
  transition:border-color .2s,box-shadow .2s; background:#fff; font-family:inherit; box-sizing:border-box; }
input.fm-input:focus, select.fm-input:focus, textarea.fm-input:focus { outline:none; border-color:#1e6ef0; box-shadow:0 0 0 3px rgba(30,110,240,.1); }
input.fm-input:hover, select.fm-input:hover, textarea.fm-input:hover { border-color:#cbd5e1; }
.fm-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fm-footer { padding:20px 32px; border-top:1px solid #f1f5f9; display:flex; gap:12px; align-items:center; background:#fafbfc; }
@media(max-width:640px){ .fm-row{grid-template-columns:1fr} .fm-body{padding:20px} }
.cc-pro-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.cc-pro-meta { flex: 1; min-width: 0; }
.cc-pro-name { font-weight: 600; }
.cc-pro-sub  { display: flex; gap: .8rem; flex-wrap: wrap; color: #6b7280; font-size: .82em; margin: .15rem 0 .4rem; }
.cc-pro-sub i { margin-right: .15rem; }
.cc-pro-balance { font-weight: 700; font-size: 1.05em; color: #111827; }
.cc-pro-tags { display: flex; gap: .35rem; margin-top: .3rem; }
.cc-pro-risk {
  font-size: .72em; padding: .15rem .55rem; border-radius: 99px; font-weight: 600;
  background: #e5e7eb; color: #374151;
}
.cc-pro-risk.risk-low    { background: #dcfce7; color: #166534; }
.cc-pro-risk.risk-medium { background: #fef3c7; color: #92400e; }
.cc-pro-risk.risk-high   { background: #fee2e2; color: #991b1b; }
.cc-pro-age { font-size: .72em; padding: .15rem .55rem; border-radius: 99px; background: #f3f4f6; color: #6b7280; }
.cc-pro-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.cc-pro-dot.low { background: #1f9d55; }
.cc-pro-dot.med { background: #d97706; }
.cc-pro-dot.high{ background: #dc2626; }
.cc-pro-search { position: relative; }
.cc-pro-search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.cc-pro-search input { padding-left: 2rem; min-width: 260px; }

.cc-pro-drawer { width: min(520px, 95vw); }
.cc-dw-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.cc-tl { position: relative; padding-left: 1rem; }
.cc-tl-item { position: relative; padding: .35rem 0 .6rem .9rem; border-left: 2px solid #e5e7eb; margin-left: .2rem; }
.cc-tl-dot  { position: absolute; left: -7px; top: .75rem; width: 12px; height: 12px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px #fff; }

/* ===== Expense Management ===== */
.em-kpi { background: linear-gradient(180deg, #fff, #f9fafb); }
.em-form { padding: 1.25rem; }

/* ===== Communication Center — Stepper ===== */
.cc-stepper { display: flex; align-items: center; justify-content: center; gap: 0; }
.cc-step { display: flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border-radius: .5rem; font-size: .9rem; font-weight: 500; color: #6b7280; background: transparent; transition: all .2s; }
.cc-step.active { color: #111827; background: #f3f4f6; font-weight: 600; }
.cc-step-num { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d1d5db; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.cc-step.active .cc-step-num { border-color: #6366f1; background: #6366f1; color: #fff; }
.cc-step-line { flex: 1; height: 2px; background: #e5e7eb; min-width: 2rem; }
.cc-step.active + .cc-step-line { background: #6366f1; }

/* ===== Communication Center — Compose ===== */
.cc-pane { animation: ccFadeIn .2s ease; }
@keyframes ccFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.cc-thead th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; border-bottom: 2px solid #e5e7eb; padding: .5rem .75rem; }
.cc-preview { font-size: .95rem; line-height: 1.6; color: #1f2937; min-height: 3rem; }
.cc-result-box { border-radius: .5rem; }

/* ====== Communication Center (system-tone restyle) ====== */
.cc-search { position: relative; min-width: 260px; }
.cc-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.cc-search .form-control { padding-left: 30px; }

.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cc-card {
  display: flex; gap: 12px; align-items: flex-start;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  box-shadow: var(--shadow-sm);
}
.cc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--primary); }
.cc-card.risk-medium { border-left-color: var(--warn); }
.cc-card.risk-high   { border-left-color: var(--danger); }

.cc-card-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: #fff; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cc-card-body { flex: 1; min-width: 0; }
.cc-card-name { font-weight: 600; color: var(--ink); }
.cc-card-sub  { color: var(--ink-soft); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.cc-card-sub i { margin-right: 3px; color: var(--muted); }
.cc-card-balance { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.cc-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cc-risk, .cc-age, .cc-open {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border);
}
.cc-risk.risk-low    { background: #e8f5ef; color: var(--accent-green-dark); border-color: #bfe5d1; }
.cc-risk.risk-medium { background: #fff5dc; color: #8a6300; border-color: #f1d68a; }
.cc-risk.risk-high   { background: #fde0e3; color: #9c1822; border-color: #f3aab1; }
.cc-card-action { font-size: 12px; color: var(--primary); margin-top: 8px; }

/* Modal */
#clientModal .modal-content { border-radius: var(--radius-lg); border: 1px solid var(--border); }
#clientModal .modal-header { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cc-kpi { padding: 8px 4px; }
.cc-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cc-kpi-value { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.cc-tabs .nav-link { color: var(--ink-soft); border: none; border-bottom: 2px solid transparent; padding: 8px 14px; }
.cc-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }
.cc-summary { background: var(--surface-2); }
.cc-msg { background: var(--surface); }