/* ==========================================================================


       LIQUID GLASS UI KIT — PAYROLL SYSTEM STYLESHEET


       ========================================================================== */

:root {
	/* Core Design Tokens */

	--bg: #0b0b0c;

	--card: rgba(28, 28, 30, 0.45);

	--cyan: #00e9e9;

	--amber: #ff9f0a;

	--purple: #bf5af2;

	--danger: #ff453a;

	--success: #32d74b;

	--text: #ffffff;

	--text-dim: #8e8e93;

	--border: rgba(255, 255, 255, 0.08);

	--blur: saturate(180%) blur(20px);

	/* Radius Variables */

	--radius-sm: 8px;

	--radius-md: 12px;

	--radius-xl: 20px;
}

/* 1. Base Reset & Environment Setup */

* {
	box-sizing: border-box;

	margin: 0;

	padding: 0;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;

	background-color: var(--bg);

	color: var(--text);

	min-height: 100vh;

	overflow-x: hidden;

	-webkit-font-smoothing: antialiased;
}

.page-layout {
	padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem
		calc(2rem + env(safe-area-inset-bottom, 0px)) 1rem;

	max-width: 500px;

	margin: 0 auto;

	position: relative;

	z-index: 10;
}

/* 2. Animated Deep Ambient Background Scene */

.scene {
	position: fixed;

	top: 0;

	left: 0;

	width: 100vw;

	height: 100vh;

	z-index: 1;

	overflow: hidden;

	pointer-events: none;

	background: radial-gradient(circle at 50% 50%, #111215 0%, #050506 100%);
}

.scene__blob {
	position: absolute;

	border-radius: 50%;

	filter: blur(80px);

	opacity: 0.15;

	animation: pulseBlob 12s infinite ease-in-out;
}

.scene__blob--primary {
	top: -10%;

	left: -10%;

	width: 50vw;

	height: 50vw;

	background: var(--cyan);
}

.scene__blob--secondary {
	bottom: -10%;

	right: -10%;

	width: 60vw;

	height: 60vw;

	background: var(--purple);

	animation-delay: -6s;
}

@keyframes pulseBlob {
	0%,
	100% {
		transform: scale(1) translate(0, 0);
	}

	50% {
		transform: scale(1.15) translate(5%, 5%);
	}
}

/* 3. Component: Glass Card Elements */

.glass-card {
	background: var(--card);

	backdrop-filter: var(--blur);

	-webkit-backdrop-filter: var(--blur);

	border: 1px solid var(--border);

	border-radius: var(--radius-xl);

	padding: 1.25rem;

	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

	position: relative;
}

.glass-card__title {
	font-size: 1rem;

	font-weight: 700;

	letter-spacing: -0.2px;

	color: #fff;
}

.glass-card__label {
	font-size: 0.75rem;

	text-transform: uppercase;

	letter-spacing: 0.5px;

	color: var(--text-dim);

	font-weight: 600;
}

/* 4. Component: UI Inputs & Selection Fields */

.glass-input {
	width: 100%;

	height: 44px;

	background: rgba(255, 255, 255, 0.05);

	border: 1px solid var(--border);

	border-radius: var(--radius-md);

	color: #fff;

	padding: 0 1rem;

	font-size: 0.95rem;

	outline: none;

	transition: all 0.2s ease;

	-webkit-appearance: none;
}

.glass-input:focus {
	border-color: var(--cyan);

	background: rgba(0, 233, 233, 0.03);

	box-shadow: 0 0 12px rgba(0, 233, 233, 0.15);
}

.glass-dropdown {
	position: relative;
}

.glass-dropdown::after {
	content: "▼";

	font-size: 0.65rem;

	color: var(--text-dim);

	position: absolute;

	right: 1rem;

	top: 50%;

	transform: translateY(-50%);

	pointer-events: none;
}

/* 5. Component: Interactive Glass Buttons */

.glass-btn {
	background: rgba(255, 255, 255, 0.06);

	border: 1px solid var(--border);

	color: #fff;

	border-radius: var(--radius-md);

	padding: 0.6rem 1rem;

	font-size: 0.85rem;

	font-weight: 600;

	cursor: pointer;

	transition: all 0.2s ease;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	-webkit-tap-highlight-color: transparent;
}

.glass-btn:active {
	transform: scale(0.97);

	opacity: 0.8;
}

.glass-btn--primary {
	background: linear-gradient(
		135deg,
		rgba(0, 233, 233, 0.25),
		rgba(0, 233, 233, 0.05)
	);

	border-color: rgba(0, 233, 233, 0.4);

	color: var(--cyan);

	text-shadow: 0 0 10px rgba(0, 233, 233, 0.2);
}

.glass-btn--icon {
	border-radius: 50%;

	padding: 0;

	font-size: 0.75rem;
}

/* 6. Component: Mobile Native Sized Input Controls */

.glass-check-label {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	cursor: pointer;

	user-select: none;
}

.glass-check-label input {
	position: absolute;

	opacity: 0;

	cursor: pointer;

	height: 0;

	width: 0;
}

.glass-check-box {
	width: 20px;

	height: 20px;

	background: rgba(255, 255, 255, 0.05);

	border: 1px solid var(--border);

	border-radius: 4px;

	position: relative;

	transition: all 0.2s ease;
}

.glass-check-label input:checked ~ .glass-check-box {
	background: var(--purple);

	border-color: var(--purple);
}

.glass-check-box::after {
	content: "";

	position: absolute;

	display: none;

	left: 6px;

	top: 2px;

	width: 5px;

	height: 10px;

	border: solid white;

	border-width: 0 2px 2px 0;

	transform: rotate(45deg);
}

.glass-check-label input:checked ~ .glass-check-box::after {
	display: block;
}

/* 7. Component: Premium Custom Toggle Switches */

.glass-switch-label {
	position: relative;

	display: inline-block;

	width: 46px;

	height: 26px;
}

.glass-switch-label input {
	opacity: 0;

	width: 0;

	height: 0;
}

.glass-switch-track {
	position: absolute;

	cursor: pointer;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: rgba(255, 255, 255, 0.1);

	border: 1px solid var(--border);

	border-radius: 26px;

	transition: 0.2s;
}

.glass-switch-thumb {
	position: absolute;

	content: "";

	height: 20px;

	width: 20px;

	left: 2px;

	bottom: 2px;

	background-color: white;

	border-radius: 50%;

	transition: 0.2s;
}

.glass-switch-label input:checked + .glass-switch-track {
	background-color: var(--success);
}

.glass-switch-label input:checked + .glass-switch-track .glass-switch-thumb {
	transform: translateX(20px);
}

/* 8. Component: Overlay Layer System Modals */

.glass-modal-backdrop {
	position: fixed;

	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;

	background: rgba(0, 0, 0, 0.6);

	backdrop-filter: blur(10px);

	-webkit-backdrop-filter: blur(10px);

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 1rem;

	opacity: 0;

	pointer-events: none;

	transition: opacity 0.2s ease;
}

.glass-modal-backdrop.is-open {
	opacity: 1;

	pointer-events: auto;
}

.glass-modal {
	background: var(--card);

	border: 1px solid var(--border);

	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);

	transform: scale(0.9);

	transition: transform 0.2s ease;
}

.glass-modal-backdrop.is-open .glass-modal {
	transform: scale(1);
}