/* ============================================================
   dahua-ic — Light theme
   Palette: off-white surfaces · deep navy text/nav · gold accent
   System font stack only (CSP default-src 'self'). No imports.
   ============================================================ */

:root{
  /* ---- brand palette ---- */
  --navy:#0f2350;          /* deep navy — primary text, headers, nav bar */
  --navy-700:#1a3369;      /* lighter navy — hover on nav / links */
  --navy-900:#0a1836;      /* darkest navy — nav bar depth */
  --gold:#efba68;          /* soft honey (light) — buttons, active states */
  --gold-600:#d9a349;      /* darker honey — borders/pressed */
  --gold-400:#f7d295;      /* hover honey (lighter) */
  --gold-100:#fdf6e7;      /* soft honey wash — subtle fills */

  /* ---- surfaces ---- */
  --bg:#f6f7f9;            /* app background (off-white, warm-cool) */
  --surface:#ffffff;       /* cards, tables, tiles */
  --surface-2:#f1f3f6;     /* inputs, table headers, tags */
  --surface-3:#e9ecf1;     /* hover fills */

  /* ---- ink ---- */
  --fg:#132244;            /* primary text (navy ink) */
  --fg-soft:#39496b;       /* secondary text */
  --muted:#697690;         /* muted / labels — AA on white */

  /* ---- lines ---- */
  --line:#dde2ea;          /* warm-grey borders */
  --line-strong:#c6ced9;

  /* ---- semantic (legible on white) ---- */
  --ok:#1f8a4c;            /* green */
  --ok-bg:#e5f4ea;
  --bad:#c62f2f;           /* red */
  --bad-bg:#fbe8e6;
  --warn:#9a6b12;          /* amber-brown text */
  --warn-bg:#fbefd4;
  --info:#1f5fb0;          /* blue for call category */

  /* ---- geometry ---- */
  --r-sm:6px; --r:9px; --r-lg:12px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* ---- type ---- */
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-base:15px; --fs-sm:13px; --fs-xs:12px;

  /* ---- elevation ---- */
  --shadow-1:0 1px 2px rgba(15,35,80,.06), 0 1px 3px rgba(15,35,80,.05);
  --shadow-2:0 2px 6px rgba(15,35,80,.08), 0 6px 18px rgba(15,35,80,.06);
  --shadow-nav:0 1px 0 rgba(0,0,0,.04), 0 2px 12px rgba(10,24,54,.18);
  --ring:0 0 0 3px rgba(239,186,104,.48);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:var(--fs-base)/1.55 var(--font);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--navy-700);text-decoration:none;font-weight:500}
a:hover{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:2px}

::selection{background:var(--gold-100);color:var(--navy)}

/* ---- layout ---- */
.wrap{max-width:1080px;margin:0 auto;padding:var(--sp-5) var(--sp-4) 56px}

h1{font-size:23px;line-height:1.25;margin:0 0 var(--sp-4);color:var(--navy);font-weight:700;letter-spacing:-.01em}
h2{
  font-size:14px;margin:var(--sp-6) 0 var(--sp-3);
  color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  display:flex;align-items:center;gap:10px;
}
h2::after{content:"";flex:1;height:1px;background:var(--line)}

.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}

/* ============================================================
   Top bar
   ============================================================ */
.topbar{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-5);height:54px;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-900) 100%);
  border-bottom:2px solid var(--gold);
  box-shadow:var(--shadow-nav);
  position:sticky;top:0;z-index:50;
}
.brand{
  font-weight:800;color:#fff;font-size:16px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:8px;
}
.brand::before{
  content:"";width:10px;height:10px;border-radius:3px;
  background:var(--gold);box-shadow:0 0 0 3px rgba(239,186,104,.26);
}
.brand:hover{color:#fff;text-decoration:none}

.topbar nav{display:flex;gap:2px;align-items:center}
.topbar nav a{
  color:rgba(255,255,255,.72);font-weight:500;font-size:14px;
  padding:8px 12px;border-radius:var(--r-sm);
  position:relative;transition:color .12s,background .12s;
}
.topbar nav a:hover{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
.topbar nav a.on{color:#fff;font-weight:600}
.topbar nav a.on::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:3px;
  background:var(--gold);border-radius:2px 2px 0 0;
}

.spacer{flex:1}

.who{color:rgba(255,255,255,.82);font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:6px}
.who .role{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--gold);color:var(--navy-900);
  padding:2px 8px;border-radius:var(--r-pill);
}
.topbar .muted{color:rgba(255,255,255,.7)}
.topbar .muted:hover{color:#fff}

.inline{display:inline}

button.link{
  background:none;border:none;color:rgba(255,255,255,.82);
  cursor:pointer;font:inherit;font-size:14px;padding:0;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:color .12s,text-decoration-color .12s;
}
button.link:hover{color:#fff;text-decoration-color:var(--gold)}

/* ============================================================
   Forms
   ============================================================ */
form.card,.login form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  max-width:520px;
  box-shadow:var(--shadow-1);
}
form.card h2{margin-top:0}
form.card h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:var(--sp-4) 0 var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--line)}
form.card h3:first-of-type{border-top:none;padding-top:0}
/* camera detail — settings forms in a responsive multi-column area */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--sp-4);align-items:start}
.formgrid form.card{max-width:none}
@media (max-width:720px){.formgrid{grid-template-columns:1fr}}

label{
  display:block;margin:0 0 var(--sp-3);
  color:var(--fg-soft);font-size:var(--fs-sm);font-weight:600;
}
label.check{
  display:flex;gap:var(--sp-2);align-items:center;
  color:var(--fg);font-weight:500;
  padding:4px 0;
}

input,select{
  width:100%;margin-top:6px;
  padding:9px 11px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  color:var(--fg);font:inherit;font-size:14px;
  transition:border-color .12s,box-shadow .12s,background .12s;
}
input::placeholder{color:var(--muted)}
input:hover,select:hover{border-color:#aab4c6}
input:focus,select:focus{
  outline:none;border-color:var(--gold);
  box-shadow:var(--ring);background:#fff;
}
select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:32px;cursor:pointer;
}

label.check input{margin:0;accent-color:var(--gold);width:16px;height:16px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.row{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}

/* Page header toolbar (list pages: NVRs, Devices …) — title + primary action
   as one balanced, divided row. */
.page-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);margin:0 0 var(--sp-5);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);
}
.page-head h1{margin:0;font-size:22px;line-height:1.2}
/* soft-primary "Add" action: honey-tinted, sized to sit beside the h1 rather
   than a loud saturated block, but still clearly the page's main CTA. */
.btn-add{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px 7px 13px;font-size:var(--fs-sm);font-weight:700;
  background:var(--gold-100);border:1px solid var(--gold-600);color:var(--navy);box-shadow:none;
}
.btn-add:hover{background:var(--gold-400);border-color:var(--gold-600)}
.btn-add .ic{font-size:16px;font-weight:700;line-height:0;margin-top:1px;color:var(--gold-600)}
.btn-add:hover .ic{color:var(--navy)}

/* ---- buttons ---- */
button{
  background:var(--gold);
  border:1px solid var(--gold-600);
  color:var(--navy-900);
  font:inherit;font-weight:700;font-size:14px;
  padding:9px 18px;border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .12s,box-shadow .12s,border-color .12s,transform .04s;
  box-shadow:var(--shadow-1);
}
button:hover{background:var(--gold-400);border-color:var(--gold-600)}
button:active{transform:translateY(1px);box-shadow:none}

button.small{padding:5px 11px;font-size:var(--fs-xs);border-radius:var(--r-sm);min-height:28px}

button.ghost{
  background:var(--surface);border:1px solid var(--line-strong);
  color:var(--navy);font-weight:600;box-shadow:none;
}
button.ghost:hover{background:var(--surface-2);border-color:#aab4c6}

button.warn{
  background:var(--warn-bg);border:1px solid #e2b95f;color:var(--warn);
  box-shadow:none;
}
button.warn:hover{background:#f7e4bb}

button.danger{
  background:var(--bad);border:1px solid #a92626;color:#fff;
}
button.danger:hover{background:#d63b3b}

button[disabled],.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

.hidden{display:none !important}

/* ---- accessible focus ring (light theme) ---- */
a:focus-visible,input:focus-visible,select:focus-visible,
button:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:var(--r-sm);
}
.topbar nav a:focus-visible,button.link:focus-visible{box-shadow:0 0 0 3px rgba(239,186,104,.6)}

/* ============================================================
   Login
   ============================================================ */
.login{max-width:380px;margin:9vh auto 0;text-align:center}
.login h1{font-size:30px;letter-spacing:-.02em}
.login .sub{color:var(--muted);margin:6px 0 var(--sp-5);font-size:14px}
.login form{text-align:left;box-shadow:var(--shadow-2)}
.login form button[type="submit"]{width:100%;margin-top:var(--sp-2);padding:11px}

/* narrow single-column pages (change password etc.) */
.narrow{max-width:520px}
.two-col{display:grid}
.hint{color:var(--muted);font-size:var(--fs-xs);font-weight:500}

/* ============================================================
   Flash messages
   ============================================================ */
.flash{
  padding:11px 15px;border-radius:var(--r);margin-bottom:var(--sp-4);
  background:var(--surface);border:1px solid var(--line);
  border-left-width:4px;font-size:14px;color:var(--fg);
  box-shadow:var(--shadow-1);
}
.flash.error,.flash.bad{background:var(--bad-bg);border-color:#e6a9a4;border-left-color:var(--bad);color:#8a1f1f}
.flash.warn{background:var(--warn-bg);border-color:#e2c785;border-left-color:#cf9a2a;color:#7a520c}
.flash.ok{background:var(--ok-bg);border-color:#a6d6b6;border-left-color:var(--ok);color:#12673a}

/* ============================================================
   Tiles (dashboard)
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--sp-4)}
.tile{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-4);
  box-shadow:var(--shadow-1);
  border-left:3px solid var(--line-strong);
  transition:box-shadow .15s,transform .1s,border-color .15s;
}
.tile:hover{box-shadow:var(--shadow-2)}
.tile--up{border-left-color:var(--ok)}
.tile--down{border-left-color:var(--bad)}
.tile-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.tile-head b{color:var(--navy);font-size:15px}
.tile-head .host{color:var(--muted);font-size:var(--fs-xs);margin-left:auto;font-family:var(--mono)}

.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;box-shadow:0 0 0 3px rgba(105,118,144,.15)}
.dot.up{background:var(--ok);box-shadow:0 0 0 3px rgba(31,138,76,.18)}
.dot.down{background:transparent;border:2px solid var(--bad);width:11px;height:11px;box-shadow:none}

.status{font-size:var(--fs-xs);font-weight:700;padding:2px 9px;border-radius:var(--r-pill);border:1px solid transparent}
.status--up{background:var(--ok-bg);color:#12673a;border-color:#a6d6b6}
.status--down{background:var(--bad-bg);color:#8a1f1f;border-color:#e6a9a4}

.tile-row{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-sm);padding:3px 0;align-items:baseline}
.tile-row span{color:var(--muted)}
.tile-row b{color:var(--fg);font-weight:600;text-align:right}
.tile-row b.ok{color:var(--ok)}
.tile-row b.bad{color:var(--bad)}

.correct-form{margin-top:0;flex:1}
.correct-form button{width:100%}
.tile-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);align-items:stretch}
.tile-actions>button[data-video]{flex:1}

/* ============================================================
   Video modal (WebRTC)
   ============================================================ */
.vmodal{
  position:fixed;inset:0;z-index:100;
  background:rgba(10,24,54,.72);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
}
.vmodal.hidden{display:none !important}
.vmodal__box{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);width:min(880px,96vw);max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.vmodal__bar{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);
}
.vmodal__bar b{color:var(--navy);font-size:15px;margin-right:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vmodal__streams{display:flex;gap:6px;align-items:center}
.vmodal__stage{position:relative;background:#000;display:flex;align-items:center;justify-content:center}
.vmodal__video{width:100%;max-height:78vh;aspect-ratio:16/9;background:#000;display:block;object-fit:contain}
.vmodal__hint{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  color:#fff;background:rgba(0,0,0,.55);padding:6px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);pointer-events:none;max-width:90%;text-align:center;
}
.vmodal__hint:empty{display:none}
/* form-in-modal (NVR add/edit): a bit wider than a card, scrollable body */
.vmodal__box--form{width:min(680px,96vw)}
.vmodal__body{padding:var(--sp-5);overflow-y:auto}
.vmodal__body h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:var(--sp-4) 0 var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.vmodal__body h3:first-of-type{border-top:none;padding-top:0;margin-top:0}
.vmodal__body .hint{display:block;margin-top:5px;font-weight:500}
@media (max-width:720px){
  .vmodal{padding:0}
  .vmodal__box{width:100vw;max-height:100vh;height:100vh;border-radius:0}
  .vmodal__video{max-height:none;flex:1}
  .vmodal__stage{flex:1}
}

/* ============================================================
   Tables
   ============================================================ */
table.grid{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-1);
}
.grid th,.grid td{
  text-align:left;padding:10px 14px;
  border-bottom:1px solid var(--line);font-size:var(--fs-sm);
  vertical-align:middle;
}
.grid th{
  color:var(--muted);font-weight:700;background:var(--surface-2);
  text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-xs);
}
.grid td{color:var(--fg-soft)}
.grid td:first-child{color:var(--fg);font-weight:600}
.grid td.num{text-align:left;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.grid tbody tr{transition:background .1s}
.grid tbody tr:hover{background:var(--surface-2)}
.grid tr:last-child td{border-bottom:none}
.grid tr.row--off td{opacity:.55}

/* number/text styled as an inline clickable (e.g. Підключень → sessions dialog) */
.linklike{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--navy);font-weight:700;
  cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.linklike:hover{color:var(--gold-600)}

.actions{display:flex;gap:6px;flex-wrap:nowrap;align-items:center}
.actions form.inline{display:inline-flex}
/* compact icon buttons — keep each control's colour, just size it square */
.actions .small,.actions a[role=button]{
  min-width:34px;padding:5px 8px;font-size:15px;line-height:1.1;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
/* the Cameras link is an <a role=button> with no base button style — give it a ghost surface */
.actions a[role=button]{
  min-height:28px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--navy);cursor:pointer;
}
.actions a[role=button]:hover{background:var(--surface-2);border-color:#aab4c6}

.tag{
  display:inline-block;background:var(--gold-100);color:#7a5e17;
  border:1px solid #e6d5a3;
  padding:2px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;font-family:var(--mono);
  letter-spacing:.01em;
}

/* ---- status badges ---- */
.badge{
  display:inline-block;padding:2px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--fg-soft);
}
.badge--ok{background:var(--ok-bg);color:#12673a;border-color:#a6d6b6}
.badge--bad{background:var(--bad-bg);color:#8a1f1f;border-color:#e6a9a4}
.badge--warn{background:var(--warn-bg);color:#7a520c;border-color:#e2c785}
.badge--muted,.badge--none{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

/* ============================================================
   Live event feed
   ============================================================ */
.feed{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);max-height:360px;overflow:auto;
  font-family:var(--mono);font-size:var(--fs-xs);
  box-shadow:var(--shadow-1);
}
.feed:empty::before{
  content:"Очікування подій…";
  display:block;padding:16px;color:var(--muted);font-family:var(--font);
}
.feed .ev{
  display:flex;gap:var(--sp-3);padding:7px 14px;
  border-bottom:1px solid var(--line);align-items:baseline;
}
.feed .ev:hover{background:var(--surface-2)}
.feed .ev:last-child{border-bottom:none}
.feed .ev .t{color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.feed .ev .cat{
  min-width:66px;flex:none;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:11px;
}
.feed .ev .cat::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:6px;vertical-align:middle;background:currentColor;
}
.feed .ev.call   .cat{color:var(--info)}
.feed .ev.door   .cat{color:var(--ok)}
.feed .ev.motion .cat{color:var(--warn)}
.feed .ev.status .cat{color:var(--muted)}
.feed .ev.is-new{animation:evflash 1s ease-out}
@keyframes evflash{from{background:var(--gold-100)}to{background:transparent}}

/* ---- empty state ---- */
.empty{grid-column:1/-1;text-align:center;padding:var(--sp-6);color:var(--muted)}

/* ============================================================
   Dashboard — Health Board
   ============================================================ */
.health-strip{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.stat{flex:1 1 130px;min-width:118px;display:flex;flex-direction:column;gap:2px;
  padding:11px 14px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.stat__num{font-size:26px;font-weight:800;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.stat__lbl{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.stat--ok{border-left-color:var(--ok)}
.stat--bad{border-left-color:var(--bad)}
.stat--warn{border-left-color:var(--warn)}
/* zero offline/errors read calm, not alarming */
.stat--bad[data-zero] .stat__num,.stat--warn[data-zero] .stat__num{color:var(--muted)}
.stat--bad[data-zero],.stat--warn[data-zero]{border-left-color:var(--line-strong)}

.board{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-5);align-items:start}
.board__feed{position:sticky;top:var(--sp-4)}

.triage-group{margin-bottom:var(--sp-5)}
.triage-head{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:800;margin:0 0 var(--sp-2);display:flex;align-items:center;gap:8px}
.triage-group--attn .triage-head{color:var(--bad)}
.triage-count{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:0 8px;font-size:var(--fs-xs);font-weight:700}
.triage-group--attn .triage-count{background:var(--bad-bg);color:#8a1f1f;border-color:#e6a9a4}
.triage-toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px}
.caret{font-size:11px;transition:transform .15s}
[data-group-body].is-collapsed{display:none}
.triage-toggle[aria-expanded="false"] .caret{transform:rotate(-90deg)}

.device-row{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);margin-bottom:var(--sp-2);overflow:hidden}
.device-row.row--up{border-left-color:var(--ok)}
.device-row.row--down{border-left-color:var(--bad)}
.device-row__head{display:flex;align-items:center;gap:var(--sp-2);padding:9px 14px}
.device-row__name{color:var(--navy);font-size:15px;font-weight:600;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-row__sess{margin-left:auto;font-size:var(--fs-sm);flex:none}
.device-row__act{display:flex;gap:6px;align-items:center;flex:none}
.device-row__act .small{min-width:32px;justify-content:center}
.device-row__act form.inline{display:inline-flex}
.device-row__detail{padding:2px 14px 10px;border-top:1px solid var(--line);background:var(--surface-2)}
.device-row__detail .tile-row{padding:3px 0}
/* NVR rows on the board (registrars): right-aligned cluster (sessions, host, links) */
.device-row__right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.device-row__meta{color:var(--muted);font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap}
.device-row__act a[role=button]{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;min-height:28px;padding:5px 8px;font-size:15px;line-height:1;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--navy);cursor:pointer;text-decoration:none}
.device-row__act a[role=button]:hover{background:var(--surface-2);border-color:#aab4c6}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:720px){
  .topbar{padding:0 var(--sp-3);gap:var(--sp-2);height:auto;min-height:54px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .topbar nav{order:3;flex-basis:100%;overflow-x:auto;padding-bottom:2px}
  .who{margin-left:auto}
  .wrap{padding:var(--sp-4) var(--sp-3) 48px}
  .two{grid-template-columns:1fr}
  /* tables → stacked labelled cards (no horizontal overflow on phones) */
  table.grid{border:none;background:transparent;box-shadow:none;overflow:visible}
  .grid thead{position:absolute;left:-9999px}
  .grid tbody,.grid tr,.grid td{display:block;width:100%}
  .grid tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--shadow-1);margin-bottom:var(--sp-3);padding:6px 0}
  .grid tr.row--off td{opacity:1}
  .grid tr.row--off{opacity:.6}
  .grid td{border:none;padding:5px 14px;display:block;overflow-wrap:anywhere}
  .grid td:first-child{font-size:var(--fs-md)}
  .grid td::before{content:attr(data-label);display:block;color:var(--muted);font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-xs);margin-bottom:1px}
  .grid td.actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;padding-top:8px}
  .grid td.actions::before{display:none}
  /* page header: title + primary action stack cleanly, no overflow */
  .page-head{flex-direction:column;align-items:stretch;gap:var(--sp-3);
    margin-bottom:var(--sp-4);padding-bottom:var(--sp-4)}
  .page-head h1{font-size:20px}
  .page-head .btn-add{width:100%;justify-content:center;padding-top:10px;padding-bottom:10px}
  /* health board: single column, tighter strip, wrapping rows */
  .health-strip{gap:var(--sp-2)}
  .stat{flex:1 1 44%;padding:9px 11px}
  .stat__num{font-size:22px}
  .board{grid-template-columns:1fr;gap:var(--sp-4)}
  .board__feed{position:static}
  .device-row__head{flex-wrap:wrap}
  .device-row__name{flex:1 1 auto}
  .device-row__sess{margin-left:0}
  .device-row__act{margin-left:auto}
}
@media (max-width:420px){
  .tiles{grid-template-columns:1fr}
  h1{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   Camera detail: header actions + snapshot tile
   ============================================================ */
.cam-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.cam-head__actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.tile--frame .tile-head button{margin-left:auto}
/* Frame box keeps the camera's own aspect (--frame-ar from main stream, then the
   real JPEG): 16:9, 4:3, PAL 704×576, 1:1 fisheye, corridor 9:16. Height is capped
   so square/portrait frames don't blow up the row; panoramas span the full row. */
.frame{
  position:relative;aspect-ratio:var(--frame-ar,16/9);max-height:320px;width:100%;
  margin:0 auto;background:#0b1730;border-radius:var(--r-sm);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.frame img{width:100%;height:100%;object-fit:contain;display:block}
.frame__msg{position:absolute;color:#aab4c6;font-size:var(--fs-sm);text-align:center;padding:var(--sp-3)}
.frame[data-state="loading"] .frame__msg{animation:frame-pulse 1.4s ease-in-out infinite}
.frame[data-state="error"] .frame__msg{color:#f3a3a3}
.frame[data-state="ok"] .frame__msg{display:none}
@keyframes frame-pulse{50%{opacity:.45}}
.tile--frame.is-tall .frame{max-height:420px}
.tile--frame.is-wide{grid-column:1/-1}
.tile--frame.is-wide .frame{max-height:260px}
@media (prefers-reduced-motion:reduce){.frame[data-state="loading"] .frame__msg{animation:none}}
.cam-head__actions form.inline{display:inline-flex}

/* Snapshot lightbox: full-size frame with zoom/pan */
.tile--frame .frame[data-state="ok"]{cursor:zoom-in}
.lb__box{width:96vw;height:92vh;max-height:none}
.lb__zoom{display:flex;gap:6px;align-items:center}
.lb__zoom .mono{min-width:48px;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
.lb__stage{position:relative;flex:1;overflow:hidden;background:#000;cursor:grab;touch-action:none}
.lb__stage.is-drag{cursor:grabbing}
.lb__stage img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none}
@media (max-width:720px){.lb__box{width:100vw;height:100vh}.lb__zoom [data-lb="one"],.lb__zoom [data-lb="reload"]{display:none}}