/* ================================================================
   DENTOS — DESIGN SYSTEM UNIFIÉ v7.0 (Mai 2026)
   Charte Graphique UI/UX cohérente sur toute la plateforme
   ----------------------------------------------------------------
   Couvre : Typographie, Titres, Onglets, Boutons, Modales,
            Formulaires, Cartes, Navigation, Responsive
   Surcharge légère et progressive : ne casse pas l'existant,
   il harmonise simplement les composants.
   ================================================================ */

:root {
  /* ───── Couleurs principales DENTOS (héritées de app.css) ───── */
  --ds-primary:        var(--apex-primary, #0D7A6E);
  --ds-primary-dark:   var(--apex-primary-dark, #0A5F56);
  --ds-primary-light:  var(--apex-primary-light, #E6F4F2);
  --ds-secondary:      var(--apex-secondary, #1BAF9E);
  --ds-accent:         var(--apex-accent, #00C2A8);

  /* ───── Couleurs charte UI/UX demandées ───── */
  --ds-text-primary:   #2A2A2A;   /* titres principaux (charte demandée) */
  --ds-text-secondary: #707070;   /* sous-titres (charte demandée) */
  --ds-text-body:      #1F2937;
  --ds-text-muted:     #6B7280;
  --ds-border-soft:    #E5E7EB;
  --ds-border-input:   #D1D5DB;
  --ds-bg-soft:        #F9FAFB;
  --ds-bg-hover:       #F3F4F6;
  --ds-success:        #16A34A;
  --ds-success-light:  #DCFCE7;
  --ds-warning:        #D97706;
  --ds-danger:         #DC2626;

  /* ───── Système typographique unifié ───── */
  --ds-font-family: 'Inter', 'Roboto', 'Open Sans', -apple-system,
                    BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ds-h1-size: 24px;   /* Titre niveau 1 — gras */
  --ds-h2-size: 20px;   /* Titre niveau 2 — semi-gras */
  --ds-h3-size: 17px;   /* Titre niveau 3 */
  --ds-h4-size: 15px;   /* Titre niveau 4 */
  --ds-body-size: 14px;
  --ds-small-size: 12.5px;

  --ds-h1-weight: 700;
  --ds-h2-weight: 600;
  --ds-h3-weight: 600;

  /* ───── Espacements unifiés ───── */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;

  /* ───── Rayons (bordures arrondies) ───── */
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;     /* boutons standards */
  --ds-radius-lg: 12px;    /* modales (charte demandée) */
  --ds-radius-xl: 16px;
  --ds-radius-pill: 999px;

  /* ───── Ombres ───── */
  --ds-shadow-sm:  0 1px 2px rgba(15,23,42,.05);
  --ds-shadow-md:  0 4px 12px rgba(15,23,42,.08);
  --ds-shadow-lg:  0 10px 30px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --ds-shadow-btn: 0 2px 6px rgba(13,122,110,.18);
  --ds-shadow-btn-hover: 0 4px 14px rgba(13,122,110,.30);

  /* ───── Transitions ───── */
  --ds-transition-fast: all .15s cubic-bezier(.4,0,.2,1);
  --ds-transition:      all .22s cubic-bezier(.4,0,.2,1);
}

/* ================================================================
   1.  TYPOGRAPHIE — TITRES UNIFORMES
   Hiérarchie cohérente sur toutes les pages
   ================================================================ */

html, body {
  font-family: var(--ds-font-family);
  color: var(--ds-text-body);
}

/* ── Titres natifs HTML (hors apex-title déjà stylé) ── */
h1, .ds-h1, .page-title {
  font-family: var(--ds-font-family);
  font-size: var(--ds-h1-size);
  font-weight: var(--ds-h1-weight);
  color: var(--ds-text-primary);
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0 0 var(--ds-space-3) 0;
}

h2, .ds-h2, .section-title {
  font-family: var(--ds-font-family);
  font-size: var(--ds-h2-size);
  font-weight: var(--ds-h2-weight);
  color: var(--ds-text-primary);
  letter-spacing: -.015em;
  line-height: 1.35;
  margin: var(--ds-space-6) 0 var(--ds-space-3) 0;
}

h3, .ds-h3, .subsection-title {
  font-family: var(--ds-font-family);
  font-size: var(--ds-h3-size);
  font-weight: var(--ds-h3-weight);
  color: var(--ds-text-primary);
  line-height: 1.4;
  margin: var(--ds-space-4) 0 var(--ds-space-2) 0;
}

h4, .ds-h4 {
  font-family: var(--ds-font-family);
  font-size: var(--ds-h4-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  line-height: 1.4;
  margin: var(--ds-space-3) 0 var(--ds-space-2) 0;
}

/* ── Sous-titres — couleur secondaire charte (#707070) ── */
.ds-subtitle, .page-subtitle, .section-subtitle {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ds-text-secondary);
  line-height: 1.5;
  margin-top: var(--ds-space-1);
}

/* ── Surcharger l'apex-title (titre principal des pages) pour unification ── */
.apex-title {
  font-size: var(--ds-h1-size) !important;
  font-weight: var(--ds-h1-weight) !important;
  color: var(--ds-text-primary) !important;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.apex-title-lg {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--ds-text-primary) !important;
  letter-spacing: -.025em;
}

.apex-subtitle {
  font-size: 13.5px !important;
  color: var(--ds-text-secondary) !important;
  margin-top: var(--ds-space-1);
}

/* ── En-têtes de page — espaces blancs cohérents ── */
.page-header {
  margin-bottom: var(--ds-space-6) !important;
}
.page-heading {
  margin-bottom: var(--ds-space-6) !important;
}
.page-heading + * {
  margin-top: 0;
}

/* ================================================================
   2.  ONGLETS UNIFIÉS (.tabs / .tab-item / .ds-tabs)
   Bordures arrondies, fond blanc, effet hover, sélection
   ================================================================ */

/* Conteneur d'onglets — version "ligne soulignée" (existante, amélioré) */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ds-border-soft);
  margin-bottom: var(--ds-space-5);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tabs::-webkit-scrollbar { height: 4px; }

.tab-item {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ds-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--ds-transition-fast);
  text-decoration: none;
  white-space: nowrap;
  border-top-left-radius: var(--ds-radius-md);
  border-top-right-radius: var(--ds-radius-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-item:hover {
  color: var(--ds-primary);
  background: var(--ds-primary-light);
}
.tab-item.active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 0%, var(--ds-primary-light) 100%);
}

/* ── NOUVEAU : onglets "boutons" (.ds-tabs / .ds-tab) ── */
.ds-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  padding: 4px;
  background: var(--ds-bg-soft);
  border-radius: var(--ds-radius-lg);
  margin-bottom: var(--ds-space-5);
  border: 1px solid var(--ds-border-soft);
}
.ds-tab {
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ds-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: var(--ds-transition-fast);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  min-height: 36px;
}
.ds-tab:hover {
  background: #fff;
  color: var(--ds-primary);
  border-color: var(--ds-border-soft);
}
.ds-tab.active,
.ds-tab[aria-selected="true"] {
  background: #fff;
  color: var(--ds-primary);
  border-color: var(--ds-primary);
  font-weight: 600;
  box-shadow: var(--ds-shadow-sm);
}
.ds-tab i { font-size: 12.5px; }

/* ================================================================
   3.  BOUTONS UNIFIÉS — Design moderne, cohérent
   ================================================================ */

.btn,
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--ds-radius-md) !important;    /* 8px charte */
  font-family: var(--ds-font-family);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--ds-border-input);
  background: #fff;
  color: var(--ds-text-body);
  cursor: pointer;
  text-decoration: none;
  transition: var(--ds-transition-fast);
  white-space: nowrap;
  line-height: 1;
  min-height: 38px;
  user-select: none;
}
.btn:hover, .ds-btn:hover {
  background: var(--ds-bg-soft);
  border-color: var(--ds-border-input);
  box-shadow: var(--ds-shadow-sm);
  transform: translateY(-1px);
}
.btn:active, .ds-btn:active {
  transform: translateY(0);
}

/* ── Bouton primaire : vert DENTOS, texte blanc, bordure 8px, ombre hover ── */
.btn-primary,
.ds-btn-primary {
  background: var(--ds-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--ds-shadow-btn);
}
.btn-primary:hover,
.ds-btn-primary:hover {
  background: var(--ds-primary-dark) !important;
  box-shadow: var(--ds-shadow-btn-hover);
  transform: translateY(-1px);
  opacity: 1;
}

/* ── Bouton secondaire : fond blanc, bordure verte, texte vert, hover fond vert clair ── */
.btn-secondary,
.ds-btn-secondary {
  background: #fff;
  color: var(--ds-primary);
  border: 1.5px solid var(--ds-primary);
}
.btn-secondary:hover,
.ds-btn-secondary:hover {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
  border-color: var(--ds-primary-dark);
  box-shadow: var(--ds-shadow-sm);
}

/* ── Boutons d'état ── */
.btn-success, .ds-btn-success {
  background: var(--ds-success); color: #fff; border-color: transparent;
}
.btn-success:hover, .ds-btn-success:hover { filter: brightness(.95); }

.btn-danger, .ds-btn-danger {
  background: var(--ds-danger); color: #fff; border-color: transparent;
}
.btn-danger:hover, .ds-btn-danger:hover { filter: brightness(.95); }

.btn-warning, .ds-btn-warning {
  background: var(--ds-warning); color: #fff; border-color: transparent;
}

.btn-ghost, .ds-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-text-body);
}
.btn-ghost:hover, .ds-btn-ghost:hover {
  background: var(--ds-bg-soft);
  color: var(--ds-primary);
}

/* ── Tailles ── */
.btn-sm, .ds-btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
  min-height: 32px;
}
.btn-lg, .ds-btn-lg {
  padding: 12px 24px;
  font-size: 14.5px;
  min-height: 44px;
  border-radius: var(--ds-radius-lg) !important;
}
.btn-icon, .ds-btn-icon {
  padding: 8px;
  aspect-ratio: 1;
  min-width: 38px;
}

/* État focus visible (accessibilité) */
.btn:focus-visible,
.ds-btn:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* État disabled */
.btn:disabled, .ds-btn:disabled,
.btn[disabled], .ds-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ================================================================
   4.  MODALES / FENÊTRES UNIFIÉES
   Fond blanc, ombre légère, radius 12px, fade-in, bouton X
   ================================================================ */

.modal-overlay,
.modal-backdrop {
  background: rgba(15,23,42,.55) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  animation: ds-fade-in .22s cubic-bezier(.4,0,.2,1);
}
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal,
.modal-box,
.ds-modal {
  background: #fff !important;
  border-radius: var(--ds-radius-lg) !important;   /* 12px charte */
  box-shadow: var(--ds-shadow-lg) !important;
  border: 1px solid var(--ds-border-soft);
  animation: ds-modal-in .25s cubic-bezier(.4,0,.2,1);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@keyframes ds-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* En-tête modale */
.modal-header,
.ds-modal-header {
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid var(--ds-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.modal-title,
.ds-modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ds-text-primary) !important;
  letter-spacing: -.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-title i,
.ds-modal-title i {
  color: var(--ds-primary);
  font-size: 16px;
}

/* Corps modale — scroll si nécessaire */
.modal-body,
.ds-modal-body {
  padding: 18px 22px !important;
  overflow-y: auto;
  flex: 1;
}

/* Footer modale */
.modal-footer,
.ds-modal-footer {
  padding: 14px 22px !important;
  border-top: 1px solid var(--ds-border-soft);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: var(--ds-bg-soft);
}

/* Bouton fermeture "X" — coin supérieur droit */
.modal-close,
.ds-modal-close {
  background: transparent !important;
  border: 1px solid transparent !important;
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-md);
  font-size: 16px !important;
  color: var(--ds-text-muted) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--ds-transition-fast);
}
.modal-close:hover,
.ds-modal-close:hover {
  background: transparent !important;
  border-color: var(--ds-border-soft) !important;
  color: var(--ds-text-primary) !important;
}

/* Responsive modales */
@media (max-width: 640px) {
  .modal, .modal-box, .ds-modal {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 8px !important;
  }
  .modal-header, .ds-modal-header { padding: 14px 16px 10px !important; }
  .modal-body, .ds-modal-body     { padding: 14px 16px !important; }
  .modal-footer, .ds-modal-footer {
    padding: 12px 16px !important;
    flex-direction: column-reverse;
  }
  .modal-footer .btn, .ds-modal-footer .btn,
  .modal-footer .ds-btn, .ds-modal-footer .ds-btn {
    width: 100%;
  }
}

/* ================================================================
   5.  FORMULAIRES — bordure verte DENTOS au focus
   ================================================================ */

.input, .select, .textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="search"], input[type="url"],
select, textarea {
  font-family: var(--ds-font-family);
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-input);
  font-size: 13.5px;
  color: var(--ds-text-body);
  background: #fff;
  transition: var(--ds-transition-fast);
}

/* Focus charte : bordure verte DENTOS */
.input:focus, .select:focus, .textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--ds-primary) !important;
  box-shadow: 0 0 0 3px rgba(13,122,110,.14) !important;
  outline: none !important;
}

.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-text-primary);
  margin-bottom: 6px;
  display: block;
}
.form-hint  { font-size: 12px; color: var(--ds-text-secondary); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--ds-danger); margin-top: 4px; }
.form-group { margin-bottom: var(--ds-space-4); }

/* ================================================================
   6.  CARTES (.card / .apex-card) — surcharge harmonieuse
   ================================================================ */
.card, .apex-card, .ds-card {
  background: #fff;
  border: 1px solid var(--ds-border-soft);
  border-radius: var(--ds-radius-lg);
  transition: var(--ds-transition-fast);
}
.card:hover, .apex-card:hover, .ds-card:hover {
  box-shadow: var(--ds-shadow-md);
}

/* ================================================================
   7.  PAGES PRINCIPALES — Grille uniforme, espaces blancs cohérents
   ================================================================ */

.apex-main {
  padding: var(--ds-space-6) 28px var(--ds-space-10);
}

/* Grille principale réutilisable */
.ds-page-grid {
  display: grid;
  gap: var(--ds-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .ds-page-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .ds-page-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .ds-page-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ================================================================
   8.  NAVIGATION (menus / sidebar) — transitions et espacements
   ================================================================ */

.nav-item {
  transition: var(--ds-transition-fast) !important;
}
.nav-item:hover {
  background: var(--ds-primary-light) !important;
  color: var(--ds-primary) !important;
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(13,122,110,.10), rgba(27,175,158,.14)) !important;
  color: var(--ds-primary) !important;
}

/* ================================================================
   9.  UPLOAD LOGO — Indicateur de limite 3 Mo (3000 kB)
   ================================================================ */

.ds-upload-hint {
  font-size: 11.5px;
  color: var(--ds-text-secondary);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ds-upload-hint i { color: var(--ds-primary); }

.ds-upload-error {
  font-size: 12px;
  color: var(--ds-danger);
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  padding: 8px 12px;
  border-radius: var(--ds-radius-md);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ================================================================
   10. ICÔNES DANS LES BOUTONS — alignement fin
   ================================================================ */
.btn i, .ds-btn i,
.tab-item i, .ds-tab i,
.modal-title i, .ds-modal-title i {
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}

/* ================================================================
   11. RESPONSIVE GLOBAL
   ================================================================ */
@media (max-width: 768px) {
  :root {
    --ds-h1-size: 21px;
    --ds-h2-size: 18px;
    --ds-h3-size: 16px;
  }
  .apex-main {
    padding: var(--ds-space-4) 14px var(--ds-space-8);
  }
  .btn, .ds-btn {
    min-height: 40px;
    padding: 10px 16px;
  }
  .tabs { padding-bottom: 2px; }
}

/* ================================================================
   12. FOCUS VISIBLE GLOBAL (accessibilité)
   ================================================================ */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.tab-item:focus-visible, .ds-tab:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

/* ================================================================
   13. TOAST — harmonisé
   ================================================================ */
.toast {
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  font-family: var(--ds-font-family);
}