/* Bismillah */
/* ═══════════════════════════════════════════════════════════════════════
   CAISi BRANDBOOK — single source of visual truth for every platform page.
   Derived from the Dashboard (index.html), the original design reference.
   Rules: docs/BRANDBOOK.md. Every new page links this file FIRST and adds
   only page-specific styles locally. Do not fork these tokens.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* surfaces (Content pane — Light, per design_handoff_department_hub) */
  --bg-0:#f6f7f9;            /* page canvas */
  --bg-1:#ffffff;            /* cards */
  --header-bg:rgba(255,255,255,0.92);   /* header surface (blurred) */
  --bg-2:#f1f5f9;            /* table heads, insets, neutral chip bg */
  --bg-3:#e9edf2;            /* tab-track bg, strong divider */
  --glass:rgba(0,0,0,0.02);
  --gb:rgba(15,23,42,0.07);  /* default border */
  --divider:#f1f5f9;
  /* brand accents — CAISi cyan is THE accent (unchanged in both themes) */
  --blue:#00aec7;            /* brand cyan (primary accent, links, active) */
  --teal:#0891b2;
  --green:#059669; --amber:#d97706; --red:#ef4444;
  --purple:#8b5cf6; --pink:#ec4899;
  --grad:linear-gradient(135deg,var(--blue),var(--teal));
  --accent-soft:rgba(0,174,199,0.13);
  --accent-border:rgba(0,174,199,0.3);
  --tab-active-bg:#ffffff; --tab-active-text:#0891b2;
  /* text */
  --tp:#0f172a; --ts:#334155; --tm:#94a3b8;
  /* shape & motion */
  --font:'Inter',sans-serif;
  --rsm:8px; --rmd:16px; --rlg:18px;
  --sh:0 1px 2px rgba(15,23,42,0.04);
  --tr:all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* Dark content-pane theme — toggled via body[data-theme="dark"] (Hub only;
   see webui/hub/core.js toggleTheme()). Same token names, so every existing
   component (.card/.badge/table/.tab/…) picks it up with no markup changes. */
body[data-theme="dark"]{
  --bg-0:#0b1120; --bg-1:#111a2c; --header-bg:#0d1424;
  --bg-2:rgba(255,255,255,.05); --bg-3:#0d1424;
  --gb:rgba(255,255,255,.06); --divider:rgba(255,255,255,.05);
  --tp:#f1f5f9; --ts:#94a3b8; --tm:#64748b;
  --tab-active-bg:rgba(34,211,238,.14); --tab-active-text:#67e8f9;
  --sh:none;
  --accent-soft:rgba(34,211,238,.14); --accent-border:rgba(34,211,238,.35);
}
body[data-theme="dark"]::before{display:none}   /* light-mode grid decoration off */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-0);color:var(--tp);font-size:13px;min-height:100vh;transition:background .2s,color .2s}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,174,199,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,174,199,0.03) 1px,transparent 1px);
  background-size:40px 40px}
body>*{position:relative;z-index:1}

/* ── header (topbar) ───────────────────────────────────────────────────── */
header{background:var(--header-bg);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--gb);padding:14px 24px;display:flex;
  align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:50}
header h1{font-size:16px;font-weight:800;display:flex;align-items:center;gap:10px}
header .sub{font-size:11px;color:var(--tm)}
.right{margin-left:auto;display:flex;gap:14px;align-items:center}
a.link{color:var(--blue);text-decoration:none;font-weight:600}

/* ── icon chip / avatars (header, section labels, avatar-anchored rows) ── */
.icon-chip{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);
  color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
body[data-theme="dark"] .icon-chip{color:#67e8f9}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:11.5px;flex-shrink:0;
  background:var(--accent-soft);color:var(--teal)}
.avatar-sm{width:24px;height:24px;font-size:10px}
.theme-toggle{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;
  border:1px solid var(--gb);background:none;font-family:var(--font);font-size:12px;
  font-weight:600;color:var(--ts);cursor:pointer;transition:var(--tr)}
.theme-toggle:hover{border-color:var(--accent-border);color:var(--blue)}
.dept-pill{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;
  gap:8px;padding:8px 30px 8px 14px;border-radius:10px;background:var(--bg-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23334155" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center/12px 12px;
  border:none;font-size:12.5px;font-weight:600;color:var(--ts);cursor:pointer}
.user-chip{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:99px;background:var(--bg-2)}
.user-chip span{font-size:12px;font-weight:600;color:var(--ts)}
/* header-right is a mount point (see webui/shell.js renderHeaderChrome) —
   make it a flex row itself so its injected children (button/.user-chip/button)
   lay out horizontally instead of following normal block flow. */
#header-right{display:flex;align-items:center;gap:14px}

/* ── layout ────────────────────────────────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:20px 24px}

/* ── KPI cards ─────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.card{background:var(--bg-1);border:1px solid var(--gb);border-radius:var(--rmd);
  padding:16px 18px;box-shadow:var(--sh);transition:var(--tr)}
.card .tick{height:3px;width:26px;border-radius:2px;margin-bottom:10px;background:var(--tp)}
.card .v{font-size:25px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.card .l{font-size:10.5px;color:var(--tm);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}

/* ── tabs (segmented-pill track) ──────────────────────────────────────── */
.tabs{display:inline-flex;gap:3px;background:var(--bg-3);padding:4px;border-radius:13px;
  margin-bottom:20px;flex-wrap:wrap;border-bottom:none}
.tab{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;cursor:pointer;
  font-weight:600;color:var(--tm);border-radius:10px;border:none;background:none;
  font-family:var(--font);font-size:12.5px;transition:var(--tr)}
.tab:hover{color:var(--tp)}
.tab.active{color:var(--tab-active-text);background:var(--tab-active-bg);
  box-shadow:0 1px 3px rgba(15,23,42,.1)}
body[data-theme="dark"] .tab.active{box-shadow:none}

/* ── tables (still used for wide/matrix data — monthly grids etc.) ──────── */
table{width:100%;border-collapse:collapse;background:var(--bg-1);
  border:1px solid var(--gb);border-radius:var(--rmd);overflow:hidden}
th{background:var(--bg-2);text-align:left;padding:9px 12px;font-size:10px;
  text-transform:uppercase;letter-spacing:.5px;color:var(--ts)}
td{padding:9px 12px;border-top:1px solid var(--gb);vertical-align:top}

/* ── section-card / row (Staff, Documents, Findings, News, Performance) ── */
.section-card{background:var(--bg-1);border:1px solid var(--gb);border-radius:var(--rmd);
  overflow:hidden;margin-bottom:16px;box-shadow:var(--sh)}
.section-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--divider)}
.section-head .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.section-title{font-size:13px;font-weight:700;color:var(--tp)}
.count-pill{font-size:10.5px;color:var(--tm);background:var(--bg-2);padding:2px 8px;border-radius:99px}
.section-label{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
  color:var(--tp);margin:26px 0 12px}
.section-label:first-child{margin-top:0}
.hub-row{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--divider);
  flex-wrap:wrap;transition:background .15s}
.hub-row:first-child{border-top:none}
.hub-row:hover{background:var(--glass)}
.hub-row .name{font-size:13px;font-weight:600;color:var(--tp)}
.hub-row .sub{font-size:10.5px;color:var(--tm);margin-top:1px}
.hub-row .body2{font-size:12px;color:var(--ts)}
.icon-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--gb);background:none;
  color:var(--tm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr)}
.icon-btn:hover{border-color:var(--accent-border);color:var(--blue)}

/* ── badges (soft dot-chips; brandbook rule unchanged: color = status only) */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:10.5px;font-weight:600;margin:1px;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;display:inline-block}
.b-green{background:rgba(5,150,105,.1);color:#059669}
.b-red{background:rgba(220,38,38,.1);color:#dc2626}
.b-amber{background:rgba(217,119,6,.1);color:#b45309}
.b-gray{background:var(--bg-2);color:var(--ts)}
.b-blue{background:rgba(8,145,178,.1);color:#0891b2}       /* brand cyan tint */
.b-purple{background:rgba(124,58,237,.1);color:#7c3aed}
body[data-theme="dark"] .b-green{background:rgba(52,211,153,.16);color:#34d399}
body[data-theme="dark"] .b-red{background:rgba(248,113,113,.18);color:#f87171}
body[data-theme="dark"] .b-amber{background:rgba(252,211,77,.18);color:#fcd34d}
body[data-theme="dark"] .b-gray{background:rgba(255,255,255,.05);color:#cbd5e1}
body[data-theme="dark"] .b-blue{background:rgba(34,211,238,.16);color:#67e8f9}
body[data-theme="dark"] .b-purple{background:rgba(196,181,253,.2);color:#c4b5fd}

/* ── controls ──────────────────────────────────────────────────────────── */
select,input,textarea{padding:8px 12px;border:1px solid var(--gb);border-radius:var(--rsm);
  background:var(--bg-1);font-family:var(--font);font-size:13px;color:var(--tp)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent-border);
  box-shadow:0 0 0 3px rgba(0,174,199,0.12)}
.btn{padding:8px 14px;border-radius:var(--rsm);border:1px solid var(--gb);background:var(--bg-1);
  cursor:pointer;font-family:var(--font);font-size:12px;font-weight:600;color:var(--tp);
  transition:var(--tr);display:inline-flex;align-items:center;gap:5px}
.btn:hover{border-color:var(--accent-border);color:var(--blue)}
.btn-primary,.btn.btn-primary{background:var(--grad);color:#fff;border:none}
.btn-primary:hover{opacity:.9;color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.btn-sm{padding:4px 10px;border-radius:var(--rsm);border:1px solid var(--gb);background:var(--bg-1);
  cursor:pointer;font-family:var(--font);font-size:11px;font-weight:600;transition:var(--tr)}
.btn-sm.primary{background:var(--grad);color:#fff;border:none}
.btn-sm.danger{background:#fee2e2;color:#991b1b;border:none}

/* ── toolbar & misc ────────────────────────────────────────────────────── */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.muted{color:var(--tm)}
.bar{height:8px;background:var(--bg-3);border-radius:4px;overflow:hidden;min-width:80px}
.bar>div{height:100%;border-radius:4px}
pre.diff{background:var(--bg-2);border-radius:var(--rsm);padding:10px;font-size:10.5px;
  max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.rolebox{display:grid;grid-template-columns:1fr 1fr;gap:4px;border:1px solid var(--gb);
  border-radius:var(--rsm);padding:10px;max-height:180px;overflow-y:auto;background:var(--bg-1)}
.rolebox label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;margin:0;cursor:pointer}

/* ── dialogs ───────────────────────────────────────────────────────────── */
dialog{border:none;border-radius:var(--rmd);padding:24px;width:560px;max-width:92vw;
  max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);
  background:var(--bg-1);color:var(--tp)}
dialog::backdrop{background:rgba(30,41,59,.5)}
dialog h3{margin-bottom:14px;font-size:15px}
dialog label{display:block;font-size:11px;font-weight:600;color:var(--ts);margin:10px 0 4px}
dialog input,dialog select,dialog textarea{width:100%}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* ── login overlay ─────────────────────────────────────────────────────── */
#login-overlay{position:fixed;inset:0;background:rgba(30,41,59,.55);z-index:1000;
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#login-overlay .box{background:var(--bg-1);border-radius:var(--rmd);padding:28px;width:320px;
  display:flex;flex-direction:column;gap:12px}
#login-overlay .go{padding:10px;background:var(--grad);color:#fff;border:none;
  border-radius:var(--rsm);font-weight:600;cursor:pointer;font-family:var(--font);font-size:14px}

/* ── brand identity bits ───────────────────────────────────────────────── */
.brand-logo{background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center}
.year-pill{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);
  border:1px solid var(--accent-border);border-radius:20px;padding:3px 9px;
  font-size:10px;font-weight:600;color:var(--teal)}