/*
 * Tableau de données — utilisé par start_table()/table_head()/table_td() (includes/pages.php).
 * Remplace DataTables/Bootstrap 2 table classes ; le tri/filtre/export JS
 * (quand nécessaire) s'accroche à data-ag-table sur <table>.
 */

.ag-table-wrap {
	/* hidden (plutôt que "auto") : table-layout: fixed + word-break
	 * ci-dessous garantissent déjà qu'aucune colonne ne dépasse la largeur du
	 * conteneur, donc aucun défilement horizontal n'est jamais nécessaire —
	 * "auto" ne servait qu'à absorber un dépassement fantôme (bug Chromium,
	 * voir overflow: hidden retiré des cellules ci-dessous) qui affichait une
	 * barre de défilement vide et, effet de bord, rognait les info-bulles
	 * (data-tooltip, assets/css/components/tooltip.css) des boutons-icônes
	 * des colonnes "Rapp. bancaire"/"Actions" en les faisant dépasser une
	 * cellule elle-même en overflow: hidden.
	 */
	overflow-x: hidden;
	border: 1px solid var(--ag-color-border);
	border-radius: var(--ag-radius-md);
	background: var(--ag-color-surface);
}

.ag-table {
	width: 100%;
	/* table-layout: fixed (plutôt que "auto") garantit que la largeur totale
	 * du tableau ne dépasse jamais celle de son conteneur, quel que soit le
	 * nombre de colonnes : les colonnes se partagent 100% de la largeur à
	 * parts égales (faute de largeurs explicites par colonne) et leur
	 * contenu passe à la ligne au besoin (voir word-break ci-dessous), au
	 * lieu de forcer le tableau à s'élargir et de nécessiter un défilement
	 * horizontal — important pour les tableaux à beaucoup de colonnes comme
	 * la liste des lignes comptables (comptabilite.php, 11 colonnes). */
	table-layout: fixed;
	border-collapse: collapse;
	font-size: var(--ag-font-size-sm);
}

.ag-table thead th {
	text-align: left;
	padding: var(--ag-space-3) var(--ag-space-4);
	background: var(--ag-color-bg);
	color: var(--ag-color-text-muted);
	font-weight: var(--ag-font-weight-medium);
	border-bottom: 1px solid var(--ag-color-border);
	/* Retour à la ligne autorisé (plutôt que nowrap) : avec table-layout:
	 * fixed, un en-tête trop long pour sa colonne doit passer à la ligne au
	 * lieu de forcer un dépassement horizontal du tableau. */
	white-space: normal;
	word-break: break-word;
}

.ag-table th.center,
.ag-table td.center {
	text-align: center;
}

/*
 * Correctif (découvert en portant le module École, 21/08/2026) : cette
 * classe est passée à table_td() par plusieurs pages déjà livrées (ex.
 * l'identifiant en lecture seule de treso_comptes_comptables.php, "strong
 * center") mais n'avait jamais été définie ici — même catégorie de bug que
 * .ag-btn-icon--warning (classe émise côté PHP, sans règle CSS
 * correspondante, donc sans effet visuel silencieusement). Aucune anomalie
 * signalée à ce jour sur les pages déjà livrées, mais autant corriger
 * maintenant qu'elle est nécessaire pour le module École (nom de l'élève en
 * gras, ecole_absences.php/ecole_suivi_absences.php/ecole_synthese_absences.php).
 */
.ag-table th.strong,
.ag-table td.strong {
	font-weight: var(--ag-font-weight-semibold);
}

.ag-table tbody td {
	padding: var(--ag-space-3) var(--ag-space-4);
	border-bottom: 1px solid var(--ag-color-border);
	vertical-align: middle;
	/* Voir table-layout: fixed ci-dessus : le contenu d'une cellule doit
	 * pouvoir se couper (mots longs, ex. une description sans espaces)
	 * plutôt que d'élargir la colonne au-delà de sa part fixe. */
	word-break: break-word;
	overflow-wrap: break-word;
	/* Pas d'overflow: hidden ici (retiré) : ça rognait les info-bulles
	 * (data-tooltip) des boutons-icônes qui dépassent légèrement la cellule
	 * au survol — colonnes "Rapp. bancaire"/"Actions" notamment. Le
	 * dépassement horizontal fantôme que ça compensait (certains navigateurs
	 * Chromium comptent la largeur "min-content" du mot le plus long d'une
	 * cellule dans le scrollWidth de ses ancêtres même quand le retour à la
	 * ligne ci-dessus l'empêche visuellement) est maintenant absorbé par
	 * overflow-x: hidden sur .ag-table-wrap (voir plus haut) — sans dépendre
	 * d'un overflow par cellule. */
}

.ag-table tbody tr:last-child td {
	border-bottom: none;
}

/*
 * .ag-btn impose white-space: nowrap globalement (souhaité pour un bouton
 * isolé), mais un badge de statut au libellé long placé dans une cellule
 * (ex. "Ne peut pas s'inscrire"/"Déjà inscrit(e)", activites_en_cours.php)
 * doit pouvoir s'enrouler sur plusieurs lignes en petite résolution —
 * cohérent avec le principe "jamais de défilement horizontal forcé" de
 * .ag-table-wrap/.ag-table ci-dessus, plutôt que de dépendre du
 * défilement horizontal interne du tableau pour lire le libellé complet
 * (retour utilisateur du 31/08/2026).
 */
.ag-table .ag-btn {
	white-space: normal;
	text-align: center;
}

/*
 * Ligne récapitulative ("Total") en <tfoot> (introduit sur
 * ecole_verification_absences.php, 21/08/2026 — voir le commentaire dans
 * cette page pour la raison : garder une ligne de total hors du <tbody>
 * trié/filtré par Simple-DataTables). Reprend les mêmes espacements que
 * .ag-table tbody td (le style vendoré par défaut, plus compact, ne
 * s'applique qu'aux cellules qu'il gère lui-même), avec un trait plus
 * marqué au-dessus pour la distinguer visuellement des lignes de données.
 */
.ag-table tfoot td,
.ag-table tfoot th {
	padding: var(--ag-space-3) var(--ag-space-4);
	vertical-align: middle;
	border-top: 2px solid var(--ag-color-border-strong);
}

/* Traits verticaux entre les cellules, pour un quadrillage complet et plus
 * lisible (comme le tableau "table-bordered" de la version actuelle). */
.ag-table th,
.ag-table td {
	border-right: 1px solid var(--ag-color-border);
}

.ag-table th:last-child,
.ag-table td:last-child {
	border-right: none;
}

.ag-table tbody tr:hover {
	background: var(--ag-color-bg);
}

.ag-table .th-freeze,
.ag-table .first-col,
.ag-table .second-col {
	position: sticky;
	background: var(--ag-color-surface);
}

/*
 * Décalages figeant réellement les colonnes N°/Participants pendant un
 * défilement horizontal (retour utilisateur du 23/08/2026, planner.php,
 * "permettre le scroll horizontal ... comme la version actuelle") : la
 * règle ci-dessus pose position: sticky depuis la Phase 8 (23/08/2026,
 * table_head(..., $freeze=true)), mais sans le moindre décalage top/left —
 * un élément sticky sans décalage se comporte comme un élément statique
 * (aucun effet visible), donc le "gel" de ces colonnes n'a jamais été
 * actif jusqu'ici, quel que soit le tableau. planner.php est à ce jour la
 * seule page du site qui utilise $freeze=true (voir includes/pages.php,
 * table_head()) — ces décalages ne concernent donc qu'elle.
 *
 * Repris du même principe que la version actuelle (common/theme/css/
 * style.css : .th-freeze { top:0 } / .first-col { left:0 } / .second-col
 * { left:0 }), à une différence près : .second-col y est décalée de la
 * largeur RÉELLE de la colonne N° (100px, voir table_td(..., "width:100px")
 * plus bas dans planner.php) plutôt que 0 — l'ancienne valeur (0 pour les
 * deux colonnes) les superposait exactement l'une sur l'autre, un défaut
 * resté invisible dans la version actuelle faute d'y avoir jamais activé un
 * vrai défilement horizontal borné (le tableau y déborde simplement du
 * conteneur, page entière comprise).
 *
 * z-index croissant (colonnes figées du corps < lignes d'en-tête) pour que
 * l'en-tête figé (haut de page) reste visible par-dessus les colonnes
 * gelées du corps quand les deux se chevauchent visuellement au défilement
 * vertical ; entre elles, .first-col et .second-col ne se chevauchent
 * jamais (positions horizontales disjointes), donc un même z-index suffit.
 */
.ag-table .first-col,
.ag-table .second-col {
	z-index: 2;
}

.ag-table .first-col {
	left: 0;
}

.ag-table .second-col {
	left: 100px;
}

/*
 * Retour à la ligne autorisé dans l'en-tête (retour utilisateur du
 * 23/08/2026, "le Planner est trop large, réduire les tailles des
 * colonnes... comme la version actuelle" — ex. "Samedi 02/05/2026 de 9h30
 * à 11h30" affiché sur 4 lignes : "Samedi" / "02/05/2026" / "de 9h30 à" /
 * "11h30") : .ag-table--wide impose white-space: nowrap sur ses en-têtes
 * (voir plus bas) pour les tableaux à colonnes courtes comme
 * ecole_suivi_absences.php — mais pour planner.php, dont les libellés de
 * colonne sont de longues phrases ("Samedi JJ/MM/AAAA de HHhMM à HHhMM"),
 * ce nowrap forçait chaque colonne à la largeur de la phrase entière
 * (~250px), rendant le tableau inutilement large. Comparé au CSS de la
 * version actuelle (common/theme/css/style.css) : aucune règle n'y impose
 * nowrap sur les en-têtes du tableau de réponses, qui reviennent donc
 * naturellement à la ligne aux espaces — reproduit ici via white-space:
 * normal, qui l'emporte sur la règle nowrap de .ag-table--wide grâce à
 * une spécificité plus élevée (.ag-table .th-freeze : 2 classes, contre 1
 * classe + 2 sélecteurs de type pour .ag-table--wide thead th). Scopé à
 * .th-freeze (posée par table_head(..., $freeze=true), qui ne concerne à
 * ce jour que planner.php, voir plus haut) : sans effet sur les en-têtes
 * courts d'ecole_suivi_absences.php, qui restent volontairement sur une
 * seule ligne (nowrap).
 */
.ag-table .th-freeze {
	top: 0;
	z-index: 3;
	white-space: normal;
}

/*
 * Défilement interne borné, nécessaire pour qu'un en-tête sticky fonctionne
 * réellement (retour utilisateur du 23/08/2026, "l'entête du tableau doit
 * être sticky, comme la version actuelle") : un ancêtre dont l'overflow-x
 * n'est pas "visible" (.ag-table-wrap ci-dessus, actif dès qu'un défilement
 * horizontal est possible) devient automatiquement, de par la spécification
 * CSS, le "conteneur de défilement" de référence pour tout élément
 * position: sticky qu'il contient — MAIS tant que ce conteneur n'a pas de
 * hauteur bornée, il grandit avec son contenu et n'a donc lui-même AUCUNE
 * distance de défilement propre : l'en-tête sticky (.th-freeze, top:0, voir
 * plus haut) n'a alors nulle part où "coller" et reste visuellement
 * statique quel que soit le défilement de la page. C'est exactement pour
 * cette raison que la version actuelle bornait la hauteur de son
 * conteneur de tableau (.dataTables_wrapper.no-footer { height: 800px },
 * common/theme/css/style.css) : sans hauteur bornée + défilement interne
 * propre, un en-tête sticky ne peut pas fonctionner à l'intérieur d'un
 * conteneur qui défile déjà horizontalement. Repris du même principe ici,
 * en hauteur relative au viewport plutôt qu'une valeur fixe en pixels,
 * pour rester cohérent avec le reste d'un site déjà responsive (media
 * query mobile ci-dessous notamment).
 *
 * Scopé aux tableaux à colonnes figées uniquement (:has(.th-freeze) — à ce
 * jour seul planner.php les utilise, voir includes/pages.php, table_head($
 * freeze=true)) : les autres tableaux "ag-table--wide" sans colonnes
 * figées (ex. ecole_suivi_absences.php) n'ont pas d'en-tête sticky à faire
 * fonctionner et continuent de s'étendre avec la page, comme avant.
 */
.ag-table-wrap:has(.th-freeze) {
	max-height: 70vh;
	overflow-y: auto;
}

/*
 * Modificateur (découvert en portant ecole_suivi_absences.php, 21/08/2026) :
 * pour un tableau dont le nombre de colonnes est variable et peut devenir
 * important (une colonne par date sélectionnée, potentiellement 20-30+), le
 * partage à parts égales de table-layout: fixed (voir plus haut) devient
 * illisible — chaque cellule finit par couper son texte caractère par
 * caractère faute de place, y compris l'en-tête "Élève" et les noms
 * d'élèves. Contrairement aux tableaux à nombre de colonnes fixe et
 * raisonnable (ex. comptabilite.php, 11 colonnes) pour lesquels
 * table-layout: fixed + retour à la ligne reste préférable (voir
 * .ag-table-wrap ci-dessus), ce cas a besoin d'un layout automatique et
 * d'un défilement horizontal du conteneur plutôt que d'un partage forcé de
 * la largeur. Ajouter la classe "ag-table--wide" (en plus de "ag-table",
 * voir start_table()) à ces tableaux. Réutilisé le 23/08/2026 pour le
 * tableau de réponses de planner.php (une colonne par choix du planner,
 * même nombre potentiellement important et variable) — première page où ce
 * modificateur coexiste avec des colonnes figées ($freeze=true), d'où les
 * décalages left/top ajoutés ci-dessus pour que le "gel" fonctionne
 * réellement une fois le défilement horizontal actif.
 */
.ag-table-wrap:has(.ag-table--wide) {
	overflow-x: auto;
}

.ag-table--wide {
	table-layout: auto;
}

.ag-table--wide thead th {
	white-space: nowrap;
	word-break: normal;
}

.ag-table--wide tbody td {
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
}

.ag-table-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--ag-space-3);
	padding: var(--ag-space-3) var(--ag-space-4);
	border-bottom: 1px solid var(--ag-color-border);
	flex-wrap: wrap;
}

.ag-table-toolbar__search {
	max-width: 260px;
}

/*
 * Bascule "Nb. enfants" (admin_utilisateurs.php) : bouton sans bordure qui
 * révèle la liste des identités des enfants sous le nombre, au clic — voir
 * data-ag-toggle-enfants dans assets/js/admin-utilisateurs.js.
 */
.ag-link-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ag-space-1);
	background: none;
	border: none;
	color: var(--ag-color-btn-primary);
	font: inherit;
	cursor: pointer;
	padding: 0;
}

.ag-link-toggle:disabled {
	color: inherit;
	cursor: default;
}

.ag-link-toggle .ag-icon {
	width: 12px;
	height: 12px;
}

.ag-enfants-detail {
	margin-top: var(--ag-space-1);
	font-size: var(--ag-font-size-sm);
	text-align: center;
}

/*
 * Filet de sécurité pour un éventuel select multiple resté natif dans une
 * cellule de tableau (aucun cas actif à ce jour depuis que "Profil"
 * — admin_utilisateurs.php, 23/08/2026 — est habillé en Choices.js via
 * data-ag-table-enhance-selects, includes/pages.php) : largeur minimale
 * pour éviter que le texte des options soit tronqué à quelques lettres.
 * Sans effet sur un select converti par Choices (masqué, remplacé par
 * .choices — voir choices-theme.css pour son propre habillage).
 */
.ag-table td select[multiple] {
	min-width: 140px;
}

/*
 * Liste "Choix proposés" chevauchant la colonne suivante (retour
 * utilisateur du 23/08/2026, admin_planner.php) : ce <select> (natif, sans
 * attribut "multiple", donc non couvert par la règle ci-dessus) affiche la
 * liste brute des choix du planner — sa largeur intrinsèque (celle de son
 * option la plus longue) n'est bridée par aucune règle existante, alors
 * que table-layout: fixed (voir plus haut) fixe la largeur de sa cellule
 * indépendamment de son contenu : le <select> déborde donc visuellement
 * sur la colonne "Mode" quand un choix est plus long que la cellule.
 */
.ag-table td select {
	max-width: 100%;
}

/*
 * Affichage mobile (retour utilisateur du 23/08/2026) : aucun media query
 * n'existait jusqu'ici sur les tableaux du site. table-layout: fixed (voir
 * plus haut) partage la largeur disponible à parts égales entre toutes les
 * colonnes — viable sur desktop, mais un tableau à 8 colonnes ou plus
 * (ex. "Liste des planners") réduit chaque colonne à quelques dizaines de
 * pixels sur un écran de téléphone, rendant le contenu illisible même avec
 * le retour à la ligne (word-break) déjà en place. En dessous de 640px, on
 * repasse donc en largeur de colonnes automatique (pilotée par le contenu,
 * avec une largeur totale minimale) et on autorise le défilement
 * horizontal du conteneur — comme la version actuelle, qui reste
 * consultable par défilement latéral sur mobile plutôt que par un tableau
 * illisible en pleine largeur.
 *
 * white-space: nowrap sur les cellules, vérifié en direct : sans cette
 * ligne, table-layout: auto laisse le retour à la ligne des cellules
 * (word-break: break-word ci-dessus, toujours actif) dicter la largeur de
 * chaque colonne AVANT de tenir compte du contenu — chaque colonne se
 * retrouve alors réduite à une largeur minimale et le texte coupe un
 * caractère par ligne (pire qu'avant le correctif). En empêchant tout
 * retour à la ligne ici, chaque colonne prend la largeur de son contenu le
 * plus long, et c'est bien le défilement horizontal du conteneur (ci-
 * dessus) qui absorbe le dépassement, pas la coupure du texte.
 */
@media (max-width: 640px) {
	.ag-table-wrap {
		overflow-x: auto;
	}

	.ag-table {
		table-layout: auto;
		min-width: 640px;
	}

	.ag-table th,
	.ag-table td {
		white-space: nowrap;
	}
}

/*
 * .ag-table--compact (retour utilisateur du 31/08/2026,
 * activites_en_cours.php — tableau "Personne / statut d'inscription" des
 * membres de la famille) : le repli "largeur automatique + défilement
 * horizontal" ci-dessus a été conçu pour des tableaux à beaucoup de
 * colonnes (voir commentaire du 23/08/2026, ex. "Liste des planners") où
 * la largeur de colonne à parts égales rend le contenu illisible. Un
 * tableau à peu de colonnes et à contenu court n'a pas ce problème : lui
 * imposer quand même le même repli ne fait que masquer une partie de son
 * contenu (ex. un bouton/badge de statut au libellé long, ".ag-table
 * .ag-btn" ci-dessus, coupé par le bord du tableau) derrière un
 * défilement horizontal peu visible sur mobile. Classe à ajouter
 * explicitement (start_table($id, "ag-table ag-table--compact")) sur les
 * tableaux concernés : repasse en largeur fixe + retour à la ligne, comme
 * sur desktop, plutôt que d'activer le défilement horizontal.
 */
@media (max-width: 640px) {
	.ag-table.ag-table--compact {
		table-layout: fixed;
		min-width: 0;
	}

	.ag-table.ag-table--compact th,
	.ag-table.ag-table--compact td {
		white-space: normal;
	}

	.ag-table-wrap:has(.ag-table--compact) {
		overflow-x: hidden;
	}
}

/*
 * Largeurs de colonnes du tableau "Menu de navigation" (admin_configuration.php,
 * retour utilisateur du 23/08/2026) : "Accessible par" (le multi-select) a
 * besoin de nettement plus de place que les 3 autres colonnes à contenu court
 * (libellé, interrupteur, bouton) — sans cette règle, table-layout: fixed
 * (voir plus haut) partage les 4 colonnes à parts égales. Classe posée via
 * start_table()'s 2e paramètre, en plus de "ag-table" — scopée à ce tableau
 * précis pour ne pas affecter les autres tableaux à 4 colonnes du site.
 */
.ag-table--menu-navigation th:nth-child(1),
.ag-table--menu-navigation td:nth-child(1) {
	width: 20%;
}

.ag-table--menu-navigation th:nth-child(2),
.ag-table--menu-navigation td:nth-child(2) {
	width: 50%;
}

.ag-table--menu-navigation th:nth-child(3),
.ag-table--menu-navigation td:nth-child(3) {
	width: 15%;
}

.ag-table--menu-navigation th:nth-child(4),
.ag-table--menu-navigation td:nth-child(4) {
	width: 15%;
}

/*
 * Largeurs de colonnes du tableau "Informations sur les niveaux"
 * (admin_activites.php, retour utilisateur du 23/08/2026) : "Enseignant(s)"
 * (le multi-select) a besoin de nettement plus de place que les colonnes
 * voisines — sans cette règle, table-layout: fixed (voir plus haut) partage
 * les 6 colonnes à parts égales, ce qui écrase la liste de noms. Proportions
 * reprises de l'application d'origine (classes Bootstrap 2 "span*" sur les
 * <td> : Niveau=2, Enseignant(s)=3, Axes d'évaluations=2, Sections=2, Durée
 * de la séance=2, Action=1, sur une grille à 12 colonnes), transposées en
 * pourcentages. Classe posée via start_table()'s 2e paramètre, en plus de
 * "ag-table" — scopée à ce tableau précis.
 */
.ag-table--niveaux th:nth-child(1),
.ag-table--niveaux td:nth-child(1) {
	width: 15%;
}

.ag-table--niveaux th:nth-child(2),
.ag-table--niveaux td:nth-child(2) {
	width: 30%;
}

.ag-table--niveaux th:nth-child(3),
.ag-table--niveaux td:nth-child(3) {
	width: 15%;
}

.ag-table--niveaux th:nth-child(4),
.ag-table--niveaux td:nth-child(4) {
	width: 15%;
}

.ag-table--niveaux th:nth-child(5),
.ag-table--niveaux td:nth-child(5) {
	width: 15%;
}

.ag-table--niveaux th:nth-child(6),
.ag-table--niveaux td:nth-child(6) {
	width: 10%;
}