/* =====================================================================
   Daywise Admin — design system
   One palette (same indigo family as the Daywise app), light + dark,
   one control height, one button system, shared motion.
   Markup, ids, classes and data-attributes are unchanged.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	color-scheme: light;
	--bg: #f4f6fb;
	--surface: #ffffff;
	--surface-2: #f6f8fc;
	--surface-3: #eef2fa;
	--border: #e2e8f3;
	--border-strong: #cdd7ea;
	--text: #1c2742;
	--muted: #68758f;
	--subtle: #93a0b9;

	--primary: #315dca;
	--primary-600: #2849a8;
	--primary-soft: #e8eeff;
	--primary-ring: rgba(49, 93, 202, 0.22);
	--violet: #6a4bc4;
	--violet-soft: #eee9fd;
	--success: #2a8560;
	--success-soft: #e2f4ea;
	--danger: #c8433d;
	--danger-soft: #fdebe5;
	--warn: #a96d12;
	--warn-soft: #fff2cf;

	--shadow-sm: 0 1px 2px rgba(20, 35, 70, 0.05), 0 3px 10px rgba(20, 35, 70, 0.04);
	--shadow: 0 10px 34px rgba(28, 48, 92, 0.09);
	--shadow-lg: 0 28px 80px rgba(12, 22, 52, 0.28);

	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 20px;
	--ctl-h: 40px; /* every input, select and standard button */
	--ctl-h-sm: 32px; /* buttons inside tables and expanded rows */
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	--font: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* legacy names still referenced by older rules / inline styles */
	--page-bg: var(--bg);
	--sidebar-bg: var(--surface);
	--accent: var(--primary);
	--accent-soft: var(--primary-soft);
	--accent-color: var(--primary);
	--primary-color: var(--primary);
	--theme-color: var(--success);
	--hover-bg: var(--surface-3);
	--hover-background: var(--surface-3);
	--text-color: var(--text);
	--border-color: var(--border);
	--card-bg: var(--surface);
	--card-background: var(--surface);
	--muted-color: var(--muted);
	--muted-text: var(--muted);
	--input-bg: var(--surface-2);
	--surface-muted: var(--surface-2);
}

html.dark,
body.dark {
	color-scheme: dark;
	--bg: #0d1220;
	--surface: #161c30;
	--surface-2: #1b2340;
	--surface-3: #232d4e;
	--border: #29334f;
	--border-strong: #3a466b;
	--text: #e8ecf9;
	--muted: #a0abc6;
	--subtle: #77839f;

	--primary: #8ca5ff;
	--primary-600: #a9bcff;
	--primary-soft: #232f63;
	--primary-ring: rgba(140, 165, 255, 0.3);
	--violet: #b7a4ff;
	--violet-soft: #2c2652;
	--success: #5fcb9b;
	--success-soft: #153a2c;
	--danger: #ff8a80;
	--danger-soft: #43202a;
	--warn: #f2b84b;
	--warn-soft: #3b2f15;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 10px rgba(0, 0, 0, 0.2);
	--shadow: 0 12px 38px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.6);
}

/* ---------- icons (masked SVGs, recoloured with currentColor) ---------- */
:root {
	--i-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
	--i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E");
	--i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
	--i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2'/%3E%3C/svg%3E");
	--i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
	--i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3L21 2M16 7l3 3M14 9l2 2'/%3E%3C/svg%3E");
	--i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0M17 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-5-6.7'/%3E%3C/svg%3E");
	--i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E");
	--i-language: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E");
	--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E");
	--i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E");
	--i-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368758f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--i-chevron-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0abc6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
[hidden] {
	display: none !important;
}
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	background:
		radial-gradient(900px 480px at 92% -8%, rgba(49, 93, 202, 0.1), transparent 60%),
		radial-gradient(700px 420px at -6% 105%, rgba(106, 75, 196, 0.07), transparent 60%),
		var(--bg);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}
button {
	cursor: pointer;
}
h1,
h2,
h3,
h4 {
	margin: 0;
	letter-spacing: -0.02em;
	color: var(--text);
}
p {
	margin: 0;
}
small {
	color: var(--muted);
}
hr {
	margin: 26px 0;
	border: 0;
	border-top: 1px solid var(--border);
}
.muted {
	color: var(--muted);
	font-size: 12.5px;
}
::selection {
	background: var(--primary-ring);
}
:focus-visible {
	outline: 3px solid var(--primary-ring);
	outline-offset: 2px;
}
* {
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 999px;
	background: var(--border-strong);
	background-clip: content-box;
}
::-webkit-scrollbar-track {
	background: transparent;
}

/* ---------- 3. Motion ---------- */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes popIn {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes rowIn {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(24px, -18px, 0) scale(1.08);
	}
}
@keyframes shimmer {
	to {
		background-position: -200% 0;
	}
}

/* every page cascades in, block by block */
.page-screen:not([hidden]) > :not(.form-container):not(.coverage-notice) {
	animation: fadeUp 0.55s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 70ms);
}
.page-screen > :nth-child(1) { --i: 0; }
.page-screen > :nth-child(2) { --i: 1; }
.page-screen > :nth-child(3) { --i: 2; }
.page-screen > :nth-child(4) { --i: 3; }
.page-screen > :nth-child(5) { --i: 4; }
.page-screen > :nth-child(6) { --i: 5; }
.page-screen > :nth-child(7) { --i: 6; }
.page-screen > :nth-child(n + 8) { --i: 7; }

/* table rows slide in one after another */
.holiday-table tbody tr,
.user-table-container tbody tr {
	animation: rowIn 0.45s var(--ease) both;
}
tbody tr:nth-child(1) { animation-delay: 0.02s; }
tbody tr:nth-child(2) { animation-delay: 0.05s; }
tbody tr:nth-child(3) { animation-delay: 0.08s; }
tbody tr:nth-child(4) { animation-delay: 0.11s; }
tbody tr:nth-child(5) { animation-delay: 0.14s; }
tbody tr:nth-child(6) { animation-delay: 0.17s; }
tbody tr:nth-child(7) { animation-delay: 0.2s; }
tbody tr:nth-child(8) { animation-delay: 0.23s; }
tbody tr:nth-child(9) { animation-delay: 0.26s; }
tbody tr:nth-child(10) { animation-delay: 0.29s; }
tbody tr:nth-child(n + 11) { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 4. App shell ---------- */
.admin-layout {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 276px minmax(0, 1fr);
	align-items: start;
}

/* sidebar */
.sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	padding: 22px 16px 16px;
	display: flex;
	flex-direction: column;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	backdrop-filter: blur(18px);
	border-right: 1px solid var(--border);
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 8px;
	color: var(--text);
	font-size: 18px;
	font-weight: 750;
	letter-spacing: -0.03em;
	text-decoration: none;
}
.brand-logo {
	display: block;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 14px;
	box-shadow: 0 8px 20px rgba(49, 93, 202, 0.22);
	transition: transform 0.4s var(--ease);
}
.brand:hover .brand-logo {
	transform: rotate(-6deg) scale(1.06);
}
.brand-light {
	font-weight: 450;
	color: var(--muted);
}
.sidebar-divider {
	height: 1px;
	margin: 20px 4px 14px;
	background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.navigation {
	flex: 1;
}
.sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
}

.nav-item,
.submenu-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--muted);
	text-align: left;
	font-weight: 600;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav-item {
	min-height: 44px;
	padding: 0 14px;
	border-radius: 13px;
	font-size: 14px;
}
.nav-item > span:first-of-type {
	flex: 1;
}
.nav-item::before,
.submenu-item::before {
	content: '';
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--icon, var(--i-dot)) center / contain no-repeat;
	mask: var(--icon, var(--i-dot)) center / contain no-repeat;
	opacity: 0.9;
}
.nav-item:hover,
.submenu-item:hover {
	background: var(--surface-3);
	color: var(--text);
	transform: translateX(3px);
}
.nav-item.active {
	color: #ffffff;
	background: linear-gradient(120deg, var(--primary), #5b7df0);
	box-shadow: 0 10px 22px rgba(49, 93, 202, 0.3);
}
html.dark .nav-item.active,
body.dark .nav-item.active {
	color: #0d1220;
	background: linear-gradient(120deg, #8ca5ff, #a9bcff);
	box-shadow: 0 10px 24px rgba(140, 165, 255, 0.22);
}
.nav-item.active:hover {
	transform: none;
}
.submenu-arrow {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1;
	transition: transform 0.25s var(--ease);
}
.nav-item[aria-expanded='false'] .submenu-arrow {
	transform: rotate(-90deg);
}
.submenu {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 2px 0 8px 22px;
	padding: 2px 0 2px 12px;
	border-left: 2px solid var(--border);
	animation: fadeIn 0.3s var(--ease);
}
.submenu-item {
	min-height: 38px;
	padding: 0 12px;
	border-radius: 11px;
	font-size: 13px;
}
.submenu-item::before {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
}
.submenu-item.active {
	color: var(--primary);
	background: var(--primary-soft);
	font-weight: 700;
}
.submenu-item.active::after {
	content: '';
	position: absolute;
	left: -14px;
	top: 9px;
	bottom: 9px;
	width: 3px;
	border-radius: 3px;
	background: var(--primary);
}

/* nav icons (masked SVGs follow the text colour) */
#holidaysMenuButton { --icon: var(--i-calendar); }
[data-page='holiday-dashboard'] { --icon: var(--i-grid); }
[data-page='view-holiday'] { --icon: var(--i-list); }
[data-page='holiday-type'] { --icon: var(--i-tag); }
[data-page='country-coverage'] { --icon: var(--i-globe); }
[data-page='holiday-schedule'] { --icon: var(--i-clock); }
[data-page='api-keys'] { --icon: var(--i-key); }
[data-page='user-management'] { --icon: var(--i-users); }
[data-page='notification'] { --icon: var(--i-bell); }
[data-page='translation'] { --icon: var(--i-language); }

/* profile */
.profile-area {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.profile-avatar {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: linear-gradient(145deg, var(--primary), var(--violet));
	color: #ffffff;
	font-weight: 750;
}
.profile-details {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	gap: 1px;
}
.profile-name {
	overflow: hidden;
	font-weight: 650;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.profile-role {
	color: var(--muted);
	font-size: 12px;
}
.profile-menu-button,
.theme-toggle {
	flex: 0 0 var(--ctl-h);
	display: grid;
	place-items: center;
	width: var(--ctl-h);
	height: var(--ctl-h);
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	font-size: 17px;
	line-height: 1;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.profile-menu-button {
	width: 34px;
	height: 34px;
	flex-basis: 34px;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	font-size: 20px;
	letter-spacing: -1px;
}
.profile-menu-button:hover,
.theme-toggle:hover {
	background: var(--surface-3);
	border-color: var(--border-strong);
}
.theme-toggle:hover #themeIcon {
	display: inline-block;
	transform: rotate(18deg);
}
#themeIcon {
	transition: transform 0.35s var(--ease);
}
.theme-toggle:active {
	transform: scale(0.94);
}
.profile-menu {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 8px);
	left: 0;
	right: 0;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
	animation: popIn 0.2s var(--ease);
}
.profile-menu button {
	width: 100%;
	min-height: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--text);
	text-align: left;
	font-weight: 550;
}
.profile-menu button:hover {
	background: var(--surface-3);
}
#signOutButton:hover {
	background: var(--danger-soft);
	color: var(--danger);
}

/* main column */
.main-content {
	min-width: 0;
}
.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	min-height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px clamp(20px, 3vw, 40px);
	background: color-mix(in srgb, var(--bg) 80%, transparent);
	backdrop-filter: blur(16px) saturate(1.4);
	border-bottom: 1px solid var(--border);
}
.page-heading h1 {
	font-size: 25px;
	font-weight: 780;
	letter-spacing: -0.035em;
}
.page-eyebrow {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
}
.workspace {
	padding: clamp(18px, 3vw, 40px);
	min-height: calc(100vh - 76px);
}
.page-screen {
	max-width: 1560px;
	margin: 0 auto;
}

/* ---------- 5. Page headers ---------- */
.holiday-dashboard-heading,
.schedule-page-header,
.coverage-header,
.holiday-source-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 24px;
}
.holiday-dashboard-heading h2,
.schedule-page-header h2,
.coverage-header h2,
.holiday-source-header h2 {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 780;
	letter-spacing: -0.035em;
}
.holiday-dashboard-heading p,
.schedule-page-header p,
.coverage-header p,
.holiday-source-header p {
	max-width: 70ch;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.55;
}
.holiday-dashboard-heading {
	display: block;
}

/* ---------- 6. Buttons — one system ---------- */
.add-holiday-button,
.load-from-api-button,
.primary-small,
.action-button,
.reset-button,
.secondary-button,
.danger-small,
.country-action,
.country-region-remove,
.region-add-button,
.icon-button,
.remove-translation-button,
.record-expand,
.language-picker-trigger,
.multi-dropdown-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--ctl-h);
	padding: 0 18px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), filter 0.2s var(--ease);
}
.add-holiday-button:hover,
.load-from-api-button:hover,
.primary-small:hover,
.reset-button:hover,
.secondary-button:hover,
.danger-small:hover,
.country-action:hover,
.country-region-remove:hover,
.icon-button:hover,
.remove-translation-button:hover,
.record-expand:hover,
.language-picker-trigger:hover,
.multi-dropdown-trigger:hover {
	transform: translateY(-1px);
	border-color: var(--primary);
	box-shadow: 0 6px 16px rgba(28, 48, 92, 0.12);
}
.add-holiday-button:active,
.load-from-api-button:active,
.primary-small:active,
.action-button:active,
.reset-button:active,
.secondary-button:active,
.danger-small:active,
.country-action:active,
.icon-button:active,
.record-expand:active {
	transform: translateY(0) scale(0.97);
	box-shadow: none;
}
button:disabled,
.add-holiday-button:disabled,
.reset-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* primary */
.add-holiday-button,
.primary-small,
.login-submit,
.confirm-accept {
	border-color: transparent;
	background: linear-gradient(120deg, var(--primary), #5b7df0);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(49, 93, 202, 0.28);
}
html.dark .add-holiday-button,
body.dark .add-holiday-button,
html.dark .primary-small,
body.dark .primary-small,
html.dark .login-submit,
body.dark .login-submit,
html.dark .confirm-accept,
body.dark .confirm-accept {
	background: linear-gradient(120deg, #8ca5ff, #a9bcff);
	color: #0d1220;
	box-shadow: 0 8px 22px rgba(140, 165, 255, 0.2);
}
.add-holiday-button:hover,
.primary-small:hover,
.login-submit:hover,
.confirm-accept:hover {
	border-color: transparent;
	filter: brightness(1.06);
	box-shadow: 0 12px 26px rgba(49, 93, 202, 0.36);
}
.add-holiday-button span {
	font-size: 19px;
	font-weight: 500;
	line-height: 1;
}

/* tonal (Import) */
.load-from-api-button {
	border-color: transparent;
	background: var(--primary-soft);
	color: var(--primary);
	box-shadow: none;
}
.load-from-api-button:hover {
	background: var(--primary-soft);
	filter: brightness(0.97);
}

/* secondary / outline */
.reset-button,
.secondary-button,
.country-action,
.country-region-remove,
.icon-button,
.remove-translation-button {
	background: var(--surface);
	color: var(--text);
}

/* danger */
.danger-small,
.country-action.danger {
	border-color: color-mix(in srgb, var(--danger) 35%, transparent);
	background: var(--danger-soft);
	color: var(--danger);
	box-shadow: none;
}
.danger-small:hover,
.country-action.danger:hover {
	border-color: var(--danger);
	background: var(--danger);
	color: #ffffff;
}

/* compact tier: buttons that live inside tables and expanded rows */
.holiday-table td button,
.user-table-container td button,
.record-actions button,
.api-key-actions button,
.user-row-actions button,
.country-row-actions button,
.holiday-translation-expand-row button,
.holiday-translation-row button,
.schedule-selection-actions .reset-button,
.new-type-row button {
	min-height: var(--ctl-h-sm);
	padding: 0 12px;
	border-radius: 10px;
	font-size: 12px;
}
.record-expand,
.icon-button,
.remove-translation-button {
	min-height: var(--ctl-h-sm);
	min-width: var(--ctl-h-sm);
	padding: 0;
	font-size: 17px;
	font-weight: 500;
}
.record-expand {
	flex: 0 0 var(--ctl-h-sm);
	width: var(--ctl-h-sm);
}
.holiday-table td .record-expand,
.holiday-translation-row .icon-button,
.holiday-translation-expand-row .icon-button {
	width: var(--ctl-h-sm);
	padding: 0;
	font-size: 17px;
}
.record-expand[aria-expanded='true'] {
	background: var(--primary-soft);
	border-color: var(--primary);
	color: var(--primary);
}
.remove-translation-button,
.holiday-translation-row .icon-button {
	width: var(--ctl-h);
	height: var(--ctl-h);
	min-height: var(--ctl-h);
	color: var(--danger);
}
#closeHolidayForm,
#closeCountryForm,
#closeHolidayTypeForm,
#closeApiKeyForm {
	flex: 0 0 var(--ctl-h);
	width: var(--ctl-h);
	padding: 0;
	font-size: 15px;
}

/* tabs (segmented control) */
.holiday-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 22px;
	padding: 5px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--surface-2);
}
.action-button {
	min-height: 38px;
	padding: 0 20px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--muted);
	box-shadow: none;
}
.action-button:hover {
	color: var(--text);
	background: var(--surface-3);
}
.action-button.active {
	background: var(--surface);
	color: var(--primary);
	box-shadow: var(--shadow-sm);
}

/* ---------- 7. Form controls ---------- */
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
select,
textarea {
	width: 100%;
	min-height: var(--ctl-h);
	padding: 0 13px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	outline: none;
	background: var(--surface-2);
	color: var(--text);
	font-size: 13.5px;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px;
	background-image: var(--i-chevron);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}
html.dark select,
body.dark select {
	background-image: var(--i-chevron-light);
}
select[multiple] {
	padding: 8px;
	background-image: none;
}
textarea {
	min-height: 84px;
	padding: 10px 13px;
	resize: vertical;
	line-height: 1.5;
}
input::placeholder,
textarea::placeholder {
	color: var(--subtle);
}
input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
	border-color: var(--subtle);
}
input:focus,
select:focus,
textarea:focus {
	border-color: var(--primary) !important;
	background: var(--surface);
	box-shadow: 0 0 0 4px var(--primary-ring) !important;
}
input:read-only:not([type='checkbox']),
input:disabled,
select:disabled {
	opacity: 0.72;
	cursor: not-allowed;
}
input[type='checkbox'],
input[type='radio'] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--primary);
	cursor: pointer;
}
input[type='date'],
input[type='time'] {
	cursor: pointer;
}
html.dark input[type='date']::-webkit-calendar-picker-indicator,
body.dark input[type='date']::-webkit-calendar-picker-indicator,
html.dark input[type='time']::-webkit-calendar-picker-indicator,
body.dark input[type='time']::-webkit-calendar-picker-indicator {
	filter: invert(0.85);
}
label {
	font-weight: 600;
}
.filter-field {
	display: flex;
	flex: 1 1 160px;
	min-width: 140px;
	flex-direction: column;
	gap: 7px;
}
.filter-field > label,
.holiday-edit-grid > label,
.region-entry-row label,
.country-region-picker > label {
	color: var(--muted);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.01em;
}
.filter-field small {
	line-height: 1.5;
}
.full-width {
	grid-column: 1 / -1;
}

/* toggle switches */
.bulk-toggle-label,
.schedule-enable {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-size: 13.5px;
	font-weight: 650;
	cursor: pointer;
	user-select: none;
}
.bulk-toggle-label input,
.schedule-enable input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.bulk-toggle-track,
.schedule-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: var(--border-strong);
	transition: background 0.25s var(--ease);
}
.bulk-toggle-track::after,
.schedule-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	transition: transform 0.28s var(--ease);
}
.bulk-toggle-label input:checked + .bulk-toggle-track,
.schedule-enable input:checked + .schedule-switch {
	background: var(--primary);
}
.bulk-toggle-label input:checked + .bulk-toggle-track::after,
.schedule-enable input:checked + .schedule-switch::after {
	transform: translateX(18px);
}
.bulk-toggle-label input:focus-visible + .bulk-toggle-track,
.schedule-enable input:focus-visible + .schedule-switch {
	outline: 3px solid var(--primary-ring);
	outline-offset: 2px;
}

/* ---------- 8. Cards ---------- */
.holiday-filters,
.schedule-card,
.account-card,
.user-create-form,
.api-key-warning,
.holiday-table-container,
.coverage-stat,
.holiday-dashboard-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

/* filter bar */
.holiday-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding: 20px;
	margin-bottom: 20px;
}
.filter-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.holiday-filters > button {
	flex: 0 0 auto;
}
.holiday-filters > .add-holiday-button {
	margin-left: auto;
}

/* dashboard */
.holiday-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	max-width: 960px;
}
.holiday-dashboard-card {
	position: relative;
	overflow: hidden;
	min-height: 168px;
	padding: 26px;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.holiday-dashboard-card::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -50px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--primary-soft), transparent 68%);
	animation: drift 9s ease-in-out infinite;
}
.holiday-dashboard-card::after {
	content: '';
	position: absolute;
	top: 22px;
	right: 22px;
	width: 26px;
	height: 26px;
	background-color: var(--primary);
	-webkit-mask: var(--card-icon, var(--i-globe)) center / contain no-repeat;
	mask: var(--card-icon, var(--i-globe)) center / contain no-repeat;
	opacity: 0.85;
}
.holiday-dashboard-card:nth-child(2)::after {
	--card-icon: var(--i-clock);
	background-color: var(--warn);
}
.holiday-dashboard-card:nth-child(2)::before {
	background: radial-gradient(circle, var(--warn-soft), transparent 68%);
}
.holiday-dashboard-card:hover {
	transform: translateY(-5px);
	border-color: var(--primary);
	box-shadow: var(--shadow);
}
.holiday-dashboard-card-label {
	position: relative;
	color: var(--muted);
	font-size: 14px;
	font-weight: 650;
}
.holiday-dashboard-card-value {
	position: relative;
	margin: 14px 0 8px;
	font-size: 46px;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.045em;
	background: linear-gradient(120deg, var(--primary), var(--violet));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.holiday-dashboard-card-note,
.holiday-dashboard-status {
	position: relative;
	color: var(--muted);
	font-size: 13px;
}
.holiday-dashboard-status {
	margin-top: 18px;
}

/* country coverage stats */
.coverage-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 22px;
}
.coverage-stat {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.coverage-stat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--primary);
}
.coverage-stat:nth-child(2)::before {
	background: var(--success);
}
.coverage-stat:nth-child(3)::before {
	background: var(--subtle);
}
.coverage-stat:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}
.coverage-stat span {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}
.coverage-stat strong {
	font-size: 30px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.coverage-toolbar {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	margin: 0 0 18px;
}
.coverage-search {
	flex: 1 1 280px;
	max-width: 520px;
}
.coverage-status-filter {
	flex: 0 0 200px;
}

/* notices */
.coverage-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 13px 16px;
	border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
	border-radius: var(--radius);
	background: var(--success-soft);
	color: var(--success);
	font-size: 13.5px;
	font-weight: 550;
	animation: popIn 0.35s var(--ease);
}
.coverage-notice::before {
	content: '';
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--i-check) center / contain no-repeat;
	mask: var(--i-check) center / contain no-repeat;
}
.coverage-notice.is-error {
	border-color: color-mix(in srgb, var(--danger) 40%, transparent);
	background: var(--danger-soft);
	color: var(--danger);
}
.coverage-notice.is-error::before {
	-webkit-mask-image: var(--i-alert);
	mask-image: var(--i-alert);
}
.api-key-warning {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 20px;
	padding: 16px 20px;
	border-color: color-mix(in srgb, var(--warn) 45%, transparent);
	background: var(--warn-soft);
	color: var(--text);
	font-size: 13.5px;
	box-shadow: none;
}
.api-key-warning strong {
	color: var(--warn);
	font-size: 14px;
}

/* ---------- 9. Tables ---------- */
.holiday-table-container,
.table-container {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.holiday-table,
.table-container table,
.user-table-container table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
}
.holiday-table {
	table-layout: auto;
	min-width: 640px;
}
.holiday-table.holiday-main-table {
	table-layout: fixed;
	min-width: 1450px;
}
.holiday-table.coverage-table {
	min-width: 780px;
}
.user-table-container table {
	min-width: 800px;
}
.holiday-table thead th,
.table-container thead th {
	position: sticky;
	top: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--muted);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
.holiday-table td,
.table-container td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
	text-align: left;
	overflow-wrap: anywhere;
}
.holiday-table tbody tr:last-child td,
.table-container tbody tr:last-child td {
	border-bottom: 0;
}
.holiday-table tbody tr,
.table-container tbody tr {
	transition: background 0.18s var(--ease);
}
.holiday-table tbody tr:hover,
.table-container tbody tr:hover {
	background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
}
.holiday-main-table .col-select { width: 4%; }
.holiday-main-table .col-date { width: 9%; }
.holiday-main-table .col-country { width: 9%; }
.holiday-main-table .col-region { width: 13%; }
.holiday-main-table .col-holiday { width: 16%; }
.holiday-main-table .col-type { width: 11%; }
.holiday-main-table .col-description { width: 20%; }
.holiday-main-table .col-translation-status { width: 8%; }
.holiday-main-table .col-status { width: 7%; }
.holiday-main-table .col-actions { width: 12%; }
.holiday-main-table td,
.holiday-main-table th {
	padding: 12px 14px;
}
.holiday-main-table .holiday-record-row > td {
	vertical-align: top;
}
.empty-table-message {
	padding: 40px 16px !important;
	color: var(--muted);
	text-align: center !important;
	font-size: 13.5px;
}
.bulk-select-cell {
	width: 44px;
	text-align: center !important;
}
.holiday-table input[data-edit-field],
.holiday-table textarea[data-edit-field] {
	min-height: var(--ctl-h-sm);
	padding: 6px 10px;
	font-size: 12.5px;
	border-radius: 9px;
}
.holiday-table textarea[data-edit-field] {
	min-height: 76px;
}
.holiday-name-cell {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.holiday-name-cell strong {
	padding-top: 5px;
	font-weight: 650;
}
.holiday-description-cell {
	display: block;
	max-height: 130px;
	overflow: auto;
	line-height: 1.5;
	color: var(--muted);
}
.record-actions,
.api-key-actions,
.user-row-actions,
.country-row-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.user-row-actions {
	min-width: 260px;
}
.user-row-actions select {
	width: auto;
	min-width: 96px;
	min-height: var(--ctl-h-sm);
	padding: 0 30px 0 10px;
	font-size: 12px;
	border-radius: 10px;
}
.draft-translations > td {
	padding: 12px 16px;
	background: var(--surface-2);
}
.holiday-translation-expand-row > td {
	padding: 0 !important;
	background: var(--surface-2);
}
.holiday-translations {
	padding: 18px 22px;
	border-top: 1px solid var(--border);
}
.holiday-translation-expand-row .holiday-translations {
	border-bottom: 1px solid var(--border);
}
.translation-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}
.translation-heading h3 {
	margin: 0 0 4px;
	font-size: 14.5px;
}
.translation-heading p {
	color: var(--muted);
	font-size: 12.5px;
}
.holiday-translation-row {
	display: grid;
	grid-template-columns: 150px 1fr 1fr 1.2fr 40px;
	gap: 10px;
	align-items: start;
	padding: 10px 0;
	border-bottom: 1px dashed var(--border-strong);
	white-space: normal;
}
.holiday-translation-row:last-child {
	border-bottom: 0;
}
.holiday-translation-row > label {
	padding: 10px 0;
	font-size: 12.5px;
	font-weight: 650;
}
.holiday-translation-row select,
.holiday-translation-row input,
.holiday-translation-row textarea {
	font-size: 12.5px;
}

/* ---------- 10. Pills & badges ---------- */
.country-code-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 26px;
	padding: 0 9px;
	border: 1px solid var(--border-strong);
	border-radius: 8px;
	background: var(--surface-2);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.05em;
}
.country-status,
.draft-status,
.api-key-status,
.schedule-status-pill,
.user-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 11px;
	border-radius: 999px;
	background: var(--surface-3);
	color: var(--muted);
	font-size: 12px;
	font-weight: 650;
	line-height: 1;
	text-transform: capitalize;
	white-space: nowrap;
}
.country-status::before,
.draft-status::before,
.api-key-status::before,
.schedule-status-pill::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.country-status.active,
.api-key-status.enabled,
.schedule-status-pill.success {
	background: var(--success-soft);
	color: var(--success);
}
.country-status.inactive {
	background: var(--surface-3);
	color: var(--subtle);
}
.api-key-status.disabled,
.schedule-status-pill.failed {
	background: var(--danger-soft);
	color: var(--danger);
}
.schedule-status-pill.partial,
.draft-status {
	background: var(--warn-soft);
	color: var(--warn);
}
.schedule-status-pill.running {
	background: var(--primary-soft);
	color: var(--primary);
}
.schedule-status-pill.running::before {
	animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
	50% {
		opacity: 0.25;
		transform: scale(0.7);
	}
}
.user-badge {
	height: 22px;
	margin-left: 8px;
	padding: 0 9px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 11px;
}
.api-key-subtext {
	display: block;
	max-width: 260px;
	margin-top: 4px;
	color: var(--muted);
	font-size: 11px;
	white-space: normal;
}
.region-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	margin-left: 6px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 11px;
	font-weight: 700;
}
.translation-status-icons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	white-space: nowrap;
}
.translation-status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
}
.translation-status-icon.is-translated,
.translation-status-icon.is-complete {
	background: var(--success-soft);
	color: var(--success);
}
.translation-status-icon.is-missing,
.translation-status-icon.is-incomplete {
	background: var(--surface-3);
	color: var(--subtle);
}
.translation-status-empty {
	color: var(--subtle);
}

/* ---------- 11. Bulk toolbar ---------- */
.holiday-bulk-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 14px;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}
.bulk-selected-count {
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--surface-3);
	color: var(--muted);
	font-size: 12px;
	font-weight: 650;
}
.translation-job-status {
	flex-basis: 100%;
	color: var(--muted);
	font-size: 12.5px;
}
.translation-job-status:empty {
	display: none;
}
.holiday-bulk-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-left: auto;
}

/* ---------- 12. Modals ---------- */
.form-container {
	position: fixed;
	z-index: 1000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
	background: rgba(8, 14, 32, 0.55);
	backdrop-filter: blur(7px);
	animation: fadeIn 0.22s var(--ease);
}
.holiday-modal {
	width: 100%;
	max-width: 760px;
	max-height: 92vh;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: 24px;
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	animation: popIn 0.32s var(--ease);
}
#addHolidayFormContainer .holiday-modal {
	max-width: 1000px;
}
.coverage-modal {
	max-width: 660px;
}
#holidayTypeFormContainer .holiday-modal,
#apiKeyFormContainer .holiday-modal {
	max-width: 600px;
}
.form-header,
.form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.holiday-modal .form-header {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 22px 28px;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	backdrop-filter: blur(10px);
}
.form-header h2 {
	font-size: 20px;
	font-weight: 750;
}
.form-header p {
	margin-top: 4px;
	color: var(--muted);
	font-size: 13px;
}
.holiday-modal form {
	padding: 24px 28px 28px;
}
.form-section-title {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
}
.holiday-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.holiday-form-grid .filter-field {
	flex: initial;
	min-width: 0;
}
.form-footer {
	justify-content: flex-end;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.translation-section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.translation-row {
	display: grid;
	grid-template-columns: minmax(140px, 0.8fr) minmax(160px, 1.2fr) minmax(150px, 1.1fr) minmax(160px, 1.2fr) 40px;
	gap: 10px;
	align-items: start;
	padding: 14px 0;
	border-top: 1px dashed var(--border-strong);
}
.translation-row select,
.translation-row input,
.translation-row textarea {
	min-width: 0;
}

/* confirm dialog (created by app.js) */
.daywise-confirm-dialog {
	width: min(92vw, 440px);
	padding: 30px;
	border: 1px solid var(--border);
	border-radius: 26px;
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--shadow-lg);
}
.daywise-confirm-dialog::backdrop {
	background: rgba(8, 14, 32, 0.55);
	backdrop-filter: blur(6px);
}
.daywise-confirm-dialog[open] {
	animation: popIn 0.28s var(--ease) both;
}
.confirm-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 15px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 22px;
	font-weight: 800;
}
.daywise-confirm-dialog h2 {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 750;
}
.confirm-message {
	margin: 0 0 26px;
	color: var(--muted);
	line-height: 1.65;
	overflow-wrap: anywhere;
}
.confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

/* ---------- 13. Pickers & popovers ---------- */
.country-combobox {
	position: relative;
	width: 100%;
}
.country-combobox input {
	padding-right: 38px;
	cursor: text;
}
.country-combobox::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: var(--muted);
	-webkit-mask: var(--i-chevron-mask) center / contain no-repeat;
	mask: var(--i-chevron-mask) center / contain no-repeat;
	pointer-events: none;
}
.country-combobox-options,
.multi-dropdown-menu,
.language-picker-popover {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
	animation: popIn 0.2s var(--ease);
}
.country-combobox-options {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 280px;
	padding: 6px;
	overflow-y: auto;
}
.country-combobox-option {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--text);
	text-align: left;
	font-size: 13.5px;
	cursor: pointer;
}
.country-combobox-option:hover,
.country-combobox-option:focus,
.country-combobox-option[aria-selected='true'] {
	background: var(--primary-soft);
	color: var(--primary);
	outline: none;
}
.country-combobox-empty {
	padding: 12px;
	color: var(--muted);
}
.country-filter-native-select {
	display: none !important;
}

.multi-dropdown {
	position: relative;
	min-width: 150px;
}
.multi-dropdown-trigger {
	justify-content: space-between;
	width: 100%;
	min-height: var(--ctl-h-sm);
	padding: 0 11px;
	border-radius: 10px;
	background: var(--surface-2);
	box-shadow: none;
	font-size: 12.5px;
	font-weight: 550;
	text-align: left;
}
.multi-dropdown-trigger span {
	flex: 0 0 auto;
	opacity: 0.7;
}
.multi-dropdown-menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	width: max(100%, 230px);
	max-width: 330px;
	max-height: 260px;
	padding: 9px;
	overflow: auto;
}
.multi-dropdown-search {
	display: block;
	width: calc(100% - 16px);
	margin: 8px;
	min-height: var(--ctl-h-sm);
}
.multi-dropdown-options {
	max-height: 220px;
	overflow-y: auto;
}
.holiday-check-option,
.holiday-type-checks label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 6px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
}
.holiday-check-option:hover {
	background: var(--surface-3);
}
.nationwide-option {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 9px 6px 3px;
	border-top: 1px solid var(--border);
}
.new-type-row {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--border);
}
.new-type-input {
	flex: 1;
	min-width: 0;
	min-height: var(--ctl-h-sm) !important;
	font-size: 12.5px;
}
.holiday-type-checks {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 160px;
	min-width: 120px;
	padding: 8px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 10px;
}
.holiday-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	max-height: 155px;
	padding: 9px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 10px;
}

/* language picker */
.language-dropdown-control {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 220px;
	max-width: 100%;
}
.language-picker-control {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 230px;
}
.language-dropdown-control .field-label,
.language-picker-control .field-label {
	color: var(--muted);
	font-size: 12px;
	font-weight: 650;
}
.language-picker-trigger {
	justify-content: space-between;
	width: 100%;
	box-shadow: none;
	background: var(--surface-2);
	font-weight: 550;
	text-align: left;
}
.language-picker-chevron {
	margin-left: auto;
	color: var(--muted);
}
.language-picker-popover {
	position: absolute;
	z-index: 1200;
	top: calc(100% - 26px);
	left: 0;
	width: min(390px, calc(100vw - 48px));
	max-width: 100%;
	padding: 10px;
}
.language-picker-popover input[type='search'] {
	display: block;
	margin: 0 0 8px;
}
.language-checkbox-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: 6px 10px;
	max-height: 190px;
	padding: 9px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}
.language-checkbox-option {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 7px 9px;
	border-radius: 9px;
	cursor: pointer;
	transition: background 0.15s var(--ease);
}
.language-checkbox-option:hover {
	background: var(--surface-3);
}
.language-checkbox-option input {
	flex: 0 0 auto;
}
.language-checkbox-option span {
	overflow-wrap: anywhere;
}
.language-picker-popover .language-checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 230px;
	min-width: 0;
	padding: 4px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 0;
}
.language-picker-popover .language-checkbox-option {
	width: 100%;
	align-items: flex-start;
}
.language-picker-popover .language-checkbox-option span {
	min-width: 0;
	white-space: normal;
}
.language-selected-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.language-selected-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 4px 8px 4px 11px;
	border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	animation: popIn 0.2s var(--ease);
}
.language-selected-chip button {
	flex: 0 0 auto;
	min-height: 0;
	padding: 0 2px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-size: 16px;
	line-height: 1;
}
.language-empty-selection {
	color: var(--muted);
	font-size: 12px;
}
.bulk-language-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 220px;
	color: var(--muted);
	font-size: 12px;
}
.bulk-language-field.language-dropdown-control {
	width: min(320px, 100%);
	flex: 0 1 320px;
}
#holidayLanguagePicker .language-picker-popover {
	top: 72px;
}
.country-language-config {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.country-language-row {
	display: flex;
	align-items: center;
	gap: 22px;
	width: 100%;
	min-width: 0;
}
.country-language-dropdown {
	flex: 0 0 220px;
	min-width: 220px;
	max-width: 260px;
}
.country-language-dropdown .language-picker-popover {
	top: calc(100% + 6px);
	left: 0;
	width: min(390px, calc(100vw - 48px));
}
.country-language-dropdown .language-checkbox-list {
	display: flex;
	flex-direction: column;
	max-height: 250px;
	overflow-x: hidden;
	overflow-y: auto;
}
.country-selected-languages {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	line-height: 1.5;
}
.selected-languages-label {
	flex: 0 0 auto;
	font-weight: 650;
}
#countryLanguageSelectedText {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--primary);
	font-weight: 600;
}
.country-language-config .language-picker-popover {
	box-sizing: border-box;
	padding: 10px;
	overflow: hidden;
}
.country-language-config .language-picker-popover .language-checkbox-list {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch;
	gap: 2px;
	width: 100%;
	max-height: 250px;
	min-width: 0;
	padding: 4px;
	overflow-x: hidden;
	overflow-y: auto;
}
.country-language-config .language-picker-popover .language-checkbox-option {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start;
	gap: 9px;
	width: 100%;
	min-height: 36px;
}
.country-language-config .language-picker-popover .language-checkbox-option input[type='checkbox'] {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	display: inline-block !important;
	position: static !important;
	flex: 0 0 17px !important;
}
.country-language-config .language-picker-popover .language-checkbox-option span {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
}
#countryHolidayLanguages {
	min-width: 230px;
	max-width: 300px;
	padding: 6px;
}
.configured-language-label {
	display: flex;
	align-items: center;
	min-width: 150px;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-2);
	font-size: 13px;
	font-weight: 600;
}

/* regions */
.region-manager-field {
	min-width: 0;
}
.region-library-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 2px 0 12px;
}
.region-library-hint {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}
.region-entry-row {
	display: grid;
	grid-template-columns: minmax(90px, 0.7fr) minmax(150px, 1.5fr) auto;
	gap: 10px;
	align-items: end;
}
.region-entry-row > div {
	min-width: 0;
}
.region-entry-row label,
.country-region-picker > label {
	display: block;
	margin-bottom: 6px;
}
.country-region-picker {
	margin-top: 16px;
	min-width: 0;
}
.country-region-select-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.country-region-select-row select {
	flex: 1;
	min-width: 0;
}
.country-region-remove {
	flex: 0 0 auto;
	color: var(--danger);
}

/* ---------- 14. Schedule, API keys, account, users ---------- */
.schedule-page-header {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
}
.schedule-card {
	padding: 26px;
	margin-bottom: 20px;
}
.schedule-form-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(180px, 1fr));
	gap: 18px;
}
.schedule-form-grid .filter-field {
	flex: initial;
	min-width: 0;
}
.schedule-country-section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.schedule-country-section h3,
.schedule-runs-card h3 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
}
.schedule-country-section p {
	color: var(--muted);
	font-size: 13px;
}
.schedule-country-mode {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 18px 0;
}
.schedule-country-mode label {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
}
.schedule-country-section > input[type='search'] {
	width: min(100%, 420px);
	margin-bottom: 12px;
}
.schedule-selection-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
}
.schedule-country-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px 14px;
	max-height: 250px;
	padding: 8px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.schedule-country-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s var(--ease);
}
.schedule-country-option:hover {
	background: var(--surface-3);
}
.schedule-country-option span {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.schedule-country-option small {
	white-space: nowrap;
}
.schedule-country-option:has(input:disabled) {
	opacity: 0.7;
}
.schedule-save-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.schedule-save-status {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
}
.schedule-save-row p {
	margin-top: 4px;
	font-size: 12.5px;
}
.schedule-runs-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.schedule-runs-heading h3 {
	margin: 0;
}
.schedule-runs-heading small {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 450;
}

.account-card {
	max-width: 760px;
	padding: 30px;
}
.account-card h2 {
	margin-bottom: 6px;
	font-size: 24px;
	font-weight: 780;
}
.account-card > p {
	margin-bottom: 18px;
	color: var(--muted);
}
.account-card h3 {
	margin-bottom: 6px;
}
.account-card .user-create-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 16px 0 6px;
	padding: 20px;
	box-shadow: none;
	background: var(--surface-2);
}
.account-card .user-create-form .add-holiday-button {
	align-self: flex-start;
}
.account-detail-row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
}
.account-detail-row span {
	color: var(--muted);
}
.account-card > .reset-button {
	margin-top: 20px;
}
.user-create-form {
	max-width: 1100px;
	margin: 0 0 24px;
	padding: 24px;
}
.user-create-form h3 {
	margin: 0 0 18px;
	font-size: 16px;
}
.user-form-grid {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.3fr) minmax(180px, 1fr) auto;
	align-items: end;
	gap: 14px;
}
.user-form-grid .filter-field {
	flex: initial;
	min-width: 0;
}
.user-create-form .coverage-notice {
	margin: 14px 0 0;
}
#userManagementStatus.error {
	color: var(--danger);
}
.type-search-toolbar {
	margin: 0 0 18px;
}

/* ---------- 15. Login ---------- */
.login-page {
	position: relative;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	overflow: hidden;
	background: var(--bg);
}
.login-page::before,
.login-page::after {
	content: '';
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
	animation: drift 14s ease-in-out infinite;
}
.login-page::before {
	top: -140px;
	left: -120px;
	width: 480px;
	height: 480px;
	background: #5b7df0;
}
.login-page::after {
	right: -140px;
	bottom: -160px;
	width: 520px;
	height: 520px;
	background: #8b6bea;
	animation-delay: -6s;
}
html.dark .login-page::before,
html.dark .login-page::after,
body.dark.login-page::before,
body.dark.login-page::after {
	opacity: 0.28;
}
.login-card {
	position: relative;
	z-index: 1;
	width: min(100%, 430px);
	padding: 40px 38px 36px;
	border: 1px solid color-mix(in srgb, var(--surface) 70%, transparent);
	border-radius: 28px;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(22px);
	box-shadow: var(--shadow-lg);
	animation: popIn 0.6s var(--ease) both;
}
.login-brand {
	margin-bottom: 30px;
	padding: 0;
}
.login-card h1 {
	margin-bottom: 8px;
	font-size: 31px;
	font-weight: 800;
	letter-spacing: -0.045em;
}
.login-card > p {
	margin-bottom: 26px;
	color: var(--muted);
	line-height: 1.6;
}
.login-card form {
	display: grid;
	gap: 8px;
}
.login-card label {
	margin-top: 6px;
	color: var(--muted);
	font-size: 12.5px;
}
.login-card input {
	min-height: 46px;
	margin-bottom: 4px;
	background: var(--surface-2);
}
.login-submit {
	width: 100%;
	min-height: 48px;
	margin-top: 14px;
	font-size: 14.5px;
}
.login-status {
	min-height: 22px;
	margin-top: 6px;
	font-size: 13px;
	color: var(--muted);
}
.login-status.error {
	color: var(--danger);
	font-weight: 600;
}
.login-card form > *:nth-child(n) {
	animation: fadeUp 0.55s var(--ease) both;
}
.login-card form > :nth-child(1) { animation-delay: 0.15s; }
.login-card form > :nth-child(2) { animation-delay: 0.2s; }
.login-card form > :nth-child(3) { animation-delay: 0.25s; }
.login-card form > :nth-child(4) { animation-delay: 0.3s; }
.login-card form > :nth-child(5) { animation-delay: 0.35s; }

/* ---------- 16. Responsive ---------- */
@media (max-width: 1180px) {
	.admin-layout {
		grid-template-columns: 240px minmax(0, 1fr);
	}
	.schedule-form-grid,
	.schedule-country-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.admin-layout {
		display: block;
	}
	.sidebar {
		position: relative;
		height: auto;
		padding: 14px 14px 12px;
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}
	.brand-light {
		display: none;
	}
	.sidebar-divider {
		margin: 12px 0 10px;
	}
	.navigation {
		overflow-x: auto;
		padding-bottom: 4px;
	}
	.sidebar-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
	}
	.nav-item,
	.submenu-item {
		flex: 0 0 auto;
		width: auto;
		min-height: 40px;
		padding: 0 14px;
		white-space: nowrap;
	}
	.nav-item > span:first-of-type {
		flex: 0 0 auto;
	}
	.submenu {
		flex-direction: row;
		margin: 0;
		padding: 0;
		border-left: 0;
		gap: 6px;
	}
	.submenu-item.active::after {
		display: none;
	}
	.nav-item:hover,
	.submenu-item:hover {
		transform: none;
	}
	.profile-area {
		margin-top: 8px;
		padding: 8px 10px;
	}
	.profile-menu {
		bottom: auto;
		top: calc(100% + 6px);
	}
	.topbar {
		min-height: 64px;
		padding: 10px 18px;
	}
	.page-heading h1 {
		font-size: 21px;
	}
	.workspace {
		padding: 18px;
	}
	.holiday-form-grid {
		grid-template-columns: 1fr;
	}
	.holiday-translation-row {
		grid-template-columns: 1fr 1fr;
	}
	.holiday-translation-row textarea {
		grid-column: 1 / -1;
	}
	.holiday-checklist {
		grid-template-columns: 1fr;
	}
	.user-form-grid {
		grid-template-columns: 1fr 1fr;
	}
	.user-form-grid button {
		justify-self: start;
	}
}
@media (max-width: 700px) {
	.coverage-header,
	.holiday-source-header,
	.schedule-page-header {
		align-items: flex-start;
		flex-direction: column;
	}
	.coverage-stats {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.coverage-toolbar {
		align-items: stretch;
		flex-direction: column;
	}
	.coverage-search,
	.coverage-status-filter {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}
	.holiday-filters {
		padding: 16px;
	}
	.holiday-filters > .add-holiday-button {
		margin-left: 0;
	}
	.holiday-actions {
		display: flex;
	}
	.action-button {
		flex: 1 1 auto;
		padding: 0 12px;
	}
	.language-dropdown-control,
	.bulk-language-field.language-dropdown-control,
	.language-picker-control {
		width: 100%;
		min-width: 0;
		flex-basis: 100%;
	}
	.language-picker-popover,
	.country-language-dropdown .language-picker-popover {
		width: 100%;
	}
	.language-checkbox-list {
		grid-template-columns: 1fr;
	}
	.country-language-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.country-language-dropdown {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		max-width: none;
	}
	.country-selected-languages {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	#countryHolidayLanguages {
		min-width: 100%;
		max-width: 100%;
	}
	.translation-row {
		grid-template-columns: minmax(0, 1fr) 40px;
	}
	.translation-row > *:not(.remove-translation-button) {
		grid-column: 1;
	}
	.translation-row .remove-translation-button {
		grid-column: 2;
		grid-row: 1;
	}
	.region-entry-row {
		grid-template-columns: 1fr 1fr;
	}
	.region-entry-row .region-add-button {
		grid-column: 1 / -1;
		width: 100%;
	}
	.country-region-select-row {
		align-items: stretch;
		flex-direction: column;
	}
	.country-region-remove {
		width: 100%;
	}
	.schedule-form-grid,
	.schedule-country-list,
	.user-form-grid {
		grid-template-columns: 1fr;
	}
	.schedule-card {
		padding: 18px;
	}
	.schedule-save-row {
		align-items: flex-start;
		flex-direction: column;
	}
	.holiday-modal .form-header {
		padding: 18px 18px;
	}
	.holiday-modal form {
		padding: 18px;
	}
	.form-container {
		padding: 12px;
		align-items: flex-end;
	}
	.login-card {
		padding: 30px 22px;
	}
	.holiday-dashboard-card-value {
		font-size: 38px;
	}
}


/* Keep the searchable country menu above the bulk-action toolbar. */
.holiday-filters {
	position: relative;
	z-index: 20;
}
.country-filter-field,
.country-combobox {
	position: relative;
	z-index: 21;
}
.country-combobox-options {
	z-index: 9999;
}
.holiday-bulk-toolbar {
	position: relative;
	z-index: 1;
}


/* Holiday-table dropdowns stay anchored to the row that owns them. */
.holiday-main-table tbody tr.dropdown-row-open {
  position: relative;
  z-index: 20;
}
.holiday-main-table .multi-dropdown { position: relative; min-width: 150px; }
.holiday-main-table .multi-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  width: max(100%, 230px);
  max-width: min(330px, 80vw);
  max-height: 260px;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.holiday-main-table .multi-dropdown-options {
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.holiday-main-table .multi-dropdown-menu[hidden] { display: none !important; }
.holiday-main-table input[data-pub-edit],
.holiday-main-table textarea[data-pub-edit] { width: 100%; min-width: 86px; box-sizing: border-box; font-size: 12px; }
.holiday-main-table input[type="date"] { min-width: 132px; cursor: pointer; }
.holiday-main-table .translation-status-icons { display: flex; align-items: center; justify-content: center; width: 100%; margin-inline: auto; }
.holiday-main-table td:has(.translation-status-icons) { text-align: center; vertical-align: middle; }


/* Published-holiday editor: allow the edited row to expand when a Region or
   Type dropdown is opened, instead of clipping the menu inside the table. */
.holiday-main-table tr.published-editing-row > td {
  vertical-align: top;
}
.holiday-main-table tr.published-editing-row .multi-dropdown-menu:not([hidden]) {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  margin-top: 5px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
}
.holiday-main-table tr.published-editing-row .multi-dropdown-options {
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
}


/* Schedule Download: style Run time like the other themed form controls,
   while preserving the browser's native time-picker indicator. */
#holidayScheduleForm #scheduleTime {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ctl-h);
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background-color: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  color-scheme: light;
}
html.dark #holidayScheduleForm #scheduleTime,
body.dark #holidayScheduleForm #scheduleTime {
  color-scheme: dark;
}
#holidayScheduleForm #scheduleTime:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
#holidayScheduleForm #scheduleTime::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Native select controls: match the rounded Daywise form-control theme and
   show exactly one themed chevron. Keep the browser's native option menu. */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--surface-2) !important;
  background-image: var(--i-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding-right: 36px !important;
  color: var(--text);
}

html.dark select,
body.dark select {
  background-image: var(--i-chevron-light) !important;
}

/* Keep the chevron visible while a select is focused; the base focus rule
   changes the surface colour but should not remove the arrow. */
select:focus {
  background-image: var(--i-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}
html.dark select:focus,
body.dark select:focus {
  background-image: var(--i-chevron-light) !important;
}

/* Multiple-select boxes are lists, not dropdowns. */
select[multiple] {
  background-image: none !important;
  padding: 8px !important;
}


/* Holiday filters: keep native dropdown fields visually aligned with the custom Country combobox. */
.holiday-filters #filterYear,
.holiday-filters #filterMonth {
	min-height: 38px;
	width: 100%;
	padding: 0 36px 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background-color: var(--surface-2);
	background-image: var(--i-chevron);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	color: var(--text);
	appearance: none;
	-webkit-appearance: none;
}
html.dark .holiday-filters #filterYear,
html.dark .holiday-filters #filterMonth,
body.dark .holiday-filters #filterYear,
body.dark .holiday-filters #filterMonth {
	background-image: var(--i-chevron-light);
}
.holiday-filters #filterYear:focus,
.holiday-filters #filterMonth:focus {
	background-color: var(--surface);
}