@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  --c32-primary: #2E7DFF;
  --c32-primary-dark: #2564CC;
  --c32-primary-deep: #133266;
  --c32-radius-pill: 20px;
  --c32-radius-card: 12px;
}

body,
input,
button,
textarea,
select,
[class*='Box-'],
[class*='Text-'],
[class*='Label-'],
[class*='H1-'],
[class*='H2-'],
[class*='H3-'],
[class*='H4-'],
[class*='H5-'],
[class*='H6-'] {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

button[class*='Button-'],
a[class*='Button-'] {
  border-radius: var(--c32-radius-pill) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
}

[class*='Card-'],
[class*='DropZone-'],
[class*='InfoBox-'] {
  border-radius: var(--c32-radius-card) !important;
}

[class*='Sidebar-'] [class*='Logo-'] img,
nav img[alt*='ogo'] {
  max-height: 44px;
  object-fit: contain;
}

[class*='Sidebar-'] {
  box-shadow: 0 1px 0 rgba(19, 50, 102, 0.06);
}

[class*='Sidebar-'] a[class*='active'],
[class*='Sidebar-'] a:hover {
  border-radius: 8px;
}

input,
select,
textarea {
  border-radius: 8px !important;
}

/* Filter drawer — force white background + dark legible text.
 * Theme `filterBg` flips the drawer to white; AdminJS keeps light text/labels
 * because the drawer was historically dark, so we override them here. */
[class*='FilterDrawer-'],
section[data-css*='FilterDrawer'] {
  background: #FFFFFF !important;
  color: #1F2937 !important;
}

[class*='FilterDrawer-'] [class*='Label-'],
[class*='FilterDrawer-'] [class*='Text-'],
[class*='FilterDrawer-'] [class*='H1-'],
[class*='FilterDrawer-'] [class*='H2-'],
[class*='FilterDrawer-'] [class*='H3-'],
[class*='FilterDrawer-'] [class*='H4-'],
[class*='FilterDrawer-'] [class*='H5-'],
[class*='FilterDrawer-'] [class*='H6-'],
[class*='FilterDrawer-'] label,
[class*='FilterDrawer-'] span {
  color: #1F2937 !important;
}

[class*='FilterDrawer-'] input,
[class*='FilterDrawer-'] select,
[class*='FilterDrawer-'] textarea {
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border: 1px solid #D1D5DB !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Modale de confirmation d'action

   ⛔ POURQUOI DU CSS ET PAS UN COMPOSANT. AdminJS force `variant: 'danger'` EN
   DUR pour toute action a `guard` (`build-action-click-handler`), sans jamais
   lire un `variant` declare sur l'action — en poser un n'a aucun effet. Et
   `Modal` ne figure PAS dans `OverridableComponent` : ni lui, ni `ModalInline`,
   ni `ModalWrapper`, ni `AdminModal`. Le `componentLoader` ne peut donc pas le
   remplacer.

   Resultat : « Valider la prise en charge de cette commande ? » s'affichait en
   rouge sang, comme une suppression definitive.

   ⛔ NE PAS toucher a `branding.theme.colors.error` : cela repeindrait TOUS les
   etats d'erreur du panel, y compris les vrais.

   Points d'accroche verifies dans le bundle livre :
   - `.modal-label` est un className ECRIT EN DUR dans `modal-inline.tsx` ;
   - le conteneur est le seul element portant un `.modal-label` en enfant
     direct — d'ou `:has(> .modal-label)` ;
   - le bouton « Confirmer » est le dernier de la rangee (« Annuler » le
     precede), et il est *outlined* : on repeint `color` et `border-color`,
     jamais le fond.

   ⚠️ Le portail est monte sur `body`, hors de la hierarchie du bouton
   declencheur : aucune discrimination par action n'est possible. C'est tout
   bleu ou tout rouge — et ces confirmations sont majoritairement des
   validations, pas des destructions.
   ───────────────────────────────────────────────────────────────────────── */

:has(> .modal-label) {
  border-left-color: var(--c32-primary) !important;
}

.modal-label {
  color: var(--c32-primary-deep) !important;
}

:has(> .modal-label) button:last-child {
  color: var(--c32-primary-dark) !important;
  border-color: var(--c32-primary-dark) !important;
}