/* =========================================================================
   WM-SCHOOL — Cockpit de pilotage Fondation / Direction
   Surcouche visuelle au-dessus de bootstrap.min.css + style.css (thème CRMS)
   -------------------------------------------------------------------------
   On NE touche PAS aux tokens --primary / --secondary du thème (choix produit :
   rester proche de l'identité visuelle d'origine). Ce fichier ajoute uniquement
   les composants propres à WM-SCHOOL qui n'existent pas dans le thème source :
   bandeau démo, badges de risque, jauge de recouvrement, score de santé
   financière, centre des risques, tableau comparatif écoles.
   ========================================================================= */

/* ---------- Démo data ribbon ---------- */
.wm-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--warning);
  background: var(--warning-transparent);
  border: 1px solid var(--warning);
  border-radius: 20px;
  padding: 3px 10px;
}

/* ---------- Cockpit summary banner ---------- */
.wm-cockpit-banner {
  background: linear-gradient(135deg, #1F2020 0%, #3a3b3b 100%);
  border-radius: 12px;
  color: #fff;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.wm-cockpit-banner .wm-cockpit-stat {
  border-left: 1px solid rgba(255,255,255,.15);
  padding-left: 16px;
}
.wm-cockpit-banner .wm-cockpit-stat:first-child { border-left: none; padding-left: 0; }
.wm-cockpit-banner .wm-cockpit-stat h3 { font-size: 22px; margin-bottom: 2px; color: #fff; }
.wm-cockpit-banner .wm-cockpit-stat span { font-size: 12px; color: #B5B5B5; }

/* ---------- KPI tiles ---------- */
.wm-kpi-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.wm-kpi-value { font-size: 20px; font-weight: 700; margin-bottom: 2px; line-height: 1.2; }
.wm-kpi-label { font-size: 12.5px; color: var(--gray-500); margin-bottom: 6px; }
.wm-trend-up { color: var(--success); }
.wm-trend-down { color: var(--danger); }
.wm-trend-flat { color: var(--gray-500); }

/* ---------- Risk dots / badges ---------- */
.wm-risk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.wm-risk-dot.wm-risk-normal { background: var(--success); box-shadow: 0 0 0 3px var(--success-transparent); }
.wm-risk-dot.wm-risk-watch { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-transparent); }
.wm-risk-dot.wm-risk-critical { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-transparent); }

.wm-badge-risk { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.wm-badge-risk.wm-risk-normal { color: var(--success); background: var(--success-transparent); }
.wm-badge-risk.wm-risk-watch { color: #b5790a; background: var(--warning-transparent); }
.wm-badge-risk.wm-risk-critical { color: var(--danger); background: var(--danger-transparent); }

/* ---------- Recouvrement gauge card ---------- */
.wm-gauge-wrap { position: relative; }
.wm-gauge-center { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.wm-gauge-center .wm-gauge-value { font-size: 30px; font-weight: 800; line-height: 1; color: var(--gray-900); }
.wm-gauge-center .wm-gauge-caption { font-size: 11.5px; color: var(--gray-500); }

/* ---------- Santé financière score ring (CSS-only, pas de lib supplémentaire) ---------- */
.wm-score-ring {
  --score: 78;
  width: 128px; height: 128px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--success) calc(var(--score) * 1%), var(--light-400) 0);
  position: relative;
}
.wm-score-ring::before {
  content: "";
  position: absolute; inset: 10px;
  border-radius: 50%;
  background: var(--white);
}
.wm-score-ring .wm-score-inner { position: relative; text-align: center; }
.wm-score-ring .wm-score-inner strong { font-size: 26px; display: block; line-height: 1; color: var(--gray-900); }
.wm-score-ring .wm-score-inner span { font-size: 11px; color: var(--gray-500); }

.wm-score-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wm-score-bar-row:last-child { margin-bottom: 0; }
.wm-score-bar-row .wm-score-bar-label { width: 92px; font-size: 12.5px; color: var(--gray-600); flex-shrink: 0; }
.wm-score-bar-row .progress { flex: 1; height: 6px; }
.wm-score-bar-row .wm-score-bar-value { width: 34px; text-align: right; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ---------- Centre des risques ---------- */
.wm-risk-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--menu-item-border); }
.wm-risk-item:last-child { border-bottom: none; padding-bottom: 0; }
.wm-risk-item:first-child { padding-top: 0; }
.wm-risk-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.wm-risk-icon.wm-risk-critical { background: var(--danger-transparent); color: var(--danger); }
.wm-risk-icon.wm-risk-watch { background: var(--warning-transparent); color: #b5790a; }
.wm-risk-item .wm-risk-meta { font-size: 12px; color: var(--gray-500); }
.wm-risk-item .wm-risk-title { font-size: 13.5px; font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }

/* ---------- Effectifs / Personnel mini stat list ---------- */
.wm-stat-list-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--menu-item-border); }
.wm-stat-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.wm-stat-list-item:first-child { padding-top: 0; }
.wm-stat-list-item .wm-stat-list-label { font-size: 13px; color: var(--gray-600); display: flex; align-items: center; gap: 8px; }
.wm-stat-list-item .wm-stat-list-value { font-size: 15px; font-weight: 700; color: var(--gray-900); }

/* ---------- Comparaison écoles table ---------- */
.wm-table-schools th { white-space: nowrap; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--gray-500); }
.wm-table-schools td { vertical-align: middle; }
.wm-school-name { font-weight: 600; color: var(--gray-900); }

/* ---------- Actualités / demo empty & loading states (reused site-wide later) ---------- */
.wm-empty-state { text-align: center; padding: 40px 16px; color: var(--gray-500); }
.wm-empty-state i { font-size: 34px; opacity: .35; margin-bottom: 10px; display: block; }

/* ---------- Compléments au système de couleurs du thème
   (le thème définit --purple-transparent / --teal-transparent / etc. en
   variables mais n'expose pas toutes les classes utilitaires bg-soft-*
   correspondantes : on les ajoute ici plutôt que de dupliquer les tokens) ---------- */
.bg-soft-purple { background-color: var(--purple-transparent) !important; }
.bg-soft-teal { background-color: var(--teal-transparent) !important; }
.bg-danger-transparent { background-color: var(--danger-transparent) !important; }
.bg-warning-transparent { background-color: var(--warning-transparent) !important; }
.bg-success-transparent { background-color: var(--success-transparent) !important; }
.bg-secondary-transparent { background-color: var(--secondary-transparent) !important; }
.bg-info-transparent { background-color: var(--info-transparent) !important; }
.bg-primary-transparent { background-color: var(--primary-transparent) !important; }
.dropdown-toggle-nocaret::after { display: none !important; }

/* ---------- Filtres cockpit (année / école / période), dans le dropdown profil ---------- */
.wm-profile-filters .form-select {
  font-size: 12.5px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 8px;
}

/* ---------- Topbar layout hardening ----------
   Attention : ne jamais mettre overflow-x (seul) sur .navbar-header — cela
   force overflow-y à "auto" (règle CSS overflow-x/y couplés) et coupe les
   dropdowns (profil, notifications) qui débordent volontairement en hauteur
   sous la topbar. */
.navbar-header .topbar-menu { flex-wrap: wrap; row-gap: 6px; padding-block: 6px; }

/* Les icônes du groupe de droite (actualités / thème / notifications / profil)
   étaient collées les unes aux autres — on ajoute un espacement régulier. */
.wm-topbar-actions { flex-shrink: 0; gap: 6px; }
@media (max-width: 420px) {
  .wm-topbar-actions { gap: 3px; }
}

/* ---------- Period pill buttons (Finance card) ---------- */
.wm-period-pills .btn { font-size: 12px; padding: 4px 12px; }

/* ---------- Responsive polish ---------- */
@media (max-width: 991.98px) {
  .wm-cockpit-banner .wm-cockpit-stat { border-left: none; padding-left: 0; margin-bottom: 10px; }
}
@media (max-width: 575.98px) {
  .wm-kpi-value { font-size: 17px; }
  .wm-score-ring { width: 108px; height: 108px; }
  .wm-score-ring .wm-score-inner strong { font-size: 22px; }
}

[data-bs-theme="dark"] .wm-cockpit-banner { background: linear-gradient(135deg, #0c0c1a 0%, #1a1d20 100%); }
[data-bs-theme="dark"] .wm-score-ring::before { background: var(--dark); }

/* ---------- Onboarding / première connexion (page autonome, sans topbar/sidebar) ---------- */
.wm-onboarding-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, #1F2020 0%, #3a3b3b 100%);
}
.wm-onboarding-card {
  width: 100%;
  max-width: 460px;
  background: var(--white, #fff);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.wm-onboarding-steps { gap: 10px; }
.wm-onboarding-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-500);
}
.wm-onboarding-step.active { color: var(--primary); }
.wm-onboarding-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--light-400, #f1f1f1);
  color: var(--gray-600);
  flex-shrink: 0;
}
.wm-onboarding-step.active .wm-onboarding-step-num { background: var(--primary); color: #fff; }
.wm-onboarding-step-sep { width: 28px; height: 1px; background: var(--menu-item-border); flex-shrink: 0; }
@media (max-width: 420px) {
  .wm-onboarding-card { padding: 24px 18px; }
  .wm-onboarding-step span:not(.wm-onboarding-step-num) { display: none; }
}
[data-bs-theme="dark"] .wm-onboarding-card { background: var(--dark, #1a1a1a); }