/* ════════════════════════════════════════════════════
     SIDEBAR LAYOUT
  ════════════════════════════════════════════════════ */
  :root {
    --sidebar-w: 220px;
    --sidebar-collapsed-w: 60px;
    --topbar-h: 48px;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    z-index: 200;
    display: flex;
    align-items: center;
    background: #333333;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    color: #fff;
    overflow: hidden;
  }
  /* No pseudo-element decorations - clean solid header */
  .topbar::before,
  .topbar::after { display: none !important; }
  .topbar > * { position: relative; z-index: 1; }

  /* Hamburger button (visible on mobile, also toggle on desktop) */
  .sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    color: var(--muted);
    transition: color .2s;
    margin-right: 4px;
  }
  .sidebar-toggle:hover { color: #349189; }
  .sidebar-toggle svg { width: 18px; height: 18px; }

  /* ── Sidebar ── */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #166466 0%, #349189 100%);
    border-right: none;
    box-shadow: 2px 0 20px rgba(0,0,0,.15), inset -1px 0 0 rgba(255,255,255,.04);
    z-index: 150;
    display: flex;
    flex-direction: column;
    transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
  }

  /* Collapsed state (desktop) */
  .sidebar.collapsed {
    width: var(--sidebar-collapsed-w);
  }
  .sidebar.collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; }
  .sidebar.collapsed .nav-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; }
  .sidebar.collapsed .sidebar-logo-text { opacity: 0; width: 0; }

  /* Mobile: off-canvas */
  @media (max-width: 768px) {
    .sidebar {
      width: var(--sidebar-w) !important;
      transform: translateX(-100%);
      box-shadow: none;
    }
    .sidebar.mobile-open {
      transform: translateX(0);
      box-shadow: 4px 0 24px rgba(0,0,0,.18);
    }
    .sidebar-overlay {
      display: block;
    }
  }

  /* Overlay for mobile */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 140;
    backdrop-filter: blur(2px);
  }
  .sidebar-overlay.show { display: block; }

  /* ── Sidebar logo strip ── */
  .sidebar-logo {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
  }
  .sidebar-logo-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    background: rgba(255,255,255,.15);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
  .sidebar-logo-icon svg { width: 16px; height: 16px; color: #fff; }
  .sidebar-logo-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: .02em;
    color: #fff; text-transform: none;
    transition: opacity .2s, width .2s;
    white-space: nowrap;
  }

  /* ── Nav items ── */
  .nav-section-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px; font-weight: 600; letter-spacing: .06em;
    color: rgba(255,255,255,.25); text-transform: uppercase;
    padding: 16px 14px 6px;
    transition: opacity .2s;
    white-space: nowrap;
  }

  .nav-items { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 8px; }
  .nav-items::-webkit-scrollbar { width: 4px; }
  .nav-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 7px;
    cursor: pointer; border: none; background: none;
    width: 100%; text-align: left;
    color: rgba(255,255,255,.55);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px; font-weight: 500; letter-spacing: .01em;
    transition: background .15s, color .15s;
    white-space: nowrap;
    position: relative;
  }
  .nav-item:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
  .nav-item.active { background: rgba(255,255,255,.15); color: #fff; box-shadow: none; }
  .nav-item.active .nav-icon { color: #fff; }
  .nav-item.active::before {
    content: '';
    position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 3px; border-radius: 0 3px 3px 0;
    background: #fff;
    box-shadow: 0 0 8px rgba(59,130,246,.5);
    margin-left: -10px;
  }

  .nav-icon { width: 18px; height: 18px; flex-shrink: 0; transition: color .15s; color: rgba(255,255,255,.35); }
  .nav-item:hover .nav-icon { color: rgba(255,255,255,.6); }
  .nav-item.active .nav-icon { color: #60a5fa !important; }
  .nav-label { transition: opacity .2s, width .2s; }

  /* Badge on nav */
  .nav-badge {
    margin-left: auto; flex-shrink: 0;
    background: var(--red, #ef4444);
    color: #fff; font-size: 9px; font-weight: 700;
    border-radius: 20px; padding: 1px 6px;
    min-width: 18px; text-align: center;
    display: none;
  }
  .nav-badge.show { display: block; }

  .nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: 8px 4px; }

  /* ── Sidebar bottom info ── */
  .sidebar-bottom {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
  }
  .sidebar-device {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    color: rgba(255,255,255,.35); letter-spacing: .08em;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  .sidebar-device .dot-sm {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.2); flex-shrink: 0;
  }
  .sidebar-device .dot-sm.on { background: var(--green); box-shadow: 0 0 5px var(--green); }

  /* ════════════════════════════════════════════════════
     MAIN CONTENT AREA
  ════════════════════════════════════════════════════ */
  .app-body {
    display: flex;
    flex: 1;
    margin-top: var(--topbar-h);
  }

  .content-area {
    flex: 1;
    margin-left: var(--sidebar-w);
    transition: margin-left .28s cubic-bezier(.4,0,.2,1);
    min-width: 0;
  }
  .content-area.collapsed-offset {
    margin-left: var(--sidebar-collapsed-w);
  }

  @media (max-width: 768px) {
    .content-area, .content-area.collapsed-offset {
      margin-left: 0 !important;
    }
  }

  /* Existing main wrapper */
  main {
    padding: 16px;
  }

  /* ════════════════════════════════════════════════════
     SECTION PAGES
  ════════════════════════════════════════════════════ */
  .page-section { display: none; }
  .page-section.active { display: block; }

  /* ── Page header ── */
  .page-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .page-header-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--amber-bg, rgba(251,191,36,.1));
    border: 1px solid var(--amber-border, rgba(251,191,36,.2));
    display: flex; align-items: center; justify-content: center;
    color: var(--amber);
  }
  .page-header-icon svg { width: 18px; height: 18px; }
  .page-header-text h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text); margin: 0;
  }
  .page-header-text p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    color: var(--muted); margin: 2px 0 0; letter-spacing: .06em;
  }

  /* ════════════════════════════════════════════════════
     OVERVIEW PAGE
  ════════════════════════════════════════════════════ */
  .overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .ov-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color .2s;
  }
  .ov-card:hover { border-color: var(--amber); }
  .ov-card-top { display: flex; align-items: center; justify-content: space-between; }
  .ov-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
  }
  .ov-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
  .ov-icon svg { width: 14px; height: 14px; }
  .ov-icon.amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border, rgba(251,191,36,.2)); }
  .ov-icon.green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border, rgba(34,197,94,.2)); }
  .ov-icon.red   { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-border, rgba(239,68,68,.2)); }
  .ov-icon.blue  { background: var(--blue-bg);  color: var(--blue);  border: 1px solid var(--blue-border, rgba(59,130,246,.2)); }
  .ov-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 26px;
    font-weight: 700; color: var(--text); letter-spacing: -.02em;
    line-height: 1;
  }
  .ov-val .ov-unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }
  .ov-sub { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--muted); }

  .ov-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
  }
  @media (max-width: 640px) { .ov-two-col { grid-template-columns: 1fr; } }

  .ov-status-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
  }
  .ov-panel-head {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); display: flex; align-items: center; gap: 8px;
    background: var(--surface3, rgba(0,0,0,.03));
  }
  .ov-panel-body { padding: 12px 14px; }

  .ov-stat-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid var(--border);
  }
  .ov-stat-row:last-child { border-bottom: none; }
  .ov-stat-key {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    color: var(--muted); letter-spacing: .06em;
  }
  .ov-stat-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    font-weight: 600; color: var(--text);
  }

  /* ════════════════════════════════════════════════════
     REPORT PAGE
  ════════════════════════════════════════════════════ */
  .report-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; flex-wrap: wrap;
  }
  .report-filter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    padding: 5px 12px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--muted); font-weight: 600; letter-spacing: .06em;
    transition: all .15s;
  }
  .report-filter.active { border-color: var(--amber); color: var(--amber); background: var(--amber-bg); }
  .report-filter:hover:not(.active) { border-color: var(--text); color: var(--text); }
  .report-count {
    margin-left: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--muted);
  }

  .report-log-wrap {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden;
  }
  .report-log-head {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
    background: var(--surface3, rgba(0,0,0,.03));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  .report-log-inner { max-height: calc(100vh - 280px); overflow-y: auto; }
  .report-log-inner .logline { padding: 7px 14px; }

  /* ════════════════════════════════════════════════════
     EXISTING INLINE ADDITIONS
  ════════════════════════════════════════════════════ */
  .refresh-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 10px; margin-left: auto;
    background: transparent; border: 1px solid var(--border);
    color: var(--muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 600; letter-spacing: .08em;
    border-radius: 4px; cursor: pointer; transition: all .2s;
    white-space: nowrap;
  }
  .refresh-btn:hover { border-color: var(--amber); color: var(--amber); }
  .refresh-btn.spinning .ri { animation: spin .7s linear infinite; }
  .refresh-btn:disabled { opacity: .4; cursor: not-allowed; }
  .ri { display: inline-block; font-style: normal; transition: transform .2s; }

  .poll-pill {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    color: var(--muted); padding: 0 10px;
    border-left: 1px solid var(--border);
  }
  .poll-bar-wrap { width: 40px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
  .poll-bar { height: 100%; background: var(--amber); border-radius: 2px; transition: width 1s linear; }

  .toast-stack {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 1100; display: flex; flex-direction: column;
    align-items: center; gap: 10px; pointer-events: none;
    width: min(420px, 92vw);
  }
  .toast {
    width: 100%; border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
    border: 1px solid var(--border); background: var(--surface);
    pointer-events: all;
    animation: toastIn .22s cubic-bezier(.34,1.56,.64,1);
    transition: opacity .3s, transform .3s;
  }
  .toast.out { opacity: 0; transform: translateY(12px) scale(.97); }
  @keyframes toastIn { from { opacity:0; transform: translateY(16px) scale(.96); } }
  .toast-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
  .toast-icon { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
  .toast.loading .toast-icon { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); }
  .toast.success .toast-icon { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); }
  .toast.error   .toast-icon { background: var(--red-bg);   border: 1px solid var(--red-border); color: var(--red); }
  .toast.info    .toast-icon { background: var(--blue-bg);  border: 1px solid var(--blue-border); color: var(--blue, #3b82f6); }
  .toast.warning .toast-icon { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); }
  .toast-content { flex: 1; min-width: 0; }
  .toast-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: .04em; line-height: 1.3; }
  .toast-msg { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; word-wrap: break-word; }
  /* Fallback when only title or only msg exists */
  .toast-content:has(.toast-msg:only-child) .toast-msg { color: var(--text); font-weight: 500; font-size: 12px; margin-top: 0; }
  .toast-close { width: 22px; height: 22px; background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; flex-shrink: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
  .toast-close:hover { background: var(--surface2); color: var(--text); }
  .toast-progress { height: 3px; background: var(--border); border-radius: 0 0 10px 10px; }
  .toast-progress-fill { height: 100%; border-radius: inherit; transition: width linear; }
  .toast.loading .toast-progress-fill { background: var(--amber); width: 100%; animation: prog-pulse 1s ease-in-out infinite; }
  .toast.success .toast-progress-fill { background: var(--green); }
  .toast.error   .toast-progress-fill { background: var(--red); }
  .toast.info    .toast-progress-fill { background: var(--blue, #3b82f6); }
  .toast.warning .toast-progress-fill { background: var(--amber); }
  @keyframes prog-pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }

  .ctl.loading { opacity: .75; pointer-events: none; position: relative; overflow: hidden; }
  .ctl.loading::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg,transparent 25%,rgba(255,255,255,.08) 50%,transparent 75%);
    animation: shimmer-btn 1s linear infinite; background-size: 200% 100%;
  }
  @keyframes shimmer-btn { from { background-position: 200% 0; } to { background-position: -200% 0; } }

  .reg-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
  .reg-table th { text-align: left; padding: 5px 8px; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface3); }
  .reg-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
  .reg-table tr:last-child td { border-bottom: none; }
  .reg-table tr:nth-child(even) td { background: rgba(0,0,0,.02); }
  [data-theme="dark"] .reg-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
  .reg-name { color: var(--text2); } .reg-raw { color: var(--amber); text-align: right; }
  .reg-val { color: var(--text); font-weight: 500; } .reg-note { color: var(--muted); font-size: 10px; }
  .reg-ok { color: var(--green); } .reg-warn { color: var(--yellow); }
  .reg-crit { color: var(--red); } .reg-na { color: var(--dim); }

  .result-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
  .rtab { padding: 6px 12px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .08em; cursor: pointer; border: none; background: none; color: var(--muted); border-bottom: 2px solid transparent; transition: all .15s; text-transform: uppercase; }
  .rtab.active { color: var(--amber); border-bottom-color: var(--amber); }
  .rtab:hover:not(.active) { color: var(--text); }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  .conn-quality { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
  .conn-quality.fresh { color: var(--green);  background: var(--green-bg); }
  .conn-quality.stale { color: var(--yellow); background: var(--yellow-bg); }
  .conn-quality.old   { color: var(--red);    background: var(--red-bg); }

  .logout-btn { display: flex; align-items: center; gap: 7px; padding: 0 14px; border-left: 1px solid rgba(255,255,255,.12); background: none; border-top: none; border-right: none; border-bottom: none; cursor: pointer; color: rgba(255,255,255,.6); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; letter-spacing: .06em; height: 100%; transition: all .15s; }
  .logout-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

  /* ── Topbar responsive tweak ── */
  @media (max-width: 640px) {
    .poll-pill { display: none; }
    .sc .lbl { display: none; }
    .topbar-right { gap: 4px; }
    .sc { padding: 0 4px; }
    .logout-btn .logout-text { display: none; }
    .logout-btn .logout-icon { display: block; }
    .logout-btn { padding: 0 10px; }
    .theme-btn span:last-child { display: none; }
  }
  @media (max-width: 480px) {
    #imei { display: none; }
    .sc:has(#imei) { display: none; }
  }

  /* ── Bottom mobile nav ── */
  .mobile-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 58px;
    background: var(--surface); border-top: 1px solid var(--border);
    z-index: 300;
    justify-content: space-around; align-items: center;
    padding: 0 8px;
  }
  @media (max-width: 768px) {
    .mobile-nav { display: flex; }
    main { padding-bottom: 74px; }
  }
  .mob-nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 1; padding: 6px 4px; border: none; background: none; cursor: pointer;
    color: var(--muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border-radius: 8px; transition: all .15s;
  }
  .mob-nav-btn svg { width: 20px; height: 20px; }
  .mob-nav-btn.active { color: var(--amber); background: var(--amber-bg); }
  .mob-nav-btn:hover:not(.active) { color: var(--text); }

  /* ════════════════════════════════════════════════════
     FLEET MAP / OVERVIEW PAGE
  ════════════════════════════════════════════════════ */
  .page-section.fleet-full {
    margin: -16px;
  }
  @media (max-width: 768px) {
    .page-section.fleet-full { margin: -16px -16px -74px; }
  }

  .fleet-layout {
    display: flex;
    height: calc(100vh - var(--topbar-h));
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .fleet-layout { height: calc(100vh - var(--topbar-h) - 58px); }
  }

  /* ── Fleet sidebar ── */
  .fleet-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 10;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  @media (max-width: 768px) {
    .fleet-sidebar {
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 280px;
      transform: translateX(-100%);
      box-shadow: none;
    }
    .fleet-sidebar.open {
      transform: translateX(0);
      box-shadow: 4px 0 24px rgba(0,0,0,.22);
    }
  }

  .fleet-sb-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface3, rgba(0,0,0,.03));
  }
  .fleet-sb-head .page-header { margin: 0; padding: 0; border: none; }
  .fleet-sb-close {
    display: none;
    background: none; border: none; color: var(--muted);
    font-size: 16px; cursor: pointer; padding: 4px;
  }
  @media (max-width: 768px) { .fleet-sb-close { display: block; } }

  .fleet-sb-section { padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }

  .fleet-select {
    width: 100%;
    background: var(--surface2, rgba(0,0,0,.04));
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    border-radius: 6px; padding: 7px 10px;
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
  }
  .fleet-select:focus { outline: 1px solid var(--amber); }

  .fleet-search-wrap {
    position: relative;
  }
  .fleet-search {
    width: 100%; box-sizing: border-box;
    background: var(--surface2, rgba(0,0,0,.04));
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; border-radius: 6px;
    padding: 7px 30px 7px 10px;
  }
  .fleet-search:focus { outline: 1px solid var(--amber); }
  .fleet-search::placeholder { color: var(--muted); }
  .fleet-search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }

  .fleet-filters {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .fleet-filter {
    flex: 1; padding: 8px 4px;
    border: none; background: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .15s;
  }
  .fleet-filter span {
    display: inline-block; margin-left: 4px;
    background: var(--border); color: var(--muted);
    border-radius: 20px; padding: 0 5px;
    font-size: 9px;
  }
  .fleet-filter.active { color: var(--amber); border-bottom-color: var(--amber); }
  .fleet-filter.active span { background: var(--amber-bg); color: var(--amber); }
  .fleet-filter:hover:not(.active) { color: var(--text); }

  .fleet-unit-list {
    flex: 1; overflow-y: auto; padding: 8px 0;
  }
  .fleet-unit-list::-webkit-scrollbar { width: 4px; }
  .fleet-unit-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .fleet-unit-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
    border-left: 3px solid transparent;
    transition: all .15s;
  }
  .fleet-unit-item:hover { background: var(--surface2, rgba(0,0,0,.04)); }
  .fleet-unit-item.active { background: var(--amber-bg, rgba(251,191,36,.08)); border-left-color: var(--amber); }
  .fleet-unit-item.hidden { display: none; }

  .fleet-unit-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .fleet-unit-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
  .fleet-unit-dot.offline { background: var(--muted); }
  /* 4-state colors */
  .fleet-unit-dot.state-running { background: #22c55e; box-shadow: 0 0 6px #22c55e; animation: md-pulse-led 2s infinite; }
  .fleet-unit-dot.state-acc_on  { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
  .fleet-unit-dot.state-acc_off { background: #9ca3af; }
  .fleet-unit-dot.state-offline { background: #6b7280; }

  .fleet-unit-info { flex: 1; min-width: 0; }
  .fleet-unit-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fleet-unit-sub {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; color: var(--muted);
    letter-spacing: .06em; margin-top: 2px;
  }
  .fleet-unit-tag {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
    letter-spacing: .06em;
  }
  .fleet-unit-tag.online { background: var(--green-bg); color: var(--green); }
  .fleet-unit-tag.offline { background: var(--surface2); color: var(--muted); }
  /* 4-state colors */
  .fleet-unit-tag.state-running { background: rgba(34,197,94,.12); color: #22c55e; }
  .fleet-unit-tag.state-acc_on  { background: rgba(245,158,11,.12); color: #f59e0b; }
  .fleet-unit-tag.state-acc_off { background: rgba(156,163,175,.15); color: #9ca3af; }
  .fleet-unit-tag.state-offline { background: var(--surface2); color: var(--muted); }

  /* ── Map wrap ── */
  .fleet-map-wrap {
    flex: 1; position: relative; overflow: hidden;
  }
  #fleet-map { width: 100%; height: 100%; z-index: 1; }

  /* Mobile toggle button */
  .fleet-toggle-btn {
    display: none;
    position: absolute; top: 12px; left: 12px; z-index: 500;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 700;
    padding: 8px 14px; border-radius: 6px; cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    letter-spacing: .06em;
  }
  @media (max-width: 768px) { .fleet-toggle-btn { display: block; } }

  /* Sidebar overlay (mobile) */
  .fleet-overlay {
    display: none;
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45); z-index: 9;
    backdrop-filter: blur(2px);
  }
  .fleet-overlay.show { display: block; }

  /* Leaflet popup customization */
  .flt-popup { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-width: 200px; }
  .flt-popup-head {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: 8px;
    padding-bottom: 8px; border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; gap: 8px;
  }
  .flt-popup-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .flt-popup-row {
    display: flex; justify-content: space-between;
    font-size: 10px; padding: 3px 0;
  }
  .flt-popup-key { color: #6b7280; display: flex; align-items: center; gap: 5px; }
  .flt-popup-val { font-weight: 600; color: #111827; }
  /* Ikon Lucide di depan label baris (useFleetPopup.ts) — ikut warna label */
  .flt-popup-ico { display: inline-flex; flex-shrink: 0; opacity: .8; }
  .flt-popup-ico svg { width: 11px; height: 11px; }
  .flt-popup-btn {
    display: block; width: 100%; margin-top: 10px;
    background: #1a8a7d; color: #fff;
    border: none; border-radius: 5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    padding: 7px; cursor: pointer; text-align: center;
    text-transform: uppercase;
  }
  .flt-popup-btn:hover { background: #166466; }

  /* Popup power-on button */
  .flt-popup-pwr {
    background: rgba(245,158,11,.1) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245,158,11,.3) !important;
  }
  .flt-popup-pwr:hover {
    background: rgba(245,158,11,.2) !important;
  }

  /* Popup send command */
  .flt-cmd-toggle {
    display: flex; align-items: center; gap: 4px; cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 600;
    color: #9ca3af; letter-spacing: .04em;
    padding: 2px 0; user-select: none;
  }
  .flt-cmd-toggle:hover { color: #6b7280; }
  .flt-cmd-row {
    display: flex; gap: 4px; margin-top: 4px;
  }
  .flt-cmd-input {
    flex: 1; padding: 4px 8px; border-radius: 4px;
    border: 1px solid #e5e7eb; background: #f9fafb;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    color: #1f2937; outline: none;
  }
  .flt-cmd-input:focus { border-color: #3b82f6; }
  .flt-cmd-send {
    padding: 4px 10px; border-radius: 4px; border: none; cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    background: #3b82f6; color: #fff; letter-spacing: .04em;
  }
  .flt-cmd-send:hover { background: #2563eb; }
  .flt-cmd-resp {
    margin-top: 4px; padding: 4px 8px; border-radius: 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px;
    white-space: pre-wrap; word-break: break-all; line-height: 1.5;
    max-height: 80px; overflow-y: auto;
  }
  .flt-cmd-resp.sending { background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd; }
  .flt-cmd-resp.ok      { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
  .flt-cmd-resp.err     { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

  /* GPS status badge on map */
  .fleet-gps-badge {
    position: absolute; bottom: 12px; left: 12px; z-index: 500;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    color: var(--muted); box-shadow: 0 2px 8px rgba(0,0,0,.12);
    pointer-events: none;
    display: flex; align-items: center; gap: 6px;
  }
  .fleet-gps-badge .gdot {
    width: 6px; height: 6px; border-radius: 50%;
  }
  .fleet-gps-badge .gdot.fix { background: var(--green); box-shadow: 0 0 5px var(--green); }
  .fleet-gps-badge .gdot.nofix { background: var(--muted); }

  /* ── Track All row ── */
  .fleet-track-all-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 14px; border-bottom: 1px solid var(--border);
    flex-shrink: 0; background: var(--surface3, rgba(0,0,0,.03));
  }
  .fleet-track-all-label {
    display: flex; align-items: center; gap: 7px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: .08em; color: var(--text);
    cursor: pointer; user-select: none;
  }
  .fleet-track-all-label input[type=checkbox] { accent-color: var(--amber); width: 13px; height: 13px; cursor: pointer; }
  .fleet-track-hint {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    color: var(--muted); letter-spacing: .04em;
  }

  /* ── Unit item checkbox ── */
  .fleet-unit-cb { accent-color: var(--amber); width: 13px; height: 13px; flex-shrink: 0; cursor: pointer; }

  /* ── Unit item right column (tag + ago) ── */
  .fleet-unit-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0;
  }
  .fleet-unit-ago {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px;
    color: var(--muted); letter-spacing: .04em; white-space: nowrap;
  }

  /* ── Reload bar at bottom of sidebar ── */
  .fleet-reload-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-top: 1px solid var(--border);
    background: var(--surface3, rgba(0,0,0,.03)); flex-shrink: 0;
  }
  .fleet-reload-info {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    color: var(--muted); letter-spacing: .06em;
  }
  #fleet-reload-countdown { color: var(--amber); font-weight: 700; }
  .fleet-reload-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    transition: all .15s; white-space: nowrap;
  }
  .fleet-reload-btn:hover { border-color: var(--amber); color: var(--amber); }
  .fleet-reload-btn:disabled { opacity: .4; cursor: not-allowed; }
  .fleet-reload-btn.spinning .fleet-reload-icon { animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Popup divider ── */
  .flt-popup-divider {
    margin: 6px 0; border-top: 1px dashed #e5e7eb;
  }

  /* ── Search honeypot - disembunyikan tapi tetap autofill-target ── */
  .fleet-search-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* ── Mobile compact popup (≤768px) - kurangi takeover layar di HP ── */
  @media (max-width: 768px) {
    /* Limit popup width supaya tidak full-screen */
    .leaflet-popup-content-wrapper { max-width: calc(100vw - 48px) !important; }
    .leaflet-popup-content { margin: 8px 10px !important; width: auto !important; }

    .flt-popup { min-width: 0; max-width: calc(100vw - 70px); }
    .flt-popup-head {
      font-size: 10px; margin-bottom: 5px;
      padding-bottom: 5px; gap: 6px;
    }
    .flt-popup-dot { width: 7px; height: 7px; }
    .flt-popup-row { font-size: 9px; padding: 1.5px 0; }
    .flt-popup-divider { margin: 4px 0; }
    .flt-popup-btn {
      font-size: 9px; padding: 5px 4px; margin-top: 6px;
      letter-spacing: .04em;
    }
    /* Container popup: cap tinggi + scroll kalau kepanjangan */
    .flt-popup-container .leaflet-popup-content-wrapper {
      max-height: 70vh; overflow-y: auto;
    }
  }

  /* ── Legend drag handle ── */
  .flt-legend-handle {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }
  .flt-legend-handle:active { cursor: grabbing; }
  .flt-legend.is-dragging {
    opacity: .85;
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
    transition: none;
  }
  .flt-legend.is-dragging .flt-legend-handle { cursor: grabbing; }

  /* ════════════════════════════════════════════════════
  ════════════════════════════════════════════════════ */
  .dev-sel-wrap { position: relative; margin: 0 6px; }

  .dev-sel-btn {
    display: flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 10px;
    background: var(--surface2, rgba(0,0,0,.04));
    border: 1px solid var(--border); border-radius: 5px;
    cursor: pointer; color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: .05em;
    transition: border-color .15s;
    white-space: nowrap;
  }
  .dev-sel-btn:hover { border-color: var(--amber); }
  .dev-sel-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

  .dev-sel-drop {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 240px; z-index: 600;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.16);
    overflow: hidden;
  }
  .dev-sel-drop.show { display: block; }

  .dev-sel-head {
    padding: 8px 12px 6px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--border);
    background: var(--surface3, rgba(0,0,0,.03));
  }

  .dev-opt {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 10px 14px;
    border: none; background: none; cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; color: var(--text); text-align: left;
    transition: background .15s; letter-spacing: .04em;
    border-left: 3px solid transparent;
  }
  .dev-opt:hover { background: var(--surface2, rgba(0,0,0,.04)); }
  .dev-opt.active { background: var(--amber-bg); border-left-color: var(--amber); }

  .dev-opt-name { flex: 1; font-weight: 600; }
  .dev-opt-tag {
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
    padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
  }
  .dev-opt-tag.online  { background: var(--green-bg); color: var(--green); }
  .dev-opt-tag.offline { background: var(--surface2);  color: var(--muted); }

  .dev-empty {
    padding: 16px 14px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; color: var(--muted); text-align: center; letter-spacing: .06em;
  }

  /* ── Log line device badge ──────────────────────────────────────────── */
  .ldev {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
    background: var(--surface2); color: var(--muted); letter-spacing: .06em;
  }

  @media (max-width: 640px) {
    .dev-sel-label { max-width: 80px; }
  }
  @media (max-width: 480px) {
    .dev-sel-wrap { display: none; }
  }

  /* ════════════════════════════════════════════════════
     DEVICE SELECTOR (topbar)
  ════════════════════════════════════════════════════ */
  .dev-selector {
    position: relative;
    display: flex; align-items: center;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    height: 100%;
  }

  .dev-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px; height: 100%;
    background: none; border: none; cursor: pointer;
    color: var(--text); transition: background .15s;
    min-width: 160px;
  }
  .dev-btn:hover { background: var(--surface2, rgba(0,0,0,.04)); }

  .dev-btn-info {
    display: flex; flex-direction: column;
    align-items: flex-start; text-align: left; flex: 1;
  }
  .dev-btn-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: var(--text); white-space: nowrap;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  }
  .dev-btn-imei {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; color: var(--muted); letter-spacing: .08em;
  }

  .dev-count-badge {
    background: var(--amber); color: #000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700;
    border-radius: 20px; padding: 1px 6px;
    min-width: 18px; text-align: center; flex-shrink: 0;
  }

  .dev-chevron { color: var(--muted); flex-shrink: 0; transition: transform .2s; }
  .dev-dropdown.show ~ * .dev-chevron,
  .dev-btn:has(+ .dev-dropdown.show) .dev-chevron { transform: rotate(180deg); }

  /* Dropdown panel */
  .dev-dropdown {
    display: none;
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 380px; max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10);
    z-index: 500; overflow: hidden;
    animation: dropIn .15s cubic-bezier(.4,0,.2,1);
  }
  .dev-dropdown.show { display: block; }
  @keyframes dropIn { from { opacity:0; transform: translateY(-6px); } }

  .ddd-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
    position: relative;
  }
  .ddd-item:last-of-type { border-bottom: none; }
  .ddd-item:hover { background: var(--surface2, rgba(0,0,0,.04)); }
  .ddd-item.active { background: var(--amber-bg, rgba(251,191,36,.06)); }
  .ddd-item.offline { opacity: .65; }

  .ddd-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .ddd-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .ddd-dot.on  { background: var(--green); box-shadow: 0 0 6px var(--green); }
  .ddd-dot.off { background: var(--muted); }

  .ddd-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700;
    color: var(--text); letter-spacing: .04em;
  }
  .ddd-imei {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    color: var(--muted); letter-spacing: .08em; margin-top: 1px;
  }

  .ddd-right { margin-left: auto; text-align: right; flex-shrink: 0; }
  .ddd-stat {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 600;
    color: var(--text); letter-spacing: .04em;
  }
  .ddd-meta {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    color: var(--muted); margin-top: 2px; letter-spacing: .04em;
  }

  .ddd-check {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--amber); font-size: 14px; font-weight: 700;
  }

  .ddd-footer {
    padding: 8px 16px;
    background: var(--surface3, rgba(0,0,0,.03));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
    border-top: 1px solid var(--border);
  }

  .ddd-empty {
    padding: 20px 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    color: var(--muted); text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }

  @media (max-width: 640px) {
    .dev-btn { min-width: 120px; padding: 0 10px; }
    .dev-btn-imei { display: none; }
    .dev-dropdown { min-width: 280px; left: -20px; }
    .ddd-meta { display: none; }
  }

  /* ════════════════════════════════════════════════════
     ACCUMULATOR STRIP (center column)
  ════════════════════════════════════════════════════ */
  .dcc-accum-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .dcc-accum-strip .acell {
    padding: 12px 14px;
    border-left: 1px solid var(--border);
  }
  .dcc-accum-strip .acell:first-child { border-left: none; }

  /* ════════════════════════════════════════════════════
     DASHBOARD LOCATION + MINI MAP
  ════════════════════════════════════════════════════ */
  .dash-loc-section {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .dash-loc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
  }
  .dash-loc-left {
    display: flex; align-items: center; gap: 6px;
    color: var(--muted);
  }
  .dash-loc-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: .06em; color: var(--muted);
  }
  .dash-loc-right {
    display: flex; align-items: center; gap: 8px;
  }
  .dash-loc-coord {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--text);
  }
  .dash-loc-status {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 3px;
    background: rgba(100,116,139,.1); color: var(--muted);
    letter-spacing: .04em;
  }
  .dash-loc-status.active {
    background: rgba(34,197,94,.1); color: var(--green);
  }
  .dash-loc-map-wrap {
    position: relative;
    height: 200px;
  }
  .dash-minimap {
    width: 100%; height: 100%;
    z-index: 1;
  }
  .dash-minimap .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
  }
  .dash-minimap .leaflet-control-zoom a {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    width: 26px !important; height: 26px !important;
    line-height: 26px !important; font-size: 13px !important;
  }
  .dash-loc-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--surface2, #f8fafc);
    z-index: 2;
    transition: opacity .3s;
  }
  .dash-loc-placeholder.hidden {
    opacity: 0; pointer-events: none; z-index: 0;
  }
  .dash-loc-fleet-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 600;
    color: #3b82f6;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 5px;
    padding: 5px 12px; cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s;
  }
  .dash-loc-fleet-btn:hover {
    background: rgba(59,130,246,.15);
  }
  .dash-loc-actions {
    position: absolute; bottom: 10px; right: 10px; left: 10px;
    z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
  }
  .dash-loc-info-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 600;
    color: #1a8a7d;
    background: rgba(26,138,125,.08);
    border: 1px solid rgba(26,138,125,.2);
    border-radius: 5px;
    padding: 5px 12px; cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s;
    display: flex; align-items: center; gap: 4px;
  }
  .dash-loc-info-btn:hover { background: rgba(245,158,11,.15); }
  .dash-loc-info-btn.loading { opacity: .6; cursor: wait; }

  /* POI + Geofence info panel */
  .dash-geo-info {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .dash-geo-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 5px 0;
  }
  .dash-geo-row + .dash-geo-row { border-top: 1px solid var(--border); }
  .dash-geo-icon {
    width: 22px; height: 22px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0; margin-top: 1px;
  }
  .dash-geo-icon.poi { background: rgba(59,130,246,.1); color: #3b82f6; }
  .dash-geo-icon.zone-in { background: rgba(34,197,94,.1); color: #22c55e; }
  .dash-geo-icon.zone-out { background: rgba(245,158,11,.1); color: #f59e0b; }
  .dash-geo-icon.none { background: rgba(100,116,139,.08); color: var(--muted); }
  .dash-geo-text {
    font-size: 11px; color: var(--text); font-weight: 600;
    line-height: 1.4;
  }
  .dash-geo-sub {
    font-size: 9px; color: var(--muted); font-weight: 500;
    letter-spacing: .03em;
  }

  /* ════════════════════════════════════════════════════
     MAP STYLE CONTROL (shared across all Leaflet maps)
  ════════════════════════════════════════════════════ */
  .map-style-control {
    display: flex;
    background: var(--surface, #fff);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    overflow: hidden;
    border: 1px solid var(--border, rgba(0,0,0,.1));
  }
  .msc-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 28px;
    background: none; border: none; cursor: pointer;
    font-size: 13px; transition: background .15s;
    border-right: 1px solid var(--border, rgba(0,0,0,.08));
    opacity: .5;
  }
  .msc-btn:last-child { border-right: none; }
  .msc-btn:hover { background: var(--surface2, rgba(0,0,0,.04)); opacity: .8; }
  .msc-btn.active {
    background: var(--amber-bg, rgba(245,158,11,.1));
    opacity: 1;
  }

  /* ── Responsive: accum strip + location ── */
  @media (max-width: 860px) {
    .dash-loc-map-wrap { height: 180px; }
  }
  @media (max-width: 580px) {
    .dcc-accum-strip {
      grid-template-columns: repeat(2, 1fr);
    }
    .dcc-accum-strip .acell:nth-child(2) { border-left: 1px solid var(--border); }
    .dcc-accum-strip .acell:nth-child(3) { border-left: none; border-top: 1px solid var(--border); }
    .dcc-accum-strip .acell:nth-child(4) { border-top: 1px solid var(--border); }
    .dcc-accum-strip .acell .av { font-size: 18px; }
    .dash-loc-map-wrap { height: 180px; }
    .dash-loc-coord { font-size: 10px; }
  }
  @media (max-width: 480px) {
    .dash-loc-header { flex-direction: column; gap: 4px; align-items: flex-start; }
    .dash-loc-map-wrap { height: 160px; }
    .dcc-accum-strip .acell { padding: 10px 12px; }
    .dcc-accum-strip .acell .al { font-size: 8px; letter-spacing: .1em; }
    .dcc-accum-strip .acell .av { font-size: 16px; }
    .dcc-accum-strip .acell .as { font-size: 9px; }
  }

  /* Report device tabs */
  .report-dev-tabs {
    display: flex; gap: 0; flex-wrap: wrap;
    padding: 8px 0 0; margin-bottom: -1px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .report-dev-tab {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; padding: 6px 14px;
    border: 1px solid var(--border); border-bottom: none;
    background: var(--surface2); color: var(--muted); cursor: pointer;
    border-radius: 6px 6px 0 0; margin-right: 4px;
    transition: all .15s;
  }
  .report-dev-tab.active { background: var(--surface); color: var(--amber); border-color: var(--amber); }
  .report-dev-tab:hover:not(.active) { color: var(--text); }


  /* ════════════════════════════════════════════════════
     CACHED DATA BANNER
  ════════════════════════════════════════════════════ */
  .cached-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; margin-bottom: 10px;
    background: var(--amber-bg, rgba(251,191,36,.08));
    border: 1px solid var(--amber-border, rgba(251,191,36,.25));
    border-radius: 7px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 600; letter-spacing: .06em;
    color: var(--amber);
    animation: fadeIn .3s ease;
  }
  @keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } }
  .cached-banner svg { flex-shrink: 0; }
  .cached-banner .cb-dot {
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--amber); opacity: .7;
    animation: pulse-dot 1.4s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes pulse-dot { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }


  /* ════════════════════════════════════════════════════
     FLEET GROUP SELECTOR (dropdown tree)
  ════════════════════════════════════════════════════ */
  .fleet-group-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; margin-bottom: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px;
  }
  .fgb-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    font-weight: 700; letter-spacing: .1em; color: var(--amber);
    flex-shrink: 0;
  }
  .fgb-select-wrap { flex: 1; }
  .fgb-select {
    width: 100%; padding: 6px 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; font-weight: 600; cursor: pointer;
    outline: none; transition: border-color .15s;
  }
  .fgb-select:focus { border-color: var(--amber); }

  /* ════════════════════════════════════════════════════
     PER-PAGE DEVICE PICKER (chip row)
  ════════════════════════════════════════════════════ */
  .page-dev-picker {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px;
  }
  .pdp-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    font-weight: 700; letter-spacing: .12em; color: var(--muted);
    flex-shrink: 0;
  }
  .pdp-chips {
    display: flex; flex-wrap: wrap; gap: 6px; flex: 1;
  }
  .pdp-empty {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    color: var(--muted); padding: 4px 0;
  }
  .pdp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 20px;
    background: var(--surface2, rgba(0,0,0,.04));
    border: 1px solid var(--border);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    font-weight: 600; color: var(--text); cursor: pointer;
    transition: all .15s; white-space: nowrap;
  }
  .pdp-chip:hover {
    border-color: var(--amber); color: var(--amber);
  }
  .pdp-chip.active {
    background: var(--amber); border-color: var(--amber); color: #000;
  }
  .pdp-chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted); flex-shrink: 0;
  }
  .pdp-chip-dot.on { background: var(--green); box-shadow: 0 0 4px var(--green); }
  .pdp-chip.active .pdp-chip-dot.on { background: #000; box-shadow: none; }

  /* ════════════════════════════════════════════════════
     HIST SHOW DATA BUTTON
  ════════════════════════════════════════════════════ */
  .hist-show-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 14px;
    background: var(--amber); border: 1px solid var(--amber);
    color: #000; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    border-radius: 6px; cursor: pointer; transition: all .15s;
    white-space: nowrap;
  }
  .hist-show-btn:hover { filter: brightness(1.1); }
  .hist-show-btn:active { transform: translateY(1px); }
  .hist-show-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; }

  /* ════════════════════════════════════════════════════
     FLEET HEALTH SNAPSHOT (Report page)
  ════════════════════════════════════════════════════ */
  .fleet-health-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px; padding: 12px;
  }
  .fh-empty {
    grid-column: 1 / -1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    color: var(--muted); text-align: center; padding: 24px 0;
    letter-spacing: .06em;
  }
  .fh-card {
    background: var(--surface2, rgba(0,0,0,.04));
    border: 1px solid var(--border); border-left: 3px solid var(--muted);
    border-radius: 8px; padding: 12px; cursor: default;
    transition: border-color .15s;
  }
  .fh-card.online  { border-left-color: var(--green); }
  .fh-card.offline { border-left-color: var(--muted); opacity: .75; }
  .fh-card.warn    { border-left-color: var(--amber); }
  .fh-card.crit    { border-left-color: var(--red); }
  .fh-card:hover   { border-color: var(--amber); }
  .fh-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 8px;
  }
  .fh-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px;
    font-weight: 700; color: var(--text); letter-spacing: .04em;
  }
  .fh-imei {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    color: var(--muted); margin-top: 2px;
  }
  .fh-tag {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px;
    font-weight: 700; padding: 2px 6px; border-radius: 3px;
    letter-spacing: .08em; flex-shrink: 0;
  }
  .fh-tag.on  { background: var(--green-bg, rgba(34,197,94,.12)); color: var(--green); }
  .fh-tag.off { background: var(--surface3, rgba(0,0,0,.06)); color: var(--muted); }
  .fh-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px;
  }
  .fh-m {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 5px; padding: 6px 7px; text-align: center;
  }
  .fh-mlbl {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 7.5px;
    font-weight: 700; letter-spacing: .1em; color: var(--muted);
    text-transform: uppercase;
  }
  .fh-mval {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px;
    font-weight: 700; color: var(--text); margin-top: 2px;
  }
  .fh-mval.warn { color: var(--amber); }
  .fh-mval.crit { color: var(--red); }
  .fh-mval.dim  { color: var(--muted); }
  .fh-foot {
    display: flex; justify-content: space-between;
    margin-top: 8px; padding-top: 7px;
    border-top: 1px dashed var(--border);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    color: var(--muted);
  }
  .fh-status-line {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
  }
  .fh-acc-on  { color: var(--green); font-weight: 700; }
  .fh-acc-off { color: var(--muted); }


  /* ════════════════════════════════════════════════════
     HISTORY PAGE
  ════════════════════════════════════════════════════ */

  /* ── Filter bar ── */
  .hist-filter-bar {
    display: flex; align-items: flex-end; gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px;
  }
  .hist-filter-group { display: flex; flex-direction: column; gap: 5px; }
  .hist-filter-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700; letter-spacing: .12em;
    color: var(--muted); text-transform: uppercase;
  }
  .hist-filter-spacer { flex: 1; }
  .hist-status-txt {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; color: var(--muted);
    align-self: flex-end; padding-bottom: 2px;
  }

  .hist-dt-input, .hist-select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px;
    background: var(--surface2, rgba(0,0,0,.04));
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); padding: 6px 10px; cursor: pointer;
  }
  .hist-dt-input:focus, .hist-select:focus { outline: 1px solid var(--amber); }

  /* Unit checkboxes */
  .hist-unit-checks { display: flex; flex-direction: column; gap: 4px; max-height: 90px; overflow-y: auto; }
  .hist-check-item {
    display: flex; align-items: center; gap: 7px;
    cursor: pointer; padding: 3px 0;
  }
  .hist-check-item input { accent-color: var(--amber); width: 13px; height: 13px; cursor: pointer; }
  .hci-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .hci-dot.on  { background: var(--green); box-shadow: 0 0 4px var(--green); }
  .hci-dot.off { background: var(--muted); }
  .hci-name { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700; color: var(--text); }
  .hci-imei { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); }
  .hist-no-dev { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--muted); }

  /* Quick range buttons */
  .hist-quick-btns { display: flex; gap: 4px; }
  .hist-quick {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    padding: 5px 9px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--muted); letter-spacing: .04em; transition: all .12s;
  }
  .hist-quick.active, .hist-quick:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-bg); }

  /* Export buttons */
  .hist-export-group { display: flex; flex-direction: column; gap: 5px; }
  .hist-export-btns { display: flex; gap: 6px; }
  .hist-exp-btn {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; padding: 6px 12px; border-radius: 5px;
    border: 1px solid; cursor: pointer; transition: all .12s;
  }
  .hist-exp-btn.csv   { background: var(--green-bg);  color: var(--green);  border-color: var(--green-border, rgba(34,197,94,.3)); }
  .hist-exp-btn.excel { background: var(--blue-bg);   color: var(--blue);   border-color: var(--blue-border,  rgba(59,130,246,.3)); }
  .hist-exp-btn.pdf   { background: var(--red-bg);    color: var(--red);    border-color: var(--red-border,   rgba(239,68,68,.3)); }

  /* Column Visibility Dropdown */
  .colvis-wrap { position: relative; display: inline-block; }
  .hist-exp-btn.colvis { background: rgba(100,116,139,.12); color: var(--text); border-color: rgba(100,116,139,.3); }
  .colvis-dropdown {
    display: none; position: absolute; top: 100%; right: 0; z-index: 999;
    background: var(--bg2,#1e293b); border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 0; min-width: 210px; margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  .colvis-dropdown.show { display: block; }
  .colvis-item {
    display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--text);
    transition: background .1s;
  }
  .colvis-item:hover { background: rgba(255,255,255,.04); }
  .colvis-item.off { opacity: .45; }
  .colvis-item input[type=checkbox] { accent-color: var(--amber); width: 13px; height: 13px; }
  .colvis-divider { height: 1px; background: var(--border); margin: 4px 0; }
  .colvis-actions { display: flex; gap: 4px; padding: 4px 10px; }
  .colvis-actions button {
    flex: 1; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border);
    background: transparent; color: var(--muted); cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    letter-spacing: .06em;
  }
  .colvis-actions button:hover { background: rgba(255,255,255,.04); color: var(--text); }
  .hist-exp-btn:hover { filter: brightness(1.15); }

  /* ── Section headings ── */
  .hist-section-head {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: .12em; color: var(--muted);
    text-transform: uppercase; margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }

  /* ── Trend toggles ── */
  .trend-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
  .trend-toggle {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .06em; padding: 3px 9px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--muted); cursor: pointer; transition: all .12s;
  }
  .trend-toggle input { display: none; }
  .trend-toggle.active { border-color: currentColor; background: var(--surface); opacity: 1; }
  .trend-toggle:not(.active) { opacity: .55; }
  .tt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

  /* ── Trend cards grid ── */
  .trend-cards-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px; margin-bottom: 4px;
  }

  .trend-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px; overflow: hidden;
    transition: border-color .2s;
  }
  .trend-card:hover { border-color: var(--amber); }
  .trend-card.tc-crit { border-color: var(--red);    background: var(--red-bg); }
  .trend-card.tc-warn { border-color: var(--yellow);  }
  .trend-card.tc-empty, .trend-card.tc-idle { border-style: dashed; }

  .tc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .tc-label { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .tc-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    padding: 2px 7px; border-radius: 20px; letter-spacing: .04em;
  }
  .tc-badge.tc-up   { background: var(--green-bg); color: var(--green); }
  .tc-badge.tc-dn   { background: var(--red-bg);   color: var(--red); }
  .tc-badge.tc-flat { background: var(--surface2);  color: var(--muted); }

  .tc-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 28px;
    font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 8px;
  }
  .tc-unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }
  .tc-na   { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; color: var(--muted); margin-top: 8px; }

  .tc-spark { margin: 0 -14px; line-height: 0; }
  .tc-spark svg { width: 100%; height: 48px; }

  .tc-meta {
    display: flex; justify-content: space-between;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    color: var(--muted); margin-top: 6px; letter-spacing: .04em;
  }

  /* ── History table ── */
  .hist-table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; overflow: auto;
    max-height: calc(100vh - 400px); min-height: 200px;
  }
  .hist-table {
    width: 100%; border-collapse: collapse;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px;
    min-width: 900px;
  }
  .hist-table th {
    position: sticky; top: 0; z-index: 2;
    text-align: left; padding: 7px 10px;
    font-size: 9px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    background: var(--surface3, rgba(0,0,0,.04));
    border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .hist-table td {
    padding: 5px 10px; border-bottom: 1px solid var(--border);
    color: var(--text2); white-space: nowrap;
  }
  .hist-table tr:hover td { background: var(--surface2, rgba(0,0,0,.03)); }
  .hist-table tr:last-child td { border-bottom: none; }
  .htd-ts   { color: var(--muted); font-size: 10px; }
  .htd-coords { font-size: 10px; color: var(--blue); }
  /* Shared "empty table/list" state - used across 17+ tables app-wide (Site Map,
     Maintenance, Command Task, Users, Devices, POI, Geofence, History, ...), so
     one upgrade here keeps every one of them visually consistent for free. */
  .htd-empty { text-align: center; padding: 36px 24px; color: var(--muted); font-size: 12px; line-height: 1.7; }
  .htd-empty::before {
    content: '';
    display: block;
    width: 34px; height: 34px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background-color: var(--surface3, #eff1f4);
    border: 1px solid var(--border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v13H3V8'/%3E%3Cpath d='M1 3h22v5H1z'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
  }

  /* Type tags */
  .htag {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
  }
  .htag.modbus { background: var(--amber-bg); color: var(--amber); }
  .htag.gps    { background: var(--blue-bg);  color: var(--blue); }

  /* Value cells */
  .hv-ok   { color: var(--green);  font-weight: 600; }
  .hv-warn { color: var(--yellow); font-weight: 600; }
  .hv-crit { color: var(--red);    font-weight: 600; }
  .hv-dim  { color: var(--muted); }

  /* Pagination */
  .hist-page-ctrl { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .hist-page-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    padding: 4px 12px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface2); color: var(--muted);
    transition: all .12s;
  }
  .hist-page-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
  .hist-page-btn:disabled { opacity: .35; cursor: not-allowed; }
  .hist-page-info { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--muted); }

  .hist-empty {
    padding: 20px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; color: var(--muted); text-align: center;
    letter-spacing: .06em;
  }

  /* ════════════════════════════════════════════════════
     MODBUS HISTORY - Summary Stats + Timeline
  ════════════════════════════════════════════════════ */
  .hist-summary-row {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    margin-bottom: 14px;
  }
  .hist-sum-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 14px;
  }
  .hist-sum-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px;
    font-weight: 600; letter-spacing: .08em; color: var(--muted);
    margin-bottom: 4px;
  }
  .hist-sum-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 18px;
    font-weight: 700; color: var(--text);
  }
  @media (max-width: 860px) {
    .hist-summary-row { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 480px) {
    .hist-summary-row { grid-template-columns: repeat(2, 1fr); }
    .hist-sum-val { font-size: 14px; }
  }

  .hist-timeline-section { margin-bottom: 14px; }
  .hist-tl-legend {
    display: flex; gap: 12px; align-items: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted);
  }
  .htl-leg { display: flex; align-items: center; gap: 4px; }
  .htl-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
  .hist-timeline-bar {
    display: flex; height: 28px; border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface2, #f8fafc);
    margin-top: 6px;
  }
  .hist-timeline-bar .htl-seg {
    height: 100%; min-width: 2px; position: relative;
    transition: opacity .15s;
  }
  .hist-timeline-bar .htl-seg:hover { opacity: .7; }
  .hist-timeline-labels {
    display: flex; justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace; font-size: 8px;
    color: var(--dim); margin-top: 3px; padding: 0 2px;
  }


  /* ════════════════════════════════════════════════════
     GPS HISTORY PAGE
  ════════════════════════════════════════════════════ */

  /* Stats row */
  .gps-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px; margin-bottom: 12px;
  }
  .gps-stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px;
    transition: border-color .2s;
  }
  .gps-stat-card:hover { border-color: var(--blue); }
  .gps-stat-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px;
    font-weight: 700; letter-spacing: .12em; color: var(--muted);
    text-transform: uppercase; margin-bottom: 6px;
  }
  .gps-stat-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 22px;
    font-weight: 700; color: var(--text); line-height: 1;
  }

  /* Map container */
  .gps-map-outer {
    border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; margin-bottom: 4px;
  }

  /* Replay controls */
  .gps-replay-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--surface3, rgba(0,0,0,.04));
    border-bottom: 1px solid var(--border);
  }
  .gps-replay-btn {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--blue); color: #fff;
    border: none; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .gps-replay-btn:hover { background: var(--amber); }
  .gps-replay-slider-wrap { flex: 1; }
  .gps-replay-slider {
    width: 100%; accent-color: var(--blue); cursor: pointer;
  }
  .gps-replay-ts {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    color: var(--muted); white-space: nowrap; flex-shrink: 0;
  }
  .gps-replay-speed { display: flex; gap: 4px; flex-shrink: 0; }
  .gps-speed-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    padding: 3px 7px; border-radius: 3px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface2); color: var(--muted);
    transition: all .12s;
  }
  .gps-speed-btn.active { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }


  /* Settings panel collapsible */
  #col-settings { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  #col-settings.open { max-height: 200px; }


  /* ════════════════════════════════════════════════════
     ALERTS PAGE
  ════════════════════════════════════════════════════ */

  /* Coming soon banner */
  /* ════════════════════════════════════════════════════
     ALERT SYSTEM
  ════════════════════════════════════════════════════ */
  .alert-summary-row {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px; margin-bottom: 14px;
  }
  .alert-sum-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; text-align: center;
  }
  .alert-sum-card.critical { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.05); }
  .alert-sum-card.warn { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.05); }
  .alert-sum-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    letter-spacing: .08em; color: var(--muted); margin-bottom: 4px;
  }
  .alert-sum-val {
    font-size: 22px; font-weight: 800; color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .alert-sum-card.critical .alert-sum-val { color: var(--red); }

  .alert-tabs {
    display: flex; gap: 4px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border); padding-bottom: 0;
  }
  .alert-tab {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; padding: 8px 16px; border: none; background: none;
    cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent;
  }
  .alert-tab:hover { color: var(--text); }
  .alert-tab.active { color: var(--amber); border-bottom-color: var(--amber); }

  /* Alert cards */
  .alert-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 6px; border-radius: 8px;
    border-left: 4px solid var(--border); background: var(--surface);
  }
  .alert-card.sev-critical { border-left-color: #ef4444; background: rgba(239,68,68,.04); }
  .alert-card.sev-warning { border-left-color: #f59e0b; background: rgba(245,158,11,.04); }
  .alert-card.sev-info { border-left-color: #3b82f6; background: rgba(59,130,246,.04); }
  .alert-card-left { flex: 1; }
  .alert-card-sev {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .06em; margin-bottom: 2px;
  }
  .sev-critical .alert-card-sev { color: #ef4444; }
  .sev-warning .alert-card-sev { color: #f59e0b; }
  .alert-card-msg { font-size: 12px; font-weight: 700; color: var(--text); }
  .alert-card-meta {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; color: var(--muted); margin-top: 2px;
  }
  .alert-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .alert-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    padding: 5px 10px; border-radius: 4px; border: none; cursor: pointer;
    letter-spacing: .04em;
  }
  .alert-btn.ack { background: rgba(34,197,94,.12); color: #22c55e; }
  .alert-btn.ack:hover { background: rgba(34,197,94,.2); }
  .alert-btn.shutdown { background: rgba(239,68,68,.12); color: #ef4444; }
  .alert-btn.shutdown:hover { background: rgba(239,68,68,.25); }

  .alert-status-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    padding: 2px 7px; border-radius: 3px; letter-spacing: .06em;
  }
  .alert-status-badge.active { background: rgba(239,68,68,.12); color: #ef4444; }
  .alert-status-badge.ack { background: rgba(245,158,11,.12); color: #f59e0b; }
  .alert-status-badge.resolved { background: rgba(34,197,94,.12); color: #22c55e; }

  /* Rule cards */
  .rule-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 6px; border-radius: 8px;
    border-left: 3px solid var(--border); background: var(--surface);
  }
  .rule-card.sev-critical { border-left-color: #ef4444; }
  .rule-card.sev-warning { border-left-color: #f59e0b; }
  .rule-card.disabled { opacity: .4; }
  .rule-card-left { display: flex; align-items: center; gap: 10px; flex: 1; }
  .rule-toggle input { accent-color: var(--amber); width: 15px; height: 15px; }
  .rule-name { font-size: 12px; font-weight: 700; color: var(--text); }
  .rule-detail {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--muted);
    margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  }
  .rule-param { color: var(--blue); font-weight: 600; }
  .rule-cond { color: var(--amber); font-weight: 700; }
  .rule-sev { font-weight: 700; }
  .rule-target { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; color: var(--dim); margin-top: 2px; }
  .rule-action-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 7px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; letter-spacing: .06em;
  }
  .rule-action-badge.alert { background: rgba(59,130,246,.1); color: #3b82f6; }
  .rule-action-badge.shutdown { background: rgba(239,68,68,.12); color: #ef4444; }
  .rule-card-actions { display: flex; gap: 4px; }

  /* Maintenance cards */
  .maint-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px; margin-bottom: 8px;
  }
  .maint-card-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
  }
  .maint-card-name { font-size: 13px; font-weight: 700; color: var(--text); }
  .maint-card-interval {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--amber); font-weight: 700;
  }
  .maint-dev-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
  }
  .maint-dev-name { width: 140px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .maint-bar-wrap {
    flex: 1; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden;
  }
  .maint-bar { height: 100%; border-radius: 3px; transition: width .3s; }
  .maint-dev-hours { width: 70px; text-align: right; color: var(--muted); font-size: 9px; }

  /* Map Context Menu (right-click) */
  .map-ctx-menu {
    position: absolute; z-index: 1000;
    background: var(--bg2, #1e293b); border: 1px solid var(--border);
    border-radius: 8px; padding: 4px 0; min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .map-ctx-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; cursor: pointer; font-size: 11px;
    color: var(--text); transition: background .1s;
  }
  .map-ctx-item:hover { background: rgba(255,255,255,.06); }
  .map-ctx-item svg { width: 14px; height: 14px; stroke: var(--muted); }
  .map-ctx-divider { height: 1px; background: var(--border); margin: 2px 0; }
  .map-ctx-coords {
    padding: 4px 14px; font-size: 9px; color: var(--dim);
    font-family: 'IBM Plex Mono', monospace; letter-spacing: .02em;
  }

  /* Fleet Map Layer Toggle - collapsible FAB on mobile */
  .flt-layer-wrap {
    position: absolute; top: 10px; right: 10px; z-index: 800;
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  }
  .flt-layer-fab {
    display: none; /* hidden on desktop */
    width: 36px; height: 36px; border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--muted);
    cursor: pointer; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    transition: all .15s;
  }
  .flt-layer-fab:hover { color: var(--text); }
  .flt-layer-fab.active { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }

  .flt-layer-menu {
    display: flex; gap: 4px;
  }
  .flt-poi-btn {
    padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg2, #1e293b); color: var(--muted); cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    display: flex; align-items: center; gap: 4px; transition: all .15s;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
  }
  .flt-poi-btn:hover { background: rgba(255,255,255,.08); color: var(--text); }
  .flt-poi-btn.active { background: rgba(245,158,11,.15); color: var(--amber); border-color: var(--amber); }

  @media (max-width: 768px) {
    .flt-layer-fab { display: flex; }
    .flt-layer-menu {
      display: none; flex-direction: column; gap: 4px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 6px;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
      animation: layerMenuIn .15s ease-out;
    }
    .flt-layer-menu.show { display: flex; }
    @keyframes layerMenuIn { from { opacity:0; transform: translateY(-4px); } }
    .flt-poi-btn { box-shadow: none; font-size: 10px; padding: 8px 10px; }
    .flt-btn-label { display: inline; }
  }

  /* Device state legend (bottom-right of fleet map, above Leaflet attribution) */
  .flt-legend {
    position: absolute; bottom: 36px; right: 10px; z-index: 800;
    background: var(--bg2, rgba(15,23,42,.92)); backdrop-filter: blur(8px);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px; box-shadow: 0 4px 12px rgba(0,0,0,.4);
    min-width: 105px;
  }
  .flt-legend-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
  }
  .flt-legend-row {
    display: flex; align-items: center; gap: 7px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 600;
    color: var(--text); padding: 2px 0;
  }
  .flt-legend-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  @media (max-width: 768px) {
    .flt-legend { bottom: 90px; padding: 6px 8px; min-width: 90px; }
    .flt-legend-title { font-size: 7px; }
    .flt-legend-row { font-size: 8px; }
  }

  /* POI Icon Picker Grid */
  .poi-icon-grid {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  }
  .poi-icon-opt {
    width: 40px; height: 40px; border-radius: 6px; border: 1.5px solid var(--border);
    background: transparent; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: all .12s;
  }
  .poi-icon-opt:hover { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.3); }
  .poi-icon-opt.active { background: rgba(245,158,11,.12); border-color: var(--amber); box-shadow: 0 0 0 2px rgba(245,158,11,.15); }

  /* POI Fleet Checkboxes */
  .poi-fleet-wrap {
    display: flex; flex-direction: column; gap: 1px; padding: 6px 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    max-height: 120px; overflow-y: auto;
  }
  .poi-fleet-opt {
    display: flex; align-items: center; gap: 6px; padding: 3px 4px; cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--text);
    border-radius: 3px; transition: background .1s;
  }
  .poi-fleet-opt:hover { background: rgba(255,255,255,.04); }
  .poi-fleet-opt input[type=checkbox] { accent-color: var(--amber); width: 13px; height: 13px; }

  /* Get Location button in history tables */
  .hist-loc-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 600;
    padding: 3px 8px; border-radius: 4px; cursor: pointer;
    background: rgba(59,130,246,.1); color: #3b82f6; border: 1px solid rgba(59,130,246,.2);
    letter-spacing: .02em; transition: all .12s; white-space: nowrap;
  }
  .hist-loc-btn:hover { background: rgba(59,130,246,.2); }
  .hist-loc-btn:disabled { opacity: .5; cursor: wait; }

  /* Cached location label (after lookup) */
  .hist-loc-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600;
    color: #22c55e; padding: 2px 6px; border-radius: 3px;
    background: rgba(34,197,94,.08); white-space: nowrap;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis;
    display: inline-block; cursor: help;
  }

  /* Inline button in Lokasi column header */
  .hist-loc-hdr-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    padding: 3px 7px; border-radius: 4px; cursor: pointer;
    background: #3b82f6; color: white; border: none;
    letter-spacing: .04em; transition: all .12s; white-space: nowrap;
  }
  .hist-loc-hdr-btn:hover { background: #2563eb; transform: translateY(-1px); }
  .hist-loc-hdr-btn:disabled { opacity: .6; cursor: wait; }

  /* Geofence label on map */
  .gf-label {
    background: rgba(0,0,0,.6) !important; color: #fff !important; border: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 9px !important;
    font-weight: 700 !important; letter-spacing: .04em; padding: 2px 6px !important;
    border-radius: 3px !important; box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
  }
  .gf-label::before { border: none !important; }


  /* ════════════════════════════════════════════════════
     DEVICE MANAGER
  ════════════════════════════════════════════════════ */

  /* Tab bar */
  .dm-tab-bar {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px; padding-bottom: 0;
  }
  .dm-tab {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px;
    font-weight: 700; letter-spacing: .06em;
    padding: 8px 16px; border: none; background: none; cursor: pointer;
    color: var(--muted); border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: all .15s;
  }
  .dm-tab.active  { color: var(--amber); border-bottom-color: var(--amber); }
  .dm-tab:hover:not(.active) { color: var(--text); }

  /* Toolbar buttons */
  .dm-toolbar-btn {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; padding: 6px 14px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface2); color: var(--muted);
    cursor: pointer; transition: all .15s;
  }
  .dm-toolbar-btn:hover { border-color: var(--text); color: var(--text); }
  .dm-toolbar-btn.active {
    background: rgba(26,138,125,.12); border-color: #1a8a7d; color: #1a8a7d;
  }
  .dm-toolbar-btn.primary {
    background: var(--amber); color: #000; border-color: var(--amber);
  }
  .dm-toolbar-btn.primary:hover { background: #166466; border-color: #166466; }

  /* Table cells */
  .dm-dev-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; color: var(--text);
  }
  .dm-dev-imei {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: .06em; margin-top: 2px;
  }
  .dm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .dm-dot.on  { background: var(--green); box-shadow: 0 0 5px var(--green); }
  .dm-dot.off { background: var(--muted); }

  .dm-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    padding: 2px 8px; border-radius: 3px; letter-spacing: .06em;
  }
  .dm-badge.active   { background: var(--green-bg); color: var(--green); }
  .dm-badge.inactive { background: var(--red-bg);   color: var(--red); }

  .dm-proto-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    padding: 2px 8px; border-radius: 3px; letter-spacing: .06em;
    background: var(--amber-bg); color: var(--amber);
  }

  /* User role badges */
  .um-role-badge {
    display: inline-block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    padding: 2px 8px; border-radius: 3px; letter-spacing: .06em;
  }
  .um-role-badge.superadmin { background: rgba(239,68,68,.1);  color: #ef4444; }
  .um-role-badge.admin      { background: rgba(26,138,125,.1); color: #1a8a7d; }
  .um-role-badge.operator   { background: rgba(59,130,246,.1); color: #3b82f6; }
  .um-role-badge.viewer     { background: rgba(100,116,139,.1);color: #64748b; }
  .um-role-badge.custom     { background: rgba(245,158,11,.15); color: var(--amber); }

  .um-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; font-weight: 700; color: #94a3b8;
    flex-shrink: 0;
    border: 1px solid var(--border);
  }

  /* User Feature Permissions */
  .um-features-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px;
  }
  .um-feat-item {
    display: flex; align-items: center; gap: 6px; padding: 4px 6px; cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--text);
    border-radius: 4px; transition: background .1s;
  }
  .um-feat-item:hover { background: rgba(255,255,255,.04); }
  .um-feat-item input[type=checkbox] { accent-color: var(--amber); width: 13px; height: 13px; }
  .um-feat-divider {
    grid-column: 1 / -1; height: 1px; background: var(--border); margin: 2px 0;
  }
  /* Grid Akses Fitur mengikuti grup sidebar: judul grup, dan halaman yang
     terkunci (ikut role Admin/Superadmin, tidak bisa diberikan lewat Custom). */
  .um-feat-section {
    grid-column: 1 / -1; margin: 6px 0 1px; padding: 0 6px;
    font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted);
  }
  .um-feat-item--locked { cursor: not-allowed; color: var(--muted); }
  .um-feat-lock {
    margin-left: auto; padding: 1px 5px; border-radius: 3px;
    font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: rgba(107,114,128,.15); color: var(--muted);
  }

  /* Locked state - when role-driven features (not custom) */
  .um-features-grid.um-features-locked {
    opacity: .55; pointer-events: none;
    background: rgba(107,114,128,.05);
  }
  .um-features-grid.um-features-locked .um-feat-item { cursor: not-allowed; }

  /* Element with restricted action - visible but disabled with hint */
  .action-disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(.6);
  }
  .action-disabled::after {
    content: ' '; display: inline-block;
  }

  /* Badge beside "Akses Fitur" label */
  .um-feat-badge {
    display: inline-block; margin-left: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    padding: 2px 7px; border-radius: 3px; letter-spacing: .06em;
    background: rgba(107,114,128,.15); color: var(--muted);
    text-transform: uppercase; vertical-align: middle;
  }
  .um-feat-badge.custom {
    background: rgba(245,158,11,.15); color: var(--amber);
  }
  .um-feat-badge.super {
    background: rgba(34,197,94,.15); color: #22c55e;
  }

  /* Dynamic Dashboard - ALC700 V1 layout */
  #dash-dynamic-grid {
    /* No longer a grid itself - child elements handle their own grids */
  }
  .dcc-cat-header {
    padding: 6px 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
  }
  .dcc-dynamic {
    min-height: 60px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .dcc-dynamic .dcc-pc-label {
    font-size: 7px !important; letter-spacing: .06em; margin-bottom: 2px;
  }
  .dcc-dynamic .dcc-pc-val {
    font-size: 18px !important;
  }
  .dcc-dynamic .dcc-pc-val .unit {
    font-size: 10px; color: var(--muted); margin-left: 2px;
  }
  .dcc-dynamic.st-ok   { background: rgba(34,197,94,.04); }
  .dcc-dynamic.st-warn { background: rgba(245,158,11,.04); }
  .dcc-dynamic.st-crit { background: rgba(239,68,68,.06); }
  .dcc-dynamic.nodata  .dcc-pc-val { color: var(--dim) !important; }

  /* Fleet cards */
  .fm-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px; margin-top: 10px;
  }

  /* Display Config */
  .dc-template-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px; margin-top: 8px;
  }
  .dc-tpl-card {
    padding: 14px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid var(--border); background: var(--surface);
    transition: all .15s; text-align: left;
  }
  .dc-tpl-card:hover { border-color: var(--amber); }
  .dc-tpl-card.active { border-color: var(--amber); background: var(--amber-bg); }
  .dc-tpl-icon { font-size: 22px; margin-bottom: 6px; }
  .dc-tpl-name { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; color: var(--text); }
  .dc-tpl-desc { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
  .dc-tpl-count { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--amber); font-weight: 700; margin-top: 6px; }

  .dc-cat-head {
    display: flex; align-items: center; gap: 6px;
    margin: 12px 0 6px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
  }
  .dc-cat-dot { width: 8px; height: 8px; border-radius: 2px; }
  .dc-param-row {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px;
  }
  .dc-param-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: 6px; cursor: pointer;
    border: 1px solid transparent; transition: all .1s;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px;
  }
  .dc-param-item.on { background: var(--surface2); border-color: var(--border); }
  .dc-param-item.off { opacity: .45; }
  .dc-param-item:hover { border-color: var(--border); }

  .dc-preview-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px; margin-top: 8px;
  }
  .dc-preview-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px;
  }
  .dc-pv-label { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
  .dc-pv-val { font-size: 20px; font-weight: 800; color: var(--text); }
  .fm-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; transition: box-shadow .15s;
  }
  .fm-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
  .fm-card-head {
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
  }
  .fm-card-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--amber-bg, rgba(245,158,11,.08));
    display: flex; align-items: center; justify-content: center;
    color: var(--amber); flex-shrink: 0;
  }
  .fm-card-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px;
    font-weight: 700; color: var(--text); letter-spacing: .02em;
  }
  .fm-card-desc {
    font-size: 10px; color: var(--muted); margin-top: 2px;
  }
  .fm-card-stats {
    display: flex; gap: 0; border-bottom: 1px solid var(--border);
  }
  .fm-card-stat {
    flex: 1; padding: 10px 14px; text-align: center;
    border-right: 1px solid var(--border);
  }
  .fm-card-stat:last-child { border-right: none; }
  .fm-stat-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 18px;
    font-weight: 700; color: var(--text);
  }
  .fm-stat-label {
    font-size: 8px; font-weight: 600; color: var(--muted);
    letter-spacing: .08em; margin-top: 2px;
  }
  .fm-card-devices {
    padding: 8px 12px; max-height: 120px; overflow-y: auto;
  }
  .fm-dev-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 11px;
    border-bottom: 1px solid var(--border);
  }
  .fm-dev-row:last-child { border-bottom: none; }
  .fm-dev-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  }
  .fm-dev-dot.on { background: var(--green); box-shadow: 0 0 4px var(--green); }
  .fm-dev-dot.off { background: var(--muted); }
  .fm-card-actions {
    padding: 10px 14px; border-top: 1px solid var(--border);
    display: flex; gap: 6px; justify-content: flex-end;
  }
  .fm-no-devices {
    padding: 12px; text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; color: var(--dim);
  }
  @media (max-width: 480px) {
    .fm-grid { grid-template-columns: 1fr; }
  }

  /* Action buttons */
  .dm-action-btn {
    border: 1px solid var(--border); background: var(--surface2);
    border-radius: 5px; padding: 4px 8px; cursor: pointer;
    font-size: 12px; transition: all .12s;
  }
  .dm-action-btn:hover         { border-color: var(--amber); background: var(--amber-bg); }
  .dm-action-btn.approve       { font-size: 11px; font-family: 'IBM Plex Mono',monospace; font-weight:700; color: var(--green); border-color: var(--green-border, rgba(34,197,94,.3)); background: var(--green-bg); padding: 4px 10px; }
  .dm-action-btn.approve:hover { background: var(--green); color: #fff; }

  .dm-row-inactive td { opacity: .55; }

  /* Modal */
  .dm-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 1200;
    backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
  }
  .dm-modal-overlay.show { display: flex; }

  .dm-modal-box, .dm-modal {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; width: min(640px, 94vw);
    box-shadow: 0 24px 60px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.15);
    display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
    animation: modalIn .18s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes modalIn { from { opacity:0; transform: scale(.95) translateY(10px); } }

  .dm-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    background: var(--surface3, rgba(0,0,0,.03)); flex-shrink: 0;
  }
  .dm-modal-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px;
    font-weight: 700; letter-spacing: .06em; color: var(--text);
  }
  .dm-modal-body   { padding: 20px; overflow-y: auto; flex: 1; }
  .dm-modal-foot   { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
  .dm-modal-err    { font-family: 'IBM Plex Mono',monospace; font-size: 11px; color: var(--red); margin-top: 10px; min-height: 16px; }

  /* Form */
  .dm-form-row   { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
  .dm-form-group { display: flex; flex-direction: column; gap: 5px; min-width: 140px; margin-bottom: 2px; }
  .dm-form-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .08em; color: var(--text); text-transform: uppercase; opacity: .7;
  }
  .dm-required { color: var(--red); }

  /* Section divider for grouping fields in Device modal */
  .dm-section-divider {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
    margin: 18px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
  }
  .dm-optional {
    font-size: 9px; font-weight: 500; color: var(--muted);
    text-transform: none; letter-spacing: 0;
    font-style: italic;
  }
  .dm-form-input {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px;
    background: var(--surface2, rgba(0,0,0,.04));
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); padding: 8px 12px;
    transition: border-color .15s;
  }
  .dm-form-input:focus  { outline: none; border-color: var(--amber); }
  .dm-form-input::placeholder { color: var(--muted); }
  .dm-form-hint { font-family: 'IBM Plex Mono',monospace; font-size: 9px; color: var(--muted); }

  /* Modal buttons */
  .dm-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; padding: 9px 22px; border-radius: 6px;
    border: 1px solid; cursor: pointer; transition: all .15s;
  }
  .dm-btn.primary   { background: #1a8a7d; color: #fff; border-color: #1a8a7d; }
  .dm-btn.primary:hover { background: #166466; border-color: #166466; }
  .dm-btn.primary:disabled { opacity:.5; cursor:not-allowed; }
  .dm-btn.secondary { background: var(--surface2); color: var(--muted); border-color: var(--border); }
  .dm-btn.secondary:hover { color: var(--text); border-color: var(--text); }

  @media (max-width: 640px) {
    .dm-form-row { flex-direction: column; }
    .dm-toolbar-btn span:last-child { display: none; }
  }

  /* ════════════════════════════════════════════════════
     ROLE-BASED ACCESS - CSS visibility rules
  ════════════════════════════════════════════════════ */
  /* NOTE: Viewer/Operator restrictions are now handled by JS applyActionVisibility()
     based on data-action attributes. CSS rules below are kept ONLY for elements
     that don't have JS-based action control yet. */

  /* Role indicator in sidebar */
  .sidebar-role {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 8px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px;
    margin-top: 3px; display: inline-block;
  }
  .sidebar-role.superadmin { background: rgba(239,68,68,.12); color: #ef4444; }
  .sidebar-role.admin      { background: rgba(26,138,125,.12); color: #1a8a7d; }
  .sidebar-role.operator   { background: rgba(59,130,246,.12); color: #3b82f6; }
  .sidebar-role.viewer     { background: rgba(100,116,139,.12); color: #94a3b8; }

  /* ═══════════════════════════════════════════════════════════════════════
     POLLING CONFIG PAGE
  ═══════════════════════════════════════════════════════════════════════ */

  /* ── Protocol Tabs (redesigned: high contrast, no nyaru) ─────────────── */
  .pcfg-proto-tabs-wrap {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 16px;
  }
  .pcfg-proto-tab {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px;
    font-weight: 700; letter-spacing: .06em;
    padding: 8px 18px; border-radius: 7px;
    /* Same pill shape/border as .active below (just neutral color) so the
       resting tabs read as "one tab set, two states" instead of two
       different-looking components (transparent bg/border used to make
       inactive tabs disappear into the bar entirely). */
    background: var(--surface2, rgba(148,163,184,.06)); color: var(--muted);
    border: 1px solid var(--border);
    cursor: pointer; transition: all .15s ease;
    text-transform: uppercase;
  }
  .pcfg-proto-tab:hover {
    background: rgba(148,163,184,.14); color: var(--text); border-color: var(--border2);
  }
  .pcfg-proto-tab.active {
    background: var(--amber); color: #ffffff;
    border-color: var(--amber);
    box-shadow: 0 2px 8px rgba(26,138,125,.25);
  }
  .pcfg-proto-tab.active:hover {
    background: var(--amber); color: #ffffff;
  }
  .pcfg-proto-tab-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #cbd5e1; transition: all .15s;
  }
  .pcfg-proto-tab.active .pcfg-proto-tab-dot {
    background: #ffffff; box-shadow: 0 0 6px rgba(255,255,255,.6);
  }

  /* ── Reload Settingan button ─────────────────────────────────────────── */
  .pcfg-reload-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 5px;
    background: rgba(59,130,246,.1); color: #3b82f6;
    border: 1px solid rgba(59,130,246,.3);
    cursor: pointer; transition: all .12s;
  }
  .pcfg-reload-btn:hover {
    background: rgba(59,130,246,.18); transform: translateY(-1px);
  }
  .pcfg-reload-btn:active { transform: translateY(0); }
  .pcfg-reload-btn:disabled { opacity: .5; cursor: wait; }
  .pcfg-reload-btn svg { transition: transform .4s; }
  .pcfg-reload-btn:hover svg { transform: rotate(-90deg); }

  .pcfg-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px;
  }
  .pcfg-card-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
  }
  .pcfg-card-head .pcfg-reload-btn {
    margin-left: auto;  /* push reload button to the right */
  }
  .pcfg-card-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: .04em; color: var(--text);
  }
  .pcfg-card-sub {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .06em; color: var(--accent); text-transform: uppercase;
    background: rgba(59,130,246,.08); padding: 2px 8px; border-radius: 4px;
  }
  .pcfg-override-badge { background: rgba(26,138,125,.1) !important; color: #1a8a7d !important; }
  .pcfg-card-desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--muted);
    line-height: 1.5; margin-bottom: 14px;
  }

  .pcfg-job {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
  }
  .pcfg-job.disabled { opacity: .45; }
  .pcfg-job-toggle {
    width: 36px; height: 20px; border-radius: 10px; background: var(--border); cursor: pointer;
    position: relative; transition: background .2s; border: none; padding: 0; flex-shrink: 0;
  }
  .pcfg-job-toggle.on { background: #22c55e; }
  .pcfg-job-toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  }
  .pcfg-job-toggle.on::after { transform: translateX(16px); }

  .pcfg-job-info { flex: 1; min-width: 0; }
  .pcfg-job-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--text); letter-spacing: .03em;
  }
  .pcfg-job-meta {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; color: var(--muted);
    letter-spacing: .02em; margin-top: 2px;
  }
  .pcfg-job-interval {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  }
  .pcfg-slider {
    width: 100px; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--border); border-radius: 2px; outline: none;
  }
  .pcfg-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }
  .pcfg-interval-val {
    font-family: 'Source Code Pro', monospace; font-size: 10px; font-weight: 700;
    color: var(--accent); min-width: 50px; text-align: right;
  }
  .pcfg-interval-input {
    width: 52px; padding: 2px 4px; border: 1px solid var(--border);
    border-radius: 4px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; color: var(--text); text-align: center;
    background: var(--surface);
  }
  .pcfg-interval-input:focus { border-color: var(--accent); outline: none; }
  .pcfg-interval-input::-webkit-inner-spin-button { opacity: 1; }

  .pcfg-delay-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; margin-top: 8px;
  }
  .pcfg-delay-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    color: var(--muted); letter-spacing: .04em;
  }
  .pcfg-delay-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700;
    color: var(--text); min-width: 50px; text-align: right;
  }

  @media (max-width: 900px) {
    #page-poll-config > div:last-child { grid-template-columns: 1fr !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     NAVIGATE PAGE - Route to device (page-section, not overlay)
  ═══════════════════════════════════════════════════════════════════════ */
  #page-navigate {
    flex-direction: column;
    height: calc(100vh - var(--topbar-h));
    overflow: hidden;
  }
  #page-navigate.active {
    display: flex;
  }
  .nav-route-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
    gap: 12px; flex-shrink: 0; z-index: 10;
  }
  .nav-route-left {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  }
  .nav-route-back {
    background: none; border: 1px solid var(--border); border-radius: 8px;
    padding: 6px; cursor: pointer; color: var(--text); display: flex;
    align-items: center; justify-content: center;
  }
  .nav-route-back:hover { background: var(--surface2); }
  .nav-route-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
  }
  .nav-route-device {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--text); letter-spacing: .02em;
  }
  .nav-route-center { flex: 1; text-align: center; }
  .nav-route-stats {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 600;
    color: var(--text); display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .nav-route-coord {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted);
    margin-top: 2px;
  }
  .nav-stat-icon { font-size: 14px; }
  .nav-stat-svg {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--accent); vertical-align: -2px;
    margin-right: 2px;
  }
  .nav-stat-sub {
    opacity: .55; font-size: 10px; font-weight: 500; margin-left: 4px;
  }
  .nav-stat-fail {
    color: var(--red, #dc2626); font-size: 11px; font-weight: 600;
  }

  /* ── Persistent OSM warning banner - clean pill ── */
  .nav-warning-banner {
    display: none;
    align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    background: rgba(245,158,11,.08);
    border-bottom: 1px solid rgba(245,158,11,.25);
    color: var(--text);
    flex-shrink: 0;
  }
  .nav-warning-banner > svg {
    color: #d97706; margin-top: 1px;
  }
  .nav-warning-text {
    flex: 1;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 12px; line-height: 1.45;
    color: var(--text);
  }
  .nav-warning-text strong { color: #b45309; font-weight: 700; }
  .nav-warning-dismiss {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 14px; line-height: 1;
    padding: 2px 6px; border-radius: 4px;
    flex-shrink: 0;
  }
  .nav-warning-dismiss:hover { background: rgba(0,0,0,.06); color: var(--text); }

  /* ── Contextual route warning (close/detour/failed) - minimal ── */
  .nav-route-warning {
    display: none;
    align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(59,130,246,.06);
    border-bottom: 1px solid rgba(59,130,246,.18);
    color: var(--text); flex-shrink: 0;
  }
  .nav-route-warning > svg { color: #3b82f6; flex-shrink: 0; }
  .nav-route-warning-text {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 11px; line-height: 1.4; color: var(--muted);
  }
  .nav-route-right { flex-shrink: 0; }
  .nav-route-detail { display: flex; gap: 8px; }
  .nav-route-pill {
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 12px; text-align: center;
  }
  .nav-pill-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
    display: block; margin-bottom: 2px;
  }
  .nav-pill-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700;
    color: var(--accent);
  }
  .nav-route-map { flex: 1; width: 100%; min-height: 0; }
  .nav-route-actions {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .nav-action-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 600;
    padding: 8px 18px; border-radius: 8px; cursor: pointer; border: none;
    display: flex; align-items: center; gap: 6px; transition: all .15s;
  }
  .nav-action-btn.gmaps { background: #22c55e; color: #fff; }
  .nav-action-btn.gmaps:hover { background: #16a34a; }
  .nav-action-btn.copy { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
  .nav-action-btn.copy:hover { border-color: var(--text); }
  .nav-action-btn.close-btn { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
  .nav-action-btn.close-btn:hover { color: var(--text); border-color: var(--text); }

  .dash-loc-nav-btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 600;
    color: #22c55e; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2);
    border-radius: 5px; padding: 5px 12px; cursor: pointer;
    backdrop-filter: blur(4px); transition: background .15s;
    display: flex; align-items: center; gap: 4px;
  }
  .dash-loc-nav-btn:hover { background: rgba(34,197,94,.15); }

  .nav-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%; animation: cerSpin .8s linear infinite;
    vertical-align: middle;
  }
  .nav-zone-label {
    background: rgba(0,0,0,.6) !important; color: #fff !important;
    border: none !important; font-size: 10px !important; font-weight: 600 !important;
    padding: 2px 8px !important; border-radius: 4px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    box-shadow: none !important;
  }

  /* User direction cone */
  .nav-user-cone { background: none !important; border: none !important; }
  .nav-cone-inner {
    width: 60px; height: 60px; position: relative;
    transition: transform .15s ease-out;
  }
  .nav-cone-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 28px solid rgba(59,130,246,.2);
    filter: blur(1px);
  }
  .nav-cone-inner::after {
    content: '';
    position: absolute;
    top: 2px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 22px solid rgba(59,130,246,.35);
  }

  @media (max-width: 768px) {
    #page-navigate { height: calc(100vh - var(--topbar-h) - 58px); }
    .nav-route-header { flex-direction: column; gap: 8px; align-items: flex-start; padding: 10px 14px; }
    .nav-route-center { text-align: left; width: 100%; }
    .nav-route-stats { justify-content: flex-start; }
    .nav-route-detail { width: 100%; }
    .nav-route-actions { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
    .nav-action-btn { flex: 1; min-width: 0; padding: 8px 10px; font-size: 10px; justify-content: center; }

    /* Banner kompak di mobile */
    .nav-warning-banner { padding: 8px 12px; gap: 8px; }
    .nav-warning-text { font-size: 11px; line-height: 1.4; }
    .nav-route-warning { padding: 6px 12px; }
    .nav-route-warning-text { font-size: 10.5px; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     ALERTS FILTER BAR & CLICKABLE CARDS
  ═══════════════════════════════════════════════════════════════════════ */
  .alert-sum-card.clickable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
  .alert-sum-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
  .alert-sum-card.clickable:active { transform: translateY(0); }

  .alert-filter-bar {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px;
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 12px;
  }
  .alert-filter-bar .flt-group {
    display: flex; flex-direction: column; gap: 3px;
  }
  .alert-filter-bar .flt-group label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
  }
  .alert-filter-bar input, .alert-filter-bar select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px;
    padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); min-width: 110px;
  }
  .alert-filter-bar input[type="date"] { min-width: 130px; }
  .alert-filter-bar input:focus, .alert-filter-bar select:focus {
    outline: none; border-color: var(--accent);
  }
  .alert-filter-bar .flt-result {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; color: var(--muted);
    padding: 6px 10px; border-radius: 4px; background: var(--bg);
    border: 1px solid var(--border);
  }
  .alert-filter-bar .flt-result strong { color: var(--accent); }

  @media (max-width: 768px) {
    .alert-filter-bar { padding: 10px; }
    .alert-filter-bar .flt-group { flex: 1 1 45%; min-width: 0; }
    .alert-filter-bar input, .alert-filter-bar select { min-width: 0; width: 100%; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     MAINTENANCE PAGE
  ═══════════════════════════════════════════════════════════════════════ */
  /* Protocol filter tabs within Schedules panel */
  .mtn-proto-tabs {
    display: flex; gap: 4px; margin-bottom: 10px;
    padding: 4px; background: var(--bg); border-radius: 8px;
    border: 1px solid var(--border); width: fit-content;
  }
  .mtn-proto-tab {
    padding: 8px 18px; border-radius: 6px; border: 1px solid transparent;
    background: transparent; color: var(--text); cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; transition: all .15s;
  }
  .mtn-proto-tab:hover { background: rgba(255,255,255,.06); border-color: var(--border); }
  .mtn-proto-tab.active {
    background: var(--accent, #1a8a7d); color: white;
    box-shadow: 0 2px 6px rgba(245,158,11,.3);
  }

  /* Scope badge */
  .mtn-badge {
    display: inline-block; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 8px; font-weight: 700; letter-spacing: .08em;
    padding: 2px 6px; border-radius: 3px; text-transform: uppercase;
  }
  .mtn-badge.proto { background: rgba(99,102,241,.15); color: #818cf8; }
  .mtn-badge.device { background: rgba(245,158,11,.15); color: var(--amber); }

  /* Enable/disable status */
  .mtn-status {
    display: inline-block; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 3px;
  }
  .mtn-status.enabled { background: rgba(34,197,94,.15); color: #22c55e; }
  .mtn-status.disabled { background: rgba(107,114,128,.15); color: var(--muted); }

  /* Sidebar nav badge for due count */
  .nav-badge {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #ef4444; color: white; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; box-shadow: 0 0 0 2px var(--sidebar-bg, #0f172a);
  }

  /* ═══════════════════════════════════════════════════════════════════════
     DEBUG LOG - Stats Row + Filter Bar + Frame List + Hex Viewer
  ═══════════════════════════════════════════════════════════════════════ */

  /* ── Stats cards row ───────────────────────────────────────────────── */
  .dbg-stats-row {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    margin-bottom: 14px;
  }
  .dbg-stat-card {
    padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface);
  }
  .dbg-stat-card.err { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.04); }
  .dbg-stat-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 4px;
  }
  .dbg-stat-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 700;
    color: var(--text);
  }
  .dbg-stat-card.err .dbg-stat-val { color: #ef4444; }
  @media (max-width: 768px) {
    .dbg-stats-row { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── Filter bar ────────────────────────────────────────────────────── */
  .dbg-filter-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
    padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 10px;
  }
  .dbg-filter-bar .flt-group { display: flex; flex-direction: column; gap: 3px; }
  .dbg-filter-bar .flt-group label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
  }
  .dbg-filter-bar input, .dbg-filter-bar select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px;
    padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); min-width: 130px;
  }
  .dbg-filter-bar input:focus, .dbg-filter-bar select:focus {
    outline: none; border-color: var(--accent);
  }

  /* ── Log wrapper ───────────────────────────────────────────────────── */
  .dbg-log-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden;
  }
  .dbg-log-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: var(--bg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 700; color: var(--text);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .dbg-log-head .report-count {
    margin-left: auto; color: var(--muted); font-weight: 600; font-size: 9px;
  }
  .dbg-log-inner {
    height: 520px; overflow-y: auto; padding: 4px 0;
    background: var(--bg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  /* ── Frame line ────────────────────────────────────────────────────── */
  .dbg-line {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 5px 14px; font-size: 11px; color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,.03);
    cursor: pointer; transition: background .1s;
  }
  .dbg-line:hover { background: rgba(255,255,255,.04); }

  /* Error frames */
  .dbg-line.dbg-err { border-left: 2px solid #ef4444; background: rgba(239,68,68,.04); }
  .dbg-line.dbg-err:hover { background: rgba(239,68,68,.08); }
  .dbg-err-label {
    background: #ef4444; color: white; padding: 1px 5px; border-radius: 3px;
    font-size: 8px; font-weight: 700; letter-spacing: .08em; margin-right: 4px;
  }

  /* Paired (req↔resp) group */
  .dbg-line.dbg-pair {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0; border-left: 2px solid #3b82f6;
    margin: 4px 0; border-radius: 4px; overflow: hidden;
  }
  .dbg-line.dbg-pair.dbg-err { border-left-color: #ef4444; }
  .dbg-line-sub {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 14px; cursor: pointer;
    border-bottom: 1px dashed rgba(255,255,255,.04);
  }
  .dbg-line-sub:last-child { border-bottom: none; }
  .dbg-line-sub:hover { background: rgba(255,255,255,.04); }

  /* Latency badge */
  .dbg-latency {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(34,197,94,.15); color: #22c55e;
  }
  .dbg-latency.slow { background: rgba(245,158,11,.15); color: var(--amber); }

  /* Ignition badges (GPS) */
  .dbg-ign {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; letter-spacing: .06em;
  }
  .dbg-ign.on { background: rgba(34,197,94,.15); color: #22c55e; }
  .dbg-ign.off { background: rgba(107,114,128,.15); color: var(--muted); }

  /* Reuse lts/ldir/lcodec/lmsg from existing .logline styles */

  /* ═══════════════════════════════════════════════════════════════════════
     HEX VIEWER MODAL
  ═══════════════════════════════════════════════════════════════════════ */
  .dbg-hex-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px;
    padding: 10px 12px; background: var(--bg); border-radius: 6px;
    border: 1px solid var(--border);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text);
    margin-bottom: 12px;
  }
  .dbg-hex-meta strong { color: var(--muted); font-weight: 600; margin-right: 4px; }
  .dbg-hex-meta code {
    background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 3px;
    color: var(--amber);
  }

  .dbg-hex-section-label,
  .dbg-hex-parsed-label {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
    margin: 14px 0 6px; padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }

  .dbg-hex-dump {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.5;
    background: #0f172a; color: #e2e8f0;
    padding: 10px 14px; border-radius: 6px; border: 1px solid var(--border);
    max-height: 280px; overflow: auto; margin: 0;
    white-space: pre;
  }
  .dbg-hex-off { color: #64748b; user-select: none; }
  .dbg-hex-bytes { color: #22c55e; }
  .dbg-hex-ascii { color: #1a8a7d; }

  .dbg-hex-table {
    width: 100%; border-collapse: collapse;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  }
  .dbg-hex-table td {
    padding: 4px 8px; border-bottom: 1px solid var(--border);
    vertical-align: top;
  }
  .dbg-hex-k {
    color: var(--muted); font-weight: 600;
    width: 30%; white-space: nowrap;
  }
  .dbg-hex-v { color: var(--text); }
  .dbg-hex-v code {
    background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 3px;
    word-break: break-all; display: inline-block; max-width: 100%;
    color: var(--amber);
  }

  @media (max-width: 640px) {
    .dbg-hex-meta { grid-template-columns: 1fr; }
    .dbg-hex-dump { font-size: 10px; }
    .dbg-filter-bar .flt-group { flex: 1 1 45%; }
    .dbg-filter-bar input, .dbg-filter-bar select { min-width: 0; width: 100%; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     ORGANIZATION MANAGER
  ═══════════════════════════════════════════════════════════════════════ */
  .org-count-badge {
    display: inline-block; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    letter-spacing: .04em;
  }
  .org-count-badge.fleets  { background: rgba(99,102,241,.15);  color: #818cf8; }
  .org-count-badge.users   { background: rgba(14,165,233,.15);  color: #38bdf8; }
  .org-count-badge.devices { background: rgba(245,158,11,.15);  color: var(--amber); }

  /* Detail modal sections */
  .org-detail-info {
    padding: 12px 14px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; margin-bottom: 14px;
  }
  .org-detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 12px;
  }
  .org-detail-row span {
    color: var(--muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  }
  .org-detail-row strong { color: var(--text); font-weight: 600; }

  .org-detail-section-head {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
    margin: 16px 0 6px; padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }

  /* ═══════════════════════════════════════════════════════════════════════
     GEOFENCE - Bulk select
  ═══════════════════════════════════════════════════════════════════════ */
  .gf-bulk-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; margin-bottom: 8px; border-radius: 6px;
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; color: var(--text);
  }
  .gf-bulk-bar strong { color: var(--amber); }
  .gf-row-selected { background: rgba(245,158,11,.06); }
  .gf-row-selected td:first-child { border-left: 3px solid var(--amber); }

  /* Danger button variant for bulk delete */
  .dm-btn.danger {
    background: #ef4444; color: white; border: 1px solid #dc2626;
  }
  .dm-btn.danger:hover { background: #dc2626; }

  /* ═══════════════════════════════════════════════════════════════════════
     REPORT GENERATOR
  ═══════════════════════════════════════════════════════════════════════ */

  /* ── Filter bar ────────────────────────────────────────────────────── */
  .rg-filter-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 14px;
  }
  .rg-filter-group {
    display: flex; flex-direction: column; gap: 4px; min-width: 130px;
  }
  .rg-filter-group label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
  }
  .rg-filter-group select,
  .rg-filter-group input {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px;
    padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text);
  }
  .rg-filter-group select:focus,
  .rg-filter-group input:focus { outline: none; border-color: var(--accent); }
  .rg-filter-actions { align-self: flex-end; }
  .rg-filter-actions .dm-btn { height: 34px; }
  @media (max-width: 768px) {
    .rg-filter-group { flex: 1 1 45%; min-width: 0; }
  }

  /* ── Type description ──────────────────────────────────────────────── */
  .rg-type-desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px;
    color: var(--muted); line-height: 1.6;
    padding: 8px 14px; margin-bottom: 14px;
    background: rgba(245,158,11,.04); border-left: 3px solid var(--amber);
    border-radius: 0 6px 6px 0;
  }

  /* ── Chart area ────────────────────────────────────────────────────── */
  .rg-chart-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; margin-bottom: 14px;
  }
  .rg-chart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .rg-chart-head > span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--text); letter-spacing: .04em; text-transform: uppercase;
  }
  .rg-chart-container {
    position: relative; padding: 12px 14px;
    height: 360px; min-height: 280px;
    max-height: 400px;
  }
  .rg-chart-container canvas {
    max-height: 100% !important;
    max-width: 100% !important;
  }
  @media (max-width: 768px) {
    .rg-chart-container { height: 260px; max-height: 280px; }
  }

  /* ── Summary cards ─────────────────────────────────────────────────── */
  .rg-summary-row {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 14px;
  }
  .rg-summary-card {
    padding: 12px 14px; border-radius: 8px;
    background: var(--surface); border: 1px solid var(--border);
    transition: border-color .15s;
  }
  .rg-summary-card:hover { border-color: rgba(245,158,11,.3); }
  .rg-summary-card.warn { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.04); }
  .rg-summary-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 4px;
  }
  .rg-summary-val {
    font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 700;
    color: var(--text);
  }
  .rg-summary-card.warn .rg-summary-val { color: #ef4444; }

  /* ── Table section ─────────────────────────────────────────────────── */
  .rg-table-wrap { margin-bottom: 14px; }

  /* ═══════════════════════════════════════════════════════════════════════
     USER FLEET BADGES - compact display in user table
  ═══════════════════════════════════════════════════════════════════════ */
  .um-fleet-sm {
    display: inline-block;
    max-width: 130px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(99,102,241,.12);
    color: #6366f1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    line-height: 1.4;
  }
  .um-fleet-more {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(148,163,184,.2);
    color: var(--muted);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 700;
    vertical-align: middle;
    cursor: help;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     DASHBOARD GENSET STATUS ICON - SVG replacement for round LED
  ═══════════════════════════════════════════════════════════════════════ */
  .dcl-gen-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: transparent;
    flex-shrink: 0;
    transition: all .3s ease;
  }
  .dcl-gen-icon svg {
    width: 34px; height: 34px;
    stroke-width: 1.6;
  }
  /* State colors */
  .dcl-gen-icon.standby   { color: var(--muted, #94a3b8); }
  .dcl-gen-icon.running   {
    color: var(--green, #22c55e);
    filter: drop-shadow(0 0 4px rgba(34,197,94,.35));
    animation: gen-pulse 2s ease-in-out infinite;
  }
  .dcl-gen-icon.crank     {
    color: var(--yellow, #ca8a04);
    animation: gen-pulse 1s ease-in-out infinite;
  }
  .dcl-gen-icon.fault     {
    color: var(--red, #ef4444);
    filter: drop-shadow(0 0 4px rgba(239,68,68,.4));
    animation: gen-pulse .5s ease-in-out infinite;
  }
  @keyframes gen-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .65; transform: scale(.96); }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     TOPBAR USER INFO BADGE
  ═══════════════════════════════════════════════════════════════════════ */
  .topbar-user-info {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px;
    border-left: 1px solid rgba(255,255,255,.12);
    height: 100%;
    white-space: nowrap;
  }
  .topbar-user-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #166466, #349189);
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(22,100,102,.35);
  }
  .topbar-user-meta {
    display: flex; flex-direction: column; line-height: 1.1;
  }
  .topbar-user-name {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; font-weight: 600;
    color: #fff;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-user-role {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 8px; font-weight: 700;
    /* Was rgba(52,145,137,.85) — 3.34:1 on the dark topbar, below AA for 8px
       text. This teal measures 5.97:1 there and keeps the same hue. */
    color: #5cc3b5;
    letter-spacing: .1em;
  }
  @media (max-width: 640px) {
    .topbar-user-meta { display: none; }
    .topbar-user-info { padding: 0 8px; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     DASHBOARD REMOTE CONTROL BUTTONS - compact size
  ═══════════════════════════════════════════════════════════════════════ */
  .controls { gap: 6px; margin-top: 8px; }
  .ctl {
    padding: 8px 6px;      /* was 14px 8px - slimmer */
    font-size: 10.5px;     /* was 12px */
    letter-spacing: .06em; /* tighter */
    gap: 5px;
    border-radius: 6px;
  }
  .ctl svg, .ctl .icon { width: 11px; height: 11px; }

  /* Mode bar slimmer too */
  .rmi-bar {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     DASHBOARD EVENTS PANEL - collapsible toggle
  ═══════════════════════════════════════════════════════════════════════ */
  /* Force header layout to flex with toggle on the right */
  .dash-col-right > .dcr-header,
  .dcr-header {
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .dcr-header > span:first-child {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .06em !important;
    color: var(--text) !important;
    flex: 0 0 auto;
  }
  /* Toggle button - high visibility, impossible to miss */
  button.dcr-toggle,
  .dcr-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--amber-bg, rgba(245,158,11,.1)) !important;
    border: 1px solid var(--amber-border, rgba(245,158,11,.3)) !important;
    border-radius: 6px !important;
    width: 28px !important;
    height: 26px !important;
    min-width: 28px;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--amber, #1a8a7d) !important;
    transition: all .15s;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    z-index: 5;
  }
  .dcr-toggle:hover {
    background: var(--amber, #1a8a7d) !important;
    color: #fff !important;
  }
  .dcr-toggle-icon {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    display: block !important;
  }

  /* Collapsed state - whole right column hides (DESKTOP only) */
  @media (min-width: 861px) {
    .dash-3col.events-hidden {
      grid-template-columns: 270px 1fr 0;
    }
    .dash-3col.events-hidden .dash-col-right {
      display: none;
    }
  }
  /* On mobile, events-hidden has no effect - mobile already hides right col */
  @media (max-width: 860px) {
    .dash-3col.events-hidden {
      grid-template-columns: 1fr;  /* keep mobile single-column */
    }
    .dcr-show-btn { display: none !important; }  /* hide floating btn on mobile */
  }

  /* Floating show-events button (appears at right edge when collapsed) */
  .dcr-show-btn {
    position: fixed;
    top: calc(var(--topbar-h) + 90px);
    right: 10px;
    z-index: 95;
    width: 36px;
    height: 48px;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--amber-border);
    background: var(--amber-bg);
    color: var(--amber);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-shadow: -2px 2px 12px rgba(0,0,0,.15);
    transition: all .2s;
  }
  .dcr-show-btn:hover {
    background: var(--amber);
    color: #fff;
    padding-right: 3px;
    width: 40px;
  }
  .dcr-show-btn svg { width: 14px; height: 14px; }
  .dcr-show-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    min-width: 14px;
    text-align: center;
    line-height: 1.3;
  }
  .dcr-show-badge.zero {
    background: rgba(148,163,184,.3);
    color: var(--muted);
  }

  /* ═══════════════════════════════════════════════════════════════════════
     REPORT EMPTY STATE
  ═══════════════════════════════════════════════════════════════════════ */
  .rg-empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 40px 20px;
    min-height: 320px;
  }
  .rg-empty-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--amber-bg, rgba(245,158,11,.1));
    border: 2px solid var(--amber-border, rgba(245,158,11,.3));
    color: var(--amber, #1a8a7d);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .rg-empty-icon svg { width: 28px; height: 28px; }
  .rg-empty-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--text);
    letter-spacing: .04em;
    margin-bottom: 8px;
  }
  .rg-empty-msg {
    font-size: 12px;
    color: var(--muted);
    max-width: 420px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .rg-empty-hints {
    background: var(--surface, rgba(248,250,252,.6));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: left;
    max-width: 460px;
  }
  .rg-empty-hint {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10.5px;
    color: var(--muted);
    line-height: 1.8;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     SITE MAP - Bulk action toolbar
  ═══════════════════════════════════════════════════════════════════════ */
  .sm-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-radius: 8px;
    animation: sm-toolbar-in .2s ease-out;
  }
  @keyframes sm-toolbar-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .sm-toolbar-count {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px; font-weight: 700;
    color: var(--amber-dark, #166466);
    min-width: 70px;
  }
  .sm-row-chk {
    width: 15px; height: 15px;
    cursor: pointer;
    accent-color: var(--amber, #1a8a7d);
  }
  #sm-check-all {
    width: 15px; height: 15px;
    cursor: pointer;
    accent-color: var(--amber, #1a8a7d);
  }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD REDESIGN - Fresh & Compact
   Font: Inter (UI text - titles, labels, buttons, menus) + IBM Plex Mono
   (telemetry/data values, so numeric columns stay tidy) + Source Code Pro
   (raw code/pre, e.g. the hex viewer).
   Spacing: 25-30% reduced
   Effects: hover float, top-border reveal, gradient buttons, stagger anim
═══════════════════════════════════════════════════════════════════════════ */

/* ── Global Font Override ──
   This used to force Poppins app-wide (with a scattered exception list that
   accidentally caught .mono, .dcc-pc-val, .dcr-ev-time, .fleet-unit-imei and
   .hist-table td too - real telemetry readouts - and forced THEM to Inter as
   well, undoing every per-selector `IBM Plex Mono` this file sets elsewhere).
   Rebuilt as three explicit tiers instead of one list + a body default. */
body, button, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcc-pc-label, .dcc-pc-sub,
.acell .al, .acell .as,
.io-badge, .mode-tag, .rmi-bar, .rmi-left, .rmi-right,
.remote-badge, .topbar-brand-name, .topbar-user-role,
.dev-count-badge, .dcr-header, .dcr-tab,
.fleet-select, .dm-btn, .dm-btn-sm,
.hist-table th,
.nav-section-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.mono,
.dcl-big-val, .dcl-cell-val, .dcc-pc-val,
.acell .av, .sc, .dcr-ev-time, .fleet-unit-imei,
.hist-table td {
  font-family: 'IBM Plex Mono', monospace !important;
}
code, pre {
  font-family: 'Source Code Pro', 'IBM Plex Mono', monospace !important;
}

/* ── Compact: Topbar ── */
.topbar { height: 46px; }
:root { --topbar-h: 46px; }

/* ── Compact: Sidebar ── */
.sidebar { width: var(--sidebar-w); }
:root { --sidebar-w: 200px; }
.sidebar-logo { padding: 14px 14px 10px; }
.sidebar-logo-icon { width: 28px; height: 28px; }
.sidebar-logo-text { font-size: 14px; }
.nav-section-label { padding: 12px 12px 4px; font-size: 9px; }
.nav-item { padding: 7px 10px; font-size: 12px; gap: 9px; }
.nav-item svg, .nav-icon { width: 15px; height: 15px; }

/* ── Sidebar groups (Nuxt AppSidebar) ──
   Header yang bisa dibuka/tutup + item di bawahnya, menggantikan label
   seksi kecil. Sidebar selalu teal gelap di dua tema, jadi warnanya putih
   transparan seperti .nav-item — bukan token tema. Mode rail (ikon saja)
   tidak menggambar header; semua item tampil rata seperti sebelumnya. */
.nav-group + .nav-group { margin-top: 2px; }
.nav-group-head {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px; border: none; border-radius: 7px;
  background: none; cursor: pointer; text-align: left; white-space: nowrap;
  color: rgba(255,255,255,.72); font-size: 12px; font-weight: 600;
  transition: background .15s, color .15s;
}
.nav-group-head:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-group-head:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -2px; }
.nav-group-head .nav-icon { color: rgba(255,255,255,.55); }
.nav-group-head:hover .nav-icon { color: rgba(255,255,255,.85); }
/* Grup tertutup yang memuat halaman aktif tetap memberi tanda di mana kita. */
.nav-group:not(.open) .nav-group-head.has-active { color: #fff; background: rgba(255,255,255,.1); }
.nav-group:not(.open) .nav-group-head.has-active .nav-icon { color: #fff; }
.nav-group-chevron {
  width: 14px; height: 14px; margin-left: auto; flex-shrink: 0;
  color: rgba(255,255,255,.5); transition: transform .2s;
}
.nav-group.open .nav-group-chevron { transform: rotate(180deg); }
.nav-group-items { padding: 2px 0 4px; }
.nav-group-items .nav-item { padding-left: 26px; }
/* Kotak cari menu di atas grup. Kotaknya ikut token tema (putih di terang,
   gelap di tema gelap) — satu-satunya bagian sidebar yang begitu, karena ia
   bidang isian, bukan bagian dari latar teal. */
.nav-search { position: relative; padding: 10px 10px 4px; flex-shrink: 0; }
.nav-search-icon {
  position: absolute; left: 20px; top: 26px; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--muted); pointer-events: none;
}
.nav-search-input {
  width: 100%; height: 32px; padding: 0 10px 0 30px;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 12px;
}
.nav-search-input::placeholder { color: var(--muted); }
.nav-search-input:focus { outline: none; border-color: rgba(255,255,255,.8); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.nav-search-empty { padding: 10px 12px; font-size: 12px; color: rgba(255,255,255,.7); white-space: normal; }
.sidebar.collapsed .nav-group-items { padding: 0; }
.sidebar.collapsed .nav-group-items .nav-item { padding-left: 10px; }
/* Label panjang ("Polling Config Controller") dulu keluar dari sorotan item
   aktif dan terpotong tepi sidebar: kini berhenti dengan elipsis, nama
   lengkapnya di tooltip (title). */
.nav-item, .nav-group-head { min-width: 0; }
.sidebar:not(.collapsed) .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Ikon item aktif putih seperti teksnya. Aturan lama memberi #60a5fa (biru)
   dengan !important — satu-satunya warna biru di sidebar teal. */
.sidebar .nav-item.active .nav-icon { color: #fff !important; }
/* Batas tegas antara kotak cari dan daftar menu, supaya item yang tergulir
   tidak tampak terpotong tepat di bawah kotak cari. */
.sidebar:not(.collapsed) .nav-search { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
/* Ruang untuk label terpanjang ("Polling Config Controller" 152px pada 12px):
   sidebar 200 -> 224px, indentasi item grup 26 -> 18px, padding samping
   daftar 8 -> 6px. Elipsis di atas tetap sebagai cadangan menu baru. */
:root { --sidebar-w: 224px; }
.sidebar:not(.collapsed) .nav-items { padding-left: 6px; padding-right: 6px; }
.sidebar:not(.collapsed) .nav-group-items .nav-item { padding-left: 18px; }

/* ── Compact: Content Area ── */
.content-area { margin-left: var(--sidebar-w); }
.content-area.collapsed-offset { margin-left: var(--sidebar-collapsed-w); }

/* ── Compact: Fleet/Device bar ── */
.fleet-header { padding: 6px 12px; }
.fleet-select { font-size: 10px; padding: 5px 8px; }
.dash-fleet-bar { padding: 5px 12px; }
.dash-chip { padding: 4px 10px; font-size: 9.5px; border-radius: 16px; }
.dash-chip.active { box-shadow: 0 2px 8px rgba(26,138,125,.2); }

/* ── Compact: Dashboard 3-column grid ── */
.dash-3col { grid-template-columns: 260px 1fr 260px; }
.dash-col-left { }
.dash-col-center { padding: 12px; }

/* ══ LEFT COLUMN - compact & clean ══ */
/* Device name block */
.dash-col-left > div { padding: 9px 12px; }

/* Status row */
.dcl-gen-icon { width: 38px; height: 38px; border-radius: 10px; }
.dcl-gen-icon svg { width: 28px; height: 28px; }
.dcl-run-text { font-size: 17px !important; }

/* Power display */
.dcl-big-val + span, .dcl-big-val .unit { font-size: 14px; }

/* Stats grid */
.dcl-cell-val, .dl-stat-val { font-size: 12px !important; }

/* Mode tag */
.mode-tag { padding: 3px 10px; font-size: 9.5px; border-radius: 5px; }

/* PF gauge bar */
.dcl-gauge-bar { height: 4px; }

/* Service bar */
.maint-bar, .maint-progress { height: 5px; border-radius: 3px; }
.maint-progress { background: linear-gradient(90deg, var(--teal, #1a8a7d), var(--teal-mid, #349189)); }

/* ══ CENTER COLUMN - param cards + controls ══ */

/* ── Param Cards ── */
.dcc-param-grid { gap: 8px !important; }
.dcc-pc {
  padding: 10px 8px 8px !important;
  border-radius: 10px !important;
  position: relative;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.dcc-pc:hover {
  border-color: rgba(26,138,125,.25);
}

/* Param card values */
.dcc-pc-val { font-size: 18px !important; }
.dcc-pc-label { font-size: 9px !important; margin-top: 2px; }
.dcc-pc-sub { font-size: 8px !important; }
.dcc-pc-icon svg { width: 16px; height: 16px; }

/* Gauge bar under param cards */
.dcc-pc-bar { height: 3px !important; border-radius: 2px; margin-top: 5px; }

/* ── Alarm Banner - warm gradient card ── */
#alarm-banner {
  background: linear-gradient(135deg, #fefce8, #fef3c7) !important;
  border: 1px solid #fde68a !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  box-shadow: 0 2px 12px rgba(245,158,11,.06);
  margin: 0 0 10px 0;
}
#alarm-banner-count {
  font-size: 10px !important;
  color: #92400e !important;
}
/* Alarm tags - gradient pills */
.alarm-tag {
  border-radius: 16px !important;
  padding: 2px 9px !important;
  font-size: 9px !important;
  font-weight: 700;
}
.alarm-tag[style*="background: var(--red)"],
.alarm-tag.critical { background: linear-gradient(135deg, #dc2626, #b91c1c) !important; }
.alarm-tag[style*="background: var(--yellow)"],
.alarm-tag.warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }

/* ── Section Headers ── */
.dcc-section-header {
  font-size: 11px !important;
  margin-bottom: 8px !important;
  padding: 4px 0 !important;
}

/* ── System IO row - compact ── */
.io-badge { 
  padding: 3px 8px !important; 
  border-radius: 5px !important; 
  font-size: 9px !important;
}

/* ── Remote Control - gradient buttons ── */
.controls { gap: 6px !important; margin-top: 6px !important; }
.ctl {
  padding: 9px 6px !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  letter-spacing: .04em !important;
  transition: all .15s ease !important;
  border: none !important;
}
.ctl:hover { transform: translateY(-2px) !important; }
.ctl:active { transform: scale(.97) !important; }
.ctl.start {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(16,185,129,.2);
}
.ctl.start:hover { box-shadow: 0 4px 16px rgba(16,185,129,.3) !important; }
.ctl.stop {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(239,68,68,.15);
}
.ctl.stop:hover { box-shadow: 0 4px 16px rgba(239,68,68,.25) !important; }
.ctl.auto {
  background: var(--surface2, #f8fafb) !important;
  color: var(--blue, #3b82f6) !important;
  border: 1px solid rgba(59,130,246,.2) !important;
}
.ctl.manual {
  background: var(--surface2, #f8fafb) !important;
  color: var(--yellow, #f59e0b) !important;
  border: 1px solid rgba(245,158,11,.2) !important;
}
/* ── ALC700/ALC708 extra buttons ── */
.ctl.mute {
  background: var(--surface2, #f8fafb) !important;
  color: #6b7280 !important;
  border: 1px solid rgba(107,114,128,.2) !important;
}
.ctl.beacon {
  background: var(--surface2, #f8fafb) !important;
  color: #d97706 !important;
  border: 1px solid rgba(217,119,6,.2) !important;
}
.ctl.lighton {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(14,165,233,.15);
}
.ctl.lighton:hover { box-shadow: 0 4px 16px rgba(14,165,233,.25) !important; }
.ctl.lightoff {
  background: linear-gradient(135deg, #475569, #64748b) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(71,85,105,.15);
}
.ctl.lightoff:hover { box-shadow: 0 4px 16px rgba(71,85,105,.25) !important; }

/* ── DSE GenComm remote control row ── */
.ctl-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.ctl.reset {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(99,102,241,.15);
}
.ctl.reset:hover { box-shadow: 0 4px 16px rgba(99,102,241,.25) !important; }

/* ALC700 controls - dark panel replica */
.controls.alc-controls {
  display: block !important;
  padding: 0 !important; margin: 0 !important;
}

/* ACC Power bar (DOUT1 relay control) */
.alc-acc-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface2, #f8fafb);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 8px;
  flex-wrap: wrap; gap: 6px;
}
.alc-acc-left {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted);
}
.alc-acc-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--text);
}
.alc-acc-status {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px;
  background: var(--dim); color: #fff;
}
.alc-acc-status.on  { background: #22c55e; }
.alc-acc-status.off { background: #6b7280; }
.alc-acc-btns {
  display: flex; gap: 4px;
}
.alc-acc-btn {
  padding: 5px 14px; border-radius: 6px; border: none; cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .04em; transition: all .15s;
}
.alc-acc-btn:disabled { opacity: .5; cursor: not-allowed; }
.alc-acc-btn.on {
  background: linear-gradient(135deg, #059669, #10b981); color: #fff;
}
.alc-acc-btn.on:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(16,185,129,.3); }
.alc-acc-btn.off {
  background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff;
}
.alc-acc-btn.off:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(239,68,68,.25); }

/* Single toggle button for SMARTGEN PANEL POWER (revisi task4 - 44px in-line) */
.alc-acc-toggle-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-right: 14px;
}
.alc-acc-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.alc-acc-toggle:hover:not(:disabled) { transform: translateY(-1px); }
.alc-acc-toggle:active:not(:disabled) { transform: translateY(0); }
.alc-acc-toggle:disabled { opacity: .55; cursor: not-allowed; }
.alc-acc-toggle.on  { background: #10b981; box-shadow: 0 2px 8px rgba(16,185,129,.4); }
.alc-acc-toggle.on:hover:not(:disabled)  { box-shadow: 0 4px 12px rgba(16,185,129,.5); }
.alc-acc-toggle.off { background: #ef4444; box-shadow: 0 2px 8px rgba(239,68,68,.4); }
.alc-acc-toggle.off:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(239,68,68,.5); }
.alc-acc-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.alc-acc-toggle-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: .12em;
  color: var(--text);
  white-space: nowrap;
}

/* Dark panel container */
.alc-panel {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
  border-radius: 12px; padding: 14px 10px 10px;
  border: 1px solid #4b5563;
  box-shadow: 0 6px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
}
.alc-divider {
  border-top: 1px solid rgba(255,255,255,.06);
  margin: 8px 0;
}

/* Button rows */
.alc-light-row {
  display: flex; justify-content: center; gap: 36px;
  margin-bottom: 4px;
}
.alc-main-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 4px; justify-items: center;
}

/* Button wrapper */
.alc-btn-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.alc-btn-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 7.5px; font-weight: 700; letter-spacing: .07em;
  color: #6b7280; transition: color .3s;
}

/* LED indicator dot */
.alc-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #374151; transition: all .3s;
  border: 1px solid rgba(0,0,0,.2);
}
.alc-led.active {
  box-shadow: 0 0 8px currentColor, 0 0 4px currentColor;
  animation: alc-led-pulse 1.4s ease-in-out infinite;
}
@keyframes alc-led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.alc-led.active[style*="ef4444"] { box-shadow: 0 0 8px #ef4444, 0 0 4px #ef4444; }
.alc-led.active[style*="f59e0b"] { box-shadow: 0 0 8px #f59e0b, 0 0 4px #f59e0b; }
.alc-led.active[style*="3b82f6"] { box-shadow: 0 0 8px #3b82f6, 0 0 4px #3b82f6; }

/* Circular buttons */
.alc-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2.5px solid #374151; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.25), inset 0 1px 2px rgba(255,255,255,.06);
  transition: all .15s;
}
.alc-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.3); }
.alc-btn:active:not(:disabled) { transform: scale(.93); }
.alc-btn:disabled { cursor: not-allowed; opacity: .35; }

.alc-btn-default { background: linear-gradient(145deg, #4b5563, #374151); }
.alc-btn-red     { background: linear-gradient(145deg, #dc2626, #991b1b); border-color: #991b1b; }
.alc-btn-green   { background: linear-gradient(145deg, #16a34a, #15803d); border-color: #166534; }

/* Active glow */
.alc-glow-green { border-color: #22c55e !important; box-shadow: 0 0 16px rgba(34,197,94,.4), 0 3px 10px rgba(0,0,0,.3) !important; }
.alc-glow-amber { border-color: #f59e0b !important; box-shadow: 0 0 16px rgba(245,158,11,.5), 0 3px 10px rgba(0,0,0,.3) !important;
  animation: alc-glow-pulse-amber 1.4s ease-in-out infinite; }
.alc-glow-blue  { border-color: #3b82f6 !important; box-shadow: 0 0 16px rgba(59,130,246,.55), 0 3px 10px rgba(0,0,0,.3) !important;
  animation: alc-glow-pulse-blue 1.4s ease-in-out infinite; }

/* ★ Filled active state - much more visible than border glow alone.
   Background changes to colored gradient so user instantly sees
   the button is "ON" without having to look at the small LED dot. */
.alc-btn-active-amber {
  background: linear-gradient(145deg, #f59e0b, #b45309) !important;
  border-color: #f59e0b !important;
}
.alc-btn-active-amber svg { stroke: #fff !important; }
.alc-btn-active-amber svg line[stroke="#ef4444"] { stroke: #fff !important; }

.alc-btn-active-blue {
  background: linear-gradient(145deg, #3b82f6, #1e40af) !important;
  border-color: #3b82f6 !important;
}
.alc-btn-active-blue svg { stroke: #fff !important; }
.alc-btn-active-blue svg circle[fill="#f59e0b"] {
  fill: #fff !important; stroke: #fff !important;
}

@keyframes alc-glow-pulse-amber {
  0%, 100% { box-shadow: 0 0 16px rgba(245,158,11,.5), 0 3px 10px rgba(0,0,0,.3); }
  50%      { box-shadow: 0 0 24px rgba(245,158,11,.85), 0 3px 10px rgba(0,0,0,.3); }
}
@keyframes alc-glow-pulse-blue {
  0%, 100% { box-shadow: 0 0 16px rgba(59,130,246,.5), 0 3px 10px rgba(0,0,0,.3); }
  50%      { box-shadow: 0 0 24px rgba(59,130,246,.85), 0 3px 10px rgba(0,0,0,.3); }
}

/* ════════════════════════════════════════════════════════════════════════
   Command Status Panel - persistent feedback for last command in Remote
   Control area. States: sending / verified / sent-no-verify / failed.
   ════════════════════════════════════════════════════════════════════════ */
.cmd-status-panel {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  line-height: 1.4;
  transition: all .2s;
}
.cmd-status-panel.csp-sending {
  border-color: #f59e0b;
  background: rgba(245,158,11,.08);
}
.cmd-status-panel.csp-verified {
  border-color: #22c55e;
  background: rgba(34,197,94,.08);
}
.cmd-status-panel.csp-sent {
  /* sent-no-verify - command landed but no read-back possible */
  border-color: #3b82f6;
  background: rgba(59,130,246,.08);
}
.cmd-status-panel.csp-failed {
  border-color: #ef4444;
  background: rgba(239,68,68,.08);
}
.cmd-status-panel .csp-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.cmd-status-panel .csp-icon {
  font-size: 14px; flex: none;
}
.cmd-status-panel.csp-sending .csp-icon { color: #f59e0b; animation: csp-spin 1s linear infinite; }
.cmd-status-panel.csp-verified .csp-icon { color: #22c55e; }
.cmd-status-panel.csp-sent .csp-icon { color: #3b82f6; }
.cmd-status-panel.csp-failed .csp-icon { color: #ef4444; }
.cmd-status-panel .csp-cmd {
  font-weight: 700; font-size: 12px;
  color: var(--text);
  letter-spacing: .04em;
}
.cmd-status-panel .csp-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}
.cmd-status-panel .csp-status {
  font-size: 11px;
  color: var(--text);
}
.cmd-status-panel .csp-caveat {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
}
@keyframes csp-spin { to { transform: rotate(360deg); } }

/* Light button larger */
.alc-light-row .alc-btn { width: 50px; height: 50px; }


/* Hint text */
.alc-hint {
  text-align: center; min-height: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 7.5px; color: #f59e0b; letter-spacing: .04em;
  padding: 2px 0;
}

/* ALL LIGHTS buttons */
.alc-all-lights {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px;
}
.alc-all-btn {
  padding: 9px; border-radius: 8px; border: none; cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .06em; transition: all .2s;
}
.alc-all-btn:disabled { cursor: not-allowed; }
.alc-all-on  { background: linear-gradient(135deg, #0ea5e9, #38bdf8); color: #fff; }
.alc-all-off { background: linear-gradient(135deg, #475569, #64748b); color: #fff; }

/* HGM6100N has 5 remote-coil buttons (Start/Stop/Test/Auto/Manual) vs
   ALC700/DSE's 6, so it needs its own column count to span the full row
   width instead of leaving .alc-main-row's 6th column empty. Applied
   alongside .alc-main-row so it inherits display/gap/justify-items and
   only overrides the column count. */
.hgm-main-row { grid-template-columns: repeat(5, 1fr); }

/* Responsive */
@media (max-width: 480px) {
  .alc-main-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .alc-btn { width: 40px; height: 40px; }
  .alc-light-row .alc-btn { width: 46px; height: 46px; }
}

/* Remote mode bar */
.rmi-bar {
  padding: 5px 10px !important;
  font-size: 10px !important;
  border-radius: 6px;
}

/* ── Accumulator Strip - cards with colored top borders ── */
.accum-strip, .dash-accum {
  border-radius: 8px !important;
  overflow: hidden;
}
.acell {
  padding: 9px 10px !important;
  position: relative;
  transition: all .15s;
}
.acell:hover { background: var(--surface2, #f8fafb); }
.acell .al { font-size: 8px !important; letter-spacing: .06em; }
.acell .av { font-size: 16px !important; }
.acell .as { font-size: 8px !important; }

/* ── Location card - compact map ── */
.dash-map-container, .dcl-map-wrap { border-radius: 8px; overflow: hidden; }
.dash-map-container { height: 160px !important; }

/* ── Events Panel - better items ── */
.dcr-header { padding: 9px 12px !important; font-size: 12px !important; }
.dcr-tab { padding: 7px 4px !important; font-size: 9.5px !important; }
.dcr-ev { padding: 7px 10px !important; font-size: 11px !important; transition: background .1s; }
.dcr-ev:hover { background: var(--surface2, #f8fafb); }
.dcr-ev-icon { font-size: 9px !important; }
.dcr-ev-time { font-size: 9px !important; }
.dcr-ev-x { font-size: 13px; border-radius: 4px; padding: 1px 4px; }
.dcr-ev-x:hover { color: var(--red) !important; background: rgba(239,68,68,.08); }
.dcr-footer { padding: 6px 10px !important; font-size: 9px !important; }

/* ── Global card hover float effect ── */
.dm-table-wrap, .rg-chart-wrap, .chart-card {
  border-radius: 10px !important;
  transition: box-shadow .2s;
}
.dm-table-wrap:hover, .rg-chart-wrap:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

/* ── Stagger load animation ── */
@keyframes card-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dcc-pc { animation: card-slide-in .35s ease-out both; }
.dcc-pc:nth-child(1) { animation-delay: .03s; }
.dcc-pc:nth-child(2) { animation-delay: .06s; }
.dcc-pc:nth-child(3) { animation-delay: .09s; }
.dcc-pc:nth-child(4) { animation-delay: .12s; }
.dcc-pc:nth-child(5) { animation-delay: .15s; }
.dcc-pc:nth-child(6) { animation-delay: .18s; }

/* ── Primary buttons - teal gradient ── */
.dm-btn.primary {
  background: linear-gradient(135deg, #1a8a7d, #166466) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(26,138,125,.2);
  transition: all .15s;
}
.dm-btn.primary:hover {
  box-shadow: 0 4px 14px rgba(26,138,125,.3) !important;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile Phone
══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .dash-3col { grid-template-columns: 1fr !important; }
  .dash-col-left {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-height: none !important;
  }
  .dcl-full { grid-column: 1 / -1; }
  .dash-col-right { display: none !important; }
  .dcc-param-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .accum-strip, .dash-accum { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {
  /* Topbar compact */
  .topbar { height: 44px; padding: 0 10px; }
  :root { --topbar-h: 44px; }
  .topbar-brand-name { font-size: 13px; }
  .topbar-sys-group { gap: 6px; }
  .sc.mono { font-size: 11px; padding: 3px 6px; }
  .remote-badge { font-size: 8px; padding: 2px 6px; }
  .theme-btn { display: none; }
  .topbar-user-meta { display: none !important; }
  .topbar-user-avatar { width: 24px; height: 24px; font-size: 9px; }
  .logout-btn .logout-text { display: none; }
  .logout-btn .logout-icon { display: block; }

  /* Sidebar - hidden by default on mobile (handled by existing mobile-open) */
  .sidebar { width: 240px !important; }

  /* Content */
  .content-area { margin-left: 0 !important; }
  .dash-col-center { padding: 10px !important; }

  /* Left column - single column */
  .dash-col-left {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }

  /* Param cards - 2 column */
  .dcc-param-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .dcc-pc { padding: 8px 6px 6px !important; }
  .dcc-pc-val { font-size: 16px !important; }
  .dcc-pc-label { font-size: 8px !important; }

  /* Status */
  .dcl-gen-icon { width: 32px; height: 32px; }
  .dcl-gen-icon svg { width: 22px; height: 22px; }
  .dcl-run-text { font-size: 15px !important; }

  /* Controls - stack or 2-col */
  .controls { gap: 5px !important; }
  .ctl { padding: 8px 4px !important; font-size: 10px !important; }

  /* Accumulator */
  .accum-strip, .dash-accum { grid-template-columns: repeat(2, 1fr) !important; }
  .acell .av { font-size: 14px !important; }

  /* Alarm banner */
  #alarm-banner { padding: 8px 10px !important; }
  .alarm-tag { font-size: 8px !important; padding: 2px 7px !important; }

  /* Fleet bar */
  .fleet-header { padding: 5px 10px; }
  .dash-fleet-bar { padding: 4px 10px; }
  .dash-chip { font-size: 9px; padding: 3px 8px; }

  /* Location */
  .dash-map-container { height: 140px !important; }

  /* Section headers */
  .dcc-section-header { font-size: 10px !important; }

  /* Remote control */
  .rmi-bar { font-size: 9px !important; padding: 4px 8px !important; }

  /* IO badges */
  .io-badge { font-size: 8px !important; padding: 2px 6px !important; }

  /* Mobile bottom nav */
  .mob-nav { padding: 6px 0; }
  .mob-nav-btn { font-size: 9px; padding: 4px 0; }
}

/* ── Very small phone (≤400px) ── */
@media (max-width: 400px) {
  .dcc-param-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dcc-pc-val { font-size: 14px !important; }
  .accum-strip, .dash-accum { grid-template-columns: 1fr !important; }
  .controls { grid-template-columns: 1fr !important; }
  .dash-col-center { padding: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME TOGGLE SWITCH - replaces emoji button
═══════════════════════════════════════════════════════════════════════ */
.theme-toggle-wrap {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  padding: 0 6px;
  user-select: none;
}
.theme-toggle-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.5);
  letter-spacing: .06em;
}
.theme-toggle-track {
  width: 32px; height: 16px;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  position: relative;
  transition: background .2s;
}
.theme-toggle-thumb {
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px; left: 2px;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.theme-toggle-thumb.on {
  transform: translateX(16px);
}
.theme-toggle-wrap:hover .theme-toggle-track {
  background: rgba(255,255,255,.25);
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR - remove logo padding, nav starts from top
═══════════════════════════════════════════════════════════════════════ */
.sidebar-logo { display: none !important; }
/* Nav items start from top since sidebar logo removed */
.nav-items { padding-top: 12px !important; }
.nav-items { padding-top: 12px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   EVENTS PANEL - beautiful empty state
═══════════════════════════════════════════════════════════════════════ */
.dcr-empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 16px !important;
  text-align: center;
  background: var(--teal-light, rgba(26,138,125,.04)) !important;
  border: 1px dashed rgba(26,138,125,.2) !important;
  border-radius: 10px !important;
  margin: 12px !important;
  color: var(--teal, #1a8a7d) !important;
}
.dcr-empty-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(26,138,125,.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  color: var(--teal, #1a8a7d);
}
.dcr-empty-icon svg { width: 20px; height: 20px; }
.dcr-empty-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--teal, #1a8a7d);
  margin-bottom: 2px;
}
.dcr-empty-sub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px;
  color: var(--dim, #9ca3af);
}

/* Hide sidebar-bottom */
.sidebar-bottom { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE - BATCH 1+2 COMPREHENSIVE FIX
   Fleet Map, Sidebar Overlay, Alerts, Devices, POI, Geofence, Site Map
═══════════════════════════════════════════════════════════════════════════ */

/* ── Logout icon - always hidden on desktop, visible on mobile ── */
.logout-icon { display: none; flex-shrink: 0; }
@media (max-width: 640px) {
  .logout-icon { display: block; }
  .logout-text { display: none; }
  .logout-btn { padding: 0 10px; gap: 0; }
}

/* ── Fleet Map - sidebar overlay + toggle fix ── */
@media (max-width: 768px) {
  /* Ensure fleet sidebar sits above overlay */
  .fleet-sidebar { z-index: 12; }
  .fleet-overlay { z-index: 11; }

  /* Units toggle button - always visible above map */
  .fleet-toggle-btn { z-index: 500; }

  /* Legend - compact & above bottom nav */
  .flt-legend {
    bottom: 12px; left: 12px; right: auto;
    padding: 6px 8px; min-width: 80px;
    font-size: 8px;
  }
  .flt-legend-title { font-size: 7px; margin-bottom: 4px; }
  .flt-legend-row { font-size: 8px; gap: 5px; padding: 1px 0; }
  .flt-legend-dot { width: 6px; height: 6px; }

  /* Fleet reload bar - compact */
  .fleet-reload-bar { padding: 6px 10px; }
  .fleet-reload-info { font-size: 8px; }
  .fleet-reload-btn { font-size: 9px; padding: 3px 8px; }
}

/* ── Leaflet map stacking - berlaku di SEMUA ukuran layar ──────────────────
   Container map dibuat stacking-context sendiri (z-index 0) supaya z-index
   internal Leaflet (pane s/d 700, kontrol s/d 1000) terkurung di dalamnya dan
   TIDAK menutupi topbar sticky (z-index 200) saat halaman di-scroll.
   Sebelumnya isolasi ini hanya ada di @media (max-width:768px), sehingga di
   desktop map POI/Geofence/dll overlap ke header. */
#poi-map, #gf-map, #gps-hist-map, #nav-route-map, .dash-minimap {
  position: relative; z-index: 0; isolation: isolate;
}

/* ── Main sidebar - z-index fix for map pages ── */
@media (max-width: 768px) {
  /* Leaflet maps internally use z-index up to 400+.
     Sidebar MUST be above all map layers. */
  .sidebar { z-index: 10000 !important; }
  .sidebar-overlay { z-index: 9999 !important; }

  /* Create stacking context on content-area so ALL content
     (including Leaflet's internal z-index) is contained below sidebar */
  .content-area {
    isolation: isolate;
    position: relative;
    z-index: 0;
  }

  /* Also constrain individual map containers */
  #poi-map,
  #geofence-map,
  #gps-map,
  .dash-minimap {
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate;
  }
}

/* ── POI page - responsive layout ── */
@media (max-width: 768px) {
  /* Page header - stack buttons below title */
  #page-poi .page-header {
    flex-wrap: wrap;
  }
  #page-poi .page-header > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
    width: 100%;
    flex-wrap: wrap;
    gap: 4px !important;
  }
  #page-poi .page-header .dm-toolbar-btn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 9px;
    padding: 5px 8px;
    justify-content: center;
  }

  /* POI map height */
  #poi-map { height: 280px !important; }

  /* POI table - horizontal scroll */
  #page-poi .hist-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #page-poi .hist-table { min-width: 600px; }
}

/* ── Geofence page - responsive ── */
@media (max-width: 768px) {
  #page-geofence .page-header { flex-wrap: wrap; }
  #page-geofence .page-header > div[style*="margin-left"] {
    margin-left: 0 !important; width: 100%; flex-wrap: wrap; gap: 4px !important;
  }
  #page-geofence .dm-toolbar-btn {
    flex: 1 1 auto; min-width: 0; font-size: 9px; padding: 5px 8px; justify-content: center;
  }
  #page-geofence .hist-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #page-geofence .hist-table { min-width: 650px; }
  #geofence-map { height: 280px !important; }
}

/* ── Site Map page - responsive + sidebar toggle fix ── */
@media (max-width: 768px) {
  #page-site-map .page-header {
    flex-wrap: wrap; gap: 8px;
  }
  #page-site-map .page-header > div {
    width: 100%; flex-wrap: wrap; gap: 4px !important;
  }
  #page-site-map .page-header .dm-btn { font-size: 10px; padding: 6px 10px; flex: 1; }
  #page-site-map .dm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #page-site-map .hist-table { min-width: 700px; }

  /* Site Map toolbar compact */
  .sm-toolbar {
    flex-wrap: wrap !important; gap: 6px !important;
    padding: 6px 10px !important;
  }
  .sm-toolbar .dm-btn-sm { font-size: 9px; padding: 4px 8px; }
}

/* ── Alerts & Maintenance - responsive ── */
@media (max-width: 768px) {
  /* Summary cards - 2 columns */
  .alert-summary-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
  }
  .alert-sum-card { padding: 8px 10px; }
  .alert-sum-label { font-size: 7px; letter-spacing: .06em; }
  .alert-sum-val { font-size: 18px; }

  /* Alert tabs - scrollable */
  .alert-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 0; flex-wrap: nowrap;
  }
  .alert-tab { white-space: nowrap; font-size: 9px; padding: 7px 10px; flex-shrink: 0; }

  /* Right side tabs (Commands, Remote, etc) - hide overflow text */
  #page-alerts .alert-tabs ~ div[style*="float"] {
    display: none;
  }

  /* Filter bar - stack fields full-width & rata kiri (base pakai align-items:
     flex-end untuk desktop; di mobile HARUS di-reset ke stretch, kalau tidak
     semua field + dropdown Fleet Group jadi rata kanan & lebar tak seragam
     alias berantakan). Dipakai Alerts History & Maintenance Service Log. */
  .alert-filter-bar {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .alert-filter-bar .flt-group {
    flex: 1 1 100% !important; min-width: 0 !important; width: 100%;
  }
  .alert-filter-bar input,
  .alert-filter-bar select {
    width: 100% !important; min-width: 0 !important;
  }
  .alert-filter-bar .flt-result { text-align: center; }

  /* Alert cards - compact */
  .alert-card { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .alert-card-msg { font-size: 11px; }
  .alert-card-meta { font-size: 8px; }
  .alert-card-actions { width: 100%; justify-content: flex-end; }

  /* Rule cards */
  .rule-card { flex-wrap: wrap; padding: 8px 10px; }
  .rule-card-left { min-width: 0; }
  .rule-detail { font-size: 9px; }
  .rule-card-actions { width: 100%; justify-content: flex-end; margin-top: 4px; }

  /* Maintenance cards */
  .maint-card { padding: 10px 12px; }
  .maint-dev-name { width: 100px; font-size: 9px; }
  .maint-dev-hours { width: 60px; font-size: 8px; }

  /* History table */
  #page-alerts .dm-table-wrap,
  #page-alerts .hist-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* Export buttons row */
  #page-alerts .alert-filter-bar ~ div[style*="display:flex"] {
    flex-wrap: wrap;
  }
}

/* ── Devices page - responsive ── */
@media (max-width: 768px) {
  /* Page header - stack */
  #page-devices .page-header { flex-wrap: wrap; }
  #page-devices .page-header > div:last-child {
    width: 100%; flex-wrap: wrap; gap: 4px !important;
  }

  /* Tab bar - wrap */
  .dm-tab-bar {
    flex-wrap: wrap !important; gap: 4px !important;
  }
  .dm-tab { font-size: 10px; padding: 7px 10px; }

  /* Search input - full width */
  #dm-search { width: 100% !important; }

  /* Table - horizontal scroll */
  #page-devices .dm-table-wrap,
  #page-devices .hist-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #page-devices .hist-table,
  #page-devices table { min-width: 600px; }

  /* Device name + IMEI - stack */
  .dm-dev-name { font-size: 11px; }
  .dm-dev-imei { font-size: 8px; }

  /* Action buttons compact */
  .dm-action-btn { padding: 3px 6px; font-size: 11px; }
}

@media (max-width: 480px) {
  .alert-summary-row { gap: 4px; }
  .alert-sum-val { font-size: 16px; }
  .alert-sum-label { font-size: 6px; }
}

/* ── Page header - generic mobile fix for all pages ── */
@media (max-width: 640px) {
  .page-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-header-text h2 { font-size: 12px; }
  .page-header-text p { font-size: 9px; }
  .page-header-icon { width: 28px; height: 28px; }
  .page-header-icon svg { width: 14px; height: 14px; }

  /* Generic toolbar buttons - compact */
  .dm-toolbar-btn { font-size: 9px; padding: 5px 8px; }
  .dm-btn { font-size: 10px; padding: 7px 14px; }

  /* Modal - full width */
  .dm-modal-box, .dm-modal { width: 96vw !important; max-width: 96vw !important; }
  .dm-modal-body { padding: 14px; }
  .dm-modal-head { padding: 12px 14px; }
  .dm-modal-foot { padding: 10px 14px; }

  /* Form rows - always stack on small screens */
  .dm-form-row { flex-direction: column; gap: 10px; }
  .dm-form-group { min-width: 0; }
}

/* ── ALC700 Dashboard - responsive (V1 layout handled in alc-card-row CSS) ── */
@media (max-width: 768px) {
  .dcc-dynamic { min-height: 50px; }
  .dcc-dynamic .dcc-pc-val { font-size: 16px !important; }
  .dcc-cat-header { font-size: 8px; padding: 4px 8px; }
}
@media (max-width: 480px) {
  .dcc-dynamic .dcc-pc-val { font-size: 14px !important; }
}

/* ── Report Generator - responsive filter bar ── */
@media (max-width: 640px) {
  .rg-filter-bar {
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }
  .rg-filter-group {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .rg-filter-group label {
    text-align: left;
    font-size: 8px;
    margin-bottom: 2px;
  }
  .rg-filter-group select,
  .rg-filter-group input {
    width: 100%;
    box-sizing: border-box;
  }
  .rg-filter-actions {
    width: 100%;
  }
  .rg-filter-actions label { display: none; }
  .rg-filter-actions .dm-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }

  /* Chart export buttons - wrap */
  .rg-chart-head { flex-direction: column; gap: 8px; align-items: flex-start; }
  .rg-chart-head > div { width: 100%; flex-wrap: wrap; }
  .rg-chart-head .dm-toolbar-btn { flex: 1; justify-content: center; font-size: 9px; }
}

/* ── History filter bar - responsive ── */
@media (max-width: 768px) {
  .hist-filter-bar { flex-direction: column; gap: 10px; }
  .hist-filter-group { width: 100%; }
  .hist-filter-spacer { display: none; }
  .hist-quick-btns { flex-wrap: wrap; }
  .hist-export-btns { flex-wrap: wrap; }
  .hist-exp-btn { flex: 1; justify-content: center; }
}

/* ── GPS History - responsive ── */
@media (max-width: 768px) {
  .gps-stats-row { grid-template-columns: repeat(2, 1fr); }
  .gps-replay-bar { flex-wrap: wrap; gap: 6px; }
  .gps-replay-speed { order: 99; width: 100%; justify-content: center; }
}

/* ── Debug Log - responsive ── */
@media (max-width: 640px) {
  .dbg-stats-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .dbg-stat-val { font-size: 14px; }
  .dbg-log-inner { height: 360px; }
  .dbg-line { font-size: 10px; padding: 4px 10px; gap: 5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALARM LEGEND - mini color key below alarm banner
═══════════════════════════════════════════════════════════════════════════ */
.alarm-legend {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed rgba(146,64,14,.15);
}
.al-leg {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 9px; font-weight: 600;
  color: #78350f; letter-spacing: .02em;
}
.al-leg-dot {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT BADGES - severity icon + label in Events panel
═══════════════════════════════════════════════════════════════════════════ */
.dcr-ev-badge {
  width: 18px; height: 18px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800; flex-shrink: 0; margin-top: 1px;
}
.dcr-ev-badge.critical {
  background: rgba(220,38,38,.08); color: #dc2626;
  border: 1px solid rgba(220,38,38,.15);
  font-size: 9px;
}
.dcr-ev-badge.warning {
  background: rgba(245,158,11,.08); color: #f59e0b;
  border: 1px solid rgba(245,158,11,.15);
  font-size: 11px;
}
.dcr-ev-badge.info {
  background: rgba(107,114,128,.08); color: #6b7280;
  border: 1px solid rgba(107,114,128,.15);
  font-size: 9px; font-style: italic;
}

.dcr-ev-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.dcr-ev-sev {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 8px; font-weight: 700;
  letter-spacing: .06em; line-height: 1;
  margin-top: 2px;
}
.dcr-ev-sev.critical { color: #dc2626; }
.dcr-ev-sev.warning  { color: #f59e0b; }
.dcr-ev-sev.info     { color: #6b7280; }

/* Event meta row (severity + device name) */
.dcr-ev-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.dcr-ev-dev {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 7px; font-weight: 600;
  color: var(--muted, #6b7280);
  background: var(--surface2, rgba(0,0,0,.04));
  border: 1px solid var(--border, #e5e7eb);
  padding: 0 4px; border-radius: 3px;
  letter-spacing: .03em;
  max-width: 100px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALC700 DASHBOARD - V1 Layout (cards + 3-phase table)
═══════════════════════════════════════════════════════════════════════════ */

/* Card rows */
.alc-card-row {
  display: grid; gap: 6px; margin-bottom: 12px;
}
.alc-6col { grid-template-columns: repeat(6, 1fr); }
.alc-4col { grid-template-columns: repeat(4, 1fr); }
.alc-3col { grid-template-columns: repeat(3, 1fr); }
.alc-2col { grid-template-columns: repeat(2, 1fr); }

/* 3-Phase table */
.alc-3ph-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; margin-bottom: 10px;
}
.alc-3ph-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px;
}
.alc-3ph-table thead tr {
  background: var(--surface3, rgba(0,0,0,.03));
  border-bottom: 2px solid var(--border);
}
.alc-th-param {
  padding: 8px 14px; font-size: 9px; font-weight: 700;
  color: var(--muted); letter-spacing: .08em; text-align: left; width: 25%;
}
.alc-th-phase {
  padding: 8px 14px; font-size: 9px; font-weight: 700;
  color: #3b82f6; text-align: center; letter-spacing: .06em;
}
.alc-3ph-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.alc-3ph-table tbody tr:last-child { border-bottom: none; }
.alc-3ph-table tbody tr:hover { background: var(--surface2, rgba(0,0,0,.02)); }
.alc-td-param {
  padding: 9px 14px; font-size: 11px; color: var(--muted); font-weight: 600;
}
.alc-td-unit { color: var(--dim); font-size: 9px; }
.alc-td-val {
  padding: 9px 14px; text-align: center; font-weight: 700;
  color: var(--text); font-size: 15px;
}

/* Responsive */
@media (max-width: 860px) {
  .alc-6col { grid-template-columns: repeat(3, 1fr); }
  .alc-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .alc-6col { grid-template-columns: repeat(2, 1fr); }
  .alc-4col { grid-template-columns: repeat(2, 1fr); }
  .alc-3col { grid-template-columns: repeat(2, 1fr); }
  .alc-3ph-table { font-size: 11px; }
  .alc-th-param, .alc-td-param { padding: 6px 8px; font-size: 9px; }
  .alc-th-phase { padding: 6px 8px; font-size: 8px; }
  .alc-td-val { padding: 6px 8px; font-size: 13px; }

  /* Card values: cegah teks panjang seperti "18030:03:0..." atau "GENSET AT REST" memotong/overflow */
  .dcc-dynamic .dcc-pc-val {
    font-size: 14px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;
    white-space: normal;
  }
  .dcc-dynamic .dcc-pc-val .unit {
    font-size: 9px; opacity: .7; margin-left: 2px;
  }
  /* Card body: equal height + center content */
  .alc-card-row .dcc-dynamic {
    min-height: 64px;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* Tabel ELECTRICAL: cegah cell terpotong oleh FAB */
  .alc-3ph-wrap { margin-bottom: 16px; }

  /* Dashboard content padding-bottom - supaya scroll bisa lewat FAB ⚠ + bottom nav */
  #page-dashboard { padding-bottom: 96px; }
}
@media (max-width: 400px) {
  .alc-6col { grid-template-columns: repeat(2, 1fr); }
  .alc-4col { grid-template-columns: repeat(2, 1fr); }
  .alc-3col { grid-template-columns: 1fr 1fr; }
  .alc-2col { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTOMATION SCHEDULE - page styles
   ════════════════════════════════════════════════════════════════════════ */
.sch-tab {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; padding: 8px 16px; border: none; background: none;
  cursor: pointer; color: var(--muted, #6b7280);
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  transition: all .15s;
}
.sch-tab:hover { color: var(--text, #1f2937); }
.sch-tab.active {
  color: #1a8a7d; border-bottom-color: #1a8a7d;
}
.sch-tab-badge {
  margin-left: 6px; background: rgba(107,114,128,.12); color: var(--muted, #6b7280);
  padding: 1px 7px; border-radius: 8px; font-size: 9px; font-weight: 700;
}
.sch-tab.active .sch-tab-badge {
  background: rgba(26,138,125,.15); color: #1a8a7d;
}

.sch-list {
  background: var(--surface); border-radius: 10px;
  border: 1px solid var(--border); overflow: hidden;
}
.sch-list-head {
  display: grid;
  grid-template-columns: 30px 1fr 180px 1fr 130px 110px 95px;
  padding: 10px 16px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
}
.sch-list-row {
  display: grid;
  grid-template-columns: 30px 1fr 180px 1fr 130px 110px 95px;
  padding: 14px 16px; align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.sch-list-row:hover { background: var(--surface2); }
.sch-list-row:last-child { border-bottom: none; }

.sch-toggle {
  width: 32px; height: 18px; border-radius: 9px;
  background: var(--border); position: relative;
  cursor: pointer; transition: background .2s;
}
.sch-toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px; width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sch-toggle.on { background: var(--accent, #1a8a7d); }
.sch-toggle.on::after { transform: translateX(14px); }

.sch-name {
  font-weight: 600; font-size: 13px;
}
.sch-name-sub {
  font-size: 10px; color: var(--muted);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin-top: 2px;
}
.sch-target {
  font-size: 11px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
}
.sch-target-tag {
  display: inline-block;
  background: rgba(59,130,246,.1); color: #3b82f6;
  padding: 2px 6px; border-radius: 3px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 9px; font-weight: 700; margin-bottom: 2px;
}
.sch-flow-cell {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.sch-pill {
  padding: 2px 7px; border-radius: 10px;
  font-size: 9px; font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--accent, #1a8a7d); color: #fff;
}
.sch-pill.wait {
  background: rgba(245,158,11,.12); color: #f59e0b;
}
.sch-pill.action {
  background: rgba(26,138,125,.1); color: var(--accent, #1a8a7d);
}
.sch-pill.status {
  background: rgba(139,92,246,.1); color: #8b5cf6;
}
.sch-arrow { color: var(--dim, #9ca3af); font-size: 9px; }

.sch-trigger {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px; color: var(--text);
}
.sch-trig-type {
  font-size: 9px; color: var(--muted); text-transform: uppercase;
  margin-bottom: 2px; letter-spacing: .04em;
}
.sch-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
}
.sch-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim, #9ca3af);
}
.sch-status-dot.ok { background: #22c55e; }
.sch-status-dot.fail { background: #ef4444; }
.sch-status-dot.partial { background: #f59e0b; }
.sch-row-actions { display: flex; gap: 4px; }

/* Execution table */
.sch-exec-head {
  display: grid;
  grid-template-columns: 140px 1fr 150px 80px 100px 80px;
  padding: 10px 16px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
}
.sch-exec-row {
  display: grid;
  grid-template-columns: 140px 1fr 150px 80px 100px 80px;
  padding: 12px 16px; align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.sch-exec-row:last-child { border-bottom: none; }
.sch-exec-time {
  font-family: 'Source Code Pro', monospace;
  font-size: 11px;
}
.sch-exec-result {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sch-exec-result.ok { background: rgba(34,197,94,.1); color: #22c55e; }
.sch-exec-result.fail { background: rgba(239,68,68,.1); color: #ef4444; }
.sch-exec-result.partial { background: rgba(245,158,11,.12); color: #f59e0b; }
.sch-exec-result.running { background: rgba(59,130,246,.1); color: #3b82f6; }

/* Modal radio cards */
.sch-radio-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.sch-radio-card {
  padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: 7px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
}
.sch-radio-card:hover { border-color: var(--accent-light, #349189); }
.sch-radio-card.active {
  border-color: var(--accent, #1a8a7d); background: rgba(26,138,125,.08);
}
.sch-radio-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  position: relative; transition: all .15s;
}
.sch-radio-card.active .sch-radio-dot { border-color: var(--accent, #1a8a7d); }
.sch-radio-card.active .sch-radio-dot::after {
  content: ''; position: absolute;
  inset: 2px; border-radius: 50%; background: var(--accent, #1a8a7d);
}

/* Day picker */
.sch-day-picker { display: flex; gap: 4px; }
.sch-day-btn {
  width: 38px; height: 38px; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface); cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--muted); transition: all .12s;
}
.sch-day-btn:hover { border-color: var(--accent-light, #349189); }
.sch-day-btn.active {
  background: var(--accent, #1a8a7d); color: #fff;
  border-color: var(--accent, #1a8a7d);
}

/* Flow builder */
.sch-flow-builder {
  background: var(--surface2); border-radius: 9px;
  padding: 12px; border: 1px solid var(--border);
  margin-bottom: 8px;
  min-height: 50px;
}
.sch-step-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 10px 12px; border-radius: 7px;
  margin-bottom: 8px;
  transition: all .15s;
}
.sch-step-row:last-child { margin-bottom: 0; }
.sch-step-row:hover { border-color: var(--accent-light, #349189); }
.sch-step-num {
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--accent, #1a8a7d); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Source Code Pro', monospace;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.sch-step-num.wait { background: #f59e0b; }
.sch-step-num.status { background: #8b5cf6; }
.sch-step-handle {
  color: var(--dim, #9ca3af); cursor: grab; font-size: 14px;
  user-select: none;
}
.sch-step-select {
  flex: 1; padding: 6px 9px; border: 1px solid var(--border);
  border-radius: 5px; font-size: 12px; font-weight: 600;
  font-family: 'Poppins', sans-serif; background: var(--surface);
  cursor: pointer; min-width: 100px;
}
.sch-step-select:focus { outline: none; border-color: var(--accent, #1a8a7d); }
.sch-step-param {
  width: 70px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 5px; font-size: 12px; text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--surface);
}
.sch-step-param-label {
  font-size: 10px; color: var(--muted);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sch-step-actions { display: flex; gap: 3px; flex-shrink: 0; }
.sch-step-btn {
  width: 24px; height: 24px; border-radius: 4px; border: none;
  background: transparent; cursor: pointer;
  color: var(--muted); transition: all .12s;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.sch-step-btn:hover { background: var(--surface2); color: var(--text); }
.sch-step-btn.del:hover { color: #ef4444; background: rgba(239,68,68,.1); }

.sch-add-step {
  padding: 10px; background: transparent;
  border: 1.5px dashed var(--border); border-radius: 7px;
  color: var(--muted); cursor: pointer; width: 100%;
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 600;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sch-add-step:hover {
  border-color: var(--accent, #1a8a7d); color: var(--accent, #1a8a7d);
  background: rgba(26,138,125,.06);
}

/* Execution detail */
.sch-exec-summary {
  background: rgba(34,197,94,.08); border-radius: 7px;
  padding: 10px 14px; margin-bottom: 14px;
  border-left: 3px solid #22c55e;
}
.sch-exec-summary.fail {
  background: rgba(239,68,68,.08); border-left-color: #ef4444;
}
.sch-exec-summary.partial {
  background: rgba(245,158,11,.08); border-left-color: #f59e0b;
}
.sch-timeline {
  position: relative; padding-left: 20px;
}
.sch-timeline::before {
  content: ''; position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.sch-tl-item {
  position: relative; margin-bottom: 12px;
  font-size: 12px;
}
.sch-tl-item::before {
  content: ''; position: absolute;
  left: -16px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent, #1a8a7d);
}
.sch-tl-item.fail::before { border-color: #ef4444; background: #ef4444; }

@media (max-width: 1100px) {
  .sch-list-head, .sch-list-row {
    grid-template-columns: 30px 1fr 130px 1fr 110px 95px 80px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   NO DEVICE EMPTY STATE - modern design
   ════════════════════════════════════════════════════════════════════════ */
.dash-no-device {
  display: none;
  position: absolute; inset: -16px;
  z-index: 60;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 50%, #e5f4f1 100%);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 40px 20px; text-align: center;
}
.dash-no-device.visible { display: flex; }

.nd-art {
  position: relative;
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}

.nd-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(26,138,125,.3);
  animation: nd-pulse 2.4s ease-out infinite;
}
.nd-pulse-ring.delay {
  animation-delay: 1.2s;
}
@keyframes nd-pulse {
  0% { transform: scale(.5); opacity: 1; border-color: rgba(26,138,125,.5); }
  100% { transform: scale(1.4); opacity: 0; border-color: rgba(26,138,125,0); }
}

.nd-icon-modern {
  position: relative;
  width: 88px; height: 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, #1a8a7d 0%, #166466 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow:
    0 12px 32px rgba(26,138,125,.35),
    0 4px 12px rgba(26,138,125,.2),
    inset 0 1px 0 rgba(255,255,255,.15);
}
.nd-icon-modern svg {
  width: 48px; height: 48px;
}

.nd-title-modern {
  font-family: 'Poppins', sans-serif;
  font-size: 22px; font-weight: 700;
  color: #1f2937;
  letter-spacing: -.01em;
  margin-top: 4px;
}

.nd-sub-modern {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.65; max-width: 420px;
}

.nd-status-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 100px;
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.nd-status-row {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
}

.nd-status-dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  position: relative;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: nd-status-pulse 1.8s infinite;
}
@keyframes nd-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.nd-status-label {
  color: #22c55e; font-weight: 700;
  letter-spacing: .04em;
}
.nd-status-divider { color: #d1d5db; }
.nd-status-meta { color: #6b7280; font-weight: 500; }

.nd-actions-modern {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 6px;
}

.nd-btn-modern {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 10px 20px; border-radius: 9px;
  cursor: pointer; transition: all .2s ease;
  border: none;
}
.nd-btn-modern.primary {
  background: linear-gradient(135deg, #1a8a7d 0%, #166466 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(26,138,125,.3);
}
.nd-btn-modern.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26,138,125,.4);
}
.nd-btn-modern.primary:active {
  transform: translateY(0);
}
.nd-btn-modern.secondary {
  background: #ffffff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}
.nd-btn-modern.secondary:hover {
  color: #1f2937;
  border-color: #1a8a7d;
  background: #f9fafb;
}

/* ════════════════════════════════════════════════════════════════════════
   ALC700 - Per-Lamp Control Section (revisi #3)
   Renders below ALL LIGHTS as a separate panel with 4 rows × LED+ON+OFF.
   Disabled when not in MANUAL mode (per protocol: coil 22-29 only active
   when system in manual).
   ════════════════════════════════════════════════════════════════════════ */
.alc-per-lamp {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface2, #f8fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.alc-per-lamp-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.alc-per-lamp-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--muted, #6b7280);
}
.alc-per-lamp-hint {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 9px; letter-spacing: .04em;
  color: #f59e0b;
  transition: color .2s;
}
.alc-per-lamp-grid {
  display: grid; gap: 6px;
}
.alc-lamp-row {
  display: grid;
  grid-template-columns: 60px 12px 36px 1fr 1fr;
  gap: 8px; align-items: center;
  padding: 6px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  transition: border-color .15s;
}
.alc-lamp-num {
  font-family: 'Source Code Pro', 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--text, #1f2937);
}
.alc-lamp-led {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(156,163,175,.25);
  border: 1.5px solid rgba(156,163,175,.4);
  transition: all .2s ease;
}
.alc-lamp-led.on {
  background: linear-gradient(135deg, #fef3c7, #fcd34d);
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245,158,11,.55);
}
.alc-lamp-state {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted, #6b7280);
  text-align: center;
}
.alc-lamp-state.on  { color: #f59e0b; }
.alc-lamp-state.off { color: #6b7280; }
.alc-lamp-btn {
  padding: 6px 8px; border: none; border-radius: 5px; cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  transition: all .15s ease;
}
.alc-lamp-btn:disabled { cursor: not-allowed; }
.alc-lamp-btn.alc-lamp-on  { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f; }
.alc-lamp-btn.alc-lamp-off { background: linear-gradient(135deg, #475569, #64748b); color: #fff; }
.alc-lamp-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.alc-lamp-btn.loading { opacity: .55; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════
   Refresh State button (revisi #6) - kanan atas REMOTE CONTROL header
   ════════════════════════════════════════════════════════════════════════ */
#rc-refresh-btn:hover:not(:disabled) {
  color: var(--accent, #1a8a7d) !important;
  border-color: var(--accent, #1a8a7d) !important;
}
#rc-refresh-btn:disabled { opacity: .65; cursor: wait; }

/* Reuse existing @keyframes spin defined earlier in this file (line ~835).
   The icon spins via inline `style.animation = 'spin 1s linear infinite'`
   set by rcRefreshState() in dashboard.js. */

  /* ════════════════════════════════════════════════════════════════════════════
     MULTIPLE DASHBOARD - Wall Display style multi-genset overview
     Tower lamp panel with mode badge, lamp outputs, sensor block, real-time update.
     ════════════════════════════════════════════════════════════════════════════ */

  /* ── Page header ── */
  .md-page-head {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: linear-gradient(180deg, rgba(26,138,125,0.04) 0%, transparent 100%);
  }
  .md-page-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text, #1f2937);
    margin-bottom: 4px;
  }
  .md-page-sub {
    font-size: 12px;
    color: var(--muted, #6b7280);
    letter-spacing: 0.3px;
  }

  /* ── Toolbar ── */
  .md-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: var(--surface, #f9fafb);
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
  .md-tb-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .md-tb-group label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted, #6b7280);
    text-transform: uppercase;
  }
  .md-tb-group select {
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    padding: 7px 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    border-radius: 6px;
    color: var(--text, #1f2937);
    min-width: 160px;
  }

  /* Summary pills */
  .md-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .md-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    color: var(--text, #1f2937);
    letter-spacing: 0.5px;
  }
  .md-pill strong { font-weight: 700; }
  .md-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .md-pill.running { border-color: rgba(34,197,94,0.4); }
  .md-pill.running .md-pill-dot { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
  .md-pill.starting { border-color: rgba(245,158,11,0.4); }
  .md-pill.starting .md-pill-dot { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
  .md-pill.stopping { border-color: rgba(168,85,247,0.4); }
  .md-pill.stopping .md-pill-dot { background: #a855f7; box-shadow: 0 0 6px #a855f7; }
  .md-pill.fault   { border-color: rgba(239,68,68,0.4); }
  .md-pill.fault   .md-pill-dot { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
  .md-pill.off     { border-color: rgba(59,130,246,0.4); }
  .md-pill.off     .md-pill-dot { background: #3b82f6; }
  .md-pill.other   { border-color: rgba(168,85,247,0.4); }
  .md-pill.other   .md-pill-dot { background: #a855f7; }
  .md-pill.total   { background: rgba(26,138,125,0.08); border-color: rgba(26,138,125,0.4); color: #1a8a7d; }

  .md-tb-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
  }
  .md-tb-btn {
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    padding: 7px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
  }
  .md-tb-btn:hover { color: var(--text); border-color: var(--text); }
  .md-tb-btn.active {
    background: rgba(26,138,125,0.1);
    border-color: #1a8a7d;
    color: #1a8a7d;
  }
  .md-tb-btn.spinning .ri { animation: md-spin 0.8s linear infinite; }
  @keyframes md-spin { to { transform: rotate(360deg); } }

  /* ── Grid ── */
  .md-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    padding: 18px 24px 28px;
  }

  /* Empty state */
  .md-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--muted, #6b7280);
  }
  .md-empty-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.4; }
  .md-empty-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .md-empty-sub   { font-size: 12px; }

  /* ── Panel ── */
  .md-panel {
    position: relative;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-top: 3px solid #94a3b8;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
  }
  .md-panel:hover {
    border-color: #1a8a7d;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26,138,125,0.12);
  }
  .md-panel[data-bucket="running"]  { border-top-color: #22c55e; }
  .md-panel[data-bucket="off"]      { border-top-color: #3b82f6; }
  .md-panel[data-bucket="fault"]    { border-top-color: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); animation: md-pulse-fault 2s infinite; }
  .md-panel[data-bucket="starting"] { border-top-color: #f59e0b; }
  .md-panel[data-bucket="stopping"] { border-top-color: #a855f7; }
  .md-panel[data-bucket="unknown"]  { border-top-color: #94a3b8; }

  @keyframes md-pulse-fault {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
  }

  /* Emergency stop banner */
  .md-emergency {
    background: #ef4444;
    color: #fff;
    padding: 6px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    animation: md-blink 0.8s infinite;
  }
  @keyframes md-blink {
    0%, 100% { background: #ef4444; }
    50%      { background: #dc2626; }
  }

  /* Header - name + mode badge */
  .md-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px 10px;
    border-bottom: 1px dashed var(--border, #e5e7eb);
  }
  .md-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .md-conn {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
  }
  .md-conn.offline { background: #94a3b8; box-shadow: none; }
  .md-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #1f2937);
    letter-spacing: 0.3px;
  }
  .md-mode {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 8px;
    border: 1px solid;
    border-radius: 3px;
  }

  /* Tower lamp strip - 5 vertical lamps */
  .md-tower {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 8px;
    gap: 4px;
  }
  .md-lamp {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    background: rgba(0,0,0,0.03);
    border-radius: 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #94a3b8;
    text-transform: uppercase;
    transition: all 0.2s;
  }
  .md-led {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    flex-shrink: 0;
  }
  .md-lamp.active { color: var(--text, #1f2937); }
  .md-lamp.active .md-led { border-color: transparent; }
  .md-lamp.active.off       .md-led { background: #3b82f6; box-shadow: 0 0 10px #3b82f6; }
  .md-lamp.active.starting  .md-led { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }
  .md-lamp.active.running   .md-led { background: #22c55e; box-shadow: 0 0 10px #22c55e; animation: md-pulse-led 2s infinite; }
  .md-lamp.active.stopping  .md-led { background: #a855f7; box-shadow: 0 0 10px #a855f7; }
  .md-lamp.active.fault     .md-led { background: #ef4444; box-shadow: 0 0 12px #ef4444; animation: md-pulse-led 1s infinite; }

  @keyframes md-pulse-led {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.85; }
  }

  /* Status detail (status_text from ALC700) */
  .md-status-detail {
    padding: 6px 14px 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .md-sd-dot { width: 6px; height: 6px; border-radius: 50%; }
  /* Live "running" heartbeat - reuses the lamp-tower's own pulse keyframe so the
     whole panel speaks one consistent "this is live" visual language. */
  .md-panel[data-bucket="running"] .md-sd-dot { animation: md-pulse-led 2s infinite; }

  /* Lamp Output strip */
  .md-lampouts {
    padding: 8px 14px 10px;
    background: rgba(0,0,0,0.02);
    border-top: 1px dashed var(--border, #e5e7eb);
    border-bottom: 1px dashed var(--border, #e5e7eb);
  }
  .md-lampouts-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted, #6b7280);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
  }
  .md-lo-pending {
    font-size: 8px;
    font-weight: 600;
    color: #f59e0b;
    letter-spacing: 0.3px;
    text-transform: none;
    background: rgba(245,158,11,0.1);
    padding: 1px 6px;
    border-radius: 999px;
    cursor: help;
  }
  .md-lampouts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .md-lo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    background: rgba(0,0,0,0.04);
    border-radius: 3px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
  }
  .md-lo-led {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d1d5db;
  }
  .md-lo.on { color: var(--text, #1f2937); }
  .md-lo.on .md-lo-led { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
  .md-lo.no-data { opacity: 0.5; }
  .md-lo.no-data .md-lo-led {
    background: transparent;
    border: 1px dashed #cbd5e1;
  }

  /* Sensor block 3x2 */
  .md-sensors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border, #e5e7eb);
  }
  .md-sens {
    background: var(--bg, #fff);
    padding: 7px 8px;
    text-align: center;
  }
  .md-sens-l {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted, #6b7280);
    text-transform: uppercase;
  }
  .md-sens-v {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #1f2937);
    margin-top: 2px;
  }
  .md-sens-v small {
    font-size: 8px;
    color: var(--muted, #6b7280);
    font-weight: 500;
  }

  /* Footer - simple: HM + last update timestamp */
  .md-foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.02);
    border-top: 1px solid var(--border, #e5e7eb);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    color: var(--muted, #6b7280);
    letter-spacing: 0.3px;
  }
  /* Default row - flex-column: label atas, value bawah */
  .md-foot-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
  }
  .md-foot-row + .md-foot-row {
    padding-top: 4px;
    border-top: 1px dashed rgba(0,0,0,0.06);
  }
  /* GPS row pakai grid biar pill bisa di kanan, info column di kiri */
  .md-foot-row-gps {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .md-foot-row-gps .md-foot-gps-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
  }
  /* HM row tetap kompak */
  .md-foot-row-hm .md-foot-time {
    color: var(--text, #1f2937);
    font-weight: 700;
  }
  .md-foot-update {
    font-weight: 600;
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .md-foot-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--muted, #94a3b8);
    text-transform: uppercase;
  }
  .md-foot-time {
    /* .md-foot (the shared container) switched to Inter for its labels - this
       is the actual HM/last-update reading, needs its own explicit mono back. */
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text, #1f2937);
    letter-spacing: 0.3px;
  }
  .md-foot-gps-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .md-foot-gps-pill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 4px currentColor;
  }
  .md-foot-gps-pill.online {
    background: rgba(245,158,11,0.15);
    color: #b45309;
  }
  .md-foot-gps-pill.offline {
    background: rgba(220,38,38,0.1);
    color: #b91c1c;
  }

  /* Footer info — same banner formula as .cached-banner (dashboard): flex row,
     solid tinted background + border, an icon carrying the "this is a hint"
     signal instead of a text label doing it. */
  .md-foot-info {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 10px 24px 22px;
    padding: 9px 14px;
    background: rgba(26,138,125,0.06);
    border: 1px solid rgba(26,138,125,0.25);
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10.5px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: var(--muted, #6b7280);
  }
  .md-foot-info svg { flex-shrink: 0; margin-top: 1px; color: #1a8a7d; }
  .md-foot-info strong { color: #1a8a7d; }

  /* ── Wall Mode (TV display) - scale up everything ── */
  body.md-wall-mode .md-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
  }
  body.md-wall-mode .md-name { font-size: 20px; }
  body.md-wall-mode .md-mode { font-size: 12px; padding: 4px 12px; }
  body.md-wall-mode .md-lamp { font-size: 13px; padding: 7px 10px; }
  body.md-wall-mode .md-led  { width: 14px; height: 14px; }
  body.md-wall-mode .md-status-detail { font-size: 12px; }
  body.md-wall-mode .md-sens-l { font-size: 10px; }
  body.md-wall-mode .md-sens-v { font-size: 18px; }
  body.md-wall-mode .md-lampouts-label { font-size: 10px; }
  body.md-wall-mode .md-lo { font-size: 11px; }
  body.md-wall-mode .md-lo-led { width: 11px; height: 11px; }
  body.md-wall-mode .md-foot { font-size: 11px; }

  /* ── Compact Mode - shrink everything so more panels fit per screen ── */
  body.md-compact-mode .md-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 10px 14px 18px; }
  body.md-compact-mode .md-head { padding: 7px 9px 5px; }
  body.md-compact-mode .md-name { font-size: 11px; }
  body.md-compact-mode .md-mode { font-size: 8px; padding: 2px 6px; }
  /* Only the current status matters at a glance here — the full off/starting/
     running/stopping/fault tower list is dropped; .md-status-detail (already a
     single current-status line) is kept and promoted to carry that job alone,
     coloured per bucket via the existing data-bucket attribute (no Vue change
     needed — same trick as the border-top-color rules above). */
  body.md-compact-mode .md-tower { display: none; }
  body.md-compact-mode .md-status-detail { font-size: 10px; font-weight: 700; padding: 8px 9px 6px; gap: 5px; }
  body.md-compact-mode .md-sd-dot { width: 8px; height: 8px; }
  body.md-compact-mode .md-panel[data-bucket="running"]  .md-status-detail { color: #16a34a; }
  body.md-compact-mode .md-panel[data-bucket="off"]      .md-status-detail { color: #2563eb; }
  body.md-compact-mode .md-panel[data-bucket="starting"] .md-status-detail { color: #d97706; }
  body.md-compact-mode .md-panel[data-bucket="stopping"] .md-status-detail { color: #9333ea; }
  body.md-compact-mode .md-panel[data-bucket="fault"]    .md-status-detail { color: #dc2626; }
  body.md-compact-mode .md-panel[data-bucket="unknown"]  .md-status-detail { color: #64748b; }
  body.md-compact-mode .md-lampouts { padding: 5px 9px 6px; }
  body.md-compact-mode .md-lampouts-label { font-size: 7px; margin-bottom: 4px; }
  body.md-compact-mode .md-lampouts-grid { gap: 3px; }
  body.md-compact-mode .md-lo { font-size: 8px; padding: 3px 0; }
  body.md-compact-mode .md-lo-led { width: 7px; height: 7px; }
  body.md-compact-mode .md-sens { padding: 4px 5px; }
  body.md-compact-mode .md-sens-l { font-size: 7px; }
  body.md-compact-mode .md-sens-v { font-size: 11px; margin-top: 1px; }
  body.md-compact-mode .md-foot { padding: 6px 9px; font-size: 9px; gap: 2px; }
  body.md-compact-mode .md-foot-row + .md-foot-row { padding-top: 3px; }
  body.md-compact-mode .md-foot-label { font-size: 7px; }
  body.md-compact-mode .md-foot-time { font-size: 9px; }
  body.md-compact-mode .md-foot-gps-pill { font-size: 7px; padding: 1px 6px; }

  /* ── Print stylesheet - disable animations for screenshot/print ── */
  @media print {
    .md-panel { animation: none !important; box-shadow: none !important; }
    .md-led, .md-emergency { animation: none !important; }
    .md-tb-actions { display: none; }
  }

  /* ── Mobile responsive ── */
  @media (max-width: 768px) {
    .md-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 14px; }
    .md-toolbar { padding: 12px 14px; gap: 10px; }
    .md-summary { width: 100%; order: 3; }
    .md-tb-actions { order: 2; margin-left: 0; }
    .md-tb-btn { font-size: 9px; padding: 6px 10px; }
    .md-name { font-size: 12px; }
    .md-sens-v { font-size: 12px; }
  }

  /* ────────────────────────────────────────────────────────────────────────
     REPORT - Quick Range Preset Buttons (replace interval dropdown)
     ──────────────────────────────────────────────────────────────────────── */
  .rg-presets {
    display: flex;
    gap: 4px;
    align-items: stretch;
  }
  .rg-preset-btn {
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e5e7eb);
    padding: 7px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-transform: uppercase;
  }
  .rg-preset-btn:hover {
    color: var(--text, #1f2937);
    border-color: var(--text, #1f2937);
  }
  .rg-preset-btn.active {
    background: rgba(26,138,125,0.1);
    border-color: var(--teal, #1a8a7d);
    color: var(--teal, #1a8a7d);
  }

  /* ════════════════════════════════════════════════════════════════════════════
     UMS - Universal Multi-Select dropdown component
     Used by: Report device picker, Modbus History units, GPS History device.
     Replaces native <select multiple> with brand-consistent dropdown.
     ════════════════════════════════════════════════════════════════════════════ */

  /* Host element - override parent constraints that might clip dropdown */
  .ums-host {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Wrapper - relative positioning anchor for absolute dropdown */
  .ums-wrap {
    position: relative;
    display: inline-block;
    min-width: 180px;
    width: 100%;
  }

  /* Trigger button - looks like a regular dropdown */
  .ums-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e5e7eb);
    padding: 7px 10px 7px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text, #1f2937);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-align: left;
    min-height: 34px;
    gap: 8px;
  }
  .ums-button:hover {
    border-color: var(--text, #1f2937);
  }
  .ums-button:focus-visible {
    outline: none;
    border-color: var(--teal, #1a8a7d);
    box-shadow: 0 0 0 3px rgba(26,138,125,0.12);
  }

  /* Chips area - shows current selection summary */
  .ums-chips {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .ums-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    background: rgba(26,138,125,0.1);
    color: var(--teal, #1a8a7d);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  .ums-chip-count {
    background: var(--teal, #1a8a7d);
    color: #fff;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }

  /* Arrow indicator */
  .ums-arrow {
    color: var(--muted, #6b7280);
    font-size: 9px;
    line-height: 1;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
  }
  .ums-wrap.open .ums-arrow,
  .ums-dropdown.open ~ * .ums-arrow {
    transform: rotate(180deg);
  }

  /* Dropdown panel - absolute positioned below button */
  .ums-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
    max-height: 320px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: ums-fade-in 0.15s ease-out;
  }
  .ums-dropdown.open { display: flex; }

  @keyframes ums-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Search box (only when devices > 8) */
  .ums-search {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--surface2, #f7f8fa);
    flex-shrink: 0;
  }
  .ums-search input {
    width: 100%;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    padding: 6px 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    color: var(--text, #1f2937);
    border-radius: 5px;
  }
  .ums-search input:focus {
    outline: none;
    border-color: var(--teal, #1a8a7d);
  }
  .ums-search input::placeholder {
    color: var(--dim, #94a3b8);
    letter-spacing: 0.3px;
  }

  /* List container - scrollable */
  .ums-list {
    overflow-y: auto;
    padding: 4px 0;
    flex: 1;
    min-height: 0;
  }
  .ums-list::-webkit-scrollbar {
    width: 8px;
  }
  .ums-list::-webkit-scrollbar-track {
    background: var(--surface2, #f7f8fa);
  }
  .ums-list::-webkit-scrollbar-thumb {
    background: var(--border, #e5e7eb);
    border-radius: 4px;
  }
  .ums-list::-webkit-scrollbar-thumb:hover {
    background: var(--muted, #6b7280);
  }

  /* List item (label wrapping checkbox/radio) - reused class .hist-check-item */
  .ums-list .hist-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    color: var(--text, #1f2937);
    transition: background 0.1s ease;
    user-select: none;
  }
  .ums-list .hist-check-item:hover {
    background: rgba(26,138,125,0.05);
  }
  .ums-list .hist-check-item input[type="checkbox"],
  .ums-list .hist-check-item input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: var(--teal, #1a8a7d);
    cursor: pointer;
    flex-shrink: 0;
  }
  .ums-list .hist-check-item input:checked ~ .hci-name {
    color: var(--teal, #1a8a7d);
    font-weight: 700;
  }
  /* Highlight whole row when checked */
  .ums-list .hist-check-item:has(input:checked) {
    background: rgba(26,138,125,0.06);
  }

  /* Connection dot indicator */
  .hci-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dim, #94a3b8);
    flex-shrink: 0;
  }
  .hci-dot.on {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
  }
  .hci-dot.off {
    background: var(--dim, #94a3b8);
  }

  /* Device name */
  .hci-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.2px;
  }
  .hci-name strong {
    font-weight: 700;
  }

  /* Hidden state for filtered items (when search is used) */
  .ums-list .hist-check-item.hidden {
    display: none;
  }

  /* Separator between "Semua Generator" and individual devices */
  .ums-list .hist-check-item[data-role="all"] {
    border-bottom: 1px solid var(--border, #e5e7eb);
    margin-bottom: 4px;
    padding-bottom: 9px;
  }

  /* ════════════════════════════════════════════════════════════════════════════
     ALERTS - Device cards grid + alert list
     ════════════════════════════════════════════════════════════════════════════ */

  /* Device cards container - responsive grid */
  .alert-dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }

  /* Individual device card - accent border colored by severity */
  .alert-dev-card {
    position: relative;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-left: 3px solid var(--accent, #94a3b8);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.18s ease;
    overflow: hidden;
  }
  .alert-dev-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: var(--accent, #94a3b8);
  }
  .alert-dev-card.active {
    background: rgba(26,138,125,0.04);
    border-color: var(--accent, #94a3b8);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  }

  /* Card header - device name + total count */
  .adc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .adc-card-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #1f2937);
    letter-spacing: 0.3px;
  }
  .adc-card-total {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent, #94a3b8);
    line-height: 1;
  }

  /* Severity count pills - critical/warning/info */
  .adc-card-counts {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .adc-card-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .adc-card-pill.adc-crit {
    background: rgba(239,68,68,0.12);
    color: #b91c1c;
  }
  .adc-card-pill.adc-warn {
    background: rgba(245,158,11,0.12);
    color: #b45309;
  }
  .adc-card-pill.adc-info {
    background: rgba(59,130,246,0.12);
    color: #1d4ed8;
  }

  /* Card arrow - expand indicator */
  .adc-card-arrow {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    color: var(--muted, #6b7280);
    letter-spacing: 0.5px;
    padding-top: 6px;
    border-top: 1px dashed var(--border, #e5e7eb);
  }
  .alert-dev-card.active .adc-card-arrow {
    color: var(--teal, #1a8a7d);
    font-weight: 700;
  }

  /* Hint when no card clicked yet */
  .alert-hint-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(26,138,125,0.04);
    border: 1px dashed rgba(26,138,125,0.4);
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    color: var(--muted, #6b7280);
    letter-spacing: 0.3px;
  }
  .alert-hint-empty svg {
    color: var(--teal, #1a8a7d);
    flex-shrink: 0;
  }

  /* Filter banner - shown when device filter active */
  .alert-filter-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(26,138,125,0.06);
    border: 1px solid rgba(26,138,125,0.3);
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    color: var(--text, #1f2937);
    letter-spacing: 0.3px;
  }
  .adc-clear {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    padding: 5px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.15s ease;
  }
  .adc-clear:hover {
    color: var(--text, #1f2937);
    border-color: var(--text, #1f2937);
  }

  /* Empty state - no alerts at all */
  .alert-empty-ok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    background: rgba(34,197,94,0.04);
    border: 1px dashed rgba(34,197,94,0.3);
    border-radius: 10px;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--muted, #6b7280);
  }
  /* Soft breathing glow on the SVG check icon already in the markup - the old
     ::before duplicated it with a second, plain-text "✓" stacked on top. */
  .alert-empty-ok svg { animation: alert-ok-pulse 2.4s ease-in-out infinite; }
  @keyframes alert-ok-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(34,197,94,0)); }
    50%      { filter: drop-shadow(0 0 8px rgba(34,197,94,.55)); }
  }

  /* Mobile responsive */
  @media (max-width: 640px) {
    .alert-dev-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
    .adc-card-name { font-size: 12px; }
    .adc-card-total { font-size: 16px; }
  }

  /* Mini inline spinner (used in loading text states) */
  .mspin {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--border, #e5e7eb);
    border-top-color: var(--teal, #1a8a7d);
    border-radius: 50%;
    animation: mspin-rot 0.7s linear infinite;
    vertical-align: -1px;
    margin-right: 4px;
  }
  @keyframes mspin-rot { to { transform: rotate(360deg); } }

  /* Action buttons inside dropdown - Pilih Semua / Hapus Semua */
  .ums-actions {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--surface2, #f7f8fa);
    flex-shrink: 0;
  }
  .ums-act-btn {
    flex: 1;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    padding: 6px 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.15s ease;
    text-transform: uppercase;
  }
  .ums-act-btn:hover {
    background: rgba(26,138,125,0.08);
    border-color: var(--teal, #1a8a7d);
    color: var(--teal, #1a8a7d);
  }
  .ums-act-btn:active {
    transform: translateY(1px);
  }

  /* ════════════════════════════════════════════════════════════════════════════
     TREND CARD - MIN/MAX layout (running-aware refactor)
     Surgical CSS untuk 5 class baru yang dipakai history.js MIN/MAX block.
     CSS dasar .trend-card, .tc-top, .tc-label, .tc-spark, .tc-meta sudah ada.
     ════════════════════════════════════════════════════════════════════════════ */

  /* Scope badge - "engine running" / "semua data" */
  .tc-scope-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: var(--muted, #6b7280);
    letter-spacing: 0.3px;
  }
  .tc-scope-badge.tc-scope-run {
    color: #16a34a;
  }
  .tc-scope-badge.tc-scope-all {
    color: var(--muted, #6b7280);
  }

  /* MIN/MAX 2-column layout */
  .tc-minmax {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 8px 0 10px;
  }
  .tc-mm-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tc-mm-key {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted, #6b7280);
    text-transform: uppercase;
  }
  .tc-mm-min .tc-mm-key {
    color: #2563eb;
  }
  .tc-mm-max .tc-mm-key {
    color: #ea580c;
  }
  .tc-mm-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--text, #1f2937);
    line-height: 1.1;
    letter-spacing: 0.2px;
  }
  .tc-mm-val .tc-unit {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted, #6b7280);
    margin-left: 3px;
  }
  .tc-mm-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--muted, #6b7280);
    letter-spacing: 0.2px;
  }

  /* ════════════════════════════════════════════════════════════════════════════
     REPORT - Scope badge + Warn note pada summary cards (running-only filter)
     ════════════════════════════════════════════════════════════════════════════ */
  .rg-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
  }
  .rg-sc-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 999px;
    cursor: help;
    text-transform: lowercase;
  }
  .rg-sc-badge.rg-sc-run {
    background: rgba(34,197,94,0.1);
    color: #15803d;
  }
  .rg-sc-badge.rg-sc-all {
    background: rgba(0,0,0,0.05);
    color: var(--muted, #6b7280);
  }
  .rg-sc-badge.rg-sc-empty {
    background: rgba(245,158,11,0.1);
    color: #b45309;
  }
  .rg-summary-warn-note {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #b91c1c;
    margin-top: 4px;
    letter-spacing: 0.2px;
  }

  /* Threshold input group - muncul cuma saat type=temp-oil */
  .rg-threshold-group {
    animation: rg-fade-in 0.2s ease-out;
  }
  @keyframes rg-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .rg-threshold-group input[type="number"]:focus {
    outline: none;
    border-color: var(--teal, #1a8a7d) !important;
    box-shadow: 0 0 0 3px rgba(26,138,125,0.12);
  }

  /* ════════════════════════════════════════════════════════════════════════════
     REPORT - Status Legend untuk Run Hours line chart
     Inject ke .rg-chart-head, kasih color reference untuk segment line
     ════════════════════════════════════════════════════════════════════════════ */
  .rg-status-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-right: auto;
    padding: 4px 10px;
    background: rgba(0,0,0,0.03);
    border-radius: 6px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: help;
  }
  .rg-sl-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted, #6b7280);
    text-transform: uppercase;
  }
  .rg-sl-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text, #1f2937);
    text-transform: uppercase;
    cursor: help;
  }
  .rg-sl-dot {
    width: 10px;
    height: 3px;
    border-radius: 1px;
    box-shadow: 0 0 4px currentColor;
  }

  /* ════════════════════════════════════════════════════════════════════════════
     DASHBOARD - Device picker chip bucket colors (Opsi A)
     Background ikut bucket status (sama mapping dengan multi-dashboard).
     Active state: bucket color tetap + border teal + ring glow (info preserved).
     Override existing .pdp-chip + .pdp-chip.active dengan class bucket spesifik.
     ════════════════════════════════════════════════════════════════════════════ */
  .pdp-chip[class*="pdp-bucket-"] {
    color: white;
    border: 1.5px solid transparent;
    padding: 6px 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    transition: all 0.18s ease;
  }
  .pdp-chip.pdp-bucket-running  { background: #22c55e; }
  .pdp-chip.pdp-bucket-off      { background: #3b82f6; }
  .pdp-chip.pdp-bucket-starting { background: #f59e0b; }
  .pdp-chip.pdp-bucket-stopping { background: #a855f7; }
  .pdp-chip.pdp-bucket-fault    { background: #ef4444; }
  .pdp-chip.pdp-bucket-unknown  { background: #94a3b8; }

  /* Hover - subtle lift, jangan ganti color */
  .pdp-chip[class*="pdp-bucket-"]:hover {
    transform: translateY(-1px);
    filter: brightness(0.93);
    border-color: rgba(255,255,255,0.5);
    color: white;  /* override .pdp-chip:hover yg ganti ke amber */
  }

  /* Active state - Opsi A: border teal tebal + glow ring */
  .pdp-chip.active[class*="pdp-bucket-"] {
    background: inherit;  /* keep bucket color */
    border-color: var(--teal, #1a8a7d);
    color: white;
    box-shadow: 0 0 0 3px rgba(26,138,125,0.25), 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-1px);
  }
  /* Pertahankan bucket color override (.active rule lama set background ke amber) */
  .pdp-chip.pdp-bucket-running.active  { background: #22c55e; }
  .pdp-chip.pdp-bucket-off.active      { background: #3b82f6; }
  .pdp-chip.pdp-bucket-starting.active { background: #f59e0b; }
  .pdp-chip.pdp-bucket-stopping.active { background: #a855f7; }
  .pdp-chip.pdp-bucket-fault.active    { background: #ef4444; }
  .pdp-chip.pdp-bucket-unknown.active  { background: #94a3b8; }

  /* ════════════════════════════════════════════════════════════════════════════
     PER-LAMP CONTROL - Opsi A (tombol bulat compact)
     1 button per lampu, klik toggle ON/OFF.
     Compact layout: button kecil, gap minimal, no excess padding.
     ════════════════════════════════════════════════════════════════════════════ */

  /* Override grid container - compact spacing */
  .alc-per-lamp-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
    padding: 4px 0 0;
  }

  /* Card per lampu (button + label + state) - compact */
  .alc-lamp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
  }

  /* Tombol bulat utama - kecil */
  .alc-lamp-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border, #e5e7eb);
    background: var(--surface, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    padding: 0;
    flex-shrink: 0;
  }
  .alc-lamp-circle:hover:not(:disabled) {
    border-color: var(--text, #1f2937);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .alc-lamp-circle:active:not(:disabled) {
    transform: translateY(0);
  }
  .alc-lamp-circle:disabled {
    cursor: not-allowed;
  }

  /* Icon di dalam button - proporsional */
  .alc-lamp-icon {
    width: 20px;
    height: 20px;
    transition: all 0.2s;
  }

  /* State ON - kuning glow tapi softer */
  .alc-lamp-circle.on {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(251,191,36,0.45), 0 2px 6px rgba(0,0,0,0.08);
  }
  .alc-lamp-circle.on:hover:not(:disabled) {
    box-shadow: 0 0 18px rgba(251,191,36,0.55), 0 3px 10px rgba(0,0,0,0.1);
  }

  /* Label "LAMPU N" - compact font */
  .alc-lamp-card .alc-lamp-label {
    font-family: 'IBM Plex Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text, #1f2937);
    text-align: center;
    line-height: 1;
  }

  /* State badge ON / OFF / - - minimal */
  .alc-lamp-card .alc-lamp-state {
    font-family: 'IBM Plex Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,0.05);
    color: var(--muted, #6b7280);
    text-align: center;
    transition: all 0.2s;
    line-height: 1.4;
  }
  .alc-lamp-card.is-on .alc-lamp-state,
  .alc-lamp-card .alc-lamp-state.on {
    background: rgba(245,158,11,0.15);
    color: #b45309;
  }
  .alc-lamp-card .alc-lamp-state.off {
    background: rgba(0,0,0,0.05);
    color: var(--muted, #6b7280);
  }

  /* ── Responsive - tetap compact di semua size ── */
  /* Tablet & up - sedikit naik tapi tetap compact */
  @media (min-width: 768px) {
    .alc-per-lamp-grid {
      grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
      gap: 8px;
    }
    .alc-lamp-circle { width: 48px; height: 48px; }
    .alc-lamp-icon { width: 22px; height: 22px; }
  }

  /* Mobile small */
  @media (max-width: 480px) {
    .alc-per-lamp-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
    }
    .alc-lamp-circle { width: 40px; height: 40px; }
    .alc-lamp-icon { width: 18px; height: 18px; }
  }

  /* Mobile xs - tetap 4 col tapi paling kecil */
  @media (max-width: 360px) {
    .alc-per-lamp-grid { gap: 3px; }
    .alc-lamp-circle { width: 36px; height: 36px; border-width: 1.5px; }
    .alc-lamp-icon { width: 16px; height: 16px; }
    .alc-lamp-card .alc-lamp-label { font-size: 8px; }
  }

  /* ════════════════════════════════════════════════════════════════════════════
     GENERATOR MAP - Header table "NAMA GENERATOR | GPS STATUS"
     Sticky di atas fleet-unit-list. Alignment kolom matching row di bawah.
     ════════════════════════════════════════════════════════════════════════════ */
  .fleet-unit-thead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--surface2, #f7f8fa);
    border-top: 1px solid var(--border, #e5e7eb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted, #6b7280);
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .fleet-unit-thead-name {
    /* Indent equivalent dengan checkbox 14px + gap 10px + dot 8px + gap 10px = ~42px
       supaya text "NAMA GENERATOR" sejajar di atas device name di row */
    padding-left: 32px;
  }
  .fleet-unit-thead-status {
    /* Sejajar dengan badge tag di kanan row */
    padding-right: 0;
    flex-shrink: 0;
  }

/* ═══════════════════════════════════════════════════════════════════════════
   SENSOR DIAGNOSTIC PAGE
═══════════════════════════════════════════════════════════════════════════ */
  .sd-btn-refresh {
    font-size: 11px; font-weight: 600; padding: 7px 16px;
    border-radius: 5px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text2); cursor: pointer;
    letter-spacing: .04em; transition: background .12s, border-color .12s;
  }
  .sd-btn-refresh:hover { background: var(--surface2, #f7f8fa); border-color: var(--border2, #c8cdd6); }

  .sd-metric-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px; margin-bottom: 14px;
  }
  .sd-mc {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 5px; padding: 12px 14px 10px;
    border-left: 3px solid var(--muted); box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .sd-mc-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
  .sd-mc-value { font-size: 22px; font-weight: 800; line-height: 1; }

  .sd-unit-grid { display: flex; gap: 8px; flex-wrap: wrap; }
  .sd-unit-chip {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 5px; padding: 10px 14px; cursor: pointer; min-width: 170px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .12s, box-shadow .12s;
  }
  .sd-unit-chip:hover { border-color: var(--border2, #c8cdd6); }
  .sd-unit-chip.active { border-color: var(--text2); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
  .sd-unit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
  .sd-unit-name { font-size: 13px; font-weight: 700; color: var(--text); }
  .sd-unit-badges { display: flex; gap: 4px; }
  .sd-badge { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: .04em; border: 1px solid transparent; }
  .sd-badge-online { background: rgba(22,163,74,.08); color: var(--green); border-color: rgba(22,163,74,.25); }
  .sd-badge-offline { background: var(--surface2, #f7f8fa); color: var(--muted); border-color: var(--border); }
  .sd-unit-sensors { display: flex; gap: 6px; margin-top: 4px; }
  .sd-sensor-chip { font-size: 8px; font-weight: 600; padding: 1px 5px; border-radius: 3px; border: 1px solid; }
  .sd-unit-proto { font-size: 9px; color: var(--muted); margin-top: 3px; }

  .sd-sensor-list { display: flex; flex-direction: column; gap: 6px; }
  .sd-sensor-row {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: border-color .12s;
  }
  .sd-sensor-row.expanded { border-color: var(--border2, #c8cdd6); }
  .sd-sensor-header {
    padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;
    transition: background .1s;
  }
  .sd-sensor-header:hover { background: var(--surface2, #f7f8fa); }
  .sd-sensor-accent { width: 3px; height: 32px; border-radius: 2px; flex-shrink: 0; }
  .sd-sensor-info { flex: 1; }
  .sd-sensor-title-row { display: flex; align-items: center; gap: 8px; }
  .sd-sensor-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text); }
  .sd-sensor-tag { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: .04em; border: 1px solid; }
  .sd-sensor-conf { font-size: 9px; color: var(--muted); }
  .sd-sensor-issue { font-size: 12px; font-weight: 500; margin-top: 2px; }
  .sd-chevron { flex-shrink: 0; transition: transform .15s; color: var(--muted); }
  .sd-chevron.open { transform: rotate(180deg); }

  /* Grid-rows collapse trick: animates height without JS measurement. The row
     needs exactly one grid item (.sd-sensor-detail-inner) with overflow:hidden
     so 0fr genuinely clips it instead of just squashing overflowing content. */
  .sd-sensor-detail {
    display: grid;
    grid-template-rows: 0fr;
    border-top: 1px solid transparent;
    transition: grid-template-rows .22s ease, border-color .22s ease;
  }
  .sd-sensor-detail.open {
    grid-template-rows: 1fr;
    border-top-color: var(--border);
  }
  .sd-sensor-detail-inner { overflow: hidden; min-height: 0; }
  .sd-reco-box { margin: 12px 14px 0; padding: 10px 14px; border-radius: 5px; border-left: 3px solid var(--muted); }
  .sd-reco-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
  .sd-reco-text { font-size: 12px; color: var(--text2); line-height: 1.6; }

  .sd-evidence-wrap { margin: 12px 14px 0; }
  .sd-evidence-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .sd-evidence-table { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; width: 100%; }
  .sd-evidence-thead {
    display: grid; grid-template-columns: 110px 80px 70px 1fr;
    background: var(--surface2, #f7f8fa); padding: 6px 12px; gap: 8px;
    border-bottom: 1px solid var(--border);
  }
  .sd-evidence-th { font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
  .sd-evidence-tr { display: grid; grid-template-columns: 110px 80px 70px 1fr; padding: 5px 12px; gap: 8px; }
  .sd-evidence-tr:nth-child(even) { background: var(--surface2, #f7f8fa); }
  .sd-evidence-tr + .sd-evidence-tr { border-top: 1px solid rgba(0,0,0,.03); }
  .sd-ev-time { font-size: 11px; color: var(--text2); }
  .sd-ev-value { font-size: 11px; font-weight: 700; color: var(--text); }
  .sd-ev-engine { font-size: 9px; font-weight: 700; }
  .sd-ev-engine.running { color: var(--green); }
  .sd-ev-engine.off { color: var(--muted); }
  .sd-ev-note { font-size: 11px; color: var(--muted); }
  .sd-no-data { padding: 16px; text-align: center; color: var(--muted); font-size: 11px; }
  .sd-detail-footer { padding: 8px 14px 12px; font-size: 10px; color: var(--muted); }

  @media (max-width: 768px) {
    .sd-metric-grid { grid-template-columns: repeat(2, 1fr); }
    .sd-unit-chip { min-width: 140px; }
    .sd-evidence-thead, .sd-evidence-tr { grid-template-columns: 90px 65px 55px 1fr; }
  }

/* ════════════════════════════════════════════════════════════════════════
   ISSUE COMMAND TASK - list, status badges, target picker, detail
   (mengikuti design-system sch-* / dm-*)
   ════════════════════════════════════════════════════════════════════════ */
.ct-list-head {
  display: grid;
  grid-template-columns: 96px 1.3fr 1.15fr 150px 120px 92px;
  padding: 10px 16px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
}
.ct-list-row {
  display: grid;
  grid-template-columns: 96px 1.3fr 1.15fr 150px 120px 92px;
  padding: 13px 16px; align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.ct-list-row:hover { background: var(--surface2); }
.ct-list-row:last-child { border-bottom: none; }
.ct-cmd { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; color: var(--text); word-break: break-word; }
.ct-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ct-meta-sm { font-size: 10px; color: var(--muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Task status pill (active / done / cancelled) */
.ct-tstatus {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-transform: uppercase;
}
.ct-tstatus.active    { background: rgba(59,130,246,.12); color: #3b82f6; }
.ct-tstatus.done      { background: rgba(34,197,94,.12);  color: #22c55e; }
.ct-tstatus.cancelled { background: rgba(107,114,128,.14); color: #6b7280; }

/* Progress chips (per-target status counts) */
.ct-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ct-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 9px;
  font-size: 10px; font-weight: 700; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ct-chip .ct-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ct-chip.confirmed { background: rgba(34,197,94,.1);  color: #22c55e; }
.ct-chip.sent      { background: rgba(59,130,246,.1); color: #3b82f6; }
.ct-chip.pending   { background: rgba(107,114,128,.12); color: #6b7280; }
.ct-chip.failed    { background: rgba(239,68,68,.1);  color: #ef4444; }
.ct-chip.expired   { background: rgba(245,158,11,.12); color: #f59e0b; }
.ct-chip.cancelled { background: rgba(107,114,128,.12); color: #9ca3af; }
.ct-progress-frac { font-size: 10px; color: var(--muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin-left: 2px; }

/* Target picker (Add modal) - fleet-scoped device selection */
.ct-pick-toolbar { display: flex; align-items: center; gap: 8px; }
.ct-pick-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 6px; min-height: 15px; }
.ct-col-tools { display: flex; gap: 12px; }
.ct-col-hint { font-size: 10px; color: var(--muted); line-height: 1.4; }
.ct-search {
  flex: 1; min-width: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--text); font-size: 11px; padding: 5px 9px;
}
.ct-picker {
  border: 1px solid var(--border); border-radius: 7px; padding: 8px;
  height: 200px; overflow-y: auto; background: var(--surface2);
}
.ct-opt { display: flex; align-items: center; gap: 8px; padding: 4px 4px; border-radius: 5px; cursor: pointer; font-size: 12px; }
.ct-opt:hover { background: var(--surface); }
.ct-opt input { accent-color: var(--accent, #1a8a7d); flex-shrink: 0; }
.ct-opt .ct-opt-sub { font-size: 10px; color: var(--muted); margin-left: auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.ct-target-summary {
  margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--accent, #1a8a7d);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Device status filter (segmented) + link buttons */
.ct-seg { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.ct-seg button {
  border: none; background: var(--surface); color: var(--muted);
  font-size: 10px; font-weight: 700; padding: 5px 10px; cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; border-left: 1px solid var(--border);
}
.ct-seg button:first-child { border-left: none; }
.ct-seg button.active { background: var(--accent, #1a8a7d); color: #fff; }
.ct-link { background: none; border: none; color: var(--accent, #1a8a7d); font-size: 10px; font-weight: 700; cursor: pointer; padding: 0; }
.ct-link:hover { text-decoration: underline; }

/* Detail modal - per-device rows */
.ct-detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 14px; }
.ct-detail-meta .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.ct-detail-meta .v { font-size: 12px; color: var(--text); margin-top: 2px; word-break: break-word; }
.ct-dev-row {
  display: grid; grid-template-columns: 1fr 108px 60px 130px;
  gap: 8px; align-items: center;
  padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.ct-dev-row:last-child { border-bottom: none; }
.ct-dev-head {
  display: grid; grid-template-columns: 1fr 108px 60px 130px; gap: 8px;
  padding: 8px 10px; background: var(--surface2); border-radius: 7px 7px 0 0;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ct-dev-list { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.ct-dev-name { font-weight: 600; color: var(--text); }
.ct-dev-name .ct-dev-imei { font-size: 10px; color: var(--muted); font-family: 'Source Code Pro', monospace; }
.ct-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-transform: uppercase;
}
.ct-badge .ct-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ct-badge.confirmed { background: rgba(34,197,94,.1);  color: #22c55e; }
.ct-badge.sent      { background: rgba(59,130,246,.1); color: #3b82f6; }
.ct-badge.pending   { background: rgba(107,114,128,.12); color: #6b7280; }
.ct-badge.failed    { background: rgba(239,68,68,.1);  color: #ef4444; }
.ct-badge.expired   { background: rgba(245,158,11,.12); color: #f59e0b; }
.ct-badge.cancelled { background: rgba(107,114,128,.12); color: #9ca3af; }
.ct-resp { font-family: 'Source Code Pro', monospace; font-size: 10px; color: var(--muted); word-break: break-word; }

@media (max-width: 900px) {
  .ct-list-head { display: none; }
  .ct-list-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .ct-pick-toolbar { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════════════
   EQUIPMENT - tombol aksi teks + bulk action bar
   ════════════════════════════════════════════════════════════════════════ */
.dm-btn-txt {
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  border-radius: 5px; padding: 4px 11px; cursor: pointer;
  font-size: 11px; font-weight: 600; font-family: inherit; white-space: nowrap;
  transition: all .12s;
}
.dm-btn-txt:hover { border-color: var(--accent, #1a8a7d); background: rgba(26,138,125,.10); }
.dm-btn-txt.primary {
  color: var(--green, #22c55e); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08);
}
.dm-btn-txt.primary:hover { background: var(--green, #22c55e); color: #fff; border-color: var(--green, #22c55e); }
.dm-btn-txt.danger {
  color: var(--red, #ef4444); border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08);
}
.dm-btn-txt.danger:hover { background: var(--red, #ef4444); color: #fff; border-color: var(--red, #ef4444); }
.dm-btn-txt:disabled { opacity: .5; cursor: not-allowed; }

.dm-bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0; padding: 8px 12px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
}
.dm-bulk-count { font-size: 11px; font-weight: 700; color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.dm-bulk-spacer { flex: 1; }

/* ════════════════════════════════════════════════════════════════════════
   ORGANIZATIONS - tabel yang dipoles (rapi, bukan flat)
   ════════════════════════════════════════════════════════════════════════ */
/* Toolbar: tombol kiri, jumlah + refresh rata kanan */
.org-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.org-count-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; color: var(--muted);
  letter-spacing: .02em;
}

.org-table-wrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; overflow-x: auto; background: var(--surface);
}
.org-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.org-table thead th {
  text-align: left; padding: 11px 16px; background: var(--surface2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.org-table thead th.num, .org-table thead th.act { text-align: right; }
.org-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.org-table tbody tr:last-child td { border-bottom: none; }
.org-table tbody tr { transition: background var(--transition); }
.org-table tbody tr:hover { background: var(--surface2); }

.org-cell-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.org-cell-name b { font-size: 13px; font-weight: 700; color: var(--text); }
.org-cell-code {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  color: var(--muted); letter-spacing: .04em;
}
.org-tag-default {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal); background: var(--teal-bg); border: 1px solid var(--amber-border);
  padding: 1px 6px; border-radius: 4px;
}
.org-cell-desc {
  font-size: 11px; color: var(--muted); margin-top: 3px;
  max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-num {
  text-align: right; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--text2); font-variant-numeric: tabular-nums;
}
.org-num.zero { color: var(--dim); font-weight: 600; }
.org-date-cell { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; color: var(--muted); white-space: nowrap; }
.org-acts { display: flex; gap: 6px; justify-content: flex-end; }
.org-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text2);
  border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer;
  font-size: 11px; font-weight: 600; white-space: nowrap; transition: all var(--transition);
}
.org-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-bg); }
.org-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.org-btn:disabled { opacity: .4; cursor: not-allowed; }
.org-empty-row td { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════
   SYSTEM DESIGN KIT - halaman tab "System" agar seragam, rapi & terbaca.
   Tabel management (Users/POI/Geofence/Site Map/Maintenance/Equipment) dibuat
   lebih lapang & pakai font body (bukan gaya log padat .hist-table default).
   Di-scope per ID halaman supaya tabel LOG (History/Debug) tidak ikut berubah.
   ════════════════════════════════════════════════════════════════════════ */
#page-users .hist-table,
#page-poi .hist-table,
#page-geofence .hist-table,
#page-site-map .hist-table,
#page-maintenance .hist-table,
#page-devices .hist-table {
  min-width: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px;
}
#page-users .hist-table th,
#page-poi .hist-table th,
#page-geofence .hist-table th,
#page-site-map .hist-table th,
#page-maintenance .hist-table th,
#page-devices .hist-table th {
  padding: 11px 14px; font-size: 10px; letter-spacing: .05em;
  background: var(--surface2); color: var(--muted);
}
#page-users .hist-table td,
#page-poi .hist-table td,
#page-geofence .hist-table td,
#page-site-map .hist-table td,
#page-maintenance .hist-table td,
#page-devices .hist-table td {
  padding: 10px 14px; font-size: 13px; color: var(--text2);
}

/* Tombol aksi teks (menggantikan emoji) - seragam di semua halaman System */
.sys-actions { display: flex; gap: 6px; align-items: center; }
.sys-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text2);
  border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer;
  font-size: 11px; font-weight: 600; white-space: nowrap; transition: all var(--transition);
}
.sys-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-bg); }
.sys-btn.primary { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
.sys-btn.primary:hover { background: var(--green); color: #fff; border-color: var(--green); }
.sys-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.sys-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Jumlah item di toolbar - konsisten, halus */
.sys-count { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; color: var(--muted); letter-spacing: .02em; }

/* ══════════════════════════════════════════════════════════════════════════
   TAB-SWITCH FADE — shared by pages with several tab panels (Alerts, Polling
   Config Controller) so switching tabs isn't an instant content snap.
   ══════════════════════════════════════════════════════════════════════════ */
.tab-panel-stack { position: relative; }
/* Alerts: plain CSS animation on a v-show'd panel, not Vue <Transition>.
   Browsers restart `animation` (unlike `transition`) automatically whenever
   an element goes from display:none to visible, so the freshly-shown panel
   fades in with zero JS/class-timing coordination - no leave phase to get
   stuck in, safe with several always-mounted siblings sharing one class. */
.tab-panel-fade { animation: tab-fade-in .2s ease; }
@keyframes tab-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SKELETON LOADING — generic shimmer bar + the two shapes that use it
   (Modbus History's trend cards and data-log table while dm.status
   === 'loading', so a running fetch reads as "loading", not "no data").
   ══════════════════════════════════════════════════════════════════════════ */
.skel-bar {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 37%, var(--surface2) 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease infinite;
  border-radius: 4px;
}
@keyframes skel-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.trend-skel-card {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.trend-skel-card .skel-bar.tsk-label { height: 9px; width: 55%; }
.trend-skel-card .skel-bar.tsk-mm    { height: 22px; width: 100%; }
.trend-skel-card .skel-bar.tsk-spark { height: 30px; width: 100%; }
.trend-skel-card .skel-bar.tsk-meta  { height: 8px; width: 40%; }
.hist-skel-row td { padding: 10px 12px; }
.hist-skel-row .skel-bar { height: 10px; width: 70%; }

/* ══════════════════════════════════════════════════════════════════════════
   MAP FRAME — replaces the per-page fixed-px inline height (POI 400px,
   Geofence 420px) with one proportional height, consistent across both.
   ══════════════════════════════════════════════════════════════════════════ */
.map-frame { width: 100%; height: clamp(420px, 55vh, 600px); }

/* ── Users - kolom badge (Fitur & Fleet Akses) boleh wrap, tidak meluber/dipotong ── */
#page-users .hist-table td.um-cell-feat,
#page-users .hist-table td.um-cell-fleet {
  white-space: normal; vertical-align: middle; line-height: 1.6;
}
#page-users .hist-table td.um-cell-feat  { max-width: 260px; }
#page-users .hist-table td.um-cell-fleet { max-width: 200px; }
/* Chip fitur (dulu span teks polos yang berjejer meluber) */
.um-feat-chip {
  display: inline-block; margin: 2px 3px 0 0; white-space: nowrap;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 8.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(107,114,128,.15); color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   MAP WHEEL HINT — maps embedded in a scrolling page only zoom with Ctrl held
   (see composables/useBaseMap.ts), so a plain wheel scrolls the page. This
   flashes the reason instead of leaving the zoom looking broken.
   ══════════════════════════════════════════════════════════════════════════ */
.gt-map-wheel-hint {
  position: absolute;
  inset: 0;
  z-index: 500;              /* above tiles, below Leaflet controls (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;      /* never blocks dragging or marker clicks */
  background: rgba(0, 0, 0, .38);
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .18s ease;
}
.gt-map-wheel-hint.show { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE — now a <button role="switch"> instead of a bare <div>, so it
   is keyboard reachable and announces its state. Strip the UA button chrome so
   it still looks identical, give the track/thumb spans a box (width/height do
   not apply to inline elements), and show a focus ring for keyboard users.
   ══════════════════════════════════════════════════════════════════════════ */
button.theme-toggle-wrap {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  line-height: 1;
}
.theme-toggle-track { display: inline-block; flex-shrink: 0; }
.theme-toggle-thumb { display: block; }
button.theme-toggle-wrap:focus-visible {
  outline: 2px solid var(--accent, #22c55e);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI BUTTON — components/UiButton.vue
   Satu keluarga tombol untuk UI Nuxt, menggantikan dm-btn / dm-toolbar-btn /
   sys-btn / hist-show-btn / hist-exp-btn secara bertahap. Pola dari shadcn/ui
   dan GitHub Primer, disesuaikan untuk dashboard padat data (IBM Carbon):
     - tinggi sama dengan input di sebelahnya: md 32px, sm 28px
     - label huruf biasa (bukan KAPITAL + letter-spacing), 13px weight 500
     - satu tombol primary per layar; aksi di baris tabel pakai ghost
     - tanpa gradien, bayangan, atau hover yang melompat
   Tombol export (csv/excel/pdf) SENGAJA berwarna per format — permintaan user,
   dengan warna yang lazim untuk formatnya: Excel hijau, PDF merah, CSV biru.
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; flex-shrink: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none;
  white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
.ui-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ui-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-btn svg { flex-shrink: 0; }

.ui-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
.ui-btn--icon { width: 32px; padding: 0; }
.ui-btn--sm.ui-btn--icon { width: 28px; }

.ui-btn--primary { background: var(--amber); border-color: var(--amber); color: #fff; }
.ui-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--amber) 86%, #000); }
/* --amber gelap = teal terang (#2dd4bf): teks putih di atasnya tidak terbaca. */
[data-theme="dark"] .ui-btn--primary { color: var(--bg); }
[data-theme="dark"] .ui-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--amber) 86%, #fff); }

.ui-btn--secondary { background: var(--surface); border-color: var(--border2); color: var(--text); }
.ui-btn--secondary:hover:not(:disabled) { background: var(--surface2); }

.ui-btn--ghost { background: transparent; color: var(--muted); }
.ui-btn--ghost:hover:not(:disabled) { background: var(--surface2); color: var(--text); }
/* Aksi merusak di baris tabel: tenang dulu, merah hanya saat disentuh. */
.ui-btn--ghost.ui-btn--destructive:hover:not(:disabled) { background: var(--red-bg); color: var(--c-crit); }

.ui-btn--danger { background: var(--c-crit); border-color: var(--c-crit); color: #fff; }
.ui-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--c-crit) 88%, #000); }

.ui-btn--csv   { background: var(--blue-bg);  border-color: var(--blue-border);  color: var(--blue); }
.ui-btn--excel { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.ui-btn--pdf   { background: var(--red-bg);   border-color: var(--red-border);   color: var(--red); }
.ui-btn--csv:hover:not(:disabled)   { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.ui-btn--excel:hover:not(:disabled) { background: color-mix(in srgb, var(--green) 14%, transparent); }
.ui-btn--pdf:hover:not(:disabled)   { background: color-mix(in srgb, var(--red) 14%, transparent); }

/* Loading: spinner menggantikan ikon, label tetap terlihat (pola Primer). */
.ui-btn-spin {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}

.ui-btn-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI TABLE — .ui-table-card / .ui-table-head / .ui-table-wrap / .ui-table
   Satu standar tabel untuk UI Nuxt, menggantikan tiga gaya yang berjalan
   bersamaan (.hist-table log: header 9px KAPITAL + isi monospace 11px;
   "System Design Kit": header 10px KAPITAL; #page-asset-pa). Diadaptasi dari:
     - shadcn/ui Table   : header setinggi 40px, weight medium, warna teks penuh,
                           garis bawah per baris, hover halus, baris akhir tanpa garis
     - IBM Carbon        : dua kepadatan (md 40px untuk tabel kelola, sm 32px
                           untuk log/data), header semibold huruf biasa
     - GitHub Primer     : angka rata kanan + tabular-nums, kolom aksi tanpa judul,
                           sel kosong tetap "—" bukan dikarang
     - Pencil & Paper    : garis pemisah, BUKAN zebra (zebra bentrok dengan warna
                           hover/terpilih); header ikut perataan datanya; header
                           menempel saat digulir
   Header BERWARNA teal brand (--amber) — keputusan user 2026-09-18, untuk
   SEMUA tabel. Latarnya buram (perlu untuk sticky) dan batasnya dengan badan
   tetap jelas saat baris lewat di belakangnya.
   KEPUTUSAN USER (2026-09-18), menyimpang dari referensi: SEMUA teks rata
   tengah (header dan isi) dan setiap kolom bergaris tegak. Angka tetap
   tabular-nums, jadi digitnya tetap sejajar walau rata tengah.
   Monospace hanya untuk ID/IMEI/koordinat (.mono).
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-table-card {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Kepala kartu: judul + keterangan di kiri, kontrol (paging, tombol) di kanan. */
.ui-table-head {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.ui-table-title { font-size: 13px; font-weight: 600; color: var(--text); }
.ui-table-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ui-table-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.ui-table-wrap {
  overflow: auto;
  flex: 1 1 auto; min-height: 0;
  /* Halaman boleh menimpa lewat variabel ini. */
  max-height: var(--ui-table-max-h, calc(100vh - 320px));
}
/* Tanpa kartu (tabel berdiri sendiri): wrap yang memakai bingkai. */
.ui-table-wrap.is-framed {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ui-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;   /* separate: sticky + garis tetap rapi */
  font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  font-size: 13px; line-height: 1.35;
  color: var(--text);
}
.ui-table th,
.ui-table td {
  white-space: nowrap; vertical-align: middle; text-align: center;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--border);
}
.ui-table tr > :last-child { border-right: 0; }

.ui-table thead th {
  position: sticky; top: 0; z-index: 2;
  height: 40px; padding: 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: #fff;
  background: var(--amber);
  border-bottom: 1px solid var(--amber);
  border-right-color: rgba(255, 255, 255, .22);
}
/* --amber gelap = teal terang (#2dd4bf): teks putih tidak terbaca di atasnya. */
[data-theme="dark"] .ui-table thead th { color: var(--bg); border-right-color: rgba(0, 0, 0, .18); }
/* Tombol di dalam header ikut warna header. */
.ui-table thead .ui-btn--ghost { color: inherit; }
.ui-table thead .ui-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .16); color: inherit; }
.ui-table tbody td {
  padding: 10px 12px;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
}
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: var(--surface2); }

/* Kepadatan sm (Carbon "small", 32px): untuk log dan tabel data berkolom banyak. */
.ui-table--compact { font-size: 12px; }
.ui-table--compact thead th { height: 34px; padding: 0 10px; }
.ui-table--compact tbody td { padding: 6px 10px; }

/* Semua rata tengah (lihat kepala blok); .num tinggal penanda kolom angka. */
.ui-table .num { font-variant-numeric: tabular-nums; }
.ui-table td.strong { color: var(--text); font-weight: 500; }
.ui-table td.muted { color: var(--muted); }
.ui-table .mono { font-family: 'IBM Plex Mono', monospace; font-size: .95em; }

/* Kolom aksi (pola Primer): tanpa judul, selebar isinya, tombol ghost. */
.ui-table .actions { width: 1%; }
.ui-table td.actions { padding-top: 0; padding-bottom: 0; }

/* Kolom pertama menempel saat tabel digeser ke samping. */
.ui-table .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
.ui-table thead th.sticky-col { z-index: 3; background: var(--amber); }
.ui-table tbody tr:hover td.sticky-col { background: var(--surface2); }

/* Tautan kecil di dalam sel (mis. "Map"). */
.ui-table-link { color: var(--amber); text-decoration: none; font-weight: 500; }
.ui-table-link:hover { text-decoration: underline; }

/* Status kosong/memuat memakai .htd-empty yang sudah ada; di tabel ini ia
   jangan ikut warna hover baris. */
.ui-table tbody tr:hover td.htd-empty { background: transparent; }

/* Sel bawaan halaman log yang masuk ke .ui-table: ukuran huruf ikut tabel
   (dulu 9–10px dengan warna biru/abu), warnanya jadi teks biasa. */
.ui-table td.htd-ts { font-size: inherit; color: var(--text); font-variant-numeric: tabular-nums; }
.ui-table td.htd-coords { font-size: inherit; color: var(--text2); font-variant-numeric: tabular-nums; }
.ui-table .muted { color: var(--muted); }
.ui-th-with-action { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ui-th-with-action .ui-btn { font-weight: 500; }
.ui-td-loc { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--text); }
/* Tombol di dalam baris compact tidak boleh menambah tinggi baris. */
.ui-table--compact td .ui-btn--sm { height: 24px; padding: 0 8px; }
.ui-table--compact td:has(> .ui-btn) { padding-top: 3px; padding-bottom: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI FORM — label, input, select, tanggal, pemilih unit
   Satu standar kontrol form untuk SELURUH sistem. Sebelumnya empat gaya
   berjalan bersamaan: .hist-dt-input (11px, ±29px, latar abu), .dm-form-input
   (12px, ±33px), .ums-button (garis 1.5px, 34px), dan <select> filter Alerts/
   Debug (11px); label 9px KAPITAL + letter-spacing, atau 10px monospace.
   Diadaptasi dari:
     - shadcn/ui Input/Select : garis tipis, latar permukaan, placeholder redup,
                                fokus = garis aksen + cincin 3px; chevron redup
     - GitHub Primer Forms    : label di ATAS kontrol, huruf biasa (sentence
                                case), placeholder bukan pengganti label
     - IBM Carbon             : tinggi "small" 32px untuk layar padat — sama
                                dengan .ui-btn md, jadi field dan tombol sebaris
                                rata; rentang tanggal = dua field berlabel
   Kelas lama DIALIASKAN ke sini (di bawah), jadi halaman lama ikut seragam
   tanpa menyentuh ratusan template. Kode baru pakai .ui-label/.ui-input/.ui-select.
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ── Label ─────────────────────────────────────────────────────────────── */
.ui-label,
.dm-form-label,
.hist-filter-label,
.alert-filter-bar .flt-group label,
.dbg-filter-bar .flt-group label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0; text-transform: none;
  color: var(--text2); opacity: 1;
}

/* ── Input / select / tanggal ──────────────────────────────────────────── */
.ui-input,
.ui-select,
.dm-form-input:not(textarea),
.hist-dt-input,
.hist-select,
.fleet-select,
.alert-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.alert-filter-bar select,
.dbg-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.dbg-filter-bar select {
  box-sizing: border-box;
  height: 32px; padding: 0 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px; line-height: 1;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: auto;
  transition: border-color .12s, box-shadow .12s;
}
/* Textarea: gaya yang sama, tinggi mengikuti isi. */
textarea.dm-form-input,
textarea.ui-input { padding: 8px 10px; line-height: 1.45; font-size: 13px; color: var(--text); background-color: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-sm); outline: none; }

.ui-input:hover, .ui-select:hover,
.dm-form-input:hover, .hist-dt-input:hover, .hist-select:hover, .fleet-select:hover,
.alert-filter-bar input:hover, .alert-filter-bar select:hover,
.dbg-filter-bar input:hover, .dbg-filter-bar select:hover { border-color: var(--muted); }

.ui-input:focus, .ui-select:focus,
.dm-form-input:focus, .hist-dt-input:focus, .hist-select:focus, .fleet-select:focus,
.alert-filter-bar input:focus, .alert-filter-bar select:focus,
.dbg-filter-bar input:focus, .dbg-filter-bar select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-border);
}
/* Placeholder harus jelas BUKAN isian: --dim, bukan --muted. Dengan --muted
   (#616874) placeholder "100" di field kapasitas terbaca seperti nilai tersimpan. */
.ui-input::placeholder, .dm-form-input::placeholder, .hist-dt-input::placeholder,
.alert-filter-bar input::placeholder, .dbg-filter-bar input::placeholder { color: var(--dim); opacity: 1; }
[data-theme="dark"] .ui-input::placeholder, [data-theme="dark"] .dm-form-input::placeholder,
[data-theme="dark"] .hist-dt-input::placeholder, [data-theme="dark"] .alert-filter-bar input::placeholder,
[data-theme="dark"] .dbg-filter-bar input::placeholder { color: var(--muted); }

.ui-input:disabled, .ui-select:disabled, .dm-form-input:disabled,
.hist-dt-input:disabled, .hist-select:disabled, .fleet-select:disabled {
  opacity: .55; cursor: not-allowed; background-color: var(--surface2);
}
.ui-input[aria-invalid="true"], .dm-form-input[aria-invalid="true"] {
  border-color: var(--c-crit); box-shadow: 0 0 0 3px var(--red-bg);
}

/* Select: panah bawaan browser diganti chevron Lucide yang sama di semua OS. */
.ui-select,
select.dm-form-input,
select.hist-dt-input,
.hist-select,
.fleet-select,
.alert-filter-bar select,
.dbg-filter-bar select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a97a9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
}

/* Tanggal: angka selebar sama; ikon kalender bawaan ikut tema (color-scheme). */
input[type="date"].ui-input, input[type="datetime-local"].ui-input,
input[type="date"].dm-form-input, input[type="datetime-local"].dm-form-input,
input.hist-dt-input,
.alert-filter-bar input[type="date"], .dbg-filter-bar input[type="date"] {
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── Pemilih unit (UnitMultiSelect / GpsUnitSelect) ─────────────────────── */
.ums-button {
  min-height: 32px; padding: 3px 8px 3px 10px;
  font-size: 13px; font-weight: 400;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
}
.ums-button:hover { border-color: var(--muted); }
.ums-button:focus-visible { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-border); }

/* Bar filter: label di atas, field dan tombol rata bawah. */
.hist-filter-group { gap: 6px; }

/* Badge cakupan jadwal maintenance per group. Netral — cakupannya sudah
   tertulis di teks badge. */
.mtn-badge.fleet { background: var(--surface3); color: var(--text2); }

/* ═══════════════════════════════════════════════════════════════════════════
   KONDISI SERVER (#page-system-status) — kartu angka + daftar pasangan
   kunci/nilai, di-scope ke halamannya sendiri. Warna hanya untuk keadaan
   warn/crit.
   ═══════════════════════════════════════════════════════════════════════ */
#page-system-status .ss-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 8 kartu = 2 baris rata */
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 1100px) { #page-system-status .ss-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { #page-system-status .ss-kpi-row { grid-template-columns: 1fr; } }
#page-system-status .ss-kpi {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#page-system-status .ss-kpi.warn { border-color: var(--c-warn); }
#page-system-status .ss-kpi.crit { border-color: var(--c-crit); }
#page-system-status .ss-kpi-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .09em;
  color: var(--muted);
}
#page-system-status .ss-kpi-value {
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 600; line-height: 1.1;
  color: var(--text);
}
#page-system-status .ss-kpi.warn .ss-kpi-value { color: var(--c-warn); }
#page-system-status .ss-kpi.crit .ss-kpi-value { color: var(--c-crit); }
#page-system-status .ss-kpi-sub { margin-top: 3px; font-size: 11px; color: var(--muted); }
#page-system-status .ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
#page-system-status .ss-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#page-system-status .ss-card-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .09em;
  color: var(--muted);
  margin-bottom: 6px;
}
#page-system-status .ss-list { list-style: none; margin: 0; padding: 0; }
#page-system-status .ss-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
#page-system-status .ss-list li:last-child { border-bottom: 0; }
#page-system-status .ss-list .k { color: var(--muted); }
#page-system-status .ss-list .v { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
#page-system-status .ss-list .v.warn { color: var(--c-warn); }
#page-system-status .ss-list .v.crit { color: var(--c-crit); }
#page-system-status .ss-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
#page-system-status .ss-toolbar .ss-meta { font-size: 12px; color: var(--muted); }
/* Blok ala Grafana: judul seksi kecil, lalu baris panel dengan proporsi tetap. */
#page-system-status .ss-section-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0 8px; margin-top: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
#page-system-status .ss-row { display: grid; gap: 12px; margin-bottom: 12px; align-items: stretch; }
#page-system-status .ss-row--cpu  { grid-template-columns: minmax(200px, 1fr) minmax(0, 2.6fr) minmax(0, 1.7fr); }
#page-system-status .ss-row--mem  { grid-template-columns: minmax(200px, 1fr) minmax(0, 4.3fr); }
#page-system-status .ss-row--disk { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
#page-system-status .ss-row--net  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#page-system-status .ss-row > .rg-chart-wrap { margin: 0; min-width: 0; }
#page-system-status .ss-gauge {
  display: flex; flex-direction: column; justify-content: center;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#page-system-status .ss-gauge.warn { border-color: var(--c-warn); }
#page-system-status .ss-gauge-value {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 52px; font-weight: 600; line-height: 1.05;
  margin: 6px 0 4px;
}
#page-system-status .ss-kpi-value--md { font-size: 15px; word-break: break-word; }
/* Bilah persen di tabel mount, seperti kolom "Used, %" Grafana. */
#page-system-status .ss-bar {
  display: inline-block; vertical-align: middle; width: 90px; height: 8px; margin-right: 8px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
#page-system-status .ss-bar-fill { display: block; height: 100%; background: var(--amber); }
#page-system-status .ss-bar-fill.warn { background: var(--c-warn); }
#page-system-status .ss-bar-fill.crit { background: var(--c-crit); }
@media (max-width: 1100px) {
  #page-system-status .ss-row--cpu, #page-system-status .ss-row--mem,
  #page-system-status .ss-row--disk, #page-system-status .ss-row--net { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAST LOCATION (#page-last-location) — penyaring satu kartu dua baris
   (group + cari di atas, chip status di bawah). Proporsi dari penyaring
   laporan Hour Meter iotrack, di-scope ke halaman ini.
   ═══════════════════════════════════════════════════════════════════════════ */
#page-last-location .ll-filter {
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#page-last-location .ll-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 13px;
}
#page-last-location .ll-filter-row-2 { border-top: 1px solid var(--border); }
#page-last-location .ll-show { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#page-last-location .ll-filter-note { margin-left: auto; font-size: 11px; color: var(--muted); }
#page-last-location .ll-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  font-size: 11px; font-weight: 500;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
}
#page-last-location .ll-chip:hover { border-color: var(--border2); }
#page-last-location .ll-chip.on {
  color: var(--amber);
  border-color: var(--amber-border, var(--amber));
  background: var(--amber-bg, var(--surface2));
}
#page-last-location .ll-chip-count {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--muted);
}
#page-last-location .ll-chip.on .ll-chip-count { color: var(--amber); }

/* ═══════════════════════════════════════════════════════════════════════════
   POINT MAP MODAL — components/PointMapModal.vue
   Satu titik di peta sistem, dibuka dari Last Location.
   ═══════════════════════════════════════════════════════════════════════════ */
.dm-modal-box.pmap-box { width: min(880px, 96vw); }
.pmap-head { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.pmap-head .dm-modal-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmap-coord { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pmap-map { height: min(460px, 60vh); background: var(--surface2); }
.pmap-rows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 20px; margin: 0; padding: 14px 20px; border-top: 1px solid var(--border);
}
.pmap-row dt { font-size: 12px; font-weight: 500; color: var(--muted); }
.pmap-row dd { margin: 2px 0 0; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; word-break: break-word; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK GEOFENCE — modal "Buat Geofence Baru" dari klik kanan di Generator Map
   (frontend/components/overview/QuickGeofenceModal.vue; legacy #gfq-modal).
   Kerangka .dm-modal-box/-head/-body/-foot; di sini: kepala berwarna aksen
   (mengikuti form geofence yang dikenal operator), isi berbingkai dengan kisi
   dua kolom, koordinat sebagai teks mono yang bisa disalin.
   ═══════════════════════════════════════════════════════════════════════════ */
.gfq-modal-card { width: min(640px, 94vw); }
.gfq-modal-card .dm-modal-head.gfq-head-bar {
  background: var(--amber); border-bottom-color: var(--amber); padding: 12px 16px;
}
.gfq-head-bar .gfq-head-left { display: flex; align-items: center; gap: 10px; color: #fff; min-width: 0; }
.gfq-head-bar .dm-modal-title { color: #fff; font-size: 14px; letter-spacing: 0; }
.gfq-close.mclose {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff;
}
.gfq-close.mclose:hover { background: rgba(255,255,255,.28); color: #fff; }
[data-theme="dark"] .gfq-head-bar .gfq-head-left,
[data-theme="dark"] .gfq-head-bar .dm-modal-title,
[data-theme="dark"] .gfq-close.mclose { color: var(--bg); }

.gfq-section {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface);
}
.gfq-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gfq-color-row { display: flex; gap: 8px; align-items: center; }
.gfq-color-input { width: 44px; flex: 0 0 44px; padding: 2px 3px; cursor: pointer; }
.gfq-unit-row { display: flex; align-items: center; }
.gfq-unit-row .ui-input { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gfq-unit {
  height: 32px; padding: 0 10px; display: flex; align-items: center;
  font-size: 12px; color: var(--text2); background: var(--surface2);
  border: 1px solid var(--border2); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.gfq-coords {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.5;
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px;
}
.gfq-checks { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.gfq-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; color: var(--text);
}
.gfq-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--amber); }
.gfq-foot { justify-content: flex-start; }
@media (max-width: 640px) { .gfq-grid-2 { grid-template-columns: 1fr; } }

/* Markup legacy (index.html #gfq-modal) masih memakai gfq-head/body/footer + dm-modal-close */
.gfq-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--border); background: var(--surface3, rgba(0,0,0,.03));
}
.gfq-head-text { min-width: 0; }
.gfq-shape-badge {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border);
}
.gfq-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gfq-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); }
.gfq-body { padding: 20px; }
.gfq-geom-info { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.gfq-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.dm-modal-close {
  width: 26px; height: 26px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; color: var(--muted); font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.dm-modal-close:hover { background: var(--border2); color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════
   DEBUG LOG (Nuxt #page-report)
   Fleet Health dulu satu kartu per unit — 176 unit ≈ 6.400 px di atas log
   frame. Sekarang panel yang bisa dibuka/tutup: header membawa ringkasan,
   isinya tabel dengan scroll sendiri. Tab per unit diganti <select>.
   ══════════════════════════════════════════════════════════════════════════ */
#page-report .dbg-fh { margin-bottom: 14px; }
#page-report .dbg-fh:not(.open) .dbg-fh-head { border-bottom: none; }
#page-report .dbg-fh-head { gap: 12px; flex-wrap: wrap; }
#page-report .dbg-fh-toggle {
  display: flex; align-items: center; gap: 6px; padding: 0; border: none; background: none;
  cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text);
}
#page-report .dbg-fh-chevron { width: 14px; height: 14px; transition: transform .2s; }
#page-report .dbg-fh.open .dbg-fh-chevron { transform: rotate(180deg); }
#page-report .dbg-fh-summary {
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text2);
  font-variant-numeric: tabular-nums;
}
#page-report .dbg-fh-body { padding: 10px 12px 12px; }
#page-report .dbg-fh-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#page-report .dbg-fh-toolbar .hist-dt-input { width: 220px; padding: 6px 10px; }
#page-report .dbg-fh-table { max-height: 360px; overflow: auto; }
#page-report .dbg-fh-table .hist-table { min-width: 720px; }
#page-report .dbg-fh-table th.num,
#page-report .dbg-fh-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#page-report .dbg-fh-row { cursor: pointer; }
#page-report .dbg-fh-row:hover td { background: var(--surface2); }
#page-report .dbg-fh-name { color: var(--text); font-weight: 600; }
#page-report .dbg-fh-imei { font-size: 10px; color: var(--muted); }

#page-report .dbg-proto-tabs .alert-tab { display: inline-flex; align-items: center; gap: 6px; }
#page-report .dbg-proto-tabs .alert-tab svg { width: 14px; height: 14px; }
#page-report .dbg-tab-n {
  font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 6px;
  background: var(--surface2); color: var(--text2);
}
#page-report .dbg-unit { color: var(--amber); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-report .dbg-log-empty { padding: 40px 16px; white-space: normal; }
/* `.dbg-filter-bar input` memberi min-width 130px ke SEMUA input, termasuk
   checkbox — itu yang membuat kotak centang Pair / Auto-scroll terpisah jauh
   dari labelnya. */
#page-report .dbg-filter-bar input[type="checkbox"] { min-width: 0; padding: 0; margin: 0; }