/*
 * Boutons et liens d'action — utilisés par input_button(), lien(), lien_icon()
 * (includes/pages.php et includes/forms.php).
 */

.ag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ag-space-2);
	padding: var(--ag-space-2) var(--ag-space-4);
	border-radius: var(--ag-radius-sm);
	font-size: var(--ag-font-size-sm);
	font-weight: var(--ag-font-weight-medium);
	border: 1px solid transparent;
	transition: background var(--ag-transition-fast), border-color var(--ag-transition-fast), color var(--ag-transition-fast), box-shadow var(--ag-transition-fast), transform var(--ag-transition-fast);
	white-space: nowrap;
}

.ag-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none !important;
}

.ag-btn--block {
	display: flex;
	width: 100%;
}

.ag-btn--primary {
	background: var(--ag-gradient-btn-primary);
	color: var(--ag-color-primary-contrast);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.ag-btn--primary:hover:not(:disabled) { filter: brightness(1.05); box-shadow: var(--ag-shadow-md); transform: translateY(-1px); }
.ag-btn--primary:active:not(:disabled) { filter: brightness(0.97); transform: translateY(0); }

.ag-btn--success {
	background: var(--ag-color-success);
	color: var(--ag-color-text-inverse);
}
.ag-btn--success:hover:not(:disabled) { filter: brightness(0.94); box-shadow: var(--ag-shadow-sm); transform: translateY(-1px); }

.ag-btn--danger {
	background: var(--ag-color-danger);
	color: var(--ag-color-text-inverse);
}
.ag-btn--danger:hover:not(:disabled) { filter: brightness(0.94); box-shadow: var(--ag-shadow-sm); transform: translateY(-1px); }

.ag-btn--warning {
	background: var(--ag-color-warning);
	color: var(--ag-color-text-inverse);
}
.ag-btn--warning:hover:not(:disabled) { filter: brightness(0.94); box-shadow: var(--ag-shadow-sm); transform: translateY(-1px); }

.ag-btn--secondary {
	background: var(--ag-color-surface);
	color: var(--ag-color-text);
	border-color: var(--ag-color-border-strong);
}
.ag-btn--secondary:hover:not(:disabled) { background: var(--ag-color-bg); border-color: var(--ag-color-btn-primary); color: var(--ag-color-btn-primary); }

/*
 * Ajouté le 23/08/2026 (admin_periodes.php, bouton "Déverrouiller") — même
 * motif que .ag-btn--warning/.ag-btn-icon--warning (21/08/2026) : lien()/
 * lien_icon() reconnaissent désormais "info" (includes/pages.php) mais sans
 * règle CSS correspondante le bouton retombait silencieusement sur la
 * couleur par défaut. --ag-color-info reste le bleu d'origine (jamais
 * reteint en vert, voir tokens.css), distinct de --ag-color-btn-primary.
 */
.ag-btn--info {
	background: var(--ag-color-info);
	color: var(--ag-color-text-inverse);
}
.ag-btn--info:hover:not(:disabled) { filter: brightness(0.94); box-shadow: var(--ag-shadow-sm); transform: translateY(-1px); }

/* Rangée de boutons d'action centrée (validation de formulaire, etc.) */
.ag-actions-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ag-space-3);
	margin-top: var(--ag-space-4);
}

/* Bouton icône seul (lien_icon) : actions ligne de tableau, etc. */
.ag-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--ag-radius-sm);
	color: var(--ag-color-text-muted);
	border: 1px solid var(--ag-color-border);
	background: var(--ag-color-surface);
	transition: background var(--ag-transition-fast), color var(--ag-transition-fast);
}
.ag-btn-icon:hover {
	background: var(--ag-color-bg);
	color: var(--ag-color-text);
}
.ag-btn-icon--success { color: var(--ag-color-success); }
.ag-btn-icon--danger { color: var(--ag-color-danger); }
.ag-btn-icon--primary { color: var(--ag-color-btn-primary); }
/*
 * Correctif (retour utilisateur du 21/08/2026, "Renouveler en orange") :
 * ce modificateur n'existait pas — lien_icon() (includes/pages.php) émet
 * pourtant bien la classe "ag-btn-icon--warning" dès que $color="warning"
 * est passé, mais faute de règle CSS correspondante, le bouton retombait
 * silencieusement sur la couleur par défaut de .ag-btn-icon
 * (--ag-color-text-muted, gris) au lieu d'orange. Bug générique, pas
 * spécifique à Retours : affectait aussi le crayon "Modifier" de
 * biblio_livres.php, treso_postes_comptables.php, treso_prelevements.php
 * et comptabilite.php (tous les lien_icon(..., "warning", ...) du site).
 */
.ag-btn-icon--warning { color: var(--ag-color-warning); }

/*
 * Même motif, ajouté le 23/08/2026 pour "info" (admin_periodes.php, icône
 * "Déverrouiller") — voir le commentaire équivalent sur .ag-btn--info
 * ci-dessus.
 */
.ag-btn-icon--info { color: var(--ag-color-info); }

/*
 * Correctif (retour utilisateur du 21/08/2026, École / Absences) : "small"
 * (assets/css/base.css) impose color: var(--ag-color-text-muted) (gris) à
 * TOUT élément <small>, y compris à l'intérieur d'un bouton coloré
 * (.ag-btn--success/warning/danger, dont le texte doit être blanc,
 * --ag-color-text-inverse). Un <small> hériterait normalement de la couleur
 * du bouton parent, mais une déclaration explicite posée sur l'élément
 * lui-même l'emporte toujours sur une valeur héritée (qui n'a aucune
 * spécificité propre) — d'où l'horodatage des boutons de statut
 * (ecole_absences.php) resté gris/peu lisible sur fond coloré. Corrigé en
 * forçant l'héritage explicitement, scopé à .ag-btn pour ne pas affecter
 * les autres usages de <small> du site (texte discret sous un libellé,
 * etc.), qui doivent rester gris.
 */
.ag-btn small {
	color: inherit;
}

/*
 * Modificateur de taille "large" (retour utilisateur du 21/08/2026, École /
 * Absences — boutons de statut Présent/Retard/Absent) : correspond à
 * btn-large de l'app originale (Bootstrap 2). Layout en colonne (plutôt
 * qu'en ligne, .ag-btn par défaut) pour empiler un éventuel horodatage
 * (<small>) sous le libellé/l'icône du bouton. min-height fixe : garantit
 * que le bouton occupe la même hauteur qu'il affiche ou non un horodatage
 * (voir aussi le "&nbsp;" de repli dans ecole_absences.php, qui garantit
 * que la ligne de l'horodatage existe toujours, même vide).
 */
.ag-btn--lg {
	flex-direction: column;
	gap: 2px;
	min-height: 52px;
	padding: var(--ag-space-3) var(--ag-space-4);
	font-size: var(--ag-font-size-base);
}