/* CHUV Dashboard — Armoire B3 live sensor view
   Based on Remouvery kit.css. Tokens from colors_and_type.css (loaded separately). */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--clairvoyant);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
[data-lucide]{width:20px;height:20px;stroke-width:1.6}
:root{ --rule:#D0CFE0; }

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;gap:18px;
  background:#fff;border-bottom:1px solid var(--rule);
  padding:0 28px;height:64px;position:sticky;top:0;z-index:20;
}
.topbar .logo{height:19px;width:auto}
.divider{width:1px;height:26px;background:var(--rule)}
.estab{
  display:flex;align-items:center;gap:9px;background:var(--neutre);
  border:1px solid transparent;border-radius:var(--r-pill);
  padding:9px 16px;font-size:14px;font-weight:500;color:var(--clairvoyant);
}
.spacer{flex:1}
.iconbtn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-pill);
  border:none;background:transparent;color:var(--median);position:relative;transition:background .18s;
}
.iconbtn:hover{background:var(--neutre);color:var(--clairvoyant)}
.badge{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:999px;background:var(--clairvoyant);border:2px solid #fff}
.avatar{
  width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:var(--clairvoyant);color:var(--neutre);font-size:13px;font-weight:600;
}

/* ---- module tab ---- */
.tabs{display:flex;gap:4px;background:#fff;border-bottom:1px solid var(--rule);padding:0 28px}
.tab{
  position:relative;display:flex;align-items:center;gap:9px;border:none;background:transparent;
  padding:16px 18px 14px;font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--pur);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab .sub{font-weight:400;letter-spacing:0;font-size:13px;color:var(--pur)}
.tab.active{color:var(--clairvoyant);border-bottom-color:var(--clairvoyant)}
.tab.active .sub{color:var(--median)}

/* ---- page ---- */
.page{max-width:1180px;margin:0 auto;padding:28px;display:flex;flex-direction:column;gap:20px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between}
.pagehead .eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pur);margin-bottom:7px}
.pagehead h1{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:0}
.pagehead .date{font-size:14px;color:var(--median)}

/* ---- status pill (header area) ---- */
.status-row{display:flex;align-items:center;gap:12px}
.statuspill{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:999px;background:var(--neutre);color:var(--clairvoyant);
}
.statuspill.out{background:var(--clairvoyant);color:#fff}
.statuspill .d{width:9px;height:9px;border-radius:999px;background:currentColor}

/* ---- kpi ---- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kpi{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:20px 22px;box-shadow:var(--shadow-sm)}
.kpi .lab{font-size:14px;color:var(--median);font-weight:500;display:flex;align-items:center;gap:8px}
.kpi .val{font-size:44px;font-weight:700;letter-spacing:-.025em;margin-top:12px;line-height:1}
.kpi .val small{font-size:19px;font-weight:500;color:var(--median)}
.kpi .sub{font-size:13px;color:var(--pur);margin-top:9px}

/* ---- generic panel ---- */
.panel{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.panelhead{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--rule)}
.panelhead h2{font-size:20px;font-weight:700;margin:0;letter-spacing:-.01em}
.panelhead .vt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pur)}

/* ---- line items (armoire body) ---- */
.dbody{padding:24px;display:flex;flex-direction:column;gap:18px}
.linerow{display:flex;flex-direction:column;gap:7px}
.linerow .top{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.linerow .top .nm{font-weight:500;display:flex;align-items:center;gap:8px}
.linerow .top .q{color:var(--median);font-variant-numeric:tabular-nums}
.track{height:8px;border-radius:999px;background:var(--neutre);overflow:hidden}
.fill{height:100%;border-radius:999px;background:var(--clairvoyant);transition:width .6s cubic-bezier(.2,0,0,1)}
.fill.low{background:var(--st-low)}
.fill.critical{background:var(--clairvoyant)}

/* ---- live badge ---- */
.live-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--clairvoyant);padding:2px 8px;border-radius:999px;
}
.live-dot{
  width:6px;height:6px;border-radius:999px;background:#fff;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.3}
}

/* waiting state */
.waiting{color:var(--pur);font-style:italic;font-size:13px}

/* ---- sensor debug panel ---- */
.debug-panel{
  background:var(--clairvoyant-50);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:18px 22px;font-size:12px;color:var(--median);font-family:monospace;
}
.debug-panel h3{
  font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pur);margin:0 0 12px;
}
.debug-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.debug-row{display:flex;justify-content:space-between;gap:8px}
.debug-row .label{color:var(--pur)}
.debug-row .value{color:var(--clairvoyant);font-weight:600}
.debug-section{margin-bottom:8px}
.debug-section-title{font-weight:700;color:var(--clairvoyant);margin-bottom:4px;font-family:var(--font-sans)}

/* ---- error/connection banner ---- */
.conn-banner{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  border:none;border-radius:var(--r-md);padding:15px 20px;font-size:14px;font-weight:500;
}
.conn-banner.ok{background:var(--neutre);color:var(--clairvoyant)}
.conn-banner.error{background:var(--clairvoyant);color:#fff}
.conn-banner .dot{width:11px;height:11px;border-radius:999px;flex:none}
.conn-banner.ok .dot{background:var(--st-ok)}
.conn-banner.error .dot{background:#fff}

/* ---- alert ---- */
.alert{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--clairvoyant);color:#fff;border:none;
  border-radius:var(--r-md);padding:15px 20px;font-size:16px;font-weight:500;transition:filter .18s;
}
.alert:hover{filter:brightness(1.08)}
.alert .dot{width:11px;height:11px;border-radius:999px;background:#fff;flex:none}
.alert .chev{margin-left:auto;opacity:.8}

/* ---- legend ---- */
.legend{display:inline-flex;gap:18px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-pill);padding:9px 18px;font-size:14px}
.legend .it{display:flex;align-items:center;gap:8px;color:var(--median);font-weight:500}
.legend .dot{width:11px;height:11px;border-radius:999px}
.legend .it.inv{color:var(--clairvoyant)}
.legend .it.inv .dot{background:var(--clairvoyant);box-shadow:0 0 0 3px var(--neutre)}

/* ---- STOCK floor plan ---- */
.map{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.fp-wings{display:flex;justify-content:space-between;padding:0 6px 14px}
.fp-wings span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pur)}
.floorplan{position:relative;width:100%;aspect-ratio:1120/460}
.floorplan > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fp-marker{
  position:absolute;transform:translate(-50%,-50%);width:88px;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:7px 9px 8px;display:flex;flex-direction:column;gap:5px;text-align:left;
  box-shadow:var(--shadow-sm);transition:all .16s cubic-bezier(.2,0,0,1);
}
.fp-marker:hover{border-color:var(--clairvoyant);box-shadow:var(--shadow-md);transform:translate(-50%,-50%) scale(1.05);z-index:6}
.fp-marker.sel{border-color:var(--clairvoyant);box-shadow:var(--shadow-focus);z-index:6}
.fp-marker .r1{display:flex;align-items:center;justify-content:space-between}
.fp-marker .nm{font-size:12px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:4px}
.fp-marker .dot{width:9px;height:9px;border-radius:999px;flex:none}
.fp-marker .pct{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.fp-marker .mini{height:4px;border-radius:999px;background:var(--neutre);overflow:hidden}
.fp-marker .mini i{display:block;height:100%;border-radius:999px;background:var(--clairvoyant)}
.fp-marker.out{background:var(--clairvoyant);border-color:var(--clairvoyant)}
.fp-marker.out .nm,.fp-marker.out .pct{color:#fff}
.fp-marker.out .dot{background:#fff}
.fp-marker.out .mini{background:rgba(255,255,255,.28)}
.fp-marker.out .mini i{background:#fff}
.fp-reserve{
  position:absolute;transform:translate(-50%,-50%);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;
}
.fp-reserve .tg{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--median)}
.fp-reserve .ic{color:var(--median)}

/* live dot on floor plan marker */
.live-dot-sm{
  width:5px;height:5px;border-radius:999px;background:var(--clairvoyant);
  animation:pulse 1.5s ease-in-out infinite;display:inline-block;
}
.fp-marker.out .live-dot-sm{background:#fff}

/* ---- drawer ---- */
.scrim{position:fixed;inset:0;background:rgba(26,30,51,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:440px;max-width:92vw;background:#fff;z-index:40;
  box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .26s cubic-bezier(.2,0,0,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer .dh{padding:24px;display:flex;align-items:flex-start;justify-content:space-between}
.drawer .dh .zl{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pur)}
.drawer .dh h3{font-size:24px;font-weight:700;margin:6px 0 0;letter-spacing:-.01em}
.eink{margin:0 24px;margin-top:18px;background:#EDEDF2;border:1px solid var(--rule);border-radius:var(--r-sm);padding:12px 14px;display:flex;align-items:center;gap:10px;color:var(--median);font-size:12.5px}
.eink b{color:var(--clairvoyant);font-weight:600}
.closebtn{border:none;background:transparent;color:var(--median);display:grid;place-items:center;width:36px;height:36px;border-radius:999px}
.closebtn:hover{background:var(--neutre)}
.dfoot{padding:20px 24px;border-top:1px solid var(--rule)}
.btn-primary{width:100%;background:var(--clairvoyant);color:var(--neutre);border:none;border-radius:var(--r-pill);padding:14px;font-size:15px;font-weight:500;transition:background .18s}
.btn-primary:hover{background:var(--clairvoyant-900)}

/* ---- debug panel inside drawer ---- */
.debug-drawer{
  padding:18px 24px;border-top:1px solid var(--rule);
  font-size:12px;color:var(--median);font-family:monospace;
}
.debug-drawer h3{
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pur);margin:0 0 10px;
}

/* ---- collapsible diagnostic toggle ---- */
.diag-toggle{border-top:1px solid var(--rule);margin-top:auto}
.diag-btn{
  display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;
  padding:14px 24px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pur);cursor:pointer;transition:color .16s;
}
.diag-btn:hover{color:var(--median)}
.diag-body{
  padding:0 24px 18px;font-size:12px;color:var(--median);font-family:monospace;
}

/* ---- separator ---- */
.sep{height:1px;background:var(--rule);margin:4px 0}

/* ---- mobile responsive ---- */
@media (max-width: 768px) {
  .topbar{padding:0 16px;gap:12px}
  .topbar .logo{height:16px}
  .estab{padding:7px 12px;font-size:12px}
  .iconbtn{width:34px;height:34px}
  .avatar{width:32px;height:32px;font-size:11px}
  .page{padding:16px;gap:14px}
  .kpis{grid-template-columns:1fr;gap:10px}
  .kpi{padding:14px 16px}
  .kpi .val{font-size:32px;margin-top:8px}
  .kpi .val small{font-size:15px}
  .kpi .lab{font-size:13px}
  .alert{padding:12px 16px;font-size:14px;gap:10px}
  .panelhead{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .panelhead h2{font-size:17px}
  .legend{padding:6px 12px;font-size:12px;gap:12px}
  .legend .dot{width:9px;height:9px}
  .map{padding:16px}
  .fp-wings span{font-size:10px;letter-spacing:.1em}
  .floorplan{aspect-ratio:auto;height:auto;overflow-x:auto;overflow-y:hidden;min-height:280px}
  .floorplan > svg{position:relative;min-width:700px}
  .fp-marker{width:72px;padding:5px 7px 6px;gap:3px}
  .fp-marker .nm{font-size:10px}
  .fp-marker .pct{font-size:13px}
  .fp-marker .mini{height:3px}
  .fp-reserve .tg{font-size:8px}
  .drawer{width:100%;max-width:100%}
  .drawer .dh{padding:18px 16px}
  .drawer .dh h3{font-size:20px}
  .dbody{padding:16px;gap:14px}
  .linerow .top{font-size:13px}
  .debug-grid{grid-template-columns:1fr;gap:12px}
  .diag-btn{padding:12px 16px}
}