/* ================================================================
   TAF DASHBOARD — PROFESSIONAL UI ENHANCEMENTS v4
   ================================================================
   Design tokens, sidebar icons, theme toggle, skeleton loaders,
   table search, download buttons, comparison badge, tooltips,
   micro-animations, improved modals, footer, and more.
   ================================================================ */

/* ── Extended Design Tokens ─────────────────────────────────── */
:root {
    --font-display: 'Outfit', 'Inter', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    /* Spacing scale */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
    --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
    --space-8: 32px;

    /* Radius */
    --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 16px;
    --radius-pill: 999px;

    /* Premium palette */
    --accent-2:       #6366f1;   /* indigo for secondary accent  */
    --accent-amber:   #f59e0b;
    --accent-emerald: #10b981;
    --surface-1:      rgba(15,23,42,0.6);
    --surface-2:      rgba(22,30,52,0.75);
    --surface-hover:  rgba(255,255,255,0.04);
    --glow-blue:      rgba(14,165,233,0.35);
    --glow-indigo:    rgba(99,102,241,0.35);
    --glow-green:     rgba(16,185,129,0.35);

    /* Shadow levels */
    --shadow-sm:  0 1px  4px rgba(0,0,0,.25);
    --shadow-md:  0 4px 12px rgba(0,0,0,.35);
    --shadow-lg:  0 8px 30px rgba(0,0,0,.50);
    --shadow-xl:  0 16px 48px rgba(0,0,0,.60);

    /* Transition speeds */
    --dur-fast: 0.15s;  --dur-normal: 0.25s;  --dur-slow: 0.4s;
    --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* Light-mode overrides (toggled via data-theme="light") */
[data-theme="light"] {
    --bg-dark:      #f1f5f9;
    --sidebar-bg:   rgba(255,255,255,0.92);
    --card-bg:      rgba(255,255,255,0.9);
    --border-color: rgba(0,0,0,0.09);
    --text-main:    #0f172a;
    --text-muted:   #64748b;
    --surface-1:    rgba(248,250,252,0.7);
    --surface-2:    rgba(255,255,255,0.85);
    --surface-hover:rgba(0,0,0,0.04);
}
[data-theme="light"] body {
    background: radial-gradient(circle at top right,rgba(14,165,233,.08),#f1f5f9 40%),
                radial-gradient(circle at bottom left,rgba(16,185,129,.04),#f1f5f9 50%);
}
[data-theme="light"] .gov-header {
    background: linear-gradient(90deg,#f8fafc,#e2e8f0,#f8fafc);
    border-bottom-color: rgba(14,165,233,.3);
}
[data-theme="light"] .gov-header .title h5  { color:#475569; }
[data-theme="light"] .gov-header .title h6  { color:#1e293b; }
[data-theme="light"] .gov-header .title h3.mc-title { color:#0f172a; }
[data-theme="light"] .gov-header .title h3.system-title { color:#b45309; text-shadow:none; }
[data-theme="light"] .sidebar { border-right-color:rgba(14,165,233,.2); box-shadow:var(--shadow-md); }
[data-theme="light"] .logo h2 { background: linear-gradient(90deg,#0ea5e9,#6366f1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
[data-theme="light"] nav ul li { color:#475569; }
[data-theme="light"] nav ul li:hover { background:rgba(14,165,233,.08); color:#0ea5e9; }
[data-theme="light"] nav ul li.active { background:linear-gradient(90deg,rgba(14,165,233,.12),transparent); color:#0ea5e9; border-left-color:#0ea5e9; }
[data-theme="light"] .raw-text-box { color:#1e3a5f; }
[data-theme="light"] .ltc-body { color:#1e3a5f; }
[data-theme="light"] .status-indicator { background:rgba(0,0,0,.06); }
[data-theme="light"] .data-table th { background:rgba(241,245,249,.9); color:#1e293b; }
[data-theme="light"] .data-table td { color:#1e293b; border-bottom-color:rgba(0,0,0,.06); }
[data-theme="light"] .data-table tbody tr:hover { background:rgba(14,165,233,.07); }
[data-theme="light"] .kpi-card { box-shadow:var(--shadow-sm); }
[data-theme="light"] .chart-card { box-shadow:var(--shadow-sm); }
[data-theme="light"] .modal { background:rgba(241,245,249,.85); }
[data-theme="light"] .modal-content { background:rgba(255,255,255,.97); }
[data-theme="light"] .scored-metar-card { background:#fff; border-color:rgba(14,165,233,.25); }
[data-theme="light"] .scored-taf-block { background:#f8fafc; border-color:rgba(14,165,233,.2); }

/* ── Additional light theme fixes for full visibility ────────── */
[data-theme="light"] .nav-section-label { color:#475569; opacity:0.75; }
[data-theme="light"] .selector-label { color:#374151; }
[data-theme="light"] .selector-dropdown { background:#f8fafc; color:#0f172a; border-color:rgba(0,0,0,0.15); }
[data-theme="light"] .selector-dropdown:focus { border-color:#0ea5e9; }
[data-theme="light"] .table-search-input { background:#f8fafc; color:#0f172a; border-color:rgba(0,0,0,0.15); }
[data-theme="light"] .rv-label { color:#374151; }
[data-theme="light"] .sidebar-footer { color:#475569; }
[data-theme="light"] .kpi-card h4 { color:#475569; }
[data-theme="light"] .kpi-card .value { color:#0f172a; }
[data-theme="light"] .chart-card h3 { color:#0f172a; border-bottom-color:rgba(0,0,0,0.08); }
[data-theme="light"] .chart-card h4 { color:#374151; }
[data-theme="light"] .modal-kpi small { color:#475569; }
[data-theme="light"] .modal-kpi .mv { color:#0f172a; }
[data-theme="light"] .ltc-ts { color:#475569; }
[data-theme="light"] .ltc-validity { color:#475569; }
[data-theme="light"] .ltc-badge-short { color:#6366f1; background:rgba(99,102,241,0.12); border-color:rgba(99,102,241,0.3); }
[data-theme="light"] .ltc-footer { background:rgba(241,245,249,0.8); }
[data-theme="light"] .live-taf-card-header { background:rgba(241,245,249,0.9); }
[data-theme="light"] .lvs-header { background:rgba(241,245,249,0.9); color:#0f172a; }
[data-theme="light"] .lvs-col-title { color:#475569; }
[data-theme="light"] .lvs-ts { color:#1e293b; }
[data-theme="light"] .lvs-bar-track { background:rgba(0,0,0,0.08); }
[data-theme="light"] .lvs-bar-pct { color:#475569; }
[data-theme="light"] .lvs-empty { color:#475569; }
[data-theme="light"] .lms-placeholder { color:#475569; }
[data-theme="light"] .lms-ts { color:#475569; }
[data-theme="light"] .scored-metar-ts { color:#475569; }
[data-theme="light"] .scored-metar-raw { color:#1e293b; }
[data-theme="light"] .scored-taf-title { color:#475569; }
[data-theme="light"] .scored-param { color:#374151; }
[data-theme="light"] .progress-track { background:rgba(0,0,0,0.08); }
[data-theme="light"] .raw-box-header { background:rgba(241,245,249,0.9); }
[data-theme="light"] .raw-box-title { color:#1e293b; }
[data-theme="light"] .live-header-bar { background:rgba(16,185,129,0.06); border-color:rgba(16,185,129,0.2); }
[data-theme="light"] .live-date-txt { color:#0f172a; }
[data-theme="light"] .live-kpi-tile-label { color:#475569; }
[data-theme="light"] .live-kpi-tile-value { color:#0f172a; }
[data-theme="light"] .atp-header { color:#0f172a; }
[data-theme="light"] .atp-item { color:#0ea5e9; background:rgba(14,165,233,0.08); }
[data-theme="light"] .filter-panel label { color:#374151 !important; }
[data-theme="light"] .year-filter-select { background:#f8fafc; color:#0f172a; }
[data-theme="light"] #themeToggleBtn { color:#374151; }
[data-theme="light"] .btn-ltc-all { color:#475569; border-color:rgba(0,0,0,0.15); }
[data-theme="light"] .btn-ltc-all:hover { background:rgba(0,0,0,0.04); color:#0ea5e9; }
[data-theme="light"] .overall-high { color:#15803d; }
[data-theme="light"] .overall-mid  { color:#b45309; }
[data-theme="light"] .overall-low  { color:#dc2626; }
[data-theme="light"] .lms-line { color:#1e293b; border-bottom-color:rgba(0,0,0,0.06); }
[data-theme="light"] .lms-line:hover { background:rgba(14,165,233,0.05); }
[data-theme="light"] .taf-type-selector { background:rgba(0,0,0,0.04); }
[data-theme="light"] .pd-filter-card h3 { color:#0f172a; }
[data-theme="light"] .rv-status-msg.rv-ok { color:#15803d; background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.25); }
[data-theme="light"] .rv-status-msg.rv-warn { color:#b45309; background:rgba(180,83,9,0.08); border-color:rgba(180,83,9,0.25); }

/* ── Google Fonts — Outfit + JetBrains Mono  ─────────────────── */
/* (loaded via index.html <link>) */
body { font-family: var(--font-body); }
h1,h2,h3,.logo h2 { font-family: var(--font-display); }
code, pre, .raw-text-box, .ltc-body, .scored-metar-raw,
.raw-text-box, .lvs-ts, .ltc-ts { font-family: var(--font-mono); }

/* ── Theme Toggle Button ─────────────────────────────────────── */
#themeToggleBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 12px 5px 9px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--dur-normal) var(--ease-out);
    flex-shrink: 0;
}
#themeToggleBtn:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 12px var(--glow-blue);
}
#themeToggleBtn .theme-icon { font-size:1rem; transition:transform .4s; }
#themeToggleBtn:hover .theme-icon { transform: rotate(20deg); }

/* Wrap the status indicator row to accommodate the toggle */
.app-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Sidebar Nav Icons ───────────────────────────────────────── */
nav ul li { display: flex; align-items: center; gap: 10px; }
nav ul li .nav-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}
nav ul li.active .nav-icon { filter: drop-shadow(0 0 6px var(--glow-blue)); }

/* Nav section label */
.nav-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    opacity: 0.6;
    padding: 0.6rem 1.25rem 0.2rem;
    margin-bottom: 0;
}

/* ── Improved Logo Area ──────────────────────────────────────── */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.logo-mark {
    width: 36px; height: 36px;
    background: linear-gradient(135deg,#38bdf8,#818cf8);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 12px var(--glow-blue);
    flex-shrink: 0;
}
.logo h2 { margin-bottom: 0; font-size: 1.25rem; }

/* ── Sidebar Version badge ───────────────────────────────────── */
.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.7;
    text-align: center;
    line-height: 1.5;
}
.sidebar-footer strong { color: var(--accent); }

/* ── KPI Card Improvements ───────────────────────────────────── */
.kpi-card {
    position: relative;
    overflow: hidden;
}
.kpi-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--kpi-accent-color, rgba(14,165,233,.08));
    transform: translate(20px,-20px);
    pointer-events: none;
}
.kpi-card .kpi-icon {
    position: absolute;
    top: 1rem; right: 1rem;
    font-size: 1.6rem;
    opacity: 0.25;
}
.kpi-card .kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    margin-top: 4px;
}
.kpi-trend.trend-up   { color:var(--success); background:rgba(16,185,129,.12); }
.kpi-trend.trend-down { color:var(--danger);  background:rgba(239,68,68,.12);  }
.kpi-trend.trend-flat { color:var(--text-muted); background:rgba(148,163,184,.12); }

/* ── Table Search Input ──────────────────────────────────────── */
.table-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
}
.table-search-input {
    flex: 1;
    padding: 0.55rem 0.85rem 0.55rem 2.2rem;
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color var(--dur-normal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='M21 21l-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.6rem center;
}
.table-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.table-search-input::placeholder { color: var(--text-muted); opacity: .7; }

/* Table zebra striping */
.data-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.018);
}
[data-theme="light"] .data-table tbody tr:nth-child(even) {
    background: rgba(0,0,0,0.025);
}

/* Sticky table header */
.data-table thead { position: sticky; top: 0; z-index: 5; }
.data-table th { backdrop-filter: blur(8px); }

/* Sortable column indicator */
.data-table th.sortable { cursor:pointer; user-select:none; }
.data-table th.sortable::after { content:' ↕'; opacity:.4; font-size:.7em; }
.data-table th.sort-asc::after  { content:' ↑'; opacity:.9; }
.data-table th.sort-desc::after { content:' ↓'; opacity:.9; }

/* ── Download / Export Buttons ───────────────────────────────── */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dur-normal) var(--ease-out);
    border: 1px solid rgba(16,185,129,.4);
    background: rgba(16,185,129,.1);
    color: var(--success);
    white-space: nowrap;
}
.btn-download:hover {
    background: rgba(16,185,129,.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--glow-green);
}

.chart-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 8px;
}
.chart-card-toolbar h3 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.chart-card-toolbar-actions { display:flex; gap:6px; align-items:center; }

/* ── Skeleton Loader ─────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.skeleton {
    border-radius: var(--radius-md);
    background: linear-gradient(90deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.04) 100%);
    background-size: 600px 100%;
    animation: shimmer 1.6s infinite linear;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
[data-theme="light"] .skeleton {
    background: linear-gradient(90deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.09) 50%,
        rgba(0,0,0,.04) 100%);
    background-size: 600px 100%;
    animation: shimmer 1.6s infinite linear;
}
.skeleton-kpi {
    height: 96px;
    border-radius: var(--radius-lg);
}
.skeleton-chart {
    height: 350px;
    border-radius: var(--radius-lg);
}
.skeleton-row {
    height: 42px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}

/* ── Chart type switcher ─────────────────────────────────────── */
.chart-type-switcher {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.chart-type-btn {
    flex: 1;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur-fast);
}
.chart-type-btn.active,
.chart-type-btn:hover {
    background: rgba(14,165,233,.15);
    color: var(--accent);
}

/* ── Date Range Quick Picks ──────────────────────────────────── */
.quick-picks {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.quick-pick-btn {
    padding: 3px 9px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--surface-1);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur-fast);
}
.quick-pick-btn:hover,
.quick-pick-btn.active {
    border-color: var(--accent);
    background: rgba(14,165,233,.1);
    color: var(--accent);
}

/* ── Improved Modal ──────────────────────────────────────────── */
.modal-content {
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-xl), 0 0 60px rgba(14,165,233,.08);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h3 { margin: 0; font-size: 1.15rem; }
.modal-close-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--dur-normal);
    flex-shrink: 0;
}
.modal-close-btn:hover { background: rgba(239,68,68,.15); border-color: var(--danger); color: var(--danger); transform: rotate(90deg); }

/* ── Toast Notification ──────────────────────────────────────── */
#toastContainer {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    pointer-events: all;
    animation: toastIn var(--dur-normal) var(--ease-out) both;
    max-width: 340px;
}
.toast.toast-success { border-color:rgba(16,185,129,.4); }
.toast.toast-error   { border-color:rgba(239,68,68,.4);  }
.toast.toast-info    { border-color:rgba(14,165,233,.4);  }
.toast.hiding { animation: toastOut var(--dur-normal) var(--ease-out) forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes toastOut { to   { opacity:0; transform:translateY(8px) scale(.96);  } }

/* ── Tooltip ─────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(.9);
    white-space: nowrap;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 100;
}
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
[data-theme="light"] [data-tooltip]::after { background:#1e293b; }

/* ── Improved KPI card "delta" badge on live view ────────────── */
.live-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.live-kpi-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
    transition: all var(--dur-normal) var(--ease-out);
}
.live-kpi-tile:hover { border-color:rgba(14,165,233,.3); transform:translateY(-2px); }
.live-kpi-tile-icon { font-size: 1.3rem; }
.live-kpi-tile-body {}
.live-kpi-tile-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); }
.live-kpi-tile-value { font-size:1.3rem; font-weight:800; color:var(--text-main); }

/* ── Pulse animation for live section header ─────────────────── */
.lvs-header .live-dot-small {
    width:8px; height:8px;
    border-radius:50%;
    background:var(--success);
    display:inline-block;
    margin-right:6px;
    animation: pulse 1.5s ease-in-out infinite;
    vertical-align: middle;
}

/* ── Scrollable content area improved ───────────────────────── */
.content {
    padding: 1.75rem 2.5rem;
    scrollbar-gutter: stable;
}
@media (max-width: 1280px) { .content { padding: 1.5rem 2rem; } }
@media (max-width: 1024px) { .content { padding: 1.25rem 1.5rem; } }
@media (max-width: 768px)  { .content { padding: 1rem; } }

/* ── View transition improvement ────────────────────────────── */
.view.active { animation: viewSlideIn var(--dur-slow) var(--ease-out); }
@keyframes viewSlideIn {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:none; }
}

/* ── Section divider ─────────────────────────────────────────── */
.section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    opacity: .7;
    margin: 1.5rem 0 1rem;
}
.section-divider::before,
.section-divider::after {
    content:'';
    flex:1;
    height:1px;
    background:var(--border-color);
}

/* ── Footer ──────────────────────────────────────────────────── */
.app-footer {
    padding: 0.75rem 2.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: .75;
    flex-shrink: 0;
    background: rgba(0,0,0,.12);
    flex-wrap: wrap;
    gap: 6px;
}
.app-footer a { color: var(--accent); text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }
[data-theme="light"] .app-footer { background: rgba(0,0,0,.04); }

/* ── Comparison mode toggle ──────────────────────────────────── */
.compare-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.3);
    color: var(--accent-2);
    cursor: pointer;
    transition: all var(--dur-fast);
}
.compare-badge:hover { background:rgba(99,102,241,.22); }
.compare-badge.active { background:var(--accent-2); color:#fff; }

/* ── Scrollbar refinement ────────────────────────────────────── */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.25); }
[data-theme="light"] ::-webkit-scrollbar-thumb       { background:rgba(0,0,0,.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.25); }

/* ── Hover micro-animation on chart cards ───────────────────── */
.chart-card {
    transition: box-shadow var(--dur-normal) var(--ease-out),
                border-color var(--dur-normal) var(--ease-out);
}
.chart-card:hover {
    border-color: rgba(14,165,233,.25);
    box-shadow: var(--shadow-md), 0 0 20px rgba(14,165,233,.06);
}

/* ── Button focus ring (accessibility) ──────────────────────── */
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── Improved gov-header ─────────────────────────────────────── */
.gov-header {
    box-shadow: 0 2px 20px rgba(0,0,0,.6);
}

/* ── Mobile: live kpi strip single col ──────────────────────── */
@media (max-width: 600px) {
    .live-kpi-strip { grid-template-columns: 1fr 1fr; }
    .app-footer { justify-content: center; text-align: center; }
    #themeToggleBtn span:not(.theme-icon) { display: none; }
}