/* ==========================================================================
   DESIGN TOKENS - Zeller Ticket Manager
   ==========================================================================
   Purpose:  Source unique des couleurs, de la typographie et des échelles de
             l'application, pour l'interface interne comme pour le portail client.
   Actions:  1. Charge la police Inter depuis public/fonts (aucun service tiers).
             2. Déclare les tokens --zt-* : palettes, rôles sémantiques, échelles.
             3. Réaligne les anciennes variables (--primary-color, --app-*, --neutral-*,
                --font-family...) sur ces tokens, pour que les feuilles existantes
                suivent sans être réécrites.
             4. Aligne les composants Bootstrap 5.3 (boutons, liens, focus, pagination...)
                sur la couleur principale, que Bootstrap code en dur (#0d6efd).
   Logic:    Le fichier est chargé APRÈS toutes les feuilles globales : à spécificité
             égale sur :root, la dernière déclaration l'emporte. Le portail client
             active son thème par l'attribut data-portal="customer" posé sur <html>
             (ou sur un conteneur, pour un aperçu) ; déclaré après :root, il l'emporte
             à spécificité égale et toutes les variables dérivées basculent sur le rouge
             du portail, sans dupliquer une seule règle.
   Position: Étape 1 de la refonte du design. Les nouveaux composants utilisent
             uniquement les tokens --zt-* ; les anciennes variables sont conservées
             le temps de migrer chaque écran, puis supprimées.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Police
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  /* Palette bleu Zeller, construite autour de la teinte officielle (600) */
  --zt-blue-50: #eef4fc;
  --zt-blue-100: #d9e6f8;
  --zt-blue-200: #b3cdf0;
  --zt-blue-300: #80abe4;
  --zt-blue-400: #4d88d6;
  --zt-blue-500: #1f63c2;
  --zt-blue-600: #084cac;
  --zt-blue-700: #063e8e;
  --zt-blue-800: #053170;
  --zt-blue-900: #042657;

  /* Palette rouge du portail client, autour de #aa312c (600) */
  --zt-red-50: #fbeeed;
  --zt-red-100: #f5d6d4;
  --zt-red-200: #eaaeaa;
  --zt-red-300: #db7f79;
  --zt-red-400: #c9544d;
  --zt-red-500: #b93d37;
  --zt-red-600: #aa312c;
  --zt-red-700: #8a2824;
  --zt-red-800: #6c1f1c;
  --zt-red-900: #4f1714;

  /* Neutres : une seule échelle pour les fonds, bordures et textes */
  --zt-gray-0: #ffffff;
  --zt-gray-50: #f8fafc;
  --zt-gray-100: #f1f5f9;
  --zt-gray-200: #e2e8f0;
  --zt-gray-300: #cbd5e1;
  --zt-gray-400: #94a3b8;
  --zt-gray-500: #64748b;
  --zt-gray-600: #475569;
  --zt-gray-700: #334155;
  --zt-gray-800: #1e293b;
  --zt-gray-900: #0f172a;

  /* Rôle principal : bleu Zeller par défaut, remplacé par le thème client */
  --zt-primary: var(--zt-blue-600);
  --zt-primary-rgb: 8, 76, 172;
  --zt-primary-hover: var(--zt-blue-700);
  --zt-primary-active: var(--zt-blue-800);
  --zt-primary-soft: var(--zt-blue-50);
  --zt-primary-border: var(--zt-blue-200);
  --zt-primary-strong: var(--zt-blue-800);
  --zt-primary-focus: rgba(8, 76, 172, 0.25);
  /* Couleur de texte d'accent (liens) : distincte du remplissage des boutons en sombre */
  --zt-primary-text: var(--zt-blue-600);
  --zt-primary-text-rgb: 8, 76, 172;

  /* Couleurs sémantiques : réservées au statut, aux délais et aux alertes */
  --zt-success: #10b981;
  --zt-success-rgb: 16, 185, 129;
  --zt-success-strong: #047857;
  --zt-success-soft: #ecfdf5;
  --zt-warning: #f59e0b;
  --zt-warning-rgb: 245, 158, 11;
  --zt-warning-strong: #b45309;
  --zt-warning-soft: #fffbeb;
  --zt-danger: #ef4444;
  --zt-danger-rgb: 239, 68, 68;
  --zt-danger-strong: #b91c1c;
  --zt-danger-soft: #fef2f2;
  --zt-info: #06b6d4;
  --zt-info-rgb: 6, 182, 212;
  --zt-info-strong: #0e7490;
  --zt-info-soft: #ecfeff;

  /* Surfaces et textes */
  --zt-bg-page: var(--zt-gray-50);
  --zt-bg-surface: var(--zt-gray-0);
  --zt-bg-subtle: var(--zt-gray-100);
  --zt-border: var(--zt-gray-200);
  --zt-border-strong: var(--zt-gray-300);
  --zt-text: var(--zt-gray-800);
  --zt-text-secondary: var(--zt-gray-500);
  --zt-text-muted: var(--zt-gray-400);
  --zt-bg-hover: var(--zt-gray-100);
  --zt-nav-bg: var(--zt-blue-600);
  --zt-nav-fg: #ffffff;
  --zt-nav-fg-muted: rgba(255, 255, 255, 0.75);
  --zt-nav-hover: rgba(255, 255, 255, 0.10);

  /* Typographie */
  --zt-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --zt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --zt-text-xs: 0.75rem;   /* 12px : métadonnées, horodatages */
  --zt-text-sm: 0.8125rem; /* 13px : libellés, tableaux denses */
  --zt-text-md: 0.875rem;  /* 14px : texte courant des écrans de travail */
  --zt-text-lg: 1rem;      /* 16px : titres de section */
  --zt-text-xl: 1.25rem;   /* 20px : titre de page */
  --zt-weight-regular: 400;
  --zt-weight-medium: 500;
  --zt-weight-semibold: 600;

  /* Espacement : multiples de 4px */
  --zt-space-1: 0.25rem;
  --zt-space-2: 0.5rem;
  --zt-space-3: 0.75rem;
  --zt-space-4: 1rem;
  --zt-space-5: 1.25rem;
  --zt-space-6: 1.5rem;
  --zt-space-8: 2rem;

  /* Rayons */
  --zt-radius-sm: 0.25rem;
  --zt-radius-md: 0.375rem;
  --zt-radius-lg: 0.5rem;
  --zt-radius-pill: 9999px;
}

/* Thème du portail client (sur <html>, ou sur un conteneur pour un aperçu) */
[data-portal="customer"] {
  --zt-primary: var(--zt-red-600);
  --zt-primary-rgb: 170, 49, 44;
  --zt-primary-hover: var(--zt-red-700);
  --zt-primary-active: var(--zt-red-800);
  --zt-primary-soft: var(--zt-red-50);
  --zt-primary-border: var(--zt-red-200);
  --zt-primary-strong: var(--zt-red-800);
  --zt-primary-focus: rgba(170, 49, 44, 0.25);
  --zt-primary-text: var(--zt-red-600);
  --zt-primary-text-rgb: 170, 49, 44;
  --zt-nav-bg: var(--zt-red-600);

  --customer-primary: var(--zt-red-600);
  --customer-primary-dark: var(--zt-red-700);
  --customer-primary-light: var(--zt-red-400);
}

/* --------------------------------------------------------------------------
   Anciennes variables, réalignées sur les tokens
   -------------------------------------------------------------------------- */
:root,
[data-portal="customer"] {
  /* Alias encore lus par le calendrier et d'anciennes classes */
  --primary-color: var(--zt-primary);
  --secondary-color: var(--zt-primary-hover);
  --accent-color: var(--zt-warning);
  --success-color: var(--zt-success);
  --warning-color: var(--zt-warning);
  --danger-color: var(--zt-danger);
  --info-color: var(--zt-info);

  --app-primary: var(--zt-primary);
  --app-primary-dark: var(--zt-primary-hover);
  --app-primary-light: var(--zt-primary-border);
  --app-secondary: var(--zt-primary-hover);
  --app-secondary-dark: var(--zt-primary-active);
  --app-success: var(--zt-success);
  --app-success-dark: var(--zt-success-strong);
  --app-warning: var(--zt-warning);
  --app-warning-dark: var(--zt-warning-strong);
  --app-danger: var(--zt-danger);
  --app-danger-dark: var(--zt-danger-strong);
  --app-info: var(--zt-info);
  --app-info-dark: var(--zt-info-strong);

  --app-gray-50: var(--zt-gray-50);
  --app-gray-100: var(--zt-gray-100);
  --app-gray-200: var(--zt-gray-200);
  --app-gray-300: var(--zt-gray-300);
  --app-gray-400: var(--zt-gray-400);
  --app-gray-500: var(--zt-gray-500);
  --app-gray-600: var(--zt-gray-600);
  --app-gray-700: var(--zt-gray-700);
  --app-gray-800: var(--zt-gray-800);
  --app-gray-900: var(--zt-gray-900);

  --neutral-50: var(--zt-gray-50);
  --neutral-100: var(--zt-gray-100);
  --neutral-200: var(--zt-gray-200);
  --neutral-300: var(--zt-gray-300);
  --neutral-400: var(--zt-gray-400);
  --neutral-500: var(--zt-gray-500);
  --neutral-600: var(--zt-gray-600);
  --neutral-700: var(--zt-gray-700);
  --neutral-800: var(--zt-gray-800);
  --neutral-900: var(--zt-gray-900);

  --font-family: var(--zt-font-sans);
  --app-font-family: var(--zt-font-sans);

  /* Bootstrap 5.3 : variables globales */
  --bs-primary: var(--zt-primary);
  --bs-primary-rgb: var(--zt-primary-rgb);
  --bs-primary-text-emphasis: var(--zt-primary-strong);
  --bs-primary-bg-subtle: var(--zt-primary-soft);
  --bs-primary-border-subtle: var(--zt-primary-border);
  --bs-success: var(--zt-success);
  --bs-success-rgb: var(--zt-success-rgb);
  --bs-success-text-emphasis: var(--zt-success-strong);
  --bs-success-bg-subtle: var(--zt-success-soft);
  --bs-warning: var(--zt-warning);
  --bs-warning-rgb: var(--zt-warning-rgb);
  --bs-warning-text-emphasis: var(--zt-warning-strong);
  --bs-warning-bg-subtle: var(--zt-warning-soft);
  --bs-danger: var(--zt-danger);
  --bs-danger-rgb: var(--zt-danger-rgb);
  --bs-danger-text-emphasis: var(--zt-danger-strong);
  --bs-danger-bg-subtle: var(--zt-danger-soft);
  --bs-info: var(--zt-info);
  --bs-info-rgb: var(--zt-info-rgb);
  --bs-info-text-emphasis: var(--zt-info-strong);
  --bs-info-bg-subtle: var(--zt-info-soft);
  --bs-link-color: var(--zt-primary-text);
  --bs-link-color-rgb: var(--zt-primary-text-rgb);
  --bs-link-hover-color: var(--zt-primary-strong);
  --bs-link-hover-color-rgb: var(--zt-primary-text-rgb);
  --bs-focus-ring-color: var(--zt-primary-focus);
  --bs-body-font-family: var(--zt-font-sans);
  --bs-body-color: var(--zt-text);
  --bs-border-color: var(--zt-border);
}

/* --------------------------------------------------------------------------
   Thème sombre : activé par data-bs-theme="dark" sur <html> (cookie zt_theme).
   Placé après les blocs :root pour les surcharger à spécificité égale.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --zt-bg-page: #0f1115;
  --zt-bg-surface: #16191f;
  --zt-bg-subtle: #1d2128;
  --zt-bg-hover: #232831;
  --zt-border: #262b33;
  --zt-border-strong: #343a44;
  --zt-text: #e6e8eb;
  --zt-text-secondary: #9aa3ae;
  --zt-text-muted: #6b7480;
  --zt-nav-bg: #0b0d11;
  --zt-nav-fg: var(--zt-text);
  --zt-nav-fg-muted: var(--zt-text-secondary);
  --zt-nav-hover: var(--zt-bg-hover);

  /* Remplissage des boutons (texte blanc) et texte d'accent (liens) */
  --zt-primary: var(--zt-blue-500);
  --zt-primary-rgb: 31, 99, 194;
  --zt-primary-hover: var(--zt-blue-400);
  --zt-primary-active: var(--zt-blue-300);
  --zt-primary-text: var(--zt-blue-300);
  --zt-primary-text-rgb: 128, 171, 228;
  --zt-primary-soft: rgba(77, 136, 214, 0.14);
  --zt-primary-border: rgba(77, 136, 214, 0.40);
  --zt-primary-strong: var(--zt-blue-200);
  --zt-primary-focus: rgba(77, 136, 214, 0.35);

  --zt-success-strong: #34d399;
  --zt-success-soft: rgba(16, 185, 129, 0.18);
  --zt-warning-strong: #fbbf24;
  --zt-warning-soft: rgba(245, 158, 11, 0.18);
  --zt-danger-strong: #f87171;
  --zt-danger-soft: rgba(239, 68, 68, 0.18);
  --zt-info-strong: #22d3ee;
  --zt-info-soft: rgba(6, 182, 212, 0.18);

  --bs-body-bg: var(--zt-bg-page);
  --bs-body-bg-rgb: 15, 17, 21;
  --bs-body-color: var(--zt-text);
  --bs-border-color: var(--zt-border);
  --bs-secondary-bg: var(--zt-bg-subtle);
  --bs-tertiary-bg: var(--zt-bg-surface);
  --bs-secondary-color: var(--zt-text-secondary);
  --bs-emphasis-color: #ffffff;
}

/* Anciennes variables de surface, encore lues par les feuilles héritées */
[data-bs-theme="dark"] {
  --bg-primary: var(--zt-bg-surface);
  --bg-secondary: var(--zt-bg-page);
  --text-primary: var(--zt-text);
  --text-secondary: var(--zt-text-secondary);
  --text-muted: var(--zt-text-muted);
  --border-color: var(--zt-border);

  /* Échelles grises des anciennes feuilles, inversées : clair = fond, foncé = texte */
  --neutral-50: var(--zt-bg-subtle);
  --neutral-100: var(--zt-bg-hover);
  --neutral-200: var(--zt-border);
  --neutral-300: var(--zt-border-strong);
  --neutral-400: var(--zt-text-muted);
  --neutral-500: var(--zt-text-secondary);
  --neutral-600: var(--zt-text-secondary);
  --neutral-700: var(--zt-text);
  --neutral-800: var(--zt-text);
  --neutral-900: #ffffff;
  --app-gray-50: var(--zt-bg-subtle);
  --app-gray-100: var(--zt-bg-hover);
  --app-gray-200: var(--zt-border);
  --app-gray-300: var(--zt-border-strong);
  --app-gray-400: var(--zt-text-muted);
  --app-gray-500: var(--zt-text-secondary);
  --app-gray-600: var(--zt-text-secondary);
  --app-gray-700: var(--zt-text);
  --app-gray-800: var(--zt-text);
  --app-gray-900: #ffffff;

  /* Alias --gray-* / --text-color (ex dark-bridge) : échelle inversée en sombre */
  --text-color: var(--zt-text);
  --gray-50: var(--zt-bg-subtle);
  --gray-100: var(--zt-bg-hover);
  --gray-200: var(--zt-border);
  --gray-300: var(--zt-border-strong);
  --gray-400: var(--zt-text-muted);
  --gray-500: var(--zt-text-secondary);
  --gray-600: var(--zt-text-secondary);
  --gray-700: var(--zt-text);
  --gray-800: var(--zt-text);
  --gray-900: var(--zt-gray-0);
}

/* Feuilles héritées encore liées : forcer le fond et le texte sombres */
[data-bs-theme="dark"] body {
  background-color: var(--zt-bg-page);
  color: var(--zt-text);
}

/* Feuilles héritées encore liées : fond des boutons et champs (parfois en !important) */
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-outline-secondary {
  background: transparent;
  color: var(--zt-text);
  border-color: var(--zt-border-strong);
}

[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary[aria-expanded="true"] {
  background: var(--zt-bg-hover);
  color: var(--zt-text);
  border-color: var(--zt-border-strong);
}

[data-bs-theme="dark"] .btn-outline-primary {
  background: transparent;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select.form-select {
  background-color: var(--zt-bg-page) !important;
  color: var(--zt-text);
  border-color: var(--zt-border-strong);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--zt-text-muted);
}

/* Icône native du sélecteur de date, noire par défaut */
[data-bs-theme="dark"] .form-control::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

[data-bs-theme="dark"] .form-control[type="file"] {
  border-color: var(--zt-border-strong);
}

/* Reliquat dark-bridge : utilitaires et composants Bootstrap encore clairs en sombre.
   Purpose: Remettre bg-white, cartes, modales, menus, tableaux et pagination sur les tokens.
   Actions: Surfaces, bordures, texte, croix de fermeture ; aucune ombre.
   Logic: Uniquement [data-bs-theme="dark"]. Les classes héritées (app-hero, content-card)
          ne sont plus dans les templates : non recopiées.
   Position: Remplace public/css/dark-bridge.css (C2). */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--zt-bg-surface) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--zt-bg-subtle) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
  color: var(--zt-text) !important;
}

[data-bs-theme="dark"] .text-muted {
  color: var(--zt-text-secondary) !important;
}

[data-bs-theme="dark"] .border-light {
  border-color: var(--zt-border) !important;
}

[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--zt-bg-subtle);
  --bs-btn-color: var(--zt-text);
  --bs-btn-border-color: var(--zt-border-strong);
  --bs-btn-hover-bg: var(--zt-bg-hover);
  --bs-btn-hover-color: var(--zt-text);
  --bs-btn-hover-border-color: var(--zt-border-strong);
  --bs-btn-active-bg: var(--zt-bg-hover);
  --bs-btn-active-color: var(--zt-text);
}

/* Pastilles Bootstrap encore utilisées (KPI, failed emails, help).
   Purpose: Éviter le jaune/vert CDN trop saturé sur fond sombre.
   Actions: Fond --zt-*-soft, texte --zt-*-strong (y compris .text-dark).
   Logic:   Uniquement .badge.bg-* : les icônes help-feature-icon gardent
            le remplissage solide via .bg-success etc.
   Position: Après les utilitaires dark-bridge. */
[data-bs-theme="dark"] .badge.bg-success {
  background-color: var(--zt-success-soft) !important;
  color: var(--zt-success-strong) !important;
}

[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.text-dark {
  background-color: var(--zt-warning-soft) !important;
  color: var(--zt-warning-strong) !important;
}

[data-bs-theme="dark"] .badge.bg-danger {
  background-color: var(--zt-danger-soft) !important;
  color: var(--zt-danger-strong) !important;
}

[data-bs-theme="dark"] .badge.bg-info {
  background-color: var(--zt-info-soft) !important;
  color: var(--zt-info-strong) !important;
}

[data-bs-theme="dark"] .badge.bg-primary {
  background-color: var(--zt-primary-soft) !important;
  color: var(--zt-primary-text) !important;
}

[data-bs-theme="dark"] .badge.bg-secondary {
  background-color: var(--zt-bg-hover) !important;
  color: var(--zt-text-secondary) !important;
}

[data-bs-theme="dark"] .card {
  --bs-card-bg: var(--zt-bg-surface);
  --bs-card-border-color: var(--zt-border);
  --bs-card-cap-bg: var(--zt-bg-subtle);
  --bs-card-color: var(--zt-text);
}

[data-bs-theme="dark"] .modal {
  --bs-modal-bg: var(--zt-bg-surface);
  --bs-modal-border-color: var(--zt-border);
  --bs-modal-header-border-color: var(--zt-border);
  --bs-modal-footer-border-color: var(--zt-border);
}

[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--zt-bg-surface);
  --bs-dropdown-border-color: var(--zt-border);
  --bs-dropdown-link-color: var(--zt-text);
  --bs-dropdown-link-hover-bg: var(--zt-bg-hover);
  --bs-dropdown-link-hover-color: var(--zt-text);
  --bs-dropdown-divider-bg: var(--zt-border);
  --bs-dropdown-header-color: var(--zt-text-secondary);
}

[data-bs-theme="dark"] .list-group {
  --bs-list-group-bg: var(--zt-bg-surface);
  --bs-list-group-color: var(--zt-text);
  --bs-list-group-border-color: var(--zt-border);
  --bs-list-group-action-hover-bg: var(--zt-bg-hover);
}

[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--zt-text);
  --bs-table-border-color: var(--zt-border);
  --bs-table-striped-bg: var(--zt-bg-subtle);
  --bs-table-striped-color: var(--zt-text);
  --bs-table-hover-bg: var(--zt-bg-hover);
  --bs-table-hover-color: var(--zt-text);
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table > thead.table-light > tr > th {
  --bs-table-bg: var(--zt-bg-subtle);
  --bs-table-color: var(--zt-text-secondary);
  --bs-table-border-color: var(--zt-border);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: var(--zt-bg-subtle);
  color: var(--zt-text-secondary);
  border-color: var(--zt-border-strong);
}

[data-bs-theme="dark"] .form-check-input:not(:checked) {
  background-color: var(--zt-bg-page);
  border-color: var(--zt-border-strong);
}

[data-bs-theme="dark"] .pagination {
  --bs-pagination-bg: var(--zt-bg-surface);
  --bs-pagination-border-color: var(--zt-border);
  --bs-pagination-hover-bg: var(--zt-bg-hover);
  --bs-pagination-hover-border-color: var(--zt-border);
  --bs-pagination-disabled-bg: var(--zt-bg-subtle);
  --bs-pagination-disabled-border-color: var(--zt-border);
}

[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color: var(--zt-border);
  --bs-nav-tabs-link-active-bg: var(--zt-bg-surface);
  --bs-nav-tabs-link-active-color: var(--zt-text);
  --bs-nav-tabs-link-active-border-color: var(--zt-border) var(--zt-border) var(--zt-bg-surface);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .shadow,
[data-bs-theme="dark"] .shadow-sm {
  box-shadow: none !important;
}

[data-bs-theme="dark"] .modal-content {
  background: var(--zt-bg-surface);
  border: 1px solid var(--zt-border);
  border-radius: var(--zt-radius-lg);
  color: var(--zt-text);
  box-shadow: none;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--zt-border);
}

[data-bs-theme="dark"] .modal-title {
  font-size: var(--zt-text-lg);
  font-weight: var(--zt-weight-semibold);
  color: var(--zt-text);
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.65;
}

[data-bs-theme="dark"] .btn-close:hover {
  opacity: 1;
}

[data-bs-theme="dark"] .form-label {
  color: var(--zt-text);
}

[data-bs-theme="dark"] .form-text {
  color: var(--zt-text-secondary);
}

/* Thème sombre du portail client : rouge éclairci pour rester lisible */
[data-portal="customer"][data-bs-theme="dark"] {
  --zt-primary: var(--zt-red-500);
  --zt-primary-rgb: 185, 61, 55;
  --zt-primary-hover: var(--zt-red-400);
  --zt-primary-active: var(--zt-red-300);
  --zt-primary-text: var(--zt-red-300);
  --zt-primary-text-rgb: 219, 127, 121;
  --zt-primary-soft: rgba(201, 84, 77, 0.14);
  --zt-primary-border: rgba(201, 84, 77, 0.40);
  --zt-primary-strong: var(--zt-red-200);
  --zt-primary-focus: rgba(201, 84, 77, 0.35);
  --zt-nav-bg: #0b0d11;
}

/* --------------------------------------------------------------------------
   Bootstrap 5.3 : composants dont la couleur principale est codée en dur
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--zt-primary);
  --bs-btn-border-color: var(--zt-primary);
  --bs-btn-hover-bg: var(--zt-primary-hover);
  --bs-btn-hover-border-color: var(--zt-primary-hover);
  --bs-btn-active-bg: var(--zt-primary-active);
  --bs-btn-active-border-color: var(--zt-primary-active);
  --bs-btn-disabled-bg: var(--zt-primary);
  --bs-btn-disabled-border-color: var(--zt-primary);
  --bs-btn-focus-shadow-rgb: var(--zt-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--zt-primary-text);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-border-color: var(--zt-primary);
  --bs-btn-hover-bg: var(--zt-primary);
  --bs-btn-hover-border-color: var(--zt-primary);
  --bs-btn-active-bg: var(--zt-primary-hover);
  --bs-btn-active-border-color: var(--zt-primary-hover);
  --bs-btn-disabled-color: var(--zt-primary-text);
  --bs-btn-disabled-border-color: var(--zt-primary);
  --bs-btn-focus-shadow-rgb: var(--zt-primary-rgb);
}

.btn-link {
  --bs-btn-color: var(--zt-primary-text);
  --bs-btn-hover-color: var(--zt-primary-strong);
  --bs-btn-active-color: var(--zt-primary-strong);
}

/* Boutons sémantiques Bootstrap : mêmes tokens que les pastilles, pas le vert/jaune CDN.
   Purpose: KPI, fiche événement, mails en échec et confirmations utilisent encore
            btn-success / btn-warning / btn-danger / btn-info.
   Actions: Remplir, hover et focus via --zt-success|warning|danger|info.
   Logic:   Warning garde un texte sombre (ambre trop clair pour du blanc).
            Hover = color-mix vers le noir (lisible en clair et en sombre).
   Position: Après btn-primary ; badges sombres plus bas. */
.btn-success {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--zt-success);
  --bs-btn-border-color: var(--zt-success);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--zt-success) 82%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--zt-success) 82%, #000);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: color-mix(in srgb, var(--zt-success) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--zt-success) 70%, #000);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--zt-success);
  --bs-btn-disabled-border-color: var(--zt-success);
  --bs-btn-focus-shadow-rgb: var(--zt-success-rgb);
}

.btn-warning {
  --bs-btn-color: var(--zt-gray-900);
  --bs-btn-bg: var(--zt-warning);
  --bs-btn-border-color: var(--zt-warning);
  --bs-btn-hover-color: var(--zt-gray-900);
  --bs-btn-hover-bg: color-mix(in srgb, var(--zt-warning) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--zt-warning) 88%, #000);
  --bs-btn-active-color: var(--zt-gray-900);
  --bs-btn-active-bg: color-mix(in srgb, var(--zt-warning) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--zt-warning) 78%, #000);
  --bs-btn-disabled-color: var(--zt-gray-900);
  --bs-btn-disabled-bg: var(--zt-warning);
  --bs-btn-disabled-border-color: var(--zt-warning);
  --bs-btn-focus-shadow-rgb: var(--zt-warning-rgb);
}

.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--zt-danger);
  --bs-btn-border-color: var(--zt-danger);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--zt-danger) 82%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--zt-danger) 82%, #000);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: color-mix(in srgb, var(--zt-danger) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--zt-danger) 70%, #000);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--zt-danger);
  --bs-btn-disabled-border-color: var(--zt-danger);
  --bs-btn-focus-shadow-rgb: var(--zt-danger-rgb);
}

.btn-info {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--zt-info);
  --bs-btn-border-color: var(--zt-info);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--zt-info) 82%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--zt-info) 82%, #000);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: color-mix(in srgb, var(--zt-info) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--zt-info) 70%, #000);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--zt-info);
  --bs-btn-disabled-border-color: var(--zt-info);
  --bs-btn-focus-shadow-rgb: var(--zt-info-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--zt-primary-border);
  box-shadow: 0 0 0 0.25rem var(--zt-primary-focus);
}

.form-check-input:checked {
  background-color: var(--zt-primary);
  border-color: var(--zt-primary);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--zt-primary);
}

.pagination {
  --bs-pagination-color: var(--zt-primary-text);
  --bs-pagination-hover-color: var(--zt-primary-strong);
  --bs-pagination-focus-color: var(--zt-primary-strong);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--zt-primary-focus);
  --bs-pagination-active-bg: var(--zt-primary);
  --bs-pagination-active-border-color: var(--zt-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--zt-primary);
}

.list-group {
  --bs-list-group-active-bg: var(--zt-primary);
  --bs-list-group-active-border-color: var(--zt-primary);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--zt-primary);
}