/* =====================================================================
   YalendoLabs - Thème de marque Yalendo (surcouche non-destructive)
   Palette : bleu primaire #307BC4 - navy #133a58 - teal #1b8f8a - or #e8a33d
   Objectif : re-colorer toute l'UI et corriger la lisibilité
   (texte gris clair #828a90 sur fond clair -> encre foncée contrastée).
   Chargée en DERNIER => gagne en priorité sur backend.css/custom.css.
   ===================================================================== */

:root {
  /* Brand */
  --yal-blue: #307BC4;
  --yal-navy: #133a58;
  --yal-teal: #1b8f8a;
  --yal-gold: #e8a33d;
  --yal-blue-dark: #1f5f97;
  --yal-ink: #12283a;

  /* Bootstrap primary -> Yalendo blue */
  --bs-primary: #307BC4;
  --bs-primary-rgb: 48, 123, 196;
  --bs-primary-bg-subtle: #eaf3fb;
  --bs-primary-text-emphasis: #0d3b63;
  --bs-primary-border-subtle: #bcdcf5;

  /* Liens plus foncés et contrastés */
  --bs-link-color: #1f5f97;
  --bs-link-color-rgb: 31, 95, 151;
  --bs-link-hover-color: #14456e;
  --bs-link-hover-color-rgb: 20, 69, 110;

  /* Fonds */
  --bs-body-bg: #f4f8fc;
  --bs-body-bg-rgb: 244, 248, 252;
  --bs-border-color: #d6e4f0;
  --bs-border-color-translucent: rgba(19, 58, 88, 0.14);

  /* Texte : correction de lisibilité (gris clair -> encre foncée) */
  --bs-body-color: #1f2a37;
  --bs-body-color-rgb: 31, 42, 55;
  --bs-emphasis-color: #0d2436;
  --bs-emphasis-color-rgb: 13, 36, 54;
  --bs-secondary-color: #3d4b5c;
  --bs-secondary-color-rgb: 61, 75, 92;
  --bs-secondary-bg: #eef4fa;
  --bs-tertiary-color: #4a5a6d;
  --bs-tertiary-color-rgb: 74, 90, 109;
  --bs-tertiary-bg: #e9f1f8;

  /* Titres bien foncés */
  --bs-heading-color: #133a58;

  /* NOTE IMPORTANT : on ne redéfinit PAS --bs-gray-*. Dans ce template,
     l'échelle de gris est INVERSÉE (gray-900 = #fff sert de SURFACE claire)
     et alimente le fond de .card/.table/.form-control/.sidebar/.dropdown-menu/
     .modal-content/.nav-pills. La passer en navy rendait tous ces fonds sombres
     avec un texte foncé -> illisible (ratio 1.0-1.2). On laisse donc le gris
     d'origine (surfaces claires) et on colore via primary/heading/body ci-dessus. */

  /* Secondary : le template posait un corail #f67e7d (texte blanc -> ratio 2.5).
     On le remplace par une ardoise lisible compatible marque. */
  --bs-secondary: #41546a;
  --bs-secondary-rgb: 65, 84, 106;

  /* Accent sémantique cohérent */
  --bs-info: #1b8f8a;
  --bs-info-rgb: 27, 143, 138;
  --bs-warning: #e8a33d;
  --bs-warning-rgb: 232, 163, 61;

  --bs-font-sans-serif: 'Poppins', 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Typographie de marque sur l'ensemble du produit */
body,
body.font-hueman,
.btn,
.form-control,
.form-select,
.nav-link,
.dropdown-item,
.card,
.table {
  font-family: var(--bs-font-sans-serif);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.card-header,
.modal-title,
.offcanvas-title {
  color: var(--bs-heading-color);
  font-weight: 600;
}

/* Lisibilité : tous les textes secondaires/discrétés assombris */
.text-muted,
.text-secondary,
.text-body-secondary,
.text-body-tertiary,
.form-text,
small,
.small,
.text-faded {
  color: #3d4b5c !important;
}

/* Boutons primaires à la couleur Yalendo */
.btn-primary,
.btn-link {
  --bs-btn-bg: #307BC4;
  --bs-btn-border-color: #307BC4;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #1f5f97;
  --bs-btn-hover-border-color: #1f5f97;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #14456e;
  --bs-btn-active-border-color: #14456e;
  --bs-btn-disabled-bg: #8bb4d8;
  --bs-btn-disabled-border-color: #8bb4d8;
}

.btn-outline-primary {
  --bs-btn-color: #1f5f97;
  --bs-btn-border-color: #307BC4;
  --bs-btn-hover-bg: #307BC4;
  --bs-btn-hover-border-color: #307BC4;
  --bs-btn-hover-color: #fff;
}

/* Badges / pills primaires */
.badge.text-bg-primary,
.bg-primary {
  background-color: #307BC4 !important;
}
.text-primary {
  color: #1f5f97 !important;
}

/* Focus / selection alignés marque */
:focus-visible {
  outline-color: #307BC4;
}
::selection {
  background: rgba(48, 123, 196, 0.22);
}

/* Carte / tableau : on laisse le template gérer les surfaces (gris clair).
   Le texte suit --bs-body-color (foncé) via les variables Bootstrap, donc
   lisible. On évite de forcer la couleur des <th> (en-têtes sur fond primary). */
.card .card-body p,
.list-group-item {
  color: var(--bs-body-color);
}

/* Barre latérale : élément actif / survol en bleu Yalendo */
.sidebar .nav-sublist-dropdown a.active,
.sidebar .menu-item > a.active,
.nav.pill .nav-link.active,
.nav-pills .nav-link.active {
  background-color: #307BC4;
  color: #fff;
}

/* Liens : custom.css impose a{color:var(--bs-primary)}; on force un bleu
   plus foncé pour la lisibilité sur fond clair. Spécificité basse (élément)
   donc les classes (.btn, .nav-link, .page-link...) gardent la main. */
a {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* Bouton secondaire : fond ardoise + texte blanc contrasté */
.btn-secondary {
  --bs-btn-bg: #41546a;
  --bs-btn-border-color: #41546a;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #334354;
  --bs-btn-hover-border-color: #334354;
  --bs-btn-hover-color: #fff;
}

/* Badges pastels (subtle) : texte trop clair -> encre foncée assortie */
.badge.bg-success-subtle { color: #166b1a; }
.badge.bg-danger-subtle  { color: #9b1414; }
.badge.bg-warning-subtle { color: #8a5a00; }
.badge.bg-info-subtle    { color: #0f5f5c; }
.badge.bg-primary-subtle { color: #0d3b63; }
.badge.bg-secondary-subtle { color: #334354; }

/* ---------------------------------------------------------------------
   Bordure luxueuse des champs de saisie.
   Repos : filet acier doux + ombre interne discrète (profondeur).
   Survol : liseré légèrement plus marqué.
   Focus : halo bleu marque + fin liseré or (signature premium)
           + ombre portée douce. On ne touche pas au border-radius
   global pour préserver l'alignement des .input-group Bootstrap.
   --------------------------------------------------------------------- */
.form-control,
.form-select,
textarea.form-control {
  border: 1.5px solid #b7cde4;
  border-radius: 0.7rem;
  box-shadow: 0 1px 2px rgba(19, 58, 88, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-control::placeholder {
  color: #8aa0b5;
  opacity: 1;
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
  border-color: #8fb4dc;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--yal-blue);
  background-color: #ffffff;
  box-shadow:
    0 0 0 4px rgba(48, 123, 196, 0.15),
    inset 0 0 0 1.5px var(--yal-gold),
    0 8px 20px rgba(19, 58, 88, 0.10);
}

/* Invalides : on garde le signal rouge mais on conserve la finition */
.form-control.is-invalid:focus,
.form-control:invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--bs-danger, #b32a2a);
  box-shadow:
    0 0 0 4px rgba(179, 42, 42, 0.15),
    0 8px 20px rgba(19, 58, 88, 0.10);
}

/* ---------------------------------------------------------------------
   Mode sombre : surfaces navy Yalendo, texte clair contrasté
   --------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-primary: #4f97d6;
  --bs-primary-rgb: 79, 151, 214;
  --bs-primary-bg-subtle: #12324d;
  --bs-primary-text-emphasis: #a7cff0;
  --bs-primary-border-subtle: #2b5b86;

  --bs-link-color: #7dc0ee;
  --bs-link-color-rgb: 125, 192, 238;
  --bs-link-hover-color: #a7d6f5;

  --bs-body-bg: #0d2436;
  --bs-body-bg-rgb: 13, 36, 54;
  --bs-body-color: #d6e4f0;
  --bs-body-color-rgb: 214, 228, 240;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #a9c2d6;
  --bs-secondary-color-rgb: 169, 194, 214;
  --bs-tertiary-color: #8fb0c9;
  --bs-secondary-bg: #12324d;
  --bs-tertiary-bg: #0f2a3f;
  --bs-heading-color: #eaf3fb;
  --bs-border-color: #24506f;

  /* Surfaces : le template peint .card / .table / .dropdown-menu /
     .modal-content / .nav-pills avec --bs-gray-900, qui reste GRIS
     (#1e1e24) en sombre alors que tout le reste est navy -> tache sale et
     contrastes dégradés. On ramène ces tokens de SURFACE sur la palette
     navy. (Sans toucher à l'échelle claire : le mode clair garde #fff.) */
  --bs-gray-900: #0f2a3f;
  --bs-gray-800: #12324d;
  --bs-gray-700: #7f9cb3;

  /* Alertes / messages d'erreur : rouge vif #d71c1c (ratio 2.8 sur navy) ->
     rouge saumon lisible sur fond sombre. */
  --bs-danger: #ff8080;
  --bs-danger-rgb: 255, 128, 128;
  --bs-danger-text-emphasis: #ffb0b0;
  --bs-danger-bg-subtle: #3a1620;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .text-faded {
  color: #a9c2d6 !important;
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #307BC4;
  --bs-btn-border-color: #307BC4;
  --bs-btn-hover-bg: #4f97d6;
  --bs-btn-hover-border-color: #4f97d6;
}

/* Champs luxueux en mode sombre : filet acier foncé + focus bleu/or */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  border-color: #24506f;
  background-color: #0f2a3f;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: #7f9cb3;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: #4f97d6;
  background-color: #0f2a3f;
  box-shadow:
    0 0 0 4px rgba(79, 151, 214, 0.20),
    inset 0 0 0 1.5px var(--yal-gold),
    0 8px 20px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------
   Filtres select2 (back-office) + recherche : même finition luxueuse.
   Une fois initialisé, le <select class="form-select select2"> est masqué
   et rendu comme .select2-selection : on re-style ce composant.
   --------------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid #b7cde4;
  border-radius: 0.7rem;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(19, 58, 88, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.select2-container--default .select2-selection--single {
  height: 3.25rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color);
  line-height: 3.25rem;
  /* Le thème select2 ajoute un padding vertical (~0.875rem) qui, cumulé au
     line-height 3.25rem, rend le bloc plus haut que la boîte (70px vs 45.5px)
     et le faire déborder sur le libellé de la ligne suivante. On remet le
     padding vertical à 0 : le texte est centré dans la boîte, plus de
     chevauchement. */
  padding: 0 2.6rem 0 1rem;
  box-sizing: border-box;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 3.25rem;
}
.select2-container--default .select2-selection--multiple {
  min-height: 3.25rem;
  padding: 0.35rem 0.6rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #eaf3fb;
  border: 1px solid #bcdcf5;
  color: #0d3b63;
  border-radius: 0.5rem;
  padding-left: 22px;
  margin-top: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #1f5f97;
  border-right: 1px solid #bcdcf5;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--yal-blue);
  box-shadow:
    0 0 0 4px rgba(48, 123, 196, 0.15),
    inset 0 0 0 1.5px var(--yal-gold);
}
.select2-container--default .select2-results__option--selected {
  background-color: #eaf3fb;
  color: #0d3b63;
}
.select2-dropdown {
  border: 1.5px solid #b7cde4;
  border-radius: 0.7rem;
  box-shadow: 0 12px 28px rgba(19, 58, 88, 0.16);
}

/* Champs de filtre/recherche dans les barres d'outils DataTables */
.dt-search .form-control,
.dataTables_filter input {
  border: 1.5px solid #b7cde4;
  border-radius: 0.7rem;
}

/* =====================================================================
   SIDEBAR : fond teinté premium (pas de blanc pur), adaptable jour/nuit.
   ===================================================================== */
:root {
  --yal-sidebar-bg: #eef4fb;
  --yal-sidebar-bg2: #e4edf6;
  --yal-sidebar-fg: #23384f;
  --yal-sidebar-muted: #5c6f84;
  --yal-sidebar-border: #d6e4f0;
}
[data-bs-theme="dark"] {
  --yal-sidebar-bg: #0f2a3f;
  --yal-sidebar-bg2: #0c2233;
  --yal-sidebar-fg: #dbe8f4;
  --yal-sidebar-muted: #9fb6cb;
  --yal-sidebar-border: #24506f;
}

.sidebar,
.sidebar.sidebar-base,
#sidebar.sidebar {
  background-color: var(--yal-sidebar-bg) !important;
  background-image: linear-gradient(180deg, var(--yal-sidebar-bg), var(--yal-sidebar-bg2)) !important;
  border-right: 1px solid var(--yal-sidebar-border);
}
.sidebar .sidebar-logo,
.sidebar .sidebar-footer,
.sidebar .sidebar-body,
.sidebar .scroll-content,
.sidebar .sidebar-list {
  background-color: transparent !important;
  background-image: none !important;
}
.sidebar .nav-link .item-name,
.sidebar .nav-link .default-icon {
  color: var(--yal-sidebar-fg);
}
.sidebar li.nav-item.static-item > a.nav-link .default-icon {
  color: var(--yal-sidebar-muted);
  font-weight: 600;
  letter-spacing: .04em;
}

/* =====================================================================
   CARTES DE STATISTIQUE (tableau de bord) : une teinte par carte.
   Hook stable = l'icône (.card-icon i.ph-*). Tint au repos, pastille
   d'icône pleine, chiffre teinté, contenu recentré verticalement.
   ===================================================================== */
.card.card-stats:has(.card-icon i) {
  background-color: color-mix(in srgb, var(--stat-hue, #307BC4) 8%, #ffffff);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--stat-hue, #307BC4) 11%, #ffffff),
    color-mix(in srgb, var(--stat-hue, #307BC4) 4%, #ffffff));
  border: 1px solid color-mix(in srgb, var(--stat-hue, #307BC4) 22%, #ffffff);
}
.card.card-stats:has(.card-icon i) .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card.card-stats:has(.card-icon i) .card-body > p {
  color: var(--stat-ink, #1f3247);
  font-weight: 600;
  margin-bottom: 1.1rem !important;
}
.card.card-stats:has(.card-icon i) .card-data h2 {
  color: var(--stat-ink, #133a58);
}
.card.card-stats .card-icon {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--stat-hue, #307BC4);
  color: #fff !important;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--stat-hue, #307BC4) 35%, transparent);
}
.card.card-stats .card-icon i {
  color: #fff !important;
  font-size: 1.6rem;
  line-height: 1;
}

/* Teintes par icône (palette Yalendo + accents harmonieux) */
.card-stats:has(.card-icon i.ph-users-three)   { --stat-hue: #307BC4; --stat-ink: #1f5f97; }
.card-stats:has(.card-icon i.ph-users)         { --stat-hue: #17867f; --stat-ink: #0f6660; }
.card-stats:has(.card-icon i.ph-flask)         { --stat-hue: #d98a1f; --stat-ink: #8f5a10; }
.card-stats:has(.card-icon i.ph-user-circle)   { --stat-hue: #1f4f7a; --stat-ink: #173c5e; }
.card-stats:has(.card-icon i.ph-calendar-check){ --stat-hue: #5b52c0; --stat-ink: #4338a0; }
.card-stats:has(.card-icon i.ph-currency-dollar){ --stat-hue: #2f9e6b; --stat-ink: #1f6f49; }
.card-stats:has(.card-icon i.ph-hand-coins)    { --stat-hue: #c0556f; --stat-ink: #8f3a52; }

/* Grands widgets : teinte propre (proportion donut + revenu mensuel) */
.card-stats:has(#appointments-chart-tests-packages) {
  background-color: color-mix(in srgb, #5b52c0 8%, #ffffff);
  border: 1px solid color-mix(in srgb, #5b52c0 20%, #ffffff);
}
.card-stats:has(#appointments-chart-tests-packages) .card-title {
  color: #4338a0;
}
.card-stats:has(#monthly-revenue-chart) {
  background-color: color-mix(in srgb, #33465c 6%, #ffffff);
  border: 1px solid color-mix(in srgb, #33465c 16%, #ffffff);
}

/* Mode sombre : teintes déclinées sur navy, chiffres clairs */
[data-bs-theme="dark"] .card.card-stats:has(.card-icon i) {
  background-color: color-mix(in srgb, var(--stat-hue, #307BC4) 24%, #0f2a3f);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--stat-hue, #307BC4) 30%, #0f2a3f),
    color-mix(in srgb, var(--stat-hue, #307BC4) 16%, #0f2a3f));
  border-color: color-mix(in srgb, var(--stat-hue, #307BC4) 45%, #0f2a3f);
}
[data-bs-theme="dark"] .card.card-stats:has(.card-icon i) .card-body > p {
  color: color-mix(in srgb, var(--stat-hue, #307BC4) 26%, #dbe8f4);
}
[data-bs-theme="dark"] .card.card-stats:has(.card-icon i) .card-data h2 {
  color: #ffffff;
}
[data-bs-theme="dark"] .card-stats:has(#appointments-chart-tests-packages) {
  background-color: color-mix(in srgb, #5b52c0 26%, #0f2a3f);
  border-color: color-mix(in srgb, #5b52c0 45%, #0f2a3f);
}
[data-bs-theme="dark"] .card-stats:has(#appointments-chart-tests-packages) .card-title {
  color: #c7bdf5;
}
[data-bs-theme="dark"] .card-stats:has(#monthly-revenue-chart) {
  background-color: color-mix(in srgb, #33465c 45%, #0f2a3f);
  border-color: #24506f;
}

/* =====================================================================
   Labels de champs : alignement fiable, jamais de superposition.
   ===================================================================== */
.form-label {
  display: inline-block;
  margin-bottom: 0.4rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--bs-heading-color);
}
/* Options radio/checkbox rendues en boîte (Gender etc.) : texte centré */
label.form-check.form-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}
label.form-check.form-control .form-check-input {
  margin: 0;
  flex: 0 0 auto;
}

/* Logo cachet : taille maîtrisée dans la barre latérale et l'en-tête.
   L'attribut height seul est neutralisé par img-fluid (height auto) et les
   translations prévues pour l'ancien logotype horizontal sont annulées. */
.logo-main .navbar-brand img,
#sidebar .logo-main img {
  height: 32px;
  width: 32px;
  min-height: 0;
  object-fit: contain;
  border-radius: 50%;
  padding-left: 0;
  transform: none !important;
}