/* Ontario CourtBuddy — Mission Control dashboard (v1.20.0 material)
 *
 * FUTURISTIC HUD aesthetic, delivered entirely through theme CSS variables.
 * HARD RULE: no hardcoded colors in this file — every color, glow and
 * gradient stop resolves through var(--...). Per-theme indirection vars
 * (--hud-*) are defined below: neutral themes (light/peach/notebook) keep
 * them subtle (glows = none → clean/minimal), vivid themes
 * (professional/forest/cyberpunk/terminal/highvis/cybergeek/matrix/sunset)
 * dial them up to glowing HUD values.
 */
/* ---------- variable indirection: neutral defaults (clean/minimal) ---------- */
:root{
  --hud-accent: var(--accent);
  --hud-accent2: var(--accent2);
  --hud-good: var(--good);
  --hud-warn: var(--warn-ink);
  --hud-bad: var(--danger);
  --hud-dim: var(--muted);
  --hud-card-glow: none;
  --hud-num-glow: none;
  --hud-bar-glow: none;
  --hud-ring-track: var(--card2);
  --hud-chip-bg: var(--card2);
  --hud-scan: none;
}
/* ---------- vivid themes: turn the HUD glow up (still no literal colors) ---------- */
[data-theme="professional"]{
  --hud-card-glow: 0 0 34px color-mix(in srgb, var(--accent) 16%, transparent);
  --hud-num-glow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
  --hud-bar-glow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
[data-theme="forest"]{
  --hud-card-glow: 0 0 30px color-mix(in srgb, var(--accent) 15%, transparent);
  --hud-num-glow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
  --hud-bar-glow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-theme="cyberpunk"]{
  --hud-card-glow: 0 0 38px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 90px color-mix(in srgb, var(--accent2) 10%, transparent);
  --hud-num-glow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent);
  --hud-bar-glow: 0 0 12px color-mix(in srgb, var(--accent) 75%, transparent);
}
[data-theme="terminal"]{
  --hud-card-glow: 0 0 26px color-mix(in srgb, var(--accent) 20%, transparent);
  --hud-num-glow: 0 0 12px color-mix(in srgb, var(--accent) 65%, transparent);
  --hud-bar-glow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
[data-theme="highvis"]{
  --hud-card-glow: 0 0 30px color-mix(in srgb, var(--accent) 22%, transparent);
  --hud-num-glow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  --hud-bar-glow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent);
}
[data-theme="cybergeek"]{
  --hud-card-glow: 0 0 36px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 80px color-mix(in srgb, var(--accent2) 9%, transparent);
  --hud-num-glow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent);
  --hud-bar-glow: 0 0 12px color-mix(in srgb, var(--accent) 75%, transparent);
}
[data-theme="matrix"]{
  --hud-card-glow: 0 0 28px color-mix(in srgb, var(--accent) 22%, transparent);
  --hud-num-glow: 0 0 14px color-mix(in srgb, var(--accent) 75%, transparent);
  --hud-bar-glow: 0 0 10px color-mix(in srgb, var(--accent) 75%, transparent);
  --hud-scan: repeating-linear-gradient(0deg, transparent 0, transparent 3px, color-mix(in srgb, var(--accent) 5%, transparent) 3px, color-mix(in srgb, var(--accent) 5%, transparent) 4px);
}
[data-theme="sunset"]{
  --hud-card-glow: 0 0 34px color-mix(in srgb, var(--accent) 18%, transparent);
  --hud-num-glow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  --hud-bar-glow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* ---------- layout ---------- */
.hud-wrap{position:relative}
.hud-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 14px}
.hud-head h2{margin:6px 0 2px;font-size:24px;letter-spacing:.01em}
.hud-eyebrow{font-size:11px;letter-spacing:.22em;color:var(--hud-accent);font-weight:800}
.hud-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hud-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.hud-seg button{border:0;background:transparent;padding:8px 14px;font-size:12px;font-weight:700;color:var(--muted);border-radius:0}
.hud-seg button.on{background:linear-gradient(135deg,var(--hud-accent),var(--hud-accent2));color:var(--on-accent)}
.hud-seg button:hover{transform:none}
.hud-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:900px){.hud-grid{grid-template-columns:minmax(0,1fr)}}
/* ---------- section cards ---------- */
.hud-card{position:relative;background:linear-gradient(145deg,var(--panel),var(--card2));border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--hud-card-glow);overflow:hidden;min-width:0}
.hud-card::before{content:"";position:absolute;top:0;left:18px;right:18px;height:2px;background:linear-gradient(90deg,transparent,var(--hud-accent),transparent);opacity:.65;box-shadow:var(--hud-bar-glow)}
.hud-card::after{content:"";position:absolute;inset:0;background:var(--hud-scan);pointer-events:none}
.hud-card.wide{grid-column:1/-1}
.hud-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hud-sec-head h3{margin:0;font-size:15px;letter-spacing:.04em;flex:1;min-width:0}
.hud-sec-ico{font-size:18px}
.hud-sec-ctl{display:flex;gap:4px}
.hud-sec-ctl button{padding:5px 9px;font-size:12px;border-radius:8px;line-height:1}
.hud-sec-ctl button:hover{transform:none}
.hud-card.collapsed .hud-sec-body{display:none}
/* ---------- stats ---------- */
.hud-bignum{font-size:34px;font-weight:800;color:var(--hud-accent);text-shadow:var(--hud-num-glow);line-height:1.1}
.hud-bignum small{font-size:14px;color:var(--hud-dim);font-weight:600;text-shadow:none}
.hud-statrow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;margin:8px 0}
.hud-stat b{display:block;font-size:22px;color:var(--text)}
.hud-stat span{font-size:11px;color:var(--hud-dim);letter-spacing:.05em;text-transform:uppercase}
.hud-kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.hud-kv:last-child{border-bottom:0}
.hud-kv .k{color:var(--hud-dim)}
.hud-kv .v{font-weight:700;text-align:right}
.hud-nodata{border:1px dashed var(--line2);border-radius:12px;padding:14px;text-align:center;color:var(--hud-dim);font-size:13px;margin:8px 0}
.hud-nodata a{font-weight:700}
.hud-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:999px;border:1px solid}
.hud-badge.bad{color:var(--hud-bad);border-color:var(--hud-bad);background:var(--dangerbg)}
.hud-badge.warn{color:var(--hud-warn);border-color:var(--warn-line);background:var(--warn-bg)}
.hud-badge.good{color:var(--hud-good);border-color:var(--hud-good);background:var(--goodbg)}
.hud-badge.info{color:var(--hud-accent);border-color:var(--hud-accent);background:var(--hud-chip-bg)}
/* ---------- rings, bars, stages ---------- */
.hud-ringwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hud-ring .hud-ring-track{fill:none;stroke:var(--hud-ring-track);stroke-width:11}
.hud-ring .hud-ring-val{fill:none;stroke:var(--hud-accent);stroke-width:11;stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px}
.hud-ring .hud-ring-txt{fill:var(--text);font-size:20px;font-weight:800}
.hud-ringcap{font-size:12px;color:var(--hud-dim);max-width:220px;line-height:1.5}
.hud-bar{height:10px;border-radius:99px;background:var(--hud-ring-track);overflow:hidden;margin:8px 0}
.hud-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--hud-accent),var(--hud-accent2));box-shadow:var(--hud-bar-glow);transition:width .5s ease}
.hud-split{display:flex;height:16px;border-radius:99px;overflow:hidden;border:1px solid var(--line);margin:8px 0}
.hud-split i{display:block;height:100%}
.hud-split .sa{background:var(--hud-accent);box-shadow:var(--hud-bar-glow)}
.hud-split .sb{background:var(--hud-accent2)}
.hud-stages{display:flex;align-items:flex-start;margin:14px 0 6px}
.hud-stage{flex:1;text-align:center;position:relative;min-width:0}
.hud-stage .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);background:var(--panel);margin:0 auto 6px;position:relative;z-index:1}
.hud-stage.done .dot{background:var(--hud-accent);border-color:var(--hud-accent);box-shadow:var(--hud-bar-glow)}
.hud-stage.now .dot{border-color:var(--hud-accent);box-shadow:var(--hud-bar-glow)}
.hud-stage .lbl{font-size:11px;font-weight:700;letter-spacing:.03em}
.hud-stage .sub{font-size:10px;color:var(--hud-dim)}
.hud-stage::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--line)}
.hud-stage:first-child::before{display:none}
.hud-stage.done::before{background:var(--hud-accent)}
.hud-spark{display:block;margin:6px 0}
/* ---------- deadlines list ---------- */
.hud-dl{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.hud-dl:last-child{border-bottom:0}
.hud-dl .t{font-weight:600}
.hud-dl .d{color:var(--hud-dim);font-size:12px;white-space:nowrap}
.hud-dl.over .t{color:var(--hud-bad)}
.hud-dl button{padding:6px 10px;font-size:12px}
/* ---------- next steps ---------- */
.hud-step{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--panel)}
.hud-step.u0{border-left-color:var(--hud-bad)}
.hud-step.u1{border-left-color:var(--hud-warn)}
.hud-step.u2{border-left-color:var(--hud-accent)}
.hud-step .body{flex:1;min-width:0}
.hud-step .body b{display:block;font-size:13.5px}
.hud-step .body small{color:var(--hud-dim);font-size:12px;line-height:1.45;display:block;margin-top:2px}
.hud-step .due{font-size:11px;color:var(--hud-warn);font-weight:700}
.hud-stepbtns{display:flex;gap:3px;flex:none}
.hud-stepbtns button{padding:5px 8px;font-size:12px;border-radius:8px;line-height:1}
.hud-stepbtns button:hover{transform:none}
.hud-step.done-step{opacity:.6}
.hud-step.done-step .body b{text-decoration:line-through}
.hud-addstep{border:1px dashed var(--line2);border-radius:12px;padding:12px;margin-top:10px}
.hud-addstep .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hud-addstep input,.hud-addstep select{margin:0;flex:1;min-width:140px}
.hud-addstep input[type="date"]{flex:0 1 170px}
.hud-mini{font-size:12px;color:var(--hud-dim);margin:10px 0 4px}
.hud-done-list .hud-step{opacity:.62}
/* ---------- widget (main dashboard) ---------- */
.hud-widget .hud-case-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.hud-widget .hud-case-row:last-child{border-bottom:0}
/* ---------- print: clean ink-friendly one-pager ---------- */
.mission-print{color:#000;font:12px/1.55 system-ui,sans-serif}
.mission-print h1{font-size:19px;margin:0 0 4px;border-bottom:2px solid #000;padding-bottom:6px}
.mission-print h2{font-size:14px;margin:16px 0 6px;border-bottom:1px solid #000;padding-bottom:3px}
.mission-print table{width:100%;border-collapse:collapse;margin:6px 0}
.mission-print th,.mission-print td{border:1px solid #999;padding:4px 8px;font-size:12px;text-align:left;vertical-align:top}
.mission-print .mp-cap{margin:0 0 10px;font-size:12px}
.mission-print .mp-foot{margin-top:14px;border-top:1px solid #999;padding-top:6px;font-size:10.5px;color:#333}
.mission-print ul{margin:6px 0;padding-left:20px}
@media print{
  .mission-print h2{break-after:avoid}
  .mission-print table{break-inside:avoid}
}
@media(max-width:640px){
  .hud-head h2{font-size:20px}
  .hud-bignum{font-size:28px}
  .hud-stepbtns{flex-wrap:wrap}
  .hud-dl{flex-wrap:wrap}
}