@font-face {
		font-family: 'Barlow Daxko';
		src: url('/assets/Barlow Daxko Weights/Barlow-Regular.ttf') format('truetype');
		font-weight: 400;
		font-style: normal;
	}
	@font-face {
		font-family: 'Barlow Daxko';
		src: url('/assets/Barlow Daxko Weights/Barlow-Italic.ttf') format('truetype');
		font-weight: 400;
		font-style: italic;
	}
	@font-face {
		font-family: 'Barlow Daxko';
		src: url('/assets/Barlow Daxko Weights/Barlow-SemiBold.ttf') format('truetype');
		font-weight: 600;
		font-style: normal;
	}
	@font-face {
		font-family: 'Barlow Daxko';
		src: url('/assets/Barlow Daxko Weights/Barlow-SemiBoldItalic.ttf') format('truetype');
		font-weight: 600;
		font-style: italic;
	}
	@font-face {
		font-family: 'Barlow Daxko';
		src: url('/assets/Barlow Daxko Weights/Barlow-Bold.ttf') format('truetype');
		font-weight: 700;
		font-style: normal;
	}
	@font-face {
		font-family: 'Barlow Daxko';
		src: url('/assets/Barlow Daxko Weights/Barlow-BoldItalic.ttf') format('truetype');
		font-weight: 700;
		font-style: italic;
	}
body {
	font-family: 'Barlow Daxko', 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	}
:root{
	--bg: #0b0f14;
	--panel: #11161d;
	--panel2: #161c26;
	--border: #1f2a37;
	--border2: #2a3647;
	--text: #e7ebf2;
	--muted: #b6bfcc;
	--muted2: #8b94a3;
	--danger: #ff5b5b;
	--ok: #3ccf91;
	--radius: 16px;
	--radius2: 12px;
	--shadow: 0 18px 40px rgba(0,0,0,.45);
	--focusRing: rgba(56,189,248,.22);
	--focusRing2: rgba(56,189,248,.12);
	--text-lg: 18px;
	--text-md: 14px;
	--text-sm: 12px;
	--control-radius: 12px;
	--bg-grad: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.08), transparent 60%),
		radial-gradient(900px 500px at 90% 10%, rgba(99,102,241,.08), transparent 55%),
		linear-gradient(180deg, #0b0f14 0%, #0f1520 100%);
}
body.light,
html[data-theme="light"]{
	color-scheme: light;
	--bg: #f5f7fb;
	--panel: #ffffff;
	--panel2: #f1f4f9;
	--border: #e3e7ef;
	--border2: #d6dbe6;
	--text: #1f2937;
	--muted: #4b5563;
	--muted2: #6b7280;
	--danger: #d83a3a;
	--ok: #168f5b;
	--shadow: 0 12px 28px rgba(15,23,42,.10);
	--focusRing: rgba(14,165,233,.20);
	--focusRing2: rgba(14,165,233,.10);
	--bg-grad: radial-gradient(1200px 700px at 10% -10%, rgba(56,189,248,.12), transparent 60%),
		radial-gradient(900px 500px at 90% 10%, rgba(14,165,233,.10), transparent 55%),
		linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
}
html[data-theme="dark"] select, body.dark select {
	background: #222 !important;
	color: #fff !important;
}
html[data-theme="dark"] select option, body.dark select option {
	background: #222 !important;
	color: #fff !important;
}
:root{
	--ui-surface: var(--panel2, rgba(255,255,255,.06));
	--ui-surface-hover: rgba(255,255,255,.10);
	--ui-border: var(--border2, rgba(255,255,255,.18));
	--ui-divider: var(--border, rgba(255,255,255,.12));
	--ui-menu-bg: var(--panel, #0f1115);
	--ui-pill-bg: rgba(255,255,255,.04);
	--ui-muted: var(--muted2, rgba(255,255,255,.55));
}
body.light, html[data-theme="light"]{
	--ui-surface: var(--panel2, rgba(0,0,0,.04));
	--ui-surface-hover: rgba(0,0,0,.06);
	--ui-border: var(--border2, rgba(0,0,0,.18));
	--ui-divider: var(--border, rgba(0,0,0,.12));
	--ui-menu-bg: var(--panel, #fff);
	--ui-pill-bg: rgba(0,0,0,.04);
	--ui-muted: var(--muted2, rgba(0,0,0,.55));
}

html, body{ min-height:100%; }
body{
	background: var(--bg);
	color: var(--text);
	position: relative;
	font-size: var(--text-md);
	line-height: 1.5;
}
body::before{
	content:"";
	position: fixed;
	inset: 0;
	background: var(--bg-grad);
	z-index: -1;
}

.card{
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	background: var(--panel);
}
.cardHeader{
	background: var(--panel2);
	border-bottom: 1px solid var(--border);
}

h1{ font-size: 24px; letter-spacing: .2px; }
h2{ font-size: 18px; letter-spacing: .2px; }
label{
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: .3px;
	color: var(--muted2);
}
.cardTitle{ font-size: 16px; font-weight: 800; }
.cardSub{ font-size: 12px; font-weight: 700; }
table{ font-size: 13px; }
th{ font-size: 12px; letter-spacing: .2px; }

button,
.iconBtn,
.tabBtn,
.kebabBtn,
input,
select,
textarea{
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
input,
select,
textarea{
	border-radius: var(--control-radius);
	border: 1px solid var(--ui-border);
	background: var(--ui-surface);
	color: var(--text);
}
input::placeholder,
textarea::placeholder{
	color: var(--muted2);
}
button:focus-visible,
.iconBtn:focus-visible,
.tabBtn:focus-visible,
.kebabBtn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
	outline: none;
	border-color: var(--border2);
	box-shadow: 0 0 0 3px var(--focusRing);
}

button,
.iconBtn,
.tabBtn,
.kebabBtn{
	background: var(--ui-surface) !important;
	border: 1px solid var(--ui-border) !important;
	color: var(--text, #fff) !important;
}
button:hover,
.iconBtn:hover,
.tabBtn:hover,
.kebabBtn:hover{
	background: var(--ui-surface-hover) !important;
}

.pill{
	background: var(--ui-pill-bg) !important;
	border: 1px solid var(--ui-border) !important;
	color: var(--muted, #c9c9c9) !important;
}
.divider,
.dropdownDivider{
	background: var(--ui-divider) !important;
}

.stackField{
	display:flex;
	flex-direction:column;
	gap:6px;
}
.stackField + .stackField{
	margin-top:10px;
}

.dropdownMenu{
	background: var(--ui-menu-bg) !important;
	color: var(--text, #fff) !important;
	border: 1px solid var(--ui-border) !important;
	opacity: 1 !important;
}
.dropdownMenu .dropdownItem{
	color: var(--text, #fff) !important;
}
.dropdownMenu .dropdownItem:hover{
	background: var(--ui-surface-hover) !important;
}
.dropdownMenu .dangerItem{
	color: var(--danger, #ff4d4d) !important;
}
.dropdownMenu .dangerItem:hover{
	background: rgba(255,77,77,.12) !important;
}
.dropdownMenu .dropdownLabel{
	color: var(--ui-muted) !important;
}
.dropdownMenu .dropdownValue{
	color: var(--text, #fff) !important;
}

.kebabMenu{
	background: var(--ui-menu-bg) !important;
	border: 1px solid var(--ui-border) !important;
}
.kebabItem{
	color: var(--text, #fff) !important;
}
.kebabItem:hover{
	background: var(--ui-surface-hover) !important;
}

.dangerBtn{
	border-color: rgba(255,77,77,.45) !important;
	color: rgba(255,200,200,.95) !important;
}
body.light .dangerBtn, html[data-theme="light"] .dangerBtn{
	color: rgba(215,51,51,.95) !important;
	border-color: rgba(215,51,51,.45) !important;
}
.dangerBtn:hover{
	background: rgba(255,77,77,.12) !important;
}
.okBtn{
	border-color: rgba(61,220,151,.45) !important;
	color: rgba(210,255,235,.95) !important;
}
body.light .okBtn, html[data-theme="light"] .okBtn{
	color: rgba(27,155,103,.95) !important;
	border-color: rgba(27,155,103,.45) !important;
}
.okBtn:hover{
	background: rgba(61,220,151,.12) !important;
}
.kebabDanger{
	border-color: rgba(255,77,77,.45) !important;
}
.kebabDanger:hover{
	background: rgba(255,77,77,.12) !important;
}

.swapCoverageHead{
	width: var(--swapCoverageW);
	min-width: var(--swapCoverageW);
	box-sizing: border-box;
	padding: 6px 6px;
	flex: 0 0 var(--swapCoverageW);
}
.swapStaffHead.swapCoverageHead,
.swapDayHead.swapCoverageHead{
	width: var(--swapCoverageW) !important;
	min-width: var(--swapCoverageW) !important;
	flex: 0 0 var(--swapCoverageW);
}
.swapNameHead{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.swapCoverageGroup{
	box-sizing: border-box;
	padding: 6px 4px;
	font-size: 11px;
	line-height: 1.1;
}


.u-pad-12{ padding:12px; }
.u-p-16{ padding:16px; }
.u-fw-800{ font-weight:800; }
.u-fw-900{ font-weight:900; }
.u-label-block{ display:block; margin-bottom:6px; }
.u-text-right{ text-align:right; }
.u-mono{ font-family:var(--mono); }
.u-ui{ font-family:var(--ui); }
.u-maxw-900{ max-width:900px; }
.u-mx-auto{ margin-left:auto; margin-right:auto; }
.u-my-30{ margin-top:30px; margin-bottom:30px; }
.u-mt-10{ margin-top:10px; }
.u-mt-6{ margin-top:6px; }
.u-mb-10{ margin-bottom:10px; }
.u-flex{ display:flex; }
.u-gap-8{ gap:8px; }
.u-wrap{ flex-wrap:wrap; }
.u-space-between{ justify-content:space-between; }
.u-items-center{ align-items:center; }
.u-inline-block{ display:inline-block; }
.u-text-inherit{ color:inherit; }
.u-no-underline{ text-decoration:none; }

body .cards{ width:100%; }
body .card{ width:100%; max-width:100%; }
html, body{ width:100%; max-width:none; }
body{ display:block; }
.page{ width:100%; max-width:none; }
#cards{ width:100%; max-width:none; }
body > .page{ min-width:100vw; box-sizing:border-box; }
#cards{ min-width:100%; }