/* ============================================================
   Theme — Case Disposal Monitor
   A register, not a dashboard. Light sidebar, warm neutral paper,
   one oxblood accent for authority, sharp corners, tables given
   the most weight on every screen. No gradients.
   ============================================================ */
:root{
  --bg:#f3f2ef;
  --surface:#ffffff;
  --surface-2:#faf9f6;
  --surface-3:#eeece7;
  --line:#e0ddd6;
  --line-strong:#c7c2b8;

  /* Sidebar is LIGHT in this tool — the biggest structural difference */
  --chrome:#fbfaf7;
  --chrome-2:#f4f2ee;
  --chrome-line:#e4e0d8;
  --chrome-text:#5c564b;
  --chrome-text-bright:#241f18;

  --ink:#221d16;
  --ink-2:#4a4438;
  --ink-3:#736c5e;
  --ink-4:#a29a8b;

  --accent:#8a2036;
  --accent-2:#f7e6e9;
  --accent-ink:#6d1729;

  --ok:#14663f;      --ok-bg:#e2f0e8;
  --warn:#96590a;    --warn-bg:#fbf1dc;
  --bad:#a81f2d;     --bad-bg:#fbe7e9;
  --info:#1d5a78;    --info-bg:#e3eff5;
  --vip:#5a3d8f;     --vip-bg:#ece5f7;

  --radius:5px;
  --radius-sm:4px;
  --shadow:0 1px 2px rgba(34,29,22,.05);
  --shadow-lg:0 14px 40px rgba(34,29,22,.16);
  --sidebar-w:252px;
}

body{background:var(--bg);font-size:14px}

/* ---------------- Icon rail (this tool uses the rail shell) ---------------- */
.rail{background:#fbfaf7}
.rail-crest{background:var(--accent);border-radius:6px}
.rail-nav a{color:var(--ink-3)}
.rail-nav a:hover{background:#f1efe9;color:var(--ink)}
.rail-nav a.on{background:var(--accent-2);color:var(--accent-ink)}
.rail-foot{color:var(--ok)}
.rail-foot .dot{background:var(--ok)}

/* ---------------- Left sidebar (kept for the print/fallback shell) ---------------- */
.sidebar{border-right:1px solid var(--chrome-line)}
.brand{border-bottom:1px solid var(--chrome-line);min-height:62px}
.brand .crest{background:var(--accent);border-radius:4px;color:#fff;
  width:34px;height:34px;flex:0 0 34px;font-size:12.5px}
.brand .bt b{color:var(--ink);font-size:14.5px;font-weight:680}
.brand .bt span{color:var(--ink-4);font-size:10.5px;letter-spacing:.1em}

.navgrp{color:var(--ink-4);font-size:10px;padding:14px 18px 5px}
.nav a{padding:8px 18px;font-size:14px;color:var(--ink-2);border-left:3px solid transparent}
.nav a:hover{background:#f1efe9;color:var(--ink)}
.nav a.on{background:var(--accent-2);color:var(--accent-ink);border-left-color:var(--accent);font-weight:670}
.nav a .ic{opacity:.6}
.nav a.on .ic{opacity:1}
.nav a .tail{background:var(--accent);color:#fff;font-weight:700;font-size:10.5px}
.nav a.on .tail{background:var(--accent);color:#fff}

.sidefoot{border-top:1px solid var(--chrome-line);color:var(--ink-4);padding:12px 18px}
.sidefoot .ofl{color:var(--ok)}
.sidefoot .dot{background:var(--ok);box-shadow:0 0 0 3px rgba(20,102,63,.15)}

/* ---------------- Topbar ---------------- */
.topbar{height:62px;border-bottom:2px solid var(--accent);padding:0 24px}
.topbar h1{font-size:19px;font-weight:680;letter-spacing:-.02em}
.topbar .sub{font-size:12.5px}
.tb-user .av{background:var(--accent-2);color:var(--accent-ink);border-radius:4px}
.content{padding:20px 24px 52px}

/* ---------------- Stat cards — plain, boxy, legible ---------------- */
.kpi{border-radius:5px;padding:15px 16px;border:1px solid var(--line);box-shadow:none}
.kpi .lb{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.kpi .lb svg{color:var(--ink-4)}
.kpi .vl{font-size:30px;font-weight:700;letter-spacing:-.03em;margin-top:6px}
.kpi .vl small{font-size:16px}
.kpi .ft{font-size:12px;margin-top:6px}
.kpi.acc-ok{border-left:4px solid var(--ok)}
.kpi.acc-bad{border-left:4px solid var(--bad)}
.kpi.acc-warn{border-left:4px solid var(--warn)}
.kpi.acc-accent{border-left:4px solid var(--accent)}
.kpi.acc-vip{border-left:4px solid var(--vip)}

/* ---------------- Cards ---------------- */
.card{border-radius:5px;box-shadow:none;border-color:var(--line)}
.card-h{padding:13px 16px;background:var(--surface-2)}
.card-h h3{font-size:14.5px;font-weight:680}
.card-b{padding:16px}

/* ---------------- Controls ---------------- */
.btn{border-radius:4px;font-weight:600;padding:7px 14px;font-size:13.5px}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-p{background:var(--accent);border-color:var(--accent)}
.btn-p:hover{background:#6d1729;border-color:#6d1729}
.btn-ok{background:var(--ok);border-color:var(--ok)}
.btn-ok:hover{background:#0f5133;border-color:#0f5133}
.seg{border-radius:4px;background:var(--surface-3);padding:2px}
.seg button{border-radius:3px;padding:6px 13px;font-size:13px}
.seg button.on{background:var(--surface);color:var(--accent);font-weight:680}
.inp,select.inp{border-radius:4px;padding:7px 10px;font-size:13.5px}
.pill{border-radius:3px;padding:2px 8px;font-size:11.5px;font-weight:640}

/* ---------------- Tables get the weight here ---------------- */
.tbl{font-size:13.5px}
.tbl thead th{background:#f1efe9;color:var(--ink-2);font-size:11px;letter-spacing:.06em;
  padding:10px 13px;border-bottom:1.5px solid var(--line-strong)}
.tbl tbody td{padding:11px 13px;border-bottom:1px solid var(--surface-3)}
.tbl tbody tr:hover{background:#faf8f4}
.tbl tbody tr.row-alert{background:#fdf4f5}
.tbl tbody tr.row-alert:hover{background:#fbeced}
.mono{font-family:var(--mono)}

/* ---------------- Action Centre ---------------- */
.al-grp{background:#f1efe9;padding:10px 16px;font-size:11px;letter-spacing:.09em;
  border-bottom:1px solid var(--line)}
.al-grp b{background:var(--surface);color:var(--ink-2);border-radius:3px}
.al{padding:14px 16px;gap:13px;align-items:center;border-left:4px solid transparent}
.al-sev-high{border-left-color:var(--bad)}
.al-sev-med{border-left-color:var(--warn)}
.al-sev-low{border-left-color:var(--info)}
.al-dot{display:none}
.al-t{font-size:14.5px;font-weight:660}
.al-d{font-size:12.5px;margin-top:2px}

/* ---------------- Statutory clock bar ---------------- */
.clock-bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;position:relative}
.clock-bar i{display:block;height:100%;border-radius:3px}
.clock-bar .lim{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink-3)}

.drawer{border-radius:0}
.sec-t{color:var(--ink-4);border-bottom:1px solid var(--line)}
.dl dt{color:var(--ink-3)}


/* ============================================================
   Typography — Case Disposal Monitor
   Georgia for anything that names a case or a court, Corbel for
   the body. Corbel's old-style figures make long columns of
   dates and case numbers noticeably easier to scan.
   ============================================================ */
:root{
  --serif:Georgia,"Times New Roman",Cambria,serif;
  --sans:Corbel,Candara,"Segoe UI",Calibri,sans-serif;
}
body{font-family:var(--sans);font-size:14.5px}
h1,h2,h3,h4,.card-h h3,.masthead .mh-t h1,.masthead .mh-id b,
.drawer-h h3,.al-t,.cl-b .t,.rail-crest{font-family:var(--serif)}
.masthead{min-height:72px;border-bottom:2px solid var(--accent)}
.masthead .mh-t h1{font-size:21px;font-weight:700;letter-spacing:-.014em}
.masthead .mh-id b{font-size:15px;font-weight:700}
.card-h h3{font-size:15.5px;font-weight:700;letter-spacing:-.008em}
.al-t{font-size:15.5px;font-weight:700;letter-spacing:-.008em}
.kpi .lb{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.kpi .vl{font-family:var(--serif);font-size:31px;font-weight:700;letter-spacing:-.02em}
.cl-b .t{font-size:14.5px;font-weight:700}
.cl-no,.mono{font-family:"Cascadia Mono",Consolas,monospace}
.tbl{font-size:14px}
.tbl thead th{font-family:var(--sans);font-size:11px;font-weight:700}
.rail-crest{font-size:15px;font-weight:700}
.rail-nav a{font-size:10.5px;letter-spacing:.01em}