/* ============================================================================
   compat.css — shared compatibility shim so the WHOLE app (admin + frontend)
   runs on standard Bootstrap 5 instead of the custom "qnkstrap" build.

   Loaded in both contexts right after bootstrap.min.css. It provides only what
   Bootstrap lacks but the views still use: the qnkstrap brand colours/vars and
   the handful of qnkstrap-only utility classes (extracted from qnkstrap.css).
   qnkstrap.css is no longer loaded anywhere.
   ========================================================================== */

html, body {
	font-family: Nunito, Muli, Arial, sans-serif;
}

:root {
	/* qnkstrap gray palette (referenced by admin.css; identical to Bootstrap's grays) */
	--qnk-gray-200: #e9ecef;
	--qnk-gray-300: #dee2e6;
	--qnk-gray-400: #ced4da;
	--qnk-gray-500: #adb5bd;
	--qnk-gray-700: #495057;
	--qnk-gray-800: #343a40;

	/* qnkstrap brand palette — used by theme.css as the default game-theme colours */
	--qnk-primary: #7fbe87;
	--qnk-secondary: #6c757d;
	--qnk-success: #a2d8a4;
	--qnk-info: #3a8fff;
	--qnk-warning: #f9c534;
	--qnk-danger: #ff4f86;
	--qnk-dark: #212529;
	--qnk-light: #f8f9fa;

	/* keep the green brand colour for Bootstrap components that read these vars */
	--bs-primary: #7fbe87;
	--bs-primary-rgb: 127, 190, 135;
	--bs-link-color: #5a9e63;
	--bs-link-color-rgb: 90, 158, 99;
	--bs-link-hover-color: #4a8a52;
	--bs-link-hover-color-rgb: 74, 138, 82;
}

/* .btn-primary is compiled from Sass with hard-coded hex, so pin the brand here */
.btn-primary {
	--bs-btn-bg: #7fbe87;
	--bs-btn-border-color: #7fbe87;
	--bs-btn-hover-bg: #6fae77;
	--bs-btn-hover-border-color: #69a771;
	--bs-btn-active-bg: #69a771;
	--bs-btn-active-border-color: #63a06b;
	--bs-btn-disabled-bg: #7fbe87;
	--bs-btn-disabled-border-color: #7fbe87;
}
.btn-outline-primary {
	--bs-btn-color: #5a9e63;
	--bs-btn-border-color: #7fbe87;
	--bs-btn-hover-bg: #7fbe87;
	--bs-btn-hover-border-color: #7fbe87;
	--bs-btn-active-bg: #7fbe87;
	--bs-btn-active-border-color: #7fbe87;
}

/* white text on the green primary navbar (the look under qnkstrap) */
.navbar.bg-primary {
	--bs-navbar-color: rgba(255, 255, 255, .85);
	--bs-navbar-hover-color: #fff;
	--bs-navbar-active-color: #fff;
	--bs-navbar-brand-color: #fff;
	--bs-navbar-brand-hover-color: #fff;
}

/* checkboxes / radios / switches: Bootstrap compiles a hard-coded blue, pin the brand green */
.form-check-input:checked {
	background-color: var(--qnk-primary);
	border-color: var(--qnk-primary);
}
.form-check-input:focus {
	border-color: #a9d6af;
	box-shadow: 0 0 0 .25rem rgba(127, 190, 135, .25);
}

/* --- gray utilities (qnkstrap) --- */
.text-gray-500 { color: #adb5bd !important; }
.text-gray-600 { color: #6c757d !important; }
.bg-gray-500 { background-color: #adb5bd !important; }

/* --- text-justify (removed in Bootstrap 5) --- */
.text-justify { text-align: justify; }

/* --- extended spacers: qnkstrap step "6" = 6rem (Bootstrap stops at 5 = 3rem) --- */
.mb-6 { margin-bottom: 6rem !important; }
.py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
@media (min-width: 992px) {
	.lg\:px-6 { padding-left: 6rem !important; padding-right: 6rem !important; }
	.lg\:p-6 { padding: 6rem !important; }
}

/* --- Tailwind-style "space between children" utilities (no Bootstrap equivalent) --- */
.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
@media (min-width: 768px) {
	.md\:space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; }
	.md\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; }
	.md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
}
@media (min-width: 992px) {
	.lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
}

/* --- responsive position utilities (qnkstrap lg:) --- */
@media (min-width: 992px) {
	.lg\:position-absolute { position: absolute !important; }
	.lg\:top-0 { top: 0 !important; }
	.lg\:start-0 { left: 0 !important; }
	.lg\:end-0 { right: 0 !important; }
}

/* --- responsive width utilities (qnkstrap; Bootstrap has no responsive w-*) --- */
@media (min-width: 576px) { .sm\:w-50 { width: 50% !important; } }
@media (min-width: 768px) { .md\:w-75 { width: 75% !important; } .md\:w-25 { width: 25% !important; } }
@media (min-width: 992px) { .lg\:w-75 { width: 75% !important; } .lg\:w-50 { width: 50% !important; } }
@media (min-width: 1200px) { .xl\:w-25 { width: 25% !important; } .xl\:w-50 { width: 50% !important; } }
@media (min-width: 1400px) { .xxl\:w-50 { width: 50% !important; } }

/* --- qnkstrap .d-flex-1..9: vertical flex container, 3x3 positioning (numpad layout) --- */
.d-flex-1, .d-flex-2, .d-flex-3, .d-flex-4, .d-flex-5, .d-flex-6, .d-flex-7, .d-flex-8, .d-flex-9 {
	display: flex;
	flex-direction: column;
}
.d-flex-1, .d-flex-2, .d-flex-3 { justify-content: flex-start; }
.d-flex-4, .d-flex-5, .d-flex-6 { justify-content: center; }
.d-flex-7, .d-flex-8, .d-flex-9 { justify-content: flex-end; }
.d-flex-1, .d-flex-4, .d-flex-7 { align-items: flex-start; }
.d-flex-2, .d-flex-5, .d-flex-8 { align-items: center; text-align: center; }
.d-flex-3, .d-flex-6, .d-flex-9 { align-items: flex-end; }

/* --- carousel crossfade background (games carousel), from qnkstrap --- */
.carousel-item > .carousel-background {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 16rem;
}
@media (min-width: 576px)  { .carousel-item > .carousel-background { height: 20rem; } }
@media (min-width: 768px)  { .carousel-item > .carousel-background { height: 24rem; } }
@media (min-width: 992px)  { .carousel-item > .carousel-background { height: 28rem; } }
@media (min-width: 1200px) { .carousel-item > .carousel-background { height: 32rem; } }
@media (min-width: 1400px) { .carousel-item > .carousel-background { height: 36rem; } }

/* --- crossfader component, from qnkstrap --- */
.crossfader { position: relative; width: 100%; }
.crossfader > .crossfade-item {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 1s;
}
.crossfader > .crossfade-item.active { opacity: 1; }