/* ═══════════════════════════════════════════════════════════
   PALETTE — reprise du design handoff, sans MudBlazor
   Thème sombre par défaut ; [data-theme="light"] bascule.
   ═══════════════════════════════════════════════════════════ */

:root,
:root[data-theme="dark"] {
    --esb-primary: #9B59E8;
    --esb-primary-rgb: 155, 89, 232;
    --esb-primary-darken: #7640C0;
    --esb-primary-lighten: #B890F0;
    --esb-primary-text: #FFFFFF;
    --esb-primary-hover: rgba(155, 89, 232, 0.08);

    --esb-secondary: #E0A030;
    --esb-secondary-rgb: 224, 160, 48;
    --esb-secondary-darken: #C4881A;
    --esb-secondary-text: #1A0D36;

    --esb-tertiary: #E07018;

    --esb-background: #0F0C22;
    --esb-background-grey: #211B45;
    --esb-surface: #1A1638;

    --esb-lines-default: rgba(155, 89, 232, 0.20);

    --esb-text-primary: #F0EBFF;
    --esb-text-secondary: #A090C0;
    --esb-text-disabled: #7E6C9C;

    --esb-action-hover: rgba(155, 89, 232, 0.08);

    --esb-success: #66BB6A;
    --esb-success-rgb: 102, 187, 106;
    --esb-success-darken: #43A047;

    --esb-error: #EF5350;
    --esb-error-rgb: 239, 83, 80;

    --esb-warning: #FFA726;
    --esb-warning-rgb: 255, 167, 38;
    --esb-warning-darken: #F57C00;

    --esb-info: #42A5F5;
    --esb-info-rgb: 66, 165, 245;

    --esb-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    --esb-shadow-2: 0 3px 10px rgba(0, 0, 0, 0.18);
    /* Feuille remontant du bas de l'écran sous le seuil mobile */
    --esb-shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);

    /* Pilote le rendu des contrôles natifs que le CSS n'atteint pas :
       menu déroulant du <select>, sélecteurs de date et d'heure, surlignage. */
    color-scheme: dark;
}

:root[data-theme="light"] {
    --esb-primary: #5C2A8A;
    --esb-primary-rgb: 92, 42, 138;
    --esb-primary-darken: #2D1068;
    --esb-primary-lighten: #7C4CB8;
    --esb-primary-text: #FFFFFF;
    --esb-primary-hover: rgba(92, 42, 138, 0.06);

    --esb-secondary: #C4881A;
    --esb-secondary-rgb: 196, 136, 26;
    --esb-secondary-darken: #A06E12;
    --esb-secondary-text: #FFFFFF;

    --esb-tertiary: #E07018;

    --esb-background: #F4F1F8;
    --esb-background-grey: #FAF8FD;
    --esb-surface: #FFFFFF;

    --esb-lines-default: rgba(92, 42, 138, 0.14);

    --esb-text-primary: #1A0D36;
    --esb-text-secondary: #6B537A;
    --esb-text-disabled: #8E7C9C;

    --esb-action-hover: rgba(92, 42, 138, 0.06);

    --esb-success: #2E7D32;
    --esb-success-rgb: 46, 125, 50;
    --esb-success-darken: #1B5E20;

    --esb-error: #C62828;
    --esb-error-rgb: 198, 40, 40;

    --esb-warning: #E65100;
    --esb-warning-rgb: 230, 81, 0;
    --esb-warning-darken: #BF360C;

    --esb-info: #1565C0;
    --esb-info-rgb: 21, 101, 192;

    --esb-shadow: 0 2px 8px rgba(45, 16, 104, 0.10);
    --esb-shadow-2: 0 3px 10px rgba(45, 16, 104, 0.14);
    --esb-shadow-sheet: 0 -8px 32px rgba(45, 16, 104, 0.22);

    color-scheme: light;
}

html, body {
    background: var(--esb-background);
    color: var(--esb-text-primary);
}

html, body {
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* ── Barlow Condensed pour les titres ───────────────────── */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2,
.mud-typography-h3, .mud-typography-h4,
.mud-typography-h5, .mud-typography-h6 {
    font-family: 'Barlow Condensed', Roboto, sans-serif !important;
}

/* ── MudPaper shadows ───────────────────────────────────── */
.mud-paper         { box-shadow: 0 2px 8px  rgba(0,0,0,0.14) !important; }
.mud-elevation-2   { box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important; }
.mud-elevation-3   { box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important; }

/* ── MudChip arrondi ────────────────────────────────────── */
.mud-chip { border-radius: 6px !important; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar             { width: 5px; height: 5px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: rgba(155,89,232,0.30); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(155,89,232,0.55); }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR NAV — .sb-nav-*
   ═══════════════════════════════════════════════════════════ */

.sb-nav {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

/* Nav link */
.sb-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 2px 8px;
    border-radius: 12px;
    color: #E8DEFF;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

.sb-nav-link:hover {
    background: #6C3F96;
    color: white;
    text-decoration: none !important;
}

.sb-nav-link--active {
    background: #7348A3 !important;
    color: white !important;
}

/* Lucide icon inside nav */
.sb-nav-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nav text */
.sb-nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav badge (unread count) */
.sb-nav-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--esb-secondary);
    color: var(--esb-secondary-text);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Section label */
.sb-nav-section {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C4A8F0;
    padding: 10px 20px 4px;
    white-space: nowrap;
    min-height: 1px;
}

/* Mini mode: center icon, hide text */
#esb-sb:not(.esb-sidebar--open) .sb-nav-link {
    justify-content: center;
    padding: 10px;
    margin: 3px 8px;
}

/* Mini mode : le libellé de section disparaît, garder un séparateur visible */
#esb-sb:not(.esb-sidebar--open) .sb-nav-section {
    height: 1px;
    padding: 0;
    margin: 10px 16px 6px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

/* ── Lucide icon dans les boutons du bandeau violet ─────── */
/* Blazicon pose la classe sur le <svg> lui-même : `.esb-sb-lucide svg` ne
   désigne rien. Les deux formes sont écrites, sans quoi l'icône héritait de
   currentColor — noire en thème clair, sur fond violet — et retombait à la
   taille de la police, 13 px. Ces boutons vivent tous sur le dégradé violet
   (rail, bandeau mobile, tiroir), la teinte claire vaut donc dans les deux
   thèmes. */
.esb-sb-lucide,
.esb-sb-lucide svg {
    flex: none;
    width: 20px !important;
    height: 20px !important;
    stroke: #E8DEFF !important;
    stroke-width: 1.75 !important;
    fill: none !important;
}

.esb-sidebar .sb-nav-icon,
.esb-mobile-drawer .sb-nav-icon {
    flex: none;
    width: 20px !important;
    height: 20px !important;
}

.esb-sb-icon-btn:hover .esb-sb-lucide,
.esb-sb-icon-btn:hover .esb-sb-lucide svg {
    stroke: white !important;
}

/* Icône MudBlazor (police Material) dans les boutons sidebar — même traitement que les Lucide */
.esb-sb-mud-icon {
    color: #E8DEFF !important;
}

.esb-sb-icon-btn:hover .esb-sb-mud-icon,
.esb-sb-mud-icon:hover {
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════ */

/* ── Blazor validation ──────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #2E7D32; }
.invalid                             { outline: 1px solid #C62828; }
.validation-message                  { color: #C62828; }

.blazor-error-boundary {
    background: #C62828;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Une erreur s'est produite."
}

#blazor-error-ui {
    background: #C4881A;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #1A0D36;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   ESB TABLE — style datagrid unifié
   ═══════════════════════════════════════════════════════════ */

/* Paper container */
.esb-table-card {
    border-radius: 16px !important;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Header cells */
.esb-table .mud-table-head th {
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em;
    color: var(--esb-text-secondary) !important;
    padding: 10px 16px !important;
    border-bottom: 2px solid var(--esb-lines-default) !important;
    white-space: nowrap;
}

/* Data cells */
.esb-table .mud-table-body td {
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--esb-lines-default) !important;
    font-size: 0.875rem;
}

/* Last row — no bottom border */
.esb-table .mud-table-body tr:last-child td {
    border-bottom: none !important;
}

/* Zebrage — une ligne sur deux */
.esb-table .mud-table-body tr:nth-child(even) td {
    background: rgba(155, 89, 232, 0.035) !important;
}

/* Row hover tint */
.esb-table .mud-table-body tr:hover td {
    background: rgba(155, 89, 232, 0.06) !important;
}

/* Toolbar */
.esb-table .mud-toolbar {
    padding: 12px 16px !important;
    min-height: 56px;
}

/* ── Icônes Lucide dans les tables ──────────────────────── */

/* Icônes dans boutons d'action (modifier, supprimer…) */
.esb-action-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Icônes dans boutons de toolbar */
.esb-btn-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    vertical-align: text-bottom;
}
/* Icônes dans chips */
.esb-chip-icon {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    vertical-align: middle;
}
/* Icônes inline (dans texte / tooltips) */
.esb-inline-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 3px;
}
/* Chevron indiquant qu'une ligne de grille est cliquable */
/* Icônes dans titres de page */
.esb-title-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════════
   LAYOUT — .esb-layout, .esb-sidebar, .esb-main …
   ═══════════════════════════════════════════════════════════ */

/* ── Outer layout ─────────────────────────────────────────── */
.esb-layout {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--esb-background);
    padding: 10px;
    gap: 10px;
    box-sizing: border-box;
}

/* ── Sidebar shell ─────────────────────────────────────────── */
.esb-sidebar {
    flex-shrink: 0;
    width: 66px;
    height: 100%;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #2D1068 0%, #5C2A8A 55%, #7040B8 100%);
    box-shadow: 0 8px 32px rgba(45, 16, 104, 0.50);
    transition: width 0.25s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    z-index: 200;
}

.esb-sidebar--open {
    width: 240px;
}

/* ── Header ───────────────────────────────────────────────── */
.esb-sb-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 14px 12px 12px;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 68px;
}

.esb-sb-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.esb-sb-brand {
    display: flex;
    flex-direction: column;
    line-height: 1;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.esb-sb-brand-name {
    font-family: 'Barlow Condensed', Roboto, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: white;
    letter-spacing: 0.05em;
    line-height: 1;
}

.esb-sb-brand-sub {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ── Icon buttons (generic) ─────────────────────────────── */
.esb-sb-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.0);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
    padding: 0;
}

.esb-sb-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.esb-sb-icon {
    font-size: 1.25rem !important;
    color: rgba(255, 255, 255, 0.80) !important;
}

/* ── Nav area ─────────────────────────────────────────────── */
.esb-sb-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: none;
}

.esb-sb-nav::-webkit-scrollbar { display: none; }

/* ── Footer ───────────────────────────────────────────────── */
.esb-sb-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* User card (expanded mode) */
.esb-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

.esb-user-card:hover {
    background: rgba(255, 255, 255, 0.10);
}

.esb-user-name {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ── Main content area ────────────────────────────────────── */
.esb-main {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    border-radius: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 89, 232, 0.35) transparent;
}

/* ── Mobile topbar — hidden on desktop ───────────────────── */
.esb-topbar {
    display: none;
}

.esb-topbar-brand {
    flex: 1;
    font-family: 'Barlow Condensed', Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: white;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ── Mobile drawer — always fixed, off-screen ────────────── */
.esb-mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 300;
    background: linear-gradient(160deg, #2D1068 0%, #5C2A8A 55%, #7040B8 100%);
    box-shadow: 4px 0 32px rgba(45, 16, 104, 0.5);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    flex-direction: column;
}

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

/* ── Mobile backdrop ─────────────────────────────────────── */
.esb-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 250;
    backdrop-filter: blur(2px);
}

/* ── Bottom nav — hidden on desktop ──────────────────────── */
.esb-bottomnav {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  ≤ 640 px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    .esb-layout {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    /* Hide desktop sidebar */
    .esb-sidebar {
        display: none !important;
    }

    /* Show topbar */
    .esb-topbar {
        display: block;
        flex-shrink: 0;
        background: linear-gradient(160deg, #2D1068 0%, #5C2A8A 100%);
        z-index: 100;
        box-shadow: 0 2px 12px rgba(45, 16, 104, 0.4);
    }

    /* Ligne interne à hauteur fixe — les boutons restent centrés dans les 56 px visibles */
    .esb-topbar-inner {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 8px 0 4px;
        height: 56px;
    }

    /* iOS uniquement : pousse le contenu sous le notch / Dynamic Island */
    @supports (-webkit-touch-callout: none) {
        .esb-topbar {
            padding-top: env(safe-area-inset-top, 0px);
        }
        .esb-mobile-drawer .esb-sb-header {
            padding-top: calc(14px + env(safe-area-inset-top, 0px));
            min-height: calc(68px + env(safe-area-inset-top, 0px));
        }
    }

    /* Main: full width, space for bottom nav */
    .esb-main {
        border-radius: 0;
        height: auto;
        flex: 1;
        min-height: 0;
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Show mobile drawer */
    .esb-mobile-drawer {
        display: flex;
    }

    /* Show bottom nav */
    .esb-bottomnav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(160deg, #2D1068 0%, #5C2A8A 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        z-index: 100;
        box-shadow: 0 -2px 16px rgba(45, 16, 104, 0.35);
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — .esb-bn-*
   ═══════════════════════════════════════════════════════════ */

.esb-bn-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.52);
    text-decoration: none !important;
    font-size: 0.60rem;
    font-weight: 600;
    padding: 6px 2px;
    transition: color 0.15s;
    letter-spacing: 0.02em;
}

.esb-bn-link:hover,
.esb-bn-link.esb-bn-link--active {
    color: white;
}

.esb-bn-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   MODALES CRUD — en-tête, pied de page, listes sélectionnables
   ═══════════════════════════════════════════════════════════ */

.esb-modal-icon-badge {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.esb-modal-icon-badge svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}
.esb-modal-icon-badge--primary {
    background: rgba(var(--esb-primary-rgb), 0.14);
    border: 1px solid rgba(var(--esb-primary-rgb), 0.38);
    color: var(--esb-primary);
}
.esb-modal-icon-badge--warning {
    background: rgba(var(--esb-warning-rgb), 0.14);
    border: 1px solid rgba(var(--esb-warning-rgb), 0.38);
    color: var(--esb-warning);
}

.esb-modal-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--esb-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Listes sélectionnables (candidats, joueurs convoqués) ─── */
.esb-pick-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 13px;
    cursor: pointer;
    border: 1px solid var(--esb-lines-default);
    background: var(--esb-surface);
}
.esb-pick-row--active {
    background: rgba(var(--esb-primary-rgb), 0.10);
    border-color: var(--esb-primary);
}
.esb-pick-avatar,
.esb-pick-num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', Roboto, sans-serif;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: rgba(var(--esb-primary-rgb), 0.12);
    color: var(--esb-primary);
}
.esb-pick-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 15px;
    border: 1px solid var(--esb-lines-default);
}
.esb-pick-num {
    min-width: 32px;
    border-radius: 7px;
    font-size: 14px;
    padding: 2px 6px;
}
.esb-pick-row--active .esb-pick-avatar,
.esb-pick-row--active .esb-pick-num {
    background: var(--esb-primary);
    color: var(--esb-primary-text);
}
.esb-pick-text {
    flex: 1;
    min-width: 0;
}
.esb-pick-name {
    font-size: 0.86rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.esb-pick-note {
    font-size: 0.7rem;
    color: var(--esb-text-secondary);
    margin-top: 2px;
}
.esb-pick-note--warn {
    color: var(--esb-warning);
}
.esb-pick-check {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--esb-lines-default);
    color: transparent;
}
.esb-pick-check svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
.esb-pick-row--active .esb-pick-check {
    background: var(--esb-primary);
    color: var(--esb-primary-text);
    border-color: var(--esb-primary);
}

.esb-pick-empty {
    margin-top: 14px;
    padding: 22px 16px;
    border-radius: 14px;
    background: var(--esb-surface);
    border: 1px dashed var(--esb-lines-default);
    text-align: center;
}
.esb-pick-empty-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--esb-text-secondary);
}
.esb-pick-empty-note {
    font-size: 0.74rem;
    color: var(--esb-text-disabled);
    margin-top: 4px;
    line-height: 1.45;
}

.esb-pick-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}
.esb-pick-toolbar-label {
    flex: 1;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--esb-text-secondary);
}
.esb-pick-count {
    flex: none;
    border-radius: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
    background: rgba(var(--esb-primary-rgb), 0.12);
    color: var(--esb-primary);
}
.esb-pick-note-banner {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.45;
    background: var(--esb-surface);
    border: 1px solid var(--esb-lines-default);
    color: var(--esb-text-secondary);
}
.esb-pick-note-banner--warn {
    background: rgba(var(--esb-warning-rgb), 0.10);
    border-color: rgba(var(--esb-warning-rgb), 0.40);
    color: var(--esb-warning);
}

/* ═══════════════════════════════════════════════════════════
   PRIMITIVES — reprises du design handoff
   Titres, boutons, boutons icône et tags : les maquettes les
   dessinent en HTML plat, sans composant MudBlazor.
   ═══════════════════════════════════════════════════════════ */

/* Titre de page — h1 36/800, jamais d'icône */
.esb-h1 {
    font-family: 'Barlow Condensed', Roboto, sans-serif;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: -0.5px;
    line-height: 1;
    margin: 0;
    color: var(--esb-text-primary);
}

@media (max-width: 600px) {
    .esb-h1 {
        font-size: 28px;
    }
}

/* Boutons */
.esb-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--esb-lines-default);
    background: var(--esb-surface);
    color: var(--esb-text-secondary);
    font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.esb-btn:hover {
    border-color: rgba(var(--esb-primary-rgb), 0.55);
    color: var(--esb-text-primary);
}

.esb-btn:disabled,
.esb-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.esb-btn--primary {
    border: none;
    background: var(--esb-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.esb-btn--primary:hover {
    background: var(--esb-primary-darken);
    color: #fff;
}

.esb-btn--secondary {
    border: none;
    background: var(--esb-secondary);
    color: #fff;
}

.esb-btn--secondary:hover {
    background: var(--esb-secondary-darken);
    color: #fff;
}

.esb-btn--danger {
    color: var(--esb-error);
    border-color: rgba(var(--esb-error-rgb), 0.35);
}

.esb-btn--danger:hover {
    border-color: var(--esb-error);
    color: var(--esb-error);
}

.esb-btn--sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 10px;
}

.esb-btn--block {
    width: 100%;
}

/* Boutons icône */
.esb-iconbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--esb-primary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.esb-iconbtn:hover {
    background: rgba(var(--esb-primary-rgb), 0.12);
}

.esb-iconbtn:disabled,
.esb-iconbtn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.esb-iconbtn--danger {
    color: var(--esb-error);
}

.esb-iconbtn--danger:hover {
    background: rgba(var(--esb-error-rgb), 0.12);
}

.esb-iconbtn--muted {
    color: var(--esb-text-secondary);
}

.esb-iconbtn--muted:hover {
    color: var(--esb-text-primary);
    background: rgba(var(--esb-primary-rgb), 0.10);
}

/* Tags */
.esb-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    white-space: nowrap;
}

.esb-tag--primary {
    background: rgba(var(--esb-primary-rgb), 0.14);
    color: var(--esb-primary-lighten);
}

.esb-tag--secondary {
    background: rgba(var(--esb-secondary-rgb), 0.16);
    color: var(--esb-secondary);
}

.esb-tag--success {
    background: rgba(var(--esb-success-rgb), 0.16);
    color: var(--esb-success);
}

.esb-tag--error {
    background: rgba(var(--esb-error-rgb), 0.14);
    color: var(--esb-error);
}

.esb-tag--muted {
    background: transparent;
    border: 1px solid var(--esb-lines-default);
    color: var(--esb-text-disabled);
}

.esb-tag--upper {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 10px;
}

/* Pilules de filtre */
.esb-pill {
    display: inline-flex;
    align-items: center;
    font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(var(--esb-primary-rgb), 0.35);
    color: var(--esb-primary-lighten);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.esb-pill:hover {
    border-color: var(--esb-primary);
}

.esb-pill--active {
    background: var(--esb-primary);
    border-color: var(--esb-primary);
    color: #fff;
}

/* Bandeaux d'information */
.esb-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.45;
}

.esb-notice-icon {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    display: inline-flex;
}

.esb-notice--info {
    background: rgba(var(--esb-primary-rgb), 0.10);
    border: 1px solid rgba(var(--esb-primary-rgb), 0.32);
    color: var(--esb-primary-lighten);
}

.esb-notice--warning {
    background: rgba(var(--esb-secondary-rgb), 0.10);
    border: 1px solid rgba(var(--esb-secondary-rgb), 0.45);
    color: var(--esb-secondary);
}

.esb-notice--error {
    background: rgba(var(--esb-error-rgb), 0.10);
    border: 1px solid rgba(var(--esb-error-rgb), 0.42);
    color: var(--esb-error);
}

.esb-notice--success {
    background: rgba(var(--esb-success-rgb), 0.10);
    border: 1px solid rgba(var(--esb-success-rgb), 0.42);
    color: var(--esb-success);
}

/* Barre de chargement */
.esb-loading {
    position: relative;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(var(--esb-primary-rgb), 0.16);
}

.esb-loading span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    border-radius: 2px;
    background: var(--esb-primary);
    animation: esb-loading-slide 1.15s ease-in-out infinite;
}

@keyframes esb-loading-slide {
    0%   { left: -38%; }
    100% { left: 100%; }
}

/* Séparateur */
.esb-divider {
    height: 1px;
    background: var(--esb-lines-default);
}

/* ═══════════════════════════════════════════════════════════
   CHAMPS DE FORMULAIRE — reprise du handoff
   Boîte 13px + micro-libellé majuscules + champ sans bordure.
   ═══════════════════════════════════════════════════════════ */

.esb-field {
    border-radius: 13px;
    padding: 10px 12px;
    box-sizing: border-box;
    background: var(--esb-surface);
    border: 1px solid var(--esb-lines-default);
    transition: border-color 0.15s, background 0.15s;
}

.esb-field:focus-within {
    border-color: rgba(var(--esb-primary-rgb), 0.55);
}

.esb-field--changed {
    background: rgba(var(--esb-primary-rgb), 0.08);
    border-color: var(--esb-primary);
}

.esb-field--error {
    border-color: var(--esb-error);
}

.esb-field-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--esb-text-secondary);
}

.esb-field-flag {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--esb-secondary);
}

.esb-field-hint {
    font-size: 10.5px;
    color: var(--esb-text-disabled);
    margin-top: 4px;
}

.esb-field-error {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--esb-error);
    margin-top: 4px;
}

.esb-input,
.esb-textarea,
.esb-select {
    width: 100%;
    margin-top: 5px;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    color: var(--esb-text-primary);
    font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.esb-input::placeholder,
.esb-textarea::placeholder {
    color: var(--esb-text-disabled);
    font-weight: 400;
}

.esb-textarea {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    resize: none;
}

.esb-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 18px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 6px center, right 1px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.esb-select option,
.esb-select optgroup {
    background: var(--esb-surface);
    color: var(--esb-text-primary);
}

/* Chrome peint lui-même le surlignage de l'option courante et ignore
   `background-color` seul : un dégradé plat le force à utiliser notre teinte. */
.esb-select option:checked,
.esb-select option:hover {
    background: var(--esb-primary) linear-gradient(0deg, var(--esb-primary) 0%, var(--esb-primary) 100%);
    color: var(--esb-primary-text);
}

/* Menu déroulant entièrement stylable (Chromium 148+). Là où il n'est pas
   disponible, on garde le menu natif rendu sombre par `color-scheme`. */
@supports (appearance: base-select) {
    .esb-select {
        appearance: base-select;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        border: none;
        background: transparent;
        background-image: none;
        color: var(--esb-text-primary);
        text-align: left;
    }

    .esb-select::picker-icon {
        margin-left: auto;
        color: var(--esb-text-secondary);
        scale: 0.78;
        transition: transform 0.18s ease;
    }

    .esb-select:open::picker-icon {
        transform: rotate(180deg);
    }

    .esb-select::picker(select) {
        appearance: base-select;
        margin-top: 6px;
        padding: 6px;
        background: var(--esb-surface);
        border: 1px solid var(--esb-lines-default);
        border-radius: 13px;
        box-shadow: var(--esb-shadow-2);
        color: var(--esb-text-primary);
        max-height: 320px;
        overflow-y: auto;
    }

    .esb-select option {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        border-radius: 9px;
        background: transparent;
        color: var(--esb-text-primary);
        font-size: 13.5px;
        cursor: pointer;
    }

    .esb-select option::checkmark {
        display: none;
    }

    .esb-select option:hover,
    .esb-select option:focus {
        background: var(--esb-action-hover);
        outline: none;
    }

    .esb-select option:checked {
        background: var(--esb-primary);
        color: var(--esb-primary-text);
        font-weight: 600;
    }
}

/* Date et heure : l'icône native suit color-scheme, pas de filtre à appliquer. */
.esb-input[type="date"]::-webkit-calendar-picker-indicator,
.esb-input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
}

.esb-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.esb-input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Interrupteur */
.esb-switch-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 13px;
    cursor: pointer;
    background: var(--esb-surface);
    border: 1px solid var(--esb-lines-default);
    transition: background 0.18s, border-color 0.18s;
}

.esb-switch-row--on {
    background: rgba(var(--esb-primary-rgb), 0.10);
    border-color: var(--esb-primary);
}

.esb-switch-main {
    flex: 1;
    min-width: 0;
}

.esb-switch-title {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
}

.esb-switch-hint {
    display: block;
    font-size: 10.5px;
    color: var(--esb-text-disabled);
    margin-top: 2px;
}

.esb-switch {
    flex: none;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    background: var(--esb-lines-default);
    transition: background 0.18s, justify-content 0.18s;
}

.esb-switch span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--esb-text-disabled);
    transition: background 0.18s;
}

.esb-switch--on {
    justify-content: flex-end;
    background: var(--esb-primary);
}

.esb-switch--on span {
    background: #fff;
}

/* Case à cocher */
.esb-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--esb-text-primary);
}

.esb-check input {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--esb-primary);
    cursor: pointer;
}

/* Champ de recherche */
.esb-search {
    flex: none;
    width: 230px;
    min-height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--esb-surface);
    border: 1px solid var(--esb-lines-default);
}

.esb-search:focus-within {
    border-color: rgba(var(--esb-primary-rgb), 0.55);
}

.esb-search-icon {
    flex: none;
    width: 17px;
    height: 17px;
    display: inline-flex;
    color: var(--esb-text-disabled);
}

.esb-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
    font-size: 12.5px;
    color: var(--esb-text-primary);
}

.esb-search-input::placeholder {
    color: var(--esb-text-disabled);
}

.esb-check-box {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--esb-primary);
    cursor: pointer;
}

.cfg-password-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cfg-password-row .esb-input {
    flex: 1;
    min-width: 0;
}

.esb-search--block {
    width: 100%;
}

.esb-form {
    display: block;
}

/* Contrôle segmenté */
.esb-seg {
    display: inline-flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--esb-lines-default);
}

.esb-seg-btn {
    min-height: 32px;
    padding: 0 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--esb-text-secondary);
    transition: background 0.15s, color 0.15s;
}

.esb-seg-btn + .esb-seg-btn {
    border-left: 1px solid var(--esb-lines-default);
}

.esb-seg-btn:hover {
    color: var(--esb-text-primary);
}

.esb-seg-btn--active {
    background: var(--esb-primary);
    color: #fff;
}

.esb-seg-btn--active-success {
    background: var(--esb-success);
    color: #fff;
}

.esb-seg-btn--active-error {
    background: var(--esb-error);
    color: #fff;
}

/* Typographie */
.esb-h3 {
    font-family: 'Barlow Condensed', Roboto, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
}

.esb-h5 {
    font-family: 'Barlow Condensed', Roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.esb-h6 {
    font-family: 'Barlow Condensed', Roboto, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.esb-subtitle1 { font-size: 1rem;     font-weight: 500; margin: 0; }
.esb-subtitle2 { font-size: 0.875rem; font-weight: 600; margin: 0; }
.esb-body1     { font-size: 1rem;     font-weight: 400; margin: 0; }
.esb-body2     { font-size: 0.875rem; font-weight: 400; margin: 0; }
.esb-caption   { font-size: 0.75rem;  font-weight: 400; margin: 0; }

.esb-tx-primary   { color: var(--esb-primary); }
.esb-tx-secondary { color: var(--esb-secondary); }
.esb-tx-success   { color: var(--esb-success); }
.esb-tx-error     { color: var(--esb-error); }
.esb-tx-warning   { color: var(--esb-secondary); }
.esb-tx-info      { color: var(--esb-primary-lighten); }
.esb-tx-muted     { color: var(--esb-text-secondary); }

.esb-vote-btn {
    min-width: 110px;
    justify-content: flex-start;
}

/* Empilements et grille — remplacent MudStack / MudGrid */
.esb-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.esb-stack--row {
    flex-direction: row;
    align-items: center;
}

.esb-ai-start   { align-items: flex-start; }
.esb-ai-center  { align-items: center; }
.esb-ai-end     { align-items: flex-end; }
.esb-ai-stretch { align-items: stretch; }
.esb-jc-center  { justify-content: center; }
.esb-jc-between { justify-content: space-between; }
.esb-jc-end     { justify-content: flex-end; }
.esb-wrap       { flex-wrap: wrap; }

.esb-gap-0 { gap: 0px; }
.esb-gap-1 { gap: 4px; }
.esb-gap-2 { gap: 8px; }
.esb-gap-3 { gap: 12px; }
.esb-gap-4 { gap: 16px; }
.esb-gap-5 { gap: 20px; }
.esb-gap-6 { gap: 24px; }
.esb-gap-7 { gap: 28px; }
.esb-gap-8 { gap: 32px; }
.esb-gap-9 { gap: 36px; }
.esb-gap-10 { gap: 40px; }

.esb-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.esb-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}

.esb-col { grid-column: span 12; min-width: 0; }
.esb-col-1 { grid-column: span 1; }
.esb-col-2 { grid-column: span 2; }
.esb-col-3 { grid-column: span 3; }
.esb-col-4 { grid-column: span 4; }
.esb-col-5 { grid-column: span 5; }
.esb-col-6 { grid-column: span 6; }
.esb-col-7 { grid-column: span 7; }
.esb-col-8 { grid-column: span 8; }
.esb-col-9 { grid-column: span 9; }
.esb-col-10 { grid-column: span 10; }
.esb-col-11 { grid-column: span 11; }
.esb-col-12 { grid-column: span 12; }

@media (min-width: 600px) {
    .esb-col-sm-1 { grid-column: span 1; }
    .esb-col-sm-2 { grid-column: span 2; }
    .esb-col-sm-3 { grid-column: span 3; }
    .esb-col-sm-4 { grid-column: span 4; }
    .esb-col-sm-5 { grid-column: span 5; }
    .esb-col-sm-6 { grid-column: span 6; }
    .esb-col-sm-7 { grid-column: span 7; }
    .esb-col-sm-8 { grid-column: span 8; }
    .esb-col-sm-9 { grid-column: span 9; }
    .esb-col-sm-10 { grid-column: span 10; }
    .esb-col-sm-11 { grid-column: span 11; }
    .esb-col-sm-12 { grid-column: span 12; }
}

/* Carte générique — remplace MudPaper */
.esb-card {
    background: var(--esb-surface);
    border: 1px solid var(--esb-lines-default);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.esb-card--flat {
    box-shadow: none;
}

/* Pastille d'initiales — remplace MudAvatar */
.esb-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--esb-primary-rgb), 0.14);
    color: var(--esb-primary-lighten);
    font-size: 0.85rem;
    font-weight: 700;
    overflow: hidden;
}

.esb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esb-avatar--sm {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
}

/* Indicateur circulaire — remplace MudProgressCircular */
.esb-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(var(--esb-primary-rgb), 0.25);
    border-top-color: var(--esb-primary);
    animation: esb-spin 0.7s linear infinite;
}

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

.esb-iconbtn--warning {
    color: var(--esb-secondary);
}

.esb-iconbtn--warning:hover {
    background: rgba(var(--esb-secondary-rgb), 0.14);
}

/* Jauge de valeur */
.esb-meter {
    flex: 1;
    min-width: 60px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(var(--esb-primary-rgb), 0.14);
}

.esb-meter span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--esb-primary);
}

.esb-meter--success span { background: var(--esb-success); }
.esb-meter--warning span { background: var(--esb-secondary); }
.esb-meter--error   span { background: var(--esb-error); }

/* Tableau en div — remplace MudTable */
.esb-tbl {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.esb-tbl-head,
.esb-tbl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--esb-lines-default);
}

.esb-tbl-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 16px;
    background: var(--esb-surface);
    border-bottom: 2px solid var(--esb-lines-default);
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--esb-text-secondary);
}

.esb-tbl-row:nth-child(even) {
    background: rgba(var(--esb-primary-rgb), 0.035);
}

.esb-tbl-row--click {
    cursor: pointer;
}

.esb-tbl-row--click:hover {
    background: rgba(var(--esb-primary-rgb), 0.08);
}

.esb-tbl-row--selected {
    background: rgba(var(--esb-primary-rgb), 0.12) !important;
    box-shadow: inset 2px 0 0 var(--esb-primary);
}

.esb-tbl-cell {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esb-tbl-cell--center {
    text-align: center;
    justify-content: center;
}

.esb-tbl-empty {
    padding: 26px 16px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--esb-text-secondary);
}

.esb-tbl-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.esb-tbl-sort:hover {
    color: var(--esb-text-primary);
}

.esb-container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
}

@media (min-width: 960px) {
    .esb-container {
        padding: 24px;
    }
}

.esb-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 56px;
}

/* ═══════════════════════════════════════════════════════════
   MODALES — reprise de « Modales CRUD ESB »
   ═══════════════════════════════════════════════════════════ */

.esb-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, 0.55);
}

.esb-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 1401;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
}

.esb-modal {
    pointer-events: auto;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--esb-surface);
    border: 1px solid var(--esb-lines-default);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.esb-modal--lg {
    max-width: 680px;
}

.esb-modal-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
}

.esb-modal-head-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--esb-primary-rgb), 0.14);
    color: var(--esb-primary);
}

.esb-modal-head-text {
    flex: 1;
    min-width: 0;
}

.esb-modal-title {
    font-family: 'Barlow Condensed', Roboto, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
}

.esb-modal-subtitle {
    font-size: 12px;
    color: var(--esb-text-secondary);
    margin-top: 2px;
}

.esb-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 20px 16px;
}

.esb-modal-foot {
    flex: none;
    display: flex;
    align-items: center;
    /* Quatre boutons (supprimer la série / cette occurrence / annuler / enregistrer)
       dépassent les 520 px de la modale : on autorise le retour à la ligne. Les
       actions destructrices restent à gauche, le groupe principal est poussé à
       droite par sa marge automatique, sur sa ligne quelle qu'elle soit. */
    flex-wrap: wrap;
    gap: 9px;
    padding: 14px 20px 20px;
    border-top: 1px solid var(--esb-lines-default);
}

.esb-modal-foot > .esb-btn {
    flex: none;
}

/* Groupe d'actions collé à droite, insécable au retour à la ligne. */
.esb-modal-actions {
    flex: none;
    display: flex;
    gap: 9px;
    margin-left: auto;
}

.esb-modal-footnote {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--esb-text-disabled);
}

/* Menu déroulant — remplace MudMenu */
.esb-dropdown {
    position: relative;
    display: inline-flex;
}

.esb-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.esb-dropdown-panel {
    position: absolute;
    z-index: 1201;
    min-width: 190px;
    padding: 6px;
    border-radius: 14px;
    background: var(--esb-surface);
    border: 1px solid var(--esb-lines-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.esb-dropdown-panel--below {
    top: calc(100% + 8px);
    right: 0;
}

/* Dans la barre latérale (overflow caché) : ancrage fixe */
.esb-dropdown-panel--above {
    position: fixed;
    left: 76px;
    bottom: 16px;
}

@media (max-width: 640px) {
    .esb-dropdown-panel--above {
        left: auto;
        right: 12px;
        bottom: auto;
        top: 64px;
    }
}

.esb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    text-decoration: none !important;
    font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    color: var(--esb-text-primary);
}

.esb-dropdown-item:hover {
    background: rgba(var(--esb-primary-rgb), 0.12);
}

/* Pastille de compteur */
.esb-dot-badge {
    position: relative;
    display: inline-flex;
}

.esb-dot-badge-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--esb-error);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.esb-dot-badge-count--secondary {
    background: var(--esb-secondary);
    color: var(--esb-secondary-text);
}

/* Messages éphémères — remplace ISnackbar */
.esb-toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
}

.esb-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    background: var(--esb-surface);
    border: 1px solid var(--esb-lines-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    animation: esb-toast-in 0.18s ease-out;
}

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

.esb-toast-icon {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    display: inline-flex;
}

.esb-toast-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--esb-text-primary);
}

.esb-toast-close {
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--esb-text-disabled);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.esb-toast-close:hover {
    color: var(--esb-text-primary);
}

.esb-toast--success { border-color: rgba(var(--esb-success-rgb), 0.55); }
.esb-toast--success .esb-toast-icon { color: var(--esb-success); }
.esb-toast--error   { border-color: rgba(var(--esb-error-rgb), 0.55); }
.esb-toast--error   .esb-toast-icon { color: var(--esb-error); }
.esb-toast--warning { border-color: rgba(var(--esb-secondary-rgb), 0.55); }
.esb-toast--warning .esb-toast-icon { color: var(--esb-secondary); }
.esb-toast--info    { border-color: rgba(var(--esb-primary-rgb), 0.55); }
.esb-toast--info    .esb-toast-icon { color: var(--esb-primary-lighten); }

/* ═══════════════════════════════════════════════════════════
   UTILITAIRES — reprise des classes MudBlazor encore employees
   (spacing sur la meme echelle : n * 4px)
   ═══════════════════════════════════════════════════════════ */

.pa-0 { padding: 0px; }
.mt-0 { margin-top: 0px; }
.mb-0 { margin-bottom: 0px; }
.ml-0 { margin-left: 0px; }
.mr-0 { margin-right: 0px; }
.my-0 { margin-top: 0px; margin-bottom: 0px; }
.mx-0 { margin-left: 0px; margin-right: 0px; }
.px-0 { padding-left: 0px; padding-right: 0px; }
.py-0 { padding-top: 0px; padding-bottom: 0px; }
.gap-0 { gap: 0px; }
.pa-1 { padding: 4px; }
.mt-1 { margin-top: 4px; }
.mb-1 { margin-bottom: 4px; }
.ml-1 { margin-left: 4px; }
.mr-1 { margin-right: 4px; }
.my-1 { margin-top: 4px; margin-bottom: 4px; }
.mx-1 { margin-left: 4px; margin-right: 4px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.gap-1 { gap: 4px; }
.pa-2 { padding: 8px; }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }
.ml-2 { margin-left: 8px; }
.mr-2 { margin-right: 8px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.gap-2 { gap: 8px; }
.pa-3 { padding: 12px; }
.mt-3 { margin-top: 12px; }
.mb-3 { margin-bottom: 12px; }
.ml-3 { margin-left: 12px; }
.mr-3 { margin-right: 12px; }
.my-3 { margin-top: 12px; margin-bottom: 12px; }
.mx-3 { margin-left: 12px; margin-right: 12px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.gap-3 { gap: 12px; }
.pa-4 { padding: 16px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.ml-4 { margin-left: 16px; }
.mr-4 { margin-right: 16px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.gap-4 { gap: 16px; }
.pa-5 { padding: 20px; }
.mt-5 { margin-top: 20px; }
.mb-5 { margin-bottom: 20px; }
.ml-5 { margin-left: 20px; }
.mr-5 { margin-right: 20px; }
.my-5 { margin-top: 20px; margin-bottom: 20px; }
.mx-5 { margin-left: 20px; margin-right: 20px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.gap-5 { gap: 20px; }
.pa-6 { padding: 24px; }
.mt-6 { margin-top: 24px; }
.mb-6 { margin-bottom: 24px; }
.ml-6 { margin-left: 24px; }
.mr-6 { margin-right: 24px; }
.my-6 { margin-top: 24px; margin-bottom: 24px; }
.mx-6 { margin-left: 24px; margin-right: 24px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.gap-6 { gap: 24px; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.fw-bold { font-weight: 700; }
.text-center { text-align: center; }
.d-flex { display: flex; }
.mud-text-secondary { color: var(--esb-text-secondary); }
.mud-text-disabled { color: var(--esb-text-disabled); }


/* ── Feuille remontant du bas et son voile ──────────────────
   Sept pages répétaient ces deux règles à l'identique. La bascule
   d'affichage reste à chaque page : elle dépend de son état de sélection. */
.esb-sheet-backdrop {
    display: none;
}

@media (max-width: 1160px) {
    .esb-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1290;
    }

    /* Seul l'ancrage est partagé. Rayon, ombre, hauteur maximale et défilement
       restent dans chaque page : sa règle de base les fixe déjà pour le mode deux
       colonnes, et `.xx-panel[b-...]` (0-2-0) l'emporte sur `.esb-sheet` (0-1-0).
       Mesuré : le panneau gardait ses coins arrondis en bas et son ombre de carte. */
    .esb-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1300;
    }
}

/* ── En-tête de page ────────────────────────────────────────
   Voir EsbPageHeader. Huit pages répétaient ces deux règles. */
.esb-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.esb-page-head-sub {
    font-size: 0.78rem;
    color: var(--esb-text-secondary);
    margin-top: 2px;
}

.esb-page-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Barre de présences ─────────────────────────────────────
   Voir EsbPresenceBar. Quatre pages répétaient ces trois règles. */
.esb-presbar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(var(--esb-primary-rgb), 0.10);
}

.esb-presbar-yes {
    background: var(--esb-primary);
}

.esb-presbar-no {
    background: var(--esb-text-disabled);
}