/* ============================================================
   TITULATOR — Thème Printemps
   ============================================================ */

:root {
  /* Palette printemps */
  --sp-dark:    #15593a;   /* Vert forêt profond */
  --sp-primary: #1f8a5e;   /* Vert émeraude */
  --sp-medium:  #29b87c;   /* Vert vif */
  --sp-light:   #68d3a0;   /* Vert clair */
  --sp-pale:    #e6f7ef;   /* Fond vert pâle */
  --sp-bg:      #f4fbf7;   /* Fond général */
  --sp-coral:   #e8654a;   /* Accent chaud */
  --sp-amber:   #f5a623;   /* Avertissement */
  --sp-sky:     #4a9cc7;   /* Info */
  --sp-text:    #132d1f;   /* Texte sombre */
  --sp-muted:   #527a60;   /* Texte secondaire */
  --sp-border:  #c3e6d4;   /* Bordures */
  --sp-card:    #ffffff;

  /* Mentions */
  --m-e:   #0a4f2b;
  --m-tbp: #136f3a;
  --m-tb:  #1a9050;
  --m-bp:  #28b068;
  --m-b:   #4cc985;
  --m-ab:  #8dd4aa;
  --m-s:   #e8c30a;
  --m-f:   #e07825;
  --m-fi:  #c9531b;
  --m-i:   #b52b1a;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content { flex: 1 0 auto; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  background: linear-gradient(135deg, var(--sp-dark) 0%, var(--sp-primary) 100%) !important;
  box-shadow: 0 2px 12px rgba(21,89,58,.35);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.navbar-brand {
  font-size: 1.25rem;
  letter-spacing: .02em;
}
.navbar .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  border-radius: 6px;
  padding: .35rem .7rem;
  transition: background .15s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  background: rgba(255,255,255,.15);
  color: #fff !important;
}
.navbar .dropdown-menu {
  border: 1px solid var(--sp-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  border-radius: 10px;
  padding: .4rem;
}
.navbar .dropdown-item {
  border-radius: 6px;
  font-size: .88rem;
  padding: .45rem .9rem;
}
.navbar .dropdown-item:hover {
  background: var(--sp-pale);
  color: var(--sp-primary);
}
.navbar .navbar-text .badge {
  font-size: .7rem;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(21,89,58,.07);
}
.card-header {
  background: var(--sp-pale);
  border-bottom: 1px solid var(--sp-border);
  border-radius: 12px 12px 0 0 !important;
  color: var(--sp-dark);
  font-weight: 600;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn-primary {
  background: var(--sp-primary);
  border-color: var(--sp-primary);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--sp-dark);
  border-color: var(--sp-dark);
}
.btn-success {
  background: #28a846;
  border-color: #28a846;
}
.btn-outline-primary {
  color: var(--sp-primary);
  border-color: var(--sp-primary);
}
.btn-outline-primary:hover {
  background: var(--sp-primary);
  border-color: var(--sp-primary);
}

/* ============================================================
   TABLES
   ============================================================ */
.table thead.table-light th {
  background: var(--sp-pale);
  color: var(--sp-dark);
  border-bottom: 2px solid var(--sp-border);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.table-hover tbody tr:hover {
  background: #f0faf6;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert-success {
  background: var(--sp-pale);
  border-color: var(--sp-light);
  color: var(--sp-dark);
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.form-control:focus, .form-select:focus {
  border-color: var(--sp-medium);
  box-shadow: 0 0 0 .2rem rgba(29,138,94,.2);
}
.form-label { color: var(--sp-text); font-size: .88rem; }

/* ============================================================
   MENTIONS
   ============================================================ */
.mention-badge {
  display: inline-block;
  padding: .2em .55em;
  border-radius: 6px;
  font-weight: 700;
  font-size: .82em;
  color: #fff;
  min-width: 2.6rem;
  text-align: center;
  letter-spacing: .02em;
}
/* Default colors (overridden at runtime by getMentionCssBlock() if admin changes them) */
.mention-e   { background: var(--m-e);   color: #fff; }
.mention-tbp { background: var(--m-tbp); color: #fff; }
.mention-tb  { background: var(--m-tb);  color: #fff; }
.mention-bp  { background: var(--m-bp);  color: #fff; }
.mention-b   { background: var(--m-b);   color: #222; }
.mention-ab  { background: var(--m-ab);  color: #222; }
.mention-s   { background: var(--m-s);   color: #222; }
.mention-f   { background: var(--m-f);   color: #fff; }
.mention-fi  { background: var(--m-fi);  color: #fff; }  /* F/I */
.mention-if  { background: var(--m-fi);  color: #fff; }  /* I/F */
.mention-fr  { background: var(--m-fi);  color: #fff; }  /* F/R */
.mention-i   { background: var(--m-i);   color: #fff; }

/* ============================================================
   RÉSULTATS — colorisation cellules
   ============================================================ */
.pct-fail { background: #fde8e8 !important; color: #b52b1a; font-weight: 600; }
.pct-warn { background: #fef6e0 !important; color: #8a5500; }
.pct-ok   { background: #e8f7ef !important; color: var(--sp-dark); }

/* ============================================================
   PHOTO ÉLÈVE
   ============================================================ */
.student-photo {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sp-border);
}
.student-initials {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-medium));
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   DASHBOARD — Cards classes
   ============================================================ */
.class-card {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border-left: 4px solid transparent;
}
.class-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(21,89,58,.15);
}
.class-card.active-class {
  border-left-color: var(--sp-primary);
  background: var(--sp-pale);
}
.shortcut-card {
  transition: transform .12s, box-shadow .12s;
  border-radius: 12px;
  border: 1px solid var(--sp-border) !important;
}
.shortcut-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(21,89,58,.15);
  border-color: var(--sp-light) !important;
}

/* ============================================================
   SYNTHÈSE TABLEAU DE CLASSE
   ============================================================ */
.synth-table th { font-size: .77rem; white-space: nowrap; }
.synth-table td { font-size: .81rem; }
.synth-table thead tr:first-child th {
  background: var(--sp-dark);
  color: #fff;
  font-weight: 600;
}
.synth-table thead tr:last-child th {
  background: var(--sp-pale);
  color: var(--sp-muted);
  font-weight: 400;
}

/* ============================================================
   AFFECTATIONS — cours cochés en couleur
   ============================================================ */
.course-check-item {
  border: 1.5px solid var(--sp-border);
  border-radius: 8px;
  padding: .5rem .75rem;
  transition: background .12s, border-color .12s;
  cursor: pointer;
}
.course-check-item:has(input[type=checkbox]:checked) {
  background: var(--sp-pale);
  border-color: var(--sp-medium);
}
.course-check-item input[type=checkbox]:checked + label {
  color: var(--sp-dark);
  font-weight: 600;
}
.course-check-item:hover {
  border-color: var(--sp-light);
  background: #f8fdf9;
}

/* Fallback :has() pour anciens navigateurs */
.course-check-item.is-checked {
  background: var(--sp-pale) !important;
  border-color: var(--sp-medium) !important;
}
.course-check-item.is-checked label {
  color: var(--sp-dark) !important;
  font-weight: 600 !important;
}

/* ============================================================
   ENCODAGE
   ============================================================ */
.encoding-grid input[type=number] {
  width: 90px;
  text-align: right;
}
.progress { border-radius: 10px; }

/* ============================================================
   NAV TABS
   ============================================================ */
.nav-tabs .nav-link {
  color: var(--sp-muted);
  border-radius: 8px 8px 0 0;
  font-weight: 500;
}
.nav-tabs .nav-link.active {
  color: var(--sp-primary);
  border-color: var(--sp-border) var(--sp-border) var(--sp-card);
  font-weight: 600;
}
.nav-tabs .nav-link:hover:not(.active) {
  background: var(--sp-pale);
}

/* ============================================================
   LOGIN / REGISTER — page entière
   ============================================================ */
.login-bg {
  background: linear-gradient(160deg, var(--sp-dark) 0%, var(--sp-primary) 55%, var(--sp-medium) 100%);
  min-height: 100vh;
}
.login-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--sp-pale);
  color: var(--sp-muted);
  border-top: 1px solid var(--sp-border) !important;
  font-size: .8rem;
  flex-shrink: 0;
}

/* ============================================================
   BADGES RÔLE / STATUT
   ============================================================ */
.badge-admin  { background: var(--sp-dark);   color: #fff; }
.badge-active { background: var(--sp-medium); color: #fff; }
.badge-pending{ background: #e8c30a;          color: #333; }

/* ============================================================
   ENCODAGE — élève complet
   ============================================================ */
.student-complete:not(.active) {
  background: #f0fdf4 !important;
}

/* ============================================================
   SYNTHÈSE CLASSE — colonnes ok masquées en mode échecs
   ============================================================ */
body.print-echec-only .col-ok-course { display: none !important; }

/* ============================================================
   IMPRESSION / PDF
   ============================================================ */
@media print {
  /* Paysage A4 pour la synthèse de classe */
  @page { size: A4 landscape; margin: 8mm 10mm; }

  .no-print { display: none !important; }
  .navbar, .footer { display: none !important; }
  body { background: #fff; font-size: 10pt; color: #000; }
  .container-fluid { padding: 0 !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }

  /* Répétition de l'en-tête de tableau sur chaque page */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* Synthèse classe — tableau */
  .synth-table { width: 100% !important; table-layout: auto; border-collapse: collapse; }
  .synth-table th, .synth-table td {
    font-size: 12pt !important;
    padding: 3px 4px !important;
  }
  /* Colonne élève : s'adapte au plus long des noms */
  .synth-table th:first-child,
  .synth-table td:first-child { white-space: nowrap; }
  /* Empêcher les lignes de se couper entre deux pages */
  .synth-table tbody tr { break-inside: avoid; page-break-inside: avoid; }
  /* En-tête : fond noir, texte blanc */
  .synth-table thead tr:first-child th {
    background: #000 !important;
    color: #fff !important;
    font-weight: 600 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* 2e ligne d'en-tête (ancien mode double) */
  .synth-table thead tr:not(:only-child):last-child th { background: #f2f2f2 !important; color: #333 !important; }

  /* Mentions et couleurs — forcer impression couleur */
  .mention-badge, .pct-fail, .pct-warn, .pct-ok {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a { text-decoration: none; color: inherit; }
  .print-header { display: block !important; }
  .page-break { page-break-after: always; }

  /* Mode échecs seulement */
  body.print-echec-only .col-ok-course { display: none !important; }
}
.print-header { display: none; }