/* biome-ignore-all lint/complexity/noImportantStyles: AdminJS injects its design-system styles via styled-components at runtime, after this sheet — `!important` is required for the theme overrides to win on specificity. */
/* biome-ignore-all lint/style/noDescendingSpecificity: this is an override sheet — source order is intentional and the flagged selectors target disjoint DOM subtrees. */

/* ============================================================================
   Kaizer Backoffice — branded dark theme for AdminJS
   ----------------------------------------------------------------------------
   AdminJS is not Tailwind and has no native dark mode. Structural colors come
   from the design-system theme tokens (see src/admin/branding.ts). This sheet
   fills in what the tokens can't reach: brand fonts, the login page, a few
   text-on-color fixes caused by remapping the `white` token to a dark surface,
   plus scrollbars / selection / autofill polish ported from trainer-dashboard.

   Selectors use AdminJS's stable `adminjs_*` class hooks (generated by the
   design-system `cssClass()` helper) so they survive re-renders. `!important`
   is used where styled-components inject their styles at runtime and would
   otherwise win on specificity.
   ============================================================================ */

/* ── Brand fonts ─────────────────────────────────────────────────────────── */
@font-face {
	font-family: "Advercase";
	src: url("/public/fonts/Advercase-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Advercase";
	src: url("/public/fonts/Advercase-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Product Sans";
	src: url("/public/fonts/ProductSans-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Product Sans";
	src: url("/public/fonts/ProductSans-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Monospace Typewriter";
	src: url("/public/fonts/MonospaceTypewriter.ttf") format("truetype");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--k-bg: #131313;
	--k-surface: #1a1a1a;
	--k-surface-2: #101010;
	--k-primary: #fd832b;
	--k-ink: rgba(236, 240, 221, 0.93);
	--k-ink-soft: rgba(236, 240, 221, 0.5);
	--k-border: rgba(236, 240, 221, 0.08);
	--k-font-sans:
		"Product Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--k-font-display: "Advercase", "Product Sans", sans-serif;
	--k-font-mono: "Monospace Typewriter", ui-monospace, monospace;
	/* AdminJS hardcodes color-scheme:light in its reset — flip it so native
	   form controls / scrollbars render dark. */
	color-scheme: dark !important;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
html,
body,
#app,
input,
select,
textarea,
button {
	font-family: var(--k-font-sans);
}

body,
#app {
	background: var(--k-bg);
	color: var(--k-ink);
}

/* Headings → Advercase display face */
h1,
h2,
h3,
h4,
h5,
.adminjs_Header {
	font-family: var(--k-font-display) !important;
	letter-spacing: 0.01em;
}

code,
pre,
kbd,
.adminjs_EditorWrapper code {
	font-family: var(--k-font-mono);
}

/* ── Text-on-color fixes (caused by `white` token → dark surface) ────────── */
/* Contained buttons sit on the orange primary, so their label must be light. */
.adminjs_Button_Contained,
.adminjs_Button_Contained:hover,
.adminjs_Button_Contained:focus {
	color: #fff !important;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.adminjs_Link,
a.adminjs_Link {
	color: var(--k-primary);
}

/* ── Inputs: dark fields + brand focus ring ──────────────────────────────── */
.adminjs_Input,
.adminjs_TextArea,
.adminjs_Select__control,
.adminjs_CurrencyInput,
.adminjs_PhoneInput input {
	background-color: rgba(236, 240, 221, 0.03) !important;
	color: var(--k-ink) !important;
}

.adminjs_Input:focus,
.adminjs_TextArea:focus,
.adminjs_Input:focus-within,
.adminjs_Select__control--is-focused {
	border-color: rgba(253, 131, 43, 0.4) !important;
	box-shadow: 0 0 0 2px rgba(253, 131, 43, 0.3) !important;
}

::placeholder {
	color: var(--k-ink-soft);
}

/* react-select menu (rendered as a portal) */
.adminjs_Select__menu,
.adminjs_Select__option {
	background-color: var(--k-surface) !important;
	color: var(--k-ink) !important;
}
.adminjs_Select__option--is-focused {
	background-color: #222 !important;
}

/* Override Chrome's autofill so it matches the dark theme (ported from
   trainer-dashboard). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--k-surface) inset !important;
	box-shadow: 0 0 0 1000px var(--k-surface) inset !important;
	-webkit-text-fill-color: var(--k-ink) !important;
	caret-color: var(--k-primary);
	transition: background-color 9999s ease-in-out 0s;
}

/* ── Login page ──────────────────────────────────────────────────────────── */
/* `.login__Wrapper` is the stable outer wrapper. Inside: a card whose first
   child is the orange "welcome" panel and second child is the form. */
.login__Wrapper {
	background:
		radial-gradient(
			circle at 15% 0%,
			rgba(253, 131, 43, 0.12) 0%,
			transparent 45%
		),
		var(--k-bg) !important;
}

/* The card */
.login__Wrapper > div:first-child {
	border: 1px solid var(--k-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 62px rgba(0, 0, 0, 0.45);
}

/* Welcome panel → athletic hero photo with a dark overlay, light text */
.login__Wrapper > div:first-child > div:first-child {
	background-image:
		linear-gradient(rgba(19, 19, 19, 0.5), rgba(19, 19, 19, 0.78)),
		url("/public/brand/auth_hero.webp") !important;
	background-size: cover !important;
	background-position: center !important;
}
.login__Wrapper > div:first-child > div:first-child * {
	color: #ecf0dd !important;
}
/* Hide AdminJS's default cartoon illustrations on the welcome panel */
.login__Wrapper .adminjs_Illustration {
	display: none !important;
}

/* Center + size the brand logo above the login form */
.login__Wrapper form img {
	display: block;
	margin: 0 auto;
	max-width: 180px;
}

/* ── Chrome: top bar, sidebar logo, version ──────────────────────────────── */
.adminjs_NavBar {
	border-bottom: 1px solid var(--k-border);
}

.adminjs_Logo img {
	max-height: 32px;
	width: auto;
}

/* ── Scrollbars (ported from trainer-dashboard) ──────────────────────────── */
::-webkit-scrollbar {
	width: 3px;
	height: 3px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background-color: #4d4d4d;
	border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #6b6b6b;
}
* {
	scrollbar-width: thin;
	scrollbar-color: #4d4d4d transparent;
}

/* ── Text selection — on-brand dark orange instead of browser blue ───────── */
::selection {
	background-color: rgba(253, 131, 43, 0.35);
	color: var(--k-ink);
}
::-moz-selection {
	background-color: rgba(253, 131, 43, 0.35);
	color: var(--k-ink);
}

/* ── "Volver al backoffice" link (override de SidebarFooter) ──────────────── */
.kaizer-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 24px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(236, 240, 221, 0.72) !important;
	text-decoration: none !important;
	transition: color 0.18s ease;
}
.kaizer-back-link:hover {
	color: #fd832b !important;
}
.kaizer-back-arrow {
	transition: transform 0.18s ease;
}
.kaizer-back-link:hover .kaizer-back-arrow {
	transform: translateX(-3px);
}