/* ================================================================
   VFD Monitoring — Light industrial HMI theme
   ================================================================ */
:root{
  --bg:#e8ecf3;             /* app background              */
  --bg-2:#ffffff;           /* sidebar / raised surface    */
  --panel:#ffffff;          /* cards, panels               */
  --panel-2:#f1f5f9;        /* inset surfaces, table head  */
  --line:#cbd5e1;           /* borders — visible, not faint*/
  --txt:#0b1220;            /* primary text                */
  --txt-dim:#1e293b;        /* secondary text              */
  --txt-muted:#556074;      /* muted labels — still readable*/
  --amber:#ea8109;
  --amber-soft:rgba(234,129,9,.14);
  --cyan:#0e7490;
  --emerald:#059669;
  --red:#dc2626;
  --violet:#6d28d9;
  --shadow-sm:0 1px 3px rgba(15,23,42,.10),0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 6px 18px rgba(15,23,42,.13);
  --shadow-lg:0 14px 38px rgba(15,23,42,.16);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1100px 560px at 85% -12%, rgba(8,145,178,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(217,119,6,.06), transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace}

/* ---- layout ---------------------------------------------------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:248px;flex:0 0 248px;background:var(--bg-2);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:width .28s cubic-bezier(.4,0,.2,1),flex-basis .28s cubic-bezier(.4,0,.2,1);
  position:sticky;top:0;height:100vh;overflow:hidden;z-index:30;
}
.sidebar.collapsed{width:74px;flex-basis:74px}

/* Sidebar is HIDDEN by default; the floating arrow slides it in/out. */
.sidebar.hidden{width:0;flex-basis:0;border-right:none}
.side-arrow{
  position:fixed;left:10px;top:12px;z-index:60;
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);border:1px solid var(--line);color:#334155;
  cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:opacity .2s ease, transform .2s ease;
}
.side-arrow svg{width:18px;height:18px}
.side-arrow:hover{color:var(--txt);border-color:var(--txt-muted)}
.side-arrow.gone{opacity:0;pointer-events:none;transform:translateX(-8px)}
/* When the menu is hidden, keep page content clear of the floating arrow. */
.sidebar.hidden ~ .main .content{padding-left:3.4rem}
.brand{display:flex;align-items:center;gap:.7rem;padding:1.15rem 1.2rem;
  border-bottom:1px solid var(--line);white-space:nowrap}
.brand-mark{width:34px;height:34px;border-radius:9px;flex:0 0 34px;
  background:linear-gradient(135deg,var(--amber),#b45309);
  display:grid;place-items:center;color:#ffffff;font-weight:800;
  box-shadow:0 0 0 1px rgba(245,158,11,.35),0 8px 20px -8px rgba(245,158,11,.6)}
.brand-name{font-weight:700;letter-spacing:.02em;line-height:1.1;color:var(--txt)}
.brand-name small{display:block;color:var(--txt-dim);font-weight:500;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase}
.sidebar.collapsed .label-text,.sidebar.collapsed .brand-name{opacity:0;width:0;overflow:hidden}

.nav{padding:.5rem .5rem;display:flex;flex-direction:column;gap:.15rem;flex:1;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:.7rem;padding:.5rem .65rem;
  border-radius:8px;color:#334155;text-decoration:none;font-size:.82rem;
  font-weight:500;white-space:nowrap;transition:.15s;position:relative}
.nav a:hover{background:var(--panel-2);color:var(--txt)}
.nav a.active{background:var(--amber-soft);color:var(--amber)}
.nav-icon{font-size:.9rem;flex:0 0 18px;text-align:center;color:#94a3b8}
.nav a:hover .nav-icon,.nav a.active .nav-icon{color:inherit}
/* SVG icons in nav — fixed small size */
.nav a svg{
  width:15px;height:15px;flex-shrink:0;
  stroke-width:1.75;color:inherit;opacity:1;
}
.nav a:hover svg,.nav a.active svg{opacity:1}
.label-text{white-space:nowrap;color:inherit;font-size:.82rem}

.topbar-btn{background:transparent;border:1px solid var(--line);border-radius:9px;
  padding:.45rem .6rem;color:#334155;cursor:pointer;transition:.15s;font-size:.85rem}
.topbar-btn:hover{border-color:var(--txt-muted);color:var(--txt)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:1rem;padding:.9rem 1.5rem;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.topbar .crumb{color:var(--txt-dim);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;flex:1;font-weight:600}
.topbar .crumb a{color:var(--txt-muted);text-decoration:none}
.topbar .crumb a:hover{color:var(--txt)}
.topbar-right{display:flex;align-items:center;gap:.6rem}
.page-content{flex:1;padding:1.5rem;overflow-x:hidden}

/* ---- panels ---------------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.panel-h{padding:1.2rem 1.5rem .8rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem}
.panel-h h2{font-size:1.05rem;font-weight:700;color:var(--txt);margin:0}
.panel-h .sub{color:var(--txt-dim);font-size:.76rem}
.panel-body{padding:1.2rem 1.5rem}

/* ---- KPI tiles ------------------------------------------------- */
.kpi{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.2rem}
.kpi .k-label{display:flex;align-items:center;gap:.5rem;color:#334155;
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem}
.kpi .k-val{font-family:'JetBrains Mono','IBM Plex Mono',monospace;
  font-size:1.75rem;font-weight:800;line-height:1}
.kpi .k-unit{font-size:.95rem;color:#334155;margin-left:.25rem;font-weight:500}
.kpi.amber .k-val{color:var(--amber)}
.kpi.cyan  .k-val{color:var(--cyan)}
.kpi.green .k-val{color:var(--emerald)}
.kpi.red   .k-val{color:var(--red)}

/* ---- table grid ------------------------------------------------ */
table.grid{width:100%;border-collapse:separate;border-spacing:0}
table.grid th{text-align:left;padding:.7rem .9rem;color:#334155;
  font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap}
table.grid td{padding:.65rem .9rem;border-bottom:1px solid var(--line);
  font-size:.88rem;vertical-align:middle;color:var(--txt)}
table.grid tr:last-child td{border-bottom:none}
table.grid tr:hover td{background:var(--panel-2)}

/* ---- forms ----------------------------------------------------- */
label.fld{display:block;margin-bottom:.85rem}
label.fld span{display:block;font-size:.76rem;color:#334155;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem}
.form-input,.form-select{
  width:100%;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:.6rem .85rem;color:var(--txt);font-size:.9rem;
  transition:border-color .15s;outline:none;
  -webkit-appearance:none;
}
.form-input:hover,.form-select:hover{border-color:#94a3b8}
.form-input:focus,.form-select:focus{background:#fff;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.form-input::placeholder{color:var(--txt-muted)}
input[type="datetime-local"]{color-scheme:light}
select.form-input option,select option{background:#fff;color:var(--txt)}

/* ---- buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;
  border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--txt);
  transition:.15s;white-space:nowrap}
.btn:hover{border-color:#94a3b8}
.btn-primary{background:var(--amber);border-color:var(--amber);color:#ffffff;font-weight:700}
.btn-primary:hover{background:#e08b00;border-color:#e08b00}
.btn-secondary{background:#fff;border-color:var(--line);color:var(--txt);font-weight:600}
.btn-secondary:hover{border-color:var(--txt-muted)}
.btn-danger{background:#e11d48;border-color:#e11d48;color:#ffffff;font-weight:600}
.btn-danger:hover{background:#991b1b}

/* ---- badges ---------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .7rem;
  border-radius:999px;font-size:.72rem;font-weight:600}
.badge.green{background:rgba(52,211,153,.15);color:var(--emerald)}
.badge.amber{background:rgba(245,158,11,.15);color:var(--amber)}
.badge.red{background:rgba(244,63,94,.15);color:var(--red)}
.badge.gray{background:var(--panel-2);color:#334155}

/* ---- utils ----------------------------------------------------- */
.muted{color:var(--txt-dim)}
.empty{text-align:center;padding:3rem 1rem;color:var(--txt-dim)}

/* ---- toast ----------------------------------------------------- */
#toastArea{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;
  display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast-msg{padding:.7rem 1.1rem;border-radius:10px;font-size:.85rem;
  font-weight:600;backdrop-filter:blur(6px);animation:slideIn .2s ease;color:#ffffff}
.toast-msg.success{background:rgba(52,211,153,.2);border:1px solid rgba(52,211,153,.4)}
.toast-msg.error  {background:rgba(244,63,94,.2); border:1px solid rgba(244,63,94,.4)}
.toast-msg.info   {background:rgba(34,211,238,.2);border:1px solid rgba(34,211,238,.4)}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:none;opacity:1}}

/* ---- tailwind-like utilities used in templates ----------------- */
/* Text colours */
.text-white{color:var(--txt) !important}
.text-slate-300{color:#334155 !important}
.text-slate-400{color:#94a3b8 !important}
.text-slate-500{color:#64748b !important}
.text-amber-400{color:#fbbf24 !important}
.text-emerald-400{color:#34d399 !important}
.text-violet-400{color:#a78bfa !important}
.text-cyan-400{color:#0e7490 !important}
.text-orange-400{color:#fb923c !important}
.text-sky-400{color:#38bdf8 !important}
.text-red-400{color:#f87171 !important}
/* Backgrounds */
.bg-emerald-700{background:#047857}.bg-amber-700{background:#b45309}
.bg-emerald-900{background:#d1fae5}.bg-amber-900{background:#fef3c7}
.text-emerald-300{color:#6ee7b7}.text-amber-300{color:#fcd34d}
/* Spacing / layout shorthands */
.panel{background:var(--panel);border:1px solid var(--line)}
/* Table headers, labels, form elements all white */
th, label, select, input, textarea, option{color:var(--txt)}
select option{background:#fff;color:var(--txt)}

/* ================================================================
   COMPATIBILITY LAYER — classes used by existing templates / app.js
   ================================================================ */

/* .content = main page area (base.html uses this class) */
.content{flex:1;padding:1rem 1.5rem 1.5rem;overflow-x:hidden}

/* .inp = form input alias */
.inp{
  width:100%;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:.6rem .85rem;color:var(--txt);font-size:.9rem;
  transition:border-color .15s;outline:none;-webkit-appearance:none;
}
.inp:hover{border-color:#94a3b8}
.inp:focus{background:#fff;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.inp::placeholder{color:var(--txt-muted)}
input.inp[type="datetime-local"],input.inp[type="date"]{color-scheme:light}
select.inp option{background:#fff;color:var(--txt)}

/* .panel-pad = panel body padding */
.panel-pad{padding:1.2rem 1.5rem}

/* .btn variants */
.btn-amber{background:var(--amber);border-color:var(--amber);color:#ffffff;font-weight:700}
.btn-amber:hover{background:#e08b00;border-color:#e08b00;color:#ffffff}
.btn-ghost{background:transparent;border-color:var(--line);color:#334155}
.btn-ghost:hover{border-color:var(--txt-muted);color:var(--txt)}
.btn-sm{padding:.3rem .65rem;font-size:.75rem;border-radius:6px}
.btn-sm svg{width:13px;height:13px}

/* .badge variants */
.badge-role{background:rgba(245,158,11,.15);color:var(--amber);border:1px solid rgba(245,158,11,.3);
  display:inline-flex;align-items:center;padding:.18rem .55rem;border-radius:999px;
  font-size:.72rem;font-weight:600}
.badge-online{background:rgba(52,211,153,.15);color:var(--emerald)}
.badge-offline{background:rgba(148,163,184,.1);color:#94a3b8}

/* .grid-2 = two-column panel layout */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}

/* ── Modal overlay (used by openModal in app.js) ─────────────────── */
.modal-bg{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);
  backdrop-filter:blur(3px);z-index:9000;
  align-items:center;justify-content:center;padding:1rem;
}
.modal-bg.show{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
  box-shadow:0 25px 60px rgba(0,0,0,.6);
}
.modal .panel-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.25rem;border-bottom:1px solid var(--line);
}
.modal .panel-h h2{margin:0;font-size:1rem;font-weight:700;color:var(--txt)}
.modal .panel-pad{padding:1.25rem}
.modal label.fld span{color:var(--txt)}
.modal .flex{display:flex}
.modal .justify-end{justify-content:flex-end}
.modal .gap-2{gap:.5rem}
.modal .mt-2{margin-top:.5rem}

/* ── Sidebar footer collapse button ─────────────────────────────── */
.side-foot{padding:.7rem .6rem;border-top:1px solid var(--line)}

/* Header moved into the sidebar: page title, Live + clock, and the user row.
   With no top bar, the page content now starts at the very top and gets the
   full height of the window. */
.side-page{padding:.15rem 1.2rem .7rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.side-page .crumb{color:var(--txt-dim);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-page h1{margin:.15rem 0 0;font-size:1.05rem;font-weight:700;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-status{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:0 1.2rem .75rem}
.side-status .pill{font-size:.72rem}
.side-user{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  padding:.1rem .3rem .6rem}
.side-user-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar.collapsed .side-page{display:none}
.sidebar.collapsed .side-status{padding:0 0 .6rem;justify-content:center}
.sidebar.collapsed .side-status .clock{display:none}
.sidebar.collapsed .side-user{justify-content:center;gap:.3rem}
.sidebar.collapsed .side-user .badge-role{display:none}
.toggle-btn{
  display:flex;align-items:center;gap:.7rem;padding:.45rem .65rem;
  background:transparent;border:none;border-radius:8px;color:#94a3b8;
  cursor:pointer;font-size:.82rem;font-weight:500;width:100%;
  transition:.15s;white-space:nowrap;
}
.toggle-btn:hover{background:var(--panel-2);color:var(--txt)}
.toggle-btn svg{width:15px;height:15px;flex-shrink:0}
.sidebar.collapsed .side-foot .label-text{display:none}

/* ── pill / clock in topbar ──────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .7rem;
  border-radius:999px;font-size:.75rem;font-weight:600;
  background:var(--panel-2);border:1px solid var(--line);color:#334155}
.pill .dot{width:6px;height:6px;border-radius:50%;background:#94a3b8}
.pill .dot.live{background:var(--emerald);box-shadow:0 0 6px var(--emerald)}
.clock{font-family:'JetBrains Mono',monospace;letter-spacing:.05em}
.topbar h1{margin:0;font-size:1.1rem;font-weight:700;color:var(--txt)}

/* ================================================================
   SCADA-style professional device cards
   ================================================================ */
.scada-card{
  position:relative;
  min-height:var(--scada-card-minh, 160px);
  display:flex;
  flex-direction:column;
  background:linear-gradient(155deg,#0f172a 0%,#f8fafc 55%,#ffffff 100%);
  border:1px solid #283750;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  box-shadow:0 2px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
}
.scada-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(0,0,0,.55), 0 0 0 1px var(--accent);
}
.scada-card-top{
  height:3px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.scada-card-body{padding:11px 12px}
.scada-status{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9px;font-weight:800;letter-spacing:.5px;
  padding:2px 7px;border-radius:999px;
}
.scada-status.on{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.35)}
.scada-status.off{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.4)}
/* Offline card → red border + subtle red glow */
.scada-card.offline{
  border-color:#ef4444 !important;
  box-shadow:0 2px 10px rgba(239,68,68,.25), inset 0 1px 0 rgba(255,255,255,.03);
}
.scada-card.offline .scada-dot{box-shadow:0 0 6px #f87171}
.scada-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.scada-status.on .scada-dot{box-shadow:0 0 6px #34d399;animation:scadaPulse 1.6s infinite}
@keyframes scadaPulse{0%,100%{opacity:1}50%{opacity:.35}}
.scada-kpi{
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(0,0,0,.18));
  border:1px solid #283750;
  border-top:2px solid var(--c);
  border-radius:6px;padding:6px 4px;text-align:center;
}
.scada-kpi-val{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:14px;color:var(--c);line-height:1.1;
  text-shadow:0 0 12px color-mix(in srgb, var(--c) 45%, transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scada-kpi-lbl{font-size:8.5px;color:#8693a8;text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
/* Voltage / Current footer — aligned rows with icon + label */
.scada-card-foot{
  margin-top:9px;padding-top:8px;border-top:1px solid #f1f5f9;
  display:flex;flex-direction:column;gap:4px;
}
.scada-foot-row{
  display:flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
}
.scada-foot-ico{
  width:16px;height:16px;flex:none;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
.scada-foot-ico.v{background:rgba(56,189,248,.15);color:#38bdf8}
.scada-foot-ico.a{background:rgba(251,146,60,.15);color:#fb923c}
.scada-foot-val{flex:1;letter-spacing:.3px}
.scada-foot-val.v{color:#7dd3fc}
.scada-foot-val.a{color:#fdba74}
.scada-foot-unit{color:#64748b;font-size:9px}

/* ================================================================
   Device Live Dashboard — grouped metric sections
   ================================================================ */
.dash-group{
  background:linear-gradient(155deg,#f4f6fa00,#ffffff);
  border:1px solid #f1f5f9;
  border-left:3px solid var(--ga,#94a3b8);
  border-radius:8px;
  overflow:hidden;
}
.dash-group-head{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ga,#475569);
  background:rgba(255,255,255,.02);
  border-bottom:1px solid #eef2f7;
}
.dash-group-body{padding:6px 12px}
.dash-metric{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;
  border-bottom:1px solid #0f172a;
}
.dash-group-body .dash-metric:last-child{border-bottom:none}
.dash-metric-name{
  flex:1;color:#94a3b8;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dash-metric-val{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;
  color:#0f172a;text-align:right;min-width:70px;
}
.dash-metric-unit{color:#64748b;font-size:10px;min-width:18px}

/* ================================================================
   Interactive dashboard polish
   ================================================================ */
/* Hero tiles glow + lift on hover */
#heroGrid .scada-kpi{
  transition:transform .15s, box-shadow .15s, border-color .15s;
  cursor:default;
  position:relative;
}
#heroGrid .scada-kpi:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 1px var(--c);
}
.scada-kpi-val{transition:color .2s}
/* Smooth value update flash */
@keyframes valFlash{0%{filter:brightness(1.6)}100%{filter:brightness(1)}}
.val-flash{animation:valFlash .4s ease-out}
/* Metric rows highlight on hover */
.dash-metric{transition:background .12s;border-radius:4px;padding-left:6px;padding-right:6px}
.dash-metric:hover{background:rgba(255,255,255,.04)}
.dash-metric-val{transition:color .2s}
/* Group hover accent */
.dash-group{transition:box-shadow .15s,border-color .15s}
.dash-group:hover{box-shadow:0 4px 16px rgba(0,0,0,.35)}
/* Live pulse dot in group headers */
.dash-group-head::after{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--ga,#94a3b8);margin-left:auto;
  box-shadow:0 0 6px var(--ga,#94a3b8);
  animation:scadaPulse 2s infinite;
}

/* ================================================================
   Card arrange mode (admin drag-reorder)
   ================================================================ */
#deptDevCards.arranging .scada-card{
  cursor:grab;
  border-style:dashed;
  border-color:#f59e0b;
}
#deptDevCards.arranging .scada-card:active{cursor:grabbing}
#deptDevCards .scada-card.dragging{
  opacity:.5;
  outline:2px dashed #f59e0b;
}
#deptDevCards.arranging .scada-card::before{
  content:'⇅ drag';
  position:absolute;top:4px;right:6px;z-index:2;
  font-size:9px;color:#f59e0b;font-weight:700;
  pointer-events:none;
}

/* Departments overview tiles — arrange/reorder affordance */
#deptCards.arranging > div{
  cursor:grab;
  border-style:dashed !important;
  border-color:#f59e0b !important;
}
#deptCards.arranging > div:active{cursor:grabbing}
#deptCards.arranging > div .dt-actions{pointer-events:none;opacity:.45}
#deptCards.arranging > div .flex.gap-1\.5{pointer-events:none;opacity:.45}
#deptCards > div.dragging{opacity:.5;outline:2px dashed #f59e0b}

/* ================================================================
   SLD node selection highlight
   ================================================================ */
.sld-node.sld-selected{
  outline:2px solid #f59e0b;
  outline-offset:3px;
  border-radius:8px;
  box-shadow:0 0 0 4px rgba(245,158,11,.15);
}

/* ================================================================
   PROFESSIONAL SCADA REFRESH — instrument-panel aesthetic
   (departments list, department detail, device detail)
   ================================================================ */

/* ---- Department overview tiles ---------------------------------- */
.dept-tile{
  position:relative;
  background:linear-gradient(160deg,#f1f5f9 0%,#ffffff 100%);
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:16px 16px 14px;
  min-height:var(--dept-card-minh,168px);
  display:flex;flex-direction:column;
  transition:transform .16s cubic-bezier(.4,0,.2,1),
             border-color .16s, box-shadow .16s;
  overflow:hidden;
}
.dept-tile::before{           /* top accent hairline in the dept colour */
  content:'';position:absolute;left:0;top:0;right:0;height:2px;
  background:var(--tile-accent,#f59e0b);opacity:.85;
}
.dept-tile:hover{
  transform:translateY(-3px);
  border-color:var(--tile-accent,#f59e0b);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8),
             0 0 0 1px var(--tile-accent,#f59e0b)33;
}
.dept-tile .dt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:2px}
.dept-tile .dt-name{font-weight:700;letter-spacing:.01em;line-height:1.2;
  color:#0f172a;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dept-tile .dt-desc{color:#64748b;font-size:11px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* status LED */
.dt-led{width:9px;height:9px;border-radius:50%;flex:none;margin-top:4px;
  background:#3f4756;box-shadow:0 0 0 3px rgba(63,71,86,.18)}
.dt-led.on{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.22);
  animation:dtpulse 2.4s ease-in-out infinite}
@keyframes dtpulse{0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.22)}
  50%{box-shadow:0 0 0 5px rgba(52,211,153,.05)}}

/* SLD interactive: current-flow animation on energized wires */
@keyframes sldFlow{0%{background-position:0 0}100%{background-position:24px 24px}}
/* SLD interactive: alarm blink (breaker trip / fault) */
@keyframes sldAlarm{0%,100%{box-shadow:0 0 0 2px rgba(239,68,68,.9),0 0 14px rgba(239,68,68,.7);border-color:#ef4444}
  50%{box-shadow:0 0 0 2px rgba(239,68,68,.15),0 0 4px rgba(239,68,68,.2);border-color:#7f1d1d}}
.sld-alarm{animation:sldAlarm 1s ease-in-out infinite}
/* SLD interactive: energized glow (steady) */
.sld-energized{box-shadow:0 0 0 1px rgba(16,185,129,.6),0 0 12px rgba(16,185,129,.45)!important}

.dept-tile .dt-power{text-align:left;margin:12px 0 4px}
.dept-tile .dt-power .v{font-family:'JetBrains Mono',monospace;font-weight:800;
  font-size:30px;line-height:1;color:var(--tile-accent,#f59e0b);
  text-shadow:0 0 24px var(--tile-accent,#f59e0b)22}
.dept-tile .dt-power .u{font-size:11px;color:#64748b;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;margin-top:5px}

/* online meter bar */
.dt-online{margin:8px 0 12px}
.dt-online .row{display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;color:#8792a5;margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.dt-online .track{height:4px;border-radius:3px;background:#e2e8f0;overflow:hidden}
.dt-online .fill{height:100%;border-radius:3px;background:var(--tile-accent,#34d399);
  transition:width .4s ease}

.dt-actions{display:flex;gap:6px;margin-top:auto}
.dt-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-size:11px;font-weight:600;padding:7px 8px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--txt-dim);cursor:pointer;
  transition:.14s;text-decoration:none}
.dt-btn:hover{border-color:var(--tile-accent,#d97706);color:var(--txt);background:#f4f6fa}
.dt-btn.icon{flex:0 0 auto;padding:7px 9px}

/* ---- Department / device detail: section-header cards ----------- */
.inst-panel{
  background:linear-gradient(180deg,#ffffff 0%,#f1f5f9 100%);
  border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;
}
.inst-panel .ip-head{
  display:flex;align-items:center;gap:8px;
  padding:11px 15px;border-bottom:1px solid #e2e8f0;
  background:linear-gradient(180deg,#f8fafc,#ffffff);
}
.inst-panel .ip-head .ip-ico{font-size:13px}
.inst-panel .ip-head .ip-title{font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#64748b}
.inst-panel .ip-head .ip-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;
  background:#3f4756}
.inst-panel .ip-head .ip-dot.live{background:#34d399;box-shadow:0 0 8px #34d39988}
.inst-panel .ip-body{padding:6px 4px}

/* instrument reading rows (voltage / current / thd) */
.inst-row{display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-bottom:1px solid #f8fafc;transition:background .12s}
.inst-row:last-child{border-bottom:none}
.inst-row:hover{background:#f8fafc}
.inst-row .ir-label{font-size:12px;color:#8f9bb0;font-weight:500}
.inst-row .ir-val{font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:14px;color:#0f172a}
.inst-row .ir-unit{font-size:10px;color:#6b7688;margin-left:5px;font-weight:600}

/* ---- Hero KPI tiles (device detail top row) --------------------- */
.kpi-hero{
  position:relative;
  background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:18px 22px;
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease, transform .18s ease;
}
.kpi-hero:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* soft tinted wash + left accent instead of a dark glow */
.kpi-hero::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--kpi-accent,#d97706)}
.kpi-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--kpi-accent,#d97706) 7%,transparent),transparent 60%);
  pointer-events:none}
.kpi-hero .kh-val{font-family:'JetBrains Mono',monospace;font-weight:800;
  font-size:34px;line-height:1;color:var(--kpi-accent,#d97706);letter-spacing:-.02em}
.kpi-hero .kh-label{font-size:11px;color:var(--txt-muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;margin-top:9px}

/* ---- Live-overview stat strip (dept detail) --------------------- */
.stat-strip{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.stat-cell{position:relative;background:linear-gradient(160deg,#ffffff,#f8fafc);
  border:1px solid #e2e8f0;border-radius:12px;padding:14px 18px;overflow:hidden}
.stat-cell .sc-accent{position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sc-accent,#f59e0b)}
.stat-cell .sc-val{font-family:'JetBrains Mono',monospace;font-weight:800;
  font-size:22px;color:#0f172a;line-height:1}
.stat-cell .sc-label{font-size:10.5px;color:#64748b;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;margin-top:6px}

@media (max-width:640px){
  .stat-strip{grid-template-columns:1fr}
}

/* ================================================================
   Professional polish  (additive · presentational only)
   Stable numerics, themed scrollbars, accessible focus, selection
   colour, tactile buttons, motion safety. No layout/logic changes.
   ================================================================ */

/* ── Stable live numerics ────────────────────────────────────────
   Live readouts jitter when digit widths differ (a "1" is narrower
   than an "8"), so values visibly shift on every refresh. Tabular
   figures lock each digit to one width — the numbers now sit still
   as they update, the way a real instrument panel reads.           */
.mono,
.kpi .k-val, .kpi .k-unit,
.clock,
.scada-kpi-val, .scada-foot-row,
.dash-metric-val,
.dept-tile .dt-power .v,
.inst-row .ir-val,
.kpi-hero .kh-val,
.stat-cell .sc-val{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Crisper text rendering ─────────────────────────────────────*/
body{ -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }

/* ── Themed scrollbars (Firefox + WebKit) ───────────────────────*/
*{ scrollbar-width:thin; scrollbar-color:#2a303c transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:#f1f5f9; border:2px solid transparent;
  background-clip:padding-box; border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:#343c4a; background-clip:padding-box; }
::-webkit-scrollbar-corner{ background:transparent; }

/* ── Text selection ─────────────────────────────────────────────*/
::selection{ background:rgba(217,119,6,.22); color:var(--txt); }

/* ── Accessible keyboard focus (mouse clicks stay clean) ────────*/
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}
.form-input:focus-visible, .form-select:focus-visible{ outline:none; } /* already ringed */

/* ── Tactile buttons ────────────────────────────────────────────*/
.btn{ transition:background .15s ease, border-color .15s ease,
       color .15s ease, box-shadow .15s ease, transform .06s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary:hover{ box-shadow:0 4px 14px -6px rgba(245,158,11,.6); }
.btn:disabled, .btn[disabled], .btn.is-loading{
  opacity:.55; cursor:not-allowed; pointer-events:none;
}

/* ── Sidebar active-page accent bar ─────────────────────────────*/
.nav a{ transition:background .15s ease, color .15s ease; }
.nav a.active::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:58%; border-radius:0 3px 3px 0; background:var(--amber);
}

/* ── Panels: gentle interactive lift ────────────────────────────*/
.panel{ transition:border-color .2s ease, box-shadow .2s ease; }

/* ── Respect the OS "reduce motion" preference ──────────────────*/
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ================================================================
   Professional polish · v2  (additive · presentational only)
   Depth, life & readability — living status dot, layered panel
   depth, KPI accent + hover lift, zebra tables. No logic changes.
   ================================================================ */

/* ── Living "Live" dot in the sidebar (matches the card dots) ───*/
.pill .dot.live{ animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse{
  0%,100%{ box-shadow:0 0 6px var(--emerald), 0 0 0 0 rgba(52,211,153,.55); }
  50%    { box-shadow:0 0 10px var(--emerald), 0 0 0 5px rgba(52,211,153,0); }
}

/* ── Panels: subtle top highlight + layered depth ───────────────*/
.panel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 1px 2px rgba(0,0,0,.45),
    0 10px 30px -22px rgba(0,0,0,.85);
}

/* ── KPI tiles: thin coloured accent + gentle hover lift ────────*/
.kpi{
  position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kpi::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px; opacity:.55;
  background:linear-gradient(90deg, transparent, #94a3b8, transparent);
}
.kpi.amber::before{ background:linear-gradient(90deg, transparent, var(--amber),   transparent); }
.kpi.cyan::before { background:linear-gradient(90deg, transparent, var(--cyan),    transparent); }
.kpi.green::before{ background:linear-gradient(90deg, transparent, var(--emerald), transparent); }
.kpi.red::before  { background:linear-gradient(90deg, transparent, var(--red),     transparent); }
.kpi:hover{
  transform:translateY(-2px); border-color:#2a2f3a;
  box-shadow:0 14px 30px -22px rgba(0,0,0,.9);
}

/* ── Tables: zebra rows + smooth hover + sticky header ──────────*/
table.grid thead th, table.grid th{
  position:sticky; top:0; z-index:2;
  background:var(--panel-2);
  box-shadow:inset 0 -1px 0 var(--line);   /* collapse-safe bottom rule */
}
table.grid tbody tr{ transition:background .12s ease; }
table.grid tbody tr:nth-child(even) td{ background:#fafbfd; }
table.grid tr:hover td{ background:var(--panel-2); }

/* ================================================================
   Loading skeletons  (shimmer placeholders shown until first data)
   Auto-injected by app.js into any [data-skeleton] container, then
   replaced the moment the page renders real content. Presentational.
   ================================================================ */
@keyframes skShimmer{ 100%{ transform:translateX(100%); } }
.skeleton{
  position:relative; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
}
.skeleton::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
  animation:skShimmer 1.25s infinite;
}
.sk-card{ padding:16px; min-height:120px; }
.skeleton .sk-line{ height:10px; border-radius:6px;
  background:rgba(255,255,255,.07); margin:9px 0; }
.skeleton .sk-val{ height:26px; width:62%; border-radius:8px;
  background:rgba(255,255,255,.10); margin:12px 0; }
.sk-line.w70{ width:70%; } .sk-line.w50{ width:50%; }
.sk-line.w40{ width:40%; } .sk-line.w30{ width:30%; }

/* ── VFD drive detail: status header + parameter grid ─────────────── */
.drive-status{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border-radius:999px;
  background:#eef2f7;border:1px solid #cbd5e155;
  transition:background .2s ease,border-color .2s ease;
}
.drive-status .ds-icon{display:inline-flex;align-items:center}
.drive-status .ds-lamp{width:10px;height:10px;border-radius:50%;display:inline-block;
  animation:dsPulse 1.6s ease-in-out infinite}
@keyframes dsPulse{0%,100%{opacity:1}50%{opacity:.4}}
.drive-status .ds-state{font-size:12px;font-weight:800;letter-spacing:.09em}
.drive-status .ds-dir{font-size:11px;color:#64748b;padding-left:8px;border-left:1px solid #cbd5e180}
.drive-status .ds-fault{font-size:11px;color:#be123c;padding-left:8px;border-left:1px solid #cbd5e180}

/* ── Nameplate strip: identity + connection + freshness ────────────── */
.np-strip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:9px 14px;box-shadow:var(--shadow-sm);
}
.np-online{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:800;
  background:#eef2f7;color:#64748b;border:1px solid var(--line);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.np-online.on{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.np-online.off{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.np-chip{
  font-size:.72rem;font-weight:700;color:var(--txt-dim);
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;
}
.np-updated{margin-left:auto;font-size:.68rem;color:var(--txt-muted);font-weight:600}
.np-updated b{color:var(--txt-dim);font-family:'JetBrains Mono',monospace;font-weight:700}
.np-conn-chip{
  font-size:.68rem;font-weight:700;color:#b45309;background:#fef3c7;
  border:1px solid #fde68a;border-radius:7px;padding:2px 8px;
}
.np-conn-chip.mono{font-family:'JetBrains Mono',monospace;color:#92400e}

/* ── Panel section headers get a small icon marker ──────────────── */
.panel-icon-title{display:flex;align-items:center;gap:8px}
.panel-icon-title .pit-ic{
  width:22px;height:22px;border-radius:7px;flex:none;
  display:grid;place-items:center;background:var(--panel-2);
  border:1px solid var(--line);color:#b45309;
}
.panel-icon-title .pit-ic svg{width:13px;height:13px}

.param-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
/* Secondary parameter cards — same visual language as the primary KPI
   cards above, one tier smaller. */
.param-tile{
  position:relative;
  background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:16px 20px;
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease, transform .18s ease;
}
.param-tile:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.param-tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--pt-accent,#94a3b8)}
.param-tile::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pt-accent,#94a3b8) 6%,transparent),transparent 60%);
  pointer-events:none}
.param-tile .pt-val{
  font-family:'JetBrains Mono',monospace;font-weight:800;
  font-size:26px;line-height:1;color:var(--pt-accent,#334155);
  display:flex;align-items:baseline;gap:6px;letter-spacing:-.02em;
}
.param-tile .pt-unit{font-size:12px;font-weight:600;color:var(--txt-muted)}
.param-tile .pt-label{
  font-size:11px;color:#64748b;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;margin-top:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ================================================================
   Light-theme compatibility layer
   The templates use Tailwind utilities that were written for a dark
   canvas (text-white, text-slate-400/500/600, bg-slate-700 …).
   Remap them here so every page reads correctly on the light theme
   without touching hundreds of class names in the markup.
   ================================================================ */
.text-white       { color:var(--txt) !important; }
.text-slate-100   { color:#1e293b !important; }
.text-slate-200   { color:#334155 !important; }
.text-slate-300   { color:#334155 !important; }
.text-slate-400   { color:#556074 !important; }
.text-slate-500   { color:#556074 !important; }
.text-slate-600   { color:#6b7688 !important; }
.text-amber-300   { color:#b45309 !important; }
.text-amber-400   { color:#b45309 !important; }
.text-emerald-400 { color:#047857 !important; }
.text-rose-300    { color:#be123c !important; }
.text-cyan-400    { color:#0e7490 !important; }
.text-cyan-500    { color:#0e7490 !important; }
.text-violet-400  { color:#6d28d9 !important; }
.text-red-400     { color:#dc2626 !important; }
.text-red-500     { color:#dc2626 !important; }
.text-emerald-300 { color:#047857 !important; }
.text-emerald-500 { color:#047857 !important; }
.text-amber-500   { color:#b45309 !important; }
.text-rose-400    { color:#be123c !important; }

.bg-slate-700 { background:#e2e8f0 !important; color:var(--txt) !important; }
.bg-slate-800 { background:#e2e8f0 !important; color:var(--txt) !important; }
.border-slate-600 { border-color:var(--line) !important; }
.border-slate-700 { border-color:var(--line) !important; }

/* Modal scrims stay dark but lighter, so light dialogs still pop */
.bg-black\/70 { background:rgba(15,23,42,.38) !important; }

/* Panels and cards get soft elevation instead of glow */
.panel, .kpi { background:#fff; box-shadow:var(--shadow-sm); }

/* Date/number inputs: use the light colour scheme for native pickers */
input[type="date"], input[type="month"], input[type="datetime-local"],
input[type="number"], select, textarea, input[type="text"], input[type="password"] {
  color-scheme: light;
}

/* Tailwind opacity variants used in the markup (bg-slate-800/60 etc.) —
   these were dark translucent panels; on the light canvas they become
   subtle light surfaces with a visible border. */
.bg-slate-800\/60,
.bg-slate-700\/50,
.bg-slate-700\/40 {
  background:#f8fafc !important;
  border-color:var(--line) !important;
}

/* Status badges: these were dark-green pills with pale text. On the light
   theme they need a solid colour and white text so they read clearly. */
.bg-emerald-900{ background:#047857 !important; }
.bg-emerald-900.text-emerald-300,
.bg-emerald-900 .text-emerald-300,
.text-emerald-300{ color:#ffffff !important; }
.bg-emerald-900{ border-color:#047857 !important; }
.border-emerald-700{ border-color:#047857 !important; }

.bg-amber-900{ background:#b45309 !important; }
.bg-amber-900 .text-amber-300, .bg-amber-900.text-amber-300{ color:#fff !important; }

/* "Logging OFF" / offline pills */
.bg-slate-700.text-slate-400, .bg-slate-700 .text-slate-400{ color:#475569 !important; }


/* ── Sidebar as a slide-over overlay ──────────────────────────────
   The menu floats above the page instead of pushing it, so opening or
   closing it never reflows the dashboard. */
.sidebar{
  position:fixed;top:0;bottom:0;left:0;z-index:70;
  box-shadow:var(--shadow-lg);
  transition:transform .22s ease;
}
.sidebar.hidden{transform:translateX(-100%);width:248px;flex-basis:248px;border-right:1px solid var(--line)}
.shell .main{margin-left:0;width:100%}
.sidebar.hidden ~ .main .content{padding-left:3.4rem}
.sidebar:not(.hidden) ~ .main .content{padding-left:3.4rem}
.side-arrow{box-shadow:var(--shadow-md)}

/* ================================================================
   Drive panel — digital operator + analog instruments
   Modelled on a real VFD keypad: dark bezel, pale LCD, red needles.
   ================================================================ */
.drive-panel{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}
@media (max-width:1100px){.drive-panel{grid-template-columns:1fr}}

/* ---- Digital operator ---- */
.dop{
  background:linear-gradient(180deg,#39445a,#232b3a 55%,#1a212c);
  border:1px solid #10151d;border-radius:16px;padding:14px 14px 12px;
  box-shadow:0 14px 32px rgba(15,23,42,.26),
             inset 0 1px 0 rgba(255,255,255,.10),
             inset 0 -1px 0 rgba(0,0,0,.35);
}
.dop-top{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.dop-title{flex:1;text-align:center;font-size:.5rem;letter-spacing:.3em;
  color:#93a1b5;font-weight:800}
.dop-lamp{display:inline-flex;align-items:center;gap:6px;font-size:.53rem;
  font-weight:800;letter-spacing:.12em;color:#7f8da0}
.dop-lamp i{width:10px;height:10px;border-radius:50%;background:#39424f;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.06)}
.dop-lamp.on{color:#6ee7b7}
.dop-lamp.on i{background:#22c55e;
  box-shadow:0 0 12px #22c55e, inset 0 0 4px rgba(255,255,255,.55)}
.dop-lamp.alm.on{color:#fca5a5}
.dop-lamp.alm.on i{background:#ef4444;
  box-shadow:0 0 12px #ef4444, inset 0 0 4px rgba(255,255,255,.5);
  animation:almBlink .7s steps(1) infinite}
@keyframes almBlink{50%{opacity:.22}}

/* the LCD itself */
.dop-lcd{
  background:linear-gradient(180deg,#d3e0c6,#c2d2b4);
  border:1px solid #6f7f63;border-radius:7px;padding:9px 11px;
  box-shadow:inset 0 3px 10px rgba(50,62,42,.45), 0 1px 0 rgba(255,255,255,.12);
  font-family:'JetBrains Mono',monospace;color:#131a0f;
}
.lcd-bar{display:flex;gap:10px;font-size:.58rem;font-weight:800;letter-spacing:.06em;
  border-bottom:1px solid rgba(60,75,50,.35);padding-bottom:5px;margin-bottom:6px;opacity:.8}
.lcd-bar span:last-child{margin-left:auto}
.lcd-row{display:flex;align-items:baseline;gap:7px;padding:2.5px 0}
.lcd-row + .lcd-row{border-top:1px dotted rgba(60,75,50,.22)}
.lcd-row .lr-code{font-size:.55rem;font-weight:800;opacity:.55;width:36px;flex:none}
.lcd-row .lr-name{font-size:.57rem;opacity:.7;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em}
.lcd-row .lr-val{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.lcd-row .lr-u{font-size:.55rem;font-weight:800;opacity:.62;width:22px;text-align:right}

/* status lamp strip */
.dop-status{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 10px;margin-top:12px;
  border-top:1px solid rgba(255,255,255,.07);padding-top:11px}
.dst{display:flex;align-items:center;gap:6px;font-size:.56rem;font-weight:700;
  color:#7f8da0;letter-spacing:.05em}
.dst i{width:9px;height:9px;border-radius:50%;background:#39424f;flex:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.dst.on{color:#dbe3ec}
.dst.on i{background:#22c55e;box-shadow:0 0 10px #22c55e}
.dst.warn.on i{background:#f59e0b;box-shadow:0 0 10px #f59e0b}
.dst.bad.on{color:#fca5a5}
.dst.bad.on i{background:#ef4444;box-shadow:0 0 10px #ef4444}

/* ---- Analog instruments ---- */
.gauges{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.gauge-box{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--ga,#64748b) 5%,#fff));
  border:1px solid color-mix(in srgb,var(--ga,#cbd5e1) 30%,var(--line));
  border-radius:14px;padding:0 10px 12px;text-align:center;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease,transform .18s ease;
}
.gauge-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.gauge-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--ga,#64748b)}
.gauge-cap-top{
  font-size:.56rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ga,#64748b);padding:10px 0 4px;
}
.gauge-box svg{width:100%;height:auto;max-width:172px;display:block;margin:0 auto}
.gauge-face{}
.gauge-tick{stroke:#a8b3c2}
.gauge-tick.major{stroke:#475569}
.gauge-num{fill:#475569;font-size:7px;font-family:'JetBrains Mono',monospace;
  font-weight:700;text-anchor:middle}
.gauge-band{fill:none;stroke-linecap:butt}
.gauge-needle{stroke:#dc2626;stroke-width:2.2;stroke-linecap:round;
  transition:x2 .5s cubic-bezier(.34,1.2,.64,1), y2 .5s cubic-bezier(.34,1.2,.64,1);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.gauge-hub-ring{stroke-width:1.2}
.gauge-val{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.25rem;
  color:var(--ga,#0f172a);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:4px}
.gauge-val .gu{font-size:.62rem;color:var(--txt-muted);font-weight:700;margin-left:3px}

@media (prefers-reduced-motion: reduce){
  .gauge-needle{transition:none}
  .dop-lamp.alm.on i{animation:none}
}

.dop-plate{
  margin-top:10px;text-align:center;font-size:.55rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#8ea0b6;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  border-radius:6px;padding:5px 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Secondary parameter tiles pick up their own accent tint */
.param-tile{
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--pt-accent,#94a3b8) 5%,#fff))!important;
  border-color:color-mix(in srgb,var(--pt-accent,#cbd5e1) 28%,var(--line))!important;
}

/* Operator and instruments share one row height; the dials are all identical
   in size and evenly spaced. */
.drive-panel{align-items:stretch}
.drive-panel .dop{display:flex;flex-direction:column;height:100%}
.drive-panel .dop-lcd{flex:1 1 auto}
.gauges{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
@media (max-width:1400px){.gauges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gauges{grid-template-columns:1fr}}
.gauge-box{display:flex;flex-direction:column;height:100%;justify-content:space-between}
.gauge-box svg{max-width:150px}

/* Parameter row: five equal tiles on one line */
.param-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1400px){.param-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.param-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The setpoint tile */
.set-tile .st-row{display:flex;gap:6px;align-items:center}
.set-tile .st-sel{
  flex:1 1 auto;min-width:0;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:7px 8px;font-family:'JetBrains Mono',monospace;
  font-weight:800;font-size:1.05rem;color:#b45309;
}
.set-tile .st-sel:focus{outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px var(--amber-soft)}
.set-tile .st-btn{
  flex:none;background:var(--amber);border:none;border-radius:8px;color:#fff;
  font-weight:800;font-size:.72rem;padding:8px 12px;cursor:pointer;
  transition:filter .15s}
.set-tile .st-btn:hover{filter:brightness(1.07)}

/* ================================================================
   Buttons — every button reads as a button
   Some markup uses a variant class (btn-primary, btn-secondary…)
   without the .btn base, which left it looking like plain text.
   These rules give every variant a shape, a surface and a border.
   ================================================================ */
.btn-primary, .btn-secondary, .btn-ghost, .btn-amber, .btn-danger, .btn-success, .btn-sm{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border-radius:9px;border:1px solid transparent;cursor:pointer;
  font-weight:600;line-height:1.2;white-space:nowrap;
  padding:.5rem .95rem;
  transition:background .15s ease, border-color .15s ease,
             box-shadow .15s ease, transform .1s ease;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active,
.btn-amber:active, .btn-danger:active, .btn:active{transform:translateY(1px)}

/* Neutral actions carry a real colour so they read as controls, not labels */
.btn-secondary{
  background:linear-gradient(180deg,#38bdf8,#0284c7) !important;
  border-color:#0369a1 !important;color:#fff !important;font-weight:700;
  box-shadow:0 2px 6px rgba(2,132,199,.32);
}
.btn-secondary:hover{
  background:linear-gradient(180deg,#4fc9fb,#0369a1) !important;
  border-color:#075985 !important;box-shadow:0 4px 12px rgba(2,132,199,.42);
}

.btn-ghost{
  background:linear-gradient(180deg,#818cf8,#4f46e5) !important;
  border-color:#4338ca !important;color:#fff !important;font-weight:700;
  box-shadow:0 2px 6px rgba(79,70,229,.30);
}
.btn-ghost:hover{
  background:linear-gradient(180deg,#93a0fb,#4338ca) !important;
  border-color:#3730a3 !important;box-shadow:0 4px 12px rgba(79,70,229,.40);
}

.btn-primary, .btn-amber{
  background:linear-gradient(180deg,#f59e0b,#d97706) !important;
  border-color:#b45309 !important;color:#fff !important;
  font-weight:800;box-shadow:0 2px 6px rgba(180,83,9,.34);
}
.btn-primary:hover, .btn-amber:hover{
  background:linear-gradient(180deg,#fbb03b,#ea8109) !important;
  box-shadow:0 4px 12px rgba(180,83,9,.42);
}

.btn-danger{
  background:linear-gradient(180deg,#f43f5e,#e11d48) !important;
  border-color:#be123c !important;color:#fff !important;
  font-weight:800;box-shadow:0 2px 6px rgba(225,29,72,.34);
}
.btn-danger:hover{
  background:linear-gradient(180deg,#fb5670,#d01640) !important;
  box-shadow:0 4px 12px rgba(225,29,72,.42);
}

/* Success-flavoured action (exports, enable) */
.btn-success{
  background:linear-gradient(180deg,#34d399,#059669) !important;
  border-color:#047857 !important;color:#fff !important;
  font-weight:800;box-shadow:0 2px 6px rgba(4,120,87,.32);
}
.btn-success:hover{background:linear-gradient(180deg,#4ade9f,#03835c) !important}

/* compact variant used in tables */
.btn-sm{padding:.35rem .7rem;font-size:.75rem;border-radius:7px}

/* Keyboard users get a clear focus ring on every button */
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-ghost:focus-visible, .btn-amber:focus-visible, .btn-danger:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;
}

/* Disabled states read as unavailable rather than broken */
.btn[disabled], .btn-primary[disabled], .btn-secondary[disabled],
.btn-amber[disabled], .btn-danger[disabled]{
  opacity:.5;cursor:not-allowed;transform:none;
}

/* ================================================================
   Table layout fix
   These tables carry class="grid" (their own style hook), but Tailwind
   also ships a .grid utility = display:grid. That turned every table
   into a CSS grid container, so the header cells stopped tracking the
   column widths and bunched up on the left. Restore table semantics.
   ================================================================ */
table.grid            { display:table !important; width:100% }
table.grid thead      { display:table-header-group !important }
table.grid tbody      { display:table-row-group !important }
table.grid tfoot      { display:table-footer-group !important }
table.grid tr         { display:table-row !important }
table.grid th,
table.grid td         { display:table-cell !important }
table.grid colgroup   { display:table-column-group !important }
table.grid col        { display:table-column !important }

/* ── Brand mark: the drive symbol inside its tile ────────────────── */
.brand-mark > svg{width:70%;height:70%;display:block;color:#fff}
.brand-mark > img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Action buttons in table rows sit on one line, not stacked.
   The Actions column is narrow, so without this the buttons wrapped. */
table.grid td:last-child{white-space:nowrap}
/* Actions column takes only the width its buttons need */
table.grid th:last-child, table.grid td:last-child{width:1%}
table.grid td .btn-sm{vertical-align:middle}
table.grid td .btn-sm + .btn-sm{margin-left:6px}
table.grid td .btn-sm.mr-1{margin-right:0}

/* Keep the target/alarm column readable instead of wrapping into three lines */
table.grid td.text-xs{white-space:nowrap}
.set-tile .st-wait{font-size:.8rem;font-weight:700;color:var(--txt-muted);
  padding:7px 2px;display:block}

/* ================================================================
   Global fault alert system — popup stack, screen flash, badge
   ================================================================ */
#alarmFlashBar{
  position:fixed;inset:0 0 auto 0;height:5px;z-index:9998;pointer-events:none;
  background:linear-gradient(90deg,#e02424,#f43f5e,#e02424);
  opacity:0;
}
#alarmFlashBar.go{
  animation:alarmFlash 1.1s cubic-bezier(.4,0,.2,1) 2;
}
@keyframes alarmFlash{
  0%{opacity:0}
  8%{opacity:1;box-shadow:0 0 26px 4px rgba(224,36,36,.55)}
  50%{opacity:.15}
  58%{opacity:1;box-shadow:0 0 26px 4px rgba(224,36,36,.55)}
  100%{opacity:0;box-shadow:none}
}

#alarmStack{
  position:fixed;top:16px;right:16px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;
  width:320px;max-width:calc(100vw - 32px);
  pointer-events:none;
}
.alarm-card{
  pointer-events:auto;
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff,#fff8f8);
  border:1px solid #fca5a5;border-left:5px solid #e02424;
  border-radius:13px;padding:12px 14px 11px;
  box-shadow:0 14px 34px rgba(220,38,38,.24), 0 2px 6px rgba(0,0,0,.06);
  transform:translateX(110%);opacity:0;
  transition:transform .28s cubic-bezier(.34,1.15,.64,1), opacity .22s ease;
  animation:alarmCardPulse 1.6s ease-in-out infinite;
}
.alarm-card.in{transform:translateX(0);opacity:1}
.alarm-card.out{transform:translateX(110%);opacity:0}
@keyframes alarmCardPulse{
  0%,100%{box-shadow:0 14px 34px rgba(220,38,38,.24), 0 2px 6px rgba(0,0,0,.06)}
  50%{box-shadow:0 14px 34px rgba(220,38,38,.4), 0 0 0 3px rgba(220,38,38,.14)}
}
.ac-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ac-badge{font-size:.6rem;font-weight:800;letter-spacing:.09em;color:#fff;
  background:#e02424;border-radius:999px;padding:3px 9px;
  animation:acBadgeBlink 1s steps(1) infinite}
@keyframes acBadgeBlink{50%{opacity:.45}}
.ac-x{margin-left:auto;flex:none;width:22px;height:22px;border-radius:7px;
  border:none;background:transparent;color:#94a3b8;font-size:.8rem;cursor:pointer;
  display:grid;place-items:center;transition:background .15s ease,color .15s ease}
.ac-x:hover{background:#fee2e2;color:#991b1b}
.ac-dept{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#b91c1c;opacity:.8}
.ac-drive{font-size:.92rem;font-weight:800;color:#7f1d1d;margin-top:1px}
.ac-fault{font-size:.82rem;color:#991b1b;margin-top:4px;font-weight:600}
.ac-fault b{font-family:'JetBrains Mono',monospace;color:#be123c}
.ac-foot{display:flex;align-items:center;gap:10px;margin-top:9px;
  border-top:1px dashed #fecaca;padding-top:8px}
.ac-since{font-size:.68rem;color:#9f1239;font-weight:700;
  font-family:'JetBrains Mono',monospace}
.ac-view{margin-left:auto;font-size:.72rem;font-weight:800;color:#fff;
  background:#e02424;border-radius:8px;padding:5px 10px;text-decoration:none;
  transition:background .15s ease}
.ac-view:hover{background:#b91c1c}

@media (prefers-reduced-motion: reduce){
  .alarm-card{animation:none}
  .ac-badge{animation:none}
  #alarmFlashBar.go{animation:none}
}

/* ================================================================
   .hidden must always win, no matter what else is on the element
   ================================================================
   Lots of custom classes in this file set `display` on a bare, single-class
   selector (.btn, .badge, .pill, .drive-status, …). Any element that
   combines one of those with `class="... hidden ..."` — every admin-only
   control (Save order, Customise Cards), every modal, every toggled panel —
   depends on `hidden` beating whatever else is on it. Without `!important`
   here, whichever rule happens to load later in the stylesheet wins, which
   already caused two real bugs: closed modals rendering open, and
   admin-only buttons showing for every role. `!important` makes the outcome
   correct regardless of file order, now and for anything added later. */
.hidden{display:none!important}

/* The sidebar reuses the class name "hidden" for its own closed/slide-out
   state (transform-based, animated) — it was never meant to mean
   display:none, and must keep rendering (off-screen) for its slide
   transition to work. Restore its display, winning on specificity since
   both declarations are !important. */
.sidebar.hidden{display:flex!important}