/* ═══════════════════════════════════════════════════════════════
   ORION Alerts — page-specific CSS · Phase 2
   Extracted verbatim from the page's former inline <style> block.
   Rule order preserved exactly — do not resort or regroup.
   Load order contract: /assets/orion.css loads FIRST, then this
   file, so these page styles override the shared foundation.
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   ORION — ALERTS / ACTIVITY · Native ORION page
   Same OS / same body as ORION Command + Dash — different room.
   Single-file • vanilla • landscape kiosk (1280 × 800, fit-scaled)
   This is ORION's own data, so it is native — not an embed.
══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ORION design tokens + severity palette moved to /assets/orion.css
     (shared foundation, Phase 1). color-scheme intentionally stays
     page-local: Alerts is currently the only ORION page declaring it. */
  color-scheme:dark;
}

html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:'Rajdhani',sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-tap-highlight-color:transparent}

/* ── Fit-to-viewport stage ─────────────────────────────── */
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,#06101e 0%,#03060c 70%,#000 100%);overflow:hidden}
#stage{width:1280px;height:800px;position:relative;transform-origin:center center;flex:0 0 auto}

/* ── Atmosphere layers (.fx / .fx-glow / .fx-grid / .fx-scan / .fx-vig +
     breathe/scan keyframes) moved to /assets/orion.css — Phase 1 ── */

/* ── Root grid · header + summary + filters + log ──────── */
#root{position:absolute;inset:0;z-index:2;display:grid;
  grid-template-rows:64px auto auto auto 1fr;
  gap:8px;padding:10px;
  animation:drift 120s ease-in-out infinite}      /* AMOLED micro-drift */
@keyframes drift{
  0%{transform:translate(0,0)}   20%{transform:translate(.6px,.4px)}
  40%{transform:translate(0,.8px)} 60%{transform:translate(-.6px,.3px)}
  80%{transform:translate(.3px,-.5px)} 100%{transform:translate(0,0)}}

/* ── Glass panel base (.panel + pseudos) moved to /assets/orion.css — Phase 1 ── */

/* Corner ticks (.frame-corner / .c-*) moved to /assets/orion.css — Phase 1 */

/* .eyebrow label primitive moved to /assets/orion.css — Phase 1 */

/* ══════════ HEADER (ORION identity spine — preserved) ══════════ */
#hdr{grid-row:1;display:flex;align-items:center;gap:15px;padding:0 20px;border-color:var(--line-2)}
.logo{width:48px;height:48px;flex-shrink:0;position:relative}
.logo svg{width:100%;height:100%;display:block}
.logo .lr{transform-origin:50% 50%}
.logo .lr-a{animation:spin 26s linear infinite}
.logo .lr-b{animation:spin 14s linear infinite reverse}

.brand{line-height:1}
.brand h1{font-family:'Orbitron',sans-serif;font-size:33px;font-weight:900;letter-spacing:.16em;
  background:linear-gradient(92deg,#7ff6ff,var(--cyan) 45%,var(--aqua) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(34,233,255,.35))}
.brand p{font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.34em;color:var(--dim);margin-top:3px}

.divider{width:1px;height:40px;flex-shrink:0;margin:0 4px;
  background:linear-gradient(transparent,var(--line-2),transparent)}

.sysbadge{display:flex;flex-direction:column;gap:4px;padding:7px 14px;border-radius:10px;
  border:1px solid rgba(39,255,212,.28);background:rgba(8,28,30,.5)}
.sysbadge .row{display:flex;align-items:center;gap:8px;
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--aqua)}
.sysbadge small{font-family:'Rajdhani',sans-serif;font-size:10px;letter-spacing:.18em;color:rgba(39,255,212,.5)}

.dot{width:9px;height:9px;border-radius:50%;background:var(--aqua);flex-shrink:0;
  box-shadow:0 0 8px var(--aqua),0 0 16px rgba(39,255,212,.5);animation:pip 2.6s ease-in-out infinite}
@keyframes pip{0%,100%{box-shadow:0 0 5px var(--aqua),0 0 10px rgba(39,255,212,.35);opacity:.85}
  50%{box-shadow:0 0 11px var(--aqua),0 0 22px rgba(39,255,212,.6);opacity:1}}

/* ── top navigation · ORION glass nav buttons (6-wide) ── */
.eco{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  flex:0 0 730px;
  width:730px;
  max-width:730px;
  margin-left:0;
  align-items:center;
}
.eco .pip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:8px 8px;
  border-radius:11px;
  cursor:pointer;
  border:1px solid rgba(40,210,255,.16);
  background:rgba(8,20,38,.42);
  box-shadow:inset 0 0 12px rgba(34,233,255,.035);
  transition:background .2s,border-color .2s,box-shadow .2s,transform .12s;
}
.eco .pip i{
  width:9px;height:9px;flex-shrink:0;
  border-radius:50%;display:block;background:var(--cyan);
  box-shadow:0 0 7px var(--cyan);animation:pip 3s ease-in-out infinite;
}
.eco .pip.m i{background:var(--magenta);box-shadow:0 0 7px var(--magenta)}
.eco .pip.p i{background:var(--purple);box-shadow:0 0 7px var(--purple)}
.eco .pip span{
  font-family:'Orbitron',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;
  color:var(--dim);white-space:nowrap;
}
.eco .pip.off i{background:rgba(150,196,224,.28);box-shadow:none;animation:none}
.eco .pip.off span{color:var(--dim-2)}
.eco .pip:hover{
  background:rgba(34,233,255,.08);
  border-color:rgba(40,210,255,.34);
  box-shadow:0 0 16px rgba(34,233,255,.10),inset 0 0 12px rgba(34,233,255,.05);
}
.eco .pip:active{transform:scale(.97)}
.eco .pip.active{
  background:rgba(227,75,255,.10);
  border-color:rgba(227,75,255,.35);
  box-shadow:inset 0 0 0 1px rgba(227,75,255,.18),0 0 18px rgba(227,75,255,.10);
}
.eco .pip.active span{color:var(--cyan);font-weight:700}

.spacer{flex:1}

/* ══════════ SUMMARY STRIP ══════════ */
#summary{grid-row:2;display:flex;align-items:center;gap:14px;padding:0 16px;min-height:54px;border-color:var(--line-2)}
.sum-status{display:flex;align-items:center;gap:10px;padding-right:14px;border-right:1px solid var(--line);min-width:236px}
.sum-status .dot{width:10px;height:10px}
.sum-status .lab{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--aqua)}
.sum-status.deg .dot{background:var(--sev-warn);box-shadow:0 0 8px var(--sev-warn),0 0 16px rgba(255,180,84,.5)}
.sum-status.deg .lab{color:var(--sev-warn)}
.sum-status.off .dot{background:var(--sev-crit);box-shadow:0 0 8px var(--sev-crit),0 0 16px rgba(255,94,160,.5)}
.sum-status.off .lab{color:var(--sev-crit)}

.metrics{display:flex;align-items:center;gap:10px;flex:1}
.metric{display:flex;flex-direction:column;gap:1px;padding:6px 14px;border-radius:10px;
  border:1px solid var(--line);background:rgba(8,20,38,.42);min-width:108px}
.metric .mk{font-family:'Orbitron',sans-serif;font-size:8px;font-weight:600;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.metric .mv{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;letter-spacing:.02em;color:var(--cyan);line-height:1.05}
.metric .mv sup{font-size:10px;color:var(--dim)}
.metric.alert .mv{color:var(--sev-ok)}
.metric.alert.hot{border-color:rgba(255,94,160,.4);background:rgba(40,10,24,.4)}
.metric.alert.hot .mv{color:var(--sev-crit);text-shadow:0 0 12px rgba(255,94,160,.55)}

.sum-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.upd{font-family:'Rajdhani',sans-serif;font-size:10.5px;letter-spacing:.12em;color:var(--dim);white-space:nowrap}
.upd b{color:var(--aqua);font-weight:600}
.refresh-btn{cursor:pointer;font-family:'Orbitron',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  color:var(--cyan);padding:8px 14px;border-radius:10px;
  border:1px solid rgba(34,233,255,.34);background:linear-gradient(150deg,rgba(12,40,70,.6),rgba(8,24,46,.5));
  transition:border-color .2s,box-shadow .2s,transform .12s,background .2s}
.refresh-btn:hover{border-color:var(--cyan);box-shadow:0 0 14px rgba(34,233,255,.16)}
.refresh-btn:active{transform:scale(.96)}

/* ══════════ FILTER TABS ══════════ */
#filters{grid-row:4;display:flex;align-items:center;gap:8px;padding:8px 14px;flex-wrap:wrap;border-color:var(--line)}
.tab{cursor:pointer;display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:10px;
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--dim);
  border:1px solid var(--line);background:rgba(8,20,38,.4);white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .1s}
.tab .cnt{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;color:var(--dim-2);
  padding:1px 7px;border-radius:8px;background:rgba(40,210,255,.08);min-width:20px;text-align:center}
.tab:hover{border-color:var(--line-2);color:var(--text)}
.tab:active{transform:scale(.97)}
.tab.active{color:var(--bg);background:linear-gradient(120deg,var(--cyan),var(--aqua));
  border-color:transparent;box-shadow:0 0 16px rgba(39,255,212,.25)}
.tab.active .cnt{background:rgba(4,7,13,.28);color:var(--bg)}
.tab.danger.active{background:linear-gradient(120deg,var(--pink),var(--magenta));box-shadow:0 0 16px rgba(255,94,160,.3)}

/* ══════════ EVENT LOG ══════════ */
#logwrap{grid-row:5;min-height:0;padding:0;display:flex;flex-direction:column}

/* ── Active Issues panel (live telemetry, prioritized above history) ── */
#activewrap{grid-row:3;display:flex;flex-direction:column;padding:0;border-color:var(--line-2)}
.ai-head{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line)}
.ai-title{display:flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}
.ai-count{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--bg);
  background:var(--sev-ok);border-radius:7px;padding:2px 9px;min-width:22px;text-align:center}
.ai-count.hot{background:var(--sev-warn)}
.ai-count.crit{background:var(--sev-crit)}
.ai-body{max-height:148px;overflow-y:auto;overflow-x:hidden;padding:4px 14px 6px}
.ai-body::-webkit-scrollbar{width:8px}
.ai-body::-webkit-scrollbar-thumb{background:rgba(40,210,255,.18);border-radius:8px}
.ai-empty{display:flex;align-items:center;gap:9px;padding:10px 2px;
  font-family:'Rajdhani',sans-serif;font-size:12.5px;letter-spacing:.05em;color:var(--dim)}
.ai-empty .ok-dot{width:9px;height:9px;border-radius:50%;background:var(--sev-ok);box-shadow:0 0 9px rgba(39,255,212,.7)}
.ai-row{display:grid;grid-template-columns:96px 150px 1fr 74px;gap:12px;align-items:center;
  position:relative;padding:7px 0 7px 12px;border-bottom:1px solid var(--line-soft)}
.ai-row:last-child{border-bottom:none}
.ai-row::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--sev-warn)}
.ai-row.sev-critical::before{background:var(--sev-crit);box-shadow:0 0 10px rgba(255,94,160,.6)}
.ai-cap{font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;color:var(--text);letter-spacing:.02em}
.ai-cap small{display:block;font-family:'Orbitron',sans-serif;font-size:8px;font-weight:500;letter-spacing:.14em;color:var(--dim-2);text-transform:uppercase;margin-top:2px}
.ai-msg{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-time{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:600;color:var(--cyan);text-align:right}
.log-head{display:grid;grid-template-columns:74px 132px 96px 150px 1fr;gap:12px;
  padding:11px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.log-head span{font-family:'Orbitron',sans-serif;font-size:8px;font-weight:600;letter-spacing:.2em;color:var(--dim-2);text-transform:uppercase}
.log-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 0}
.log-body::-webkit-scrollbar{width:8px}
.log-body::-webkit-scrollbar-track{background:transparent}
.log-body::-webkit-scrollbar-thumb{background:rgba(40,210,255,.18);border-radius:8px}
.log-body::-webkit-scrollbar-thumb:hover{background:rgba(40,210,255,.3)}

.row{display:grid;grid-template-columns:74px 132px 96px 150px 1fr;gap:12px;align-items:center;
  padding:11px 18px;position:relative;border-bottom:1px solid var(--line-soft)}
.row::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--sev-info)}
.row.sev-critical::before{background:var(--sev-crit);box-shadow:0 0 10px rgba(255,94,160,.6)}
.row.sev-warning::before{background:var(--sev-warn);box-shadow:0 0 10px rgba(255,180,84,.5)}
.row.sev-info::before{background:var(--sev-info);box-shadow:0 0 8px rgba(34,233,255,.45)}
.row.sev-success::before{background:var(--sev-ok);box-shadow:0 0 8px rgba(39,255,212,.45)}
.row:hover{background:rgba(34,233,255,.035)}

.r-time{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:600;color:var(--cyan);letter-spacing:.02em}
.r-time small{display:block;font-family:'Rajdhani',sans-serif;font-size:9.5px;font-weight:400;color:var(--dim-2);letter-spacing:.04em;margin-top:1px}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:600;letter-spacing:.08em;white-space:nowrap;
  border:1px solid var(--line);background:rgba(8,20,38,.5);color:var(--text);max-width:100%}
.badge i{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.badge .bt{overflow:hidden;text-overflow:ellipsis}
.src-ha i{background:var(--purple);box-shadow:0 0 6px var(--purple)}
.src-n8n i{background:var(--magenta);box-shadow:0 0 6px var(--magenta)}
.src-orion i{background:var(--aqua);box-shadow:0 0 6px var(--aqua)}
.src-system i{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.src-security i{background:var(--pink);box-shadow:0 0 6px var(--pink)}
.src-camera i{background:var(--teal);box-shadow:0 0 6px var(--teal)}

.sev-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:8px;
  font-family:'Orbitron',sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sev-pill.critical{color:var(--sev-crit);border:1px solid rgba(255,94,160,.45);background:rgba(255,94,160,.1)}
.sev-pill.warning{color:var(--sev-warn);border:1px solid rgba(255,180,84,.4);background:rgba(255,180,84,.1)}
.sev-pill.info{color:var(--sev-info);border:1px solid rgba(34,233,255,.4);background:rgba(34,233,255,.08)}
.sev-pill.success{color:var(--sev-ok);border:1px solid rgba(39,255,212,.4);background:rgba(39,255,212,.1)}

.r-cat{font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;color:var(--text);letter-spacing:.02em}
.r-cat small{display:block;font-family:'Orbitron',sans-serif;font-size:8px;font-weight:500;letter-spacing:.14em;color:var(--dim-2);text-transform:uppercase;margin-top:2px}
.r-msg{font-family:'Rajdhani',sans-serif;font-size:13.5px;font-weight:500;color:var(--text);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;
  font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.16em;color:var(--dim)}
.empty svg{width:42px;height:42px;opacity:.5}
.empty small{font-family:'Rajdhani',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--dim-2)}

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ORION_ALERTS_SYSBADGE_ROW_FIX */
/* Alerts uses .row for event-log rows, so reset only the header badge row. */
.sysbadge .row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 !important;
  position:static !important;
  border-bottom:0 !important;
  background:transparent !important;
  grid-template-columns:none !important;
  line-height:1.05;
}
.sysbadge .row::before{
  content:none !important;
  display:none !important;
}
.sysbadge small{
  display:block;
  margin-top:0;
  line-height:1.05;
}
/* /ORION_ALERTS_SYSBADGE_ROW_FIX */