/* Back-office Taxi Hubert — charte : jaune taxi #F4AC00, encre #111114, surfaces claires. */
:root {
    --bo-brand: #f4ac00;
    --bo-brand-strong: #d99600;
    --bo-brand-soft: #fff4d6;
    --bo-ink: #111114;
    --bo-ink-2: #1c1c21;
    --bo-bg: #f5f4f1;
    --bo-surface: #ffffff;
    --bo-muted: #f0efeb;
    --bo-line: #e7e5df;
    --bo-fg: #111114;
    --bo-fg2: #55545c;
    --bo-fg3: #8a8990;
    --bo-success: #0f9d6b;
    --bo-success-soft: #e6f6ef;
    --bo-warning: #b86e00;
    --bo-warning-soft: #fff5e0;
    --bo-danger: #d93025;
    --bo-danger-soft: #fdecea;
    --bo-info: #2563eb;
    --bo-info-soft: #eaf1fe;
    --bo-radius: 14px;
    --bo-shadow: 0 1px 2px rgba(17, 17, 20, .06), 0 8px 24px rgba(17, 17, 20, .05);
    font-family: 'Plus Jakarta Sans', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body.bo { margin: 0; background: var(--bo-bg); color: var(--bo-fg); font-size: 14px; line-height: 1.45; }
a { color: inherit; }
.bo-layout { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

/* Barre latérale */
.bo-sidebar { background: var(--bo-ink); color: #e9e8ee; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px 24px; }
.bo-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; }
.bo-brand img { height: 42px; }
.bo-brand small { display: block; color: var(--bo-brand); font-weight: 700; letter-spacing: .08em; font-size: 10px; text-transform: uppercase; }
.bo-nav-section { margin: 14px 8px 6px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #8d8c96; font-weight: 700; }
.bo-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: #d8d7de; font-weight: 600; }
.bo-nav a:hover { background: var(--bo-ink-2); color: #fff; }
.bo-nav a.is-active { background: var(--bo-brand); color: var(--bo-ink); }
.bo-nav .bo-count { background: var(--bo-danger); color: #fff; border-radius: 99px; padding: 1px 7px; font-size: 11px; font-weight: 800; }
.bo-nav a.is-active .bo-count { background: var(--bo-ink); }
.bo-sidebar-foot { margin-top: 20px; padding: 12px 8px 0; border-top: 1px solid #2a2a30; font-size: 12px; color: #8d8c96; }
.bo-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bo-menu-close, .bo-menu-btn, .bo-top-logo, .bo-backdrop { display: none; }


/* Contenu */
.bo-main { min-width: 0; }
.bo-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: rgba(245, 244, 241, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bo-line); }
.bo-top form { flex: 1; max-width: 520px; }
.bo-top input[type=search] { width: 100%; }
.bo-top .bo-user { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--bo-fg2); font-weight: 600; }
.bo-alerts { display: flex; gap: 8px; }
.bo-alert-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font-weight: 700; font-size: 12px; text-decoration: none; }
.bo-alert-pill.danger { background: var(--bo-danger); color: #fff; }
.bo-alert-pill.warning { background: var(--bo-warning-soft); color: var(--bo-warning); }
.bo-content { padding: 24px 28px 48px; }

/* Mobile et tablette : menu en tiroir, ouvert par le bouton ☰ de la barre du haut. */
@media (max-width: 900px) {
    .bo-layout { display: block; }
    .bo-sidebar { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(290px, 84vw); height: 100vh; height: 100dvh; overscroll-behavior: contain;
        transform: translateX(-100%); transition: transform .22s ease, visibility 0s linear .22s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); visibility: hidden; }
    body.bo-menu-open .bo-sidebar { transform: none; visibility: visible; transition: transform .22s ease; }
    body.bo-menu-open { overflow: hidden; }
    .bo-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(17, 17, 20, .5); }
    body.bo-menu-open .bo-backdrop { display: block; }
    .bo-menu-close { display: block; background: none; border: 0; color: #d8d7de; font-size: 30px; line-height: 1; padding: 4px 8px; cursor: pointer; }
    .bo-menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bo-line); background: var(--bo-ink); cursor: pointer; flex: none; }
    .bo-menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--bo-brand); }
    .bo-top-logo { display: flex; align-items: center; flex: none; height: 40px; padding: 0 10px; border-radius: 10px; background: var(--bo-ink); }
    .bo-top-logo img { height: 30px; display: block; }
    .bo-top { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
    .bo-top form { order: 10; flex: 1 1 100%; max-width: none; }
    .bo-top .bo-user .bo-btn { white-space: nowrap; }
}
@media (max-width: 560px) { .bo-hide-sm { display: none; } }
@media (max-width: 420px) { .bo-top-logo { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .bo-sidebar { transition: none; } }
.bo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bo-head h1 { font-size: 26px; line-height: 1.15; margin: 0; letter-spacing: -.02em; }
.bo-head p { margin: 4px 0 0; color: var(--bo-fg2); max-width: 760px; }
.bo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Cartes, grilles */
.bo-card { background: var(--bo-surface); border: 1px solid var(--bo-line); border-radius: var(--bo-radius); box-shadow: var(--bo-shadow); padding: 18px; }
.bo-card + .bo-card { margin-top: 16px; }
.bo-card h2 { font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bo-card h3 { font-size: 14px; margin: 16px 0 8px; }
.bo-grid { display: grid; gap: 16px; }
.bo-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bo-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bo-grid-main { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
@media (max-width: 1100px) { .bo-grid-3, .bo-grid-4, .bo-grid-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .bo-grid-2, .bo-grid-3, .bo-grid-4, .bo-grid-main { grid-template-columns: 1fr; } .bo-content { padding: 16px; } }

.bo-kpi { background: var(--bo-surface); border: 1px solid var(--bo-line); border-radius: var(--bo-radius); padding: 16px 18px; box-shadow: var(--bo-shadow); text-decoration: none; display: block; }
.bo-kpi span { color: var(--bo-fg2); font-weight: 600; font-size: 12.5px; }
.bo-kpi strong { display: block; font-size: 26px; letter-spacing: -.02em; margin-top: 4px; }
.bo-kpi small { color: var(--bo-fg3); }
.bo-kpi.brand { background: var(--bo-ink); color: #fff; border-color: var(--bo-ink); }
.bo-kpi.brand span, .bo-kpi.brand small { color: #bdbcc5; }
.bo-kpi.brand strong { color: var(--bo-brand); }
.bo-kpi.alert { border-color: var(--bo-danger); background: var(--bo-danger-soft); }

/* Tableaux */
.bo-table-wrap { overflow-x: auto; margin: 0 -18px; }
table.bo-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bo-table th { text-align: left; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--bo-fg3); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--bo-line); white-space: nowrap; }
.bo-table td { padding: 10px 12px; border-bottom: 1px solid var(--bo-line); vertical-align: top; }
.bo-table tr:last-child td { border-bottom: 0; }
.bo-table th:first-child, .bo-table td:first-child { padding-left: 18px; }
.bo-table th:last-child, .bo-table td:last-child { padding-right: 18px; }
.bo-table tr.is-alert td { background: var(--bo-danger-soft); }
.bo-table a.bo-row-link { font-weight: 700; text-decoration: none; }
.bo-table a.bo-row-link:hover { text-decoration: underline; }
.bo-muted { color: var(--bo-fg3); }
.bo-small { font-size: 12px; }
.bo-nowrap { white-space: nowrap; }
.bo-right { text-align: right; }
.bo-strong { font-weight: 800; }

/* Badges */
.bo-badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--bo-muted); color: var(--bo-fg2); white-space: nowrap; }
.bo-badge.success { background: var(--bo-success-soft); color: var(--bo-success); }
.bo-badge.warning { background: var(--bo-warning-soft); color: var(--bo-warning); }
.bo-badge.danger { background: var(--bo-danger-soft); color: var(--bo-danger); }
.bo-badge.info { background: var(--bo-info-soft); color: var(--bo-info); }
.bo-badge.brand { background: var(--bo-brand-soft); color: var(--bo-brand-strong); }
.bo-badge.ink { background: var(--bo-ink); color: var(--bo-brand); }

/* Boutons et formulaires */
.bo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 1px solid transparent; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; background: var(--bo-muted); color: var(--bo-fg); white-space: nowrap; }
.bo-btn:hover { filter: brightness(.97); }
.bo-btn.primary { background: var(--bo-ink); color: #fff; }
.bo-btn.brand { background: var(--bo-brand); color: var(--bo-ink); }
.bo-btn.danger { background: var(--bo-danger); color: #fff; }
.bo-btn.ghost { background: transparent; border-color: var(--bo-line); }
.bo-btn.sm { padding: 5px 10px; font-size: 12.5px; }
.bo-btn[disabled] { opacity: .5; cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; background: var(--bo-surface); border: 1px solid var(--bo-line); border-radius: 10px; padding: 8px 11px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bo-brand); outline-offset: 0; border-color: var(--bo-brand); }
textarea { min-height: 90px; resize: vertical; width: 100%; }
.bo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.bo-form .full { grid-column: 1 / -1; }
.bo-field label { display: block; font-weight: 700; font-size: 12.5px; color: var(--bo-fg2); margin-bottom: 5px; }
.bo-field input:not([type=checkbox]):not([type=radio]), .bo-field select, .bo-field textarea { width: 100%; }
.bo-field .bo-help { color: var(--bo-fg3); font-size: 12px; margin-top: 4px; }
.bo-field .bo-error { color: var(--bo-danger); font-size: 12px; margin-top: 4px; font-weight: 600; }
.bo-check { display: flex; align-items: center; gap: 8px; font-weight: 600; padding-top: 22px; }
.bo-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.bo-checks label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--bo-fg); font-size: 13px; }
.bo-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bo-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.bo-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bo-tabs a { padding: 6px 12px; border-radius: 99px; text-decoration: none; font-weight: 700; background: var(--bo-surface); border: 1px solid var(--bo-line); color: var(--bo-fg2); }
.bo-tabs a.is-active { background: var(--bo-ink); border-color: var(--bo-ink); color: #fff; }
.bo-tabs a .bo-count { margin-left: 4px; color: var(--bo-danger); }

/* Messages */
.bo-flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-weight: 600; }
.bo-flash.success { background: var(--bo-success-soft); color: var(--bo-success); }
.bo-flash.error { background: var(--bo-danger-soft); color: var(--bo-danger); }
.bo-flash ul { margin: 0; padding-left: 18px; }
.bo-empty { text-align: center; padding: 36px 12px; color: var(--bo-fg3); }

/* Listes clé / valeur */
dl.bo-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 8px 12px; margin: 0; }
.bo-dl dt { color: var(--bo-fg3); font-weight: 600; }
.bo-dl dd { margin: 0; font-weight: 600; }

/* Chronologie */
.bo-timeline { list-style: none; margin: 0; padding: 0; }
.bo-timeline li { position: relative; padding: 0 0 14px 20px; border-left: 2px solid var(--bo-line); margin-left: 6px; }
.bo-timeline li::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bo-brand); border: 2px solid #fff; }
.bo-timeline li:last-child { border-color: transparent; }

/* Carte */
.bo-map { height: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bo-line); background: var(--bo-muted); }
.bo-map.tall { height: calc(100vh - 210px); min-height: 480px; }
.bo-map.small { height: 280px; }
.bo-car { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.bo-car.online { background: var(--bo-success); color: #fff; }
.bo-car.busy { background: var(--bo-ink); color: var(--bo-brand); }
.bo-car.paused { background: var(--bo-warning); color: #fff; }
.bo-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: var(--bo-fg2); font-size: 12.5px; }
.bo-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* Graphiques simples (barres CSS) */
.bo-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 10px; }
.bo-bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; }
.bo-bars span.bar { width: 100%; background: var(--bo-brand); border-radius: 5px 5px 2px 2px; min-height: 2px; }
.bo-bars span.bar.ink { background: var(--bo-ink); }
.bo-bars small { font-size: 10px; color: var(--bo-fg3); margin-top: 4px; white-space: nowrap; }
.bo-hbar { display: grid; grid-template-columns: 160px 1fr 70px; gap: 10px; align-items: center; margin: 6px 0; }
.bo-hbar .track { background: var(--bo-muted); border-radius: 99px; height: 10px; overflow: hidden; }
.bo-hbar .track span { display: block; height: 100%; background: var(--bo-brand); border-radius: 99px; }
.bo-heat { display: grid; grid-template-columns: 40px repeat(24, 1fr); gap: 2px; font-size: 10px; }
.bo-heat span { height: 18px; border-radius: 3px; }
.bo-heat b { font-weight: 600; color: var(--bo-fg3); align-self: center; }

/* Conversation */
.bo-chat { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.bo-msg { max-width: 78%; padding: 10px 12px; border-radius: 14px; background: var(--bo-muted); }
.bo-msg.staff { margin-left: auto; background: var(--bo-ink); color: #fff; }
.bo-msg small { display: block; opacity: .65; margin-top: 4px; font-size: 11px; }

.bo-pagination { display: flex; gap: 6px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.bo-pagination a, .bo-pagination span { padding: 5px 11px; border-radius: 99px; background: var(--bo-surface); border: 1px solid var(--bo-line); text-decoration: none; font-weight: 700; font-size: 12.5px; }
.bo-pagination .is-current { background: var(--bo-ink); border-color: var(--bo-ink); color: #fff; }
.bo-pagination .is-disabled { color: var(--bo-fg3); }

details.bo-details summary { cursor: pointer; font-weight: 700; }
.bo-divider { height: 1px; background: var(--bo-line); margin: 14px 0; }
.bo-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* Clés d'API : résultat des tests de connexion */
.bo-api-result { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--bo-muted); }
.bo-api-result.is-ok { background: var(--bo-success-soft); color: var(--bo-success); font-weight: 600; }
.bo-api-result.is-ko { background: var(--bo-danger-soft); color: var(--bo-danger); font-weight: 600; }