/* RAB Sales & Expenses System — styles (base + SC Mngt theme layer) */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --brand: #0078d4; --brand-dark: #106ebe; --brand-light: #eff6fc;
    --success: #107c10; --success-light: #dff6dd;
    --warn: #8a6d00; --warn-light: #fff4ce;
    --error: #a80000; --error-light: #fde7e9;
    --gray-50: #faf9f8; --gray-100: #f3f2f1; --gray-200: #edebe9;
    --gray-300: #c8c6c4; --gray-400: #a19f9d; --gray-500: #8a8886;
    --gray-600: #605e5c; --gray-700: #484644; --gray-800: #323130;
    --bg: #f3f2f1; --card: #ffffff; --topbar-bg: #ffffff;
    --sidebar-bg: #1f2937; --sidebar-text: #e5e7eb; --sidebar-hover: #374151;
    --border: #edebe9; --sidebar-w: 250px; --modified: #fff4ce; --new-row: #dff6dd;
    --c1:#0078d4; --c2:#107c10; --c3:#d83b01; --c4:#8764b8;
  }
  body.dark {
    --bg: #0f172a; --card: #1e293b;
    --gray-50: #1a2436; --gray-100: #24324a; --gray-200: #334155;
    --gray-300: #475569; --gray-400: #64748b; --gray-500: #94a3b8;
    --gray-600: #cbd5e1; --gray-700: #e2e8f0; --gray-800: #f1f5f9;
    --topbar-bg: #1e293b; --sidebar-bg: #0b1220; --sidebar-hover: #1e293b;
    --border: #334155; --brand-light: #1e3a5f; --modified: #422006; --new-row: #0d2818;
    --success-light:#0d2818; --warn-light:#422006; --error-light:#3b0a0a;
    --c1:#4ba3f0; --c2:#4cc24c; --c3:#ff7a45; --c4:#b39ddb;
  }
  body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--gray-800); height: 100vh; overflow: hidden; }
  a { color: var(--brand); }

  /* LOGIN */
  .login-screen { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; background: var(--bg);
    background-image: radial-gradient(circle at 20% 20%, rgba(0,120,212,0.07), transparent 40%), radial-gradient(circle at 80% 80%, rgba(0,120,212,0.05), transparent 40%); }
  .login-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 410px; max-width: calc(100vw - 32px); box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
  .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .logo { width: 44px; height: 44px; background: var(--brand); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; }
  .login-brand h1 { font-size: 18px; font-weight: 700; }
  .tagline { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
  .login-form { display: flex; flex-direction: column; gap: 14px; }
  .login-error { padding: 10px 14px; border-radius: 6px; background: var(--error-light); color: var(--error); font-size: 13px; display: none; }
  .login-error.visible { display: block; }
  .login-hint { margin-top: 16px; padding: 12px; background: var(--brand-light); border-radius: 6px; font-size: 12px; color: var(--brand); line-height: 1.5; }

  /* SHELL */
  .app-shell { display: none; height: 100vh; }
  .app-shell.visible { display: flex; }
  .sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; flex-shrink: 0; height: 100vh; transition: margin .2s; }
  .sidebar-header { padding: 18px 18px 14px; border-bottom: 1px solid var(--sidebar-hover); }
  .sidebar-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #fff; }
  .sidebar-brand .logo { width: 30px; height: 30px; font-size: 16px; border-radius: 7px; }
  .sidebar-tagline { font-size: 10.5px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
  .user-card { padding: 12px 16px; border-bottom: 1px solid var(--sidebar-hover); display: flex; align-items: center; gap: 10px; }
  .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
  .user-info { flex: 1; min-width: 0; }
  .user-name { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #a78bfa; margin-top: 2px; }
  .logout-btn { background: transparent !important; border: none; color: #9ca3af !important; cursor: pointer; padding: 4px !important; font-size: 14px; }
  .sidebar-nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
  .nav-section-label { font-size: 10.5px; color: #8b95a7; text-transform: uppercase; letter-spacing: 0.7px; padding: 12px 12px 5px; font-weight: 700; }
  .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: #d1d5db; cursor: pointer; transition: all 0.15s; margin-bottom: 1px; user-select: none; }
  .nav-item:hover { background: var(--sidebar-hover); color: #fff; }
  .nav-item.active { background: var(--brand); color: #fff; }
  .nav-item .icon { width: 20px; text-align: center; font-size: 15px; }
  .nav-item .badge { margin-left: auto; background: #d83b01; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 700; }
  .nav-item.hidden { display: none; }
  .sidebar-footer { padding: 10px 16px; border-top: 1px solid var(--sidebar-hover); font-size: 11px; color: #9ca3af; }
  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
  .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 14px; flex-wrap: wrap; }
  .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .topbar-title { font-size: 18px; font-weight: 600; }
  .topbar-sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
  .topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--gray-100); border-radius: 16px; font-size: 12px; color: var(--gray-600); font-weight: 500; cursor: pointer; border: none; }
  .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); }
  .pill.ok { color: var(--success); background: var(--success-light); } .pill.ok .dot { background: var(--success); }
  .pill.warn { color: var(--warn); background: var(--warn-light); } .pill.warn .dot { background: var(--warn); }
  .pill.err { color: var(--error); background: var(--error-light); } .pill.err .dot { background: var(--error); }
  .icon-btn { background: var(--gray-100) !important; border: 1px solid var(--border) !important; color: var(--gray-600) !important; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; padding: 0 !important; }
  .icon-btn:hover { color: var(--brand) !important; border-color: var(--brand) !important; }
  
  .content { flex: 1; overflow-y: auto; padding: 20px 24px 60px; }
  .view { display: none; } .view.active { display: block; animation: fadeIn 0.2s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* CARDS / FORMS */
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
  .card-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .card-desc { font-size: 12px; color: var(--gray-500); margin-bottom: 14px; line-height: 1.5; }
  .grid { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); }
  .span2 { grid-column: span 2; } .spanall { grid-column: 1 / -1; }
  .form-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  label { font-size: 12px; font-weight: 600; color: var(--gray-600); }
  label .hint { font-weight: 400; color: var(--gray-400); font-size: 11px; }
  label .req { color: var(--error); }
  input:not([type]), input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="search"], input[type="time"], select, textarea {
    width: 100%; padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; font-family: inherit; background: var(--card); color: var(--gray-800); transition: border 0.15s, box-shadow 0.15s; }
  body.dark input, body.dark select, body.dark textarea { background: #0f172a; }
  textarea { resize: vertical; min-height: 62px; }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,120,212,0.15); }
  input[readonly], textarea[readonly], .calc { background: var(--gray-50) !important; color: var(--gray-600); }
  input.calc { font-weight: 600; color: var(--brand); }
  input.invalid, select.invalid { border-color: var(--error); box-shadow: 0 0 0 3px rgba(168,0,0,.12); }
  .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--gray-700); padding-top: 18px; cursor: pointer; }
  .chk input { width: 16px; height: 16px; accent-color: var(--brand); }
  button { background: var(--brand); color: #fff; border: none; padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.15s; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  button:hover:not(:disabled) { background: var(--brand-dark); }
  button:disabled { opacity: .5; cursor: not-allowed; }
  button.secondary { background: var(--card); color: var(--brand); border: 1px solid var(--brand); } button.secondary:hover:not(:disabled) { background: var(--brand-light); }
  button.success { background: var(--success); } button.success:hover:not(:disabled) { background: #0b5c0b; }
  button.danger { background: var(--error); } button.danger:hover:not(:disabled) { background: #8a0000; }
  button.ghost { background: transparent; color: var(--gray-600); border: 1px solid var(--gray-300); } button.ghost:hover:not(:disabled) { background: var(--gray-100); }
  button.small { padding: 4px 10px; font-size: 12px; } button.tiny { padding: 2px 7px; font-size: 11px; }
  .btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .btn-row .spacer { flex: 1; }
  .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--gray-100); color: var(--gray-600); white-space: nowrap; }
  .badge.ok { background: var(--success-light); color: var(--success); } .badge.warn { background: var(--warn-light); color: var(--warn); }
  .badge.err { background: var(--error-light); color: var(--error); } .badge.info { background: var(--brand-light); color: var(--brand); }
  .badge.purple { background: #f3e8ff; color: #7c3aed; } body.dark .badge.purple { background: #2e1065; color: #c4b5fd; }
  .status-msg { padding: 9px 13px; border-radius: 6px; font-size: 13px; margin-top: 10px; line-height: 1.5; }
  .status-msg.info { background: var(--brand-light); color: var(--brand); } .status-msg.success { background: var(--success-light); color: var(--success); }
  .status-msg.warn { background: var(--warn-light); color: var(--warn); } .status-msg.error { background: var(--error-light); color: var(--error); }
  .muted { color: var(--gray-500); font-size: 12px; }
  .sec-title { font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .6px; margin: 16px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); grid-column: 1/-1; }
  .sec-title:first-child { margin-top: 0; }

  /* TABLES */
  .tbl-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--card); max-height: 62vh; }
  table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.dt th { background: var(--gray-100); color: var(--gray-700); padding: 8px 10px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--gray-300); white-space: nowrap; cursor: pointer; user-select: none; }
  table.dt th.sorted-asc::after { content: ' ▲'; font-size: 9px; } table.dt th.sorted-desc::after { content: ' ▼'; font-size: 9px; }
  table.dt td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
  table.dt tbody tr { cursor: pointer; } table.dt tbody tr:hover td { background: var(--gray-50); }
  table.dt tr.sel td { background: var(--brand-light) !important; }
  table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
  table.dt tfoot td { font-weight: 700; background: var(--gray-100); position: sticky; bottom: 0; border-top: 1px solid var(--gray-300); }
  table.lines td { padding: 3px 4px; } table.lines td input, table.lines td select { padding: 5px 7px; font-size: 12.5px; border-radius: 4px; }
  table.lines tbody tr { cursor: default; } table.lines td.num input { text-align: right; }
  .neg { color: var(--error); } .pos { color: var(--success); }
  .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
  .toolbar input[type=search] { max-width: 280px; }
  .toolbar select, .toolbar input[type=date] { width: auto; }
  .pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; font-size: 12px; color: var(--gray-500); }

  /* KPI & CHARTS */
  .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
  .kpi { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; position: relative; overflow: hidden; }
  .kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kc, var(--brand)); }
  .kpi .k-label { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
  .kpi .k-val { font-size: 22px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .kpi .k-sub { font-size: 11.5px; color: var(--gray-500); margin-top: 3px; }
  .charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
  .chart svg { width: 100%; height: auto; display: block; }
  .chart .ax { stroke: var(--gray-300); stroke-width: 1; } .chart text { fill: var(--gray-500); font-size: 10px; font-family: inherit; }
  .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--gray-600); margin-top: 6px; }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
  .alert-list { display: flex; flex-direction: column; gap: 6px; }
  .alert-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; background: var(--gray-50); border: 1px solid var(--border); font-size: 13px; cursor: pointer; }
  .alert-item:hover { border-color: var(--brand); }
  .alert-item .n { margin-left: auto; font-weight: 700; }

  /* TABS / MODAL / TOAST */
  .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
  .tab { padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--gray-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-radius: 0; }
  .tab:hover { color: var(--brand); background: none !important; } .tab.active { color: var(--brand); border-bottom-color: var(--brand); }
  .tab-pane { display: none; } .tab-pane.active { display: block; }
  .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.42); display: none; align-items: center; justify-content: center; z-index: 900; padding: 16px; }
  .modal-bg.open { display: flex; }
  .modal { background: var(--card); border-radius: 10px; width: 760px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  .modal.wide { width: 1100px; } .modal.narrow { width: 460px; }
  .modal-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; }
  .modal-body { padding: 18px 20px; overflow-y: auto; }
  .modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
  .x-btn { background: transparent !important; color: var(--gray-500) !important; font-size: 18px; padding: 2px 8px !important; }
  #toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; }
  .toast { padding: 10px 16px; border-radius: 6px; color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.2); background: var(--gray-800); max-width: 380px; animation: fadeIn .2s; }
  body.dark .toast { background: #334155; }
  .toast.success { background: var(--success); } .toast.error { background: var(--error); } .toast.warn { background: #b07d00; }
  .progress { height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; margin-top: 8px; }
  .progress > div { height: 100%; background: var(--brand); width: 0; transition: width .2s; }

  /* RECORD NAV / HEADER STRIP */
  .rec-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--brand-light); border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
  .rec-strip .big { font-size: 16px; font-weight: 700; color: var(--brand); }
  .totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
  .totals .t { background: var(--gray-50); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
  .totals .t > span { display: block; font-size: 10.5px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
  .totals .t b { font-size: 16px; font-variant-numeric: tabular-nums; }
  .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
  .doc-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; cursor: pointer; background: var(--gray-50); }
  .doc-chip.on { border-color: var(--success); background: var(--success-light); color: var(--success); font-weight: 600; }
  .doc-chip input { accent-color: var(--success); }
  .kbd { font-family: Consolas, monospace; font-size: 11px; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 3px; padding: 0 5px; }
  .search-results { max-height: 60vh; overflow: auto; }
  .sr-item { padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; display: flex; gap: 10px; align-items: center; }
  .sr-item:hover, .sr-item.hl { background: var(--brand-light); }
  .empty { text-align: center; padding: 30px; color: var(--gray-500); font-size: 13px; }
  .drill { color: var(--brand); text-decoration: underline; cursor: pointer; }

  @media (max-width: 900px) {
    .grid.two, .grid.three { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
    .content { padding: 14px 12px 60px; } .topbar { padding: 10px 12px; }
    .charts { grid-template-columns: 1fr; }
  }
  @media print { .sidebar, .topbar { display: none !important; } }

/* =====================================================================
   SC Mngt v12 theme layer — same colours, side panel, top bar and
   switchboard as NFPC SC Mngt Support System (accent themes shared).
   ===================================================================== */
:root{--sidebar-w:260px;--acc-1:#12306b;--acc-2:#1d4ed8;--acc-3:#3b82f6;--acc-soft:#eaf0fb;--acc-line:#c9d7f0;--acc-grad:linear-gradient(120deg,var(--acc-1) 0%,var(--acc-2) 55%,var(--acc-3) 100%);--c1:#1d4ed8;--c2:#107c10;--c3:#d83b01;--c4:#8764b8}
html[data-accent=green]{--acc-1:#14532d;--acc-2:#15803d;--acc-3:#34b863;--acc-soft:#e6f5ec;--acc-line:#b8dfc7;--brand:#15803d;--brand-dark:#166534;--brand-light:#ecfdf3;--c1:#15803d}
html[data-accent=gray]{--acc-1:#1f2937;--acc-2:#475569;--acc-3:#8795a8;--acc-soft:#edf0f4;--acc-line:#cdd4de;--brand:#475569;--brand-dark:#334155;--brand-light:#f1f4f8;--c1:#475569}
html[data-accent=red]{--acc-1:#5b0f1b;--acc-2:#9f1d2e;--acc-3:#d6455a;--acc-soft:#fbe9ec;--acc-line:#ecc3c9;--brand:#9f1d2e;--brand-dark:#7f1624;--brand-light:#fdf0f2;--c1:#9f1d2e}
html[data-accent=navy]{--acc-1:#071433;--acc-2:#0f2a66;--acc-3:#1e40af;--acc-soft:#e8edfa;--acc-line:#c2cdea;--brand:#1e3a8a;--brand-dark:#172554;--brand-light:#e9eefb;--c1:#1e40af}
html[data-accent=navy] body.dark{--brand-light:#14234d}html[data-accent=green] body.dark{--brand-light:#12351f}html[data-accent=gray] body.dark{--brand-light:#2a3342}html[data-accent=red] body.dark{--brand-light:#43161d}
body.dark{--acc-soft:#24324a;--acc-line:#3b4b66;--c1:#4ba3f0}
body{transition:background .2s,color .2s}

/* login (same card as SC Mngt) */
.login-card{padding:32px;width:400px}.login-brand{margin-bottom:24px}.login-brand .logo{background:var(--acc-grad)}
.login-form{gap:16px}.login-form .form-group{gap:6px}
.login-form input{padding:11px 14px!important;border-radius:8px!important;font-size:14px!important}
.login-form button[type=submit]{padding:12px 20px;font-size:14px;border-radius:8px;justify-content:center;background:var(--brand)}
.login-ms{margin-top:16px;padding:12px;background:var(--brand-light);border-radius:6px;font-size:12px;color:var(--brand);line-height:1.5}
.login-ms button{margin:8px 0 6px;background:var(--brand-dark);font-size:13px;padding:6px 13px}

/* side panel: theme colour, collapsible groups, mini mode */
html body .sidebar{width:var(--sidebar-w);--sidebar-bg:var(--acc-1);--sidebar-hover:color-mix(in srgb,#fff 12%,var(--acc-1));background:var(--acc-1)!important;color:#fff;transition:width .15s}
html[data-accent] body.dark .sidebar,body.dark .sidebar{background:#0b1220!important}
.sidebar-header{position:relative;padding:20px 20px 16px;border-color:rgba(255,255,255,.3)!important}.sidebar-brand{cursor:pointer;padding-right:32px;margin-bottom:4px}.sidebar-brand .logo{background:var(--acc-grad);width:28px;height:28px;border-radius:6px}
.sidebar-tagline{font-size:11px;color:#fff;opacity:.9}
.sb-toggle{position:absolute;right:8px;top:8px;border:1px solid rgba(255,255,255,.45)!important;background:transparent!important;color:#fff!important;border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:14px;line-height:1;padding:0!important;justify-content:center}.sb-toggle:hover{background:rgba(255,255,255,.14)!important}
html body .sidebar .user-card{border-color:rgba(255,255,255,.3)}html body .sidebar .avatar{background:#fff!important;color:var(--acc-1)!important}
html body .sidebar .user-role{color:#fff!important;opacity:.9}html body .sidebar .user-name{color:#fff}
.user-card .logout-btn{color:#fff!important;border-radius:4px}.user-card .logout-btn:hover{background:rgba(255,255,255,.14)!important}
.nav-tools{display:flex;gap:6px;padding:0 6px 4px}.nav-tools button{flex:1;border:1px solid rgba(255,255,255,.45)!important;background:transparent!important;color:#fff!important;border-radius:6px;font-size:11px;padding:3px 4px!important;font-weight:500;justify-content:center}.nav-tools button:hover{background:rgba(255,255,255,.14)!important}
.nav-group-head{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;border-radius:6px;font-size:16px;color:#fff!important;text-transform:uppercase;letter-spacing:.6px;padding:12px 12px 6px;font-weight:700}.nav-group-head:hover{background:rgba(255,255,255,.05)}
.nav-group-head .caret{display:inline-block;width:14px;transition:transform .15s;font-size:13px}.nav-group.collapsed .caret{transform:rotate(-90deg)}
.nav-group-head .gname{flex:1}.nav-group-head .gcount{font-size:12.5px;background:rgba(255,255,255,.26);border-radius:9px;padding:0 6px;font-weight:600;letter-spacing:0}
.nav-group.collapsed .nav-group-body{display:none}.nav-group.collapsed:has(.nav-item.active) .gname::after{content:' •'}
html body .sidebar .nav-item{color:#fff;font-weight:600;padding:10px 12px;margin-bottom:2px}html body .sidebar .nav-item:hover{background:rgba(255,255,255,.12)}
html body .sidebar .nav-item.active{background:rgba(255,255,255,.24)!important;color:#fff!important;box-shadow:inset 3px 0 0 #fff}
.nav-item .badge{margin-left:auto}.nav-item .badge.new{background:var(--brand);color:#fff;font-size:9px;padding:1px 6px}
html body .sidebar .nav-item .badge.alert{background:#d83b01;color:#fff}
html body .sidebar .sidebar-footer{color:#fff;border-color:rgba(255,255,255,.3)}
body.sb-mini{--sidebar-w:64px}
body.sb-mini .sidebar-brand span,body.sb-mini .sidebar-tagline,body.sb-mini .user-info,body.sb-mini .sidebar-footer,body.sb-mini .nav-tools,body.sb-mini .nav-item>span:not(.icon),body.sb-mini .nav-item .badge,body.sb-mini .nav-group-head .gname,body.sb-mini .nav-group-head .gcount,body.sb-mini .nav-group-head .caret,body.sb-mini #myInfoBtn{display:none!important}
body.sb-mini .sidebar-header{padding:14px 6px 10px;text-align:center}body.sb-mini .sidebar-brand{justify-content:center;padding-right:0}body.sb-mini .sb-toggle{position:static;margin:6px auto 0;display:block}
body.sb-mini .user-card{justify-content:center;padding:10px 4px;flex-direction:column}
body.sb-mini .nav-group-head{padding:0;margin:6px 8px;height:1px;background:rgba(255,255,255,.3);min-height:1px}body.sb-mini .nav-group.collapsed .nav-group-body{display:block}
body.sb-mini .nav-item{justify-content:center;padding:10px 4px!important}

/* top bar in the theme colour */
html body .topbar{background:var(--acc-grad)!important;border-bottom:0!important;color:#fff;box-shadow:0 2px 8px rgba(15,23,42,.18);padding:14px 28px}
html body .topbar .topbar-title{color:#fff!important}html body .topbar .topbar-sub{color:rgba(255,255,255,.85)!important}
.tb-logo{width:38px;height:38px;flex:none;border-radius:9px;background:rgba(255,255,255,.18)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;overflow:hidden}
html body .topbar .icon-btn,html body .topbar .m-menu-btn{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important;box-shadow:none!important}
html body .topbar .icon-btn:hover,html body .topbar .m-menu-btn:hover{background:rgba(255,255,255,.27)!important}
.icon-btn.wide{width:auto!important;padding:0 10px!important;font-size:13px!important;font-weight:600;gap:5px}
.token-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:16px;font-size:12px;font-weight:500;background:rgba(255,255,255,.16);color:#fff;border:0;cursor:pointer}
.token-pill .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6)}
.token-pill.ok{background:rgba(255,255,255,.95);color:#0b7a0b}.token-pill.ok .dot{background:#107c10}
.token-pill.throttled{background:rgba(255,255,255,.95);color:#b45309}.token-pill.throttled .dot{background:#b45309}
.icon-btn.badge-dot{position:relative}.icon-btn.badge-dot::after{content:attr(data-count);position:absolute;top:-4px;right:-4px;background:var(--error);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;display:none;min-width:16px;text-align:center}.icon-btn.badge-dot.has-badge::after{display:block}
.on-home #backBtn,.on-home .tb-logo{display:none!important}

/* cards, tables, fields follow the theme */
.card{border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.06)}
html body table.dt thead th{background:var(--acc-soft)!important;color:var(--gray-700)!important;border-bottom:2px solid var(--acc-line)!important;font-size:11.5px;letter-spacing:.04em}
html body table.dt tbody tr:hover td{background:var(--brand-light)}html body table.dt tfoot td{background:var(--acc-soft)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.kpi::before{background:var(--kc,var(--acc-2))}.rec-strip{background:var(--acc-soft)}.rec-strip .big{color:var(--acc-2)}
body.dark .rec-strip .big{color:#93c5fd}
.modal{border-radius:16px;overflow:hidden;box-shadow:0 26px 70px rgba(15,23,42,.4)}
.modal-head{background:var(--acc-grad);color:#fff;border-bottom:0}.modal-head .x-btn{color:#fff!important}
.badge.role-admin{background:#ede9fe;color:#7c3aed;font-size:10px;padding:1px 6px;margin-left:6px}
.sec-title{color:var(--acc-2)}body.dark .sec-title{color:#93c5fd}
.tab.active{color:var(--acc-2);border-bottom-color:var(--acc-2)}

/* switchboard (main page) — Style A as in SC Mngt */
#view-home{--hm-bg:#f3f5f9;--hm-c:#fff;--hm-t:#16223b;--hm-m:#51607f;--hm-l:#e3e8f2;margin:-20px -24px -60px;min-height:calc(100vh - 60px);background:var(--hm-bg);color:var(--hm-t)}
body.dark #view-home{--hm-bg:#0b1220;--hm-c:#131d33;--hm-t:#e8edf8;--hm-m:#9fb0d3;--hm-l:#243457}
#view-home h1{margin:6px 0 4px;font-size:30px;font-weight:800;color:inherit}
.hm-eye{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.8}
.hm-ban{background:var(--acc-grad);color:#fff;padding:30px 36px 62px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}.hm-ban p{margin:0;opacity:.9;font-size:14px}
.hm-wrap{max-width:1240px;margin:-34px auto 0;padding:0 24px 40px;display:flex;flex-direction:column;gap:18px}
.hm-search{display:flex;align-items:center;gap:8px;background:var(--hm-c);color:var(--hm-t);border-radius:12px;padding:0 14px;height:44px;width:320px;max-width:100%;border:1px solid var(--hm-l)}
.hm-search input{border:0!important;outline:0;flex:1;background:transparent!important;color:inherit!important;font-size:14px;box-shadow:none!important;padding:0!important}
.hm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.hm-kpi{background:var(--hm-c);border-radius:14px;padding:14px 16px;box-shadow:0 4px 16px rgba(20,40,90,.1);display:flex;flex-direction:column;gap:3px;cursor:pointer}.hm-kpi span{font-size:12px;color:var(--hm-m);font-weight:600}.hm-kpi b{font-size:20px;font-variant-numeric:tabular-nums}
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hm-card{background:var(--hm-c);border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(20,40,90,.08);display:flex;flex-direction:column;gap:12px;transition:.15s}.hm-card:hover{box-shadow:0 10px 28px rgba(20,40,90,.16);transform:translateY(-2px)}
.hm-card header{display:flex;align-items:center;gap:10px;cursor:pointer}.hm-card header b{flex:1;font-size:15px}.hm-card header em{font-style:normal;font-size:12px;color:var(--hm-m)}
.hm-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.hm-bars{display:flex;align-items:flex-end;gap:5px}.hm-bars i{flex:1;border-radius:4px 4px 0 0;display:block}
.hm-chips{display:flex;flex-wrap:wrap;gap:6px}.hm-chip{display:inline-flex;gap:6px;align-items:center;background:var(--hm-bg);border:1px solid var(--hm-l);color:var(--hm-t)!important;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer}.hm-chip:hover{border-color:var(--acc-2)}
.hm-note{margin:14px 24px;font-size:12px;color:var(--hm-m)}

/* accent picker (Settings) */
#setAccent{display:flex;gap:10px;flex-wrap:wrap}
#setAccent button{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);color:var(--gray-700);border:2px solid var(--border);border-radius:12px;padding:8px 12px;font-size:12px;box-shadow:none}
#setAccent button i{display:block;width:54px;height:22px;border-radius:7px}
#setAccent button.on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}

/* recent activity drawer */
.activity-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:var(--card);border-left:1px solid var(--border);box-shadow:-4px 0 20px rgba(0,0,0,.15);z-index:950;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.activity-drawer.open{transform:translateX(0)}
.activity-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--acc-grad);color:#fff}.activity-header h3{font-size:15px}
.activity-header .icon-btn{background:rgba(255,255,255,.14)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}
.activity-body{flex:1;overflow-y:auto;padding:10px 16px}.activity-empty{text-align:center;color:var(--gray-500);padding:30px 0;font-size:13px}
.activity-item{padding:9px 4px;border-bottom:1px solid var(--border);font-size:12.5px;display:flex;gap:10px}.activity-item .ai{font-size:16px}.activity-item small{display:block;color:var(--gray-500);margin-top:2px}
.activity-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.activity-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:940;opacity:0;pointer-events:none;transition:opacity .25s}.activity-backdrop.open{opacity:1;pointer-events:auto}

/* phone layout: side panel slides in from the ☰ button (as SC Mngt) */
.m-menu-btn,.m-backdrop{display:none}
@media (max-width:900px){
  html,body{overflow-x:hidden}.app-shell{height:100dvh}
  .sidebar,body.sb-mini .sidebar{position:fixed!important;left:0;top:0;bottom:0;height:100dvh!important;width:min(84vw,310px)!important;z-index:800;transform:translateX(-102%);transition:transform .22s ease;margin-left:0!important;overflow-y:auto}
  body.m-nav-open .sidebar{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.45)}
  body.m-nav-open .m-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:799}
  body.sb-mini .nav-item>span:not(.icon),body.sb-mini .sidebar-brand span,body.sb-mini .sidebar-tagline,body.sb-mini .user-info{display:inline!important}
  .sb-toggle{display:none!important}
  .m-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:10px;border-radius:10px;font-size:20px;flex-shrink:0;padding:0!important;cursor:pointer}
  html body .topbar{padding:8px 12px;gap:8px;flex-wrap:wrap;justify-content:flex-start}
  .topbar-left{flex:1 1 60%;min-width:0}.topbar-sub{display:none!important}.topbar-title{font-size:16px!important}
  .topbar-actions{width:100%;display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .topbar-actions>*{flex-shrink:0}
  #view-home{margin:-14px -12px -60px}.hm-ban{padding:22px 18px 56px}#view-home h1{font-size:23px}.hm-wrap{padding:0 12px 30px}
  .activity-drawer{width:100%}
}
@media print{.activity-drawer,.activity-backdrop{display:none!important}}