:root {
  --brand: #2f5d9f;
  --brand-dark: #1e3f70;
  --brand-light: #eaf1fb;
  --present: #1e9e5a;
  --absent: #d9453d;
  --retard: #e0a326;
  --excuse: #6f7cd6;
}

body {
  background-color: #f4f6fb;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.app-navbar {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.app-navbar .nav-link.active {
  font-weight: 600;
  color: #fff !important;
  border-bottom: 2px solid #fff;
}

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.login-card {
  width: 100%;
  max-width: 400px;
  border: none;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.stat-card {
  border: none;
  border-radius: 14px;
  color: #fff;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.stat-card .stat-value { font-size: 2rem; font-weight: 700; }
.stat-card.bg-a { background: linear-gradient(135deg,#2f5d9f,#4c7ecb); }
.stat-card.bg-b { background: linear-gradient(135deg,#1e9e5a,#39c179); }
.stat-card.bg-c { background: linear-gradient(135deg,#d9453d,#e8746d); }
.stat-card.bg-d { background: linear-gradient(135deg,#e0a326,#f0c15a); }

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.card-header {
  background-color: #fff;
  border-bottom: 1px solid #eef0f5;
  font-weight: 600;
  border-radius: 12px 12px 0 0 !important;
}

.badge-present { background-color: var(--present); }
.badge-absent { background-color: var(--absent); }
.badge-retard { background-color: var(--retard); color:#3a2c00; }
.badge-excuse { background-color: var(--excuse); }

.attendance-row.status-present { background-color: rgba(30,158,90,.08); }
.attendance-row.status-absent { background-color: rgba(217,69,61,.08); }
.attendance-row.status-retard { background-color: rgba(224,163,38,.10); }
.attendance-row.status-excuse { background-color: rgba(111,124,214,.10); }

.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.table thead th {
  background-color: var(--brand-light);
  white-space: nowrap;
}

.level-pill {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 600;
  font-size: .85rem;
}

.progress { height: 10px; border-radius: 6px; }

/* Barre de sauvegarde collante (page de pointage) */
.attendance-savebar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e2e5ee;
  border-radius: 0 0 12px 12px;
  padding: .85rem 1.25rem;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  margin-top: -1rem;
  z-index: 15;
}

/* Sélecteur d'année dans la barre de navigation */
.year-switcher {
  min-width: 150px;
  background-color: rgba(255,255,255,.15);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.year-switcher option { color: #1e293b; }

/* Auto-disparition des messages flash */
.flash-toast { transition: opacity .5s ease; }

/* En-têtes de tableau collants pour les longues listes */
.table-responsive.sticky-thead thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Impression / export PDF de la feuille de présence : n'affiche que la
   feuille elle-même, sans navigation, boutons ni barre de sauvegarde. */
.print-sheet-header { display: none; }
@media print {
  nav, .attendance-savebar, .btn, .alert, form .card-header .btn-group,
  #summaryCards, .no-print { display: none !important; }
  body { background: #fff !important; }
  main { padding: 0 !important; max-width: 100% !important; }
  .card { border: none !important; box-shadow: none !important; }
  .table-responsive { max-height: none !important; overflow: visible !important; }
  .print-sheet-header { display: block !important; margin-bottom: 16px; }
  select.status-select {
    appearance: none; -webkit-appearance: none; border: none; background: none;
    font-weight: 600; padding-left: 0;
  }
  table { font-size: 12px; }
}