/* ── Keypad (Login + EventsCalendar) ─────────────────────────────── */
.form-container, .keypad-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--space-5);
}

.input-box {
	width: 200px;
	padding: var(--space-2);
	font-size: var(--text-md);
	text-align: center;
	margin: var(--space-1);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-elevated);
	cursor: pointer;
}

.input-box:focus {
	border-color: var(--color-primary);
	outline: none;
}

.keypad {
	display: grid;
	grid-template-columns: repeat(3, 60px);
	gap: var(--space-2);
	justify-content: center;
	align-items: center;
}

.key-button, .backspace-button, .accept-button {
	width: 60px;
	height: 60px;
	font-size: var(--text-lg);
	cursor: pointer;
	border: none;
	border-radius: var(--radius-md);
	transition: 0.3s;
}

.key-button {
	background-color: var(--color-success);
	color: var(--color-warning-text);
	font-weight: 600;
}

.key-button:hover {
	background-color: var(--color-brand-green);
}

.backspace-button {
	background-color: var(--color-danger);
	color: white;
}

.backspace-button:hover {
	background-color: var(--color-brand-red);
}

.accept-button {
	grid-column: span 3;
	width: 200px;
	background-color: var(--color-success);
	color: white;
	margin-top: var(--space-2);
}

.accept-button:hover {
	opacity: 0.9;
}

.title {
	text-align: center;
	margin-bottom: var(--space-5);
}

.accepted-message {
	text-align: center;
	font-size: var(--text-md);
	margin-top: 15px;
}

/* ── Swipe animation ──────────────────────────────────────────────── */
.swipe-card {
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.slide-out {
	transform: translateX(100vw);
	opacity: 0;
}

/* ── Calendar legend ──────────────────────────────────────────────── */
.calendar-legend {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-2) 15px;
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}

.legend-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.legend-color {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.legend-label {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
}

/* ============================================================
   TIMESHEET CALENDAR
   ============================================================ */

.timesheet-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-4);
}

.week-selector {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.week-selector select {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	min-width: 280px;
	background-color: var(--color-bg-elevated);
	color: var(--color-text);
}

.week-navigation {
	display: flex;
	gap: var(--space-2);
}

.week-navigation button {
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	cursor: pointer;
	font-size: var(--text-md);
}

.week-navigation button:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.week-navigation button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.timesheet-entries {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.timesheet-day {
	background: var(--color-bg-elevated);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.day-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-3) var(--space-4);
	background: rgba(0, 0, 0, 0.03);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	cursor: pointer;
	color: var(--color-text);
}

.day-header:hover {
	background: rgba(0, 0, 0, 0.06);
}

.day-name {
	font-weight: 600;
	color: var(--color-text);
}

.day-date {
	color: var(--color-text-muted);
	font-size: var(--text-base);
}

.day-hours {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.hours-badge {
	background: var(--color-success);
	color: var(--color-on-primary);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-xl);
	font-size: var(--text-sm);
	font-weight: 500;
}

.hours-badge.zero {
	background: var(--color-text-muted);
	color: var(--color-on-primary);
}

.hours-badge.approved {
	background: var(--color-primary);
}

.day-content {
	padding: var(--space-4);
	display: none;
	background: var(--color-bg-elevated);
}

.day-content.expanded {
	display: block;
}

.entry-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-3);
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.form-group label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: 500;
}

.form-group input {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-base);
	background: var(--color-bg-elevated);
	color: var(--color-text);
}

.form-group input:focus {
	outline: none;
	border-color: var(--color-primary);
}

.form-group input:disabled {
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
}

.week-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-4);
	background: var(--color-bg-elevated);
	border-radius: var(--radius-lg);
	flex-wrap: wrap;
	gap: var(--space-3);
}

.summary-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.summary-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.summary-value {
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--color-text);
}

.action-buttons {
	display: flex;
	gap: var(--space-3);
}

.status-indicator {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-xs);
}

.status-indicator.approved {
	color: var(--color-primary);
}

.status-indicator.pending {
	color: var(--color-warning-text);
	font-weight: 500;
}

.expand-icon {
	transition: transform 0.2s;
	color: var(--color-text-muted);
}

.expand-icon.expanded {
	transform: rotate(180deg);
}

.locked-badge {
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	display: flex;
	align-items: center;
	gap: 6px;
}

.epteam-loader-tall {
	min-height: 300px;
}

.epteam-loader-tall-column {
	min-height: 300px;
	flex-direction: column;
	gap: var(--space-4);
}

.epteam-loader-min-300 {
	min-height: 300px;
}

.epteam-loader-min-300-col {
	min-height: 300px;
	flex-direction: column;
	gap: 16px;
}

.timesheet-divider-row {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.timesheet-note-text {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.timesheet-event-divider {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
}

.timesheet-event-note {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

@media (max-width: 768px) {
	.week-selector {
		flex-direction: column;
		align-items: stretch;
	}

	.week-selector select {
		min-width: auto;
		width: 100%;
	}

	.week-navigation {
		justify-content: center;
	}

	.entry-form {
		grid-template-columns: 1fr 1fr;
	}

	.week-summary {
		flex-direction: column;
		text-align: center;
	}
}

/* ============================================================
   HOME PAGE — ADMIN TILES & RAG EVENT LIST
   ============================================================ */

.admin-tiles {
	--tile-radius: var(--radius-xl);
}

.admin-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
	padding: 18px;
	min-height: 150px;
	border-radius: var(--tile-radius);
	border: 1px solid rgba(255, 255, 255, 0.24);
	box-shadow: var(--shadow-xl);
	overflow: hidden;
	background: radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.82), rgba(245, 246, 250, 0.72));
	backdrop-filter: blur(8px);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
	cursor: pointer;
}

.admin-tile::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -30%;
	width: 160px;
	height: 160px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 65%);
	transform: rotate(18deg);
	pointer-events: none;
}

.admin-tile:hover {
	transform: translateY(-4px) translateZ(0);
	box-shadow: 0 28px 68px rgba(0, 0, 0, 0.16);
	border-color: rgba(255, 255, 255, 0.36);
}

.admin-icon {
	width: 60px;
	height: 60px;
	border-radius: var(--radius-xl);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	flex-shrink: 0;
	background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.72), rgba(8, 12, 26, 0.92));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(10px);
	color: var(--color-text-on-dark);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

.admin-icon i {
	color: var(--color-text-on-dark);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.admin-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	z-index: 1;
}

.admin-title {
	font-weight: 800;
	letter-spacing: 0.2px;
	color: var(--color-text-on-dark-muted);
	font-size: var(--text-md);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.admin-sub {
	color: var(--color-text-on-dark);
	font-size: var(--text-sm);
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.accent-green {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.24), rgba(4, 120, 87, 0.14));
	border-color: rgba(16, 185, 129, 0.32);
	color: var(--color-accent-green-text);
}

.accent-blue {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.12));
	border-color: rgba(59, 130, 246, 0.3);
	color: var(--color-brand-navy);
}

.accent-amber {
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(234, 179, 8, 0.14));
	border-color: rgba(251, 191, 36, 0.34);
	color: var(--color-accent-amber-text);
}

.accent-pink {
	background: linear-gradient(135deg, rgba(236, 72, 153, 0.24), rgba(219, 39, 119, 0.14));
	border-color: rgba(236, 72, 153, 0.32);
	color: var(--color-accent-pink-text);
}

.accent-orange {
	background: linear-gradient(135deg, rgba(249, 115, 22, 0.24), rgba(234, 88, 12, 0.14));
	border-color: rgba(249, 115, 22, 0.32);
	color: var(--color-accent-orange-text);
}

.accent-yellow {
	background: linear-gradient(135deg, rgba(234, 179, 8, 0.24), rgba(202, 138, 4, 0.14));
	border-color: rgba(234, 179, 8, 0.32);
	color: var(--color-accent-yellow-text);
}

.accent-red {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.24), rgba(220, 38, 38, 0.14));
	border-color: rgba(239, 68, 68, 0.32);
	color: var(--color-accent-red-text);
}

/* RAG Event List */
.event-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.event-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
	border-left: 4px solid transparent;
}

.event-row:hover {
	transform: translateX(4px);
	box-shadow: var(--shadow-md);
}

.event-rag-indicator {
	display: none;
}

.rag-red {
	border-left-color: var(--color-danger);
}

.rag-amber {
	border-left-color: var(--color-warning);
}

.rag-green {
	border-left-color: var(--color-success);
}

.event-info {
	flex: 1;
	min-width: 0;
}

.event-name {
	font-weight: 600;
	font-size: var(--text-base);
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.event-date {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: 2px;
}

.event-date i {
	margin-right: 4px;
}

.event-staffing {
	text-align: center;
	min-width: 80px;
}

.staffing-numbers {
	font-size: var(--text-lg);
	font-weight: 700;
}

.staffing-numbers .filled {
	color: var(--color-success);
}

.staffing-numbers .required {
	color: var(--color-text);
}

.staffing-label {
	font-size: 11px;
	color: var(--color-text-muted);
}

.standby-count {
	color: var(--color-primary);
	font-weight: 500;
}

.event-days {
	min-width: 70px;
	text-align: center;
}

.event-actions {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.progress-staffing {
	height: 20px;
}

.progress-staffing-sm {
	height: 6px;
	max-width: 100px;
}

.progress-engagement {
	height: 10px;
}

.progress-engagement-sm {
	height: 10px;
}

.progress-compliance-sm {
	height: 6px;
	max-width: 100px;
}

.progress-weekly-hours {
	height: 20px;
}

.progress-staffing-dashboard {
	height: 8px;
}

.staffing-td-progress {
	min-width: 100px;
}

.staffing-count-cell {
	min-width: 80px;
}

.cell-hour-limit {
	min-width: 80px;
}

.engagement-rank-cell {
	width: 40px;
}

.debug-banner {
	position: fixed;
	bottom: 60px;
	right: 10px;
	background: var(--color-danger);
	color: white;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	font-size: 10px;
	z-index: var(--z-toast);
}

@media (max-width: 576px) {
	.event-row {
		flex-wrap: wrap;
	}

	.event-info {
		flex: 1 1 60%;
	}

	.event-staffing {
		order: 3;
		flex: 1 1 50%;
		text-align: left;
		margin-top: var(--space-2);
	}

	.event-days {
		order: 4;
		flex: 1 1 50%;
		text-align: right;
		margin-top: var(--space-2);
	}

	.event-actions {
		display: none;
	}
}

/* ============================================================
   EMPLOYEE LIST
   ============================================================ */

.employee-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.employee-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
}

.employee-row:hover {
	transform: translateX(4px);
	box-shadow: var(--shadow-md);
}

.employee-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--color-border);
	background: linear-gradient(135deg, var(--color-text-muted), var(--color-border-strong));
}

.employee-avatar-placeholder {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--color-text-muted), var(--color-border-strong));
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
	font-weight: 600;
	border: 2px solid var(--color-border);
}

.employee-info {
	flex: 0 0 auto;
	min-width: 150px;
}

.employee-name {
	font-weight: 600;
	font-size: var(--text-md);
	color: var(--color-text);
}

.employee-details {
	flex: 1;
	min-width: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	align-items: center;
}

.employee-contact i {
	margin-right: 4px;
}

.employee-rating {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 120px;
}

.employee-rating .star {
	color: var(--color-warning);
	font-size: var(--text-md);
}

.employee-rating .star.empty {
	color: var(--color-border);
}

.employee-strikes {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 80px;
}

.employee-strike-flag {
	color: var(--color-danger);
	font-size: var(--text-lg);
}

.employee-actions {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.employee-name-cell {
	position: relative;
}

.employee-name-alert-badge {
	margin-left: var(--space-2);
	font-size: 0.7rem;
	padding: 0.25em 0.5em;
}

.employee-rating-link,
.employee-strikes-link {
	cursor: pointer;
}

@media (max-width: 768px) {
	.employee-row {
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.employee-avatar,
	.employee-avatar-placeholder {
		width: 48px;
		height: 48px;
		font-size: 20px;
	}

	.employee-info {
		flex: 1 1 calc(100% - 70px);
	}

	.employee-rating,
	.employee-strikes {
		order: 3;
		min-width: auto;
	}

	.employee-actions {
		display: none;
	}
}

/* ============================================================
   OFFLINE BANNER & SYNC STATUS
   ============================================================ */

.offline-banner {
	background: linear-gradient(135deg, var(--color-offline), var(--color-offline-dark));
	color: white;
	padding: var(--space-2) var(--space-4);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-weight: 500;
	font-size: var(--text-base);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 0;
	z-index: var(--z-overlay);
}

.offline-banner .offline-icon {
	font-size: 1.2rem;
}

.pending-banner {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: white;
	padding: var(--space-2) var(--space-4);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-weight: 500;
	font-size: var(--text-sm);
}

.pending-banner .sync-icon {
	animation: spin 1s linear infinite;
}


.pending-sync {
	border-left: 4px solid var(--color-offline) !important;
	position: relative;
}

.sync-badge {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	background: var(--color-offline);
	color: white;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xs);
}

.sync-badge .sync-spinner {
	animation: spin 1s linear infinite;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.profile-page {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.profile-container {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6) var(--space-8);
	margin-bottom: var(--space-6);
	background: var(--color-bg-subtle);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
}

.profile-section {
	margin-bottom: var(--space-8);
}

.profile-section h4 {
	color: var(--color-primary);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-primary);
}

.profile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.profile-field {
	background: var(--color-bg-elevated);
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.profile-field-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: 600;
	margin-bottom: var(--space-1);
	text-transform: uppercase;
}

.profile-image {
	max-width: 150px;
	max-height: 150px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	cursor: pointer;
}

.profile-tabs {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: center;
}

.profile-tab-button {
	border: 1px solid var(--color-border);
	background: var(--color-bg-elevated);
	color: var(--color-primary);
	border-radius: var(--radius-lg);
	width: 56px;
	min-height: 52px;
	font-size: var(--text-md);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1 1 56px;
	max-width: 120px;
}

.profile-tab-button i {
	font-size: var(--text-lg);
}

.profile-tab-label {
	font-size: var(--text-xs);
	line-height: 1;
	color: inherit;
	display: none;
}

.profile-tab-button:hover .profile-tab-label,
.profile-tab-button:focus-visible .profile-tab-label,
.profile-tab-button.active .profile-tab-label {
	display: block;
}

.profile-tab-button.active {
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-color: var(--color-primary);
}

.profile-tab-content {
	display: none;
}

.profile-tab-content.active {
	display: block;
}

.profile-field .form-control,
.profile-field .form-select,
.profile-field textarea {
	font-size: var(--text-sm);
}

.profile-field textarea {
	color: var(--color-text);
	background-color: var(--color-bg-elevated);
	border-color: var(--color-border-input);
}

.profile-field textarea::placeholder {
	color: var(--color-text-muted);
}

.profile-field .form-check-label,
.profile-field .text-muted {
	color: var(--color-text-muted) !important;
}

.profile-container .alert-info {
	color: var(--color-text);
}

.profile-page .form-check-input:disabled {
	filter: grayscale(100%);
}

.profile-section-divider {
	border-top: 1px solid var(--color-border);
	padding-top: 1rem;
}

.profile-field-action {
	display: flex;
	align-items: flex-end;
}

.profile-field-full {
	grid-column: 1 / -1;
}

.profile-notification-section-label {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}

.tab-alert-badge {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 0.7rem;
}

/* ============================================================
   RADZEN CALENDAR — FIX MONTH/YEAR PICKER
   ============================================================ */

.rz-yearpicker .rz-calendar-month,
.rz-yearpicker .rz-calendar-year,
.rz-calendar-panel .rz-calendar-year,
.rz-calendar-panel .rz-calendar-month,
.rz-datepicker .rz-calendar-month,
.rz-datepicker .rz-calendar-year {
	color: var(--rz-text-color, var(--color-text)) !important;
	background-color: transparent !important;
}

.rz-yearpicker .rz-calendar-month:hover,
.rz-yearpicker .rz-calendar-year:hover,
.rz-calendar-panel .rz-calendar-year:hover,
.rz-calendar-panel .rz-calendar-month:hover,
.rz-datepicker .rz-calendar-month:hover,
.rz-datepicker .rz-calendar-year:hover {
	background-color: var(--color-bg-subtle) !important;
	color: var(--color-primary) !important;
}

.rz-calendar-popup .rz-calendar-month,
.rz-calendar-popup .rz-calendar-year,
.rz-popup .rz-calendar-month,
.rz-popup .rz-calendar-year {
	color: var(--rz-text-color, var(--color-text)) !important;
	background-color: transparent !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: var(--space-5);
}

.login-card {
	background: var(--color-bg-elevated);
	padding: var(--space-10);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	width: 100%;
	max-width: 400px;
}

.login-logo {
	text-align: center;
	margin-bottom: 30px;
}

.login-logo img {
	max-width: 200px;
}

.login-card .form-container label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: 500;
	color: var(--color-text);
}

.login-card .input-box {
	width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-md);
	margin-bottom: var(--space-4);
	box-sizing: border-box;
	background: var(--color-bg-elevated);
	color: var(--color-text);
}

.login-card .input-box:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.login-card .keypad-container {
	margin-top: var(--space-5);
}

.login-accepted-message {
	text-align: center;
	margin-top: var(--space-4);
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	background: rgba(209, 106, 92, 0.08);
	color: var(--color-danger);
}

.password-wrapper {
	position: relative;
	width: 100%;
	margin-bottom: var(--space-4);
}

.password-wrapper .input-box {
	margin-bottom: 0;
	padding-right: 40px;
}

.toggle-password-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text-muted);
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

input::-ms-reveal,
input::-ms-clear {
	display: none !important;
}

.login-error-message {
	color: var(--color-danger);
}

.login-checkbox-label {
	font-weight: normal;
	cursor: pointer;
}

/* ============================================================
   COMPLIANCE DASHBOARD
   ============================================================ */

.compliance-intro {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 1.25rem;
	background: rgba(255, 255, 255, 0.96);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

.compliance-summary-card,
.compliance-section-card {
	border: 0;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

.compliance-summary-card .card-body {
	padding: 1.25rem;
}

.compliance-summary-label {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
}

.compliance-summary-meta {
	color: var(--color-text-muted);
	font-size: var(--text-base);
}

.compliance-issues-list {
	gap: 0.75rem;
}

.compliance-issue-item {
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: var(--space-4) 1.1rem;
	background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 100%);
	box-shadow: inset 4px 0 0 var(--color-primary);
}

.compliance-issue-item:hover {
	background: linear-gradient(180deg, var(--color-bg-subtle) 0%, var(--color-bg) 100%);
	border-color: var(--color-border-strong);
}

.compliance-issue-layout {
	align-items: center;
}

.compliance-issue-badges {
	display: flex;
	min-width: 88px;
	align-items: flex-start;
}

.issue-severity-badge {
	font-size: var(--text-xs);
	padding: 0.45rem 0.6rem;
	border-radius: var(--radius-pill);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.issue-top-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
}

.issue-type-label {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--color-primary);
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 0.22rem 0.55rem;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.issue-title {
	color: var(--color-text);
	font-size: var(--text-lg);
	margin-bottom: 0.2rem;
	line-height: var(--leading-tight);
}

.issue-description {
	color: var(--color-text);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	font-weight: 500;
}

.issue-meta {
	min-width: 110px;
	color: var(--color-text-muted);
	font-weight: 600;
}

.issue-date-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}

.issue-arrow {
	color: var(--color-text-muted);
	display: flex;
	align-items: center;
}

.compliance-tabs {
	gap: var(--space-1);
	border-bottom: 0;
}

.compliance-tabs .nav-link {
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-text-on-dark);
	font-weight: 600;
}

.compliance-tabs .nav-link.active {
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border-color: var(--color-bg-elevated);
}

.section-heading h6 {
	font-size: var(--text-md);
	font-weight: 700;
}

.compliance-table-wrapper {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	overflow: hidden;
}

.compliance-table {
	margin-bottom: 0;
	color: var(--color-text);
}

.compliance-table thead th {
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-bottom: 0;
	padding: 0.9rem 1rem;
	font-weight: 700;
	vertical-align: middle;
}

.compliance-table tbody td {
	padding: 0.95rem 1rem;
	vertical-align: middle;
	border-color: var(--color-border);
	color: var(--color-text);
	font-weight: 500;
}

.compliance-table tbody tr {
	background: var(--color-bg-elevated);
}

.compliance-table tbody tr.table-danger td {
	background: rgba(209, 106, 92, 0.08);
	color: var(--color-danger);
}

.compliance-table tbody tr.table-warning td {
	background: rgba(244, 233, 73, 0.12);
	color: var(--color-warning-text);
}

@media (max-width: 768px) {
	.compliance-intro {
		padding: 0.9rem 1rem;
	}

	.compliance-issue-item {
		padding: 0.9rem;
	}

	.compliance-issue-badges {
		min-width: auto;
	}

	.issue-top-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}

	.issue-meta {
		min-width: auto;
		text-align: left !important;
	}

	.compliance-table thead th,
	.compliance-table tbody td {
		padding: 0.75rem;
	}

	.row-action-link {
		font-size: var(--text-xs);
	}
}

/* ============================================================
   EVENT DETAILS
   ============================================================ */

.event-summary-card {
	background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-bg) 100%);
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.event-kicker,
.shift-kicker,
.split-kicker {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: 800;
}

.event-title {
	color: var(--color-text);
	font-weight: 800;
}

.event-client {
	color: var(--color-primary);
}

.event-additional-info {
	color: var(--color-text);
}

.event-meta-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: 800;
}

.shift-section-header {
	background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 100%);
	border-bottom: 1px solid var(--color-border);
}

.shift-title {
	color: var(--color-text);
	font-weight: 800;
}

.shift-time {
	color: var(--color-text);
	font-weight: 600;
}

.shift-count-badge {
	background: var(--color-bg-subtle);
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
	font-weight: 700;
}

.split-card {
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.split-detail-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	font-weight: 800;
	margin-bottom: 0.2rem;
}

.split-role-title {
	color: var(--color-text);
	font-weight: 800;
}

.split-time-row {
	color: var(--color-text-muted);
	font-weight: 600;
}

.split-status-badge {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-pill);
	font-size: 0.76rem;
	line-height: 1;
	font-weight: 800;
	border: 1px solid transparent;
	white-space: nowrap;
}

.status-available {
	background: var(--color-bg-subtle);
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

.status-applied {
	background: rgba(113, 178, 148, 0.15);
	color: var(--color-success);
	border-color: var(--color-success);
}

.status-removed {
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
	border-color: var(--color-border-strong);
}

.status-assigned {
	background: rgba(84, 128, 192, 0.12);
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.status-blocked {
	background: rgba(244, 233, 73, 0.15);
	color: var(--color-warning-text);
	border-color: var(--color-warning);
}

.split-status-note {
	border-radius: var(--radius-lg);
	padding: 0.85rem 1rem;
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.split-status-note-assigned {
	background: rgba(84, 128, 192, 0.08);
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

.split-status-note-blocked {
	background: rgba(244, 233, 73, 0.1);
	border: 1px solid var(--color-warning);
	color: var(--color-warning-text);
}

.split-status-note-applied {
	background: rgba(113, 178, 148, 0.1);
	border: 1px solid var(--color-success);
	color: var(--color-success);
}

.split-status-note-removed {
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
}

/* EventDetailsManagement applicant row status */
.applicant-row-cancelled {
	background-color: rgba(var(--color-danger-rgb), 0.15);
	border-left: 3px solid var(--color-danger);
}

.applicant-row-confirmed {
	background-color: rgba(var(--color-success-rgb), 0.15);
	border-left: 3px solid var(--color-success);
}

.applicant-row-proposed {
	background-color: rgba(var(--color-warning-rgb), 0.12);
	border-left: 3px solid var(--color-warning);
}

.select-shift-filter {
	max-width: 400px;
}

.input-search-applicants {
	max-width: 420px;
}

.select-applicant-status {
	max-width: 220px;
}

.list-scrollable-applicants {
	max-height: 600px;
	overflow-y: auto;
}

.select-filter-sm {
	max-width: 420px;
}

.select-allocation-status {
	max-width: 220px;
}

.list-scrollable {
	max-height: 600px;
	overflow-y: auto;
}

/* ============================================================
   AVAILABILITY CALENDAR
   ============================================================ */

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	max-width: 100%;
	margin: 0 auto;
	min-height: 320px;
	height: auto;
}

.calendar-header {
	padding: 6px;
	font-size: var(--text-xs);
}

.calendar-day {
	aspect-ratio: 1;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-weight: 500;
	border: 2px solid transparent;
	transition: all 0.2s ease;
	color: var(--color-text);
	font-size: var(--text-md);
	padding: var(--space-2);
	outline: none;
}

.calendar-day:focus {
	box-shadow: 0 0 0 2px var(--color-primary);
	z-index: var(--z-base);
}

.calendar-day.empty {
	cursor: default;
	background-color: transparent;
}

.calendar-day.past {
	background-color: var(--color-bg-subtle);
	color: var(--color-text-muted);
	cursor: not-allowed;
	opacity: 0.5;
}

.calendar-day.available {
	background-color: var(--color-available);
	color: var(--color-on-primary);
}

.calendar-day.not-available {
	background-color: var(--color-not-available);
	color: var(--color-on-primary);
}

.calendar-day.maybe {
	background-color: var(--color-maybe);
	color: var(--color-warning-text);
}

.calendar-day.no-status {
	background-color: var(--color-bg-elevated);
	color: var(--color-text);
}

.calendar-day.selected {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	transform: scale(1.05);
}

.calendar-day:not(.empty):not(.past):hover {
	transform: scale(1.05);
	box-shadow: var(--shadow-sm);
}

.legend-box {
	width: 18px;
	height: 18px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.availability-legend-panel {
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	padding: var(--space-2);
	font-size: 0.85rem;
}

.availability-legend-text {
	color: var(--color-text);
}

.availability-action-panel {
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	padding: var(--space-2);
}

.availability-action-heading {
	color: var(--color-primary);
	font-size: 0.9rem;
}

.availability-help-text {
	font-size: 0.9rem;
}

.availability-legend-items {
	font-size: 0.85rem;
}

.legend-box-unknown {
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
}

.legend-box-available {
	background-color: var(--color-available);
}

.legend-box-not-available {
	background-color: var(--color-not-available);
}

.legend-box-maybe {
	background-color: var(--color-maybe);
}

.legend-box-primary {
	background-color: var(--color-primary);
}

@media (max-width: 600px) {
	.calendar-grid {
		max-width: 100%;
		min-height: 240px;
		max-height: 60vh;
		overflow-y: auto;
		gap: 1px;
	}

	.calendar-day {
		min-width: 30px;
		min-height: 30px;
		font-size: var(--text-base);
		padding: 2px;
	}
}

/* ============================================================
   EVENTS CALENDAR (RADZEN SCHEDULER)
   ============================================================ */

.rz-scheduler-month-view .rz-events-container {
	max-height: none !important;
	overflow: visible !important;
}

.rz-scheduler-month-view .rz-event-more {
	display: none !important;
}

.rz-scheduler-month-view .rz-scheduler-cell {
	min-height: 80px !important;
	vertical-align: top !important;
}

@media (max-width: 768px) {
	.rz-scheduler {
		font-size: var(--text-sm) !important;
		height: auto !important;
		min-height: 400px !important;
		max-height: 70vh !important;
		overflow-y: auto !important;
	}

	.rz-scheduler-header {
		font-size: var(--text-base) !important;
	}

	.rz-scheduler-cell {
		min-height: 100px !important;
		padding: 4px !important;
	}

	.rz-event {
		font-size: var(--text-xs) !important;
		padding: 2px 4px !important;
		min-height: 24px !important;
	}

	.calendar-legend {
		font-size: var(--text-xs);
		gap: var(--space-2);
		padding: var(--space-2);
	}

	.legend-color {
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 480px) {
	.rz-scheduler {
		font-size: var(--text-xs) !important;
		height: auto !important;
		min-height: 300px !important;
		max-height: 60vh !important;
		overflow-y: auto !important;
	}

	.rz-scheduler-cell {
		min-height: 50px !important;
		padding: 2px !important;
	}

	.rz-event {
		font-size: var(--text-xs) !important;
		padding: 1px 2px !important;
		min-height: 20px !important;
	}
}

/* ============================================================
   ATTENDANCE STATUS — RADZEN OVERRIDES
   ============================================================ */

.rz-dropdown-panel .rz-dropdown-item {
	color: var(--color-text) !important;
}

.rz-dropdown-panel .rz-dropdown-item:hover,
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
	background-color: var(--color-bg-subtle) !important;
	color: var(--color-text) !important;
}

/* ============================================================
   EVENTS VIEWER
   ============================================================ */

.week-header {
	padding: var(--space-3) var(--space-5);
	background-color: var(--color-surface-dark);
	border-left: 5px solid var(--color-warning);
	border-radius: var(--radius-sm);
	color: var(--color-text-on-dark);
}

.event-card {
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.event-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.week-section {
	padding-bottom: var(--space-4);
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */

.notifications-list {
	max-width: 800px;
	margin: 0 auto;
}

.notification-card-unread {
	border-left: 4px solid var(--color-primary);
	cursor: pointer;
}

.notification-card-read {
	border-left: 4px solid rgba(44, 50, 86, 0.3);
	cursor: default;
}

.notification-timestamp {
	color: var(--color-text-muted);
}

.col-message-wide {
	min-width: 320px;
}

/* ============================================================
   COMPLETED SHIFTS TAB
   ============================================================ */

.completed-shifts-container {
	padding: var(--space-4) 0;
}

.completed-shifts-container .card-header h5 {
	font-size: var(--text-xl);
}

.completed-shifts-container .card-header small {
	font-size: var(--text-sm);
}

.completed-shifts-container .card-body {
	font-size: var(--text-base);
}


/* ============================================================
   ACCREDITATION PAGE
   ============================================================ */

.accreditation-status-badge {
	background-color: var(--color-warning-text);
	color: var(--color-on-primary);
	border-radius: var(--radius-pill);
	padding: 0.65rem 1rem;
}

.accreditation-missing-fields {
	background-color: var(--color-warning-text);
	color: var(--color-on-primary);
	border: 1px solid var(--color-danger);
	border-radius: var(--radius-xl);
}