/*
 * A5 (§14, "Design system original") : système de design de l'app Blade (chauffeur/admin/client) —
 * extrait du <style> inline de layouts/app.blade.php (2026-09-05), même rendu visuel exact, mais
 * organisé en tokens documentés + composants réutilisables nommés, au lieu d'un bloc de règles non
 * différencié. Choix assumé : CSS custom (pas Tailwind/Alpine, cf. cahier des charges) — cohérent
 * avec toute l'app existante, pas de framework CSS à introduire pour un gain esthétique sans besoin
 * fonctionnel identifié. Périmètre : l'app Blade uniquement — le site vitrine statique
 * (public/*.html, ~40 pages) garde son propre assets/style.css, projet de refonte séparé.
 *
 * Structure : Tokens → Base → Mise en page → Barre du haut → Navigation → Cartes/Stats → Badges →
 * Boutons → Formulaires → Tableaux → Utilitaires. Chaque composant n'utilise QUE les tokens
 * ci-dessous (jamais une couleur/un espacement en dur ailleurs dans ce fichier) — modifier un token
 * répercute la même valeur partout où il est utilisé.
 */

/* ── Tokens ────────────────────────────────────────────────────────────────────────────────── */
:root {
    /* Couleurs de marque — identité "ESTAFETTE" (2026-09-11, générée sur brief produit puis
       validée par Youssef, voir docs/product/BRAND.md) : navy premium + or, remplace l'ancien
       vert générique. --brand/--brand-dark pilotent boutons/liens/texte de marque dans tout ce
       fichier (aucune couleur de marque en dur ailleurs) — changer ces deux valeurs suffit. */
    --brand: #14213D;
    --brand-dark: #0B132B;
    --accent: #C59A58;
    --ink: #16211c;
    --muted: #5c6b63;
    --bg: #f4f7f5;
    --card: #ffffff;
    --border: #e1e8e3;
    --danger: #c0392b;
    /* K4 (§14, WCAG) : #b8860b sur le fond `.badge.open` (#fff4d6) ne donnait que 2.97:1 (trouvé
       par le scan axe-core de cette tranche) — assombri à #8a6508 (seul usage de ce token), calcul
       réel : 4.88:1. Rendu quasi identique (même teinte or/brun, légèrement plus foncée). */
    --warn: #8a6508;

    /* Échelle d'espacement (multiples de 2px) — utilisée pour padding/margin/gap */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;

    /* Échelle typographique */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 22px;

    /* Rayons de bordure */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;
}

/* ── Base ──────────────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    padding-bottom: 72px;
}
/* K4 (§14, WCAG) : anneau de focus visible et cohérent sur tout élément interactif — au clavier
   uniquement (`:focus-visible`), pour ne pas afficher l'anneau sur un simple clic souris. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
}

/* ── Mise en page ──────────────────────────────────────────────────────────────────────────── */
main { max-width: 640px; margin: 0 auto; padding: var(--space-4); }
.hidden { display: none !important; }

/* ── Barre du haut ─────────────────────────────────────────────────────────────────────────── */
header.topbar {
    background: var(--brand);
    color: #fff;
    padding: 14px var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}
header.topbar a.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: var(--text-lg); }
header.topbar form { margin: 0; }
header.topbar button.logout {
    /* K4 (§14, WCAG) : overlay clair remplacé par un overlay sombre — un overlay blanc sur le vert de
       marque ÉCLAIRCIT le fond, ce qui réduit le contraste avec le texte blanc (4.02:1, sous le seuil
       4.5:1 requis, trouvé par le scan axe-core de cette tranche) ; un overlay noir de même opacité
       ASSOMBRIT légèrement le fond à la place, portant le contraste réel à 6.85:1 — vérifié par calcul
       (pas estimé) et en navigateur, rendu quasi identique (pastille verte légèrement plus foncée). */
    background: rgba(0,0,0,0.15); color: #fff; border: none; border-radius: var(--radius-sm);
    padding: 6px 10px; font-size: var(--text-sm); cursor: pointer;
}
header.topbar button.pwa-install-btn {
    background: #fff; color: var(--brand-dark); border: none; border-radius: var(--radius-sm);
    padding: 6px 10px; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}

/* ── Navigation ────────────────────────────────────────────────────────────────────────────── */
nav.bottom {
    position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border);
    display: flex; z-index: 10;
}
nav.bottom a {
    flex: 1; text-align: center; padding: 10px 4px; text-decoration: none; color: var(--muted); font-size: var(--text-xs);
}
nav.bottom a.active { color: var(--brand-dark); font-weight: 700; }
.admin-subnav { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 14px; }
.admin-subnav a { font-size: var(--text-sm); padding: 6px 12px; border-radius: var(--radius-full); background: #fff; border: 1px solid var(--border); color: var(--muted); text-decoration: none; }
.admin-subnav a.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Cartes & statistiques ─────────────────────────────────────────────────────────────────── */
.card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-4); margin-bottom: 14px;
}
.card h3 { margin: 0 0 6px; font-size: var(--text-md); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--space-4); }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; text-align: center; }
.stat .value { font-size: var(--text-2xl); font-weight: 700; color: var(--brand-dark); }
.stat .label { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.trip { font-size: var(--text-md); font-weight: 600; margin-bottom: 2px; }
.price { font-size: var(--text-xl); font-weight: 700; color: var(--brand-dark); }

/* ── Messages d'état ───────────────────────────────────────────────────────────────────────── */
.flash {
    background: #F2E9D5; border: 1px solid var(--brand); color: var(--brand-dark);
    padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 14px; font-size: var(--text-base);
}
.errors { background: #fdecea; border: 1px solid var(--danger); color: var(--danger); padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 14px; font-size: var(--text-base); }
.muted { color: var(--muted); font-size: var(--text-sm); }

/* ── Badges de statut ──────────────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; }
.badge.open { background: #fff4d6; color: var(--warn); }
.badge.pending_payment { background: #f2e6fa; color: #6a1b9a; }
.badge.assigned, .badge.en_route { background: #dcefff; color: #1a5a99; }
.badge.completed { background: #F2E9D5; color: var(--brand-dark); }
.badge.cancelled, .badge.expired { background: #f2f2f2; color: var(--muted); }

/* ── Boutons ───────────────────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block; background: var(--brand); color: #fff; border: none; border-radius: var(--radius-md);
    padding: 10px 16px; font-size: var(--text-base); font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn.secondary { background: #fff; color: var(--brand-dark); border: 1px solid var(--brand); }
.btn.danger { background: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Formulaires ───────────────────────────────────────────────────────────────────────────── */
label { display: block; font-size: var(--text-sm); color: var(--muted); margin: 10px 0 4px; }
input, select, textarea {
    width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-md);
}
textarea { font-size: var(--text-sm); font-family: ui-monospace, Menlo, Consolas, monospace; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-row input { width: auto; }
.inline-form { display: inline; }
/* K4 (§14, WCAG) : label utile aux lecteurs d'écran uniquement (un placeholder suffit
   visuellement, mais disparaît à la saisie et n'est pas fiable comme seul nom accessible d'un champ). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Tableaux ──────────────────────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
table th, table td { text-align: start; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.table-wrap { overflow-x: auto; }

/* ── Divers ────────────────────────────────────────────────────────────────────────────────── */
details.rule summary { cursor: pointer; font-weight: 600; padding: var(--space-2) 0; }
details.rule[open] summary { margin-bottom: 6px; }
.breakdown-line { display: flex; justify-content: space-between; font-size: var(--text-sm); padding: 3px 0; border-bottom: 1px dashed var(--border); }