/* ============================================================
   Santorini Road Assistance — Design System
   Palette: navy, amber, white. admin.css and public.css finish it per area.
   ============================================================ */

:root {
    /* Brand */
    --blue:        #3F7FE8;
    --blue-bright: #7FAEFF;
    --blue-glow:   #A9C8FF;
    --blue-deep:   #2C64C4;
    --blue-soft:   rgba(63, 127, 232, .12);
    --blue-line:   rgba(127, 174, 255, .28);

    /* Neutrals (dark theme is the default: control rooms run at night) */
    --black:   #05070D;
    --ink-900: #080B14;
    --ink-800: #0C111C;
    --ink-700: #111827;
    --ink-600: #1A2234;
    --ink-500: #26314A;
    --ink-400: #38455F;
    --white:   #FFFFFF;
    --text:    #E8EDF7;
    --muted:   #93A1BC;
    --faint:   #64748B;

    /* Status */
    --success: #10B981;
    --warning: #F59E0B;
    --danger:  #EF4444;
    --info:    #7FAEFF;
    --purple:  #7C3AED;

    /* Surfaces */
    --bg:        var(--black);
    --surface:   var(--ink-800);
    --surface-2: var(--ink-700);
    --border:    rgba(148, 163, 184, .14);
    --border-strong: rgba(148, 163, 184, .26);

    /* Shape */
    --r-sm: 8px;
    --r:    14px;
    --r-lg: 22px;
    --r-full: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 10px 30px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    --glow:      0 0 0 1px var(--blue-line), 0 0 32px rgba(127, 174, 255, .18);

    --sidebar-w: 264px;
    --topbar-h: 66px;

    /* Multi-script stack: Latin · Greek · Cyrillic · Arabic · CJK */
    --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
            "Noto Sans", "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI Historic",
            "Microsoft YaHei", "PingFang SC", "Hiragino Sans", "Yu Gothic UI", "Meiryo",
            "Noto Sans SC", "Noto Sans JP", sans-serif;
    --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Light theme — used by the public site, invoices and print */
[data-theme="light"] {
    --bg:        #F5F7FB;
    --surface:   #FFFFFF;
    --surface-2: #F0F4FA;
    --text:      #0B1220;
    --muted:     #5A6B85;
    --faint:     #8493AC;
    --border:    rgba(11, 18, 32, .10);
    --border-strong: rgba(11, 18, 32, .18);
    --shadow:    0 10px 30px rgba(9, 20, 45, .08);
    --shadow-lg: 0 24px 60px rgba(9, 20, 45, .12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body.no-scroll { overflow: hidden; }

a { color: var(--blue-bright); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--blue-glow); }

h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1em; }
small { font-size: .82rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.4rem 0; }

::selection { background: var(--blue); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); background-clip: content-box; }

/* ============================ Layout ======================= */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: linear-gradient(180deg, var(--ink-900), var(--black));
    border-right: 1px solid var(--border);
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform .28s var(--ease);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    min-height: var(--topbar-h);
}

.sidebar__brand-mark {
    width: 36px; height: 36px;
    border-radius: 22%;
    display: grid; place-items: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 18px rgba(127, 174, 255, .25);
    flex: 0 0 36px;
}
/* The site icon itself — the same file as the favicon, so the two never drift. */
.sidebar__brand-mark img { width: 100%; height: 100%; display: block; }

.sidebar__brand-text strong { display: block; font-size: .95rem; letter-spacing: -.01em; }
.sidebar__brand-text span { display: block; font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }

.sidebar__nav { flex: 1; overflow-y: auto; padding: .9rem .75rem 2rem; }
.sidebar__section { padding: 1rem .6rem .4rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); font-weight: 700; }

.nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .7rem;
    border-radius: var(--r-sm);
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 2px;
    transition: all .16s var(--ease);
    position: relative;
}
.nav-link:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.nav-link.is-active { background: var(--blue-soft); color: #fff; }
.nav-link.is-active::before {
    content: ""; position: absolute; left: -.75rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--blue-bright);
    box-shadow: 0 0 12px var(--blue-bright);
}
.nav-link svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.nav-link .badge { margin-left: auto; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.4rem;
    background: rgba(8, 11, 20, .82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}
[data-theme="light"] .topbar { background: rgba(255, 255, 255, .85); }

.topbar__title { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.topbar__spacer { flex: 1; }

.content { padding: 1.5rem; flex: 1; }
.content--wide { padding: 0; }
.container { width: min(1240px, 100%); margin-inline: auto; }
.container--wide { width: min(1600px, 100%); margin-inline: auto; }

/* ============================ Grid ========================= */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.grid-main { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }

.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.flex-center { display: flex; align-items: center; gap: .5rem; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.gap-sm { gap: .5rem; } .gap { gap: 1rem; } .gap-lg { gap: 1.5rem; }

.mt-0 { margin-top: 0; } .mt { margin-top: 1rem; } .mt-lg { margin-top: 1.75rem; }
.mb-0 { margin-bottom: 0; } .mb { margin-bottom: 1rem; } .mb-lg { margin-bottom: 1.75rem; }
.text-right { text-align: right; } .text-center { text-align: center; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.mono { font-family: var(--mono); font-size: .86em; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hide { display: none !important; }

/* ============================ Cards ======================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* Marks the card holding a required question that has not been answered, when
   the control itself is hidden behind a custom one and the browser will not
   point at it. Without this the form refuses to send and says nothing. */
.needs-answer {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, .18);
    animation: needs-answer-pulse .45s ease-out 2;
}
@keyframes needs-answer-pulse {
    50% { box-shadow: 0 0 0 7px rgba(245, 166, 35, .26); }
}
@media (prefers-reduced-motion: reduce) {
    .needs-answer { animation: none; }
}

/* Headings and their buttons wrap onto a second line on a phone: the card
   clips its overflow, so a button pushed past the edge cannot be tapped. */
.card__head {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border);
}
.card__head > .flex-center { flex-wrap: wrap; }
.card__head h3, .card__head h4 { margin: 0; font-size: .98rem; }
.card__body { padding: 1.15rem; }
.card__body--flush { padding: 0; }
.card__foot { padding: .85rem 1.15rem; border-top: 1px solid var(--border); background: rgba(255,255,255,.015); }
.card--glow { box-shadow: var(--glow); border-color: var(--blue-line); }
.card--accent { border-left: 3px solid var(--blue); }

/* KPI */
.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.05rem 1.15rem;
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.kpi:hover { transform: translateY(-2px); border-color: var(--blue-line); }
.kpi::after {
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle, var(--blue-soft), transparent 70%);
}
.kpi__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 700; }
.kpi__value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; margin: .25rem 0 .1rem; line-height: 1.1; }
.kpi__meta { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.kpi__value--blue { color: var(--blue-bright); }
.kpi__value--green { color: var(--success); }
.kpi__value--red { color: var(--danger); }
.kpi__value--amber { color: var(--warning); }

/* ============================ Buttons ====================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .58rem 1.05rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer;
    transition: all .16s var(--ease);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { background: var(--ink-600); color: var(--text); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.btn--primary {
    background: #F5A400;
    color: #0B2A5B;
}
.btn--primary:hover { background: #FFB627; color: #0B2A5B; }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: rgba(255,255,255,.05); border-color: var(--blue); }
.btn--danger { background: rgba(239, 68, 68, .14); color: #FCA5A5; border-color: rgba(239,68,68,.3); }
.btn--danger:hover { background: var(--danger); color: #fff; }
.btn--success { background: rgba(16, 185, 129, .14); color: #6EE7B7; border-color: rgba(16,185,129,.3); }
.btn--success:hover { background: var(--success); color: #04120C; }
.btn--sm { padding: .35rem .7rem; font-size: .8rem; }
.btn--lg { padding: .85rem 1.6rem; font-size: 1rem; border-radius: var(--r); }
.btn--block { width: 100%; }
.btn--icon { padding: .5rem; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-group { display: inline-flex; gap: .35rem; flex-wrap: wrap; }

/* ============================ Badges ======================= */
.badge {
    display: inline-flex; align-items: center; gap: .32rem;
    padding: .18rem .55rem;
    border-radius: var(--r-full);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .02em;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.badge--blue   { background: var(--blue-soft); color: var(--blue-glow); border-color: var(--blue-line); }
.badge--green  { background: rgba(16,185,129,.14); color: #6EE7B7; border-color: rgba(16,185,129,.28); }
.badge--amber  { background: rgba(245,158,11,.14); color: #FCD34D; border-color: rgba(245,158,11,.28); }
.badge--red    { background: rgba(239,68,68,.14); color: #FCA5A5; border-color: rgba(239,68,68,.28); }
.badge--purple { background: rgba(124,58,237,.16); color: #C4B5FD; border-color: rgba(124,58,237,.3); }
.badge--grey   { background: rgba(148,163,184,.12); color: var(--muted); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.dot--green { background: var(--success); box-shadow: 0 0 10px var(--success); }
.dot--blue  { background: var(--blue-bright); box-shadow: 0 0 10px var(--blue-bright); }
.dot--amber { background: var(--warning); box-shadow: 0 0 10px var(--warning); }
.dot--red   { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.dot--grey  { background: var(--faint); }

.pulse { animation: pulse 1.9s infinite; }
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(127, 174, 255, .55); }
    70%  { box-shadow: 0 0 0 12px rgba(127, 174, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(127, 174, 255, 0); }
}

/* ============================ Tables ======================= */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table thead th {
    text-align: left;
    padding: .7rem 1rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--faint); font-weight: 700;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.015);
    white-space: nowrap;
}
.table tbody td { padding: .72rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background .14s var(--ease); }
.table tbody tr:hover { background: rgba(127, 174, 255, .045); }
.table tbody tr:last-child td { border-bottom: 0; }
.table--compact tbody td, .table--compact thead th { padding: .5rem .7rem; }
.table a { font-weight: 600; }

.empty { padding: 3rem 1rem; text-align: center; color: var(--faint); }
.empty svg { width: 42px; height: 42px; stroke: currentColor; fill: none; opacity: .5; margin-bottom: .6rem; }

/* ============================ Forms ======================== */
/* `hidden` has to win over any display a component sets, or an element the
   script hides stays on screen. */
[hidden] { display: none !important; }

.field { margin-bottom: 1rem; }
.label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; letter-spacing: .01em; }
.label .req { color: var(--danger); }

.input, .select, .textarea {
    width: 100%;
    padding: .62rem .8rem;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font: inherit; font-size: .9rem;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
[data-theme="light"] .input, [data-theme="light"] .select, [data-theme="light"] .textarea { background: #fff; }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A1BC' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem; }
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--danger); }
.error-text { color: #FCA5A5; font-size: .76rem; margin-top: .3rem; display: block; }
.help-text { color: var(--faint); font-size: .76rem; margin-top: .3rem; display: block; }

.check { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; cursor: pointer; margin-bottom: .55rem; }
.check input { accent-color: var(--blue); width: 17px; height: 17px; margin-top: 1px; flex: 0 0 17px; }

.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--ink-500); border-radius: var(--r-full); cursor: pointer; transition: .2s; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--blue); }
.switch input:checked + span::before { transform: translateX(20px); }

/* Service picker (SOS + request forms) */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.service-grid--vehicles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 620px) { .service-grid--vehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.service-pick {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--r);
    padding: .95rem .7rem;
    text-align: center;
    cursor: pointer;
    transition: all .16s var(--ease);
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
}
.service-pick:hover { border-color: var(--blue); transform: translateY(-2px); }
.service-pick input { display: none; }
.service-pick.is-selected, .service-pick input:checked + * { border-color: var(--blue); }
.service-pick.is-selected { background: var(--blue-soft); border-color: var(--blue); box-shadow: var(--glow); }
.service-pick__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); display: grid; place-items: center; }
.service-pick__icon svg { width: 22px; height: 22px; stroke: var(--blue-bright); fill: none; stroke-width: 1.7; }
.service-pick__label { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.service-pick__price { font-size: .72rem; color: var(--faint); }

/* ============================ Alerts ======================= */
.alert {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .8rem 1rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    margin-bottom: .8rem;
    font-size: .88rem;
    background: var(--surface);
    border-left-width: 3px;
}
.alert--success { border-left-color: var(--success); background: rgba(16,185,129,.08); }
.alert--error, .alert--danger { border-left-color: var(--danger); background: rgba(239,68,68,.08); }
.alert--warning { border-left-color: var(--warning); background: rgba(245,158,11,.08); }
.alert--info { border-left-color: var(--info); background: rgba(127, 174, 255,.08); }
.alert svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; stroke: currentColor; fill: none; }

/* Toast */
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .6rem; }
.toast { background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--blue); border-radius: var(--r-sm); padding: .75rem 1rem; box-shadow: var(--shadow); animation: slideIn .25s var(--ease); max-width: 340px; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================ Timeline ===================== */
.timeline { position: relative; padding-left: 1.4rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(var(--blue), transparent); }
.timeline__item { position: relative; padding-bottom: 1.1rem; }
.timeline__item::before {
    content: ""; position: absolute; left: -1.4rem; top: 5px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--blue-bright);
}
.timeline__item--done::before { background: var(--blue-bright); }
.timeline__time { font-size: .74rem; color: var(--faint); font-family: var(--mono); }
.timeline__title { font-weight: 600; font-size: .9rem; }
.timeline__text { font-size: .84rem; color: var(--muted); }

/* Progress steps (tracking) */
.steps { display: flex; gap: .4rem; }
.step { flex: 1; text-align: center; }
.step__bar { height: 5px; border-radius: var(--r-full); background: var(--ink-600); margin-bottom: .4rem; overflow: hidden; }
.step.is-done .step__bar { background: linear-gradient(90deg, var(--blue), var(--blue-bright)); }
.step.is-current .step__bar { background: linear-gradient(90deg, var(--blue-bright), transparent); animation: shimmer 1.6s infinite; }
@keyframes shimmer { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.step__label { font-size: .7rem; color: var(--faint); font-weight: 600; }
.step.is-done .step__label, .step.is-current .step__label { color: var(--text); }

/* Progress bar */
.progress { height: 8px; background: var(--ink-600); border-radius: var(--r-full); overflow: hidden; }
.progress__fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); border-radius: var(--r-full); transition: width .5s var(--ease); }

/* ============================ Charts ======================= */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding-top: .5rem; }
.chart__bar { flex: 1; background: linear-gradient(180deg, var(--blue-bright), var(--blue)); border-radius: 4px 4px 0 0; min-height: 3px; position: relative; transition: opacity .16s; opacity: .82; }
.chart__bar:hover { opacity: 1; }
.chart__bar span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: .66rem; color: var(--muted); opacity: 0; transition: .15s; white-space: nowrap; padding-bottom: 3px; }
.chart__bar:hover span { opacity: 1; }
.chart-labels { display: flex; gap: 3px; margin-top: .4rem; }
.chart-labels span { flex: 1; text-align: center; font-size: .6rem; color: var(--faint); overflow: hidden; }

/* Two series in one bucket — clicks beside calls, answered beside missed. */
.chart__group { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; min-width: 0; }
.chart__bar--alt  { background: linear-gradient(180deg, #34D399, var(--success)); }
.chart__bar--warn { background: linear-gradient(180deg, #FCA5A5, var(--danger)); }
/* A bucket nobody was measuring. Hatched, so it can never be read as a zero. */
.chart__bar--none {
    background: repeating-linear-gradient(45deg, var(--ink-600) 0 3px, transparent 3px 6px);
    height: 100% !important; opacity: .45;
}
.chart-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; font-size: .74rem; color: var(--muted); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.chart-legend .is-click { background: var(--blue-bright); }
.chart-legend .is-call  { background: var(--success); }
.chart-legend .is-miss  { background: var(--danger); }
.chart-legend .is-none  { background: repeating-linear-gradient(45deg, var(--ink-600) 0 2px, transparent 2px 4px); }
.bar-row--wide { grid-template-columns: minmax(120px, 210px) 1fr 70px; }
.kpi__value--none { font-size: 1rem; color: var(--faint); font-weight: 600; letter-spacing: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip-row .btn.is-active { border-color: var(--blue-line); color: var(--blue-glow); background: var(--blue-soft); }
.bar-row { display: grid; grid-template-columns: 110px 1fr 62px; align-items: center; gap: .7rem; margin-bottom: .5rem; font-size: .84rem; }
.bar-track { height: 9px; background: var(--ink-600); border-radius: var(--r-full); overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); border-radius: var(--r-full); }

.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.sparkline i { flex: 1; background: var(--blue-line); border-radius: 2px; min-height: 2px; }

/* Donut */
.donut { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.donut__hole { width: 88px; height: 88px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; }

/* ============================ Map ========================== */
.map { width: 100%; height: 100%; min-height: 320px; border-radius: var(--r); background: var(--ink-700); z-index: 1; }
/* A dark basemap out of the plain OpenStreetMap tiles. Inverting and rotating
   the hue back turns the light map dark while leaving greens green and water
   blue; the filter is confined to the tile layer so markers, popups and the
   zoom buttons keep their own colours. */
.map--dark .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.85);
}
.map--tall { min-height: 560px; }
.map--full { height: calc(100vh - var(--topbar-h)); border-radius: 0; }
.leaflet-container { background: #0A1020 !important; font-family: var(--font) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.leaflet-popup-content { margin: .8rem 1rem; font-size: .86rem; }
.leaflet-bar a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }

.marker-pin {
    width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
    background: var(--blue); transform: rotate(-45deg);
    display: grid; place-items: center;
    box-shadow: 0 0 16px rgba(127, 174, 255, .6);
    border: 2px solid #fff;
}
.marker-pin i { transform: rotate(45deg); font-style: normal; font-size: 13px; color: #fff; }
.marker-pin--red { background: var(--danger); box-shadow: 0 0 16px rgba(239,68,68,.6); }
.marker-pin--green { background: var(--success); box-shadow: 0 0 16px rgba(16,185,129,.6); }
.marker-pin--amber { background: var(--warning); }

/* ============================ Dispatch board =============== */
.board { display: grid; grid-template-columns: 380px 1fr 320px; height: calc(100vh - var(--topbar-h)); }
.board__col { border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.board__col:last-child { border-right: 0; }
.board__head { padding: .85rem 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 5; }

.job-card {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .15s var(--ease);
    border-left: 3px solid transparent;
}
.job-card:hover { background: rgba(127, 174, 255,.05); }
.job-card.is-selected { background: var(--blue-soft); border-left-color: var(--blue-bright); }
.job-card--p1 { border-left-color: var(--danger); }
.job-card--p2 { border-left-color: var(--warning); }
.job-card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.job-card__code { font-family: var(--mono); font-size: .78rem; color: var(--blue-glow); font-weight: 600; }
.job-card__title { font-weight: 600; font-size: .92rem; }
.job-card__meta { font-size: .78rem; color: var(--muted); display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .25rem; }

.driver-row { display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem; border-bottom: 1px solid var(--border); }
.driver-row:hover { background: rgba(255,255,255,.03); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-bright)); display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff; flex: 0 0 34px; }
.avatar--lg { width: 54px; height: 54px; font-size: 1.05rem; flex: 0 0 54px; }
.avatar--sm { width: 26px; height: 26px; font-size: .66rem; flex: 0 0 26px; }

.candidate {
    border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: .7rem .8rem; margin-bottom: .55rem; background: var(--surface);
    transition: border-color .15s var(--ease);
}
.candidate:hover { border-color: var(--blue); }
.candidate__score { font-size: 1.1rem; font-weight: 800; color: var(--blue-bright); }
.reason-chip { display: inline-flex; gap: .25rem; font-size: .68rem; background: var(--surface-2); padding: .12rem .45rem; border-radius: var(--r-full); color: var(--muted); }

/* ============================ Tabs ========================= */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; overflow-x: auto; }
.tab {
    padding: .6rem .95rem; font-size: .87rem; font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--blue-bright); border-bottom-color: var(--blue-bright); }

/* ============================ Modal ======================== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(3, 6, 14, .78); backdrop-filter: blur(4px); z-index: 150; display: grid; place-items: center; padding: 1rem; }
.modal { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); width: min(560px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal__head { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal__body { padding: 1.3rem; }
.modal__foot { padding: 1rem 1.3rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .6rem; }

/* ============================ Pagination =================== */
.pagination { display: flex; gap: .3rem; justify-content: center; padding: 1rem; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    font-size: .84rem; color: var(--muted); padding: 0 .5rem;
}
.pagination a:hover { border-color: var(--blue); color: var(--text); }
.pagination .is-current { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; }

/* ============================ Public site ================== */
.public-nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .85rem 1.5rem;
    background: rgba(5, 7, 13, .78);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}
.public-nav__links { display: flex; gap: 1.3rem; font-size: .9rem; }
.public-nav__links a { color: var(--muted); font-weight: 500; }
.public-nav__links a:hover { color: var(--text); }

.hero {
    position: relative;
    padding: clamp(2rem, 6vw, 4.4rem) 1.5rem clamp(1.8rem, 4vw, 3rem);
    overflow: hidden;
    text-align: center;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(900px 420px at 50% -12%, rgba(63, 127, 232, .35), transparent 65%),
        radial-gradient(700px 340px at 12% 8%, rgba(127, 174, 255, .18), transparent 60%);
    pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { font-size: clamp(2.2rem, 6.5vw, 4.2rem); line-height: 1.03; letter-spacing: -.035em; }
.hero .lead { font-size: clamp(1rem, 2.2vw, 1.28rem); color: var(--muted); max-width: 720px; margin: 0 auto 1.4rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .85rem; border-radius: var(--r-full);
    background: var(--blue-soft); border: 1px solid var(--blue-line);
    color: var(--blue-glow); font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.2rem;
}

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
.section__title { text-align: center; margin-bottom: 2.4rem; }
.section__title p { color: var(--muted); max-width: 640px; margin: .5rem auto 0; }

.feature {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.5rem;
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.feature:hover { transform: translateY(-4px); border-color: var(--blue-line); box-shadow: var(--glow); }
.feature__icon { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--blue), var(--blue-bright)); display: grid; place-items: center; margin-bottom: 1rem; }
.feature__icon svg { width: 23px; height: 23px; stroke: #fff; fill: none; stroke-width: 1.7; }
.feature h3 { font-size: 1.05rem; }
.feature p { color: var(--muted); font-size: .9rem; margin: 0; }

/* Services page — hero service, secondary service, "not sure?" strip */
.service-hero { border-color: var(--blue-line); }
.service-hero__grid { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: start; }
.service-hero h2 { font-size: 1.55rem; letter-spacing: -.02em; display: flex; align-items: center; gap: .6rem; }
.service-hero h2 svg { stroke: var(--blue-bright); fill: none; stroke-width: 1.7; flex: 0 0 auto; }
.service-hero__list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.2rem; }
.service-hero__list li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--muted); }
.service-hero__list svg { stroke: var(--blue-bright); fill: none; stroke-width: 2.4; flex: 0 0 auto; }
.service-hero__cta { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.service-hero__cta .badge { align-self: flex-start; }

.service-minor { border-style: dashed; }
.service-minor:hover { border-color: var(--blue-line); }
.feature__icon--sm { width: 36px; height: 36px; border-radius: 11px; margin-bottom: 0; flex: 0 0 36px; }
.feature__icon--sm svg { width: 18px; height: 18px; }

.service-help { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.service-help h3 { font-size: 1.15rem; }

@media (max-width: 860px) {
    .service-hero__grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .service-hero__list { grid-template-columns: 1fr; }
    .service-help { flex-direction: column; align-items: stretch; text-align: center; }
}

.price-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.8rem 1.5rem; position: relative;
    display: flex; flex-direction: column;
}
.price-card--featured { border-color: var(--blue); box-shadow: var(--glow); transform: scale(1.02); }
.price-card__tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--blue), var(--blue-bright)); color: #fff; font-size: .68rem; font-weight: 800; padding: .25rem .8rem; border-radius: var(--r-full); letter-spacing: .08em; text-transform: uppercase; }
.price-card__price { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; }
.price-card__price small { font-size: .95rem; color: var(--muted); font-weight: 500; }
.price-card ul { list-style: none; padding: 0; margin: 1.2rem 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.price-card li { display: flex; gap: .55rem; font-size: .88rem; color: var(--muted); }
.price-card li::before { content: "✓"; color: var(--blue-bright); font-weight: 800; }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.stat-strip .n { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: var(--blue-bright); letter-spacing: -.03em; }
.stat-strip .l { font-size: .8rem; color: var(--muted); }

.sos-fab {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 120;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .9rem 1.4rem; border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--danger), #FF7043);
    color: #fff; font-weight: 800; letter-spacing: .04em;
    box-shadow: 0 12px 34px rgba(239, 68, 68, .45);
}
.sos-fab:hover { color: #fff; transform: translateY(-2px); }

/* Homepage conversion elements */
.btn--call { background: var(--success); color: #04120C; border-color: transparent; font-weight: 800; }
.btn--call:hover { background: #34D399; color: #04120C; }

/* Optional owner-uploaded hero photo, sits under the existing blue glow. */
/* The photo has to survive the veil that makes the headline readable. At .72
   over .92 the truck was gone and the section looked like a plain dark panel,
   which is the same as having no photo at all. Lighter at the top where the
   sky sits behind the badge, heaviest at the foot where the small print and
   the phone number are. */
/* The photo spans the headline and the "what happened" card as one band.
   isolation makes this element its own stacking context, which is what keeps
   the z-index:-1 layer inside it — without that the negative layer sinks past
   the band and lands behind the opaque page background, so the photo loaded on
   every visit and was never seen. */
.hero-band { position: relative; }
.hero-band--photo { isolation: isolate; }

.hero-band--photo::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
        /* Readable over the headline, then deepening to the page colour before
           the photo's own bottom edge — anything short of full opacity there
           draws a hard line across the page where the image stops.

           The stops are in vw, not %, because that is the unit the edge itself
           moves in: sized to the width, the photo is always 59.5vw tall
           (862/1448), while the band's height barely changes. Percentages held
           on one screen and broke on the next — at 1280 the photo ended past
           the last stop, at 768 it ended less than halfway down it. In vw the
           fade finishes at a fixed 94% of the photo's height on every screen.
           The `min()` caps handle a very wide window, where 56vw would fall
           past the bottom of the band. */
        linear-gradient(180deg,
            rgba(8,10,14,.48) 0,
            rgba(8,10,14,.55) min(16vw, 24%),
            rgba(8,10,14,.68) min(30vw, 46%),
            rgba(8,10,14,.86) min(44vw, 68%),
            rgba(5,7,13,1)    min(56vw, 86%)),
        var(--hero-photo);
    /* The band is nearly square once it covers the card as well, and `cover`
       on a wide photo then magnifies it almost twice over — the truck vanished
       and only a door panel was left. Sizing to the width keeps the whole
       vehicle at its own proportions and lets the gradient carry the rest. */
    background-size: cover, 100% auto;
    background-position: center, center top;
    background-repeat: no-repeat;
}

/* Muted grey is right on a flat dark panel and wrong over a photograph: the
   sub-heading sat across the pale side of the van and all but disappeared.
   Over a photo it goes near-white, with a soft shadow so it holds up wherever
   the image happens to be bright. */
.hero-band--photo .hero .lead {
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
.hero-band--photo .hero h1,
.hero-band--photo .hero__vehicles,
.hero-band--photo .hero__phone {
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
/* Muted grey vanishes over the pale side of the van, same as the sub-heading. */
.hero-band--photo .hero__phone-label { color: rgba(255,255,255,.8); }

/* On a phone the viewport is tall and narrow, so a width-sized photo leaves the
   truck small at the very top. Scaling it up and anchoring on the cab keeps the
   vehicle recognisable; the gradient still carries the rest of the band.

   A landscape photo cannot fill a band this tall without cropping down to a
   single door panel, so it is not asked to: it covers the headline and fades
   out completely before the buttons. The stops are pulled up to match — at 200%
   the image ends around 40% of the band, and the fade has to be finished by
   then. */
@media (max-width: 720px) {
    .hero-band--photo::after {
        background-image:
            /* Same vw arithmetic, doubled: at 200% the photo is 119vw tall, so
               the fade has to be finished by roughly 110vw. */
            linear-gradient(180deg,
                rgba(8,10,14,.42) 0,
                rgba(8,10,14,.50) 30vw,
                rgba(8,10,14,.62) 55vw,
                rgba(8,10,14,.80) 85vw,
                rgba(5,7,13,1)    110vw),
            var(--hero-photo);
        background-size: cover, 200% auto;
        background-position: center, 58% top;
    }
}
.trust-photo {
    display: block; width: 100%; max-height: 340px; object-fit: cover;
    border-radius: var(--r-lg); border: 1px solid var(--border); margin-top: 1.6rem;
}

/* Homepage "what happened" block: narrow, centred, three picks in one row.
   Deliberately small — it is the short way into a request, not a second hero,
   and at its old size it took as much of the first screen as the headline it
   sits under. Everything here is a size, not a colour. */
.quick-help { width: min(760px, 100%); margin-inline: auto; }
.quick-help .card__body { padding: 1rem 1.1rem; }
.quick-help h3 { font-size: 1.02rem; }
.quick-help .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.quick-help .service-pick { padding: .6rem .4rem; gap: .35rem; }
.quick-help .service-pick__icon { width: 32px; height: 32px; border-radius: 10px; }
.quick-help .service-pick__icon svg { width: 18px; height: 18px; }
.quick-help .service-pick__label { font-size: .76rem; }
.quick-help .service-pick__price { font-size: .66rem; }

@media (max-width: 780px) {
    .quick-help .card__body { padding: .85rem .8rem; }
    .quick-help .service-grid { gap: .4rem; }
    .quick-help .service-pick { padding: .55rem .3rem; }
    .quick-help .service-pick__label { font-size: .7rem; }
}
.hero__vehicles {
    display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center;
    color: var(--text); font-size: .95rem; font-weight: 600; margin: -.8rem auto 1.6rem;
}
.hero__vehicles svg { stroke: var(--blue-bright); fill: none; stroke-width: 1.7; flex: 0 0 auto; }
.hero__actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
/* Tappable, but not a button: "Call now" above is the only call-to-action, and
   a second one in the same colour underneath was the same offer twice. Two
   lines — the number, then what it is for. */
.hero__phone { margin: 1.1rem 0 0; }
.hero__phone a {
    display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
    color: var(--white);
}
.hero__phone a:hover .hero__phone-number { color: var(--blue-bright); }
.hero__phone-number { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.hero__phone-label { font-size: .78rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); }

.coverage-strip {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center;
    margin-top: 1.6rem; padding: 1rem 1.3rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.coverage-strip__label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; white-space: nowrap; }
.coverage-strip__label svg { stroke: var(--blue-bright); fill: none; stroke-width: 1.8; }
.coverage-strip__areas { color: var(--muted); font-size: .9rem; }

.reviews-block { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.reviews-block__score { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .6rem; }
.reviews-block__score strong { font-size: 2.2rem; letter-spacing: -.03em; }
.reviews-block__stars { display: inline-flex; gap: .1rem; }
.reviews-block__stars svg { stroke: var(--border-strong); fill: none; stroke-width: 1.6; }
.reviews-block__stars svg.is-on { stroke: var(--warning, #F59E0B); fill: var(--warning, #F59E0B); }

/* Mobile: keep Call / SOS / WhatsApp one thumb away on every public page. */
.mobile-bar { display: none; }

@media (max-width: 720px) {
    .hero__actions .btn { width: 100%; }
    .hero__phone-number { font-size: 1.5rem; }
    .coverage-strip { flex-direction: column; text-align: center; }
    .reviews-block { flex-direction: column; align-items: stretch; }

    .sos-fab { display: none; }

    .mobile-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem;
        padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
        background: rgba(8, 10, 14, .94); backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
    }
    .mobile-bar .btn { width: 100%; justify-content: center; padding: .8rem .4rem; font-size: .92rem; }
    body { padding-bottom: 4.6rem; }
}

.footer { border-top: 1px solid var(--border); padding: 2.5rem 1.5rem 1.5rem; background: var(--ink-900); }
.footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; }
.footer h5 { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-bottom: .8rem; }
.footer a { display: block; color: var(--muted); font-size: .88rem; margin-bottom: .45rem; }
.footer a:hover { color: var(--blue-bright); }
.footer__bottom { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--faint); }

/* ======================= GA4 consent ====================== */
/* Rendered only when GA4 is configured. It keeps clear of both the floating
   SOS button (desktop, bottom right) and the phone's call bar (mobile, bottom):
   a banner may never stand between a stranded driver and the call button. */
.consent-banner {
    position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 125;
    max-width: 420px; padding: .9rem 1rem;
    display: grid; gap: .7rem;
    background: var(--ink-900); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}
.consent-banner[hidden] { display: none; }
.consent-banner__text { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.consent-banner__text a { color: var(--blue-bright); }
.consent-banner__actions { display: flex; gap: .5rem; }
.consent-banner__actions .btn { flex: 1; justify-content: center; }
@media (max-width: 720px) {
    .consent-banner {
        left: .6rem; right: .6rem; max-width: none;
        bottom: calc(4.6rem + env(safe-area-inset-bottom) + .5rem);
    }
}

/* ============================ Auth ========================= */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side {
    background: linear-gradient(155deg, var(--blue-deep), var(--black) 62%);
    padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.auth-side::after {
    content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 174, 255,.28), transparent 68%);
    right: -180px; bottom: -180px;
}
.auth-form { display: grid; place-items: center; padding: 2rem 1.5rem; }
.auth-card { width: min(420px, 100%); }

/* ============================ Driver PWA =================== */
.driver-shell { max-width: 560px; margin-inline: auto; padding-bottom: 76px; min-height: 100vh; }
.driver-top {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1rem;
    background: rgba(8, 11, 20, .9); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.driver-tabs {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: min(560px, 100%);
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(8, 11, 20, .96); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); z-index: 60;
    padding-bottom: env(safe-area-inset-bottom);
}
.driver-tabs a { padding: .6rem 0 .55rem; text-align: center; color: var(--faint); font-size: .68rem; font-weight: 600; }
.driver-tabs a.is-active { color: var(--blue-bright); }
.driver-tabs svg { width: 21px; height: 21px; display: block; margin: 0 auto 2px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.big-action { display: grid; gap: .6rem; }
.big-action .btn { padding: 1rem; font-size: 1rem; }

.signature-pad { width: 100%; height: 180px; background: #fff; border-radius: var(--r-sm); border: 1px solid var(--border-strong); touch-action: none; }

/* ============================ Print ======================== */
@media print {
    body { background: #fff; color: #000; }
    .sidebar, .topbar, .no-print, .driver-tabs, .sos-fab { display: none !important; }
    .main { margin: 0; }
    .card { border: 1px solid #ddd; box-shadow: none; }
    a { color: #000; text-decoration: none; }
    .invoice-sheet { padding: 0; }
}

.invoice-sheet { background: #fff; color: #111; padding: 2.5rem; border-radius: var(--r); max-width: 900px; margin-inline: auto; }
.invoice-sheet table { width: 100%; border-collapse: collapse; }
.invoice-sheet th { text-align: left; border-bottom: 2px solid #111; padding: .55rem; font-size: .78rem; text-transform: uppercase; }
.invoice-sheet td { padding: .55rem; border-bottom: 1px solid #e5e7eb; font-size: .9rem; }
.invoice-sheet .totals td { border: 0; }

/* ============================ Bulk selection =============== */
.table--select input[type="checkbox"] {
    width: 17px; height: 17px;
    accent-color: var(--blue);
    cursor: pointer;
    vertical-align: middle;
}
.table--select tbody tr.is-picked { background: rgba(63, 127, 232, .12); }
.table--select tbody tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--blue-bright); }

.bulk-bar {
    position: sticky; top: calc(var(--topbar-h) + .5rem); z-index: 40;
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem 1rem; margin-bottom: .8rem;
    background: linear-gradient(135deg, var(--blue-deep), var(--ink-700));
    border: 1px solid var(--blue-line);
    border-radius: var(--r);
    box-shadow: var(--glow);
    animation: slideDown .18s var(--ease);
}
.bulk-bar strong { font-size: 1.05rem; color: #fff; }

@keyframes slideDown {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

kbd {
    display: inline-block; padding: .05rem .35rem;
    border: 1px solid var(--border-strong); border-bottom-width: 2px;
    border-radius: 5px; font-family: var(--mono); font-size: .74em;
    background: var(--surface-2);
}

/* ============================ Language switcher ============ */
.lang-switch { position: relative; display: inline-block; }
.lang-switch > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: .35rem;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch__flag { font-size: 1rem; line-height: 1; }
.lang-switch__code { font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.lang-switch__name { font-size: .82rem; }

.lang-switch__menu {
    position: absolute; top: calc(100% + .4rem); right: 0; z-index: 120;
    min-width: 232px; max-height: 60vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .35rem;
}
[dir="rtl"] .lang-switch__menu { right: auto; left: 0; }
.lang-switch--full .lang-switch__menu { left: 0; right: auto; }

.lang-switch__item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem; border-radius: var(--r-sm);
    color: var(--text); font-size: .87rem; text-decoration: none;
}
.lang-switch__item:hover { background: rgba(127, 174, 255, .09); color: var(--text); }
.lang-switch__item.is-active { background: var(--blue-soft); }
.lang-switch__label { font-weight: 600; }
.lang-switch__english { margin-inline-start: auto; font-size: .72rem; color: var(--faint); }
.lang-switch__check { color: var(--blue-bright); display: inline-flex; }
/* EL / EN sit at the top for tourists, separated from the rest. */
.lang-switch__item.is-primary .lang-switch__label { font-size: .95rem; }
.lang-switch__item.is-primary .lang-switch__flag { font-size: 1.15rem; }
.lang-switch__sep { height: 1px; background: var(--border); margin: .35rem .3rem; }

/* ============================ RTL (Arabic) ================= */
[dir="rtl"] { text-align: right; }

[dir="rtl"] .sidebar {
    inset: 0 0 0 auto;
    border-right: 0;
    border-left: 1px solid var(--border);
}
[dir="rtl"] .main { margin-left: 0; margin-right: var(--sidebar-w); }
[dir="rtl"] .nav-link.is-active::before { left: auto; right: -.75rem; border-radius: 3px 0 0 3px; }

[dir="rtl"] .card--accent { border-left: 0; border-right: 3px solid var(--blue); }
[dir="rtl"] .alert { border-left-width: 1px; border-right-width: 3px; }
[dir="rtl"] .job-card { border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"] .job-card--p1 { border-right-color: var(--danger); }
[dir="rtl"] .job-card--p2 { border-right-color: var(--warning); }
[dir="rtl"] .job-card.is-selected { border-right-color: var(--blue-bright); }
[dir="rtl"] .toast { border-left: 1px solid var(--border-strong); border-right: 3px solid var(--blue); }

[dir="rtl"] .table thead th { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

[dir="rtl"] .timeline { padding-left: 0; padding-right: 1.4rem; }
[dir="rtl"] .timeline::before { left: auto; right: 5px; }
[dir="rtl"] .timeline__item::before { left: auto; right: -1.4rem; }

[dir="rtl"] .board__col { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .board__col:last-child { border-left: 0; }

[dir="rtl"] .select {
    background-position: left .7rem center;
    padding-right: .8rem; padding-left: 2rem;
}
[dir="rtl"] .toasts { right: auto; left: 1rem; }
[dir="rtl"] .sos-fab { right: auto; left: 1.2rem; }
[dir="rtl"] .switch input:checked + span::before { transform: translateX(-20px); }

/* Keep codes, plates, money and coordinates in LTR even inside RTL text */
[dir="rtl"] .mono,
[dir="rtl"] .kpi__value,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; unicode-bidi: plaintext; }

@media (max-width: 860px) {
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    [dir="rtl"] .sidebar.is-open { transform: none; }
    [dir="rtl"] .main { margin-right: 0; }
}

/* CJK: slightly larger base size for legibility */
html[lang="zh"] body, html[lang="ja"] body { font-size: 15.5px; letter-spacing: .01em; }
html[lang="ar"] body { font-size: 15.5px; }

/* ============================ Responsive =================== */
@media (max-width: 1280px) {
    .board { grid-template-columns: 320px 1fr; }
    .board__col--third { display: none; }
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-main, .grid-sidebar { grid-template-columns: minmax(0, 1fr); }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { display: none; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar.is-open { transform: none; }
    .main { margin-left: 0; }
    .board { grid-template-columns: 1fr; height: auto; }
    .board__col { border-right: 0; border-bottom: 1px solid var(--border); max-height: 460px; }
    .public-nav__links { display: none; }
    .content { padding: 1rem; }
}

@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .form-row, .form-row-3 { grid-template-columns: minmax(0, 1fr); }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr; }
    .kpi__value { font-size: 1.5rem; }
    .table thead th, .table tbody td { padding: .55rem .6rem; font-size: .82rem; }
    /* Rows of buttons and badges wrap instead of running off the screen. */
    .flex-between, .flex-center:has(> .btn), .flex-center:has(> .badge) { flex-wrap: wrap; row-gap: .5rem; }
    .mono { overflow-wrap: anywhere; }
}

/* Narrow phones: the header brand must yield so the SOS button stays on screen. */
@media (max-width: 520px) {
    .public-nav { gap: .6rem; padding: .75rem .85rem; }
    .public-nav > a:first-child { min-width: 0; }
    .public-nav > a:first-child strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Finance: 12-month income sparkline + oversized amount input */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 110px; margin-bottom: .5rem; }
.spark__bar { flex: 1; min-width: 6px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--blue-bright), var(--blue)); opacity: .85; transition: opacity .15s var(--ease); }
.spark__bar:hover { opacity: 1; }
.input--lg { font-size: 1.35rem; font-weight: 700; padding: .7rem .9rem; }

/* Bulk-select checkbox pinned inside a card in a grid list */
.card { position: relative; }
.card__select { position: absolute; top: .7rem; right: .7rem; z-index: 2; }
.card__select input { width: 17px; height: 17px; cursor: pointer; }

/* Import walkthrough */
.import-steps { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); font-size: .9rem; }
.import-steps li { margin-bottom: .35rem; }

/* Field filled from an existing record — editable, just not retyped */
.input.is-autofilled { background: var(--blue-soft); border-color: var(--blue-line); }

/* A KPI that drills through to the list behind it */
.kpi--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.kpi--link:hover { color: inherit; border-color: var(--blue); box-shadow: var(--glow); }
.kpi--link .kpi__label svg { stroke: currentColor; fill: none; opacity: .5; vertical-align: -1px; }
.kpi--link:hover .kpi__label svg { opacity: 1; }

/* Debts: one collapsible block per customer */
.debt-group { overflow: hidden; }
.debt-group__head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none; user-select: none; }
.debt-group__head::-webkit-details-marker { display: none; }
.debt-group__head:hover { background: rgba(255,255,255,.03); }
.debt-group__chevron svg { stroke: var(--faint); fill: none; transition: transform .18s var(--ease); }
.debt-group[open] .debt-group__chevron svg { transform: rotate(90deg); stroke: var(--blue-bright); }
.debt-group__who { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.debt-group__amount { font-weight: 800; font-size: 1.1rem; margin-left: auto; white-space: nowrap; }
.row-link { cursor: pointer; }
.row-link:hover { background: rgba(127, 174, 255,.07); }
@media (max-width: 640px) { .debt-group__head { flex-wrap: wrap; gap: .5rem; } }

/* Delete button waiting for a second click to confirm. */
.btn.is-armed {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ---------- payments on a job: one line each, cog to edit ---------- */
.pay-list { display: flex; flex-direction: column; gap: .35rem; }

.pay-item {
    border: 1px solid var(--line, #23304a);
    border-radius: var(--r-sm, 6px);
    background: rgba(255, 255, 255, .02);
}

.pay-item.is-editing { border-color: var(--blue, #3F7FE8); }

.pay-item__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
}

.pay-item__date   { font-size: .8rem; white-space: nowrap; }
.pay-item__note   { font-size: .78rem; flex: 1; min-width: 0;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-item__amount { font-size: .95rem; white-space: nowrap; }

.pay-item__row .btn { padding: .25rem .45rem; line-height: 1; }
.pay-item__row form { display: inline; }

.pay-item__edit {
    padding: .1rem .55rem .6rem;
    border-top: 1px dashed var(--line, #23304a);
}

@media (max-width: 560px) {
    .pay-item__row { flex-wrap: wrap; }
    .pay-item__note { flex-basis: 100%; order: 5; }
}

/* Sortable column header. */
.th-sort a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.th-sort a:hover { color: var(--blue-bright, #7FAEFF); }
.th-sort__arrow  { font-size: .9em; opacity: .75; }

/* ---------- who we serve ---------- */
.serve-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .9rem 1.5rem;
}

.serve-item { display: flex; align-items: flex-start; gap: .7rem; }

.serve-item__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    background: rgba(63, 127, 232, .12);
    color: var(--blue-bright, #7FAEFF);
}

.serve-item strong { display: block; font-size: .95rem; line-height: 1.3; }
.serve-item .muted { display: block; font-size: .84rem; line-height: 1.45; margin-top: .1rem; }

/* ---------- services: one box, one list ---------- */
.svc-box { overflow: hidden; }

.svc {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: .3rem .85rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--line-soft, rgba(255, 255, 255, .06));
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}

.svc:last-child { border-bottom: 0; }

.svc:hover,
.svc:focus-visible { background: rgba(63, 127, 232, .07); }
.svc:focus-visible { outline: 2px solid var(--blue-bright, #7FAEFF); outline-offset: -2px; }

.svc__icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 9px;
    background: rgba(63, 127, 232, .14);
    color: var(--blue-bright, #7FAEFF);
}

.svc__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.svc__name { font-size: .97rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.svc__desc { font-size: .84rem; line-height: 1.45; color: var(--ink-soft, #a7b1c4); }

.svc__meta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    white-space: nowrap;
    color: var(--ink-faint, #7c8698);
}

.svc__go {
    font-size: 1.05rem;
    color: var(--ink-faint, #7c8698);
    transition: transform .15s ease, color .15s ease;
}

.svc:hover .svc__go { color: var(--blue-bright, #7FAEFF); transform: translateX(3px); }

/* On a phone the wait time drops under the name instead of squeezing it. */
@media (max-width: 620px) {
    .svc { grid-template-columns: auto 1fr auto; padding: .8rem .95rem; }

    /* Two lines is enough to know what it is; the full text lives on the
       page it links to. Otherwise five rows fill the whole phone screen. */
    .svc__desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .svc__meta { grid-column: 2 / 3; grid-row: 2; margin-top: .15rem; }
    .svc__go { grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
    .svc, .svc__go { transition: none; }
}

/* ---------------------------------------------------- date fields
   A text field showing DD/MM/YYYY with the real <input type="date">
   lying invisibly on top of it, so the browser's own locale never
   decides how a date reads. See RA.initDateFields in app.js. */
.datefield {
    position: relative;
    display: inline-block;
    width: 100%;
}

.datefield > input[type="text"] {
    width: 100%;
    padding-right: 2.1rem;
}

/* Kept rendered and focusable — display:none would stop Chrome
   reporting a failed `required` on it. */
.datefield > input[type="date"],
.datefield > input[type="datetime-local"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.datefield__pick {
    position: absolute;
    top: 50%;
    right: .3rem;
    transform: translateY(-50%);
    padding: .2rem .25rem;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}

.datefield__pick:hover { opacity: 1; }

.datefield > input.is-invalid {
    border-color: var(--danger, #E5484D);
}