/* =============================================================================
   AutoEzi design tokens (DESIGN.md v2.0 §1, §2) — trustworthy fintech base with
   warm touches: deep-blue trust signal on a warm ivory canvas, rounder corners,
   a warm green positive accent. Defined once here as CSS custom properties;
   Bootstrap's own variables are mapped onto them below so we theme Bootstrap
   rather than fork it.
   ============================================================================= */
:root {
    /* Color palette (DESIGN §1). *-rgb mirrors each hex for rgba() composition
       and Bootstrap's --bs-*-rgb hooks. Never pure black. */
    --ae-primary: #1E4FD0;
    --ae-primary-rgb: 30, 79, 208;
    --ae-primary-dark: #16399B;
    --ae-primary-dark-rgb: 22, 57, 155;
    --ae-primary-soft: #E8EEFC;
    --ae-primary-soft-rgb: 232, 238, 252;

    --ae-ink: #0F1E40;
    --ae-text: #1C2840;
    --ae-text-muted: #5A6B85;
    --ae-text-muted-rgb: 90, 107, 133;

    --ae-bg: #F7F4EE;          /* warm ivory canvas (v2.0) */
    --ae-surface: #FFFFFF;
    --ae-border: #EAE4DA;      /* warm neutral border (v2.0) */

    --ae-success: #2E9E7E;     /* warm green positive accent (v2.0) */
    --ae-success-rgb: 46, 158, 126;
    --ae-warning: #B97E0F;
    --ae-warning-rgb: 185, 126, 15;
    --ae-danger: #C9352B;
    --ae-danger-rgb: 201, 53, 43;

    /* Soft status-badge token pairs (DESIGN §4). Each badge is a 12%-over-white
       tint of its hue plus a dedicated darker text colour, because the strong §1
       hue on its own tint fails WCAG AA (measured 2.95–4.37:1). Re-measured over
       the composited tint at badge text size, all clear AA 4.5:1:
       success 5.17:1 · warning 5.75:1 · danger 5.58:1 · muted 5.12:1.
       v2.0: --ae-success moved to the warm green #2E9E7E; its lighter 12% tint
       lifts #157346 from 5.06:1 to 5.17:1, so the text token is unchanged. */
    --ae-badge-success-bg: rgba(var(--ae-success-rgb), .12);
    --ae-badge-success-text: #157346;
    --ae-badge-warning-bg: rgba(var(--ae-warning-rgb), .12);
    --ae-badge-warning-text: #7E5600;
    --ae-badge-danger-bg: rgba(var(--ae-danger-rgb), .12);
    --ae-badge-danger-text: #B0271D;
    --ae-badge-muted-bg: rgba(var(--ae-text-muted-rgb), .12);
    --ae-badge-muted-text: #54647D;

    /* Radius scale (DESIGN v2.0 §2), rounder for warmth: cards/modals 16px,
       buttons/inputs 12px, plate 6px. */
    --ae-radius-card: 16px;
    --ae-radius-control: 12px;
    --ae-radius-plate: 6px;

    /* One subtle elevation level only — border + shadow, never heavy drops. */
    --ae-shadow: 0 1px 3px rgb(15 30 64 / .08);

    /* ---- Bootstrap variable mapping ---- */
    /* Inter is the UI typeface (DESIGN v2.0 §2); the system stack leads so first
       paint never blocks, and Inter swaps in via font-display:swap on the
       Google Fonts <link> in _Layout. Monospace (the plate) is left untouched. */
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-bg: var(--ae-bg);
    --bs-body-color: var(--ae-text);
    --bs-secondary-color: var(--ae-text-muted);
    --bs-tertiary-color: var(--ae-text-muted);
    --bs-heading-color: var(--ae-ink);
    /* <code> (e.g. the error Request ID) — off Bootstrap's default pink #d63384,
       onto the muted palette colour so it reads as metadata, not an accent. */
    --bs-code-color: var(--ae-text-muted);
    --bs-border-color: var(--ae-border);
    --bs-border-color-translucent: var(--ae-border);

    --bs-primary: var(--ae-primary);
    --bs-primary-rgb: var(--ae-primary-rgb);
    --bs-link-color: var(--ae-primary);
    --bs-link-color-rgb: var(--ae-primary-rgb);
    --bs-link-hover-color: var(--ae-primary-dark);
    --bs-link-hover-color-rgb: var(--ae-primary-dark-rgb);

    --bs-success: var(--ae-success);
    --bs-success-rgb: var(--ae-success-rgb);
    --bs-warning: var(--ae-warning);
    --bs-warning-rgb: var(--ae-warning-rgb);
    --bs-danger: var(--ae-danger);
    --bs-danger-rgb: var(--ae-danger-rgb);

    --bs-border-radius: var(--ae-radius-control);
    --bs-border-radius-sm: var(--ae-radius-plate);
    --bs-border-radius-lg: var(--ae-radius-card);

    /* Focus ring (DESIGN §6) drawn as an outline; suppress Bootstrap's glow. */
    --bs-focus-ring-color: rgba(var(--ae-primary-rgb), .35);
}

/* 1rem = 16px everywhere; body text is --ae-text on --ae-bg (DESIGN §2). */
html {
    font-size: 16px;
}

body {
    background-color: var(--ae-bg);
    color: var(--ae-text);
}

/* =============================================================================
   Typography scale (DESIGN §2). Headings in --ae-ink.
   page title 1.5rem/600 · section heading 1.125rem/600 · body 1rem/400.
   ============================================================================= */
h1, .h1 {
    font-size: 1.5rem;
    font-weight: 600;
}

h2, .h2,
h3, .h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ae-ink);
}

/* Secondary text / captions / km + date metadata (DESIGN §2, §4). */
.ae-meta {
    font-size: .875rem;
    color: var(--ae-text-muted);
}

/* =============================================================================
   Layout & navigation (DESIGN §5). Phone-first; content capped at 720px so the
   product never looks broken on a laptop. Overrides Bootstrap's wider tiers.
   ============================================================================= */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    max-width: 720px;
}

.navbar {
    background-color: var(--ae-surface);
    border-bottom: 1px solid var(--ae-border);
}

/* Nav stays inline and fully visible at every width — no hamburger (DESIGN §5).
   navbar-expand forces nowrap; re-enable wrapping so the row drops to a second
   line on narrow screens instead of overflowing or clipping the lang/logout. */
.navbar > .container {
    flex-wrap: wrap;
    row-gap: .25rem;
}

.navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

/* Brand wordmark: "Auto" in ink, "Ezi" in primary (markup adds the span). */
.navbar-brand {
    font-weight: 700;
    color: var(--ae-ink);
}

.ae-brand-accent {
    color: var(--ae-primary);
}

/* Sticky footer (DESIGN §5; fixes X-1). The footer flows after content and rests
   at the viewport bottom on short pages — it never overlaps, which the old
   position:absolute rule did on any page taller than the viewport. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .container {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    padding: 1rem 0;
}

/* =============================================================================
   Surfaces (DESIGN §2): cards padded 1rem (mobile) / 1.5rem (≥md), 12px radius,
   border + single subtle shadow.
   ============================================================================= */
.card {
    --bs-card-bg: var(--ae-surface);
    --bs-card-border-color: var(--ae-border);
    --bs-card-border-radius: var(--ae-radius-card);
    --bs-card-inner-border-radius: calc(var(--ae-radius-card) - 1px);
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    box-shadow: var(--ae-shadow);
}

@media (min-width: 768px) {
    .card {
        --bs-card-spacer-y: 1.5rem;
        --bs-card-spacer-x: 1.5rem;
    }
}

/* =============================================================================
   Buttons (DESIGN §2, §4): primary is the one accent; map the component vars
   Bootstrap bakes in as literals so the theme colour actually takes.
   ============================================================================= */
.btn {
    --bs-btn-border-radius: var(--ae-radius-control);
    font-weight: 500;
}

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

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

/* Success button (reminders "Concluir"). The v2.0 success hue #2E9E7E is a
   fill/accent colour — as a button label on white it is only 3.33:1, and white
   on a #2E9E7E hover fill is the same, both below AA. Drive the control off the
   darker badge-success green instead (#157346): label/border on white = 5.88:1,
   and white on the #157346 hover/active fill = 5.88:1. Still green and positive,
   now AA-clear in every state (matches the §1/§4 "strong hue is not light-bg text"
   rule). */
.btn-outline-success {
    --bs-btn-color: var(--ae-badge-success-text);
    --bs-btn-border-color: var(--ae-badge-success-text);
    --bs-btn-hover-bg: var(--ae-badge-success-text);
    --bs-btn-hover-border-color: var(--ae-badge-success-text);
    --bs-btn-active-bg: var(--ae-badge-success-text);
    --bs-btn-active-border-color: var(--ae-badge-success-text);
    --bs-btn-disabled-color: var(--ae-badge-success-text);
    --bs-btn-disabled-border-color: var(--ae-badge-success-text);
}

/* =============================================================================
   Forms (DESIGN §4): 8px radius, primary focus border, ≥44px touch targets (§6).
   Labels-above is markup.
   ============================================================================= */
.form-control,
.form-select {
    --bs-border-radius: var(--ae-radius-control);
    min-height: 2.75rem;
}

.form-label {
    font-weight: 500;
    color: var(--ae-text);
    margin-bottom: .35rem;
}

/* Native file input (DESIGN §2): we keep the control, so its built-in button
   text stays in the browser locale (documented limitation) — the field's name
   is the localised <label> above it. Brand the selector button so it still
   reads as part of the UI. */
.form-control[type="file"]::file-selector-button {
    margin: -.375rem .75rem -.375rem -.75rem;
    padding: .375rem .75rem;
    border: 0;
    border-right: 1px solid var(--ae-border);
    background: var(--ae-primary-soft);
    color: var(--ae-primary-dark);
    font-weight: 500;
}

/* =============================================================================
   Inline alerts (DESIGN §4) — the km-decrease warning and the success flash.
   Bootstrap's default subtle mint/amber read cool next to the v2.0 warm palette,
   so reuse the AA-verified soft-badge token pairs (success 5.17:1 · warning 5.75:1
   · danger 5.58:1 over their tint); the border is a slightly stronger tint of the
   same hue. Calm, not alarming.
   ============================================================================= */
.alert-success {
    --bs-alert-bg: var(--ae-badge-success-bg);
    --bs-alert-color: var(--ae-badge-success-text);
    --bs-alert-border-color: rgba(var(--ae-success-rgb), .28);
}

.alert-warning {
    --bs-alert-bg: var(--ae-badge-warning-bg);
    --bs-alert-color: var(--ae-badge-warning-text);
    --bs-alert-border-color: rgba(var(--ae-warning-rgb), .28);
}

.alert-danger {
    --bs-alert-bg: var(--ae-badge-danger-bg);
    --bs-alert-color: var(--ae-badge-danger-text);
    --bs-alert-border-color: rgba(var(--ae-danger-rgb), .28);
}

/* =============================================================================
   Accessibility & motion (DESIGN §6): a visible 2px primary focus ring offset
   2px on every interactive element; calm 150ms transitions; reduced-motion honoured.
   ============================================================================= */
:focus-visible {
    outline: 2px solid var(--ae-primary);
    outline-offset: 2px;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--ae-primary);
    outline-offset: 2px;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ae-primary);
}

/* Touch targets >= 44px (DESIGN §6, fixes X-5). On coarse (touch) pointers only,
   raise buttons and nav links to a 44px min height so the small actions (reminder
   Edit/Snooze/Complete/Dismiss, timeline Update/Export) and the nav language /
   logout buttons are comfortably tappable. Pointer devices keep compact sizing.
   inline-flex centres the label within the taller box. */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navbar .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   Shared components (DESIGN §3, §4) — built as partials in Features/Shared and
   styled here so they stay reusable across screens.
   ============================================================================= */

/* Matrícula plate chip (DESIGN §3) — the product's signature element:
   EU-style white plate, blue "P" band on the left, monospaced uppercase. */
.ae-plate {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-plate);
    background: var(--ae-surface);
    overflow: hidden;
    font-family: var(--bs-font-monospace);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.ae-plate__band {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .4rem;
    background: var(--ae-primary-dark);
    color: #fff;
    font-size: .625rem;
    letter-spacing: .02em;
}

.ae-plate__text {
    padding: .35rem .55rem;
    color: var(--ae-ink);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .95rem;
}

.ae-plate--lg .ae-plate__text {
    padding: .5rem .85rem;
    font-size: 1.25rem;
}

.ae-plate--lg .ae-plate__band {
    padding: 0 .55rem;
    font-size: .8rem;
}

/* Status badges (DESIGN §4) — soft pill, one urgent item, never a punishing tone. */
.ae-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Hue variants use the soft-badge token pairs so text-on-tint meets AA 4.5:1
   (DESIGN §1 contrast scope, §4 badge tokens). */
.ae-badge--success {
    background: var(--ae-badge-success-bg);
    color: var(--ae-badge-success-text);
}

.ae-badge--warning {
    background: var(--ae-badge-warning-bg);
    color: var(--ae-badge-warning-text);
}

.ae-badge--danger {
    background: var(--ae-badge-danger-bg);
    color: var(--ae-badge-danger-text);
}

.ae-badge--muted {
    background: var(--ae-badge-muted-bg);
    color: var(--ae-badge-muted-text);
}

/* Circular icon badge — reused by reminders (and similar to the timeline dot). */
.ae-icon-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ae-primary-soft);
    color: var(--ae-primary);
}

.ae-icon-dot .ae-cat-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Positive / on-track cue (DESIGN v2.0 §4): the warm green powers healthy status
   only, never decoration. A success-tint circle behind a green icon — the icon
   uses the darker badge-success-text green (#157346, 5.17:1 on the tint) rather
   than the strong hue (#2E9E7E is only 2.93:1 here), so it clears AA. */
.ae-icon-dot--success {
    background: var(--ae-badge-success-bg);
    color: var(--ae-badge-success-text);
}

/* Small dot for sitting inline beside a status badge. */
.ae-icon-dot--sm {
    width: 1.75rem;
    height: 1.75rem;
}

.ae-icon-dot--sm svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* The healthy status row: green dot + "Em dia" badge on one baseline. */
.ae-status-ok {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* =============================================================================
   Auth, error & offline (DESIGN §4, §5) — a calm centered card, never a bare
   form or a browser-style error page.
   ============================================================================= */
.ae-auth {
    max-width: 420px;
    margin: 1.5rem auto;
}

/* Category icons (DESIGN §4) — inline SVG sized to the 24px grid. */
.ae-cat-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
}

/* Empty states (DESIGN §4) — an onboarding opportunity, not a dead end. */
.ae-empty {
    text-align: center;
    padding: 2.5rem 1rem;
}

.ae-empty__icon {
    color: var(--ae-primary);
    margin-bottom: .75rem;
}

.ae-empty__msg {
    font-size: 1rem;
    color: var(--ae-text);
    margin-bottom: 1.25rem;
}

/* =============================================================================
   Garage (DESIGN §4) — whole card clickable to the timeline; the add action is a
   dashed ghost card rather than a competing primary button.
   ============================================================================= */
.ae-vehicle-card {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ae-vehicle-card:hover {
    border-color: var(--ae-primary);
}

.ae-ghost-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 100%;
    padding: 1.5rem;
    border: 1px dashed var(--ae-border);
    border-radius: var(--ae-radius-card);
    color: var(--ae-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease;
}

.ae-ghost-card:hover {
    border-color: var(--ae-primary);
    color: var(--ae-primary);
}

/* =============================================================================
   Log Intervention (DESIGN §4) — the 30-second flow. Category tiles ≥72px,
   selected = primary-soft + primary border; optional fields de-emphasized.
   ============================================================================= */
.ae-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: 100%;
    min-height: 72px;
    padding: .6rem .4rem;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-control);
    background: var(--ae-surface);
    color: var(--ae-text);
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.ae-cat-tile small {
    font-size: .75rem;
    line-height: 1.15;
    /* Long taxonomy labels ("Ar condicionado", "Lavagem e detalhe") wrap cleanly
       and never sit tight against the tile edge. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.ae-cat-tile .ae-cat-icon {
    color: var(--ae-text-muted);
}

.ae-cat-tile:hover {
    border-color: var(--ae-primary);
}

.btn-check:checked + .ae-cat-tile {
    background: var(--ae-primary-soft);
    border-color: var(--ae-primary);
    color: var(--ae-primary-dark);
}

.btn-check:checked + .ae-cat-tile .ae-cat-icon {
    color: var(--ae-primary);
}

.btn-check:focus-visible + .ae-cat-tile {
    outline: 2px solid var(--ae-primary);
    outline-offset: 2px;
}

/* Optional-fields section — present but visually secondary to the required trio. */
.ae-optional {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ae-border);
}

.ae-optional__title {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ae-text-muted);
    margin-bottom: 1rem;
}

/* Service-visit line items (SERVICE_VISIT_SPEC §4): each item is a soft-bordered row
   in a removable list; "Mais detalhes" is a native disclosure (no JS). */
.ae-item-row {
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-control);
    padding: .85rem;
    margin-bottom: .75rem;
    background: var(--ae-surface);
}
.ae-item-row__head {
    display: flex;
    justify-content: flex-end;
}
.ae-item-row__remove {
    color: var(--ae-text-muted);
    text-decoration: none;
}
.ae-item-row__remove:hover {
    color: var(--ae-danger, #b42318);
}
.ae-more-details > summary {
    cursor: pointer;
    font-size: .8125rem;
    color: var(--ae-primary-dark);
    list-style-position: inside;
}

/* =============================================================================
   Timeline (DESIGN §4) — filter pills, a vertical rail with a category icon dot
   per entry, muted metadata row, right-aligned cost, sticky month separators.
   ============================================================================= */
.ae-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ae-chip {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border: 1px solid var(--ae-border);
    border-radius: 999px;
    background: var(--ae-surface);
    color: var(--ae-text);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.ae-chip:hover {
    border-color: var(--ae-primary);
}

.ae-chip--active {
    background: var(--ae-primary-soft);
    border-color: var(--ae-primary);
    color: var(--ae-primary-dark);
}

.ae-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ae-timeline__sep {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .35rem 0;
    margin-bottom: .25rem;
    background: var(--ae-bg);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ae-text-muted);
}

.ae-timeline__item {
    position: relative;
    padding-left: 2.75rem;
    padding-bottom: 1.25rem;
}

/* The rail: a line behind the dots. */
.ae-timeline__item::before {
    content: "";
    position: absolute;
    left: .9rem;
    top: .2rem;
    bottom: -.2rem;
    width: 2px;
    background: var(--ae-border);
}

.ae-timeline__item:last-child::before {
    bottom: auto;
    height: 1.7rem;
}

.ae-timeline__dot {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--ae-border);
    background: var(--ae-primary-soft);
    color: var(--ae-primary);
}

.ae-timeline__dot--meta {
    background: var(--ae-surface);
    color: var(--ae-text-muted);
}

.ae-timeline__dot .ae-cat-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.ae-timeline__head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.ae-timeline__cost {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ae-text);
}

/* The heading link to a visit's detail (INTERVENTION_DETAIL_SPEC §2): keeps the heading's
   ink colour, underlining only on hover/focus. Paired with .stretched-link so the whole
   timeline entry is the click target. */
.ae-timeline__link {
    color: inherit;
    text-decoration: none;
}

.ae-timeline__link:hover,
.ae-timeline__link:focus-visible {
    text-decoration: underline;
}

/* Per-visit category chips (multi-item visits, SERVICE_VISIT_SPEC §5): non-interactive,
   smaller than the filter pills, sitting just under the heading row. */
.ae-timeline__chips {
    margin-top: .35rem;
    margin-bottom: .1rem;
}
.ae-timeline__chips .ae-chip {
    font-size: .75rem;
    padding: .1rem .5rem;
    cursor: default;
}

/* Each visit row is tappable to its detail (DESIGN §4 Timeline): a muted chevron on the
   right signals it. The body reserves a right gutter so the cost never collides with it.
   Decorative — the heading's stretched-link is the real, accessible click target. */
.ae-timeline__body {
    padding-right: 1.5rem;
}

.ae-timeline__chevron {
    position: absolute;
    right: 0;
    top: .25rem;
    display: inline-flex;
    color: var(--ae-text-muted);
}

/* =============================================================================
   Vehicle detail screen (DESIGN v2.1 §4) — exactly two surface cards: a vehicle
   card (identity + stats + the ⋯ actions) and a history card. No loose controls.
   ============================================================================= */

/* Top row of the vehicle card: identity left, actions (+ ⋯ menu) right. */
.ae-vehicle-card-detail__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem 1rem;
    flex-wrap: wrap;
}

.ae-vehicle-card-detail__heading {
    margin: .6rem 0 0;
}

.ae-vehicle-card-detail__actions {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
}

/* Two stat tiles (Km atuais / Total gasto) on the soft canvas tint (DESIGN §4). */
.ae-stat-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 1.25rem;
}

.ae-stat-tile {
    padding: .85rem 1rem;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-control);
    background: var(--ae-bg);
}

.ae-stat-tile__value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ae-ink);
}

/* Inline km edit (DESIGN §4): a JS-free <details> — the summary shows the value plus a
   pencil affordance, opening it reveals the form in place (posts to the existing UpdateKm
   handler). The old standalone "Atualizar km" card is removed. */
.ae-km-edit > summary {
    list-style: none;
    cursor: pointer;
}

.ae-km-edit > summary::-webkit-details-marker {
    display: none;
}

.ae-km-edit__summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.ae-km-edit__pencil {
    display: inline-flex;
    color: var(--ae-primary);
}

.ae-km-edit__form {
    margin-top: .65rem;
}

/* Keep the inline km input compact — it is one stat tile, not a full-width form. */
.ae-km-edit__form .form-control {
    max-width: 10rem;
}

/* Read-only spec block under the stats (VEHICLE_EDIT_SPEC §3): fuel / first reg / VIN. */
.ae-vehicle-specs__title {
    margin: 1.25rem 0 .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ae-border);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ae-text-muted);
}

.ae-vehicle-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
}

/* Touch targets >= 44px on touch pointers (DESIGN §6): the pencil summary is tappable. */
@media (pointer: coarse) {
    .ae-km-edit__summary {
        min-height: 44px;
    }
}

/* Desktop primary cluster in the card header (Reminders + Registar); hidden < md. */
.ae-actions-desktop {
    gap: .5rem;
}

/* Single scrollable filter row (DESIGN §4 / Timeline): category + year pills on one line.
   On mobile it scrolls horizontally instead of wrapping into two stacked rows; on desktop
   it wraps. Chips keep their size so the row scrolls cleanly. */
.ae-filter-row {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    overflow-x: auto;
    /* Bleed the scroll area to the card edges so the last chip isn't clipped mid-pill. */
    margin-left: -.25rem;
    margin-right: -.25rem;
    padding: .25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.ae-filter-row .ae-chip {
    flex: none;
}

/* A hairline divider between the category group and the year group within the one row. */
.ae-filter-row__sep {
    flex: none;
    align-self: stretch;
    width: 1px;
    margin: .15rem .25rem;
    background: var(--ae-border);
}

@media (min-width: 768px) {
    .ae-filter-row {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* Mobile fixed bottom action bar (DESIGN §4): the Lembretes bell next to a full-width
   primary "Registar", within thumb reach. Respects safe-area-inset-bottom; the spacer
   reserves equivalent room so the timeline never hides behind it. Hidden >= md. */
.ae-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--ae-surface);
    border-top: 1px solid var(--ae-border);
    box-shadow: 0 -1px 3px rgb(15 30 64 / .08);
}

/* The bell icon button — square, >= 44px, with headroom for a future reminder-count badge. */
.ae-action-bar__bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-control);
    background: var(--ae-surface);
    color: var(--ae-primary);
}

.ae-action-bar__bell > svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* Reserves the bar's height at the foot of the page (mobile only). */
.ae-action-bar-spacer {
    height: calc(3.75rem + env(safe-area-inset-bottom));
}

/* =============================================================================
   Top navigation (DESIGN §5, redesigned 2026-06-14). The right-side cluster holds
   a language picker (globe + PT/EN code + chevron) and, signed in, an account
   avatar menu (initials → dropdown with name + muted email + links). Shared by the
   app layout and the landing header via the _LanguagePicker / _AccountMenu partials
   and these GLOBAL styles, so both chromes stay identical. v2.0 tokens, rounder
   corners, one subtle elevation level for the dropdown. The dropdown behaviour is
   the minimal vanilla helper in js/nav.js (toggles .is-open, sets aria-expanded).
   ============================================================================= */
.ae-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Sign-in link beside the primary "create account" button (signed out). */
.ae-nav-login {
    font-weight: 500;
    color: var(--ae-text);
    text-decoration: none;
    padding: .35rem .25rem;
}

.ae-nav-login:hover {
    color: var(--ae-primary);
}

/* Dropdown wrapper: positioning context for the panel. */
.ae-nav-menu {
    position: relative;
}

/* ---- Language picker trigger (globe pill) ---- */
.ae-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.5rem;
    padding: .35rem .6rem;
    border: 1px solid var(--ae-border);
    border-radius: 999px;
    background: var(--ae-surface);
    color: var(--ae-text);
    font-weight: 500;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.ae-lang-trigger:hover {
    border-color: var(--ae-primary);
}

.ae-lang-trigger > svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
}

.ae-lang-trigger__code {
    letter-spacing: .04em;
}

.ae-lang-trigger__chev {
    width: .85rem !important;
    height: .85rem !important;
    color: var(--ae-text-muted);
    transition: transform 150ms ease;
}

.ae-nav-menu.is-open .ae-lang-trigger__chev {
    transform: rotate(180deg);
}

/* ---- Account avatar trigger ---- */
.ae-avatar-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    cursor: pointer;
}

.ae-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ae-primary-soft);
    color: var(--ae-primary);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .02em;
    transition: box-shadow 150ms ease;
}

.ae-avatar svg {
    width: 1.35rem;
    height: 1.35rem;
}

.ae-avatar-trigger:hover .ae-avatar {
    box-shadow: 0 0 0 3px var(--ae-primary-soft);
}

/* ---- Dropdown panel + items ---- */
.ae-menu-panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 1030;
    min-width: 12rem;
    padding: .35rem;
    background: var(--ae-surface);
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-card);
    box-shadow: var(--ae-shadow);
    display: none;
}

.ae-nav-menu.is-open .ae-menu-panel {
    display: block;
}

.ae-menu-panel--account {
    min-width: 15rem;
    max-width: min(20rem, calc(100vw - 1.5rem));
}

.ae-lang-panel {
    min-width: 11rem;
}

.ae-lang-panel__heading {
    margin: 0;
    padding: .35rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ae-text-muted);
}

.ae-menu__header {
    padding: .5rem .65rem .65rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--ae-border);
}

.ae-menu__name {
    display: block;
    font-weight: 600;
    color: var(--ae-ink);
}

.ae-menu__email {
    display: block;
    font-size: .8125rem;
    color: var(--ae-text-muted);
    overflow-wrap: anywhere;
}

.ae-menu-panel form {
    margin: 0;
}

.ae-menu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 2.5rem;
    padding: .5rem .65rem;
    border: 0;
    border-radius: var(--ae-radius-control);
    background: none;
    color: var(--ae-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.ae-menu-item:hover {
    background: var(--ae-primary-soft);
    color: var(--ae-primary-dark);
}

.ae-menu-item > svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: none;
    color: var(--ae-text-muted);
}

.ae-menu-item:hover > svg {
    color: var(--ae-primary);
}

.ae-menu-item--active {
    color: var(--ae-primary-dark);
    font-weight: 600;
}

.ae-menu-item__check {
    display: inline-flex;
    margin-left: auto;
    color: var(--ae-primary);
}

.ae-menu-item__check svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Logout: the one destructive action, in the danger hue (AA on white; the hover
   uses the AA-verified danger soft-badge token pair). */
.ae-menu-item--danger {
    color: var(--ae-danger);
}

.ae-menu-item--danger > svg {
    color: var(--ae-danger);
}

.ae-menu-item--danger:hover {
    background: var(--ae-badge-danger-bg);
    color: var(--ae-badge-danger-text);
}

.ae-menu-item--danger:hover > svg {
    color: var(--ae-badge-danger-text);
}

.ae-menu-divider {
    height: 1px;
    margin: .35rem .35rem;
    background: var(--ae-border);
}

/* Touch targets >= 44px on touch pointers (DESIGN §6). */
@media (pointer: coarse) {
    .ae-lang-trigger,
    .ae-menu-item {
        min-height: 44px;
    }

    .ae-avatar-trigger,
    .ae-avatar {
        width: 44px;
        height: 44px;
    }
}

/* Mobile: the globe shrinks to icon + chevron to save space (DESIGN §5); the
   account/login actions stay inline and visible — never a hamburger. */
@media (max-width: 575px) {
    .ae-lang-trigger__code {
        display: none;
    }
}

/* =============================================================================
   License-plate auto-fill (PLATE_LOOKUP_SPEC) — Add Vehicle. Reuses the plate-chip
   look for the input and the v2.0 tokens (ivory/blue/green, rounder corners).
   ============================================================================= */

/* The plate field echoes the signature plate chip: monospaced, uppercase, spaced. */
.ae-plate-input {
    font-family: var(--bs-font-monospace);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.ae-plate-input::placeholder {
    letter-spacing: normal;
    font-weight: 400;
    text-transform: none;
}

/* Loading state (spec §2 step 2): visible only while the lookup request is in flight.
   hx-indicator adds .htmx-request to #lookup-indicator for the request's duration. */
.ae-lookup-indicator {
    display: none;
    padding: 1rem;
    border: 1px solid var(--ae-border);
    border-radius: var(--bs-border-radius-lg);
    background: var(--ae-bg);
}

.ae-lookup-indicator.htmx-request {
    display: block;
}

/* Skeleton rows — calm placeholders while data loads. */
.ae-skeleton {
    height: 1.25rem;
    border-radius: var(--ae-radius-plate, 6px);
    background: var(--ae-border);
}

.ae-skeleton--short {
    width: 45%;
}

/* Shimmer only when motion is welcome (DESIGN §6: respect prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
    .ae-skeleton {
        background: linear-gradient(90deg, var(--ae-border) 25%, var(--ae-surface) 50%, var(--ae-border) 75%);
        background-size: 400% 100%;
        animation: ae-skeleton-shimmer 1.4s ease infinite;
    }

    @keyframes ae-skeleton-shimmer {
        0% { background-position: 100% 0; }
        100% { background-position: 0 0; }
    }
}

/* Step 3: the green "found" confirmation — warm, positive, never alarming. Uses the
   success soft-badge token pair, which clears AA 4.5:1 over the tint (DESIGN §1/§4). */
.ae-lookup-found {
    padding: .75rem 1rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--ae-success);
    background: var(--ae-badge-success-bg);
    color: var(--ae-badge-success-text);
    font-weight: 600;
}

/* Step 4: the calm fallback note (not found / error) — neutral info tone, not danger. */
.ae-lookup-note {
    padding: .75rem 1rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--ae-border);
    background: var(--ae-primary-soft);
    color: var(--ae-text);
}

/* =============================================================================
   Legal / long-form prose (Privacy, Terms). The policy body is the sanctioned
   exception to resx-per-string (CLAUDE.md): it lives in culture content partials,
   rendered inside the standard card. Tighten the heading rhythm and list spacing
   so a 13-section policy stays scannable within the 720px column.
   ============================================================================= */
.ae-legal > :first-child {
    margin-top: 0;
}

.ae-legal__updated {
    margin-top: -.25rem;
    margin-bottom: 1.5rem;
}

.ae-legal h2 {
    margin-top: 1.75rem;
    margin-bottom: .5rem;
}

.ae-legal p,
.ae-legal li {
    line-height: 1.65;
}

.ae-legal ul {
    padding-left: 1.25rem;
}

.ae-legal li + li {
    margin-top: .35rem;
}

/* =============================================================================
   Vehicle ⋯ overflow menu (DESIGN v2.1 §4) — the occasional, higher-stakes vehicle
   actions (Transferir / Editar / Eliminar). A real <button> trigger reusing the §5
   nav dropdown pattern (js/nav.js); the panel reuses .ae-menu-panel / .ae-menu-item.
   ============================================================================= */
.ae-overflow-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-control);
    background: var(--ae-surface);
    color: var(--ae-text-muted);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.ae-overflow-trigger:hover {
    border-color: var(--ae-primary);
    color: var(--ae-primary);
}

.ae-overflow-trigger > svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* =============================================================================
   History-card header (DESIGN v2.1 §4) — "Historial" left; Partilhar + Exportar as
   compact icon buttons right. Exportar opens its options as a dropdown on desktop and
   a bottom sheet on mobile — the toggles belong to export only, never loose on the page.
   ============================================================================= */
.ae-history-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}

.ae-history-card__title {
    margin: 0;
}

.ae-history-card__actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Compact icon button (Partilhar / Exportar trigger): icon + short label. */
.ae-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.5rem;
    padding: .4rem .7rem;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-control);
    background: var(--ae-surface);
    color: var(--ae-text);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.ae-icon-btn:hover {
    border-color: var(--ae-primary);
    color: var(--ae-primary);
}

.ae-icon-btn > svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
}

/* Export options heading inside the dropdown / sheet. */
.ae-export__heading {
    margin: 0 0 .6rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ae-text-muted);
}

.ae-export__panel {
    min-width: 14rem;
    padding: .85rem;
}

.ae-export__panel .form-check {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding-left: 0;
}

.ae-export__panel .form-check-input {
    margin: 0;
    float: none;
}

/* Mobile: the export options are a bottom sheet within thumb reach, not a dropdown.
   Full width, pinned to the bottom edge, respecting the safe-area inset. */
@media (max-width: 767.98px) {
    .ae-export__panel {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1050;
        width: 100%;
        min-width: 0;
        border-radius: var(--ae-radius-card) var(--ae-radius-card) 0 0;
        padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    }
}

/* Touch targets >= 44px on touch pointers (DESIGN §6). */
@media (pointer: coarse) {
    .ae-icon-btn {
        min-height: 44px;
    }
}