/* Clocker staff shell — layout inspired by reference dashboards; theme is independent */
:root {
	--sidebar-bg: #1e293b;
	--sidebar-fg: #e2e8f0;
	--sidebar-active: #334155;
	--accent: #0d9488;
	--accent-hover: #0f766e;
	--danger: #b91c1c;
	--header-h: 52px;
	--sidebar-w: 260px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, Segoe UI, Roboto, sans-serif; font-size: 14px; color: #0f172a; background: #f8fafc; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f172a; }
.login-card {
	background: #fff;
	padding: 2rem;
	border-radius: 12px;
	width: 100%;
	max-width: 380px;
	box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.login-card h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.login-card .muted { color: #64748b; margin: 0 0 1.25rem; }
.login-card label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
.login-card input {
	width: 100%; padding: .5rem .65rem; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem;
}
.login-card .error { color: var(--danger); margin: 0 0 1rem; }
.login-card .btn { margin-top: 1.25rem; width: 100%; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
	width: var(--sidebar-w);
	background: var(--sidebar-bg);
	color: var(--sidebar-fg);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
}
.sidebar-brand { padding: 1rem 1.25rem; font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid #334155; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem 0; }
.nav-section { margin-top: .75rem; }
.nav-section-title { padding: .35rem 1.25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.nav-section-toggle {
	width: 100%;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
	position: relative;
}
.nav-section-toggle::after {
	content: '▾';
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: .7rem;
	color: #94a3b8;
}
.nav-section.is-collapsed .nav-section-toggle::after {
	content: '▸';
}
.nav-section-items { display: block; }
.nav-section.is-collapsed .nav-section-items { display: none; }
.nav-link {
	display: block; padding: .45rem 1.25rem; color: var(--sidebar-fg); text-decoration: none; border-left: 3px solid transparent;
}
.nav-link:hover { background: var(--sidebar-active); }
.nav-link.active { background: var(--sidebar-active); border-left-color: var(--accent); }
.nav-sublink { padding-left: 2rem; font-size: .9rem; }

.main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top-header {
	min-height: var(--header-h);
	height: auto;
	background: #fff;
	border-bottom: 1px solid #e2e8f0;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 1.25rem;
}
.clock-widget { display: flex; align-items: center; gap: .5rem; }
.clock-pill {
	background: #ecfdf5; color: #047857; font-weight: 600; padding: .35rem .75rem; border-radius: 8px;
	font-variant-numeric: tabular-nums;
}
.clock-pill.idle { background: #f1f5f9; color: #64748b; }
.clock-actions { display: flex; gap: .35rem; }
.clock-out-note { display: flex; flex-direction: column; gap: .45rem; width: min(100%, 430px); }
.clock-out-note.hidden { display: none; }
.clock-out-note label { font-size: .8rem; font-weight: 600; color: #475569; }
.clock-out-note input {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: .45rem .55rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: .9rem;
}
.clock-out-note-actions { display: flex; gap: .4rem; }
.clock-actions button, .btn {
	padding: .4rem .75rem; border-radius: 6px; border: none; cursor: pointer; font-size: .85rem; font-weight: 600;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.secondary { background: #e2e8f0; color: #334155; }
.btn.warn { background: #fcd34d; color: #78350f; }
.btn.danger { background: #fecaca; color: #991b1b; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.user-menu { display: flex; align-items: center; gap: .75rem; }
.user-menu a { color: #475569; text-decoration: none; }
.user-menu a:hover { text-decoration: underline; }
.user-menu .muted {
	min-width: 0;
	max-width: min(42vw, 360px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.menu-toggle { display: none; }
.desktop-sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }
.local-current-time {
	font-weight: 600;
	color: #334155;
	font-variant-numeric: tabular-nums;
}

.main-content { padding: 1.25rem 1.5rem; flex: 1; }
.page-title { margin: 0 0 1rem; font-size: 1.35rem; }
.card {
	background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; padding: 1.25rem; margin-bottom: 1rem;
}
.muted { color: #64748b; }
.flash-error { background: #fef2f2; color: #991b1b; padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.dashboard-metrics-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}
.dashboard-metric {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: .75rem;
	background: #f8fafc;
}
.dashboard-metric-value {
	margin-top: .35rem;
	font-size: 1rem;
	font-weight: 600;
	color: #0f172a;
}
.dashboard-private-value {
	margin-top: .35rem;
	padding: .35rem .5rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	font-size: 1rem;
	font-weight: 600;
	color: #0f172a;
	cursor: pointer;
}
.dashboard-private-value.is-blurred {
	filter: blur(6px);
}
.today-branch-card {
	margin-top: .85rem;
	padding-top: .35rem;
}
.today-status-chip {
	display: inline-block;
	padding: .2rem .5rem;
	border-radius: 999px;
	background: #e2e8f0;
	color: #334155;
	font-size: .78rem;
	font-weight: 600;
}

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid #e2e8f0; }
table.data th { background: #f8fafc; font-weight: 600; }
.table-compact th,
.table-compact td {
	padding: .38rem .52rem;
	font-size: .83rem;
}
.manager-action-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem 1rem;
}
.manager-action-bar .form-row {
	margin-bottom: 0;
}
.status-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .12rem .5rem;
	border-radius: 999px;
	font-size: .73rem;
	font-weight: 700;
	line-height: 1.2;
}
.status-chip--active {
	background: #dcfce7;
	color: #166534;
}
.status-chip--pending {
	background: #fef3c7;
	color: #92400e;
}
.status-chip--muted {
	background: #e2e8f0;
	color: #475569;
}
.manager-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.manager-columns > div {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: .6rem;
	padding: .85rem;
}
.manager-columns p {
	margin: .35rem 0;
	font-size: .9rem;
}
.main-content .card > .form-row {
	max-width: 28rem;
}

@media (max-width: 980px) {
	.manager-columns {
		grid-template-columns: 1fr;
	}
}

.form-row { margin-bottom: .85rem; }
.form-row label { display: block; font-weight: 600; margin-bottom: .25rem; }
.form-row input, .form-row select, .form-row textarea {
	width: 100%; max-width: 420px; padding: .45rem .55rem; border: 1px solid #cbd5e1; border-radius: 6px;
}

/* Absence year calendar */
.abs-cal-year {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-top: 1rem;
	overflow-x: auto;
}
.abs-cal-month {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	min-width: max-content;
}
.abs-cal-month-row {
	display: grid;
	grid-template-columns: minmax(96px, 120px) repeat(31, minmax(28px, 1fr));
	gap: 2px;
	align-items: stretch;
	padding: .15rem 0;
	border-bottom: 1px solid #e2e8f0;
}
.abs-cal-month-title {
	font-weight: 700;
	font-size: .82rem;
	margin: 0;
	padding: .25rem .4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #334155;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
}
.abs-cal-cell {
	min-height: 3.1rem;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 1px;
	padding: 2px 1px;
	font-size: .68rem;
	font-variant-numeric: tabular-nums;
	background: #f8fafc;
	border-left: 3px solid transparent;
}
.abs-cal-cell-layers {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	line-height: 1.05;
	max-height: 2.1rem;
	overflow: hidden;
}
.abs-cal-micro {
	display: block;
	font-size: .58rem;
	font-weight: 600;
	color: #475569;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}
.abs-cal-micro--shift { color: #1d4ed8; }
.abs-cal-micro--worked { color: #047857; }
.abs-cal-cell--has-shift {
	box-shadow: inset 0 2px 0 0 #93c5fd;
}
.abs-cal-cell--has-worked {
	box-shadow: inset 0 -2px 0 0 #6ee7b7;
}
.abs-cal-cell--has-shift.abs-cal-cell--has-worked {
	box-shadow: inset 0 2px 0 0 #93c5fd, inset 0 -2px 0 0 #6ee7b7;
}
.abs-cal-cell--multi-off {
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 2px,
		rgba(100, 116, 139, 0.12) 2px,
		rgba(100, 116, 139, 0.12) 3px
	);
}
.abs-cal-cell--closure {
	outline: 1px dashed #d97706;
	outline-offset: -2px;
}
.abs-cal-cell--empty {
	background: transparent;
}
.abs-cal-cell--weekend {
	background: #f1f5f9;
	color: #94a3b8;
}
.abs-cal-cell--today {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}
.abs-cal-daynum { font-weight: 600; white-space: nowrap; }
.abs-cal-dayabbr {
	font-size: .58rem;
	font-weight: 500;
	color: #64748b;
}

.abs-cal-cell.abs-cal--draft { background: #e2e8f0; }
.abs-cal-cell.abs-cal--pending { background: #fef9c3; }
.abs-cal-cell.abs-cal--approved { background: #d1fae5; }
.abs-cal-cell.abs-cal--rejected { background: #fecaca; }

.abs-cal-type-sick { border-left-color: #dc2626; }
.abs-cal-type-sick_unpaid { border-left-color: #9f1239; }
.abs-cal-type-unpaid { border-left-color: #64748b; }
.abs-cal-type-home { border-left-color: #2563eb; }
.abs-cal-type-vacation { border-left-color: #0d9488; }
.abs-cal-type-ot_red { border-left-color: #7c3aed; }
.abs-cal-type-default { border-left-color: #475569; }

/* Display-only branch calendar markers (public holidays, events — not closures) */
.abs-cal-cell.abs-cal-cell--cal-event {
	box-shadow: inset 0 3px 0 0 #0ea5e9;
}
.abs-cal-ce-type-bank { box-shadow: inset 0 3px 0 0 #6366f1 !important; }
.abs-cal-ce-type-company { box-shadow: inset 0 3px 0 0 #a855f7 !important; }
.abs-cal-ce-type-default { box-shadow: inset 0 3px 0 0 #0ea5e9 !important; }

.abs-cal-legend { margin-bottom: 0; }
.abs-cal-legend-title { font-weight: 700; margin-bottom: .5rem; }
.abs-cal-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.abs-cal-legend-label { font-weight: 600; margin-right: .25rem; }
.abs-cal-pill {
	display: inline-block;
	padding: .2rem .5rem;
	border-radius: 6px;
	font-size: .75rem;
	font-weight: 600;
}
.abs-cal-pill.abs-cal--draft { background: #e2e8f0; color: #334155; }
.abs-cal-pill.abs-cal--pending { background: #fef9c3; color: #713f12; }
.abs-cal-pill.abs-cal--approved { background: #d1fae5; color: #065f46; }
.abs-cal-pill.abs-cal--rejected { background: #fecaca; color: #991b1b; }

/* Manager team calendar matrix */
.team-cal-wrap {
	width: 100%;
	overflow-x: auto;
	margin-top: .75rem;
	border: 1px solid #dbe3ef;
	border-radius: 10px;
	background: #fff;
	position: relative;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.team-cal-legend {
	padding: .6rem .75rem;
}
.team-cal-legend-row {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-items: center;
}
.team-cal-legend-title {
	font-weight: 700;
	color: #334155;
	margin-right: .25rem;
}
.team-cal-selection-badge {
	display: inline-flex;
	align-items: center;
	padding: .2rem .55rem;
	border-radius: 999px;
	background: #0f172a;
	color: #e2e8f0;
	font-size: .68rem;
	font-weight: 600;
	margin-right: .2rem;
}
.team-cal-legend-help {
	margin: .45rem 0 0;
	font-size: .7rem;
	color: #64748b;
}
.team-cal-swatch {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .16rem .46rem;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 600;
	border: 1px solid transparent;
}
.team-cal-swatch::before {
	content: '';
	width: .56rem;
	height: .56rem;
	border-radius: 2px;
	background: currentColor;
	opacity: .92;
}
.team-cal-swatch--approved { color: #166534; background: #dcfce7; border-color: #86efac; }
.team-cal-swatch--pending { color: #854d0e; background: #fef9c3; border-color: #fde68a; }
.team-cal-swatch--rejected { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
.team-cal-swatch--shift { color: #1d4ed8; background: #dbeafe; border-color: #93c5fd; }
.team-cal-swatch--worked { color: #065f46; background: #d1fae5; border-color: #6ee7b7; }
.team-cal-swatch--weekend { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }
.team-cal-swatch--today { color: #6d28d9; background: #ede9fe; border-color: #c4b5fd; }
.team-cal-swatch--half { color: #7c2d12; background: #ffedd5; border-color: #fdba74; }
.team-cal-table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: .66rem;
	min-width: max-content;
}
.team-cal-table th,
.team-cal-table td {
	border-bottom: 1px solid #dde5f0;
	border-right: 1px solid #dde5f0;
	padding: .16rem .12rem;
	vertical-align: top;
	text-align: center;
}
.team-cal-table thead th {
	background: #f3f6fb;
	font-weight: 700;
	position: sticky;
	top: 0;
	z-index: 2;
	box-shadow: inset 0 -1px 0 #d7e0ec;
}
.team-cal-table th.team-cal-name {
	text-align: left;
	min-width: 10.4rem;
	max-width: 13rem;
	position: sticky;
	left: 0;
	z-index: 3;
	background: #e9eff7;
	font-weight: 600;
	white-space: nowrap;
}
.team-cal-table td.team-cal-name {
	text-align: left;
	position: sticky;
	left: 0;
	z-index: 1;
	background: #fff;
	font-weight: 600;
	border-right: 2px solid #c7d4e4;
}
.team-cal-table tbody tr:nth-child(even) td.team-cal-name {
	background: #f8fafc;
}
.team-cal-table .team-cal-dayhead {
	min-width: 2.2rem;
	max-width: 2.2rem;
}
.team-cal-cell {
	min-height: 2.15rem;
	max-width: 2.2rem;
	background: #f8fafc;
	cursor: pointer;
	user-select: none;
	transition: background-color .12s ease, box-shadow .12s ease;
	position: relative;
}
.team-cal-cell:hover { box-shadow: inset 0 0 0 1px #93c5fd; }
.team-cal-cell--weekend { background: #eef2f7; color: #94a3b8; }
.team-cal-cell--today { box-shadow: inset 0 0 0 2px #8b5cf6; }
.team-cal-cell--off-approved { background: #b7e28f; }
.team-cal-cell--off-pending,
.team-cal-cell--off-submitted { background: #f8e47c; }
.team-cal-cell--off-rejected { background: #f9c9c9; }
.team-cal-cell--has-shift { box-shadow: inset 0 -3px 0 #2563eb; }
.team-cal-cell--has-worked { border-left: 2px solid #059669; }
.team-cal-cell--half-day::after {
	content: '1/2';
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: .45rem;
	font-weight: 700;
	color: #7c2d12;
}
.team-cal-cell--selected {
	box-shadow: inset 0 0 0 2px #0ea5e9;
	background: #d9f1ff;
}
.team-cal-cell-lines {
	display: flex;
	flex-direction: column;
	gap: 1px;
	align-items: center;
	line-height: 1.05;
}
.team-cal-line {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .54rem;
	font-weight: 600;
}
.team-cal-line--off { color: #14532d; }
.team-cal-line--shift { color: #1d4ed8; }
.team-cal-line--work { color: #047857; }
.team-cal-menu {
	position: absolute;
	z-index: 8;
	min-width: 230px;
	background: #0f172a;
	color: #e2e8f0;
	border-radius: 10px;
	padding: .55rem;
	box-shadow: 0 12px 24px rgba(2, 6, 23, .32);
}
.team-cal-menu[hidden] {
	display: none;
}
.team-cal-menu-title {
	font-size: .76rem;
	font-weight: 700;
}
.team-cal-menu-detail {
	font-size: .7rem;
	color: #cbd5e1;
	margin-top: .25rem;
}
.team-cal-menu-actions {
	display: flex;
	gap: .4rem;
	margin-top: .55rem;
}
.team-cal-menu .btn {
	font-size: .68rem;
	padding: .33rem .5rem;
}

@media (min-width: 821px) {
	.sidebar {
		transition: width .18s ease;
		overflow: hidden;
	}
	.desktop-sidebar-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		min-width: 2rem;
		padding: .2rem;
		font-size: .95rem;
		line-height: 1;
	}
	.desktop-sidebar-collapsed .sidebar {
		width: 0;
		border-right: 0;
	}
}

@media (max-width: 820px) {
	html, body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}
	.app-shell {
		display: block;
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
	}
	.main-wrap {
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
	}
	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.desktop-sidebar-toggle { display: none; }
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(84vw, 320px);
		z-index: 40;
		transform: translateX(-102%);
		transition: transform .2s ease;
		box-shadow: 0 14px 40px rgba(15, 23, 42, .35);
	}
	.sidebar-nav { max-height: calc(100vh - 56px); }
	.mobile-menu-open .sidebar { transform: translateX(0); }
	.sidebar-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		border: 0;
		padding: 0;
		margin: 0;
		background: rgba(15, 23, 42, .45);
		opacity: 0;
		pointer-events: none;
		z-index: 30;
	}
	.mobile-menu-open .sidebar-backdrop {
		opacity: 1;
		pointer-events: auto;
	}
	.top-header {
		height: auto;
		flex-direction: column;
		align-items: stretch;
		gap: .85rem;
		padding: .9rem 1rem;
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
	}
	.user-menu {
		justify-content: space-between;
		width: 100%;
		gap: .5rem;
		min-width: 0;
	}
	.user-menu .muted {
		max-width: calc(100vw - 8rem);
	}
	.local-current-time {
		text-align: center;
		width: 100%;
	}
	.clock-widget {
		flex-direction: column;
		align-items: stretch;
		gap: .65rem;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.clock-pill {
		display: block;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		text-align: center;
		font-size: 1.05rem;
		padding: .65rem .9rem;
	}
	#clock-detail {
		text-align: center;
		font-size: .95rem;
	}
	.clock-actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: .65rem;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.clock-actions button {
		display: block;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		min-height: 64px;
		font-size: 1.1rem;
		font-weight: 700;
		border-radius: 12px;
	}
	.clock-out-note {
		width: 100%;
		max-width: 100%;
	}
	.clock-out-note input {
		width: 100%;
		max-width: 100%;
	}
	.clock-out-note-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .65rem;
	}
	.clock-out-note-actions button {
		width: 100%;
		max-width: 100%;
		min-height: 54px;
		font-size: 1rem;
	}
	.main-content {
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		padding: 1rem .75rem;
	}
	.dashboard-metrics-grid { grid-template-columns: 1fr; }
	.card {
		max-width: 100%;
	}
	table.data {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}