/* ============================================================================
   Hyracbox Fleet Console — "control room" design system
   Self-contained (no CDN/fonts) so it stays CSP-clean and works on a droplet.
   Dark-first; light theme via [data-theme="light"].
   ============================================================================ */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* dark tokens */
  --bg:        #070b12;
  --bg-2:      #0a1019;
  --panel:     #0e1520;
  --panel-2:   #121b28;
  --panel-3:   #17222f;
  --line:      #1d2a3a;
  --line-soft: rgba(255,255,255,.06);
  --ink:       #e8f0f9;
  --ink-dim:   #9db0c6;
  --ink-faint: #5f7288;

  --accent:    #29d3ee;   /* phosphor cyan */
  --accent-ink:#062a31;
  --ok:        #2fd6a3;
  --warn:      #ffb454;
  --crit:      #ff5d6c;
  --info:      #5aa2ff;
  --unknown:   #6b7c93;

  --ok-bg:     rgba(47,214,163,.13);
  --warn-bg:   rgba(255,180,84,.14);
  --crit-bg:   rgba(255,93,108,.14);
  --info-bg:   rgba(90,162,255,.14);
  --unknown-bg:rgba(107,124,147,.14);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -12px rgba(0,0,0,.6);
  --ring: 0 0 0 1px var(--line);
  --sidebar-w: 236px;
}

[data-theme="light"] {
  --bg:        #eef2f7;
  --bg-2:      #e7edf4;
  --panel:     #ffffff;
  --panel-2:   #f6f9fc;
  --panel-3:   #eef3f8;
  --line:      #d8e1ec;
  --line-soft: rgba(15,32,55,.08);
  --ink:       #0e1b2b;
  --ink-dim:   #47586c;
  --ink-faint: #7c8da0;
  --accent:    #0891b2;
  --accent-ink:#e6feff;
  --ok:        #0f9d70;
  --warn:      #c67a12;
  --crit:      #d33345;
  --info:      #2f6fe0;
  --unknown:   #6b7c93;
  --ok-bg:     rgba(15,157,112,.12);
  --warn-bg:   rgba(198,122,18,.14);
  --crit-bg:   rgba(211,51,69,.12);
  --info-bg:   rgba(47,111,224,.12);
  --unknown-bg:rgba(107,124,147,.12);
  --shadow: 0 1px 2px rgba(16,40,70,.06), 0 12px 28px -18px rgba(16,40,70,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* atmospheric backdrop: faint grid + corner glows */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(41,211,238,.10), transparent 60%),
    radial-gradient(700px 500px at 0% 108%, rgba(90,162,255,.08), transparent 55%),
    var(--bg);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 30%, transparent 75%);
  opacity: .5;
}

a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

/* ---------- micro-label (mono, uppercase, tracked) ---------- */
.k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================ layout */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
/* Mobile menu overlay — hidden by default so it never occupies a desktop grid cell
   (otherwise it displaces .main into the sidebar column). Shown only on mobile via .show. */
.scrim { display: none; }

.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  display: flex; flex-direction: column; padding: 18px 14px; gap: 6px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: radial-gradient(120% 120% at 30% 20%, #0b2a31, #0a1622);
  border: 1px solid #1c3b44; display: grid; place-items: center;
  box-shadow: 0 0 22px -6px rgba(41,211,238,.55);
}
.brand .logo svg { width: 20px; height: 20px; }
.brand b { font-size: 14.5px; letter-spacing: -.02em; }
.brand small { display:block; color: var(--ink-faint); font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; }
.brand .brandtext { min-width: 0; }

/* Org picker (P5): a native <details> disclosure in the brand block for multi-org members. */
.orgpick { position: relative; }
.orgpick > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  list-style: none; color: var(--ink-faint); font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase; max-width: 150px; }
.orgpick > summary::-webkit-details-marker { display: none; }
.orgpick > summary:hover { color: var(--ink); }
.orgpick .caret { font-size: 8px; opacity: .7; letter-spacing: 0; }
.orgpick[open] > summary .caret { transform: rotate(180deg); }
.orgpick .orgmenu { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 6px;
  min-width: 190px; max-height: 320px; overflow: auto; padding: 5px;
  background: var(--panel, #0c1a24); border: 1px solid #1c3b44; border-radius: 10px;
  box-shadow: 0 12px 34px -10px rgba(0,0,0,.6); }
.orgpick .orgmenu-head { padding: 4px 9px 7px; margin-bottom: 3px; border-bottom: 1px solid #14232e;
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; }
.orgpick .orgmenu a { display: block; padding: 7px 9px; border-radius: 7px; font-size: 12.5px;
  color: var(--ink); text-decoration: none; white-space: nowrap; }
.orgpick .orgmenu a:hover { background: #122734; }
.orgpick .orgmenu a.cur { color: #29d3ee; }
.orgpick .orgmenu a.cur::after { content: " ✓"; opacity: .8; }

/* Org picker landing page (home() for a multi-org member). */
.orglist { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.orglist .orgrow { justify-content: center; width: 100%; }

/* Scrolls independently when the item list is taller than the viewport (many staff items),
   so the sign-out footer stays pinned and nothing gets clipped. min-height:0 lets a flex
   child shrink below its content height so overflow actually engages. */
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: 9px; color: var(--ink-dim); font-weight: 550; font-size: 13.5px;
  position: relative; transition: background .15s, color .15s;
}
.nav a svg { width: 17px; height: 17px; opacity: .85; }
.nav a:hover { background: var(--panel-2); color: var(--ink); }
.nav a.active { background: var(--panel-3); color: var(--ink); }
.nav a.active::before {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.nav .sep { height: 1px; background: var(--line); margin: 10px 6px; }
.nav .navsec { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); padding: 12px 11px 4px; }

/* support ticket thread */
.thread { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.tmsg { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.tmsg.staff { border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tmsg .tmeta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 4px; }
.tmsg .tbody { font-size: 13.5px; white-space: pre-wrap; line-height: 1.5; }

.side-foot { margin-top: auto; padding: 12px 8px 2px; border-top: 1px solid var(--line); }
.side-foot .who { display: flex; align-items: center; gap: 9px; }
.avatar { width: 28px; height: 28px; border-radius: 8px; flex:none;
  background: var(--panel-3); border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent); }

/* ============================================================ topbar */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 26px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}
.topbar h1 { font-size: 17px; }
.topbar .crumb { color: var(--ink-faint); font-weight: 500; }
.spacer { flex: 1; }

.search { position: relative; }
.search input {
  width: 230px; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); border-radius: 9px; padding: 8px 12px 8px 32px; font-size: 13px;
  font-family: var(--font-mono);
}
.search svg { position: absolute; left: 10px; top: 9px; width: 15px; height: 15px; color: var(--ink-faint); }
.search input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

.clock { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-dim);
  display: flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 var(--ok); animation: pulse 2.4s infinite; }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; color: var(--ink-dim);
}
.icon-btn:hover { color: var(--ink); border-color: var(--accent); }
.icon-btn svg { width: 16px; height: 16px; }

/* ============================================================ content */
.content { padding: 26px; max-width: 1500px; width: 100%; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.row { display: grid; gap: 16px; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.section-title h2 { font-size: 14px; }
.section-title .k { margin-top: 2px; }
.grow { flex: 1; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.tile {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 15px;
  box-shadow: var(--shadow);
}
.tile .k { display: block; margin-bottom: 10px; }
.tile .v { font-size: 30px; font-weight: 680; letter-spacing: -.02em; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; line-height: 1; }
.tile .sub { margin-top: 8px; font-size: 12px; color: var(--ink-dim); display: flex; align-items: center; gap: 7px; }
.tile .edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .9; }
.tile.ok .edge { background: var(--ok); } .tile.ok .v { color: var(--ok); }
.tile.crit .edge { background: var(--crit); } .tile.crit .v { color: var(--crit); }
.tile.warn .edge { background: var(--warn); } .tile.warn .v { color: var(--warn); }
.tile.accent .v { color: var(--accent); }
.tile .ghost { position: absolute; right: -14px; bottom: -20px; opacity: .06; }
.tile .ghost svg { width: 96px; height: 96px; }

/* cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; }
.card > header { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line); }
.card > header h3 { font-size: 13.5px; }
.card > header > svg { width: 16px; height: 16px; color: var(--ink-dim); flex: none; }
.card > header .k { margin-top: 2px; }
.card .body { padding: 16px; }
.card .body.flush { padding: 0; }

/* pills + dots */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; font-family: var(--font-mono); letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap; }
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok      { color: var(--ok);      background: var(--ok-bg); }
.pill.warn    { color: var(--warn);    background: var(--warn-bg); }
.pill.crit    { color: var(--crit);    background: var(--crit-bg); }
.pill.info    { color: var(--info);    background: var(--info-bg); }
.pill.unknown { color: var(--unknown); background: var(--unknown-bg); }

.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; display: inline-block; }
.dot.ok      { background: var(--ok);   box-shadow: 0 0 0 0 var(--ok);   animation: pulse 2.6s infinite; }
.dot.crit    { background: var(--crit); box-shadow: 0 0 8px var(--crit); }
.dot.warn    { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.dot.unknown { background: var(--unknown); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* meters */
.meter { height: 6px; border-radius: 6px; background: var(--panel-3); overflow: hidden; border: 1px solid var(--line-soft); }
.meter > span { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.meter.ok > span { background: var(--ok); }
.meter.warn > span { background: var(--warn); }
.meter.crit > span { background: var(--crit); }
.meter.unknown > span { background: var(--unknown); }

/* tables */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th { text-align: left; padding: 10px 14px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
table.grid td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.grid tbody tr { transition: background .12s; }
table.grid tbody tr:hover { background: var(--panel-2); }
table.grid tbody tr:last-child td { border-bottom: none; }
.u-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.u-name .mono { font-size: 13px; }
.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* version bar */
.vbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.vbar > span { display: block; }
.vseg-0 { background: var(--accent); }
.vseg-1 { background: var(--info); }
.vseg-2 { background: #7c6cff; }
.vseg-3 { background: var(--unknown); }
.legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 12px; }
.legend .it { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }

/* alerts list */
.alerts { display: flex; flex-direction: column; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.alert-row:last-child { border-bottom: none; }
.alert-row .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.alert-row .ico.crit { background: var(--crit-bg); color: var(--crit); }
.alert-row .ico.warn { background: var(--warn-bg); color: var(--warn); }
.alert-row .ico svg { width: 15px; height: 15px; }
.alert-row .msg { flex: 1; min-width: 0; }
.alert-row .msg b { font-weight: 600; }
.alert-row .msg .sm { font-size: 12px; color: var(--ink-dim); }
.empty { padding: 34px 16px; text-align: center; color: var(--ink-faint); }
.empty svg { width: 26px; height: 26px; opacity: .5; margin-bottom: 8px; }

/* buttons + fields */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-weight: 600;
  font-size: 13px; cursor: pointer; transition: .15s; }
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 6px 18px -8px var(--accent); }
.btn.accent:hover { filter: brightness(1.06); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  font-family: var(--font-mono); }
input, select { font-family: var(--font-sans); font-size: 13.5px; }
.input, select.input {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 9px 11px; width: 100%;
}
.input:focus, select.input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  font-size: 12.5px; color: var(--ink-dim); font-weight: 550; cursor: pointer; }
.chip.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-ink); }

/* messages */
.msg { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; }
.msg.success { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--ink); }
.msg.error { background: var(--crit-bg); border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); }

/* detail header */
.detail-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.detail-head .id { display: flex; align-items: center; gap: 12px; }
.detail-head h1 { font-size: 24px; letter-spacing: -.02em; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.kv dd { margin: 0; }

/* metric mini-cards */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.metric { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; }
.metric .k { display: block; margin-bottom: 8px; }
.metric .val { font-size: 20px; font-weight: 650; font-family: var(--font-mono); }
.metric .val small { font-size: 12px; color: var(--ink-faint); }
.metric.ok .val { color: var(--ok); } .metric.warn .val { color: var(--warn); } .metric.crit .val { color: var(--crit); }
.metric .meter { margin-top: 9px; }

.svc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.svc { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); font-family: var(--font-mono); font-size: 12px; }

/* read-only "show this command" reveals (remote-access card) */
.cmd-reveal { margin-top: 12px; }
.cmd-reveal > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent);
  list-style: none; user-select: none; }
.cmd-reveal > summary::-webkit-details-marker { display: none; }
.cmd-reveal > summary::before { content: "▸ "; color: var(--ink-faint); }
.cmd-reveal[open] > summary::before { content: "▾ "; }
.cmd-reveal .faint.sm { margin: 8px 0 6px; font-size: 11px; }
.cmd-row { display: flex; align-items: stretch; gap: 8px; }
.cmd-row .cmd { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.cmd-row .btn { flex: none; }

/* charts */
.chart { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; }
.chart .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.chart .head .now { font-family: var(--font-mono); font-size: 16px; font-weight: 650; }
.chart svg { width: 100%; height: 64px; display: block; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: url(#sg); opacity: .5; }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px; box-shadow: var(--shadow); }
.login-card .brand { justify-content: center; padding-bottom: 8px; }
.login-card h1 { text-align: center; font-size: 18px; margin-bottom: 4px; }
.login-card p.sub { text-align: center; color: var(--ink-faint); margin: 0 0 22px; font-size: 13px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card .btn { justify-content: center; width: 100%; padding: 11px; }
.login-card .err { color: var(--crit); font-size: 12.5px; }

/* pushed-event toasts */
.toast-root { position: fixed; top: 68px; right: 20px; z-index: 200; display: flex;
  flex-direction: column; gap: 10px; max-width: min(360px, 90vw); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-left-width: 3px;
  border-radius: 10px; padding: 11px 14px; font-size: 13px; color: var(--ink);
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.6); opacity: 0; transform: translateX(16px);
  transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: none; }
.toast.clickable { cursor: pointer; }
.toast .toast-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--info); }
.toast-alert { border-left-color: var(--crit); }
.toast-alert .toast-dot { background: var(--crit); box-shadow: 0 0 10px var(--crit); }
.toast-checkin { border-left-color: var(--accent); }
.toast-checkin .toast-dot { background: var(--accent); }
.toast-resolved { border-left-color: var(--ok); }
.toast-resolved .toast-dot { background: var(--ok); }

/* live tile update flash */
.stat-flash { animation: statflash .8s ease-out; }
@keyframes statflash {
  0% { color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { text-shadow: none; }
}

/* animation on load */
.reveal { opacity: 0; transform: translateY(8px); animation: rise .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.d1{animation-delay:.03s}.d2{animation-delay:.08s}.d3{animation-delay:.13s}
.d4{animation-delay:.18s}.d5{animation-delay:.23s}.d6{animation-delay:.28s}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .dot, .live-dot { animation: none; }
}

/* responsive */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; width: 260px; transform: translateX(-105%);
    transition: transform .22s; }
  .sidebar.open { transform: none; }
  .menu-btn { display: grid; }
  .search input { width: 150px; }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; display: none; }
  .scrim.show { display: block; }
}
@media (max-width: 640px) {
  .content { padding: 16px; }
  .topbar { padding: 11px 16px; }
  .clock .t { display: none; }
  .cols-2, .cols-3 { grid-template-columns: 1fr !important; }
}

.cols-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.table-wrap { overflow-x: auto; }