:root {
	--ink: #1C1C1C;
	--paper: #FFFFFF;
	--surface: #F6F5F2;
	--surface-2: #FFFFFF;
	--border: #E3E0DA;
	--text: #1C1C1C;
	--text-muted: #6B6862;
	--teal: #094E67;
	--green: #134D13;
	--maroon: #620C23;
	--status-positive: #2A5FA5;
	--status-warning: #96650E;
	--status-danger: #9C2B20;
	--status-neutral: #837F77;
	--focus: #2A5FA5;
	--radius: 10px;
}

* { box-sizing: border-box; }

body.crm-login-body,
body.crm-app-body {
	margin: 0;
	background: var(--surface);
	color: var(--text);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

h1, h2, h3, .crm-logo, .crm-stat__value, .crm-btn { font-weight: 600; }
h1, h2, h3 { margin: 0; }

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

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Login screen ---------- */

.crm-login-screen {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 15% 15%, #1F2A2D 0%, #14130F 55%);
	padding: 32px 16px;
	position: relative;
	overflow: hidden;
}

.crm-decoration {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(900px, 140vw);
	height: auto;
	transform: translate(-50%, -50%);
	opacity: 0.14;
	pointer-events: none;
}

.crm-login-card {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	padding: 40px 32px;
	backdrop-filter: blur(6px);
}

.crm-login-card .crm-logo {
	color: #FFFFFF;
	font-size: 1.5rem;
	letter-spacing: -1px;
	display: block;
	margin-bottom: 6px;
}

.crm-login-sub { display: block; color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin-bottom: 32px; }

.crm-field { margin-bottom: 18px; }
.crm-field label {
	display: block;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.crm-field input {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	padding: 11px 12px;
	color: #fff;
}

.crm-login-error { color: #E8A199; font-size: 0.82rem; margin: -8px 0 16px; }
.crm-login-info { color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; line-height: 1.6; margin: 0 0 22px; }
.crm-login-forgot { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; text-decoration: none; }
.crm-login-forgot:hover { color: #fff; text-decoration: underline; }

.crm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 8px;
	border: 1px solid transparent;
	padding: 11px 18px;
	cursor: pointer;
	transition: opacity 0.15s ease;
	white-space: nowrap;
	text-decoration: none;
}
.crm-btn:hover { opacity: 0.88; }
.crm-btn--primary-dark { background: #fff; color: #14130F; width: 100%; }

.crm-login-foot { margin-top: 24px; font-size: 0.76rem; color: rgba(255, 255, 255, 0.35); line-height: 1.5; }

/* ---------- App shell ---------- */

.crm-app { display: flex; min-height: 100vh; }

.crm-sidebar {
	width: 232px;
	flex-shrink: 0;
	background: var(--ink);
	color: var(--paper);
	display: flex;
	flex-direction: column;
	padding: 20px 14px;
	position: sticky;
	top: 0;
	height: 100vh;
}
.crm-sidebar .crm-logo { color: var(--paper); font-size: 1.15rem; letter-spacing: -1px; padding: 6px 10px 4px; }
.crm-sidebar .crm-tagline { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; padding: 0 10px 22px; }

.crm-nav-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.68);
	padding: 9px 10px;
	border-radius: 7px;
	cursor: pointer;
	margin-bottom: 2px;
}
.crm-nav-btn svg { flex-shrink: 0; width: 17px; height: 17px; }
.crm-nav-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.crm-nav-btn.active { background: rgba(255, 255, 255, 0.12); color: #fff; }
.crm-nav-btn .crm-count { margin-left: auto; font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; }

.crm-sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.crm-signout-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	padding: 8px 10px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 0.82rem;
	text-decoration: none;
}
.crm-signout-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.crm-signout-btn svg { width: 15px; height: 15px; }

.crm-mobile-topbar { display: none; }

.crm-main { flex: 1; min-width: 0; padding: 32px 36px 60px; }

.crm-view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.crm-view-head h2 { font-size: 1.4rem; }
.crm-view-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.85rem; }

.crm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 32px; }
.crm-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.crm-stat__label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; }
.crm-stat__value { font-size: 1.7rem; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.crm-stat__value-sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.crm-stat__sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; }

.crm-proj-eur { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-proj-gbp { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.crm-proj-total-row td { border-top: 1px solid var(--border); font-weight: 600; }

.crm-toggle-group { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; flex-shrink: 0; }
.crm-toggle-btn { border: none; background: none; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.crm-toggle-btn.active { background: var(--ink); color: var(--paper); }

.crm-panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 24px; overflow: hidden; }
.crm-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.crm-panel__head h3 { font-size: 1rem; }

.crm-btn--ink { background: var(--ink); color: var(--paper); }
.crm-btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.crm-btn--sm { padding: 6px 12px; font-size: 0.8rem; }
.crm-btn--icon { padding: 6px; border-radius: 6px; background: transparent; border: 1px solid transparent; }
.crm-btn--icon:hover { background: var(--surface); border-color: var(--border); }
.crm-btn--icon svg { width: 15px; height: 15px; display: block; }

.crm-table-scroll { overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.crm-table thead th {
	text-align: left;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	padding: 10px 18px;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.crm-table tbody td { padding: 12px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr:hover { background: var(--surface); }
.crm-table tbody tr.crm-row-test { background: var(--surface); color: var(--text-muted); }
.crm-table tbody tr.crm-row-test .crm-row-name { color: var(--text-muted); }
.crm-table td.crm-actions { text-align: right; white-space: nowrap; }
.crm-table td.crm-num { font-variant-numeric: tabular-nums; }
.crm-row-name { font-weight: 600; }
.crm-row-sub { color: var(--text-muted); font-size: 0.8rem; }
.crm-empty-row td, .crm-empty-block { text-align: center; color: var(--text-muted); padding: 28px; }

.crm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 0.75rem; white-space: nowrap; }
.crm-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.crm-emailed-badge { display: inline-flex; margin-left: 6px; color: var(--text-muted); vertical-align: middle; }
.crm-emailed-badge svg { width: 13px; height: 13px; display: block; }
.crm-tone-positive { color: var(--status-positive); background: color-mix(in srgb, var(--status-positive) 14%, transparent); }
.crm-tone-warning { color: var(--status-warning); background: color-mix(in srgb, var(--status-warning) 14%, transparent); }
.crm-tone-danger { color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 14%, transparent); }
.crm-tone-neutral { color: var(--status-neutral); background: color-mix(in srgb, var(--status-neutral) 14%, transparent); }

.crm-activity-list { display: flex; flex-direction: column; }
.crm-activity-item { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.crm-activity-item:last-child { border-bottom: none; }
.crm-activity-icon {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--surface); border: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.crm-activity-icon svg { width: 15px; height: 15px; color: var(--text-muted); }
.crm-activity-body p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.85rem; }
.crm-activity-meta { font-size: 0.76rem; color: var(--text-muted); }

.crm-overlay { position: fixed; inset: 0; background: rgba(20, 19, 15, 0.45); display: flex; justify-content: flex-end; z-index: 40; }
.crm-drawer { width: 100%; max-width: 420px; background: var(--surface-2); height: 100vh; overflow-y: auto; padding: 26px 26px 30px; border-left: 1px solid var(--border); }
.crm-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.crm-drawer__head h3 { font-size: 1.1rem; }
.crm-close-x { background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; }
.crm-close-x svg { width: 18px; height: 18px; display: block; }

.crm-preview-overlay {
	position: fixed; inset: 0; background: rgba(20, 19, 15, 0.45);
	display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.crm-preview-modal {
	width: min(94vw, 920px); max-width: 920px; max-height: 90vh; overflow-y: auto;
	background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--border);
}
.crm-preview-modal--sm { width: min(94vw, 480px); max-width: 480px; }
.crm-preview-band {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--ink); padding: 24px; border-radius: var(--radius) var(--radius) 0 0;
}
.crm-preview-band__brand { display: flex; flex-direction: column; gap: 2px; }
.crm-preview-band__logo { color: var(--paper); font-size: 1.7rem; font-weight: 600; letter-spacing: -1px; }
.crm-preview-band__brand-sub { color: rgba(255, 255, 255, 0.8); font-size: 0.8rem; font-weight: 400; }
.crm-preview-band__close { color: rgba(255, 255, 255, 0.7); }
.crm-preview-band__close:hover { color: #fff; }
.crm-preview-band__actions { display: flex; align-items: center; gap: 14px; }
.crm-preview-band__pdf-btn {
	background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.9);
	padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.crm-preview-band__pdf-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.55); color: #fff; }

.crm-preview-modal__body { padding: 20px 22px; }
.crm-preview-paper { font-size: 0.94rem; line-height: 1.65; }
.crm-preview-paper .crm-preview-row { font-size: 0.92rem; }

.crm-preview-letterhead { text-align: left; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.crm-preview-kicker { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 8px; }
.crm-preview-title { font-size: 1.5rem; font-weight: 600; color: var(--text); line-height: 1.3; }

.crm-preview-party-block { margin-bottom: 20px; }
.crm-preview-party-block h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); margin: 0 0 6px; }
.crm-preview-party-block p { margin: 0; }

.crm-preview-section { margin-bottom: 20px; }
.crm-preview-section h5 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); margin: 0 0 8px; }
.crm-preview-section > p { margin: 0; }

.crm-preview-legal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.crm-preview-legal-text { margin: 10px 0 0; font-size: 0.82rem; font-style: italic; color: var(--text-muted); line-height: 1.5; }

.crm-preview-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.crm-preview-row:last-child { border-bottom: none; }
.crm-preview-row dt { color: var(--text-muted); margin: 0; }
.crm-preview-row dd { margin: 0; font-weight: 600; text-align: right; }
.crm-preview-description { color: var(--text); font-size: 0.94rem; line-height: 1.6; }
.crm-preview-description h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.crm-preview-description p { margin: 0 0 8px; }
.crm-preview-description p:last-child { margin-bottom: 0; }
.crm-preview-description ul, .crm-preview-description ol { margin: 0 0 8px; padding-left: 20px; }

.crm-preview-meta-block p { margin: 0 0 4px; font-size: 0.88rem; color: var(--text); text-align: left; }
.crm-preview-meta-block p:last-child { margin-bottom: 0; }

.crm-preview-agreement { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.crm-preview-agreement__check { display: flex; align-items: flex-start; gap: 10px; }
.crm-preview-agreement__check input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; cursor: not-allowed; }
.crm-preview-agreement__check span { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.crm-preview-agreement__check a { color: var(--teal); }

.crm-preview-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.crm-btn--locked, .crm-btn--locked:hover {
	background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
	cursor: not-allowed; opacity: 0.7;
}
.crm-preview-response { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; }
.crm-preview-response--accepted { color: var(--status-positive); }
.crm-preview-response--declined { color: var(--status-danger); }

@media (max-width: 560px) {
	.crm-preview-overlay { padding: 0; align-items: flex-end; }
	.crm-preview-modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; border-bottom: none; }
	.crm-preview-band { border-radius: 16px 16px 0 0; padding: 18px 16px; }
	.crm-preview-band__logo { font-size: 1.3rem; }
	.crm-preview-band__brand-sub { font-size: 0.74rem; }
	.crm-preview-modal__body { padding: 16px; }
	.crm-preview-title { font-size: 1.25rem; }
}

/* "Download PDF" on a preview modal (e.g. a meeting note) is just the
   browser's own print dialog, pointed at "Save as PDF" — this hides
   everything else on the page so only the modal's content prints.
   `.crm-no-print` marks controls (the Download PDF/close buttons) that
   shouldn't appear in that printed output either. */
@media print {
	.crm-no-print { display: none !important; }
	body > *:not(.crm-preview-overlay) { display: none !important; }
	.crm-preview-overlay { position: static !important; background: none !important; padding: 0 !important; display: block !important; }
	.crm-preview-modal { width: 100% !important; max-width: 100% !important; max-height: none !important; overflow: visible !important; border: none !important; border-radius: 0 !important; }
	.crm-preview-band { background: none !important; border-radius: 0 !important; padding: 0 0 16px !important; }
	.crm-preview-band__logo { color: var(--ink) !important; }
	.crm-preview-band--no-brand { display: none !important; }
	.crm-preview-band__brand-sub { color: var(--text-muted) !important; }
	/* Makes any background colour we DO want (e.g. a status pill) print
	   correctly regardless of the browser's own "Background graphics"
	   print-dialog checkbox — that checkbox itself can't be pre-set from
	   the page, but this stops its state from mattering for our content. */
	.crm-preview-overlay, .crm-preview-overlay * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

.crm-form-field { margin-bottom: 16px; }
.crm-form-field label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.crm-form-field input, .crm-form-field select, .crm-form-field textarea {
	width: 100%; background: var(--surface); border: 1px solid var(--border);
	border-radius: 7px; padding: 9px 10px; color: var(--text);
}
.crm-form-field textarea { min-height: 72px; resize: vertical; }
.crm-form-field input[readonly] { color: var(--text-muted); cursor: not-allowed; }
.crm-field-warning { margin: 8px 0 0; font-size: 0.78rem; color: var(--status-danger); }
.crm-field-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 0.76rem; color: var(--text-muted); }

.crm-payroll-breakdown { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.crm-payroll-breakdown__row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; padding: 3px 0; font-variant-numeric: tabular-nums; }
.crm-payroll-breakdown__row span:first-child { color: var(--text-muted); }
.crm-payroll-breakdown__gross { margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-weight: 600; }
.crm-payroll-breakdown__gross span:first-child { color: var(--text); }
.crm-payroll-breakdown__total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 600; }
.crm-payroll-breakdown__total span:first-child { color: var(--text); }

.crm-file-upload label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 8px; }
.crm-file-upload__dropzone {
	border: 2px dashed var(--border); border-radius: var(--radius); padding: 22px 16px; text-align: center;
	font-size: 0.85rem; color: var(--text-muted); cursor: pointer; background: var(--surface);
}
.crm-file-upload__dropzone:hover, .crm-file-upload__dropzone:focus-visible { border-color: var(--teal); color: var(--text); }
.crm-file-upload__dropzone.is-dragover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, var(--surface)); color: var(--text); }
.crm-file-upload.is-uploading .crm-file-upload__dropzone { opacity: 0.6; pointer-events: none; }
.crm-file-upload__current {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
	border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface);
}
.crm-file-upload__name { font-size: 0.86rem; font-weight: 600; word-break: break-all; }
.crm-file-upload__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.crm-richtext { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--surface); }
.crm-richtext__toolbar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.crm-richtext__btn {
	width: 28px; height: 28px; border: 1px solid transparent; border-radius: 5px; background: transparent;
	color: var(--text); font-size: 0.82rem; font-family: inherit; cursor: pointer;
}
.crm-richtext__btn:hover { background: var(--surface); border-color: var(--border); }
.crm-richtext__editor {
	min-height: 110px; padding: 10px; color: var(--text); font-size: 0.88rem; line-height: 1.5;
	outline: none; overflow-y: auto;
}
.crm-richtext__editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.crm-richtext__editor h3 { font-size: 1rem; font-weight: 600; margin: 0 0 6px; }
.crm-richtext__editor p { margin: 0 0 8px; }
.crm-richtext__editor p:last-child { margin-bottom: 0; }
.crm-richtext__editor ul, .crm-richtext__editor ol { margin: 0 0 8px; padding-left: 20px; }
.crm-richtext__editor--invalid { outline: 1px solid var(--status-danger); }

.crm-portal-access { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); }
.crm-portal-access label { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; }

.crm-monthly-split {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px 14px;
	margin-bottom: 16px;
	transition: border-color 0.15s ease;
}
.crm-monthly-split.is-open { border-color: var(--teal); }
.crm-monthly-split .crm-form-field { margin-bottom: 0; }
.crm-monthly-split__toggle label {
	display: flex; align-items: center; gap: 8px;
	font-size: 0.88rem; font-weight: 500; color: var(--text); cursor: pointer;
}
.crm-monthly-split__toggle input[type="checkbox"], .crm-monthly-split__toggle input[type="radio"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.crm-monthly-split__months { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.crm-monthly-split__months label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.crm-monthly-split__months input.crm-input--number { max-width: 110px; }
.crm-monthly-split__result { margin-top: 8px; font-size: 0.86rem; font-weight: 600; color: var(--teal); min-height: 1.2em; }
.crm-monthly-split__fixed { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.crm-monthly-split__fixed label {
	display: flex; align-items: center; gap: 8px;
	font-size: 0.82rem; color: var(--text-muted); cursor: pointer;
}
.crm-monthly-split__fixed input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }

.crm-drawer-actions { display: flex; gap: 10px; margin-top: 6px; }
.crm-drawer-actions .crm-btn { flex: 1; }

.crm-delete-link {
	display: block; text-align: center; margin-top: 18px; color: var(--status-danger);
	background: none; border: none; cursor: pointer; font-size: 0.82rem; width: 100%; padding: 8px;
}
.crm-delete-link:hover { text-decoration: underline; }
.crm-delete-link:disabled { color: var(--text-muted); cursor: not-allowed; }
.crm-delete-link:disabled:hover { text-decoration: none; }

.crm-delete-confirm {
	margin-top: 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--surface);
}
.crm-delete-confirm__prompt { margin: 0 0 8px; font-size: 0.8rem; color: var(--text-muted); }
.crm-delete-confirm__prompt strong { color: var(--status-danger); letter-spacing: 0.06em; }
.crm-delete-confirm__input {
	width: 100%; background: var(--surface-2); border: 1px solid var(--border);
	border-radius: 7px; padding: 8px 10px; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em;
}

.crm-toast {
	position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: var(--paper);
	padding: 10px 16px; border-radius: 8px; font-size: 0.85rem; z-index: 60; opacity: 0;
	transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.crm-toast.crm-toast--show { opacity: 1; transform: translateY(0); }
.crm-toast.crm-toast--error { background: var(--status-danger); }

@media (max-width: 820px) {
	.crm-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.crm-app { flex-direction: column; }
	.crm-sidebar { display: none; }
	.crm-mobile-topbar {
		display: flex; align-items: center; gap: 10px; overflow-x: auto;
		background: var(--ink); padding: 14px 14px 10px; position: sticky; top: 0; z-index: 20;
	}
	.crm-mobile-topbar .crm-logo { color: var(--paper); font-size: 1rem; letter-spacing: -1px; margin-right: 6px; flex-shrink: 0; }
	.crm-mobile-topbar .crm-nav-btn { width: auto; flex-shrink: 0; color: rgba(255,255,255,0.65); }
	.crm-mobile-topbar .crm-nav-btn .crm-count { display: none; }
	.crm-mobile-topbar .crm-nav-btn.active { background: rgba(255,255,255,0.14); color: #fff; }
	.crm-main { padding: 22px 16px 50px; }
	.crm-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
	.crm-view-head { align-items: flex-start; }
}

@media (max-width: 560px) {
	.crm-stats { grid-template-columns: 1fr; }
	.crm-drawer { max-width: 100%; }
}

/* ---------- Password show/hide toggle (injected by password-toggle.js) ---------- */

.crm-pw-wrap { position: relative; }
.crm-pw-wrap input { padding-right: 42px; }
.crm-pw-toggle {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	color: var(--text-muted);
}
.crm-pw-toggle svg { width: 17px; height: 17px; display: block; }
.crm-pw-toggle:hover { color: var(--text); }

.crm-field .crm-pw-toggle { color: rgba(255, 255, 255, 0.5); }
.crm-field .crm-pw-toggle:hover { color: #fff; }

.crm-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-rec-status { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-muted); margin: 0 0 12px; }
.crm-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #B3261E; display: inline-block; animation: crm-rec-pulse 1.4s ease-in-out infinite; }
@keyframes crm-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.crm-rec-transcript { min-height: 220px; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; font-size: 0.92rem; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
.crm-rec-transcript p { margin: 0 0 8px; }
.crm-rec-empty { color: var(--text-muted); font-style: italic; }
.crm-rec-interim { color: var(--text-muted); font-style: italic; }

.crm-rec-speakers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.crm-rec-speakers__label { font-size: 0.8rem; color: var(--text-muted); margin-right: 4px; }
.crm-rec-speaker { font: inherit; font-size: 0.82rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.crm-rec-speaker:hover { border-color: var(--teal); }
.crm-rec-speaker.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Invoice document. Shown in the admin and printed as A4 by Download PDF.
   Letterhead layout: a site-hero-style gradient header (logo + INVOICE), "Invoice to" beside the
   number/dates, an ink-headed striped items table, then ink bars for How to
   pay and the total. Print keeps the ink fills via print-color-adjust (set
   on the whole preview overlay in the print rules above). */
@media print { @page { size: A4; margin: 14mm; } }
.crm-invoice-doc { --inv-tint: #EFEEEA; font-size: 0.92rem; color: var(--text); }
.crm-invoice-doc { --inv-gradient: linear-gradient(135deg, #1C1C1C 0%, #14313a 60%, #0d3f4f 100%); }
.crm-inv-head { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--inv-gradient); color: #fff; padding: 26px 28px; border-radius: 10px; margin-bottom: 28px; }
.crm-inv-head > div { position: relative; }
.crm-inv-head__decoration { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crm-inv-logo { font-size: 1.6rem; font-weight: 600; letter-spacing: -1px; line-height: 1.1; }
.crm-inv-logo-sub { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }
.crm-inv-title { font-size: 2.4rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.crm-inv-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 26px; }
.crm-inv-to__label { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 2px; }
.crm-inv-to__name { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
.crm-inv-muted { color: var(--text-muted); font-size: 0.84rem; line-height: 1.55; }
.crm-inv-ids { text-align: right; line-height: 1.7; display: flex; flex-direction: column; align-items: flex-end; }
.crm-inv-ids__no { font-weight: 600; font-size: 1rem; word-break: break-all; }
.crm-inv-stamp { margin-top: 10px; border: 2px solid var(--green); color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 12px; border-radius: 4px; transform: rotate(-4deg); font-size: 0.85rem; line-height: 1.4; }
.crm-inv-intro { margin: 0 0 14px; font-weight: 600; }
.crm-inv-lines { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.crm-inv-lines thead th { background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; padding: 8px 10px; }
.crm-inv-lines tbody td { padding: 8px 10px; border-left: 2px solid #fff; vertical-align: top; }
.crm-inv-lines tbody td:first-child { border-left: none; }
.crm-inv-lines tbody tr:nth-child(even) td { background: var(--inv-tint); }
.crm-inv-lines tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.crm-inv-lines .crm-num { text-align: right; white-space: nowrap; }
.crm-inv-col-no { width: 40px; text-align: center !important; }
.crm-inv-col-qty { width: 60px; text-align: center !important; }
.crm-inv-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 26px; }
.crm-inv-pay { flex: 1; max-width: 400px; }
.crm-inv-pay p { margin: 10px 0; }
.crm-inv-bar { background: var(--ink); color: #fff; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 7px 12px; }
.crm-inv-bar--total { background: var(--inv-gradient); display: flex; justify-content: space-between; align-items: baseline; gap: 28px; min-width: 260px; }
.crm-inv-bar--total strong { font-size: 1.15rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.crm-inv-bank { display: grid; grid-template-columns: max-content 1fr; gap: 5px 20px; margin: 0; font-size: 0.88rem; }
.crm-inv-bank dt { color: var(--text-muted); }
.crm-inv-bank dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-inv-ref { background: var(--inv-tint); padding: 1px 8px; border-radius: 4px; display: inline-block; word-break: break-all; }
.crm-inv-thanks { font-weight: 600; padding-top: 14px; margin-bottom: 26px; position: relative; }
.crm-inv-thanks::before { content: ""; position: absolute; top: 0; left: 0; width: 220px; height: 1px; background: var(--text-muted); }
.crm-inv-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding-top: 14px; font-size: 0.8rem; color: var(--text-muted);
	background: linear-gradient(to right, var(--teal) 0 40px, var(--green) 40px 80px, var(--maroon) 80px 120px, var(--border) 120px) top / 100% 2px no-repeat; }
.crm-inv-foot > div { display: flex; align-items: center; gap: 8px; }
.crm-inv-foot svg { width: 18px; height: 18px; color: var(--ink); flex-shrink: 0; }
@media (max-width: 560px) {
	.crm-inv-title { font-size: 1.7rem; }
	.crm-inv-head { padding: 20px; }
	.crm-inv-meta, .crm-inv-bottom { flex-direction: column; }
	.crm-inv-ids { text-align: left; align-items: flex-start; }
	.crm-inv-pay, .crm-inv-bar--total { max-width: none; width: 100%; min-width: 0; }
	.crm-inv-col-no { display: none; }
	.crm-inv-lines thead th, .crm-inv-lines tbody td { padding: 7px 6px; }
}
@media print {
	.crm-invoice-doc { font-size: 10pt; }
	.crm-inv-lines tbody tr, .crm-inv-bottom, .crm-inv-foot { break-inside: avoid; }
}

/* Invoice line-items editor in the Add/Edit drawer. */
.crm-inv-items__row { display: grid; grid-template-columns: 1fr 56px 96px 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.crm-inv-items__row--head span { font-size: 0.72rem; color: var(--text-muted); }
.crm-inv-items__row input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 8px; color: var(--text); font: inherit; }
.crm-inv-items__add { margin-top: 4px; }

/* Overview "Needs your attention" list: one row per thing to do, with a
   status-tone dot (danger / warning / neutral) and a button to open it. */
.crm-attn { list-style: none; margin: 0; padding: 0; }
.crm-attn__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.crm-attn__item:last-child { border-bottom: none; }
.crm-attn__item > span { display: flex; align-items: center; gap: 10px; }
.crm-attn__item > span::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--status-neutral); }
.crm-attn__item--danger > span::before { background: var(--status-danger); }
.crm-attn__item--warning > span::before { background: var(--status-warning); }
.crm-attn__item .crm-btn { flex-shrink: 0; }

.crm-callout { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid #C98A1B; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; font-size: 0.9rem; }

.crm-bank-lines { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.crm-bank-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; padding: 4px 0; }

.crm-note-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.crm-note-row input { min-width: 220px; font: inherit; font-size: 0.8rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); }

.crm-payment-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 20px; font-size: 0.9rem; }
.crm-payment-facts dt { color: var(--text-muted); }
.crm-payment-facts dd { margin: 0; font-weight: 600; }
.crm-payment-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.crm-payment-section h4 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; }
.crm-payment-section textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); }