/* ==========================================================================
   ALTA DELIVERY — DESIGN SYSTEM
   Tokens, base, composants (prefixe .ad-), shell applicatif.
   Mode sombre : body.dark (surcharge uniquement les variables).
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
    /* Marque */
    --ad-primary: #1d5fd6;
    --ad-primary-hover: #174eb3;
    --ad-primary-soft: #e8f0fe;
    --ad-primary-contrast: #ffffff;

    /* Surfaces & texte */
    --ad-bg: #f4f6fa;
    --ad-surface: #ffffff;
    --ad-surface-2: #f8fafc;
    --ad-border: #e2e8f0;
    --ad-border-strong: #cbd5e1;
    --ad-text: #0f172a;
    --ad-text-muted: #5b6b82;
    --ad-text-faint: #8493a8;

    /* Statuts */
    --ad-success: #15803d;
    --ad-success-soft: #dcfce7;
    --ad-warning: #b45309;
    --ad-warning-soft: #fef3c7;
    --ad-danger: #b91c1c;
    --ad-danger-soft: #fee2e2;
    --ad-info: #1d5fd6;
    --ad-info-soft: #e0ecff;
    --ad-neutral: #475569;
    --ad-neutral-soft: #e9eef5;
    --ad-progress: #6d28d9;
    --ad-progress-soft: #ede9fe;

    /* Navigation */
    --ad-nav-bg: #0c2a5c;
    --ad-nav-text: #c7d5ee;
    --ad-nav-text-active: #ffffff;
    --ad-nav-active-bg: rgba(255, 255, 255, 0.14);
    --ad-nav-hover-bg: rgba(255, 255, 255, 0.08);

    /* Espacements (echelle 4px) */
    --ad-s1: 4px;
    --ad-s2: 8px;
    --ad-s3: 12px;
    --ad-s4: 16px;
    --ad-s5: 24px;
    --ad-s6: 32px;

    /* Formes */
    --ad-radius-sm: 8px;
    --ad-radius: 12px;
    --ad-radius-lg: 16px;
    --ad-radius-pill: 999px;

    /* Ombres */
    --ad-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ad-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
    --ad-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);

    /* Typo */
    --ad-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --ad-fs-xs: 0.75rem;
    --ad-fs-sm: 0.8125rem;
    --ad-fs-md: 0.9375rem;
    --ad-fs-lg: 1.125rem;
    --ad-fs-xl: 1.5rem;

    /* Layout */
    --ad-sidebar-w: 248px;
    --ad-sidebar-w-collapsed: 72px;
    --ad-bottom-nav-h: 64px;
    --ad-tap: 44px; /* taille minimale d'une cible tactile */
    --ad-ring: 0 0 0 3px rgba(29, 95, 214, 0.35);
    --ad-transition: 0.18s ease;
}

body.dark {
    --ad-primary: #5b94f5;
    --ad-primary-hover: #7aa9f8;
    --ad-primary-soft: rgba(91, 148, 245, 0.16);
    --ad-primary-contrast: #07142e;

    --ad-bg: #0b1220;
    --ad-surface: #121b2d;
    --ad-surface-2: #172238;
    --ad-border: #24324b;
    --ad-border-strong: #33445f;
    --ad-text: #e8edf6;
    --ad-text-muted: #9fb0c8;
    --ad-text-faint: #7487a3;

    --ad-success: #4ade80;
    --ad-success-soft: rgba(74, 222, 128, 0.14);
    --ad-warning: #fbbf24;
    --ad-warning-soft: rgba(251, 191, 36, 0.14);
    --ad-danger: #f87171;
    --ad-danger-soft: rgba(248, 113, 113, 0.14);
    --ad-info: #7aa9f8;
    --ad-info-soft: rgba(91, 148, 245, 0.16);
    --ad-neutral: #b3c0d4;
    --ad-neutral-soft: rgba(148, 163, 184, 0.16);
    --ad-progress: #a78bfa;
    --ad-progress-soft: rgba(167, 139, 250, 0.16);

    --ad-nav-bg: #0a1527;
    --ad-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ad-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --ad-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --ad-ring: 0 0 0 3px rgba(91, 148, 245, 0.45);
    color-scheme: dark;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-x: clip;
    font-family: var(--ad-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ad-text);
    background: var(--ad-bg);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

body { transition: background-color var(--ad-transition), color var(--ad-transition); }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.25; color: var(--ad-text); }
h1:focus { outline: none; }
p { margin: 0; }
a { color: var(--ad-primary); text-decoration: none; }
a:hover { color: var(--ad-primary-hover); }
img, svg { max-width: 100%; }

:focus-visible { outline: none; box-shadow: var(--ad-ring); border-radius: var(--ad-radius-sm); }

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

/* Utilitaires */
.ad-muted { color: var(--ad-text-muted) !important; }
.ad-faint { color: var(--ad-text-faint) !important; }
.ad-strong { font-weight: 700; }
.ad-nowrap { white-space: nowrap; }
.ad-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ad-break { overflow-wrap: anywhere; }
.ad-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.ad-row { display: flex; align-items: center; gap: var(--ad-s2); flex-wrap: wrap; }
.ad-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ad-s3); flex-wrap: wrap; }
.ad-stack { display: flex; flex-direction: column; gap: var(--ad-s3); }
.ad-grow { flex: 1 1 0; min-width: 0; }
.ad-hide-mobile { display: none !important; }
.ad-hide-desktop { display: block; }
.ad-clickable { cursor: pointer; }
.ad-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. SHELL APPLICATIF ---------- */
.ad-shell { min-height: 100vh; background: var(--ad-bg); }

.ad-main {
    min-width: 0;
    padding: var(--ad-s4) var(--ad-s4) calc(var(--ad-bottom-nav-h) + var(--ad-s5) + env(safe-area-inset-bottom, 0px));
}

.ad-page { width: 100%; max-width: 1280px; margin: 0 auto; }

/* Sidebar (desktop / tablette) */
.ad-sidebar {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ad-sidebar-w);
    z-index: 1000;
    flex-direction: column;
    background: var(--ad-nav-bg);
    color: var(--ad-nav-text);
    transition: width var(--ad-transition);
    overflow: hidden;
}

.ad-brand { display: flex; align-items: center; gap: var(--ad-s3); padding: var(--ad-s4); min-height: 64px; }
.ad-brand-logo {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    background: var(--ad-primary); color: #fff; display: grid; place-items: center; font-weight: 800;
}
.ad-brand-name { color: #fff; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.ad-brand-name span { color: #8db6ff; }

.ad-sidebar-toggle {
    margin-left: auto; width: var(--ad-tap); height: var(--ad-tap);
    background: transparent; border: 0; border-radius: var(--ad-radius-sm); color: var(--ad-nav-text); cursor: pointer;
}
.ad-sidebar-toggle:hover { background: var(--ad-nav-hover-bg); color: #fff; }

.ad-sidebar-user {
    display: flex; align-items: center; gap: var(--ad-s3);
    margin: 0 var(--ad-s3) var(--ad-s3); padding: var(--ad-s3);
    background: var(--ad-nav-hover-bg); border-radius: var(--ad-radius);
}
.ad-avatar {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    background: var(--ad-primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: var(--ad-fs-sm);
}
.ad-sidebar-user-name { color: #fff; font-weight: 600; font-size: var(--ad-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-sidebar-user-role { font-size: var(--ad-fs-xs); color: var(--ad-nav-text); }

.ad-nav { flex: 1; overflow-y: auto; padding: var(--ad-s2) var(--ad-s3); display: flex; flex-direction: column; gap: var(--ad-s1); scrollbar-width: none; }
.ad-nav::-webkit-scrollbar { display: none; }
.ad-nav-spacer { flex: 1; }

.ad-nav-item {
    display: flex; align-items: center; gap: var(--ad-s3);
    min-height: var(--ad-tap); padding: 0 var(--ad-s3);
    color: var(--ad-nav-text); border-radius: var(--ad-radius-sm);
    font-size: var(--ad-fs-md); font-weight: 500; white-space: nowrap;
    transition: background-color var(--ad-transition), color var(--ad-transition);
}
.ad-nav-item i, .ad-nav-item .ad-nav-icon { flex: 0 0 22px; width: 22px; text-align: center; font-size: 1.05rem; }
.ad-nav-item:hover { background: var(--ad-nav-hover-bg); color: #fff; }
.ad-nav-item.active { background: var(--ad-nav-active-bg); color: var(--ad-nav-text-active); font-weight: 700; box-shadow: inset 3px 0 0 #8db6ff; }

.ad-sidebar-footer { padding: var(--ad-s3); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: var(--ad-s2); }
.ad-version { font-size: var(--ad-fs-xs); color: var(--ad-nav-text); opacity: 0.7; text-align: center; }

.ad-theme-toggle {
    display: flex; align-items: center; gap: var(--ad-s3); width: 100%;
    min-height: var(--ad-tap); padding: 0 var(--ad-s3);
    background: transparent; border: 0; border-radius: var(--ad-radius-sm);
    color: var(--ad-nav-text); font: inherit; font-size: var(--ad-fs-md); cursor: pointer;
}
.ad-theme-toggle:hover { background: var(--ad-nav-hover-bg); color: #fff; }
.ad-theme-toggle i { flex: 0 0 22px; width: 22px; text-align: center; }

/* Barre mobile (par defaut visible) */
.ad-bottom-nav {
    position: fixed; inset: auto 0 0 0; z-index: 1500;
    height: calc(var(--ad-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex; background: var(--ad-surface); border-top: 1px solid var(--ad-border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}
.ad-bottom-item {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--ad-text-muted); font-size: 0.6875rem; font-weight: 600; position: relative;
    transition: color var(--ad-transition);
}
.ad-bottom-item i { font-size: 1.2rem; }
.ad-bottom-item:hover { color: var(--ad-primary); }
.ad-bottom-item.active { color: var(--ad-primary); }
.ad-bottom-item.active::before {
    content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
    background: var(--ad-primary); border-radius: 0 0 4px 4px;
}

/* En-tete moderne (telephone + tablette) : verre depoli, salutation, actions rondes */
.ad-topbar {
    position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: var(--ad-s3);
    min-height: 68px; padding: var(--ad-s2) var(--ad-s4); padding-top: calc(var(--ad-s2) + env(safe-area-inset-top, 0px));
    background: color-mix(in srgb, var(--ad-surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ad-border); color: var(--ad-text);
}
.ad-topbar-logo {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 1.1rem;
    background: linear-gradient(135deg, var(--ad-primary) 0%, #5b8def 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ad-primary) 35%, transparent);
}
.ad-topbar-text { min-width: 0; line-height: 1.2; }
.ad-topbar-hello { font-size: var(--ad-fs-xs); color: var(--ad-text-muted); font-weight: 500; text-transform: capitalize; }
.ad-topbar-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-topbar .ad-spacer { flex: 1; }
.ad-topbar-date {
    display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--ad-radius-pill);
    background: var(--ad-primary-soft); color: var(--ad-primary); font-size: var(--ad-fs-sm); font-weight: 600; text-transform: capitalize; white-space: nowrap;
}
.ad-icon-btn {
    flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
    background: var(--ad-surface-2); color: var(--ad-text); border: 1px solid var(--ad-border); cursor: pointer; font-size: 1rem;
    transition: background-color var(--ad-transition), transform 0.05s ease;
}
.ad-icon-btn:hover { background: var(--ad-primary-soft); color: var(--ad-primary); }
.ad-icon-btn:active { transform: scale(0.94); }
.ad-topbar .ad-avatar { width: 42px; height: 42px; border: 2px solid var(--ad-surface); box-shadow: 0 0 0 2px var(--ad-primary-soft); }
@media (min-width: 576px) { .ad-topbar-date { display: inline-flex; } }

/* Tablette (rail) & desktop (etendue). .collapsed / .expanded forcent l'etat choisi par l'utilisateur. */
@media (min-width: 768px) {
    .ad-topbar { margin-left: var(--ad-sidebar-w-collapsed); padding-inline: var(--ad-s5); transition: margin-left var(--ad-transition); }
    .ad-shell.expanded .ad-topbar { margin-left: var(--ad-sidebar-w); }
    .ad-sidebar { display: flex; width: var(--ad-sidebar-w-collapsed); }
    .ad-main { margin-left: var(--ad-sidebar-w-collapsed); padding: var(--ad-s5); transition: margin-left var(--ad-transition); }
    .ad-bottom-nav { display: none; }
    .ad-hide-mobile { display: revert !important; }
    .ad-hide-desktop { display: none !important; }
    .ad-shell.expanded .ad-sidebar { width: var(--ad-sidebar-w); }
    .ad-shell.expanded .ad-main { margin-left: var(--ad-sidebar-w); }
}
@media (min-width: 1200px) {
    .ad-topbar { display: none; }
    .ad-main { padding: var(--ad-s6); }
    .ad-shell:not(.collapsed) .ad-sidebar { width: var(--ad-sidebar-w); }
    .ad-shell:not(.collapsed) .ad-main { margin-left: var(--ad-sidebar-w); }
}

/* Rail : libelles masques (tout ce qui n'est ni etendu ni >=1200px sans .collapsed) */
@media (min-width: 768px) {
    .ad-shell:not(.expanded) .ad-brand-name,
    .ad-shell:not(.expanded) .ad-sidebar-user-text,
    .ad-shell:not(.expanded) .ad-nav-label,
    .ad-shell:not(.expanded) .ad-version { display: none; }
    .ad-shell:not(.expanded) .ad-brand { flex-direction: column; padding: var(--ad-s3) 0; gap: var(--ad-s2); }
    .ad-shell:not(.expanded) .ad-sidebar-toggle { margin: 0; }
    .ad-shell:not(.expanded) .ad-sidebar-user { justify-content: center; background: transparent; padding: 0; margin-inline: 0; }
    .ad-shell:not(.expanded) .ad-nav-item,
    .ad-shell:not(.expanded) .ad-theme-toggle { justify-content: center; padding: 0; }
}
@media (min-width: 1200px) {
    .ad-shell:not(.collapsed) .ad-brand-name,
    .ad-shell:not(.collapsed) .ad-sidebar-user-text,
    .ad-shell:not(.collapsed) .ad-nav-label,
    .ad-shell:not(.collapsed) .ad-version { display: revert; }
    .ad-shell:not(.collapsed) .ad-brand { flex-direction: row; padding: var(--ad-s4); gap: var(--ad-s3); }
    .ad-shell:not(.collapsed) .ad-sidebar-toggle { margin-left: auto; }
    .ad-shell:not(.collapsed) .ad-sidebar-user { justify-content: flex-start; background: var(--ad-nav-hover-bg); padding: var(--ad-s3); margin-inline: var(--ad-s3); }
    .ad-shell:not(.collapsed) .ad-nav-item,
    .ad-shell:not(.collapsed) .ad-theme-toggle { justify-content: flex-start; padding: 0 var(--ad-s3); }
    .ad-shell.collapsed .ad-brand-name,
    .ad-shell.collapsed .ad-sidebar-user-text,
    .ad-shell.collapsed .ad-nav-label,
    .ad-shell.collapsed .ad-version { display: none; }
}

/* ---------- 4. EN-TETE DE PAGE ---------- */
.ad-page-header {
    display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    gap: var(--ad-s3); margin-bottom: var(--ad-s5);
}
.ad-page-title { font-size: var(--ad-fs-xl); letter-spacing: -0.01em; }
.ad-page-subtitle { margin-top: var(--ad-s1); color: var(--ad-text-muted); font-size: var(--ad-fs-md); }
.ad-page-actions { display: flex; flex-wrap: wrap; gap: var(--ad-s2); }
@media (max-width: 575.98px) {
    .ad-page-title { font-size: 1.3rem; }
    .ad-page-actions .ad-btn { min-height: 40px; padding: 0 var(--ad-s3); font-size: var(--ad-fs-sm); }
}

/* ---------- 5. CARTES & PANNEAUX ---------- */
.ad-card {
    background: var(--ad-surface); border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-lg); box-shadow: var(--ad-shadow-sm);
    padding: var(--ad-s4); min-width: 0;
}
@media (min-width: 768px) { .ad-card { padding: var(--ad-s5); } }
.ad-card-flush { padding: 0; overflow: hidden; }
.ad-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ad-s3); flex-wrap: wrap;
    margin-bottom: var(--ad-s4);
}
.ad-card-title { font-size: var(--ad-fs-lg); }
.ad-card-subtitle { font-size: var(--ad-fs-sm); color: var(--ad-text-muted); }
.ad-card-footer { margin-top: var(--ad-s4); padding-top: var(--ad-s3); border-top: 1px solid var(--ad-border); }
.ad-card-interactive { cursor: pointer; transition: box-shadow var(--ad-transition), border-color var(--ad-transition); }
.ad-card-interactive:hover { box-shadow: var(--ad-shadow); border-color: var(--ad-border-strong); }

/* Grilles responsives */
.ad-grid { display: grid; gap: var(--ad-s4); grid-template-columns: 1fr; }
.ad-grid-2 { display: grid; gap: var(--ad-s4); grid-template-columns: 1fr; }
.ad-grid-main { display: grid; gap: var(--ad-s4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 768px) {
    .ad-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-grid-main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ---------- 6. KPI ---------- */
.ad-kpi-grid { display: grid; gap: var(--ad-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--ad-s5); }
@media (min-width: 992px) { .ad-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ad-s4); } }
.ad-kpi-grid.ad-kpi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .ad-kpi-grid.ad-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ad-kpi {
    display: flex; align-items: center; gap: var(--ad-s3); min-width: 0;
    background: var(--ad-surface); border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-lg); box-shadow: var(--ad-shadow-sm); padding: var(--ad-s3) var(--ad-s4);
}
.ad-kpi-icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    background: var(--ad-primary-soft); color: var(--ad-primary); font-size: 1.05rem;
}
.ad-kpi-icon.success { background: var(--ad-success-soft); color: var(--ad-success); }
.ad-kpi-icon.warning { background: var(--ad-warning-soft); color: var(--ad-warning); }
.ad-kpi-icon.danger { background: var(--ad-danger-soft); color: var(--ad-danger); }
.ad-kpi-icon.progress { background: var(--ad-progress-soft); color: var(--ad-progress); }
.ad-kpi-body { min-width: 0; }
.ad-kpi-label { font-size: var(--ad-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ad-text-muted); }
.ad-kpi-value { font-size: 1.35rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ad-kpi-sub { font-size: var(--ad-fs-xs); color: var(--ad-text-muted); }

/* Barre de progression */
.ad-progress { height: 8px; background: var(--ad-neutral-soft); border-radius: var(--ad-radius-pill); overflow: hidden; }
.ad-progress-bar { height: 100%; background: var(--ad-primary); border-radius: inherit; transition: width 0.4s ease; }

/* ---------- 7. BOUTONS ---------- */
.ad-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ad-s2);
    min-height: var(--ad-tap); padding: 0 var(--ad-s4);
    font: inherit; font-size: var(--ad-fs-md); font-weight: 600; line-height: 1.2; text-align: center;
    color: var(--ad-text); background: var(--ad-surface); border: 1px solid var(--ad-border-strong);
    border-radius: var(--ad-radius-sm); cursor: pointer; text-decoration: none;
    transition: background-color var(--ad-transition), border-color var(--ad-transition), box-shadow var(--ad-transition), transform 0.05s ease;
    -webkit-tap-highlight-color: transparent;
}
.ad-btn:hover { background: var(--ad-surface-2); border-color: var(--ad-text-faint); color: var(--ad-text); }
.ad-btn:active { transform: translateY(1px); }
.ad-btn:disabled, .ad-btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.ad-btn-primary { background: var(--ad-primary); border-color: var(--ad-primary); color: var(--ad-primary-contrast); }
.ad-btn-primary:hover { background: var(--ad-primary-hover); border-color: var(--ad-primary-hover); color: var(--ad-primary-contrast); }
.ad-btn-success { background: var(--ad-success); border-color: var(--ad-success); color: #fff; }
body.dark .ad-btn-success { color: #052e14; }
.ad-btn-success:hover { filter: brightness(1.08); background: var(--ad-success); color: #fff; }
body.dark .ad-btn-success:hover { color: #052e14; }
.ad-btn-danger { background: var(--ad-danger); border-color: var(--ad-danger); color: #fff; }
body.dark .ad-btn-danger { color: #2b0707; }
.ad-btn-danger:hover { filter: brightness(1.08); background: var(--ad-danger); color: #fff; }
body.dark .ad-btn-danger:hover { color: #2b0707; }
.ad-btn-ghost { background: transparent; border-color: transparent; color: var(--ad-primary); }
.ad-btn-ghost:hover { background: var(--ad-primary-soft); border-color: transparent; color: var(--ad-primary); }
.ad-btn-soft { background: var(--ad-primary-soft); border-color: transparent; color: var(--ad-primary); }
.ad-btn-soft:hover { filter: brightness(0.97); background: var(--ad-primary-soft); color: var(--ad-primary); }
.ad-btn-sm { min-height: 36px; padding: 0 var(--ad-s3); font-size: var(--ad-fs-sm); }
.ad-btn-lg { min-height: 52px; font-size: 1rem; }
.ad-btn-block { width: 100%; }
.ad-btn-icon { width: var(--ad-tap); padding: 0; }

/* ---------- 8. FORMULAIRES ---------- */
.ad-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ad-label { font-size: var(--ad-fs-sm); font-weight: 600; color: var(--ad-text-muted); }
.ad-input, .ad-select, .ad-textarea {
    width: 100%; min-height: var(--ad-tap); padding: 0 var(--ad-s3);
    font: inherit; font-size: 1rem; /* 16px : evite le zoom iOS */
    color: var(--ad-text); background: var(--ad-surface); border: 1px solid var(--ad-border-strong);
    border-radius: var(--ad-radius-sm); transition: border-color var(--ad-transition), box-shadow var(--ad-transition);
}
.ad-textarea { padding: var(--ad-s3); min-height: 96px; resize: vertical; }
.ad-input::placeholder, .ad-textarea::placeholder { color: var(--ad-text-faint); }
.ad-input:focus, .ad-select:focus, .ad-textarea:focus { outline: none; border-color: var(--ad-primary); box-shadow: var(--ad-ring); }
.ad-input:disabled, .ad-select:disabled, .ad-textarea:disabled { background: var(--ad-surface-2); color: var(--ad-text-faint); cursor: not-allowed; }
.ad-input.invalid, .ad-input.invalid:focus { border-color: var(--ad-danger); }
.ad-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238493a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ad-field-error, .validation-message { color: var(--ad-danger); font-size: var(--ad-fs-xs); font-weight: 500; }
.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--ad-success); }
.invalid { outline: none; border-color: var(--ad-danger) !important; }

.ad-input-icon { position: relative; min-width: 0; }
.ad-input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ad-text-faint); pointer-events: none; }
.ad-input-icon > .ad-input { padding-left: 40px; }

.ad-form-grid { display: grid; gap: var(--ad-s4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ad-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-form-grid .ad-span-2 { grid-column: span 2; } }

/* Barre de filtres */
.ad-toolbar { display: flex; flex-wrap: wrap; gap: var(--ad-s3); align-items: flex-end; margin-bottom: var(--ad-s4); }
.ad-toolbar .ad-search { flex: 1 1 260px; min-width: 0; }
.ad-toolbar .ad-field { flex: 1 1 160px; }
@media (max-width: 575.98px) { .ad-toolbar > * { flex: 1 1 100%; } }

/* Chips / onglets de filtre */
.ad-chips { display: flex; gap: var(--ad-s2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ad-chips::-webkit-scrollbar { display: none; }
.ad-chip {
    flex: 0 0 auto; min-height: 36px; padding: 0 var(--ad-s4); display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: var(--ad-fs-sm); font-weight: 600; color: var(--ad-text-muted);
    background: var(--ad-surface); border: 1px solid var(--ad-border-strong); border-radius: var(--ad-radius-pill); cursor: pointer;
}
.ad-chip:hover { border-color: var(--ad-primary); color: var(--ad-primary); }
.ad-chip.active { background: var(--ad-primary); border-color: var(--ad-primary); color: var(--ad-primary-contrast); }

/* ---------- 9. BADGES DE STATUT ---------- */
.ad-badge {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 3px 10px; border-radius: var(--ad-radius-pill);
    font-size: var(--ad-fs-xs); font-weight: 700; line-height: 1.4; white-space: nowrap;
    background: var(--ad-neutral-soft); color: var(--ad-neutral);
}
.ad-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ad-badge.no-dot::before { display: none; }
/* Statuts de livraison */
.ad-badge.pending, .ad-badge.attente { background: var(--ad-warning-soft); color: var(--ad-warning); }      /* en attente */
.ad-badge.accepted, .ad-badge.acceptee { background: var(--ad-info-soft); color: var(--ad-info); }          /* acceptee / assignee */
.ad-badge.progress, .ad-badge.encours { background: var(--ad-progress-soft); color: var(--ad-progress); }   /* en cours */
.ad-badge.delivered, .ad-badge.livree, .ad-badge.success { background: var(--ad-success-soft); color: var(--ad-success); } /* livree */
.ad-badge.cancelled, .ad-badge.annulee, .ad-badge.danger { background: var(--ad-danger-soft); color: var(--ad-danger); }   /* annulee */
.ad-badge.warning { background: var(--ad-warning-soft); color: var(--ad-warning); }
.ad-badge.info { background: var(--ad-info-soft); color: var(--ad-info); }
.ad-badge.neutral { background: var(--ad-neutral-soft); color: var(--ad-neutral); }

/* Pastille numerotee (arret / index) */
.ad-index {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-size: var(--ad-fs-sm); font-weight: 700; background: var(--ad-primary-soft); color: var(--ad-primary);
}
.ad-index.done { background: var(--ad-success-soft); color: var(--ad-success); }
.ad-index.active { background: var(--ad-primary); color: var(--ad-primary-contrast); }

/* ---------- 10. ALERTES ---------- */
.ad-alert {
    display: flex; align-items: flex-start; gap: var(--ad-s3);
    padding: var(--ad-s3) var(--ad-s4); border-radius: var(--ad-radius);
    border: 1px solid transparent; font-size: var(--ad-fs-md);
    background: var(--ad-info-soft); color: var(--ad-info); border-color: currentColor;
}
.ad-alert > i { margin-top: 3px; }
.ad-alert-body { min-width: 0; overflow-wrap: anywhere; color: var(--ad-text); }
.ad-alert.success { background: var(--ad-success-soft); color: var(--ad-success); }
.ad-alert.warning { background: var(--ad-warning-soft); color: var(--ad-warning); }
.ad-alert.danger, .ad-alert.error { background: var(--ad-danger-soft); color: var(--ad-danger); }
.ad-alert { border-color: color-mix(in srgb, currentColor 30%, transparent); }

/* ---------- 11. ETATS VIDES / CHARGEMENT ---------- */
.ad-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ad-s2); padding: var(--ad-s6) var(--ad-s4); color: var(--ad-text-muted); }
.ad-empty > i { font-size: 2rem; color: var(--ad-text-faint); }
.ad-empty-title { font-weight: 700; color: var(--ad-text); font-size: var(--ad-fs-lg); }

.ad-loading { display: flex; align-items: center; justify-content: center; gap: var(--ad-s3); padding: var(--ad-s6); color: var(--ad-text-muted); }
.ad-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ad-border-strong); border-top-color: var(--ad-primary); animation: ad-spin 0.8s linear infinite; }
@keyframes ad-spin { to { transform: rotate(360deg); } }

.ad-skeleton { background: linear-gradient(90deg, var(--ad-neutral-soft) 25%, var(--ad-surface-2) 37%, var(--ad-neutral-soft) 63%); background-size: 400% 100%; animation: ad-shimmer 1.4s ease infinite; border-radius: var(--ad-radius-sm); min-height: 16px; }
@keyframes ad-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Overlay de chargement plein conteneur */
.ad-overlay { position: fixed; inset: 0; z-index: 3500; display: grid; place-items: center; background: rgba(15, 23, 42, 0.45); }

/* ---------- 12. LISTES & TABLEAUX -> CARTES ---------- */
.ad-list { display: flex; flex-direction: column; gap: var(--ad-s3); }
.ad-list-item {
    display: flex; align-items: center; gap: var(--ad-s3); min-width: 0;
    padding: var(--ad-s3) var(--ad-s4); background: var(--ad-surface); border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius); transition: border-color var(--ad-transition), box-shadow var(--ad-transition);
}
.ad-list-item.clickable { cursor: pointer; }
.ad-list-item.clickable:hover { border-color: var(--ad-primary); box-shadow: var(--ad-shadow); }
.ad-list-item-main { flex: 1; min-width: 0; }
.ad-list-item-title { font-weight: 700; overflow-wrap: anywhere; }
.ad-list-item-meta { font-size: var(--ad-fs-sm); color: var(--ad-text-muted); overflow-wrap: anywhere; }
.ad-list-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }

/* Carte mobile pour une ligne de donnees */
.ad-data-card { background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: var(--ad-radius); padding: var(--ad-s4); box-shadow: var(--ad-shadow-sm); display: flex; flex-direction: column; gap: var(--ad-s3); min-width: 0; }
.ad-data-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ad-s3); }
.ad-data-row { display: flex; justify-content: space-between; gap: var(--ad-s3); font-size: var(--ad-fs-sm); }
.ad-data-row dt, .ad-data-row .k { color: var(--ad-text-muted); flex: 0 0 auto; }
.ad-data-row dd, .ad-data-row .v { margin: 0; text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* Tableau : visible a partir de la tablette. Sous 768px, utiliser .ad-data-card. */
.ad-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ad-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ad-fs-md); }
.ad-table th {
    position: sticky; top: 0; text-align: left; white-space: nowrap;
    padding: var(--ad-s3) var(--ad-s4); background: var(--ad-surface-2); color: var(--ad-text-muted);
    font-size: var(--ad-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ad-border);
}
.ad-table td { padding: var(--ad-s3) var(--ad-s4); border-bottom: 1px solid var(--ad-border); vertical-align: middle; color: var(--ad-text); }
.ad-table tbody tr { transition: background-color var(--ad-transition); }
.ad-table tbody tr:hover { background: var(--ad-surface-2); }
.ad-table tbody tr:last-child td { border-bottom: 0; }
.ad-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.ad-table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ad-s3); flex-wrap: wrap; padding: var(--ad-s3) var(--ad-s4); border-top: 1px solid var(--ad-border); font-size: var(--ad-fs-sm); color: var(--ad-text-muted); }

/* Pagination */
.ad-pager { display: flex; gap: var(--ad-s2); align-items: center; }

/* ---------- 13. MODALES / DRAWERS ---------- */
.ad-modal-backdrop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, 0.55); padding: 0; animation: ad-fade 0.15s ease; }
.ad-modal {
    width: 100%; max-height: 92vh; overflow-y: auto; background: var(--ad-surface); color: var(--ad-text);
    border-radius: var(--ad-radius-lg) var(--ad-radius-lg) 0 0; box-shadow: var(--ad-shadow-lg);
    padding: var(--ad-s5); animation: ad-slide-up 0.2s ease;
}
.ad-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ad-s3); margin-bottom: var(--ad-s4); }
.ad-modal-title { font-size: var(--ad-fs-lg); }
.ad-modal-footer { display: flex; gap: var(--ad-s2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--ad-s5); }
@media (max-width: 575.98px) { .ad-modal-footer .ad-btn { flex: 1 1 auto; } }
@media (min-width: 768px) {
    .ad-modal-backdrop { align-items: center; padding: var(--ad-s5); }
    .ad-modal { max-width: 560px; border-radius: var(--ad-radius-lg); }
}
@keyframes ad-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 14. TOASTS ---------- */
.ad-toast-stack { position: fixed; z-index: 4000; top: var(--ad-s3); left: var(--ad-s3); right: var(--ad-s3); display: flex; flex-direction: column; gap: var(--ad-s2); pointer-events: none; }
.ad-toast { pointer-events: auto; padding: var(--ad-s3) var(--ad-s4); border-radius: var(--ad-radius); background: var(--ad-surface); color: var(--ad-text); border: 1px solid var(--ad-border); border-left: 4px solid var(--ad-info); box-shadow: var(--ad-shadow-lg); animation: ad-toast-in 0.2s ease-out; }
.ad-toast.success { border-left-color: var(--ad-success); }
.ad-toast.error { border-left-color: var(--ad-danger); }
.ad-toast.info { border-left-color: var(--ad-info); }
.ad-toast-title { font-size: var(--ad-fs-sm); font-weight: 700; }
.ad-toast-message { font-size: var(--ad-fs-sm); color: var(--ad-text-muted); overflow-wrap: anywhere; }
@keyframes ad-toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 576px) { .ad-toast-stack { left: auto; right: var(--ad-s5); top: var(--ad-s5); width: 360px; } }

/* ---------- 15. PAGE D'AUTHENTIFICATION ---------- */
.ad-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--ad-s4); background: linear-gradient(160deg, var(--ad-nav-bg) 0%, #14468f 100%); }
.ad-auth-card { width: 100%; max-width: 440px; background: var(--ad-surface); border-radius: var(--ad-radius-lg); box-shadow: var(--ad-shadow-lg); padding: var(--ad-s5); }
@media (min-width: 576px) { .ad-auth-card { padding: var(--ad-s6); } }
.ad-auth-logo { display: flex; flex-direction: column; align-items: center; gap: var(--ad-s2); margin-bottom: var(--ad-s5); text-align: center; }

/* ---------- 16. SURCHARGES COMPOSANTS TIERS ---------- */
/* Syncfusion : on laisse le composant gerer sa largeur, on harmonise la forme et les couleurs. */
.e-input-group, .e-input-group.e-control-wrapper, .e-float-input.e-control-wrapper {
    border-radius: var(--ad-radius-sm) !important;
}
body.dark .e-input-group, body.dark .e-input-group.e-control-wrapper, body.dark .e-control.e-input,
body.dark .e-dropdownlist, body.dark .e-popup, body.dark .e-grid, body.dark .e-card {
    background: var(--ad-surface); color: var(--ad-text); border-color: var(--ad-border);
}

/* Bootstrap : alignement des composants residuels sur les tokens */
.btn-primary { background-color: var(--ad-primary); border-color: var(--ad-primary); color: var(--ad-primary-contrast); }
.btn-primary:hover { background-color: var(--ad-primary-hover); border-color: var(--ad-primary-hover); }
.progress { background: var(--ad-neutral-soft); border-radius: var(--ad-radius-pill); }
.progress-bar { background-color: var(--ad-primary); }

/* Barre d'erreur Blazor */
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; z-index: 5000; padding: var(--ad-s3) var(--ad-s4); background: var(--ad-warning-soft); color: var(--ad-warning); box-shadow: var(--ad-shadow-lg); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--ad-s3); top: var(--ad-s3); }
.blazor-error-boundary { background: var(--ad-danger); padding: var(--ad-s4); color: #fff; border-radius: var(--ad-radius); }
.blazor-error-boundary::after { content: "Une erreur est survenue."; }

/* ---------- 17. AUTH : COMPLEMENTS (champ mot de passe, titres, pied, lien) ---------- */
.ad-auth { padding-top: max(var(--ad-s4), env(safe-area-inset-top, 0px)); padding-bottom: max(var(--ad-s4), env(safe-area-inset-bottom, 0px)); }
.ad-auth-logo img { width: 100%; max-width: 220px; height: auto; }
.ad-auth-title { font-size: var(--ad-fs-xl); text-align: center; letter-spacing: -0.01em; }
.ad-auth-subtitle { text-align: center; color: var(--ad-text-muted); font-size: var(--ad-fs-sm); margin: var(--ad-s1) 0 var(--ad-s5); }
.ad-auth-form { display: flex; flex-direction: column; gap: var(--ad-s4); }
.ad-auth-footer { margin-top: var(--ad-s5); text-align: center; font-size: var(--ad-fs-sm); color: var(--ad-text-muted); }
.ad-link { color: var(--ad-primary); font-weight: 700; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.ad-link:hover { text-decoration: underline; color: var(--ad-primary-hover); }
.ad-link-row { display: flex; justify-content: center; margin-top: var(--ad-s4); font-size: var(--ad-fs-sm); }
.ad-link-row .ad-link { min-height: var(--ad-tap); display: inline-flex; align-items: center; }
.ad-input-icon.has-toggle > .ad-input { padding-right: 48px; }
.ad-input-toggle { position: absolute; right: 0; top: 0; width: var(--ad-tap); height: 100%; display: grid; place-items: center; background: transparent; border: 0; color: var(--ad-text-faint); cursor: pointer; border-radius: var(--ad-radius-sm); }
.ad-input-toggle:hover { color: var(--ad-primary); }
.ad-auth .ad-alert-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ad-btn .ad-spinner { width: 18px; height: 18px; border-width: 2px; border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }

/* ---------- 17. CHOIX (options radio selectionnables) ---------- */
.ad-choice-group { display: flex; flex-direction: column; gap: var(--ad-s2); }
.ad-choice {
    display: flex; align-items: center; gap: var(--ad-s3); min-height: var(--ad-tap); padding: var(--ad-s2) var(--ad-s3);
    background: var(--ad-surface); color: var(--ad-text); border: 1px solid var(--ad-border-strong);
    border-radius: var(--ad-radius-sm); cursor: pointer; font-weight: 600; min-width: 0;
    transition: border-color var(--ad-transition), background-color var(--ad-transition);
}
.ad-choice:hover { border-color: var(--ad-primary); }
.ad-choice::before {
    content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--ad-border-strong); background: transparent;
}
.ad-choice.selected { border-color: var(--ad-primary); background: var(--ad-primary-soft); }
.ad-choice.selected::before { border-color: var(--ad-primary); background: radial-gradient(circle, var(--ad-primary) 0 45%, transparent 50%); }
.ad-choice > i { width: 20px; text-align: center; color: var(--ad-text-muted); }

/* ---------- 17. PROFIL : AVATAR LARGE, INTERRUPTEUR, LISTES D'ALERTE ---------- */
.ad-avatar-lg { width: 88px; height: 88px; font-size: 2.25rem; box-shadow: var(--ad-shadow); }
.ad-profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ad-s2); margin-bottom: var(--ad-s4); }
.ad-profile-info { margin: 0; }
.ad-profile-info .ad-data-row dt i { margin-right: var(--ad-s2); width: 16px; text-align: center; }
.ad-alert-list { margin: 0; padding-left: var(--ad-s4); }

.ad-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: 0 0 auto; cursor: pointer; }
.ad-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ad-switch-slider { position: absolute; inset: 0; background: var(--ad-border-strong); border-radius: var(--ad-radius-pill); transition: background-color var(--ad-transition); }
.ad-switch-slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ad-surface); box-shadow: var(--ad-shadow-sm); transition: transform var(--ad-transition); }
.ad-switch input:checked + .ad-switch-slider { background: var(--ad-primary); }
.ad-switch input:checked + .ad-switch-slider::before { transform: translateX(20px); }
.ad-switch input:focus-visible + .ad-switch-slider { box-shadow: var(--ad-ring); }
.ad-auth-card > .ad-alert, .ad-auth-card form > .ad-alert, .ad-auth-card .ad-alert + .ad-auth-form { margin-bottom: var(--ad-s4); }
.ad-auth-card > .ad-alert { margin-bottom: var(--ad-s4); }
.ad-auth-card-wide { max-width: 560px; }
.ad-auth-card form > .ad-alert { margin-top: var(--ad-s4); margin-bottom: 0; }

/* ---------- 18. ONGLETS ---------- */
.ad-tabs { display: flex; gap: var(--ad-s1); padding: var(--ad-s1); margin-bottom: var(--ad-s4); background: var(--ad-neutral-soft); border-radius: var(--ad-radius); }
.ad-tab {
    flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--ad-s2);
    font: inherit; font-size: var(--ad-fs-md); font-weight: 600; color: var(--ad-text-muted);
    background: transparent; border: 0; border-radius: var(--ad-radius-sm); cursor: pointer;
    transition: background-color var(--ad-transition), color var(--ad-transition);
}
.ad-tab.active { background: var(--ad-surface); color: var(--ad-primary); box-shadow: var(--ad-shadow-sm); }

/* ---------- 19. SKELETON CARTE ---------- */
.ad-skeleton-card { height: 84px; border-radius: var(--ad-radius); }