/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* DaisyUI theme overrides (Winter / Night) */
[data-theme="winter"] {
	color-scheme: light;
	--color-base-100: oklch(100% 0 0);
	--color-base-200: oklch(97.466% 0.011 259.822);
	--color-base-300: oklch(93.268% 0.016 262.751);
	--color-base-content: oklch(41.886% 0.053 255.824);
	--color-primary: oklch(45% 0.24 277.023);
	--color-primary-content: oklch(91.372% 0.051 257.57);
	--color-secondary: oklch(39% 0.195 277.366);
	--color-secondary-content: oklch(88.51% 0.032 282.339);
	--color-accent: oklch(65% 0.241 354.308);
	--color-accent-content: oklch(11.988% 0.038 335.171);
	--color-neutral: oklch(37% 0.044 257.287);
	--color-neutral-content: oklch(83.923% 0.012 257.651);
	--color-info: oklch(70% 0.165 254.624);
	--color-info-content: oklch(17.625% 0.017 214.515);
	--color-success: oklch(87% 0.15 154.449);
	--color-success-content: oklch(16.098% 0.015 197.823);
	--color-warning: oklch(90% 0.076 70.697);
	--color-warning-content: oklch(17.834% 0.009 71.47);
	--color-error: oklch(70% 0.191 22.216);
	--color-error-content: oklch(14.618% 0.022 20.076);
	--radius-selector: 2rem;
	--radius-field: 2rem;
	--radius-box: 2rem;
}

[data-theme="night"] {
	color-scheme: dark;
	--color-base-100: oklch(27% 0.033 256.848);
	--color-base-200: oklch(21% 0.034 264.665);
	--color-base-300: oklch(13% 0.028 261.692);
	--color-base-content: oklch(84.153% 0.007 265.754);
	--color-primary: oklch(51% 0.262 276.966);
	--color-primary-content: oklch(15.07% 0.027 232.661);
	--color-secondary: oklch(45% 0.24 277.023);
	--color-secondary-content: oklch(13.602% 0.031 276.934);
	--color-accent: oklch(70% 0.213 47.604);
	--color-accent-content: oklch(14.472% 0.035 350.048);
	--color-neutral: oklch(20% 0.042 265.755);
	--color-neutral-content: oklch(85.589% 0.007 260.03);
	--color-info: oklch(74% 0.16 232.661);
	--color-info-content: oklch(0% 0 0);
	--color-success: oklch(72% 0.219 149.579);
	--color-success-content: oklch(15.69% 0.026 181.911);
	--color-warning: oklch(90% 0.182 98.111);
	--color-warning-content: oklch(16.648% 0.027 82.95);
	--color-error: oklch(63% 0.237 25.331);
	--color-error-content: oklch(14.357% 0.034 13.118);
	--radius-selector: 2rem;
	--radius-field: 2rem;
	--radius-box: 2rem;
}

.pb-safe {
	padding-bottom: env(safe-area-inset-bottom);
}

.pt-safe {
	padding-top: env(safe-area-inset-top);
}

body {
	min-height: 100dvh;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

.site-navbar {
	gap: 0.5rem;
}

.site-navbar-start,
.site-navbar-end {
	flex-wrap: nowrap;
}

.site-brand {
	min-width: 0;
	max-width: 100%;
}

.site-brand-image {
	max-width: min(42vw, 148px);
}

.site-nav-icon-btn {
	flex-shrink: 0;
}

.mobile-drawer-menu > li > a {
	gap: 0.625rem;
}

@media (max-width: 380px) {
	.site-navbar-shell {
		padding-left: 0.625rem;
		padding-right: 0.625rem;
	}

	.site-navbar {
		gap: 0.25rem;
	}

	.site-navbar-start {
		width: auto;
		flex: 1 1 auto;
	}

	.site-navbar-end {
		width: auto;
		flex: 0 0 auto;
		gap: 0.125rem;
	}

	.site-brand {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.site-brand-image {
		height: 2rem;
		max-width: min(34vw, 118px);
	}

	.site-nav-icon-btn {
		height: 2.5rem;
		width: 2.5rem;
		min-height: 2.5rem;
		min-width: 2.5rem;
		padding: 0;
	}

	.mobile-drawer-panel {
		width: min(100vw, 20rem);
		padding: 1rem 0.875rem 1.25rem;
	}

	.mobile-drawer-header {
		margin-bottom: 1rem;
	}

	.mobile-drawer-brand {
		padding-left: 0.125rem;
		padding-right: 0.125rem;
		min-width: 0;
	}

	.mobile-drawer-brand-image {
		height: 1.75rem;
		max-width: min(58vw, 132px);
	}

	.mobile-drawer-close {
		height: 2.5rem;
		width: 2.5rem;
		min-height: 2.5rem;
		min-width: 2.5rem;
	}

	.mobile-drawer-menu {
		padding: 0.5rem;
	}

	.mobile-drawer-menu > li > a {
		min-height: 2.625rem;
		padding: 0.625rem 0.75rem;
		gap: 0.5rem;
		font-size: 0.95rem;
	}
}