/* === VARIABLES ============================================= */

:root {
    --teal:    rgba(95, 160, 157, 1);
    --teal-05: rgba(95, 160, 157, 0.05);
    --teal-10: rgba(95, 160, 157, 0.10);
    --teal-15: rgba(95, 160, 157, 0.15);
    --teal-20: rgba(95, 160, 157, 0.20);
    --teal-30: rgba(95, 160, 157, 0.30);
    --teal-40: rgba(95, 160, 157, 0.40);
    --teal-50: rgba(95, 160, 157, 0.50);
    --teal-80: rgba(95, 160, 157, 0.80);
    --teal-95: rgba(95, 160, 157, 0.95);
    --danger:  #c0392b;
    --danger-h: #e74c3c;
    --warn:    #e67e22;
    --crit:    #d35400;
    --ok:      #27ae60;

    /* Rayons agrandis (5px/10px → 10px/18px) : la quasi-totalité des boutons, champs,
       cartes et panneaux de l'appli utilisent déjà var(--radius)/var(--radius-lg), donc ce
       seul changement adoucit toute l'interface d'un coup, sans devoir toucher chaque règle. */
    --radius:    10px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --tr: 0.15s ease;

    /* Toile neutre claire : fond légèrement gris-bleuté sous des panneaux blancs, pour que
       la profondeur vienne de l'ombre plutôt que d'une bordure — base du traitement "clair,
       épuré, minimal" demandé, appliquée à body/main/nav ci-dessous. */
    --canvas:    #f5f7f9;
    --surface:   #ffffff;
    --line:      #eaedf0;
    --ink:       #1c2226;
    --ink-soft:  #5b6670;
    /* Ton propre à la navigation, distinct à la fois de la toile (--canvas) et des cartes
       blanches (--surface) : sans lui, menu/header/contenu se fondaient dans des blancs très
       proches et la zone de navigation ne se détachait pas clairement du contenu. */
    --nav-bg:    #eef1f4;

    /* Ombres douces et diffuses (jamais de bordure dure sur les nouvelles surfaces) —
       trois profondeurs : repos, survol, élément flottant (dialogues, menus). */
    --shadow-sm: 0 1px 2px rgba(20, 30, 40, .04), 0 1px 1px rgba(20, 30, 40, .03);
    --shadow-md: 0 8px 24px rgba(20, 30, 40, .08), 0 2px 6px rgba(20, 30, 40, .04);
    --shadow-lg: 0 20px 50px rgba(20, 30, 40, .14), 0 6px 16px rgba(20, 30, 40, .06);
}

/* === UTILITAIRES ===========================================
   En classes plutôt qu'en attribut style="" inline : la Content-Security-Policy du
   site (style-src sans 'unsafe-inline', voir public/.htaccess) bloque les styles
   inline, exactement comme script-src bloque les onclick="" inline. */

.hidden { display: none; }
.uppercaseInput { text-transform: uppercase; }

/* === JAUGE DE FORCE DU MOT DE PASSE =========================
   Globale (pas scopée à un formulaire précis) : utilisée à la fois dans le formulaire
   "mon compte", la création/édition d'utilisateur et la réinitialisation par email —
   voir public/assets/js/modal.js pour la mise à jour en direct pendant la saisie. */

.pwStrengthMeter {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;

    .pwStrengthTrack {
        flex: 1;
        height: 5px;
        border-radius: 3px;
        background: var(--teal-15);
        overflow: hidden;
    }

    .pwStrengthBar {
        height: 100%;
        width: 8%;
        border-radius: 3px;
        background: var(--teal-15);
        transition: width .2s ease, background-color .2s ease;

        /* Largeur ET couleur par palier — une classe par score (voir modal.js), pas de
           style="" posé par script (bloqué par la CSP au même titre qu'un style inline). */
        &.pwLvl0 { width: 8%;   background: var(--teal-15); }
        &.pwLvl1 { width: 20%;  background: var(--danger); }
        &.pwLvl2 { width: 40%;  background: var(--danger); }
        &.pwLvl3 { width: 55%;  background: var(--warn); }
        &.pwLvl4 { width: 72%;  background: var(--warn); }
        &.pwLvl5 { width: 90%;  background: var(--ok); }
        &.pwLvl6 { width: 100%; background: #1e8449; }
    }

    .pwStrengthLabel {
        flex-shrink: 0;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #888;
        min-width: 4.5em;
        text-align: right;
    }
}

/* === RESET ================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
}

/* === TYPOGRAPHIE FLUIDE ==================================== */

html {
    font-size: clamp(13px, 1vw + 10px, 16px);
}

/* === CHAMPS DE FORMULAIRE — LISIBILITÉ SUR PETIT ÉCRAN =======
   Chaque formulaire de l'app fixe la taille de ses champs en rem (.78rem–.9rem selon les
   endroits), pensée pour desktop ; combinée à la taille de police fluide de <html>
   ci-dessus, elle retombe sous 16px sur un téléphone — le seuil sous lequel Safari iOS
   zoome automatiquement dès qu'on touche le champ, rendant le formulaire pénible à remplir.
   Un seul correctif global plutôt que de relever chaque formulaire un par un (il y en a des
   dizaines, tous construits sur des variantes de .formGroup) — !important assumé : c'est la
   seule façon de passer par-dessus les tailles spécifiques déjà déclarées partout ailleurs,
   sans les dupliquer ni les faire toutes remonter à 16px sur desktop où ce n'est pas un
   problème. */
@media (max-width: 640px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* === EN-TÊTE — PETIT ÉCRAN ==================================
   header/.headerMenu ont une hauteur fixe (70px) pensée pour une seule ligne d'icônes —
   viable tant qu'il n'y a que quelques boutons, mais avec le sélecteur de succursale ET
   celui de langue en plus des icônes (profil, ajouter, rechercher...), tout ne tient plus
   sur une ligne à largeur de téléphone : .headerConnected passe alors en display:flex
   flex-wrap (déjà posé plus haut) mais la hauteur fixe du parent coupait ce qui débordait
   sur une 2e ligne — corrigé ici en la laissant s'ajuster au contenu sous ce seuil. */
@media (max-width: 600px) {
    header {
        height: auto;

        .headerMenu {
            height: auto;
            padding: .5rem 0;

            .headerConnected,
            .headerNotConnected {
                height: auto;
                justify-content: center;
                row-gap: .6rem;
            }
        }
    }
}

/* === BODY ================================================== */

body {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

/* Le texte en majuscules (très présent dans l'app) est plus lisible avec un léger espacement */
.navMenu, .headerMenu, footer, .viewsProducts, .viewsUsers, .branches, .countries,
.regions, .cities, .roles, .permissions, .permissionAssignments, .stockMonitoring {
    letter-spacing: .02em;
}

/* === TOGGLE MENU =========================================== */

#menu-toggle {
    display: none;
}

#menu-toggle:checked ~ nav {
    display: flex;
    flex-direction: column;
}

/* === NAVIGATION ============================================ */

/* Sidebar claire plutôt que le bloc teal plein d'avant : la couleur de marque reste portée
   par le logo et les icônes/état actif, pas par un aplat sombre sur toute la nav — c'est ce
   qui fait la différence entre "sidebar sombre" et "sidebar claire épurée avec accents". */
nav {
    height: 100%;
    width: 100%;
    background-color: var(--nav-bg);
    border-right: 1px solid var(--line);
    box-shadow: 2px 0 10px rgba(20, 30, 40, .03);
    position: fixed;
    padding: 4px 8px;
    text-transform: uppercase;
    overflow: hidden;
    z-index: 1000;
    display: none;

    .navHeader {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
        margin-bottom: 8px;
        color: var(--ink);

        #closeMenu {
            cursor: pointer;

            .icon path { fill: var(--ink-soft); }
            &:hover .icon path { fill: var(--teal); }
        }
    }

    .navMenu {
        width: 100%;
        height: calc(100% - 3.95rem);
        display: flex;
        flex-direction: column;
        gap: .3rem;
        overflow-y: auto;
        padding: 4px;

        /* "> li > label" et non "li label" : ce dernier attrapait aussi le <label class="linkLabel">
           qui enrobe le texte dans chaque lien, lui donnant son propre fond/padding au survol
           (un second fond à l'intérieur de celui de l'entrée). */
        li a,
        > li > label,
        details summary {
            width: 100%;
            display: flex;
            align-items: center;
            gap: .5rem;
            color: var(--ink-soft);
            padding: .5rem .6rem;
            border-radius: var(--radius);
            font-weight: 600;
            cursor: pointer;
            transition: background var(--tr), color var(--tr);

            .icon path { fill: var(--ink-soft); }
        }

        li a:hover,
        > li > label:hover,
        details summary:hover {
            color: var(--teal-95);
            background-color: var(--teal-10);

            .icon path { fill: var(--teal); }
        }

        /* Les <summary> des sous-menus portent le chevron générique (summary::before, ~5px +
           marge) : sans réserve équivalente, les entrées directes (dashboard, profil,
           déconnexion) avaient icône et texte décalés vers la gauche par rapport aux autres
           boutons du menu. */
        > li > a::before,
        > li > label::before {
            content: '';
            display: inline-block;
            width: 5px;
            margin-right: .5rem;
            flex-shrink: 0;
        }

        .linkLabel,
        summary { cursor: pointer; }

        details[open] {
            border-radius: var(--radius);

            > summary {
                background-color: var(--teal-10);
                color: var(--teal-95);
                border-radius: var(--radius);

                .icon path { fill: var(--teal); }
            }

            .subMenu {
                width: 100%;
                max-height: 200px;
                display: flex;
                flex-direction: column;
                gap: .15rem;
                overflow-y: auto;
                padding: .35rem .25rem .35rem .9rem;

                .icon { height: 1.1rem; }

                .linkLabel { font-size: .75rem; }

                li a {
                    font-weight: 500;
                    padding: .4rem .6rem;
                }

                li a:hover {
                    background-color: var(--teal-15);
                    color: var(--teal-95);
                }
            }
        }
    }
}

/* === BODY CONTAINER ======================================== */

.bodyContainer {
    width: 100dvw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* ----- DIALOGS (non connecté) ---- */

    .inputDialog { display: none; }

    #openDialogFormLogin:checked ~ #dialogFormLogin,
    #openDialogFormRecovery:checked ~ #dialogFormRecovery,
    #openDialogFormResetPassword:checked ~ #dialogFormResetPassword,
    #openDialogFormContact:checked ~ #dialogFormContact,
    #openDialogFormLogout:checked ~ #dialogFormLogout {
        position: fixed;
        inset: 0;
        width: 100dvw;
        height: 100dvh;
        z-index: 500;
        display: flex;
        place-content: center;
        place-items: center;
        background-color: rgba(0, 0, 0, 0.65);
        border: none;

        .content {
            min-width: 280px;
            max-width: 380px;
            width: 90vw;
            max-height: 90dvh;
            border-radius: var(--radius-lg);
            overflow-y: auto;
            background-color: white;
            padding: 1rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

            .header {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-transform: uppercase;
                font-size: 1.1rem;
                border-bottom: 1px solid var(--teal-20);
                padding-bottom: .5rem;
                margin-bottom: .75rem;
            }

            form {
                width: 100%;
                display: grid;
                gap: .4rem;

                fieldset {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: .6rem;
                    border: none;
                    margin: 0;
                    padding: 0;

                    p {
                        font-size: .9rem;
                        color: #555;
                        text-align: center;
                        line-height: 1.5;
                    }

                    .formGroup {
                        display: flex;
                        flex-direction: column;
                        gap: .3rem;

                        label {
                            font-size: .78rem;
                            font-weight: bold;
                            text-transform: uppercase;
                            color: #555;
                        }

                        input {
                            height: 2.2rem;
                            border-radius: var(--radius);
                            border: 1px solid var(--teal-40);
                            padding: .25rem .6rem;
                            font-size: .9rem;
                            transition: border-color var(--tr), box-shadow var(--tr);

                            &:focus {
                                outline: none;
                                border-color: var(--teal);
                                box-shadow: 0 0 0 3px var(--teal-10);
                            }
                        }

                        .errorMsg {
                            font-size: .75rem;
                            color: var(--danger);
                            font-style: italic;
                        }

                        .fieldHint {
                            font-size: .72rem;
                            color: #888;
                        }
                    }
                }

                .formButtons {
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;
                    margin-top: .25rem;

                    button {
                        height: 2.4rem;
                        display: flex;
                        place-content: center;
                        place-items: center;
                        gap: .5rem;
                        text-transform: uppercase;
                        border: none;
                        background: var(--teal-95);
                        color: white;
                        border-radius: var(--radius);
                        cursor: pointer;
                        font-size: .9rem;
                        transition: background var(--tr);

                        .icon path { fill: white; }

                        label {
                            font-size: .9rem;
                            color: white;
                            cursor: pointer;
                        }

                        &:hover { background: var(--teal); }
                    }

                    .button {
                        display: flex;
                        place-content: center;
                        place-items: center;
                        font-size: .8rem;
                        color: var(--teal);
                        cursor: pointer;
                        transition: opacity var(--tr);

                        &:hover { opacity: .7; }
                    }
                }
            }
        }
    }

    /* ----- DIALOGS (connecté : profil, ajouter, recherche) ---- */

    #dialog-myprofil:checked ~ #dialogMyProfil,
    #dialog-add:checked ~ #dialogAdd,
    #dialog-toggle-login:checked ~ #dialogSearch {
        position: fixed;
        inset: 0;
        width: 100dvw;
        height: 100dvh;
        z-index: 500;
        display: flex;
        place-content: center;
        place-items: center;
        background-color: rgba(0, 0, 0, 0.55);
        border: none;

        .content {
            min-width: 300px;
            max-width: 480px;
            width: 90vw;
            max-height: 85vh;
            overflow-y: auto;
            border-radius: var(--radius-lg);
            background-color: white;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: .75rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

            .header {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-transform: uppercase;
                font-size: 1.1rem;
                border-bottom: 1px solid var(--teal-30);
                padding-bottom: .5rem;

                .closeDialog {
                    cursor: pointer;

                    .icon { height: 1.4rem; }

                    &:hover .icon path { fill: var(--teal); }
                }
            }
        }
    }
}

/* === HEADER ================================================ */

header {
    width: 100%;
    height: 70px;
    flex-shrink: 0;

    .headerMenu {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: rgba(255, 255, 255, .75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-sm);

        .headerConnected,
        .headerNotConnected {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: .4rem;
            text-transform: uppercase;

            .headerTitle {
                cursor: default;
                font-size: 1.95rem;
            }

            label {
                cursor: pointer;

                .icon { height: 2rem; }
            }

            .openMenu {
                display: flex;
                place-items: center;
                border-radius: 50px;

                .icon path { fill: black; }
            }

            .openDialog {
                .icon path { fill: black; }
            }

            .openMenu:hover,
            .openDialog:hover {
                .icon path { fill: var(--teal); }
            }
        }
    }
}

/* ----- EN-TÊTE — SÉLECTEURS EN ICÔNE (succursale, langue) ---
   Le <select> reste le contrôle réel (natif, garde le clavier/l'accessibilité d'un vrai
   select — aucun JS necessaire pour ouvrir son menu) mais devient invisible, posé en overlay
   plein cadre sur l'icône ronde : toucher/cliquer l'icône ouvre directement la liste native,
   sans afficher en permanence tout le libellé de la valeur active (qui, pour la succursale,
   prenait à lui seul une bonne partie de la largeur disponible sur petit écran). */
.iconSelect {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    transition: background var(--tr);

    &:hover {
        background: var(--teal-10);

        .icon path { fill: var(--teal); }
    }

    .icon {
        height: 1.35rem;
        flex-shrink: 0;
        pointer-events: none;

        path { fill: var(--ink-soft); }
    }

    .branchSwitcherSelect {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        border: none;
        margin: 0;
        cursor: pointer;
        appearance: none;
    }
}

/* === MAIN ================================================== */

main {
    flex: 1;
    width: 100%;
    padding: .8rem;
    overflow-y: auto;
    min-height: 0;

    /* Page d'accueil (non connecté) : le dégradé doit couvrir tout le <main>, sans
       laisser apparaître le fond blanc du body autour via le padding ci-dessus. */
    &:has(.mainNotConnected) {
        padding: 0;
    }

    /* ----- BACKGROUND (non connecté) ---- */

    .mainNotConnected {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: .6rem;
        place-items: center;
        justify-content: center;
        padding: 1rem;
        text-align: center;
        background:
            radial-gradient(circle at 50% 0%, var(--teal-15), transparent 60%),
            linear-gradient(180deg, var(--teal-05), white 55%);
        animation: heroFadeIn .5s ease both;

        .icon {
            width: auto;
            height: 22lvh;
            margin-bottom: .5rem;
            filter: drop-shadow(0 6px 18px var(--teal-30));

            path { fill: var(--teal); }
        }

        .heroTitle {
            font-size: clamp(1.8rem, 5vw, 2.6rem);
            font-weight: 700;
            letter-spacing: .04em;
            color: var(--teal-95);
        }

        .welcomeText {
            max-width: 32rem;
            color: #678;
            font-size: 1rem;
            line-height: 1.5;
        }

        .heroCta {
            display: flex;
            flex-direction: row;
            align-items: center;
            line-height: 1;
            gap: .5rem;
            margin-top: .75rem;
            padding: .75rem 1.6rem;
            border-radius: 50px;
            background: var(--teal-95);
            color: white;
            font-size: .95rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .03em;
            cursor: pointer;
            box-shadow: 0 6px 20px var(--teal-30);
            transition: background var(--tr), transform var(--tr), box-shadow var(--tr);

            /* width ET height fixés explicitement (pas seulement height) : le fichier SVG
               porte ses propres attributs HTML width="24px"/height="24px" en dur, qui
               peuvent sinon entrer en conflit avec le height seul posé en CSS et fausser
               le rapport largeur/hauteur réellement rendu — donc son alignement visuel
               avec le texte à côté. Le glyphe du cadenas n'est lui-même pas centré dans son
               propre cadre (plus de marge en bas qu'en haut) : même parfaitement centré par
               le flex, il paraît "flotter" au-dessus du texte — d'où le petit ajustement
               manuel ci-dessous pour compenser visuellement. */
            .icon {
                width: 1.2rem;
                height: 1.2rem;
                display: block;
                flex-shrink: 0;
                position: relative;
                top: 2px;
            }
            .icon path { fill: white; }

            span {
                display: flex;
                align-items: center;
                line-height: 1;
            }

            &:hover {
                background: var(--teal);
                transform: translateY(-2px);
                box-shadow: 0 10px 26px var(--teal-40);
            }
        }
    }

    @keyframes heroFadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ----- DASHBOARD - STATISTIQUES ---- */

    /* Rythme harmonisé sur tout le tableau de bord : 1rem entre les grands blocs (titre,
       barre d'outils, cartes KPI, graphiques, sections de suivi du stock) et entre les
       cartes d'une même grille — les .8rem/.95rem/.7rem d'origine, posés au fil des
       ajouts successifs, ne se justifiaient par aucune différence de nature, juste par le
       moment où chaque bloc avait été codé. Seuls les espacements internes à une carte
       (icône-texte, libellé-valeur) restent à une échelle plus fine, différence
       intentionnelle de hiérarchie, pas une incohérence à corriger. */
    .statistics {
        width: 100%;
        display: flex;
        flex-direction: column;
        text-transform: uppercase;
        gap: 1rem;
        margin-bottom: .5rem;

        .title {
            display: block;
            width: 100%;
            border-bottom: 1px solid var(--teal-30);
            padding-bottom: 4px;
            margin-bottom: .35rem;
        }

        /* Titre sur sa propre ligne (voir dashboard.php) — agrandi et plus marqué qu'un
           simple libellé de section : c'est la première chose lue sur le tableau de bord
           (période + succursale affichées), ça doit se voir tout de suite. */
        .statsTitle {
            width: 100%;

            .title {
                font-size: 1.3rem;
                font-weight: 700;
                color: var(--ink);
                border-bottom-width: 2px;
                border-bottom-color: var(--teal-40);
                padding-bottom: .5rem;
            }
        }

        /* Barre d'outils : filtre de dates à gauche, exports à droite, le tout comme un seul
           groupe qui passe à la ligne d'un bloc sur petit écran plutôt que chaque élément
           indépendamment (voir l'ancienne mise en page, où le bouton CSV finissait seul sur
           sa propre ligne). */
        .statsHeader {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            width: 100%;

            .statsExportBtns {
                flex-shrink: 0;
                display: flex;
                gap: .4rem;
            }

            /* Icône seule (pas de texte, voir document.svg/table.svg) — l'info reste
               accessible via title=/aria-label=. Même traitement rond que les icônes de
               l'en-tête (voir .iconSelect) pour rester cohérent visuellement. */
            .printBtn {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 2.6rem;
                height: 2.6rem;
                border-radius: 50%;
                border: 1px solid var(--teal-30);
                background: var(--surface);
                text-transform: none;
                cursor: pointer;
                box-shadow: var(--shadow-sm);
                transition: background var(--tr), border-color var(--tr);

                /* document.svg/table.svg sont dessinées en stroke="currentColor" (et non
                   fill), donc coloré ici via color, pas stroke — sinon la couleur ne
                   s'appliquerait pas. */
                .icon { height: 1.35rem; color: var(--teal); }

                &:hover { background: var(--teal-10); border-color: var(--teal); }
            }
        }

        #chartData { display: none; }

        /* ----- FILTRE DATES ---- */

        /* Agrandi par rapport à la version d'origine (labels .72rem, champs 3px de
           padding) — posé sur une carte blanche comme le reste des composants refondus,
           pour que le filtre de dates se voie clairement plutôt que de se fondre dans le
           fond de page. */
        .statsFilter {
            display: flex;
            align-items: center;
            gap: .8rem;
            flex-wrap: wrap;
            padding: .6rem .9rem;
            background: var(--surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);

            label {
                font-size: .82rem;
                font-weight: 700;
                color: var(--ink-soft);
                text-transform: uppercase;
            }

            input[type="date"] {
                border: 1px solid var(--teal-40);
                border-radius: var(--radius);
                padding: .4rem .6rem;
                font-size: .92rem;
                background: transparent;
                cursor: pointer;
                transition: border-color var(--tr);

                &:focus {
                    outline: none;
                    border-color: var(--teal);
                }
            }
        }

        /* ----- CARDS STATISTIQUES =================================
           Deux rangées plutôt qu'une masse uniforme de cartes égales : 3 métriques "hero"
           (stock, CA, bénéfice — ce qu'on regarde en premier) en grand avec une pastille
           d'icône colorée, puis le détail (coût, rabais, commission, pertes) juste en
           dessous, plus compact — hiérarchie inspirée des dashboards Stripe/Linear plutôt
           qu'une rangée de cartes toutes au même niveau. */
        .heroKpis {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
        }

        .secondaryKpis {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 1rem;
        }

        /* Sous ~480px, minmax(170px,1fr) tient encore à 2 colonnes serrées : titres/valeurs
           tronqués ou repliés sur eux-mêmes (voir capture — "commission maison mère (3 %)"
           coupé en deux lignes cramées). Une seule colonne pleine largeur reste bien plus
           lisible qu'une grille à 2 colonnes trop étroites pour son propre contenu. */
        @media (max-width: 480px) {
            .heroKpis,
            .secondaryKpis {
                grid-template-columns: 1fr;
            }
        }

        .card {
            display: flex;
            align-items: flex-start;
            gap: .7rem;
            border-radius: var(--radius-lg);
            padding: .8rem .95rem;
            background: var(--surface);
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--tr), transform var(--tr);

            &:hover {
                box-shadow: var(--shadow-md);
                transform: translateY(-2px);
            }

            > .icon {
                flex-shrink: 0;
                width: 2rem;
                height: 2rem;
                padding: .4rem;
                border-radius: 999px;
                box-sizing: content-box;
            }

            label {
                display: block;
                font-size: .7rem;
                color: var(--ink-soft);
                letter-spacing: .03em;
                margin-bottom: .15rem;
            }

            p { font-size: 1.05rem; font-weight: 700; color: var(--ink); }

            .cardHint {
                display: block;
                font-size: .64rem;
                color: #999;
                font-weight: 400;
                font-style: italic;
                text-transform: none;
                letter-spacing: normal;
                margin-top: .15rem;
            }

            &.cardHero {
                padding: 1.1rem 1.25rem;

                > .icon { width: 2.5rem; height: 2.5rem; padding: .55rem; }
                label { font-size: .76rem; }
                p { font-size: 1.65rem; }
            }

            /* Fond très dilué par catégorie, badge d'icône en version plus saturée — le
               ton reste discret (voir la recherche : cartes trop saturées = "criardes"). */
            &.cardStock {
                background: var(--teal-05);
                > .icon { background: var(--teal-15); path { fill: var(--teal-95); } }
            }
            &.cardCA {
                background: rgba(46, 111, 158, .05);
                > .icon { background: rgba(46, 111, 158, .15); path { fill: #2e6f9e; } }
                p { color: #2e6f9e; }
            }
            &.cardCogs {
                background: rgba(122, 135, 148, .06);
                > .icon { background: rgba(122, 135, 148, .18); path { fill: #5c6773; } }
                p { color: #5c6773; }
            }
            &.cardProfit {
                background: rgba(39, 174, 96, .06);
                > .icon { background: rgba(39, 174, 96, .16); path { fill: var(--ok); } }
                p { color: var(--ok); }
            }
            &.cardDiscount {
                background: rgba(230, 126, 34, .06);
                > .icon { background: rgba(230, 126, 34, .16); path { fill: var(--warn); } }
                p { color: var(--warn); }
            }
            &.cardLoss {
                background: rgba(192, 57, 43, .06);
                > .icon { background: rgba(192, 57, 43, .16); path { fill: var(--danger); } }
                p { color: var(--danger); }
            }
        }

        /* ----- CHARTS =============================================
           Même carte "flottante" que les KPI (fond blanc + ombre douce, plus de bordure
           dure), avec un en-tête détaché du corps du graphique par un liséré — la mise en
           forme réelle des graphiques (couleurs, barres horizontales, dégradé de la
           courbe...) vient de charts.js. */
        .statisticsCharts {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .chart {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 1rem;
            }

            .chartCategorie,
            .chartProducts,
            .chartCA {
                border-radius: var(--radius-lg);
                padding: 1rem 1.1rem;
                display: flex;
                flex-direction: column;
                gap: .7rem;
                min-width: 0;
                overflow: hidden;
                background: var(--surface);
                box-shadow: var(--shadow-sm);
                transition: box-shadow var(--tr);

                &:hover { box-shadow: var(--shadow-md); }

                > label {
                    flex-shrink: 0;
                    font-size: .78rem;
                    font-weight: 700;
                    letter-spacing: .03em;
                    color: var(--ink);
                    padding-bottom: .6rem;
                    border-bottom: 1px solid var(--line);
                }

                canvas {
                    flex: 1;
                    min-height: 0;
                    max-width: 100%;
                }
            }

            .chartCategorie,
            .chartProducts { height: 340px; }

            .chartCA { height: 280px; }
        }
    }

    /* ----- DASHBOARD - SUIVI STOCK & EXPIRATION ---- */

    .stockMonitoring {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        /* Pas de majuscules en cascade ici : les cartes contiennent des noms de
           produits/fournisseurs réels, plus lisibles en casse normale. Les libellés
           courts (titres, "produit :", "stock :"...) déclarent leur majuscule eux-mêmes. */

        .monitoring {
            width: 100%;
            display: grid;
            gap: 1rem;
            margin-top: 1.5rem;

            .title {
                display: flex;
                align-items: center;
                gap: .5rem;
                width: 100%;
                font-size: 1rem;
                font-weight: 700;
                color: var(--ink);
                padding-bottom: .5rem;
                border-bottom: 1px solid var(--line);

                .icon {
                    flex-shrink: 0;
                    width: 1.3rem;
                    height: 1.3rem;
                    path { fill: var(--teal); }
                }
            }

            .cardHint {
                display: block;
                margin-top: -.5rem;
                font-size: .74rem;
                font-style: italic;
                color: var(--ink-soft);
                text-transform: none;
            }

            .productList {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                align-items: start;
                gap: 1rem;

                .stockAlert,
                .expiredProducts {
                    display: grid;
                    gap: .7rem;
                    padding: 1rem;
                    border-radius: var(--radius-lg);
                    background: var(--surface);
                    box-shadow: var(--shadow-sm);
                    border-top: 3px solid var(--line);

                    /* La couleur de gravité marque maintenant la colonne elle-même (liséré du
                       haut + titre teinté), pas seulement chaque carte produit noyée dedans —
                       on voit "quelle colonne est grave" sans avoir à lire les chiffres. */
                    &.sevCrit { border-top-color: var(--danger); .title { color: var(--danger); } }
                    &.sevWarn { border-top-color: var(--warn);   .title { color: var(--warn); } }
                    &.sevOk   { border-top-color: var(--ok);     .title { color: var(--ok); } }

                    > .title {
                        font-size: .82rem;
                        border-bottom: none;
                        padding-bottom: 0;
                    }

                    .list {
                        max-height: 400px;
                        display: grid;
                        gap: .5rem;
                        overflow-y: auto;
                        padding-right: .2rem;

                        .products {
                            border-radius: var(--radius);
                            background-color: var(--canvas);
                            border-left: 3px solid var(--line);
                            padding: .55rem .65rem;
                            display: grid;
                            gap: .3rem;
                            transition: background var(--tr);

                            &:hover { background-color: var(--teal-05); }

                            .name,
                            .infos {
                                display: grid;
                                gap: .2rem;
                            }

                            .productName,
                            .supplierName,
                            .stock,
                            .expiration {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                gap: .5rem;

                                label {
                                    font-size: .68rem;
                                    color: var(--ink-soft);
                                    text-transform: uppercase;
                                    letter-spacing: .02em;
                                }

                                p {
                                    font-size: .82rem;
                                    font-style: normal;
                                    font-weight: 600;
                                    color: var(--ink);
                                    text-align: right;
                                }
                            }
                        }
                    }

                    /* Liséré gauche des cartes produit reprenant la gravité de la colonne — les
                       cartes ne sont plus toutes identiques une fois sorties de leur colonne. */
                    &.sevCrit .list .products { border-left-color: var(--danger); }
                    &.sevWarn .list .products { border-left-color: var(--warn); }
                    &.sevOk   .list .products { border-left-color: var(--ok); }
                }
            }
        }

        /* Prédiction de réapprovisionnement mise en avant : seule section la plus
           actionnable au quotidien (elle dit quoi commander avant la prochaine rupture,
           voir dashboard.php), posée sur un panneau teinté avec bordure gauche colorée
           plutôt qu'un simple bloc identique aux deux autres sections. */
        .monitoringHighlight {
            padding: 1rem 1.1rem;
            border-radius: var(--radius-lg);
            background: var(--teal-05);
            border-left: 4px solid var(--teal);
            box-shadow: var(--shadow-sm);
        }
    }

    .priceAlert {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .titleTypeTransaction {
            text-transform: uppercase;
            margin-bottom: 1rem;
        }
    }

    /* ----- PRODUCTS / TRANSACTIONS - LISTE ---- */

    .productList,
    .inventoryList,
    .transactionTypeList {
        width: 100%;
        margin-bottom: 1rem;
        overflow-y: auto;
        border-radius: var(--radius);

        summary {
            width: 100%;
            padding: .35rem .5rem;
            border-radius: var(--radius);
            position: sticky;
            top: 0;
            z-index: 3;
            background-color: white;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background var(--tr), color var(--tr);
        }

        .titleTypeTransaction { text-transform: uppercase; }

        .cardsContainer {
            width: 100%;
            padding: .75rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: .6rem;
            overflow-y: auto;

            #cardsContainerUsers {
                width: 100%;
                max-height: 400px;
                overflow-y: auto;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: 1rem;
            }
        }
    }

    .productList:not([open]) > summary,
    .inventoryList:not([open]) > summary,
    .transactionTypeList:not([open]) > summary {
        border: 1px solid var(--teal-15);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }

    .productList:not([open]):hover > summary,
    .inventoryList:not([open]):hover > summary,
    .transactionTypeList:not([open]):hover > summary {
        background-color: var(--teal-10);
        color: var(--teal);
        border-color: var(--teal-30);
    }

    .productList[open],
    .transactionTypeList[open] {
        max-height: 80vh;
        border: 1px solid var(--teal-30);
        overflow-y: auto;

        > summary {
            color: white;
            background-color: var(--teal-95);
            border-bottom: 1px solid var(--teal-40);
            border-radius: var(--radius) var(--radius) 0 0;
        }

        .summaryTransactions { background-color: var(--teal-95); }
    }

    /* Inventaire seul (1 niveau) */
    .inventoryList[open] {
        border: 1px solid var(--teal-30);
        overflow-y: auto;

        > summary {
            color: white;
            background-color: var(--teal-95);
            border-bottom: 1px solid var(--teal-40);
            border-radius: var(--radius) var(--radius) 0 0;
        }
    }

    /* Override cardsContainer pour lignes horizontales inventaire */
    .inventoryList {
        .cardsContainer {
            display: flex;
            flex-direction: column;
            gap: .35rem;
            padding: .5rem;
            grid-template-columns: unset;
        }
    }

    .transactionTypeList {
        .cardsContainer {
            display: flex;
            flex-direction: column;
            gap: .6rem;

            /* 2ème niveau — catégories */
            .inventoryList {
                margin-bottom: 0;
                border: 1px solid var(--teal-20);
                border-radius: var(--radius);

                > summary {
                    font-size: .95rem;
                    padding: .3rem .75rem;
                    border-radius: var(--radius);
                    background-color: var(--teal-05);
                    color: #444;
                    border-left: 3px solid var(--teal-40);
                }

                &[open] > summary {
                    background-color: var(--teal-20);
                    color: var(--teal);
                    border-left-color: var(--teal);
                    border-bottom: 1px solid var(--teal-30);
                    border-radius: var(--radius) var(--radius) 0 0;
                }

                &:not([open]):hover > summary {
                    background-color: var(--teal-10);
                    color: var(--teal);
                }

                .cardsContainer {
                    display: flex;
                    flex-direction: column;
                    gap: .35rem;
                    padding: .5rem;
                }
            }
        }
    }
}

/* === ACTION DE PAGE ISOLÉE (ex. company-settings) ===========
   Bouton unique hors du contexte d'une ligne de tableau ou d'une carte (donc non couvert
   par .productRowActions .cardActions, qui exige cet ancêtre et masque le texte) — on garde
   ici l'icône ET le texte, plus lisible pour un bouton seul en tête de page. Règle globale
   volontairement, pas nichée sous un conteneur de page précis, pour rester réutilisable. */
.pageActionsRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}

.pageAction {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border: 1px solid var(--teal-30);
    border-radius: var(--radius);
    color: var(--teal);
    font-size: .85rem;
    cursor: pointer;
    transition: background var(--tr), color var(--tr);

    svg { width: 1.1rem; height: auto; }

    &:hover {
        background: var(--teal);
        color: #fff;

        svg path { fill: #fff; }
    }
}

/* === PAGES - CONTENEURS COMMUNS ============================ */

.viewsProducts,
.viewsUsers,
.branches,
.countries,
.regions,
.cities,
.roles,
.permissions,
.permissionAssignments,
.help {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    /* Pas de majuscules en cascade : ces conteneurs affichent des noms réels
       (produits, utilisateurs, villes...), plus lisibles en casse normale. */

    > h3 {
        text-transform: uppercase;
        border-bottom: 1px solid var(--teal-30);
        padding-bottom: 4px;
        margin-bottom: .35rem;
        color: var(--teal);
    }
}

/* === MATRICE PERMISSIONS × RÔLES =========================== */

/* Une carte indépendante par ressource — plus aérée et lisible qu'un seul
   tableau géant regroupant toutes les permissions. */
.permMatrixGroups {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.permGroupCard {
    border: 1px solid var(--teal-20);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.permGroupTitle {
    background: var(--teal);
    color: white;
    font-size: .85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .6rem .9rem;
    border-bottom: 2px solid white;
}

.permMatrixWrap {
    overflow-x: auto;
    width: 100%;
}

.permMatrix {
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .85rem;
    text-transform: none;
    width: 100%;

    th, td {
        border: 1px solid var(--teal-15);
        vertical-align: middle;
        text-align: center;
    }

    .permLabelHeader {
        width: 260px;
        text-align: left;
        white-space: nowrap;
        background: var(--teal-95);
        color: white;
        font-size: .75rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: .55rem .9rem;
    }

    .roleHeader {
        white-space: nowrap;
        background: var(--teal-95);
        color: white;
        font-size: .74rem;
        font-weight: bold;
        text-transform: uppercase;
        padding: .55rem .9rem;
        letter-spacing: .04em;
    }

    tbody tr:nth-of-type(even) .permLabel,
    tbody tr:nth-of-type(even) .matrixCell {
        background: var(--teal-05);
    }

    .permLabel {
        text-align: left;
        white-space: normal;
        overflow-wrap: break-word;
        padding: .65rem .9rem;
        background: white;

        .permAction {
            display: block;
            font-weight: 700;
            color: var(--teal);
            font-size: .82rem;
            text-transform: uppercase;
        }

        .permName {
            display: block;
            font-size: .72rem;
            color: #999;
            margin-top: .1rem;
        }
    }

    .matrixCell {
        padding: .65rem .9rem;
        cursor: pointer;
        transition: background var(--tr);
        user-select: none;

        svg { width: 1.2rem; height: auto; pointer-events: none; }

        &:hover { background: var(--teal-10); }
        &.assigned { background: color-mix(in srgb, var(--teal) 10%, white); }
        &.assigned:hover { background: color-mix(in srgb, var(--teal) 18%, white); }
        &.assigned svg path { fill: var(--teal); }
        &.branchScoped.assigned { background: color-mix(in srgb, orange 15%, white); }
        &.branchScoped.assigned svg path { fill: #b8730a; }
        &.branchScoped.assigned:hover { background: color-mix(in srgb, orange 25%, white); }
        &.locked { cursor: not-allowed; opacity: .55; }
        &.locked:hover { background: transparent; }
    }

    tbody tr:hover .permLabel,
    tbody tr:hover .matrixCell { background: var(--teal-10); }
}

.matrixScopeSelector {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;

    .matrixScopeHint {
        flex-basis: 100%;
        font-size: .78rem;
        color: #777;
        font-style: italic;
    }
}

@media (max-width: 640px) {
    .permMatrix .roleHeader {
        white-space: nowrap;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding: .5rem .25rem;
        height: 70px;
    }
}

/* === DETAILS / SUMMARY - INDICATEUR COMMUN ================= */
/* Chevron générique (le marqueur natif est supprimé par le reset global list-style-type: none) */

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    margin-right: .5rem;
    opacity: .5;
    transition: transform var(--tr);
    vertical-align: middle;
    flex-shrink: 0;
}

details[open] > summary::before {
    transform: rotate(90deg);
}

/* === DETAILS / SUMMARY - GROUPEMENTS ======================= */

.countriesList,
.regionsList,
.citiesList,
.branchesList,
.permissionsList,
.rolePermissionsList,
.helpList {
    width: 100%;
    overflow-y: auto;
    border-radius: var(--radius);
    margin-bottom: .5rem;

    summary {
        width: 100%;
        padding: .35rem .5rem;
        border-radius: var(--radius);
        font-size: 1.05rem;
        cursor: pointer;
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 1;
        transition: background var(--tr);
    }

    summary:hover { background-color: var(--teal-10); }

    &:not([open]) > summary {
        border: 1px solid var(--teal-15);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }

    &:not([open]) > summary:hover {
        border-color: var(--teal-30);
    }

    &[open] {
        border: 1px solid var(--teal-40);

        > summary {
            border-bottom: 1px solid var(--teal-40);
            border-radius: var(--radius) var(--radius) 0 0;
        }
    }

    .cardsContainer {
        width: 100%;
        padding: .75rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: .75rem;
    }
}

/* Niveau 1 — Pays / Permissions / Rôles / Aide */
.countriesList[open] > summary,
.permissionsList[open] > summary,
.rolePermissionsList[open] > summary,
.helpList[open] > summary {
    background-color: var(--teal-95);
    color: white;
}

/* === PAGE AIDE ===============================================
   Contenu texte (pas de cardsContainer, contrairement aux autres groupes
   .xxxList) : seule la typographie à l'intérieur d'un .helpList est propre
   à cette page — l'accordéon lui-même réutilise le style commun ci-dessus. */

.helpList {
    summary {
        display: flex;
        align-items: center;
        gap: .6rem;

        .icon { height: 1.2rem; flex-shrink: 0; path { fill: var(--teal); } }
    }

    &[open] > summary .icon path { fill: white; }

    .helpContent {
        padding: .9rem 1rem 1rem 2.4rem;
        font-size: .92rem;
        line-height: 1.6;
        color: #333;

        h4 {
            margin: .9rem 0 .3rem;
            font-size: .85rem;
            text-transform: uppercase;
            letter-spacing: .02em;
            color: var(--teal-95);
        }

        h4:first-child { margin-top: 0; }

        p { margin: .4rem 0; }

        ul {
            margin: .4rem 0;
            padding-left: 1.1rem;
            display: grid;
            gap: .3rem;

            li { list-style: disc; }
        }

        strong { color: #111; }

        .hlOk   { color: var(--ok);     font-weight: 600; }
        .hlWarn { color: var(--warn);   font-weight: 600; }
        .hlCrit { color: var(--danger); font-weight: 600; }
    }
}

/* Summary avec bouton d'ajout par rôle */
.rolePermSummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;

    .roleLabel { flex: 1; }

    .addPerRoleBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .15rem;
        border-radius: var(--radius);
        cursor: pointer;
        transition: background var(--tr), color var(--tr);
        color: inherit;
        flex-shrink: 0;

        svg { width: 1.2rem; height: auto; }

        &:hover {
            background: rgba(255,255,255,.2);
            svg path { fill: currentColor; }
        }
    }
}

/* Grid optimisée — permission-assignments (lignes courtes) */
.rolePermissionsList .cardsContainer {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Présentation verticale — pages villes, succursales & utilisateurs (arborescence à lire de haut en bas) */
.cities .cardsContainer,
.branches .cardsContainer,
.viewsUsers .cardsContainer {
    grid-template-columns: 1fr;
}

/* Niveau 2 — Région */
.regionsList {
    width: calc(100% - 1rem);
    margin-left: 1rem;
    border-left: 3px solid var(--teal-30);
}

.regionsList[open] > summary {
    background-color: var(--teal-20);
    color: var(--teal);
    border-bottom-color: var(--teal-30);
}

/* Niveau 3 — Ville */
.citiesList {
    width: calc(100% - 1rem);
    margin-left: 1rem;
    border-left: 3px solid var(--teal-20);
}

.citiesList[open] > summary {
    background-color: var(--teal-10);
    color: var(--teal);
    border-bottom-color: var(--teal-20);
}

/* Niveau 4 — Succursale */
.branchesList {
    width: calc(100% - 1rem);
    margin-left: 1rem;
    border-left: 3px solid var(--teal-15);
}

.branchesList[open] > summary {
    background-color: white;
    color: var(--teal);
    border-bottom-color: var(--teal-20);
}

/* === BTNS COMMUNS ========================================== */

.branchesCards .btns,
.countriesCards .btns,
.regionsCards .btns,
.citiesCards .btns,
.rolesCards .btns,
.permissionsCards .btns,
.assignmentCards .btns,
.usersCards .btns,
.sellingPricesCards .btns,
.cardsContainer .products .btns {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: .5rem;
    padding: .35rem;

    label {
        display: flex;
        align-items: center;
        gap: .2rem;
        cursor: pointer;
        text-transform: capitalize;
        font-size: .82rem;
        transition: color var(--tr);

        &:hover {
            color: var(--teal);

            svg path { fill: var(--teal); }
        }

        svg {
            width: 1.4rem;
            height: auto;
        }

        .labelBtn { display: none; }
    }
}

.roles > .cardsContainer {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* === SURFACE COMMUNE DES CARTES =============================
   Un seul point d'entrée pour donner un fond blanc + une ombre douce à toutes les variantes
   de cartes de l'appli, plutôt que de dupliquer background/box-shadow dans chacun de leurs
   blocs — leurs bordures/rayons/hover spécifiques restent gérés plus bas comme avant. */
.countriesCards, .regionsCards, .citiesCards, .usersCards, .rolesCards, .permissionsCards,
.assignmentCards, .branchesCards, .inventoriesCards, .transactionsCards, .sellingPricesCards,
.productsCards, .typeTransactionsCards, .cardsContainer .products {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* === CARDS SIMPLES (sans image) ============================ */

.countriesCards,
.regionsCards,
.citiesCards,
.usersCards,
.rolesCards,
.permissionsCards,
.assignmentCards {
    border-radius: var(--radius);
    border: 1px solid var(--teal-20);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    transition: border-color var(--tr), box-shadow var(--tr);

    &:hover {
        border-color: var(--teal-50);
        box-shadow: 0 2px 8px var(--teal-10);
    }

    label {
        text-transform: uppercase;
        font-size: .82rem;
        font-weight: bold;
    }

    p {
        font-size: .88rem;
        font-style: italic;
    }

    span { font-size: .8rem; }
}

/* Boutons d'action à droite, alignés comme dans la page succursales */
.countriesCards,
.regionsCards,
.citiesCards,
.rolesCards,
.usersCards {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.usersCards {
    .userInfos {
        text-align: left;
        flex: 1;
        padding: .35rem;

        h3 { font-size: 1rem; }

        .username {
            font-style: italic;
            font-size: .85rem;
            color: gray;
        }

        .userRoleBadge, .userBranchBadge {
            display: block;
            font-size: .8rem;
            color: var(--ink-soft);
            margin-top: .15rem;
        }
    }
}

.branchesCards {
    border-radius: var(--radius);
    border: 1px solid var(--teal-20);
    padding: .5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: border-color var(--tr), box-shadow var(--tr);

    &:hover {
        border-color: var(--teal-50);
        box-shadow: 0 2px 8px var(--teal-10);
    }

    .infoBranch {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: .4rem;

        > div {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            padding: .3rem;
            border: 1px solid var(--teal-20);
            border-radius: var(--radius);

            label {
                text-transform: uppercase;
                font-size: .78rem;
                font-weight: bold;
                border-bottom: 1px solid var(--teal-15);
                padding-bottom: 2px;
            }

            p {
                font-size: .85rem;
                font-style: italic;
            }
        }
    }
}

.countriesCards .infoCountry,
.regionsCards .infoRegion,
.citiesCards .infoCity {
    flex: 1;
}

.rolesCards {
    .roleInfos {
        flex: 1;

        h3 {
            font-size: 1rem;
        }

        p {
            font-style: normal;
            font-size: .82rem;
            color: #444;
        }

        .priority {
            font-size: .75rem;
            color: gray;
        }
    }
}

.permissionsCards {
    .permissionInfos {
        border-bottom: 1px solid var(--teal-20);
        padding-bottom: .35rem;

        .permAction {
            color: var(--teal);
            font-style: normal;
        }

        .permDesc {
            font-style: normal;
            font-size: .8rem;
            text-transform: none;
            color: gray;
        }
    }
}

.assignmentCards {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .35rem .5rem;

    .assignmentInfos {
        flex: 1;

        p { font-size: .88rem; }

        .permAction {
            font-size: .8rem;
            color: var(--teal);
        }
    }

    .btns {
        justify-content: flex-end;
        padding: 0;

        label .labelBtn { display: none; }
    }
}

/* === CARDS INVENTAIRE & TRANSACTIONS (lignes horizontales) == */

.inventoriesCards,
.transactionsCards {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .6rem;
    border-radius: var(--radius);
    border: 1px solid var(--teal-20);
    transition: border-color var(--tr), box-shadow var(--tr);

    &:hover {
        border-color: var(--teal-50);
        box-shadow: 0 2px 6px var(--teal-10);
    }

    .cardThumb {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: var(--radius);
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid var(--teal-15);
        background: var(--teal-05);

        img, svg { width: 100%; height: 100%; object-fit: contain; }
    }

    .cardBody {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: .15rem;

        .cardTitle {
            font-size: .85rem;
            font-weight: bold;
            line-height: 1.2;
        }

        .cardSub {
            font-size: .72rem;
            color: #888;
            font-style: italic;
        }
    }

    .cardData {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .2rem;
        flex-shrink: 0;

        .dataRow {
            display: flex;
            align-items: baseline;
            gap: .3rem;
            padding: 1px 5px;
            border-radius: var(--radius);

            .dataLabel {
                font-size: .66rem;
                text-transform: uppercase;
                color: #aaa;
                font-weight: bold;
                flex-shrink: 0;
            }

            .dataValue {
                font-size: .78rem;
                font-weight: 500;
                text-align: right;
            }

            /* Suivi de stock (ligne "qté") et alerte d'expiration (ligne "exp.") — mêmes
               teintes/seuils que les alertes du dashboard, appliquées ici par ligne plutôt
               que sur toute la carte : une carte peut être à la fois en stock faible et
               proche de la date d'expiration, ce sont deux signaux distincts. */
            &.sevOk {
                background-color: rgba(39, 174, 96, .1);

                .dataLabel, .dataValue { color: #1e8449; }
            }

            &.sevWarn {
                background-color: rgba(230, 126, 34, .1);

                .dataLabel, .dataValue { color: #b9670c; }
            }

            &.sevCrit {
                background-color: rgba(192, 57, 43, .1);

                .dataLabel, .dataValue { color: #a93226; }
            }
        }
    }

    .cardActions {
        display: flex;
        gap: .2rem;
        flex-shrink: 0;

        label {
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #666;
            transition: color var(--tr);

            &:hover {
                color: var(--teal);
                svg path { fill: var(--teal); }
            }

            svg { width: 1.3rem; height: auto; }
            .labelBtn { display: none; }
        }
    }
}

/* === CARDS PRIX (selling prices — structure conservée) ====== */

.sellingPricesCards {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid var(--teal-20);
    overflow: hidden;
    transition: border-color var(--tr), box-shadow var(--tr), opacity var(--tr), filter var(--tr);

    &:hover {
        border-color: var(--teal-50);
        box-shadow: 0 2px 8px var(--teal-10);
    }

    .imgBtn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .5rem;

        .img {
            width: 5rem;
            min-width: 5rem;
            height: 5rem;
            overflow: hidden;
            border-radius: var(--radius);
            border: 1px solid var(--teal-20);

            img, svg {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .btns {
            flex-direction: column;
            height: 5rem;
            justify-content: space-evenly;
            align-items: flex-end;
        }
    }

    .infoProduct {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: .4rem;
        padding: .5rem;
        border-top: 1px solid var(--teal-30);
        background: var(--teal-05);

        > div {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            padding: .25rem;
            border: 1px solid var(--teal-20);
            border-radius: var(--radius);
            background: white;

            label {
                text-transform: uppercase;
                font-size: .78rem;
                font-weight: bold;
                border-bottom: 1px solid var(--teal-20);
                padding-bottom: 2px;
            }

            p {
                font-size: .82rem;
                font-style: italic;
            }
        }
    }
}

/* === SELLINGPRICES inactive ================================= */

.sellingPricesCards.inactive {
    border: 1px dashed #999;
    background: #f2f2f2;

    &::before {
        content: 'inactif';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        padding: .2rem .6rem;
        white-space: nowrap;
        text-align: center;
        text-transform: uppercase;
        font-size: .72rem;
        font-weight: bold;
        letter-spacing: .03em;
        color: white;
        background: #7a7a7a;
        border-radius: 0 0 var(--radius) 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        pointer-events: none;
    }

    .imgBtn .img {
        border-color: #ccc;
        filter: grayscale(1);
        opacity: .6;
    }

    .imgBtn .btns label {
        color: white;
        background: var(--teal);
        border-radius: var(--radius);
        padding: .3rem .5rem;

        svg path { fill: white; }

        &:hover {
            background: var(--teal-h, var(--teal));
            color: white;

            svg path { fill: white; }
        }
    }

    .infoProduct {
        background: #ececec;

        > div {
            background: #f7f7f7;
            border-color: #ddd;
        }

        label, p { color: #888; }
    }
}

/* === CARDS PRODUITS (liste produits) ======================= */

.productsCards {
    .cardImage {
        aspect-ratio: unset;
        height: 4.5rem;
    }

    .cardCapacity {
        font-size: .78rem;
        color: #666;
        text-align: center;
    }

    .cardMeta {
        font-size: .72rem;
        color: #999;
        font-style: italic;
        text-align: center;
        word-break: break-word;
    }
}

/* === CARDS TYPES DE TRANSACTIONS =========================== */

.ttGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .5rem;
}

.typeTransactionsCards {
    border-radius: var(--radius);
    border: 1px solid var(--teal-20);
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    transition: border-color var(--tr), box-shadow var(--tr);

    &:hover {
        border-color: var(--teal-50);
        box-shadow: 0 2px 6px var(--teal-10);
    }

    .cardName {
        font-size: .88rem;
        font-weight: bold;
        flex: 1;
    }

    .cardActions {
        display: flex;
        gap: .3rem;
        flex-shrink: 0;

        label {
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #666;
            transition: color var(--tr);

            &:hover {
                color: var(--teal);
                svg path { fill: var(--teal); }
            }

            svg { width: 1.3rem; height: auto; }
            .labelBtn { display: none; }
        }
    }
}

/* === CARDS CATÉGORIES / FOURNISSEURS / MARQUES ============= */

/* === ENTITY GRID ============================================ */

.entityGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}

.typeTransactionsCards {
    .btns.typeTransaction {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .5rem .75rem;

        .typeTransactionName {
            font-size: 1rem;
        }

        .btnsTransaction {
            display: flex;
            align-items: center;
            gap: .5rem;

            .btn {
                display: flex;
                align-items: center;
                gap: .2rem;
                cursor: pointer;
                text-transform: capitalize;
                font-size: .82rem;
                transition: color var(--tr);

                &:hover {
                    color: var(--teal);

                    svg path { fill: var(--teal); }
                }

                svg {
                    width: 1.4rem;
                    height: auto;
                }
            }
        }
    }
}

/* === STOCK LIMITS ========================================== */

.viewsProducts {
    .productList .cardsContainer.stockLimitsGrid {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        overflow-x: visible;
    }

    .legendStockLimits {
        font-size: .8rem;
        text-transform: none;
        opacity: .75;

        .statusOk      { color: var(--ok);      font-weight: bold; font-style: normal; }
        .statusFaible  { color: var(--warn);     font-weight: bold; font-style: normal; }
        .statusCritique{ color: var(--crit);     font-weight: bold; font-style: normal; }
        .statusRupture { color: var(--danger);   font-weight: bold; font-style: normal; }
    }

    .cardsContainer .products {
        display: flex;
        gap: .75rem;
        border: 1px solid var(--teal-20);
        border-radius: var(--radius);
        padding: .6rem;
        transition: border-color var(--tr), box-shadow var(--tr);

        &:hover {
            border-color: var(--teal-40);
            box-shadow: 0 2px 8px var(--teal-10);
        }

        .name {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: .35rem;

            .productName,
            .supplierName {
                display: flex;
                flex-direction: column;
                gap: .1rem;

                label {
                    font-size: .7rem;
                    font-weight: bold;
                    text-transform: uppercase;
                    opacity: .6;
                }

                p {
                    font-size: .88rem;
                    font-style: italic;
                    text-transform: initial;
                }
            }
        }

        .infos {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-between;
            gap: .5rem;
            min-width: 6rem;

            .stock {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: .1rem;

                label {
                    font-size: .7rem;
                    font-weight: bold;
                    text-transform: uppercase;
                    opacity: .6;
                }

                p { font-size: .88rem; font-style: italic; }
            }

            .stockStatus {
                padding: .2rem .55rem;
                border-radius: 99px;
                font-size: .7rem;
                font-weight: bold;
                text-transform: uppercase;

                p { font-size: inherit; font-style: normal; }
            }

            .statusOk {
                background: rgba(39, 174, 96, 0.1);
                color: var(--ok);
                border: 1px solid rgba(39, 174, 96, 0.3);
            }

            .statusFaible {
                background: rgba(230, 126, 34, 0.1);
                color: var(--warn);
                border: 1px solid rgba(230, 126, 34, 0.3);
            }

            .statusCritique {
                background: rgba(211, 84, 0, 0.1);
                color: var(--crit);
                border: 1px solid rgba(211, 84, 0, 0.3);
            }

            .statusRupture {
                background: rgba(192, 57, 43, 0.1);
                color: var(--danger);
                border: 1px solid rgba(192, 57, 43, 0.3);
            }
        }
    }
}

/* === BONS DE COMMANDE — boutons d'action ===================
   Contrairement aux boutons d'icône seule des listes simples (modifier/supprimer, déjà
   connus par convention), ces boutons changent l'état de la commande (envoi, réception,
   annulation...) : le texte reste toujours visible, et une couleur par nature d'action
   (primary = envoi/réception, warn = nouvelle tentative ou annulation, danger =
   suppression définitive) permet de les distinguer d'un coup d'œil, y compris "envoyer"
   par email vs par API qui utilisaient jusqu'ici la même icône. */
/* Espacement entre les cartes de bons de commande, explicite plutôt que confié aux règles
   génériques .cardsContainer (qui ne s'appliquent qu'à d'autres pages, imbriquées sous des
   classes que purchase-orders.php n'a pas). */
.purchaseOrdersList .cardsContainer.stockLimitsGrid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.purchaseOrdersList .products .name .poNotes {
    display: flex;
    flex-direction: column;
    gap: .1rem;

    label {
        font-size: .68rem;
        font-weight: bold;
        text-transform: uppercase;
        opacity: .5;
    }

    p {
        font-size: .8rem;
        font-style: italic;
        color: #666;
        white-space: pre-line;
        overflow-wrap: break-word;
    }
}

.purchaseOrdersList .products {
    flex-wrap: wrap;
    align-items: flex-start;

    .poBtns {
        flex-direction: column;
        align-items: stretch;
        gap: .3rem;

        /* Sans qualifier de balise : ce bouton est tantôt un <label> (actions qui postent via
           htmx), tantôt un <a> (export PDF — lien natif, voir purchase-orders.php) — un
           sélecteur "label.poActionBtn" laissait le second sans la moindre mise en forme
           structurelle (juste ses couleurs de variante), d'où un lien nu mal aligné. */
        .poActionBtn {
            display: flex;
            align-items: center;
            gap: .3rem;
            padding: .3rem .6rem;
            border-radius: var(--radius);
            border: 1px solid transparent;
            font-size: .78rem;
            font-weight: 600;
            white-space: nowrap;
            text-decoration: none;

            .labelBtn { display: inline; }

            svg { width: 1.1rem; height: auto; flex-shrink: 0; }
        }

        /* primary/success pleins (action principale du bon à cet instant : envoyer, réceptionner)
           — warn/danger restent en pastille teintée juste en dessous, pour que l'action utile
           domine visuellement au lieu d'être noyée par des boutons secondaires plus saturés. */
        .poActionBtn--primary {
            color: white;
            background: var(--teal);
            border-color: var(--teal);

            &:hover { background: #4c8987; }

            svg path { fill: white; }
        }

        .poActionBtn--success {
            color: white;
            background: var(--ok);
            border-color: var(--ok);

            &:hover { background: #1e8449; }

            svg path { fill: white; }
        }

        .poActionBtn--warn {
            color: var(--warn);
            background: rgba(230, 126, 34, .1);
            border-color: rgba(230, 126, 34, .3);

            &:hover { background: rgba(230, 126, 34, .2); }

            svg path { fill: var(--warn); }
        }

        .poActionBtn--danger {
            color: var(--danger);
            background: rgba(192, 57, 43, .1);
            border-color: rgba(192, 57, 43, .3);

            &:hover { background: rgba(192, 57, 43, .2); }

            svg path { fill: var(--danger); }
        }

        /* Export PDF — action passive (ne change rien au bon), disponible quel que soit son
           statut : volontairement plus discrète que les actions qui font avancer la commande
           (envoyer, réceptionner...), mais avec le même traitement "bouton secondaire" que le
           reste du site (voir .formActions .btn) plutôt qu'un gris plat qui se lisait comme
           désactivé. */
        .poActionBtn--neutral {
            color: #333;
            background: white;
            border-color: var(--teal-40);

            &:hover { background: var(--teal-10); border-color: var(--teal-80); }

            svg path { fill: #333; }
        }
    }

    /* Lignes du bon, repliées par défaut — regroupe ce qui vivait avant sur la page séparée
       "lignes de commande" directement dans la carte de son bon, pour ne plus avoir à
       naviguer entre les deux pour une même commande. flex-basis:100% la fait passer à la
       ligne sous le reste de la carte (name/infos/btns), qui reste en display:flex. */
    .poItemsDetails {
        flex-basis: 100%;
        margin-top: .6rem;
        padding-top: .5rem;
        border-top: 1px solid var(--teal-15);

        /* Le chevron vient déjà de la règle générique summary::before (voir plus haut, section
           "DETAILS / SUMMARY - INDICATEUR COMMUN") — ne pas en redéclarer un ici, sinon les
           deux se superposent (bordure-triangle générique + caractère '▸' redondant). */
        summary {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            font-size: .78rem;
            font-weight: 600;
            color: var(--teal);
        }

        &[open] summary { margin-bottom: .2rem; }

        .poItemRow {
            display: flex;
            align-items: center;
            gap: .6rem;
            padding: .35rem 0 .35rem .9rem;
            border-top: 1px solid var(--teal-10);
            font-size: .8rem;

            .poItemName { flex: 1; min-width: 0; }
            .poItemQty  { color: #888; white-space: nowrap; }
            .poItemTotal { font-weight: 600; white-space: nowrap; }

            /* .stockStatus/.statusOk ne sont stylées que dans .infos (voir plus haut) — cette
               étiquette vit dans .poItemsDetails, hors de ce bloc, donc redéclarée ici. */
            .poItemReceived {
                padding: .15rem .5rem;
                border-radius: 99px;
                font-size: .68rem;
                font-weight: bold;
                text-transform: uppercase;
                white-space: nowrap;
                background: rgba(39, 174, 96, .1);
                color: var(--ok);
                border: 1px solid rgba(39, 174, 96, .3);
            }

            .cardActions {
                display: flex;
                gap: .3rem;
                flex-shrink: 0;

                label {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    color: #888;
                    transition: color var(--tr);

                    &:hover { color: var(--teal); svg path { fill: var(--teal); } }

                    svg { width: 1.15rem; height: auto; }
                    .labelBtn { display: none; }
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .purchaseOrdersList .products .poItemRow {
        flex-wrap: wrap;
    }
}

/* Le bloc "infos" (règle générique .viewsProducts .cardsContainer .products .infos plus haut)
   répartit ses deux enfants (compteur de lignes, badges de statut) aux deux extrémités de sa
   hauteur avec justify-content:space-between — pensé pour une colonne de boutons courte à
   côté. Depuis que .poBtns est empilé verticalement (donc bien plus haut), cet espacement
   étire les badges de statut vers le bas de la carte, loin du compteur de lignes. Sélecteur
   de même poids que l'original (.viewsProducts et .purchaseOrdersList sont sur le même
   conteneur, voir purchase-orders.php) pour le neutraliser ici sans toucher aux autres pages
   qui réutilisent .products (dashboard, ex-purchase-order-items).
*/
.viewsProducts.purchaseOrdersList .cardsContainer .products .infos {
    justify-content: flex-start;
}

/* === DIALOG MON PROFIL ===================================== */

#dialogMyProfil {
    form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: .5rem 0 0;
    }

    .profilHeader {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--teal-20);

        .profilIcon {
            width: 3.5rem;
            height: 3.5rem;

            path { fill: var(--teal); }
        }

        .profilName {
            font-size: 1.1rem;
            color: var(--teal-80);
        }
    }

    fieldset {
        display: flex;
        flex-direction: column;
        gap: .6rem;
        border: none;
        margin: 0;
        padding: 0;
    }

    .formGroup {
        display: flex;
        flex-direction: column;
        gap: .3rem;
        padding: .4rem .6rem;
        border: 1px solid var(--teal-20);
        border-radius: var(--radius);
        background: var(--teal-05);

        label {
            text-transform: uppercase;
            font-size: .75rem;
            font-weight: bold;
            color: #555;
        }

        p {
            font-style: italic;
            font-size: .9rem;
        }

        input {
            height: 2.2rem;
            border-radius: var(--radius);
            border: 1px solid var(--teal-40);
            padding: .25rem .6rem;
            font-size: .9rem;
            background: white;
            transition: border-color var(--tr), box-shadow var(--tr);

            &:focus {
                outline: none;
                border-color: var(--teal);
                box-shadow: 0 0 0 3px var(--teal-10);
            }
        }

        .errorMsg {
            font-size: .75rem;
            color: var(--danger);
            font-style: italic;
        }

        .fieldHint {
            font-size: .72rem;
            color: #888;
            font-style: normal;
        }
    }

    .successMsg {
        font-size: .85rem;
        color: var(--ok);
        text-align: center;
    }

    .formButtons {
        display: flex;
        flex-direction: column;
        gap: .5rem;

        button {
            height: 2.4rem;
            display: flex;
            place-content: center;
            place-items: center;
            gap: .5rem;
            text-transform: uppercase;
            border: none;
            background: var(--teal-95);
            color: white;
            border-radius: var(--radius);
            cursor: pointer;
            font-size: .9rem;
            transition: background var(--tr);

            .icon path { fill: white; }

            label {
                font-size: .9rem;
                color: white;
                cursor: pointer;
            }

            &:hover { background: var(--teal); }
        }
    }
}

/* === DIALOG AJOUTER ======================================== */

#dialogAdd {
    .addList {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: .5rem;
        padding: .5rem 0;

        .addLink {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .35rem;
            padding: .6rem .5rem;
            border: 1px solid var(--teal-30);
            border-radius: var(--radius);
            cursor: pointer;
            text-align: center;
            transition: background var(--tr), border-color var(--tr);

            &:hover {
                background-color: var(--teal-10);
                border-color: var(--teal-80);
            }

            .icon {
                width: 1.75rem;
                height: 1.75rem;
            }

            .addLabel {
                font-size: .78rem;
                text-transform: uppercase;
            }
        }
    }
}

/* === DIALOG RECHERCHE ====================================== */

#dialogSearch {
    form {
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    fieldset {
        border: none;
        margin: 0;
        padding: 0;
    }

    .formButtons {
        display: flex;

        button {
            height: 2.4rem;
            width: 100%;
            display: flex;
            place-content: center;
            place-items: center;
            gap: .5rem;
            text-transform: uppercase;
            border: none;
            background: var(--teal-95);
            color: white;
            border-radius: var(--radius);
            cursor: pointer;
            font-size: .9rem;
            transition: background var(--tr);

            .icon path { fill: white; }

            label {
                font-size: .9rem;
                color: white;
                cursor: pointer;
            }

            &:hover { background: var(--teal); }
        }
    }

    .inputSearch {
        width: 100%;
        height: 2.2rem;
        border-radius: var(--radius);
        border: 1px solid var(--teal-40);
        padding: .25rem .5rem;
        font-size: 1rem;
        transition: border-color var(--tr);

        &:focus {
            outline: none;
            border-color: var(--teal);
        }
    }

    .searchResults {
        max-height: 320px;
        overflow-y: auto;
        margin-top: .5rem;

        .searchEmpty {
            font-size: .85rem;
            color: #666;
            padding: .35rem 0;
        }

        .searchResultGroup {
            margin-bottom: .75rem;

            .searchResultTitle {
                font-size: .68rem;
                text-transform: uppercase;
                letter-spacing: .07em;
                color: var(--teal);
                opacity: .8;
                margin: .5rem 0 .25rem;
                padding-bottom: .15rem;
                border-bottom: 1px solid var(--teal-15);
            }

            .searchResultList {
                padding: 0;
                margin: 0;

                li + li { border-top: 1px solid var(--teal-10); }
            }

            .searchResultLink {
                display: flex;
                flex-direction: column;
                padding: .4rem .35rem;
                color: inherit;
                border-radius: var(--radius);
                transition: background var(--tr);

                &:hover { background-color: var(--teal-10); }

                .searchResultName {
                    font-size: .875rem;
                    font-weight: 500;
                }

                .searchResultSub {
                    font-size: .75rem;
                    color: #888;
                }
            }
        }
    }
}

/* === HISTORIQUE (INVENTAIRE + TRANSACTIONS) ================ */

.historyFilters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;

    .historyFilterField {
        display: flex;
        flex-direction: column;
        gap: .25rem;

        label {
            font-size: .72rem;
            text-transform: uppercase;
            opacity: .7;
        }

        input[type="date"],
        select {
            border: 1px solid var(--teal-40);
            border-radius: var(--radius);
            padding: 4px 8px;
            font-size: .8rem;
            background: white;

            &:focus {
                outline: none;
                border-color: var(--teal);
            }
        }
    }
}

.historySection {
    margin-bottom: 1.75rem;

    .historySectionTitle {
        text-transform: uppercase;
        font-size: .85rem;
        letter-spacing: .05em;
        color: var(--teal);
        border-bottom: 1px solid var(--teal-30);
        padding-bottom: 4px;
        margin-bottom: .6rem;
    }
}

/* Tableau "minimal" : plus de quadrillage cellule par cellule ni de zébrage — juste un
   liséré sous chaque ligne, un en-tête clair, et le tout posé sur une carte blanche avec
   ombre douce plutôt qu'une bordure dure, cohérent avec le reste de la refonte claire. */
.historyTableWrap {
    overflow-x: auto;
    width: 100%;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.historyTable {
    border-collapse: collapse;
    width: 100%;
    font-size: .82rem;

    th, td {
        padding: .65rem .85rem;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid var(--line);
    }

    thead th {
        background: var(--canvas);
        color: var(--ink-soft);
        text-transform: uppercase;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .04em;
        border-bottom: 1px solid var(--line);
    }

    tbody tr {
        transition: background var(--tr);
    }

    tbody tr:hover {
        background: var(--teal-05);
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    .histStatusActive {
        color: var(--ok);
        font-weight: 600;
    }

    .histStatusInactive {
        color: #888;
    }

    .histId {
        color: #999;
        font-size: .75rem;
        font-variant-numeric: tabular-nums;
    }
}

/* === OVERLAY SÉLECTION SUCCURSALE ========================== */

.branchSelectOverlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;

    .content {
        min-width: 300px;
        max-width: 420px;
        width: 90vw;
        max-height: 90dvh;
        overflow-y: auto;
        background-color: white;
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--teal-20);
            padding-bottom: .5rem;

            .title {
                text-transform: uppercase;
                font-size: 1.05rem;
            }

            .closeDialog {
                cursor: pointer;
                background: none;
                border: none;
                padding: 0;
                display: flex;
                align-items: center;

                .icon {
                    height: 1.4rem;
                    path { fill: rgba(0, 0, 0, 0.45); }
                }

                &:hover .icon path { fill: var(--teal); }
            }
        }

        > p {
            font-size: .82rem;
            opacity: .7;
        }
    }

    .branchSelectList {
        display: flex;
        flex-direction: column;
        gap: .5rem;

        .branchSelectBtn {
            display: flex;
            align-items: center;
            gap: .6rem;
            padding: .65rem 1rem;
            border: 1px solid var(--teal-40);
            border-radius: var(--radius);
            background: transparent;
            cursor: pointer;
            font-size: .9rem;
            text-transform: uppercase;
            width: 100%;
            transition: background var(--tr), border-color var(--tr);

            &:hover {
                background: var(--teal-10);
                border-color: var(--teal-80);
            }

            .icon {
                width: 1.1rem;
                height: 1.1rem;
                flex-shrink: 0;
            }
        }
    }
}

/* === DIALOG CRUD (modifier / supprimer) ==================== */

#dialogCrud {
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    margin: auto;
    width: min(520px, 95dvw);
    max-height: 90dvh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);

    &::backdrop {
        background: rgba(20, 26, 30, 0.45);
        backdrop-filter: blur(4px);
    }

    #dialogCrudContent {
        width: 100%;
        max-height: 90dvh;
        overflow-y: auto;
    }

    .content {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        gap: .75rem;

        .header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-transform: uppercase;
            font-size: 1.1rem;
            border-bottom: 1px solid var(--teal-30);
            padding-bottom: .5rem;

            .closeDialog {
                cursor: pointer;
                background: none;
                border: none;
                padding: 0;
                display: flex;
                align-items: center;

                .icon { height: 1.4rem; }

                &:hover .icon path { fill: var(--teal); }
            }
        }
    }
}

/* === FORMULAIRE CRUD ======================================= */

.crudForm {
    display: flex;
    flex-direction: column;
    gap: .75rem;

    .errorMsg {
        font-size: .78rem;
        color: var(--danger);
        font-style: italic;
    }

    .successMsg {
        font-size: .78rem;
        color: var(--ok);
        font-style: italic;
    }

    .fieldHint {
        font-size: .74rem;
        color: #888;
    }

    /* Réception (totale/partielle) d'un bon de commande — voir FormCrud::
       receivePurchaseOrderForm(). Une ligne par produit en attente, avec sa propre case à
       cocher et sa propre date de péremption optionnelle. */
    .receiveItemsList {
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    .receiveSelectAll {
        align-self: flex-start;
        padding-bottom: .4rem;
        margin-bottom: .2rem;
        border-bottom: 1px dashed var(--teal-20);
        font-weight: 600;
        color: var(--teal);
    }

    .receiveItemRow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: .5rem .75rem;
        padding: .5rem .6rem;
        border: 1px solid var(--teal-20);
        border-radius: var(--radius);

        .receiveItemCheck {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: .85rem;
            cursor: pointer;

            input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--teal); }
        }

        .formGroup {
            flex: 1;
            min-width: 10rem;
            gap: .15rem;

            label { font-size: .68rem; }
        }
    }

    form {
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    fieldset {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        border: none;
        padding: 0;
        margin: 0;
    }

    .formGroup {
        display: flex;
        flex-direction: column;
        gap: .3rem;

        label {
            font-size: .82rem;
            font-weight: bold;
            text-transform: uppercase;
            color: #444;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: .4rem .6rem;
            border: 1px solid var(--teal-40);
            border-radius: var(--radius);
            font-size: .9rem;
            background: white;
            transition: border-color var(--tr), box-shadow var(--tr);

            &:focus {
                outline: none;
                border-color: var(--teal);
                box-shadow: 0 0 0 3px var(--teal-10);
            }
        }

        textarea {
            resize: vertical;
            min-height: 80px;
        }

        .errorMsg {
            font-size: .78rem;
            color: var(--danger);
            font-style: italic;
        }

        .successMsg {
            font-size: .85rem;
            color: var(--teal);
            font-style: italic;
        }
    }

    .imagePreview {
        width: 100%;
        height: 8rem;
        border: 1px dashed var(--teal-50);
        border-radius: var(--radius);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--teal-05);

        img, svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    .deleteConfirmText {
        font-size: .95rem;
        text-align: center;
        line-height: 1.5;
        padding: .5rem 0;

        .entityName {
            font-weight: bold;
            color: var(--danger);
        }
    }

    .formActions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--teal-20);

        .btn,
        button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .3rem;
            padding: .45rem .9rem;
            border-radius: var(--radius);
            border: 1px solid var(--teal-40);
            background: white;
            font-size: .85rem;
            cursor: pointer;
            text-transform: uppercase;
            transition: background var(--tr), border-color var(--tr);
            text-decoration: none;
            color: inherit;

            .icon { height: 1rem; flex-shrink: 0; }
            .labelBtn { line-height: 1; }

            &:hover {
                background: var(--teal-10);
                border-color: var(--teal-80);
            }
        }

        .btnPrimary {
            background: var(--teal-95);
            color: white;
            border-color: var(--teal-95);
            box-shadow: var(--shadow-sm);

            .icon path { fill: white; }

            &:hover {
                background: var(--teal);
                border-color: var(--teal);
                box-shadow: var(--shadow-md);
                transform: translateY(-1px);
            }
        }

        .btnDanger {
            background: var(--danger);
            color: white;
            border-color: var(--danger);

            .icon path { fill: white; }

            &:hover {
                background: var(--danger-h);
                border-color: var(--danger-h);
            }
        }
    }
}

/* === PETIT ÉCRAN — NAV OVERLAY =============================
   nav garde le même fond teinté (--nav-bg) qu'en sidebar desktop — c'est justement ce ton
   distinct de la toile/des cartes qui doit signaler "zone de navigation" partout, pas
   seulement au-delà de 1024px. */

/* === GRAND ÉCRAN — NAV LATÉRALE ============================ */

@media (min-width: 1024px) {

    body {
        display: flex;
        flex-direction: row;
    }

    nav {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 220px;
        min-width: 220px;
        flex-shrink: 0;
        height: 100dvh;
        z-index: auto;

        .navHeader #closeMenu { display: none; }
    }

    .bodyContainer {
        flex: 1;
        min-width: 0;
    }

    .openMenu { display: none !important; }
}

/* === FOOTER ================================================ */

footer {
    width: 100%;
    height: 50px;
    flex-shrink: 0;
    padding: 8px 4px 1px 4px;
    text-transform: uppercase;
    border-top: 1px solid var(--teal-30);

    .footerMenu {
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-top: 2px solid white;
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .footerMenu a,
    .openDialog {
        display: flex;
        align-items: center;
        gap: .25rem;
        color: black;
        font-size: 1rem;
        transition: color var(--tr);
    }

    .footerMenu a:hover,
    .footerMenu .openDialog:hover {
        color: var(--teal);
    }

    .footerMenu .icon { height: 1.95rem; }
}

/* === SCANNER CAMÉRA (codes-barres / QR) ======================
   Overlay plein écran créé dynamiquement par public/assets/js/scanner.js (pas un <dialog> :
   évite de dupliquer la logique d'ouverture/fermeture des dialogues existants pour un usage
   ponctuel). z-index au-dessus de tout, y compris les <dialog> (voir z-index: 1000 ailleurs). */

.scannerOverlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.scannerVideo {
    width: 100%;
    max-width: 32rem;
    max-height: 70vh;
    border-radius: var(--radius);
    background: black;
}

.scannerHint {
    color: white;
    font-size: 0.9rem;
}

.scannerCancelBtn {
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid white;
    background: transparent;
    color: white;
    font-size: 0.9rem;
}

.productsTable td {
    vertical-align: middle;
}

/* Badge de statut (stock-limits en présentation table) — les règles .stockStatus/.statusX
   d'origine ne s'appliquent qu'à l'intérieur de .infos (cartes), redéfinies ici à l'identique
   pour une cellule de tableau. */
.productsTable td.colCenter,
.productsTable th.colCenter {
    text-align: center;
}

.productsTable .stockStatus {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.productsTable .statusOk       { background: rgba(39, 174, 96, .1);  color: var(--ok);     border: 1px solid rgba(39, 174, 96, .3); }
.productsTable .statusFaible   { background: rgba(230, 126, 34, .1); color: var(--warn);   border: 1px solid rgba(230, 126, 34, .3); }
.productsTable .statusCritique { background: rgba(211, 84, 0, .1);   color: var(--crit);   border: 1px solid rgba(211, 84, 0, .3); }
.productsTable .statusRupture  { background: rgba(192, 57, 43, .1);  color: var(--danger); border: 1px solid rgba(192, 57, 43, .3); }

.productRowImg img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

/* Boutons d'action de la table produits — mêmes conventions que .cardActions ailleurs dans
   l'app (icône seule, gris puis teal au survol) : sans cette règle scopée, les <label> de
   editBtn()/deleteBtn() n'héritent d'aucun style ici et s'affichent en texte brut. */
.productRowActions {
    text-align: center;
}

.productRowActions .cardActions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    white-space: nowrap;

    label {
        display: flex;
        align-items: center;
        gap: .3rem;
        cursor: pointer;
        color: #666;
        font-size: .82rem;
        transition: color var(--tr);

        &:hover {
            color: var(--teal);
            svg path { fill: var(--teal); }
        }

        svg { width: 1.2rem; height: auto; flex-shrink: 0; }
        .labelBtn { display: none; }
    }
}

/* === NOTIFICATIONS IN-APP =================================== */

.notifBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--danger, #c0392b);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    line-height: 1;
    position: relative;
    top: -0.6rem;
    left: -0.4rem;
    margin-right: -0.8rem;
}

.notifPanel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.notifMarkAll {
    align-self: flex-end;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--teal);
    text-decoration: underline;
}

.notifList {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.notifItem {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--teal-15);
    border-radius: var(--radius);
}

.notifItem.unread {
    background: var(--teal-05);
    border-color: var(--teal-30);
}

.notifTitle {
    font-weight: 600;
    margin: 0 0 0.15rem;
}

.notifMarkRead {
    flex-shrink: 0;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--teal);
    white-space: nowrap;
}

.priceOriginBadge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.2rem;
}

.priceOriginBadge.priceInherited {
    background: var(--teal-10, #e6f3f0);
    color: var(--teal-70, #2f6f5e);
}

.priceOriginBadge.priceOverride {
    background: #fff3cd;
    color: #7a5b00;
}

.barcodeFieldRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.barcodeFieldRow .inputField {
    flex: 1;
}

.scanBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--teal-40);
    border-radius: var(--radius);
    background: white;
}

/* === IMPRESSION / EXPORT PDF (dashboard) ====================
   Déclenché par le bouton "exporter en PDF" (data-print, voir modal.js) qui appelle
   window.print() — réutilise tel quel les graphiques Chart.js déjà rendus à l'écran
   plutôt que de les regénérer côté serveur. */

@media print {
    /* L'app est une coquille plein écran (height:100dvh, overflow:hidden) : sans ça,
       l'impression serait tronquée à une seule page de la hauteur de l'écran. */
    body, .bodyContainer, main {
        height: auto !important;
        overflow: visible !important;
    }

    header, nav, footer,
    .statsFilter, .printBtn,
    dialog, .inputDialog,
    /* Sur demande : seule la partie "statistiques" (KPI + graphiques) est exportée,
       pas l'alerte de stock ni le suivi des expirations. */
    .stockMonitoring {
        display: none !important;
    }

    main { padding: 0 !important; }

    .statistics { text-transform: none; }

    /* Évite qu'une carte ou un graphique soit coupé au milieu par un saut de page. */
    .card, .statisticsCharts > div {
        break-inside: avoid;
    }

    canvas { max-width: 100% !important; }
}