/* ==========================================================================
   0. DESIGN TOKENS — charte Soodain (oklch), alignée sur
      ecommerce/templates/partials/_design_tokens.html (page d'accueil)
   ========================================================================== */
:root {
    --ink: oklch(20% 0.02 50);
    --ink-soft: oklch(40% 0.025 50);
    --ink-faint: oklch(55% 0.02 50);
    --paper: oklch(97.5% 0.012 80);
    --paper-deep: oklch(93.5% 0.02 75);
    --card: oklch(99% 0.006 80);
    --night: oklch(19% 0.025 260);
    --night-text: oklch(93% 0.01 90);
    --night-text-soft: oklch(72% 0.02 90);
    --line: oklch(20% 0.02 50 / 12%);
    --line-2: oklch(20% 0.02 50 / 7%);
    --line-dark: oklch(97% 0.01 80 / 14%);
    --accent: oklch(70% 0.16 45);
    --accent-strong: oklch(54% 0.16 45);
    --accent-soft: oklch(70% 0.16 45 / 14%);
    --accent-2: oklch(70% 0.16 165);
    --accent-2-strong: oklch(52% 0.15 165);
    --accent-2-soft: oklch(70% 0.16 165 / 14%);
    --shadow-sm: 0 1px 2px oklch(20% 0.02 50 / 6%), 0 1px 1px oklch(20% 0.02 50 / 4%);
    --shadow-md: 0 12px 28px oklch(20% 0.02 50 / 10%);
    --shadow-lg: 0 24px 60px oklch(20% 0.02 50 / 16%);
    --radius: 20px;
    --radius-admin: 14px;
    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --transition: all .2s ease;
    --danger: oklch(56% 0.19 25);
    --danger-soft: oklch(56% 0.19 25 / 10%);
    /* Alias rétrocompatible : consommé par mobile_adminv4.js (.menu-item-custom.is-active) */
    --primary: var(--accent-2-strong);
}

body, .app-content, .card, table, input, select, textarea, .btn, .form-control {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5,
.card-title, .brand-text, .dashboard-title, .login-box-msg {
    font-family: var(--font-display);
}


/* ==========================================================================
   1. STRUCTURE, LOGOS ET HEADER
   ========================================================================== */

/* Styles pour les logos de connexion et de marque */
.login-logo img { max-height: 124px !important; width: auto !important; }
.brand-link img { max-height: 40px !important; width: auto !important; }

/* Suppression de la bordure inférieure du header principal */
.app-header { border-bottom: none !important; }

/* Header fixe (ordi + mobile). Jazzmin 3 traduit "navbar_fixed" en classe
   AdminLTE 3 "layout-navbar-fixed", inconnue d'AdminLTE 4 : on applique
   donc directement l'équivalent de ".fixed-header .app-header". */
body:not(.popup) .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
}

/* Fix fond du header : bg-body (blanc) est toujours injecté par Jazzmin 3 et écrase bg-info.
   On force la couleur "night" directement via l'ID. */
#jazzy-navbar {
    background-color: var(--night) !important;
}

/* Hover / focus sur les boutons du header */
#jazzy-navbar .nav-link,
#jazzy-navbar .navbar-brand {
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 8px;
}

#jazzy-navbar .nav-link:hover,
#jazzy-navbar .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--night-text) !important;
}

#jazzy-navbar .navbar-brand:hover {
    opacity: 0.85;
}

/* Bouton loupe de la recherche du header : icône claire sur fond night (sinon invisible) */
#jazzy-navbar .btn-navbar,
#jazzy-navbar .btn-navbar i {
    color: var(--night-text) !important;
    opacity: 1 !important;
}
#jazzy-navbar .btn-navbar {
    background-color: transparent !important;
    border-color: var(--line-dark) !important;
}
#jazzy-navbar .btn-navbar:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Sidebar (structure AdminLTE3 : .main-sidebar / .brand-link / .sidebar-menu).
   Jazzmin 3 ne pose ni "sidebar-dark-primary" sur le <body> ni ".nav-sidebar"
   sur le menu (la classe réelle du <ul> racine est ".sidebar-menu", confirmé
   en inspectant le DOM rendu) — les sélecteurs basés sur ces suppositions ne
   matchaient donc jamais rien ; on cible directement .sidebar-menu. */
.main-sidebar,
.main-sidebar .brand-link {
    background-color: var(--night) !important;
    border: none !important;
}

.sidebar-menu > .nav-item > .nav-link,
.sidebar-menu .nav-treeview > .nav-item > .nav-link {
    color: var(--night-text-soft) !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* L'indentation AdminLTE de base pour les sous-menus est trop discrète
   pour qu'on distingue au premier coup d'œil un enfant (ex : "Commandes
   FOU" sous "Achats") d'un item de premier niveau : on la renforce. */
.sidebar-menu .nav-treeview > .nav-item > .nav-link {
    padding-left: 3rem !important;
}

.sidebar-menu > .nav-item > .nav-link:hover,
.sidebar-menu > .nav-item > .nav-link.active,
.sidebar-menu .nav-treeview > .nav-item > .nav-link:hover,
.sidebar-menu .nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(255, 255, 255, 0.09) !important;
    color: var(--night-text) !important;
}

/* Styles généraux des cartes */
.card {
    border-radius: var(--radius-admin) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 20px;
    border: none !important;
}

/* Styles des boutons */
.btn {
    border-radius: 999px !important;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

/* Prévention du débordement horizontal */
html, body {
    /* clip (et non hidden) : hidden fait de <body> un conteneur de défilement,
       ce qui casse le position: sticky du header. */
    overflow-x: hidden !important;
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100vw !important; /* Empêche le corps de s'élargir au dézoom */
    position: relative;
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
}


/* ==========================================================================
   2. RECHERCHE ET ACTIONS
   ========================================================================== */

/* Conteneur des filtres de liste */
#change-list-filters {
    background: var(--card) !important;
    padding: 5px !important;
    border-radius: var(--radius-admin) !important;
    border: 0px solid var(--line) !important;
    margin-bottom: 5px !important;
    width: 100% !important;
}

/* Conteneur de recherche */
#changelist-search {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
}

/* Bouton de soumission de recherche */
#changelist-search button[type="submit"].btn-primary {
    height: 36px !important;
    font-size: 0.9rem !important;
    border-radius: 999px !important;
    border-color: var(--accent-2-strong) !important;
    box-shadow: var(--shadow-sm) !important;
    background-color: var(--accent-2-strong) !important;
}

/* Groupes de formulaire */
#changelist-search .form-group {
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left : 10px !important
}

/* Barre de recherche */
#searchbar {
    border: 1px solid var(--accent-2) !important;
    border-radius: 20px !important;
    padding-left: 0px;
    height: 38px !important;
    font-size: 0.9rem !important;
}

/* Conteneur des actions */
.change-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--card);
    padding: 12px;
    border-radius: var(--radius-admin);
    border-left: 3px solid var(--accent-2-strong);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    margin-left:  3px !important;
    margin-right:  0px !important;
    border-right: 3px solid var(--accent-2-strong);
}

/* Section actions */
.actions {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* Labels des actions */
.actions label {
    margin-bottom: 0;
}

/* Sélecteurs des actions */
.actions select {
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 0.9rem;
    border: 1px solid var(--line) !important;
}

/* Bouton de soumission des actions */
.actions button[type="submit"].btn-primary {
    height: 36px !important;
    padding: 6px 15px !important;
    font-size: 0.9rem !important;
    border-radius: 999px !important;
    margin-right: 5px !important;
    margin-left: 15px !important;
    border-color: var(--accent-2-strong) !important;
    box-shadow: var(--shadow-sm) !important;
    background-color: var(--accent-2-strong) !important;
}

/* Compteur d'actions */
.action-counter {
    font-size: 0.85rem !important;
    color: var(--ink-faint) !important;
}


/* ==========================================================================
   3. OPTIMISATION MOBILE (COMPACT)
   ========================================================================== */
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 850px) {

    /* RÉDUCTION GÉNÉRALE DES MARGES */
    .app-content {
        padding: 5px !important;
        margin-top: 0px !important;
    }

    .app-content-header {
        padding: 5px !important;
    }

    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Bootstrap 5 : les .row ont --bs-gutter-x:1.5rem → margin -12px des deux côtés.
       Sans le padding compensatoire du container-fluid (mis à 0 ci-dessus),
       le contenu déborde à gauche de 12px et est coupé par overflow-x:hidden.
       Solution : annuler le gutter via la variable CSS. */
    .app-content .row,
    .app-content-header .row {
        --bs-gutter-x: 0;
    }
    /* 1. Force la ligne du titre à ne pas s'empiler */
    .app-content-header .row {
        display: flex !important;
        flex-direction: row !important; /* Force l'alignement horizontal */
        flex-wrap: nowrap !important;  /* Interdit le retour à la ligne */
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 !important;
        padding:  10px !important;
        padding-bottom: 2px !important;
    }
    /* Layout du header - désactivé car structure Jazzmin 3 différente */
    .app-content-header .row.header-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        margin: 0 !important;
    }

    /* TITRE COMPACT */
    h3.mb-0, h1.h4 {
        padding: 0 !important;
        margin-left: 0px !important;
        margin-top: 5px !important;
        margin-bottom: 2px !important;
        border: none !important;
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        color: var(--ink) !important;
        width: 100% !important;
        position: relative !important;
        padding-bottom: 0px !important;
        display: flex !important;
        align-items: center !important;
        font-family: var(--font-display) !important;
    }

    /* Masquer le fil d'Ariane */
    .breadcrumb {
        display: none !important;
    }

    /* BOUTON AJOUTER COMPACT */
a.btn-success.float-end[href*="add/"], a.btn-success.float-right[href*="add/"] {
    /* 1. ALIGNEMENT INTERNE (CENTRE LE TEXTE ET L'ICÔNE DANS LE BOUTON) */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    /* 2. POSITIONNEMENT DU BOUTON À DROITE */
    float: right !important; /* Force le côté droit */
    margin-right: 10px !important; /* Petit espace avec le bord de l'écran */
    margin-left: auto !important;

    /* 3. TAILLE */
    width: 60% !important; /* Réduit un peu pour laisser de la place au titre */
    height: 38px !important;

    /* 4. STYLE ET COULEURS */
    padding: 0 !important;
    font-size: 0.9rem !important;
    border-radius: 999px !important;
    background-color: var(--accent-2-strong) !important;
    border: 1px solid var(--accent-2-strong) !important;
}

    /* SECTION ACTIONS MOBILE COMPACT */
    .change-list-actions {
        border-radius: var(--radius-admin) !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .actions {
        flex-direction: column !important;
        gap: 1px !important;
        align-items: stretch !important;
    }

    .actions label {
        width: 100% !important;
        margin: 0 !important;
    }

    .actions select {
        width: 100% !important;
        height: 38px !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }

    .actions button[type="submit"].btn-primary {
        width: 100% !important;
        height: 38px !important;
        font-size: 0.9rem !important;
        margin: 2px 0 !important;
        border-radius: 999px !important;
    }

    .action-counter {
        width: 100% !important;
        text-align: center !important;
        padding: 0px !important;
        font-size: 0.85rem !important;
        margin-top: 2px !important;
        border-radius: 5px !important;
    }

    /* TABLE MOBILE COMPACT */
    .change-list .card {
        margin-top: 10px !important;
        width: 100% !important;
        border-radius: var(--radius-admin) !important;
        box-shadow: var(--shadow-sm) !important;
        border-left: 3px solid var(--accent-2-strong) !important;
        border-right: 3px solid var(--accent-2-strong) !important;
    }

    .change-list .card-body {
        padding: 0 !important;
        overflow-x: auto !important;
    }

    #result_list {
        min-width: 600px !important;
    }

    #result_list thead th {
        padding: 12px 14px !important;
        font-size: 0.8rem !important;
    }

    #result_list tbody td, #result_list tbody th {
        padding: 13px 14px !important;
        font-size: 0.9rem !important;
    }

    /* FORMULAIRES MOBILE */
    .app-main, .content-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .change-form .p-5 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .app-header, .main-header {
        margin-left: 0 !important;
    }

    .card-header {
        text-align: center !important;
        padding: 12px !important;
    }

    .card-title {
        float: none !important;
        display: block !important;
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .form-group .row {
        display: block !important;
        margin: 0 0 10px 0 !important;
    }

    .form-group label {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 0 4px 0 !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        margin-bottom: 2px !important;
    }

    .vTextField, .vLargeTextField, select, .select2-container, input[type="text"], input[type="number"] {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 4px !important;
        height: 38px !important;
        border-radius: 10px !important;
        border: 1px solid !important;
        padding: 0 10px !important;
        font-size: 0.9rem !important;
    }

    .inline-related {
        margin-bottom: 12px !important;
        border-radius: var(--radius-admin) !important;
        padding: 10px !important;
    }

    .submit-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 12px 10px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: var(--card) !important;
        box-shadow: 0 -2px 10px oklch(20% 0.02 50 / 10%) !important;
        z-index: 1030 !important;
    }

    .submit-row .btn {
        width: 100% !important;
        margin: 0 !important;
        height: 44px !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
    }

    /* ESPACEMENT ENTRE SECTIONS */
    #content-main > * {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    #content-main > *:first-child {
        margin-top: 0 !important;
    }

    #content-main > *:last-child {
        margin-bottom: 0 !important;
    }

    /* PAGINATION */
    .dataTables_info,
    .pagination {
        padding: 8px 0 !important;
        margin: 6px 0 !important;
        font-size: 0.85rem !important;
    }
}


/* ==========================================================================
   4. AMÉLIORATION ONGLETS
   ========================================================================== */
#jazzy-tabs {
    border-bottom: 1px solid var(--line) !important;
    margin-bottom: 15px !important;
}

#jazzy-tabs .nav-link {
    font-weight: 500;
    color: var(--ink-faint);
    border: none !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.3s;
}

#jazzy-tabs .nav-link.active {
    color: var(--accent-2-strong) !important;
    background: transparent !important;
    border-bottom: 3px solid var(--accent-2-strong) !important;
}

@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 850px) {
    #jazzy-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: space-around !important;
        padding-bottom: 2px !important;
    }

    #jazzy-tabs .nav-link .tab-text {
        display: none !important;
    }

    #jazzy-tabs .nav-link i {
        font-size: 1.2rem;
        margin: 0 !important;
    }
}


/* ==========================================================================
   5. OPTIMISATION MOBILE POUR FORMULAIRES
   ========================================================================== */
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 850px) {

    /* FORMULAIRES MOBILE - RESPONSIVE */
    .form-group .row {
        flex-direction: column !important;
        margin: 0 0 16px 0 !important;
    }

    .form-group label {
        text-align: left !important;
        padding: 0 0 8px 0 !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }

    .form-group div[class*="col-sm-"] {
        width: 100% !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    /* CHAMPS FORMULAIRE MOBILE */
    .vTextField, .vLargeTextField, select, .select2-container,
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"] {
        width: 100% !important;
        height: 46px !important;
        font-size: 1rem !important;
        border-radius: var(--radius-admin) !important;
        border: 2px solid var(--line) !important;
        margin-bottom: 5px !important;
        box-sizing: border-box !important;
        line-height: normal !important;
    }

    /* Textarea spécifique */
    textarea {
        width: 100% !important;
        min-height: 120px !important;
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: var(--radius-admin) !important;
        border: 2px solid var(--line) !important;
        margin-bottom: 5px !important;
        box-sizing: border-box !important;
        line-height: 1.5 !important;
        resize: vertical !important;
    }

    /* RELATED WIDGETS MOBILE.
       Note : le widget filter_horizontal (ex. "Permissions de
       l'utilisateur") partage la classe .related-widget-wrapper mais est
       exclu du traitement JS (.mobile-related-container n'est jamais
       ajoutée dessus, cf. mobile_adminv7.js) et a sa propre mise en page
       dédiée plus bas (.selector). Ajouter ici un ":not(:has(select
       [multiple]))" pour le ré-exclure augmentait la spécificité de cette
       règle au point qu'elle battait .mobile-related-container et cassait
       l'alignement en ligne des icônes crayon/plus/croix/œil des widgets
       simples (ex. champ "Produit") — on s'appuie uniquement sur le JS. */
    .related-widget-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .related-widget-wrapper select {
        width: 100% !important;
        min-width: 100% !important;
        order: 1 !important;
    }

    .related-icon-line {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 8px 0 !important;
        width: 100% !important;
        order: 2 !important;
    }

    .related-widget-wrapper-link {
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
    }

    .related-widget-wrapper-link img {
        width: 18px !important;
        height: 18px !important;
    }

    /* ONGLETS MOBILE */
    #jazzy-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 5px !important;
        margin-bottom: 15px !important;
    }

    #jazzy-tabs .nav-link {
        padding: 12px 20px !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
    }

    #jazzy-tabs .nav-link .tab-text {
        display: inline !important;
    }

    #jazzy-tabs .nav-link i {
        font-size: 1.2rem !important;
        margin-right: 8px !important;
    }

    /* INLINE RELATED MOBILE */
    .inline-related {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: var(--radius-admin) !important;
    }

    .inline-related .card-header {
        padding: 10px 12px !important;
    }

    .inline-related .card-body {
        padding: 12px !important;
    }

    /* SECTION BOUTONS MOBILE */
    #jazzy-actions {
        padding: 16px !important;
        margin: 16px 0 !important;
        border-radius: var(--radius-admin) !important;
    }

    #jazzy-actions .btn {
        height: 52px !important;
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        border-radius: 999px !important;
    }

    /* LAYOUT FORMULAIRE MOBILE */
    .change-form .p-5 {
        padding: 0 !important;
    }

    .card {
        margin-bottom: 16px !important;
        border-radius: var(--radius-admin) !important;
    }

    .card-body {
        padding: 16px !important;
    }

    /* ESPACEMENT FORMULAIRE */
    .content .row {
        margin: 0 !important;
    }

    .col-12, .col-12.col-lg-9, .col-12.col-lg-3 {
        padding: 0 !important;
        margin-bottom: 16px !important;
    }

     .vTextField, .vLargeTextField, select, .select2-container {
            height: 40px !important;
            font-size: 0.95rem !important;
            padding: 0 0px !important;
        }

        input[type="text"], input[type="number"], input[type="email"],
        input[type="password"], .vTextField, .vLargeTextField {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

    /* POUR TRÈS PETITS ÉCRANS */
    @media (max-width: 380px) {
        .vTextField, .vLargeTextField, select, .select2-container {
            height: 40px !important;
            font-size: 0.95rem !important;
            padding: 0 0px !important;
        }

        input[type="text"], input[type="number"], input[type="email"],
        input[type="password"], .vTextField, .vLargeTextField {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        #jazzy-tabs .nav-link {
            padding: 10px 16px !important;
            font-size: 0.95rem !important;
        }

        #jazzy-actions .btn {
            height: 48px !important;
            font-size: 1rem !important;
        }

        .inline-related {
            padding: 10px !important;
        }
    }
}


/* ==========================================================================
   6. BOUTON ICÔNE TOGGLE À DROITE
   ========================================================================== */
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 850px) {

    /* 1. Bouton toggle pour filtres — inséré par mobile_adminv5.js comme
       enfant flex de #change-list-filters, juste à côté du bouton
       "Ajouter" (au lieu d'un bouton flottant en position fixe/absolue
       qui se désalignait selon la hauteur de l'en-tête de chaque page). */
    /* Pilule « Filtres » : icône réglages + libellé + flèche */
    .mobile-filter-toggle {
        position: static !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: 38px !important;   /* même hauteur que le bouton « Ajouter » */
        padding: 0 14px !important;
        gap: 7px !important;
        color: #fff !important;
        background: var(--accent-2-strong) !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        z-index: 5 !important;
        box-shadow: none !important;
        border: 1px solid var(--accent-2-strong) !important;
    }

    .mobile-filter-toggle .fa-sliders-h { font-size: 1rem !important; }
    .mobile-filter-toggle .fa-caret-down,
    .mobile-filter-toggle .fa-caret-up { font-size: 0.85rem !important; opacity: .75; }

    /* Filtres ouverts */
    .mobile-filter-toggle.active {
        background: var(--ink) !important;
        border-color: var(--ink) !important;
        color: #fff !important;
    }

    /* Regrouper le toggle et le bouton "Ajouter" ensemble (plutôt que
       dispersés aux deux extrémités de la rangée par justify-content-between,
       hérité de Jazzmin, une fois le formulaire de recherche masqué). */
    #change-list-filters > div {
        justify-content: flex-end !important;
        gap: 10px !important;
        /* « Filtres » et « Ajouter … » toujours sur la même ligne : le bouton Ajouter se
           réduit (texte tronqué « … ») plutôt que de passer à la ligne */
        flex-wrap: nowrap !important;
    }

    /* Bouton « Ajouter » : même hauteur imposée que la pilule « Filtres » (38px) */
    #change-list-filters > div > .btn {
        height: 38px !important;
        min-height: 38px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }

    /* 2. Cacher UNIQUEMENT le formulaire de recherche/filtres sur mobile
          (pas le conteneur #change-list-filters qui contient aussi le bouton Ajouter) */
    #changelist-search {
        display: none !important;
    }

    /* 3. Modal des filtres (clone créé par JS) */
    .mobile-filters-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: oklch(20% 0.02 50 / 78%) !important;
        z-index: 9998 !important;
        margin: 0 !important;
        padding: 16px !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        backdrop-filter: blur(5px) !important;
    }

    .mobile-filters-modal.active {
        display: flex !important;
        animation: fadeIn 0.3s ease !important;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* 4. Contenu du modal */
    .mobile-filters-modal #mobile-change-list-filters.modal-content {
        background: var(--card) !important;
        padding: 18px 16px 16px !important;
        border-radius: var(--radius) !important;
        width: 100% !important;
        max-width: 500px !important;
        /* Hauteur ajustée au contenu, plafonnée à l'écran (le contenu défile au-delà) */
        height: auto !important;
        max-height: calc(100vh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
        overflow-y: auto !important;
        position: relative !important;
        animation: modalSlideIn 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) !important;
        box-shadow: var(--shadow-lg) !important;
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* 5. Bouton fermer */
    .modal-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 34px !important;
        height: 34px !important;
        background: var(--paper-deep) !important;
        color: var(--ink-faint) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        cursor: pointer !important;
        border: none !important;
        outline: none !important;
        transition: all 0.2s ease !important;
        z-index: 10000 !important;
    }

    .modal-close-btn:hover {
        background: var(--danger) !important;
        color: white !important;
        transform: rotate(90deg) !important;
    }

    /* 6. Titre du modal (limité au modal des filtres : sans ce préfixe, la
          règle s'appliquait aussi au titre du modal "Ajouter un autre objet"
          de Jazzmin et créait un double trait + un grand vide) */
    .mobile-filters-modal .modal-title {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        font-family: var(--font-display) !important;
        color: var(--ink) !important;
        margin: 0 0 4px !important;
        text-align: left !important;
        /* à droite : place pour la croix, qui ne chevauche plus le titre */
        padding: 6px 44px 12px 2px !important;
        border-bottom: 1px solid var(--line-2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    /* 7. Style du formulaire dans le modal */
    .mobile-filters-modal form {
        flex-direction: column !important;
        /* Le formulaire porte la classe Bootstrap .flex-wrap (Jazzmin) : sur un écran peu haut,
           quand les champs dépassent la hauteur max du modal, la colonne « passait à la ligne »
           et le bouton Rechercher partait dans une 2e colonne cachée à droite. On défile. */
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin: 0 !important;
        display: flex !important;
    }

    /* ... et sans écraser les champs ni le bouton : ils gardent leur hauteur, le modal défile */
    .mobile-filters-modal form > * {
        flex-shrink: 0 !important;
    }

    .mobile-filters-modal .form-group {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 8. Style des champs */
    .mobile-filters-modal .form-control,
    .mobile-filters-modal #searchbar,
    .mobile-filters-modal select,
    .mobile-filters-modal .search-filter,
    .mobile-filters-modal input[type="text"],
    .mobile-filters-modal input[type="search"] {
        width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        border-radius: var(--radius-admin) !important;
        border: 2px solid var(--line) !important;
        padding: 0 14px !important;
        font-size: 0.95rem !important;
        background: white !important;
        box-sizing: border-box !important;
    }

    /* 9. Bouton recherche */
    .mobile-filters-modal .btn-primary,
    .mobile-filters-modal button[type="submit"] {
        width: 100% !important;
        height: 46px !important;
        background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-2-strong) 100%) !important;
        border: none !important;
        border-radius: 999px !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        margin-top: 4px !important;
        color: white !important;
        cursor: pointer !important;
    }

    /* 10. Conserver TOUS les champs Django visibles */
    .mobile-filters-modal select,
    .mobile-filters-modal option,
    .mobile-filters-modal input,
    .mobile-filters-modal textarea {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 11. Pour les selects Django */
    /* Listes select2 : un seul cadre (sur .select2-selection), même largeur et hauteur
       que le champ de recherche texte */
    .mobile-filters-modal span.select2-container {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .mobile-filters-modal span.select2-container .select2-selection--single {
        height: 44px !important;
        border: 2px solid var(--line) !important;
        border-radius: var(--radius-admin) !important;
        background: white !important;
        display: flex !important;
        align-items: center !important;
    }

    .mobile-filters-modal span.select2-container .select2-selection__rendered {
        padding-left: 14px !important;
        font-size: 0.95rem !important;
        color: var(--ink) !important;
    }

    .mobile-filters-modal span.select2-container .select2-selection__arrow {
        height: 100% !important;
        right: 8px !important;
    }
}


/* ==========================================================================
   7. STYLES POUR RELATED WIDGETS MOBILE
   ========================================================================== */
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 850px) {

    /* Conteneur principal des related widgets : menu + icônes sur UNE ligne */
    .related-widget-wrapper.mobile-related-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Le menu déroulant prend la place restante à gauche des icônes
       (le <select> caché par select2 est en position absolue, hors flux) */
    .related-widget-wrapper.mobile-related-container select:not(.select2-hidden-accessible),
    .related-widget-wrapper.mobile-related-container .select2-container {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }

    /* <select> masqué par select2 : la règle générique
       ".related-widget-wrapper select { width/min-width: 100% }" lui rendait
       toute la largeur et faisait déborder la ligne d'inline de ~10px. */
    .related-widget-wrapper select.select2-hidden-accessible {
        width: 1px !important;
        min-width: 0 !important;
    }

    /* "Champ dans un champ" : les règles CHAMPS FORMULAIRE MOBILE donnent
       bordure + hauteur au conteneur .select2-container, alors que
       .select2-selection (à l'intérieur) a déjà sa propre bordure → deux
       cadres décalés. La bordure ne reste que sur .select2-selection. */
    span.select2-container {
        border: none !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
    }

    span.select2-container .select2-selection--single {
        height: 46px !important;
        border: 2px solid var(--line) !important;
        border-radius: var(--radius-admin) !important;
        display: flex !important;
        align-items: center !important;
    }

    span.select2-container .select2-selection--single .select2-selection__arrow {
        height: 100% !important;
    }

    /* Lignes d'inline empilées (ex. Articles d'une commande) : mêmes marges
       que l'onglet Général (champs alignés sur le bord de la carte), au lieu
       de quatre paddings imbriqués (bloc 16px + ligne 12px + carte 12px +
       champ 8px) qui mangeaient ~45px de chaque côté de l'écran. */
    .inline-group > fieldset.module > .card-body {
        padding: 0 !important;
    }

    .inline-group .inline-related {
        padding: 0 !important;
    }

    .inline-group .inline-related > .card > .card-body {
        padding: 12px 0 !important;
    }

    /* Espacement vertical entre champs aligné sur l'onglet Général
       (~20px) : le padding 8px haut/bas du champ et la marge 16px de sa
       .row portaient l'écart à ~45px. */
    .inline-group .inline-related .form-group {
        padding: 0 !important;
    }

    .inline-group .inline-related .form-group > .row {
        margin-bottom: 0 !important;
    }

    /* Style des boutons (Modifier, Supprimer, etc.) */
    .related-widget-wrapper.mobile-related-container .related-widget-wrapper-link {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        background: #fff !important;
        border: 1px solid var(--line) !important;
        border-radius: 10px !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* Images dans les boutons */
    .related-widget-wrapper.mobile-related-container .related-widget-wrapper-link img {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
    }

    /* Demande explicite : ne garder que "Ajouter" et "Modifier" sur mobile
       pour ces widgets ("Voir" et "Supprimer" sont masqués). Réduit la
       rangée à 2 icônes max, ce qui élimine tout risque de débordement
       quelle que soit la largeur d'écran, sans dépendre du calcul flex-wrap. */
    .related-widget-wrapper.mobile-related-container .related-widget-wrapper-link.view-related,
    .related-widget-wrapper.mobile-related-container .related-widget-wrapper-link.delete-related {
        display: none !important;
    }

    /* Widget filter_horizontal (ex. "Permissions de l'utilisateur") : deux
       colonnes côte à côte n'ont pas la place d'afficher les libellés sur
       mobile (texte tronqué, sélection difficile). On empile les deux
       listes verticalement, pleine largeur, avec les boutons
       choisir/enlever centrés entre elles. */
    .selector {
        flex-direction: column !important;
    }

    .selector-available,
    .selector-chosen {
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    .selector select {
        height: 11em !important;
    }

    .selector ul.selector-chooser {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 16px !important;
        padding: 10px 0 !important;
    }

    .selector ul.selector-chooser button {
        width: 2.5rem !important;
        height: 2.5rem !important;
        line-height: 2.5rem !important;
    }
}


/* ==========================================================================
   8. MODALS FULLSCREEN MOBILE
   ========================================================================== */
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 850px) {

    /* 1. LE CONTENEUR DU MODAL */
    .modal.show {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: oklch(20% 0.02 50 / 65%) !important;
        backdrop-filter: blur(5px) !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1050 !important;
        margin: 0 !important;
        padding: 10px !important;
    }

    /* 2. LA BOITE DE DIALOGUE */
    .modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        height: 85vh !important;
        margin: 0 !important;
        display: flex !important;
        pointer-events: auto !important;
    }

    /* 3. LE CONTENU BLANC */
    .modal-content {
        width: 100% !important;
        height: 100% !important;
        border-radius: var(--radius) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        background: var(--card) !important;
        box-shadow: var(--shadow-lg) !important;
    }

    /* 4. LE CORPS SCROLLABLE */
    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px !important;
    }

    /* 5. Force l'iframe si présente */
    .modal-body iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }
}


/* ==========================================================================
   8 bis. MODAL "AJOUTER / MODIFIER UN OBJET LIÉ" (related_modal_active)
   ========================================================================== */

/* Le main.css de Jazzmin installé ne contient plus ses "modal tweaks" :
   sans taille, l'iframe retombait à 300×150 px par défaut. */
.modal.modal-wide .modal-dialog {
    width: min(900px, 92vw);
    max-width: none;
}

.modal-wide .modal-body {
    padding: 0 !important;
    overflow: hidden !important;
}

iframe.related-iframe {
    display: block;
    width: 100%;
    height: 75vh;
    border: none;
}

/* Page chargée DANS l'iframe : Jazzmin met toujours "sidebar-open" sur le
   <body>, et sous 992px AdminLTE affiche alors son voile sombre
   (.sidebar-overlay, noir 20 %) par-dessus tout le formulaire du popup. */
body.popup .sidebar-overlay {
    display: none !important;
}


/* ==========================================================================
   9. FIX HEADER ET ICONE USER EN MODE MODAL
   ========================================================================== */

/* Empêcher le décalage vers la droite (padding) injecté par JS */
body.modal-open,
.modal-open .app-header,
.modal-open .main-header,
.modal-open .navbar {
    padding-right: 0 !important;
    margin-right: 0 !important;
    position: fixed;
}

/* Header en mode modal ouvert */
body.modal-open .app-header,
body.modal-open .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: 0 !important;
}

/* Stabiliser le wrapper pour éviter le saut vertical */
body.modal-open .app-wrapper,
body.modal-open .wrapper {
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
}

/* Correction spécifique pour l'icône utilisateur à droite */
.modal-open .navbar-nav.ms-auto,
.modal-open .navbar-nav.ml-auto {
    margin-right: 0 !important;
    padding-right: 15px !important;
}

/* 1. On bloque la racine pour empêcher le calcul de la scrollbar */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    width: 100% !important;
    padding-right: 0 !important;
}

/* 2. On force le header à ignorer le padding de Bootstrap */
body.modal-open .app-header,
body.modal-open .main-header,
body.modal-open #jazzy-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   10. POLISH — badges, affordance de scroll, accessibilité clavier
   ========================================================================== */

/* Les règles mobiles ci-dessus forcent input[type="text"/"password"/…] en
   width:100% pour les formulaires admin classiques ; ça casse la mise en
   page flex des .input-group Bootstrap (ex : page de login, icône reléguée
   à la ligne suivante). Spécificité plus élevée pour restaurer le
   comportement flex normal partout où un input est dans un .input-group. */
.input-group {
    flex-wrap: nowrap !important;
}

.input-group input[type="text"],
.input-group input[type="password"],
.input-group input[type="email"],
.input-group input[type="number"] {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Stock disponible affiché sous le champ Produit d'une ligne d'article
   (ventes/static/js/ventes_lots_gestionv3.js) */
.stock-disponible-ligne {
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-2-strong);
}

.stock-disponible-ligne.stock-epuise {
    color: var(--danger);
}

/* Badges/labels Django déjà rendus par l'admin (booléens, statuts…) en
   version "soft" cohérente avec la charte */
.badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    letter-spacing: 0.01em;
}

.badge-success, .badge-info, .badge-primary {
    background-color: var(--accent-2-soft) !important;
    color: var(--accent-2-strong) !important;
}

.badge-warning {
    background-color: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
}

.badge-danger {
    background-color: var(--danger-soft) !important;
    color: var(--danger) !important;
}

.badge-secondary {
    background-color: var(--line) !important;
    color: var(--ink-soft) !important;
}

/* Indication visuelle discrète que les tableaux défilent horizontalement */
.change-list .card-body,
.table-container {
    box-shadow:
        inset -12px 0 8px -8px oklch(20% 0.02 50 / 8%),
        inset 12px 0 8px -8px oklch(20% 0.02 50 / 8%) !important;
}

/* Éviter la capsule vide quand la liste n'a aucune action groupée
   disponible (le conteneur .change-list-actions est alors rendu vide
   par le template mais garde son padding/bordure) */
.change-list-actions:not(:has(.actions)) {
    display: none !important;
}

/* Le CSS de Jazzmin pour les boutons "choisir/enlever" du widget
   filter_horizontal (ex. "Permissions de l'utilisateur") cible des <a>,
   mais cette version de Django génère des <button> — non stylés, ils
   affichent leur phrase complète au lieu d'une icône compacte de 2rem,
   ce qui fait exploser la largeur de la colonne centrale et écrase les
   deux listes de sélection à 0px (illisibles, texte replié lettre par
   lettre). On réplique le style prévu par Jazzmin pour <button>. */
.selector ul.selector-chooser button {
    display: block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background-color: var(--card);
    border: 1px solid var(--line);
    border-radius: .375rem;
    color: var(--ink);
    font-size: 0;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
}

.selector ul.selector-chooser button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.selector ul.selector-chooser button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.75rem;
}

.selector ul.selector-chooser button.selector-add::before { content: "\f054"; }
.selector ul.selector-chooser button.selector-remove::before { content: "\f053"; }

.selector ul.selector-chooser button:hover:not(:disabled) {
    background-color: var(--accent-2-strong);
    border-color: var(--accent-2-strong);
    color: #fff;
}

/* États de focus visibles au clavier */
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-2-strong) !important;
    outline-offset: 2px !important;
}

/* Pied de page : remplace « Version de Jazzmin x.y.z » par « Soodain by BICEA » */
.app-footer > .float-end {
    font-size: 0 !important;
}
.app-footer > .float-end::after {
    content: "Soodain by BICEA";
    font-size: 1rem;
    font-weight: 700;
}

/* Marque du menu latéral : logo en pastille arrondie, « SOODAIN » en haut, « by BICEA » en dessous */
.brand-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
}
.brand-link .brand-image {
    width: 44px;
    height: 44px;
    max-height: none;
    margin: 0 !important;
    padding: 3px;
    float: none;
    object-fit: contain;
    background: #fff;
    border-radius: 12px !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 1px oklch(97% 0.01 80 / 18%), 0 6px 14px rgba(0, 0, 0, .35) !important;
    flex: none;
}
.brand-link .brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    font-family: var(--font-display, inherit);
    font-weight: 800 !important;
    font-size: 1.15rem;
    letter-spacing: .06em;
    color: #fff;
}
.brand-link .brand-text::after {
    content: "by BICEA";
    margin-top: 3px;
    font-family: var(--font-body, inherit);
    font-size: .58em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .65;
}

/* ==========================================================================
   Menu latéral & en-tête : même couleur « night » partout, état actif teal,
   liens du bas (Rapport / Données) alignés sur les rubriques du menu.
   Le vrai conteneur est <aside id="jazzy-sidebar" class="app-sidebar bg-body-secondary">
   (les sélecteurs .main-sidebar plus haut ne correspondent à rien dans Jazzmin 3).
   ========================================================================== */
#jazzy-sidebar {
    --lte-sidebar-bg: var(--night);
    background-color: var(--night) !important;
    border-right: 1px solid var(--line-dark) !important;
    box-shadow: none !important;
}
#jazzy-sidebar .sidebar-brand,
#jazzy-sidebar .sidebar-wrapper {
    background-color: var(--night) !important;
}
#jazzy-sidebar .sidebar-brand {
    height: auto !important;
    border-bottom: 1px solid var(--line-dark) !important;
}

/* Bloc utilisateur */
#jazzy-sidebar .user-panel {
    margin: 0 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--line-dark) !important;
    align-items: center;
}
#jazzy-sidebar .user-panel .info a,
#jazzy-sidebar .user-panel .info span {
    color: var(--night-text) !important;
    font-weight: 600;
}
#jazzy-sidebar .user-panel .user-profile { color: var(--accent-2) !important; }

/* Rubriques : espacement, coins arrondis, texte blanc cassé, icônes teal atténué */
#jazzy-sidebar .sidebar-menu > .nav-item,
#jazzy-sidebar .sidebar-menu .nav-treeview > .nav-item {
    margin: 2px 10px;
}
#jazzy-sidebar .sidebar-menu .nav-link {
    color: var(--night-text-soft) !important;
    border-radius: 10px !important;
}
#jazzy-sidebar .sidebar-menu .nav-link .nav-icon {
    color: var(--accent-2) !important;
    opacity: .8;
}
#jazzy-sidebar .sidebar-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--night-text) !important;
}
#jazzy-sidebar .sidebar-menu .nav-link:hover .nav-icon { opacity: 1; }

/* Rubrique / page active : fond teal translucide + liseré à gauche */
#jazzy-sidebar .sidebar-menu .nav-link.active,
#jazzy-sidebar .sidebar-menu .menu-open > .nav-link {
    background-color: color-mix(in srgb, var(--accent-2) 20%, transparent) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--accent-2);
}
#jazzy-sidebar .sidebar-menu .nav-link.active .nav-icon,
#jazzy-sidebar .sidebar-menu .menu-open > .nav-link .nav-icon {
    color: var(--accent-2) !important;
    opacity: 1;
}

/* Liens ajoutés par mobile_adminv8.js (Rapport / Données…) : même style que les rubriques.
   Le JS injecte son propre <style> avec !important ; l'ID #jazzy-sidebar l'emporte. */
#jazzy-sidebar .menu-item-custom {
    margin: 2px 10px !important;
    width: calc(100% - 20px) !important;
    padding: .5rem 1rem !important;
    border-radius: 10px !important;
    color: var(--night-text-soft) !important;
    font-size: inherit !important;
}
#jazzy-sidebar .menu-item-custom .nav-icon {
    width: 1.6rem !important;
    min-width: 1.6rem !important;
    font-size: 1.1rem !important;
    text-align: center;
    color: var(--accent-2) !important;
    opacity: .8;
}
#jazzy-sidebar .menu-item-custom p {
    margin: 0 0 0 .5rem !important;
    line-height: 1.2 !important;
}
#jazzy-sidebar .menu-item-custom:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--night-text) !important;
}
#jazzy-sidebar .menu-item-custom.is-active {
    background: color-mix(in srgb, var(--accent-2) 20%, transparent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--accent-2);
}
#jazzy-sidebar .menu-item-custom.is-active .nav-icon { opacity: 1; }

/* ==========================================================================
   En-tête clair (le menu reste sombre) + barre de recherche compacte
   + barre de filtres / d'actions des listes harmonisée.
   Pour un en-tête sombre identique au menu : --topbar-bg: var(--night) et
   --topbar-fg: var(--night-text).
   ========================================================================== */
#jazzy-navbar {
    --topbar-bg: var(--card);
    --topbar-fg: var(--ink-soft);
    --topbar-fg-strong: var(--ink);
    --topbar-hover: var(--paper-deep);
    background-color: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--line-2) !important;
    box-shadow: var(--shadow-sm);
    --bs-navbar-color: var(--topbar-fg);
    --bs-navbar-hover-color: var(--topbar-fg-strong);
    --bs-navbar-active-color: var(--topbar-fg-strong);
}
@media (min-width: 992px) {
    #jazzy-navbar { min-height: 72px; }
    #jazzy-sidebar .sidebar-brand { min-height: 72px; }
}
#jazzy-navbar .nav-link,
#jazzy-navbar .navbar-brand {
    color: var(--topbar-fg) !important;
    font-weight: 600;
}
#jazzy-navbar .nav-link:hover,
#jazzy-navbar .nav-link:focus,
#jazzy-navbar .nav-link.show {
    background-color: var(--topbar-hover) !important;
    color: var(--topbar-fg-strong) !important;
}

/* Recherche du header : pilule compacte, bouton loupe intégré.
   La bordure et l'arrondi sont portés par le conteneur (un seul bloc) : le champ et la loupe
   n'ont ni bordure ni décalage propres, ils ne peuvent donc plus se désaligner (ex. .btn:hover
   qui soulève la loupe de 1px, état « survol » qui reste collé au toucher sur mobile). */
#jazzy-navbar form .input-group {
    width: 250px;
    max-width: 100%;
    height: 40px;
    flex-wrap: nowrap;
    align-items: stretch;
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color .18s ease;
}
#jazzy-navbar form .input-group:focus-within {
    border-color: var(--accent-2-strong);
}
#jazzy-navbar .form-control-navbar {
    height: 100% !important;
    margin: 0 !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: 16px !important;
    font-size: .9rem !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
#jazzy-navbar .form-control-navbar::placeholder { color: var(--ink-faint); }
#jazzy-navbar .btn-navbar,
#jazzy-navbar .btn-navbar i {
    color: var(--ink-soft) !important;
}
#jazzy-navbar .btn-navbar,
#jazzy-navbar .btn-navbar:hover,
#jazzy-navbar .btn-navbar:active,
#jazzy-navbar .btn-navbar:focus {
    height: 100% !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    justify-content: center;
}
/* Loupe centrée verticalement : ni marge, ni hauteur de ligne héritée de Bootstrap/AdminLTE */
#jazzy-navbar .btn-navbar i {
    display: block;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: .95rem;
    position: relative;
    top: 0;
}
#jazzy-navbar .btn-navbar:hover {
    background-color: var(--accent-2-soft) !important;
}
#jazzy-navbar .btn-navbar:hover i { color: var(--accent-2-strong) !important; }

/* Barre d'actions des listes : plus de bordures vertes épaisses */
.change-list-actions {
    border: 1px solid var(--line-2) !important;
    border-left: 3px solid var(--accent-2-strong) !important;
}

/* Filtres des listes (ordinateur seulement : sur mobile le JS les clone dans une modale déjà stylée) */
@media (min-width: 769px) {
    #change-list-filters {
        padding: 10px 12px !important;
        border: 1px solid var(--line-2) !important;
        box-shadow: var(--shadow-sm);
        align-items: center;
    }
    #changelist-search {
        gap: 10px !important;
        align-items: center;
    }
    #changelist-search .form-group { margin-left: 0 !important; }

    /* Tous les contrôles : même hauteur, même bordure, même rayon */
    #changelist-search select,
    #changelist-search .select2-container--default .select2-selection--single {
        height: 38px !important;
        border: 1px solid var(--line) !important;
        border-radius: 10px !important;
        background-color: var(--paper) !important;
        color: var(--ink) !important;
        font-size: .9rem !important;
        box-shadow: none !important;
    }
    #changelist-search .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        color: var(--ink) !important;
    }
    #changelist-search .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
    #changelist-search select:focus,
    #changelist-search .select2-container--focus .select2-selection--single {
        border-color: var(--accent-2-strong) !important;
        outline: none;
    }

    /* Champ de recherche : bordure neutre, focus teal (au lieu du vert permanent) */
    #searchbar {
        border: 1px solid var(--line) !important;
        border-radius: 999px !important;
        background-color: var(--paper) !important;
        padding-left: 16px !important;
        min-width: 240px;
        box-shadow: none !important;
    }
    #searchbar:focus {
        border-color: var(--accent-2-strong) !important;
        box-shadow: 0 0 0 3px var(--accent-2-soft) !important;
        outline: none;
    }

    /* Rechercher = action secondaire (nuit) ; Ajouter garde le teal */
    #changelist-search button[type="submit"].btn-primary {
        height: 38px !important;
        padding: 0 20px !important;
        font-weight: 700 !important;
        background-color: var(--night) !important;
        border-color: var(--night) !important;
        transition: background-color .18s ease, border-color .18s ease;
    }
    #changelist-search button[type="submit"].btn-primary:hover {
        background-color: var(--accent-2-strong) !important;
        border-color: var(--accent-2-strong) !important;
    }
}

/* ==========================================================================
   Typographie : Manrope (texte) + Bricolage Grotesque (titres) partout,
   hiérarchie plus nette. Les tailles ne changent que sur ordinateur
   (le mobile a ses propres réglages plus haut).
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

/* La police de la charte n'était pas appliquée au header, au menu, aux libellés, aux listes… */
#jazzy-navbar, #jazzy-sidebar, .app-footer, .breadcrumb, .dropdown-menu,
.modal, label, .select2-container, .select2-dropdown, .form-control,
.help, .helptext, .badge, .nav-link, .page-link {
    font-family: var(--font-body);
}

/* Menu latéral */
#jazzy-sidebar .sidebar-menu .nav-link,
#jazzy-sidebar .menu-item-custom {
    font-weight: 600;
    letter-spacing: -0.005em;
}
#jazzy-sidebar .sidebar-menu .nav-treeview .nav-link { font-weight: 500; }

/* En-tête : liens et recherche */
#jazzy-navbar .nav-link { letter-spacing: -0.005em; }

@media (min-width: 769px) {
    /* Titre de page */
    .app-content-header h1,
    .app-content-header h2,
    .app-content-header h3 {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.85rem;
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: var(--ink);
    }

    /* Fil d'Ariane */
    .breadcrumb { font-size: .85rem; font-weight: 600; }
    .breadcrumb-item.active { color: var(--ink-soft); }

    /* Libellés de formulaire */
    .form-group label,
    .col-form-label,
    .form-label {
        font-weight: 600;
        font-size: .875rem;
        color: var(--ink-soft);
    }
    .help, .helptext, .form-text { font-size: .8rem; color: var(--ink-faint); }

    /* Tableaux de liste : en-têtes discrets en petites capitales, corps lisible */
    #result_list thead th,
    #result_list thead th a {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    #result_list thead th.sorted a,
    #result_list thead th.sorted { color: var(--accent-2-strong); }
    #result_list tbody td,
    #result_list tbody th {
        font-size: .92rem;
        font-variant-numeric: tabular-nums;
    }
    /* Première colonne (lien vers la fiche) mise en avant */
    #result_list tbody th a { font-weight: 700; }

    /* Boutons */
    .btn { font-weight: 700; letter-spacing: 0; }
}

/* Chiffres alignés dans les cartes et les totaux */
.card-title, .small-box .inner h3, .info-box-number { font-variant-numeric: tabular-nums; }

/* Manrope a des espaces entre mots très étroits à petite taille (surtout en majuscules :
   « TOTALGÉNÉRAL »). On les élargit légèrement, plus fortement pour les libellés en capitales. */
body { word-spacing: .05em; }
.kpi-label, .action-card span, .dashboard-table th, .dashboard-table tfoot td,
#result_list thead th, #result_list thead th a, .tab-nav-btn, .badge,
.app-footer, .breadcrumb {
    word-spacing: .18em;
}


/* ==========================================================================
   Header mobile : icônes menu (☰) et utilisateur décollées des bords
   + bouton menu mis en valeur (pastille accent) pour qu'on le repère.
   ========================================================================== */
@media (max-width: 991.98px) {
    #jazzy-navbar > .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 8px;
    }
    #jazzy-navbar form.ms-2 {
        margin-left: 0 !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    #jazzy-navbar form .input-group { width: 100%; }

    /* Boutons de droite (langue, utilisateur) : espacés et centrés verticalement */
    #jazzy-navbar .navbar-nav.ms-auto {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    /* Pastilles rondes communes au menu, à la langue et à l'utilisateur */
    #jazzy-navbar [data-lte-toggle="sidebar"],
    #jazzy-navbar .navbar-nav.ms-auto > .nav-item > .nav-link {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    /* Bouton menu : fond accent doux, icône plus grande et colorée */
    #jazzy-navbar [data-lte-toggle="sidebar"] {
        background-color: var(--accent-2-soft) !important;
        color: var(--accent-2-strong) !important;
    }
    #jazzy-navbar [data-lte-toggle="sidebar"] i { font-size: 1.25rem; }
    #jazzy-navbar [data-lte-toggle="sidebar"]:hover,
    #jazzy-navbar [data-lte-toggle="sidebar"]:focus {
        background-color: var(--accent-2-strong) !important;
        color: #fff !important;
    }

    /* Boutons langue et utilisateur : même gabarit, fond neutre */
    #jazzy-navbar .navbar-nav.ms-auto > .nav-item > .nav-link {
        margin: 0 !important;
        background-color: var(--paper) !important;
        border: 1px solid var(--line) !important;
        color: var(--ink) !important;
    }
    #jazzy-navbar .navbar-nav.ms-auto > .nav-item > .nav-link i { font-size: 1.1rem; }
}