/* =========================================================
   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 was the decoration this header used to
   carry. It is a button now - see .filter-sidebar__toggle at the
   end of this file. */

.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);
}


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

   The layout follows the Vehicle Analytics login so the two
   products feel related, but every colour, radius and shadow
   here is an HSRP token - nothing is borrowed from that
   stylesheet.

   Own .auth-* namespace, so none of the dashboard's rules are
   touched and this section can be lifted out whole.
   ========================================================= */

.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;
}


/* ---- the brand line above the card ---- */

.auth-card__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    margin-bottom: 20px;
}

.auth-card__mark {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

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

    color: #ffffff;
}

.auth-card__wordmark {
    color: var(--text);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.auth-card__product {
    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
}


/* ---- the card ---- */

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

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

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


/* ---- Log in / Create login ---- */

.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: var(--radius-sm);

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

    cursor: pointer;

    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(--primary);
}

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


/* ---- notices and errors ----
   Two different boxes on purpose: "your session ended" is
   information and should not look like something broke. */

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

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

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

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

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

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


/* ---- the forms ---- */

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

    margin-top: 22px;
}

.auth-form__intro h1 {
    color: var(--text);

    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-dark);
    border-radius: var(--radius-sm);

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

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

.auth-field input::placeholder {
    color: var(--text-muted);
}

.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);
}

.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: #92400e;
    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: "\2713";
    font-weight: 700;
}

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

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


/* ---- show / hide password ---- */

.auth-password {
    position: relative;
}

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

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

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

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

    color: var(--text-muted);

    cursor: pointer;
}

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


/* ---- the live password checklist ---- */

.auth-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;

    margin: 0;
    padding: 0;
    list-style: none;

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

.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: "\2713";

    width: auto;
    height: auto;
    border: 0;

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

/* Only after a submit attempt does an unmet rule turn red -
   before that it is a checklist, not a complaint. */
.auth-rules.is-checked li:not(.is-met) {
    color: var(--danger);
}


/* ---- the button ---- */

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

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

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

    cursor: pointer;

    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;
    }
}


/* ---- who is logged in, and the way out ----
   Lives in the dashboard header, beside the data-period block. */

.session {
    display: flex;
    align-items: center;
    gap: 10px;
}

.session__user {
    color: var(--text-secondary);

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

    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session__logout {
    padding: 7px 13px;

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

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

    cursor: pointer;

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

.session__logout:hover {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

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

/* On a narrow screen the name is the first thing to go - the
   button has to stay reachable, the name is only a reminder. */
@media (max-width: 700px) {
    .session__user {
        display: none;
    }
}


/* When the server has sign-up closed there is only one tab, so the
   two-column strip would leave a conspicuous empty half. */

.auth-tabs--single {
    grid-template-columns: 1fr;
}

/* While we are still asking the server, keep the strip the right
   height so the card does not jump once the answer arrives. */
.auth-tabs--checking {
    min-height: 48px;
}


/* =========================================================
   THE 360 DEGREE VEHICLE VIEW

   Four sources merged into one record. The point of the
   styling is that you can always tell which source a value
   came from, and tell a value we do not have from a value
   that is genuinely blank.
   ========================================================= */

/* ---- the merged profile ---- */

.vehicle360-profile td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.vehicle360-value {
    color: var(--text);
    font-weight: 600;
}

/* Quiet, because it is a footnote on the value rather than
   part of it - but always present, because a value whose
   origin is unknown is worth less than one you can trace. */
.vehicle360-source {
    padding: 2px 7px;

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

    border-radius: 999px;

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

    white-space: nowrap;
}

/* "not in our data" rather than a dash: the two mean very
   different things to someone deciding whether to call a
   customer, and a dash reads as "none". */
.vehicle360-missing {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

.vehicle360-row--missing th {
    color: var(--text-muted);
}

/* ---- the service history ---- */

.vehicle360-visits {
    padding: 4px 20px 18px;

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

.vehicle360-visit {
    padding: 12px 14px;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
}

.vehicle360-visit__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
}

.vehicle360-visit__date {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.vehicle360-visit__type {
    color: var(--primary-dark);
    background: var(--primary-soft);

    padding: 2px 9px;
    border-radius: 999px;

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

.vehicle360-visit__km,
.vehicle360-visit__cost {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

/* Pushed to the right so the eye can run down the costs of a
   service history without reading anything else. */
.vehicle360-visit__cost {
    margin-left: auto;
    color: var(--text);
}

.vehicle360-visit__meta {
    margin-top: 6px;

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

.vehicle360-visit__complaint {
    margin-top: 6px;

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

/* ---- the parts and labour behind each visit ---- */

.vehicle360-items {
    margin-top: 8px;
}

.vehicle360-items summary {
    color: var(--primary);

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

    cursor: pointer;
    user-select: none;
}

.vehicle360-items summary:hover {
    color: var(--primary-dark);
}

.vehicle360-items__list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;

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

.vehicle360-items__list li {
    display: flex;
    align-items: baseline;
    gap: 10px;

    padding: 5px 8px;

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

    font-size: 11px;
}

.vehicle360-item__name {
    flex: 1 1 auto;
    color: var(--text);
}

.vehicle360-item__amount {
    color: var(--text);
    font-weight: 600;
}

.vehicle360-item__type {
    padding: 1px 6px;

    color: var(--text-muted);
    background: var(--surface-muted);

    border-radius: 4px;
    font-size: 10px;
}

/* ---- the fitment table ---- */

.vehicle360-fitments th {
    width: auto;
}

.vehicle360-note {
    margin: 0;
    padding: 0 20px 18px;

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

/* On a phone the label column cannot hold 210px and leave
   room for an address. */
@media (max-width: 640px) {

    .record-table th {
        width: 120px;
    }

    .vehicle360-visit__cost {
        margin-left: 0;
    }
}


/* =========================================================
   OPENING AND CLOSING THE FILTER PANEL

   The filters take a 300px column on a desktop and the whole
   top of a phone screen. Once they are set, that space is
   better spent on the results.
   ========================================================= */

/* The header icon, now a button. Same 34px square it was as a
   decoration, widened to hold the chevron. */
.filter-sidebar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    height: 34px;
    padding: 0 7px;

    color: var(--sidebar-accent);
    background: rgba(37, 99, 235, 0.14);

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

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.filter-sidebar__toggle:hover {
    color: #ffffff;
    background: rgba(37, 99, 235, 0.3);
    border-color: rgba(96, 165, 250, 0.4);
}

/* A visible ring: this is the one control in the dark panel
   that a keyboard user has to be able to find. */
.filter-sidebar__toggle:focus-visible {
    outline: 2px solid var(--sidebar-accent);
    outline-offset: 2px;
}

.filter-sidebar__chevron {
    transition: transform 0.2s ease;
}

/* Points at the panel it would close; flips to point away when
   closed, so the direction always means "this way to the
   filters". */
.dashboard-layout--filters-collapsed .filter-sidebar__chevron {
    transform: rotate(180deg);
}


/* ---- closed, on a desktop ---- */

.dashboard-layout {
    transition: grid-template-columns 0.2s ease;
}

.dashboard-layout--filters-collapsed {
    grid-template-columns: auto minmax(0, 1fr);
}

.dashboard-layout--filters-collapsed .filter-sidebar {
    padding-left: 12px;
    padding-right: 12px;
}

/* The heading goes, the button stays. Nothing else is left to
   centre it against. */
.dashboard-layout--filters-collapsed .filter-sidebar__header {
    justify-content: center;

    margin-bottom: 0;
    padding-bottom: 0;

    border-bottom: 0;
}

.dashboard-layout--filters-collapsed .filter-sidebar__header > div {
    display: none;
}


/* ---- closed, on a phone ---- */
/* The layout is a single column here, so closing is about height
   rather than width: the header line stays, the fields go. */

@media (max-width: 800px) {

    .dashboard-layout--filters-collapsed {
        grid-template-columns: none;
    }

    .dashboard-layout--filters-collapsed .filter-sidebar {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Keep "Filters" visible: with the panel closed and the
       heading gone, a lone icon on a wide dark strip does not
       say what it opens. */
    .dashboard-layout--filters-collapsed .filter-sidebar__header {
        justify-content: space-between;
    }

    .dashboard-layout--filters-collapsed .filter-sidebar__header > div {
        display: block;
    }
}


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

    .dashboard-layout,
    .filter-sidebar__chevron,
    .filter-sidebar__toggle {
        transition: none;
    }
}


/* ============================================================
   ONE SEARCH BOX - choosing between matches, and the person view

   The box takes a plate, a mobile number, a chassis number or a
   name, so three things needed somewhere to live: a list when the
   answer is ambiguous, a plain statement when there is no answer,
   and a person's record - which is not a vehicle record turned
   around, because a person can hold several vehicles and that is
   usually the interesting part.
   ============================================================ */

.search-result {
    padding: 20px 22px;

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

.search-result__head h2,
.search-result h2 {
    margin: 0 0 6px;

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

.search-result p {
    margin: 0 0 4px;

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

/* A footnote, not an instruction - it explains why the list looks
   the way it does rather than telling somebody off. */
.search-result__note {
    font-size: 12px;
    color: var(--text-secondary);
}

.search-choices {
    margin: 12px 0 0;
    padding: 0;

    list-style: none;

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

/* A whole row is the target, not a link buried in it: this gets
   used at a counter, in a hurry, sometimes on a phone. */
.search-choice {
    width: 100%;
    padding: 10px 12px;

    display: flex;
    flex-direction: column;
    gap: 2px;

    text-align: left;

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

    cursor: pointer;

    transition: background 120ms ease, border-color 120ms ease;
}

.search-choice:hover,
.search-choice:focus-visible {
    background: var(--surface);
    border-color: var(--accent, #4b7bec);
}

.search-choice__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

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

/* The person view reuses the vehicle view's table and source chips
   so the two read as the same system. Only the section headings
   needed anything of their own. */
.vehicle360__section {
    margin: 22px 0 8px;

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

@media (max-width: 640px) {

    .search-result {
        padding: 16px 14px;
    }

    .search-choice {
        padding: 12px;
    }
}

/* ============================================================
   BUILD A LIST

   Deliberately plain. The builder's job is to make a question
   legible while it is still wrong, so the count is the loudest
   thing on it and everything else gets out of the way.
   ============================================================ */

.segment {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e8ef);
    border-radius: 12px;
    padding: 20px 22px 24px;
}

.segment__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.segment__match {
    margin: 2px 0;
    color: var(--muted, #5b6472);
    font-size: 0.9rem;
}

.segment__rows { margin: 14px 0 8px; }

.segment__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--border-soft, #f0f3f7);
}
.segment__row:first-child { border-top: 0; }

.segment__select,
.segment__value {
    font: inherit;
    font-size: 0.9rem;
    padding: 7px 10px;
    border: 1px solid var(--border, #d7dee8);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    max-width: 100%;
}

.segment__select--field { min-width: 190px; }
.segment__select--op    { min-width: 150px; }
.segment__value         { min-width: 150px; }
.segment__value--wide   { min-width: 280px; flex: 1 1 280px; }

.segment__and {
    color: var(--muted, #5b6472);
    font-size: 0.85rem;
}

.segment__remove {
    margin-left: auto;
    font: inherit;
    font-size: 0.82rem;
    color: var(--muted, #5b6472);
    background: none;
    border: 0;
    padding: 6px 4px;
    cursor: pointer;
    text-decoration: underline;
}
.segment__remove:hover { color: #b4232a; }

.segment__name { min-width: 220px; flex: 1 1 220px; }

.segment__saved {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}
.segment__saved-label {
    font-size: 0.82rem;
    color: var(--muted, #5b6472);
    margin-right: 2px;
}
.segment__saved-item {
    font: inherit;
    font-size: 0.82rem;
    padding: 5px 10px;
    border: 1px solid var(--border, #d7dee8);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}
.segment__saved-item:hover { border-color: var(--accent, #2563eb); }
.segment__saved-remove {
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    padding: 5px 6px;
    margin-left: -4px;
    border: 0;
    background: none;
    color: var(--muted, #5b6472);
    cursor: pointer;
}
.segment__saved-remove:hover { color: #b4232a; }

.segment__result--saved {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a7f37;
}

.segment__coverage {
    font-size: 0.78rem;
    color: var(--muted, #5b6472);
}
/*  Not an alarm. A filter with nothing behind it today may be full
    tomorrow; this only stops somebody concluding the system is
    broken when it returns nothing. */
.segment__coverage--none {
    color: #9a6700;
}

.segment__hint {
    font-size: 0.78rem;
    color: var(--muted, #5b6472);
}

.segment__foot { display: flex; gap: 10px; margin-top: 6px; }

.segment__add,
.segment__show {
    font: inherit;
    font-size: 0.88rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--border, #d7dee8);
    background: #fff;
}
.segment__show {
    border-color: transparent;
    background: var(--accent, #2563eb);
    color: #fff;
    font-weight: 600;
}

/*  The number is the point of the screen. */
.segment__result {
    margin-top: 18px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.segment__result--empty,
.segment__result--busy {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted, #5b6472);
}
/*  A refusal is written for a person - "between needs two values" -
    so it is shown as a sentence, not as an alarm. */
.segment__result--error {
    font-size: 0.9rem;
    font-weight: 500;
    color: #b4232a;
}

.segment__subtitle {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 20px 0 8px;
}

.segment__note {
    font-size: 0.82rem;
    color: var(--muted, #5b6472);
    margin: 10px 0 0;
}

@media (max-width: 760px) {
    .segment__row { align-items: stretch; flex-direction: column; }
    .segment__remove { margin-left: 0; text-align: left; }
    .segment__select--field,
    .segment__select--op,
    .segment__value { min-width: 0; width: 100%; }
}

/* ============================================================
   THE COUNTER

   Somebody is standing with a customer in front of them. Big
   boxes, one obvious button, and the answer in a sentence - not a
   dense form that rewards study.
   ============================================================ */

.counter {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e8ef);
    border-radius: 12px;
    padding: 20px 22px 24px;
}

.counter__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.counter__note {
    margin: 0 0 16px;
    color: var(--muted, #5b6472);
    font-size: 0.88rem;
}

.counter__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 16px;
    align-items: end;
}

/*  The name gets the full width: it is the only one that must be
    filled in, and putting it beside an optional box makes them
    look equally important. */
.counter__field:first-child { grid-column: 1 / -1; }

.counter__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.counter__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted, #5b6472);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.counter__required { color: #b4232a; }

.counter__input {
    font: inherit;
    font-size: 0.95rem;
    padding: 10px 12px;
    border: 1px solid var(--border, #d7dee8);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    width: 100%;
}
.counter__input:focus {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 1px;
}

.counter__actions { grid-column: 1 / -1; }

.counter__save {
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--accent, #2563eb);
    color: #fff;
    cursor: pointer;
}
.counter__save[disabled] { opacity: 0.55; cursor: default; }

.counter__said {
    margin: 14px 0 0;
    font-size: 0.9rem;
    min-height: 1.2em;
    color: var(--muted, #5b6472);
}
.counter__said--good  { color: #1a7f37; font-weight: 600; }
.counter__said--error { color: #b4232a; font-weight: 600; }


/* ---- taking a number on the record itself ---- */

.person360__take {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0 4px;
    padding: 12px 14px;
    border: 1px dashed var(--border, #d7dee8);
    border-radius: 10px;
}

.person360__take-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted, #5b6472);
}

/*  A mark beside a value saying another one is on file. Not an
    alarm - a disagreement between two sources is ordinary, and the
    point is that both were kept. */
/*  A value we hold and this account may not see. Deliberately
    quiet: it is not an error, and the person reading it has not
    done anything wrong. */
.vehicle360-hidden {
    font-style: italic;
    color: var(--muted, #5b6472);
    cursor: help;
}
.vehicle360-row--hidden th { opacity: 0.75; }

.vehicle360-contested {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #9a6700;
    background: #fff8e1;
    border: 1px solid #f0e0b0;
    cursor: help;
}

.counter__inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.counter__input--inline {
    width: auto;
    min-width: 190px;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.counter__save--inline {
    padding: 8px 16px;
    font-size: 0.88rem;
}

.counter__said--inline { margin: 0; font-size: 0.85rem; }

@media (max-width: 620px) {
    .counter__form { grid-template-columns: 1fr; }
    .counter__input--inline { width: 100%; }
}

/* ============================================================
   RECORDS TO CHECK

   Two records side by side and two buttons. The whole design
   question is making the differences findable in a second: on a
   pair that shares a telephone number, the eye needs to go
   straight to what is NOT the same.
   ============================================================ */

.review {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e8ef);
    border-radius: 12px;
    padding: 20px 22px 24px;
}

.review__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.review__note {
    margin: 0 0 16px;
    color: var(--muted, #5b6472);
    font-size: 0.9rem;
}
.review__note--good  { color: #1a7f37; font-weight: 600; }
.review__note--error { color: #b4232a; font-weight: 600; }

.review__pair {
    border: 1px solid var(--border, #e3e8ef);
    border-radius: 10px;
    padding: 14px 16px 12px;
    margin-bottom: 14px;
    transition: opacity 0.4s ease;
}
.review__pair--done { opacity: 0.4; }

.review__why {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--muted, #5b6472);
}
.review__score { font-variant-numeric: tabular-nums; opacity: 0.7; }

.review__pairsides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.review__side {
    background: var(--surface-soft, #f8fafc);
    border-radius: 8px;
    padding: 12px 14px;
}

.review__name {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.review__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    margin: 0;
    font-size: 0.85rem;
}
.review__facts dt {
    color: var(--muted, #5b6472);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 2px;
}
.review__facts dd { margin: 0; word-break: break-word; }

/*  The whole job of this screen: show where they differ. */
.review__differs {
    background: #fff8e1;
    border-bottom: 2px solid #f0c674;
    padding: 0 3px;
    font-weight: 600;
}

.review__hidden { font-style: italic; color: var(--muted, #5b6472); }

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

.review__same,
.review__two {
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--border, #d7dee8);
    background: #fff;
}
/*  Merging is the irreversible-feeling one, so it does not get the
    bright button. Both are undoable - a merge tombstones rather
    than deletes - but the button should not encourage a guess. */
.review__two  { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.review__same:hover { border-color: #1a7f37; color: #1a7f37; }
.review__same[disabled], .review__two[disabled] { opacity: 0.5; cursor: default; }

.review__said { font-size: 0.85rem; color: var(--muted, #5b6472); }
.review__said--good  { color: #1a7f37; font-weight: 600; }
.review__said--error { color: #b4232a; font-weight: 600; }

.review__subtitle {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 24px 0 8px;
}

.review__row--failed td { color: #b4232a; }

@media (max-width: 760px) {
    .review__pairsides { grid-template-columns: 1fr; }
}