/* Lense Assist wallboard: one screen, no scrolling, readable from across a room.
   Sizes are tied to the screen (vw / vh), so the same page fills a 1080p TV and a 4K one. */
:root{
  --bg:#0b1220;--panel:#131c2e;--panel-2:#182338;--line:#25324b;
  --ink:#eef2f8;--muted:#93a4bd;--brand:#3FA69D;--teal-dark:#1F5F5A;
  --danger:#e5484d;--high:#f08a24;--caution:#e6c13a;--neutral:#8a95a8;--good:#3fb27f;
  --u:min(1vw,1.78vh); /* one unit: 1% of the width, or the 16:9 equivalent of the height */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;
  display:flex;flex-direction:column;gap:calc(var(--u)*.7);
  padding:calc(var(--u)*.9);overflow:hidden;height:100vh;
}
body.wb-idle{cursor:none}
h2{margin:0;font-family:Poppins,Inter,sans-serif;font-size:calc(var(--u)*1.25);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
h2 small{font-weight:500;color:var(--muted);font-size:.7em;margin-left:.5em}

/* ---------------- top bar ---------------- */
.wb-top{display:flex;align-items:center;gap:calc(var(--u)*1.6)}
.wb-brand{display:flex;align-items:center;gap:calc(var(--u)*.8)}
/* The lense.info wordmark, turned white the same way the website does it. */
.wb-brand img{height:calc(var(--u)*2.6);width:auto;display:block;filter:brightness(0) invert(1)}
.wb-brand strong{display:block;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:calc(var(--u)*1.05);letter-spacing:.45em;color:var(--brand);line-height:1.1}
.wb-brand small{display:block;font-size:calc(var(--u)*.72);letter-spacing:.18em;color:var(--muted);margin-top:.25em}
.wb-controls{display:flex;align-items:center;gap:calc(var(--u)*.8);margin-left:calc(var(--u)*1);transition:opacity .4s}
body.wb-idle .wb-controls{opacity:0;pointer-events:none}
.wb-pick{display:flex;align-items:center;gap:.6em;font-size:calc(var(--u)*.85);color:var(--muted)}
.wb-controls select,.wb-controls button,.wb-controls a{
  font:inherit;font-size:calc(var(--u)*.9);font-weight:600;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--line);border-radius:999px;padding:.5em .9em;cursor:pointer;text-decoration:none;
}
.wb-controls button:hover,.wb-controls a:hover{border-color:var(--brand);color:var(--brand)}
.wb-health{margin-left:auto;display:flex;align-items:center;gap:calc(var(--u)*.6)}
.wb-health-dot{width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);border-radius:50%;background:var(--caution);flex:none}
.wb-health.ok .wb-health-dot{background:var(--good)}
.wb-health.fault .wb-health-dot{background:var(--danger);animation:wb-pulse 1.2s infinite}
.wb-health strong{display:block;font-size:calc(var(--u)*1.05)}
.wb-health small{display:block;font-size:calc(var(--u)*.72);color:var(--muted)}
.wb-clock{text-align:right;line-height:1}
.wb-clock strong{display:block;font-family:Poppins,Inter,sans-serif;font-size:calc(var(--u)*3);font-weight:800;font-variant-numeric:tabular-nums}
.wb-clock small{display:block;font-size:calc(var(--u)*.85);color:var(--muted);margin-top:.35em}

.wb-banner{margin:0;background:#4a1f24;border:1px solid var(--danger);color:#ffd9db;border-radius:calc(var(--u)*.6);
  padding:.7em 1em;font-size:calc(var(--u)*1.1);font-weight:700;text-align:center}
.wb-banner[hidden]{display:none}
.wb-banner a{color:#fff}

/* ---------------- tiles ---------------- */
.wb-tiles{display:grid;grid-template-columns:repeat(4,1fr) 1.9fr;gap:calc(var(--u)*.7)}
.wb-tile{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*1.2);padding:calc(var(--u)*.8) calc(var(--u)*1.1);min-width:0}
.wb-tile span{display:block;font-size:calc(var(--u)*.95);color:var(--muted);font-weight:600}
.wb-tile strong{display:block;font-family:Poppins,Inter,sans-serif;font-size:calc(var(--u)*3.6);font-weight:800;line-height:1.05;margin-top:.08em;white-space:nowrap}
.wb-tile small{display:block;font-size:calc(var(--u)*.85);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-tile-wide strong{font-size:calc(var(--u)*2.7)}
.wb-tile.alarm{border-color:var(--danger);background:#2a1418}
.wb-tile.alarm strong{color:#ff6b70}

/* ---------------- map and alert list ---------------- */
.wb-main{flex:1 1 0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:calc(var(--u)*.7);min-height:0}
.wb-map-wrap{position:relative;border:1px solid var(--line);border-radius:calc(var(--u)*.8);overflow:hidden;min-height:0}
#wbMap{position:absolute;inset:0;background:#1a2233}
.wb-map-label{position:absolute;left:calc(var(--u)*.8);bottom:calc(var(--u)*.8);z-index:500;background:rgba(11,18,32,.88);
  border:1px solid var(--line);border-radius:calc(var(--u)*.5);padding:.45em .8em;font-size:calc(var(--u)*1);font-weight:700}
.wb-map-label[hidden]{display:none}
.wb-map-label small{font-weight:500;color:var(--muted);margin-left:.6em}
.leaflet-container{font-family:Inter,Arial,sans-serif}
.wb-pin{border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.wb-pin.critical{animation:wb-ring 1.4s infinite}

.wb-side{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*.8);padding:calc(var(--u)*.9);
  display:flex;flex-direction:column;gap:calc(var(--u)*.6);min-height:0;overflow:hidden}
.wb-alerts{display:flex;flex-direction:column;gap:calc(var(--u)*.5);min-height:0;overflow:hidden}
.wb-alert{display:grid;grid-template-columns:calc(var(--u)*.45) minmax(0,1fr) auto;gap:calc(var(--u)*.8);align-items:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:calc(var(--u)*.6);padding:calc(var(--u)*.6) calc(var(--u)*.8)}
.wb-alert .bar{align-self:stretch;border-radius:calc(var(--u)*.3)}
.wb-alert strong{display:block;font-size:calc(var(--u)*1.25);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-alert small{display:block;font-size:calc(var(--u)*.9);color:var(--muted);margin-top:.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-alert .when{text-align:right;font-size:calc(var(--u)*.95);color:var(--muted);white-space:nowrap}
.wb-alert .when b{display:inline-block;font-size:calc(var(--u)*.72);font-weight:800;letter-spacing:.06em;border-radius:99em;padding:.25em .7em;margin-bottom:.35em;color:#fff}
.wb-alert .when b.crit{background:var(--danger)}
.wb-alert .when b.new{background:#2f6fed}
.wb-alert.critical{border-color:var(--danger);animation:wb-flash 2s infinite}
.wb-alert.fresh{border-color:#2f6fed}
.wb-empty{color:var(--muted);font-size:calc(var(--u)*1.1);padding:calc(var(--u)*1.5) 0;text-align:center}
.wb-empty strong{display:block;color:var(--good);font-size:calc(var(--u)*1.7);margin-bottom:.3em}

/* ---------------- queues ---------------- */
.wb-queues{display:flex;align-items:center;gap:calc(var(--u)*1.2);background:var(--panel);border:1px solid var(--line);
  border-radius:calc(var(--u)*.8);padding:calc(var(--u)*.7) calc(var(--u)*1.1);min-width:0}
.wb-queues h2{flex:none}
.wb-queue-list{display:flex;gap:calc(var(--u)*.7);min-width:0;flex:1;overflow:hidden}
.wb-queue{display:flex;align-items:center;gap:calc(var(--u)*.6);background:var(--panel-2);border:1px solid var(--line);
  border-radius:calc(var(--u)*.6);padding:calc(var(--u)*.45) calc(var(--u)*.8);min-width:0;flex:1 1 0}
.wb-queue i{width:calc(var(--u)*.45);height:calc(var(--u)*2.1);border-radius:calc(var(--u)*.3);flex:none}
.wb-queue div{min-width:0}
.wb-queue strong{display:block;font-size:calc(var(--u)*1.05);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-queue small{display:block;font-size:calc(var(--u)*.82);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-queue-none{color:var(--muted);font-size:calc(var(--u)*1)}
.wb-updated{flex:none;color:var(--muted);font-size:calc(var(--u)*.8);white-space:nowrap}
.wb-updated.stale{color:#ff8f93;font-weight:700}

@keyframes wb-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wb-flash{0%,100%{background:var(--panel-2)}50%{background:#3a1a1e}}
@keyframes wb-ring{0%{box-shadow:0 0 0 0 rgba(229,72,77,.8)}100%{box-shadow:0 0 0 14px rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.wb-alert.critical,.wb-pin.critical,.wb-health.fault .wb-health-dot{animation:none}}

/* A narrow window (a laptop or a phone rather than a TV): stack it and let it scroll. */
@media (max-width:900px){
  :root{--u:11px}
  body{height:auto;min-height:100vh;overflow:auto}
  .wb-main{flex:none}
  .wb-top{flex-wrap:wrap}
  .wb-tiles{grid-template-columns:1fr 1fr}
  .wb-tile-wide{grid-column:1/-1}
  .wb-main{grid-template-columns:1fr}
  .wb-map-wrap{height:55vh}
  .wb-queues{flex-wrap:wrap}
  .wb-queue-list{flex-wrap:wrap}
}

/* Lense look: a deep teal strip across the top, like the lense.info header bar. */
.wb-top{background:var(--teal-dark);margin:calc(var(--u)*-.9) calc(var(--u)*-.9) 0;padding:calc(var(--u)*.7) calc(var(--u)*.9)}
.wb-top .wb-brand strong{color:#BFE0DC}
.wb-top .wb-health small,.wb-top .wb-clock small,.wb-top .wb-pick{color:#cfe5e2}
.wb-controls select,.wb-controls button,.wb-controls a{background:rgba(11,18,32,.35);border-color:rgba(255,255,255,.18)}