.card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }
  /* Général */
body {

    background-image: url("/gestion_ecole_app/assets/img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
  
}

/* Amélioration des cartes dans le dashboard */
.card {
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* En-tête principale */


header h1 {
  font-size: 2.5rem;
}

/* Titres de section */
h5 .badge {
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
}

/* Tableau Bootstrap */
table th {
  background-color: #343a40;
  color: white;
  text-align: center;
}
table td {
  text-align: center;
  vertical-align: middle;
}

/* Boutons personnalisés */
.btn-custom {
  border-radius: 0.6rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
}

/* Lien sans soulignement */
a.text-decoration-none:hover {
  text-decoration: none;
  opacity: 0.9;
}

/* Footer si tu veux en ajouter un */
footer {
  background-color: #343a40;
  color: white;
  text-align: center;
  padding: 1rem 0;
  margin-top: 3rem;
}

/* Utilitaires personnalisés */
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075) !important;
}
body.dark-mode {
  background-color: #121212 !important;
  color: #f1f1f1 !important;
}

body.dark-mode header {
  background-color: #1f1f1f !important;
  color: #f1f1f1 !important;
}

/* Cartes Bootstrap génériques en thème sombre — pour les pages qui n'ont
   pas leur propre override .card (celles qui en ont, ex. dashboard.php,
   restent prioritaires car plus spécifiques). Utilise les tokens définis
   dans includes/header.php plutôt que des gris codés en dur. */
body.dark-mode .card {
  background-color: var(--surface, #1e1e1e) !important;
  color: var(--text, #f1f1f1) !important;
  border: 1px solid var(--border, #444);
}

body.dark-mode .badge.bg-dark,
body.dark-mode .badge.bg-primary,
body.dark-mode .badge.bg-success {
  background-color: #333 !important;
  color: #fff !important;
}

body.dark-mode .text-dark {
  color: #f1f1f1 !important;
}

body.dark-mode .bg-light {
  background-color: #1f1f1f !important;
  color: #f1f1f1 !important;
}
body.dark-mode .custom-header {
  background-color: #1f1f1f !important;
  color: #f1f1f1 !important;
}
body.dark-mode footer {
  background-color: #1f1f1f !important;
  color: #f1f1f1 !important;
  border-top: 1px solid #333;
}
#theme-toggle {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 5px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

body.dark-mode {
  background-image: url("/gestion_ecole_app/assets/img/background-dark.jpg"); /* optionnel */
  background-color: #121212; /* au cas où l’image ne charge pas */
}

/* .navbar-espoir / .nav-link / .navbar-brand : retirés d'ici — depuis la
   refonte, includes/header.php gère lui-même leur thème sombre via ses
   propres variables (--ink-*, --brand-light...) ; ces overrides figés en
   gris/blanc entraient en conflit avec cette palette et gagnaient à cause
   du !important. Ne pas les réintroduire ici. */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

#preloader img {
  width: 120px;
  height: auto;
}

body.dark-mode #preloader {
  background-color: #121212;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.6); /* ou rgba(0,0,0,0.4) en dark mode */
  z-index: -1;
}

body.dark-mode::before {
  background-color: rgba(0, 0, 0, 0.6);
}
#theme-toggle svg {
  fill: white !important;
}

html, body {
  height: 100%;
  margin: 0;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Force la page à occuper toute la hauteur */
}

main {
  flex: 1; /* Pousse le footer vers le bas */
}

.container {
  padding-bottom: 80px; /* Pour que le tableau ne colle pas au footer */
}

/* ══════════════════════════════════════════════════════════════════
   SYSTÈME DE BOUTONS CRUD — centralisé, s'applique à toute page qui
   charge ce fichier (donc quasi toute l'app) sans rien changer au HTML
   existant : recolore les classes Bootstrap déjà en place (.btn-primary,
   .btn-danger...) avec la palette de marque définie dans includes/header.php
   (--brand, --gold, --accent-*), au lieu des couleurs Bootstrap par défaut.
   ══════════════════════════════════════════════════════════════════ */

.btn {
  border-radius: var(--r-pill, 999px);
  font-weight: 600;
  transition: transform .18s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-blue, #3b82f6), #1d4ed8);
  border-color: transparent; color: #fff;
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(59,130,246,.4); border-color: transparent; }

.btn-success {
  background: linear-gradient(135deg, var(--brand, #118302), var(--brand-dark, #0b5c02));
  border-color: transparent; color: #fff;
}
.btn-success:hover { box-shadow: 0 10px 24px var(--brand-glow, rgba(17,131,2,.4)); border-color: transparent; }

.btn-danger {
  background: linear-gradient(135deg, var(--accent-rose, #f43f5e), #be123c);
  border-color: transparent; color: #fff;
}
.btn-danger:hover { box-shadow: 0 10px 24px rgba(244,63,94,.4); border-color: transparent; }

.btn-warning {
  background: var(--accent-amber, #f59e0b);
  border-color: transparent; color: #2b1c00;
}
.btn-warning:hover { box-shadow: 0 10px 24px rgba(245,158,11,.35); border-color: transparent; }

.btn-info {
  background: linear-gradient(135deg, var(--accent-teal, #14b8a6), #0f766e);
  border-color: transparent; color: #fff;
}
.btn-info:hover { box-shadow: 0 10px 24px rgba(20,184,166,.35); border-color: transparent; }

.btn-dark {
  background: linear-gradient(135deg, var(--ink-2, #14293a), var(--ink-1, #0c1a24));
  border-color: transparent; color: #fff;
}

.btn-secondary,
.btn-light {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #dee2e6);
  color: var(--text, #212529);
}
.btn-secondary:hover, .btn-light:hover {
  border-color: var(--brand, #118302); color: var(--brand, #118302);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08));
}

.btn-outline-primary { color: var(--accent-blue,#3b82f6); border-color: var(--accent-blue,#3b82f6); }
.btn-outline-primary:hover { background: var(--accent-blue,#3b82f6); border-color: var(--accent-blue,#3b82f6); }
.btn-outline-success { color: var(--brand,#118302); border-color: var(--brand,#118302); }
.btn-outline-success:hover { background: var(--brand,#118302); border-color: var(--brand,#118302); }
.btn-outline-danger { color: var(--accent-rose,#f43f5e); border-color: var(--accent-rose,#f43f5e); }
.btn-outline-danger:hover { background: var(--accent-rose,#f43f5e); border-color: var(--accent-rose,#f43f5e); }
.btn-outline-warning { color: #b45309; border-color: var(--accent-amber,#f59e0b); }
.btn-outline-warning:hover { background: var(--accent-amber,#f59e0b); border-color: var(--accent-amber,#f59e0b); color:#2b1c00; }
.btn-outline-info { color: var(--accent-teal,#14b8a6); border-color: var(--accent-teal,#14b8a6); }
.btn-outline-info:hover { background: var(--accent-teal,#14b8a6); border-color: var(--accent-teal,#14b8a6); }
.btn-outline-secondary, .btn-outline-dark { color: var(--text-soft,#5c6577); border-color: var(--border,#ced4da); }
.btn-outline-secondary:hover, .btn-outline-dark:hover { background: var(--surface-2,#eef1f6); color: var(--text,#212529); border-color: var(--border,#ced4da); }

body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-dark { color: var(--text-soft,#9aa7ba); }

/* Boutons ronds d'action (voir/modifier/document/supprimer) pour les
   tableaux de listes — même look que pages/professeurs.php, promu ici en
   composant global pour que toute page liste puisse s'en servir sans
   redéfinir ses propres classes. */
.acts { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.act {
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s, box-shadow .18s;
}
.act:hover { transform: scale(1.14); box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,.08)); }
.act-view { background: var(--tint-blue,rgba(59,130,246,.1));  color: var(--accent-blue,#3b82f6);  border-color: rgba(59,130,246,.18); }
.act-edit { background: var(--tint-amber,rgba(245,158,11,.1)); color: var(--accent-amber,#f59e0b); border-color: rgba(245,158,11,.2); }
.act-doc  { background: var(--tint-teal,rgba(20,184,166,.1));  color: var(--accent-teal,#14b8a6);  border-color: rgba(20,184,166,.18); }
.act-del  { background: var(--tint-rose,rgba(244,63,94,.1));   color: var(--accent-rose,#f43f5e);  border-color: rgba(244,63,94,.16); }

/* Bouton pilule "Ajouter" (action principale d'une page liste) — vert de
   marque par défaut, variantes de couleur disponibles au besoin. */
.btn-add {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .52rem 1.3rem; border: none; border-radius: var(--r-pill, 999px);
  font-weight: 600; font-size: .85rem; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--brand,#118302), var(--brand-dark,#0b5c02));
  box-shadow: 0 4px 16px var(--brand-glow, rgba(17,131,2,.3));
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.btn-add:hover { opacity: .92; transform: translateY(-2px); color: #fff; }