/**
 * Card Collection - code tracable et planche imprimable
 *
 * Format de reference : 64 x 89 mm
 * A l'impression, les pochettes sortent aux dimensions physiques
 * exactes, 3 x 3 par page A4, comme une vraie page de classeur.
 *
 * @copyright (c) 2024, Verturin
 * @license GNU General Public License, version 2 (GPL-2.0)
 */

/* =============================================================
 * PASTILLE DE POSSESSION CONFIRMEE
 * ============================================================= */

.cc-verified {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba(16, 185, 129, .95);
	color: #fff;
	font-size: .8em;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

/* =============================================================
 * CODE TRACABLE
 * ============================================================= */

.cc-tracking {
	margin: 18px 0;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1px solid rgba(16, 185, 129, .35);
	background: rgba(16, 185, 129, .07);
}

.cc-tracking-code {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 6px;
	background: #064e3b;
	color: #d1fae5;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 1.05em;
	letter-spacing: .14em;
}

.cc-tracking-hint {
	margin: 8px 0 0;
	font-size: .84em;
	color: #6b7280;
}

.cc-verify {
	margin: 18px 0;
	padding: 16px;
	border-radius: 10px;
	border: 1px solid rgba(59, 130, 246, .3);
	background: rgba(59, 130, 246, .06);
}

.cc-verify-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 12px;
}

.cc-verify-form input[type="text"] {
	flex: 1 1 220px;
	padding: 9px 13px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	background: #fff;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 1em;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cc-verify-form input[type="number"] {
	width: 84px;
	padding: 9px 11px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	text-align: center;
	font: inherit;
}

/* =============================================================
 * PLANCHE IMPRIMABLE (page de classeur)
 * ============================================================= */

.cc-sheet-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background: rgba(255, 255, 255, .7);
}

.cc-sheet-toolbar select {
	padding: 7px 11px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	max-width: 320px;
}

.cc-sheet-head {
	max-width: 210mm;
	margin: 0 auto 10px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: .86em;
	color: #6b7280;
}

.cc-sheet-page {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4mm;
	max-width: 210mm;
	margin: 0 auto 30px;
	padding: 12mm 10mm;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.cc-sheet-card {
	position: relative;
	display: block;
	aspect-ratio: 64 / 89;
	border-radius: 6px;
	overflow: hidden;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	text-decoration: none;
	color: inherit;
}

.cc-sheet-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cc-sheet-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 6px;
	font-size: .66em;
	text-align: center;
	color: #9ca3af;
}

/* Carte manquante : visuel en filigrane */
.cc-sheet-card[data-owned="0"] img {
	opacity: .34;
	filter: grayscale(80%);
}

.cc-sheet-card[data-owned="0"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255, 255, 255, .32);
	pointer-events: none;
}

.cc-sheet-label {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 3px 5px;
	background: rgba(255, 255, 255, .88);
	font-size: .62em;
	line-height: 1.25;
	text-align: center;
}

.cc-sheet-uid {
	display: block;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .92em;
	color: #6b7280;
}

.cc-sheet-empty {
	aspect-ratio: 64 / 89;
	border: 1px dashed #d1d5db;
	border-radius: 6px;
	background: repeating-linear-gradient(
		45deg,
		transparent, transparent 6px,
		rgba(0, 0, 0, .02) 6px, rgba(0, 0, 0, .02) 12px
	);
}

/* =============================================================
 * IMPRESSION : echelle physique reelle, 3 x 3 sur A4
 * ============================================================= */

@media print {
	body * {
		visibility: hidden;
	}

	.cc-sheet-print,
	.cc-sheet-print * {
		visibility: visible;
	}

	.cc-sheet-print {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
	}

	.cc-sheet-page {
		width: 210mm;
		min-height: 297mm;
		max-width: none;
		margin: 0;
		padding: 14mm 12mm;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		grid-template-columns: repeat(3, 64mm);
		gap: 4mm;
		justify-content: center;
		align-content: start;
		page-break-after: always;
		break-after: page;
	}

	.cc-sheet-page:last-child {
		page-break-after: auto;
		break-after: auto;
	}

	/* Dimensions physiques exactes de la pochette */
	.cc-sheet-card,
	.cc-sheet-empty {
		width: 64mm;
		height: 89mm;
		aspect-ratio: auto;
		break-inside: avoid;
	}

	/* Les cartes manquantes restent en filigrane :
	   il suffit de glisser la carte physique par-dessus. */
	.cc-sheet-card[data-owned="0"] img {
		opacity: .20;
		filter: grayscale(100%);
	}

	.cc-sheet-card[data-owned="0"]::before {
		display: none;
	}

	.cc-sheet-toolbar,
	.cc-sheet-head {
		display: none !important;
	}

	@page {
		size: A4 portrait;
		margin: 0;
	}
}