@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Poppins:wght@400;600&display=swap");

/* === Style global existant === */
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Masquer visuellement les barres de défilement du viewport (site entier). */
html,
body {
  -ms-overflow-style: none; /* IE/Edge legacy */
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}
body.light {
  font-family: "Poppins", sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

body.dark {
  font-family: "Poppins", sans-serif;
  background-color: #1f2937;
  color: #f9fafb;
}

/* === Conteneurs === */
body.light .container-main {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.dark .container-main {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* === Titres === */
.title-main,
.title-sub {
  margin-bottom: 1rem;
  text-align: center;
}

body.light .title-main,
body.light .title-sub {
  color: #1e40af;
}

body.dark .title-main,
body.dark .title-sub {
  color: #f9fafb;
}

/* === Boutons principaux === */
body.light .btn-primary {
  background: linear-gradient(to right, #3b82f6, #2563eb);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

body.dark .btn-primary {
  background: linear-gradient(to right, #7c3aed, #4c1d95);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* Transparence des boutons sur le dashboard */
body.light.dashboard-page .btn-primary {
  background: linear-gradient(
    to right,
    rgba(59, 130, 246, 0.8),
    rgba(37, 99, 235, 0.8)
  );
}
body.dark.dashboard-page .btn-primary {
  background: linear-gradient(
    to right,
    rgba(124, 58, 237, 0.8),
    rgba(76, 29, 149, 0.8)
  );
}

/* === Boutons secondaires === */
body.light .btn-secondary {
  background-color: #e5e7eb;
  color: #111827;
}

body.dark .btn-secondary {
  background-color: #4b5563;
  color: white;
}

body.light .btn-secondary {
  background-color: #e5e7eb;
  color: #111827;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background-color 0.2s, transform 0.15s ease;
}
body.light .btn-secondary:hover {
  background-color: #d1d5db;
  transform: translateY(-1px);
}

body.dark .btn-secondary {
  background-color: #4b5563;
  color: white;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background-color 0.2s, transform 0.15s ease;
}
body.dark .btn-secondary:hover {
  background-color: #6b7280;
  transform: translateY(-1px);
}

.chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 9999px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}

.chevron-btn-week {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.2rem;
}

/* === Boutons succès === */
body.light .btn-success {
  background-color: #10b981;
  color: white;
}

body.dark .btn-success {
  background-color: #15803d;
  color: white;
}

/* === Boutons attention (warning) === */
body.light .btn-warning {
  background-color: #f59e0b;
  color: white;
}

body.dark .btn-warning {
  background-color: #d97706;
  color: white;
}

/* === Boutons danger === */
body.light .btn-danger {
  background-color: #ef4444;
  color: white;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 0.2s, transform 0.15s ease;
}
body.light .btn-danger:hover {
  background-color: #dc2626;
  transform: translateY(-1px);
}

body.dark .btn-danger {
  background-color: #b91c1c;
  color: white;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 0.2s, transform 0.15s ease;
}
body.dark .btn-danger:hover {
  background-color: #991b1b;
  transform: translateY(-1px);
}

body.light .btn-danger-i {
  background-color: #ef4444;
  color: white;
}

body.dark .btn-danger-i {
  background-color: #b91c1c;
  color: white;
}

/* Modal Demandes: fond et bordure en dark comme Formation */
body.dark #modal .popup-surface {
  background-color: #1f2937 !important; /* gray-800 */
  border-color: #374151 !important; /* gray-700 */
  color: #f3f4f6 !important; /* gray-100 */
}

/* Modal Demandes: forcer le rendu light (fond clair + textes lisibles) */
body.light #modal {
  background-color: rgba(15, 23, 42, 0.18) !important;
}
body.light #modal .popup-surface {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important; /* gray-200 */
  color: #111827 !important; /* gray-900 */
}
body.light #modal .dropdown .dropdown-toggle,
body.light #modal .dropdown .dropdown-item {
  color: #111827;
}
body.light #modal .dropdown .dropdown-panel {
  background-color: #ffffff;
  border-color: #d1d5db;
}
body.light #modal .dropdown .dropdown-item:hover {
  background-color: #f3f4f6;
}

/* Modal Demandes: sur "Echange MO", autoriser le défilement vertical sans agrandir la modale */
#modal.modal-cycle-swap {
  align-items: flex-start;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#modal.modal-cycle-swap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Bouton du modal en dark: indigo (comme le CTA) */
body.dark .popup-btn-blue {
  background-color: #4f46e5 !important; /* indigo-600 */
  color: #fff !important;
}
body.dark .popup-btn-blue:hover {
  background-color: #4338ca !important; /* indigo-700 */
}

/* === Boutons pop-up génériques === */
.popup-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 1rem; /* même taille que le bouton Importer */
  font-family: inherit; /* reprend la police définie sur le <body> */
}
.popup-btn svg {
  width: 1em;
  height: 1em;
  margin-right: 0.25rem;
  vertical-align: middle;
  display: inline-block;
}

.icon-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35rem;
  vertical-align: -0.125em;
}

body.light .popup-btn-gray {
  background-color: #e5e7eb;
  color: #1f2937;
}

body.dark .popup-btn-gray {
  background-color: #4b5563;
  color: #f9fafb;
}

body.light .popup-btn-gray:hover {
  background-color: #d1d5db;
}

body.dark .popup-btn-gray:hover {
  background-color: #6b7280;
}

body.light .popup-btn-blue,
body.dark .popup-btn-blue {
  background-color: #60a5fa; /* blue-400 */
  color: #fff;
}

body.light .popup-btn-blue:hover,
body.dark .popup-btn-blue:hover {
  background-color: #2563eb; /* blue-600 */
}

body.light .popup-btn-red {
  background-color: #ef4444;
  color: #fff;
}

body.light .popup-btn-red:hover {
  background-color: #dc2626;
}

body.dark .popup-btn-red {
  background-color: #b91c1c;
  color: #fff;
}

body.dark .popup-btn-red:hover {
  background-color: #991b1b;
}

/* === Tableaux === */
body.light .table-main {
  background-color: #ffffff;
}

body.dark .table-main {
  background-color: #1f2937;
}

/* Encadrement complet du tableau semestriel */
.table-shell {
  width: max-content;
  margin: 0 auto;
  max-width: 100%;
}

#btn-auto-fill.btn-auto-fill-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#btn-auto-fill.btn-auto-fill-primary.hidden {
  display: none;
}

#btn-auto-fill.btn-auto-fill-primary svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

body.light #btn-auto-fill.btn-auto-fill-primary {
  background-color: #3b82f6;
  color: #ffffff;
}

body.dark #btn-auto-fill.btn-auto-fill-primary {
  background-color: #60a5fa;
  color: #ffffff;
}

body.light #btn-auto-fill.btn-auto-fill-primary:hover:not(:disabled) {
  background-color: #1d4ed8;
  transform: scale(1.02);
}

body.dark #btn-auto-fill.btn-auto-fill-primary:hover:not(:disabled) {
  background-color: #60a5fa;
  transform: scale(1.02);
}

#btn-auto-fill.btn-auto-fill-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#weeks-nav-controls {
  position: relative;
}

#weeks-nav-controls #btn-auto-fill.btn-auto-fill-primary {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#weeks-nav-controls #btn-auto-fill.btn-auto-fill-primary:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.02);
}

@media (max-width: 820px) {
  #weeks-nav-controls {
    min-height: 0;
  }
  #weeks-nav-controls #btn-auto-fill.btn-auto-fill-primary {
    position: static;
    transform: none;
    margin-left: 0.5rem;
  }
  #weeks-nav-controls #btn-auto-fill.btn-auto-fill-primary:hover:not(:disabled) {
    transform: scale(1.02);
  }
}

.table-frame {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto;
  border: 1px solid var(--table-grid-color, #d1d5db);
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: transparent;
}

/* Vue semestrielle: garder les coins arrondis du cadre */
body.semestrielle-page .table-frame {
  overflow: hidden;
}
body.light .table-frame {
  --table-grid-color: #d1d5db;
}
body.dark .table-frame {
  --table-grid-color: #4b5563;
}
.table-frame .table-main {
  box-shadow: none;
  width: auto;
  max-width: 100%;
}
.table-main {
  box-shadow: none;
  border-collapse: collapse;
}
body.light .table-header:not(#admin-users-table .table-header) {
  background-color: #e5e7eb;
}

body.dark .table-header:not(#admin-users-table .table-header) {
  background-color: #374151;
}

/* Bandeau des mois – harmonisé avec la rangée des semaines */
.months-header th {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border: none;
  /* Même gradient et style que #weeks-header th */
}
/* Supprimer les bordures latérales/haut, laisser la séparation basse gérée plus bas */
.months-header th,
.months-header td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
body.light .months-header th {
  background: linear-gradient(to right, #e0f2fe, #bae6fd 50%, #e0f2fe);
  color: #1e3a8a;
  font-weight: 700;
}
body.dark .months-header th {
  background: linear-gradient(to right, #334155, #3b4e64 50%, #334155);
  color: #f3f4f6;
  font-weight: 700;
}
/* Force le fond de la rangée des mois à suivre le fond global, pas celui du thead */
/* Laisse la rangée suivre le même fond que le thead (pas de surcharge) */

/* Trait fin de séparation entre Mois (au-dessus) et Semaines (en dessous) */
body.light .months-header th {
  border-bottom: 1px solid rgba(17, 24, 39, 0.2) !important;
}
body.dark .months-header th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Eviter double trait: supprimer la bordure haute des semaines */
#weeks-header th {
  border-top: none !important;
}
#admin-users-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

#admin-users-table th,
#admin-users-table td {
  padding: 0.75rem 1rem;
  text-align: center;
}

#admin-users-table th {
  background-color: #dbeafe; /* bleu très pâle */
  color: #1e3a8a; /* bleu profond */
}

body.dark #admin-users-table th {
  background-color: #312e81; /* indigo foncé */
  color: #f9fafb; /* texte clair */
}

#admin-users-table td {
  background-color: #ffffff;
}

body.dark #admin-users-table td {
  background-color: #1f2937;
}

#admin-users-table tr:hover td {
  background-color: #eff6ff; /* bleu pâle au survol */
}

body.dark #admin-users-table tr:hover td {
  background-color: #374151; /* gris sombre au survol */
}

body.light .table-row {
  background-color: #f9fafb;
}

body.dark .table-row {
  background-color: #1f2937;
}

body.light .table-row-hover:hover {
  background-color: #f3f4f6;
}

body.dark .table-row-hover:hover {
  background-color: #374151;
}

/* === Badge agent (s'affiche dans le tableau hebdomadaire) === */
.badge-agent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;

  position: relative;
  width: 70px;
  height: 30px;

  padding: 0 10px;
  font-size: 0.8125rem;
  font-family: "Inter", "Roboto", "Segoe UI", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;

  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  user-select: none;
  cursor: grab;
}

.hebdo-agent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  width: max-content;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.hebdo-agent-grid > .badge-agent:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
}

.hebdo-agent-grid > .badge-agent {
  z-index: 1;
}

.hebdo-agent-grid > .badge-agent:hover,
.hebdo-agent-grid > .badge-agent[data-tooltip]:hover {
  z-index: 80;
}

.badge-agent:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.badge-agent-hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.85),
    0 0 18px rgba(59, 130, 246, 0.55) !important;
}

html.dark .badge-agent-hover {
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.92),
    0 0 20px rgba(34, 211, 238, 0.72) !important;
}
body.light .badge-agent {
  background-color: #e5e7eb; /* gray-200 */
  color: #111827; /* gray-900 */
}

body.dark .badge-agent {
  background-color: #374151; /* gray-700 */
  color: #f9fafb; /* gray-100 */
}

/* MO → rouge */
body.light .ligne-mo .badge-agent {
  background-color: #ef4444; /* rouge - red-500 */
  color: #fff;
}
body.dark .ligne-mo .badge-agent {
  background-color: #ef4444; /* rouge - red-500 */
  color: #fff;
}

/* Programmé → cyan */
body.light .ligne-programme .badge-agent {
  background-color: #14b8a6; /* sarcelle - teal-600 */
  color: #fff;
}
body.dark .ligne-programme .badge-agent {
  background-color: #14b8a6; /* sarcelle - teal-600 */
  color: #fff;
}

/* MS → orange */
body.light .ligne-ms .badge-agent {
  background-color: #f97316; /* orange - orange-500 */
  color: #fff;
}
body.dark .ligne-ms .badge-agent {
  background-color: #f97316; /* orange - orange-500 */
  color: #fff;
}

/* Télétravail → marron clair */
body.light .ligne-teletravail .badge-agent {
  background-color: #8b5a2b; /* marron fonce */
  color: #fff;
}
body.dark .ligne-teletravail .badge-agent {
  background-color: #8b5a2b; /* marron fonce */
  color: #fff;
}

/* Congé → jaune flashy */
body.light .ligne-conge .badge-agent {
  background-color: #facc15; /* jaune or - yellow-400 */
  color: #000;
}
body.dark .ligne-conge .badge-agent {
  background-color: #facc15; /* jaune or - yellow-400 */
  color: #000;
}

/* Stage → vert */
body.light .ligne-stage .badge-agent {
  background-color: #228b22; /* vert forêt */
  color: #fff;
}
body.dark .ligne-stage .badge-agent {
  background-color: #228b22; /* vert forêt */
  color: #fff;
}

/* Repos → vert pomme */
body.light .ligne-repos .badge-agent {
  background-color: #166534; /* vert foncé - green-700 */
  color: #fff;
}
body.dark .ligne-repos .badge-agent {
  background-color: #166534; /* vert foncé - green-700 */
  color: #fff;
}

/* === Couleurs des boutons dans le popup Attribuer une fonction === */

/* MO → rouge */
#popup-fonction.light .popup-fonction-bouton.ligne-mo {
  background-color: #f04f48; /* même rouge que le badge */
  color: #7f1d1d;
}
#popup-fonction.dark .popup-fonction-bouton.ligne-mo {
  background-color: #991b1b; /* même rouge que le badge */
  color: #fff;
}

/* Programmé → rose */
#popup-fonction.light .popup-fonction-bouton.ligne-programme {
  background-color: #f9a8d4; /* même rose que le badge */
  color: #831843;
}
#popup-fonction.dark .popup-fonction-bouton.ligne-programme {
  background-color: #ec4899; /* même rose que le badge */
  color: #fff;
}

#popup-fonction.light .popup-fonction-bouton.ligne-ms {
  background-color: #7dd3fc; /* même bleu que le badge */
  color: #0c4a6e;
}
#popup-fonction.dark .popup-fonction-bouton.ligne-ms {
  background-color: #0e7490; /* même bleu que le badge */
  color: #fff;
}

/* Télétravail → marron clair */
#popup-fonction.light .popup-fonction-bouton.ligne-teletravail {
  background-color: #8b5a2b; /* marron fonce */
  color: #fff;
}
#popup-fonction.dark .popup-fonction-bouton.ligne-teletravail {
  background-color: #8b5a2b; /* marron fonce */
  color: #fff;
}

/* Congé → marron */
#popup-fonction.light .popup-fonction-bouton.ligne-conge {
  background-color: #fde68a; /* même couleur que le badge */
  color: #78350f;
}
#popup-fonction.dark .popup-fonction-bouton.ligne-conge {
  background-color: #4b3621; /* même couleur que le badge */
  color: #fff;
}

/* Stage → vert */
#popup-fonction.light .popup-fonction-bouton.ligne-stage {
  background-color: #bbf7d0; /* même vert que le badge */
  color: #064e3b;
}
#popup-fonction.dark .popup-fonction-bouton.ligne-stage {
  background-color: #16a34a; /* même vert que le badge */
  color: #fff;
}

/* Repos → vert pomme */
#popup-fonction.light .popup-fonction-bouton.ligne-repos {
  background-color: #166534; /* vert foncé - green-700 */
  color: #fff;
}
#popup-fonction.dark .popup-fonction-bouton.ligne-repos {
  background-color: #166534; /* vert foncé - green-700 */
  color: #fff;
}

/* === Fin badge agent === */

/* Forcer les couleurs des titres de tableau */
/* Appliquer aux th généraux uniquement, pas ceux de .table-main */
:not(.table-main) th {
  background-color: #f3f4f6; /* gray-100 */
  color: #111827; /* gray-900 */
}

body.dark :not(.table-main) th {
  background-color: #374151; /* gray-700 */
  color: #f3f4f6; /* gray-100 */
}

html.light :not(.table-main) th {
  background-color: #f3f4f6;
  color: #111827;
}

html.dark :not(.table-main) th {
  background-color: #374151;
  color: #f3f4f6;
}

/* A TRAVAILLER POUR TRANSITION DOUCE THEME LIGHT / DARK
body {
  transition: background-color 5s ease, color 5s ease;
}

button, a, div, table, th, td, textarea {
  transition: background-color 5s ease, color 5s ease, border-color 5s ease;
}
  */

/*=== Input field -> ce sont les champs du formulaire de moncompte.html ===*/
.input-field {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0.25rem;
  background-color: #f3f4f6; /* bg-gray-100 */
  color: #1f2937; /* text-gray-900 */
}

html.dark .input-field,
body.dark .input-field {
  background-color: #1f2937; /* bg-gray-800 */
  color: #f9fafb; /* text-gray-100 */
  border-color: #4b5563; /* dark:border-gray-600 */
}

.input-field-editable {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0.25rem;
  background-color: white;
  color: #1f2937; /* text-gray-900 */
}

html.dark .input-field-editable,
body.dark .input-field-editable {
  background-color: #374151; /* dark:bg-gray-700 */
  color: #f9fafb; /* dark:text-gray-100 */
  border-color: #4b5563; /* dark:border-gray-600 */
}

html.dark input[type="date"],
body.dark input[type="date"] {
  color-scheme: dark;
}

/* Colonne gauche – style amélioré et cohérent */
td.colonne-gauche {
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600; /* semi-bold */
  font-size: 0.875rem; /* environ 14px */
  letter-spacing: 0.03em;
  text-align: center;
  font-style: normal;
  text-transform: uppercase; /* ➕ met en majuscules */
  letter-spacing: 0.03em; /* ➕ espacement subtil des lettres */
  font-size: 0.75rem; /* ➕ plus condensé, type badge */
  padding: 0.5rem;
  min-width: 9rem;
  max-width: 12rem;
  cursor: default;
}

/* Light mode – fond léger pour structurer visuellement */
body.light td.colonne-gauche {
  background-color: #f0f4f8; /* gris/bleu pâle */
  color: #1f2937; /* gray-800 */
}

/* Dark mode – fond discret mais différencié */
body.dark td.colonne-gauche {
  background-color: #1e293b; /* slate-800 */
  color: #f9fafb; /* blanc/gris clair */
}

body.light tr.table-row-hover:hover > td.colonne-gauche {
  background-color: #e0f2fe !important;
}

body.dark tr.table-row-hover:hover > td.colonne-gauche {
  background-color: #334155 !important;
}

/* Boutons toggle (RVT, RNAV, Semestre) */
.btn-toggle {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  margin: 0 0.25rem;
  transition: background-color 0.2s, color 0.2s;
}

.btn-toggle:hover {
  opacity: 0.95;
}

body.light .btn-toggle {
  background-color: #e5e7eb; /* gray-200 */
  color: #1f2937; /* gray-800 */
}

body.dark .btn-toggle {
  background-color: #374151; /* gray-700 */
  color: #f9fafb; /* gray-100 */
}

body.light .btn-toggle.active,
body.dark .btn-toggle.active {
  background-color: #7c3aed; /* violet-600 */
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.5);
}

/* Curseur pointer sur toute la cellule semaine */
th[data-week] {
  cursor: pointer;
}

/* Liens semaine */
body.light .semaine-link {
  color: #2563eb; /* blue-600 */
}

body.dark .semaine-link {
  color: #93c5fd; /* violet-400 ou la couleur dark souhaitée */
}

/* Pastille semaine courante */
body.light .current-week {
  background-color: #4d8ff8; /* blue-500 */
  color: white;
}

body.dark .current-week {
  background-color: #93c5fd; /* violet-300 */
  color: #1e3a8a; /* violet-900 (si tu veux changer aussi le texte) */
}

body.light .bg-gradient-to-r {
  background: linear-gradient(to right, #3b82f6, #2563eb);
  color: #f9fafb;
}

body.light #droits-wrapper {
  background-color: #bfdbfe; /* blue-200 */
  border-color: #60a5fa; /* blue-400 */
  color: #1e3a8a; /* blue-900 */
}

body.dark #droits-wrapper {
  background-color: #312e81; /* indigo-900 */
  border-color: #4338ca; /* indigo-700 */
  color: #e0e7ff; /* indigo-100 */
}

body.light .container-utilisateurs {
  background-color: transparent; /* aligné sur Mon compte */
  color: #1f2937; /* texte foncé */
}

body.dark .container-utilisateurs {
  background-color: transparent; /* aligné sur Mon compte */
  color: #f9fafb; /* texte clair */
}

body.light .input-search {
  background-color: #ffffff; /* fond blanc */
  color: #1f2937; /* texte gris foncé */
  border: 1px solid #d1d5db; /* bordure gris clair */
}

body.dark .input-search {
  background-color: #374151; /* fond gris foncé */
  color: #f9fafb; /* texte clair */
  border: 1px solid #4b5563; /* bordure gris moyen foncé */
}

body.light .chef-name {
  color: #92400e; /* marron (Tailwind amber-700) */
}

body.dark .chef-name {
  color: #6366f1; /* violet premium (indigo-500) */
}

body.light .chef-star {
  background-color: #fef3c7; /* jaune clair (amber-100) */
  color: #92400e; /* marron (amber-700) */
}

body.dark .chef-star {
  background-color: #4f46e5; /* indigo-600 (fond violet profond) */
  color: #e0e7ff; /* indigo-100 (étoile très claire) */
}

body.light .chef-badge {
  background-color: #fef3c7; /* jaune clair (amber-100) */
  color: #92400e; /* marron (amber-700) */
}

body.dark .chef-badge {
  background-color: #fef3c7; /* même jaune que le mode light */
  color: #92400e; /* même texte que le mode light */
}

body.light .user-card {
  background-color: #ebf8ff; /* bleu-50 (très pâle) */
  color: #1e3a8a; /* bleu-900 (texte foncé) */
  border: 1px solid #93c5fd; /* bleu-300 (bordure) */
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); /* légère ombre bleue (blue-500) */
}

body.dark .user-card {
  background: linear-gradient(135deg, #2563eb, #1e40af); /* dégradé bleu */
  color: #f9fafb; /* blanc */
  border: 1px solid #3b82f6; /* bleu-500 */
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3); /* glow bleu */
}

/* Navbar general */
body.light .navbar {
  background-color: #ffffff; /* blanc light mode */
  color: #1f2937; /* gris foncé */
  font-family: "Poppins", sans-serif;
}

/* === Custom Dropdowns === */
.dropdown .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
.dropdown .dropdown-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.dropdown .dropdown-color-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  flex: 0 0 auto;
}
html.dark .dropdown .dropdown-color-swatch {
  border-color: rgba(255, 255, 255, 0.35);
}
.dropdown .dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor; /* chevron */
  opacity: 0.75;
}
.dropdown .dropdown-panel {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
html.dark .dropdown .dropdown-panel {
  background-color: #1f2937;
  border-color: #4b5563;
}
.dropdown .dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  background: transparent;
}
.dropdown .dropdown-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dropdown .dropdown-item:hover {
  background-color: #f3f4f6;
}
html.dark .dropdown .dropdown-item:hover {
  background-color: #374151;
}
.dropdown .dropdown-item.active {
  background-color: #e5e7eb;
  font-weight: 600;
}
html.dark .dropdown .dropdown-item.active {
  background-color: #4b5563;
}

body.dark .navbar {
  background-color: #1f2937; /* gris dark mode */
  color: #f9fafb; /* gris clair */
  font-family: "Poppins", sans-serif;
}

.navbar-title {
  font-weight: 800; /* plus impactant que bold */
  font-size: 1.5rem; /* ≈ text-2xl */
  letter-spacing: -0.01em;
  margin: 0;
  transition: color 0.2s ease;
  font-family: "Poppins", sans-serif;
}

@media (min-width: 640px) {
  .navbar-title {
    font-size: 1.875rem; /* ≈ text-3xl */
  }
}

body.light .navbar-title {
  color: #2563eb; /* bleu clair vif (light theme) */
}

body.dark .navbar-title {
  color: #93c5fd; /* bleu pastel clair (blue-300) */
}

.navbar-link {
  position: relative;
  font-size: 1rem; /* plus grand */
  font-weight: 600; /* un peu plus gras */
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  transition: color 0.2s ease;
  font-family: "Poppins", sans-serif;
}

body.light .navbar-link {
  color: #1e40af; /* blue-800 */
}

body.light .navbar-link:hover {
  background-color: rgba(14, 165, 233, 0.1); /* léger fond bleu */
  color: #0ea5e9; /* bleu clair */
  border-radius: 0.5rem; /* coins arrondis */
}

body.dark .navbar-link {
  color: #93c5fd; /* bleu clair */
}

body.dark .navbar-link:hover {
  background-color: rgba(
    147,
    197,
    253,
    0.1
  ); /* fond bleu clair semi-transparent */
  color: #bfdbfe; /* bleu un peu plus vif */
  border-radius: 0.5rem; /* coins arrondis */
}

/* Styles communs (glassmorphism) */
.login-container {
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-text: #1f2937;
  --glass-blur: 40px;
  --glass-sat: 150%;
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

  border-radius: 0.75rem;
  padding: 2rem;

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

  box-shadow: var(--glass-shadow);
}

/* Thème clair : verre très léger, lisible, moins “flashy” */
body.light .login-container {
  --glass-bg: rgba(255, 255, 255, 0.05); /* plus transparent */
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-text: #1f2937;
  --glass-blur: 5px;
  --glass-sat: 100%; /* moins saturé que 200% */
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Thème sombre : verre fumé, très transparent */
body.dark .login-container {
  --glass-bg: rgba(0, 0, 0, 0.1); /* nettement plus transparent qu’avant */
  --glass-border: rgba(147, 51, 234, 0.3); /* tranche violette plus subtile */
  --glass-text: #e9d5ff;
  --glass-blur: 5px;
  --glass-sat: 140%;
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.login-input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

body.dark .login-input {
  border: 1px solid #4b5563 !important;
  color: #000;
}

body.light .login-input {
  border: 1px solid #d1d5db !important;
  color: #000;
}

.bandeau-date {
  display: inline-block;
  background-color: rgba(191, 219, 254, 0.6); /* blue-200 clair */
  border: 1px solid #60a5fa; /* blue-400 */
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bandeau-date p {
  color: #1e3a8a; /* bleu foncé texte */
}

body.dark .bandeau-date {
  background-color: rgba(31, 41, 55, 0.6);
  border-color: #4338ca; /* indigo-700 */
}

body.dark .bandeau-date p {
  color: #e0e7ff; /* indigo très clair texte */
}

#theme-toggle {
  transition: transform 0.3s ease;
}

#theme-toggle:hover {
  transform: rotate(20deg) scale(1.2);
}

body.light .login-container h1,
body.light .login-container h2 {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
}

body.light .login-container p,
body.light .login-container label {
  color: #1f2937;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

body.dark .login-container h1,
body.dark .login-container h2 {
  color: #e9d5ff; /* violet clair */
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.8);
}

body.dark .login-container p {
  color: #c084fc; /* violet plus doux */
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

body.dark .login-container label {
  color: #93c5fd;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Signature "ST - SNA-NE" sous le formulaire */
.signature {
  font-weight: 600;
}

body.light .signature {
  color: #1e3a8a;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

body.dark .signature {
  color: #93c5fd;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Titre principal premium */
.login-header {
  width: 100%;
  max-width: 400px; /* ou la même valeur que le formulaire */
  margin: -0.5rem auto 1rem; /* décale vers le haut et espace sous le titre */
  text-align: center;
}

.login-title {
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: initial;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* Titre, sous-titre et séparateur sans fond */
.shiny-text {
  color: rgba(29, 104, 190, 0.986);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.dark .shiny-text {
  color: rgba(233, 213, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.shiny-line {
  width: 100%;
  max-width: 400px;
  height: 0;
  border-top: 4px solid rgba(60, 200, 255, 0.4);
}

body.dark .shiny-line {
  border-top: 4px solid rgba(233, 213, 255, 0.4);
}

.login-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
}

body.light .utilisateur-ligne:hover {
  background-color: #e5e7eb; /* gris clair, Tailwind gray-200 */
}

body.dark .utilisateur-ligne:hover {
  background-color: #374151; /* gris foncé, Tailwind gray-700 */
}

.utilisateur-ligne {
  transition: background-color 0.2s ease;
}

.utilisateur-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  padding: 0 3px;
  border-radius: 9999px;
  border: none;
  background-color: #d1d5db;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

body.dark .toggle-switch {
  background-color: #4b5563;
}

.toggle-switch--on {
  background-color: #16a34a;
}

body.dark .toggle-switch--on {
  background-color: #15803d;
}

.toggle-switch__thumb {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform: translateX(0);
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.toggle-switch--on .toggle-switch__thumb {
  transform: translateX(20px);
}

.toggle-switch--busy {
  cursor: wait;
  opacity: 0.6;
}

.toggle-switch--locked,
.toggle-switch[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}

.utilisateur-nom {
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .utilisateur-nom {
    max-width: 16rem;
  }
}

.toggle-switch__status {
  font-size: 0.75rem;
  font-weight: 600;
}

.toggle-switch__status--on {
  color: #16a34a;
}

body.dark .toggle-switch__status--on {
  color: #4ade80;
}

.toggle-switch__status--off {
  color: #6b7280;
}

body.dark .toggle-switch__status--off {
  color: #9ca3af;
}

.toggle-switch__caption {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}

body.dark .toggle-switch__caption {
  color: #d1d5db;
}

.btn-icon {
  width: 2rem; /* réduit à 32px */
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition: background-color 0.3s, transform 0.2s;
  cursor: pointer;
}

.btn-icon svg {
  width: 1rem; /* réduit à 16px */
  height: 1rem;
}

.btn-icon:hover {
  transform: scale(1.1);
}

body.light .btn-warning {
  background-color: #facc15; /* jaune */
  color: #1f2937;
}

body.dark .btn-warning {
  background-color: #ca8a04; /* jaune foncé */
  color: #f9fafb;
}

.btn-icon[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

body.light .btn-edit {
  background-color: #0ea5e9; /* bleu clair */
  color: #fff;
}

body.dark .btn-edit {
  background-color: #4f46e5; /* indigo-600 */
  color: #fff;
}

.btn-edit:hover {
  transform: scale(1.1);
}

/* Bloc note semaine - light mode */
body.light .note-semaine {
  background: linear-gradient(
    to right,
    #ebf8ff,
    #bfdbfe
  ); /* bleu-50 → bleu-200 */
  border: 1px solid #93c5fd; /* bleu-300 pour border */
  color: #1e3a8a; /* bleu-900 pour texte (foncé mais pas noir) */
}

/* Bloc note semaine - dark mode (identique à l'actuel) */
body.dark .note-semaine {
  background: linear-gradient(to right, #312e81, #7e22ce); /* violet profond */
  border: 1px solid #4338ca; /* indigo-700 */
  color: #e0e7ff; /* indigo-200 clair pour texte */
}

.note-semaine-title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.note-semaine-text {
  line-height: 1.25;
}

/* Light mode */
body.light .entete-semaine {
  background-color: #ebf8ff; /* bleu très pâle */
  color: #1e3a8a; /* bleu foncé pour le texte */
  border: 1px solid #d1d5db; /* gris clair */
}

/* Dark mode */
body.dark .entete-semaine {
  background-color: #374151; /* gris sombre (gray-700) */
  color: #f3f4f6; /* gris clair (gray-100) */
  border: 1px solid #4b5563; /* gris moyen foncé */
}

body.light #user-modal > div {
  background-color: #ffffff; /* blanc clair */
  color: #1f2937; /* texte gris foncé */
}

body.dark #user-modal > div {
  background-color: #1f2937; /* gris sombre */
  color: #f9fafb; /* texte clair */
}

/* Tooltip instantané pour les th avec data-tooltip */
th[data-tooltip] {
  position: relative;
  overflow: visible;
}

th[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% - 2px); /* abaisse la bulle de quelques pixels */
  left: 50%;
  transform: translateX(-50%) translateY(-0.16rem);
  background: #1f2937; /* dark mode par défaut */
  color: #f9fafb;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 70; /* au-dessus du cadre */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  max-width: calc(100vw - 2rem);
}

body.light th[data-tooltip]::after {
  background: #f9fafb; /* light mode */
  color: #1f2937;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

th[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-0.16rem);
}

/* Anti-débordement pour première colonne */
th:first-child[data-tooltip]::after {
  left: 0.5rem;
  transform: translateY(-0.16rem);
}

th:first-child[data-tooltip]:hover::after {
  transform: translateY(-0.16rem);
}

/* Anti-débordement pour dernière colonne */
th:last-child[data-tooltip]::after {
  left: auto;
  right: 0.5rem;
  transform: translateY(-0.16rem);
}

th:last-child[data-tooltip]:hover::after {
  transform: translateY(-0.16rem);
}

.badge-agent[data-tooltip] {
  position: relative;
  z-index: 0;
}

.badge-agent[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.4rem);
  display: block;
  background: #1f2937; /* dark mode par défaut */
  color: #f9fafb;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  z-index: 120;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 300px; /* ou 400px si tu veux plus large */
  text-align: left;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.light .badge-agent[data-tooltip]::after {
  background: #f9fafb;
  color: #1f2937;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.badge-agent[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-0.6rem);
  z-index: 120;
}

/* Placeholder navbar - adapte la couleur selon le thème */
html.dark .navbar-placeholder {
  background-color: transparent;
}

html.light .navbar-placeholder {
  background-color: transparent;
}

html.dark {
  background-color: #1f2937;
}
html.light {
  background-color: #f5f5f5;
}

html.light .table-header {
  background-color: #e5e7eb; /* gris clair */
  color: #111827; /* texte gris foncé */
}

html.dark .table-header {
  background-color: #374151; /* gris sombre */
  color: #f3f4f6; /* texte clair */
}

body.light #popup-fonction {
  background-color: white;
  color: #111827; /* text-gray-900 */
  border-color: #d1d5db; /* border-gray-300 */
}

#popup-fonction {
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.popup-measure {
  visibility: hidden;
  pointer-events: none;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

body.dark #popup-fonction {
  background-color: #1f2937; /* bg-gray-800 */
  color: #f3f4f6; /* text-gray-100 */
  border-color: #4b5563; /* border-gray-600 */
}

body.light #popup-suppression {
  background-color: white;
  color: #111827; /* text-gray-900 */
  border-color: #d1d5db; /* border-gray-300 */
}

body.dark #popup-suppression {
  background-color: #1f2937; /* bg-gray-800 */
  color: #f3f4f6; /* text-gray-100 */
  border-color: #4b5563; /* border-gray-600 */
}

#popup-suppression {
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

#popup-suppression h2 {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

#popup-suppression p {
  font-size: 0.875rem;
  font-weight: normal;
}

#popup-suppression button {
  font-size: 0.875rem;
}

body.light #popup-conge,
body.light #popup-suppression-conge {
  background-color: white;
  color: #111827;
  border-color: #d1d5db;
}

body.dark #popup-conge,
body.dark #popup-suppression-conge {
  background-color: #1f2937;
  color: #f3f4f6;
  border-color: #4b5563;
}

#popup-conge,
#popup-suppression-conge {
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

body.light #popup-week-actions {
  background-color: white;
  color: #111827;
  border-color: #d1d5db;
}

body.dark #popup-week-actions {
  background-color: #1f2937;
  color: #f3f4f6;
  border-color: #4b5563;
}

#popup-week-actions {
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  min-width: 180px;
}

.light #overlay-confirm-clean-section {
  background-color: rgba(0, 0, 0, 0.4);
}

.dark #overlay-confirm-clean-section {
  background-color: rgba(0, 0, 0, 0.6);
}

.light #popup-confirm-clean-section {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

.dark #popup-confirm-clean-section {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #4b5563;
}

.light #overlay-confirm-clean-semestre {
  background-color: rgba(0, 0, 0, 0.4);
}

.dark #overlay-confirm-clean-semestre {
  background-color: rgba(0, 0, 0, 0.6);
}

.light #popup-confirm-clean-semestre {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

.dark #popup-confirm-clean-semestre {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #4b5563;
}

.light #popup-auto-fill {
  background-color: rgba(0, 0, 0, 0.4);
}

.dark #popup-auto-fill {
  background-color: rgba(0, 0, 0, 0.6);
}

.light #popup-auto-fill .modal-card {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

.dark #popup-auto-fill .modal-card {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #4b5563;
}

.light #popup-auto-fill .modal-card h2,
.light #popup-auto-fill .modal-card p,
.light #popup-auto-fill .modal-card label,
.light #popup-auto-fill .modal-card strong,
.light #popup-auto-fill .modal-card span {
  color: #111827;
}

.dark #popup-auto-fill .modal-card h2,
.dark #popup-auto-fill .modal-card p,
.dark #popup-auto-fill .modal-card label,
.dark #popup-auto-fill .modal-card strong,
.dark #popup-auto-fill .modal-card span {
  color: #f9fafb;
}

.light #popup-auto-fill .input-field-editable {
  background-color: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

.dark #popup-auto-fill .input-field-editable {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

.light #popup-auto-fill #auto-fill-log {
  background-color: #f9fafb;
  color: #1f2937;
}

.dark #popup-auto-fill #auto-fill-log {
  background-color: #111827;
  color: #f9fafb;
}

.light #popup-auto-fill .modal-card button[aria-label="Fermer"] {
  color: #4b5563;
}

.dark #popup-auto-fill .modal-card button[aria-label="Fermer"] {
  color: #f9fafb;
}

.light #popup-auto-fill .modal-card button[aria-label="Fermer"]:hover {
  color: #1f2937;
}

.dark #popup-auto-fill .modal-card button[aria-label="Fermer"]:hover {
  color: #ffffff;
}

#popup-auto-fill .auto-fill-summary {
  border: 1px solid;
  border-radius: 0.625rem;
  padding: 0.6rem;
}

#popup-auto-fill .auto-fill-summary-title {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#popup-auto-fill .auto-fill-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

#popup-auto-fill .auto-fill-summary-col {
  border-radius: 0.5rem;
  padding: 0.45rem 0.5rem;
}

#popup-auto-fill .auto-fill-summary-col h4 {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
}

#popup-auto-fill .auto-fill-summary-col ul {
  margin: 0;
  padding-left: 1rem;
  list-style-type: disc;
  list-style-position: outside;
  font-size: 0.72rem;
  line-height: 1.35;
}

#popup-auto-fill .auto-fill-summary-col li + li {
  margin-top: 0.2rem;
}

#popup-auto-fill .auto-fill-summary-col li {
  display: list-item;
}

@media (max-width: 640px) {
  #popup-auto-fill .auto-fill-summary-grid {
    grid-template-columns: 1fr;
  }
}

.light #popup-auto-fill .auto-fill-summary {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.dark #popup-auto-fill .auto-fill-summary {
  border-color: #60a5fa;
  background: rgba(37, 99, 235, 0.14);
}

.light #popup-auto-fill .auto-fill-summary-title {
  color: #1e3a8a;
}

.dark #popup-auto-fill .auto-fill-summary-title {
  color: #bfdbfe;
}

.light #popup-auto-fill .auto-fill-summary-col {
  background: rgba(255, 255, 255, 0.72);
}

.dark #popup-auto-fill .auto-fill-summary-col {
  background: rgba(17, 24, 39, 0.55);
}

.light #popup-auto-fill .auto-fill-summary-col h4 {
  color: #1f2937;
}

.dark #popup-auto-fill .auto-fill-summary-col h4 {
  color: #e5e7eb;
}
#popup-fonction.light .popup-fonction-bouton:not(.badge-semestriel) {
  background-color: white;
  color: #1f2937; /* text-gray-800 */
  border-color: #d1d5db; /* border-gray-300 */
}

#popup-fonction.dark .popup-fonction-bouton:not(.badge-semestriel) {
  background-color: #374151; /* dark:bg-gray-700 */
  color: #f3f4f6; /* dark:text-gray-100 */
  border-color: #4b5563; /* dark:border-gray-600 */
}

#popup-fonction.light .popup-fonction-bouton:not(.badge-semestriel):hover {
  background-color: #93c5fd; /* bleu clair */
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.2);
}

#popup-fonction.dark .popup-fonction-bouton:not(.badge-semestriel):hover {
  background-color: #6366f1; /* indigo */
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.2);
}

#popup-fonction.light .popup-fonction-annuler {
  background-color: #d1d5db; /* bg-gray-300 */
  color: #1f2937; /* text-gray-900 */
}

#popup-fonction.dark .popup-fonction-annuler {
  background-color: #4b5563; /* dark:bg-gray-600 */
  color: #f3f4f6; /* dark:text-gray-100 */
}

#popup-fonction.light .popup-fonction-annuler:hover {
  background-color: #9ca3af; /* hover:bg-gray-400 */
}

#popup-fonction.dark .popup-fonction-annuler:hover {
  background-color: #6b7280; /* dark:hover:bg-gray-500 */
}

#popup-fonction h2 {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

#popup-fonction .popup-fonction-bouton {
  font-size: 1.125rem;
  font-weight: 600;
  transition: transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  line-height: 1;
  width: 100%;
}

#popup-fonction .popup-fonction-annuler {
  font-size: 0.75rem;
}

/* BLOC POEME DEMANDE */
#bloc-poeme {
  background-color: #f3f4f6; /* gris clair en light */
  color: #1f2937; /* texte foncé en light */
}

body.dark #bloc-poeme {
  background-color: #1f2937; /* gris sombre en dark */
  color: #f9fafb; /* texte clair en dark */
}

/* BLOC FORMATION */
#bloc-formation {
  background-color: #ffffff; /* blanc en light */
  color: #1f2937; /* texte gris foncé en light */
}

body.dark #bloc-formation {
  background-color: #374151; /* gris foncé en dark */
  color: #f9fafb; /* texte clair en dark */
}

#bloc-liste-formations {
  background-color: #ffffff; /* blanc en light */
  color: #1f2937; /* texte gris foncé en light */
}

body.dark #bloc-liste-formations {
  background-color: #374151; /* gris foncé en dark */
  color: #f9fafb; /* texte clair en dark */
}

#bloc-formation-modal {
  background-color: #ffffff; /* clair en light */
  color: #1f2937; /* texte foncé en light */
}

body.dark #bloc-formation-modal {
  background-color: #374151; /* gris foncé en dark */
  color: #f9fafb; /* texte clair en dark */
}

.input-field-editable {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background-color: white;
  color: #1f2937;
}
html.dark .input-field-editable,
body.dark .input-field-editable {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

#admin-users-table,
#admin-users-table th,
#admin-users-table td {
  border-left: none !important;
  border-right: none !important;
}

body.dashboard-page {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.light.dashboard-page {
  background-image: url("/img/background-dashboard-light.jpg");
}

body.dark.dashboard-page {
  background-image: url("/img/background-dashboard-dark.png");
}

.bienvenue-text {
  margin-bottom: 1.5rem; /* mb-6 */
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  color: #0ea5e9; /* text-indigo-500 par défaut */
}

body.dark .bienvenue-text {
  color: #818cf8; /* text-indigo-300 en mode dark */
}

/* BASE NAVBAR */

.navbar {
  background: transparent;
  transition: background-position 1s ease-in-out;
  animation: none;
}

/* LIGHT MODE */
body.light .navbar-animated {
  background: transparent;
}

/* DARK MODE */
body.dark .navbar {
  background: transparent;
}

/* ANIMATION : shimmer lent */
@keyframes navbar-slide {
  from {
    background-position: left center;
  }
  to {
    background-position: right center;
  }
}

/* --- Badge Semestriel Professionnel --- */
.badge-semestriel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;

  position: relative;
  width: 70px;
  height: 30px;

  padding: 0 10px;
  font-size: 0.8125rem;
  font-family: "" Inter "", "" Roboto "", "" Segoe UI "", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;

  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  user-select: none;
  cursor: pointer;
}

.badge-semestriel:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.badge-semestriel .icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.badge-semestriel:hover .icon {
  filter: brightness(1.25);
  transform: scale(1.05);
}

/* Vue semestrielle: badges uniformes (même taille pour tous) */
body.semestrielle-page #table-body-semestrielle .badge-semestriel,
body.semestrielle-page #table-body-semestrielle .badge-jour-ferie {
  box-sizing: border-box;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 24px;
  padding: 0 0.25rem;
  overflow: visible;
  text-overflow: clip;
}

/* Le contour indicatif ne doit pas "tasser" visuellement le badge */
body.semestrielle-page #table-body-semestrielle .badge-semestriel.badge-variable-indicator {
  box-sizing: border-box;
}

/* Tag programmé (chip) */
.badge-programme-tag {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #111827;
  color: #f9fafb;
  font-size: 0.65rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

body.dark .badge-programme-tag {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.75);
}

/* Tooltip tag programmé (retardé) */
.badge-semestriel[data-tag-tooltip]::after {
  content: attr(data-tag-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.4rem);
  display: block;
  background: #111827;
  color: #f9fafb;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.light .badge-semestriel[data-tag-tooltip]::after {
  background: #ffffff;
  color: #1f2937;
  border-color: rgba(17, 24, 39, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.badge-semestriel[data-tag-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-0.6rem);
  transition-delay: 0.3s;
}

/* Dernières colonnes semestrielles: ancrer le tooltip à droite pour éviter la coupe. */
#table-body-semestrielle td.prg-tooltip-cell:nth-last-child(-n + 3)
  .badge-semestriel[data-tag-tooltip]::after {
  left: auto;
  right: 0;
  transform: translateY(-0.4rem);
}

#table-body-semestrielle td.prg-tooltip-cell:nth-last-child(-n + 3)
  .badge-semestriel[data-tag-tooltip]:hover::after {
  transform: translateY(-0.6rem);
}

#table-body-semestrielle td.prg-tooltip-cell {
  position: relative;
  overflow: visible !important;
}

#table-body-semestrielle td.prg-tooltip-cell:hover {
  z-index: 40;
}

.badge-agent[data-tag-tooltip]::before {
  content: attr(data-tag-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.4rem);
  display: block;
  background: #1f2937;
  color: #f9fafb;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.light .badge-agent[data-tag-tooltip]::before {
  background: #f9fafb;
  color: #1f2937;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.badge-agent[data-tag-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-0.6rem);
  transition-delay: 0.5s;
}

.pending-conge-cell {
  position: relative;
  overflow: hidden;
}

.pending-conge-cell > * {
  position: relative;
  z-index: 1;
}

.pending-conge-overlay {
  position: absolute;
  inset: 3px;
  border-radius: 0.6rem;
  background: repeating-linear-gradient(
    135deg,
    rgba(250, 204, 21, 0.92) 0,
    rgba(250, 204, 21, 0.92) 14px,
    rgba(0, 0, 0, 0.85) 14px,
    rgba(0, 0, 0, 0.85) 28px
  );
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.badge-semestriel.badge-pending-conge {
  position: relative;
  z-index: 1;
  color: #facc15;
  border: 1px dashed rgba(250, 204, 21, 0.8);
  background: rgba(146, 65, 14, 0.509);
  font-weight: 600;
}

.dark .badge-semestriel.badge-pending-conge {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.8);
  background: rgba(146, 64, 14, 0.28);
}

.badge-agent.pending-conge {
  position: relative;
  overflow: visible;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(250, 204, 21, 0.75) 0,
    rgba(250, 204, 21, 0.75) 7px,
    transparent 7px,
    transparent 14px
  );
  z-index: 2;
}

.badge-agent.pending-conge.pending-conge-placeholder {
  background-color: rgba(253, 230, 138, 0.28);
  cursor: default;
  color: #facc15;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(250, 204, 21, 0.75) 0,
    rgba(250, 204, 21, 0.75) 7px,
    transparent 7px,
    transparent 14px
  );
}

/* === Couleurs par fonction === */
/* === Couleurs par fonction === */
.badge-semestriel-mo {
  background-color: #f04f48; /* rouge clair vibrant mais pas agressif */
  color: #7f1d1d; /* rouge foncé pour un contraste doux et élégant */
}
.dark .badge-semestriel-mo {
  background-color: #991b1b;
  color: white;
}

.badge-semestriel-mo .icon {
  width: 17px;
  height: 17px;
}

.badge-semestriel-programme {
  background-color: #f9a8d4;
  color: #831843; /* framboise foncé = bon contraste */
}
.dark .badge-semestriel-programme {
  background-color: #ec4899;
  color: white;
}

.badge-semestriel-ms {
  background-color: #7dd3fc;
  color: #0c4a6e; /* bleu foncé = très bon contraste */
}
.dark .badge-semestriel-ms {
  background-color: #0e7490;
  color: white;
}

.badge-semestriel-ms .icon {
  width: 17px;
  height: 17px;
  margin-right: 6px;
}

.badge-semestriel-stage {
  background-color: #bbf7d0;
  color: #064e3b; /* vert foncé = bon contraste sur menthe clair */
}
.dark .badge-semestriel-stage {
  background-color: #16a34a;
  color: white;
}

.badge-semestriel-stage .icon {
  margin-right: 6px;
  width: 19px;
  height: 19px;
}

.badge-semestriel-conge {
  background-color: #fde68a;
  color: #78350f; /* marron foncé = lisible sur jaune pâle */
}
.dark .badge-semestriel-conge {
  background-color: #4b3621;
  color: white;
}

/* --- Badge jour férié --- */
.badge-jour-ferie {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 10px;
  margin: 0 auto 4px;
  width: 70px;
  height: 30px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background-color: #e5e7eb; /* gris clair discret */
  color: #1f2937; /* texte gris foncé */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-jour-ferie:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.dark .badge-jour-ferie {
  background-color: #374151; /* gris foncé discret */
  color: #f3f4f6; /* texte gris clair */
}

.badge-jour-ferie[data-tooltip] {
  position: relative;
}

.badge-jour-ferie[data-tooltip]::after {
  content: none;
}

.badge-jour-ferie-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  background: #1f2937;
  color: #f9fafb;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.1s ease;
  max-width: 320px;
  text-align: center;
}

.badge-jour-ferie-tooltip.show {
  opacity: 1;
}

.badge-jour-ferie-tooltip.light {
  background: #f9fafb;
  color: #1f2937;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.badge-jour-ferie-tooltip.dark {
  background: #1f2937;
  color: #f9fafb;
}

/* --- Entête jour férié (vue hebdo) --- */
body.light .entete-semaine.entete-jour-ferie {
  color: #b91c1c;
}
body.dark .entete-semaine.entete-jour-ferie {
  color: #fca5a5;
}

th.entete-semaine.entete-jour-ferie[data-holiday-tooltip] {
  cursor: default;
}

body.light .holiday-header-tooltip {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  color: #991b1b;
  border-color: #fecaca;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

body.dark .holiday-header-tooltip {
  background: linear-gradient(135deg, #111827, #1f2937);
  color: #fecaca;
  border-color: #7f1d1d;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5);
}

.holiday-header-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  max-width: min(280px, calc(100vw - 24px));
  width: max-content;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.holiday-header-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

body.light .holiday-header-tooltip::after {
  background: #ffffff;
  border-color: #fecaca;
}

body.dark .holiday-header-tooltip::after {
  background: #111827;
  border-color: #7f1d1d;
}

.holiday-header-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
/* === Badge variable (instable, mixé, etc.) === */
.badge-variable-indicator {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.badge-variable-indicator::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(
    90deg,
    #f3f4f6,
    #6b7280,
    #1f2937,
    #6b7280,
    #f3f4f6
  );
  background-size: 500% 100%;
  animation: border-glow-loop 6s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

@keyframes border-glow-loop {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.badge-note {
  position: relative;
}

/* Les badges avec note doivent passer au-dessus des badges voisins,
   y compris quand un tooltip est présent (règle plus spécifique). */
.badge-agent.badge-note,
.badge-agent.badge-note[data-tooltip] {
  z-index: 3;
}

/* Vue hebdo (grille 2 colonnes) :
   priorité de plan aux badges de gauche vs droite pour éviter
   que la pastille d'un badge noté soit recouverte par son voisin droit. */
.hebdo-agent-grid > .badge-agent.badge-note:nth-child(odd),
.hebdo-agent-grid > .badge-agent.badge-note[data-tooltip]:nth-child(odd) {
  z-index: 5;
}

.hebdo-agent-grid > .badge-agent.badge-note:nth-child(even),
.hebdo-agent-grid > .badge-agent.badge-note[data-tooltip]:nth-child(even) {
  z-index: 4;
}

.badge-note .note-dot {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background-color: #f43f5e;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 30;
}

.badge-note .badge-programme-tag {
  right: 14px;
}

html.dark .badge-note .note-dot {
  border-color: #1f2937;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 30;
}

/* Badge affichant le nombre de cycles MO */
.badge-cycle-mo {
  background-color: #d1d5db; /* gray-300 */
  color: #111827; /* gray-900 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  margin-left: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.dark .badge-cycle-mo {
  background-color: #4b5563; /* gray-600 */
  color: #f9fafb; /* gray-100 */
}

/* Alerte compteur MO (policy non respectée) */
.badge-cycle-mo--warn {
  background-color: #fde68a; /* amber-200 */
  color: #7c2d12; /* amber-900 */
}
.dark .badge-cycle-mo--warn {
  background-color: #92400e; /* amber-800 */
  color: #fffbeb; /* amber-50 */
}

#bloc-formations-semaine {
  background: var(--tw-bg-opacity, 1) var(--tw-bg-opacity, 1)
    rgba(255, 255, 255, 0.6);
}

.dark #bloc-formations-semaine {
  background: rgba(31, 41, 55, 0.6);
}

#bloc-formations-semaine {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Fond d'écran clair */
body.light.login-page {
  background-image: url("/img/background-login-light.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fond d'écran sombre */
body.dark.login-page {
  background-image: url("/img/background-login-dark.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.light #popup-maintenance {
  background-color: rgba(255, 255, 255, 0.5);
}

body.dark #popup-maintenance {
  background-color: rgba(0, 0, 0, 0.5);
}

body.light #popup-maintenance > div {
  background-color: white;
  color: #1f2937;
}

body.dark #popup-maintenance > div {
  background-color: #1f2937;
  color: #f9fafb;
}

body.light #popup-maintenance > div input,
body.light #popup-maintenance > div textarea {
  background-color: white;
  color: #1f2937;
}

body.dark #popup-maintenance > div input,
body.dark #popup-maintenance > div textarea {
  background-color: #374151;
  color: #f9fafb;
}

body.light #popup-maintenance button.annuler {
  background-color: #e5e7eb;
  color: #1f2937;
}

body.dark #popup-maintenance button.annuler {
  background-color: #4b5563;
  color: #f9fafb;
}

/* Thème clair spécifique */
.light #popup-maintenance-annee .bg-white {
  background-color: #ffffff;
  color: #111827; /* texte noir-gris */
}

/* Thème sombre spécifique */
.dark #popup-maintenance-annee .dark\:bg-gray-800 {
  background-color: #1f2937;
  color: #f9fafb; /* texte clair */
}

.light #popup-maintenance-annee {
  background-color: rgba(255, 255, 255, 0.7);
}
.dark #popup-maintenance-annee {
  background-color: rgba(0, 0, 0, 0.5);
}

/* === Correction du fond clair/sombre pour le popup édition maintenance === */

.light #popup-maintenance-edit .bg-white {
  background-color: #ffffff !important;
  color: #111827 !important;
}

.dark #popup-maintenance-edit .bg-white {
  background-color: #1f2937 !important; /* équivaut à dark:bg-gray-800 */
  color: #f9fafb !important;
}

.light #popup-maintenance-edit input,
.light #popup-maintenance-edit select,
.light #popup-maintenance-edit textarea {
  background-color: #f9fafb;
  color: #111827;
}

.dark #popup-maintenance-edit input,
.dark #popup-maintenance-edit select,
.dark #popup-maintenance-edit textarea {
  background-color: #374151;
  color: #f9fafb;
}

.light #popup-maintenance-edit .popup-container {
  background-color: #ffffff;
  color: #111827;
}

.dark #popup-maintenance-edit .popup-container {
  background-color: #1f2937;
  color: #f9fafb;
}

.light #popup-confirm-suppression {
  background-color: #ffffff;
  color: #111827;
}

.dark #popup-confirm-suppression {
  background-color: #1f2937;
  color: #f9fafb;
}

.light #popup-confirm-suppression {
  border: 1px solid #e5e7eb;
}

.dark #popup-confirm-suppression {
  border: 1px solid #4b5563;
}

/* Thème clair/sombre pour le popup de confirmation d'import */
.light #overlay-confirm-import {
  background-color: rgba(0, 0, 0, 0.4);
}

.dark #overlay-confirm-import {
  background-color: rgba(0, 0, 0, 0.6);
}

.light #popup-confirm-import {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

.dark #popup-confirm-import {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #4b5563;
}

/* Thème clair/sombre pour le popup de confirmation de suppression utilisateur */
.light #overlay-confirm-delete {
  background-color: rgba(0, 0, 0, 0.4);
}

.dark #overlay-confirm-delete {
  background-color: rgba(0, 0, 0, 0.6);
}

.light #popup-confirm-delete {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

.dark #popup-confirm-delete {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #4b5563;
}

/* Thème clair/sombre pour le popup d'import de semestre */
body.light #popup-maintenance-import {
  background-color: rgba(255, 255, 255, 0.5);
}

body.dark #popup-maintenance-import {
  background-color: rgba(0, 0, 0, 0.5);
}

body.light #popup-maintenance-import > div {
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

body.dark #popup-maintenance-import > div {
  background-color: #1f2937;
  color: #f3f4f6;
  border: 1px solid #4b5563;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

body.light #popup-maintenance-import button.annuler {
  background-color: #e5e7eb;
  color: #1f2937;
}

body.dark #popup-maintenance-import button.annuler {
  background-color: #4b5563;
  color: #f9fafb;
}

body.light #btn-modifier-maintenance,
body.dark #btn-modifier-maintenance {
  background-color: #60a5fa; /* blue-400 */
  color: #fff;
}
body.light #btn-modifier-maintenance:hover,
body.dark #btn-modifier-maintenance:hover {
  background-color: #2563eb; /* blue-600 */
}

body.light #btn-import-semestre,
body.dark #btn-import-semestre {
  background-color: #60a5fa; /* blue-400 */
  color: #fff;
}
body.light #btn-import-semestre:hover,
body.dark #btn-import-semestre:hover {
  background-color: #2563eb; /* blue-600 */
}

.maintenance-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: bold;
  width: 1.8rem;
  height: 1.8rem;
  text-align: center;
  transition: transform 0.2s ease;
}

.maintenance-pill:hover {
  transform: scale(1.1);
}

body.light .maintenance-pill.stb {
  background-color: #22c55e; /* green-500 */
  color: white;
  box-shadow: 0 0 0 2px #15803d; /* green-800 */
}

body.dark .maintenance-pill.stb {
  background-color: #15803d; /* green-800 */
  color: #bbf7d0; /* green-100 */
  box-shadow: 0 0 0 2px #22c55e; /* green-500 */
}

body.light .maintenance-pill.mnl {
  background-color: #3b82f6; /* blue-500 */
  color: white;
  box-shadow: 0 0 0 2px #1e3a8a; /* blue-900 */
}

body.dark .maintenance-pill.mnl {
  background-color: #1e3a8a; /* blue-900 */
  color: #e0f2fe; /* cyan-100 */
  box-shadow: 0 0 0 2px #2563eb; /* blue-600 */
}

.maintenance-text {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#table-body-semestrielle td .maintenance-stack {
  --maintenance-lane-h: 14px;
  --maintenance-lane-gap: 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--maintenance-lane-gap);
  height: calc((var(--maintenance-lane-h) * 2) + var(--maintenance-lane-gap));
  min-height: calc((var(--maintenance-lane-h) * 2) + var(--maintenance-lane-gap));
}

#table-body-semestrielle td .maintenance-stack.maintenance-stack--single-centered {
  justify-content: center;
}

#table-body-semestrielle td .maintenance-slot {
  height: var(--maintenance-lane-h);
  min-height: var(--maintenance-lane-h);
  flex: 0 0 var(--maintenance-lane-h);
}

#table-body-semestrielle td .maintenance-token {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: var(--maintenance-lane-h);
  min-height: var(--maintenance-lane-h);
  flex: 0 0 var(--maintenance-lane-h);
  border-radius: 7px;
  padding: 0 6px 0 10px;
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}

#table-body-semestrielle td .maintenance-token.start {
  border-radius: 7px 0 0 7px;
}

#table-body-semestrielle td .maintenance-token.mid {
  border-radius: 0;
}

#table-body-semestrielle td .maintenance-token.end {
  border-radius: 0 7px 7px 0;
}

#table-body-semestrielle td .maintenance-token.single {
  border-radius: 7px;
}

#table-body-semestrielle td .maintenance-token.has-label::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 6px;
  background: currentColor;
  opacity: 0.88;
}

#table-body-semestrielle td .maintenance-token:not(.has-label) {
  padding-left: 6px;
}

body.light #table-body-semestrielle td .maintenance-token.stb {
  --mt-bg: rgba(34, 197, 94, 0.16);
  --mt-bd: rgba(34, 197, 94, 0.35);
  background: var(--mt-bg);
  color: #166534;
  border-color: var(--mt-bd);
}

body.dark #table-body-semestrielle td .maintenance-token.stb {
  --mt-bg: rgba(34, 197, 94, 0.2);
  --mt-bd: rgba(74, 222, 128, 0.42);
  background: var(--mt-bg);
  color: #bbf7d0;
  border-color: var(--mt-bd);
}

body.light #table-body-semestrielle td .maintenance-token.mnl {
  --mt-bg: rgba(59, 130, 246, 0.16);
  --mt-bd: rgba(59, 130, 246, 0.35);
  background: var(--mt-bg);
  color: #1d4ed8;
  border-color: var(--mt-bd);
}

body.dark #table-body-semestrielle td .maintenance-token.mnl {
  --mt-bg: rgba(59, 130, 246, 0.2);
  --mt-bd: rgba(96, 165, 250, 0.44);
  background: var(--mt-bg);
  color: #bfdbfe;
  border-color: var(--mt-bd);
}

body.light #table-body-semestrielle td .maintenance-token.chantier {
  --mt-bg: rgba(249, 115, 22, 0.14);
  --mt-bd: rgba(249, 115, 22, 0.34);
  background: var(--mt-bg);
  color: #9a3412;
  border-color: var(--mt-bd);
}

body.dark #table-body-semestrielle td .maintenance-token.chantier {
  --mt-bg: rgba(249, 115, 22, 0.2);
  --mt-bd: rgba(251, 146, 60, 0.42);
  background: var(--mt-bg);
  color: #fed7aa;
  border-color: var(--mt-bd);
}

/* Lissage des jonctions inter-cellules: masque uniquement les bordures internes */
#table-body-semestrielle td .maintenance-token.start {
  border-right-color: var(--mt-bg) !important;
}

#table-body-semestrielle td .maintenance-token.mid {
  border-left-color: var(--mt-bg) !important;
  border-right-color: var(--mt-bg) !important;
}

#table-body-semestrielle td .maintenance-token.end {
  border-left-color: var(--mt-bg) !important;
}

#table-body-semestrielle td .maintenance-token.start,
#table-body-semestrielle td .maintenance-token.mid {
  box-shadow: 1px 0 0 0 var(--mt-bg);
}

#table-body-semestrielle td[data-agent="Maintenance STB"],
#table-body-semestrielle td[data-agent="Maintenance MNL"],
#table-body-semestrielle td[data-agent="Chantiers"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.light td.maintenance-cell.stb {
  background-color: #86efac; /* green-300 */
  color: #1f2937; /* gray-800 */
}

body.dark td.maintenance-cell.stb {
  background-color: #15803d; /* green-800 */
  color: #bbf7d0; /* green-100 */
}

body.light td.maintenance-cell.mnl {
  background-color: #93c5fd; /* blue-300 */
  color: #1f2937; /* gray-800 */
}

body.dark td.maintenance-cell.mnl {
  background-color: #1e3a8a; /* blue-900 */
  color: #e0f2fe; /* cyan-100 */
}

body.light td.maintenance-cell.chantier {
  background-color: #fed7aa; /* orange-200 */
  color: #7c2d12; /* orange-900 */
}

body.dark td.maintenance-cell.chantier {
  background-color: #9a3412; /* orange-800 */
  color: #ffedd5; /* orange-100 */
}

body.light .chantier-pill {
  background-color: #f97316; /* orange-500 */
  color: white;
  box-shadow: 0 0 0 2px #9a3412; /* orange-800 */
}

body.dark .chantier-pill {
  background-color: #9a3412; /* orange-800 */
  color: #ffedd5; /* orange-100 */
  box-shadow: 0 0 0 2px #f97316; /* orange-500 */
}

/* === Popup info maintenance === */
.light #popup-info-maintenance {
  background-color: #ffffff;
  color: #1f2937; /* text-gray-800 */
  border: 1px solid #e5e7eb;
}

.dark #popup-info-maintenance {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
}

.light #overlay-info-maintenance {
  background-color: rgba(0, 0, 0, 0.4);
}

.dark #overlay-info-maintenance {
  background-color: rgba(0, 0, 0, 0.6);
}

.light #overlay-info-chantier {
  background-color: rgba(0, 0, 0, 0.4);
}

.dark #overlay-info-chantier {
  background-color: rgba(0, 0, 0, 0.6);
}

#popup-info-maintenance h3 {
  font-family: "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: inherit;
  text-align: center;
  margin-bottom: 1rem;
}

/* === Popup info chantier === */
.light #popup-info-chantier {
  background-color: #ffffff;
  color: #1f2937; /* text-gray-800 */
  border: 1px solid #e5e7eb;
}

.dark #popup-info-chantier {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
}

#popup-info-chantier h3 {
  font-family: "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: inherit;
  text-align: center;
  margin-bottom: 1rem;
}

.light .maintenance-box {
  background-color: #f3f4f6; /* gray-100 */
  color: #1f2937; /* gray-800 */
}

.dark .maintenance-box {
  background-color: #374151; /* gray-700 */
  color: #f3f4f6; /* gray-100 */
}

.light .chantier-box {
  background-color: #f3f4f6; /* gray-100 */
  color: #1f2937; /* gray-800 */
}

.dark .chantier-box {
  background-color: #374151; /* gray-700 */
  color: #f3f4f6; /* gray-100 */
}

.light .maintenance-box,
.dark .maintenance-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.maintenance-box.stb {
  border-left: 4px solid #22c55e; /* vert - STB */
}

.maintenance-box.mnl {
  border-left: 4px solid #3b82f6; /* bleu - MNL */
}

.chantier-box {
  border-left: 4px solid #f97316; /* orange */
}

.agent-chip {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  margin-right: 0.25rem;
  margin-bottom: 0.2rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

body.light .agent-chip-stb {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

body.dark .agent-chip-stb {
  background: #166534;
  color: #bbf7d0;
  border-color: #22c55e;
}

body.light .agent-chip-mnl {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #93c5fd;
}

body.dark .agent-chip-mnl {
  background: #1e3a8a;
  color: #bfdbfe;
  border-color: #3b82f6;
}

body.light .agent-chip-chantier {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fdba74;
}

body.dark .agent-chip-chantier {
  background: #9a3412;
  color: #ffedd5;
  border-color: #f97316;
}

body.light .chantier-pill {
  background-color: #f97316; /* orange-500 */
  color: white;
  box-shadow: 0 0 0 2px #9a3412; /* orange-800 */
}

/* === Historique === */
.light .history-row {
  background-color: #e5e7eb; /* gray-200 */
  color: #1f2937; /* gray-800 */
}

.dark .history-row {
  background-color: #374151; /* gray-700 */
  color: #f9fafb; /* gray-50 */
}

.history-pagination {
  margin: 12px 0;
}

.history-pagination-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.history-pagination-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-page-btn {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.875rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.history-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.history-pagination-info {
  font-size: 0.875rem;
  opacity: 0.8;
}

.light .history-page-btn {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #1f2937;
}

.light .history-page-btn:hover:not(:disabled) {
  background-color: #e2e8f0;
}

.light .history-page-btn.is-active {
  background-color: #c7d2fe;
  border-color: #6366f1;
  color: #1e1b4b;
  font-weight: 700;
}

.dark .history-page-btn {
  background-color: #1f2937;
  border-color: #4b5563;
  color: #e5e7eb;
}

.dark .history-page-btn:hover:not(:disabled) {
  background-color: #374151;
}

.dark .history-page-btn.is-active {
  background-color: #4338ca;
  border-color: #6366f1;
  color: #eef2ff;
  font-weight: 700;
}

/* === Animations popups === */
.animate-popup {
  animation: fadeInBottom 0.2s ease-out;
}

.animate-popup-scale {
  animation: fadeScaleIn 0.2s ease-out;
}

@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#toast {
  z-index: 100;
}

#toast.show {
  animation: toastPopIn 0.2s ease-out;
}

/* Variantes toast */
#toast.toast-warn {
  background-color: #f59e0b;
} /* amber-500 */
#toast.toast-ok {
  background-color: #16a34a;
} /* green-600 approx */

@keyframes toastPopIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
/* === Transitions de navigation === */
body.zoom-forward {
  animation: zoomForward 0.2s forwards;
  transform-origin: center;
}
body.zoom-back {
  animation: zoomBack 0.2s forwards;
  transform-origin: center;
}

/* Carte modale commune */
.modal-card {
  position: relative;
  border-radius: 0.75rem;
  padding: 1.25rem 2.25rem 1.25rem 1.25rem; /* espace à droite pour la croix */
  border: 1px solid #d1d5db;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
html.dark .modal-card {
  background: #1f2937;
  border-color: #4b5563;
  color: #f9fafb; /* texte clair pour tous les contenus de la modale */
}
@keyframes zoomForward {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}
@keyframes zoomBack {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.5);
  }
}

/* table-body-semestrielle = corps du tableau Semestrielle */

/* Table-body semestrielle */

/* Gradient et style première colonne (header et corps) */
body.light #weeks-header th,
body.light #table-body-semestrielle td:first-child {
  background: linear-gradient(to right, #e0f2fe, #bae6fd 50%, #e0f2fe);
  color: #1e3a8a;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
}

body.dark #weeks-header th,
body.dark #table-body-semestrielle td:first-child {
  background: linear-gradient(to right, #334155, #3b4e64 50%, #334155);

  color: #f3f4f6;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
}

/* Padding et alignement de la première colonne */
#weeks-header th,
#table-body-semestrielle td:first-child {
  padding: 0.75rem 1rem;
  text-align: center;
  font-style: normal;
  font-size: 0.875rem;
}

/* Hover sur la ligne entière */
body.light #table-body-semestrielle tr:hover {
  background-color: #dbeafe; /* bleu très clair (blue-100) */
}

body.dark #table-body-semestrielle tr:hover {
  background-color: #374151;
}

/* Hover sur la cellule individuelle, prioritaire */
body.light #table-body-semestrielle td:hover {
  background-color: rgba(59, 130, 246, 0.25); /* bleu clair semi-transparent */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

body.dark #table-body-semestrielle td:hover {
  background-color: rgba(147, 197, 253, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Mise en valeur discrète de la ligne de l'agent connecté (hors admin) */
body.light #table-body-semestrielle tr.current-user-row td {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

body.dark #table-body-semestrielle tr.current-user-row td {
  background-color: rgba(96, 165, 250, 0.18) !important;
}

/* === Ruban jours off (vue semestrielle) === */
.semestriel-cell {
  position: relative;
}

.semestriel-cell .semestriel-cell-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-bottom: 10px;
}

.off-ribbon {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  height: 6px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  pointer-events: none;
  z-index: 1;
}

body.light .off-ribbon {
  opacity: 0.8;
}

body.dark .off-ribbon {
  opacity: 0.5;
}

.off-ribbon-seg {
  border-radius: 2px;
}

body.light .off-ribbon-seg {
  background: #e5e7eb;
}

body.dark .off-ribbon-seg {
  background: #334155;
}

body.light .off-ribbon-seg.is-work {
  background: #93c5fd;
}

body.dark .off-ribbon-seg.is-work {
  background: #14b8a6;
}

/* === Ruban semaines (en-tête Sxx) === */
.week-header-content {
  position: relative;
  z-index: 2;
  --week-ghost-w: 70px;
  --week-ghost-h: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding-bottom: 14px;
}

.week-header-badge-ghost {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--week-ghost-w);
  height: var(--week-ghost-h);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
}

#weeks-header th {
  vertical-align: top;
}

#weeks-header .semaine-link {
  width: auto;
  min-height: 0;
  padding: 0.1rem 0.35rem;
}

.week-off-ribbon {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: calc(var(--week-ghost-w) - 12px);
  height: 6px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 1920px) {
  .week-header-content {
    --week-ghost-w: 56px;
    --week-ghost-h: 24px;
  }
}

.week-off-ribbon-seg {
  border-radius: 2px;
}

body.light .week-off-ribbon {
  opacity: 0.8;
}

body.dark .week-off-ribbon {
  opacity: 0.5;
}

body.light .week-off-ribbon-seg {
  background: #9ca3af;
}

body.dark .week-off-ribbon-seg {
  background: #64748b;
}

body.light .week-off-ribbon-seg.is-school-break {
  background: #2563eb;
}

body.dark .week-off-ribbon-seg.is-school-break {
  background: #93c5fd;
}

body.light .week-off-ribbon-seg.is-holiday {
  background: #7e22ce;
}

body.dark .week-off-ribbon-seg.is-holiday {
  background: #c084fc;
}

/* (Optionnel) Pas d’effet hover sur la colonne gauche */
#table-body-semestrielle td.colonne-gauche:hover {
  background-color: transparent;
  cursor: default;
}

/* Lignes de séparation entre blocs (agents/chef/techniques) */
#table-body-semestrielle tr.separation-row td {
  pointer-events: none;
  background: none !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* Première cellule des lignes de séparation, fond neutre */
body.light #table-body-semestrielle tr.separation-row td:first-child {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
  color: inherit;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

body.dark #table-body-semestrielle tr.separation-row td:first-child {
  background: #1f2937 !important;
  background-color: #1f2937 !important;
  color: inherit;
}

body.light #table-body-semestrielle tr.separation-row td {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
}

body.dark #table-body-semestrielle tr.separation-row td {
  background: #1f2937 !important;
  background-color: #1f2937 !important;
}

#table-body-semestrielle tr.separation-row td:last-child {
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

body.light #table-body-semestrielle tr.separation-row:hover,
body.light #table-body-semestrielle tr.separation-row td:hover {
  background-color: #f5f5f5 !important;
}

body.dark #table-body-semestrielle tr.separation-row:hover,
body.dark #table-body-semestrielle tr.separation-row td:hover {
  background-color: #1f2937 !important;
}

/* Padding, alignement général des cellules */
#table-body-semestrielle td {
  padding: 0.55rem 0.2rem;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  line-height: 1.4;
}

#weeks-header th {
  padding: 0.55rem 0.2rem;
  vertical-align: top;
  text-align: center;
  white-space: nowrap;
  line-height: 1.4;
}
#table-body-semestrielle td:first-child {
  white-space: normal;
  word-break: keep-all;
  text-align: center;
}

#table-body-semestrielle td.colonne-gauche {
  vertical-align: middle;
}

#table-body-semestrielle td.colonne-gauche .colonne-gauche-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  height: 100%;
}

/* Sticky header */
.table-frame .thead-semestrielle-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Ligne supérieure du cadre au-dessus des mois/semaines, sans bloquer les interactions */
.table-frame .thead-semestrielle-sticky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--table-grid-color, #d1d5db); /* light par défaut */
  pointer-events: none;
  z-index: 8; /* sous les tooltips (z=10) pour qu'elles passent au-dessus */
}

/* Bordures verticales visibles sur les côtés du header (mois+semaines) */
.table-frame .thead-semestrielle-sticky {
  border-left: 1px solid var(--table-grid-color, #d1d5db);
  border-right: 1px solid var(--table-grid-color, #d1d5db);
}

body.light .table-frame .thead-semestrielle-sticky {
  background-color: #f9fafb;
  color: #1f2937;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

body.dark .table-frame .thead-semestrielle-sticky {
  background-color: #1f2937;
  color: #f9fafb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.filtre-btn {
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
  text-transform: uppercase;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  width: auto;
  text-align: center;
}

.filtre-btn-inactif {
  background-color: #4b5563; /* gray-700 */
  color: #f3f4f6;
}

.filtre-btn-inactif:hover {
  background-color: #6b7280; /* gray-500 */
  transform: scale(1.02);
}

.filtre-btn-actif {
  background-color: #60a5fa; /* indigo-500 */
  color: white;
  transform: scale(1.02);
}

:root {
  --planning-nav-gap: 0.5rem;
  --planning-section-btn-width: 6rem;
  --planning-semestre-btn-width: 8.5rem;
  --planning-week-btn-width: 13.5rem;
}

.filtre-groupe-section {
  display: flex;
  justify-content: center;
  gap: var(--planning-nav-gap);
  width: fit-content;
}
.filtre-groupe-section .filtre-btn {
  width: var(--planning-section-btn-width);
}

.filtre-groupe-semestre {
  display: flex;
  justify-content: center;
  gap: var(--planning-nav-gap);
  width: fit-content;
  margin-bottom: 0;
}
.filtre-groupe-semestre .filtre-btn {
  width: var(--planning-semestre-btn-width);
}

.semestre-nav-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.week-quota-alert,
.week-quota-alert a {
  color: #ea580c !important;
}

body.dark .week-quota-alert,
body.dark .week-quota-alert a {
  color: #fb923c !important;
}

/* Semaine courante + quota KO: fond distinct pour lisibilité */
body.light .week-quota-alert .current-week {
  background-color: #f59e0b;
  color: #1f2937 !important;
}

body.dark .week-quota-alert .current-week {
  background-color: #f97316;
  color: #111827 !important;
}

.select-annee {
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.25rem;
  border-radius: 0.3rem;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  text-align: left;
  min-width: 6rem;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  box-sizing: border-box;
  line-height: 1.2;
  font-family: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23334155' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 7 L10 12 L15 7'/%3E%3C/svg%3E");
}

/* Light mode */
body.light .select-annee {
  /*background-color: #ffffff;
  color: #334155;*/
  background-color: #e5e7eb; /* gris clair */
  color: #1f2937;
  border: 1px solid #cbd5e1;
}

body.light .select-annee:hover {
  border-color: #60a5fa; /* bleu clair vif (blue-400) */
  /* pas de box-shadow */
}

body.light .select-annee:focus {
  outline: none;
}

/* Dark mode */
body.dark .select-annee {
  background-color: #4b5563;
  color: #e5e7eb;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7 L10 12 L15 7'/%3E%3C/svg%3E");
}

body.dark .select-annee:hover {
  /*background-color: #6b7280; /* gray-500 */
  /*transform: scale(1.02);*/
  border: 1px solid #6b7280;
  /*border-color: white;*/
  /* box-shadow retiré */
}

body.dark .select-annee:focus {
  outline: none;
}

/* === filtre-btn-inactif light mode === */
body.light .filtre-btn-inactif {
  background-color: #e5e7eb; /* gris clair */
  color: #1f2937; /* gris foncé */
  box-shadow: none;
}

body.light .filtre-btn-inactif:hover {
  background-color: #d1d5db; /* gris moyen */
  color: #111827;
  cursor: pointer;
}

/* === filtre-btn-actif light mode === */
body.light .filtre-btn-actif {
  background-color: #3b82f6; /* bleu vif (blue-600) */
  color: white;
}

body.light .filtre-btn-actif:hover {
  background-color: #1d4ed8; /* bleu foncé (blue-700) */
  cursor: pointer;
}
/* Style par défaut au chargement (évite flash de style) */
.filtre-btn,
.select-annee {
  opacity: 0; /* cache les boutons avant application du thème */
  transition: opacity 0.3s ease;
}

/* Quand le thème est appliqué, on affiche sans délai */
body.light .filtre-btn,
body.light .select-annee,
html.light .filtre-btn,
html.light .select-annee,
body.dark .filtre-btn,
body.dark .select-annee,
html.dark .filtre-btn,
html.dark .select-annee {
  opacity: 1;
}

#titre-semestrielle {
  font-size: 2rem;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #3730a3; /* couleur par défaut pour light mode */
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* Quand le document est prêt, ajoute une classe pour faire apparaître le titre */
body.ready #titre-semestrielle {
  opacity: 1;
}

/* Dark mode */
body.dark #titre-semestrielle {
  color: #d1d5db;
  /* Pas besoin d’ombre ici pour éviter le flash */
}

body.light #titre-semestrielle {
  color: #2563eb; /* indigo-600, plus clair que #3730a3 */
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Barre sous le titre, toujours visible */
/* Light mode */
body.light #titre-semestrielle::after {
  content: "";
  display: block;
  width: 240px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: linear-gradient(270deg, #3b82f6, #60a5fa, #3b82f6);
  background-size: 200% 200%;
  animation: gradientShift 3s linear infinite;
}

/* Dark mode */
body.dark #titre-semestrielle::after {
  content: "";
  display: block;
  width: 240px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: linear-gradient(270deg, #d1d5db, #9ca3af, #d1d5db);
  background-size: 200% 200%;
  animation: gradientShift 3s linear infinite;
}

#titre-semaine {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.75rem;
  font-family: "Inter", sans-serif;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #3730a3;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

body.ready #titre-semaine {
  opacity: 1;
}

body.dark #titre-semaine {
  color: #d1d5db;
}

body.light #titre-semaine {
  color: #2563eb;
}

body.light #titre-semaine::after {
  content: "";
  display: block;
  width: 200px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: linear-gradient(270deg, #3b82f6, #60a5fa, #3b82f6);
  background-size: 200% 200%;
  animation: gradientShift 3s linear infinite;
}

body.dark #titre-semaine::after {
  content: "";
  display: block;
  width: 200px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: linear-gradient(270deg, #d1d5db, #9ca3af, #d1d5db);
  background-size: 200% 200%;
  animation: gradientShift 3s linear infinite;
}

.btn-dashboard {
  display: block;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 0.5rem auto;
  width: 100%;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Variante inline pour les petits boutons (retour, liens...) */
.btn-dashboard-inline {
  display: inline-flex;
  width: auto;
  margin: 0;
}

body.light .btn-dashboard {
  background-color: #0ea5e9; /* bleu clair */
}

body.light .btn-dashboard:hover {
  background-color: #0284c7; /* bleu foncé */
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(14, 165, 233, 0.4);
}

body.dark .btn-dashboard {
  background-color: #3b82f6; /* blue-800 */
}

body.dark .btn-dashboard:hover {
  background-color: #1d4ed8; /* blue-900 */
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(30, 64, 175, 0.4);
}

/* Nexus only: violet back-to-dashboard in dark mode */
body.nexus-page.dark header .btn-dashboard {
  background-color: #7c3aed; /* violet-600 */
}
body.nexus-page.dark header .btn-dashboard:hover {
  background-color: #6d28d9; /* violet-700 */
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.4);
}

/* Ensure back-to-dashboard button text/icon stay white in Nexus page */
body.nexus-page.light .btn-dashboard span,
body.nexus-page.dark .btn-dashboard span {
  color: inherit !important; /* override global span color on nexus page */
}
body.nexus-page.light .btn-dashboard svg,
body.nexus-page.dark .btn-dashboard svg {
  color: inherit;
  stroke: currentColor; /* lucide icons */
}

.title-accueil {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}

@media (min-width: 640px) {
  .title-accueil {
    font-size: 3rem;
  }
}

body.light .title-accueil {
  color: #1e40af; /* blue-800 */
}

body.dark .title-accueil {
  color: #d1d5db;
}

.bienvenue-texte {
  font-size: 1.25rem; /* text-lg */
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}

@media (min-width: 640px) {
  .bienvenue-texte {
    font-size: 1.25rem; /* text-xl */
  }
}

body.light .bienvenue-texte {
  color: #2563eb; /* blue-600 */
}

body.dark .bienvenue-texte {
  color: #60a5fa; /* blue-400 */
}

/* --- Navigation hebdomadaire --- */
.hebdo-nav-group {
  display: flex;
  justify-content: center;
  gap: var(--planning-nav-gap);
  width: fit-content;
  margin-inline: auto;
}
.hebdo-nav-group .filtre-btn {
  width: var(--planning-section-btn-width);
}

#week-group {
  gap: var(--planning-nav-gap);
  width: fit-content;
  margin-inline: auto;
}

#week-group #btn-prev,
#week-group #btn-next {
  width: var(--planning-week-btn-width);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* === Drag & drop badges === */
.badge-agent.dragging {
  cursor: grabbing;
}

.badge-agent.dragging::after {
  display: none !important;
}

body.dragging {
  cursor: grabbing;
}

/* --- Nexus page themes --- */
body.nexus-page.light {
  /* Gentle white→blue gradient to mirror dark theme */
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e0f2ff 35%,
    #bfdbfe 70%,
    #93c5fd 100%
  );
  color: #1f2937;
}

body.nexus-page.dark {
  background: linear-gradient(135deg, #000000, #1f2937, #4c1d95);
  color: #e5e7eb;
}

body.nexus-page.light h2,
body.nexus-page.light h3,
body.nexus-page.light h4 {
  color: #1e3a8a;
}
/* Nexus title in light theme: blue text, no gradient banner */
body.nexus-page.light h1 {
  color: #1e40af;
}
body.nexus-page.light h1.bg-gradient-to-r {
  background: transparent !important;
}

body.nexus-page.dark h2,
body.nexus-page.dark h3,
body.nexus-page.dark h4 {
  color: #c4b5fd;
}

body.nexus-page.light p,
body.nexus-page.light div,
body.nexus-page.light span,
body.nexus-page.light li {
  color: #1f2937;
}

body.nexus-page.dark p,
body.nexus-page.dark div,
body.nexus-page.dark span,
body.nexus-page.dark li {
  color: #e5e7eb;
}

/* Nexus header chips (light): soft blue tone */
body.nexus-page.light header .bg-white\/60 {
  background-color: rgba(59, 130, 246, 0.1) !important; /* light blue tint */
  border-color: #bfdbfe !important; /* blue-200 */
  color: #1e3a8a !important; /* blue-800 text */
}

/* Nexus content cards (light): white with blue border */
body.nexus-page.light main section.bg-white\/60,
body.nexus-page.light main .bg-white\/60.rounded-xl {
  background-color: #ffffff !important;
  border-color: #bfdbfe !important; /* blue-200 */
}

/* Match the page background so canvas trails blend over the gradient */
body.nexus-page.light #matrix-bg {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e0f2ff 35%,
    #bfdbfe 70%,
    #93c5fd 100%
  );
}

body.nexus-page.dark #matrix-bg {
  background-color: #000000;
}

/* Fade-in helper used on main containers */
.animate-fade {
  animation: fadeInSoft 0.22s ease-out;
}
@keyframes fadeInSoft {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Surbrillance sélection utilisateur */
.utilisateur-ligne--active {
  background-color: rgba(59, 130, 246, 0.15); /* blue-500/15 */
}
html.dark .utilisateur-ligne--active {
  background-color: rgba(99, 102, 241, 0.25); /* indigo-500/25 */
}

/* Surbrillance d'un agent en hebdo */
.highlight-agent-span {
  /* Pas de box-shadow/transform permanent: uniquement pendant l'animation */
  animation: pulseGlow 900ms ease-in-out 3;
}
html.dark .highlight-agent-span {
  /* Utiliser la variante sombre de l'animation en conservant durée/iterations */
  animation-name: pulseGlowDark;
}

@keyframes pulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.6),
      0 0 8px rgba(59, 130, 246, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.9),
      0 0 26px rgba(59, 130, 246, 0.7);
  }
  100% {
    transform: scale(1.04);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.8),
      0 0 14px rgba(59, 130, 246, 0.5);
  }
}
@keyframes pulseGlowDark {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.68),
      0 0 10px rgba(34, 211, 238, 0.56);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.98),
      0 0 30px rgba(34, 211, 238, 0.82);
  }
  100% {
    transform: scale(1.04);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.9),
      0 0 16px rgba(34, 211, 238, 0.68);
  }
}

/* Tailles fixes des cellules semestrielles */
#table-body-semestrielle td {
  height: 56px;
  min-height: 56px;
  vertical-align: middle;
}
#table-body-semestrielle td .maintenance-text {
  /* limiter empilement visuel */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#table-body-semestrielle td .maintenance-token {
  max-width: 100%;
}

/* Vue semestrielle: version compacte pour écrans Full HD et inférieurs */
@media (max-width: 1920px) {
  body.semestrielle-page .table-frame .table-main {
    font-size: 0.7rem;
  }
  body.semestrielle-page #weeks-header th,
  body.semestrielle-page #table-body-semestrielle td {
    padding: 0.44rem 0.16rem;
    line-height: 1.25;
  }
  body.semestrielle-page #weeks-header th,
  body.semestrielle-page #table-body-semestrielle td:first-child {
    padding: 0.6rem 0.8rem;
    font-size: 0.7rem;
  }
  body.semestrielle-page #table-body-semestrielle td {
    height: 45px;
    min-height: 45px;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-stack {
    min-height: 100%;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-slot {
    min-height: 12px;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-token {
    padding: 2px 5px 2px 9px;
    font-size: 0.6rem;
    border-radius: 6px;
    min-height: 12px;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-token.start {
    border-radius: 6px 0 0 6px;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-token.mid {
    border-radius: 0;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-token.end {
    border-radius: 0 6px 6px 0;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-token.single {
    border-radius: 6px;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-token.has-label::before {
    left: 3px;
    top: 2px;
    bottom: 2px;
    width: 2px;
  }
  body.semestrielle-page #table-body-semestrielle td .maintenance-token:not(.has-label) {
    padding-left: 5px;
  }
  body.semestrielle-page .months-header th {
    font-size: 0.56rem;
    padding: 0.2rem 0.4rem;
  }
  body.semestrielle-page #weeks-header .semaine-link {
    min-height: 1.3rem;
  }
  body.semestrielle-page #table-body-semestrielle .badge-semestriel,
  body.semestrielle-page #table-body-semestrielle .badge-jour-ferie {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 24px;
    padding: 0 0.25rem;
    font-size: 0.65rem;
    border-radius: 6px;
  }
  body.semestrielle-page #table-body-semestrielle .badge-semestriel .icon,
  body.semestrielle-page #table-body-semestrielle .badge-jour-ferie .icon {
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }
  body.semestrielle-page #table-body-semestrielle .badge-semestriel-ms .icon,
  body.semestrielle-page #table-body-semestrielle .badge-semestriel-stage .icon,
  body.semestrielle-page #table-body-semestrielle .badge-semestriel-mo .icon {
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }
}

/* Demandes: cartes en dark comme Formation */
body.dark .demande-card {
  background-color: #1f2937 !important; /* gray-800 */
  border-color: #374151 !important; /* gray-700 */
}

/* Demandes: forcer le rendu light si le thème est light */
body.light .demande-card {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important; /* gray-200 */
  color: #111827; /* gray-900 */
}

body.light #btn-new {
  background-color: #60a5fa !important; /* même bleu que popup-btn-blue */
  color: #fff !important;
}
body.light #btn-new:hover {
  background-color: #2563eb !important; /* blue-600 */
}

/* Demandes: surfaces claires des nouveaux formulaires (light only) */
body.light .request-soft-surface {
  background-color: #eef5ff !important;
  border-color: #c7dbff !important;
}

/* Demandes: légendes calendriers (light only, verrouillé contre overrides utilitaires) */
body.light .legend-selection,
body.light .legend-day-moved,
body.light .legend-day-target {
  background-color: #ffffff !important;
  color: #000000 !important;
}
body.light .legend-selection {
  border-color: #0ea5e9 !important;
}
body.light .legend-day-moved {
  border-color: #6366f1 !important;
}
body.light .legend-day-target {
  border-color: #f59e0b !important;
}
body.light .legend-rest {
  background-color: #bfdbfe !important;
  color: #1e3a8a !important;
  border-color: #60a5fa !important;
}
body.light .legend-mo-wanted {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ef4444 !important;
}

.semaine-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.6rem;
}

#weeks-header .semaine-link {
  padding: 0.1rem 0.25rem;
}

body.light .current-week,
body.dark .current-week {
  padding: 0.15rem 0.35rem;
}

/* Vue semestrielle: stabilisation d'échelle (évite les sauts selon le zoom navigateur). */
body.semestrielle-page {
  --sem-ui-scale: 1;
  --sem-left-col-w: calc(7rem * var(--sem-ui-scale));
  --sem-week-col-w: calc(2.25rem * var(--sem-ui-scale));
  --sem-table-font: calc(0.7rem * var(--sem-ui-scale));
  --sem-cell-pad-y: calc(0.44rem * var(--sem-ui-scale));
  --sem-cell-pad-x: calc(0.16rem * var(--sem-ui-scale));
  --sem-left-pad-y: calc(0.6rem * var(--sem-ui-scale));
  --sem-left-pad-x: calc(0.8rem * var(--sem-ui-scale));
  --sem-cell-h: calc(45px * var(--sem-ui-scale));
  --sem-month-font: calc(0.56rem * var(--sem-ui-scale));
  --sem-month-pad-y: calc(0.2rem * var(--sem-ui-scale));
  --sem-month-pad-x: calc(0.4rem * var(--sem-ui-scale));
  --sem-week-link-min-h: calc(1.3rem * var(--sem-ui-scale));
  --sem-week-ghost-w: calc(56px * var(--sem-ui-scale));
  --sem-week-ghost-h: calc(24px * var(--sem-ui-scale));
  --sem-ribbon-inset: calc(12px * var(--sem-ui-scale));
  --sem-badge-w: calc(56px * var(--sem-ui-scale));
  --sem-badge-h: calc(24px * var(--sem-ui-scale));
  --sem-badge-font: calc(0.65rem * var(--sem-ui-scale));
  --sem-badge-radius: calc(6px * var(--sem-ui-scale));
  --sem-icon-size: calc(14px * var(--sem-ui-scale));
  --sem-icon-gap: calc(3px * var(--sem-ui-scale));
  --sem-maint-h: calc(12px * var(--sem-ui-scale));
  --sem-maint-gap: calc(2px * var(--sem-ui-scale));
  --sem-maint-font: calc(0.6rem * var(--sem-ui-scale));
  --sem-maint-pad-r: calc(5px * var(--sem-ui-scale));
  --sem-maint-pad-l: calc(9px * var(--sem-ui-scale));
  --sem-maint-radius: calc(6px * var(--sem-ui-scale));
  --sem-maint-accent-left: calc(3px * var(--sem-ui-scale));
  --sem-maint-accent-top: calc(2px * var(--sem-ui-scale));
  --sem-maint-accent-w: calc(2px * var(--sem-ui-scale));
}

/* Grand écran QHD 27" (≈2560px): agrandir davantage sans impacter FHD/écrans serrés */
@media (min-width: 2450px) and (max-width: 2699px) {
  body.semestrielle-page {
    --sem-ui-scale: 1.30;
  }
}

/* Large écran intermédiaire: léger confort */
@media (min-width: 2200px) and (max-width: 2449px) {
  body.semestrielle-page {
    --sem-ui-scale: 1.08;
  }
}

/* Ecrans "serrés" (ex: 2K sur petite diagonale / scaling OS) */
@media (max-width: 1800px) {
  body.semestrielle-page {
    --sem-ui-scale: 0.92;
  }
}

@media (max-width: 1650px) {
  body.semestrielle-page {
    --sem-ui-scale: 0.86;
  }
}

@media (max-width: 1500px) {
  body.semestrielle-page {
    --sem-ui-scale: 0.8;
  }
}

body.semestrielle-page .week-header-content {
  --week-ghost-w: var(--sem-week-ghost-w);
  --week-ghost-h: var(--sem-week-ghost-h);
}

body.semestrielle-page .week-off-ribbon {
  width: calc(var(--week-ghost-w) - var(--sem-ribbon-inset));
}

body.semestrielle-page .table-frame .table-main {
  font-size: var(--sem-table-font);
}

body.semestrielle-page #weeks-header th,
body.semestrielle-page #table-body-semestrielle td {
  padding: var(--sem-cell-pad-y) var(--sem-cell-pad-x);
  line-height: 1.25;
}

body.semestrielle-page #weeks-header th,
body.semestrielle-page #table-body-semestrielle td:first-child {
  padding: var(--sem-left-pad-y) var(--sem-left-pad-x);
  font-size: var(--sem-table-font);
}

body.semestrielle-page #weeks-header > th:first-child,
body.semestrielle-page #months-header > th:first-child,
body.semestrielle-page #table-body-semestrielle td:first-child {
  width: var(--sem-left-col-w);
  min-width: var(--sem-left-col-w);
  max-width: var(--sem-left-col-w);
}

body.semestrielle-page #weeks-header th[data-week],
body.semestrielle-page #table-body-semestrielle td[data-semaine] {
  width: var(--sem-week-col-w);
  min-width: var(--sem-week-col-w);
}

body.semestrielle-page #table-body-semestrielle td {
  height: var(--sem-cell-h);
  min-height: var(--sem-cell-h);
}

body.semestrielle-page #table-body-semestrielle td .maintenance-stack {
  --maintenance-lane-h: var(--sem-maint-h);
  --maintenance-lane-gap: var(--sem-maint-gap);
  height: calc((var(--maintenance-lane-h) * 2) + var(--maintenance-lane-gap));
  min-height: calc((var(--maintenance-lane-h) * 2) + var(--maintenance-lane-gap));
}

body.semestrielle-page #table-body-semestrielle td .maintenance-slot {
  height: var(--maintenance-lane-h);
  min-height: var(--maintenance-lane-h);
  flex: 0 0 var(--maintenance-lane-h);
}

body.semestrielle-page #table-body-semestrielle td .maintenance-token {
  padding: 0 var(--sem-maint-pad-r) 0 var(--sem-maint-pad-l);
  font-size: var(--sem-maint-font);
  border-radius: var(--sem-maint-radius);
  height: var(--maintenance-lane-h);
  min-height: var(--maintenance-lane-h);
  flex: 0 0 var(--maintenance-lane-h);
  line-height: 1;
}

body.semestrielle-page #table-body-semestrielle td .maintenance-token.start {
  border-radius: var(--sem-maint-radius) 0 0 var(--sem-maint-radius);
}

body.semestrielle-page #table-body-semestrielle td .maintenance-token.mid {
  border-radius: 0;
}

body.semestrielle-page #table-body-semestrielle td .maintenance-token.end {
  border-radius: 0 var(--sem-maint-radius) var(--sem-maint-radius) 0;
}

body.semestrielle-page #table-body-semestrielle td .maintenance-token.single {
  border-radius: var(--sem-maint-radius);
}

body.semestrielle-page #table-body-semestrielle td .maintenance-token.has-label::before {
  left: var(--sem-maint-accent-left);
  top: var(--sem-maint-accent-top);
  bottom: var(--sem-maint-accent-top);
  width: var(--sem-maint-accent-w);
}

body.semestrielle-page #table-body-semestrielle td .maintenance-token:not(.has-label) {
  padding-left: var(--sem-maint-pad-r);
}

body.semestrielle-page .months-header th {
  font-size: var(--sem-month-font);
  padding: var(--sem-month-pad-y) var(--sem-month-pad-x);
}

body.semestrielle-page #weeks-header .semaine-link {
  min-height: var(--sem-week-link-min-h);
}

body.semestrielle-page #table-body-semestrielle .badge-semestriel,
body.semestrielle-page #table-body-semestrielle .badge-jour-ferie {
  width: var(--sem-badge-w);
  min-width: var(--sem-badge-w);
  max-width: var(--sem-badge-w);
  height: var(--sem-badge-h);
  font-size: var(--sem-badge-font);
  border-radius: var(--sem-badge-radius);
}

body.semestrielle-page #table-body-semestrielle .badge-semestriel .icon,
body.semestrielle-page #table-body-semestrielle .badge-jour-ferie .icon {
  width: var(--sem-icon-size);
  height: var(--sem-icon-size);
  margin-right: var(--sem-icon-gap);
}

body.semestrielle-page #table-body-semestrielle .badge-semestriel-ms .icon,
body.semestrielle-page #table-body-semestrielle .badge-semestriel-stage .icon,
body.semestrielle-page #table-body-semestrielle .badge-semestriel-mo .icon {
  width: var(--sem-icon-size);
  height: var(--sem-icon-size);
  margin-right: var(--sem-icon-gap);
}

body.semestrielle-page #table-body-semestrielle .badge-programme-tag {
  top: calc(-6px * var(--sem-ui-scale));
  right: calc(-6px * var(--sem-ui-scale));
  min-width: calc(16px * var(--sem-ui-scale));
  height: calc(16px * var(--sem-ui-scale));
  padding: 0 calc(4px * var(--sem-ui-scale));
  font-size: calc(0.65rem * var(--sem-ui-scale));
  border-width: calc(2px * var(--sem-ui-scale));
}