@import url('rubikfleety.css');

:root {
    --bg: #0f1419;
    --surface: #1a2332;
    --surface2: #243044;
    --border: #2d3a4f;
    --text: #e8edf4;
    --muted: #8b9cb3;
    --accent: #3d8bfd;
    --accent-dim: #2a5fae;
    --card: #222d3f;
    --radius: 10px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    --overlay-backdrop: rgba(0, 0, 0, 0.55);
    --del-hover: #f87171;
    --err-text: #f87171;
    --warn-text: #fbbf24;
    --accent-drop-hover: rgba(61, 139, 253, 0.12);
    --tour-drop-bg: rgba(0, 0, 0, 0.04);
    /** Vue jour : nombre de colonnes de tournées par ligne (surchargé par le JS si besoin). */
    --rubikfleet-day-tour-cols-per-row: 3;
    --flotte-fuel-filled-bg: #1a3d2e;
    --flotte-fuel-filled-border: #2d6a4f;
    --flotte-fuel-filled-text: #d8f3e4;
    --flotte-fuel-current-bg: #4a3f14;
    --flotte-fuel-current-border: #a16207;
    --flotte-fuel-current-text: #fef08a;
    --flotte-fuel-empty-bg: #252f3f;
    --flotte-fuel-empty-border: #3d4f66;
    --flotte-fuel-empty-text: #c5d0de;
    --flotte-fuel-future-bg: #1c2433;
    --flotte-fuel-future-text: #5c6b82;
    --flotte-fuel-compare-curr: #34d399;
    --flotte-fuel-year-nav-bg: #1a2332;
    --flotte-fuel-year-nav-hover: #243044;
    --fleet-maint-overdue-bg: #141218;
    --fleet-maint-overdue-border: #5c3d2e;
    --fleet-maint-today-bg: #1a2838;
    --fleet-maint-today-border: #3d6b9a;
    --fleet-maint-today-date: #7dd3fc;
    --fleet-maint-today-subtitle: #93c5fd;
    --fleet-cal-maint-dot1: #fde047;
    --fleet-cal-maint-dot2: #eab308;
    --fleet-cal-maint-dot-completed1: #4ade80;
    --fleet-cal-maint-dot-completed2: #15803d;
    --fleet-cal-maint-tip-bg: var(--surface);
    --fleet-cal-maint-tip-border: var(--border);
    color-scheme: dark;
}

html[data-theme="light"] .day-unplanned-zone {
    background: #fdf4ff;
    border-color: #e879f9;
}

html[data-theme="light"] .day-unplanned-head {
    background: #fae8ff;
    border-bottom-color: #f0abfc;
}

html[data-theme="light"] .day-unplanned-title {
    color: #86198f;
}

html[data-theme="light"] .day-unplanned-hint {
    color: #a21caf;
}

html[data-theme="light"] .day-unplanned-lane {
    background: #fefcff;
}

html[data-theme="light"] .day-unplanned-zone.day-unplanned-zone--empty {
    background: #f0fdf4;
    border-color: #4ade80;
}

html[data-theme="light"] .day-unplanned-zone--empty .day-unplanned-head {
    background: #dcfce7;
    border-bottom-color: #86efac;
    padding: 8px 12px;
}

html[data-theme="light"] .day-unplanned-zone--empty .day-unplanned-title {
    color: #14532d;
}

html[data-theme="light"] .day-unplanned-zone--empty .day-unplanned-hint {
    color: #166534;
}

html[data-theme="light"] .day-unplanned-zone--empty .day-unplanned-lane {
    background: #f7fee7;
    min-height: 0;
    padding: 0;
}

html[data-theme="light"] .day-unplanned-zone--empty .day-unplanned-celebration {
    padding: 6px 12px 8px;
    font-size: 14px;
}

html[data-theme="light"] {
    --flotte-fuel-filled-bg: #dcfce7;
    --flotte-fuel-filled-border: #22c55e;
    --flotte-fuel-filled-text: #14532d;
    --flotte-fuel-current-bg: #fef9c3;
    --flotte-fuel-current-border: #eab308;
    --flotte-fuel-current-text: #713f12;
    --flotte-fuel-empty-bg: #f4f6f9;
    --flotte-fuel-empty-border: #f0f2f6;
    --flotte-fuel-empty-text: #334155;
    --flotte-fuel-future-bg: #f4f6f9;
    --flotte-fuel-future-text: #94a3b8;
    --flotte-fuel-compare-curr: #16a34a;
    --flotte-fuel-year-nav-bg: #d8dde6;
    --flotte-fuel-year-nav-hover: #c4cbd8;
    --fleet-maint-overdue-bg: #ede9e4;
    --fleet-maint-overdue-border: #c4a574;
    --fleet-maint-today-bg: #e0f2fe;
    --fleet-maint-today-border: #93c5fd;
    --fleet-maint-today-date: #0369a1;
    --fleet-maint-today-subtitle: #0369a1;
    --fleet-cal-maint-dot1: #facc15;
    --fleet-cal-maint-dot2: #eab308;
    --fleet-cal-maint-dot-completed1: #22c55e;
    --fleet-cal-maint-dot-completed2: #15803d;
    --fleet-cal-maint-tip-bg: #ffffff;
    --fleet-cal-maint-tip-border: #e2e8f0;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface2: #fafafa;
    --border: #f0f2f6;
    --text: #141a24;
    --muted: #5a6b82;
    --accent: #2563eb;
    --accent-dim: #1d4ed8;
    --card: #ffffff;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-btn: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --overlay-backdrop: rgba(15, 23, 42, 0.4);
    --del-hover: #dc2626;
    --err-text: #b91c1c;
    --warn-text: #b45309;
    --accent-drop-hover: rgba(37, 99, 235, 0.14);
    --tour-drop-bg: rgba(15, 23, 42, 0.04);
    color-scheme: light;
}

/*
 * Barres latérales (tiroir navigation + liste flotte) : même palette que le thème sombre,
 * y compris en mode clair (le reste de l’UI suit le thème clair).
 */
html[data-theme="light"] .nav-drawer {
    background: #1a2332;
    border-right: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .nav-drawer-header {
    border-bottom-color: #2d3a4f;
}

html[data-theme="light"] .nav-drawer-title {
    color: #e8edf4;
}

html[data-theme="light"] .nav-drawer-close {
    color: #8b9cb3;
}

html[data-theme="light"] .nav-drawer-close:hover {
    color: #e8edf4;
    background: #243044;
}

html[data-theme="light"] .nav-drawer-link {
    color: #e8edf4;
}

html[data-theme="light"] .nav-drawer-link:hover {
    background: #243044;
    border-color: #2d3a4f;
}

html[data-theme="light"] .nav-drawer-link[aria-current="page"] {
    background: #243044;
    border-color: #2a5fae;
    color: #3d8bfd;
}

html[data-theme="light"] .flotte-sidebar {
    background: #243044;
    border-right-color: #2d3a4f;
}

html[data-theme="light"] .flotte-sidebar-reminders {
    background: #243044;
    border-top-color: #2d3a4f;
}

html[data-theme="light"] .flotte-sidebar-reminders-title,
html[data-theme="light"] .flotte-sidebar-reminders-empty,
html[data-theme="light"] .flotte-sidebar-reminders-loading {
    color: #8b9cb3;
}

html[data-theme="light"] .flotte-global-maint-item {
    background: rgba(0, 0, 0, 0.2);
    border-color: #2d3a4f;
    color: #e8edf4;
}

html[data-theme="light"] .flotte-global-maint-item:hover {
    background: #2d3a4f;
    border-color: #3d8bfd;
}

html[data-theme="light"] .flotte-global-maint-date {
    color: #8b9cb3;
}

html[data-theme="light"] .flotte-global-maint-vehicle {
    color: #e8edf4;
}

html[data-theme="light"] .flotte-global-maint-nature {
    color: #9ca8b8;
}

html[data-theme="light"] .flotte-global-maint-item--overdue {
    background: linear-gradient(
        165deg,
        rgba(220, 38, 38, 0.38) 0%,
        rgba(90, 20, 12, 0.65) 100%
    );
    border-color: #fb923c;
    box-shadow:
        0 0 0 1px rgba(251, 146, 60, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .flotte-global-maint-item--overdue:hover {
    border-color: #fdba74;
    background: linear-gradient(
        165deg,
        rgba(239, 68, 68, 0.45) 0%,
        rgba(110, 25, 15, 0.72) 100%
    );
}

html[data-theme="light"] .flotte-global-maint-item--overdue .flotte-global-maint-date {
    color: #fde68a;
}

html[data-theme="light"] .flotte-global-maint-item--overdue .flotte-global-maint-vehicle {
    color: #fffbeb;
}

html[data-theme="light"] .flotte-global-maint-item--overdue .flotte-global-maint-nature {
    color: #fed7aa;
}

html[data-theme="light"] .flotte-global-maint-overdue-badge {
    color: #431407;
    background: linear-gradient(180deg, #fde047 0%, #f97316 100%);
}

html[data-theme="light"] .flotte-sidebar-title,
html[data-theme="light"] .flotte-sidebar-empty,
html[data-theme="light"] .flotte-sidebar-section-title,
html[data-theme="light"] .flotte-sidebar-section-empty {
    color: #8b9cb3;
}

html[data-theme="light"] .flotte-sidebar-add-vehicle-btn {
    background: transparent;
    border-color: transparent;
    color: #8b9cb3;
}

html[data-theme="light"] .flotte-sidebar-add-vehicle-btn:hover {
    background: #2d3a4f;
    border-color: #2d3a4f;
    color: #e8edf4;
}

html[data-theme="light"] .flotte-sidebar-section {
    border-bottom-color: #2d3a4f;
}

/* Même palette que les séparateurs de section : --border du thème clair est trop clair sur fond #243044 */
html[data-theme="light"] .flotte-sidebar-hors-parc {
    border-top-color: #2d3a4f;
}

html[data-theme="light"] .flotte-sidebar-hors-parc-btn {
    border-color: #2d3a4f;
}

html[data-theme="light"] .flotte-sidebar-section-title {
    border-left-color: #3d8bfd;
}

html[data-theme="light"] .flotte-vehicle-item {
    color: #e8edf4;
    border-left-color: #2d3a4f;
}

html[data-theme="light"] .flotte-vehicle-item:hover {
    background: #2d3a4f;
}

html[data-theme="light"] .flotte-vehicle-item:focus-visible {
    outline-color: #3d8bfd;
}

html[data-theme="light"] .flotte-vehicle-item.is-active {
    background: #1a2332;
    border-left-color: #2a5fae;
}

html[data-theme="light"] .flotte-vehicle-item-plate {
    color: #8b9cb3;
}

@media (max-width: 720px) {
    html[data-theme="light"] .flotte-sidebar {
        border-bottom-color: #2d3a4f;
    }
}

/* Topbar : palette du thème sombre même en mode clair */
html[data-theme="light"] .topbar {
    background: #1a2332;
    border-bottom-color: #2d3a4f;
}

html[data-theme="light"] .topbar .brand,
html[data-theme="light"] .topbar .brand-sub {
    color: #e8edf4;
}

html[data-theme="light"] .topbar .week-label {
    color: #8b9cb3;
}

html[data-theme="light"] .topbar .btn {
    background: #243044;
    border-color: #2d3a4f;
    color: #e8edf4;
}

html[data-theme="light"] .topbar .btn:hover {
    background: #2d3a4f;
    border-color: #2d3a4f;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .topbar .btn-primary {
    background: #3d8bfd;
    border-color: #2a5fae;
    color: #fff;
}

html[data-theme="light"] .topbar .btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 3px 12px rgba(61, 139, 253, 0.45);
}

html[data-theme="light"] .topbar .btn-secondary {
    background: #243044;
    border-color: #2d3a4f;
    color: #e8edf4;
}

html[data-theme="light"] .topbar .btn-secondary:hover {
    background: #2d3a4f;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .topbar .btn-back {
    color: #e8edf4;
}

html[data-theme="light"] .topbar .btn,
html[data-theme="light"] .topbar .btn-primary,
html[data-theme="light"] .topbar .btn-secondary {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    border-color: transparent;
}

/* Mode clair : ombre sur boutons et blocs (fond page #fff, surfaces #fff) */
html[data-theme="light"] .btn {
    box-shadow: var(--shadow-btn);
    border-color: transparent;
}

html[data-theme="light"] .btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Modales et écran principal : bleu lisible + survol net (évite filter / bordures transparentes) */
html[data-theme="light"] .btn-primary {
    background: var(--accent);
    border-color: var(--accent-dim);
    color: #fff;
}

html[data-theme="light"] .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1e40af;
    color: #fff;
    filter: none;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.45);
}

html[data-theme="light"] .btn-life-maintenance:hover {
    background: linear-gradient(180deg, #facc15 0%, #eab308 100%);
    border-color: #ca8a04;
    box-shadow: var(--shadow-btn);
}

html[data-theme="light"] .flotte-panel,
html[data-theme="light"] .lane,
html[data-theme="light"] .day-lane:not(.is-today),
html[data-theme="light"] .month-cal-cell:not(.month-cal-cell--non-work):not(.month-cal-cell--today),
html[data-theme="light"] .flotte-fuel-year-box,
html[data-theme="light"] .flotte-fuel-chart-svg-wrap,
html[data-theme="light"] .flotte-fuel-year-nav,
html[data-theme="light"] .flotte-fuel-section-toggle,
html[data-theme="light"] .flotte-maint-list-toggle,
html[data-theme="light"] .flotte-life-cal-nav-btn,
html[data-theme="light"] .btn-life-maintenance,
html[data-theme="light"] .tour-section,
html[data-theme="light"] .settings-driver-editor-row,
html[data-theme="light"] .settings-tour-editor-row {
    box-shadow: var(--shadow);
}

html[data-theme="light"] .day-lane.is-today {
    box-shadow: var(--shadow), 0 0 0 1px var(--accent-dim);
}

html[data-theme="light"] .month-cal-cell--today {
    box-shadow: var(--shadow), 0 0 0 1px var(--accent-dim);
}

html[data-theme="light"] .new-mission-inline input {
    background: var(--surface);
    box-shadow: var(--shadow-btn);
    border: none;
}

html[data-theme="light"] .flotte-panel,
html[data-theme="light"] .lane,
html[data-theme="light"] .day-lane,
html[data-theme="light"] .month-cal-cell,
html[data-theme="light"] .flotte-fuel-year-box,
html[data-theme="light"] .flotte-fuel-chart-svg-wrap,
html[data-theme="light"] .flotte-fuel-year-nav,
html[data-theme="light"] .flotte-fuel-section-toggle,
html[data-theme="light"] .flotte-maint-list-toggle,
html[data-theme="light"] .flotte-life-cal-nav-btn,
html[data-theme="light"] .btn-life-maintenance,
html[data-theme="light"] .tour-section,
html[data-theme="light"] .settings-driver-editor-row,
html[data-theme="light"] .settings-tour-editor-row {
    border: none;
}

html[data-theme="light"] .card,
html[data-theme="light"] .modal {
    border: none;
}

html[data-theme="light"] .flotte-fuel-chart-switch {
    border: none;
}

html[data-theme="light"] .flotte-workspace-menu {
    border: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
}

/* Accueil (dashboard) : image de marque + surcouche noire semi-transparente (lisibilité). Hors thème clair. */
html:not([data-theme="light"]):not([data-theme="rubikfleety-light"]) body.page-dashboard-home {
    background-color: #06080c;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
        url('../img/rubikfleet-wallpaper.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 900px) {
    html:not([data-theme="light"]):not([data-theme="rubikfleety-light"]) body.page-dashboard-home {
        background-attachment: scroll;
    }
}

/* Évite que le contenu soit collé au bord bas de la fenêtre (planning, vue jour, etc.). */
body:not(.page-flotte) {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

/* Layout Flotte (body.page-flotte) : voir assets/css/flotte-layout.css */

.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.topbar-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.topbar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.auth-topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: flex-end;
}

.auth-topbar-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    max-width: min(320px, 52vw);
    text-align: right;
}

/* Topbar = fond sombre (#1a2332) même en thème clair : var(--text) / var(--muted) du body
   deviennent foncés → illisibles. Couleurs fixes lisibles sur cette barre (cf. .topbar .brand). */
.topbar .auth-topbar-email {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #f1f5fb;
    line-height: 1.25;
    word-break: break-all;
}

.topbar .auth-topbar-roles {
    font-size: 0.8125rem;
    color: #c8d4e4;
    line-height: 1.3;
    max-width: 100%;
}

.topbar .auth-topbar-roles--muted {
    color: #9eb0c4;
    font-style: italic;
}

.btn-user-account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    min-width: 42px;
    line-height: 0;
}

.btn-user-account-icon svg {
    display: block;
}

.btn-settings {
    font-size: 13px;
}

.btn-settings-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    min-width: 42px;
    line-height: 0;
}

.btn-settings-icon svg {
    display: block;
}

.btn-nav-drawer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    min-width: 42px;
    line-height: 0;
}

.btn-nav-drawer-icon svg {
    display: block;
}

.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--overlay-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-drawer-backdrop--open {
    opacity: 1;
    visibility: visible;
}

.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 901;
    width: min(18rem, 88vw);
    max-width: 100%;
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    display: flex;
    flex-direction: column;
    outline: none;
}

.nav-drawer--open {
    transform: translateX(0);
}

.nav-drawer-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.nav-drawer-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.nav-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -8px -8px -8px 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.nav-drawer-close:hover {
    color: var(--text);
    background: var(--surface2);
}

.nav-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 16px;
    gap: 4px;
}

.nav-drawer-link {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    border: 1px solid transparent;
}

.nav-drawer-link:hover {
    background: var(--surface2);
    border-color: var(--border);
}

.nav-drawer-link[aria-current="page"] {
    background: var(--surface2);
    border-color: var(--accent-dim);
    color: var(--accent);
}

body.nav-drawer-open {
    overflow: hidden;
}

.brand {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text);
}

.topbar .brand.brand--planning-title {
    font-size: clamp(0.72rem, 1.85vw, 0.95rem);
    line-height: 1.25;
    letter-spacing: 0.02em;
    font-weight: 600;
    max-width: min(22rem, 42vw);
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 720px) {
    .page-planification .topbar {
        align-items: flex-start;
    }

    .page-planification .topbar-center {
        flex: 1 1 100%;
        order: 3;
        justify-content: center;
    }

    .page-planification .topbar-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .topbar .brand.brand--planning-title {
        max-width: 100%;
    }
}

.page-dashboard-home .board-wrap.dashboard-home-wrap {
    flex: 1 1 auto;
    padding: 28px 16px 40px;
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.dashboard-home-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-home-heading {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.dashboard-home-lead {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 40rem;
}

.dashboard-home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.dashboard-home-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dashboard-home-card:hover {
    border-color: var(--accent-dim);
    background: var(--surface2);
}

.dashboard-home-card-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.dashboard-home-card-desc {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--muted);
}

.dashboard-home-empty {
    margin: 0;
}

.dashboard-home-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    padding: 12px 0 4px;
}

.dashboard-home-brand-img {
    display: block;
    width: min(100%, 520px);
    height: auto;
    max-height: min(28vh, 200px);
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.35));
}

html[data-theme="light"] .dashboard-home-brand {
    margin-top: 12px;
    padding: 20px 16px;
    background: #0f1419;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

html[data-theme="light"] .dashboard-home-brand-img {
    filter: none;
    max-height: min(26vh, 180px);
}

.day-topbar-module-title {
    font-size: 11px;
    font-weight: 600;
    color: #9eb0c4;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(38vw, 12.5rem);
    min-width: 0;
    flex-shrink: 1;
}

@media (max-width: 720px) {
    .day-topbar-module-title {
        display: none;
    }
}

.week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.week-label {
    min-width: 200px;
    text-align: center;
    font-weight: 600;
    color: var(--muted);
}

.btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
}

.btn:hover {
    background: var(--border);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent-dim);
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-danger {
    background: #b91c1c;
    border-color: #991b1b;
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #b91c1c;
    filter: none;
}

.btn-secondary {
    margin-left: 8px;
}

.board-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    min-height: calc(100vh - 64px);
}

.board-wrap--calendar {
    align-items: center;
}

.board-wrap--flotte {
    flex: 1;
    padding: 0;
    gap: 0;
    max-width: none;
    margin: 0;
}

.flotte-layout {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

.flotte-sidebar {
    flex: 0 0 min(16rem, 38vw);
    max-width: 100%;
    border-right: 1px solid var(--border);
    background: var(--surface2);
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: stretch;
}

.flotte-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.flotte-sidebar-reminders {
    flex-shrink: 0;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    max-height: min(42vh, 260px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.flotte-sidebar-reminders-title {
    margin: 0 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.flotte-sidebar-reminders-empty,
.flotte-sidebar-reminders-loading {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.flotte-sidebar-reminders-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.flotte-sidebar-reminders-li {
    margin: 0;
}

.flotte-global-maint-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.12);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
    line-height: 1.3;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.flotte-global-maint-item:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--accent);
}

.flotte-global-maint-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.flotte-global-maint-date-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    width: 100%;
}

.flotte-global-maint-date {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.flotte-global-maint-overdue-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f1419;
    background: linear-gradient(180deg, #fbbf24 0%, #ea580c 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.flotte-global-maint-item--overdue {
    background: linear-gradient(
        165deg,
        rgba(180, 53, 9, 0.42) 0%,
        rgba(40, 18, 8, 0.72) 100%
    );
    border: 2px solid #f59e0b;
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.flotte-global-maint-item--overdue:hover {
    border-color: #fbbf24;
    background: linear-gradient(
        165deg,
        rgba(200, 70, 12, 0.5) 0%,
        rgba(55, 22, 10, 0.78) 100%
    );
}

.flotte-global-maint-item--overdue .flotte-global-maint-date {
    color: #fde68a;
}

.flotte-global-maint-item--overdue .flotte-global-maint-vehicle {
    color: #fff7ed;
}

.flotte-global-maint-item--overdue .flotte-global-maint-nature {
    color: #fcd34d;
}

.flotte-global-maint-vehicle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.flotte-global-maint-nature {
    font-size: 0.75rem;
    color: var(--muted);
    word-break: break-word;
}

.flotte-sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 14px 10px;
}

.flotte-sidebar-title {
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.flotte-sidebar-add-vehicle-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease,
        transform 0.08s ease;
}

.flotte-sidebar-add-vehicle-btn:hover {
    background: rgba(0, 0, 0, 0.18);
    border-color: var(--border);
    color: var(--text);
}

.flotte-sidebar-add-vehicle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.flotte-sidebar-add-vehicle-btn:active {
    transform: scale(0.96);
}

.flotte-sidebar-empty {
    margin: 0;
    padding: 8px 14px 16px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.45;
}

.flotte-sidebar-sections {
    display: flex;
    flex-direction: column;
}

.flotte-sidebar-section {
    border-bottom: 1px solid var(--border);
}

.flotte-sidebar-section:last-child {
    border-bottom: none;
}

.flotte-sidebar-section-title {
    margin: 0;
    padding: 10px 14px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-left: 3px solid var(--accent);
    padding-left: 11px;
    margin-left: 8px;
    margin-top: 4px;
}

.flotte-sidebar-section:first-child .flotte-sidebar-section-title {
    margin-top: 0;
}

.flotte-sidebar-section-empty {
    margin: 0;
    padding: 2px 14px 12px 22px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.flotte-vehicle-list {
    list-style: none;
    margin: 0;
    padding: 0 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.flotte-vehicle-li {
    margin: 0 0 0 15px;
}

.flotte-vehicle-item {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 10px;
    border: none;
    border-left: 2px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.3;
}

.flotte-vehicle-item:hover {
    background: var(--border);
}

.flotte-vehicle-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.flotte-vehicle-item.is-active {
    background: var(--surface);
    border: none;
    border-left: 2px solid var(--accent-dim);
}

.flotte-vehicle-item-name {
    font-weight: 600;
}

.flotte-vehicle-item-plate {
    font-size: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.flotte-workspace {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: auto;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

.flotte-workspace-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.flotte-workspace-empty--solo {
    min-height: 12rem;
}

.flotte-workspace-empty-text {
    margin: 0;
    max-width: 28rem;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.flotte-workspace-detail {
    --flotte-workspace-pad-x: 22px;
    /* Espace haut porté par .flotte-workspace-head pour qu’il reste en sticky (le padding du parent défile). */
    --flotte-workspace-pad-top: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 var(--flotte-workspace-pad-x)
        max(32px, calc(24px + env(safe-area-inset-bottom, 0px)));
    position: relative;
}

.flotte-workspace-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.flotte-workspace-head-row .flotte-workspace-title-row {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    align-items: center;
}

.flotte-workspace-head-row .flotte-workspace-title {
    line-height: 1.12;
}

.flotte-workspace-head-row .flotte-workspace-menu-btn {
    margin: 0;
    align-self: center;
}

.flotte-workspace-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
    margin: 0;
    min-height: 0;
}

.flotte-workspace-head {
    position: sticky;
    top: 0;
    /* Sous la topbar (z-index 10) si jamais les contextes se chevauchent */
    z-index: 8;
    /* Pleine largeur du panneau + même retrait horizontal que le contenu (évite un saut en sticky) */
    box-sizing: border-box;
    width: calc(100% + 2 * var(--flotte-workspace-pad-x));
    max-width: none;
    margin-left: calc(-1 * var(--flotte-workspace-pad-x));
    margin-right: calc(-1 * var(--flotte-workspace-pad-x));
    padding-top: var(--flotte-workspace-pad-top);
    padding-left: var(--flotte-workspace-pad-x);
    padding-right: var(--flotte-workspace-pad-x);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.flotte-workspace-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.flotte-workspace-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: -6px -6px 0 0;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: var(--radius);
    line-height: 0;
    cursor: pointer;
}

.flotte-workspace-menu-btn:hover,
.flotte-workspace-menu-btn:focus-visible {
    color: var(--text);
    background: var(--surface2);
    outline: none;
}

.flotte-workspace-menu-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.flotte-workspace-menu-btn[aria-expanded='true'] {
    color: var(--text);
    background: var(--surface2);
}

.flotte-workspace-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 13rem;
    padding: 6px 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 200;
}

.flotte-workspace-menu-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    margin: 0;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

/* display:block ci-dessus peut emporter sur [hidden] selon les navigateurs */
.flotte-workspace-menu-item[hidden] {
    display: none !important;
}

.flotte-workspace-menu-item:hover,
.flotte-workspace-menu-item:focus-visible {
    background: var(--surface2);
    outline: none;
}

.flotte-workspace-menu-item--danger {
    color: var(--danger, #c42b2b);
}

.flotte-workspace-menu-item--danger:hover,
.flotte-workspace-menu-item--danger:focus-visible {
    color: var(--danger, #c42b2b);
    background: rgba(196, 43, 43, 0.08);
}

.flotte-workspace-title {
    margin: 0 0 8px;
    font-size: clamp(1.75rem, 1.35rem + 1.25vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text);
}

.flotte-workspace-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

.flotte-workspace-title-row .flotte-workspace-title {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.flotte-workspace-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: var(--radius);
    line-height: 0;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.flotte-workspace-edit-link:hover,
.flotte-workspace-edit-link:focus-visible {
    color: var(--text);
    background: var(--surface2);
    outline: none;
}

.flotte-workspace-edit-link:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.flotte-workspace-edit-link svg {
    display: block;
}

.flotte-workspace-archived-banner {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    padding: 6px 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    line-height: 1.35;
}

/* Lecture seule : saisie et actions de modification désactivées ; navigation UI (mois, onglets, repli) conservée. */
.flotte-workspace-detail--readonly .flotte-workspace-panels
    button:not(.flotte-life-cal-nav-btn):not(.flotte-fuel-section-toggle):not(
        .flotte-maint-list-toggle
    ):not(.flotte-fuel-year-nav):not(.flotte-fuel-chart-tab),
.flotte-workspace-detail--readonly .flotte-workspace-panels a[href],
.flotte-workspace-detail--readonly .flotte-workspace-panels input:not([type='hidden']),
.flotte-workspace-detail--readonly .flotte-workspace-panels select,
.flotte-workspace-detail--readonly .flotte-workspace-panels textarea {
    pointer-events: none;
    opacity: 0.52;
    cursor: not-allowed;
}

.flotte-workspace-detail--readonly .flotte-fuel-chart-svg,
.flotte-workspace-detail--readonly .flotte-fuel-chart-svg--compare {
    pointer-events: none;
}

.flotte-sidebar-hors-parc {
    padding: 8px 8px 12px;
    border-top: 1px solid var(--border);
}

.flotte-sidebar-hors-parc-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.08);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.flotte-sidebar-hors-parc-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: #ffffff;
    color: #ffffff;
}

.flotte-sidebar-hors-parc-icon {
    flex-shrink: 0;
    opacity: 0.9;
}

.flotte-sidebar-hors-parc-btn:hover .flotte-sidebar-hors-parc-icon {
    opacity: 1;
    color: #ffffff;
}

.modal--fleet-archived {
    max-width: min(28rem, 100vw - 2rem);
}

.modal-body--fleet-archived {
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

.fleet-archived-modal-section {
    margin-bottom: 16px;
}

.fleet-archived-modal-section:last-child {
    margin-bottom: 0;
}

.fleet-archived-modal-section-title {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.fleet-archived-modal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fleet-archived-pick-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.fleet-archived-pick-btn:hover {
    border-color: var(--accent-dim);
    background: var(--surface);
}

.fleet-archived-pick-plate {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.flotte-workspace-typology-line,
.flotte-workspace-plate-line,
.flotte-workspace-marque-modele-line {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--muted);
}

.flotte-workspace-typology-line strong,
.flotte-workspace-plate-line strong,
.flotte-workspace-marque-modele-line strong {
    color: var(--text);
    font-weight: 600;
}

.flotte-workspace-plate-line {
    font-size: 12px;
}

.fleet-add-marque-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-end;
}

.fleet-add-marque-row .day-modal-field {
    flex: 1;
    min-width: min(100%, 8rem);
    margin-bottom: 0;
}

.fleet-edit-wrap {
    max-width: 32rem;
    margin: 0 auto;
    padding: 20px 22px 32px;
}

.fleet-edit-back {
    margin: 0 0 16px;
}

.fleet-edit-back a {
    color: var(--muted);
    text-decoration: none;
}

.fleet-edit-back a:hover {
    color: var(--text);
    text-decoration: underline;
}

.fleet-edit-heading {
    margin: 0 0 18px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
}

.fleet-edit-form .fleet-add-marque-row {
    margin-bottom: 14px;
}

.fleet-edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.flotte-workspace-panels {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Contenu sous les titres carburant / vie du véhicule (mesure repli + grille vie) */
    --flotte-block-body-padding: 0.5rem 0.875rem 0.75rem;
}

.flotte-workspace-section {
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.flotte-section-title {
    margin: 0 0 14px;
    font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: 0.02em;
}

.flotte-fuel-section-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.flotte-fuel-section.is-collapsed .flotte-fuel-section-head {
    margin-bottom: 0;
}

.flotte-fuel-section-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
    align-self: center;
}

.flotte-fuel-section-toggle {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    line-height: 0;
}

.flotte-fuel-section-toggle:hover {
    background: var(--border);
}

.flotte-fuel-section-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.flotte-fuel-section-toggle-icon {
    display: block;
    width: 14px;
    height: 14px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(180deg);
}

.flotte-fuel-section.is-collapsed .flotte-fuel-section-toggle-icon {
    transform: rotate(0deg);
}

/* Repli animé (carburant + liste entretiens) */
.flotte-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.flotte-fuel-section.is-collapsed #flotte-fuel-section-body.flotte-collapsible,
.flotte-maint-list-panel.is-collapsed #fleet-maint-list-body.flotte-collapsible,
.flotte-incident-list-panel.is-collapsed #fleet-incident-list-body.flotte-collapsible,
.flotte-incident-list-panel.is-collapsed #fleet-incident-closed-list-body.flotte-collapsible {
    grid-template-rows: 0fr;
}

.flotte-collapsible-measure {
    min-height: 0;
    overflow: hidden;
}

/* Repli + ombres (thème clair) : même retrait que la section « Vie du véhicule » */
.flotte-fuel-section .flotte-collapsible-measure {
    padding: var(--flotte-block-body-padding);
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .flotte-collapsible {
        transition-duration: 0.01ms;
    }

    .flotte-fuel-section-toggle-icon,
    .flotte-maint-list-toggle-icon {
        transition-duration: 0.01ms;
    }
}

.flotte-panel {
    margin: 0;
    padding: 14px 16px;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.flotte-panel-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.flotte-panel-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

/* Colonne calendrier : 400px (réduit si l’espace disponible est inférieur). */
.flotte-life-layout {
    --flotte-life-cal-w: min(100%, 400px);
    display: grid;
    grid-template-columns: minmax(0, var(--flotte-life-cal-w)) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    padding: var(--flotte-block-body-padding);
    box-sizing: border-box;
}

.flotte-life-col {
    min-width: 0;
}

.flotte-life-col--calendar {
    width: var(--flotte-life-cal-w);
    max-width: var(--flotte-life-cal-w);
}

.flotte-life-col--tracking {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    border: none;
    background: transparent;
}

.flotte-maint-list-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.flotte-maint-list-panel.is-collapsed .flotte-maint-list-panel-head {
    margin-bottom: 0;
}

.flotte-maint-list-panel-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.flotte-panel-count-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: #eab308;
    color: #1c1917;
    border: 1px solid #ca8a04;
}

html[data-theme="light"] .flotte-panel-count-badge {
    background: #facc15;
    color: #422006;
    border-color: #eab308;
}

/* L’attribut hidden doit primer sur display:inline-flex (sinon pastille vide visible). */
.flotte-panel-count-badge[hidden] {
    display: none !important;
}

.flotte-maint-list-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.flotte-maint-list-toggle {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    line-height: 0;
}

.flotte-maint-list-toggle:hover {
    background: var(--border);
}

.flotte-maint-list-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.flotte-maint-list-toggle-icon {
    display: block;
    width: 14px;
    height: 14px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(180deg);
}

.flotte-maint-list-panel.is-collapsed .flotte-maint-list-toggle-icon {
    transform: rotate(0deg);
}

.flotte-incident-list-panel.is-collapsed .flotte-maint-list-panel-head {
    margin-bottom: 0;
}

.fleet-incident-open-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fleet-incident-open-item {
    position: relative;
    margin: 0;
    padding: 8px 40px 8px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface2);
}

.fleet-incident-open-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}

.fleet-incident-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
}

.fleet-incident-delete-btn:hover {
    color: var(--del-hover);
}

.fleet-incident-delete-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fleet-incident-delete-icon {
    display: block;
    flex-shrink: 0;
}

.fleet-incident-open-line {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text);
}

.fleet-incident-open-line + .fleet-incident-open-line {
    margin-top: 1px;
}

.fleet-incident-open-k {
    display: inline;
    font-weight: 400;
    color: var(--muted);
    margin-right: 0.35em;
}

.fleet-incident-open-v {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.fleet-incident-open-item--clickable {
    cursor: pointer;
}

.fleet-incident-open-item--clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fleet-incident-view-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fleet-incident-view-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.fleet-incident-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.fleet-incident-view-tab {
    margin: 0 0 -1px;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    max-width: 100%;
}

.fleet-incident-view-tab:hover:not(.is-active) {
    color: var(--text);
    background: rgba(0, 0, 0, 0.04);
}

.fleet-incident-view-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--accent);
    background: transparent;
}

.fleet-incident-view-tab-panels {
    min-width: 0;
}

.fleet-incident-view-panel {
    min-width: 0;
}

.fleet-incident-view-panel-inner {
    min-width: 0;
}

/* Véhicule archivé : zone PJ en lecture seule (comportement surtout géré en JS) */
.fleet-incident-view--vehicle-archived .fleet-incident-view-attach-upload-dropzone {
    cursor: not-allowed;
}

.fleet-incident-repair-block {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    padding: 12px 14px;
}

.fleet-incident-repair-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fleet-incident-repair-item {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.fleet-incident-repair-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.fleet-incident-repair-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 0 24px;
}

.fleet-incident-repair-doc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.fleet-incident-repair-doc-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.fleet-incident-repair-doc-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.fleet-incident-repair-doc-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
}

.fleet-incident-repair-doc-icon svg {
    width: 100%;
    height: 100%;
}

.fleet-incident-repair-maint-list {
    list-style: none;
    margin: 8px 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fleet-incident-repair-maint-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--muted);
}

.fleet-incident-repair-maint-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    margin-top: 6px;
    flex: 0 0 auto;
}

.fleet-maint-incident-ref-input {
    background: var(--surface2);
    color: var(--muted);
    cursor: not-allowed;
}

.fleet-incident-work-proof-hint {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
}

.fleet-incident-work-proof-status {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.fleet-incident-work-proof-date {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.fleet-incident-work-proof-dropzone {
    position: relative;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    padding: 12px;
    cursor: pointer;
}

.fleet-incident-work-proof-dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--surface);
}

.fleet-incident-work-proof-dropzone:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fleet-incident-work-proof-files-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fleet-incident-work-proof-dropzone-text {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.4;
}

.fleet-incident-work-proof-list {
    margin-top: 10px;
}

.fleet-incident-work-proof-list .fleet-incident-view-attach-grid {
    gap: 8px;
}

.fleet-incident-work-proof-status.is-error {
    color: #b42318;
}

.fleet-incident-repair-extra {
    margin: 8px 0 0 24px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--muted);
}

.fleet-incident-repair-check {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
}

.fleet-incident-repair-line .fleet-incident-repair-check {
    min-width: 0;
}

.fleet-incident-repair-check > span:last-child {
    margin-left: 8px;
}

.fleet-incident-repair-open-maint-link {
    color: inherit;
    text-decoration: none;
}

.fleet-incident-repair-open-avis-link {
    color: inherit;
    text-decoration: none;
}

.fleet-incident-repair-open-work-proof-link {
    color: inherit;
    text-decoration: none;
}

.fleet-incident-repair-open-insurance-link {
    color: inherit;
    text-decoration: none;
}

.fleet-incident-repair-open-closure-link {
    color: inherit;
    text-decoration: none;
}

.fleet-incident-repair-report-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.fleet-incident-repair-report-btns .fleet-incident-repair-generate-pdf-btn {
    margin-left: 0;
}

/* Écart label→champ sur la ligne (évite le décalage dû au margin-top des .day-modal-input). */
.fleet-incident-report-email-to-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    min-width: 0;
    margin-top: 4px;
}

.fleet-incident-report-email-to-row .day-modal-input {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    box-sizing: border-box;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0 10px;
    line-height: calc(2.5rem - 2px);
}

.fleet-incident-report-email-address-book-btn {
    flex: 0 0 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.fleet-incident-report-email-address-book-btn svg {
    display: block;
    flex-shrink: 0;
}

.fleet-incident-report-email-address-book-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-drop-hover);
}

.fleet-incident-report-email-address-book-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

html[data-theme="light"] .fleet-incident-report-email-address-book-btn {
    background: #f3f4f6;
    color: #4b5563;
}

html[data-theme="light"] .fleet-incident-report-email-address-book-btn:hover {
    background: #e0f2fe;
}

.fleet-incident-report-email-body {
    min-height: 5.5rem;
    max-height: 40vh;
    resize: vertical;
    font-family: inherit;
    line-height: 1.45;
}

.fleet-incident-report-email-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    border: 2px dashed var(--border, #d1d5db);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    text-align: left;
    cursor: pointer;
    background: var(--surface, #f9fafb);
    transition: border-color 0.15s ease, background 0.15s ease;
    min-height: 88px;
}

.fleet-incident-report-email-dropzone:hover,
.fleet-incident-report-email-dropzone:focus-visible {
    outline: none;
    border-color: #94a3b8;
}

.fleet-incident-report-email-dropzone.is-dragover {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

.fleet-incident-report-email-dropzone-prompt {
    margin-top: auto;
    text-align: center;
    padding-top: 0.25rem;
}

.fleet-incident-report-email-dropzone-text {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

.fleet-incident-report-email-dropzone-hint {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
}

.fleet-incident-report-email-extra-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.fleet-incident-report-email-extra-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-content: flex-start;
    min-height: 0;
}

.fleet-incident-report-email-extra-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.35rem 0.5rem 0.35rem 0.65rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 0.8125rem;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.fleet-incident-report-email-extra-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.fleet-incident-report-email-extra-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #4b5563;
}

.fleet-incident-report-email-extra-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.fleet-incident-report-email-extra-item--report {
    border-style: solid;
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
    cursor: default;
    box-shadow: 0 1px 0 rgba(37, 99, 235, 0.08);
}

.fleet-incident-report-email-extra-locked {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d4ed8;
    background: #dbeafe;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
}

.fleet-incident-report-email-chip-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
    border-radius: 4px;
}

.fleet-incident-report-email-chip-remove:hover {
    color: #b91c1c;
    background: rgb(254 242 242);
}

.fleet-incident-report-email-chip-remove:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.fleet-incident-repair-generate-pdf-btn {
    margin-left: auto;
    white-space: nowrap;
}

.fleet-incident-repair-check-input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    margin-top: 0;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid #111;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    margin-right: 8px;
}

.fleet-incident-repair-check-input::before {
    content: "";
    display: block;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg) scale(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.fleet-incident-repair-check-input:checked {
    border-color: #41b649;
    background: #41b649;
}

.fleet-incident-repair-check-input:checked::before {
    opacity: 1;
    transform: translateY(-1px) rotate(45deg) scale(1);
}

.fleet-incident-repair-check-input:focus-visible {
    box-shadow: 0 0 0 2px rgba(65, 182, 73, 0.2);
}

.fleet-incident-repair-group-title {
    margin: 6px 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--muted);
}

.fleet-incident-repair-separator {
    margin: 8px 0 2px;
    border-top: 1px dashed var(--border);
}

.fleet-incident-view-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.fleet-incident-view-row--split .fleet-incident-view-section--col {
    min-width: 0;
}

.fleet-incident-view-row--driver-only {
    width: 100%;
}

.fleet-incident-view-row--driver-only .fleet-incident-view-section--col {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 900px) {
    .fleet-incident-view-row--split {
        grid-template-columns: 1fr;
    }
}

.fleet-incident-view-row--gen {
    margin-top: 6px;
}

.fleet-incident-view-split-col {
    min-width: 0;
}

.fleet-incident-view-row--gen .fleet-incident-view-field {
    margin-top: 0;
}

.fleet-incident-view-section {
    margin: 0;
}

.fleet-incident-view-section .fleet-incident-section-title {
    margin-top: 0;
}

.fleet-incident-view-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-top: 0;
}

.fleet-incident-view-title-row .fleet-incident-section-title {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.fleet-incident-edit-fiche-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.fleet-incident-view-field {
    margin: 10px 0 0;
}

.fleet-incident-view-section .fleet-incident-view-field:first-of-type {
    margin-top: 6px;
}

.fleet-incident-view-k {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px;
}

.fleet-incident-view-v {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text);
    word-break: break-word;
}

.fleet-incident-view-v--multiline {
    white-space: pre-wrap;
}

.fleet-incident-view-muted {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.fleet-incident-view-attach-block {
    margin-top: 8px;
}

.fleet-incident-view-attach-upload-dropzone .fleet-incident-view-attach-block {
    margin-top: 0;
}

.fleet-incident-view-attach-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 12px;
}

.fleet-incident-view-attach-filter {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fleet-incident-view-attach-filter:hover {
    background: var(--surface);
    border-color: var(--accent);
}

.fleet-incident-view-attach-filter.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.fleet-incident-view-attach-filter:not(.is-active) {
    opacity: 0.55;
}

.fleet-incident-view-attach-filter:not(.is-active):hover {
    opacity: 0.85;
}

.fleet-incident-view-attach-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fleet-incident-view-attach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92px;
    text-align: center;
}

/* display:flex ci-dessus l’emporte sur [hidden] du UA ; forcer le masquage filtre */
.fleet-incident-view-attach-item[hidden] {
    display: none !important;
}

.fleet-incident-view-attach-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--muted);
}

.fleet-incident-view-attach-icon--photo {
    color: #38bdf8;
}

.fleet-incident-view-attach-icon--thumb {
    padding: 0;
    overflow: hidden;
    background: var(--surface2);
}

.fleet-incident-view-attach-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fleet-incident-view-attach-icon--pdf {
    color: #ef4444;
}

.fleet-incident-view-attach-icon--word {
    color: #2563eb;
}

.fleet-incident-view-attach-icon--excel {
    color: #16a34a;
}

.fleet-incident-view-attach-icon--email {
    color: #a855f7;
}

.fleet-incident-view-attach-icon--file {
    color: var(--muted);
}

.fleet-incident-view-attach-icon svg {
    display: block;
}

.fleet-incident-view-attach-name {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text);
    word-break: break-word;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fleet-incident-view-attach-item[data-attach-url] {
    cursor: pointer;
}

.fleet-incident-view-attach-item[data-attach-stored] {
    cursor: context-menu;
}

.fleet-incident-view-attach-item[data-attach-drag-stored] {
    cursor: grab;
}

.fleet-incident-view-attach-doctype {
    margin-top: 3px;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--muted);
    max-width: 100%;
    word-break: break-word;
}

.fleet-incident-damage-photo-zone {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.fleet-incident-damage-photo-zone--dragover {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.fleet-incident-damage-photo-hint {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

.fleet-incident-damage-photo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fleet-incident-damage-photo-chip {
    position: relative;
    width: 72px;
    flex-shrink: 0;
}

.fleet-incident-damage-photo-chip-inner {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--surface);
}

.fleet-incident-damage-photo-chip-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fleet-incident-damage-photo-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.fleet-incident-damage-photo-remove:hover {
    background: #fee2e2;
    border-color: #b91c1c;
    color: #b91c1c;
}

.fleet-incident-view-attach-upload {
    margin-bottom: 0;
}

.fleet-incident-view-attach-upload-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2px;
    padding: 6px 12px 10px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.fleet-incident-view-attach-upload-dropzone--empty {
    min-height: 140px;
    justify-content: center;
}

.fleet-incident-view-attach-upload-dropzone--empty .fleet-incident-view-attach-empty-msg {
    margin: 10px 0 0;
    text-align: center;
}

.fleet-incident-view-attach-upload-dropzone:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fleet-incident-view-attach-upload-dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.fleet-incident-view-attach-upload.is-uploading .fleet-incident-view-attach-upload-dropzone {
    pointer-events: none;
    opacity: 0.65;
}

.fleet-incident-view-attach-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fleet-incident-view-attach-upload-hint {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
}

.fleet-incident-view-attach-upload-hint--below-filters {
    margin-top: 0;
    margin-bottom: 12px;
}

.fleet-incident-view-attach-block:has(.fleet-incident-view-attach-upload-hint--below-filters)
    .fleet-incident-view-attach-filters {
    margin-bottom: 8px;
}

.fleet-incident-view-attach-upload-dropzone .fleet-incident-view-attach-grid {
    margin-top: 0;
}

.fleet-incident-view-upload-status {
    margin: 8px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--muted);
}

.fleet-incident-view-upload-status--error {
    color: #b91c1c;
}

.fleet-incident-attach-ctx-menu {
    position: fixed;
    z-index: 12000;
    min-width: 220px;
    padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.fleet-incident-attach-ctx-menu-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.fleet-incident-attach-ctx-menu-item[hidden],
.fleet-incident-attach-ctx-menu-sep[hidden] {
    display: none !important;
}

.fleet-incident-attach-ctx-menu-item:hover,
.fleet-incident-attach-ctx-menu-item:focus-visible {
    background: var(--surface2);
    outline: none;
}

.fleet-incident-attach-ctx-menu-item.is-active {
    font-weight: 700;
    color: var(--accent);
}

.fleet-incident-attach-ctx-menu-sep {
    height: 1px;
    margin: 6px 0;
    padding: 0;
    border: none;
    background: var(--border);
}

.fleet-incident-attach-ctx-menu-item--danger {
    color: var(--err-text, #dc2626);
}

.fleet-incident-attach-ctx-menu-item--danger:hover,
.fleet-incident-attach-ctx-menu-item--danger:focus-visible {
    background: rgba(248, 113, 113, 0.12);
}

.fleet-incident-attach-overlay .fleet-incident-attach-preview-inner {
    position: relative;
    width: min(96vw, 1200px);
    height: min(78vh, 820px);
    min-width: 280px;
    min-height: 200px;
    max-width: 96vw;
    max-height: 92vh;
    resize: both;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    padding-top: 36px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.fleet-incident-attach-overlay .fleet-incident-attach-preview-close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}

.fleet-incident-attach-preview-counter {
    margin: 0 0 8px;
    padding: 0 48px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
}

.fleet-incident-attach-preview-main {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
}

.fleet-incident-attach-preview-nav {
    flex: 0 0 auto;
    align-self: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.fleet-incident-attach-preview-nav:hover:not(:disabled) {
    background: var(--surface);
}

.fleet-incident-attach-preview-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.fleet-incident-attach-preview-stage {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.fleet-incident-attach-preview-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

.fleet-incident-attach-preview-iframe {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 240px;
    height: 100%;
    border: 0;
    border-radius: 6px;
    background: var(--surface2);
}

.fleet-incident-attach-preview-fallback {
    padding: 24px 16px;
    text-align: center;
}

.fleet-incident-attach-preview-fallback-msg {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: var(--muted);
}

.modal-footer--incident-view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.modal.modal--fleet-avis-sig {
    max-width: 480px;
    width: 100%;
}

.fleet-incident-avis-sig-hint {
    margin: 0 0 10px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--muted);
}

.fleet-incident-avis-refusal-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text);
    user-select: none;
}

.fleet-incident-avis-refusal-row input {
    margin-top: 3px;
    flex-shrink: 0;
}

.fleet-incident-avis-refusal-wrap {
    margin: 0 0 12px;
}

.fleet-incident-avis-refusal-wrap .day-modal-input {
    width: 100%;
    box-sizing: border-box;
}

.fleet-incident-avis-canvas-wrap.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.fleet-incident-avis-canvas-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #e5e7eb;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.fleet-incident-avis-canvas-wrap canvas {
    display: block;
    vertical-align: top;
    touch-action: none;
}

.fleet-incident-avis-sig-error {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: #b91c1c;
}

.fleet-maint-empty-hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
}

.flotte-life-calendar-panel {
    width: 100%;
    max-width: 100%;
}

.flotte-life-calendar-panel .flotte-life-cal-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
}

.flotte-life-cal-month-label {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.flotte-life-cal-nav-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.flotte-life-cal-nav-btn:hover {
    background: var(--border);
}

.flotte-life-cal-nav-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Plus spécifique que .month-calendar-root (700px) pour suivre la colonne limitée. */
.month-calendar-root.flotte-life-calendar-root {
    max-width: 100%;
}

.flotte-life-calendar-root .month-cal-weekdays {
    gap: 4px;
    margin-bottom: 8px;
}

.flotte-life-calendar-root .month-cal-weekday {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 0;
}

.flotte-life-calendar-root .month-cal-grid {
    gap: 5px;
}

.flotte-life-calendar-root .month-cal-cell {
    min-height: 38px;
    padding: 6px 5px;
    gap: 0;
}

.flotte-life-calendar-root .month-cal-cell-num {
    font-size: 14px;
    font-weight: 600;
}

.flotte-life-calendar-root .month-cal-cell {
    position: relative;
    overflow: visible;
}

.fleet-cal-maint-hits {
    position: absolute;
    right: 4px;
    bottom: 3px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    pointer-events: none;
}

.fleet-cal-maint-hits .fleet-cal-maint-hit {
    position: static;
    pointer-events: auto;
}

.fleet-cal-maint-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    min-height: 14px;
    cursor: default;
}

.fleet-cal-maint-hit--completed {
    cursor: pointer;
}

.fleet-cal-maint-hit--completed:focus-visible {
    outline: 2px solid var(--accent-dim);
    outline-offset: 2px;
    border-radius: 4px;
}

.fleet-cal-maint-dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        var(--fleet-cal-maint-dot1) 0%,
        var(--fleet-cal-maint-dot2) 100%
    );
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.fleet-cal-maint-dot--completed {
    background: linear-gradient(
        145deg,
        var(--fleet-cal-maint-dot-completed1) 0%,
        var(--fleet-cal-maint-dot-completed2) 100%
    );
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.fleet-maint-cal-view-body {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.fleet-maint-cal-view-block {
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--border);
}

.fleet-maint-cal-view-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.fleet-maint-cal-view-line {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
}

.fleet-maint-cal-view-line:last-child {
    margin-bottom: 0;
}

.fleet-maint-cal-view-nature {
    white-space: pre-wrap;
    word-break: break-word;
}

.fleet-maint-cal-view-k {
    display: inline-block;
    min-width: 7.5rem;
    font-weight: 600;
    color: var(--muted);
}

.fleet-cal-maint-tooltip--float {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1500;
    min-width: 180px;
    max-width: min(280px, calc(100vw - 16px));
    max-height: min(220px, calc(100vh - 16px));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--fleet-cal-maint-tip-border);
    background: var(--fleet-cal-maint-tip-bg);
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    margin: 0;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
}

.fleet-cal-maint-tooltip-list {
    margin: 0;
    padding: 0 0 0 1.1em;
    list-style: disc;
}

.fleet-cal-maint-tooltip-item {
    margin: 0 0 6px;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.fleet-cal-maint-tooltip-item:last-child {
    margin-bottom: 0;
}

.flotte-life-tracking-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    width: 100%;
}

.flotte-life-tracking-actions .btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.btn-life-maintenance,
.btn-life-incident {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45em;
    line-height: 1.25;
    min-height: 2.375rem;
    box-sizing: border-box;
}

.btn-life-maintenance {
    background: linear-gradient(180deg, #fde047 0%, #facc15 100%);
    border-color: #eab308;
    color: #1c1917;
}

.btn-life-maintenance:hover {
    background: linear-gradient(180deg, #facc15 0%, #eab308 100%);
    border-color: #ca8a04;
    color: #1c1917;
    filter: none;
}

.btn-life-maintenance:focus-visible {
    outline: 2px solid #ca8a04;
    outline-offset: 2px;
}

.btn-life-maintenance-icon,
.btn-life-incident-icon {
    display: block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

.fleet-maint-textarea {
    min-height: 5rem;
    resize: vertical;
    width: 100%;
    max-width: 100%;
    font: inherit;
}

.fleet-maint-fieldset {
    border: none;
    margin: 0 0 12px;
    padding: 0;
}

.fleet-maint-legend {
    padding: 0;
    margin-bottom: 8px;
}

.fleet-maint-radio-row {
    margin-bottom: 8px;
}

.fleet-maint-radio-row:last-child {
    margin-bottom: 0;
}

.fleet-maint-radio-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
}

.fleet-maint-radio-label input {
    margin-top: 3px;
    flex-shrink: 0;
}

.fleet-maint-days-hint {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.fleet-maint-open-section {
    margin-top: 0;
    padding-top: 0;
}

.fleet-maint-open-block {
    margin-bottom: 12px;
}

.fleet-maint-open-block:last-child {
    margin-bottom: 0;
}

.fleet-maint-open-subtitle {
    margin: 0 0 5px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-transform: uppercase;
}

.fleet-maint-open-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.fleet-maint-open-item {
    position: relative;
    margin: 0;
    padding: 7px 52px 7px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface2);
}

.fleet-maint-open-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.fleet-maint-edit-btn,
.fleet-maint-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
}

.fleet-maint-edit-btn:hover {
    color: var(--accent);
}

.fleet-maint-edit-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fleet-maint-edit-icon {
    display: block;
    flex-shrink: 0;
}

.fleet-maint-delete-btn:hover {
    color: var(--del-hover);
}

.fleet-maint-delete-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fleet-maint-delete-icon {
    display: block;
    flex-shrink: 0;
}

.fleet-maint-open-item--overdue {
    background: var(--fleet-maint-overdue-bg);
    border-color: var(--fleet-maint-overdue-border);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.fleet-maint-open-item--overdue .fleet-maint-open-date {
    color: var(--warn-text);
}

.fleet-maint-open-date-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 3px;
    min-width: 0;
}

.fleet-maint-complete-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    margin-top: 1px;
    padding: 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
}

.fleet-maint-complete-btn:hover {
    color: var(--accent);
    background: var(--accent-drop-hover);
}

.fleet-maint-complete-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fleet-maint-complete-icon {
    display: block;
    flex-shrink: 0;
}

.fleet-maint-open-date-row .fleet-maint-open-date {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.fleet-maint-open-item--today {
    background: var(--fleet-maint-today-bg);
    border-color: var(--fleet-maint-today-border);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12);
}

.fleet-maint-open-item--today .fleet-maint-open-date {
    color: var(--fleet-maint-today-date);
}

.fleet-maint-open-subtitle--today {
    color: var(--fleet-maint-today-subtitle);
}

.fleet-maint-open-date {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}

.fleet-maint-open-nature {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.32;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.fleet-maint-open-lieu-duree {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.32;
    color: var(--muted);
}

.fleet-maint-open-loc-row,
.fleet-maint-open-dur-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.fleet-maint-open-loc-text,
.fleet-maint-open-dur-text {
    min-width: 0;
    word-break: break-word;
}

.fleet-maint-open-inline-icon {
    flex-shrink: 0;
    display: block;
    vertical-align: middle;
    color: var(--muted);
    opacity: 0.92;
}

.fleet-maint-open-sep {
    opacity: 0.7;
    padding: 0 1px;
    flex-shrink: 0;
}

.fleet-maint-open-meta {
    margin: 0;
    font-size: 12px;
    line-height: 1.28;
    color: var(--muted);
}

@media (max-width: 900px) {
    .flotte-life-layout {
        --flotte-life-cal-w: min(100%, 400px);
        grid-template-columns: 1fr;
    }

    .flotte-life-col--calendar {
        width: min(100%, 400px);
        max-width: min(100%, 400px);
    }
}

.flotte-fuel-strip {
    width: 100%;
    max-width: 100%;
}

.flotte-fuel-nav {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.flotte-fuel-year-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--flotte-fuel-year-nav-bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}

.flotte-fuel-year-nav:hover {
    background: var(--flotte-fuel-year-nav-hover);
}

.flotte-fuel-year-nav:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.flotte-fuel-year-nav-chev {
    color: var(--text);
    opacity: 0.72;
    font-weight: 700;
}

.flotte-fuel-year-nav-num {
    font-variant-numeric: tabular-nums;
}

.flotte-fuel-year-box {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.flotte-fuel-year-display {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

.flotte-fuel-months-outer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.flotte-fuel-months-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: visible;
    overflow-y: hidden;
}

.flotte-fuel-months-scroll--compact {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.flotte-fuel-months {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 0 4px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.flotte-fuel-months-scroll--compact .flotte-fuel-months {
    width: max-content;
}

.flotte-fuel-month {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.flotte-fuel-months-scroll--compact .flotte-fuel-month {
    flex: 0 0 auto;
    min-width: 50px;
}

.flotte-fuel-month--filled {
    background: var(--flotte-fuel-filled-bg);
    border-color: var(--flotte-fuel-filled-border);
    color: var(--flotte-fuel-filled-text);
}

.flotte-fuel-month--filled:hover {
    filter: brightness(1.08);
}

.flotte-fuel-month--current {
    background: var(--flotte-fuel-current-bg);
    border-color: var(--flotte-fuel-current-border);
    color: var(--flotte-fuel-current-text);
}

.flotte-fuel-month--current:hover {
    filter: brightness(1.06);
}

.flotte-fuel-month--empty {
    background: var(--flotte-fuel-empty-bg);
    border-color: var(--flotte-fuel-empty-border);
    color: var(--flotte-fuel-empty-text);
}

.flotte-fuel-month--empty:hover {
    filter: brightness(1.1);
}

.flotte-fuel-month--future {
    background: var(--flotte-fuel-future-bg);
    border-color: var(--border);
    color: var(--flotte-fuel-future-text);
    cursor: not-allowed;
    opacity: 0.85;
}

.flotte-fuel-month--future:hover {
    filter: none;
}

.flotte-fuel-hint {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.flotte-fuel-chart-block {
    margin-top: 18px;
    width: 100%;
    max-width: 100%;
}

.flotte-fuel-charts {
    margin-top: 18px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.flotte-fuel-chart-panels .flotte-fuel-chart-block {
    margin-top: 0;
}

.flotte-fuel-chart-panels .flotte-fuel-chart-block--compare {
    margin-top: 0;
}

.flotte-fuel-chart-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 12px;
    padding: 3px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
}

.flotte-fuel-chart-tab {
    flex: 1 1 140px;
    margin: 0;
    padding: 8px 12px;
    border: none;
    border-radius: calc(var(--radius) - 3px);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}

.flotte-fuel-chart-tab:hover {
    color: var(--text);
}

.flotte-fuel-chart-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.flotte-fuel-chart-tab.is-active {
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.flotte-fuel-chart-panels {
    width: 100%;
    min-width: 0;
    position: relative;
    box-sizing: border-box;
}

.flotte-fuel-chart-heading {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.flotte-fuel-chart-compare-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

.flotte-fuel-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.flotte-fuel-chart-legend-label {
    color: var(--text);
    font-weight: 500;
}

.flotte-fuel-chart-legend-swatch {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.flotte-fuel-chart-legend-swatch--prev {
    background: var(--muted);
}

.flotte-fuel-chart-legend-swatch--curr {
    background: var(--flotte-fuel-compare-curr);
}

.flotte-fuel-chart-svg-wrap {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 8px 10px 4px;
    box-sizing: border-box;
    overflow: visible;
}

.flotte-fuel-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 200px;
    overflow: visible;
    font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
}

/* 12 premiers mois du graphique 24 mois (période la plus ancienne). */
.flotte-fuel-chart-period-older {
    fill: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

html[data-theme="light"] .flotte-fuel-chart-period-older {
    fill: #f9f9f9;
}

.flotte-fuel-chart-grid {
    stroke: var(--border);
    stroke-width: 1;
    stroke-dasharray: 4 6;
    opacity: 0.65;
}

.flotte-fuel-chart-grid-v {
    stroke: var(--border);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    opacity: 0.5;
    pointer-events: none;
}

.flotte-fuel-chart-axis {
    stroke: var(--border);
    stroke-width: 1.25;
}

.flotte-fuel-chart-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.flotte-fuel-chart-line--compare-prev {
    stroke: var(--muted);
    stroke-width: 2.25px;
}

.flotte-fuel-chart-line--compare-curr {
    stroke: var(--flotte-fuel-compare-curr);
    stroke-width: 2.5px;
}

.flotte-fuel-chart-dot-compare--prev {
    fill: var(--muted);
    stroke: var(--surface);
    stroke-width: 1.5px;
    cursor: help;
}

.flotte-fuel-chart-dot-compare--curr {
    fill: var(--flotte-fuel-compare-curr);
    stroke: var(--surface);
    stroke-width: 1.5px;
    cursor: help;
}

.flotte-fuel-chart-tooltip {
    position: fixed;
    z-index: 2000;
    left: -9999px;
    top: 0;
    max-width: min(280px, calc(100vw - 16px));
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.flotte-fuel-chart-dot {
    fill: var(--accent);
    stroke: var(--surface);
    stroke-width: 1.5px;
    cursor: help;
}

.flotte-fuel-chart-y-label {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.flotte-fuel-chart-x-label {
    fill: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.flotte-fuel-chart-x-label--every {
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.flotte-fuel-chart-empty {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.flotte-fuel-modal-period {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 720px) {
    .flotte-fuel-nav {
        gap: 8px;
    }

    .flotte-fuel-year-nav {
        padding: 8px 10px;
        font-size: 13px;
    }

    .flotte-fuel-month {
        padding: 7px 4px;
        font-size: 11px;
    }
}

@media (max-width: 720px) {
    .flotte-layout {
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .flotte-sidebar {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 40vh;
    }

    .flotte-vehicle-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }

    .flotte-vehicle-li {
        flex: 1 1 auto;
        min-width: min(100%, 10rem);
    }
}

/* Calendrier mensuel : voir assets/css/planning.css */

.board-days-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
}

.lane {
    flex: 0 0 260px;
    min-width: 240px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 88px);
}

.lane-head {
    padding: 10px 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lane-head .hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}

.lane-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 120px;
}

.days {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: min-content;
}

.day-lane {
    flex: 0 0 200px;
    min-width: 180px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 88px);
}

.day-lane.is-today {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-dim);
}

.day-lane .lane-head {
    text-align: center;
}

.day-lane .day-name {
    font-size: 13px;
    color: var(--muted);
}

.day-lane .day-date {
    font-size: 15px;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 10px 8px;
    margin-bottom: 8px;
    cursor: grab;
    box-shadow: var(--shadow);
    user-select: none;
}

.card:active {
    cursor: grabbing;
}

.card-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.card-text-col {
    flex: 1;
    min-width: 0;
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-notify-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
    border-radius: 4px;
}

.card-notify-btn svg {
    display: block;
}

.card-notify-btn:hover {
    color: var(--text);
}

.card-notify-btn--on {
    color: #16a34a;
}

.card-notify-btn--on:hover {
    color: #15803d;
}

.card-title {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}

.card-meta {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
    word-break: break-word;
}

.card-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.card-edit,
.card-del {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
}

.card-edit:hover {
    color: var(--text);
}

.card-del:hover {
    color: var(--del-hover);
}

.sortable-ghost {
    opacity: 0.45;
}

.sortable-drag {
    opacity: 1;
}

.day-lane-head-link {
    text-decoration: none;
    color: inherit;
    display: block;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.day-lane-head-link:hover {
    background: var(--surface2);
}

.day-lane-head-link .lane-head {
    border-bottom: none;
}

.day-open-hint {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    margin-top: 4px;
}

.topbar-day {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
}

.topbar-day .topbar-right {
    margin-left: auto;
}

.day-topbar-dayblock {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.day-topbar-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: normal;
}

.day-nav-btn {
    flex-shrink: 0;
    min-width: 40px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.day-topbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.btn-back {
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
}

.brand-sub {
    font-size: 1rem;
    font-weight: 600;
}

.day-detail {
    padding: 16px;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    box-sizing: border-box;
}

.day-detail-hint {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 16px;
}

.day-new-mission-row {
    margin-bottom: 18px;
}

.day-new-mission-form {
    max-width: 560px;
}

.day-unplanned-zone {
    width: 100%;
    margin-bottom: 18px;
    background: #2f1a32;
    border: 1px solid #c026d3;
    border-radius: var(--radius);
    overflow: hidden;
}

.day-unplanned-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #3d2042;
    border-bottom: 1px solid #86198f;
}

.day-unplanned-title {
    font-weight: 700;
    font-size: 14px;
    color: #f5d0fe;
}

.day-unplanned-hint {
    font-size: 12px;
    color: #e9a8f0;
}

.day-unplanned-lane {
    min-height: 88px;
    padding: 10px;
    background: #261328;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-content: flex-start;
}

.day-unplanned-lane .card {
    width: calc(
        (100% - (var(--rubikfleet-day-tour-cols-per-row) - 1) * 14px) / var(--rubikfleet-day-tour-cols-per-row)
    );
    max-width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* Vide : vert ; avec missions : fuchsia (règles .day-unplanned-zone ci-dessus) */
.day-unplanned-zone.day-unplanned-zone--empty {
    background: #1a2a22;
    border-color: #22c55e;
}

.day-unplanned-zone--empty .day-unplanned-head {
    background: #243830;
    border-bottom-color: #166534;
    padding: 8px 12px;
    gap: 6px;
}

.day-unplanned-zone--empty .day-unplanned-title {
    color: #bbf7d0;
}

.day-unplanned-zone--empty .day-unplanned-hint {
    color: #86efac;
}

.day-unplanned-zone--empty .day-unplanned-lane {
    background: #142920;
    min-height: 0;
    padding: 0;
    gap: 0;
}

.day-unplanned-celebration {
    margin: 0;
    padding: 6px 12px 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #d1fae5;
    background: #1e3328;
    border-bottom: 1px solid #166534;
}

.day-unplanned-celebration[hidden] {
    display: none;
}

html[data-theme="light"] .day-unplanned-celebration {
    color: #14532d;
    background: #ecfdf5;
    border-bottom-color: #86efac;
}

.day-tours-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.day-tours-toolbar--bottom {
    margin-top: 18px;
    margin-bottom: 8px;
}

.tours-container {
    display: grid;
    grid-template-columns: repeat(var(--rubikfleet-day-tour-cols-per-row), minmax(0, 1fr));
    gap: 14px;
    justify-content: start;
    align-items: stretch;
}

.tour-section {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tour-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--text);
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.tour-head-col--num {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.tour-head-num-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tour-head-flag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 14px;
    height: 14px;
    line-height: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: 0;
    cursor: pointer;
}

.tour-head-flag:hover {
    color: var(--accent);
}

.tour-head-flag:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: var(--accent);
}

.tour-head-flag svg {
    display: block;
    width: 14px;
    height: 14px;
}

.tour-head-flag--done {
    color: #15803d;
}

.tour-head--done {
    background: #d1fae7;
    border-bottom-color: #6ee7b7;
    color: #14532d;
}

.tour-head--done .tour-label {
    color: #166534;
}

.tour-head--done .tour-head-driver {
    color: #15803d;
}

.tour-head--done .tour-num-badge {
    background: #16a34a;
}

.tour-section--done {
    border-color: #86efac;
}

.tours-container .tour-section--done {
    align-self: start;
}

.tour-body--done {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none;
    background: transparent;
}

[data-theme="light"] .tour-head--done {
    background: #ecfdf5;
}

.tour-head-col--text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    line-height: 1.25;
}

.tour-head-driver {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.tour-head-driver-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

.tour-head-driver-row .tour-head-driver {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tour-head-driver-edit {
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    line-height: 0;
    font-size: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
}

.tour-head-driver-edit:hover {
    color: var(--accent);
    background: rgba(0, 0, 0, 0.06);
}

.tour-head-driver-edit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: var(--accent);
}

[data-theme="light"] .tour-head-driver-edit:hover,
[data-theme="light"] .tour-head-driver-edit:focus-visible {
    background: rgba(0, 0, 0, 0.05);
}

.tour-head-driver-edit svg {
    display: block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.tour-head-del {
    flex-shrink: 0;
    margin-left: auto;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #b91c1c;
    border: 1px solid #991b1b;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tour-head-del:hover {
    background: #dc2626;
    border-color: #b91c1c;
}

.tour-head-del:focus {
    outline: 2px solid #f87171;
    outline-offset: 2px;
}

.tour-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--accent-dim);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.tour-num-badge--closure-tip {
    cursor: help;
}

.tour-num-badge--wide {
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    text-align: center;
    line-height: 1.2;
    height: auto;
    min-height: 26px;
    padding: 4px 8px;
}

.tour-head .tour-label {
    color: var(--accent);
    font-weight: 600;
}

.tour-body {
    flex: 1;
    min-height: 120px;
    padding: 10px;
    background: var(--bg);
    overflow-y: auto;
}

.day-assign-driver-lead {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
}

.day-assign-driver-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(50vh, 320px);
    overflow-y: auto;
}

.day-assign-driver-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
}

.day-assign-driver-option:hover {
    background: var(--surface2);
}

.day-assign-driver-option input {
    flex-shrink: 0;
}

.day-assign-driver-empty-hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

.day-detail-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.new-mission-inline {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 220px;
}

.new-mission-inline input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

.new-mission-inline input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.day-modal-field {
    margin-bottom: 14px;
}

.day-modal-field:last-of-type {
    margin-bottom: 0;
}

.modal-tour-create-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}

.modal-tour-create-fields .day-modal-field {
    margin-bottom: 0;
}

.modal-tour-create-field-num {
    flex: 0 0 auto;
    width: 72px;
    min-width: 72px;
}

.modal-tour-create-field-name {
    flex: 1;
    min-width: 0;
}

.day-modal-charge-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
}

.day-modal-select {
    flex: 0 0 auto;
    min-width: 9.5rem;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.day-modal-input--qty {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.day-modal-input {
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    box-sizing: border-box;
}

.day-modal-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.day-modal-input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: var(--surface2);
    color: var(--muted);
    border-color: var(--border);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop);
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
    display: none;
}

.modal-overlay.is-open {
    display: flex;
}

.modal-overlay--stack {
    z-index: 1100;
}

#modal-fleet-life-maintenance.modal-overlay {
    z-index: 1200;
}

.modal--settings-recurring {
    max-width: 520px;
}

.modal--settings-recurring .modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal--settings-recurring .modal-body > .day-modal-field {
    margin-bottom: 0;
}

.modal-settings-recurring-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.modal-settings-recurring-days-block {
    margin-top: 0;
    margin-bottom: 0;
}

.modal-settings-recurring-days-block .settings-field-label {
    display: block;
    margin-bottom: 4px;
}

.modal-overlay[hidden] {
    display: none !important;
}

/* Droits insuffisants : au-dessus d’une modale métier déjà ouverte (même z-index 1000). */
#rubikfleet-perm-denied-modal.modal-overlay.is-open {
    z-index: 10050;
}

#modal-user-account.modal-overlay.is-open {
    z-index: 10050;
}

.user-account-email-readonly {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    word-break: break-all;
}

.user-account-placeholder {
    color: var(--muted);
    font-style: italic;
}

#modal-user-account .modal.modal--user-account {
    width: min(92vw, 48rem);
    max-width: min(92vw, 48rem);
}

.modal-header--user-account .modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.modal-header--user-account .modal-user-account-logout {
    font-size: 13px;
    padding: 7px 12px;
    white-space: nowrap;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 480px;
    max-height: min(90vh, 640px);
    display: flex;
    flex-direction: column;
    resize: both;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 260px;
    min-height: 140px;
}

/* Détail incident : largeur min. 1000px, max. 90 % */
.modal.modal--incident-view {
    min-width: 1000px;
    max-width: 90%;
    width: max(1000px, 90%);
    min-height: 240px;
    max-height: 90vh;
    box-sizing: border-box;
}

.modal.modal--incident-view .fleet-incident-view-body {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal--narrow {
    max-width: 22rem;
}

/* Surcharge : la modale e-mail rapport combine modal--narrow + modal--fleet-email */
.modal.modal--narrow.modal--fleet-email {
    max-width: min(96vw, 44rem);
}

/* Pas d’ascenseur interne : la carte s’adapte au contenu ; le scroll éventuel est sur l’overlay */
#modal-fleet-incident-report-email.modal-overlay.is-open {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding-top: 20px;
    padding-bottom: 24px;
}

#modal-fleet-incident-report-email .modal {
    max-height: none;
    flex-shrink: 0;
}

#modal-fleet-incident-report-email .modal-body {
    overflow-x: hidden;
    overflow-y: visible;
}

#modal-settings .modal {
    width: 75%;
    max-width: 800px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    cursor: grab;
    touch-action: none;
}

.modal-header.rubikfleet-modal-dragging {
    cursor: grabbing;
}

.modal-header .modal-close,
.modal-header button,
.modal-header a,
.modal-header input,
.modal-header select {
    cursor: pointer;
    touch-action: auto;
}

.modal-header--incident-view {
    align-items: flex-start;
}

.modal-header--incident-view .modal-close {
    flex-shrink: 0;
    margin-top: 2px;
}

.modal-header-title-wrap {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
}

.fleet-incident-view-modal-subtitle {
    margin: 4px 0 0;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.modal-close:hover {
    color: var(--text);
    background: var(--surface2);
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Flatpickr — saisie date entretien / incident (fr, semaine lundi) */
#modal-fleet-life-maintenance .flatpickr-calendar,
#modal-fleet-life-incident .flatpickr-calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
    z-index: 1200;
}

#modal-fleet-life-maintenance .flatpickr-months .flatpickr-month,
#modal-fleet-life-incident .flatpickr-months .flatpickr-month {
    background: var(--surface);
    color: var(--text);
}

#modal-fleet-life-maintenance .flatpickr-current-month .flatpickr-monthDropdown-months,
#modal-fleet-life-maintenance .flatpickr-current-month input.cur-year,
#modal-fleet-life-incident .flatpickr-current-month .flatpickr-monthDropdown-months,
#modal-fleet-life-incident .flatpickr-current-month input.cur-year {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

#modal-fleet-life-maintenance .flatpickr-weekdays,
#modal-fleet-life-incident .flatpickr-weekdays {
    background: var(--surface);
}

#modal-fleet-life-maintenance span.flatpickr-weekday,
#modal-fleet-life-incident span.flatpickr-weekday {
    color: var(--muted);
    font-weight: 600;
}

#modal-fleet-life-maintenance .flatpickr-day,
#modal-fleet-life-incident .flatpickr-day {
    color: var(--text);
    border-radius: 6px;
}

#modal-fleet-life-maintenance .flatpickr-day:hover,
#modal-fleet-life-incident .flatpickr-day:hover {
    background: var(--surface2);
    border-color: var(--border);
}

#modal-fleet-life-maintenance .flatpickr-day.today,
#modal-fleet-life-incident .flatpickr-day.today {
    border-color: var(--accent);
}

#modal-fleet-life-maintenance .flatpickr-day.selected,
#modal-fleet-life-maintenance .flatpickr-day.startRange,
#modal-fleet-life-maintenance .flatpickr-day.endRange,
#modal-fleet-life-incident .flatpickr-day.selected,
#modal-fleet-life-incident .flatpickr-day.startRange,
#modal-fleet-life-incident .flatpickr-day.endRange {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

#modal-fleet-life-maintenance .flatpickr-day.flatpickr-disabled,
#modal-fleet-life-maintenance .flatpickr-day.prevMonthDay,
#modal-fleet-life-maintenance .flatpickr-day.nextMonthDay,
#modal-fleet-life-incident .flatpickr-day.flatpickr-disabled,
#modal-fleet-life-incident .flatpickr-day.prevMonthDay,
#modal-fleet-life-incident .flatpickr-day.nextMonthDay {
    color: var(--muted);
    opacity: 0.55;
}

#modal-fleet-life-maintenance .flatpickr-prev-month svg,
#modal-fleet-life-maintenance .flatpickr-next-month svg,
#modal-fleet-life-incident .flatpickr-prev-month svg,
#modal-fleet-life-incident .flatpickr-next-month svg {
    fill: var(--text);
}

.modal--incident {
    position: relative;
    max-width: 32rem;
    max-height: min(92vh, 720px);
}

.fleet-incident-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.38);
    border-radius: inherit;
    pointer-events: all;
}

html[data-theme="light"] .fleet-incident-loading {
    background: rgba(255, 255, 255, 0.65);
}

.fleet-incident-loading[hidden] {
    display: none !important;
}

.fleet-incident-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 90%;
}

.fleet-incident-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: fleet-incident-spin 0.75s linear infinite;
}

.fleet-incident-loading-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text);
    text-align: center;
    line-height: 1.4;
}

@keyframes fleet-incident-spin {
    to {
        transform: rotate(360deg);
    }
}

.modal-overlay.fleet-incident-is-saving {
    cursor: wait;
}

#modal-fleet-life-incident .modal-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#modal-fleet-life-incident .fleet-incident-date-loc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    align-items: start;
    margin-bottom: 22px;
}

@media (max-width: 560px) {
    #modal-fleet-life-incident .fleet-incident-date-loc-row {
        grid-template-columns: 1fr;
    }
}

.fleet-incident-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    padding: 14px 14px 12px;
    margin-bottom: 14px;
}

.fleet-incident-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.fleet-incident-section-intro {
    font-size: 0.85rem;
    color: var(--muted);
    margin: -2px 0 12px;
    line-height: 1.45;
}

#modal-fleet-life-incident .fleet-incident-section .day-modal-field:last-of-type {
    margin-bottom: 0;
}

.fleet-incident-checkbox-label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0;
}

.fleet-incident-checkbox-label input {
    margin-top: 3px;
    flex-shrink: 0;
}

.fleet-incident-files-hint {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 6px 0 0;
    line-height: 1.4;
}

.fleet-incident-attachments-dropzone {
    margin-top: 6px;
    padding: 12px 14px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.fleet-incident-attachments-dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.fleet-incident-drop-hint {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
}

.fleet-incident-file-input {
    width: 100%;
    max-width: 100%;
    font-size: 0.9rem;
}

.fleet-incident-third-toggle {
    margin-bottom: 0;
}

.fleet-incident-third-block {
    margin-top: 2px;
    margin-bottom: 0;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}

.fleet-incident-third-block .day-modal-field:last-of-type {
    margin-bottom: 0;
}

.modal-delete-text {
    margin: 0;
    line-height: 1.55;
    color: var(--text);
    font-size: 14px;
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.modal-body--settings {
    display: flex;
    flex-direction: column;
}

.settings-global-scope {
    margin: 0 0 14px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.settings-global-scope strong {
    font-weight: 600;
}

.modal-footer--settings-global {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.modal-footer--settings-global .settings-footer-scope {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    text-align: right;
}

.modal-footer--settings-global .modal-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.settings-module-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 16px;
    padding: 6px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
}

.settings-module-tabs .settings-module-tab {
    font-size: 15px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 8px;
}

.settings-module-tabs .settings-module-tab:not(.is-active):hover {
    background: var(--bg);
}

.settings-module-tabs .settings-module-tab.is-active {
    background: var(--surface);
    border-bottom-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.settings-module-panels {
    flex: 1;
    min-height: 0;
}

.settings-module-panel[hidden] {
    display: none !important;
}

.settings-module-panel:not([hidden]) {
    display: block;
}

.settings-module-intro {
    margin: 0 0 12px;
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: -2px 0 14px;
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.settings-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 14px;
    margin-bottom: -1px;
    border-radius: 8px 8px 0 0;
    font-family: inherit;
    line-height: 1.2;
}

.settings-tab:hover {
    color: var(--text);
    background: var(--bg);
}

.settings-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.settings-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.settings-tab-panels {
    flex: 1;
    min-height: 0;
}

.settings-tab-panel[hidden] {
    display: none !important;
}

.settings-tab-panel:not([hidden]) {
    display: block;
}

.settings-day-col-width-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.settings-day-tour-cols-per-row-range {
    width: 100%;
    max-width: 28rem;
}

.settings-day-col-width-value {
    font-weight: 600;
    color: var(--accent);
}

.settings-tours-drivers-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 24px;
    align-items: start;
}

.settings-tours-drivers-column {
    min-width: 0;
}

@media (max-width: 720px) {
    .settings-tours-drivers-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.settings-block {
    margin-bottom: 20px;
}

.settings-block:last-of-type {
    margin-bottom: 0;
}

.settings-heading {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
}

.settings-desc {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

.settings-theme-fieldset {
    margin: 0 0 4px;
    padding: 0;
    border: none;
    min-width: 0;
}

.settings-theme-legend {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 8px;
    padding: 0;
}

.settings-theme-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.settings-theme-option {
    font-size: 14px;
}

.settings-days-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.settings-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}

.settings-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.settings-tours-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.settings-drivers-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.settings-driver-editor-row {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.settings-driver-editor-row[draggable="true"] {
    cursor: grab;
}

.settings-driver-editor-row[draggable="true"]:active {
    cursor: grabbing;
}

.settings-driver-editor-row.is-dragging {
    opacity: 0.55;
}

.settings-driver-editor-row .settings-driver-row-minimal {
    user-select: none;
}

.settings-driver-row-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.settings-driver-row-maincol {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-driver-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-driver-summary-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    word-break: break-word;
}

.settings-driver-summary-name--empty {
    color: var(--muted);
    font-weight: 500;
}

.settings-driver-row-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-driver-retirer-tour {
    padding: 4px 8px;
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    color: var(--accent);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

.settings-driver-retirer-tour:hover {
    background: var(--surface2);
}

.settings-driver-retirer-tour:not([hidden]) {
    margin-right: 6px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    min-width: 38px;
    min-height: 38px;
    line-height: 0;
}

.btn-icon svg {
    display: block;
    flex-shrink: 0;
}

.settings-driver-row-actions .btn-icon {
    margin-left: 0;
    padding: 3px;
    min-width: 26px;
    min-height: 26px;
    border: none;
    background: transparent;
}

.settings-driver-row-actions .btn-icon:hover,
.settings-driver-row-actions .btn-icon:focus-visible {
    border: none;
}

.settings-driver-row-actions .btn-icon svg {
    width: 15px;
    height: 15px;
}

.btn-driver-edit {
    color: var(--muted);
}

.btn-driver-edit:hover {
    color: var(--text);
    background: var(--surface2);
    border: none;
}

.btn-driver-remove {
    color: var(--muted);
}

.btn-driver-remove:hover {
    color: var(--del-hover);
    background: rgba(185, 28, 28, 0.1);
    border: none;
}

.modal-driver-inline-error {
    margin: 8px 0 0;
    font-size: 13px;
}

.settings-driver-unassign-drop {
    margin-bottom: 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--muted);
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.settings-driver-unassign-drop-inner {
    display: block;
    pointer-events: none;
}

.settings-driver-unassign-drop.is-drag-over {
    border-color: var(--accent);
    background: var(--accent-drop-hover);
    color: var(--text);
}

.settings-tour-driver-drop {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px dashed var(--border);
    background: var(--tour-drop-bg);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.settings-tour-driver-drop--edit {
    margin-top: 4px;
}

.settings-tour-driver-drop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.settings-tour-driver-drop-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.settings-tour-driver-bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 5px 5px 5px 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 5px;
    line-height: 1;
}

.settings-tour-driver-bubble[hidden] {
    display: none !important;
}

.settings-tour-driver-bubble-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
    line-height: 1;
    margin: 0;
    padding: 0;
}

.settings-tour-driver-bubble-trash {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    padding: 0;
    margin: 0;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    line-height: 0;
}

.settings-tour-driver-bubble-trash:hover {
    color: var(--del-hover);
    background: rgba(185, 28, 28, 0.12);
}

.settings-tour-driver-bubble-trash:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.settings-tour-driver-bubble-trash svg {
    display: block;
    width: 11px;
    height: 11px;
}

.settings-tour-driver-drop.is-drag-over {
    border-color: var(--accent);
    background: var(--accent-drop-hover);
}

.settings-recurring-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.settings-recurring-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.settings-recurring-hidden-fields {
    display: none;
}

.settings-recurring-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}

.settings-recurring-summary-text {
    flex: 1;
    min-width: 0;
}

.settings-recurring-summary-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-recurring-summary-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-recurring-summary-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
    word-break: break-word;
}

.settings-recurring-summary-tour {
    font-weight: 600;
    color: var(--text);
}

.settings-recurring-summary-bubbles-row--info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.settings-recurring-summary-location.settings-recurring-day-bubble {
    max-width: min(100%, 18rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-recurring-summary-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}

.settings-recurring-day-bubble {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    background: var(--surface2);
    border: 1px solid var(--border);
}

.settings-recurring-day-bubble--empty {
    font-weight: 400;
    color: var(--muted);
    background: transparent;
    border-style: dashed;
}

.settings-recurring-summary-actions {
    display: inline-flex;
    align-items: flex-start;
    gap: 0;
    flex-shrink: 0;
}

.settings-recurring-summary-actions .btn-icon {
    padding: 3px;
    min-width: 26px;
    min-height: 26px;
}

.settings-recurring-summary-actions .btn-icon svg {
    width: 15px;
    height: 15px;
}

.settings-recurring-summary .btn-recurring-summary-edit {
    border: none;
    background: transparent;
    color: var(--muted);
    margin-left: 0;
}

.settings-recurring-summary .btn-recurring-summary-edit:hover {
    color: var(--text);
    background: var(--surface2);
    border: none;
}

.settings-recurring-summary .btn-recurring-summary-remove {
    border: none;
    background: transparent;
    color: var(--muted);
    margin-left: 0;
}

.settings-recurring-summary .btn-recurring-summary-remove:hover {
    color: var(--del-hover);
    background: rgba(185, 28, 28, 0.1);
    border: none;
}

.settings-recurring-row-top {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.settings-recurring-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.settings-recurring-title-field {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
}

.settings-recurring-tour-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-recurring-tour-wrap .settings-recurring-tour-select {
    width: 100%;
    max-width: 100%;
}

.settings-recurring-locality-wrap,
.settings-recurring-charge-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-recurring-charge-row {
    margin-top: 0;
}

.settings-recurring-days-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-recurring-days-wrap > .settings-field-label {
    display: block;
}

.settings-recurring-days-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.settings-recurring-day-label {
    font-size: 14px;
}

.settings-tour-editor-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.settings-tour-hidden-fields {
    display: none;
}

.settings-tour-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 8px;
    padding: 2px 0;
}

.settings-tour-summary .btn-tour-summary-edit {
    border: none;
    background: transparent;
    color: var(--muted);
    margin-left: 0;
}

.settings-tour-summary .btn-tour-summary-edit:hover {
    color: var(--text);
    background: var(--surface2);
    border: none;
}

.settings-tour-summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.settings-tour-summary-actions .btn-icon {
    padding: 3px;
    min-width: 26px;
    min-height: 26px;
}

.settings-tour-summary-actions .btn-icon svg {
    width: 15px;
    height: 15px;
}

.settings-tour-summary .btn-tour-summary-remove {
    border: none;
    background: transparent;
    color: var(--muted);
    margin-left: 0;
}

.settings-tour-summary .btn-tour-summary-remove:hover {
    color: var(--del-hover);
    background: rgba(185, 28, 28, 0.1);
    border: none;
}

.settings-tour-summary-text {
    display: contents;
}

.settings-tour-summary-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-tour-summary .settings-tour-driver-drop {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
}

.settings-field-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.settings-error {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--err-text);
}

.settings-error.settings-msg-warn {
    color: var(--warn-text);
}

/* Toast (succès envoi e-mail rapport incident, etc.) */
.rubikfleet-toast {
    position: fixed;
    z-index: 12000;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    max-width: min(440px, calc(100vw - 32px));
    padding: 14px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

.rubikfleet-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.rubikfleet-toast--success {
    background: var(--surface2);
    border: 1px solid var(--flotte-fuel-filled-border);
    color: var(--flotte-fuel-filled-text);
}

html[data-theme="light"] .rubikfleet-toast--success {
    background: #ecfdf5;
    border-color: #34d399;
    color: #065f46;
}

.rubikfleet-toast--info {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
}

html[data-theme="light"] .rubikfleet-toast--info {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}