/* Surcharges Metronic — ne pas modifier les fichiers CSS du template directement */

/* ================================================================
   Logo sizing
   ================================================================ */
.kt-sidebar-logo .default-logo { height: 40px; width: auto; }
.kt-sidebar-logo .small-logo   { height: 40px; width: auto; }

/* ================================================================
   Card body — padding interne garanti (Metronic n'inclut pas de
   padding par défaut sur kt-card, on évite les classes Tailwind
   qui peuvent être absentes du CSS compilé)
   ================================================================ */
.kt-card-body {
  padding: 1.25rem;
}

/* ================================================================
   Floating Labels (.kt-float)
   Usage: <div class="kt-float"><input placeholder=" "><label>Label</label></div>
   ================================================================ */
.kt-float {
  position: relative;
}

/* Hauteur auto + paddings pour éviter que le texte touche la bordure */
.kt-float .kt-input,
.kt-float textarea.kt-input {
  height: auto !important;
  padding-top: 1.5rem !important;
  padding-bottom: 0.625rem !important;
  line-height: 1.5;
}

.kt-float label {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  font-size: 0.875rem;
  line-height: 1.25;
  color: #6b7280;
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

/* Textarea label démarre en haut */
.kt-float textarea.kt-input ~ label {
  top: 1.125rem;
  transform: none;
}

/* Float up : input focus ou contenu présent */
.kt-float .kt-input:focus ~ label,
.kt-float .kt-input:not(:placeholder-shown) ~ label,
.kt-float select.kt-input:focus ~ label,
.kt-float select.kt-input.float-active ~ label {
  top: 0.45rem;
  transform: translateY(0);
  font-size: 0.7rem;
  color: #6366f1;
}

.kt-float textarea.kt-input:focus ~ label,
.kt-float textarea.kt-input:not(:placeholder-shown) ~ label {
  top: 0.375rem;
  font-size: 0.7rem;
  color: #6366f1;
}

/* Dark mode */
.dark .kt-float label { color: #9ca3af; }
.dark .kt-float .kt-input:focus ~ label,
.dark .kt-float .kt-input:not(:placeholder-shown) ~ label,
.dark .kt-float select.kt-input:focus ~ label,
.dark .kt-float select.kt-input.float-active ~ label,
.dark .kt-float textarea.kt-input:focus ~ label,
.dark .kt-float textarea.kt-input:not(:placeholder-shown) ~ label {
  color: #818cf8;
}

/* ================================================================
   Gestionnaire BDD — layout deux colonnes sticky
   ================================================================ */
:root { --db-header-h: 65px; } /* mis à jour par JS avec la hauteur réelle */

.db-left-panel {
  position: sticky;
  top: var(--db-header-h);
  height: calc(100vh - var(--db-header-h));
  overflow-y: auto;
  width: 240px;
}

/* Table active dans le panneau gauche */
.db-table-link.db-table-active {
  background-color: rgba(99, 102, 241, 0.10);
  color: #6366f1;
  font-weight: 600;
  border-radius: 0;
}
.db-table-link.db-table-active i { color: #6366f1 !important; }
.dark .db-table-link.db-table-active {
  background-color: rgba(129, 140, 248, 0.12);
  color: #818cf8;
}
.dark .db-table-link.db-table-active i { color: #818cf8 !important; }

/* Transition opacity du panneau droit pendant le chargement */
#dbRightPanel { transition: opacity 0.12s ease; }

/* ================================================================
   Sidebar — item actif couleur KORTEX (indigo #6366f1)
   Remplace le bg-accent/60 gris du thème par la couleur primaire.
   Le `.active` est posé par PHP sur le div.kt-menu-item correspondant.
   ================================================================ */
#sidebar .kt-menu-item.active > .kt-menu-link {
  background-color: rgba(99, 102, 241, 0.12) !important;
  border-color:     rgba(99, 102, 241, 0.20) !important;
  border-radius:    0.5rem;
}
#sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-icon i {
  color: #6366f1 !important;
}
#sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-title {
  color: #6366f1 !important;
  font-weight: 600;
}

/* Dark mode — légèrement plus lumineux */
.dark #sidebar .kt-menu-item.active > .kt-menu-link {
  background-color: rgba(129, 140, 248, 0.15) !important;
  border-color:     rgba(129, 140, 248, 0.25) !important;
}
.dark #sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-icon i,
.dark #sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-title {
  color: #818cf8 !important;
}

/* ================================================================
   Utilitaires Tailwind absents du CSS compilé (build Metronic purgé)
   Le styles.css livré n'inclut que les classes scannées dans les
   templates de la démo : nos pages custom (/abonnement, /profil…)
   utilisent des classes tree-shakées. On les rétablit ici.
   Réf : tâche #15 — tableau « Formule » sans espacement (gap manquant).
   ================================================================ */
.font-bold   { font-weight: 700; }
.gap-x-8     { column-gap: 2rem; }   /* var(--spacing) * 8 */
.gap-y-4     { row-gap: 1rem; }      /* var(--spacing) * 4 */
.max-w-md    { max-width: 28rem; }
.py-12       { padding-top: 3rem; padding-bottom: 3rem; }
.text-success { color: var(--color-green-600, #16a34a); }

/* Alerte « danger » (échec paiement) — calquée sur .kt-alert-success */
.kt-alert-danger {
  background-color: var(--color-red-500, #ef4444);
  color: var(--color-white, #fff);
}
.kt-alert-danger a { color: var(--color-white, #fff); }

/* ================================================================
   Largeur du conteneur principal — légèrement élargi (1280 → 1440px)
   pour donner de l'air aux tableaux larges (réservations, calendrier…).
   La règle de styles.css est dans @layer components (priorité basse) ;
   cette surcharge non-layered la remplace proprement.
   ================================================================ */
@media (min-width: 80rem) {
  .kt-container-fixed { max-width: 1440px; }
}

/* ================================================================
   Tableau réservations — bordure unique.
   La carte (kt-card) ET le tableau (kt-table-border) traçaient chacun
   leur bordure → effet « double bordure » dans les coins. On retire la
   bordure + l'ombre de la carte ; la bordure du tableau suffit.
   overflow:hidden pour que les coins du tableau épousent l'arrondi.
   ================================================================ */
.kt-card.resa-flush {
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

/* ================================================================
   Avatar upload preview
   ================================================================ */
#cropContainer {
  max-width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #f1f5f9;
}
#cropContainer img {
  display: block;
  max-width: 100%;
}
.dark #cropContainer { background: #1e293b; }