/* ============================================================================
   app.bundle.css — concatenated stylesheet.
   Order matters for cascade. Edit source files then rerun bundling, or
   edit this file directly (source files have been folded in).
   ============================================================================ */


/* ====================== lang.css ====================== */
[trans='fr'] {
    display: block
}
[trans='es'] {
    display: none;
}
[trans='it'] {
    display: none;
}
[trans='pt'] {
    display: none;
}
[trans='en'] {
    display: none;
}
/* ====================== site.css ====================== */
/*@font-face {
    font-family: "Montserrat";
    src: "Font/Montserrat-VariableFont_wght.ttf" format("ttf-variations");
    font-weight: 100 800;
    font-style: normal;
}*/

@font-face {
    font-family: "Kaushan";
    src: "Font/KaushanScript-Regular.ttf" format("ttf");
    font-weight: 600;
    font-style: normal;
}

:root {
    --CS_color1: #BF3425;
    --CS_colorInit: #BF3425;
    --color-custom: #BF3425;
    --CS_color2: #BF342580;
    --CS_colorvalid: #6D8673;
    --CS_colorinvalid: #780000;
    --CS_colormedium: #e76f51;
    --CS_color-blanc: #ffffff;
    --CS_color-noir: #000000;
    --CS_color-gris: #CACACA;
    --CS_font1: 'Montserrat', sans-serif;
    --CS_font2: 'Kaushan', fantasy;
}

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.buttonType1 {
    border: solid 1px var(--CS_color1);
    border-radius: 5px;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}
    .buttonType1:hover {
        background: var(--CS_color1);
        color: white;
    }
    /* HEADER */
    /* Version Connect�e */
    /*Chaque Option*/
    #header > .top > .options > div[b-p63at71cfz] {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

/*Bouton Connexion*/
#header > .top > .options > a[b-p63at71cfz] {
    border: solid 1px grey;
    border-radius: 5px;
    padding: 5px 10px 5px 5px;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transition en douceure */
}
    /*Bouton Connexion HOVER*/
    #header > .top > .options > a[b-p63at71cfz]:hover {
        background-color: #F0F0F2;
    }

/*Icone Favoris = Coeur*/
#header > .top > .options > .wish > span[b-p63at71cfz] {
    height: 39px;
    margin-top: 2px;
}

/*Btn Deconnexion*/
.top > .options > .deconnexion {
    height: 40px !important;
    width: 40px !important;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px grey;
    border-radius: 50%;
    margin: auto 0px;
}
    /*Btn Deconnexion HOVER*/
    .top > .options > .deconnexion:hover {
        background-color: #F0F0F2;
    }
    /*Icone Btn Deconnexion*/
    .top > .options > .deconnexion > span {
        color: black;
        height: 24px !important;
        width: 24px !important;
    }

/*VERSION MOBILE*/
@media screen and (max-width: 430px) {
    #header > .top > .options > a[b-p63at71cfz] {
        padding: 5px;
    }
}


/* PAGE MON COMPTE (COMMERCIAL) */

#MonCompte {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem;
}
    /*Menu du Commercial*/
    #MonCompte > .headerCompte {
        width: 12%;
    }

        #MonCompte > .headerCompte > ul {
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            height: 380px;
            width: 230px;
            margin: 0px;
        }
            /*Chaque Btn du Menu*/
            #MonCompte > .headerCompte > ul > li {
                width: 230px;
                text-align: center;
                margin: 0px;
            }

    /*Chaque Encadr� d'informations*/
    #MonCompte > .composantCompte {
        width: calc(100% - 300px);
        margin: 30px 30px 30px 0px;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    /*"Mes Infos" : Chaque Encadr�*/
    #MonCompte > #CompteInformations > div {
        min-width: 445px;
    }
    /*"Mon Commercial" : Encadr�*/
    #MonCompte > #CompteCommercial > div {
        width: 90%;
    }
    /*"Mes Factures" : Encadr�*/
    #MonCompte > #CompteFactures {
        display: flex;
        justify-content: center;
    }

        #MonCompte > #CompteFactures > div {
            width: 90%;
        }
            /*"Mes Factures" : Chaque ligne de la liste*/
            #MonCompte > #CompteFactures > div > div[b-0xpgiil1ge] {
                justify-content: space-between;
            }
            /*"Mes Factures" : Ligne des Titres de la liste*/
            #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] {
                width: 72.5%; /*Correspond � [100% - (20% + 1/4*30%)]  ; 20% <=> Largeur du bouton "D�tails" ; 1/4*30% <=> Largeur de l'espace vide entre le "Prix Total" et le bouton "D�tails"*/
            }
                /*"Mes Factures" : Titre de la 1�re colonne "REF DE LA FACTURE"*/
                #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] > p:nth-child(1) {
                    width: 20.689655% !important; /*Correspond � [15 / 72.5] = 0.20689655 = 20.689655% ; 15% <=> Largeur du Texte par rapport � la largeur compl�te de l'encadr� ;  27.5% = [100% - 72.5%] <=> Diff�rence entre la largeur de l'encadr� (100%) et la largeur de la ligne des Titres (72.5)*/
                }
                /*"Mes Factures" : Titre de la 2nd colonne "REF DE CLIENT"*/
                #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] > p:nth-child(2) {
                    width: 20.689655% !important; /*Correspond � [15 / 72.5] = 0.20689655 = 20.689655% ; 15% <=> Largeur du Texte par rapport � la largeur compl�te de l'encadr� ;  27.5% = [100% - 72.5%] <=> Diff�rence entre la largeur de l'encadr� (100%) et la largeur de la ligne des Titres (72.5)*/
                }
                /*"Mes Factures" : Titre de la 3�me colonne "DATE"*/
                #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] > p:nth-child(3) {
                    width: 13.793103% !important; /*Correspond � [10 / 75.5] = 0.13793103 = 13.793103% ; 10% <=> Largeur du Texte par rapport � la largeur compl�te de l'encadr� ;  27.5% = [100% - 72.5%] <=> Diff�rence entre la largeur de l'encadr� (100%) et la largeur de la ligne des Titres (72.5)*/
                }
                /*"Mes Factures" : Titre de la 4�me colonne "PRIX TOTAL"*/
                #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] > p:nth-child(4) {
                    width: 13.793103% !important; /*Correspond � [10 / 75.5] = 0.13793103 = 13.793103% ; 10% <=> Largeur du Texte par rapport � la largeur compl�te de l'encadr� ;  27.5% = [100% - 72.5%] <=> Diff�rence entre la largeur de l'encadr� (100%) et la largeur de la ligne des Titres (72.5)*/
                }

            /*"Mes Factures" : Texte au dessus de la liste*/
            #MonCompte > #CompteFactures > div > div:first-child > p:nth-child(1)[b-0xpgiil1ge] {
                width: 100% !important;
            }

            /*"Mes Factures" : Colonne "REFERENCE DE LA FACTURE"*/
            #MonCompte > #CompteFactures > div > div > p:nth-child(1)[b-0xpgiil1ge] {
                width: 15% !important;
                word-wrap: break-word;
            }
            /*"Mes Factures" : Colonne "REF DE CLIENT"*/
            #MonCompte > #CompteFactures > div > div > p:nth-child(2)[b-0xpgiil1ge] {
                width: 15% !important;
                word-wrap: break-word;
            }
            /*"Mes Factures" : Colonne "DATE"*/
            #MonCompte > #CompteFactures > div > div > p:nth-child(3)[b-0xpgiil1ge] {
                width: 10% !important;
                word-wrap: break-word;
            }
            /*"Mes Factures" : Colonne "PRIX TOTAL"*/
            #MonCompte > #CompteFactures > div > div > p:nth-child(4)[b-0xpgiil1ge] {
                width: 10% !important;
                word-wrap: break-word;
            }

            /*"Mes Factures" : Chaque Btns D�tail*/
            #MonCompte > #CompteFactures > div > div > div:last-child > div[b-0xpgiil1ge] {
                width: 100%;
            }

    /*"Cadencier" : Encadr�*/
    #MonCompte > #cadencier {
        /*width: calc(100% - 300px);
            margin: 30px 0px;
            display: flex;
            justify-content: center;*/
    }

    /*Chaque Texte sous les Encadr�s*/
    #MonCompte > p[b-v6xhbte6t4] {
        margin: 0px calc((100vw - 806px)/2);
        padding: 0px !important;
    }


/* VERSION TABLETTE PAYSAGE */
@media screen and (max-width: 1250px) {

    /*Chaque Encadr� d'informations*/
    #MonCompte > .composantCompte {
        flex-direction: column;
        width: calc(100% - 300px);
        align-items: center;
    }

        #MonCompte > .composantCompte > div {
            width: 90% !important;
            margin: 0px !important;
        }

    /*"Mes Adresses" : Encadr�*/
    #MonCompte > #CompteAdresses > div[b-bmgw2qopub] {
        width: 100% !important;
        align-items: center;
    }

        #MonCompte > #CompteAdresses > div[b-bmgw2qopub] > .blocAdresse {
            width: 100%;
            margin: 0px !important;
        }

    /*"Mes Factures" : Encadr�*/
    #MonCompte > #CompteFactures {
        margin: 30px 5px 30px 0px;
    }

        #MonCompte > #CompteFactures > div {
            width: 100% !important;
        }

    /*"Cadencier" : Encadr�*/
    #MonCompte > #cadencier > .date {
        /*flex-wrap: wrap;
                gap: 15px;            
                align-content: center;*/
    }
        /*"Cadencier" : Texte*/
        #MonCompte > #cadencier > .date > div:first-child {
            /*margin: 0 calc((100% - 211.72px)/2);*/
        }
}


/* VERSION TABLETTE PORTRAIT */
@media screen and (max-width: 780px) {
    #MonCompte {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
        /*Menu du Commercial*/
        #MonCompte > .headerCompte {
            width: 100%;
            display: flex;
            justify-content: center;
        }

            #MonCompte > .headerCompte > ul {
                width: 90%;
                align-items: center;
                height: 320px;
            }
                /*Chaque Btn du Menu*/
                #MonCompte > .headerCompte > ul > li {
                    width: 100%;
                    height: 50px;
                }
        /*Chaque Encadr� d'Information*/
        #MonCompte > .composantCompte {
            width: 90%;
            margin: 0px;
        }

            #MonCompte > .composantCompte > div {
                margin: 0px;
                width: 100% !important;
            }

        /*"Mes Factures" : Encadr�*/
        #MonCompte > #CompteFactures > div[b-0xpgiil1ge] {
            width: 100%;
        }

        /*Chaque Texte sous les Encadr�s*/
        #MonCompte > p[b-v6xhbte6t4], #MonCompte > p[b-bmgw2qopub] {
            margin: 0px !important;
            padding: 0px !important;
            width: 90%;
        }
}

/*VERSION ENTRE MOBILE ET TABLETTE */
@media screen and (max-width: 600px) {

    /*"Mes Factures" : Ligne des Titres de la liste*/
    #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] {
        width: 60%; /*Correspond � [100% - (30% + 1/2*20%)]  ; 30% <=> Largeur du bouton "D�tails" ; 1/2*20% <=> Largeur de l'espace vide entre le "Prix Total" et le bouton "D�tails"*/
    }
        /*"Mes Factures" : Titre de la 1�re colonne "REF DE LA FACTURE"*/
        #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] > p:nth-child(1) {
            width: 41.66667% !important; /*Correspond � [25 / 60] = 0.4166667 = 41.66667% ; 25% <=> Largeur du Texte par rapport � la largeur compl�te de l'encadr� ;  60% = [100% - 40%] <=> Diff�rence entre la largeur de l'encadr� (100%) et la largeur de la ligne des Titres (60%)*/
        }
        /*"Mes Factures" : Titre de la 2nd colonne "REF DE CLIENT"*/
        #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] > p:nth-child(2) {
            display: none;
        }
        /*"Mes Factures" : Titre de la 3�me colonne "DATE"*/
        #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] > p:nth-child(3) {
            display: none;
        }
        /*"Mes Factures" : Titre de la 4�me colonne "PRIX TOTAL"*/
        #MonCompte > #CompteFactures > div > div:nth-child(2)[b-0xpgiil1ge] > p:nth-child(4) {
            width: 41.66667% !important; /*Correspond � [25 / 60] = 0.4166667 = 41.66667% ; 25% <=> Largeur du Texte par rapport � la largeur compl�te de l'encadr� ;  60% = [100% - 40%] <=> Diff�rence entre la largeur de l'encadr� (100%) et la largeur de la ligne des Titres (60%)*/
        }

    /*"Mes Factures" : Colonne "REFERENCE DE LA FACTURE"*/
    #MonCompte > #CompteFactures > div > div > p:nth-child(1)[b-0xpgiil1ge] {
        width: 25% !important;
    }
    /*"Mes Factures" : Colonne "REF DE CLIENT"*/
    #MonCompte > #CompteFactures > div > div > p:nth-child(2)[b-0xpgiil1ge] {
        display: none;
    }
    /*"Mes Factures" : Colonne "DATE"*/
    #MonCompte > #CompteFactures > div > div > p:nth-child(3)[b-0xpgiil1ge] {
        display: none;
    }
    /*"Mes Factures" : Colonne "PRIX TOTAL"*/
    #MonCompte > #CompteFactures > div > div > p:nth-child(4)[b-0xpgiil1ge] {
        width: 25% !important;
    }

    /*"Mes Factures" : Chaque Btns D�tail*/
    #MonCompte > #CompteFactures > div > div > div:last-child {
        width: 30%;
    }
}

/* VERSION MOBILE */
@media screen and (max-width: 480px) {
    /*"Mes Informations" : Encadr�*/
    #MonCompte > #CompteInformations > div[b-v6xhbte6t4] {
        min-width: initial;
        width: 85vw;
    }
        /*"Mes Informations" : Chaque ligne d'information */
        #MonCompte > #CompteInformations > div[b-v6xhbte6t4] > div {
            flex-direction: column;
            row-gap: 10px;
        }
            /*"Mes Informations" : Chaque Intitul� d'information*/
            #MonCompte > #CompteInformations > div[b-v6xhbte6t4] > div > :first-child {
                text-align: center;
            }
            /*"Mes Informations" : Chaque Information*/
            #MonCompte > #CompteInformations > div[b-v6xhbte6t4] > div > :nth-child(2) {
                width: 95%;
            }

    /*"Mon Commercial" : Chaque ligne d'information*/
    #MonCompte > #CompteCommercial > div[b-1w5ny2uh5v] > div {
        flex-direction: column;
        row-gap: 10px;
    }
        /*"Mon Commercial" : Derni�re ligne d'information*/
        #MonCompte > #CompteCommercial > div[b-1w5ny2uh5v] > div:last-child {
            margin-bottom: 20px;
        }
        /*"Mon Commercial" : Chaque Information*/
        #MonCompte > #CompteCommercial > div[b-1w5ny2uh5v] > div > input:nth-child(2) {
            width: 100%;
            height: 40px;
        }
}


/*ZOOM LOUPE*/
[data-loupe-wrapper] {
    position: relative;
    width: fit-content;
}

[data-loupe-image] {
    display: block;
    cursor: none;
}

[data-loupe-enlarged-image] {
    width: auto;
    max-width: none;
}

[data-loupe] {
    position: absolute;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 8px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 24px 0 rgba(192, 192, 192, 0.5);
    opacity: 0;
    pointer-events: none;
}

body {
    overflow-x: hidden;
}

/*.hidden {
    display: none;
}*/

.cursor-pointer {
    cursor: pointer;
}


.validColor {
    color: var(--CS_colorvalid);
    fill: var(--CS_colorvalid);
}

    .validColor > svg {
        stroke: var(--CS_colorvalid);
        fill: transparent;
    }

.invalidColor {
    color: var(--CS_colorinvalid);
    fill: var(--CS_colorinvalid);
}

    .invalidColor > svg {
        stroke: var(--CS_colorinvalid);
        fill: transparent;
    }

.mediumColor {
    color: var(--CS_colormedium);
    fill: var(--CS_colormedium);
}

    .mediumColor > svg {
        stroke: var(--CS_colormedium);
        fill: transparent;
    }

p {
    margin: 0;
}


html, body {
    font-family: var(--CS_font1);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--CS_color1);
}

.WidthAuto {
    width: auto !important
}

.color1 {
    color: var(--CS_color1);
}

.btnPrimary {
    padding: 1vh 1vw;
    color: #fff;
    background-color: var(--CS_color1);
    border: solid 1px var(--CS_color1);
    border-radius: 5px;
    text-align: center;
    font: normal normal normal 17px/20px var(--CS_font1);
    letter-spacing: 0px;
    text-transform: uppercase;
    width: 100%;
    box-shadow: 0px 3px 6px #00000029;
    list-style: none;
    cursor: pointer;
}

    .btnPrimary:hover, .btnPrimaryFit:hover {
        /*color: var(--CS_color1);
        background-color: transparent;*/
        box-shadow: inset 0px 3px 6px #00000029;
    }

.btnPrimaryFit {
    padding: 1vh 1vw;
    color: #fff;
    background-color: var(--CS_color1);
    border: solid 1px var(--CS_color1);
    border-radius: 5px;
    text-align: center;
    font: normal normal normal 17px/20px var(--CS_font1);
    letter-spacing: 0px;
    text-transform: uppercase;
    width: fit-content;
    box-shadow: 0px 3px 6px #00000029;
    list-style: none;
    cursor: pointer;
}

.btnBlack {
    padding: 1vh 1vw;
    color: #fff;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 5px;
    text-align: center;
    font: normal normal normal 17px/20px var(--CS_font1);
    letter-spacing: 0px;
    text-transform: uppercase;
    width: 100%;
    box-shadow: 0px 3px 6px #00000029;
    list-style: none;
    cursor: pointer;
}

    .btnBlack:hover {
        background-color: transparent;
        color: #000;
    }

.btnBlanc {
    padding: 1vh 1vw;
    color: #000;
    background-color: #fff;
    border: solid 1px #fff;
    border-radius: 5px;
    text-align: center;
    font: normal normal normal 17px/20px var(--CS_font1);
    letter-spacing: 0px;
    text-transform: uppercase;
    width: 100%;
    list-style: none;
    cursor: pointer;
    box-shadow: 0px 3px 6px #00000029;
}

    .btnBlanc:hover {
        box-shadow: inset 0px 3px 6px #00000029;
    }


.bg-primary {
    --bs-bg-opacity: 1;
    background-color: var(--CS_color1) !important;
    border: none !important;
    padding: 5px 10px;
    color: var(--CS_color-blanc);
}


.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.hfitc {
    height: fit-content
}

.bold {
    font-weight: bold;
}

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

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

button, input, optgroup, select, textarea {
    font-family: var(--CS_font1);
    font-size: 15px !important;
}

.rz-dialog-titlebar {
    background-color: #fff !important;
}

.w100 {
    width: 100% !important;
}

#ConnexionPage .popup > div {
    width: 40%;
    height: fit-content;
}

#MenuExterne a {
    text-decoration: none;
}
/** SPINNER**/
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ellipsis div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #999;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            left: 8px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 8px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 32px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 56px;
            animation: lds-ellipsis3 0.6s infinite;
        }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/**SPINNER CIRCULAIRE POUR BOUTON**/
.lds-dual-ring {
    display: inline-block;
    width: 1.0416666666666667vw;
    height: 2.1528525296017222vh;
    position: absolute;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 1.0416666666666667vw;
        height: 2.1528525296017222vh;
        margin: 2px;
        border-radius: 50%;
        border: 3px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*SPINNER*/
#SpinnerWait {
    left: 47.5vw;
    top: 50vh;
    position: fixed;
    z-index: 100000000;
}



.SpinnerOut {
    display: none;
}



.ButtonWait {
    animation: ButtonWait 1s infinite alternate both;
}

@keyframes ButtonWait {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/*OPACITY CHANGEMENT DE PAGE*/
.ContentOut {
    transition: opacity;
    opacity: 0;
}

.ContentIn {
    transition: opacity 1s ease-in;
    opacity: 1;
}

#CompteCommandes > div > div > div > div > span, #CompteFactures > div > div > div > div > span {
    display: none;
}


/*RESPONSIVE*/

: root {
    --bs-body-font-size: 16px !important;
}

input {
    font-size: 16px !important;
}


.btnPrimary, .btnBlanc {
    font-size: 22px !important;
}

.material-symbols-outlined {
    font-size: 26px;
}

.bg-success {
    background-color: var(--CS_color1) !important;
    color: var(--CS_color-blanc)
}




#BodyMP .Zoom2 {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
}

    #BodyMP .Zoom2 > .cardArticle {
        height: 100%;
        width: 100%
    }

        #BodyMP .Zoom2 > .cardArticle > div:nth-child(3), #BodyMP .Zoom2 > .cardArticle > div:nth-child(3) > img {
            height: 84%;
        }


#CompteInformations > div, #CompteAdresses > div, #CompteCommercial > div {
    pointer-events: none;
}

.InputMail > input {
    width: 100%;
}

.rz-dialog {
    border: 3px solid var(--CS_color1);
    border-radius: 5px;
    box-shadow: 0px 3px 6px #00000029;
}


/* MENU EXTERNE */
#MenuExterne .menu {
    display: flex;
    flex-direction: row;
    width: 90%;
    margin: auto;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
}

    #MenuExterne .menu a {
        text-decoration: none;
    }

.LienMenu {
    padding: 0 2.6041666666666665vw 0 0;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    color: var(--CS_color1);
}

    .LienMenu::after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background: var(--CS_color1);
        transition: width 0.3s ease-in;
        margin-top: 1.2vh;
    }

    .LienMenu:hover a {
        color: var(--CS_color1)
    }

    .LienMenu:hover::after {
        width: 100%
    }

#MenuExterne .menu .LienMenu .dropdown > ul > li:hover > a {
    text-decoration: underline;
}

.CataCgv p, .Referencement p {
    /*color: var(--CS_color1);*/
    text-transform: uppercase;
}

.CataCgv > ul, .Referencement > ul {
    display: none;
    position: absolute;
    background: white;
    padding: 1vh;
    list-style: none;
    border: solid 1px #eee;
    box-shadow: 2px 2px 5px #eee;
    z-index: 10
}

.CataCgv li, .CataCgv li:hover {
    display: flex;
    margin: 1vh 0;
}

.dropdown:hover + ul, ul:hover, li:hover {
    /*display: contents;*/
}

.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td {
    background-color: var(--CS_color1) !important;
}

/* FOOTER */
/* BANDEAU FOOTER */
.bandeauFooter {
    width: 100vw;
    height: fit-content;
    background-color: var(--CS_color1);
    box-shadow: 0px 3px 6px #00000029;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 40px 0;
    align-items: center;
}

    .bandeauFooter > div {
        width: 20%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

        .bandeauFooter > div > div {
            display: flex;
            flex-direction: column;
        }

            .bandeauFooter > div > div > p:first-child {
                color: var(--CS_color-blanc);
                text-transform: uppercase;
                font-size: 17px;
                font-weight: 600;
                font-family: var(--CS_font1);
                margin-left: 15px
            }

            .bandeauFooter > div > div > p:last-child {
                color: var(--CS_color-blanc);
                font-size: 14px;
                font-family: var(--CS_font1);
                margin-left: 15px
            }

        .bandeauFooter > div > img {
            width: auto;
            height: 50px;
        }

/* FOOTER */

#FooterColinternet.footer-menu {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 10vh auto;
}



#FooterColinternet .menu {
    display: flex;
    justify-content: space-around;
    width: 75%;
}

    #FooterColinternet .menu > div {
        width: 20%;
    }

        #FooterColinternet .menu > div > .btnPrimary {
            width: fit-content;
        }



    #FooterColinternet .menu div div:first-of-type {
        font-size: 15px !important;
        margin-bottom: 10px
    }



    #FooterColinternet .menu ul {
        list-style: none;
        padding: 0;
        line-height: 19px;
    }



        #FooterColinternet .menu ul li {
            cursor: pointer;
        }



            #FooterColinternet .menu ul li a {
                padding: 0;
                font-weight: 400;
            }



#FooterColinternet > .menu > ul > li:nth-child(2) > a {
    text-transform: uppercase;
}

#FooterColinternet > .menu > ul > li:nth-child(3) > a {
    text-transform: capitalize;
}

#FooterColinternet .menu ul li:hover, #FooterColinternet .menu ul li:hover a {
    font-weight: bold;
}

#FooterColinternet .menu > div:nth-child(3) > div:last-child > a {
    color: #fff;
}

#FooterColinternet .logo {
    width: 20%;
    margin-left: 5%;
}

    #FooterColinternet.logo img {
        width: 100%;
    }

#FooterColinternet .footer span {
    cursor: pointer;
}

#FooterColinternet a {
    text-decoration-line: none;
    color: black;
}

#FooterColinternet .menu div div:first-of-type {
    font-size: 18px !important;
}

#ListeUnivers ul {
    list-style: none;
}

.Copyright {
    width: fit-content;
    margin: 0 auto;
}

#MenuExterne {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    margin: auto;
}
/* MASQUAGE COMPTE */
/*#CompteCommandes svg, #CompteFactures svg, .headerCompte > ul > li:nth-child(4) {
    display: none;
}*/
#CompteCommandes svg {
    display: none;
}

.material-symbols-outlined {
    font-variation-settings: 'wght' 250; /* Ajusta el grosor (100 es m�s fino, 700 es m�s grueso) */
}

button:active {
    box-shadow: inset 0px 3px 6px #00000029;
}

@media screen and (max-width: 1920px) {
    #FooterColinternet .menu div div:first-of-type {
        font-size: 15px !important;
    }


    #ListeFamilles {
        margin-top: -11%;
        left: 31.6%;
    }
}



@media screen and (max-width: 1440px) {
    #ListeFamilles {
        margin-top: -16.5%;
        left: 29.7%;
    }
}

/*TABLETTE PAYSAGE*/
@media screen and (max-width: 1024px) {

    #FooterColinternet.footer-menu {
        flex-direction: column;
        margin-bottom: 0;
    }



    #FooterColinternet .menu {
        flex-direction: column;
        width: 40%;
        margin: 20px 30% 0;
        text-align: center;
    }



    #FooterColinternet .logo {
        width: 30%;
        margin: 20px 35%;
    }


    #ListeFamilles {
        left: 0;
        margin: auto;
        text-align: center;
    }

    #FooterColinternet .menu > div {
        width: 100%;
    }

        #FooterColinternet .menu > div:first-child {
            order: 999;
            margin-top: 25px;
        }

        #FooterColinternet .menu > div:nth-child(3) {
            margin-top: 25px;
        }

    #ListeFamilles ul {
        list-style: none;
        padding: 0
    }

    #FooterColinternet .menu > div > .btnPrimary {
        margin: auto;
    }

    .bandeauFooter {
        flex-wrap: wrap;
    }

        .bandeauFooter > div {
            width: 40%;
            margin: 15px auto;
        }
}




#footer {
    font-family: var(--CS_font1);
    margin-top: 5vh;
}

    #footer .Copyright {
        text-align: center;
    }

    #footer .logo img {
        width: 50%;
    }


@media screen and (max-width: 1920px) {
    :root {
        --bs-body-font-size: 14px !important;
    }

    input {
        font-size: 14px !important;
    }


    .btnPrimary, .btnBlanc {
        font-size: 17px !important;
    }

    /*.material-symbols-outlined {
        font-size: 22px!important;
    }*/
}

/*TABLETTE PORTRAIT*/
@media screen and (max-width: 768px) {
    #MenuExterne {
        justify-content: center;
    }
}

/*VERSION MOBILE*/
@media screen and (max-width: 480px) {
}

/*PETIT MOBIL*/
@media screen and (max-width: 425px) {

    .rz-dialog-wrapper {
        width: 100vw;
        height: 100vh;
    }

    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        width: 90% !important;
        height: fit-content;
        margin: auto;
        top: 20% !important;
    }
}

/*MERCHANDISING*/
.iconFichierMerch {
    width: 2vw;
    margin: 0.5vw;
}



/*POPUP*/
.mdc-dialog {
    z-index: 500 !important;
}

@media (min-width: 592px) {
    .mdc-dialog .mdc-dialog__surface {
        max-width: unset !important;
    }
}


/*"Mes Litiges" : Encadr�*/
#MonCompte > #CompteLitige {
    display: flex;
    justify-content: center;
}

    #MonCompte > #CompteLitige > div {
        width: 90%;
    }


/*"Mes Litiges" : Chaque Btns D�tail */
.buttons {
    cursor: pointer;
    text-align: center;
    width: 20%;
    border-radius: 5px;
    background-color: var(--CS_color1);
    color: #fff;
    box-shadow: 0px 3px 6px #00000029;
    padding: 0.5%;
    margin: 0px 2.5%;
}

.modifybuttons {
    cursor: pointer;
    text-align: center;
    width: 20%;
    border-radius: 5px;
    background-color: rgb(110 196 0);
    color: #fff;
    box-shadow: 0px 3px 6px #00000029;
    padding: 0.5%;
    margin: 0px 2.5%;
}


/*CSS BODY MOBILE*/
.MobileBody {
    overflow: hidden !important;
    overscroll-behavior: contain;
    position: relative !important;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    margin-left: 0;
    margin-top: 0;
    margin-right: 17px !important;
    /* color: #ccc;
    background-color: #ccc;*/
    height: 100vh;
}



.buttonmonetico{
    border :none;
}
/* ====================== hide.css ====================== */
[hide='anonymous'] {
    display: none
}
/* ====================== design-tokens.css ====================== */
/* ============================================================================
   Colinternet — Design Tokens (Polymarket-tuned, polished v2)
   Single source of truth: components MUST reference these vars, never raw
   hex / px / rem values. Polish goals:
     - Tighter shadow stack with hairline edge for crispness
     - Cooler slate neutrals with explicit elevation surface
     - Confident easing curves, no bounce
     - Glass + gradient tokens for hero/overlay surfaces
   ============================================================================ */

:root {
  /* ---------- COLOR — Neutrals (slate, cooler, refined) ------------------- */
  --c-bg:           #ffffff;
  --c-bg-subtle:    #f7f8fa;     /* page background, hover row, panel fill */
  --c-bg-muted:     #eef0f4;     /* disabled, placeholder, deeper recess */
  --c-bg-inverse:   #0b1220;
  --c-bg-elevated:  #ffffff;     /* cards lifting above subtle pages */

  --c-border:        #e4e7ec;    /* default 1px outlines */
  --c-border-strong: #cbd2dc;    /* hover / focus outlines */
  --c-border-muted:  #eef0f4;    /* very faint dividers */

  --c-fg:         #0b1220;       /* primary text — cooler than slate-900 */
  --c-fg-muted:   #3f4a5e;       /* secondary text, labels */
  --c-fg-subtle:  #5c6a82;       /* tertiary, captions */
  --c-fg-faint:   #98a2b3;       /* placeholders, disabled */
  --c-fg-inverse: #ffffff;

  /* ---------- COLOR — Brand (single accent, used sparingly) -------------- */
  --c-brand:        #BF3425;
  --c-brand-hover:  #a52d20;
  --c-brand-soft:   #fdecea;

  --c-accent:       #0b1220;     /* near-black slate — Polymarket confidence */
  --c-accent-hover: #1f2937;
  --c-accent-soft:  #eef0f4;

  /* ---------- COLOR — CTA (alias, default = accent) ---------------------- */
  --c-cta:          var(--c-accent);
  --c-cta-hover:    var(--c-accent-hover);
  --c-cta-fg:       var(--c-fg-inverse);
  --c-cta-soft:     var(--c-accent-soft);

  /* ---------- COLOR — Price movement (B2B tier signals) ------------------ */
  --c-price-up:     #15803d;
  --c-price-down:   #b91c1c;
  --c-price-flat:   var(--c-fg-muted);

  /* ---------- COLOR — Semantic ------------------------------------------- */
  --c-success:      #16a34a;
  --c-success-soft: #dcfce7;
  --c-success-fg:   #15803d;

  --c-warning:      #d97706;
  --c-warning-soft: #fef3c7;
  --c-warning-fg:   #b45309;

  --c-danger:       #dc2626;
  --c-danger-soft:  #fee2e2;
  --c-danger-fg:    #b91c1c;

  --c-info:         #2563eb;
  --c-info-soft:    #dbeafe;
  --c-info-fg:      #1d4ed8;

  /* ---------- COLOR — Focus ring ----------------------------------------- */
  --c-focus-ring:   #98a2b3;
  --c-focus-ring-strong: #0b1220;

  /* ---------- TYPOGRAPHY ------------------------------------------------- */
  --font-sans:
    'Inter', 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont,
    'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-2xs:   0.6875rem;  /* 11px — meta / captions */
  --fs-xs:    0.75rem;    /* 12px — labels */
  --fs-sm:    0.8125rem;  /* 13px — secondary UI */
  --fs-base:  0.9375rem;  /* 15px — body */
  --fs-md:    1rem;       /* 16px — emphasized body */
  --fs-lg:    1.125rem;   /* 18px — small heading */
  --fs-xl:    1.375rem;   /* 22px — section heading */
  --fs-2xl:   1.75rem;    /* 28px — page heading */
  --fs-3xl:   2.25rem;    /* 36px — hero */
  --fs-4xl:   3rem;       /* 48px — display */
  --fs-5xl:   3.75rem;    /* 60px — marketing display */

  --fs-data:    var(--fs-base);

  --lh-tight:    1.05;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;

  /* ---------- SPACING (4px grid) ----------------------------------------- */
  --s-0:  0;
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* ---------- RADII ------------------------------------------------------ */
  --r-xs:   0.25rem;
  --r-sm:   0.375rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.25rem;
  --r-3xl:  1.5rem;
  --r-full: 9999px;

  /* ---------- SHADOWS (Polymarket-tuned: tight, layered, edge-defined) --- */
  --sh-xs:
    0 1px 0 rgba(11, 18, 32, 0.04),
    0 1px 2px rgba(11, 18, 32, 0.05);
  --sh-sm:
    0 1px 0 rgba(11, 18, 32, 0.04),
    0 2px 4px rgba(11, 18, 32, 0.05),
    0 1px 2px rgba(11, 18, 32, 0.04);
  --sh-md:
    0 1px 0 rgba(11, 18, 32, 0.04),
    0 4px 8px rgba(11, 18, 32, 0.05),
    0 8px 16px rgba(11, 18, 32, 0.06);
  --sh-lg:
    0 1px 0 rgba(11, 18, 32, 0.04),
    0 8px 16px rgba(11, 18, 32, 0.07),
    0 16px 32px rgba(11, 18, 32, 0.09);
  --sh-xl:
    0 1px 0 rgba(11, 18, 32, 0.05),
    0 16px 32px rgba(11, 18, 32, 0.10),
    0 32px 64px rgba(11, 18, 32, 0.14);

  --sh-inset: inset 0 1px 0 rgba(11, 18, 32, 0.03);

  /* Focus ring — Polymarket-style: 1px halo + 3px accent ring */
  --sh-focus:
    0 0 0 1px var(--c-bg),
    0 0 0 3px color-mix(in srgb, var(--c-focus-ring) 70%, transparent);
  --sh-focus-strong:
    0 0 0 1px var(--c-bg),
    0 0 0 3px var(--c-accent);

  /* ---------- MOTION (fast, decisive, no bounce) ------------------------- */
  --t-instant: 80ms;
  --t-fast:    140ms;
  --t-base:    200ms;
  --t-slow:    320ms;
  --t-slower:  480ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in:     cubic-bezier(0.4, 0, 0.84, 0);
  --ease-io:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- LAYOUT ----------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: var(--s-4);
  --header-h:      4rem;

  /* ---------- Z-INDEX SCALE --------------------------------------------- */
  --z-base:      1;
  --z-raised:    10;
  --z-sticky:    100;
  --z-dropdown:  500;
  --z-overlay:   900;
  --z-modal:     1000;
  --z-toast:     1100;
  --z-tooltip:   1200;
  --z-max:       9999;

  /* ---------- GRADIENTS (sparingly — hero/promo only) ------------------- */
  --g-surface:    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-subtle) 100%);
  --g-accent:     linear-gradient(135deg, var(--c-accent) 0%, #1f2937 100%);
  --g-brand:      linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-hover) 100%);
  --g-success:    linear-gradient(135deg, var(--c-success) 0%, #15803d 100%);
  --g-promo:      linear-gradient(135deg, #f97316 0%, var(--c-brand) 100%);
  --g-mesh:
    radial-gradient(at 0% 0%, color-mix(in srgb, var(--c-accent) 6%, transparent) 0px, transparent 50%),
    radial-gradient(at 100% 0%, color-mix(in srgb, var(--c-info) 6%, transparent) 0px, transparent 50%),
    radial-gradient(at 50% 100%, color-mix(in srgb, var(--c-brand) 6%, transparent) 0px, transparent 50%);

  /* Glass tokens — modal/popover backdrops, header on scroll */
  --glass-blur: blur(12px) saturate(140%);
  --glass-bg:   color-mix(in srgb, var(--c-bg) 78%, transparent);
}

/* Honour user motion preferences. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-instant: 0ms;
    --t-fast:    0ms;
    --t-base:    0ms;
    --t-slow:    0ms;
    --t-slower:  0ms;
  }
}

/* ============================================================================
   Dark theme — opt-in via .theme-dark on <html>. Set early by inline boot
   script in _Layout.cshtml to avoid FOUC.
   ============================================================================ */
.theme-dark {
  /* Surfaces — deep ink with sub-tones. Blue-tinted so panels read as depth. */
  --c-bg:           #07090e;
  --c-bg-subtle:    #0d1117;
  --c-bg-muted:     #161b22;
  --c-bg-inverse:   #f7f8fa;
  --c-bg-elevated:  #11161e;

  --c-border:        #1f2630;
  --c-border-strong: #2d3744;
  --c-border-muted:  #161b22;

  --c-fg:         #f7f8fa;
  --c-fg-muted:   #c8d0dd;
  --c-fg-subtle:  #8b95a7;
  --c-fg-faint:   #5c6675;
  --c-fg-inverse: #0b1220;

  --c-brand:       #ef5a4a;
  --c-brand-hover: #f47567;
  --c-brand-soft:  #3a1a16;

  --c-accent:       #f7f8fa;
  --c-accent-hover: #e4e7ec;
  --c-accent-soft:  #161b22;

  --c-cta:        var(--c-accent);
  --c-cta-hover:  var(--c-accent-hover);
  --c-cta-fg:     #0b1220;
  --c-cta-soft:   var(--c-accent-soft);

  --c-success:      #22c55e;
  --c-success-soft: #052e16;
  --c-success-fg:   #4ade80;

  --c-warning:      #f59e0b;
  --c-warning-soft: #422006;
  --c-warning-fg:   #fbbf24;

  --c-danger:       #ef4444;
  --c-danger-soft:  #450a0a;
  --c-danger-fg:    #f87171;

  --c-info:         #3b82f6;
  --c-info-soft:    #172554;
  --c-info-fg:      #60a5fa;

  --c-price-up:     #4ade80;
  --c-price-down:   #f87171;

  --c-focus-ring:        #8b95a7;
  --c-focus-ring-strong: #f7f8fa;

  /* Shadows — deep with hairline edge for crispness. */
  --sh-xs:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.6);
  --sh-sm:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-md:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.55),
    0 8px 16px rgba(0, 0, 0, 0.5);
  --sh-lg:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.55),
    0 16px 32px rgba(0, 0, 0, 0.55);
  --sh-xl:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 16px 32px rgba(0, 0, 0, 0.65),
    0 32px 64px rgba(0, 0, 0, 0.7);

  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --g-surface:
    linear-gradient(180deg, var(--c-bg-elevated) 0%, var(--c-bg) 100%);
  --g-accent:
    linear-gradient(135deg, var(--c-accent) 0%, #cbd5e1 100%);

  --glass-bg: color-mix(in srgb, var(--c-bg-elevated) 70%, transparent);
}

/* System-default fallback when no explicit theme class is set. */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not(.theme-dark) { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  html:not(.theme-light):not(.theme-dark) { color-scheme: light; }
}

/* ====================== utilities.css ====================== */
/* ============================================================================
   Colinternet — Component utilities
   Built on design-tokens.css. Add classes here only when the same combo appears
   in 3+ templates and a Tailwind utility group would be repetitive.

   Conventions:
   - All measurements via tokens. No raw px / rem / hex in this file.
   - Components use :focus-visible (keyboard) not :focus, to avoid mouse halos.
   - Hover effects are subtle on color, never scale/translate on critical CTAs
     (Shopify guidance — prevents accidental clicks on touch).
   ============================================================================ */

/* ---------- BASE ---------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-fg);
  background: var(--c-bg);
  font-feature-settings: 'cv11', 'ss03', 'ss04'; /* Inter humanist glyph variants */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular numerals everywhere prices/quantities appear. */
.num, .price, .qty, [data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ---------- TYPOGRAPHY ---------------------------------------------------- */
.h-display { font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.h-hero    { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.h-page    { font-size: var(--fs-2xl); line-height: var(--lh-snug);  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.h-section { font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: var(--fw-semibold); }
.h-card    { font-size: var(--fs-lg);  line-height: var(--lh-snug);  font-weight: var(--fw-semibold); }

.t-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-fg-subtle);
}
.t-meta    { font-size: var(--fs-xs); color: var(--c-fg-subtle); }
.t-muted   { color: var(--c-fg-muted); }
.t-subtle  { color: var(--c-fg-subtle); }
.t-faint   { color: var(--c-fg-faint); }

/* ---------- FOCUS RING (universal) --------------------------------------- */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}

/* ---------- BUTTONS ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.625rem var(--s-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-fg);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--c-accent);
  color: var(--c-fg-inverse);
  border-color: var(--c-accent);
}
.btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn-primary:active { transform: translateY(0.5px); }

.btn-secondary {
  background: var(--c-bg);
  color: var(--c-fg);
  border-color: var(--c-border);
  box-shadow: var(--sh-xs);
}
.btn-secondary:hover {
  background: var(--c-bg-subtle);
  border-color: var(--c-border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--c-fg-muted);
}
.btn-ghost:hover {
  background: var(--c-bg-subtle);
  color: var(--c-fg);
}

.btn-danger {
  background: var(--c-danger);
  color: var(--c-fg-inverse);
  border-color: var(--c-danger);
}
.btn-danger:hover { background: var(--c-danger-fg); border-color: var(--c-danger-fg); }

.btn-success {
  background: var(--c-success);
  color: var(--c-fg-inverse);
  border-color: var(--c-success);
}
.btn-success:hover { background: var(--c-success-fg); border-color: var(--c-success-fg); }

.btn-link {
  background: transparent;
  color: var(--c-info-fg);
  padding: 0;
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.btn-link:hover { color: var(--c-info); text-decoration-thickness: 2px; }

/* Sizes */
.btn-sm { padding: 0.4375rem var(--s-3); font-size: var(--fs-xs); }
.btn-lg { padding: 0.75rem var(--s-5); font-size: var(--fs-md); }
.btn-icon {
  width: 2.25rem; height: 2.25rem; padding: 0;
  border-radius: var(--r-md);
}
.btn-block { width: 100%; }

/* Pill (full-radius — Shopify-style chip) */
.btn-pill { border-radius: var(--r-full); padding-inline: var(--s-5); }

/* ---------- ICONS --------------------------------------------------------- */
.icon-sm { width: 1rem;     height: 1rem;     flex-shrink: 0; color: currentColor; }
.icon-md { width: 1.25rem;  height: 1.25rem;  flex-shrink: 0; color: currentColor; }
.icon-lg { width: 1.5rem;   height: 1.5rem;   flex-shrink: 0; color: currentColor; }

/* ---------- CARDS --------------------------------------------------------- */
.card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.card:hover { box-shadow: var(--sh-sm); }
.card-interactive { cursor: pointer; }
.card-interactive:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-md); }
.card-flat { box-shadow: none; }
.card-elevated { box-shadow: var(--sh-md); }

.card-header { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--c-border-muted); }
.card-body   { padding: var(--s-5) var(--s-6); }
.card-footer { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--c-border-muted); background: var(--c-bg-subtle); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* Product card (catalogue / search results) */
.card-product {
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.card-product:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.card-product__media {
  aspect-ratio: 1 / 1;
  background: var(--c-bg-subtle);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card-product__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform var(--t-slow) var(--ease-out);
}
.card-product:hover .card-product__media img { transform: scale(1.04); }
.card-product__body {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
}
.card-product__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-product__price {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-fg);
  font-variant-numeric: tabular-nums;
}
.card-product__meta {
  font-size: var(--fs-xs);
  color: var(--c-fg-subtle);
}

/* ---------- FORMS --------------------------------------------------------- */
.form-label {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-fg);
  margin-bottom: var(--s-1);
}
.form-label-required::after {
  content: ' *';
  color: var(--c-danger);
}
.form-help { font-size: var(--fs-xs); color: var(--c-fg-subtle); margin-top: var(--s-1); }
.form-error { font-size: var(--fs-xs); color: var(--c-danger-fg); margin-top: var(--s-1); }

.field {
  display: block;
  width: 100%;
  padding: 0.5625rem var(--s-3);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-fg);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.field::placeholder { color: var(--c-fg-faint); }
.field:hover { border-color: var(--c-border-strong); }
.field:focus, .field:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.field:disabled, .field[readonly] {
  background: var(--c-bg-muted);
  color: var(--c-fg-muted);
  cursor: not-allowed;
}
.field-invalid, .field.invalid {
  border-color: var(--c-danger);
}
.field-invalid:focus, .field.invalid:focus {
  box-shadow: 0 0 0 3px var(--c-danger-soft);
}

/* Checkbox / radio reset for Tailwind-free callers */
.choice {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-fg);
  cursor: pointer;
  user-select: none;
}

/* ---------- BADGES / TAGS ------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0.125rem var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  border-radius: var(--r-xs);
  background: var(--c-bg-muted);
  color: var(--c-fg-muted);
  letter-spacing: var(--tracking-wide);
}
.badge-success { background: var(--c-success-soft); color: var(--c-success-fg); }
.badge-warning { background: var(--c-warning-soft); color: var(--c-warning-fg); }
.badge-danger  { background: var(--c-danger-soft);  color: var(--c-danger-fg); }
.badge-info    { background: var(--c-info-soft);    color: var(--c-info-fg); }
.badge-brand   { background: var(--c-brand-soft);   color: var(--c-brand); }
.badge-pill    { border-radius: var(--r-full); padding-inline: var(--s-3); }

/* ---------- DIVIDERS ------------------------------------------------------ */
.divider     { height: 1px; background: var(--c-border); border: none; margin: var(--s-4) 0; }
.divider-vert{ width: 1px; align-self: stretch; background: var(--c-border); }
.divider-section { height: 1px; background: var(--c-border-muted); border: none; margin: var(--s-8) 0; }

/* ---------- SECTIONS / LAYOUT --------------------------------------------- */
.container-app {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) { .container-app { padding-inline: var(--s-6); } }
@media (min-width: 1280px){ .container-app { padding-inline: var(--s-8); } }

.section {
  padding-block: var(--s-12);
}
@media (min-width: 768px) { .section { padding-block: var(--s-16); } }
.section-tight { padding-block: var(--s-8); }
.section-loose { padding-block: var(--s-20); }

/* ---------- INTERACTION CHROME ------------------------------------------- */
.hover-row {
  transition: background var(--t-fast) var(--ease-out);
}
.hover-row:hover { background: var(--c-bg-subtle); }

.skeleton {
  background: linear-gradient(90deg,
    var(--c-bg-muted) 0%,
    var(--c-bg-subtle) 50%,
    var(--c-bg-muted) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s var(--ease-io) infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- HEADER (app bar) --------------------------------------------- */
.header-app {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  /* Shopify-style: rely on border, not shadow, on idle. Shadow on scroll
     should be wired in JS (toggle .header-app--scrolled). */
}
.header-app--scrolled {
  border-bottom-color: transparent;
  box-shadow: var(--sh-sm);
}
.header-app__scrim {
  position: fixed; inset: 0; z-index: 40;
  cursor: default;
  background: transparent;
}
.header-app__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--header-h);
  min-height: var(--header-h);
}
.header-app__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.header-app__logo:hover { opacity: 0.8; }
.header-app__logo img { height: 2.5rem; width: auto; }
.header-app__search {
  flex: 1;
  max-width: 36rem;
  margin-inline: var(--s-4);
}

/* Search input shell — Polymarket-style: 1px border, no gradient on submit. */
.search-shell {
  position: relative;
  width: 100%;
}
.search-shell__row {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.search-shell__row:hover { border-color: var(--c-border-strong); }
.search-shell__row:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.search-shell__icon {
  width: 1.125rem; height: 1.125rem;
  margin-left: var(--s-4);
  color: var(--c-fg-faint);
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease-out);
}
.search-shell__row:focus-within .search-shell__icon { color: var(--c-fg-muted); }
.search-shell__input {
  flex: 1;
  padding: 0.625rem var(--s-3);
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--c-fg);
}
.search-shell__input::placeholder { color: var(--c-fg-faint); }
.search-shell__clear {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: var(--s-1);
  width: 1.75rem; height: 1.75rem;
  background: transparent;
  border: none;
  border-radius: var(--r-full);
  color: var(--c-fg-faint);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.search-shell__clear:hover { background: var(--c-bg-subtle); color: var(--c-fg-muted); }
.search-shell__submit {
  margin: var(--s-1) var(--s-1) var(--s-1) 0;
  height: calc(100% - 0.5rem);
}

/* ---------- HEADER CHROME (right-side icons, dropdowns) ------------------ */
.header-app__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
@media (min-width: 1024px) { .header-app__actions { gap: var(--s-3); } }

/* Icon button — used for hamburger, favoris, cart, user trigger */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--c-fg-muted);
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.icon-btn:hover {
  background: var(--c-bg-subtle);
  color: var(--c-fg);
}
.icon-btn[data-active="true"] {
  background: var(--c-bg-subtle);
  color: var(--c-fg);
}

/* Cart badge dot */
.icon-btn__badge {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  background: var(--c-brand);
  color: var(--c-fg-inverse);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-bg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* User pill (with avatar + label) */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.user-pill:hover { background: var(--c-bg-subtle); }
@media (min-width: 1024px) { .user-pill { padding-right: var(--s-3); } }

.user-pill__avatar {
  position: relative;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-accent);
  color: var(--c-fg-inverse);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
@media (min-width: 768px) { .user-pill__avatar { width: 2.25rem; height: 2.25rem; } }
.user-pill__avatar svg { width: 1.125rem; height: 1.125rem; }
.user-pill__avatar-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 0.625rem; height: 0.625rem;
  background: var(--c-warning);
  border: 2px solid var(--c-bg);
  border-radius: var(--r-full);
}
.user-pill__text {
  display: none;
  text-align: left;
  line-height: 1.25;
}
@media (min-width: 1024px) { .user-pill__text { display: block; } }
.user-pill__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-fg);
  max-width: 12.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-pill__client {
  font-size: var(--fs-2xs);
  color: var(--c-fg-subtle);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-pill__caret {
  font-size: var(--fs-sm);
  color: var(--c-fg-faint);
  transition: transform var(--t-fast) var(--ease-out);
}
.user-pill[data-open="true"] .user-pill__caret { transform: rotate(180deg); }

/* Dropdown menu (anchored under user-pill / icon-btn) */
.menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-2));
  min-width: 14rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  z-index: 50;
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.menu-dropdown[data-open="true"] {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-fg);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  border-top: 1px solid var(--c-border-muted);
}
.menu-item:first-child { border-top: none; }
.menu-item:hover { background: var(--c-bg-subtle); color: var(--c-fg); }
.menu-item--danger { color: var(--c-fg-muted); }
.menu-item--danger:hover { background: var(--c-danger-soft); color: var(--c-danger-fg); }
.menu-item__icon { color: var(--c-fg-faint); flex-shrink: 0; }
.menu-item:hover .menu-item__icon { color: var(--c-fg-muted); }

/* Search dropdown panel (different from menu — wide, scrollable) */
.search-dropdown {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: 0;
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  z-index: 200;
}
.search-dropdown__section { padding: var(--s-3) var(--s-4); }
.search-dropdown__section + .search-dropdown__section { border-top: 1px solid var(--c-border-muted); }
.search-dropdown__heading {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-fg-faint);
  margin-bottom: var(--s-2);
}
.search-result-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease-out);
}
.search-result-row:hover { background: var(--c-bg-subtle); }
.search-result-row__thumb {
  width: 2.75rem; height: 2.75rem;
  flex-shrink: 0;
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border-muted);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.search-result-row__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.search-result-row__body { min-width: 0; flex: 1; }
.search-result-row__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-row__meta {
  font-size: var(--fs-2xs);
  color: var(--c-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.search-loading {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  color: var(--c-fg-subtle);
  font-size: var(--fs-sm);
}
.search-spinner {
  width: 1rem; height: 1rem;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-fg-muted);
  border-radius: var(--r-full);
  animation: search-spin 0.8s linear infinite;
}
@keyframes search-spin { to { transform: rotate(360deg); } }

/* ---------- CATALOGUE LOADING / SLIDE ------------------------------------ */
.catalogue-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(1px);
  pointer-events: auto;
}
.catalogue-loading-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-fg);
}
.catalogue-slide {
  overflow: hidden;
  border-radius: var(--r-lg);
  margin-bottom: var(--s-4);
}
.catalogue-slide img {
  width: 100%;
  display: block;
}

/* ---------- CATALOGUE HEADER --------------------------------------------- */
.catalogue-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.catalogue-header__bar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
@media (min-width: 768px) {
  .catalogue-header__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.catalogue-header__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-fg-muted);
}
.catalogue-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* View switcher (grid/list) */
.view-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.view-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--c-fg-faint);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.view-switch__btn:hover { color: var(--c-fg-muted); background: var(--c-bg); }
.view-switch__btn[data-active="True"] {
  background: var(--c-bg);
  color: var(--c-fg);
  box-shadow: var(--sh-xs);
}
.view-switch__sep {
  height: 1rem;
  margin-inline: var(--s-1);
}

/* ---------- CATALOGUE PRODUCT CARDS (legacy class refresh) --------------- */
/* Layers on top of existing .product-card markup in ListeCardsDefault.razor.
   Refreshes the visual language to tokens without touching templates. */

.products-section {
  padding: var(--s-4);
  background: var(--c-bg-subtle);
}
.products-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.product-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}

.product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-bg-subtle);
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-image img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform var(--t-slow) var(--ease-out);
}
.product-card:hover .product-image img { transform: scale(1.03); }

.product-badge {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  z-index: 1;
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0.125rem var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--c-accent);
  color: var(--c-fg-inverse);
  border-radius: var(--r-xs);
  box-shadow: var(--sh-xs);
}
.product-badge + .product-badge { top: 2rem; }
.product-badge-composant {
  background: var(--c-info-soft);
  color: var(--c-info-fg);
}

.product-info {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.product-ref {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-fg-subtle);
  cursor: pointer;
}
.product-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-fg);
  margin: 0;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-specs {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  font-size: var(--fs-2xs);
  cursor: pointer;
}
.spec-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1875rem;
  padding: 0.125rem var(--s-2);
  background: var(--c-bg-subtle);
  border-radius: var(--r-xs);
}
.spec-label { color: var(--c-fg-subtle); }
.spec-value { font-weight: var(--fw-semibold); color: var(--c-fg); font-variant-numeric: tabular-nums; }

/* Stock badges — semantic palette */
.stock-badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0.125rem var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-xs);
  align-self: flex-start;
}
.stock-badge .stock-icon { font-size: 0.6875rem; }
.stock-available   { background: var(--c-success-soft); color: var(--c-success-fg); }
.stock-low         { background: var(--c-warning-soft); color: var(--c-warning-fg); }
.stock-unavailable { background: var(--c-danger-soft);  color: var(--c-danger-fg); }

/* "Dans le panier" highlight */
.product-card.danslepanier {
  border-color: var(--c-success);
  box-shadow: 0 0 0 1px var(--c-success) inset, var(--sh-sm);
}

/* ---------- TOGGLE / FAVORIS HEART --------------------------------------- */
.fav-toggle { border-radius: var(--r-full); width: 2.25rem; height: 2.25rem; }
.fav-toggle .fav-toggle__icon {
  color: var(--c-fg-faint);
  transition: color var(--t-base) var(--ease-out);
  font-variation-settings: 'FILL' 0;
}
.fav-toggle[data-active="true"] .fav-toggle__icon {
  color: var(--c-danger);
  font-variation-settings: 'FILL' 1;
}
.fav-toggle:hover .fav-toggle__icon { color: var(--c-danger); }

/* ---------- ACCESSIBILITY HELPERS ---------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: var(--s-4);
  background: var(--c-accent); color: var(--c-fg-inverse);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  z-index: 9999;
  transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus { top: var(--s-2); }

/* =============================================================================
   ATOM SHARED STYLES (Layer 1, post-Polymarket redesign)
   Used by:
     - Defaut/Composants/Atoms/TextField.razor
     - Defaut/Composants/Atoms/SelectField.razor
     - Defaut/Composants/Atoms/Checkbox.razor
   Component-scoped CSS isolation can't share classes across .razor files, so
   these shared shells live here. The class prefix .cs-* is unique to Layer 1
   atoms — keep additions to that prefix to avoid collisions with legacy.
   ============================================================================ */

.cs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
}
.cs-field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-fg-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.cs-field__required { color: var(--c-danger); margin-left: 2px; }

.cs-field__control {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 38px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.cs-field__control:hover { border-color: var(--c-border-strong); }
.cs-field__control:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--sh-focus);
  background: var(--c-bg);
}
.cs-field__icon {
  display: inline-flex; align-items: center;
  padding: 0 var(--s-2) 0 var(--s-3);
  color: var(--c-fg-subtle);
  font-size: 18px;
  font-variation-settings: 'opsz' 20, 'wght' 500;
}
.cs-field__input {
  flex: 1; min-width: 0;
  padding: 0 var(--s-3);
  background: transparent; border: none; outline: none;
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1;
}
.cs-field__input::placeholder { color: var(--c-fg-faint); }
.cs-field__input:disabled,
.cs-field__select:disabled { color: var(--c-fg-faint); cursor: not-allowed; }

.cs-field--error .cs-field__control { border-color: var(--c-danger); }
.cs-field--error .cs-field__control:focus-within {
  box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-danger-soft);
}
.cs-field__suffix {
  display: inline-flex; align-items: center;
  padding: 0 var(--s-3);
  background: var(--c-bg-subtle);
  color: var(--c-fg-subtle);
  font-size: var(--fs-xs);
  border-left: 1px solid var(--c-border);
}
.cs-field__error { margin: 0; font-size: var(--fs-xs); color: var(--c-danger-fg); }
.cs-field__help  { margin: 0; font-size: var(--fs-xs); color: var(--c-fg-subtle); }

.cs-field--select .cs-field__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  padding-right: var(--s-8);
  cursor: pointer;
}
.cs-field__caret {
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-fg-subtle);
  font-size: 20px;
  pointer-events: none;
  font-variation-settings: 'opsz' 20, 'wght' 500;
}

/* ----- Checkbox ----------------------------------------------------------- */
.cs-check {
  display: inline-flex; align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-fg);
  user-select: none;
}
.cs-check--disabled { opacity: 0.55; cursor: not-allowed; }

.cs-check__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cs-check__box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-xs);
  background: var(--c-bg);
  box-shadow: var(--sh-xs);
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-instant) var(--ease-spring);
  flex-shrink: 0;
}
.cs-check:hover .cs-check__box { border-color: var(--c-accent); }
.cs-check__input:checked + .cs-check__box { transform: scale(1.05); }
.cs-check__tick {
  color: transparent;
  font-size: 14px;
  font-variation-settings: 'opsz' 20, 'wght' 700;
}
.cs-check__input:checked + .cs-check__box {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.cs-check__input:checked + .cs-check__box .cs-check__tick { color: var(--c-cta-fg); }
.cs-check__input:focus-visible + .cs-check__box { box-shadow: var(--sh-focus); }
.cs-check--error .cs-check__box { border-color: var(--c-danger); }
.cs-check__label { color: var(--c-fg); }

/* ---------- LEGACY BRIDGES ----------------------------------------------- */
/* Old --CS_color1 tokens stay mapped so legacy components keep working while
   new code adopts --c-accent. Remove after final migration. */
:root {
  --CS_color1:     var(--c-brand);
  --CS_colorInit:  var(--c-brand);
  --color-custom:  var(--c-brand);
  --CS_color2:     #BF342580;
  --CS_colorvalid: var(--c-success);
  --CS_colorinvalid: var(--c-danger);
  --CS_color-blanc: var(--c-bg);
  --CS_color-noir:  var(--c-fg);
  --CS_color-gris:  var(--c-fg-faint);
}

/* ====================== radzen-bridge.css ====================== */
/* =============================================================================
   Radzen Blazor — theme bridge.
   Maps Radzen CSS variables to our design tokens so dialogs, grids, dropdowns
   and form widgets inherit the Polymarket-inspired palette and flip cleanly
   in dark mode. Loaded after Radzen's default-base.css so these overrides win.

   Source of truth for design tokens: design-tokens.css.
   ============================================================================ */

:root {
    /* Surfaces */
    --rz-base-background-color:        var(--c-bg);
    --rz-body-background-color:        var(--c-bg);
    --rz-content-background-color:     var(--c-bg);
    --rz-layout-background-color:      var(--c-bg-subtle);
    --rz-panel-background-color:       var(--c-bg);
    --rz-card-background-color:        var(--c-bg);
    --rz-dialog-background-color:      var(--c-bg);
    --rz-overlay-background-color:     rgba(15, 23, 42, 0.55);

    /* Text */
    --rz-text-color:                   var(--c-fg);
    --rz-text-primary-color:           var(--c-fg);
    --rz-text-secondary-color:         var(--c-fg-muted);
    --rz-text-tertiary-color:          var(--c-fg-subtle);
    --rz-text-disabled-color:          var(--c-fg-faint);
    --rz-text-contrast-color:          var(--c-fg-inverse);
    --rz-link-color:                   var(--c-info);
    --rz-link-hover-color:             var(--c-info-fg);

    /* Borders */
    --rz-border:                       1px solid var(--c-border);
    --rz-border-radius:                var(--r-md);
    --rz-border-color:                 var(--c-border);
    --rz-border-light:                 var(--c-border-muted);
    --rz-border-dark:                  var(--c-border-strong);
    --rz-input-border-color:           var(--c-border);
    --rz-input-focus-border-color:     var(--c-border-strong);

    /* Brand / primary — uses --c-accent so Polymarket-style neutral wins by
       default. Override per-surface (e.g. promo banners) to --c-brand. */
    --rz-primary:                      var(--c-accent);
    --rz-primary-light:                var(--c-accent-soft);
    --rz-primary-dark:                 var(--c-accent-hover);
    --rz-primary-lighter:              var(--c-accent-soft);
    --rz-primary-darker:               var(--c-accent-hover);

    /* Semantic */
    --rz-success:                      var(--c-success);
    --rz-success-lighter:              var(--c-success-soft);
    --rz-success-darker:               var(--c-success-fg);
    --rz-info:                         var(--c-info);
    --rz-info-lighter:                 var(--c-info-soft);
    --rz-info-darker:                  var(--c-info-fg);
    --rz-warning:                      var(--c-warning);
    --rz-warning-lighter:              var(--c-warning-soft);
    --rz-warning-darker:               var(--c-warning-fg);
    --rz-danger:                       var(--c-danger);
    --rz-danger-lighter:               var(--c-danger-soft);
    --rz-danger-darker:                var(--c-danger-fg);

    /* Inputs */
    --rz-input-background-color:           var(--c-bg);
    --rz-input-disabled-background-color:  var(--c-bg-muted);
    --rz-input-color:                      var(--c-fg);
    --rz-input-placeholder-color:          var(--c-fg-faint);
    --rz-input-focus-shadow:               var(--sh-focus);

    /* Buttons */
    --rz-button-radius:                var(--r-md);
    --rz-button-primary-background-color:     var(--c-accent);
    --rz-button-primary-hover-background-color: var(--c-accent-hover);
    --rz-button-primary-color:                var(--c-cta-fg);
    --rz-button-secondary-background-color:   var(--c-bg);
    --rz-button-secondary-hover-background-color: var(--c-bg-subtle);
    --rz-button-secondary-color:              var(--c-fg);
    --rz-button-danger-background-color:      var(--c-danger);
    --rz-button-danger-color:                 #fff;

    /* DataGrid */
    --rz-grid-background-color:        var(--c-bg);
    --rz-grid-header-background-color: var(--c-bg-subtle);
    --rz-grid-header-color:            var(--c-fg-muted);
    --rz-grid-row-background-color:    var(--c-bg);
    --rz-grid-row-alt-background-color: var(--c-bg-subtle);
    --rz-grid-row-hover-background-color: var(--c-bg-muted);
    --rz-grid-cell-color:              var(--c-fg);
    --rz-grid-cell-border:             1px solid var(--c-border-muted);
    --rz-grid-cell-padding:            var(--s-3) var(--s-4);

    /* Dropdown / menu */
    --rz-dropdown-background-color:    var(--c-bg);
    --rz-dropdown-color:               var(--c-fg);
    --rz-dropdown-hover-background-color: var(--c-bg-subtle);
    --rz-menu-background-color:        var(--c-bg);
    --rz-menu-item-color:              var(--c-fg);
    --rz-menu-item-hover-background-color: var(--c-bg-subtle);

    /* Dialog */
    --rz-dialog-radius:                var(--r-xl);
    --rz-dialog-shadow:                var(--sh-xl);
    --rz-dialog-header-background-color: var(--c-bg);
    --rz-dialog-header-color:          var(--c-fg);

    /* Tooltips, notifications */
    --rz-tooltip-background-color:     var(--c-bg-inverse);
    --rz-tooltip-color:                var(--c-fg-inverse);
    --rz-notification-background-color: var(--c-bg);

    /* Tab / paginator / pickers — use neutral surfaces */
    --rz-tabs-background-color:        var(--c-bg);
    --rz-tabs-item-color:              var(--c-fg-muted);
    --rz-tabs-item-active-color:       var(--c-fg);
    --rz-tabs-item-hover-color:        var(--c-fg);
    --rz-paginator-background-color:   var(--c-bg-subtle);
    --rz-paginator-color:              var(--c-fg-muted);

    /* Typography */
    --rz-text-font-family:             var(--font-sans);
    --rz-input-font-family:            var(--font-sans);
}

/* Dark theme overrides — kept tight; most vars flow through the
   already-flipped --c-* tokens above. */
html.theme-dark {
    --rz-overlay-background-color: rgba(0, 0, 0, 0.65);
    --rz-input-focus-shadow:
        0 0 0 2px var(--c-bg),
        0 0 0 4px var(--c-focus-ring);
}

/* ----- Targeted selector overrides ---------------------------------------
   A few Radzen components hardcode colors rather than reading vars. Patch
   them here so the bridge is complete without forking the package CSS.
   --------------------------------------------------------------------------- */

.rz-paginator,
.rz-paginator-page,
.rz-paginator-element,
.rz-grid,
.rz-data-grid,
.rz-data-grid-data,
.rz-dialog,
.rz-dialog-content,
.rz-tabview,
.rz-dropdown,
.rz-dropdown-panel,
.rz-listbox,
.rz-multiselect-panel,
.rz-notification,
.rz-tooltip {
    background-color: var(--c-bg);
    color: var(--c-fg);
    border-color: var(--c-border);
}

.rz-grid-table th,
.rz-data-grid-data thead th,
.rz-grid-table thead {
    background-color: var(--c-bg-subtle) !important;
    color: var(--c-fg-muted) !important;
    border-color: var(--c-border) !important;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
}

.rz-grid-table td,
.rz-data-grid-data tbody td {
    background-color: var(--c-bg) !important;
    color: var(--c-fg) !important;
    border-color: var(--c-border-muted) !important;
    font-size: var(--fs-sm);
}
.rz-data-grid-data tbody tr:hover td {
    background-color: var(--c-bg-subtle) !important;
}

/* Inputs */
.rz-textbox,
.rz-numeric,
.rz-dropdown,
.rz-multiselect,
.rz-datepicker,
.rz-mask {
    background-color: var(--c-bg);
    color: var(--c-fg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
}
.rz-textbox:focus,
.rz-numeric:focus,
.rz-dropdown:focus,
.rz-multiselect:focus,
.rz-datepicker:focus {
    outline: none;
    border-color: var(--c-border-strong);
    box-shadow: var(--sh-focus);
}

/* Buttons */
.rz-button.rz-primary { background: var(--c-accent); color: var(--c-cta-fg); border-color: var(--c-accent); }
.rz-button.rz-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.rz-button.rz-secondary { background: var(--c-bg); color: var(--c-fg); border-color: var(--c-border); }
.rz-button.rz-secondary:hover { background: var(--c-bg-subtle); border-color: var(--c-border-strong); }
.rz-button.rz-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.rz-button.rz-success { background: var(--c-success); color: #fff; border-color: var(--c-success); }

/* Dialog */
.rz-dialog {
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    border: 1px solid var(--c-border);
}
.rz-dialog .rz-dialog-titlebar {
    background: var(--c-bg);
    color: var(--c-fg);
    border-bottom: 1px solid var(--c-border);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
}

/* Notifications (Radzen ToastService) — match our Toast molecule visually */
.rz-notification {
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    border-left: 3px solid var(--c-info);
}
.rz-notification.rz-notification-success { border-left-color: var(--c-success); }
.rz-notification.rz-notification-warning { border-left-color: var(--c-warning); }
.rz-notification.rz-notification-error { border-left-color: var(--c-danger); }

/* ====================== backoffice/tokens.css ====================== */
/* Backoffice design tokens — Shopify Polaris-grade.
   Mirrors Polaris colour roles & spacing, drives both shell and Radzen widgets. */

:root {
    /* ===== Polaris core greens (brand) ===== */
    --bo-brand-50:  #e8f4ee;
    --bo-brand-100: #c7e6d4;
    --bo-brand-200: #95d2af;
    --bo-brand-300: #5cb986;
    --bo-brand-400: #2e9e64;
    --bo-brand-500: #008060;   /* Polaris primary */
    --bo-brand-600: #006e52;
    --bo-brand-700: #005943;
    --bo-brand-800: #004c3f;
    --bo-brand-900: #002e25;

    /* ===== Polaris neutrals ===== */
    --bo-ink-0:   #ffffff;
    --bo-ink-25:  #fafbfb;
    --bo-ink-50:  #f6f6f7;
    --bo-ink-75:  #f1f2f3;
    --bo-ink-100: #ebebeb;
    --bo-ink-150: #e1e3e5;
    --bo-ink-200: #d2d5d8;
    --bo-ink-300: #babfc3;
    --bo-ink-400: #8c9196;
    --bo-ink-500: #6d7175;
    --bo-ink-600: #5c5f62;
    --bo-ink-700: #3f4347;
    --bo-ink-800: #303030;
    --bo-ink-900: #1a1c1e;
    --bo-ink-950: #0c0d0e;

    /* ===== Surfaces ===== */
    --bo-bg-app:        var(--bo-ink-50);    /* page background */
    --bo-bg-app-2:      var(--bo-ink-75);
    --bo-surface:       #ffffff;
    --bo-surface-sub:   var(--bo-ink-25);
    --bo-surface-hover: var(--bo-ink-50);
    --bo-surface-press: var(--bo-ink-75);
    --bo-border:        var(--bo-ink-150);
    --bo-border-strong: var(--bo-ink-200);
    --bo-divider:       var(--bo-ink-100);

    /* ===== Sidebar (Polaris-style light) ===== */
    --bo-sidebar-bg:        var(--bo-ink-50);
    --bo-sidebar-border:    var(--bo-ink-150);
    --bo-sidebar-text:      var(--bo-ink-800);
    --bo-sidebar-text-dim:  var(--bo-ink-500);
    --bo-sidebar-text-hi:   var(--bo-ink-900);
    --bo-sidebar-item-hover:#ebebeb;
    --bo-sidebar-item-active-bg: #e3e3e3;
    --bo-sidebar-item-active-fg: var(--bo-ink-900);
    --bo-sidebar-accent:    var(--bo-brand-500);
    --bo-sidebar-search-bg: #ffffff;

    /* ===== Text ===== */
    --bo-text:        var(--bo-ink-800);
    --bo-text-strong: var(--bo-ink-900);
    --bo-text-soft:   var(--bo-ink-700);
    --bo-text-muted:  var(--bo-ink-500);
    --bo-text-faint:  var(--bo-ink-400);
    --bo-text-onbrand:#ffffff;
    --bo-text-link:   var(--bo-brand-700);

    /* ===== Status (Polaris tones) ===== */
    --bo-success-50: #cdf2dc; --bo-success-bg: #aee9d1; --bo-success-500:#008060; --bo-success-700:#005943; --bo-success-text:#0c5132;
    --bo-warn-50:    #fff3d0; --bo-warn-bg:    #ffea8a; --bo-warn-500:   #b98900; --bo-warn-700:   #916a00; --bo-warn-text:   #916a00;
    --bo-danger-50:  #fed3d1; --bo-danger-bg:  #fdb8b3; --bo-danger-500: #d72c0d; --bo-danger-700: #8a1a06; --bo-danger-text: #8a1a06;
    --bo-info-50:    #d0e7ff; --bo-info-bg:    #a4cafe; --bo-info-500:   #0c5fcc; --bo-info-700:   #00417e; --bo-info-text:   #00417e;
    --bo-mag-50:     #f6d2ff; --bo-mag-bg:     #f4b6ff; --bo-mag-500:    #9c2d9c; --bo-mag-700:    #5d0f5d; --bo-mag-text:    #5d0f5d;

    /* ===== Radius ===== */
    --bo-radius-xs: 4px;
    --bo-radius-sm: 6px;
    --bo-radius:    8px;     /* Polaris default */
    --bo-radius-lg: 12px;    /* cards */
    --bo-radius-xl: 16px;
    --bo-radius-2xl:20px;
    --bo-radius-full: 999px;

    /* ===== Elevation (Polaris is very subtle) ===== */
    --bo-shadow-xs: 0 1px 0 rgba(0,0,0,0.05);
    --bo-shadow-sm: 0 1px 0 rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,0.04);
    --bo-shadow:    0 1px 0 rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.06);
    --bo-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --bo-shadow-lg: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
    --bo-shadow-xl: 0 32px 64px rgba(0,0,0,0.18), 0 12px 24px rgba(0,0,0,0.08);
    --bo-ring:      0 0 0 2px rgba(0,128,96,0.30);
    --bo-ring-focus:0 0 0 2px #ffffff, 0 0 0 4px #458fff;

    /* ===== Spacing (Polaris space scale) ===== */
    --bo-space-025: 1px;
    --bo-space-050: 2px;
    --bo-space-1: 4px;
    --bo-space-150: 6px;
    --bo-space-2: 8px;
    --bo-space-3: 12px;
    --bo-space-4: 16px;
    --bo-space-5: 20px;
    --bo-space-6: 24px;
    --bo-space-7: 28px;
    --bo-space-8: 32px;
    --bo-space-10:40px;
    --bo-space-12:48px;
    --bo-space-16:64px;

    /* ===== Type ===== */
    --bo-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bo-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bo-fs-100:   11px;
    --bo-fs-200:   12px;
    --bo-fs-300:   13px;   /* body */
    --bo-fs-400:   14px;
    --bo-fs-500:   16px;
    --bo-fs-600:   20px;
    --bo-fs-700:   24px;   /* page title */
    --bo-fs-800:   30px;
    --bo-fs-900:   38px;
    --bo-lh-tight:1.2;
    --bo-lh-snug: 1.35;
    --bo-lh-base: 1.5;
    --bo-fw-400:  400;
    --bo-fw-500:  500;
    --bo-fw-600:  600;
    --bo-fw-650:  650;
    --bo-fw-700:  700;

    /* ===== Layout dims ===— matches Shopify Admin */
    --bo-sidebar-w:           240px;
    --bo-sidebar-w-collapsed: 64px;
    --bo-topbar-h:            56px;
    --bo-savebar-h:           52px;
    --bo-content-max:         1136px;
    --bo-content-padding-x:   24px;
    --bo-content-padding-y:   0px;

    /* ===== Animation ===== */
    --bo-ease:     cubic-bezier(0.4, 0.0, 0.2, 1);
    --bo-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --bo-dur-fast: 120ms;
    --bo-dur-base: 200ms;
    --bo-dur-slow: 320ms;
}

/* ===== Override Radzen so inner Radzen widgets look Polaris ===== */
:root {
    --rz-primary:        var(--bo-brand-500);
    --rz-primary-dark:   var(--bo-brand-700);
    --rz-primary-darker: var(--bo-brand-800);
    --rz-primary-light:  var(--bo-brand-300);
    --rz-primary-lighter:var(--bo-brand-100);
    --rz-on-primary:     #ffffff;
    --rz-secondary:      var(--bo-ink-700);
    --rz-text-color:     var(--bo-text);
    --rz-text-secondary-color: var(--bo-text-soft);
    --rz-text-disabled-color:  var(--bo-text-faint);
    --rz-base-background-color: var(--bo-bg-app);
    --rz-card-background-color: var(--bo-surface);
    --rz-border-radius:        var(--bo-radius);
    --rz-border:               1px solid var(--bo-border);
    --rz-input-border:         1px solid var(--bo-border);
    --rz-input-focus-border:   1px solid var(--bo-brand-500);
    --rz-button-border-radius: var(--bo-radius);
    --rz-input-border-radius:  var(--bo-radius);
    --rz-shadow-1:             var(--bo-shadow-xs);
    --rz-shadow-2:             var(--bo-shadow-sm);
    --rz-shadow-3:             var(--bo-shadow);
    --rz-success:              var(--bo-success-500);
    --rz-warning:              var(--bo-warn-500);
    --rz-danger:               var(--bo-danger-500);
    --rz-info:                 var(--bo-info-500);
}

/* ====================== backoffice/tokens-v2.css ====================== */
/* ============================================================================
   Tokens v2 — semantic intents + density modes.
   Loaded AFTER tokens.css. Adds new tokens, keeps backward compat.
   ============================================================================ */

:root {
    /* ===== SEMANTIC INTENTS (Polymarket-style) =====
       Used for product/order/market states. */
    --bo-intent-tradeable: var(--bo-brand-500, #008060);   /* buyable / available */
    --bo-intent-sold:      var(--bo-info-500, #0c5fcc);    /* sold / locked */
    --bo-intent-pending:   var(--bo-warn-500, #b98900);    /* pending / processing */
    --bo-intent-expired:   var(--bo-text-faint, #8c9196);  /* expired / inactive */
    --bo-intent-rejected:  var(--bo-danger-500, #d72c0d);

    /* ===== DENSITY MODES =====
       Default = "cosy". Flip via .bo-density-compact or .bo-density-spacious. */
    --bo-density-row-pad-y: 10px;
    --bo-density-row-pad-x: 16px;
    --bo-density-row-gap:   10px;
    --bo-density-input-h:   32px;
    --bo-density-btn-h:     32px;
    --bo-density-card-pad:  20px;
    --bo-density-fs:        var(--bo-fs-300, 13px);
}

/* Compact — Polymarket-tight data view */
.bo-density-compact {
    --bo-density-row-pad-y: 6px;
    --bo-density-row-pad-x: 12px;
    --bo-density-row-gap:   6px;
    --bo-density-input-h:   28px;
    --bo-density-btn-h:     28px;
    --bo-density-card-pad:  14px;
    --bo-density-fs:        var(--bo-fs-200, 12px);
}

/* Spacious — Polaris airy */
.bo-density-spacious {
    --bo-density-row-pad-y: 16px;
    --bo-density-row-pad-x: 22px;
    --bo-density-row-gap:   14px;
    --bo-density-input-h:   40px;
    --bo-density-btn-h:     40px;
    --bo-density-card-pad:  28px;
    --bo-density-fs:        var(--bo-fs-400, 14px);
}

/* Apply density to common components */
.bo-density-compact .bo-list li,
.bo-density-spacious .bo-list li {
    padding: var(--bo-density-row-pad-y) var(--bo-density-row-pad-x) !important;
    gap: var(--bo-density-row-gap) !important;
}
.bo-density-compact .bo-btn,
.bo-density-spacious .bo-btn {
    min-height: var(--bo-density-btn-h) !important;
}
.bo-density-compact .rz-textbox,
.bo-density-compact .rz-dropdown,
.bo-density-spacious .rz-textbox,
.bo-density-spacious .rz-dropdown {
    min-height: var(--bo-density-input-h) !important;
}
.bo-density-compact .bo-card-body.bo-pad,
.bo-density-spacious .bo-card-body.bo-pad {
    padding: var(--bo-density-card-pad) !important;
}

/* Tabular row helper — Polymarket data row */
.bo-data-row {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    padding: var(--bo-density-row-pad-y) var(--bo-density-row-pad-x);
    gap: var(--bo-density-row-gap);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    transition: background var(--bo-dur-fast, 140ms) var(--bo-ease, ease);
}
.bo-data-row:hover { background: var(--bo-surface-sub, #f6f6f7); }

/* ====================== backoffice/shell.css ====================== */
/* Backoffice shell — Polaris-grade.
   Frame: light sidebar + top bar + main + page header + cards + savebar + popovers + cmd palette.
   Built on tokens.css. Also overrides Radzen widgets to fit. */

/* ===== Base — scoped to .bo-app so non-backoffice pages stay untouched ===== */
.bo-app, .bo-app * { box-sizing: border-box; }
.bo-app {
    background: var(--bo-bg-app);
    color: var(--bo-text);
    font-family: var(--bo-font-sans);
    font-size: var(--bo-fs-300);
    line-height: var(--bo-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}
.bo-app a { color: var(--bo-text-link); text-decoration: none; }
.bo-app a:hover { text-decoration: underline; }
.bo-app ::selection { background: var(--bo-brand-100); color: var(--bo-brand-900); }
.bo-app :focus-visible { outline: 2px solid var(--bo-brand-500); outline-offset: 2px; border-radius: 4px; }
/* Paint body app-bg only when backoffice mounted, so non-backoffice pages keep their own bg */
body:has(.bo-app) { background: var(--bo-bg-app); margin: 0; }
/* Ensure ContentColinternet wrapper doesn't add extra padding/margin around .bo-app */
#ContentColinternet:has(> .bo-app) { padding: 0; margin: 0; }

/* Material symbols — must render reliably */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', system-ui, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    vertical-align: middle;
    user-select: none;
    font-display: block; /* avoid flash of unstyled text */
}

/* ===== Frame ===== */
.bo-app {
    display: grid;
    grid-template-columns: var(--bo-sidebar-w) 1fr;
    grid-template-rows: var(--bo-topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    min-height: 100vh;
    transition: grid-template-columns var(--bo-dur-base) var(--bo-ease);
    background: var(--bo-bg-app);
}
.bo-app.bo-collapsed { grid-template-columns: var(--bo-sidebar-w-collapsed) 1fr; }

/* Route progress bar (top) */
.bo-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 999;
    background: transparent;
    pointer-events: none;
}
.bo-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--bo-brand-500), transparent);
    animation: bo-progress-slide 1.1s ease-in-out infinite;
}
@keyframes bo-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(360%); }
}

/* ===== Sidebar ===== */
.bo-sidebar {
    grid-area: sidebar;
    background: var(--bo-sidebar-bg);
    border-right: 1px solid var(--bo-sidebar-border);
    color: var(--bo-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 30;
}

/* Brand */
.bo-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--bo-space-3);
    padding: 12px 14px;
    border-bottom: 1px solid var(--bo-sidebar-border);
    cursor: pointer;
    user-select: none;
    background: var(--bo-sidebar-bg);
    height: var(--bo-topbar-h);
}
.bo-sidebar-brand:hover { background: var(--bo-sidebar-item-hover); }
.bo-sidebar-brand-logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--bo-brand-500);
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 14px;
    flex: 0 0 32px;
    letter-spacing: -0.02em;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.12);
}
.bo-sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; flex: 1 1 auto; }
.bo-sidebar-brand-text .bo-title {
    color: var(--bo-sidebar-text-hi);
    font-weight: var(--bo-fw-650);
    font-size: 14px;
    letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bo-sidebar-brand-text .bo-sub {
    color: var(--bo-sidebar-text-dim);
    font-size: 11px;
    margin-top: 2px;
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bo-sidebar-brand .bo-store-switch {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    color: var(--bo-sidebar-text-dim);
    border-radius: 4px;
    flex: 0 0 24px;
}
.bo-sidebar-brand:hover .bo-store-switch { color: var(--bo-sidebar-text); }
.bo-sidebar-brand .material-symbols-outlined { font-size: 18px; }

.bo-app.bo-collapsed .bo-sidebar-brand-text,
.bo-app.bo-collapsed .bo-sidebar-brand .bo-store-switch,
.bo-app.bo-collapsed .bo-nav-label,
.bo-app.bo-collapsed .bo-nav-section-title,
.bo-app.bo-collapsed .bo-nav-badge,
.bo-app.bo-collapsed .bo-sidebar-footer-text,
.bo-app.bo-collapsed .bo-sidebar-search { display: none; }
.bo-app.bo-collapsed .bo-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.bo-app.bo-collapsed .bo-sidebar-brand { justify-content: center; padding: 12px 0; }
.bo-app.bo-collapsed .bo-sidebar-footer { justify-content: center; padding: 8px 0; }

/* Sidebar search button (k-bar trigger) */
.bo-sidebar-search { padding: 10px 12px; }
.bo-sidebar-search-btn {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    background: var(--bo-sidebar-search-bg);
    border: 1px solid var(--bo-sidebar-border);
    color: var(--bo-text-muted);
    padding: 6px 8px 6px 10px;
    border-radius: var(--bo-radius);
    font-size: var(--bo-fs-300);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--bo-dur-fast), box-shadow var(--bo-dur-fast);
}
.bo-sidebar-search-btn:hover { border-color: var(--bo-border-strong); }
.bo-sidebar-search-btn:focus-visible { outline: none; box-shadow: var(--bo-ring); }
.bo-sidebar-search-btn .material-symbols-outlined { font-size: 18px; }
.bo-sidebar-search-btn .bo-kbd { margin-left: auto; }

/* Nav */
.bo-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 8px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--bo-ink-200) transparent;
}
.bo-nav::-webkit-scrollbar { width: 6px; }
.bo-nav::-webkit-scrollbar-thumb { background: var(--bo-ink-200); border-radius: 3px; }
.bo-nav-section { margin-top: 14px; }
.bo-nav-section:first-child { margin-top: 4px; }
.bo-nav-section-title {
    color: var(--bo-sidebar-text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 6px 10px 4px;
}
.bo-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin: 1px 0;
    border-radius: var(--bo-radius);
    color: var(--bo-sidebar-text);
    text-decoration: none !important;
    font-size: var(--bo-fs-300);
    font-weight: var(--bo-fw-500);
    cursor: pointer;
    transition: background var(--bo-dur-fast) var(--bo-ease), color var(--bo-dur-fast) var(--bo-ease);
    position: relative;
    white-space: nowrap;
}
.bo-nav-item:hover { background: var(--bo-sidebar-item-hover); color: var(--bo-sidebar-text-hi); }
.bo-nav-item .material-symbols-outlined { font-size: 18px; flex: 0 0 18px; color: var(--bo-ink-700); transition: color var(--bo-dur-fast); }
.bo-nav-item:hover .material-symbols-outlined { color: var(--bo-ink-900); }
.bo-nav-item.active {
    background: var(--bo-sidebar-item-active-bg);
    color: var(--bo-sidebar-item-active-fg);
    font-weight: var(--bo-fw-600);
}
.bo-nav-item.active .material-symbols-outlined { color: var(--bo-brand-700); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.bo-nav-item.active::before {
    content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px;
    width: 2px; border-radius: 1px; background: var(--bo-brand-500);
}
.bo-nav-badge {
    margin-left: auto;
    background: var(--bo-surface);
    color: var(--bo-text-soft);
    font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: var(--bo-radius-full);
    border: 1px solid var(--bo-border);
    line-height: 1.5;
}
.bo-nav-item.active .bo-nav-badge {
    background: var(--bo-brand-500);
    color: #fff; border-color: var(--bo-brand-500);
}

/* Footer */
.bo-sidebar-footer {
    border-top: 1px solid var(--bo-sidebar-border);
    padding: 8px 10px;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    transition: background var(--bo-dur-fast);
}
.bo-sidebar-footer:hover { background: var(--bo-sidebar-item-hover); }
.bo-sidebar-footer-text { line-height: 1.2; overflow: hidden; min-width: 0; flex: 1 1 auto; }
.bo-sidebar-footer-text .bo-version { color: var(--bo-text-strong); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-sidebar-footer-text .bo-build   { color: var(--bo-text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-sidebar-footer .material-symbols-outlined { color: var(--bo-text-muted); font-size: 18px; }

/* ===== Mobile backdrop ===== */
.bo-mobile-backdrop {
    position: fixed; inset: 0;
    background: rgba(26, 28, 30, 0.45);
    backdrop-filter: blur(2px);
    z-index: 25;
    display: none;
    animation: bo-fade-in 160ms var(--bo-ease-out);
}
.bo-app.bo-mobile-open .bo-mobile-backdrop { display: block; }

/* ===== Topbar ===== */
.bo-topbar {
    grid-area: topbar;
    background: var(--bo-surface);
    border-bottom: 1px solid var(--bo-border);
    display: flex;
    align-items: center;
    gap: var(--bo-space-2);
    padding: 0 12px 0 16px;
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--bo-topbar-h);
}
.bo-topbar-toggle, .bo-topbar-iconbtn {
    background: transparent; border: none; cursor: pointer;
    width: 32px; height: 32px;
    border-radius: var(--bo-radius);
    display: grid; place-items: center;
    color: var(--bo-ink-700);
    transition: background var(--bo-dur-fast);
    position: relative;
    font-family: inherit;
}
.bo-topbar-toggle:hover, .bo-topbar-iconbtn:hover { background: var(--bo-surface-hover); color: var(--bo-text-strong); }
.bo-topbar-toggle:focus-visible, .bo-topbar-iconbtn:focus-visible { outline: none; box-shadow: var(--bo-ring); }
.bo-topbar-iconbtn .material-symbols-outlined { font-size: 20px; }

.bo-topbar-spacer { flex: 1 1 auto; }

/* command palette pill in topbar */
.bo-topbar-cmd {
    flex: 1 1 460px;
    max-width: 560px;
    margin: 0 auto;
}
.bo-topbar-cmd-btn {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    background: var(--bo-bg-app);
    border: 1px solid transparent;
    color: var(--bo-text-muted);
    padding: 6px 10px;
    border-radius: var(--bo-radius);
    font-size: var(--bo-fs-300);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--bo-dur-fast);
}
.bo-topbar-cmd-btn:hover { background: var(--bo-ink-75); }
.bo-topbar-cmd-btn:focus-visible { outline: none; background: var(--bo-surface); border-color: var(--bo-brand-500); box-shadow: var(--bo-ring); }
.bo-topbar-cmd-btn .material-symbols-outlined { font-size: 18px; }

.bo-topbar-actions { display: flex; align-items: center; gap: 4px; }
.bo-topbar-iconbtn .bo-dot {
    position: absolute; top: 6px; right: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bo-danger-500); border: 2px solid var(--bo-surface);
}

/* user pill */
.bo-topbar-user {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--bo-radius-full);
    cursor: pointer;
    transition: background var(--bo-dur-fast);
    margin-left: 4px;
    position: relative;
}
.bo-topbar-user:hover { background: var(--bo-surface-hover); }
.bo-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bo-brand-500);
    color: #fff; font-weight: 600; font-size: 11px;
    display: grid; place-items: center;
    letter-spacing: 0;
    flex: 0 0 auto;
}
.bo-avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.bo-avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.bo-topbar-user-meta { line-height: 1.15; }
.bo-topbar-user-meta .bo-name { font-size: var(--bo-fs-300); font-weight: 600; color: var(--bo-text-strong); white-space: nowrap; }
.bo-topbar-user-meta .bo-role { font-size: 11px; color: var(--bo-text-muted); white-space: nowrap; }

/* ===== Popovers (user menu, notifications) ===== */
.bo-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    max-width: 360px;
    background: var(--bo-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius-lg);
    box-shadow: var(--bo-shadow-lg);
    z-index: 50;
    overflow: hidden;
    animation: bo-pop var(--bo-dur-fast) var(--bo-ease-out);
}
@keyframes bo-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.bo-popover-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bo-divider);
    display: flex; align-items: center; gap: 10px;
}
.bo-popover-title { font-weight: var(--bo-fw-650); color: var(--bo-text-strong); font-size: var(--bo-fs-400); }
.bo-popover-sub   { color: var(--bo-text-muted); font-size: var(--bo-fs-200); }
.bo-popover-section { padding: 4px; border-top: 1px solid var(--bo-divider); }
.bo-popover-section:first-of-type { border-top: 0; }
.bo-popover-section-title {
    padding: 8px 12px 4px;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
    color: var(--bo-text-muted);
}
.bo-popover-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: var(--bo-radius);
    cursor: pointer;
    color: var(--bo-text-strong);
    font-size: var(--bo-fs-300);
    font-weight: 500;
    text-decoration: none !important;
}
.bo-popover-item:hover { background: var(--bo-surface-hover); }
.bo-popover-item .material-symbols-outlined { font-size: 18px; color: var(--bo-ink-700); }
.bo-popover-item.danger { color: var(--bo-danger-text); }
.bo-popover-item.danger:hover { background: var(--bo-danger-50); }
.bo-popover-item.danger .material-symbols-outlined { color: var(--bo-danger-text); }
.bo-popover-item .bo-pop-meta { margin-left: auto; color: var(--bo-text-muted); font-size: var(--bo-fs-200); }

/* Notification list inside popover */
.bo-notif-list { max-height: 320px; overflow-y: auto; }
.bo-notif {
    display: flex; gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--bo-divider);
    cursor: pointer;
    transition: background var(--bo-dur-fast);
}
.bo-notif:first-child { border-top: 0; }
.bo-notif:hover { background: var(--bo-surface-hover); }
.bo-notif-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bo-brand-500); margin-top: 6px; flex: 0 0 8px;
}
.bo-notif.read .bo-notif-dot { background: var(--bo-ink-200); }
.bo-notif-body { flex: 1 1 auto; min-width: 0; }
.bo-notif-title { font-size: var(--bo-fs-300); font-weight: 600; color: var(--bo-text-strong); }
.bo-notif-meta  { font-size: var(--bo-fs-200); color: var(--bo-text-muted); margin-top: 2px; }
.bo-notif-time  { font-size: var(--bo-fs-200); color: var(--bo-text-faint); margin-top: 4px; }

/* ===== Main ===== */
.bo-main {
    grid-area: main;
    padding: var(--bo-content-padding-y) var(--bo-content-padding-x) var(--bo-space-16);
    overflow-x: hidden;
    min-width: 0;
}
.bo-main-inner {
    /*max-width: var(--bo-content-max);*/
    margin: 0 auto;
}

/* ===== Page header ===== */
.bo-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bo-space-4);
    margin-bottom: var(--bo-space-5);
    flex-wrap: wrap;
}
.bo-page-header-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bo-page-header-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bo-page-title {
    font-size: var(--bo-fs-700);
    font-weight: var(--bo-fw-650);
    color: var(--bo-text-strong);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.bo-page-subtitle {
    color: var(--bo-text-muted);
    font-size: var(--bo-fs-300);
}
.bo-page-subtitle strong { color: var(--bo-text-strong); font-weight: 600; }
.bo-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bo-back {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px 2px 4px;
    color: var(--bo-text-soft);
    font-size: var(--bo-fs-300);
    border-radius: var(--bo-radius);
    cursor: pointer;
    margin-bottom: 4px;
    width: fit-content;
}
.bo-back:hover { background: var(--bo-surface-hover); color: var(--bo-text-strong); text-decoration: none; }
.bo-back .material-symbols-outlined { font-size: 18px; }

/* ===== Cards ===== */
.bo-card {
    background: var(--bo-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius-lg);
    box-shadow: var(--bo-shadow-xs);
    transition: box-shadow var(--bo-dur-base) var(--bo-ease), border-color var(--bo-dur-base) var(--bo-ease);
}
.bo-card.bo-hoverable:hover { box-shadow: var(--bo-shadow); border-color: var(--bo-border-strong); }
.bo-card + .bo-card { margin-top: var(--bo-space-4); }
.bo-card-header {
    padding: var(--bo-space-4) var(--bo-space-5);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
.bo-card-header h3 {
    margin: 0;
    font-size: var(--bo-fs-500);
    font-weight: var(--bo-fw-650);
    color: var(--bo-text-strong);
    letter-spacing: -0.005em;
}
.bo-card-header .bo-card-sub { color: var(--bo-text-muted); font-size: var(--bo-fs-300); margin-top: 2px; }
.bo-card-body { padding: 0 var(--bo-space-5) var(--bo-space-5); }
.bo-card-body.bo-pad { padding: var(--bo-space-5); }
.bo-card-divider { height: 1px; background: var(--bo-divider); margin: 0; border: 0; }
.bo-card-footer {
    padding: 12px var(--bo-space-5);
    border-top: 1px solid var(--bo-divider);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--bo-surface-sub);
    border-radius: 0 0 var(--bo-radius-lg) var(--bo-radius-lg);
}

/* ===== KPI ===== */
.bo-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--bo-space-4);
    margin-bottom: var(--bo-space-5);
}
@media (max-width: 1280px) { .bo-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .bo-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .bo-kpi-grid { grid-template-columns: 1fr; } }

.bo-kpi {
    background: var(--bo-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius-lg);
    padding: var(--bo-space-4) var(--bo-space-5);
    display: flex; flex-direction: column; gap: var(--bo-space-2);
    position: relative; overflow: hidden;
    transition: box-shadow var(--bo-dur-base) var(--bo-ease), border-color var(--bo-dur-base) var(--bo-ease), transform var(--bo-dur-base) var(--bo-ease);
}
.bo-kpi:hover { box-shadow: var(--bo-shadow); border-color: var(--bo-border-strong); transform: translateY(-1px); }
.bo-kpi-head { display: flex; align-items: center; justify-content: space-between; }
.bo-kpi-label {
    color: var(--bo-text-soft);
    font-size: var(--bo-fs-300);
    font-weight: var(--bo-fw-500);
}
.bo-kpi-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: grid; place-items: center;
    background: var(--bo-bg-app);
    color: var(--bo-ink-700);
}
.bo-kpi-icon .material-symbols-outlined { font-size: 16px; }
.bo-kpi-value {
    font-size: var(--bo-fs-800);
    font-weight: var(--bo-fw-650);
    color: var(--bo-text-strong);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.bo-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bo-kpi-delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--bo-fs-200); font-weight: 600; }
.bo-kpi-delta.up   { color: var(--bo-success-text); }
.bo-kpi-delta.down { color: var(--bo-danger-text); }
.bo-kpi-delta.flat { color: var(--bo-text-muted); }
.bo-kpi-delta .material-symbols-outlined { font-size: 14px; }
.bo-kpi-spark { width: 88px; height: 30px; flex: 0 0 88px; }
.bo-kpi-spark .bo-spark-dot { transition: r 200ms; }
.bo-kpi.tone-success .bo-kpi-icon { background: var(--bo-success-50); color: var(--bo-success-700); }
.bo-kpi.tone-warn    .bo-kpi-icon { background: var(--bo-warn-50);    color: var(--bo-warn-700);  }
.bo-kpi.tone-danger  .bo-kpi-icon { background: var(--bo-danger-50);  color: var(--bo-danger-700);}
.bo-kpi.tone-info    .bo-kpi-icon { background: var(--bo-info-50);    color: var(--bo-info-700);  }
.bo-kpi.tone-mag     .bo-kpi-icon { background: var(--bo-mag-50);     color: var(--bo-mag-700);   }

/* ===== Quick actions ===== */
.bo-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--bo-space-3);
}
.bo-action {
    display: flex; align-items: center; gap: var(--bo-space-3);
    padding: var(--bo-space-3) var(--bo-space-4);
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    background: var(--bo-surface);
    cursor: pointer;
    color: var(--bo-text-strong);
    text-decoration: none !important;
    transition: all var(--bo-dur-fast) var(--bo-ease);
}
.bo-action:hover {
    border-color: var(--bo-brand-500);
    background: var(--bo-brand-50);
    transform: translateY(-1px);
    box-shadow: var(--bo-shadow-sm);
}
.bo-action-icon {
    width: 36px; height: 36px; border-radius: var(--bo-radius);
    background: var(--bo-bg-app);
    color: var(--bo-ink-800);
    display: grid; place-items: center;
    flex: 0 0 36px;
    transition: all var(--bo-dur-fast) var(--bo-ease);
}
.bo-action:hover .bo-action-icon { background: var(--bo-brand-500); color: #fff; }
.bo-action-icon .material-symbols-outlined { font-size: 20px; }
.bo-action-meta { line-height: 1.3; min-width: 0; }
.bo-action-meta .bo-action-title { font-weight: var(--bo-fw-600); font-size: var(--bo-fs-400); color: var(--bo-text-strong); }
.bo-action-meta .bo-action-desc  { color: var(--bo-text-muted); font-size: var(--bo-fs-200); margin-top: 1px; }

/* ===== Resource list ===== */
.bo-list { list-style: none; margin: 0; padding: 0; }
.bo-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px var(--bo-space-5);
    border-top: 1px solid var(--bo-divider);
    transition: background var(--bo-dur-fast);
}
.bo-list li:hover { background: var(--bo-surface-sub); }
.bo-list li:first-child { border-top: 0; }
.bo-list .bo-list-icon {
    width: 32px; height: 32px; border-radius: var(--bo-radius);
    background: var(--bo-bg-app); color: var(--bo-ink-700);
    display: grid; place-items: center; flex: 0 0 32px;
}
.bo-list .bo-list-icon .material-symbols-outlined { font-size: 18px; }
.bo-list .bo-list-body { flex: 1 1 auto; min-width: 0; }
.bo-list .bo-list-title { font-weight: var(--bo-fw-600); color: var(--bo-text-strong); font-size: var(--bo-fs-400); }
.bo-list .bo-list-meta  { color: var(--bo-text-muted); font-size: var(--bo-fs-200); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-list .bo-list-time  { color: var(--bo-text-faint); font-size: var(--bo-fs-200); white-space: nowrap; }
.bo-list .bo-list-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ===== Badges ===== */
.bo-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--bo-radius);
    font-size: var(--bo-fs-200); font-weight: 600;
    background: var(--bo-ink-100); color: var(--bo-text-soft);
    line-height: 1.5;
}
.bo-badge.bo-badge-soft { border-radius: var(--bo-radius-full); }
.bo-badge.success { background: var(--bo-success-50); color: var(--bo-success-text); }
.bo-badge.warn    { background: var(--bo-warn-50);    color: var(--bo-warn-text);    }
.bo-badge.danger  { background: var(--bo-danger-50);  color: var(--bo-danger-text);  }
.bo-badge.info    { background: var(--bo-info-50);    color: var(--bo-info-text);    }
.bo-badge.mag     { background: var(--bo-mag-50);     color: var(--bo-mag-text);     }
.bo-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ===== Buttons ===== */
.bo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 12px;
    min-height: 32px;
    border-radius: var(--bo-radius);
    border: 1px solid var(--bo-border-strong);
    background: var(--bo-surface);
    color: var(--bo-text-strong);
    font-weight: var(--bo-fw-600);
    font-size: var(--bo-fs-300);
    cursor: pointer;
    transition: all var(--bo-dur-fast) var(--bo-ease);
    text-decoration: none !important;
    line-height: 1;
    box-shadow: var(--bo-shadow-xs);
    font-family: inherit;
    white-space: nowrap;
}
.bo-btn:hover { background: var(--bo-surface-hover); border-color: var(--bo-ink-300); }
.bo-btn:active { background: var(--bo-surface-press); }
.bo-btn:focus-visible { outline: none; box-shadow: var(--bo-ring); }
.bo-btn .material-symbols-outlined { font-size: 16px; }
.bo-btn-primary {
    background: var(--bo-ink-900); color: #fff; border-color: var(--bo-ink-900);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.4) inset, var(--bo-shadow-xs);
}
.bo-btn-primary:hover { background: var(--bo-ink-800); border-color: var(--bo-ink-800); }
.bo-btn-primary:active { background: var(--bo-ink-950); }
.bo-btn-success {
    background: var(--bo-brand-500); color: #fff; border-color: var(--bo-brand-500);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.2) inset, var(--bo-shadow-xs);
}
.bo-btn-success:hover { background: var(--bo-brand-600); border-color: var(--bo-brand-600); }
.bo-btn-danger { background: var(--bo-danger-500); color: #fff; border-color: var(--bo-danger-500); }
.bo-btn-danger:hover { background: var(--bo-danger-700); }
.bo-btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.bo-btn-ghost:hover { background: var(--bo-surface-hover); }
.bo-btn-sm { min-height: 28px; padding: 4px 10px; font-size: var(--bo-fs-200); }
.bo-btn-lg { min-height: 40px; padding: 8px 16px; font-size: var(--bo-fs-400); }
.bo-btn-icon { padding: 6px; min-height: 32px; aspect-ratio: 1; }

.bo-btn-group { display: inline-flex; }
.bo-btn-group .bo-btn { border-radius: 0; margin-left: -1px; }
.bo-btn-group .bo-btn:first-child { border-radius: var(--bo-radius) 0 0 var(--bo-radius); margin-left: 0; }
.bo-btn-group .bo-btn:last-child  { border-radius: 0 var(--bo-radius) var(--bo-radius) 0; }

/* ===== Section ===== */
.bo-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: var(--bo-space-6) 0 var(--bo-space-3);
}
.bo-section-head h2 {
    margin: 0; font-size: var(--bo-fs-500); font-weight: var(--bo-fw-650);
    color: var(--bo-text-strong); letter-spacing: -0.005em;
}
.bo-section-head .bo-link { color: var(--bo-text-link); font-weight: 500; font-size: var(--bo-fs-300); }

/* ===== Two-col layout ===== */
.bo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--bo-space-5);
    align-items: start;
}
.bo-layout-section { min-width: 0; }
.bo-layout-aside   { min-width: 0; }
@media (max-width: 1100px) { .bo-layout { grid-template-columns: 1fr; } }

/* ===== Empty state ===== */
.bo-empty { padding: 48px 24px; text-align: center; color: var(--bo-text-muted); }
.bo-empty-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--bo-bg-app); color: var(--bo-ink-700);
    display: grid; place-items: center;
    margin: 0 auto 12px;
}
.bo-empty-title { font-size: var(--bo-fs-500); font-weight: var(--bo-fw-650); color: var(--bo-text-strong); margin-bottom: 4px; }

/* ===== Skeletons ===== */
.bo-skel {
    background: linear-gradient(90deg, var(--bo-ink-75) 0%, var(--bo-ink-100) 50%, var(--bo-ink-75) 100%);
    background-size: 200% 100%;
    border-radius: var(--bo-radius-xs);
    animation: bo-shimmer 1.4s ease-in-out infinite;
    display: inline-block;
    color: transparent;
}
@keyframes bo-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.bo-skel-line { display: block; height: 12px; margin: 6px 0; border-radius: 4px; }
.bo-skel-line.lg { height: 22px; }
.bo-skel-line.xl { height: 30px; }

/* ===== Charts (custom SVG line/area) ===== */
.bo-chart {
    position: relative;
    width: 100%;
    height: 260px;
}
.bo-chart svg { width: 100%; height: 100%; display: block; }
.bo-chart-tooltip {
    position: absolute;
    background: var(--bo-ink-900);
    color: #fff;
    padding: 6px 10px;
    border-radius: var(--bo-radius);
    font-size: var(--bo-fs-200);
    font-weight: 600;
    pointer-events: none;
    transform: translate(-50%, -120%);
    white-space: nowrap;
    box-shadow: var(--bo-shadow-md);
    opacity: 0;
    transition: opacity 120ms;
}
.bo-chart-tooltip.show { opacity: 1; }
.bo-chart-tooltip-label { font-size: 10px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.bo-chart-tooltip-row { display: flex; align-items: center; gap: 6px; font-size: var(--bo-fs-200); }
.bo-chart-tooltip-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.bo-chart-tooltip-name { color: #ffffff; opacity: 0.85; }
.bo-chart-tooltip-value { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.bo-chart-legend {
    display: flex; gap: 16px; padding: 0 var(--bo-space-5) var(--bo-space-3);
    color: var(--bo-text-muted); font-size: var(--bo-fs-200);
    align-items: center;
}
.bo-chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* ===== Command palette ===== */
.bo-cmd-overlay {
    position: fixed; inset: 0;
    background: rgba(26, 28, 30, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: grid;
    place-items: start center;
    padding-top: 12vh;
    animation: bo-fade-in 140ms var(--bo-ease-out);
}
@keyframes bo-fade-in { from { opacity: 0; } to { opacity: 1; } }
.bo-cmd {
    width: min(640px, 92vw);
    background: var(--bo-surface);
    border-radius: var(--bo-radius-lg);
    box-shadow: var(--bo-shadow-xl);
    overflow: hidden;
    animation: bo-cmd-pop 180ms var(--bo-ease-out);
}
@keyframes bo-cmd-pop { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bo-cmd-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--bo-border); }
.bo-cmd-input-wrap .material-symbols-outlined { color: var(--bo-text-muted); font-size: 22px; }
.bo-cmd-input {
    flex: 1 1 auto;
    border: 0; outline: 0;
    background: transparent;
    font-size: var(--bo-fs-500);
    color: var(--bo-text-strong);
    font-family: inherit;
}
.bo-cmd-input::placeholder { color: var(--bo-text-faint); }
.bo-cmd-list { max-height: 380px; overflow-y: auto; padding: 6px; }
.bo-cmd-section { padding: 8px 10px 4px; color: var(--bo-text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.bo-cmd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--bo-radius);
    cursor: pointer;
    color: var(--bo-text-strong);
    text-decoration: none !important;
}
.bo-cmd-item:hover, .bo-cmd-item.active { background: var(--bo-brand-50); }
.bo-cmd-item.active { box-shadow: inset 2px 0 0 var(--bo-brand-500); }
.bo-cmd-item .material-symbols-outlined { font-size: 18px; color: var(--bo-ink-700); }
.bo-cmd-item .bo-cmd-label { flex: 1 1 auto; }
.bo-cmd-item mark { background: transparent; color: var(--bo-brand-700); font-weight: 700; }
.bo-cmd-item .bo-cmd-meta { color: var(--bo-text-muted); font-size: var(--bo-fs-200); margin-left: auto; }
.bo-cmd-footer {
    border-top: 1px solid var(--bo-border);
    padding: 8px 14px;
    display: flex; gap: 14px; align-items: center;
    color: var(--bo-text-muted); font-size: var(--bo-fs-200);
    background: var(--bo-surface-sub);
}

/* ===== KBD ===== */
.bo-kbd {
    background: var(--bo-ink-100);
    color: var(--bo-text-muted);
    padding: 1px 6px; border-radius: 4px;
    font-size: 10px;
    font-family: var(--bo-font-mono);
    font-weight: 600;
    border: 1px solid var(--bo-border);
    display: inline-block;
}

/* ===== Misc ===== */
.bo-blank {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 40px;
    background: var(--bo-bg-app);
}
.bo-spinner {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--bo-ink-200);
    border-top-color: var(--bo-brand-500);
    animation: bo-spin 800ms linear infinite;
}
.bo-spinner.lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes bo-spin { to { transform: rotate(360deg); } }

/* ===== Hide Radzen sidebar/header — we own chrome ===== */
.bo-app .rz-header,
.bo-app .rz-sidebar { display: none !important; }
.bo-app .rz-body { padding: 0 !important; background: transparent !important; }
.bo-app .rz-layout { display: contents !important; }

/* ===== Radzen widget Polaris re-skin ===== */
/* Buttons */
.rz-button {
    border-radius: var(--bo-radius) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    font-size: var(--bo-fs-300) !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    letter-spacing: 0 !important;
    box-shadow: var(--bo-shadow-xs) !important;
    transition: background var(--bo-dur-fast), border-color var(--bo-dur-fast) !important;
}
.rz-button.rz-button-md { min-height: 32px !important; }
.rz-button.rz-button-sm { min-height: 28px !important; padding: 4px 10px !important; }
.rz-button.rz-button-lg { min-height: 40px !important; padding: 8px 16px !important; }
.rz-button.rz-primary { background: var(--bo-ink-900) !important; color: #fff !important; border-color: var(--bo-ink-900) !important; }
.rz-button.rz-primary:hover { background: var(--bo-ink-800) !important; border-color: var(--bo-ink-800) !important; }
.rz-button.rz-secondary { background: var(--bo-surface) !important; color: var(--bo-text-strong) !important; border: 1px solid var(--bo-border-strong) !important; }
.rz-button.rz-secondary:hover { background: var(--bo-surface-hover) !important; }
.rz-button.rz-success { background: var(--bo-brand-500) !important; color: #fff !important; border-color: var(--bo-brand-500) !important; }
.rz-button.rz-success:hover { background: var(--bo-brand-600) !important; border-color: var(--bo-brand-600) !important; }
.rz-button.rz-danger { background: var(--bo-danger-500) !important; color: #fff !important; border-color: var(--bo-danger-500) !important; }
.rz-button.rz-info { background: var(--bo-info-500) !important; color: #fff !important; border-color: var(--bo-info-500) !important; }
.rz-button.rz-warning { background: var(--bo-warn-500) !important; color: #fff !important; border-color: var(--bo-warn-500) !important; }

/* Inputs */
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker, .rz-textarea,
.rz-listbox, .rz-multiselect, .rz-autocomplete {
    border-radius: var(--bo-radius) !important;
    border: 1px solid var(--bo-border) !important;
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    font-size: var(--bo-fs-300) !important;
    transition: border-color var(--bo-dur-fast), box-shadow var(--bo-dur-fast) !important;
}
.rz-textbox:focus, .rz-textbox.rz-state-focused,
.rz-dropdown.rz-state-focused, .rz-numeric.rz-state-focused,
.rz-datepicker.rz-state-focused, .rz-textarea:focus {
    border-color: var(--bo-brand-500) !important;
    box-shadow: var(--bo-ring) !important;
    outline: none !important;
}

/* DataGrid */
.rz-data-grid, .rz-grid-table {
    border-radius: var(--bo-radius-lg) !important;
    border: 1px solid var(--bo-border) !important;
    overflow: hidden !important;
    background: var(--bo-surface) !important;
}
.rz-data-grid thead th, .rz-grid-table thead th {
    background: var(--bo-surface-sub) !important;
    color: var(--bo-text-soft) !important;
    font-weight: 600 !important;
    font-size: var(--bo-fs-200) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border-bottom: 1px solid var(--bo-border) !important;
    padding: 10px 14px !important;
}
.rz-data-grid tbody td, .rz-grid-table tbody td {
    border-bottom: 1px solid var(--bo-divider) !important;
    padding: 10px 14px !important;
    color: var(--bo-text-strong) !important;
    font-size: var(--bo-fs-300) !important;
}
.rz-data-grid tbody tr:hover td { background: var(--bo-surface-sub) !important; }
.rz-paginator {
    background: var(--bo-surface-sub) !important;
    border-top: 1px solid var(--bo-divider) !important;
    border-radius: 0 0 var(--bo-radius-lg) var(--bo-radius-lg) !important;
    padding: 8px 12px !important;
}

/* Card / Panel */
.rz-card {
    border-radius: var(--bo-radius-lg) !important;
    border: 1px solid var(--bo-border) !important;
    box-shadow: var(--bo-shadow-xs) !important;
    background: var(--bo-surface) !important;
}
.rz-panel { border-radius: var(--bo-radius-lg) !important; border: 1px solid var(--bo-border) !important; }
.rz-panel-titlebar { background: var(--bo-surface) !important; border-bottom: 1px solid var(--bo-divider) !important; padding: 12px 16px !important; }

/* Dialog */
.rz-dialog {
    border-radius: var(--bo-radius-lg) !important;
    box-shadow: var(--bo-shadow-xl) !important;
    border: 1px solid var(--bo-border) !important;
}
.rz-dialog-titlebar {
    background: var(--bo-surface) !important;
    border-bottom: 1px solid var(--bo-divider) !important;
    padding: 14px 18px !important;
}
.rz-dialog-titlebar .rz-dialog-title { font-weight: 600 !important; font-size: var(--bo-fs-500) !important; color: var(--bo-text-strong) !important; }

/* Notification (Radzen toasts) */
.rz-notification {
    border-radius: var(--bo-radius-lg) !important;
    border: 1px solid var(--bo-border) !important;
    box-shadow: var(--bo-shadow-lg) !important;
    padding: 12px 16px !important;
    background: var(--bo-surface) !important;
}
.rz-notification.rz-notification-success { border-left: 3px solid var(--bo-success-500) !important; }
.rz-notification.rz-notification-info    { border-left: 3px solid var(--bo-info-500) !important; }
.rz-notification.rz-notification-warning { border-left: 3px solid var(--bo-warn-500) !important; }
.rz-notification.rz-notification-error   { border-left: 3px solid var(--bo-danger-500) !important; }

/* Tooltip */
.rz-tooltip-content {
    background: var(--bo-ink-900) !important;
    color: #fff !important;
    border-radius: var(--bo-radius) !important;
    font-size: var(--bo-fs-200) !important;
    padding: 6px 10px !important;
    box-shadow: var(--bo-shadow-md) !important;
}

/* Checkbox / Switch */
.rz-chkbox-box.rz-state-active,
.rz-switch.rz-state-active { background: var(--bo-brand-500) !important; border-color: var(--bo-brand-500) !important; }

/* Tabs */
.rz-tabview .rz-tabview-nav { background: transparent !important; border-bottom: 1px solid var(--bo-border) !important; }
.rz-tabview .rz-tabview-nav li.rz-state-active a { color: var(--bo-brand-700) !important; border-bottom: 2px solid var(--bo-brand-500) !important; }
.rz-tabview .rz-tabview-nav li a { color: var(--bo-text-soft) !important; font-weight: 500 !important; padding: 10px 16px !important; }

/* Mobile */
@media (max-width: 900px) {
    .bo-app { grid-template-columns: 0 1fr; }
    .bo-app.bo-mobile-open { grid-template-columns: var(--bo-sidebar-w) 1fr; }
    .bo-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--bo-sidebar-w); transform: translateX(-100%); transition: transform var(--bo-dur-base) var(--bo-ease); }
    .bo-app.bo-mobile-open .bo-sidebar { transform: translateX(0); box-shadow: var(--bo-shadow-lg); }
    .bo-main { padding: 12px; }
    .bo-topbar-cmd { display: none; }
    .bo-page-header { flex-direction: column; align-items: stretch; }
    .bo-page-actions { flex-wrap: wrap; }
}

/* ===== Dark theme ===== */
.bo-theme-dark {
    --bo-bg-app:        #1a1c1e;
    --bo-bg-app-2:      #202225;
    --bo-surface:       #25282c;
    --bo-surface-sub:   #2a2d31;
    --bo-surface-hover: #2f3236;
    --bo-surface-press: #34373c;
    --bo-border:        #34373c;
    --bo-border-strong: #43474e;
    --bo-divider:       #2f3236;

    --bo-text:        #e4e6e9;
    --bo-text-strong: #ffffff;
    --bo-text-soft:   #c8ccd1;
    --bo-text-muted:  #9ba0a6;
    --bo-text-faint:  #71757a;

    --bo-sidebar-bg:        #15171a;
    --bo-sidebar-border:    #25282c;
    --bo-sidebar-text:      #c8ccd1;
    --bo-sidebar-text-dim:  #71757a;
    --bo-sidebar-text-hi:   #ffffff;
    --bo-sidebar-item-hover:#22252a;
    --bo-sidebar-item-active-bg: rgba(0,128,96,0.18);
    --bo-sidebar-item-active-fg: #ffffff;
    --bo-sidebar-search-bg: #1a1c1e;

    --bo-info-50:    #16334e;  --bo-info-text: #a4cafe;
    --bo-success-50: #133d2a;  --bo-success-text: #aee9d1;
    --bo-warn-50:    #3d2c00;  --bo-warn-text: #ffea8a;
    --bo-danger-50:  #4a1410;  --bo-danger-text: #fdb8b3;
    --bo-mag-50:     #371042;  --bo-mag-text: #f4b6ff;
}
.bo-theme-dark .bo-btn-primary { background: #ffffff !important; color: var(--bo-ink-900) !important; border-color: #ffffff !important; }
.bo-theme-dark .bo-btn-primary:hover { background: #eaeaea !important; border-color: #eaeaea !important; }
.bo-theme-dark .rz-button.rz-primary { background: #ffffff !important; color: #15171a !important; border-color: #ffffff !important; }

/* ============================================================================
   ADDITIONAL BO DARK FIXES (Tailwind cards inside .bo-app, scoped widgets)
   ============================================================================ */
html.bo-theme-dark .bo-app .bg-white,
html.theme-dark .bo-app .bg-white {
    background: var(--bo-surface, #11161e) !important;
    color: var(--bo-text, #f7f8fa) !important;
    border-color: var(--bo-border, #1f2630) !important;
}
html.bo-theme-dark .bo-app .border-gray-200,
html.theme-dark .bo-app .border-gray-200 { border-color: var(--bo-border, #1f2630) !important; }
html.bo-theme-dark .bo-app .text-gray-900,
html.theme-dark .bo-app .text-gray-900 { color: var(--bo-text-strong, #f7f8fa) !important; }
html.bo-theme-dark .bo-app .text-gray-700,
html.theme-dark .bo-app .text-gray-700 { color: var(--bo-text, #f7f8fa) !important; }
html.bo-theme-dark .bo-app .text-gray-500,
html.theme-dark .bo-app .text-gray-500 { color: var(--bo-text-muted, #8b95a7) !important; }
html.bo-theme-dark .bo-app .text-gray-400,
html.theme-dark .bo-app .text-gray-400 { color: var(--bo-text-faint, #5c6675) !important; }
html.bo-theme-dark .bo-app .bg-gray-50,
html.theme-dark .bo-app .bg-gray-50,
html.bo-theme-dark .bo-app .bg-gray-100,
html.theme-dark .bo-app .bg-gray-100 { background: var(--bo-bg-app, #0d1014) !important; }

/* Tailwind accents inside BO: keep brand colors readable on dark */
html.bo-theme-dark .bo-app .text-blue-600,
html.theme-dark .bo-app .text-blue-600 { color: #60a5fa !important; }
html.bo-theme-dark .bo-app .text-amber-500,
html.theme-dark .bo-app .text-amber-500 { color: #fbbf24 !important; }
html.bo-theme-dark .bo-app .text-emerald-600,
html.theme-dark .bo-app .text-emerald-600 { color: #4ade80 !important; }

/* auto-refresh-toggle (SessionUsers scoped) */
html.bo-theme-dark .bo-app .auto-refresh-toggle,
html.theme-dark .bo-app .auto-refresh-toggle {
    background: var(--bo-surface-sub, #161b22) !important;
    color: var(--bo-text, #f7f8fa) !important;
    border: 1px solid var(--bo-border, #1f2630) !important;
}
html.bo-theme-dark .bo-app .auto-refresh-toggle *,
html.theme-dark .bo-app .auto-refresh-toggle * { color: var(--bo-text, #f7f8fa) !important; }

/* stat-value (big KPI number, SessionUsers + others) */
html.bo-theme-dark .bo-app .stat-value,
html.theme-dark .bo-app .stat-value,
html.bo-theme-dark .bo-app .stat-card .stat-content,
html.theme-dark .bo-app .stat-card .stat-content {
    color: var(--bo-text-strong, #f7f8fa) !important;
}
html.bo-theme-dark .bo-app .stat-card,
html.theme-dark .bo-app .stat-card {
    background: var(--bo-surface, #11161e) !important;
    border-color: var(--bo-border, #1f2630) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
html.bo-theme-dark .bo-app .stat-label,
html.theme-dark .bo-app .stat-label { color: var(--bo-text-muted, #8b95a7) !important; }

/* bo-chart-tooltip — already dark, but ensure swatches/labels readable */
html.bo-theme-dark .bo-chart-tooltip,
html.theme-dark .bo-chart-tooltip {
    background: rgba(11, 18, 32, 0.95) !important;
    border: 1px solid var(--bo-border, #2d3744) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}
html.bo-theme-dark .bo-chart-tooltip *,
html.theme-dark .bo-chart-tooltip * { color: #ffffff !important; }
html.bo-theme-dark .bo-chart-tooltip-label,
html.theme-dark .bo-chart-tooltip-label { color: rgba(255, 255, 255, 0.65) !important; }

/* ConfigGlobal residual: switch slider inactive bg in dark */
html.bo-theme-dark .bo-app .cg-switch-slider,
html.theme-dark .bo-app .cg-switch-slider { background: var(--bo-border-strong, #2d3744); }
html.bo-theme-dark .bo-app .cg-switch input:checked + .cg-switch-slider,
html.theme-dark .bo-app .cg-switch input:checked + .cg-switch-slider { background: var(--bo-brand-500, #008060); }

/* ====================== backoffice/polish.css ====================== */
/* Polaris polish — third tier on top of tokens + shell.
   Micro-interactions, gradients, hover effects, plus a cross-page bridge
   that re-skins legacy custom-styled pages (.session-page, .cg-*, Tailwind utility) to match. */

/* ================================================================ */
/* 1. SIDEBAR — pill-style active item with brand-filled background  */
/* ================================================================ */
.bo-nav-item {
    position: relative;
    isolation: isolate;
}
.bo-nav-item.active {
    background: linear-gradient(180deg, var(--bo-brand-600) 0%, var(--bo-brand-700) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 110, 82, 0.25), 0 1px 0 rgba(255,255,255,0.15) inset, 0 -1px 0 rgba(0,0,0,0.15) inset;
    font-weight: 650;
}
.bo-nav-item.active::before { display: none; } /* drop old left bar */
.bo-nav-item.active .material-symbols-outlined { color: #ffffff !important; }
.bo-nav-item.active .bo-nav-badge {
    background: rgba(255,255,255,0.22);
    color: #ffffff;
    border-color: transparent;
}
.bo-nav-item:not(.active):hover {
    background: rgba(0, 128, 96, 0.06);
    color: var(--bo-brand-800);
}
.bo-nav-item:not(.active):hover .material-symbols-outlined { color: var(--bo-brand-700); }

/* Sidebar gradient + thicker brand strip */
.bo-sidebar {
    background: linear-gradient(180deg, #f8f9fa 0%, var(--bo-sidebar-bg) 60%) !important;
    border-right-color: rgba(209, 213, 215, 0.6) !important;
}
.bo-sidebar::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--bo-border) 12%, var(--bo-border) 88%, transparent 100%);
    pointer-events: none;
}
.bo-sidebar-brand:hover { background: rgba(0, 128, 96, 0.05); }
.bo-sidebar-brand-logo {
    background: linear-gradient(135deg, var(--bo-brand-400) 0%, var(--bo-brand-700) 100%) !important;
    box-shadow: 0 4px 10px rgba(0, 110, 82, 0.35), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Sidebar search button — slight inner depth */
.bo-sidebar-search-btn {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 1px 0 #ffffff;
}
.bo-sidebar-search-btn:hover {
    border-color: var(--bo-brand-300) !important;
    box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.12);
}

/* ================================================================ */
/* 2. TOPBAR — elevation, blur, refined cmd pill                     */
/* ================================================================ */
.bo-topbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 1px 0 var(--bo-border), 0 1px 3px rgba(17, 20, 26, 0.02);
}
.bo-topbar-cmd-btn {
    background: linear-gradient(180deg, var(--bo-surface-sub) 0%, var(--bo-bg-app) 100%) !important;
    border: 1px solid transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 0 rgba(0,0,0,0.02);
}
.bo-topbar-cmd-btn:hover {
    background: #ffffff !important;
    border-color: var(--bo-border) !important;
    box-shadow: 0 2px 8px rgba(0, 128, 96, 0.06);
}

.bo-topbar-user {
    transition: all var(--bo-dur-fast) var(--bo-ease);
}
.bo-topbar-user:hover {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-surface-hover) 100%) !important;
    box-shadow: 0 2px 8px rgba(17, 20, 26, 0.06);
}
.bo-avatar {
    background: linear-gradient(135deg, var(--bo-brand-400) 0%, var(--bo-brand-700) 100%) !important;
    box-shadow: 0 2px 4px rgba(0, 110, 82, 0.3), inset 0 -1px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ================================================================ */
/* 3. CARDS — refined hover, subtle inner highlight                  */
/* ================================================================ */
.bo-card {
    background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(17, 20, 26, 0.04);
    transition: box-shadow 280ms var(--bo-ease), border-color 280ms var(--bo-ease), transform 280ms var(--bo-ease);
}
.bo-card:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 4px 12px rgba(17, 20, 26, 0.08),
        0 2px 4px rgba(17, 20, 26, 0.04);
}
.bo-card-header h3 {
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ================================================================ */
/* 4. KPI CARDS — ambient gradient, smoother hover, count style      */
/* ================================================================ */
.bo-kpi {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%);
    transition: all 320ms var(--bo-ease);
    position: relative;
    overflow: hidden;
}
.bo-kpi::before {
    content: "";
    position: absolute;
    top: -40%; right: -20%;
    width: 220px; height: 220px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 320ms var(--bo-ease);
    pointer-events: none;
    z-index: 0;
}
.bo-kpi.tone-info::before    { background: radial-gradient(circle, var(--bo-info-500), transparent 60%); }
.bo-kpi.tone-success::before { background: radial-gradient(circle, var(--bo-success-500), transparent 60%); }
.bo-kpi.tone-warn::before    { background: radial-gradient(circle, var(--bo-warn-500), transparent 60%); }
.bo-kpi.tone-danger::before  { background: radial-gradient(circle, var(--bo-danger-500), transparent 60%); }
.bo-kpi.tone-mag::before     { background: radial-gradient(circle, var(--bo-mag-500), transparent 60%); }
.bo-kpi:hover::before { opacity: 0.06; }
.bo-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(17, 20, 26, 0.08), 0 2px 6px rgba(17, 20, 26, 0.04);
    border-color: var(--bo-border-strong);
}
.bo-kpi > * { position: relative; z-index: 1; }
.bo-kpi-value {
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bo-kpi-icon {
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.6);
}

/* ================================================================ */
/* 5. BUTTONS — gradient + better shadow                             */
/* ================================================================ */
.bo-btn {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.04),
        0 1px 0 rgba(0,0,0,0.04);
}
.bo-btn:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f1f2f3 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 1px 2px rgba(17, 20, 26, 0.08),
        0 2px 6px rgba(17, 20, 26, 0.04);
}
.bo-btn-primary {
    background: linear-gradient(180deg, var(--bo-ink-800) 0%, var(--bo-ink-900) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 2px 4px rgba(17, 20, 26, 0.15);
}
.bo-btn-primary:hover {
    background: linear-gradient(180deg, var(--bo-ink-700) 0%, var(--bo-ink-800) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 4px 12px rgba(17, 20, 26, 0.2),
        0 2px 4px rgba(17, 20, 26, 0.12);
    transform: translateY(-1px);
}
.bo-btn-success {
    background: linear-gradient(180deg, var(--bo-brand-500) 0%, var(--bo-brand-600) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 2px 4px rgba(0, 110, 82, 0.25);
}
.bo-btn-success:hover {
    background: linear-gradient(180deg, var(--bo-brand-600) 0%, var(--bo-brand-700) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 4px 12px rgba(0, 128, 96, 0.3),
        0 2px 4px rgba(0, 110, 82, 0.2);
    transform: translateY(-1px);
}
.bo-btn-danger {
    background: linear-gradient(180deg, #e85d4a 0%, var(--bo-danger-500) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 2px 4px rgba(215, 44, 13, 0.25);
}
.bo-btn-danger:hover {
    background: linear-gradient(180deg, var(--bo-danger-500) 0%, var(--bo-danger-700) 100%);
    transform: translateY(-1px);
}

/* ================================================================ */
/* 6. PAGE HEADER — ambient backdrop                                 */
/* ================================================================ */
.bo-page-header {
    position: relative;
}
.bo-page-title {
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

/* ================================================================ */
/* 7. QUICK ACTION TILES — better hover w/ brand glow                */
/* ================================================================ */
.bo-action {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%);
    transition: all 240ms var(--bo-ease);
}
.bo-action:hover {
    border-color: var(--bo-brand-400) !important;
    background: linear-gradient(180deg, var(--bo-brand-50) 0%, #ffffff 100%);
    box-shadow:
        0 0 0 1px rgba(0, 128, 96, 0.08),
        0 6px 16px rgba(0, 128, 96, 0.1),
        0 2px 4px rgba(0, 128, 96, 0.06);
}
.bo-action-icon {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-surface-sub) 100%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
    transition: all 240ms var(--bo-ease);
}
.bo-action:hover .bo-action-icon {
    background: linear-gradient(180deg, var(--bo-brand-500) 0%, var(--bo-brand-700) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 128, 96, 0.35), inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* ================================================================ */
/* 8. BADGES — subtle gradient                                       */
/* ================================================================ */
.bo-badge {
    background: linear-gradient(180deg, var(--bo-ink-75) 0%, var(--bo-ink-100) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.bo-badge.success { background: linear-gradient(180deg, #d5f3e3 0%, var(--bo-success-50) 100%); }
.bo-badge.info    { background: linear-gradient(180deg, #d8ecff 0%, var(--bo-info-50)    100%); }
.bo-badge.warn    { background: linear-gradient(180deg, #fff7d0 0%, var(--bo-warn-50)    100%); }
.bo-badge.danger  { background: linear-gradient(180deg, #fed5d3 0%, var(--bo-danger-50)  100%); }
.bo-badge.mag     { background: linear-gradient(180deg, #f7d4ff 0%, var(--bo-mag-50)     100%); }

/* ================================================================ */
/* 9. RESOURCE LIST — refined hover + left accent                    */
/* ================================================================ */
.bo-list li {
    position: relative;
    transition: background var(--bo-dur-fast) var(--bo-ease);
}
.bo-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 0;
    background: var(--bo-brand-500);
    transition: width 240ms var(--bo-ease);
    border-radius: 0 2px 2px 0;
}
.bo-list li:hover::before { width: 3px; }
.bo-list .bo-list-icon {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-surface-sub) 100%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}

/* ================================================================ */
/* 10. INPUTS — refined focus glow                                   */
/* ================================================================ */
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker, .rz-textarea,
.bo-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    transition: border-color var(--bo-dur-fast), box-shadow var(--bo-dur-fast), background var(--bo-dur-fast) !important;
}
.rz-textbox:focus, .rz-dropdown.rz-state-focused, .rz-numeric.rz-state-focused,
.rz-datepicker.rz-state-focused, .rz-textarea:focus,
.bo-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {
    border-color: var(--bo-brand-500) !important;
    box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.18) !important;
    background: #ffffff !important;
}

/* ================================================================ */
/* 11. COMMAND PALETTE — sleeker shadow                              */
/* ================================================================ */
.bo-cmd {
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 32px 64px rgba(17, 20, 26, 0.22),
        0 16px 32px rgba(17, 20, 26, 0.12);
}
.bo-cmd-item.active {
    background: linear-gradient(180deg, var(--bo-brand-50) 0%, #d8eee5 100%) !important;
    box-shadow: inset 3px 0 0 var(--bo-brand-500) !important;
}

/* ================================================================ */
/* 12. SPARKLINE last-point dot — pulse ring                         */
/* ================================================================ */
@keyframes bo-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0;   }
}

/* ================================================================ */
/* 13. SESSIONUSERS BRIDGE — re-skin .session-page to Polaris       */
/* ================================================================ */
.session-page { padding: 0 !important; }
.session-page .page-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: var(--bo-space-5) !important;
}
.session-page .page-title {
    font-size: var(--bo-fs-700) !important;
    font-weight: var(--bo-fw-650) !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    margin: 0 !important;
}
.session-page .page-subtitle {
    color: var(--bo-text-muted) !important;
    font-size: var(--bo-fs-300) !important;
    margin-top: 4px !important;
}
.session-page .page-header-icon {
    color: var(--bo-brand-600) !important;
    font-size: 32px !important;
    margin-right: 14px !important;
}
.session-page .stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%) !important;
    border: 1px solid var(--bo-border) !important;
    border-radius: var(--bo-radius-lg) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 1px 3px rgba(17, 20, 26, 0.04) !important;
    transition: all 280ms var(--bo-ease) !important;
}
.session-page .stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(17, 20, 26, 0.08), 0 2px 6px rgba(17, 20, 26, 0.04) !important;
    border-color: var(--bo-border-strong) !important;
}
.session-page .stat-icon-wrap {
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.session-page .stat-total .stat-icon-wrap   { background: linear-gradient(135deg, #5fa9ff 0%, var(--bo-info-700) 100%) !important; }
.session-page .stat-online .stat-icon-wrap  { background: linear-gradient(135deg, var(--bo-brand-400) 0%, var(--bo-brand-700) 100%) !important; }
.session-page .stat-inactive .stat-icon-wrap{ background: linear-gradient(135deg, #ffc857 0%, var(--bo-warn-700) 100%) !important; }
.session-page .stat-expired .stat-icon-wrap { background: linear-gradient(135deg, #ff7a6e 0%, var(--bo-danger-700) 100%) !important; }
.session-page .stat-auth .stat-icon-wrap    { background: linear-gradient(135deg, var(--bo-info-500) 0%, var(--bo-info-700) 100%) !important; }
.session-page .stat-anon .stat-icon-wrap    { background: linear-gradient(135deg, #cf9aff 0%, var(--bo-mag-700) 100%) !important; }
.session-page .stat-value {
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: var(--bo-fw-650) !important;
    letter-spacing: -0.02em !important;
}
.session-page .stat-label { color: var(--bo-text-muted) !important; font-weight: 500 !important; }
.session-page .summary-card,
.session-page .grid-container,
.session-page .filters-bar {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%) !important;
    border: 1px solid var(--bo-border) !important;
    border-radius: var(--bo-radius-lg) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 1px 3px rgba(17, 20, 26, 0.04) !important;
}
.session-page .summary-card h4 { color: var(--bo-text-muted) !important; }
.session-page .summary-value {
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
.session-page .origin-badge {
    background: linear-gradient(180deg, var(--bo-ink-75) 0%, var(--bo-ink-100) 100%) !important;
    color: var(--bo-text-soft) !important;
    border: 1px solid var(--bo-border) !important;
    border-radius: var(--bo-radius) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.session-page .status-badge {
    border-radius: var(--bo-radius-full) !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1) !important;
}
.session-page .id-badge {
    background: var(--bo-surface-sub) !important;
    color: var(--bo-text-soft) !important;
    border-radius: var(--bo-radius) !important;
    padding: 2px 8px !important;
    font-family: var(--bo-font-mono) !important;
    font-size: var(--bo-fs-200) !important;
}

/* ================================================================ */
/* 13b. CONFIGGLOBAL Polaris layout — vertical nav left, sections right */
/* ================================================================ */
@media (min-width: 1024px) {
    .bo-app .cg-page {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--bo-space-5, 20px);
        align-items: start;
    }
    .bo-app .cg-page .cg-header { grid-column: 1 / -1; }
    .bo-app .cg-page .cg-tabs {
        position: sticky;
        top: calc(var(--bo-topbar-h, 56px) + 8px);
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
        padding: 6px !important;
        border-radius: var(--bo-radius-lg, 12px) !important;
    }
    .bo-app .cg-page .cg-tab {
        text-align: left;
        padding: 8px 12px !important;
        border-radius: var(--bo-radius, 8px) !important;
        display: flex; align-items: center; gap: 8px;
        font-size: var(--bo-fs-300, 13px) !important;
    }
    .bo-app .cg-page .cg-tab.is-active {
        background: linear-gradient(180deg, var(--bo-brand-600, #006e52) 0%, var(--bo-brand-700, #005943) 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 110, 82, 0.25), 0 1px 0 rgba(255,255,255,0.12) inset !important;
    }
}
@media (max-width: 1023px) {
    .bo-app .cg-page .cg-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: thin;
    }
    .bo-app .cg-page .cg-tab { white-space: nowrap; flex-shrink: 0; }
}

/* ================================================================ */
/* 14. CONFIGGLOBAL BRIDGE — re-skin .cg-* to Polaris               */
/* ================================================================ */
.cg-page { padding: 0 !important; }
.cg-page .cg-title {
    font-size: var(--bo-fs-700) !important;
    font-weight: var(--bo-fw-650) !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    margin: 0 !important;
}
.cg-page .cg-subtitle { color: var(--bo-text-muted) !important; font-size: var(--bo-fs-300) !important; margin-top: 4px !important; }
.cg-page .cg-card, .cg-page .cg-section, .cg-page .cg-tabs {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%) !important;
    border: 1px solid var(--bo-border) !important;
    border-radius: var(--bo-radius-lg) !important;
    box-shadow: 0 1px 3px rgba(17, 20, 26, 0.04), 0 1px 0 rgba(255,255,255,0.7) inset !important;
}
.cg-page .cg-tab {
    border-radius: var(--bo-radius) !important;
    font-weight: 600 !important;
    color: var(--bo-text-soft) !important;
    transition: all var(--bo-dur-fast) var(--bo-ease);
}
.cg-page .cg-tab:hover { background: var(--bo-surface-hover) !important; color: var(--bo-text-strong) !important; }
.cg-page .cg-tab.is-active {
    background: linear-gradient(180deg, var(--bo-brand-600) 0%, var(--bo-brand-700) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 110, 82, 0.22), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.cg-page .cg-btn {
    border-radius: var(--bo-radius) !important;
    font-weight: 600 !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%) !important;
    border: 1px solid var(--bo-border-strong) !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 rgba(0,0,0,0.04) !important;
}
.cg-page .cg-btn:hover { background: linear-gradient(180deg, #ffffff 0%, #f1f2f3 100%) !important; transform: translateY(-1px); }
.cg-page .cg-btn-primary {
    background: linear-gradient(180deg, var(--bo-ink-800) 0%, var(--bo-ink-900) 100%) !important;
    color: #ffffff !important; border-color: var(--bo-ink-900) !important;
}
.cg-page .cg-search {
    border-radius: var(--bo-radius) !important;
    border: 1px solid var(--bo-border) !important;
}
.cg-page .cg-search:focus {
    border-color: var(--bo-brand-500) !important;
    box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.18) !important;
}
.cg-page .cg-badge {
    border-radius: var(--bo-radius) !important;
    background: linear-gradient(180deg, var(--bo-ink-75) 0%, var(--bo-ink-100) 100%) !important;
    color: var(--bo-text-soft) !important;
}

/* ================================================================ */
/* 15. GESTIONRECHERCHE BRIDGE — re-skin Tailwind utilities          */
/* ================================================================ */
.bo-app .max-w-screen-2xl > .flex.items-center.justify-between.mb-6 h1 {
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.bo-app .max-w-screen-2xl .bg-white.border.border-gray-200.rounded-xl {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfb 100%) !important;
    border-color: var(--bo-border) !important;
    box-shadow: 0 1px 3px rgba(17, 20, 26, 0.04), 0 1px 0 rgba(255,255,255,0.7) inset !important;
    transition: all 240ms var(--bo-ease);
}
.bo-app .max-w-screen-2xl .bg-white.border.border-gray-200.rounded-xl:hover {
    border-color: var(--bo-border-strong) !important;
    box-shadow: 0 4px 12px rgba(17, 20, 26, 0.06), 0 1px 0 rgba(255,255,255,0.7) inset !important;
}
.bo-app .max-w-screen-2xl .bg-gray-800 {
    background: linear-gradient(180deg, var(--bo-ink-800) 0%, var(--bo-ink-900) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(17, 20, 26, 0.15) !important;
}
.bo-app .max-w-screen-2xl .bg-gray-800:hover {
    background: linear-gradient(180deg, var(--bo-ink-700) 0%, var(--bo-ink-800) 100%) !important;
    box-shadow: 0 4px 12px rgba(17, 20, 26, 0.2) !important;
}
.bo-app .max-w-screen-2xl .bg-green-600 {
    background: linear-gradient(180deg, var(--bo-brand-500) 0%, var(--bo-brand-600) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0, 110, 82, 0.25) !important;
}
.bo-app .max-w-screen-2xl .bg-green-600:hover {
    background: linear-gradient(180deg, var(--bo-brand-600) 0%, var(--bo-brand-700) 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 128, 96, 0.3) !important;
}
.bo-app .max-w-screen-2xl .text-3xl.font-bold.text-gray-900 {
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
.bo-app .max-w-screen-2xl input[type="text"]:focus,
.bo-app .max-w-screen-2xl input[type="search"]:focus,
.bo-app .max-w-screen-2xl select:focus {
    border-color: var(--bo-brand-500) !important;
    box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.18) !important;
    outline: none !important;
}

/* ================================================================ */
/* 16. RADZEN DATAGRID — refined Polaris look                       */
/* ================================================================ */
.bo-app .rz-data-grid thead th,
.bo-app .rz-grid-table thead th {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-surface-sub) 100%) !important;
    box-shadow: inset 0 -1px 0 var(--bo-border) !important;
}
.bo-app .rz-data-grid tbody tr,
.bo-app .rz-grid-table tbody tr {
    transition: background var(--bo-dur-fast);
}
.bo-app .rz-data-grid tbody tr:hover td,
.bo-app .rz-grid-table tbody tr:hover td {
    background: linear-gradient(180deg, var(--bo-brand-50) 0%, transparent 100%) !important;
}

/* ================================================================ */
/* 17. SCROLLBARS — Polaris-thin                                     */
/* ================================================================ */
.bo-app *::-webkit-scrollbar { width: 8px; height: 8px; }
.bo-app *::-webkit-scrollbar-track { background: transparent; }
.bo-app *::-webkit-scrollbar-thumb { background: var(--bo-ink-200); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
.bo-app *::-webkit-scrollbar-thumb:hover { background: var(--bo-ink-300); background-clip: content-box; }

/* ================================================================ */
/* 18. EMPTY STATE — softer                                         */
/* ================================================================ */
.bo-empty-icon {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-bg-app) 100%);
    border: 1px solid var(--bo-border);
    box-shadow: 0 1px 3px rgba(17, 20, 26, 0.04);
}
.bo-empty-title {
    background: linear-gradient(180deg, var(--bo-ink-900) 0%, var(--bo-ink-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.005em;
}

/* ================================================================ */
/* 19. PROGRESS BAR — gradient                                       */
/* ================================================================ */
.bo-progress-bar {
    background: linear-gradient(90deg, transparent, var(--bo-brand-400), var(--bo-brand-600), var(--bo-brand-400), transparent) !important;
}

/* ================================================================ */
/* 20. POPOVERS — sleeker                                            */
/* ================================================================ */
.bo-popover {
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 24px 48px rgba(17, 20, 26, 0.16),
        0 8px 16px rgba(17, 20, 26, 0.08);
}
.bo-popover-item {
    transition: all var(--bo-dur-fast) var(--bo-ease);
}
.bo-popover-item:hover {
    background: linear-gradient(180deg, var(--bo-brand-50) 0%, var(--bo-surface) 100%) !important;
    transform: translateX(2px);
}
.bo-popover-item.danger:hover {
    background: linear-gradient(180deg, var(--bo-danger-50) 0%, var(--bo-surface) 100%) !important;
}

/* ================================================================ */
/* 18b. CART / ORDER LINES — Polymarket market-card pattern          */
/* ================================================================ */
.panier-item, .commande-line,
.cart-line, .cart-line-row,
.order-line, .order-line-row {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: var(--bo-space-3, 12px);
    align-items: center;
    padding: var(--bo-space-3, 12px) var(--bo-space-4, 16px) !important;
    border-radius: var(--r-md, 8px);
    border: 1px solid var(--c-border, var(--bo-border, #e1e3e5));
    background: var(--c-bg-elevated, var(--bo-surface, #ffffff));
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: var(--bo-space-2, 8px);
    position: relative;
}
.panier-item:hover, .commande-line:hover,
.cart-line:hover, .order-line:hover {
    transform: translateY(-1px);
    border-color: var(--c-border-strong, var(--bo-border-strong, #babfc3));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--c-accent, #008060) 12%, transparent),
        0 8px 16px rgba(11, 18, 32, 0.06),
        0 2px 4px rgba(11, 18, 32, 0.04);
}
.panier-item img, .commande-line img,
.cart-line img, .order-line img {
    width: 64px; height: 64px;
    object-fit: contain;
    border-radius: var(--r-sm, 6px);
    background: var(--c-bg-subtle, var(--bo-surface-sub, #f6f6f7));
}
/* Total-stripe pattern */
.panier-total-row, .order-total-row, .cart-total-row {
    border-top: 1.5px solid var(--c-fg, #0b1220);
    padding: var(--bo-space-3, 12px) var(--bo-space-4, 16px) !important;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--bo-fs-lg, 18px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: var(--bo-space-3, 12px);
}
.panier-total-row .total-label,
.order-total-row .total-label,
.cart-total-row .total-label { color: var(--bo-text-soft, #5c5f62); font-weight: 600; font-size: var(--bo-fs-400, 14px); }
.panier-total-row .total-value,
.order-total-row .total-value,
.cart-total-row .total-value { color: var(--bo-text-strong, #0b1220); font-size: var(--bo-fs-xl, 22px); letter-spacing: -0.02em; }

/* Confirmation hero — animated check */
.confirmation-hero {
    text-align: center;
    padding: 48px 24px;
    background: var(--g-mesh, none);
    border-radius: var(--bo-radius-2xl, 20px);
    border: 1px solid var(--c-border, var(--bo-border, #e1e3e5));
    margin-bottom: var(--bo-space-6, 24px);
    position: relative;
    overflow: hidden;
}
.confirmation-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--c-success, #16a34a) 14%, transparent), transparent 60%);
    pointer-events: none;
}
.confirmation-hero > * { position: relative; z-index: 1; }
.confirmation-hero .check-anim {
    width: 96px; height: 96px;
    margin: 0 auto var(--bo-space-3, 12px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-success, #16a34a), var(--c-success-fg, #15803d));
    display: grid; place-items: center;
    color: #ffffff;
    box-shadow:
        0 16px 32px rgba(22, 163, 74, 0.4),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        inset 0 2px 0 rgba(255,255,255,0.2);
    animation: bo-checkpop 720ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.confirmation-hero .check-anim .material-symbols-outlined {
    font-size: 56px;
    font-variation-settings: 'FILL' 1, 'wght' 700;
    animation: bo-checkdraw 480ms 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bo-checkpop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes bo-checkdraw {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}
.confirmation-hero h1 {
    font-size: var(--bo-fs-3xl, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 var(--bo-space-2, 8px);
    background: linear-gradient(180deg, var(--bo-ink-900, #1a1c1e) 0%, var(--bo-ink-700, #3f4347) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.confirmation-hero .order-id {
    font-family: var(--bo-font-mono, monospace);
    font-size: var(--bo-fs-lg, 18px);
    color: var(--bo-text-soft, #5c5f62);
    background: var(--c-bg-subtle, var(--bo-surface-sub, #f6f6f7));
    padding: 4px 10px; border-radius: var(--bo-radius-sm, 6px);
    display: inline-block;
}

/* Sticky cart summary panel */
.cart-summary-sticky, .panier-summary-sticky {
    position: sticky;
    top: calc(var(--bo-topbar-h, 56px) + var(--bo-space-4, 16px));
    align-self: start;
}

/* ================================================================ */
/* 19a. STATUS SUB-BAR — below topbar                                */
/* ================================================================ */
.bo-statusbar {
    position: sticky;
    top: 0;
    z-index: 19;
    height: 30px;
    background: linear-gradient(180deg, var(--bo-surface, #ffffff) 0%, var(--bo-surface-sub, #f6f6f7) 100%);
    border-bottom: 1px solid var(--bo-border, #d2d5d8);
    font-size: var(--bo-fs-200, 12px);
    color: var(--bo-text-soft, #5c5f62);
    margin: calc(-1 * var(--bo-content-padding-y, 20px)) calc(-1 * var(--bo-content-padding-x, 24px)) var(--bo-space-4, 16px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.bo-statusbar-inner {
    max-width: var(--bo-content-max, 1136px);
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--bo-content-padding-x, 24px);
    display: flex;
    align-items: center;
    gap: 10px;
}
.bo-statusbar-chip {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}
.bo-statusbar-chip .material-symbols-outlined { font-size: 14px; color: var(--bo-text-muted, #6d7175); }
.bo-statusbar-chip strong { color: var(--bo-text-strong, #303030); font-weight: 600; }
.bo-statusbar-sep {
    width: 1px; height: 14px;
    background: var(--bo-border, #d2d5d8);
}
.bo-statusbar-spacer { flex: 1; }

html.theme-dark .bo-statusbar,
html.bo-theme-dark .bo-statusbar {
    background: linear-gradient(180deg, var(--bo-surface, #1a1f29) 0%, var(--bo-bg-app-2, #131720) 100%);
    border-bottom-color: var(--bo-border, #2e3543);
}
html.theme-dark .bo-statusbar-chip strong,
html.bo-theme-dark .bo-statusbar-chip strong { color: var(--bo-text-strong, #ffffff); }

/* Mobile: hide non-essential chips */
@media (max-width: 700px) {
    .bo-statusbar { height: 28px; }
    .bo-statusbar-inner { gap: 6px; padding: 0 12px; }
    .bo-statusbar-chip:nth-of-type(n+3),
    .bo-statusbar-sep:nth-of-type(n+2) { display: none; }
}

/* ================================================================ */
/* 19b. EMPTY STATE ILLUSTRATIONS                                    */
/* ================================================================ */
.bo-empty-illus { padding: 56px 24px; text-align: center; }
.bo-empty-illus-svg {
    width: 160px; height: 140px;
    margin: 0 auto var(--bo-space-3, 12px);
    color: var(--bo-brand-300, #5cb986);
    opacity: 0.92;
    transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), color 280ms ease;
}
.bo-empty-illus-svg svg { width: 100%; height: 100%; }
.bo-empty-illus:hover .bo-empty-illus-svg {
    transform: translateY(-2px);
    color: var(--bo-brand-500, #008060);
}
.bo-empty-illus .bo-empty-sub {
    color: var(--bo-text-muted, #6d7175);
    font-size: var(--bo-fs-300, 13px);
    max-width: 420px;
    margin: 4px auto 0;
}
html.theme-dark .bo-empty-illus-svg,
html.bo-theme-dark .bo-empty-illus-svg { color: var(--bo-brand-300, #2e7d52); }
html.theme-dark .bo-empty-illus:hover .bo-empty-illus-svg,
html.bo-theme-dark .bo-empty-illus:hover .bo-empty-illus-svg { color: var(--bo-brand-400, #41a36b); }

/* ================================================================ */
/* 19c. STORE SWITCHER popover                                       */
/* ================================================================ */
.bo-store-popover { font-size: var(--bo-fs-300, 13px); }
.bo-store-avatar {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--bo-info-500, #5fa9ff), var(--bo-info-700, #00417e));
    color: #ffffff;
    font-weight: 700; font-size: 10px;
    display: grid; place-items: center;
    flex: 0 0 24px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}
.bo-popover-item.active { background: linear-gradient(180deg, var(--bo-brand-50, #e8f4ee) 0%, var(--bo-surface, #ffffff) 100%); }
.bo-popover-item.active .bo-store-avatar {
    background: linear-gradient(135deg, var(--bo-brand-400, #2e9e64), var(--bo-brand-700, #005943));
}

/* ================================================================ */
/* 20a. POLYMARKET CARD HOVER — product/market cards                 */
/* ================================================================ */
.product-card, .card-product,
.cardProduct, .cardMarketplace,
.listcard-default, .listcard-modele1, .listcard-modele2,
.listcard-modele3, .listcard-modele4,
.carousel-card-model1, .body-mp-card {
    transition:
        transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-border, var(--bo-border, #e1e3e5));
    background: var(--c-bg-elevated, var(--bo-surface, #ffffff));
    border-radius: var(--r-lg, 12px);
}
.product-card::before, .card-product::before,
.cardProduct::before, .listcard-default::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}
.product-card:hover, .card-product:hover,
.cardProduct:hover, .cardMarketplace:hover,
.listcard-default:hover, .listcard-modele1:hover, .listcard-modele2:hover,
.listcard-modele3:hover, .listcard-modele4:hover,
.carousel-card-model1:hover, .body-mp-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-accent, var(--bo-brand-500, #008060)) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--c-accent, #008060) 18%, transparent),
        0 12px 24px rgba(11, 18, 32, 0.10),
        0 4px 8px rgba(11, 18, 32, 0.06) !important;
}
.product-card:hover::before, .card-product:hover::before {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent, #008060) 20%, transparent);
}
/* Image zoom on hover — only if there's an .img wrapper */
.product-card .product-image img,
.product-card .card-product__media img,
.card-product .card-product__media img,
.product-card img,
.listcard-default img {
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.product-card:hover .product-image img,
.product-card:hover .card-product__media img,
.card-product:hover .card-product__media img,
.product-card:hover > img,
.listcard-default:hover img {
    transform: scale(1.04);
}
/* Badge slide-in on hover (Polymarket pattern) */
.product-card .card-badge,
.card-product .card-badge,
.product-card .badge-corner,
.listcard-default .badge-corner {
    position: absolute;
    top: 8px; left: 8px;
    transform: translateX(-110%);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}
.product-card:hover .card-badge,
.card-product:hover .card-badge,
.product-card:hover .badge-corner,
.listcard-default:hover .badge-corner {
    transform: translateX(0);
}

/* Dark mode variant */
html.theme-dark .product-card, html.theme-dark .card-product,
html.theme-dark .listcard-default, html.theme-dark .listcard-modele1,
html.theme-dark .listcard-modele2, html.theme-dark .listcard-modele3,
html.theme-dark .listcard-modele4, html.theme-dark .carousel-card-model1,
html.theme-dark .body-mp-card,
html.bo-theme-dark .product-card, html.bo-theme-dark .card-product {
    border-color: var(--c-border, var(--bo-border, #2e3543)) !important;
}
html.theme-dark .product-card:hover, html.theme-dark .card-product:hover,
html.bo-theme-dark .product-card:hover {
    box-shadow:
        0 0 0 1px rgba(46, 184, 114, 0.32),
        0 12px 24px rgba(0, 0, 0, 0.55),
        0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* ================================================================ */
/* 20b. BoCount — animated numbers + flash + pulse                   */
/* ================================================================ */
.bo-count { display: inline-block; transition: color 280ms var(--bo-ease, ease); }
.bo-count.bo-count-up   { color: var(--bo-success-700, #1f8a55) !important; }
.bo-count.bo-count-down { color: var(--bo-danger-700, #c93b30) !important; }
.bo-count-pulse {
    position: relative;
}
.bo-count-pulse::after {
    content: "";
    position: absolute;
    top: 50%; left: -8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--bo-success-500, #16a34a);
    transform: translateY(-50%);
    box-shadow: 0 0 0 0 currentColor;
    animation: bo-live-pulse 1.6s cubic-bezier(0.4,0,0.2,1) infinite;
    color: var(--bo-success-500, #16a34a);
}
@keyframes bo-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* Live dot helper — reusable */
.bo-live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bo-success-500, #16a34a);
    margin-right: 6px;
    vertical-align: 0;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
    animation: bo-live-pulse 1.6s cubic-bezier(0.4,0,0.2,1) infinite;
}
.bo-live-dot.warn   { background: var(--bo-warn-500, #f5a623);   animation-name: bo-live-pulse-w; }
.bo-live-dot.danger { background: var(--bo-danger-500, #ef5b4f); animation-name: bo-live-pulse-d; }
@keyframes bo-live-pulse-w {
    0% { box-shadow: 0 0 0 0 rgba(245,166,35,0.55); }
    70% { box-shadow: 0 0 0 10px rgba(245,166,35,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
@keyframes bo-live-pulse-d {
    0% { box-shadow: 0 0 0 0 rgba(239,91,79,0.55); }
    70% { box-shadow: 0 0 0 10px rgba(239,91,79,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,91,79,0); }
}

/* ================================================================ */
/* 21. SAVEBAR — refined                                             */
/* ================================================================ */
.bo-savebar {
    background: linear-gradient(180deg, var(--bo-ink-800) 0%, var(--bo-ink-900) 100%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 16px 40px rgba(17, 20, 26, 0.22),
        0 4px 12px rgba(17, 20, 26, 0.16);
    animation: bo-savebar-rise var(--bo-dur-base, 200ms) var(--bo-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
@keyframes bo-savebar-rise {
    from { transform: translateY(140%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.bo-savebar-pulse {
    animation: bo-savebar-rise var(--bo-dur-base, 200ms) var(--bo-ease, cubic-bezier(0.4, 0, 0.2, 1)),
               bo-savebar-attn 900ms var(--bo-ease-out, cubic-bezier(0, 0, 0.2, 1));
}
@keyframes bo-savebar-attn {
    0%   { box-shadow: 0 0 0 0    rgba(245, 166, 35, 0.55), var(--bo-shadow-xl); }
    100% { box-shadow: 0 0 0 14px rgba(245, 166, 35, 0),    var(--bo-shadow-xl); }
}
.bo-savebar-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bo-warn-500, #f5a623);
    flex: 0 0 8px;
    margin-right: 4px;
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.6);
    animation: bo-savebar-blink 1.4s ease-in-out infinite;
}
@keyframes bo-savebar-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.bo-savebar-detail {
    color: rgba(255,255,255,0.65);
    font-size: var(--bo-fs-200, 12px);
    margin-left: 4px;
}
.bo-savebar-actions {
    display: flex;
    gap: 8px;
    margin-left: 8px;
}
.bo-savebar-btn {
    min-height: 30px;
    padding: 4px 12px;
    font-size: var(--bo-fs-200, 12px);
    font-weight: 600;
}
.bo-savebar-btn-ghost {
    background: transparent !important;
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: none !important;
}
.bo-savebar-btn-ghost:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.28) !important;
}
.bo-savebar-btn-save {
    background: linear-gradient(180deg, var(--bo-brand-400, #41a36b) 0%, var(--bo-brand-600, #26a065) 100%) !important;
    color: #ffffff !important;
    border-color: var(--bo-brand-700, #1f8a55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 2px 6px rgba(0,128,96,0.4) !important;
}
.bo-savebar-btn-save:hover {
    background: linear-gradient(180deg, var(--bo-brand-500, #2eb872) 0%, var(--bo-brand-700, #1f8a55) 100%) !important;
    transform: translateY(-1px);
}
.bo-savebar-btn-save:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ====================== backoffice/polish-v2.css ====================== */
/* ============================================================================
   Polish v2 — final layer.
   Sections:
     22. Hover grammar (interactive elements)
     23. Glass / blur for overlays
     24. Toast system polish
     25. Hero gradient surfaces
     26. Sidebar collapsed flyout menu
     27. Icon fill/wght animation
     28. Mobile bottom nav + drawer polish
     29. A11y focus rings (uniform)
     30. Page transitions (CSS-only fallback)
     31. Route accent strip
     32. Page breadcrumb + section header
     33. Tooltip system (Polaris)
     34. Misc data-table polish
   ============================================================================ */

/* ================================================================ */
/* 22. HOVER GRAMMAR — every interactive element gets a deliberate hover */
/* ================================================================ */
.bo-app button, .bo-app a, .bo-app [role="button"], .bo-app [tabindex="0"] {
    transition: background-color 140ms cubic-bezier(0.4,0,0.2,1),
                color 140ms cubic-bezier(0.4,0,0.2,1),
                border-color 140ms cubic-bezier(0.4,0,0.2,1),
                box-shadow 140ms cubic-bezier(0.4,0,0.2,1),
                transform 140ms cubic-bezier(0.4,0,0.2,1);
}
/* Subtle lift on big interactives only */
.bo-app .bo-btn-primary:active,
.bo-app .bo-btn-success:active,
.bo-app .bo-btn-danger:active { transform: translateY(0.5px); }

/* List rows */
.bo-app .bo-list li,
.bo-app .bo-fileview-item,
.bo-app .bo-editor-page-item,
.bo-app .bo-cmd-item,
.bo-app .bo-popover-item {
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

/* ================================================================ */
/* 23. GLASS / BLUR — overlays                                       */
/* ================================================================ */
@supports (backdrop-filter: blur(12px)) {
    .bo-cmd-overlay {
        background: color-mix(in srgb, var(--bo-ink-900, #11141a) 55%, transparent) !important;
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
    }
    .bo-popover,
    .rz-dialog,
    .rz-dropdown-panel {
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        background: color-mix(in srgb, var(--bo-surface, #ffffff) 92%, transparent) !important;
    }
    html.theme-dark .bo-popover,
    html.theme-dark .rz-dialog,
    html.theme-dark .rz-dropdown-panel,
    html.bo-theme-dark .bo-popover,
    html.bo-theme-dark .rz-dialog,
    html.bo-theme-dark .rz-dropdown-panel {
        background: color-mix(in srgb, var(--bo-surface, #1a1f29) 88%, transparent) !important;
    }
    .bo-cmd {
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        background: color-mix(in srgb, var(--bo-surface, #ffffff) 90%, transparent) !important;
    }
}
/* Disable blur on mobile for perf */
@media (max-width: 700px) {
    .bo-cmd-overlay, .bo-popover, .rz-dialog, .rz-dropdown-panel, .bo-cmd {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ================================================================ */
/* 24. TOAST SYSTEM — Polymarket-style                               */
/* ================================================================ */
.rz-notifications, .rz-notifications-wrapper {
    position: fixed !important;
    bottom: 16px !important;
    left: 16px !important;
    top: auto !important;
    right: auto !important;
    max-width: 380px !important;
    width: auto !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: none;
}
.rz-notifications > *, .rz-notifications-wrapper > * { pointer-events: auto; }

/* Radzen's outer empty placeholder host gets a tiny invisible footprint */
div.rz-notification[aria-live]:empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    position: fixed !important;
    bottom: 16px !important;
    left: 16px !important;
    top: auto !important;
    right: auto !important;
}
.rz-notification {
    border-radius: var(--bo-radius-lg, 12px) !important;
    border: 1px solid var(--bo-border, #d2d5d8) !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 16px 40px rgba(11, 18, 32, 0.18),
        0 4px 12px rgba(11, 18, 32, 0.10) !important;
    padding: 14px 16px 14px 18px !important;
    background: color-mix(in srgb, var(--bo-surface, #ffffff) 96%, transparent) !important;
    backdrop-filter: blur(12px) saturate(140%);
    position: relative;
    overflow: hidden;
    animation: bo-toast-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bo-toast-in {
    from { transform: translateX(-24px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
.rz-notification::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--bo-text-muted, #6d7175);
}
.rz-notification.rz-notification-success::after { background: var(--bo-success-500, #16a34a); }
.rz-notification.rz-notification-info::after    { background: var(--bo-info-500, #0c5fcc); }
.rz-notification.rz-notification-warning::after { background: var(--bo-warn-500, #b98900); }
.rz-notification.rz-notification-error::after   { background: var(--bo-danger-500, #d72c0d); }
/* Auto-dismiss progress bar */
.rz-notification > .rz-notification-content::before {
    content: "";
    position: absolute;
    top: 0; left: 3px; right: 0;
    height: 2px;
    background: linear-gradient(90deg, currentColor, transparent);
    opacity: 0.35;
    transform-origin: left;
    animation: bo-toast-progress 4.5s linear forwards;
}
@keyframes bo-toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

html.theme-dark .rz-notification, html.bo-theme-dark .rz-notification {
    background: color-mix(in srgb, var(--bo-surface, #1a1f29) 92%, transparent) !important;
    border-color: var(--bo-border, #2e3543) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04),
        0 16px 40px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* ================================================================ */
/* 25. HERO GRADIENT SURFACES — page-header + login mesh             */
/* ================================================================ */
.bo-page-header {
    position: relative;
    isolation: isolate;
}
.bo-page-header::before {
    content: "";
    position: absolute;
    inset: -24px -24px 0 -24px;
    z-index: -1;
    background:
        radial-gradient(circle at 0% 0%,   color-mix(in srgb, var(--bo-brand-500, #008060) 6%, transparent) 0px, transparent 60%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--bo-info-500, #0c5fcc) 6%, transparent) 0px, transparent 60%),
        radial-gradient(circle at 50% 100%,color-mix(in srgb, var(--bo-mag-500, #9c2d9c) 4%, transparent) 0px, transparent 60%);
    pointer-events: none;
    opacity: 0.9;
}
html.theme-dark .bo-page-header::before, html.bo-theme-dark .bo-page-header::before {
    background:
        radial-gradient(circle at 0% 0%,   rgba(46, 184, 114, 0.12) 0px, transparent 60%),
        radial-gradient(circle at 100% 0%, rgba(77, 142, 255, 0.10) 0px, transparent 60%),
        radial-gradient(circle at 50% 100%,rgba(184, 91, 214, 0.08) 0px, transparent 60%);
}

/* Login hero (split layout) */
.bo-auth-hero {
    background: var(--bo-bg-app, #f6f6f7);
    background-image:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--bo-brand-500) 12%, transparent), transparent 50%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--bo-info-500) 12%, transparent), transparent 50%);
}

/* ================================================================ */
/* 26. SIDEBAR COLLAPSED FLYOUT — hover label flies out              */
/* ================================================================ */
.bo-app.bo-collapsed .bo-nav-item {
    position: relative;
}
.bo-app.bo-collapsed .bo-nav-item .bo-nav-label,
.bo-app.bo-collapsed .bo-nav-item .bo-nav-badge { display: none; }
.bo-app.bo-collapsed .bo-nav-item::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: var(--bo-ink-900, #11141a);
    color: #ffffff;
    font-size: var(--bo-fs-200, 12px);
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--bo-radius, 8px);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.bo-app.bo-collapsed .bo-nav-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ================================================================ */
/* 27. ICON FILL / WGHT animation                                    */
/* ================================================================ */
.bo-app .material-symbols-outlined {
    transition: font-variation-settings 180ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease;
}
.bo-app .bo-nav-item:hover .material-symbols-outlined,
.bo-app .bo-action:hover .material-symbols-outlined,
.bo-app .bo-popover-item:hover .material-symbols-outlined,
.bo-app .bo-topbar-iconbtn:hover .material-symbols-outlined,
.bo-app .bo-fileview-item:hover .material-symbols-outlined,
.bo-app .bo-editor-page-item:hover .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500;
}
.bo-app .bo-nav-item.active .material-symbols-outlined,
.bo-app .bo-fileview-item.active .material-symbols-outlined,
.bo-app .bo-editor-page-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* ================================================================ */
/* 28. MOBILE — bottom nav + drawer polish                           */
/* ================================================================ */
.bo-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: color-mix(in srgb, var(--bo-surface, #ffffff) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--bo-border, #d2d5d8);
    z-index: 50;
    padding: 0 8px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
}
.bo-mobile-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}
.bo-mobile-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: var(--bo-radius, 8px);
    color: var(--bo-text-muted, #6d7175);
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 600;
    transition: color 140ms;
    min-height: 44px;
}
.bo-mobile-nav a.active {
    color: var(--bo-brand-700, #005943);
}
.bo-mobile-nav a.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600;
    color: var(--bo-brand-700, #005943);
}
.bo-mobile-nav .material-symbols-outlined { font-size: 22px; }

@media (max-width: 700px) {
    .bo-mobile-nav { display: block; }
    .bo-main { padding-bottom: 80px !important; }
}

html.theme-dark .bo-mobile-nav, html.bo-theme-dark .bo-mobile-nav {
    background: color-mix(in srgb, var(--bo-surface, #1a1f29) 88%, transparent);
    border-top-color: var(--bo-border, #2e3543);
}

/* ================================================================ */
/* 29. A11Y FOCUS RINGS — uniform across components                  */
/* ================================================================ */
.bo-app *:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--bo-bg-app, #ffffff),
        0 0 0 4px var(--bo-brand-500, #008060) !important;
    border-radius: var(--bo-radius, 8px);
    z-index: 5;
    position: relative;
}
.bo-app input:focus-visible, .bo-app textarea:focus-visible,
.bo-app select:focus-visible, .bo-app .rz-textbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.25) !important;
}

/* Skip link */
.bo-skip-link {
    position: absolute;
    top: -100px; left: 8px;
    background: var(--bo-ink-900, #11141a);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: var(--bo-radius, 8px);
    z-index: 9999;
    font-weight: 600;
    transition: top 180ms ease;
}
.bo-skip-link:focus { top: 8px; }

/* ================================================================ */
/* 30. PAGE TRANSITIONS — CSS-only fallback                          */
/* ================================================================ */
@media (prefers-reduced-motion: no-preference) {
    .bo-main > .bo-main-inner {
        animation: bo-page-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }
}
@keyframes bo-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================ */
/* 31. ROUTE ACCENT STRIP — 2px gradient below topbar               */
/* ================================================================ */
.bo-route-accent {
    height: 2px;
    margin: calc(-1 * var(--bo-content-padding-y, 20px)) calc(-1 * var(--bo-content-padding-x, 24px)) 0;
    background: linear-gradient(90deg, var(--bo-brand-500, #008060), var(--bo-brand-700, #005943));
    box-shadow: 0 1px 4px rgba(0, 128, 96, 0.3);
    animation: bo-accent-slide 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bo-accent-slide {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); }
}
.bo-route-accent.tone-info     { background: linear-gradient(90deg, var(--bo-info-500),     var(--bo-info-700));     box-shadow: 0 1px 4px rgba(12, 95, 204, 0.3); }
.bo-route-accent.tone-warn     { background: linear-gradient(90deg, var(--bo-warn-500),     var(--bo-warn-700));     box-shadow: 0 1px 4px rgba(185, 137, 0, 0.3); }
.bo-route-accent.tone-danger   { background: linear-gradient(90deg, var(--bo-danger-500),   var(--bo-danger-700));   box-shadow: 0 1px 4px rgba(215, 44, 13, 0.3); }
.bo-route-accent.tone-mag      { background: linear-gradient(90deg, var(--bo-mag-500),      var(--bo-mag-700));      box-shadow: 0 1px 4px rgba(156, 45, 156, 0.3); }
.bo-route-accent.tone-info-mag { background: linear-gradient(90deg, var(--bo-info-500),     var(--bo-mag-500)); }

/* ================================================================ */
/* 32. PAGE BREADCRUMB                                               */
/* ================================================================ */
.bo-breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    color: var(--bo-text-muted, #6d7175);
    font-size: var(--bo-fs-200, 12px);
    font-weight: 500;
}
.bo-breadcrumb-row a {
    color: var(--bo-text-muted, #6d7175);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 140ms, color 140ms;
}
.bo-breadcrumb-row a:hover {
    background: var(--bo-surface-sub, #f6f6f7);
    color: var(--bo-text-strong, #303030);
    text-decoration: none;
}
.bo-breadcrumb-row .sep {
    color: var(--bo-text-faint, #8c9196);
    font-size: 14px;
    line-height: 1;
}
.bo-breadcrumb-row .current {
    color: var(--bo-text-strong, #303030);
    font-weight: 600;
}

/* ================================================================ */
/* 33. TOOLTIP SYSTEM (CSS-only via [data-tooltip])                  */
/* ================================================================ */
.bo-app [data-tooltip] {
    position: relative;
}
.bo-app [data-tooltip]::after,
.bo-app [data-tooltip]::before {
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease, transform 140ms ease;
    transform: translateX(-50%) translateY(4px);
}
.bo-app [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    background: var(--bo-ink-900, #11141a);
    color: #ffffff;
    font-size: var(--bo-fs-200, 12px);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.bo-app [data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    border: 5px solid transparent;
    border-top-color: var(--bo-ink-900, #11141a);
    z-index: 9999;
}
.bo-app [data-tooltip]:hover::after,
.bo-app [data-tooltip]:hover::before,
.bo-app [data-tooltip]:focus-visible::after,
.bo-app [data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition-delay: 500ms;
}
/* Bottom tooltip variant */
.bo-app [data-tooltip-bottom]::after { bottom: auto; top: calc(100% + 8px); }
.bo-app [data-tooltip-bottom]::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom-color: var(--bo-ink-900); }

/* ================================================================ */
/* 34. TABLE polish — sticky header + bulk select bar               */
/* ================================================================ */
.bo-table-sticky thead th {
    position: sticky; top: var(--bo-topbar-h, 56px);
    z-index: 4;
    background: var(--bo-surface-sub, #f6f6f7) !important;
    box-shadow: 0 1px 0 var(--bo-border, #d2d5d8);
}
.bo-bulk-bar {
    position: sticky;
    top: var(--bo-topbar-h, 56px);
    z-index: 5;
    margin: 0 calc(-1 * var(--bo-content-padding-x, 24px)) var(--bo-space-3, 12px);
    padding: 10px var(--bo-content-padding-x, 24px);
    background: var(--bo-ink-900, #11141a);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--bo-fs-300, 13px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: bo-bulk-slide 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bo-bulk-slide {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ================================================================ */
/* 33b. CONFIGGLOBAL — Polaris list rows                             */
/* ================================================================ */
.bo-app .cg-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    background: var(--bo-surface, #ffffff) !important;
    border-radius: var(--bo-radius-lg, 12px) !important;
    border: 1px solid var(--bo-border, #d2d5d8) !important;
    overflow: hidden;
}
.bo-app .cg-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: var(--bo-space-4, 16px) !important;
    align-items: center !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bo-divider, #ebebeb) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bo-surface, #ffffff) !important;
    transition: background var(--bo-dur-fast, 140ms) !important;
}
.bo-app .cg-row:last-child { border-bottom: 0 !important; }
.bo-app .cg-row:hover {
    background: var(--bo-surface-sub, #f6f6f7) !important;
    box-shadow: none !important;
}
.bo-app .cg-row-head {
    grid-column: 1;
    gap: 8px !important;
    align-items: baseline !important;
}
.bo-app .cg-row-title {
    font-size: var(--bo-fs-300, 13px) !important;
    font-weight: 600 !important;
    color: var(--bo-text-strong, #303030) !important;
}
.bo-app .cg-row-desc {
    grid-column: 1;
    font-size: var(--bo-fs-200, 12px) !important;
    color: var(--bo-text-muted, #6d7175) !important;
    margin-top: 2px;
}
.bo-app .cg-row-ctrl {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
.bo-app .cg-code {
    font-family: var(--bo-font-mono, monospace) !important;
    font-size: 10px !important;
    background: var(--bo-info-50, #d8ecff) !important;
    color: var(--bo-info-700, #00417e) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}
.bo-app .cg-input {
    background: var(--bo-surface, #ffffff) !important;
    border: 1px solid var(--bo-border, #d2d5d8) !important;
    color: var(--bo-text-strong, #303030) !important;
}
.bo-app .cg-input:focus {
    border-color: var(--bo-brand-500, #008060) !important;
    box-shadow: 0 0 0 3px rgba(0,128,96,0.15) !important;
}

/* Dark mode bridge */
html.theme-dark .bo-app .cg-grid,
html.bo-theme-dark .bo-app .cg-grid {
    background: var(--bo-surface, #1a1f29) !important;
    border-color: var(--bo-border, #2e3543) !important;
}
html.theme-dark .bo-app .cg-row,
html.bo-theme-dark .bo-app .cg-row {
    background: var(--bo-surface, #1a1f29) !important;
    border-bottom-color: var(--bo-divider, #232936) !important;
}
html.theme-dark .bo-app .cg-row:hover,
html.bo-theme-dark .bo-app .cg-row:hover {
    background: var(--bo-surface-sub, #20262f) !important;
}
html.theme-dark .bo-app .cg-row-title,
html.bo-theme-dark .bo-app .cg-row-title { color: var(--bo-text-strong, #ffffff) !important; }
html.theme-dark .bo-app .cg-row-desc,
html.bo-theme-dark .bo-app .cg-row-desc { color: var(--bo-text-muted, #98a1b3) !important; }
html.theme-dark .bo-app .cg-code,
html.bo-theme-dark .bo-app .cg-code {
    background: var(--bo-info-50, #0b2747) !important;
    color: var(--bo-info-text, #9abaff) !important;
}

/* ================================================================ */
/* 34b. DONUT — centered label                                       */
/* ================================================================ */
.bo-donut { display: inline-block; }
.bo-donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    pointer-events: none;
}
.bo-donut-value {
    font-size: var(--bo-fs-lg, 18px);
    font-weight: 700;
    color: var(--bo-text-strong, #303030);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.bo-donut-sub {
    font-size: 10px;
    color: var(--bo-text-muted, #6d7175);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* ================================================================ */
/* 35. TOPBAR TICKER (chips) — Polymarket data row                  */
/* ================================================================ */
.bo-topbar-ticker {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--bo-text-muted, #6d7175);
    font-size: var(--bo-fs-200, 12px);
    font-variant-numeric: tabular-nums;
    margin: 0 var(--bo-space-3, 12px);
}
.bo-ticker-chip {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--bo-radius, 8px);
    transition: background 140ms;
}
.bo-ticker-chip:hover { background: var(--bo-surface-sub, #f6f6f7); color: var(--bo-text-strong, #303030); }
.bo-ticker-chip .material-symbols-outlined { font-size: 14px; }
.bo-ticker-chip strong { color: var(--bo-text-strong, #303030); font-weight: 700; }
@media (max-width: 1100px) { .bo-topbar-ticker { display: none; } }
html.theme-dark .bo-ticker-chip:hover, html.bo-theme-dark .bo-ticker-chip:hover {
    background: var(--bo-surface-hover, #262d38); color: var(--bo-text-strong, #ffffff);
}

/* ====================== backoffice/typography.css ====================== */
/* ============================================================================
   Polymarket-grade typography — applies to BO + main app.
   Loaded after design-tokens.css, polish.css.
   ============================================================================ */

/* Inter Variable: rely on Google Fonts (already loaded in _Layout.cshtml).
   For self-hosting later, drop woff2 under wwwroot/fonts/Inter-Variable.woff2
   and replace the @import in _Layout.cshtml with a @font-face block. */

/* Universal type defaults */
.bo-app, html.theme-dark .bo-app, html.theme-dark body, html.bo-theme-dark .bo-app {
    font-feature-settings: 'cv11', 'ss01', 'ss03', 'ss04';   /* Inter stylistic sets */
}

/* Numbers — Polymarket tabular alignment.
   Tag explicit number-display targets with .num or rely on existing tabular-nums. */
.num,
.bo-kpi-value, .bo-kpi-delta,
.bo-savebar-msg, .bo-list-time,
.bo-badge .num,
.cell-num, td.num,
.bo-app code, .bo-app kbd,
.fs-data, .price, .stat-value, .summary-value,
.bo-app input[type="number"], .bo-app input[type="text"][inputmode="decimal"] {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1, 'cv11', 'ss01';
}

/* Display headings — confident tracking + weight */
.bo-app h1, .bo-app h2,
.bo-page-title,
.session-page .page-title,
.cg-page .cg-title,
.bo-app .text-3xl, .bo-app .text-4xl, .bo-app .text-5xl,
.bo-empty-title {
    letter-spacing: -0.024em;
    font-feature-settings: 'cv11', 'ss01', 'ss03', 'kern';
    font-weight: 700;
}
.bo-page-title { font-weight: 650; }

/* Smaller headings — moderate tracking */
.bo-app h3, .bo-app h4, .bo-app h5, .bo-app h6,
.bo-card-header h3,
.bo-section-head h2 {
    letter-spacing: -0.012em;
    font-feature-settings: 'cv11', 'ss01';
    font-weight: 650;
}

/* UI body — slight optical adjustment */
.bo-app, .bo-app p, .bo-app li, .bo-app td, .bo-app th,
.bo-list-title, .bo-list-meta,
.bo-action-title, .bo-action-desc,
.bo-popover-title, .bo-popover-sub,
.bo-notif-title, .bo-notif-meta {
    font-feature-settings: 'kern', 'cv11', 'ss01';
}

/* Code, kbd, mono — refined stack + tabular */
.bo-app code, .bo-app kbd, .bo-app pre, .bo-app samp, .bo-kbd,
.bo-fileview-pre, .bo-code-editor {
    font-family:
        'JetBrains Mono', 'Geist Mono', 'Fira Code', 'SF Mono',
        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 1, 'zero' 1, 'ss01' 1;
    font-variant-numeric: tabular-nums;
}

/* Mono inline code — tighter padding, brand-soft tint */
.bo-app code:not([class]) {
    background: var(--bo-surface-sub, #f1f2f3);
    color: var(--bo-text-strong);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
}
html.theme-dark .bo-app code:not([class]),
html.bo-theme-dark .bo-app code:not([class]) {
    background: var(--bo-surface-sub, #20262f);
    color: var(--bo-text-strong, #ffffff);
}

/* Tabular utility class — apply by hand anywhere */
.tabular-nums, .num-tabular {
    font-variant-numeric: tabular-nums lining-nums !important;
    font-feature-settings: 'tnum' 1, 'lnum' 1 !important;
}

/* Delta indicators — colored arrow icon spacing */
.bo-kpi-delta {
    font-feature-settings: 'tnum', 'lnum', 'cv11';
}
.bo-kpi-delta::before {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    margin-right: 2px;
}

/* Selection coloring — already in shell, but boost for typography */
.bo-app ::selection {
    background: var(--bo-brand-500);
    color: #ffffff;
    text-shadow: none;
}

/* Anti-aliased everywhere */
.bo-app, .bo-app * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Reduce body bottom-margin orphans on long pages */
.bo-app p + p { margin-top: 0.4em; }

/* Improved link underline (Polaris-clean) */
.bo-app a:not(.bo-nav-item):not(.bo-action):not(.bo-popover-item):not(.bo-btn) {
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: text-decoration-color var(--bo-dur-fast, 140ms);
}
.bo-app a:not(.bo-nav-item):not(.bo-action):not(.bo-popover-item):not(.bo-btn):hover {
    text-decoration-color: currentColor;
}

/* Captions (labels under inputs / list meta) — slightly upper-case-y */
.bo-card-sub, .bo-list-meta, .bo-action-desc,
.bo-popover-section-title, .bo-nav-section-title {
    font-feature-settings: 'cv11', 'ss01';
}

/* Reset stray Bootstrap small font on Bo cards */
.bo-card small { font-size: inherit; }

/* ====================== backoffice/darktheme.css ====================== */
/* ============================================================================
   Dark theme — comprehensive coverage for BackOffice + ColinternetV10_0.

   Scope:
   - Both <html class="theme-dark"> (main app, set by theme.js)
     and <html class="bo-theme-dark"> (backoffice legacy) — unified.
   - WCAG AA contrast targets (≥ 4.5:1 for body text, ≥ 3:1 for large text/UI).
   - Covers: BO shell, polish gradients, Radzen widgets, SessionUsers,
     ConfigGlobal cg-*, Tailwind utility classes, Bootstrap remnants,
     scrollbars, form controls.
   - Loaded AFTER polish.css so its overrides win.
   ============================================================================ */

/* Unify selectors: anything that turns dark turns on .theme-dark scope */
html.bo-theme-dark { color-scheme: dark; }
html.bo-theme-dark, html.theme-dark { color-scheme: dark; }

/* ============================================================================
   1. BACKOFFICE TOKENS — tighter contrast, WCAG-checked
   ============================================================================ */
html.bo-theme-dark, html.theme-dark .bo-app, .bo-theme-dark {
    --bo-bg-app:        #0d1014;       /* page background — deepest */
    --bo-bg-app-2:      #131720;
    --bo-surface:       #1a1f29;       /* card body */
    --bo-surface-sub:   #20262f;       /* card header / hover row */
    --bo-surface-hover: #262d38;
    --bo-surface-press: #2c3441;
    --bo-border:        #2e3543;       /* default outlines, AA against bg */
    --bo-border-strong: #3f485a;
    --bo-divider:       #232936;

    /* Foreground — pure white for primary, calibrated for AA */
    --bo-text:        #e7ebf2;        /* 12.8:1 on bg-app */
    --bo-text-strong: #ffffff;
    --bo-text-soft:   #c2c9d6;        /* 8.7:1 — body secondary */
    --bo-text-muted:  #98a1b3;        /* 5.6:1 — captions, meta */
    --bo-text-faint:  #6e7689;        /* 3.5:1 — placeholders, disabled */
    --bo-text-onbrand:#ffffff;
    --bo-text-link:   #6bd7b3;        /* brand-300 lifted for contrast */

    /* Sidebar — slightly darker than app for depth */
    --bo-sidebar-bg:        #0a0d12;
    --bo-sidebar-border:    #1f2530;
    --bo-sidebar-text:      #d9dee8;
    --bo-sidebar-text-dim:  #8b94a7;
    --bo-sidebar-text-hi:   #ffffff;
    --bo-sidebar-item-hover:#171c25;
    --bo-sidebar-item-active-bg: rgba(46, 184, 114, 0.18);
    --bo-sidebar-item-active-fg: #ffffff;
    --bo-sidebar-search-bg: #11151c;

    /* Brand — keep recognizable green but tuned for dark backgrounds */
    --bo-brand-50:  #0d2a1d;
    --bo-brand-100: #143b29;
    --bo-brand-200: #1f5639;
    --bo-brand-300: #2e7d52;
    --bo-brand-400: #41a36b;
    --bo-brand-500: #2eb872;          /* 4.7:1 on white text — primary CTA */
    --bo-brand-600: #26a065;
    --bo-brand-700: #1f8a55;
    --bo-brand-800: #176d44;
    --bo-brand-900: #0e4d2f;

    /* Status — lighter foreground in dark to keep contrast */
    --bo-success-50:  #0e2f1d;  --bo-success-bg: #143b29;  --bo-success-500: #2eb872;
    --bo-success-700: #1f8a55;  --bo-success-text: #7ee5b1;
    --bo-warn-50:     #3a2a06;  --bo-warn-bg:    #4a3608;  --bo-warn-500:    #f5a623;
    --bo-warn-700:    #d18a00;  --bo-warn-text:   #ffd989;
    --bo-danger-50:   #3a1313;  --bo-danger-bg:  #4a1818;  --bo-danger-500:  #ef5b4f;
    --bo-danger-700:  #c93b30;  --bo-danger-text: #ff9c92;
    --bo-info-50:     #0b2747;  --bo-info-bg:    #102f56;  --bo-info-500:    #4d8eff;
    --bo-info-700:    #2563eb;  --bo-info-text:   #9abaff;
    --bo-mag-50:      #2c0d3a;  --bo-mag-bg:     #3e1452;  --bo-mag-500:     #b85bd6;
    --bo-mag-700:     #8e3eaa;  --bo-mag-text:    #d99bf2;

    /* Neutrals — invert ink scale so light-mode ink-900 == dark white */
    --bo-ink-0:   #0d1014;
    --bo-ink-25:  #131720;
    --bo-ink-50:  #1a1f29;
    --bo-ink-75:  #20262f;
    --bo-ink-100: #262d38;
    --bo-ink-150: #2e3543;
    --bo-ink-200: #3f485a;
    --bo-ink-300: #525c70;
    --bo-ink-400: #6e7689;
    --bo-ink-500: #98a1b3;
    --bo-ink-600: #c2c9d6;
    --bo-ink-700: #d9dee8;
    --bo-ink-800: #e7ebf2;
    --bo-ink-900: #ffffff;
    --bo-ink-950: #ffffff;

    /* Focus ring — lighter for visibility on dark */
    --bo-ring:      0 0 0 2px rgba(46, 184, 114, 0.45);
    --bo-ring-focus:0 0 0 2px var(--bo-bg-app), 0 0 0 4px #4d8eff;

    /* Shadows — deep, with hairline edge */
    --bo-shadow-xs: 0 1px 0 rgba(0,0,0,0.5);
    --bo-shadow-sm: 0 1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.55);
    --bo-shadow:    0 1px 0 rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.55);
    --bo-shadow-md: 0 4px 12px rgba(0,0,0,0.6), 0 1px 0 rgba(0,0,0,0.5);
    --bo-shadow-lg: 0 16px 32px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.55);
    --bo-shadow-xl: 0 24px 48px rgba(0,0,0,0.7), 0 12px 24px rgba(0,0,0,0.55);
}

/* Body paint when backoffice mounted in dark */
html.bo-theme-dark body, html.theme-dark body { background: var(--bo-bg-app, #0d1014) !important; }

/* ============================================================================
   2. BACKOFFICE SHELL — kill hardcoded light gradients from polish.css
   ============================================================================ */
html.bo-theme-dark .bo-card, html.theme-dark .bo-app .bo-card {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-bg-app-2) 100%) !important;
    border-color: var(--bo-border) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 1px 0 rgba(0, 0, 0, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
html.bo-theme-dark .bo-card:hover, html.theme-dark .bo-app .bo-card:hover {
    border-color: var(--bo-border-strong) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 4px 12px rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
html.bo-theme-dark .bo-card-header h3,
html.theme-dark .bo-app .bo-card-header h3 {
    background: linear-gradient(180deg, #ffffff 0%, #d9dee8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html.bo-theme-dark .bo-page-title,
html.theme-dark .bo-app .bo-page-title {
    background: linear-gradient(180deg, #ffffff 0%, #c2c9d6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* KPI cards */
html.bo-theme-dark .bo-kpi, html.theme-dark .bo-app .bo-kpi {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-bg-app-2) 100%) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .bo-kpi:hover, html.theme-dark .bo-app .bo-kpi:hover {
    border-color: var(--bo-border-strong) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4) !important;
}
html.bo-theme-dark .bo-kpi-value, html.theme-dark .bo-app .bo-kpi-value {
    background: linear-gradient(180deg, #ffffff 0%, #c2c9d6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html.bo-theme-dark .bo-kpi.tone-success .bo-kpi-icon { background: var(--bo-success-50) !important; color: var(--bo-success-text) !important; }
html.bo-theme-dark .bo-kpi.tone-warn    .bo-kpi-icon { background: var(--bo-warn-50)    !important; color: var(--bo-warn-text)    !important; }
html.bo-theme-dark .bo-kpi.tone-danger  .bo-kpi-icon { background: var(--bo-danger-50)  !important; color: var(--bo-danger-text)  !important; }
html.bo-theme-dark .bo-kpi.tone-info    .bo-kpi-icon { background: var(--bo-info-50)    !important; color: var(--bo-info-text)    !important; }

/* Buttons — kill light gradients */
html.bo-theme-dark .bo-btn, html.theme-dark .bo-app .bo-btn {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-surface-sub) 100%) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border-strong) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 1px 2px rgba(0,0,0,0.4) !important;
}
html.bo-theme-dark .bo-btn:hover, html.theme-dark .bo-app .bo-btn:hover {
    background: linear-gradient(180deg, var(--bo-surface-hover) 0%, var(--bo-surface) 100%) !important;
    border-color: var(--bo-ink-300) !important;
}
html.bo-theme-dark .bo-btn-primary, html.theme-dark .bo-app .bo-btn-primary {
    background: linear-gradient(180deg, #ffffff 0%, #d9dee8 100%) !important;
    color: var(--bo-ink-0) !important;
    border-color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 2px 4px rgba(0,0,0,0.4) !important;
}
html.bo-theme-dark .bo-btn-primary:hover, html.theme-dark .bo-app .bo-btn-primary:hover {
    background: linear-gradient(180deg, #f7f8fa 0%, #c2c9d6 100%) !important;
    border-color: #f7f8fa !important;
}
html.bo-theme-dark .bo-btn-success, html.theme-dark .bo-app .bo-btn-success {
    background: linear-gradient(180deg, var(--bo-brand-500) 0%, var(--bo-brand-700) 100%) !important;
    color: #ffffff !important;
    border-color: var(--bo-brand-700) !important;
}
html.bo-theme-dark .bo-btn-ghost, html.theme-dark .bo-app .bo-btn-ghost {
    background: transparent !important;
    color: var(--bo-text) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html.bo-theme-dark .bo-btn-ghost:hover, html.theme-dark .bo-app .bo-btn-ghost:hover {
    background: var(--bo-surface-hover) !important;
}

/* Quick action tiles */
html.bo-theme-dark .bo-action, html.theme-dark .bo-app .bo-action {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-bg-app-2) 100%) !important;
    border-color: var(--bo-border) !important;
    color: var(--bo-text-strong) !important;
}
html.bo-theme-dark .bo-action:hover, html.theme-dark .bo-app .bo-action:hover {
    background: linear-gradient(180deg, var(--bo-brand-50) 0%, var(--bo-surface) 100%) !important;
    border-color: var(--bo-brand-500) !important;
    box-shadow: 0 0 0 1px rgba(46, 184, 114, 0.15), 0 6px 16px rgba(46, 184, 114, 0.2) !important;
}
html.bo-theme-dark .bo-action-icon, html.theme-dark .bo-app .bo-action-icon {
    background: linear-gradient(180deg, var(--bo-surface-sub) 0%, var(--bo-bg-app-2) 100%) !important;
    color: var(--bo-text) !important;
}
html.bo-theme-dark .bo-action:hover .bo-action-icon, html.theme-dark .bo-app .bo-action:hover .bo-action-icon {
    background: linear-gradient(180deg, var(--bo-brand-500) 0%, var(--bo-brand-700) 100%) !important;
    color: #ffffff !important;
}

/* Topbar — frosted but dark */
html.bo-theme-dark .bo-topbar, html.theme-dark .bo-app .bo-topbar {
    background: rgba(13, 16, 20, 0.85) !important;
    border-bottom-color: var(--bo-border) !important;
}
html.bo-theme-dark .bo-topbar-cmd-btn, html.theme-dark .bo-app .bo-topbar-cmd-btn {
    background: linear-gradient(180deg, var(--bo-surface-sub) 0%, var(--bo-bg-app-2) 100%) !important;
    color: var(--bo-text-soft) !important;
}
html.bo-theme-dark .bo-topbar-cmd-btn:hover, html.theme-dark .bo-app .bo-topbar-cmd-btn:hover {
    background: var(--bo-surface) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .bo-topbar-iconbtn, html.theme-dark .bo-app .bo-topbar-iconbtn {
    color: var(--bo-text-soft) !important;
}
html.bo-theme-dark .bo-topbar-iconbtn:hover, html.theme-dark .bo-app .bo-topbar-iconbtn:hover {
    background: var(--bo-surface-hover) !important;
    color: var(--bo-text-strong) !important;
}
html.bo-theme-dark .bo-topbar-iconbtn .bo-dot, html.theme-dark .bo-app .bo-topbar-iconbtn .bo-dot {
    border-color: var(--bo-bg-app) !important;
}
html.bo-theme-dark .bo-topbar-user:hover, html.theme-dark .bo-app .bo-topbar-user:hover {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-surface-hover) 100%) !important;
}

/* Sidebar — dark + brand-tinted gradient */
html.bo-theme-dark .bo-sidebar, html.theme-dark .bo-app .bo-sidebar {
    background: linear-gradient(180deg, #131720 0%, var(--bo-sidebar-bg) 60%) !important;
    border-right-color: var(--bo-sidebar-border) !important;
}
html.bo-theme-dark .bo-sidebar-brand:hover, html.theme-dark .bo-app .bo-sidebar-brand:hover {
    background: rgba(46, 184, 114, 0.08) !important;
}
html.bo-theme-dark .bo-sidebar-search-btn, html.theme-dark .bo-app .bo-sidebar-search-btn {
    background: linear-gradient(180deg, var(--bo-sidebar-search-bg) 0%, var(--bo-sidebar-bg) 100%) !important;
    color: var(--bo-sidebar-text-dim) !important;
    border-color: var(--bo-sidebar-border) !important;
}
html.bo-theme-dark .bo-sidebar-search-btn:hover, html.theme-dark .bo-app .bo-sidebar-search-btn:hover {
    border-color: var(--bo-brand-500) !important;
    color: var(--bo-sidebar-text-hi) !important;
}
html.bo-theme-dark .bo-nav-item, html.theme-dark .bo-app .bo-nav-item {
    color: var(--bo-sidebar-text) !important;
}
html.bo-theme-dark .bo-nav-item:not(.active):hover, html.theme-dark .bo-app .bo-nav-item:not(.active):hover {
    background: var(--bo-sidebar-item-hover) !important;
    color: var(--bo-sidebar-text-hi) !important;
}
html.bo-theme-dark .bo-nav-item:not(.active):hover .material-symbols-outlined,
html.theme-dark .bo-app .bo-nav-item:not(.active):hover .material-symbols-outlined {
    color: var(--bo-brand-300) !important;
}
html.bo-theme-dark .bo-nav-item .material-symbols-outlined,
html.theme-dark .bo-app .bo-nav-item .material-symbols-outlined {
    color: var(--bo-sidebar-text-dim) !important;
}
html.bo-theme-dark .bo-nav-item.active, html.theme-dark .bo-app .bo-nav-item.active {
    background: linear-gradient(180deg, var(--bo-brand-600) 0%, var(--bo-brand-800) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 110, 82, 0.4), 0 1px 0 rgba(255,255,255,0.1) inset !important;
}
html.bo-theme-dark .bo-nav-section-title, html.theme-dark .bo-app .bo-nav-section-title {
    color: var(--bo-sidebar-text-dim) !important;
}
html.bo-theme-dark .bo-sidebar-footer:hover, html.theme-dark .bo-app .bo-sidebar-footer:hover {
    background: var(--bo-sidebar-item-hover) !important;
}

/* Resource list */
html.bo-theme-dark .bo-list li, html.theme-dark .bo-app .bo-list li {
    border-top-color: var(--bo-divider) !important;
}
html.bo-theme-dark .bo-list li:hover, html.theme-dark .bo-app .bo-list li:hover {
    background: var(--bo-surface-sub) !important;
}
html.bo-theme-dark .bo-list .bo-list-icon, html.theme-dark .bo-app .bo-list .bo-list-icon {
    background: linear-gradient(180deg, var(--bo-surface-sub) 0%, var(--bo-bg-app-2) 100%) !important;
    color: var(--bo-text) !important;
}

/* Badges */
html.bo-theme-dark .bo-badge, html.theme-dark .bo-app .bo-badge {
    background: linear-gradient(180deg, var(--bo-surface-sub) 0%, var(--bo-bg-app-2) 100%) !important;
    color: var(--bo-text-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
html.bo-theme-dark .bo-badge.success, html.theme-dark .bo-app .bo-badge.success {
    background: var(--bo-success-50) !important; color: var(--bo-success-text) !important;
}
html.bo-theme-dark .bo-badge.warn, html.theme-dark .bo-app .bo-badge.warn {
    background: var(--bo-warn-50) !important; color: var(--bo-warn-text) !important;
}
html.bo-theme-dark .bo-badge.danger, html.theme-dark .bo-app .bo-badge.danger {
    background: var(--bo-danger-50) !important; color: var(--bo-danger-text) !important;
}
html.bo-theme-dark .bo-badge.info, html.theme-dark .bo-app .bo-badge.info {
    background: var(--bo-info-50) !important; color: var(--bo-info-text) !important;
}
html.bo-theme-dark .bo-badge.mag, html.theme-dark .bo-app .bo-badge.mag {
    background: var(--bo-mag-50) !important; color: var(--bo-mag-text) !important;
}

/* Inputs / textboxes */
html.bo-theme-dark input, html.bo-theme-dark textarea, html.bo-theme-dark select,
html.theme-dark .bo-app input, html.theme-dark .bo-app textarea, html.theme-dark .bo-app select {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark input::placeholder, html.bo-theme-dark textarea::placeholder,
html.theme-dark .bo-app input::placeholder, html.theme-dark .bo-app textarea::placeholder {
    color: var(--bo-text-faint) !important;
}
html.bo-theme-dark input:focus, html.bo-theme-dark textarea:focus, html.bo-theme-dark select:focus,
html.theme-dark .bo-app input:focus, html.theme-dark .bo-app textarea:focus, html.theme-dark .bo-app select:focus {
    border-color: var(--bo-brand-500) !important;
    box-shadow: 0 0 0 3px rgba(46, 184, 114, 0.25) !important;
    background: var(--bo-surface-hover) !important;
}

/* KBD */
html.bo-theme-dark .bo-kbd, html.theme-dark .bo-app .bo-kbd {
    background: var(--bo-surface-sub) !important;
    color: var(--bo-text-soft) !important;
    border-color: var(--bo-border) !important;
}

/* Popovers */
html.bo-theme-dark .bo-popover, html.theme-dark .bo-app .bo-popover {
    background: var(--bo-surface) !important;
    border-color: var(--bo-border) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04),
        0 24px 48px rgba(0, 0, 0, 0.65),
        0 8px 16px rgba(0, 0, 0, 0.5) !important;
}
html.bo-theme-dark .bo-popover-head, html.theme-dark .bo-app .bo-popover-head { border-bottom-color: var(--bo-divider) !important; }
html.bo-theme-dark .bo-popover-section, html.theme-dark .bo-app .bo-popover-section { border-top-color: var(--bo-divider) !important; }
html.bo-theme-dark .bo-popover-item, html.theme-dark .bo-app .bo-popover-item { color: var(--bo-text-strong) !important; }
html.bo-theme-dark .bo-popover-item:hover, html.theme-dark .bo-app .bo-popover-item:hover {
    background: linear-gradient(180deg, var(--bo-brand-50) 0%, var(--bo-surface) 100%) !important;
}
html.bo-theme-dark .bo-popover-item.danger, html.theme-dark .bo-app .bo-popover-item.danger { color: var(--bo-danger-text) !important; }

/* Command palette */
html.bo-theme-dark .bo-cmd-overlay, html.theme-dark .bo-app .bo-cmd-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}
html.bo-theme-dark .bo-cmd, html.theme-dark .bo-app .bo-cmd {
    background: var(--bo-surface) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 32px 64px rgba(0, 0, 0, 0.7),
        0 16px 32px rgba(0, 0, 0, 0.5) !important;
}
html.bo-theme-dark .bo-cmd-input-wrap, html.theme-dark .bo-app .bo-cmd-input-wrap { border-bottom-color: var(--bo-border) !important; }
html.bo-theme-dark .bo-cmd-input, html.theme-dark .bo-app .bo-cmd-input {
    background: transparent !important;
    color: var(--bo-text-strong) !important;
}
html.bo-theme-dark .bo-cmd-item, html.theme-dark .bo-app .bo-cmd-item { color: var(--bo-text-strong) !important; }
html.bo-theme-dark .bo-cmd-item:hover, html.bo-theme-dark .bo-cmd-item.active,
html.theme-dark .bo-app .bo-cmd-item:hover, html.theme-dark .bo-app .bo-cmd-item.active {
    background: linear-gradient(180deg, var(--bo-brand-50) 0%, var(--bo-surface-sub) 100%) !important;
}
html.bo-theme-dark .bo-cmd-item mark, html.theme-dark .bo-app .bo-cmd-item mark { color: var(--bo-brand-300) !important; background: transparent !important; }
html.bo-theme-dark .bo-cmd-footer, html.theme-dark .bo-app .bo-cmd-footer {
    border-top-color: var(--bo-border) !important;
    background: var(--bo-bg-app-2) !important;
    color: var(--bo-text-muted) !important;
}

/* Empty state */
html.bo-theme-dark .bo-empty, html.theme-dark .bo-app .bo-empty { color: var(--bo-text-muted) !important; }
html.bo-theme-dark .bo-empty-icon, html.theme-dark .bo-app .bo-empty-icon {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-bg-app-2) 100%) !important;
    color: var(--bo-text) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .bo-empty-title, html.theme-dark .bo-app .bo-empty-title {
    background: linear-gradient(180deg, #ffffff 0%, #c2c9d6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* Skeletons */
html.bo-theme-dark .bo-skel, html.theme-dark .bo-app .bo-skel {
    background: linear-gradient(90deg, var(--bo-surface-sub) 0%, var(--bo-surface-hover) 50%, var(--bo-surface-sub) 100%) !important;
    background-size: 200% 100% !important;
}

/* Scrollbars */
html.bo-theme-dark .bo-app *::-webkit-scrollbar-thumb,
html.theme-dark .bo-app *::-webkit-scrollbar-thumb {
    background: var(--bo-ink-200) !important;
    background-clip: content-box !important;
}
html.bo-theme-dark .bo-app *::-webkit-scrollbar-thumb:hover,
html.theme-dark .bo-app *::-webkit-scrollbar-thumb:hover {
    background: var(--bo-ink-300) !important;
    background-clip: content-box !important;
}

/* ============================================================================
   3. SESSIONUSERS BRIDGE — dark mode
   ============================================================================ */
html.bo-theme-dark .session-page .stat-card,
html.theme-dark .session-page .stat-card,
html.bo-theme-dark .session-page .summary-card,
html.theme-dark .session-page .summary-card,
html.bo-theme-dark .session-page .grid-container,
html.theme-dark .session-page .grid-container,
html.bo-theme-dark .session-page .filters-bar,
html.theme-dark .session-page .filters-bar {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-bg-app-2) 100%) !important;
    border-color: var(--bo-border) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 3px rgba(0,0,0,0.4) !important;
}
html.bo-theme-dark .session-page .stat-value,
html.theme-dark .session-page .stat-value {
    background: linear-gradient(180deg, #ffffff 0%, #c2c9d6 100%) !important;
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html.bo-theme-dark .session-page .stat-label,
html.theme-dark .session-page .stat-label,
html.bo-theme-dark .session-page .summary-card h4,
html.theme-dark .session-page .summary-card h4 {
    color: var(--bo-text-muted) !important;
}
html.bo-theme-dark .session-page .origin-badge,
html.theme-dark .session-page .origin-badge {
    background: var(--bo-surface-sub) !important;
    color: var(--bo-text-soft) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .session-page .id-badge,
html.theme-dark .session-page .id-badge {
    background: var(--bo-surface-sub) !important;
    color: var(--bo-text-soft) !important;
}
html.bo-theme-dark .session-page .page-title,
html.theme-dark .session-page .page-title {
    background: linear-gradient(180deg, #ffffff 0%, #c2c9d6 100%) !important;
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html.bo-theme-dark .session-page .page-subtitle,
html.theme-dark .session-page .page-subtitle {
    color: var(--bo-text-muted) !important;
}

/* ============================================================================
   4. CONFIGGLOBAL BRIDGE — dark mode
   ============================================================================ */
html.bo-theme-dark .cg-page .cg-card,
html.theme-dark .cg-page .cg-card,
html.bo-theme-dark .cg-page .cg-section,
html.theme-dark .cg-page .cg-section,
html.bo-theme-dark .cg-page .cg-tabs,
html.theme-dark .cg-page .cg-tabs {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-bg-app-2) 100%) !important;
    border-color: var(--bo-border) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 3px rgba(0,0,0,0.4) !important;
    color: var(--bo-text) !important;
}
html.bo-theme-dark .cg-page .cg-title,
html.theme-dark .cg-page .cg-title {
    background: linear-gradient(180deg, #ffffff 0%, #c2c9d6 100%) !important;
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html.bo-theme-dark .cg-page .cg-subtitle,
html.theme-dark .cg-page .cg-subtitle {
    color: var(--bo-text-muted) !important;
}
html.bo-theme-dark .cg-page .cg-tab,
html.theme-dark .cg-page .cg-tab {
    color: var(--bo-text-soft) !important;
}
html.bo-theme-dark .cg-page .cg-tab:hover,
html.theme-dark .cg-page .cg-tab:hover {
    background: var(--bo-surface-hover) !important;
    color: var(--bo-text-strong) !important;
}
html.bo-theme-dark .cg-page .cg-tab.is-active,
html.theme-dark .cg-page .cg-tab.is-active {
    background: linear-gradient(180deg, var(--bo-brand-600) 0%, var(--bo-brand-800) 100%) !important;
    color: #ffffff !important;
}
html.bo-theme-dark .cg-page .cg-btn,
html.theme-dark .cg-page .cg-btn {
    background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-surface-sub) 100%) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border-strong) !important;
}
html.bo-theme-dark .cg-page .cg-btn:hover,
html.theme-dark .cg-page .cg-btn:hover {
    background: var(--bo-surface-hover) !important;
}
html.bo-theme-dark .cg-page .cg-btn-primary,
html.theme-dark .cg-page .cg-btn-primary {
    background: linear-gradient(180deg, #ffffff 0%, #d9dee8 100%) !important;
    color: var(--bo-ink-0) !important;
    border-color: #ffffff !important;
}
html.bo-theme-dark .cg-page .cg-search,
html.theme-dark .cg-page .cg-search {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .cg-page .cg-badge,
html.theme-dark .cg-page .cg-badge {
    background: var(--bo-surface-sub) !important;
    color: var(--bo-text-soft) !important;
}

/* ============================================================================
   5. TAILWIND UTILITY CLASS BRIDGE — applies to both BO + main app
   ============================================================================ */
html.theme-dark .bg-white,
html.bo-theme-dark .bg-white,
html.theme-dark .bg-gray-50,
html.bo-theme-dark .bg-gray-50,
html.theme-dark .bg-slate-50,
html.bo-theme-dark .bg-slate-50,
html.theme-dark .bg-neutral-50,
html.bo-theme-dark .bg-neutral-50,
html.theme-dark .bg-zinc-50,
html.bo-theme-dark .bg-zinc-50 {
    background-color: var(--bo-surface, var(--c-bg-elevated, #1a1f29)) !important;
}
html.theme-dark .bg-gray-100,
html.bo-theme-dark .bg-gray-100,
html.theme-dark .bg-slate-100,
html.bo-theme-dark .bg-slate-100 {
    background-color: var(--bo-surface-sub, var(--c-bg-subtle, #20262f)) !important;
}
html.theme-dark .border-gray-100,
html.bo-theme-dark .border-gray-100,
html.theme-dark .border-gray-200,
html.bo-theme-dark .border-gray-200,
html.theme-dark .border-gray-300,
html.bo-theme-dark .border-gray-300,
html.theme-dark .border-slate-200,
html.bo-theme-dark .border-slate-200,
html.theme-dark .border-slate-300,
html.bo-theme-dark .border-slate-300 {
    border-color: var(--bo-border, var(--c-border, #2e3543)) !important;
}
html.theme-dark .text-gray-900, html.bo-theme-dark .text-gray-900,
html.theme-dark .text-gray-800, html.bo-theme-dark .text-gray-800,
html.theme-dark .text-slate-900, html.bo-theme-dark .text-slate-900,
html.theme-dark .text-slate-800, html.bo-theme-dark .text-slate-800,
html.theme-dark .text-black, html.bo-theme-dark .text-black,
html.theme-dark .text-neutral-900, html.bo-theme-dark .text-neutral-900 {
    color: var(--bo-text-strong, #ffffff) !important;
}
html.theme-dark .text-gray-700, html.bo-theme-dark .text-gray-700,
html.theme-dark .text-gray-600, html.bo-theme-dark .text-gray-600,
html.theme-dark .text-slate-700, html.bo-theme-dark .text-slate-700,
html.theme-dark .text-slate-600, html.bo-theme-dark .text-slate-600 {
    color: var(--bo-text, #e7ebf2) !important;
}
html.theme-dark .text-gray-500, html.bo-theme-dark .text-gray-500,
html.theme-dark .text-gray-400, html.bo-theme-dark .text-gray-400,
html.theme-dark .text-slate-500, html.bo-theme-dark .text-slate-500,
html.theme-dark .text-slate-400, html.bo-theme-dark .text-slate-400 {
    color: var(--bo-text-muted, #98a1b3) !important;
}
html.theme-dark .text-gray-300, html.bo-theme-dark .text-gray-300,
html.theme-dark .text-slate-300, html.bo-theme-dark .text-slate-300 {
    color: var(--bo-text-faint, #6e7689) !important;
}
html.theme-dark .bg-gray-800, html.bo-theme-dark .bg-gray-800,
html.theme-dark .bg-slate-800, html.bo-theme-dark .bg-slate-800,
html.theme-dark .bg-gray-900, html.bo-theme-dark .bg-gray-900,
html.theme-dark .bg-slate-900, html.bo-theme-dark .bg-slate-900 {
    background: linear-gradient(180deg, #ffffff 0%, #d9dee8 100%) !important;
    color: var(--bo-ink-0, #0d1014) !important;
}
html.theme-dark .bg-gray-800:hover, html.bo-theme-dark .bg-gray-800:hover,
html.theme-dark .bg-slate-800:hover, html.bo-theme-dark .bg-slate-800:hover {
    background: linear-gradient(180deg, #f7f8fa 0%, #c2c9d6 100%) !important;
}
html.theme-dark .bg-green-600, html.bo-theme-dark .bg-green-600,
html.theme-dark .bg-emerald-600, html.bo-theme-dark .bg-emerald-600 {
    background: linear-gradient(180deg, var(--bo-brand-500, #2eb872) 0%, var(--bo-brand-700, #1f8a55) 100%) !important;
    color: #ffffff !important;
}
html.theme-dark .bg-red-600, html.bo-theme-dark .bg-red-600,
html.theme-dark .bg-rose-600, html.bo-theme-dark .bg-rose-600 {
    background: linear-gradient(180deg, var(--bo-danger-500, #ef5b4f) 0%, var(--bo-danger-700, #c93b30) 100%) !important;
    color: #ffffff !important;
}
html.theme-dark .bg-blue-600, html.bo-theme-dark .bg-blue-600 {
    background: linear-gradient(180deg, var(--bo-info-500, #4d8eff) 0%, var(--bo-info-700, #2563eb) 100%) !important;
    color: #ffffff !important;
}
html.theme-dark .text-amber-500, html.bo-theme-dark .text-amber-500,
html.theme-dark .text-yellow-500, html.bo-theme-dark .text-yellow-500 {
    color: var(--bo-warn-text, #ffd989) !important;
}
html.theme-dark .text-blue-600, html.bo-theme-dark .text-blue-600,
html.theme-dark .text-blue-500, html.bo-theme-dark .text-blue-500 {
    color: var(--bo-info-text, #9abaff) !important;
}
html.theme-dark .text-red-500, html.bo-theme-dark .text-red-500,
html.theme-dark .text-red-600, html.bo-theme-dark .text-red-600,
html.theme-dark .text-rose-500, html.bo-theme-dark .text-rose-500 {
    color: var(--bo-danger-text, #ff9c92) !important;
}
html.theme-dark .text-green-500, html.bo-theme-dark .text-green-500,
html.theme-dark .text-green-600, html.bo-theme-dark .text-green-600,
html.theme-dark .text-emerald-500, html.bo-theme-dark .text-emerald-500 {
    color: var(--bo-success-text, #7ee5b1) !important;
}
/* Tailwind shadow utility — keep but darker */
html.theme-dark .shadow, html.bo-theme-dark .shadow,
html.theme-dark .shadow-sm, html.bo-theme-dark .shadow-sm,
html.theme-dark .shadow-md, html.bo-theme-dark .shadow-md,
html.theme-dark .shadow-lg, html.bo-theme-dark .shadow-lg {
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 1px 0 rgba(0,0,0,0.4) !important;
}
/* Tailwind ring */
html.theme-dark .ring-1, html.bo-theme-dark .ring-1 { box-shadow: 0 0 0 1px var(--bo-border, #2e3543) !important; }
html.theme-dark .focus\:ring-blue-500:focus, html.bo-theme-dark .focus\:ring-blue-500:focus {
    box-shadow: 0 0 0 3px rgba(77, 142, 255, 0.35) !important;
}
html.theme-dark .focus\:border-blue-500:focus, html.bo-theme-dark .focus\:border-blue-500:focus {
    border-color: var(--bo-info-500, #4d8eff) !important;
}

/* ============================================================================
   6. RADZEN WIDGETS — comprehensive dark coverage
   ============================================================================ */
html.bo-theme-dark .rz-button.rz-secondary, html.theme-dark .rz-button.rz-secondary {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border-strong) !important;
}
html.bo-theme-dark .rz-button.rz-secondary:hover, html.theme-dark .rz-button.rz-secondary:hover {
    background: var(--bo-surface-hover) !important;
}
html.bo-theme-dark .rz-button.rz-primary, html.theme-dark .rz-button.rz-primary {
    background: #ffffff !important; color: var(--bo-ink-0) !important; border-color: #ffffff !important;
}
html.bo-theme-dark .rz-textbox, html.theme-dark .rz-textbox,
html.bo-theme-dark .rz-dropdown, html.theme-dark .rz-dropdown,
html.bo-theme-dark .rz-numeric, html.theme-dark .rz-numeric,
html.bo-theme-dark .rz-datepicker, html.theme-dark .rz-datepicker,
html.bo-theme-dark .rz-textarea, html.theme-dark .rz-textarea,
html.bo-theme-dark .rz-multiselect, html.theme-dark .rz-multiselect,
html.bo-theme-dark .rz-autocomplete, html.theme-dark .rz-autocomplete,
html.bo-theme-dark .rz-listbox, html.theme-dark .rz-listbox {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .rz-textbox:focus, html.theme-dark .rz-textbox:focus,
html.bo-theme-dark .rz-textbox.rz-state-focused, html.theme-dark .rz-textbox.rz-state-focused {
    border-color: var(--bo-brand-500) !important;
    box-shadow: 0 0 0 3px rgba(46, 184, 114, 0.25) !important;
}
html.bo-theme-dark .rz-dropdown-panel,
html.theme-dark .rz-dropdown-panel,
html.bo-theme-dark .rz-dropdown-items,
html.theme-dark .rz-dropdown-items {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border) !important;
    box-shadow: var(--bo-shadow-lg) !important;
}
html.bo-theme-dark .rz-dropdown-item, html.theme-dark .rz-dropdown-item { color: var(--bo-text-strong) !important; }
html.bo-theme-dark .rz-dropdown-item:hover, html.theme-dark .rz-dropdown-item:hover { background: var(--bo-surface-hover) !important; }
html.bo-theme-dark .rz-state-highlight, html.theme-dark .rz-state-highlight {
    background: var(--bo-brand-50) !important;
    color: var(--bo-brand-text, var(--bo-success-text)) !important;
}

/* DataGrid */
html.bo-theme-dark .rz-data-grid, html.theme-dark .rz-data-grid,
html.bo-theme-dark .rz-grid-table, html.theme-dark .rz-grid-table {
    background: var(--bo-surface) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .rz-data-grid thead th, html.theme-dark .rz-data-grid thead th,
html.bo-theme-dark .rz-grid-table thead th, html.theme-dark .rz-grid-table thead th {
    background: linear-gradient(180deg, var(--bo-surface-sub) 0%, var(--bo-bg-app-2) 100%) !important;
    color: var(--bo-text-soft) !important;
    border-bottom-color: var(--bo-border) !important;
}
html.bo-theme-dark .rz-data-grid tbody td, html.theme-dark .rz-data-grid tbody td,
html.bo-theme-dark .rz-grid-table tbody td, html.theme-dark .rz-grid-table tbody td {
    color: var(--bo-text-strong) !important;
    border-bottom-color: var(--bo-divider) !important;
}
html.bo-theme-dark .rz-data-grid tbody tr:hover td, html.theme-dark .rz-data-grid tbody tr:hover td,
html.bo-theme-dark .rz-grid-table tbody tr:hover td, html.theme-dark .rz-grid-table tbody tr:hover td {
    background: linear-gradient(180deg, var(--bo-brand-50) 0%, transparent 100%) !important;
}
html.bo-theme-dark .rz-paginator, html.theme-dark .rz-paginator {
    background: var(--bo-bg-app-2) !important;
    border-top-color: var(--bo-divider) !important;
    color: var(--bo-text-soft) !important;
}

/* Card / Panel */
html.bo-theme-dark .rz-card, html.theme-dark .rz-card,
html.bo-theme-dark .rz-panel, html.theme-dark .rz-panel {
    background: var(--bo-surface) !important;
    border-color: var(--bo-border) !important;
    color: var(--bo-text-strong) !important;
}
html.bo-theme-dark .rz-panel-titlebar, html.theme-dark .rz-panel-titlebar {
    background: var(--bo-surface-sub) !important;
    border-bottom-color: var(--bo-divider) !important;
    color: var(--bo-text-strong) !important;
}

/* Dialog */
html.bo-theme-dark .rz-dialog, html.theme-dark .rz-dialog {
    background: var(--bo-surface) !important;
    border-color: var(--bo-border) !important;
    color: var(--bo-text-strong) !important;
    box-shadow: var(--bo-shadow-xl) !important;
}
html.bo-theme-dark .rz-dialog-titlebar, html.theme-dark .rz-dialog-titlebar {
    background: var(--bo-surface-sub) !important;
    border-bottom-color: var(--bo-divider) !important;
}
html.bo-theme-dark .rz-dialog-titlebar .rz-dialog-title,
html.theme-dark .rz-dialog-titlebar .rz-dialog-title {
    color: var(--bo-text-strong) !important;
}
html.bo-theme-dark .rz-dialog-mask, html.theme-dark .rz-dialog-mask {
    background: rgba(0, 0, 0, 0.65) !important;
}

/* Notification */
html.bo-theme-dark .rz-notification, html.theme-dark .rz-notification {
    background: var(--bo-surface) !important;
    border-color: var(--bo-border) !important;
    color: var(--bo-text-strong) !important;
    box-shadow: var(--bo-shadow-lg) !important;
}

/* Tooltip — keep dark (it's already dark) */
html.bo-theme-dark .rz-tooltip-content, html.theme-dark .rz-tooltip-content {
    background: #f7f8fa !important;
    color: var(--bo-ink-0) !important;
}

/* Tabview */
html.bo-theme-dark .rz-tabview .rz-tabview-nav, html.theme-dark .rz-tabview .rz-tabview-nav {
    border-bottom-color: var(--bo-border) !important;
}
html.bo-theme-dark .rz-tabview .rz-tabview-nav li a, html.theme-dark .rz-tabview .rz-tabview-nav li a {
    color: var(--bo-text-soft) !important;
}
html.bo-theme-dark .rz-tabview .rz-tabview-nav li.rz-state-active a,
html.theme-dark .rz-tabview .rz-tabview-nav li.rz-state-active a {
    color: var(--bo-brand-300) !important;
    border-bottom-color: var(--bo-brand-500) !important;
}

/* Tree (Explorer page) */
html.bo-theme-dark .rz-tree, html.theme-dark .rz-tree { background: transparent !important; color: var(--bo-text-strong) !important; }
html.bo-theme-dark .rz-tree-node-content:hover, html.theme-dark .rz-tree-node-content:hover { background: var(--bo-surface-hover) !important; }
html.bo-theme-dark .rz-tree-node-content.rz-state-highlight, html.theme-dark .rz-tree-node-content.rz-state-highlight {
    background: var(--bo-brand-50) !important; color: var(--bo-success-text) !important;
}

/* HtmlEditor */
html.bo-theme-dark .rz-html-editor, html.theme-dark .rz-html-editor {
    background: var(--bo-surface) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .rz-html-editor-toolbar, html.theme-dark .rz-html-editor-toolbar {
    background: var(--bo-surface-sub) !important;
    border-bottom-color: var(--bo-divider) !important;
}
html.bo-theme-dark .rz-html-editor-content, html.theme-dark .rz-html-editor-content {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
}
html.bo-theme-dark .rz-html-editor-button, html.theme-dark .rz-html-editor-button {
    color: var(--bo-text) !important;
    background: transparent !important;
}
html.bo-theme-dark .rz-html-editor-button:hover, html.theme-dark .rz-html-editor-button:hover {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
}
html.bo-theme-dark .rz-html-editor-button.rz-selected, html.theme-dark .rz-html-editor-button.rz-selected {
    background: var(--bo-brand-50) !important;
    color: var(--bo-success-text) !important;
}

/* Switch / Checkbox */
html.bo-theme-dark .rz-chkbox-box, html.theme-dark .rz-chkbox-box,
html.bo-theme-dark .rz-switch, html.theme-dark .rz-switch {
    border-color: var(--bo-border-strong) !important;
    background: var(--bo-surface) !important;
}
html.bo-theme-dark .rz-chkbox-box.rz-state-active, html.theme-dark .rz-chkbox-box.rz-state-active,
html.bo-theme-dark .rz-switch.rz-state-active, html.theme-dark .rz-switch.rz-state-active {
    background: var(--bo-brand-500) !important; border-color: var(--bo-brand-500) !important;
}

/* ColorPicker, ProgressBar, etc. — generic dark surface */
html.bo-theme-dark .rz-colorpicker, html.theme-dark .rz-colorpicker,
html.bo-theme-dark .rz-colorpicker-popup, html.theme-dark .rz-colorpicker-popup {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border) !important;
}
html.bo-theme-dark .rz-progressbar, html.theme-dark .rz-progressbar { background: var(--bo-surface-sub) !important; }
html.bo-theme-dark .rz-progressbar-value, html.theme-dark .rz-progressbar-value { background: var(--bo-brand-500) !important; }

/* ============================================================================
   7. BOOTSTRAP REMNANTS (some legacy pages still use .btn-* / .card / .alert)
   ============================================================================ */
html.theme-dark .card,
html.bo-theme-dark .card {
    background: var(--bo-surface) !important;
    border-color: var(--bo-border) !important;
    color: var(--bo-text-strong) !important;
}
html.theme-dark .card-header, html.bo-theme-dark .card-header,
html.theme-dark .card-footer, html.bo-theme-dark .card-footer {
    background: var(--bo-surface-sub) !important;
    border-color: var(--bo-divider) !important;
    color: var(--bo-text) !important;
}
html.theme-dark .btn-secondary, html.bo-theme-dark .btn-secondary {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border-strong) !important;
}
html.theme-dark .btn-light, html.bo-theme-dark .btn-light {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
}
html.theme-dark .form-control, html.bo-theme-dark .form-control {
    background: var(--bo-surface) !important;
    color: var(--bo-text-strong) !important;
    border-color: var(--bo-border) !important;
}
html.theme-dark .form-control::placeholder, html.bo-theme-dark .form-control::placeholder {
    color: var(--bo-text-faint) !important;
}
html.theme-dark .form-control:focus, html.bo-theme-dark .form-control:focus {
    background: var(--bo-surface-hover) !important;
    border-color: var(--bo-brand-500) !important;
    box-shadow: 0 0 0 3px rgba(46, 184, 114, 0.25) !important;
}
html.theme-dark .table, html.bo-theme-dark .table {
    color: var(--bo-text-strong) !important;
    background: var(--bo-surface) !important;
}
html.theme-dark .table thead th, html.bo-theme-dark .table thead th {
    background: var(--bo-surface-sub) !important;
    color: var(--bo-text-soft) !important;
    border-bottom-color: var(--bo-border) !important;
}
html.theme-dark .table tbody tr:hover td, html.bo-theme-dark .table tbody tr:hover td {
    background: var(--bo-surface-hover) !important;
}
html.theme-dark .table tbody td, html.bo-theme-dark .table tbody td {
    border-top-color: var(--bo-divider) !important;
}

/* ============================================================================
   8. MAIN COLINTERNETV10 — fix high-contrast issues in dark
   ============================================================================ */
/* Modal/popover overlays should be darker, not whitish */
html.theme-dark .modal-backdrop,
html.theme-dark .rz-dialog-mask { background: rgba(0,0,0,0.7) !important; }

/* Bootstrap modal content */
html.theme-dark .modal-content {
    background: var(--c-bg-elevated) !important;
    color: var(--c-fg) !important;
    border-color: var(--c-border) !important;
}
html.theme-dark .modal-header, html.theme-dark .modal-footer {
    background: var(--c-bg-subtle) !important;
    border-color: var(--c-border-muted) !important;
}

/* Bootstrap dropdown */
html.theme-dark .dropdown-menu {
    background: var(--c-bg-elevated) !important;
    border-color: var(--c-border) !important;
    color: var(--c-fg) !important;
    box-shadow: var(--sh-lg) !important;
}
html.theme-dark .dropdown-item { color: var(--c-fg) !important; }
html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus {
    background: var(--c-bg-subtle) !important;
    color: var(--c-fg) !important;
}

/* Pre / code blocks readability */
html.theme-dark pre, html.bo-theme-dark pre {
    background: var(--bo-bg-app, #0d1014) !important;
    color: var(--bo-text-strong, #e7ebf2) !important;
    border-color: var(--bo-border, #2e3543) !important;
}
html.theme-dark code, html.bo-theme-dark code {
    background: var(--bo-surface-sub, #20262f) !important;
    color: var(--bo-text-strong, #e7ebf2) !important;
    padding: 1px 6px; border-radius: 4px;
}
html.theme-dark code.material-symbols-outlined, html.bo-theme-dark code.material-symbols-outlined {
    background: transparent !important;
    padding: 0; border-radius: 0;
}

/* Links readable */
html.theme-dark a:not(.btn):not(.bo-btn):not(.bo-nav-item):not(.bo-action):not(.bo-popover-item),
html.bo-theme-dark a:not(.btn):not(.bo-btn):not(.bo-nav-item):not(.bo-action):not(.bo-popover-item) {
    color: var(--bo-text-link, #6bd7b3) !important;
}
html.theme-dark a:not(.btn):not(.bo-btn):hover,
html.bo-theme-dark a:not(.btn):not(.bo-btn):hover { text-decoration: underline; }

/* Selection contrast */
html.theme-dark ::selection, html.bo-theme-dark ::selection {
    background: var(--bo-brand-500, #2eb872);
    color: #ffffff;
}

/* Disabled controls — still visible but clearly dim */
html.theme-dark button[disabled], html.theme-dark input[disabled], html.theme-dark textarea[disabled],
html.bo-theme-dark button[disabled], html.bo-theme-dark input[disabled], html.bo-theme-dark textarea[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Material Symbols default color when used as standalone icon */
html.theme-dark .bo-app .material-symbols-outlined,
html.bo-theme-dark .bo-app .material-symbols-outlined { color: inherit; }

/* ============================================================================
   9. HIGH-CONTRAST MODE (Windows / accessibility) — bump borders
   ============================================================================ */
@media (prefers-contrast: more) {
    html.bo-theme-dark, html.theme-dark {
        --bo-border:        #4a5363;
        --bo-border-strong: #6b7689;
        --bo-divider:       #3a4150;
        --bo-text-muted:    #b2bbcb;     /* lift muted text closer to AA AAA */
        --bo-text-faint:    #98a1b3;
    }
}

/* ============================================================================
   10. FORCED-COLORS MODE (Windows high contrast) — respect system palette
   ============================================================================ */
@media (forced-colors: active) {
    html.bo-theme-dark, html.theme-dark {
        forced-color-adjust: auto;
    }
    .bo-card, .bo-kpi, .bo-btn, .bo-nav-item, .bo-popover, .bo-cmd {
        border: 1px solid CanvasText !important;
    }
    .bo-btn-primary, .bo-nav-item.active {
        background: Highlight !important;
        color: HighlightText !important;
        border-color: HighlightText !important;
    }
}

/* ============================================================================
   12. SITE.CSS HARDCODED REMNANTS — patches for legacy hex values
   ============================================================================ */
html.theme-dark .btnBlack,
html.bo-theme-dark .btnBlack {
    background: linear-gradient(180deg, #ffffff 0%, #d9dee8 100%) !important;
    color: var(--bo-ink-0, #0d1014) !important;
    border-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
}
html.theme-dark .btnBlack:hover,
html.bo-theme-dark .btnBlack:hover {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
html.theme-dark .btnBlanc,
html.bo-theme-dark .btnBlanc {
    background: var(--bo-surface, #1a1f29) !important;
    color: var(--bo-text-strong, #ffffff) !important;
    border-color: var(--bo-border-strong, #3f485a) !important;
}
html.theme-dark .btnBlanc:hover,
html.bo-theme-dark .btnBlanc:hover {
    background: var(--bo-surface-hover, #262d38) !important;
}
html.theme-dark .btnPrimary, html.theme-dark .btnPrimaryFit,
html.bo-theme-dark .btnPrimary, html.bo-theme-dark .btnPrimaryFit {
    background: linear-gradient(180deg, var(--bo-brand-500, #2eb872) 0%, var(--bo-brand-700, #1f8a55) 100%) !important;
    color: #ffffff !important;
}

/* site.css line 654 — RadzenDialog titlebar override forced #fff */
html.theme-dark .rz-dialog-titlebar,
html.bo-theme-dark .rz-dialog-titlebar {
    background-color: var(--bo-surface-sub, #20262f) !important;
    color: var(--bo-text-strong, #ffffff) !important;
    border-bottom: 1px solid var(--bo-divider, #232936) !important;
}

/* site.css line 944 — .CataCgv dropdown */
html.theme-dark .CataCgv > ul, html.theme-dark .Referencement > ul,
html.bo-theme-dark .CataCgv > ul, html.bo-theme-dark .Referencement > ul {
    background: var(--bo-surface, #1a1f29) !important;
    border-color: var(--bo-border, #2e3543) !important;
    box-shadow: var(--bo-shadow-md, 0 4px 12px rgba(0,0,0,0.6)) !important;
}

/* Generic catch-all: anything with inline `background: white` or `background-color: #fff` */
html.theme-dark [style*="background: white"],
html.theme-dark [style*="background:white"],
html.bo-theme-dark [style*="background: white"],
html.bo-theme-dark [style*="background:white"] {
    background: var(--bo-surface, #1a1f29) !important;
}
html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background-color: #fff"],
html.theme-dark [style*="background-color:#fff"],
html.bo-theme-dark [style*="background: #fff"],
html.bo-theme-dark [style*="background:#fff"],
html.bo-theme-dark [style*="background-color: #fff"],
html.bo-theme-dark [style*="background-color:#fff"] {
    background: var(--bo-surface, #1a1f29) !important;
}
html.theme-dark [style*="color: #000"],
html.theme-dark [style*="color:#000"],
html.theme-dark [style*="color: black"],
html.theme-dark [style*="color:black"],
html.bo-theme-dark [style*="color: #000"],
html.bo-theme-dark [style*="color:#000"],
html.bo-theme-dark [style*="color: black"],
html.bo-theme-dark [style*="color:black"] {
    color: var(--bo-text-strong, #ffffff) !important;
}

/* ============================================================================
   13. MAIN COLINTERNETV10 COMPONENTS — header, catalogue, panier, etc.
   utilities.css uses CSS vars so design-tokens.css already covers most cases.
   Patches below are for hard-coded edge cases.
   ============================================================================ */
/* Header app */
html.theme-dark .header-app {
    background: var(--c-bg-elevated, #11161e) !important;
    border-bottom: 1px solid var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .header-app--scrolled {
    background: color-mix(in srgb, var(--c-bg-elevated, #11161e) 88%, transparent) !important;
    backdrop-filter: blur(12px) saturate(140%);
}
html.theme-dark .search-shell__row {
    background: var(--c-bg, #07090e) !important;
    border-color: var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .search-shell__row:hover { border-color: var(--c-border-strong, #2d3744) !important; }
html.theme-dark .search-shell__input { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .search-shell__input::placeholder { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark .search-shell__icon { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .search-shell__submit {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}
html.theme-dark .icon-btn {
    color: var(--c-fg-muted, #c8d0dd) !important;
    background: transparent !important;
}
html.theme-dark .icon-btn:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .icon-btn[data-active="true"] {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}
html.theme-dark .icon-btn__badge {
    background: var(--c-brand, #ef5a4a) !important;
    color: #ffffff !important;
    border-color: var(--c-bg-elevated, #11161e) !important;
}
html.theme-dark .user-pill { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .user-pill:hover { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .user-pill__avatar {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}
html.theme-dark .user-pill__name { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .user-pill__client { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .menu-dropdown {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
    box-shadow: var(--sh-lg) !important;
}
html.theme-dark .menu-dropdown a, html.theme-dark .menu-dropdown button { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .menu-dropdown a:hover, html.theme-dark .menu-dropdown button:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .search-dropdown {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
    box-shadow: var(--sh-lg) !important;
}
html.theme-dark .search-dropdown__heading,
html.theme-dark .search-dropdown__section + .search-dropdown__section {
    border-color: var(--c-border-muted, #161b22) !important;
    color: var(--c-fg-subtle, #8b95a7) !important;
}

/* Catalogue header + product cards */
html.theme-dark .catalogue-header,
html.theme-dark .catalogue-header__bar {
    background: var(--c-bg, #07090e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .catalogue-header__crumb { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .view-switch {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .view-switch__btn { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .view-switch__btn[data-active="true"] {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    box-shadow: var(--sh-xs) !important;
}
html.theme-dark .card-product {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .card-product:hover {
    border-color: var(--c-border-strong, #2d3744) !important;
    box-shadow: var(--sh-md) !important;
}
html.theme-dark .card-product__media { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .card-product__title { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .card-product__price { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .card-product__meta { color: var(--c-fg-subtle, #8b95a7) !important; }

/* Stock badges */
html.theme-dark .stock-available { background: var(--c-success-soft, #052e16) !important; color: var(--c-success-fg, #4ade80) !important; }
html.theme-dark .stock-low       { background: var(--c-warning-soft, #422006) !important; color: var(--c-warning-fg, #fbbf24) !important; }
html.theme-dark .stock-unavailable { background: var(--c-danger-soft, #450a0a) !important; color: var(--c-danger-fg, #f87171) !important; }

/* Favoris toggle (heart) */
html.theme-dark .fav-toggle {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark .fav-toggle:hover { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .fav-toggle[data-active="true"] {
    color: var(--c-brand, #ef5a4a) !important;
}

/* Forms / fields */
html.theme-dark .field {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .field::placeholder { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark .field:hover { border-color: var(--c-border-strong, #2d3744) !important; }
html.theme-dark .field:focus, html.theme-dark .field:focus-visible {
    border-color: var(--c-accent, #f7f8fa) !important;
    box-shadow: var(--sh-focus-strong) !important;
}
html.theme-dark .form-label, html.theme-dark .form-label-required { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .choice {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* Loading overlay */
html.theme-dark .catalogue-loading-overlay {
    background: color-mix(in srgb, var(--c-bg, #07090e) 75%, transparent) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* Skeleton — design system */
html.theme-dark .skeleton {
    background: linear-gradient(90deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-muted, #161b22) 50%, var(--c-bg-subtle, #0d1117) 100%) !important;
    background-size: 200% 100% !important;
}

/* Skip link */
html.theme-dark .skip-link {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}

/* Validation / confirmation commande Bootstrap-style cards (uses .card from utilities + bootstrap) */
html.theme-dark .alert-info {
    background: var(--c-info-soft, #172554) !important;
    color: var(--c-info-fg, #60a5fa) !important;
    border-color: var(--c-info, #3b82f6) !important;
}
html.theme-dark .alert-success {
    background: var(--c-success-soft, #052e16) !important;
    color: var(--c-success-fg, #4ade80) !important;
    border-color: var(--c-success, #22c55e) !important;
}
html.theme-dark .alert-warning {
    background: var(--c-warning-soft, #422006) !important;
    color: var(--c-warning-fg, #fbbf24) !important;
    border-color: var(--c-warning, #f59e0b) !important;
}
html.theme-dark .alert-danger {
    background: var(--c-danger-soft, #450a0a) !important;
    color: var(--c-danger-fg, #f87171) !important;
    border-color: var(--c-danger, #ef4444) !important;
}

/* Footer */
html.theme-dark footer, html.theme-dark .footer-app {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-top: 1px solid var(--c-border, #1f2630) !important;
}
html.theme-dark footer a, html.theme-dark .footer-app a { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Inscription / Connexion forms */
html.theme-dark #ConnexionPage,
html.theme-dark #InscriptionPage,
html.theme-dark .blurConnexion {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark #ConnexionPage label,
html.theme-dark #InscriptionPage label { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark #ConnexionPage input,
html.theme-dark #InscriptionPage input {
    background: var(--c-bg, #07090e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ContentColinternet wrapper itself stays transparent (no bg override needed) */
html.theme-dark #ContentColinternet { color: var(--c-fg, #f7f8fa); }
html.theme-dark body {
    background: var(--c-bg, #07090e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* HR */
html.theme-dark hr, html.bo-theme-dark hr {
    border-color: var(--bo-divider, var(--c-border-muted, #161b22)) !important;
    background: transparent !important;
}

/* SVG icons w/ stroke=currentColor — already inherit color; ensure default fill-currentColor too */
html.theme-dark svg[fill="currentColor"] { color: inherit; }

/* Images on cards — avoid white halo on transparent PNGs by NOT adding bg, just slight shadow */
html.theme-dark img[src*=".png"], html.theme-dark img[src*=".jpg"] {
    /* keep image as-is; don't add filter inversion */
}

/* ============================================================================
   13.5 RAZOR SCOPED CSS PATCHES — common hardcoded backgrounds across .razor.css
   Loaded AFTER scoped bundle; same specificity wins by source order + !important.
   ============================================================================ */
html.theme-dark .product-card,
html.theme-dark .sort-dropdown,
html.theme-dark .products-grid > *,
html.theme-dark .ajouterPanier,
html.theme-dark .ajouterPanier > div,
html.theme-dark .bloc-info,
html.theme-dark .bloc-card,
html.theme-dark .info-card,
html.theme-dark .popup,
html.theme-dark .popup > div,
html.theme-dark .popup-content,
html.theme-dark .popup-body,
html.theme-dark .modal-body,
html.theme-dark .modal-content,
html.theme-dark .accordion-item,
html.theme-dark .accordion-button,
html.theme-dark .list-group-item,
html.theme-dark .tab-content,
html.theme-dark .panel,
html.theme-dark .panel-body,
html.theme-dark .panel-heading {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* Wide-net for "white-card-ish" elements that scope rules in razor.css */
html.theme-dark .card-body,
html.theme-dark .card-header,
html.theme-dark .card-footer {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border-muted, #161b22) !important;
}

/* Prix article, fiche article, recherche dropdown */
html.theme-dark .prix-article, html.theme-dark .price-block,
html.theme-dark .article-detail, html.theme-dark .fiche-article,
html.theme-dark .recherche-dropdown, html.theme-dark .search-results {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* Mon compte, profil, liste-favoris, panier */
html.theme-dark .mon-compte, html.theme-dark .profil-card,
html.theme-dark .liste-favoris, html.theme-dark .liste-favoris li,
html.theme-dark .panier-item, html.theme-dark .panier-resume,
html.theme-dark .commande-line {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* Yellow warning blocks `background: #fff3cd` in razor.css */
html.theme-dark [style*="background:#fff3cd"], html.theme-dark [style*="background: #fff3cd"] {
    background: var(--c-warning-soft, #422006) !important;
    color: var(--c-warning-fg, #fbbf24) !important;
}

/* Generic light-bg helpers commonly used */
html.theme-dark .bg-light, html.bo-theme-dark .bg-light {
    background: var(--bo-surface, var(--c-bg-elevated, #1a1f29)) !important;
    color: var(--bo-text, var(--c-fg, #f7f8fa)) !important;
}
html.theme-dark .bg-secondary, html.bo-theme-dark .bg-secondary {
    background: var(--bo-surface-sub, var(--c-bg-subtle, #20262f)) !important;
    color: var(--bo-text-soft, var(--c-fg-muted, #c8d0dd)) !important;
}

/* Border helpers */
html.theme-dark .border, html.bo-theme-dark .border,
html.theme-dark .border-top, html.bo-theme-dark .border-top,
html.theme-dark .border-bottom, html.bo-theme-dark .border-bottom,
html.theme-dark .border-left, html.bo-theme-dark .border-left,
html.theme-dark .border-right, html.bo-theme-dark .border-right {
    border-color: var(--bo-border, var(--c-border, #2e3543)) !important;
}

/* Text helpers */
html.theme-dark .text-dark, html.bo-theme-dark .text-dark {
    color: var(--bo-text-strong, var(--c-fg, #ffffff)) !important;
}
html.theme-dark .text-muted, html.bo-theme-dark .text-muted {
    color: var(--bo-text-muted, var(--c-fg-subtle, #98a1b3)) !important;
}
html.theme-dark .text-secondary, html.bo-theme-dark .text-secondary {
    color: var(--bo-text-soft, var(--c-fg-muted, #c2c9d6)) !important;
}
html.theme-dark .text-white, html.bo-theme-dark .text-white {
    color: #ffffff !important;
}

/* Bootstrap btn-info / btn-primary / btn-warning / btn-success — make readable */
html.theme-dark .btn-info, html.bo-theme-dark .btn-info {
    background: var(--bo-info-500, #4d8eff) !important;
    color: #ffffff !important;
    border-color: var(--bo-info-700, #2563eb) !important;
}
html.theme-dark .btn-primary, html.bo-theme-dark .btn-primary {
    background: linear-gradient(180deg, #ffffff 0%, #d9dee8 100%) !important;
    color: var(--bo-ink-0, #0d1014) !important;
    border-color: #ffffff !important;
}
html.theme-dark .btn-warning, html.bo-theme-dark .btn-warning {
    background: var(--bo-warn-500, #f5a623) !important;
    color: #0d1014 !important;
    border-color: var(--bo-warn-700, #d18a00) !important;
}
html.theme-dark .btn-success, html.bo-theme-dark .btn-success {
    background: linear-gradient(180deg, var(--bo-brand-500, #2eb872) 0%, var(--bo-brand-700, #1f8a55) 100%) !important;
    color: #ffffff !important;
    border-color: var(--bo-brand-700, #1f8a55) !important;
}
html.theme-dark .btn-danger, html.bo-theme-dark .btn-danger {
    background: linear-gradient(180deg, var(--bo-danger-500, #ef5b4f) 0%, var(--bo-danger-700, #c93b30) 100%) !important;
    color: #ffffff !important;
    border-color: var(--bo-danger-700, #c93b30) !important;
}

/* Headings — ensure readability */
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3,
html.theme-dark h4, html.theme-dark h5, html.theme-dark h6,
html.bo-theme-dark h1, html.bo-theme-dark h2, html.bo-theme-dark h3,
html.bo-theme-dark h4, html.bo-theme-dark h5, html.bo-theme-dark h6 {
    color: var(--bo-text-strong, var(--c-fg, #ffffff));
}

/* Paragraphs / span / div default text color */
html.theme-dark p, html.theme-dark li, html.theme-dark dt, html.theme-dark dd,
html.bo-theme-dark p, html.bo-theme-dark li, html.bo-theme-dark dt, html.bo-theme-dark dd {
    color: inherit;
}

/* `<small>`, `<em>`, `<strong>` keep inherit color */
html.theme-dark small, html.theme-dark em, html.theme-dark strong,
html.bo-theme-dark small, html.bo-theme-dark em, html.bo-theme-dark strong { color: inherit; }

/* Tables that aren't .table — generic table support */
html.theme-dark table, html.bo-theme-dark table { color: var(--bo-text-strong, var(--c-fg, #ffffff)); }
html.theme-dark table th, html.bo-theme-dark table th {
    background: var(--bo-surface-sub, var(--c-bg-subtle, #20262f)) !important;
    color: var(--bo-text-soft, var(--c-fg-muted, #c2c9d6)) !important;
}
html.theme-dark table td, html.bo-theme-dark table td {
    border-color: var(--bo-divider, var(--c-border-muted, #232936)) !important;
}

/* iframe — often hosts external content, leave as-is but add subtle border */
html.theme-dark iframe, html.bo-theme-dark iframe {
    border-color: var(--bo-border, #2e3543);
}

/* Newsletter / footer banner sections (common pattern) */
html.theme-dark .newsletter, html.bo-theme-dark .newsletter {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   14. PRINT — force light mode for printing
   ============================================================================ */
@media print {
    html.bo-theme-dark, html.theme-dark {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .bo-sidebar, .bo-topbar, .bo-popover, .bo-savebar, .bo-cmd-overlay { display: none !important; }
}

/* ====================== public-dark.css ====================== */
/* ============================================================================
   Colinternet Public Dark Theme — production-grade.
   Loaded AFTER all razor.css scoped CSS so its `!important` overrides win.

   Strategy:
   - Token-based via design-tokens.css `.theme-dark` (already defined).
   - Force every hardcoded #fff / white / #f8f9fa / inline backgrounds to tokens.
   - Cover all major razor.css component patterns by class name.
   - WCAG AA contrast for body text on dark surface.
   - Smooth 200ms transition on theme switch (body color + background).
   ============================================================================ */

/* ============================================================================
   1. SMOOTH THEME TRANSITION + base body
   ============================================================================ */
html, body {
    transition:
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.theme-dark, html.theme-dark body {
    background: var(--c-bg, #07090e) !important;
    color: var(--c-fg, #f7f8fa);
}

/* Prevent FOUC: when initial server class is set, paint body immediately */
html.theme-dark #ContentColinternet { background: var(--c-bg, #07090e); }
html.theme-light #ContentColinternet { background: var(--c-bg, #ffffff); }

/* ============================================================================
   2. SURFACES — every white-ish card-like element becomes elevated surface
   ============================================================================ */
html.theme-dark .bg-white,
html.theme-dark .backgroundPage,
html.theme-dark [class*="bg-light"]:not([class*="bg-light-blue"]):not([class*="bg-light-green"]),
html.theme-dark .card,
html.theme-dark .card-product,
html.theme-dark .product-card,
html.theme-dark .listcard-default,
html.theme-dark .listcard-modele1,
html.theme-dark .listcard-modele2,
html.theme-dark .listcard-modele3,
html.theme-dark .listcard-modele4,
html.theme-dark .carousel-card-model1,
html.theme-dark .body-mp-card,
html.theme-dark .article,
html.theme-dark .articleFavoris,
html.theme-dark .articleGestion,
html.theme-dark .articleInfo,
html.theme-dark .PageCardsComposant,
html.theme-dark .PageCardsListComposant,
html.theme-dark .DetailArticle,
html.theme-dark .RetourPanier,
html.theme-dark .OrderList,
html.theme-dark .Order,
html.theme-dark .CardList,
html.theme-dark .RefLib,
html.theme-dark .PrixQte,
html.theme-dark .ChoixTypeMenu_CardEspace,
html.theme-dark .ChoixTypeMenu_inline,
html.theme-dark .Niveau,
html.theme-dark .TitreArticle,
html.theme-dark .Titre,
html.theme-dark .container-flexbox,
html.theme-dark .container-flexbox-reverse {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
    border-color: var(--c-border, #1f2630);
}

/* Subtle surface variant */
html.theme-dark .bg-gray-50,
html.theme-dark .bg-gray-100,
html.theme-dark .bg-slate-50,
html.theme-dark .bg-slate-100,
html.theme-dark .BandeauHaut,
html.theme-dark .Breadcrumbs,
html.theme-dark .ProdCons,
html.theme-dark .PanierVide {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa);
}

/* ============================================================================
   3. TEXT — readability everywhere
   ============================================================================ */
html.theme-dark .text-black,
html.theme-dark .text-gray-900,
html.theme-dark .text-gray-800,
html.theme-dark .text-slate-900,
html.theme-dark .text-slate-800,
html.theme-dark .text-neutral-900,
html.theme-dark .text-neutral-800,
html.theme-dark .text-zinc-900 {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .text-gray-700,
html.theme-dark .text-gray-600,
html.theme-dark .text-slate-700,
html.theme-dark .text-slate-600 {
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark .text-gray-500,
html.theme-dark .text-gray-400,
html.theme-dark .text-slate-500,
html.theme-dark .text-slate-400 {
    color: var(--c-fg-subtle, #8b95a7) !important;
}
html.theme-dark .text-gray-300,
html.theme-dark .text-slate-300 {
    color: var(--c-fg-faint, #5c6675) !important;
}
html.theme-dark .text-muted, html.theme-dark .text-secondary {
    color: var(--c-fg-subtle, #8b95a7) !important;
}
html.theme-dark .text-dark { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .text-white { color: #ffffff !important; }

/* Headings — readable */
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3,
html.theme-dark h4, html.theme-dark h5, html.theme-dark h6,
html.theme-dark .titreSite { color: var(--c-fg, #f7f8fa); }

/* ============================================================================
   4. BORDERS
   ============================================================================ */
html.theme-dark .border,
html.theme-dark .border-top,
html.theme-dark .border-bottom,
html.theme-dark .border-left,
html.theme-dark .border-right,
html.theme-dark .border-gray-100,
html.theme-dark .border-gray-200,
html.theme-dark .border-gray-300,
html.theme-dark .border-slate-200,
html.theme-dark .border-slate-300,
html.theme-dark hr {
    border-color: var(--c-border, #1f2630) !important;
}

/* ============================================================================
   5. INPUTS — readable in dark
   ============================================================================ */
html.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="color"]),
html.theme-dark textarea,
html.theme-dark select,
html.theme-dark .form-control,
html.theme-dark .field,
html.theme-dark .rz-textbox {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder,
html.theme-dark .form-control::placeholder {
    color: var(--c-fg-faint, #5c6675) !important;
}
html.theme-dark input:focus,
html.theme-dark textarea:focus,
html.theme-dark select:focus,
html.theme-dark .form-control:focus {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
    box-shadow: var(--sh-focus-strong, 0 0 0 3px rgba(255,255,255,0.18)) !important;
    outline: none !important;
}

/* Disabled */
html.theme-dark input[disabled],
html.theme-dark textarea[disabled],
html.theme-dark select[disabled],
html.theme-dark .form-control[readonly] {
    background: var(--c-bg-muted, #161b22) !important;
    color: var(--c-fg-subtle, #8b95a7) !important;
}

/* ============================================================================
   6. BUTTONS — coverage of all variants used in app
   ============================================================================ */
html.theme-dark .btn-primary {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
}
html.theme-dark .btn-primary:hover:not(:disabled) {
    background: var(--c-accent-hover, #e4e7ec) !important;
}
html.theme-dark .btn-secondary {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .btn-secondary:hover:not(:disabled) {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .btn-light {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .btn-dark {
    background: var(--c-fg, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}
html.theme-dark .btn-success {
    background: var(--c-success, #22c55e) !important; color: #ffffff !important; border-color: var(--c-success, #22c55e) !important;
}
html.theme-dark .btn-danger {
    background: var(--c-danger, #ef4444) !important; color: #ffffff !important; border-color: var(--c-danger, #ef4444) !important;
}
html.theme-dark .btn-warning {
    background: var(--c-warning, #f59e0b) !important; color: var(--c-fg-inverse, #0b1220) !important; border-color: var(--c-warning, #f59e0b) !important;
}
html.theme-dark .btn-info {
    background: var(--c-info, #3b82f6) !important; color: #ffffff !important; border-color: var(--c-info, #3b82f6) !important;
}

/* Site-css legacy buttons */
html.theme-dark .btnBlack {
    background: var(--c-fg, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .btnBlack:hover { background: transparent !important; color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .btnBlanc {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .btnBlanc:hover { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .btnPrimary, html.theme-dark .btnPrimaryFit {
    background: var(--c-brand, #ef5a4a) !important;
    color: #ffffff !important;
}

/* ============================================================================
   7. HEADER + footer + nav
   ============================================================================ */
html.theme-dark header,
html.theme-dark .header-app,
html.theme-dark .HeaderColinternet,
html.theme-dark .Headerdefault,
html.theme-dark nav.navbar,
html.theme-dark .topbar {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
    border-bottom: 1px solid var(--c-border, #1f2630);
}
html.theme-dark footer,
html.theme-dark .footer,
html.theme-dark .Footer,
html.theme-dark .FooterColinternet,
html.theme-dark .footer-app {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
    border-top: 1px solid var(--c-border, #1f2630);
}
html.theme-dark footer a, html.theme-dark .Footer a, html.theme-dark .footer a {
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark footer a:hover { color: var(--c-fg, #f7f8fa) !important; }

/* Mega menu + dropdowns */
html.theme-dark .MegaMenu,
html.theme-dark .MegaMenuGenerique,
html.theme-dark .MenuModeFam,
html.theme-dark .menu-dropdown,
html.theme-dark .dropdown-menu,
html.theme-dark .search-dropdown {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
    box-shadow: var(--sh-lg, 0 16px 32px rgba(0,0,0,0.55)) !important;
}
html.theme-dark .dropdown-item { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .ButtonMenu, html.theme-dark .CloseNav, html.theme-dark .OpenNav {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   8. CATALOGUE / PRODUCT CARDS
   ============================================================================ */
html.theme-dark .card-product__media,
html.theme-dark .product-card .product-image,
html.theme-dark .ImagePromo {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .card-product__title,
html.theme-dark .card-product__price,
html.theme-dark .product-name,
html.theme-dark .product-title {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .card-product__meta,
html.theme-dark .product-meta,
html.theme-dark .product-ref,
html.theme-dark .product-code {
    color: var(--c-fg-subtle, #8b95a7) !important;
}

/* Stock badges */
html.theme-dark .stock-available, html.theme-dark .badge-success,
html.theme-dark .bg-success, html.theme-dark .bg-sccess {
    background: var(--c-success-soft, #052e16) !important;
    color: var(--c-success-fg, #4ade80) !important;
}
html.theme-dark .stock-low, html.theme-dark .badge-warning {
    background: var(--c-warning-soft, #422006) !important;
    color: var(--c-warning-fg, #fbbf24) !important;
}
html.theme-dark .stock-unavailable, html.theme-dark .badge-danger {
    background: var(--c-danger-soft, #450a0a) !important;
    color: var(--c-danger-fg, #f87171) !important;
}
html.theme-dark .badge-info, html.theme-dark .bg-info {
    background: var(--c-info-soft, #172554) !important;
    color: var(--c-info-fg, #60a5fa) !important;
}

/* Filters / attributes panel */
html.theme-dark .attr-group,
html.theme-dark .attr-group-body,
html.theme-dark .attr-header,
html.theme-dark .attr-option,
html.theme-dark .attr-active-tags,
html.theme-dark .attr-checkbox-list,
html.theme-dark .attr-tag {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .attr-option:hover { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .attr-tag { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .attr-tag-close { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .attr-cb {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .attr-cb:checked {
    background: var(--c-accent, #f7f8fa) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
}
html.theme-dark .attr-title, html.theme-dark .attr-group-label {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   9. DETAIL ARTICLE / FICHE
   ============================================================================ */
html.theme-dark .DetailArticle,
html.theme-dark .article-detail,
html.theme-dark .fiche-article,
html.theme-dark .ProdCons,
html.theme-dark .arrivage,
html.theme-dark .ajoutePanier,
html.theme-dark .ajoutePanierOther,
html.theme-dark .TextPromo,
html.theme-dark .TextLine,
html.theme-dark .addP {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ============================================================================
   10. PANIER + commande
   ============================================================================ */
html.theme-dark .panier-item,
html.theme-dark .commande-line,
html.theme-dark .cart-line,
html.theme-dark .order-line,
html.theme-dark .OrderList,
html.theme-dark .Order,
html.theme-dark .articleInfo {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .FrancoOk { color: var(--c-success-fg, #4ade80) !important; }
html.theme-dark .FrancoKo { color: var(--c-danger-fg, #f87171) !important; }

/* ============================================================================
   11. FAVORIS sidebar
   ============================================================================ */
html.theme-dark .SideBarFav,
html.theme-dark .SideBarFavOpen,
html.theme-dark .SideBarFavListe,
html.theme-dark .SideBarFavListeOpen {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ============================================================================
   12. TABLES — Bootstrap + custom
   ============================================================================ */
html.theme-dark table, html.theme-dark .table {
    color: var(--c-fg, #f7f8fa);
    background: var(--c-bg-elevated, #11161e);
}
html.theme-dark .table thead th, html.theme-dark table thead th {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
    border-bottom: 1px solid var(--c-border, #1f2630) !important;
}
html.theme-dark .table tbody tr:hover td,
html.theme-dark table tbody tr:hover td {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .table tbody td, html.theme-dark table tbody td {
    border-top: 1px solid var(--c-border-muted, #161b22) !important;
}
html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   13. MODALS + popups
   ============================================================================ */
html.theme-dark .modal-content,
html.theme-dark .blazor-modal-body,
html.theme-dark .popup,
html.theme-dark .popup > div,
html.theme-dark .popup-content,
html.theme-dark .popup-body {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .modal-header, html.theme-dark .modal-footer {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-border-muted, #161b22) !important;
}
html.theme-dark .modal-backdrop { background: rgba(0,0,0,0.75) !important; }
html.theme-dark .rz-dialog {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
}
html.theme-dark .rz-dialog-titlebar {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-bottom: 1px solid var(--c-border-muted, #161b22) !important;
}
html.theme-dark .rz-dialog-mask { background: rgba(0,0,0,0.7) !important; }

/* ============================================================================
   14. ALERTS
   ============================================================================ */
html.theme-dark .alert-success {
    background: var(--c-success-soft, #052e16) !important;
    color: var(--c-success-fg, #4ade80) !important;
    border-color: var(--c-success, #22c55e) !important;
}
html.theme-dark .alert-info {
    background: var(--c-info-soft, #172554) !important;
    color: var(--c-info-fg, #60a5fa) !important;
    border-color: var(--c-info, #3b82f6) !important;
}
html.theme-dark .alert-warning {
    background: var(--c-warning-soft, #422006) !important;
    color: var(--c-warning-fg, #fbbf24) !important;
    border-color: var(--c-warning, #f59e0b) !important;
}
html.theme-dark .alert-danger {
    background: var(--c-danger-soft, #450a0a) !important;
    color: var(--c-danger-fg, #f87171) !important;
    border-color: var(--c-danger, #ef4444) !important;
}
html.theme-dark .Alert {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ============================================================================
   15. CONNEXION / INSCRIPTION (auth pages)
   ============================================================================ */
html.theme-dark #ConnexionPage,
html.theme-dark #InscriptionPage,
html.theme-dark .blurConnexion,
html.theme-dark .ConnexionRetour {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
}
html.theme-dark #ConnexionPage label,
html.theme-dark #InscriptionPage label { color: var(--c-fg-muted, #c8d0dd) !important; }

/* ============================================================================
   16. NEWSLETTER + promo blocks
   ============================================================================ */
html.theme-dark .newsletter,
html.theme-dark .banniere,
html.theme-dark .BestOfNew,
html.theme-dark .bandeau,
html.theme-dark .BandeauHaut {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
}

/* ============================================================================
   17. PAGINATION
   ============================================================================ */
html.theme-dark .BlazorNavigation_pagination,
html.theme-dark .BlazorNavigation_PageNavigation,
html.theme-dark .pagination {
    background: transparent !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .BlazorNavigation_pagination_Item,
html.theme-dark .page-item .page-link {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .BlazorNavigation_pagination_Item:hover,
html.theme-dark .page-link:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .BlazorNavigation_pagination_Item.actif,
html.theme-dark .BlazorNavigation_pagination_Item.active,
html.theme-dark .page-item.active .page-link {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
}

/* ============================================================================
   18. PRE / CODE / KBD
   ============================================================================ */
html.theme-dark pre, html.theme-dark code, html.theme-dark kbd, html.theme-dark samp {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630);
}

/* ============================================================================
   19. CONTROLS — checkbox / radio / range / progress
   ============================================================================ */
html.theme-dark input[type="checkbox"], html.theme-dark input[type="radio"] {
    accent-color: var(--c-accent, #f7f8fa);
}
html.theme-dark progress {
    accent-color: var(--c-accent, #f7f8fa);
    background: var(--c-bg-subtle, #0d1117);
}
html.theme-dark input[type="range"] { accent-color: var(--c-accent, #f7f8fa); }

/* ============================================================================
   20. INLINE STYLE catch-all (last resort)
   ============================================================================ */
html.theme-dark [style*="background: white"],
html.theme-dark [style*="background:white"],
html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background: #ffffff"],
html.theme-dark [style*="background:#ffffff"],
html.theme-dark [style*="background-color: white"],
html.theme-dark [style*="background-color:white"],
html.theme-dark [style*="background-color: #fff"],
html.theme-dark [style*="background-color:#fff"],
html.theme-dark [style*="background-color: #ffffff"],
html.theme-dark [style*="background-color:#ffffff"] {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark [style*="color: black"],
html.theme-dark [style*="color:black"],
html.theme-dark [style*="color: #000"],
html.theme-dark [style*="color:#000"],
html.theme-dark [style*="color: #000000"],
html.theme-dark [style*="color:#000000"] {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   21. IMAGES — keep as-is but add subtle bg for transparent PNGs (logos)
   ============================================================================ */
html.theme-dark img.product-image,
html.theme-dark .card-product__media img,
html.theme-dark .product-card img {
    background: var(--c-bg-subtle, #0d1117);
}

/* ============================================================================
   22. SHADOWS — keep but tune
   ============================================================================ */
html.theme-dark .shadow,
html.theme-dark .shadow-sm,
html.theme-dark .shadow-md,
html.theme-dark .shadow-lg,
html.theme-dark .shadow-xl {
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset !important;
}

/* ============================================================================
   23. SVG icons — currentColor inheritance
   ============================================================================ */
html.theme-dark svg[fill="black"],
html.theme-dark svg[fill="#000"],
html.theme-dark svg[fill="#000000"] { fill: var(--c-fg, #f7f8fa); }
html.theme-dark svg[stroke="black"],
html.theme-dark svg[stroke="#000"],
html.theme-dark svg[stroke="#000000"] { stroke: var(--c-fg, #f7f8fa); }

/* ============================================================================
   24. SELECTION + scrollbars
   ============================================================================ */
html.theme-dark ::selection {
    background: var(--c-brand, #ef5a4a);
    color: #ffffff;
}
html.theme-dark ::-webkit-scrollbar {
    width: 12px; height: 12px;
}
html.theme-dark ::-webkit-scrollbar-track { background: var(--c-bg-subtle, #0d1117); }
html.theme-dark ::-webkit-scrollbar-thumb {
    background: var(--c-border-strong, #2d3744);
    border-radius: 6px;
    border: 3px solid var(--c-bg-subtle, #0d1117);
}
html.theme-dark ::-webkit-scrollbar-thumb:hover { background: var(--c-fg-faint, #5c6675); }

/* ============================================================================
   25. LINKS
   ============================================================================ */
html.theme-dark a {
    color: var(--c-info-fg, #60a5fa);
}
html.theme-dark a:hover { color: var(--c-fg, #f7f8fa); }
/* Don't recolor buttons-styled anchors */
html.theme-dark a.btn, html.theme-dark a.btnBlack, html.theme-dark a.btnBlanc,
html.theme-dark a.btnPrimary, html.theme-dark a.btnPrimaryFit, html.theme-dark a.bo-btn {
    color: inherit !important;
}

/* ============================================================================
   26. SPECIFIC RAZOR-CSS HARDCODED PATCHES
   ============================================================================ */
html.theme-dark .sort-dropdown,
html.theme-dark .recherche-dropdown,
html.theme-dark .search-results,
html.theme-dark .RetourPanier {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* MaterialIcons + rzi icons */
html.theme-dark .material-icons,
html.theme-dark .material-symbols-outlined,
html.theme-dark .rzi { color: inherit; }

/* ============================================================================
   27. RESPONSIVE — keep dark across breakpoints
   ============================================================================ */
@media (max-width: 768px) {
    html.theme-dark .NoMobile { display: none; }
}

/* ============================================================================
   28. PRINT — force light
   ============================================================================ */
@media print {
    html.theme-dark, html.theme-dark body {
        background: #ffffff !important; color: #000000 !important;
    }
    html.theme-dark * { background: #ffffff !important; color: #000000 !important; box-shadow: none !important; }
}

/* ============================================================================
   29. FORCED-COLORS (Windows high-contrast) — preserve system palette
   ============================================================================ */
@media (forced-colors: active) {
    html.theme-dark { forced-color-adjust: auto; }
}

/* ====================== public-dark-v2.css ====================== */
/* ============================================================================
   Public Dark Theme v2 — exhaustive sweep.

   Specifically targets:
   - Site-wide legacy vars (--CS_color-noir → readable in dark)
   - Every hover state w/ hardcoded gray/white background
   - Every button variant (.btn-*, .btnBlack, .btnBlanc, .btnPlusMoins,
     .btnAddPanier, .btnDisable, .btnModeAffichage, .btnDetail, .btn-action,
     .quantity-btn, .action-btn, .add-to-cart-btn)
   - Header nav hovers (user-info, action-btn)
   - Bootstrap remnants on Bootstrap dropdowns / modals / cards
   - Tenant overrides

   Loaded AFTER public-dark.css.
   ============================================================================ */

/* ============================================================================
   0. LEGACY CS_color-* var flip in dark mode
   ============================================================================ */
html.theme-dark {
    /* Keep white where it's used decoratively (on brand buttons) */
    --CS_color-blanc: #ffffff;
    /* Flip "black" — it's used heavily as default text color in site.css */
    --CS_color-noir: #f7f8fa;
    /* Mid-grey utility used in borders / placeholders → keep visible on dark */
    --CS_color-gris: #5c6675;
}

/* ============================================================================
   1. HEADER hovers
   ============================================================================ */
html.theme-dark .user-info:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .action-btn:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .search-btn:hover {
    background: var(--c-accent-hover, #1f2937) !important;
}
html.theme-dark .nav-link:hover {
    background: rgb(from var(--c-accent, #f7f8fa) r g b / 0.08) !important;
    color: var(--c-accent, #f7f8fa) !important;
}
html.theme-dark .menu-burger:hover,
html.theme-dark .OpenNav:hover,
html.theme-dark .CloseNav:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   2. BUTTONS — every variant we found in razor.css
   ============================================================================ */

/* +/- quantity buttons */
html.theme-dark .btnPlusMoins > div:first-child > div:first-child,
html.theme-dark .btnPlusMoins > div:first-child > div:last-child,
html.theme-dark .quantity-btn {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
html.theme-dark .btnPlusMoins > div:first-child > div:nth-child(2),
html.theme-dark .btnPlusMoins > div:last-child {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .quantity-btn.plus { color: var(--c-success-fg, #4ade80) !important; border-color: var(--c-success, #22c55e) !important; }
html.theme-dark .quantity-btn.minus { color: var(--c-danger-fg, #f87171) !important; border-color: var(--c-danger, #ef4444) !important; }

/* Add to cart / panier */
html.theme-dark .btnAddPanier,
html.theme-dark .add-to-cart-btn {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
html.theme-dark .btnAddPanier:hover,
html.theme-dark .add-to-cart-btn:hover {
    background: var(--c-accent-hover, #e4e7ec) !important;
    border-color: var(--c-accent-hover, #e4e7ec) !important;
    transform: translateY(-1px);
}

/* Disabled state */
html.theme-dark .btnDisable {
    background: var(--c-bg-muted, #161b22) !important;
    color: var(--c-fg-faint, #5c6675) !important;
    border-color: var(--c-border, #1f2630) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Mode affichage / Details switches */
html.theme-dark .btnModeAffichage,
html.theme-dark .btnDetail {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
}
html.theme-dark .btnModeAffichage:hover,
html.theme-dark .btnDetail:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .btnModeAffichage.active,
html.theme-dark .btnDetail.active {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
}

/* Generic action buttons */
html.theme-dark .btn-action {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .btn-action:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-fg-faint, #5c6675) !important;
}

/* ============================================================================
   3. INPUT GROUP hovers + chips + tags
   ============================================================================ */
html.theme-dark .cs-chip {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
}
html.theme-dark .cs-chip:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}

/* ============================================================================
   4. POPUP CS_PopupGenerique hover utilities (hardcoded Tailwind grays)
   ============================================================================ */
html.theme-dark .hover\:text-gray-600:hover { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .hover\:text-gray-700:hover { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .hover\:text-gray-800:hover { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .hover\:text-gray-900:hover { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .hover\:bg-gray-50:hover { background-color: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .hover\:bg-gray-100:hover { background-color: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .hover\:bg-gray-200:hover { background-color: var(--c-bg-muted, #161b22) !important; }
html.theme-dark .hover\:bg-slate-50:hover { background-color: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .hover\:bg-slate-100:hover { background-color: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .hover\:bg-white:hover { background-color: var(--c-bg-elevated, #11161e) !important; }
html.theme-dark .hover\:bg-red-50:hover { background-color: var(--c-danger-soft, #450a0a) !important; }
html.theme-dark .hover\:text-red-500:hover { color: var(--c-danger-fg, #f87171) !important; }
html.theme-dark .hover\:text-red-600:hover { color: var(--c-danger-fg, #f87171) !important; }
html.theme-dark .hover\:bg-green-50:hover { background-color: var(--c-success-soft, #052e16) !important; }
html.theme-dark .hover\:bg-blue-50:hover { background-color: var(--c-info-soft, #172554) !important; }
html.theme-dark .hover\:border-blue-500:hover { border-color: var(--c-info, #3b82f6) !important; }
html.theme-dark .hover\:shadow-md:hover, html.theme-dark .hover\:shadow-lg:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important;
}

/* ============================================================================
   5. ARTICLE DETAIL specific hovers
   ============================================================================ */
html.theme-dark .ArticleDetail .nav-tab,
html.theme-dark .DetailArticle .nav-tab {
    color: var(--c-fg-muted, #c8d0dd) !important;
    background: transparent !important;
}
html.theme-dark .ArticleDetail .nav-tab:hover,
html.theme-dark .DetailArticle .nav-tab:hover {
    color: var(--c-fg, #f7f8fa) !important;
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .ArticleDetail .nav-tab.active,
html.theme-dark .DetailArticle .nav-tab.active {
    color: var(--c-accent, #f7f8fa) !important;
    border-bottom-color: var(--c-accent, #f7f8fa) !important;
}

/* Image gallery thumbnails */
html.theme-dark .thumbnail, html.theme-dark .gallery-thumb {
    border: 1px solid var(--c-border, #1f2630);
    background: var(--c-bg-subtle, #0d1117);
}
html.theme-dark .thumbnail:hover, html.theme-dark .gallery-thumb:hover {
    border-color: var(--c-border-strong, #2d3744);
}
html.theme-dark .thumbnail.active, html.theme-dark .gallery-thumb.active {
    border-color: var(--c-accent, #f7f8fa) !important;
}

/* ============================================================================
   6. CATALOGUE specific hovers
   ============================================================================ */
html.theme-dark .product-card:hover,
html.theme-dark .card-product:hover,
html.theme-dark .listcard-default:hover,
html.theme-dark .listcard-modele1:hover,
html.theme-dark .listcard-modele2:hover,
html.theme-dark .listcard-modele3:hover,
html.theme-dark .listcard-modele4:hover {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important;
}

/* Pagination hovers */
html.theme-dark .BlazorNavigation_pagination_Item:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* Sort + view switch */
html.theme-dark .sort-dropdown:hover,
html.theme-dark .view-switch__btn:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   7. PANIER + Order rows hover
   ============================================================================ */
html.theme-dark .OrderList:hover,
html.theme-dark .Order:hover,
html.theme-dark .panier-item:hover,
html.theme-dark .commande-line:hover,
html.theme-dark .cart-line:hover,
html.theme-dark .order-line:hover,
html.theme-dark .articleInfo:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}

/* ============================================================================
   8. ATTRIBUTS filter panel hovers
   ============================================================================ */
html.theme-dark .attr-option:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .attr-clear-btn,
html.theme-dark .attr-clear-btn:hover {
    color: var(--c-danger-fg, #f87171) !important;
}
html.theme-dark .attr-tag-close:hover {
    color: var(--c-fg, #f7f8fa) !important;
    background: var(--c-bg-muted, #161b22) !important;
}

/* ============================================================================
   9. FOOTER + Copyright hovers
   ============================================================================ */
html.theme-dark .Copyright a:hover,
html.theme-dark footer a:hover {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   10. FAVORIS sidebar hovers
   ============================================================================ */
html.theme-dark .SideBarFav:hover,
html.theme-dark .SideBarFavOpen .articleFavoris:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
}

/* ============================================================================
   11. MEGA MENU hovers
   ============================================================================ */
html.theme-dark .MegaMenu a:hover,
html.theme-dark .MegaMenuGenerique a:hover,
html.theme-dark .MenuModeFam a:hover,
html.theme-dark .MegaMenu .menu-item:hover,
html.theme-dark .menu-item:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   12. BOOTSTRAP utility hovers
   ============================================================================ */
html.theme-dark .btn:hover,
html.theme-dark .btn-light:hover,
html.theme-dark .btn-secondary:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .btn-primary:hover {
    background: var(--c-accent-hover, #e4e7ec) !important;
}
html.theme-dark .btn-dark:hover {
    background: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark .btn-link:hover {
    color: var(--c-info-fg, #60a5fa) !important;
}
html.theme-dark .nav-link.active,
html.theme-dark .nav-tabs .nav-link.active,
html.theme-dark .nav-pills .nav-link.active {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
}

/* ============================================================================
   13. RADZEN HtmlEditor + DataGrid + Tabs (public side)
   ============================================================================ */
html.theme-dark .rz-button:hover { filter: brightness(1.08); }
html.theme-dark .rz-html-editor-content { background: var(--c-bg-elevated, #11161e) !important; color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .rz-data-grid tbody tr:hover td {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .rz-pager .rz-paginator-element:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   14. GREYS — refine the most common gray shades to match palette
   ============================================================================ */
html.theme-dark .bg-gray-200, html.theme-dark .bg-slate-200 { background-color: var(--c-bg-muted, #161b22) !important; }
html.theme-dark .bg-gray-300, html.theme-dark .bg-slate-300 { background-color: var(--c-border, #1f2630) !important; }
html.theme-dark .bg-gray-700 { background-color: var(--c-bg-elevated, #11161e) !important; }
html.theme-dark .bg-gray-800 { background-color: var(--c-bg-subtle, #0d1117) !important; }

html.theme-dark .border-gray-100, html.theme-dark .border-slate-100 { border-color: var(--c-border-muted, #161b22) !important; }
html.theme-dark .border-gray-400, html.theme-dark .border-slate-400 { border-color: var(--c-border-strong, #2d3744) !important; }
html.theme-dark .border-gray-500, html.theme-dark .border-slate-500 { border-color: var(--c-fg-faint, #5c6675) !important; }

/* ============================================================================
   15. RING / outline focus (Tailwind)
   ============================================================================ */
html.theme-dark .ring, html.theme-dark .ring-1, html.theme-dark .ring-2 {
    --tw-ring-color: var(--c-fg-subtle, #8b95a7);
}
html.theme-dark .ring-blue-500 { --tw-ring-color: var(--c-info, #3b82f6) !important; }
html.theme-dark .ring-slate-200 { --tw-ring-color: var(--c-border-strong, #2d3744) !important; }
html.theme-dark .focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45) !important; }
html.theme-dark .focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18) !important; }

/* ============================================================================
   16. MON COMPTE specific (Tailwind heavy)
   ============================================================================ */
html.theme-dark .bg-slate-50 { background-color: var(--c-bg, #07090e) !important; }
html.theme-dark aside.bg-white,
html.theme-dark .MonCompte aside {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .MonCompte .text-slate-800,
html.theme-dark .MonCompte .text-slate-700 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .MonCompte button:hover { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .text-slate-400 { color: var(--c-fg-faint, #5c6675) !important; }

/* MonCompte sidebar active button — kept Tailwind classes; force readability */
html.theme-dark .bg-slate-100 { background-color: var(--c-bg-subtle, #0d1117) !important; }

/* ============================================================================
   17. AUTH (Connexion / Inscription) hovers
   ============================================================================ */
html.theme-dark #ConnexionPage button:hover,
html.theme-dark #InscriptionPage button:hover { filter: brightness(1.1); }
html.theme-dark #ConnexionPage input:hover,
html.theme-dark #InscriptionPage input:hover {
    border-color: var(--c-border-strong, #2d3744) !important;
}

/* ============================================================================
   18. TABLE + Bootstrap striped hovers (DON'T forget)
   ============================================================================ */
html.theme-dark .table-hover > tbody > tr:hover > * {
    background-color: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ============================================================================
   19. SHADOW utilities — refined for dark
   ============================================================================ */
html.theme-dark .shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; }
html.theme-dark .shadow     { box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.02) inset !important; }
html.theme-dark .shadow-md  { box-shadow: 0 4px 12px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.03) inset !important; }
html.theme-dark .shadow-lg  { box-shadow: 0 12px 24px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset !important; }
html.theme-dark .shadow-xl  { box-shadow: 0 24px 48px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.04) inset !important; }
html.theme-dark .shadow-2xl { box-shadow: 0 36px 72px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05) inset !important; }

/* ============================================================================
   20. ANCHOR / LINK hovers — Bootstrap utility links
   ============================================================================ */
html.theme-dark .link-primary { color: var(--c-info-fg, #60a5fa) !important; }
html.theme-dark .link-primary:hover { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .link-dark { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .link-dark:hover { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .link-secondary { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .link-secondary:hover { color: var(--c-fg, #f7f8fa) !important; }

/* ============================================================================
   21. EXTRA fixes — known hardcoded patterns from grep audit
   ============================================================================ */
html.theme-dark .filtersClosed, html.theme-dark .FiltersClosed,
html.theme-dark .FiltersOpen {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .Search,
html.theme-dark .recherche-bar,
html.theme-dark .search-bar {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .Search input,
html.theme-dark .search-bar input {
    background: transparent !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .IconeTop,
html.theme-dark .RetourTop {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .IconeTop:hover,
html.theme-dark .RetourTop:hover {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}

/* ============================================================================
   22. TENANT CSS — AubryGaspard / Fomax (white backgrounds)
   ============================================================================ */
html.theme-dark .container-fluid#home-slider { background: var(--c-bg, #07090e); }
html.theme-dark #home-slider h1, html.theme-dark #home-slider h2 { color: #ffffff; }
html.theme-dark .titreSite { color: #ffffff !important; }

/* ============================================================================
   23. DROPDOWN-ARROW + chevrons recolor
   ============================================================================ */
html.theme-dark .dropdown-arrow,
html.theme-dark .attr-chevron,
html.theme-dark .nav-item .chevron,
html.theme-dark .user-pill__caret {
    color: var(--c-fg-muted, #c8d0dd) !important;
}

/* ============================================================================
   24. ACTIVE / SELECTED tonal pills (e.g. category, filter active)
   ============================================================================ */
html.theme-dark .active,
html.theme-dark .selected {
    /* careful — only apply when used on isolated buttons */
}
html.theme-dark button.actif,
html.theme-dark .filter-active,
html.theme-dark .tag.active {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
}

/* ============================================================================
   25. SMOOTH theme transitions everywhere (gentle, non-jarring)
   ============================================================================ */
html.theme-dark *, html.theme-dark *::before, html.theme-dark *::after {
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    html.theme-dark *, html.theme-dark *::before, html.theme-dark *::after {
        transition: none !important;
    }
}
/* Exclude transition spam on things that already animate (cards, modals on enter) */
html.theme-dark .modal-content, html.theme-dark .modal-backdrop,
html.theme-dark .menu-dropdown { transition: none !important; }

/* ============================================================================
   26. HR + dividers
   ============================================================================ */
html.theme-dark hr { border-color: var(--c-border-muted, #161b22) !important; opacity: 1; }

/* ============================================================================
   27. ENSURE BO toggle remains usable in BO context
   ============================================================================ */
html.bo-theme-dark .bo-app .bo-btn,
html.theme-dark .bo-app .bo-btn {
    background: var(--bo-surface, #1a1f29) !important;
    color: var(--bo-text-strong, #ffffff) !important;
    border-color: var(--bo-border-strong, #3f485a) !important;
}
html.bo-theme-dark .bo-app .bo-btn:hover,
html.theme-dark .bo-app .bo-btn:hover {
    background: var(--bo-surface-hover, #262d38) !important;
}

/* ============================================================================
   28. CHECKBOX / RADIO custom styling (Bootstrap form-check)
   ============================================================================ */
html.theme-dark .form-check-input {
    background-color: var(--c-bg-elevated, #11161e);
    border-color: var(--c-border-strong, #2d3744);
}
html.theme-dark .form-check-input:checked {
    background-color: var(--c-accent, #f7f8fa);
    border-color: var(--c-accent, #f7f8fa);
}
html.theme-dark .form-check-label { color: var(--c-fg, #f7f8fa); }

/* ============================================================================
   29. BREADCRUMB / Crumb hovers
   ============================================================================ */
html.theme-dark .Breadcrumbs a,
html.theme-dark .breadcrumb-item a {
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark .Breadcrumbs a:hover,
html.theme-dark .breadcrumb-item a:hover {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .breadcrumb-item.active,
html.theme-dark .breadcrumb-item.active span { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .breadcrumb { background: transparent !important; }

/* ============================================================================
   30. FIX text on hover for product cards (titles stay readable)
   ============================================================================ */
html.theme-dark .product-card:hover .product-name,
html.theme-dark .product-card:hover .product-title,
html.theme-dark .card-product:hover .card-product__title,
html.theme-dark .listcard-default:hover .product-name {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ====================== public-dark-v3.css ====================== */
/* ============================================================================
   Public Dark Theme v3 — targeted patches for every reported issue.
   Loaded LAST in _Layout.cshtml so its `!important` overrides win.

   Sections:
     1.  Catalogue results bar + filter chips + view switch + pagination
     2.  Inline filters aside (Filtres)
     3.  "Voir tout" CTA + slate-900 buttons + slate-800/700 tonal gradients
     4.  Product image white tile (catalogue card)
     5.  Mon panier + gradient headers
     6.  BoutonsCheckbox (cbx-*) — full dark variant
     7.  Catégories sidebar header
     8.  Mon Compte → Adresses (livraison cards w/ gray-700→gray-900 headers)
     9.  Mon Commercial cards + Conditions
     10. Mes commandes / Mes factures / Mes litiges (slate-50/white tonal cards)
     11. Cart-line hover + stepper indicator (slate-800 dot, ring)
     12. Statistiques (charts text + grid + tooltip + legend)
     13. Franco success / emerald badges
     14. Generic Tailwind tonal gradients (from-white to-slate-50, from-gray-50, etc.)
     15. Pagination active state
     16. Edge cases: amber alerts, yellow text, indigo focus rings, info pills
   ============================================================================ */

/* ===== 1. CATALOGUE RESULTS BAR ================================== */
/* Pattern: bg-gray-50/60, text-gray-800/500/400, border-gray-100, border-b */
html.theme-dark .bg-gray-50\/60,
html.theme-dark [class*="bg-gray-50\\/"] {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .border-b.border-gray-100 {
    border-bottom-color: var(--c-border-muted, #161b22) !important;
}
html.theme-dark .border-gray-100,
html.theme-dark .border-gray-200,
html.theme-dark .border-gray-300,
html.theme-dark .border-slate-100,
html.theme-dark .border-slate-200,
html.theme-dark .border-slate-300 {
    border-color: var(--c-border, #1f2630) !important;
}
/* Results-bar count text */
html.theme-dark .text-gray-800, html.theme-dark .text-slate-800,
html.theme-dark .font-semibold.text-gray-800 {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .text-gray-700, html.theme-dark .text-slate-700 { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .text-gray-500, html.theme-dark .text-slate-500 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .text-gray-400, html.theme-dark .text-slate-400 { color: var(--c-fg-faint, #5c6675) !important; }

/* Filtres button + select (results bar) */
html.theme-dark button.border.border-gray-300.bg-white,
html.theme-dark .border-gray-300.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark button.border.border-gray-300.bg-white:hover,
html.theme-dark .border-gray-300.bg-white:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark select.border-gray-200.bg-white,
html.theme-dark select.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* View switch (grid/list) inactive buttons */
html.theme-dark .border.border-gray-200.bg-white.rounded-lg.p-0\.5,
html.theme-dark [role="group"].bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
/* Active dark pill */
html.theme-dark button.bg-gray-900.text-white,
html.theme-dark .bg-gray-900.text-white {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}
/* Inactive view buttons */
html.theme-dark .text-gray-400.hover\:text-gray-600 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .text-gray-400.hover\:text-gray-600:hover { color: var(--c-fg, #f7f8fa) !important; }
/* Vertical divider in view switch */
html.theme-dark .w-px.h-4.bg-gray-200 { background: var(--c-border, #1f2630) !important; }

/* Pagination */
html.theme-dark nav.flex.flex-wrap button.border.border-gray-300.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark nav.flex.flex-wrap button.border.border-gray-300.bg-white:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
/* Pagination active page */
html.theme-dark .bg-gray-600.border-gray-600.text-white {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
}
/* Per-page select */
html.theme-dark select.form-select.border-gray-300 {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ===== 2. INLINE FILTERS ASIDE =================================== */
html.theme-dark .inline-filters-aside {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .inline-filters-header {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-bottom: 1px solid var(--c-border-muted, #161b22);
}
html.theme-dark .inline-filters-header h3.text-gray-900 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .inline-filters-icon { background: var(--c-bg-elevated, #11161e) !important; color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .inline-filters-aside button.text-gray-400.hover\:text-gray-700 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .inline-filters-aside button.text-gray-400.hover\:text-gray-700:hover {
    color: var(--c-fg, #f7f8fa) !important;
    background: var(--c-bg-muted, #161b22) !important;
}

/* Already covered attr-* in v1; reinforce here */
html.theme-dark .attr-group,
html.theme-dark .attr-group-header,
html.theme-dark .attr-group-body { background: transparent !important; color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .attr-group-header { background: var(--c-bg-elevated, #11161e) !important; }
html.theme-dark .attr-group-header:hover { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .attr-option:hover { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .attr-option-count { color: var(--c-fg-subtle, #8b95a7) !important; }

/* ===== 3. "VOIR TOUT" + slate-900 CTA buttons ==================== */
html.theme-dark button.bg-gray-900,
html.theme-dark .bg-gray-900.hover\:bg-gray-800,
html.theme-dark button.bg-slate-900,
html.theme-dark .bg-slate-900.hover\:bg-slate-800 {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-accent, #f7f8fa) !important;
}
html.theme-dark button.bg-gray-900:hover,
html.theme-dark .bg-gray-900.hover\:bg-gray-800:hover,
html.theme-dark button.bg-slate-900:hover,
html.theme-dark .bg-slate-900.hover\:bg-slate-800:hover {
    background: var(--c-accent-hover, #e4e7ec) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}
/* Force white text override (\!text-white in HTML — !important applies) */
html.theme-dark .bg-gray-900.\!text-white,
html.theme-dark .bg-slate-900.\!text-white {
    color: var(--c-fg-inverse, #0b1220) !important;
}
/* Same family: from-gray-700/800/900 → from-slate-700/800/900 gradients */
html.theme-dark .from-gray-700.to-gray-900,
html.theme-dark .from-slate-700.to-slate-900,
html.theme-dark .from-slate-800.to-slate-900,
html.theme-dark .from-gray-800.to-gray-900,
html.theme-dark [class*="from-gray-7"][class*="to-gray-9"],
html.theme-dark [class*="from-slate-7"][class*="to-slate-9"] {
    background: linear-gradient(135deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-muted, #161b22) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
/* Slate-800 dot (stepper "Panier") */
html.theme-dark .bg-slate-800 {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .ring-slate-800\/10 { --tw-ring-color: rgba(247, 248, 250, 0.1) !important; }
html.theme-dark .shadow-slate-800\/30 { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; }
html.theme-dark .shadow-slate-500\/30 { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important; }

/* ===== 4. PRODUCT IMAGE WHITE TILE ============================== */
html.theme-dark .relative.flex.items-center.justify-center.overflow-hidden.bg-white,
html.theme-dark [class*="bg-white"][class*="p-2"][class*="h-\["] {
    background: var(--c-bg-muted, #161b22) !important;
}
/* All `.bg-white` already covered — but for image tile we want a darker shade to avoid blowing out PNGs */
html.theme-dark .bg-white.p-2 { background: #f1f5f9 !important; }   /* keep tile bright for product photo legibility */
/* Override if user added catalogue card image bg */
html.theme-dark .bg-white[class*="h-[140px]"],
html.theme-dark .bg-white[class*="h-[160px]"] { background: #ffffff !important; }

/* ===== 5. MON PANIER + gradient headers ========================== */
html.theme-dark .from-gray-50.to-gray-100,
html.theme-dark .from-slate-50.to-slate-100,
html.theme-dark [class*="from-gray-50"][class*="to-gray-100"],
html.theme-dark [class*="from-slate-50"][class*="to-slate-100"] {
    background: linear-gradient(90deg, var(--c-bg-elevated, #11161e) 0%, var(--c-bg-subtle, #0d1117) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .from-gray-50.to-white,
html.theme-dark .from-slate-50.to-white,
html.theme-dark [class*="from-gray-50"][class*="to-white"] {
    background: linear-gradient(90deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-elevated, #11161e) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .from-white.to-slate-50,
html.theme-dark [class*="from-white"][class*="to-slate-50"] {
    background: linear-gradient(135deg, var(--c-bg-elevated, #11161e) 0%, var(--c-bg-subtle, #0d1117) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .font-bold.text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 6. BoutonsCheckbox — cbx-* full dark variant =============== */
html.theme-dark .cbx-tiers {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .cbx-tier {
    border-bottom-color: var(--c-border-muted, #161b22) !important;
    color: var(--c-fg, #f7f8fa);
}
html.theme-dark .cbx-tier:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .cbx-tier--active {
    background: linear-gradient(90deg, rgba(99,102,241,0.16) 0%, rgba(34,197,94,0.12) 100%) !important;
}
html.theme-dark .cbx-tier--active:hover {
    background: linear-gradient(90deg, rgba(99,102,241,0.22) 0%, rgba(34,197,94,0.18) 100%) !important;
}
html.theme-dark .cbx-radio {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .cbx-radio--on {
    border-color: #818cf8 !important;
    background: var(--c-bg-elevated, #11161e) !important;
    box-shadow: 0 0 0 1px rgba(129,140,248,0.30) !important;
}
html.theme-dark .cbx-radio-dot { background: #818cf8 !important; }
html.theme-dark .cbx-tier-label { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .cbx-tier-sep   { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .cbx-tier-price { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .cbx-tier-price--active { color: #a5b4fc !important; }
html.theme-dark .cbx-tier-price-old { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark .cbx-tier-price-new { color: #fca5a5 !important; }
html.theme-dark .cbx-tier-badge {
    background: linear-gradient(135deg, #ec4899 0%, #be123c 100%) !important;
    color: #ffffff !important;
}

/* Qty row */
html.theme-dark .cbx-qty-row {
    background: linear-gradient(135deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-muted, #161b22) 100%) !important;
    border-color: var(--c-border, #1f2630) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
html.theme-dark .cbx-qty-btn-minus {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}
html.theme-dark .cbx-qty-btn-minus:hover:not(:disabled) {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .cbx-qty-btn-minus:disabled {
    background: transparent !important;
    color: var(--c-fg-faint, #5c6675) !important;
}
html.theme-dark .cbx-qty-btn-plus {
    background: linear-gradient(135deg, #ffffff 0%, #c8d0dd 100%) !important;
    color: #0b1220 !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
html.theme-dark .cbx-qty-btn-plus:hover {
    background: linear-gradient(135deg, #ffffff 0%, #b6bcc6 100%) !important;
}
html.theme-dark .cbx-qty-input { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .cbx-qty-input:focus { color: #a5b4fc !important; }

/* Summary bar */
html.theme-dark .cbx-summary {
    background: linear-gradient(135deg, rgba(34,197,94,0.10) 0%, rgba(22,163,74,0.16) 100%) !important;
    border-color: rgba(34,197,94,0.30) !important;
}
html.theme-dark .cbx-summary-label { color: #6ee7b7 !important; }
html.theme-dark .cbx-summary-icon  { color: #4ade80 !important; }
html.theme-dark .cbx-summary-remise { color: #6ee7b7 !important; background: rgba(16,185,129,0.18) !important; }
html.theme-dark .cbx-summary-total  { color: #86efac !important; }

/* Promo / pvp */
html.theme-dark .cbx-price-info {
    background: linear-gradient(135deg, rgba(234,179,8,0.10) 0%, rgba(202,138,4,0.16) 100%) !important;
    border-color: rgba(234,179,8,0.30) !important;
}
html.theme-dark .cbx-promo-old { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark .cbx-promo-new { color: #fca5a5 !important; }
html.theme-dark .cbx-promo-arrow { color: #fbbf24 !important; }
html.theme-dark .cbx-pvp-label { color: #fcd34d !important; }
html.theme-dark .cbx-pvp-value { color: #fde68a !important; }

html.theme-dark .cbx-loading-dot { background: var(--c-border-strong, #2d3744) !important; }

html.theme-dark .cbx-login-btn {
    background: linear-gradient(135deg, #ffffff 0%, #c8d0dd 100%) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    box-shadow: 0 4px 14px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
html.theme-dark .cbx-login-btn:hover {
    background: linear-gradient(135deg, #ffffff 0%, #b6bcc6 100%) !important;
    box-shadow: 0 6px 20px rgba(255,255,255,0.14) !important;
}

/* ===== 7. CATÉGORIES sidebar header =============================== */
/* Pattern: rounded-t-lg bg-gradient-to-r from-gray-50 to-white text-gray-800 */
html.theme-dark .from-gray-50.to-white h2,
html.theme-dark [class*="from-gray-50"][class*="to-white"] h2 {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .text-\[var\(--CS_color1\)\] { color: var(--c-brand, #ef5a4a) !important; }

/* ===== 8. MON COMPTE → Adresses livraison cards =================== */
/* Wrapper: from-white to-slate-50 + border-slate-200 */
html.theme-dark #CompteAdresses .border-slate-200,
html.theme-dark #CompteCommercial .border-slate-200 {
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark #CompteAdresses .border-2.border-slate-200,
html.theme-dark #CompteCommercial .border-2.border-slate-200 {
    border-color: var(--c-border-strong, #2d3744) !important;
}

/* Gradient header bar (gray-700→gray-900) — already covered above, ensure text-white stays white */
html.theme-dark #CompteAdresses .from-gray-700.to-gray-900 h3,
html.theme-dark #CompteAdresses .from-gray-700.to-gray-900 h2,
html.theme-dark #CompteCommercial .from-gray-700.to-gray-900 h3,
html.theme-dark #CompteCommercial .from-gray-700.to-gray-900 h2,
html.theme-dark .from-gray-700.to-gray-900 h2.text-white,
html.theme-dark .from-gray-700.to-gray-900 h3.text-white {
    color: var(--c-fg, #f7f8fa) !important;
}

/* Label text (slate-700 strong) */
html.theme-dark #CompteAdresses label.text-slate-700,
html.theme-dark #CompteCommercial label.text-slate-700 { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Read-only inputs */
html.theme-dark #CompteAdresses input[readonly],
html.theme-dark #CompteCommercial input[readonly] {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .bg-slate-50 { background-color: var(--c-bg-subtle, #0d1117) !important; }

/* Map container */
html.theme-dark .bg-slate-100 { background-color: var(--c-bg-muted, #161b22) !important; }
html.theme-dark [id^="mapAG"] { background: var(--c-bg-muted, #161b22) !important; filter: brightness(0.85) contrast(0.95); }

/* Amber alert at bottom — keep semantic */
html.theme-dark .bg-amber-50 {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}
html.theme-dark .border-amber-200, html.theme-dark .border-amber-400 {
    border-color: rgba(251, 191, 36, 0.4) !important;
}
html.theme-dark .text-amber-600, html.theme-dark .text-amber-700, html.theme-dark .text-amber-800,
html.theme-dark .text-amber-900 { color: #fcd34d !important; }
html.theme-dark .text-amber-500 { color: #fbbf24 !important; }

/* yellow-300 SVG star in card header — keep visible */
html.theme-dark .text-yellow-300 { color: #fcd34d !important; }

/* ===== 9. MON COMMERCIAL + Conditions ============================ */
html.theme-dark #CompteCommercial a[href^="mailto:"] {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: #c4b5fd !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark #CompteCommercial a[href^="mailto:"]:hover {
    background: var(--c-bg-muted, #161b22) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark #CompteCommercial .text-purple-600 { color: #c4b5fd !important; }

/* Action buttons (Appeler / Email) — keep semantic colors visible */
html.theme-dark .from-green-500.to-green-600,
html.theme-dark .from-green-600.to-green-700 {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
}
html.theme-dark .from-purple-500.to-purple-600,
html.theme-dark .from-purple-600.to-purple-700 {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
}

/* Conditions sub-cards (white) */
html.theme-dark #CompteCommercial .bg-white.rounded-xl.border.border-slate-200,
html.theme-dark .bg-white.rounded-xl.border-slate-200 {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark #CompteCommercial dl dt.text-slate-500 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark #CompteCommercial dl dd.text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark #CompteCommercial .text-slate-400 { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark .bg-slate-50.rounded-lg { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .border-slate-100 { border-color: var(--c-border-muted, #161b22) !important; }

/* ===== 10. MES COMMANDES / FACTURES / LITIGES (shared) ============ */
html.theme-dark #Mescommandes, html.theme-dark #Mesfactures, html.theme-dark #Meslitiges,
html.theme-dark #Mescommandes *, html.theme-dark #Mesfactures *, html.theme-dark #Meslitiges * {
    border-color: var(--c-border, #1f2630);
}
html.theme-dark .bg-white.rounded-xl.shadow-lg,
html.theme-dark .bg-white.rounded-lg.shadow-lg,
html.theme-dark .bg-white.rounded-xl.shadow-sm,
html.theme-dark .bg-white.rounded-lg.shadow-sm,
html.theme-dark .bg-white.shadow {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ===== 11. CART LINE hover + stepper avatar ====================== */
/* Cart line container with hover:bg-slate-50/80 */
html.theme-dark .hover\:bg-slate-50\/80:hover,
html.theme-dark [class*="hover\\:bg-slate-50"]:hover {
    background: rgba(13, 17, 23, 0.6) !important;
}
html.theme-dark .border-slate-100 { border-color: var(--c-border-muted, #161b22) !important; }

/* Stepper avatar (Panier dot) — slate-800 ring */
html.theme-dark .ring-4.ring-slate-800\/10 {
    --tw-ring-color: rgba(247, 248, 250, 0.10) !important;
    box-shadow: 0 0 0 4px rgba(247, 248, 250, 0.10) !important;
}
/* Cart row image bg-white */
html.theme-dark .relative.w-24.h-24.bg-white,
html.theme-dark .relative.w-28.h-28.bg-white,
html.theme-dark [class*="w-24"][class*="h-24"].bg-white,
html.theme-dark [class*="w-28"][class*="h-28"].bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .group:hover .border-slate-200,
html.theme-dark .group:hover .group-hover\:border-slate-400:hover {
    border-color: var(--c-border-strong, #2d3744) !important;
}

/* Inline code chip in cart lines */
html.theme-dark code.bg-slate-100,
html.theme-dark code.bg-gray-100 {
    background: var(--c-bg-muted, #161b22) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
}

/* Slate-300 separator dot */
html.theme-dark .text-slate-300 { color: var(--c-fg-faint, #5c6675) !important; }

/* ===== 12. STATISTIQUES (charts colors) ========================== */
/* Chart text labels — ApexCharts injects inline styles; target via stronger CSS */
html.theme-dark .apexcharts-text tspan,
html.theme-dark .apexcharts-legend-text,
html.theme-dark .apexcharts-yaxis-label,
html.theme-dark .apexcharts-xaxis-label,
html.theme-dark .apexcharts-title-text,
html.theme-dark .apexcharts-datalabel,
html.theme-dark .apexcharts-tooltip-title,
html.theme-dark .apexcharts-tooltip-text,
html.theme-dark .apexcharts-yaxis text,
html.theme-dark .apexcharts-xaxis text {
    fill: var(--c-fg, #f7f8fa) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .apexcharts-gridline,
html.theme-dark .apexcharts-grid line {
    stroke: var(--c-border, #1f2630) !important;
}
html.theme-dark .apexcharts-tooltip {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
html.theme-dark .apexcharts-tooltip-title {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-bottom-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .apexcharts-menu {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .apexcharts-menu-item:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .apexcharts-toolbar svg,
html.theme-dark .apexcharts-menu-icon svg,
html.theme-dark .apexcharts-zoom-icon svg,
html.theme-dark .apexcharts-reset-icon svg {
    fill: var(--c-fg-muted, #c8d0dd) !important;
}

/* Generic Chart.js / native canvas containers — keep canvas as-is but elevate wrapper */
html.theme-dark .stat-card, html.theme-dark .stat-chart, html.theme-dark .chart-container {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 13. EMERALD success + amber + indigo + rose ============== */
html.theme-dark .bg-emerald-50, html.theme-dark .from-emerald-50, html.theme-dark .to-emerald-50 {
    background: rgba(16,185,129,0.10) !important;
}
html.theme-dark .border-emerald-200, html.theme-dark .border-emerald-300 {
    border-color: rgba(16,185,129,0.35) !important;
}
html.theme-dark .text-emerald-500, html.theme-dark .text-emerald-600 { color: #6ee7b7 !important; }
html.theme-dark .text-emerald-700, html.theme-dark .text-emerald-800, html.theme-dark .text-emerald-900 { color: #a7f3d0 !important; }

html.theme-dark .bg-green-50, html.theme-dark .from-green-50, html.theme-dark .to-green-50 {
    background: rgba(34,197,94,0.10) !important;
}
html.theme-dark .border-green-200 { border-color: rgba(34,197,94,0.30) !important; }
html.theme-dark .text-green-500, html.theme-dark .text-green-600 { color: #6ee7b7 !important; }
html.theme-dark .text-green-700, html.theme-dark .text-green-800 { color: #86efac !important; }

html.theme-dark .from-green-500.to-green-600.hover\:from-green-600.hover\:to-green-700 {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

/* Yellow / amber alert blocks */
html.theme-dark .bg-yellow-50, html.theme-dark .from-yellow-50, html.theme-dark .to-yellow-50,
html.theme-dark .from-amber-50, html.theme-dark .to-amber-50 {
    background: rgba(234,179,8,0.10) !important;
}
html.theme-dark .border-yellow-200, html.theme-dark .border-yellow-300 {
    border-color: rgba(234,179,8,0.30) !important;
}
html.theme-dark .text-yellow-500, html.theme-dark .text-yellow-600 { color: #fbbf24 !important; }
html.theme-dark .text-yellow-700, html.theme-dark .text-yellow-800 { color: #fcd34d !important; }

/* Indigo (filter active / selected) */
html.theme-dark .bg-indigo-50, html.theme-dark .from-indigo-50 { background: rgba(99,102,241,0.12) !important; }
html.theme-dark .border-indigo-200, html.theme-dark .border-indigo-300, html.theme-dark .border-indigo-400 {
    border-color: rgba(129,140,248,0.40) !important;
}
html.theme-dark .text-indigo-500, html.theme-dark .text-indigo-600 { color: #a5b4fc !important; }
html.theme-dark .focus\:border-indigo-400:focus { border-color: #818cf8 !important; }
html.theme-dark .focus\:ring-indigo-100:focus { box-shadow: 0 0 0 3px rgba(129,140,248,0.30) !important; }
html.theme-dark .group-hover\:bg-indigo-50\/30 { background: rgba(99,102,241,0.10) !important; }

/* Rose / red tonal */
html.theme-dark .bg-red-50  { background: rgba(239,68,68,0.10) !important; }
html.theme-dark .bg-rose-50 { background: rgba(244,63,94,0.10) !important; }
html.theme-dark .text-red-500, html.theme-dark .text-red-600, html.theme-dark .text-rose-500 { color: #fca5a5 !important; }
html.theme-dark .text-red-700, html.theme-dark .text-red-800 { color: #fecaca !important; }
html.theme-dark .hover\:bg-red-100:hover { background: rgba(239,68,68,0.18) !important; }

/* ===== 14. STAT badge + status pill text ========================= */
html.theme-dark .text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .font-black.text-slate-900, html.theme-dark .font-black.text-slate-800 {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 15. Edge cases ============================================ */
/* Form select dark variant */
html.theme-dark select { color-scheme: dark; }
html.theme-dark select option { background: var(--c-bg-elevated, #11161e); color: var(--c-fg, #f7f8fa); }

/* Disabled buttons */
html.theme-dark button:disabled { opacity: 0.45 !important; }

/* Generic shadow re-tune (kept from v2 but stronger) */
html.theme-dark .shadow-lg { box-shadow: 0 12px 24px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset !important; }
html.theme-dark .hover\:shadow:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.55) !important; }
html.theme-dark .hover\:shadow-lg:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.65) !important; }
html.theme-dark .shadow-md\,hover\:shadow-md:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.55) !important; }

/* All semantic-tinted backgrounds shifted to subtle elevated surface when used as wrappers */
html.theme-dark .bg-gradient-to-br.from-white {
    background: var(--c-bg-elevated, #11161e) !important;
}
html.theme-dark .bg-gradient-to-br.from-white.to-slate-50,
html.theme-dark .bg-gradient-to-br.to-slate-50 {
    background: linear-gradient(135deg, var(--c-bg-elevated, #11161e) 0%, var(--c-bg-subtle, #0d1117) 100%) !important;
}

/* SVG icon color in tonal headers — keep yellow-300 star but bump for visibility */
html.theme-dark .text-yellow-300.fill-current { color: #fde047 !important; }

/* Spinner border color */
html.theme-dark .spinner-border.text-primary {
    border-color: currentColor !important;
    border-right-color: transparent !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
}

/* Map "Chargement de la carte" placeholder */
html.theme-dark [style*="background:#f8f9fa"][style*="color:#666"] {
    background: var(--c-bg-muted, #161b22) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
}

/* Slider (Radzen) — already covered in v1; reinforce */
html.theme-dark .rz-slider {
    background: var(--c-bg-muted, #161b22) !important;
}
html.theme-dark .rz-slider-range {
    background: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .rz-slider-handle {
    background: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-fg, #f7f8fa) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
}

/* OpenLayers map controls */
html.theme-dark .ol-control button {
    background: rgba(247, 248, 250, 0.85) !important;
    color: #0b1220 !important;
}
html.theme-dark .ol-attribution {
    background: rgba(11, 18, 32, 0.75) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .ol-attribution a { color: #a5b4fc !important; }

/* ===== 16. Final catch-all for missed tonal backgrounds ========= */
html.theme-dark [class*="from-white"] { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .bg-gradient-to-r.from-white {
    background-image: linear-gradient(to right, var(--c-bg-elevated, #11161e), var(--c-bg-elevated, #11161e)) !important;
}

/* Headings inside dark gradient headers — always white */
html.theme-dark .from-gray-700.to-gray-900 .text-white,
html.theme-dark .from-slate-700.to-slate-900 .text-white,
html.theme-dark .from-slate-800.to-slate-900 .text-white {
    color: #ffffff !important;
}
/* But because v3 inverts these gradients to dark-subtle bg, white text → invert to fg */
html.theme-dark .from-gray-700.to-gray-900 h2.text-white,
html.theme-dark .from-gray-700.to-gray-900 h3.text-white {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ====================== public-dark-v4.css ====================== */
/* ============================================================================
   Public Dark Theme v4 — final perfection pass.
   Loaded LAST in _Layout.cshtml.

   Targets every reported pattern + audited razor.css generated patterns.
   ============================================================================ */

/* ===== 1. PAGE WRAPPERS ============================================ */
html.theme-dark .bg-slate-50\/50,
html.theme-dark [class*="bg-slate-50\\/"],
html.theme-dark .bg-slate-50\/60,
html.theme-dark .bg-slate-50\/80 {
    background: var(--c-bg, #07090e) !important;
}

/* ===== 2. INFO CARDS (Identité Juridique / Coordonnées) ============ */
/* bg-white rounded-2xl shadow-sm border border-slate-100 */
html.theme-dark .bg-white.rounded-2xl,
html.theme-dark .bg-white.rounded-xl,
html.theme-dark .bg-white.rounded-lg.shadow-sm,
html.theme-dark .bg-white.shadow-sm {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .border-slate-100, html.theme-dark .border-gray-100 {
    border-color: var(--c-border-muted, #161b22) !important;
}
html.theme-dark .divide-slate-100 > * + *,
html.theme-dark .divide-slate-100 { border-color: var(--c-border-muted, #161b22) !important; }
html.theme-dark .divide-gray-100 > * + * { border-color: var(--c-border-muted, #161b22) !important; }
html.theme-dark .divide-slate-100 > tbody > tr,
html.theme-dark .divide-y.divide-slate-100 > tr { border-color: var(--c-border-muted, #161b22) !important; }

/* Section headers like "Identité Juridique" / "Coordonnées Principales" */
html.theme-dark h4.text-slate-500,
html.theme-dark h4.font-bold.text-slate-500 { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Labels (text-slate-500 font-medium) + Values (text-slate-900) */
html.theme-dark .text-slate-500 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark span.text-slate-900, html.theme-dark .text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .font-semibold.text-slate-900,
html.theme-dark .font-bold.text-slate-900,
html.theme-dark .text-slate-900.font-semibold,
html.theme-dark .text-slate-900.font-mono { color: var(--c-fg, #f7f8fa) !important; }

/* SIRET monospace chip */
html.theme-dark .text-slate-900.font-mono.bg-slate-50 {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* Slate-700 text inside cards */
html.theme-dark .text-slate-700 { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Address block */
html.theme-dark address.text-slate-700 { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Icon avatars (small round bg-slate-100 with text-slate-500 svg) */
html.theme-dark .rounded-full.bg-slate-100,
html.theme-dark .w-9.h-9.bg-slate-100,
html.theme-dark .w-10.h-10.bg-slate-100,
html.theme-dark .w-11.h-11.bg-slate-100 {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark .bg-slate-100.text-slate-600 {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark .bg-slate-100.text-slate-500 {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg-subtle, #8b95a7) !important;
}

/* ===== 3. CONDITIONS COMMERCIALES dark card (already dark, refine) === */
/* Pattern: bg-slate-900 text-white rounded-2xl shadow-lg + bg-white/5 decoration circles + bg-white/10 inner pills */
html.theme-dark .bg-slate-900.text-white,
html.theme-dark .bg-gray-900.text-white {
    background: linear-gradient(135deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-muted, #161b22) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .bg-white\/5  { background: rgba(255,255,255,0.04) !important; }
html.theme-dark .bg-white\/10 { background: rgba(255,255,255,0.06) !important; }
html.theme-dark .bg-white\/20 { background: rgba(255,255,255,0.10) !important; }
html.theme-dark .border-white\/10 { border-color: rgba(255,255,255,0.08) !important; }
html.theme-dark .border-white\/20 { border-color: rgba(255,255,255,0.15) !important; }

/* Text inside the dark card */
html.theme-dark .bg-slate-900 .text-slate-300,
html.theme-dark .bg-slate-900 .text-slate-400,
html.theme-dark .bg-slate-900 .text-slate-500 {
    color: rgba(255,255,255,0.65) !important;
}
html.theme-dark .bg-slate-900 .text-white { color: #ffffff !important; }

/* ===== 4. TABLES (Mes commandes / factures / clients) ============== */
html.theme-dark thead.text-slate-500,
html.theme-dark tr.bg-slate-50.text-slate-500,
html.theme-dark thead tr.bg-slate-50 {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark th.font-semibold.uppercase { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark tbody tr:hover.bg-slate-50,
html.theme-dark tr.hover\:bg-slate-50:hover,
html.theme-dark tbody tr.hover\:bg-slate-50:hover { background: var(--c-bg-subtle, #0d1117) !important; }
/* Highlighted "current" row bg-slate-50/60 */
html.theme-dark tr.bg-slate-50\/60 {
    background: rgba(13, 17, 23, 0.6) !important;
}
html.theme-dark td.text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 5. PROSPECT / ACTIF status pills ============================ */
html.theme-dark .bg-green-100 {
    background: rgba(34, 197, 94, 0.18) !important;
}
html.theme-dark .bg-green-100.text-green-700,
html.theme-dark .text-green-700 { color: #86efac !important; }
html.theme-dark .bg-amber-100 {
    background: rgba(245, 158, 11, 0.18) !important;
}
html.theme-dark .bg-amber-100.text-amber-800,
html.theme-dark .text-amber-800 { color: #fcd34d !important; }
html.theme-dark .bg-red-100 {
    background: rgba(239, 68, 68, 0.18) !important;
}
html.theme-dark .bg-red-100.text-red-700,
html.theme-dark .text-red-700 { color: #fca5a5 !important; }
html.theme-dark .bg-blue-100 { background: rgba(59, 130, 246, 0.18) !important; }
html.theme-dark .bg-blue-100.text-blue-700,
html.theme-dark .text-blue-700 { color: #93c5fd !important; }
html.theme-dark .bg-purple-100 { background: rgba(168, 85, 247, 0.18) !important; }
html.theme-dark .text-purple-700 { color: #c4b5fd !important; }
html.theme-dark .bg-orange-100 { background: rgba(249, 115, 22, 0.18) !important; }
html.theme-dark .text-orange-700 { color: #fdba74 !important; }
html.theme-dark .bg-pink-100 { background: rgba(236, 72, 153, 0.18) !important; }
html.theme-dark .text-pink-700 { color: #f9a8d4 !important; }
html.theme-dark .bg-cyan-100 { background: rgba(6, 182, 212, 0.18) !important; }
html.theme-dark .text-cyan-700 { color: #67e8f9 !important; }
html.theme-dark .bg-teal-100 { background: rgba(20, 184, 166, 0.18) !important; }
html.theme-dark .text-teal-700 { color: #5eead4 !important; }

/* ===== 6. Mes Clients (left nav) AVATAR + ACTIVE BUTTON ============ */
/* Amber card: bg-amber-50/60 with bg-amber-100 text-amber-800 avatar */
html.theme-dark .bg-amber-50\/60 {
    background: rgba(251, 191, 36, 0.10) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}

/* Active client button: bg-slate-800 text-white shadow-lg shadow-slate-300 */
html.theme-dark button.bg-slate-800,
html.theme-dark .bg-slate-800.text-white {
    background: linear-gradient(135deg, var(--c-fg, #f7f8fa) 0%, var(--c-fg-muted, #c8d0dd) 100%) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
html.theme-dark button.bg-slate-800:hover,
html.theme-dark .bg-slate-800.text-white:hover {
    background: linear-gradient(135deg, #ffffff 0%, var(--c-fg, #f7f8fa) 100%) !important;
}
/* Slate-300 shadow → keep subtle on dark */
html.theme-dark .shadow-slate-300 { box-shadow: 0 4px 12px rgba(255,255,255,0.06) !important; }
html.theme-dark .shadow-slate-900\/20 { box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; }
html.theme-dark .hover\:shadow-slate-500\/30:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important; }

/* ===== 7. STATISTIQUES — Tableau croisé header + buttons =========== */
/* Header gradient: from-slate-50 to-amber-50/30 */
html.theme-dark .from-slate-50.to-amber-50\/30,
html.theme-dark [class*="from-slate-50"][class*="to-amber-50"] {
    background: linear-gradient(90deg, var(--c-bg-subtle, #0d1117) 0%, rgba(251,191,36,0.06) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-bottom-color: var(--c-border-muted, #161b22) !important;
}
/* Header icon background bg-slate-800 (inverted to brand-fg) — already covered above, but ensure inner svg white */
html.theme-dark .w-7.h-7.bg-slate-800 svg.text-white { color: var(--c-fg-inverse, #0b1220) !important; }
html.theme-dark .w-7.h-7.bg-slate-800 { /* keep dark on dark for icon contrast — invert */
    background: var(--c-bg-elevated, #11161e) !important;
}
html.theme-dark .w-7.h-7.bg-slate-800 svg { color: var(--c-fg, #f7f8fa) !important; }

/* Active toggle button "Mensuel sur la période" */
html.theme-dark .bg-slate-900.text-white.shadow-sm {
    background: var(--c-fg, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}
/* Inactive toggle buttons */
html.theme-dark button.bg-white.text-slate-600.border-slate-200,
html.theme-dark button.bg-white.border-slate-200.text-slate-600 {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark button.bg-white.text-slate-600.hover\:bg-slate-50:hover,
html.theme-dark button.bg-white.text-slate-600.hover\:text-slate-900:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* Stats card titles */
html.theme-dark h3.font-bold.text-slate-800 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .text-slate-800 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .text-slate-600 { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Statistiques chart preloading skeleton */
html.theme-dark .skeleton-loading,
html.theme-dark .stats-preloading,
html.theme-dark .chart-loading {
    background: linear-gradient(90deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-muted, #161b22) 50%, var(--c-bg-subtle, #0d1117) 100%) !important;
    background-size: 200% 100% !important;
    animation: skel-shimmer 1.6s linear infinite;
}
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Generic loading skeleton / placeholder bars */
html.theme-dark .animate-pulse > *,
html.theme-dark [class*="bg-slate-200"].animate-pulse,
html.theme-dark [class*="bg-gray-200"].animate-pulse {
    background: var(--c-bg-muted, #161b22) !important;
}

/* ===== 8. LOGIN PAGE — complete dark refit ========================= */
/* Login wrapper (often has p-8 sm:p-10) — ensure parent dark */
html.theme-dark .login-page, html.theme-dark #loginPage,
html.theme-dark [data-page="connexion"] {
    background: var(--c-bg, #07090e) !important;
    color: var(--c-fg, #f7f8fa);
}

/* Title "Bienvenue" + subtitle */
html.theme-dark h2.text-gray-800,
html.theme-dark h2.font-bold.text-gray-800 {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark p.text-gray-500 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .text-gray-600 { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Form field labels */
html.theme-dark label.text-gray-600 { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Form inputs — bg-gray-50 border-gray-200 text-gray-900 focus:bg-white */
html.theme-dark input.bg-gray-50.border-gray-200,
html.theme-dark input.bg-gray-50,
html.theme-dark input.bg-gray-50.text-gray-900 {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark input.bg-gray-50:focus,
html.theme-dark input.focus\:bg-white:focus {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-brand, #ef5a4a) !important;
}
html.theme-dark input.placeholder-gray-400::placeholder,
html.theme-dark input::placeholder { color: var(--c-fg-faint, #5c6675) !important; }

/* Icon inside input */
html.theme-dark .text-gray-400.group-focus-within\:text-\[var\(--CS_color1\)\] { color: var(--c-fg-faint, #5c6675) !important; }

/* "Se souvenir de moi" / "Mot de passe oublié" */
html.theme-dark .text-gray-500.group-hover\:text-gray-700:hover,
html.theme-dark span.text-gray-500.group-hover\:text-gray-700 { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark button.text-gray-500.hover\:text-\[var\(--CS_color1\)\] { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark button.text-gray-500.hover\:text-\[var\(--CS_color1\)\]:hover { color: var(--c-brand, #ef5a4a) !important; }

/* Divider line + "ou continuer avec" */
html.theme-dark .border-t.border-gray-200 { border-color: var(--c-border, #1f2630) !important; }
html.theme-dark .border-t.border-gray-100 { border-color: var(--c-border-muted, #161b22) !important; }
html.theme-dark .text-gray-400.uppercase { color: var(--c-fg-subtle, #8b95a7) !important; }

/* Google / Facebook buttons — bg-white border-gray-200 text-gray-700 */
html.theme-dark button.bg-white.border-gray-200,
html.theme-dark button.bg-white.border-2.border-gray-200 {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark button.bg-white.border-2.border-gray-200:hover,
html.theme-dark button.bg-white.hover\:border-gray-300:hover,
html.theme-dark button.bg-white.hover\:bg-gray-50:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* Créer mon compte — outlined w/ brand color */
html.theme-dark a.border-2.border-\[var\(--CS_color1\)\],
html.theme-dark a.text-\[var\(--CS_color1\)\] {
    color: var(--c-brand, #ef5a4a) !important;
    border-color: var(--c-brand, #ef5a4a) !important;
}
html.theme-dark a.hover\:\!bg-\[var\(--CS_color1\)\]:hover,
html.theme-dark a.hover\:\!text-white:hover {
    background: var(--c-brand, #ef5a4a) !important;
    color: #ffffff !important;
}

/* Copyright footer */
html.theme-dark .Copyright, html.theme-dark .text-gray-400 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .Copyright a, html.theme-dark .Copyright a.version { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .Copyright p { color: var(--c-fg-faint, #5c6675) !important; }

/* Connexion CTA — keep brand gradient bg, ensure white text stays */
html.theme-dark button[type="submit"][style*="linear-gradient"] {
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) !important;
}
html.theme-dark button[type="submit"][style*="linear-gradient"]:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08) !important;
}

/* ===== 9. "Continuer vos achats" + similar slate-900 CTAs ========== */
html.theme-dark a.bg-slate-900,
html.theme-dark a.bg-slate-900.hover\:bg-slate-800 {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5) !important;
}
html.theme-dark a.bg-slate-900:hover,
html.theme-dark a.bg-slate-900.hover\:bg-slate-800:hover {
    background: var(--c-accent-hover, #e4e7ec) !important;
}
html.theme-dark a.bg-slate-900.\!text-white,
html.theme-dark .bg-slate-900.\!text-white { color: var(--c-fg-inverse, #0b1220) !important; }

/* ===== 10. Mes Clients nav button hover (when not active) ========= */
html.theme-dark button.hover\:bg-slate-50:hover,
html.theme-dark button.hover\:bg-slate-100:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 11. CATCH-ALL ICON BACKGROUNDS bg-slate-100 hovering ======= */
html.theme-dark .hover\:bg-slate-100:hover { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .hover\:bg-slate-200:hover { background: var(--c-bg-muted, #161b22) !important; }

/* ===== 12. WHITE/X DECORATION CIRCLES on dark gradient cards ====== */
html.theme-dark .from-slate-700.to-slate-900 .bg-white\/5,
html.theme-dark .from-slate-700.to-slate-900 .bg-white\/10,
html.theme-dark .from-gray-700.to-gray-900 .bg-white\/5,
html.theme-dark .from-gray-700.to-gray-900 .bg-white\/10 {
    background: rgba(255,255,255,0.04) !important;
}

/* ===== 13. SEMANTIC LINK COLORS ================================== */
html.theme-dark a.hover\:text-blue-600:hover,
html.theme-dark a.text-slate-700.hover\:text-blue-600:hover { color: #93c5fd !important; }

/* ===== 14. SUMMARY CARDS w/ from-white to-slate-50 ================ */
html.theme-dark .from-white.to-slate-50.rounded-xl,
html.theme-dark .from-white.to-slate-50.shadow-lg {
    background: linear-gradient(135deg, var(--c-bg-elevated, #11161e) 0%, var(--c-bg-subtle, #0d1117) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 15. Statistiques charts — RECHARTS / native canvas wrappers === */
html.theme-dark .recharts-wrapper text,
html.theme-dark .recharts-cartesian-axis-tick-value tspan,
html.theme-dark .recharts-legend-item-text,
html.theme-dark .recharts-tooltip-label,
html.theme-dark .recharts-default-tooltip,
html.theme-dark .recharts-tooltip-item {
    fill: var(--c-fg, #f7f8fa) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .recharts-cartesian-grid-horizontal line,
html.theme-dark .recharts-cartesian-grid-vertical line {
    stroke: var(--c-border, #1f2630) !important;
}
html.theme-dark .recharts-default-tooltip {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* Native fallback: any svg <text> inside chart container */
html.theme-dark .chart-container svg text,
html.theme-dark .stat-card svg text,
html.theme-dark [class*="chart"] svg text {
    fill: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .chart-container svg line.grid,
html.theme-dark .chart-container svg line[stroke="#e2e8f0"],
html.theme-dark .chart-container svg line[stroke="#cbd5e1"] {
    stroke: var(--c-border, #1f2630) !important;
}

/* ===== 16. FORM-SELECT dark scheme + arrow ======================= */
html.theme-dark select.form-select {
    color-scheme: dark;
    background-color: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ===== 17. Inline avatar initials w/ bg-amber-100 (Mes Clients) === */
html.theme-dark .bg-amber-100.text-amber-800.font-bold {
    background: rgba(251, 191, 36, 0.18) !important;
    color: #fcd34d !important;
}

/* ===== 18. CTA submit (login) gradient — keep brand, refine shadow == */
html.theme-dark .focus\:ring-\[var\(--CS_color1\)\]\/30:focus {
    box-shadow: 0 0 0 4px rgba(239, 90, 74, 0.35) !important;
}
html.theme-dark .focus\:ring-\[var\(--CS_color1\)\]\/10:focus {
    box-shadow: 0 0 0 4px rgba(239, 90, 74, 0.20) !important;
}

/* ===== 19. STAT BIG NUMBERS / font-black slate-800 ================ */
html.theme-dark .font-black.text-slate-800,
html.theme-dark .text-slate-800.font-black,
html.theme-dark .font-black.text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 20. ALL TEXT-WHITE preserved within new-inverted dark cards == */
/* The slate-900 cards used to be dark (white text on dark). Our override inverts them
   to dark-subtle gradient. Make sure text remains white→fg in those */
html.theme-dark .bg-slate-900 h4,
html.theme-dark .bg-slate-900 span.font-medium,
html.theme-dark .bg-slate-900 .text-base,
html.theme-dark .bg-slate-900 .text-lg { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 21. ROUTE accents + page borders ========================= */
html.theme-dark .border-amber-200, html.theme-dark .border-amber-300, html.theme-dark .border-amber-400 {
    border-color: rgba(251, 191, 36, 0.35) !important;
}

/* ===== 22. SOCIAL BUTTONS — keep Google/Facebook brand icons ====== */
html.theme-dark button.bg-white svg path[fill="#4285F4"],
html.theme-dark button.bg-white svg path[fill="#34A853"],
html.theme-dark button.bg-white svg path[fill="#FBBC05"],
html.theme-dark button.bg-white svg path[fill="#EA4335"] {
    /* keep brand fills */
}

/* ===== 23. AMBER subtle banners (Adresses warning, cart warning) === */
html.theme-dark .bg-amber-50.border-amber-200,
html.theme-dark .bg-amber-50.text-amber-800 {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.30) !important;
}

/* ===== 24. EMERALD success card (franco) ========================= */
html.theme-dark .bg-emerald-50.border-emerald-200 {
    background: rgba(16, 185, 129, 0.10) !important;
    border-color: rgba(16, 185, 129, 0.30) !important;
}
html.theme-dark .text-emerald-500, html.theme-dark .text-emerald-900,
html.theme-dark .text-emerald-700, html.theme-dark .text-emerald-800 {
    color: #6ee7b7 !important;
}

/* ===== 25. LOGIN page outer wrapper (some tenants put it in <body> directly) === */
html.theme-dark form#connexionForm,
html.theme-dark form.login-form,
html.theme-dark .login-card {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 26. STATUS BADGES on dark bg ============================= */
html.theme-dark .bg-green-50 { background: rgba(34, 197, 94, 0.10) !important; }
html.theme-dark .text-green-600 { color: #6ee7b7 !important; }

/* ===== 27. AVATARS WITH text-amber-800 (Mes Clients initials) === */
html.theme-dark .text-amber-800.font-bold,
html.theme-dark span.text-amber-800.font-bold { color: #fcd34d !important; }

/* ===== 28. Sticky / fixed header (when scrolling stats / cmd) === */
html.theme-dark .sticky.bg-white,
html.theme-dark .sticky.top-0.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    box-shadow: 0 1px 0 var(--c-border, #1f2630) !important;
}

/* ===== 29. SVG `<svg stroke="#4a4a4a">` hardcoded color ========== */
html.theme-dark svg[stroke="#4a4a4a"] { stroke: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark svg[stroke="#666"], html.theme-dark svg[stroke="#666666"] { stroke: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark svg[stroke="#374151"], html.theme-dark svg[stroke="#4b5563"] { stroke: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark svg g[stroke="#4a4a4a"] { stroke: var(--c-fg-muted, #c8d0dd) !important; }

/* ===== 30. INLINE-STYLE color overrides for spinner / loading ==== */
html.theme-dark [style*="color:#666"],
html.theme-dark [style*="color: #666"] { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark [style*="background:#f8f9fa"],
html.theme-dark [style*="background: #f8f9fa"] { background: var(--c-bg-muted, #161b22) !important; }

/* ===== 31. FOCUS-WITHIN groups (form fields) ===================== */
html.theme-dark .group-focus-within\:text-\[var\(--CS_color1\)\] { color: inherit; }
html.theme-dark .focus-within\:bg-white { background: var(--c-bg-elevated, #11161e) !important; }

/* ===== 32. EXPLICIT bg-white on form-inputs (Mes Litiges, etc.) === */
html.theme-dark input.bg-white,
html.theme-dark textarea.bg-white,
html.theme-dark select.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ===== 33. PROGRESS-BAR / loading bars ========================= */
html.theme-dark .progress, html.theme-dark .progress-bar {
    background: var(--c-bg-muted, #161b22) !important;
}
html.theme-dark .progress-bar-fill,
html.theme-dark .progress > .progress-bar {
    background: var(--c-fg, #f7f8fa) !important;
}

/* ===== 34. SVG ICONS w/ text-slate-500 + currentColor ============ */
html.theme-dark svg.text-slate-500 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark svg.text-slate-400 { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark svg.text-slate-600 { color: var(--c-fg-muted, #c8d0dd) !important; }

/* ===== 35. ROW-LEVEL hover for any tr.hover\:bg-... ============== */
html.theme-dark tr.hover\:bg-slate-50\/60:hover { background: rgba(13, 17, 23, 0.6) !important; }

/* ===== 36. FORM field error/success borders ====================== */
html.theme-dark .border-red-500, html.theme-dark .border-red-400 { border-color: #f87171 !important; }
html.theme-dark .border-green-500, html.theme-dark .border-green-400 { border-color: #4ade80 !important; }

/* ===== 37. NAV STEP indicator (numbered circles 1/2/3 in checkout) === */
html.theme-dark .ring-slate-800\/10,
html.theme-dark .ring-4.ring-slate-800\/10 {
    --tw-ring-color: rgba(247, 248, 250, 0.10) !important;
    box-shadow: 0 0 0 4px rgba(247, 248, 250, 0.10) !important;
}
html.theme-dark .shadow-slate-800\/30 {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* ===== 38. Reusable hover patterns ================================ */
html.theme-dark .hover\:bg-slate-50\/80:hover { background: rgba(13, 17, 23, 0.7) !important; }
html.theme-dark .hover\:bg-slate-100\/80:hover { background: rgba(22, 27, 34, 0.7) !important; }

/* ===== 39. SVG icon backgrounds in dark CTAs (Tableau croisé head) === */
html.theme-dark .w-7.h-7.bg-slate-800 svg.text-white,
html.theme-dark .w-7.h-7.bg-slate-800 svg { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 40. KEEP page bg behind <main class="bg-slate-50/50"> ==== */
html.theme-dark main.bg-slate-50\/50,
html.theme-dark main[class*="bg-slate-50"] { background: var(--c-bg, #07090e) !important; }

/* ===== 41. Borders inside detail cards =========================== */
html.theme-dark .border-t.border-white\/10 { border-color: rgba(255,255,255,0.08) !important; }

/* ===== 42. SCROLLBAR for inner panels =========================== */
html.theme-dark .overflow-y-auto::-webkit-scrollbar { width: 10px; }
html.theme-dark .overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
html.theme-dark .overflow-y-auto::-webkit-scrollbar-thumb {
    background: var(--c-border-strong, #2d3744);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ===== 43. text-slate-* / text-gray-* sweep (catch any missed) === */
html.theme-dark .text-slate-200, html.theme-dark .text-gray-200 { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark .text-slate-300, html.theme-dark .text-gray-300 { color: var(--c-fg-faint, #5c6675) !important; }

/* ===== 44. INFO chip on dark card "DEJA REGLEE" === */
html.theme-dark .bg-white\/20.text-xs { color: rgba(255,255,255,0.85) !important; }
html.theme-dark span.bg-white\/20 { background: rgba(255,255,255,0.10) !important; color: var(--c-fg, #f7f8fa) !important; }

/* ===== 45. Smooth transition prevention on certain elements ====== */
html.theme-dark canvas, html.theme-dark img, html.theme-dark video {
    transition: none !important;
}

/* ====================== public-dark-v5.css ====================== */
/* ============================================================================
   Public Dark Theme v5 — final tweaks for inner cards + stock badges.
   Loaded LAST in _Layout.cshtml.
   ============================================================================ */

/* ===== INNER PRICING TABLE CARD =================================== */
/* Pattern: rounded-lg border border-slate-200 bg-slate-50/50 p-4
   This is an INNER card (not page bg) — needs elevated surface, not deep bg. */
html.theme-dark .rounded-lg.border.border-slate-200.bg-slate-50\/50,
html.theme-dark .rounded-xl.border.border-slate-200.bg-slate-50\/50,
html.theme-dark .border-slate-200.bg-slate-50\/50.p-4,
html.theme-dark .border-slate-200.bg-slate-50\/50,
html.theme-dark [class*="border-slate-200"][class*="bg-slate-50\\/"] {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa);
}

/* Table inside this card */
html.theme-dark .rounded-lg.border-slate-200 table,
html.theme-dark .border.border-slate-200.bg-slate-50\/50 table {
    color: var(--c-fg, #f7f8fa);
}
html.theme-dark .border.border-slate-200.bg-slate-50\/50 thead tr,
html.theme-dark .bg-slate-50\/50 thead tr.border-b.border-slate-200 {
    border-bottom-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .bg-slate-50\/50 th.text-slate-700,
html.theme-dark .bg-slate-50\/50 td.text-slate-700,
html.theme-dark th.font-semibold.text-slate-700,
html.theme-dark td.font-semibold.text-slate-700 {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .bg-slate-50\/50 th.text-slate-600,
html.theme-dark .bg-slate-50\/50 td.text-slate-600,
html.theme-dark th.font-medium.text-slate-600 { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .bg-slate-50\/50 .text-xs.text-slate-500,
html.theme-dark .text-xs.text-slate-500 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .bg-slate-50\/50 .font-semibold.text-slate-900,
html.theme-dark .font-semibold.text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .bg-slate-50\/50 span.text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }

/* ===== EN STOCK / status pill — bg-green-100 + checkmark SVG ====== */
html.theme-dark .bg-green-100.text-green-700,
html.theme-dark .bg-green-100 {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(34, 197, 94, 0.30);
}
html.theme-dark .bg-green-100.text-green-700 svg,
html.theme-dark .bg-green-100 svg.fill-current,
html.theme-dark .text-green-700 svg { color: #6ee7b7 !important; }

/* Other stock states */
html.theme-dark .bg-orange-100.text-orange-700,
html.theme-dark .bg-orange-100 {
    background: rgba(249, 115, 22, 0.16) !important;
    color: #fdba74 !important;
    border: 1px solid rgba(249, 115, 22, 0.30);
}
html.theme-dark .bg-red-100.text-red-700,
html.theme-dark .bg-red-100 {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.30);
}
html.theme-dark .bg-yellow-100,
html.theme-dark .bg-yellow-100.text-yellow-700 {
    background: rgba(234, 179, 8, 0.16) !important;
    color: #fde047 !important;
    border: 1px solid rgba(234, 179, 8, 0.30);
}
html.theme-dark .bg-blue-100.text-blue-700,
html.theme-dark .bg-blue-100 {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.30);
}

/* ===== Make sure .bg-slate-50/50 page bg rule from v4 doesn't beat
   the inner-card rule above. Force precedence via more-specific selector
   only when slate-50/50 is on a wrapper that's NOT a card. =========== */
html.theme-dark .flex-1.overflow-y-auto.bg-slate-50\/50,
html.theme-dark main.bg-slate-50\/50,
html.theme-dark [class*="overflow-y-auto"].bg-slate-50\/50 {
    background: var(--c-bg, #07090e) !important;
}

/* ===== Table row hover inside this inner card ==================== */
html.theme-dark .bg-slate-50\/50 tbody tr:hover { background: rgba(255, 255, 255, 0.02) !important; }

/* ===== "À partir de" small caption ============================== */
html.theme-dark div.text-xs.text-slate-500 { color: var(--c-fg-subtle, #8b95a7) !important; }

/* ===== Generic 'En stock' pill svg path stroke ================== */
html.theme-dark .bg-green-100 svg path[stroke="currentColor"],
html.theme-dark .text-green-700 svg path[stroke="currentColor"] { stroke: #6ee7b7 !important; }

/* ====================== public-dark-v6.css ====================== */
/* ============================================================================
   Public Dark Theme v6 — login card, ApexCharts SVG inline-set colors,
   factures/commandes gradient headers + cards, loading spinner, Net-à-Payer,
   product card actions, all remaining slate/violet/emerald variants.
   ============================================================================ */

/* ===== 1. LOGIN CARD — glass+border+rounded-3xl =================== */
html.theme-dark .bg-white\/95,
html.theme-dark .bg-white\/95.backdrop-blur-2xl,
html.theme-dark .bg-white\/90.backdrop-blur-md,
html.theme-dark .bg-white\/80,
html.theme-dark .bg-white\/80.backdrop-blur-md,
html.theme-dark .bg-white\/70 {
    background: rgba(17, 22, 30, 0.92) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .border-white\/30,
html.theme-dark .border-white\/50,
html.theme-dark .border-white\/40,
html.theme-dark .border-white\/20 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Login top accent gradient stripe — keep as brand */
html.theme-dark .from-\[var\(--CS_color1\)\].via-\[var\(--CS_color2\)\].to-\[var\(--CS_color1\)\] {
    /* keep brand; nothing */
}

/* ===== 2. APEXCHARTS — fix all inline-set colors ================== */
/* Axis labels (inline fill="#373d3f") */
html.theme-dark .apexcharts-text,
html.theme-dark .apexcharts-yaxis-label,
html.theme-dark .apexcharts-xaxis-label,
html.theme-dark .apexcharts-yaxis-title,
html.theme-dark .apexcharts-xaxis-title,
html.theme-dark .apexcharts-title-text,
html.theme-dark .apexcharts-datalabel,
html.theme-dark .apexcharts-legend-text,
html.theme-dark .apexcharts-tooltip-text,
html.theme-dark .apexcharts-tooltip-title,
html.theme-dark .apexcharts-tooltip-y-group .apexcharts-tooltip-text-y-label,
html.theme-dark .apexcharts-tooltip-y-group .apexcharts-tooltip-text-y-value,
html.theme-dark .apexcharts-yaxis-texts-g text,
html.theme-dark .apexcharts-xaxis-texts-g text {
    fill: var(--c-fg, #f7f8fa) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* Gridlines (inline stroke="#f1f5f9") */
html.theme-dark .apexcharts-gridline,
html.theme-dark .apexcharts-grid line,
html.theme-dark .apexcharts-grid-borders line {
    stroke: var(--c-border-muted, #1a2231) !important;
    opacity: 0.6;
}

/* Axis ticks + axis lines (inline stroke="#e0e0e0") */
html.theme-dark .apexcharts-xaxis-tick,
html.theme-dark .apexcharts-yaxis-tick,
html.theme-dark .apexcharts-xaxis line,
html.theme-dark .apexcharts-yaxis line {
    stroke: var(--c-border, #1f2630) !important;
}

/* Crosshairs (inline stroke="#b6b6b6") */
html.theme-dark .apexcharts-xcrosshairs,
html.theme-dark .apexcharts-ycrosshairs,
html.theme-dark .apexcharts-xcrosshairs.apexcharts-active {
    stroke: var(--c-fg-subtle, #8b95a7) !important;
    fill: rgba(255,255,255,0.06) !important;
}

/* Series line stroke (inline stroke="#0f172a" slate-900) → white */
html.theme-dark .apexcharts-area-series .apexcharts-area,
html.theme-dark .apexcharts-line-series .apexcharts-line,
html.theme-dark path.apexcharts-line {
    stroke: var(--c-fg, #f7f8fa) !important;
}
/* Marker dots (inline fill="#0f172a") */
html.theme-dark .apexcharts-marker {
    fill: var(--c-fg, #f7f8fa) !important;
    stroke: var(--c-bg, #07090e) !important;
}

/* Area gradient — the linearGradient stops use slate-900 base. Re-tint by overlaying
   a CSS filter on the svg so the gradient feels right in dark. */
html.theme-dark .apexcharts-area-series .apexcharts-area[fill*="url"] {
    /* keep gradient but shift hue toward neutral light */
    filter: hue-rotate(180deg) brightness(2.4) opacity(0.45);
}

/* Tooltip */
html.theme-dark .apexcharts-tooltip {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
html.theme-dark .apexcharts-tooltip-title {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-bottom-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* SVG background rect inline fill="#fefefe" → transparent */
html.theme-dark .apexcharts-svg > rect[fill="#fefefe"],
html.theme-dark .apexcharts-inner > rect[fill="#fefefe"] { fill: transparent !important; }
/* Chart svg ROOT background */
html.theme-dark svg.apexcharts-svg { background: transparent !important; }

/* Legend marker (uses series color) — keep */

/* ===== 3. LOADING SPINNER overlay ================================ */
/* bg-white/80 backdrop-blur-md shadow-2xl border-white/50 rounded-2xl + text-slate-800 */
html.theme-dark .bg-white\/80.backdrop-blur-md {
    background: rgba(17, 22, 30, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--c-fg, #f7f8fa) !important;
    box-shadow: 0 24px 48px rgba(0,0,0,0.7) !important;
}
html.theme-dark .text-slate-800.font-bold.uppercase,
html.theme-dark .bg-white\/80.backdrop-blur-md .text-slate-800 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .bg-white\/80.backdrop-blur-md svg.animate-spin.text-slate-800 { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 4. FACTURES gradient header (violet-purple-indigo) ========= */
html.theme-dark .from-violet-600.via-purple-600.to-indigo-700,
html.theme-dark [class*="from-violet-6"][class*="to-indigo-7"] {
    /* keep brand gradient — already vivid */
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25) !important;
}
html.theme-dark .from-violet-600 .bg-white\/20,
html.theme-dark .from-purple-600 .bg-white\/20,
html.theme-dark .from-indigo-700 .bg-white\/20 {
    background: rgba(255,255,255,0.18) !important;
}

/* Facture inner header gradient from-slate-50 to-violet-50/50 */
html.theme-dark .from-slate-50.to-violet-50\/50,
html.theme-dark .from-slate-50.to-emerald-50\/40,
html.theme-dark .from-slate-50.to-amber-50\/30,
html.theme-dark .from-slate-50.to-sky-50\/40,
html.theme-dark .from-slate-50.to-blue-50\/40,
html.theme-dark [class*="from-slate-50"][class*="to-violet-50"],
html.theme-dark [class*="from-slate-50"][class*="to-emerald-50"],
html.theme-dark [class*="from-slate-50"][class*="to-sky-50"],
html.theme-dark [class*="from-slate-50"][class*="to-blue-50"] {
    background: linear-gradient(90deg, var(--c-bg-subtle, #0d1117) 0%, rgba(124, 58, 237, 0.10) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border-muted, #161b22) !important;
}

/* Facture cards bg-white border-slate-200 hover:border-violet-300 */
html.theme-dark .bg-white.border-slate-200.rounded-2xl,
html.theme-dark .bg-white.border.border-slate-200.rounded-2xl {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .bg-white.border-slate-200.hover\:border-violet-300:hover,
html.theme-dark .bg-white.hover\:border-violet-300:hover {
    border-color: #a78bfa !important;
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.18) !important;
}

/* Facture inline badges */
html.theme-dark .bg-emerald-100.text-emerald-700,
html.theme-dark .bg-emerald-100 {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
}
html.theme-dark .border-emerald-300 { border-color: rgba(16, 185, 129, 0.35) !important; }
html.theme-dark .bg-emerald-50.text-emerald-700,
html.theme-dark .bg-emerald-50 {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #6ee7b7 !important;
}
html.theme-dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.30) !important; }

html.theme-dark .bg-blue-100.text-blue-700,
html.theme-dark .bg-blue-100 {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}
html.theme-dark .border-blue-200, html.theme-dark .border-blue-300 { border-color: rgba(59, 130, 246, 0.35) !important; }
html.theme-dark .bg-blue-50.text-blue-700,
html.theme-dark .bg-blue-50 {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #93c5fd !important;
}

html.theme-dark .bg-sky-50.text-sky-700,
html.theme-dark .bg-sky-50 {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #7dd3fc !important;
}
html.theme-dark .border-sky-200 { border-color: rgba(14, 165, 233, 0.30) !important; }

html.theme-dark .bg-red-100.text-red-700.border-red-300,
html.theme-dark .bg-red-100.text-red-700 {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}
html.theme-dark .border-red-300 { border-color: rgba(239, 68, 68, 0.35) !important; }

/* Echeance overdue text-red-600 */
html.theme-dark .text-red-600.font-semibold,
html.theme-dark .text-red-600 { color: #f87171 !important; }
html.theme-dark .text-red-500 { color: #fca5a5 !important; }

/* Facture detail labels */
html.theme-dark .text-\[10px\].font-bold.text-slate-400,
html.theme-dark .text-slate-400 { color: var(--c-fg-subtle, #8b95a7) !important; }

/* "Detail" button bg-violet-600 hover:bg-violet-700 text-white */
html.theme-dark button.bg-violet-600,
html.theme-dark button.bg-violet-600.hover\:bg-violet-700 {
    background: #8b5cf6 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25) !important;
}
html.theme-dark button.bg-violet-600:hover,
html.theme-dark button.bg-violet-600.hover\:bg-violet-700:hover {
    background: #7c3aed !important;
}

/* Footer of facture row bg-slate-50/80 + border-t border-slate-100 */
html.theme-dark .bg-slate-50\/80 {
    background: rgba(13, 17, 23, 0.7) !important;
}
html.theme-dark .border-t.border-slate-100 { border-top-color: var(--c-border-muted, #161b22) !important; }

/* ===== 5. "Net à Payer" — bg-gray-800 text-white pill ============ */
html.theme-dark .bg-gray-800.text-white,
html.theme-dark .bg-gray-800,
html.theme-dark div.bg-gray-800.text-white.rounded-xl {
    background: linear-gradient(135deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-muted, #161b22) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
}
html.theme-dark .bg-gray-800.text-white .font-bold,
html.theme-dark .bg-gray-800.text-white .font-extrabold {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 6. PRODUCT CARD action button (settings cog) =============== */
html.theme-dark .bg-white\/90.backdrop-blur-sm,
html.theme-dark button.bg-white\/90 {
    background: rgba(17, 22, 30, 0.85) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .bg-white\/90.text-slate-600.hover\:bg-white:hover,
html.theme-dark button.bg-white\/90.hover\:bg-white:hover {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .text-slate-600.hover\:text-gray-600:hover { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 7. ADDITIONAL gradient cards =============================== */
html.theme-dark .from-violet-600,
html.theme-dark .from-purple-600,
html.theme-dark .from-indigo-700,
html.theme-dark .via-purple-600,
html.theme-dark .to-indigo-700 {
    /* keep brand vivid */
}

/* Card hover shadow inside list */
html.theme-dark .hover\:shadow-lg:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.35) !important;
}
html.theme-dark .hover\:shadow-md:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.45) !important;
}

/* ===== 8. INSIDE CARD strong text inversions ===================== */
html.theme-dark .font-bold.text-slate-900.text-sm,
html.theme-dark .font-bold.text-slate-900.text-base,
html.theme-dark .text-slate-900.font-bold,
html.theme-dark .text-sm.font-semibold.text-slate-800,
html.theme-dark .text-sm.font-semibold.text-slate-700 { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 9. STATS pre-loading skeleton overlay (animate-scaleIn) === */
html.theme-dark .animate-scaleIn {
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ===== 10. SVG drop-shadow on logo + login icon ================== */
html.theme-dark .drop-shadow-md {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)) !important;
}

/* ===== 11. PROGRESS bar inside cards (Net à Payer / Total) ====== */
html.theme-dark dt.font-bold,
html.theme-dark dd.font-extrabold { color: inherit; }

/* ===== 12. RING / RING-OFFSET utilities =========================== */
html.theme-dark .focus\:ring-gray-200\/60:focus {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.06) !important;
}
html.theme-dark .focus\:ring-slate-200:focus {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.08) !important;
}

/* ===== 13. ACTIVE settings cog ring/border for product cards ===== */
html.theme-dark button.bg-white\/90.backdrop-blur-sm.border-slate-100 {
    border-color: var(--c-border-muted, #161b22) !important;
}

/* ===== 14. POST-it / sticky note style cards (sometimes used) ==== */
html.theme-dark .bg-yellow-50, html.theme-dark .bg-orange-50, html.theme-dark .bg-rose-50,
html.theme-dark .bg-pink-50, html.theme-dark .bg-cyan-50, html.theme-dark .bg-teal-50,
html.theme-dark .bg-lime-50, html.theme-dark .bg-fuchsia-50 {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* ===== 15. ENSURE GROUP-hover children inherit dark =============== */
html.theme-dark .group:hover .group-hover\:opacity-100 { opacity: 1 !important; }
html.theme-dark .group:hover .group-hover\:text-gray-600 { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 16. EMOJI in headers — adjust contrast (faint emojis on dark) === */
html.theme-dark .w-10.h-10.bg-white\/20.backdrop-blur { background: rgba(255,255,255,0.16) !important; }

/* ===== 17. FACTURES totals chip (right-aligned pill) ============= */
html.theme-dark .px-4.py-1\.5.bg-white\/20.backdrop-blur.text-white {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
}

/* ===== 18. PROGRESSIVE BG ===================================== */
html.theme-dark .from-violet-600.via-purple-600.to-indigo-700 .relative svg,
html.theme-dark .from-violet-600 .text-white { color: #ffffff !important; }

/* ===== 19. Login form rounded checkbox accent =================== */
html.theme-dark input[type="checkbox"].border-gray-300 {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark input[type="checkbox"]:checked {
    background-color: var(--c-brand, #ef5a4a) !important;
}

/* ===== 20. CTA submit shine animation overlay -- keep but invert -- */
html.theme-dark .animate-shine,
html.theme-dark .group-hover\:animate-shine {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.15)) !important;
}

/* ===== 21. FORGOTTEN: Login outer wrapper bg & gradient mesh ===== */
html.theme-dark body[class*="connexion"], html.theme-dark .login-bg {
    background:
        radial-gradient(circle at 20% 20%, rgba(239, 90, 74, 0.06) 0px, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.06) 0px, transparent 50%),
        var(--c-bg, #07090e) !important;
}

/* ===== 22. apexcharts foreignObject style override =============== */
html.theme-dark .apexcharts-svg foreignObject { color: var(--c-fg, #f7f8fa); }

/* ====================== public-dark-final.css ====================== */
/* ============================================================================
   Public Dark Theme — final exhaustive sweep.
   Loaded LAST in _Layout.cshtml.

   Strategy: target every class name found via grep audit of razor.css files
   that had hardcoded colors/gradients incompatible with dark.
   ============================================================================ */

/* ===== 1. CLASSES WITH WHITE / LIGHT BACKGROUNDS ================== */
html.theme-dark .ajouterPanier,
html.theme-dark .cart-items,
html.theme-dark .cart-summary,
html.theme-dark .category-card,
html.theme-dark .category-list,
html.theme-dark .composantCompte,
html.theme-dark .featured-section,
html.theme-dark .info-card,
html.theme-dark .product-card,
html.theme-dark .quantity-section,
html.theme-dark .image-section,
html.theme-dark .MegaMenu,
html.theme-dark .recherche-bar,
html.theme-dark .Search,
html.theme-dark .product-category,
html.theme-dark .cart-line-item,
html.theme-dark .cart-line {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
    border-color: var(--c-border, #1f2630);
}

/* Modal / overlay */
html.theme-dark .modal,
html.theme-dark .modal-content,
html.theme-dark .modal-header,
html.theme-dark .modal-body,
html.theme-dark .modal-footer {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
    border-color: var(--c-border-muted, #161b22);
}

/* ===== 2. PILL / BUTTON variants ================================== */
html.theme-dark .btnMoinsMerchandising,
html.theme-dark .btnPlusMerchandising,
html.theme-dark .secondary-btn,
html.theme-dark .overlay-btn {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .btnMoinsMerchandising:hover,
html.theme-dark .btnPlusMerchandising:hover,
html.theme-dark .secondary-btn:hover,
html.theme-dark .overlay-btn:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
    border-color: var(--c-fg-faint, #5c6675) !important;
}

/* CTA buttons (with hard-coded gradients) */
html.theme-dark .add-to-cart-btn,
html.theme-dark .checkout-btn,
html.theme-dark .cta-button {
    background: linear-gradient(135deg, var(--c-fg, #f7f8fa) 0%, var(--c-fg-muted, #c8d0dd) 100%) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    box-shadow: 0 4px 14px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
html.theme-dark .add-to-cart-btn:hover,
html.theme-dark .checkout-btn:hover,
html.theme-dark .cta-button:hover {
    background: linear-gradient(135deg, #ffffff 0%, var(--c-fg, #f7f8fa) 100%) !important;
}

/* ===== 3. STATE / STATUS DECORATIVE ============================== */
html.theme-dark .step-active,
html.theme-dark .active.step,
html.theme-dark .highlight {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}
html.theme-dark .disabled {
    opacity: 0.5 !important;
}

/* Info card header gradient */
html.theme-dark .info-card-header {
    background: linear-gradient(135deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-muted, #161b22) 100%) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 4. TOAST variants (cs-toast--*) =========================== */
html.theme-dark .cs-toast--success {
    background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(22,163,74,0.10)) !important;
    color: #6ee7b7 !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
}
html.theme-dark .cs-toast--danger {
    background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(220,38,38,0.10)) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
}
html.theme-dark .cs-toast--warning {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.10)) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.30) !important;
}
html.theme-dark .cs-cart--loading {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* Skeleton shimmer */
html.theme-dark .cs-skel-card__media,
html.theme-dark .skel-line {
    background: linear-gradient(90deg, var(--c-bg-subtle, #0d1117) 0%, var(--c-bg-muted, #161b22) 50%, var(--c-bg-subtle, #0d1117) 100%) !important;
    background-size: 200% 100% !important;
}

/* ===== 5. INLINE STYLE patches — common hex colors ============== */
/* Specific inline-style attrs from audit */
html.theme-dark [style*="color: #6b7280"],
html.theme-dark [style*="color:#6b7280"]   { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark [style*="color: #64748b"],
html.theme-dark [style*="color:#64748b"]   { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark [style*="color: #94a3b8"],
html.theme-dark [style*="color:#94a3b8"]   { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark [style*="color: #1e293b"],
html.theme-dark [style*="color:#1e293b"]   { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark [style*="color: #4b5563"],
html.theme-dark [style*="color:#4b5563"]   { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark [style*="color: #374151"],
html.theme-dark [style*="color:#374151"]   { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark [style*="color: #1f2937"],
html.theme-dark [style*="color:#1f2937"]   { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark [style*="color: #111827"],
html.theme-dark [style*="color:#111827"]   { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark [style*="color: #333"],
html.theme-dark [style*="color:#333"]      { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark [style*="color: #666"],
html.theme-dark [style*="color:#666"]      { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark [style*="color: #777"],
html.theme-dark [style*="color:#777"]      { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark [style*="color: #999"],
html.theme-dark [style*="color:#999"]      { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark [style*="border-top-color: #494747"],
html.theme-dark [style*="border-top-color:#494747"] { border-top-color: var(--c-border, #1f2630) !important; }

/* Inline `color: #0a68ff` (Facebook button) — keep brand blue but lift */
html.theme-dark [style*="color: #0a68ff"] { color: #60a5fa !important; }

/* Inline backgrounds */
html.theme-dark [style*="background: #f8f9fa"],
html.theme-dark [style*="background:#f8f9fa"]   { background: var(--c-bg-muted, #161b22) !important; color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark [style*="background: #f1f3f4"],
html.theme-dark [style*="background:#f1f3f4"]   { background: var(--c-bg-muted, #161b22) !important; }
html.theme-dark [style*="background: #f3f4f6"],
html.theme-dark [style*="background:#f3f4f6"]   { background: var(--c-bg-muted, #161b22) !important; }
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background: #fff"]    { background: var(--c-bg-elevated, #11161e) !important; }

/* Inline brand violet/purple decorative pill — keep as-is (already vivid) */

/* ===== 6. RAZOR.CSS PATTERNS — common hardcoded hex via class === */
/* All elements that hardcoded f8f9fa / f8fafc / f9fafb subtle bg → subtle dark */
html.theme-dark .bg-subtle, html.theme-dark .panel-bg, html.theme-dark .section-bg,
html.theme-dark .top-bar, html.theme-dark .filter-bar {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa);
}

/* "Faint" gray text used in headings throughout */
html.theme-dark .text-faint, html.theme-dark .caption, html.theme-dark .helper-text {
    color: var(--c-fg-subtle, #8b95a7) !important;
}

/* ===== 7. SVG inline fills/strokes (audit hits) ================ */
html.theme-dark svg[fill="#494747"] { fill: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark svg[fill="#666"], html.theme-dark svg[fill="#666666"] { fill: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark svg[fill="#0f172a"] { fill: var(--c-fg, #f7f8fa) !important; }
html.theme-dark svg[fill="#1e293b"] { fill: var(--c-fg, #f7f8fa) !important; }
html.theme-dark svg[fill="#374151"] { fill: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark svg[stroke="#0f172a"] { stroke: var(--c-fg, #f7f8fa) !important; }
html.theme-dark svg[stroke="#1e293b"] { stroke: var(--c-fg, #f7f8fa) !important; }
html.theme-dark svg[stroke="#e2e8f0"] { stroke: var(--c-border, #1f2630) !important; }
html.theme-dark svg[stroke="#cbd5e1"] { stroke: var(--c-border-strong, #2d3744) !important; }
html.theme-dark svg[stroke="#f1f5f9"] { stroke: var(--c-border-muted, #161b22) !important; }
html.theme-dark svg[stroke="#e0e0e0"] { stroke: var(--c-border, #1f2630) !important; }
html.theme-dark svg[stroke="#b6b6b6"] { stroke: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark svg[stroke="#373d3f"] { stroke: var(--c-fg, #f7f8fa) !important; }
html.theme-dark text[fill="#373d3f"] { fill: var(--c-fg, #f7f8fa) !important; }

/* ===== 8. BORDERS — common hex values ========================== */
html.theme-dark .border-soft, html.theme-dark .divider, html.theme-dark .separator {
    border-color: var(--c-border-muted, #161b22) !important;
}

/* ===== 9. STATISTIQUES — Chart wrapper + container =========== */
html.theme-dark .stats-section, html.theme-dark .stats-container,
html.theme-dark .stat-block, html.theme-dark .chart-wrapper,
html.theme-dark .stats-card, html.theme-dark .stat-card {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* Chart legend (custom HTML) */
html.theme-dark .chart-legend, html.theme-dark .legend-item {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 10. FACTURE / COMMANDE / LITIGE row text ================ */
html.theme-dark .invoice-row, html.theme-dark .invoice-card,
html.theme-dark .order-row, html.theme-dark .order-card,
html.theme-dark .litige-row, html.theme-dark .litige-card,
html.theme-dark .commande-row {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
    border-color: var(--c-border, #1f2630);
}

/* ===== 11. INFO TEXT (small / muted) ========================== */
html.theme-dark .info, html.theme-dark .note, html.theme-dark .small-text,
html.theme-dark .meta, html.theme-dark .sub-info {
    color: var(--c-fg-subtle, #8b95a7) !important;
}

/* ===== 12. TAILWIND SVG fill via class ========================= */
html.theme-dark svg.fill-current { color: inherit; }

/* ===== 13. CARD DARK CONTRAST OVERLAY for tonal lights ======= */
/* Many cards layer `bg-white` then add `bg-gradient-to-r` on header — covered v6
   Reinforce that white-text on inverted gradient stays readable. */
html.theme-dark .text-white { color: #ffffff !important; }

/* ===== 14. NESTED BG-WHITE inside dark cards ================== */
html.theme-dark .bg-white .text-slate-900,
html.theme-dark .bg-white .text-slate-800,
html.theme-dark .bg-white .text-gray-900,
html.theme-dark .bg-white .text-gray-800 {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 15. AVATAR/INITIALS rounded backgrounds w/ subtle tones === */
html.theme-dark .avatar-initials,
html.theme-dark .user-initials,
html.theme-dark .client-avatar {
    background: var(--c-bg-subtle, #0d1117) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
}

/* ===== 16. INPUT VARIANTS (search, autocomplete) =============== */
html.theme-dark .search-input, html.theme-dark .autocomplete-input,
html.theme-dark input.input, html.theme-dark .filter-input {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ===== 17. TOOLTIPS (custom) ================================== */
html.theme-dark .tooltip, html.theme-dark .tip, html.theme-dark [role="tooltip"] {
    background: var(--c-fg, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
    border-color: var(--c-fg-muted, #c8d0dd) !important;
}

/* ===== 18. RADZEN — additional widgets =========================== */
html.theme-dark .rz-card {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .rz-listbox, html.theme-dark .rz-dropdown-items {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .rz-listbox-item:hover, html.theme-dark .rz-dropdown-item:hover {
    background: var(--c-bg-subtle, #0d1117) !important;
}
html.theme-dark .rz-paginator { background: transparent !important; color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .rz-paginator .rz-paginator-element {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .rz-paginator .rz-paginator-element.rz-state-active {
    background: var(--c-accent, #f7f8fa) !important;
    color: var(--c-fg-inverse, #0b1220) !important;
}

/* ===== 19. DROPZONES / UPLOADS ================================= */
html.theme-dark .dropzone, html.theme-dark .upload-area {
    background: var(--c-bg-subtle, #0d1117) !important;
    border: 2px dashed var(--c-border-strong, #2d3744) !important;
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark .dropzone:hover, html.theme-dark .upload-area:hover {
    background: var(--c-bg-muted, #161b22) !important;
    border-color: var(--c-fg-faint, #5c6675) !important;
}

/* ===== 20. CALENDAR / DATE PICKER ============================== */
html.theme-dark .rz-datepicker-popup, html.theme-dark .rz-calendar {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .rz-calendar td.rz-other-month { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark .rz-calendar td:hover { background: var(--c-bg-subtle, #0d1117) !important; }
html.theme-dark .rz-calendar td.rz-state-active { background: var(--c-accent, #f7f8fa) !important; color: var(--c-fg-inverse, #0b1220) !important; }

/* ===== 21. UNIVERSAL fallback for any card-like white element === */
html.theme-dark .card-like,
html.theme-dark .pane,
html.theme-dark .panel-content {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
    border-color: var(--c-border, #1f2630);
}

/* ===== 22. Forced colors safety ============================== */
@media (forced-colors: active) {
    html.theme-dark * { forced-color-adjust: auto; }
}

/* ===== 23. KEEP gradient hero backgrounds intact ================ */
html.theme-dark .from-blue-500.to-purple-600,
html.theme-dark .from-pink-500.to-rose-600,
html.theme-dark .from-orange-400.to-pink-500,
html.theme-dark .from-violet-500.to-fuchsia-500 {
    /* These are decorative — leave vibrant */
}

/* ===== 24. KILL hardcoded shadows that block dark feel ========== */
html.theme-dark [style*="box-shadow: 0px 3px 6px #00000029"],
html.theme-dark [style*="box-shadow:0px 3px 6px #00000029"] {
    box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important;
}
html.theme-dark [style*="box-shadow: 0 2px 8px rgba(0,0,0,0.05)"],
html.theme-dark [style*="box-shadow:0 2px 8px rgba(0,0,0,0.05)"] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
}

/* ===== 25. SCROLLBARS inside dark elements ===================== */
html.theme-dark *::-webkit-scrollbar-track { background: transparent; }
html.theme-dark *::-webkit-scrollbar-thumb {
    background: var(--c-border-strong, #2d3744);
    border-radius: 5px;
}
html.theme-dark *::-webkit-scrollbar-thumb:hover { background: var(--c-fg-faint, #5c6675); }

/* ===== 26. iframes / canvas — neutral wrappers =================== */
html.theme-dark iframe, html.theme-dark canvas {
    background: var(--c-bg-elevated, #11161e);
    border-color: var(--c-border, #1f2630);
}

/* ===== 27. STAT card big number text ============================ */
html.theme-dark .stat-value, html.theme-dark .big-number, html.theme-dark .kpi-value {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .stat-label, html.theme-dark .kpi-label {
    color: var(--c-fg-subtle, #8b95a7) !important;
}

/* ===== 28. FORM ERROR / SUCCESS messages ========================= */
html.theme-dark .form-error, html.theme-dark .field-error, html.theme-dark .validation-error {
    color: #fca5a5 !important;
}
html.theme-dark .form-success, html.theme-dark .field-success {
    color: #6ee7b7 !important;
}
html.theme-dark .form-warning { color: #fcd34d !important; }

/* ===== 29. INACTIVE / DISABLED text variants ==================== */
html.theme-dark .disabled-text, html.theme-dark .text-disabled {
    color: var(--c-fg-faint, #5c6675) !important;
}

/* ===== 30. KEYBOARD KEY <kbd> elements ========================== */
html.theme-dark kbd {
    background: var(--c-bg-muted, #161b22) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border-strong, #2d3744) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 0 rgba(0,0,0,0.4);
}

/* ===== 31. SVG icons w/ class `text-gray-400` etc inside cards === */
html.theme-dark svg.text-slate-400, html.theme-dark svg.text-slate-500,
html.theme-dark svg.text-gray-400, html.theme-dark svg.text-gray-500 {
    color: var(--c-fg-subtle, #8b95a7) !important;
}
html.theme-dark svg.text-slate-600, html.theme-dark svg.text-gray-600 {
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark svg.text-slate-700, html.theme-dark svg.text-gray-700,
html.theme-dark svg.text-slate-800, html.theme-dark svg.text-gray-800 {
    color: var(--c-fg, #f7f8fa) !important;
}

/* ===== 32. SECTION dividers (hr-like) =========================== */
html.theme-dark .section-divider, html.theme-dark .h-divider {
    border-top-color: var(--c-border-muted, #161b22) !important;
}

/* ===== 33. CARDS with `relative` + `bg-white` =================== */
html.theme-dark .relative.bg-white { background: var(--c-bg-elevated, #11161e) !important; }

/* ===== 34. STOCK-LOW (orange tone) ============================= */
html.theme-dark .stock-low { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; }

/* ===== 35. CART STEPPER LINES ================================== */
html.theme-dark .stepper-line, html.theme-dark .progress-line {
    background: var(--c-border, #1f2630) !important;
}
html.theme-dark .stepper-line.active, html.theme-dark .progress-line.active {
    background: var(--c-fg, #f7f8fa) !important;
}

/* ===== 36. INLINE NOTIFICATION pills (success/info/warn) ======= */
html.theme-dark .notif-success { background: rgba(34,197,94,0.16) !important; color: #6ee7b7 !important; border-color: rgba(34,197,94,0.30) !important; }
html.theme-dark .notif-info { background: rgba(59,130,246,0.16) !important; color: #93c5fd !important; border-color: rgba(59,130,246,0.30) !important; }
html.theme-dark .notif-warning { background: rgba(245,158,11,0.16) !important; color: #fcd34d !important; border-color: rgba(245,158,11,0.30) !important; }
html.theme-dark .notif-danger { background: rgba(239,68,68,0.16) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,0.30) !important; }

/* ===== 37. MERCHANDISING merch banner ============================ */
html.theme-dark .merchandising, html.theme-dark .merch-banner {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}

/* ===== 38. STATISTIQUES — ChiffreAffaires specific =========== */
html.theme-dark .ChiffreAffaires, html.theme-dark .ca-block, html.theme-dark .ca-chart {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa);
    border-color: var(--c-border, #1f2630);
}
html.theme-dark .ChiffreAffaires .text-gray-800,
html.theme-dark .ChiffreAffaires .text-slate-800,
html.theme-dark .ChiffreAffaires .text-slate-900 { color: var(--c-fg, #f7f8fa) !important; }

/* ===== 39. ANIMATED bg lines (some skeletons use shimmer) ==== */
html.theme-dark .animate-pulse {
    background-color: var(--c-bg-muted, #161b22) !important;
}

/* ===== 40. UNIVERSAL last-resort: any bg-white inside cards w/ shadow === */
html.theme-dark .shadow-sm.bg-white,
html.theme-dark .shadow.bg-white,
html.theme-dark .shadow-md.bg-white,
html.theme-dark .shadow-lg.bg-white,
html.theme-dark .shadow-xl.bg-white,
html.theme-dark .shadow-2xl.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630);
}

/* ============================================================================
   ADDITIONAL DARK FIXES (footer, merch menu, merch grid, BO scoped cards)
   ============================================================================ */

/* ===== FOOTER #footer ===================================================== */
html.theme-dark #footer {
    background: var(--c-bg, #07090e) !important;
    color: var(--c-fg, #f7f8fa);
}

html.theme-dark #footer .banner {
    background: var(--c-bg-elevated, #11161e) !important;
    border-top: 1px solid var(--c-border, #1f2630);
    border-bottom: 1px solid var(--c-border, #1f2630);
}
html.theme-dark #footer .banner-stat,
html.theme-dark #footer .banner-stat * {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark #footer .stat-icon,
html.theme-dark #footer .stat-icon svg {
    color: var(--c-brand, #ef5a4a) !important;
    fill: none !important;
    stroke: currentColor !important;
}
html.theme-dark #footer .stat-text strong {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark #footer .stat-text span {
    color: var(--c-fg-muted, #c8d0dd) !important;
}

html.theme-dark #footer .footer-main {
    background: var(--c-bg, #07090e) !important;
    color: var(--c-fg, #f7f8fa);
    border-top: 1px solid var(--c-border, #1f2630);
}
html.theme-dark #footer .footer-brand,
html.theme-dark #footer .footer-nav,
html.theme-dark #footer .nav-col {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark #footer .brand-tagline { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark #footer .brand-accent { background: var(--c-brand, #ef5a4a) !important; }
html.theme-dark #footer .brand-phone,
html.theme-dark #footer .brand-phone.tel { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark #footer .brand-phone svg { stroke: var(--c-brand, #ef5a4a) !important; }

html.theme-dark #footer .nav-col-title { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark #footer .nav-col ul li a {
    color: var(--c-fg-muted, #c8d0dd) !important;
}
html.theme-dark #footer .nav-col ul li a:hover { color: var(--c-brand, #ef5a4a) !important; }

html.theme-dark #footer .footer-cta-wrap { background: var(--c-bg, #07090e) !important; }
html.theme-dark #footer .footer-cta {
    background: var(--c-bg-elevated, #11161e) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark #footer .cta-text strong,
html.theme-dark #footer .cta-text span { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark #footer .cta-dot {
    background: var(--c-success, #22c55e) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-success, #22c55e) 22%, transparent) !important;
}
html.theme-dark #footer .cta-btn {
    background: var(--c-brand, #ef5a4a) !important;
    color: #fff !important;
}
html.theme-dark #footer .cta-btn:hover {
    background: var(--c-brand-hover, #f47567) !important;
}

html.theme-dark #footer .footer-bottom {
    background: var(--c-bg, #07090e) !important;
    border-top: 1px solid var(--c-border, #1f2630) !important;
    color: var(--c-fg-subtle, #8b95a7) !important;
}
html.theme-dark #footer .footer-bottom a,
html.theme-dark #footer .footer-bottom .bottom-copy,
html.theme-dark #footer .footer-bottom .bottom-copy * {
    color: var(--c-fg-subtle, #8b95a7) !important;
}
html.theme-dark #footer .footer-bottom a:hover { color: var(--c-brand, #ef5a4a) !important; }
html.theme-dark #footer .bottom-sep { background: var(--c-border, #1f2630) !important; }

/* ===== MERCH NAV BUTTON =================================================== */
html.theme-dark .nav-button,
html.theme-dark #merch-nav-button {
    background: transparent !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .nav-button:hover,
html.theme-dark #merch-nav-button:hover {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .nav-text { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .nav-chevron { color: var(--c-fg-muted, #c8d0dd) !important; fill: currentColor !important; }

/* ===== MENU MERCHANDISING DEFAULT (dropdown panel) ======================== */
html.theme-dark .menu-merchandising,
html.theme-dark .menu-merchandising-default,
html.theme-dark .MenuMerchandisingDefault,
html.theme-dark .menu-merch-panel,
html.theme-dark [class*="menu-merchandising"] {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .menu-merchandising a,
html.theme-dark .menu-merchandising-default a,
html.theme-dark [class*="menu-merchandising"] a {
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .menu-merchandising a:hover,
html.theme-dark [class*="menu-merchandising"] a:hover {
    background: var(--c-bg-muted, #161b22) !important;
    color: var(--c-brand, #ef5a4a) !important;
}

/* ===== MERCHANDISING MAIN GRID (Tailwind cards) =========================== */
html.theme-dark main.flex-grow.bg-gray-50\/50,
html.theme-dark main.bg-gray-50\/50 {
    background: var(--c-bg, #07090e) !important;
}
html.theme-dark main .bg-white,
html.theme-dark main .rounded-2xl.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark main .bg-gray-100 { background: var(--c-bg-muted, #161b22) !important; }
html.theme-dark main h3.text-gray-900,
html.theme-dark main .text-gray-900 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark main .text-gray-700 { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark main .text-gray-500 { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark main .text-gray-400 { color: var(--c-fg-faint, #5c6675) !important; }
html.theme-dark main .border-gray-200 { border-color: var(--c-border, #1f2630) !important; }
html.theme-dark main button.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark main button.bg-white:hover { background: var(--c-bg-muted, #161b22) !important; }
html.theme-dark main button.bg-gray-900 {
    background: var(--c-brand, #ef5a4a) !important;
    color: #fff !important;
}
html.theme-dark main button.bg-gray-900:hover { background: var(--c-brand-hover, #f47567) !important; }
html.theme-dark main .bg-white\/90 {
    background: color-mix(in srgb, var(--c-bg-elevated, #11161e) 88%, transparent) !important;
    color: var(--c-success-fg, #4ade80) !important;
}

/* ============================================================================
   AG CONTACT SECTION (Aubry Gaspard)
   ============================================================================ */
html.theme-dark .ag-contact-section {
    background: var(--c-bg, #07090e) !important;
    color: var(--c-fg, #f7f8fa);
}
html.theme-dark .ag-contact {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .ag-contact-image-wrap { background: var(--c-bg-muted, #161b22) !important; }
html.theme-dark .ag-contact-image-wrap img { filter: brightness(0.85); }
html.theme-dark .ag-contact-badge {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}
html.theme-dark .ag-contact-badge svg { color: var(--c-brand, #ef5a4a) !important; }
html.theme-dark .ag-contact-badge strong { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .ag-contact-badge span { color: var(--c-fg-muted, #c8d0dd) !important; }

html.theme-dark .ag-contact-info,
html.theme-dark .ag-contact-info * { color: var(--c-fg, #f7f8fa); }
html.theme-dark .ag-eyebrow { color: var(--c-brand, #ef5a4a) !important; }
html.theme-dark .ag-contact-title { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .ag-contact-title em { color: var(--c-brand, #ef5a4a) !important; font-style: italic; }
html.theme-dark .ag-contact-subtitle { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .ag-accent-bar span { background: var(--c-brand, #ef5a4a) !important; }

html.theme-dark .ag-contact-card {
    background: var(--c-bg-muted, #161b22) !important;
    border: 1px solid var(--c-border, #1f2630) !important;
    color: var(--c-fg, #f7f8fa) !important;
}
html.theme-dark .ag-contact-card:hover {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-brand, #ef5a4a) !important;
}
html.theme-dark .ag-card-icon {
    background: color-mix(in srgb, var(--c-brand, #ef5a4a) 18%, transparent) !important;
    color: var(--c-brand, #ef5a4a) !important;
}
html.theme-dark .ag-card-icon svg { stroke: currentColor !important; color: var(--c-brand, #ef5a4a) !important; }
html.theme-dark .ag-card-label { color: var(--c-fg-subtle, #8b95a7) !important; }
html.theme-dark .ag-card-value { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .ag-card-value small { color: var(--c-fg-subtle, #8b95a7) !important; }

html.theme-dark .ag-btn-primary {
    background: var(--c-brand, #ef5a4a) !important;
    color: #fff !important;
    border-color: var(--c-brand, #ef5a4a) !important;
}
html.theme-dark .ag-btn-primary:hover { background: var(--c-brand-hover, #f47567) !important; }
html.theme-dark .ag-btn-outline {
    background: transparent !important;
    color: var(--c-fg, #f7f8fa) !important;
    border: 1px solid var(--c-border-strong, #2d3744) !important;
}
html.theme-dark .ag-btn-outline:hover {
    background: var(--c-bg-muted, #161b22) !important;
    border-color: var(--c-brand, #ef5a4a) !important;
    color: var(--c-brand, #ef5a4a) !important;
}

/* ============================================================================
   REGISTER / INSCRIPTION PAGE (Tailwind two-column form)
   ============================================================================ */
/* Right-side scroll panel — bg-gray-50/80 */
html.theme-dark .bg-gray-50\/80 {
    background: var(--c-bg, #07090e) !important;
}
html.theme-dark .bg-gray-50\/80 h2.text-gray-800,
html.theme-dark .bg-gray-50\/80 .text-gray-800 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .bg-gray-50\/80 .text-gray-700,
html.theme-dark .bg-gray-50\/80 h3.text-gray-700 { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark .bg-gray-50\/80 .text-gray-500 { color: var(--c-fg-muted, #c8d0dd) !important; }
html.theme-dark .bg-gray-50\/80 .text-gray-400 { color: var(--c-fg-subtle, #8b95a7) !important; }

/* All form inputs, textareas, selects */
html.theme-dark .bg-gray-50\/80 input.bg-white,
html.theme-dark .bg-gray-50\/80 select.bg-white,
html.theme-dark .bg-gray-50\/80 textarea.bg-white,
html.theme-dark .bg-gray-50\/80 input[type="text"].bg-white,
html.theme-dark .bg-gray-50\/80 input[type="email"].bg-white,
html.theme-dark .bg-gray-50\/80 input[type="tel"].bg-white,
html.theme-dark .bg-gray-50\/80 input[type="file"].bg-white,
html.theme-dark .bg-gray-50\/80 button.bg-white {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
    border-color: var(--c-border, #1f2630) !important;
}
html.theme-dark .bg-gray-50\/80 input::placeholder,
html.theme-dark .bg-gray-50\/80 textarea::placeholder {
    color: var(--c-fg-faint, #5c6675) !important;
}
html.theme-dark .bg-gray-50\/80 .border-gray-200,
html.theme-dark .bg-gray-50\/80 .border-gray-200\/60,
html.theme-dark .bg-gray-50\/80 .border-gray-100 { border-color: var(--c-border, #1f2630) !important; }
html.theme-dark .bg-gray-50\/80 .placeholder-gray-400::placeholder { color: var(--c-fg-faint, #5c6675) !important; }

/* Phone country-code button + dropdown */
html.theme-dark .bg-gray-50\/80 button.bg-white:hover,
html.theme-dark .bg-gray-50\/80 button.hover\:bg-gray-50:hover {
    background: var(--c-bg-muted, #161b22) !important;
}
html.theme-dark .bg-gray-50\/80 select option {
    background: var(--c-bg-elevated, #11161e) !important;
    color: var(--c-fg, #f7f8fa) !important;
}

/* File inputs — file:bg accent stays brand color */
html.theme-dark .bg-gray-50\/80 input[type="file"]::file-selector-button {
    background: var(--CS_color1, var(--c-brand, #ef5a4a)) !important;
    color: #fff !important;
    border: 0 !important;
}

/* Section divider line */
html.theme-dark .bg-gray-50\/80 .border-t { border-top-color: var(--c-border, #1f2630) !important; }

/* Section icons (CS_color1 accent stays) */
html.theme-dark .bg-gray-50\/80 .text-\[var\(--CS_color1\)\] { color: var(--CS_color1, var(--c-brand, #ef5a4a)) !important; }

/* "Retour à la connexion" link */
html.theme-dark .bg-gray-50\/80 a.text-gray-500,
html.theme-dark .bg-gray-50\/80 .text-gray-500 a { color: var(--c-fg-muted, #c8d0dd) !important; }

/* Copyright at bottom (mobile + desktop variants) */
html.theme-dark .Copyright .version,
html.theme-dark .Copyright p { color: var(--c-fg-faint, #5c6675) !important; }

/* Left brand panel — gradient already uses CSS vars CS_color1/CS_color2.
   Make the white-noise circles + logo plate readable on dark. */
html.theme-dark .bg-white\/40 {
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(6px);
}
html.theme-dark .text-white\/80,
html.theme-dark .text-white\/60,
html.theme-dark .text-white\/40,
html.theme-dark .text-white\/30 { color: rgba(255, 255, 255, 0.78) !important; }

/* ============================================================================
   #MenuExterne — CMS content overrides (light + dark). Beats inline styles.
   ============================================================================ */
#MenuExterne {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: var(--c-bg, #fff);
    border-bottom: 1px solid var(--c-border, #e4e7ec);
    font-family: var(--font-sans, system-ui, sans-serif);
    position: relative;
    z-index: 50;
}

/* Reset CMS-injected per-link wrapper backgrounds */
#MenuExterne > div {
    background: transparent !important;
    color: inherit !important;
}

#MenuExterne .menu-button,
#MenuExterne > div > a,
#MenuExterne .c-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-fg, #0b1220) !important;
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

#MenuExterne .menu-button:hover,
#MenuExterne > div > a:hover,
#MenuExterne .c-nav-toggle:hover {
    background: var(--c-bg-subtle, #f7f8fa) !important;
    color: var(--c-brand, #BF3425) !important;
    transform: none !important;
}

/* CTA pill */
#MenuExterne .menu-button-cta {
    background: var(--c-brand, #BF3425) !important;
    color: #fff !important;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: var(--sh-sm, 0 2px 6px rgba(0,0,0,0.08));
    font-weight: 700;
}
#MenuExterne .menu-button-cta:hover {
    background: var(--c-brand-hover, #a52d20) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--sh-md, 0 6px 14px rgba(0,0,0,0.12));
}

/* Chevron */
#MenuExterne .chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    color: currentColor;
    opacity: 0.7;
}
#MenuExterne .c-nav-dropdown:hover .chevron { transform: rotate(180deg); }

/* Dropdown panel */
#MenuExterne .c-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 240px;
    background: var(--c-bg-elevated, #fff);
    border: 1px solid var(--c-border, #e4e7ec);
    border-radius: 12px;
    box-shadow: var(--sh-lg, 0 16px 32px rgba(0,0,0,0.10));
    padding: 8px;
    z-index: 1000;
}
#MenuExterne .c-nav-dropdown:hover .c-nav-menu { display: block; }
#MenuExterne .c-nav-menu ul { list-style: none; padding: 0; margin: 0; }
#MenuExterne .c-nav-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-fg, #0b1220) !important;
    background: transparent;
    text-decoration: none;
    text-transform: none;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
#MenuExterne .c-nav-menu li a:hover {
    background: var(--c-bg-subtle, #f7f8fa) !important;
    color: var(--c-brand, #BF3425) !important;
    transform: none !important;
}

/* Beat Tailwind !important utilities + inline style colors on CMS anchors */
#MenuExterne a[class*="!text-gray-"],
#MenuExterne a[style*="color"] {
    color: var(--c-fg, #0b1220) !important;
}
#MenuExterne a[class*="hover:!text-gray-"]:hover,
#MenuExterne a[style*="color"]:hover {
    color: var(--c-brand, #BF3425) !important;
}

/* ===== Dark theme ===== */
html.theme-dark #MenuExterne {
    background: var(--c-bg, #07090e) !important;
    border-bottom-color: var(--c-border, #1f2630) !important;
}
html.theme-dark #MenuExterne > div { background: transparent !important; }
html.theme-dark #MenuExterne .menu-button,
html.theme-dark #MenuExterne > div > a,
html.theme-dark #MenuExterne .c-nav-toggle,
html.theme-dark #MenuExterne a[class*="!text-gray-"],
html.theme-dark #MenuExterne a[style*="color"] {
    color: var(--c-fg, #f7f8fa) !important;
    background: transparent !important;
}
html.theme-dark #MenuExterne .menu-button:hover,
html.theme-dark #MenuExterne > div > a:hover,
html.theme-dark #MenuExterne .c-nav-toggle:hover,
html.theme-dark #MenuExterne a[class*="hover:!text-gray-"]:hover,
html.theme-dark #MenuExterne a[style*="color"]:hover {
    background: var(--c-bg-muted, #161b22) !important;
    color: var(--c-brand, #ef5a4a) !important;
}
html.theme-dark #MenuExterne .menu-button-cta {
    background: var(--c-brand, #ef5a4a) !important;
    color: #fff !important;
}
html.theme-dark #MenuExterne .menu-button-cta:hover {
    background: var(--c-brand-hover, #f47567) !important;
}
html.theme-dark #MenuExterne .c-nav-menu {
    background: var(--c-bg-elevated, #11161e) !important;
    border-color: var(--c-border, #1f2630) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6) !important;
}
html.theme-dark #MenuExterne .c-nav-menu li a { color: var(--c-fg, #f7f8fa) !important; }
html.theme-dark #MenuExterne .c-nav-menu li a:hover {
    background: var(--c-bg-muted, #161b22) !important;
    color: var(--c-brand, #ef5a4a) !important;
}