/* ============================================================
   Fiore Transfer — application stylesheet
   Utilitarian SaaS aesthetic. System fonts. Single warm accent.
   ============================================================ */

:root {
    /* Surface */
    --bg:            #F7F7F5;
    --surface:       #FFFFFF;
    --surface-2:     #FAFAF9;
    --border:        #E7E5E4;
    --border-strong: #D6D3D1;

    /* Ink */
    --ink:           #1C1917;
    --ink-2:         #44403C;
    --ink-3:         #78716C;
    --ink-4:         #A8A29E;

    /* Accent — warm amber, single brand colour */
    --accent:        #B45309;
    --accent-hover:  #92400E;
    --accent-soft:   #FEF3C7;
    --accent-ring:   rgba(180, 83, 9, 0.18);

    /* Status */
    --status-pending-bg:    #FEF3C7;
    --status-pending-fg:    #92400E;
    --status-confirmed-bg:  #DCFCE7;
    --status-confirmed-fg:  #166534;
    --status-rejected-bg:   #FEE2E2;
    --status-rejected-fg:   #991B1B;
    --status-cancelled-bg:  #F1F5F9;
    --status-cancelled-fg:  #475569;

    /* Effects */
    --shadow-sm:     0 1px 2px rgba(0,0,0,0.04);
    --shadow:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-lg:     0 8px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);

    --radius-sm:     6px;
    --radius:        10px;
    --radius-lg:     14px;

    --space-1:       4px;
    --space-2:       8px;
    --space-3:       12px;
    --space-4:       16px;
    --space-5:       24px;
    --space-6:       32px;
    --space-7:       48px;

    --bottom-nav-h:  53px;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
                 "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code",
                 Menlo, Consolas, monospace;
}

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Base ────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
p  { margin: 0; }

.muted   { color: var(--ink-3); }
.tabular { font-variant-numeric: tabular-nums; }

/* Viewport-targeted visibility helpers. Inline-friendly — the spans these
   wrap sit inside flex/inline-flex buttons where `display: inline` is safe. */
.mobile-only  { display: none; }
@media (max-width: 720px) {
    .mobile-only  { display: inline; }
    .desktop-only { display: none; }
}

/* ─── App shell ───────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.app-header__progress {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--accent);
    pointer-events: none;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.2s ease;
    border-radius: 0 2px 2px 0;
}
.app-header__progress.is-active { opacity: 1; }
.app-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    height: 56px;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
.app-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.app-brand:hover { text-decoration: none; }
.app-brand__mark {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.app-nav {
    display: flex;
    gap: 2px;
    flex: 1;
}
.app-nav__link {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-weight: 500;
    font-size: 13px;
}
.app-nav__link:hover { background: var(--surface-2); text-decoration: none; }
.app-nav__link[aria-current="page"] {
    background: var(--ink);
    color: #fff;
}
.app-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.app-user__name {
    font-size: 13px;
    color: var(--ink-2);
}
.app-user__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
}

.app-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

/* ─── Page header ─────────────────────────────────────────── */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.page-head__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.page-head__sub {
    color: var(--ink-3);
    margin-top: 2px;
    font-size: 13px;
}
.page-head__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ─── Toolbar (filters bar above table) ───────────────────── */
.toolbar {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.toolbar__search {
    flex: 1 1 320px;
    max-width: 480px;
    min-width: 220px;
    position: relative;
}
.toolbar__search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}
.toolbar__search-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.toolbar__search::before {
    content: "";
    position: absolute;
    left: 12px; top: 50%;
    width: 14px; height: 14px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A8A29E' stroke-width='2'><circle cx='7' cy='7' r='5'/><path d='M14 14l-3-3'/></svg>") no-repeat center / contain;
    pointer-events: none;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.tabs__item {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background 0.15s, color 0.15s;
}
.tabs__item:hover { color: var(--ink-2); }
.tabs__item[aria-selected="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.tabs__count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--surface-2);
    color: var(--ink-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.tabs__item[aria-selected="true"] .tabs__count {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
}

/* ─── View Transitions API ────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.18s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
::view-transition-old(list) {
    animation: vt-fade-out 0.14s ease-out both;
}
::view-transition-new(list) {
    animation: vt-fade-in 0.18s ease-out both;
}
@keyframes vt-fade-out {
    to   { opacity: 0; }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root),
    ::view-transition-old(list), ::view-transition-new(list) {
        animation: none !important;
    }
}

/* Reserve vertical space so swapping tabs doesn't yank the page */
.listframe {
    min-height: 360px;
    transition: opacity 0.12s linear;
}

/* ─── Card / panel ────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card__head {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card__body {
    padding: var(--space-5);
}
.card__body--flush { padding: 0; }

/* ─── Today hero strip (dashboard) ────────────────────────── */
.today {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.today__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid var(--border);
    padding-left: var(--space-4);
}
.today__cell:first-child { border-left: none; padding-left: 0; }
.today__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-weight: 600;
}
.today__value {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.2;
}
.today__value--accent { color: var(--accent); }
.today__sub {
    font-size: 13px;
    color: var(--ink-3);
}
.today__warn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--status-pending-fg);
    font-weight: 500;
    font-size: 12px;
}
@media (max-width: 720px) {
    /* Keep 3-column on mobile but compact — the stacked layout pushed the list
       below the fold on small screens. */
    .today {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: var(--space-3);
        gap: var(--space-2);
    }
    .today__cell {
        border-left: 1px solid var(--border);
        padding-left: var(--space-3);
        min-width: 0;
    }
    .today__cell:first-child { border-left: none; padding-left: 0; }
    .today__label { font-size: 10px; }
    .today__value { font-size: 18px; line-height: 1.15; }
    .today__sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .today__warn { font-size: 10px; gap: 4px; margin-top: 2px; }
    .today__warn svg { width: 11px; height: 11px; }
}

/* ─── Relative time chip ──────────────────────────────────── */
.reltime {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.reltime--now    { background: #FEE2E2; color: #991B1B; border-color: transparent; }
.reltime--soon   { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.reltime--today  { background: var(--ink); color: #fff; border-color: transparent; }

/* ─── Approaching pending warning highlight ───────────────── */
.tbl tr.row--urgent td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}
.card--urgent {
    border-left: 3px solid var(--accent);
}

/* ─── Table ───────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
.tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.tbl thead th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    background: var(--surface-2);
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.tbl tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr {
    transition: background 0.1s;
}
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.tbl-row--clickable { cursor: pointer; }
.tbl tbody tr.tbl-row--clickable:focus-visible,
.cardlist__row:focus-visible {
    outline: none;
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--accent), 0 0 0 2px var(--accent-ring);
}
.tbl tr.kb-focus,
.cardlist__row.kb-focus {
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--accent);
}

.tbl__date {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.tbl__date-day { font-weight: 600; color: var(--ink); }
.tbl__date-time { color: var(--ink-3); font-size: 12px; }

.tbl__route {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
}
.tbl__route-arrow {
    width: 14px;
    height: 14px;
    color: var(--ink-4);
}
.tbl__name {
    font-weight: 500;
    color: var(--ink);
}
.tbl__sub {
    color: var(--ink-3);
    font-size: 12px;
}
.tbl__price {
    font-weight: 600;
    color: var(--ink);
}

.tbl__group td {
    background: var(--bg);
    color: var(--ink-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 8px var(--space-4);
    border-top: 1px solid var(--border);
}

/* ─── Card list (mobile alternative to the table) ────────── */
.cardlist {
    display: none;
    flex-direction: column;
    gap: 0;
}
.cardlist__group {
    padding: 10px var(--space-4);
    background: var(--bg);
    color: var(--ink-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-top: 1px solid var(--border);
}
.cardlist__group:first-child { border-top: none; }
.cardlist__row {
    display: block;
    padding: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--ink);
    text-decoration: none;
}
.cardlist__row:hover { background: var(--surface-2); text-decoration: none; }
.cardlist__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
}
.cardlist__when {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.cardlist__time {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.cardlist__route {
    font-size: 14px;
    color: var(--ink-2);
    margin: 4px 0;
    line-height: 1.4;
}
.cardlist__route svg { vertical-align: middle; color: var(--ink-4); margin: 0 4px; }
.cardlist__meta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 2px;
}
.cardlist__meta strong {
    color: var(--ink);
    font-weight: 600;
    margin-right: 4px;
}
@media (max-width: 720px) {
    .cardlist  { display: flex; }
    .tbl-wrap  { display: none; }
}

/* Compact cardlist variant — used inside .card__body (admin / inbox) where
   the parent card already supplies outer padding, so each row should hug. */
.cardlist--compact .cardlist__row   { padding: var(--space-3); }
.cardlist--compact .cardlist__group { padding: 8px var(--space-3); font-size: 10px; }

/* Key/value list for generic table-row → card translation. Used by the
   admin SQL console fallback at small viewports. */
.cardlist__kv {
    display: grid;
    grid-template-columns: minmax(90px, 28%) 1fr;
    gap: 4px 10px;
    margin: 0;
}
.cardlist__kv dt {
    margin: 0;
    color: var(--ink-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    overflow-wrap: anywhere;
    align-self: center;
}
.cardlist__kv dd {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
}
.cardlist__kv dd.is-null { color: var(--ink-4); }

/* Chip grid for admin canned-query shortcuts — wraps freely on desktop,
   becomes a tidy 2-column grid on phones so 6 long Croatian labels don't
   fragment into four uneven rows. */
.chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }

/* Reservation page title meta — wraps the status badge + reltime chip so
   they sit beside the passenger name on desktop, but stack below it on
   mobile (rule in the mobile-overhaul block at the bottom). */
.reservation-title-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ─── Status badge ────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge--pending   { background: var(--status-pending-bg);   color: var(--status-pending-fg); }
.badge--confirmed { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); }
.badge--rejected  { background: var(--status-rejected-bg);  color: var(--status-rejected-fg); }
.badge--cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
.badge--missed    { background: #FED7AA; color: #9A3412; }
.badge--neutral   { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--border); }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn--primary {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.btn--primary:hover { background: #000; border-color: #000; }
.btn--accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--danger {
    color: #B91C1C;
    border-color: #FECACA;
    background: #fff;
}
.btn--danger:hover { background: #FEF2F2; border-color: #FCA5A5; }
.btn--success {
    color: #15803D;
    border-color: #BBF7D0;
    background: #fff;
}
.btn--success:hover { background: #F0FDF4; border-color: #86EFAC; }
.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ink-2);
}
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm  { height: 30px; padding: 0 10px; font-size: 12px; }
.btn--lg  { height: 42px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--disabled { pointer-events: none; opacity: 0.4; }
.prevnext { display: inline-flex; gap: 2px; }
.prevnext .btn { border-radius: 0; }
.prevnext .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.prevnext .btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; }

/* ─── Form ────────────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.field__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
}
.field__hint {
    font-size: 12px;
    color: var(--ink-3);
}
.field__input,
.field__select {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field__input:focus,
.field__select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.field__select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A8A29E' stroke-width='1.6'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

/* ─── Alerts ──────────────────────────────────────────────── */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: var(--space-3);
}
.alert--ok   { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); }
.alert--err  { background: var(--status-rejected-bg);  color: var(--status-rejected-fg); }
.alert--info { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }
.alert--warn { background: var(--status-pending-bg); color: var(--status-pending-fg); }

/* ─── Auth pages ──────────────────────────────────────────── */
.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    background:
        radial-gradient(ellipse at top, rgba(180,83,9,0.06), transparent 60%),
        var(--bg);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.auth-mark {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em;
}
.auth-name { font-weight: 600; letter-spacing: -0.01em; }
.auth-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.auth-sub {
    color: var(--ink-3);
    margin-bottom: var(--space-5);
    font-size: 13px;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.auth-form .btn { margin-top: var(--space-2); }

/* ─── Detail view ─────────────────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
}
@media (max-width: 880px) {
    .detail-grid { grid-template-columns: 1fr; }
}
.kv {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-top: 1px solid var(--border);
}
.kv:first-child { border-top: none; }
.kv__k {
    padding: 12px var(--space-5);
    font-size: 12px;
    color: var(--ink-3);
    background: var(--surface-2);
    border-right: 1px solid var(--border);
}
.kv__v {
    padding: 12px var(--space-5);
    color: var(--ink);
    font-size: 14px;
}
.kv__v--mono { font-family: var(--font-mono); font-size: 13px; }

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}
.timeline__item {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-5);
    border-left: 2px solid var(--border);
    margin-left: 6px;
}
.timeline__item::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--ink-4);
}
.timeline__item--accent::before { border-color: var(--accent); }
.timeline__item--ok::before     { border-color: #16A34A; }
.timeline__item--danger::before { border-color: #DC2626; }
.timeline__time {
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.timeline__title { font-weight: 500; color: var(--ink); }
.timeline__detail { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.timeline__detail code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

/* Action row */
.actions-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Empty state */
.empty {
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--ink-3);
}
.empty__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.empty__sub {
    font-size: 13px;
    margin-bottom: var(--space-4);
}

/* Toast (transient feedback) */
.toast-stack {
    position: fixed;
    z-index: 100;
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0));
    right: var(--space-5);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 32px));
}
@media (max-width: 720px) {
    .toast-stack {
        right: 12px;
        left: 12px;
        max-width: none;
        bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0)); /* clear bottom-nav */
    }
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    animation: toast-in 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.toast.is-leaving { animation: toast-out 0.25s ease-in forwards; }
.toast--ok  { background: #15803D; }
.toast--err { background: #B91C1C; }
.toast--info { background: var(--ink); }
.toast::before {
    content: "";
    width: 7px; height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
    flex: 0 0 auto;
}
.toast__close {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    padding: 0 4px;
    font-size: 16px;
    line-height: 1;
}
.toast__close:hover { color: #fff; }
@keyframes toast-in {
    from { transform: translateY(10px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes toast-out {
    to { transform: translateY(10px); opacity: 0; }
}

/* Inline button spinner */
.btn .spin {
    width: 14px; height: 14px;
    border: 1.6px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.btn[aria-busy="true"] .btn__icon { display: none; }

/* Error / empty page */
.error-page {
    text-align: center;
    padding: var(--space-7) var(--space-5);
    max-width: 460px;
    margin: 0 auto;
}
.error-page__code {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--accent);
    line-height: 1;
}
.error-page__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: var(--space-3);
    margin-bottom: 6px;
}
.error-page__sub {
    color: var(--ink-3);
    margin-bottom: var(--space-5);
}

/* Tooltip — fires on hover AND on keyboard focus so the keyboard shortcut
   hints aren't only available to mouse users. */
[data-tip] { position: relative; }
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 70;
}

/* ─── Bottom navigation (mobile) ──────────────────────────── */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav__item {
    /* position: relative anchors the ::after active indicator to the item
       itself; without it the indicator falls through to .bottom-nav and on
       some browsers (iOS Safari) ends up at the wrong vertical offset. */
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px 8px;
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav__item:hover { text-decoration: none; }
.bottom-nav__item svg { transition: transform 0.15s ease; }
.bottom-nav__item:active svg { transform: scale(0.92); }
.bottom-nav__item.is-active { color: var(--ink); }
.bottom-nav__item.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 2px 2px;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
    .app-header__inner {
        padding: 0 var(--space-3);
        gap: var(--space-3);
        height: 52px;
    }
    .app-brand__name { display: none; }
    .app-nav, .app-user__name, .app-user .btn { display: none; }
    .app-user { margin-left: auto; }
    .app-user__avatar { width: 32px; height: 32px; font-size: 12px; }
    .app-main {
        padding: var(--space-4) var(--space-3);
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
    }
    .bottom-nav { display: flex; }
    .page-head__title { font-size: 20px; }
    .toolbar {
        padding: var(--space-2);
        flex-direction: column;
        align-items: stretch;
    }
    .toolbar__search {
        /* Reset the desktop flex-basis (would be interpreted as HEIGHT inside
           the mobile column flex layout, blowing the toolbar to ~320px tall). */
        flex: 0 0 auto;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
    .tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tabs__item { white-space: nowrap; flex-shrink: 0; }
    .tbl thead th, .tbl tbody td { padding: 10px var(--space-3); }
    .kv { grid-template-columns: 1fr; }
    .kv__k { border-right: none; border-bottom: 1px solid var(--border); padding: 8px var(--space-4); }
    .kv__v { padding: 12px var(--space-4); }
    .page-head { gap: var(--space-3); }
    .page-head__actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }
    .page-head__actions .btn {
        flex: 0 1 auto;
        white-space: nowrap;
        min-width: 0;
    }
    .page-head__actions form {
        flex: 0 1 auto;
        display: inline-flex;
    }
    /* On the dashboard the two top buttons should split 50/50 */
    .page-head__actions--split { flex-wrap: nowrap; }
    .page-head__actions--split .btn,
    .page-head__actions--split form { flex: 1 1 auto; }
    .page-head__actions--split form .btn { width: 100%; }

    .prevnext { flex: 0 0 auto; order: -1; width: 100%; }
    .prevnext .btn { flex: 1 1 auto; }
}

/* ============================================================
   Mobile overhaul (2026-05) — Blocks B / C / D / E
   Phone-first overrides applied last so they trump earlier rules.
   ============================================================ */
@media (max-width: 720px) {

    /* B.1 — listframe min-height is desktop CLS protection; on mobile it
       just leaves 360px of empty white below short lists. */
    .listframe { min-height: 0; }

    /* C — Apple-HIG touch targets. Bump the whole button system up. */
    .btn          { height: 44px; padding: 0 16px; font-size: 14px; }
    .btn--sm      { height: 36px; padding: 0 12px; font-size: 12px; }
    .btn--lg      { height: 48px; }
    .field__input,
    .field__select,
    .toolbar__search-input { height: 44px; font-size: 14px; }
    .tabs__item {
        height: 40px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
    }
    .cardlist__row { min-height: 64px; }

    /* D.1 — passenger name on today-hero clipped silently because of
       white-space:nowrap + ellipsis. Switch to a 2-line clamp. */
    .today__sub {
        white-space: normal;
        text-overflow: clip;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.25;
    }

    /* D.3 — canned-query chip grid: 2 columns on phones. */
    .chip-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .chip-grid .btn {
        width: 100%;
        padding: 0 10px;
        justify-content: flex-start;
    }

    /* B.3 + B.4 — reservation detail action row: hide prev/next (a desktop
       power-user feature), stack primary actions full-width. The selector
       targets .actions-row but NOT .page-head__actions--split (dashboard). */
    .actions-row .prevnext { display: none; }
    .actions-row > .btn,
    .actions-row > form {
        flex: 1 1 100%;
        width: 100%;
    }
    .actions-row > form .btn { width: 100%; }

    /* B.4 — reservation title: passenger name on its own line, badge +
       reltime stacked below. The .page-head__title is otherwise a plain
       <div> with mixed inlines on mobile that wraps badly. */
    .page-head__title { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .reservation-title-meta { margin-left: 0; flex-wrap: wrap; }

    /* E.2 — reltime chip looks tappable but isn't, set the cursor honest. */
    .reltime { cursor: default; }

    /* E.3 — owner avatar in the mobile header is purely decorative; the
       owner is the only user and there's no profile screen. Hide it to
       reclaim the space and make the header less crowded. */
    .app-user__avatar { display: none; }

    /* Inbox / admin cardlists live inside the .card__body, which already
       has its own padding. Keep them edge-to-edge inside the card. */
    .card__body--flush .cardlist--compact,
    .card .cardlist--compact { margin: 0; }
}

/* Pending reservation that was previously confirmed or rejected by the owner
   but Fox modified after — owner needs to re-decide. The warm orange contrasts
   with the soft amber of normal pending so the row doesn't get scrolled past. */
.badge--resurrected { background: #FED7AA; color: #9A3412; }

/* Warn-style toast: surfaces partial failures (some emails errored / failed
   to apply) distinctly from clean success. Mirrors .alert--warn colors so
   the visual language stays consistent. */
.toast--warn { background: #B45309; color: #fff; }

/* ─── Modal dialog (export) ───────────────────────────────────────────────
   Native <dialog> element. We override the browser's defaults so the panel
   matches the rest of the SaaS aesthetic — white surface, warm amber accent,
   no chrome. */
.modal {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    max-width: min(480px, calc(100vw - 32px));
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: visible;
}
.modal::backdrop {
    background: rgba(28, 25, 23, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.modal[open] {
    animation: modalIn 160ms ease-out;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .modal[open] { animation: none; }
}

.modal__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
    overflow: hidden;
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}
.modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.modal__close {
    border: 0;
    background: transparent;
    color: var(--ink-3);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.modal__close:hover { background: var(--surface-2); color: var(--ink); }

.modal__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    overflow-y: auto;
}
.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* ─── Form primitives used inside the export modal ───────────────────────── */
.field-group {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.field-group__legend {
    padding: 0;
    margin: 0 0 var(--space-2) 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.field-group__hint {
    margin: var(--space-2) 0 0 0;
    font-size: 12px;
    color: var(--ink-3);
}

.radio-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.radio-row:hover { border-color: var(--border-strong); }
.radio-row:has(input[type="radio"]:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.radio-row > input[type="radio"] {
    margin: 3px 0 0 0;
    accent-color: var(--accent);
    flex: 0 0 auto;
}
.radio-row__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}
.radio-row__label {
    font-weight: 500;
    color: var(--ink);
}
.radio-row__hint {
    font-size: 12px;
    color: var(--ink-3);
}

.input {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font: inherit;
    background: var(--surface);
    color: var(--ink);
    line-height: 1.4;
}
.input:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.input--inline { display: inline-block; }

.range-inputs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.range-inputs__sep { color: var(--ink-3); }

/* Disabled state: greys out the inputs of the unselected period mode so
   the active row is unmistakable, even on small screens. */
.radio-row:not(:has(input[type="radio"]:checked)) [data-mode-input] .input,
.radio-row:not(:has(input[type="radio"]:checked)) [data-mode-input] {
    opacity: 0.45;
    pointer-events: none;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
.check-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    transition: border-color 120ms ease, background 120ms ease;
}
.check-pill:hover { border-color: var(--border-strong); }
.check-pill:has(input[type="checkbox"]:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-weight: 500;
}
.check-pill > input[type="checkbox"] {
    accent-color: var(--accent);
}

.btn--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    text-decoration: none;
}

@media (max-width: 540px) {
    .modal {
        max-width: 100vw;
        max-height: 100dvh;
        margin: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
    }
    .modal__panel {
        max-height: calc(100dvh - 40px);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .modal[open] { animation: modalSheetIn 200ms ease-out; }
    @keyframes modalSheetIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}