/* Garage – flat theme on top of Bootstrap 5.3.
   Colours live in --g-* tokens per theme; Bootstrap's own variables and the component
   variables below point at them, so every page follows the light/dark switch. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lib/barlow/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lib/barlow/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../lib/barlow/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../lib/barlow/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/barlow/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/barlow/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../lib/barlow/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../lib/barlow/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/barlow/barlowsemicondensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/barlow/barlowsemicondensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../lib/barlow/barlowsemicondensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../lib/barlow/barlowsemicondensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */

:root,
[data-bs-theme=light] {
    --g-canvas: #eef1f2;
    --g-surface: #ffffff;
    --g-sunken: #f5f7f8;
    --g-line: #d9dfe2;
    --g-line-strong: #c3ccd1;
    --g-ink: #16212a;
    --g-muted: #5b6b76;
    --g-primary: #0b6e74;
    --g-primary-rgb: 11, 110, 116;
    --g-primary-hover: #085a5f;
    --g-on-primary: #ffffff;
    --g-primary-soft: #dcecec;
    --g-signal: #f2a900;
    --g-hover: #e6eaec;
    --g-dot: rgba(22, 33, 42, 0.11);

    --bs-body-bg: var(--g-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--g-ink);
    --bs-body-color-rgb: 22, 33, 42;
    --bs-emphasis-color: #0a1117;
    --bs-emphasis-color-rgb: 10, 17, 23;
    --bs-secondary-color: var(--g-muted);
    --bs-secondary-color-rgb: 91, 107, 118;
    --bs-secondary-bg: var(--g-hover);
    --bs-tertiary-bg: var(--g-sunken);
    --bs-tertiary-color: #7b8a94;
    --bs-heading-color: var(--g-ink);
    --bs-border-color: var(--g-line);
    --bs-border-color-translucent: rgba(22, 33, 42, 0.12);
    --bs-primary: var(--g-primary);
    --bs-primary-rgb: var(--g-primary-rgb);
    --bs-primary-text-emphasis: #064448;
    --bs-primary-bg-subtle: var(--g-primary-soft);
    --bs-primary-border-subtle: #a9d0d1;
    --bs-link-color: var(--g-primary);
    --bs-link-color-rgb: var(--g-primary-rgb);
    --bs-link-hover-color: var(--g-primary-hover);
    --bs-link-hover-color-rgb: 8, 90, 95;
    --bs-focus-ring-color: rgba(var(--g-primary-rgb), 0.3);
    --bs-form-valid-color: #1f7a3d;
    --bs-form-invalid-color: #c23a2b;
    --bs-form-invalid-border-color: #c23a2b;
    --bs-danger: #c23a2b;
    --bs-danger-rgb: 194, 58, 43;
    --bs-danger-text-emphasis: #8a2419;
    --bs-danger-bg-subtle: #f8e1de;
    --bs-success-text-emphasis: #175c2e;
    --bs-success-bg-subtle: #dcefe2;
    --bs-warning-text-emphasis: #6b4a00;
    --bs-warning-bg-subtle: #fcefc8;
    --bs-info-text-emphasis: #0d4a63;
    --bs-info-bg-subtle: #dceef5;
}

[data-bs-theme=dark] {
    --g-canvas: #0e1316;
    --g-surface: #161d21;
    --g-sunken: #12181b;
    --g-line: #29343a;
    --g-line-strong: #3a474e;
    --g-ink: #e4eaed;
    --g-muted: #93a3ad;
    --g-primary: #35abad;
    --g-primary-rgb: 53, 171, 173;
    --g-primary-hover: #4cc0c2;
    --g-on-primary: #061a1b;
    --g-primary-soft: #173638;
    --g-signal: #f5b921;
    --g-hover: #1e272c;
    --g-dot: rgba(228, 234, 237, 0.07);

    --bs-body-bg: var(--g-surface);
    --bs-body-bg-rgb: 22, 29, 33;
    --bs-body-color: var(--g-ink);
    --bs-body-color-rgb: 228, 234, 237;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--g-muted);
    --bs-secondary-color-rgb: 147, 163, 173;
    --bs-secondary-bg: var(--g-hover);
    --bs-tertiary-bg: var(--g-sunken);
    --bs-tertiary-color: #6f7f89;
    --bs-heading-color: var(--g-ink);
    --bs-border-color: var(--g-line);
    --bs-border-color-translucent: rgba(228, 234, 237, 0.12);
    --bs-primary: var(--g-primary);
    --bs-primary-rgb: var(--g-primary-rgb);
    --bs-primary-text-emphasis: #8fd6d7;
    --bs-primary-bg-subtle: var(--g-primary-soft);
    --bs-primary-border-subtle: #24585a;
    --bs-link-color: var(--g-primary);
    --bs-link-color-rgb: var(--g-primary-rgb);
    --bs-link-hover-color: var(--g-primary-hover);
    --bs-link-hover-color-rgb: 76, 192, 194;
    --bs-focus-ring-color: rgba(var(--g-primary-rgb), 0.35);
    --bs-form-valid-color: #5cc27e;
    --bs-form-invalid-color: #f07a6b;
    --bs-form-invalid-border-color: #f07a6b;
    --bs-danger: #e8604f;
    --bs-danger-rgb: 232, 96, 79;
    --bs-danger-text-emphasis: #f5a59a;
    --bs-danger-bg-subtle: #3a1d19;
    --bs-success-text-emphasis: #8fd8a6;
    --bs-success-bg-subtle: #16301f;
    --bs-warning-text-emphasis: #f5cf6b;
    --bs-warning-bg-subtle: #362a0c;
    --bs-info-text-emphasis: #8ccbe2;
    --bs-info-bg-subtle: #132d38;
}

:root {
    --g-font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --g-font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
    --g-radius-sm: 6px;
    --g-radius: 8px;
    --g-radius-lg: 12px;
    --g-topbar: 3.75rem;
    --g-footer: 2.25rem;
    --g-sidebar: 15rem;

    --bs-body-font-family: var(--g-font);
    --bs-body-font-size: 0.975rem;
    --bs-body-line-height: 1.55;
    --bs-border-radius: var(--g-radius);
    --bs-border-radius-sm: var(--g-radius-sm);
    --bs-border-radius-lg: var(--g-radius-lg);
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
}

/* ---------- Base ---------- */

/* Background: a fine dot grid, like map paper; bars and panels stay solid on top of it. */
body {
    background-color: var(--g-canvas);
    background-image: radial-gradient(circle, var(--g-dot) 1px, transparent 1.5px);
    background-size: 18px 18px;
    background-attachment: fixed;
    color: var(--g-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--g-font-display);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

h1, .h3 {
    letter-spacing: -0.01em;
}

h2.h5, h2.h6, h3.h6 {
    font-weight: 600;
}

.lead {
    font-size: 1.125rem;
    font-weight: 500;
}

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

.table, .fs-4, .fs-5, td.text-end, th.text-end {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: rgba(var(--g-primary-rgb), 0.25);
}

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

/* ---------- App shell ---------- */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--g-topbar);
    padding: 0 1rem;
    background: var(--g-surface);
    border-bottom: 1px solid var(--g-line);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: auto;
    color: var(--g-ink);
    font-family: var(--g-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.app-brand:hover {
    color: var(--g-ink);
}

/* The brand mark: the Petrolid app icon. */
.app-brand-mark {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
}

/* The unit after a value (see site.js): one point smaller and muted. */
.unit {
    color: var(--g-muted);
    font-size: calc(1em - 1pt);
}

.app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - var(--g-topbar) - var(--g-footer));
    margin-bottom: var(--g-footer);
}

@media (min-width: 992px) {
    .app-shell {
        grid-template-columns: var(--g-sidebar) minmax(0, 1fr);
    }

    .app-sidebar {
        position: sticky;
        top: var(--g-topbar);
        height: calc(100vh - var(--g-topbar) - var(--g-footer));
        overflow-y: auto;
        background: var(--g-surface);
        border-right: 1px solid var(--g-line);
    }
}

.app-sidebar .offcanvas-lg {
    --bs-offcanvas-bg: var(--g-surface);
    --bs-offcanvas-width: 17rem;
}

.app-main {
    min-width: 0;
    padding: 2rem 1rem 3rem;
}

@media (min-width: 576px) {
    .app-main {
        padding: 2rem 2.25rem 3rem;
    }
}

.app-content {
    max-width: 1400px;
}

/* Version and copyright: a panel fixed to the bottom of the window, outside the scrolling page. */
.app-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: var(--g-footer);
    padding: 0 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--g-muted);
    font-size: 0.8rem;
    background: var(--g-surface);
    border-top: 1px solid var(--g-line);
}

.app-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
}

.app-user-button {
    display: inline-flex;
    align-items: center;
    max-width: 14rem;
}

.app-user-button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar [data-current-vehicle] {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .app-topbar {
        gap: 0.5rem;
        padding: 0 0.75rem;
    }

    .app-topbar .app-brand > span {
        display: none;
    }
}

/* ---------- Sidebar navigation ---------- */

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 1rem 0.75rem;
}

.app-nav-group + .app-nav-group {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--g-line);
}

.app-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--g-radius-sm);
    color: var(--g-muted);
    font-weight: 500;
    text-decoration: none;
}

.app-nav svg {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
}

.app-nav a.active svg {
    color: var(--g-primary);
}

.app-nav a:hover {
    background: var(--g-hover);
    color: var(--g-ink);
}

.app-nav a.active {
    background: var(--g-primary-soft);
    color: var(--g-ink);
    font-weight: 600;
}

.app-nav a.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--g-signal);
}

/* ---------- Segmented controls: theme switch, vehicle view ---------- */

.theme-switch,
.segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--g-radius);
    background: var(--g-sunken);
    border: 1px solid var(--g-line);
}

.theme-switch button,
.segmented a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.875rem;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--g-muted);
}

.segmented a {
    width: 2.25rem;
    height: 2rem;
}

.theme-switch button:hover,
.segmented a:hover {
    color: var(--g-ink);
}

.theme-switch button[aria-pressed=true],
.segmented a[aria-current=page] {
    background: var(--g-surface);
    color: var(--g-primary);
    outline: 1px solid var(--g-line);
}

.theme-switch svg,
.segmented svg {
    width: 1rem;
    height: 1rem;
}

/* ---------- Vehicles: list view ---------- */

.vehicle-list {
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius-lg);
}

.vehicle-row {
    display: grid;
    grid-template-columns: auto minmax(10rem, 1fr) minmax(0, 2.2fr) auto;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0.9rem 1rem;
}

.vehicle-row + .vehicle-row {
    border-top: 1px solid var(--g-line);
}

.vehicle-row-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    margin: 0;
}

.vehicle-row-facts dt {
    color: var(--g-muted);
    font-weight: 500;
}

.vehicle-row-facts dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.vehicle-row-actions {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 767.98px) {
    .vehicle-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .vehicle-row-facts,
    .vehicle-row-actions {
        grid-column: 1 / -1;
    }
}

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 0.95rem;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb), 0.3);
    --bs-btn-active-shadow: none;
    --bs-btn-box-shadow: none;
}

.btn-sm {
    --bs-btn-padding-x: 0.65rem;
    --bs-btn-border-radius: var(--g-radius-sm);
}

.btn-primary {
    --bs-btn-color: var(--g-on-primary);
    --bs-btn-bg: var(--g-primary);
    --bs-btn-border-color: var(--g-primary);
    --bs-btn-hover-color: var(--g-on-primary);
    --bs-btn-hover-bg: var(--g-primary-hover);
    --bs-btn-hover-border-color: var(--g-primary-hover);
    --bs-btn-active-color: var(--g-on-primary);
    --bs-btn-active-bg: var(--g-primary-hover);
    --bs-btn-active-border-color: var(--g-primary-hover);
    --bs-btn-disabled-color: var(--g-on-primary);
    --bs-btn-disabled-bg: var(--g-primary);
    --bs-btn-disabled-border-color: var(--g-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--g-primary);
    --bs-btn-border-color: var(--g-line-strong);
    --bs-btn-hover-color: var(--g-ink);
    --bs-btn-hover-bg: var(--g-hover);
    --bs-btn-hover-border-color: var(--g-line-strong);
    --bs-btn-active-color: var(--g-ink);
    --bs-btn-active-bg: var(--g-hover);
    --bs-btn-active-border-color: var(--g-line-strong);
    --bs-btn-disabled-color: var(--g-primary);
    --bs-btn-disabled-border-color: var(--g-line);
}

.btn-outline-secondary,
.btn-secondary {
    --bs-btn-color: var(--g-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--g-line-strong);
    --bs-btn-hover-color: var(--g-ink);
    --bs-btn-hover-bg: var(--g-hover);
    --bs-btn-hover-border-color: var(--g-line-strong);
    --bs-btn-active-color: var(--g-ink);
    --bs-btn-active-bg: var(--g-hover);
    --bs-btn-active-border-color: var(--g-line-strong);
    --bs-btn-disabled-color: var(--g-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--g-line);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--g-line-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: #a32f22;
    --bs-btn-hover-border-color: #a32f22;
}

.btn-link {
    --bs-btn-color: var(--g-primary);
    --bs-btn-hover-color: var(--g-primary-hover);
    --bs-btn-active-color: var(--g-primary-hover);
    --bs-btn-font-weight: 500;
}

.btn-close:focus {
    box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb), 0.3);
}

/* ---------- Forms ---------- */

.form-label {
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.form-control,
.form-select {
    border-color: var(--g-line-strong);
    background-color: var(--g-surface);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--g-primary);
    box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb), 0.2);
}

.form-control::placeholder {
    color: var(--bs-tertiary-color);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--g-sunken);
}

.input-group-text {
    background-color: var(--g-sunken);
    border-color: var(--g-line-strong);
    color: var(--g-muted);
}

.form-check-input {
    border-color: var(--g-line-strong);
    background-color: var(--g-surface);
}

.form-check-input:checked {
    background-color: var(--g-primary);
    border-color: var(--g-primary);
}

[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23061a1b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23061a1b'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b6e74'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb { background-color: var(--g-primary); }
.form-range::-moz-range-thumb { background-color: var(--g-primary); }

/* ---------- Surfaces: cards, tables, lists ---------- */

.card {
    --bs-card-bg: var(--g-surface);
    --bs-card-border-color: var(--g-line);
    --bs-card-border-radius: var(--g-radius-lg);
    --bs-card-inner-border-radius: calc(var(--g-radius-lg) - 1px);
    --bs-card-cap-bg: var(--g-sunken);
    --bs-card-cap-padding-y: 0.65rem;
}

.card-header {
    font-weight: 600;
}

.card .fs-4 {
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: 1.75rem !important;
    line-height: 1.15;
}

.card .fs-5 {
    font-family: var(--g-font-display);
    font-weight: 600;
}

.table-responsive {
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius-lg);
}

.table-responsive > .table {
    margin-bottom: 0;
}

.table {
    --bs-table-bg: var(--g-surface);
    --bs-table-border-color: var(--g-line);
    --bs-table-hover-bg: var(--g-hover);
    --bs-table-striped-bg: var(--g-sunken);
}

.table > thead > tr > th {
    background: var(--g-sunken);
    color: var(--g-muted);
    font-size: 0.825rem;
    font-weight: 600;
    white-space: nowrap;
    border-bottom-color: var(--g-line);
}

.table > :not(caption) > * > * {
    padding: 0.65rem 0.75rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.4rem 0.6rem;
}

.table-responsive > .table > :not(caption) > * > :first-child {
    padding-left: 1rem;
}

.table-responsive > .table > :not(caption) > * > :last-child {
    padding-right: 1rem;
}

.table-responsive > .table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--g-hover);
}

.list-group {
    --bs-list-group-bg: var(--g-surface);
    --bs-list-group-border-color: var(--g-line);
    --bs-list-group-border-radius: var(--g-radius-lg);
    --bs-list-group-action-hover-bg: var(--g-hover);
    --bs-list-group-active-bg: var(--g-primary);
    --bs-list-group-active-border-color: var(--g-primary);
    --bs-list-group-active-color: var(--g-on-primary);
}

/* ---------- Menus, dialogs, navs ---------- */

.dropdown-menu {
    --bs-dropdown-bg: var(--g-surface);
    --bs-dropdown-border-color: var(--g-line);
    --bs-dropdown-border-radius: var(--g-radius);
    --bs-dropdown-link-hover-bg: var(--g-hover);
    --bs-dropdown-link-active-bg: var(--g-primary-soft);
    --bs-dropdown-link-active-color: var(--g-ink);
    --bs-dropdown-padding-x: 0.3rem;
    --bs-dropdown-item-border-radius: var(--g-radius-sm);
    --bs-dropdown-box-shadow: none;
}

.dropdown-item.active,
.dropdown-item:active {
    font-weight: 600;
}

.modal {
    --bs-modal-bg: var(--g-surface);
    --bs-modal-border-color: var(--g-line);
    --bs-modal-border-radius: var(--g-radius-lg);
    --bs-modal-box-shadow: none;
    --bs-modal-header-border-color: var(--g-line);
    --bs-modal-footer-border-color: var(--g-line);
}

.modal-backdrop {
    --bs-backdrop-bg: #0a1014;
    --bs-backdrop-opacity: 0.55;
}

.offcanvas-backdrop {
    background-color: #0a1014;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--g-primary);
    --bs-nav-pills-link-active-color: var(--g-on-primary);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--g-line);
    --bs-nav-tabs-link-active-bg: var(--g-surface);
    --bs-nav-tabs-link-active-border-color: var(--g-line) var(--g-line) var(--g-surface);
}

.nav-link {
    --bs-nav-link-color: var(--g-muted);
    --bs-nav-link-hover-color: var(--g-ink);
}

.pagination {
    --bs-pagination-active-bg: var(--g-primary);
    --bs-pagination-active-border-color: var(--g-primary);
    --bs-pagination-color: var(--g-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--g-primary-rgb), 0.3);
}

.badge.text-bg-primary,
.text-bg-primary {
    color: var(--g-on-primary) !important;
    background-color: var(--g-primary) !important;
}

.progress {
    --bs-progress-bar-bg: var(--g-primary);
    --bs-progress-bg: var(--g-hover);
}

/* ---------- Alerts: flat, with a coloured edge ---------- */

.alert {
    --bs-alert-border-color: transparent;
    border-left: 4px solid currentColor;
    border-radius: var(--g-radius);
}

.alert-success { border-left-color: #2e9e57; }
.alert-warning { border-left-color: var(--g-signal); }
.alert-danger { border-left-color: var(--bs-danger); }
.alert-info { border-left-color: #2b8bb3; }

/* ---------- Auth pages ---------- */

.auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 1rem;
}

.auth-page .theme-switch {
    align-self: flex-end;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 2rem 1.75rem;
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius-lg);
}

@media (min-width: 576px) {
    .auth-card {
        padding: 2.5rem 2.25rem;
    }
}

.auth-card .app-brand {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: 0 0 1.75rem;
    font-size: 1.6rem;
}

.auth-card .app-brand-mark {
    width: 5rem;
    height: 5rem;
}

.auth-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--g-line);
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    text-align: center;
}

/* ---------- Maps ---------- */

.mini-map {
    height: 180px;
    border-radius: var(--g-radius);
    border: 1px solid var(--g-line);
}

.location-hint {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--g-footer) + 1rem);
    width: min(22rem, calc(100% - 2rem));
    z-index: 1040;
}

.station-map {
    height: 70vh;
    min-height: 320px;
    border-radius: var(--g-radius-lg);
    border: 1px solid var(--g-line);
}

@media (max-width: 991.98px) {
    .station-map {
        height: 60vh;
    }
}

.map-price {
    font-weight: 600;
    padding: 0 4px;
}

.map-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    vertical-align: middle;
}

.station-picker {
    height: 300px;
    border-radius: var(--g-radius);
    border: 1px solid var(--g-line);
}

.leaflet-container {
    font-family: var(--g-font);
    background: var(--g-sunken);
}

/* OpenStreetMap has no dark tiles; inverting the base layer keeps markers untouched. */
[data-bs-theme=dark] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.88) saturate(0.6);
}

[data-bs-theme=dark] .leaflet-bar a,
[data-bs-theme=dark] .leaflet-control-attribution,
[data-bs-theme=dark] .leaflet-popup-content-wrapper,
[data-bs-theme=dark] .leaflet-popup-tip {
    background: var(--g-surface);
    color: var(--g-ink);
    border-color: var(--g-line);
}

[data-bs-theme=dark] .leaflet-control-attribution a {
    color: var(--g-primary);
}

.leaflet-popup-content-wrapper,
.leaflet-bar {
    box-shadow: none !important;
    border: 1px solid var(--g-line) !important;
    border-radius: var(--g-radius) !important;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
    .btn,
    .app-nav a,
    .theme-switch button,
    .form-control,
    .form-select {
        transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    }
}

/* ---------- Vehicle photos ---------- */

.vehicle-cover,
.vehicle-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--g-sunken);
    color: var(--g-line-strong);
}

.vehicle-cover img,
.vehicle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vehicle-cover {
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--g-line);
    border-radius: calc(var(--g-radius-lg) - 1px) calc(var(--g-radius-lg) - 1px) 0 0;
}

.vehicle-cover svg {
    width: 3.5rem;
    height: 3.5rem;
}

.vehicle-thumb {
    flex: none;
    width: 4.5rem;
    height: 3.375rem;
    border-radius: var(--g-radius-sm);
}

.vehicle-thumb svg {
    width: 1.75rem;
    height: 1.75rem;
}

.vehicle-thumb-sm {
    display: inline-flex;
    width: 2.75rem;
    height: 2rem;
    vertical-align: middle;
}

.vehicle-thumb-sm svg {
    width: 1.25rem;
    height: 1.25rem;
}

.vehicle-thumb-xs {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
}

.photo-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius-lg);
}

.photo-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--g-sunken);
}

.photo-tile figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem;
}

.photo-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

form[aria-busy=true] {
    opacity: 0.6;
    pointer-events: none;
}

/* ---------- Photo viewer ---------- */

.photo-viewer .modal-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    padding: 0;
    background: #0a1014;
    border-radius: 0 0 var(--g-radius-lg) var(--g-radius-lg);
}

.photo-viewer img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 10rem);
    object-fit: contain;
}

.photo-viewer-nav {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -1.375rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 16, 20, 0.65);
    color: #fff;
}

.photo-viewer-nav:hover {
    background: rgba(10, 16, 20, 0.85);
}

.photo-viewer-nav[hidden] {
    display: none;
}

.photo-viewer-nav svg {
    width: 1.5rem;
    height: 1.5rem;
}

.photo-viewer-prev { left: 0.75rem; }
.photo-viewer-next { right: 0.75rem; }

.photo-tile a {
    display: block;
    cursor: zoom-in;
}