/* ============================================
   Koekoek Urenregistratie — Design System & Styles
   ============================================ */

/* ----- Design Tokens ----- */
:root {
	--color-bg: #ffffff;
	--color-surface: #f9fafb;
	--color-surface-alt: #f3f4f6;
	--color-border: #e5e7eb;
	--color-border-strong: #d1d5db;

	--color-text: #111827;
	--color-text-secondary: #4b5563;
	--color-text-muted: #6b7280;
	--color-text-placeholder: #9ca3af;
	--color-text-inverse: #ffffff;

	--color-accent: #2563eb;
	--color-accent-hover: #1d4ed8;
	--color-accent-light: #dbeafe;
	--color-accent-subtle: #eff6ff;

	--color-success: #059669;
	--color-success-light: #d1fae5;
	--color-warning: #d97706;
	--color-warning-light: #fef3c7;
	--color-danger: #dc2626;
	--color-danger-light: #fee2e2;

	--color-weekend-bg: #f3f4f6;
	--color-holiday-bg: #fef9c3;
	--color-holiday-text: #92400e;
	--color-today-border: #2563eb;
	--color-cell-hover: #f0f7ff;
	--color-cell-filled: rgba(37, 99, 235, 0.04);
	--color-saved-flash: rgba(5, 150, 105, 0.12);

	--color-moneybird: #2e77d1;
	--color-moneybird-hover: #245fa8;

	--color-nav-bg: rgba(255, 255, 255, 0.85);

	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--leading-tight: 1.25;
	--leading-normal: 1.5;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;

	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-full: 9999px;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--transition-fast: 120ms var(--ease-out);
	--transition-normal: 200ms var(--ease-out);
	--transition-slow: 300ms var(--ease-out);

	--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
	--max-width: 56rem;
}

/* ----- Reset ----- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scrollbar-gutter: stable;
}

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

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background: var(--color-surface);
	-webkit-font-smoothing: antialiased;
}

/* ----- Main Layout ----- */
.main {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-4) var(--space-4) var(--space-8);
}

/* ----- Header ----- */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.header-left {
	display: flex;
	align-items: center;
}

.header-logo {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: inherit;
}

.header-logo img {
	border-radius: var(--radius-lg);
}

.header-title {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	letter-spacing: -0.01em;
}

/* ----- Buttons ----- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-tight);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background var(--transition-fast),
		border-color var(--transition-fast);
	min-height: 2.5rem;
	white-space: nowrap;
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.btn-primary {
	background: var(--color-accent);
	color: var(--color-text-inverse);
}
.btn-primary:hover {
	background: var(--color-accent-hover);
}
.btn-secondary {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-border);
}
.btn-secondary:hover {
	background: var(--color-surface);
	border-color: var(--color-border-strong);
}
.btn-ghost {
	background: transparent;
	color: var(--color-text-secondary);
	border: none;
}
.btn-ghost:hover {
	background: var(--color-surface-alt);
	color: var(--color-text);
}
.btn-icon {
	padding: var(--space-2);
	min-height: 2.5rem;
	min-width: 2.5rem;
}

/* ----- Toolbar ----- */
.toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: var(--space-4);
}

.toolbar-group {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2);
}

.toolbar-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.toolbar-section-grow {
	flex: 1;
	min-width: 10rem;
}

.toolbar-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.toolbar-input,
.toolbar-select {
	padding: var(--space-2) var(--space-3);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	min-height: 2.5rem;
	transition: border-color var(--transition-fast);
}

.toolbar-input:focus,
.toolbar-select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--focus-ring);
}

/* ----- Fuzzy Selector (klant, project) ----- */
.fuzzy-selector {
	position: relative;
}

.fuzzy-dropdown {
	position: absolute;
	top: calc(100% + var(--space-1));
	left: 0;
	right: 0;
	z-index: 50;
	max-height: 16rem;
	overflow-y: auto;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.fuzzy-dropdown-item {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.fuzzy-dropdown-item:hover,
.fuzzy-dropdown-item[data-highlighted] {
	background: var(--color-accent-subtle);
}

.fuzzy-dropdown-item[aria-selected="true"] {
	background: var(--color-accent-light);
	font-weight: var(--weight-medium);
}

.fuzzy-dropdown-item mark {
	background: transparent;
	color: var(--color-accent);
	font-weight: var(--weight-semibold);
}

.fuzzy-dropdown-empty {
	padding: var(--space-4) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-align: center;
}

/* ----- Rate Inline ----- */
.rate-inline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	min-height: 2.5rem;
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.rate-inline:hover {
	border-color: var(--color-border-strong);
}
.rate-inline:focus-within {
	border-color: var(--color-accent);
	box-shadow: var(--focus-ring);
}

.rate-inline-prefix,
.rate-inline-suffix {
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
	pointer-events: none;
	user-select: none;
}

.rate-inline-input {
	width: 4rem;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
	text-align: right;
	padding: 0;
	outline: none;
}

/* ----- Month Navigation ----- */
.month-nav {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.month-label {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	min-width: 10rem;
	text-align: center;
	text-transform: capitalize;
}

/* ----- Progress Section ----- */
.progress {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.progress-stats {
	display: flex;
	align-items: baseline;
	gap: var(--space-6);
	flex-wrap: wrap;
}

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

.progress-stat-value {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
}

.progress-stat-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.progress-bar-container {
	height: 0.375rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.progress-bar {
	width: 0;
	height: 100%;
	background: var(--color-accent);
	border-radius: var(--radius-full);
	transition: width var(--transition-slow);
}

.progress-actions {
	display: flex;
	gap: var(--space-2);
}

/* ----- Week Grid ----- */
.grid-container {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.week-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.week-grid thead {
	border-bottom: 2px solid var(--color-border);
}

.grid-header {
	padding: var(--space-2) var(--space-1);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	text-align: center;
	user-select: none;
}

.grid-header-week {
	width: 3.5rem;
	text-align: left;
	padding-left: var(--space-3);
}
.grid-header-total {
	width: 4.5rem;
	text-align: right;
	padding-right: var(--space-3);
}
.grid-header-weekend {
	color: var(--color-text-placeholder);
}

.grid-row {
	border-bottom: 1px solid var(--color-border);
}
.grid-row:last-child {
	border-bottom: none;
}

.grid-week-number {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	text-align: left;
	padding-left: var(--space-3);
}

.grid-week-total {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
	text-align: right;
	padding-right: var(--space-3);
}

/* Day cells */
.grid-cell {
	position: relative;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	height: 3.5rem;
	transition: background var(--transition-fast);
}

.grid-cell:hover {
	background: var(--color-cell-hover);
}
.grid-cell-empty {
	background: var(--color-surface);
	pointer-events: none;
}
.grid-cell-weekend {
	background: var(--color-weekend-bg);
}
.grid-cell-weekend:hover {
	background: #e9ebee;
}
.grid-cell-holiday {
	background: var(--color-holiday-bg);
}
.grid-cell-holiday:hover {
	background: #fef08a;
}
.grid-cell-today {
	box-shadow: inset 3px 0 0 var(--color-today-border);
}
.grid-cell-filled {
	background: var(--color-cell-filled);
}

.grid-cell.is-saved {
	animation: savedFlash 500ms var(--ease-out);
}

/* Day number */
.grid-cell-day {
	position: absolute;
	top: 0.125rem;
	left: 0.25rem;
	font-size: 0.5625rem;
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.grid-cell-weekend .grid-cell-day {
	color: var(--color-text-placeholder);
}
.grid-cell-today .grid-cell-day {
	color: var(--color-accent);
	font-weight: var(--weight-semibold);
}

/* Hours input */
.grid-cell-input {
	width: 100%;
	height: 100%;
	padding: 0.75rem var(--space-2) var(--space-1);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
	text-align: center;
	background: transparent;
	border: none;
	cursor: pointer;
	min-height: 2.75rem;
	min-width: 2.75rem;
}

.grid-cell-input::placeholder {
	color: var(--color-text-placeholder);
	font-family: var(--font-sans);
}

.grid-cell-input:focus {
	outline: none;
	background: var(--color-bg);
	box-shadow: inset 0 0 0 2px var(--color-accent);
	cursor: text;
	border-radius: var(--radius-sm);
}

.grid-cell-weekend .grid-cell-input {
	color: var(--color-text-muted);
}

/* Note indicator */
.grid-cell-note-indicator {
	position: absolute;
	bottom: var(--space-1);
	right: var(--space-1);
	width: 0.375rem;
	height: 0.375rem;
	background: var(--color-accent);
	border-radius: var(--radius-full);
	pointer-events: none;
}

/* Holiday label */
.grid-cell-holiday-name {
	position: absolute;
	bottom: 0.125rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.5625rem;
	color: var(--color-holiday-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - var(--space-2));
	pointer-events: none;
	line-height: 1;
}

/* Grid footer */
.week-grid tfoot {
	border-top: 2px solid var(--color-border);
}

.grid-footer-label {
	padding: var(--space-3) var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-align: left;
}

.grid-footer-total {
	padding: var(--space-3) var(--space-3);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--color-accent);
	text-align: right;
}

/* ----- Note Popover ----- */
.note-popover {
	position: absolute;
	z-index: 100;
	width: 16rem;
	padding: var(--space-3);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.note-popover:not([hidden]) {
	animation: fadeIn var(--transition-normal) forwards;
}

.note-input {
	width: 100%;
	padding: var(--space-2);
	font-family: inherit;
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.note-input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--focus-ring);
}

/* ----- Merge Dialog ----- */
.merge-dialog {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
	max-width: 28rem;
}

.merge-dialog::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

.merge-dialog h3 {
	margin-bottom: var(--space-2);
}
.merge-dialog p {
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
}

.dialog-actions {
	display: flex;
	gap: var(--space-2);
	justify-content: flex-end;
}

/* ----- Toast Notifications ----- */
.toast-container {
	position: fixed;
	bottom: var(--space-4);
	right: var(--space-4);
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-width: 20rem;
}

.toast {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	font-size: var(--text-sm);
	animation: fadeIn var(--transition-normal) forwards;
}

.toast-error {
	border-left: 3px solid var(--color-danger);
}
.toast-success {
	border-left: 3px solid var(--color-success);
}
.toast-info {
	border-left: 3px solid var(--color-accent);
}

.toast-close {
	background: none;
	border: none;
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	cursor: pointer;
	padding: 0 var(--space-1);
	line-height: 1;
}

.toast-close:hover {
	color: var(--color-text);
}

/* ----- Skip Link (WCAG 2.4.1) ----- */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-inverse);
	background: var(--color-accent);
	border-radius: var(--radius-md);
	text-decoration: none;
}

.skip-link:focus {
	top: var(--space-4);
	outline: none;
	box-shadow: var(--focus-ring);
}

/* ----- Login Page ----- */
.login-body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: linear-gradient(160deg, #eff6ff 0%, #f9fafb 40%, #ecfdf5 100%);
}

.login-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.login-card {
	width: 100%;
	max-width: 24rem;
	padding: var(--space-8) var(--space-6);
	background: var(--color-bg);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
	text-align: center;
}

.login-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.login-logo img {
	border-radius: var(--radius-xl);
}
.login-logo h1 {
	font-size: var(--text-2xl);
}

.login-subtitle {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/*
 * Login button: uses --color-accent (#2563eb) in light mode for guaranteed
 * WCAG AA contrast on white text (4.56:1). Dark mode uses --color-accent
 * (#60a5fa) on dark bg (#111827) — the button swaps to dark-on-light.
 */
.login-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--space-3) var(--space-6);
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-text-inverse);
	background: var(--color-accent);
	border: none;
	border-radius: var(--radius-lg);
	text-decoration: none;
	cursor: pointer;
	min-height: 3rem;
	transition:
		background var(--transition-fast),
		opacity var(--transition-fast);
}

.login-button:hover {
	background: var(--color-accent-hover);
}
.login-button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.login-hint {
	margin-top: var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
}

.login-footer {
	margin-top: var(--space-4);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.login-footer a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--color-border-strong);
	text-underline-offset: 2px;
}

.login-footer a:hover {
	text-decoration-color: currentColor;
}
.login-footer a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/* ----- Auth Form (Passkey login/registratie) ----- */

.auth-view {
	width: 100%;
}
.auth-view[hidden] {
	display: none;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.auth-form[hidden] {
	display: none;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	text-align: left;
}

.form-group label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
}

.form-group input[type="email"] {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	font-family: inherit;
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	min-height: 2.75rem;
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.form-group input[type="email"]:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--focus-ring);
}

.form-group input[type="email"]::placeholder {
	color: var(--color-text-placeholder);
}

.auth-toggle {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.link-button {
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--weight-medium);
	color: var(--color-accent);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.link-button:hover {
	text-decoration: underline;
}

.link-button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/*
 * Auth error en loading gebruiken het "lege-content" patroon:
 * aria-live container is altijd in de DOM, maar bevat alleen tekst als er
 * een fout/status is. Zo pikt de screenreader wijzigingen betrouwbaar op
 * (hidden toggle wordt niet door alle screenreaders gedetecteerd).
 * :empty pseudo-class verbergt de container visueel als er geen tekst is.
 */
.auth-error {
	margin-top: var(--space-3);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-danger);
	background: var(--color-danger-light);
	border: 1px solid var(--color-danger);
	border-radius: var(--radius-md);
	text-align: left;
	line-height: var(--leading-normal);
}

.auth-error:empty {
	display: none;
}

.auth-loading {
	margin-top: var(--space-3);
	padding: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-align: center;
}

.auth-loading:empty {
	display: none;
}

/* Confirm/add-passkey step: bevestigingsscherm na e-mail lookup */
.confirm-message {
	margin-bottom: var(--space-4);
	text-align: left;
}

.confirm-title {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--color-text);
	margin-bottom: var(--space-2);
}

.confirm-text {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-normal);
}

.confirm-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.login-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.login-button[aria-busy="true"] {
	opacity: 0.6;
	cursor: wait;
}

.connect-info {
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	text-align: left;
}

.connect-info p {
	margin: 0;
}

/* ----- Landing Page ----- */

.landing-body {
	background: var(--color-bg);
}

/* Nav — sticky, clean, compact */
.landing-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--color-nav-bg);
	border-bottom: 1px solid var(--color-border);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.landing-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-3) var(--space-4);
}

.landing-nav-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	letter-spacing: -0.01em;
}

.landing-nav-logo:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-md);
}

.landing-nav-logo img {
	border-radius: var(--radius-lg);
}

/* App preview — prominente video/screenshot in de hero */
.landing-preview {
	max-width: var(--max-width);
	margin: 3rem auto 0;
	padding: 0 var(--space-4);
}

.landing-preview-frame {
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-xl);
	overflow: hidden;
	background: var(--color-surface);
}

.landing-preview-chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.landing-preview-dot {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	background: var(--color-border-strong);
}

.landing-preview-frame video,
.landing-preview-frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hero — groot, zelfverzekerd, ruim */
.landing-hero {
	padding: 6rem 0 5rem;
	background: linear-gradient(180deg, var(--color-accent-subtle) 0%, var(--color-bg) 100%);
}

.landing-section-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-4);
}

.landing-hero h1 {
	font-size: 4rem;
	font-weight: var(--weight-bold);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--color-text);
}

.landing-hero-accent {
	width: 3rem;
	height: 4px;
	background: var(--color-accent);
	border-radius: var(--radius-full);
	margin: var(--space-5) 0 var(--space-6);
}

.landing-hero-subtitle {
	font-size: 1.375rem;
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
	line-height: var(--leading-normal);
	max-width: 28rem;
}

.landing-hero-desc {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
	max-width: 34rem;
	margin-top: var(--space-4);
}

.landing-hero-actions {
	margin-top: var(--space-8);
}

.landing-cta-btn {
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-base);
	min-height: 3rem;
	gap: var(--space-2);
}

/* Sections — consistent ritme */
.landing-section {
	padding: 4.5rem 0;
}

.landing-section-alt {
	background: var(--color-surface);
}

.landing-section h2 {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: -0.02em;
	margin-bottom: 2.5rem;
}

/* Feature grid — 2x2 kaarten */
.landing-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

.landing-feature {
	padding: var(--space-6);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition:
		border-color var(--transition-normal),
		box-shadow var(--transition-normal);
}

.landing-feature:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-sm);
}

.landing-feature-icon {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent-subtle);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
	color: var(--color-accent);
}

.landing-feature h3 {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	margin-bottom: var(--space-2);
}

.landing-feature p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
}

/* Stappen — drie kolommen met mono nummers */
.landing-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.landing-step-number {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--color-accent);
	margin-bottom: var(--space-3);
}

.landing-step h3 {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	margin-bottom: var(--space-2);
}

.landing-step p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
}

/* Pricing — groot, direct, nuchter */
.landing-pricing-title {
	font-family: var(--font-sans);
	font-size: 3.5rem;
	font-weight: var(--weight-bold);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.landing-pricing-sub {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	margin-top: var(--space-3);
}

.landing-pricing-detail {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: var(--space-4);
	max-width: 34rem;
	line-height: var(--leading-normal);
}

/* FAQ — native details/summary, schoon */
.landing-faq {
	max-width: 40rem;
}

.landing-faq details {
	border-bottom: 1px solid var(--color-border);
}
.landing-faq details:first-of-type {
	border-top: 1px solid var(--color-border);
}

.landing-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--color-text);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.landing-faq summary::-webkit-details-marker {
	display: none;
}

.landing-faq summary::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--weight-normal);
	color: var(--color-text-muted);
	transition: transform var(--transition-fast);
}

.landing-faq details[open] summary::after {
	content: "\2212";
}

.landing-faq summary:hover {
	color: var(--color-accent);
}

.landing-faq summary:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

.landing-faq details p {
	padding: 0 0 var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
	max-width: 36rem;
}

/* CTA sectie — gecentreerd, uitnodigend */
.landing-cta-section {
	text-align: center;
	padding: 5rem 0;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
}

.landing-cta-section h2 {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-3);
}

.landing-cta-section p {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
}

.landing-cta-section .login-button {
	display: inline-flex;
	max-width: 20rem;
}

/* Footer — minimaal */
.landing-footer {
	padding: var(--space-6) var(--space-4);
	text-align: center;
	font-size: var(--text-xs);
	color: var(--color-text-placeholder);
	border-top: 1px solid var(--color-border);
}

.landing-footer a {
	color: inherit;
	text-decoration: none;
}
.landing-footer a:hover {
	text-decoration: underline;
}

/* App credit */
.app-credit {
	text-align: center;
	font-size: var(--text-xs);
	color: var(--color-text-placeholder);
	padding: var(--space-2) 0 var(--space-4);
}

.app-credit a {
	color: inherit;
	text-decoration: none;
}
.app-credit a:hover {
	text-decoration: underline;
}

/* Scroll reveal */
.landing-reveal {
	opacity: 0;
	transform: translateY(1rem);
	transition:
		opacity 0.5s var(--ease-out),
		transform 0.5s var(--ease-out);
}

.landing-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Gestaffeld onthullen */
.landing-reveal:nth-child(2) {
	transition-delay: 80ms;
}
.landing-reveal:nth-child(3) {
	transition-delay: 160ms;
}
.landing-reveal:nth-child(4) {
	transition-delay: 240ms;
}

/* Responsive — landing moet op mobiel werken */
@media (max-width: 768px) {
	.landing-hero {
		padding: 3.5rem 0 3rem;
	}
	.landing-hero h1 {
		font-size: 2.75rem;
	}
	.landing-hero-subtitle {
		font-size: var(--text-lg);
	}
	.landing-features {
		grid-template-columns: 1fr;
	}
	.landing-steps {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
	.landing-section {
		padding: 3rem 0;
	}
	.landing-pricing-title {
		font-size: 2.5rem;
	}
	.landing-cta-section {
		padding: 3.5rem 0;
	}
}

@media (max-width: 480px) {
	.landing-hero h1 {
		font-size: 2.25rem;
	}
	.landing-hero-subtitle {
		font-size: var(--text-base);
	}
	.landing-pricing-title {
		font-size: 2rem;
	}
}

/* ----- Animations ----- */
@keyframes savedFlash {
	0%,
	100% {
		background-color: transparent;
	}
	30% {
		background-color: var(--color-saved-flash);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-0.25rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(0.25rem);
	}
}

.toast-dismiss {
	animation: fadeOut var(--transition-normal) forwards;
}

/* ----- Dark Mode ----- */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #111827;
		--color-surface: #0f172a;
		--color-surface-alt: #1e293b;
		--color-border: #374151;
		--color-border-strong: #4b5563;

		--color-text: #f9fafb;
		--color-text-secondary: #d1d5db;
		--color-text-muted: #9ca3af;
		--color-text-placeholder: #6b7280;

		--color-accent: #60a5fa;
		--color-accent-hover: #93bbfd;
		--color-accent-light: #1e3a5f;
		--color-accent-subtle: #172554;

		--color-success: #34d399;
		--color-success-light: #064e3b;
		--color-warning: #fbbf24;
		--color-warning-light: #78350f;
		--color-danger: #f87171;
		--color-danger-light: #7f1d1d;

		--color-weekend-bg: #1e293b;
		--color-holiday-bg: #422006;
		--color-holiday-text: #fbbf24;
		--color-today-border: #60a5fa;
		--color-cell-hover: #1e3a5f;
		--color-cell-filled: rgba(96, 165, 250, 0.06);
		--color-saved-flash: rgba(52, 211, 153, 0.15);

		--color-moneybird: #60a5fa;
		--color-moneybird-hover: #93bbfd;

		--color-nav-bg: rgba(17, 24, 39, 0.85);

		--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
		--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
		--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
	}

	.login-body {
		background: linear-gradient(160deg, #0f172a 0%, #111827 40%, #042f2e 100%);
	}

	/*
   * Dark mode: accent (#60a5fa) als background is te licht voor witte tekst
   * (contrast ratio ~2.3:1 — WCAG AA failure). Gebruik een donkerdere tint
   * met witte tekst, of wissel naar donkere tekst op lichte achtergrond.
   * Hier: donkerder blauw dat 4.5:1+ haalt op wit.
   */
	.login-button {
		background: #3b82f6;
		color: #ffffff;
	}

	.login-button:hover {
		background: #2563eb;
	}

	/* Error styling met donkere kleuren die contrast halen */
	.auth-error {
		color: #fca5a5;
		background: #450a0a;
		border-color: #7f1d1d;
	}
}

/* ----- Keyboard Hints ----- */

.keyboard-hints {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-3);
	padding: var(--space-2) 0;
}

.keyboard-hint {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 var(--space-1);
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 1px 0 var(--color-border-strong);
}

@media (max-width: 768px) {
	.keyboard-hints {
		display: none;
	}
}

/* ----- Loading State ----- */
.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ----- Utility ----- */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}