/* ============================================================================
   compat.css — couche de câblage générique du contrat de tokens de thème
   WEBBASE-1154 (volet 1/8 de l'épic #1153).

   Chargé INCONDITIONNELLEMENT par _Layout.cshtml, juste après site.css.

   Rôle :
   1. Câbler les variables internes --wb-* (consommées par site.css) sur le
      contrat public --theme-* — avec, en fallback, la valeur neutre WebBase
      actuelle. Sans thème actif (App:Theme vide), tous les var(--theme-*, …)
      retombent sur leur défaut : l'apparence claire par défaut est STRICTEMENT
      inchangée.
   2. Compenser, en mode sombre (html[data-bs-theme="dark"]), les couleurs que
      site.css code en dur hors des variables --wb-* (#fff de navbar/card/footer,
      gris fixes des dropdowns/inputs/bordures, titres #0f172a). Ces correctifs
      sont génériques (pas spécifiques à un thème) et rendent le mode sombre
      exploitable même sans thème produit ; un thème produit n'a plus à les
      réécrire.
   3. Réaligner, quand un thème est actif (html[data-theme]), les couleurs
      claires que site.css fige hors variables (couleur des titres, focus ring)
      sur les tokens du thème.

   Un thème = un pur fichier de valeurs : {theme}-tokens.css définit les
   --theme-*. Plus de couche de compat par thème (voir volets 2 et 3 pour la
   migration des thèmes existants).

   Contrat de tokens (~19), valeur claire + valeur sombre :
     --theme-brand              couleur de marque (boutons primaires, liens, actif)
     --theme-brand-hover        survol/active de la marque
     --theme-brand-rgb          composantes R G B de la marque, pour rgb(… / alpha)
     --theme-accent             accent secondaire
     --theme-surface            fond de page
     --theme-surface-card       fond des cartes / navbar / dropdown / footer
     --theme-surface-alt        fond alterné : thead, card-header, hover de liste
     --theme-border             couleur de bordure
     --theme-text               texte principal + titres
     --theme-text-secondary     labels, items de menu
     --theme-text-muted         texte atténué
     --theme-text-faint         texte ténu (footer)
     --theme-radius             arrondi standard (boutons, inputs)
     --theme-radius-lg          arrondi large (cartes, dropdowns)
     --theme-shadow             ombre standard (navbar, cartes)
     --theme-shadow-md          ombre moyenne (dropdowns)
     --theme-font-sans          pile de police principale
     --theme-font-mono          pile de police à chasse fixe
   ============================================================================ */

/* ─── 1. Câblage --wb-* → contrat --theme-* (défauts = valeurs neutres actuelles) ── */
:root {
  --wb-font:          var(--theme-font-sans, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --wb-radius:        var(--theme-radius, 0.375rem);
  --wb-radius-lg:     var(--theme-radius-lg, 0.5rem);
  --wb-shadow:        var(--theme-shadow, 0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px -1px rgb(0 0 0 / .06));
  --wb-shadow-md:     var(--theme-shadow-md, 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .07));
  --wb-border:        1px solid var(--theme-border, #e5e7eb);
  --wb-text:          var(--theme-text, #1e293b);
  --wb-text-muted:    var(--theme-text-muted, #64748b);
  --wb-surface:       var(--theme-surface, #f8fafc);
  --wb-primary:       var(--theme-brand, #2563eb);
  --wb-primary-hover: var(--theme-brand-hover, #1d4ed8);
}

/* Liens Bootstrap → token de marque (WEBBASE-1178). Bootstrap 5.3 colore <a> via
   `rgba(var(--bs-link-color-rgb), α)` — forme virgule, incompatible avec le triplet
   espacé de --theme-brand-rgb. On contourne l'indirection en posant --bs-link-color
   (qui accepte n'importe quelle couleur, oklch inclus) et une règle `a` directe.
   Fallback = bleu Bootstrap 5.3 par défaut ⇒ apparence sans thème inchangée. */
:root {
  --bs-link-color:       var(--theme-brand, #0d6efd);
  --bs-link-hover-color: var(--theme-brand-hover, #0a58ca);
}
a {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* ─── 2. Mode sombre — compensation générique des couleurs figées de site.css ──────
   Défauts = palette slate neutre. Un thème avec variante sombre fournit ses propres
   --theme-* sous html[data-theme="x"][data-bs-theme="dark"] et pilote alors ces
   règles sans qu'elles aient à être réécrites. */
html[data-bs-theme="dark"] {
  --wb-surface:       var(--theme-surface, #0f172a);
  --wb-text:          var(--theme-text, #e2e8f0);
  --wb-text-muted:    var(--theme-text-muted, #94a3b8);
  --wb-border:        1px solid var(--theme-border, #334155);
  --wb-primary:       var(--theme-brand, #3b82f6);
  --wb-primary-hover: var(--theme-brand-hover, #60a5fa);
  /* Liens : fallback = bleu clair mode sombre de Bootstrap 5.3 (notre :root gagnerait
     sinon avec le bleu clair #0d6efd, trop peu contrasté sur fond sombre). WEBBASE-1178. */
  --bs-link-color:       var(--theme-brand, #6ea8fe);
  --bs-link-hover-color: var(--theme-brand-hover, #8bb9fe);
}

/* site.css fige color:#0f172a sur les titres et .navbar-brand — illisible sur fond
   sombre, non couvert par une variable. */
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6 {
  color: var(--theme-text, #e2e8f0);
}
/* site.css fige .navbar-brand en #0f172a !important — surcharge !important obligatoire. */
html[data-bs-theme="dark"] .navbar-brand {
  color: var(--theme-text, #e2e8f0) !important;
}

/* Fonds blancs figés (#fff !important pour .navbar, background:#fff pour .card/.footer). */
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .footer {
  background-color: var(--theme-surface-card, #1e293b) !important;
  border-color: var(--theme-border, #334155) !important;
}

html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .table thead th {
  background-color: var(--theme-surface-alt, #334155);
  border-color: var(--theme-border, #334155);
  color: var(--theme-text-secondary, #cbd5e1);
}

html[data-bs-theme="dark"] .navbar .nav-link { color: var(--theme-text-secondary, #cbd5e1); }
html[data-bs-theme="dark"] .navbar .nav-link:hover { color: var(--theme-text, #e2e8f0); }

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  background-color: var(--theme-surface-card, #1e293b);
  border-color: var(--theme-border, #334155);
  color: var(--theme-text, #e2e8f0);
}

html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] .dropdown-item { color: var(--theme-text-secondary, #cbd5e1); }

/* WEBBASE-3312 — Bootstrap fige .text-bg-light en color:#000 ; un thème qui assombrit --bs-light-rgb en mode sombre
   donnait du noir sur fond sombre (badges « Public », rôles, statuts…). Texte et fond tertiaire du mode : lisible
   avec ou sans thème. */
html[data-bs-theme="dark"] .text-bg-light {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-tertiary-bg) !important;
}

/* WEBBASE-3312 — logo téléversé des en-têtes publics (KB, aide) : un logo foncé disparaît sur l'en-tête sombre.
   Cartouche clair en mode sombre, comme le logo de la barre latérale de l'application. */
html[data-bs-theme="dark"] .wb-public-brand-logo {
  background-color: #f8fafc;
  padding: .15rem .4rem;
  border-radius: var(--theme-radius, .375rem);
}

html[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--theme-surface-card, #1e293b);
  border-color: var(--theme-border, #334155);
  box-shadow: var(--theme-shadow-md, 0 4px 10px rgb(0 0 0 / .4));
}
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--theme-surface-alt, #334155);
  color: var(--theme-text, #e2e8f0);
}

html[data-bs-theme="dark"] .dropdown-divider,
html[data-bs-theme="dark"] .table-bordered > :not(caption) > *,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .page-link { border-color: var(--theme-border, #334155); }

html[data-bs-theme="dark"] .list-group-item { background-color: var(--theme-surface-card, #1e293b); }

html[data-bs-theme="dark"] .page-link {
  background-color: var(--theme-surface-card, #1e293b);
  color: var(--theme-text-secondary, #cbd5e1);
}
html[data-bs-theme="dark"] .page-link:hover {
  background-color: var(--theme-surface-alt, #334155);
  color: var(--theme-text, #e2e8f0);
}
html[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--wb-primary);
  border-color: var(--wb-primary);
  /* En sombre la marque est généralement éclaircie (contraste avec les surfaces sombres) :
     le blanc de Bootstrap deviendrait illisible dessus. Texte = couleur de fond de page
     (la plus foncée du thème). WEBBASE-1178 (régression repérée à la revue de #1155). */
  color: var(--theme-surface, #0f172a);
}

html[data-bs-theme="dark"] .footer,
html[data-bs-theme="dark"] .footer a { color: var(--theme-text-faint, #64748b); }
html[data-bs-theme="dark"] .footer a:hover { color: var(--theme-text, #e2e8f0); }

html[data-bs-theme="dark"] .nav-pills .nav-link { color: var(--theme-text-muted, #94a3b8); }
html[data-bs-theme="dark"] .nav-tabs { border-color: var(--theme-border, #334155); }
html[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--theme-text-muted, #94a3b8); }

/* App shell sidebar (WEBBASE-1701) — jamais câblée sur le contrat à sa création, fond/texte
   figés dans site.css. border-right suit déjà --wb-border sans besoin d'override ici. */
html[data-bs-theme="dark"] #wb-app-sidebar {
  background-color: var(--theme-surface-card, #1e293b);
  border-color: var(--theme-border, #334155);
}
html[data-bs-theme="dark"] .wb-sidebar-brand { color: var(--theme-text, #e2e8f0); }
html[data-bs-theme="dark"] .wb-sidebar-nav .nav-link { color: var(--theme-text-secondary, #cbd5e1); }
html[data-bs-theme="dark"] .wb-sidebar-nav .nav-link:hover { color: var(--theme-text, #e2e8f0); }
html[data-bs-theme="dark"] .wb-sidebar-nav .nav-link.active {
  background-color: rgb(var(--theme-brand-rgb, 59 130 246) / .18);
}

/* ─── 3. Thème actif, mode clair — réalignement des couleurs figées de site.css ──── */
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4,
html[data-theme] h5,
html[data-theme] h6 {
  color: var(--theme-text, #0f172a);
}
/* site.css fige .navbar-brand en #0f172a !important — surcharge !important obligatoire. */
html[data-theme] .navbar-brand {
  color: var(--theme-text, #0f172a) !important;
}

/* App shell sidebar (WEBBASE-1701) — même trou que le mode sombre ci-dessus, côté clair :
   fond déjà blanc par défaut (pas de réalignement nécessaire), seuls texte et état actif
   sont figés hors du contrat. */
html[data-theme] .wb-sidebar-brand { color: var(--theme-text, #0f172a); }
html[data-theme] .wb-sidebar-nav .nav-link { color: var(--theme-text-secondary, #475569); }
html[data-theme] .wb-sidebar-nav .nav-link:hover { color: var(--theme-text, #0f172a); }
html[data-theme] .wb-sidebar-nav .nav-link.active {
  background-color: rgb(var(--theme-brand-rgb, 37 99 235) / .08);
}

/* Focus ring : site.css écrit rgb(37 99 235 / .x) en dur — pas couvert par --wb-primary.
   :focus-visible (WEBBASE-1699) : l'anneau n'apparaît qu'au clavier, pas au clic souris. */
html[data-theme] .btn:focus-visible,
html[data-theme] .btn:active:focus-visible,
html[data-theme] .btn-link.nav-link:focus-visible,
html[data-theme] .form-control:focus-visible,
html[data-theme] .form-check-input:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--theme-brand-rgb, 37 99 235) / .15);
}
html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus {
  border-color: var(--wb-primary);
}
html[data-theme] .form-control:focus-visible,
html[data-theme] .form-select:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--theme-brand-rgb, 37 99 235) / .1);
}