/* ============================================================================
   VehicleStats design system — refined "analytics product" aesthetic.
   Restraint over decoration: soft neutral surfaces, one confident accent,
   generous spacing, a clear type scale, layered soft shadows. Automotive
   signatures (number plate, instrument gauge) kept as focal moments, not
   wallpaper. Tokens + Bootstrap-variable retints cascade everywhere.
   ========================================================================== */
:root {
    /* Neutrals (slightly cool, near-black text — never pure #000) */
    --vs-ink: #101828;          /* headings / dark surfaces */
    --vs-ink-2: #1d2939;
    --vs-body: #344054;         /* body copy */
    --vs-muted: #667085;        /* secondary text */
    --vs-canvas: #f7f8fa;       /* page background */
    --vs-surface: #ffffff;      /* cards */
    --vs-line: #eaecf0;         /* hairline borders */
    --vs-line-2: #f2f4f7;

    /* One confident accent + semantic signals */
    --vs-primary: #2563eb;
    --vs-primary-d: #1d4ed8;
    --vs-primary-soft: #eff4ff;
    --vs-accent: #f59e0b;
    --vs-good: #079455;
    --vs-good-soft: #ecfdf3;
    --vs-warn: #b54708;
    --vs-warn-soft: #fffaeb;
    --vs-bad: #d92d20;
    --vs-bad-soft: #fef3f2;

    --vs-plate-yellow: #f6d213;
    --vs-plate-blue: #0a3aa0;

    /* Type */
    --vs-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

    /* Geometry + layered elevation */
    --vs-radius: 20px;
    --vs-radius-sm: 12px;
    --vs-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --vs-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --vs-shadow: 0 4px 8px -2px rgba(16, 24, 40, .06), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --vs-shadow-lg: 0 16px 28px -8px rgba(16, 24, 40, .12), 0 6px 12px -6px rgba(16, 24, 40, .06);

    /* Retint Bootstrap to the palette */
    --bs-body-bg: var(--vs-canvas);
    --bs-body-color: var(--vs-body);
    --bs-secondary-color: var(--vs-muted);
    --bs-emphasis-color: var(--vs-ink);
    --bs-heading-color: var(--vs-ink);
    --bs-border-color: var(--vs-line);
    --bs-border-radius: 1rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-border-radius-sm: .65rem;
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: var(--vs-primary);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--vs-primary-d);
    --bs-link-decoration: none;
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base typography ----------------------------------------------------- */
body {
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem; line-height: 1.6; color: var(--vs-body);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    color: var(--vs-ink); font-family: var(--vs-font-display);
    font-weight: 700; letter-spacing: -.025em; line-height: 1.12;
}
h1, .h1 { font-size: clamp(2.1rem, 7vw, 3.2rem); font-weight: 700; }
h2, .h2 { font-size: clamp(1.5rem, 4vw, 1.85rem); }
h3, .h3 { font-size: 1.35rem; }
.display-3, .display-4 { font-family: var(--vs-font-display); letter-spacing: -.03em; }
.lead { font-size: 1.18rem; line-height: 1.6; color: #475467; font-weight: 400; }
a { transition: color .12s ease; }
.text-muted { color: var(--vs-muted) !important; }
.vs-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.table td, .table th { font-variant-numeric: tabular-nums; }

/* ---- Content rhythm ------------------------------------------------------ */
main > .container { padding-top: 1.75rem; padding-bottom: 2rem; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    font-weight: 600; --bs-btn-border-radius: 12px;
    --bs-btn-padding-y: .62rem; --bs-btn-padding-x: 1.2rem;
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    transition: transform .08s ease, box-shadow .14s ease, background-color .12s ease;
}
.btn-sm { min-height: 36px; --bs-btn-border-radius: 9px; }
.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: 14px; min-height: 52px; }
.btn-primary {
    --bs-btn-bg: var(--vs-primary); --bs-btn-border-color: var(--vs-primary);
    --bs-btn-hover-bg: var(--vs-primary-d); --bs-btn-hover-border-color: var(--vs-primary-d);
    --bs-btn-active-bg: var(--vs-primary-d); --bs-btn-active-border-color: var(--vs-primary-d);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.btn-primary:hover { box-shadow: 0 4px 10px -2px rgba(37, 99, 235, .35); }
.btn-outline-primary {
    --bs-btn-color: var(--vs-primary); --bs-btn-border-color: #cdd9f5;
    --bs-btn-hover-bg: var(--vs-primary); --bs-btn-hover-border-color: var(--vs-primary);
}
.btn-outline-secondary { --bs-btn-color: var(--vs-body); --bs-btn-border-color: var(--vs-line); --bs-btn-hover-bg: var(--vs-ink); --bs-btn-hover-border-color: var(--vs-ink); }

/* ---- Cards --------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--vs-line);
    --bs-card-border-radius: var(--vs-radius);
    --bs-card-bg: var(--vs-surface);
    --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.5rem;
    box-shadow: var(--vs-shadow-xs);
}
a.card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--vs-shadow-lg); border-color: #cdd9f5; }

/* ---- Forms --------------------------------------------------------------- */
.form-control, .form-select {
    border-color: var(--vs-line); border-radius: var(--vs-radius-sm);
    padding: .7rem .95rem; min-height: 46px; font-size: 1rem; color: var(--vs-ink);
}
.form-control-lg { min-height: 54px; font-size: 1.05rem; }
.form-control:focus, .form-select:focus { border-color: #a9c2f6; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.form-label { font-weight: 600; color: var(--vs-ink); font-size: .9rem; margin-bottom: .35rem; }

/* ---- Tables (as dashboard panels) ---------------------------------------- */
.table { --bs-table-bg: transparent; vertical-align: middle; --bs-table-color: var(--vs-body); }
.table > thead th {
    text-transform: uppercase; font-size: .7rem; letter-spacing: .05em;
    color: var(--vs-muted); font-weight: 600; border-bottom: 1px solid var(--vs-line);
    background: var(--vs-line-2); padding-top: .8rem; padding-bottom: .8rem;
}
.table > tbody > tr > * { border-color: var(--vs-line); padding-top: .8rem; padding-bottom: .8rem; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f7faff; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #fbfcfe; }
.table-responsive {
    background: var(--vs-surface); border: 1px solid var(--vs-line);
    border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-xs); overflow: auto;
}
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table > :is(thead, tbody) > tr > :first-child { padding-left: 1.25rem; }
.table-responsive > .table > :is(thead, tbody) > tr > :last-child { padding-right: 1.25rem; }

/* ---- Badges -------------------------------------------------------------- */
.badge { font-weight: 600; border-radius: 999px; padding: .4em .75em; letter-spacing: .01em; }
.text-bg-primary { background-color: var(--vs-primary) !important; }

/* ---- Breadcrumb ---------------------------------------------------------- */
.breadcrumb { --bs-breadcrumb-divider-color: #98a2b3; font-size: .85rem; margin-bottom: 1.25rem; }
.breadcrumb-item.active { color: var(--vs-muted); }
.breadcrumb a { color: var(--vs-muted); }
.breadcrumb a:hover { color: var(--vs-primary); }

/* ---- Brand --------------------------------------------------------------- */
.vs-brand { font-family: var(--vs-font-display); font-weight: 700; letter-spacing: -.04em; color: var(--vs-ink); }
.vs-brand .vs-brand-stat { color: var(--vs-primary); }

/* ---- Section heading (clean: type-led, subtle marker, no heavy bar) ------ */
.vs-section-title { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--vs-ink); margin: 2.5rem 0 1.1rem; }
.vs-section-title > .bi { color: var(--vs-primary); font-size: 1.05em; }

/* ---- Report jump bar (horizontal-scroll section chips) ------------------- */
.vs-jumpbar {
    display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 0 1.75rem; padding: .7rem 0;
    background: rgba(247, 248, 250, .9); backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--vs-line);
}
.vs-jumpbar::-webkit-scrollbar { display: none; }
.vs-jump {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 999px; white-space: nowrap;
    background: var(--vs-surface); border: 1px solid var(--vs-line);
    color: var(--vs-body); font-weight: 600; font-size: .85rem; text-decoration: none;
    box-shadow: var(--vs-shadow-xs); transition: color .12s ease, border-color .12s ease, transform .08s ease;
}
.vs-jump:hover, .vs-jump:focus-visible { color: var(--vs-primary); border-color: #cdd9f5; }
.vs-jump:active { transform: translateY(1px); }
.vs-jump > .bi { color: var(--vs-muted); }
.vs-jump:hover > .bi { color: var(--vs-primary); }
.vs-jump-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px;
    background: var(--vs-line-2); color: var(--vs-muted);
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vs-jump-n.is-bad  { background: var(--vs-bad-soft);  color: var(--vs-bad); }
.vs-jump-n.is-warn { background: var(--vs-warn-soft); color: var(--vs-warn); }
/* Land jumps below the sticky shell nav, not under it. */
#pass-rate, #Percentage_Faults, #Faults_By_Time, #Recurring_Faults, #Advisory,
#Dangerous, #Fail, #Major, #Minor, #PassWithRectification, #UserEntered, #mot-history {
    scroll-margin-top: 4.75rem;
}

/* ---- Number plate -------------------------------------------------------- */
.vs-plate {
    display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 9px;
    border: 1.5px solid rgba(0, 0, 0, .55); background: var(--vs-plate-yellow);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25), inset 0 0 0 1.5px rgba(255, 255, 255, .25);
    font-weight: 800; line-height: 1;
}
.vs-plate .vs-plate-gb { background: var(--vs-plate-blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .4rem .55rem; font-size: .68em; }
.vs-plate .vs-plate-reg {
    color: #111; padding: .4rem .85rem; font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .06em; white-space: nowrap; font-size: clamp(1.5rem, 4.2vw, 2.5rem); display: flex; align-items: center;
}

/* ---- Report hero (focal dark surface) ------------------------------------ */
.vs-report-hero {
    position: relative; overflow: hidden; color: #e2e8f0; border-radius: var(--vs-radius);
    padding: clamp(1.5rem, 5vw, 2.5rem);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .5);
}
.vs-report-hero h1, .vs-report-hero h2, .vs-report-hero h3 { color: #fff; }
.vs-report-hero .text-muted, .vs-report-hero .small { color: #c7d2fe !important; }
.vs-report-hero a { color: #e0e7ff; }

/* ---- Stat cards ---------------------------------------------------------- */
.vs-stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .vs-stat-grid { grid-template-columns: repeat(4, 1fr); } }
.vs-stat { background: var(--vs-surface); border: 1px solid var(--vs-line); border-radius: var(--vs-radius); padding: 1.25rem; text-align: center; box-shadow: var(--vs-shadow-xs); }
.vs-stat .vs-stat-value { font-family: var(--vs-font-display); font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--vs-ink); letter-spacing: -.03em; }
.vs-stat .vs-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vs-muted); margin-top: .4rem; font-weight: 600; }
.vs-stat.is-good .vs-stat-value { color: var(--vs-good); }
.vs-stat.is-warn .vs-stat-value { color: var(--vs-warn); }
.vs-stat.is-bad  .vs-stat-value { color: var(--vs-bad); }

/* ---- Instrument gauge ---------------------------------------------------- */
.vs-gauge { position: relative; width: 100%; max-width: 230px; margin: 0 auto; }
.vs-gauge svg { width: 100%; height: auto; display: block; }
.vs-gauge .vs-gauge-track { stroke: rgba(255, 255, 255, .18); }
.vs-gauge-num { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; line-height: 1; }
.vs-gauge-num .vs-gauge-score { font-family: var(--vs-font-display); font-size: 3rem; font-weight: 700; letter-spacing: -.04em; }
.vs-gauge-num .vs-gauge-of { font-size: .8rem; opacity: .65; }
.vs-good-t { color: #47d38a !important; }
.vs-warn-t { color: #ffc83d !important; }
.vs-bad-t  { color: #ff7a73 !important; }

/* ---- Comparison bars ----------------------------------------------------- */
.vs-bar { height: 18px; border-radius: 9px; background: var(--vs-line-2); overflow: hidden; }
.vs-bar > span { display: block; height: 100%; border-radius: 9px; }

/* ---- Trust strip --------------------------------------------------------- */
.vs-trust {
    display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center;
    background: var(--vs-surface); border: 1px solid var(--vs-line); border-radius: var(--vs-radius);
    padding: .9rem 1.25rem; box-shadow: var(--vs-shadow-xs); font-size: .875rem; color: var(--vs-muted);
}
.vs-trust strong { color: var(--vs-ink); font-variant-numeric: tabular-nums; }
.vs-trust .vs-trust-item { display: inline-flex; align-items: center; gap: .45rem; }
.vs-trust .vs-trust-item > .bi { color: var(--vs-primary); }
.vs-trust .vs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vs-good); display: inline-block; }

/* ---- Icons --------------------------------------------------------------- */
.bi { vertical-align: -.125em; }
.vs-feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 12px; font-size: 1.35rem; flex: 0 0 auto;
    background: var(--vs-primary-soft); color: var(--vs-primary);
}
.vs-feature-icon.is-good { background: var(--vs-good-soft); color: var(--vs-good); }
.vs-feature-icon.is-bad  { background: var(--vs-bad-soft); color: var(--vs-bad); }
.vs-feature-icon.is-warn { background: var(--vs-warn-soft); color: var(--vs-warn); }
.vs-feature-icon.is-ink  { background: #f2f4f7; color: var(--vs-ink); }
.vs-icon-list { list-style: none; padding-left: 0; }
.vs-icon-list > li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.vs-icon-list > li > .bi { position: absolute; left: 0; top: .2rem; color: var(--vs-primary); }

/* ---- App shell: navigation ----------------------------------------------- */
.vs-nav {
    background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--vs-line);
    padding-top: .65rem; padding-bottom: .65rem;
}
.vs-nav .navbar-brand { font-size: 1.3rem; }
.vs-nav .nav-link { color: var(--vs-muted); font-weight: 600; font-size: .94rem; padding-inline: .9rem; border-radius: 8px; }
.vs-nav .nav-link:hover, .vs-nav .nav-link:focus { color: var(--vs-ink); }
.vs-nav .nav-link.active { color: var(--vs-primary); }
.vs-nav .navbar-toggler { border: 0; padding: .25rem .4rem; }
.vs-nav .navbar-toggler:focus { box-shadow: none; }
.vs-nav .nav-cta { color: #fff !important; background: var(--vs-primary); padding: .5rem 1.15rem !important; border-radius: 999px; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.vs-nav .nav-cta:hover { background: var(--vs-primary-d) !important; }
.offcanvas .vs-brand { font-size: 1.2rem; }

/* ---- App shell: footer --------------------------------------------------- */
.vs-footer { background: var(--vs-ink); color: #98a8bd; margin-top: 4rem; padding: 3rem 0 1.75rem; }
.vs-footer a { color: #c3d2e2; text-decoration: none; }
.vs-footer a:hover { color: #fff; }
.vs-footer h3 { color: #fff; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; font-weight: 600; }
.vs-footer .vs-brand { color: #fff; font-size: 1.35rem; }
.vs-footer ul { list-style: none; padding: 0; margin: 0; }
.vs-footer li { margin-bottom: .6rem; font-size: .92rem; }
.vs-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.25rem; padding-top: 1.5rem; font-size: .84rem; color: #7d8da3; }
.vs-footer .vs-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: #c3d2e2; cursor: pointer; }
.vs-footer .vs-linkbtn:hover { color: #fff; text-decoration: underline; }

/* ---- Skip-to-content link (accessibility: bypass blocks) ----------------- */
.vs-skip {
    position: absolute; left: -999px; top: 0; z-index: 2000;
    background: var(--vs-primary); color: #fff; padding: .6rem 1rem;
    border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.vs-skip:focus { left: 0; }

/* ---- Search + single/compare toggle -------------------------------------- */
.vs-search-card { background: var(--vs-surface); border-radius: var(--vs-radius); padding: 1.25rem; box-shadow: var(--vs-shadow-lg); border: 1px solid var(--vs-line); }
.vs-toggle { display: inline-flex; background: #eef1f6; border-radius: 999px; padding: .25rem; margin-bottom: 1rem; }
.vs-toggle .btn-check + label { border: 0; border-radius: 999px; color: var(--vs-muted); font-weight: 600; padding: .45rem 1.15rem; font-size: .9rem; cursor: pointer; transition: all .12s ease; }
.vs-toggle .btn-check:checked + label { background: #fff; color: var(--vs-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.vs-search-card input.form-control { border-radius: var(--vs-radius-sm); }
.vs-reg-input { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-family: "Arial Narrow", Arial, sans-serif; }

/* ---- Highcharts containers ----------------------------------------------- */
.highcharts-figure, #chart-container, .percentage-pass-fail-pie { width: 100%; }