/* =========================================================
   VEHICLE REGISTRATION ANALYTICS DASHBOARD
   File: /style.css

   VISUAL STYLE:
   - Deep navy header band, amber refresh stamp
   - White filter rail with multi-select check lists
   - Six-card KPI strip, one accent colour each
   - Numbered white table cards on a cool grey page
   - Navy table headings, blue totals, green growth
   - Poppins typography
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

/*
 * Revue Std - DeepKamal's company typeface, used only for brand and
 * page titles (header product name, login/profile headings), never for
 * tables, figures or body text, where a display face would hurt
 * reading. A licensed commercial font, so it cannot come from a public
 * CDN: used from the viewer's own computer if installed, otherwise
 * from assets/fonts/ once the licensed web files are placed there.
 * Until then every --font-brand title falls back to Geist, exactly as
 * before. One weight only (Revue is a bold display face) - the weight
 * range below stops the browser from faking a heavier version.
 */
@font-face {
    font-family: "DK Revue";
    src:
        local("Revue Std"),
        local("RevueStd"),
        local("RevueStd-Regular"),
        local("ITC Revue Std");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --font-brand: "DK Revue", "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;


    /* Brand - "Navy Ledger": DeepKamal navy, warm-neutral ground,
       muted gold kept for the account's own figures. */
    --navy: #0b1f4b;
    --navy-deep: #081733;
    --navy-mid: #0b1f4b;
    --navy-soft: #1a3a7a;

    --primary: #0b1f4b;
    --primary-dark: #1a3a7a;
    --primary-soft: #eef2fa;
    --primary-border: #c9d3e6;

    --gold: #8a6420;
    --gold-strong: #a97c2f;
    --gold-soft: #f6efe1;

    /* Accents, one per KPI card */
    --accent-blue: #1e50d8;
    --accent-green: #0f9d58;
    --accent-violet: #7c3aed;
    --accent-amber: #d97706;
    --accent-rose: #db2777;
    --accent-indigo: #4338ca;

    /* Status */
    --success: #067647;
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --danger-border: #fecdca;
    --warning-soft: #fffaeb;

    /* Page */
    --page: #f4f5f7;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;
    --surface-muted: #f2f4f7;

    /* Text */
    --text: #101828;
    --text-secondary: #475467;
    --text-muted: #667085;

    /* Borders */
    --border: #e4e7ec;
    --border-soft: #eef0f3;
    --border-strong: #d0d5dd;

    /* Table */
    --head-bg: #f8f9fb;
    --head-text: #475467;
    --row-alt: #ffffff;
    --row-hover: #f2f5fb;
    --total-row: #eef2fa;
    --col-accent: #f5f7fc;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 18px 44px rgba(16, 24, 40, 0.16);

    /* Sticky offsets - measured by ui-layout.js, these are fallbacks. */
    --header-h: 69px;
    --section-bar-h: 53px;

    /* Layout */
    --rail-width: 252px;
    --summary-width: 268px;
    --gap: 14px;

    /* Animation */
    --transition-fast: 140ms ease;
    --transition-base: 220ms ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;

    background: var(--page);
    color: var(--text);

    font-family: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.45;

    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, figure {
    margin: 0;
}

ol, ul {
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

input,
select {
    font: inherit;
    color: inherit;
}

svg {
    display: block;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   3. LOADING OVERLAY
   ========================================================= */

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;

    display: grid;
    place-items: center;

    background: rgba(238, 242, 249, 0.86);
    backdrop-filter: blur(2px);
}

.loading-overlay__content {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 18px 26px;

    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);

    font-weight: 500;
}

.loading-spinner {
    width: 20px;
    height: 20px;

    border: 2.5px solid var(--primary-border);
    border-top-color: var(--primary);
    border-radius: 50%;

    animation: spin 720ms linear infinite;
}

.loading-spinner--small {
    width: 15px;
    height: 15px;
    border-width: 2px;
}

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


/* =========================================================
   4. HEADER
   ========================================================= */

.app-header {
    position: sticky;
    top: 0;
    z-index: 60;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 12px 24px;

    /* A soft navy wash fading to white, with a thin navy-to-gold line
       on top - a hint of the brand colours, nothing loud. */
    background:
        linear-gradient(90deg, var(--navy) 0%, #3d5a99 55%, var(--gold-strong) 100%) top / 100% 3px no-repeat,
        linear-gradient(90deg, #e8edf8 0%, #f3f6fc 42%, #fbfaf6 100%);
    border-bottom: 1px solid #dfe5f0;

    color: var(--text);
}

.app-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* The full DeepKamal logo (gold emblem with the DEEPKAMAL wordmark) -
   assets/brand/deepkamal-logo-header.png, rendered from
   "deepkamal logo.pdf". */
.brand-logo {
    display: block;
    flex: none;

    width: auto;
    height: 48px;
}

.app-header__titles {
    min-width: 0;
}

.app-header h1 {
    color: var(--navy);
    font-family: var(--font-brand);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__product {
    color: var(--text-secondary);
    font-weight: 500;
}

.app-header__crumbs {
    margin-top: 2px;

    font-size: 12.5px;
    font-weight: 400;

    color: var(--text-muted);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* "Data refreshed" as one quiet pill. */
.refreshed {
    display: flex;
    align-items: center;
    gap: 8px;

    height: 36px;
    padding: 0 12px;

    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #dfe5f0;
    border-radius: 999px;
}

.refreshed > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.refreshed__icon {
    color: var(--success);
}

.refreshed__icon svg {
    width: 16px;
    height: 16px;
}

.refreshed__label {
    font-size: 12.5px;
    font-weight: 400;

    color: var(--text-secondary);
}

.refreshed__value {
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;

    color: var(--text);
}


/* ---- Export menu ---- */

.export-menu {
    position: relative;
}

.export-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 38px;
    padding: 0 14px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.export-button:hover {
    background: var(--surface-soft);
    border-color: var(--text-muted);
}

/* The header's one main action. */
.export-button--primary {
    background: var(--navy);
    border-color: var(--navy);

    color: #ffffff;
}

.export-button--primary:hover {
    background: var(--navy-soft);
    border-color: var(--navy-soft);
}

.logout-button {
    min-height: 38px;
    padding: 0 14px;

    background: var(--surface);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);

    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
}

.logout-button:hover {
    background: var(--danger-soft);
}

.export-button__caret {
    width: 0;
    height: 0;

    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.export-menu__list {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 70;

    min-width: 224px;
    padding: 6px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.export-menu__list button {
    display: block;
    width: 100%;

    padding: 8px 11px;

    background: none;
    border: 0;
    border-radius: var(--radius-sm);

    color: var(--text);
    font-size: 12.5px;
    text-align: left;
}

.export-menu__list button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.export-menu__separator {
    height: 1px;
    margin: 5px 8px;
    background: var(--border-soft);
}


/* =========================================================
   5. SHELL
   ========================================================= */

/* Filters + content. Quick summary now lives inside the content
   column as a foldable card, so there is no third column. */
.app-shell {
    display: grid;
    grid-template-columns:
        var(--rail-width)
        minmax(0, 1fr);

    align-items: start;
    gap: 20px;

    max-width: 1680px;
    margin: 0 auto;
    padding: 20px 24px 48px;
}

.app-shell.is-collapsed {
    grid-template-columns:
        46px
        minmax(0, 1fr);
}


/* ---- Super admin: View as picker + banner ---- */

.view-as {
    display: flex;
    align-items: center;
    gap: 6px;

    height: 36px;
    padding: 0 6px 0 12px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.view-as__label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.view-as__select {
    max-width: 220px;
    height: 30px;
    padding: 0 6px;

    background: transparent;
    border: 0;

    color: var(--navy);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.view-as__select:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Gold = "private data" across the dashboard - here, someone else's.
   The header's own last row: full width, edge to edge (cancelling the
   header's side and bottom padding). */
.view-as-banner {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;

    margin: 2px -24px -12px;
    padding: 10px 24px;

    background: var(--gold-soft);
    border-bottom: 1px solid #e8d6ae;

    color: #5c4313;
    font-size: 13px;
}

.view-as-banner__meta {
    color: var(--gold);
}

.view-as-banner__exit {
    min-height: 32px;
    padding: 0 12px;

    background: var(--surface);
    border: 1px solid #d9c18c;
    border-radius: var(--radius-sm);

    color: #5c4313;
    font-size: 12.5px;
    font-weight: 600;
}

.view-as-banner__exit:hover {
    border-color: var(--gold);
}


/* ---- Section bar (jump links + Expand all) ---- */

.section-bar {
    position: sticky;
    top: var(--header-h);
    z-index: 55;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;

    padding: 8px 24px;

    background: rgba(240, 243, 250, 0.94);
    border-bottom: 1px solid #dfe5f0;
    backdrop-filter: blur(6px);
}

.section-bar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    flex: 1 1 auto;
}

.section-bar__links a {
    display: inline-flex;
    align-items: center;

    min-height: 34px;
    padding: 0 11px;

    border-radius: var(--radius-sm);

    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.section-bar__links a:hover {
    background: var(--surface);
    color: var(--navy);
}

/* The section currently in view (ui-layout.js) - a quiet white chip
   with a navy underline, not a loud fill. */
.section-bar__links a.is-active {
    background: var(--surface);
    box-shadow:
        0 0 0 1px #dfe5f0,
        inset 0 -2px 0 var(--navy);

    color: var(--navy);
    font-weight: 600;
}

.section-bar__links a:focus-visible,
.section-bar__fold:focus-visible,
.fold-button:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.section-bar__fold {
    min-height: 36px;
    padding: 0 14px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
}

.section-bar__fold:hover {
    border-color: var(--text-muted);
}

/* Jump-link targets stop below the header and the section bar. */
.app-content > [id],
.kpi-grid {
    scroll-margin-top: calc(var(--header-h) + var(--section-bar-h) + 16px);
}


/* =========================================================
   6. FILTER RAIL
   ========================================================= */

.filters {
    position: sticky;
    top: calc(var(--header-h) + var(--section-bar-h) + 16px);

    max-height: calc(100vh - var(--header-h) - var(--section-bar-h) - 32px);
    overflow: hidden auto;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.filters__head {
    position: sticky;
    top: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 12px 10px;

    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
}

.filters__icon {
    color: var(--primary);
}

.filters__head h2 {
    flex: 1;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;

    color: var(--text);
}

.filters__collapse {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 28px;
    padding: 0 8px;

    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.filters__collapse:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

/* A cross while the panel is open, a chevron to bring it back. */
.filters__collapse-icon--open {
    display: none;
}

.filters__collapse:hover {
    background: var(--surface-muted);
    color: var(--primary);
}

.filters__form {
    padding: 12px;
}


/* ---- Collapsed rail ---- */

.is-collapsed .filters__head {
    flex-direction: column;
    gap: 10px;
    padding: 12px 6px;
}

.is-collapsed .filters__head h2,
.is-collapsed .filters__collapse-text,
.is-collapsed .filters__form {
    display: none;
}

.is-collapsed .filters__collapse-icon--close {
    display: none;
}

.is-collapsed .filters__collapse-icon--open {
    display: block;
}

.is-collapsed .filters__collapse {
    padding: 0 6px;
    border-color: var(--border-strong);
    color: var(--navy);
}


/* ---- Filter block ---- */

.filter-block {
    margin-bottom: 14px;
}

.filter-block__head {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 6px;
}

.filter-block__icon {
    color: var(--primary);
}

.filter-block__title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;

    color: var(--text);
}

.filter-block__hint {
    font-size: 10px;
    font-weight: 500;

    color: var(--text-muted);
}

/* Sits inside the Year filter-block, above its checklist - one
   global switch for how every year is bucketed (Jan-Dec vs
   Apr-Mar), not a per-card setting. */
.fy-toggle {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 7px;
    padding: 3px 4px;

    font-size: 12px;
    font-weight: 500;

    cursor: pointer;
}

.fy-toggle:hover {
    background: var(--primary-soft);
    border-radius: 4px;
}

.fy-toggle input {
    flex: none;

    width: 13px;
    height: 13px;

    accent-color: var(--primary);
}

.fy-toggle__hint {
    font-weight: 400;
    color: var(--text-muted);
}

/* ---- Scope-split columns (Card 1, multiple Scopes ticked) ----

   A thin colour strip along the top of a year/month column's own
   header, so two or three states' worth of columns for the same
   period read as distinct groups before a reader even looks at the
   text - see makerColumns()'s scopeClass. Reuses the KPI cards'
   existing accent palette rather than inventing new colours, and
   stays off entirely (no class is ever applied) when only one scope
   is active, so a single-scope table looks exactly as it always
   has. */
.data-table thead th.scope-all_india {
    border-top: 3px solid var(--accent-blue);
}

.data-table thead th.scope-gujarat {
    border-top: 3px solid var(--accent-amber);
}

.data-table thead th.scope-maharashtra {
    border-top: 3px solid var(--accent-violet);
}


.filter-block__note {
    margin-top: 5px;

    font-size: 10.5px;
    line-height: 1.4;

    color: var(--text-muted);
}


/* ---- Check list summary bar ---- */

.filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    width: 100%;
    padding: 8px 10px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    font-size: 12.5px;
    text-align: left;
}

.filter-summary:hover {
    border-color: var(--primary-border);
}

.filter-summary__caret {
    flex: none;

    width: 0;
    height: 0;

    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);

    transition: transform var(--transition-fast);
}

.filter-summary[aria-expanded="false"] .filter-summary__caret {
    transform: rotate(-90deg);
}

.filter-summary[aria-expanded="false"] + .filter-panel {
    display: none;
}


/* ---- Check list ---- */

.filter-panel {
    margin-top: 6px;
}

.filter-search {
    width: 100%;
    margin-bottom: 5px;
    padding: 6px 9px;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    font-size: 12px;
}

.filter-search:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.checklist {
    display: grid;
    gap: 1px;
}

.checklist--grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;
}

.checklist--scroll {
    max-height: 132px;
    padding-right: 4px;

    overflow-y: auto;

    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.checklist::-webkit-scrollbar,
.filters::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.modal__body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.checklist::-webkit-scrollbar-thumb,
.filters::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.modal__body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

.checklist__item label {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 3px 4px;

    border-radius: 4px;

    font-size: 12px;
    line-height: 1.3;

    cursor: pointer;
}

.checklist__item label:hover {
    background: var(--primary-soft);
}

.checklist__item input {
    flex: none;

    width: 13px;
    height: 13px;

    accent-color: var(--primary);

    cursor: pointer;
}

.checklist__item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checklist__empty,
.checklist__more {
    padding: 6px 4px;

    font-size: 11px;
    color: var(--text-muted);
}


/* ---- Notice + actions ---- */

.filter-notice {
    margin-bottom: 12px;
    padding: 8px 10px;

    background: var(--warning-soft);
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);

    font-size: 10.5px;
    line-height: 1.45;

    color: #92400e;
}

.filters__actions {
    display: grid;
    gap: 7px;

    position: sticky;
    bottom: 0;

    padding-top: 4px;
    background: var(--surface);
}

.apply-button,
.reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 12px;

    border-radius: var(--radius-sm);

    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.apply-button {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #ffffff;
}

.apply-button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.apply-button.is-dirty {
    box-shadow: 0 0 0 3px rgba(11, 31, 75, 0.18);
}

.reset-button {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

.reset-button:hover {
    border-color: var(--primary-border);
    color: var(--primary);
}


/* =========================================================
   7. CONTENT COLUMN
   ========================================================= */

.app-content {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.error-banner {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 14px;

    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);

    color: #912018;
    font-size: 12.5px;
}

.error-banner__icon {
    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;
    flex: none;

    background: var(--danger);
    border-radius: 50%;

    color: #ffffff;
    font-weight: 700;
}

.error-banner__retry {
    margin-left: auto;
    padding: 5px 12px;

    background: var(--surface);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);

    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   8. KPI STRIP
   ========================================================= */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 16px 18px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);

    min-width: 0;
}

/* One calm style for all six - the figure is the point, not an icon. */
.kpi-card__icon {
    display: none;
}

.kpi-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.kpi-card__label {
    display: block;

    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}

.kpi-card__value {
    display: block;

    /* Six across, so the figure has to give a little as it narrows. */
    font-size: clamp(17px, 1.45vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;

    color: var(--text);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-card__delta {
    display: block;

    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-card__delta strong {
    font-weight: 600;
}

.kpi-card__delta .is-up {
    color: var(--success);
}

.kpi-card__delta .is-down {
    color: var(--danger);
}

/* A year range is the one value that is text rather than a figure,
   and "2025 - 2026" does not fit the others' size. */
.kpi-card--indigo .kpi-card__value {
    font-size: clamp(14px, 1.15vw, 20px);
}


/* =========================================================
   9. TABLE CARDS
   ========================================================= */

.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);

    overflow: hidden;
}

.table-card__head {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 60px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-soft);
}

/* ---- Folding (ui-layout.js) ---- */

.fold-button {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;
    flex: none;
    margin-left: -6px;

    background: none;
    border: 0;
    border-radius: var(--radius-sm);

    color: var(--text-secondary);

    transition: background var(--transition-fast);
}

.fold-button:hover {
    background: var(--surface-muted);
}

.fold-button svg {
    transform: rotate(90deg);
    transition: transform var(--transition-fast);
}

.table-card.is-folded .fold-button svg {
    transform: rotate(0deg);
}

.fold-title {
    cursor: pointer;
}

/* Folded: only the head shows. script.js keeps rendering into the
   hidden parts, so opening it again shows current figures. */
.table-card.is-folded > :not(.table-card__head) {
    display: none !important;
}

.table-card.is-folded > .table-card__head {
    border-bottom: 0;
}

/* ---- Full screen (ui-layout.js) ---- */

.fullscreen-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.table-card.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 120;

    display: flex;
    flex-direction: column;

    border: 0;
    border-radius: 0;

    overflow: hidden;
}

.table-card.is-fullscreen > .table-card__head {
    padding: 14px 28px;
}

/* The table scrolls inside the full-screen card, so its header row
   can stay pinned. */
.table-card.is-fullscreen .table-wrapper,
.table-card.is-fullscreen #dealerContributionContainer,
.table-card.is-fullscreen #brandContainer {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Your brand (OEM logins): its by-class and by-RTO tables, each in
   its own inner card with its own downloads. */
#brandContainer {
    display: grid;
    gap: 14px;
    padding: 14px;

    background: var(--page);
}

#brandContainer > .table-state {
    margin: 0;
    background: var(--surface);
    border-radius: var(--radius-sm);
}

.brand-card__table .table-card__head h2 {
    font-size: 14px;
}

/* Vehicle class / RTO names are long and differ only at the end
   ("M-Cycle/Scooter" vs "M-Cycle/Scooter-With Side Car") - the
   label column gets real room instead of an equal share. */
.brand-card__table .data-table th:first-child,
.brand-card__table .data-table td:first-child {
    width: 250px;
}

.brand-card__table .data-table td.col-label {
    max-width: none;
}

/* A card clips its contents (rounded corners) - not while an OEM
   list is open inside it (Profile's Add/Edit login form). */
.table-card:has(.auth-combo__list:not([hidden])) {
    overflow: visible;
}

body.has-fullscreen {
    overflow: hidden;
}

.dealership-breakdown__toggle {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 10px;

    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;

    cursor: pointer;
}

.table-card__head h2 {
    flex: 1;
    min-width: 0;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;

    color: var(--navy);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-card__actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
}

.table-card__meta {
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.download-button {
    min-height: 34px;
    padding: 0 12px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;

    transition:
        border-color var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast);
}

.download-button:hover:not(:disabled) {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary-dark);
}

.download-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.table-card__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 9px 13px;
    border-bottom: 1px solid var(--border-soft);
}

.table-search {
    width: 280px;
    max-width: 100%;
    padding: 6px 10px;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    font-size: 12px;
}

.table-search:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.table-notice {
    margin: 0;
    padding: 8px 13px;

    background: var(--warning-soft);
    border-bottom: 1px solid #fde68a;

    font-size: 11px;
    color: #92400e;
}

.table-notice--inline {
    flex: 1;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-muted);
}


/* ---- States ---- */

.table-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 34px 16px;

    color: var(--text-muted);
    font-size: 12.5px;
}

.table-state--error {
    color: var(--danger);
}


/* =========================================================
   10. DATA TABLES
   ========================================================= */

.table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;

    /* Every column the same width, dividing the table evenly, rather
       than however wide its widest cell's unwrapped content happens
       to be - the header wrapping below is what makes that survive
       a long column name. */
    table-layout: fixed;

    border-collapse: separate;
    border-spacing: 0;

    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
    padding: 10px 12px;

    border-bottom: 1px solid var(--border-soft);

    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * One column-pair per month of history, not a bounded set like every
 * other data-table (years, makers) - fixed layout divides the full
 * table width evenly across however many months exist, which for
 * several years of history squeezes each column to a few px and
 * leaves nothing but an unreadable solid-coloured header. Auto layout
 * lets each column take only what its own content needs instead; the
 * surrounding .table-wrapper already scrolls horizontally for
 * anything wider than its card.
 */
.data-table--dealership-breakdown {
    table-layout: auto;
}

/*
 * A grid item (direct child of .app-content, which is itself
 * display: grid) defaults to min-width: auto - its content's
 * min-content size, not 0 - so a table this wide would grow the
 * whole grid column instead of scrolling inside its own card. Every
 * other table-card on this page never hits this because its table
 * stays within the column's width on its own; this is the one that
 * needed the explicit override.
 */
#dealershipBreakdownContainer {
    min-width: 0;
}

/* Toggle + per-RTO tables, one block in the content grid (and the
   "Dealer-wise" jump-link target). ui-layout.js marks it empty for
   accounts with nothing to compare. */
.dealer-wise-section {
    min-width: 0;
}

.dealer-wise-section.is-empty {
    display: none;
}

.data-table--dealership-breakdown td {
    white-space: nowrap;
}

/*
 * Specificity has to beat .data-table thead th's own white-space:
 * normal (its word-break: break-word is what lets a long column
 * name survive table-layout: fixed elsewhere) - here the layout is
 * auto, so a wrapped "Unit"/"%" header just lets auto-layout pick a
 * column narrower than the header needs, which is the opposite of
 * what this table wants.
 */
.data-table.data-table--dealership-breakdown thead th {
    white-space: nowrap;
    word-break: normal;
}

/*
 * Month grids (Contribution + Dealer-wise) - Navy Ledger look, same
 * columns and rows as before. Each month heading sits centred over
 * its Unit/% pair and a hairline splits one pair from the next; the
 * unit reads dark, its % muted; the TOTAL pair is tinted navy; the
 * account's own dealership row is gold; the summing rows (TOTAL, RTO
 * subtotals) are navy and bold. Positional selectors only - script.js
 * builds every row as name, then unit/% pairs, TOTAL pair last.
 */
.data-table.data-table--dealership-breakdown thead tr:first-child th:not(:first-child) {
    text-align: center;
    border-left: 1px solid var(--border-soft);
    color: var(--navy);
}

.data-table.data-table--dealership-breakdown thead tr:nth-child(2) th:nth-child(odd) {
    border-left: 1px solid var(--border-soft);
}

.data-table.data-table--dealership-breakdown thead tr:first-child th:last-child,
.data-table.data-table--dealership-breakdown thead tr:nth-child(2) th:nth-last-child(-n+2) {
    background: var(--total-row);
    color: var(--navy);
    font-weight: 700;
}

.data-table--dealership-breakdown tbody td:nth-child(2n+2) {
    border-left: 1px solid var(--border-soft);
    color: var(--text);
    font-weight: 500;
}

.data-table--dealership-breakdown tbody td:nth-child(2n+3) {
    color: var(--text-muted);
    font-size: 12px;
}

.data-table--dealership-breakdown tbody tr:not(.data-table__group-row) td:nth-last-child(-n+2) {
    background: var(--head-bg);
    font-weight: 600;
}

.data-table--dealership-breakdown tbody tr.is-own td {
    background: #fbf7ee;
    border-bottom-color: #efe4cc;
}

.data-table--dealership-breakdown tbody tr.is-own td:first-child {
    color: var(--navy);
    font-weight: 700;
}

.data-table--dealership-breakdown tbody tr.is-own td:nth-child(2n+2) {
    font-weight: 700;
}

.data-table--dealership-breakdown tbody tr.is-own td:nth-child(2n+3) {
    color: var(--gold);
    font-weight: 600;
}

.data-table--dealership-breakdown tbody tr.is-own td:nth-last-child(-n+2) {
    background: var(--gold-soft);
}

.data-table--dealership-breakdown tbody tr:is(:last-child, .data-table__subtotal-row) td:nth-child(n) {
    background: var(--total-row);
    border-top: 2px solid var(--primary-border);

    color: var(--navy-mid);
    font-weight: 700;
}

/* Contribution is all the account's own data - its RTO headings
   carry the gold mark. */
#dealerContributionContainer .data-table__group-row td {
    background: var(--gold-soft);
    border-top-color: #efe4cc;
    border-bottom-color: #efe4cc;

    color: var(--gold);
}

/* RTO sub-header row inside a Contribution table - one table per
   maker now holds every RTO, grouped under one of these instead of
   its own separate table/card. */
.data-table__group-row td {
    background: var(--surface-muted);
    border-top: 2px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);

    color: var(--navy-mid);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* An RTO's own subtotal, or the table's grand TOTAL - same visual
   weight as tfoot's totals row above, since both mean "this is a sum
   of the rows above it, not a row of its own data". */
.data-table__subtotal-row td {
    background: var(--total-row);
    border-top: 2px solid var(--primary-border);

    color: var(--navy-mid);
    font-weight: 700;
}

/* Data cells stay one line (truncated with a tooltip, same as
   before) - only the header label wraps. */
.data-table tbody td,
.data-table tfoot td {
    white-space: nowrap;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;

    background: var(--head-bg);
    border-bottom: 1px solid var(--border);

    color: var(--head-text);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;

    white-space: normal;
    word-break: break-word;
    vertical-align: bottom;
    line-height: 1.35;
}

.data-table thead th.numeric,
.data-table td.numeric {
    text-align: right;
}

.data-table tbody tr:nth-child(even) {
    background: var(--row-alt);
}

.data-table tbody tr:hover {
    background: var(--row-hover);
}

.data-table tbody td {
    color: var(--text-secondary);
}

.data-table td.col-label {
    color: var(--text);
    font-weight: 500;

    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table .col-emphasis {
    background: var(--col-accent);

    color: var(--primary-dark);
    font-weight: 700;
}

.data-table tbody tr:hover .col-emphasis {
    background: #e9eef8;
}

/*
 * Scoped to the cell rather than left bare: `.data-table tbody td`
 * sets a colour of its own and is the more specific selector, so an
 * unscoped .is-up would never win.
 */
.data-table td.col-growth {
    font-weight: 600;
}

.data-table td.is-up,
.data-table tfoot td.is-up,
.is-up {
    color: var(--success);
}

.data-table td.is-down,
.data-table tfoot td.is-down,
.is-down {
    color: var(--danger);
}

.data-table td.is-zero,
.is-zero {
    color: var(--text-muted);
}


/* ---- Count and its share, in one cell ----

   A year cell in card 1 and a maker cell in card 2 each read
   twice: the count, and the share it holds of that column's year
   or of that row's RTO in a lighter ink underneath. Both halves
   inherit the cell's colour, so a zero stays grey, the totals row
   stays navy, and nothing needs a second palette.

   Stacked on two lines rather than side by side - these columns
   are all `numeric: true` (see fillCell()'s callers), narrow
   enough under the equal-width column layout that count and share
   side by side never both fit without one of them getting cut
   off. One value per line always fits its own column width.

   The flex lives on an inner wrapper span, never on the td: a
   table cell whose own display is overridden to flex drops out
   of the table's column layout, which is what left every share
   cell stacked under its neighbour instead of lined up with its
   header. */

.data-table td.has-share {
    text-align: right;
}

.data-table .cell-share-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

.data-table .cell-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table .cell-share {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;

    color: inherit;
    opacity: 0.58;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
}


/* ---- Sortable headings ---- */

.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 0;

    background: none;
    border: 0;

    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.data-table thead th.numeric .table-sort-button {
    flex-direction: row-reverse;
}

.sort-icon {
    flex-shrink: 0;

    opacity: 0.55;
    font-size: 9px;
}


/* ---- Frozen first column ---- */

.data-table .sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;

    background: var(--surface);
}

.data-table thead th.sticky-left {
    z-index: 4;
    background: var(--head-bg);
}

.data-table tbody tr:nth-child(even) .sticky-left {
    background: var(--row-alt);
}

.data-table tbody tr:hover .sticky-left {
    background: var(--row-hover);
}

.data-table tfoot .sticky-left {
    background: var(--total-row);
}

.data-table__subtotal-row .sticky-left {
    background: var(--total-row);
}


/* ---- Totals row ---- */

.data-table tfoot td,
.data-table tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 2;

    background: var(--total-row);
    border-top: 2px solid var(--primary-border);
    border-bottom: 0;

    color: var(--navy-mid);
    font-weight: 700;
}

.data-table tfoot .col-emphasis {
    background: #e3e9f6;
}


/* =========================================================
   11. PAGINATION
   ========================================================= */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 9px 13px;
    border-top: 1px solid var(--border-soft);
}

.pagination__left,
.pagination__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination__left label {
    font-size: 11px;
    color: var(--text-muted);
}

.pagination__left select {
    padding: 4px 7px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    font-size: 11.5px;
}

.pagination-button {
    padding: 5px 12px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    font-size: 11.5px;
    font-weight: 500;
}

.pagination-button:hover:not(:disabled) {
    border-color: var(--primary-border);
    color: var(--primary);
}

.pagination-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-indicator {
    font-size: 11.5px;
    color: var(--text-secondary);
}


/* =========================================================
   12. QUICK SUMMARY RAIL
   ========================================================= */

/* Now a foldable card in the content column (#summarySection), its
   four panels side by side. */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;

    padding: 16px 18px 18px;
}

.summary-panel {
    padding: 14px 16px;

    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

.summary-panel__title {
    margin-bottom: 10px;

    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.summary-panel__title span {
    color: var(--text-muted);
    font-weight: 500;
}

.summary-panel__title span::before {
    content: "· ";
}

.summary-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;

    counter-reset: rank;
}

.summary-list li {
    display: flex;
    align-items: baseline;
    gap: 7px;

    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.summary-list li::before {
    counter-increment: rank;
    content: counter(rank) ".";

    flex: none;
    min-width: 15px;

    color: var(--text-muted);
    font-size: 10.5px;
}

.summary-list__name {
    flex: 1;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-list__value {
    flex: none;

    font-weight: 600;
    color: var(--text);
}

.summary-list--modal li {
    padding: 5px 2px;
    border-bottom: 1px solid var(--border-soft);
}

.summary-list__empty {
    font-size: 11.5px;
    color: var(--text-muted);
}

.view-all-button {
    width: 100%;
    min-height: 34px;
    margin-top: 12px;
    padding: 0 10px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    color: var(--navy);
    font-size: 12.5px;
    font-weight: 600;
}

.view-all-button:hover {
    border-color: var(--primary-border);
    color: var(--primary);
}

.summary-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.summary-facts li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.summary-facts li span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-facts strong {
    flex: none;

    color: var(--text);
    font-weight: 600;
}


/* =========================================================
   13. VIEW ALL DIALOG
   ========================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(8, 26, 61, 0.42);
}

.modal {
    display: flex;
    flex-direction: column;

    width: min(460px, 100%);
    max-height: min(560px, 82vh);

    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);

    overflow: hidden;
}

/* The Import dialog: a form and a checks table need more room than
   a summary list does. */
.modal--wide {
    width: min(640px, 100%);
    max-height: min(680px, 88vh);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 13px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.modal__head h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.modal__close {
    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    background: none;
    border: 0;
    border-radius: var(--radius-sm);

    color: var(--text-muted);
    font-size: 19px;
    line-height: 1;
}

.modal__close:hover {
    background: var(--surface-muted);
    color: var(--text);
}

.modal__body {
    padding: 12px 16px 16px;
    overflow-y: auto;
}

/* The Import dialog's own sections (intro, checks table, form,
   report) each carry their own edge-to-edge padding and dividers,
   the way they did as a table-card's direct children - the body's
   usual padding would just double up on top of that. */
.modal__body--flush {
    padding: 0;
}


/* =========================================================
   14. IMPORT DIALOG

   Lives inside the modal shell (section 13) now, not its own
   table-card - .modal--wide and .modal__body--flush below are
   the only two things that shell needed added for it.
   ========================================================= */

.import-card__intro {
    margin: 0;
    padding: 10px 13px;

    border-bottom: 1px solid var(--border-soft);

    color: var(--text-secondary);
    font-size: 12px;
}

.import-card__intro code {
    padding: 1px 5px;

    background: var(--surface-muted);
    border-radius: 4px;

    font-size: 11px;
}

.import-form__hint {
    margin: 0;

    color: var(--text-secondary);
    font-size: 12px;
}

.import-card__checks-link {
    padding: 0;

    background: none;
    border: 0;

    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.import-card__checks-link--danger {
    color: var(--danger);
}

.import-checks {
    padding: 10px 13px;
    border-bottom: 1px solid var(--border-soft);

    background: var(--surface-soft);

    overflow-x: auto;
}

.import-checks__table {
    width: 100%;
    border-collapse: collapse;

    font-size: 11.5px;
}

.import-checks__table th,
.import-checks__table td {
    padding: 6px 9px;

    border-bottom: 1px solid var(--border-soft);

    text-align: left;
    vertical-align: top;
}

.import-checks__table th {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.import-checks__table tbody tr:last-child td {
    border-bottom: 0;
}


/* ---- Upload form ---- */

.import-form {
    padding: 13px;
}

.import-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 22px 14px;

    background: var(--surface-soft);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);

    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
    cursor: pointer;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.import-dropzone:hover {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary-dark);
}

.import-form__actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 12px;
}

.import-button {
    padding: 8px 16px;

    border-radius: var(--radius-sm);

    font-size: 12.5px;
    font-weight: 700;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        opacity var(--transition-fast);
}

.import-button--primary {
    background: var(--primary);
    border: 1px solid var(--primary);

    color: #ffffff;
}

.import-button--primary:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.import-button--primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.import-button--commit {
    background: var(--success);
    border: 1px solid var(--success);

    color: #ffffff;
}

.import-button--commit:hover:not(:disabled) {
    filter: brightness(0.92);
}


/* =========================================================
   15. LOGIN DIALOG
   ========================================================= */

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form__field {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.login-form__optional {
    color: var(--text-muted);
    font-weight: 500;
}

/* "Registered as" on Profile's Add/Edit login form. */
.login-form__field select {
    padding: 7px 10px;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
}

.login-form__field select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.login-form .auth-combo input {
    width: 100%;
}

.login-form .auth-combo__toggle {
    right: 3px;
    width: 28px;
    height: 28px;
}

.login-form__field input {
    padding: 7px 10px;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

.login-form__field input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

/* A checkbox field reads left-to-right (box, then its own label
   text), not stacked like a text field above its label. */
.login-form__field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.login-form__field--checkbox input {
    width: 15px;
    height: 15px;
    flex: none;
    padding: 0;
    background: none;
    border: 1px solid var(--border-strong);
}

.login-form__error {
    margin: 0;
    padding: 7px 10px;

    background: var(--danger-soft);
    border-radius: var(--radius-sm);

    color: var(--danger);
    font-size: 12px;
}

.login-form__switch {
    padding: 2px;

    background: none;
    border: none;

    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: underline;
}

.login-form__switch:hover {
    filter: brightness(0.85);
}


/* =========================================================
   15b. LOGIN PAGE (login.html)

   Own .auth-* classes rather than .login-form, which the Profile
   page's forms also use. One login box, centred on the page.
   ========================================================= */

.auth-body {
    background: var(--page);
}

.auth [hidden] {
    display: none !important;
}

.auth {
    min-height: 100vh;
}

.auth__panel {
    display: grid;
    place-items: center;

    min-height: 100vh;
    padding: 32px 16px;
}

/* Small logo line at the top of the box. */
/* The full company logo (emblem + DEEPKAMAL wordmark) with the
   product name under it. */
.auth-card__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    margin-bottom: 20px;
}

.auth-card__logo-img {
    display: block;

    width: 180px;
    height: auto;
}

.auth-card__product {
    color: var(--navy);
    font-family: var(--font-brand);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.auth-card {
    width: min(440px, 100%);
    padding: 26px 28px 30px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

@media (max-width: 480px) {
    .auth-card {
        padding: 20px 18px 24px;
    }
}

/* Log in / Create login switch */
.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;

    padding: 4px;

    background: var(--surface-muted);
    border-radius: 11px;
}

.auth-tabs__tab {
    min-height: 40px;

    background: none;
    border: 0;
    border-radius: 8px;

    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;

    transition: background var(--transition-fast), color var(--transition-fast);
}

.auth-tabs__tab[aria-selected="true"] {
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: var(--navy);
}

.auth-tabs__tab:focus-visible,
.auth-password__toggle:focus-visible,
.auth-submit:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.auth-notice {
    margin-top: 16px;
    padding: 10px 12px;

    background: var(--warning-soft);
    border: 1px solid #fedf89;
    border-radius: 10px;

    color: #93370d;
    font-size: 13px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;

    margin-top: 22px;
}

.auth-form__intro h1 {
    color: var(--navy);
    font-family: var(--font-brand);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auth-form__intro p {
    margin-top: 4px;

    color: var(--text-secondary);
    font-size: 13.5px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.auth-field input {
    width: 100%;
    height: 46px;
    padding: 0 14px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;

    color: var(--text);
    font-size: 14.5px;

    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.auth-field input[aria-invalid="true"] {
    border-color: var(--danger);
}

.auth-field input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--danger-soft);
}


/* ---- "Register as" - Dealer / OEM representative ---- */

.auth-role {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.auth-role legend {
    margin-bottom: 6px;
    padding: 0;

    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.auth-role__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.auth-role__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 46px;
    padding: 0 12px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;

    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;

    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.auth-field .auth-role__option input[type="radio"] {
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    padding: 0;

    accent-color: var(--navy);
    box-shadow: none;
}

.auth-role__option:has(input:checked) {
    background: var(--primary-soft);
    border-color: var(--navy);
    color: var(--navy);
}

.auth-role__option:has(input:focus-visible) {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}


/* ---- OEM picker (searchable drop-down) ---- */

.auth-combo {
    position: relative;
}

.auth-combo input {
    padding-right: 42px;
}

.auth-combo__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);

    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;

    background: none;
    border: 0;
    border-radius: 8px;

    color: var(--text-muted);
}

.auth-combo__toggle:hover {
    background: var(--surface-muted);
    color: var(--navy);
}

.auth-combo input[aria-expanded="true"] + .auth-combo__toggle svg {
    transform: rotate(180deg);
}

.auth-combo__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;

    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;

    list-style: none;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}

.auth-combo__option {
    padding: 8px 10px;
    border-radius: 7px;

    color: var(--text);
    font-size: 13px;
    line-height: 1.35;

    cursor: pointer;
}

.auth-combo__option:hover,
.auth-combo__option.is-active {
    background: var(--primary-soft);
    color: var(--navy);
}

.auth-combo__option[aria-selected="true"] {
    font-weight: 600;
}

.auth-combo__empty {
    padding: 8px 10px;

    color: var(--text-muted);
    font-size: 12px;
}

.auth-field__hint {
    color: var(--text-secondary);
    font-size: 12px;
}

.auth-field__error {
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 500;
}

.auth-field__caps {
    align-self: flex-start;
    padding: 2px 8px;

    background: var(--warning-soft);
    border-radius: 999px;

    color: #93370d;
    font-size: 12px;
    font-weight: 600;
}

.auth-field__status {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 12.5px;
    font-weight: 500;
}

.auth-field__status.is-ok {
    color: var(--success);
}

.auth-field__status.is-ok::before {
    content: "✓";
    font-weight: 700;
}

.auth-field__status.is-error {
    color: var(--danger);
}

.auth-field__status.is-error::before {
    content: "✕";
    font-weight: 700;
}

/* Show / hide password */
.auth-password {
    position: relative;
}

.auth-password input {
    width: 100%;
    padding-right: 52px;
}

/* The Profile page's smaller inputs (.login-form__field). */
.auth-password--compact input {
    padding-right: 40px;
}

.auth-password--compact .auth-password__toggle {
    right: 3px;
    width: 30px;
    height: 30px;
}

.auth-password__toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    background: none;
    border: 0;
    border-radius: 8px;

    color: var(--text-secondary);
}

.auth-password__toggle:hover {
    background: var(--surface-muted);
    color: var(--text);
}

/* Live password rules */
.auth-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;

    font-size: 12px;
    color: var(--text-secondary);
}

.auth-rules li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.auth-rules li::before {
    content: "";

    width: 7px;
    height: 7px;
    flex: none;

    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.auth-rules li.is-met {
    color: var(--success);
}

.auth-rules li.is-met::before {
    content: "✓";

    width: auto;
    height: auto;

    border: 0;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* After a submit attempt, anything still missing turns red. */
.auth-rules.is-checked li:not(.is-met) {
    color: var(--danger);
}

.auth-alert {
    padding: 10px 12px;

    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    border-radius: 10px;

    color: #b42318;
    font-size: 13.5px;
}

.auth-submit {
    min-height: 48px;

    background: var(--primary);
    border: 0;
    border-radius: 10px;

    color: #ffffff;
    font-size: 15px;
    font-weight: 600;

    transition: background var(--transition-fast), opacity var(--transition-fast);
}

.auth-submit:hover:not(:disabled) {
    background: var(--primary-dark);
}

.auth-submit:disabled {
    opacity: 0.65;
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .auth-tabs__tab,
    .auth-field input,
    .auth-submit {
        transition: none;
    }
}


/* =========================================================
   DEALER CONTRIBUTION (Card 1's own-data overlay)
   ========================================================= */

.dealer-contribution__note {
    margin: 10px 16px 14px;

    color: var(--text-muted);
    font-size: 11.5px;
    font-style: italic;
}

.dealership-breakdown__mismatch {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    font-weight: 700;

    cursor: help;
}


/* =========================================================
   PROFILE PAGE (profile.html)

   Its own page, not a dialog over the dashboard - see that file.
   Two .table-card sections (the same card shell Cards 1-3 use) in a
   single centered column; "Add a login" reuses .login-form/
   .login-form__field/.login-form__error from above, same four-field
   shape, same look.
   ========================================================= */

.profile-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 16px 40px;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-page__body {
    padding: 14px 16px 16px;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-info__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;

    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.profile-info__row dt {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.profile-info__row dd {
    margin: 0;

    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}

.profile-page__hint {
    margin: 0 0 16px;

    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.profile-manage__title {
    margin: 0 0 10px;

    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-account-list {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 0 0 16px;
    padding: 0;

    list-style: none;
}

.profile-account-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    padding: 7px 9px;

    background: var(--surface-soft);
    border-radius: var(--radius-sm);

    font-size: 12px;
}

/* Logins list: fixed columns - name, details, Edit, Delete - so the
   buttons line up row to row even where one does not apply (profile.js
   leaves an empty slot there). The dealerships list keeps the flex row. */
#profileAccountList li {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(0, 2.2fr) 44px 52px;
    align-items: center;
    column-gap: 12px;
}

#profileAccountList .profile-account-list__actions-slot {
    display: block;
}

#profileAccountList li > button {
    justify-self: end;
}

.profile-account-list__name {
    color: var(--text);
    font-weight: 600;
}

.profile-account-list__meta {
    color: var(--text-muted);
}

.profile-manage__success {
    margin: 0;
    padding: 7px 10px;

    background: #e8f7ef;
    border-radius: var(--radius-sm);

    color: var(--success);
    font-size: 12px;
}


/* ---- Report + result ---- */

.import-report {
    margin: 0 13px 13px;
    padding: 12px 14px;

    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);

    font-size: 12px;
}

.import-report__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;

    margin-bottom: 8px;
}

.import-report__head strong {
    color: var(--text);
    font-size: 12.5px;
}

.import-report__head span {
    color: var(--text-muted);
}

.import-report__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;

    margin: 0 0 8px;
    padding: 0;

    list-style: none;

    color: var(--text-secondary);
}

.import-report__ok {
    margin: 0;
    color: var(--success);
    font-weight: 600;
}

.import-report__problems,
.import-report__warnings {
    margin-top: 8px;
    padding: 9px 11px;

    border-radius: var(--radius-sm);

    font-size: 11.5px;
}

.import-report__problems {
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    color: #912018;
}

.import-report__warnings {
    background: var(--warning-soft);
    border: 1px solid #fde68a;
    color: #92400e;
}

.import-report__problems ul,
.import-report__warnings ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.import-report__problems li,
.import-report__warnings li {
    margin-top: 2px;
}

.import-result {
    margin: 0 13px 13px;
}

.import-result__ok {
    padding: 10px 13px;

    background: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: var(--radius-md);

    color: #05603a;
    font-size: 12.5px;
}

.import-result__ok strong {
    margin-right: 4px;
}

/* ---- Several files at once ---- */

.import-dropzone__hint {
    color: var(--text-secondary);
    font-size: 11.5px;
}

.import-files {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin: 12px 0 0;
    padding: 0;

    list-style: none;
}

.import-files__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;

    padding: 9px 11px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
}

.import-files__item--ok,
.import-files__item--imported {
    border-left-color: var(--success);
}

.import-files__item--problem,
.import-files__item--error,
.import-files__item--failed {
    border-left-color: var(--danger);
}

.import-files__info {
    display: flex;
    flex-direction: column;
    gap: 2px;

    flex: 1 1 220px;
    min-width: 0;
}

/* Wraps rather than truncates: these names often differ only at the
   very end ("..._Dealer 1" vs "..._Dealer 2"). */
.import-files__name {
    color: var(--text);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.import-files__status {
    color: var(--text-secondary);
    font-size: 11.5px;
}

.import-files__item--ok .import-files__status,
.import-files__item--imported .import-files__status {
    color: var(--success);
    font-weight: 600;
}

.import-files__item--problem .import-files__status,
.import-files__item--error .import-files__status,
.import-files__item--failed .import-files__status {
    color: #b42318;
}

.import-files__dealer {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
}

.import-files__dealer select {
    max-width: 230px;
    padding: 5px 8px;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    color: var(--text);
    font-size: 12px;
    font-weight: 400;
}

.import-files__remove {
    padding: 4px 8px;

    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
}

.import-files__remove:hover:not(:disabled) {
    border-color: var(--danger-border);
    color: var(--danger);
}

.import-files__remove:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Several files' reports stacked in one panel. */
.import-report__file + .import-report__file {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.import-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.import-result__failed {
    padding: 10px 13px;

    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);

    color: #912018;
    font-size: 12.5px;
}


/* =========================================================
   15. RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {

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


@media (max-width: 1280px) {

    .app-header {
        flex-wrap: wrap;
        gap: 10px;
    }
}


@media (max-width: 900px) {

    .app-header__crumbs {
        white-space: normal;
    }

    .app-shell,
    .app-shell.is-collapsed {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 16px 40px;
    }

    .section-bar {
        position: static;
        padding: 8px 16px;
    }

    .filters {
        position: static;
        max-height: none;
    }

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

    .table-card__head {
        flex-wrap: wrap;
    }

    .table-card__actions {
        width: 100%;
        justify-content: flex-end;
    }
}


@media (max-width: 560px) {

    :root {
        --gap: 10px;
    }

    .app-header {
        position: static;
        padding: 10px 12px;
    }

    /* Edge to edge against this narrower header padding. */
    .view-as-banner {
        margin: 2px -12px -10px;
        padding: 10px 12px;
    }

    .app-header h1 {
        font-size: 15px;
        white-space: normal;
    }

    .app-header__meta {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

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

    .table-search {
        width: 100%;
    }

    .pagination {
        flex-wrap: wrap;
    }
}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   UPLOAD STATUS (admins only - upload-status.js)

   Red = not uploaded, amber = partly uploaded, green = uploaded,
   grey = not due yet. The banner is red once a finished month is
   behind, amber while only the current month is.
   ========================================================= */

.upload-reminder {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 14px;

    background: var(--warning-soft);
    border: 1px solid #fedf89;
    border-radius: var(--radius-md);

    color: #93370d;
    font-size: 12.5px;
}

.upload-reminder--late {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: #912018;
}

.upload-reminder__icon {
    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;
    flex: none;

    background: #dc6803;
    border-radius: 50%;

    color: #ffffff;
    font-weight: 700;
}

.upload-reminder--late .upload-reminder__icon {
    background: var(--danger);
}

.upload-reminder__text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
}

.upload-reminder__text strong {
    margin-right: 4px;
}

.upload-reminder__open {
    flex: none;
    padding: 5px 12px;

    background: var(--surface);
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);

    color: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.upload-reminder__dismiss {
    flex: none;
    width: 26px;
    height: 26px;

    background: none;
    border: 0;
    border-radius: var(--radius-sm);

    color: inherit;
    font-size: 18px;
    line-height: 1;
    opacity: 0.7;
}

.upload-reminder__dismiss:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.6);
}

.upload-status-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.upload-status-button__badge {
    display: inline-grid;
    place-items: center;

    min-width: 20px;
    height: 20px;
    padding: 0 6px;

    background: var(--danger);
    border-radius: 999px;

    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.modal--status {
    width: min(860px, 100%);
}

.upload-status__intro {
    color: var(--text-secondary);
    font-size: 12.5px;
}

.upload-status__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;

    margin: 10px 0 12px;
    padding: 0;

    color: var(--text-secondary);
    font-size: 12px;
    list-style: none;
}

.upload-status__legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.upload-status__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.upload-status__swatch--complete,
.upload-status__cell.is-complete {
    background: #ecfdf3;
    border-color: #abefc6;
    color: var(--success);
}

.upload-status__swatch--partial,
.upload-status__cell.is-partial,
.upload-status__cell.is-short {
    background: #fffaeb;
    border-color: #fedf89;
    color: #b54708;
}

.upload-status__swatch--missing,
.upload-status__cell.is-missing {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

.upload-status__swatch--future,
.upload-status__cell.is-future,
.upload-status__cell.is-none {
    background: var(--surface-muted);
    border-color: var(--border-soft);
    color: var(--text-muted);
}

.upload-status__years {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.upload-status__year {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 32px;
    padding: 0 12px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
}

.upload-status__year.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #ffffff;
}

.upload-status__year-count {
    display: inline-grid;
    place-items: center;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    background: var(--danger);
    border-radius: 999px;

    color: #ffffff;
    font-size: 10.5px;
}

.upload-status__grid-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.upload-status__grid {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 12px;
}

.upload-status__grid th,
.upload-status__grid td {
    padding: 5px 3px;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
}

.upload-status__grid thead th {
    background: var(--head-bg);
    color: var(--head-text);
    font-weight: 600;
}

.upload-status__grid tbody th {
    padding-left: 10px;
    color: var(--text);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.upload-status__grid tbody tr:last-child th,
.upload-status__grid tbody tr:last-child td {
    border-bottom: 0;
}

.upload-status__cell {
    display: inline-grid;
    place-items: center;

    width: 100%;
    min-width: 40px;
    height: 30px;
    padding: 0 2px;

    border: 1px solid transparent;
    border-radius: 6px;

    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

button.upload-status__cell:not(:disabled) {
    cursor: pointer;
}

button.upload-status__cell:not(:disabled):hover {
    filter: brightness(0.96);
}

.upload-status__cell.is-current {
    box-shadow: inset 0 0 0 1px var(--navy);
}

.upload-status__cell.is-selected {
    outline: 2px solid var(--navy);
    outline-offset: 1px;
}

.upload-status__cell:focus-visible,
.upload-status__year:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.upload-status__detail {
    margin-top: 12px;
    padding: 12px 14px;

    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);

    font-size: 12.5px;
}

.upload-status__detail-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 0 4px;
    font-size: 13.5px;
}

.upload-status__tag {
    padding: 1px 8px;

    background: var(--primary-soft);
    border-radius: 999px;

    color: var(--navy);
    font-size: 11px;
    font-weight: 600;
}

.upload-status__sentence {
    margin: 0 0 6px;
    font-weight: 600;
}

.upload-status__sentence.is-missing {
    color: var(--danger);
}

.upload-status__sentence.is-partial,
.upload-status__sentence.is-short {
    color: #b54708;
}

.upload-status__sentence.is-complete {
    color: var(--success);
}

.upload-status__meta,
.upload-status__hint {
    margin: 0 0 6px;
    color: var(--text-secondary);
}

.upload-status__hint {
    margin: 0;
}

.upload-status__list-title {
    margin: 10px 0 6px;
    color: var(--text);
    font-weight: 600;
}

.upload-status__checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px 12px;

    max-height: 180px;
    overflow-y: auto;
}

.upload-status__check {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--text-secondary);
}

.upload-status__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.upload-status__mark {
    padding: 6px 12px;

    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
}

.upload-status__mark:hover {
    border-color: var(--navy);
}

.upload-status__link {
    padding: 0;

    background: none;
    border: 0;

    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
}

.upload-status__exempted {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.upload-status__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 4px 10px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;

    color: var(--text-secondary);
}

.upload-status__state {
    margin: 10px 0 0;
    color: var(--danger);
    font-size: 12.5px;
}

.upload-status__foot {
    display: flex;
    justify-content: flex-end;

    padding: 12px 16px;
    border-top: 1px solid var(--border-soft);
}

@media (max-width: 560px) {

    .upload-reminder {
        flex-wrap: wrap;
    }

    .upload-reminder__text {
        flex-basis: calc(100% - 66px);
    }

    .upload-reminder__open {
        margin-left: 30px;
    }
}

/* Upload status - each state as a whole, and opened out, RTO by RTO;
   the files still to upload. */

.upload-status__swatch--exempt,
.upload-status__cell.is-exempt {
    background: #f0f9ff;
    border-color: #b9e6fe;
    color: #026aa2;
}

.upload-status__cell.is-exempt {
    font-size: 10.5px;
    font-weight: 600;
}

.upload-status__expand {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;

    padding: 0;

    background: none;
    border: 0;

    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
}

.upload-status__expand:hover .upload-status__row-meta {
    color: var(--navy);
    text-decoration: underline;
}

.upload-status__expand:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 4px;
}

.upload-status__chevron {
    width: 10px;
    color: var(--text-muted);
}

.upload-status__row-meta {
    flex-basis: 100%;
    padding-left: 16px;

    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 500;
}

.upload-status__rto-row th {
    max-width: 190px;
    padding-left: 26px !important;
    overflow: hidden;

    color: var(--text-secondary) !important;
    font-size: 11px;
    font-weight: 500 !important;
    text-overflow: ellipsis;
}

.upload-status__rto-row .upload-status__cell {
    height: 24px;
    font-size: 10.5px;
}

.upload-status__rto-row td,
.upload-status__rto-row th {
    padding-top: 2px;
    padding-bottom: 2px;
    background: var(--surface-soft);
}

.upload-status__sentence.is-exempt {
    color: #026aa2;
}

.upload-status__files {
    margin-top: 10px;
}

.upload-status__files-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}

.upload-status__files-head .upload-status__list-title {
    margin: 0;
}

.upload-status__file-list {
    max-height: 200px;
    margin: 6px 0 0;
    padding: 8px 12px;
    overflow-y: auto;

    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);

    list-style: none;
}

.upload-status__file-list li {
    padding: 2px 0;
    color: var(--text-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.upload-status__file-list code,
.upload-status__meta code {
    color: var(--text);
    font-size: 11.5px;
}

.upload-status__all {
    margin-top: 12px;
}

.upload-status__all summary {
    cursor: pointer;
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 600;
}

.upload-status__all details[open] summary {
    margin-bottom: 8px;
}

.upload-status__file-group {
    margin-top: 8px;
}

.upload-status__file-group .upload-status__file-list {
    max-height: 160px;
}

/* Opened out, a state's RTOs make the grid long - it scrolls on its
   own, with the month headings and the row names kept in view. */
.upload-status__grid-wrap {
    max-height: min(440px, 52vh);
    overflow: auto;
}

.upload-status__grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.upload-status__grid tbody th,
.upload-status__grid thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
}

.upload-status__grid thead th:first-child {
    z-index: 3;
    background: var(--head-bg);
}

.upload-status__rto-row th {
    background: var(--surface-soft) !important;
}

.upload-status__ok {
    color: var(--success);
    font-weight: 600;
}

.upload-status__warn {
    color: #b54708;
    font-weight: 600;
}


/* =========================================================
   PHONE LAYOUT

   The desktop layout squeezed onto a phone cut things off: the
   Export menu opened past the left edge, card details and table
   figures were clipped with "…", and the closed filter rail became
   an empty box. Phones only - nothing above these widths changes.
   ========================================================= */

.filters__open-text {
    display: none;
}

@media (max-width: 900px) {

    /* Closed filters: one slim bar, not a desktop side column. */
    .is-collapsed .filters__head {
        flex-direction: row;
        gap: 8px;
        padding: 10px 14px;
    }

    .is-collapsed .filters__head h2 {
        display: block;
    }

    .is-collapsed .filters__collapse {
        margin-left: auto;
        padding: 0 12px;
    }

    .is-collapsed .filters__open-text {
        display: inline;
    }
}

@media (max-width: 560px) {

    /* Opens rightwards from its button, inside the screen. */
    .export-menu__list {
        left: 0;
        right: auto;
        max-width: calc(100vw - 24px);
    }

    /* Header buttons: compact enough to share rows. */
    .app-header__meta .export-button {
        min-height: 36px;
        padding: 0 11px;
        font-size: 13px;
    }

    .refreshed {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Two figures a row instead of six full-width boxes. */
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .kpi-card {
        padding: 11px 12px;
    }

    .kpi-card__value {
        font-size: 18px;
    }

    .kpi-card__label,
    .kpi-card__delta {
        font-size: 11.5px;
        white-space: normal;
    }

    /* Card heads: title, then the details on a line of their own, then
       the buttons - nothing pushed past the left edge. */
    .table-card__head {
        padding: 10px 12px;
    }

    .table-card__actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    .table-card__meta {
        flex-basis: 100%;
        white-space: normal;
    }

    .table-card__actions .download-button {
        min-height: 32px;
        padding: 0 10px;
        white-space: nowrap;
    }

    /* Tables: every column as wide as its content, the table slides
       sideways - no figure is ever cut short with "…". */
    .data-table {
        table-layout: auto;
        width: max-content;
        min-width: 100%;
    }

    .data-table th,
    .data-table td,
    .data-table .cell-value,
    .data-table .cell-share {
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }

    .data-table td.col-label {
        min-width: 130px;
        max-width: 170px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 560px) {

    /* Header buttons two by two, the refresh date on a slim line above. */
    .app-header__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .app-header__meta .refreshed {
        flex: 1 1 100%;
        justify-content: center;
    }

    .app-header__meta > .export-button,
    .app-header__meta > .export-menu,
    .app-header__meta > .export-menu > .export-button {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }

    .app-header__meta > .export-menu {
        display: flex;
    }

    /* Section links: one row to swipe through, not three wrapped rows. */
    .section-bar {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .section-bar__links {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .section-bar__links::-webkit-scrollbar {
        display: none;
    }

    .section-bar__links a {
        flex: none;
        white-space: nowrap;
    }

    .section-bar__fold {
        flex: none;
        padding: 0 10px;
    }

    /* The first column (maker, class, RTO) stays put while the figures
       slide sideways. */
    .data-table tbody td:first-child,
    .data-table thead th:first-child,
    .data-table tfoot td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--surface);
        box-shadow: 1px 0 0 var(--border-soft);
    }

    .data-table thead th:first-child {
        z-index: 3;
        background: var(--head-bg);
    }

    .data-table tfoot td:first-child {
        background: var(--total-row);
    }
}

@media (max-width: 560px) {

    /* Export now sits in the right-hand column - open leftwards from
       its right edge, which stays inside the screen. */
    .export-menu__list {
        left: auto;
        right: 0;
    }
}

/* Full screen: the head keeps its full height - allowed to shrink, the
   table slid up over its buttons ("Exit full screen" included) whenever
   the head wrapped onto more than one line. */
.table-card.is-fullscreen > .table-card__head {
    flex: none;
}

@media (max-width: 560px) {

    .table-card.is-fullscreen > .table-card__head {
        padding: 10px 12px;
    }

    /* Long card titles ("Your brand · HONDA MOTORCYCLE AND ...") wrap
       instead of being cut. */
    .table-card__head h2 {
        white-space: normal;
    }

    /* Search box and its note each get the full width. */
    .table-card__toolbar {
        flex-wrap: wrap;
    }

    .table-card__toolbar > * {
        flex-basis: 100%;
    }
}

@media (max-width: 560px) {

    /* The links have a row of their own to swipe through; the buttons
       (Upload status, View as, Expand all - admins have more of them)
       wrap below it rather than pushing the page wider. */
    .section-bar {
        flex-wrap: wrap;
    }

    .section-bar__links {
        flex: 1 1 100%;
    }

    .section-bar .view-as {
        flex: 1 1 auto;
        min-width: 0;
    }

    .section-bar .view-as__select {
        min-width: 0;
        max-width: 100%;
    }
}