@charset "UTF-8";
:root {
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#003366;
    background:#f3f5f8;
    font-synthesis:none;
    --red:#E31E24;
    --blue:#003366;
    --mist:#D7DCE6;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
}

a {
    color:inherit;
}

button,input,select {
    font:inherit;
}

button,.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 18px;
    border:0;
    border-radius:10px;
    background:var(--blue);
    color:#fff;
    font-weight:650;
    text-decoration:none;
    cursor:pointer;
}

button:hover,.button:hover {
    filter:brightness(.92);
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
    outline:3px solid #c86400;
    outline-offset:3px;
}

.quiet {
    background:#e7ecf3;
    color:var(--blue);
}

.variant {
    background:var(--blue);
    color:white;
    padding:8px 20px;
    text-align:center;
    font-size:.78rem;
    letter-spacing:.04em;
}

.topbar {
    background:#fefefe;
    padding:20px max(20px,calc((100vw - 980px)/2));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid var(--mist);
}

.brand {
    font-size:1.5rem;
    font-weight:800;
    text-decoration:none;
    letter-spacing:-.04em;
}

.brand span {
    display:block;
    font-size:.72rem;
    letter-spacing:0;
    font-weight:500;
    margin-top:3px;
}

.header-actions {
    display:flex;
    gap:12px;
    align-items:center;
}

.header-actions form {
    margin:0;
}

.languages {
    display:flex;
    gap:2px;
}

.languages button {
    padding:10px;
    background:transparent;
    color:var(--blue);
}

.languages button[aria-pressed=true] {
    box-shadow:inset 0 -3px var(--red);
    border-radius:0;
}

.content {
    max-width:980px;
    padding:26px 20px 32px;
    margin:auto;
    min-height:70vh;
}

.account {
    font-size:.8rem;
    color:#4b5e73;
    margin-bottom:18px;
}

.search {
    margin-bottom:28px;
}

.search label {
    font-size:.82rem;
}

.search-row {
    display:flex;
    gap:8px;
}

label {
    display:block;
    margin-bottom:7px;
    font-weight:600;
}

input,select {
    border:1px solid #a7b3c2;
    border-radius:9px;
    background:white;
    padding:11px 12px;
    min-height:46px;
    min-width:0;
    width:100%;
    color:var(--blue);
}

h1 {
    font-size:clamp(1.8rem,5vw,2.7rem);
    letter-spacing:-.035em;
    margin:8px 0 22px;
    line-height:1.12;
}

h2 {
    font-size:1.12rem;
    margin:8px 0;
}

p {
    line-height:1.55;
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.7rem;
    color:#53667b;
}

.card {
    background:#fefefe;
    border:1px solid var(--mist);
    padding:22px;
    border-radius:15px;
    margin-bottom:14px;
}

.notice {
    border-left:4px solid var(--blue);
    background:#e6edf5;
    padding:14px 18px;
    border-radius:0 10px 10px 0;
    margin-bottom:22px;
    font-size:.82rem;
    line-height:1.5;
}

.notice span,.notice strong {
    display:block;
}

.stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.stats .card {
    padding:18px;
}

.number {
    display:block;
    font-size:2.25rem;
    margin:14px 0 6px;
    font-weight:750;
}

.stats .card>span:last-child {
    font-size:.8rem;
}

.status {
    display:inline-block;
    white-space:nowrap;
    font-size:.75rem;
    font-weight:700;
    border-radius:6px;
    padding:6px 9px;
    background:#e5e9ee;
    color:#354456;
}

.status.Overdue {
    background:#fce6e6;
    color:#a31218;
}

.status.Approaching {
    background:#fff0d6;
    color:#805000;
}

.status.Ok {
    background:#e3f2e9;
    color:#22613a;
}

.vehicle {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    text-decoration:none;
    border-left:4px solid var(--blue);
}

.vehicle:hover {
    border-color:var(--blue);
}

.vehicle p {
    margin:8px 0 0;
    font-size:.88rem;
}

.vehicle h2 {
    font-size:1.35rem;
}

.muted {
    color:#53667b;
    font-size:.85rem;
}

.filters {
    display:flex;
    gap:15px;
    align-items:end;
}

.filters>div {
    flex:1;
}

.details {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:12px;
}

.details dt {
    color:#53667b;
}

.details dd {
    margin:0;
    overflow-wrap:anywhere;
}

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

.back {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    margin-bottom:14px;
}

.login {
    max-width:620px;
    margin:30px auto;
}

.login button {
    margin-top:18px;
    width:100%;
}

.hero {
    padding:35px 0;
}

.hero h1 {
    max-width:660px;
}

.logo {
    display:block;
    max-width:220px;
    height:auto;
    margin-top:35px;
}

.bottom-nav {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fefefe;
    border-top:1px solid var(--mist);
    display:flex;
    justify-content:center;
    padding-bottom:env(safe-area-inset-bottom);
    z-index:10;
}

.bottom-nav a {
    flex:1;
    max-width:220px;
    text-align:center;
    text-decoration:none;
    padding:9px 6px 12px;
    font-size:.77rem;
    color:#53667b;
    min-height:64px;
}

.bottom-nav a span {
    display:block;
    font-size:1.3rem;
    line-height:1.3;
}

.bottom-nav a[aria-current=page] {
    color:var(--blue);
    font-weight:800;
    box-shadow:inset 0 3px var(--red);
    background:#eef2f7;
}

footer {
    text-align:center;
    color:#53667b;
    font-size:.73rem;
    padding:20px 20px 110px;
}

.skip {
    position:absolute;
    left:-9999px;
}

.skip:focus {
    left:12px;
    top:12px;
    background:white;
    padding:14px;
    z-index:100;
}

@media(max-width:540px) {
    .topbar {
        padding:14px 16px;
        flex-wrap:wrap;
    }

    .brand {
        font-size:1.3rem;
    }

    .header-actions {
        gap:5px;
    }

    .header-actions .quiet {
        font-size:.8rem;
        padding:10px;
    }

    .content {
        padding:22px 16px;
    }

    .stats {
        gap:7px;
    }

    .stats .card {
        padding:12px 9px;
    }

    .stats .status {
        font-size:.65rem;
        padding:5px;
    }

    .card {
        padding:18px;
    }

    .filters {
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

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

    .number {
        font-size:1.9rem;
    }

    .vehicle {
        gap:9px;
    }

    .details {
        grid-template-columns:1fr;
        gap:6px;
    }

    .details dd {
        margin-bottom:10px;
    }

}

@media(prefers-reduced-motion:no-preference) {
    a,button {
        transition:background-color .12s;
    }

}

.toolbar, .pagination { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0; }
.pagination { justify-content:space-between; }
.stat-link { text-decoration:none; }
.status.Local { color:#003366; background:#e1ecfa; white-space:normal; }
.vehicle > div { min-width:0; overflow-wrap:anywhere; }
.vehicle .status { white-space:normal; text-align:center; max-width:115px; flex-shrink:0; }
.stats .status { white-space:normal; }
fieldset { border:0; margin:0 0 20px; padding:0; }
legend { font-weight:700; margin-bottom:12px; }
.radio { display:flex; align-items:center; gap:12px; min-height:48px; }
.radio input { width:24px; height:24px; min-height:24px; }
.validation { color:#a31218; }
[id^="maintenance-"] { scroll-margin-top:18px; }
@media(min-width:541px) { .filters { flex-wrap:wrap; } .filters>div { min-width:160px; } }

textarea { font:inherit; width:100%; padding:12px; border:1px solid #a7b3c2; border-radius:9px; color:var(--blue); resize:vertical; }
.task-form label { margin-top:18px; }
.task-form button { margin-top:20px; }
.task-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.task-card { display:block; text-decoration:none; border-left:4px solid var(--blue); overflow-wrap:anywhere; }
.task-card h2 { line-height:1.4; }
.task-badges { display:flex; flex-wrap:wrap; gap:8px; }
.task-description { white-space:pre-wrap; overflow-wrap:anywhere; }
h1 { overflow-wrap:anywhere; }
@media(max-width:540px) { .task-filters { grid-template-columns:minmax(0,1fr); } }

.validation-summary-valid { display:none; }

.task-filter-panel summary { min-height:44px; cursor:pointer; font-weight:700; padding:10px 0; }
.task-filter-panel[open] summary { margin-bottom:18px; }

.work-entry { margin-block: 1rem; overflow-wrap: anywhere; }
.work-stats h2 { margin-top: 0; }
.work-stats p { margin-block: .5rem; }

@media (max-width: 599px) {
    .work-stats { grid-template-columns: 1fr; }
    .work-stats section { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .work-stats h2, .work-stats small { grid-column: 1 / -1; margin: 0; }
    .work-stats p { margin: 0; }
}

/* Personal compact layout keeps controls touchable while reducing repeated card whitespace. */
.compact .vehicle.card { padding:10px 12px; margin-bottom:7px; border-radius:10px; gap:10px; }
.compact .vehicle h2 { font-size:1.05rem; margin:3px 0; }
.compact .vehicle p { margin:2px 0 0; line-height:1.3; }
.compact .task-card { padding:12px; margin-bottom:8px; }
.compact .task-card p { margin:6px 0; }
.compact .number { font-size:1.7rem; margin:6px 0 2px; }
.compact .account { margin-bottom:0; }
.compact .search { margin-bottom:14px; }
.compact .page-heading h1 { font-size:1.8rem; margin-bottom:14px; }
.compact .page-heading .eyebrow { display:none; }
.compact .notice { margin-bottom:12px; padding:10px 14px; }
.compact .maintenance-detail { padding:12px; }
.compact .maintenance-detail p { margin:8px 0; }
.fleet-filter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.filter-choice { border:1px solid var(--mist); border-radius:9px; min-width:0; }
.filter-choice summary { padding:12px; min-height:46px; cursor:pointer; overflow-wrap:anywhere; font-weight:650; }
.filter-checks { padding:8px; max-height:270px; overflow-y:auto; }
.filter-checks label { display:flex; align-items:center; gap:10px; min-height:44px; margin:0; font-size:.9rem; }
.filter-checks input { width:22px; height:22px; min-height:22px; flex-shrink:0; }
.actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; }
.actions .back { margin-bottom:0; }
.dashboard-filters { padding:12px; }
.settings-link { margin-bottom:6px; }
@media(max-width:380px) { .fleet-filter-grid { grid-template-columns:1fr; } }

.maintenance-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px; }
.compact .maintenance-row h2 { margin:0; }
.completion-confirm { margin-top:20px; }