:root {
	--bg: #fff;
	--bg-subtle: #f7f8fa;
	--bg-hover: #eef1f4;
	--bg-active: #e2e8f0;
	--border: #e3e6ea;
	--border-strong: #cbd2da;
	--text: #1a1d21;
	--text-muted: #5b6168;
	--text-subtle: #8b9098;
	--accent: #475569;
	--accent-hover: #334155;
	--accent-soft: #e8edf3;
	--unread: #2563eb;
	--danger: #b42318;
	--success: #067647;
	--shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
	--shadow-md: 0 4px 12px rgb(16 24 40 / 8%);
	--radius: 6px;
	--radius-lg: 10px;
	--header-h: 56px;
	--sidebar-w: 240px;
	--list-w: 380px;
	--font: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { block-size: 100%;
	margin: 0; }
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	line-height: 1.45;
}
a { color: var(--accent);
	text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer;
	font-family: inherit;
	font-size: inherit; }

/* ===== App shell ===== */
.app { block-size: 100vh;
	display: grid;
	grid-template-rows: var(--header-h) 1fr; }

/* ===== Header ===== */
.app-header {
	align-items: center;
	background: var(--bg);
	border-block-end: 1px solid var(--border);
	display: grid;
	gap: 16px;
	grid-template-columns: var(--sidebar-w) 1fr auto;
	padding: 0 16px;
}
.brand { align-items: center;
	color: var(--text);
	display: flex;
	font-size: 15px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: -.01em;
}
.brand-mark {
	background: var(--accent);
	block-size: 28px;
	border-radius: 6px;
	color: #fff;
	display: grid;
	inline-size: 28px;
	place-items: center;
}
.search { inline-size: 100%;
	max-inline-size: 720px;
	position: relative;
}
.search input {
	background: var(--bg-subtle);
	block-size: 38px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font: inherit;
	inline-size: 100%;
	padding: 0 12px 0 38px;
}
.search input:focus { background: var(--bg);
	border-color: var(--border-strong);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}
.search svg {
	color: var(--text-subtle);
	inset-block-start: 50%;
	inset-inline-start: 12px;
	position: absolute;
	transform: translateY(-50%);
}
.header-actions { align-items: center;
	display: flex;
	gap: 6px; }
.icon-btn {
	background: transparent;
	block-size: 36px;
	border: 0;
	border-radius: var(--radius);
	color: var(--text-muted);
	display: grid;
	inline-size: 36px;
	place-items: center;
}
.icon-btn:hover { background: var(--bg-hover);
	color: var(--text); }
.avatar {
	background: var(--accent);
	block-size: 32px;
	border-radius: 50%;
	color: #fff;
	display: grid;
	font-size: 12px;
	font-weight: 600;
	inline-size: 32px;
	margin-inline-start: 4px;
	place-items: center;
}

/* ===== Layout ===== */
.app-main { display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	overflow: hidden; }

/* ===== Sidebar ===== */
.sidebar {
	background: var(--bg);
	border-inline-end: 1px solid var(--border);
	overflow-y: auto;
	padding: 12px 8px;
}
.compose-btn { align-items: center;
	background: var(--accent);
	block-size: 40px;
	border: 0;
	border-radius: var(--radius);
	color: #fff;
	display: flex;
	font-weight: 600;
	gap: 8px;
	inline-size: 100%;
	justify-content: center;
	margin-block-end: 12px;
}
.compose-btn:hover { background: var(--accent-hover); }
.nav { list-style: none;
	margin: 0;
	padding: 0; }
.nav li a { align-items: center;
	border-radius: var(--radius);
	color: var(--text);
	display: flex;
	font-weight: 500;
	gap: 10px;
	padding: 7px 10px;
	text-decoration: none;
}
.nav li a:hover { background: var(--bg-hover);
	text-decoration: none; }
.nav li a.active { background: var(--accent-soft);
	color: var(--accent-hover);
	font-weight: 600; }
.nav li a .count { color: var(--text-muted);
	font-size: 12px;
	font-weight: 500;
	margin-inline-start: auto;
}
.nav-section {
	color: var(--text-subtle);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	margin: 16px 8px 6px;
	text-transform: uppercase;
}
.label-dot { block-size: 8px;
	border-radius: 50%;
	display: inline-block;
	inline-size: 8px; }

/* ===== Content area ===== */
.content { display: grid;
	grid-template-columns: var(--list-w) 1fr;
	overflow: hidden; }

/* ===== Mail list ===== */
.mail-list {
	background: var(--bg);
	border-inline-end: 1px solid var(--border);
	overflow-y: auto;
}
.list-toolbar { align-items: center;
	background: var(--bg);
	border-block-end: 1px solid var(--border);
	display: flex;
	gap: 4px;
	inset-block-start: 0;
	padding: 10px 12px;
	position: sticky;
	z-index: 1;
}
.list-toolbar h2 { font-size: 14px;
	font-weight: 600;
	margin: 0 8px 0 4px; }
.list-toolbar .meta { color: var(--text-muted);
	font-size: 12px;
	margin-inline-start: auto; }

.mail-item {
	border-block-end: 1px solid var(--border);
	cursor: pointer;
	display: grid;
	gap: 10px;
	grid-template-columns: 20px 1fr auto;
	padding: 12px 14px;
	position: relative;
}
.mail-item:hover { background: var(--bg-subtle); }
.mail-item.selected { background: var(--accent-soft); }
.mail-item.unread .from, .mail-item.unread .subject { color: var(--text);
	font-weight: 600; }
.mail-item .indicator {
	background: transparent;
	block-size: 8px;
	border-radius: 50%;
	inline-size: 8px;
	margin-block-start: 6px;
}
.mail-item.unread .indicator { background: var(--unread); }
.mail-item .body { min-inline-size: 0; }
.mail-item .top { align-items: baseline;
	display: flex;
	gap: 8px;
	min-inline-size: 0;
}
.mail-item .from { color: var(--text-muted);
	flex: 1;
	font-weight: 500;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail-item .time { color: var(--text-subtle);
	font-size: 12px;
	white-space: nowrap; }
.mail-item .subject { color: var(--text);
	font-weight: 500;
	margin-block-start: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail-item .preview {
	color: var(--text-muted);
	font-size: 13px;
	margin-block-start: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail-item .badges {
	display: flex;
	gap: 4px;
	margin-block-start: 4px;
}
.badge { align-items: center;
	background: var(--bg-active);
	border-radius: 4px;
	color: var(--text-muted);
	display: inline-flex;
	font-size: 11px;
	font-weight: 500;
	gap: 4px;
	padding: 2px 6px;
}
.badge .label-dot { block-size: 6px;
	inline-size: 6px; }
.mail-item .attach { color: var(--text-subtle); }

/* ===== Mail view (preview/read pane) ===== */
.mail-view {
	background: var(--bg);
	overflow-y: auto;
}
.mail-view-empty { block-size: 100%;
	color: var(--text-subtle);
	display: grid;
	padding: 40px;
	place-items: center;
	text-align: center;
}
.mail-view-empty svg { margin-block-end: 16px; }

.mail-toolbar { align-items: center;
	background: var(--bg);
	border-block-end: 1px solid var(--border);
	display: flex;
	gap: 4px;
	inset-block-start: 0;
	padding: 10px 16px;
	position: sticky;
	z-index: 1;
}
.btn { align-items: center;
	background: var(--bg);
	block-size: 34px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	display: inline-flex;
	font-weight: 500;
	gap: 6px;
	padding: 0 12px;
}
.btn:hover { background: var(--bg-hover); }
.btn-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.btn-primary:hover { background: var(--accent-hover);
	border-color: var(--accent-hover); }
.btn-ghost { background: transparent;
	border-color: transparent;
	color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-hover);
	color: var(--text); }
.toolbar-sep { background: var(--border);
	block-size: 20px;
	inline-size: 1px;
	margin: 0 4px; }
.spacer { flex: 1; }

.mail-header {
	border-block-end: 1px solid var(--border);
	padding: 20px 32px 12px;
}
.mail-header h1 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 12px;
}
.thread-labels { display: flex;
	gap: 6px;
	margin-block-end: 8px; }

.message {
	border-block-end: 1px solid var(--border);
	padding: 20px 32px;
}
.message:last-child { border-block-end: 0; }
.message-meta { align-items: start;
	display: grid;
	gap: 12px;
	grid-template-columns: 40px 1fr auto;
	margin-block-end: 16px;
}
.message-meta .avatar { block-size: 40px;
	font-size: 14px;
	inline-size: 40px;
	margin: 0; }
.message-meta .who { min-inline-size: 0; }
.message-meta .name { color: var(--text);
	font-weight: 600; }
.message-meta .email { color: var(--text-muted);
	font-size: 13px; }
.message-meta .to { color: var(--text-muted);
	font-size: 13px;
	margin-block-start: 2px; }
.message-meta .when { color: var(--text-subtle);
	font-size: 13px;
	white-space: nowrap; }
.message-body { color: var(--text);
	font-size: 14px;
	line-height: 1.6; }
.message-body p { margin: 0 0 12px; }
.message-body a {color: #2563eb;
	text-decoration: underline;
	text-underline-offset: 2px;}
.message-body a:hover {color: var(--text-muted);
	text-decoration: none;}

.attachments {
	border-block-start: 1px dashed var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 16px;
	padding-block-start: 16px;
}
.attachment { align-items: center;
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex;
	font-size: 13px;
	gap: 10px;
	padding: 8px 12px;
}
.attachment .ext {
	background: var(--accent);
	block-size: 28px;
	border-radius: 4px;
	color: #fff;
	display: grid;
	font-size: 10px;
	font-weight: 700;
	inline-size: 28px;
	place-items: center;
}
.attachment .size { color: var(--text-muted);
	font-size: 12px; }

.reply-bar {
	display: flex;
	gap: 8px;
	padding: 20px 32px 32px;
}

/* ===== Compose ===== */
.compose {
	background: var(--bg);
	block-size: 100%;
	display: flex;
	flex-direction: column;
}
.compose-header { align-items: center;
	border-block-end: 1px solid var(--border);
	display: flex;
	padding: 14px 20px;
}
.compose-header h2 { font-size: 15px;
	font-weight: 600;
	margin: 0; }
.compose-fields { padding: 4px 20px; }
.field {
	align-items: center;
	border-block-end: 1px solid var(--border);
	display: grid;
	gap: 12px;
	grid-template-columns: 80px 1fr auto;
	padding: 8px 0;
}
.field label {
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
}
.field input, .field .input-like {
	background: transparent;
	border: 0;
	color: var(--text);
	font: inherit;
	inline-size: 100%;
	outline: none;
	padding: 4px 0;
}
.field .cc-link { color: var(--accent);
	font-size: 13px; }
.recipient-chip { align-items: center;
	background: var(--bg-active);
	border-radius: 20px;
	color: var(--text);
	display: inline-flex;
	font-size: 13px;
	gap: 6px;
	margin-inline-end: 4px;
	padding: 3px 8px 3px 4px;
}
.recipient-chip .avatar { block-size: 22px;
	font-size: 10px;
	inline-size: 22px;
	margin: 0; }
.recipient-chip button {
	background: none;
	border: 0;
	color: var(--text-muted);
	cursor: pointer;
	line-height: 1;
	padding: 0;
}
.editor {
	flex: 1;
	font-size: 14px;
	line-height: 1.6;
	outline: none;
	overflow-y: auto;
	padding: 20px;
}
.editor[contenteditable]:empty::before { color: var(--text-subtle);
	content: attr(data-placeholder);
}
.compose-toolbar { align-items: center;
	border-block-start: 1px solid var(--border);
	display: flex;
	gap: 4px;
	padding: 10px 20px;
}
.format-bar { align-items: center;
	border-block-start: 1px solid var(--border);
	color: var(--text-muted);
	display: flex;
	gap: 2px;
	padding: 8px 20px;
}
.format-bar .icon-btn { block-size: 30px;
	inline-size: 30px; }

/* ===== Settings ===== */
.settings-layout { display: grid;
	grid-template-columns: 240px 1fr;
	overflow: hidden; }
.settings-nav {
	border-inline-end: 1px solid var(--border);
	overflow-y: auto;
	padding: 16px 8px;
}
.settings-nav h2 { font-size: 16px;
	font-weight: 600;
	margin: 0 8px 12px;
}
.settings-nav ul { list-style: none;
	margin: 0;
	padding: 0; }
.settings-nav li a { border-radius: var(--radius);
	color: var(--text);
	display: block;
	font-weight: 500;
	padding: 8px 12px;
}
.settings-nav li a:hover { background: var(--bg-hover);
	text-decoration: none; }
.settings-nav li a.active { background: var(--accent-soft);
	color: var(--accent-hover); }

.settings-content {
	max-inline-size: 760px;
	overflow-y: auto;
	padding: 32px 40px;
}
.settings-content h1 {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 4px;
}
.settings-content > p.lede {
	color: var(--text-muted);
	margin: 0 0 28px;
}
.setting-group {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-block-end: 20px;
	overflow: hidden;
}
.setting-group h3 {
	background: var(--bg-subtle);
	border-block-end: 1px solid var(--border);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	padding: 14px 20px;
}
.setting-row { align-items: center;
	border-block-end: 1px solid var(--border);
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr auto;
	padding: 16px 20px;
}
.setting-row:last-child { border-block-end: 0; }
.setting-row .label { font-weight: 500; }
.setting-row .desc { color: var(--text-muted);
	font-size: 13px;
	margin-block-start: 2px; }

select, input[type="text"], input[type="email"], textarea {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font: inherit;
	min-inline-size: 180px;
	padding: 8px 10px;
}
select:focus, input:focus, textarea:focus { border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}

/* Toggle */
.toggle { block-size: 22px;
	inline-size: 40px;
	position: relative; }
.toggle input { block-size: 0;
	inline-size: 0;
	opacity: 0; }
.toggle .slider {
	background: var(--border-strong);
	border-radius: 22px;
	inset: 0;
	position: absolute;
	transition: .15s;
}
.toggle .slider::before {
	background: #fff;
	block-size: 18px;
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	content: "";
	inline-size: 18px;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	position: absolute;
	transition: .15s;
}
.toggle input:checked + .slider { background: var(--accent); }
.toggle input:checked + .slider::before { transform: translateX(18px); }

/* ===== Search results ===== */
.search-page { overflow-y: auto;
	padding: 24px 32px; }
.search-meta {
	color: var(--text-muted);
	font-size: 13px;
	margin-block-end: 12px;
}
.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 20px;
}
.chip { align-items: center;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 20px;
	color: var(--text);
	display: inline-flex;
	font-size: 13px;
	gap: 6px;
	padding: 6px 12px;
}
.chip:hover { background: var(--bg-hover); }
.chip.active { background: var(--accent);
	border-color: var(--accent);
	color: #fff; }
.chip.removable button {
	background: none;
	border: 0;
	color: inherit;
	opacity: .7;
}
mark { background: #fde68a;
	border-radius: 2px;
	color: inherit;
	padding: 0 2px; }

/* ===== Color utilities (avatars + label dots) ===== */
.bg-green { background: #16a34a; }
.bg-blue { background: #2563eb; }
.bg-purple { background: #7c3aed; }
.bg-red { background: #dc2626; }
.bg-amber { background: #a16207; }
.bg-cyan { background: #0891b2; }

/* ===== Page variants ===== */
.content--single { grid-template-columns: 1fr; }

/* Anchor used as mail-item */
a.mail-item { color: inherit;
	text-decoration: none; }

/* ===== Compose ===== */
.compose-btn:disabled { cursor: default;
	opacity: .6; }
.recipient-input { display: inline-block;
	inline-size: auto;
	min-inline-size: 140px; }
.subject-input { background: transparent;
	border: 0;
	min-inline-size: 0;
	padding: 4px 0;
}
.save-status { color: var(--text-subtle);
	font-size: 12px; }

/* ===== Read view ===== */
.mail-toolbar .meta { color: var(--text-muted);
	font-size: 12px; }

/* ===== Search page ===== */
.page-title {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 4px;
}
.chip--add { border-style: dashed; }
.mail-list--card {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.search-hint { align-items: center;
	color: var(--text-muted);
	display: flex;
	font-size: 13px;
	gap: 8px;
	margin-block-start: 20px;
}

/* ===== Settings ===== */
.input-time { inline-size: 80px;
	min-inline-size: 0; }
.input-date { inline-size: 120px;
	min-inline-size: 0; }
.setting-row--stack { align-items: start;
	grid-template-columns: 1fr; }
.signature-textarea { font-family: inherit;
	inline-size: 100%;
	min-inline-size: 0; }
.field-desc-spaced { margin-block-end: 8px; }
.form-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-block-start: 24px;
}

/* ===== Utility ===== */
.sr-only { block-size: 1px;
	border: 0;
	clip: rect(0,0,0,0);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}
.kbd { background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-block-end-width: 2px;
	border-radius: 4px;
	color: var(--text-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	padding: 1px 5px;
}

/* Responsive — collapse to single pane */
@media (max-width: 1100px) {
	:root { --list-w: 320px;
		--sidebar-w: 64px; }
	.nav li a span.label, .nav-section, .brand span, .compose-btn span { display: none; }
	.compose-btn { padding: 0; }
}
@media (max-width: 760px) {
	.content { grid-template-columns: 1fr; }
	.mail-view, .mail-list { display: none; }
	.mail-list.show, .mail-view.show { display: block; }
}

/* Feature flags: verborgen elementen respecteren hidden, ook bij display-overrides */
[data-feature][hidden] { display: none; }

/* Toggle-knop rechtsonder (verborgen tot hover) */
.feature-flags-toggle {
	background: #1f2937;
	border: none;
	border-start-start-radius: 6px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	inset-block-end: 0;
	inset-inline-end: 0;
	opacity: 0;
	padding: 6px 12px;
	position: fixed;
	transition: opacity 0.2s;
	z-index: 2;
}
.feature-flags-toggle:hover { opacity: 1; }

.feature-flags-panel {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,.15);
	inset-block-end: 2rem;
	inset-inline-end: 2rem;
	max-block-size: 70vh;
	overflow-y: auto;
	padding: 16px;
	position: fixed;
	min-inline-size: 280px;
	z-index: 1;
}
.feature-flags-heading { font-weight: 600; margin: 0 0 8px; }
.feature-flags-group-heading {
	border-block-start: 1px solid #e5e7eb;
	color: #6b7280;
	font-size: 13px;
	margin-block: 12px 6px;
	padding-block-start: 8px;
}
.feature-flags-panel ul { list-style: none; padding: 0; margin: 0; }
.feature-flags-panel label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 6px;
	padding-block: 3px;
}
.feature-flags-clear {
	background: #dc2626;
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	inline-size: 100%;
	margin-block-start: 16px;
	padding: 6px 12px;
}
.settings-radio-group,
.settings-field { display: none; }

/* Feature-flag link-action: strip anchor-styling als href is verwijderd */
.feature-link-disabled,
.message-body a.feature-link-disabled {
	color: inherit;
	cursor: default;
	text-decoration: none;
}
.feature-link-disabled:hover {
	text-decoration: none;
}