:root {
	/* Accent colors */
	--accent-base: #6655ac;
	--accent-pop: #ececed;
	--accent-light: #8b7fd4;
	--accent-dark: #5545a0;
	--accent-subtle: color-mix(in srgb, var(--accent-base), transparent 85%);

	/* Semantic colors */
	--red-base: #c62828;
	--red-pop: #ffcdd2;
	--green-base: #4caf50;
	--green-pop: #e8ffe8;
	--blue-base: #2196f3;
	--blue-pop: #d9f0ff;
	--yellow-base: #ffeb3b;
	--yellow-pop: #000000;
	--orange-base: #ff9800;
	--orange-pop: #4a2800;

	/* Design tokens */
	--radius: 0.65em;
	--box-radius: 0.75em;
	--transition-fast: 0.15s ease;
	--transition-medium: 0.25s ease;
}

/* Dark mode (default) */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		/* Base mono colors - darker like billing-web */
		--mono-pop: #ededed;
		--mono-base: #0f1117;

		/* Main theme colors */
		--base: var(--mono-base);
		--pop: var(--mono-pop);
		--base-pop: color-mix(in srgb, var(--pop), var(--base) 97%);

		/* Derived colors - more refined like billing-web */
		--border: color-mix(in srgb, var(--pop), var(--base) 90%);
		--border-light: color-mix(in srgb, var(--pop), var(--base) 94%);
		--hover: color-mix(in srgb, var(--pop), var(--base) 95%);
		--active: color-mix(in srgb, var(--pop), var(--base) 92%);
		--muted: color-mix(in srgb, var(--pop) 55%, transparent);
		--surface: color-mix(in srgb, var(--pop) 4%, var(--base));
		--surface-elevated: color-mix(in srgb, var(--pop) 6%, var(--base));
		--overlay: color-mix(in srgb, var(--base) 80%, transparent);

		/* Shadows - more subtle like billing-web */
		--shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
		--shadow-md: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
		--shadow-lg: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
		--shadow-accent: 0 0.25rem 1.5rem color-mix(in srgb, var(--accent-base), transparent 60%);
	}
}

/* Light mode */
@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;

		/* Base mono colors - warm light background */
		--mono-pop: #2d3142;
		--mono-base: #f5f4f1;

		/* Main theme colors */
		--base: var(--mono-base);
		--pop: var(--mono-pop);
		--base-pop: color-mix(in srgb, var(--pop), var(--base) 96%);

		/* Derived colors - adjusted for light mode */
		--border: color-mix(in srgb, var(--pop), var(--base) 82%);
		--hover: color-mix(in srgb, var(--pop), var(--base) 94%);
		--active: color-mix(in srgb, var(--pop), var(--base) 90%);
		--muted: color-mix(in srgb, var(--pop) 45%, transparent);
		--surface: color-mix(in srgb, var(--pop) 4%, var(--base));
		--overlay: color-mix(in srgb, var(--pop) 50%, transparent);

		/* Shadows - softer for light mode */
		--shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.06);
		--shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
		--shadow-lg: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);

		/* Semantic colors - pop is the "on" color for base backgrounds */
		--red-base: #dc3545;
		--red-pop: #fff;
		--green-base: #28a745;
		--green-pop: #fff;
		--blue-base: #0d6efd;
		--blue-pop: #fff;
		--yellow-base: #ffc107;
		--yellow-pop: #212529;
		--orange-base: #fd7e14;
		--orange-pop: #4a2800;

		/* Accent - pop is the "on" color for accent backgrounds */
		--accent-base: #6655ac;
		--accent-pop: #fff;
	}

	/* Remove body gradient in light mode */
	body {
		background-image: none !important;
	}

	/* Solid backgrounds instead of gradients */
	.unit-header {
		background: color-mix(in srgb, var(--accent-base) 10%, var(--base));
	}

	.mesai-bar.completed {
		background: var(--green-base);
	}

	.mesai-bar.ongoing {
		background: var(--blue-base);
	}

	.timeline-member-bar.ongoing {
		background: var(--blue-base);
	}

	/* Brand text needs visible color */
	.brand {
		background: none;
		-webkit-background-clip: unset;
		-webkit-text-fill-color: var(--accent-base);
		background-clip: unset;
		color: var(--accent-base);
	}
}

body {
	margin: 0;
	color: var(--pop);
	font: 0.875rem/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Gradient background like billing-web */
	background-color: var(--base);
	background-attachment: fixed;
	background-image:
		radial-gradient(ellipse at top right,
			color-mix(in srgb, var(--accent-base), transparent 92%) 0%,
			transparent 50%),
		radial-gradient(ellipse at bottom left,
			color-mix(in srgb, var(--accent-dark), transparent 94%) 0%,
			transparent 50%);
}

* {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

input,
select,
textarea {
	padding: 0.65em 0.85em;
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
	background: var(--base-pop);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--accent-base);
	box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--accent-base) 25%, transparent);
}

input::placeholder,
textarea::placeholder {
	color: var(--muted);
}

.app {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100vh;
	overflow: hidden;
}

.topbar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	border-bottom: 0.0625rem solid var(--border);
	background: color-mix(in srgb, var(--base), var(--pop) 3%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.topbar-profile-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	padding: 0.25rem 0.75rem 0.25rem 0.5rem;
	cursor: pointer;
	color: var(--muted);
	transition: all var(--transition-fast);
}

.topbar-profile-btn:hover:not(:disabled) {
	border-color: var(--accent-base);
	color: var(--pop);
	background: color-mix(in srgb, var(--accent-base), transparent 90%);
}

.topbar-profile-btn:disabled {
	cursor: default;
	opacity: 0.7;
}

.brand {
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg,
			var(--accent-base),
			color-mix(in srgb, var(--accent-base) 70%, var(--accent-pop)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.layout {
	display: grid;
	grid-template-columns: var(--sidebar-width, 16.25rem) 1fr;
	min-height: 0;
	overflow: hidden;
}

.sidebar {
	border-right: 0.0625rem solid var(--border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: color-mix(in srgb, var(--base), var(--pop) 1%);
	min-width: 0;
	position: relative;
}

.sidebar-content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

.sidebar-tree {
	flex: 1;
	overflow-y: auto;
	overflow-x: auto;
	padding: 0.5rem;
}

.sidebar-resize {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 0.3125rem;
	cursor: ew-resize;
	background: transparent;
	transition: background var(--transition-fast);
	z-index: 10;
}

.sidebar-resize:hover,
.sidebar-resize.dragging {
	background: var(--accent-base);
}

.sidebar-footer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-top: 0.0625rem solid var(--border);
	background: color-mix(in srgb, var(--surface), var(--base) 50%);
}

.user-info-btn {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	background: transparent;
	border: none;
	border-radius: var(--radius);
	padding: 0.5rem;
	cursor: pointer;
	color: var(--pop);
	transition: all var(--transition-fast);
	min-width: 0;
}

.user-info-btn:hover:not(:disabled) {
	background: var(--hover);
}

.user-info-btn:disabled {
	cursor: default;
	opacity: 0.7;
}

.user-avatar {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--accent-base);
	color: var(--accent-pop);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 600;
	flex-shrink: 0;
	overflow: hidden;
}

.user-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.user-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
}

.user-name {
	font-weight: 500;
	font-size: 0.8125rem;
	color: var(--pop);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.user-phone {
	font-size: 0.6875rem;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.logout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: transparent;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	color: var(--muted);
	transition: all var(--transition-fast);
	flex-shrink: 0;
}

.logout-btn:hover {
	border-color: var(--color-danger, #ef4444);
	color: var(--color-danger, #ef4444);
	background: color-mix(in srgb, var(--color-danger, #ef4444), transparent 92%);
}

.main {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.main-header {
	padding: 0.75rem 1.25rem;
	border-bottom: 0.0625rem solid var(--border);
	background: color-mix(in srgb, var(--base), var(--pop) 2%);
}

.main-header-unit {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 0.9375rem;
}

.main-header-unit-name {
	color: var(--pop);
}

.main-header-unit-type {
	font-size: 0.75rem;
	color: var(--muted);
	font-weight: 400;
}

.main-content {
	flex: 1;
	overflow: auto;
	padding: 1.25rem 1.5rem;
}

.bottom-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.5rem 1rem;
	border-top: 0.0625rem solid var(--border);
	background: color-mix(in srgb, var(--base), var(--pop) 2%);
	position: sticky;
	bottom: 0;
	z-index: 10;
}

.bottom-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--muted);
	transition: all var(--transition-fast);
	min-width: 4rem;
}

.bottom-nav a:hover {
	background: var(--hover);
	color: var(--pop);
}

.bottom-nav a[data-active="true"] {
	background: var(--accent-base);
	color: var(--accent-pop);
}

.bottom-nav a .icon {
	flex-shrink: 0;
}

.table-scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.table-scroll>table {
	min-width: 40rem;
}

.card {
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	padding: 1.125rem;
	background: color-mix(in srgb, var(--base), var(--pop) 2%);
}

.card-list {
	display: grid;
	gap: 0.625rem;
}

.card-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	background: var(--base-pop);
	transition: all var(--transition-fast);
}

.card-item:hover {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 8%, var(--base-pop));
}

.card-item-main {
	min-width: 0;
	display: grid;
	gap: 0.25rem;
}

.card-item-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-weight: 600;
}

.card-item-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.badge {
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 0.1875rem 0.625rem;
	border-radius: 62.4375rem;
	border: none;
	background: var(--accent-base);
	color: var(--accent-pop);
	letter-spacing: 0.02em;
}

.badge.success {
	background: var(--green-base);
	color: var(--green-pop);
}

.badge.warning {
	background: var(--yellow-base);
	color: var(--yellow-pop);
}

.badge.info {
	background: var(--blue-base);
	color: var(--blue-pop);
}

/* Info Hint Component - Reusable informational hint box */
.info-hint {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	background: color-mix(in srgb, var(--blue-base) 10%, var(--base));
	border: 0.0625rem solid color-mix(in srgb, var(--blue-base) 30%, var(--border));
	border-radius: var(--box-radius);
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.info-hint .icon {
	flex-shrink: 0;
	margin-top: 0.125rem;
}

/* Role Hierarchy Styles - uses info-hint base */
.role-hierarchy-hint {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	background: color-mix(in srgb, var(--blue-base) 10%, var(--base));
	border: 0.0625rem solid color-mix(in srgb, var(--blue-base) 30%, var(--border));
	border-radius: var(--box-radius);
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.role-item {
	cursor: grab;
	user-select: none;
	flex-wrap: wrap;
}

.role-item .card-expand-toggle,
.role-item .schedule-timeline {
	flex-basis: 100%;
}

.role-item .card-item-main {
	flex: 1;
}

.role-item:active {
	cursor: grabbing;
}

.role-item-drag-over {
	background: color-mix(in srgb, var(--accent-base) 15%, var(--base-pop)) !important;
	border-color: var(--accent-base) !important;
	box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--accent-base) 30%, transparent);
}

.role-drag-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 2rem;
	color: var(--text-muted);
	cursor: grab;
	flex-shrink: 0;
	opacity: 0.6;
	transition: opacity var(--transition-fast), color var(--transition-fast);
}

.role-drag-handle:hover {
	opacity: 1;
	color: var(--accent-base);
}

.role-drag-handle-disabled {
	cursor: not-allowed;
	opacity: 0.3;
}

.role-rank-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 1.5rem;
	padding: 0 0.375rem;
	background: var(--accent-base);
	color: var(--accent-pop);
	border-radius: var(--box-radius);
	font-size: 0.6875rem;
	font-weight: 700;
	flex-shrink: 0;
}

.role-reorder-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex-shrink: 0;
}

.role-reorder-buttons .icon-button {
	width: 1.5rem;
	height: 1.25rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--base);
	border: 0.0625rem solid var(--border);
	border-radius: 0.25rem;
	color: var(--text-muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.role-reorder-buttons .icon-button:hover:not(:disabled) {
	background: var(--accent-base);
	color: var(--accent-pop);
	border-color: var(--accent-base);
}

.role-reorder-buttons .icon-button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.section-title {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	margin: 0;
	margin-bottom: 0.5rem;
}

.unit-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	border-bottom: 0.0625rem solid var(--border);
	background: linear-gradient(135deg,
			color-mix(in srgb, var(--accent-base) 15%, var(--base)),
			color-mix(in srgb, var(--accent-base) 5%, var(--base)));
	flex-shrink: 0;
}

.unit-header.unit-header-clickable>div:first-of-type {
	transition: opacity var(--transition-fast);
}

.unit-header.unit-header-clickable>div:first-of-type:hover {
	opacity: 0.75;
}

.unit-header.unit-header-drop-over {
	background: var(--accent-base-alpha, rgba(59, 130, 246, 0.15));
	outline: 0.125rem dashed var(--accent-base, #3b82f6);
	outline-offset: -0.125rem;
}

.unit-header.unit-header-selected {
	background: var(--accent-base);
}

.unit-header.unit-header-selected .unit-name {
	color: var(--accent-pop);
}

.unit-header.unit-header-selected .icon {
	color: var(--accent-pop);
}

.unit-header .btn-back {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	cursor: pointer;
	font-size: 0.8125rem;
	transition: all var(--transition-fast);
}

.unit-header .btn-back:hover {
	background: var(--hover);
}

.unit-name {
	font-weight: 600;
	font-size: 0.875rem;
}

.row {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
	align-items: center;
}

.row>label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.form {
	display: grid;
	gap: 0.75rem;
}

.form-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
	display: grid;
	gap: 0.375rem;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
	width: 100%;
}

.field-label {
	font-size: 0.75rem;
	color: var(--muted);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.field-help {
	font-size: 0.75rem;
	color: var(--muted);
}

.form-section {
	border: 0.0625rem solid var(--border);
	background: color-mix(in srgb, var(--pop) 3%, var(--base));
	border-radius: var(--box-radius);
	padding: 1rem;
	display: grid;
	gap: 0.75rem;
}

.form-section-header {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--text);
	margin-bottom: 0.25rem;
}

.form-section-content {
	display: grid;
	gap: 0.5rem;
}

.checkbox-row {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
	align-items: center;
}

.checkbox-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: 62.4375rem;
	background: var(--base-pop);
	cursor: pointer;
	transition: all var(--transition-fast);
	font-size: 0.9em;
}

.checkbox-chip:hover {
	border-color: var(--accent-base);
}

.checkbox-chip:has(input:checked) {
	background: color-mix(in srgb, var(--accent-base) 20%, var(--base));
	border-color: var(--accent-base);
}

.checkbox-chip input {
	accent-color: var(--accent-base);
}

.checkbox-chip.locked {
	opacity: 0.7;
	cursor: not-allowed;
}

.checkbox-chip.locked input {
	cursor: not-allowed;
}

.checkbox-field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.checkbox-field input {
	accent-color: var(--accent-base);
	width: 1.125rem;
	height: 1.125rem;
}

/* ===== Time Toggle (Segmented Control) ===== */
.time-toggle {
	display: inline-flex;
	background: var(--base-pop);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	padding: 0.1875rem;
	gap: 0.125rem;
}

.time-toggle button {
	padding: 0.375rem 0.875rem;
	border: none;
	background: transparent;
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 500;
	cursor: pointer;
	border-radius: calc(var(--radius) - 0.125rem);
	transition: all var(--transition-fast);
}

.time-toggle button:hover {
	color: var(--pop);
}

.time-toggle button.active {
	background: var(--accent-base);
	color: var(--accent-pop);
}

/* ===== Time Field Row (inline time input with toggle) ===== */
.time-field-row {
	display: grid;
	gap: 0.75rem;
}

.time-field-row .time-toggle {
	justify-self: start;
}

.time-field-row input[type="time"] {
	width: auto;
	min-width: 7.5rem;
}

.time-field-row input[type="time"]:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.time-field-row .time-inputs {
	display: flex;
	gap: 0.25rem;
}

.field-info {
	padding: 0.65em 0.85em;
	border-radius: var(--radius);
	background: var(--base-pop);
	border: 0.0625rem solid var(--border);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.6em 1.2em;
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
	background: var(--base-pop);
	cursor: pointer;
	font-weight: 500;
	font-size: 0.9em;
	transition: all var(--transition-fast);
}

.btn:hover {
	background: var(--hover);
	border-color: color-mix(in srgb, var(--pop), var(--base) 75%);
}

.btn:active {
	background: var(--active);
	transform: translateY(0.0625rem);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	pointer-events: auto;
	/* Allow clicks for aria-disabled */
}

.btn.primary {
	background: var(--accent-base);
	color: var(--accent-pop);
	border-color: var(--accent-base);
	font-weight: 600;
}

.btn.primary:hover {
	background: color-mix(in srgb, var(--accent-base), var(--pop) 10%);
	box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--accent-base) 40%, transparent);
}

/* Button that looks incomplete - fields not filled, but still clickable to show what's missing */
.btn.btn-incomplete {
	opacity: 0.5;
}

.btn.btn-incomplete:hover {
	opacity: 0.7;
}

/* Shake animation when clicking incomplete button */
.btn.btn-incomplete.shake {
	animation: btn-shake 0.4s ease-in-out;
}

@keyframes btn-shake {

	0%,
	100% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(-4px);
	}

	40% {
		transform: translateX(4px);
	}

	60% {
		transform: translateX(-4px);
	}

	80% {
		transform: translateX(4px);
	}
}

.btn.danger {
	background: var(--red-base);
	color: var(--red-pop);
	border-color: var(--red-base);
}

.btn.danger:hover {
	background: color-mix(in srgb, var(--red-base), var(--pop) 10%);
	box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--red-base) 40%, transparent);
}

/* Standalone primary button (for buttons without .btn class) */
button.primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.6em 1.2em;
	border-radius: var(--radius);
	border: 0.0625rem solid var(--accent-base);
	background: var(--accent-base);
	color: var(--accent-pop);
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9em;
	transition: all var(--transition-fast);
}

button.primary:hover {
	background: color-mix(in srgb, var(--accent-base), var(--pop) 10%);
	box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--accent-base) 40%, transparent);
}

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

.btn-icon {
	padding: 0.4em 0.7em;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	cursor: pointer;
	font-size: 0.9375rem;
	transition: all var(--transition-fast);
}

.btn-icon:hover {
	background: var(--hover);
	border-color: color-mix(in srgb, var(--pop), var(--base) 75%);
}

.btn-icon-small {
	padding: 0.25rem 0.5rem;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 0.8125rem;
	border-radius: var(--radius);
	transition: all var(--transition-fast);
	opacity: 0.6;
}

.btn-icon-small:hover {
	background: var(--hover);
	opacity: 1;
}

.nav-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.nav {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.625rem;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

.nav a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.75rem;
	border-radius: var(--radius);
	font-weight: 500;
	font-size: 0.875rem;
	transition: all var(--transition-fast);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav a .icon {
	flex-shrink: 0;
}

.nav a:hover {
	background: var(--hover);
}

.nav a[data-active="true"] {
	background: var(--accent-base);
	color: var(--accent-pop);
	font-weight: 600;
}

.tree {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
}

.tree-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.375rem;
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
	min-width: 0;
	position: relative;
}

.tree-item:hover {
	background: var(--hover);
}

.tree-item-drag-over {
	background: var(--accent-base-alpha, rgba(59, 130, 246, 0.15));
	outline: 0.125rem dashed var(--accent-base, #3b82f6);
	outline-offset: -0.125rem;
}

.tree-item-selected {
	background: var(--accent-base);
	color: var(--accent-pop);
}

.tree-item-selected:hover {
	background: var(--accent-base);
}

.tree-item-selected .tree-item-name {
	font-weight: 600;
}

.tree-item-selected .icon {
	color: var(--accent-pop);
}

.tree-item[draggable="true"] {
	cursor: grab;
}

.tree-item[draggable="true"]:active {
	cursor: grabbing;
}

.tree-expand {
	padding: 0;
	width: 1.375rem;
	height: 1.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tree-item-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.tree-item-type {
	opacity: 0.5;
	font-size: 0.75rem;
	flex-shrink: 0;
	transition: opacity var(--transition-fast);
}

.tree-item:hover .tree-item-type {
	opacity: 0;
}

.tree-item-actions {
	position: absolute;
	right: 0.375rem;
	inset-block: 0;
	display: flex;
	align-items: center;
	gap: 0.125rem;
	opacity: 0;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}

.tree-item:hover .tree-item-actions {
	opacity: 1;
	pointer-events: auto;
}

.tree-item-actions .btn-icon-small {
	padding: 0;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mine indicator for units the user belongs to */
.tree-item-mine {
	background: var(--accent-base-alpha, rgba(59, 130, 246, 0.08));
}

.tree-item-mine .tree-item-name {
	font-weight: 600;
}

.tree-item-mine-indicator {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--accent-base, #3b82f6);
	flex-shrink: 0;
	margin-left: -0.125rem;
}

/* Tree child search box */
.tree-child-search {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.5rem;
	margin: 0.125rem 0;
}

.tree-child-search input {
	flex: 1;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	max-width: 12rem;
}

.tree-child-search .btn-icon-small {
	opacity: 0.6;
}

.tree-child-search .btn-icon-small:hover {
	opacity: 1;
}

.tree-no-results {
	font-size: 0.75rem;
	color: var(--muted);
	padding: 0.25rem 0.5rem;
	font-style: italic;
}

.muted {
	opacity: 0.6;
}

.small {
	font-size: 0.75rem;
}

.list {
	display: grid;
	gap: 0.5rem;
}

.list-item {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.75rem 0.875rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	transition: all var(--transition-fast);
}

.list-item:hover {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 5%, transparent);
}

.error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border: 0.0625rem solid var(--red-base);
	background: color-mix(in srgb, var(--red-base) 15%, var(--base));
	color: var(--red-base);
	border-radius: var(--box-radius);
	padding: 0.875rem 1rem;
	font-weight: 500;
}

.error-close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	background: transparent;
	color: inherit;
	font-size: 1rem;
	cursor: pointer;
	border-radius: 0.25rem;
	opacity: 0.7;
	transition: opacity 0.15s, background-color 0.15s;
}

.error-close:hover {
	opacity: 1;
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
}

.error-toast {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	border: 0.0625rem solid var(--red-base);
	background: color-mix(in srgb, var(--red-base) 15%, var(--base));
	color: var(--red-base);
	border-radius: var(--box-radius);
	font-weight: 500;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
	max-width: calc(100% - 2rem);
	animation: error-toast-slide-in 0.2s ease-out;
	overflow: hidden;
}

.error-toast-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
}

.error-toast-progress-bar {
	height: 0.1875rem;
	width: 100%;
	background: color-mix(in srgb, var(--red-base) 30%, transparent);
}

.error-toast-progress-fill {
	height: 100%;
	background: var(--red-base);
	transition: width 0.05s linear;
}

@keyframes error-toast-slide-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-0.625rem);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.dialog-overlay {
	position: fixed;
	inset: 0;
	background: var(--overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 1rem;
}

@media (min-width: 40.0625rem) {
	.dialog-overlay {
		justify-content: flex-end;
		align-items: stretch;
		padding: 0;
	}
}

.dialog {
	background: var(--base);
	border-radius: 1rem;
	width: 90%;
	max-width: 42.5rem;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
	transform: translateY(0);
	transition: transform 0.18s ease;
	border: 0.0625rem solid var(--border);
}

@media (min-width: 40.0625rem) {
	.dialog {
		border-radius: 0;
		max-height: none;
		height: 100%;
		width: 100%;
		max-width: 37.5rem;
		border: none;
		border-inline-start: 0.0625rem solid var(--border);
	}
}

.dialog.dragging {
	transition: none;
}

.dialog-header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.75rem;
	align-items: center;
	padding: 1rem 1.25rem;
	border-bottom: 0.0625rem solid var(--border);
	user-select: none;
	touch-action: none;
}

.dialog-handle {
	display: none;
}

.dialog-title {
	font-weight: 700;
	font-size: 1.125rem;
}

.dialog-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius);
	cursor: pointer;
	z-index: 10;
}

.dialog-body {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.dialog-body:has(.dialog-tabs) {
	padding: 0;
}

.dialog-body:has(.dialog-tabs)>.form-fields {
	padding: 1.25rem;
}

.divider {
	text-align: center;
	position: relative;
	margin: 1.25rem 0;
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 500;
}

.divider::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 0.0625rem;
	background: var(--border);
	z-index: 0;
}

.divider span {
	background: var(--base);
	padding: 0 0.875rem;
	position: relative;
	z-index: 1;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
}

.data-table th {
	text-align: left;
	padding: 0.75rem 0.875rem;
	border-bottom: 0.125rem solid var(--border);
	font-weight: 600;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.data-table td {
	padding: 0.875rem 0.875rem;
	border-bottom: 0.0625rem solid var(--border);
}

.data-table tr {
	transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
	background: var(--hover);
}

/* Timeline Box - Zaman Çizelgesi */
.timeline-box {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base);
	overflow: visible;
}

.timeline-hours-header {
	display: grid;
	grid-template-columns: 8.75rem 1fr;
	gap: 0;
	align-items: center;
	background: var(--base-pop);
	border-bottom: 0.0625rem solid var(--border);
	height: 1.75rem;
}

.timeline-hours-label {
	padding: 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
}

.timeline-hours-track {
	position: relative;
	height: 100%;
	border-left: 0.0625rem solid var(--border);
	overflow: visible;
}

.timeline-hour-mark {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0.0625rem;
	background: var(--border);
}

.timeline-hour-label {
	position: absolute;
	top: 0.375rem;
	left: 0.25rem;
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--muted);
	white-space: nowrap;
}

/* Last hour mark label should be positioned to the left */
.timeline-hour-mark:last-child .timeline-hour-label {
	left: auto;
	right: 0.25rem;
}

.timeline-worker-row {
	display: grid;
	grid-template-columns: 8.75rem 1fr;
	gap: 0;
	align-items: center;
	border-bottom: 0.0625rem solid var(--border);
	min-height: 2.5rem;
}

.timeline-worker-row:last-child {
	border-bottom: none;
}

/* Members who didn't come - greyed out styling */
.timeline-worker-row.did-not-come {
	opacity: 0.6;
	background: color-mix(in srgb, var(--muted) 5%, transparent);
}

.timeline-worker-row.did-not-come .timeline-worker-label a {
	color: var(--muted);
}

.timeline-worker-row.did-not-come .timeline-worker-track {
	background: color-mix(in srgb, var(--muted) 8%, var(--base));
}

/* Historical members (no longer in the group) */
.timeline-worker-row.historical {
	border-left: 0.1875rem solid var(--orange-base);
}

.historical-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--orange-pop);
	margin-left: 0.25rem;
	opacity: 0.8;
}

.timeline-worker-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 500;
	min-width: 0;
}

.timeline-worker-label a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--pop);
	text-decoration: none;
}

.timeline-worker-label a:hover {
	text-decoration: underline;
}

.timeline-worker-track {
	position: relative;
	height: 100%;
	min-height: 2.5rem;
	background: var(--base);
	border-left: 0.0625rem solid var(--border);
}

.timeline-grid-line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0.0625rem;
	background: color-mix(in srgb, var(--border) 50%, transparent);
	pointer-events: none;
}

.timeline-current-time {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0.125rem;
	background: var(--red-pop);
	pointer-events: none;
	z-index: 10;
}

.timeline-current-time::before {
	content: '';
	position: absolute;
	top: -0.1875rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0.5rem;
	height: 0.5rem;
	background: var(--red-pop);
	border-radius: 50%;
}

.timeline-session-block {
	position: absolute;
	top: 0.375rem;
	bottom: 0.375rem;
	background: var(--accent-base);
	border-radius: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0.25rem;
	box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	z-index: 1;
}

.timeline-session-block:hover {
	transform: scaleY(1.1);
	box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
	z-index: 3;
}

.timeline-session-block.ongoing {
	background: var(--green-base);
	animation: pulse-ongoing 2s ease-in-out infinite;
}

.timeline-session-block.from-yesterday {
	border-left: 0.1875rem solid var(--blue-base);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.timeline-session-block.to-tomorrow {
	border-right: 0.1875rem solid var(--blue-base);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

@keyframes pulse-ongoing {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.75;
	}
}

.timeline-session-text {
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--accent-pop);
	padding: 0 0.375rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.timeline-session-block.ongoing .timeline-session-text {
	color: var(--green-pop);
}

/* Session tooltip - appears on hover */
.timeline-session-tooltip {
	position: absolute;
	bottom: calc(100% + 0.375rem);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.375rem 0.625rem;
	background: var(--pop);
	color: var(--base);
	font-size: 0.6875rem;
	font-weight: 500;
	white-space: nowrap;
	border-radius: var(--radius);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 100;
}

.timeline-session-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 0.3125rem solid transparent;
	border-top-color: var(--pop);
}

.timeline-session-block:hover .timeline-session-tooltip {
	opacity: 1;
	visibility: visible;
}

/* Adjust tooltip position for blocks near edges */
.timeline-session-block[style*="left: 0%"] .timeline-session-tooltip,
.timeline-session-block[style*="left: 1%"] .timeline-session-tooltip,
.timeline-session-block[style*="left: 2%"] .timeline-session-tooltip,
.timeline-session-block[style*="left: 3%"] .timeline-session-tooltip {
	left: 0;
	transform: translateX(0);
}

.timeline-session-block[style*="left: 0%"] .timeline-session-tooltip::after,
.timeline-session-block[style*="left: 1%"] .timeline-session-tooltip::after,
.timeline-session-block[style*="left: 2%"] .timeline-session-tooltip::after,
.timeline-session-block[style*="left: 3%"] .timeline-session-tooltip::after {
	left: 0.75rem;
	transform: none;
}

/* ===== Unit Mesai Timeline ===== */
.unit-mesai-timeline {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.unit-mesai-timeline.loading,
.unit-mesai-timeline.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 2rem 1rem;
	color: var(--muted);
	font-size: 0.875rem;
}

.unit-mesai-timeline.loading svg {
	animation: spin 1s linear infinite;
}

/* Mesai Legend */
.mesai-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: var(--base-pop);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
}

.mesai-legend-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	color: var(--pop);
}

.mesai-legend-color {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0.1875rem;
}

.mesai-legend-name {
	font-weight: 500;
}

/* Expected work slot (striped background) */
.timeline-expected-slot {
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	border-radius: 0.25rem;
	border: 0.0625rem dashed;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	overflow: hidden;
	z-index: 2;
}

.timeline-expected-slot-name {
	font-size: 0.625rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 0.25rem;
}

.timeline-worker-row.did-not-come .timeline-expected-slot {
	/* Styles handled via inline color-mix */
}

/* Current time line */
.team-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.3125rem;
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--accent-pop);
	background: var(--accent-base);
	border-radius: 0.5625rem;
	margin-left: 0.25rem;
}

/* Mesai Summary */
.mesai-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 0.625rem 0.875rem;
	background: var(--base-pop);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
	font-size: 0.8125rem;
}

.mesai-summary-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--muted);
}

.mesai-summary-item.success {
	color: var(--green-pop);
}

.mesai-summary-item.danger {
	color: var(--red-pop);
}

.mesai-summary-item.info {
	color: var(--blue-pop);
}

/* Override session block styles when colored */
.unit-mesai-timeline .timeline-session-block {
	/* Colors set via inline styles */
}

/* Mobile back button - shown in topbar when viewing content on mobile */
.mobile-back-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	border-radius: var(--radius);
	background: transparent;
	color: var(--pop);
	cursor: pointer;
	transition: all var(--transition-fast);
	margin-left: -0.5rem;
}

.mobile-back-btn:hover {
	background: var(--hover);
}

/* Mobile full-screen navigation page */
.mobile-nav-page {
	display: none;
}

.mobile-nav-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border-bottom: 0.0625rem solid var(--border);
	background: linear-gradient(135deg,
			color-mix(in srgb, var(--accent-base) 12%, var(--base)),
			color-mix(in srgb, var(--accent-base) 4%, var(--base)));
}

.mobile-nav-unit {
	flex: 1;
	min-width: 0;
}

.mobile-nav-unit-name {
	font-weight: 600;
	font-size: 1rem;
}

.mobile-nav-change-unit {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.8125rem;
	color: var(--accent-base);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.125rem;
}

.mobile-nav-list {
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	gap: 0.25rem;
}

.mobile-nav-list a {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 0.875rem;
	border-radius: var(--radius);
	font-size: 1rem;
	font-weight: 500;
	color: var(--pop);
	transition: all var(--transition-fast);
}

.mobile-nav-list a:hover {
	background: var(--hover);
}

.mobile-nav-list a[data-active="true"] {
	background: color-mix(in srgb, var(--accent-base), transparent 88%);
	color: var(--accent-base);
}

.mobile-nav-arrow {
	color: var(--muted);
}

/* Mobile unit tree page */
.mobile-unit-tree {
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	gap: 0.25rem;
}

.mobile-unit-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--pop);
	transition: all var(--transition-fast);
}

.mobile-unit-item:hover {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 5%, var(--base-pop));
}

.mobile-unit-item.selected {
	border-color: var(--accent-base);
	background: var(--accent-base);
	color: var(--accent-pop);
}

.mobile-unit-item.selected .icon {
	color: var(--accent-pop);
}

.mobile-unit-item .muted {
	font-size: 0.75rem;
}

.mobile-unit-root {
	background: linear-gradient(135deg,
			color-mix(in srgb, var(--accent-base) 10%, var(--base-pop)),
			var(--base-pop));
	border-color: color-mix(in srgb, var(--accent-base) 30%, var(--border));
}

/* Mobile unit node hierarchy */
.mobile-unit-node {
	display: flex;
	flex-direction: column;
}

.mobile-unit-node .mobile-unit-item {
	position: relative;
}

.mobile-unit-expand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	margin-right: -0.25rem;
	background: none;
	border: none;
	border-radius: var(--radius);
	color: var(--muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.mobile-unit-expand:hover {
	background: var(--hover);
	color: var(--pop);
}

.mobile-unit-expand-placeholder {
	width: 1.5rem;
	margin-right: -0.25rem;
}

.mobile-unit-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mobile-unit-children {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.25rem;
}

@media (max-width: 56.25rem) {
	.layout {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		position: relative;
	}

	/* Hide desktop sidebar on mobile */
	.sidebar {
		display: none;
	}

	/* Hide sidebar footer on mobile (uses mobile nav instead) */
	.sidebar-footer {
		display: none;
	}

	/* Show mobile nav page */
	.mobile-nav-page {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: 0;
		background: var(--base);
		z-index: 10;
		overflow-y: auto;
	}

	/* Hide nav page when not active */
	.mobile-nav-page:not(.active) {
		display: none;
	}

	/* Hide main content when nav is showing */
	.main {
		padding: 0.75rem;
	}

	.main:not(.mobile-active) {
		display: none;
	}

	/* Show mobile back button */
	.mobile-back-btn {
		display: flex;
	}

	/* Topbar adjustments */
	.topbar {
		padding: 0.625rem 0.75rem;
		gap: 0.5rem;
	}

	.brand {
		font-size: 0.9375rem;
	}

	.topbar-profile-btn {
		padding: 0.25rem 0.5rem 0.25rem 0.375rem;
	}

	.topbar-profile-btn span {
		display: none;
	}

	/* Desktop nav hidden on mobile */
	.nav-wrap {
		display: none;
	}

}

@media (max-width: 40rem) {
	.form-grid {
		grid-template-columns: 1fr;
	}

	.dialog-overlay {
		align-items: flex-end;
		justify-content: stretch;
		padding: 0;
	}

	.dialog {
		width: 100%;
		max-width: none;
		max-height: 92vh;
		border-radius: 1rem 1rem 0 0;
		border-bottom: none;
		border-inline: none;
	}

	.dialog-header {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		gap: 0.5rem 0.75rem;
		padding: 0.75rem 1rem 0.75rem;
	}

	.dialog-handle {
		display: block;
		width: 2.625rem;
		height: 0.25rem;
		border-radius: 62.4375rem;
		background: var(--border);
		justify-self: center;
		grid-column: 1 / -1;
	}

	.dialog-body {
		padding: 0.875rem 1rem 1.5rem;
	}

	.dialog-body:has(.dialog-tabs) {
		padding: 0;
	}

	.dialog-body:has(.dialog-tabs)>.form-fields {
		padding: 0.875rem 1rem 1.5rem;
	}

	.timeline-header,
	.timeline-row {
		grid-template-columns: 5.75rem 1fr;
	}

	/* Mobile page header improvements */
	.page-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.page-header h1 {
		font-size: 1.25em;
	}

	/* Mobile list controls */
	.list-controls {
		grid-auto-flow: row;
		gap: 0.5rem;
	}

	/* Mobile cards */
	.card-grid {
		grid-template-columns: 1fr;
	}

	.card-item {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.card-item-actions {
		justify-content: flex-start;
	}

	/* Mobile tables - horizontal scroll */
	.table-scroll {
		margin: 0 -0.75rem;
		padding: 0 0.75rem;
	}

	/* Better spacing for greeting on mobile */
	.greeting {
		font-size: 1.25em;
	}

	.greeting-card {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* Greeting styles */
.greeting {
	font-size: 1.5em;
	font-weight: 600;
	margin-bottom: 0.5em;
}

.greeting-name {
	color: var(--accent-base);
}

.greeting-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.greeting-content {
	flex: 1;
}

/* QR View Button in Greeting Card */
.qr-view-btn {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent-base) 12%, transparent);
	color: var(--accent-base);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
}

.qr-view-btn:hover {
	background: color-mix(in srgb, var(--accent-base) 22%, transparent);
}

.qr-view-btn:active {
	transform: scale(0.94);
}

/* QR Fullscreen Dialog (native <dialog>) */
.qr-fullscreen-dialog {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	max-width: 100vw;
	max-height: 100dvh;
	width: 100vw;
	height: 100dvh;
}

.qr-fullscreen-dialog::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.qr-fullscreen-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	gap: 1.5rem;
	position: relative;
}

.qr-fullscreen-close {
	position: absolute;
	top: max(1rem, env(safe-area-inset-top, 1rem));
	right: max(1rem, env(safe-area-inset-right, 1rem));
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}

.qr-fullscreen-close:hover {
	background: rgba(255, 255, 255, 0.25);
}

.qr-fullscreen-image {
	width: min(80vw, 80dvh, 420px);
	height: min(80vw, 80dvh, 420px);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
	padding: 1rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.qr-fullscreen-label {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
	text-align: center;
	max-width: 80vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Summary Stats Section */
.summary-stats-card {
	padding: 1rem;
}

.summary-stats-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.5rem;
	color: var(--muted);
}

.summary-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr));
	gap: 0.75rem;
}

.summary-stat-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: left;
	width: 100%;
}

.summary-stat-card:hover {
	background: var(--hover);
	border-color: var(--accent-base);
	transform: translateY(-0.0625rem);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

.summary-stat-card:active {
	transform: translateY(0);
}

.summary-stat-icon {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.625rem;
	flex-shrink: 0;
}

.summary-stat-content {
	flex: 1;
	min-width: 0;
}

.summary-stat-value {
	font-size: 1.25em;
	font-weight: 700;
	color: var(--pop);
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.summary-stat-label {
	font-size: 0.8em;
	color: var(--muted);
	margin-top: 0.125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.summary-stat-change {
	font-size: 0.65em;
	padding: 0.125rem 0.3125rem;
	border-radius: 0.25rem;
	font-weight: 600;
}

.summary-stat-change.positive {
	background: color-mix(in srgb, var(--green-base) 15%, transparent);
	color: var(--green-base);
}

.summary-stat-change.negative {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	color: var(--red-base);
}

.summary-stat-arrow {
	color: var(--muted);
	flex-shrink: 0;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.summary-stat-card:hover .summary-stat-arrow {
	opacity: 1;
	color: var(--accent-base);
}

/* Summary Dialog Styles */
.summary-dialog-content {
	padding: 0.5rem 1rem;
}

.summary-dialog-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	color: var(--muted);
	text-align: center;
}

.summary-dialog-empty svg {
	opacity: 0.5;
	margin-bottom: 0.75rem;
}

.summary-dialog-empty p {
	margin: 0;
}

.summary-dialog-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-height: 25rem;
	overflow-y: auto;
}

.summary-dialog-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
}

.summary-dialog-item.clickable {
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: all 0.15s ease;
}

.summary-dialog-item.clickable:hover {
	background: var(--hover);
	border-color: var(--accent-base);
}

.summary-dialog-item-icon {
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	color: #fff;
	flex-shrink: 0;
}

.summary-dialog-item-content {
	flex: 1;
	min-width: 0;
}

.summary-dialog-item-title {
	font-weight: 600;
	color: var(--pop);
}

.summary-dialog-item-detail {
	font-size: 0.85em;
	color: var(--muted);
	margin-top: 0.125rem;
}

.summary-dialog-stats {
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 1rem 0;
}

.summary-dialog-stat {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.summary-dialog-stat.large .summary-dialog-stat-value {
	font-size: 3em;
}

.summary-dialog-stat-value {
	font-size: 2em;
	font-weight: 700;
	color: var(--pop);
	line-height: 1.2;
}

.summary-dialog-stat-label {
	font-size: 0.85em;
	color: var(--muted);
}

.summary-dialog-change {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius);
	margin-top: 1rem;
	font-weight: 500;
}

.summary-dialog-change.positive {
	background: color-mix(in srgb, var(--green-base) 15%, transparent);
	color: var(--green-base);
}

.summary-dialog-change.negative {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	color: var(--red-base);
}

/* Responsive adjustments for summary stats */
@media (max-width: 40rem) {
	.summary-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}

	.summary-stat-card {
		padding: 0.75rem;
		flex-direction: column;
		text-align: center;
		gap: 0.5rem;
	}

	.summary-stat-arrow {
		display: none;
	}

	.summary-stat-content {
		width: 100%;
	}

	.summary-stat-label {
		white-space: normal;
	}
}

.mesai-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	background: var(--accent-base);
	color: var(--accent-pop);
	border: none;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.mesai-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-0.0625rem);
}

.mesai-btn:active {
	transform: translateY(0);
}

/* Work Session Form (inline on dashboard) */
.work-session-card {
	padding: 1rem;
}

.work-session-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.work-session-form.loading-state,
.work-session-form.empty-state-inline {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted);
	font-size: 0.875rem;
	padding: 0.5rem 0;
}

.active-sessions-inline {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.session-card-inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: color-mix(in srgb, var(--success), transparent 90%);
	border: 0.0625rem solid color-mix(in srgb, var(--success), transparent 70%);
	border-radius: var(--radius);
}

.session-card-inline.active {
	background: color-mix(in srgb, var(--success), transparent 88%);
}

.session-info-inline {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
	min-width: 0;
}

.session-name-inline {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--pop);
}

.session-meta-inline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted);
}

.session-duration-inline.live {
	color: var(--success);
	font-weight: 500;
}

.start-session-inline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.start-session-inline .workgroup-select {
	flex: 1;
	min-width: 9.375rem;
	padding: 0.5rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base);
	color: var(--pop);
	font-size: 0.875rem;
}

.start-session-inline .note-input {
	flex: 1;
	min-width: 7.5rem;
	padding: 0.5rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base);
	color: var(--pop);
	font-size: 0.875rem;
}

.start-session-inline .note-input::placeholder {
	color: var(--muted);
}

.start-session-inline .btn {
	white-space: nowrap;
}

@media (max-width: 37.5rem) {
	.start-session-inline {
		flex-direction: column;
	}

	.start-session-inline .workgroup-select,
	.start-session-inline .note-input,
	.start-session-inline .btn {
		width: 100%;
	}
}

/* QR Scanner Component */
.qr-scanner {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.qr-scanner-input-row {
	display: flex;
	gap: 0.25rem;
	align-items: stretch;
}

.qr-scanner-input {
	flex: 1;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base);
	color: var(--pop);
	font-size: 0.875rem;
}

.qr-scanner-input::placeholder {
	color: var(--muted);
}

.qr-scanner-actions {
	display: flex;
	gap: 0.25rem;
}

.qr-scanner-actions .btn.icon-only {
	padding: 0.5rem;
	min-width: auto;
}

.qr-scanner-preview {
	position: relative;
	width: 100%;
	max-width: 18.75rem;
	aspect-ratio: 1;
	background: #000;
	border-radius: var(--radius);
	overflow: hidden;
	margin: 0.5rem auto;
}

.qr-scanner-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qr-scanner-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qr-scanner-frame {
	width: 60%;
	height: 60%;
	border: 0.1875rem solid var(--accent-base);
	border-radius: 0.75rem;
	box-shadow: 0 0 0 62.5rem rgba(0, 0, 0, 0.5);
}

.qr-scanner-cancel {
	position: absolute;
	bottom: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
}

.qr-scanner-status {
	font-size: 0.75rem;
	color: var(--muted);
	text-align: center;
}

/* Session QR and Location Requirements */
.session-qr-inline {
	flex: 1;
	min-width: 12.5rem;
}

.session-qr-requirement,
.session-location-requirement {
	width: 100%;
	padding: 0.75rem;
	background: color-mix(in srgb, var(--accent-base), transparent 92%);
	border: 0.0625rem solid color-mix(in srgb, var(--accent-base), transparent 80%);
	border-radius: var(--radius);
	margin-bottom: 0.5rem;
}

.requirement-label {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--accent-base);
	margin-bottom: 0.5rem;
}

.location-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
}

.location-status.loading {
	color: var(--muted);
	background: color-mix(in srgb, var(--muted), transparent 90%);
}

.location-status.valid {
	color: var(--success);
	background: color-mix(in srgb, var(--success), transparent 90%);
}

.location-status.invalid {
	color: var(--danger);
	background: color-mix(in srgb, var(--danger), transparent 90%);
}

.location-status.error {
	color: var(--warning);
	background: color-mix(in srgb, var(--warning), transparent 90%);
	flex-wrap: wrap;
}

.location-status.error .btn {
	margin-left: auto;
}

/* Calendar styles */
.calendar-page {
	display: grid;
	grid-template-columns: 1fr 20rem;
	gap: 1.25rem;
	min-height: 0;
}

.calendar-main {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 0;
	overflow: auto;
}

.calendar-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.calendar-picker {
	background: color-mix(in srgb, var(--base), var(--pop) 2%);
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	padding: 1rem;
}

.calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.calendar-nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.calendar-nav button {
	padding: 0.375rem 0.625rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	cursor: pointer;
	font-size: 0.875rem;
	transition: all var(--transition-fast);
}

.calendar-nav button:hover {
	background: var(--hover);
}

.calendar-title {
	font-weight: 600;
	font-size: 0.9375rem;
}

.calendar-today {
	padding: 0.375rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	cursor: pointer;
	font-size: 0.8125rem;
	transition: all var(--transition-fast);
}

.calendar-today:hover {
	background: var(--hover);
}

.calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 0.5rem;
}

.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.125rem;
}

.calendar-day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	border-radius: var(--radius);
	cursor: pointer;
	font-size: 0.8125rem;
	transition: all var(--transition-fast);
	position: relative;
	background: transparent;
	border: 0.125rem solid transparent;
	padding: 0.125rem;
}

.calendar-day:hover {
	background: var(--hover);
}

.calendar-day.other-month {
	opacity: 0.35;
}

.calendar-day.weekend {
	background: color-mix(in srgb, var(--base), var(--pop) 4%);
}

.calendar-day.today .day-num {
	background: var(--accent-base);
	color: var(--accent-pop);
	border-radius: 50%;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendar-day.selected {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
}

.calendar-dots {
	position: relative;
	width: 100%;
	height: 0.375rem;
	min-height: 0.375rem;
}

.calendar-dot {
	position: absolute;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	top: 0;
}

/* Calendar filters */
.calendar-filters {
	background: color-mix(in srgb, var(--base), var(--pop) 2%);
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	padding: 1rem;
}

.calendar-filters-title {
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 0.75rem;
}

.calendar-filter-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0;
}

.calendar-filter-item input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--accent-base);
}

.calendar-filter-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
}

.calendar-filter-dot.task {
	background: var(--blue-base);
}

.calendar-filter-dot.subunit-task {
	background: var(--accent-base);
}

.calendar-filter-dot.workgroup {
	background: var(--green-base);
}

.calendar-filter-divider {
	border: none;
	border-top: 0.0625rem solid var(--border);
	margin: 0.5rem 0;
}

.calendar-filter-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.calendar-filter-section .calendar-filters-title {
	margin-bottom: 0;
	font-size: 0.75rem;
}

.calendar-filter-select {
	padding: 0.5rem 0.625rem;
	font-size: 0.8125rem;
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
	background: var(--base-pop);
}

/* Event list */
.event-list-card {
	background: color-mix(in srgb, var(--base), var(--pop) 2%);
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.event-list-header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border-bottom: 0.0625rem solid var(--border);
	font-weight: 600;
}

.event-list-content {
	flex: 1;
	overflow-y: auto;
	padding: 0.75rem;
}

.event-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem;
	border-radius: var(--radius);
	transition: all var(--transition-fast);
}

.event-item:hover {
	background: var(--hover);
}

.event-item-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	margin-top: 0.3125rem;
	flex-shrink: 0;
}

.event-item-dot.task {
	background: var(--blue-base);
}

.event-item-dot.task.subunit-task {
	background: var(--accent-base);
}

.event-item-dot.workgroup {
	background: var(--green-base);
}

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

.event-item-title {
	font-weight: 600;
	font-size: 0.875rem;
}

.event-item-time {
	font-size: 0.75rem;
	color: var(--muted);
	margin-top: 0.125rem;
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
}

.event-date-range {
	font-size: 0.75rem;
}

.event-repeat-pattern {
	font-size: 0.6875rem;
	font-style: italic;
	opacity: 0.9;
}

.event-timezone {
	font-size: 0.625rem;
	opacity: 0.8;
}

.event-time-range {
	font-size: 0.6875rem;
}

.event-item-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Color group utility classes - base is background, pop is text color */
.color-blue {
	background: var(--blue-base);
	color: var(--blue-pop);
}

.color-red {
	background: var(--red-base);
	color: var(--red-pop);
}

.color-green {
	background: var(--green-base);
	color: var(--green-pop);
}

.color-orange {
	background: var(--orange-base);
	color: var(--orange-pop);
}

.color-yellow {
	background: var(--yellow-base);
	color: var(--yellow-pop);
}

.event-status-badge {
	font-size: 0.625rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 62.4375rem;
}

.event-item-assignees {
	margin-top: 0.375rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.event-assignee-avatars {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	flex-wrap: wrap;
}

.event-assignee-avatars .avatar {
	border: 0.0625rem solid var(--base);
	margin-left: -0.25rem;
}

.event-assignee-avatars .avatar:first-child {
	margin-left: 0;
}

.event-assignee-more {
	font-size: 0.6875rem;
	color: var(--muted);
	margin-left: 0.25rem;
}

.event-assignee-units {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
}

.event-unit-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.625rem;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
	color: var(--accent-base);
}

.event-empty {
	text-align: center;
	padding: 2.5rem 1.25rem;
	color: var(--muted);
}

@media (max-width: 56.25rem) {
	.calendar-page {
		grid-template-columns: 1fr;
	}

	.calendar-sidebar {
		order: -1;
	}
}

/* Avatar in member list */
.member-item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

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

/* Member Search Dropdown */
.member-search-container {
	position: relative;
}

.member-search-dropdown {
	position: sticky;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	z-index: 100;
	max-height: 18.75rem;
	overflow-y: auto;
	margin-top: 0.25rem;
}

.member-search-option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: none;
	background: transparent;
	color: var(--pop);
	text-align: left;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.member-search-option:hover:not(:disabled) {
	background: var(--hover);
}

.member-search-option:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.member-search-option+.member-search-option {
	border-top: 0.0625rem solid var(--border);
}

.member-search-option-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.member-search-option-name {
	font-weight: 500;
}

.member-search-option-phone {
	font-size: 0.85em;
	color: var(--muted);
}

.member-search-option.create-option {
	border-top: 0.125rem solid var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.member-search-option.create-option:hover:not(:disabled) {
	background: color-mix(in srgb, var(--accent-base) 20%, transparent);
}

.create-option-icon {
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-base);
	color: var(--accent-pop);
	border-radius: 50%;
}

/* ===== Timeschedule Search Dropdown ===== */
.timeschedule-search-container {
	position: relative;
}

.timeschedule-search-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 2.5rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	z-index: 100;
	max-height: 15.625rem;
	overflow-y: auto;
	margin-top: 0.25rem;
}

.timeschedule-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: none;
	background: transparent;
	color: var(--pop);
	text-align: left;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.timeschedule-option:hover {
	background: var(--hover);
}

.timeschedule-option.selected {
	background: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.timeschedule-option+.timeschedule-option {
	border-top: 0.0625rem solid var(--border);
}

.timeschedule-option-name {
	font-weight: 500;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.timeschedule-option-content {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex: 1;
	min-width: 0;
}

.timeschedule-option-source {
	font-size: 0.75rem;
	color: var(--muted);
	font-weight: 400;
}

.timeschedule-dropdown-empty {
	padding: 1rem;
	text-align: center;
	color: var(--muted);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.timeschedule-dropdown-empty .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.timeschedule-clear-btn:hover {
	color: var(--pop);
}

.search-loading {
	font-size: 0.85em;
	color: var(--muted);
	margin-top: 0.25rem;
}

/* Dialog close button styling */
.dialog-close {
	flex-shrink: 0;
}

/* ===== QR Settings Dialog ===== */
.qr-settings-dialog {
	display: grid;
	gap: 1.25em;
	padding-top: 1em;
}

.qr-settings-dialog .toggle-field {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.75em 1em;
	background: var(--surface);
	border-radius: var(--box-radius);
	cursor: pointer;
}

.qr-settings-dialog .toggle-field input[type="checkbox"] {
	width: 2.5em;
	height: 1.4em;
	appearance: none;
	background: var(--border);
	border-radius: 1em;
	position: relative;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.qr-settings-dialog .toggle-field input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.2em;
	width: 1em;
	height: 1em;
	background: var(--pop);
	border-radius: 50%;
	transition: transform var(--transition-fast);
}

.qr-settings-dialog .toggle-field input[type="checkbox"]:checked {
	background: var(--accent-base);
}

.qr-settings-dialog .toggle-field input[type="checkbox"]:checked::after {
	transform: translateX(1.1em);
}

.qr-settings-dialog .qr-image {
	width: 12.5rem;
	height: 12.5rem;
	border-radius: var(--radius);
	background: white;
	padding: 0.5em;
}

.qr-settings-dialog .btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1em;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	color: var(--pop);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.qr-settings-dialog .btn-secondary:hover {
	background: var(--hover);
}

.qr-settings-dialog .btn-secondary svg {
	flex-shrink: 0;
}

/* ===== Page Layout ===== */
.page {
	display: grid;
	gap: 1.25rem;
	align-content: start;
}

.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.page-header h1 {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0;
}

/* ===== List Controls (Search + Sort) ===== */
.list-controls {
	display: grid;
	grid-auto-flow: column;
	gap: 0.3125rem;
	justify-content: start;
}

.search-box input {
	width: 100%;
}

.sort-controls {
	display: contents;
}

.sort-controls select {
	padding: 0.5em 0.75em;
	font-size: 0.8125rem;
}

/* ===== Card Grid ===== */
.card-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 26.25rem), 1fr));
}

/* Cards with expandable timeline should span full width */
.card-grid .card:has(.card-expand-toggle) {
	grid-column: 1 / -1;
}

.card {
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	padding: 1.125rem;
	background: color-mix(in srgb, var(--base), var(--pop) 2%);
	display: grid;
	align-content: start;
	gap: 0.75rem;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
	border-color: color-mix(in srgb, var(--accent-base) 50%, var(--border));
	box-shadow: var(--shadow-sm);
}

.card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.card-title {
	font-size: 1.1em;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.card-actions {
	display: flex;
	gap: 0.375rem;
	flex-shrink: 0;
}

.card-description {
	margin: 0;
	font-size: 0.9em;
	color: var(--muted);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-meta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.85em;
	color: var(--muted);
}

/* Inherited card styling */
.card-inherited {
	border-left: 0.1875rem solid var(--accent-base);
	opacity: 0.85;
}

.card-inherited:hover {
	opacity: 1;
}

.card-source {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75em;
	color: var(--accent-base);
	margin-top: 0.125rem;
}

.card-source .icon {
	width: 0.75rem;
	height: 0.75rem;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.meta-item svg {
	flex-shrink: 0;
	opacity: 0.7;
}

/* Card Member Avatars */
.card-member-avatars {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.card-member-avatars .avatar {
	border: 0.125rem solid var(--base);
	margin-left: -0.375rem;
}

.card-member-avatars .avatar:first-child {
	margin-left: 0;
}

.card-member-more {
	font-size: 0.6875rem;
	color: var(--muted);
	margin-left: 0.25rem;
}

/* ===== Icon Button ===== */
.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	aspect-ratio: 1;
	padding: 0;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	cursor: pointer;
	transition: all var(--transition-fast);
	color: var(--muted);
}

.icon-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.icon-button:hover {
	background: var(--hover);
	border-color: var(--accent-base);
	color: var(--pop);
}

.icon-button.danger:hover {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	border-color: var(--red-base);
	color: var(--red-base);
}

/* ===== Empty State ===== */
.empty-state {
	text-align: center;
	padding: 3rem 1.5rem;
	color: var(--muted);
	font-size: 0.95em;
}

/* ===== Loading ===== */
.loading {
	text-align: center;
	padding: 3rem 1.5rem;
	color: var(--muted);
}

/* ===== Load More ===== */
.load-more {
	display: flex;
	justify-content: center;
	padding: 1rem;
}

.load-more button {
	padding: 0.625rem 1.5rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.load-more button:hover {
	background: var(--hover);
	border-color: var(--accent-base);
}

/* ===== Assignment Dialog ===== */
.assignment-dialog {
	display: grid;
	gap: 1rem;
}

.member-list {
	display: grid;
	gap: 0.5rem;
	max-height: 25rem;
	overflow-y: auto;
}

.member-checkbox {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.member-checkbox:hover {
	background: var(--hover);
	border-color: var(--accent-base);
}

.member-checkbox input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--accent-base);
}

.member-name {
	font-weight: 500;
}

/* ===== Form Fields ===== */
.form-fields {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
}

.form-actions {
	display: flex;
	gap: 0.375rem;
	justify-content: flex-end;
	flex-wrap: wrap;
	position: sticky;
	bottom: 0;
	background: var(--base);
	padding: 0.75rem 0.75rem;
	border-top: 0.0625rem solid var(--border);
	z-index: 10;
}

/* ===== Responsive ===== */
@media (max-width: 40rem) {
	.card-grid {
		grid-template-columns: 1fr;
	}

	.list-controls {
		grid-auto-flow: row;
	}
}

/* ===== Schedule Timeline (Çizelge) ===== */
.schedule-timeline {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 0.0625rem solid var(--border);
}

.timeline-no-schedule-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.75rem;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--warning) 10%, var(--base-pop));
	border: 0.0625rem solid color-mix(in srgb, var(--warning) 30%, var(--border));
	color: var(--text-muted);
	font-size: 0.85em;
}

.timeline-empty {
	text-align: center;
	padding: 1rem;
	color: var(--muted);
	font-size: 0.9em;
}

/* Date selector */
.timeline-date-selector {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.timeline-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base);
	color: var(--pop);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.timeline-nav-btn:hover {
	background: var(--hover);
}

.timeline-date-input {
	padding: 0.25rem 0.5rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base);
	color: var(--pop);
	font-size: 0.8125rem;
}

.timeline-today-btn {
	padding: 0.25rem 0.625rem;
	border: 0.0625rem solid var(--accent-base);
	border-radius: var(--radius);
	background: transparent;
	color: var(--accent-base);
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.timeline-today-btn:hover {
	background: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

/* Tabs */
.timeline-tabs {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	margin-bottom: 0.75rem;
	border-bottom: 0.0625rem solid var(--border);
	padding-bottom: 0.5rem;
}

.timeline-tab {
	padding: 0.375rem 0.75rem;
	border: none;
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.timeline-tab:hover {
	background: var(--hover);
	color: var(--pop);
}

.timeline-tab.active {
	background: var(--accent-base);
	color: white;
}

/* Schedule slots (work schedule background) */
.timeline-schedule-slot {
	position: absolute;
	top: 0.25rem;
	bottom: 0.25rem;
	background: color-mix(in srgb, var(--accent-base) 12%, transparent);
	border: 0.0625rem dashed color-mix(in srgb, var(--accent-base) 40%, transparent);
	border-radius: 0.25rem;
	pointer-events: none;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timeline-schedule-slot.overnight {
	background: color-mix(in srgb, var(--blue-base) 12%, transparent);
	border-color: color-mix(in srgb, var(--blue-base) 40%, transparent);
}

.timeline-schedule-slot.absent {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	border: 0.0625rem dashed var(--red-base);
	z-index: 1;
}

.timeline-absent-text {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--red-pop);
	font-size: 0.6875rem;
	font-weight: 500;
	white-space: nowrap;
}

/* Session indicators for overnight sessions */
.session-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	font-size: 0.625rem;
	flex-shrink: 0;
}

.session-indicator.from-prev {
	color: var(--blue-pop);
}

.session-indicator.to-next {
	color: var(--blue-pop);
}

/* Logs view */
.timeline-logs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.timeline-log-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem;
	background: var(--base-pop);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
}

.timeline-log-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

.timeline-log-icon.start {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-pop);
}

.timeline-log-icon.end {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-pop);
}

.timeline-log-time {
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-width: 3.125rem;
}

.timeline-log-member {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.timeline-log-member:hover {
	text-decoration: underline;
}

.timeline-log-name {
	font-size: 0.8125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.timeline-log-type {
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.125rem 0.5rem;
	border-radius: 62.4375rem;
}

.timeline-log-type.start {
	background: color-mix(in srgb, var(--green-base) 15%, transparent);
	color: var(--green-pop);
}

.timeline-log-type.end {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	color: var(--red-pop);
}

/* Session Status Badge - for attendance status (late, early, ontime, overtime) */
.session-status-badge {
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 62.4375rem;
	white-space: nowrap;
}

.session-status-badge.status-late {
	background: color-mix(in srgb, var(--red-base) 18%, transparent);
	color: var(--red-base);
}

.session-status-badge.status-early {
	background: color-mix(in srgb, var(--green-base) 18%, transparent);
	color: var(--green-pop);
}

.session-status-badge.status-ontime {
	background: color-mix(in srgb, var(--blue-base) 18%, transparent);
	color: var(--blue-base);
}

.session-status-badge.status-overtime {
	background: color-mix(in srgb, var(--orange-base) 20%, transparent);
	color: var(--orange-pop);
}

.session-status-badge.status-unscheduled {
	background: color-mix(in srgb, var(--muted) 15%, transparent);
	color: var(--muted);
}

/* Expected time info - shows relative time difference */
.timeline-log-expected,
.live-log-expected,
.session-log-expected {
	font-size: 0.6875rem;
	color: var(--muted);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Legacy timeline styles (kept for compatibility) */
.timeline-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	gap: 0.75rem;
}

.timeline-title {
	font-weight: 600;
	font-size: 0.9em;
}

.timeline-time-label {
	font-size: 0.85em;
	color: var(--muted);
	font-weight: 500;
}

.timeline-container {
	position: relative;
	padding-top: 1.5rem;
}

.timeline-markers {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1.25rem;
}

.timeline-marker {
	position: absolute;
	transform: translateX(-50%);
}

.marker-label {
	font-size: 0.625rem;
	color: var(--muted);
}

.timeline-schedule-bar {
	position: absolute;
	top: 1.25rem;
	height: calc(100% - 1.25rem);
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
	border-radius: 0.25rem;
	pointer-events: none;
}

.timeline-members {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

.timeline-member-row {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 0.75rem;
	align-items: center;
}

.timeline-member-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.timeline-member-name {
	font-size: 0.85em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.timeline-member-bar-container {
	position: relative;
	height: 1.5rem;
	background: color-mix(in srgb, var(--pop) 5%, transparent);
	border-radius: 0.25rem;
}

.timeline-member-bar {
	position: absolute;
	top: 0.125rem;
	bottom: 0.125rem;
	background: var(--green-base);
	border-radius: 0.1875rem;
}

/* Card with expandable timeline */
.card-expandable {
	position: relative;
}

.card-expand-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	width: 100%;
	padding: 0.5rem;
	margin-top: 0.5rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	cursor: pointer;
	font-size: 0.85em;
	color: var(--muted);
	transition: all var(--transition-fast);
}

.card-expand-toggle:hover {
	background: var(--hover);
	color: var(--pop);
}

.card-expand-toggle svg {
	transition: transform var(--transition-fast);
}

.card-expand-toggle.expanded svg {
	transform: rotate(180deg);
}

/* ===== Week Schedule Editor ===== */
.week-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.btn-small {
	padding: 0.35em 0.7em;
	font-size: 0.85em;
}

.week-schedule {
	display: grid;
	gap: 0.5rem;
}

.week-day-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	flex-wrap: wrap;
}

.week-day-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 7.5rem;
	cursor: pointer;
}

.week-day-toggle input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--accent-base);
}

.week-day-name {
	font-weight: 500;
}

.week-day-times {
	display: grid;
	gap: 0.5rem;
	grid-auto-flow: column;
	align-items: center;
}

.week-day-times input[type="time"] {
	width: auto;
	padding: 0.4em 0.6em;
	font-size: 0.9em;
}

.time-separator {
	color: var(--muted);
}

.overnight-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 600;
	background: var(--blue-base);
	color: var(--blue-pop);
	border-radius: 62.4375rem;
}

.field-hint {
	font-size: 0.75rem;
	color: var(--muted);
	margin-bottom: 0.5rem;
}

.overnight-indicator {
	font-size: 0.85em;
	color: var(--blue-base);
	font-weight: normal;
}

/* ===== Empty State ===== */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.95em;
}

/* ===== Load More ===== */
.load-more {
	display: flex;
	justify-content: center;
	padding: 1rem;
}

.load-more button {
	padding: 0.65em 1.5em;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.load-more button:hover {
	background: var(--hover);
	border-color: var(--accent-base);
}

/* ===== Button Variants ===== */
.btn.small,
button.small {
	padding: 0.4em 0.8em;
	font-size: 0.85em;
}

/* ===== Member Item in Cards ===== */
.member-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.member-info {
	min-width: 0;
}

.member-info .card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* ===== Form Fields inside Dialog ===== */
.form-fields {
	display: grid;
	gap: 1rem;
}

.form-fields .field {
	display: grid;
	gap: 0.375rem;
}

.form-fields .field-label {
	font-size: 0.75rem;
	color: var(--muted);
	font-weight: 600;
}

.form-fields input:not([type="checkbox"]):not([type="radio"]),
.form-fields select,
.form-fields textarea {
	width: 100%;
}

.form-fields textarea {
	min-height: 5rem;
	resize: vertical;
}

/* ===== Member Link ===== */
.member-link {
	text-decoration: none;
	color: inherit;
	transition: opacity var(--transition-fast);
}

.member-link:hover {
	opacity: 0.8;
}

.member-avatar-link {
	display: inline-block;
	text-decoration: none;
	border-radius: 50%;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.member-avatar-link:hover {
	transform: scale(1.1);
	z-index: 1;
	box-shadow: 0 0 0 0.125rem var(--accent-base);
}

/* ===== Analytics Dashboard ===== */
.analytics-card {
	overflow: hidden;
}

.analytics-header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

@media (min-width: 40rem) {
	.analytics-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

.analytics-controls {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 30rem) {
	.analytics-controls {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}
}

/* Toggle Switch */
.toggle-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
}

.toggle-label input {
	display: none;
}

.toggle-switch {
	position: relative;
	width: 2.25rem;
	height: 1.25rem;
	background: var(--border);
	border-radius: 0.625rem;
	transition: background var(--transition-fast);
}

.toggle-switch::after {
	content: '';
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	width: 1rem;
	height: 1rem;
	background: var(--pop);
	border-radius: 50%;
	transition: transform var(--transition-fast);
}

.toggle-label input:checked+.toggle-switch {
	background: var(--accent-base);
}

.toggle-label input:checked+.toggle-switch::after {
	transform: translateX(1rem);
}

.toggle-text {
	font-size: 0.85em;
	color: var(--muted);
}

/* Period Selector */
.period-selector {
	display: flex;
	gap: 0.25rem;
	padding: 0.1875rem;
	background: var(--surface);
	border-radius: var(--radius);
}

.period-btn {
	padding: 0.375rem 0.75rem;
	font-size: 0.8em;
	border: none;
	background: transparent;
	color: var(--muted);
	border-radius: calc(var(--radius) - 0.125rem);
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.period-btn:hover {
	color: var(--pop);
	background: var(--hover);
}

.period-btn.active {
	background: var(--accent-base);
	color: var(--accent-pop);
}

/* Date Navigation */
.date-nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.date-display {
	font-size: 0.9em;
	font-weight: 500;
	color: var(--pop);
	min-width: 8.75rem;
	text-align: center;
}

.date-nav .btn-icon {
	padding: 0.375rem;
}

.date-nav .btn-icon:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.date-nav .btn-small {
	padding: 0.25rem 0.625rem;
	font-size: 0.75em;
	border: 0.0625rem solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.date-nav .btn-small:hover {
	background: var(--hover);
	color: var(--pop);
	border-color: var(--accent-base);
}

/* Date Selector Card */
.date-selector-card {
	padding: 0.75rem 1rem;
}

.date-selector-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.date-display-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--surface);
	border-radius: var(--radius);
	min-width: 11.25rem;
	justify-content: center;
}

.date-display-container .date-display {
	font-weight: 600;
	color: var(--pop);
}

.today-badge {
	font-size: 0.7em;
	padding: 0.125rem 0.375rem;
	background: var(--accent-base);
	color: var(--accent-pop);
	border-radius: 0.25rem;
	font-weight: 500;
}

.date-selector-content .btn-small {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

/* Stat card danger variant */
.stat-card.danger {
	border-left-color: var(--error);
}

.stat-card.danger .stat-icon {
	background: var(--error);
	color: #fff;
}

/* Analytics Loading/Empty States */
.analytics-loading,
.analytics-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2.5rem 1.25rem;
	color: var(--muted);
}

.analytics-loading svg {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Analytics Content */
.analytics-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Stats Row */
.analytics-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
	gap: 0.75rem;
}

.stat-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--surface);
	border-radius: var(--radius);
	border-left: 0.1875rem solid transparent;
}

.stat-card.primary {
	border-left-color: var(--accent-base);
}

.stat-card.success {
	border-left-color: var(--green-base);
}

.stat-card.warning {
	border-left-color: var(--orange-base);
}

.stat-card.danger {
	border-left-color: var(--red-base);
}

.stat-icon {
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.stat-card.primary .stat-icon {
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
	color: var(--accent-base);
}

.stat-card.success .stat-icon {
	background: color-mix(in srgb, var(--green-base) 15%, transparent);
	color: var(--green-base);
}

.stat-card.warning .stat-icon {
	background: color-mix(in srgb, var(--orange-base) 15%, transparent);
	color: var(--orange-base);
}

.stat-card.danger .stat-icon {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	color: var(--red-base);
}

.stat-content {
	min-width: 0;
}

.stat-value {
	font-size: 1.75em;
	font-weight: 700;
	line-height: 1.1;
	color: var(--pop);
}

.stat-label {
	font-size: 0.85em;
	color: var(--muted);
	margin-top: 0.125rem;
}

/* Analytics Grid */
.analytics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
	gap: 1rem;
}

.analytics-section {
	padding: 1rem;
	background: var(--surface);
	border-radius: var(--radius);
}

.analytics-section-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem 0;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--pop);
}

/* Analytics Bars */
.analytics-bars {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.bar-row {
	display: grid;
	grid-template-columns: 5rem 1fr 2.5rem;
	align-items: center;
	gap: 0.75rem;
}

.bar-label {
	font-size: 0.85em;
	color: var(--muted);
	text-align: right;
}

.bar-container {
	height: 0.5rem;
	background: var(--border);
	border-radius: 0.25rem;
	overflow: hidden;
}

.bar-fill {
	height: 100%;
	border-radius: 0.25rem;
	transition: width 0.5s ease-out;
}

.bar-fill.success {
	background: var(--green-base);
}

.bar-fill.danger {
	background: var(--red-base);
}

.bar-fill.warning {
	background: var(--orange-base);
}

.bar-fill.info {
	background: var(--blue-base);
}

.bar-value {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--pop);
	text-align: right;
}

/* Analytics Detail */
.analytics-detail {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.75rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.85em;
	background: color-mix(in srgb, var(--red-base) 10%, transparent);
	color: var(--red-base);
	border-radius: var(--radius);
}

.analytics-detail.info {
	background: color-mix(in srgb, var(--blue-base) 10%, transparent);
	color: var(--blue-base);
}

.analytics-detail strong {
	font-weight: 600;
}

/* Time Stats */
.analytics-time-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem;
	background: var(--surface);
	border-radius: var(--radius);
}

.time-stat {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted);
	font-size: 0.9em;
}

.time-stat-label {
	color: var(--muted);
}

.time-stat-value {
	font-weight: 600;
}

.time-stat-value.danger {
	color: var(--red-base);
}

.time-stat-value.warning {
	color: var(--orange-base);
}

.time-stat-value.info {
	color: var(--blue-base);
}

/* Analytics Note */
.analytics-note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	font-size: 0.85em;
	background: color-mix(in srgb, var(--accent-base) 10%, transparent);
	color: var(--muted);
	border-radius: var(--radius);
}

.analytics-note strong {
	color: var(--pop);
}

/* ===== Live Log List (Dashboard) ===== */
.live-indicator {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--green-base);
	border-radius: 50%;
	margin-left: 0.5rem;
	animation: pulse 2s infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}
}

.live-log-list {
	display: grid;
	gap: 0.75rem;
}

.live-log-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
	border-left: 0.1875rem solid transparent;
}

.live-log-item.start {
	border-left-color: var(--green-base);
}

.live-log-item.end {
	border-left-color: var(--red-base);
}

.live-log-icon {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.live-log-icon.start {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-base);
}

.live-log-icon.end {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

.live-log-content {
	flex: 1;
	min-width: 0;
}

.live-log-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.live-log-name {
	font-weight: 600;
	color: var(--pop);
	text-decoration: none;
}

.live-log-name:hover {
	text-decoration: underline;
}

.live-log-time {
	font-size: 0.85em;
	color: var(--muted);
	white-space: nowrap;
}

.live-log-detail {
	font-size: 0.9em;
	margin-top: 0.125rem;
}

.live-log-note {
	margin-top: 0.25rem;
}

/* ===== Member Detail Page ===== */
.member-detail-page {
	gap: 1.25rem;
}

.member-detail-header {
	display: grid;
	gap: 1rem;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--muted);
	text-decoration: none;
	font-size: 0.9em;
	transition: color var(--transition-fast);
}

.back-link:hover {
	color: var(--pop);
}

.member-profile {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.member-profile-info h1 {
	font-size: 1.5em;
	margin: 0 0 0.25rem 0;
}

.member-details-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.member-detail-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	background: var(--hover);
	border-radius: var(--radius);
	font-size: 0.8em;
	color: var(--muted);
}

/* Scope Selector - segmented control for company/unit view */
.scope-selector {
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--hover);
	border-radius: var(--radius);
	width: fit-content;
}

.scope-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	background: transparent;
	border: none;
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 500;
	cursor: pointer;
	border-radius: calc(var(--radius) - 0.125rem);
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.scope-tab:hover {
	color: var(--pop);
	background: var(--surface);
}

.scope-tab.active {
	color: var(--accent-pop);
	background: var(--accent-base);
}

/* ===== Stats Grid ===== */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
	gap: 0.75rem;
}

.stat-card {
	padding: 1rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
}

.stat-value {
	font-size: 2em;
	font-weight: 700;
	color: var(--accent-base);
	line-height: 1;
}

.stat-label {
	font-size: 0.85em;
	color: var(--muted);
	margin-top: 0.25rem;
}

/* ===== Tab Bar ===== */
.tab-bar {
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--surface);
	border-radius: var(--box-radius);
	overflow-x: auto;
}

.tab {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 1rem;
	background: transparent;
	border: none;
	color: var(--muted);
	font-size: 0.9em;
	font-weight: 500;
	cursor: pointer;
	border-radius: var(--radius);
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.tab:hover {
	color: var(--pop);
	background: var(--hover);
}

.tab.active {
	color: var(--accent-pop);
	background: var(--accent-base);
}

/* ===== Dashboard Grid ===== */
.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
	gap: 1rem;
}

.dashboard-grid .card {
	align-content: start;
}

.dashboard-grid .span-2 {
	grid-row: span 2;
}

/* ===== Session Log List ===== */
.session-log-list {
	display: grid;
	gap: 0.5rem;
}

.session-log-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.625rem;
	background: var(--surface);
	border-radius: var(--radius);
}

.session-log-icon {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.session-log-icon.start {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-base);
}

.session-log-icon.end {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

.session-log-content {
	flex: 1;
	min-width: 0;
}

.session-log-time {
	font-weight: 500;
	font-size: 0.9em;
}

.session-log-detail {
	font-size: 0.85em;
}

.session-log-note {
	font-size: 0.8em;
	color: var(--muted);
	margin-top: 0.125rem;
}

.session-logs-by-date {
	display: grid;
	gap: 1.25rem;
}

.session-date-group {
	display: grid;
	gap: 0.5rem;
}

.session-date-header {
	font-weight: 600;
	font-size: 0.9em;
	color: var(--muted);
	padding-bottom: 0.5rem;
	border-bottom: 0.0625rem solid var(--border);
}

/* ===== Member Reports Tab ===== */
.member-reports {
	display: grid;
	gap: 1rem;
}

.report-filters {
	padding: 1rem;
}

.report-filters .filter-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.report-filters label {
	font-weight: 500;
	font-size: 0.9em;
}

.report-filters select {
	padding: 0.5rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: inherit;
	font-size: 0.9em;
	cursor: pointer;
}

.report-filters select:hover {
	border-color: var(--accent-base);
}

.report-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
	gap: 0.75rem;
}

.report-stat-card {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
}

.report-stat-icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.report-stat-icon.sessions {
	background: color-mix(in srgb, var(--blue-base) 15%, transparent);
	color: var(--blue-base);
}

.report-stat-icon.completed {
	background: color-mix(in srgb, var(--green-base) 15%, transparent);
	color: var(--green-base);
}

.report-stat-icon.hours {
	background: color-mix(in srgb, var(--purple-base, #8b5cf6) 15%, transparent);
	color: var(--purple-base, #8b5cf6);
}

.report-stat-icon.avg {
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
	color: var(--accent-base);
}

.report-stat-content {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.report-stat-value {
	font-size: 1.4em;
	font-weight: 700;
	color: var(--pop);
	line-height: 1.1;
}

.report-stat-label {
	font-size: 0.8em;
	color: var(--muted);
}

.report-entry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.entry-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 1rem 0.75rem;
	border-radius: var(--radius);
	text-align: center;
}

.entry-stat.on-time {
	background: color-mix(in srgb, var(--green-base) 10%, transparent);
}

.entry-stat.early {
	background: color-mix(in srgb, var(--blue-base) 10%, transparent);
}

.entry-stat.late {
	background: color-mix(in srgb, var(--yellow-base, #eab308) 10%, transparent);
}

.entry-stat.overtime {
	background: color-mix(in srgb, var(--purple-base, #8b5cf6) 10%, transparent);
}

.entry-count {
	font-size: 1.8em;
	font-weight: 700;
	line-height: 1;
}

.entry-stat.on-time .entry-count {
	color: var(--green-base);
}

.entry-stat.early .entry-count {
	color: var(--blue-base);
}

.entry-stat.late .entry-count {
	color: var(--yellow-base, #eab308);
}

.entry-stat.overtime .entry-count {
	color: var(--purple-base, #8b5cf6);
}

.entry-label {
	font-size: 0.85em;
	font-weight: 500;
	color: var(--muted);
}

.entry-detail {
	font-size: 0.75em;
	color: var(--muted);
	opacity: 0.8;
}

.avg-time-info {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875em;
	color: var(--muted);
	padding-top: 0.5rem;
	border-top: 0.0625rem solid var(--border);
}

.avg-time-info strong {
	color: var(--pop);
}

.daily-breakdown-list {
	display: grid;
	gap: 0.5rem;
}

.daily-breakdown-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
}

.daily-date {
	font-weight: 600;
	min-width: 6.25rem;
}

.daily-sessions,
.daily-hours,
.daily-late,
.daily-overtime {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.85em;
	color: var(--muted);
}

.daily-late {
	color: var(--yellow-base, #eab308);
}

.daily-overtime {
	color: var(--purple-base, #8b5cf6);
}

.loading-state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2.5rem 1.25rem;
	color: var(--muted);
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2.5rem 1.25rem;
	color: var(--muted);
	text-align: center;
}

.spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* ===== Simple List ===== */
.simple-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.simple-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.625rem;
	background: var(--surface);
	border-radius: var(--radius);
}

/* ===== Task List ===== */
.task-list {
	display: grid;
	gap: 0.625rem;
}

.task-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
}

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

.task-title {
	font-weight: 500;
}

.task-description {
	font-size: 0.9em;
	margin-top: 0.25rem;
}

.task-dates {
	margin-top: 0.375rem;
}

/* ===== Schedule List ===== */
.schedule-list {
	display: grid;
	gap: 0.625rem;
}

.schedule-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

a.schedule-item:hover {
	border-color: var(--accent-base);
	background: var(--surface-hover);
}

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

.schedule-name {
	font-weight: 500;
}

.schedule-description {
	font-size: 0.9em;
	margin-top: 0.25rem;
}

.schedule-unit {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.85em;
	margin-top: 0.25rem;
}

/* ===== Badge Variants ===== */
.badge-success {
	background: var(--green-base);
	color: var(--green-pop);
}

/* ===== Members Page ===== */
.members-page .page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
}

.members-page .page-header-content h1 {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
}

.members-page .page-subtitle {
	margin: 0.25rem 0 0;
	color: var(--muted);
	font-size: 0.875rem;
}

.members-page .page-header-stats {
	display: flex;
	gap: 1.5rem;
}

.members-page .stat-item {
	text-align: center;
}

.members-page .stat-value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--accent-base);
}

.members-page .stat-value .stat-limit {
	font-size: 1rem;
	font-weight: 500;
	color: var(--muted);
}

.members-page .stat-label {
	font-size: 0.75rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.members-page .section {
	margin-bottom: 1.5rem;
}

.members-page .section-header {
	margin-bottom: 0.75rem;
}

.members-page .section-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

/* Member Add Container (Phone Input Form Field) */
.member-add-container {
	position: relative;
	display: grid;
	justify-content: start;
}

.member-add-row {
	display: block grid;
	gap: 0.25rem;
	grid-template-columns: minmax(0, 20em) max-content;
}

.member-add-row .phone-input-wrapper {
	flex: 1;
}

.member-add-row .btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.member-add-container .field {
	margin-bottom: 0;
}

.phone-input-wrapper {
	display: flex;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	overflow: hidden;
	justify-content: start;
}

.phone-input-wrapper:focus-within {
	border-color: var(--accent-base);
	box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--accent-base) 25%, transparent);
}

.phone-prefix {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.65em 0.75rem;
	background: var(--surface);
	border-right: 0.0625rem solid var(--border);
	color: var(--muted);
	font-weight: 500;
	white-space: nowrap;
	user-select: none;
}

.phone-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 0.65em 0.75rem;
	font-size: inherit;
	min-width: 0;
}

.phone-input:focus {
	outline: none;
	border-color: transparent;
	box-shadow: none;
}

.phone-input::placeholder {
	color: var(--muted);
}

.input-spinner {
	width: 1.125rem;
	height: 1.125rem;
	margin-right: 0.75rem;
	border: 0.125rem solid var(--border);
	border-top-color: var(--accent-base);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* Phone Display (read-only) */
.phone-display {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65em 0.75rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	color: var(--pop);
	font-weight: 500;
}

.phone-prefix-static {
	font-size: 1.1em;
}

/* Search Input Wrapper */
.search-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0 0.875rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input-wrapper:focus-within {
	border-color: var(--accent-base);
	box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--accent-base) 25%, transparent);
}

.search-input-wrapper .search-input {
	flex: 1;
	padding: 0.75rem 0;
	border: none;
	background: transparent;
	outline: none;
}

.search-input-wrapper .search-spinner {
	width: 1.125rem;
	height: 1.125rem;
	border: 0.125rem solid var(--border);
	border-top-color: var(--accent-base);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Members Grid */
.members-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(21.25rem, 1fr));
	gap: 1rem;
}

/* Member Card */
.member-card {
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.member-card:hover {
	border-color: var(--accent-base);
	box-shadow: var(--shadow-sm);
}

.member-card-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.member-card-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.member-card-link:hover .member-card-name {
	color: var(--accent-base);
}

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

.member-card-name {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	transition: color var(--transition-fast);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.member-card-phone {
	margin: 0.125rem 0 0;
	font-size: 0.8125rem;
	color: var(--muted);
}

.member-card-roles {
	min-height: 1.75rem;
}

.role-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.role-badge {
	font-size: 0.6875rem;
	font-weight: 500;
	padding: 0.25rem 0.625rem;
	border-radius: 62.4375rem;
	background: color-mix(in srgb, var(--accent-base) 20%, transparent);
	color: var(--accent-base);
	border: 0.0625rem solid color-mix(in srgb, var(--accent-base) 40%, transparent);
}

.member-card-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding-top: 0.5rem;
	border-top: 0.0625rem solid var(--border);
}

.member-card-actions .btn {
	flex: 1;
	min-width: fit-content;
}

/* Button Sizes */
.btn-sm {
	padding: 0.375rem 0.625rem;
	font-size: 0.75rem;
}

.btn-sm svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* Button Variants */
.btn-warning {
	background: var(--yellow-base);
	color: var(--yellow-pop);
}

.btn-danger {
	background: var(--red-base);
	border: 0.0625rem solid var(--red-base);
	color: var(--red-pop);
}

.btn-danger:hover {
	background: color-mix(in srgb, var(--red-base) 85%, #000);
	border-color: color-mix(in srgb, var(--red-base) 85%, #000);
}

/* Role Dialog */
.role-dialog {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.role-dialog-member {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem;
	background: var(--surface);
	border-radius: var(--radius);
}

.role-dialog-member-info h3 {
	margin: 0;
	font-size: 1rem;
}

.role-dialog-member-info p {
	margin: 0.25rem 0 0;
}

.role-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.role-list-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--muted);
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.role-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.role-item:hover {
	border-color: var(--accent-base);
	background: var(--hover);
}

.role-item input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--accent-base);
}

.role-item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.role-item-name {
	font-weight: 500;
}

/* Selected Members in Assignment */
.selected-members {
	margin-top: 1rem;
}

.selected-members .field-label {
	margin-bottom: 0.5rem;
}

.selected-members .member-list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	max-height: 12.5rem;
	overflow-y: auto;
}

.selected-members .member-checkbox {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
}

/* Input Disabled State */
.input-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Field Hint */
.field-hint {
	font-size: 0.75rem;
	color: var(--muted);
	margin-top: 0.25rem;
}

/* ===== Tabs Container ===== */
.tabs {
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--surface);
	border-radius: var(--box-radius);
	overflow-x: auto;
}

/* ===== Page Header Extended ===== */
.page-header-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.page-header-content h1 {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	font-size: 1.5em;
}

.page-subtitle {
	margin: 0;
	font-size: 0.9em;
	color: var(--muted);
}

.page-header-stats {
	display: flex;
	gap: 1.25rem;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 1rem;
	background: var(--surface);
	border-radius: var(--radius);
	min-width: 3.75rem;
}

.stat-value {
	font-size: 1.5em;
	font-weight: 700;
	color: var(--accent-base);
}

.stat-label {
	font-size: 0.75em;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ===== Section Actions ===== */
.section-actions {
	display: flex;
	gap: 0.625rem;
	justify-content: flex-end;
}

/* ===== Member Link in Card ===== */
.member-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	flex: 1;
	min-width: 0;
}

.member-link:hover .member-name {
	color: var(--accent-base);
}

.member-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.member-name {
	font-weight: 600;
	font-size: 0.9375rem;
	transition: color var(--transition-fast);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.member-phone {
	font-size: 0.75rem;
	color: var(--muted);
}

.member-unit-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.6875rem;
	color: var(--accent-base);
	padding: 0.125rem 0.375rem;
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
	border-radius: 62.4375rem;
	margin-top: 0.125rem;
	width: fit-content;
}

.member-unit-badge svg {
	opacity: 0.75;
}

/* ===== Permission Badges ===== */
.permission-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.permission-badge {
	font-size: 0.625rem;
	font-weight: 500;
	padding: 0.1875rem 0.5rem;
	border-radius: 62.4375rem;
	background: color-mix(in srgb, var(--blue-base) 20%, transparent);
	color: var(--blue-base);
	border: 0.0625rem solid color-mix(in srgb, var(--blue-base) 40%, transparent);
}

/* ===== Permission List (in dialog) ===== */
.permission-list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.permission-item {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0.75rem 0.875rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.permission-item:hover {
	border-color: var(--accent-base);
	background: var(--hover);
}

.permission-item input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	accent-color: var(--accent-base);
	flex-shrink: 0;
	cursor: pointer;
}

.permission-item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.permission-item-label {
	font-weight: 600;
	font-size: 0.875rem;
}

.permission-item-desc {
	font-size: 0.75rem;
	color: var(--muted);
}

/* Permission checkbox row (label + checkbox) */
.permission-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	flex: 1;
}

/* Permission scope selector */
.permission-scope {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 0.0625rem solid var(--border);
}

.scope-label {
	font-size: 0.75rem;
	color: var(--muted);
	white-space: nowrap;
}

.scope-select {
	flex: 1;
	padding: 0.375rem 0.625rem;
	font-size: 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base);
	color: var(--pop);
}

.scope-select option {
	background: var(--base);
	color: var(--pop);
}

.scope-select:focus {
	outline: none;
	border-color: var(--accent-base);
}

/* ===== Role Item Perms (in role assign dialog) ===== */
.role-item-perms {
	font-size: 0.75rem;
	color: var(--muted);
}

/* ===== Role Dialog Member Info ===== */
.role-dialog-member-info h4 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.role-dialog-member-info p {
	margin: 0.25rem 0 0;
}

/* ===== Tab Badge ===== */
.dialog-tab .tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.375rem;
	margin-left: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	background: var(--accent-base);
	color: var(--surface);
	border-radius: 62.4375rem;
}

/* ===== Role Members List (in role dialog) ===== */
.role-members-list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.role-members-empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.875rem;
}

.role-member-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.875rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.role-member-item:hover {
	border-color: var(--accent-base);
	background: var(--hover);
}

.role-member-item.selected {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.role-member-item input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--accent-base);
	flex-shrink: 0;
}

.role-member-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.role-member-name {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.role-member-phone {
	font-size: 0.75rem;
	color: var(--muted);
}

.field-label-count {
	font-weight: 400;
	color: var(--muted);
	margin-left: 0.25rem;
}

/* ===== Load More ===== */
.load-more {
	display: flex;
	justify-content: center;
	padding: 1rem 0;
}

/* ===== Muted Text Variants ===== */
.muted {
	color: var(--muted);
}

.muted.small,
.small {
	font-size: 0.85em;
}

/* ===== Search Input Wrapper ===== */
.search-input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input-wrapper:focus-within {
	border-color: var(--accent-base);
	box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--accent-base) 25%, transparent);
}

.search-input-wrapper .search-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 0.65em 0;
}

.search-input-wrapper .search-input:focus {
	outline: none;
	box-shadow: none;
}

/* ===== Search Spinner ===== */
.search-spinner {
	width: 1.125rem;
	height: 1.125rem;
	border: 0.125rem solid var(--border);
	border-top-color: var(--accent-base);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.search-spinner.large {
	width: 2rem;
	height: 2rem;
	border-width: 0.1875rem;
}

/* ===== Search Box with Icon ===== */
.search-box {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.625rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
}

.search-box input {
	border: none;
	background: transparent;
	padding: 0.5em 0;
	min-width: 11.25rem;
}

.search-box input:focus {
	outline: none;
	box-shadow: none;
}

.search-box svg {
	color: var(--muted);
	flex-shrink: 0;
}

/* ===== Mesai Page ===== */
.mesai-page {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Date Selector */
.date-selector {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
}

.date-display {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.date-input {
	font-size: 1rem;
	font-weight: 600;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: center;
	color: var(--pop);
}

.date-input::-webkit-calendar-picker-indicator {
	cursor: pointer;
}

.date-label {
	font-size: 0.8125rem;
	color: var(--muted);
}

/* Mesai Tabs */
.mesai-tabs {
	display: flex;
	gap: 0.5rem;
	padding: 0.25rem;
	background: var(--surface);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
}

.mesai-tab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	border: none;
	background: transparent;
	border-radius: calc(var(--radius) - 0.125rem);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.mesai-tab:hover {
	color: var(--pop);
	background: var(--hover);
}

.mesai-tab.active {
	color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
}

/* Mesai Timeline */
.mesai-timeline-card {
	padding: 1rem;
	overflow-x: auto;
}

.mesai-timeline {
	min-width: 37.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mesai-timeline-markers {
	position: relative;
	height: 1.5rem;
	margin-left: 9.375rem;
}

.mesai-timeline-marker {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(-50%);
}

.mesai-timeline-marker .marker-line {
	width: 0.0625rem;
	height: 0.5rem;
	background: var(--border);
}

.mesai-timeline-marker .marker-label {
	font-size: 0.625rem;
	color: var(--muted);
	white-space: nowrap;
}

.mesai-timeline-rows {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mesai-timeline-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.5rem;
}

.mesai-timeline-member {
	width: 8.75rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow: hidden;
}

.mesai-timeline-member .member-name {
	font-size: 0.8125rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mesai-timeline-bars {
	flex: 1;
	position: relative;
	height: 2rem;
	background: var(--surface);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
}

.mesai-bar {
	position: absolute;
	top: 0.25rem;
	height: 1.5rem;
	border-radius: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.5rem;
	font-size: 0.625rem;
	font-weight: 500;
	color: white;
	overflow: hidden;
	cursor: default;
}

.mesai-bar.completed {
	background: linear-gradient(135deg, var(--green-base), color-mix(in srgb, var(--green-base) 80%, var(--green-pop)));
}

.mesai-bar.ongoing {
	background: linear-gradient(135deg, var(--blue-base), color-mix(in srgb, var(--blue-base) 80%, var(--blue-pop)));
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}
}

.mesai-bar .bar-start,
.mesai-bar .bar-end {
	flex-shrink: 0;
}

.mesai-bar .bar-ongoing {
	font-size: 0.5625rem;
	opacity: 0.9;
}

/* Mesai Logs */
.mesai-logs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mesai-log-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
}

.mesai-log-icon {
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.mesai-log-icon.start {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-base);
}

.mesai-log-icon.end {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

.mesai-log-time {
	font-size: 0.875rem;
	font-weight: 600;
	width: 3.125rem;
	flex-shrink: 0;
}

.mesai-log-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mesai-log-member {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
}

.mesai-log-detail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
}

.mesai-log-type {
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
}

.mesai-log-type.start {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-base);
}

.mesai-log-type.end {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

.mesai-log-schedule {
	color: var(--muted);
}

.mesai-log-note {
	font-size: 0.75rem;
	color: var(--muted);
	font-style: italic;
}

/* ===== Schedule Timeline Updates ===== */
.timeline-date-selector {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.timeline-nav-btn {
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	cursor: pointer;
	color: var(--pop);
	transition: all var(--transition-fast);
}

.timeline-nav-btn:hover {
	border-color: var(--accent-base);
	background: var(--hover);
}

.timeline-date-input {
	font-size: 0.8125rem;
	font-weight: 500;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	color: var(--pop);
}

.timeline-today-btn {
	font-size: 0.6875rem;
	padding: 0.25rem 0.5rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	cursor: pointer;
	color: var(--muted);
	transition: all var(--transition-fast);
}

.timeline-today-btn:hover {
	border-color: var(--accent-base);
	color: var(--accent-base);
}

.timeline-tabs {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	margin-bottom: 0.75rem;
}

.timeline-tab {
	padding: 0.375rem 0.75rem;
	border: none;
	background: transparent;
	border-radius: var(--radius);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.timeline-tab:hover {
	color: var(--pop);
	background: var(--hover);
}

.timeline-tab.active {
	color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
}

.timeline-member-bar.ongoing {
	background: linear-gradient(135deg, var(--blue-base), color-mix(in srgb, var(--blue-base) 80%, var(--blue-pop)));
	animation: pulse 2s ease-in-out infinite;
}

.timeline-member-bar .bar-time {
	font-size: 0.5625rem;
	color: white;
	font-weight: 500;
	padding: 0 0.25rem;
}

/* Timeline Logs */
.timeline-logs {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.timeline-log-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem;
	background: var(--surface);
	border-radius: var(--radius);
	font-size: 0.75rem;
}

.timeline-log-icon {
	width: 1.25rem;
	height: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.timeline-log-icon.start {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-base);
}

.timeline-log-icon.end {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

.timeline-log-time {
	font-weight: 600;
	width: 2.5rem;
	flex-shrink: 0;
}

.timeline-log-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.timeline-log-member {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex: 1;
	min-width: 0;
}

.timeline-log-member:hover .timeline-log-name {
	color: var(--accent-base);
}

.timeline-log-type {
	font-size: 0.625rem;
	font-weight: 600;
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
}

.timeline-log-type.start {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-base);
}

.timeline-log-type.end {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

/* Dialog Tabs */
.dialog-tabs {
	display: flex;
	gap: 0.25rem;
	padding: 0 1.25rem;
	border-bottom: 0.0625rem solid var(--border);
}

.dialog-tab {
	padding: 0.75rem 1rem;
	border: none;
	background: transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--muted);
	position: relative;
	transition: color var(--transition-fast);
}

.dialog-tab:hover {
	color: var(--pop);
}

.dialog-tab.active {
	color: var(--accent-base);
}

.dialog-tab.active::after {
	content: "";
	position: absolute;
	bottom: -0.0625rem;
	left: 0;
	right: 0;
	height: 0.125rem;
	background: var(--accent-base);
	border-radius: 0.125rem 0.125rem 0 0;
}

/* Task Assignments Editor */
.dialog-body>.task-assignments-editor {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.task-assignment-fields {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.assignment-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2.5rem 1.25rem;
	color: var(--muted);
}

.assignment-loading .spinner {
	width: 1.5rem;
	height: 1.5rem;
	border: 0.1875rem solid var(--border);
	border-top-color: var(--accent-base);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.assignment-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.assignment-section-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--pop);
}

.assignment-section-header svg {
	color: var(--muted);
}

/* Self Assignment Toggle */
.self-assignment-toggle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.self-assignment-toggle:hover {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 5%, var(--surface));
}

.self-assignment-toggle input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--accent-base);
}

.self-assignment-toggle .member-name {
	flex: 1;
	font-weight: 500;
}

.self-assignment-toggle .check-icon {
	color: var(--green-base);
}

.self-assignment-toggle.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--surface-alt);
}

.self-assignment-toggle.disabled:hover {
	border-color: var(--border);
	background: var(--surface-alt);
}

.self-assignment-toggle .disabled-hint {
	font-size: 0.85em;
	color: var(--text-secondary);
	font-style: italic;
}

/* Unit Assignments List */
.unit-assignments-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.unit-assignment-card {
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	overflow: hidden;
}

.unit-card-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: color-mix(in srgb, var(--pop) 3%, var(--surface));
	border-bottom: 0.0625rem solid var(--border);
}

.unit-expand-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius);
	color: var(--muted);
	transition: all var(--transition-fast);
}

.unit-expand-btn:hover {
	background: var(--hover);
	color: var(--pop);
}

.unit-icon {
	color: var(--accent-base);
}

.unit-card-header .unit-name {
	flex: 1;
	font-weight: 600;
	font-size: 0.875rem;
}

/* Ignored badge for units without rules */
.unit-ignored-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--orange-base);
	background: color-mix(in srgb, var(--orange-base) 12%, transparent);
	border-radius: 0.75rem;
	white-space: nowrap;
}

.unit-assignment-card.ignored {
	border-color: color-mix(in srgb, var(--orange-base) 40%, var(--border));
}

.unit-assignment-card.ignored .unit-card-header {
	background: color-mix(in srgb, var(--orange-base) 5%, var(--surface));
}

/* Unit Card Tabs */
.unit-card-tabs {
	display: flex;
	border-bottom: 0.0625rem solid var(--border);
	background: var(--surface);
}

.unit-tab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 0.75rem;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--muted);
	transition: all var(--transition-fast);
	position: relative;
}

.unit-tab:hover {
	color: var(--pop);
	background: var(--hover);
}

.unit-tab.active {
	color: var(--accent-base);
}

.unit-tab.active::after {
	content: "";
	position: absolute;
	bottom: -0.0625rem;
	left: 0;
	right: 0;
	height: 0.125rem;
	background: var(--accent-base);
}

.unit-tab .tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
	color: var(--accent-base);
	border-radius: 0.5625rem;
}

.unit-tab.active .tab-count {
	background: var(--accent-base);
	color: white;
}

/* Empty rules message */
.unit-rules-empty {
	padding: 0.5rem;
	text-align: center;
	font-size: 0.8125rem;
}

/* Selected members summary in members tab */
.unit-member-avatars.selected-summary {
	padding: 0.5rem 0.75rem;
	background: color-mix(in srgb, var(--accent-base) 5%, transparent);
	border-bottom: 0.0625rem solid var(--border);
	margin: -0.75rem -0.75rem 0.75rem -0.75rem;
}

.unit-member-avatars.selected-summary .selected-count {
	margin-left: 0.5rem;
	font-size: 0.75rem;
	color: var(--accent-base);
	font-weight: 500;
}

.unit-remove-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius);
	color: var(--muted);
	transition: all var(--transition-fast);
}

.unit-remove-btn:hover {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	color: var(--red-base);
}

/* Unit Rules */
.unit-rules {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem;
	background: color-mix(in srgb, var(--accent-base) 3%, var(--base));
}

.rule-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rule-item.criteria-rule {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 0.5rem;
	padding: 0.625rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
}

.rule-item.criteria-rule.duplicate-warning {
	border-color: var(--warning);
	background: color-mix(in srgb, var(--warning) 5%, var(--surface));
}

.rule-item.criteria-rule .rule-row {
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.rule-item.criteria-rule .rule-remove-btn {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
}

.rule-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--muted);
	white-space: nowrap;
	min-width: 3.125rem;
}

.rule-select {
	flex: 1;
	min-width: 6.25rem;
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--pop);
}

.rule-select option:disabled {
	color: var(--muted);
	background: var(--base);
}

.rule-remove-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius);
	color: var(--muted);
	transition: all var(--transition-fast);
	flex-shrink: 0;
}

.rule-remove-btn:hover {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	color: var(--red-base);
}

/* Unit Member Avatars (collapsed view) */
.unit-member-avatars {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	gap: 0;
}

.unit-member-avatars .avatar {
	margin-left: -0.5rem;
	border: 0.125rem solid var(--surface);
	box-sizing: content-box;
}

.unit-member-avatars .avatar:first-child {
	margin-left: 0;
}

.avatar-overflow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: -0.5rem;
	border-radius: 50%;
	background: var(--muted);
	color: var(--surface);
	font-size: 0.625rem;
	font-weight: 600;
	border: 0.125rem solid var(--surface);
	box-sizing: content-box;
}

/* Unit Members Section */
.unit-members-section {
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* All members toggle */
.all-members-toggle {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--pop);
	transition: all var(--transition-fast);
}

.all-members-toggle:hover {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 5%, transparent);
}

.all-members-toggle.active {
	border-color: var(--green-base);
	background: color-mix(in srgb, var(--green-base) 10%, transparent);
}

.all-members-toggle input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--green-base);
}

.all-members-toggle span:first-of-type {
	flex: 1;
}

.all-members-badge {
	padding: 0.125rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--green-base);
	background: color-mix(in srgb, var(--green-base) 15%, transparent);
	border-radius: 0.75rem;
}

/* All members info message */
.all-members-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.625rem;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	color: var(--green-base);
	background: color-mix(in srgb, var(--green-base) 8%, transparent);
	border-radius: var(--radius);
}

/* Disabled state for member list */
.unit-members-list.disabled {
	opacity: 0.7;
}

.unit-members-list.disabled .unit-member-item {
	cursor: default;
}

.unit-members-list.disabled .unit-member-item:hover {
	background: transparent;
}

/* Included state (when all members is active) */
.unit-member-item.included {
	background: color-mix(in srgb, var(--green-base) 8%, transparent);
}

.unit-member-item.included input[type="checkbox"] {
	accent-color: var(--green-base);
}

.members-loading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	color: var(--muted);
	font-size: 0.8125rem;
}

.spinner-small {
	width: 0.875rem;
	height: 0.875rem;
	border: 0.125rem solid var(--border);
	border-top-color: var(--accent-base);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

.members-empty-msg {
	padding: 0.75rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.8125rem;
	font-style: italic;
}

.unit-members-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-height: 12.5rem;
	overflow-y: auto;
}

.unit-member-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.unit-member-item:hover {
	background: var(--hover);
}

.unit-member-item.selected {
	background: color-mix(in srgb, var(--accent-base) 10%, transparent);
}

.unit-member-item input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--accent-base);
}

.unit-member-item .member-name {
	flex: 1;
	font-size: 0.8125rem;
}

.add-rule-btn {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	border: 0.0625rem dashed var(--border);
	background: transparent;
	border-radius: var(--radius);
	cursor: pointer;
	font-size: 0.75rem;
	color: var(--muted);
	transition: all var(--transition-fast);
}

.add-rule-btn:hover {
	border-color: var(--accent-base);
	color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 5%, transparent);
}

/* Assignments Empty State */
.assignments-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2rem 1.25rem;
	color: var(--muted);
	text-align: center;
}

.assignments-empty svg {
	opacity: 0.5;
}

.assignments-empty .hint {
	font-size: 0.75rem;
	opacity: 0.7;
}

/* Add Unit Button */
.add-unit-btn {
	width: 100%;
	justify-content: center;
	border-style: dashed;
}

.add-unit-btn:hover {
	border-color: var(--accent-base);
	color: var(--accent-base);
}

/* Assigned Members Summary */
.assigned-members-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.assigned-member-chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.625rem;
	background: color-mix(in srgb, var(--accent-base) 10%, var(--surface));
	border: 0.0625rem solid color-mix(in srgb, var(--accent-base) 30%, var(--border));
	border-radius: 6.25rem;
	font-size: 0.8125rem;
}

.chip-remove-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 50%;
	color: var(--muted);
	transition: all var(--transition-fast);
}

.chip-remove-btn:hover {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

/* Legacy styles kept for compatibility */
.members-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-height: 15.625rem;
	overflow-y: auto;
}

.member-search-input {
	width: 100%;
	padding: 0.5rem 0.625rem;
	font-size: 0.8125rem;
	margin-bottom: 0.5rem;
}

.members-empty {
	color: var(--muted);
	font-size: 0.8125rem;
	padding: 0.5rem;
}

.member-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.member-item:hover {
	background: var(--hover);
}

.member-item input {
	margin: 0;
}

.member-name {
	flex: 1;
	font-size: 0.8125rem;
}

.assignments-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.5rem;
	color: var(--muted);
}

.unit-selector {
	border: 0.0625rem solid var(--border);
	border-radius: var(--box-radius);
	overflow: hidden;
}

.unit-selector-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
	background: var(--surface);
	border-bottom: 0.0625rem solid var(--border);
	font-weight: 500;
}

.unit-selector-search {
	padding: 0.5rem 0.75rem;
	border-bottom: 0.0625rem solid var(--border);
}

.unit-selector-search input {
	width: 100%;
	padding: 0.5rem 0.625rem;
	font-size: 0.8125rem;
}

.unit-selector-list {
	max-height: 12.5rem;
	overflow-y: auto;
}

.unit-selector-empty {
	padding: 1rem;
	text-align: center;
	color: var(--muted);
}

.unit-selector-item {
	display: block;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: none;
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.unit-selector-item:hover {
	background: var(--hover);
}

.add-unit-btn {
	width: 100%;
	justify-content: center;
}

/* Unit Tree Selector */
.unit-tree-selector .unit-selector-list {
	padding: 0.5rem 0;
}

.unit-tree-selector-list {
	max-height: 25rem;
	overflow-y: auto;
}

.unit-tree-selector-branch {
	display: flex;
	flex-direction: column;
}

.unit-tree-selector-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	padding-left: calc(0.75rem + var(--depth, 0) * 1.25rem);
	transition: background var(--transition-fast);
}

.unit-tree-selector-item:hover:not(.disabled) {
	background: var(--hover);
}

.unit-tree-selector-item.nested {
	background: color-mix(in srgb, var(--surface) 95%, var(--pop) 5%);
}

.unit-tree-selector-item.nested:hover:not(.disabled) {
	background: var(--hover);
}

.unit-tree-selector-item.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.unit-tree-expand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius);
	flex-shrink: 0;
	color: var(--muted);
}

.unit-tree-expand:hover {
	background: var(--hover);
	color: var(--pop);
}

.unit-tree-expand-placeholder {
	width: 1.125rem;
	flex-shrink: 0;
}

.unit-tree-selector-name {
	flex: 1;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	padding: 0.125rem 0.25rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	color: var(--pop);
	transition: all var(--transition-fast);
}

.unit-tree-selector-name:hover:not(:disabled) {
	background: var(--accent-base-alpha, rgba(59, 130, 246, 0.1));
}

.unit-tree-selector-name:disabled {
	cursor: not-allowed;
	color: var(--muted);
}

.unit-tree-selector-name.highlighted {
	font-weight: 600;
}

.unit-tree-selector-name.selected {
	background: var(--accent-base-alpha, rgba(59, 130, 246, 0.15));
	color: var(--accent);
}

.unit-tree-selector-name.selected:hover:not(:disabled) {
	background: var(--accent-base-alpha, rgba(220, 38, 38, 0.15));
	color: var(--error);
}

.unit-tree-selector-type {
	font-size: 0.6875rem;
	color: var(--muted);
	padding: 0.0625rem 0.375rem;
	background: var(--surface);
	border-radius: var(--radius);
	white-space: nowrap;
}

.unit-tree-selector-children {
	display: flex;
	flex-direction: column;
}

.unit-tree-selector-search {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	padding-left: calc(0.75rem + var(--depth, 0) * 1rem);
}

.unit-tree-selector-search input {
	flex: 1;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--radius);
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	color: var(--pop);
}

.unit-tree-selector-search input:focus {
	outline: none;
	border-color: var(--accent);
}

.unit-tree-selector-search-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0.125rem;
	border-radius: var(--radius);
	color: var(--muted);
}

.unit-tree-selector-search-clear:hover {
	background: var(--hover);
	color: var(--pop);
}

.unit-tree-selector-no-results {
	padding: 0.5rem 0.75rem;
	padding-left: calc(0.75rem + var(--depth, 0) * 1rem + 1.5rem);
	font-size: 0.75rem;
	color: var(--muted);
}

/* Global search bar at top of tree selector */
.unit-tree-selector-global-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}

.unit-tree-selector-global-search input {
	flex: 1;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--radius);
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	color: var(--pop);
}

.unit-tree-selector-global-search input:focus {
	outline: none;
	border-color: var(--accent);
}

/* Unit Type Filter Dropdown */
.unit-type-filter {
	position: relative;
	flex-shrink: 0;
}

.unit-type-filter-btn {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.375rem;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--radius);
	cursor: pointer;
	color: var(--muted);
	transition: all var(--transition-fast);
}

.unit-type-filter-btn:hover {
	border-color: var(--accent);
	color: var(--pop);
}

.unit-type-filter-btn.active {
	border-color: var(--accent);
	background: var(--accent-base-alpha, rgba(59, 130, 246, 0.1));
	color: var(--accent);
}

.unit-type-filter-count {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.25rem;
	font-size: 0.625rem;
	font-weight: 600;
	background: var(--accent);
	color: white;
	border-radius: 999px;
}

.unit-type-filter-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.25rem;
	min-width: 10rem;
	max-width: 14rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--box-radius);
	box-shadow: var(--shadow-md);
	z-index: 100;
	overflow: hidden;
}

.unit-type-filter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.625rem;
	border-bottom: 1px solid var(--border);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pop);
}

.unit-type-filter-clear {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 0.6875rem;
	color: var(--accent);
	padding: 0;
}

.unit-type-filter-clear:hover {
	text-decoration: underline;
}

.unit-type-filter-list {
	max-height: 12rem;
	overflow-y: auto;
	padding: 0.375rem 0;
}

.unit-type-filter-empty {
	padding: 0.625rem;
	text-align: center;
	font-size: 0.75rem;
	color: var(--muted);
}

.unit-type-filter-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.unit-type-filter-item:hover {
	background: var(--hover);
}

.unit-type-filter-item input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

.unit-type-filter-item span {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Member Assignment - Search Based */
.members-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.members-section .member-search-container {
	position: relative;
}

.members-section .member-search-dropdown {
	position: sticky;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	z-index: 100;
	max-height: 15.625rem;
	overflow-y: auto;
	margin-top: 0.25rem;
}

.assigned-members {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.assigned-member-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.5rem;
	background: var(--hover);
	border-radius: var(--radius);
	font-size: 0.8125rem;
}

.assigned-member-item .member-name {
	flex: 0 1 auto;
}

.members-hint {
	color: var(--muted);
	font-size: 0.75rem;
	font-style: italic;
}

.member-search-empty {
	padding: 0.75rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.8125rem;
}

.search-spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 0.125rem solid var(--muted);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
	position: absolute;
	right: 0.625rem;
	top: 50%;
	translate: 0 -50%;
}

/* Task Detail Dialog - Bigger on desktop */
.task-detail-dialog {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: min(30rem, 100%);
	padding: 0.75rem;
}

/* Task Info Card Wrapper - Contains info card and delete button */
.task-info-card-wrapper {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.task-info-card-wrapper .task-info-card {
	flex: 1;
}

/* Task action buttons - container for duplicate and delete */
.task-action-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.task-duplicate-btn,
.task-delete-btn {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
}

/* Task Info Card - Clickable card showing task details */
.task-info-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.task-info-card:hover {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 5%, var(--surface));
}

.task-info-card:focus-visible {
	outline: 0.125rem solid var(--accent-base);
	outline-offset: 0.125rem;
}

.task-info-card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.task-info-card-label {
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.0312rem;
	color: var(--muted);
}

.task-info-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875em;
	color: var(--pop);
}

.task-info-row svg {
	color: var(--muted);
	flex-shrink: 0;
}

.task-info-card-edit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent-base) 10%, transparent);
	color: var(--accent-base);
	flex-shrink: 0;
}

.task-status-badge {
	padding: 0.375rem 0.625rem;
	border-radius: var(--radius);
	font-weight: 500;
	font-size: 0.85em;
	text-align: center;
}

.task-status-badge.status-done-early {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-base);
}

.task-status-badge.status-done-late {
	background: color-mix(in srgb, var(--yellow-base) 20%, transparent);
	color: var(--yellow-pop);
}

.task-status-badge.status-blocked {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

.task-status-badge.status-blocked-late {
	background: color-mix(in srgb, var(--red-base) 25%, transparent);
	color: var(--red-base);
}

.task-status-badge.status-late {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	color: var(--red-base);
}

.task-status-badge.status-continuing {
	background: color-mix(in srgb, var(--blue-base) 20%, transparent);
	color: var(--blue-base);
}

.task-status-badge.status-continuing-late {
	background: color-mix(in srgb, var(--orange-base) 20%, transparent);
	color: var(--orange-pop);
}

/* Task Creator Row */
.task-creator-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85em;
	color: var(--muted);
}

.task-creator-label {
	flex-shrink: 0;
}

.task-creator-info {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--pop);
}

/* Task Occurrence Section */
.task-occurrence-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem;
	background: var(--layer-1);
	border-radius: 0.5rem;
	border: 0.0625rem solid var(--border);
}

.task-occurrence-label {
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.0312rem;
	color: var(--muted);
}

.task-occurrence-details {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.task-occurrence-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9em;
	color: var(--pop);
}

.task-occurrence-row svg {
	color: var(--muted);
	flex-shrink: 0;
}

/* Event Tabs */
.event-tabs {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	overflow: auto;
	gap: 0.25rem;
	padding: 0;
	margin: 0;
}

.event-tab {
	padding: 0.3125rem 0.625rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base-pop);
	cursor: pointer;
	font-weight: 500;
	font-size: 0.75em;
	color: var(--muted);
	transition: all var(--transition-fast);
	text-align: center;
	white-space: nowrap;
}

.event-tab:hover {
	color: var(--pop);
	border-color: color-mix(in srgb, var(--pop), var(--base) 70%);
}

.event-tab.active {
	color: var(--accent-pop);
	background: var(--accent-base);
	border-color: var(--accent-base);
}

.event-tab-content {
	min-height: 6.875rem;
}

.event-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.event-description {
	color: var(--muted);
	font-size: 0.8em;
	line-height: 1.3;
	margin: 0;
}

.full-width {
	width: 100%;
}

/* Event History */
.event-history {
	margin-top: 0.25rem;
	border-top: 0.0625rem solid var(--border);
	padding-top: 0.75rem;
}

.event-history-title {
	font-weight: 600;
	font-size: 0.9em;
	margin-bottom: 0.5rem;
}

.event-history-empty {
	text-align: center;
	color: var(--muted);
	padding: 1rem;
	font-size: 0.85em;
}

.event-history-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.event-history-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.625rem;
	background: var(--surface);
	border-radius: var(--radius);
	border: 0.0625rem solid var(--border);
	flex-wrap: wrap;
}

.event-history-image {
	width: 100%;
	border-radius: calc(var(--radius) - 0.125rem);
	overflow: hidden;
	margin-bottom: 0.25rem;
}

.event-history-image img {
	width: 100%;
	height: 13.75rem;
	object-fit: contain;
	display: block;
	background-color: #000;
}

.event-history-icon {
	width: 1.25rem;
	height: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.event-history-icon.continuing {
	background: color-mix(in srgb, var(--blue-base) 20%, transparent);
	color: var(--blue-base);
}

.event-history-icon.blocked {
	background: color-mix(in srgb, var(--red-base) 20%, transparent);
	color: var(--red-base);
}

.event-history-icon.done {
	background: color-mix(in srgb, var(--green-base) 20%, transparent);
	color: var(--green-base);
}

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

.event-history-type {
	font-weight: 500;
}

.event-history-detail {
	font-size: 0.9em;
	color: var(--muted);
	margin-top: 0.25rem;
}

.event-history-time {
	font-size: 0.8em;
	color: var(--muted);
	flex-shrink: 0;
}

/* My Status Section */
.my-status-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.75rem;
	background: color-mix(in srgb, var(--accent-base) 5%, var(--surface));
	border: 0.0625rem solid var(--accent-base);
	border-radius: var(--radius);
}

.my-status-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.my-status-label {
	font-weight: 600;
	font-size: 0.9em;
}

.my-status-badge {
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius);
	font-weight: 500;
	font-size: 0.8em;
}

.my-status-badge.status-none {
	background: color-mix(in srgb, var(--muted) 15%, transparent);
	color: var(--muted);
}

/* Member Status Section */
.member-status-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
	border-top: 0.0625rem solid var(--border);
	padding-top: 0.75rem;
}

.member-status-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.member-status-title {
	font-weight: 600;
	font-size: 0.9em;
}

.member-status-count {
	font-size: 0.8em;
	color: var(--muted);
	padding: 0.25rem 0.5rem;
	background: var(--layer-1);
	border-radius: var(--radius);
}

/* Member Search */
.member-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
}

.member-search svg {
	color: var(--muted);
	flex-shrink: 0;
}

.member-search input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: 0.875em;
	color: var(--pop);
}

.member-search input::placeholder {
	color: var(--muted);
}

/* Member Event List */
.member-event-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.member-event-empty {
	text-align: center;
	color: var(--muted);
	padding: 1rem;
	font-size: 0.85em;
}

.member-event-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem;
	color: var(--muted);
	font-size: 0.85em;
}

.member-event-loading svg {
	animation: spin 1s linear infinite;
}

/* Member Event Card */
.member-event-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.member-event-card.current-user {
	border-color: var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 5%, var(--surface));
}

.member-event-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.625rem;
	gap: 0.5rem;
	cursor: pointer;
}

.member-event-header[role="button"]:hover {
	background: var(--layer-1);
}

.member-event-info {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	flex: 1;
}

.member-event-name-wrapper {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.member-event-name {
	font-weight: 500;
	font-size: 0.875em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.current-user-badge {
	font-size: 0.75em;
	color: var(--accent-base);
	margin-left: 0.375rem;
	font-weight: 400;
}

.member-event-time {
	font-size: 0.75em;
	color: var(--muted);
}

.member-event-status-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.member-event-status {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius);
	font-size: 0.75em;
	font-weight: 500;
}

.member-event-status.status-continuing {
	background: color-mix(in srgb, var(--blue-base) 15%, transparent);
	color: var(--blue-base);
}

.member-event-status.status-blocked {
	background: color-mix(in srgb, var(--red-base) 15%, transparent);
	color: var(--red-base);
}

.member-event-status.status-done {
	background: color-mix(in srgb, var(--green-base) 15%, transparent);
	color: var(--green-base);
}

.member-event-status.status-none {
	background: color-mix(in srgb, var(--muted) 10%, transparent);
	color: var(--muted);
}

.member-event-expand-btn {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	border: none;
	background: var(--layer-1);
	border-radius: var(--radius);
	font-size: 0.7em;
	color: var(--muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.member-event-expand-btn:hover {
	background: var(--border);
	color: var(--pop);
}

/* Member Event History (expandable) */
.member-event-history {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0.5rem 0.625rem;
	background: var(--layer-1);
	border-top: 0.0625rem solid var(--border);
}

.member-event-history .event-history-item {
	padding: 0.5rem;
	font-size: 0.9em;
}

@media (min-width: 48rem) {
	.task-detail-dialog {
		min-width: 30rem;
	}
}

/* Post-Creation Dialog (Schedule Assignment) */
.post-creation-member {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem;
	background: var(--surface);
	border-radius: var(--radius);
	margin-bottom: 1rem;
}

.post-creation-member-info h4 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.post-creation-member-info p {
	margin: 0.25rem 0 0;
	font-size: 0.9em;
}

.schedule-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.schedule-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.schedule-item:hover {
	border-color: var(--accent-base);
}

.schedule-item input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.schedule-item-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.schedule-item-name {
	font-weight: 500;
}

.schedule-item-desc {
	font-size: 0.85em;
}

/* ===== Unit Type Selector ===== */
.unit-type-selector {
	position: relative;
}

.unit-type-selector-trigger {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--pop);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.unit-type-selector-trigger:hover {
	border-color: color-mix(in srgb, var(--pop), var(--base) 70%);
}

.unit-type-selector-trigger:focus {
	outline: none;
	border-color: var(--accent-base);
}

.unit-type-selector-value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.unit-type-dropdown {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	right: 0;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	z-index: 200;
	overflow: hidden;
}

.unit-type-list {
	max-height: 15rem;
	overflow-y: auto;
}

.unit-type-empty {
	padding: 1rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.9em;
}

.unit-type-item {
	display: flex;
	align-items: stretch;
	border-bottom: 0.0625rem solid var(--border);
}

.unit-type-item:last-child {
	border-bottom: none;
}

.unit-type-item.selected .unit-type-item-content {
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
}

.unit-type-item.editing {
	padding: 0;
}

.unit-type-item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.625rem 0.75rem;
	border: none;
	background: transparent;
	color: var(--pop);
	text-align: left;
	cursor: pointer;
	transition: background var(--transition-fast);
	font: inherit;
}

.unit-type-item-content:hover {
	background: var(--hover);
}

.unit-type-item.selected .unit-type-item-content:hover {
	background: color-mix(in srgb, var(--accent-base) 20%, transparent);
}

.unit-type-item-name {
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.unit-type-badge.structural {
	font-size: 0.7em;
	font-weight: 600;
	padding: 0.1em 0.45em;
	border-radius: 4px;
	background: color-mix(in srgb, var(--muted) 20%, transparent);
	color: var(--muted);
	white-space: nowrap;
}

.unit-type-item-description {
	font-size: 0.85em;
	color: var(--muted);
}

.unit-type-item-edit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	border: none;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.unit-type-item-edit:hover {
	background: var(--hover);
	color: var(--pop);
}

.unit-type-edit-form,
.unit-type-create-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem;
	width: 100%;
}

.unit-type-edit-input {
	padding: 0.5rem 0.625rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--base);
	color: var(--pop);
	font: inherit;
	font-size: 0.9em;
}

.unit-type-edit-input:focus {
	outline: none;
	border-color: var(--accent-base);
}

.unit-type-edit-input::placeholder {
	color: var(--muted);
}

.unit-type-edit-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.unit-type-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85em;
	color: var(--text);
	cursor: pointer;
	user-select: none;
}

.unit-type-checkbox-label input[type="checkbox"] {
	accent-color: var(--accent-base);
	width: 1rem;
	height: 1rem;
	cursor: pointer;
}

.unit-type-create-section {
	border-top: 0.125rem solid var(--accent-base);
	background: color-mix(in srgb, var(--accent-base) 8%, transparent);
}

.unit-type-create-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem;
	border: none;
	background: transparent;
	color: var(--accent-base);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.unit-type-create-btn:hover {
	background: color-mix(in srgb, var(--accent-base) 15%, transparent);
}

/* Small button variant for inline actions */
.btn-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.375rem 0.625rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--pop);
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-small:hover:not(:disabled) {
	background: var(--hover);
}

.btn-small:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-small.primary {
	background: var(--accent-base);
	color: var(--accent-pop);
	border-color: var(--accent-base);
}

.btn-small.primary:hover:not(:disabled) {
	background: color-mix(in srgb, var(--accent-base), white 10%);
}

.btn-small.danger {
	background: var(--red-base);
	color: var(--red-pop);
	border-color: var(--red-base);
}

.btn-small.danger:hover:not(:disabled) {
	background: color-mix(in srgb, var(--red-base), white 10%);
}

/* ========================================
   Single Select Component
   ======================================== */

.single-select {
	position: relative;
}

.single-select.disabled {
	opacity: 0.6;
	pointer-events: none;
}

.single-select-control {
	display: flex;
	align-items: center;
	min-height: 2.375rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	cursor: pointer;
	padding: 0 0.5rem;
}

.single-select-control:focus-within {
	border-color: var(--accent-base);
	outline: 0.125rem solid color-mix(in srgb, var(--accent-base), transparent 80%);
}

.single-select-value {
	flex: 1;
	padding: 0.5rem 0;
	color: var(--pop);
}

.single-select-value.placeholder {
	color: var(--muted);
}

.single-select-input {
	flex: 1;
	min-width: 3.75rem;
	border: none;
	outline: none;
	background: transparent;
	font-size: inherit;
	padding: 0.5rem 0;
	color: var(--pop);
}

.single-select-input::placeholder {
	color: var(--muted);
}

.single-select-clear {
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	font-size: 1.2em;
	line-height: 1;
}

.single-select-clear:hover {
	color: var(--pop);
}

.single-select-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.25rem;
	max-height: 12.5rem;
	overflow-y: auto;
	background: var(--base);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	z-index: 1000;
}

.single-select-option {
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--pop);
}

.single-select-option:hover {
	background: var(--hover);
}

.single-select-option.selected {
	background: color-mix(in srgb, var(--accent-base), transparent 85%);
}

.single-select-option.create {
	color: var(--accent-base);
	font-style: italic;
}

.single-select-add {
	font-weight: bold;
}

.single-select-empty {
	padding: 0.75rem;
	text-align: center;
	color: var(--muted);
	font-style: italic;
}

/* ========================================
   Multi Select Component
   ======================================== */

.multi-select {
	position: relative;
}

.multi-select.disabled {
	opacity: 0.6;
	pointer-events: none;
}

.multi-select-control {
	min-height: 2.375rem;
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	cursor: text;
	padding: 0.25rem 0.5rem;
}

.multi-select-control:focus-within {
	border-color: var(--accent-base);
	outline: 0.125rem solid color-mix(in srgb, var(--accent-base), transparent 80%);
}

.multi-select-values {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
}

.multi-select-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	background: var(--accent-base);
	color: var(--accent-pop);
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	font-size: 0.85em;
}

.multi-select-tag-remove {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0 0.125rem;
	font-size: 1.1em;
	line-height: 1;
	opacity: 0.7;
}

.multi-select-tag-remove:hover {
	opacity: 1;
}

.multi-select-input {
	flex: 1;
	min-width: 3.75rem;
	border: none;
	outline: none;
	background: transparent;
	font-size: inherit;
	padding: 0.25rem 0;
	color: var(--pop);
}

.multi-select-input::placeholder {
	color: var(--muted);
}

.multi-select-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.25rem;
	max-height: 12.5rem;
	overflow-y: auto;
	background: var(--base);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	z-index: 1000;
}

.multi-select-option {
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--pop);
}

.multi-select-option:hover {
	background: var(--hover);
}

.multi-select-option.selected {
	background: color-mix(in srgb, var(--accent-base), transparent 85%);
}

.multi-select-option.create {
	color: var(--accent-base);
	font-style: italic;
}

.multi-select-checkbox {
	font-size: 0.9em;
	opacity: 0.7;
}

.multi-select-add {
	font-weight: bold;
}

.multi-select-empty {
	padding: 0.75rem;
	text-align: center;
	color: var(--muted);
	font-style: italic;
}

/* ===== Day Offs Page ===== */
.dayoffs-page .page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.dayoffs-page .page-header-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dayoffs-page .page-header-title h1 {
	margin: 0;
	font-size: 1.5em;
	font-weight: 600;
}

.dayoffs-page .filter-bar {
	margin-bottom: 1rem;
}

.dayoffs-page .filter-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.dayoffs-page .search-box {
	flex: 1;
	min-width: 12.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
}

.dayoffs-page .search-box input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-size: inherit;
	color: var(--pop);
}

.dayoffs-page .search-box input::placeholder {
	color: var(--muted);
}

.dayoffs-page .search-box .clear-search {
	padding: 0.125rem;
	background: transparent;
	border: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity var(--transition-fast);
}

.dayoffs-page .search-box .clear-search:hover {
	opacity: 1;
}

.dayoffs-page .filter-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dayoffs-page .filter-select {
	min-width: 7.5rem;
}

.dayoffs-page .empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 3rem 1.5rem;
	color: var(--muted);
}

.dayoffs-page .empty-state h3 {
	margin: 0;
	font-weight: 500;
}

/* Day Off List */
.dayoff-list {
	display: grid;
	gap: 0.5rem;
}

.dayoff-header {
	display: grid;
	grid-template-columns: 2fr 1.5fr 1.5fr 0.8fr 0.8fr 0.5fr;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--surface);
	border-radius: var(--radius);
	font-size: 0.85em;
	font-weight: 500;
	color: var(--muted);
}

.dayoff-header .sort-btn {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background: transparent;
	border: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	padding: 0;
	transition: color var(--transition-fast);
}

.dayoff-header .sort-btn:hover,
.dayoff-header .sort-btn.active {
	color: var(--pop);
}

.dayoff-card {
	display: grid;
	grid-template-columns: 2fr 1.5fr 1.5fr 0.8fr 0.8fr 0.5fr;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--base);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-fast);
	align-items: center;
}

.dayoff-card:hover {
	background: var(--hover);
	border-color: var(--accent-base);
}

.dayoff-member {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dayoff-member .member-info {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.dayoff-member .member-name {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dayoff-member .member-phone {
	font-size: 0.85em;
}

.dayoff-type .type-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	background: color-mix(in srgb, var(--type-color, var(--accent-base)), transparent 85%);
	color: var(--type-color, var(--accent-base));
	border-radius: var(--radius);
	font-size: 0.85em;
	font-weight: 500;
}

.dayoff-dates .date-range {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.9em;
}

.dayoff-duration {
	font-size: 0.9em;
	color: var(--muted);
}

.dayoff-duration strong {
	color: var(--pop);
}

.dayoff-status {
	display: flex;
	align-items: center;
}

.dayoff-actions {
	display: flex;
	justify-content: flex-end;
}

.dayoff-actions .btn-icon {
	padding: 0.375rem;
	background: transparent;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	opacity: 0.5;
	transition: all var(--transition-fast);
}

.dayoff-actions .btn-icon:hover {
	opacity: 1;
	background: var(--hover);
}

/* Day Off Form Dialog */
.day-off-type-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}

.day-off-type-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	font: inherit;
	font-size: 0.85em;
	color: var(--pop);
	transition: all var(--transition-fast);
	text-align: left;
}

.day-off-type-btn:hover {
	background: var(--hover);
	border-color: var(--accent-base);
}

.day-off-type-btn.selected {
	background: color-mix(in srgb, var(--accent-base), transparent 85%);
	border-color: var(--accent-base);
	color: var(--accent-base);
}

.day-off-type-btn span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Field row for side-by-side fields */
.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

/* Day off duration display */
.day-off-duration-display {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
	color: var(--muted);
	font-size: 0.9em;
}

.day-off-duration-display strong {
	color: var(--accent-base);
	font-size: 1.2em;
}

/* Selected member display */
.selected-member-display {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	background: var(--surface);
	border: 0.0625rem solid var(--border);
	border-radius: var(--radius);
}

.selected-member-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.selected-member-name {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.selected-member-phone {
	font-size: 0.85em;
}

/* Member search empty state */
.member-search-empty {
	padding: 1rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.9em;
}

/* Responsive Day Off List */
@media (max-width: 56.25rem) {
	.dayoff-header {
		display: none;
	}

	.dayoff-card {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.dayoff-member {
		width: 100%;
	}

	.dayoff-card>div:not(.dayoff-member):not(.dayoff-actions) {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.dayoff-card>div:not(.dayoff-member):not(.dayoff-actions)::before {
		font-size: 0.8em;
		color: var(--muted);
		min-width: 3.75rem;
	}

	.dayoff-type::before {
		content: "Tür:";
	}

	.dayoff-dates::before {
		content: "Tarih:";
	}

	.dayoff-duration::before {
		content: "Süre:";
	}

	.dayoff-status::before {
		content: "Durum:";
	}

	.dayoff-actions {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
	}

	.dayoff-card {
		position: relative;
		padding-right: 3rem;
	}
}

@media (max-width: 37.5rem) {
	.dayoffs-page .filter-row {
		flex-direction: column;
		align-items: stretch;
	}

	.dayoffs-page .search-box {
		min-width: unset;
	}

	.dayoffs-page .filter-group {
		flex-direction: column;
		align-items: stretch;
	}

	.dayoffs-page .filter-select {
		width: 100%;
	}

	.day-off-type-grid {
		grid-template-columns: 1fr;
	}

	.field-row {
		grid-template-columns: 1fr;
	}
}

/* ============================
   Login Screen
   ============================ */

.login-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 2rem;
	background: var(--base);
	background-image:
		radial-gradient(ellipse at top,
			color-mix(in srgb, var(--accent-base), transparent 90%) 0%,
			transparent 60%);
}

.login-screen-card {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.login-screen-logo {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.login-screen-error {
	background: color-mix(in srgb, var(--color-danger), transparent 88%);
	color: var(--color-danger-light);
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	text-align: center;
	width: 100%;
}

.login-screen-iframe {
	width: 100%;
	height: 340px;
	border: none;
	border-radius: var(--radius-lg);
	background: transparent;
}

.login-screen-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}