:root{--bg:#f8fafc;--panel:#fff;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--blue:#2563eb;--indigo:#4f46e5;--green:#059669;--red:#e11d48;--amber:#d97706;--purple:#7c3aed;--shadow:0 8px 22px rgba(15,23,42,.06)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}.hidden{display:none!important}.screen{min-height:100vh}.auth-screen{display:grid;place-items:center;padding:24px}.auth-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}.auth-card h1{margin:10px 0 8px;font-size:22px}.auth-card p{color:var(--muted);font-size:13px;line-height:1.6}.mark{display:inline-grid;place-items:center;height:48px;min-width:48px;padding:0 10px;border-radius:14px;background:#dbeafe;color:#1d4ed8;font-weight:900}.mark.danger{background:#ffe4e6;color:var(--red)}label{display:block;margin:14px 0 6px;color:#475569;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;color:var(--text);font:inherit;font-size:13px}textarea{min-height:78px}.form-error{min-height:18px;color:var(--red)!important;font-weight:700}.primary-btn,.secondary-btn,.danger-btn,.ghost-btn{border:0;border-radius:12px;padding:10px 14px;font-weight:800;font-size:12px;cursor:pointer}.primary-btn{background:var(--blue);color:#fff}.secondary-btn{background:#f1f5f9;color:#334155;border:1px solid var(--line)}.danger-btn{background:var(--red);color:#fff}.ghost-btn{background:#fff;color:#334155;border:1px solid var(--line)}button:disabled,input:disabled,select:disabled{opacity:.55;cursor:not-allowed}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center}.brand-row{display:flex;align-items:center;gap:12px}.brand-icon{height:42px;width:42px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:900}.app-header h1{margin:0;font-size:15px;text-transform:uppercase;letter-spacing:.08em}.app-header p{margin:3px 0 0;color:#94a3b8;font-size:10px;text-transform:uppercase;font-weight:800}.header-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.status-badge,.user-badge,.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900;text-transform:uppercase;border:1px solid var(--line);background:#f8fafc}.status-badge{background:#ecfdf5;color:#047857;border-color:#bbf7d0}.user-badge{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}.icon-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;font-weight:800;color:#475569;cursor:pointer}.layout{width:min(1280px,100%);margin:0 auto;padding:24px;display:grid;grid-template-columns:260px 1fr;gap:24px;flex:1}.sidebar{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;height:max-content;box-shadow:var(--shadow)}.nav-label{display:block;color:#94a3b8;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin:4px 8px 10px}.nav-gap{padding-top:16px;border-top:1px solid #f1f5f9;margin-top:16px}.nav-btn{width:100%;border:0;background:transparent;color:#475569;text-align:left;border-radius:12px;padding:12px 14px;font-weight:800;font-size:13px;cursor:pointer}.nav-btn:hover{background:#f8fafc;color:#0f172a}.nav-btn.active{background:var(--blue);color:#fff}.main-panel{min-width:0}.page{display:block}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.page-header h2{margin:0;font-size:22px}.page-header p{margin:5px 0 0;color:var(--muted);font-size:13px}.grid{display:grid;gap:16px}.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.two-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.three-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.card-title{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#475569}.kpi-label{font-size:10px;color:#94a3b8;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.kpi-value{font-size:25px;font-weight:950;margin-top:10px}.green{color:var(--green)}.red{color:var(--red)}.blue{color:var(--blue)}.purple{color:var(--purple)}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:14px 0}.toolbar .filters{display:flex;gap:10px;flex-wrap:wrap}.toolbar input,.toolbar select{width:auto;min-width:190px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}table{border-collapse:collapse;width:100%;font-size:12px}th,td{padding:12px 14px;border-bottom:1px solid #f1f5f9;text-align:left;vertical-align:top}th{background:#f8fafc;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.right{text-align:right}.center{text-align:center}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.notice{border-left:4px solid var(--blue);background:#eff6ff;padding:13px;border-radius:12px;color:#1e3a8a;font-size:13px}.danger-notice{border-left-color:var(--red);background:#fff1f2;color:#9f1239}.split-card{background:linear-gradient(135deg,#0f766e,#1d4ed8);color:#fff;border:0}.split-card.red-bg{background:linear-gradient(135deg,#dc2626,#9f1239)}.mini-bars{height:150px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:end;gap:12px;padding:10px}.bar-group{display:flex;align-items:end;gap:3px;flex:1;height:100%}.bar{width:12px;border-radius:5px 5px 0 0;min-height:3px}.bar.in{background:var(--green)}.bar.out{background:var(--red)}.sheet-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.sheet-tabs button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;font-weight:800;cursor:pointer}.sheet-tabs button.active{background:#ecfdf5;color:#047857;border-color:#bbf7d0}.app-footer{text-align:center;background:#fff;border-top:1px solid var(--line);padding:16px;color:#94a3b8;font-size:11px;font-weight:800;text-transform:uppercase}.muted{color:var(--muted)}.copy-box{background:#0f172a;color:#e2e8f0;border-radius:16px;padding:16px;overflow:auto;max-height:260px;font:12px Consolas,monospace}.stepper{display:flex;gap:8px;margin:8px 0 16px}.step{padding:7px 10px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:900}.step.active{background:#dbeafe;color:#1d4ed8}@media(max-width:920px){.layout{grid-template-columns:1fr}.kpi-grid,.two-grid,.three-grid,.form-grid{grid-template-columns:1fr}.app-header{align-items:flex-start;flex-direction:column}.sidebar{position:static}.toolbar input,.toolbar select{width:100%}}@media print{.app-header,.sidebar,.app-footer,.no-print,.page:not(.active-page){display:none!important}.layout{display:block;padding:0}.card,.table-wrap{box-shadow:none;border-color:#cbd5e1}.main-panel{width:100%}body{background:#fff}}

/* Layout stabilization and collapsible side pane */
.layout{grid-template-columns:260px minmax(0,1fr);align-items:start;transition:grid-template-columns .2s ease}
.layout.sidebar-collapsed{grid-template-columns:72px minmax(0,1fr)}
.sidebar{position:sticky;top:90px;padding:14px}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.collapse-btn{height:32px;width:32px;border:1px solid var(--line);background:#fff;border-radius:10px;color:#475569;font-weight:900;cursor:pointer}
.nav-btn{display:flex;align-items:center;min-height:42px}
.nav-label{white-space:nowrap}
.layout.sidebar-collapsed .nav-label,.layout.sidebar-collapsed .nav-text,.layout.sidebar-collapsed #share-card{display:none}
.layout.sidebar-collapsed .sidebar{padding:14px 10px}
.layout.sidebar-collapsed .nav-btn{text-align:center;justify-content:center;padding:12px 8px}
.page-header{min-height:54px}
.grid{align-items:stretch}
.card{min-width:0}
.kpi-grid .card{min-height:132px}
.kpi-label{min-height:24px}
.kpi-value{word-break:break-word}
.split-card{min-height:196px}
.toolbar{align-items:flex-end}
.toolbar .filters{align-items:end}
.filter-field{display:flex;flex-direction:column;gap:6px}
.table-wrap{max-width:100%}
table{table-layout:auto}
th{white-space:nowrap}
td{vertical-align:middle}
.mini-bars{height:190px;overflow:hidden}
.bar{width:16px}
@media(max-width:920px){.layout,.layout.sidebar-collapsed{grid-template-columns:1fr}.layout.sidebar-collapsed .nav-label,.layout.sidebar-collapsed .nav-text{display:inline}.toolbar input,.toolbar select{width:100%;min-width:100%}.filter-field{width:100%}}

.file-btn{display:inline-flex;align-items:center;justify-content:center;margin:0}.page-header .no-print{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}


/* Collapsed sidebar icon rail */
.nav-icon{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#475569}
.nav-icon svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-btn.active .nav-icon{color:#fff}
.layout.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}
.layout.sidebar-collapsed .sidebar{padding:12px 8px}
.layout.sidebar-collapsed .sidebar-top{justify-content:center;margin-bottom:14px}
.layout.sidebar-collapsed .collapse-btn{width:42px;height:42px;border-radius:14px}
.layout.sidebar-collapsed .nav-btn{width:52px;height:52px;min-height:52px;margin:6px auto;padding:0;border-radius:16px;justify-content:center}
.layout.sidebar-collapsed .nav-btn::before{content:"";display:none}
.layout.sidebar-collapsed .nav-icon{width:34px;height:34px;border-radius:12px;background:#f1f5f9;color:#475569}
.layout.sidebar-collapsed .nav-icon svg{width:19px;height:19px}
.layout.sidebar-collapsed .nav-btn.active{background:var(--blue);box-shadow:0 10px 24px rgba(37,99,235,.28)}
.layout.sidebar-collapsed .nav-btn.active .nav-icon{background:rgba(255,255,255,.18);color:#fff}
.layout.sidebar-collapsed .nav-gap{display:none}
@media(max-width:920px){.layout.sidebar-collapsed{grid-template-columns:1fr}.layout.sidebar-collapsed .sidebar{padding:12px}.layout.sidebar-collapsed .sidebar-top{justify-content:space-between}.layout.sidebar-collapsed .nav-btn{width:100%;height:42px;min-height:42px;margin:2px 0;padding:0 12px;justify-content:flex-start}.layout.sidebar-collapsed .nav-icon{background:transparent;width:28px;height:28px}.layout.sidebar-collapsed .nav-gap{display:block}}

/* Dashboard alignment for scoped director views */
.dashboard-kpi-grid{margin-bottom:14px}
.dashboard-kpi-grid.single-director-kpis{grid-template-columns:repeat(3,minmax(220px,1fr))}
.dashboard-director-grid{margin-top:0;margin-bottom:14px}
.dashboard-director-grid.single-director-summary{grid-template-columns:minmax(0,1fr)}
.dashboard-director-grid.single-director-summary .split-card{width:100%;min-height:176px}
.dashboard-director-grid.single-director-summary .split-card>.two-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-chart-card,.dashboard-ledger-card{margin-top:14px}
@media(max-width:1180px){.dashboard-kpi-grid.single-director-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:920px){.dashboard-kpi-grid.single-director-kpis{grid-template-columns:1fr}.dashboard-director-grid.single-director-summary .split-card>.two-grid{grid-template-columns:1fr}}

/* Director balance card format */
.director-balance-card{gap:22px;min-height:190px}
.director-balance-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
.director-balance-top h3{font-size:clamp(34px,3.2vw,52px);line-height:1.05;font-weight:950}
.director-balance-total{text-align:right;min-width:260px}
.director-balance-total span,.director-balance-metrics span{display:block;color:rgba(255,255,255,.82);font-size:17px;font-weight:700}
.director-balance-total strong{display:block;margin-top:10px;color:#fff;font-size:clamp(24px,2.2vw,34px);line-height:1.05;font-weight:900;letter-spacing:0}
.director-balance-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:auto}
.director-balance-metrics strong{display:block;margin-top:6px;color:#fff;font-size:clamp(20px,1.8vw,28px);line-height:1.1;font-weight:900}
@media(max-width:1080px){.director-balance-top{grid-template-columns:1fr}.director-balance-total{text-align:left;min-width:0}.director-balance-metrics{grid-template-columns:1fr}}

/* Firebase sync and online users */
.sync-badge{display:inline-flex;align-items:center;min-height:34px;border:1px solid var(--line);border-radius:999px;background:#f8fafc;color:#475569;padding:7px 10px;font-size:10px;font-weight:900;text-transform:uppercase;white-space:nowrap}
.sync-badge.online{background:#ecfdf5;color:#047857;border-color:#bbf7d0}
.sync-badge.error{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.online-users{position:relative;display:inline-flex;align-items:center}
.online-trigger{height:34px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#334155;padding:4px 9px;display:flex;align-items:center;gap:4px;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.04)}
.online-avatar{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;background:#2563eb;color:#fff;font-size:11px;font-weight:900;border:2px solid #fff;box-shadow:0 0 0 1px #dbe4f0}
.online-avatar+.online-avatar{margin-left:-7px}
.online-avatar.small{width:22px;height:22px;margin:0;border:0;box-shadow:none;background:#eef2ff;color:#3730a3}
.online-more{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;background:#f1f5f9;color:#475569;font-size:10px;font-weight:900;border:2px solid #fff;margin-left:-7px}
.online-count{margin-left:6px;font-size:11px;font-weight:900;color:#475569;white-space:nowrap}
.online-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:260px;max-width:360px;max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 36px rgba(15,23,42,.16);padding:8px;display:none}
.online-users:hover .online-menu,.online-users:focus-within .online-menu{display:block}
.online-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#334155;font-size:12px;font-weight:800;white-space:nowrap}
.online-row:hover{background:#f8fafc}
@media(max-width:920px){.sync-badge{flex:0 0 auto}.online-count{display:none}.online-menu{left:0;right:auto;min-width:240px}}

/* Page action dropdowns */
.action-menu{position:relative;display:inline-flex}
.action-menu summary{height:36px;min-width:116px;border:1px solid var(--line);border-radius:10px;background:var(--blue);color:#fff;padding:0 36px 0 14px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;cursor:pointer;list-style:none;white-space:nowrap}
.action-menu summary::-webkit-details-marker{display:none}
.action-menu summary::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-65%) rotate(45deg)}
.action-menu[open] summary::after{transform:translateY(-35%) rotate(225deg)}
.action-menu-list{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 36px rgba(15,23,42,.16);padding:8px;display:grid;gap:4px}
.action-menu-list button,.action-menu-list label{width:100%;min-height:38px;border:0;background:#fff;color:#334155;border-radius:10px;padding:9px 10px;display:flex;align-items:center;justify-content:flex-start;text-align:left;font-size:12px;font-weight:850;cursor:pointer;text-transform:none;letter-spacing:0}
.action-menu-list button:hover,.action-menu-list label:hover{background:#f8fafc;color:#0f172a}
.menu-note{padding:9px 10px;color:#94a3b8;font-size:11px;font-weight:900;text-transform:uppercase}
@media(max-width:920px){.action-menu{width:100%}.action-menu summary{width:100%}.action-menu-list{left:0;right:auto;width:100%}}

/* Settings hub */
.settings-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;background:#eef2f7;padding:6px;border-radius:14px}
.settings-tabs button{border:0;background:transparent;color:#475569;border-radius:10px;min-height:36px;padding:8px 12px;font-weight:900;cursor:pointer}
.settings-tabs button.active{background:#fff;color:#1d4ed8;box-shadow:0 2px 8px rgba(15,23,42,.08)}

/* Reference dashboard polish */
body{background:#f3f6fb}
.app-header{background:#fff;border-bottom:0;box-shadow:0 10px 28px rgba(15,23,42,.05);padding:14px 24px}
.brand-icon{background:#ecfdf5;color:#16a34a;border-radius:12px}
.layout{width:100%;max-width:1540px;gap:22px;padding:22px 24px;grid-template-columns:248px minmax(0,1fr)}
.sidebar{top:92px;border:0;border-radius:0;background:#fff;box-shadow:0 12px 34px rgba(15,23,42,.06);min-height:calc(100vh - 136px)}
.nav-btn{gap:10px;color:#8a94a8}
.nav-btn:hover{background:#f4f8ff;color:#111827}
.nav-btn.active{background:#ecfdf5;color:#22c55e}
.nav-btn.active .nav-icon{color:#22c55e}
.main-panel{min-width:0}
.dashboard-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.dashboard-main{min-width:0;background:#f7faff;border:1px solid #edf2f7;padding:22px;border-radius:0}
.dashboard-side{display:grid;gap:16px;position:sticky;top:92px}
.dashboard-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.dashboard-kpi-grid .card{min-height:126px;border:0;border-radius:8px;box-shadow:0 14px 32px rgba(15,23,42,.06)}
.dashboard-kpi-grid .kpi-value{font-size:clamp(22px,2vw,30px);font-weight:950;line-height:1.12;word-break:normal;overflow-wrap:break-word}
.dashboard-director-grid{gap:18px}
.dashboard-shell .dashboard-director-grid.two-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.director-balance-card{border-radius:8px;box-shadow:0 20px 42px rgba(37,99,235,.18)}
.director-balance-top{grid-template-columns:1fr;gap:12px}
.director-balance-top h3{font-size:clamp(28px,2.5vw,38px)}
.director-balance-total{text-align:left;min-width:0}
.dashboard-chart-card{border:0;border-radius:8px;box-shadow:0 14px 32px rgba(15,23,42,.06)}
.dashboard-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.dashboard-card-head .card-title{margin:0}
.dashboard-legend{display:flex;gap:8px;flex-wrap:wrap}
.mini-bars{border:0;border-radius:8px;background:linear-gradient(180deg,#fff,#f8fbff);height:210px}
.bar{width:24px}
.side-card{background:#fff;border:0;border-radius:8px;padding:18px;box-shadow:0 14px 32px rgba(15,23,42,.06)}
.side-card h3{margin:0 0 14px;font-size:16px;color:#111827}
.side-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.side-card-head span{color:#22c55e;font-weight:950}
.side-amount{font-size:30px;font-weight:950;line-height:1.1}
.ring-meter{--p:0;width:190px;height:190px;margin:8px auto 4px;border-radius:50%;display:grid;place-items:center;text-align:center;background:conic-gradient(#22c5e5 calc(var(--p)*1%),#ff8a1f 0 72%,#3214c8 0);position:relative}
.ring-meter::after{content:"";position:absolute;inset:34px;background:#fff;border-radius:50%}
.ring-meter strong,.ring-meter small{position:relative;z-index:1;display:block}
.ring-meter strong{font-size:17px;max-width:120px;margin-top:8px}
.ring-meter small{color:#94a3b8;font-size:10px;font-weight:900;text-transform:uppercase;margin-top:4px}
.side-list{display:grid;gap:12px}
.side-list-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center}
.side-list-row strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-list-row small{display:block;color:#94a3b8;font-size:11px;margin-top:2px}
.side-list-row em{font-style:normal;font-size:12px;font-weight:950;white-space:nowrap}
.avatar-dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;font-weight:950}
.card,.table-wrap,.toolbar{border-radius:8px}
@media(max-width:1240px){.dashboard-shell{grid-template-columns:1fr}.dashboard-side{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:920px){.layout{padding:14px;grid-template-columns:1fr}.sidebar{min-height:auto;border-radius:16px}.dashboard-main{padding:14px}.dashboard-side{grid-template-columns:1fr}.dashboard-kpi-grid{grid-template-columns:1fr}.dashboard-card-head{align-items:flex-start;flex-direction:column}.ring-meter{width:160px;height:160px}}

/* Enterprise dusk redesign */
:root{
  --bg:#070b12;
  --panel:#0d131f;
  --panel-2:#111827;
  --panel-3:#151f2e;
  --text:#f8fafc;
  --muted:#8d9ab0;
  --line:#243044;
  --blue:#48a5ff;
  --indigo:#7c5cff;
  --green:#2fd18b;
  --red:#ff5c7a;
  --amber:#ffb14a;
  --purple:#a76cff;
  --shadow:0 22px 48px rgba(0,0,0,.34);
}
html{background:#070b12}
body{background:radial-gradient(circle at 20% -10%,rgba(72,165,255,.18),transparent 32%),radial-gradient(circle at 95% 0,rgba(167,108,255,.16),transparent 30%),#070b12;color:var(--text);font-size:14px;line-height:1.5}
.app{background:transparent}
.app-header{top:0;background:rgba(8,12,20,.92);border-bottom:1px solid rgba(141,154,176,.18);box-shadow:none;backdrop-filter:blur(18px);min-height:74px;padding:14px 28px}
.brand-row{gap:14px}
.brand-icon{height:44px;width:44px;border-radius:14px;background:linear-gradient(135deg,#2fd18b,#48a5ff);color:#061018;box-shadow:0 14px 30px rgba(47,209,139,.22)}
.app-header h1{color:#fff;font-size:15px;letter-spacing:.16em}
.app-header p{color:#8d9ab0;letter-spacing:.12em}
.header-tools{gap:10px}
.user-badge,.sync-badge,.status-badge,.badge{background:#111827;border-color:#2a3850;color:#dbe7ff;border-radius:999px;letter-spacing:.08em}
.sync-badge.online{background:rgba(47,209,139,.11);border-color:rgba(47,209,139,.36);color:#5ef0aa}
.sync-badge.error{background:rgba(255,92,122,.12);border-color:rgba(255,92,122,.36);color:#ff8fa3}
.icon-btn{height:38px;border-radius:12px;background:#111827;border-color:#2a3850;color:#dbe7ff}
.icon-btn:hover{background:#172236}
.layout{max-width:1600px;width:100%;grid-template-columns:264px minmax(0,1fr);gap:22px;padding:22px 28px}
.sidebar{top:96px;min-height:calc(100vh - 136px);padding:16px;background:linear-gradient(180deg,rgba(13,19,31,.96),rgba(8,12,20,.96));border:1px solid rgba(141,154,176,.16);border-radius:22px;box-shadow:var(--shadow)}
.sidebar-top{margin-bottom:16px;padding:4px 4px 10px;border-bottom:1px solid rgba(141,154,176,.14)}
.nav-label{color:#7f8da6;letter-spacing:.16em}
.collapse-btn{background:#111827;border-color:#2a3850;color:#dbe7ff;border-radius:12px}
.collapse-btn:hover{background:#172236}
.nav-btn{height:46px;min-height:46px;margin:4px 0;padding:0 12px;border-radius:14px;color:#93a0b5;font-size:13px;gap:11px}
.nav-btn:hover{background:rgba(72,165,255,.08);color:#edf5ff}
.nav-btn.active{background:linear-gradient(135deg,rgba(47,209,139,.18),rgba(72,165,255,.12));color:#fff;box-shadow:inset 3px 0 0 #2fd18b}
.nav-icon{background:#141d2b;color:#8d9ab0}
.nav-btn.active .nav-icon{background:rgba(47,209,139,.15);color:#5ef0aa}
.layout.sidebar-collapsed{grid-template-columns:82px minmax(0,1fr)}
.layout.sidebar-collapsed .sidebar{padding:14px 10px}
.layout.sidebar-collapsed .nav-btn{width:54px;height:54px;min-height:54px;border-radius:16px}
.layout.sidebar-collapsed .nav-icon{background:#141d2b;color:#dbe7ff}
.main-panel{min-width:0}
.page-header{min-height:auto;margin:0 0 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.page-header h2{color:#fff;font-size:clamp(24px,2.4vw,34px);line-height:1.05;font-weight:900;letter-spacing:-.02em}
.page-header p{color:#8d9ab0;font-size:13px;max-width:780px}
.page-header .no-print{align-items:center}
.card,.table-wrap,.toolbar,.side-card,.dashboard-main{background:linear-gradient(180deg,rgba(17,24,39,.96),rgba(13,19,31,.96));border:1px solid rgba(141,154,176,.16);border-radius:18px;box-shadow:0 18px 42px rgba(0,0,0,.24)}
.card{padding:18px}
.card-title{color:#dbe7ff;font-size:12px;letter-spacing:.13em}
.kpi-grid{gap:16px}
.kpi-grid .card{min-height:120px}
.kpi-label{color:#8d9ab0;letter-spacing:.14em}
.kpi-value{color:#fff;font-size:clamp(24px,2vw,32px);line-height:1.12;word-break:normal;overflow-wrap:anywhere}
.green{color:#2fd18b}.red{color:#ff5c7a}.blue{color:#48a5ff}.purple{color:#a76cff}
.dashboard-shell{grid-template-columns:minmax(0,1fr) 320px;gap:20px}
.dashboard-main{padding:22px}
.dashboard-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:16px}
.dashboard-kpi-grid .card{border-radius:18px;background:linear-gradient(145deg,#111827,#0d131f)}
.dashboard-director-grid{margin-bottom:16px}
.dashboard-shell .dashboard-director-grid.two-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.split-card{background:linear-gradient(135deg,#0f766e 0%,#1d4ed8 58%,#5731d9 100%);border:1px solid rgba(255,255,255,.10);border-radius:20px;box-shadow:0 20px 48px rgba(29,78,216,.22)}
.split-card.red-bg{background:linear-gradient(135deg,#9f1239,#7f1d1d)}
.director-balance-card{min-height:210px;gap:20px}
.director-balance-top{grid-template-columns:minmax(0,1fr) auto;gap:18px}
.director-balance-top h3{font-size:clamp(26px,2vw,36px)}
.director-balance-total{text-align:right;min-width:210px}
.director-balance-total span,.director-balance-metrics span{color:rgba(255,255,255,.72);font-size:13px}
.director-balance-total strong{font-size:clamp(22px,1.8vw,30px)}
.director-balance-metrics{gap:18px}
.director-balance-metrics strong{font-size:clamp(18px,1.5vw,24px)}
.dashboard-card-head{margin-bottom:16px}
.dashboard-legend .badge{background:#101827}
.mini-bars{height:230px;background:linear-gradient(180deg,#101827,#0b1019);border:1px solid rgba(141,154,176,.12);border-radius:16px;padding:18px}
.bar{width:26px;border-radius:8px 8px 0 0}
.bar.in{background:linear-gradient(180deg,#5ef0aa,#12b981)}
.bar.out{background:linear-gradient(180deg,#ff8fa3,#ff3f68)}
.dashboard-side{gap:16px;top:96px}
.side-card{padding:18px}
.side-card h3{color:#fff;font-size:15px}
.side-card-head span{color:#5ef0aa}
.side-amount{font-size:30px}
.cash-flow-card{display:grid;gap:16px}
.ring-meter{width:164px;height:164px;margin:2px auto;border-radius:50%;display:grid;place-items:center;text-align:center;background:conic-gradient(#48a5ff calc(var(--p)*1%),rgba(72,165,255,.12) 0 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);position:relative}
.ring-meter::after{content:"";position:absolute;inset:31px;background:#111827;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(141,154,176,.12)}
.ring-meter>div{position:relative;z-index:1;display:grid;gap:4px;justify-items:center;max-width:104px}
.ring-meter strong{color:#fff;font-size:18px;line-height:1.05;letter-spacing:0;max-width:none;margin:0}
.ring-meter small{color:#8d9ab0;font-size:10px;font-weight:900;text-transform:uppercase;line-height:1.15;letter-spacing:.08em;margin:0}
.side-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:2px}
.side-metrics div{background:rgba(72,165,255,.06);border:1px solid rgba(141,154,176,.12);border-radius:14px;padding:10px;min-width:0}
.side-metrics span{display:block;color:#8d9ab0;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.side-metrics strong{display:block;margin-top:4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-list-row{grid-template-columns:40px minmax(0,1fr) auto}
.side-list-row strong{color:#f8fafc}
.side-list-row small{color:#8d9ab0}
.avatar-dot{background:rgba(72,165,255,.12);color:#85c5ff}
.toolbar{padding:14px;margin:16px 0;background:linear-gradient(180deg,rgba(17,24,39,.92),rgba(13,19,31,.92))}
.toolbar .filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;width:100%}
.filter-field label,label{color:#8d9ab0}
input,select,textarea{height:40px;background:#0a0f18;border-color:#2a3850;color:#f8fafc;border-radius:12px}
input::placeholder,textarea::placeholder{color:#657188}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(72,165,255,.34);border-color:#48a5ff}
.primary-btn,.secondary-btn,.danger-btn,.ghost-btn,.file-btn{height:38px;border-radius:12px;padding:0 14px;letter-spacing:.03em}
.primary-btn{background:linear-gradient(135deg,#2fd18b,#48a5ff);color:#061018}
.secondary-btn{background:#172236;border:1px solid #2a3850;color:#dbe7ff}
.ghost-btn{background:#0a0f18;border:1px solid #2a3850;color:#dbe7ff}
.danger-btn{background:rgba(255,92,122,.14);border:1px solid rgba(255,92,122,.35);color:#ff8fa3}
.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover,.danger-btn:hover{filter:brightness(1.08)}
.table-wrap{background:#0d131f;overflow:auto}
table{font-size:12px;min-width:760px}
th{background:#111827;color:#8d9ab0;border-bottom:1px solid #243044;padding:13px 14px}
td{color:#dbe7ff;border-bottom:1px solid rgba(141,154,176,.12);padding:13px 14px}
td strong{color:#fff}
tbody tr:hover{background:rgba(72,165,255,.055)}
.right{font-variant-numeric:tabular-nums}
.muted{color:#8d9ab0}
.notice{background:rgba(72,165,255,.10);border-left-color:#48a5ff;color:#cfe6ff}
.danger-notice{background:rgba(255,92,122,.10);color:#ffc4ce}
.stepper{gap:10px}
.step{background:#111827;color:#8d9ab0;border:1px solid #243044}
.step.active{background:rgba(72,165,255,.14);color:#9ed0ff;border-color:rgba(72,165,255,.34)}
.sheet-tabs,.settings-tabs{background:#0a0f18;border:1px solid #243044;border-radius:16px;padding:6px}
.sheet-tabs button,.settings-tabs button{background:transparent;border:0;color:#8d9ab0;border-radius:12px}
.sheet-tabs button.active,.settings-tabs button.active{background:#172236;color:#fff;box-shadow:none}
.copy-box{background:#05080d;color:#dbe7ff;border:1px solid #243044}
.action-menu summary{background:linear-gradient(135deg,#172236,#111827);border-color:#2a3850;color:#f8fafc;border-radius:12px}
.action-menu-list{background:#0d131f;border-color:#2a3850;border-radius:16px}
.action-menu-list button,.action-menu-list label{background:transparent;color:#dbe7ff;border-radius:12px}
.action-menu-list button:hover,.action-menu-list label:hover{background:#172236;color:#fff}
.menu-note{color:#8d9ab0}
.online-trigger{background:#111827;border-color:#2a3850;color:#dbe7ff}
.online-avatar{background:linear-gradient(135deg,#48a5ff,#7c5cff);border-color:#111827;color:#fff}
.online-avatar.small{background:#172236;color:#dbe7ff}
.online-more{background:#172236;color:#dbe7ff;border-color:#111827}
.online-menu{background:#0d131f;border-color:#2a3850}
.online-row{color:#dbe7ff}
.online-row:hover{background:#172236}
.auth-screen{background:radial-gradient(circle at 30% 0,rgba(72,165,255,.18),transparent 36%),#070b12}
.auth-card{background:#0d131f;border-color:#243044;border-radius:22px;color:#f8fafc}
.auth-card p{color:#8d9ab0}
.mark{background:linear-gradient(135deg,#2fd18b,#48a5ff);color:#061018;border-radius:16px}
.mark.danger{background:rgba(255,92,122,.16);color:#ff8fa3}
.app-footer{background:transparent;border-top:1px solid rgba(141,154,176,.12);color:#657188}
@media(max-width:1240px){.dashboard-shell{grid-template-columns:1fr}.dashboard-side{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-shell .dashboard-director-grid.two-grid{grid-template-columns:1fr}}
@media(max-width:980px){.app-header{position:static;align-items:flex-start;flex-direction:column}.layout,.layout.sidebar-collapsed{grid-template-columns:1fr;padding:16px}.sidebar{position:static;min-height:auto;border-radius:20px}.layout.sidebar-collapsed .nav-label,.layout.sidebar-collapsed .nav-text{display:inline}.layout.sidebar-collapsed .nav-btn,.nav-btn{width:100%;height:46px;justify-content:flex-start}.layout.sidebar-collapsed .nav-gap{display:block}.page-header{grid-template-columns:1fr}.dashboard-main{padding:16px}.dashboard-side{grid-template-columns:1fr}.dashboard-kpi-grid,.dashboard-kpi-grid.single-director-kpis{grid-template-columns:1fr}.director-balance-top{grid-template-columns:1fr}.director-balance-total{text-align:left;min-width:0}.toolbar .filters{grid-template-columns:1fr}.page-header .no-print{justify-content:flex-start}.primary-btn,.secondary-btn,.danger-btn,.ghost-btn,.file-btn{width:100%}}
@media print{body{background:#fff;color:#0f172a}.card,.table-wrap,.toolbar{background:#fff;color:#0f172a;box-shadow:none;border-color:#cbd5e1}td,th{color:#0f172a;border-color:#e2e8f0}}

/* Data table alignment pass */
.table-wrap{border-radius:18px;overflow-x:auto;overflow-y:hidden}
.data-table{width:100%;min-width:920px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:13px}
.data-table th,.data-table td{padding:14px 16px;line-height:1.35;vertical-align:middle}
.data-table th{height:46px;position:sticky;top:0;z-index:1;font-size:11px;letter-spacing:.14em}
.data-table tbody tr{min-height:74px}
.data-table tbody tr:nth-child(even){background:rgba(72,165,255,.025)}
.data-table td strong{display:block;max-width:100%;font-size:13px;line-height:1.25;font-weight:900;white-space:normal;overflow-wrap:anywhere}
.data-table td .muted{display:block;margin-top:5px;max-width:100%;font-size:12px;line-height:1.35;color:#9bb2d6;white-space:normal;overflow-wrap:anywhere}
.data-table .right{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table .center{text-align:center}
.data-table td:first-child,.data-table th:first-child{width:112px}
.data-table td:nth-child(2),.data-table th:nth-child(2){width:auto}
.data-table td:last-child,.data-table th:last-child{width:142px}
.data-table.cols-4 td:nth-child(3),.data-table.cols-4 th:nth-child(3){width:160px;text-align:right}
.data-table.cols-4 td:nth-child(4),.data-table.cols-4 th:nth-child(4){width:110px;text-align:right}
.data-table.cols-5 td:nth-child(3),.data-table.cols-5 th:nth-child(3){width:155px;text-align:right}
.data-table.cols-5 td:nth-child(4),.data-table.cols-5 th:nth-child(4){width:150px}
.data-table.cols-5 td:nth-child(5),.data-table.cols-5 th:nth-child(5){width:148px}
.data-table.cols-6 td:nth-child(3),.data-table.cols-6 th:nth-child(3){width:220px}
.data-table.cols-6 td:nth-child(4),.data-table.cols-6 th:nth-child(4){width:150px;text-align:right}
.data-table.cols-6 td:nth-child(5),.data-table.cols-6 th:nth-child(5){width:160px}
.data-table.cols-6 td:nth-child(6),.data-table.cols-6 th:nth-child(6){width:150px}
.data-table.cols-7 td:nth-child(n+5),.data-table.cols-7 th:nth-child(n+5),.data-table.cols-8 td:nth-child(n+5),.data-table.cols-8 th:nth-child(n+5),.data-table.cols-9 td:nth-child(n+5),.data-table.cols-9 th:nth-child(n+5){width:145px;text-align:right}
.data-table td.center.no-print{white-space:nowrap}
.data-table td.center.no-print .ghost-btn,.data-table td.center.no-print .primary-btn,.data-table td.center.no-print .secondary-btn{width:auto;min-width:64px;height:32px;margin:2px;padding:0 10px;border-radius:10px;font-size:11px}
.data-table td.center.no-print .ghost-btn+ .ghost-btn{margin-left:6px}
#page-receipts .data-table td:first-child,#page-receipts .data-table th:first-child,#page-vendor-payments .data-table td:first-child,#page-vendor-payments .data-table th:first-child,#page-summary .data-table td:first-child,#page-summary .data-table th:first-child{width:115px}
#page-receipts .data-table td:nth-child(2),#page-vendor-payments .data-table td:nth-child(2){padding-right:28px}
#page-receipts .data-table td:nth-child(3),#page-vendor-payments .data-table td:nth-child(3){font-size:13px;font-weight:900}
@media(max-width:980px){.data-table{min-width:860px}.data-table th,.data-table td{padding:12px}.data-table td.center.no-print .ghost-btn,.data-table td.center.no-print .primary-btn,.data-table td.center.no-print .secondary-btn{width:auto;min-width:62px}}

/* Premium finance SaaS final system */
:root{
  --bg:#0B1220;
  --card:#131C2F;
  --card-2:#0f172a;
  --accent:#3B82F6;
  --success:#22C55E;
  --danger:#EF4444;
  --warning:#F59E0B;
  --purple:#8B5CF6;
  --text:#F8FAFC;
  --secondary:#94A3B8;
  --border:rgba(255,255,255,.06);
  --shadow-soft:0 18px 50px rgba(0,0,0,.28);
}
body{background:linear-gradient(180deg,#0B1220 0%,#090f1c 100%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
.app-header{height:72px;min-height:72px;padding:0 32px;background:rgba(11,18,32,.86);border-bottom:1px solid var(--border)}
.brand-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#22d3ee);color:#fff}
.app-header h1{font-size:14px;letter-spacing:.12em}.app-header p{font-size:10px;color:var(--secondary)}
.layout{max-width:1680px;padding:32px;gap:24px;grid-template-columns:272px minmax(0,1fr)}
.sidebar{top:104px;min-height:calc(100vh - 136px);background:rgba(19,28,47,.78);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-soft)}
.sidebar-top{padding:6px 8px 14px}.nav-label{color:var(--secondary)}
.nav-btn{height:44px;min-height:44px;border-radius:12px;color:#a8b3c7;transition:transform .16s ease,background .16s ease,color .16s ease}
.nav-btn:hover{transform:translateX(2px);background:rgba(59,130,246,.10);color:#fff}
.nav-btn.active{background:rgba(59,130,246,.16);box-shadow:inset 3px 0 0 var(--accent);color:#fff}
.nav-icon{background:rgba(255,255,255,.05);color:#a8b3c7}.nav-btn.active .nav-icon{background:rgba(59,130,246,.20);color:#93c5fd}
.main-panel{display:block;min-width:0}
.page-header{margin-bottom:24px;gap:24px}.page-header h2{font-size:32px;line-height:1.05;font-weight:850}.page-header p{font-size:14px;color:var(--secondary)}
.card,.toolbar,.table-wrap,.side-card,.dashboard-main{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-soft)}
.card{padding:24px}.grid{gap:24px}.four-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kpi-grid{gap:24px}.kpi-grid .card,.report-summary .card,.bank-summary .card{min-height:138px;transition:transform .16s ease,border-color .16s ease}
.kpi-grid .card:hover,.report-summary .card:hover,.bank-summary .card:hover,.bank-card:hover{transform:translateY(-2px);border-color:rgba(59,130,246,.35)}
.kpi-label{font-size:12px;color:var(--secondary);letter-spacing:.12em}.kpi-value{font-size:36px;color:#fff}
.green{color:var(--success)}.red{color:var(--danger)}.blue{color:#60a5fa}.purple{color:var(--purple)}
.primary-btn,.secondary-btn,.danger-btn,.ghost-btn,.icon-btn,.file-btn{height:40px;border-radius:12px;font-size:13px;font-weight:800;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.primary-btn:hover,.secondary-btn:hover,.danger-btn:hover,.ghost-btn:hover,.icon-btn:hover{transform:translateY(-1px)}
.primary-btn{background:var(--accent);color:#fff}.secondary-btn{background:rgba(255,255,255,.06);border:1px solid var(--border);color:#fff}.ghost-btn{background:transparent;border:1px solid var(--border);color:#e2e8f0}.danger-btn{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.28);color:#fca5a5}
input,select,textarea{height:42px;border-radius:12px;background:#0B1220;border:1px solid var(--border);color:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(59,130,246,.35);border-color:rgba(59,130,246,.65)}
.toolbar{padding:18px;margin:24px 0}.toolbar .filters{gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.dashboard-shell{grid-template-columns:minmax(0,1fr) 340px;gap:24px}.dashboard-main{padding:24px}
.dashboard-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.dashboard-content-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:24px}
.dashboard-side{gap:24px}.dashboard-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.card-title{font-size:15px;color:#fff;letter-spacing:0;text-transform:none}
.mini-bars{height:260px;background:#0B1220;border-radius:16px}.bar{width:30px}
.director-balance-card{border-radius:18px;min-height:210px}
.activity-list{display:grid}.activity-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.activity-row:last-child{border-bottom:0}.activity-row strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-row small{display:block;color:var(--secondary);font-size:12px}.activity-row em{font-style:normal;font-weight:900;white-space:nowrap}
.cash-flow-card{gap:18px}.ring-meter{width:176px;height:176px}.ring-meter::after{inset:34px}.side-metrics div{background:rgba(255,255,255,.04);border-color:var(--border)}
.quick-actions{display:grid;gap:10px}.quick-actions h3{margin-bottom:2px}.quick-actions button{width:100%;justify-content:center}
.side-list-row{grid-template-columns:40px minmax(0,1fr) auto}.side-list-row strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.side-list-row em{font-variant-numeric:tabular-nums}
.data-table{min-width:980px;font-size:13px}.data-table th{height:48px;background:#0F172A;color:#9fb0ca}.data-table th,.data-table td{padding:14px 16px}.data-table tbody tr{height:64px}.data-table tbody tr:hover{background:rgba(59,130,246,.075)}
.data-table td strong,.data-table td .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.data-table td .muted{max-width:100%}
#page-summary .data-table{min-width:1540px}#page-summary .data-table th:nth-child(1),#page-summary .data-table td:nth-child(1){width:120px}#page-summary .data-table th:nth-child(2),#page-summary .data-table td:nth-child(2){width:140px}#page-summary .data-table th:nth-child(3),#page-summary .data-table td:nth-child(3){width:auto;min-width:250px}#page-summary .data-table th:nth-child(4),#page-summary .data-table td:nth-child(4){width:180px}#page-summary .data-table th:nth-child(n+5),#page-summary .data-table td:nth-child(n+5){width:170px;text-align:right}
.bank-summary{margin-bottom:24px}.bank-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.bank-card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-soft);padding:24px;transition:transform .16s ease,border-color .16s ease}
.bank-card-top{display:flex;gap:14px;align-items:center}.bank-logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(59,130,246,.16);color:#93c5fd;font-weight:900}.bank-card h3{margin:0;color:#fff;font-size:16px}.bank-card small,.bank-card-foot{color:var(--secondary);font-size:12px}.bank-card-balance{font-size:30px;font-weight:900;margin:22px 0;color:#fff}.bank-card-foot{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.analytics-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:24px;margin-bottom:24px}.report-bars{height:240px;display:flex;align-items:end;gap:18px;padding:16px 6px 0}.report-bar-set{height:100%;display:flex;align-items:end;gap:5px;flex:1;position:relative}.report-bar-set small{position:absolute;bottom:-22px;left:0;right:0;text-align:center;color:var(--secondary);font-size:11px}.report-bar{width:18px;border-radius:8px 8px 0 0}.green-bg{background:var(--success)}.red-bg{background:var(--danger)}
.split-meter{width:190px;height:190px;margin:10px auto;border-radius:50%;display:grid;place-items:center;text-align:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--purple) 0);position:relative}.split-meter::after{content:"";position:absolute;inset:36px;border-radius:50%;background:var(--card)}.split-meter strong,.split-meter small{position:relative;z-index:1;display:block}.split-meter small{color:var(--secondary);font-size:12px}
@media(max-width:1440px){.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-shell{grid-template-columns:1fr}.dashboard-side{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-content-grid{grid-template-columns:1fr}.four-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.layout{padding:18px}.dashboard-side,.analytics-grid,.four-grid{grid-template-columns:1fr}.page-header h2{font-size:26px}.kpi-value{font-size:28px}.data-table{min-width:900px}}

/* Viewport gap correction */
.layout{max-width:none;padding:24px;grid-template-columns:248px minmax(0,1fr);gap:20px}
.sidebar{width:248px}
.main-panel{width:100%}
.dashboard-shell{grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.dashboard-side{position:sticky;top:96px;display:grid;grid-template-columns:1fr;gap:20px;width:100%}
.dashboard-main{min-width:0}
@media(max-width:1180px){.dashboard-shell{grid-template-columns:1fr}.dashboard-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-content-grid{grid-template-columns:1fr}}
@media(max-width:980px){.layout{padding:16px;grid-template-columns:1fr}.sidebar{width:100%}.dashboard-side{grid-template-columns:1fr}}

/* Collapsed sidebar overlap correction */
#layout.layout.sidebar-collapsed{grid-template-columns:80px minmax(0,1fr)}
#layout.layout.sidebar-collapsed .sidebar{width:80px;min-width:80px;padding:14px 10px}
#layout.layout.sidebar-collapsed .sidebar-top{justify-content:center;padding:0 0 12px}
#layout.layout.sidebar-collapsed .collapse-btn{width:48px;height:48px}
#layout.layout.sidebar-collapsed .nav-label,#layout.layout.sidebar-collapsed .nav-text{display:none!important}
#layout.layout.sidebar-collapsed .nav-btn{width:52px;height:52px;min-height:52px;margin:8px auto;padding:0;justify-content:center}
#layout.layout.sidebar-collapsed .nav-icon{width:34px;height:34px;flex-basis:34px}
#layout.layout.sidebar-collapsed .main-panel{min-width:0}
@media(max-width:980px){#layout.layout.sidebar-collapsed{grid-template-columns:1fr}#layout.layout.sidebar-collapsed .sidebar{width:100%;min-width:0}#layout.layout.sidebar-collapsed .nav-label,#layout.layout.sidebar-collapsed .nav-text{display:inline!important}#layout.layout.sidebar-collapsed .nav-btn{width:100%;height:46px;min-height:46px;margin:4px 0;padding:0 12px;justify-content:flex-start}}

/* Monthly dashboard chart labels */
.monthly-bars{height:280px;display:flex;align-items:stretch;gap:18px;padding:18px 18px 34px}
.monthly-bar-group{height:100%;display:grid;grid-template-rows:1fr auto;gap:10px;align-items:end;justify-items:center;min-width:64px;flex:1}
.bar-stack{height:100%;display:flex;align-items:end;justify-content:center;gap:6px;width:100%}
.monthly-bar-group .bar{width:22px;min-height:5px}
.monthly-bar-group span{color:var(--secondary);font-size:12px;font-weight:800;white-space:nowrap}
.empty-chart{display:grid;place-items:center}
@media(max-width:980px){.monthly-bars{gap:12px;overflow-x:auto}.monthly-bar-group{min-width:72px;flex:0 0 72px}}

/* Light theme */
[data-theme="light"]{
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --card-2:#F1F5F9;
  --accent:#2563EB;
  --success:#16A34A;
  --danger:#DC2626;
  --warning:#D97706;
  --purple:#7C3AED;
  --text:#0F172A;
  --secondary:#64748B;
  --border:rgba(15,23,42,.10);
  --shadow-soft:0 18px 44px rgba(15,23,42,.08);
}
html[data-theme="light"],body[data-theme="light"]{background:linear-gradient(180deg,#F8FAFC 0%,#EEF2F7 100%);color:var(--text)}
[data-theme="light"] .app-header{background:rgba(255,255,255,.88);border-bottom:1px solid var(--border)}
[data-theme="light"] .app-header h1,[data-theme="light"] .page-header h2,[data-theme="light"] .card-title,[data-theme="light"] .side-card h3,[data-theme="light"] .bank-card h3,[data-theme="light"] td strong,[data-theme="light"] .kpi-value,[data-theme="light"] .bank-card-balance{color:#0F172A}
[data-theme="light"] .app-header p,[data-theme="light"] .page-header p,[data-theme="light"] .muted,[data-theme="light"] .kpi-label,[data-theme="light"] .bank-card small,[data-theme="light"] .bank-card-foot,[data-theme="light"] .activity-row small,[data-theme="light"] .side-metrics span,[data-theme="light"] .ring-meter small{color:#64748B}
[data-theme="light"] .sidebar,[data-theme="light"] .card,[data-theme="light"] .toolbar,[data-theme="light"] .table-wrap,[data-theme="light"] .side-card,[data-theme="light"] .dashboard-main,[data-theme="light"] .bank-card{background:#FFFFFF;border-color:var(--border);box-shadow:var(--shadow-soft)}
[data-theme="light"] .nav-btn{color:#64748B}
[data-theme="light"] .nav-btn:hover{background:#EFF6FF;color:#0F172A}
[data-theme="light"] .nav-btn.active{background:#DBEAFE;color:#1D4ED8;box-shadow:inset 3px 0 0 var(--accent)}
[data-theme="light"] .nav-icon{background:#F1F5F9;color:#64748B}
[data-theme="light"] .nav-btn.active .nav-icon{background:#BFDBFE;color:#1D4ED8}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#FFFFFF;border-color:var(--border);color:#0F172A}
[data-theme="light"] .secondary-btn,[data-theme="light"] .ghost-btn,[data-theme="light"] .icon-btn,[data-theme="light"] .action-menu summary{background:#FFFFFF;border-color:var(--border);color:#0F172A}
[data-theme="light"] .user-badge,[data-theme="light"] .sync-badge,[data-theme="light"] .status-badge,[data-theme="light"] .badge{background:#F8FAFC;border-color:var(--border);color:#334155}
[data-theme="light"] .data-table th{background:#F8FAFC;color:#64748B;border-bottom:1px solid var(--border)}
[data-theme="light"] td{color:#334155;border-bottom:1px solid rgba(15,23,42,.08)}
[data-theme="light"] tbody tr:hover{background:#F8FAFC}
[data-theme="light"] .mini-bars,[data-theme="light"] .copy-box{background:#F8FAFC;border-color:var(--border);color:#0F172A}
[data-theme="light"] .ring-meter::after,[data-theme="light"] .split-meter::after{background:#FFFFFF}
[data-theme="light"] .side-metrics div{background:#F8FAFC;border-color:var(--border)}
[data-theme="light"] .online-trigger,[data-theme="light"] .online-menu,[data-theme="light"] .action-menu-list{background:#FFFFFF;border-color:var(--border);color:#0F172A}
[data-theme="light"] .online-row,[data-theme="light"] .action-menu-list button,[data-theme="light"] .action-menu-list label{color:#0F172A}
[data-theme="light"] .action-menu-list button:hover,[data-theme="light"] .action-menu-list label:hover,[data-theme="light"] .online-row:hover{background:#F1F5F9}
[data-theme="light"] .sheet-tabs,[data-theme="light"] .settings-tabs{background:#F1F5F9;border-color:var(--border)}
[data-theme="light"] .sheet-tabs button.active,[data-theme="light"] .settings-tabs button.active{background:#FFFFFF;color:#1D4ED8}
[data-theme="light"] .auth-screen{background:linear-gradient(180deg,#EFF6FF,#F8FAFC)}
[data-theme="light"] .auth-card{background:#FFFFFF;border-color:var(--border);color:#0F172A}

/* Light mode contrast fixes */
[data-theme="light"] .split-card,
[data-theme="light"] .director-balance-card{
  background:linear-gradient(135deg,#0f766e 0%,#2563eb 58%,#7c3aed 100%);
  border-color:rgba(37,99,235,.18);
  color:#fff;
}
[data-theme="light"] .split-card h3,
[data-theme="light"] .director-balance-card h3,
[data-theme="light"] .director-balance-card strong,
[data-theme="light"] .director-balance-total strong,
[data-theme="light"] .director-balance-metrics strong{color:#fff}
[data-theme="light"] .director-balance-total span,
[data-theme="light"] .director-balance-metrics span{color:rgba(255,255,255,.78)}
[data-theme="light"] .side-list-row strong,
[data-theme="light"] .activity-row strong{color:#0F172A}
[data-theme="light"] .side-list-row small,
[data-theme="light"] .activity-row small{color:#64748B}
[data-theme="light"] .side-list-row em,
[data-theme="light"] .activity-row em{font-weight:900}
[data-theme="light"] .avatar-dot{background:#E0F2FE;color:#2563EB}
[data-theme="light"] .cash-flow-card .ring-meter strong{color:#0F172A}
[data-theme="light"] .quick-actions .secondary-btn,
[data-theme="light"] .quick-actions .ghost-btn{background:#fff;color:#0F172A;border-color:rgba(15,23,42,.12)}
[data-theme="light"] .dashboard-chart-card,
[data-theme="light"] .dashboard-activity,
[data-theme="light"] .side-card{color:#0F172A}
[data-theme="light"] .dashboard-card-head .card-title{color:#0F172A}
[data-theme="light"] .monthly-bar-group span{color:#475569}
[data-theme="light"] .report-bar-set small{color:#475569}
[data-theme="light"] .bank-logo{background:#DBEAFE;color:#1D4ED8}
[data-theme="light"] .notice{background:#EFF6FF;color:#1E3A8A}
[data-theme="light"] .danger-notice{background:#FEF2F2;color:#991B1B}

/* Light mode table/value visibility */
[data-theme="light"] .green,
[data-theme="light"] .data-table .green,
[data-theme="light"] td.green,
[data-theme="light"] strong.green{color:#16A34A!important}
[data-theme="light"] .red,
[data-theme="light"] .data-table .red,
[data-theme="light"] td.red,
[data-theme="light"] strong.red{color:#DC2626!important}
[data-theme="light"] .blue,
[data-theme="light"] .data-table .blue,
[data-theme="light"] td.blue,
[data-theme="light"] strong.blue{color:#2563EB!important}
[data-theme="light"] .purple,
[data-theme="light"] .data-table .purple,
[data-theme="light"] td.purple,
[data-theme="light"] strong.purple{color:#7C3AED!important}
[data-theme="light"] .data-table td{color:#334155}
[data-theme="light"] .data-table td strong{color:#0F172A}
[data-theme="light"] .data-table td .muted,
[data-theme="light"] .muted,
[data-theme="light"] .side-card .muted,
[data-theme="light"] .bank-card .muted{color:#64748B!important}

/* Receipt and vendor table wrapping */
#page-receipts .table-wrap,
#page-vendor-payments .card .table-wrap{overflow-x:hidden}
#page-receipts .data-table,
#page-vendor-payments .data-table.cols-5{
  min-width:0;
  width:100%;
  table-layout:fixed;
}
#page-receipts .data-table th:nth-child(1),
#page-receipts .data-table td:nth-child(1),
#page-vendor-payments .data-table.cols-5 th:nth-child(1),
#page-vendor-payments .data-table.cols-5 td:nth-child(1){width:120px}
#page-receipts .data-table th:nth-child(2),
#page-receipts .data-table td:nth-child(2),
#page-vendor-payments .data-table.cols-5 th:nth-child(2),
#page-vendor-payments .data-table.cols-5 td:nth-child(2){width:auto;padding-right:18px}
#page-receipts .data-table th:nth-child(3),
#page-receipts .data-table td:nth-child(3),
#page-vendor-payments .data-table.cols-5 th:nth-child(3),
#page-vendor-payments .data-table.cols-5 td:nth-child(3){width:140px;text-align:right}
#page-receipts .data-table th:nth-child(4),
#page-receipts .data-table td:nth-child(4),
#page-vendor-payments .data-table.cols-5 th:nth-child(4),
#page-vendor-payments .data-table.cols-5 td:nth-child(4){width:132px}
#page-receipts .data-table th:nth-child(5),
#page-receipts .data-table td:nth-child(5),
#page-vendor-payments .data-table.cols-5 th:nth-child(5),
#page-vendor-payments .data-table.cols-5 td:nth-child(5){width:116px}
#page-receipts .data-table td:nth-child(2) strong,
#page-receipts .data-table td:nth-child(2) .muted,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) strong,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) .muted{
  white-space:normal;
  max-width:min(760px,100%);
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:anywhere;
  word-break:normal;
}
#page-receipts .data-table td:nth-child(2) .muted,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) .muted{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-clamp:2;
}
#page-receipts .data-table td:nth-child(2) strong,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) strong{
  display:block;
}
#page-receipts .data-table tbody tr,
#page-vendor-payments .data-table.cols-5 tbody tr{height:auto;min-height:62px}
#page-receipts .data-table td,
#page-vendor-payments .data-table.cols-5 td{padding-top:14px;padding-bottom:14px}
#page-receipts .data-table td.center.no-print,
#page-vendor-payments .data-table.cols-5 td.center.no-print{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:normal;
}
#page-receipts .data-table td.center.no-print .ghost-btn,
#page-receipts .data-table td.center.no-print .primary-btn,
#page-receipts .data-table td.center.no-print .secondary-btn,
#page-vendor-payments .data-table.cols-5 td.center.no-print .ghost-btn,
#page-vendor-payments .data-table.cols-5 td.center.no-print .primary-btn,
#page-vendor-payments .data-table.cols-5 td.center.no-print .secondary-btn{
  min-width:52px;
  height:30px;
  margin:0;
  padding:0 8px;
}
@media(max-width:1280px){
  #page-receipts .data-table th:nth-child(1),#page-receipts .data-table td:nth-child(1),#page-vendor-payments .data-table.cols-5 th:nth-child(1),#page-vendor-payments .data-table.cols-5 td:nth-child(1){width:110px}
  #page-receipts .data-table th:nth-child(3),#page-receipts .data-table td:nth-child(3),#page-vendor-payments .data-table.cols-5 th:nth-child(3),#page-vendor-payments .data-table.cols-5 td:nth-child(3){width:132px}
  #page-receipts .data-table th:nth-child(4),#page-receipts .data-table td:nth-child(4),#page-vendor-payments .data-table.cols-5 th:nth-child(4),#page-vendor-payments .data-table.cols-5 td:nth-child(4){width:128px}
  #page-receipts .data-table th:nth-child(5),#page-receipts .data-table td:nth-child(5),#page-vendor-payments .data-table.cols-5 th:nth-child(5),#page-vendor-payments .data-table.cols-5 td:nth-child(5){width:118px}
}

/* Zoho-style sidebar rail */
#layout.layout{
  grid-template-columns:252px minmax(0,1fr);
  transition:grid-template-columns .22s ease;
}
#layout .sidebar{
  width:252px;
  min-width:252px;
  min-height:calc(100vh - 128px);
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 14px 12px;
  overflow:hidden;
  background:#f7f8ff;
  border:1px solid rgba(148,163,184,.22);
  border-radius:0 18px 18px 0;
  box-shadow:10px 0 28px rgba(15,23,42,.06);
}
#layout .sidebar-top{
  display:block;
  padding:6px 10px 18px;
  margin:0 0 6px;
  border:0;
}
#layout .nav-label{
  margin:0;
  color:#667085;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.12em;
}
#layout .nav-btn{
  width:100%;
  height:48px;
  min-height:48px;
  margin:2px 0;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  border-radius:8px;
  color:#111827;
  background:transparent;
  box-shadow:none;
  font-size:15px;
  font-weight:750;
  letter-spacing:0;
  text-align:left;
}
#layout .nav-btn:hover{
  transform:none;
  background:#eef3ff;
  color:#0f172a;
}
#layout .nav-btn.active{
  background:#3b82f6;
  color:#fff;
  box-shadow:none;
}
#layout .nav-icon{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:transparent;
  color:#596275;
}
#layout .nav-btn.active .nav-icon{
  background:transparent;
  color:#fff;
}
#layout .nav-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#layout .collapse-btn{
  width:50px;
  height:50px;
  margin:auto 0 0 auto;
  display:grid;
  place-items:center;
  border:0;
  border-radius:12px 0 0 0;
  background:#ececff;
  color:#1f2937;
  font-size:0;
  box-shadow:none;
}
#layout .collapse-btn::before{
  content:"\2039";
  font-size:30px;
  line-height:1;
  font-weight:900;
}
#layout .collapse-btn::after{
  content:"";
  width:15px;
  height:15px;
  margin-left:-11px;
  background:linear-gradient(#1f2937,#1f2937) 0 2px/10px 2px no-repeat,
             linear-gradient(#1f2937,#1f2937) 0 7px/14px 2px no-repeat,
             linear-gradient(#1f2937,#1f2937) 0 12px/8px 2px no-repeat;
}
#layout.layout.sidebar-collapsed{
  grid-template-columns:88px minmax(0,1fr);
}
#layout.layout.sidebar-collapsed .sidebar{
  width:88px;
  min-width:88px;
  padding:14px 8px 0;
  align-items:center;
  border-radius:0 14px 14px 0;
}
#layout.layout.sidebar-collapsed .sidebar-top{
  display:none;
}
#layout.layout.sidebar-collapsed .nav-btn{
  width:66px;
  height:76px;
  min-height:76px;
  margin:2px auto;
  padding:7px 6px;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  border-radius:9px;
  text-align:center;
  font-size:12px;
  line-height:1.12;
}
#layout.layout.sidebar-collapsed .nav-icon{
  width:28px;
  height:28px;
  flex-basis:28px;
}
#layout.layout.sidebar-collapsed .nav-text{
  display:block!important;
  width:100%;
  max-height:28px;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}
#layout.layout.sidebar-collapsed .nav-btn.active{
  background:#3b82f6;
  color:#fff;
}
#layout.layout.sidebar-collapsed .collapse-btn{
  width:88px;
  height:54px;
  margin:auto -8px 0;
  border-radius:0;
  background:#e8e8ff;
}
#layout.layout.sidebar-collapsed .collapse-btn::before{
  content:"\203A";
}
[data-theme="dark"] #layout .sidebar{
  background:#131c2f;
  border-color:rgba(255,255,255,.08);
  box-shadow:10px 0 28px rgba(0,0,0,.18);
}
[data-theme="dark"] #layout .nav-label{color:#94a3b8}
[data-theme="dark"] #layout .nav-btn{color:#dbe7ff}
[data-theme="dark"] #layout .nav-btn:hover{background:rgba(59,130,246,.12);color:#fff}
[data-theme="dark"] #layout .nav-icon{color:#9fb0ca}
[data-theme="dark"] #layout .nav-btn.active .nav-icon{color:#fff}
[data-theme="dark"] #layout .collapse-btn{background:#202a44;color:#f8fafc}
[data-theme="dark"] #layout .collapse-btn::after{
  background:linear-gradient(#f8fafc,#f8fafc) 0 2px/10px 2px no-repeat,
             linear-gradient(#f8fafc,#f8fafc) 0 7px/14px 2px no-repeat,
             linear-gradient(#f8fafc,#f8fafc) 0 12px/8px 2px no-repeat;
}
@media(max-width:980px){
  #layout.layout,
  #layout.layout.sidebar-collapsed{grid-template-columns:1fr}
  #layout .sidebar,
  #layout.layout.sidebar-collapsed .sidebar{
    width:100%;
    min-width:0;
    min-height:auto;
    align-items:stretch;
    border-radius:18px;
    padding:14px;
  }
  #layout.layout.sidebar-collapsed .sidebar-top{display:block}
  #layout.layout.sidebar-collapsed .nav-btn,
  #layout .nav-btn{
    width:100%;
    height:48px;
    min-height:48px;
    flex-direction:row;
    justify-content:flex-start;
    text-align:left;
    font-size:15px;
  }
  #layout.layout.sidebar-collapsed .nav-text{white-space:nowrap;max-height:none}
  #layout .collapse-btn,
  #layout.layout.sidebar-collapsed .collapse-btn{
    width:50px;
    height:44px;
    margin:8px 0 0 auto;
    border-radius:12px;
  }
}

/* Fixed professional table tracks */
#page-receipts .data-table.cols-5,
#page-vendor-payments .data-table.cols-5{
  display:block;
  min-width:0;
  width:100%;
  table-layout:auto;
}
#page-receipts .data-table.cols-5 thead,
#page-receipts .data-table.cols-5 tbody,
#page-vendor-payments .data-table.cols-5 thead,
#page-vendor-payments .data-table.cols-5 tbody{
  display:block;
  width:100%;
}
#page-receipts .data-table.cols-5 tr,
#page-vendor-payments .data-table.cols-5 tr{
  display:grid;
  grid-template-columns:130px minmax(420px,720px) 145px 150px 122px;
  justify-content:start;
  width:100%;
}
#page-vendor-payments .data-table.cols-5 tr{
  grid-template-columns:130px minmax(420px,720px) 145px 150px 170px;
}
#page-receipts .data-table.cols-5 th,
#page-receipts .data-table.cols-5 td,
#page-vendor-payments .data-table.cols-5 th,
#page-vendor-payments .data-table.cols-5 td{
  width:auto!important;
  min-width:0;
}
#page-receipts .data-table.cols-5 td:nth-child(2) strong,
#page-receipts .data-table.cols-5 td:nth-child(2) .muted,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) strong,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) .muted{
  max-width:680px;
}
#page-receipts .data-table.cols-5 td:nth-child(3),
#page-receipts .data-table.cols-5 th:nth-child(3),
#page-vendor-payments .data-table.cols-5 td:nth-child(3),
#page-vendor-payments .data-table.cols-5 th:nth-child(3){
  text-align:right;
}
#page-reports .report-table-card .data-table.cols-4{
  display:block;
  min-width:0;
  width:100%;
  table-layout:auto;
}
#page-reports .report-table-card .data-table.cols-4 thead,
#page-reports .report-table-card .data-table.cols-4 tbody{
  display:block;
  width:100%;
}
#page-reports .report-table-card .data-table.cols-4 tr{
  display:grid;
  grid-template-columns:minmax(360px,720px) 180px 180px 90px;
  justify-content:start;
  width:100%;
}
#page-reports .report-table-card .data-table.cols-4 th,
#page-reports .report-table-card .data-table.cols-4 td{
  width:auto!important;
  min-width:0;
}
#page-reports .report-table-card .data-table.cols-4 td:first-child{
  white-space:normal;
  overflow-wrap:break-word;
  max-width:680px;
}
#page-reports .report-table-card .data-table.cols-4 td:nth-child(3),
#page-reports .report-table-card .data-table.cols-4 th:nth-child(3),
#page-reports .report-table-card .data-table.cols-4 td:nth-child(4),
#page-reports .report-table-card .data-table.cols-4 th:nth-child(4){
  text-align:right;
}
#page-vendor-payments .data-table.cols-6{
  display:block;
  min-width:0;
  width:100%;
  table-layout:auto;
}
#page-vendor-payments .data-table.cols-6 thead,
#page-vendor-payments .data-table.cols-6 tbody{
  display:block;
  width:100%;
}
#page-vendor-payments .data-table.cols-6 tr{
  display:grid;
  grid-template-columns:130px minmax(360px,650px) 140px 145px 160px 118px;
  justify-content:start;
  width:100%;
}
#page-vendor-payments .data-table.cols-6 th,
#page-vendor-payments .data-table.cols-6 td{
  width:auto!important;
  min-width:0;
}
#page-vendor-payments .data-table.cols-6 td:nth-child(2) strong,
#page-vendor-payments .data-table.cols-6 td:nth-child(2) .muted{
  max-width:620px;
  white-space:normal;
  overflow:hidden;
  overflow-wrap:anywhere;
}
#page-vendor-payments .data-table.cols-6 td:nth-child(2) .muted{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-clamp:2;
}
#page-vendor-payments .data-table.cols-6 td:nth-child(3),
#page-vendor-payments .data-table.cols-6 th:nth-child(3){
  text-align:right;
}
#page-vendor-payments .data-table.cols-6 td.center.no-print{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:normal;
}
#page-vendor-payments .data-table.cols-6 td.center.no-print .ghost-btn,
#page-vendor-payments .data-table.cols-6 td.center.no-print .primary-btn,
#page-vendor-payments .data-table.cols-6 td.center.no-print .secondary-btn{
  min-width:52px;
  height:30px;
  margin:0;
  padding:0 8px;
}
@media(max-width:1280px){
  #page-receipts .data-table.cols-5 tr{
    grid-template-columns:118px minmax(300px,1fr) 132px 128px 116px;
  }
  #page-vendor-payments .data-table.cols-5 tr{
    grid-template-columns:118px minmax(300px,1fr) 132px 128px 150px;
  }
  #page-reports .report-table-card .data-table.cols-4 tr{
    grid-template-columns:minmax(280px,1fr) 150px 150px 80px;
  }
  #page-vendor-payments .data-table.cols-6 tr{
    grid-template-columns:118px minmax(280px,1fr) 126px 124px 140px 110px;
  }
}

/* Icon-only theme control */
.theme-toggle{
  width:42px;
  min-width:42px;
  padding:0;
  display:inline-grid;
  place-items:center;
}
.theme-toggle svg{
  width:19px;
  height:19px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Responsive layout hardening */
.main-panel,
.page,
.card,
.side-card,
.dashboard-main,
.dashboard-side,
.dashboard-chart-card,
.dashboard-activity,
.analytics-grid,
.report-table-card{
  min-width:0;
}
.table-wrap{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-gutter:stable;
}
.data-table{
  width:100%;
}
.data-table th,
.data-table td{
  line-height:1.35;
}
.data-table td strong,
.data-table td .muted{
  min-width:0;
}
#page-summary .table-wrap{
  overflow-x:auto;
}
#page-summary .data-table{
  min-width:1540px;
  width:100%;
  table-layout:fixed;
}
#page-summary .data-table th:nth-child(1),
#page-summary .data-table td:nth-child(1){width:120px}
#page-summary .data-table th:nth-child(2),
#page-summary .data-table td:nth-child(2){width:140px}
#page-summary .data-table th:nth-child(3),
#page-summary .data-table td:nth-child(3){width:auto;min-width:320px}
#page-summary .data-table th:nth-child(4),
#page-summary .data-table td:nth-child(4){width:180px}
#page-summary .data-table th:nth-child(n+5),
#page-summary .data-table td:nth-child(n+5){width:170px;text-align:right}
#page-receipts .table-wrap,
#page-vendor-payments .card .table-wrap,
#page-reports .report-table-card .table-wrap{
  overflow-x:auto;
}
#page-receipts .data-table.cols-5,
#page-vendor-payments .data-table.cols-5,
#page-vendor-payments .data-table.cols-6,
#page-reports .report-table-card .data-table.cols-4{
  width:100%;
  min-width:0;
}
#page-receipts .data-table.cols-5 tr,
#page-vendor-payments .data-table.cols-5 tr{
  grid-template-columns:minmax(108px,.12fr) minmax(360px,1fr) minmax(128px,.15fr) minmax(130px,.16fr) minmax(112px,.12fr);
  justify-content:stretch;
}
#page-vendor-payments .data-table.cols-5 tr{
  grid-template-columns:minmax(108px,.12fr) minmax(360px,1fr) minmax(128px,.15fr) minmax(130px,.16fr) minmax(150px,.18fr);
}
#page-vendor-payments .data-table.cols-6 tr{
  grid-template-columns:minmax(108px,.11fr) minmax(340px,1fr) minmax(126px,.14fr) minmax(128px,.14fr) minmax(140px,.16fr) minmax(112px,.12fr);
  justify-content:stretch;
}
#page-reports .report-table-card .data-table.cols-4 tr{
  grid-template-columns:minmax(280px,1fr) minmax(150px,.2fr) minmax(150px,.2fr) minmax(80px,.1fr);
  justify-content:stretch;
}
#page-receipts .data-table.cols-5 td:nth-child(2) strong,
#page-receipts .data-table.cols-5 td:nth-child(2) .muted,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) strong,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) .muted,
#page-vendor-payments .data-table.cols-6 td:nth-child(2) strong,
#page-vendor-payments .data-table.cols-6 td:nth-child(2) .muted,
#page-reports .report-table-card .data-table.cols-4 td:first-child{
  max-width:none;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
#page-receipts .data-table.cols-5 td:nth-child(2) .muted,
#page-vendor-payments .data-table.cols-5 td:nth-child(2) .muted,
#page-vendor-payments .data-table.cols-6 td:nth-child(2) .muted{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-clamp:2;
}
#page-receipts .data-table.cols-5 td:nth-child(3),
#page-receipts .data-table.cols-5 th:nth-child(3),
#page-vendor-payments .data-table.cols-5 td:nth-child(3),
#page-vendor-payments .data-table.cols-5 th:nth-child(3),
#page-vendor-payments .data-table.cols-6 td:nth-child(3),
#page-vendor-payments .data-table.cols-6 th:nth-child(3),
#page-reports .report-table-card .data-table.cols-4 td:nth-child(3),
#page-reports .report-table-card .data-table.cols-4 th:nth-child(3),
#page-reports .report-table-card .data-table.cols-4 td:nth-child(4),
#page-reports .report-table-card .data-table.cols-4 th:nth-child(4){
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.dashboard-content-grid,
.analytics-grid{
  align-items:stretch;
}
.dashboard-card-head,
.side-card-head{
  min-width:0;
  flex-wrap:wrap;
}
.dashboard-legend{
  min-width:0;
}
.monthly-bars,
.report-bars,
.mini-bars{
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
}
.monthly-bars{
  min-height:280px;
  padding:18px 18px 44px;
  align-items:stretch;
}
.monthly-bar-group{
  min-width:74px;
  flex:1 0 74px;
}
.monthly-bar-group span,
.report-bar-set small{
  max-width:86px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.report-bars{
  min-height:270px;
  padding:18px 12px 42px;
}
.report-bar-set{
  min-width:84px;
  flex:1 0 84px;
}
.ring-meter,
.split-meter{
  flex:0 0 auto;
  overflow:hidden;
}
.ring-meter>div,
.split-meter>div{
  max-width:96px;
  min-width:0;
}
.ring-meter strong,
.split-meter strong{
  display:block;
  max-width:96px;
  font-size:16px;
  line-height:1.08;
  text-align:center;
  overflow-wrap:anywhere;
}
.ring-meter small,
.split-meter small{
  display:block;
  max-width:96px;
  line-height:1.15;
  text-align:center;
  overflow-wrap:normal;
}
.side-metrics,
.side-list-row,
.activity-row{
  min-width:0;
}
.side-metrics strong,
.side-list-row strong,
.activity-row strong{
  min-width:0;
}
@media(max-width:1440px){
  .dashboard-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:1280px){
  #page-receipts .data-table.cols-5,
  #page-vendor-payments .data-table.cols-5{min-width:900px}
  #page-vendor-payments .data-table.cols-6{min-width:1040px}
  #page-reports .report-table-card .data-table.cols-4{min-width:760px}
  #page-receipts .data-table.cols-5 tr,
  #page-vendor-payments .data-table.cols-5 tr{
    grid-template-columns:118px minmax(300px,1fr) 132px 128px 118px;
  }
  #page-vendor-payments .data-table.cols-5 tr{
    grid-template-columns:118px minmax(300px,1fr) 132px 128px 150px;
  }
  #page-vendor-payments .data-table.cols-6 tr{
    grid-template-columns:118px minmax(300px,1fr) 126px 124px 140px 112px;
  }
}
@media(max-width:980px){
  .dashboard-side,
  .analytics-grid{
    grid-template-columns:1fr;
  }
  .kpi-grid,
  .dashboard-kpi-grid,
  .four-grid{
    grid-template-columns:1fr;
  }
  .card,
  .side-card,
  .dashboard-main{
    padding:16px;
  }
}

/* Screenshot-driven dashboard corrections */
.dashboard-shell{
  grid-template-columns:minmax(0,1fr) minmax(340px,360px);
  overflow:hidden;
}
.dashboard-side{
  grid-template-columns:1fr!important;
  align-content:start;
  min-width:0;
  max-width:100%;
}
.dashboard-side .side-card{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.dashboard-side .side-amount{
  max-width:100%;
  font-size:28px;
  line-height:1.12;
  white-space:normal;
  overflow-wrap:anywhere;
}
.cash-flow-card{
  justify-items:stretch;
}
.cash-flow-card .side-card-head{
  width:100%;
}
.cash-flow-card .ring-meter{
  width:168px;
  height:168px;
  margin:8px auto 10px;
}
.cash-flow-card .ring-meter::after{
  inset:34px;
}
.side-metrics{
  grid-template-columns:1fr 1fr;
}
.side-metrics strong{
  font-size:12px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.dashboard-side .side-list-row{
  grid-template-columns:40px minmax(0,1fr);
  row-gap:4px;
}
.dashboard-side .side-list-row em{
  grid-column:2;
  justify-self:end;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:right;
}
.quick-actions button{
  min-height:42px;
  white-space:normal;
  line-height:1.2;
}
#page-receipts .data-table,
#page-vendor-payments .data-table,
#page-summary .data-table{
  font-size:13px;
}
#page-receipts .data-table th,
#page-receipts .data-table td,
#page-vendor-payments .data-table th,
#page-vendor-payments .data-table td,
#page-summary .data-table th,
#page-summary .data-table td{
  padding-top:15px;
  padding-bottom:15px;
}
#page-receipts .data-table tbody tr,
#page-vendor-payments .data-table tbody tr{
  min-height:68px;
}
@media(max-width:1500px){
  .dashboard-shell{
    grid-template-columns:1fr;
  }
  .dashboard-side{
    position:static;
    grid-template-columns:repeat(2,minmax(280px,1fr))!important;
  }
}
@media(max-width:980px){
  .dashboard-side{
    grid-template-columns:1fr!important;
  }
}

/* Long table scroll areas */
#page-summary .table-wrap,
#page-receipts .table-wrap,
#page-vendor-payments .card .table-wrap,
#page-reports .report-table-card .table-wrap,
#sheet-table{
  max-height:calc(100vh - 320px);
  min-height:320px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}
#page-summary .data-table th,
#page-receipts .data-table th,
#page-vendor-payments .data-table th,
#page-reports .report-table-card .data-table th,
#sheet-table .data-table th{
  position:sticky;
  top:0;
  z-index:3;
}
#page-summary .table-wrap::-webkit-scrollbar,
#page-receipts .table-wrap::-webkit-scrollbar,
#page-vendor-payments .card .table-wrap::-webkit-scrollbar,
#page-reports .report-table-card .table-wrap::-webkit-scrollbar,
#sheet-table::-webkit-scrollbar{
  width:12px;
  height:12px;
}
#page-summary .table-wrap::-webkit-scrollbar-track,
#page-receipts .table-wrap::-webkit-scrollbar-track,
#page-vendor-payments .card .table-wrap::-webkit-scrollbar-track,
#page-reports .report-table-card .table-wrap::-webkit-scrollbar-track,
#sheet-table::-webkit-scrollbar-track{
  background:rgba(15,23,42,.55);
  border-radius:999px;
}
#page-summary .table-wrap::-webkit-scrollbar-thumb,
#page-receipts .table-wrap::-webkit-scrollbar-thumb,
#page-vendor-payments .card .table-wrap::-webkit-scrollbar-thumb,
#page-reports .report-table-card .table-wrap::-webkit-scrollbar-thumb,
#sheet-table::-webkit-scrollbar-thumb{
  background:rgba(96,165,250,.55);
  border:3px solid rgba(15,23,42,.55);
  border-radius:999px;
}
[data-theme="light"] #page-summary .table-wrap::-webkit-scrollbar-track,
[data-theme="light"] #page-receipts .table-wrap::-webkit-scrollbar-track,
[data-theme="light"] #page-vendor-payments .card .table-wrap::-webkit-scrollbar-track,
[data-theme="light"] #page-reports .report-table-card .table-wrap::-webkit-scrollbar-track,
[data-theme="light"] #sheet-table::-webkit-scrollbar-track{
  background:#e2e8f0;
}
[data-theme="light"] #page-summary .table-wrap::-webkit-scrollbar-thumb,
[data-theme="light"] #page-receipts .table-wrap::-webkit-scrollbar-thumb,
[data-theme="light"] #page-vendor-payments .card .table-wrap::-webkit-scrollbar-thumb,
[data-theme="light"] #page-reports .report-table-card .table-wrap::-webkit-scrollbar-thumb,
[data-theme="light"] #sheet-table::-webkit-scrollbar-thumb{
  background:#93c5fd;
  border-color:#e2e8f0;
}
@media(max-height:760px){
  #page-summary .table-wrap,
  #page-receipts .table-wrap,
  #page-vendor-payments .card .table-wrap,
  #page-reports .report-table-card .table-wrap,
  #sheet-table{
    max-height:420px;
  }
}

/* Sticky headers for grid-based receipt and payment tables */
#page-receipts .data-table.cols-5 thead,
#page-vendor-payments .data-table.cols-5 thead,
#page-vendor-payments .data-table.cols-6 thead{
  position:sticky;
  top:0;
  z-index:8;
  background:#0f172a;
}
#page-receipts .data-table.cols-5 thead tr,
#page-vendor-payments .data-table.cols-5 thead tr,
#page-vendor-payments .data-table.cols-6 thead tr{
  background:#0f172a;
  box-shadow:0 1px 0 rgba(148,163,184,.18);
}
#page-receipts .data-table.cols-5 thead th,
#page-vendor-payments .data-table.cols-5 thead th,
#page-vendor-payments .data-table.cols-6 thead th{
  position:static;
  background:#0f172a;
}
[data-theme="light"] #page-receipts .data-table.cols-5 thead,
[data-theme="light"] #page-vendor-payments .data-table.cols-5 thead,
[data-theme="light"] #page-vendor-payments .data-table.cols-6 thead,
[data-theme="light"] #page-receipts .data-table.cols-5 thead tr,
[data-theme="light"] #page-vendor-payments .data-table.cols-5 thead tr,
[data-theme="light"] #page-vendor-payments .data-table.cols-6 thead tr,
[data-theme="light"] #page-receipts .data-table.cols-5 thead th,
[data-theme="light"] #page-vendor-payments .data-table.cols-5 thead th,
[data-theme="light"] #page-vendor-payments .data-table.cols-6 thead th{
  background:#f8fafc;
}

/* 100% zoom data-preservation baseline */
@media(min-width:1200px){
  #page-summary .data-table td:nth-child(3),
  #page-receipts .data-table.cols-5 td:nth-child(2) strong,
  #page-receipts .data-table.cols-5 td:nth-child(2) .muted,
  #page-vendor-payments .data-table.cols-5 td:nth-child(2) strong,
  #page-vendor-payments .data-table.cols-5 td:nth-child(2) .muted,
  #page-vendor-payments .data-table.cols-6 td:nth-child(2) strong,
  #page-vendor-payments .data-table.cols-6 td:nth-child(2) .muted{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  #page-receipts .data-table.cols-5 td:nth-child(2) .muted,
  #page-vendor-payments .data-table.cols-5 td:nth-child(2) .muted,
  #page-vendor-payments .data-table.cols-6 td:nth-child(2) .muted{
    display:block;
    -webkit-line-clamp:unset;
    line-clamp:unset;
    -webkit-box-orient:initial;
  }
  #page-receipts .data-table tbody tr,
  #page-vendor-payments .data-table tbody tr,
  #page-summary .data-table tbody tr{
    height:auto;
    min-height:68px;
  }
  #page-summary .table-wrap,
  #page-receipts .table-wrap,
  #page-vendor-payments .card .table-wrap{
    max-height:calc(100vh - 300px);
  }
}

/* Report chart label and overlap corrections */
#page-reports .analytics-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);
}
#page-reports .report-bars{
  min-height:300px;
  height:300px;
  padding:24px 18px 54px;
  align-items:end;
  overflow-x:auto;
}
#page-reports .report-bar-set{
  min-width:92px;
  flex:1 0 92px;
  justify-content:center;
}
#page-reports .report-bar-set small{
  bottom:-32px;
  max-width:92px;
  font-size:12px;
  line-height:1.2;
}
#page-reports .split-meter{
  width:210px;
  height:210px;
  margin:22px auto 12px;
}
#page-reports .split-meter::after{
  inset:48px;
}
#page-reports .split-meter>div{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  justify-items:center;
  align-content:center;
  max-width:104px;
  text-align:center;
}
#page-reports .split-meter strong{
  max-width:104px;
  font-size:17px;
  line-height:1.05;
}
#page-reports .split-meter small{
  max-width:104px;
  font-size:11px;
  line-height:1.15;
}
@media(max-width:980px){
  #page-reports .analytics-grid{
    grid-template-columns:1fr;
  }
}

/* Print full ledger data instead of the visible scroll window */
@media print{
  @page{
    size:A4 landscape;
    margin:10mm;
  }
  html,
  body,
  .app,
  .screen,
  .layout,
  .main-panel,
  .page.active-page{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  #page-summary .table-wrap,
  #page-receipts .table-wrap,
  #page-vendor-payments .card .table-wrap,
  #page-reports .report-table-card .table-wrap,
  #sheet-table{
    max-height:none!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    scrollbar-gutter:auto!important;
  }
  #page-summary .data-table,
  #page-receipts .data-table,
  #page-vendor-payments .data-table,
  #page-reports .data-table,
  #sheet-table .data-table{
    min-width:0!important;
    width:100%!important;
    table-layout:fixed!important;
    font-size:9px!important;
    page-break-inside:auto;
  }
  #page-summary .data-table thead,
  #page-receipts .data-table thead,
  #page-vendor-payments .data-table thead{
    display:table-header-group;
  }
  #page-summary .data-table tbody,
  #page-receipts .data-table tbody,
  #page-vendor-payments .data-table tbody{
    display:table-row-group;
  }
  #page-summary .data-table tr,
  #page-receipts .data-table tr,
  #page-vendor-payments .data-table tr{
    display:table-row!important;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  #page-summary .data-table th,
  #page-summary .data-table td,
  #page-receipts .data-table th,
  #page-receipts .data-table td,
  #page-vendor-payments .data-table th,
  #page-vendor-payments .data-table td,
  #page-reports .data-table th,
  #page-reports .data-table td{
    display:table-cell!important;
    position:static!important;
    width:auto!important;
    padding:6px 7px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
    color:#0f172a!important;
    background:#fff!important;
  }
  #page-summary .data-table thead{
    display:table-header-group!important;
  }
  #page-summary .data-table th{
    font-size:8px!important;
    color:#475569!important;
    border-bottom:1px solid #cbd5e1!important;
  }
  #page-summary .data-table td:nth-child(1){width:9%!important}
  #page-summary .data-table td:nth-child(2){width:10%!important}
  #page-summary .data-table td:nth-child(3){width:24%!important}
  #page-summary .data-table td:nth-child(4){width:12%!important}
  #page-summary .data-table td:nth-child(n+5){width:9%!important;text-align:right!important}
  #page-summary .card,
  #page-summary .table-wrap{
    box-shadow:none!important;
    border:1px solid #e2e8f0!important;
  }
}

/* Google authentication entry */
.google-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.google-mark{
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:#fff;
  color:#2563eb;
  font-weight:900;
  font-size:14px;
}
.email-btn{
  width:100%;
  margin-top:14px;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 4px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}