:root {
    /* v4.11.2 — the app is a fixed light theme; never let the device/browser auto-darken
       form controls, scrollbars, or system colors. */
    color-scheme: light;
    --app-bg: var(--dashboard-bg, #f9f7f1);
    --app-text: var(--dashboard-text, #111827);
    --card-bg: #ffffff;
    --card-text: var(--app-text);
    --muted-text: #6b7280;
    --border-color: #d1d5db;
    --button-bg: #000000;
    --button-text: #ffffff;
    --accent: var(--dashboard-accent, #DAA520);
    --ink: var(--app-text);
    --panel: var(--card-bg);
    --line: var(--border-color);
    --muted: var(--muted-text);
    --success: #27754f;
}

html {
    color-scheme: light;
}

body {
    color-scheme: light;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: Arial, Helvetica, sans-serif;
}

.bg-ink {
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .text-white-50 {
    color: #000 !important;
}

.navbar-dark .navbar-toggler {
    filter: invert(1);
}

.navbar-dark .btn-outline-light {
    color: #000;
    border-color: #000;
}

.navbar-dark .btn-outline-light:hover {
    background: #000;
    color: #fff;
}

a {
    color: var(--app-text);
}

.table {
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--card-text);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: rgba(0, 0, 0, .04);
    --bs-table-hover-color: var(--card-text);
    color: var(--card-text);
}

.dropdown-menu,
.modal-content,
.form-control,
.form-select {
    background-color: var(--card-bg);
    color: var(--card-text);
    border-color: var(--border-color);
}

.dropdown-item,
.modal-content .btn-close,
.form-control::placeholder {
    color: var(--card-text);
}

.form-label,
.text-secondary,
.small.text-secondary {
    color: var(--muted-text) !important;
}

.panel,
.metric-card,
.login-panel {
    background: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}

.panel {
    padding: 1.25rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}

.metric-card {
    padding: .85rem;
    min-height: 96px;
}

.rate-board {
    max-width: 1180px;
    margin: 0 auto;
}

.clean-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-rate {
    font-size: clamp(1.55rem, 2vw, 2.2rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--card-text);
    font-variant-numeric: tabular-nums;
    margin-top: .35rem;
}

.metric-label {
    font-weight: 800;
    color: var(--ink);
    line-height: 1.15;
}

.metric-secondary {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.2;
}

.metric-bank {
    color: var(--ink);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
}

.currency-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.currency-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.currency-tab-button {
    appearance: none;
    border: 1px solid var(--button-bg);
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: 999px;
    min-width: 64px;
    padding: .55rem .9rem;
    font-weight: 800;
    letter-spacing: 0;
}

.currency-tab-button.active {
    background: var(--button-bg);
    color: var(--accent);
}

.currency-tab-flag {
    width: 24px;
    height: 16px;
}

.comparison-table-wrap {
    max-height: 62vh;
}

.comparison-table th,
.comparison-table td {
    white-space: nowrap;
}

.comparison-table .rate-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.clean-table-panel {
    overflow: visible;
}

.stale-rate-row {
    color: #5c5c5c;
    background: rgba(255, 255, 255, .45);
}

.stale-rate-row .bank-cell {
    opacity: .68;
}

.print-heading,
.print-source,
.print-report-footer {
    display: none;
}

/* ── v4.19.1 Bank Rankings — card layout with medal emojis ─────────────── */
.bank-rankings-panel .bank-rankings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 600px) {
    .bank-rankings-panel .bank-rankings-grid { grid-template-columns: 1fr; }
}
.bank-ranking-section-head {
    font-weight: 600;
    font-size: .93rem;
    margin-bottom: .75rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid #f0f0f0;
}
/* Rank cards — soft background + coloured border per place */
.bank-ranking-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem .75rem;
    border: 1px solid #e8e8e8;
    border-radius: .5rem;
    background: #fafafa;
    margin-bottom: .5rem;
}
.bank-ranking-card:last-child { margin-bottom: 0; }
.bank-ranking-card[data-rank="1"] { border-color: #d4a017; background: #fffbee; }
.bank-ranking-card[data-rank="2"] { border-color: #b0b0b0; background: #f8f8f8; }
.bank-ranking-card[data-rank="3"] { border-color: #c07d45; background: #fdf5ee; }
.bank-ranking-medal {
    font-size: 1.45rem;
    line-height: 1;
    flex-shrink: 0;
    padding-top: .05rem;
}
.bank-ranking-body { min-width: 0; flex: 1; }
.bank-ranking-name { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-ranking-rate { font-size: .97rem; font-weight: 700; margin-top: .15rem; }
.bank-ranking-unit { font-size: .73rem; font-weight: 400; color: #888; }
.bank-ranking-meta { font-size: .75rem; color: #888; margin-top: .15rem; }

.bank-cell,
.bank-detail-title {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}

.bank-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #e8edf3;
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: .78rem;
    font-weight: 700;
}

.bank-inline-logo {
    flex: 0 0 auto;
}

.sort-link {
    color: inherit;
    text-decoration: none;
}

/* PART F — client-side sortable headers */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sort-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-align: left;
}

.sortable-th:hover {
    color: #000;
}

.sortable-th::after {
    content: "⇅";
    color: var(--muted);
    font-size: .7rem;
    margin-left: .25rem;
    opacity: .55;
}

.sortable-th[data-sort-dir]::after {
    content: "";
    margin-left: 0;
}

.sort-arrow {
    color: #000;
    font-weight: 700;
}

.trend-panel,
.fx-trend-card {
    padding: 0;
}

.trend-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-weight: 800;
}

.trend-panel[open],
.fx-trend-card[open] {
    padding: 0 1.25rem 1.25rem;
}

.trend-panel[open] .trend-summary,
.fx-trend-card[open] .trend-summary {
    padding-left: 0;
    padding-right: 0;
}

.btn-dark,
.btn-primary {
    background: var(--button-bg);
    border-color: var(--button-bg);
    color: var(--button-text);
}

.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-primary {
    color: var(--app-text);
    border-color: var(--app-text);
}

.btn-outline-dark:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover {
    background: var(--button-bg);
    color: var(--button-text);
}

.trend-grid,
.fx-trend-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, .9fr);
    gap: 1rem;
    align-items: start;
}

.trend-chart-column,
.trend-controls-column,
.fx-trend-chart-panel,
.fx-trend-controls-panel {
    min-width: 0;
}

.fx-trend-chart-panel {
    min-width: 0;
}

.admin-trends-chart-wrap {
    position: relative;
    height: clamp(340px, 42vh, 440px);
    width: 100% !important;
    min-width: 0;
}

.admin-trends-chart-wrap canvas,
.fx-trend-chart-panel canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* v4.9.8: shared bounded-height responsive wrapper for every Currency Trend canvas
   (dashboard + bank detail). Gives Chart.js a sized parent so maintainAspectRatio:false
   cannot grow the canvas unbounded. */
.currency-trend-chart-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    height: clamp(320px, 42vh, 430px);
}

.currency-trend-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.fx-trend-controls-panel {
    align-self: start;
}

.admin-trends-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .75rem;
}

.admin-trends-summary-strip > div {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .55rem .65rem;
    background: var(--card-bg);
    min-width: 0;
}

.admin-trends-summary-strip span {
    display: block;
    color: var(--muted-text);
    font-size: .78rem;
}

.admin-trends-summary-strip strong {
    display: block;
    color: var(--card-text);
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .trend-grid,
    .fx-trend-grid {
        grid-template-columns: 1fr;
    }

    .admin-trends-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .clean-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .clean-metrics {
        grid-template-columns: 1fr;
    }
}

/* v4.11.2 — FORCE LIGHT THEME under device/browser dark mode. The app is intentionally a
   fixed light theme; device dark mode must never flip backgrounds/text to dark (that was the
   unreadable-text bug). We re-assert the light variable values and explicit light colors so
   the prefers-color-scheme:dark browser defaults are fully overridden. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
        --app-bg: var(--dashboard-bg, #f9f7f1);
        --app-text: var(--dashboard-text, #111827);
        --card-bg: #ffffff;
        --card-text: var(--app-text);
        --muted-text: #6b7280;
        --border-color: #d1d5db;
        --button-bg: #000000;
        --button-text: #ffffff;
        --panel: var(--card-bg);
        --line: var(--border-color);
        --muted: var(--muted-text);
    }

    html,
    body {
        color-scheme: light;
        background: var(--dashboard-bg, #f9f7f1) !important;
        color: var(--dashboard-text, #111827) !important;
    }

    input,
    select,
    textarea,
    button,
    .form-control,
    .form-select {
        background-color: #ffffff !important;
        color: #111827 !important;
        border-color: #d1d5db !important;
    }

    .panel,
    .metric-card,
    .login-panel {
        background: var(--card-bg);
        color: var(--card-text);
        border-color: var(--border-color);
    }

    .metric-rate,
    .metric-label,
    .metric-bank,
    .sort-arrow,
    .sortable-th:hover,
    .sort-button {
        color: var(--card-text);
    }

    .currency-tab-button {
        background: #ffffff;
        color: #111827;
        border-color: #d1d5db;
    }

    .bg-ink {
        background: rgba(255, 255, 255, .92);
    }

    .navbar-dark .navbar-brand,
    .navbar-dark .navbar-nav .nav-link,
    .navbar-dark .text-white-50 {
        color: var(--app-text) !important;
    }

    .navbar-dark .btn-outline-light {
        color: var(--app-text);
        border-color: var(--app-text);
    }

    .currency-tab-button.active {
        background: var(--accent);
        color: #000;
    }

    .table,
    .comparison-table,
    .form-control,
    .form-select {
        color: var(--card-text);
        background-color: var(--card-bg);
        border-color: var(--border-color);
    }

    .table {
        --bs-table-bg: #ffffff;
        --bs-table-color: #111827;
        --bs-table-border-color: #d1d5db;
        --bs-table-hover-bg: rgba(0, 0, 0, .04);
        --bs-table-hover-color: #111827;
    }

    .dropdown-menu,
    .modal-content {
        background-color: var(--card-bg);
        color: var(--card-text);
        border-color: var(--border-color);
    }

    .dropdown-item {
        color: var(--card-text);
    }

    .dropdown-item:hover {
        background: #f3f4f6;
        color: #111827;
    }

    .btn-outline-dark,
    .btn-outline-secondary,
    .btn-outline-primary {
        color: var(--app-text);
        border-color: var(--app-text);
    }

    .stale-rate-row {
        color: #9ca3af;
        background: rgba(0, 0, 0, .02);
    }

    /* Trend stat cells, daily table, summary + CBSL panels stay dark-on-light. */
    .trend-stat,
    .trend-stat-value,
    .trend-stat-label,
    .trend-summary-card,
    .trend-summary-panel,
    .trend-daily-table,
    .trend-daily-table th,
    .trend-daily-table td,
    .cbsl-reference-panel,
    .cbsl-reference-table th,
    .cbsl-reference-table td,
    .metric-card,
    .avg-metric-card {
        color: #111827;
    }

    .trend-stat {
        background: #fafafa;
        border-color: rgba(0, 0, 0, .06);
    }

    /* Fullscreen analytics overlay must stay readable under device dark mode. */
    .currency-trend-module.trend-fullscreen {
        background: #f9f7f1 !important;
        color: #111827 !important;
    }

    .badge.bg-secondary {
        color: #ffffff;
    }
}

/* ── v4.19.0 Print / PDF ─────────────────────────────────────────────────
   Goal: full branded report — header, six cards, bank table, chart, rankings,
   footer. No source links, no interactive controls, no admin-only data.
   ────────────────────────────────────────────────────────────────────── */
@media print {
    @page { margin: 1.5cm 1.5cm 2cm 1.5cm; size: A4 portrait; }

    /* Reset */
    * { box-shadow: none !important; text-shadow: none !important; }
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 10pt;
        font-family: Arial, Helvetica, sans-serif;
    }

    /* 1 — Hide interactive / nav / admin-only elements */
    nav,
    .alert,
    .no-print,
    .btn,
    script,
    [data-applicable-banner],
    [data-time-notice],
    .freshness-status-row,
    .dashboard-notices,
    .calendar-diagnostics-panel,
    [data-freshness-detail],
    [data-admin-published-avg],
    .cbsl-reference-panel,
    .trend-sheet-backdrop,
    .modal { display: none !important; }

    /* 2 — Show trend panel (it has no-print class — override it) */
    [data-trend-panel] { display: block !important; }

    /* 3 — Within trend panel hide interactive controls */
    [data-trend-panel] .btn,
    [data-trend-panel] .trend-controls-column,
    [data-trend-panel] .fx-trend-controls-panel,
    [data-trend-panel] .trend-currency-tabs,
    [data-trend-panel] [data-chart-days],
    [data-trend-panel] [data-trend-custom-toggle],
    [data-trend-panel] [data-trend-custom-range],
    [data-trend-panel] [data-trend-apply],
    [data-trend-panel] [data-trend-reset],
    [data-trend-panel] [data-chart-fullscreen],
    [data-trend-panel] [data-trend-export],
    [data-trend-panel] [data-analytics-view-toggle],
    [data-trend-panel] [data-analytics-debug],
    [data-trend-panel] [data-analytics-debug-show],
    [data-trend-panel] [data-trend-sheet-open],
    [data-trend-panel] [data-trend-status],
    [data-trend-panel] [data-trend-crowd-warning],
    [data-trend-panel] [data-trend-empty],
    [data-trend-panel] [data-trend-subtitle],
    [data-trend-panel] [data-trend-floor],
    [data-trend-panel] [data-trend-sample-quality],
    [data-trend-panel] .calendar-view-note,
    [data-trend-panel] .trend-side-toggles { display: none !important; }

    /* 4 — Trend grid: collapse to single chart column */
    [data-trend-panel] .trend-grid,
    [data-trend-panel] .fx-trend-grid,
    [data-trend-panel] .admin-trends-grid { display: block !important; }
    [data-trend-panel] .trend-chart-column,
    [data-trend-panel] .fx-trend-chart-panel { width: 100% !important; }
    [data-trend-panel] .admin-trends-chart-wrap,
    [data-trend-panel] .currency-trend-chart-wrap {
        height: 210pt !important;
        overflow: visible !important;
    }
    [data-trend-panel] .trend-avg-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }

    /* 5 — Layout */
    main.container-fluid { padding: 0 !important; }
    .rate-board { max-width: none; margin: 0; }

    /* 6 — Panels / cards */
    .panel,
    .metric-card {
        border: 1px solid #ccc;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* 7 — Print header & footer */
    .print-heading { display: block !important; }
    .print-report-footer {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ccc;
        margin-top: 1.5rem;
        padding-top: .5rem;
        font-size: 8.5pt;
        color: #666;
    }
    .print-report-header-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    .print-brand-primary  { font-size: 16pt; font-weight: 700; }
    .print-brand-secondary { font-size: 12pt; font-weight: 600; color: #555; }
    .print-report-rule    { border: none; border-top: 2px solid #000; margin: .4rem 0 .5rem; }
    .print-report-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 10.5pt;
    }
    .print-report-currency { font-weight: 600; }
    .print-report-date     { color: #444; font-size: 9.5pt; }
    .print-report-notice   { font-size: 8.5pt; color: #666; margin-top: .25rem; }
    .print-footer-sub      { color: #999; font-size: 8pt; }

    /* 8 — Table */
    .comparison-table { break-inside: auto !important; }
    .comparison-table thead { display: table-header-group; }
    .comparison-table tr { break-inside: avoid; page-break-inside: avoid; }

    /* Admin table: hide Last checked + Source Link cols in print */
    .admin-table th:nth-child(5),
    .admin-table td:nth-child(5),
    .admin-table th:nth-child(6),
    .admin-table td:nth-child(6) { display: none; }

    /* Visitor table: show all 5 cols — no hiding needed */
    tr[data-dashboard-row-status="stale"] { display: none; }

    /* 9 — Page breaks */
    .clean-table-panel  { break-before: page; page-break-before: page; }
    .fx-trend-card      { break-before: page; page-break-before: page; }
    .bank-rankings-panel { break-before: avoid; }
    .avg-metric-grid,
    .metric-grid        { break-inside: avoid; page-break-inside: avoid; }

    /* 10 — Rankings in print */
    .bank-rankings-panel .bank-rankings-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }
    .bank-ranking-card  { break-inside: avoid; page-break-inside: avoid; }
}

/* PART H — compact dashboard mode */
body.compact-dashboard .panel {
    padding: .55rem;
}

body.compact-dashboard .panel.mb-4,
body.compact-dashboard .metric-grid.mb-4,
body.compact-dashboard .row.mb-4 {
    margin-bottom: 1rem !important;
}

body.compact-dashboard .metric-card {
    padding: .45rem;
    min-height: 64px;
}

body.compact-dashboard .dashboard-notices .alert {
    margin-bottom: .5rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
    font-size: .85rem;
}

body.compact-dashboard .comparison-table {
    font-size: .82rem;
}

body.compact-dashboard .comparison-table th,
body.compact-dashboard .comparison-table td {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

body.compact-dashboard main.container-fluid {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}

body.compact-dashboard h1,
body.compact-dashboard .h3 {
    font-size: 1.25rem;
}

.ops-status {
    border-left: 4px solid var(--line);
}

.ops-fresh { border-left-color: #27754f; }
.ops-manual { border-left-color: #1769aa; }
.ops-attention { border-left-color: #f0b429; }
.ops-failed { border-left-color: #c0392b; }
.ops-disabled { border-left-color: #9aa4b2; }

.command-card pre,
.copy-report {
    white-space: pre-wrap;
    word-break: break-word;
}

body.compact-dashboard .comparison-table .asset-logo,
body.compact-dashboard .comparison-table .bank-inline-logo {
    width: 26px;
    height: 26px;
}

.dashboard-notices .alert {
    margin-bottom: .75rem;
}

.chart-bank-select {
    min-width: 180px;
}

.asset-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    padding: 4px;
}

.asset-flag {
    width: 34px;
    height: 24px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.scraper-progress-row {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr minmax(160px, 280px);
    gap: .85rem;
    align-items: center;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
}

.scraper-progress-row:last-child {
    border-bottom: 0;
}

.scraper-progress-label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
}

.scraper-progress-status {
    color: var(--muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.scraper-progress-row[data-state="running"] .scraper-progress-status {
    color: var(--accent);
}

.scraper-progress-row[data-state="success"] .scraper-progress-status {
    color: var(--success);
}

.scraper-progress-row[data-state="warning"] .scraper-progress-status {
    color: #8a5a00;
}

.scraper-progress-row[data-state="failed"] .scraper-progress-status {
    color: #a11616;
}

.health-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
}

.health-green {
    background: #2e8b57;
}

.health-yellow {
    background: #f0b429;
}

.health-red {
    background: #c0392b;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #17202a 0%, #25415f 50%, #f4f7fb 50%);
}

.login-panel {
    width: min(420px, calc(100vw - 2rem));
    padding: 2rem;
}

.code-area,
.cron-command {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .875rem;
}

.cron-command {
    background: #101820;
    color: #d8f3dc;
    border-radius: 6px;
    padding: 1rem;
}

@media (max-width: 767px) {
    .panel {
        padding: .85rem;
    }

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

    .metric-card {
        min-height: 104px;
    }

    .comparison-table {
        font-size: .875rem;
    }

    .comparison-table .asset-logo {
        width: 34px;
        height: 34px;
    }

    .scraper-progress-row {
        grid-template-columns: 1fr;
        gap: .45rem;
    }
}

/* ===== v4.10.0 Currency Trend Analytics ===== */
.currency-trend-module .trend-empty-state {
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--card-bg);
}

.trend-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.trend-summary-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: .7rem .8rem;
    background: var(--card-bg);
    min-width: 0;
}

.trend-summary-card-label {
    color: var(--muted-text);
    font-size: .78rem;
}

.trend-summary-card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--card-text);
    overflow-wrap: anywhere;
}

.trend-summary-card-value .trend-unit {
    font-size: .72rem;
    font-weight: 500;
    color: var(--muted-text);
}

.trend-summary-card-change {
    font-size: .8rem;
    margin-top: .15rem;
}

.trend-tables-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.trend-subpanel {
    margin-bottom: 0;
}

.trend-daily-scroll {
    max-height: 320px;
    overflow-y: auto;
}

.trend-summary-table th,
.trend-summary-table td,
.trend-daily-table th,
.trend-daily-table td {
    white-space: nowrap;
}

.trend-diag-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.trend-diag-grid > div {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .5rem .6rem;
    background: var(--card-bg);
}

.trend-diag-grid span {
    display: block;
    color: var(--muted-text);
    font-size: .76rem;
}

.trend-diag-grid strong {
    display: block;
    font-size: 1.05rem;
    color: var(--card-text);
}

.trend-bank-list {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .6rem;
}

.trend-bank-checks {
    max-height: 230px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.trend-bank-check,
.trend-radio {
    cursor: pointer;
}

.trend-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1040;
}

@media (max-width: 991.98px) {
    .trend-tables-grid {
        grid-template-columns: 1fr;
    }

    .trend-summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trend-diag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Rate Selection becomes a slide-up bottom sheet on small screens. */
    .fx-trend-controls-panel[data-trend-sheet] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        max-height: 82vh;
        overflow-y: auto;
        background: var(--card-bg, #fff);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
        padding: 1rem;
        transform: translateY(110%);
        transition: transform .25s ease;
    }

    .fx-trend-controls-panel[data-trend-sheet].trend-sheet-open {
        transform: translateY(0);
    }
}

@media (min-width: 992px) {
    /* On desktop the panel is always visible inline; the open/close chrome is hidden. */
    .fx-trend-controls-panel[data-trend-sheet] {
        transform: none !important;
    }
}

@media (max-width: 575.98px) {
    .trend-summary-cards {
        grid-template-columns: 1fr;
    }
}

/* ===== v4.10.1 Currency Trend — modern mockup styling (module-scoped blue/white) ===== */
.currency-trend-module {
    --trend-blue: #2563eb;
    --trend-green: #16a34a;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
}

.currency-trend-module .trend-subpanel,
.currency-trend-module .trend-summary-card,
.currency-trend-module .trend-bank-list,
.currency-trend-module .trend-diag-grid > div,
.currency-trend-module .trend-empty-state {
    background: #ffffff;
    border-color: #e6e9ef;
}

.currency-trend-module input[type="checkbox"],
.currency-trend-module input[type="radio"] {
    accent-color: var(--trend-blue);
    width: 16px;
    height: 16px;
}

/* Range pills + rate-type segmented control: blue when active, soft grey when not. */
.currency-trend-module .btn-outline-dark {
    color: #334155;
    border-color: #d2d9e3;
}

.currency-trend-module .btn-outline-dark:hover {
    background: #f1f5fb;
    color: #1e293b;
    border-color: #c2ccda;
}

.currency-trend-module .btn-outline-dark.active {
    background: var(--trend-blue);
    border-color: var(--trend-blue);
    color: #fff;
}

.currency-trend-module .btn-dark {
    background: var(--trend-blue);
    border-color: var(--trend-blue);
}

.currency-trend-module .btn-dark:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* Legend chips above the chart. */
.trend-legend-item {
    font-size: .82rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
}

.trend-legend-swatch {
    width: 22px;
    border-top: 3px solid transparent;
    margin-right: 7px;
    display: inline-block;
}

.trend-legend-buying {
    border-top-color: var(--trend-blue, #2563eb);
}

.trend-legend-selling {
    border-top-color: var(--trend-green, #16a34a);
    border-top-style: dashed;
}

/* Summary cards: colour the buying value blue and the selling value green, like the mockup. */
.currency-trend-module .trend-summary-card {
    border-radius: 12px;
}

.currency-trend-module .trend-summary-cards .trend-summary-card:nth-child(1) {
    border-left: 3px solid var(--trend-blue);
}

.currency-trend-module .trend-summary-cards .trend-summary-card:nth-child(2) {
    border-left: 3px solid var(--trend-green);
}

.currency-trend-module .trend-summary-cards .trend-summary-card:nth-child(1) .trend-summary-card-value {
    color: var(--trend-blue);
}

.currency-trend-module .trend-summary-cards .trend-summary-card:nth-child(2) .trend-summary-card-value {
    color: var(--trend-green);
}

/* Right-side Rate Selection panel framing on desktop. */
@media (min-width: 992px) {
    .currency-trend-module .fx-trend-controls-panel[data-trend-sheet] {
        background: #f8fafc;
        border: 1px solid #e6e9ef;
        border-radius: 12px;
        padding: 1rem;
    }
}

.currency-trend-module .trend-radio {
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: .55rem .65rem;
    background: #fff;
}

.currency-trend-module .trend-radio:has(input:checked) {
    border-color: var(--trend-blue);
    box-shadow: 0 0 0 1px var(--trend-blue) inset;
}

/* ===== v4.10.2 multi-bank compare, side toggles, currency tabs, layout polish ===== */
.currency-trend-module {
    padding: clamp(1rem, 1.6vw, 1.75rem);
}

/* In-module currency tabs (mockup style, with flags). */
.trend-currency-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .25rem 0 .6rem;
}

.trend-currency-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: .3rem .8rem;
    font-weight: 600;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
}

.trend-currency-tab:hover {
    background: #f1f5fb;
}

.trend-currency-tab.active {
    background: var(--trend-blue, #2563eb);
    border-color: var(--trend-blue, #2563eb);
    color: #fff;
}

.trend-currency-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

.trend-currency-tab.active .trend-currency-flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
}

/* TT Buying / TT Selling visibility toggles hide the matching cards + table columns. */
.currency-trend-module.trend-hide-buying [data-trend-side="buying"],
.currency-trend-module.trend-hide-selling [data-trend-side="selling"] {
    display: none;
}

.currency-trend-module.trend-hide-buying .trend-legend-buying,
.currency-trend-module.trend-hide-selling .trend-legend-selling {
    opacity: .3;
}

.trend-side-toggle {
    cursor: pointer;
    color: #475569;
}

/* Keep wide tables inside their card instead of stretching the page. */
.currency-trend-module .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

.currency-trend-module .trend-summary-table,
.currency-trend-module .trend-daily-table {
    width: 100%;
    margin-bottom: 0;
}

/* Compare-mode native chart legend spacing. */
.currency-trend-module canvas {
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .currency-trend-module {
        padding: .9rem;
    }

    .trend-currency-tab {
        padding: .28rem .6rem;
        font-size: .8rem;
    }
}

/* v4.11.0 — CBSL Indicative/Reference section. Visually distinct from bank rows so it is
   never mistaken for a bank customer rate. */
.cbsl-reference-panel {
    border-left: 4px solid #6b7280;
    background: #fbfbfa;
}
.cbsl-reference-panel .badge {
    font-weight: 600;
    letter-spacing: .02em;
}
.cbsl-status-pill {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #374151;
    font-weight: 600;
    font-size: .75rem;
}
.cbsl-reference-table tbody td {
    font-variant-numeric: tabular-nums;
}

/* v4.11.1 — Average TT Buying/Selling flashcards (below the four metric cards). */
.avg-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.avg-metric-card {
    border-left: 4px solid var(--accent, #daa520);
}
.avg-metric-card .metric-unit {
    font-size: .8rem;
    color: #6b7280;
    font-weight: 500;
}

/* v4.22.5 — compact visitor movement indicators. */
.rate-movement,
.trend-marker {
    display: inline-flex;
    align-items: baseline;
    gap: .15rem;
    margin-left: .35rem;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.metric-rate .rate-movement {
    font-size: .78rem;
    transform: translateY(-.08rem);
}
.movement-value {
    font-weight: 700;
}
.movement-up { color: #137a3a; }
.movement-down { color: #b42318; }
.movement-flat { color: #6b7280; }
.movement-unknown { color: #9ca3af; }
.trend-cell {
    text-align: center;
    width: 68px;
}
.trend-cell .trend-marker {
    margin-left: 0;
    font-size: .95rem;
}
.rate-age-label {
    display: block;
    margin-top: .12rem;
    color: #6b7280;
    font-size: .7rem;
    line-height: 1.2;
    white-space: nowrap;
}
.market-movement-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    padding: .55rem .75rem;
    border: 1px solid #d6dde6;
    border-radius: 8px;
    background: #fbfcfd;
    color: #374151;
    font-size: .86rem;
}
.market-movement-title {
    font-weight: 800;
    color: #111827;
}
.market-movement-item {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    white-space: nowrap;
}

/* v4.11.1 — full-width Summary panel with a responsive stat grid (replaces the old
   half-width summary table; no slider). */
.trend-summary-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
}
.trend-stat {
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 10px;
    padding: .6rem .75rem;
}
.trend-stat-wide {
    grid-column: 1 / -1;
}
.trend-stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
}
.trend-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: .15rem;
}

/* v4.11.1 — Daily Trend Overview in the right sidebar, scrollable (15–30 rows). */
.trend-sidebar-daily {
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding-top: .75rem;
}
.trend-sidebar-daily .trend-daily-scroll {
    max-height: 360px;
    overflow-y: auto;
}
.trend-sidebar-daily .trend-daily-table th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

/* v4.11.1 — fullscreen expands the whole analytics module, not just the canvas. */
body.trend-fullscreen-open {
    overflow: hidden;
}
.currency-trend-module.trend-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1080;
    margin: 0 !important;
    border-radius: 0;
    overflow: auto;
    background: var(--dashboard-bg, #fff);
    padding: 1rem 1.25rem 2rem;
    box-shadow: none;
}
.currency-trend-module.trend-fullscreen .admin-trends-chart-wrap,
.currency-trend-module.trend-fullscreen .currency-trend-chart-wrap {
    height: clamp(360px, 60vh, 760px);
}
.currency-trend-module.trend-fullscreen .trend-sidebar-daily .trend-daily-scroll {
    max-height: 48vh;
}

/* =====================================================================================
   v4.11.4 — Premium polish: two large average cards + two-section summary + responsive.
   ===================================================================================== */

/* Two large period-average cards (replaces the old 4-card row). */
.trend-avg-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.trend-avg-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-height: 132px;
}
.trend-avg-card[data-trend-side="buying"] { border-top: 3px solid #2563eb; }
.trend-avg-card[data-trend-side="selling"] { border-top: 3px solid #16a34a; }
.trend-avg-card-title {
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: .01em;
}
.trend-avg-card-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.trend-avg-card-value .trend-unit { font-size: .9rem; font-weight: 500; color: #6b7280; }
.trend-avg-card-change { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend-avg-card-sub { font-size: .76rem; color: #6b7280; margin-top: auto; }

/* Two-section summary (TT Buying / TT Selling), never mixing sides. */
.trend-summary-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.trend-summary-section { min-width: 0; }
.trend-summary-section-head {
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
    padding-bottom: .4rem;
    margin-bottom: .75rem;
    border-bottom: 2px solid #eef2f7;
}
.trend-summary-section[data-trend-side="buying"] .trend-summary-section-head { border-bottom-color: #dbe6ff; }
.trend-summary-section[data-trend-side="selling"] .trend-summary-section-head { border-bottom-color: #d6f0e0; }
.trend-summary-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}
.trend-metric {
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 10px;
    padding: .55rem .65rem;
    min-height: 76px;
}
.trend-metric-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.trend-metric-value { font-size: 1.02rem; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.trend-metric-caption { font-size: .68rem; color: #9ca3af; margin-top: .1rem; }

.trend-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid #eef2f7;
    font-size: .8rem;
    color: #6b7280;
}
.trend-summary-meta strong { color: #111827; font-variant-numeric: tabular-nums; }

/* Hide buying/selling halves in step with the Show TT Buying / Selling toggles. */
.currency-trend-module.trend-hide-buying [data-trend-side="buying"],
.currency-trend-module.trend-hide-selling [data-trend-side="selling"] { display: none; }

/* ---- Responsive / mobile polish (iPhone 390/430, tablet 768) ---- */
@media (max-width: 991.98px) {
    /* Sidebar (controls + Daily Trend Overview) drops below the chart, full width. */
    .trend-grid,
    .fx-trend-grid { grid-template-columns: minmax(0, 1fr); }
    .trend-sidebar-daily .trend-daily-scroll { max-height: none; }
}
@media (max-width: 575.98px) {
    .trend-avg-cards { grid-template-columns: minmax(0, 1fr); }
    .trend-summary-sections { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .trend-summary-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .avg-metric-grid { grid-template-columns: minmax(0, 1fr); }
    .trend-avg-card-value { font-size: 1.6rem; }
    .metric-grid.clean-metrics { gap: .6rem; }
    /* Daily Trend Overview scrolls horizontally inside its own container, never the page. */
    .trend-daily-scroll { overflow-x: auto; }
    .trend-daily-table { min-width: 460px; }
    .currency-tabs { flex-wrap: wrap; }
}

/* Force the new premium components to stay dark-on-light under device dark mode. */
@media (prefers-color-scheme: dark) {
    .trend-avg-card,
    .trend-metric { background: #ffffff !important; }
    .trend-avg-card-title,
    .trend-summary-section-head,
    .trend-avg-card-value,
    .trend-metric-value { color: #111827 !important; }
    .trend-avg-card-sub,
    .trend-metric-label,
    .trend-metric-caption,
    .trend-summary-meta { color: #6b7280 !important; }
    .trend-summary-meta strong { color: #111827 !important; }
}

/* =====================================================================================
   Addendum — shared currency selector pill (flag + code). One component used by BOTH the
   top dashboard selector and the Currency Trend selector, on admin and visitor alike.
   Fixed hex colors so device dark mode can't wash them out.
   ===================================================================================== */
.fx-currency-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.fx-currency-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    min-width: 0;
    padding: .4rem .85rem;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.fx-currency-pill:hover { background: #f1f5fb; border-color: #cdd9ea; }
.fx-currency-pill:focus-visible { outline: 2px solid var(--trend-blue, #2563eb); outline-offset: 2px; }
.fx-currency-pill.active {
    background: var(--trend-blue, #2563eb);
    border-color: var(--trend-blue, #2563eb);
    color: #ffffff;
}
.fx-currency-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex: 0 0 auto;
}
.fx-currency-pill.active .fx-currency-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }

@media (max-width: 575.98px) {
    .fx-currency-pills { gap: .35rem; }
    .fx-currency-pill { padding: .35rem .7rem; font-size: .8rem; }
}

/* Keep the shared pill identical under device dark mode (no inherited/inverted colors). */
@media (prefers-color-scheme: dark) {
    .fx-currency-pill { background: #ffffff !important; color: #334155 !important; border-color: #e2e8f0 !important; }
    .fx-currency-pill.active { background: var(--trend-blue, #2563eb) !important; color: #ffffff !important; border-color: var(--trend-blue, #2563eb) !important; }
}

/* ============================================================================
   v4.12.0 — Business Calendar, Carry-Forward & Version Manager
   ============================================================================ */

/* Applicable-rate banner: calm, financial-product tone. Green for verified-today,
   amber for carry-forward (latest available), blue for awaiting. Never alarmist. */
.applicable-rate-banner {
    border: 1px solid #e6e0cf;
    border-left-width: 4px;
    border-radius: 12px;
    padding: .85rem 1.1rem;
    background: #fbfaf6;
}
.applicable-rate-banner .applicable-rate-line { display: flex; align-items: center; gap: .55rem; }
.applicable-rate-headline { font-weight: 600; font-size: 1.02rem; color: #1f2937; }
.applicable-rate-subtext { font-size: .85rem; color: #6b7280; margin-top: .15rem; }
.applicable-rate-sri-date { font-size: .78rem; opacity: .7; }
.applicable-rate-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #16a34a; flex: 0 0 auto; }
.applicable-rate-banner.mode-fresh { border-left-color: #16a34a; }
.applicable-rate-banner.mode-fresh .applicable-rate-dot { background: #16a34a; }
.applicable-rate-banner.mode-awaiting { border-left-color: #2563eb; background: #f5f8ff; }
.applicable-rate-banner.mode-awaiting .applicable-rate-dot { background: #2563eb; }
.applicable-rate-banner.is-carry-forward,
.applicable-rate-banner.mode-weekend,
.applicable-rate-banner.mode-holiday,
.applicable-rate-banner.mode-no_publication,
.applicable-rate-banner.mode-carry_after_cutoff { border-left-color: #d4a017; background: #fdf8ec; }
.applicable-rate-banner.is-carry-forward .applicable-rate-dot { background: #d4a017; }

/* Carry-forward bank rows + badge. */
.carry-forward-badge {
    background: #fdf0d0;
    color: #8a6300;
    font-weight: 600;
    font-size: .68rem;
    border: 1px solid #f0dca8;
    vertical-align: middle;
}
.carry-forward-row { background: rgba(212, 160, 23, .045); }
.carry-forward-row .source-date-applicable { font-size: .72rem; }
.source-date-main { font-variant-numeric: tabular-nums; }
.awaiting-rate-row td { color: #94a3b8; }
.calendar-view-note { font-style: italic; }

/* Admin calendar diagnostics grid. */
.calendar-diagnostics-panel .calendar-diag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .5rem .9rem;
}
.calendar-diag-grid > div { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem .55rem; background: #f7f7f4; border-radius: 8px; }
.calendar-diag-grid > div span { color: #6b7280; font-size: .82rem; }
.calendar-diag-grid > div strong { font-variant-numeric: tabular-nums; }

/* Business calendar month grid (admin). */
.business-calendar-grid td { height: 86px; vertical-align: top; width: 14.28%; }
.business-calendar-grid .calendar-cell { cursor: pointer; transition: background .12s ease; }
.business-calendar-grid .calendar-cell:hover { background: #f3f4f6; }
.business-calendar-grid .calendar-cell-today { outline: 2px solid #2563eb; outline-offset: -2px; }
.business-calendar-grid .calendar-cell-marked { background: #fdf8ec; }
.calendar-cell-badge { font-size: .6rem; font-weight: 600; }
.calendar-cell-name { line-height: 1.1; margin-top: .15rem; }

/* Version Manager. */
.version-principle { border-left: 4px solid #16a34a; }
.version-principle-note { max-width: 540px; color: #4b5563; }
.version-history-table td { vertical-align: middle; }

@media (max-width: 576px) {
    .business-calendar-grid td { height: 64px; font-size: .8rem; }
    .calendar-cell-name { display: none; }
}

/* v4.13.0 freshness truth: time-of-day notice, per-bank freshness chip, trend sample quality.
   Small, additive, premium — never changes the existing layout/spacing. */
.freshness-time-notice {
    border: 1px solid #dbe4f3;
    border-left: 4px solid #2563eb;
    border-radius: 10px;
    padding: .6rem .9rem;
    background: #f5f8ff;
    color: #334155;
    font-size: .86rem;
}
.freshness-time-notice[data-time-phase="weekend_holiday"] { border-left-color: #d4a017; background: #fdf8ec; }
.freshness-time-notice[data-time-phase="after_final"] { border-left-color: #16a34a; background: #f3faf5; }

.freshness-chip {
    display: inline-block;
    margin-top: .2rem;
    padding: .05rem .42rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid var(--border-color);
    background: #f3f4f6;
    color: #4b5563;
    white-space: nowrap;
}
.freshness-chip.tone-fresh { background: #eafaf0; color: #137a3a; border-color: #bfe8cd; }
.freshness-chip.tone-latest { background: #fdf8ec; color: #8a6300; border-color: #f0dca8; }
.freshness-chip.tone-observed { background: #eef4f8; color: #31556b; border-color: #c9d9e4; }
.freshness-chip.tone-unverified { background: #fef3f2; color: #9a3b34; border-color: #f4cfca; }
.freshness-chip.tone-muted { background: #f3f4f6; color: #6b7280; }

.metric-note { margin-top: .15rem; font-variant-numeric: tabular-nums; }
.trend-sample-quality { font-variant-numeric: tabular-nums; }

/* v4.14.0 Plan B live progress + result viewer (admin only — never on the visitor dashboard). */
.planb-progress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; }
.planb-progress-cell { border: 1px solid var(--border-color); border-radius: 8px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .2rem; }
.progress-bank { font-weight: 600; font-size: .85rem; }
.progress-meta { font-size: .72rem; color: #6b7280; font-variant-numeric: tabular-nums; min-height: .9rem; }
.progress-pill { align-self: flex-start; font-size: .68rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--border-color); text-transform: capitalize; }
.progress-pill.tone-muted { background: #f3f4f6; color: #6b7280; }
.progress-pill.tone-info { background: #eef4ff; color: #1d4ed8; border-color: #c7dbff; }
.progress-pill.tone-fresh { background: #eafaf0; color: #137a3a; border-color: #bfe8cd; }
.progress-pill.tone-danger { background: #fef3f2; color: #9a3b34; border-color: #f4cfca; }
.progress-pill.tone-warning { background: #fdf8ec; color: #8a6300; border-color: #f0dca8; }
.planb-log { max-height: 280px; overflow: auto; background: #0b1020; color: #d7e0f5; border-radius: 8px; padding: .6rem .75rem; white-space: pre-wrap; word-break: break-word; }
.planb-result-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1080; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; }
.planb-result-modal.d-none { display: none; }
.planb-result-dialog { background: #fff; border-radius: 12px; padding: 1.1rem 1.25rem; max-width: 900px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.planb-progress-cell.clickable { cursor: pointer; }
.planb-progress-cell.clickable:hover { border-color: #137a3a; background: #f3faf5; }
.planb-progress-section-label { grid-column: 1 / -1; margin-top: .35rem; font-size: .72rem; font-weight: 700; color: #4b5563; text-transform: uppercase; letter-spacing: 0; }

/* v4.15.0: Live LKT clock chip — subtle, premium, works on mobile. */
.lkt-clock {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    opacity: .75;
    white-space: nowrap;
}
.lkt-clock:hover { opacity: 1; }