/*
 * Thème WBS v2 (#1) — couche visuelle chargée après app.css, active seulement sous
 * <html data-wbs-theme="v2"> (posé par layouts/partials/css.blade.php quand wbs_theme() vaut « v2 »).
 *
 * Règles du jeu : aucun balisage ni JS modifié, uniquement de la mise en forme d'écran (@media screen :
 * reçus, factures et étiquettes imprimés restent identiques). Les couleurs dérivent de --theme-700/800/900,
 * donc la couleur de thème choisie par chaque entreprise (Réglages > Système) continue de s'appliquer.
 * Classes maison préfixées wbs- ; jamais de nouvelle classe tw-* (Tailwind précompilé, sans build).
 *
 * Performance (#8) : le dernier composé de chaque sélecteur doit porter une classe, un id ou une balise hors de
 * :is(). Chrome range chaque règle selon ce composé ; une règle finissant par :is(…) était testée sur tous les
 * éléments à chaque recalcul des styles (11,7 s de styles au chargement de /home, contre 6,2 s une fois les :is()
 * développés). Écrire les listes en clair ; qa/css_expand_is.py développe les :is() à spécificité identique, d'où
 * les :where(…), [data-wbs-theme] et :not(#wbs-nul) de remplissage sur la racine.
 *
 * Sections : 0 police · 1 jetons · 2 base · 3 coquille · 4 cartes · 5 boutons · 6 formulaires ·
 *            7 tableaux · 8 modales, onglets, badges, alertes, notifications · 9 mode sombre
 */

/* 0. Police Figtree (variable 300-900, OFL), auto-hébergée ---------------------------------------- */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree/figtree-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/figtree/figtree-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/figtree/figtree-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                   U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@media screen {

/* 1. Jetons ---------------------------------------------------------------------------------------- */
:root[data-wbs-theme="v2"] {
    --wbs-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wbs-primary: var(--theme-800, #1B3A6B);
    --wbs-primary-hover: var(--theme-700, #234A86);
    --wbs-primary-active: var(--theme-900, #0F2240);
    --wbs-primary-text: var(--theme-800, #1B3A6B);
    --wbs-primary-soft: color-mix(in srgb, var(--wbs-primary) 8%, #ffffff);
    --wbs-primary-soft-2: color-mix(in srgb, var(--wbs-primary) 14%, #ffffff);
    --wbs-accent: #6E8FC0;
    --wbs-on-primary: #ffffff;
    --wbs-bg: #F4F6F9;
    --wbs-surface: #ffffff;
    --wbs-surface-2: #F8FAFC;
    --wbs-surface-3: #EEF2F7;
    --wbs-border: #E3E8EF;
    --wbs-border-strong: #CBD3DE;
    --wbs-text: #0F172A;
    --wbs-text-2: #334155;
    --wbs-muted: #64748B;
    --wbs-success: #15803D;
    --wbs-success-soft: #E7F5EC;
    --wbs-warning: #B4530A;
    --wbs-warning-soft: #FCF1E5;
    --wbs-danger: #B91C1C;
    --wbs-danger-soft: #FDECEC;
    --wbs-info: var(--wbs-primary-text);
    --wbs-info-soft: var(--wbs-primary-soft);
    --wbs-radius: 12px;
    --wbs-radius-sm: 8px;
    --wbs-control-h: 38px;
    --wbs-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --wbs-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --wbs-shadow-lg: 0 18px 48px rgba(15, 23, 42, .18);
    --wbs-focus: 0 0 0 3px color-mix(in srgb, var(--wbs-primary-hover) 28%, transparent);
    color-scheme: light;
}

/* 2. Base ------------------------------------------------------------------------------------------ */
:root[data-wbs-theme="v2"],
[data-wbs-theme="v2"] body,
[data-wbs-theme="v2"] .tw-font-sans,
[data-wbs-theme="v2"][data-wbs-theme] :where(h1),
[data-wbs-theme="v2"][data-wbs-theme] :where(h2),
[data-wbs-theme="v2"][data-wbs-theme] :where(h3),
[data-wbs-theme="v2"][data-wbs-theme] :where(h4),
[data-wbs-theme="v2"][data-wbs-theme] :where(h5),
[data-wbs-theme="v2"][data-wbs-theme] :where(h6),
[data-wbs-theme="v2"] .h1,
[data-wbs-theme="v2"] .h2,
[data-wbs-theme="v2"] .h3,
[data-wbs-theme="v2"] .h4,
[data-wbs-theme="v2"] .h5,
[data-wbs-theme="v2"] .h6,
[data-wbs-theme="v2"][data-wbs-theme] :where(button),
[data-wbs-theme="v2"][data-wbs-theme] :where(input),
[data-wbs-theme="v2"][data-wbs-theme] :where(select),
[data-wbs-theme="v2"][data-wbs-theme] :where(textarea),
[data-wbs-theme="v2"] .btn,
[data-wbs-theme="v2"] .tooltip,
[data-wbs-theme="v2"] .popover,
[data-wbs-theme="v2"] .select2-container,
[data-wbs-theme="v2"] .daterangepicker,
[data-wbs-theme="v2"] .ui-autocomplete,
[data-wbs-theme="v2"] .swal-modal,
[data-wbs-theme="v2"] .swal-title,
[data-wbs-theme="v2"] .swal-text,
[data-wbs-theme="v2"] .toast,
[data-wbs-theme="v2"] .modal,
[data-wbs-theme="v2"] .dropdown-menu,
[data-wbs-theme="v2"] .bootstrap-datetimepicker-widget {
    font-family: var(--wbs-font);
}
[data-wbs-theme="v2"] body {
    color: var(--wbs-text);
    background: var(--wbs-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}
:where([data-wbs-theme="v2"]):not(#wbs-nul) :where(main).tw-bg-gray-100,
[data-wbs-theme="v2"] #scrollable-container,
:where([data-wbs-theme="v2"]):not(#wbs-nul) .content-wrapper,
:where([data-wbs-theme="v2"]):not(#wbs-nul) .tw-bg-gray-100 {
    background-color: var(--wbs-bg);
}
/* Montants et compteurs : chiffres tabulaires de la police de marque au lieu d'une chasse fixe. */
[data-wbs-theme="v2"] .tw-font-mono,
[data-wbs-theme="v2"] .display_currency,
[data-wbs-theme="v2"][data-wbs-theme] :where(td),
[data-wbs-theme="v2"][data-wbs-theme] :where(th),
[data-wbs-theme="v2"] .total_sell,
[data-wbs-theme="v2"] .net,
[data-wbs-theme="v2"] .invoice_due,
[data-wbs-theme="v2"] .tw-tabular-nums {
    font-variant-numeric: tabular-nums;
}
[data-wbs-theme="v2"] .tw-font-mono {
    font-family: var(--wbs-font);
    letter-spacing: -.01em;
}
[data-wbs-theme="v2"] a { color: var(--wbs-primary-text); }
[data-wbs-theme="v2"] a:hover { color: var(--wbs-primary-hover); }
[data-wbs-theme="v2"] ::selection { background: var(--wbs-primary-soft-2); color: var(--wbs-text); }
[data-wbs-theme="v2"] :focus-visible { outline: 2px solid var(--wbs-primary-hover); outline-offset: 2px; }
[data-wbs-theme="v2"] hr { border-top-color: var(--wbs-border); }
[data-wbs-theme="v2"] .text-muted, [data-wbs-theme="v2"] .help-block { color: var(--wbs-muted); }

/* 3. Coquille : barre latérale, en-tête, titres, pied de page --------------------------------------- */
[data-wbs-theme="v2"] aside.side-bar {
    background: var(--wbs-surface);
    border-right: 1px solid var(--wbs-border);
}
[data-wbs-theme="v2"] aside.side-bar > a:first-of-type { border-color: var(--wbs-border); }
[data-wbs-theme="v2"] .side-bar-heading { color: var(--wbs-text); font-weight: 700; letter-spacing: -.01em; }
[data-wbs-theme="v2"] #sidebar-search { color: var(--wbs-text-2); }
[data-wbs-theme="v2"] #sidebar-search:focus { outline: none; }
[data-wbs-theme="v2"] aside.side-bar .tw-bg-gray-100.tw-border { background: var(--wbs-surface-2); border-color: var(--wbs-border); }
[data-wbs-theme="v2"] #side-bar > div.tw-uppercase {
    color: var(--wbs-muted);
    font-size: 11px;
    letter-spacing: .08em;
    padding-top: 18px;
}
[data-wbs-theme="v2"] #side-bar a {
    color: var(--wbs-text-2);
    border-radius: var(--wbs-radius-sm);
    font-weight: 500;
}
[data-wbs-theme="v2"] #side-bar a svg, [data-wbs-theme="v2"] #side-bar a i { color: var(--wbs-muted); }
[data-wbs-theme="v2"] #side-bar .theme-sidebar-hover:hover,
[data-wbs-theme="v2"] #side-bar .theme-sidebar-hover:focus {
    background-color: var(--wbs-surface-3);
    color: var(--wbs-text);
}
[data-wbs-theme="v2"] #side-bar .theme-sidebar-active {
    background-color: var(--wbs-primary-soft-2);
    color: var(--wbs-primary-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--wbs-primary);
}
[data-wbs-theme="v2"] #side-bar a.theme-sidebar-active svg, [data-wbs-theme="v2"] #side-bar a.theme-sidebar-active i,
[data-wbs-theme="v2"] #side-bar a:hover svg, [data-wbs-theme="v2"] #side-bar a:hover i { color: var(--wbs-primary-text); }
[data-wbs-theme="v2"] #side-bar .chiled a { font-weight: 400; color: var(--wbs-muted); }
[data-wbs-theme="v2"] #side-bar .chiled a:hover,
[data-wbs-theme="v2"] #side-bar .theme-sidebar-child-active { color: var(--wbs-primary-text); font-weight: 600; }

/* En-tête : surface claire, boutons d'outils discrets ; l'accès caisse reste l'action principale. */
[data-wbs-theme="v2"] .theme-header-bg {
    background: var(--wbs-surface);
    background-image: none;
    border-bottom: 1px solid var(--wbs-border);
}
[data-wbs-theme="v2"]:not(wbs-nul) .theme-header-bg .theme-btn-bg,
[data-wbs-theme="v2"] .theme-header-bg summary.theme-btn-bg {
    background: var(--wbs-surface);
    color: var(--wbs-text-2);
    --tw-ring-color: var(--wbs-border);
    box-shadow: inset 0 0 0 1px var(--wbs-border);
}
[data-wbs-theme="v2"]:not(wbs-nul) .theme-header-bg .theme-btn-bg:hover,
[data-wbs-theme="v2"] .theme-header-bg summary.theme-btn-bg:hover {
    background: var(--wbs-surface-3);
    color: var(--wbs-text);
}
[data-wbs-theme="v2"] .theme-header-bg a.theme-btn-bg[href*="/pos/create"] {
    background: var(--wbs-primary);
    color: var(--wbs-on-primary);
    box-shadow: none;
}
[data-wbs-theme="v2"] .theme-header-bg a.theme-btn-bg[href*="/pos/create"]:hover { background: var(--wbs-primary-hover); }
/* Jamais de commande masquée : la hauteur figée (lg:tw-h-15, 60 px) cachait le menu utilisateur passé sur une
   2e ligne à 1024 px (bouton clair/sombre en plus). Hauteur libre et boutons resserrés sous 1280 px. */
[data-wbs-theme="v2"] .theme-header-bg.no-print { height: auto; min-height: 3.75rem; }
@media (max-width: 1279px) {
    [data-wbs-theme="v2"] .theme-header-bg.no-print > .tw-px-5 { padding-left: 1rem; padding-right: 1rem; }
    [data-wbs-theme="v2"] .theme-header-bg.no-print > div > .tw-gap-6 { gap: .75rem; }
    [data-wbs-theme="v2"] .theme-header-bg.no-print .tw-justify-end.tw-gap-3 { gap: .5rem; }
}
/* Pastille de notifications posée sur la cloche ; invisible quand il n'y a rien à lire. */
[data-wbs-theme="v2"] .notifications-menu > .dropdown-toggle { position: relative; }
[data-wbs-theme="v2"] .notifications-menu .notifications_count {
    position: absolute; top: -.375rem; right: -.375rem; min-width: 1.125rem; height: 1.125rem;
    padding: 0 .3rem; border-radius: 9999px; font-size: .6875rem; line-height: 1.125rem;
}
[data-wbs-theme="v2"] .notifications-menu .notifications_count:empty { display: none; }

[data-wbs-theme="v2"] .content-header { padding-top: 22px; }
[data-wbs-theme="v2"] .content-header > h1 {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--wbs-text);
}
[data-wbs-theme="v2"] .content-header > h1 small { color: var(--wbs-muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
[data-wbs-theme="v2"] .breadcrumb { background: transparent; color: var(--wbs-muted); }
[data-wbs-theme="v2"] .main-footer, [data-wbs-theme="v2"] footer.no-print { color: var(--wbs-muted); }

/* 4. Cartes : composant widget, boîtes AdminLTE, résumés ------------------------------------------ */
[data-wbs-theme="v2"][data-wbs-theme] .tw-bg-white.tw-rounded-xl,
[data-wbs-theme="v2"] .tw-bg-white.tw-shadow-sm.tw-ring-1 {
    background-color: var(--wbs-surface);
    border-radius: var(--wbs-radius);
    --tw-ring-color: var(--wbs-border);
    --tw-shadow: var(--wbs-shadow);
}
[data-wbs-theme="v2"] .box, [data-wbs-theme="v2"] .info-box, [data-wbs-theme="v2"] .small-box, [data-wbs-theme="v2"] .panel {
    background: var(--wbs-surface);
    border: 1px solid var(--wbs-border);
    border-radius: var(--wbs-radius);
    box-shadow: var(--wbs-shadow);
}
[data-wbs-theme="v2"] .box.box-solid > .box-header, [data-wbs-theme="v2"] .box > .box-header { color: var(--wbs-text); }
[data-wbs-theme="v2"][data-wbs-theme] .box-title,
[data-wbs-theme="v2"] .box-header .box-title,
[data-wbs-theme="v2"][data-wbs-theme] .panel-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--wbs-text);
    letter-spacing: -.005em;
}
[data-wbs-theme="v2"] .box-header.with-border, [data-wbs-theme="v2"] .panel-heading { border-bottom: 1px solid var(--wbs-border); }
[data-wbs-theme="v2"] .box-footer { background: var(--wbs-surface-2); border-top: 1px solid var(--wbs-border); }

/* 5. Boutons -------------------------------------------------------------------------------------- */
[data-wbs-theme="v2"] .btn,
[data-wbs-theme="v2"] .tw-dw-btn {
    font-weight: 600;
    border-radius: var(--wbs-radius-sm);
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
[data-wbs-theme="v2"] .btn:focus-visible,
[data-wbs-theme="v2"] .tw-dw-btn:focus-visible { outline: none; box-shadow: var(--wbs-focus); }
/* Action principale : boutons primaires Bootstrap et daisyUI, dégradés indigo et couleurs d'appoint. */
[data-wbs-theme="v2"][data-wbs-theme] .btn-primary,
[data-wbs-theme="v2"][data-wbs-theme] .tw-dw-btn-primary,
[data-wbs-theme="v2"] .tw-bg-gradient-to-r.tw-from-indigo-500,
[data-wbs-theme="v2"] .tw-bg-gradient-to-r.tw-from-primary-800,
[data-wbs-theme="v2"][data-wbs-theme] .theme-btn-bg {
    background: var(--wbs-primary);
    background-image: none;
    border-color: var(--wbs-primary);
    color: var(--wbs-on-primary);
}
[data-wbs-theme="v2"][data-wbs-theme] .btn-primary:hover,
[data-wbs-theme="v2"][data-wbs-theme] .btn-primary:focus,
[data-wbs-theme="v2"][data-wbs-theme] .tw-dw-btn-primary:hover,
[data-wbs-theme="v2"][data-wbs-theme] .tw-dw-btn-primary:focus,
[data-wbs-theme="v2"] .tw-bg-gradient-to-r.tw-from-indigo-500:hover,
[data-wbs-theme="v2"] .tw-bg-gradient-to-r.tw-from-indigo-500:focus,
[data-wbs-theme="v2"] .tw-bg-gradient-to-r.tw-from-primary-800:hover,
[data-wbs-theme="v2"] .tw-bg-gradient-to-r.tw-from-primary-800:focus,
[data-wbs-theme="v2"][data-wbs-theme] .theme-btn-bg:hover,
[data-wbs-theme="v2"][data-wbs-theme] .theme-btn-bg:focus {
    background: var(--wbs-primary-hover);
    border-color: var(--wbs-primary-hover);
    color: var(--wbs-on-primary);
}
[data-wbs-theme="v2"] .btn-primary:active,
[data-wbs-theme="v2"] .tw-dw-btn-primary:active { background: var(--wbs-primary-active); }
/* Actions secondaires (dont les variantes « Enregistrer et… » des formulaires produit). */
[data-wbs-theme="v2"][data-wbs-theme] .btn-default,
[data-wbs-theme="v2"] .bg-maroon.tw-dw-btn,
[data-wbs-theme="v2"] .bg-purple.tw-dw-btn,
[data-wbs-theme="v2"][data-wbs-theme] .tw-dw-btn-neutral {
    background: var(--wbs-surface);
    background-image: none;
    border: 1px solid var(--wbs-border-strong);
    color: var(--wbs-text-2);
}
[data-wbs-theme="v2"][data-wbs-theme] .btn-default:hover,
[data-wbs-theme="v2"] .bg-maroon.tw-dw-btn:hover,
[data-wbs-theme="v2"] .bg-purple.tw-dw-btn:hover,
[data-wbs-theme="v2"][data-wbs-theme] .tw-dw-btn-neutral:hover {
    background: var(--wbs-surface-3);
    border-color: var(--wbs-border-strong);
    color: var(--wbs-text);
}
[data-wbs-theme="v2"][data-wbs-theme] .btn-success,
[data-wbs-theme="v2"] .tw-dw-btn-success:not(.tw-dw-btn-outline) {
    background: var(--wbs-success); border-color: var(--wbs-success); color: #fff;
}
[data-wbs-theme="v2"][data-wbs-theme] .btn-danger,
[data-wbs-theme="v2"] .tw-dw-btn-error:not(.tw-dw-btn-outline) {
    background: var(--wbs-danger); border-color: var(--wbs-danger); color: #fff;
}
[data-wbs-theme="v2"][data-wbs-theme] .btn-warning,
[data-wbs-theme="v2"] .tw-dw-btn-warning:not(.tw-dw-btn-outline) {
    background: var(--wbs-warning-soft); border-color: color-mix(in srgb, var(--wbs-warning) 35%, transparent); color: var(--wbs-warning);
}
[data-wbs-theme="v2"][data-wbs-theme] .btn-info,
[data-wbs-theme="v2"] .tw-dw-btn-info:not(.tw-dw-btn-outline),
[data-wbs-theme="v2"] .tw-dw-btn-accent:not(.tw-dw-btn-outline) {
    background: var(--wbs-primary-soft-2); border-color: transparent; color: var(--wbs-primary-text);
}
[data-wbs-theme="v2"] .btn-success:hover,
[data-wbs-theme="v2"] .btn-danger:hover,
[data-wbs-theme="v2"] .btn-info:hover { filter: brightness(.94); }
/* Boutons contour (menus « Actions » des tableaux, actions groupées) : neutres, sauf les suppressions. */
[data-wbs-theme="v2"] .tw-dw-btn-outline {
    background: var(--wbs-surface);
    border: 1px solid var(--wbs-border-strong);
    color: var(--wbs-text-2);
}
[data-wbs-theme="v2"] .tw-dw-btn-outline:hover { background: var(--wbs-surface-3); border-color: var(--wbs-border-strong); color: var(--wbs-text); }
[data-wbs-theme="v2"] .tw-dw-btn-outline.tw-dw-btn-error { color: var(--wbs-danger); border-color: color-mix(in srgb, var(--wbs-danger) 40%, transparent); }
[data-wbs-theme="v2"] .tw-dw-btn-outline.tw-dw-btn-error:hover { background: var(--wbs-danger-soft); }
[data-wbs-theme="v2"] .btn-link { color: var(--wbs-primary-text); }
/* Boutons d'export des tableaux : icônes sobres et uniformes. */
[data-wbs-theme="v2"] .dt-buttons .btn,
[data-wbs-theme="v2"] .dt-buttons .tw-dw-btn {
    background: var(--wbs-surface);
    border: 1px solid var(--wbs-border);
    color: var(--wbs-text-2);
    box-shadow: none;
}
[data-wbs-theme="v2"] .dt-buttons .btn:hover,
[data-wbs-theme="v2"] .dt-buttons .tw-dw-btn:hover { background: var(--wbs-surface-3); color: var(--wbs-text); }
/* Écran tactile : pas d'infobulle, donc le nom traduit (attribut title posé par DataTables) s'affiche à côté de
   l'icône, et les boutons passent à une hauteur adaptée au doigt. À la souris : icône seule + infobulle. */
@media (hover: none) {
    [data-wbs-theme="v2"] .dt-buttons { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
    [data-wbs-theme="v2"] .dt-buttons .btn,
    [data-wbs-theme="v2"] .dt-buttons .tw-dw-btn { min-height: 2.25rem; padding: 0 .625rem; }
    [data-wbs-theme="v2"] .dt-buttons .btn[title]::after,
    [data-wbs-theme="v2"] .dt-buttons .tw-dw-btn[title]::after { content: attr(title); margin-left: .375rem; font-size: .75rem; font-weight: 500; }
    /* Boutons nommés plus larges : rangée entière sous « Afficher » (gauche) et « Recherche » (droite) ; clear : la
       ligne en flex ne doit pas se rétrécir à côté des boutons flottants « Ajouter » de l'en-tête de carte. */
    [data-wbs-theme="v2"] .dataTables_wrapper .row:has(> [class*="col-"] > .dt-buttons) { display: flex; flex-wrap: wrap; align-items: center; row-gap: .5rem; clear: both; }
    [data-wbs-theme="v2"] .dataTables_wrapper .row:has(> [class*="col-"] > .dt-buttons) > [class*="col-"] { float: none; width: auto; }
    [data-wbs-theme="v2"] .dataTables_wrapper .row:has(> [class*="col-"] > .dt-buttons) > [class*="col-"]:has(.dataTables_filter) { margin-left: auto; }
    [data-wbs-theme="v2"] .dataTables_wrapper .row > [class*="col-"]:has(> .dt-buttons) { order: 3; flex: 0 0 100%; text-align: left; }
}

/* 6. Formulaires ---------------------------------------------------------------------------------- */
[data-wbs-theme="v2"] label, [data-wbs-theme="v2"] .control-label {
    font-weight: 600;
    color: var(--wbs-text-2);
    font-size: 13px;
}
[data-wbs-theme="v2"][data-wbs-theme] .form-control,
[data-wbs-theme="v2"] .select2-container--default .select2-selection--single,
[data-wbs-theme="v2"] .select2-container--default .select2-selection--multiple,
[data-wbs-theme="v2"][data-wbs-theme] .dataTables_filter :where(input),
[data-wbs-theme="v2"][data-wbs-theme] .dataTables_length :where(select) {
    border: 1px solid var(--wbs-border-strong);
    border-radius: var(--wbs-radius-sm);
    background-color: var(--wbs-surface);
    color: var(--wbs-text);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
[data-wbs-theme="v2"] .form-control:not(textarea):not([multiple]) { height: var(--wbs-control-h); }
[data-wbs-theme="v2"] .select2-container--default .select2-selection--single { height: var(--wbs-control-h); }
[data-wbs-theme="v2"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--wbs-control-h) - 2px);
    color: var(--wbs-text);
}
[data-wbs-theme="v2"] .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--wbs-control-h) - 2px); }
[data-wbs-theme="v2"]:not(wbs-nul) .form-control:focus,
[data-wbs-theme="v2"]:not(wbs-nul) .select2-container--focus .select2-selection,
[data-wbs-theme="v2"]:not(wbs-nul) .select2-container--open .select2-selection,
[data-wbs-theme="v2"] .dataTables_filter input:focus {
    border-color: var(--wbs-primary-hover);
    box-shadow: var(--wbs-focus);
    outline: none;
}
[data-wbs-theme="v2"] .form-control::placeholder { color: color-mix(in srgb, var(--wbs-muted) 75%, transparent); }
[data-wbs-theme="v2"] .form-control[disabled],
[data-wbs-theme="v2"] .form-control[readonly] { background-color: var(--wbs-surface-2); color: var(--wbs-muted); }
[data-wbs-theme="v2"] .input-group-addon {
    background: var(--wbs-surface-2);
    border-color: var(--wbs-border-strong);
    color: var(--wbs-muted);
}
[data-wbs-theme="v2"] .input-group .input-group-addon:first-child { border-radius: var(--wbs-radius-sm) 0 0 var(--wbs-radius-sm); }
[data-wbs-theme="v2"] .input-group .input-group-addon:last-child { border-radius: 0 var(--wbs-radius-sm) var(--wbs-radius-sm) 0; }
[data-wbs-theme="v2"] .input-group .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
[data-wbs-theme="v2"] .input-group .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
[data-wbs-theme="v2"] .select2-dropdown { border-color: var(--wbs-border-strong); border-radius: var(--wbs-radius-sm); box-shadow: var(--wbs-shadow-md); }
[data-wbs-theme="v2"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--wbs-primary); }
[data-wbs-theme="v2"] .has-error .form-control, [data-wbs-theme="v2"] .form-control.error { border-color: var(--wbs-danger); }
[data-wbs-theme="v2"] .has-error .help-block,
[data-wbs-theme="v2"][data-wbs-theme] :where(label).error { color: var(--wbs-danger); font-weight: 500; }
[data-wbs-theme="v2"] .ui-autocomplete { border-radius: var(--wbs-radius-sm); border-color: var(--wbs-border-strong); box-shadow: var(--wbs-shadow-md); }
[data-wbs-theme="v2"] .ui-autocomplete .ui-state-active, [data-wbs-theme="v2"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: var(--wbs-primary-soft-2); border-color: transparent; color: var(--wbs-text);
}

/* 7. Tableaux ------------------------------------------------------------------------------------- */
[data-wbs-theme="v2"] .table > thead > tr > th, [data-wbs-theme="v2"] table.dataTable thead th {
    background: var(--wbs-surface-2);
    color: var(--wbs-muted);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
    vertical-align: bottom;
    border-bottom: 1px solid var(--wbs-border);
}
[data-wbs-theme="v2"] .table > tbody > tr > td, [data-wbs-theme="v2"] .table > tfoot > tr > td,
[data-wbs-theme="v2"] .table > tbody > tr > th {
    border-top: 1px solid var(--wbs-border);
    color: var(--wbs-text-2);
    vertical-align: middle;
}
[data-wbs-theme="v2"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
[data-wbs-theme="v2"]:not(wbs-nul) .table-hover > tbody > tr:hover > td,
[data-wbs-theme="v2"] table.dataTable > tbody > tr:hover > td { background-color: var(--wbs-surface-2); }
[data-wbs-theme="v2"] .table-bordered,
[data-wbs-theme="v2"] .table-bordered > thead > tr > th,
[data-wbs-theme="v2"] .table-bordered > thead > tr > td,
[data-wbs-theme="v2"] .table-bordered > tbody > tr > th,
[data-wbs-theme="v2"] .table-bordered > tbody > tr > td,
[data-wbs-theme="v2"] .table-bordered > tfoot > tr > th,
[data-wbs-theme="v2"] .table-bordered > tfoot > tr > td { border-color: var(--wbs-border); }
[data-wbs-theme="v2"][data-wbs-theme] .table > :where(tfoot) > :where(tr),
[data-wbs-theme="v2"][data-wbs-theme] :where(tr).footer-total,
[data-wbs-theme="v2"][data-wbs-theme] :where(tr).bg-gray,
[data-wbs-theme="v2"] .bg-gray.font-17 {
    background: var(--wbs-surface-3);
    color: var(--wbs-text);
    font-weight: 650;
}
[data-wbs-theme="v2"] .dataTables_wrapper .dataTables_info,
[data-wbs-theme="v2"] .dataTables_wrapper .dataTables_length,
[data-wbs-theme="v2"] .dataTables_wrapper .dataTables_filter { color: var(--wbs-muted); }
[data-wbs-theme="v2"] .dataTables_empty { color: var(--wbs-muted); padding: 28px 12px !important; }
[data-wbs-theme="v2"] .dataTables_processing {
    background: var(--wbs-surface);
    border: 1px solid var(--wbs-border);
    border-radius: var(--wbs-radius-sm);
    box-shadow: var(--wbs-shadow-md);
    color: var(--wbs-text-2);
}
[data-wbs-theme="v2"] .pagination > li > a,
[data-wbs-theme="v2"] .pagination > li > span {
    border: 1px solid var(--wbs-border);
    color: var(--wbs-text-2);
    background: var(--wbs-surface);
    margin-left: 4px;
    border-radius: var(--wbs-radius-sm) !important;
    min-width: 36px;
    text-align: center;
}
[data-wbs-theme="v2"] .pagination > li > a:hover,
[data-wbs-theme="v2"] .pagination > li > span:hover { background: var(--wbs-surface-3); color: var(--wbs-text); }
[data-wbs-theme="v2"] .pagination > .active > a,
[data-wbs-theme="v2"] .pagination > .active > span,
[data-wbs-theme="v2"] .pagination > .active > a:hover,
[data-wbs-theme="v2"] .pagination > .active > span:hover {
    background: var(--wbs-primary);
    border-color: var(--wbs-primary);
    color: var(--wbs-on-primary);
}
[data-wbs-theme="v2"] .pagination > .disabled > a,
[data-wbs-theme="v2"] .pagination > .disabled > span { color: var(--wbs-border-strong); background: var(--wbs-surface); }

/* 8. Modales, onglets, badges, alertes, notifications --------------------------------------------- */
[data-wbs-theme="v2"] .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--wbs-shadow-lg);
    background: var(--wbs-surface);
    overflow: hidden;
}
[data-wbs-theme="v2"] .modal-header { border-bottom: 1px solid var(--wbs-border); padding: 16px 20px; }
[data-wbs-theme="v2"] .modal-title { font-size: 17px; font-weight: 700; color: var(--wbs-text); letter-spacing: -.01em; }
[data-wbs-theme="v2"] .modal-body { padding: 18px 20px; }
[data-wbs-theme="v2"] .modal-footer { border-top: 1px solid var(--wbs-border); background: var(--wbs-surface-2); padding: 12px 20px; }
[data-wbs-theme="v2"] .modal-backdrop.in { opacity: .45; }

[data-wbs-theme="v2"] .nav-tabs { border-bottom: 1px solid var(--wbs-border); }
[data-wbs-theme="v2"] .nav-tabs > li > a { color: var(--wbs-muted); border: 0; border-bottom: 2px solid transparent; font-weight: 600; }
[data-wbs-theme="v2"] .nav-tabs > li > a:hover { background: transparent; color: var(--wbs-text); border-bottom-color: var(--wbs-border-strong); }
[data-wbs-theme="v2"] .nav-tabs > li.active > a,
[data-wbs-theme="v2"] .nav-tabs > li.active > a:hover,
[data-wbs-theme="v2"] .nav-tabs > li.active > a:focus {
    color: var(--wbs-primary-text); background: transparent; border: 0; border-bottom: 2px solid var(--wbs-primary);
}
[data-wbs-theme="v2"] .nav-tabs-custom { background: var(--wbs-surface); border-radius: var(--wbs-radius); box-shadow: var(--wbs-shadow); }
[data-wbs-theme="v2"] .nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--wbs-primary); }

[data-wbs-theme="v2"] .label,
[data-wbs-theme="v2"] .badge {
    display: inline-block;
    padding: .25em .7em;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1.4;
}
[data-wbs-theme="v2"][data-wbs-theme] .label-success,
[data-wbs-theme="v2"] .label.bg-green,
[data-wbs-theme="v2"] .badge.bg-green,
[data-wbs-theme="v2"] .label.bg-light-green { background: var(--wbs-success-soft) !important; color: var(--wbs-success) !important; }
[data-wbs-theme="v2"][data-wbs-theme] .label-danger,
[data-wbs-theme="v2"] .label.bg-red,
[data-wbs-theme="v2"] .badge.bg-red { background: var(--wbs-danger-soft) !important; color: var(--wbs-danger) !important; }
[data-wbs-theme="v2"][data-wbs-theme] .label-warning,
[data-wbs-theme="v2"] .label.bg-yellow,
[data-wbs-theme="v2"] .badge.bg-yellow,
[data-wbs-theme="v2"] .label.bg-orange { background: var(--wbs-warning-soft) !important; color: var(--wbs-warning) !important; }
[data-wbs-theme="v2"][data-wbs-theme] .label-info,
[data-wbs-theme="v2"][data-wbs-theme] .label-primary,
[data-wbs-theme="v2"] .label.bg-aqua,
[data-wbs-theme="v2"] .label.bg-blue,
[data-wbs-theme="v2"] .badge.bg-aqua,
[data-wbs-theme="v2"] .label.bg-info { background: var(--wbs-primary-soft-2) !important; color: var(--wbs-primary-text) !important; }
[data-wbs-theme="v2"][data-wbs-theme] .label-default,
[data-wbs-theme="v2"] .label.bg-gray,
[data-wbs-theme="v2"] .badge.bg-gray { background: var(--wbs-surface-3) !important; color: var(--wbs-text-2) !important; }

[data-wbs-theme="v2"] .alert { border-radius: var(--wbs-radius-sm); border: 1px solid transparent; }
[data-wbs-theme="v2"] .alert-success { background: var(--wbs-success-soft); color: var(--wbs-success); border-color: color-mix(in srgb, var(--wbs-success) 20%, transparent); }
[data-wbs-theme="v2"] .alert-danger { background: var(--wbs-danger-soft); color: var(--wbs-danger); border-color: color-mix(in srgb, var(--wbs-danger) 20%, transparent); }
[data-wbs-theme="v2"] .alert-warning { background: var(--wbs-warning-soft); color: var(--wbs-warning); border-color: color-mix(in srgb, var(--wbs-warning) 20%, transparent); }
[data-wbs-theme="v2"] .alert-info { background: var(--wbs-primary-soft); color: var(--wbs-primary-text); border-color: var(--wbs-primary-soft-2); }

[data-wbs-theme="v2"] #toast-container > .toast {
    border-radius: var(--wbs-radius-sm);
    box-shadow: var(--wbs-shadow-lg);
    opacity: 1;
    font-weight: 500;
}
[data-wbs-theme="v2"] #toast-container > .toast-success { background-color: var(--wbs-success); }
[data-wbs-theme="v2"] #toast-container > .toast-error { background-color: var(--wbs-danger); }
[data-wbs-theme="v2"] #toast-container > .toast-warning { background-color: var(--wbs-warning); }
[data-wbs-theme="v2"] #toast-container > .toast-info { background-color: var(--wbs-primary); }

[data-wbs-theme="v2"] .swal-modal { border-radius: 16px; }
[data-wbs-theme="v2"] .swal-title { color: var(--wbs-text); font-weight: 700; }
[data-wbs-theme="v2"] .swal-text { color: var(--wbs-text-2); }
[data-wbs-theme="v2"] .swal-button { border-radius: var(--wbs-radius-sm); font-weight: 600; }
[data-wbs-theme="v2"] .swal-button--confirm { background: var(--wbs-primary); }
[data-wbs-theme="v2"] .swal-button--confirm:not([disabled]):hover { background: var(--wbs-primary-hover); }
[data-wbs-theme="v2"] .swal-button--danger { background: var(--wbs-danger); }

[data-wbs-theme="v2"] .dropdown-menu {
    border: 1px solid var(--wbs-border);
    border-radius: var(--wbs-radius-sm);
    box-shadow: var(--wbs-shadow-md);
    padding: 6px;
}
[data-wbs-theme="v2"] .dropdown-menu > li > a { border-radius: 6px; color: var(--wbs-text-2); padding: 7px 12px; }
[data-wbs-theme="v2"] .dropdown-menu > li > a:hover { background: var(--wbs-surface-3); color: var(--wbs-text); }

/* Bascule clair / sombre (bouton de l'en-tête, thème v2 uniquement). */
[data-wbs-theme="v2"] #wbs-scheme-toggle .wbs-scheme-icon { display: none; }
[data-wbs-theme="v2"][data-wbs-scheme="auto"] #wbs-scheme-toggle .wbs-scheme-auto,
[data-wbs-theme="v2"][data-wbs-scheme="light"] #wbs-scheme-toggle .wbs-scheme-light,
[data-wbs-theme="v2"][data-wbs-scheme="dark"] #wbs-scheme-toggle .wbs-scheme-dark { display: inline; }

/* 9. Mode sombre ---------------------------------------------------------------------------------- */
:root[data-wbs-theme="v2"][data-wbs-scheme="dark"] {
    --wbs-primary-text: color-mix(in srgb, var(--theme-700, #234A86) 45%, #ffffff);
    --wbs-primary-soft: color-mix(in srgb, var(--theme-700, #234A86) 22%, #121826);
    --wbs-primary-soft-2: color-mix(in srgb, var(--theme-700, #234A86) 34%, #121826);
    --wbs-bg: #0B0F17;
    --wbs-surface: #121826;
    --wbs-surface-2: #161E2E;
    --wbs-surface-3: #1C2638;
    --wbs-border: #243046;
    --wbs-border-strong: #34425C;
    --wbs-text: #E7EBF2;
    --wbs-text-2: #C4CCDA;
    --wbs-muted: #8D9AB1;
    --wbs-success: #4ADE80;
    --wbs-success-soft: #12301F;
    --wbs-warning: #F5A25B;
    --wbs-warning-soft: #36230F;
    --wbs-danger: #F87171;
    --wbs-danger-soft: #3A1717;
    --wbs-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --wbs-shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
    --wbs-shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-wbs-theme="v2"][data-wbs-scheme="auto"] {
        --wbs-primary-text: color-mix(in srgb, var(--theme-700, #234A86) 45%, #ffffff);
        --wbs-primary-soft: color-mix(in srgb, var(--theme-700, #234A86) 22%, #121826);
        --wbs-primary-soft-2: color-mix(in srgb, var(--theme-700, #234A86) 34%, #121826);
        --wbs-bg: #0B0F17;
        --wbs-surface: #121826;
        --wbs-surface-2: #161E2E;
        --wbs-surface-3: #1C2638;
        --wbs-border: #243046;
        --wbs-border-strong: #34425C;
        --wbs-text: #E7EBF2;
        --wbs-text-2: #C4CCDA;
        --wbs-muted: #8D9AB1;
        --wbs-success: #4ADE80;
        --wbs-success-soft: #12301F;
        --wbs-warning: #F5A25B;
        --wbs-warning-soft: #36230F;
        --wbs-danger: #F87171;
        --wbs-danger-soft: #3A1717;
        --wbs-shadow: 0 1px 2px rgba(0, 0, 0, .4);
        --wbs-shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
        --wbs-shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}
/* Surfaces et textes codés en dur par les classes Tailwind et Bootstrap, ramenés aux jetons.
   Ces règles valent aussi en clair (jetons clairs), donc elles ne changent rien d'autre que la cohérence. */
[data-wbs-theme="v2"] .tw-bg-white,
[data-wbs-theme="v2"] .bg-white,
[data-wbs-theme="v2"] .well { background-color: var(--wbs-surface); }
[data-wbs-theme="v2"] .tw-bg-gray-50,
[data-wbs-theme="v2"] .tw-bg-slate-50 { background-color: var(--wbs-surface-2); }
[data-wbs-theme="v2"] .tw-text-gray-900,
[data-wbs-theme="v2"] .tw-text-gray-800,
[data-wbs-theme="v2"] .tw-text-black,
[data-wbs-theme="v2"] .tw-text-slate-900 { color: var(--wbs-text); }
[data-wbs-theme="v2"] .tw-text-gray-700,
[data-wbs-theme="v2"] .tw-text-gray-600,
[data-wbs-theme="v2"] .tw-text-slate-600 { color: var(--wbs-text-2); }
[data-wbs-theme="v2"] .tw-text-gray-500,
[data-wbs-theme="v2"] .tw-text-gray-400,
[data-wbs-theme="v2"] .tw-text-slate-400,
[data-wbs-theme="v2"] .tw-text-slate-500 { color: var(--wbs-muted); }
[data-wbs-theme="v2"] .tw-border-gray-100,
[data-wbs-theme="v2"] .tw-border-gray-200,
[data-wbs-theme="v2"] .tw-border-gray-300,
[data-wbs-theme="v2"] .tw-border-\[\#e5e7eb\],
[data-wbs-theme="v2"] .tw-border-\[\#D1D5DA\] { border-color: var(--wbs-border); }
[data-wbs-theme="v2"] .tw-ring-gray-200,
[data-wbs-theme="v2"] .tw-ring-gray-100 { --tw-ring-color: var(--wbs-border); }
[data-wbs-theme="v2"] .highcharts-background { fill: transparent; }
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .highcharts-axis-labels text,
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .highcharts-legend-item text,
[data-wbs-theme="v2"]:not(wbs-nul)[data-wbs-scheme="dark"] .highcharts-title { fill: var(--wbs-text-2) !important; }
[data-wbs-theme="v2"]:not(wbs-nul)[data-wbs-scheme="dark"] .table,
[data-wbs-theme="v2"]:not(wbs-nul)[data-wbs-scheme="dark"] .dataTables_wrapper,
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .content-header > h1,
[data-wbs-theme="v2"][data-wbs-theme][data-wbs-scheme="dark"] h1,
[data-wbs-theme="v2"][data-wbs-theme][data-wbs-scheme="dark"] h2,
[data-wbs-theme="v2"][data-wbs-theme][data-wbs-scheme="dark"] h3,
[data-wbs-theme="v2"][data-wbs-theme][data-wbs-scheme="dark"] h4,
[data-wbs-theme="v2"][data-wbs-theme][data-wbs-scheme="dark"] h5,
[data-wbs-theme="v2"][data-wbs-theme][data-wbs-scheme="dark"] h6,
[data-wbs-theme="v2"]:not(wbs-nul)[data-wbs-scheme="dark"] .box-title { color: var(--wbs-text); }
[data-wbs-theme="v2"][data-wbs-scheme="dark"] img:not([src$=".svg"]) { filter: brightness(.92); }


/* 10. Compléments : composants repérés sur les captures de la recette ------------------------------ */
/* Boutons et liens en dégradé (« Ajouter », « Download Excel », connexion…) : couleur principale unie. */
[data-wbs-theme="v2"][data-wbs-theme] :where(a)[class*="tw-bg-gradient-to-"]:not([class*="tw-bg-clip-text"]),
[data-wbs-theme="v2"][data-wbs-theme] :where(button)[class*="tw-bg-gradient-to-"]:not([class*="tw-bg-clip-text"]),
[data-wbs-theme="v2"] .tw-dw-btn[class*="tw-bg-gradient-to-"]:not([class*="tw-bg-clip-text"]) {
    background: var(--wbs-primary);
    background-image: none;
    color: var(--wbs-on-primary);
    border-color: var(--wbs-primary);
}
[data-wbs-theme="v2"][data-wbs-theme] :where(a)[class*="tw-bg-gradient-to-"]:not([class*="tw-bg-clip-text"]):hover,
[data-wbs-theme="v2"][data-wbs-theme] :where(button)[class*="tw-bg-gradient-to-"]:not([class*="tw-bg-clip-text"]):hover,
[data-wbs-theme="v2"] .tw-dw-btn[class*="tw-bg-gradient-to-"]:not([class*="tw-bg-clip-text"]):hover { background: var(--wbs-primary-hover); }
/* Texte en dégradé (« Mot de passe oublié ? ») : simple lien de la couleur principale. */
[data-wbs-theme="v2"] [class*="tw-bg-clip-text"] {
    background: none;
    color: var(--wbs-primary-text);
    -webkit-text-fill-color: currentColor;
}
/* Couleurs AdminLTE posées sur des boutons : ramenées à la palette. */
[data-wbs-theme="v2"] .btn.bg-blue, [data-wbs-theme="v2"] .btn.bg-light-blue { background: var(--wbs-primary); color: var(--wbs-on-primary); border-color: var(--wbs-primary); }
[data-wbs-theme="v2"] .btn.bg-green, [data-wbs-theme="v2"] .btn.bg-olive { background: var(--wbs-success); color: #fff; border-color: var(--wbs-success); }
[data-wbs-theme="v2"] .btn.bg-red { background: var(--wbs-danger); color: #fff; border-color: var(--wbs-danger); }
[data-wbs-theme="v2"] .btn.bg-yellow,
[data-wbs-theme="v2"] .btn.bg-orange { background: var(--wbs-warning-soft); color: var(--wbs-warning); border-color: transparent; }
[data-wbs-theme="v2"] .btn.bg-aqua,
[data-wbs-theme="v2"] .btn.bg-teal { background: var(--wbs-primary-soft-2); color: var(--wbs-primary-text); border-color: transparent; }
/* Pointage RH (module Essentials) dans l'en-tête : boutons discrets comme les autres outils. */
[data-wbs-theme="v2"] .clock_in_btn,
[data-wbs-theme="v2"] .clock_out_btn {
    background: var(--wbs-surface) !important;
    border: 1px solid var(--wbs-border) !important;
    border-radius: var(--wbs-radius-sm);
    color: var(--wbs-text-2) !important;
}
[data-wbs-theme="v2"] .clock_in_btn i, [data-wbs-theme="v2"] .clock_in_btn svg { color: var(--wbs-success); }
[data-wbs-theme="v2"] .clock_out_btn i, [data-wbs-theme="v2"] .clock_out_btn svg { color: var(--wbs-warning); }
/* Icônes d'aide (?) et textes « info » : couleurs de la charte au lieu du cyan. */
[data-wbs-theme="v2"] .text-info { color: var(--wbs-primary-text); }
[data-wbs-theme="v2"] .fa-info-circle.text-info,
[data-wbs-theme="v2"] .hover-q.text-info,
[data-wbs-theme="v2"][data-wbs-theme] .fa-info-circle { color: var(--wbs-accent); }
/* Tableau de bord : pastilles d'icônes sur les jetons ; le jaune devient l'orangé d'avertissement. */
[data-wbs-theme="v2"] .dash-icon-yellow,
[data-wbs-theme="v2"] .tw-bg-yellow-100,
[data-wbs-theme="v2"] .tw-bg-yellow-50 { background: var(--wbs-warning-soft); color: var(--wbs-warning); }
[data-wbs-theme="v2"] .tw-text-yellow-500,
[data-wbs-theme="v2"] .tw-text-yellow-600,
[data-wbs-theme="v2"] .tw-text-amber-500 { color: var(--wbs-warning); }
[data-wbs-theme="v2"] .dash-icon-green { background: var(--wbs-success-soft); color: var(--wbs-success); }
[data-wbs-theme="v2"] .dash-icon-red { background: var(--wbs-danger-soft); color: var(--wbs-danger); }
[data-wbs-theme="v2"] .dash-icon-sky { background: var(--wbs-primary-soft-2); color: var(--wbs-primary-text); }
[data-wbs-theme="v2"] .dash-hero-number { letter-spacing: -.02em; font-weight: 700; }
[data-wbs-theme="v2"] .dash-top.theme-header-bg { background: transparent; border-bottom: 0; }
[data-wbs-theme="v2"] .dash-k-purchase .bg-sky-100 { background: var(--wbs-primary-soft-2); color: var(--wbs-primary-text); }
/* Caisse : horodatage et bandeau de l'écran client dans la palette. */
[data-wbs-theme="v2"] .tw-bg-\[\#646EE4\] { background: var(--wbs-primary); }
[data-wbs-theme="v2"] .hover\:tw-bg-\[\#414aac\]:hover { background: var(--wbs-primary-hover); }
[data-wbs-theme="v2"] .box.bg-orange { background: var(--wbs-primary) !important; color: var(--wbs-on-primary) !important; border-color: var(--wbs-primary); }

/* 11. Pages publiques (connexion, inscription, mot de passe) : fond bleu marine de la charte. --------- */
/* Classe posée par le gabarit auth2 (un :root:has() était réévalué à chaque modification du DOM, #8). */
[data-wbs-theme="v2"] body.wbs-public {
    background:
        radial-gradient(900px 520px at 88% -8%, color-mix(in srgb, var(--wbs-accent) 38%, transparent), transparent 62%),
        radial-gradient(700px 480px at -10% 110%, color-mix(in srgb, var(--wbs-accent) 22%, transparent), transparent 60%),
        linear-gradient(160deg, var(--theme-900, #132B50) 0%, var(--theme-800, #1B3A6B) 55%, var(--theme-700, #24497F) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    /* AdminLTE fixe html, body à 100 % : sans cela, le fond s'arrête à la hauteur de l'écran (#9). */
    height: auto;
}
[data-wbs-theme="v2"] .eq-height-row .right-col .tw-bg-white,
[data-wbs-theme="v2"] .eq-height-row .right-col form.tw-bg-white {
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(8, 8, 7, .28);
}

/* 12. Mode sombre : retouches repérées sur les captures. --------------------------------------------- */
[data-wbs-theme="v2"][data-wbs-scheme="dark"] aside.side-bar img[src*="wbs-sigle.svg"] { filter: invert(1) brightness(1.4); }
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .highcharts-grid-line,
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .highcharts-axis-line,
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .highcharts-tick { stroke: var(--wbs-border) !important; }
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .highcharts-button-symbol { stroke: var(--wbs-text-2) !important; }
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .dash-chart .highcharts-series-group,
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .dash-hero-mini-chart .highcharts-series-group { filter: brightness(1.7) saturate(1.1); }
[data-wbs-theme="v2"][data-wbs-scheme="dark"] .highcharts-axis-title { fill: var(--wbs-muted) !important; }
@media (prefers-color-scheme: dark) {
    [data-wbs-theme="v2"][data-wbs-scheme="auto"] aside.side-bar img[src*="wbs-sigle.svg"] { filter: invert(1) brightness(1.4); }
    [data-wbs-theme="v2"][data-wbs-scheme="auto"] .highcharts-grid-line,
    [data-wbs-theme="v2"][data-wbs-scheme="auto"] .highcharts-axis-line,
    [data-wbs-theme="v2"][data-wbs-scheme="auto"] .highcharts-tick { stroke: var(--wbs-border) !important; }
    [data-wbs-theme="v2"][data-wbs-scheme="auto"] .dash-chart .highcharts-series-group,
    [data-wbs-theme="v2"][data-wbs-scheme="auto"] .dash-hero-mini-chart .highcharts-series-group { filter: brightness(1.7) saturate(1.1); }
    [data-wbs-theme="v2"][data-wbs-scheme="auto"] .highcharts-axis-labels text,
    [data-wbs-theme="v2"][data-wbs-scheme="auto"] .highcharts-legend-item text,
    [data-wbs-theme="v2"]:not(wbs-nul)[data-wbs-scheme="auto"] .highcharts-axis-title { fill: var(--wbs-text-2) !important; }
}

/* 13. Écrans spécifiques (lots L8 à L12) ----------------------------------------------------------- */
/* L8 — Liens voulus blancs (en-tête des pages publiques) : la couleur générale des liens les rendait invisibles. */
[data-wbs-theme="v2"] a.tw-text-white, [data-wbs-theme="v2"] a.tw-text-white:hover { color: #fff; }
/* L8 — « Mot de passe oublié ? » (texte en dégradé) : la règle des boutons principaux, plus spécifique, lui
   donnait un fond plein ; ramené à un simple lien. */
[data-wbs-theme="v2"] a[class*="tw-bg-clip-text"][class*="tw-bg-gradient-to-"] {
    background: none;
    border-color: transparent;
    color: var(--wbs-primary-text);
    -webkit-text-fill-color: currentColor;
}
[data-wbs-theme="v2"] a[class*="tw-bg-clip-text"][class*="tw-bg-gradient-to-"]:hover,
[data-wbs-theme="v2"] a[class*="tw-bg-clip-text"][class*="tw-bg-gradient-to-"]:focus { background: none; text-decoration: underline; }
/* L8 — Cartes « mot de passe » centrées : la colonne vide de décalage (col-md-4) est sans effet en flex. */
[data-wbs-theme="v2"] .eq-height-row .right-col > .col-md-4:not(.col-xs-12):not(:has(*)) { display: none; }
[data-wbs-theme="v2"] .eq-height-row .right-col > .col-md-4.col-xs-12 { float: none; align-self: center; width: 100%; max-width: 28rem; }

/* L9 — Tuiles AdminLTE (small-box : Superadmin, ventes suspendues) : carte sobre et liseré de couleur au lieu
   des aplats vifs. AdminLTE pose ses couleurs bg-* en !important. */
[data-wbs-theme="v2"] .small-box[class*="bg-"] {
    background-color: var(--wbs-surface) !important;
    color: var(--wbs-text) !important;
    border-top: 3px solid var(--wbs-primary);
}
[data-wbs-theme="v2"] .small-box.bg-green { border-top-color: var(--wbs-success); }
[data-wbs-theme="v2"] .small-box.bg-yellow,
[data-wbs-theme="v2"] .small-box.bg-orange { border-top-color: var(--wbs-warning); }
[data-wbs-theme="v2"] .small-box.bg-red { border-top-color: var(--wbs-danger); }
[data-wbs-theme="v2"] .small-box > .inner h3 { color: var(--wbs-text); }
[data-wbs-theme="v2"] .small-box > .inner p { color: var(--wbs-text-2); }
[data-wbs-theme="v2"] .small-box > .icon { color: var(--wbs-muted); opacity: .25; }
[data-wbs-theme="v2"] .small-box > .small-box-footer { background: var(--wbs-surface-2); color: var(--wbs-primary-text); }

/* L11 — Caisse : panier (en-têtes en couleurs claires figées par !important) et barre d'actions sur les jetons
   du thème. Rendu clair inchangé ; le mode sombre suit. */
[data-wbs-theme="v2"] #pos_table, [data-wbs-theme="v2"] #pos_table > tbody > tr > td { background-color: var(--wbs-surface); }
[data-wbs-theme="v2"] #pos_table > thead > tr > th {
    background: var(--wbs-surface-2) !important;
    color: var(--wbs-muted) !important;
    border-color: var(--wbs-border) !important;
}
[data-wbs-theme="v2"] .pos-empty-state-row .tw-bg-slate-100 { background: var(--wbs-surface-2); }
/* Champs du panier : app.css fixe leur texte en #1e293b (body.lockscreen #pos_table .form-control), illisible sur le
   fond sombre du thème ; sous-total et bloc des totaux (couleurs claires écrites dans la vue) idem. */
[data-wbs-theme="v2"] body.lockscreen #pos_table .form-control,
[data-wbs-theme="v2"] body.lockscreen #pos_table .input-group .form-control.pos_quantity,
[data-wbs-theme="v2"] body.lockscreen #pos_table .input-group .form-control.pos_unit_price_inc_tax {
    background-color: var(--wbs-surface);
    border-color: var(--wbs-border-strong);
    color: var(--wbs-text);
}
[data-wbs-theme="v2"] body.lockscreen #pos_table .display_currency.pos_line_total_text { color: var(--wbs-text); }
[data-wbs-theme="v2"] .pos_form_totals,
[data-wbs-theme="v2"] .pos_form_totals .pos_totals_cell { background: var(--wbs-surface-2); }
[data-wbs-theme="v2"] .pos_form_totals .pos_totals_left { background: var(--wbs-border); }
[data-wbs-theme="v2"] .pos_form_totals .pos_totals_label { color: var(--wbs-muted); }
[data-wbs-theme="v2"] .pos_form_totals .pos_totals_value { color: var(--wbs-text); }
[data-wbs-theme="v2"] .pos_form_totals .pos_totals_right { background: var(--wbs-success-soft); border-top-color: var(--wbs-border); }
[data-wbs-theme="v2"] .pos_form_totals .pos_totals_right_label,
[data-wbs-theme="v2"] .pos_form_totals .pos_totals_right_value { color: var(--wbs-success); }
[data-wbs-theme="v2"] .pos-form-actions {
    background: var(--wbs-surface);
    box-shadow: 0 -1px 0 var(--wbs-border), 0 -6px 16px rgba(8, 8, 7, .06);
}

/* L12 — Écran client : montants jamais coupés (« $ » puis « 0.00 » à la ligne), total à payer lisible à distance. */
[data-wbs-theme="v2"] body.wbs-page-display .display_currency { white-space: nowrap; }
[data-wbs-theme="v2"] body.wbs-page-display #total_payable { font-size: 2rem; line-height: 2.25rem; font-weight: 700; }
:where([data-wbs-theme="v2"]):not(#wbs-nul) body.wbs-page-display .total_quantity,
:where([data-wbs-theme="v2"]):not(#wbs-nul) body.wbs-page-display .price_total,
[data-wbs-theme="v2"] body.wbs-page-display #total_discount,
[data-wbs-theme="v2"] body.wbs-page-display #order_tax,
[data-wbs-theme="v2"] body.wbs-page-display #shipping_charges_amount,
[data-wbs-theme="v2"] body.wbs-page-display #total_payable { display: block; white-space: nowrap; }

} /* @media screen */

/* 13. Tarification (#10) : page publique /pricing et écran d'abonnement, forfaits en cartes. -------------- */
[data-wbs-theme="v2"] .wbs-tarifs { max-width: 1140px; margin: 2.5rem auto 1rem; width: 100%; }
[data-wbs-theme="v2"] .wbs-tarifs-entete { text-align: center; color: #fff; margin-bottom: 1.75rem; }
[data-wbs-theme="v2"] .wbs-tarifs-entete h1 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .6rem; }
[data-wbs-theme="v2"] .wbs-tarifs-entete p { color: #D3DFF1; font-size: 1.08rem; max-width: 40rem; margin: 0 auto; }
/* bascule Mensuel / Annuel : couleurs du thème dans l application (écran d’abonnement)… */
[data-wbs-theme="v2"] .wbs-plans-bascule {
    display: flex; width: max-content; margin: 0 auto 1.75rem; padding: 4px; gap: 4px; border-radius: 999px;
    background: var(--wbs-surface-2); border: 1px solid var(--wbs-border);
}
[data-wbs-theme="v2"] .wbs-plans-periode {
    border: 0; border-radius: 999px; padding: .55rem 1.2rem; font-weight: 600; color: var(--wbs-text); background: transparent;
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
}
[data-wbs-theme="v2"] .wbs-plans-periode.is-active { background: var(--wbs-primary); color: var(--wbs-on-primary); }
/* …et blanc sur le fond marine de la page publique, en clair comme en sombre */
[data-wbs-theme="v2"] .wbs-tarifs .wbs-plans-bascule { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
[data-wbs-theme="v2"] .wbs-tarifs .wbs-plans-periode { color: #fff; }
[data-wbs-theme="v2"] .wbs-tarifs .wbs-plans-periode.is-active { background: #fff; color: #1B3A6B; }
[data-wbs-theme="v2"] .wbs-plans-remise { font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: #E7F6EC; color: #1F7A3F; }
[data-wbs-theme="v2"] .wbs-plans { row-gap: 1.25rem; align-items: stretch; }
[data-wbs-theme="v2"] .wbs-plan-col { display: flex; }
[data-wbs-theme="v2"] .wbs-plan {
    position: relative; display: flex; flex-direction: column; width: 100%; margin: 0;
    border: 1px solid var(--wbs-border); border-radius: 18px; box-shadow: 0 18px 48px rgba(8, 8, 7, .22); overflow: visible;
}
[data-wbs-theme="v2"] .wbs-plan.wbs-plan-vedette { border: 2px solid var(--wbs-accent); box-shadow: 0 24px 64px rgba(8, 8, 7, .32); }
[data-wbs-theme="v2"] .wbs-plan-badge {
    position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .3rem .9rem;
    border-radius: 999px; background: var(--wbs-accent); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
[data-wbs-theme="v2"] .wbs-plan .box-header { border-bottom: 0; padding: 1.6rem 1.4rem .2rem; }
[data-wbs-theme="v2"] .wbs-plan .box-title { font-size: 1.45rem; font-weight: 800; }
[data-wbs-theme="v2"] .wbs-plan-accroche { margin: .35rem 0 0; color: var(--wbs-muted); font-size: .95rem; }
[data-wbs-theme="v2"] .wbs-plan .box-body { padding: .6rem 1.6rem 1rem; flex: 1; }
[data-wbs-theme="v2"] .wbs-plan-prix { padding: .9rem 0 1.1rem; border-bottom: 1px solid var(--wbs-border); margin-bottom: 1rem; }
[data-wbs-theme="v2"] .wbs-plan-prix strong { display: block; font-size: 2.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--wbs-text); }
[data-wbs-theme="v2"] .wbs-plan-prix small { color: var(--wbs-muted); font-size: .92rem; }
[data-wbs-theme="v2"] .wbs-plan-equivalent { margin-top: .25rem; color: #1F7A3F; font-size: .88rem; font-weight: 600; }
[data-wbs-theme="v2"] .wbs-plan-inclus { list-style: none; padding: 0; margin: 0; text-align: left; }
[data-wbs-theme="v2"] .wbs-plan-inclus li { position: relative; padding: .38rem 0 .38rem 1.75rem; color: var(--wbs-text); line-height: 1.4; }
[data-wbs-theme="v2"] .wbs-plan-inclus li::before {
    content: ""; position: absolute; left: 0; top: .55rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: color-mix(in srgb, var(--wbs-accent) 16%, transparent)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%232D5596' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .8rem no-repeat;
}
[data-wbs-theme="v2"] .wbs-plan-inclus li.wbs-plan-essai { font-weight: 600; }
[data-wbs-theme="v2"] .wbs-plan .box-footer { background: transparent; border-top: 0; padding: .4rem 1.6rem 1.6rem; }
[data-wbs-theme="v2"] .wbs-plan .box-footer .btn { border-radius: 12px; padding: .75rem 1rem; font-weight: 700; }
[data-wbs-theme="v2"] .wbs-plan.wbs-plan-vedette .box-footer .btn { background: var(--wbs-primary); border-color: var(--wbs-primary); color: var(--wbs-on-primary); }
[data-wbs-theme="v2"] .wbs-plan:not(.wbs-plan-vedette) .box-footer .btn {
    background: transparent; color: var(--wbs-primary-text); border: 1.5px solid var(--wbs-primary);
}
[data-wbs-theme="v2"] .wbs-tarifs-pied { text-align: center; color: #D3DFF1; margin-top: 2rem; font-size: .95rem; }
[data-wbs-theme="v2"] .wbs-tarifs-pied p { margin: .35rem 0; }
[data-wbs-theme="v2"] .wbs-tarifs-pied a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991px) {
    [data-wbs-theme="v2"] .wbs-plan-col { max-width: 30rem; width: 100%; }
}