/* ============================================================================
   wb-components.css — grammaire des composants du socle
   WEBBASE-4033 (lot 4 de l'épic du style #3947, plan : docs/design/style-socle-inventaire.md § 1,
   sections 5 à 9 et 14 de la peau produit d'origine, et § 4 « Risques »).

   Chargé par _ThemeStylesheets.cshtml juste après compat.css, donc après site.css et AVANT les
   feuilles du thème : une peau produit garde la main sur ce fichier.

   Règles d'écriture :
   - aucune couleur en dur : tout passe par les variables --wb-* que compat.css câble sur le contrat
     --theme-* (garde-fou Issue4033) ; les couleurs de statut restent celles de Bootstrap ;
   - aucun :has() pour deviner la structure d'une page ;
   - les rayons suivent --wb-radius (donc --theme-radius) : un thème peut revenir à des arrondis, et
     .rounded-pill / .rounded-circle restent intacts ;
   - l'ombre n'est retirée que des cartes : toasts, popovers, menus déroulants, modales, bouton de
     l'assistant et panneaux flottants gardent la leur (hiérarchie visuelle, § 4 de l'inventaire) ;
   - !important seulement contre un utilitaire Bootstrap lui-même en !important (justifié sur place).
   ============================================================================ */

/* ─── Cartes ─────────────────────────────────────────────────────────────────── */
/* Filet fort en haut à la place de l'ombre portée. .border-0 (utilitaire en !important) l'emporte. */
.card {
  border: var(--wb-border);
  border-top: 2px solid var(--wb-rule);
  box-shadow: none;
}
/* Les utilitaires .shadow-* sont en !important dans Bootstrap : seule une règle en !important les
   neutralise. Limité aux cartes (carte de connexion, tuiles) — jamais un panneau flottant. */
.card.shadow-sm,
.card.shadow,
.card.shadow-lg {
  box-shadow: none !important;
}
.card-header {
  background: var(--wb-surface-card);
  border-bottom: var(--wb-border);
  color: var(--wb-text);
  font-weight: 600;
  padding-block: var(--wb-space-5);
}
.card-footer {
  background: var(--wb-surface-card);
  border-top: var(--wb-border);
}

/* Poignées de déplacement des widgets de tableau de bord : discrètes, nettes au survol de la carte. */
.card-header .widget-drag-handle { opacity: .45; }
.card:hover .card-header .widget-drag-handle { opacity: 1; }

/* ─── Fil d'Ariane, séparateurs, états vides ────────────────────────────────── */
.breadcrumb {
  font-size: .8125rem;
  --bs-breadcrumb-divider-color: var(--wb-text-faint);
  --bs-breadcrumb-item-active-color: var(--wb-text-muted);
}
.breadcrumb a { text-decoration: none; }

hr {
  border-color: var(--wb-border-color);
  opacity: 1;
}

.wb-empty-state,
.wb-error-state {
  border: 1px dashed var(--wb-border-color);
  background: var(--wb-surface-card);
}

/* ─── Boutons ────────────────────────────────────────────────────────────────── */
.btn { --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }

/* Fond et bordure de .btn-primary sont posés par site.css ; les variables Bootstrap suivent pour que
   survol, appui et état désactivé restent sur la marque. Le texte suit --wb-on-brand (site.css). */
.btn-primary {
  --bs-btn-bg: var(--wb-primary);
  --bs-btn-border-color: var(--wb-primary);
  --bs-btn-hover-bg: var(--wb-primary-hover);
  --bs-btn-hover-border-color: var(--wb-primary-hover);
  --bs-btn-active-bg: var(--wb-primary-hover);
  --bs-btn-active-border-color: var(--wb-primary-hover);
  --bs-btn-disabled-bg: var(--wb-primary);
  --bs-btn-disabled-border-color: var(--wb-primary);
}

/* Bouton secondaire : contour de champ, inversion texte / fond au survol. */
.btn-outline-secondary {
  --bs-btn-color: var(--wb-text);
  --bs-btn-border-color: var(--wb-input-border);
  --bs-btn-hover-color: var(--wb-surface);
  --bs-btn-hover-bg: var(--wb-text);
  --bs-btn-hover-border-color: var(--wb-text);
  --bs-btn-active-color: var(--wb-surface);
  --bs-btn-active-bg: var(--wb-text);
  --bs-btn-active-border-color: var(--wb-text);
  --bs-btn-disabled-color: var(--wb-text-faint);
  --bs-btn-disabled-border-color: var(--wb-border-color);
}

.btn-light {
  --bs-btn-color: var(--wb-text);
  --bs-btn-bg: var(--wb-surface-alt);
  --bs-btn-border-color: var(--wb-surface-alt);
  --bs-btn-hover-bg: var(--wb-border-color);
  --bs-btn-hover-border-color: var(--wb-border-color);
}

/* Bouton sombre : la couleur du rail, pas un noir figé. */
.btn-dark {
  --bs-btn-bg: var(--wb-rail);
  --bs-btn-border-color: var(--wb-rail);
  --bs-btn-hover-bg: var(--wb-rail-line);
  --bs-btn-hover-border-color: var(--wb-rail-line);
}

/* Boutons de l'en-tête de page (« fantôme ») : dans wb-shell.css (WEBBASE-4032), propriétaire de l'en-tête. */

/* ─── Formulaires ────────────────────────────────────────────────────────────── */
/* Bordure au repos (site.css) et au survol ; le focus reste la règle unique de WEBBASE-4022. */
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: var(--wb-input-border-hover);
}
.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--wb-text-secondary);
}
.form-check-input { border-color: var(--wb-input-border); }
.form-check:not(.form-switch) .form-check-input[type="checkbox"] { border-radius: var(--wb-radius); }
.input-group-text {
  background: var(--wb-surface-alt);
  border-color: var(--wb-input-border);
  color: var(--wb-text-secondary);
}

/* ─── Tableaux simples (les grilles Syncfusion relèvent du lot 5) ─────────────── */
.table {
  --bs-table-hover-bg: var(--wb-hover);
  --bs-table-striped-bg: color-mix(in srgb, var(--wb-text) 2.5%, transparent);
  --bs-table-active-bg: rgb(var(--wb-primary-rgb) / .10);
  border-color: var(--wb-border-color);
}
/* En-têtes de colonne éditoriaux : transparents, atténués, posés sur le filet fort. */
.table thead th {
  background-color: transparent;
  color: var(--wb-text-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--wb-rule);
  white-space: nowrap;
}
.table > tbody > tr > * { border-color: var(--wb-border-color); }

/* ─── Badges ─────────────────────────────────────────────────────────────────── */
/* Le rayon suit le thème (angles francs par défaut) ; .rounded-pill, utilitaire en !important,
   garde sa pilule. */
.badge {
  border-radius: var(--wb-radius);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .3em .55em;
}

/* ─── Alertes : filet à gauche, couleur de statut ───────────────────────────── */
.alert {
  border-width: 0 0 0 4px;
  border-radius: var(--wb-radius);
}
/* La marque marque une action, jamais un fond : alerte d'information sur fond neutre. */
.alert-primary,
.alert-info {
  border-left-color: var(--wb-primary);
  background-color: var(--wb-surface-alt);
  color: var(--wb-text);
}
.alert-success { border-left-color: var(--bs-success); }
.alert-warning { border-left-color: var(--bs-warning); }
.alert-danger  { border-left-color: var(--bs-danger); }
.alert-secondary,
.alert-light { border-left-color: var(--wb-text-muted); }

/* ─── Onglets, listes ────────────────────────────────────────────────────────── */
.nav-tabs .nav-link:hover { color: var(--wb-text); }
.nav-tabs .nav-link.active {
  color: var(--wb-text);
  font-weight: 600;
  border-bottom-color: var(--wb-primary);
}

.list-group { --bs-list-group-action-hover-bg: var(--wb-hover); }

/* ─── Menus déroulants ───────────────────────────────────────────────────────── */
/* Bordure de champ, plus nette que le filet ; le menu flottant GARDE son ombre (site.css). */
.dropdown-menu { border-color: var(--wb-input-border); }
.dropdown-item { border-radius: var(--wb-radius); }

/* ─── Modales : filet de marque en haut ─────────────────────────────────────── */
/* La modale est un panneau flottant : elle garde son ombre. */
.modal-content {
  border: 0;
  border-top: 3px solid var(--wb-primary);
}
.modal-header,
.modal-footer { border-color: var(--wb-border-color); }

/* ─── Progression, accordéon ─────────────────────────────────────────────────── */
.progress { --bs-progress-bg: var(--wb-surface-alt); }

.accordion {
  --bs-accordion-active-color: var(--wb-text);
  --bs-accordion-active-bg: var(--wb-surface-alt);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--wb-focus-ring);
}

/* ─── Tuiles d'indicateurs (tableaux de bord, synthèses) ─────────────────────── */
/* Chiffre en police de titre, serré ; libellé qui suit en petites capitales. */
.card .display-4,
.card .display-5,
.card .display-6 {
  font-family: var(--wb-font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--wb-text);
  margin-bottom: var(--wb-space-3);
}
.card .display-4 + *,
.card .display-5 + *,
.card .display-6 + * {
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  font-weight: 600;
}