@font-face {
	font-family: 'Geist';
	src: url('/fonts/GeistVariableVF.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

.kipper-brand {
	font-family: 'Geist', var(--tblr-font-sans-serif);
}

:root {
	--bb-brand: #1f6feb;
	/* Kipper brand tokens (mirrors kipper.com marketing palette) */
	--kp-electric: #3d7bff;
	--kp-electric-ring: rgba(61, 123, 255, 0.25);
	--kp-ink-900: #0a1a3f;
	--kp-ink-950-70: rgba(6, 15, 40, 0.7);
	--kp-teal-500: #044cc4;
}

/* Tabler sidebar margin-left fix – remove when https://github.com/tabler/tabler/issues/2271 is resolved */
@media (min-width: 992px) {
	html {
		margin-left: 0 !important;
	}
}

.bb-logo {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.page-center {
	min-height: 100vh;
}

/* Theme-aware logo switching */
[data-bs-theme='dark'] .logo-light {
	display: none;
}
[data-bs-theme='light'] .logo-dark {
	display: none;
}

/* Auth layout — teal-tinted grid on light, electric glow on dark, mirroring kipper.com marketing.
   Theme-scoped tokens drive fields + card so one rule serves both themes. */
.auth-layout {
	--kp-field-bg: #ffffff;
	--kp-field-border: rgba(4, 76, 196, 0.18);
	--kp-field-color: var(--kp-ink-900);
	--kp-field-placeholder: #94a3b8;
	--kp-card-bg: var(--tblr-card-bg);
	--kp-card-border: var(--tblr-border-color);

	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #f6f8fd;
	background-image:
		radial-gradient(circle at 22% 38%, rgba(4, 76, 196, 0.09) 0%, transparent 55%),
		linear-gradient(rgba(4, 76, 196, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(4, 76, 196, 0.06) 1px, transparent 1px);
	background-size:
		100% 100%,
		80px 80px,
		80px 80px;
	background-repeat: no-repeat, repeat, repeat;
}

/* Dark mode — mirrors kipper.com/contact `<section>`: ink-900 ground + off-screen
   electric-500 radial glow + masked white grid overlay, and rebinds the field/card tokens */
[data-bs-theme='dark'] .auth-layout {
	--kp-field-bg: rgba(255, 255, 255, 0.05);
	--kp-field-border: rgba(255, 255, 255, 0.15);
	--kp-field-color: #ffffff;
	--kp-field-placeholder: #64748b;
	--kp-card-bg: var(--kp-ink-950-70);
	--kp-card-border: rgba(255, 255, 255, 0.1);

	background-color: var(--kp-ink-900);
	background-image: none;
	overflow-x: hidden;
}

[data-bs-theme='dark'] .auth-layout::before {
	content: '';
	position: absolute;
	top: -30%;
	left: -5%;
	width: 55%;
	height: 140%;
	background: radial-gradient(ellipse at center, var(--kp-electric) 0%, transparent 60%);
	opacity: 0.3;
	pointer-events: none;
	z-index: 0;
}

[data-bs-theme='dark'] .auth-layout::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
	background-size: 64px 64px;
	opacity: 0.06;
	mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 40%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

.auth-layout > * {
	position: relative;
	z-index: 1;
}

/* Card + form fields share one rule set — light/dark theming lives in the tokens above.
   Focus signature (electric-500 border + ring) is the constant brand accent across themes. */
.auth-layout .card {
	background-color: var(--kp-card-bg);
	border: 1px solid var(--kp-card-border);
}

[data-bs-theme='dark'] .auth-layout .card {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.auth-layout .form-control,
.auth-layout .form-select {
	background-color: var(--kp-field-bg);
	border-color: var(--kp-field-border);
	color: var(--kp-field-color);
}

.auth-layout .form-control::placeholder {
	color: var(--kp-field-placeholder);
}

.auth-layout .form-control:focus,
.auth-layout .form-select:focus,
.auth-layout .form-check-input:focus {
	background-color: var(--kp-field-bg);
	border-color: var(--kp-electric);
	box-shadow: 0 0 0 0.25rem var(--kp-electric-ring);
	color: var(--kp-field-color);
}

.auth-layout .form-check-input:checked {
	background-color: var(--kp-electric);
	border-color: var(--kp-electric);
}

/* Input-group append (password eye toggle) — align border with the field */
.auth-layout .input-group .btn-outline-lt {
	border-color: var(--kp-field-border);
	color: var(--kp-field-color);
}

[data-bs-theme='dark'] .auth-layout .input-group .btn-outline-lt:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

.auth-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	position: relative;
	z-index: 10;
}

.auth-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.auth-logo img {
	height: 36px;
	width: auto;
}

/* Make unchecked checkbox visible against dark card surfaces */
[data-bs-theme='dark'] .form-check-input:not(:checked) {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
}
[data-bs-theme='dark'] .form-check-input:not(:checked):hover {
	border-color: rgba(255, 255, 255, 0.65);
}

/* Restore Tabler rules missing from the bundled tabler.min.css */
.modal-dialog {
	max-width: var(--tblr-modal-width, 500px);
	margin-right: auto;
	margin-left: auto;
}
.alert-success {
	--tblr-alert-color: var(--tblr-success);
}
.alert-danger {
	--tblr-alert-color: var(--tblr-danger);
}
.alert-warning {
	--tblr-alert-color: var(--tblr-warning);
}
.alert-info {
	--tblr-alert-color: var(--tblr-info);
}

/* Tabler's default disabled form-select/form-control state is hard to read in dark
   theme — the muted text fades into the panel background. Boost contrast with a
   slightly tinted background plus a visible "not-allowed" cursor in both themes.
   Opacity is light-mode-only so it doesn't stack with the explicit dark-mode
   alpha values below (which would otherwise multiply to ~0.36 on the text). */
.form-select:disabled,
.form-control:disabled,
.form-select[disabled],
.form-control[disabled] {
	cursor: not-allowed;
}

[data-bs-theme='light'] .form-select:disabled,
[data-bs-theme='light'] .form-control:disabled,
[data-bs-theme='light'] .form-select[disabled],
[data-bs-theme='light'] .form-control[disabled] {
	opacity: 0.65;
}

[data-bs-theme='dark'] .form-select:disabled,
[data-bs-theme='dark'] .form-control:disabled,
[data-bs-theme='dark'] .form-select[disabled],
[data-bs-theme='dark'] .form-control[disabled] {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.7);
}