/* =====================================================================
   compat.css — Couche de pont (bridge) du nouveau design Santei
   ---------------------------------------------------------------------
   Le nouveau design system (styles.css, issu du handoff Claude Design)
   définit ses tokens sur [data-theme="natural|light|dark"] :
   --bg, --fg, --accent, --green, --bg-sidebar, etc.

   L'application historique référence ~1000 fois d'anciennes variables
   sémantiques (--fond, --primaire, --texte, --menu, --case…) en style
   inline et via les utilitaires compilés (bg-primaire, text-secondaire…).

   Ce fichier mappe ces anciens noms sur les nouveaux tokens, pour que
   tout le markup existant adopte automatiquement les 3 thèmes sans être
   réécrit. Les alias sont des `var()` : ils se résolvent à l'usage dans
   le thème actif, donc une seule déclaration :root suffit pour les 3.

   ⚠️ Couche TEMPORAIRE : au fur et à mesure que les pages sont portées
   sur les composants du design, ces alias (et la couche utilitaires
   compilée css/utilities.css + compat-components.css) seront retirés.
   ===================================================================== */

:root {
  /* ---- Texte ---- */
  --texte: var(--fg);

  /* ---- Primaires (vert foncé de marque, accents, surfaces sombres) ---- */
  /* Mappés sur --fg : sombres en thèmes natural/clair, clairs en sombre,
     donc texte lisible ET surfaces foncées cohérentes. Les boutons
     principaux passent par .btn-primary (défini par le design). */
  --primaire: var(--fg);
  --primaire-contraste: var(--fg);

  /* ---- Secondaires (texte atténué, bordures neutres) ---- */
  --secondaire: var(--fg-muted);
  --secondaire-contraste: var(--border-strong);

  /* ---- Menu principal (sidebar gauche) : vraie couleur de barre ---- */
  --menu-principal: var(--bg-sidebar);
  --bordure-menu-principal: var(--border-strong);

  /* ---- Accent décoratif beige/chaud ---- */
  --menu: var(--bg-subtle);
  --menu-contraste: var(--border-strong);

  /* ---- Fonds (pages, cartes, encadrés) ---- */
  --fond: var(--bg);
  --fond-contraste: var(--bg-hover);
  --fond-bis: var(--bg-elevated);
  --case: var(--bg-card);
  --case-contraste: var(--bg-subtle);
  /* Utilisé comme TEXTE clair sur surfaces sombres : --bg-elevated s'oppose
     toujours à --fg, donc contraste garanti dans les 3 thèmes. */
  --case-bis: var(--bg-elevated);

  /* ---- États ---- */
  --validation: var(--green);
  --refus: var(--red);
  --bleu: var(--blue);
  --bleu-variation: var(--blue);
  --validation-variante: var(--green);

  /* ---- Texte des description lists ---- */
  --texte-label: var(--fg-muted);
  --texte-contenu: var(--fg);

  /* ---- Accent doré (anciennement "taupe" = anneaux de focus, accents) ---- */
  --taupe: var(--accent);

  /* ---- Blanc pur : utilisé par .text-white / .border-white (compat-components).
     Sans cette définition, var(--white) était invalide → le texte des boutons
     pleins (ex. « Nouvelle prestation ») héritait de --fg et devenait illisible. ---- */
  --white: #ffffff;
}

/* =====================================================================
   Remappage des gris/blancs Tailwind « bruts » vers les tokens du design.
   L'ancien markup utilise ~4000 fois bg-white / text-gray-* / border-gray-*
   (palette froide, non thématisée → cassée en thème sombre). Comme compat.css
   est chargé EN DERNIER, ces règles surchargent css/utilities.css par ordre
   de source (même spécificité) — tout adopte la palette chaude + les 3 thèmes.
   ===================================================================== */
/* Fonds */
.bg-white { background-color: var(--bg-card); }
.bg-gray-50 { background-color: var(--bg-subtle); }
.bg-gray-100 { background-color: var(--bg-hover); }
.bg-gray-200 { background-color: var(--bg-subtle); }
.bg-gray-300 { background-color: var(--border-strong); }
.bg-gray-400 { background-color: var(--fg-subtle); }
.bg-gray-500 { background-color: var(--fg-muted); }
.bg-gray-600 { background-color: var(--fg-muted); }
.bg-gray-700 { background-color: var(--fg); }
.bg-gray-800 { background-color: var(--fg); }
.bg-gray-900 { background-color: var(--fg); }
.bg-black { background-color: var(--fg); }
.hover\:bg-gray-50:hover { background-color: var(--bg-hover); }
.hover\:bg-gray-100:hover { background-color: var(--bg-hover); }
.hover\:bg-gray-200:hover { background-color: var(--bg-subtle); }
.hover\:bg-white:hover { background-color: var(--bg-card); }
/* Textes */
.text-gray-900 { color: var(--fg); }
.text-gray-800 { color: var(--fg); }
.text-gray-700 { color: var(--fg); }
.text-gray-600 { color: var(--fg-muted); }
.text-gray-500 { color: var(--fg-muted); }
.text-gray-400 { color: var(--fg-subtle); }
.text-gray-300 { color: var(--fg-subtle); }
.text-black { color: var(--fg); }
.hover\:text-gray-900:hover { color: var(--fg); }
.hover\:text-gray-800:hover { color: var(--fg); }
.hover\:text-gray-700:hover { color: var(--fg); }
.hover\:text-gray-600:hover { color: var(--fg-muted); }
.hover\:text-gray-500:hover { color: var(--fg-muted); }
/* Bordures */
.border-gray-100 { border-color: var(--border); }
.border-gray-200 { border-color: var(--border); }
.border-gray-300 { border-color: var(--border); }
.border-gray-400 { border-color: var(--border-strong); }
.border-gray-700, .border-gray-800, .border-gray-900 { border-color: var(--fg); }
.hover\:border-gray-300:hover { border-color: var(--border-strong); }
.hover\:border-gray-400:hover { border-color: var(--border-strong); }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }
/* Dégradés (skeletons gris → beige) */
.from-gray-200 { --tw-gradient-from: var(--bg-subtle) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-gray-100 { --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--bg-hover) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-gray-200 { --tw-gradient-to: var(--bg-subtle) var(--tw-gradient-to-position); }

/* Couleurs « soft » (bleu/orange/rouge/vert) des modaux de facturation → palette
   thématisée de la maquette (au lieu des bg-blue-50/amber-50 froids de Tailwind). */
.bg-blue-50 { background-color: var(--blue-soft); }
.bg-amber-50, .bg-yellow-50 { background-color: var(--orange-soft); }
.bg-amber-50\/50 { background-color: color-mix(in srgb, var(--orange-soft) 60%, transparent); }
.bg-red-50 { background-color: var(--red-soft); }
.bg-green-50 { background-color: var(--green-soft); }
.bg-slate-100 { background-color: var(--bg-subtle); }
.border-blue-100, .border-blue-200 { border-color: color-mix(in srgb, var(--blue) 30%, transparent); }
.border-amber-200, .border-amber-300, .border-yellow-200 { border-color: color-mix(in srgb, var(--orange) 32%, transparent); }
.border-red-200 { border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.border-green-200 { border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--blue); }
.text-amber-600, .text-amber-700, .text-amber-800, .text-yellow-700 { color: var(--orange); }
.text-red-600, .text-red-700, .text-red-800 { color: var(--red); }
.text-green-600, .text-green-700, .text-green-800 { color: var(--green); }
.text-slate-600 { color: var(--fg-muted); }
.hover\:bg-red-50:hover { background-color: var(--red-soft); }
/* Fond ambre translucide au survol des icônes d'action (Créer un avoir,
   Abandonner le recouvrement…), aligné sur le fond translucide de l'action
   Supprimer (hover:bg-refus/10). Non généré par Tailwind → défini ici. */
.hover\:bg-orange\/10:hover { background-color: color-mix(in srgb, var(--orange) 10%, transparent); }

/* ---------------------------------------------------------------------
   Alignement des modaux historiques (.appsy-modal-*) sur l'esthétique
   macOS du design : header sombre (couleur du menu) + léger effet verre.
   Chargé APRÈS compat-components.css pour surcharger ces quelques règles.
   Respecte la convention CLAUDE.md (header vert foncé, footer fixe).
   --------------------------------------------------------------------- */
/* En-tête « verre » réutilisable pour les modaux génériques (pas .appsy-*) :
   définit une seule fois le fond/texte de l'en-tête → modifiable d'un seul endroit. */
.modal-head-glass {
  background: color-mix(in srgb, var(--modal-head-bg) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--modal-head-fg) 10%, transparent);
}
.modal-htitle { color: var(--modal-head-fg); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.modal-hsub { color: var(--modal-head-fg-muted); font-size: 13.5px; margin-top: 4px; }

/* Centrage façon design (place-items:center), pas de feuille basse mobile. */
.appsy-modal-container { align-items: center !important; padding: 1rem !important; }
.appsy-modal-panel {
  background: var(--modal-glass);
  -webkit-backdrop-filter: var(--modal-blur);
  backdrop-filter: var(--modal-blur);
  border: none;
  border-radius: 18px !important;
  max-height: 88vh;
  box-shadow: var(--shadow-lg), inset 0 0 0 0.5px color-mix(in srgb, #fff 18%, transparent);
  animation: pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.appsy-modal-header {
  padding: 22px 26px;
  background: color-mix(in srgb, var(--modal-head-bg) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--modal-head-fg) 10%, transparent);
}
.appsy-modal-title { color: var(--modal-head-fg); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.appsy-modal-subtitle { color: var(--modal-head-fg-muted); font-size: 13.5px; }
.appsy-modal-close { color: var(--modal-head-fg); border-radius: 999px; width: 32px; height: 32px; }
.appsy-modal-close:hover { color: var(--modal-head-fg); background: color-mix(in srgb, var(--modal-head-fg) 12%, transparent); }
.appsy-modal-content { background: transparent; padding: 24px 26px; }
.appsy-modal-footer {
  padding: 16px 26px;
  gap: 10px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
/* Structure scrollable commune à TOUS les modaux .appsy-modal-* :
   en-tête + pied figés (verre), corps qui défile derrière. Garantit le même
   comportement (footer flou + scroll derrière) pour la totalité des modaux. */
.appsy-modal-panel { display: flex; flex-direction: column; overflow: hidden; }
/* Le panneau (verre, backdrop-filter → contexte d'empilement NON positionné) doit
   passer AU-DESSUS de l'overlay (.appsy-modal-overlay = position:fixed z-index:1000).
   Sans z-index positif, un contexte d'empilement non positionné est peint SOUS un
   frère positionné à z:1000 → l'overlay voilait le corps translucide du modal.
   Le clic-hors-panneau reste fonctionnel : l'overlay demeure au-dessus partout où le
   panneau ne le couvre pas. */
.appsy-modal-panel { position: relative; z-index: 1001; }
.appsy-modal-panel > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.appsy-modal-header, .appsy-modal-footer { flex-shrink: 0; }
.appsy-modal-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.appsy-modal-overlay {
  /* Référence unique du fond flou (aligné sur .modal-backdrop / modal RDV). */
  background-color: color-mix(in srgb, var(--bg-sidebar) 40%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 1;
  animation: fade 0.22s ease;
}

/* ---------------------------------------------------------------------
   Sélecteur de thème flottant (3 thèmes) — pilule bas-droite
   --------------------------------------------------------------------- */
.santei-theme-switch {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-bg, var(--bg-elevated));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  --thumb-index: 0;
}
.santei-theme-opt {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.08s ease;
}
.santei-theme-opt:active { transform: scale(0.9); }
.santei-theme-opt svg { width: 17px; height: 17px; }
.santei-theme-opt.is-active { color: var(--accent); }
.santei-theme-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--thumb-index) * 34px));
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@media print { .santei-theme-switch { display: none; } }

/* Pages avec menu secondaire collé au menu primaire : la zone .page n'a pas
   de padding, pour que la barre secondaire touche la sidebar principale. */
.page-flush { padding: 0; }

/* Bouton d'enregistrement des paramètres : aligné sur le bouton principal du
   design (.btn-primary) — coins 10px, fond sidebar, clic « shrink ». */
.btn-save {
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.08s ease, filter 0.15s ease;
}
.btn-save:hover:not(:disabled) { background: var(--bg-sidebar-active); border-color: transparent; }
.btn-save:active:not(:disabled) { transform: scale(0.96); }
.btn-save.is-saved, .btn-save.is-loading { background: var(--bg-sidebar); }
/* Bouton « Annuler » des barres d'enregistrement → bouton secondaire du design */
.btn-cancel {
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.btn-cancel:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); }
.btn-cancel:active:not(:disabled) { transform: scale(0.96); }

/* La barre d'enregistrement des paramètres utilise désormais la SaveBar du
   design system (.snt-savebar / includes/components/save-bar.php) : plus de
   surcharge de compatibilité nécessaire ici. */

/* Topbar responsive : sur tablette/mobile, les actions rapides deviennent des
   boutons icône (label masqué), et la recherche prend la place disponible. */
@media (max-width: 1099px) {
  .topbar .qa-label { display: none; }
  .topbar .quick-action { padding: 8px 10px; }
}
@media (max-width: 699px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .quick-search { flex: 1; min-width: 0; }
  .quick-search .quick-kbd { display: none; }
}

/* ---------------------------------------------------------------------
   Icône masquée générique (réutilise les SVG de ressources/icones)
   Usage : <div class="mask-ico" style="--i:url('….svg');width:16px;height:16px"></div>
   --------------------------------------------------------------------- */
.mask-ico {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--i) no-repeat center / contain;
  mask: var(--i) no-repeat center / contain;
}

/* ---------------------------------------------------------------------
   Dashboard — l'aperçu de la journée (.hero) suit le thème actif (comme la
   maquette : vert foncé en naturel, blanc en clair, presque noir en sombre).
   Le contenu injecté par dashboard-controller.js utilise les tokens
   --fg-sidebar / --fg-sidebar-muted, qui s'adaptent automatiquement.
   --------------------------------------------------------------------- */
#overview-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
/* Message d'erreur de connexion (page auth) */
.auth-error {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 500;
}
.auth-soon { font-size: 11px; font-weight: 600; color: var(--fg-subtle); margin-left: 4px; }

/* =====================================================================
   Calendrier — apparence alignée sur la maquette (.cal-*).
   ===================================================================== */
/* En-têtes de jour : aujourd'hui = cellule sombre (var(--bg-sidebar)) comme .cal-head.today */
.cal-day-head { background: var(--bg-card); color: var(--fg-muted); transition: none; }
.cal-day-head .cal-day-wd { color: var(--fg-muted); letter-spacing: 0.06em; }
.cal-day-head .cal-day-num { color: var(--fg); letter-spacing: -0.02em; }
.cal-day-head.is-today { background: var(--bg-sidebar); color: var(--fg-sidebar); }
.cal-day-head.is-today .cal-day-wd { color: var(--fg-sidebar-muted); }
.cal-day-head.is-today .cal-day-num { color: var(--fg-sidebar); }
/* Blocs de RDV : coins 8px (maquette .cal-event). Scopé aux événements de la
   grille horaire (classe rounded-md), pas aux pastilles journée entière. */
.grid [data-appointment-id].rounded-md,
.grid [data-appointment-id].rounded-lg { border-radius: 8px !important; }
/* Survols (maquette) : transitions fluides + effet visible sur calendrier et tables.
   Les règles :hover de base sont dans styles.css ; ici on garantit la transition
   et on renforce l'événement calendrier (assombrissement léger en plus du scale). */
.table tbody tr { transition: background-color 0.12s ease; }
.cal-cell { transition: background-color 0.12s ease; }
.cal-month-cell:not(.is-today) { transition: background-color 0.12s ease; }
.cal-event { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.cal-event:hover { filter: brightness(0.95); }
.cal-allday-chip { transition: filter 0.15s ease; }
.cal-allday-chip:hover { filter: brightness(0.95); }
.cal-month-pill { transition: filter 0.15s ease; }
.cal-month-pill:hover { filter: brightness(0.95); }
/* Icône de lieu dans un événement .cal-event (masque SVG) */
.cal-ev-ico { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; }
.cal-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-allday-chip { z-index: 2; }
/* Vue mois (.cal-month-*) — cellules conformes à la maquette */
.cal-month-cell { transition: background 0.12s; }
.cal-month-cell:not(.is-today):hover { background: var(--bg-subtle); }
.cal-m-daynum { width: 26px; height: 26px; display: grid; place-items: center; font-size: 13px; font-weight: 500; color: var(--fg); border-radius: 999px; }
.cal-m-daynum.today { background: var(--accent); color: #1a1306; font-weight: 700; }
.cal-month-cell.is-today .cal-m-daynum:not(.today) { color: var(--fg-sidebar); }
.cal-m-count { font-size: 11px; color: var(--fg-muted); background: var(--bg-subtle); padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.cal-month-cell.is-today .cal-m-count { color: var(--fg-sidebar); background: color-mix(in srgb, var(--fg-sidebar) 14%, transparent); }
.cal-month-pill { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-month-more { font-size: 10.5px; color: var(--fg-muted); font-weight: 600; cursor: pointer; padding-left: 2px; }
.cal-month-cell.is-today .cal-month-more { color: var(--fg-sidebar-muted); }
/* Créneaux horaires (modal RDV étape 4) — sélection au design (accent doré) */
.cal-slot { border: 1px solid var(--border); color: var(--fg); background: var(--bg-card); }
.cal-slot:hover:not(.is-active) { border-color: var(--accent); background: var(--accent-soft); }
.cal-slot.is-active { background: var(--accent); color: #1a1306; border-color: var(--accent); box-shadow: var(--shadow-sm); font-weight: 700; }
/* Interrupteurs (.appsy-toggle) alignés sur la maquette : vert quand activé */
.appsy-toggle { background-color: var(--border-strong) !important; }
.appsy-toggle[aria-checked="true"] { background-color: var(--green) !important; }

/* Feuilles décoratives de l'aperçu : uniquement sur le thème naturel. */
[data-theme="light"] .hero-leaf,
[data-theme="dark"] .hero-leaf { display: none; }

/* =====================================================================
   Cases à cocher — apparence Design System (comme .snt-checkbox) :
   case custom (appearance:none), boîte arrondie + coche blanche dessinée
   sur fond accent quand cochée. Couvre .appsy-checkbox + toutes les cases
   natives (hors .toggle et .sr-only) en une seule source (chargée en dernier).
   ===================================================================== */
.appsy-checkbox,
input[type="checkbox"]:not(.toggle):not(.sr-only) {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box;
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-input);
  border-radius: var(--radius-xs);
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  margin: 0;
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
/* Neutralise l'ancienne coche ::before (bordure pivotée) de compat-components.css */
.appsy-checkbox::before, .appsy-checkbox::after,
input[type="checkbox"]:not(.toggle):not(.sr-only)::before,
input[type="checkbox"]:not(.toggle):not(.sr-only)::after { content: none !important; display: none !important; }
.appsy-checkbox:checked,
input[type="checkbox"]:not(.toggle):not(.sr-only):checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 13px;
  border-color: var(--accent);
}
.appsy-checkbox:active,
input[type="checkbox"]:not(.toggle):not(.sr-only):active { transform: scale(0.92); }
.appsy-checkbox:focus-visible,
input[type="checkbox"]:not(.toggle):not(.sr-only):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.appsy-checkbox:disabled,
input[type="checkbox"]:not(.toggle):not(.sr-only):disabled { opacity: 0.5; cursor: not-allowed; }
/* Cases radio : même couleur d'accent native */
input[type="radio"]:not(.sr-only) { accent-color: var(--accent); cursor: pointer; }

/* Sélecteurs de police (apparence factures/attestations) — sélection au design
   (bordure dorée + fond accent-soft + pastille dorée), au lieu de l'anneau cassé. */
.font-card { border: 1px solid var(--border) !important; background: var(--bg-card); }
.font-card:hover { border-color: var(--border-strong) !important; }
.font-card.is-active {
  border-color: var(--accent) !important;
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Animation de chargement de l'aperçu de la journée (au lieu d'un skeleton) */
.hero-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 0;
  min-height: 200px;
}
/* Indicateur de chargement NET au premier plan : posé hors de #overview-content
   (qui est flouté pendant le chargement), donc jamais flou. */
.hero-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}
.hero-loading-ring {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 3px solid color-mix(in srgb, var(--fg-sidebar) 18%, transparent);
  border-top-color: var(--accent);
  animation: heroSpin 0.85s linear infinite;
}
.hero-loading-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-sidebar-muted);
  letter-spacing: 0.01em;
  animation: heroLoadingPulse 1.6s ease-in-out infinite;
}
@keyframes heroSpin { to { transform: rotate(360deg); } }
@keyframes heroLoadingPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-loading-ring { animation-duration: 2s; }
  .hero-loading-text { animation: none; }
}

/* Lien / statut dans le panneau de détail du RDV (sur le hero, texte clair) */
.appt-detail-link {
  color: var(--fg-sidebar);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg-sidebar) 40%, transparent);
  text-underline-offset: 2px;
}
.appt-detail-link:hover { text-decoration-color: var(--accent); color: var(--accent); }
.appt-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-sidebar-muted);
}
.appt-detail-status svg { width: 16px; height: 16px; }

/* =====================================================================
   Modaux — uniformisation sur le design (effet verre macOS) :
   tous les fonds (overlays) de modaux prennent la teinte sombre + le flou
   du design ; les panneaux adoptent un rayon/ombre cohérents.
   ===================================================================== */
.fixed.inset-0.bg-gray-500,
.fixed.inset-0.bg-black,
.fixed.inset-0.transition-opacity.bg-gray-500,
.fixed.inset-0.bg-gray-900,
.appsy-modal-overlay {
  background-color: color-mix(in srgb, var(--bg-sidebar) 28%, transparent) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}
/* Panneaux de modaux (carte dans un overlay plein écran) : matériau « verre »
   du design (translucide + flou), rayon 18px, ombre, animation « pop ». Scopé
   aux descendants d'un overlay .fixed.inset-0 → n'affecte pas les cartes de page. */
.fixed.inset-0 [class*="rounded-2xl"][class*="shadow-xl"],
.fixed.inset-0 [class*="rounded-xl"][class*="shadow-xl"],
.fixed.inset-0 [class*="rounded-lg"][class*="shadow-xl"],
.fixed.inset-0 [class*="rounded-2xl"][class*="bg-white"],
.fixed.inset-0 [class*="rounded-lg"][class*="bg-white"][class*="shadow"] {
  background: var(--modal-glass) !important;
  -webkit-backdrop-filter: var(--modal-blur);
  backdrop-filter: var(--modal-blur);
  border-radius: 18px !important;
  box-shadow: var(--shadow-lg), inset 0 0 0 0.5px color-mix(in srgb, #fff 18%, transparent) !important;
  border: none !important;
  animation: pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* ---------------------------------------------------------------------
   Sélecteur de thème dans les Paramètres (onglet Apparence)
   --------------------------------------------------------------------- */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 760px;
}
.theme-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.08s ease;
  position: relative;
}
.theme-card:hover { border-color: var(--border-strong); }
.theme-card:active { transform: scale(0.98); }
.theme-card.is-active { border-color: var(--accent); background: var(--accent-soft); }
.theme-card-swatch {
  display: inline-flex;
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.theme-card-swatch span { flex: 1; }
.theme-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.theme-card-name { font-weight: 600; font-size: 14px; color: var(--fg); }
.theme-card-desc { font-size: 12px; color: var(--fg-muted); }
.theme-card-check {
  margin-left: auto;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #2a2208;
  flex-shrink: 0;
}

/* Ligne « à facturer » sélectionnée (sélection multiple) */
.tobill-selected { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.tobill-selected:hover { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; }

/* =====================================================================
   Listes de facturation responsives (RDV à facturer / brouillons / factures).
   Les cartes ont overflow:hidden : sur fenêtre étroite (ou barre latérale
   dépliée), les colonnes fixes (n°, date, badge de statut, montant) + les
   raccourcis d'action débordaient à droite et étaient rognés.
   On rend la LISTE elle-même responsive (container query, pas la fenêtre) et
   on masque par ORDRE DE PRIORITÉ — tout reste accessible via le menu « … »
   (et le clic sur la ligne) :
     1) raccourcis d'action inline   (< 720px)
     2) badge de statut (w-32)       (< 620px)
     3) colonne date (w-24)          (< 500px)
   On conserve toujours : case, nom du patient, n° (w-28), montant, menu « … ».
   ===================================================================== */
[x-data="billingToBillManager()"],
[x-data="billingHistoryManager()"] { container-type: inline-size; container-name: billlist; }

/* 1) Raccourcis d'action inline (les .tooltip qui ne sont pas le menu « … »
   relatif). Comme la maquette, on ne garde que le menu « … » dès que la liste
   n'est pas très large ; les raccourcis ne réapparaissent que sur écran large.
   Le menu « … » (.relative.tooltip) reste, lui, toujours visible. */
@container billlist (max-width: 1024px) {
  .invoice-history-row [class*="group-hover:opacity-100"] > .tooltip:not(.relative) { display: none !important; }
}
/* 2) Badge de statut (statut aussi indiqué par la barre de couleur à gauche) */
@container billlist (max-width: 620px) {
  .invoice-history-row [class*="w-32"] { display: none !important; }
}
/* 3) Colonne date */
@container billlist (max-width: 500px) {
  .invoice-history-row [class*="w-24"] { display: none !important; }
}

/* Actions des lignes de factures (Historique / Rétrocessions) : TOUJOURS visibles
   comme la maquette (icônes primaires + menu « … »). Largeur fixe → montants
   alignés ; repli par priorité (Aperçu puis Modifier dans le menu) sur étroit. */
.invoice-history-row .row-actions.inv-actions { width: 136px; overflow: visible; }
.invoice-history-row .row-actions.inv-actions .icon-btn { flex-shrink: 0; }
/* Le menu « … » doit pouvoir déborder de la ligne/carte (sinon il s'ouvre mais
   reste rogné par overflow:hidden → invisible). */
.invoice-history-row { overflow: visible; }

/* Boutons « moyen de paiement » (modal d'encaissement) — pilules reprenant
   les moyens de paiement de l'utilisateur, façon maquette. */
.pay-mode-btn {
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid var(--fond);
  background: #fff;
  color: var(--texte);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.pay-mode-btn:hover { border-color: var(--accent); }
.pay-mode-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Coins arrondis des cartes de listes de facturation : garder overflow:hidden
   même quand la carte contient une bulle d'aide .tooltip. La règle globale
   « div:has(.tooltip) { overflow: visible !important } » (compat-components.css)
   forçait sinon overflow:visible → coins du bas non arrondis. Les menus « … »
   sont désormais en position:fixed et n'ont plus besoin que la carte déborde. */
.rounded-xl.shadow-sm.overflow-hidden:has(.invoice-history-row),
.rounded-xl.shadow-sm.overflow-hidden:has([x-collapse]) { overflow: hidden !important; }
.invoice-history-row .inv-actions .relative > [x-show] { z-index: 60; }
@container billlist (max-width: 560px) {
  .inv-actions .qa-2 { display: none; }
  .invoice-history-row .row-actions.inv-actions { width: 104px; }
}
@container billlist (max-width: 470px) {
  .inv-actions .qa-3 { display: none; }
  .invoice-history-row .row-actions.inv-actions { width: 70px; }
}

/* Liste « Factures en attente de règlement » : colonnes n°/date affichées sur
   liste large, repliées sous le nom (sous-ligne) sur étroit — façon maquette. */
.bill-num-col, .bill-date-col { display: none; }
.unpaid-submeta { display: block; }
@container billlist (min-width: 820px) {
  .bill-num-col { display: inline-block; }
  .bill-date-col { display: block; }
  .unpaid-submeta { display: none; }
}

/* Cases à cocher « à facturer » : masquées par défaut, révélées au survol de la
   ligne (maquette .bill-hide-checks). Toujours visibles si la case est cochée
   ou dès qu'une sélection est active (le conteneur perd .bill-hide-checks). */
.bill-hide-checks .invoice-history-row .bill-check {
  width: 0;
  border-width: 0;
  opacity: 0;
  margin-right: -12px;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.22s cubic-bezier(0.2,0.8,0.25,1), margin-right 0.22s cubic-bezier(0.2,0.8,0.25,1), opacity 0.16s ease, border-width 0.2s;
}
.bill-hide-checks .invoice-history-row:hover .bill-check,
.bill-hide-checks .invoice-history-row:focus-within .bill-check {
  width: 20px;
  border-width: 1.5px;
  opacity: 1;
  margin-right: 0;
  pointer-events: auto;
}
.bill-check.on {
  width: 20px !important;
  opacity: 1 !important;
  border-width: 1.5px !important;
  margin-right: 0 !important;
  pointer-events: auto !important;
}
/* État partiel (en-tête de groupe : certains RDV cochés) — toujours visible */
.bill-check.partial {
  width: 20px !important;
  opacity: 1 !important;
  border-width: 1.5px !important;
  margin-right: 0 !important;
  pointer-events: auto !important;
}
/* Lignes regroupées (mode « Par patient ») : indentées sous l'en-tête de groupe
   (équivalent du .bill-row-grouped de la maquette, padding-left: 30px). */
.invoice-history-row.is-grouped { padding-left: 2.25rem; }
/* En-tête de groupe affiché dans la liste à facturer */
.bill-group-head { cursor: pointer; }
/* Patient entièrement facturé : pas de case → on garde l'alignement du nom et on
   retire l'affordance cliquable. */
.bill-group-head.is-fully-billed { cursor: default; padding-left: 54px; }
.bill-group-head + .invoice-history-row, .bill-group-head { border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }

/* =====================================================================
   Table Patients — colonnes de la maquette : Contact, Dernière visite,
   Prochain RDV, Solde (pastille), chevron.
   ===================================================================== */
.pat-contact-col .pat-contact { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.pat-contact-main { font-size: 13px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pat-contact-sub { font-size: 12px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pat-date-col { color: var(--fg-muted); font-size: 13px; white-space: nowrap; }
.pat-solde { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.pat-solde--ok { background: var(--green-soft); color: var(--green); }
.pat-solde--due { background: var(--red-soft); color: var(--red); }
.pat-chevron-col { width: 44px; }
.pat-chevron { width: 18px; height: 18px; margin-left: auto; background-color: var(--fg-subtle); mask-size: contain; -webkit-mask-size: contain; transition: background-color 0.12s; }
.table.table-dense tr:hover .pat-chevron { background-color: var(--accent); }

/* Drapeau € (impayés) près du nom — visible uniquement quand la colonne Solde
   est masquée (écran étroit), conformément à la maquette. */
.pat-due-flag { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-left: 7px; vertical-align: middle; }

/* Responsive selon la largeur RÉELLE de la table (container query → tient compte
   de la barre latérale). On masque par priorité : Prochain RDV → Dernière visite
   → Contact → Solde (remplacé alors par le drapeau €). Nom + chevron restent. */
.patients-table-card { container-type: inline-size; container-name: patstable; }
@container patstable (max-width: 880px) {
  .table.table-dense th:nth-child(4), .table.table-dense td:nth-child(4) { display: none; }
}
@container patstable (max-width: 700px) {
  .table.table-dense th:nth-child(3), .table.table-dense td:nth-child(3) { display: none; }
}
@container patstable (max-width: 560px) {
  .table.table-dense th:nth-child(2), .table.table-dense td:nth-child(2) { display: none; }
}
@container patstable (max-width: 440px) {
  .table.table-dense th:nth-child(5), .table.table-dense td:nth-child(5) { display: none; }
  .pat-due-flag { display: inline-block; }
}

/* Anneau de chargement du calendrier (style maquette : anneau fin + sommet accent) */
.cal-spin-ring {
  display: inline-block;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 3px solid color-mix(in srgb, var(--fg) 14%, transparent);
  border-top-color: var(--accent);
  animation: heroSpin 0.85s linear infinite;
}

/* Sous-créneaux cliquables du calendrier : créer un RDV au quart d'heure (vue
   jour) / à la demi-heure (vue semaine) près. L'affordance « + HH:MM » n'apparaît
   que sur le sous-créneau réellement survolé (pas toute la cellule). */
/* Classe DÉDIÉE (≠ .cal-slot du picker modal, qui a border+bg) : juste une zone
   cliquable transparente, sans bordure ni fond, pour ne pas alourdir la grille. */
.cal-subslot { position: absolute; left: 0; right: 0; z-index: 1; cursor: pointer; background: transparent; border: none; }
.cal-cell:hover .cal-add { opacity: 0; }
.cal-subslot:hover .cal-add { opacity: 1; }
.cal-subslot-sm .cal-add { font-size: 10.5px; gap: 4px; border-radius: 5px; }
.cal-subslot-sm .cal-add svg { width: 11px; height: 11px; }

/* Calendrier — bordures exactement comme la maquette : très fines/claires.
   Horizontale d'heure = --border 50 %, sous-lignes (½ h / ¼ h) dashed --border 60 %,
   verticales de jour = --border plein. (cf. styles.css .cal-cell/.cal-subline du design) */
.cal-cell { border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent); }
.cal-subline { border-top-color: color-mix(in srgb, var(--border) 60%, transparent) !important; }

/* ============================================================
   Badges de statut RDV — motif « soft » du Design (.snt-badge--*).
   Définis dans cette couche finale (chargée après styles.css) pour
   l'emporter sur le fond .badge de base (bg-subtle) : sinon un
   `class="badge badge-termine"` s'affichait en gris. Sémantique
   conservée : vert=positif, rouge=négatif, orange=annulé/alerte,
   bleu=info, accent=à venir, neutre=programmé.
   ============================================================ */
.badge-termine, .badge-success, .badge-en-cours { background: var(--green-soft); color: var(--green); }
.badge-absent, .badge-error            { background: var(--red-soft);    color: var(--red); }
.badge-annule, .badge-warning          { background: var(--orange-soft); color: var(--orange); }
.badge-excuse, .badge-info, .badge-type { background: var(--blue-soft);  color: var(--blue); }
.badge-prochain                        { background: var(--accent-soft); color: var(--accent); }
.badge-programme                       { background: var(--bg-subtle);   color: var(--fg-muted); }

/* =====================================================================
   Thème sombre — le doré (--accent) est clair : le texte et les icônes
   posés sur un fond doré plein doivent être FONCÉS pour rester lisibles.
   Les éléments pilotés par tokens (--btn-primary-fg, --check-ink) sont déjà
   couverts ; on corrige ici ceux qui codent le blanc en dur.
   ===================================================================== */
[data-theme="dark"] .snt-btn--accent,
[data-theme="dark"] .snt-checkbox--on,
[data-theme="dark"] .snt-notif-panel__count,
[data-theme="dark"] .snt-modepick__tile.is-active .snt-modepick__disc,
[data-theme="dark"] .snt-presta-custom-ic,
[data-theme="dark"] .method-icon-edit,
[data-theme="dark"] .cal-filter-count,
[data-theme="dark"] .cal-month-cell.today .cal-month-num {
  color: #2A2208;
}