/*
 * ArwaConnect — Charte de couleurs (identique à arwaconnect-com)
 * Primaire   : #2d6eb6 (bleu)
 * Secondaire : #37b16b (vert)
 *
 * Ce fichier surcharge les variables Bootstrap 5.3 / Metronic
 * (style.bundle.css). À inclure APRÈS style.bundle.css dans chaque layout.
 */

:root,
[data-bs-theme=light] {
    /* Marque */
    --ac-primary: #2d6eb6;
    --ac-primary-dark: #255a95;
    --ac-primary-darker: #225288;
    --ac-primary-light: #eaf1f8;
    --ac-secondary: #37b16b;
    --ac-secondary-dark: #2d9158;
    --ac-secondary-darker: #298550;
    --ac-secondary-light: #ebf7f0;

    /* Bootstrap : couleurs de thème */
    --bs-primary: #2d6eb6;
    --bs-primary-rgb: 45, 110, 182;
    --bs-secondary: #37b16b;
    --bs-secondary-rgb: 55, 177, 107;

    /* Metronic : déclinaisons de la primaire */
    --bs-primary-active: #255a95;
    --bs-primary-light: #eaf1f8;
    --bs-primary-clarity: rgba(45, 110, 182, .2);
    --bs-primary-inverse: #ffffff;
    --bs-secondary-active: #2d9158;
    --bs-secondary-light: #ebf7f0;
    --bs-secondary-clarity: rgba(55, 177, 107, .2);
    --bs-secondary-inverse: #ffffff;

    /* Accentuations / subtiles (light) */
    --bs-primary-text-emphasis: #1b4675;
    --bs-primary-bg-subtle: #eaf1f8;
    --bs-primary-border-subtle: #b8d2ea;
    --bs-secondary-text-emphasis: #1e6b41;
    --bs-secondary-bg-subtle: #ebf7f0;
    --bs-secondary-border-subtle: #bfe6cf;

    /* Liens */
    --bs-link-color: #2d6eb6;
    --bs-link-color-rgb: 45, 110, 182;
    --bs-link-hover-color: #255a95;
    --bs-link-hover-color-rgb: 37, 90, 149;
}

[data-bs-theme=dark] {
    --bs-primary: #4d84c4;
    --bs-primary-rgb: 77, 132, 196;
    --bs-secondary: #37b16b;
    --bs-secondary-rgb: 55, 177, 107;

    --bs-primary-active: #2d6eb6;
    --bs-primary-light: #16283d;
    --bs-primary-clarity: rgba(77, 132, 196, .2);
    --bs-primary-inverse: #ffffff;
    --bs-secondary-active: #2d9158;
    --bs-secondary-light: #12281b;
    --bs-secondary-clarity: rgba(55, 177, 107, .2);
    --bs-secondary-inverse: #ffffff;

    --bs-primary-text-emphasis: #7ba7d4;
    --bs-primary-bg-subtle: #10233a;
    --bs-primary-border-subtle: #1e4670;
    --bs-secondary-text-emphasis: #6fce94;
    --bs-secondary-bg-subtle: #0f2b1b;
    --bs-secondary-border-subtle: #1e5c3a;

    --bs-link-color: #4d84c4;
    --bs-link-color-rgb: 77, 132, 196;
    --bs-link-hover-color: #6d9bd1;
    --bs-link-hover-color-rgb: 109, 155, 209;
}

/* ---------- Boutons ---------- */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ac-primary);
    --bs-btn-border-color: var(--ac-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ac-primary-dark);
    --bs-btn-hover-border-color: var(--ac-primary-dark);
    --bs-btn-focus-shadow-rgb: 45, 110, 182;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ac-primary-darker);
    --bs-btn-active-border-color: var(--ac-primary-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ac-primary);
    --bs-btn-disabled-border-color: var(--ac-primary);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ac-secondary);
    --bs-btn-border-color: var(--ac-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ac-secondary-dark);
    --bs-btn-hover-border-color: var(--ac-secondary-dark);
    --bs-btn-focus-shadow-rgb: 55, 177, 107;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ac-secondary-darker);
    --bs-btn-active-border-color: var(--ac-secondary-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ac-secondary);
    --bs-btn-disabled-border-color: var(--ac-secondary);
}

.btn-outline-primary {
    --bs-btn-color: var(--ac-primary);
    --bs-btn-border-color: var(--ac-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ac-primary);
    --bs-btn-hover-border-color: var(--ac-primary);
    --bs-btn-focus-shadow-rgb: 45, 110, 182;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ac-primary);
    --bs-btn-active-border-color: var(--ac-primary);
    --bs-btn-disabled-color: var(--ac-primary);
    --bs-btn-disabled-border-color: var(--ac-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ac-secondary);
    --bs-btn-border-color: var(--ac-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ac-secondary);
    --bs-btn-hover-border-color: var(--ac-secondary);
    --bs-btn-focus-shadow-rgb: 55, 177, 107;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ac-secondary);
    --bs-btn-active-border-color: var(--ac-secondary);
    --bs-btn-disabled-color: var(--ac-secondary);
    --bs-btn-disabled-border-color: var(--ac-secondary);
}

/* Boutons "light" utilisés dans les listes (admin/commercial) */
.btn-light-primary,
.btn-light-primary:focus {
    color: var(--ac-primary);
    background-color: var(--ac-primary-light);
    border-color: transparent;
}
.btn-light-primary:hover, .btn-light-primary:active {
    color: #fff;
    background-color: var(--ac-primary);
}

/* ---------- Texte / fonds ---------- */

.text-primary { color: var(--ac-primary) !important; }
.text-secondary { color: var(--ac-secondary) !important; }
.bg-primary { background-color: var(--ac-primary) !important; }
.bg-secondary { background-color: var(--ac-secondary) !important; }
.border-primary { border-color: var(--ac-primary) !important; }
.border-secondary { border-color: var(--ac-secondary) !important; }

.bg-light-primary { background-color: var(--ac-primary-light) !important; }
.bg-light-secondary { background-color: var(--ac-secondary-light) !important; }

.badge.bg-primary { background-color: var(--ac-primary) !important; }
.badge.bg-secondary { background-color: var(--ac-secondary) !important; }
.badge-light-primary { background-color: var(--ac-primary-light) !important; color: var(--ac-primary-dark) !important; }
.badge-light-secondary { background-color: var(--ac-secondary-light) !important; color: var(--ac-secondary-darker) !important; }

/* ---------- Formulaires ---------- */

.form-control:focus, .form-select:focus {
    border-color: var(--ac-primary);
    box-shadow: 0 0 0 .2rem rgba(45, 110, 182, .15);
}
.form-check-input:checked {
    background-color: var(--ac-primary);
    border-color: var(--ac-primary);
}
.form-check-input:focus {
    border-color: var(--ac-primary);
    box-shadow: 0 0 0 .2rem rgba(45, 110, 182, .15);
}

/* Formulaires « floating » — style commun */
.ac-form .form-floating > label { padding-left: 1rem; }
.ac-form .form-floating > .form-control,
.ac-form .form-floating > .form-select { border-radius: .65rem; }
.ac-form .form-floating > textarea.form-control { min-height: 100px; }
.ac-form .form-section {
    display: flex; align-items: center; gap: .5rem; margin: .25rem 0;
    color: var(--ac-primary-darker); font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .03em;
}
.ac-form .form-section .line { flex: 1; height: 1px; background: #e7ebf0; }

/* ---------- Titres de page ---------- */

.page-title { display: flex; flex-direction: column; min-width: 0; }
.page-title-text {
    margin: 0; font-weight: 700; font-size: 1.4rem; line-height: 1.2;
    color: #1b2a45; letter-spacing: -.01em;
}
.page-title-sub {
    margin-top: .15rem; color: #8a94a6; font-size: .85rem; font-weight: 500;
}

/* ---------- Navigation / composants ---------- */

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ac-primary);
}
.nav-link { color: var(--ac-primary); }
.nav-link:hover { color: var(--ac-primary-dark); }

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ac-primary);
}

.pagination {
    --bs-pagination-color: var(--ac-primary);
    --bs-pagination-hover-color: var(--ac-primary-dark);
    --bs-pagination-active-bg: var(--ac-primary);
    --bs-pagination-active-border-color: var(--ac-primary);
    --bs-pagination-focus-color: var(--ac-primary-dark);
}

.progress-bar { background-color: var(--ac-primary); }

.list-group {
    --bs-list-group-active-bg: var(--ac-primary);
    --bs-list-group-active-border-color: var(--ac-primary);
}

/* ---------- Cartes de statistiques (ac-stat-card) ---------- */

.ac-stat-card {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}
.ac-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.ac-stat-card__topbar {
    height: 4px;
    width: 100%;
}
.ac-stat-card--primary .ac-stat-card__topbar {
    background: linear-gradient(90deg, #1e3a5f, var(--ac-primary));
}
.ac-stat-card--success .ac-stat-card__topbar {
    background: linear-gradient(90deg, #10b981, #34d399);
}
.ac-stat-card--warning .ac-stat-card__topbar {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.ac-stat-card--danger .ac-stat-card__topbar {
    background: linear-gradient(90deg, #ef4444, #f87171);
}
.ac-stat-card--info .ac-stat-card__topbar {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}
.ac-stat-card--secondary .ac-stat-card__topbar {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
}
.ac-stat-card__body {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    gap: 1rem;
}
.ac-stat-card__icon {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.ac-stat-card--primary .ac-stat-card__icon {
    color: #1d4ed8;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}
.ac-stat-card--success .ac-stat-card__icon {
    color: #047857;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}
.ac-stat-card--warning .ac-stat-card__icon {
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.ac-stat-card--danger .ac-stat-card__icon {
    color: #b91c1c;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
}
.ac-stat-card--info .ac-stat-card__icon {
    color: #0369a1;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
}
.ac-stat-card--secondary .ac-stat-card__icon {
    color: #4b5563;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.ac-stat-card__content {
    flex-grow: 1;
    min-width: 0;
}
.ac-stat-card__label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    margin-bottom: .25rem;
}
.ac-stat-card__value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: #111827;
    margin-bottom: .25rem;
}
.ac-stat-card__hint {
    font-size: .8rem;
    color: #9ca3af;
}
.ac-stat-card__link {
    display: block;
    color: inherit;
    height: 100%;
}

/* ===== Layout shell & compatibilité Metronic (arwaconnect-com) ===== */

/* ---------- SECTION 1 — Layout shell (copie de arwaconnect-com) ---------- */

:root {
    --ac-sidebar-w: 240px;
    --ac-sidebar-w-mini: 64px;
    --ac-nav-icon-w: 1.25rem;
    --ac-header-h: 64px;
    --ac-muted: #6c757d;
    --ac-border: #e5e7eb;
}
* { box-sizing: border-box; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #f5f7fa;
    margin: 0;
    color: #1f2937;
}
a { text-decoration: none; }

/* Header */
.ac-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--ac-header-h);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; padding: 0 1.5rem;
    z-index: 1000;
}
.ac-header .ac-brand {
    font-weight: 700; color: var(--ac-primary); font-size: 1.1rem;
    display: flex; align-items: center; gap: .5rem;
}
.ac-header .ac-brand img { height: 38px; width: auto; }
.ac-header .ac-title { font-size: .95rem; color: var(--ac-muted); margin-left: 1.5rem; }
.ac-header .ac-user-menu { margin-left: auto; }

/* ============================== Sidebar ============================== */
.ac-sidebar {
    position: fixed; top: var(--ac-header-h); left: 0; bottom: 0;
    width: var(--ac-sidebar-w);
    background: #fff;
    border-right: 1px solid var(--ac-border);
    /* La sidebar est son propre conteneur de défilement : top+bottom
       fixent sa hauteur à viewport-header, et les menus longs
       défilent ici — jamais la page derrière. */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    /* Scrollbar neutre et discrète pour la rail */
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.ac-sidebar::-webkit-scrollbar { width: 6px; }
.ac-sidebar::-webkit-scrollbar-track { background: transparent; }
.ac-sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ---- Liens de navigation (raccourcis et sous-éléments de groupes) ---- */
.ac-sidebar .nav-link {
    display: flex; align-items: center; gap: .75rem;
    margin: 0 .75rem;
    padding: .5rem .75rem;
    color: #374151;
    font-size: .9rem;
    font-weight: 500;
    border-radius: .5rem;
    transition: background .15s ease, color .15s ease;
}
.ac-sidebar .nav-link:hover { background: #f3f4f6; color: var(--ac-primary); }
/* Pilule active : fond primaire clair + texte primaire gras, avec une
   barre d'accent gauche arrondie en box-shadow (inset), pour que
   l'activation d'un lien ne décale jamais la mise en page comme le
   faisait l'ancienne bordure droite. */
.ac-sidebar .nav-link.active {
    background: var(--ac-primary-light);
    color: var(--ac-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ac-primary);
}
.ac-sidebar .nav-link i {
    font-size: 1.05rem;
    width: var(--ac-nav-icon-w);
    text-align: center;
    flex-shrink: 0;
}
/* Les sous-éléments sont indentés pour aligner leurs libellés sous
   celui de l'en-tête du groupe (colonne d'icône + espace du titre). */
.ac-sidebar .nav-group-body .nav-link {
    padding-left: calc(var(--ac-nav-icon-w) + 1.25rem);
}

/* Focus clavier : anneau primaire visible sur liens et en-têtes de groupe. */
.ac-sidebar .nav-link:focus-visible,
.ac-sidebar .nav-group summary.nav-group-label:focus-visible {
    outline: 2px solid var(--ac-primary);
    outline-offset: -2px;
}

/* ---- En-têtes de groupes repliables (<details> summary) ---- */
.ac-sidebar .nav-group { display: block; }
.ac-sidebar .nav-group summary.nav-group-label {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border-radius: .5rem;
    margin: .1rem .75rem;
    padding: .5rem .75rem;
    color: #374151;
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.ac-sidebar .nav-group summary.nav-group-label::-webkit-details-marker { display: none; }
.ac-sidebar .nav-group summary.nav-group-label:hover {
    background: #f3f4f6;
    color: var(--ac-primary);
}
/* Un groupe dont la sous-liste contient la page active est teinté aussi. */
.ac-sidebar .nav-group details:has(.nav-link.active) > summary.nav-group-label {
    background: var(--ac-primary-light);
    color: var(--ac-primary);
    font-weight: 600;
}
/* Chevron : discret et petit, tourne de 90° à l'ouverture du groupe. */
.ac-sidebar .nav-group summary .bi-chevron-right {
    font-size: .7rem;
    color: var(--ac-muted);
    transition: transform .2s ease;
}
.ac-sidebar .nav-group details[open] > summary .bi-chevron-right { transform: rotate(90deg); }
/* L'icône de l'en-tête partage la colonne d'icônes des éléments pour
   que tout s'aligne ; le titre + le chevron se partagent la ligne. */
.ac-sidebar .nav-group summary .nav-group-heading {
    display: inline-flex; align-items: center; gap: .5rem;
    min-width: 0;
}
.ac-sidebar .nav-group summary .nav-group-heading i {
    font-size: .95rem;
    width: var(--ac-nav-icon-w);
    text-align: center;
    flex-shrink: 0;
}

/* Corps des groupes : ouverture/fermeture animée en grid-rows
   (amélioration progressive — sans JS, l'ouverture s'anime via la
   règle [open], la fermeture est immédiate ; le contenu n'est
   jamais déplacé). */
.ac-sidebar .nav-group details > .nav-group-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}
.ac-sidebar .nav-group details[open] > .nav-group-body { grid-template-rows: 1fr; }
.ac-sidebar .nav-group .nav-group-body > ul { min-height: 0; overflow: hidden; }

/* ---- Séparation des groupes ----
   Chaque groupe reçoit un filet fin au-dessus : entre deux groupes
   il fait séparateur, et au-dessus du premier il détache les liens
   de raccourci du haut du menu groupé. */
.ac-sidebar ul.nav > li:has(details[data-nav-group]) {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid var(--ac-border);
}
.ac-sidebar details[data-nav-group]:not(:first-of-type) { margin-top: .35rem; }

/* ---- En-têtes de section à lien unique (Espace client, Livraisons) :
   re-stylés pour ressembler visuellement aux labels de groupe (même
   graisse, couleur et padding que summary.nav-group-label), sans
   chevron ni repliable. ---- */
.ac-sidebar .ac-section {
    display: flex; align-items: center;
    margin: .1rem .75rem;
    padding: .5rem .75rem;
    color: #374151; font-size: .9rem; font-weight: 500;
}

/* Main content */
.ac-main {
    margin-left: var(--ac-sidebar-w);
    padding-top: calc(var(--ac-header-h) + 1rem);
    padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 2rem;
    min-height: 100vh;
}
@media (max-width: 991px) {
    .ac-sidebar { transform: translateX(-100%); transition: transform .2s; }
    .ac-sidebar.show { transform: translateX(0); }
    .ac-main { margin-left: 0; }
}

/* -------------------- Mini-rail desktop (sidebar réduite) -------------------- */
/* html.ac-nav-collapsed est basculée par le bouton #acSidebarToggle du
   header et pré-appliquée par un script inline dans <head> lisant
   localStorage, pour qu'un utilisateur régulier retrouve la rail
   réduite sans flash au chargement. En dessous du breakpoint lg, la
   sidebar fixe est masquée (translateX) et le mécanisme mobile
   (.show) est utilisé : chaque règle ci-dessous est scopée à
   .ac-sidebar ET limitée à ≥992px, pour ne JAMAIS fuiter sur mobile. */
@media (min-width: 992px) {
    .ac-sidebar { transition: width .25s ease; }
    .ac-main { transition: margin-left .25s ease; }

    html.ac-nav-collapsed .ac-sidebar { width: var(--ac-sidebar-w-mini); }
    html.ac-nav-collapsed .ac-main { margin-left: var(--ac-sidebar-w-mini); }

    /* Liens icône-seuls, centrés dans la rail ; la barre d'accent
       inset de l'état actif reste collée au bord de la rail. */
    html.ac-nav-collapsed .ac-sidebar .nav-link {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }
    html.ac-nav-collapsed .ac-sidebar .nav-link .nav-label { display: none; }

    /* Les en-têtes de groupe deviennent de simples icônes (les
       tooltips natifs sont gérés par le JS). */
    html.ac-nav-collapsed .ac-sidebar .nav-group summary.nav-group-label {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    html.ac-nav-collapsed .ac-sidebar .nav-group summary .nav-group-heading .nav-label,
    html.ac-nav-collapsed .ac-sidebar .nav-group summary .bi-chevron-right { display: none; }

    /* Les en-têtes de section à lien unique n'ont pas d'icône :
       ils sont masqués dans la rail. */
    html.ac-nav-collapsed .ac-sidebar .ac-section { display: none; }

    /* Un groupe ouvert s'affiche en panneau volant (flyout) à côté de
       la rail (le `top` est positionné par le gestionnaire de clic
       du JS). Le panneau est son propre conteneur de défilement
       pour qu'un groupe plus haut que le viewport reste accessible. */
    html.ac-nav-collapsed .ac-sidebar .nav-group details[open] > .nav-group-body {
        position: fixed;
        top: var(--ac-header-h);
        left: calc(var(--ac-sidebar-w-mini) + 6px);
        width: 220px;
        max-height: calc(100vh - var(--ac-header-h) - 16px);
        max-height: calc(100dvh - var(--ac-header-h) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        display: block;
        grid-template-rows: none;
        background: #fff;
        border: 1px solid var(--ac-border);
        border-radius: .5rem;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
        padding: .35rem 0;
        z-index: 1045;
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }
    html.ac-nav-collapsed .ac-sidebar .nav-group details[open] > .nav-group-body::-webkit-scrollbar { width: 6px; }
    html.ac-nav-collapsed .ac-sidebar .nav-group details[open] > .nav-group-body::-webkit-scrollbar-track { background: transparent; }
    html.ac-nav-collapsed .ac-sidebar .nav-group details[open] > .nav-group-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
    html.ac-nav-collapsed .ac-sidebar .nav-group details[open] > .nav-group-body > ul { overflow: visible; }
    /* Les éléments du flyout sont des pilules pleine largeur (sans
       indentation de sous-élément : l'en-tête du groupe n'est pas
       visible dans le panneau pour aligner dessous). */
    html.ac-nav-collapsed .ac-sidebar .nav-group details[open] > .nav-group-body .nav-link {
        justify-content: flex-start;
        gap: .75rem;
        padding-left: .75rem;
        padding-right: .75rem;
    }
    html.ac-nav-collapsed .ac-sidebar .nav-group details[open] > .nav-group-body .nav-label { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .ac-sidebar, .ac-main { transition: none !important; }
    .ac-sidebar .nav-link,
    .ac-sidebar .nav-group summary.nav-group-label,
    .ac-sidebar .nav-group summary .bi-chevron-right,
    .ac-sidebar .nav-group details > .nav-group-body { transition: none !important; }
}

/* Metronic compatibility — utility classes used in child templates */
.card-flush { border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; }
.fs-2hx { font-size: 2.5rem !important; }
.fs-base { font-size: .9rem !important; }
.lh-1 { line-height: 1 !important; }
.ls-n2 { letter-spacing: -.05em !important; }
.fw-bolder { font-weight: 800 !important; }
.text-gray-500 { color: #9ca3af !important; }
.text-gray-600 { color: #6b7280 !important; }
.text-gray-700 { color: #4b5563 !important; }
.text-gray-800 { color: #374151 !important; }
.text-gray-900 { color: #111827 !important; }
.bg-light-primary { background-color: var(--ac-primary-light) !important; }
.bg-light-success { background-color: #d1fae5 !important; }
.bg-light-warning { background-color: #fef3c7 !important; }
.bg-light-danger { background-color: #fee2e2 !important; }
.bg-light-info { background-color: #dbeafe !important; }
.badge-light-primary { background-color: var(--ac-primary-light) !important; color: var(--ac-primary-dark) !important; }
.badge-light-secondary { background-color: var(--ac-secondary-light) !important; color: var(--ac-secondary-darker) !important; }
.badge-light-success { background-color: #d1fae5 !important; color: #065f46 !important; }
.badge-light-warning { background-color: #fef3c7 !important; color: #92400e !important; }
.badge-light-danger { background-color: #fee2e2 !important; color: #991b1b !important; }
.badge-light-info { background-color: #dbeafe !important; color: #1e40af !important; }
/* Badges BS4-compat (badge-* et badge-outline utilises dans les templates,
   absents de Bootstrap 5 : sans ces regles le texte .badge reste blanc sur fond blanc) */
.badge-primary { background-color: var(--ac-primary) !important; color: #fff !important; }
.badge-secondary { background-color: var(--ac-secondary) !important; color: #fff !important; }
.badge-success { background-color: #198754 !important; color: #fff !important; }
.badge-danger { background-color: #dc3545 !important; color: #fff !important; }
.badge-warning { background-color: #ffc107 !important; color: #212529 !important; }
.badge-info { background-color: #0dcaf0 !important; color: #212529 !important; }
.badge-dark { background-color: #212529 !important; color: #fff !important; }
.badge-light { background-color: #f0f1f3 !important; color: #212529 !important; }
.badge.badge-outline { background-color: transparent !important; border: 1px solid currentColor !important; }
.badge.badge-outline.badge-primary { color: var(--ac-primary) !important; }
.badge.badge-outline.badge-secondary { color: var(--ac-secondary) !important; }
.badge.badge-outline.badge-success { color: #198754 !important; }
.badge.badge-outline.badge-danger { color: #dc3545 !important; }
.badge.badge-outline.badge-warning { color: #b8860b !important; }
.badge.badge-outline.badge-info { color: #0aa2c0 !important; }
.badge.badge-outline.badge-dark { color: #212529 !important; }
.badge.badge-outline.badge-light { color: #6c757d !important; }
.btn-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.symbol { display: inline-block; }
.symbol-40px { width: 40px; height: 40px; }
.symbol-50px { width: 50px; height: 50px; }
.bgi-no-repeat { background-repeat: no-repeat; }
.bgi-size-contain { background-size: contain; }
.bgi-position-x-end { background-position-x: right; }

/* Button + icon alignment */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn i { line-height: 1; vertical-align: middle; }
.btn.btn-icon { gap: 0; }
/* Links with icons in tables/cards */
a i, span i { vertical-align: -.125em; }
/* Hide any leftover ki-outline (no glyph available) */
i.ki-outline:not(.bi) { display: none; }

/* Search input with floating icon (used in client/product list & POS) */
.ps-10 { padding-left: 2.5rem !important; }
.position-relative > i.bi-search.position-absolute {
    left: .85rem;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--ac-muted);
    pointer-events: none;
    font-size: 1rem;
    margin: 0 !important;
    z-index: 4;
}
/* Larger icon for empty-state */
.fs-3x { font-size: 3rem !important; }
.text-gray-400 { color: #9ca3af !important; }

/* Cards & tables */
.card { border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.card-header { background: transparent; border-bottom: 1px solid #e5e7eb; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.card-header:has(> .card-toolbar) { justify-content: space-between; }
.card-body { padding: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; background: transparent; border-top: 1px solid #e5e7eb; }
.card-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.card + .card { margin-top: 1.5rem; }
.table thead th { background: #f9fafb; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ac-muted); font-weight: 600; }
.form-control, .form-select { border-color: #d1d5db; }
.form-control:focus, .form-select:focus { border-color: var(--ac-primary); box-shadow: 0 0 0 .15rem rgba(45,110,182,.15); }

/* ---------- SECTION 2 — Utilitaires Metronic complémentaires ----------
   Valeurs relevées dans assets/css/style.bundle.css (thème clair) et
   limitées aux classes réellement présentes dans templates/**/*.twig.
   Cette section suit la section 1 : en cas de doublon, ces règles
   (fidèles au rendu Metronic actuel) prévalent. */

/* Tailles de police (style.bundle.css) */
.fs-1 { font-size: calc(1.3rem + 0.6vw) !important; }
.fs-2 { font-size: calc(1.275rem + 0.3vw) !important; }
.fs-3 { font-size: calc(1.26rem + 0.12vw) !important; }
.fs-4 { font-size: 1.25rem !important; }
.fs-5 { font-size: 1.15rem !important; }
.fs-6 { font-size: 1.075rem !important; }
.fs-7 { font-size: 0.95rem !important; }
.fs-8 { font-size: 0.85rem !important; }
.fs-base { font-size: 1rem !important; }
.fs-2x { font-size: calc(1.325rem + 0.9vw) !important; }
.fs-2qx { font-size: calc(1.35rem + 1.2vw) !important; }
.fs-2hx { font-size: calc(1.375rem + 1.5vw) !important; }
.fs-2tx { font-size: calc(1.4rem + 1.8vw) !important; }
.fs-3x { font-size: calc(1.425rem + 2.1vw) !important; }
.fs-4x { font-size: calc(1.525rem + 3.3vw) !important; }
.fs-5x { font-size: calc(1.625rem + 4.5vw) !important; }
/* Graisses Metronic (fw-bold=600, fw-semibold=500, fw-bolder=700) :
   fw-semibold diffère de Bootstrap 5.3 (600) — fidélité au rendu actuel. */
.fw-semibold { font-weight: 500 !important; }
.fw-bolder { font-weight: 700 !important; }

/* Palette grise Metronic (thème clair, variables --bs-text-gray-* /
   --bs-gray-* de style.bundle.css) — écrase les équivalents de la
   section 1 pour rester fidèle au rendu actuel. */
.text-gray-100 { color: #F9F9F9 !important; }
.text-gray-200 { color: #F1F1F4 !important; }
.text-gray-300 { color: #DBDFE9 !important; }
.text-gray-400 { color: #C4CADA !important; }
.text-gray-500 { color: #99A1B7 !important; }
.text-gray-600 { color: #78829D !important; }
.text-gray-700 { color: #4B5675 !important; }
.text-gray-800 { color: #252F4A !important; }
.text-gray-900 { color: #071437 !important; }
.bg-gray-100 { background-color: #F9F9F9 !important; }
.bg-gray-400 { background-color: #C4CADA !important; }
.bg-gray-500 { background-color: #99A1B7 !important; }

/* Dimensions fixes (px) — valeurs trouvées dans les templates */
.w-5px { width: 5px !important; }
.w-15px { width: 15px !important; }
.w-40px { width: 40px !important; }
.w-45px { width: 45px !important; }
.w-50px { width: 50px !important; }
.w-100px { width: 100px !important; }
.w-125px { width: 125px !important; }
.w-150px { width: 150px !important; }
.w-200px { width: 200px !important; }
.w-250px { width: 250px !important; }
.w-275px { width: 275px !important; }
.h-2px { height: 2px !important; }
.h-3px { height: 3px !important; }
.h-8px { height: 8px !important; }
.h-10px { height: 10px !important; }
.h-15px { height: 15px !important; }
.h-25px { height: 25px !important; }
.h-40px { height: 40px !important; }
.h-50px { height: 50px !important; }
.h-55px { height: 55px !important; }
.min-w-50px { min-width: 50px !important; }
.min-w-60px { min-width: 60px !important; }
.min-w-75px { min-width: 75px !important; }
.min-w-80px { min-width: 80px !important; }
.min-w-100px { min-width: 100px !important; }
.min-w-120px { min-width: 120px !important; }
.min-w-125px { min-width: 125px !important; }
.min-w-150px { min-width: 150px !important; }
.min-w-200px { min-width: 200px !important; }
.min-w-250px { min-width: 250px !important; }
.min-w-300px { min-width: 300px !important; }
.mh-450px { max-height: 450px !important; }

/* Espacements > 5 (Bootstrap s'arrête à 5 ; échelle Metronic 0.25rem/pas) */
.pt-6 { padding-top: 1.5rem !important; }
.pt-7 { padding-top: 1.75rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pt-9 { padding-top: 2.25rem !important; }
.pt-10 { padding-top: 2.5rem !important; }
.pt-12 { padding-top: 3rem !important; }
.pb-7 { padding-bottom: 1.75rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-7 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-15 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-9 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }
.px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.ps-6 { padding-left: 1.5rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-7 { margin-top: 1.75rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-7 { margin-bottom: 1.75rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-9 { margin-bottom: 2.25rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-11 { margin-bottom: 2.75rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mb-15 { margin-bottom: 3.75rem !important; }
.mb-20 { margin-bottom: 5rem !important; }
.my-7 { margin-top: 1.75rem !important; margin-bottom: 1.75rem !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.mx-10 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }
.me-6 { margin-right: 1.5rem !important; }
.gap-6 { gap: 1.5rem !important; }

/* Symbol (avatars initiales / images) */
.symbol { display: inline-block; flex-shrink: 0; position: relative; border-radius: .85rem; }
.symbol .symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #252F4A;
    background-color: #F9F9F9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: .65rem;
}
.symbol > img { width: 50px; height: 50px; }
.symbol.symbol-circle,
.symbol.symbol-circle > img,
.symbol.symbol-circle .symbol-label { border-radius: 50%; }
.symbol-25px { width: 25px !important; height: 25px !important; }
.symbol-30px { width: 30px !important; height: 30px !important; }
.symbol-35px { width: 35px !important; height: 35px !important; }
.symbol-40px { width: 40px !important; height: 40px !important; }
.symbol-45px { width: 45px !important; height: 45px !important; }
.symbol-50px { width: 50px !important; height: 50px !important; }
.symbol-60px { width: 60px !important; height: 60px !important; }
.symbol-65px { width: 65px !important; height: 65px !important; }
.symbol-80px { width: 80px !important; height: 80px !important; }
.symbol-100px { width: 100px !important; height: 100px !important; }

/* Badges soft complémentaires (primary/secondary déjà en section 1) */
.badge-light-dark { background-color: #F9F9F9 !important; color: #1E2129 !important; }

/* Fonds soft complémentaires (primary/secondary déjà dans le fichier) */
.bg-light-dark { background-color: #F9F9F9 !important; }

/* Boutons soft complémentaires (même structure que .btn-light-primary) :
   fond clair + texte couleur, survol vers la couleur pleine. */
.btn-light-secondary, .btn-light-secondary:focus {
    color: var(--ac-secondary);
    background-color: var(--ac-secondary-light);
    border-color: transparent;
}
.btn-light-secondary:hover, .btn-light-secondary:active {
    color: #fff;
    background-color: var(--ac-secondary);
}
.btn-light-success, .btn-light-success:focus {
    color: #00A261;
    background-color: #DFFFEA;
    border-color: transparent;
}
.btn-light-success:hover, .btn-light-success:active {
    color: #fff;
    background-color: #00A261;
}
.btn-light-info, .btn-light-info:focus {
    color: #883FFF;
    background-color: #F8F5FF;
    border-color: transparent;
}
.btn-light-info:hover, .btn-light-info:active {
    color: #fff;
    background-color: #883FFF;
}
.btn-light-warning, .btn-light-warning:focus {
    color: #F6C000;
    background-color: #FFF8DD;
    border-color: transparent;
}
.btn-light-warning:hover, .btn-light-warning:active {
    color: #fff;
    background-color: #F6C000;
}
.btn-light-danger, .btn-light-danger:focus {
    color: #F8285A;
    background-color: #FFEEF3;
    border-color: transparent;
}
.btn-light-danger:hover, .btn-light-danger:active {
    color: #fff;
    background-color: #F8285A;
}
.btn-light-dark, .btn-light-dark:focus {
    color: #1E2129;
    background-color: #F9F9F9;
    border-color: transparent;
}
.btn-light-dark:hover, .btn-light-dark:active {
    color: #fff;
    background-color: #1E2129;
}

/* Boutons à état actif clair : l'état .active reçoit le fond soft + la
   couleur (comportement data-kt-buttons / .btn-active de Metronic). */
.btn-active-light-primary.active, .btn-active-light-primary.show {
    color: var(--ac-primary) !important;
    background-color: var(--ac-primary-light) !important;
    border-color: transparent !important;
}
.btn-active-light-secondary.active, .btn-active-light-secondary.show {
    color: var(--ac-secondary) !important;
    background-color: var(--ac-secondary-light) !important;
    border-color: transparent !important;
}
.btn-active-light-success.active, .btn-active-light-success.show {
    color: #00A261 !important;
    background-color: #DFFFEA !important;
    border-color: transparent !important;
}
.btn-active-light-info.active, .btn-active-light-info.show {
    color: #883FFF !important;
    background-color: #F8F5FF !important;
    border-color: transparent !important;
}
.btn-active-light-warning.active, .btn-active-light-warning.show {
    color: #F6C000 !important;
    background-color: #FFF8DD !important;
    border-color: transparent !important;
}
.btn-active-light-danger.active, .btn-active-light-danger.show {
    color: #F8285A !important;
    background-color: #FFEEF3 !important;
    border-color: transparent !important;
}

/* Couleurs de bouton */
.btn-color-gray-600 { color: #78829D !important; }
.btn-color-gray-600 i { color: #78829D !important; }
.btn-active-color-primary.active, .btn-active-color-primary.show { color: var(--ac-primary) !important; }
.btn-active-color-primary.active i, .btn-active-color-primary.show i { color: var(--ac-primary) !important; }
.btn-active-color-warning.active, .btn-active-color-warning.show { color: #F6C000 !important; }
.btn-active-color-warning.active i, .btn-active-color-warning.show i { color: #F6C000 !important; }
.btn-active-color-danger.active, .btn-active-color-danger.show { color: #F8285A !important; }
.btn-active-color-danger.active i, .btn-active-color-danger.show i { color: #F8285A !important; }

/* États hover / active de texte */
.text-hover-primary { transition: color .2s ease; }
.text-hover-primary i { transition: color .2s ease; }
.text-hover-primary:hover { color: var(--ac-primary) !important; }
.text-hover-primary:hover i { color: var(--ac-primary) !important; }
.text-active-primary { transition: color .2s ease; }
.text-active-primary i { transition: color .2s ease; }
.text-active-primary.active { color: var(--ac-primary) !important; }
.text-active-primary.active i { color: var(--ac-primary) !important; }

/* Flex helpers */
.flex-stack { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-right { display: flex; justify-content: flex-end; }

/* Divers */
.fv-row { margin-bottom: 1rem; }
.separator { display: block; height: 0; border-bottom: 1px solid #F1F1F4; }
.separator.separator-dashed { border-bottom-style: dashed; border-bottom-color: #DBDFE9; }
.bullet {
    display: inline-block;
    background-color: #C4CADA;
    border-radius: 6px;
    width: 8px;
    height: 4px;
    flex-shrink: 0;
}
.bullet.bullet-dot { width: 4px; height: 4px; border-radius: 100% !important; }

/* Tables : lignes pointillées / teintées */
.table:not(.table-bordered).table-row-dashed tr {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #F1F1F4;
}
.table:not(.table-bordered).table-row-gray-100 tr { border-bottom-color: #F9F9F9; }
.table:not(.table-bordered).table-row-gray-300 tr { border-bottom-color: #DBDFE9; }

/* Champs « solid » (fond gris clair) */
.form-control.form-control-solid {
    background-color: #F9F9F9;
    border-color: #F9F9F9;
    color: #4B5675;
}
.form-control.form-control-solid::placeholder { color: #99A1B7; }
.form-control.form-control-solid:focus,
.form-control.form-control-solid.active {
    background-color: #F1F1F4;
    border-color: #F1F1F4;
    color: #4B5675;
}
.form-select.form-select-solid {
    background-color: #F9F9F9;
    border-color: #F9F9F9;
    color: #4B5675;
}
.form-select.form-select-solid:focus,
.form-select.form-select-solid.active {
    background-color: #F1F1F4;
    border-color: #F1F1F4;
    color: #4B5675;
}

/* Nav pills « custom » (bordure pointillée arrondie) */
.nav.nav-pills.nav-pills-custom .nav-link,
.nav.nav-pills.nav-pills-custom .show > .nav-link {
    border: 1px dashed #DBDFE9;
    border-radius: 1rem;
}

/* Compatibilité résidus Metronic (balayage 2026-09) */
.border-gray-300 { border-color: #DBDFE9 !important; }
.rotate-180 { transform: rotate(180deg); }
.rotate { transition: transform .3s; }

/* Utilitaires Metronic complémentaires (unification visuelle 2026-09) */
.card-toolbar { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.bgi-position-y-center { background-position-y: center; }
.bgi-size-cover { background-size: cover; }
.bgi-position-center { background-position: center; }
@media (min-width: 768px) {
    .h-md-100 { height: 100% !important; }
}
@media (min-width: 1200px) {
    .me-xl-15 { margin-right: 3.75rem; }
}
@media (min-width: 992px) {
    .flex-lg-row-fluid { flex: 1 auto; }
}

/* Défilement */
.scroll-y, .hover-scroll-y { overflow-y: scroll; position: relative; }
@media (max-width: 991.98px) {
    .scroll-y, .hover-scroll-y { overflow-y: auto; }
}
@media (min-width: 992px) {
    /* Compense la largeur de la scrollbar (5px dans le bundle) */
    .scroll-lg-ps { padding-left: 5px !important; }
}

/* ===== Fragments d'extraction (vague swarm) =====
   Styles extraits des attributs style="..." inline des templates Twig
   par les agents de la vague d'unification visuelle (2026-09), puis
   fusionnés ici. Les doublons inter-fragments sont regroupés en une
   seule règle ; les déclarations en conflit gardent la version la plus
   forte (ex. .ac-border-soft avec !important). */

/* ---------- Fragment event-ticket-create
   (event_ticket/create-{cc,dv,ea,rc,rf}-*.twig — barres de progression) */

/* Barres de progression fines (avancement des actions) */
.ac-progress-thin {
    height: 8px;
    min-width: 60px;
}

/* ---------- Fragment dash-capa-comments
   (dash_capa / dash_cc / dash_deviations, commentaires, CAPA) */

/* Overlay de chargement des dashboards.
   Le JS affiche l'overlay via element.style.display = 'flex', qui prime
   toujours sur la classe (display:none état initial). Ne pas utiliser
   !important ici. */
.ac-dashboard-loading {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Grand spinner de l'overlay de chargement */
.ac-spinner-lg {
    width: 3rem;
    height: 3rem;
}
.ac-dashboard-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Conteneurs de graphiques (ApexCharts) — hauteur 250px par défaut */
.ac-chart {
    width: 100%;
    height: 250px;
}

/* Hauteurs alternatives des conteneurs de graphiques */
.ac-chart-300 { height: 300px; }
.ac-chart-350 { width: 100%; height: 350px; }
.ac-chart-400 { width: 100%; height: 400px; }
.ac-chart-600 { height: 600px; }

/* Pastille numérotée 28×28 (étapes du formulaire) */
.ac-badge-circle-28 {
    width: 28px;
    height: 28px;
}

/* ---------- Fragment admin-crud
   (produit, event_ticket_product / audit_type / change_reason) */

/* Champ de recherche des filtres de liste (ex-style="width: 220px;") */
.ac-search-input {
    width: 220px !important;
}

/* Sélecteur de catégorie des filtres (ex-style="width: 180px;") */
.ac-filter-select {
    width: 180px !important;
}

/* Sélecteur "éléments par page" (ex-style="width: 90px;") */
.ac-per-page-select {
    width: 90px !important;
}

/* Input d'édition inline du prix
   Le `display: inline-block` reste nécessaire quand la classe `d-none`
   est retirée. */
.ac-price-input {
    width: 130px !important;
    display: inline-block;
}

/* ---------- Fragment ged (templates/ged/**) */

/* Historique de chat IA : zone scrollable de hauteur fixe */
.ac-chat-history {
    height: 480px;
    overflow-y: auto;
}

/* Zone de saisie du chat IA : textarea auto-redimensionné par le JS,
   sans poignée de redimensionnement manuel */
.ac-chat-input {
    resize: none;
    max-height: 200px;
}

/* Masquage initial du visualiseur PDF et de ses contrôles.
   Le JS révèle ces éléments via element.style.display (priorité inline
   sur la feuille) : ne pas utiliser !important. */
.ac-pdf-hidden {
    display: none;
}

/* Référence code-barres tronquée dans le tableau des versions */
.ac-barcode-ref {
    max-width: 120px;
}

/* Hauteur du visualiseur PDF intégré */
.ac-pdf-viewer {
    height: 600px;
}

/* ---------- Fragment base-users
   (base, user / user_profile / account / acl / ai_system_prompt /
   mcp_debug / home / security / legal) */

.pdfobject-container { height: 500px; border: 1px solid #ccc; }

/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #2d6eb6 0%, #1e3a5f 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
#splash-screen.fade-out { opacity: 0; visibility: hidden; }
#splash-screen .splash-logo { width: 180px; margin-bottom: 30px; animation: pulse 2s ease-in-out infinite; }
#splash-screen .splash-spinner {
    width: 50px; height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
#splash-screen .splash-text { color: #fff; font-size: 14px; margin-top: 20px; font-weight: 500; letter-spacing: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Modale de confirmation (#acConfirmModal) */
.ac-confirm-content { border-radius: 14px; }
.ac-confirm-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eaf1f8;
}

/* home/index.html.twig */
.ac-logo-hero { max-width: 200px; }
.ac-hero-grid { max-width: 1000px; }

/* security/access_denied.html.twig */
.ac-access-denied-icon { font-size: 100px; }
.ac-access-denied-title { font-size: 2.5rem; }
.ac-auth-aside { background-color: #f1f1f2; }

/* legal/base.html.twig */
.ac-legal-container { max-width: 900px; }

/* ---------- Fragment documentation (documentation/ged + utilisateurs) */

/* Timeline verticale. Chaque .timeline-item porte une icône
   .timeline-icon (symbol 40px) ancrée à gauche, une ligne verticale
   .timeline-line sous l'icône, et un contenu .timeline-content décalé.
   Le dernier item n'a pas de ligne. */
.timeline-item {
    position: relative;
    padding-left: 3.5rem;
}
.timeline-icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.timeline-line {
    position: absolute;
    top: 2.75rem;
    bottom: 0.5rem;
    left: 1.1875rem;
    border-left: 2px dashed var(--bs-gray-300, #DBDFE9);
}
.timeline-content {
    min-width: 0;
}

/* ---------- Règles partagées entre plusieurs fragments
   (doublons regroupés — une seule déclaration par règle) */

/* Prix cliquable en édition inline, labels checkbox, summary <details>
   (ex-style="cursor: pointer") */
.ac-cursor-pointer { cursor: pointer; }

/* Bordure douce des cartes de stats / de configuration
   (gris #e5e7eb historique) — version !important conservée. */
.ac-border-soft {
    border-color: #e5e7eb !important;
}

/* Breadcrumbs sans séparateur (ex-style="--bs-breadcrumb-divider:''") —
   les séparateurs visuels sont des <span class="bullet"> manuels entre
   les items. Les deux noms coexistent dans les templates. */
.ac-breadcrumb-no-divider,
.ac-breadcrumb-plain {
    --bs-breadcrumb-divider: '';
}

/* ---------- Compatibilité tables Metronic (gs-0)
   style.bundle.css n'est pas chargé par les layouts : les quelques
   tables gardant la classe gs-0 (gutter 0 sur premières/dernières
   cellules) sont couvertes ici. Règle reprise du bundle. */
.table.gs-0 th:first-child, .table.gs-0 td:first-child {
    padding-left: 0;
}
.table.gs-0 th:last-child, .table.gs-0 td:last-child {
    padding-right: 0;
}

/* ---------- Page d'accueil (sélecteur de modules, home/index) ---------- */
.module-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
}
.module-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}
.module-card .card-body { padding: 2.5rem 2rem; }
.module-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 40px;
}
.module-card.disabled {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(100%);
}
.module-card.disabled:hover { transform: none; box-shadow: none; }

/* Tuiles du modal "Changer de module" (header) */
.module-icon-sm {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ac-module-tile { transition: all .15s ease; }
.ac-module-tile:hover { background: var(--ac-primary-light); border-color: var(--ac-primary) !important; }
.ac-module-tile.active { background: var(--ac-primary-light); border-color: var(--ac-primary) !important; }
.ac-module-tile.disabled { opacity: .45; cursor: not-allowed; }