:root {
    --primary: #3146a8;
    --primary-dark: #243b8f;
    --primary-soft: #eef1ff;
    --success: #16835b;
    --success-soft: #eaf8f2;
    --danger: #d24b55;
    --danger-soft: #fff0f1;
    --warning: #c68116;
    --warning-soft: #fff7e8;
    --text: #202735;
    --muted: #778094;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --border: #e5e8f0;
    --sidebar: #111a32;
    --shadow: 0 16px 45px rgba(25, 36, 65, .08);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--surface-2);
    color: var(--text);
    min-height: 100vh;
}
button, input, select { font: inherit; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 272px;
    flex: 0 0 272px;
    background: var(--sidebar);
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 18px;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
}
.brand-block { display: flex; gap: 12px; align-items: flex-start; padding: 4px 10px 28px; }
.brand-mark {
    width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center; flex: 0 0 42px;
    background: rgba(255,255,255,.1); font-size: 22px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-name { font-size: 14px; font-weight: 800; line-height: 1.35; }
.brand-tagline { font-size: 10px; color: #aab4cf; margin-top: 3px; letter-spacing: .02em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-link {
    color: #b9c2d9; border-radius: 12px; padding: 11px 12px;
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; font-weight: 600; font-size: 13px;
    transition: .2s ease;
}
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.active { background: rgba(80, 104, 211, .28); color: #fff; box-shadow: inset 3px 0 0 #7f91e8; }
.nav-link i { font-size: 17px; width: 20px; text-align: center; }
.disabled-link { opacity: .58; cursor: default; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: #7f91e8; margin-left: auto; }
.sidebar-footer { margin-top: auto; }
.sidebar-status { color: #8f9ab5; font-size: 11px; padding: 12px; display: flex; gap: 8px; align-items: center; }
.status-pulse { width: 7px; height: 7px; background: #40c991; border-radius: 50%; box-shadow: 0 0 0 4px rgba(64,201,145,.12); }
.logout-link { color: #d0d6e6; }

.main-area { width: calc(100% - 272px); margin-left: 272px; min-width: 0; }
.topbar {
    height: 78px; background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border); display: flex; align-items: center;
    justify-content: space-between; padding: 0 30px; position: sticky; top: 0; z-index: 100;
}
.global-search {
    width: min(520px, 50vw); height: 42px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center;
    padding: 0 12px; color: #9aa2b4;
}
.global-search input { border: 0; outline: 0; background: transparent; width: 100%; padding: 0 10px; color: var(--text); font-size: 12px; }
.search-shortcut { border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 3px 6px; font-size: 9px; color: #9aa2b4; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    border: 1px solid var(--border); background: var(--surface); color: #687287;
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    transition: .2s ease;
}
.icon-btn:hover { border-color: #c8cfdf; color: var(--primary); transform: translateY(-1px); }
.notification-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); top: 9px; right: 9px; border: 2px solid #fff; }
.profile-chip { display: flex; align-items: center; gap: 9px; padding-left: 7px; }
.avatar {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 13px;
}
.profile-copy { display: flex; flex-direction: column; line-height: 1.25; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { font-size: 10px; color: var(--muted); margin-top: 3px; }

.page-content { padding: 30px; max-width: 1600px; margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--primary); font-weight: 800; }
h1 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; margin: 6px 0 7px; font-weight: 800; }
.subtitle { color: var(--muted); font-size: 13px; margin: 0; }
.date-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 11px; padding: 10px 12px; font-size: 11px; color: #697388; }

.stat-card, .panel-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.stat-card { padding: 18px; min-height: 150px; position: relative; overflow: hidden; }
.stat-top { display: flex; justify-content: space-between; align-items: center; }
.stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.stat-label { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.stat-value { font-size: 25px; font-weight: 800; letter-spacing: -.04em; margin-top: 18px; }
.stat-note { color: var(--muted); font-size: 10px; margin-top: 4px; }
.stat-card.success .stat-icon { background: var(--success-soft); color: var(--success); }
.stat-card.danger .stat-icon { background: var(--danger-soft); color: var(--danger); }
.stat-card.warning .stat-icon { background: var(--warning-soft); color: var(--warning); }

.panel-card { padding: 20px; }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 16px; }
.panel-title h2 { font-size: 14px; margin: 0; font-weight: 800; }
.panel-title p { margin: 3px 0 0; font-size: 10px; color: var(--muted); }
.filter-pills { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 9px; }
.filter-pills button { border: 0; background: transparent; border-radius: 7px; padding: 6px 8px; color: var(--muted); font-size: 9px; font-weight: 700; }
.filter-pills button.active { background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(25,36,65,.06); }

.empty-state { min-height: 250px; display: grid; place-items: center; text-align: center; padding: 35px 20px; }
.empty-illustration { width: 78px; height: 78px; border-radius: 24px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 30px; margin: 0 auto 16px; }
.empty-state h3 { font-size: 15px; margin-bottom: 7px; }
.empty-state p { max-width: 390px; color: var(--muted); font-size: 11px; line-height: 1.7; margin: 0 auto 16px; }

.btn-primary-custom {
    border: 0; background: var(--primary); color: #fff; border-radius: 11px; padding: 10px 14px;
    font-size: 11px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 8px 18px rgba(49,70,168,.18);
}
.btn-primary-custom:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }

.quick-action { border: 1px solid var(--border); background: var(--surface); border-radius: 15px; padding: 15px; text-decoration: none; color: var(--text); display: flex; gap: 11px; align-items: center; transition: .2s ease; }
.quick-action:hover { border-color: #cbd2e4; box-shadow: 0 10px 25px rgba(25,36,65,.07); transform: translateY(-1px); color: var(--text); }
.quick-action .qa-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.quick-action strong { display: block; font-size: 11px; }
.quick-action span { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }



/* Modern login redesign */
.login-page-modern{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);background:#f7f9fd;overflow:hidden}
.login-page-modern .login-visual{position:relative;min-height:100vh;overflow:hidden;padding:38px clamp(30px,5vw,76px) 30px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.22),transparent 22rem),radial-gradient(circle at 82% 62%,rgba(255,174,42,.18),transparent 20rem),linear-gradient(135deg,#1746c7 0%,#2168e9 55%,#63a5ff 100%)}
.login-page-modern .login-visual:before{content:"";position:absolute;width:680px;height:680px;right:-350px;top:-260px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 85px rgba(255,255,255,.035),0 0 0 170px rgba(255,255,255,.022);pointer-events:none}
.login-page-modern .login-visual:after{content:"";position:absolute;width:620px;height:330px;left:-250px;bottom:-220px;border-radius:50%;background:rgba(255,255,255,.08);transform:rotate(-15deg);pointer-events:none}
.login-decor{position:absolute;border-radius:50%;pointer-events:none}.login-decor-one{width:310px;height:310px;right:9%;top:29%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 50px rgba(255,255,255,.035),0 0 0 100px rgba(255,255,255,.02)}.login-decor-two{width:17px;height:17px;left:56%;top:22%;background:#ff9f1c;box-shadow:0 0 0 10px rgba(255,159,28,.12),75px 115px 0 -3px rgba(255,255,255,.65),-115px 205px 0 -5px rgba(255,255,255,.45)}
.login-brand-full{position:relative;z-index:3;display:flex;align-items:center}.login-brand-full img{width:min(315px,62%);max-height:82px;object-fit:contain;object-position:left center;filter:drop-shadow(0 10px 20px rgba(0,0,0,.12))}
.login-hero-content{position:relative;z-index:3;max-width:720px;margin:auto 0;padding:55px 0 38px}.login-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.11);font-size:9px;font-weight:850;letter-spacing:.17em;backdrop-filter:blur(10px)}.login-badge i{color:#ffad2f;font-size:13px}
.login-hero-content h1{margin:18px 0;color:#fff;font-size:clamp(42px,5vw,74px);line-height:.98;letter-spacing:-.055em;font-weight:900}.login-hero-content h1 span{color:#ffab2d}.login-hero-content>p{max-width:610px;margin:0;color:rgba(255,255,255,.86);font-size:14px;line-height:1.75}
.login-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:650px;margin-top:32px}.login-feature{padding:12px 10px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.10);backdrop-filter:blur(10px)}.login-feature-icon{width:38px;height:38px;margin-bottom:9px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.16);font-size:17px}.login-feature strong{display:block;font-size:10px;font-weight:800}.login-feature small{display:block;margin-top:3px;color:rgba(255,255,255,.67);font-size:8px}.login-visual-footer{position:relative;z-index:3;display:flex;gap:20px;color:rgba(255,255,255,.67);font-size:9px}.login-visual-footer span+span:before{content:"";display:inline-block;width:4px;height:4px;margin:0 20px 2px 0;border-radius:50%;background:#ffab2d}
.login-page-modern .login-form-wrap{position:relative;display:grid;place-items:center;min-height:100vh;padding:35px clamp(22px,5vw,70px);background:radial-gradient(circle at 45% 45%,rgba(49,85,217,.11),transparent 24rem),radial-gradient(circle at 90% 10%,rgba(255,174,46,.10),transparent 16rem),#f7f9fd}.login-page-modern .login-form-wrap:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(49,85,217,.09) 1px,transparent 1px);background-size:19px 19px;mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.35) 22%,transparent 65%);pointer-events:none}.login-form-glow{position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(91,117,226,.13);filter:blur(70px);pointer-events:none}
.login-card-modern{position:relative;z-index:2;width:min(475px,100%);padding:36px;border:1px solid #dde4ef;border-radius:25px;background:rgba(255,255,255,.98);box-shadow:0 30px 90px rgba(36,53,91,.14),0 2px 8px rgba(36,53,91,.04)}.login-card-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px}.login-card-icon{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(135deg,#3155d9,#6b7ff1);box-shadow:0 9px 22px rgba(49,85,217,.22)}.login-card-modern h2{margin:4px 0 5px;color:var(--text);font-size:27px;font-weight:900;letter-spacing:-.045em}.wave{font-size:20px}.login-card-modern .lead{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.login-card-modern .eyebrow{font-size:9px;letter-spacing:.15em}
.login-alert{display:flex;gap:8px;align-items:flex-start;margin-bottom:17px;padding:10px 12px;border-radius:11px;font-size:10px}.login-field .form-label{margin-bottom:7px}.login-input-wrap{position:relative;display:flex;align-items:center}.login-input-wrap>i{position:absolute;left:14px;z-index:2;color:#8490a4;font-size:15px;pointer-events:none}.login-input-wrap .form-control{min-height:49px;padding-left:42px;border-radius:12px;border-color:#dfe4ed;background:#fff;font-size:12px}.login-input-wrap .form-control:focus{border-color:#8498e8;box-shadow:0 0 0 4px rgba(49,85,217,.08)!important}.login-password-wrap .form-control{padding-right:50px}.password-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:47px;border:0;border-left:1px solid #e3e7ef;border-radius:0 11px 11px 0;background:#fff;color:#718099}.password-toggle:hover{color:var(--primary);background:#f8f9fc}
.login-page-modern .login-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 17px;font-size:10px}.login-page-modern .login-meta a{color:var(--primary);font-weight:800;text-decoration:none}.login-page-modern .remember{display:inline-flex;align-items:center;gap:7px;color:#78849a;cursor:pointer}.login-page-modern .remember input{accent-color:var(--primary);width:15px;height:15px}
.login-submit-modern{width:100%;min-height:51px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;background:linear-gradient(100deg,#3155d9,#2149cf 55%,#496be7);color:#fff;font-size:12px;font-weight:850;box-shadow:0 13px 28px rgba(49,85,217,.23);transition:.2s ease}.login-submit-modern:hover{color:#fff;transform:translateY(-1px);box-shadow:0 16px 32px rgba(49,85,217,.29)}.login-submit-modern i{font-size:15px;transition:transform .2s}.login-submit-modern:hover i{transform:translateX(3px)}
.login-or{display:flex;align-items:center;gap:10px;margin:24px 0 13px;color:#a2aaba;font-size:7px;letter-spacing:.12em}.login-or span{height:1px;flex:1;background:#e8ebf1}.login-or b{font-weight:800;white-space:nowrap}.login-security-note{display:flex;justify-content:center;gap:7px;color:#8994a7;text-align:center;font-size:8px;line-height:1.5}.login-security-note i{color:#1aa06d;font-size:11px}.login-card-footer{margin-top:17px;color:#a0a9b8;text-align:center;font-size:8px}.login-card-footer span{padding:0 5px;color:#d2d7e1}
@media(max-width:1100px){.login-page-modern{grid-template-columns:1fr 430px}.login-page-modern .login-visual{padding-left:42px;padding-right:42px}.login-hero-content h1{font-size:52px}.login-feature-grid{grid-template-columns:repeat(2,1fr);max-width:430px}}
@media(max-width:900px){.login-page-modern{grid-template-columns:1fr}.login-page-modern .login-visual{min-height:480px}.login-page-modern .login-form-wrap{min-height:auto;padding:45px 20px 55px}.login-card-modern{width:min(500px,100%)}}
@media(max-width:575.98px){.login-page-modern .login-visual{min-height:420px;padding:26px 20px 22px}.login-brand-full img{width:235px;max-height:68px}.login-hero-content{padding:35px 0 25px}.login-hero-content h1{font-size:39px}.login-hero-content>p{font-size:11px}.login-feature-grid{gap:7px;margin-top:24px}.login-feature{padding:9px}.login-feature-icon{width:33px;height:33px;margin-bottom:7px}.login-feature strong{font-size:9px}.login-feature small{font-size:7px}.login-visual-footer{display:none}.login-page-modern .login-form-wrap{padding:25px 13px 35px}.login-card-modern{padding:24px 18px;border-radius:20px}.login-card-modern h2{font-size:23px}}

.setup-card { max-width: 760px; margin: 50px auto; }
.setup-card .brand-block { padding-left: 0; }
.install-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.install-step:last-child { border-bottom: 0; }
.step-num { width: 28px; height: 28px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: 0 0 28px; }

.toast { border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.toast-body { font-size: 11px; font-weight: 600; }

[data-theme="dark"] {
    --text: #edf1fb; --muted: #9ca6bc; --surface: #171e31; --surface-2: #101626; --border: #2a334b;
    --primary-soft: #222c55; --success-soft: #15372d; --danger-soft: #3b2025; --warning-soft: #3b2e18;
}
[data-theme="dark"] body { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .topbar { background: rgba(23,30,49,.9); }
[data-theme="dark"] .global-search, [data-theme="dark"] .search-shortcut { background: #101626; }
[data-theme="dark"] .search-shortcut { border-color: var(--border); }
[data-theme="dark"] .icon-btn, [data-theme="dark"] .stat-card, [data-theme="dark"] .panel-card, [data-theme="dark"] .quick-action, [data-theme="dark"] .date-chip { background: var(--surface); color: var(--text); }
[data-theme="dark"] .login-page { background: #0f172a; }
[data-theme="dark"] .login-form-wrap { background: #10182b; }
[data-theme="dark"] .login-card-modern { background: #172139; border-color: #293550; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
[data-theme="dark"] .login-card-modern h2 { color: #f2f5ff; }
[data-theme="dark"] .login-field .form-label { color: #b7c1d5; }
[data-theme="dark"] .login-input-wrap .form-control,
[data-theme="dark"] .password-toggle { background: #111a2d; color: #eef3ff; border-color: #33405c; }
[data-theme="dark"] .password-toggle { border-left-color: #33405c; }
[data-theme="dark"] .login-or span { background: #2b3650; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .sidebar.open { transform: translateX(0); box-shadow: 25px 0 60px rgba(0,0,0,.18); }
    .main-area { width: 100%; margin-left: 0; }
    .topbar { padding: 0 18px; }
    .global-search { width: min(420px, 55vw); }
    .page-content { padding: 22px 18px; }
    .login-page { grid-template-columns: 1fr; }
    .login-visual { min-height: 340px; padding: 30px; }
    .login-copy h1 { font-size: 40px; }
    .finance-art { right: -40px; top: 30%; transform: scale(.75); transform-origin: right center; }
}
@media (max-width: 575.98px) {
    .global-search { display: none; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .date-chip { width: 100%; }
    .stat-card { min-height: 135px; }
    .panel-card { padding: 16px; }
    .login-visual { min-height: 285px; }
    .login-copy { margin-top: 45px; }
    .login-copy p { font-size: 12px; }
    .login-card { padding: 25px 20px; border-radius: 20px; }
    .login-form-wrap { padding: 20px 14px; }
}
/* Phase 2 additions — preserves Phase 1 variables/components. */
.status-badge {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; padding: 5px 8px; font-size: 9px; font-weight: 800;
    letter-spacing: .04em; white-space: nowrap;
}
.status-success { background: var(--success-soft); color: var(--success); }
.status-primary { background: var(--primary-soft); color: var(--primary); }
.status-danger { background: var(--danger-soft); color: var(--danger); }
.status-warning { background: var(--warning-soft); color: var(--warning); }
.status-secondary { background: var(--surface-2); color: var(--muted); }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th {
    color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 800; padding: 11px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); font-size: 11px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: var(--surface-2); }
.person-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.person-avatar {
    width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 11px; flex: 0 0 36px;
}
.person-name { font-weight: 750; font-size: 11px; }
.person-meta { color: var(--muted); font-size: 9px; margin-top: 3px; }
.amount-due { color: var(--danger); font-weight: 800; }
.amount-clear { color: var(--success); font-weight: 800; }
.amount-advance { color: var(--warning); font-weight: 800; }

.toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.toolbar .form-control, .toolbar .form-select { min-height: 40px; font-size: 10px; border-radius: 10px; }
.search-control { min-width: 240px; }

.action-btn {
    border: 1px solid var(--border); background: var(--surface); color: #697388;
    width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px;
    text-decoration: none; transition: .15s ease;
}
.action-btn:hover { color: var(--primary); border-color: #c8d0e2; transform: translateY(-1px); }
.action-btn.danger:hover { color: var(--danger); }

.form-help { color: var(--muted); font-size: 9px; margin-top: 5px; }
.required-star { color: var(--danger); }
.form-section-title { font-size: 12px; font-weight: 800; margin: 0 0 14px; }
.amount-preview {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 15px;
}
.amount-preview .label { color: var(--muted); font-size: 9px; }
.amount-preview .number { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.amount-preview .preview-row { display: flex; justify-content: space-between; gap: 15px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.amount-preview .preview-row:last-child { border-bottom: 0; }
.customer-lookup { position: relative; }
.customer-results {
    position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow); overflow: hidden; display: none;
}
.customer-results.show { display: block; }
.customer-result { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; padding: 11px; color: var(--text); }
.customer-result:hover { background: var(--surface-2); }
.customer-result:last-child { border-bottom: 0; }

.profile-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); margin-bottom: 14px;
}
.profile-main { display: flex; gap: 14px; align-items: center; }
.profile-avatar { width: 62px; height: 62px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.profile-main h2 { font-size: 20px; letter-spacing: -.03em; margin: 0 0 5px; font-weight: 800; }
.profile-meta { color: var(--muted); font-size: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }

.ledger-positive { color: var(--danger); font-weight: 800; }
.ledger-negative { color: var(--success); font-weight: 800; }
.ledger-running { font-weight: 800; }
.tx-type { font-size: 9px; color: var(--muted); font-weight: 700; }
.pagination-wrap { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 15px; }
.page-link-custom {
    border: 1px solid var(--border); color: var(--muted); background: var(--surface);
    padding: 7px 10px; border-radius: 8px; text-decoration: none; font-size: 10px;
}
.page-link-custom.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.page-link-custom.disabled { opacity: .45; pointer-events: none; }

.statement-sheet {
    background: #fff; color: #1f2633; max-width: 820px; margin: 20px auto;
    min-height: 1120px; padding: 48px; box-shadow: 0 12px 50px rgba(25,36,65,.12);
}
.statement-header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #202735; padding-bottom: 18px; }
.statement-brand { font-size: 20px; font-weight: 800; }
.statement-tagline { font-size: 9px; color: #727b8e; margin-top: 4px; }
.statement-meta { text-align: right; font-size: 9px; color: #727b8e; line-height: 1.7; }
.statement-title { margin: 25px 0 15px; font-size: 18px; font-weight: 800; }
.statement-customer { background: #f5f7fb; padding: 13px; border-radius: 8px; display: flex; justify-content: space-between; }
.statement-customer strong { font-size: 11px; }
.statement-customer span { display: block; color: #727b8e; font-size: 9px; margin-top: 3px; }
.statement-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 9px; }
.statement-table th { text-align: left; padding: 8px 5px; border-bottom: 1px solid #dfe3eb; color: #667085; }
.statement-table td { padding: 8px 5px; border-bottom: 1px solid #edf0f4; }
.statement-total { margin-left: auto; margin-top: 15px; width: 260px; }
.statement-total div { display:flex; justify-content:space-between; padding: 5px; font-size: 9px; }
.statement-total .closing { border-top: 2px solid #202735; font-weight: 800; font-size: 12px; padding-top: 9px; }
.statement-footer { margin-top: 70px; padding-top: 15px; border-top: 1px solid #dfe3eb; font-size: 9px; color: #727b8e; text-align:center; }

@media (max-width: 767.98px) {
    .toolbar { align-items: stretch; }
    .search-control { min-width: 0; width: 100%; }
    .profile-hero { align-items: flex-start; flex-direction: column; }
    .profile-actions { justify-content: flex-start; width: 100%; }
    .statement-sheet { margin: 0; padding: 25px; box-shadow: none; min-height: auto; }
    .statement-header, .statement-customer { flex-direction: column; }
    .statement-meta { text-align: left; }
}
@media print {
    body { background: #fff !important; }
    .sidebar, .topbar, .page-heading, .no-print { display: none !important; }
    .main-area { width: 100%; margin: 0; }
    .page-content { padding: 0; }
    .statement-sheet { box-shadow: none; margin: 0; max-width: none; min-height: 0; }
    @page { size: A4; margin: 10mm; }
}

/* Phase 3 supplier/payable enhancements */
.balance-preview,.payment-balance-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px;border:1px solid var(--border-color);border-radius:14px;background:var(--surface-soft,#f7f8fc)}
.balance-preview strong{font-size:18px}.payment-balance-card{justify-content:space-between}.payment-balance-card strong{font-size:28px}
.statement-sheet{background:#fff;color:#172033;max-width:1100px;margin:0 auto;padding:28px;border-radius:18px;box-shadow:0 12px 40px rgba(20,30,60,.08)}
.statement-header{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #172033;padding-bottom:18px;margin-bottom:20px}.statement-header h2{font-size:20px;margin:0}.statement-header p{margin:4px 0 0;color:#667085}.statement-header small{display:block;margin-top:6px;color:#667085}
.statement-meta{display:flex;justify-content:space-between;gap:24px;margin-bottom:20px}.statement-meta span,.statement-stat span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#667085}.statement-meta strong{display:block;margin-top:4px}.statement-meta small{color:#667085}
.statement-stat{border:1px solid #e6e8ee;border-radius:12px;padding:13px}.statement-stat strong{display:block;margin-top:5px;font-size:17px}
.statement-footer{display:flex;justify-content:space-between;border-top:1px solid #e6e8ee;margin-top:20px;padding-top:14px;color:#667085;font-size:12px}
@media print{body{background:#fff!important}.sidebar,.topbar,.no-print,#toastContainer{display:none!important}.main-area{margin:0!important}.page-content{padding:0!important}.statement-sheet{box-shadow:none;border:0;border-radius:0;max-width:none;padding:0}.statement-sheet .data-table{font-size:10px}.statement-sheet .data-table th,.statement-sheet .data-table td{padding:6px 7px}}
@media (max-width:767px){.statement-sheet{padding:16px}.statement-header,.statement-meta{flex-direction:column}.statement-header .text-end{text-align:left!important}.balance-preview{font-size:12px}.balance-preview strong{font-size:16px}}

/* Phase 4 analytics, reports and global search */
.global-search{position:relative}.global-search-results{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1000;background:var(--surface,#fff);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.14);overflow:hidden}.global-search-results.show{display:block}.global-search-results a{display:block;padding:11px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border-color)}.global-search-results a:hover{background:var(--surface-soft,#f5f6fa)}.global-search-results strong,.global-search-results small{display:block}.global-search-results small,.global-search-empty{color:var(--text-muted,#667085);font-size:12px;margin-top:2px;padding:12px 14px}
.report-filters{display:flex;flex-direction:column;gap:12px}.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.filter-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.filter-result-count{margin-left:auto;color:var(--text-muted,#667085);font-size:13px}
.chart-wrap{height:330px;position:relative}.chart-wrap.donut{height:250px}.cash-legend{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-muted,#667085)}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px}
.analytics-party{display:block;padding:10px 0;border-bottom:1px solid var(--border-color);color:inherit}.analytics-party>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.analytics-party span{font-weight:700}.analytics-party .progress{height:6px;background:var(--surface-soft,#eef0f5)}
.report-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.report-link{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--border-color);border-radius:12px;text-decoration:none;color:inherit}.report-link>i:last-child{margin-left:auto}.report-link span{display:block;font-size:12px;color:var(--text-muted,#667085);margin-top:2px}
.analytics-list{display:flex;flex-direction:column;gap:0}.analytics-list>div,.report-metric{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-color)}.analytics-list span,.report-metric span{color:var(--text-muted,#667085)}
.report-sheet{background:var(--surface,#fff);border:1px solid var(--border-color);border-radius:18px;padding:24px}.report-brand{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid currentColor;padding-bottom:16px;margin-bottom:18px}.report-brand h2{font-size:19px;margin:0}.report-brand p,.report-brand span{display:block;color:var(--text-muted,#667085);margin:4px 0 0;font-size:12px}.report-section{border:1px solid var(--border-color);border-radius:14px;padding:16px}.report-section h3{font-size:14px;margin:0 0 5px}.report-metric.total{font-size:16px;font-weight:700;border-bottom:0}.report-kpi{border:1px solid var(--border-color);border-radius:12px;padding:14px}.report-kpi span{display:block;color:var(--text-muted,#667085);font-size:12px}.report-kpi strong{display:block;font-size:20px;margin-top:5px}.report-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border-color);padding-top:12px;margin-top:18px;font-size:12px;color:var(--text-muted,#667085)}
@media(max-width:991px){.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-link-grid{grid-template-columns:1fr}}
@media(max-width:575px){.filter-grid{grid-template-columns:1fr}.filter-result-count{margin-left:0}.report-brand{flex-direction:column}.report-sheet{padding:15px}.chart-wrap{height:270px}}
@media print{.report-sheet{border:0;border-radius:0;box-shadow:none;padding:0}.no-print{display:none!important}.main-area{margin:0!important}.page-content{padding:0!important}}

/* Phase 5 account recovery, notifications, settings and security */
.nav-dot{min-width:18px;height:18px;border-radius:99px;background:var(--danger,#dc3545);color:#fff;font-size:8px;display:inline-grid;place-items:center;margin-left:auto;padding:0 4px;font-weight:800}.notification-dot{width:8px!important;height:8px!important;right:8px!important;top:7px!important;background:var(--danger,#dc3545)!important;border:2px solid var(--surface,#fff)}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-grid>.panel-card:nth-child(3),.settings-grid>.panel-card:nth-child(4){grid-column:span 1}.section-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}.section-title>i{width:36px;height:36px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:16px}.section-title h2{font-size:16px;margin:0 0 3px}.section-title p{margin:0;color:var(--muted);font-size:11px}.small-muted{color:var(--muted);font-size:11px;line-height:1.6}.btn-danger-soft{border:1px solid rgba(220,53,69,.2);background:rgba(220,53,69,.08);color:#b42318;border-radius:10px;padding:9px 12px;font-size:11px;font-weight:700}.security-stat{display:flex;align-items:baseline;gap:9px;padding:16px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}.security-stat strong{font-size:28px}.security-stat span{color:var(--muted);font-size:11px}.count-pill{display:inline-flex;min-width:20px;height:20px;align-items:center;justify-content:center;border-radius:99px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-weight:800}.btn-soft.active{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.notification-list{display:flex;flex-direction:column}.notification-item{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--border)}.notification-item:last-child{border-bottom:0}.notification-item.read{opacity:.65}.notification-icon{width:38px;height:38px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:0 0 auto}.notification-body{flex:1;min-width:0}.notification-body strong{font-size:13px}.notification-body p{margin:4px 0 7px;color:var(--muted);font-size:11px;line-height:1.55}.notification-body small{color:var(--muted);font-size:9px;white-space:nowrap}.notification-actions{display:flex;gap:12px;flex-wrap:wrap;font-size:10px}.notification-actions a{color:var(--primary);font-weight:700;text-decoration:none}.link-button{border:0;background:transparent;padding:0;color:var(--primary);font-weight:700;font-size:10px}.empty-state>i{font-size:28px;color:var(--muted)}
@media(max-width:991px){.settings-grid{grid-template-columns:1fr}.settings-grid>.panel-card:nth-child(3),.settings-grid>.panel-card:nth-child(4){grid-column:auto}}
@media(max-width:575px){.notification-item{gap:9px}.notification-body>div:first-child{flex-direction:column}.notification-body small{white-space:normal}.settings-grid .panel-card{padding:15px}}

.logout-form{margin:0}.logout-form .logout-link{width:100%;border:0;background:transparent;text-align:left}

/* ===== FIX: WEBSITE LOGO SIZE ===== */

.sidebar .brand-block {
    width: 100%;
    overflow: hidden;
}

.sidebar .brand-logo {
    width: 100%;
    max-width: 220px;
    height: 70px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sidebar .brand-logo img {
    display: block;
    width: 205px !important;
    max-width: 205px !important;
    height: auto !important;
    max-height: 62px !important;
    object-fit: contain;
    object-position: left center;
}

/* Never allow branding image to overflow into dashboard */
.sidebar img {
    max-width: 205px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .sidebar .brand-logo {
        max-width: 180px;
    }

    .sidebar .brand-logo img {
        width: 170px !important;
        max-width: 170px !important;
    }
}

/* =========================================================
   THE SURAJ — PREMIUM SIDEBAR V2
   ========================================================= */

.sidebar {
    width: 268px;
    padding: 18px 12px 14px;
    background:
        radial-gradient(circle at 0% 12%, rgba(71,105,235,.18), transparent 260px),
        linear-gradient(180deg, #101b38 0%, #0b142b 100%);
    border-right: 1px solid rgba(255,255,255,.06);
}

/* ---------- Logo ---------- */

.sidebar .brand-block {
    padding: 8px 10px 25px;
    min-height: 92px;
}

.sidebar .brand-logo {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sidebar .brand-logo img {
    width: 190px !important;
    max-width: 190px !important;
    max-height: 62px !important;
    height: auto !important;
    object-fit: contain;
    object-position: left center;
    display: block;
    border-radius: 12px;
}

/* ---------- Navigation ---------- */

.sidebar-nav {
    gap: 4px;
}

.sidebar .nav-link {
    position: relative;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 13px;
    color: #aebbd7;
    font-size: 12px;
    font-weight: 650;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

/* icon */

.sidebar .nav-link i {
    width: 25px;
    min-width: 25px;
    font-size: 18px;
    color: #aebbd7;
    transition: color .2s ease, transform .2s ease;
}

/* hover */

.sidebar .nav-link:hover {
    color: #ffffff;
    background: rgba(255,255,255,.055);
    transform: translateX(3px);
}

.sidebar .nav-link:hover i {
    color: #ffffff;
    transform: scale(1.08);
}

/* active */

.sidebar .nav-link.active {
    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            rgba(73,101,218,.42),
            rgba(73,101,218,.18)
        );
    border: 1px solid rgba(126,148,255,.16);
    box-shadow:
        inset 3px 0 0 #8ea0ff,
        0 8px 25px rgba(0,0,0,.10);
    transform: none;
}

.sidebar .nav-link.active i {
    color: #ffffff;
}

/* subtle active glow */

.sidebar .nav-link.active::after {
    content: "";
    position: absolute;
    right: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8ea0ff;
    box-shadow: 0 0 12px rgba(142,160,255,.8);
}

/* ---------- Notification badge ---------- */

.sidebar .nav-dot {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #101b38;
    background: #ff5365;
    box-shadow: 0 3px 10px rgba(255,83,101,.25);
}

/* ---------- Footer ---------- */

.sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
}

.sidebar-status {
    margin: 0 7px 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.045);
    color: #8796b6;
    font-size: 10px;
}

.status-pulse {
    width: 8px;
    height: 8px;
    background: #35d49a;
    box-shadow:
        0 0 0 4px rgba(53,212,154,.10),
        0 0 12px rgba(53,212,154,.35);
}

/* Logout */

.sidebar .logout-link {
    margin-top: 3px;
    color: #c7d0e3;
}

.sidebar .logout-link:hover {
    color: #ff7886;
    background: rgba(220,75,90,.08);
}

/* ---------- Mobile ---------- */

@media (max-width: 991.98px) {
    .sidebar {
        width: 268px;
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }
}

@media (max-width: 575.98px) {
    .sidebar .brand-logo img {
        width: 175px !important;
        max-width: 175px !important;
    }

    .sidebar .nav-link {
        min-height: 46px;
    }
}