/* ==========================================================================
   Mahrasoft Academia — Design System (Phase 2)
   --------------------------------------------------------------------------
   Couche de design chargée APRÈS main.css. Elle :
     1) définit une palette + une typographie premium (tokens) ;
     2) redéfinit les variables déjà utilisées partout par main.css
        (--accent-color, --heading-color, --default-font, …) → tout le site
        se re-skinne d'un coup, sans toucher aux 107 templates ;
     3) ajoute un vernis global (typo, focus, transitions) non destructif.

   Objectif : rendu moderne, élégant, mobile-first, accessible (WCAG).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Marque — bleu confiant (éducation / tech) */
  --ds-brand-50:  #eff6ff;
  --ds-brand-100: #dbeafe;
  --ds-brand-200: #bfdbfe;
  --ds-brand-300: #93c5fd;
  --ds-brand-400: #60a5fa;
  --ds-brand-500: #3b82f6;
  --ds-brand-600: #2563eb;  /* principal */
  --ds-brand-700: #1d4ed8;
  --ds-brand-800: #1e40af;
  --ds-brand-900: #1e3a8a;

  /* Accent secondaire — ambre (badges, mises en avant, "premium") */
  --ds-accent-400: #fbbf24;
  --ds-accent-500: #f59e0b;
  --ds-accent-600: #d97706;

  /* Neutres (slate) */
  --ds-neutral-50:  #f8fafc;
  --ds-neutral-100: #f1f5f9;
  --ds-neutral-200: #e2e8f0;
  --ds-neutral-300: #cbd5e1;
  --ds-neutral-400: #94a3b8;
  --ds-neutral-500: #64748b;
  --ds-neutral-600: #475569;
  --ds-neutral-700: #334155;
  --ds-neutral-800: #1e293b;
  --ds-neutral-900: #0f172a;

  /* Sémantique */
  --ds-success: #16a34a;
  --ds-warning: #f59e0b;
  --ds-danger:  #dc2626;
  --ds-info:    #0ea5e9;

  /* Rayons */
  --ds-radius-sm: 8px;
  --ds-radius:    12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 24px;
  --ds-radius-pill: 9999px;

  /* Ombres douces, teintées bleu (premium) */
  --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ds-shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
  --ds-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.10);
  --ds-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
  --ds-shadow-brand: 0 10px 24px rgba(37, 99, 235, 0.25);

  /* Transitions */
  --ds-transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition:      240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Typographie */
  --ds-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-display: "Poppins", var(--ds-font-sans);

  /* ----------------------------------------------------------------------
     2. Remappage des variables de main.css (BootstrapMade)
     ---------------------------------------------------------------------- */
  --background-color: #ffffff;
  --default-color: var(--ds-neutral-600);
  --heading-color: var(--ds-neutral-900);
  --accent-color: var(--ds-brand-600);
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  --default-font: var(--ds-font-sans);
  --heading-font: var(--ds-font-display);
  --nav-font: var(--ds-font-display);

  --nav-color: var(--ds-neutral-700);
  --nav-hover-color: var(--ds-brand-600);
  --nav-dropdown-color: var(--ds-neutral-700);
  --nav-dropdown-hover-color: var(--ds-brand-600);

  /* Alignement des tokens Bootstrap (si Bootstrap 5) */
  --bs-primary: var(--ds-brand-600);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--ds-brand-600);
  --bs-link-hover-color: var(--ds-brand-700);
  --bs-body-font-family: var(--ds-font-sans);
  --bs-border-radius: var(--ds-radius-sm);
  --bs-border-color: var(--ds-neutral-200);
}

/* --------------------------------------------------------------------------
   3. VERNIS GLOBAL (non destructif)
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  color: var(--default-color);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--heading-font);
  color: var(--heading-color);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Liens cohérents avec la marque */
a {
  color: var(--ds-brand-600);
  transition: color var(--ds-transition-fast);
}
a:hover {
  color: var(--ds-brand-700);
}

/* Focus visible accessible (WCAG) — anneau de marque, clavier uniquement */
:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sélection de texte teintée marque */
::selection {
  background: rgba(37, 99, 235, 0.16);
  color: var(--ds-neutral-900);
}

/* Barre de défilement discrète (navigateurs compatibles) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-neutral-300) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--ds-neutral-300);
  border-radius: var(--ds-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ds-neutral-400); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   4. RAFFINEMENTS DE COMPOSANTS (gentils, non structurels)
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--ds-radius-sm);
  font-weight: 600;
  transition: transform var(--ds-transition-fast),
              box-shadow var(--ds-transition-fast),
              background-color var(--ds-transition-fast),
              color var(--ds-transition-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background-color: var(--ds-brand-600);
  border-color: var(--ds-brand-600);
  box-shadow: var(--ds-shadow-brand);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ds-brand-700);
  border-color: var(--ds-brand-700);
}

.card {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-neutral-200);
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-transition),
              box-shadow var(--ds-transition);
}

/* Badges plus doux */
.badge { border-radius: var(--ds-radius-sm); font-weight: 600; letter-spacing: 0.01em; }

/* Champs de formulaire : focus de marque */
.form-control:focus,
.form-select:focus {
  border-color: var(--ds-brand-400);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

/* --------------------------------------------------------------------------
   5. UTILITAIRES premium (opt-in, pour la refonte progressive des templates)
   -------------------------------------------------------------------------- */
.ds-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-md);
}
.ds-surface { background: var(--surface-color); border: 1px solid var(--ds-neutral-200); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); }
.ds-gradient-text {
  background: linear-gradient(90deg, var(--ds-brand-600), var(--ds-brand-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ds-container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* --------------------------------------------------------------------------
   6. ACCESSIBILITÉ (WCAG 2.1 AA)
   -------------------------------------------------------------------------- */

/* 6.1 Lien d'évitement — caché jusqu'au focus clavier, puis visible en haut.
   Permet aux utilisateurs clavier/lecteur d'écran de sauter la navigation. */
.skip-link {
  position: fixed;
  top: -80px;                 /* masqué au-dessus du viewport */
  left: 1rem;
  z-index: 3000;
  padding: 0.65rem 1.25rem;
  background: var(--ds-brand-600);
  color: #fff !important;
  font-family: var(--ds-font-display);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-md);
  transition: top var(--ds-transition-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;                     /* glisse en vue au focus clavier */
  color: #fff !important;
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* La cible du skip-link est rendue focusable via tabindex="-1" : pas d'anneau
   permanent, on ne veut le focus que le temps du saut. */
[tabindex="-1"]:focus { outline: none; }

/* 6.2 Utilitaire lecteur d'écran — aligné sur Bootstrap `.visually-hidden`,
   fourni ici pour les rares pages qui ne chargent pas tout Bootstrap. */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 6.3 Focus visible renforcé sur TOUS les contrôles interactifs (clavier).
   Complète le `:focus-visible` global pour les éléments faisant office de
   bouton (div/span avec role="button"). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

/* 6.4 Respect de prefers-reduced-motion — neutralise animations/transitions
   (y compris celles ajoutées par ce design-system) pour éviter le mal des
   transports et alléger les appareils bas de gamme. Valeur ~0 plutôt que 0
   pour laisser les évènements `transitionend`/`animationend` se déclencher. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .btn:hover,
  .btn:active,
  .card:hover,
  .ds-card-hover:hover { transform: none !important; }
}

/* 6.5 Contraste renforcé à la demande (Windows High Contrast, réglage OS). */
@media (prefers-contrast: more) {
  :root {
    --default-color: var(--ds-neutral-800);
    --nav-color: var(--ds-neutral-900);
    --bs-border-color: var(--ds-neutral-400);
  }
  .btn,
  .card,
  .form-control,
  .form-select { border-width: 2px; }
  a:not(.btn) { text-decoration: underline; }
}

/* 6.6 Cibles tactiles ≥ 40px pour les boutons d'icône (WCAG 2.5.5). */
.nav-icon-btn,
.quick-actions-btn,
.btn-icon {
  min-width: 40px;
  min-height: 40px;
}

/* --------------------------------------------------------------------------
   7. COUCHE COMPOSANTS (accessible par défaut, additive)
   -------------------------------------------------------------------------- */

/* 7.1 Boutons — variantes cohérentes marque + état désactivé lisible */
.btn-outline-primary {
  color: var(--ds-brand-600);
  border-color: var(--ds-brand-600);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--ds-brand-600);
  border-color: var(--ds-brand-600);
  color: #fff;
}
.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  box-shadow: none;
  transform: none !important;
  cursor: not-allowed;
}

/* 7.2 Formulaires — libellés, champ requis, états de validation */
.form-label { font-weight: 600; color: var(--ds-neutral-700); }
.form-label .required,
.required-mark { color: var(--ds-danger); margin-inline-start: 0.15rem; }
.form-control:disabled,
.form-select:disabled { background-color: var(--ds-neutral-100); opacity: 1; }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--ds-danger); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15);
}
.form-control.is-valid,
.form-select.is-valid { border-color: var(--ds-success); }
.invalid-feedback { color: var(--ds-danger); }
.form-check-input:focus { border-color: var(--ds-brand-400); box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15); }
.form-check-input:checked { background-color: var(--ds-brand-600); border-color: var(--ds-brand-600); }

/* 7.3 Alertes — accents sémantiques doux (Bootstrap gère le reste) */
.alert { border-radius: var(--ds-radius); border: 1px solid transparent; }
.alert-success { border-color: rgba(22, 163, 74, 0.25); }
.alert-warning { border-color: rgba(245, 158, 11, 0.3); }
.alert-danger  { border-color: rgba(220, 38, 38, 0.25); }
.alert-info    { border-color: rgba(14, 165, 233, 0.25); }

/* 7.4 Badge d'icône générique (bouton ne contenant qu'une icône) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ds-neutral-600);
  transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast);
}
.btn-icon:hover { background: var(--ds-neutral-100); color: var(--ds-brand-600); }

/* --------------------------------------------------------------------------
   8. THÈME SOMBRE (dark mode)
   Le script no-flash (base.html) résout le thème en un attribut EXPLICITE
   `data-theme="dark|light"` sur <html> (choix stocké, sinon préférence système)
   et pose `data-bs-theme` pour que les composants Bootstrap basculent nativement.
   On style donc principalement via [data-theme="dark"]. Le @media plus bas n'est
   qu'un filet pour les visiteurs sans JS.
   -------------------------------------------------------------------------- */
:root {
  --ds-dark-bg:        #0b1220;
  --ds-dark-surface:   #131c2e;
  --ds-dark-surface-2: #1c2942;
  --ds-dark-border:    #273449;
  --ds-dark-text:      #cbd5e1;
  --ds-dark-heading:   #f1f5f9;
  --ds-dark-muted:     #93a3b8;

  /* Tokens de CONTENU (dashboards). Valeurs CLAIRES calées sur les couleurs en
     dur les plus fréquentes → le clair reste quasi identique une fois tokenisé. */
  --ds-content-heading: #1f2937;   /* titres/valeurs sombres */
  --ds-content-text:    #374151;   /* texte courant */
  --ds-content-muted:   #6b7280;   /* texte secondaire */
  --ds-content-bg:      #f8fafc;   /* fond de section clair */
}

[data-theme="dark"] {
  color-scheme: dark;
  --background-color: var(--ds-dark-bg);
  --surface-color:    var(--ds-dark-surface);
  --default-color:    var(--ds-dark-text);
  --heading-color:    var(--ds-dark-heading);
  --nav-color:        var(--ds-dark-text);
  --nav-hover-color:  var(--ds-brand-300);
  --nav-dropdown-color: var(--ds-dark-text);
  --nav-dropdown-hover-color: var(--ds-brand-300);
  --bs-border-color:  var(--ds-dark-border);

  /* Bascule des tokens de contenu */
  --ds-content-heading: var(--ds-dark-heading);
  --ds-content-text:    var(--ds-dark-text);
  --ds-content-muted:   var(--ds-dark-muted);
  --ds-content-bg:      #0f1728;
}

/* NB : pas de bascule via @media (prefers-color-scheme) ici. La préférence
   système est prise en compte par le script no-flash (base.html) qui pose un
   data-theme EXPLICITE. Ainsi les pages sans ce script (dashboards, à traiter
   dans un prochain incrément) restent en clair et ne se retrouvent pas en
   « demi-sombre » cassé pour les utilisateurs dont l'OS est en sombre. */

/* Composants design-system en sombre */
[data-theme="dark"] .card { background-color: var(--surface-color); border-color: var(--ds-dark-border); }
[data-theme="dark"] .btn-icon { color: var(--ds-dark-muted); }
[data-theme="dark"] .btn-icon:hover { background: rgba(148, 163, 184, 0.14); color: var(--ds-brand-300); }
[data-theme="dark"] .btn-outline-primary { color: var(--ds-brand-300); border-color: var(--ds-brand-400); }
[data-theme="dark"] ::selection { background: rgba(96, 165, 250, 0.30); color: #fff; }
[data-theme="dark"] * { scrollbar-color: var(--ds-dark-border) transparent; }

/* Utilitaires Bootstrap à fond FIXE : .bg-light / .bg-white ne s'adaptent PAS au
   thème sombre (contrairement à .bg-body*). On les rend theme-aware d'un coup
   pour tout le site (bandeaux, sections « bg-light », cartes « bg-white »). */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
  background-color: var(--surface-color) !important;
  color: var(--default-color);
}
[data-theme="dark"] .text-dark { color: var(--heading-color) !important; }
[data-theme="dark"] .text-muted { color: var(--ds-dark-muted) !important; }
[data-theme="dark"] .border { border-color: var(--ds-dark-border) !important; }

/* 8.1 DASHBOARDS — surfaces/textes custom des templates dashboard (student/
   instructor/admin) hardcodés en clair dans leurs <style> enfants. On les bat
   en SOMBRE via !important (chargé dans le <head>, bat les <style> enfants
   normaux quel que soit l'ordre). Le clair reste 100% intact. */
[data-theme="dark"] .top-navbar,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .activity-stat-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .data-card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .dashboard-panel,
[data-theme="dark"] .quick-action-btn,
[data-theme="dark"] .action-card,
[data-theme="dark"] .stats-card-content,
[data-theme="dark"] .card-header-custom,
[data-theme="dark"] .list-card,
[data-theme="dark"] .review-card {
  background: var(--ds-dark-surface) !important;
  border-color: var(--ds-dark-border) !important;
}
[data-theme="dark"] .stat-value,
[data-theme="dark"] .activity-value,
[data-theme="dark"] .metric-value,
[data-theme="dark"] .card-value,
[data-theme="dark"] .page-title,
[data-theme="dark"] .top-navbar h1,
[data-theme="dark"] .top-navbar h2,
[data-theme="dark"] .top-navbar h3 {
  color: var(--ds-dark-heading) !important;
}
[data-theme="dark"] .stat-label,
[data-theme="dark"] .activity-label,
[data-theme="dark"] .metric-label,
[data-theme="dark"] .card-subtitle { color: var(--ds-dark-muted) !important; }

/* Bouton bascule de thème (soleil ⇄ lune) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--bs-border-color, var(--ds-neutral-200));
  background: transparent;
  color: var(--nav-color, var(--ds-neutral-700));
  cursor: pointer;
  transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast), border-color var(--ds-transition-fast);
}
.theme-toggle:hover { color: var(--ds-brand-500); border-color: var(--ds-brand-400); }
/* Swap soleil/lune global (marche pour le bouton pilule ET les toggles en nav) */
.ds-icon-sun { display: none; }
.ds-icon-moon { display: inline-flex; }
[data-theme="dark"] .ds-icon-sun { display: inline-flex; }
[data-theme="dark"] .ds-icon-moon { display: none; }