/*
 * Habillage commun de l'administration.
 *
 * Chargée APRÈS admin_style_css.css : cette feuille ne remplace pas le thème,
 * elle en harmonise les éléments répétés d'une page à l'autre — cartes,
 * tableaux, boutons d'action, badges, formulaires — pour que toutes les listes
 * se ressemblent et se lisent de la même façon.
 *
 * Aucune règle ne touche à la mise en page générale (barre latérale, en-tête) :
 * la portée est volontairement limitée au contenu des pages.
 */

:root {
  --adm-texte: #101828;
  --adm-texte-doux: #667085;
  --adm-bord: #eaedf1;
  --adm-fond: #f7f8fa;
  --adm-primaire: #1f5793;
  --adm-rayon: 12px;
}

/* ---------------------------------------------------------------- Cartes */

#main .card {
  border: 1px solid var(--adm-bord);
  border-radius: var(--adm-rayon);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

#main .card-title {
  color: var(--adm-texte);
  font-size: 1.05rem;
  font-weight: 600;
  padding-bottom: 6px;
}

.pagetitle h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--adm-texte);
}

/* -------------------------------------------------------------- Tableaux */

#main .table {
  --bs-table-hover-bg: #f4f7fb;
  font-size: .9rem;
  color: var(--adm-texte);
}

#main .table > thead > tr > th {
  background: var(--adm-fond);
  color: var(--adm-texte-doux);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--adm-bord);
  vertical-align: middle;
}

/* La ligne de filtres ne doit pas hériter du style d'en-tête. */
#main .table > thead > tr.ligne-filtres > th {
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
  padding-top: 6px;
  padding-bottom: 10px;
}

#main .table > tbody > tr > td {
  border-bottom: 1px solid #f2f4f7;
  vertical-align: middle;
}

#main .table > tbody > tr:last-child > td { border-bottom: 0; }

/* Vignettes dans les listes : toutes à la même taille, jamais déformées. */
#main .table td img {
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--adm-bord);
  background: var(--adm-fond);
}

/* ------------------------------------------------------- Boutons d'action */

.btn-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--adm-bord);
  background: #fff;
  color: var(--adm-texte-doux);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  margin-right: 4px;
}

.btn-actions:hover {
  background: var(--adm-fond);
  color: var(--adm-primaire);
  border-color: #d6dde6;
}

.btn-actions.danger:hover { color: #d92d20; border-color: #fecdc9; background: #fef3f2; }
.btn-actions.info:hover   { color: #1565d8; border-color: #b2ddff; background: #eff8ff; }

/* ---------------------------------------------------------- Pagination DT */

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--adm-primaire) !important;
  border-color: var(--adm-primaire) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--adm-fond) !important;
  border-color: var(--adm-bord) !important;
  color: var(--adm-texte) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--adm-bord);
  border-radius: 8px;
  padding: 5px 10px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color: var(--adm-texte-doux);
  font-size: .85rem;
  padding-top: 8px;
}

/* ---------------------------------------------------------- Formulaires */

#main .form-control,
#main .form-select {
  border: 1px solid var(--adm-bord);
  border-radius: 8px;
}

#main .form-control:focus,
#main .form-select:focus {
  border-color: #9dbde0;
  box-shadow: 0 0 0 3px rgba(31, 87, 147, .12);
}

#main .form-label { font-weight: 600; font-size: .875rem; color: var(--adm-texte); }
#main .form-text  { color: var(--adm-texte-doux); font-size: .8rem; }

/* -------------------------------------------------------------- Divers */

#main .badge { font-weight: 600; letter-spacing: .01em; }
#main .badge.bg-light { color: var(--adm-texte); border: 1px solid var(--adm-bord); }

/* Le tableau reste lisible sur petit écran : il défile au lieu de déborder. */
@media (max-width: 768px) {
  #main .table-responsive { -webkit-overflow-scrolling: touch; }
  .pagetitle h1 { font-size: 1.3rem; }
}

/* ==================================================================
   Navigation : barre latérale et en-tête
   ==================================================================
   Le thème d'origine laissait les entrées peu contrastées, sans marque
   claire de la page courante, et les rubriques se distinguaient mal des
   liens. On resserre la hiérarchie sans changer la structure.
*/

.sidebar {
  background: #fff;
  border-right: 1px solid var(--adm-bord);
}

.sidebar-nav .nav-heading {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #98a2b3;
  padding: 18px 15px 6px;
  margin: 0;
}

.sidebar-nav .nav-item { margin-bottom: 2px; }

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: .9rem;
  font-weight: 500;
  color: #475467;
  background: transparent;
  transition: background .14s ease, color .14s ease;
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link .bx {
  font-size: 1.15rem;
  color: #98a2b3;
  transition: color .14s ease;
}

.sidebar-nav .nav-link:hover {
  background: var(--adm-fond);
  color: var(--adm-primaire);
}

.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link:hover .bx { color: var(--adm-primaire); }

/* Page courante : le thème ne marquait que par la couleur du texte. */
.sidebar-nav .nav-link:not(.collapsed) {
  background: #eaf1fa;
  color: var(--adm-primaire);
  font-weight: 600;
}

.sidebar-nav .nav-link:not(.collapsed) i,
.sidebar-nav .nav-link:not(.collapsed) .bx { color: var(--adm-primaire); }

/* Sous-menus : repère visuel de l'imbrication. */
.sidebar-nav .nav-content {
  margin: 2px 0 4px 22px;
  padding-left: 10px;
  border-left: 2px solid #eaedf1;
}

.sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: .85rem;
  color: #667085;
}

.sidebar-nav .nav-content a:hover { background: var(--adm-fond); color: var(--adm-primaire); }

.sidebar-nav .nav-content a.active {
  background: #eaf1fa;
  color: var(--adm-primaire);
  font-weight: 600;
}

.sidebar-nav .nav-content a i { font-size: .5rem; color: #cbd5e1; }
.sidebar-nav .nav-content a.active i { color: var(--adm-primaire); }

/* En-tête */
.header {
  background: #fff;
  border-bottom: 1px solid var(--adm-bord);
  box-shadow: none;
}

.header .logo span { font-weight: 700; color: var(--adm-texte); }

.header-nav .nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667085;
}

.header-nav .nav-icon:hover { background: var(--adm-fond); color: var(--adm-primaire); }

/* Les pastilles de compteur débordaient de leur icône. */
.header-nav .badge-number {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: .65rem;
  font-weight: 700;
  line-height: 18px;
  border-radius: 20px;
  background: #d92d20;
  color: #fff;
  text-align: center;
}

.header-nav .nav-profile { color: var(--adm-texte); font-weight: 600; }
.header-nav .nav-profile img { width: 34px; height: 34px; object-fit: cover; }

.header-nav .dropdown-menu {
  border: 1px solid var(--adm-bord);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .12);
  padding: 6px;
}

.header-nav .dropdown-header { font-weight: 600; color: var(--adm-texte); }
.header-nav .dropdown-item { border-radius: 8px; font-size: .88rem; }

/* Le sélecteur d'année se fondait dans l'en-tête. */
#annee-select {
  border: 1px solid var(--adm-bord);
  border-radius: 9px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--adm-texte);
  padding: 6px 10px;
  min-width: 130px;
}

@media (max-width: 1199px) {
  .header-nav .nav-profile span { display: none; }
}

/* ==========================================================================
 * Identité ENSAM dans l'administration
 *
 * L'administration et la page de connexion ne se ressemblaient pas : cyan et
 * bleu marine d'un côté, bleu nuit et or de l'autre. Cette section reprend la
 * palette et la trame de zellige de la connexion, pour que le passage de l'une
 * à l'autre ne donne pas l'impression de changer d'application.
 *
 * La trame est dessinée en SVG et répétée par le navigateur : aucune image à
 * télécharger, et elle reste nette à toutes les résolutions. C'est le même
 * motif que sur la connexion — la khatem, étoile à huit branches, tracée au
 * trait.
 * ========================================================================== */

:root {
  --adm-nuit: #12233a;
  --adm-or: #c8a04a;
}

/* ------------------------------------------- Bandeau de titre au zellige */

/* Présent sur chaque page de l'administration, c'est le porteur naturel de
   l'identité : le motif y est décoratif, jamais derrière du texte dense. */
.pagetitle {
  position: relative;
  overflow: hidden;
  background: var(--adm-nuit);
  border-radius: var(--adm-rayon);
  padding: 20px 24px;
  margin-bottom: 20px;
  color: #fff;
}

.pagetitle::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c8a04a' stroke-width='1.15'%3E%3Cpath d='M60 6 L74 32 L102 32 L82 52 L92 80 L60 64 L28 80 L38 52 L18 32 L46 32 Z'/%3E%3Cpath d='M60 22 L68 38 L86 38 L72 50 L78 68 L60 58 L42 68 L48 50 L34 38 L52 38 Z'/%3E%3Cpath d='M0 60 L18 60 M102 60 L120 60 M60 92 L60 120'/%3E%3Ccircle cx='60' cy='47' r='6'/%3E%3Cpath d='M0 0 L18 18 M120 0 L102 18 M0 120 L18 102 M120 120 L102 102'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 108px 108px;
}

/* Halo qui éteint la trame côté texte : le titre doit rester le premier lu. */
.pagetitle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18, 35, 58, .96) 38%, rgba(18, 35, 58, .55) 100%),
              radial-gradient(ellipse at 88% 10%, rgba(31, 87, 147, .5), transparent 62%);
}

.pagetitle > * { position: relative; z-index: 1; }

.pagetitle h1 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

/* Le filet doré de la page de connexion, repris sous le titre. */
.pagetitle h1::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 9px;
  background: var(--adm-or);
  border-radius: 2px;
}

.pagetitle .text-muted { color: rgba(255, 255, 255, .68) !important; }

/* --------------------------------------------- Fil d'Ariane sur le bandeau */

.pagetitle .breadcrumb {
  background: transparent;
  margin: 10px 0 0;
  padding: 0;
  font-size: .82rem;
}

.pagetitle .breadcrumb-item,
.pagetitle .breadcrumb-item a {
  color: rgba(255, 255, 255, .66);
  text-decoration: none;
}

.pagetitle .breadcrumb-item a:hover { color: var(--adm-or); }
.pagetitle .breadcrumb-item.active { color: var(--adm-or); }
.pagetitle .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .38); }

/* ------------------------------------------------- Boutons sur le bandeau */

/* Les boutons du thème sont pensés pour un fond clair : sur le bandeau ils
   disparaissaient. */
.pagetitle .btn-outline-secondary {
  color: rgba(255, 255, 255, .82);
  border-color: rgba(255, 255, 255, .28);
  background: transparent;
}

.pagetitle .btn-outline-secondary:hover {
  color: var(--adm-nuit);
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
}

.pagetitle .btn-primary,
.pagetitle .btn-primary:hover {
  background: var(--adm-or);
  border-color: var(--adm-or);
  color: var(--adm-nuit);
  font-weight: 600;
}

.pagetitle .btn-success,
.pagetitle .btn-info,
.pagetitle .btn-secondary { border-color: transparent; }

@media (max-width: 575px) {
  .pagetitle { padding: 16px 18px; }
  .pagetitle h1 { font-size: 1.25rem; }
}

/* ------------------------------------------------------- Barre supérieure */

/* Un filet doré sépare l'en-tête du contenu, comme sur la connexion. Il est
   peint à l'intérieur : une bordure aurait rallongé l'en-tête de deux pixels,
   que le contenu, positionné sous une hauteur fixe, serait venu recouvrir. */
.header {
  box-shadow: inset 0 -2px 0 var(--adm-or), 0 1px 12px rgba(18, 35, 58, .07);
}

/* ------------------------------------------------------- Barre latérale */

/* Le thème mêlait un cyan et un bleu marine sans rapport avec la charte.
   On revient au bleu de l'école, et l'entrée courante porte le trait doré. */
.sidebar-nav .nav-heading {
  color: var(--adm-texte-doux);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.sidebar-nav .nav-link,
.sidebar-nav .nav-link i {
  color: var(--adm-primaire);
}

.sidebar-nav .nav-link {
  position: relative;
  overflow: hidden;   /* le trait doré doit épouser le coin arrondi */
  background: #eef3f9;
  font-size: .92rem;
  border-radius: 9px;
}

/* Entrée courante : le thème marque l'état par l'absence de « collapsed ». */
.sidebar-nav .nav-link:not(.collapsed)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--adm-or);
}

.sidebar-nav .nav-link.collapsed,
.sidebar-nav .nav-link.collapsed i { color: var(--adm-texte); }
.sidebar-nav .nav-link.collapsed { background: #fff; }
.sidebar-nav .nav-link.collapsed i { color: #98a2b3; }

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:hover i { color: var(--adm-primaire); background-color: #eef3f9; }

.sidebar-nav .nav-content a { color: var(--adm-texte); font-size: .87rem; }
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active { color: var(--adm-primaire); }
.sidebar-nav .nav-content a.active i { background: var(--adm-or); color: var(--adm-or); }

/* ------------------------------------------------------------- Cartes */

/* Un liseré doré en tête de carte : discret, mais il rattache chaque bloc à
   la charte sans alourdir la lecture. */
#main .card-title {
  position: relative;
  padding-left: 11px;
}

#main .card-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: var(--adm-or);
}