/**
 * Card Collection - boutons
 *
 * Les boutons heritaient entierement du theme phpBB : angles droits,
 * hauteurs variables selon la longueur du libelle, et un rendu
 * different de celui des pages de l'extension.
 *
 * Ce fichier leur donne une apparence commune, sans toucher aux
 * boutons du forum lui-meme : tout est porte par .cc-buttons, applique
 * aux barres d'actions de l'extension.
 *
 * @copyright (c) 2024, Verturin
 * @license GNU General Public License, version 2 (GPL-2.0)
 */

/* =============================================================
 * BARRE DE BOUTONS
 * ============================================================= */

.cc-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

/* Centrees quand la barre occupe toute la largeur */
.cc-buttons-center {
	justify-content: center;
}

/* =============================================================
 * BOUTON
 *
 * Hauteur fixe et non calculee par le contenu : c'est ce qui
 * garantit que tous les boutons d'une meme ligne s'alignent, quelle
 * que soit la longueur du libelle.
 * ============================================================= */

.cc-buttons .button,
.cc-buttons .button1,
.cc-buttons .button2,
.cc-buttons button,
.cc-collection .button,
.cc-collection .button1,
.cc-collection .button2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	/* Meme hauteur pour tous */
	min-height: 36px;
	padding: 0 16px;

	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 8px;

	background: #fff;
	color: #374151;

	font-size: .88em;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;
	transition: background .15s ease, border-color .15s ease,
	            color .15s ease, box-shadow .15s ease;
}

.cc-buttons .button:hover,
.cc-collection .button:hover,
.cc-buttons button:hover {
	border-color: #3b82f6;
	background: #3b82f6;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(59, 130, 246, .28);
}

/* Bouton principal */
.cc-buttons .button1,
.cc-collection .button1,
.cc-buttons button[type="submit"]:not(.button-secondary):not(.cc-mini-btn) {
	border-color: #3b82f6;
	background: #3b82f6;
	color: #fff;
}

.cc-buttons .button1:hover,
.cc-collection .button1:hover,
.cc-buttons button[type="submit"]:not(.button-secondary):not(.cc-mini-btn):hover {
	border-color: #2563eb;
	background: #2563eb;
	box-shadow: 0 2px 8px rgba(37, 99, 235, .34);
}

/* Bouton secondaire : plus discret, meme gabarit */
.cc-buttons .button-secondary,
.cc-collection .button-secondary {
	background: rgba(0, 0, 0, .03);
	color: #4b5563;
}

.cc-buttons .button-secondary:hover,
.cc-collection .button-secondary:hover {
	border-color: rgba(0, 0, 0, .22);
	background: rgba(0, 0, 0, .07);
	color: #1f2937;
	box-shadow: none;
}

/* Action destructrice */
.cc-collection .cc-danger:hover {
	border-color: #ef4444 !important;
	background: #ef4444 !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(239, 68, 68, .3) !important;
}

.cc-buttons .button:focus-visible,
.cc-collection .button:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

/* =============================================================
 * PASTILLE DE COMPTEUR
 *
 * Positionnee dans l'angle superieur droit du bouton plutot que
 * posee a la suite du libelle : elle signale une nouveaute, elle
 * n'en fait pas partie.
 * ============================================================= */

.cc-buttons .button,
.cc-collection .button {
	position: relative;
	overflow: visible;
}

.cc-pill {
	position: absolute;
	top: -7px;
	right: -7px;

	min-width: 19px;
	height: 19px;
	padding: 0 5px;

	border: 2px solid #fff;
	border-radius: 999px;

	background: #ef4444;
	color: #fff;

	font-size: .68em;
	font-weight: 700;
	line-height: 15px;
	text-align: center;

	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* Dans un menu, la pastille reste dans le fil du texte */
.dropdown-contents .cc-pill,
.nav-main .cc-pill {
	position: static;
	margin-left: 5px;
	border: 0;
	box-shadow: none;
	vertical-align: 1px;
}

/* =============================================================
 * MOBILE
 * ============================================================= */

@media (max-width: 560px) {
	.cc-buttons {
		gap: 6px;
	}

	.cc-buttons .button,
	.cc-collection .button {
		flex: 1 1 auto;
		padding: 0 12px;
		font-size: .84em;
	}
}

/* =============================================================
 * EXCEPTIONS
 *
 * Les petits boutons sous la carte - recto/verso, agrandir - gardent
 * leur gabarit reduit : ils accompagnent le visuel, ils ne sont pas
 * des actions principales.
 * ============================================================= */

.cc-visual-actions .cc-mini-btn {
	min-height: 0;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .84em;
	font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
	.cc-buttons .button,
	.cc-collection .button {
		transition: none;
	}
}