/* Fixed dark "executive" theme — replaces the old prefers-color-scheme light/dark toggle
     entirely per explicit user request (2026-08-31): this dashboard now always renders as a
     single deep-slate + neon cyan/emerald palette, matching the client's design brief. */
  .viz-root {
    color-scheme: dark;
    --surface-1:#111827; --surface-2:#0F172A; --page:#0B0F17; --border:#1E293B;
    --ink-1:#E5E9F0; --ink-2:#94A3B8; --ink-3:#7C8AA0;
    --grid:#1E293B; --axis:#334155; --ring:rgba(34,211,238,.14);
    --cyan-1:#00F2FE; --cyan-2:#00B4DB;
    /* Categorical fallbacks (only used if an unexpected extra stage value ever appears) */
    --s1:#22D3EE; --s2:#FB923C; --s3:#34D399; --s4:#FBBF24; --s5:#F472B6; --s6:#4ADE80;
    --s7:#A78BFA; --s8:#FB7185;
    /* Stage RAG colors — re-hued for the neon-dark brief. NOTE: variable names predate this
       reskin and no longer literally match their color (e.g. --rag-amber is now cyan, not
       amber) — the semantics (grey=not started, colored=active, green=done, red=cancelled)
       are unchanged, only the hues moved to fit the cyan/emerald/amber/violet accent set. */
    --rag-grey:#64748B; --rag-orange:#F59E0B; --rag-amber:#22D3EE; --rag-amber2:#A78BFA;
    --rag-green:#34D399; --rag-red:#FB7185; --rag-new:#38BDF8;
    --seq450:#22D3EE;
    /* Severity is a SEPARATE color axis from the stage RAG colors above (same as before this
       reskin) — kept as its own var set so "Medium"/"Low" never collide with whatever hue a
       stage happens to use (--rag-amber was repurposed to cyan for "In Progress" above, which
       previously collided with --s1/cyan already used for "Low" severity). */
    --sev-critical:#FB7185; --sev-high:#F59E0B; --sev-medium:#A78BFA; --sev-low:#22D3EE; --sev-unspec:#64748B;
  }
  * { box-sizing: border-box; margin: 0; }
  body.viz-root {
    position: relative;
    background: var(--page); color: var(--ink-1);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    padding: 24px; font-size: 14px; padding-bottom: 56px;
  }
  /* Branded hero wallpaper — sits behind the header and top row of cards, fading into the
     solid --page color so it reads as a banner rather than a page-long tiled/stretched image. */
  .hero-bg {
    /* Confined to the header row (below this, the KPI tiles start — now that .card is
       transparent, the wallpaper would otherwise show straight through the tiles and collide
       with the image's own logo watermark). Fades out fully before the tiles begin. */
    position: absolute; top: 0; left: 0; right: 0; height: 78px; z-index: -1; pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(11,15,23,0) 0%, rgba(11,15,23,0) 40%, var(--page) 100%),
      url('/web/content/10886');
    background-size: 100% 100%, cover;
    background-position: top, top center;
    background-repeat: no-repeat, no-repeat;
  }
  header.top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:4px; }
  h1 { font-size: 20px; font-weight: 650; letter-spacing:-.01em; }
  .live-badge { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2);
    padding:5px 12px 5px 10px; border:1px solid var(--border); border-radius:999px; background:transparent; }
  .live-badge b { color:var(--ink-1); font-weight:600; }
  .live-dot { width:8px; height:8px; border-radius:50%; background:var(--rag-green);
    box-shadow:0 0 8px var(--rag-green); animation:live-pulse 2s ease-in-out infinite; flex:0 0 auto; }
  @keyframes live-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(.75);} }
  .btn-group { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
  .icon-btn { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:500;
    padding:7px 16px; border-radius:8px; cursor:pointer; background:transparent; color:var(--ink-1);
    border:1px solid var(--border); transition:border-color .15s,color .15s,box-shadow .15s; }
  .icon-btn svg { flex:0 0 auto; }
  .icon-btn:hover { border-color:var(--cyan-1); color:var(--cyan-1);
    box-shadow:0 0 0 1px rgba(34,211,238,.25), 0 0 16px rgba(34,211,238,.18); }
  .icon-btn:disabled { opacity:.55; cursor:default; }
  .date-filter { position:relative; }
  .date-panel[hidden] { display:none; }
  .date-panel { position:absolute; top:calc(100% + 8px); right:0; width:288px; background:var(--surface-1);
    border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:0 16px 40px rgba(0,0,0,.55); z-index:60; }
  .date-panel-title { font-size:11.5px; color:var(--ink-3); margin-bottom:10px; }
  .date-panel .presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
  .date-panel .presets button { font:inherit; font-size:12px; padding:5px 10px; border-radius:999px; cursor:pointer;
    background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); }
  .date-panel .presets button:hover { border-color:var(--cyan-1); color:var(--cyan-1); }
  .date-panel .custom-row { display:flex; gap:8px; margin-bottom:12px; }
  .date-panel label { font-size:11px; color:var(--ink-3); display:flex; flex-direction:column; gap:4px; flex:1; }
  .date-panel input[type="date"] { background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
    color:var(--ink-1); font:inherit; font-size:12.5px; padding:5px 7px; color-scheme:dark; width:100%; }
  .date-panel .actions { display:flex; gap:8px; justify-content:flex-end; }
  .date-panel .actions button { font:inherit; font-size:12px; font-weight:600; padding:6px 14px; border-radius:7px;
    cursor:pointer; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-1); }
  .date-panel .actions button.primary { background:var(--cyan-2); border-color:var(--cyan-2); color:#00131A; }
  .date-panel .actions button:hover { border-color:var(--cyan-1); }
  .team-checklist { display:flex; flex-direction:column; gap:7px; max-height:220px; overflow-y:auto; margin-bottom:12px; }
  /* flex-direction is explicit here to override `.date-panel label`'s column direction (same
     specificity, and this panel reuses the .date-panel class) — without it the checkbox stacks
     above its team name instead of sitting beside it. */
  .team-checklist label { display:flex; flex-direction:row; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); cursor:pointer; }
  .team-checklist label:hover { color:var(--ink-1); }
  .team-checklist input[type="checkbox"] { accent-color:var(--cyan-2); width:14px; height:14px; cursor:pointer; flex:0 0 auto; }
  #state { padding:48px 0; text-align:center; color:var(--ink-2); font-size:15px; }
  #state.err { color: var(--rag-red); }
  .grid { display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); margin-top:16px; }
  .card { background: transparent; border:1px solid var(--border); border-radius:12px; padding:16px 18px; min-width:0;
    box-shadow: 0 0 0 1px rgba(34,211,238,.05), 0 10px 30px -14px rgba(0,0,0,.7); }
  .card h2 { font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:10px; }
  #detail-view { margin-top:16px; }
  .detail-header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
  .detail-header h2 { font-size:15px; font-weight:650; color:var(--ink-1); margin:0; }
  .detail-count { color:var(--ink-2); font-size:12.5px; }
  .tiles { grid-column: span 12; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
  /* Tiles are clickable — drill into the matching ticket list (see #detail-view). */
  .tile { cursor:pointer; transition:border-color .15s,box-shadow .15s; }
  .tile:hover { border-color:var(--cyan-1); box-shadow:0 0 0 1px rgba(34,211,238,.25), 0 0 16px rgba(34,211,238,.18); }
  .tile:focus-visible { outline:2px solid var(--cyan-1); outline-offset:2px; }
  .tile .lbl { font-size:12.5px; color:var(--ink-2); }
  .tile .val { font-size:34px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums; }
  .tile .sub { font-size:12px; color:var(--ink-3); margin-top:2px; }
  .tile .delta { font-size:11.5px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:3px; }
  .tile .delta.up { color:var(--rag-green); } .tile .delta.down { color:var(--rag-red); } .tile .delta.flat { color:var(--ink-3); }
  .span6 { grid-column: span 6; } .span12 { grid-column: span 12; }
  @media (max-width: 900px){ .span6{ grid-column: span 12; } }
  svg text { font-family: inherit; }
  .legend { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px; font-size:12.5px; color:var(--ink-2); align-items:center; }
  .legend .key { display:inline-flex; align-items:center; gap:6px; }
  .sw { width:12px; height:12px; border-radius:3px; display:inline-block; }
  .lk { width:14px; height:2px; display:inline-block; }
  #tooltip { position:fixed; pointer-events:none; z-index:10; display:none;
    background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,.5); padding:8px 11px; font-size:12.5px; max-width:340px; }
  #tooltip .t-title { color:var(--ink-3); font-size:11.5px; margin-bottom:3px; }
  #tooltip .row { display:flex; align-items:center; gap:7px; margin-top:2px; }
  #tooltip .row b { font-size:13px; }
  #tooltip .row span { color:var(--ink-2); }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { text-align:left; color:var(--ink-3); font-weight:600; font-size:12px; padding:6px 8px; border-bottom:1px solid var(--grid); }
  td { padding:6px 8px; border-bottom:1px solid var(--grid); vertical-align:top; }
  td.num, th.num { font-variant-numeric: tabular-nums; }
  .pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px; border:1px solid var(--border); color:var(--ink-2); white-space:nowrap; }
  .filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  .filters button { font:inherit; font-size:12.5px; padding:4px 12px; border-radius:999px; cursor:pointer;
    background:transparent; color:var(--ink-2); border:1px solid var(--border); }
  .filters button[aria-pressed="true"] { background:var(--cyan-2); color:#00131A; border-color:var(--cyan-2); font-weight:600; }
  .src { grid-column: span 12; color:var(--ink-3); font-size:12px; }
  /* Bottom real-time activity ticker */
  .ticker { position:fixed; left:0; right:0; bottom:0; height:36px; background:var(--surface-2);
    border-top:1px solid var(--border); overflow:hidden; z-index:50; display:flex; align-items:center; }
  .ticker-label { flex:0 0 auto; height:100%; display:flex; align-items:center; gap:6px; padding:0 14px;
    font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
    border-right:1px solid var(--border); background:var(--page); }
  .ticker-label .live-dot { width:6px; height:6px; }
  .ticker-viewport { flex:1 1 auto; overflow:hidden; height:100%; display:flex; align-items:center; }
  .ticker-track { display:flex; align-items:center; gap:36px; white-space:nowrap; padding-left:24px;
    animation:ticker-scroll 38s linear infinite; }
  .ticker-item { font-size:12px; color:var(--ink-2); display:inline-flex; align-items:center; gap:7px; }
  .ticker-item .dot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
  .ticker-item b { color:var(--ink-1); font-weight:600; }
  @keyframes ticker-scroll { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }