/* ===================================================
   ATG Monitor — HQ Dashboard Styles
   Stingray Technologies — v2.0
   =================================================== */

/* ---------- DARK THEME COMPONENT OVERRIDES ----------
   The variable palette is defined after :root further below.  These rules
   handle components whose CSS uses literal hex values rather than the
   variables, so they need explicit dark-mode equivalents. */
/* Light-theme specific overrides for elements that already had inline-ish
   colours — when in dark mode, tone them down so we don't get hot-white
   patches against the navy background. */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-content.large,
[data-theme="dark"] .modal-content.small {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
[data-theme="dark"] .station-mon-card,
[data-theme="dark"] .analytics-stat-card,
[data-theme="dark"] .velocity-panel,
[data-theme="dark"] .velocity-card,
[data-theme="dark"] .recon-section {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
/* Dark-mode form controls — full coverage. The previous override only set
   `background` which left placeholders, option text, focus rings, and
   file-upload labels reading dark-on-dark. */
[data-theme="dark"] .ahb-scope-select,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
    -webkit-text-fill-color: #e2e8f0; /* Chrome autofill workaround */
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b !important;
    opacity: 1;
}
/* Option list — Chrome / Firefox pick up these for dropdown popup styling. */
[data-theme="dark"] select option {
    background-color: #1e293b;
    color: #e2e8f0;
}
[data-theme="dark"] select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    outline: none;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}
/* File-upload custom labels (.file-upload-label) — were inheriting white bg */
[data-theme="dark"] .file-upload-label {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border: 1px dashed #475569 !important;
}
[data-theme="dark"] .file-upload-label:hover {
    background-color: #1e293b !important;
    border-color: #60a5fa !important;
}
[data-theme="dark"] .file-upload-label i { color: #60a5fa; }

/* Toggle switches (Email Notifications / SMS Notifications) */
[data-theme="dark"] .toggle-switch { background-color: #334155; }
[data-theme="dark"] .toggle-switch.active { background-color: #1d4ed8; }

/* Headings / labels — many use literal #1a1a2e or similar which clashes */
[data-theme="dark"] .settings-card h3,
[data-theme="dark"] .calibration-card h3,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .form-row label,
[data-theme="dark"] .settings-form label,
[data-theme="dark"] .calibration-form label,
[data-theme="dark"] .filter-group label,
[data-theme="dark"] .recon-section-title,
[data-theme="dark"] .stat-info .stat-label {
    color: #e2e8f0;
}
/* Section sub-titles use --accent-primary blue — keep, but brighten in dark */
[data-theme="dark"] h3 i.fa-key,
[data-theme="dark"] h3 i.fa-envelope,
[data-theme="dark"] h3 i.fa-palette,
[data-theme="dark"] h3 i.fa-upload,
[data-theme="dark"] h3 i.fa-gas-pump,
[data-theme="dark"] h3 i.fa-sliders-h { color: #60a5fa; }

/* Sub-page surfaces (Settings cards, Calibration cards, etc.) */
[data-theme="dark"] .settings-card,
[data-theme="dark"] .calibration-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .alarms-panel,
[data-theme="dark"] .report-tab-content,
[data-theme="dark"] .data-table {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .data-table th,
[data-theme="dark"] .data-table td {
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .data-table tr:hover { background-color: rgba(255,255,255,0.03); }

/* PIN keypad keys — were near-white in dark mode */
[data-theme="dark"] .pin-key {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
[data-theme="dark"] .pin-key:hover { background-color: #283447; }
[data-theme="dark"] .pin-key:active { background-color: #1d4ed8; color: #fff; }

/* Top-level page chrome */
[data-theme="dark"] .app-header-bar,
[data-theme="dark"] .alarm-banner,
[data-theme="dark"] .page-header,
[data-theme="dark"] .station-management-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .alarm-banner { background-color: rgba(245, 158, 11, 0.1); }
[data-theme="dark"] .kpi-tile, [data-theme="dark"] .osum-card {
    background: var(--bg-card);
    color: var(--text-primary);
}
[data-theme="dark"] .leaflet-container {
    background: #0b1220 !important;
}
[data-theme="dark"] .city-chip {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .city-chip:hover { background: #283447; }
[data-theme="dark"] .city-chip-count {
    background: #0f172a;
    color: var(--text-secondary);
}

/* Header day/night toggle button */
.ahb-theme-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    margin-right: 4px;
}
.ahb-theme-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
[data-theme="dark"] .ahb-theme-btn i { color: #fbbf24; } /* warm sun glyph */
.ahb-logo {
    display: block;
    width: 88px;
    max-height: 34px;
    object-fit: contain;
}

:root {
    /* Light Theme Color Palette */
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #e8eaed;

    /* Blue accent palette */
    --accent-primary: #1565C0;
    --accent-hover: #1976D2;
    --accent-light: rgba(21, 101, 192, 0.1);
    --accent-dark: #0D47A1;

    /* Text Colors */
    --text-primary: #1a1a2e;
    --text-secondary: #5f6368;
    --text-muted: #80868b;
    --text-white: #ffffff;

    /* Status Colors */
    --success: #2e7d32;
    --success-light: rgba(46, 125, 50, 0.1);
    --warning: #ef6c00;
    --warning-light: rgba(239, 108, 0, 0.1);
    --danger: #c62828;
    --danger-light: rgba(198, 40, 40, 0.1);
    --info: #0277bd;
    --info-light: rgba(2, 119, 189, 0.1);

    /* Product Colors */
    --diesel: #1565C0;
    --petrol: #2e7d32;
    --hsd: #1565C0;
    --hobc: #757575;
    --kerosene: #0277bd;

    /* Nav & Tab Bar */
    --nav-bg: #263238;
    --nav-active: #1565C0;
    --nav-text: #cfd8dc;
    --tab-bar-bg: #37474f;
    --tab-active-bg: #455a64;

    /* Inventory Bar */
    --inv-icon-bg: #1a2744;

    /* Borders */
    --border-color: #dadce0;
    --border-light: rgba(0, 0, 0, 0.06);

    /* Shadow scale — keep small. Most surfaces should use border + bg, not shadow */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);

    /* Transitions */
    --transition-fast: 0.15s ease;

    /* Sizing */
    --tab-bar-height: 68px;
    --nav-width: 72px;
    --nav-width-expanded: 230px;
    --border-radius: 8px;
    --border-radius-sm: 6px;

    /* Scale tokens for desktop HQ workstation */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Typography scale */
    --fs-xs: 0.72rem;
    --fs-sm: 0.82rem;
    --fs-md: 0.95rem;
    --fs-lg: 1.05rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.55rem;
}

/* ----------- DARK THEME PALETTE OVERRIDES -----------
   These MUST appear after :root so CSS source-order resolves --bg-primary
   etc. to the dark values when [data-theme="dark"] is set on <html>. The
   earlier copy of this block (before :root) was being neutralised. */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --bg-hover: #334155;

    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-color: #334155;
    --border-light: rgba(255, 255, 255, 0.08);

    --accent-light: rgba(96, 165, 250, 0.15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ===================================================
   RESET & BASE
   =================================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.4;
    overflow: hidden;
    height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-user-select: none;
    user-select: none;
}

.hidden {
    display: none !important;
}

/* ===================================================
   LOGIN SCREEN (Professional Light Theme)
   =================================================== */
/* ── Login Screen ── */
/* ============================================
   LOGIN SCREEN — desktop split layout
   ============================================ */
.login-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    z-index: 9999;
    overflow: auto;
    padding: 24px;
}
.login-screen.hidden { display: none; }

.login-shell {
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(420px, 1fr);
    width: 100%;
    max-width: 1080px;
    min-height: 620px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

/* Left brand panel */
.login-brand-panel {
    background:
      radial-gradient(circle at 18% 12%, rgba(255,255,255,0.10) 0, transparent 32%),
      radial-gradient(circle at 92% 88%, rgba(255,255,255,0.08) 0, transparent 30%),
      linear-gradient(160deg, #0d47a1 0%, #1565C0 55%, #1e3a8a 100%);
    color: #fff;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.lbp-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: auto;
}
.lbp-logo {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    padding: 6px;
    object-fit: contain;
    flex-shrink: 0;
}
.lbp-brand {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Partner logos strip near the bottom of the brand panel */
.lbp-partners {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.lbp-partners-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
}
.lbp-partner-logos {
    display: flex;
    align-items: center;
    gap: 16px;
}
.lbp-partner-logo {
    height: 32px;
    width: auto;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    object-fit: contain;
}
.lbp-hero {
    margin: 64px 0 36px;
}
.lbp-hero h1 {
    font-size: 2rem;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: #ffffff;
}
.lbp-hero p {
    font-size: 1rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.55;
    max-width: 360px;
    margin: 0;
}
.lbp-bullets {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}
.lbp-bullet {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.86);
    font-size: 0.92rem;
}
.lbp-bullet i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #93c5fd;
}
.lbp-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 16px;
}

/* Right PIN entry panel */
.login-pin-panel {
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-form {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}
.login-pin-header {
    margin-bottom: 28px;
}
.login-pin-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.login-pin-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.pin-display {
    margin-bottom: 28px;
}
.pin-dots {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.pin-dot.filled {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.pin-key {
    width: 100%;
    aspect-ratio: 1.6 / 1;
    min-height: 56px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.pin-key:hover {
    background: #fff;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.pin-key:active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
    transform: scale(0.96);
}

.pin-key-clear {
    background: #fff;
    color: #c62828;
    border-color: var(--border-color);
    font-size: 1rem;
}
.pin-key-clear:hover {
    border-color: #c62828;
    color: #c62828;
    background: #fef2f2;
}
.pin-key-clear:active {
    background: #c62828;
    color: white;
    border-color: #c62828;
}

.pin-key-backspace {
    background: #fff;
    color: #e65100;
    border-color: var(--border-color);
    font-size: 1rem;
}
.pin-key-backspace:hover {
    border-color: #e65100;
    color: #e65100;
    background: #fff7ed;
}
.pin-key-backspace:active {
    background: #e65100;
    color: white;
    border-color: #e65100;
}

.login-hint {
    margin: 14px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* Stack the split panels on narrow screens */
@media (max-width: 880px) {
    .login-shell {
        grid-template-columns: 1fr;
        max-width: 480px;
        min-height: 0;
    }
    .login-brand-panel { padding: 28px; }
    .lbp-hero { margin: 24px 0; }
    .lbp-hero h1 { font-size: 1.45rem; }
    .lbp-bullets { display: none; }
    .login-pin-panel { padding: 32px 28px 36px; }
}

.login-btn {
    width: 100%;
    padding: 13px 18px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.login-btn:hover:not(:disabled) {
    background: var(--accent-dark);
}
.login-btn:active:not(:disabled) {
    transform: translateY(1px);
}
.login-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.login-btn-original {
    /* hidden duplicate; left for backwards compatibility */
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.login-btn:hover {
    background: #1256a8;
}

.pin-submit-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.login-error {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #c62828;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: 10px;
}

.login-footer {
    text-align: center;
    padding: 14px 32px 18px;
    color: #9e9e9e;
    font-size: 0.72rem;
}

.login-footer p {
    margin: 2px 0;
}

.login-footer .version {
    font-size: 0.68rem;
    color: #bdbdbd;
}

.pin-display.shake .pin-dot {
    border-color: #c62828;
}

/* Settings PIN pad (compact) */
.settings-pin-display .pin-dots {
    gap: 8px;
    margin: 4px 0;
}

.settings-pin-display .pin-dot {
    width: 12px;
    height: 12px;
}

.settings-pin-pad {
    max-width: none;
    margin: 6px 0;
    gap: 6px;
}

.settings-pin-pad .pin-key {
    height: 44px;
    font-size: 1.05rem;
}

/* Modal PIN pad — self-contained so the global .pin-key (which has
   aspect-ratio + min-height for the full-screen login pad) can't oversize
   the cells inside the verify-action modal. */
.pin-modal-content {
    max-width: 360px !important;
    width: 90%;
    overflow-x: hidden;
}
.pin-modal-content .modal-body { padding: 16px 20px; }

.modal-pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px auto 12px;
    width: 100%;
    max-width: 280px;
}

/* Override the global .pin-key sizing for this compact context. */
.modal-pin-pad .pin-key {
    width: 100%;
    height: 48px;
    min-height: 48px;
    aspect-ratio: auto;
    font-size: 1.1rem;
    border-radius: 8px;
    padding: 0;
}

.modal-pin-display .pin-dots {
    gap: 10px;
    margin: 6px 0 14px;
}

.modal-pin-display .pin-dot {
    width: 12px;
    height: 12px;
}

/* ===================================================
   APP SHELL LAYOUT
   =================================================== */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.app-shell.hidden {
    display: none;
}

/* ===================================================
   TANK TAB BAR (top)
   =================================================== */
.tank-tab-bar {
    display: flex;
    align-items: center;
    height: var(--tab-bar-height);
    background: var(--tab-bar-bg);
    border-bottom: 1px solid rgba(0,0,0,0.18);
    flex-shrink: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.tank-tabs-inner {
    display: flex;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 2px;
    padding: 0 var(--space-2);
    scrollbar-width: none;
}

.tank-tabs-inner::-webkit-scrollbar {
    display: none;
}

/* Tank tab elements (created by app.js createTankCard) */
.tank-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--nav-text);
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
    min-height: var(--tab-bar-height);
    position: relative;
}

.tank-tab:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}

.tank-tab.active {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    font-weight: 600;
}

.tank-tab.active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #64b5f6;
}

.tank-tab .tab-status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}

.tank-tab .tab-status-dot.green  { background: #22c55e; }
.tank-tab .tab-status-dot.yellow { background: #f59e0b; }
.tank-tab .tab-status-dot.red    { background: #ef4444; }
.tank-tab .tab-status-dot.grey   { background: #94a3b8; }

@keyframes alarm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

/* Pulse ONLY the sidebar alarm badge — most important attention signal.
   Other red dots stay still so the UI doesn't feel "alive everywhere". */
.nav-item .badge {
    animation: alarm-pulse 1.6s ease-in-out infinite;
}
.nav-item .badge:empty,
.nav-item .badge[data-count="0"] { animation: none; opacity: 0; }

/* Inv values fade-in subtly when their text changes */
.inv-value, .vt-percent, .mini-tank-pct {
    transition: color 0.3s ease;
}

.tank-tab .tank-name {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    /* Long station names ("PSO S/S 28 (Bhittai)") used to truncate mid-word
       without an ellipsis. Cap the width and let the browser draw "…". */
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tank-tab .tab-product-type {
    font-size: 0.78rem;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-left: 4px;
}

.tab-bar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    flex-shrink: 0;
}

.tab-bar-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.tab-bar-version {
    color: #90a4ae;
    font-size: 1.4rem;
    font-weight: 500;
}

/* ===================================================
   CONTENT + NAV WRAPPER
   =================================================== */
.content-nav-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ===================================================
   MAIN CONTENT AREA
   =================================================== */
.main-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-content-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* ===================================================
   RIGHT NAVIGATION
   =================================================== */
.right-nav {
    width: var(--nav-width-expanded);
    background: var(--nav-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 90;
    height: 100%;
    max-height: 100%;
}

/* Sidebar is always expanded — labels, badges, clock all visible. */
.right-nav .nav-item span,
.right-nav .nav-user span,
.right-nav .nav-item .badge {
    opacity: 1 !important;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.nav-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: rgba(21, 101, 192, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-brand-mark svg { width: 26px; height: 26px; }
.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    overflow: hidden;
    min-width: 0;
}
.nav-brand-name {
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.nav-brand-sub {
    color: rgba(255,255,255,0.55);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--nav-text);
    font-size: var(--fs-sm);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.nav-user i {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.nav-datetime {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 14px 7px;
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.nav-datetime #nav-clock {
    font-size: 1.02rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.nav-links {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-2) 0;
    scrollbar-width: none;
    min-height: 0;
}
.nav-section {
    padding: 14px 18px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.35);
    pointer-events: none;
}
.nav-section:first-child { padding-top: 6px; }

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    color: var(--nav-text);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    min-height: 0;
    border-radius: 0;
}

.nav-item i {
    font-size: 1.35rem;
    width: 36px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.nav-item span {
    font-size: 1.05rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
    letter-spacing: 0.01em;
}

.right-nav:hover .nav-item span,
.right-nav.expanded .nav-item span {
    opacity: 1;
}

/* Also hide user label text when collapsed */
.nav-user span {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.right-nav:hover .nav-user span,
.right-nav.expanded .nav-user span {
    opacity: 1;
}


.nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}
.nav-item:hover i { opacity: 1; }

.nav-item.active {
    background: rgba(21, 101, 192, 0.18);
    color: #ffffff;
}
.nav-item.active i { opacity: 1; }

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: #64b5f6;
    border-radius: 0 3px 3px 0;
}

.nav-item .badge {
    background: var(--danger);
    color: white;
    font-size: 0.78rem;
    padding: 3px 9px;
    border-radius: 12px;
    min-width: 22px;
    text-align: center;
    font-weight: 700;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.right-nav:hover .nav-item .badge,
.right-nav.expanded .nav-item .badge {
    opacity: 1;
}

.nav-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

.connection-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #ffffff;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 0 2px;
}

/* Sidebar is always expanded — connection text, clock, and last-update label
   stay visible regardless of hover. */
.connection-info #status-text {
    display: flex;
}
.nav-clock {
    display: flex;
}
.last-update-text {
    display: inline;
}

.status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #9e9e9e;
    flex-shrink: 0;
}

.status-dot.connected {
    background: #4caf50;
}

.status-dot.disconnected {
    background: #f44336;
}

.nav-clock,
.nav-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-sidebar-logo-img {
    display: block;
    width: min(116px, 100%);
    height: clamp(26px, 6vh, 52px);
    max-width: calc(100% - 8px);
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}

.nav-uptime {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 10px 12px;
}
.nav-uptime #header-clock {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.nav-uptime #header-date {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.02em;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-height: 760px) {
    .nav-sidebar-logo-img {
        height: clamp(22px, 4.5vh, 36px);
    }
    .nav-footer {
        padding: 4px 0;
        gap: 2px;
    }
    .nav-uptime {
        padding: 4px 8px 6px;
    }
}

@media (max-height: 600px) {
    .nav-brand {
        padding: 8px 12px;
    }
    .nav-brand-mark {
        width: 32px;
        height: 32px;
    }
    .nav-section {
        padding-top: 8px;
        padding-bottom: 3px;
    }
    .nav-item {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .nav-sidebar-logo-img {
        height: 22px;
    }
    .nav-sidebar-logo {
        padding: 3px 10px;
    }
}

.last-update-text {
    font-size: 1.2rem;
    color: #78909c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-footer-actions {
    display: flex;
    gap: 4px;
}

.logout-btn,
.fullscreen-btn {
    background: none;
    border: none;
    color: var(--nav-text);
    padding: 6px 10px;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    font-size: 1.5rem;
}

.logout-btn:hover,
.fullscreen-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* ===================================================
   ALERT BANNER
   =================================================== */
.alert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--warning-light);
    flex-shrink: 0;
    border-bottom: 1px solid var(--warning);
    color: var(--warning);
    font-size: 0.85rem;
}

.alert-banner.hidden {
    display: none;
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-close {
    background: none;
    border: none;
    color: var(--warning);
    cursor: pointer;
    padding: 4px;
}

/* ===================================================
   VIEW SECTIONS
   =================================================== */
.view-section {
    padding: 8px 12px;
}

.view-section.hidden {
    display: none;
}

.view-section.active {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ===================================================
   TANK STATUS VIEW
   =================================================== */

/* Blue Header Bar */
.tank-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--accent-primary);
    color: white;
    padding: 6px 14px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 4px;
    flex-shrink: 0;
}

.tank-info-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tank-info-left h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

/* Base product-badge — used in the All Tanks table cells.  Colours match
   PRODUCT_COLOR in app.js so the same fuel reads the same shade everywhere. */
.product-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}
.product-badge.hsd,
.product-badge.diesel       { background: rgba(29, 78, 216, 0.16);  color: #1d4ed8; }
.product-badge.pmg,
.product-badge.pg,
.product-badge.petrol       { background: rgba(4, 120, 87, 0.16);   color: #047857; }
.product-badge.hobc         { background: rgba(124, 58, 237, 0.16); color: #7c3aed; }
.product-badge.kerosene     { background: rgba(180, 83, 9, 0.16);   color: #b45309; }

[data-theme="dark"] .product-badge.hsd,
[data-theme="dark"] .product-badge.diesel   { background: rgba(29, 78, 216, 0.22);  color: #93c5fd; }
[data-theme="dark"] .product-badge.pmg,
[data-theme="dark"] .product-badge.pg,
[data-theme="dark"] .product-badge.petrol   { background: rgba(4, 120, 87, 0.22);   color: #6ee7b7; }
[data-theme="dark"] .product-badge.hobc     { background: rgba(124, 58, 237, 0.22); color: #c4b5fd; }
[data-theme="dark"] .product-badge.kerosene { background: rgba(180, 83, 9, 0.22);   color: #fcd34d; }

.product-badge-lg {
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    background: rgba(255,255,255,0.2);
}

/* Large filled product badges — solid fills using PRODUCT_COLOR palette. */
.product-badge-lg.hsd,
.product-badge-lg.diesel    { background: #1d4ed8; }
.product-badge-lg.petrol,
.product-badge-lg.pg,
.product-badge-lg.pmg       { background: #047857; }
.product-badge-lg.hobc      { background: #7c3aed; }
.product-badge-lg.kerosene  { background: #b45309; }

.tank-info-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tank-info-stat {
    text-align: center;
}

.tank-info-stat .info-label {
    display: block;
    font-size: 0.73rem;
    opacity: 0.8;
    text-transform: uppercase;
}

.tank-info-stat .info-value {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Tank Status Info (above/below tank graphic) */
.tank-status-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 0 30px;
    width: 100%;
}

.tank-status-row {
    display: flex;
    font-size: 17px;
    align-items: center;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
}

.tank-status-top i {
    font-size: 17px;
}

.tank-status-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 17px;
    color: var(--text-secondary);
    padding: 20px 0 0;
    width: 100%;
    white-space: nowrap;
}

.tank-status-bottom i {
    font-size: 17px;
}

.tank-status-bottom .dl-value {
    font-size: 17px;
}

.status-dot-lg {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot-lg.ok { background: #4caf50; }
.status-dot-lg.error { background: #f44336; }
.status-dot-lg.warning { background: #ff9800; }
.status-dot-lg.inactive { background: #9e9e9e; }

/* Tank Content Split (Tank visual left + Chart right) */
.tank-content-split {
    display: flex;
    gap: var(--space-2);
    margin-bottom: 4px;
    min-height: 0;
    flex: 1;
}

.tank-left-column {
    display: flex;
    flex-direction: column;
    width: 300px;
    flex-shrink: 0;
    gap: var(--space-2);
    min-height: 0;
}

/* Left: Horizontal Tank Visual (compact, fixed-ish height) */
.tank-visual-panel {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
}

/* Tank Information panel - fills empty space below visual */
.tank-info-panel {
    flex: 1;
    min-height: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tank-info-header {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 6px;
}
.tank-info-header i {
    color: var(--accent-primary);
    font-size: 1rem;
}
.tank-info-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--space-3);
    row-gap: 7px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}
.tank-info-list dt {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 500;
    align-self: center;
}
.tank-info-list dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

/* Footer with logos + version pinned at bottom */
.tank-panel-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--border-light);
}
.tank-panel-footer .tank-panel-logos {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.tank-panel-footer .panel-logo {
    height: 28px;
    width: auto;
    opacity: 0.85;
}
.tank-panel-footer .panel-logo-pso {
    /* PSO logo is on a dark mark; bump contrast in dark mode so it doesn't
       disappear into the surrounding navy panel. */
    height: 30px;
}
[data-theme="dark"] .tank-panel-footer .panel-logo {
    filter: brightness(1.15) contrast(1.05);
}
.tank-panel-footer .tank-panel-version {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ============================================
   VERTICAL TANK GAUGE (Tank Detail page)
   ============================================ */
.vertical-tank-body {
    width: 168px;
    height: 280px;
    margin: var(--space-3) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.12));
}
.vt-cap-top, .vt-cap-bottom {
    width: 168px;
    height: 28px;
    flex-shrink: 0;
    border: 1.5px solid #94a3b8;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 60%, #94a3b8 100%);
}
.vt-cap-top {
    border-radius: 50% / 100% 100% 0 0;
    border-bottom: none;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
}
.vt-cap-bottom {
    border-radius: 50% / 0 0 100% 100%;
    border-top: none;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
}
.vt-cylinder {
    width: 168px;
    flex: 1;
    background: linear-gradient(90deg, #cbd5e1 0%, #f1f5f9 30%, #e2e8f0 70%, #94a3b8 100%);
    border-left: 1.5px solid #94a3b8;
    border-right: 1.5px solid #94a3b8;
    position: relative;
    overflow: hidden;
}
.vt-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12%;
    width: 14%;
    background: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.vt-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.vt-tick {
    position: absolute;
    right: 6px;
    transform: translateY(50%);
    display: flex;
    align-items: center;
    gap: 4px;
}
.vt-tick::before {
    content: '';
    display: block;
    width: 10px;
    height: 1.5px;
    background: rgba(15, 23, 42, 0.45);
}
.vt-tick span {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.85);
    padding: 1px 5px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}
.vt-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    pointer-events: none;
    z-index: 3;
}

/* Hidden — kept for any legacy selectors that still reference the old layout */
.horizontal-tank-body {
    display: none;
}
.horizontal-tank-body-old {
    display: flex;
    align-items: center;
    width: 100%;
    height: 160px;
    position: relative;
}

.tank-end-cap {
    width: 32px;
    height: 100%;
    flex-shrink: 0;
}

.tank-end-cap.left {
    border-radius: 50% 0 0 50%;
    background: linear-gradient(90deg, #b0bec5 0%, #cfd8dc 100%);
    border: 2px solid #90a4ae;
    border-right: none;
}

.tank-end-cap.right {
    border-radius: 0 50% 50% 0;
    background: linear-gradient(90deg, #cfd8dc 0%, #b0bec5 100%);
    border: 2px solid #90a4ae;
    border-left: none;
}

.tank-main-body {
    flex: 1;
    height: 100%;
    background: #eceff1;
    border-top: 2px solid #90a4ae;
    border-bottom: 2px solid #90a4ae;
    position: relative;
    overflow: hidden;
}

.tank-liquid-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.tank-liquid-fill::after {
    /* Subtle wave at the top of the liquid */
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 12px;
    background: inherit;
    border-radius: 50%;
    opacity: 0.35;
}

.tank-liquid-fill.hsd,
.tank-liquid-fill.diesel { background: linear-gradient(180deg, #1d4ed8 0%, #0d47a1 100%); }
.tank-liquid-fill.petrol,
.tank-liquid-fill.pg,
.tank-liquid-fill.pmg { background: linear-gradient(180deg, #16a34a 0%, #14532d 100%); }
.tank-liquid-fill.hobc { background: linear-gradient(180deg, #475569 0%, #1e293b 100%); }
.tank-liquid-fill.kerosene { background: linear-gradient(180deg, #06b6d4 0%, #0e7490 100%); }

.tank-water-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: rgba(33, 150, 243, 0.3);
    border-top: 1px dashed #2196f3;
    transition: height 0.5s ease;
}

.tank-fill-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.0rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.3);
    z-index: 2;
    letter-spacing: 0.5px;
}

.tank-scale-markers {
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    width: 30px;
    z-index: 1;
}

.scale-line {
    position: absolute;
    right: 0;
    width: 100%;
    border-top: 2px solid rgba(255,255,255,0.85);
}

.scale-line span {
    position: absolute;
    right: 2px;
    top: -20px;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.tank-supports {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin-top: 2px;
}

.tank-support {
    width: 26px;
    height: 10px;
    background: #90a4ae;
    border-radius: 0 0 3px 3px;
}

.tank-panel-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin-top: 35px;
}

.panel-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.tank-panel-version {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: left;
    padding: 4px 0;
    font-weight: 600;
    margin-top: auto;
    align-self: flex-start;
}

/* Right: Chart Panel */
.tank-chart-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    min-width: 0;
}

.chart-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
}

.chart-controls select {
    padding: 3px 6px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-icon:hover {
    background: var(--bg-hover);
}

.btn-icon-danger:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border-color: #e74c3c;
}

.chart-container {
    flex: 1;
    min-height: 220px;
    width: 100%;
}

.chart-container.large {
    min-height: 280px;
}

/* Delivery / Leak Status Row */
.delivery-leak-row {
    display: flex;
    gap: 12px;
    padding: 9px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: 4px;
    font-size: 1.0rem;
    flex-shrink: 0;
}

.dl-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.dl-item i {
    font-size: 0.95rem;
}

.dl-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
}

.dl-value {
    font-weight: 700;
    font-size: 15px;
}

.dl-value.idle { color: var(--success); }
.dl-value.active { color: var(--warning); }
.dl-value.alarm { color: var(--danger); }

/* ===================================================
   INVENTORY BAR
   =================================================== */
.inventory-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-4);
    flex-shrink: 0;
}

/* Each tile: icon on the left, label + value stacked on the right */
.inv-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 0 8px var(--space-4);
    border-left: 1px solid var(--border-light);
    min-width: 0;
}
.inv-item:nth-child(4n + 1) {
    border-left: none;
    padding-left: 0;
}

/* Subtle icon chip — tinted background, brand-blue glyph */
.inv-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent-primary);
    font-size: 1.05rem;
}

.inv-data {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.inv-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    order: 1;
    margin-bottom: 2px;
}

.inv-value {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    order: 2;
}

/* Per-metric icon tints so each row is recognizable at a glance */
.inv-item:nth-child(1) .inv-icon { background: rgba(21, 101, 192, 0.10); color: #1565c0; }   /* Volume — blue */
.inv-item:nth-child(2) .inv-icon { background: rgba(46, 125, 50, 0.10);  color: #2e7d32; }   /* TC Vol — green */
.inv-item:nth-child(3) .inv-icon { background: rgba(239, 108, 0, 0.10);  color: #ef6c00; }   /* Ullage — orange */
.inv-item:nth-child(4) .inv-icon { background: rgba(2, 119, 189, 0.10);  color: #0277bd; }   /* Water Vol — teal */
.inv-item:nth-child(5) .inv-icon { background: rgba(217, 70, 70, 0.10);  color: #d94646; }   /* Temp — red */
.inv-item:nth-child(6) .inv-icon { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }   /* Level — purple */
.inv-item:nth-child(7) .inv-icon { background: rgba(8, 145, 178, 0.10);  color: #0891b2; }   /* Water mm — cyan */
.inv-item:nth-child(8) .inv-icon { background: rgba(75, 85, 99, 0.10);   color: #4b5563; }   /* Capacity — slate */

/* ===================================================
   PAGE HEADERS
   =================================================== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.page-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ===================================================
   BUTTONS
   =================================================== */
.btn-primary {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-secondary:hover {
    background: var(--bg-hover);
}

.btn-danger {
    background: var(--danger);
    color: white;
    border: none;
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-danger:hover {
    background: #b71c1c;
}

.btn-success {
    background: #2e7d32;
    color: white;
    border: none;
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-success:hover {
    background: #1b5e20;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.78rem;
}

.btn-back {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-back:hover {
    background: var(--bg-hover);
}

/* ===================================================
   FORM ELEMENTS
   =================================================== */
.filter-select,
select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="password"],
textarea,
.form-input {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.88rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    box-sizing: border-box;
    height: 38px;
}

textarea {
    height: auto;
    min-height: 60px;
}

select:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.search-box i {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.search-box input {
    border: none;
    padding: 7px 0;
    font-size: 0.8rem;
    background: transparent;
    outline: none;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label,
.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
}

.settings-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 14px;
}

.settings-form > button,
.settings-form > .btn-primary,
.settings-form > .btn-secondary,
.settings-form > .btn-danger {
    grid-column: 1 / -1;
    max-width: 200px;
}

.form-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.severity-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
.severity-badge.critical { background: #ef4444; color: white; }
.severity-badge.warning { background: #f59e0b; color: white; }
.severity-badge.info { background: #3b82f6; color: white; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-section {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.form-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-label,
.form-group .toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
}

.toggle-switch {
    width: 36px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle-label input:checked + .toggle-switch {
    background: var(--accent-primary);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-label input:checked + .toggle-switch::after {
    transform: translateX(16px);
}

.toggle-label input {
    display: none;
}

.file-upload {
    position: relative;
}

.file-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100% !important;
    cursor: pointer;
}

.file-upload-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
}

.file-upload-label:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.upload-status {
    margin-top: 8px;
    font-size: 0.8rem;
}

/* ===================================================
   DATA TABLES
   =================================================== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.data-table th {
    background: #f8fafc;
    color: var(--text-muted);
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover {
    background: var(--accent-light);
}

.data-table tbody tr {
    transition: background var(--transition-fast);
}

.tanks-table-wrapper,
.alarms-table-wrapper,
.report-table-wrapper,
.calibration-table-wrapper {
    overflow-x: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

/* ===================================================
   CARDS
   =================================================== */
.settings-card,
.calibration-card,
.report-card,
.chart-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px;
    margin-bottom: 10px;
}

.settings-card {
    padding: 20px;
}

.settings-card h3,
.calibration-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* Settings Grid — 2 columns with smart spanning */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.settings-card-wide {
    grid-column: 1 / -1;
}

/* Tank Config wide — top fields in multi-column row */
.settings-card-wide:has(.alarm-thresholds-section) .settings-form {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 16px;
}

.settings-card-wide:has(.alarm-thresholds-section) .settings-form > .btn-primary {
    grid-column: 1 / -1;
    max-width: 200px;
}

/* Alarm Thresholds Section */
.alarm-thresholds-section {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    margin-top: 4px;
}

.alarm-thresholds-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.alarm-thresholds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
}

/* Hide browser number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Override grid layout for PIN card — keypads side by side, fill width */
.settings-card:has(.settings-pin-pad) .settings-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: flex-start;
}

.settings-card:has(.settings-pin-pad) .settings-form > .form-group {
    flex: 1 1 calc(50% - 16px);
    text-align: center;
}


.settings-card:has(.settings-pin-pad) .settings-form > .form-group > label {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.settings-card:has(.settings-pin-pad) .settings-form > button,
.settings-card:has(.settings-pin-pad) .settings-form > .btn-primary {
    order: 10;
    width: 100%;
    max-width: fit-content;
    margin: 4px auto 0;
}

.settings-card:has(.settings-pin-pad) .settings-form > #pin-change-status,
.settings-card:has(.settings-pin-pad) .settings-form > #tech-pin-change-status {
    order: 11;
    flex-basis: 100%;
    text-align: center;
}

/* Settings PIN pad — expand to fill card */
.settings-pin-pad {
    max-width: none;
    gap: 6px;
    margin: 4px 0;
}

.settings-pin-pad .pin-key {
    height: 44px;
    font-size: 1.05rem;
    border-radius: 6px;
}

.settings-pin-display {
    margin-bottom: 4px;
}

.settings-pin-display .pin-dots {
    gap: 8px;
    margin: 4px 0;
    justify-content: center;
}

.settings-pin-display .pin-dot {
    width: 11px;
    height: 11px;
}

/* Numeric Stepper (value display + keypad button) */
.numeric-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    height: 36px;
}

.stepper-display {
    flex: 1;
    padding: 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 34px;
    min-width: 60px;
}

.stepper-display:hover {
    background: #f0f4ff;
}

.stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
    height: 100%;
}

.stepper-numpad {
    width: 40px;
    background: var(--accent-primary);
    color: white;
    font-size: 0.85rem;
    border-left: 1px solid #d1d5db;
}

.stepper-numpad:hover {
    background: #1976D2;
}

.stepper-numpad:active {
    background: #0d47a1;
}

/* Numpad popup modal */
.numpad-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.numpad-popup {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 240px;
}

.numpad-popup-display {
    background: #f1f5f9;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: right;
    color: var(--text-primary);
    margin-bottom: 10px;
    min-height: 20px;
}

.numpad-popup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.numpad-popup-grid .pin-key {
    height: 40px;
    font-size: 1rem;
    border-radius: 8px;
}

.numpad-popup-actions {
    display: flex;
    gap: 8px;
}

.numpad-popup-actions button {
    flex: 1;
    padding: 8px;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Text Keyboard Popup */
.text-keyboard-popup {
    width: 420px;
}

.text-keyboard-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.text-keyboard-row {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.text-key {
    min-width: 32px;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f8f9fa;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.text-key:active {
    background: var(--accent-primary);
    color: white;
}

.text-key-space {
    flex: 1;
    min-width: 120px;
}

.text-key-backspace,
.text-key-clear {
    min-width: 48px;
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.text-key-caps {
    min-width: 44px;
    background: #e0e7ff;
    color: #3730a3;
    border-color: #a5b4fc;
}
.text-key-caps.active {
    background: #3730a3;
    color: white;
}
.text-key-wide {
    min-width: 52px;
    font-size: 0.75rem;
}

/* Calibration Grid */
.calibration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.calibration-info {
    margin-bottom: 10px;
}

.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    background: var(--info-light);
    border: 1px solid var(--info);
    border-radius: var(--border-radius-sm);
    color: var(--info);
    font-size: 0.8rem;
}

.readings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.reading-item {
    text-align: center;
    padding: 8px;
    background: #f5f5f5;
    border-radius: var(--border-radius-sm);
}

.reading-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.reading-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.calibration-offset-section {
    margin-bottom: 10px;
}

.calibration-offset-section h4 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.offset-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.current-offset {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.offset-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.offset-value {
    font-weight: 600;
    color: var(--accent-primary);
}

.calibration-actions {
    margin-top: 12px;
}

/* ===================================================
   REPORT TABS
   =================================================== */
/* Underline-style tabs — cleaner than a pill, more "enterprise" */
.report-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--space-4);
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.report-tab {
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--fs-md);
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.report-tab i { opacity: 0.7; font-size: 0.95rem; }
.report-tab:hover {
    color: var(--text-primary);
    background: transparent;
}
.report-tab:hover i { opacity: 1; }
.report-tab.active {
    background: transparent;
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}
.report-tab.active i { opacity: 1; }

.report-tab-content {
    display: none;
}
.report-tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.analytics-tab-content {
    display: none;
}
.analytics-tab-content.active {
    display: block;
}
#view-charts.analytics-velocity-active > .page-header .header-controls {
    display: none;
}
.analytics-chart-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.analytics-chart-controls label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}
.analytics-chart-controls select {
    min-width: 150px;
}
.analytics-tank-limit-message {
    align-self: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.analytics-tank-limit-message.is-limit-reached {
    color: var(--warning);
    font-weight: 700;
}
.analytics-tank-menu-head {
    position: sticky;
    top: -6px;
    z-index: 1;
    display: grid;
    gap: 5px;
    padding: 2px 2px 8px;
    background: var(--bg-card, #fff);
    border-bottom: 1px solid var(--border-color);
}
.analytics-tank-menu-head > span {
    color: var(--text-muted);
    font-size: 0.7rem;
}
.analytics-tank-search {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8rem;
}
.analytics-tank-options .ms-dd-item small {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.68rem;
}
.analytics-parameter-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: var(--space-3);
}
.analytics-parameter-group {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
}
.analytics-parameter-group h4 {
    margin: 0 0 8px;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analytics-parameter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.analytics-parameter-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    cursor: pointer;
}
.analytics-parameter-option input {
    accent-color: var(--accent-primary);
}
.analytics-select-all {
    font-weight: 700;
}
.analytics-parameters-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Filter row — cleaner with a unified card */
.report-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 130px;
}

.filter-group label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select,
.filter-group input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    background: #fff;
    color: var(--text-primary);
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.report-filters > .btn-primary,
.report-filters > .btn-secondary,
.report-filters > .btn-danger,
.report-filters > .btn-success {
    height: 38px;
    padding: 0 16px;
    box-sizing: border-box;
    align-self: flex-end;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Summary stats — pill-style row that doesn't compete with the table */
.report-summary {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px 20px;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.summary-stat + .summary-stat {
    border-left: 1px solid var(--border-light);
    padding-left: var(--space-5);
}

.summary-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.summary-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Reports Grid (Export tab) */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.report-card .report-icon {
    font-size: 1.8rem;
    color: var(--accent-primary);
    margin-bottom: 8px;
}

.report-card h3 {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.report-card p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.report-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.report-form .form-row label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Reconciliation — operator-friendly step layout */
.recon-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}
.recon-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.recon-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #1565C0;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}
.recon-section-hint {
    font-size: 11px;
    color: #64748b;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 4px;
}
.recon-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}
.recon-warnings {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: var(--border-radius);
    padding: 10px 14px;
    margin-bottom: var(--space-3);
    color: #9a3412;
    font-size: var(--fs-sm);
}
.recon-warnings.hidden { display: none; }
.recon-warning-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.recon-warning-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.recon-warning-list i { color: #ea580c; }

/* Reconciliation tab header bar with How-to-Use button */
.recon-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.recon-header-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}
.btn-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.btn-help:hover { background: #dbeafe; border-color: #93c5fd; }
.btn-help i { color: #1d4ed8; }

/* Help modal content */
.recon-help-content { max-width: 760px !important; }
.recon-help-body { padding: 16px 22px 8px; }
.recon-help-section { margin-bottom: 20px; }
.recon-help-section h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #1565C0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.recon-help-section p {
    margin: 0 0 8px 0;
    color: #334155;
    line-height: 1.55;
    font-size: 13.5px;
}
.recon-help-steps {
    margin: 0;
    padding-left: 20px;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.6;
}
.recon-help-steps li { margin-bottom: 6px; }
.recon-glossary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 13px;
    color: #334155;
}
.recon-glossary dt {
    font-weight: 700;
    color: #0f172a;
}
.recon-glossary dd {
    margin: 0;
    line-height: 1.5;
}
.recon-formula-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.recon-formula {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #334155;
}
.recon-formula span { font-weight: 700; color: #0f172a; }
.recon-formula code {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 8px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12.5px;
    color: #1d4ed8;
}
.recon-help-interpret {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    color: #334155;
}
.recon-help-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 6px;
    letter-spacing: 0.02em;
}
.recon-help-pill-pass { background: #dcfce7; color: #166534; }
.recon-help-pill-warn { background: #fef3c7; color: #92400e; }
.recon-help-pill-fail { background: #fee2e2; color: #991b1b; }
.recon-help-refs {
    margin: 0;
    padding-left: 20px;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.6;
}
/* DUC vs manual tag on the meter-sales line */
.meter-source-tag {
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Reconciliation */
.reconciliation-results {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px;
    margin-top: 10px;
}

.reconciliation-results h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 10px;
}

/* Tank Summary Bar */
.recon-summary-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    padding: 8px;
    background: #f0f4f8;
    border-radius: var(--border-radius-sm);
}

.recon-summary-item {
    flex: 1;
    text-align: center;
    padding: 4px;
}

.recon-summary-label {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.recon-summary-value {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Reconciliation header product chip — must match PRODUCT_COLOR in app.js */
.recon-summary-value.product-pmg,
.recon-summary-value.product-pg { color: #047857; }
.recon-summary-value.product-hobc { color: #7c3aed; }
.recon-summary-value.product-hsd { color: #1d4ed8; }
.recon-summary-value.product-kerosene { color: #b45309; }
.recon-summary-value.product-other { color: #64748b; }

/* Reconciliation Table Layout (5 columns) */
.recon-table {
    width: 100%;
    margin-bottom: 12px;
}

.recon-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.6fr 0.6fr;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.recon-row-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 4px;
}

.recon-row-highlight {
    background: var(--accent-light);
    border: 1px solid var(--accent-primary);
    border-radius: var(--border-radius-sm);
}

.recon-col-label {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.recon-timestamp {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 400;
}

.recon-col-obs,
.recon-col-tc,
.recon-col-temp,
.recon-col-water {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.recon-col-tc {
    color: var(--accent-primary);
}

.recon-col-temp {
    font-size: 0.82rem;
    font-weight: 600;
    color: #e65100;
}

.recon-col-water {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0277bd;
}

.recon-col-obs.positive,
.recon-col-tc.positive { color: var(--success); }
.recon-col-obs.negative,
.recon-col-tc.negative { color: var(--danger); }
.recon-col-obs.muted,
.recon-col-tc.muted {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

/* Gain/Loss Grid */
.recon-grid {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.recon-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.recon-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.recon-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.recon-item {
    padding: 8px;
    background: #f5f5f5;
    border-radius: var(--border-radius-sm);
}

.recon-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.recon-value {
    font-size: 1rem;
    font-weight: 700;
}

.recon-sublabel {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.recon-value.positive { color: var(--success); }
.recon-value.negative { color: var(--danger); }
.recon-value.muted {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

.recon-item.gain {
    background: var(--success-light, #e8f5e9);
    border-left: 3px solid var(--success);
}

.recon-item.loss {
    background: var(--danger-light, #ffebee);
    border-left: 3px solid var(--danger);
}

.variance-analysis {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    margin-top: 4px;
}

.status-box.status-pass { background: var(--success-light, #e8f5e9); border: 1px solid var(--success); }
.status-box.status-warn { background: var(--warning-light, #fff8e1); border: 1px solid var(--warning, #ff9800); }
.status-box.status-fail { background: var(--danger-light, #ffebee); border: 1px solid var(--danger); }

/* Collapsible Additional Details */
.recon-details-section {
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

.recon-details-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.recon-details-content {
    padding: 8px 0;
}

/* Trend chart container */
.trend-chart-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.trend-chart-container .chart-container {
    flex: 1;
    min-height: 300px;
}

/* ===================================================
   ALARMS
   =================================================== */
.alarms-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.alarms-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.alarms-filters .filter-group {
    min-width: 120px;
}

.filter-btn {
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    height: 38px;
}

.filter-btn:hover {
    background: var(--bg-hover);
}

.filter-btn.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

/* ===================================================
   EVENTS TIMELINE
   =================================================== */
.events-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}

.event-item:hover {
    background: var(--bg-hover, #f5f5f5);
}

.event-item.event-critical {
    border-left-color: var(--danger-color, #e53e3e);
}

.event-item.event-warning {
    border-left-color: #ed8936;
}

.event-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #fff;
}

.event-icon.system { background: #3182ce; }
.event-icon.device { background: #38a169; }
.event-icon.tank { background: #1a365d; }
.event-icon.alarm { background: #e53e3e; }
.event-icon.config { background: #dd6b20; }
.event-icon.user { background: #805ad5; }

.event-content {
    flex: 1;
    min-width: 0;
}

.event-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-tank {
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--accent-primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
}

.event-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.events-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.events-empty i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    opacity: 0.4;
}

.events-empty p {
    font-size: 0.9rem;
}

.events-load-more {
    text-align: center;
    padding: 12px;
}

.events-load-more button {
    min-width: 140px;
}

/* ===================================================
   ANALYTICS
   =================================================== */
.analytics-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.analytics-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.analytics-stat-card .stat-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    color: white;
}

.stat-icon.volume { background: var(--accent-primary); }
.stat-icon.consumption { background: var(--warning); }
.stat-icon.temp { background: var(--danger); }
.stat-icon.water { background: var(--info); }
.stat-icon.active { background: var(--success); }
.stat-icon.tanks { background: var(--accent-primary); }
.stat-icon.days { background: #6366f1; }

/* Trends "Compare to previous" toggle — sits inline with the other filters */
.filter-toggle { display: flex; align-items: flex-end; }
.trend-compare-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    height: 36px;
}
.trend-compare-toggle:hover { border-color: #cbd5e1; }
.trend-compare-toggle input { accent-color: #1565C0; cursor: pointer; }

/* Days-of-stock low-stock warning */
.stat-value.stat-warn { color: #b45309; }
.stat-value.stat-warn::after {
    content: ' ⚠';
    font-size: 0.9em;
}

/* Analytics empty state — shown on the main chart container when no tank is
   selected so the operator sees a friendly hint instead of a blank canvas. */
.analytics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 280px;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    gap: 12px;
}
.analytics-empty i { font-size: 38px; color: #cbd5e1; }
.analytics-empty p { margin: 0; font-size: 13.5px; }

/* Sales-velocity panel (Top performers / Slow movers) inside its Analytics tab. */
.velocity-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}
.velocity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.velocity-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.velocity-header h3 i { margin-right: 6px; color: #1565C0; }
.velocity-controls select {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
}
.velocity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
@media (max-width: 768px) {
    .velocity-grid { grid-template-columns: 1fr; }
}
.velocity-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: var(--space-3);
}
.velocity-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.velocity-card-hint {
    margin-left: auto;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.velocity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: vrow;
}
.velocity-row {
    counter-increment: vrow;
    padding: 8px 4px 10px;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}
.velocity-row:last-child { border-bottom: none; }
.velocity-row::before {
    content: counter(vrow) ".";
    position: absolute;
    left: 0;
    top: 9px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}
.velocity-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    margin-bottom: 4px;
}
.velocity-row-station {
    font-weight: 700;
    color: #1e293b;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}
.velocity-row-tank {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 500;
}
.velocity-product-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}
.velocity-row-bar {
    margin-left: 16px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.velocity-row-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 200ms ease;
}
.velocity-row-foot {
    margin-left: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #475569;
}
.velocity-volume { font-weight: 700; color: #0f172a; }
.velocity-rate { color: #64748b; }
.velocity-days {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 600;
    font-size: 10.5px;
}
.velocity-days.low { background: #fef3c7; color: #92400e; }
.velocity-days.idle { background: #f1f5f9; color: #94a3b8; }
.velocity-empty {
    list-style: none;
    padding: 12px 0;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

/* Tablet/mobile — make the wider "large" modals (station edit, tank create,
   reconciliation help) actually fit on a 768 px tablet without overflow. */
@media (max-width: 768px) {
    .modal-content.large { max-width: 95vw; max-height: 88vh; }
    .modal-content.large .modal-body { max-height: 65vh; overflow-y: auto; }
    .recon-help-content { max-width: 95vw !important; }
    .recon-fields { flex-direction: column; align-items: stretch; }
    .recon-fields .filter-group { width: 100%; }
}

.stat-info .stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.stat-info .stat-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.analytics-charts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.chart-header h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-actions {
    display: flex;
    gap: 3px;
}

.chart-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.chart-btn:hover {
    background: var(--bg-hover);
}

.chart-btn.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ===================================================
   STATIONS
   =================================================== */
.station-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.summary-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.summary-stat-card .stat-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    color: white;
    background: var(--accent-primary);
}

.stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.empty-state {
    text-align: center;
    padding: 60px 32px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.empty-state .empty-illustration {
    width: 160px;
    height: 120px;
    margin-bottom: 8px;
    opacity: 0.95;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 4px;
    display: block;
    color: var(--accent-primary);
    opacity: 0.7;
}

.empty-state h3 {
    font-size: 1.05rem;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-weight: 700;
}

.empty-state p {
    font-size: var(--fs-sm);
    margin-bottom: 12px;
    max-width: 380px;
    line-height: 1.5;
}

/* ============================================
   SKELETON LOADERS
   ============================================ */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: 4px;
    color: transparent;
}
.skeleton-line { height: 14px; margin: 4px 0; }
.skeleton-block { height: 40px; }
.skeleton-card {
    height: 220px;
    border-radius: var(--border-radius);
}

/* View transitions */
.view-section {
    animation: view-fade-in 0.18s ease-out;
}
@keyframes view-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   COMMAND PALETTE
   ============================================ */
.cmd-palette {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.cmd-palette.hidden { display: none; }
.cmd-palette-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.cmd-palette-panel {
    position: relative;
    width: min(620px, 92vw);
    max-height: 70vh;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cmd-slide 0.18s ease-out;
}
@keyframes cmd-slide {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.cmd-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}
.cmd-palette-input-wrap i {
    color: var(--text-muted);
    font-size: 1rem;
}
#cmd-palette-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--text-primary);
}
.cmd-palette-esc {
    font-family: inherit;
    font-size: 0.7rem;
    background: #f1f5f9;
    color: var(--text-secondary);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-weight: 600;
}
.cmd-palette-results {
    overflow-y: auto;
    flex: 1;
    padding: 6px;
}
.cmd-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.cmd-item.is-selected {
    background: var(--accent-light);
}
.cmd-item > i {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #eef2f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    font-size: 0.85rem;
}
.cmd-item.is-selected > i {
    background: var(--accent-primary);
    color: #fff;
}
.cmd-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cmd-label {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmd-sub {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.cmd-kind {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--text-secondary);
}
.cmd-kind-station { background: #dbeafe; color: #1d4ed8; }
.cmd-kind-tank    { background: #dcfce7; color: #15803d; }
.cmd-kind-view    { background: #f1f5f9; color: var(--text-secondary); }
.cmd-palette-footer {
    display: flex;
    gap: 14px;
    padding: 8px 18px;
    border-top: 1px solid var(--border-color);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    background: #fafbfc;
}
.cmd-palette-footer kbd {
    font-family: inherit;
    font-size: 0.65rem;
    padding: 1px 6px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin-right: 4px;
}

/* ============================================
   APP HEADER BAR (persistent global chrome)
   ============================================ */
.app-header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.ahb-left { justify-self: start; }
.ahb-center { justify-self: center; }
.ahb-right { justify-self: end; }
.ahb-left, .ahb-right, .ahb-center {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ahb-page-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Profile pill + dropdown */
.ahb-profile { position: relative; }
.ahb-profile-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ahb-profile-btn:hover {
    border-color: var(--accent-primary);
}
.ahb-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    overflow: hidden;
    z-index: 200;
    animation: cmd-slide 0.15s ease-out;
}
.ahb-profile-menu.hidden { display: none; }
.ahb-profile-name {
    padding: 12px 14px 8px;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-weight: 600;
}
.ahb-profile-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0;
}
.ahb-profile-item {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: background var(--transition-fast);
}
.ahb-profile-item:hover {
    background: var(--accent-light);
    color: var(--accent-primary);
}
.ahb-profile-item i { width: 16px; }
.ahb-cmd {
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--fs-sm);
    min-width: 240px;
    text-align: left;
}
.ahb-cmd:hover {
    border-color: var(--accent-primary);
    background: #fff;
    color: var(--text-primary);
}
.ahb-cmd > span { flex: 1; text-align: left; }
.ahb-cmd kbd {
    font-family: inherit;
    font-size: 0.7rem;
    background: #e2e8f0;
    color: var(--text-secondary);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    font-weight: 600;
}
.ahb-conn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
}
.ahb-conn .ahb-conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}
.ahb-conn.is-online {
    background: rgba(46, 125, 50, 0.1);
    border-color: rgba(46, 125, 50, 0.3);
    color: #1f6f23;
}
.ahb-conn.is-online .ahb-conn-dot {
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.45);
    animation: pulse-online 2s ease-in-out infinite;
}
.ahb-conn.is-offline {
    background: rgba(198, 40, 40, 0.1);
    border-color: rgba(198, 40, 40, 0.3);
    color: var(--danger);
}
.ahb-conn.is-offline .ahb-conn-dot { background: var(--danger); }
@keyframes pulse-online {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(46, 125, 50, 0); }
}

.ahb-scope-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 600;
}
.ahb-scope-select {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 7px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 180px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ahb-scope-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.ahb-scope-select:hover {
    border-color: var(--accent-primary);
}

/* ============================================
   CHANNEL PILL (WiFi / SIM1 / SIM2)
   ============================================ */
.channel-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #e2e8f0;
    color: var(--text-secondary);
}
.channel-pill i { font-size: 0.7rem; }
.channel-pill.channel-wifi { background: rgba(21, 101, 192, 0.12); color: #1565c0; }
.channel-pill.channel-sim1 { background: rgba(46, 125, 50, 0.12); color: #2e7d32; }
.channel-pill.channel-sim2 { background: rgba(239, 108, 0, 0.12); color: #c44e00; }
.channel-pill.channel-unknown { background: #e2e8f0; color: var(--text-muted); }

/* Mini channel badge in Overview tank gauges */
.mini-tank-channel {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    background: #f1f5f9;
    color: var(--text-secondary);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mini-tank-channel i { font-size: 0.6rem; }
.mini-tank-channel.channel-wifi { color: #1565c0; }
.mini-tank-channel.channel-sim1 { color: #2e7d32; }
.mini-tank-channel.channel-sim2 { color: #c44e00; }

/* Sub-text below the main cell value (e.g. station name under tank id) */
.cell-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 1px;
    font-weight: 400;
}

/* Merge stations dialog */
.merge-source-line {
    margin: 0 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}
.merge-delete-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    cursor: pointer;
}

/* ============================================
   STATION DETAIL — Quick-Add Tank
   ============================================ */
.station-tanks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.station-tanks-header h4 { margin: 0; }

.btn-sm {
    padding: 6px 12px;
    font-size: var(--fs-sm);
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quick-add-station-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-light);
    color: var(--accent-primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-3);
}
.quick-add-station-pill i { font-size: 0.95rem; }

.form-grid {
    display: grid;
    gap: var(--space-3);
}
.form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-grid label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.form-grid .required { color: var(--danger); font-weight: 700; }
.form-grid .optional { color: var(--text-muted); font-weight: 500; font-size: 0.78rem; }
.form-grid input,
.form-grid select {
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-grid input:focus,
.form-grid select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.form-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.form-error {
    margin-top: var(--space-3);
    padding: 10px 12px;
    background: var(--danger-light);
    border: 1px solid var(--danger);
    border-radius: var(--border-radius-sm);
    color: var(--danger);
    font-size: var(--fs-sm);
}

/* ============================================
   BROKER CONFIG CARD (Settings → MQTT Brokers)
   ============================================ */
.settings-subhead {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: -4px 0 var(--space-3);
}
.broker-card {
    background: #f8f9fb;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}
.broker-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
    flex-wrap: wrap;
}
.broker-card-header .broker-name {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
}
.broker-card-header .broker-tag {
    margin-left: var(--space-2);
    background: var(--accent-light);
    color: var(--accent-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================
   KPI RIBBON (Overview top strip)
   ============================================ */
.kpi-ribbon {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}
@media (max-width: 1500px) {
    .kpi-ribbon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .kpi-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .kpi-ribbon { grid-template-columns: minmax(0, 1fr); }
}
.kpi-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast);
}
.kpi-fuel-tile {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: start;
}
.kpi-fuel-tile .kpi-text {
    grid-column: 2;
}
.kpi-fuel-tile .kpi-product-detail {
    grid-column: 1 / -1;
}
.kpi-tile.is-alert { border-color: rgba(239, 108, 0, 0.5); }
.kpi-tile.is-critical { border-color: rgba(198, 40, 40, 0.6); background: var(--danger-light); }
.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.kpi-icon-fuel  { background: rgba(21, 101, 192, 0.10); color: #1565c0; }
.kpi-icon-truck { background: rgba(46, 125, 50, 0.10); color: #2e7d32; }
.kpi-icon-ok    { background: rgba(46, 125, 50, 0.10); color: #2e7d32; }
.kpi-icon-alarm { background: rgba(239, 108, 0, 0.10); color: #ef6c00; }
.kpi-icon-muted { background: rgba(100, 116, 139, 0.12); color: #64748b; }
.kpi-tile.is-critical .kpi-icon-alarm { background: rgba(198, 40, 40, 0.18); color: var(--danger); }
.kpi-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.kpi-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.kpi-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-tile.is-critical .kpi-value { color: var(--danger); }

.date-range-time-label {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.time-24h-input {
    display: none !important;
}
.time-24h-selector {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 38px;
}
.time-24h-selector[style*="display: none"] {
    display: none !important;
}
.time-24h-part {
    min-width: 3.4em;
    height: 38px;
    padding: 6px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-variant-numeric: tabular-nums;
}
.time-24h-separator {
    font-weight: 600;
}
.date-range-timezone {
    align-self: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}
.date-range-error {
    display: block;
    width: 100%;
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 600;
}
.export-estimate {
    padding: 8px 10px;
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}
.export-estimate.is-warning {
    color: #8a5700;
    background: #fff7df;
}
[data-theme="dark"] .export-estimate.is-warning {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
}
[aria-invalid="true"] {
    border-color: var(--danger) !important;
}

/* ============================================
   STATIONS OVERVIEW (HQ landing)
   ============================================ */
.breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-5);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--fs-sm);
    flex-shrink: 0;
}
.breadcrumb-bar .crumb {
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.breadcrumb-bar a.crumb:hover {
    color: var(--accent-primary);
    background: var(--accent-light);
}
.breadcrumb-bar .crumb-current {
    color: var(--text-primary);
    font-weight: 600;
    cursor: default;
}
.breadcrumb-bar .crumb-sep {
    color: var(--text-muted);
    font-size: var(--fs-md);
}
/* #9 — the outlet crumb is clickable (opens its overview page) */
.breadcrumb-bar a.crumb-link { cursor: pointer; text-decoration: none; }
.breadcrumb-bar a.crumb-link:hover { color: var(--accent-primary); background: var(--accent-light); }
/* #10 — per-station tank dropdown in the breadcrumb bar */
.station-tank-picker {
    margin-left: var(--space-3);
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--fs-sm, 0.85rem);
    cursor: pointer;
    max-width: 220px;
}
/* #2 — Division / City filter rows (chips), each prefixed with a small tag */
.ofilter-row { display: flex; align-items: flex-start; gap: 10px; }
.ofilter-tag {
    flex: 0 0 auto; min-width: 62px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px;
    padding-top: 8px;
}
.ofilter-stack {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.ofilter-select-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
}
.ofilter-row .overview-city-strip { flex: 1 1 auto; }
/* #13 — checkbox dropdown (compact multi-select) */
.ms-dd { position: relative; display: inline-block; margin-left: 4px; }
.ms-dd-btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: space-between;
    min-width: 170px; height: 38px; cursor: pointer; padding: 0 12px;
}
.ms-dd-caret { font-size: 0.8em; opacity: 0.6; }
.ms-dd-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
    min-width: 210px; max-height: 340px; overflow-y: auto;
    background: var(--bg-card, #fff); border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); padding: 6px;
}
.ms-dd-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; color: var(--text-primary); }
.ms-dd-item:hover { background: var(--bg-secondary, #f1f5f9); }
.ms-dd-item input { cursor: pointer; margin: 0; }
.ms-dd-clear { padding: 0; margin-bottom: 4px; border-bottom: 1px solid var(--border-color); }
.ms-dd-clear button { background: none; border: none; color: var(--accent-primary, #1565C0); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 6px 8px; width: 100%; text-align: left; }
/* #6 — clickable KPI tiles */
.kpi-tile.kpi-clickable { cursor: pointer; transition: transform .08s ease, box-shadow .12s ease; }
.kpi-tile.kpi-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.kpi-drill-table th, .kpi-drill-table td { padding: 6px 10px; font-size: 0.86rem; white-space: nowrap; }
.kpi-drill-table thead th { position: sticky; top: 0; background: var(--bg-secondary); z-index: 1; }

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: var(--space-5) var(--space-5) var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-4);
}
.overview-header h2 {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.overview-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
/* Inline pill-shaped summary so it doesn't compete with station cards */
.overview-summary {
    display: flex;
    gap: var(--space-4);
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}
.osum-card {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: 0;
}
.osum-card + .osum-card {
    border-left: 1px solid var(--border-light);
    padding-left: var(--space-4);
}
.osum-card .osum-num {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.osum-card .osum-lbl {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.osum-alarms .osum-num { color: var(--danger); }
.osum-alarms.is-zero .osum-num { color: var(--text-primary); }

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

/* Overview tools row (sort + view toggle) */
.overview-tools {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.overview-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0 4px 0 12px;
    height: 36px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    transition: border-color var(--transition-fast);
}
.overview-sort-label:hover { border-color: var(--accent-primary); }
.overview-sort-label i { font-size: 0.85rem; }
.overview-sort {
    border: none;
    background: transparent;
    padding: 0 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    height: 100%;
    font-family: inherit;
}

/* Drag-and-drop visuals on station cards (whole card is draggable;
   handle is just the discovery affordance). */
.station-mon-card.is-dragging {
    opacity: 0.45;
    transform: scale(0.98);
}
.station-mon-card.drop-target {
    outline: 2px dashed var(--accent-primary);
    outline-offset: -3px;
    background: var(--accent-light);
}
.smc-drag-handle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-right: 4px;
    cursor: grab;
    opacity: 0.45;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}
.station-mon-card:hover .smc-drag-handle { opacity: 1; color: var(--accent-primary); }
.smc-drag-handle:active { cursor: grabbing; }

/* Grid / Map view toggle */
.overview-view-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 3px;
}
.ovt-btn {
    background: transparent;
    border: none;
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ovt-btn:hover { color: var(--text-primary); }
.ovt-btn.active {
    background: var(--accent-primary);
    color: #fff;
}

/* Map view */
.overview-map-wrap {
    padding: var(--space-4) var(--space-5) var(--space-5);
    position: relative;
}
.overview-filter-strip {
    padding: 0 var(--space-5);
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.overview-filter-strip:empty { display: none; }
.overview-filter-select {
    min-width: 180px;
    max-width: 260px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.overview-filter-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}
.overview-city-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}
.overview-city-strip:empty { display: none; }
.city-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: var(--fs-sm);
    color: #334155;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    line-height: 1.2;
}
.city-chip-main {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    gap: 1px;
}
.city-chip-volume {
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.01em;
}
.city-chip.active .city-chip-volume {
    color: rgba(255, 255, 255, 0.86);
}
/* Cities whose stations have no tanks reporting — visually muted so the
   user can tell at a glance which regions are "live" vs imported-but-empty. */
.city-chip-empty:not(.active) {
    background: #f8fafc;
    color: #94a3b8;
    border-style: dashed;
}
.city-chip-empty:not(.active) .city-chip-name { color: #94a3b8; }
.city-chip-empty:not(.active) .city-chip-volume { color: #cbd5e1; }
.city-chip-empty:not(.active) .city-chip-count {
    background: #f1f5f9;
    color: #94a3b8;
}

.overview-product-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}
.kpi-product-detail {
    gap: 3px;
    margin: 6px 0 0;
    width: 100%;
}
.kpi-product-detail .product-strip-label {
    font-size: 9px;
    letter-spacing: 0.03em;
}
.kpi-product-detail .product-strip-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
}
.kpi-product-detail .product-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr);
    column-gap: 4px;
    row-gap: 1px;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.kpi-product-detail .product-card-dot {
    width: 6px;
    height: 6px;
    grid-column: 1;
    grid-row: 1;
}
.kpi-product-detail .product-card-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.kpi-product-detail .product-card-name,
.kpi-product-detail .product-card-pct {
    font-size: 9px;
    white-space: nowrap;
}
.kpi-product-detail .product-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-product-detail .product-card-vol {
    display: none;
}
.kpi-product-detail .product-card-pct {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
}
.overview-product-strip:empty { display: none; }
.product-strip-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.product-strip-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.product-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: var(--fs-sm);
    color: #334155;
    box-shadow: var(--shadow-sm);
    min-width: 140px;
}
.product-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85) inset;
}
.product-card-body {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex: 1;
}
.product-card-name {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #1e293b;
}
.product-card-vol {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}
.product-card-pct {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: #eef2f7;
    padding: 2px 7px;
    border-radius: 999px;
}
.product-strip-empty {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: #64748b;
    font-size: 12px;
    font-style: italic;
}
.city-chip:hover { background: #f8fafc; border-color: #cbd5e1; }
.city-chip.active {
    background: #1565C0;
    border-color: #1565C0;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(21,101,192,0.25);
}
.city-chip-all i { color: #64748b; }
.city-chip.active.city-chip-all i { color: #ffffff; }
.city-chip-name { font-weight: 600; }
.city-chip-count {
    display: inline-block;
    min-width: 22px;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}
.city-chip.active .city-chip-count {
    background: rgba(255,255,255,0.22);
    color: #ffffff;
}
.overview-map {
    height: calc(100vh - 360px);
    min-height: 460px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: #eef2f7;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
}
/* Offline canvas — when no tiles are loaded, give the map a soft "paper map"
   feel so the country outline + city zones read like a deliberate design,
   not a missing-tile fail. */
.overview-map.tiles-offline,
.overview-map .leaflet-container.tiles-offline-bg {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}
[data-theme="dark"] .overview-map { background-color: #0b1220; }
[data-theme="dark"] .overview-map.tiles-offline,
[data-theme="dark"] .overview-map .leaflet-container.tiles-offline-bg {
    background: linear-gradient(135deg, #0b1220 0%, #1e293b 100%) !important;
}

/* Basemap toggle — top-right of the map */
.map-basemap-toggle {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    z-index: 401; /* above Leaflet panes (400) */
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.96);
    padding: 4px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}
[data-theme="dark"] .map-basemap-toggle {
    background: rgba(30,41,59,0.96);
}
.map-bm-btn {
    background: transparent;
    border: 0;
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 100ms ease, color 100ms ease;
}
.map-bm-btn i { font-size: 10px; opacity: 0.8; }
.map-bm-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.map-bm-btn.active {
    background: #1565C0;
    color: #fff;
}
.map-bm-btn.active i { opacity: 1; }

/* City zone strokes — paint a touch heavier for the active one so it pops */
.city-zone { transition: fill-opacity 200ms ease, stroke-opacity 200ms ease; }
.city-zone.active { stroke-dasharray: none; }
[data-theme="dark"] .city-label .city-name { color: #cbd5e1; }
.overview-map .leaflet-container {
    background: #eef2f7 !important;
    font-family: inherit;
}
/* When OSM tiles can't load (offline / firewalled), the GeoJSON outline is the only landmark */
.overview-map.tiles-offline {
    background-color: #cfe2f3;
}
/* Pakistan polygon hover (subtle) */
.overview-map .leaflet-interactive {
    transition: fill-opacity 0.2s;
}
.overview-map-empty {
    position: absolute;
    inset: var(--space-4) var(--space-5) var(--space-5);
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 32px;
}
.overview-map-empty i {
    font-size: 2.4rem;
    color: var(--accent-primary);
    opacity: 0.5;
}
.overview-map-empty p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }

/* Fuel-station map marker */
.station-pin {
    pointer-events: auto;
}
.station-pin-marker {
    position: relative;
    width: 40px;
    height: 50px;
    transition: transform 0.15s ease, filter 0.15s ease;
    filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.25));
}
.station-pin-marker:hover {
    transform: translateY(-3px) scale(1.06);
    filter: drop-shadow(0 7px 10px rgba(15, 23, 42, 0.35));
    z-index: 1000 !important;
}
.station-pin-face {
    position: absolute;
    left: 2px;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #16a34a;          /* OK default */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    font-size: 1.05rem;
}
.station-pin-tail {
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 14px solid #16a34a;
}
/* Alarm state */
.station-pin-marker.alarm .station-pin-face { border-color: #dc2626; color: #dc2626; }
.station-pin-marker.alarm .station-pin-tail { border-top-color: #dc2626; }
/* Stale (no data in 5–30 min) */
.station-pin-marker.stale .station-pin-face { border-color: #f59e0b; color: #f59e0b; }
.station-pin-marker.stale .station-pin-tail { border-top-color: #f59e0b; }
/* Offline (no data in > 30 min) — red, separate from alarm so an offline-
   but-not-alarming station still reads as "needs attention" not "ok". */
.station-pin-marker.offline .station-pin-face { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.station-pin-marker.offline .station-pin-tail { border-top-color: #dc2626; }
/* Inactive / no-tanks — kept grey so deliberately-offline stations don't
   look the same as a station whose comm dropped unexpectedly. */
.station-pin-marker.inactive .station-pin-face { border-color: #94a3b8; color: #94a3b8; }
.station-pin-marker.inactive .station-pin-tail { border-top-color: #94a3b8; }

/* Tank-count badge (top-right corner) */
.station-pin-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #1e3a8a;
    color: #fff;
    font-weight: 700;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.4);
}
/* Alarm exclamation badge (top-left corner) */
.station-pin-alarm {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.4);
    animation: pin-pulse 1.6s ease-out infinite;
}
@keyframes pin-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Neighbour country labels */
.neighbour-label-wrap { background: transparent !important; border: none !important; }
.neighbour-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.42);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: center;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 4px #e6ebf2, 0 0 4px #e6ebf2;
    font-family: inherit;
}

/* City labels on the offline map */
.city-label-wrap { background: transparent !important; border: none !important; }
.city-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    font-family: inherit;
}
.city-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1e3a8a;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}
.city-name {
    font-size: 0.7rem;
    color: #1e3a8a;
    font-weight: 600;
    text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
    letter-spacing: 0.02em;
}
.city-label.city-tier-1 .city-name { font-size: 0.8rem; font-weight: 700; }
.city-label.city-tier-1 .city-dot  { width: 6px; height: 6px; }
.city-label.city-tier-3 .city-name { font-size: 0.66rem; opacity: 0.85; }

/* Popup styling — sharper, with brand accent */
.leaflet-popup-content-wrapper {
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-lg) !important;
    border-top: 3px solid var(--accent-primary);
    padding: 4px !important;
}
.leaflet-popup-content {
    margin: 12px 14px !important;
    font-family: inherit;
}
.leaflet-popup-tip { box-shadow: var(--shadow-md); }
.map-popup-name {
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.map-popup-addr {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}
.map-popup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.map-popup-pill {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.map-popup-pill.ok       { background: var(--success-light); color: var(--success); }
.map-popup-pill.alarm    { background: var(--danger-light); color: var(--danger); }
.map-popup-pill.inactive { background: #f1f5f9; color: var(--text-secondary); }
.map-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.map-popup-btn {
    display: block;
    width: 100%;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    padding: 7px 12px;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.map-popup-btn:hover { background: var(--accent-dark); }
.map-popup-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.map-popup-link:hover {
    background: var(--accent-primary);
    color: #fff;
}
.map-popup-link i { font-size: 0.9rem; }
.station-mon-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid #cbd5e1;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.station-mon-card:hover {
    box-shadow: var(--shadow-md);
}
.station-mon-card { border-left-color: var(--success); }
.station-mon-card.has-alarm { border-left-color: var(--danger); }
.station-mon-card.is-inactive {
    border-left-color: #cbd5e1;
    opacity: 0.7;
}

.smc-header {
    padding: 14px var(--space-4);
    background: var(--bg-card);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.smc-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--fs-md);
    letter-spacing: 0.01em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.smc-name i {
    color: var(--text-muted);
    font-size: 0.95rem;
}
.smc-pill {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    flex-shrink: 0;
    background: #f1f5f9;
    color: var(--text-secondary);
}
.smc-pill.smc-pill-ok       { background: var(--success-light); color: var(--success); }
.smc-pill.smc-pill-alarm    { background: var(--danger-light);  color: var(--danger); }
.smc-pill.smc-pill-stale    { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.smc-pill.smc-pill-offline,
.smc-pill.smc-pill-no-tanks { background: #f1f5f9; color: var(--text-secondary); }
.smc-pill.smc-pill-inactive { background: #f1f5f9; color: var(--text-secondary); }

/* Station-card status pill on the Stations Management page */
.station-status {
    font-size: 0.66rem;
    padding: 3px 9px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.station-status.status-ok       { background: var(--success-light); color: var(--success); }
.station-status.status-alarm    { background: var(--danger-light);  color: var(--danger); }
.station-status.status-stale    { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.station-status.status-offline,
.station-status.status-no-tanks,
.station-status.status-inactive { background: #f1f5f9; color: var(--text-secondary); }

/* Map popup status pill */
.map-popup-pill.stale    { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.map-popup-pill.offline,
.map-popup-pill.no-tanks { background: #f1f5f9; color: var(--text-secondary); }
.smc-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.smc-add-tank {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    font-size: 0.78rem;
}
.smc-add-tank:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--accent-light);
}

.smc-body { padding: var(--space-4); }
.smc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.smc-stat {
    text-align: center;
    padding: 8px 4px;
    background: #f8f9fb;
    border: 1px solid #eef0f4;
    border-radius: var(--border-radius-sm);
}
.smc-stat .smc-stat-num {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.smc-stat .smc-stat-lbl {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 2px;
    display: block;
}
.smc-stat.alarm {
    background: var(--danger-light);
    border-color: rgba(198, 40, 40, 0.2);
}
.smc-stat.alarm .smc-stat-num { color: var(--danger); }

.smc-tank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
}
.mini-tank {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: var(--border-radius-sm);
    padding: 10px 10px 8px;
    text-align: center;
    transition: border-color var(--transition-fast);
    position: relative;
    cursor: pointer;
}
.mini-tank:hover { border-color: var(--accent-primary); }
.mini-tank.is-offline { opacity: 0.6; }
.mini-tank-gauge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}
.mini-tank-svg {
    width: 78px;
    height: 34px;
    flex-shrink: 0;
}
.mini-tank-svg rect[height] { transition: y 0.5s ease, height 0.5s ease; }
.mini-tank-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.01em;
}
.mini-tank-pct.low      { color: var(--warning); }
.mini-tank-pct.critical { color: var(--danger); }
.mini-tank-pct.offline  { color: var(--text-muted); }

.mini-tank-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mini-tank-channel-row {
    margin-top: 6px;
    display: flex;
    justify-content: center;
}
.mini-tank-foot {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.66rem;
    color: var(--text-muted);
}
.mini-tank-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
}
.mini-tank-time i {
    font-size: 0.6rem;
    opacity: 0.7;
}
/* When data is older than ~5 minutes, dim the timestamp to flag staleness */
.mini-tank.is-offline .mini-tank-time { color: var(--danger); }
.mini-tank-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Product label colours — kept in sync with PRODUCT_COLOR in app.js so the
   same fuel reads as the same colour on every surface (Overview mini-tank,
   Trends chart, Reconciliation summary, City strip product dots). */
.mini-tank-product {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.mini-tank-product.product-pmg,
.mini-tank-product.product-pg,
.mini-tank-product.product-petrol { color: #047857; }
.mini-tank-product.product-hsd,
.mini-tank-product.product-diesel { color: #1d4ed8; }
.mini-tank-product.product-hobc { color: #7c3aed; }
.mini-tank-product.product-kerosene { color: #b45309; }
.mini-tank-vol {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.mini-tank-temp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.mini-tank-temp i {
    color: #d94646;
    font-size: 0.65rem;
}
.smc-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    padding: var(--space-3) 0;
}

/* Station Cards */
.station-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--success);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.station-card:hover {
    box-shadow: var(--shadow-md);
}
.station-card.inactive { border-left-color: #cbd5e1; opacity: 0.75; }

.station-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px var(--space-4);
    background: var(--bg-card);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}

.station-card-header .station-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    color: var(--accent-primary);
    border-radius: 8px;
    font-size: 0.95rem;
}

.station-card-header .station-info {
    flex: 1;
    min-width: 0;
}

.station-card-header .station-name {
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-card-header .station-id {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 1px;
}

.station-card-header .station-status {
    font-size: 0.66rem;
    padding: 3px 9px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.station-status.active {
    background: var(--success-light);
    color: var(--success);
}

.station-status.inactive {
    background: #f1f5f9;
    color: var(--text-secondary);
}

.station-card-body {
    padding: 10px 12px;
}

.station-card-body .station-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.station-card-body .station-detail-row i {
    width: 14px;
    text-align: center;
    color: var(--accent-primary);
    font-size: 0.75rem;
}

.station-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.station-tanks-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.station-tanks-badge i {
    color: var(--accent-primary);
}

.station-card-actions {
    display: flex;
    gap: 4px;
}

.station-card-actions .btn-edit,
.station-card-actions .btn-delete {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

.station-card-actions .btn-edit:hover {
    background: rgba(21, 101, 192, 0.1);
    color: var(--accent-primary);
}

.station-card-actions .btn-delete:hover {
    background: rgba(244, 67, 54, 0.1);
    color: var(--danger);
}

/* Station Detail Modal Grid */
.station-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.station-info-section h4,
.station-tanks-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
}

.info-row .info-label {
    color: var(--text-muted);
}

.info-row .info-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* Station Tanks List in Detail Modal */
.station-tanks-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.station-tank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.station-tank-item:hover {
    border-color: var(--accent-primary);
    background: rgba(21, 101, 192, 0.04);
}

.station-tank-item .tank-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.8rem;
    color: white;
    background: var(--inv-icon-bg);
}

.station-tank-item .tank-icon.hsd { background: #0d47a1; }
.station-tank-item .tank-icon.pmg,
.station-tank-item .tank-icon.pg,
.station-tank-item .tank-icon.petrol { background: #e65100; }
.station-tank-item .tank-icon.hobc { background: #1a1a1a; }

.station-tank-item .tank-info {
    flex: 1;
    min-width: 0;
}

.station-tank-item .tank-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.station-tank-item .tank-type {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.station-tank-item .tank-live-stats {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
}

.station-tank-item .tank-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.station-tank-item .tank-stat .stat-val {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.station-tank-item .tank-stat .stat-lbl {
    color: var(--text-muted);
    font-size: 0.65rem;
}

.station-tank-item .tank-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.station-tank-item .tank-status-dot.online { background: #4caf50; }
.station-tank-item .tank-status-dot.error { background: #f44336; }
.station-tank-item .tank-status-dot.alarm { background: #ff9800; }
.station-tank-item .tank-status-dot.offline { background: #9e9e9e; }

.station-tank-item .tank-volume {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent-primary);
    white-space: nowrap;
}

.no-tanks-message {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.no-tanks-message i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

/* ===================================================
   MODALS
   =================================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    max-width: 560px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
}

.modal-content.small {
    max-width: 420px;
}

.modal-content.large {
    max-width: 700px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
}

.close-btn:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 16px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

.mb-3 { margin-bottom: 12px; }

.text-danger {
    color: var(--danger);
    font-size: 0.85rem;
}

/* ===================================================
   TOAST NOTIFICATIONS
   =================================================== */
.toast-container {
    position: fixed;
    top: 50px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toast {
    padding: 10px 16px;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: white;
    box-shadow: var(--shadow-md);
    max-width: 320px;
}

.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }
.toast.info { background: var(--info); }

/* ===================================================
   LOADER
   =================================================== */
.loader {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===================================================
   STATUS INDICATORS
   =================================================== */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

.status-indicator.online { color: var(--success); }
.status-indicator.offline { color: var(--danger); }

/* ===================================================
   RESPONSIVE breakpoints
   =================================================== */
@media (max-height: 650px) {
    html {
        font-size: 13px;
    }

    .tank-tab-bar {
        height: 60px;
    }

    .tank-tab {
        padding: 6px 15px;
        font-size: 19px;
        min-height: 48px;
    }

    .tank-info-header {
        padding: 4px 10px;
    }

    .tank-info-left h2 {
        font-size: 1rem;
    }

    .status-row {
        padding: 8px 12px;
        font-size: 14px;
    }

    .tank-visual-panel {
        width: 260px;
        padding: 10px;
    }

    .horizontal-tank-body {
        height: 150px;
    }

    .tank-fill-percentage {
        font-size: 1.8rem;
    }

    .scale-line span {
        font-size: 15px;
        top: -20px;
    }

    .tank-supports {
        height: 14px;
    }

    .chart-container {
        min-height: 250px;
    }

    .chart-container.large {
        min-height: 320px;
    }

    .chart-controls {
        padding: 6px 10px;
    }

    .chart-controls select {
        padding: 5px 8px;
        font-size: 14px;
    }

    .chart-controls .btn-icon {
        font-size: 16px;
        padding: 5px 8px;
    }

    .inventory-bar {
        padding: 9px;
        gap: 7px;
    }

    .inv-item {
        padding: 12px;
    }

    .inv-icon {
        width: 51px;
        height: 51px;
        font-size: 24px;
    }

    .inv-value {
        font-size: 24px;
    }

    .inv-label {
        font-size: 16px;
    }

    .delivery-leak-row {
        padding: 2px 6px;
    }

    .view-section {
        padding: 6px 8px;
    }

    .page-header h2 {
        font-size: 0.95rem;
    }

    .recon-summary-bar { flex-wrap: wrap; }
    .recon-summary-item { flex: 0 0 48%; }
    .recon-row {
        grid-template-columns: 1.5fr 1fr 1fr 0.5fr 0.5fr;
        padding: 4px 6px;
    }
    .recon-col-label { font-size: 0.72rem; }
    .recon-col-obs, .recon-col-tc { font-size: 0.78rem; }
    .recon-col-temp { font-size: 0.68rem; }
    .recon-col-water { font-size: 0.68rem; }
    .recon-grid-4 { grid-template-columns: repeat(2, 1fr); }

    .settings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .settings-card,
    .calibration-card {
        padding: 10px;
    }

    .settings-card-wide:has(.alarm-thresholds-section) .settings-form {
        grid-template-columns: repeat(2, 1fr);
    }

    .alarm-thresholds-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Compact right nav for small screens */
    .nav-item {
        padding: 8px 14px;
    }

    .nav-item i {
        font-size: 1.44rem;
    }

    .nav-user {
        padding: 6px 14px;
        font-size: 1.02rem;
    }

    .nav-footer {
        padding: 3px 7px;
        gap: 1px;
    }

    .nav-clock {
        font-size: 0.72rem;
    }

    .connection-info {
        font-size: 0.72rem;
    }

    .analytics-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .analytics-stat-card {
        padding: 6px 8px;
    }

    .event-item {
        padding: 6px 10px;
        gap: 8px;
    }

    .event-icon {
        width: 28px;
        height: 28px;
        font-size: 0.72rem;
    }

    .event-title { font-size: 0.78rem; }
    .event-desc { font-size: 0.7rem; }
    .event-time { font-size: 0.68rem; }

    /* Login screen — compact layout for small viewports */
    .login-container {
        max-width: 340px;
        border-radius: 16px;
    }

    .login-branding {
        padding: 20px 24px 14px;
    }

    .login-logo-wrap {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .login-logo {
        width: 38px;
    }

    .login-branding h1 {
        font-size: 1.3rem;
    }

    .login-subtitle {
        font-size: 0.7rem;
    }

    .login-form {
        padding: 0 20px 6px;
    }

    .pin-section {
        padding: 2px 0 10px;
        margin-bottom: 12px;
    }

    .pin-label {
        font-size: 0.75rem;
    }

    .pin-dots {
        gap: 12px;
        margin: 8px 0 2px;
    }

    .pin-dot {
        width: 12px;
        height: 12px;
    }

    .pin-pad {
        max-width: 260px;
        gap: 8px;
        margin-bottom: 12px;
    }

    .pin-key {
        height: 48px;
        border-radius: 10px;
        font-size: 1.2rem;
    }

    .pin-key-clear,
    .pin-key-backspace {
        font-size: 1rem;
    }

    .login-btn {
        padding: 11px;
        border-radius: 10px;
        font-size: 0.85rem;
    }

    .login-footer {
        padding: 10px 20px 14px;
        font-size: 0.65rem;
    }

}

/* Very small screens (800x480) */
@media (max-width: 900px) {
    .right-nav {
        width: 48px;
    }

    .right-nav:hover {
        width: 140px;
    }

    .tank-visual-panel {
        width: 200px;
    }

    .horizontal-tank-body {
        height: 100px;
    }

    .inventory-bar {
        grid-template-columns: repeat(4, 1fr);
    }

    .charts-row {
        grid-template-columns: 1fr;
    }

    .calibration-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-card-wide:has(.alarm-thresholds-section) .settings-form {
        grid-template-columns: repeat(2, 1fr);
    }

    .alarm-thresholds-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .station-detail-grid {
        grid-template-columns: 1fr;
    }

    .recon-row {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
    .recon-col-temp,
    .recon-col-water {
        display: none;
    }
    .recon-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .recon-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================================================
   KIOSK PERF: Disable heavy effects on ARM
   =================================================== */
@media (max-width: 1280px) and (max-height: 800px) {
    .tank-liquid-fill,
    .tank-water-fill {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: height 0.3s linear;
    }
}

/* Hide cursor in fullscreen mode */
body.fullscreen-active,
body.fullscreen-active * {
    cursor: none !important;
}

/* In fullscreen: disable hover-expand entirely — sidebar stays collapsed on hover */
body.fullscreen-active .right-nav:hover {
    width: var(--nav-width);
}
body.fullscreen-active .right-nav:hover .nav-item span,
body.fullscreen-active .right-nav:hover .nav-user span {
    opacity: 0;
}
body.fullscreen-active .right-nav:hover .nav-item .badge {
    opacity: 0;
}
body.fullscreen-active .right-nav:hover .connection-info #status-text,
body.fullscreen-active .right-nav:hover .nav-clock,
body.fullscreen-active .right-nav:hover .last-update-text {
    display: none;
}

/* In fullscreen: .expanded (click) overrides hover — .expanded:hover has higher specificity */
body.fullscreen-active .right-nav.expanded,
body.fullscreen-active .right-nav.expanded:hover {
    width: var(--nav-width-expanded);
}
body.fullscreen-active .right-nav.expanded .nav-item span,
body.fullscreen-active .right-nav.expanded:hover .nav-item span,
body.fullscreen-active .right-nav.expanded .nav-user span,
body.fullscreen-active .right-nav.expanded:hover .nav-user span {
    opacity: 1;
}
body.fullscreen-active .right-nav.expanded .nav-item .badge,
body.fullscreen-active .right-nav.expanded:hover .nav-item .badge {
    opacity: 1;
}
body.fullscreen-active .right-nav.expanded .connection-info #status-text,
body.fullscreen-active .right-nav.expanded:hover .connection-info #status-text,
body.fullscreen-active .right-nav.expanded .nav-clock,
body.fullscreen-active .right-nav.expanded:hover .nav-clock {
    display: flex;
}
body.fullscreen-active .right-nav.expanded .last-update-text,
body.fullscreen-active .right-nav.expanded:hover .last-update-text {
    display: inline;
}

/* ===================================================
   SETTINGS: ROLE BADGE, SERIAL INPUT, TANK CHIPS, STATUS
   =================================================== */
.role-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-badge.admin {
    background: #e3f2fd;
    color: #1565c0;
}

.role-badge.tech {
    background: #fff3e0;
    color: #e65100;
}

.serial-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.serial-input-group input {
    flex: 1;
}

.serial-input-group .btn-sm {
    padding: 8px 14px;
    font-size: 0.8rem;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
}

.port-select-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.port-select-group select {
    flex: 1;
}

.btn-refresh {
    padding: 7px 10px;
    background: #f0f4f8;
    border: 1px solid #dde3ea;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    color: #555;
    font-size: 0.85rem;
}

.btn-refresh:hover {
    background: #e3f2fd;
    color: #1565c0;
}

.existing-tanks-row {
    grid-column: 1 / -1;
}

.existing-tanks-chips {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 30px;
}
.tank-chip-group { display: flex; flex-direction: column; gap: 4px; }
.tank-chip-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.tank-chip-group-count {
    background: #eef2f7;
    color: #475569;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}
[data-theme="dark"] .tank-chip-group-count { background: #0f172a; color: #cbd5e1; }
.tank-chip-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tank-chip {
    padding: 5px 12px;
    border-radius: 16px;
    background: #f0f4f8;
    border: 1px solid #dde3ea;
    font-size: 0.78rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.tank-chip:hover {
    background: #e3f2fd;
    border-color: #90caf9;
}

.tank-chip.active {
    background: #1565c0;
    color: white;
    border-color: #1565c0;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8f9fa;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9e9e9e;
    flex-shrink: 0;
}

.status-dot.connected {
    background: #4caf50;
}

.status-dot.disconnected {
    background: #f44336;
}

/* ===================================================
   SIM SIGNAL STRENGTH BARS (sidebar)
   =================================================== */
.sim-signal-container {
    padding: 4px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sim-signal-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.sim-label {
    font-size: 10px;
    color: var(--nav-text, #cfd8dc);
    min-width: 28px;
    font-weight: 600;
    opacity: 0.5;
}

.sim-label.sim-active {
    opacity: 1;
    color: #4caf50;
}

.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}

.signal-bars .bar {
    width: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 1px;
    transition: background 0.3s;
}

.signal-bars .bar:nth-child(1) { height: 4px; }
.signal-bars .bar:nth-child(2) { height: 7px; }
.signal-bars .bar:nth-child(3) { height: 10px; }
.signal-bars .bar:nth-child(4) { height: 13px; }
.signal-bars .bar:nth-child(5) { height: 16px; }

/* Active signal bar colors based on strength */
.signal-bars .bar.active { background: #4caf50; }
.signal-bars.signal-weak .bar.active { background: #f44336; }
.signal-bars.signal-fair .bar.active { background: #ff9800; }
.signal-bars.signal-good .bar.active { background: #4caf50; }

.signal-dbm {
    font-size: 9px;
    color: var(--nav-text, #cfd8dc);
    opacity: 0.6;
    min-width: 36px;
    text-align: right;
}

/* Collapsed sidebar: hide text, show only bars */
.sidebar:not(.expanded) .sim-label,
.sidebar:not(.expanded) .signal-dbm {
    display: none;
}

.sidebar:not(.expanded) .sim-signal-container {
    padding: 4px 8px;
}

.sidebar:not(.expanded) .sim-signal-row {
    justify-content: center;
}

/* ===================================================
   SCROLLBAR STYLING (thin, minimal)
   =================================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 5px;
    border: 2px solid #f0f0f0;
}

::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* Firefox scrollbar */
* {
    scrollbar-width: auto;
    scrollbar-color: #b0b0b0 #f0f0f0;
}

/* ====================================================================
   NIGHT MODE — COMPREHENSIVE COVERAGE
   ====================================================================
   This block sits at the bottom of the stylesheet so it wins against the
   earlier (light-themed) rules without needing !important. Every literal
   #ffffff / #f8fafc / #f0f4ff / etc on a primary UI surface gets a dark
   counterpart here. Components that already used CSS variables pick up
   the theme via the :root override at the top of the file and don't
   need a rule here.
*/

[data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); }

/* Force the top app-header-bar dark — its base rule hardcodes #ffffff */
[data-theme="dark"] .app-header-bar {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .ahb-page-title,
[data-theme="dark"] .ahb-scope-label,
[data-theme="dark"] .ahb-conn-text { color: var(--text-primary) !important; }

/* Same trick for KPI tiles which set background: #fff inline */
[data-theme="dark"] .kpi-tile {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .kpi-value { color: var(--text-primary) !important; }
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .kpi-sub { color: var(--text-secondary) !important; }
[data-theme="dark"] .kpi-tile.is-critical { background: rgba(198, 40, 40, 0.15) !important; }
[data-theme="dark"] .kpi-tile.is-alert    { background: rgba(239, 108, 0, 0.10) !important; }

/* Station summary chip strip — Stations | Tanks | Alarms */
[data-theme="dark"] .overview-summary,
[data-theme="dark"] .station-summary {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .osum-card .osum-num { color: var(--text-primary); }
[data-theme="dark"] .osum-card .osum-lbl { color: var(--text-secondary); }

/* Sort + view-toggle pill */
[data-theme="dark"] .overview-sort-label,
[data-theme="dark"] .overview-view-toggle {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .overview-sort {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
}
[data-theme="dark"] .ovt-btn {
    background: transparent !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .ovt-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .ovt-btn.active {
    background: #1d4ed8 !important;
    color: #fff !important;
}

/* KPI tile inner text — labels & sub were too muted */
[data-theme="dark"] .kpi-label { color: #cbd5e1 !important; }
[data-theme="dark"] .kpi-value { color: #ffffff !important; font-weight: 700; }
[data-theme="dark"] .kpi-sub   { color: #94a3b8 !important; }

/* Mini-tank cards inside station cards — % values were ghostly */
[data-theme="dark"] .smc-tank-card .mini-tank-pct,
[data-theme="dark"] .smc-tank-card .mini-tank-volume,
[data-theme="dark"] .smc-tank-card .smc-tank-name {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .smc-tank-card .mini-tank-temp,
[data-theme="dark"] .smc-tank-card .mini-tank-time,
[data-theme="dark"] .smc-tank-card .smc-tank-product {
    color: #94a3b8 !important;
}

/* Inactive / NO TANKS station cards — they were near-invisible */
[data-theme="dark"] .station-mon-card.is-inactive,
[data-theme="dark"] .station-mon-card.status-no-tanks,
[data-theme="dark"] .station-mon-card.status-offline {
    background: rgba(30, 41, 59, 0.5) !important;
    opacity: 0.85;
}
[data-theme="dark"] .station-mon-card.is-inactive .smc-head-name,
[data-theme="dark"] .station-mon-card.status-no-tanks .smc-head-name {
    color: #94a3b8 !important;
}

/* Big station cards in the grid */
[data-theme="dark"] .station-mon-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* City + product strip chips */
[data-theme="dark"] .city-chip {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary);
}
[data-theme="dark"] .city-chip .city-chip-name { color: var(--text-primary); }
[data-theme="dark"] .city-chip-count {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .city-chip.active {
    background: #1d4ed8 !important;
    color: #fff !important;
    border-color: #1d4ed8 !important;
}
[data-theme="dark"] .city-chip.active .city-chip-count { background: rgba(255,255,255,0.22) !important; color: #fff !important; }

[data-theme="dark"] .product-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .product-card-name { color: var(--text-primary); }
[data-theme="dark"] .product-card-vol  { color: var(--text-secondary); }
[data-theme="dark"] .product-card-pct  { background: rgba(255,255,255,0.08) !important; color: var(--text-secondary) !important; }

/* Alarms banner under header */
[data-theme="dark"] .alarm-banner,
[data-theme="dark"] .global-alarm-banner {
    background: rgba(239, 108, 0, 0.12) !important;
    color: #fbbf24 !important;
    border-color: rgba(239, 108, 0, 0.3) !important;
}

/* ====================================================================
   NIGHT MODE — COMPREHENSIVE TEXT COLOUR SWEEP
   ====================================================================
   Most components hardcode dark text values (#1a1a2e, #0f172a, #1e293b,
   #374151) that go invisible on a dark background. Rather than rewrite each
   component, we flip every common text-bearing class here.  Split into:
   - PRIMARY (headings, names, numbers, values)  → near-white #e2e8f0
   - SECONDARY (labels, subs, captions, units)   → slate #94a3b8
   - HEADING ACCENT (section titles)              → light blue accent
*/

/* PRIMARY text — main content, values, headings -------------------- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] .ahb-page-title,
[data-theme="dark"] .ahb-profile-name,
[data-theme="dark"] .page-title,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .nav-brand-name,
[data-theme="dark"] .recon-header-title,
[data-theme="dark"] .recon-summary-value,
[data-theme="dark"] .recon-value,
[data-theme="dark"] .recon-formula span,
[data-theme="dark"] .recon-glossary dt,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .stat-info .stat-value,
[data-theme="dark"] .info-value,
[data-theme="dark"] .reading-value,
[data-theme="dark"] .offset-value,
[data-theme="dark"] .dl-value,
[data-theme="dark"] .smc-head-name,
[data-theme="dark"] .smc-stat-num,
[data-theme="dark"] .smc-tank-name,
[data-theme="dark"] .mini-tank-volume,
[data-theme="dark"] .mini-tank-pct,
[data-theme="dark"] .osum-num,
[data-theme="dark"] .city-chip-name,
[data-theme="dark"] .product-card-name,
[data-theme="dark"] .velocity-row-station,
[data-theme="dark"] .velocity-volume,
[data-theme="dark"] .velocity-card-title,
[data-theme="dark"] .broker-name,
[data-theme="dark"] .tank-name,
[data-theme="dark"] .tank-id,
[data-theme="dark"] .alarm-title,
[data-theme="dark"] .event-title,
[data-theme="dark"] .station-name,
[data-theme="dark"] .crumb-current,
[data-theme="dark"] .inv-value,
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .data-table td,
[data-theme="dark"] .data-table th,
[data-theme="dark"] table td,
[data-theme="dark"] table th,
[data-theme="dark"] .modal-content p,
[data-theme="dark"] .modal-content li,
[data-theme="dark"] .recon-help-section p,
[data-theme="dark"] .recon-help-steps,
[data-theme="dark"] .recon-help-interpret,
[data-theme="dark"] .recon-glossary dd {
    color: #e2e8f0 !important;
}

/* SECONDARY text — labels, captions, hints, meta ------------------- */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-hint,
[data-theme="dark"] .info-label,
[data-theme="dark"] .reading-label,
[data-theme="dark"] .offset-label,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-info .stat-label,
[data-theme="dark"] .smc-stat-lbl,
[data-theme="dark"] .smc-tank-product,
[data-theme="dark"] .mini-tank-temp,
[data-theme="dark"] .mini-tank-time,
[data-theme="dark"] .mini-tank-meta,
[data-theme="dark"] .osum-lbl,
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .kpi-sub,
[data-theme="dark"] .city-chip-count,
[data-theme="dark"] .city-chip-volume,
[data-theme="dark"] .product-card-vol,
[data-theme="dark"] .product-card-pct,
[data-theme="dark"] .velocity-row-tank,
[data-theme="dark"] .velocity-rate,
[data-theme="dark"] .velocity-card-hint,
[data-theme="dark"] .recon-summary-label,
[data-theme="dark"] .recon-label,
[data-theme="dark"] .recon-sublabel,
[data-theme="dark"] .recon-col-label,
[data-theme="dark"] .recon-help-refs,
[data-theme="dark"] .last-update-text,
[data-theme="dark"] .ahb-conn-text,
[data-theme="dark"] .ahb-scope-label,
[data-theme="dark"] .overview-sort-label,
[data-theme="dark"] .overview-sub,
[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .lbp-partners-label,
[data-theme="dark"] .nav-brand-sub,
[data-theme="dark"] .section-sub,
[data-theme="dark"] .settings-subhead,
[data-theme="dark"] .recon-section-hint,
[data-theme="dark"] .inv-label,
[data-theme="dark"] .crumb,
[data-theme="dark"] .alarm-desc,
[data-theme="dark"] .alarm-time,
[data-theme="dark"] .empty-state p,
[data-theme="dark"] .quick-add-station-pill,
[data-theme="dark"] .empty-state {
    color: #94a3b8 !important;
}

/* HEADING ACCENT — section titles that used --accent-primary blue. They
   stay blue, but a brighter shade so they pop against dark navy. */
[data-theme="dark"] .recon-help-section h4,
[data-theme="dark"] .recon-section-title,
[data-theme="dark"] .velocity-header h3,
[data-theme="dark"] .nav-section-title,
[data-theme="dark"] .login-pin-header h2,
[data-theme="dark"] .settings-card h3,
[data-theme="dark"] .calibration-card h3,
[data-theme="dark"] h3 i.fas {
    color: #60a5fa !important;
}

/* Paragraphs and free text — fall back to primary if not otherwise styled */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span:not([class]):not([style*="color"]),
[data-theme="dark"] .modal-body,
[data-theme="dark"] .report-tab-content {
    color: var(--text-primary);
}

/* Tank tab top strip — needs explicit text-color, the dark-theme tab bar
   inherits but tab labels were too dim. */
[data-theme="dark"] .tank-tab .tank-name,
[data-theme="dark"] .tank-tab .tab-product-type {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .tank-tab:not(.active) .tab-product-type { color: var(--text-secondary) !important; }

/* Empty-state illustrations / "no tanks assigned" caption */
[data-theme="dark"] .empty-state h3 { color: #cbd5e1 !important; }
[data-theme="dark"] .empty-state .empty-title { color: #cbd5e1 !important; }
[data-theme="dark"] .smc-empty { color: #64748b !important; }

/* Code-styled formula boxes — keep blue but brighter */
[data-theme="dark"] .recon-formula code,
[data-theme="dark"] code {
    background: rgba(96, 165, 250, 0.10) !important;
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

/* Severity / status badges — preserve semantic colour but tint background */
[data-theme="dark"] .severity-badge.critical { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }
[data-theme="dark"] .severity-badge.warning  { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; }
[data-theme="dark"] .severity-badge.info     { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }

/* CRITICAL / WARNING pills next to threshold labels in Tank Configuration */
[data-theme="dark"] .threshold-pill.critical { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }
[data-theme="dark"] .threshold-pill.warning  { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; }
[data-theme="dark"] .threshold-pill.info     { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }

/* Inner tiles inside Station cards on Overview — the hardcoded #f8f9fb /
   #fff backgrounds were the LAST holdouts. Use the exact class names. */
[data-theme="dark"] .smc-stat {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .smc-stat .smc-stat-num { color: #e2e8f0 !important; }
[data-theme="dark"] .smc-stat .smc-stat-lbl { color: #94a3b8 !important; }
[data-theme="dark"] .smc-stat.alarm {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
[data-theme="dark"] .smc-stat.alarm .smc-stat-num { color: #fca5a5 !important; }

[data-theme="dark"] .mini-tank {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .mini-tank:hover { border-color: #60a5fa !important; }
[data-theme="dark"] .mini-tank .mini-tank-pct  { color: #e2e8f0 !important; }
[data-theme="dark"] .mini-tank .mini-tank-name { color: #e2e8f0 !important; }
[data-theme="dark"] .mini-tank .mini-tank-volume,
[data-theme="dark"] .mini-tank .mini-tank-temp,
[data-theme="dark"] .mini-tank .mini-tank-time { color: #94a3b8 !important; }

/* The little WiFi / S1 / S2 channel pill at the bottom of a mini-tank */
[data-theme="dark"] .mini-tank-channel {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .mini-tank-channel.channel-wifi { color: #93c5fd !important; }
[data-theme="dark"] .mini-tank-channel.channel-sim1,
[data-theme="dark"] .mini-tank-channel.channel-sim2 { color: #86efac !important; }

/* Mini-tank shell SVG — the stadium rect was painted #f8fafc which looks
   like a white pill stuck on the dark card. Inline-attribute selector. */
[data-theme="dark"] .mini-tank-svg rect[fill="#f8fafc"] { fill: #1e293b !important; }

/* Table header rows across Alarms / Reports / All Tanks / Calibration —
   base .data-table th uses background:#f8fafc (light gray) which is invisible
   in dark mode and clashes with the dark body. */
[data-theme="dark"] .data-table th,
[data-theme="dark"] .alarms-table th,
[data-theme="dark"] .tanks-table th,
[data-theme="dark"] table thead th {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] .data-table tr,
[data-theme="dark"] .alarms-table tr,
[data-theme="dark"] table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Top alarm banner — actual id/class is .alert-banner (not .alarm-banner). */
[data-theme="dark"] .alert-banner {
    background: rgba(239, 108, 0, 0.14) !important;
    color: #fbbf24 !important;
    border-color: rgba(239, 108, 0, 0.32) !important;
}
[data-theme="dark"] .alert-banner i,
[data-theme="dark"] .alert-banner .alert-close { color: #fbbf24 !important; }

/* MQTT Broker config cards in Settings → Technical Settings */
[data-theme="dark"] .broker-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .broker-card-header .broker-name,
[data-theme="dark"] .broker-name { color: #e2e8f0 !important; }
[data-theme="dark"] .broker-card-header .broker-tag,
[data-theme="dark"] .broker-tag {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .broker-card label { color: #94a3b8 !important; }

/* Chrome / Edge autofill backdrop — was painting SMTP inputs light blue */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    caret-color: #e2e8f0;
    border: 1px solid #334155 !important;
}

/* Tank visualization tick markers (3/4, 1/2, 1/4) — the tank illustration
   stays white (it's a graphic), so the tick labels must stay DARK to remain
   legible on that white surface, even in night mode. */
[data-theme="dark"] .vt-tick span {
    color: #475569 !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
[data-theme="dark"] .vt-tick::before {
    background: rgba(15, 23, 42, 0.55) !important;
}

/* Status-indicator pills (MQTT broker Connected / serial port Disconnected
   / poller status) — base style uses background: #f8f9fa which clashes
   with the dark surrounding card. */
[data-theme="dark"] .status-indicator {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color);
}
[data-theme="dark"] .status-indicator.online,
[data-theme="dark"] .status-indicator.connected {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.25);
}
[data-theme="dark"] .status-indicator.offline,
[data-theme="dark"] .status-indicator.disconnected {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.25);
}
[data-theme="dark"] .status-indicator i.fa-circle { color: currentColor !important; }

/* Top-bar command-palette trigger (Search stations, tanks…) — actual
   class is .ahb-cmd, not .ahb-search. */
[data-theme="dark"] .ahb-cmd {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .ahb-cmd:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .ahb-cmd i { color: var(--text-secondary) !important; }
[data-theme="dark"] .ahb-cmd kbd {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Command palette modal itself */
[data-theme="dark"] .cmd-palette-input-wrap {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #cmd-palette-input {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
}

/* Tank chips in Settings → Tank Configuration → Existing Tanks list */
[data-theme="dark"] .tank-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .tank-chip:hover {
    background: rgba(96, 165, 250, 0.15) !important;
    border-color: #60a5fa !important;
}
[data-theme="dark"] .tank-chip.active {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}
[data-theme="dark"] .tank-chip-group-title { color: #cbd5e1 !important; }

/* Calibration table sub-station labels under each tank id */
[data-theme="dark"] .data-table .station-sub,
[data-theme="dark"] .data-table .tank-station,
[data-theme="dark"] .data-table small {
    color: #94a3b8 !important;
}

/* Page chrome ------------------------------------------------------ */
[data-theme="dark"] .main-wrapper,
[data-theme="dark"] .main-content,
[data-theme="dark"] .view-section,
[data-theme="dark"] .stations-overview,
[data-theme="dark"] .reports-page,
[data-theme="dark"] .calibration-page,
[data-theme="dark"] .settings-page,
[data-theme="dark"] .events-page,
[data-theme="dark"] .alarms-page,
[data-theme="dark"] .all-tanks-page,
[data-theme="dark"] .tank-status-page,
[data-theme="dark"] .station-management {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* KPI ribbon ------------------------------------------------------- */
[data-theme="dark"] .kpi-ribbon,
[data-theme="dark"] .kpi-tile {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .kpi-sub { color: var(--text-secondary); }
[data-theme="dark"] .kpi-value { color: var(--text-primary); }
[data-theme="dark"] .kpi-tile.is-critical { background-color: rgba(198, 40, 40, 0.15); }
[data-theme="dark"] .kpi-tile.is-alert    { background-color: rgba(239, 108, 0, 0.10); }

/* Page header / titles -------------------------------------------- */
[data-theme="dark"] .page-header,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-header h2,
[data-theme="dark"] .page-header h3,
[data-theme="dark"] .stations-overview-header,
[data-theme="dark"] .reports-header,
[data-theme="dark"] h2, [data-theme="dark"] h3 {
    color: var(--text-primary);
}
[data-theme="dark"] .page-header .page-subtitle,
[data-theme="dark"] .stations-overview-header .stations-overview-sub,
[data-theme="dark"] .overview-station-list-sub,
[data-theme="dark"] .text-muted, [data-theme="dark"] .muted { color: var(--text-secondary); }

/* Stations grid cards --------------------------------------------- */
[data-theme="dark"] .station-mon-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .smc-stat-tile,
[data-theme="dark"] .smc-empty {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}
[data-theme="dark"] .smc-stat-num { color: var(--text-primary); }
[data-theme="dark"] .smc-stat-lbl { color: var(--text-secondary); }
[data-theme="dark"] .smc-head { border-color: var(--border-color); }
[data-theme="dark"] .smc-head-name { color: var(--text-primary); }

/* Mini-tank cards inside the station grid */
[data-theme="dark"] .smc-tank-card {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--border-color);
}
[data-theme="dark"] .smc-tank-name,
[data-theme="dark"] .mini-tank-volume,
[data-theme="dark"] .mini-tank-pct { color: var(--text-primary); }
[data-theme="dark"] .smc-tank-product,
[data-theme="dark"] .mini-tank-temp,
[data-theme="dark"] .mini-tank-time,
[data-theme="dark"] .mini-tank-meta { color: var(--text-secondary); }

/* Station summary chips (34 STATIONS | 17 TANKS | 0 ALARMS) ------- */
[data-theme="dark"] .station-summary,
[data-theme="dark"] .overview-summary {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .osum-card,
[data-theme="dark"] .summary-chip {
    background-color: transparent;
    color: var(--text-secondary);
}
[data-theme="dark"] .osum-card .osum-num,
[data-theme="dark"] .osum-card .osum-lbl,
[data-theme="dark"] .summary-chip strong { color: var(--text-primary); }
[data-theme="dark"] .osum-card.osum-alarms .osum-num { color: var(--danger); }

/* Sort + view-mode toggle ---------------------------------------- */
[data-theme="dark"] .overview-controls,
[data-theme="dark"] .overview-sort-select,
[data-theme="dark"] .overview-view-toggle {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .ovt-btn {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .ovt-btn.active {
    background-color: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* Search bar in the header (Ctrl+K) ------------------------------- */
[data-theme="dark"] .ahb-search,
[data-theme="dark"] .ahb-search input {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .ahb-search input::placeholder { color: var(--text-secondary); }
[data-theme="dark"] .ahb-search-kbd {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* Alarms banner --------------------------------------------------- */
[data-theme="dark"] .alarm-banner,
[data-theme="dark"] .alarms-detected-banner {
    background-color: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

/* Breadcrumb bar -------------------------------------------------- */
[data-theme="dark"] #breadcrumb-bar,
[data-theme="dark"] .crumb,
[data-theme="dark"] .crumb-sep { color: var(--text-secondary); }
[data-theme="dark"] .crumb.crumb-current { color: var(--text-primary); }

/* All Tanks + table views ---------------------------------------- */
[data-theme="dark"] .tank-status-table,
[data-theme="dark"] .tanks-table,
[data-theme="dark"] .alarms-table,
[data-theme="dark"] .events-list,
[data-theme="dark"] .data-table-wrapper {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .events-timeline .event-row,
[data-theme="dark"] .events-list .event-item {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Reports tabs / filter row -------------------------------------- */
[data-theme="dark"] .report-tabs {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .report-tab {
    color: var(--text-secondary);
    background-color: transparent;
}
[data-theme="dark"] .report-tab.active {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background-color: rgba(96, 165, 250, 0.08);
}
[data-theme="dark"] .report-filters,
[data-theme="dark"] .recon-fields {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Card-like surfaces that hardcoded #fff ------------------------- */
[data-theme="dark"] .stats-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .config-card,
[data-theme="dark"] .alarm-item,
[data-theme="dark"] .event-card,
[data-theme="dark"] .station-card,
[data-theme="dark"] .station-detail-card,
[data-theme="dark"] .tank-detail-card,
[data-theme="dark"] .leak-stats,
[data-theme="dark"] .empty-state {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Nav sidebar — already dark but the active highlight stays right */
[data-theme="dark"] .nav-item {
    color: var(--text-secondary);
}
[data-theme="dark"] .nav-item.active {
    background-color: rgba(96, 165, 250, 0.16);
    color: #fff;
}

/* Tank tab bar */
[data-theme="dark"] .tank-tab-bar {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .tank-tab {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .tank-tab.active {
    background-color: rgba(96, 165, 250, 0.16);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

/* Modals ---------------------------------------------------------- */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .modal-header h3,
[data-theme="dark"] .modal-header h2,
[data-theme="dark"] .modal-title { color: var(--text-primary); }
[data-theme="dark"] .close-btn { color: var(--text-secondary); }
[data-theme="dark"] .close-btn:hover { color: var(--text-primary); }

/* Misc light-coloured backgrounds that were hardcoded ------------ */
[data-theme="dark"] .upload-status,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .form-hint {
    background-color: transparent;
    color: var(--text-secondary);
}

/* Mini-tank SVG shell colour — light shell looks like a hole in dark */
[data-theme="dark"] .mini-tank-svg rect[fill="#f8fafc"] { fill: #1e293b; }

/* Scrollbars to match the new palette */
[data-theme="dark"] * {
    scrollbar-color: #475569 #1e293b;
}
[data-theme="dark"] ::-webkit-scrollbar-track { background: #1e293b; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; border-radius: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Buttons — secondary should adopt the card colour, primary stays blue */
[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .btn-secondary:hover { background-color: #475569; }
[data-theme="dark"] .btn-icon {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .btn-icon:hover { background-color: var(--bg-hover); color: var(--text-primary); }

/* Status pills inside cards — keep semantic colour, lighten background */
/* Status pills — actual class names are .station-status.status-{cls} and
   .map-popup-pill.{cls}. Earlier override used non-existent class names. */
[data-theme="dark"] .tank-status.online,
[data-theme="dark"] .station-status.status-ok,
[data-theme="dark"] .map-popup-pill.ok       { background-color: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; }
[data-theme="dark"] .tank-status.alarm,
[data-theme="dark"] .station-status.status-alarm,
[data-theme="dark"] .map-popup-pill.alarm    { background-color: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }
[data-theme="dark"] .station-status.status-stale,
[data-theme="dark"] .map-popup-pill.stale    { background-color: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; }
[data-theme="dark"] .station-status.status-offline,
[data-theme="dark"] .station-status.status-no-tanks,
[data-theme="dark"] .station-status.status-inactive,
[data-theme="dark"] .map-popup-pill.offline,
[data-theme="dark"] .map-popup-pill.no-tanks,
[data-theme="dark"] .map-popup-pill.inactive { background-color: rgba(100, 116, 139, 0.2) !important; color: #cbd5e1 !important; }

/* Tooltip / popover surfaces */
[data-theme="dark"] .tooltip, [data-theme="dark"] .popover {
    background-color: #0b1220;
    color: var(--text-primary);
    border-color: var(--border-color);
}