/* ==========================================================================
   Pro Glass Works - PGW Maintenance Manager
   One coherent stylesheet layered on Bootstrap 5.3.
   Order: tokens -> base -> layout -> navbar -> page header -> cards ->
          stat tiles -> buttons -> badges -> forms -> tables -> list groups ->
          alerts -> dropdowns/modal -> footer -> helpers -> media queries
   Rules: rem/em everywhere (px only for borders and shadows); no !important
          unless it has to beat a Bootstrap !important; every var() used here
          is declared in :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --pgw-navy: #012638;
    --pgw-navy-hover: #013a54;
    --pgw-orange: #F36C23;
    --pgw-orange-hover: #e55a10;
    --pgw-gray: #76777B;
    --pgw-white: #FFFFFF;

    /* Neutral ramp */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #76777B;
    --gray-600: #5a5b5e;
    --gray-700: #3d3e40;
    --gray-800: #1F2937;
    --gray-900: #012638;

    /* Semantic */
    --color-text: var(--pgw-navy);
    --color-text-muted: var(--gray-600);
    --color-border: var(--gray-200);
    --color-surface: #FFFFFF;
    --color-surface-2: var(--gray-50);
    --color-bg: #eef2f6;
    --color-success: #10b981;
    --color-success-hover: #0ea371;
    --color-danger: #dc3545;
    --color-danger-hover: #bb2d3b;
    --color-focus: var(--pgw-orange);
    --focus-ring: 0 0 0 .2rem rgba(1, 38, 56, .18);

    /* Type scale (rem only) */
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-nav: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-display: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
    --fs-stat: clamp(1.5rem, 0.6rem + 2.4vw, 3rem);

    /* Spacing */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --gutter: clamp(1rem, 2.5vw, 2rem);
    --card-pad: clamp(1rem, 2vw, 1.5rem);
    --section-gap: clamp(1.5rem, 3vw, 2.5rem);

    /* Shape */
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

    /* Bootstrap theme hooks - recolour utilities (.bg-*, .text-*, .border-*)
       without fighting their !important flags */
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-color: var(--pgw-navy);
    --bs-body-color-rgb: 1, 38, 56;
    --bs-secondary-color: var(--color-text-muted);
    --bs-border-color: var(--gray-200);
    --bs-border-radius: var(--radius-sm);
    --bs-link-color-rgb: 1, 38, 56;
    --bs-link-hover-color-rgb: 243, 108, 35;
    --bs-primary: #012638;
    --bs-primary-rgb: 1, 38, 56;
    --bs-secondary: #76777B;
    --bs-secondary-rgb: 118, 119, 123;
    --bs-success: #10b981;
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: #F36C23;
    --bs-warning-rgb: 243, 108, 35;
    --bs-info: #76777B;
    --bs-info-rgb: 118, 119, 123;
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
    font-size: 100%;
    background: var(--color-bg);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    background: linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
    color: var(--color-text);
    font-family: var(--bs-body-font-family);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    transition: color .15s ease;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
}

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

/* Bootstrap sets outline:0 on these with (0,2,0) specificity - restate the ring */
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.navbar-toggler:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    box-shadow: none;
}

img {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
    max-width: 1320px;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

main.container {
    margin-top: var(--space-6);
    margin-bottom: var(--section-gap);
}

/* --------------------------------------------------------------------------
   4. Navbar (navbar-expand-xl: hamburger below 1200px)
   -------------------------------------------------------------------------- */
.navbar {
    --bs-navbar-padding-y: .5rem;
    --bs-navbar-padding-x: 0;
    --bs-navbar-nav-link-padding-x: .5rem;
    --bs-navbar-color: var(--pgw-navy);
    --bs-navbar-hover-color: var(--pgw-orange);
    --bs-navbar-active-color: var(--pgw-orange);
    --bs-navbar-brand-color: var(--pgw-navy);
    --bs-navbar-brand-hover-color: var(--pgw-navy);
    --bs-navbar-toggler-border-color: var(--gray-300);
    --bs-navbar-toggler-focus-width: .2rem;
    background: var(--color-surface);
    border-top: 3px solid var(--pgw-orange);    /* PGW accent strip */
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 1rem;
    font-weight: 700;
}

/* Brand lockup: wrench icon + "PRO GLASS WORKS" eyebrow + product name */
.brand-lockup {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
}

.brand-mark {
    display: block;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .55rem;
    box-shadow: var(--shadow-sm);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.brand-eyebrow {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--pgw-gray);
}

.brand-eyebrow b {
    color: var(--pgw-orange);
    font-weight: 700;
}

.brand-name {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pgw-navy);
    white-space: nowrap;
}

.navbar-toggler {
    padding: .375rem .625rem;
    border-radius: var(--radius-sm);
}

.navbar-toggler:focus {
    box-shadow: var(--focus-ring);
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    font-size: var(--fs-nav);
    font-weight: 500;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-radius: var(--radius-sm);
    transition: background-color .15s ease, color .15s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.show {
    background: var(--gray-100);
}

.navbar-nav .nav-link > i {
    font-size: 1rem;
    line-height: 1;
    color: var(--pgw-orange);
}

.user-name {
    display: inline-block;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* --------------------------------------------------------------------------
   5. Page header
   -------------------------------------------------------------------------- */
/* Rule under every page title with the brand guide's orange "+" at its start */
.page-header {
    position: relative;
    margin-bottom: var(--section-gap);
    padding-bottom: 1.25rem;
    background: linear-gradient(var(--gray-300), var(--gray-300))
                no-repeat left 1.25rem bottom .5rem / calc(100% - 1.25rem) 1px;
}

/* Drawn (not a text glyph) so it centres exactly on the 1px rule */
.page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(.0625rem + .5px);
    width: .875rem;
    height: .875rem;
    background:
        linear-gradient(var(--pgw-orange), var(--pgw-orange)) center / 100% 3px no-repeat,
        linear-gradient(var(--pgw-orange), var(--pgw-orange)) center / 3px 100% no-repeat;
    pointer-events: none;
}

.page-header .lead,
.page-header .display-4 {
    margin-bottom: 0;
}

.page-header .display-4 + .lead {
    margin-top: .25rem;
}

.display-4 {
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--color-text);
    margin-bottom: .5rem;
}

.lead {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-bg: var(--color-surface);
    --bs-card-cap-bg: var(--pgw-navy);
    --bs-card-cap-color: #fff;
    --bs-card-cap-padding-y: .875rem;
    --bs-card-cap-padding-x: var(--card-pad);
    --bs-card-spacer-y: var(--card-pad);
    --bs-card-spacer-x: var(--card-pad);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

/* Inside a grid the row's g-* gutter (or its mb-*) owns the spacing: a card
   margin would double the gap and push h-100 cards past their column.
   :last-child keeps the gap between cards stacked in one column. */
.row > [class*="col"] > .card:last-child {
    margin-bottom: 0;
}

.card-header {
    border-bottom: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -.01em;
}

.card-header :is(h1, h2, h3, h4, h5, h6, .card-title) {
    color: inherit;
    font-size: var(--fs-md);
    font-weight: 600;
    margin: 0;
}

/* Headers written as flex rows must be allowed to wrap */
.card-header.d-flex,
.card-header-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.card-header .badge {
    flex-shrink: 0;
}

.card-footer {
    background: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
    padding: 1rem var(--card-pad);
}

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

/* Vehicle cards - the only cards that lift on hover */
.vehicle-card {
    position: relative;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}

.vehicle-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    transition: border-color .2s ease;
    pointer-events: none;
}

.vehicle-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.vehicle-card:hover::after {
    border-color: var(--pgw-navy);
}

.vehicle-card .card-title {
    font-size: var(--fs-md);
    color: var(--color-text);
    margin-bottom: .25rem;
}

/* --------------------------------------------------------------------------
   7. Stat tiles (.stat-card, and the legacy .card.bg-* tiles)
   -------------------------------------------------------------------------- */
.stat-card,
.card.bg-primary,
.card.bg-success,
.card.bg-warning,
.card.bg-info {
    height: 100%;
    border: 0;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.stat-card > .card-body,
.card.bg-primary > .card-body,
.card.bg-success > .card-body,
.card.bg-warning > .card-body,
.card.bg-info > .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 7.5rem;
    padding: var(--card-pad);
    container-type: inline-size;
}

.stat-card .card-title,
.card.bg-primary .card-title,
.card.bg-success .card-title,
.card.bg-warning .card-title,
.card.bg-info .card-title {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: normal;
    text-wrap: balance;
    opacity: .92;
    color: inherit;
    margin-bottom: .5rem;
}

.stat-card h2,
.card.bg-primary h2,
.card.bg-success h2,
.card.bg-warning h2,
.card.bg-info h2 {
    font-size: var(--fs-stat);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    color: inherit;
    margin: 0;
}

@supports (font-size: 1cqw) {
    .stat-card h2,
    .card.bg-primary h2,
    .card.bg-success h2,
    .card.bg-warning h2,
    .card.bg-info h2 {
        /* a 7-character money value always fits the tile */
        font-size: min(var(--fs-stat), 22cqw);
    }
}

/* --------------------------------------------------------------------------
   8. Buttons (restyled through Bootstrap's --bs-btn-* variables)
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.625rem;
    letter-spacing: -.01em;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn:active {
    transform: scale(.98);
}

.btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: none;
}

[class*="btn-outline-"] {
    --bs-btn-border-width: 2px;
    --bs-btn-bg: var(--color-surface);
}

.btn-primary {
    --bs-btn-bg: var(--pgw-navy);
    --bs-btn-border-color: var(--pgw-navy);
    --bs-btn-hover-bg: var(--pgw-navy-hover);
    --bs-btn-hover-border-color: var(--pgw-navy-hover);
    --bs-btn-active-bg: var(--pgw-navy-hover);
    --bs-btn-active-border-color: var(--pgw-navy-hover);
    --bs-btn-disabled-bg: var(--pgw-navy);
    --bs-btn-disabled-border-color: var(--pgw-navy);
    box-shadow: 0 2px 6px rgba(1, 38, 56, .3);
}

.btn-secondary {
    --bs-btn-bg: var(--pgw-gray);
    --bs-btn-border-color: var(--pgw-gray);
    --bs-btn-hover-bg: var(--gray-600);
    --bs-btn-hover-border-color: var(--gray-600);
    --bs-btn-active-bg: var(--gray-700);
    --bs-btn-active-border-color: var(--gray-700);
    --bs-btn-disabled-bg: var(--pgw-gray);
    --bs-btn-disabled-border-color: var(--pgw-gray);
    box-shadow: 0 2px 6px rgba(118, 119, 123, .3);
}

.btn-success {
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: var(--color-success-hover);
    --bs-btn-hover-border-color: var(--color-success-hover);
    --bs-btn-active-bg: var(--color-success-hover);
    --bs-btn-active-border-color: var(--color-success-hover);
    --bs-btn-disabled-bg: var(--color-success);
    --bs-btn-disabled-border-color: var(--color-success);
    box-shadow: 0 2px 6px rgba(16, 185, 129, .3);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-bg: var(--pgw-orange);
    --bs-btn-border-color: var(--pgw-orange);
    --bs-btn-hover-bg: var(--pgw-orange-hover);
    --bs-btn-hover-border-color: var(--pgw-orange-hover);
    --bs-btn-active-bg: var(--pgw-orange-hover);
    --bs-btn-active-border-color: var(--pgw-orange-hover);
    --bs-btn-disabled-bg: var(--pgw-orange);
    --bs-btn-disabled-border-color: var(--pgw-orange);
    box-shadow: 0 2px 6px rgba(243, 108, 35, .3);
}

.btn-danger {
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: var(--color-danger-hover);
    --bs-btn-hover-border-color: var(--color-danger-hover);
    --bs-btn-active-bg: var(--color-danger-hover);
    --bs-btn-active-border-color: var(--color-danger-hover);
    box-shadow: 0 2px 6px rgba(220, 53, 69, .3);
}

.btn-outline-primary {
    --bs-btn-color: var(--pgw-navy);
    --bs-btn-border-color: var(--pgw-navy);
    --bs-btn-hover-bg: var(--pgw-navy);
    --bs-btn-hover-border-color: var(--pgw-navy);
    --bs-btn-active-bg: var(--pgw-navy-hover);
    --bs-btn-active-border-color: var(--pgw-navy-hover);
    --bs-btn-disabled-color: var(--pgw-navy);
    --bs-btn-disabled-border-color: var(--pgw-navy);
}

.btn-outline-secondary {
    --bs-btn-color: var(--gray-800);
    --bs-btn-border-color: var(--gray-500);
    --bs-btn-hover-bg: var(--gray-700);
    --bs-btn-hover-border-color: var(--gray-700);
    --bs-btn-active-bg: var(--gray-800);
    --bs-btn-active-border-color: var(--gray-800);
    --bs-btn-disabled-color: var(--gray-500);
    --bs-btn-disabled-border-color: var(--gray-500);
}

.btn-outline-success {
    --bs-btn-color: var(--color-success-hover);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: var(--color-success);
    --bs-btn-hover-border-color: var(--color-success);
    --bs-btn-active-bg: var(--color-success-hover);
    --bs-btn-active-border-color: var(--color-success-hover);
}

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

.btn-sm {
    --bs-btn-font-size: .8125rem;
    --bs-btn-padding-y: .375rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-border-radius: var(--radius-sm);
    min-height: 2.25rem;
}

.btn-lg {
    --bs-btn-font-size: var(--fs-base);
    --bs-btn-padding-y: .625rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-border-radius: var(--radius-md);
    min-height: 2.875rem;
}

.btn-close:focus {
    box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   9. Badges
   -------------------------------------------------------------------------- */
.badge {
    --bs-badge-font-size: var(--fs-xs);
    --bs-badge-font-weight: 600;
    --bs-badge-padding-y: .35em;
    --bs-badge-padding-x: .65em;
    --bs-badge-border-radius: var(--radius-sm);
    line-height: 1.2;
    letter-spacing: .01em;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.form-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: .375rem;
}

.form-control,
.form-select {
    font-size: var(--fs-base);          /* 16px: also stops iOS zoom-on-focus */
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control-lg {
    font-size: var(--fs-md);
    min-height: 3.25rem;
    padding: .625rem 1rem;
    border-radius: var(--radius-md);
}

.form-control-sm {
    font-size: var(--fs-sm);
    min-height: 2.25rem;
    padding: .25rem .5rem;
}

.form-control:focus,
.form-select:focus {
    /* state change only: no padding or border-width change, so nothing shifts */
    border-color: var(--pgw-navy);
    box-shadow: var(--focus-ring);
    outline: 0;
}

.form-control::placeholder {
    color: var(--gray-400);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.form-text {
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.form-check-input {
    border-color: var(--gray-400);
}

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

.form-check-input:focus {
    border-color: var(--pgw-navy);
    box-shadow: var(--focus-ring);
}

.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='%2376777B'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
   11. Tables (restyled through Bootstrap's --bs-table-* variables so
       .table-dark / .table-light / .table-sm / .table-striped keep working)
   -------------------------------------------------------------------------- */
.table {
    --bs-table-color: var(--gray-700);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-border);
    --bs-table-hover-bg: var(--gray-50);
    --bs-table-hover-color: var(--color-text);
    --bs-table-striped-bg: var(--gray-50);
    --bs-table-striped-color: var(--gray-700);
    /* cell padding lives in tokens so the compact variants and the
       breakpoint rules (section 17) never fight over the same selector */
    --table-cell-pad-y: .75rem;
    --table-cell-pad-x: 1rem;
    font-size: var(--fs-sm);
}

.table-dark {
    --bs-table-color: #fff;
}

.table > :not(caption) > * > * {
    padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
    vertical-align: middle;
}

/* Compact variants: (0,2,0) so they also beat the breakpoint .table rules.
   .table-sm comes last so a .table-borderless.table-sm table stays compact. */
.table.table-borderless {
    --table-cell-pad-y: .5rem;
    --table-cell-pad-x: .75rem;
}

.table.table-sm {
    --table-cell-pad-y: .5rem;
    --table-cell-pad-x: .625rem;
}

.table > thead > tr > th {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom-width: 2px;
}

.table-hover > tbody > tr {
    transition: background-color .15s ease;
}

.table-borderless th {
    font-weight: 600;
    color: var(--gray-600);
    font-size: .8125rem;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   12. List groups
   -------------------------------------------------------------------------- */
.list-group {
    --bs-list-group-color: var(--color-text);
    --bs-list-group-bg: var(--color-surface);
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-border-radius: var(--radius-md);
    --bs-list-group-item-padding-y: .875rem;
    --bs-list-group-item-padding-x: 1.125rem;
    --bs-list-group-action-hover-bg: var(--gray-50);
    --bs-list-group-action-hover-color: var(--color-text);
    --bs-list-group-action-active-bg: var(--gray-100);
    --bs-list-group-action-active-color: var(--color-text);
}

.list-group-item h6 {
    font-weight: 600;
    margin-bottom: .25rem;
}

.list-group-item-action {
    transition: background-color .15s ease;
}

/* Left accent used by the upcoming-maintenance list */
.vehicle-alert {
    border-left: 4px solid var(--pgw-orange);
}

.vehicle-alert.list-group-item-danger {
    border-left-color: var(--color-danger);
}

/* Pane toolbar: one-line summary left, small actions right */
.pane-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.pane-bar strong {
    color: var(--color-text);
}

/* List rows: coloured status edge, title + badge, muted meta.
   Markup: .list-group.dash-list > .list-group-item.dash-item.status-*
           > .dash-item-top (.dash-item-title + .badge), .dash-item-text, .dash-item-meta */
.dash-list {
    --bs-list-group-border-radius: var(--radius-md);
}

.dash-item {
    border-left: 4px solid var(--gray-300) !important;
    padding: .8rem 1rem;
}

.dash-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.dash-item-title {
    margin: 0 0 .15rem;
    font-size: .95rem;
    font-weight: 600;
    min-width: 0;
}

.dash-item-text {
    margin: 0 0 .15rem;
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.dash-item-meta {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}

.dash-item-meta .bi {
    margin-right: .15rem;
}

/* Tinted spreadsheet-alert rows (dashboard Vehicle Alerts) */
.vehicle-alert.list-group-item-danger {
    border-left-color: var(--bs-danger) !important;
    background: #fef2f2;
    color: inherit;
}

.vehicle-alert.list-group-item-warning {
    border-left-color: var(--pgw-orange) !important;
    background: #fff7ed;
    color: inherit;
}

.vehicle-alert .badge.text-dark {
    color: #fff !important;   /* white text on every badge */
}

/* Status edge modifiers */
.dash-item.status-upcoming { border-left-color: var(--pgw-navy) !important; }
.dash-item.status-overdue  { border-left-color: var(--bs-danger) !important; }
.dash-item.status-due_soon { border-left-color: var(--pgw-orange) !important; }
.dash-item.status-ok       { border-left-color: var(--color-success) !important; }
.dash-item.status-missing  { border-left-color: var(--bs-danger) !important; }
.dash-item.status-pending  { border-left-color: var(--pgw-orange) !important; }

/* Service documents: paperclip links on maintenance records (templates/_service_docs.html) */
.svc-docs {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    font-size: var(--fs-xs);
    line-height: 1.4;
}
.svc-doc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; min-width: 0; max-width: 100%; }
.svc-doc-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    max-width: 100%;
    font-weight: 600;
    color: var(--pgw-navy);
    text-decoration: none;
}
.svc-doc-link .bi-paperclip { flex: none; color: var(--pgw-orange); font-size: .95em; }
.svc-doc-name { min-width: 0; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-doc-ext { flex: none; font-size: .75em; color: var(--color-text-muted); }
a.svc-doc-link:hover .svc-doc-name,
a.svc-doc-link:focus-visible .svc-doc-name { color: var(--pgw-orange); text-decoration: underline; }
.svc-doc-link.is-muted { color: var(--color-text-muted); font-weight: 500; }
.svc-doc-link.is-muted .bi-paperclip { color: var(--gray-400); }
.svc-doc .badge { font-size: .6875rem; font-weight: 600; }
.svc-doc-wait { background-color: var(--gray-500) !important; }
.svc-doc-error { flex-basis: 100%; color: var(--color-text-muted); overflow-wrap: anywhere; }
a.svc-doc-error { color: var(--pgw-navy); text-decoration: underline; }
/* In the maintenance table a long (nowrap) name must not widen the Service
   column and push Edit/Delete off-screen: the list takes the column's width
   and names ellipsize inside it. */
.maint-table .svc-docs { contain: inline-size; }
/* Phones / tablets: names share their 'YYYY-MM-DD <type>' start, so cutting
   them to one line hides the part that differs - wrap to two lines instead. */
@media (max-width: 991.98px) {
    .svc-doc-name {
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
/* Touch screens: attachment links big enough to tap without hitting the next one */
@media (pointer: coarse) {
    .svc-doc-link { min-height: 1.5rem; }
    .svc-docs { row-gap: .4rem; }
}
/* "Saved to SharePoint → Service Documents → <vehicle>" helper under file fields */
.svc-dest { display: flex; align-items: baseline; gap: .35rem; overflow-wrap: anywhere; }
.svc-dest .bi { flex: none; color: var(--pgw-orange); }
.dash-item.status-approved { border-left-color: var(--color-success) !important; }
.dash-item.status-neutral  { border-left-color: var(--pgw-gray) !important; }

/* Small green "reminder sent" note inside a row */
.reminder-note {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: .45rem;
    line-height: 1.4;
    padding: .25rem .7rem;
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, .12);
    color: #047857;
    font-size: var(--fs-xs);
    font-weight: 600;
}

.reminder-count {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Friendly empty state: icon + one sentence + optional button */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-md);
}

.dash-empty .bi {
    font-size: 1.75rem;
    color: var(--color-success);
}

/* Key/value facts grid: small uppercase label above the value.
   Markup: <dl class="kv-grid"><div class="kv"><dt>Label</dt><dd>Value</dd></div>...</dl>
   (or any child elements with .kv-label / .kv-value) */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.kv-grid > * {
    min-width: 0;
    margin: 0;
}

.kv-grid dt,
.kv-grid .kv-label {
    margin: 0 0 .2rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.kv-grid dd,
.kv-grid .kv-value {
    margin: 0;
    font-weight: 500;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Columns follow the grid's own width (fits inside narrow cards too):
   each column at least 11rem, never more than 4 */
.kv-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(11rem, calc((100% - 4.5rem) / 4)), 1fr));
}

@media (max-width: 575.98px) {
    .kv-grid { grid-template-columns: 1fr; gap: .875rem; }
}

/* --------------------------------------------------------------------------
   13. Alerts (AA palette, 1px border + 4px left accent, no gradients)
   -------------------------------------------------------------------------- */
.alert {
    --bs-alert-padding-y: .875rem;
    --bs-alert-padding-x: 1.125rem;
    --bs-alert-border-radius: var(--radius-md);
    border-left-width: 4px;
    box-shadow: var(--shadow-xs);
}

.alert-success {
    --bs-alert-color: #065F46;
    --bs-alert-bg: #ECFDF5;
    --bs-alert-border-color: #10b981;
    --bs-alert-link-color: #065F46;
}

.alert-warning {
    --bs-alert-color: #92400E;
    --bs-alert-bg: #FFFBEB;
    --bs-alert-border-color: #F36C23;
    --bs-alert-link-color: #92400E;
}

.alert-danger {
    --bs-alert-color: #991B1B;
    --bs-alert-bg: #FEF2F2;
    --bs-alert-border-color: #dc3545;
    --bs-alert-link-color: #991B1B;
}

.alert-info {
    --bs-alert-color: #1E40AF;
    --bs-alert-bg: #EFF6FF;
    --bs-alert-border-color: #60A5FA;
    --bs-alert-link-color: #1E40AF;
}

.alert .btn {
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   14. Dropdowns and modal
   -------------------------------------------------------------------------- */
.dropdown-menu {
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-padding-x: .5rem;
    --bs-dropdown-font-size: var(--fs-sm);
    --bs-dropdown-color: var(--color-text);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-text);
    --bs-dropdown-link-hover-bg: var(--gray-100);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--pgw-navy);
    --bs-dropdown-item-padding-y: .5rem;
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-item-border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.dropdown-item {
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.dropdown-item > i {
    color: var(--pgw-orange);
    margin-right: .35rem;
}

.dropdown-item:active > i {
    color: inherit;
}

.modal {
    --bs-modal-border-color: var(--color-border);
    --bs-modal-border-radius: var(--radius-lg);
    --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-modal-header-border-color: var(--color-border);
    --bs-modal-footer-border-color: var(--color-border);
    --bs-modal-padding: var(--space-6);
    --bs-modal-header-padding: 1.125rem var(--space-6);
    --bs-modal-box-shadow: var(--shadow-xl);
}

.modal-title {
    font-weight: 600;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
/* Keep the footer at the bottom of short pages */
body:has(> .site-footer) {
    display: flex;
    flex-direction: column;
}

body:has(> .site-footer) > main {
    flex: 1 0 auto;
}

/* Quiet white bar: brand left, copyright + tagline right (stacked on phones) */
.site-footer {
    flex-shrink: 0;
    margin-top: var(--space-6);         /* + main's 1.5rem bottom margin (flex: no collapse) */
    padding: 1rem 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-xs);
    line-height: 1.25;
    color: var(--color-text-muted);
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--pgw-navy);
    white-space: nowrap;
}

.footer-brand img {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .3rem;
}

.footer-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}

.footer-copy {
    white-space: nowrap;
}

.footer-sep {
    width: 1px;
    height: .875rem;
    background: var(--gray-300);
}

/* "FILMS + SHADES + GRAPHICS" tagline from the PGW circle lockup */
.footer-tagline {
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .25em;
    margin-right: -.25em;               /* cancel the trailing letter-space */
    text-transform: uppercase;
    color: var(--pgw-gray);
    white-space: nowrap;
}

.footer-tagline b {
    color: var(--pgw-orange);
    font-weight: 700;
    margin: 0 .3em;
}

@media (max-width: 575.98px) {
    .site-footer {
        padding-top: 1.25rem;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }

    .site-footer-inner {
        flex-direction: column;
        justify-content: center;
        gap: .6rem;
        text-align: center;
    }

    .footer-meta {
        flex-direction: column;
        gap: .45rem;
    }

    .footer-sep {
        display: none;
    }
}

/* Orange icons in navy card headers (brand accent) */
.card-header:not(.bg-warning) h5 > .bi,
.card-header:not(.bg-warning) .card-title > .bi {
    color: var(--pgw-orange);
}

::selection {
    background: rgba(243, 108, 35, .25);
}

/* --------------------------------------------------------------------------
   16. Helpers (shared with the page templates)
   -------------------------------------------------------------------------- */
.btn-row,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: center;
}

.form-actions {
    margin-top: var(--space-6);
}

/* Phones: form buttons stack full width (primary first), easy to tap */
@media (max-width: 575.98px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions > .btn {
        width: 100%;
    }
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Free-text cell (maintenance notes) inside a scrolling .table-responsive:
   wraps instead of stretching the row to the full note width */
.table-notes-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: min(40rem, calc(100vw - 6rem));
}

/* Large figure outside a coloured tile, e.g. "Total Maintenance Cost" */
.stat-value {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* Utilities that must beat a Bootstrap !important */
.text-muted {
    color: var(--color-text-muted) !important;
}

.text-success {
    color: #0b8a5f !important;   /* AA on white; tiles/badges keep #10b981 */
}

/* --------------------------------------------------------------------------
   17. Media queries
   -------------------------------------------------------------------------- */

/* Expanded navbar: one row for all 8 items */
@media (min-width: 1200px) {
    .navbar-collapse {
        padding-top: 0;
    }
}

/* 1200-1399: tighten - drop the link icons so the row never overflows */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-nav .nav-link > i {
        display: none;
    }
}

/* Collapsed (hamburger) menu */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        padding-top: .5rem;
        padding-bottom: .25rem;
    }

    .navbar-nav .nav-link {
        padding: .75rem .5rem;
        min-height: 2.75rem;
    }

    .navbar-nav .dropdown-menu {
        position: static;
        border: 0;
        box-shadow: none;
        background: var(--gray-50);
        border-radius: var(--radius-md);
        padding: .25rem 0;
        margin: 0 0 .25rem;
    }

    .navbar-nav .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
        padding: .6rem 1rem .6rem 2.25rem;
        border-radius: 0;
    }

    .navbar-nav .dropdown-item-text {
        padding-left: 2.25rem;
    }

    .navbar-nav .nav-item:last-child {
        border-top: 1px solid var(--color-border);
        margin-top: .5rem;
        padding-top: .5rem;
    }

    .user-name {
        max-width: none;
    }
}

/* Below lg: tighter table cells so 6-7 column tables fit at 768 without an
   inner scroll (.table-sm / .table-borderless keep their own tokens) */
@media (max-width: 991.98px) {
    .table {
        --table-cell-pad-y: .625rem;
        --table-cell-pad-x: .75rem;
    }
}

/* Tablet and below */
@media (max-width: 767.98px) {
    .btn {
        min-height: 2.625rem;
    }

    .btn-sm {
        min-height: 2.5rem;
    }

    .list-group {
        --bs-list-group-item-padding-x: .875rem;
    }

    /* compact cells on phones; tables may still scroll inside .table-responsive */
    .table {
        --table-cell-pad-y: .5rem;
        --table-cell-pad-x: .625rem;
        font-size: .8125rem;
    }
}

/* Phones */
@media (max-width: 575.98px) {
    .brand-mark {
        width: 2.25rem;
        height: 2.25rem;
    }

    .brand-eyebrow {
        letter-spacing: .2em;
    }

    .brand-name {
        font-size: .9375rem;
    }

    .navbar-brand {
        margin-right: .5rem;
    }

    .card {
        margin-bottom: var(--space-4);
    }

    .modal {
        --bs-modal-padding: var(--space-4);
        --bs-modal-header-padding: 1rem var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    a,
    .btn,
    .navbar-nav .nav-link,
    .vehicle-card,
    .vehicle-card::after,
    .form-control,
    .form-select,
    .list-group-item-action,
    .table-hover > tbody > tr {
        transition: none;
    }

    .vehicle-card:hover {
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}