:root {
      --bg-gradient: radial-gradient(circle at 50% 10%, #0d1b2a 0%, #050b14 100%);
      --glass-bg: rgba(13, 25, 44, 0.72);
      --glass-border: rgba(0, 242, 255, 0.25);
      --glass-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
      --card-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
      --cyan: #00f2ff;
      --cyan-glow: rgba(0, 242, 255, 0.3);
      --green: #10b981;
      --red: #ff3366;
      --amber: #f59e0b;
      --purple: #a855f7;
      --yellow: #eab308;
      --text-main: #f8fafc;
      --text-muted: #8493a8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --aside-bg: rgba(6, 12, 23, 0.95);
    }

    body.light-theme {
      --bg-gradient: radial-gradient(circle at 50% 10%, #e2e8f0 0%, #cbd5e1 100%);
      --glass-bg: rgba(255, 255, 255, 0.65);
      --glass-border: rgba(0, 162, 255, 0.4);
      --glass-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
      --card-glow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
      --cyan: #0077ff;
      --cyan-glow: rgba(0, 119, 255, 0.3);
      --text-main: #0f172a;
      --text-muted: #475569;
      --border-subtle: rgba(0, 0, 0, 0.08);
      --aside-bg: rgba(255, 255, 255, 0.95);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg-gradient);
      color: var(--text-main);
      display: flex;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .glass-panel {
      background: var(--glass-shine), var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 14px;
      /* backdrop-filter blur removed here on purpose: with 15+ of these cards
         on screen, the browser had to resample the blur behind every single
         one on every scroll frame — the main cause of scroll jank. There's
         no busy texture behind these cards anyway (just a smooth gradient),
         so a slightly more opaque --glass-bg gives nearly the same "glass"
         look for a fraction of the GPU cost. */
      box-shadow: var(--card-glow);
    }

    aside {
      width: 240px;
      background: var(--aside-bg);
      border-right: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      padding: 16px 12px;
      z-index: 10001;
      position: fixed;
      top: 0; bottom: 0; left: -280px;
      transition: left 0.3s ease, box-shadow 0.3s ease;
      box-shadow: none;
    }

    /* FIX: the shadow used to be on the base `aside` rule, so even while
       the sidebar sat off-screen at left:-250px its blurred shadow still
       poked out onto the visible edge of the page — a faint gradient
       smudge on the left in both themes. Now it only shows once the
       sidebar is actually open. */
    aside.open { left: 0; box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5); }

    .brand { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 20px; }
    .brand-icon {
      width: 36px; height: 36px;
      background: #04070f;
      border-radius: 8px; display: grid; place-items: center;
      color: #fff; font-size: 18px; box-shadow: 0 0 12px var(--cyan);
      overflow: hidden;
    }
    .brand-text h1 { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800; }
    .brand-text span { font-size: 8px; color: var(--text-muted); display: block; margin-top: 2px; }

    .nav-menu { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .nav-item a {
      display: flex; align-items: center; gap: 12px; padding: 10px 14px;
      color: var(--text-muted); text-decoration: none; border-radius: 8px; font-size: 13px; font-weight: 500;
    }
    .nav-item.active a, .nav-item a:hover {
      background: rgba(0, 242, 255, 0.15); color: var(--text-main);
      border: 1px solid var(--glass-border);
    }

    main {
      flex: 1; display: flex; flex-direction: column;
      padding: 14px 18px; gap: 12px; width: 100%; min-width: 0;
    }

    .card { padding: 14px; position: relative; width: 100%; }

    header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 16px; flex-wrap: wrap; gap: 10px;
    }
    .header-left { display: flex; align-items: center; gap: 12px; }
    
    .nav-toggle { 
      color: var(--cyan); font-size: 20px; cursor: pointer; padding: 6px 10px;
      border-radius: 6px; border: 1px solid var(--glass-border);
      background: rgba(0, 242, 255, 0.05);
    }

    .cmd-title { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 800; }

    .status-badge {
      display: inline-flex; align-items: center; gap: 6px; font-size: 10px;
      font-family: 'Orbitron', sans-serif; color: var(--amber);
      background: rgba(245, 158, 11, 0.15); padding: 4px 10px; border-radius: 20px;
      border: 1px solid rgba(245, 158, 11, 0.4);
    }
    .status-badge.connected { color: var(--green); background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.4); }

    .header-right { display: flex; align-items: center; gap: 10px; font-size: 12px; }
    .clock-box { font-family: 'Orbitron', sans-serif; display: flex; align-items: center; gap: 6px; color: var(--text-main); }

    .btn-action {
      background: rgba(0, 242, 255, 0.1); border: 1px solid var(--glass-border);
      color: var(--text-main); padding: 6px 10px; border-radius: 8px;
      cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
    }

    .row { display: flex; gap: 12px; width: 100%; flex-wrap: wrap; }
    .card-title {
      font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
      color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px;
      display: flex; justify-content: space-between; align-items: center;
    }

    .system-card { flex: 1.8; min-width: 250px; display: flex; align-items: center; gap: 16px; }
    .system-icon {
      width: 50px; height: 50px; border-radius: 50%;
      background: rgba(245, 158, 11, 0.1); border: 2px solid var(--amber);
      display: grid; place-items: center; color: var(--amber); font-size: 22px; flex-shrink: 0;
    }
    .system-icon.active { background: rgba(16, 185, 129, 0.1); border-color: var(--green); color: var(--green); }
    .system-text h2 { font-family: 'Orbitron', sans-serif; font-size: 15px; color: var(--amber); font-weight: 800; }
    .system-text h2.active { color: var(--green); }
    .system-text h3 { font-size: 12px; font-weight: 700; color: var(--text-main); margin-top: 2px; }
    .system-text p { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

    .worker-info-card { flex: 2; min-width: 250px; display: flex; align-items: center; gap: 14px; }
    .worker-avatar {
      width: 44px; height: 44px; border-radius: 50%; background: rgba(0,242,255,0.1);
      border: 1px solid var(--cyan); display: grid; place-items: center; color: var(--cyan); font-size: 20px; flex-shrink: 0;
    }
    .worker-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; font-size: 11px; width: 100%; }
    .worker-details span { color: var(--text-muted); }

    .sensor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }
    .sensor-card-v2 {
      padding: 12px 10px 0px 10px; display: flex; flex-direction: column;
      justify-content: space-between; height: 145px; position: relative; overflow: hidden;
    }
    .sensor-body-v2 { display: flex; gap: 10px; align-items: flex-start; }
    .sensor-icon-box { font-size: 26px; display: flex; align-items: center; justify-content: center; min-width: 28px; }
    .sensor-info-box { display: flex; flex-direction: column; flex: 1; }
    .sensor-title-v2 { font-family: 'Orbitron', sans-serif; font-size: 8px; font-weight: 700; color: var(--text-muted); }
    .sensor-val-v2 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: var(--text-main); display: flex; align-items: baseline; gap: 2px; }
    .sensor-val-v2 small { font-size: 10px; color: var(--cyan); }
    .sensor-status-v2 { font-size: 10px; font-weight: 600; color: var(--amber); margin-top: 1px; }
    .sensor-range-v2 { font-size: 8px; color: var(--text-muted); margin-top: 2px; }
    .sparkline-box-v2 { height: 40px; width: 105%; margin-left: -2.5%; }

    .col-flex-1 { flex: 1; min-width: 240px; }
    .col-flex-2 { flex: 2; min-width: 280px; }
    .col-flex-1-5 { flex: 1.5; min-width: 260px; }
    .col-flex-chart { flex: 1; min-width: 240px; }

    .device-conn-list { display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
    .device-item { display: flex; justify-content: space-between; align-items: center; }
    .device-name { display: flex; align-items: center; gap: 8px; }
    .device-name i { color: var(--cyan); width: 14px; }
    .signal-bar-box { margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }

    .chart-box { height: 190px; position: relative; width: 100%; }
    
    .map-wrapper { position: relative; width: 100%; height: 190px; border-radius: 8px; overflow: hidden; cursor: pointer; }
    #map { height: 100%; width: 100%; z-index: 1; }
    .map-overlay-btn {
      position: absolute; top: 10px; right: 10px; z-index: 500;
      background: rgba(5, 11, 20, 0.85); color: var(--cyan); border: 1px solid var(--cyan);
      font-size: 9px; font-family: 'Orbitron', sans-serif; padding: 4px 8px; border-radius: 4px;
    }

    .map-modal {
      display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); z-index: 99999;
      justify-content: center; align-items: center; padding: 10px;
    }
    .map-modal.active { display: flex; }
    .map-modal-content {
      width: 100%; height: 100%; background: var(--aside-bg); border: 1px solid var(--cyan);
      border-radius: 10px; position: relative; overflow: hidden; display: flex; flex-direction: column;
    }
    .map-modal-header {
      padding: 10px 14px; display: flex; justify-content: space-between; align-items: center;
      background: rgba(0,0,0,0.8); border-bottom: 1px solid var(--border-subtle); z-index: 100000;
    }
    .map-modal-header h3 { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--cyan); }
    .close-modal-btn {
      background: rgba(255, 51, 102, 0.2); border: 1px solid var(--red); color: var(--red);
      font-size: 14px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
    }
    #fullMap { flex: 1; width: 100%; height: 100%; z-index: 1; }

    .table-container { width: 100%; overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 10px; min-width: 260px; }
    th, td { padding: 6px 4px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
    
    .badge { padding: 2px 5px; border-radius: 4px; font-size: 8px; font-weight: 700; font-family: 'Orbitron', sans-serif; display: inline-block; }
    .badge-safe { background: rgba(16,185,129,0.15); color: var(--green); border: 1px solid var(--green); }
    .badge-alert { background: rgba(255,51,102,0.15); color: var(--red); border: 1px solid var(--red); }

    .alert-card { border: 1px solid rgba(255,0,85,0.5); background: rgba(255,0,85,0.08); }
    .alert-count { background: var(--red); color: #fff; font-size: 8px; padding: 1px 5px; border-radius: 10px; }

    /* ---- Active Alerts list items (big, hard-to-miss alert rows) ---- */
    .active-alert-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; margin-bottom: 8px; border-radius: 10px;
      background: rgba(255, 51, 102, 0.15); border: 1px solid var(--red);
      animation: alertItemPulse 1.4s ease-in-out infinite;
    }
    .active-alert-item:last-child { margin-bottom: 0; }
    .active-alert-icon {
      font-size: 26px; color: var(--red); flex-shrink: 0;
      width: 34px; text-align: center;
    }
    .active-alert-text { flex: 1; min-width: 0; }
    .active-alert-title {
      font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800;
      color: var(--red); text-transform: uppercase; letter-spacing: 0.3px;
    }
    .active-alert-detail { font-size: 11px; color: var(--text-main); margin-top: 3px; }

    @keyframes alertItemPulse {
      0%, 100% { box-shadow: 0 0 0 rgba(255, 51, 102, 0); }
      50% { box-shadow: 0 0 16px rgba(255, 51, 102, 0.55); }
    }

    footer { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--text-muted); padding: 8px; flex-wrap: wrap; gap: 6px; }

    @media (max-width: 900px) { .sensor-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 768px) {
      main { padding: 8px; gap: 8px; }
      header { padding: 8px 12px; gap: 8px; }
      .header-right { width: 100%; justify-content: space-between; }
      .cmd-title { font-size: 12px; }
      .sensor-grid { grid-template-columns: repeat(2, 1fr); }
      .row { flex-direction: column; gap: 8px; }
      .col-flex-1, .col-flex-2, .col-flex-1-5, .col-flex-chart, .system-card, .worker-info-card { width: 100%; flex: auto; }
      .worker-details { grid-template-columns: repeat(2, 1fr); gap: 4px; }
      .map-modal { padding: 0; }
      .map-modal-content { border-radius: 0; }
    }
    @media (max-width: 420px) {
      .sensor-grid { grid-template-columns: 1fr; }
      .worker-details { grid-template-columns: 1fr; }
      .system-card { flex-direction: row; text-align: left; }
      .worker-info-card { flex-direction: row; }
    }

    /* ============================================================
       VISUAL UPGRADE — CSS ONLY
       Logic, JavaScript, IDs and Classes intentionally unchanged.
       ============================================================ */

    :root {
      --bg-gradient: radial-gradient(1200px 700px at 50% -10%, rgba(0,242,255,.12), transparent 58%),
                     radial-gradient(900px 600px at 100% 100%, rgba(168,85,247,.09), transparent 55%),
                     #040812;
      --glass-bg: rgba(10, 19, 34, .68);
      --glass-border: rgba(120, 220, 255, .18);
      --glass-shine: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 45%, rgba(0,242,255,.025));
      --card-glow: 0 14px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
      --border-subtle: rgba(255,255,255,.075);
      --text-muted: #8fa2b8;
    }

    body.light-theme {
      --bg-gradient: radial-gradient(1000px 600px at 50% -10%, rgba(0,119,255,.14), transparent 58%),
                     radial-gradient(800px 600px at 100% 100%, rgba(168,85,247,.08), transparent 55%),
                     #dde1e6;
      --glass-bg: rgba(214, 224, 238, .90);
      /* FIX: brighter, more saturated border + a real neon-cyan glow ring
         behind every glass panel so cards read as clearly separated
         "boxes" against the light background instead of blending in. */
      --glass-border: rgba(0,119,255,.35);
      --glass-shine: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.5));
      --card-glow: 0 10px 28px rgba(15,23,42,.12),
                   0 0 0 1px rgba(0,119,255,.10),
                   0 0 26px rgba(0,119,255,.16),
                   inset 0 1px 0 rgba(255,255,255,.85);
      --border-subtle: rgba(15,23,42,.12);
      /* FIX: darker, higher-contrast text for the light theme. */
      --text-main: #05080f;
      --text-muted: #33415a;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg-gradient);
      background-attachment: fixed;
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      opacity: .28;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, black, transparent 85%);
      -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
    }

    .glass-panel {
      border-radius: 18px;
      border-color: var(--glass-border);
      box-shadow: var(--card-glow);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .glass-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 28%, transparent 72%, rgba(0,242,255,.025));
      z-index: -1;
    }

    .glass-panel:hover {
      border-color: rgba(0,242,255,.30);
      box-shadow: 0 18px 48px rgba(0,0,0,.34), 0 0 0 1px rgba(0,242,255,.025) inset;
    }

    main {
      padding: 18px 20px 14px;
      gap: 14px;
      max-width: 1800px;
      margin: 0 auto;
    }

    aside {
      width: 258px;
      padding: 18px 14px;
      background: linear-gradient(180deg, rgba(5,13,25,.98), rgba(3,8,16,.97));
      border-right-color: rgba(0,242,255,.14);
    }

    aside.open {
      box-shadow: 18px 0 50px rgba(0,0,0,.38);
    }

    body.light-theme aside {
      background: rgba(248,250,252,.96);
    }

    .brand {
      padding: 10px 10px 16px;
      margin-bottom: 18px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .brand-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      box-shadow: 0 0 22px rgba(0,242,255,.38), inset 0 1px 8px rgba(255,255,255,.25);
    }

    .brand-text h1 { font-size: 14px; letter-spacing: .7px; }
    .brand-text span { font-size: 9px; letter-spacing: 1.3px; }

    .nav-menu { gap: 6px; }

    .nav-item a {
      min-height: 44px;
      padding: 11px 13px;
      border: 1px solid transparent;
      border-radius: 11px;
      transition: all .2s ease;
    }

    .nav-item a i {
      width: 20px;
      text-align: center;
      transition: transform .2s ease, color .2s ease;
    }

    .nav-item a:hover i,
    .nav-item.active a i { transform: translateX(2px); color: var(--cyan); }

    .nav-item.active a,
    .nav-item a:hover {
      background: linear-gradient(90deg, rgba(0,242,255,.14), rgba(0,242,255,.035));
      border-color: rgba(0,242,255,.20);
      box-shadow: inset 3px 0 0 var(--cyan), 0 5px 18px rgba(0,0,0,.14);
    }

    header {
      min-height: 64px;
      padding: 11px 16px;
      border-radius: 16px;
      background: rgba(7,16,29,.72);
    }

    body.light-theme header { background: rgba(255,255,255,.72); }

    .header-left, .header-right { gap: 9px; }

    .nav-toggle {
      width: 42px;
      height: 40px;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 10px;
      transition: all .2s ease;
    }

    .nav-toggle:hover {
      background: rgba(0,242,255,.13);
      box-shadow: 0 0 18px rgba(0,242,255,.12);
      transform: translateY(-1px);
    }

    .cmd-title {
      font-size: 15px;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    .status-badge {
      min-height: 28px;
      padding: 5px 11px;
      letter-spacing: .45px;
      box-shadow: 0 0 18px rgba(245,158,11,.08);
    }

    .status-badge.connected {
      box-shadow: 0 0 18px rgba(16,185,129,.12);
    }

    .header-right { flex-wrap: wrap; }

    .btn-action {
      min-height: 36px;
      padding: 7px 11px;
      border-radius: 10px;
      background: rgba(0,242,255,.065);
      border-color: rgba(0,242,255,.18);
      transition: all .2s ease;
    }

    .btn-action:hover {
      transform: translateY(-1px);
      background: rgba(0,242,255,.13);
      border-color: rgba(0,242,255,.38);
      box-shadow: 0 7px 20px rgba(0,0,0,.18), 0 0 16px rgba(0,242,255,.08);
    }

    .btn-action:active { transform: translateY(0); }

    .btn-action.active-sound {
      color: #38bdf8;
      border-color: rgba(56,189,248,.42);
      background: rgba(56,189,248,.14);
      box-shadow: 0 0 10px rgba(56,189,248,.14);
    }

    .btn-action:disabled { opacity: .65; cursor: wait; }

    .clock-box {
      min-height: 36px;
      padding: 0 10px;
      border-left: 1px solid var(--border-subtle);
      color: var(--cyan);
      letter-spacing: .6px;
    }

    .row { gap: 14px; }

    .card {
      padding: 16px;
    }

    .system-card,
    .worker-info-card {
      min-height: 94px;
    }

    .system-card {
      background: linear-gradient(110deg, rgba(245,158,11,.055), rgba(10,19,34,.62));
    }

    /* FIX: these cards had a hardcoded dark-navy gradient that never
       adapted to the light theme (unlike .sensor-card-v2 below, which does).
       That's the grey/dark smudge visible on "SYSTEM NORMAL" and the
       worker-info card in light mode. Give them the same light,
       white-based tint the other cards already use. */
    body.light-theme .system-card {
      background: linear-gradient(110deg, rgba(245,158,11,.12), rgba(214,224,238,.90));
    }

    .system-icon {
      width: 56px;
      height: 56px;
      box-shadow: 0 0 22px rgba(245,158,11,.13), inset 0 0 15px rgba(245,158,11,.05);
    }

    .system-icon.active {
      box-shadow: 0 0 24px rgba(16,185,129,.20), inset 0 0 15px rgba(16,185,129,.06);
    }

    .system-text h2 {
      font-size: 16px;
      letter-spacing: .5px;
    }

    .system-text h3 {
      font-size: 11px;
      letter-spacing: .35px;
    }

    .system-text p { margin-top: 5px; }

    .worker-info-card {
      background: linear-gradient(110deg, rgba(0,242,255,.045), rgba(10,19,34,.62));
    }

    body.light-theme .worker-info-card {
      background: linear-gradient(110deg, rgba(0,119,255,.10), rgba(214,224,238,.90));
    }

    .worker-avatar {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: linear-gradient(145deg, rgba(0,242,255,.15), rgba(0,119,255,.05));
      box-shadow: 0 0 20px rgba(0,242,255,.09);
    }

    .worker-details {
      gap: 7px 16px;
      font-size: 11px;
    }

    .worker-details > div {
      padding: 3px 0;
      border-bottom: 1px dashed var(--border-subtle);
    }

    .sensor-grid {
      gap: 14px;
    }

    .sensor-card-v2 {
      height: 156px;
      padding: 15px 13px 0;
      background: linear-gradient(145deg, rgba(14,27,47,.72), rgba(7,14,26,.62));
    }

    body.light-theme .sensor-card-v2 {
      background: linear-gradient(145deg, rgba(222,231,243,.88), rgba(205,217,233,.72));
    }

    .sensor-card-v2::after {
      content: "";
      position: absolute;
      left: 13px;
      right: 13px;
      top: 0;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, transparent, rgba(0,242,255,.28), transparent);
      opacity: .65;
    }

    .sensor-body-v2 { gap: 11px; }

    .sensor-icon-box {
      width: 36px;
      min-width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255,255,255,.035);
      border: 1px solid var(--border-subtle);
      font-size: 22px;
    }

    .sensor-title-v2 {
      font-size: 8.5px;
      letter-spacing: .9px;
    }

    .sensor-val-v2 {
      font-size: 20px;
      line-height: 1.2;
      margin-top: 2px;
    }

    .sensor-val-v2 small {
      font-size: 9px;
      letter-spacing: .4px;
    }

    .sensor-status-v2 {
      font-size: 9px;
      margin-top: 3px;
    }

    .sensor-range-v2 {
      font-size: 8px;
      opacity: .82;
    }

    .sparkline-box-v2 {
      height: 43px;
      opacity: .9;
    }

    .col-flex-1,
    .col-flex-2,
    .col-flex-1-5,
    .col-flex-chart {
      min-height: 214px;
    }

    .card-title {
      font-size: 9.5px;
      letter-spacing: 1px;
      padding-bottom: 9px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .device-conn-list { gap: 9px; }

    .device-item {
      min-height: 27px;
      padding: 4px 6px;
      border-radius: 7px;
      transition: background .2s ease;
    }

    .device-item:hover { background: rgba(0,242,255,.045); }

    .device-name i { text-shadow: 0 0 8px rgba(0,242,255,.25); }

    .signal-bar-box {
      margin-top: 12px;
      padding: 10px 6px 0;
    }

    .chart-box { height: 192px; }

    .map-wrapper {
      height: 192px;
      border: 1px solid var(--border-subtle);
      box-shadow: inset 0 0 30px rgba(0,0,0,.24);
    }

    .map-overlay-btn {
      top: 9px;
      right: 9px;
      padding: 6px 9px;
      border-radius: 7px;
      background: rgba(3,8,16,.82);
      box-shadow: 0 5px 16px rgba(0,0,0,.28);
      backdrop-filter: blur(8px);
    }

    .map-modal {
      background: rgba(1,4,9,.88);
      backdrop-filter: blur(14px);
    }

    .map-modal-content {
      width: min(1500px, 96vw);
      height: min(900px, 94vh);
      border-radius: 18px;
      box-shadow: 0 30px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(0,242,255,.08);
    }

    .map-modal-header {
      min-height: 54px;
      padding: 11px 16px;
      background: rgba(3,9,17,.88);
    }

    .map-modal-header h3 {
      font-size: 10px;
      letter-spacing: .8px;
    }

    .close-modal-btn {
      min-height: 34px;
      padding: 5px 11px;
      border-radius: 8px;
      transition: all .2s ease;
    }

    .close-modal-btn:hover {
      background: rgba(255,51,102,.30);
      box-shadow: 0 0 18px rgba(255,51,102,.15);
    }

    .table-container {
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      overflow: auto;
      background: rgba(0,0,0,.08);
    }

    table {
      font-size: 9.5px;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: rgba(6,13,24,.94);
      color: var(--cyan);
      font-family: 'Orbitron', sans-serif;
      font-size: 8px;
      letter-spacing: .65px;
      white-space: nowrap;
    }

    body.light-theme th { background: rgba(241,247,255,.96); }

    th, td {
      padding: 8px 7px;
      border-bottom-color: var(--border-subtle);
    }

    tbody tr {
      transition: background .18s ease;
    }

    tbody tr:hover { background: rgba(0,242,255,.045); }

    .badge {
      min-width: 54px;
      text-align: center;
      padding: 3px 6px;
      border-radius: 5px;
      letter-spacing: .45px;
    }

    .badge-safe {
      box-shadow: 0 0 10px rgba(16,185,129,.07);
    }

    .badge-alert {
      box-shadow: 0 0 12px rgba(255,51,102,.13);
    }

    .alert-card {
      background: linear-gradient(145deg, rgba(255,51,102,.075), rgba(10,19,34,.62));
      border-color: rgba(255,51,102,.30);
    }

    /* FIX: same hardcoded dark-navy fill that never adapted to light mode —
       this was the last box still showing the dark smudge in light theme. */
    body.light-theme .alert-card {
      background: linear-gradient(145deg, rgba(255,51,102,.12), rgba(214,224,238,.90));
    }

    .alert-count {
      min-width: 22px;
      padding: 2px 6px;
      text-align: center;
      box-shadow: 0 0 12px rgba(255,51,102,.25);
    }

    .active-alert-item {
      padding: 12px;
      margin-bottom: 9px;
      border-radius: 12px;
      background: linear-gradient(90deg, rgba(255,51,102,.15), rgba(255,51,102,.045));
      border-color: rgba(255,51,102,.52);
      box-shadow: inset 3px 0 0 var(--red);
    }

    .active-alert-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(255,51,102,.10);
      border: 1px solid rgba(255,51,102,.18);
      font-size: 20px;
    }

    .active-alert-title {
      font-size: 11px;
      letter-spacing: .75px;
    }

    .active-alert-detail {
      font-size: 10px;
      line-height: 1.5;
      opacity: .92;
    }

    footer {
      padding: 9px 4px 2px;
      font-size: 8.5px;
      letter-spacing: .2px;
      opacity: .8;
    }

    :focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    button, .nav-toggle, .map-wrapper, .map-overlay-btn, .close-modal-btn {
      -webkit-tap-highlight-color: transparent;
    }

    @media (min-width: 769px) {
      main { padding-left: 20px; padding-right: 20px; }
    }

    @media (max-width: 900px) {
      .sensor-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 1200px) {
      .header-right { gap: 7px; }
      .btn-action { padding-left: 9px; padding-right: 9px; }
    }

    @media (max-width: 768px) {
      main { padding: 9px; gap: 9px; }
      header {
        padding: 9px 10px;
        border-radius: 14px;
      }
      .header-left { width: 100%; }
      .header-right {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
      }
      .cmd-title { font-size: 12px; }
      .status-badge { margin-left: auto; }
      .btn-action {
        min-height: 34px;
        font-size: 10px;
        padding: 6px 8px;
      }
      .clock-box {
        margin-left: auto;
        padding-right: 3px;
        font-size: 10px;
      }
      .card { padding: 13px; }
      .sensor-grid { gap: 9px; }
      .sensor-card-v2 { height: 148px; }
      .row { gap: 9px; }
      .col-flex-1, .col-flex-2, .col-flex-1-5, .col-flex-chart { min-height: 0; }
      .chart-box, .map-wrapper { height: 210px; }
      .map-modal-content { height: 100%; width: 100%; border-radius: 0; }
    }

    @media (max-width: 520px) {
      .header-right { display: grid; grid-template-columns: repeat(3, 1fr); }
      .header-right .clock-box {
        grid-column: 1 / -1;
        justify-content: center;
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
        padding-top: 6px;
      }
      .btn-action { justify-content: center; }
      .sensor-card-v2 { min-height: 148px; }
      .system-card, .worker-info-card { min-height: 88px; }
      .worker-details { gap: 4px 9px; }
      .active-alert-item { gap: 9px; }
      .active-alert-icon { width: 34px; height: 34px; }
    }

    @media (max-width: 420px) {
      .sensor-grid { gap: 8px; }
      .sensor-card-v2 { height: 142px; }
      .sensor-val-v2 { font-size: 19px; }
      .system-card, .worker-info-card { padding: 12px; }
      .worker-avatar { width: 44px; height: 44px; }
    }

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

  

/* =========================================================
   MOBILE VIEW REFINEMENT
   Visual/CSS only — existing IDs, classes and JS untouched.
   ========================================================= */

@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
  }

  /* Main page spacing */
  .container,
  .main-container,
  main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Header / top bar */
  header,
  .header {
    padding: 12px 14px !important;
    min-height: auto !important;
  }

  .header-content,
  .topbar,
  .header-inner {
    gap: 10px !important;
    flex-wrap: wrap;
  }

  /* Navigation */
  nav,
  .nav,
  .sidebar {
    max-width: 100%;
  }

  nav a,
  .nav a {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }

  /* Dashboard grids: stack naturally instead of squeezing cards */
  .dashboard-grid,
  .stats-grid,
  .sensor-grid,
  .cards-grid,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Keep explicitly horizontal utility rows compact */
  .controls,
  .action-row,
  .button-row {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  /* Cards */
  .card {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    border-radius: 16px !important;
  }

  .card-header {
    gap: 8px !important;
  }

  .card-body {
    min-width: 0;
  }

  /* Typography */
  h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: clamp(17px, 5vw, 22px) !important;
  }

  h3 {
    font-size: clamp(15px, 4.5vw, 19px) !important;
  }

  /* Sensor values */
  .sensor-value,
  .value,
  .metric-value {
    font-size: clamp(24px, 8vw, 38px) !important;
    line-height: 1.05 !important;
  }

  /* Status / badges */
  .badge {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Maps */
  #map,
  #fullMap,
  #trackingMap,
  .map-container,
  .map {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 300px !important;
    border-radius: 14px !important;
    overflow: hidden;
  }

  /* Charts */
  canvas {
    max-width: 100% !important;
  }

  /* Tables: prevent the whole page from becoming horizontally scrollable */
  .table-container,
  .table-wrap,
  .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  table {
    min-width: 560px;
  }

  /* Event log cells */
  #eventLogTable td,
  #eventLogTable th {
    padding: 9px 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* Alerts */
  .alert,
  .active-alert,
  .alert-item {
    padding: 10px 11px !important;
  }

  /* Footer */
  footer {
    padding: 14px !important;
    text-align: center;
  }
}

/* Small phones */
@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  header,
  .header {
    padding: 10px 11px !important;
  }

  .dashboard-grid,
  .stats-grid,
  .sensor-grid,
  .cards-grid,
  .grid {
    gap: 10px !important;
  }

  .card {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .card-header {
    padding-bottom: 8px !important;
  }

  .sensor-value,
  .value,
  .metric-value {
    font-size: clamp(22px, 10vw, 32px) !important;
  }

  #map,
  #fullMap,
  #trackingMap,
  .map-container,
  .map {
    height: 260px !important;
  }

  button,
  .btn,
  input[type="button"],
  input[type="submit"] {
    min-height: 42px;
    touch-action: manipulation;
  }

  /* Avoid tiny controls being hard to tap */
  .icon-btn,
  .close-btn {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .card {
    padding: 10px !important;
  }

  #map,
  #fullMap,
  #trackingMap,
  .map-container,
  .map {
    height: 230px !important;
  }

  .badge {
    font-size: 9px !important;
  }
}


/* =========================================================
   FUNCTIONAL SIDEBAR NAVIGATION — VISUAL/UX ONLY
   Existing IDs, classes and application logic are preserved.
   ========================================================= */

.nav-item a {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-item a:active {
  transform: translateX(1px);
}

@media (min-width: 769px) {
  .nav-item a {
    min-height: 46px;
  }
}

@media (max-width: 768px) {
  aside#sidebar {
    width: min(82vw, 300px);
    max-width: 300px;
    left: -310px;
    padding: 16px 12px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  aside#sidebar.open {
    left: 0;
  }

  .nav-item a {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 13px;
  }

  .nav-item a i {
    width: 22px;
    min-width: 22px;
  }

  .brand {
    flex-shrink: 0;
  }
}

@media (max-width: 420px) {
  aside#sidebar {
    width: min(86vw, 290px);
    max-width: 290px;
  }

  .nav-item a {
    min-height: 50px;
  }
}

/* ============================================================
   FINAL POLISH LAYER — CSS ONLY
   Purely visual refinements on top of everything above.
   No IDs, classes, markup or JavaScript logic are touched.
   ============================================================ */

/* Smooth themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(0,242,255,.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,242,255,.45), rgba(0,242,255,.15));
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0,242,255,.6); }

::selection { background: rgba(0,242,255,.28); color: #fff; }
body.light-theme ::selection { background: rgba(0,119,255,.22); color: #0f172a; }

/* Gentle entrance animation for cards, staggered */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
header.glass-panel,
.row .glass-panel,
.sensor-grid .glass-panel {
  animation: fadeSlideIn .5s ease both;
}
.row:nth-of-type(1) .glass-panel:nth-child(1) { animation-delay: .02s; }
.row:nth-of-type(1) .glass-panel:nth-child(2) { animation-delay: .06s; }
.row:nth-of-type(1) .glass-panel:nth-child(3) { animation-delay: .10s; }
.sensor-grid .glass-panel:nth-child(1) { animation-delay: .08s; }
.sensor-grid .glass-panel:nth-child(2) { animation-delay: .12s; }
.sensor-grid .glass-panel:nth-child(3) { animation-delay: .16s; }
.sensor-grid .glass-panel:nth-child(4) { animation-delay: .20s; }

/* Card hover lift — pointer devices only, so touch/mobile is unaffected */
@media (hover: hover) and (pointer: fine) {
  .card.glass-panel:hover { transform: translateY(-3px); }
  .sensor-card-v2:hover { transform: translateY(-3px); }
  .device-item:hover { transform: translateX(2px); }
}

/* Sidebar nav — clearer active state with left accent bar */
.nav-item a { border-left: 2px solid transparent; }
.nav-item.active a {
  border-left-color: var(--cyan);
  background: linear-gradient(90deg, rgba(0,242,255,.16), rgba(0,242,255,.03));
  box-shadow: inset 0 0 18px rgba(0,242,255,.06);
}
.nav-item a:hover { border-left-color: rgba(0,242,255,.5); }

/* Status badge dot — subtle pulse so "live" state reads at a glance */
@keyframes statusDotPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.status-badge i { animation: statusDotPulse 1.6s ease-in-out infinite; }
.status-badge.connected i { color: var(--green); }

/* Header bottom accent line for extra depth */
header.glass-panel {
  position: relative;
  overflow: hidden;
}
header.glass-panel::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,242,255,.35), transparent);
}

/* Badges — a touch more legible and consistent */
.badge { letter-spacing: .5px; }
.badge-safe i, .badge-alert i { margin-right: 3px; }

/* Table row zebra striping for readability on dense data */
tbody tr:nth-child(odd) { background: rgba(255,255,255,.015); }
body.light-theme tbody tr:nth-child(odd) { background: rgba(15,23,42,.02); }

/* Light theme contrast touch-ups */
body.light-theme { color: #0f172a; }
body.light-theme .sensor-status-v2,
body.light-theme .sensor-range-v2,
body.light-theme .device-conn-list span { color: var(--text-muted); }
body.light-theme .card-title { border-bottom-color: rgba(15,23,42,.1); }
body.light-theme .active-alert-detail { color: #1e293b; }

/* Map & chart corner consistency + subtle inner border */
.map-wrapper, .chart-box canvas { border-radius: 10px; }
.map-wrapper::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0,242,255,.10);
  pointer-events: none;
}

/* Export/Audio/Theme buttons — clearer disabled + focus affordance */
.btn-action:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Footer divider for visual closure */
footer {
  border-top: 1px solid var(--border-subtle);
  margin-top: 2px;
}

/* Safe-area padding so content isn't obscured on notched phones */
@media (max-width: 768px) {
  main {
    padding-left: max(9px, env(safe-area-inset-left));
    padding-right: max(9px, env(safe-area-inset-right));
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }
  header.glass-panel::after { left: 12px; right: 12px; }
}

/* Respect reduced motion for the new entrance/hover animations too */
@media (prefers-reduced-motion: reduce) {
  header.glass-panel, .row .glass-panel, .sensor-grid .glass-panel { animation: none; }
  .status-badge i { animation: none; }
}

/* ============================================================
   ROUND 2 — CSS-ONLY ENHANCEMENTS
   Bigger data hierarchy, iconography via ::before (no HTML
   changes), contrast/print support,
   performance hints. IDs, classes, markup and JS untouched.
   ============================================================ */

/* ---- Stronger visual hierarchy for the numbers that matter ---- */
.sensor-val-v2 {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.3px;
  text-shadow: 0 0 18px rgba(0,242,255,.12);
}
body.light-theme .sensor-val-v2 { text-shadow: none; }
.sensor-val-v2 small { font-weight: 700; }

/* Make the first sensor card (Temperature) read as the "primary" metric
   on wide screens, since it mirrors the big chart below it. */
@media (min-width: 901px) {
  .sensor-grid { grid-template-columns: repeat(4, 1fr); }
  .sensor-grid .sensor-card-v2:first-child {
    background: linear-gradient(135deg, rgba(255,51,102,.07), rgba(14,27,47,.72));
  }
  /* FIX: same dark-navy leak as above, but for the Temperature card
     specifically — this rule was overriding the light-theme background
     that .sensor-card-v2 otherwise gets. */
  body.light-theme .sensor-grid .sensor-card-v2:first-child {
    background: linear-gradient(135deg, rgba(255,51,102,.11), rgba(214,224,238,.88));
  }
}

/* ---- Card-title icons via ::before (Font Awesome is already loaded,
   so this needs zero markup changes) ---- */
.card-title::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--cyan);
  margin-right: 7px;
  font-size: 11px;
  opacity: .9;
}
.col-flex-1 .card-title::before { content: "\f2db"; }         /* microchip - Device Connection */
.col-flex-2 .card-title::before { content: "\f201"; }          /* chart-line */
.col-flex-1-5 .card-title:not(.alert-card *)::before { content: "\f3c5"; } /* map-marker */
.alert-card .card-title::before { content: "\f071"; color: var(--red); } /* triangle-exclamation */
/* FIX: icons keyed to explicit classes instead of row position, so they
   stay correct no matter which row a card is placed in. */
.card-title.icon-device::before { content: "\f2db"; }  /* microchip - Device Connection */
.card-title.icon-chart::before { content: "\f201"; }   /* chart-line - Live charts (fallback, unused on temp/hum/pres charts) */
/* Live Temperature / Humidity / Pressure chart titles: use the same
   icon + colour as their matching sensor card, instead of the
   generic chart-line icon. */
.card-title.icon-temp-chart::before { content: "\f2c9"; color: var(--red); font-size: 15px; }    /* temperature-half */
.card-title.icon-hum-chart::before  { content: "\f043"; color: var(--cyan); font-size: 15px; }   /* droplet */
.card-title.icon-pres-chart::before { content: "\f625"; color: var(--purple); font-size: 15px; } /* gauge-high */

/* Live Temperature / Pressure chart cards: glow in their own accent
   colour on hover/focus, matching the sensor cards' behaviour,
   instead of the generic cyan glow. */
.card.neon-card-red:hover,
.card.neon-card-red:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(255,51,102,.4), 0 0 22px 3px rgba(255,51,102,.35), 0 0 46px 8px rgba(255,51,102,.12);
}
.card.neon-card-purple:hover,
.card.neon-card-purple:focus-visible {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px rgba(168,85,247,.4), 0 0 22px 3px rgba(168,85,247,.35), 0 0 46px 8px rgba(168,85,247,.12);
}
.card-title.icon-users::before { content: "\f0c0"; }   /* users - Workers Online */
.card-title.icon-history::before { content: "\f1da"; } /* history - Event / Alert History */

/* ---- Live Satellite Tracking: small animated earth + orbiting
   satellite badge, top-left of the card title, replacing the plain
   map-marker icon for this card only. ---- */
.col-flex-1-5 .card-title.icon-satellite::before { content: none; }
.sat-title-group { display: inline-flex; align-items: center; }
.sat-title-icon {
  position: relative; width: 16px; height: 16px; margin-right: 7px;
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.sat-title-ring {
  position: absolute; inset: -2px; border: 1px dashed rgba(0,242,255,.4); border-radius: 50%;
}
.sat-title-earth {
  width: 12px; height: 12px; border-radius: 50%; position: relative; overflow: hidden; z-index: 1;
  background: radial-gradient(circle at 30% 28%, #6fd6ff 0%, #2ea9e0 22%, #1478ad 44%, #0a4c76 66%, #05202c 86%, #02131f 100%);
  box-shadow: 0 0 5px rgba(0,242,255,.6), inset -2px -2px 4px rgba(0,0,0,.65), inset 1px 1px 2px rgba(255,255,255,.18);
}
.sat-title-earth::before {
  content: ''; position: absolute; inset: -12%; border-radius: 50%;
  background-image:
    radial-gradient(3px 2px at 15% 32%, rgba(63,168,84,.92), transparent 72%),
    radial-gradient(2px 3px at 42% 62%, rgba(52,145,72,.88), transparent 72%),
    radial-gradient(3px 2px at 68% 24%, rgba(72,158,70,.85), transparent 72%),
    radial-gradient(2px 3px at 90% 58%, rgba(58,152,78,.9), transparent 72%);
  background-repeat: repeat-x; background-size: 13px 100%;
  animation: satEarthSpin 9s linear infinite;
}
.sat-title-orbit {
  position: absolute; inset: -3px; animation: satOrbitSpin 4.5s linear infinite;
}
.sat-title-orbit i {
  position: absolute; top: -1px; left: 50%; margin-left: -3px;
  font-size: 5.5px; color: var(--cyan);
  filter: drop-shadow(0 0 3px rgba(0,242,255,.9));
}
@keyframes satEarthSpin { from { background-position-x: 0; } to { background-position-x: -13px; } }
@keyframes satOrbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
body.light-theme .sat-title-ring { border-color: rgba(0,150,180,.4); }

/* ---- Badge icons for colour-blind-friendly status reading ---- */
.badge-safe::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f00c";
  margin-right: 3px;
  font-size: 7px;
}
.badge-alert::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f06a";
  margin-right: 3px;
  font-size: 7px;
}

/* ---- Empty / waiting states: a touch calmer than plain grey text ---- */
#alertBox > div,
#eventLogTable td[colspan] {
  position: relative;
  opacity: .75;
}

/* ---- Value-change flash: toggled by a tiny additive observer script,
   does not alter any existing update logic ---- */
@keyframes valFlash {
  0%   { text-shadow: 0 0 0 rgba(0,242,255,0); }
  30%  { text-shadow: 0 0 14px rgba(0,242,255,.85); color: var(--cyan); }
  100% { text-shadow: 0 0 0 rgba(0,242,255,0); }
}
.val-flash { animation: valFlash .6s ease; }

/* ---- Waiting/skeleton shimmer while a sensor card has no real reading
   yet ("--" placeholder). Toggled by the same additive observer. ---- */
@keyframes shimmerSweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.still-waiting .sensor-val-v2,
.still-waiting .sensor-status-v2,
.still-waiting.device-item .device-name + span {
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 25%,
    rgba(0,242,255,.16) 50%,
    rgba(255,255,255,.06) 75%);
  background-size: 200% 100%;
  animation: shimmerSweep 1.6s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-radius: 4px;
}
body.light-theme .still-waiting .sensor-val-v2,
body.light-theme .still-waiting .sensor-status-v2 {
  background: linear-gradient(90deg,
    rgba(15,23,42,.06) 25%,
    rgba(0,119,255,.18) 50%,
    rgba(15,23,42,.06) 75%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .val-flash, .still-waiting .sensor-val-v2, .still-waiting .sensor-status-v2 { animation: none; }
}

/* ---- Sensor icon boxes: soft ambient ring instead of a flat box ---- */
.sensor-icon-box {
  position: relative;
}
.sensor-icon-box::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: .08;
  z-index: -1;
}

/* ---- prefers-contrast: automatic higher-contrast pass for outdoor /
   bright-daylight field use, no extra theme toggle needed ---- */
@media (prefers-contrast: more) {
  :root {
    --glass-border: rgba(0,242,255,.55);
    --border-subtle: rgba(255,255,255,.22);
    --text-muted: #c3d2e2;
  }
  body.light-theme {
    --glass-border: rgba(0,90,200,.55);
    --border-subtle: rgba(15,23,42,.28);
    --text-muted: #33455e;
  }
  .glass-panel { border-width: 1.5px; }
  .badge-safe, .badge-alert { border-width: 1.5px; font-weight: 800; }
}

/* ---- Performance hints for the elements that actually animate ---- */
.card.glass-panel, .sensor-card-v2, .device-item, .btn-action, .nav-toggle {
  will-change: transform;
}

/* ---- Print stylesheet: a clean static report if this is ever printed ---- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  aside, .nav-toggle, .btn-action, .map-overlay-btn,
  header .status-badge, .close-modal-btn, footer { display: none !important; }
  main { padding: 0 !important; max-width: 100% !important; }
  .glass-panel {
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    break-inside: avoid;
  }
  .card-title::before { color: #000 !important; }
  canvas { max-width: 100% !important; }
  .table-container { overflow: visible !important; }
}

/* ============================================================
   ROUND 3 — DARK GLASSMORPHIC NEUMORPHISM + CLICK-GLOW
   Additive only: no markup, IDs or JS touched. Layers a soft
   "pressed into glass" neumorphic shadow onto every panel/icon,
   and gives every genuinely clickable element (nav links, header
   buttons, map triggers, modal close) a glow that
   follows the mouse via :hover, plus a pressed-in state on :active.
   ============================================================ */

/* ---- Neumorphic depth for glass surfaces: dual soft shadow
   (dark shadow toward light source, faint highlight opposite)
   layered on top of the existing ambient glow + inner rim ---- */
:root {
  --neu-dark: rgba(0, 0, 0, .55);
  --neu-light: rgba(255, 255, 255, .035);
  --card-glow:
    9px 9px 22px var(--neu-dark),
    -7px -7px 18px var(--neu-light),
    0 14px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.3);
}
body.light-theme {
  --neu-dark: rgba(163, 177, 198, .5);
  --neu-light: rgba(255, 255, 255, .9);
  --card-glow:
    9px 9px 20px var(--neu-dark),
    -7px -7px 18px var(--neu-light),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---- Icons/badges read as "pressed into" the surface, the
   classic neumorphic inset treatment ---- */
.sensor-icon-box, .system-icon, .device-name i, .worker-avatar {
  box-shadow: inset 3px 3px 7px rgba(0,0,0,.45), inset -2px -2px 5px rgba(255,255,255,.04);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
body.light-theme .sensor-icon-box,
body.light-theme .system-icon,
body.light-theme .device-name i,
body.light-theme .worker-avatar {
  box-shadow: inset 3px 3px 7px rgba(163,177,198,.4), inset -2px -2px 5px rgba(255,255,255,.8);
  background: rgba(255,255,255,.3);
}

/* ---- Click-glow: every element a person can actually click.
   Scoped to real interactive targets only, not decorative cards. ---- */
.nav-item a,
.btn-action,
.nav-toggle,
.map-wrapper,
#exportBtn,
.close-modal-btn,
.glass-panel,
.sensor-card-v2,
.device-item,
[onclick],
[role="button"] {
  transition: box-shadow .25s ease, border-color .25s ease, transform .18s ease, background .25s ease;
}

.nav-item a:hover,
.btn-action:hover,
.nav-toggle:hover,
.map-wrapper:hover,
.close-modal-btn:hover,
.glass-panel:hover,
.sensor-card-v2:hover,
.device-item:hover,
[onclick]:hover,
[role="button"]:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-glow), 0 0 22px 3px var(--cyan-glow), 0 0 46px 8px rgba(0,242,255,.12);
  transform: translateY(-2px);
}

/* ---- Sensor cards: each one glows in its own accent colour on
   hover instead of generic cyan, matching its icon/value colour ---- */
.sensor-grid .sensor-card-v2:nth-child(1):hover { /* Temperature — red */
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(255,51,102,.4), 0 0 22px 3px rgba(255,51,102,.35), 0 0 46px 8px rgba(255,51,102,.12);
}
.sensor-grid .sensor-card-v2:nth-child(2):hover { /* Humidity — cyan */
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-glow), 0 0 22px 3px var(--cyan-glow), 0 0 46px 8px rgba(0,242,255,.12);
}
.sensor-grid .sensor-card-v2:nth-child(3):hover { /* Pressure — purple */
  border-color: var(--purple);
  box-shadow: 0 0 0 1px rgba(168,85,247,.4), 0 0 22px 3px rgba(168,85,247,.35), 0 0 46px 8px rgba(168,85,247,.12);
}
.sensor-grid .sensor-card-v2:nth-child(4):hover { /* Motion — yellow */
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px rgba(234,179,8,.4), 0 0 22px 3px rgba(234,179,8,.35), 0 0 46px 8px rgba(234,179,8,.12);
}

/* Focus-visible gets the same glow as hover, for keyboard users */
.nav-item a:focus-visible,
.btn-action:focus-visible,
.nav-toggle:focus-visible,
.map-wrapper:focus-visible,
.close-modal-btn:focus-visible,
.glass-panel:focus-visible,
.sensor-card-v2:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-glow), 0 0 22px 3px var(--cyan-glow);
}

/* ---- Pressed state: shadow inverts inward, like a real button
   sinking into the glass, instead of just scaling down ---- */
.nav-item a:active,
.btn-action:active,
.nav-toggle:active,
.map-wrapper:active,
.close-modal-btn:active,
.sensor-card-v2:active {
  transform: translateY(0) scale(.985);
  box-shadow: inset 4px 4px 10px rgba(0,0,0,.5), inset -3px -3px 8px rgba(255,255,255,.03);
}

/* ---- System Status card: ambient neon glow that reflects live
   connection state. Uses the 'active' class the existing JS already
   toggles on #sysIcon (goOffline() removes it, the connected branch
   adds it) — no JS or markup changes needed. ---- */
.system-card {
  transition: border-color .3s ease, box-shadow .3s ease;
}
.system-card:has(#sysIcon.active) {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(16,185,129,.35), 0 0 24px 4px rgba(16,185,129,.28), 0 0 50px 10px rgba(16,185,129,.1);
}
.system-card:has(#sysIcon:not(.active)) {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px rgba(234,179,8,.35), 0 0 24px 4px rgba(234,179,8,.28), 0 0 50px 10px rgba(234,179,8,.1);
}
#sysStatusText.active { color: var(--green); }

/* ---- Active Alerts card: persistent red neon ambient glow ---- */
.alert-card {
  box-shadow: 0 0 0 1px rgba(255,0,85,.3), 0 0 22px 3px rgba(255,0,85,.22), 0 0 46px 8px rgba(255,0,85,.08);
}

/* ---- Audio toggle: soft glow while OFF, smooth transition into a
   bright neon-gradient glowing ON state when clicked ---- */
#audioBtn {
  box-shadow: 0 0 16px 2px rgba(0,242,255,.16);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, color .45s ease, transform .18s ease;
}
#audioBtn.active-sound {
  color: #032a44;
  text-shadow: none;
  background: linear-gradient(120deg, #0ea5e9, #38bdf8 55%, #7dd3fc);
  border-color: transparent;
  box-shadow:
    0 0 8px 0 rgba(56,189,248,.45),
    0 0 18px 2px rgba(56,189,248,.20),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -4px 8px rgba(0,0,0,.08);
}
#audioBtn.active-sound:hover {
  box-shadow:
    0 0 10px 1px rgba(56,189,248,.55),
    0 0 22px 3px rgba(56,189,248,.26),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -4px 8px rgba(0,0,0,.08);
}
/* icon follows the label colour on the sky-blue fill (both themes) */
#audioBtn.active-sound i,
body.light-theme #audioBtn.active-sound i { color: inherit; }

/* ---- Sidebar nav links: bright filled gradient + big soft glow on
   hover (and for the currently-active item), same intensity language
   as the Audio ON state. Placed last so it wins over the earlier,
   subtler .nav-item a:hover rules. ---- */
.nav-item a:hover,
.nav-item.active a {
  background: linear-gradient(120deg, #0072ff, #00f2ff 55%, #8df9ff);
  color: #041420;
  border-color: transparent;
  box-shadow:
    0 0 8px 1px rgba(0,242,255,.40),
    0 0 18px 3px rgba(0,242,255,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.nav-item a:hover i,
.nav-item.active a i {
  color: #041420;
}

/* ---- Active Alerts card: red neon on hover, overriding the
   generic cyan .glass-panel hover glow ---- */
.alert-card:hover {
  border-color: var(--red);
  box-shadow:
    0 0 0 1px rgba(255,0,85,.55),
    0 0 26px 4px rgba(255,0,85,.5),
    0 0 54px 12px rgba(255,0,85,.28);
}

@media (prefers-reduced-motion: reduce) {
  .nav-item a, .btn-action, .nav-toggle, .map-wrapper,
  .close-modal-btn, .glass-panel, .sensor-card-v2, .device-item,
  [onclick], [role="button"] { transition: none; }
}


  /* ===== Boot Loading Screen ===== */
  #bootLoader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #050810;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
      radial-gradient(circle at 50% 35%, rgba(0,140,180,0.10) 0%, rgba(5,8,16,0) 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }
  #bootLoader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .boot-inner {
    width: 100%;
    max-width: 640px;
    text-align: center;
  }
  .boot-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 4px;
    font-size: clamp(16px, 6.2vw, 44px);
    color: var(--cyan, #00f2ff);
    text-shadow: 0 0 12px rgba(0,242,255,0.85), 0 0 32px rgba(0,242,255,0.45);
    margin: 0 0 14px;
    white-space: nowrap;
  }
  @media (max-width: 420px) {
    .boot-title { letter-spacing: 2px; }
  }
  @media (max-width: 340px) {
    .boot-title { letter-spacing: 1px; font-size: 14px; }
  }
  .boot-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    letter-spacing: 3px;
    font-size: clamp(10px, 2vw, 14px);
    color: #5c7186;
    margin: 0 0 34px;
    text-transform: uppercase;
  }
  .boot-bar-track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(0,80,100,0.35);
    border: 1px solid rgba(0,242,255,0.15);
    overflow: hidden;
    margin-bottom: 22px;
  }
  .boot-bar-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb 0%, #00f2ff 60%, #baf9ff 100%);
    box-shadow: 0 0 14px rgba(0,242,255,0.75);
    transition: width 0.18s linear;
  }
  .boot-percent {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 5vw, 34px);
    color: var(--cyan, #00f2ff);
    text-shadow: 0 0 10px rgba(0,242,255,0.7);
    letter-spacing: 1px;
  }

  /* ===== Login Screen ===== */
  #loginScreen {
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: #050810;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
      radial-gradient(circle at 50% 30%, rgba(0,140,180,0.12) 0%, rgba(5,8,16,0) 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  #loginScreen.hidden-screen { display: none; }
  body:not(.authed) #sidebar,
  body:not(.authed) #mainContent { display: none !important; }
  .login-card {
    width: 100%;
    max-width: 380px;
    background: var(--glass-bg, rgba(13,25,44,0.65));
    border: 1px solid var(--glass-border, rgba(0,242,255,0.25));
    border-radius: 18px;
    padding: 34px 28px 28px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,242,255,0.05) inset;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    text-align: center;
  }
  .login-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,242,255,0.08);
    border: 1px solid rgba(0,242,255,0.3);
    color: var(--cyan, #00f2ff);
    font-size: 22px;
    box-shadow: 0 0 22px rgba(0,242,255,0.25);
    overflow: hidden;
  }
  .login-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 2.5px;
    font-size: clamp(16px, 4vw, 20px);
    color: var(--cyan, #00f2ff);
    text-shadow: 0 0 10px rgba(0,242,255,0.6);
    margin: 0 0 6px;
  }
  .login-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 10px;
    color: #5c7186;
    text-transform: uppercase;
    margin: 0 0 26px;
  }
  .login-field {
    text-align: left;
    margin-bottom: 16px;
  }
  .login-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8493a8;
    margin-bottom: 6px;
  }
  .login-field .input-wrap {
    position: relative;
  }
  .login-field .input-wrap i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #5c7186;
    font-size: 13px;
  }
  .login-field input {
    width: 100%;
    background: rgba(4,10,20,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 11px 14px 11px 36px;
    color: #f8fafc;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
  }
  .login-field input:focus {
    border-color: var(--cyan, #00f2ff);
    box-shadow: 0 0 0 3px rgba(0,242,255,0.12);
  }
  .login-error {
    display: none;
    align-items: center;
    gap: 7px;
    background: rgba(255,51,102,0.1);
    border: 1px solid rgba(255,51,102,0.35);
    color: #ff7a9a;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 9px;
    padding: 9px 12px;
    margin-bottom: 16px;
    text-align: left;
  }
  .login-error.show { display: flex; }
  .login-submit {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 12px;
    color: #04101c;
    background: linear-gradient(90deg, #2563eb 0%, #00f2ff 100%);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,242,255,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
  .login-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,242,255,0.4); }
  .login-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
  .login-foot {
    margin-top: 18px;
    font-size: 10.5px;
    color: #5c7186;
    letter-spacing: 0.5px;
  }

  /* ===== Reports Modal ===== */
  #reportsModal .map-modal-content {
    display: flex;
    flex-direction: column;
  }
  #reportsBody {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
  }
  .report-range-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .report-tab {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--glass-border, rgba(0,242,255,0.25));
    background: transparent;
    color: #8493a8;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .report-tab:hover { color: var(--cyan, #00f2ff); }
  .report-tab.active {
    background: linear-gradient(90deg, #2563eb 0%, #00f2ff 100%);
    color: #04101c;
    box-shadow: 0 0 16px rgba(0,242,255,0.35);
    border-color: transparent;
  }
  .report-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
  }
  .report-summary-card {
    background: var(--glass-bg, rgba(13,25,44,0.55));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 12px 14px;
  }
  .report-summary-card .rsc-label {
    font-size: 9px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #8493a8;
    margin-bottom: 6px;
  }
  .report-summary-card .rsc-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--cyan, #00f2ff);
  }
  .report-chart-wrap {
    background: var(--glass-bg, rgba(13,25,44,0.4));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    height: 240px;
    position: relative;
  }
  .report-chart-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #8493a8;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .report-state-msg {
    text-align: center;
    padding: 40px 10px;
    color: #8493a8;
    font-size: 12px;
  }
  .report-connectivity-wrap {
    background: var(--glass-bg, rgba(13,25,44,0.4));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
  }
  .report-connectivity-wrap:empty { display: none; }
  .report-connectivity-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #8493a8;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .report-connectivity-title i { color: #ff3366; margin-right: 4px; }
  .offline-empty {
    font-size: 11.5px;
    color: #8493a8;
  }
  .offline-event-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
  }
  .offline-event-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,51,102,0.25);
    background: rgba(255,51,102,0.06);
  }
  .offline-event-item i { color: #ff3366; margin-top: 2px; font-size: 12px; }
  .offline-event-item.offline-event-live {
    border-color: rgba(245,158,11,0.4);
    background: rgba(245,158,11,0.08);
  }
  .offline-event-item.offline-event-live i { color: #f59e0b; }
  .offline-event-text { font-size: 11.5px; color: #d7dee7; line-height: 1.5; }
  .offline-event-sub { font-size: 10px; color: #8493a8; }
  #reportExportBtn { margin-top: 4px; }

  /* ===== Map Tracking Modal ===== */
  .tracking-modal-content {
    display: flex;
    flex-direction: column;
  }
  .tracking-summary {
    padding: 10px 16px 0;
    font-size: 11px;
    color: #8493a8;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
  }
  .tracking-summary span { color: var(--cyan, #00f2ff); font-weight: 600; }
  #trackingMap { flex: 1; width: 100%; min-height: 300px; z-index: 1; }

  /* ===== All Alerts Modal ===== */
  .alerts-modal-content {
    display: flex;
    flex-direction: column;
  }
  #alertsBody {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
  }
  .alert-log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .alert-log-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,51,102,0.22);
    background: rgba(255,51,102,0.05);
  }
  .alert-log-item i { color: #ff3366; margin-top: 3px; font-size: 12px; }
  .alert-log-time { font-size: 10px; color: #8493a8; margin-bottom: 4px; }
  .alert-log-tags { margin-bottom: 4px; }
  .alert-log-detail { font-size: 11px; color: #d7dee7; line-height: 1.5; }
  .alert-type-tag {
    display: inline-block;
    font-family: 'Orbitron', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 6px;
    margin-right: 4px;
    text-transform: uppercase;
  }
  .alert-type-fall { background: rgba(255,51,102,0.18); color: #ff3366; border: 1px solid rgba(255,51,102,0.4); }
  .alert-type-sos { background: rgba(249,115,22,0.18); color: #f97316; border: 1px solid rgba(249,115,22,0.4); }
  .alert-type-temp { background: rgba(245,158,11,0.18); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); }
  .alert-type-humidity { background: rgba(0,242,255,0.15); color: #00f2ff; border: 1px solid rgba(0,242,255,0.4); }
  .alert-type-pressure { background: rgba(167,139,250,0.18); color: #a78bfa; border: 1px solid rgba(167,139,250,0.4); }

  /* ===== Premium Post-Login Code Loader ===== */
  #authCodeLoader {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
      radial-gradient(circle at 50% 20%, rgba(0, 242, 255, 0.10), transparent 34%),
      radial-gradient(circle at 15% 85%, rgba(37, 99, 235, 0.12), transparent 30%),
      linear-gradient(135deg, rgba(2, 7, 16, 0.98), rgba(5, 14, 28, 0.98));
    opacity: 0;
    pointer-events: none;
    transition: opacity .55s ease, visibility .55s ease;
    visibility: hidden;
  }
  #authCodeLoader.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  #authCodeLoader.fade-out {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  .auth-loader-card {
    width: min(900px, 100%);
    border: 1px solid rgba(0, 242, 255, .24);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(14, 28, 48, .82), rgba(4, 12, 24, .78));
    box-shadow: 0 28px 90px rgba(0,0,0,.58), 0 0 42px rgba(0,242,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateY(12px) scale(.985);
    transition: transform .55s ease;
  }
  #authCodeLoader.show .auth-loader-card { transform: translateY(0) scale(1); }
  .auth-loader-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 242, 255, .12);
    background: rgba(0, 0, 0, .16);
  }
  .auth-loader-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #eafcff;
    font: 800 13px 'Orbitron', sans-serif;
    letter-spacing: 1.4px;
  }
  .auth-loader-brand i {
    color: #00f2ff;
    filter: drop-shadow(0 0 8px rgba(0,242,255,.7));
  }
  .auth-loader-status {
    color: #72e9f4;
    font: 700 10px 'Orbitron', sans-serif;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  .auth-code-window {
    min-height: 330px;
    max-height: 54vh;
    overflow: hidden;
    padding: 18px 0;
    background:
      linear-gradient(90deg, rgba(0,242,255,.035) 1px, transparent 1px) 0 0/42px 42px,
      linear-gradient(rgba(0,242,255,.025) 1px, transparent 1px) 0 0/42px 42px,
      rgba(1, 7, 15, .58);
  }
  .auth-code-line {
    display: flex;
    align-items: baseline;
    gap: 18px;
    min-height: 24px;
    padding: 0 24px;
    color: rgba(208, 228, 239, .78);
    font: 500 12px/24px 'Consolas', 'Courier New', monospace;
    white-space: pre;
    opacity: 0;
    transform: translateX(-8px);
    animation: authLineIn .18s ease forwards;
  }
  .auth-code-line .line-no {
    width: 38px;
    flex: 0 0 38px;
    color: rgba(114, 233, 244, .38);
    text-align: right;
    user-select: none;
  }
  .auth-code-line .line-code { overflow: hidden; text-overflow: ellipsis; }
  .auth-code-line.active .line-code { color: #eafcff; text-shadow: 0 0 12px rgba(0,242,255,.18); }
  @keyframes authLineIn {
    to { opacity: 1; transform: translateX(0); }
  }
  .auth-loader-bottom {
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(0,242,255,.10);
  }
  .auth-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    color: #8ca4b6;
    font: 700 10px 'Orbitron', sans-serif;
    letter-spacing: .8px;
  }
  .auth-progress-meta strong {
    color: #00f2ff;
    font-size: 13px;
    text-shadow: 0 0 10px rgba(0,242,255,.55);
  }
  .auth-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(0,242,255,.16);
    background: rgba(0, 20, 33, .72);
  }
  .auth-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #00f2ff 65%, #baf9ff);
    box-shadow: 0 0 16px rgba(0,242,255,.75);
    transition: width .09s linear;
  }
  @media (max-width: 640px) {
    .auth-loader-top { padding: 16px; }
    .auth-loader-brand { font-size: 10px; }
    .auth-loader-status { display: none; }
    .auth-code-window { min-height: 280px; }
    .auth-code-line { padding: 0 14px; gap: 10px; font-size: 10px; }
    .auth-code-line .line-no { width: 28px; flex-basis: 28px; }
    .auth-loader-bottom { padding: 16px; }
  }


  /* FIX ONLY: small LIVE SATELLITE TRACKING map */
  .map-wrapper > #map {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* =========================================================
     MOTION STATE CARD — bigger fall / SOS flag badges
     The two pills at the bottom of the Motion State card were
     too small to read at a glance, so they now use a larger
     type size and taller padding (the pill grows downward into
     the card's existing empty space). Only these two badges are
     affected; every other .badge on the dashboard is unchanged.
     ========================================================= */
  #fallBadge,
  #sosBadge {
    font-size: 10px !important;
    padding: 7px 6px !important;
    border-radius: 6px !important;
    letter-spacing: .6px;
    line-height: 1.15;
  }

  @media (max-width: 420px) {
    #fallBadge,
    #sosBadge {
      font-size: 9px !important;
      padding: 6px 5px !important;
    }
  }
  /* =========================================================
     LIGHT THEME REFINEMENT (final override layer)
     1. Sky-blue page background instead of the flat grey.
     2. Larger, darker text everywhere so it stays readable on
        a bright background.
     3. Thicker neon ring around every glass panel.
     4. Header buttons (Audio / Theme / Export) were nearly
        invisible — they used a faint cyan wash that disappears
        on a light header. They now have a solid white face,
        a real blue border and dark label text.
     Dark theme is untouched: every rule below is scoped to
     body.light-theme.
     ========================================================= */
  body.light-theme {
    --bg-gradient:
      radial-gradient(1100px 700px at 50% -12%, rgba(255,255,255,.95), transparent 62%),
      radial-gradient(900px 620px at 100% 100%, rgba(0,153,224,.07), transparent 58%),
      linear-gradient(180deg, #f1f9fe 0%, #e3f2fb 52%, #d6ebf8 100%);
    --glass-bg: rgba(255,255,255,.82);
    --glass-shine: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.55));
    --glass-border: rgba(0,120,196,.30);
    /* neutral soft shadow (same idea as the dark theme) — the coloured neon
       comes from each box's own rule: system status, alerts, SOS, per-card hover */
    --card-glow:
      9px 9px 20px rgba(163,177,198,.45),
      -7px -7px 18px rgba(255,255,255,.9),
      0 10px 26px rgba(8,54,86,.08),
      inset 0 1px 0 rgba(255,255,255,.92);
    --cyan: #0068c4;
    --cyan-glow: rgba(0,104,196,.35);
    --text-main: #041424;
    --text-muted: #21364e;
    --border-subtle: rgba(4,32,62,.18);
    --aside-bg: rgba(255,255,255,.96);
  }

  /* 3. (removed) the blanket thick-blue ring + blue hover glow on every box.
     Light theme now uses the same per-box neon rules as the dark theme. */

  /* 4. Header controls — solid, clearly visible buttons */
  body.light-theme .btn-action {
    background: #ffffff;
    border: 1.5px solid rgba(0,104,196,.55);
    color: #062338;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(8,54,86,.14);
  }
  body.light-theme .btn-action i { color: #0068c4; }
  body.light-theme .btn-action:hover {
    background: #e9f6ff;
    border-color: #0068c4;
    box-shadow: 0 3px 12px rgba(0,104,196,.24);
  }
  body.light-theme .btn-action.active-sound {
    background: #e0f4ff;
    border-color: rgba(14,165,233,.7);
    color: #075985;
  }
  body.light-theme .clock-box {
    font-size: 12px;
    font-weight: 700;
    color: #064e86;
  }
  body.light-theme .status-badge {
    font-size: 11px;
    font-weight: 700;
    color: #8a4b00;
    background: rgba(245,158,11,.20);
    border-color: rgba(180,110,0,.65);
  }
  body.light-theme .status-badge.connected {
    color: #065f46;
    background: rgba(16,185,129,.18);
    border-color: rgba(6,120,90,.65);
  }

  /* 2. Bigger, higher-contrast text */
  body.light-theme .cmd-title { font-size: 15px; }
  body.light-theme .nav-item a { font-size: 14px; font-weight: 600; color: #21364e; }
  body.light-theme .nav-item.active a, body.light-theme .nav-item a:hover { color: #041424; }
  body.light-theme .card-title { font-size: 11px; font-weight: 800; color: #143451; }
  body.light-theme .system-text h2 { font-size: 16px; }
  body.light-theme .system-text h3 { font-size: 13px; }
  body.light-theme .system-text p { font-size: 11px; color: #21364e; }
  body.light-theme .worker-details { font-size: 12.5px; }
  body.light-theme .worker-details span { color: #354962; font-weight: 600; }
  body.light-theme .sensor-title-v2 { font-size: 9px; color: #1c3450; }
  body.light-theme .sensor-val-v2 { font-size: 20px; }
  body.light-theme .sensor-val-v2 small { font-size: 11px; }
  body.light-theme .sensor-status-v2 { font-size: 11px; font-weight: 700; }
  body.light-theme .sensor-range-v2 { font-size: 9px; color: #2b3f58; }
  body.light-theme .device-conn-list { font-size: 12px; }
  body.light-theme table { font-size: 11px; }
  body.light-theme th { font-size: 10.5px; color: #143451; }
  body.light-theme .active-alert-title { font-size: 12.5px; }
  body.light-theme .active-alert-detail { font-size: 11.5px; color: #17293e; opacity: 1; }
  body.light-theme .badge { font-size: 9px; }

  /* The sensor cards have a fixed height in the dark theme; with the
     larger light-theme type they need to size to their content so
     nothing gets clipped by the card's overflow:hidden. */
  body.light-theme .sensor-card-v2 {
    height: auto;
    min-height: 162px;
  }
  @media (max-width: 420px) {
    body.light-theme .sensor-card-v2 { height: auto; min-height: 152px; }
  }


  /* ===== iPhone-style unlock: the "lock screen" (loaders) zooms up and
     blurs away while the dashboard tiles fly in (see playIosUnlock()) ===== */
  #authCodeLoader {
    transition: opacity .55s ease, visibility .55s ease,
                transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;
  }
  #authCodeLoader.fade-out { transform: scale(1.1); }
  #authCodeLoader.fade-out .auth-loader-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #bootLoader {
    transition: opacity .6s ease, visibility .6s ease,
                transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform, opacity;
  }
  #bootLoader.hidden { transform: scale(1.1); }

  /* while the tiles fly in: no backdrop-filter (very expensive to animate),
     and each tile gets its own compositor layer so it stays smooth */
  #mainContent.ios-anim .glass-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: transform, opacity;
  }


  /* =========================================================
     120Hz SMOOTHNESS LAYER (no visual change)
     - Page background: `background-attachment: fixed` forces the browser to
       repaint the whole gradient on every scroll frame (the #1 cause of
       scroll stutter on high-refresh screens). The identical gradient now
       lives on its own fixed, GPU-composited layer, so scrolling only moves
       already-painted layers.
     - Post-login loader: bar + code lines are updated every display frame
       (JS uses requestAnimationFrame) and isolated so they never trigger
       page-wide layout/paint.
     ========================================================= */
  html { background-color: #040812; }
  html:has(body.light-theme) { background-color: #e3f2fb; }
  body { background: none; }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: var(--bg-gradient);
    transform: translateZ(0);
    will-change: transform;
  }
  .auth-progress-fill { transition: none; }
  .auth-progress-track,
  .auth-code-window { contain: layout paint; }
  .auth-code-line { backface-visibility: hidden; }
  #mainContent > footer { will-change: transform, opacity; }
  #mainContent:not(.ios-anim) > footer { will-change: auto; }


  /* =========================================================
     BOX HOVER LIFT
     The entrance animation used `fill-mode: both`, which keeps its final
     `transform: translateY(0)` locked on forever and silently overrides
     the :hover transform, so boxes never moved. `backwards` gives the same
     entrance and the same end state, but releases the transform afterwards.
     ========================================================= */
  header.glass-panel,
  .row .glass-panel,
  .sensor-grid .glass-panel { animation-fill-mode: backwards; }

  @media (hover: hover) and (pointer: fine) {
    .glass-panel:hover,
    .card.glass-panel:hover,
    .sensor-card-v2:hover { transform: translateY(-3px); }
  }


/* ============================================================
   HELMET MODULE (additive) — merged into the existing dashboard cards:
   header pill, status card, obstacle card, chart titles, and the
   VEST/HELMET switch inside Reports + Alerts.
   ============================================================ */
/* helmet status card turns red while a helmet hazard is active */
.system-card.h-alert .system-icon {
  background: rgba(255, 51, 102, 0.12); border-color: var(--red); color: var(--red);
}
.system-card.h-alert .system-text h2 { color: var(--red); }

/* chart title icons */
.card-title.icon-h-hr::before   { content: "\f21e"; color: var(--red);   font-size: 15px; }
.card-title.icon-h-spo2::before { content: "\f604"; color: var(--cyan);  font-size: 15px; }
.card-title.icon-h-gas::before  { content: "\f75f"; color: var(--purple); font-size: 15px; }

/* Obstacle card: Left / Front / Right values */
.obst-lines { display: flex; flex-direction: column; margin-top: 3px; gap: 1px; }
.obst-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; line-height: 1.45; }
.obst-line span { color: var(--text-muted); font-size: 9px; }
.obst-line b { font-weight: 800; color: var(--text-main); }
.obst-line.hit b { color: var(--red); }

#helmetConnPill { white-space: nowrap; }

/* VEST / HELMET switch inside Reports + Alerts windows */
.src-switch { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.hm-tab {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--glass-border, rgba(0,242,255,0.25));
  background: transparent; color: #8493a8; cursor: pointer; transition: all 0.2s ease;
}
.hm-tab:hover { color: var(--cyan, #00f2ff); }
.hm-tab.active {
  background: linear-gradient(90deg, #2563eb 0%, #00f2ff 100%);
  color: #04101c; box-shadow: 0 0 16px rgba(0,242,255,0.35); border-color: transparent;
}
.src-switch .hm-tab i { margin-right: 5px; }

#reportsBody.show-helmet > :not(.src-switch):not(#helmetReportPane) { display: none !important; }
#reportsBody:not(.show-helmet) > #helmetReportPane { display: none; }
#alertsBody.show-helmet > :not(.src-switch):not(#helmetAlertsPane) { display: none !important; }
#alertsBody:not(.show-helmet) > #helmetAlertsPane { display: none; }
#hReportExportBtn { margin-top: 4px; }

.alert-type-obstacle { background: rgba(249,115,22,0.18); color: #f97316; border: 1px solid rgba(249,115,22,0.4); }
.alert-type-gas      { background: rgba(245,158,11,0.18); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); }
.alert-type-hr       { background: rgba(255,51,102,0.18); color: #ff3366; border: 1px solid rgba(255,51,102,0.4); }
.alert-type-spo2     { background: rgba(0,242,255,0.15);  color: #00f2ff; border: 1px solid rgba(0,242,255,0.4); }


/* Map card now fills the row next to Workers Online (Device Connection card removed) */
.map-card-large { flex: 4; min-width: 300px; }
.map-card-large .map-wrapper { height: 380px; }
@media (max-width: 768px) {
  .map-card-large .map-wrapper { height: 300px; }
}

/* Signal pill in the header: same shape as the Helmet pill; red when the link is poor */
.status-badge.weak { color: var(--red); background: rgba(255, 51, 102, 0.15); border-color: rgba(255, 51, 102, 0.4); }
.status-badge.weak i { color: var(--red); }

/* ============================================================
   HELMET NEON STATE GLOW
   - Helmet OFFLINE / waiting  -> steady YELLOW neon
   - Helmet REALTIME STREAMING -> steady RED neon
   Driven purely by the 'active' class the helmet JS already toggles
   on #hSysIcon (setConnectedUi adds it, goOffline removes it).
   Applies ONLY to the main helmet status card (AWAITING / HELMET OFFLINE /
   REALTIME STREAMING).
   ============================================================ */
.system-card:has(#hSysIcon:not(.active)) {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px rgba(234,179,8,.35), 0 0 24px 4px rgba(234,179,8,.28), 0 0 50px 10px rgba(234,179,8,.1);
}
.system-card:has(#hSysIcon.active) {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(255,51,102,.35), 0 0 24px 4px rgba(255,51,102,.28), 0 0 50px 10px rgba(255,51,102,.1);
}

/* Helmet hover glows — Gas and Obstacle colours exchanged:
   GAS LEVEL (MQ-2) = purple, OBSTACLE = amber. */
.sensor-grid .helmet-box:nth-child(3):hover { /* Gas — purple */
  border-color: var(--purple);
  box-shadow: 0 0 0 1px rgba(168,85,247,.4), 0 0 22px 3px rgba(168,85,247,.35), 0 0 46px 8px rgba(168,85,247,.12);
}
.sensor-grid .helmet-box:nth-child(4):hover { /* Obstacle — amber */
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(245,158,11,.4), 0 0 22px 3px rgba(245,158,11,.35), 0 0 46px 8px rgba(245,158,11,.12);
}


/* ============================================================
   SIDE PANELS — Alerts / Map Tracking / Reports (desktop)
   The sidebar stays visible and the panel fills the area to its
   RIGHT. JS (initSidebarNavigation) toggles body.side-panel-open
   and sets --side-w to the sidebar's real width.
   Phones (<=768px) keep the original full-screen modal.
   ============================================================ */
@media (min-width: 769px) {
  body.side-panel-open aside#sidebar {
    left: 0;
    z-index: 100001;               /* above the modal layer (99999) */
  }
  body.side-panel-open #alertsModal,
  body.side-panel-open #trackingModal,
  body.side-panel-open #reportsModal {
    left: var(--side-w, 258px);
    width: calc(100vw - var(--side-w, 258px));
    height: 100vh;
    padding: 14px;
    background: #050b14;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.side-panel-open #alertsModal .map-modal-content,
  body.side-panel-open #trackingModal .map-modal-content,
  body.side-panel-open #reportsModal .map-modal-content {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 14px;
  }
}

/* ============================================================
   LIGHT THEME — UNIFIED BOXES + DARKER, BOLDER TEXT
   1. Every box now uses the same soft blue frosted-glass fill as the
      top status / worker boxes (sensor cards, live charts, map,
      workers online, history, alerts).
   2. Text is darker and heavier so it reads clearly on light glass.
   All rules are scoped to body.light-theme — dark theme untouched.
   ============================================================ */
body.light-theme {
  --text-main: #020b16;
  --text-muted: #0b1d33;
  --box-fill: linear-gradient(110deg, rgba(0,119,255,.10), rgba(214,224,238,.90));
}

/* 1 — same fill as the top boxes */
body.light-theme .sensor-grid > .sensor-card-v2.glass-panel:nth-child(n),
body.light-theme .card.glass-panel:not(.system-card):not(.worker-info-card):not(.alert-card) {
  background: var(--box-fill);
}
body.light-theme .card.glass-panel.alert-card {
  background: linear-gradient(110deg, rgba(255,51,102,.09), rgba(214,224,238,.90));
}
body.light-theme .map-wrapper,
body.light-theme .table-container {
  background: rgba(255,255,255,.35);
}

/* 2 — darker / bolder text */
body.light-theme .glass-panel { font-weight: 600; }

body.light-theme .card-title,
body.light-theme .sensor-title-v2 {
  color: #04152a;
  font-weight: 800;
}
body.light-theme .sensor-title-v2 { font-size: 10px; }
body.light-theme .card-title { font-size: 12px; }

body.light-theme .sensor-val-v2 { color: #020b16; font-weight: 800; }
body.light-theme .sensor-val-v2 small { color: #004a99; font-weight: 800; }

body.light-theme .sensor-status-v2 {
  font-size: 12px;
  font-weight: 800;
  filter: brightness(.7) saturate(1.2);   /* amber / green / red status words */
}
body.light-theme .sensor-range-v2 {
  color: #0b1d33;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 1;
}

/* top status cards */
body.light-theme .system-text h2,
body.light-theme #hSysStatusText,
body.light-theme #sysStatusText {
  font-weight: 900;
  filter: brightness(.74) saturate(1.2);
}
body.light-theme .system-text h3 { color: #020b16; font-weight: 800; }
body.light-theme .system-text p  { color: #0b1d33; font-weight: 700; font-size: 12px; }

/* worker info box */
body.light-theme .worker-details,
body.light-theme .worker-details div { color: #020b16; font-weight: 700; }
body.light-theme .worker-details span { color: #0b1d33; font-weight: 700; }
body.light-theme .worker-details b {
  font-weight: 900;
  filter: brightness(.74) saturate(1.2);
}

/* obstacle rows, workers-online, tables, footer, header pills */
body.light-theme .obst-line span { color: #0b1d33; font-size: 10.5px; font-weight: 700; }
body.light-theme .obst-line b    { color: #020b16; font-weight: 900; }
body.light-theme #onlineWorkerCount { color: #020b16; font-weight: 900; }
body.light-theme table td { color: #04152a; font-weight: 600; }
body.light-theme th { color: #04152a; font-weight: 800; }
body.light-theme footer,
body.light-theme footer span { color: #0b1d33; font-weight: 700; }
body.light-theme .status-badge { font-weight: 800; }
body.light-theme .cmd-title { color: #020b16; font-weight: 800; }
body.light-theme .badge { font-weight: 800; }

/* light theme: status badges (NO FALL / SOS NORMAL / DETECTED OBJECT …) were pale on the light fill */
body.light-theme .badge { filter: brightness(.68) saturate(1.25); }