/* =========================================================================
   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; }

/* ---------- Sidebar : bouton "réduire le menu" en double -----------
   Le thème d'origine affiche deux boutons faisant strictement la même
   action (réduire/étendre la sidebar) : un dans le logo de la sidebar
   (#toggle_btn) et un autre dans le header (#toggle_btn2, retiré du HTML).
   On garde uniquement celui de la sidebar. */

/* ---------- Sidebar : sous-menus trop serrés -----------
   Le thème d'origine met les liens d'un sous-menu bord à bord (margin: 0),
   ce qui donne un bloc trop compact. On ajoute un léger espacement vertical
   entre chaque lien du sous-menu. */
.sidebar .sidebar-menu > ul > li .submenu ul li {
  margin-bottom: 4px;
}
.sidebar .sidebar-menu > ul > li .submenu ul li:last-child {
  margin-bottom: 0;
}

/* ---------- Sidebar : flèche des sous-menus (.menu-arrow) invisible -----------
   Le thème d'origine dessine cette flèche avec une police d'icônes
   "tabler-icons" qui n'est pas livrée avec le projet (seul Font Awesome est
   chargé ici) : le caractère ne s'affichait donc pas. On la fait pointer
   vers Font Awesome (déjà chargé) et on ajoute une rotation au survol/à
   l'ouverture du sous-menu pour indiquer l'état ouvert/fermé. */
.sidebar .sidebar-menu .menu-arrow::before {
  font-family: "Font Awesome 7 Free" !important;
  font-weight: 900 !important;
  content: "\f054" !important; /* fa-chevron-right */
  /* Le thème dessinait aussi une flèche avec des bordures CSS (border-right/
     border-bottom) sur ce même pseudo-élément pour l'état actif : combinée à
     l'icône, cela donnait une forme illisible. On neutralise ces bordures,
     l'icône Font Awesome suffit. */
  border: 0 !important;
}
.sidebar li a.subdrop .menu-arrow::before {
  content: "\f054" !important;
}
.sidebar .sidebar-menu > ul li .submenu > a.subdrop .menu-arrow {
  transform: translateY(-50%) rotate(90deg);
}

/* ---------- 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(--surface); }

/* ---------- 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(--surface); }

/* ---------- Correctifs mobile (retour utilisateur) ----------------------
   1) Tableaux (Comparaison des écoles, historiques...) : les cellules
      (montants "41 000 000 GNF", dates, badges) ne doivent JAMAIS passer à
      la ligne, sinon .table-responsive n'a plus de raison de défiler
      horizontalement et le texte se compresse caractère par caractère sur
      mobile. On force le "nowrap" et on laisse le scroll horizontal faire
      le travail (comportement standard d'un tableau de données sur mobile). */
.custom-table .table td,
.custom-table .table th {
  white-space: nowrap;
}

/* 2) Grilles de cartes KPI (row-cols-2 / row-cols-3...) : quand le nombre
   de cartes est impair, la dernière carte se retrouve seule sur sa ligne
   et n'occupe que la moitié de la largeur → on l'étire en pleine largeur
   (col-12) pour éviter la case "orpheline" à moitié vide. */
@media (max-width: 575.98px) {
  .row-cols-2 > .col:last-child:nth-child(odd) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .row-cols-sm-2 > .col:last-child:nth-child(odd) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-sm-3 > .col:last-child:nth-child(3n+1) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Tables « mémoire » (DataTables) — voir globale/tableaux.js. Habillage léger,
   cohérent avec le style existant du cockpit (cartes/boutons Bootstrap 5) ;
   les classes .dataTables_wrapper/.dt-* générées par le plugin restent sinon
   telles quelles.

   Structure générée par le "dom" de globale/tableaux.js, dans l'ordre :
     .wm-dt-toolbar  (recherche + boutons d'export)
     .wm-dt-stats    (bilan chiffré : lignes trouvées, montant total, Validé/
                      Non validé — UNIQUEMENT si la table déclare
                      data-wm-col-montant, voir globale/tableaux.js)
     .wm-dt-scroll   (le <table> lui-même, DANS une zone à hauteur FIXE —
                      voir scrollY/scrollCollapse:false — seul CE bloc défile)
     .wm-dt-footer   (info "X à Y sur Z lignes" + pagination — jamais bouger,
                      puisque .wm-dt-scroll a toujours la même hauteur) */
.wm-dt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.wm-dt-toolbar .dt-search input,
.wm-dt-toolbar input[type="search"] {
  font-size: 13px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 5px 10px;
  min-width: 220px;
}
.wm-dt-toolbar .dt-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wm-dt-toolbar .dt-buttons .btn {
  font-size: 12px;
}
.wm-dt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  font-size: 12.5px;
  color: #495057;
  background: #f8f9fb;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.wm-dt-stats .wm-dt-stats-item b { font-weight: 700; color: #222; }
.wm-dt-stats .wm-dt-stats-ok b { color: #2e7d32; }
.wm-dt-stats .wm-dt-stats-ko b { color: #b26a00; }
.wm-dt-scroll {
  border-bottom: 1px solid #f1f5f9;
}
.wm-dt-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #6c757d;
  padding-top: 8px;
}
.wm-dt-wrapper table.dataTable {
  width: 100% !important;
}
table.dataTable thead th {
  position: relative;
}
@media (max-width: 575.98px) {
  .wm-dt-toolbar { justify-content: flex-start; }
  .wm-dt-toolbar .dt-search input { min-width: 0; width: 100%; }
  .wm-dt-stats { font-size: 11.5px; gap: 4px 12px; }
  .wm-dt-footer { justify-content: flex-start; }
  .wm-dt-footer .wm-dt-pagination { width: 100%; }
}

/* Barre de filtres par colonne (Section/Classe/Statut/Comptable/Catégorie/
   Mode de paiement/Période…) au-dessus d'un tableau mémoire — voir le
   contrat HTML détaillé en tête de globale/tableaux.js. Grille souple :
   les champs se mettent côte à côte sur grand écran, en pile sur petit
   écran (media query), sans jamais dépasser la largeur de l'écran. */
.wm-dt-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.wm-dt-filtre {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 240px;
}
.wm-dt-filtre label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}
.wm-dt-filtres-reset {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .wm-dt-filtre { flex: 1 1 100%; max-width: none; }
  .wm-dt-filtres-reset { width: 100%; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .wm-dt-filtre { flex: 1 1 45%; max-width: none; }
}

/* Bandeau d'activation des notifications push — voir globale/footer.php +
   globale/push_abonnement.js. Position fixe en bas d'écran (au-dessus de la
   barre de navigation mobile), au-dessus du contenu, jamais bloquant. */
.wm-push-bandeau {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 12px 14px;
  max-width: 520px;
  margin: 0 auto;
}
.wm-push-bandeau-icone {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-transparent, rgba(177,51,41,.1));
  color: var(--primary, #B13329);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.wm-push-bandeau-texte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wm-push-bandeau-texte b {
  font-size: 13px;
}
.wm-push-bandeau-texte span {
  font-size: 11.5px;
  color: #6c757d;
  line-height: 1.35;
}
.wm-push-bandeau-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}
@media (max-width: 575.98px) {
  .wm-push-bandeau {
    flex-wrap: wrap;
    bottom: 72px;   /* au-dessus de .sv-bottom-nav sur mobile */
  }
  .wm-push-bandeau-texte { flex: 1 1 100%; order: 1; }
  .wm-push-bandeau-actions { flex: 1 1 100%; order: 2; justify-content: flex-end; }
}