/* JSPL RTSMS — application stylesheet
 *
 * Extracted from 14 inline <style> blocks in index.html, in the
 * SAME order they appeared. Order matters: several later blocks deliberately
 * override earlier ones (the v87/v88/v89/v90/v100 "polish" blocks are patches
 * layered on top of the base rules), so this file must not be reordered or
 * alphabetised.
 *
 * Loaded after the CDN stylesheets (leaflet, leaflet.draw, maplibre, fonts),
 * matching where the first inline block used to sit.
 */

/* ═══════════════════════════════════════════════════════════════
   from index.html line 31  ·  <style>
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════ CSS VARIABLES ═══════════ */
:root[data-theme="dark"]{
  --bg:#0a0e14;--surface:#111720;--surface2:#161e2a;--surface3:#1b2533;
  --text:#e5ecf5;--text2:#8a9ab5;--text3:#5a6a85;
  --border:#233047;--border2:#2e3d57;
  --accent:#00d4aa;--accent2:#3b82f6;--accent3:#a855f7;
  --danger:#ef4444;--warning:#f59e0b;--success:#22c55e;--info:#38bdf8;
  --shadow:0 4px 24px rgba(0,0,0,.45);--shadow2:0 8px 32px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --bg:#f4f6fa;--surface:#ffffff;--surface2:#f0f3f8;--surface3:#e6ebf2;
  --text:#1a2238;--text2:#5a6a85;--text3:#8696b2;
  --border:#dfe5ee;--border2:#c8d2e0;
  --accent:#00a886;--accent2:#2563eb;--accent3:#7c3aed;
  --danger:#dc2626;--warning:#d97706;--success:#16a34a;--info:#0284c7;
  --shadow:0 4px 24px rgba(20,30,60,.08);--shadow2:0 8px 32px rgba(20,30,60,.12);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ═══════════ SCROLLBAR ═══════════ */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--surface2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ═══════════ HEADINGS ═══════════ */
h1,h2,h3,h4{font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.3px}

/* ═══════════ BUTTONS ═══════════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:none;border-radius:8px;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;text-decoration:none;letter-spacing:.4px;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 16px rgba(0,212,170,.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,212,170,.45)}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--surface3);border-color:var(--border2)}
.btn-danger{background:rgba(239,68,68,.12);color:var(--danger);border:1px solid rgba(239,68,68,.3)}
.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-icon{width:38px;height:38px;padding:0;justify-content:center;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px}
.btn-icon:hover{background:var(--surface3)}

/* ═══════════ LANDING PAGE ═══════════ */
#landingPage{position:fixed;inset:0;background:var(--bg);z-index:1000;display:flex;flex-direction:column;overflow-y:auto}
.lp-top{display:flex;align-items:center;justify-content:space-between;padding:18px 36px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap;gap:14px}
.lp-brand{display:flex;align-items:center;gap:14px}
.lp-logo-frame{display:inline-flex;align-items:center;justify-content:center;background:#ffffff;border:1px solid #e8eaef;border-radius:10px;padding:6px 14px;box-shadow:0 1px 4px rgba(0,0,0,.08);flex-shrink:0}
.lp-logo{height:44px;width:auto;display:block;object-fit:contain}
.lp-brand-text{display:flex;flex-direction:column}
.lp-brand-title{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:var(--text);letter-spacing:.5px}
.lp-brand-sub{font-size:11px;color:var(--text2);letter-spacing:.6px;text-transform:uppercase}
.lp-top-actions{display:flex;align-items:center;gap:10px}
.lp-date{font-size:11px;color:var(--text2);font-family:'IBM Plex Mono',monospace}
.lp-hero{flex:1;display:flex;align-items:center;justify-content:center;padding:50px 30px;background:radial-gradient(circle at 25% 30%,rgba(0,212,170,.07),transparent 55%),radial-gradient(circle at 75% 75%,rgba(59,130,246,.06),transparent 55%)}
.lp-hero-inner{max-width:1100px;width:100%;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.lp-hero-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;background:rgba(0,212,170,.1);color:var(--accent);border:1px solid rgba(0,212,170,.25);border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.7px;margin-bottom:18px}
.lp-hero h1{font-size:42px;line-height:1.1;font-weight:700;margin-bottom:16px;color:var(--text)}
.lp-hero h1 .accent{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-hero-desc{font-size:15px;color:var(--text2);line-height:1.65;margin-bottom:26px}
.lp-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.lp-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:26px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.lp-stat{padding:14px}
.lp-stat-val{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;line-height:1;color:var(--accent);margin-bottom:5px}
.lp-stat-lbl{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.7px}
.lp-features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1100px;width:100%;margin:0 auto;padding:0 30px 40px}
.lp-feat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;gap:12px;align-items:flex-start}
.lp-feat-ico{font-size:22px;line-height:1}
.lp-feat-t{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.lp-feat-d{font-size:11px;color:var(--text2);line-height:1.45}
.lp-footer{padding:18px 36px;border-top:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--text2)}
.lp-foot-brand{display:flex;align-items:center;gap:10px}
.lp-foot-mm{height:24px;width:auto;object-fit:contain;opacity:.9}
.lp-foot-mm-text{font-size:11px;color:var(--text2)}
.lp-foot-mm-text strong{color:var(--text);font-weight:600}

/* ═══════════ LOGIN PAGE ═══════════ */
#loginPage{position:fixed;inset:0;background:var(--bg);z-index:999;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.login-bg{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(0,212,170,.08),transparent 55%),radial-gradient(circle at 70% 80%,rgba(59,130,246,.07),transparent 55%);pointer-events:none}
.login-card{position:relative;width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:38px 34px;box-shadow:var(--shadow2)}
.login-top{position:absolute;top:16px;right:16px}
.login-back{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:7px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;transition:all .2s}
.login-back:hover{color:var(--text);border-color:var(--border2)}
.login-logo-wrap{display:flex;justify-content:center;margin-bottom:18px}
.login-logo-frame{display:inline-flex;align-items:center;justify-content:center;background:#ffffff;border:1px solid #e8eaef;border-radius:12px;padding:10px 18px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.login-logo{height:62px;width:auto;object-fit:contain;display:block}
.login-card h2{text-align:center;font-size:20px;font-weight:700;margin-bottom:4px;color:var(--text)}
.login-sub{text-align:center;font-size:11px;color:var(--text2);margin-bottom:24px;letter-spacing:.5px;text-transform:uppercase}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:11px;color:var(--text2);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.login-field input{width:100%;padding:11px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:14px;font-family:inherit;transition:border-color .2s}
.login-field input:focus{outline:none;border-color:var(--accent)}
.login-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:8px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;cursor:pointer;letter-spacing:.5px;margin-top:8px;transition:all .2s}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,212,170,.35)}
.login-hint{margin-top:18px;padding:11px 14px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.18);border-radius:7px;font-size:11px;color:var(--text2);line-height:1.55}
.login-hint code{display:inline-block;padding:1px 5px;background:var(--surface3);color:var(--accent);border-radius:3px;font-family:'IBM Plex Mono',monospace;font-size:10px}
.login-error{display:none;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--danger);padding:10px 13px;border-radius:7px;font-size:12px;margin-bottom:14px;text-align:center}
.login-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:var(--text3)}
.login-foot img{height:18px;width:auto;object-fit:contain;opacity:.8}

/* ═══════════ APP LAYOUT ═══════════ */
#app{display:none;height:100vh;overflow:hidden}
.sidebar{width:248px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;height:100vh;overflow-y:auto;transition:transform .25s}
.sb-head{padding:18px 18px 16px;border-bottom:1px solid var(--border)}
.sb-logo-row{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.sb-logo-frame{display:inline-flex;align-items:center;justify-content:center;background:#ffffff;border:1px solid #e2e6ed;border-radius:7px;padding:4px 8px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.sb-logo{height:32px;width:auto;object-fit:contain;display:block}
.sb-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;color:var(--text);line-height:1.2}
.sb-sub{font-size:9px;color:var(--text2);letter-spacing:.6px;text-transform:uppercase}
.sb-meta{font-size:10px;color:var(--text3);margin-top:6px;font-family:'IBM Plex Mono',monospace}
.sb-section{padding:9px 14px 2px;font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;opacity:.85}
.ni{display:flex;align-items:center;gap:9px;padding:6px 12px;margin:0 6px;border-radius:6px;cursor:pointer;color:var(--text2);font-size:12.5px;transition:all .15s;position:relative;border:1px solid transparent;line-height:1.2}
.ni:hover{background:var(--surface2);color:var(--text);transform:translateX(1px)}
.ni.active{background:linear-gradient(90deg,rgba(0,212,170,.12),rgba(0,212,170,.02));color:var(--accent);border-color:rgba(0,212,170,.2)}
.ni.active::before{content:'';position:absolute;left:-7px;top:5px;bottom:5px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.ni-ico{font-size:14px;flex-shrink:0;width:18px;text-align:center}
.ni-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-badge{background:var(--surface3);color:var(--text2);font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:9px;min-width:20px;text-align:center}
.ni.active .ni-badge{background:var(--accent);color:#000}
.ni.active .ni-badge{background:var(--accent);color:#000}
.sb-foot{margin-top:auto;padding:14px 14px 16px;border-top:1px solid var(--border);font-size:10px;color:var(--text3);text-align:center;line-height:1.55}
.sb-foot img{height:22px;width:auto;object-fit:contain;display:block;margin:0 auto 5px;opacity:.9}

.main{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}
.topbar{height:62px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;gap:14px}
.tb-mobile-toggle{display:none;background:var(--surface2);border:1px solid var(--border);color:var(--text);width:38px;height:38px;border-radius:7px;cursor:pointer;font-size:18px;flex-shrink:0}
.tb-left{flex:1;min-width:0}
.tb-title{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title span{font-size:11px;color:var(--text3);font-weight:500;margin-left:8px;font-family:'IBM Plex Sans',sans-serif;letter-spacing:.4px}
.tb-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-date{font-size:11px;color:var(--text2);font-family:'IBM Plex Mono',monospace;padding:6px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:7px}
/* Compact top-bar sync badge */
.tb-sync{position:relative;display:flex;align-items:center;gap:7px;padding:5px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;cursor:default}
.tb-sync-dot{width:8px;height:8px;border-radius:50%;background:#33C175;box-shadow:0 0 7px #33C175;animation:tbSyncPulse 1.6s ease-in-out infinite;flex-shrink:0}
@keyframes tbSyncPulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.18);box-shadow:0 0 12px #33C175}}
.tb-sync-info{display:flex;flex-direction:column;line-height:1.25}
.tb-sync-line1{font-size:9.5px;font-weight:700;letter-spacing:.6px;color:#33C175;font-family:'IBM Plex Mono',monospace}
.tb-sync-line2{font-size:9.5px;color:var(--text3);font-family:'IBM Plex Mono',monospace}
.tb-sync-tip{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 13px;font-size:10.5px;font-family:'IBM Plex Mono',monospace;line-height:1.7;color:var(--text2);box-shadow:0 6px 22px rgba(0,0,0,.28);white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .18s;z-index:9999}
.tb-sync:hover .tb-sync-tip{opacity:1;visibility:visible;transform:translateY(0)}
.tb-sync-tip strong{color:#33C175}
@media(max-width:700px){.tb-sync-info{display:none}}
/* Idle countdown indicator (top bar) */
.tb-idle{display:flex;align-items:center;gap:7px;padding:5px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;cursor:default;transition:background .2s,border-color .2s}
.tb-idle-icon{font-size:14px;opacity:.85}
.tb-idle-info{display:flex;flex-direction:column;line-height:1.25}
.tb-idle-line1{font-size:9.5px;font-weight:700;letter-spacing:.6px;color:var(--text2);font-family:'IBM Plex Mono',monospace}
.tb-idle-line2{font-size:11px;font-weight:700;color:var(--text);font-family:'IBM Plex Mono',monospace;letter-spacing:.5px}
.tb-idle.warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}
.tb-idle.warning .tb-idle-line1{color:var(--warning)}
.tb-idle.warning .tb-idle-line2{color:var(--warning)}
.tb-idle.critical{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);animation:idlePulseRed 1.4s ease-in-out infinite}
.tb-idle.critical .tb-idle-line1{color:var(--danger)}
.tb-idle.critical .tb-idle-line2{color:var(--danger)}
@keyframes idlePulseRed{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 0 4px rgba(239,68,68,.18)}}
@media(max-width:700px){.tb-idle-info{display:none}}
.tb-user{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px}
.tb-user-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px}
.tb-user-info{font-size:11px;line-height:1.3}
.tb-user-info strong{display:block;font-weight:600;color:var(--text);font-size:12px}
.tb-user-info span{color:var(--text3);font-size:10px}

.content{flex:1;overflow-y:auto;padding:24px;background:var(--bg);scroll-behavior:smooth}
/* Sits below .notif (z-index 1100) on purpose: toasts share this corner and are
   transient, the button is permanent. A toast briefly covering the button is
   fine; the button permanently covering a message is not. Lifted clear of a
   single toast so they rarely collide at all. */
#to-top{position:fixed;right:24px;bottom:84px;z-index:1050;width:42px;height:42px;border-radius:50%;
  display:none;align-items:center;justify-content:center;cursor:pointer;font-size:17px;line-height:1;
  background:var(--accent,#00d4aa);color:#04121a;border:none;box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .15s ease,opacity .15s ease}
#to-top:hover{transform:translateY(-2px)}
#to-top.show{display:flex}
@media print{#to-top{display:none!important}}
.page{display:none;animation:fadeIn .3s}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ═══════════ KPI ROW ═══════════ */
.kpi-row{display:grid;gap:14px;margin-bottom:18px}
.k4{grid-template-columns:repeat(4,1fr)}
.k3{grid-template-columns:repeat(3,1fr)}
.k6{grid-template-columns:repeat(6,1fr)}
.kc{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.kc:hover{transform:translateY(-1px);border-color:var(--border2)}
.kc-stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kc-stripe.s-danger{background:var(--danger)}.kc-stripe.s-warning{background:var(--warning)}
.kc-stripe.s-info{background:var(--info)}.kc-stripe.s-success{background:var(--success)}
.kc-stripe.s-accent{background:var(--accent)}.kc-stripe.s-accent2{background:var(--accent2)}
.kc-stripe.s-accent3{background:var(--accent3)}
.kc-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;font-weight:600;margin-bottom:6px}
.kc-val{font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;line-height:1.05;color:var(--text)}
.kc-val.c-accent{color:var(--accent)}.kc-val.c-danger{color:var(--danger)}
.kc-val.c-warning{color:var(--warning)}.kc-val.c-info{color:var(--info)}
.kc-val.c-success{color:var(--success)}.kc-val.c-purple{color:var(--accent3)}
.kc-sub{font-size:10px;color:var(--text3);margin-top:3px;letter-spacing:.3px}

/* ═══════════ CARDS / CHARTS ═══════════ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:14px;position:relative;overflow:hidden}
.ch{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.ct{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:600;color:var(--text);letter-spacing:.3px;line-height:1.2}
.csub{font-size:10.5px;color:var(--text2);margin-top:3px;letter-spacing:.3px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.g3x{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px}
.gfull .card,.card.gfull{grid-column:1/-1}
.chart-wrap{position:relative;width:100%}
.chart-wrap canvas{max-width:100%}

/* ═══════════ SECTION HEADER ═══════════ */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:14px;flex-wrap:wrap}
.sh-t{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:600;color:var(--text)}
.sh-sub{font-size:11px;color:var(--text2);margin-top:2px;letter-spacing:.3px}

/* ═══════════ FILTER BAR ═══════════ */
.fb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:9px;align-items:center}
.fb label{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.fb select,.fb input{padding:7px 11px;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;font-size:12px;font-family:inherit;min-width:120px;cursor:pointer}
.fb select:focus,.fb input:focus{outline:none;border-color:var(--accent)}
.fb input{cursor:text}

/* ═══════════ TABLES ═══════════ */
.tw{overflow-x:auto;border-radius:8px;border:1px solid var(--border);background:var(--surface);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:600px}
thead{background:var(--surface2)}
th{padding:11px 13px;text-align:left;font-weight:600;color:var(--text2);font-size:10px;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:9px 13px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
tbody tr:hover{background:var(--surface2)}
tbody tr:last-child td{border-bottom:none}

/* ═══════════ BADGES ═══════════ */
.badge{display:inline-block;padding:3px 9px;border-radius:5px;font-size:10px;font-weight:600;white-space:nowrap;letter-spacing:.2px}
.bs{background:rgba(34,197,94,.13);color:var(--success);border:1px solid rgba(34,197,94,.22)}
.bd{background:rgba(239,68,68,.13);color:var(--danger);border:1px solid rgba(239,68,68,.22)}
.bw{background:rgba(245,158,11,.13);color:var(--warning);border:1px solid rgba(245,158,11,.22)}
.bi{background:rgba(56,189,248,.13);color:var(--info);border:1px solid rgba(56,189,248,.22)}
.bp{background:rgba(168,85,247,.13);color:var(--accent3);border:1px solid rgba(168,85,247,.22)}
.bn{background:var(--surface3);color:var(--text2);border:1px solid var(--border)}

/* ═══════════ SUMMARY CHIPS ═══════════ */
.sc-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:14px}
@media (max-width:900px){.sc-wrap{grid-template-columns:1fr}}
.sc{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.sc-ico{font-size:18px;flex-shrink:0}
.sc-val{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;line-height:1}
.sc-lbl{font-size:9.5px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
/* 3-product box layout — each box holds one product with Online/Offline/Damaged inside */
.sc.dh-box{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 13px 11px}
.dh-box-head{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:10px}
.dh-box-head .sc-ico{font-size:22px}
.dh-box-title{font-size:13px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.4px;line-height:1.1}
.dh-box-sub{font-size:10px;color:var(--text3);margin-top:2px;font-weight:500}
.dh-box-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dh-box-stat{text-align:center;padding:7px 4px;background:var(--surface2);border-radius:6px}
.dh-box-stat .sc-val{font-size:20px}
.dh-box-stat .sc-lbl{margin-top:3px}
.c-success{color:var(--success)}.c-danger{color:var(--danger)}.c-purple{color:var(--accent3)}
.c-warning{color:var(--warning)}.c-info{color:var(--info)}.c-accent{color:var(--accent)}

/* ═══════════ DP (Device Progress) GRID ═══════════ */
.dp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.dp{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;position:relative}
.dp-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.dp-ico{font-size:22px}
.dp-t{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:600;color:var(--text)}
.dp-sub{font-size:10px;color:var(--text2)}
.dp-row{display:flex;justify-content:space-between;padding:6px 0;font-size:11.5px;border-bottom:1px dashed var(--border)}
.dp-row:last-child{border-bottom:none}
.dp-row span:first-child{color:var(--text2)}
.dp-row span:last-child{font-weight:600;color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px}
.dp-bar{height:5px;background:var(--surface3);border-radius:3px;margin-top:9px;overflow:hidden}
.dp-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--success));border-radius:3px;transition:width .6s}

/* ═══════════ CXO LIST ═══════════ */
.cxo-list{display:flex;flex-direction:column;gap:7px}
.cxo-item{display:flex;align-items:center;gap:11px;padding:9px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:7px}
.cxo-rank{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;color:var(--accent);min-width:26px}
.cxo-body{flex:1;min-width:0}
.cxo-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxo-meta{font-size:10px;color:var(--text3);margin-top:1px}
.cxo-mini{height:3px;background:var(--surface3);border-radius:2px;margin-top:4px;overflow:hidden}
.cxo-bar{height:100%;background:linear-gradient(90deg,var(--danger),var(--warning));border-radius:2px;transition:width .5s}
.cxo-score{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--danger);min-width:55px;text-align:right}

/* ═══════════ UPLOAD ZONE ═══════════ */
.uz{border:2px dashed var(--border2);border-radius:11px;padding:36px 24px;text-align:center;cursor:pointer;background:var(--surface);transition:all .2s}
.uz:hover,.uz.drag{border-color:var(--accent);background:rgba(0,212,170,.04)}
.uz-ico{font-size:42px;margin-bottom:10px}
.uz-t{font-family:'Rajdhani',sans-serif;font-size:17px;font-weight:600;margin-bottom:6px;color:var(--text)}
.uz-sub{font-size:12px;color:var(--text2)}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab-btn{flex:1;padding:11px 14px;border-radius:8px;font-family:'Rajdhani',sans-serif;font-weight:600;cursor:pointer;font-size:13px;border:1px solid var(--border);transition:all .2s}
.up-progress{display:none;margin-top:14px;height:6px;background:var(--surface3);border-radius:3px;overflow:hidden}
.up-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0;transition:width .3s}

/* ═══════════ MOBILE ═══════════ */
@media(max-width:1100px){
  .lp-hero-inner{grid-template-columns:1fr;gap:30px}
  .lp-features{grid-template-columns:repeat(2,1fr)}
  .k6{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:880px){
  .g2,.g3,.g3x{grid-template-columns:1fr}
  .k4,.k3{grid-template-columns:repeat(2,1fr)}
  .dp-grid{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);z-index:200;box-shadow:var(--shadow2)}
  .sidebar.open{transform:none}
  .tb-mobile-toggle{display:flex;align-items:center;justify-content:center}
  .tb-user-info{display:none}
  .tb-date{display:none}
  .tb-title{font-size:16px}
  .tb-title span{display:none}
  .content{padding:16px}
  .lp-top{padding:14px 18px}
  .lp-hero{padding:30px 18px}
  .lp-hero h1{font-size:30px}
  .lp-features{padding:0 18px 30px}
  .lp-footer{padding:14px 18px}
  .kpi-row{gap:10px}
  .kc{padding:12px}.kc-val{font-size:20px}
}
@media(max-width:560px){
  .k6,.k4,.k3{grid-template-columns:repeat(2,1fr)}
  .lp-features{grid-template-columns:1fr}
  .lp-stats{grid-template-columns:1fr 1fr}
  .lp-hero h1{font-size:24px}
  .lp-hero-desc{font-size:13px}
  .login-card{padding:30px 22px}
  .fb select,.fb input{min-width:0;flex:1}
  .topbar{padding:0 12px;height:56px}
  .content{padding:12px}
  .card{padding:13px}
  .ct{font-size:14px}
}

/* Overlay for mobile sidebar */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;animation:fadeIn .2s}
.sb-overlay.show{display:block}

/* ═══════════ EVENT-TYPE GLOBAL FILTER BAR ═══════════ */
.event-filter-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.efb-label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-right:4px}
.efb-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:18px;font-size:11.5px;color:var(--text);font-weight:500;cursor:pointer;transition:all .15s;user-select:none}
.efb-chip:hover{border-color:var(--border2);background:var(--surface3)}
.efb-chip input{margin:0;cursor:pointer;accent-color:var(--accent)}
.efb-chip:has(input:checked){background:var(--surface3);border-color:var(--accent)}
.efb-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.btn-mini{padding:5px 11px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:6px;font-size:11px;font-family:inherit;font-weight:600;cursor:pointer;transition:all .15s}
.btn-mini:hover{background:var(--surface3);color:var(--text);border-color:var(--border2)}
.efb-hint{margin-left:auto;font-size:11px;color:var(--text3);font-style:italic}

/* ═══════════ INCLUDE-UNASSIGNED TOGGLE ═══════════ */
.iu-toggle{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--text2);cursor:pointer;user-select:none;padding:4px 9px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;font-weight:500;transition:all .15s}
.iu-toggle:hover{border-color:var(--border2);color:var(--text)}
.iu-toggle input{margin:0;cursor:pointer;accent-color:var(--accent)}
.iu-toggle:has(input:checked){border-color:var(--warning);color:var(--warning)}

/* ═══════════ BEST DRIVERS CARD ═══════════ */
.bd-list{display:flex;flex-direction:column;gap:7px}
.bd-item{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;border-left:3px solid var(--success);transition:transform .15s}
.bd-item:hover{transform:translateX(2px)}
.bd-rank{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;color:var(--success);min-width:30px}
.bd-body{flex:1;min-width:0}
.bd-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-meta{font-size:10px;color:var(--text3);margin-top:2px}
.bd-mini{height:3px;background:var(--surface3);border-radius:2px;margin-top:5px;overflow:hidden}
.bd-bar{height:100%;background:linear-gradient(90deg,var(--success),var(--accent));border-radius:2px;transition:width .5s}
.bd-score{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--success);min-width:55px;text-align:right}
.bd-rating{display:inline-block;margin-top:2px;padding:1px 6px;background:rgba(34,197,94,.15);color:var(--success);border:1px solid rgba(34,197,94,.25);border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.4px}

@media(max-width:560px){
  .event-filter-bar{padding:9px 11px;gap:6px}
  .efb-chip{font-size:11px;padding:5px 9px}
  .efb-hint{display:none}
  .btn-mini{padding:4px 9px;font-size:10.5px}
}

/* ═══════════ AI KEY TAKEAWAYS FOR LEADERSHIP ═══════════ */
.ai-insights{display:flex;flex-direction:column;gap:9px}
.ai-card{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:8px;border:1px solid;border-left-width:4px;font-size:12.5px;line-height:1.55;color:var(--text);background:var(--surface2)}
.ai-card-critical{border-color:rgba(239,68,68,.3);border-left-color:#ef4444;background:linear-gradient(135deg,rgba(239,68,68,.10),rgba(239,68,68,.04))}
.ai-card-high{border-color:rgba(245,158,11,.3);border-left-color:#f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(245,158,11,.04))}
.ai-card-positive{border-color:rgba(34,197,94,.3);border-left-color:#22c55e;background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(34,197,94,.04))}
.ai-card-action{border-color:rgba(56,189,248,.3);border-left-color:#38bdf8;background:linear-gradient(135deg,rgba(56,189,248,.10),rgba(56,189,248,.04))}
.ai-card-vendor{border-color:rgba(168,85,247,.3);border-left-color:#a855f7;background:linear-gradient(135deg,rgba(168,85,247,.10),rgba(168,85,247,.04))}
.ai-card .ai-icon{font-size:18px;flex-shrink:0;line-height:1}
.ai-card .ai-label{font-weight:700;margin-right:5px}
.ai-card .ai-label-critical{color:#ef4444}
.ai-card .ai-label-high{color:#f59e0b}
.ai-card .ai-label-positive{color:#22c55e}
.ai-card .ai-label-action{color:#38bdf8}
.ai-card .ai-label-vendor{color:#a855f7}
.ai-card strong{color:var(--text);font-weight:700}

/* ═══════════ DRIVER EXPANDABLE ROWS ═══════════ */
tr.drv-row{cursor:pointer;transition:background .15s}
tr.drv-row:hover{background:var(--surface3)}
tr.drv-row.expanded{background:var(--surface3)}
.drv-toggle{display:inline-block;width:18px;height:18px;text-align:center;line-height:16px;border:1px solid var(--border2);border-radius:4px;font-weight:700;font-size:12px;color:var(--text2);background:var(--surface);cursor:pointer;user-select:none;font-family:'IBM Plex Mono',monospace;transition:all .15s}
.drv-toggle:hover{border-color:var(--accent);color:var(--accent)}
tr.drv-detail{display:none;background:var(--surface3)}
tr.drv-detail.show{display:table-row}
tr.drv-detail td{padding:0!important;border:none!important}
.drv-detail-inner{padding:13px 16px;border-left:3px solid var(--accent)}
/* Vendor Details drill-down (build .42) */
tr.vd-detail{display:none;background:var(--surface3)}
tr.vd-detail.show{display:table-row}
tr.vd-detail td{padding:0!important;border:none!important}
.vd-detail-inner{padding:18px 20px;border-left:4px solid var(--info);background:color-mix(in srgb,var(--surface2) 30%,transparent)}
tr.vend-main{cursor:pointer;transition:background .15s}
tr.vend-main:hover{background:var(--surface2)}
tr.vend-main.expanded{background:var(--surface2)}
.vd-tg{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:var(--info);color:#fff;font-weight:700;font-size:13px;margin-right:8px;line-height:1;font-family:'Rajdhani',sans-serif}
.vd-veh-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.vd-veh-tbl th{position:sticky;top:0;background:var(--surface2);text-align:left;padding:10px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);font-weight:700;font-family:'IBM Plex Mono',monospace;border-bottom:2px solid var(--border);white-space:nowrap}
.vd-veh-tbl td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);font-weight:500}
.vd-veh-tbl tr:nth-child(even) td{background:color-mix(in srgb,var(--surface2) 45%,transparent)}
.vd-veh-tbl tr:hover td{background:var(--surface2)}
.vd-veh-tbl tr:last-child td{border-bottom:none}
.vd-veh-tbl .vd-col-months{padding-left:18px;padding-right:18px;border-left:1px solid var(--border)}
.vd-veh-tbl .vd-col-seen{padding-left:18px;border-left:1px solid var(--border)}
.vd-kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:13px}
.vd-kpi{padding:9px;background:var(--surface2);border-radius:7px;border:1px solid var(--border)}
.vd-kpi-l{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-family:'IBM Plex Mono',monospace}
.vd-kpi-v{font-family:'Rajdhani',sans-serif;font-size:25px;font-weight:700;line-height:1.15}
.vd-kpi-l{font-size:10px!important;color:var(--text2)!important}
.vd-mon-tbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.vd-mon-tbl th,.vd-mon-tbl td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;color:var(--text);font-weight:600}
.vd-mon-tbl th:first-child,.vd-mon-tbl td:first-child{text-align:left}
.vd-mon-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);font-weight:700;font-family:'IBM Plex Mono',monospace;background:var(--surface2);border-bottom:2px solid var(--border)}
.vd-mon-tbl tr:nth-child(even) td{background:color-mix(in srgb,var(--surface2) 45%,transparent)}
.vd-mon-tbl tr:hover td{background:var(--surface2)}
.vd-mon-tbl tr:last-child td{border-bottom:none}
.vd-sec-h{font-size:13.5px;color:var(--text);font-weight:700;margin:18px 0 8px;display:flex;align-items:center;gap:7px;letter-spacing:.2px}
.vd-dev-ok{color:#22c55e;font-weight:600}
.vd-dev-no{color:#ef4444;font-weight:600}
.vd-dev-dmg{color:#f59e0b;font-weight:600}
.vd-drv-chip{display:inline-block;background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:3px 9px;margin:2px 3px;font-size:11.5px;color:var(--text);font-weight:600;white-space:nowrap}
.vd-veh-tbl td:nth-child(4){font-size:12px;font-weight:600}
.vd-dev-ok{color:#16a34a;font-weight:700}
.vd-dev-no{color:#dc2626;font-weight:700}
.vd-dev-dmg{color:#d97706;font-weight:700}
.drv-vehicles-tbl{width:100%;border-collapse:collapse;margin-top:6px;font-size:11px}
.drv-vehicles-tbl th{background:var(--surface2);text-align:left;padding:6px 9px;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:10px;border-bottom:1px solid var(--border)}
.drv-vehicles-tbl td{padding:6px 9px;border-bottom:1px solid var(--border);color:var(--text)}
.drv-vehicles-tbl tr:last-child td{border-bottom:none}
.drv-empty{font-size:11px;color:var(--text3);font-style:italic;padding:6px 0}

/* ═══════════ OFFLINE DEVICE DISCLAIMER BANNER ═══════════ */
.offline-disclaimer{display:flex;align-items:flex-start;gap:10px;padding:9px 13px;background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.20);border-left:3px solid #38bdf8;border-radius:7px;font-size:11.5px;color:var(--text2);line-height:1.5;margin-bottom:13px}
.offline-disclaimer .od-icon{font-size:14px;line-height:1;flex-shrink:0;margin-top:1px}
.offline-disclaimer strong{color:var(--info);font-weight:700}

/* ═══════════ DEVICE CARDS (3 devices: DFMS / RVC / Anti-Tilt) ═══════════ */
.device-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:14px}
.device-grid-5{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:11px}
.device-card{padding:14px 15px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;border-top:3px solid var(--accent);transition:transform .18s,border-color .18s}
.device-card:hover{transform:translateY(-2px);border-top-color:var(--accent2)}
.device-card.dc-dfms{border-top-color:#22c55e}
.device-card.dc-twc{border-top-color:#06b6d4}
.device-card.dc-rvc{border-top-color:#f59e0b}
.device-card.dc-at{border-top-color:#a855f7}
.device-card.dc-drcs{border-top-color:#ec4899}
.device-card .dc-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px}
.device-card .dc-sub{font-size:10.5px;color:var(--text3);margin-bottom:10px;font-weight:500}
.device-card .dc-pct{font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;color:var(--text);line-height:1;margin-bottom:11px}
.device-card .dc-pct.pct-good{color:#22c55e}
.device-card .dc-pct.pct-warn{color:#f59e0b}
.device-card .dc-pct.pct-bad{color:#ef4444}
/* NEW: 5-column mini stats grid (Online / Offline / Damaged / Breakdown / Uninstalled) */
.device-card .dc-stats5{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:7px}
.device-card .dc-stats5 .dc-stat{padding:7px 4px;background:var(--surface);border-radius:6px;text-align:center;border:1px solid var(--border)}
.device-card .dc-stats5 .dc-stat-lbl{font-size:8.5px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.3px;line-height:1.1}
.device-card .dc-stats5 .dc-stat-val{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;margin-top:4px}
/* 6-box layout: 3 columns x 2 rows (counts on top, percentages below) */
.device-card .dc-stats6{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:7px}
.device-card .dc-stats6 .dc-stat{padding:8px 4px;background:var(--surface);border-radius:6px;text-align:center;border:1px solid var(--border)}
.device-card .dc-stats6 .dc-stat-lbl{font-size:9px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.3px;line-height:1.1}
.device-card .dc-stats6 .dc-stat-val{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;margin-top:4px}

/* Device Health Status — compact 3-column × 2-row table (count + %) per spec */
.dh-2line{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:10px 0 6px}
.dh-2line .dh-col{border-right:1px solid var(--border);display:flex;flex-direction:column}
.dh-2line .dh-col:last-child{border-right:none}
.dh-2line .dh-h{font-size:10.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;text-align:center;padding:7px 4px 6px;background:var(--surface2);border-bottom:1px solid var(--border)}
.dh-2line .dh-v{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:700;text-align:center;padding:9px 4px 3px}
.dh-2line .dh-p{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;text-align:center;padding:0 4px 9px;opacity:.85}
.dh-2line .dh-col.col-on  .dh-v, .dh-2line .dh-col.col-on  .dh-p { color:#22c55e }
.dh-2line .dh-col.col-off .dh-v, .dh-2line .dh-col.col-off .dh-p { color:#ef4444 }
.dh-2line .dh-col.col-dmg .dh-v, .dh-2line .dh-col.col-dmg .dh-p { color:#f59e0b }

/* ─── Month-over-Month change strip — column-aligned under each month ─── */
.mom-aligned{display:grid;gap:4px;margin-top:6px;padding:6px 0 2px;border-top:1px dashed var(--border);align-items:start}

/* ═════════════ JSPL SAFETY ANALYTICS (page-alerts) — build .12 ═════════════ */
.al-kpi{
  background:linear-gradient(135deg, rgba(35,41,56,.95) 0%, rgba(26,31,46,.95) 100%);
  border:1px solid var(--border);border-radius:8px;padding:10px 12px;
  position:relative;overflow:hidden
}
.al-kpi::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#F26522 0%,#33C175 100%)
}
.al-kpi:nth-child(1)::before{background:linear-gradient(180deg,#06b6d4 0%,#0891b2 100%)}
.al-kpi:nth-child(2)::before{background:linear-gradient(180deg,#8b5cf6 0%,#7c3aed 100%)}
.al-kpi:nth-child(3)::before{background:linear-gradient(180deg,#f97316 0%,#ea580c 100%)}
.al-kpi:nth-child(4)::before{background:linear-gradient(180deg,#ec4899 0%,#db2777 100%)}
.al-kpi-red::before{background:linear-gradient(180deg,#ef4444 0%,#f97316 100%) !important}
.al-kpi-amb::before{background:linear-gradient(180deg,#f59e0b 0%,#fbbf24 100%) !important}
.al-kpi-blu::before{background:linear-gradient(180deg,#3b82f6 0%,#06b6d4 100%) !important}
.al-kpi-grn::before{background:linear-gradient(180deg,#22c55e 0%,#33C175 100%) !important}
.al-kpi-l{font-size:9px;color:#9BA5B8;font-family:'IBM Plex Mono',monospace;letter-spacing:1.6px;font-weight:700;text-transform:uppercase}
.al-kpi-v{font-size:22px;font-weight:700;margin-top:2px;letter-spacing:-.5px;color:var(--text);font-family:'IBM Plex Mono',monospace;line-height:1.1}
.al-kpi:nth-child(1) .al-kpi-v{color:#06b6d4}
.al-kpi:nth-child(2) .al-kpi-v{color:#a78bfa}
.al-kpi:nth-child(3) .al-kpi-v{color:#fb923c}
.al-kpi:nth-child(4) .al-kpi-v{color:#f472b6}
.al-kpi-red .al-kpi-v{color:#ef4444 !important}
.al-kpi-amb .al-kpi-v{color:#f59e0b !important}
.al-kpi-blu .al-kpi-v{color:#3b82f6 !important}
.al-kpi-grn .al-kpi-v{color:#33C175 !important}
.al-kpi-s{font-size:9.5px;color:#7A8497;margin-top:2px;font-family:'IBM Plex Mono',monospace}

.al-filt-lbl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#F26522;letter-spacing:1.6px;font-weight:700;text-transform:uppercase;text-shadow:0 0 8px rgba(242,101,34,.2)}

.al-tt-btn{padding:4px 10px;border-radius:5px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);font-family:'IBM Plex Mono',monospace;font-size:10.5px;cursor:pointer;font-weight:600}
.al-tt-btn:hover{border-color:var(--accent);color:var(--text)}
.al-tt-btn.active{background:#F26522;border-color:#F26522;color:#0F1419}

/* Heatmap cells */
.al-hm{display:grid;gap:1px;background:var(--border);border-radius:6px;overflow:hidden}
.al-hm-row{display:contents}
.al-hm-cell{background:var(--surface2);padding:6px 4px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;min-width:42px}
.al-hm-cell.al-hm-h{background:var(--surface);color:var(--text3);font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:700;text-align:center;padding:8px 4px}
.al-hm-cell.al-hm-h-row{text-align:right;padding-right:8px}
.al-hm-cell.al-hm-zero{color:var(--text3);background:rgba(35,41,56,.4)}

/* Event-type colored legend */
.al-evt-leg{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 4px;border-radius:4px}
.al-evt-leg:hover{background:var(--surface2)}
.al-evt-leg.is-off{opacity:.45}
.al-evt-leg.is-off .al-name{text-decoration:line-through}
.al-evt-leg.is-off .al-cnt{color:var(--text3)}
.al-evt-leg .al-sw{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.al-evt-leg .al-name{flex:1;color:var(--text2);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-evt-leg .al-cnt{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--text);font-size:10.5px}

/* ═════════════ PHASE 2 — GIS Map · Sankey · Treemap · Matrix · Drill-down ═════════════ */
/* GIS Map */
.al-map-leg{display:inline-flex;align-items:center;gap:4px;color:var(--text3);font-size:10.5px;font-family:'IBM Plex Mono',monospace;margin-right:8px}
.al-map-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.25)}
.leaflet-container{background:#0a0e14 !important}
.leaflet-popup-content-wrapper{background:rgba(35,41,56,.97);color:var(--text);border:1px solid var(--border-hi);border-radius:7px;font-family:inherit}
.leaflet-popup-content-wrapper .lp-title{font-weight:700;font-size:13px;margin-bottom:5px;color:#F26522;font-family:'IBM Plex Mono',monospace}
.leaflet-popup-content-wrapper .lp-row{font-size:11px;color:var(--text2);display:flex;justify-content:space-between;gap:14px;line-height:1.6;font-family:'IBM Plex Mono',monospace}
.leaflet-popup-content-wrapper .lp-row b{color:var(--text);font-weight:600}
.leaflet-popup-tip{background:rgba(35,41,56,.97);border:1px solid var(--border-hi)}
.leaflet-control-attribution{background:rgba(15,20,25,.7) !important;color:var(--text3) !important;font-size:9px !important}
.leaflet-control-attribution a{color:var(--text2) !important}
.leaflet-bar a{background:var(--surface2) !important;color:var(--text) !important;border-color:var(--border) !important}
.leaflet-bar a:hover{background:#F26522 !important;color:#0F1419 !important}

/* Sankey */
#al-sankey svg{display:block}
.al-sk-node-lbl{font-family:'IBM Plex Mono',monospace;font-size:12.5px;fill:var(--text);font-weight:700;paint-order:stroke;stroke:var(--surface);stroke-width:3.5px;stroke-linejoin:round}
.al-sk-node-cnt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:var(--cnt-color, var(--text2));font-weight:600;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.al-sk-flow:hover{opacity:1 !important;cursor:pointer}
.al-sk-col-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.5px;font-weight:700;fill:var(--text2);text-transform:uppercase}

/* ── Multi-month filter (build .120) ─────────────────────────────────────── */
/* The filter bar is a .card, and .card clips its children (overflow:hidden).
   The month dropdown is absolutely positioned and must escape that box, so
   this one card opts out. Scoped deliberately: making .card visible globally
   would stop every card clipping to its own rounded corners. */
.card.al-filterbar{overflow:visible}
.al-mo-wrap{position:relative;display:inline-block}
.al-mo-btn{cursor:pointer;text-align:left;min-width:118px;font-family:inherit}
.al-mo-btn::after{content:"\25BE";float:right;opacity:.6;margin-left:8px}
.al-mo-btn.al-mo-active{border-color:var(--accent);color:var(--accent);font-weight:600}
/* The panel is absolutely positioned inside a position:relative wrapper, so it
   overlays the charts instead of stretching the filter bar. z-index clears the
   cards but stays below toasts and modals. */
.al-mo-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:1150;width:230px;
  background:var(--surface);border:1px solid var(--border2);border-radius:9px;
  box-shadow:0 14px 38px rgba(0,0,0,.55);overflow:hidden}
.al-mo-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-bottom:1px solid var(--border);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.2px;color:var(--text3)}
.al-mo-quick{display:flex;gap:4px}
.al-mo-quick button{font-family:inherit;font-size:9.5px;font-weight:600;cursor:pointer;
  padding:3px 7px;border-radius:5px;background:var(--surface2);
  border:1px solid var(--border);color:var(--text2);letter-spacing:0}
.al-mo-quick button:hover{background:var(--surface3);color:var(--text);border-color:var(--border2)}
.al-mo-list{max-height:250px;overflow-y:auto;padding:5px}
.al-mo-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;
  cursor:pointer;font-size:12px;color:var(--text);user-select:none}
.al-mo-row:hover{background:var(--surface2)}
.al-mo-row input{margin:0;cursor:pointer;accent-color:var(--accent);flex:0 0 auto}
.al-mo-row span{flex:1;min-width:0}
.al-mo-row i{font-style:normal;font-size:10.5px;color:var(--text3);
  font-family:'IBM Plex Mono',monospace}
.al-mo-row:has(input:checked){background:rgba(99,102,241,.14)}
.al-mo-row:has(input:checked) i{color:var(--text2)}
.al-mo-empty{padding:14px;text-align:center;color:var(--text3);font-size:11.5px}
.al-mo-note{padding:7px 11px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--warning);line-height:1.4}
@media(max-width:700px){.al-mo-panel{right:auto;left:0;width:min(230px,calc(100vw - 40px))}}


/* ── Sankey flow tracing (build .119) ─────────────────────────────────────────
   Focus + context: the base ribbons stay on screen but drop right back so the
   traced path reads as the only lit thing. Selected paths are drawn as three
   stacked layers — blurred glow, gradient core, travelling pulse — over the
   ORIGINAL curve geometry, so the light follows the real Bezier, never a
   straight line laid on top. */
#al-sankey svg.al-sk-focus .al-sk-flow{opacity:.18 !important;transition:opacity .28s ease}
#al-sankey svg.al-sk-focus .al-sk-node{opacity:.22;transition:opacity .28s ease}
#al-sankey svg.al-sk-focus .al-sk-node-lbl,
#al-sankey svg.al-sk-focus .al-sk-node-cnt{opacity:.32;transition:opacity .28s ease}
#al-sankey svg.al-sk-focus .al-sk-node.al-sk-on,
#al-sankey svg.al-sk-focus .al-sk-node-lbl.al-sk-on,
#al-sankey svg.al-sk-focus .al-sk-node-cnt.al-sk-on{opacity:1}
#al-sankey .al-sk-node{cursor:pointer}
#al-sankey .al-sk-node-lbl,#al-sankey .al-sk-node-cnt{cursor:pointer}

/* Selected node: pulsing halo, no layout shift (stroke grows inward/outward
   only, so the diagram never reflows). */
#al-sankey .al-sk-node.al-sk-on{stroke:#67E8F9;stroke-width:2;paint-order:stroke;animation:alSkNodePulse 1.9s ease-in-out infinite}
@keyframes alSkNodePulse{
  0%,100%{filter:drop-shadow(0 0 2px rgba(103,232,249,.55));stroke-opacity:.75}
  50%    {filter:drop-shadow(0 0 9px rgba(168,85,247,.95));stroke-opacity:1}
}
#al-sankey .al-sk-node-lbl.al-sk-on{fill:#EAF6FF}
#al-sankey .al-sk-node-cnt.al-sk-on{fill:#A5F3FC}

/* Layer 3 — soft bloom. The blur filter is applied once to the whole <g>, not
   per path, so adding branches does not add filter passes. */
#al-sankey .al-sk-hl-glow{stroke:url(#alSkNeon);opacity:.5;fill:none;stroke-linecap:butt}
/* Layer 4 — bright multi-colour core */
#al-sankey .al-sk-hl-core{stroke:url(#alSkNeon);opacity:.95;fill:none;stroke-linecap:butt;
  animation:alSkCore 2.2s ease-in-out infinite}
@keyframes alSkCore{0%,100%{opacity:.82}50%{opacity:1}}
/* Layer 5 — the travelling light. A dash pattern walked along the path by
   animating stroke-dashoffset: one property, no JS loop, follows the curve. */
#al-sankey .al-sk-hl-pulse{stroke:#F0FDFF;opacity:.9;fill:none;stroke-linecap:round;
  stroke-dasharray:26 250;stroke-dashoffset:276;
  animation:alSkTravel 2.1s linear infinite;
  filter:drop-shadow(0 0 4px rgba(103,232,249,.9))}
@keyframes alSkTravel{from{stroke-dashoffset:276}to{stroke-dashoffset:0}}

/* Hover brightening must not fight an active selection (it only raises the
   element under the cursor). */
#al-sankey svg.al-sk-focus .al-sk-flow:hover{opacity:.55 !important}

@media (prefers-reduced-motion:reduce){
  #al-sankey .al-sk-hl-pulse{animation:none;stroke-dasharray:none;opacity:.55}
  #al-sankey .al-sk-hl-core,#al-sankey .al-sk-node.al-sk-on{animation:none}
}

/* Breadcrumb + reset, shown only while a trace is active */
.al-sk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
#al-sk-crumb{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text2);
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.28);
  border-radius:20px;padding:5px 13px;letter-spacing:.3px}
#al-sk-crumb b{color:#67E8F9;letter-spacing:1.1px;margin-right:6px}
#al-sk-crumb span{color:#A855F7;margin:0 5px}
#al-sk-reset{font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;
  padding:5px 13px;border-radius:20px;color:#F0FDFF;
  background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(168,85,247,.22));
  border:1px solid rgba(168,85,247,.45);transition:all .15s}
#al-sk-reset:hover{background:linear-gradient(135deg,rgba(34,211,238,.4),rgba(168,85,247,.4));
  border-color:rgba(103,232,249,.8)}

/* Flow-trace panel */
#al-sk-panel{margin:0 0 10px;padding:12px 15px;border-radius:9px;
  background:linear-gradient(135deg,rgba(12,20,34,.96),rgba(28,20,52,.92));
  border:1px solid rgba(103,232,249,.3);border-left:3px solid #22D3EE;font-size:12px}
.al-sk-p-h{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.6px;
  font-weight:700;color:#67E8F9;margin-bottom:8px}
.al-sk-p-row{display:flex;gap:12px;padding:3px 0;line-height:1.45}
.al-sk-p-row>span{flex:0 0 148px;color:var(--text3);font-size:11px}
.al-sk-p-row>b{color:var(--text);font-weight:600;min-width:0;word-break:break-word}
.al-sk-p-big{color:#67E8F9 !important;font-family:'IBM Plex Mono',monospace;font-size:14px}
.al-sk-p-row i{color:var(--text3);font-style:normal;font-size:11px}
@media(max-width:700px){.al-sk-p-row{flex-direction:column;gap:1px}.al-sk-p-row>span{flex:none}}

/* Hover tooltip */
#al-sk-tip{position:fixed;z-index:1200;display:none;pointer-events:none;
  min-width:170px;max-width:290px;padding:11px 13px;border-radius:9px;
  background:rgba(9,14,24,.97);border:1px solid rgba(103,232,249,.42);
  box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:12px;color:var(--text,#E8F0FA)}
#al-sk-tip .t-h{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1.3px;
  color:#67E8F9;margin-top:7px}
#al-sk-tip .t-h:first-child{margin-top:0}
#al-sk-tip .t-v{font-weight:600;line-height:1.35;word-break:break-word}
#al-sk-tip .t-v i{color:#9BA5B8;font-style:normal;font-size:11px}
#al-sk-tip .t-f{margin-top:9px;padding-top:7px;border-top:1px solid rgba(255,255,255,.12);
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:#A855F7}


/* Treemap */
#al-treemap svg{display:block}
.al-tm-cell{cursor:pointer;transition:opacity .15s}
.al-tm-cell:hover{opacity:.78}
.al-tm-lbl{font-family:'IBM Plex Mono',monospace;font-weight:700;pointer-events:none;dominant-baseline:hanging}
.al-tm-sub{font-family:'IBM Plex Mono',monospace;pointer-events:none;dominant-baseline:hanging;opacity:.8}

/* Vendor × Event matrix */
.al-mat-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
.al-mat-tbl thead th{position:sticky;top:0;background:var(--surface2);font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--text3);font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:center;padding:7px 5px;border-bottom:1px solid var(--border);z-index:2}
.al-mat-tbl thead th:first-child{text-align:left;padding-left:12px;min-width:80px;left:0;z-index:3}
.al-mat-tbl tbody td{padding:5px 6px;border-bottom:1px solid rgba(47,55,74,.4);font-family:'IBM Plex Mono',monospace;text-align:center;font-size:10.5px;color:var(--text2)}
.al-mat-tbl tbody td:first-child{text-align:left;padding-left:12px;font-weight:700;color:var(--text);position:sticky;left:0;background:var(--surface);z-index:1}
.al-mat-tbl tbody tr:hover td{background:var(--surface2)}
.al-mat-tbl tbody tr:hover td:first-child{background:var(--surface3)}
.al-mat-cell-hot{color:#ef4444 !important;font-weight:700}
.al-mat-cell-warm{color:#f59e0b !important;font-weight:700}
.al-mat-cell-cool{color:#3b82f6 !important}
.al-mat-cell-zero{color:var(--text3) !important;opacity:.45}

/* Drill-down panel */
#al-drill-card{border-left:3px solid #F26522}

/* Repeat offender mini-row inside drill */
.al-drill-rep{display:grid;grid-template-columns:24px 1fr 50px 50px;gap:6px;align-items:center;padding:5px 9px;background:var(--surface2);border-radius:5px;border:1px solid var(--border);font-size:10.5px}
.al-drill-rep .r-rank{font-family:'IBM Plex Mono',monospace;font-weight:700;color:#F26522;text-align:center}
.al-drill-rep .r-veh{font-family:'IBM Plex Mono',monospace;font-weight:700}
.al-drill-rep .r-cnt{font-family:'IBM Plex Mono',monospace;font-weight:700;color:#ef4444;text-align:right}
.al-drill-rep .r-spd{font-family:'IBM Plex Mono',monospace;color:var(--text2);text-align:right}

/* ═════════════ DFMS CAMERA AUDIT (page-cam-events) ═════════════ */
/* Data-freshness strip — shown above KPIs */
.ce-fresh-strip{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:9px;gap:14px;flex-wrap:wrap;
  border-left:3px solid #33C175
}
.ce-fresh-strip.stale{border-left-color:#f59e0b}
.ce-fresh-strip.unavailable{border-left-color:#ef4444}
.ce-fresh-left{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.ce-fresh-dot{width:8px;height:8px;border-radius:50%;background:#33C175;flex-shrink:0;box-shadow:0 0 8px rgba(51,193,117,.65);animation:ce-fresh-pulse 2s ease-in-out infinite}
.ce-fresh-strip.stale .ce-fresh-dot{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.6)}
.ce-fresh-strip.unavailable .ce-fresh-dot{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.6);animation:none}
@keyframes ce-fresh-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.ce-fresh-title{font-size:12px;font-weight:600;color:var(--text);line-height:1.3}
.ce-fresh-title .mono{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text2);font-weight:500}
.ce-fresh-sub{font-size:10.5px;color:var(--text3);font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;margin-top:2px}
.ce-fresh-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ce-fresh-stat{display:flex;flex-direction:column;text-align:right;line-height:1.15}
.ce-fresh-stat-l{font-size:9px;color:var(--text3);font-family:'IBM Plex Mono',monospace;letter-spacing:1.5px;font-weight:700;text-transform:uppercase}
.ce-fresh-stat-v{font-size:13px;color:var(--text);font-family:'IBM Plex Mono',monospace;font-weight:700;margin-top:2px}

/* AI executive insight card — distinct from existing .ai-card to avoid collisions */
#page-cam-events .ai-card{
  background:linear-gradient(135deg,rgba(242,101,34,.07) 0%,rgba(51,193,117,.04) 100%);
  border:1px solid rgba(242,101,34,.22);
  border-radius:10px;padding:14px 18px;display:flex;gap:14px;align-items:flex-start;
  position:relative;overflow:hidden;border-left:none
}
#page-cam-events .ai-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#F26522 0%,#33C175 100%)
}
#page-cam-events .ai-card .ai-ico{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#F26522,#33C175);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#0F1419;letter-spacing:.5px
}
#page-cam-events .ai-card .ai-body{flex:1}
#page-cam-events .ai-card .ai-lbl{
  font-size:9.5px;color:#F26522;font-family:'IBM Plex Mono',monospace;
  letter-spacing:2.5px;font-weight:700;margin-bottom:4px;text-transform:uppercase
}
#page-cam-events .ai-card .ai-title{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--text)}
#page-cam-events .ai-card .ai-txt{font-size:12px;color:var(--text2);line-height:1.6}
#page-cam-events .ai-card .ai-txt strong{color:var(--text);font-weight:600}
#page-cam-events .ai-card .ai-txt .pos{color:#33C175;font-weight:700}
#page-cam-events .ai-card .ai-txt .neg{color:#ef4444;font-weight:700}
#page-cam-events .ai-card .ai-txt .warn{color:#f59e0b;font-weight:700}

/* Fault-type filter chips */
.ce-chip{padding:5px 11px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);font-size:11px;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-weight:500;font-family:inherit}
.ce-chip:hover{border-color:var(--border-hi);color:var(--text)}
.ce-chip.active{background:rgba(242,101,34,.16);border-color:rgba(242,101,34,.42);color:#F26522;font-weight:700}
.ce-chip .ce-ct{font-family:'IBM Plex Mono',monospace;font-size:10px;opacity:.85;background:var(--surface);padding:1px 5px;border-radius:8px}
.ce-chip.active .ce-ct{background:rgba(242,101,34,.22)}

.ce-select{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;outline:none}
.ce-select:focus{border-color:var(--accent)}
.ce-search{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:5px 11px;font-size:11.5px;font-family:inherit;outline:none;width:180px}
.ce-search:focus{border-color:var(--accent)}

/* Layout grids */
.g3-1{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:12px}
.g2-3{display:grid;grid-template-columns:2.1fr 1fr;gap:12px}
@media (max-width: 1280px){ .g3-1{grid-template-columns:1fr 1fr}; .g2-3{grid-template-columns:1fr} }

/* Camera thumbnail grid */
.ce-thumb{background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .15s;aspect-ratio:1.4/1;display:flex;flex-direction:column;position:relative}
.ce-thumb:hover{transform:translateY(-2px);border-color:#F26522;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ce-thumb-img{flex:1;background:linear-gradient(135deg,#1f2531 0%,#2a3142 100%);background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ce-thumb-img.no-img::after{content:'🎥';font-size:30px;opacity:.4;position:absolute}
.ce-thumb-overlay{position:absolute;top:6px;right:6px;z-index:2}
.ce-thumb-meta{padding:6px 8px;background:rgba(15,20,25,.92);display:flex;flex-direction:column;gap:1px}
.ce-thumb-veh{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:var(--text);line-height:1.2}
.ce-thumb-info{display:flex;justify-content:space-between;font-size:9px;color:var(--text3);font-family:'IBM Plex Mono',monospace}

/* Repeat offenders list */
.ce-rep{display:grid;grid-template-columns:24px 1fr 70px 50px;gap:8px;align-items:center;padding:7px 10px;background:var(--surface2);border-radius:6px;border:1px solid var(--border);font-size:11.5px}
.ce-rep-rank{font-family:'IBM Plex Mono',monospace;font-weight:700;color:#F26522;font-size:12px;text-align:center}
.ce-rep-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.ce-rep-veh{font-family:'IBM Plex Mono',monospace;font-weight:700}
.ce-rep-sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ce-rep-dept{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text3);text-align:right}
.ce-rep-count{font-family:'IBM Plex Mono',monospace;font-weight:700;color:#ef4444;text-align:right}

/* Event log "View" link */
.ce-cam-link{display:inline-flex;align-items:center;gap:5px;color:#F26522;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;text-decoration:none;cursor:pointer;padding:3px 8px;border-radius:5px;border:1px solid rgba(242,101,34,.3);background:rgba(242,101,34,.08)}
.ce-cam-link:hover{background:rgba(242,101,34,.18);border-color:#F26522}
.ce-cam-link.disabled{color:var(--text3);border-color:var(--border);background:var(--surface);cursor:not-allowed;opacity:.5}

.ce-fault-pill{display:inline-block;padding:3px 9px;border-radius:11px;font-size:10px;font-weight:700;font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;border:1px solid;white-space:nowrap}
.ce-fp-orange{background:rgba(242,101,34,.14);color:#F26522;border-color:rgba(242,101,34,.35)}
.ce-fp-amber {background:rgba(245,158,11,.14);color:#f59e0b;border-color:rgba(245,158,11,.35)}
.ce-fp-blue  {background:rgba(59,130,246,.14);color:#3b82f6;border-color:rgba(59,130,246,.35)}
.ce-fp-purple{background:rgba(168,85,247,.14);color:#a855f7;border-color:rgba(168,85,247,.35)}
.ce-fp-red   {background:rgba(239,68,68,.14);color:#ef4444;border-color:rgba(239,68,68,.35)}
.ce-fp-gray  {background:var(--surface2);color:var(--text2);border-color:var(--border)}

.ce-page-btn{padding:4px 10px;border-radius:5px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);font-family:'IBM Plex Mono',monospace;font-size:11px;cursor:pointer;font-weight:600}
.ce-page-btn:hover{border-color:#F26522;color:var(--text)}
.ce-page-btn.active{background:#F26522;border-color:#F26522;color:#0F1419}

/* ───── Lightbox modal for camera images ───── */
.ce-lightbox{
  position:fixed;inset:0;z-index:9999;background:rgba(8,12,18,.92);
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);
  animation:ce-lb-fadein .18s ease-out
}
.ce-lightbox.open{display:flex}
@keyframes ce-lb-fadein{from{opacity:0}to{opacity:1}}
.ce-lb-box{
  position:relative;background:var(--surface);border:1px solid var(--border-hi);border-radius:12px;
  max-width:1100px;width:90vw;max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden
}
.ce-lb-head{
  display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--border);background:var(--surface2)
}
.ce-lb-h-veh{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:15px;color:var(--text)}
.ce-lb-h-dept{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text3)}
.ce-lb-h-time{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text2)}
.ce-lb-close{
  width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--border-hi);
  color:var(--text2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:600
}
.ce-lb-close:hover{background:#ef4444;color:#fff;border-color:#ef4444}
.ce-lb-body{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;background:#0a0e14;min-height:360px;position:relative;overflow:auto}
.ce-lb-img{max-width:100%;max-height:78vh;border-radius:6px;object-fit:contain;cursor:context-menu;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.ce-lb-loading{color:var(--text3);font-family:'IBM Plex Mono',monospace;font-size:12px}
.ce-lb-error{color:#ef4444;font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:center;padding:20px;max-width:480px;line-height:1.6}
.ce-lb-error strong{color:#fff}
.ce-lb-foot{
  display:flex;align-items:center;gap:12px;padding:10px 18px;
  border-top:1px solid var(--border);background:var(--surface2);font-size:11px;color:var(--text3);font-family:'IBM Plex Mono',monospace
}
.ce-lb-fault{padding:3px 10px;border-radius:11px;font-size:10.5px;font-weight:700;font-family:'IBM Plex Mono',monospace;letter-spacing:.4px}
.ce-lb-hint{margin-left:auto;color:var(--text2)}
.ce-lb-hint kbd{background:var(--surface);border:1px solid var(--border-hi);border-radius:3px;padding:1px 6px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text)}
.ce-lb-dl-btn{padding:5px 12px;border-radius:6px;background:#F26522;color:#0F1419;border:none;font-weight:700;font-family:inherit;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ce-lb-dl-btn:hover{background:#ff7733}
.ce-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(15,20,25,.85);border:1px solid var(--border-hi);color:var(--text);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700}
.ce-lb-nav:hover{background:#F26522;border-color:#F26522;color:#0F1419}
.ce-lb-nav.prev{left:14px}
.ce-lb-nav.next{right:14px}

.mom-aligned .mom-cell{display:flex;justify-content:center;align-items:center;min-height:24px}
.mom-aligned .mom-cell.mom-empty{visibility:hidden}
.mom-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:11px;font-size:10px;font-family:'IBM Plex Mono',monospace;font-weight:700;border:1px solid transparent;white-space:nowrap;line-height:1.1}
.mom-pill .mom-arrow{font-size:11px;line-height:1;display:inline-block;font-weight:900}
.mom-pill.mom-up   {background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#ef4444}
.mom-pill.mom-down {background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.40);color:#22c55e}
.mom-pill.mom-flat {background:var(--surface2);border-color:var(--border);color:var(--text3)}
.mom-summary-bar{display:flex;justify-content:flex-end;padding:5px 8px 2px;font-size:10.5px;color:var(--text2);font-family:'IBM Plex Mono',monospace;gap:6px;align-items:center}
.mom-summary-bar.mom-up   {color:#ef4444}
.mom-summary-bar.mom-down {color:#22c55e}
.mom-summary-bar .mom-arrow{font-size:13px;font-weight:900}

/* Chart-type selector dropdown — modern, subtle */
.mt-chart-type{
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
  border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .15s;outline:none;margin-left:auto
}
.mt-chart-type:hover{border-color:var(--accent);background:var(--surface3)}
.mt-chart-type:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,212,170,.15)}

/* Comparison card — extra polish */
.mt-compare-card{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border:1px solid var(--border);
  position:relative;overflow:hidden
}
.mt-compare-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#ef4444 0%,#f59e0b 33%,#38bdf8 66%,#a855f7 100%);
  opacity:.6
}
.mt-compare-legend{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  padding:8px 4px 2px;margin-top:6px;border-top:1px dashed var(--border)
}
.mt-compare-legend .mtl-item{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;
  color:var(--text2);font-family:'IBM Plex Mono',monospace
}
.mt-compare-legend .mtl-swatch{
  width:14px;height:14px;border-radius:4px;display:inline-block;
  box-shadow:0 1px 3px rgba(0,0,0,.3)
}
.mt-compare-legend .mtl-val{color:var(--text);font-weight:700;margin-left:2px}
/* Legacy 3-column variant kept for safety */
.device-card .dc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}
.device-card .dc-stats .dc-stat{padding:7px 6px;background:var(--surface);border-radius:6px;text-align:center;border:1px solid var(--border)}
.device-card .dc-stats .dc-stat-lbl{font-size:9px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.device-card .dc-stats .dc-stat-val{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;margin-top:3px}
.device-card .dc-stat.s-on .dc-stat-val{color:#22c55e}
.device-card .dc-stat.s-off .dc-stat-val{color:#ef4444}
.device-card .dc-stat.s-dmg .dc-stat-val{color:#f59e0b}
.device-card .dc-stat.s-brk .dc-stat-val{color:#a855f7}
.device-card .dc-stat.s-uni .dc-stat-val{color:#94a3b8}
.device-card .dc-installed{font-size:10.5px;color:var(--text3);margin-top:8px;padding-top:7px;border-top:1px solid var(--border)}
.device-card .dc-installed strong{color:var(--text2);font-family:'IBM Plex Mono',monospace}

/* ═══════════ DEVICE HEALTH PAGE SECTIONS ═══════════ */
.dh-section{margin-bottom:18px}
.dh-section-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:linear-gradient(135deg,var(--surface3),var(--surface2));border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;margin-bottom:11px}
.dh-section-head .dh-sect-title{font-size:13px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.6px;font-family:'Rajdhani',sans-serif}
.dh-section-head .dh-sect-sub{font-size:11px;color:var(--text3);margin-left:auto;font-weight:500}
.dh-section.sect-rvc .dh-section-head{border-left-color:#f59e0b}
.dh-section.sect-at .dh-section-head{border-left-color:#a855f7}

/* ═════════════ GEOFENCE REPORTS (page-geofence) — build .25 ═════════════ */
#gf-map{height:560px;width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.35);position:relative;background:#0a0f15;z-index:0;transition:height .15s}
#gf-map.gf-map-full{position:fixed;inset:0;width:100vw;height:100vh !important;z-index:6000;border-radius:0;border:none}
.gf-fs-btn{background:#fff;border:2px solid rgba(0,0,0,.2);border-radius:4px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#222;line-height:1}
.gf-fs-btn:hover{background:#f4f4f4}
.gf-fs-exit-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6001;background:rgba(10,14,20,.85);color:#fff;padding:7px 16px;border-radius:20px;font-size:12px;font-family:'IBM Plex Sans',sans-serif;pointer-events:none;display:none}
#gf-map.gf-map-full .gf-fs-exit-hint{display:block}
.gf-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;font-size:11.5px;font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.4px;color:var(--text2);transition:all .15s;user-select:none}
.gf-chip:hover{border-color:var(--border2);background:var(--surface3)}
.gf-chip.active{border-color:#F26522;background:rgba(242,101,34,.14);color:var(--text);box-shadow:0 0 0 1px rgba(242,101,34,.35)}
.gf-chip .gf-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1.5px solid rgba(255,255,255,.4)}
.gf-chip .gf-cnt{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text3);padding:1px 6px;background:var(--surface);border-radius:9px;border:1px solid var(--border)}
.gf-chip .gf-act{display:inline-flex;gap:2px;margin-left:2px}
.gf-chip .gf-act button{background:transparent;border:none;cursor:pointer;font-size:11px;padding:0 2px;opacity:.65;color:var(--text2)}
.gf-chip .gf-act button:hover{opacity:1}
.gf-lock-note{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px dashed var(--border2);border-radius:7px;font-size:10.5px;color:var(--text3)}
/* leaflet.draw toolbar — keep readable on dark theme */
.leaflet-draw-toolbar a{background-color:#fff !important}
.leaflet-container{font-family:'IBM Plex Sans',sans-serif}
.gf-modal-bg{position:fixed;inset:0;background:rgba(5,8,12,.65);backdrop-filter:blur(2px);z-index:5000;display:none;align-items:center;justify-content:center}
.gf-modal-bg.open{display:flex}
.gf-modal{background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:22px;width:min(420px,92vw);box-shadow:var(--shadow2)}
.gf-modal h3{font-size:17px;margin-bottom:4px}
.gf-modal .sub{font-size:11.5px;color:var(--text2);margin-bottom:14px}
.gf-modal input[type=text]{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-size:13px;margin-bottom:12px;font-family:'IBM Plex Sans',sans-serif}
.gf-color-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.gf-color-sw{width:28px;height:28px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:transform .12s}
.gf-color-sw:hover{transform:scale(1.12)}
.gf-color-sw.sel{border-color:#fff;box-shadow:0 0 0 2px rgba(242,101,34,.6)}

/* ═══════════ SUPERMAX AUDIT TABLES ═══════════ */
.sm-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin-bottom:14px}
.sm-stat-card{padding:11px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;border-left:3px solid var(--accent)}
.sm-stat-card.sm-good{border-left-color:#22c55e}
.sm-stat-card.sm-warn{border-left-color:#f59e0b}
.sm-stat-card.sm-bad{border-left-color:#ef4444}
.sm-stat-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.sm-stat-val{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:var(--text);margin-top:2px;line-height:1.1}
.sm-stat-sub{font-size:10px;color:var(--text2);margin-top:2px}
.sm-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.sm-tbl th{background:var(--surface3);padding:9px 11px;text-align:left;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:10px;border-bottom:1px solid var(--border)}
.sm-tbl td{padding:8px 11px;border-bottom:1px solid var(--border);color:var(--text)}
.sm-tbl tr:hover{background:var(--surface2)}
.sm-tbl .sm-time{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text3);white-space:nowrap}
.sm-tbl .sm-user{font-weight:600;color:var(--text)}
.sm-empty{padding:24px;text-align:center;color:var(--text3);font-size:11.5px;font-style:italic}

/* ═══════════ LIVE SYNC INDICATOR ═══════════ */
#sync-bar{position:fixed;bottom:0;left:0;right:0;z-index:9999;height:3px;background:transparent;pointer-events:none;transition:background .3s}
#sync-bar.syncing{background:linear-gradient(90deg,var(--accent) 0%,var(--success) 50%,var(--accent) 100%);animation:syncPulse 1.5s ease-in-out infinite}
@keyframes syncPulse{0%,100%{opacity:.4}50%{opacity:1}}
.sync-badge{position:fixed;bottom:10px;right:14px;display:flex;align-items:center;gap:7px;padding:7px 12px;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-size:11px;color:var(--text2);z-index:9998;box-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:none;transition:opacity .4s}
.sync-badge.hidden{opacity:0}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0}
.sync-dot.pulse{animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.sync-dot.warn{background:var(--warning)}
.sync-dot.off{background:var(--danger)}

/* ═══════════ MASKED URL FIELD ═══════════ */
.masked-url-wrap{position:relative;display:flex;align-items:center;gap:8px}
.masked-url-field{flex:1;padding:9px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text2);font-size:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:.5px;user-select:none;pointer-events:none}
.gsheet-url-edit{flex:1;padding:9px 13px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:12.5px;font-family:inherit}
.gsheet-url-edit:focus{border-color:var(--accent);outline:none}
.btn-refresh-now{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:linear-gradient(135deg,var(--accent),var(--success));border:none;border-radius:7px;color:#000;font-weight:700;font-size:12px;font-family:inherit;cursor:pointer;transition:all .18s;box-shadow:0 2px 8px rgba(0,212,170,.22)}
.btn-refresh-now:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,212,170,.35)}
.btn-refresh-now:active{transform:translateY(0)}
.btn-refresh-now.spinning svg,.btn-refresh-now.spinning .ri{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.next-sync-info{font-size:10.5px;color:var(--text3);margin-top:5px;font-style:italic}

/* ═══════════ AUDIT TABLE IMPROVED ═══════════ */
.audit-section-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface3);border-radius:7px;margin-bottom:10px;border-left:3px solid var(--accent)}
.audit-section-title{font-size:12.5px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px}
.audit-count-badge{font-size:10px;padding:3px 9px;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text2);font-weight:600;font-family:'IBM Plex Mono',monospace}

/* ═══════════ GLASSMORPHISM SYNC POPUP ═══════════ */
.glass-popup-overlay{position:fixed;top:24px;right:24px;z-index:99999;pointer-events:none;display:flex;flex-direction:column;gap:12px;max-width:380px}
.glass-popup{pointer-events:auto;backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);background:rgba(20,28,42,.72);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;box-shadow:0 8px 32px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);color:#fff;font-size:12.5px;min-width:300px;animation:gpSlideIn .42s cubic-bezier(.2,.9,.3,1.2);position:relative;overflow:hidden}
[data-theme="light"] .glass-popup{background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.08);color:#1a2238;box-shadow:0 8px 32px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.6)}
.glass-popup.gp-syncing{border-color:rgba(0,212,170,.45)}
.glass-popup.gp-success{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.18)}
[data-theme="light"] .glass-popup.gp-success{background:rgba(34,197,94,.12)}
.glass-popup.gp-error{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.16)}
[data-theme="light"] .glass-popup.gp-error{background:rgba(239,68,68,.10)}
.glass-popup.gp-fade-out{animation:gpFadeOut .55s forwards}
@keyframes gpSlideIn{0%{opacity:0;transform:translateX(20px) scale(.92)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes gpFadeOut{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(20px) scale(.95)}}
.gp-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.gp-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.gp-syncing .gp-icon{background:linear-gradient(135deg,#00d4aa,#00b894);box-shadow:0 0 20px rgba(0,212,170,.6);animation:gpPulse 1.4s ease-in-out infinite}
.gp-success .gp-icon{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 0 16px rgba(34,197,94,.65)}
.gp-error .gp-icon{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 0 16px rgba(239,68,68,.5)}
@keyframes gpPulse{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(0,212,170,.6)}50%{transform:scale(1.12);box-shadow:0 0 30px rgba(0,212,170,.85)}}
.gp-title{font-weight:700;font-size:12.5px;flex:1;letter-spacing:.2px}
.gp-subtitle{font-size:11px;opacity:.78;margin-bottom:9px;line-height:1.45}
.gp-progress-track{height:5px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;position:relative;margin-top:7px}
[data-theme="light"] .gp-progress-track{background:rgba(0,0,0,.06)}
.gp-progress-fill{height:100%;background:linear-gradient(90deg,#00d4aa,#22c55e,#00d4aa);background-size:200% 100%;border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1);animation:gpShimmer 1.8s linear infinite;box-shadow:0 0 12px rgba(0,212,170,.55)}
@keyframes gpShimmer{0%{background-position:0% 0}100%{background-position:200% 0}}
.gp-percent{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:#00d4aa;margin-top:5px;display:inline-block}
.gp-success .gp-progress-fill{background:linear-gradient(90deg,#22c55e,#16a34a);animation:none}

/* ═══════════ IDLE WARNING MODAL ═══════════ */
.idle-modal-overlay{position:fixed;inset:0;z-index:100000;background:rgba(8,12,26,.50);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);display:none;align-items:center;justify-content:center;animation:gpSlideIn .3s;overflow:hidden}
.idle-modal-overlay.show{display:flex}
/* build .60: animated "water glass" gradient blobs floating behind the frosted card */
.idle-modal-overlay::before,.idle-modal-overlay::after{content:"";position:absolute;width:46vmin;height:46vmin;border-radius:50%;filter:blur(55px);opacity:.5;pointer-events:none;z-index:0}
.idle-modal-overlay::before{background:radial-gradient(circle at 30% 30%,#8b5cf6,#3b82f6 58%,transparent 72%);top:6%;left:10%;animation:glassBlobA 15s ease-in-out infinite}
.idle-modal-overlay::after{background:radial-gradient(circle at 60% 60%,#ec4899,#f59e0b 52%,transparent 72%);bottom:4%;right:8%;animation:glassBlobB 18s ease-in-out infinite}
@keyframes glassBlobA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(16%,12%) scale(1.14)}66%{transform:translate(-10%,18%) scale(.92)}}
@keyframes glassBlobB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-15%,-12%) scale(1.12)}66%{transform:translate(12%,-16%) scale(.95)}}
@keyframes glassSheen{0%,100%{transform:translateX(-80%) rotate(8deg)}50%{transform:translateX(240%) rotate(8deg)}}
.idle-modal{position:relative;z-index:1;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));border:1.5px solid rgba(255,255,255,.32);border-radius:22px;padding:28px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 2px rgba(255,255,255,.06);color:#fff;overflow:hidden}
.idle-modal::after{content:"";position:absolute;top:-60%;left:-40%;width:65%;height:200%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18),transparent 65%);transform:rotate(8deg);pointer-events:none;z-index:0;animation:glassSheen 8s ease-in-out infinite}
.idle-modal>*{position:relative;z-index:1}
[data-theme="light"] .idle-modal{background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.52));border:1.5px solid rgba(255,255,255,.85);color:#1a2238;box-shadow:0 24px 70px rgba(30,40,80,.30),inset 0 1px 2px rgba(255,255,255,.95)}
.idle-modal-icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#d97706);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 16px;box-shadow:0 0 30px rgba(245,158,11,.55);animation:gpPulse 1.6s ease-in-out infinite}
.idle-modal-title{font-size:18px;font-weight:700;margin-bottom:8px}
.idle-modal-subtitle{font-size:13px;opacity:.78;margin-bottom:18px;line-height:1.6}
.idle-countdown{font-family:'Rajdhani',sans-serif;font-size:48px;font-weight:700;color:#f59e0b;line-height:1;margin-bottom:18px;letter-spacing:1px}
.idle-modal-buttons{display:flex;gap:12px;justify-content:center}
.idle-btn{padding:11px 22px;border-radius:8px;border:none;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .18s}
.idle-btn-continue{background:linear-gradient(135deg,#00d4aa,#16a34a);color:#000}
.idle-btn-continue:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,212,170,.4)}
.idle-btn-logout{background:rgba(239,68,68,.18);color:#ef4444;border:1px solid rgba(239,68,68,.32)}
.idle-btn-logout:hover{background:rgba(239,68,68,.28)}

/* ═══════════ MODULE CONTROL — toggle switches ═══════════ */
.mc-switch{ position:relative; display:inline-block; width:42px; height:22px; flex-shrink:0; cursor:pointer }
.mc-switch input{ opacity:0; width:0; height:0 }
.mc-slider{ position:absolute; inset:0; background:rgba(120,130,150,.35); border-radius:22px; transition:background .22s; cursor:pointer }
.mc-slider::before{ content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .22s, background .22s; box-shadow:0 1px 3px rgba(0,0,0,.3) }
.mc-switch input:checked + .mc-slider{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.mc-switch input:checked + .mc-slider::before{ transform:translateX(20px); background:#fff }
.mc-switch input:focus + .mc-slider{ box-shadow:0 0 0 2px rgba(34,197,94,.35) }
[data-theme="machinemax"] .mc-switch input:checked + .mc-slider{ background:linear-gradient(135deg,var(--mm-green),#1a9950); box-shadow:0 0 8px rgba(51,193,117,.5) }

/* ═══════════ CHAT — full messaging UI ═══════════ */
.chat-shell{ display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 130px); min-height:520px; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden }
@media (max-width:880px){ .chat-shell{ grid-template-columns:1fr; height:calc(100vh - 110px) } .chat-shell.has-active .chat-rail{ display:none } .chat-shell:not(.has-active) .chat-pane{ display:none } }

/* Left rail */
.chat-rail{ display:flex; flex-direction:column; border-right:1px solid var(--border); background:var(--surface2); min-width:0 }
.chat-rail-head{ display:flex; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); gap:10px }
.chat-rail-title{ font-size:14px; font-weight:700; color:var(--text); flex:1; letter-spacing:.3px }
.chat-new-btn{ width:30px; height:30px; border-radius:50%; border:none; background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; font-size:18px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s, box-shadow .15s; line-height:1 }
.chat-new-btn:hover{ transform:scale(1.08); box-shadow:0 3px 10px rgba(59,130,246,.45) }
.chat-rail-search{ padding:9px 11px; border-bottom:1px solid var(--border) }
.chat-rail-search input{ width:100%; padding:7px 11px; background:var(--surface3,var(--surface)); border:1px solid var(--border); border-radius:18px; color:var(--text); font-size:11.5px; font-family:inherit }
.chat-rail-search input:focus{ outline:none; border-color:#3b82f6 }
.chat-list{ flex:1; overflow:auto; padding:6px 0 }
.chat-empty{ padding:30px 18px; text-align:center; color:var(--text3); font-size:12.5px; line-height:1.7 }

/* Conversation item */
.chat-item{ display:flex; align-items:center; gap:11px; padding:10px 14px; cursor:pointer; border-left:3px solid transparent; transition:background .15s, border-color .15s }
.chat-item:hover{ background:rgba(255,255,255,.03) }
.chat-item.active{ background:rgba(59,130,246,.10); border-left-color:#3b82f6 }
.chat-item-avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18) }
.chat-item-avatar.av-global{ background:linear-gradient(135deg,#f59e0b,#d97706) }
.chat-item-avatar.av-dept  { background:linear-gradient(135deg,#a855f7,#7c3aed) }
.chat-item-avatar.av-vendor{ background:linear-gradient(135deg,#06b6d4,#0891b2) }
.chat-item-avatar.av-direct{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.chat-item-avatar.av-group { background:linear-gradient(135deg,#3b82f6,#1d4ed8) }
.chat-item-body{ flex:1; min-width:0 }
.chat-item-name{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chat-item-preview{ font-size:11.5px; color:var(--text2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chat-item-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0 }
.chat-item-time{ font-size:9.5px; color:var(--text3); font-family:'IBM Plex Mono',monospace }
.chat-item-unread{ min-width:18px; height:18px; padding:0 6px; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; font-size:10px; font-weight:700; border-radius:9px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(34,197,94,.5) }

/* Right pane */
.chat-pane{ display:flex; flex-direction:column; background:var(--surface); min-width:0 }
.chat-pane-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px }
.chat-pane-active{ flex:1; display:flex; flex-direction:column; min-height:0 }
.chat-pane-head{ display:flex; align-items:center; gap:11px; padding:11px 16px; border-bottom:1px solid var(--border); background:var(--surface2) }
.chat-pane-avatar{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; background:linear-gradient(135deg,#3b82f6,#1d4ed8) }
.chat-pane-name{ font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chat-pane-sub{ font-size:11px; color:var(--text2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chat-close-btn{ width:30px; height:30px; border-radius:50%; border:none; background:transparent; color:var(--text2); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s, color .15s }
.chat-close-btn:hover{ background:rgba(239,68,68,.12); color:#ef4444 }

/* Messages */
.chat-messages{ flex:1; overflow:auto; padding:16px 18px; display:flex; flex-direction:column; gap:6px; background-image: linear-gradient(to bottom, transparent 0, transparent 100%) }
.chat-day-sep{ align-self:center; padding:3px 10px; background:rgba(120,130,150,.18); border-radius:10px; font-size:10px; color:var(--text2); margin:8px 0; font-family:'IBM Plex Mono',monospace; letter-spacing:.5px }
.chat-msg-row{ display:flex; max-width:78%; }
.chat-msg-row.mine{ align-self:flex-end; justify-content:flex-end }
.chat-msg-row.theirs{ align-self:flex-start }
.chat-msg{ position:relative; padding:8px 12px 6px; border-radius:14px; font-size:13px; line-height:1.45; word-wrap:break-word; overflow-wrap:anywhere; box-shadow:0 1px 1.5px rgba(0,0,0,.15) }
.chat-msg-row.mine .chat-msg{ background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(34,197,94,.15)); border:1px solid rgba(34,197,94,.32); color:var(--text); border-bottom-right-radius:5px }
.chat-msg-row.theirs .chat-msg{ background:var(--surface2); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:5px }
.chat-msg-from{ font-size:10.5px; font-weight:700; color:var(--info); margin-bottom:2px }
.chat-msg-text{ white-space:pre-wrap }
.chat-msg-text.deleted{ font-style:italic; color:var(--text3) }
.chat-msg-foot{ display:flex; align-items:center; gap:5px; margin-top:3px; font-size:9.5px; color:var(--text3); font-family:'IBM Plex Mono',monospace; justify-content:flex-end }
.chat-tick{ display:inline-flex; align-items:center; line-height:1; font-size:11px }
.chat-tick-sent     { color:var(--text3) }
.chat-tick-delivered{ color:var(--text2) }
.chat-tick-seen     { color:#3b82f6 }
[data-theme="light"] .chat-tick-seen{ color:#1d4ed8 }
.chat-msg-del-btn{ position:absolute; top:-9px; right:-9px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(239,68,68,.95); color:#fff; font-size:11px; cursor:pointer; display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.3) }
.chat-msg-row.mine:hover .chat-msg-del-btn{ display:flex }

/* Composer */
.chat-composer{ display:flex; align-items:flex-end; gap:10px; padding:11px 14px; border-top:1px solid var(--border); background:var(--surface2) }
.chat-composer textarea{ flex:1; resize:none; max-height:120px; min-height:38px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:18px; color:var(--text); font-size:13px; font-family:inherit; line-height:1.45 }
.chat-composer textarea:focus{ outline:none; border-color:#3b82f6 }
.chat-send-btn{ width:38px; height:38px; border-radius:50%; border:none; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s, box-shadow .15s }
.chat-send-btn:hover{ transform:scale(1.08); box-shadow:0 3px 10px rgba(34,197,94,.5) }
.chat-send-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none }
.chat-pane-readonly{ padding:9px 16px; background:rgba(236,72,153,.10); border-top:1px solid rgba(236,72,153,.25); font-size:11.5px; color:#ec4899; text-align:center }

/* New chat modal user list */
.nc-user-row{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:5px; cursor:pointer; transition:background .12s }
.nc-user-row:hover{ background:rgba(59,130,246,.08) }
.nc-user-row input[type="checkbox"]{ flex-shrink:0 }
.nc-user-row input[type="radio"]{ flex-shrink:0 }
.nc-user-avatar{ width:28px; height:28px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; background:linear-gradient(135deg,#3b82f6,#1d4ed8) }
.nc-user-info{ flex:1; min-width:0 }
.nc-user-name{ font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.nc-user-sub{ font-size:10px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* MachineMax theme tweaks */
[data-theme="machinemax"] .chat-msg-row.mine .chat-msg{ background:linear-gradient(135deg,rgba(51,193,117,.25),rgba(51,193,117,.15)); border-color:rgba(51,193,117,.4) }
[data-theme="machinemax"] .chat-send-btn{ background:linear-gradient(135deg,var(--mm-green),#1a9950); box-shadow:0 0 12px rgba(51,193,117,.4) }
[data-theme="machinemax"] .chat-new-btn{ background:linear-gradient(135deg,var(--mm-blue),#1d4ed8) }

/* ═══════════ DEVICE HEALTH INTELLIGENCE REPORT ═══════════ */
/* Installation KPI tracker cards */
.di-target{ font-size:9.5px; color:var(--text3); text-transform:uppercase; letter-spacing:1.2px; font-family:'IBM Plex Mono',monospace; margin-bottom:2px }
.di-ring-wrap{ display:flex; align-items:center; gap:18px; padding:14px 0 8px }
.di-ring{ position:relative; width:80px; height:80px; flex-shrink:0 }
.di-ring svg{ transform:rotate(-90deg) }
.di-ring-bg{ fill:none; stroke:var(--border); stroke-width:8 }
.di-ring-fill{ fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) }
.di-ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Orbitron','Rajdhani',monospace; font-weight:700; font-size:13px }
.di-ring-stats{ flex:1 }
.di-stat-row{ display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid var(--border); font-size:12px }
.di-stat-row:last-child{ border-bottom:none }
.di-stat-label{ color:var(--text2) }
.di-stat-value{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px }
.di-kpi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px }
/* Fines KPI cards — always 5 in one horizontal row */
#fines-kpi-grid{ display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:10px; margin-bottom:14px }
@media(max-width:1100px){ #fines-kpi-grid{ grid-template-columns:repeat(3,1fr) !important } }
@media(max-width:680px){ #fines-kpi-grid{ grid-template-columns:repeat(2,1fr) !important } }
@media(max-width:900px){ .di-kpi-grid{ grid-template-columns:1fr } }

/* Installation progress bar (thin, branded) */
.di-prog-track{ height:6px; background:var(--surface3); border-radius:99px; overflow:hidden; margin:6px 0 }
.di-prog-fill{ height:100%; border-radius:99px; transition:width .7s cubic-bezier(.4,0,.2,1) }

/* Compliance score badge */
.cscore{ display:inline-block; padding:3px 10px; border-radius:6px; font-size:10.5px; font-weight:700; font-family:'IBM Plex Mono',monospace; letter-spacing:.8px }
.cscore.excellent{ background:rgba(34,197,94,.14); color:#22c55e; border:1px solid rgba(34,197,94,.28) }
.cscore.good{      background:rgba(51,193,117,.12); color:#33C175; border:1px solid rgba(51,193,117,.24) }
.cscore.warning{   background:rgba(245,158,11,.14); color:#f59e0b; border:1px solid rgba(245,158,11,.28) }
.cscore.critical{  background:rgba(239,68,68,.14);  color:#ef4444; border:1px solid rgba(239,68,68,.28);
                   box-shadow:0 0 10px rgba(239,68,68,.22) }

/* Best/Worst leaderboard */
.rank-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px }
@media(max-width:900px){ .rank-grid{ grid-template-columns:1fr } }
.rank-card{ padding:4px 0 }
.rank-item{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:7px; margin-bottom:5px; transition:background .15s }
.rank-item:hover{ background:var(--surface3) }
.rank-num{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; font-family:'IBM Plex Mono',monospace; flex-shrink:0 }
.rank-num.top{ background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff }
.rank-num.bot{ background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff }
.rank-bar-wrap{ flex:1; min-width:0 }
.rank-name{ font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px }
.rank-bar-track{ height:5px; background:var(--surface3); border-radius:99px; overflow:hidden }
.rank-bar-fill-top{ height:100%; border-radius:99px; background:linear-gradient(90deg,#22c55e,#33C175) }
.rank-bar-fill-bot{ height:100%; border-radius:99px; background:linear-gradient(90deg,#ef4444,#F46036) }
.rank-pct{ font-size:11px; font-weight:700; font-family:'IBM Plex Mono',monospace; min-width:40px; text-align:right }

/* AI Insight cards */
.insight-card{ display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:8px; margin-bottom:8px; border:1px solid; transition:transform .18s }
.insight-card:hover{ transform:translateX(3px) }
.insight-card.critical{ background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.25) }
.insight-card.warning{  background:rgba(245,158,11,.07); border-color:rgba(245,158,11,.25) }
.insight-card.positive{ background:rgba(34,197,94,.07);  border-color:rgba(34,197,94,.25) }
.insight-card.info{     background:rgba(38,96,164,.07);  border-color:rgba(38,96,164,.22) }
.insight-ico{ font-size:18px; flex-shrink:0; margin-top:1px }
.insight-text{ font-size:12px; line-height:1.6; color:var(--text) }
.insight-tag{ display:inline-block; padding:2px 8px; border-radius:4px; font-size:9.5px; font-weight:700; font-family:'IBM Plex Mono',monospace; letter-spacing:.8px; text-transform:uppercase; margin-bottom:4px }
.insight-tag.critical{ background:rgba(239,68,68,.18); color:#ef4444 }
.insight-tag.warning{  background:rgba(245,158,11,.18); color:#f59e0b }
.insight-tag.positive{ background:rgba(34,197,94,.18);  color:#22c55e }
.insight-tag.escalate{ background:rgba(244,96,54,.18);  color:#F46036 }

/* Heatmap */
.hm-table{ width:100%; border-collapse:collapse; font-size:11.5px }
.hm-table th{ padding:8px 10px; font-size:10px; text-transform:uppercase; letter-spacing:1px; font-family:'IBM Plex Mono',monospace; color:var(--text3); text-align:center; border-bottom:1px solid var(--border) }
.hm-table th:first-child{ text-align:left }
.hm-table td{ padding:7px 10px; border-bottom:1px solid rgba(0,0,0,.05); text-align:center }
.hm-table td:first-child{ text-align:left; font-weight:600; font-size:11px }
.hm-cell{ padding:4px 8px; border-radius:5px; font-size:11px; font-family:'IBM Plex Mono',monospace; font-weight:600; display:inline-block; min-width:44px }
.hm-green{  background:rgba(34,197,94,.18);  color:#22c55e }
.hm-orange{ background:rgba(245,158,11,.18); color:#f59e0b }
.hm-red{    background:rgba(239,68,68,.18);  color:#ef4444; box-shadow:0 0 6px rgba(239,68,68,.18) }

/* Escalation table */
.esc-row-crit td{ background:rgba(239,68,68,.05) }
.esc-row-warn td{ background:rgba(245,158,11,.04) }
.risk-pill{ padding:2px 9px; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:.5px }
.risk-critical{ background:rgba(239,68,68,.18); color:#ef4444 }
.risk-high{     background:rgba(244,96,54,.18);  color:#F46036 }
.risk-medium{   background:rgba(245,158,11,.18); color:#f59e0b }
.risk-low{      background:rgba(34,197,94,.14);  color:#22c55e }

/* MachineMax mode overrides for intelligence sections */
[data-theme="machinemax"] .di-ring-pct{ font-family:'Orbitron',monospace }
[data-theme="machinemax"] .di-stat-value{ font-family:'Orbitron',monospace }
[data-theme="machinemax"] .rank-name{ font-family:'Space Grotesk',sans-serif }
[data-theme="machinemax"] .insight-text{ font-family:'Space Grotesk',sans-serif }
[data-theme="machinemax"] .hm-table th{ font-family:'IBM Plex Mono',monospace }

.drv-hm-wrap{padding:8px;height:100%;overflow:auto}
.drv-hm-grid{display:grid;gap:3px;font-size:11px;min-width:480px}
.drv-hm-hdr{background:var(--surface3);color:var(--text2);padding:7px 6px;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:10px;border-radius:4px}
.drv-hm-name{background:var(--surface3);color:var(--text);padding:7px 9px;font-weight:600;font-size:11px;border-radius:4px;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drv-hm-cell{color:#fff;border-radius:4px;padding:8px 6px;text-align:center;font-weight:700;font-family:'IBM Plex Mono',monospace;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:default;transition:transform .15s}
.drv-hm-cell:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ═══════════ LOADING SPINNER ═══════════ */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{position:fixed;inset:0;background:rgba(10,14,20,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(3px)}
.loading-overlay.hide{display:none}
.loading-spinner-lg{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:14px}
.loading-overlay p{color:var(--text);font-family:'Rajdhani',sans-serif;font-size:15px;letter-spacing:.5px}

.notif{position:fixed;bottom:24px;right:24px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:13px 17px;font-size:12.5px;color:var(--text);box-shadow:var(--shadow2);z-index:1100;max-width:340px;animation:slideUp .3s;display:flex;gap:10px;align-items:flex-start}
.notif.success{border-left:3px solid var(--success)}
.notif.error{border-left:3px solid var(--danger)}
.notif.info{border-left:3px solid var(--info)}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

/* ═══════════════════════════════════════════════════════════════
   MACHINEMAX ENTERPRISE MODE — Complete Premium Transformation
   Fonts: Space Grotesk + Orbitron (headings) + IBM Plex Mono (data)
   Brand: #2660A4 (blue) · #F46036 (orange) · #33C175 (green)
   Activated by: <html data-theme="machinemax">
   ═══════════════════════════════════════════════════════════════ */

/* ─── Font imports ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ─── CSS custom properties ───────────────────────────────────── */
[data-theme="machinemax"] {
  --mm-blue:       #2660A4;
  --mm-blue-lt:    #3a85d0;
  --mm-blue-dim:   rgba(38,96,164,.18);
  --mm-orange:     #F46036;
  --mm-orange-dim: rgba(244,96,54,.18);
  --mm-green:      #33C175;
  --mm-green-lt:   #4de88a;
  --mm-green-dim:  rgba(51,193,117,.18);
  --mm-grid:       rgba(38,96,164,.06);

  /* Surface stack */
  --bg:       #040d1a;
  --bg2:      #071323;
  --surface:  rgba(9,20,40,.72);
  --surface2: rgba(14,28,52,.65);
  --surface3: rgba(20,38,66,.55);
  --border:   rgba(38,96,164,.28);

  /* Text */
  --text:  #e2ecf9;
  --text2: #8ca8cc;
  --text3: #4d6a8a;

  /* Semantic colors */
  --accent:  #33C175;
  --accent2: #4de88a;
  --accent3: #F46036;
  --info:    #2660A4;
  --success: #33C175;
  --warning: #F46036;
  --danger:  #ef4444;
  --success_fill: #33C175;
  --warning_fill: #F46036;
  --danger_fill:  #ef4444;
  --info_fill:    #2660A4;

  /* Font stacks */
  --font-ui:    'Space Grotesk', 'Rajdhani', sans-serif;
  --font-data:  'IBM Plex Mono', monospace;
  --font-head:  'Orbitron', 'Space Grotesk', sans-serif;
  --font-val:   'Orbitron', 'Rajdhani', monospace;
}

/* ─── Body + scrollbars ───────────────────────────────────────── */
[data-theme="machinemax"] body {
  font-family: var(--font-ui);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 120vw 60vh at 10% -5%,  rgba(38,96,164,.22) 0%, transparent 55%),
    radial-gradient(ellipse 100vw 70vh at 90% 110%, rgba(51,193,117,.16) 0%, transparent 55%),
    radial-gradient(ellipse 80vw  50vh at 60%  50%, rgba(244,96,54,.07)  0%, transparent 60%),
    repeating-linear-gradient(0deg,   var(--mm-grid) 0px, var(--mm-grid) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg,  var(--mm-grid) 0px, var(--mm-grid) 1px, transparent 1px, transparent 40px),
    linear-gradient(180deg, #040d1a 0%, #071323 100%);
  background-attachment: fixed;
}
[data-theme="machinemax"] ::-webkit-scrollbar { width:5px; height:5px }
[data-theme="machinemax"] ::-webkit-scrollbar-track { background:rgba(7,19,35,.6) }
[data-theme="machinemax"] ::-webkit-scrollbar-thumb { background:rgba(38,96,164,.55); border-radius:3px }

/* ─── APP SHELL ───────────────────────────────────────────────── */
[data-theme="machinemax"] #app { font-family: var(--font-ui) }

/* ─── SIDEBAR ─────────────────────────────────────────────────── */
[data-theme="machinemax"] .sb {
  background: rgba(4,11,26,.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(38,96,164,.22);
  box-shadow: 4px 0 32px rgba(0,0,0,.45);
}
[data-theme="machinemax"] .sb-logo-frame {
  border-bottom: 1px solid rgba(38,96,164,.22);
  background: rgba(4,11,26,.6);
}
[data-theme="machinemax"] .sb-title {
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--mm-blue-lt);
  text-transform: uppercase;
}
/* Sidebar nav items */
[data-theme="machinemax"] .ni {
  border-radius: 6px;
  margin: 2px 8px;
  position: relative;
  transition: all .18s;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
[data-theme="machinemax"] .ni:hover {
  background: rgba(38,96,164,.14);
  color: #fff;
}
[data-theme="machinemax"] .ni.active {
  background: linear-gradient(90deg, rgba(38,96,164,.28), rgba(51,193,117,.14));
  border-left: 2px solid var(--mm-green);
  color: #fff;
  box-shadow: inset 0 0 20px rgba(51,193,117,.1), 0 0 14px rgba(51,193,117,.14);
}
[data-theme="machinemax"] .ni.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: var(--mm-green);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px var(--mm-green);
}
[data-theme="machinemax"] .ni-ico { font-size: 15px }
[data-theme="machinemax"] .ni-text { font-family: var(--font-ui); font-size: 11px; letter-spacing: .8px }
[data-theme="machinemax"] .sb-section-label {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--mm-blue-lt);
  opacity: .6;
  text-transform: uppercase;
  padding: 6px 16px 2px;
}

/* ─── TOP BAR ─────────────────────────────────────────────────── */
[data-theme="machinemax"] .top-bar {
  background: rgba(4,11,26,.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(38,96,164,.18);
  box-shadow: 0 1px 20px rgba(0,0,0,.35);
}
[data-theme="machinemax"] #tdate {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--mm-blue-lt);
}
[data-theme="machinemax"] #uN {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .4px;
}
[data-theme="machinemax"] #uA {
  background: linear-gradient(135deg, var(--mm-blue), var(--mm-green));
  font-family: var(--font-head);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(51,193,117,.4);
}

/* ─── LANDING / LOGIN PAGES ───────────────────────────────────── */
[data-theme="machinemax"] #landingPage,
[data-theme="machinemax"] #loginPage {
  background-image:
    radial-gradient(ellipse 100vw 60vh at 15%  10%, rgba(38,96,164,.28) 0%, transparent 60%),
    radial-gradient(ellipse 80vw  60vh at 85%  90%, rgba(51,193,117,.20) 0%, transparent 60%),
    radial-gradient(ellipse 60vw  40vh at 50%  50%, rgba(244,96,54,.08)  0%, transparent 65%),
    repeating-linear-gradient(0deg,   rgba(38,96,164,.05) 0px, rgba(38,96,164,.05) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(90deg,  rgba(38,96,164,.05) 0px, rgba(38,96,164,.05) 1px, transparent 1px, transparent 44px),
    linear-gradient(160deg, #030b18 0%, #071323 60%, #04100e 100%);
  background-attachment: fixed;
}
[data-theme="machinemax"] .lp-card,
[data-theme="machinemax"] .login-card {
  background: rgba(9,20,40,.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(38,96,164,.30);
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 12px;
}
[data-theme="machinemax"] .lp-card::before,
[data-theme="machinemax"] .login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mm-blue), var(--mm-green), transparent);
  border-radius: 12px 12px 0 0;
}
/* Welcome logo text */
[data-theme="machinemax"] .lp-title {
  font-family: var(--font-head);
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--mm-blue-lt), var(--mm-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="machinemax"] .lp-sub {
  font-family: var(--font-data);
  letter-spacing: 2.5px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--mm-blue-lt);
  opacity: .7;
}
/* Login inputs */
[data-theme="machinemax"] #lUser,
[data-theme="machinemax"] #lPass {
  background: rgba(9,20,40,.65);
  border: 1px solid rgba(38,96,164,.32);
  color: var(--text);
  font-family: var(--font-ui);
  border-radius: 6px;
  letter-spacing: .5px;
}
[data-theme="machinemax"] #lUser:focus,
[data-theme="machinemax"] #lPass:focus {
  border-color: var(--mm-green);
  box-shadow: 0 0 0 3px rgba(51,193,117,.18), 0 0 16px rgba(51,193,117,.12);
  outline: none;
}
[data-theme="machinemax"] #lBtn {
  background: linear-gradient(135deg, var(--mm-green), #2aa361);
  color: #030f0a;
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(51,193,117,.38), 0 0 0 1px rgba(51,193,117,.24);
  transition: all .2s;
}
[data-theme="machinemax"] #lBtn:hover {
  box-shadow: 0 6px 28px rgba(51,193,117,.55), 0 0 0 1px rgba(51,193,117,.38);
  transform: translateY(-1px);
}
/* Stat counters on landing */
[data-theme="machinemax"] .lp-stat-val {
  font-family: var(--font-val);
  font-weight: 700;
  font-size: 28px;
  color: var(--mm-green);
  text-shadow: 0 0 22px rgba(51,193,117,.6);
}
[data-theme="machinemax"] .lp-stat-lbl {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mm-blue-lt);
}

/* ─── CARDS + SURFACES ────────────────────────────────────────── */
[data-theme="machinemax"] .card,
[data-theme="machinemax"] .dp,
[data-theme="machinemax"] .device-card,
[data-theme="machinemax"] .sm-stat-card,
[data-theme="machinemax"] .ai-card,
[data-theme="machinemax"] .dh-section,
[data-theme="machinemax"] .driver-card,
[data-theme="machinemax"] .fleet-card {
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(38,96,164,.18);
  box-shadow: 0 8px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
[data-theme="machinemax"] .card:hover,
[data-theme="machinemax"] .device-card:hover,
[data-theme="machinemax"] .driver-card:hover {
  border-color: rgba(38,96,164,.42);
  box-shadow: 0 12px 40px rgba(38,96,164,.18), inset 0 1px 0 rgba(255,255,255,.05);
  transform: translateY(-1px);
}
/* Card section headings */
[data-theme="machinemax"] .card-title,
[data-theme="machinemax"] .sec-title,
[data-theme="machinemax"] .page-title,
[data-theme="machinemax"] .section-title {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--mm-blue-lt);
}
/* Horizontal rule / dividers */
[data-theme="machinemax"] .card-divider,
[data-theme="machinemax"] hr {
  border-color: rgba(38,96,164,.18);
}

/* ─── KPI CARDS (kc) ──────────────────────────────────────────── */
[data-theme="machinemax"] .kc {
  position: relative;
  overflow: hidden;
}
[data-theme="machinemax"] .kc::after {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.04), transparent 70%);
  pointer-events: none;
}
[data-theme="machinemax"] .kc-val {
  font-family: var(--font-val);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 20px currentColor;
}
[data-theme="machinemax"] .kc-lbl {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text2);
}
[data-theme="machinemax"] .kc-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--text3);
}
/* KPI stripe neon glow */
[data-theme="machinemax"] .kc-stripe.s-accent  { background:linear-gradient(180deg,#33C175,#1a9955); box-shadow:0 0 16px rgba(51,193,117,.7) }
[data-theme="machinemax"] .kc-stripe.s-info    { background:linear-gradient(180deg,#2660A4,#1a4d8a); box-shadow:0 0 16px rgba(38,96,164,.7) }
[data-theme="machinemax"] .kc-stripe.s-warning { background:linear-gradient(180deg,#F46036,#c94020); box-shadow:0 0 16px rgba(244,96,54,.7) }
[data-theme="machinemax"] .kc-stripe.s-danger  { background:linear-gradient(180deg,#ef4444,#cc2222); box-shadow:0 0 16px rgba(239,68,68,.7) }
[data-theme="machinemax"] .kc-stripe.s-success { background:linear-gradient(180deg,#33C175,#1a9955); box-shadow:0 0 16px rgba(51,193,117,.7) }
[data-theme="machinemax"] .kc-stripe.s-accent3 { background:linear-gradient(180deg,#F46036,#c94020); box-shadow:0 0 16px rgba(244,96,54,.7) }
/* Color utilities */
[data-theme="machinemax"] .c-accent  { color:var(--mm-green);  text-shadow:0 0 14px rgba(51,193,117,.6) }
[data-theme="machinemax"] .c-info    { color:var(--mm-blue-lt);text-shadow:0 0 14px rgba(38,96,164,.6) }
[data-theme="machinemax"] .c-warning { color:var(--mm-orange); text-shadow:0 0 14px rgba(244,96,54,.6) }
[data-theme="machinemax"] .c-danger  { color:#ff5555;          text-shadow:0 0 14px rgba(239,68,68,.6) }
[data-theme="machinemax"] .c-success { color:var(--mm-green);  text-shadow:0 0 14px rgba(51,193,117,.6) }
[data-theme="machinemax"] .c-purple  { color:#c77dff;          text-shadow:0 0 14px rgba(199,125,255,.5) }

/* ─── STAT CHIPS (device health, sc-wrap) ─────────────────────── */
[data-theme="machinemax"] .sc {
  background: var(--surface2);
  border: 1px solid rgba(38,96,164,.18);
  backdrop-filter: blur(10px);
}
[data-theme="machinemax"] .sc-val {
  font-family: var(--font-val);
  font-weight: 700;
  letter-spacing: 1px;
}
[data-theme="machinemax"] .sc-lbl {
  font-family: var(--font-data);
  letter-spacing: 1.5px;
  color: var(--text3);
}
[data-theme="machinemax"] .dh-box-title {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--mm-blue-lt);
}
[data-theme="machinemax"] .dh-box-sub {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text3);
}
[data-theme="machinemax"] .dh-box-stat {
  background: rgba(7,19,40,.65);
  border: 1px solid rgba(38,96,164,.14);
}

/* ─── TABLES ──────────────────────────────────────────────────── */
[data-theme="machinemax"] .tw,
[data-theme="machinemax"] .audit-table-wrap { background: transparent }
[data-theme="machinemax"] .tw table { background: transparent; border-collapse: separate; border-spacing: 0 2px }
[data-theme="machinemax"] .tw th {
  background: rgba(38,96,164,.16);
  color: var(--mm-blue-lt);
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(38,96,164,.32);
  padding: 10px 12px;
}
[data-theme="machinemax"] .tw td {
  background: rgba(9,20,40,.55);
  border-bottom: 1px solid rgba(38,96,164,.10);
  font-family: var(--font-ui);
  font-size: 12px;
}
[data-theme="machinemax"] .tw tbody tr:hover td {
  background: rgba(38,96,164,.12);
  border-color: rgba(38,96,164,.22);
}
/* Rank / badge in tables */
[data-theme="machinemax"] .tw .rank-badge {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1px;
}

/* ─── FILTERS / INPUTS / SELECTS ──────────────────────────────── */
[data-theme="machinemax"] select,
[data-theme="machinemax"] input[type="text"],
[data-theme="machinemax"] input[type="password"],
[data-theme="machinemax"] .fb input,
[data-theme="machinemax"] textarea {
  background: rgba(9,20,40,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(38,96,164,.28);
  color: var(--text);
  font-family: var(--font-ui);
  border-radius: 6px;
}
[data-theme="machinemax"] select:focus,
[data-theme="machinemax"] input:focus { border-color:var(--mm-green); box-shadow:0 0 0 3px rgba(51,193,117,.18); outline:none }
/* Filter bar */
[data-theme="machinemax"] .event-filter-bar,
[data-theme="machinemax"] .fb,
[data-theme="machinemax"] .filter-row {
  background: rgba(9,20,40,.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(38,96,164,.18);
  border-radius: 8px;
}
/* Scope banner */
[data-theme="machinemax"] .scope-banner {
  background: rgba(38,96,164,.12);
  border: 1px solid rgba(38,96,164,.28);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.5px;
}

/* ─── BUTTONS ─────────────────────────────────────────────────── */
[data-theme="machinemax"] .btn-primary {
  background: linear-gradient(135deg, var(--mm-green), #1f9050);
  color: #030f0a;
  font-family: var(--font-head);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(51,193,117,.34);
}
[data-theme="machinemax"] .btn-primary:hover { box-shadow:0 6px 24px rgba(51,193,117,.5); transform:translateY(-1px) }
[data-theme="machinemax"] .btn-secondary,
[data-theme="machinemax"] .btn {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 1.2px;
  border-radius: 6px;
  border: 1px solid rgba(38,96,164,.32);
  background: rgba(38,96,164,.12);
  color: var(--mm-blue-lt);
}
[data-theme="machinemax"] .btn:hover,
[data-theme="machinemax"] .btn-secondary:hover { background:rgba(38,96,164,.22); border-color:rgba(38,96,164,.55) }
[data-theme="machinemax"] .btn-icon {
  background: rgba(9,20,40,.72);
  border: 1px solid rgba(38,96,164,.22);
  border-radius: 6px;
}
[data-theme="machinemax"] .btn-icon:hover { background:rgba(38,96,164,.18); border-color:rgba(38,96,164,.45) }
[data-theme="machinemax"] .btn-refresh-now {
  background: linear-gradient(135deg, var(--mm-blue), var(--mm-blue-lt));
  color: #fff;
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: 2px;
  box-shadow: 0 4px 18px rgba(38,96,164,.42);
}
[data-theme="machinemax"] .btn-refresh-now:hover { box-shadow:0 6px 24px rgba(38,96,164,.58); transform:translateY(-1px) }
/* Danger button */
[data-theme="machinemax"] .btn-danger { background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.32); color:#ff6666 }

/* ─── CHARTS / CHART CONTAINERS ───────────────────────────────── */
[data-theme="machinemax"] .chart-wrap,
[data-theme="machinemax"] .ch-wrap {
  background: linear-gradient(180deg, rgba(38,96,164,.05) 0%, transparent 100%);
  border-radius: 8px;
  position: relative;
}
[data-theme="machinemax"] .chart-wrap::before,
[data-theme="machinemax"] .ch-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid rgba(38,96,164,.12);
  pointer-events: none;
}
/* Chart.js global overrides via CSS vars (used in mkBar / mkLine / mkDonut) */
[data-theme="machinemax"] canvas { image-rendering: auto }

/* ─── PROGRESS BARS ───────────────────────────────────────────── */
[data-theme="machinemax"] .up-progress { background:rgba(9,20,40,.7); border-radius:99px; border:1px solid rgba(38,96,164,.2) }
[data-theme="machinemax"] .up-progress-fill { background:linear-gradient(90deg,var(--mm-blue),var(--mm-green)); box-shadow:0 0 12px rgba(51,193,117,.5) }
[data-theme="machinemax"] .gs-progress { background:rgba(9,20,40,.7) }
[data-theme="machinemax"] .gs-pfill { background:linear-gradient(90deg,var(--mm-blue),var(--mm-green)); box-shadow:0 0 12px rgba(51,193,117,.5) }
/* Risk / score bars */
[data-theme="machinemax"] .risk-bar { background:rgba(38,96,164,.18); border-radius:3px }
[data-theme="machinemax"] .risk-fill { background:linear-gradient(90deg,var(--mm-green),var(--mm-blue-lt)) }

/* ─── TABS ────────────────────────────────────────────────────── */
[data-theme="machinemax"] .tab-btn,
[data-theme="machinemax"] [id^="tab-"] {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border-radius: 5px;
}

/* ─── NOTIFICATIONS / TOASTS ──────────────────────────────────── */
[data-theme="machinemax"] .notif {
  background: rgba(9,20,40,.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(38,96,164,.22);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  font-family: var(--font-ui);
}
[data-theme="machinemax"] .notif.success { border-left:3px solid var(--mm-green); box-shadow:0 8px 28px rgba(51,193,117,.18) }
[data-theme="machinemax"] .notif.error   { border-left:3px solid var(--mm-orange); box-shadow:0 8px 28px rgba(244,96,54,.18) }
[data-theme="machinemax"] .notif.info    { border-left:3px solid var(--mm-blue-lt) }

/* ─── GLASS POPUPS (sync/progress) ───────────────────────────── */
[data-theme="machinemax"] .glass-popup {
  background: rgba(7,15,32,.82);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(38,96,164,.28);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03);
  font-family: var(--font-ui);
}
[data-theme="machinemax"] .glass-popup.gp-syncing { border-color:rgba(38,96,164,.45) }
[data-theme="machinemax"] .glass-popup.gp-success { background:rgba(51,193,117,.12); border-color:rgba(51,193,117,.42) }
[data-theme="machinemax"] .glass-popup.gp-error   { background:rgba(244,96,54,.10);  border-color:rgba(244,96,54,.38) }
[data-theme="machinemax"] .glass-popup.gp-syncing .gp-icon { background:linear-gradient(135deg,var(--mm-blue),var(--mm-green)); box-shadow:0 0 22px rgba(51,193,117,.65) }
[data-theme="machinemax"] .glass-popup.gp-success .gp-icon { background:linear-gradient(135deg,var(--mm-green),#1a9955);      box-shadow:0 0 18px rgba(51,193,117,.7) }
[data-theme="machinemax"] .glass-popup.gp-error   .gp-icon { background:linear-gradient(135deg,var(--mm-orange),#c43020);     box-shadow:0 0 18px rgba(244,96,54,.6) }
[data-theme="machinemax"] .gp-title { font-family:var(--font-head); font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase }
[data-theme="machinemax"] .gp-subtitle { font-family:var(--font-ui); font-size:11px }
[data-theme="machinemax"] .gp-percent { font-family:var(--font-data); color:var(--mm-green) }
[data-theme="machinemax"] .gp-progress-track { background:rgba(38,96,164,.15) }
[data-theme="machinemax"] .gp-progress-fill { background:linear-gradient(90deg,var(--mm-blue),var(--mm-green)); box-shadow:0 0 14px rgba(51,193,117,.55) }

/* ─── IDLE WARNING MODAL ──────────────────────────────────────── */
[data-theme="machinemax"] .idle-modal {
  background: rgba(7,15,32,.9);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(38,96,164,.28);
  font-family: var(--font-ui);
}
[data-theme="machinemax"] .idle-modal-title  { font-family:var(--font-head); letter-spacing:1.5px; text-transform:uppercase }
[data-theme="machinemax"] .idle-modal-subtitle { font-family:var(--font-ui) }
[data-theme="machinemax"] .idle-countdown    { font-family:var(--font-val); color:var(--mm-orange); text-shadow:0 0 28px rgba(244,96,54,.7) }
[data-theme="machinemax"] .idle-btn-continue { background:linear-gradient(135deg,var(--mm-green),#1a9950); color:#030f0a; font-family:var(--font-head); letter-spacing:1.5px }
[data-theme="machinemax"] .idle-btn-logout   { background:rgba(244,96,54,.14); border:1px solid rgba(244,96,54,.32); color:var(--mm-orange); font-family:var(--font-ui) }

/* ─── CONFIRM DIALOG ──────────────────────────────────────────── */
[data-theme="machinemax"] #confirm-dialog .idle-modal {
  border-color: rgba(244,96,54,.32);
}
[data-theme="machinemax"] #cd-title { font-family:var(--font-head); letter-spacing:1.5px }

/* ─── SYNC BADGE (bottom-right) ──────────────────────────────── */
[data-theme="machinemax"] .sync-badge {
  background: rgba(7,15,32,.82);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(38,96,164,.28);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1px;
}
[data-theme="machinemax"] .sync-dot.pulse { background:var(--mm-green); box-shadow:0 0 14px rgba(51,193,117,.75); animation:mmDotPulse 2s ease-in-out infinite }
[data-theme="machinemax"] .sync-dot.warn  { background:var(--mm-orange) }
[data-theme="machinemax"] .sync-dot.off   { background:#555 }
@keyframes mmDotPulse {
  0%,100% { opacity:.5; transform:scale(.85) }
  50%      { opacity:1;  transform:scale(1); box-shadow:0 0 18px rgba(51,193,117,.9) }
}

/* ─── SYNC BAR (3-pixel top stripe) ──────────────────────────── */
[data-theme="machinemax"] #sync-bar.syncing {
  background: linear-gradient(90deg, var(--mm-blue), var(--mm-green), var(--mm-blue));
}

/* ─── AI INSIGHTS ─────────────────────────────────────────────── */
[data-theme="machinemax"] .ai-card {
  border-left: 2px solid var(--mm-blue);
  background: rgba(38,96,164,.07);
}
[data-theme="machinemax"] .ai-badge {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: rgba(38,96,164,.18);
  border: 1px solid rgba(38,96,164,.32);
  color: var(--mm-blue-lt);
  border-radius: 4px;
}

/* ─── DEPT BANNER ─────────────────────────────────────────────── */
[data-theme="machinemax"] #dept-banner {
  background: rgba(38,96,164,.12);
  border-bottom: 1px solid rgba(38,96,164,.28);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── MASKED URL FIELD ────────────────────────────────────────── */
[data-theme="machinemax"] .masked-url-field {
  background: rgba(9,20,40,.7);
  border: 1px solid rgba(38,96,164,.22);
  font-family: var(--font-data);
  color: var(--mm-blue-lt);
  letter-spacing: .5px;
}
[data-theme="machinemax"] .gsheet-url-edit {
  background: rgba(9,20,40,.7);
  border: 1px solid rgba(38,96,164,.28);
  font-family: var(--font-data);
  color: var(--text);
}

/* ─── DEVICE CARDS ────────────────────────────────────────────── */
[data-theme="machinemax"] .device-card {
  border-left: 2px solid var(--mm-blue);
}
[data-theme="machinemax"] .device-card.online  { border-left-color:var(--mm-green) }
[data-theme="machinemax"] .device-card.offline { border-left-color:var(--mm-orange) }
[data-theme="machinemax"] .device-card.damaged { border-left-color:#c77dff }
/* Vehicle/plate text */
[data-theme="machinemax"] .plate,
[data-theme="machinemax"] .veh-num {
  font-family: var(--font-data);
  letter-spacing: 1.5px;
  color: var(--mm-blue-lt);
}

/* ─── OFFLINE DISCLAIMER ──────────────────────────────────────── */
[data-theme="machinemax"] .offline-disclaimer {
  background: rgba(244,96,54,.07);
  border: 1px solid rgba(244,96,54,.24);
  backdrop-filter: blur(10px);
  font-family: var(--font-ui);
}
[data-theme="machinemax"] .od-icon { color:var(--mm-orange) }

/* ─── LOADING OVERLAY ─────────────────────────────────────────── */
[data-theme="machinemax"] .loading-overlay {
  background: rgba(4,13,26,.96);
  backdrop-filter: blur(8px);
}
[data-theme="machinemax"] .loading-overlay p {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mm-blue-lt);
}
[data-theme="machinemax"] .loading-spinner-lg {
  border-color: rgba(38,96,164,.15);
  border-top-color: var(--mm-green);
  box-shadow: 0 0 20px rgba(51,193,117,.25);
}

/* ─── PAGE / SECTION HEADERS ──────────────────────────────────── */
[data-theme="machinemax"] h1,
[data-theme="machinemax"] h2,
[data-theme="machinemax"] .page-head-title {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .8px;
}
[data-theme="machinemax"] .page-subtitle,
[data-theme="machinemax"] .sec-sub {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mm-blue-lt);
  opacity: .65;
}

/* ─── USER MANAGEMENT ─────────────────────────────────────────── */
[data-theme="machinemax"] .user-row {
  background: var(--surface2);
  border: 1px solid rgba(38,96,164,.14);
  transition: border-color .18s, background .18s;
}
[data-theme="machinemax"] .user-row:hover { border-color:rgba(38,96,164,.32); background:rgba(38,96,164,.09) }
[data-theme="machinemax"] .user-badge {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 4px;
}
[data-theme="machinemax"] .user-badge.supermax { background:rgba(51,193,117,.16); color:var(--mm-green);   border:1px solid rgba(51,193,117,.28) }
[data-theme="machinemax"] .user-badge.admin    { background:rgba(38,96,164,.16);  color:var(--mm-blue-lt); border:1px solid rgba(38,96,164,.28) }
[data-theme="machinemax"] .user-badge.dept     { background:rgba(244,96,54,.12);  color:var(--mm-orange);  border:1px solid rgba(244,96,54,.24) }

/* ─── AUDIT LOG ───────────────────────────────────────────────── */
[data-theme="machinemax"] .audit-row {
  font-family: var(--font-data);
  font-size: 11px;
  border-bottom: 1px solid rgba(38,96,164,.10);
}
[data-theme="machinemax"] .audit-row:hover { background:rgba(38,96,164,.09) }
[data-theme="machinemax"] .audit-type-badge {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
}
[data-theme="machinemax"] .audit-section-head {
  background: rgba(38,96,164,.12);
  border-left: 2px solid var(--mm-blue);
  font-family: var(--font-head);
  letter-spacing: 1.5px;
}
[data-theme="machinemax"] .audit-section-title {
  font-family: var(--font-head);
  letter-spacing: 1.5px;
  color: var(--mm-blue-lt);
}
[data-theme="machinemax"] .audit-count-badge {
  font-family: var(--font-data);
  font-size: 9.5px;
  background: rgba(38,96,164,.16);
  border: 1px solid rgba(38,96,164,.28);
  color: var(--mm-blue-lt);
}

/* ─── DROPDOWNS ───────────────────────────────────────────────── */
[data-theme="machinemax"] select option {
  background: #071323;
  color: var(--text);
}

/* ─── NEXT SYNC INFO ──────────────────────────────────────────── */
[data-theme="machinemax"] .next-sync-info {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: var(--mm-blue-lt);
  opacity: .65;
}

/* ─── CHART THEME INJECTION via JS helper ─────────────────────── */
/* Called by refreshAllChartsForTheme() — makes Chart.js use brand colors */
[data-theme="machinemax"] .chart-legend-item { font-family:var(--font-data); font-size:10px; letter-spacing:1px }

/* ─── UPLOAD ZONE ─────────────────────────────────────────────── */
[data-theme="machinemax"] .drop-zone {
  background: rgba(9,20,40,.65);
  border: 2px dashed rgba(38,96,164,.32);
  border-radius: 10px;
  transition: border-color .2s, background .2s;
}
[data-theme="machinemax"] .drop-zone:hover,
[data-theme="machinemax"] .drop-zone.drag-over {
  border-color: var(--mm-green);
  background: rgba(51,193,117,.06);
  box-shadow: 0 0 24px rgba(51,193,117,.14);
}

/* ─── PERFORMANCE: reduce repaints on non-critical animated elements ─ */
[data-theme="machinemax"] .kc,
[data-theme="machinemax"] .card,
[data-theme="machinemax"] .device-card { will-change:transform }

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL UI SKINS · build 2026.06.11.30
   Chosen by the Safety Administrator (My Account → Dashboard Appearance) and
   synced to ALL users via settings + dashboard payload. data-skin on <html>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── SKIN: STEEL & PAPER (industrial light) ───────── */
:root[data-skin="steel"]{
  --bg:#EEF1F4;--surface:#FFFFFF;--surface2:#F2F5F8;--surface3:#E8EDF2;
  --text:#1A222C;--text2:#5B6877;--text3:#94A0AD;
  --border:#D5DBE2;--border2:#BCC7D2;
  --accent:#E85D1F;--accent2:#2C5F8A;--accent3:#7C5CC4;
  --danger:#D6404F;--warning:#D98E1B;--success:#1FA970;--info:#2C8FB8;
  --shadow:0 4px 18px rgba(22,32,43,.08);--shadow2:0 10px 32px rgba(22,32,43,.12);
}
html[data-skin="steel"] .btn-primary{background:#E85D1F;color:#fff;box-shadow:0 4px 14px rgba(232,93,31,.30)}
html[data-skin="steel"] .btn-primary:hover{box-shadow:0 6px 20px rgba(232,93,31,.42)}
html[data-skin="steel"] .sidebar{background:#16202B;border-right:1px solid #223140}
html[data-skin="steel"] .sidebar .ni{color:#9FB0C0}
html[data-skin="steel"] .sidebar .ni:hover{background:rgba(255,255,255,.06);color:#fff}
html[data-skin="steel"] .sidebar .ni.active{background:#E85D1F;color:#fff}
html[data-skin="steel"] .card{border-top:3px solid transparent}
html[data-skin="steel"] .al-kpi{border-left:4px solid var(--border2)}

/* ───────── SKIN: AURORA GLASS (frosted glass on aurora gradient) ───────── */
:root[data-skin="aurora"]{
  --bg:#0B0E24;
  --surface:rgba(22,26,58,.46);--surface2:rgba(255,255,255,.07);--surface3:rgba(255,255,255,.12);
  --text:#F4F6FF;--text2:#A7AFD0;--text3:#6F77A0;
  --border:rgba(255,255,255,.15);--border2:rgba(255,255,255,.26);
  --accent:#FF7A3D;--accent2:#5BB8FF;--accent3:#B69CFF;
  --danger:#FF5D7A;--warning:#FFC24D;--success:#3DE8A0;--info:#5BB8FF;
  --shadow:0 14px 44px rgba(2,4,18,.45);--shadow2:0 22px 64px rgba(2,4,18,.6);
}
html[data-skin="aurora"] body{background:#0B0E24}
html[data-skin="aurora"] body::before{
  content:'';position:fixed;inset:-22%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 36% at 80% 10%, rgba(242,101,34,.42), transparent 62%),
    radial-gradient(48% 42% at 10% 92%, rgba(91,77,242,.46), transparent 62%),
    radial-gradient(36% 32% at 94% 82%, rgba(31,160,255,.36), transparent 62%),
    radial-gradient(32% 30% at 8% 10%,  rgba(155,91,242,.36), transparent 62%),
    linear-gradient(180deg,#181D44 0%,#0A0D20 100%);
  filter:blur(56px) saturate(125%);
}
html[data-skin="aurora"] body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(4,6,18,.55) 100%);
}
html[data-skin="aurora"] .card,
html[data-skin="aurora"] .al-kpi,
html[data-skin="aurora"] .ce-fresh-strip,
html[data-skin="aurora"] .gf-modal,
html[data-skin="aurora"] .glass-popup,
html[data-skin="aurora"] .idle-modal{
  background:rgba(255,255,255,.075);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 16px 48px rgba(2,4,18,.45), inset 0 1px 0 rgba(255,255,255,.16);
}
html[data-skin="aurora"] .card{border-radius:20px}
html[data-skin="aurora"] .al-kpi{border-radius:16px}
html[data-skin="aurora"] .sidebar{
  background:rgba(13,16,40,.55);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  border-right:1px solid rgba(255,255,255,.13);
}
html[data-skin="aurora"] .topbar{
  background:rgba(13,16,40,.5);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
html[data-skin="aurora"] .ni.active{background:linear-gradient(135deg,#FF7A3D,#F26522);color:#10142A;box-shadow:0 8px 24px rgba(242,101,34,.45)}
html[data-skin="aurora"] .btn-primary{background:linear-gradient(135deg,#FF7A3D,#F26522);color:#10142A;box-shadow:0 8px 26px rgba(242,101,34,.5)}
html[data-skin="aurora"] .btn-secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-skin="aurora"] .ce-select,
html[data-skin="aurora"] .ce-search{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--text)}
html[data-skin="aurora"] .gf-chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-skin="aurora"] ::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
html[data-skin="aurora"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
html[data-skin="aurora"] table thead th{background:rgba(255,255,255,.05)}

/* ───────── SKIN: OPS TERMINAL (mission-control mono) ───────── */
:root[data-skin="terminal"]{
  --bg:#05070A;--surface:#0A0E15;--surface2:#0E141F;--surface3:#131B29;
  --text:#E8ECF2;--text2:#8A94A6;--text3:#4C5566;
  --border:#1B2330;--border2:#27313F;
  --accent:#FFB000;--accent2:#27C7E0;--accent3:#9D7BFF;
  --danger:#FF3B4E;--warning:#FF6A2B;--success:#27E07D;--info:#27C7E0;
  --shadow:0 2px 0 rgba(255,176,0,.06);--shadow2:0 4px 18px rgba(0,0,0,.6);
}
html[data-skin="terminal"] body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.022) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.022) 47px 48px);
}
html[data-skin="terminal"] .card{border-radius:4px;border:1px solid var(--border);position:relative}
html[data-skin="terminal"] .card::before{content:'';position:absolute;top:-1px;left:-1px;width:34px;height:2px;background:var(--accent)}
html[data-skin="terminal"] .al-kpi{border-radius:4px}
html[data-skin="terminal"] .btn,
html[data-skin="terminal"] .gf-chip{border-radius:3px}
html[data-skin="terminal"] .btn-primary{background:#FFB000;color:#05070A;box-shadow:none;letter-spacing:.8px}
html[data-skin="terminal"] .btn-primary:hover{background:#FFC233;transform:none}
html[data-skin="terminal"] h1,html[data-skin="terminal"] h2,html[data-skin="terminal"] h3,html[data-skin="terminal"] h4,
html[data-skin="terminal"] .ct,
html[data-skin="terminal"] .tb-title,
html[data-skin="terminal"] .al-kpi-v{font-family:'IBM Plex Mono',monospace !important;letter-spacing:.4px}
html[data-skin="terminal"] .ni.active{background:rgba(255,176,0,.14);color:#FFB000;border:1px solid rgba(255,176,0,.5);border-radius:3px}
html[data-skin="terminal"] .sidebar{border-right:1px solid var(--border)}
html[data-skin="terminal"] .topbar{border-bottom:1px solid rgba(255,176,0,.35)}

/* ───────── SKIN: SOFT SAAS PRO (warm light, rounded) ───────── */
:root[data-skin="saas"]{
  --bg:#F6F4F0;--surface:#FFFFFF;--surface2:#F4F1EB;--surface3:#ECE8E1;
  --text:#23272F;--text2:#6B7280;--text3:#9AA1AC;
  --border:#ECE8E1;--border2:#DDD7CC;
  --accent:#F26522;--accent2:#3E7BFA;--accent3:#8E6BF1;
  --danger:#E5484D;--warning:#E89B0C;--success:#16A37B;--info:#3E7BFA;
  --shadow:0 10px 30px rgba(35,31,24,.08);--shadow2:0 18px 44px rgba(35,31,24,.12);
}
html[data-skin="saas"] .card{border-radius:22px;box-shadow:0 12px 34px rgba(35,31,24,.09)}
html[data-skin="saas"] .al-kpi{border-radius:18px}
html[data-skin="saas"] .btn{border-radius:14px}
html[data-skin="saas"] .btn-primary{background:#F26522;color:#fff;box-shadow:0 8px 22px rgba(242,101,34,.35)}
html[data-skin="saas"] .gf-chip{border-radius:17px}
html[data-skin="saas"] .ni{border-radius:18px;margin:2px 8px}
html[data-skin="saas"] .ni.active{background:#F26522;color:#fff;box-shadow:0 8px 20px rgba(242,101,34,.40)}
html[data-skin="saas"] .sidebar{background:#FFFFFF;border-right:1px solid var(--border)}
html[data-skin="saas"] .sidebar .ni{color:#4B5563}
html[data-skin="saas"] .topbar{background:#F6F4F0;border-bottom:1px solid var(--border)}
html[data-skin="saas"] .ce-fresh-strip{border-radius:18px}

/* ───────── MachineMax "M" loading indicator (build .32) ─────────
   pointer-events:none on EVERYTHING → the page never freezes; the user can
   navigate to any page while data streams in. Theme/skin aware via CSS vars. */
.mm-loader{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:7000;pointer-events:none}
.mm-loader.on{display:flex}
.mm-loader-box{pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:none;box-shadow:none;padding:0;
  animation:mmFadeIn .25s ease-out}
@keyframes mmFadeIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
/* build .33: no box — bare floating mark. Icon color follows the theme:
   light skins → slate (logo color), dark skins → white. Soft drop-shadow
   keeps it readable over any page content without needing a background. */
.mm-loader svg{display:block;color:#2F3A45;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
:root[data-theme="dark"] .mm-loader svg,
:root[data-skin="aurora"] .mm-loader svg,
:root[data-skin="terminal"] .mm-loader svg{color:#F1F4F9}
:root[data-skin="steel"] .mm-loader svg,
:root[data-skin="saas"] .mm-loader svg{color:#2F3A45}
.mm-loader-brand,.mm-loader-text,.mm-loader-hint{text-shadow:0 1px 8px rgba(0,0,0,.30)}
.mm-m-path{fill:none;stroke:currentColor;stroke-width:13;stroke-linecap:square;stroke-linejoin:miter;
  stroke-dasharray:300;stroke-dashoffset:300;animation:mmDraw 1.7s ease-in-out infinite}
@keyframes mmDraw{0%{stroke-dashoffset:300;opacity:.9}55%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-300;opacity:.85}}
.mm-m-spark{fill:#F26522;transform-origin:48px 52px;animation:mmSpark 1.7s ease-in-out infinite}
@keyframes mmSpark{0%,18%{transform:scale(0);opacity:0}42%{transform:scale(1.25);opacity:1}60%{transform:scale(1)}100%{transform:scale(0);opacity:0}}
.mm-loader-brand{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:4.5px;color:var(--text);margin-top:2px}
.mm-loader-text{font-size:10.5px;color:var(--text2);font-family:'IBM Plex Mono',monospace;letter-spacing:.4px}
.mm-loader-hint{font-size:9px;color:var(--text3);letter-spacing:.3px}

/* ───────── Outside-vehicles window (Geofence Reports, build .31) ───────── */
.gf-out-pill{display:inline-block;padding:2px 9px;border-radius:9px;font-size:9.5px;font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:.4px}
.gf-out-pill.out{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.35)}
.gf-out-pill.in{background:rgba(51,193,117,.14);color:#33C175;border:1px solid rgba(51,193,117,.32)}
.gf-out-marker{position:relative}
.gf-out-marker .gom-core{width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid #fff;box-shadow:0 0 6px rgba(0,0,0,.6)}
.gf-out-marker .gom-ring{position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(239,68,68,.85);animation:gomPulse 1.6s ease-out infinite}
@keyframes gomPulse{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.5);opacity:0}}
.gf-out-row{cursor:pointer;transition:background .12s}
.gf-out-row:hover{background:rgba(242,101,34,.10) !important}

/* ───────── Appearance picker tiles (My Account, supermax only) ───────── */
.skin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:10px}
.skin-tile{border:2px solid var(--border);border-radius:14px;padding:0 0 12px;cursor:pointer;transition:all .18s;overflow:hidden;background:var(--surface2)}
.skin-tile:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:var(--shadow)}
.skin-tile.active{border-color:#F26522;box-shadow:0 0 0 2px rgba(242,101,34,.35)}
.skin-prev{height:84px;position:relative}
.skin-prev .sp-bar{position:absolute;left:10px;top:10px;bottom:10px;width:26%;border-radius:6px;opacity:.92}
.skin-prev .sp-c1{position:absolute;left:42%;top:10px;width:52%;height:34%;border-radius:6px;opacity:.92}
.skin-prev .sp-c2{position:absolute;left:42%;top:52%;width:52%;height:34%;border-radius:6px;opacity:.92}
.skin-name{font-size:12.5px;font-weight:700;margin:10px 14px 2px;font-family:'Rajdhani',sans-serif;letter-spacing:.4px}
.skin-desc{font-size:10px;color:var(--text3);margin:0 14px;line-height:1.45}
.skin-live{display:inline-block;margin:8px 14px 0;font-size:9px;padding:2px 8px;border-radius:8px;background:rgba(51,193,117,.16);color:var(--success);border:1px solid rgba(51,193,117,.3)}

/* The 14th inline <style> lived INSIDE the landing iframe srcdoc attribute
   (index.html:44) and belongs to that iframe own document. Extracting it here
   was a mistake: it stripped the iframe of all styling AND leaked its rules
   into the app, where .badge{position:absolute;top:15px;right:15px} beat the
   app .badge on source order and piled every row badge onto the top-right
   corner of its card. Restored inline in the srcdoc, and it must stay there —
   a stylesheet inside an attribute is text, and a sandboxed iframe cannot
   load assets/app.css anyway. */
/* ═══════════════════════════════════════════════════════════════
   from index.html line 2759  ·  <style id="nc-css">
   ═══════════════════════════════════════════════════════════════ */
    .nc-wrap{position:relative}
    .nc-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;background:var(--danger,#ef4444);color:#fff;border-radius:9px;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--surface)}
    .nc-panel{position:absolute;top:46px;right:0;width:362px;max-height:74vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:0 18px 50px rgba(0,0,0,.28);z-index:4000}
    @media(max-width:480px){.nc-panel{width:calc(100vw - 24px);right:-8px}}
    .nc-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--border);font-weight:700;font-size:13px;color:var(--text);position:sticky;top:0;background:var(--surface);z-index:1}
    .nc-x{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;font-family:inherit}
    .nc-body{padding:13px 15px}
    .nc-foot{padding:10px 15px;border-top:1px solid var(--border);text-align:right;position:sticky;bottom:0;background:var(--surface)}
    .nc-agree{background:var(--accent,#F26522);color:#fff;border:none;border-radius:7px;padding:8px 18px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
    .nc-period{display:flex;align-items:center;gap:6px;margin-bottom:11px;flex-wrap:wrap}
    .nc-pbtn{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:6px;padding:4px 9px;font-size:11px;cursor:pointer;font-family:inherit}
    .nc-pbtn.on{background:var(--accent,#F26522);color:#fff;border-color:transparent}
    .nc-range{margin-left:auto;font-size:10px;color:var(--text3);font-family:'IBM Plex Mono',monospace}
    .nc-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px}
    .nc-cat{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 4px;text-align:center}
    .nc-cat-n{font-size:16px;font-weight:800;color:var(--text)}
    .nc-cat-l{font-size:8.5px;color:var(--text3);margin-top:2px;line-height:1.2}
    .nc-fine{background:rgba(242,101,34,.08);border:1px solid rgba(242,101,34,.2);border-radius:8px;padding:9px 11px;font-size:12px;color:var(--text);margin-bottom:4px}
    .nc-sec{margin-top:13px}
    .nc-sec-t{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);font-weight:700;margin-bottom:6px}
    .nc-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--text2)}
    .nc-row span:last-child{font-weight:700;color:var(--text)}
    .nc-row3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px}
    .nc-row3 span{font-size:10.5px;color:var(--text2)}
    .nc-row3 span:last-child{font-weight:600;color:var(--text)}
    .nc-more{font-size:10.5px;color:var(--text3);padding-top:5px}
    .nc-empty{text-align:center;color:var(--text3);font-size:12px;padding:22px 8px;line-height:1.5}
    .nc-hello{font-size:12px;color:var(--text2);margin-bottom:10px}
    .uam-tbl{width:100%;border-collapse:collapse;font-size:11.5px;min-width:880px}
    .uam-tbl th{text-align:left;padding:8px 10px;font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom:1px solid var(--border);font-weight:700;white-space:nowrap}
    .uam-tbl td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text2)}
    .uam-name{font-weight:600;color:var(--text)}
    .uam-sub{font-size:9.5px;color:var(--text3);margin-top:1px}
    .uam-mono{font-family:'IBM Plex Mono',monospace;font-size:10.5px;white-space:nowrap}
    .uam-on-b{color:var(--success);font-weight:700;white-space:nowrap}
    .uam-off-b{color:var(--danger);font-weight:700;white-space:nowrap}
    .uam-chips{display:flex;flex-wrap:wrap;gap:3px;max-width:230px}
    .uam-chip{font-size:9px;padding:2px 6px;background:rgba(34,197,94,.1);color:var(--success);border:1px solid rgba(34,197,94,.2);border-radius:4px;white-space:nowrap}
    .uam-chip.uam-off{background:rgba(148,163,184,.12);color:var(--text3);border-color:var(--border)}
    .uam-none{font-size:10px;color:var(--text3)}
    .uam-cnt{font-size:9px;color:var(--text3);margin-top:3px}
    

/* ═══════════════════════════════════════════════════════════════
   from index.html line 3288  ·  <style id="ic-css">
   ═══════════════════════════════════════════════════════════════ */
        /* ── IC page — professional layout ── */
        #page-ic .ic-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
        #page-ic .ic-stat{background:linear-gradient(160deg,var(--surface),var(--surface2));border:1px solid var(--border);border-radius:13px;padding:14px 15px;position:relative;overflow:hidden}
        #page-ic .ic-stat::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg,#6366f1,#4338ca)}
        #page-ic .ic-stat.ok::before{background:linear-gradient(180deg,#22c55e,#16a34a)}
        #page-ic .ic-stat.warn::before{background:linear-gradient(180deg,#f59e0b,#d97706)}
        #page-ic .ic-stat.bad::before{background:linear-gradient(180deg,#ef4444,#dc2626)}
        #page-ic .ic-stat-n{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1}
        #page-ic .ic-stat-l{font-size:10px;color:var(--text3);margin-top:6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
        #page-ic .ic-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;cursor:pointer;white-space:nowrap;border:1px solid transparent;line-height:1.6;margin:1px 2px 1px 0}
        #page-ic .ic-chip.has{background:rgba(34,197,94,.13);color:var(--success);border-color:rgba(34,197,94,.3)}
        #page-ic .ic-chip.has:hover{background:rgba(34,197,94,.22)}
        #page-ic .ic-chip.miss{background:rgba(239,68,68,.13);color:var(--danger);border-color:rgba(239,68,68,.32);cursor:default;animation:icMissPulse 2.4s ease-in-out infinite}
        #page-ic .ic-chip.na{background:var(--surface2);color:var(--text3);border-color:var(--border);cursor:default}
        @keyframes icMissPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 0 3px rgba(239,68,68,.12)}}
        #page-ic tr.ic-row-miss td:first-child{box-shadow:inset 3px 0 0 rgba(239,68,68,.65)}
        #page-ic .ic-cell{min-width:120px}
        #page-ic .ic-dev{font-size:9.5px;color:var(--text3);display:block;margin-bottom:2px;font-family:'IBM Plex Mono',monospace}
        /* ── Upload / viewer modal — mobile-first ── */
        .ic-modal-box{max-width:640px;width:calc(100vw - 28px);max-height:calc(100vh - 40px);overflow:auto;text-align:left}
        @media(max-width:640px){.ic-modal-box{width:calc(100vw - 12px);max-height:calc(100vh - 14px);border-radius:14px}}
        .ic-drop{border:2px dashed var(--border);border-radius:12px;padding:22px 14px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;background:var(--surface2)}
        .ic-drop:hover,.ic-drop.drag{border-color:#6366f1;background:rgba(99,102,241,.07)}
        .ic-drop .ic-drop-ico{font-size:30px;margin-bottom:6px}
        .ic-drop .ic-drop-t{font-size:12.5px;font-weight:700;color:var(--text)}
        .ic-drop .ic-drop-s{font-size:10.5px;color:var(--text3);margin-top:3px}
        .ic-preview{display:none;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-top:10px}
        .ic-preview img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
        .ic-preview .ic-pdf-ico{width:64px;height:64px;border-radius:8px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);display:flex;align-items:center;justify-content:center;font-size:24px}
        .ic-prod-row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
        .ic-prod-opt{flex:1;min-width:110px;display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;cursor:pointer;font-size:12px;font-weight:700;color:var(--text2);transition:all .15s;user-select:none}
        .ic-prod-opt input{accent-color:#6366f1;width:16px;height:16px;flex-shrink:0}
        .ic-prod-opt.on{border-color:#6366f1;background:rgba(99,102,241,.10);color:var(--text)}
        .ic-veh-list{max-height:230px;overflow:auto;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:5px;margin-top:6px}
        .ic-veh-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--text)}
        .ic-veh-row:hover{background:rgba(99,102,241,.08)}
        .ic-veh-row input{accent-color:#6366f1;width:15px;height:15px;flex-shrink:0}
        .ic-veh-row .ic-veh-sub{margin-left:auto;font-size:9.5px;color:var(--text3);font-family:'IBM Plex Mono',monospace;white-space:nowrap}
        .ic-sel-bar{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
        .ic-sel-cnt{font-size:11px;font-weight:700;color:#6366f1}
        .ic-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:700;display:block;margin:13px 0 5px}
        .ic-progress{display:none;margin-top:12px}
        .ic-progress-bar{height:8px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
        .ic-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#22c55e);transition:width .2s;border-radius:8px}
        .ic-progress-t{font-size:10.5px;color:var(--text2);margin-top:5px;text-align:center;font-family:'IBM Plex Mono',monospace}
        .ic-view-frame{width:100%;height:min(58vh,520px);border:1px solid var(--border);border-radius:10px;background:#fff}
        .ic-view-img{max-width:100%;max-height:min(58vh,520px);border-radius:10px;border:1px solid var(--border);display:block;margin:0 auto}
        .ic-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
        @media(max-width:520px){.ic-meta-grid{grid-template-columns:1fr}}
        .ic-meta-grid>div{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:8px 11px}
        .ic-meta-grid span{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);display:block;font-weight:700}
        .ic-meta-grid b{font-size:11.5px;color:var(--text);word-break:break-word}
        

/* ═══════════════════════════════════════════════════════════════
   from index.html line 4639  ·  <style>
   ═══════════════════════════════════════════════════════════════ */
        .mmd-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:600;display:block;margin-bottom:5px}
        .mmd-in{width:100%;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;font-family:inherit;box-sizing:border-box}
        #mmd-list table td{vertical-align:middle}
        

/* ═══════════════════════════════════════════════════════════════
   from index.html line 4690  ·  <style id="pol-css">
   ═══════════════════════════════════════════════════════════════ */
        .pol-sw{display:inline-flex;cursor:pointer}
        .pol-sw input{display:none}
        .pol-track{width:42px;height:22px;border-radius:22px;background:var(--surface2);border:1px solid var(--border);position:relative;transition:background .2s,border-color .2s;display:inline-block}
        .pol-dot{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text3);transition:transform .2s,background .2s}
        .pol-sw input:checked + .pol-track{background:rgba(51,193,117,.25);border-color:rgba(51,193,117,.6)}
        .pol-sw input:checked + .pol-track .pol-dot{transform:translateX(20px);background:#33C175;box-shadow:0 0 8px rgba(51,193,117,.6)}
        .pol-sw.lock{opacity:.35;cursor:not-allowed}
        #page-policy .tw table td{padding:12px 10px;vertical-align:middle}
        #page-policy .tw table th{font-size:10px}
        /* ── Build .94: Role Access Tree ── */
        #page-policy .pol-tree{display:flex;flex-direction:column;gap:10px;margin-top:4px}
        #page-policy .pt-grp{font-size:9.5px;font-weight:800;letter-spacing:1.4px;font-family:'IBM Plex Mono',monospace;padding:8px 4px 0;border-top:1px dashed var(--border);margin-top:4px}
        #page-policy .pt-grp:first-child{border-top:none;margin-top:0}
        #page-policy .pt-role{border:1px solid var(--border);border-radius:12px;padding:11px 13px;background:var(--surface2)}
        #page-policy .pt-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
        #page-policy .pt-chips{display:flex;flex-wrap:wrap;gap:6px}
        #page-policy .pt-chip{font-size:10px;font-family:inherit;padding:5px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;transition:transform .12s,border-color .12s;line-height:1.2}
        #page-policy .pt-chip:hover{transform:translateY(-1px)}
        #page-policy .pt-chip.on{border-color:rgba(51,193,117,.55);color:#33C175;background:rgba(51,193,117,.08)}
        #page-policy .pt-chip.off{border-color:rgba(239,68,68,.55);color:#ef4444;background:rgba(239,68,68,.07);text-decoration:line-through}
        #page-policy .pt-chip.mod{border-color:rgba(245,158,11,.6);color:#f59e0b;background:rgba(245,158,11,.08)}
        #page-policy .pt-chip.lk{cursor:default;color:var(--text3);background:transparent;border-style:dashed}
        #page-policy .pt-chip.ln-on{cursor:default;color:#33C175;border-style:dashed;border-color:rgba(51,193,117,.4);background:transparent}
        #page-policy .pt-chip.ln-off{cursor:default;color:var(--text3);border-style:dashed;background:transparent;text-decoration:line-through}
        .pol-hero{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(51,193,117,.08));border:1px solid rgba(99,102,241,.3);border-radius:16px;padding:20px 22px;margin-bottom:16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
        .pol-hero .ph-ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#6366f1,#33C175);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
        

/* ═══════════════════════════════════════════════════════════════
   from index.html line 4875  ·  <style id="um-css">
   ═══════════════════════════════════════════════════════════════ */
        #um-dashboard .um-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
        #um-dashboard .um-stat{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:15px 16px;position:relative;overflow:hidden}
        #um-dashboard .um-stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
        #um-dashboard .um-stat-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}
        #um-dashboard .um-stat-n{font-size:26px;font-weight:800;line-height:1;color:var(--text);letter-spacing:-.5px}
        #um-dashboard .um-stat-l{font-size:11px;color:var(--text3);margin-top:5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
        #um-dashboard .um-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
        @media(max-width:860px){#um-dashboard .um-grid2{grid-template-columns:1fr}}
        #um-dashboard .um-controls{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 12px}
        #um-dashboard .um-search{flex:1;min-width:180px;position:relative}
        #um-dashboard .um-search input{width:100%;padding:9px 12px 9px 32px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:inherit}
        #um-dashboard .um-search::before{content:"🔍";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.6}
        #um-dashboard .um-controls select{padding:9px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:inherit;cursor:pointer}
        #um-dashboard .um-quick{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
        #um-dashboard .um-qbtn{padding:6px 12px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--border);background:var(--surface2);color:var(--text2)}
        #um-dashboard .um-qbtn.primary{background:linear-gradient(135deg,#6366f1,#4338ca);color:#fff;border:none}
        #um-dashboard table.um-tbl{width:100%;border-collapse:collapse;font-size:12px}
        #um-dashboard .um-tbl th{text-align:left;padding:9px 11px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom:1px solid var(--border);font-weight:700;white-space:nowrap}
        #um-dashboard .um-tbl td{padding:10px 11px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text2)}
        #um-dashboard .um-tbl tr:hover td{background:var(--surface2)}
        #um-dashboard .um-u{display:flex;align-items:center;gap:10px}
        #um-dashboard .um-av{width:32px;height:32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff;flex-shrink:0}
        #um-dashboard .um-uname{font-weight:600;color:var(--text);font-size:12.5px}
        #um-dashboard .um-usub{font-size:10px;color:var(--text3);margin-top:1px;font-family:'IBM Plex Mono',monospace}
        #um-dashboard .um-badge{font-size:10px;padding:3px 9px;border-radius:5px;font-weight:700;white-space:nowrap;display:inline-block}
        #um-dashboard .um-scope{font-size:10px;padding:2px 8px;border-radius:5px;font-weight:600;white-space:nowrap}
        #um-dashboard .um-st{font-size:10px;padding:3px 9px;border-radius:20px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
        #um-dashboard .um-st-on{background:rgba(34,197,94,.13);color:var(--success);border:1px solid rgba(34,197,94,.28)}
        #um-dashboard .um-st-off{background:rgba(239,68,68,.12);color:var(--danger);border:1px solid rgba(239,68,68,.28)}
        #um-dashboard .um-st-lock{background:rgba(245,158,11,.13);color:var(--warning);border:1px solid rgba(245,158,11,.3)}
        #um-dashboard .um-acts{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
        #um-dashboard .um-act{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}
        #um-dashboard .um-act:hover{filter:brightness(1.15)}
        #um-dashboard .um-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;flex-wrap:wrap}
        #um-dashboard .um-pager-info{font-size:11px;color:var(--text3)}
        #um-dashboard .um-pager-btns{display:flex;gap:5px}
        #um-dashboard .um-pg{min-width:30px;height:30px;padding:0 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
        #um-dashboard .um-pg.on{background:linear-gradient(135deg,#6366f1,#4338ca);color:#fff;border:none}
        #um-dashboard .um-pg:disabled{opacity:.4;cursor:not-allowed}
        #um-dashboard .um-legend{display:flex;flex-direction:column;gap:7px}
        #um-dashboard .um-leg-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text2)}
        #um-dashboard .um-leg-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
        #um-dashboard .um-leg-v{margin-left:auto;font-weight:700;color:var(--text);font-family:'IBM Plex Mono',monospace}
        #um-dashboard .um-act-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
        #um-dashboard .um-act-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
        #um-dashboard .um-act-tx{font-size:11.5px;color:var(--text2);line-height:1.35}
        #um-dashboard .um-act-tm{font-size:10px;color:var(--text3);margin-top:2px;font-family:'IBM Plex Mono',monospace}
        #um-dashboard .um-rp{width:100%;border-collapse:collapse;font-size:11px}
        #um-dashboard .um-rp th,#um-dashboard .um-rp td{padding:7px 8px;border-bottom:1px solid var(--border);text-align:center}
        #um-dashboard .um-rp th{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);font-weight:700}
        #um-dashboard .um-rp td:first-child,#um-dashboard .um-rp th:first-child{text-align:left;color:var(--text);font-weight:600}
        #um-dashboard .um-empty{padding:22px;text-align:center;color:var(--text3);font-size:12px}
        /* ===== build .63 — page-wide modern + compact restyle (Manage Users) ===== */
        #page-users .card{border-radius:14px;padding:15px 16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:box-shadow .18s}
        #page-users .card:hover{box-shadow:0 7px 24px rgba(0,0,0,.09)}
        #page-users .card::after{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,#6366f1,#4338ca);opacity:0;transition:opacity .18s}
        #page-users .card:hover::after{opacity:.55}
        #page-users .ch{margin-bottom:11px}
        #page-users .ct{font-family:'Rajdhani',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:.3px}
        #page-users .csub{font-size:10.5px;color:var(--text3)}
        /* modern section headers (replace plain underline dividers) */
        #page-users .um-section{display:flex;align-items:center;gap:11px;margin:22px 0 13px}
        #page-users .um-sec-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
        #page-users .um-sec-t{font-size:13.5px;font-weight:800;letter-spacing:.5px;color:var(--text);text-transform:uppercase;white-space:nowrap}
        #page-users .um-sec-s{font-size:10.5px;color:var(--text3)}
        #page-users .um-sec-line{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,currentColor,transparent);opacity:.25;min-width:20px}
        /* compact donut cards */
        #page-users .um-grid2{gap:12px;margin-bottom:12px}
        .um-donut-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 0}
        .um-donut-wrap .um-legend{flex:1;min-width:120px;gap:5px}
        .um-donut-wrap .um-leg-row{font-size:11px}
        /* Per-User Status — modern card grid */
        #user-access-matrix .uam2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
        .uam2-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:9px}
        .uam2-head{display:flex;align-items:center;gap:10px}
        .uam2-name{font-size:13px;font-weight:700;color:var(--text)}
        .uam2-sub{font-size:10px;color:var(--text3);font-family:'IBM Plex Mono',monospace}
        .uam2-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
        .uam2-scope{font-size:10px;color:var(--text2);background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:2px 8px}
        .uam2-times{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
        .uam2-times>div{display:flex;flex-direction:column;gap:1px}
        .uam2-times span{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}
        .uam2-times b{font-size:11px;color:var(--text);font-family:'IBM Plex Mono',monospace}
        .uam2-modhdr{font-size:10px;font-weight:700;margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
        .uam2-chips{display:flex;flex-wrap:wrap;gap:4px}
        .uam2-chip{font-size:9px;padding:2px 7px;background:rgba(34,197,94,.1);color:var(--success);border:1px solid rgba(34,197,94,.2);border-radius:5px}
        .uam2-chip.uam2-off{background:rgba(148,163,184,.1);color:var(--text3);border-color:var(--border)}
        .uam2-none{font-size:10px;color:var(--text3)}
        /* login summary popup — solid + high-contrast (fix #1) */
        #login-notif-overlay .idle-modal{background:var(--surface);border:1px solid var(--border);box-shadow:0 24px 70px rgba(0,0,0,.5);color:var(--text)}
        [data-theme="light"] #login-notif-overlay .idle-modal{background:#fff;border:1px solid var(--border);box-shadow:0 24px 70px rgba(30,40,80,.22);color:var(--text)}
        #login-notif-overlay .idle-modal::after{display:none}
        #nc-modal-body .nc-sec-t{color:var(--text2)}
        #nc-modal-body .nc-row{border-color:var(--border)}
        #nc-modal-body .nc-row3 span{color:var(--text2)}
        #nc-modal-body .nc-row3 span:last-child{color:var(--text);font-weight:700}
        /* ===== build .64 — premium 2026 enterprise redesign (User Management) ===== */
        #um-dashboard .um-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:2px 0 16px}
        #um-dashboard .um-hdr-t{font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:800;letter-spacing:.3px;color:var(--text);line-height:1.1}
        #um-dashboard .um-hdr-s{font-size:11.5px;color:var(--text3);margin-top:3px}
        #um-dashboard .um-hdr-actions{display:flex;gap:8px;flex-wrap:wrap}
        /* KPI cards — premium */
        #um-dashboard .um-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:13px;margin-bottom:16px}
        #um-dashboard .um-stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 17px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:transform .18s,box-shadow .18s;cursor:default}
        #um-dashboard .um-stat:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.10)}
        #um-dashboard .um-stat-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
        #um-dashboard .um-stat-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px}
        #um-dashboard .um-stat-l{font-size:11px;color:var(--text3);font-weight:600}
        #um-dashboard .um-stat-n{font-size:30px;font-weight:800;line-height:1;color:var(--text);letter-spacing:-1px}
        #um-dashboard .um-stat-sub{font-size:10.5px;margin-top:8px;display:flex;align-items:center;gap:5px;color:var(--text3)}
        #um-dashboard .um-stat-pct{font-weight:700;padding:1px 7px;border-radius:20px;font-size:10px}
        /* Directory tools */
        #um-dashboard .um-dir-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
        #um-dashboard .um-dir-tools .um-search{min-width:150px}
        #um-dashboard .um-viewtoggle{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
        #um-dashboard .um-viewtoggle button{border:none;background:var(--surface2);color:var(--text3);width:32px;height:34px;cursor:pointer;font-size:14px}
        #um-dashboard .um-viewtoggle button.on{background:linear-gradient(135deg,#2563EB,#1d4ed8);color:#fff}
        #um-dashboard .um-tbl th:nth-child(6),#um-dashboard .um-tbl td:nth-child(6){text-align:center}
        .um-dev{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);font-weight:600}
        .um-risk{font-size:10px;padding:2px 9px;border-radius:20px;font-weight:700;white-space:nowrap}
        .um-risk-low{background:rgba(34,197,94,.13);color:var(--success);border:1px solid rgba(34,197,94,.28)}
        .um-risk-med{background:rgba(245,158,11,.13);color:var(--warning);border:1px solid rgba(245,158,11,.3)}
        .um-risk-high{background:rgba(239,68,68,.12);color:var(--danger);border:1px solid rgba(239,68,68,.3)}
        /* Directory card grid */
        #um-grid-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px;margin-top:4px}
        .um-gcard{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:14px;transition:transform .16s,box-shadow .16s;position:relative}
        .um-gcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.12)}
        .um-gcard-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
        .um-gcard-name{font-size:13px;font-weight:700;color:var(--text)}
        .um-gcard-sub{font-size:10px;color:var(--text3);font-family:'IBM Plex Mono',monospace}
        .um-gcard-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
        .um-gcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
        /* Section title */
        #um-dashboard .um-secttitle{display:flex;align-items:center;gap:11px;margin:20px 0 13px}
        #um-dashboard .um-secttitle-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
        #um-dashboard .um-secttitle-t{font-size:14px;font-weight:800;letter-spacing:.3px;color:var(--text)}
        #um-dashboard .um-secttitle-s{font-size:10.5px;color:var(--text3)}
        /* Analytics grid */
        #um-dashboard .um-analytics{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-bottom:13px}
        @media(max-width:980px){#um-dashboard .um-analytics{grid-template-columns:1fr}}
        #um-dashboard .um-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:6px}
        .um-mcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 15px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
        .um-mcard-l{font-size:11px;color:var(--text3);font-weight:600;margin-bottom:6px}
        .um-mcard-n{font-size:23px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1}
        .um-mcard-spark{margin-top:9px}
        /* Trends + heatmap */
        .um-trend-svg{width:100%;height:130px;display:block}
        .um-hm{display:flex;flex-direction:column;gap:3px;padding:4px 0}
        .um-hm-row{display:flex;align-items:center;gap:3px}
        .um-hm-lab{font-size:9px;color:var(--text3);width:30px;flex-shrink:0;font-weight:600}
        .um-hm-cell{flex:1;aspect-ratio:1;border-radius:3px;min-width:8px}
        .um-hm-axis{display:flex;gap:3px;margin-left:33px;margin-top:4px}
        .um-hm-axis span{flex:1;font-size:8px;color:var(--text3);text-align:center}
        /* Role cards */
        #um-rolecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px}
        .um-rolecard{background:var(--surface2);border:1px solid var(--border);border-radius:13px;padding:13px;display:flex;flex-direction:column;gap:8px}
        .um-rolecard-top{display:flex;align-items:center;gap:9px}
        .um-rolecard-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;font-weight:800;flex-shrink:0}
        .um-rolecard-nm{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.15}
        .um-rolecard-stats{display:flex;gap:14px;margin-top:2px}
        .um-rolecard-stat b{font-size:16px;font-weight:800;color:var(--text);display:block;line-height:1}
        .um-rolecard-stat span{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
        /* Security cards */
        #um-security{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:11px}
        .um-seccard{background:var(--surface2);border:1px solid var(--border);border-radius:13px;padding:13px}
        .um-seccard-l{font-size:10.5px;color:var(--text3);font-weight:600;display:flex;align-items:center;gap:5px;margin-bottom:7px}
        .um-seccard-n{font-size:22px;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.5px}
        .um-seccard-s{font-size:10px;margin-top:6px;font-weight:600}
        /* Lifecycle kanban */
        #um-lifecycle{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        @media(max-width:760px){#um-lifecycle{grid-template-columns:1fr}}
        .um-kcol{background:var(--surface2);border:1px solid var(--border);border-radius:13px;padding:11px;display:flex;flex-direction:column;gap:8px}
        .um-kcol-hd{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding-bottom:8px;border-bottom:2px solid}
        .um-kcol-ct{font-size:11px;padding:1px 9px;border-radius:20px;font-weight:800}
        .um-kcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 10px;display:flex;align-items:center;gap:9px}
        .um-kcard-nm{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.2}
        .um-kcard-sub{font-size:9.5px;color:var(--text3);margin-top:1px}
        .um-kmore{font-size:10.5px;color:var(--text3);text-align:center;padding:4px;font-weight:600}
        /* ===== build .65 — liquid-glass popup, contrast, premium control panels ===== */
        /* Safety Summary → iOS-26 liquid glass (frosted, translucent, readable) */
        #login-notif-overlay{background:rgba(8,12,26,.40)}
        #login-notif-overlay .idle-modal{
          backdrop-filter:blur(36px) saturate(195%); -webkit-backdrop-filter:blur(36px) saturate(195%);
          background:linear-gradient(140deg,rgba(26,34,56,.66),rgba(26,34,56,.46));
          border:1px solid rgba(255,255,255,.16); border-radius:26px; color:#eef2f9;
          box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.22),inset 0 -2px 3px rgba(0,0,0,.18);
        }
        [data-theme="light"] #login-notif-overlay .idle-modal{
          background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(255,255,255,.44));
          border:1px solid rgba(255,255,255,.85); color:#16203a;
          box-shadow:0 30px 90px rgba(30,40,80,.24),inset 0 1px 2px rgba(255,255,255,.95);
        }
        #login-notif-overlay .idle-modal::after{display:block;opacity:.45}
        #nc-modal-body .nc-cat{backdrop-filter:blur(8px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
        [data-theme="light"] #nc-modal-body .nc-cat{background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7)}
        #nc-modal-body .nc-sec-t{color:var(--text2);font-weight:800}
        #nc-modal-body .nc-row{border-color:rgba(127,127,127,.18)}
        #nc-modal-body .nc-row3 span{color:var(--text2)}
        #nc-modal-body .nc-row3 span:last-child{color:var(--text);font-weight:700}
        /* Directory — stronger text contrast (fix: text hard to read) */
        #um-dashboard .um-tbl td{color:var(--text)}
        #um-dashboard .um-usub{color:var(--text2)}
        #um-dashboard .um-tbl td:nth-child(2) span{color:var(--text)!important;font-weight:600}
        #um-dashboard .um-tbl td:nth-child(5){color:var(--text2)!important;font-weight:600}
        #um-dashboard .um-tbl th{color:var(--text2);font-weight:800}
        /* live data pill */
        .um-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#16a34a;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.28);padding:2px 9px;border-radius:20px}
        .um-live i{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:umPulse 1.6s infinite}
        @keyframes umPulse{0%,100%{opacity:1}50%{opacity:.25}}
        /* ── Module / Feature Control — professional digital redesign ── */
        #module-toggle-grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important}
        .mc-group{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:14px}
        .mc-group-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
        .mc-group-t .mc-grp-ic{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--surface3,var(--surface));}
        .mc-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 13px;margin-bottom:10px}
        .mc-item:last-child{margin-bottom:0}
        .mc-item-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
        .mc-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--surface2);flex-shrink:0}
        .mc-label{font-size:13px;font-weight:700;color:var(--text);line-height:1.2}
        .mc-id{font-size:9.5px;color:var(--text3);font-family:'IBM Plex Mono',monospace;margin-top:2px}
        .mc-badge{font-size:9.5px;padding:3px 9px;border-radius:20px;font-weight:700;white-space:nowrap;flex-shrink:0}
        .mc-seg{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px}
        .mc-seg button{flex:1;border:none;background:transparent;color:var(--text3);font-size:10.5px;font-weight:700;padding:8px 5px;border-radius:7px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .15s;white-space:nowrap}
        .mc-seg button:hover{color:var(--text);background:var(--surface)}
        .mc-seg button.on{color:#fff;box-shadow:0 2px 9px rgba(0,0,0,.18)}
        .mc-seg button.on.m-all{background:linear-gradient(135deg,#22c55e,#16a34a)}
        .mc-seg button.on.m-off{background:linear-gradient(135deg,#ef4444,#dc2626)}
        .mc-seg button.on.m-admin{background:linear-gradient(135deg,#ec4899,#be185d)}
        .mc-seg button.on.m-sel{background:linear-gradient(135deg,#3b82f6,#2563eb)}
        .mc-pick{margin-top:10px;padding:11px;background:var(--surface2);border:1px solid var(--border);border-radius:10px}
        .mc-pick-t{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:8px}
        .mc-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:170px;overflow-y:auto}
        .mc-chk{display:flex;align-items:center;gap:7px;font-size:11.5px;cursor:pointer;padding:6px 8px;border-radius:7px;background:var(--surface);border:1px solid var(--border);color:var(--text2)}
        .mc-chk input{margin:0;flex-shrink:0;accent-color:#3b82f6}
        .mc-chk.on{border-color:#3b82f6;color:var(--text);background:rgba(59,130,246,.08)}
        .fc-page{background:var(--surface2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:10px}
        .fc-sum{padding:13px 15px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:11px;user-select:none}
        .fc-sum::-webkit-details-marker{display:none}
        .fc-page[open] .fc-caret{transform:rotate(90deg)}
        .fc-caret{font-size:11px;color:var(--text3);transition:transform .2s}
        .fc-page-t{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text);flex:1}
        .fc-prog{height:6px;width:74px;background:var(--border);border-radius:4px;overflow:hidden;flex-shrink:0}
        .fc-prog i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a)}
        .fc-sum-s{font-size:10px;color:var(--text3);white-space:nowrap;font-weight:600}
        .fc-body{padding:2px 14px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
        .fc-item{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 12px}
        .fc-item-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
        .fc-item-t{flex:1;font-size:12px;font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        /* Per-User Status — richer card */
        .uam2-card{box-shadow:0 1px 3px rgba(0,0,0,.04);transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden}
        .uam2-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6366f1,#a855f7)}
        .uam2-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.11)}
        .uam2-covrow{display:flex;align-items:center;justify-content:space-between;font-size:9.5px;color:var(--text3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px;font-weight:700}
        .uam2-cov{height:7px;border-radius:5px;background:var(--border);overflow:hidden}
        .uam2-cov i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:5px}
        /* ===== build .70 — compact User Management UI ===== */
        /* (1) Login Trends + Activity Heatmap → much smaller */
        #um-dashboard .um-analytics{grid-template-columns:repeat(4,1fr);gap:11px}
        @media(max-width:1100px){#um-dashboard .um-analytics{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:640px){#um-dashboard .um-analytics{grid-template-columns:1fr}}
        #um-dashboard .um-analytics .card{padding:12px 13px}
        #um-dashboard .um-analytics .ch{margin-bottom:7px}
        #um-dashboard .um-analytics .ct{font-size:12px}
        #um-dashboard .um-analytics .csub{font-size:9.5px}
        #um-dashboard .um-trend-svg{height:62px}
        #um-dashboard .um-hm-cell{aspect-ratio:auto;height:12px;min-width:0;border-radius:2px}
        #um-dashboard .um-hm-row{gap:2px;margin-bottom:2px}
        #um-dashboard .um-hm-lab{width:24px;font-size:8px}
        #um-dashboard .um-hm-axis span{font-size:8px}
        #um-dashboard #um-donut-dept svg,#um-dashboard #um-donut-role svg{max-height:118px}
        /* (2) Roles & Permission Center + Security & Access Control → smaller */
        #um-dashboard #um-rolecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
        #um-dashboard .um-rolecard{padding:10px;gap:6px;border-radius:11px}
        #um-dashboard .um-rolecard-ic{width:30px;height:30px;font-size:13px}
        #um-dashboard .um-rolecard-nm{font-size:11.5px}
        #um-dashboard #um-security{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
        #um-dashboard .um-grid2-top .card{padding:13px 14px}
        /* (3) Module Control cards → tighter */
        #module-toggle-grid .mc-group{padding:11px}
        #module-toggle-grid .mc-item{padding:9px 11px;margin-bottom:8px}
        #module-toggle-grid .mc-ico{width:32px;height:32px;font-size:15px}
        #module-toggle-grid .mc-label{font-size:12px}
        /* (5) Per-User Status → compact dense grid */
        #user-access-matrix .uam2-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
        #user-access-matrix .uam2-card{padding:10px;gap:6px;border-radius:11px}
        #user-access-matrix .uam2-chips{gap:3px}
        #user-access-matrix .uam2-modhdr{font-size:9.5px}
        /* (6) Modern dropdowns in the User Directory toolbar */
        #um-dashboard .um-dir-tools select,#um-role,#um-status,#um-scope{
          -webkit-appearance:none;appearance:none;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text);
          background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 30px 8px 12px;cursor:pointer;
          background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
          background-repeat:no-repeat;background-position:right 10px center;transition:border-color .15s,box-shadow .15s}
        #um-dashboard .um-dir-tools select:hover,#um-role:hover,#um-status:hover,#um-scope:hover{border-color:#7c5cff}
        #um-dashboard .um-dir-tools select:focus,#um-role:focus,#um-status:focus,#um-scope:focus{outline:none;border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.14)}
        /* (3) collapsible "selected users" picker */
        .mc-selsum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:9px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:10px}
        .mc-selsum-chips{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:0}
        .mc-uchip{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:rgba(59,130,246,.12);color:#3b82f6;border:1px solid rgba(59,130,246,.3);white-space:nowrap}
        .mc-uchip.none{background:transparent;color:var(--text3);border:1px dashed var(--border);font-style:italic}
        .mc-editbtn{flex-shrink:0;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:11px;font-weight:700;padding:6px 12px;border-radius:9px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
        .mc-editbtn:hover{border-color:#3b82f6;color:#3b82f6}
        .mc-donebtn{width:100%;margin-top:8px;border:none;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:11.5px;font-weight:700;padding:8px;border-radius:9px;cursor:pointer;font-family:inherit}
        /* ===== build .72 — denser User Management ===== */
        /* (3) Module Control → single-line horizontal rows, much less vertical space */
        #module-toggle-grid{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))!important}
        #module-toggle-grid .mc-item{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:7px 10px;margin-bottom:6px}
        #module-toggle-grid .mc-ico{width:28px;height:28px;font-size:14px;border-radius:8px}
        #module-toggle-grid .mc-rlabel{flex:1;min-width:120px;display:flex;flex-direction:column;justify-content:center}
        #module-toggle-grid .mc-label{font-size:11.5px;line-height:1.15}
        #module-toggle-grid .mc-id{font-size:8.5px;margin-top:0}
        #module-toggle-grid .mc-seg{flex-shrink:0;width:auto;padding:2px;gap:3px}
        #module-toggle-grid .mc-seg button{flex:0 0 auto;padding:6px 9px;font-size:10px}
        #module-toggle-grid .mc-pick,#module-toggle-grid .mc-selsum{flex-basis:100%;width:100%;margin-top:7px}
        #module-toggle-grid .mc-group{padding:10px}
        /* (2) User Lifecycle → smaller boxes */
        #um-dashboard #um-lifecycle .um-kcol{padding:9px;gap:5px}
        #um-dashboard #um-lifecycle .um-kcol-hd{font-size:9.5px;padding-bottom:6px}
        #um-dashboard #um-lifecycle .um-kcard{padding:5px 7px;gap:6px;border-radius:8px}
        #um-dashboard #um-lifecycle .um-kcard .um-av{width:22px!important;height:22px!important;font-size:9px!important}
        #um-dashboard #um-lifecycle .um-kcard-nm{font-size:10px}
        #um-dashboard #um-lifecycle .um-kcard-sub{font-size:8.5px}
        #um-dashboard #um-lifecycle .um-kmore{font-size:9.5px;padding:3px}
        /* (1) Roles & Security → embed user details in a FIXED-height scroll area (box size stays uniform) */
        .um-rc-users{max-height:84px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
        .um-rc-u{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text2);padding:2px 0}
        .um-rc-uav{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:#fff;overflow:hidden}
        .um-rc-un{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .um-rc-users::-webkit-scrollbar,.um-sec-users::-webkit-scrollbar{width:5px}
        .um-rc-users::-webkit-scrollbar-thumb,.um-sec-users::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
        .um-seccard{display:flex;flex-direction:column;min-height:118px}
        .um-sec-users{max-height:52px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:3px;margin-top:7px}
        .um-sec-uchip{font-size:9px;font-weight:600;padding:2px 7px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--text2);white-space:nowrap}
        /* (7) Executive Dashboard — Best/Risk side by side, compact lists */
        @media(max-width:900px){.exec-drivers-2col{grid-template-columns:1fr!important}}
        .exec-drivers-2col .cxo-list,.exec-drivers-2col .bd-list{max-height:360px;overflow-y:auto}
        .exec-drivers-2col .cxo-list::-webkit-scrollbar,.exec-drivers-2col .bd-list::-webkit-scrollbar{width:6px}
        .exec-drivers-2col .cxo-list::-webkit-scrollbar-thumb,.exec-drivers-2col .bd-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
        

/* ═══════════════════════════════════════════════════════════════
   from index.html line 5527  ·  <style id="audit-css">
   ═══════════════════════════════════════════════════════════════ */
        /* build .67 — refined 'Mythos' polish for the Master Audit page (follows app light/dark theme) */
        #page-audit .card{border-radius:16px;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.045);transition:box-shadow .18s;position:relative;overflow:hidden}
        #page-audit .card:hover{box-shadow:0 8px 28px rgba(124,92,255,.10)}
        #page-audit .ct{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.3px}
        #page-audit .sm-stat-row{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
        #page-audit .sm-stat-card{padding:15px 16px;border-radius:14px;border:1px solid var(--border);border-left:1px solid var(--border);background:linear-gradient(160deg,var(--surface),var(--surface2));box-shadow:0 1px 3px rgba(0,0,0,.05);transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden}
        #page-audit .sm-stat-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg,#7c5cff,#22b8e6);opacity:.9}
        #page-audit .sm-stat-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(124,92,255,.13)}
        #page-audit .sm-stat-card.sm-good::before{background:linear-gradient(180deg,#22c55e,#16a34a)}
        #page-audit .sm-stat-card.sm-bad::before{background:linear-gradient(180deg,#ef4444,#dc2626)}
        #page-audit .sm-stat-card.sm-warn::before{background:linear-gradient(180deg,#f59e0b,#d97706)}
        #page-audit .sm-stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
        #page-audit .sm-stat-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
        #page-audit .sm-stat-lbl{font-size:10px}
        #page-audit .sm-stat-val{font-size:25px;letter-spacing:-.5px}
        #page-audit .tw{border:1px solid var(--border);border-radius:12px;overflow:auto}
        #page-audit .sm-tbl th{background:linear-gradient(180deg,var(--surface2),var(--surface));border-bottom:1px solid var(--border);font-size:9.5px;letter-spacing:.5px}
        #page-audit .sm-tbl td{padding:9px 12px}
        #page-audit .sm-tbl tr:hover td{background:rgba(124,92,255,.06)}
        #page-audit .sm-pill{font-size:10px;padding:2px 9px;border-radius:20px;font-weight:700;white-space:nowrap;display:inline-block}
        #page-audit .mm-foot{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:20px 0 8px}
        #page-audit .mm-foot span{font-size:9.5px;color:var(--text3);letter-spacing:.8px;text-transform:uppercase;font-weight:700}
        #page-audit .mm-foot img{height:19px;opacity:.92}
        #page-audit .mm-foot .mm-d{display:none}
        #page-audit .mm-foot .mm-w{display:inline}
        [data-theme="light"] #page-audit .mm-foot .mm-w{display:none}
        [data-theme="light"] #page-audit .mm-foot .mm-d{display:inline}
        

/* ═══════════════════════════════════════════════════════════════
   from index.html line 24141  ·  <style>
   ═══════════════════════════════════════════════════════════════ */
.ra-modal{display:none;position:fixed;inset:0;z-index:99995;background:rgba(3,8,18,.66);align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.ra-box{width:min(560px,96vw);max-height:88vh;display:flex;flex-direction:column;background:#0E1B2E;border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5);font-family:system-ui,sans-serif}
.ra-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#0B1A2E;border-bottom:1px solid rgba(255,255,255,.08)}
.ra-title{color:#EAF2FF;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.ra-badge{font-size:9.5px;font-weight:800;letter-spacing:.5px;background:rgba(51,193,117,.16);color:#33C175;padding:3px 8px;border-radius:20px}
.ra-x{background:transparent;border:none;color:#8aa0bd;font-size:18px;cursor:pointer;line-height:1}
.ra-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:150px;background:#07111F}
.ra-msg{max-width:90%;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.5}
.ra-bot{align-self:flex-start;background:#13263d;color:#dbe7f5;border-bottom-left-radius:3px}
.ra-user{align-self:flex-end;background:#33C175;color:#06121e;font-weight:600;border-bottom-right-radius:3px}
/* build .96: example chips replace the old dropdowns — tapping one FILLS the text box
   (it does not run anything), so users still type/edit their own wording. */
.ra-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0;background:#0B1A2E;border-top:1px solid rgba(255,255,255,.06)}
.ra-chip{background:#13263d;color:#a9c2de;border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:6px 11px;font-size:11.5px;font-family:inherit;cursor:pointer;line-height:1.3;transition:background .15s,color .15s}
.ra-chip:hover{background:#1b3550;color:#EAF2FF}
.ra-busy{opacity:.55;pointer-events:none}
.ra-inputrow{display:flex;gap:8px;padding:12px 14px;background:#0B1A2E;border-top:1px solid rgba(255,255,255,.06)}
.ra-input{flex:1;background:#0E1B2E;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:11px 13px;font-size:13px;font-family:inherit;outline:none}
.ra-send{background:#33C175;color:#06121e;border:none;font-weight:700;width:44px;border-radius:10px;cursor:pointer;font-size:15px}

/* ═══════════════════════════════════════════════════════════════
   from index.html line 24891  ·  <style id="v87-polish">
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   BUILD .87 POLISH — loaded last, so these override earlier rules
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. AI Executive Intelligence Insights — SQUEEZED (compact 2-col grid) ── */
#di-insights-panel{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:6px !important;max-height:265px;overflow-y:auto;padding-right:3px;scrollbar-width:thin}
#di-insights-panel .insight-card{padding:6px 10px !important;gap:8px !important;margin-bottom:0 !important;border-radius:7px;align-items:center}
#di-insights-panel .insight-card:hover{transform:none}
#di-insights-panel .insight-ico{font-size:13px;line-height:1}
#di-insights-panel .insight-tag{font-size:8px;padding:1px 6px;letter-spacing:.4px}
#di-insights-panel .insight-text{font-size:10.5px !important;line-height:1.38;margin-top:1px}

/* ── 2. MULTI-PLANT product gating — hide columns for products a plant lacks ── */
body.plant-no-dfms table:has(#veh-tb) thead th:nth-child(5),body.plant-no-dfms #veh-tb td:nth-child(5),
body.plant-no-dfms table:has(#ic-tb)  thead th:nth-child(5),body.plant-no-dfms #ic-tb  td:nth-child(5){display:none}
body.plant-no-rvc  table:has(#veh-tb) thead th:nth-child(6),body.plant-no-rvc  #veh-tb td:nth-child(6),
body.plant-no-rvc  table:has(#ic-tb)  thead th:nth-child(6),body.plant-no-rvc  #ic-tb  td:nth-child(6){display:none}
body.plant-no-at   table:has(#veh-tb) thead th:nth-child(7),body.plant-no-at   #veh-tb td:nth-child(7),
body.plant-no-at   table:has(#ic-tb)  thead th:nth-child(7),body.plant-no-at   #ic-tb  td:nth-child(7){display:none}
body.plant-no-dfms #di-heatmap-table th:nth-child(2),body.plant-no-dfms #di-heatmap-table td:nth-child(2){display:none}
body.plant-no-rvc  #di-heatmap-table th:nth-child(3),body.plant-no-rvc  #di-heatmap-table td:nth-child(3){display:none}
body.plant-no-at   #di-heatmap-table th:nth-child(4),body.plant-no-at   #di-heatmap-table td:nth-child(4){display:none}
/* Escalation table per-device columns (DFMS Inst / RVC Inst / AT Inst) */
body.plant-no-dfms #di-esc-tbody td:nth-child(4),body.plant-no-dfms table:has(#di-esc-tbody) thead th:nth-child(4){display:none}
body.plant-no-rvc  #di-esc-tbody td:nth-child(5),body.plant-no-rvc  table:has(#di-esc-tbody) thead th:nth-child(5){display:none}
body.plant-no-at   #di-esc-tbody td:nth-child(6),body.plant-no-at   table:has(#di-esc-tbody) thead th:nth-child(6){display:none}

/* ── 3. MESSAGING — WhatsApp-style professional skin ── */
.chat-shell{border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.22);border:1px solid var(--border)}
.chat-rail-head{padding:14px 16px;background:linear-gradient(180deg,var(--surface2),var(--surface))}
.chat-rail-title{font-family:'Rajdhani',sans-serif;font-size:15px;letter-spacing:.4px}
.chat-new-btn{background:linear-gradient(135deg,#00a884,#008f72);box-shadow:0 2px 8px rgba(0,168,132,.35)}
.chat-new-btn:hover{box-shadow:0 4px 14px rgba(0,168,132,.5)}
.chat-item{padding:11px 14px;border-left:none;border-bottom:1px solid rgba(134,150,160,.08)}
.chat-item.active{background:rgba(0,168,132,.10);border-left:none;box-shadow:inset 3px 0 0 #00a884}
.chat-item-unread{background:#00a884;box-shadow:0 1px 4px rgba(0,168,132,.5)}
/* Wallpaper-style message area (WhatsApp doodle feel, theme-aware) */
.chat-messages{
  padding:18px clamp(14px,5%,56px);gap:4px;
  background-color:#0b141a;
  background-image:
    radial-gradient(rgba(255,255,255,.028) 1.2px, transparent 1.2px),
    radial-gradient(rgba(255,255,255,.018) 1.2px, transparent 1.2px);
  background-size:26px 26px,26px 26px;background-position:0 0,13px 13px;
}
[data-theme="light"] .chat-messages{
  background-color:#efe7dd;
  background-image:
    radial-gradient(rgba(0,0,0,.045) 1.2px, transparent 1.2px),
    radial-gradient(rgba(0,0,0,.03) 1.2px, transparent 1.2px);
}
.chat-day-sep{background:rgba(24,34,41,.92);color:#8696a0;padding:4px 12px;border-radius:8px;font-size:10.5px;box-shadow:0 1px 1px rgba(0,0,0,.2);letter-spacing:.3px}
[data-theme="light"] .chat-day-sep{background:#fff;color:#54656f}
.chat-msg-row{max-width:72%}
.chat-msg{border-radius:9px;padding:7px 10px 5px;box-shadow:0 1px .8px rgba(0,0,0,.28);font-size:13.2px;line-height:1.42}
.chat-msg-row.mine .chat-msg{background:#005c4b;border:none;color:#e9edef;border-bottom-right-radius:3px}
.chat-msg-row.theirs .chat-msg{background:#202c33;border:none;color:#e9edef;border-bottom-left-radius:3px}
[data-theme="light"] .chat-msg-row.mine .chat-msg{background:#d9fdd3;color:#111b21}
[data-theme="light"] .chat-msg-row.theirs .chat-msg{background:#ffffff;color:#111b21}
[data-theme="machinemax"] .chat-msg-row.mine .chat-msg{background:#0d5c46;border:none;color:#e9f5ef}
.chat-msg-from{color:#53bdeb;font-size:11px;font-weight:700}
.chat-msg-foot{font-size:9.5px;color:rgba(233,237,239,.6);margin-top:2px;gap:4px}
[data-theme="light"] .chat-msg-foot{color:rgba(17,27,33,.45)}
.chat-tick-seen{color:#53bdeb}
[data-theme="light"] .chat-tick-seen{color:#4fb6ec}
.chat-pane-head{padding:10px 16px;background:var(--surface2);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chat-pane-name{font-size:14.5px}
.chat-composer{padding:10px 14px;background:var(--surface2);gap:9px}
.chat-composer textarea{border-radius:22px;padding:10px 16px;font-size:13.5px;background:var(--surface);border:1px solid transparent;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.chat-composer textarea:focus{border-color:rgba(0,168,132,.5)}
.chat-send-btn{width:42px;height:42px;background:linear-gradient(135deg,#00a884,#008f72);box-shadow:0 2px 8px rgba(0,168,132,.4)}
.chat-send-btn:hover{box-shadow:0 4px 14px rgba(0,168,132,.55)}
[data-theme="machinemax"] .chat-send-btn{background:linear-gradient(135deg,var(--mm-green),#1a9950)}

/* ── 4. USER MANAGEMENT — designer arrangement refinements ── */
#page-users .card{margin-bottom:14px}
#page-users .um-section{margin:26px 0 14px}
#page-users .tw{border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:560px}
#page-users .um-tbl thead th{position:sticky;top:0;background:var(--surface);z-index:2;box-shadow:0 1px 0 var(--border)}
#page-users .um-stats{gap:11px}
#page-users .um-stat{transition:transform .16s,box-shadow .16s}
#page-users .um-stat:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(99,102,241,.12)}
#page-users select:focus,#page-users input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
#page-users .um-act{transition:transform .13s,box-shadow .13s}
#page-users .um-act:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.15)}

/* ── 5. MASTER AUDIT LOGS — refinement pass ── */
#page-audit .tw{max-height:600px}
#page-audit .sm-tbl thead th{position:sticky;top:0;z-index:2;background:var(--surface)}
#page-audit select:focus,#page-audit input:focus{outline:none;border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.12)}
#page-audit .card{margin-bottom:14px}

/* ── 6. Global fallback for .um-qbtn (original rules are scoped to #um-dashboard;
       the IC upload modal and Plant panel reuse the class outside that container) ── */
.um-qbtn{padding:6px 12px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--border);background:var(--surface2);color:var(--text2)}
.um-qbtn:hover{filter:brightness(1.12)}
.um-qbtn.primary{background:linear-gradient(135deg,#6366f1,#4338ca);color:#fff;border:none}

/* ── 7. Mobile comfort for the new IC page ── */
@media(max-width:640px){
  #page-ic .fb{gap:6px}
  #page-ic .fb label{display:none}
  #page-ic .fb select,#page-ic .fb input{flex:1;min-width:calc(50% - 6px)}
  #page-ic .ic-stats{grid-template-columns:repeat(2,1fr);gap:8px}
  #page-ic .ic-stat-n{font-size:19px}
}

/* ═══════════════════════════════════════════════════════════════
   from index.html line 25721  ·  <style id="v88-polish">
   ═══════════════════════════════════════════════════════════════ */
/* build .88 additions */
.ic-ocr-spin{width:15px;height:15px;border:2px solid rgba(99,102,241,.25);border-top-color:#6366f1;border-radius:50%;animation:icspin .8s linear infinite;flex-shrink:0;margin-top:1px}
@keyframes icspin{to{transform:rotate(360deg)}}
#ic-ocr-status{display:none;gap:9px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(99,102,241,.07);border:1px solid rgba(99,102,241,.25);font-size:11px;color:var(--text2);line-height:1.5}
.ad-pv-mode.on{background:linear-gradient(135deg,#33C175,#1FA463);color:#04120A;border:none;font-weight:800}
body.pol-no-fines [id^="fkv-"]{display:none !important}
#ni-policy .ni-ico{filter:hue-rotate(0deg)}

/* ═══════════════════════════════════════════════════════════════
   from index.html line 25825  ·  <style id="v89-css">
   ═══════════════════════════════════════════════════════════════ */
/* ── plant chips (Manage Users) ── */
.plant-chip-row{display:flex;flex-wrap:wrap;gap:7px}
.plant-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--border);border-radius:9px;background:var(--surface2);font-size:11.5px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.plant-chip input{accent-color:#6366f1;width:14px;height:14px;cursor:pointer}
.plant-chip.on{border-color:rgba(99,102,241,.65);background:rgba(99,102,241,.12)}
.plant-chip .pc-def{font-size:8px;letter-spacing:1px;color:#33C175;border:1px solid rgba(51,193,117,.4);border-radius:10px;padding:1px 6px;margin-left:2px;font-family:'IBM Plex Mono',monospace}
/* ── login plant picker ── */
#plant-pick-overlay{position:fixed;inset:0;z-index:100000;background:rgba(4,10,20,.82);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;animation:ppin .22s ease}
#plant-pick-overlay.out{opacity:0;transition:opacity .18s}
@keyframes ppin{from{opacity:0}to{opacity:1}}
#plant-pick-overlay .pp-card{background:var(--surface,#0d1526);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:20px;max-width:640px;width:100%;padding:22px;box-shadow:0 40px 90px rgba(0,0,0,.6);animation:ppup .28s ease}
@keyframes ppup{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
#plant-pick-overlay .pp-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
#plant-pick-overlay .pp-ico{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
#plant-pick-overlay .pp-t{font-size:17px;font-weight:800}
#plant-pick-overlay .pp-s{font-size:11.5px;color:var(--text2,#9fb4cc);margin-top:2px;line-height:1.5}
#plant-pick-overlay .pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
#plant-pick-overlay .pp-opt{position:relative;text-align:left;background:var(--surface2,rgba(255,255,255,.03));border:1px solid var(--border,rgba(255,255,255,.12));border-radius:14px;padding:15px 15px 13px;cursor:pointer;color:var(--text,#e8f0fa);font-family:inherit;transition:transform .16s,border-color .16s,background .16s}
#plant-pick-overlay .pp-opt:hover{transform:translateY(-3px);border-color:rgba(99,102,241,.7);background:rgba(99,102,241,.09)}
#plant-pick-overlay .pp-opt.last{border-color:rgba(51,193,117,.55)}
#plant-pick-overlay .pp-name{display:block;font-size:13.5px;font-weight:800;margin-bottom:7px}
#plant-pick-overlay .pp-badges{display:flex;flex-wrap:wrap;gap:4px}
#plant-pick-overlay .pp-badges i{font-style:normal;font-size:8.5px;letter-spacing:.6px;color:var(--text2,#9fb4cc);border:1px solid var(--border,rgba(255,255,255,.14));border-radius:10px;padding:2px 7px;font-family:'IBM Plex Mono',monospace}
#plant-pick-overlay .pp-def{position:absolute;top:10px;right:10px;font-size:7.5px;letter-spacing:1px;color:#33C175;border:1px solid rgba(51,193,117,.4);border-radius:10px;padding:2px 6px;font-family:'IBM Plex Mono',monospace}
#plant-pick-overlay .pp-last{display:inline-block;margin-top:8px;font-size:9px;color:#33C175;font-family:'IBM Plex Mono',monospace;letter-spacing:.5px}
#plant-pick-overlay .pp-foot{margin-top:14px;font-size:10px;color:var(--text3,#63788f);text-align:center}
@media(max-width:520px){#plant-pick-overlay .pp-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   from index.html line 25854  ·  <style id="v90-contrast-fix">
   ═══════════════════════════════════════════════════════════════ */
/* ═══ BUILD .90 FIX: login summary / operations digest popup readability ═══
   The .65 "liquid glass" panel is translucent — over the bright ad page the
   blur makes the panel light while the text stays near-white → unreadable.
   Final override (loaded last): SOLID dark panel + explicit text colors, so
   it is readable over ANY backdrop, in BOTH themes. */
#login-notif-overlay .idle-modal{
  background:#0E1830 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid rgba(148,178,214,.24) !important;
  color:#EDF3FB !important;
  box-shadow:0 30px 90px rgba(0,0,0,.6) !important;
}
#login-notif-overlay .idle-modal::after{display:none !important}
#login-notif-overlay .nc-hello{color:#EDF3FB !important}
#login-notif-overlay .nc-hello strong{color:#FFFFFF !important}
#login-notif-overlay .nc-sec-t{color:#8FA6C4 !important}
#login-notif-overlay .nc-row{border-color:rgba(148,178,214,.16) !important}
#login-notif-overlay .nc-row span{color:#C6D4E8 !important}
#login-notif-overlay .nc-row span:last-child{color:#FFFFFF !important}
#login-notif-overlay .nc-row3 span{color:#C6D4E8 !important}
#login-notif-overlay .nc-row3 span:last-child{color:#FFFFFF !important}
#login-notif-overlay .nc-empty{color:#8FA6C4 !important}
#login-notif-overlay .nc-cat{background:rgba(255,255,255,.05) !important;border:1px solid rgba(148,178,214,.18) !important;backdrop-filter:none !important}
#login-notif-overlay .nc-cat-n{color:#FFFFFF !important}
#login-notif-overlay .nc-cat-l{color:#9DB2CC !important}
#login-notif-overlay .nc-fine{color:#EDF3FB !important}
#login-notif-overlay .nc-fine strong{color:#FFD166 !important}
#login-notif-overlay .nc-pbtn{color:#C6D4E8 !important;border-color:rgba(148,178,214,.25) !important}
#login-notif-overlay .nc-pbtn.on{color:#04120A !important}
#login-notif-overlay .nc-range{color:#8FA6C4 !important}
#login-notif-overlay table, #login-notif-overlay td, #login-notif-overlay th{color:#C6D4E8 !important}

/* ═══════════════════════════════════════════════════════════════
   from index.html line 26023  ·  <style id="v100-css">
   ═══════════════════════════════════════════════════════════════ */
/* ═══ BUILD 100 — multi-plant chrome ═══ */

/* ── Header plant switcher ── */
#plant-switch{position:relative;flex-shrink:0}
#plant-switch .ps-btn{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;
  background:var(--surface2,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.12));
  color:var(--text,#e8f0fa);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  transition:border-color .15s,background .15s}
#plant-switch .ps-btn:hover{border-color:var(--plant-accent,#6366f1);background:rgba(99,102,241,.10)}
#plant-switch .ps-ico{font-size:13px;line-height:1}
#plant-switch .ps-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#plant-switch .ps-caret{font-size:9px;opacity:.7}
#plant-switch .ps-menu{display:none;position:absolute;top:calc(100% + 7px);left:0;min-width:250px;z-index:9500;
  background:var(--surface,#0d1526);border:1px solid var(--border,rgba(255,255,255,.12));border-radius:13px;
  padding:6px;box-shadow:0 22px 55px rgba(0,0,0,.45)}
#plant-switch.open .ps-menu{display:block}
#plant-switch .ps-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 10px;
  border:none;border-radius:9px;background:none;color:var(--text,#e8f0fa);font-family:inherit;cursor:pointer;
  transition:background .13s}
#plant-switch .ps-item:hover{background:rgba(99,102,241,.12)}
#plant-switch .ps-item.on{background:rgba(99,102,241,.16)}
#plant-switch .ps-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
#plant-switch .ps-lbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#plant-switch .ps-lbl b{font-size:12px;font-weight:800}
#plant-switch .ps-lbl i{font-style:normal;font-size:9px;color:var(--text3,#63788f);
  font-family:'IBM Plex Mono',monospace;letter-spacing:.4px}
#plant-switch .ps-tick{color:#33C175;font-size:12px}
@media(max-width:760px){#plant-switch .ps-name{display:none}}

/* ── Blocking overlay during a switch: no half-mixed state is ever visible ── */
#plant-switch-overlay{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;
  background:rgba(4,10,20,.86);backdrop-filter:blur(7px)}
#plant-switch-overlay .pso-box{text-align:center;color:#EDF3FB}
#plant-switch-overlay .pso-spin{width:46px;height:46px;margin:0 auto 16px;border-radius:50%;
  border:3px solid rgba(255,255,255,.14);border-top-color:var(--plant-accent,#6366f1);
  animation:psoSpin .8s linear infinite}
@keyframes psoSpin{to{transform:rotate(360deg)}}
#plant-switch-overlay .pso-t{font-size:16px;font-weight:800;letter-spacing:.3px}
#plant-switch-overlay .pso-s{font-size:11.5px;color:#8FA6C4;margin-top:5px}

/* ── Plant Management ── */
.pm-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin-bottom:14px}
.pm-stat{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 11px;text-align:center}
.pm-stat-v{font-size:18px;font-weight:800;line-height:1.1;font-family:'IBM Plex Mono',monospace}
.pm-stat-l{font-size:8.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-top:4px}
.pm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:14px}
.pm-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:13px;position:relative}
.pm-card.off{opacity:.62;border-style:dashed}
.pm-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0}
.pm-form{border-top:1px dashed var(--border);padding-top:13px}
.pm-form-t{font-size:11px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:11px}
.pm-sec{font-size:9.5px;font-weight:800;color:var(--plant-accent,#6366f1);text-transform:uppercase;
  letter-spacing:1px;margin:14px 0 7px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.pm-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:600;
  display:block;margin-bottom:5px}
.pm-in{width:100%;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:12px;font-family:inherit}
.pm-in:focus{outline:none;border-color:var(--plant-accent,#6366f1)}