/* HelloServ : tokens du panel client (proposition chantier 616, modèle console FlexiShield).
   Chargé après theme.css. Les gris Tailwind (gray-100 à gray-900) et `sidebar` lisent ces
   variables (config dans layouts/header.php) : un seul endroit pour la palette.
   Sombre, 3 niveaux : page (--hs-page) < nav/en-tête (--hs-nav) < cartes (--hs-surface). */

:root {
  --hs-page: #0c0e13;          /* gray-900 : fond de page */
  --hs-marque-applepay: #000;  /* couleurs imposées par les marques de paiement */
  --hs-marque-paypal: #0070ba;
  --hs-marque-paypal-fort: #005ea6;
  --hs-nav: #12151c;           /* sidebar, en-tête */
  --hs-surface: #171b23;       /* gray-800 : cartes, tableaux */
  --hs-surface-2: #1e232d;     /* gray-700 : champs, blocs imbriqués, tête de tableau */
  --hs-survol: #232935;
  --hs-bord: #262c37;
  --hs-bord-fort: #353c4a;     /* gray-600 */
  --hs-texte: #e6e8ec;         /* 14.6:1 sur surface */
  --hs-texte-2: #c3c8d1;       /* 10.3:1 */
  --hs-muet: #9aa2b1;          /* 6.9:1 */
  --hs-muet-2: #7b8494;        /* 4.6:1, libellés secondaires seulement */
  --hs-rouge: #dc2626;         /* bouton plein, texte blanc 4.83:1 */
  --hs-rouge-fort: #b91c1c;    /* survol, 6.47:1 */
  --hs-rouge-texte: #f87171;   /* texte rouge sur surface 6.4:1 */
  --hs-rouge-doux: #2a1517;
  --hs-nav-actif: #1f1a1d;
  --hs-nav-texte: #c3c8d1;
  --hs-nav-icone: #8a93a3;
  --hs-ombre: 0 1px 2px rgba(0, 0, 0, .25);
  --hs-rayon: 8px;
  --hs-rayon-sm: 6px;
  --hs-rayon-xs: 4px;
  /* canaux RGB pour Tailwind (opacité /50 etc.) */
  --g100: 238 240 243; --g200: 227 230 235; --g300: 201 206 215; --g400: 163 171 185;
  --g500: 138 147 163; --g600: 53 60 74; --g700: 30 35 45; --g800: 23 27 35; --g900: 12 14 19;
  --sb: 18 21 28; --sb-border: 38 44 55;
  color-scheme: dark;
}

html.light {
  --hs-page: #f4f5f7;
  --hs-nav: #ffffff;
  --hs-surface: #ffffff;
  --hs-surface-2: #f8f9fb;
  --hs-survol: #f1f3f6;
  --hs-bord: #e3e6eb;
  --hs-bord-fort: #cfd4dc;
  --hs-texte: #111827;         /* 17.7:1 sur blanc */
  --hs-texte-2: #374151;       /* 10.3:1 */
  --hs-muet: #5f6878;          /* 5.6:1 sur blanc, 5.2:1 sur la page */
  --hs-muet-2: #6b7280;        /* 4.8:1 */
  --hs-rouge-texte: #c81e1e;   /* 5.9:1 sur blanc */
  --hs-rouge-doux: #fdf0f0;
  --hs-nav-actif: #fbeeee;
  --hs-nav-texte: #374151;
  --hs-nav-icone: #6b7280;
  --hs-ombre: 0 1px 2px rgba(16, 24, 40, .05);
  --sb: 255 255 255; --sb-border: 227 230 235;
  color-scheme: light;
}

/* ---- Fonds : trois niveaux distincts ---- */
body, main { background-color: var(--hs-page) !important; }
html.light body, html.light main { background-color: var(--hs-page) !important; color: var(--hs-texte-2) !important; }
aside.bg-sidebar, header.bg-sidebar { background-color: var(--hs-nav) !important; border-color: var(--hs-bord) !important; }
html.light main .bg-gray-800 { background-color: var(--hs-surface) !important; border-color: var(--hs-bord) !important; box-shadow: var(--hs-ombre) !important; }
html.light main .bg-gray-900, html.light main .bg-gray-900\/50, html.light main .bg-gray-700 { background-color: var(--hs-surface-2) !important; }
html.light main .border-gray-700, html.light main .border-gray-600, html.light main .border-gray-800 { border-color: var(--hs-bord) !important; }
html.light main .text-gray-400, html.light main .text-gray-500 { color: var(--hs-muet) !important; }

/* ---- Cartes : bord fin, rayon 8, ombre quasi nulle ---- */
main .rounded-xl, main .rounded-2xl { border-radius: var(--hs-rayon) !important; }
main .shadow-lg, main .shadow-xl, main .shadow-2xl { box-shadow: var(--hs-ombre) !important; }
main .bg-gray-800 { border-color: var(--hs-bord); }

/* ---- Nav latérale : texte neutre, actif = fond doux + barre rouge 2px ---- */
aside.bg-sidebar .sidebar-link { border-radius: var(--hs-rayon-sm) !important; color: var(--hs-nav-texte); font-size: .875rem; }
aside.bg-sidebar .sidebar-link:not(.active):hover { background-color: var(--hs-survol) !important; color: var(--hs-texte) !important; }
aside.bg-sidebar .sidebar-link .sidebar-icon { color: var(--hs-nav-icone) !important; }
aside.bg-sidebar .sidebar-link.active { background-color: var(--hs-nav-actif) !important; color: var(--hs-texte) !important; border-left-color: var(--hs-rouge) !important; }
aside.bg-sidebar .sidebar-link.active .sidebar-icon { color: var(--hs-rouge-texte) !important; }
html.light aside.bg-sidebar .sidebar-link.active { background-color: var(--hs-nav-actif) !important; }

/* ---- Typo : titres 600, léger serrage, chiffres tabulaires ---- */
main h1 { font-size: 1.375rem !important; font-weight: 600 !important; letter-spacing: -.01em; line-height: 1.3; }
main h2 { font-weight: 600 !important; letter-spacing: -.01em; }
main table, .hs-num { font-variant-numeric: tabular-nums; }

/* ---- Boutons : rouge de marque plein, texte blanc (jamais noir sur rouge) ---- */
main .bg-red-500, main .bg-red-600 { background-color: var(--hs-rouge) !important; color: #fff !important; }
main .hover\:bg-red-600:hover, main .hover\:bg-red-700:hover { background-color: var(--hs-rouge-fort) !important; }
main .bg-red-400 { background-color: var(--hs-rouge) !important; color: #fff !important; }
html.light main .bg-red-400, html.light main .bg-red-500, html.light main .bg-red-600 { background-color: var(--hs-rouge) !important; color: #fff !important; }
html.light main .hover\:bg-red-300:hover, html.light main .hover\:bg-red-400:hover,
html.light main .hover\:bg-red-500:hover, html.light main .hover\:bg-red-600:hover { background-color: var(--hs-rouge-fort) !important; }
/* secondaire : les boutons gris pleins deviennent des boutons à bord (FlexiShield outline-secondary) */
html :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-600, html :where(body:not(:has(link[href*="basket.css"]))) main button.bg-gray-600, html :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-700.text-white, html :where(body:not(:has(link[href*="basket.css"]))) main button.bg-gray-700.text-white {
  background-color: var(--hs-surface) !important; color: var(--hs-texte-2) !important;
  border: 1px solid var(--hs-bord-fort) !important; box-shadow: none !important;
}
html :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-600:hover, html :where(body:not(:has(link[href*="basket.css"]))) main button.bg-gray-600:hover, html :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-700.text-white:hover, html :where(body:not(:has(link[href*="basket.css"]))) main button.bg-gray-700.text-white:hover {
  background-color: var(--hs-survol) !important; color: var(--hs-texte) !important;
}
html.light :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-600, html.light :where(body:not(:has(link[href*="basket.css"]))) main button.bg-gray-600, html.light :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-700.text-white, html.light :where(body:not(:has(link[href*="basket.css"]))) main button.bg-gray-700.text-white {
  background-color: var(--hs-surface) !important; color: var(--hs-texte-2) !important;
}
/* theme.css force le blanc sur tout a.bg-gray-700 en clair (fond clair : illisible, ex. « Voir » des factures) ; têtes de tableau bg-gray-700/40 restées sombres. */
html.light :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-700:not(.text-white) {
  background-color: var(--hs-surface) !important; color: var(--hs-texte-2) !important; border: 1px solid var(--hs-bord-fort);
}
html.light :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-700:not(.text-white):hover { background-color: var(--hs-survol) !important; color: var(--hs-texte) !important; }
html.light :where(body:not(:has(link[href*="basket.css"]))) main thead.bg-gray-700\/40, html.light :where(body:not(:has(link[href*="basket.css"]))) main tr.bg-gray-700\/40, html.light :where(body:not(:has(link[href*="basket.css"]))) main .bg-gray-900\/40 { background-color: var(--hs-surface-2) !important; }
/* Bouton carte de la facture : logos Visa/Mastercard blancs, le fond reste sombre en clair (comme Apple Pay). */
html.light :where(body:not(:has(link[href*="basket.css"]))) main button[data-invoice-mollie="creditcard"] { background-color: #374151 !important; border-color: #374151 !important; }
:where(body:not(:has(link[href*="basket.css"]))) main a[class*="bg-red-"], :where(body:not(:has(link[href*="basket.css"]))) main button[class*="bg-red-"], :where(body:not(:has(link[href*="basket.css"]))) main a.bg-gray-600, :where(body:not(:has(link[href*="basket.css"]))) main button.bg-gray-600 { border-radius: var(--hs-rayon-sm) !important; font-weight: 500 !important; }

/* ---- Champs ---- */
main input:not([type=checkbox]):not([type=radio]), main select, main textarea { border-radius: var(--hs-rayon-sm); }
main input:focus-visible, main select:focus-visible, main textarea:focus-visible, main button:focus-visible, main a:focus-visible {
  outline: 2px solid var(--hs-rouge-texte); outline-offset: 1px; box-shadow: none;
}

/* ---- Tableau dense (liste VPS, factures) ---- */
.hs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; color: var(--hs-texte); }
.hs-table th { background: var(--hs-surface-2); color: var(--hs-muet); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hs-bord-fort); white-space: nowrap; }
.hs-table td { padding: 10px 12px; border-bottom: 1px solid var(--hs-bord); vertical-align: middle; }
.hs-table tbody tr:last-child td { border-bottom: 0; }
.hs-table tbody tr:hover td { background: var(--hs-survol); }
.hs-table th:first-child, .hs-table td:first-child { padding-left: 16px; }
.hs-table th:last-child, .hs-table td:last-child { padding-right: 16px; }
.hs-table th button { all: unset; cursor: pointer; }
.hs-table th button:focus-visible { outline: 2px solid var(--hs-rouge-texte); }
.hs-table th[aria-sort] button::after { content: ""; display: inline-block; margin-left: 4px; border: 4px solid transparent; vertical-align: 1px; }
.hs-table th[aria-sort="ascending"] button::after { border-bottom-color: currentColor; transform: translateY(-2px); }
.hs-table th[aria-sort="descending"] button::after { border-top-color: currentColor; transform: translateY(2px); }
.hs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; color: var(--hs-texte-2); }
.hs-muet { color: var(--hs-muet); }
.hs-carte { background: var(--hs-surface); border: 1px solid var(--hs-bord); border-radius: var(--hs-rayon); box-shadow: var(--hs-ombre); }
.hs-champ { background: var(--hs-surface); border: 1px solid var(--hs-bord-fort); border-radius: var(--hs-rayon-sm); color: var(--hs-texte); font-size: .875rem; height: 34px; padding: 0 10px; }
.hs-champ::placeholder { color: var(--hs-muet-2); }
.hs-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--hs-rayon-sm); font-size: .875rem; font-weight: 500; border: 1px solid var(--hs-bord-fort); background: var(--hs-surface); color: var(--hs-texte-2); cursor: pointer; white-space: nowrap; }
.hs-btn:hover { background: var(--hs-survol); color: var(--hs-texte); }
.hs-btn:disabled { opacity: .5; cursor: not-allowed; }
.hs-btn-primaire { background: var(--hs-rouge); border-color: var(--hs-rouge); color: #fff; }
.hs-btn-primaire:hover { background: var(--hs-rouge-fort); border-color: var(--hs-rouge-fort); color: #fff; }
.hs-etat { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--hs-texte-2); white-space: nowrap; }
.hs-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hs-muet-2); }
.hs-etat-actif::before { background: #22c55e; }
.hs-etat-attente::before { background: #eab308; }
.hs-etat-arret::before { background: #ef4444; }
.hs-etiquette { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--hs-rayon-xs); background: var(--hs-surface-2); border: 1px solid var(--hs-bord); color: var(--hs-texte-2); font-size: .75rem; white-space: nowrap; }
.hs-etiquette button { all: unset; cursor: pointer; color: var(--hs-muet); padding: 0 1px; }
.hs-etiquette button:hover { color: var(--hs-texte); }
.hs-vide { padding: 40px 16px; text-align: center; color: var(--hs-muet); font-size: .875rem; }
[hidden] { display: none !important; }
.hs-table td.hs-num, .hs-table .hs-num { white-space: nowrap; }
.hs-table td .text-xs { line-height: 1.35; }

/* ---- Accent unique : les bleus, violets, cyans hérités (vues + vps-manager.js minifié) passent au neutre.
   Couche de transition ; à terme les classes sont nettoyées dans les vues (plan de migration, lot 3). ---- */
:where(body:not(:has(link[href*="basket.css"]))) main :is([class*="text-blue-"], [class*="text-purple-"], [class*="text-cyan-"], [class*="text-sky-"], [class*="text-indigo-"], [class*="text-violet-"]) { color: var(--hs-texte-2) !important; }
:where(body:not(:has(link[href*="basket.css"]))) main :is([class*="bg-blue-"], [class*="bg-purple-"], [class*="bg-cyan-"], [class*="bg-sky-"], [class*="bg-indigo-"], [class*="bg-violet-"]) { background-color: var(--hs-surface-2) !important; }
:where(body:not(:has(link[href*="basket.css"]))) main :is([class*="border-blue-"], [class*="border-purple-"], [class*="border-cyan-"], [class*="border-sky-"], [class*="border-indigo-"], [class*="border-violet-"]) { border-color: var(--hs-bord-fort) !important; }
:where(body:not(:has(link[href*="basket.css"]))) main :is([class*="ring-blue-"], [class*="ring-purple-"], [class*="ring-sky-"]) { --tw-ring-color: var(--hs-bord-fort) !important; }
:where(body:not(:has(link[href*="basket.css"]))) main :is(a, button):is([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-purple-500"], [class*="bg-cyan-600/"]) {
  background-color: var(--hs-surface) !important; color: var(--hs-texte-2) !important; border: 1px solid var(--hs-bord-fort) !important;
}
:where(body:not(:has(link[href*="basket.css"]))) main :is(a, button):is([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-purple-500"]):hover { background-color: var(--hs-survol) !important; color: var(--hs-texte) !important; }
:where(body:not(:has(link[href*="basket.css"]))) main :not(a):not(button):is([class~="bg-blue-400"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-cyan-500"], [class~="bg-purple-400"], [class~="bg-purple-500"]) { background-color: var(--hs-muet) !important; }
:where(body:not(:has(link[href*="basket.css"]))) main .vps-sidebar-item[class*="bg-blue-500/10"], aside .vps-sidebar-item[class*="bg-blue-500/10"] { background-color: var(--hs-nav-actif) !important; border-color: var(--hs-bord-fort) !important; box-shadow: inset 2px 0 0 var(--hs-rouge) !important; }
aside .vps-sidebar-item .w-9[class*="bg-blue-"] { background-color: var(--hs-rouge-doux) !important; }
aside .vps-sidebar-item i[class*="text-blue-"] { color: var(--hs-rouge-texte) !important; }
:where(body:not(:has(link[href*="basket.css"]))) :is(main, aside) :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b) { background-image: none !important; }
:where(body:not(:has(link[href*="basket.css"]))) :is(main, aside) [class*="backdrop-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:where(body:not(:has(link[href*="basket.css"]))) :is(main, aside) [class*="shadow-blue-"], :where(body:not(:has(link[href*="basket.css"]))) :is(main, aside) [class*="shadow-red-"] { box-shadow: var(--hs-ombre) !important; }
.hs-table .hs-mono { white-space: nowrap; }
html.light aside :is(.bg-gray-700\/50, .bg-gray-800\/50, .bg-gray-800, .bg-gray-700) { background-color: var(--hs-surface-2) !important; }
html.light aside :is(.border-gray-700, .border-gray-700\/50) { border-color: var(--hs-bord) !important; }
.mgr-tab-btn { border-radius: 0 !important; background: transparent !important; }
.mgr-tab-btn.active { color: var(--hs-texte) !important; box-shadow: inset 0 -2px 0 var(--hs-rouge); }
main .rounded-xl, main .rounded-2xl { border-radius: 8px !important; }