/* =====================================================================
   TASIWA HUB — Design System & Theme Engine  (v2.0)
   ---------------------------------------------------------------------
   Tokens are prefixed --c-* and are the single source of truth.
   Modes  : html[data-mode="light"|"dark"]
   Accents: html[data-accent="red"|"blue"|"green"|"custom"]  (custom sets --c-accent inline)
   Legacy variables used by older pages (--primary, --bg, --surface, --tw-*, --sb-* …)
   are re-pointed to these tokens so every module follows the theme.
   ===================================================================== */

/* ---------- 1. Base tokens (light) ---------- */
:root{
  --c-font: 'Aptos','Segoe UI',Calibri,'Helvetica Neue',Arial,sans-serif;
  --c-font-display: 'Aptos Display','Aptos','Segoe UI',Calibri,'Helvetica Neue',Arial,sans-serif;
  --c-radius: 12px; --c-radius-sm: 8px; --c-radius-lg: 18px;
  --c-ease: cubic-bezier(.2,.7,.2,1);

  --c-bg: #f4f6fb;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-surface-3: #eef2f7;
  --c-border: #e4e8ef;
  --c-border-strong: #cfd6e1;
  --c-text: #0f1b2d;
  --c-text-2: #3b475a;
  --c-muted: #6b7689;
  --c-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --c-shadow: 0 6px 18px -6px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
  --c-shadow-lg: 0 24px 48px -12px rgba(16,24,40,.22);
  --c-overlay: rgba(15,23,42,.45);
  --c-input-bg: #ffffff;
  --c-focus: 0 0 0 3px var(--c-accent-ring);

  /* semantic tints (badges / alerts) */
  --c-tint-red:#fef2f2;    --c-on-red:#b42318;    --c-bd-red:#fecdca;
  --c-tint-green:#ecfdf3;  --c-on-green:#067647;  --c-bd-green:#abefc6;
  --c-tint-amber:#fffaeb;  --c-on-amber:#b54708;  --c-bd-amber:#fedf89;
  --c-tint-blue:#eff6ff;   --c-on-blue:#1d4ed8;   --c-bd-blue:#bfdbfe;
  --c-tint-violet:#f5f3ff; --c-on-violet:#6d28d9;
  --c-tint-pink:#fdf2f8;   --c-on-pink:#be185d;
  --c-tint-cyan:#ecfeff;   --c-on-cyan:#0e7490;
  --c-tint-teal:#f0fdfa;   --c-on-teal:#0f766e;

  /* sidebar */
  --c-sb-bg: #ffffff;
  --c-sb-border: #e9edf3;
  --c-sb-text: #3b475a;
  --c-sb-muted: #98a2b3;
  --c-sb-hover: #f3f5f9;

  /* chart palette (overridden per accent) */
  --c-chart-1: var(--c-accent); --c-chart-2:#2563eb; --c-chart-3:#16a34a; --c-chart-4:#f59e0b; --c-chart-5:#7c3aed; --c-chart-6:#0891b2;
}

/* ---------- 2. Accents ---------- */
:root, html[data-accent="red"]{
  --c-accent:#c0392b; --c-accent-hover:#a5281b; --c-accent-strong:#8e1f15;
  --c-accent-soft:rgba(192,57,43,.10); --c-accent-ring:rgba(192,57,43,.22); --c-accent-text:#b42318; --c-on-accent:#ffffff;
  --c-accent-grad: linear-gradient(135deg,#8e1f15 0%,#c0392b 55%,#e2533f 100%);
}
html[data-accent="blue"]{
  --c-accent:#1d5fd1; --c-accent-hover:#174ea9; --c-accent-strong:#123d85;
  --c-accent-soft:rgba(29,95,209,.10); --c-accent-ring:rgba(29,95,209,.24); --c-accent-text:#1d4ed8; --c-on-accent:#ffffff;
  --c-accent-grad: linear-gradient(135deg,#0f2f6b 0%,#1d5fd1 55%,#4b8bf5 100%);
  --c-chart-2:#c0392b;
}
html[data-accent="green"]{
  --c-accent:#13824a; --c-accent-hover:#0f6b3d; --c-accent-strong:#0b5230;
  --c-accent-soft:rgba(19,130,74,.10); --c-accent-ring:rgba(19,130,74,.24); --c-accent-text:#067647; --c-on-accent:#ffffff;
  --c-accent-grad: linear-gradient(135deg,#0b4d2c 0%,#13824a 55%,#2fb36b 100%);
  --c-chart-3:#c0392b;
}
/* custom accent: --c-accent / -hover / -soft / -ring / -text / -grad are written inline on <html> */

/* ---------- 3. Dark mode ---------- */
html[data-mode="dark"]{
  color-scheme: dark;
  --c-bg:#0b1120; --c-surface:#121a2b; --c-surface-2:#162036; --c-surface-3:#1c2741;
  --c-border:#25314a; --c-border-strong:#33415f;
  --c-text:#e7ecf4; --c-text-2:#b9c3d3; --c-muted:#8793a8;
  --c-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --c-shadow: 0 8px 22px -8px rgba(0,0,0,.6); --c-shadow-lg: 0 24px 48px -12px rgba(0,0,0,.7);
  --c-overlay: rgba(0,0,0,.6); --c-input-bg:#0f1729;
  --c-tint-red:rgba(240,68,56,.14);    --c-on-red:#fda29b;   --c-bd-red:rgba(240,68,56,.35);
  --c-tint-green:rgba(23,178,106,.14); --c-on-green:#75e0a7; --c-bd-green:rgba(23,178,106,.35);
  --c-tint-amber:rgba(247,144,9,.14);  --c-on-amber:#fec84b; --c-bd-amber:rgba(247,144,9,.35);
  --c-tint-blue:rgba(46,144,250,.15);  --c-on-blue:#84caff;  --c-bd-blue:rgba(46,144,250,.35);
  --c-tint-violet:rgba(139,92,246,.16);--c-on-violet:#c4b5fd;
  --c-tint-pink:rgba(236,72,153,.15);  --c-on-pink:#f9a8d4;
  --c-tint-cyan:rgba(6,182,212,.15);   --c-on-cyan:#67e8f9;
  --c-tint-teal:rgba(20,184,166,.15);  --c-on-teal:#5eead4;
  --c-sb-bg:#0e1626; --c-sb-border:#1e293f; --c-sb-text:#b9c3d3; --c-sb-muted:#6f7c93; --c-sb-hover:#18233a;
  --c-accent-text: color-mix(in srgb, var(--c-accent) 55%, #ffffff);
}
html[data-mode="dark"][data-accent="red"]  { --c-accent:#e04a3a; --c-accent-hover:#ef5d4d; --c-accent-soft:rgba(224,74,58,.16); --c-accent-text:#ff8a7d; }
html[data-mode="dark"][data-accent="blue"] { --c-accent:#3b82f6; --c-accent-hover:#5b97f8; --c-accent-soft:rgba(59,130,246,.16); --c-accent-text:#93c5fd; }
html[data-mode="dark"][data-accent="green"]{ --c-accent:#22a861; --c-accent-hover:#2fc172; --c-accent-soft:rgba(34,168,97,.16); --c-accent-text:#6ee7a5; }

/* ---------- 4. Legacy variable bridge (older pages keep working, now themed) ---------- */
:root, html[data-mode]{
  --primary: var(--c-accent); --primary-dark: var(--c-accent-strong, var(--c-accent-hover)); --primary-light: var(--c-accent-hover);
  --primary-pale: var(--c-accent-soft); --accent: var(--c-accent);
  --bg: var(--c-bg); --surface: var(--c-surface); --border: var(--c-border); --border-color: var(--c-border);
  --text: var(--c-text); --text-muted: var(--c-muted); --text-light: var(--c-muted);
  --success-light: var(--c-tint-green); --warning-light: var(--c-tint-amber); --info-light: var(--c-tint-blue); --danger-light: var(--c-tint-red);
  --shadow-sm: var(--c-shadow-sm); --shadow: var(--c-shadow); --shadow-lg: var(--c-shadow-lg);
  --font-main: var(--c-font); --font-display: var(--c-font-display);
  --input-bg: var(--c-input-bg);
  /* tw-* (Health Insurance & new modules) */
  --tw-ink: var(--c-text); --tw-ink2: var(--c-text-2); --tw-muted: var(--c-muted); --tw-line: var(--c-border); --tw-soft: var(--c-surface-2);
  --tw-red: var(--c-accent); --tw-red2: var(--c-accent-hover); --tw-redpale: var(--c-accent-soft);
  --tw-green: var(--c-on-green); --tw-greenpale: var(--c-tint-green); --tw-amber: var(--c-on-amber); --tw-amberpale: var(--c-tint-amber);
  --tw-blue: var(--c-on-blue); --tw-bluepale: var(--c-tint-blue); --tw-grey: var(--c-muted); --tw-greypale: var(--c-surface-3);
  --tw-violet: var(--c-on-violet); --tw-violetpale: var(--c-tint-violet);
}
.tw{ --tw-ink: var(--c-text); --tw-ink2: var(--c-text-2); --tw-muted: var(--c-muted); --tw-line: var(--c-border); --tw-soft: var(--c-surface-2);
  --tw-red: var(--c-accent); --tw-red2: var(--c-accent-hover); --tw-redpale: var(--c-accent-soft);
  --tw-green: var(--c-on-green); --tw-greenpale: var(--c-tint-green); --tw-amber: var(--c-on-amber); --tw-amberpale: var(--c-tint-amber);
  --tw-blue: var(--c-on-blue); --tw-bluepale: var(--c-tint-blue); --tw-grey: var(--c-muted); --tw-greypale: var(--c-surface-3);
  --tw-violet: var(--c-on-violet); --tw-violetpale: var(--c-tint-violet); }

/* ---------- 5. Base ---------- */
html{ font-size:14px; }
body{ font-family:var(--c-font); font-size:13px; line-height:1.5; background:var(--c-bg) !important; color:var(--c-text); -webkit-font-smoothing:antialiased; }
html.tw-anim body, html.tw-anim .app-sidebar, html.tw-anim .app-topbar, html.tw-anim .card, html.tw-anim .tw-panel{ transition: background-color .25s var(--c-ease), color .25s var(--c-ease), border-color .25s var(--c-ease); }
a{ color:var(--c-accent-text); }
a:hover{ color:var(--c-accent); }
::selection{ background:var(--c-accent-soft); }
h1,h2,h3,h4,h5,h6{ color:var(--c-text); }
code{ color:var(--c-on-pink); }
hr{ border-color:var(--c-border); }
*{ scrollbar-width:thin; scrollbar-color:var(--c-border-strong) transparent; }

/* ---------- 6. App layout ---------- */
.app-sidebar{ position:fixed; inset:0 auto 0 0; width:264px; background:var(--c-sb-bg); border-right:1px solid var(--c-sb-border);
  display:flex; flex-direction:column; z-index:1040; transition:width .22s var(--c-ease), transform .22s var(--c-ease); }
.app-brand{ display:flex; align-items:center; gap:12px; height:64px; padding:0 18px; border-bottom:1px solid var(--c-sb-border); text-decoration:none; flex-shrink:0; }
.app-brand:hover{ text-decoration:none; }
.app-logo{ width:36px; height:36px; border-radius:10px; background:var(--c-accent-grad); display:grid; place-items:center; color:#fff; flex-shrink:0; box-shadow:0 6px 14px -6px var(--c-accent); }
.app-logo svg{ width:20px; height:20px; }
/* TASIWA logo (heart + wordmark) on a white chip so it reads in every theme */
.app-logo-chip{ display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; padding:3px 6px; border:1px solid rgba(0,0,0,.07); box-shadow:0 1px 2px rgba(0,0,0,.06); flex-shrink:0; }
.app-logo-full{ height:42px; width:auto; display:block; }
.app-logo-mini{ display:none; width:38px; height:38px; }
html.sb-collapsed .app-logo-full{ display:none; }
html.sb-collapsed .app-logo-mini{ display:block; }
html.sb-collapsed .app-logo-chip{ padding:2px; }
.app-brand-name{ font-family:var(--c-font-display); font-weight:700; font-size:13.5px; color:var(--c-text); letter-spacing:.02em; line-height:1.1; }
.app-brand-sub{ font-size:10.5px; color:var(--c-sb-muted); font-weight:500; }
.app-nav{ flex:1; overflow-y:auto; padding:14px 12px; }
.app-nav-sec{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-sb-muted); padding:14px 12px 6px; }
.app-nav-sec:first-child{ padding-top:2px; }
.app-link{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:var(--c-sb-text); font-size:12.5px; font-weight:600;
  text-decoration:none; position:relative; white-space:nowrap; transition:background .15s, color .15s; }
.app-link svg{ width:19px; height:19px; flex-shrink:0; opacity:.75; }
.app-link:hover{ background:var(--c-sb-hover); color:var(--c-text); text-decoration:none; }
.app-link.active{ background:var(--c-accent-soft); color:var(--c-accent-text); }
.app-link.active svg{ opacity:1; color:var(--c-accent); }
.app-link.active::before{ content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--c-accent); }
.app-link .tag{ margin-left:auto; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; background:var(--c-accent); color:var(--c-on-accent); letter-spacing:.04em; }
.app-sb-foot{ border-top:1px solid var(--c-sb-border); padding:12px; flex-shrink:0; }
.app-user{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; text-decoration:none; color:inherit; }
.app-user:hover{ background:var(--c-sb-hover); text-decoration:none; }
.app-avatar{ width:34px; height:34px; border-radius:50%; background:var(--c-accent-grad); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; flex-shrink:0; }
.app-user-name{ font-size:12.5px; font-weight:700; color:var(--c-text); line-height:1.2; }
.app-user-role{ font-size:10.5px; color:var(--c-sb-muted); text-transform:capitalize; }

html.sb-collapsed .app-sidebar{ width:76px; }
html.sb-collapsed .app-sidebar .lbl, html.sb-collapsed .app-nav-sec, html.sb-collapsed .app-brand-text, html.sb-collapsed .app-user-text, html.sb-collapsed .app-link .tag{ display:none; }
html.sb-collapsed .app-link{ justify-content:center; padding:10px; }
html.sb-collapsed .app-brand{ justify-content:center; padding:0; }
html.sb-collapsed .app-nav-sec + .app-link, html.sb-collapsed .app-nav .divider{ margin-top:10px; }
html.sb-collapsed .app-link:hover::after{ content:attr(data-tip); position:absolute; left:64px; top:50%; transform:translateY(-50%); background:var(--c-text); color:var(--c-bg);
  font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:6px; white-space:nowrap; z-index:2000; box-shadow:var(--c-shadow); }

.main-wrapper{ margin-left:264px !important; min-height:100vh; display:flex; flex-direction:column; transition:margin-left .22s var(--c-ease); background:var(--c-bg); }
html.sb-collapsed .main-wrapper{ margin-left:76px !important; }

.app-topbar{ position:sticky; top:0; z-index:1030; height:64px; display:flex; align-items:center; gap:14px; padding:0 22px;
  background:color-mix(in srgb, var(--c-surface) 86%, transparent); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--c-border); }
.tb-btn{ width:38px; height:38px; border-radius:10px; border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-text-2); display:grid; place-items:center; cursor:pointer; position:relative; flex-shrink:0; transition:background .15s, border-color .15s, color .15s; }
.tb-btn:hover{ background:var(--c-surface-2); color:var(--c-accent); border-color:var(--c-border-strong); }
.tb-btn svg{ width:18px; height:18px; }
.tb-dot{ position:absolute; top:5px; right:5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--c-accent); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; border:2px solid var(--c-surface); }
.tb-crumbs{ display:flex; flex-direction:column; min-width:0; }
.tb-crumbs .path{ font-size:11px; color:var(--c-muted); display:flex; gap:6px; align-items:center; white-space:nowrap; overflow:hidden; }
.tb-crumbs .path a{ color:var(--c-muted); text-decoration:none; }
.tb-crumbs .path a:hover{ color:var(--c-accent); }
.tb-crumbs .ttl{ font-family:var(--c-font-display); font-weight:700; font-size:14.5px; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; }
.tb-search{ margin-left:auto; position:relative; width:min(420px, 34vw); }
.tb-search input{ width:100%; height:40px; border-radius:10px; border:1px solid var(--c-border); background:var(--c-surface-2); color:var(--c-text); padding:0 74px 0 38px; font-size:12.5px; outline:none; transition:border-color .15s, box-shadow .15s, background .15s; }
.tb-search input:focus{ border-color:var(--c-accent); box-shadow:var(--c-focus); background:var(--c-surface); }
.tb-search > svg{ position:absolute; left:12px; top:11px; width:17px; height:17px; color:var(--c-muted); }
.tb-search kbd{ position:absolute; right:10px; top:9px; font-size:10.5px; font-family:var(--c-font); background:var(--c-surface); border:1px solid var(--c-border); border-bottom-width:2px; border-radius:6px; padding:2px 6px; color:var(--c-muted); }
.tb-actions{ display:flex; gap:8px; align-items:center; }
.tb-pop{ position:absolute; top:calc(100% + 8px); right:0; min-width:300px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:14px; box-shadow:var(--c-shadow-lg); z-index:1100; display:none; overflow:hidden; animation:twPop .16s var(--c-ease); }
.tb-pop.open{ display:block; }
@keyframes twPop{ from{ opacity:0; transform:translateY(-6px) scale(.98);} to{ opacity:1; transform:none;} }
.tb-pop-h{ padding:12px 14px; border-bottom:1px solid var(--c-border); font-weight:700; font-size:12.5px; display:flex; justify-content:space-between; align-items:center; color:var(--c-text); }
.tb-pop-h small{ font-weight:600; color:var(--c-muted); }
.tb-item{ display:flex; gap:11px; align-items:flex-start; padding:10px 14px; text-decoration:none; color:var(--c-text); font-size:12.5px; border-bottom:1px solid var(--c-border); }
.tb-item:last-child{ border-bottom:0; }
.tb-item:hover, .tb-item.kb{ background:var(--c-surface-2); color:var(--c-text); text-decoration:none; }
.tb-item .ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; background:var(--c-accent-soft); color:var(--c-accent); }
.tb-item .ic svg{ width:16px; height:16px; }
.tb-item b{ display:block; font-weight:700; line-height:1.3; }
.tb-item span{ color:var(--c-muted); font-size:11.5px; }
.tb-group{ padding:8px 14px 4px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); background:var(--c-surface-2); }
.tb-empty{ padding:22px 14px; text-align:center; color:var(--c-muted); font-size:12.5px; }
.tb-search .tb-pop{ left:0; right:0; max-height:70vh; overflow-y:auto; }
.tb-userbtn{ display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px; border-radius:999px; border:1px solid var(--c-border); background:var(--c-surface); cursor:pointer; color:var(--c-text); }
.tb-userbtn:hover{ border-color:var(--c-border-strong); }
.tb-userbtn .app-avatar{ width:30px; height:30px; font-size:11px; }
.tb-userbtn strong{ font-size:12px; display:block; line-height:1.2; text-align:left; }
.tb-userbtn small{ font-size:10.5px; color:var(--c-muted); text-transform:capitalize; display:block; text-align:left; }

/* theme switcher */
.th-sec{ padding:12px 14px; border-bottom:1px solid var(--c-border); }
.th-sec:last-child{ border-bottom:0; }
.th-lbl{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); margin-bottom:9px; }
.th-modes{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.th-mode{ border:1px solid var(--c-border); background:var(--c-surface-2); color:var(--c-text-2); border-radius:9px; padding:8px 4px; font-size:11.5px; font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; }
.th-mode svg{ width:17px; height:17px; }
.th-mode.on{ border-color:var(--c-accent); color:var(--c-accent-text); background:var(--c-accent-soft); }
.th-accents{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.th-sw{ width:30px; height:30px; border-radius:50%; border:3px solid var(--c-surface); box-shadow:0 0 0 1px var(--c-border-strong); cursor:pointer; position:relative; }
.th-sw.on{ box-shadow:0 0 0 2px var(--c-text); }
.th-custom{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--c-text-2); font-weight:600; }
.th-custom input[type=color]{ width:34px; height:30px; border:1px solid var(--c-border); border-radius:8px; background:var(--c-surface); padding:2px; cursor:pointer; }

.page-content{ padding:24px 26px 40px !important; flex:1; max-width:1680px; width:100%; }
.app-footer{ padding:14px 26px; color:var(--c-muted); font-size:11.5px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid var(--c-border); }

.app-flash{ display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:12px; margin-bottom:18px; font-size:12.5px; border:1px solid; animation:twPop .2s var(--c-ease); }
.app-flash svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.app-flash.ok{ background:var(--c-tint-green); border-color:var(--c-bd-green); color:var(--c-on-green); }
.app-flash.err{ background:var(--c-tint-red); border-color:var(--c-bd-red); color:var(--c-on-red); }
.app-flash.warn{ background:var(--c-tint-amber); border-color:var(--c-bd-amber); color:var(--c-on-amber); }
.app-flash .x{ margin-left:auto; background:none; border:0; color:inherit; opacity:.6; cursor:pointer; font-size:14px; line-height:1; }

.sb-overlay{ position:fixed; inset:0; background:var(--c-overlay); z-index:1035; display:none; }
@media (max-width: 991px){
  .app-sidebar{ transform:translateX(-100%); width:280px !important; box-shadow:var(--c-shadow-lg); }
  html.sb-mobile-open .app-sidebar{ transform:none; }
  html.sb-mobile-open .sb-overlay{ display:block; }
  html.sb-collapsed .app-sidebar .lbl, html.sb-collapsed .app-nav-sec, html.sb-collapsed .app-brand-text, html.sb-collapsed .app-user-text{ display:initial; }
  html.sb-collapsed .app-logo-full{ display:block; } html.sb-collapsed .app-logo-mini{ display:none; } html.sb-collapsed .app-logo-chip{ padding:3px 6px; }
  .main-wrapper, html.sb-collapsed .main-wrapper{ margin-left:0 !important; }
  .tb-search{ width:auto; flex:1; }
  .tb-search kbd, .tb-userbtn .txt, .tb-crumbs .path{ display:none; }
  .page-content{ padding:16px !important; }
  .app-topbar{ padding:0 14px; gap:8px; }
}
@media (max-width: 600px){ .tb-crumbs{ display:none; } .tb-hide-sm{ display:none !important; } }

/* ---------- 7. Component harmonisation (Bootstrap + legacy tasiwa.css) ---------- */
.card, .modal-content, .dropdown-menu, .list-group-item, .modal-box{ background:var(--c-surface); color:var(--c-text); border-color:var(--c-border); }
.card{ border-radius:var(--c-radius); box-shadow:var(--c-shadow-sm); }
.card-header, .card-footer, .modal-header, .modal-footer{ background:var(--c-surface-2); border-color:var(--c-border); color:var(--c-text); }
.table{ --bs-table-bg: transparent; --bs-table-color: var(--c-text); --bs-table-border-color: var(--c-border); --bs-table-striped-bg: var(--c-surface-2); --bs-table-hover-bg: var(--c-surface-2); --bs-table-hover-color: var(--c-text); --bs-table-striped-color: var(--c-text); color:var(--c-text); }
.table thead th, table thead th{ color:var(--c-muted); }
.form-control, .form-select, input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=month], input[type=time], select, textarea{
  background-color:var(--c-input-bg); color:var(--c-text); border-color:var(--c-border-strong); }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus{ border-color:var(--c-accent) !important; box-shadow:var(--c-focus) !important; outline:none; }
.form-control::placeholder, input::placeholder, textarea::placeholder{ color:var(--c-muted); opacity:.85; }
html[data-mode="dark"] input[type=date]::-webkit-calendar-picker-indicator, html[data-mode="dark"] input[type=month]::-webkit-calendar-picker-indicator{ filter:invert(.85); }
.btn-primary{ --bs-btn-bg:var(--c-accent); --bs-btn-border-color:var(--c-accent); --bs-btn-hover-bg:var(--c-accent-hover); --bs-btn-hover-border-color:var(--c-accent-hover); --bs-btn-active-bg:var(--c-accent-hover); background:var(--c-accent); border-color:var(--c-accent); color:var(--c-on-accent); }
.btn-primary:hover{ background:var(--c-accent-hover); border-color:var(--c-accent-hover); color:var(--c-on-accent); }
.btn-secondary, .btn-light, .btn-outline-secondary{ background:var(--c-surface); color:var(--c-text); border-color:var(--c-border-strong); }
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover{ background:var(--c-surface-2); color:var(--c-text); }
.text-muted{ color:var(--c-muted) !important; }
.text-primary{ color:var(--c-accent-text) !important; }
.bg-white, .bg-light{ background-color:var(--c-surface) !important; }
.border, .border-top, .border-bottom{ border-color:var(--c-border) !important; }
.dropdown-item{ color:var(--c-text); } .dropdown-item:hover{ background:var(--c-surface-2); color:var(--c-text); }
.page-link{ background:var(--c-surface); border-color:var(--c-border); color:var(--c-text); }
.page-item.active .page-link{ background:var(--c-accent); border-color:var(--c-accent); }
.nav-tabs{ border-color:var(--c-border); } .nav-tabs .nav-link{ color:var(--c-text-2); } .nav-tabs .nav-link.active{ background:var(--c-surface); color:var(--c-accent-text); border-color:var(--c-border) var(--c-border) var(--c-surface); }
.alert-success{ background:var(--c-tint-green); color:var(--c-on-green); border-color:var(--c-bd-green); }
.alert-danger{ background:var(--c-tint-red); color:var(--c-on-red); border-color:var(--c-bd-red); }
.alert-warning{ background:var(--c-tint-amber); color:var(--c-on-amber); border-color:var(--c-bd-amber); }
.alert-info{ background:var(--c-tint-blue); color:var(--c-on-blue); border-color:var(--c-bd-blue); }
.modal-backdrop.show{ opacity:1; background:var(--c-overlay); }
.btn-close{ filter:var(--c-btn-close-filter, none); } html[data-mode="dark"] .btn-close{ filter:invert(1); }

/* tw-* panels (new modules) */
.tw-panel, .tw-kpi, .tw-filter, .tw-client, .tw-radio-card, .tw-form fieldset{ background:var(--c-surface); border-color:var(--c-border); }
.tw-panel{ border-radius:var(--c-radius); box-shadow:var(--c-shadow-sm); }
.tw-kpi{ border-radius:var(--c-radius); box-shadow:var(--c-shadow-sm); transition:transform .15s var(--c-ease), box-shadow .15s; }
a.tw-kpi:hover{ transform:translateY(-2px); box-shadow:var(--c-shadow); }
.tw-panel-h, .tw-table th, .tw-table tfoot td, .tw-check, .tw-ins, .tw-pager a{ background:var(--c-surface-2); }
.tw-table td{ border-color:var(--c-border); color:var(--c-text); }
.tw-table tbody tr:hover{ background:var(--c-surface-2); }
.tw-btn-ghost, .tw-pager a{ background:var(--c-surface); color:var(--c-text); border-color:var(--c-border); }
.tw-btn-ghost:hover{ background:var(--c-surface-2); color:var(--c-text); }
.tw-btn-red{ background:var(--c-accent); color:var(--c-on-accent); }
.tw-btn-dark{ background:var(--c-text); color:var(--c-bg); } .tw-btn-dark:hover{ color:var(--c-bg); }
.tw-btn-danger{ background:var(--c-surface); color:var(--c-on-red); border-color:var(--c-bd-red); }
.tw-form input, .tw-form select, .tw-form textarea, .tw-filter input, .tw-filter select{ background:var(--c-input-bg) !important; color:var(--c-text) !important; border-color:var(--c-border-strong) !important; }
.tw-alert.info{ background:var(--c-tint-blue); border-color:var(--c-bd-blue); color:var(--c-on-blue); }
.tw-alert.warn{ background:var(--c-tint-amber); border-color:var(--c-bd-amber); color:var(--c-on-amber); }
.tw-alert.err{ background:var(--c-tint-red); border-color:var(--c-bd-red); color:var(--c-on-red); }
.tw-alert.ok{ background:var(--c-tint-green); border-color:var(--c-bd-green); color:var(--c-on-green); }
.tw-code{ background:var(--c-surface-3); color:var(--c-text-2); }
.tw-fstep .trk, .tw-bar-t{ background:var(--c-surface-3); }

/* ---------- 8. Shared UI kit for new pages (bi-*) ---------- */
.bi-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.bi-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent-text); margin-bottom:4px; }
.bi-title{ font-family:var(--c-font-display); font-size:19px; font-weight:700; margin:0; color:var(--c-text); letter-spacing:-.01em; }
.bi-sub{ color:var(--c-muted); font-size:12.5px; margin:4px 0 0; }
.bi-card{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--c-radius); box-shadow:var(--c-shadow-sm); }
.bi-card-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px 0; }
.bi-card-h h3{ font-size:13px; font-weight:700; margin:0; color:var(--c-text); }
.bi-card-h small{ color:var(--c-muted); font-size:11.5px; }
.bi-card-b{ padding:14px 16px 16px; }
.bi-grid{ display:grid; gap:16px; }
.bi-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:16px; }
.bi-kpi{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--c-radius); padding:15px 16px; box-shadow:var(--c-shadow-sm); position:relative; overflow:hidden; }
.bi-kpi::after{ content:''; position:absolute; right:-18px; top:-18px; width:70px; height:70px; border-radius:50%; background:var(--k, var(--c-accent)); opacity:.08; }
.bi-kpi .l{ font-size:11px; font-weight:700; color:var(--c-muted); text-transform:uppercase; letter-spacing:.06em; }
.bi-kpi .v{ font-family:var(--c-font-display); font-size:22px; font-weight:700; color:var(--c-text); margin-top:4px; line-height:1.1; font-variant-numeric:tabular-nums; }
.bi-kpi .d{ font-size:11.5px; margin-top:6px; color:var(--c-muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.bi-delta{ font-weight:700; padding:1px 7px; border-radius:999px; font-size:11px; }
.bi-delta.up{ background:var(--c-tint-green); color:var(--c-on-green); } .bi-delta.down{ background:var(--c-tint-red); color:var(--c-on-red); } .bi-delta.flat{ background:var(--c-surface-3); color:var(--c-muted); }
.bi-filter{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--c-radius); padding:12px 14px; margin-bottom:16px; box-shadow:var(--c-shadow-sm); }
.bi-filter .f{ display:flex; flex-direction:column; gap:4px; min-width:140px; flex:1; }
.bi-filter label{ font-size:10.5px; font-weight:700; color:var(--c-muted); text-transform:uppercase; letter-spacing:.06em; }
.bi-filter input, .bi-filter select{ height:38px; border:1px solid var(--c-border-strong); border-radius:9px; padding:0 10px; font-size:12.5px; background:var(--c-input-bg); color:var(--c-text); }
.bi-btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:9px; font-size:12.5px; font-weight:700; border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s, transform .1s; }
.bi-btn:active{ transform:translateY(1px); }
.bi-btn svg{ width:16px; height:16px; }
.bi-btn.pri{ background:var(--c-accent); color:var(--c-on-accent); } .bi-btn.pri:hover{ background:var(--c-accent-hover); color:var(--c-on-accent); }
.bi-btn.ghost{ background:var(--c-surface); color:var(--c-text); border-color:var(--c-border); } .bi-btn.ghost:hover{ background:var(--c-surface-2); color:var(--c-text); }
.bi-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--c-accent-soft); color:var(--c-accent-text); font-size:11.5px; font-weight:700; text-decoration:none; }
.bi-chip a{ color:inherit; text-decoration:none; opacity:.7; }
.bi-tabs{ display:flex; gap:4px; background:var(--c-surface-3); padding:4px; border-radius:11px; width:max-content; max-width:100%; overflow-x:auto; margin-bottom:16px; }
.bi-tab{ padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--c-text-2); text-decoration:none; white-space:nowrap; }
.bi-tab:hover{ color:var(--c-text); text-decoration:none; }
.bi-tab.on{ background:var(--c-surface); color:var(--c-accent-text); box-shadow:var(--c-shadow-sm); }
.bi-chart{ position:relative; height:280px; }
.bi-chart.sm{ height:220px; } .bi-chart.lg{ height:330px; }
.bi-note{ font-size:11.5px; color:var(--c-muted); display:flex; gap:6px; align-items:center; }
.bi-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.bi-table th{ text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-muted); padding:9px 10px; border-bottom:1px solid var(--c-border); background:var(--c-surface-2); }
.bi-table td{ padding:9px 10px; border-bottom:1px solid var(--c-border); color:var(--c-text); }
.bi-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.bi-skel{ background:linear-gradient(90deg,var(--c-surface-3) 25%,var(--c-surface-2) 37%,var(--c-surface-3) 63%); background-size:400% 100%; animation:biSk 1.2s ease infinite; border-radius:8px; }
@keyframes biSk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* insight cards */
.ins{ display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--c-border); }
.ins:last-child{ border-bottom:0; }
.ins-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.ins-ic svg{ width:18px; height:18px; }
.ins.sev-critical .ins-ic{ background:var(--c-tint-red); color:var(--c-on-red); }
.ins.sev-warning .ins-ic{ background:var(--c-tint-amber); color:var(--c-on-amber); }
.ins.sev-positive .ins-ic{ background:var(--c-tint-green); color:var(--c-on-green); }
.ins.sev-info .ins-ic{ background:var(--c-tint-blue); color:var(--c-on-blue); }
.ins h4{ font-size:13px; font-weight:700; margin:0 0 3px; color:var(--c-text); }
.ins p{ font-size:12.5px; color:var(--c-text-2); margin:0; line-height:1.55; }
.ins .meta{ font-size:11px; color:var(--c-muted); margin-top:6px; display:flex; gap:10px; flex-wrap:wrap; }
.ins .meta a{ font-weight:700; }

/* ---------- 9. Motion & accessibility ---------- */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

/* ---------- 10. Print ---------- */
@media print{
  .app-sidebar, .app-topbar, .app-footer, .sb-overlay, .bi-filter, .no-print{ display:none !important; }
  .main-wrapper{ margin:0 !important; } body{ background:#fff !important; }
}
.bi-card-h h3 svg, .tw-panel-h h3 svg{ width:16px; height:16px; vertical-align:-3px; margin-right:4px; color:var(--c-accent); }

/* ---------- 11. Solid brand tones (for legacy headers / buttons that sit behind white text) ---------- */
:root{ --c-navy:#1a2744; --c-solid-green:#1a7a4a; --c-solid-blue:#1a4f8a; --c-solid-teal:#0d6e6e; --c-solid-amber:#c2780a; --c-solid-red:#b91c1c; --c-solid-violet:#6d28d9; --c-solid-pink:#9d174d; --c-solid-cyan:#0e7490; }
html[data-mode="dark"]{ --c-navy:#22304d; --c-solid-green:#1f8f57; --c-solid-blue:#2f6fb8; --c-solid-teal:#14837f; --c-solid-amber:#c98512; --c-solid-red:#d23b3b; --c-solid-violet:#7c4ddb; --c-solid-pink:#c0336f; --c-solid-cyan:#1592b0; }

/* ---------- v2.2 Classic typography: Aptos Display (headings) + Aptos (body), small sizes ----------
   Aptos ships with Microsoft 365 / Windows 11. It is not bundled here (licence);
   computers without it fall back to Segoe UI / Calibri / Arial, which have similar metrics. */
body, button, input, select, textarea, .btn, .form-control, .form-select, table{ font-family:var(--c-font); }
h1,h2,h3,h4,h5,h6,.tw-title,.bi-title,.tb-crumbs .ttl,.app-brand-name,.cw-heading h1{ font-family:var(--c-font-display); font-weight:600; letter-spacing:0; }
h1,.h1{ font-size:19px; } h2,.h2{ font-size:17px; } h3,.h3{ font-size:15px; } h4,.h4{ font-size:14px; } h5,.h5,h6,.h6{ font-size:13px; }
.table, table{ font-size:12.5px; }
.form-control, .form-select, input, select, textarea{ font-size:13px; }
.btn{ font-size:12.5px; }
small, .small{ font-size:11.5px; }