/* =========================================================
   HSRP DASHBOARD
   File: /style.css

   VISUAL STYLE:
   - Dark navy filter sidebar
   - Clean white dashboard surface
   - Poppins typography
   - Professional blue accent system
   - Rounded cards
   - Compact enterprise dashboard spacing
   - Searchable / polished filter controls
   - Light and dark themes
   ========================================================= */


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

:root {

    /* Primary */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eff6ff;
    --primary-border: #bfdbfe;

    /* Status */
    --success: #16a34a;
    --success-soft: #f0fdf4;

    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --danger-border: #fecaca;

    --warning: #d97706;
    --warning-soft: #fffbeb;

    /* Page */
    --page: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #f1f5f9;

    /* Text */
    --text: #111827;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-light: #cbd5e1;

    /* Borders */
    --border: #e2e8f0;
    --border-dark: #cbd5e1;

    /* Table */
    --row-alt: #fbfcfe;
    --row-hover: #f8fafc;

    /* Sidebar */
    --sidebar: #0f172a;
    --sidebar-soft: #172033;
    --sidebar-hover: #1d293b;
    --sidebar-border: #334155;
    --sidebar-edge: #0b1220;

    --sidebar-text: #f8fafc;
    --sidebar-secondary: #cbd5e1;
    --sidebar-muted: #94a3b8;
    --sidebar-accent: #60a5fa;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 20px;

    /* Shadows */
    --shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.04);

    --shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.05);

    --shadow-md:
        0 8px 24px rgba(15, 23, 42, 0.07);

    --shadow-lg:
        0 16px 40px rgba(15, 23, 42, 0.10);

    /* Layout */
    --sidebar-width: 300px;
    --header-height: 76px;
    --content-max-width: 1600px;

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


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

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

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

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

    margin: 0;

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

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 13px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

select,
input {
    width: 100%;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


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

.loading-overlay {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: grid;
    place-items: center;

    padding: 24px;

    background: rgba(245, 247, 251, 0.82);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

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

    min-width: 210px;

    padding: 16px 19px;

    color: var(--primary-dark);

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    font-size: 12px;
    font-weight: 600;
}

.loading-spinner {
    display: inline-block;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border: 2px solid var(--primary-border);
    border-top-color: var(--primary);

    border-radius: 50%;

    animation: spin 0.75s linear infinite;
}

.loading-spinner--small {
    width: 17px;
    height: 17px;

    flex-basis: 17px;

    border-width: 2px;
}

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


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

.dashboard-header {
    position: relative;
    z-index: 20;

    min-height: var(--header-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 14px 28px;

    background: var(--surface);

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

    box-shadow: var(--shadow-xs);
}

.dashboard-header__brand {
    display: flex;
    align-items: center;

    gap: 13px;

    min-width: 0;
}

.brand-mark {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    color: #ffffff;

    background: var(--primary);

    border-radius: 12px;

    box-shadow:
        0 5px 14px rgba(37, 99, 235, 0.20);

    font-size: 13px;
    font-weight: 700;
}

#dashboard-title {
    margin: 0;

    color: var(--text);

    font-size: clamp(19px, 2vw, 25px);
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.025em;
}

.dashboard-header__subtitle {
    margin: 4px 0 0;

    color: var(--text-secondary);

    font-size: 11px;
}

.dashboard-header__meta {
    display: flex;
    align-items: center;

    gap: 18px;

    flex-shrink: 0;
}

.data-period {
    display: flex;
    flex-direction: column;

    gap: 1px;
}

.data-period__label {
    color: var(--text-muted);

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}

#data-year-range {
    color: var(--text);

    font-size: 14px;
    font-weight: 700;
}

.data-period__divider {
    width: 1px;
    height: 31px;

    background: var(--border);
}

.unit-label {
    color: var(--text-muted);

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

    white-space: nowrap;
}


/* =========================================================
   5. MAIN LAYOUT
   ========================================================= */

.dashboard-layout {
    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);

    min-height:
        calc(100vh - var(--header-height));
}

.filter-sidebar {
    position: relative;

    min-width: 0;

    padding: 24px 18px;

    background: var(--sidebar);

    color: var(--sidebar-text);

    border-right: 1px solid var(--sidebar-edge);

    overflow: visible;
}

.dashboard-content {
    min-width: 0;

    width: 100%;
    max-width: var(--content-max-width);

    padding: 28px 30px 40px;

    margin: 0 auto;

    overflow-x: hidden;
}

.content-section {
    margin-bottom: 22px;
}


/* =========================================================
   6. SIDEBAR
   ========================================================= */

.filter-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 22px;
    padding: 2px 3px 17px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}

.filter-sidebar__header h2 {
    margin: 3px 0 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;

    line-height: 1.2;
}

.filter-sidebar__icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: var(--sidebar-accent);

    background: rgba(37, 99, 235, 0.14);

    border:
        1px solid rgba(96, 165, 250, 0.16);

    border-radius: 9px;
}

.section-eyebrow {
    display: block;

    color: var(--sidebar-accent);

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

    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: 0.13em;
}


/* =========================================================
   FILTER FORM

   Layout is driven by classes, not :nth-child, so adding or
   removing a filter cannot silently break the grid.
   ========================================================= */

.filter-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: 10px;
    row-gap: 16px;
}

.filter-form > .filter-group,
.filter-form > .year-range-filters,
.filter-form > .year-range-error,
.filter-form > .filter-notice,
.filter-form > .clear-filters-button {
    grid-column: 1 / -1;
}


/*
From Year and To Year sit side by side, and stay side by side
at every breakpoint.
*/

.year-range-filters {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: 10px;
}

.year-range-error {
    margin: -6px 0 0;

    color: #fca5a5;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.45;
}

.filter-group {
    display: flex;
    flex-direction: column;

    gap: 7px;

    min-width: 0;
}

.filter-group label {
    color: var(--sidebar-secondary);

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   FILTER NOTICE
   ========================================================= */

.filter-notice {
    margin: 0;

    padding: 9px 11px;

    color: var(--sidebar-secondary);

    background: rgba(96, 165, 250, 0.08);

    border: 1px solid rgba(96, 165, 250, 0.18);
    border-left: 3px solid var(--sidebar-accent);

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

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   SIDEBAR SELECTS
   ========================================================= */

.filter-group select {
    min-height: 43px;

    padding: 9px 34px 9px 12px;

    color: #e2e8f0;

    background-color: var(--sidebar-soft);

    border: 1px solid var(--sidebar-border);

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

    outline: none;

    appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #94a3b8 50%
        ),
        linear-gradient(
            135deg,
            #94a3b8 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 14px) 18px,
        calc(100% - 9px) 18px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;

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

.filter-group select:hover:not(:disabled) {
    border-color: #475569;

    background-color: var(--sidebar-hover);
}

.filter-group select:focus {
    border-color: var(--sidebar-accent);

    background-color: var(--sidebar-hover);

    box-shadow:
        0 0 0 3px rgba(96, 165, 250, 0.12);
}

.filter-group select:disabled {
    color: #64748b;

    background-color: #111827;

    cursor: not-allowed;
}

.filter-group select option {
    color: #e2e8f0;

    background: var(--sidebar);
}


/* =========================================================
   SEARCHABLE FILTER DROPDOWN

   The combobox stands in for the native select, which stays
   in the DOM holding the value.
   ========================================================= */

.combo {
    position: relative;

    min-width: 0;
}

/*
The real <select>: still present and still the source of
truth, just not visible or focusable.
*/

.combo__native {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    border: 0 !important;

    pointer-events: none;
}

.combo__input {
    width: 100%;

    min-height: 43px;

    padding: 9px 34px 9px 12px;

    color: #e2e8f0;

    background-color: var(--sidebar-soft);

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

    outline: none;

    text-overflow: ellipsis;

    /* Matches the arrow drawn on the native selects. */
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #94a3b8 50%
        ),
        linear-gradient(
            135deg,
            #94a3b8 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 14px) 18px,
        calc(100% - 9px) 18px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;

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

.combo__input::placeholder {
    color: #94a3b8;

    opacity: 1;
}

.combo__input:hover:not(:disabled) {
    border-color: #475569;

    background-color: var(--sidebar-hover);
}

.combo__input:focus {
    border-color: var(--sidebar-accent);

    background-color: var(--sidebar-hover);

    box-shadow:
        0 0 0 3px rgba(96, 165, 250, 0.12);
}

.combo__input:disabled {
    color: #64748b;

    background-color: #111827;

    cursor: not-allowed;
}

.combo__list {
    position: absolute;
    z-index: 40;

    top: calc(100% + 4px);
    left: 0;
    right: 0;

    max-height: 260px;

    margin: 0;
    padding: 4px;

    overflow-y: auto;

    list-style: none;

    background: var(--sidebar);

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

    box-shadow:
        0 12px 28px rgba(2, 6, 23, 0.55);
}

.combo__option {
    padding: 8px 10px;

    color: #cbd5e1;

    border-radius: 6px;

    font-size: 11px;

    cursor: pointer;

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

.combo__option--active {
    color: #ffffff;

    background: var(--sidebar-hover);
}

.combo__option--selected {
    color: var(--sidebar-accent);

    font-weight: 600;
}

.combo__empty,
.combo__more {
    padding: 9px 10px;

    color: var(--sidebar-muted);

    font-size: 10px;

    cursor: default;
}

.combo__more {
    border-top: 1px solid rgba(255, 255, 255, 0.07);

    margin-top: 3px;
}


/* =========================================================
   CLEAR FILTERS
   ========================================================= */

.clear-filters-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;

    min-height: 42px;

    margin-top: 5px;

    padding: 9px 12px;

    color: var(--sidebar-secondary);

    background: transparent;

    border:
        1px solid var(--sidebar-border);

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

    font-size: 11px;
    font-weight: 600;

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

.clear-filters-button:hover {
    color: #ffffff;

    background: var(--sidebar-soft);

    border-color: #475569;
}

.clear-filters-button:active {
    transform: translateY(1px);
}

.clear-filters-button:focus-visible {
    outline: 2px solid var(--sidebar-accent);
    outline-offset: 2px;
}


/* =========================================================
   7. ERROR BANNER
   ========================================================= */

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

    gap: 10px;

    margin-bottom: 16px;

    padding: 12px 14px;

    color: var(--danger);

    background: var(--danger-soft);

    border: 1px solid var(--danger-border);

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

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

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

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    color: #ffffff;

    background: var(--danger);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 700;
}

.error-banner__retry {
    margin-left: auto;

    padding: 6px 13px;

    color: var(--danger);

    background: var(--surface);

    border: 1px solid var(--danger-border);

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

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;

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

.error-banner__retry:hover {
    color: #ffffff;

    background: var(--danger);
}


/* =========================================================
   8. ACTIVE FILTERS / DATASET NOTE
   ========================================================= */

.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    min-height: 28px;

    margin-bottom: 10px;
}

.active-filters__label {
    color: var(--text-muted);

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

    margin-right: 3px;

    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.active-filter {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 4px 10px;

    color: var(--primary-dark);

    background: var(--primary-soft);

    border: 1px solid var(--primary-border);

    border-radius: 999px;

    font-size: 10px;
    font-weight: 600;
}

.active-filter strong {
    margin-right: 4px;

    font-weight: 700;
}

.active-filter--empty {
    color: var(--text-muted);

    background: var(--surface);

    border-color: var(--border);
}

.dataset-note {
    margin: 0 0 18px;

    color: var(--text-muted);

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


/* =========================================================
   9. SECTION HEADINGS
   ========================================================= */

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 13px;
}

.section-heading h2 {
    margin: 3px 0 0;

    color: var(--text);

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

    line-height: 1.3;

    letter-spacing: -0.018em;
}

/*
 * Inside .table-card, which clips to a rounded corner. Without
 * the horizontal padding the eyebrow starts at x=0 and its first
 * letter is cut off by the radius.
 */
.section-heading--table {
    padding: 16px 18px 13px;
}


/* =========================================================
   10. KPI GRID
   ========================================================= */

.kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;

    margin-bottom: 22px;
}

.kpi-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    min-width: 0;
    min-height: 125px;

    padding: 19px;

    overflow: hidden;

    background: var(--surface);

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

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

    box-shadow: var(--shadow-sm);

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

.kpi-card:hover {
    transform: translateY(-2px);

    border-color: #d2dbe7;

    box-shadow: var(--shadow-md);
}

.kpi-card::after {
    position: absolute;

    right: -25px;
    bottom: -30px;

    width: 95px;
    height: 95px;

    border-radius: 50%;

    background: var(--primary-soft);

    content: "";

    opacity: 0.8;
}

.kpi-card__icon {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    flex: 0 0 45px;

    width: 45px;
    height: 45px;

    color: var(--primary);

    background: var(--primary-soft);

    border-radius: 12px;

    font-size: 12px;
    font-weight: 700;
}

.kpi-card__content {
    position: relative;
    z-index: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
}

.kpi-card__label {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 600;

    line-height: 1.25;
}

.kpi-card__value {
    display: block;

    margin-top: 3px;

    color: var(--text);

    font-size: clamp(20px, 2vw, 25px);
    font-weight: 700;

    line-height: 1.15;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-card__meta {
    margin-top: 4px;

    color: var(--success);

    font-size: 9px;
    font-weight: 600;
}


/* =========================================================
   11. TABLE CARD
   ========================================================= */

.table-card {
    overflow: hidden;

    background: var(--surface);

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

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

    box-shadow: var(--shadow-sm);
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 13px 18px;

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

    background: var(--surface-soft);
}

.table-toolbar__left {
    width: min(620px, 100%);
}

/*
Dealer stack and RTO box, side by side. Aligned to the top so the
RTO box stays level with the FIRST dealer row as more are added
below it, rather than drifting down with the stack.
*/

.toolbar-searches {
    display: flex;
    align-items: flex-start;

    gap: 8px;
}

.toolbar-searches .search-list {
    min-width: 0;

    flex: 1 1 auto;
}

/*
The RTO stack. Narrower than the dealer one - an RTO code is four
characters - but it grows its own rows the same way, so it needs a
column of its own rather than a fixed-width box.
*/

.search-list--rto {
    width: auto;

    flex: 0 0 232px;
}

.table-toolbar__right {
    flex-shrink: 0;
}

.result-count {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   SEARCH BOX
   ========================================================= */

/*
Stack of dealer search bars. The first row carries the "+"
button, every added row carries a "-" button in the same slot,
so the controls stay in one column.
*/

.search-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.search-row {
    display: flex;
    align-items: center;

    gap: 8px;
}

.search-row .search-box {
    min-width: 0;

    flex: 1 1 auto;
}

.search-row__button {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    padding: 0;

    color: var(--text-secondary);

    background: var(--surface);

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

    font-size: 17px;
    font-weight: 600;
    line-height: 1;

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

.search-row__button--add:hover:not(:disabled) {
    color: var(--primary);

    background: var(--primary-soft);

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

.search-row__button--remove:hover {
    color: var(--danger);

    background: var(--danger-soft);

    border-color: var(--danger-border);
}

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

.search-box {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
}

.search-box > svg {
    position: absolute;

    left: 11px;

    color: var(--text-muted);

    pointer-events: none;
}

.entity-search {
    min-height: 38px;

    padding: 9px 34px 9px 35px;

    color: var(--text);

    background: var(--surface);

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

    outline: none;

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

.entity-search::-webkit-search-cancel-button {
    display: none;
}

.entity-search:hover {
    border-color: var(--border-dark);
}

.entity-search:focus {
    border-color: #93c5fd;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.08);
}

.search-box__clear {
    position: absolute;

    right: 8px;

    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    padding: 0;

    color: var(--text-muted);

    background: transparent;

    border: 0;
    border-radius: 50%;

    font-size: 15px;
    line-height: 1;

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

.search-box__clear:hover {
    color: var(--text);

    background: var(--surface-muted);
}


/* =========================================================
   12. TABLE STATES
   ========================================================= */

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

    gap: 9px;

    min-height: 210px;

    padding: 30px;

    text-align: center;

    color: var(--text-muted);

    font-size: 11px;
}

.table-state p {
    margin: 0;
}

.table-state__icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 4px;

    color: var(--text-muted);

    background: var(--surface-soft);

    border-radius: 50%;
}

.table-state--empty {
    flex-direction: column;
}

.table-state--error {
    flex-direction: column;

    color: var(--danger);
}

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

    background: var(--danger-soft);

    font-size: 20px;
    font-weight: 700;
}

.table-state--loading {
    color: var(--text-muted);
}


/* =========================================================
   13. DATA TABLE
   ========================================================= */

/*
Both axes scroll inside the wrapper, which is what lets the
header, the totals row and the pinned columns stay put.
*/

.table-wrapper {
    width: 100%;

    max-height: min(66vh, 620px);

    overflow: auto;

    /* Establishes the containing block for sticky cells. */
    position: relative;
}

.data-table {
    width: 100%;

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

    table-layout: auto;

    font-size: 11px;
}

.data-table th,
.data-table td {
    padding: 11px 14px;

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

    text-align: left;

    vertical-align: middle;

    white-space: nowrap;
}

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

    color: var(--text-secondary);

    background: var(--surface-soft);

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

    text-transform: uppercase;
    letter-spacing: 0.06em;

    /*
    Collapsed borders do not paint on sticky cells, so the
    header rule is drawn with a shadow instead.
    */
    box-shadow: inset 0 -1px 0 var(--border);
}


/* =========================================================
   FROZEN COLUMNS

   Sr No. and the entity name pin left; Total pins right.
   Widths are explicit so the left offset of the second
   column is known.
   ========================================================= */

.col-index {
    width: 62px;
    min-width: 62px;

    color: var(--text-muted);

    text-align: right;
}

.col-entity {
    width: 250px;
    min-width: 250px;
    max-width: 250px;

    overflow: hidden;
    text-overflow: ellipsis;
}

.col-value {
    min-width: 152px;
}

.col-total {
    width: 180px;
    min-width: 180px;
}

.numeric-column {
    text-align: right;

    font-variant-numeric: tabular-nums;
}

/*
Each numeric cell holds a count and its market share. Pushing
them to opposite edges gives the column two readable rails - all
counts down the left, all shares down the right - without
doubling the number of columns.
*/

.data-table .cell-split {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.data-table .cell-amount {
    text-align: left;
}

.data-table .cell-share {
    color: var(--text-secondary);

    /* Slightly recessed, so the count stays the primary figure. */
    opacity: 0.95;

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

    font-variant-numeric: tabular-nums;

    text-align: right;
}

.sticky-left,
.sticky-right {
    position: sticky;
    z-index: 2;

    background: var(--surface);
}

.sticky-left--index {
    left: 0;
}

.sticky-left--entity {
    left: 62px;

    /* Separates the frozen block from the scrolling columns. */
    box-shadow: 1px 0 0 var(--border);
}

.sticky-right {
    right: 0;

    box-shadow: -1px 0 0 var(--border);
}

/*
Header and footer corners overlap both a sticky row and a
sticky column, so they need to win on both axes.
*/

.data-table thead th.sticky-left,
.data-table thead th.sticky-right,
.data-table tfoot th.sticky-left,
.data-table tfoot td.sticky-left,
.data-table tfoot td.sticky-right {
    z-index: 5;
}

.data-table thead th.sticky-left,
.data-table thead th.sticky-right {
    background: var(--surface-soft);
}

/*
Striped rows would otherwise show through the pinned cells,
so those repeat the row's own background.
*/

.data-table tbody tr:nth-child(odd) .sticky-left,
.data-table tbody tr:nth-child(odd) .sticky-right {
    background: var(--surface);
}

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

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

.data-table tbody td.col-total {
    color: var(--text);

    font-weight: 700;
}

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

    font-size: 11px;
}

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

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

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

.data-table tbody td:first-child {
    color: var(--text);

    font-weight: 600;
}

/*
The totals row pins to the bottom of the scroll area so it is
readable without scrolling to the last page of rows.
*/

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

    color: var(--text);

    background: var(--surface-soft);

    border-bottom: 0;

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

    box-shadow: inset 0 1px 0 var(--border);
}

.data-table tfoot td:not(.col-index) {
    text-align: right;
}

.data-table tfoot th.col-entity {
    text-align: left;

    color: var(--text);
}

.table-placeholder-row td {
    padding: 45px 18px;

    color: var(--text-light);

    text-align: center !important;
}


/* =========================================================
   TABLE SORTING
   ========================================================= */

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

    gap: 5px;

    padding: 0;

    color: inherit;

    background: transparent;

    border: 0;

    font: inherit;
    font-weight: inherit;

    text-align: inherit;
}

.table-sort-button:hover {
    color: var(--primary);
}

.table-sort-button:focus-visible {
    outline: 2px solid var(--primary);

    outline-offset: 3px;

    border-radius: 3px;
}

.sort-icon {
    color: var(--text-muted);

    font-size: 12px;

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

.table-sort-button:hover .sort-icon {
    color: var(--primary);
}

th[aria-sort="ascending"] .sort-icon,
th[aria-sort="descending"] .sort-icon {
    color: var(--primary);
}


/* =========================================================
   14. PAGINATION
   ========================================================= */

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

    gap: 15px;

    padding: 15px 18px;

    border-top:
        1px solid var(--border);

    background: var(--surface-soft);
}

.pagination__left,
.pagination__right {
    display: flex;
    align-items: center;

    gap: 8px;
}

.pagination label {
    color: var(--text-muted);

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

    white-space: nowrap;
}

#pageSizeSelect {
    width: 76px;

    min-height: 34px;

    padding: 6px 26px 6px 9px;

    color: var(--text);

    background: var(--surface);

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

    outline: none;

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

    font-size: 10px;
}

#pageSizeSelect:hover {
    border-color: var(--border-dark);
}

#pageSizeSelect:focus {
    border-color: #93c5fd;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.08);
}

.pagination-button {
    min-height: 34px;

    padding: 6px 12px;

    color: var(--text-secondary);

    background: var(--surface);

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

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

    font-size: 10px;
    font-weight: 600;

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

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

    background: var(--primary-soft);

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

.pagination-button:disabled {
    color: var(--text-light);

    background: var(--surface-muted);

    border-color: var(--border);

    opacity: 0.7;
}

.page-indicator {
    min-width: 90px;

    color: var(--text-muted);

    font-size: 10px;

    text-align: center;
}


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

@media (max-width: 1200px) {

    :root {
        --sidebar-width: 280px;
    }

    .dashboard-content {
        padding-left: 25px;
        padding-right: 25px;
    }

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


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --sidebar-width: 270px;
    }

    .dashboard-header {
        padding-left: 22px;
        padding-right: 22px;
    }

    .dashboard-content {
        padding: 24px 20px 32px;
    }

    .filter-sidebar {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* =========================================================
   MOBILE LAYOUT
   ========================================================= */

@media (max-width: 800px) {

    .dashboard-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        padding-top: 16px;
        padding-bottom: 16px;
    }

    .dashboard-header__meta {
        width: 100%;

        justify-content: flex-start;
    }

    .dashboard-layout {
        display: block;
    }

    /*
    Sidebar becomes a normal top filter panel.
    */

    .filter-sidebar {
        padding: 18px 16px 20px;

        border-right: 0;

        border-bottom:
            1px solid var(--sidebar-edge);
    }

    .filter-sidebar__header {
        margin-bottom: 15px;
    }

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

        gap: 12px;
    }

    /*
    Year stays full width; the dimension filters pair up.
    */

    .filter-form > .filter-group--dealer,
    .filter-form > .filter-group--rto,
    .filter-form > .filter-group--month,
    .filter-form > .filter-group--year,
    .filter-form > .filter-group--status,
    .filter-form > .filter-group--groupby {
        grid-column: auto;
    }

    .filter-form > .clear-filters-button {
        align-self: end;
    }

    .dashboard-content {
        padding: 20px 16px 30px;
    }
}


/* =========================================================
   SMALL TABLET / MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #dashboard-title {
        font-size: 21px;
    }

    .dashboard-header__subtitle {
        font-size: 10px;
    }

    .dashboard-header__meta {
        gap: 11px;
    }

    .unit-label {
        white-space: normal;
    }

    .filter-form {
        grid-template-columns: 1fr;
    }

    .filter-form > .filter-group--dealer,
    .filter-form > .filter-group--rto,
    .filter-form > .filter-group--month,
    .filter-form > .filter-group--year,
    .filter-form > .filter-group--status,
    .filter-form > .filter-group--groupby {
        grid-column: 1 / -1;
    }

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

    .section-heading h2 {
        font-size: 16px;
    }

    .table-toolbar {
        align-items: stretch;

        flex-direction: column;
    }

    .table-toolbar__left {
        width: 100%;
    }

    /* Too narrow for two stacks abreast - put them one above the other. */
    .toolbar-searches {
        flex-direction: column;
    }

    .search-list--rto {
        flex: 1 1 auto;
        width: 100%;
    }

    .table-toolbar__right {
        text-align: right;
    }

    .pagination {
        align-items: stretch;

        flex-direction: column;
    }

    .pagination__left,
    .pagination__right {
        justify-content: center;
    }

    .pagination__left {
        width: 100%;
    }

    #pageSizeSelect {
        width: 100px;
    }

    .active-filters {
        align-items: flex-start;
    }

    .error-banner {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .error-banner__retry {
        margin-left: 30px;
    }
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 480px) {

    .dashboard-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .dashboard-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .dashboard-header__meta {
        flex-wrap: wrap;
    }

    .data-period__divider {
        display: none;
    }

    .kpi-card {
        min-height: 115px;

        padding: 17px;
    }

    .table-card {
        border-radius: var(--radius-md);
    }

    .data-table {
        min-width: 580px;
    }

    .pagination {
        padding: 13px 15px;
    }
}


/* =========================================================
   16. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   17. HSRP ADDITIONS

   Everything above is the shared dashboard design system.
   This section only adds what HSRP needs and the vehicle
   dashboard did not: tinted KPI cards for the fixed/pending
   split, and the fitment-rate column with its meter.
   ========================================================= */


/* ---------------------------------------------------------
   17.1 KPI card tints

   The default card is blue. Fixed reads green and pending
   amber so the split is legible before the numbers are.
   --------------------------------------------------------- */

.kpi-card--success .kpi-card__icon {
    color: var(--success);
    background: var(--success-soft);
}

.kpi-card--success::after {
    background: var(--success-soft);
}

.kpi-card--warning .kpi-card__icon {
    color: var(--warning);
    background: var(--warning-soft);
}

.kpi-card--warning::after {
    background: var(--warning-soft);
}

.kpi-card__meta--warning {
    color: var(--warning);
}

.kpi-card__meta--muted {
    color: var(--text-muted);
}


/* ---------------------------------------------------------
   17.2 Fitment rate column

   A share cell prints count + % of column. A rate is a
   different quantity - fixed as a proportion of that row's
   own total - so it gets its own cell: the figure, with a
   meter under it for scanning down the column.
   --------------------------------------------------------- */

.col-rate {
    width: 118px;
    min-width: 118px;
}

.cell-rate {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 4px;
}

.cell-rate__value {
    color: var(--text);

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

    font-variant-numeric: tabular-nums;
}

.cell-rate__meter {
    position: relative;

    width: 100%;
    height: 4px;

    overflow: hidden;

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

.cell-rate__fill {
    position: absolute;
    inset: 0 auto 0 0;

    border-radius: 999px;

    background: var(--success);

    transition: width var(--transition-base);
}

/*
 * Anything under 90% fitment is the exception worth looking
 * at, so the meter shifts amber then red as it drops.
 */
.cell-rate__fill--mid {
    background: var(--warning);
}

.cell-rate__fill--low {
    background: var(--danger);
}

tfoot .cell-rate__value {
    font-weight: 700;
}


/* ---------------------------------------------------------
   17.3 Pending emphasis

   A zero pending count is the good case and should recede;
   a non-zero one should not.
   --------------------------------------------------------- */

.cell-amount--zero {
    color: var(--text-muted);
    font-weight: 500;
}

.cell-amount--alert {
    color: var(--danger);
}


/* ---------------------------------------------------------
   17.4 Group-by aware entity column

   Grouping by RTO or period yields far shorter labels than
   dealer names, so the sticky entity column narrows and the
   value columns get the room back.
   --------------------------------------------------------- */

.data-table--narrow-entity .col-entity {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}



/* =========================================================
   17. DEALER CHIPS + PER-DEALER TABLES

   Selecting dealers switches the view: instead of one list of
   every dealer, each selected dealer gets its own Year x Month
   table, stacked. Same surfaces, borders and cell treatment as
   the main table - only the axes change.
   ========================================================= */


/* ---------------------------------------------------------
   17.1 Selected-dealer chips, under the Dealer filter
   --------------------------------------------------------- */

.dealer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 9px;
}

.dealer-chips:empty {
    display: none;
}

.dealer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    max-width: 100%;

    padding: 4px 6px 4px 9px;

    color: var(--sidebar-text);
    background: var(--sidebar-hover);

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

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

.dealer-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    max-width: 180px;
}

.dealer-chip__remove {
    display: grid;
    place-items: center;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    padding: 0;

    color: var(--sidebar-muted);
    background: transparent;

    border: 0;
    border-radius: 50%;

    font-size: 13px;
    line-height: 1;
}

.dealer-chip__remove:hover {
    color: #ffffff;
    background: var(--danger);
}


/* ---------------------------------------------------------
   17.2 One card per selected dealer
   --------------------------------------------------------- */

.dealer-card {
    margin-bottom: 18px;
}

.dealer-card:last-child {
    margin-bottom: 0;
}

.dealer-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 6px;
}

.dealer-card__stat {
    color: var(--text-secondary);

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

.dealer-card__stat strong {
    color: var(--text);

    font-size: 12px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   17.3 The Year x Month grid

   Reuses .data-table, so rows, borders, sticky columns and the
   count-over-share cell all come from the main table. Only the
   column grouping is new.
   --------------------------------------------------------- */

.data-table .col-month {
    min-width: 132px;
}

.data-table thead .month-group {
    text-align: center;

    border-left: 1px solid var(--border);
}

.data-table thead .month-group:first-of-type {
    border-left: 0;
}

.data-table .col-year {
    width: 110px;
    min-width: 110px;
}


/*
 * The per-dealer table has no row-number column, so its sticky
 * entity column must pin to the very left. The shared rule
 * offsets it by 62px to clear the "#" column the main table has,
 * which here would slide it over the first month and hide those
 * figures underneath it.
 */
.dealer-card .sticky-left--entity {
    left: 0;
}


/* =========================================================
   18. REGISTRATION LOOKUP
   ========================================================= */

.reg-search {
    position: relative;

    display: flex;
    align-items: center;
    gap: 6px;
}

.reg-search input {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.reg-search input::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

.reg-search__button {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    padding: 0;

    color: #ffffff;
    background: var(--primary);

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

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

.reg-search__button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}


/* ---------------------------------------------------------
   18.1 The record table

   Shows the row exactly as it is stored, so every column is
   text and left aligned - the opposite of the numeric grids
   elsewhere. Only the month is transformed, from number to
   name.
   --------------------------------------------------------- */

.record-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

.record-table th,
.record-table td {
    padding: 10px 14px;

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

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

.record-table th {
    width: 210px;

    color: var(--text-secondary);
    background: var(--surface-soft);

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.06em;

    white-space: nowrap;
}

.record-table td {
    color: var(--text);
    font-weight: 500;
}

.record-table tr:last-child th,
.record-table tr:last-child td {
    border-bottom: 0;
}

.record-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 3px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;
}

.record-status--fixed {
    color: var(--success);
    background: var(--success-soft);
}

.record-status--pending {
    color: var(--warning);
    background: var(--warning-soft);
}

.record-empty {
    padding: 26px 18px;

    color: var(--text-secondary);

    font-size: 12px;

    text-align: center;
}

.record-empty strong {
    color: var(--text);
}