:root {
	color-scheme: light;
	--ink: #17221f;
	--muted: #66736e;
	--line: #d8e0dc;
	--paper: #f7faf8;
	--panel: #ffffff;
	--accent: #176b5b;
	--accent-dark: #0d4c41;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: radial-gradient(circle at top right, #dcefe7 0, transparent 36%), var(--paper);
	color: var(--ink);
	font-family: Georgia, 'Times New Roman', serif;
}

.timecard-shell { max-width: 1900px; margin: 0 auto; padding: 42px 28px 64px; }
.controls-row { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.8fr); gap: 22px; align-items: start; margin-bottom: 14px; }
.page-header { min-width: 0; }
.dashboard-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; color: var(--ink); border: 1px solid var(--line); background: #fff; font: 700 12px/1.2 Arial, sans-serif; text-decoration: none; transition: border-color .2s, color .2s, transform .2s; }
.dashboard-link span:first-child { color: var(--accent); font-size: 18px; line-height: 11px; }
.dashboard-link:hover, .dashboard-link:focus-visible { color: var(--accent); border-color: var(--accent); transform: translateX(-2px); }
.eyebrow { margin: 30px 0 8px; color: var(--accent); font: 700 12px/1 Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: .98; font-weight: 500; }
h2 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.page-header p:last-child { max-width: 550px; margin: 16px 0 0; color: var(--muted); font-size: 1.05rem; }
.status { margin-bottom: 14px; color: var(--muted); font: 14px/1.4 Arial, sans-serif; }
.filter-panel, .output-panel { padding: 25px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 12px 30px rgba(23, 34, 31, .06); }
.controls-row .filter-panel { min-width: 0; }
.output-panel { margin-top: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 24px 0; }
label { display: grid; gap: 8px; color: var(--muted); font: 600 12px/1.2 Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
input, select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--ink); font: 16px Georgia, serif; text-transform: none; letter-spacing: 0; }
select:disabled, input:disabled { background: #eef3f0; color: #52605a; cursor: not-allowed; }
.button { padding: 11px 18px; border: 0; border-radius: 3px; background: var(--accent); color: #fff; cursor: pointer; font: 700 13px Arial, sans-serif; }
.button:hover { background: var(--accent-dark); }
.button-print { padding: 11px 18px; border: 1px solid var(--accent); border-radius: 3px; background: #fff; color: var(--accent-dark); cursor: pointer; font: 700 13px Arial, sans-serif; }
.button-print:hover { background: #e8f2ed; }
.button-print:disabled { cursor: wait; opacity: .65; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
#output-state { color: var(--accent); font: 600 12px Arial, sans-serif; }
#output-message { color: var(--muted); font: 15px/1.5 Arial, sans-serif; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font: 13px/1.4 Arial, sans-serif; }
th, td { padding: 10px 9px; border: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.person-row th { padding-top: 18px; background: #e8f2ed; color: var(--accent-dark); font-size: 13px; }
.column-header th { background: #f7faf8; }
.summary-row td { background: #f2f6f3; color: var(--accent-dark); font-weight: 700; }

@media (max-width: 720px) {
	.timecard-shell { padding: 28px 16px 44px; }
	.controls-row { grid-template-columns: 1fr; }
	.form-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
	.form-grid { grid-template-columns: 1fr; }
	.filter-panel, .output-panel { padding: 18px; }
}