/* VIR demo. The colours and shapes are VIR's own (shell.css, kiosk.css, floor.css), so the demo
   looks like the real thing; the demo bar and the guide around it are the only additions. */
:root{
  --bg:#0b0f17; --bg-glow:#1f2937;
  --surface-rgb:17,24,39; --surface-2:#0b1220; --panel2:#0f172a;
  --border:#1f2937; --text:#e5e7eb; --muted:#9ca3af;
  --accent:#22c55e; --accent-rgb:34,197,94; --on-accent:#08150d;
  --danger:#ef4444; --danger-text:#f87171; --overlay-rgb:255,255,255;
  --ok-bg:rgba(34,197,94,.15); --ok-text:#4ade80;
  --warn-bg:rgba(245,158,11,.15); --warn-text:#fbbf24;
  --danger-bg:rgba(239,68,68,.15); --danger-pill-text:#f87171;
  --neutral-bg:rgba(148,163,184,.15); --neutral-text:#94a3b8;
  --barH:58px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f6f8; --bg-glow:#e9ecf1;
  --surface-rgb:255,255,255; --surface-2:#eef0f3; --panel2:#eef0f3;
  --border:#d8dce3; --text:#111827; --muted:#5b6472;
  --accent:#16a34a; --accent-rgb:22,163,74;
  --danger:#dc2626; --danger-text:#b91c1c; --overlay-rgb:0,0,0;
  --ok-bg:rgba(22,163,74,.12); --ok-text:#15803d;
  --warn-bg:rgba(217,119,6,.14); --warn-text:#b45309;
  --danger-bg:rgba(220,38,38,.12); --danger-pill-text:#b91c1c;
  --neutral-bg:rgba(100,116,139,.14); --neutral-text:#475569;
  color-scheme:light;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* a pill or a flex box must still hide when told to */
html,body{ margin:0; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.45;
}
*{ scrollbar-width:thin; scrollbar-color:rgba(var(--overlay-rgb),.22) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:rgba(var(--overlay-rgb),.18); border-radius:999px; }
h1,h2,h3,h4{ margin:0; line-height:1.25; }
h2{ font-size:17px; }
p{ margin:6px 0; }
button{ font:inherit; color:inherit; }
input{ font:inherit; }
.ico{ width:18px; height:18px; flex:none; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }
.bad{ color:var(--danger-text); }
.good{ color:var(--ok-text); }
.r{ text-align:right; }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.logo{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none;
  border:1px solid var(--border); background:var(--surface-2); font-weight:900; color:var(--text);
}
.logo.sm{ width:32px; height:32px; border-radius:9px; font-size:12px; color:var(--accent); }
.logo.big{ width:56px; height:56px; border-radius:16px; font-size:20px; }

.btn{
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:600; font-size:13px; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{ border-color:rgba(var(--accent-rgb),.6); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover{ filter:brightness(1.07); }
.btn.danger{ background:var(--danger-bg); border-color:transparent; color:var(--danger-pill-text); }
.btn.sm{ padding:5px 10px; font-size:12px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.linkbtn{ border:0; background:none; padding:0; color:var(--accent); font-weight:600; font-size:12px; cursor:pointer; white-space:nowrap; }
.linkbtn:hover{ text-decoration:underline; }
.linkbtn.back{ margin:0; font-size:13px; align-self:flex-start; }

.pill{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; vertical-align:middle; }
.pill.ok{ background:var(--ok-bg); color:var(--ok-text); }
.pill.warn{ background:var(--warn-bg); color:var(--warn-text); }
.pill.danger{ background:var(--danger-bg); color:var(--danger-pill-text); }
.pill.neutral{ background:var(--neutral-bg); color:var(--neutral-text); }
.pill.outline{ background:transparent; border:1px solid currentColor; font-weight:600; }

/* ---------------------------------------------------------------- demo bar */
.dbar{
  position:sticky; top:0; z-index:50; height:var(--barH);
  display:flex; align-items:center; gap:14px; padding:0 16px;
  background:rgba(var(--surface-rgb),.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.dbrand{ display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; flex:none; }
.dbrand b{ font-size:16px; letter-spacing:.5px; }
.dtag{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.5); border-radius:6px; padding:1px 6px; }
.devices{ display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); flex:none; }
.dev{ display:flex; align-items:center; gap:7px; border:0; background:none; padding:7px 12px; border-radius:9px; cursor:pointer; color:var(--muted); font-weight:600; font-size:13px; white-space:nowrap; }
.dev:hover{ color:var(--text); }
.dev.on{ background:rgba(var(--accent-rgb),.14); color:var(--text); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4); }
.dnote{ color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.dtools{ margin-left:auto; display:flex; gap:6px; align-items:center; flex:none; }
.chip{
  height:34px; min-width:34px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text);
  font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;
}
.chip:hover{ border-color:rgba(var(--accent-rgb),.6); }
.chip.armed, .kbtn.armed{ border-color:var(--danger); color:var(--danger-text); }
.guideBtn.on{ border-color:rgba(var(--accent-rgb),.6); }
.guideBtn .count{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.guideBtn.pulse{ animation:pulse 1.2s ease 2; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.7); } 100%{ box-shadow:0 0 0 12px rgba(var(--accent-rgb),0); } }
@media (max-width:1100px){ .dnote{ display:none; } }
@media (max-width:820px){
  :root{ --barH:auto; }
  .dbar{ height:auto; flex-wrap:wrap; padding:8px 12px; gap:8px; }
  .devices{ order:3; width:100%; }
  .dev{ flex:1; justify-content:center; padding:7px 6px; font-size:12px; }
  .dev .ico{ display:none; }
  .guideBtn span:not(.count){ display:none; }
}
@media (max-width:420px){ .dtools [data-act=reset]{ display:none; } }

/* ---------------------------------------------------------------- page + guide */
.dbody{ display:block; }
body.guideOpen .dbody{ display:grid; grid-template-columns:minmax(0,1fr) 340px; }
@media (max-width:1199px){ body.guideOpen .dbody{ display:block; } }
.stage{ min-width:0; }
.guide{
  border-left:1px solid var(--border); background:rgba(var(--surface-rgb),.7);
  padding:18px 18px 28px; position:sticky; top:var(--barH); height:calc(100vh - var(--barH)); overflow:auto;
}
.guide[hidden]{ display:none; }
@media (max-width:1199px){
  .guide{ position:fixed; top:0; right:0; bottom:0; width:min(380px,100%); height:auto; z-index:60;
    background:rgb(var(--surface-rgb)); box-shadow:-20px 0 50px rgba(0,0,0,.35); }
}
.gHead{ display:flex; justify-content:space-between; align-items:center; }
.gHead h2{ font-size:18px; }
.gClose{ border:1px solid var(--border); background:var(--surface-2); border-radius:9px; width:32px; height:32px; cursor:pointer; }
.gIntro{ color:var(--muted); font-size:13px; }
.gBar{ height:6px; border-radius:999px; background:rgba(var(--overlay-rgb),.08); overflow:hidden; margin-top:12px; }
.gBar span{ display:block; height:100%; background:var(--accent); transition:width .4s ease; }
.gCount{ font-size:12px; color:var(--muted); }
.gList{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px; }
.gList li{ display:flex; gap:10px; padding:10px 6px; border-top:1px solid var(--border); }
.gList li:first-child{ border-top:0; }
.gTick{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--border); display:grid; place-items:center; font-size:12px; font-weight:800; margin-top:1px; }
.gList li.done .gTick{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.gList li.done b{ color:var(--muted); text-decoration:line-through; }
.gList p{ margin:3px 0 0; font-size:12.5px; color:var(--muted); }
.gList li.done p{ display:none; }
.gShow{ margin-top:6px; border:0; background:none; padding:0; color:var(--accent); font-weight:700; font-size:12.5px; cursor:pointer; }
.gShow:hover{ text-decoration:underline; }
.gDone{ margin-top:14px; padding:14px; border:1px solid rgba(var(--accent-rgb),.5); border-radius:12px; background:rgba(var(--accent-rgb),.08); }

/* ---------------------------------------------------------------- office */
.oapp{ display:grid; grid-template-columns:250px minmax(0,1fr); min-height:calc(100vh - var(--barH)); }
.oside{
  border-right:1px solid var(--border); background:rgba(var(--surface-rgb),.95);
  padding:14px; display:flex; flex-direction:column; gap:12px;
  position:sticky; top:var(--barH); height:calc(100vh - var(--barH)); overflow:auto;
}
.obrand{ display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:14px; background:rgba(var(--surface-rgb),.7); }
.obrand h1{ font-size:18px; letter-spacing:.5px; }
.obrand p{ margin:2px 0 0; color:var(--muted); font-size:12px; }
.onav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.onav button{
  display:flex; gap:10px; align-items:center; text-align:left; width:100%;
  padding:9px 10px; border-radius:12px; border:1px solid transparent; background:none; cursor:pointer; color:var(--text); font-size:14px;
}
.onav button:hover{ background:rgba(var(--overlay-rgb),.04); border-color:rgba(var(--overlay-rgb),.06); }
.onav button.active{ background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.25); }
.onav button .ico{ color:var(--muted); }
.onav button.active .ico{ color:var(--accent); }
.onavMore{ margin:12px 10px 2px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.onav button.locked{ color:var(--muted); font-size:13px; padding:6px 10px; justify-content:space-between; }
.onav button.locked .ico{ width:14px; height:14px; opacity:.6; }
.ofoot{ border-top:1px solid var(--border); padding-top:12px; display:flex; flex-direction:column; gap:10px; font-size:12px; color:var(--muted); }
.logout{ border:0; cursor:pointer; padding:10px 12px; border-radius:12px; background:var(--accent); color:var(--on-accent); font-weight:800; }
.omain{ min-width:0; display:flex; flex-direction:column; }
.otop{
  position:sticky; top:var(--barH); z-index:5;
  border-bottom:1px solid var(--border); background:rgba(var(--surface-rgb),.92); backdrop-filter:blur(8px);
  padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.otop strong{ display:block; font-size:14px; }
.otop span{ color:var(--muted); font-size:12px; }
.oclock{ font-variant-numeric:tabular-nums; }
.ocontent{ padding:18px; display:flex; flex-direction:column; gap:14px; }
.card{ border:1px solid var(--border); background:rgba(var(--surface-rgb),.65); border-radius:16px; padding:16px; max-width:1100px; width:100%; }
.card.wide{ max-width:none; }
.woHead{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.pills{ display:flex; gap:6px; flex-wrap:wrap; }
.sub{ font-size:14px; margin:16px 0 8px; }
.sub.first{ margin-top:0; }
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:6px; }
.facts > div{ border:1px solid var(--border); background:var(--panel2); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.facts span{ color:var(--muted); font-size:12px; }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; max-width:1100px; }
.tile{ border:1px solid var(--border); background:var(--panel2); border-radius:14px; padding:12px 14px; }
.tile h4{ font-size:12px; font-weight:600; color:var(--muted); }
.tile p{ margin:6px 0 0; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.tableWrap{ overflow-x:auto; max-width:100%; }
.table{ width:100%; border-collapse:collapse; font-size:13px; }
.table th{ text-align:left; color:var(--muted); font-weight:600; padding:8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.table td{ padding:9px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table.click tbody tr{ cursor:pointer; }
.table tbody tr:hover{ background:rgba(var(--overlay-rgb),.03); }
.table tr.dim td{ opacity:.55; }
.table tr.sum td{ border-bottom:0; }
.table th.r, .table td.r{ text-align:right; }
.mini{ display:inline-block; width:70px; height:6px; border-radius:999px; background:rgba(var(--overlay-rgb),.09); overflow:hidden; vertical-align:middle; margin-right:6px; }
.mini span{ display:block; height:100%; background:var(--accent); }
.mini.wide{ display:block; width:100%; margin:8px 0 6px; }
.check{ display:flex; gap:6px; align-items:center; color:var(--muted); font-size:13px; cursor:pointer; }

/* home */
.hhead{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.htitle{ font-size:14px; margin:14px 0 4px; }
.htitle.first{ margin-top:0; }
.hsec{ margin-top:10px; }
.hsec h4{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 2px; }
.hrow{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--border); }
.hsec .hrow:first-of-type{ border-top:0; }
.hdot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--neutral-text); }
.hdot.warn{ background:var(--warn-text); }
.hdot.danger{ background:var(--danger-text); }
.htext{ flex:1; min-width:0; }
.hsub{ color:var(--muted); font-size:12px; margin-top:2px; }

/* the route on a work order */
.route{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; }
.rleg{ display:flex; align-items:center; gap:6px; }
.rarrow{ color:var(--muted); }
.rstep{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); font-size:12px; }
.rstep.now{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.rstep.done{ opacity:.6; }
.rnum{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--border); color:var(--muted); font-size:11px; font-weight:700; }
.rstep.now .rnum{ background:var(--accent); color:var(--on-accent); }
.rm{ color:var(--muted); font-weight:600; }
.rm.down{ color:var(--danger-text); }
.vs{ margin-top:12px; }
.logRow{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--border); font-size:13px; }
.logRow:first-of-type{ border-top:0; }

/* quotes */
.markup{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0; padding:12px; border:1px solid rgba(var(--accent-rgb),.35); border-radius:12px; background:rgba(var(--accent-rgb),.05); }
.markup label{ font-weight:700; }
.markup input[type=range]{ width:min(320px,100%); accent-color:var(--accent); }
.markup output{ font-weight:800; font-size:18px; min-width:48px; font-variant-numeric:tabular-nums; }
.qprices th:first-child{ width:24%; }
.qprices td, .qprices th{ font-variant-numeric:tabular-nums; }
.qprices .sel{ background:rgba(var(--accent-rgb),.07); }
.qtyBtn{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:9px; padding:4px 10px; font-weight:700; font-size:12px; cursor:pointer; }
.qtyBtn.on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.qtyBtn:disabled{ cursor:default; }
.qtyBtn.big{ padding:8px 14px; font-size:13px; }
.card > .btn.primary{ margin-top:12px; }

/* the job planner */
.pickBar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:10px; border-radius:12px; border:1px solid var(--accent); background:rgba(var(--accent-rgb),.08); font-weight:600; }
.pgrid{ border-collapse:separate; border-spacing:0; font-size:12px; min-width:1100px; width:100%; }
.pgrid th, .pgrid td{ border-bottom:1px solid var(--border); padding:7px; vertical-align:top; }
.pgrid thead th{ text-align:left; color:var(--muted); white-space:nowrap; font-weight:600; }
.pgrid thead th.today{ color:var(--accent); }
.pgrid td.today{ background:rgba(var(--overlay-rgb),.03); }
.pgrid .pm{ position:sticky; left:0; z-index:1; background:var(--bg); min-width:140px; white-space:nowrap; }
.pgrid .pm span{ display:block; color:var(--muted); font-size:11px; }
.pgrid .pm .pill{ margin-top:4px; }
.pgrid.picking td:not(.pm){ cursor:copy; }
.pgrid.picking td:not(.pm):hover{ background:rgba(var(--accent-rgb),.08); }
.pcell{ display:flex; flex-direction:column; gap:5px; min-height:52px; min-width:130px; }
.pcard{
  display:flex; flex-direction:column; gap:2px; text-align:left; width:100%;
  border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:9px; background:rgba(var(--surface-rgb),.9);
  padding:6px 8px; cursor:pointer; color:var(--text); font-size:12px;
}
.pcard .pcMeta{ color:var(--muted); font-size:11px; }
.pcard:hover{ border-color:rgba(var(--accent-rgb),.6); }
.pcard.picked{ box-shadow:0 0 0 2px var(--accent); }
.pcard.done{ opacity:.55; border-left-color:var(--neutral-text); }
.pcard.late{ border-left-color:var(--danger); }
.pcard.late .pcMeta{ color:var(--danger-text); }
.pcard.held{ border-left-color:var(--warn-text); }
.pload{ margin-top:auto; color:var(--muted); font-size:11px; }
.pload.over{ color:var(--danger-text); font-weight:700; }
.pwait{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }

/* warehouse */
.recv{ display:flex; gap:6px; align-items:center; }
.recv input, .qcForm input, .kmat input{
  width:90px; padding:6px 8px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
}

/* quality control */
.qcRow{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--border); }
.qcRow:first-of-type{ border-top:0; }
.qcForm{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.qcForm label{ display:grid; gap:4px; font-size:11px; color:var(--muted); }
.qcForm input[type=text]{ width:180px; }

@media (max-width:900px){
  .oapp{ grid-template-columns:minmax(0,1fr); }   /* minmax(0,…): the scrolling nav must not widen the page */
  .oside{ min-width:0; position:static; height:auto; overflow:visible; padding:10px 12px; border-right:0; border-bottom:1px solid var(--border); gap:8px; }
  .obrand, .ofoot, .onavMore, .onav button.locked{ display:none; }
  .onav{ flex-direction:row; overflow-x:auto; gap:4px; }
  .onav button{ width:auto; white-space:nowrap; padding:7px 10px; font-size:13px; }
  .otop{ position:static; }
  .ocontent{ padding:12px; }
}

/* ---------------------------------------------------------------- kiosk */
.kiosk{
  min-height:calc(100vh - var(--barH)); padding:18px; display:flex; flex-direction:column; gap:14px;
  background:radial-gradient(1000px 600px at 50% -10%, var(--bg-glow) 0%, var(--bg) 60%);
  font-size:15px;
}
.kiosk > *{ width:100%; max-width:1180px; margin-left:auto; margin-right:auto; }
.khead{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.kbrand{ display:flex; gap:12px; align-items:center; cursor:pointer; border-radius:16px; padding:4px; user-select:none; }
.kbrand:hover{ background:rgba(var(--overlay-rgb),.06); }
.kbrand h1{ font-size:22px; }
.kbrand p{ margin:2px 0 0; color:var(--muted); font-size:12px; }
.kclock{ color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; padding-top:6px; }
.kcard{ border:1px solid var(--border); background:rgba(var(--surface-rgb),.75); border-radius:18px; padding:18px; }
.kcard h2{ font-size:19px; margin-bottom:4px; }
.kbtn{
  padding:13px 18px; border-radius:14px; border:1px solid transparent; cursor:pointer; font-weight:900; font-size:15px;
  background:var(--surface-2); border-color:rgba(var(--overlay-rgb),.10); color:var(--text);
}
.kbtn.primary{ background:var(--accent); color:var(--on-accent); border-color:transparent; }
.kbtn.danger{ background:var(--danger); color:#1a0505; border-color:transparent; }
.kbtn:disabled{ opacity:.4; cursor:not-allowed; }
.krow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ktop{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.kstatus{ width:min(360px,100%); padding:16px; font-size:13px; }
.kstatusHead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.kstatusHead b{ font-size:17px; }
.kline{ margin:3px 0; }
.kline b{ font-variant-numeric:tabular-nums; }
.kover{ color:var(--danger-text); font-weight:800; font-size:12px; margin:4px 0; }
.kstatus .krow{ margin-top:10px; }
.kstatus .kbtn{ padding:10px 14px; font-size:13px; }
.iconbtn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--danger); display:grid; place-items:center; cursor:pointer; }
.iconbtn:hover{ border-color:var(--danger); }
.kcenter{ display:grid; place-items:center; min-height:55vh; }
.loginCard{ width:min(720px,100%); text-align:center; }
.people{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:16px; }
.personBtn{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; border-radius:16px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; color:var(--text); }
.personBtn:hover{ border-color:var(--accent); }
.personBtn b{ font-size:16px; }
.personBtn .muted{ font-size:12px; }
.avatar{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(var(--accent-rgb),.15); color:var(--accent); font-weight:800; font-size:18px; }
.pinCard{ width:min(360px,100%); text-align:center; }
.pinDots{ display:flex; justify-content:center; gap:14px; margin:18px 0; }
.pinDots span{ width:16px; height:16px; border-radius:50%; border:2px solid var(--muted); }
.pinDots span.on{ background:var(--accent); border-color:var(--accent); }
.pinPad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.pinPad button{ height:62px; border-radius:16px; border:1px solid var(--border); background:var(--surface-2); font-size:22px; font-weight:800; cursor:pointer; color:var(--text); }
.pinPad button.alt{ font-size:14px; }
.pinPad button:hover{ border-color:var(--accent); }
.ksearch{ display:grid; gap:6px; color:var(--muted); font-size:12px; margin-top:10px; }
.ksearch input, .kmat input{
  padding:13px 12px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:16px; width:100%;
}
.kmat input{ width:110px; padding:11px; }
.wogrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:12px; }
.wocard{ display:flex; flex-direction:column; gap:4px; text-align:left; border:1px solid var(--border); background:rgba(var(--surface-rgb),.65); border-radius:14px; padding:12px; cursor:pointer; color:var(--text); }
.wocard:hover{ border-color:rgba(var(--overlay-rgb),.25); }
.wotop{ display:flex; justify-content:space-between; gap:8px; align-items:center; }
.wotitle{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wocard .muted{ font-size:12px; }
.wopills{ display:flex; gap:5px; flex-wrap:wrap; }
.kplan{ display:grid; gap:8px; margin-top:10px; }
.kplanRow{ display:grid; gap:2px; text-align:left; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(var(--overlay-rgb),.03); cursor:pointer; color:var(--text); }
.kplanRow:hover{ border-color:rgba(var(--overlay-rgb),.25); }
.kplanRow.done{ opacity:.6; }
.kplanRow .muted{ font-size:12px; }
.kbanner{ padding:14px 16px; border-radius:14px; font-weight:600; }
.kbanner.bad{ background:var(--danger-bg); color:var(--danger-pill-text); border:1px solid rgba(239,68,68,.4); }
.kbanner.warn{ background:var(--warn-bg); color:var(--warn-text); border:1px solid rgba(245,158,11,.35); }
.kop{ display:flex; justify-content:space-between; gap:14px; padding:14px 0; border-top:1px solid var(--border); align-items:center; flex-wrap:wrap; }
.kop:first-of-type{ border-top:0; }
.kop.dim .kopMain{ opacity:.5; }
.kopMain{ display:grid; gap:3px; min-width:0; }
.kopName{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:17px; }
.kopMain b[data-live]{ font-variant-numeric:tabular-nums; }
.kopBtns{ display:flex; gap:10px; }
.kmat{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--border); }
.kmat:first-of-type{ border-top:0; }
.kmach{ display:grid; gap:10px; padding:14px 0; border-top:1px solid var(--border); }
.kmach:first-of-type{ border-top:0; }
.kmachNote{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.kmachNote .ksearch{ flex:1; min-width:200px; margin:0; }
.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.seg button{ padding:11px 16px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-weight:800; cursor:pointer; }
.seg button.on.OPERATIONAL{ background:var(--ok-bg); border-color:var(--ok-text); color:var(--ok-text); }
.seg button.on.DOWN{ background:var(--danger-bg); border-color:var(--danger-text); color:var(--danger-pill-text); }
.seg button.on.MAINTENANCE{ background:var(--warn-bg); border-color:var(--warn-text); color:var(--warn-text); }
@media (max-width:640px){
  .kiosk{ padding:12px; }
  .kstatus{ width:100%; }
  .kopBtns{ width:100%; }
  .kopBtns .kbtn{ flex:1; }
}

/* ---------------------------------------------------------------- TV */
.tv{ min-height:calc(100vh - var(--barH)); padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.tvHead{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tvBrand{ display:flex; align-items:center; gap:12px; }
.tvBrand h1{ font-size:24px; }
.tvBrand p{ margin:0; color:var(--muted); font-size:13px; }
.tvRight{ display:flex; align-items:center; gap:18px; }
.live{ display:flex; align-items:center; gap:7px; color:var(--muted); font-size:14px; }
.live i{ width:10px; height:10px; border-radius:50%; background:var(--accent); animation:blink 2s infinite; }
@keyframes blink{ 50%{ opacity:.35; } }
.tvClock{ display:flex; flex-direction:column; align-items:flex-end; }
.tvClock b{ font-size:44px; line-height:1; font-variant-numeric:tabular-nums; }
.tvClock span{ color:var(--muted); font-size:13px; }
.alerts{ display:flex; gap:8px; flex-wrap:wrap; }
.alert{ background:var(--danger-bg); color:var(--danger-pill-text); font-weight:800; padding:8px 14px; border-radius:999px; font-size:15px; }
.alert.good{ background:var(--ok-bg); color:var(--ok-text); }
.tvCols{ display:grid; grid-template-columns:1.15fr 1.25fr .8fr; gap:16px; align-items:start; }
.tvCols h3{ display:flex; justify-content:space-between; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.mtGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mt{ border:1px solid var(--border); border-left:5px solid var(--neutral-text); background:rgba(var(--surface-rgb),.8); border-radius:16px; padding:14px 16px; min-height:170px; display:flex; flex-direction:column; gap:2px; }
.mt.run{ border-left-color:var(--accent); }
.mt.down{ border-left-color:var(--danger); background:var(--danger-bg); }
.mt.maint{ border-left-color:var(--warn-text); background:var(--warn-bg); }
.mtHead{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.mtHead b{ font-size:22px; letter-spacing:.5px; }
.mt .muted{ font-size:12.5px; }
.mtJob{ display:flex; flex-direction:column; margin:8px 0 0; font-size:13px; color:var(--muted); }
.mtJob b{ color:var(--text); font-size:15px; }
.mtNote{ margin-top:10px; font-weight:700; }
.mtTimer{ margin-top:auto; font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; }
.tvj{ border:1px solid var(--border); background:rgba(var(--surface-rgb),.8); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.tvjHead{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; align-items:center; font-size:14px; }
.tvp{ display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--border); background:rgba(var(--surface-rgb),.8); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.tvp > div{ display:flex; flex-direction:column; min-width:0; }
.tvp b{ font-size:16px; }
.tvp .muted{ font-size:12.5px; }
.tvpT{ font-variant-numeric:tabular-nums; }
/* The TV adapts to the room the stage really has (the guide can take 340px of the window). */
.stage{ container-type:inline-size; }
.mtHead b{ white-space:nowrap; }
.tvpList{ display:grid; gap:10px; }
.tvp{ margin-bottom:0; }
@container (max-width:1320px){
  .tvCols{ grid-template-columns:1fr 1fr; }
  .tvCols section:last-child{ grid-column:1 / -1; }
  .tvpList{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
}
@container (max-width:820px){
  .tv{ padding:12px; }
  .tvCols{ grid-template-columns:1fr; }
  .tvClock b{ font-size:30px; }
  .live{ display:none; }
}
@container (max-width:480px){ .mtGrid{ grid-template-columns:1fr; } .mt{ min-height:0; } }

/* ---------------------------------------------------------------- toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:80; max-width:min(560px, calc(100% - 32px));
  padding:12px 16px; border-radius:12px; border:1px solid var(--border); background:rgb(var(--surface-rgb)); color:var(--text);
  box-shadow:0 14px 40px rgba(0,0,0,.35); font-weight:600; font-size:14px;
}
.toast.ok{ border-color:rgba(var(--accent-rgb),.6); }
.toast.bad{ border-color:var(--danger); color:var(--danger-text); }
.toast[hidden]{ display:none; }