: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-remember { display: flex; align-items: center; gap: 10px; margin: -4px 0 18px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.75); cursor: pointer; user-select: none; }
.crm-login-remember input { width: 16px; height: 16px; margin: 0; accent-color: #fff; cursor: pointer; }
.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; flex-direction: column; min-height: 100vh; }

/* The nav: a bar along the top (logo, pages, sections as dropdowns, profile
   menu on the right). On phones it is the full-screen burger menu instead. */
.crm-sidebar {
	background: var(--ink);
	color: var(--paper);
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 20px;
	min-height: 58px;
	position: sticky;
	top: 0;
	z-index: 30;
}
.crm-sidebar .crm-logo { display: block; flex-shrink: 0; color: var(--paper); font-size: 1.15rem; letter-spacing: -1px; }
a.crm-logo { text-decoration: none; }
.crm-menu-close { display: none; position: absolute; top: 14px; right: 12px; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: none; color: var(--paper); border-radius: 8px; cursor: pointer; }
.crm-menu-close:hover { background: rgba(255, 255, 255, 0.08); }
.crm-menu-close svg { width: 24px; height: 24px; }
a.crm-logo:hover { opacity: 0.85; }
#crm-sidebar-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

.crm-nav-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.68);
	padding: 8px 11px;
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
}
.crm-nav-btn svg { flex-shrink: 0; width: 17px; height: 17px; }
a.crm-nav-btn { text-decoration: none; box-sizing: border-box; }
#crm-sidebar-nav > .crm-nav-btn .crm-count { display: none; }
/* A section (e.g. iamfredperry B.V.): a button that opens its pages as a
   dropdown. On phones it folds open and shut, with a −/+ on the right. */
.crm-nav-group { position: relative; }
.crm-nav-group__head { display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: rgba(255, 255, 255, 0.68); font: inherit; padding: 8px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.crm-nav-group__head svg { display: none; }
.crm-nav-group__head::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.crm-nav-group__head:hover, .crm-nav-group.is-open .crm-nav-group__head { background: rgba(255, 255, 255, 0.06); color: #fff; }
.crm-nav-group.has-active .crm-nav-group__head { background: rgba(255, 255, 255, 0.12); color: #fff; }
.crm-nav-group__items, .crm-profile__menu {
	display: none; position: absolute; top: calc(100% + 10px); min-width: 230px;
	background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius);
	padding: 6px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}
.crm-nav-group__items { left: 0; }
.crm-nav-group.is-open .crm-nav-group__items { display: block; }
/* The phone menu's remembered fold sets [hidden]; an open top-bar dropdown wins over it. */
.crm-nav-group.is-open .crm-nav-group__items[hidden] { display: block !important; }
.crm-nav-group__items .crm-nav-btn, .crm-profile__menu .crm-nav-btn { width: 100%; margin-bottom: 2px; }
.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; padding-left: 12px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; }

.crm-profile { position: relative; margin-left: auto; flex-shrink: 0; }
.crm-profile__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.crm-profile__btn:hover, .crm-profile__btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.18); }
.crm-profile__btn svg { width: 20px; height: 20px; }
.crm-profile__menu { right: 0; min-width: 200px; }
.crm-profile__btn.has-avatar { overflow: hidden; border-color: rgba(255, 255, 255, 0.4); }
.crm-profile__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-profile__initials { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
/* Profile page: the avatar with its buttons, then the details in two columns. */
.crm-profile-page { width: 100%; padding: 22px; }
.crm-profile-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.crm-profile-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 600; position: relative; cursor: pointer; }
.crm-profile-avatar input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.crm-profile-avatar__hint { position: absolute; inset: auto 0 0 0; padding: 5px 0 7px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.72rem; font-weight: 600; text-align: center; opacity: 0; transition: opacity 0.15s ease; }
.crm-profile-avatar:hover .crm-profile-avatar__hint, .crm-profile-avatar:focus-within .crm-profile-avatar__hint { opacity: 1; }
.crm-profile-avatar:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.crm-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crm-profile-avatar svg { width: 44px; height: 44px; }
.crm-profile-avatar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-profile-avatar-actions .crm-row-sub { flex-basis: 100%; margin: 0; }
.crm-profile-photos { margin: -6px 0 22px; }
.crm-profile-photos__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 0.88rem; }
.crm-profile-photos__row { display: flex; gap: 10px; flex-wrap: wrap; }
.crm-profile-photo { position: relative; width: 56px; height: 56px; }
.crm-profile-photo__pick { width: 100%; height: 100%; padding: 0; border: none; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--surface); box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px var(--border); }
.crm-profile-photo__pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-profile-photo.is-active .crm-profile-photo__pick { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--ink); }
.crm-profile-photo__delete { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: 0.85rem; line-height: 1; padding: 0; cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.crm-profile-photo:hover .crm-profile-photo__delete, .crm-profile-photo__delete:focus-visible { opacity: 1; }
.crm-profile-photo__delete:hover { color: var(--status-danger); border-color: var(--status-danger); }
@media (hover: none) { .crm-profile-photo__delete { opacity: 1; } }
.crm-profile-photo--add { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 50%; color: var(--text-muted); cursor: pointer; }
.crm-profile-photo--add:hover { border-color: var(--ink); color: var(--ink); }
.crm-profile-photo--add svg { width: 20px; height: 20px; }
/* Avatar crop popup. */
.crm-crop .crm-preview-modal__body { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.crm-crop__stage { width: 300px; height: 300px; max-width: 100%; aspect-ratio: 1; border-radius: 10px; background: #111; touch-action: none; cursor: grab; }
.crm-crop__stage:active { cursor: grabbing; }
.crm-crop__zoom { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; font-size: 0.82rem; color: var(--text-muted); }
.crm-crop__zoom input { flex: 1; accent-color: var(--ink); }
.crm-crop .crm-drawer-actions { width: 100%; }
.crm-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.crm-profile-actions { justify-content: flex-end; margin-top: 16px; }
.crm-profile-actions .crm-btn { flex: 0 0 auto; }
@media (max-width: 560px) { .crm-profile-grid { grid-template-columns: 1fr; } }
.crm-profile__menu:not([hidden]) { display: block; }
.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 11px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 0.82rem;
	text-decoration: none;
	box-sizing: border-box;
}
.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; }

/* Kitchen lists: a tablet-shaped drawing pad (dark rounded bezel, white
   "glass"), actions under it, and the Kitchen list below. */
.crm-kitchen { max-width: 760px; }
.crm-screen { background: #1c1c1c; border-radius: 26px; padding: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), inset 0 0 0 2px #2c2c2c; }
.crm-screen__glass { position: relative; background: #fff; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; }
.crm-screen__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.crm-screen__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c9c6c0; font-size: 1.4rem; pointer-events: none; }
.crm-screen__hint[hidden] { display: none; }
.crm-kitchen__actions { display: flex; align-items: center; gap: 8px; margin: 14px 0 20px; }
.crm-kitchen__status { flex: 1; font-size: 0.85rem; color: var(--text-muted); }
.crm-kitchen-item { align-items: center; }
.crm-kitchen-item > input[type="checkbox"] { width: 17px; height: 17px; margin: 0 4px 0 0; accent-color: var(--ink); flex-shrink: 0; cursor: pointer; }
.crm-kitchen-item__text { flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 6px; }
.crm-kitchen-item__text:hover { border-color: var(--border); }
.crm-kitchen-item__text:focus { border-color: var(--ink); background: var(--surface); outline: none; }
.crm-kitchen-item.is-done .crm-kitchen-item__text { color: var(--text-muted); text-decoration: line-through; }
.crm-kitchen__empty { margin: 4px 0 0; }
@media (max-width: 560px) { .crm-screen { padding: 10px; border-radius: 18px; } .crm-screen__glass { aspect-ratio: 4 / 3; } }

/* Lists page: one card per checklist. */
.crm-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.crm-list-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 12px; }
.crm-list-card__lock { display: inline-flex; color: var(--text-muted); }
.crm-list-card__lock svg { width: 13px; height: 13px; }
.crm-list-card__shared { padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); font-size: 0.72rem; font-weight: 600; line-height: 1.6; }
.crm-list-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.crm-list-card__name { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 0; font: inherit; font-weight: 600; font-size: 1rem; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.crm-list-card__name:hover { text-decoration: underline; }
.crm-list-items { list-style: none; margin: 0; padding: 0; }
.crm-list-item { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.crm-list-item label { flex: 1; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.9rem; min-width: 0; }
.crm-list-item input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--ink); flex-shrink: 0; cursor: pointer; }
.crm-list-item span { overflow-wrap: anywhere; }
.crm-list-item.is-done span { color: var(--text-muted); text-decoration: line-through; }
.crm-list-item__remove { flex-shrink: 0; width: 24px; height: 24px; border: none; background: none; color: var(--text-muted); font-size: 1.2rem; line-height: 1; border-radius: 5px; cursor: pointer; opacity: 0.5; }
.crm-list-item:hover .crm-list-item__remove, .crm-list-item__remove:focus-visible { opacity: 1; }
.crm-list-item__remove:hover { background: var(--surface); color: var(--text); }
.crm-list-add { display: flex; gap: 6px; margin-top: 8px; }
.crm-list-add .crm-btn { flex-shrink: 0; }
.crm-list-add input { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.crm-list-add input:focus { border-style: solid; }
.crm-list-card__icon { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 6px; background: var(--chip, var(--ink)); color: #fff; flex-shrink: 0; }
.crm-list-card__icon svg { width: 15px; height: 15px; }
.crm-list-card__name--fixed { cursor: default; }
.crm-list-card__name--fixed:hover { text-decoration: none; }
.crm-lists-hint { margin-top: 12px; }
.crm-lists--defaults { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-lists-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.crm-lists-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.crm-lists-section__head h3 { font-size: 1.05rem; }
.crm-lists-section--first { margin-top: 0; padding-top: 0; border-top: none; }
/* Reminders page: an add card (calendar tiles, title, date, time, weekly
   toggle, Add reminder), then a card listing the next 2 months by day. */
.crm-rem-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); }
.crm-rem-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
/* Add reminder popup: the form stacked, without its own card. */
.crm-rem-pop .crm-rem-form { flex-direction: column; align-items: stretch; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.crm-rem-pop .crm-rem-submit { align-self: flex-end; }
.crm-rem-tiles { display: flex; gap: 8px; }
.crm-rem-tile { width: 44px; height: 44px; border-radius: 10px; border: none; padding: 0; background: var(--chip, var(--ink)); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.55; box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 4px var(--border); }
.crm-rem-tile svg { width: 22px; height: 22px; }
.crm-rem-tile:hover { opacity: 0.85; }
.crm-rem-tile.is-selected { opacity: 1; box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--chip, var(--ink)); }
.crm-rem-input { font: inherit; font-size: 0.95rem; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); min-width: 0; }
.crm-rem-input--title { flex: 1 1 220px; }
.crm-rem-repeat { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.92rem; font-weight: 600; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer; white-space: nowrap; }
.crm-rem-repeat svg { width: 17px; height: 17px; }
.crm-rem-repeat.is-on { background: var(--chip, var(--ink)); border-color: var(--chip, var(--ink)); color: #fff; }
.crm-rem-submit { padding: 12px 18px; border-radius: 10px; }
.crm-rem-list { padding: 22px 20px 12px; }
.crm-rem-day { margin-bottom: 18px; }
.crm-rem-day__label { font-size: 1.02rem; margin: 0 0 8px; }
.crm-rem-day__label.is-today { color: var(--teal); }
.crm-rem-item { display: flex; align-items: stretch; width: 100%; min-height: 44px; margin-bottom: 6px; border: none; border-radius: 8px; overflow: hidden; padding: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer; background: color-mix(in srgb, var(--chip, var(--ink)) 16%, transparent); }
.crm-rem-item:hover { background: color-mix(in srgb, var(--chip, var(--ink)) 24%, transparent); }
.crm-rem-item__icon { flex-shrink: 0; width: 44px; display: flex; align-items: center; justify-content: center; background: var(--chip, var(--ink)); color: #fff; }
.crm-rem-item__icon svg { width: 20px; height: 20px; }
.crm-rem-item__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 0.98rem; overflow-wrap: anywhere; }
.crm-rem-item__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-rem-item__repeat { flex-shrink: 0; display: flex; align-items: center; padding: 0 14px; color: var(--chip, var(--ink)); }
.crm-rem-item__repeat svg { width: 17px; height: 17px; }
@media (max-width: 720px) {
	.crm-rem-card { padding: 14px; }
	.crm-rem-input--title { flex-basis: 100%; order: 1; }
	.crm-rem-tiles { order: 0; }
	.crm-rem-form input[type="date"], .crm-rem-form input[type="time"] { order: 2; flex: 1 1 130px; }
	.crm-rem-repeat { order: 3; flex: 1 1 auto; justify-content: center; }
	.crm-rem-submit { order: 4; flex: 1 1 100%; }
}
.crm-list-item__via { display: block; font-size: 0.74rem; color: var(--text-muted); }
/* Settings → API documentation popup. */
.crm-api-docs { font-size: 0.9rem; line-height: 1.55; }
.crm-api-keyform--company { flex-wrap: wrap; align-items: flex-end; }
.crm-api-keyform--company .crm-form-field { flex: 1 1 220px; margin: 0; }
.crm-api-docs h4 { font-size: 0.95rem; margin: 20px 0 6px; }
.crm-api-docs h4:first-of-type { margin-top: 14px; }
.crm-api-docs p { margin: 0 0 8px; }
.crm-api-docs code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.crm-api-code { margin: 0 0 10px; padding: 10px 12px; background: var(--ink); color: #fff; border-radius: 8px; overflow-x: auto; white-space: pre; }
.crm-api-code code { color: inherit; }
.crm-api-keys { list-style: none; margin: 0 0 10px; padding: 0; }
.crm-api-key { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.crm-api-key div { display: flex; flex-direction: column; min-width: 0; }
.crm-api-key.is-revoked strong { color: var(--text-muted); text-decoration: line-through; }
.crm-api-newkey { margin: 0 0 12px; padding: 12px; border: 1px solid var(--teal); border-radius: 8px; background: color-mix(in srgb, var(--teal) 8%, transparent); }
.crm-api-newkey .crm-api-code { white-space: pre-wrap; word-break: break-all; }
.crm-api-keyform { display: flex; gap: 6px; margin-bottom: 4px; }
.crm-api-keyform input { flex: 1; min-width: 0; font: inherit; font-size: 0.88rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
/* Food shopping page: the list card, a History button, then the history. */
.crm-shop-page { width: 100%; }
.crm-shop-page .crm-list-card__head { display: none; }
/* Tasks from this note (the notes popup's Tasks): each ticked action line, its chips and its task's state. */
/* A task's person and the note it came from (Tasks page, Next steps, a project's tasks). */
.crm-task-who { display: inline-flex; align-items: center; padding: 0 7px; border: none; border-radius: 999px; background: color-mix(in srgb, var(--teal) 16%, transparent); font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.55; color: var(--text); white-space: nowrap; }
button.crm-task-who { cursor: pointer; }
button.crm-task-who:hover { box-shadow: inset 0 0 0 1px var(--teal); }
.crm-task-from { display: inline; margin-left: 6px; padding: 0; border: none; background: none; font: inherit; font-size: 0.74rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.crm-proj-task-title .crm-task-from { display: block; margin: 2px 0 0; }
/* Tasks (and a project's tasks): tick, then @person · #project · From <meeting>, the task under them. */
.crm-task-item { align-items: flex-start; }
.crm-task-item > input[type="checkbox"] { margin-top: 3px; }
.crm-task-item__body { flex: 1; min-width: 0; }
.crm-task-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.crm-task-item__meta .crm-task-from { margin: 0; }
/* Ticking a task done: the small popup (No / Yes, then which note); and "Done: <note>" on the task. */
.crm-done-pop .crm-segmented { margin: 4px 0 14px; flex-wrap: wrap; }
.crm-done-pop .crm-done-pop__kinds button { padding: 8px 12px; font-size: 0.85rem; }
.crm-done-pop .crm-done-pop__note select { width: 100%; }
.crm-done-pop .crm-done-pop__open { margin-top: 8px; }
.crm-done-pop .crm-done-pop__open[hidden] { display: none; }
.crm-done-pop .crm-done-pop__make { margin-top: 10px; }
.crm-done-pop .crm-done-pop__make[hidden] { display: none; }
.crm-done-pop .crm-done-pop__make .crm-field-note { margin: 0 0 6px; }
.crm-done-pop .crm-done-pop__make .crm-segmented { margin: 0; }
.crm-task-from.crm-task-donenote { color: var(--teal); font-weight: 600; }
.crm-task-doneat { margin-top: 6px; font-size: 0.74rem; font-weight: 600; color: #2e9e4f; }
/* A done task: its completed notes and the related note / meeting, above when it was completed. */
.crm-task-item__done { margin-top: 6px; padding: 6px 10px; border-left: 3px solid #2e9e4f; background: color-mix(in srgb, #2e9e4f 7%, transparent); border-radius: 0 6px 6px 0; }
.crm-list-item.is-done .crm-task-item__done, .crm-list-item.is-done .crm-task-item__done * { text-decoration: none; color: var(--text); }
.crm-task-item__comment { margin: 0 0 4px; font-size: 0.86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-task-item__done .crm-task-from { margin: 0; }
.crm-list-item.is-done .crm-task-item__done .crm-task-donenote { color: var(--teal); }
.crm-done-pop textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9rem; }
.crm-done-pop input[type="datetime-local"] { width: 100%; box-sizing: border-box; }
.crm-task-item__text { margin-top: 4px; font-size: 0.9rem; }
/* The text: tap to change it (only the box ticks it done). */
.crm-task-item__text [data-task-text] { cursor: text; border-radius: 4px; }
.crm-task-item__text [data-task-text]:hover { background: var(--surface); box-shadow: 0 0 0 3px var(--surface); }
.crm-list-item input.crm-task-item__edit, .crm-task-item__edit { width: 100%; height: auto; margin: 0; cursor: text; accent-color: auto; box-sizing: border-box; font: inherit; font-size: 0.9rem; padding: 4px 8px; border: 1px solid var(--teal); border-radius: 6px; background: var(--surface); color: var(--text); }
/* The @ pill edited in place: its people as chips (× to take off), a box to type, a list under it. */
.crm-task-whoedit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; max-width: 100%; padding: 5px 7px; border: 1px solid var(--teal); border-radius: 8px; background: var(--surface); }
.crm-task-whoedit .crm-task-who { gap: 2px; padding: 2px 8px; }
.crm-task-whoedit .crm-task-who button { padding: 0 0 0 3px; border: none; background: none; font: inherit; line-height: 1; color: var(--text-muted); cursor: pointer; }
.crm-task-whoedit .crm-task-who button:hover { color: var(--status-danger); }
.crm-list-item .crm-task-whoedit input, .crm-task-whoedit input { flex: 1; width: auto; height: auto; margin: 0; cursor: text; min-width: 110px; padding: 2px 0; border: none; outline: none; background: none; font: inherit; font-size: 0.82rem; color: var(--text); }
ul.crm-task-whoedit__list { list-style: none; margin: 0; max-height: 240px; overflow-y: auto; }
/* The people editor's list: the ones added first, bold ("✓ added"). Over a note's @ chip it floats. */
.crm-mention-picker li.is-picked > span:first-child { font-weight: 700; }
.crm-mention-picker li.crm-picker-group { padding: 8px 8px 3px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); cursor: default; background: none; }
.crm-people-pop { position: absolute; z-index: 1000; }
.crm-people-pop .crm-task-whoedit { min-width: 260px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
/* A note opened from a task: its line flashes once. */
.crm-richtext__editor .crm-action-flash { animation: crm-action-flash 1.6s ease-out; border-radius: 4px; }
@keyframes crm-action-flash { 0%, 35% { background: color-mix(in srgb, #e8890c 26%, transparent); } 100% { background: transparent; } }
/* A project's tasks: the View's checklist, and the form's ✓ column. */
.crm-proj-checklist { margin: 4px 0 0; }
.crm-proj-rows__row input.crm-proj-rows__check { width: 18px; height: 18px; padding: 0; margin: 0; justify-self: center; align-self: center; accent-color: var(--ink); cursor: pointer; }
/* The add box: type a task with @ person and # (task or project); one line per task. */
.crm-task-compose { min-height: 44px; margin: 0 0 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 7px; background: var(--surface); font-size: 0.95rem; line-height: 1.7; color: var(--text); outline: none; cursor: text; overflow-wrap: anywhere; }
.crm-task-compose:focus { border-style: solid; border-color: var(--teal); }
/* Project popup → Tasks: like the Tasks page. */
.crm-ptasks > label { display: none; }
/* Inside the popup's form the field styles would make every box full width: undo them here. */
.crm-ptasks .crm-list-item > input[type="checkbox"] { width: 17px; height: 17px; padding: 0; margin: 3px 0 0; border: none; background: none; flex-shrink: 0; }
.crm-ptasks .crm-list-item label.crm-ptasks__due { position: relative; flex: none; display: inline-flex; margin: 0; font-size: 0.78rem; color: inherit; cursor: pointer; }
.crm-ptasks__due input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none; opacity: 0; cursor: pointer; }
.crm-ptasks .crm-task-item__body { flex: 1; min-width: 0; }
.crm-ptasks .crm-task-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crm-ptasks__edit { width: 100%; box-sizing: border-box; font: inherit; padding: 4px 8px; border: 1px solid var(--teal); border-radius: 6px; }
.crm-ptasks__list { margin-top: 4px; }
.crm-task-add .crm-task-compose { min-height: 110px; }
.crm-task-add .crm-preview-modal__body { padding: 16px 20px 20px; }
.crm-task-compose:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
/* Which tasks (#Tasks / #ProjectTasks / #AllTasks) and whose, under the To do / Done tabs. */
.crm-tasks__filters { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.crm-tasks__scope .crm-email-tab { padding: 5px 11px; font-size: 0.82rem; }
/* The people filter before the # buttons: the Projects page's search bar look, with @ chips inside. */
.crm-tasks__filters { justify-content: flex-start; }
.crm-tasks__filters > .crm-search { flex: 1 1 260px; min-width: 200px; margin: 0; }
/* Linked tasks: each linked meeting as another "From", × to unlink; Link on a task from a note line. */
.crm-task-linked { display: inline-flex; align-items: center; gap: 2px; }
.crm-task-unlink { padding: 0 3px; border: none; background: none; font: inherit; font-size: 0.85rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.crm-task-unlink:hover { color: var(--status-danger); }
.crm-task-link { padding: 0 7px; border: 1px dashed var(--border); border-radius: 999px; background: none; font: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1.55; color: var(--text-muted); cursor: pointer; }
.crm-task-link:hover { border-style: solid; border-color: var(--teal); color: var(--text); }
.crm-task-linker input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.crm-task-linker__list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.crm-task-linker__list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: none; border-top: 1px solid var(--border); background: none; font: inherit; font-size: 0.9rem; color: var(--text); text-align: left; cursor: pointer; }
.crm-task-linker__list li:first-child button { border-top: none; }
.crm-task-linker__list button:hover { background: var(--surface); }
.crm-task-linker__list button.is-done > span:first-child { color: var(--text-muted); text-decoration: line-through; }
/* #AllTasks / #ProjectTasks: a heading for Tasks and each project, with a break above each but the first. */
.crm-list-items .crm-task-group { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 2px; padding: 0 0 6px; border-bottom: 2px solid var(--border); list-style: none; }
.crm-list-items .crm-task-group:first-child { margin-top: 4px; }
.crm-task-group__title { font-size: 0.98rem; font-weight: 700; }
.crm-tasks__donebtn { display: block; margin: 16px auto 4px; }
.crm-tasks__done { margin-top: 6px; }
.crm-task-group button { padding: 0; border: none; background: none; font: inherit; font-size: 0.98rem; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; }
.crm-task-group button:hover { text-decoration: underline; }
/* Tasks page: the full width of the page, the add box at the top. */
.crm-tasks { width: 100%; }
.crm-tasks .crm-list-card { display: flex; flex-direction: column; }
.crm-tasks .crm-list-card__head { display: none; }
.crm-tasks .crm-list-add { order: -1; margin: 0 0 10px; }
.crm-tasks .crm-list-add input { font-size: 0.95rem; padding: 10px 12px; }
.crm-list-item__bin { display: inline-flex; align-items: center; justify-content: center; font-size: 0; }
.crm-list-item__bin svg { width: 16px; height: 16px; }
.crm-shop-item { align-items: center; gap: 8px; padding: 8px 0; }
.crm-shop-item__text { flex: 1; min-width: 0; font-size: 0.95rem; cursor: pointer; border-radius: 5px; }
.crm-shop-item__text:hover { text-decoration: underline; text-decoration-color: var(--border); }
.crm-shop-item__text:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm-shop-item.is-done .crm-list-item__via { text-decoration: none; }
/* The tick (bought) matches the bin: a plain 16px line icon in a 30px button. */
.crm-shop-tick, .crm-shop-item .crm-list-item__bin { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 5px; background: none; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; opacity: 0.7; }
.crm-shop-tick svg { width: 16px; height: 16px; }
.crm-shop-tick:hover { opacity: 1; background: var(--surface); color: var(--teal); }
.crm-shop-item .crm-list-item__bin:hover { opacity: 1; background: var(--surface); color: var(--text); }
.crm-shop-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-shop-filter { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.88rem; font-weight: 600; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.crm-shop-filter span { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
.crm-shop-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-shop-filter.is-active span { color: rgba(255, 255, 255, 0.7); }
.crm-shop-filter--new { border-style: dashed; color: var(--text-muted); font-weight: 400; }
.crm-shop-filter--new svg { width: 14px; height: 14px; }
.crm-shop-group-title { display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 0 0 10px; font-size: 1.15rem; }
/* The bin sits at the far right, in line with the list's own bins. */
.crm-shop-group-title__delete { margin-left: auto; width: 30px; height: 30px; opacity: 0.6; }
.crm-shop-group-title__delete svg { width: 16px; height: 16px; }
.crm-shop-group-title__delete:hover { opacity: 1; color: var(--status-danger); }
.crm-shop-group-title button { font: inherit; font-weight: 600; color: var(--text); background: none; border: none; padding: 2px 4px; margin-left: -4px; border-radius: 6px; cursor: text; }
.crm-shop-group-title button:hover { background: var(--surface); }
.crm-shop-group-title__input { width: 220px; max-width: 60%; margin: 0; font: inherit; font-size: 1rem; font-weight: 600; padding: 3px 8px; border: 1px solid var(--ink); border-radius: 6px; background: var(--surface-2); color: var(--text); box-sizing: border-box; }
.crm-shop-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 0.72rem; color: var(--text-muted); vertical-align: middle; }
.crm-shop-ask { display: flex; flex-direction: column; gap: 8px; }
.crm-shop-ask__choice { font: inherit; font-size: 0.95rem; font-weight: 600; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.crm-shop-ask__choice:hover, .crm-shop-ask__choice:focus-visible { border-color: var(--ink); outline: none; }
.crm-shop-history-btn { margin-top: 12px; width: 100%; justify-content: center; }
.crm-shop-history { margin-top: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 14px; }
.crm-shop-history ul { list-style: none; margin: 0; padding: 0; }
.crm-shop-history__row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.crm-shop-history__row:last-child { border-bottom: none; }
.crm-shop-history__action { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; text-transform: lowercase; }
.crm-shop-history__action svg { width: 13px; height: 13px; }
.crm-shop-history__action.is-bought { color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); }
.crm-shop-history__action.is-removed { color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 10%, transparent); }
.crm-shop-history__text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.crm-shop-history__when { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.crm-shop-history__time { font-size: 0.74rem; }
.crm-shop-history__back { flex-shrink: 0; }
@media (max-width: 720px) { .crm-lists--defaults { grid-template-columns: 1fr; } }
/* In-CRM confirmation popup (crmConfirm). */
.crm-btn--danger { background: var(--status-danger); border: 1px solid var(--status-danger); color: #fff; }
.crm-btn--danger:hover { filter: brightness(1.08); }
.crm-preview-modal.crm-confirm { width: min(92vw, 400px); max-width: 400px; padding: 22px 22px 18px; }
.crm-confirm__msg { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.5; overflow-wrap: anywhere; }
/* Delete confirm: type the 6-digit code to enable the red Delete button. */
.crm-confirm--delete .crm-confirm__msg { margin-bottom: 10px; }
.crm-confirm__code { margin: 0 0 10px; font-size: 0.9rem; color: var(--text-muted); }
.crm-confirm__code strong { color: var(--text); font-size: 1.05rem; letter-spacing: 0.18em; }
.crm-confirm__input { width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 1.1rem; letter-spacing: 0.2em; text-align: center; }
.crm-confirm__input:focus { outline: none; border-color: var(--teal); }
/* Record popup delete: a red button the full width of the popup, at the bottom. */
.crm-drawer-delete { display: block; width: 100%; margin-top: 18px; }
.crm-confirm .crm-drawer-actions { margin-top: 0; }
.crm-list-clear { margin-top: 8px; background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }

/* Dashboard: the next 7 days as day columns (stacked on narrow screens). */
/* Dashboard: the next 7 days as a column of day cards (name left, date
   right), each event a one-line row with a calendar-colour block in front. */
.crm-dash-week { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.crm-dash-day { background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0; }
.crm-dash-day:hover { border-color: var(--border); }
.crm-dash-day:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm-dash-day.is-today { border-color: var(--ink); }
.crm-dash-day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.crm-dash-day__name { font-weight: 600; font-size: 1.05rem; }
.crm-dash-day__date { font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; }
.crm-dash-day__empty { font-size: 0.92rem; color: var(--text-muted); }
.crm-dash-event { display: flex; align-items: stretch; width: 100%; min-height: 34px; text-align: left; border: none; background: color-mix(in srgb, var(--chip, var(--teal)) 11%, transparent); border-radius: 6px; padding: 0; font: inherit; color: var(--text); cursor: pointer; overflow: hidden; }
.crm-dash-event:hover { background: color-mix(in srgb, var(--chip, var(--teal)) 20%, transparent); }
.crm-dash-event__icon { flex-shrink: 0; width: 30px; display: flex; align-items: center; justify-content: center; background: var(--chip, var(--teal)); color: #fff; }
.crm-dash-event__icon svg { width: 18px; height: 18px; }
.crm-dash-event__body { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 7px 12px; min-width: 0; }
.crm-dash-event__time { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-dash-event__title { font-size: 0.92rem; overflow-wrap: anywhere; }
.crm-dash-event__meta { flex-basis: 100%; font-size: 0.78rem; color: var(--text-muted); overflow-wrap: anywhere; }

/* Calendar: month grid (Mon-Sun) plus a list of the month's events. Each
   event takes its calendar's colour through --chip. */
.crm-cal-list__dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.crm-cal-list__icon { display: inline-flex; flex-shrink: 0; align-self: center; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; color: #fff; }
.crm-cal-list__icon svg { width: 12px; height: 12px; }
.crm-cal-sources { padding: 14px 18px; }
.crm-cal-sources__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-cal-sources__link { background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.crm-cal-sources__head .crm-cal-sources__link:first-of-type { margin-left: auto; }
.crm-cal-sources__link:hover { color: var(--text); }
.crm-cal-sources__list { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-cal-source { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; cursor: pointer; background: var(--surface); }
.crm-cal-source input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.crm-cal-source__swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.crm-cal-source { padding: 0 4px 0 12px; }
.crm-cal-source__open { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; font: inherit; color: inherit; padding: 6px 8px 6px 2px; cursor: pointer; border-radius: 999px; }
.crm-cal-source__open:hover { text-decoration: underline; }
/* Calendar groups: a slim title bar (checkbox, name, count, and a −/+
   button on the right that folds the section), body indented beneath. */
.crm-cal-group { margin-top: 12px; }
.crm-cal-group__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 6px 5px 12px; }
.crm-cal-group__head { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; min-width: 0; }
.crm-cal-group__head input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); cursor: pointer; flex-shrink: 0; }
.crm-cal-group__fold { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
.crm-cal-group__fold:hover { background: var(--surface-2); color: var(--text); }
.crm-cal-group__fold svg { width: 16px; height: 16px; }
.crm-cal-group__body { padding: 10px 0 0 25px; }
.crm-cal-group__body > .crm-cal-group { margin-top: 10px; }
.crm-cal-group__body > .crm-cal-group > .crm-cal-group__bar { background: transparent; border-style: dashed; }
.crm-cal-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-cal-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-cal-icon-choice { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.crm-cal-icon-choice svg { width: 22px; height: 22px; }
.crm-cal-icon-choice.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2); }
.crm-cal-swatch { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.crm-cal-swatch.is-selected { border-color: var(--surface-2); outline: 2px solid var(--ink); }
.crm-cal-swatch--none { background: repeating-linear-gradient(135deg, var(--surface) 0 5px, var(--border) 5px 6px); }
.crm-row-name--tile { display: flex; align-items: center; gap: 8px; }
.crm-cell-desc { min-width: 220px; max-width: 420px; font-size: 0.86rem; color: var(--text-muted); line-height: 1.45; white-space: normal; }
.crm-cal-swatch--custom { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: conic-gradient(#e67c73, #f6bf26, #33b679, #039be5, #8e24aa, #e67c73); }
.crm-cal-swatch--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
.crm-cal-sources--connect { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.crm-cal-sources--connect p { margin: 4px 0 0; max-width: 560px; }
.crm-cal-where { display: block; margin: -6px 0 16px; padding-top: 0; border-top: none; line-height: 1.5; }
.crm-cal-where .crm-cal-list__dot { margin-right: 6px; }

.crm-cal-nav { display: flex; gap: 6px; }
/* Settings: a button per section; only the chosen section shows. */
.crm-settings-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.crm-settings-tab { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.crm-settings-tab:hover { border-color: var(--ink); }
.crm-settings-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-btn--icon-only { padding-left: 9px; padding-right: 9px; display: inline-flex; align-items: center; }
.crm-btn--icon-only svg { width: 16px; height: 16px; }
.crm-cal { overflow: hidden; }
.crm-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.crm-cal-grid--head div { padding: 10px 8px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.crm-cal-day { min-height: 108px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; }
.crm-cal-day:nth-child(7n) { border-right: none; }
.crm-cal-day:hover { background: var(--surface); }
.crm-cal-day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.crm-cal-day.is-other-month { background: var(--surface); }
.crm-cal-day.is-other-month .crm-cal-day__num { color: var(--status-neutral); }
.crm-cal-day__num { font-size: 0.8rem; font-weight: 600; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
/* Today: a light black-to-white gradient over the whole square and a black date circle. */
.crm-cal-day.is-today { background: linear-gradient(180deg, rgba(28, 28, 28, 0.12) 0%, rgba(28, 28, 28, 0.03) 60%, #fff 100%); }
.crm-cal-day.is-today .crm-cal-day__num { background: var(--ink); color: #fff; }
.crm-cal-chip { display: block; width: 100%; text-align: left; border: none; border-left: 3px solid var(--chip, var(--teal)); background: color-mix(in srgb, var(--chip, var(--teal)) 11%, transparent); color: var(--text); font: inherit; font-size: 0.74rem; padding: 3px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.crm-cal-chip:hover { background: color-mix(in srgb, var(--chip, var(--teal)) 20%, transparent); }
.crm-cal-chip.is-allday { background: var(--chip, var(--teal)); color: #fff; border-left-color: var(--chip, var(--teal)); }
.crm-cal-dash-toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 0.9rem; cursor: pointer; }
.crm-cal-dash-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
/* Event popup: the Calendar picker, each calendar as a colour tile with its white icon. */
.crm-cal-tile { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--chip, var(--ink)); color: #fff; vertical-align: middle; }
.crm-cal-tile svg { width: 15px; height: 15px; }
.crm-cal-where .crm-cal-tile { margin-right: 8px; }
.crm-cal-picker { position: relative; }
/* Every dropdown (enhanceSelect): the tile dropdown's look; inline ones keep their width. */
select.crm-select-native { display: none !important; }
.crm-select[hidden] { display: none; }
.crm-flag { display: inline-flex; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.crm-flag svg { width: 100%; height: 100%; display: block; }
.crm-select { display: inline-block; vertical-align: middle; max-width: 100%; }
.crm-select.is-full { display: block; width: 100%; }
.crm-select .crm-cal-picker__list { min-width: 100%; width: max-content; max-width: min(92vw, 420px); }
.crm-select.is-full .crm-cal-picker__list { width: auto; max-width: none; }
.crm-select__ask { text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 500; padding: 6px 8px 4px; }
.crm-select .crm-cal-picker__option[disabled] { opacity: 0.45; cursor: default; }
.crm-cal-picker__button:disabled { opacity: 0.55; cursor: not-allowed; }
.crm-cal-picker__button.is-invalid { border-color: var(--status-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-danger) 20%, transparent); }
.crm-cal-picker__button { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 0.9rem; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); cursor: pointer; }
.crm-cal-picker__button > span:not(.crm-cal-tile) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-cal-picker__caret { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.crm-cal-picker__list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16); padding: 6px; }
.crm-cal-picker__group { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 8px 8px 4px; }
.crm-cal-picker__option { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 0.9rem; text-align: left; padding: 7px 8px; border: none; border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.crm-cal-picker__option:hover, .crm-cal-picker__option:focus-visible { background: var(--surface); outline: none; }
.crm-cal-picker__option[aria-selected="true"] { background: var(--surface); font-weight: 600; }
.crm-tungo-fields { margin: 6px 0 4px; }

.crm-tungo-fields[hidden] { display: none; }
.crm-tungo-fields__note { margin: 0 0 14px; }
.crm-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.crm-date-grid.is-single .crm-date-grid__start { grid-column: 1 / -1; }
.crm-date-grid .crm-date-grid__full { grid-column: 1 / -1; margin-bottom: 16px; }
/* All day keeps its place in the grid but drops the grey box. */
.crm-date-grid .crm-monthly-split.crm-date-grid__full { background: none; border: none; padding: 0; border-radius: 0; }
.crm-date-grid > [hidden] { display: none; }
.crm-date-span { display: flex; gap: 18px; margin: 0 0 14px; flex-wrap: wrap; }
.crm-date-span[hidden] { display: none; }
.crm-date-span label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.crm-date-span input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
/* Event popup: Location choices and the Setup Meeting box (Online meeting). */
.crm-loc-other { margin-top: 8px; }
.crm-loc-map { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.crm-loc-map[hidden] { display: none; }
.crm-loc-map iframe { display: block; width: 100%; height: 200px; border: 0; }
.crm-loc-map a { display: block; padding: 7px 10px; font-size: 0.82rem; border-top: 1px solid var(--border); }
.crm-meet-setup { margin: -4px 0 16px; }
.crm-meet-setup[hidden] { display: none; }

.crm-meet-option { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 8px; cursor: pointer; }
.crm-meet-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.crm-meet-option input:disabled + * , .crm-meet-option:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
.crm-meet-other-link { width: 100%; margin: 0 0 10px; font: inherit; font-size: 0.9rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); box-sizing: border-box; }
.crm-meet-note { margin: 0 0 10px; padding-top: 0; border-top: none; }
.crm-meet-guests { margin: 6px 0 10px; }
.crm-meet-guest-add { display: flex; gap: 6px; }
.crm-meet-guest-add input { flex: 1; min-width: 0; }
.crm-meet-guest-plus { flex-shrink: 0; width: 40px; padding: 0; justify-content: center; }
.crm-meet-guest-plus svg { width: 18px; height: 18px; }
.crm-meet-guest-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.crm-meet-guest-list:empty { display: none; }
.crm-meet-guest { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.84rem; max-width: 100%; }
.crm-meet-guest span { overflow-wrap: anywhere; }
.crm-meet-guest--self { padding-right: 10px; background: var(--surface); color: var(--text-muted); border-style: dashed; }
.crm-meet-guest button { width: 22px; height: 22px; border: none; border-radius: 50%; background: none; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; }
.crm-meet-guest button:hover { background: var(--surface); color: var(--status-danger); }
.crm-meet-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.crm-meet-link__url { flex: 1; min-width: 0; font-size: 0.86rem; overflow-wrap: anywhere; }
.crm-search { display: flex; gap: 8px; margin: 0 0 14px; }
.crm-search input { width: 100%; font: inherit; font-size: 0.95rem; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); box-sizing: border-box; }
.crm-search input { flex: 1; min-width: 0; width: auto; }
.crm-filter { position: relative; flex-shrink: 0; }
.crm-filter > .crm-btn { height: 100%; }
.crm-filter > .crm-btn svg { width: 16px; height: 16px; }
.crm-filter__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.72rem; }
.crm-filter__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); }
.crm-filter__menu[hidden] { display: none; }
/* The standard search: the Filter button as an icon at the end of the box (with its count). */
.crm-search--inline { position: relative; }
.crm-search--inline input { padding-right: 64px; }
.crm-search--inline .crm-filter { position: absolute; top: 4px; right: 4px; bottom: 4px; }
.crm-search--inline .crm-filter > .crm-btn { gap: 5px; padding: 0 10px; border: 0; background: none; color: var(--text-muted); }
.crm-search--inline .crm-filter > .crm-btn:hover, .crm-search--inline .crm-filter > .crm-btn[aria-expanded="true"] { color: var(--text); background: var(--surface); }
.crm-search--inline [data-filter-toggle] > span:first-of-type { display: none; }
.crm-sbar-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-sbar-btns .crm-email-tab { flex: 1; padding: 6px 8px; font-size: 0.82rem; }
.crm-filter__menu .crm-form-field { margin-bottom: 12px; }
.crm-contact-row { display: flex; gap: 8px; }
.crm-contact-row select { flex: 1; min-width: 0; }
.crm-contact-row .crm-btn { flex-shrink: 0; white-space: nowrap; }
.crm-quick-contact { z-index: 70; }
.crm-quick-contact__at { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-top: 0; border-top: none; }
/* Two fields side by side (e.g. a contact's first and last name). */
.crm-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
/* A pair of choice buttons (e.g. Personal / Business). */
.crm-segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.crm-segmented button { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 8px 18px; border: none; background: var(--surface); color: var(--text); cursor: pointer; }
.crm-segmented button + button { border-left: 1px solid var(--border); }
.crm-segmented button.is-active { background: var(--ink); color: #fff; }
/* Event status (CRM-only): the round button on the right of each event, and its popup. */
.crm-ev-tick { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 8px 0 auto; border-radius: 50%; border: 2px solid var(--border); background: var(--surface-2); color: #fff; cursor: pointer; box-sizing: border-box; }
.crm-ev-tick:hover, .crm-ev-tick:focus-visible { border-color: var(--teal); outline: none; }
.crm-ev-tick svg { width: 12px; height: 12px; }
.crm-ev-tick.is-completed { background: #2e9e4f; border-color: #2e9e4f; }
.crm-ev-tick.is-cancelled { background: var(--status-danger); border-color: var(--status-danger); }
.crm-ev-tick.is-outstanding { background: #e8890c; border-color: #e8890c; }
.crm-ev-tick.is-outstanding svg { width: 16px; height: 16px; }
/* A meeting invite (think@) waiting for your reply: a white ? on blue. */
.crm-ev-tick.is-invite { background: #2f6fd6; border-color: #2f6fd6; }
.crm-ev-tick.is-invite svg { width: 16px; height: 16px; }
/* Dashboard → Outstanding: invites to reply to, above the 7 days. */
.crm-dash-outstanding { cursor: default; }
.crm-dash-outstanding:hover { border-color: transparent; }
.crm-dash-outstanding.has-items, .crm-dash-outstanding.has-items:hover { border-color: #2f6fd6; }
.crm-ev-invite__from { margin: -8px 0 14px; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.crm-ev-tick.has-link { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px var(--text-muted); }
.crm-dash-event .crm-dash-event__body { flex: 1; }
.crm-cal-list__item .crm-cal-list__title { flex: 1; }
.crm-dash-event.is-cancelled .crm-dash-event__title, .crm-cal-list__item.is-cancelled .crm-cal-list__title { text-decoration: line-through; color: var(--text-muted); }
.crm-ev-status__when { margin: 0 0 14px; }
.crm-ev-status__label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.crm-ev-status__choices { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.crm-ev-choice { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.9rem; font-weight: 600; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
.crm-ev-choice .crm-ev-tick { margin: 0; pointer-events: none; }
.crm-ev-choice.is-chosen { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2); }
.crm-ev-open { margin-top: 8px; }
.crm-invite-recent { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.84rem; }
.crm-invite-recent li { padding: 4px 0; border-top: 1px dashed var(--border); }
.crm-invite-recent li > span:first-child { font-weight: 600; margin-right: 4px; }
.crm-ev-status__buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.crm-ev-status__buttons .crm-btn[hidden] { display: none; }
.crm-ev-reminder .crm-ev-open { display: none; }
.crm-ev-note textarea { width: 100%; box-sizing: border-box; }
.crm-ev-outcome__note { margin-bottom: 10px; }
.crm-ev-outcome__note p { margin: 4px 0 0; font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-ev-outcome { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.crm-ev-outcome h4 { font-size: 0.9rem; margin: 0 0 10px; }
.crm-ev-outcome__row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.92rem; }
.crm-ev-outcome__row .crm-ev-tick { margin: 0; cursor: default; }
.crm-ev-outcome__kind { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.crm-ev-outcome__title { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
/* Dashboard → Next 7 days and the Calendar's list: the status circle only shows the status; a tap opens the event (its popup sets it). */
.crm-ev-tick.is-still { cursor: inherit; pointer-events: none; }
/* There, it fills the event's right end (as the calendar block on the left), the icon in the middle; no status, no block. */
.crm-dash-event .crm-ev-tick.is-still { align-self: stretch; width: 30px; height: auto; margin: 0 0 0 auto; border: none; border-radius: 0; box-shadow: none; }
.crm-dash-event .crm-ev-tick.is-still svg { width: 16px; height: 16px; }
.crm-dash-event .crm-ev-tick.is-still:not(.is-completed):not(.is-cancelled):not(.is-outstanding):not(.is-invite) { display: none; }
.crm-ev-outcome .crm-ev-status__choices { margin-bottom: 12px; }
.crm-ev-outcome .crm-ev-note { margin-bottom: 4px; }
.crm-ev-outcome__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.crm-ev-outcome__actions:empty { display: none; }
.crm-ev-outcome__actions .crm-btn[hidden] { display: none; }
.crm-ev-outcome__select { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); }
/* Calendar: month controls in a row directly above the grid. */
.crm-cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.crm-cal-toolbar__month { flex: 1; font-size: 1.05rem; }
.crm-cal-chip__time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crm-cal-chip.has-icon { display: flex; align-items: stretch; padding: 0; border-left: none; }
.crm-cal-chip__icon { flex-shrink: 0; width: 18px; display: flex; align-items: center; justify-content: center; background: var(--chip, var(--teal)); color: #fff; }
.crm-cal-chip__icon svg { width: 12px; height: 12px; }
.crm-cal-chip__text { flex: 1; min-width: 0; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; }
.crm-cal-chip.is-allday .crm-cal-chip__icon { background: color-mix(in srgb, var(--chip, var(--teal)) 75%, #000); }
.crm-cal-more { font-size: 0.72rem; color: var(--text-muted); padding-left: 4px; }
.crm-cal-dots { display: none; gap: 3px; justify-content: center; }
.crm-cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.crm-cal-list__day { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.crm-cal-list__day:last-child { border-bottom: none; }
.crm-cal-list__date { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
.crm-cal-list__day.is-today .crm-cal-list__date { color: var(--teal); }
.crm-cal-list__item { display: flex; gap: 14px; width: 100%; text-align: left; background: none; border: none; font: inherit; color: var(--text); padding: 6px 8px; margin: 0 -8px; border-radius: 6px; cursor: pointer; }
.crm-cal-list__item:hover { background: var(--surface); }
.crm-cal-list__more { padding: 10px 18px; border-bottom: 1px solid var(--border); }
.crm-cal-list__time { display: inline-flex; align-items: baseline; gap: 8px; flex-shrink: 0; width: 160px; font-size: 0.84rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crm-cal-list__title { display: flex; flex-direction: column; font-weight: 600; font-size: 0.9rem; min-width: 0; }
.crm-cal-list__title .crm-row-sub { font-weight: 400; }
@media (max-width: 720px) {
	/* Phones: like Google Calendar's month widget: the date centred, then up to three solid colour
	   bars with the title in white (clipped, no time or icon), "•••" when there are more. */
	.crm-cal-day { min-height: 92px; padding: 4px 2px 6px; gap: 2px; align-items: stretch; }
	.crm-cal-day__num { align-self: center; font-size: 0.82rem; font-weight: 500; margin-bottom: 1px; }
	.crm-cal-chip, .crm-cal-chip.is-allday, .crm-cal-chip.has-icon { display: block; border: none; border-radius: 4px; padding: 2px 3px; background: var(--chip, var(--teal)); color: #fff; font-size: 0.62rem; line-height: 1.25; text-overflow: clip; }
	.crm-cal-chip:hover { background: var(--chip, var(--teal)); }
	.crm-cal-chip__time, .crm-cal-chip__icon { display: none; }
	.crm-cal-chip.has-icon .crm-cal-chip__text { display: block; padding: 0; text-overflow: clip; }
	.crm-cal-more { display: block; font-size: 0; line-height: 1; padding: 2px 0 0 3px; }
	.crm-cal-more::before { content: "•••"; font-size: 0.7rem; letter-spacing: 1px; color: var(--text-muted); }
	.crm-cal-dots { display: none; }
	.crm-cal-grid--head div { text-align: center; padding: 8px 2px; }
	.crm-cal-list__time { width: 96px; font-size: 0.78rem; }
}

/* Settings page rows: icon, label + explanation, action on the right. */
.crm-setting-row { display: flex; align-items: center; gap: 16px; padding: 18px; }
/* macOS-style app tile for the iafp_ mark: rounded-square with the Mac's
   ~22.5% corner radius, a soft ink gradient, a top-edge highlight and a
   layered drop shadow, like an icon sitting in the Dock. */
.crm-app-icon {
	position: relative; flex-shrink: 0; width: 96px; height: 96px; border-radius: 22.5%;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, #3a3a3a 0%, #1C1C1C 55%, #111 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 18px rgba(0, 0, 0, 0.22);
}
.crm-app-icon::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 45%);
}
.crm-app-icon span { color: #fff; font-size: 1.6rem; font-weight: 600; letter-spacing: -1px; line-height: 1; }
/* Settings → Security (two-factor authentication). */
.crm-setting-glyph { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.crm-setting-glyph.is-on { background: color-mix(in srgb, var(--teal) 10%, transparent); border-color: var(--teal); color: var(--teal); }
.crm-setting-glyph svg { width: 26px; height: 26px; }
.crm-setting-row__action--stack { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.crm-tfa-step { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.crm-tfa-step p { color: var(--text-muted); }
.crm-tfa-setup { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.crm-tfa-qr { background: #fff; padding: 10px; border: 1px solid var(--border); border-radius: 10px; line-height: 0; min-width: 165px; min-height: 165px; }
.crm-tfa-secret { display: inline-block; margin-top: 6px; font-size: 0.95rem; letter-spacing: 0.06em; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; word-break: break-all; }
.crm-tfa-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.crm-tfa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.crm-tfa-code { width: 140px; font: inherit; font-size: 1.05rem; letter-spacing: 0.15em; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; color: var(--text); }
.crm-tfa-codes { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-width: 520px; }
.crm-tfa-codes li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; text-align: center; }

/* Settings panels let the icon's tooltip show outside the row. */
.crm-panel:has(.crm-setting-row) { overflow: visible; }
/* Clickable version (only when the browser can install): lifts on hover
   like a Dock icon, with a "Click to install" tooltip above it. */
.crm-app-icon--install { border: none; padding: 0; font: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.crm-app-icon--install:hover, .crm-app-icon--install:focus-visible { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.18), 0 14px 26px rgba(0, 0, 0, 0.28); }
.crm-app-icon--install:active { transform: translateY(0); }
.crm-app-icon--install::before {
	content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
	background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap; padding: 5px 10px; border-radius: 6px;
	opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 2;
}
.crm-app-icon--install:hover::before, .crm-app-icon--install:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.crm-setting-row__text { flex: 1; min-width: 0; }
.crm-setting-row__text strong { font-weight: 600; }
.crm-setting-row__text p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.88rem; max-width: 560px; }
.crm-setting-row__text .crm-setting-row__status { color: var(--text); font-weight: 600; font-size: 0.84rem; margin-top: 8px; }
.crm-setting-row__action { flex-shrink: 0; }
.crm-setting-row__install { margin-top: 12px; }
.crm-setting-row__install .crm-btn { display: inline-flex; align-items: center; gap: 6px; }
.crm-setting-row__install svg { width: 15px; height: 15px; }
.crm-setting-row__action .crm-btn { display: inline-flex; align-items: center; gap: 6px; }
.crm-setting-row__action svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
	.crm-setting-row { flex-wrap: wrap; }
	.crm-app-icon { width: 72px; height: 72px; }
	.crm-app-icon span { font-size: 1.2rem; }
	.crm-setting-row__action { width: 100%; }
	.crm-setting-row__action .crm-btn { width: 100%; justify-content: center; }
}

.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-panel > .crm-search { margin: 14px 18px 4px; }

.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); }
/* Add / edit event: the drawer as a centred popup. */
.crm-overlay--popup { justify-content: center; align-items: center; padding: 20px; }
.crm-drawer--popup { max-width: 520px; height: auto; max-height: 90vh; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); }
.crm-drawer--popup-wide { max-width: 780px; }
.crm-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
/* Save changes at the top of a popup, beside the ×. */
.crm-drawer__head > .crm-drawer__save { margin-left: auto; margin-right: 10px; }
.crm-drawer__head h3 { font-size: 1.1rem; }
.crm-drawer > .crm-drawer__head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The same header inside a popup (invoice View, Edit calendar) gets the popup's own padding. */
.crm-preview-modal > .crm-drawer__head { padding: 20px 22px 0; margin-bottom: 0; }
/* Activity history popup: wider, list scrolls inside the popup. */
.crm-activity-modal { width: min(94vw, 680px); max-width: 680px; display: flex; flex-direction: column; overflow: hidden; }
.crm-activity-modal > .crm-drawer__head { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.crm-activity-modal__body { overflow-y: auto; }
.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; }
/* Tables in notes (comparisons, flow-and-failure steps): ruled, with a light header row. */
.crm-preview-description table, .crm-richtext__editor table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 0.86rem; line-height: 1.45; page-break-inside: auto; }
.crm-preview-description th, .crm-preview-description td, .crm-richtext__editor th, .crm-richtext__editor td { border: 1px solid var(--border); padding: 7px 9px; text-align: left; vertical-align: top; }
.crm-preview-description thead th, .crm-richtext__editor thead th { background: var(--surface); font-weight: 600; }
.crm-preview-description tbody th, .crm-richtext__editor tbody th { font-weight: 600; width: 22%; }
.crm-preview-description tr, .crm-richtext__editor tr { page-break-inside: avoid; }
.crm-preview-description code, .crm-richtext__editor code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82em; }
.crm-preview-description h3 + p, .crm-preview-description h3 + ul, .crm-preview-description h3 + ol { margin-top: 0; }
.crm-preview-description h3 { margin-top: 18px; }
.crm-preview-description h3:first-child { margin-top: 0; }

.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 {
	position: relative;
	background: none;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 16px;
}
/* The standard for a section shown by a yes / no or an option (VISUALS.md): once open with fields
   showing, its yes / no sits on the top line like a heading and the fields are inside the outline. */
.crm-monthly-split.is-open:not(.crm-date-grid__full):has(> :not(.crm-monthly-split__toggle):not([hidden])) { margin-top: 24px; padding-top: 20px; }
.crm-monthly-split.is-open:not(.crm-date-grid__full):has(> :not(.crm-monthly-split__toggle):not([hidden])) > .crm-monthly-split__toggle:first-child { position: absolute; top: -0.9em; left: 10px; padding: 0 6px; background: var(--surface-2); }
.crm-monthly-split.is-open:not(.crm-date-grid__full):has(> :not(.crm-monthly-split__toggle):not([hidden])) > .crm-monthly-split__toggle:first-child label { font-size: 0.85rem; font-weight: 600; }
.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; }
/* The invoice email and auto invoice popups use this one. It had no rule at all, so its buttons
   sat flush against each other and an icon button grew taller than a text-only one. Kept separate
   from .crm-drawer-actions above, whose buttons stretch to share the width; here they keep their
   own width at the end of the row. */
.crm-drawer__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.crm-drawer__actions .crm-btn { min-height: 44px; }
.crm-drawer__actions .crm-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.crm-drawer-actions .crm-btn { flex: 1; }
/* Notes popup: the title, then View · Tasks · Save · Delete (as a page's header buttons, .crm-head-actions), then ×,
   in one header row that stays put while the note scrolls (top = minus the popup's padding). */
.crm-drawer__head--note { position: sticky; top: -26px; z-index: 3; flex-wrap: wrap; gap: 10px 12px; margin: -10px 0 18px; padding: 10px 0; background: var(--surface-2); }
.crm-drawer__head--note h3 { margin-right: auto; overflow-wrap: anywhere; }
/* Notes popup: a meeting's own section under Related to a meeting? (attendees, date, time, calendar meeting). */
/* A section shown by a yes / no or an option on an add or edit form (condSection() in admin.js;
   the standard in VISUALS.md): a thin outline, 10px corners, no fill, the heading on the top line.
   It hides itself while every field in it is hidden. */
.crm-cond-section { position: relative; margin: 26px 0 16px; padding: 18px 14px 4px; border: 1px solid var(--border); border-radius: 10px; background: none; }
.crm-cond-section[hidden], .crm-cond-section:not(:has(> :not(.crm-cond-section__title):not([hidden]))) { display: none; }
.crm-cond-section__title { position: absolute; top: -0.65em; left: 10px; margin: 0; padding: 0 4px; background: var(--surface-2); font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
/* Related to a meeting? Yes: the Meeting section looks like the auto invoice popup's Email box
   (a thin outline, 10px corners, no fill, its heading sitting on the top line). */
.crm-note-meeting.is-meeting { position: relative; margin: 26px 0 16px; padding: 18px 14px 2px; border: 1px solid var(--border); border-radius: 10px; background: none; }
.crm-note-meeting__title { display: none; position: absolute; top: -0.65em; left: 10px; margin: 0; padding: 0 4px; background: var(--surface-2); font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.crm-note-meeting.is-meeting > .crm-note-meeting__title { display: block; }
/* Action lines in a note's editor: a box instead of the bullet, ticked when sent to the task board, struck through when its task is done (the View / PDF keeps the strike only);
   @person and #project chips. The chips are inline-blocks, so a done line's strike skips them. */
.crm-richtext__editor [data-action] { position: relative; list-style: none; padding-left: 26px; }
.crm-richtext__editor li[data-action] { margin-left: -20px; }
.crm-richtext__editor [data-action]::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--text-muted); border-radius: 4px; background: var(--surface) center / 12px no-repeat; }
.crm-richtext__editor [data-action]::before { cursor: pointer; }
.crm-richtext__editor [data-action]:not([data-send="0"])::before { border-color: var(--teal); background-color: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.crm-richtext__editor [data-action][data-done="1"], .crm-preview-description [data-action][data-done="1"] { color: var(--text-muted); text-decoration: line-through; }
/* Person and project chips (a project chip saved with the old .crm-tag class looks the same here, over the API docs' .crm-tag). */
.crm-mention, .crm-richtext__editor [data-project], .crm-preview-description [data-project] { display: inline-block; width: auto; border: none; cursor: inherit; margin: 0 2px 0 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: -0.3em; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 16%, transparent); font-size: 0.82em; font-weight: 600; line-height: 1.55; color: var(--text); text-decoration: none; white-space: nowrap; }
/* The View / PDF: action lines read as ordinary bullets (no box) and @ / # as plain text. */
.crm-preview-description .crm-mention, .crm-preview-description [data-person], .crm-preview-description [data-project] { display: inline; max-width: none; overflow: visible; margin: 0; padding: 0; border: none; border-radius: 0; background: none; font: inherit; color: inherit; white-space: normal; vertical-align: baseline; }
/* An action line's flags (data-flag, set by tidy()): "@Name is not a contact (tap to add)" (a click on it adds them), and on a ticked line "@ person missing" / "# project or task missing"; a small orange label after it (editor only). */
.crm-richtext__editor [data-action][data-flag]::after { content: attr(data-flag); margin-left: 8px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, #e8890c 16%, transparent); color: #b45f06; font-size: 0.74em; font-weight: 600; white-space: nowrap; pointer-events: none; }
.crm-task-who.is-missing { background: color-mix(in srgb, #e8890c 14%, transparent); color: #b45f06; }
.crm-mention-picker li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.crm-mention-picker__hint { font-size: 0.74rem; color: var(--text-muted); }
/* + Add "Name" as a new contact (no contact by that name). */
.crm-mention-picker li.crm-picker-add { color: var(--teal); font-weight: 600; }
.crm-richtext__editor [data-action][data-unknown]::after { pointer-events: auto; cursor: pointer; }
/* An empty action line says what to type (CSS only, so nothing extra is saved in the note). */
.crm-richtext__editor [data-action]:empty::after, .crm-richtext__editor [data-action]:has(> br:only-child)::after, .crm-richtext__editor [data-action][data-flag]:empty::after, .crm-richtext__editor [data-action][data-flag]:has(> br:only-child)::after { content: "Type the task, then @ for a person and # for a project or #task"; margin: 0; padding: 0; background: none; color: var(--text-muted); font-size: inherit; font-weight: 400; pointer-events: none; }
/* Notes popup: the editor's toolbar sticks under the header (its height in --note-head-h; minus the popup's padding).
   overflow: clip keeps the rounded box without stopping the toolbar sticking. */
.crm-drawer--note .crm-richtext { overflow: clip; }
/* The notes popup's Notes box starts at least 400px deep (it still grows as you write). */
.crm-drawer--note .crm-richtext__editor { min-height: 400px; }
.crm-drawer--note .crm-richtext__toolbar { position: sticky; top: calc(var(--note-head-h, 60px) - 26px); z-index: 2; }
.crm-mention-picker { position: absolute; z-index: 1000; width: 260px; padding: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.crm-mention-picker input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.88rem; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.crm-mention-picker ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.crm-mention-picker li { padding: 6px 8px; border-radius: 6px; font-size: 0.88rem; cursor: pointer; }
.crm-mention-picker li.is-on, .crm-mention-picker li:hover { background: var(--surface); }
.crm-mention-picker li.is-empty { color: var(--text-muted); cursor: default; background: none; }
.crm-picker-co { display: inline-flex; align-items: center; gap: 8px; }
.crm-picker-co .crm-cal-tile { width: 20px; height: 20px; border-radius: 5px; }
.crm-picker-co .crm-cal-tile svg { width: 13px; height: 13px; }
/* Notes popup: the hide options as one row of switches. */
.crm-note-hide__label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.crm-note-hide .crm-note-hide__opts { display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.crm-note-hide .crm-note-hide__opt { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 0.86rem; font-weight: 600; color: var(--text); cursor: pointer; }
.crm-note-hide .crm-note-hide__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.crm-note-hide .crm-note-hide__opt:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }
.crm-note-hide .crm-note-hide__opt.is-on { border-color: var(--teal); }
.crm-switch { position: relative; flex-shrink: 0; width: 30px; height: 18px; border-radius: 999px; background: var(--border); transition: background 0.15s; }
.crm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.crm-note-hide .crm-note-hide__opt.is-on .crm-switch { background: var(--teal); }
.crm-note-hide .crm-note-hide__opt.is-on .crm-switch::after { transform: translateX(12px); }
/* A meeting linked to the calendar takes its date and time from it: those fields hide, the picker shows them. */
.crm-note-linked .crm-note-meeting.is-meeting .crm-note-when { display: none; }
.crm-meet-when { font-weight: 600; color: var(--text); }
.crm-note-bar { justify-content: flex-end; }
/* Note Mode: the notes field lifted out into a popup of its own over the note (same editor). */
.crm-note-mode-backdrop { position: fixed; inset: 0; background: rgba(20, 19, 15, 0.45); z-index: 5; }
.crm-drawer .crm-form-field.crm-note-mode { position: fixed; top: 3vh; bottom: 3vh; left: 50%; transform: translateX(-50%); width: min(94vw, 1000px); z-index: 6; display: flex; flex-direction: column; margin: 0; padding: 16px 20px 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); }
.crm-note-mode > label { display: none; }
.crm-note-mode__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.crm-note-mode__head h3 { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-drawer .crm-note-mode .crm-richtext { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.crm-drawer .crm-note-mode .crm-richtext__toolbar { position: static; }
.crm-drawer .crm-note-mode .crm-richtext__editor { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; font-size: 0.95rem; }
@media (max-width: 640px) {
	.crm-drawer .crm-form-field.crm-note-mode { top: 0; bottom: 0; width: 100vw; border-radius: 0; padding: 12px 14px 14px; }
	.crm-note-mode__status { display: none; }
}

.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, visibility 0.2s;
	/* Never catches taps: a faded toast sat invisibly over popup buttons on phones. */
	pointer-events: none; visibility: hidden;
}
.crm-toast.crm-toast--show { opacity: 1; transform: translateY(0); visibility: visible; }
.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; }
	/* Phone: a slim bar with the logo and a burger; the burger opens the
	   sidebar as a full-width menu (.crm-app.is-menu-open). */
	.crm-mobile-topbar {
		display: flex; align-items: center; justify-content: space-between; gap: 10px;
		background: var(--ink); padding: 12px 10px 12px 16px; position: sticky; top: 0; z-index: 20;
	}
	.crm-mobile-topbar .crm-logo { color: var(--paper); font-size: 1.1rem; letter-spacing: -1px; }
	.crm-burger { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--paper); border-radius: 8px; cursor: pointer; }
	.crm-burger:hover { background: rgba(255, 255, 255, 0.08); }
	.crm-burger svg { width: 24px; height: 24px; }
	.crm-app.is-menu-open .crm-sidebar { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; overflow-y: auto; padding: 16px 16px 24px; }
	.crm-app.is-menu-open .crm-sidebar .crm-logo { padding: 6px 10px 22px; }
	.crm-app.is-menu-open .crm-menu-close { display: inline-flex; }
	.crm-app.is-menu-open #crm-sidebar-nav { display: block; flex: none; }
	.crm-app.is-menu-open .crm-sidebar .crm-nav-btn, .crm-app.is-menu-open .crm-signout-btn { width: 100%; font-size: 1rem; padding: 12px 10px; }
	.crm-app.is-menu-open #crm-sidebar-nav > .crm-nav-btn .crm-count { display: inline; }
	.crm-app.is-menu-open .crm-nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
	.crm-app.is-menu-open .crm-nav-group__head { width: 100%; justify-content: space-between; color: #fff; background: transparent; font-weight: 600; font-size: 1rem; padding: 12px 10px; }
	.crm-app.is-menu-open .crm-nav-group__head svg { display: block; width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.6); }
	.crm-app.is-menu-open .crm-nav-group__head::after { display: none; }
	.crm-app.is-menu-open .crm-nav-group__items { display: block; position: static; min-width: 0; background: none; border: none; box-shadow: none; padding: 0 0 0 12px; margin-top: 2px; }
	.crm-app.is-menu-open .crm-nav-group__items[hidden] { display: none; }
	/* Settings and Sign out live behind the profile icon in the phone bar, not in the burger menu. */
	.crm-app.is-menu-open .crm-sidebar .crm-profile { display: none; }
	.crm-mobile-topbar__actions { display: flex; align-items: center; gap: 6px; }
	.crm-mobile-topbar .crm-profile__btn { width: 36px; height: 36px; }
	.crm-mobile-topbar .crm-profile__menu { top: calc(100% + 12px); z-index: 40; }
	.crm-mobile-topbar .crm-profile__menu .crm-nav-btn, .crm-mobile-topbar .crm-signout-btn { font-size: 1rem; padding: 12px 10px; }
	body.crm-menu-lock { overflow: hidden; }
	.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%; }
	.crm-overlay--popup { padding: 12px; }
	.crm-drawer--popup { padding: 20px 18px 24px; max-height: 92vh; }
	.crm-drawer__head--note { top: -20px; }
	.crm-drawer--note .crm-richtext__toolbar { top: calc(var(--note-head-h, 60px) - 20px); }
}

/* ---------- 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); }
.crm-activity-modal > .crm-preview-modal__body { overflow-y: auto; }
/* Setup Meeting guests (event popup): one row each. A contact shows the
   contact icon, name and email; anyone else their email and Add to contacts. */
.crm-meet-guest-list:has(.crm-meet-guest--row) { display: flex; flex-direction: column; gap: 6px; }
.crm-meet-guest.crm-meet-guest--row { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.crm-meet-guest__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; }
.crm-meet-guest__icon svg { width: 15px; height: 15px; }
.crm-meet-guest__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-meet-guest__name { font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.crm-meet-guest__email { font-size: 0.82rem; color: var(--text-muted); overflow-wrap: anywhere; }
.crm-meet-guest--row .crm-btn--sm { flex-shrink: 0; width: auto; height: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 0.8rem; font-weight: 600; }
.crm-meet-guest--row .crm-btn--sm:hover { background: var(--surface); color: var(--text); border-color: var(--ink); }
.crm-meet-guest--row .crm-btn--sm svg { width: 14px; height: 14px; }
.crm-meet-guest__remove { flex-shrink: 0; border: none; background: none; font-size: 1.1rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 2px 4px; }
.crm-meet-guest__remove:hover { color: var(--text); }

/* Emails page: account tabs and folder / unread / search above a list of
   rows (unread: bold with a dot). Each email opens in a wide popup. */
.crm-email-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.crm-email-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-email-tab { font: inherit; font-size: 0.88rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.crm-email-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-email-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-email-folder, .crm-email-search { font: inherit; font-size: 0.9rem; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.crm-email-search { width: 220px; max-width: 100%; }
.crm-email-unread { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.crm-email-list { padding: 0; overflow: hidden; }
.crm-email-list__empty { margin: 0; padding: 24px 18px; color: var(--text-muted); }
.crm-email-list__fixes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crm-email-row { display: grid; grid-template-columns: 10px minmax(120px, 220px) 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: none; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.crm-email-row:last-of-type { border-bottom: none; }
.crm-email-row:hover { background: var(--surface); }
.crm-email-row__dot { width: 8px; height: 8px; border-radius: 50%; }
.crm-email-row.is-unread .crm-email-row__dot { background: #2f6fd6; }
.crm-email-row__from { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.92rem; }
.crm-email-row__who { display: flex; flex-direction: column; min-width: 0; }
.crm-email-row__name, .crm-email-row__to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-email-row__to { font-size: 0.74rem; font-weight: 400; color: var(--text-muted); }
.crm-email-row.is-unread .crm-email-row__to { font-weight: 400; }
.crm-email-row__contact { flex-shrink: 0; display: inline-flex; color: var(--text-muted); }
.crm-email-row__contact svg { width: 15px; height: 15px; }
.crm-email-row__main { min-width: 0; display: flex; flex-direction: column; font-size: 0.92rem; }
.crm-email-row__subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-email-row__snippet { color: var(--text-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-email-row.is-unread .crm-email-row__from, .crm-email-row.is-unread .crm-email-row__subject { font-weight: 700; }
.crm-email-row__meta { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.crm-email-row__clip { display: inline-flex; }
.crm-email-row__clip svg { width: 14px; height: 14px; }
.crm-email-row__acct { padding: 1px 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); font-size: 0.74rem; }
.crm-email-more { padding: 12px 16px; text-align: center; border-top: 1px solid var(--border); }
.crm-email-empty { padding: 20px; }
.crm-email-empty p { margin: 0 0 12px; }
@media (max-width: 720px) {
	.crm-email-row { grid-template-columns: 10px 1fr auto; grid-template-areas: "dot from meta" "dot main main"; row-gap: 2px; }
	.crm-email-row__dot { grid-area: dot; align-self: start; margin-top: 6px; }
	.crm-email-row__from { grid-area: from; }
	.crm-email-row__meta { grid-area: meta; }
	.crm-email-row__main { grid-area: main; }
	.crm-email-search { width: 100%; }
	.crm-email-filters { width: 100%; }
}
.crm-email-modal { width: min(96vw, 980px); max-width: 980px; }
.crm-email-meta { margin-bottom: 12px; }
.crm-email-sender { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-email-sender__who { display: flex; flex-direction: column; min-width: 0; }
.crm-email-sender__who span { font-size: 0.84rem; color: var(--text-muted); overflow-wrap: anywhere; }
.crm-email-sender .crm-btn--sm svg { width: 14px; height: 14px; }
.crm-email-sender__date { margin-left: auto; font-size: 0.84rem; color: var(--text-muted); }
.crm-email-people { margin: 8px 0 0; font-size: 0.86rem; overflow-wrap: anywhere; }
.crm-email-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.crm-email-actions__gap { flex: 1; }
.crm-email-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding: 0; list-style: none; }
.crm-email-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 0.84rem; text-decoration: none; max-width: 100%; }
.crm-email-file:hover { border-color: var(--ink); }
.crm-email-file svg { width: 14px; height: 14px; flex-shrink: 0; }
.crm-email-file span:first-of-type { overflow-wrap: anywhere; }
.crm-email-images { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--border); font-size: 0.84rem; color: var(--text-muted); }
.crm-email-frame { display: block; width: 100%; height: 300px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.crm-email-to-row { display: flex; gap: 8px; align-items: center; }
.crm-email-to-row input { flex: 1; min-width: 0; }
.crm-email-to-row .crm-btn[hidden] { display: none; }
.crm-email-editor { min-height: 220px; }
.crm-email-editor blockquote { margin: 0 0 0 6px; padding-left: 10px; border-left: 3px solid var(--border); color: var(--text-muted); }
.crm-email-picked { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crm-email-conn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px dashed var(--border); margin-top: 8px; }
.crm-email-conn__who { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.crm-email-conn__form { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-email-conn__form[hidden], .crm-email-conn .crm-btn[hidden] { display: none; }
.crm-email-conn__form input { font: inherit; font-size: 0.9rem; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); min-width: 220px; }
.crm-email-disk { margin-top: 10px; }
.crm-email-disk.is-warn { color: var(--status-danger); font-weight: 600; }

/* On a phone an email popup takes the whole screen: the body runs long and the
   composer is taller still, so the bottom sheet the other previews use left most
   of it off screen. The head stays put so Close is always in reach. */
@media (max-width: 560px) {
	.crm-email-modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border: none; border-radius: 0; }
	.crm-email-modal > .crm-drawer__head {
		position: sticky; top: 0; z-index: 3; margin-bottom: 0;
		padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
		background: var(--surface-2); border-bottom: 1px solid var(--border);
	}
	.crm-email-modal > .crm-preview-modal__body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* Dashboard → Latest emails: the Emails page's rows inside a day card. */
.crm-dash-mail { cursor: default; gap: 0; }
.crm-dash-mail:hover { border-color: transparent; }
.crm-dash-mail .crm-dash-day__head { align-items: center; margin-bottom: 6px; }
.crm-dash-mail .crm-email-row { padding: 9px 4px; border-radius: 6px; }
.crm-dash-mail .crm-email-row:last-child { border-bottom: none; }

/* Dashboard layout: phones stack the 7 days, then Latest emails and
   Outstanding; wider screens put the days in a left column (sticky panel on
   the right). */
.crm-dash-layout { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) {
	.crm-dash-layout { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
	.crm-dash-side { position: sticky; top: 74px; }
}

/* Block sender popup and Settings → Emails' blocked list. */
.crm-block-warn { color: var(--status-danger); font-weight: 600; margin: 0 0 10px; }
.crm-email-blocked { margin-top: 10px; }
.crm-email-blocked ul { list-style: none; margin: 6px 0 0; padding: 0; }
.crm-email-blocked li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 0.88rem; overflow-wrap: anywhere; }

/* Emails: a tick box before each row, and the bar for the ticked ones. */
.crm-email-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.crm-email-item:last-of-type { border-bottom: none; }
.crm-email-item .crm-email-row { flex: 1; min-width: 0; border-bottom: none; padding-left: 4px; }
.crm-email-item.is-selected { background: color-mix(in srgb, #2f6fd6 8%, transparent); }
.crm-email-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; cursor: pointer; }
.crm-email-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.crm-email-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.crm-email-bulk.is-on { background: var(--surface); }
.crm-email-bulk__count { font-size: 0.86rem; font-weight: 600; margin-right: 6px; }

/* Email categories: the chip row above the list, the tag on each email, and
   the Categories & rules popup. */
.crm-email-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.crm-email-catchip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.84rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.crm-email-catchip.is-active { border-color: var(--chip, var(--ink)); box-shadow: inset 0 0 0 1px var(--chip, var(--ink)); background: color-mix(in srgb, var(--chip, var(--ink)) 12%, transparent); font-weight: 600; }
.crm-email-catchip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip); }
.crm-email-catchip__n { color: var(--text-muted); font-size: 0.76rem; }
.crm-email-cat { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--chip); background: color-mix(in srgb, var(--chip) 14%, transparent); }
.crm-ecat-rule[hidden], .crm-ecat-new[hidden] { display: none; }
.crm-email-rules h4 { font-size: 0.9rem; margin: 4px 0 8px; }
.crm-email-rules__list { list-style: none; margin: 0 0 12px; padding: 0; }
.crm-email-rules__list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--border); font-size: 0.88rem; flex-wrap: wrap; }
.crm-email-rules__list input[type="color"] { width: 28px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; }
.crm-email-rules__list input[type="text"] { flex: 1; min-width: 120px; font: inherit; font-size: 0.9rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.crm-email-rules__who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Rules (phishing) popup: each line's address, subject and rule on their own lines; switches top right. */
.crm-email-rules__who > .crm-row-sub, .crm-guard__subject { display: block; }
.crm-guard__subject { margin-top: 2px; }
.crm-guard__rules li { flex-wrap: nowrap; align-items: flex-start; }
.crm-email-rules__new { display: flex; gap: 6px; margin-bottom: 16px; }
.crm-email-rules__new input { flex: 1; font: inherit; font-size: 0.9rem; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }

/* Dashboard → Outstanding: incoming payments (black, with a payment card) and
   a status tag: orange = needs linking, green = matched, to check. */
.crm-dash-pay .crm-dash-event__icon svg { width: 17px; height: 17px; }
.crm-dash-pay { background: color-mix(in srgb, #1c1c1c 9%, transparent); }
.crm-dash-pay:hover { background: color-mix(in srgb, #1c1c1c 16%, transparent); }
.crm-dash-pay__tag { flex-shrink: 0; align-self: center; margin: 0 10px 0 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; background: #2e9e4f; }
.crm-dash-pay.is-tolink .crm-dash-pay__tag { background: #e8890c; }

/* Calendar → History popup: day headings, then one row per change with a
   coloured tag (green added, orange changed, red removed). */
.crm-cal-history h4 { font-size: 0.86rem; margin: 14px 0 6px; color: var(--text-muted); }
.crm-cal-history__list { list-style: none; margin: 0; padding: 0; }
.crm-cal-history__list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--border); }
.crm-cal-history__tag { flex-shrink: 0; width: 72px; text-align: center; padding: 2px 0; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; background: #2e9e4f; }
.crm-cal-history__list li.is-changed .crm-cal-history__tag { background: #e8890c; }
.crm-cal-history__list li.is-removed .crm-cal-history__tag { background: var(--status-danger); }
.crm-cal-history__what { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; font-size: 0.9rem; }
.crm-cal-history__meta { flex-shrink: 0; text-align: right; font-size: 0.82rem; display: flex; flex-direction: column; }

/* A nav section with no pages yet (Finance, Home, Health). */
.crm-nav-empty { margin: 0; padding: 10px 14px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }

/* A rule's suggested category on an email: outlined in the category colour,
   with a +; tapping it moves the email in. */
.crm-email-cat--suggest { background: transparent; border: 1px dashed var(--chip); cursor: pointer; }
.crm-email-cat--suggest:hover, .crm-email-cat--suggest:focus-visible { background: color-mix(in srgb, var(--chip) 14%, transparent); outline: none; }

/* Emails: the categories dropdown (tag icon + chevron): tick categories,
   Apply, and the list shows only their emails. */
.crm-email-catpick { position: relative; display: inline-flex; }
.crm-email-catpick__btn { display: inline-flex; align-items: center; gap: 2px; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.crm-email-catpick__btn svg { width: 16px; height: 16px; }
.crm-email-catpick__btn .crm-email-catpick__chev { width: 12px; height: 12px; }
.crm-email-catpick__btn[aria-expanded="true"] { border-color: var(--ink); }
.crm-email-catpick__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.crm-email-catpick__menu[hidden] { display: none; }
.crm-email-catpick__menu label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 0.88rem; cursor: pointer; white-space: nowrap; }
.crm-email-catpick__menu label:hover { background: var(--surface-2); }
.crm-email-catpick__menu input { margin: 0; }

.crm-email-catpick__btn.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.crm-email-catpick__count { font-size: 0.84rem; margin: 0 2px 0 4px; }
.crm-email-catpick__name { flex: 1; }
.crm-email-catpick__foot { display: flex; justify-content: flex-end; padding: 6px 4px 2px; margin-top: 4px; border-top: 1px solid var(--border); position: sticky; bottom: -6px; background: var(--surface); }

.crm-email-catpick__none { display: block; padding: 8px; font-size: 0.86rem; color: var(--text-muted); }
.crm-email-catpick__foot .crm-row-sub { margin-right: auto; align-self: center; font-size: 0.76rem; }
.crm-email-catpick__btn .crm-email-catchip__n { margin-right: 2px; }

/* Sub-categories: indented under their parent in the Categories popup and the
   filter dropdowns. */
.crm-email-rules__list li.is-sub { padding-left: 44px; position: relative; }
.crm-email-rules__list li.is-sub::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 50%; width: 10px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); border-bottom-left-radius: 4px; }
.crm-email-rules__subnew[hidden] { display: none; }
.crm-email-rules__subnew input { flex: 1; min-width: 120px; font: inherit; font-size: 0.9rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.crm-email-rules__new select { font: inherit; font-size: 0.86rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.crm-email-catpick__menu label.is-sub { padding-left: 26px; }

/* Categories popup: drag a category by its grip onto another (it becomes a
   sub-category) or onto the strip at the bottom (a main category again). */
.crm-email-rules__grip { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px; color: var(--text-muted); cursor: grab; touch-action: none; }
.crm-email-rules__grip svg { width: 16px; height: 16px; }
.crm-email-rules__list li.is-dragging { opacity: 0.4; }
.crm-email-rules__list li.is-drop { background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 2px var(--ink); border-radius: 8px; }
.crm-email-rules__ghost { position: fixed; z-index: 200; pointer-events: none; list-style: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--ink); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); font-size: 0.88rem; }
.crm-email-rules__droptop { margin: 4px 0 14px; padding: 12px; border: 2px dashed var(--border); border-radius: 8px; text-align: center; font-size: 0.86rem; color: var(--text-muted); }
.crm-email-rules__droptop[hidden] { display: none; }
.crm-email-rules__droptop.is-drop { border-color: var(--ink); color: var(--text); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.crm-email-rules__del { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; }
.crm-email-rules__del svg { width: 17px; height: 17px; }
.crm-email-rules__del:hover, .crm-email-rules__del:focus-visible { color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 10%, transparent); outline: none; }

/* New category: name, then a labelled "Under" dropdown (a main category or inside one). */
.crm-email-rules__new { flex-wrap: wrap; align-items: center; }
.crm-email-rules__new input { min-width: 160px; }
.crm-email-rules__under { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--text-muted); }

/* Categories popup: zip up a main category (chevron hides its sub-categories), and
   drop markers while dragging: an ink line above or below a row, or the row outlined
   when it will go inside it. */
.crm-email-rules__list li[hidden] { display: none; }
.crm-email-rules__fold { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px; padding: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; }
.crm-email-rules__fold svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.crm-email-rules__fold.is-open svg { transform: rotate(90deg); }
button.crm-email-rules__fold:hover { color: var(--text); }
.crm-email-rules__ghost .crm-email-rules__fold { display: none; }
.crm-email-rules__list li.is-before { box-shadow: inset 0 3px 0 var(--ink); }
.crm-email-rules__list li.is-after { box-shadow: inset 0 -3px 0 var(--ink); }

/* Categories popup rows: tile (colour + icon), name (linked client under it), count, pencil. */
.crm-email-rules__list .crm-cal-tile { flex-shrink: 0; }
.crm-email-rules__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.crm-email-rules__name small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--text-muted); }
.crm-email-rules__edit { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; }
.crm-email-rules__edit svg { width: 16px; height: 16px; }
.crm-email-rules__edit:hover, .crm-email-rules__edit:focus-visible { color: var(--text); background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }
/* Edit category popup: Delete on the left, Cancel and Save on the right. */
.crm-email-catedit__actions { justify-content: flex-end; flex-wrap: wrap; }
.crm-email-catedit__delete { margin-right: auto; color: var(--status-danger); display: inline-flex; align-items: center; gap: 6px; }
.crm-email-catedit__delete svg { width: 15px; height: 15px; }

/* Client popup: the Company and Contact sections (a dropdown each, the choice
   shown underneath, and a small New form inside the section). */
.crm-client-links { display: grid; gap: 26px; margin: 22px 0 16px; }
.crm-client-link { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.crm-client-link__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.crm-client-link__head label { margin: 0; }
.crm-client-link select { width: 100%; }
.crm-client-link__show:not(:empty) { margin-top: 10px; }
/* Account popup: Company and Contact as outlined sections (white, a line round them, the name on the
   top line), Select … | New … at the top; the chosen one shown as a card. */
.crm-client-link.crm-cond-section { margin: 14px 0 0; padding: 22px 14px 14px; background: var(--surface-2); }
.crm-client-link__mode { margin: 0 0 -2px; justify-self: start; max-width: 100%; }
.crm-client-links > .crm-client-link__mode + .crm-client-link { margin-top: 0; }
.crm-client-link.is-new > .crm-cal-picker, .crm-client-link.is-new > .crm-client-link__show { display: none; }
.crm-client-link__mode [data-contact-from-email] { display: inline-flex; align-items: center; gap: 6px; }
.crm-client-link__mode [data-contact-from-email] svg { width: 14px; height: 14px; }
.crm-client-link__show:not(:empty) { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.crm-client-link__show .crm-row-name--tile { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.crm-client-link__show .crm-row-name--tile .crm-cal-tile { width: 30px; height: 30px; border-radius: 8px; }
.crm-client-link__show .crm-row-name--tile .crm-cal-tile svg { width: 17px; height: 17px; }
.crm-client-link__show .crm-row-sub a { color: inherit; }
.crm-client-link__new { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.crm-client-link__new[hidden] { display: none; }
.crm-client-link__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Edit category: the Company section (overview when linked, the name / colour /
   icon fields inside it, folded away until "Change"). */
.crm-email-catedit__company { margin-bottom: 16px; }
.crm-email-catedit__details { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.crm-email-catedit__details[hidden], .crm-email-catedit__company [hidden] { display: none; }
.crm-email-catedit__details .crm-form-field:last-child { margin-bottom: 0; }

/* Categorised / Tagged dropdowns: each category's colour tile with its icon, a little smaller. */
.crm-email-catpick__menu .crm-cal-tile { width: 20px; height: 20px; border-radius: 5px; }
.crm-email-catpick__menu .crm-cal-tile svg { width: 13px; height: 13px; }

/* The Categories popup is wider than the other small popups (rows hold a grip, tile, name, count and pencil). */
.crm-preview-modal.crm-email-rules--cats { width: min(720px, calc(100vw - 32px)); max-width: none; }

/* Categorised / Tagged dropdowns: Select all at the top, ruled off from the categories;
   the menu a little wider and taller than it was. */
.crm-email-catpick__menu label.crm-email-catpick__all { font-weight: 600; border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; margin-bottom: 4px; }
.crm-email-catpick__menu { min-width: 280px; max-height: 460px; }

/* Email rows: a category pill's icon before its name, in the pill's colour. */
.crm-email-cat__icon { display: inline-block; margin-right: 4px; vertical-align: -2px; line-height: 0; }
.crm-email-cat__icon svg { width: 12px; height: 12px; }

/* The Category popup (Move to): its tile picker's list hangs below a short popup, so the
   popup mustn't clip it (it's never tall enough to need its own scroll). */
.crm-preview-modal.crm-ecat-modal { overflow: visible; }
.crm-ecat-modal .crm-cal-picker__list { z-index: 40; max-height: min(360px, 60vh); }

/* Emails: the select / bulk bar stays at the top while scrolling the list, under the
   top nav (58px; the phone bar is 66px). The list panel clips instead of hiding
   overflow, since hidden overflow stops sticky working. */
.crm-panel.crm-email-list { overflow: clip; }
.crm-email-bulk { position: sticky; top: 58px; z-index: 15; }
@media (max-width: 720px) {
	.crm-email-bulk { top: 66px; }
}

/* Categories popup: the Add category button under the list. */
.crm-email-rules__add { display: flex; justify-content: flex-end; margin: 6px 0 16px; }

/* Emails: Empty Trash, next to the folder dropdown while Trash is open. */
.crm-email-emptytrash { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--status-danger); }
.crm-email-emptytrash svg { width: 15px; height: 15px; }

/* Join on a meeting (Calendar list, Dashboard), just left of the action circle. */
.crm-ev-join { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin: 0 6px 0 auto; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.crm-ev-join:hover, .crm-ev-join:focus-visible { filter: brightness(1.25); outline: none; }
.crm-ev-join + .crm-ev-tick { margin-left: 0; }

/* Event status popup: Move (a new day and times), under the date line. */
.crm-ev-status__when .crm-btn { margin-left: 6px; vertical-align: middle; }
.crm-ev-move { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.crm-ev-move[hidden] { display: none; }
.crm-ev-move .crm-form-pair { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.crm-ev-move__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* Meeting notes: Open in calendar under the Meeting in calendar dropdown. */

/* Emails: the search box, full width under the All mail / Tagged / Categorised row. */
.crm-email-searchrow { margin: 0 0 12px; }
.crm-email-searchrow .crm-email-search { width: 100%; box-sizing: border-box; }

/* Tag rules popup: rules grouped under their category, each group folding with +/−. */
.crm-rule-groups { display: grid; gap: 8px; }
.crm-rule-group { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.crm-rule-group__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; font: inherit; font-size: 0.9rem; color: var(--text); text-align: left; cursor: pointer; }
.crm-rule-group__sign { width: 18px; font-size: 1.1rem; font-weight: 600; line-height: 1; color: var(--text-muted); text-align: center; }
.crm-rule-group__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.crm-rule-group .crm-email-rules__list { margin: 0; padding: 0 12px 6px 40px; }
.crm-rule-group .crm-email-rules__list[hidden] { display: none; }

/* Settings → Emails: blocked senders as a count and a button (the list is in a popup). */
.crm-email-blocked { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.crm-blocked-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; }

/* Emails bar: the folder dropdown, then the mailbox tabs, from the left. The search row
   holds Empty Trash (while Trash is open) to the left of the search box. */
.crm-email-bar { justify-content: flex-start; }
.crm-email-searchrow { display: flex; align-items: center; gap: 8px; }
.crm-email-searchrow .crm-email-search { flex: 1; width: auto; min-width: 0; }
.crm-email-searchrow > .crm-search { flex: 1; min-width: 0; margin: 0; }
.crm-email-trashrow { display: flex; justify-content: flex-end; margin: 0 0 10px; }
/* Emails: the mailbox switch (All | fred@ | think@ | …) in the top middle, joined like Nederlands | UK. */
.crm-email-switch { flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) { .crm-email-switch button { padding: 8px 12px; font-size: 0.85rem; } }

/* Settings → Connections → Slack: the set-up steps, the manifest to copy and the app keys. */
.crm-slack-steps { margin: 10px 0 8px; padding-left: 20px; font-size: 0.86rem; line-height: 1.5; }
.crm-slack-steps li { margin-bottom: 6px; }
.crm-slack-manifest { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.crm-slack-manifest textarea { flex: 1; min-width: 0; font: 0.74rem/1.4 ui-monospace, Menlo, monospace; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }
.crm-slack-keys { margin-top: 10px; }
.crm-slack-keys[hidden] { display: none; }
.crm-slack-keys input { font: inherit; font-size: 0.88rem; }

/* Slack: connected workspaces in Settings (tile, name, you, client dropdown, Disconnect),
   and the Slack line on a client (list and popup). */
.crm-slack-workspaces { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.crm-slack-workspaces li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); flex-wrap: wrap; }
.crm-slack-workspaces__text { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.crm-slack-workspaces__client { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.82rem; color: var(--text-muted); }
.crm-slack-workspaces__client select { font: inherit; font-size: 0.84rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); }
.crm-client-slack { display: flex; align-items: center; gap: 5px; }
.crm-client-slack svg { width: 12px; height: 12px; }
.crm-client-slackbox .crm-row-name--tile { margin-bottom: 2px; }

/* Messages page (Slack direct messages): rows like the email list with a round photo;
   the conversation popup with day separators and bubbles (yours on the right). */
.crm-msg-list { padding: 0; overflow: hidden; }
.crm-msg-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: none; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.crm-msg-row:last-child { border-bottom: none; }
.crm-msg-row:hover { background: var(--surface); }
.crm-msg-row .crm-email-row__dot { visibility: hidden; }
.crm-msg-row.is-unread .crm-email-row__dot { visibility: visible; }
.crm-msg-row.is-unread .crm-msg-row__name, .crm-msg-row.is-unread .crm-msg-row__text { font-weight: 600; color: var(--text); }
.crm-msg-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface); }
.crm-msg-avatar--letter { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 0.9rem; }
.crm-msg-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-msg-row__name { font-size: 0.92rem; }
.crm-msg-row__text { font-size: 0.84rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-msg-modal { width: min(94vw, 680px); }
.crm-msg-modal__title { display: flex; align-items: center; gap: 10px; }
.crm-msg-modal__title .crm-msg-avatar { width: 30px; height: 30px; }
.crm-msg-thread { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 12px; }
.crm-msg-day { align-self: center; font-size: 0.74rem; color: var(--text-muted); padding: 2px 10px; border-radius: 999px; background: var(--surface); }
.crm-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; }
.crm-msg .crm-msg-avatar { width: 28px; height: 28px; }
.crm-msg.is-me { align-self: flex-end; }
.crm-msg__bubble { padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.crm-msg.is-me .crm-msg__bubble { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.crm-msg__meta { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 2px; }
.crm-msg.is-me .crm-msg__meta { color: rgba(255, 255, 255, 0.7); }
.crm-msg__text { font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; }
.crm-msg__text svg { width: 12px; height: 12px; vertical-align: -1px; }

/* Notification bell: left of the profile icon (top bar and phone bar), a red count of
   new ones, and an ink dropdown of the latest (new ones brighter, with a dot). */
.crm-notify { position: relative; margin-left: auto; flex-shrink: 0; }
.crm-notify + .crm-profile { margin-left: 8px; }
.crm-notify__btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.crm-notify__btn svg { width: 18px; height: 18px; }
.crm-notify__btn:hover, .crm-notify__btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
.crm-notify__count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--status-danger); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.crm-notify__count[hidden] { display: none; }
.crm-notify__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: min(360px, calc(100vw - 24px)); max-height: min(480px, 70vh); overflow-y: auto; padding: 6px; background: var(--ink); color: var(--paper); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35); }
.crm-notify__menu[hidden] { display: none; }
.crm-notify__head { padding: 8px 10px 6px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
.crm-notify__item { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.crm-notify__item:hover { background: rgba(255, 255, 255, 0.07); }
.crm-notify__item.is-new { color: #fff; background: rgba(255, 255, 255, 0.05); }
.crm-notify__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.crm-notify__icon svg { width: 16px; height: 16px; }
.crm-notify__item.is-new .crm-notify__icon::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; border: 2px solid var(--ink); }
.crm-notify__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 0.84rem; line-height: 1.35; }
.crm-notify__text strong { font-weight: 600; }
.crm-notify__text span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.crm-notify__text em { font-style: normal; font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); }
.crm-notify__empty { margin: 0; padding: 14px 10px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 720px) {
	.crm-notify__btn { width: 36px; height: 36px; }
	.crm-mobile-topbar .crm-notify { margin-left: 0; }
	.crm-mobile-topbar .crm-notify__menu { top: calc(100% + 12px); position: fixed; left: 12px; right: 12px; width: auto; top: 66px; }
}

/* Contacts: "Slack: <workspace>" under the role, and "In Slack: …" in the popup. */
.crm-client-slack a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); }
.crm-contact-slack { margin: -4px 0 14px; }

/* Bell menu: See all notifications at the bottom. Notifications page: by day. */
.crm-notify__all { display: block; margin: 6px 4px 2px; padding: 9px 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.84rem; font-weight: 600; text-align: center; text-decoration: none; border-radius: 0 0 8px 8px; }
.crm-notify__all:hover { background: rgba(255, 255, 255, 0.07); }
.crm-notify-page { padding: 0; overflow: hidden; }
.crm-notify-page__day { padding: 8px 16px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--surface); border-bottom: 1px solid var(--border); }
.crm-notify-page__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.crm-notify-page__item:hover { background: var(--surface); }
.crm-notify-page__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; }
.crm-notify-page__icon svg { width: 16px; height: 16px; }
.crm-notify-page__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; line-height: 1.4; }
.crm-notify-page__text span { color: var(--text-muted); overflow-wrap: anywhere; }

/* Archiving notifications: an archive icon at each one's top right in the bell's menu (it
   slides out when archived; phones can swipe it away); the page's Notifications / Archived tabs. */
.crm-notify__row { position: relative; overflow: hidden; border-radius: 8px; transition: max-height 0.18s ease, opacity 0.18s ease; max-height: 200px; }
.crm-notify__row.is-leaving { max-height: 0; opacity: 0; }
.crm-notify__row .crm-notify__item { transition: transform 0.18s ease, opacity 0.18s ease; padding-right: 36px; }
.crm-notify__archive { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: none; border-radius: 6px; background: none; color: rgba(255, 255, 255, 0.45); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.crm-notify__archive svg { width: 15px; height: 15px; }
.crm-notify__archive:hover, .crm-notify__archive:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.1); outline: none; }
.crm-notify-tabs { margin-bottom: 12px; }
.crm-notify-page__item { align-items: center; transition: opacity 0.18s ease; }
.crm-notify-page__item.is-leaving { opacity: 0; }

/* Messages popup: the reply box under the conversation, Send beside it. */
.crm-msg-reply { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.crm-msg-reply textarea { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); resize: vertical; min-height: 42px; max-height: 200px; }
.crm-msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* Notifications page: the types row (All, Emails, Messages, Calendar, Payments, Shopping) under the tabs. */
.crm-notify-types { margin-bottom: 12px; }

/* Messages: the Direct / Channels & groups tabs, and a channel's # (or lock, or people) tile. */
.crm-msg-tabs { margin-bottom: 12px; }
.crm-msg-avatar--glyph { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.crm-msg-avatar--glyph svg { width: 18px; height: 18px; }

/* Slack conversation: hovering (or tapping) a message shows a small bar of reactions above it;
   its reactions sit under the text as chips (yours outlined in ink). */
.crm-msg__bubble { position: relative; }
.crm-msg__bar { position: absolute; top: -18px; right: 8px; display: none; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); z-index: 2; }
.crm-msg.is-me .crm-msg__bar { right: auto; left: 8px; }
.crm-msg__bubble:hover .crm-msg__bar, .crm-msg__bubble.is-open .crm-msg__bar, .crm-msg__bar:focus-within { display: flex; }
.crm-msg__bar button { width: 28px; height: 28px; border: none; border-radius: 50%; background: none; font-size: 1rem; line-height: 1; cursor: pointer; }
.crm-msg__bar button:hover { background: var(--surface); transform: scale(1.15); }
.crm-msg__reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crm-msg__reaction { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.76rem; cursor: pointer; }
.crm-msg__reaction.is-mine { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); }
.crm-msg.is-me .crm-msg__reaction { color: var(--text); }
.crm-msg-thread { padding-top: 22px; }

/* Channels & groups: a bin at the right of each row, opening the channel in Slack to remove it there. */
.crm-msg-row-wrap { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.crm-msg-row-wrap:last-child { border-bottom: none; }
.crm-msg-row-wrap .crm-msg-row { border-bottom: none; flex: 1; min-width: 0; }
.crm-msg-row__bin { flex-shrink: 0; width: 34px; height: 34px; margin-right: 10px; border: none; border-radius: 8px; background: none; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.crm-msg-row__bin svg { width: 16px; height: 16px; }
.crm-msg-row__bin:hover, .crm-msg-row__bin:focus-visible { color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 10%, transparent); outline: none; }

/* Pausing notifications: the pauses that are on (top of the Notifications page, each with
   Resume), a Paused pill on paused ones, and "N pauses on" in the bell's header. */
.crm-pauses { display: grid; gap: 6px; margin-bottom: 12px; }
.crm-pause { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 0.88rem; }
.crm-pause__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; }
.crm-pause__icon svg { width: 14px; height: 14px; }
.crm-pause__text { flex: 1; min-width: 0; color: var(--text-muted); }
.crm-pause__text strong { color: var(--text); font-weight: 600; }
.crm-notify-paused-pill { font-size: 0.68rem; vertical-align: 1px; margin-left: 4px; }
.crm-notify__head { display: flex; align-items: center; justify-content: space-between; }
.crm-notify__paused { font-size: 0.68rem; text-transform: none; letter-spacing: 0; color: #f6bf26; }
.crm-notify__headright { display: flex; align-items: center; gap: 10px; }
.crm-notify__clear { border: none; background: none; padding: 0; font: inherit; font-size: 0.68rem; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.72); cursor: pointer; }
.crm-notify__clear:hover { color: #fff; text-decoration: underline; }

/* Pause popup: five tiles for what to pause (the chosen one in ink), its choices in a soft box
   under them, "For how long" as chip buttons, and a one-line summary. */
.crm-pause__step { margin: 4px 0 8px; font-size: 0.82rem; font-weight: 600; color: var(--text); }
.crm-pause-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 10px; }
.crm-pause-target { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.8rem; line-height: 1.2; text-align: center; cursor: pointer; }
.crm-pause-target:hover { border-color: var(--text-muted); }
.crm-pause-target.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.crm-pause-target__icon { display: inline-flex; }
.crm-pause-target__icon svg { width: 22px; height: 22px; }
.crm-pause-detail { margin: 0 0 14px; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.crm-pause-detail[hidden] { display: none; }
.crm-pause-detail input[type="email"] { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); }
.crm-pause-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.84rem; color: var(--text-muted); cursor: pointer; }
.crm-pause-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.crm-pause-chip { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.84rem; cursor: pointer; }
.crm-pause-detail .crm-pause-chip { background: var(--surface-2); }
.crm-pause-chip:hover { border-color: var(--text-muted); }
.crm-pause-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.crm-pause__summary { margin: 14px 0 4px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 0.88rem; }
.crm-pause__hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-muted); }
.crm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Settings → Notifications: the pauses in the Pause row; the Notifications page's note. */
.crm-setting-row .crm-pauses { margin-top: 8px; margin-bottom: 0; }
.crm-pauses-note { margin: 0 0 12px; font-size: 0.86rem; color: var(--text-muted); }
.crm-pauses-note a { color: var(--text); }

/* Documentation: search and filters, a grid of cards (photo or PDF tile on top, count badge,
   name, date and type, company tile, "Shared with"), the add / edit uploader (thumbnails with
   ×, a dashed drop area) and the viewer (one file at a time, arrows, thumbnail strip). */
.crm-doc-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.crm-doc-tools .crm-email-search { flex: 1; min-width: 200px; width: auto; }
.crm-doc-tools select { font: inherit; font-size: 0.88rem; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
/* Meeting cards: the platform (not the long link) and attendees pinned to the bottom. */
/* Join on a meeting card: the same chip as the Calendar and Dashboard, just spaced away. */
.crm-meet-grid .crm-ev-join { align-self: flex-start; margin-top: 10px; }
.crm-meet-card__platform { font-weight: 600; }
.crm-meet-card__attendees { margin-top: auto; padding-top: 8px; font-size: 0.8rem; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.crm-meet-card__attendees-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 2px; }
.crm-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.crm-doc-card { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.crm-doc-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.crm-doc-card__thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; }
/* The whole page fitted in the box, over a blurred, softened copy of itself filling it. */
.crm-doc-card__thumb img { width: 100%; height: 100%; }
.crm-doc-card__backdrop { position: absolute; inset: 0; object-fit: cover; filter: blur(14px) saturate(0.9); transform: scale(1.15); opacity: 0.55; }
.crm-doc-card__page { position: relative; object-fit: contain; padding: 8px; box-sizing: border-box; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); }
.crm-doc-card__pdf svg, .crm-doc-card__none svg { width: 56px; height: 56px; color: var(--text-muted); }
.crm-doc-card__count { position: absolute; right: 8px; bottom: 8px; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.72rem; font-weight: 600; text-align: center; }
/* Notes search: why a note shows, under its card ("@Jarred Smith attended"). */
.crm-search-why { list-style: none; margin: 6px 2px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; line-height: 1.35; color: var(--text-muted); overflow-wrap: anywhere; }
.crm-search-why[hidden] { display: none; }
/* The $ company rows: the same look as the tile dropdown (a square tile, then the name). */
.crm-search-picker { width: 330px; }
.crm-search-picker__co { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 7px 8px; }
/* Only the name grows; the tile keeps its square (it is a span too). */
.crm-search-picker__co > span:not(.crm-cal-tile) { flex: 1 1 auto; min-width: 0; }
.crm-search-picker__co > .crm-cal-tile { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; }
.crm-search-picker__co > .crm-cal-tile svg { width: 18px; height: 18px; }
.crm-doc-cardwrap:has(> .crm-search-why) { flex-wrap: wrap; }
.crm-doc-cardwrap > .crm-search-why { flex-basis: 100%; }
.crm-search-why li::before { content: "\2192\00a0"; color: var(--teal); }
.crm-doc-card__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.crm-doc-card__title { font-weight: 600; font-size: 0.92rem; line-height: 1.3; overflow-wrap: anywhere; }
.crm-doc-card__meta { font-size: 0.78rem; color: var(--text-muted); }
.crm-doc-card__co { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; margin-top: 2px; }
.crm-doc-card__co .crm-cal-tile { width: 18px; height: 18px; border-radius: 5px; }
.crm-doc-card__co .crm-cal-tile svg { width: 11px; height: 11px; }
.crm-doc-card__shared { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 0.72rem; }
.crm-doc-up__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-bottom: 8px; }
.crm-doc-up__grid:empty { display: none; }
.crm-doc-thumb { position: relative; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.crm-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.crm-doc-thumb__pdf svg { width: 40px; height: 40px; color: var(--text-muted); }
.crm-doc-thumb__x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.crm-doc-thumb__rot { position: absolute; bottom: 4px; right: 4px; width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; padding: 0; }
.crm-doc-thumb__rot:disabled { opacity: 0.5; }
.crm-doc-thumb img { object-fit: contain; }
.crm-doc-viewer__rotate { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.crm-doc-viewer__rotate button { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.crm-doc-viewer__rotate button:hover { background: rgba(0, 0, 0, 0.8); }
.crm-doc-viewer__rotate button:disabled { opacity: 0.5; cursor: wait; }
.crm-doc-thumb__x svg { width: 12px; height: 12px; }
.crm-doc-up__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 2px dashed var(--border); border-radius: 10px; color: var(--text-muted); cursor: pointer; text-align: center; font-size: 0.88rem; }
.crm-doc-up__drop svg { width: 22px; height: 22px; }
.crm-doc-up__drop span { color: var(--text); font-weight: 600; }
.crm-doc-up__drop em { font-style: normal; font-size: 0.78rem; }
.crm-doc-up__drop:hover, .crm-doc-up__drop.is-over { border-color: var(--ink); color: var(--text); }
.crm-doc-up__status { margin-top: 6px; }
.crm-doc-share { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9rem; }
.crm-doc-share__pick { margin-top: 10px; }
.crm-doc-share__pick select { width: 100%; }
.crm-doc-viewer { width: min(94vw, 960px); }
.crm-doc-viewer__meta { margin: 0 0 12px; font-size: 0.84rem; color: var(--text-muted); }
.crm-doc-viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; max-height: 65vh; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.crm-doc-viewer__stage img { max-width: 100%; max-height: 65vh; object-fit: contain; }
.crm-doc-viewer__stage iframe { width: 100%; height: 65vh; border: none; }
.crm-doc-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.crm-doc-viewer__nav.is-prev { left: 10px; }
.crm-doc-viewer__nav.is-next { right: 10px; }
.crm-doc-viewer__pos { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.76rem; }
.crm-doc-viewer__strip { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; }
.crm-doc-viewer__thumb { flex-shrink: 0; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.crm-doc-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.crm-doc-viewer__thumb svg { width: 34px; height: 34px; color: var(--text-muted); }
.crm-doc-viewer__thumb.is-active { border-color: var(--ink); }
.crm-doc-viewer__notes { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.5; }
/* The text copy: folded under the notes in the viewer, a taller box in the form. */
.crm-doc-viewer__delete { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--status-danger); }
.crm-doc-viewer__delete svg { width: 15px; height: 15px; }
.crm-doc-viewer__delete:hover { border-color: var(--status-danger); }
.crm-doc-viewer__text { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.crm-doc-viewer__text summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.crm-doc-viewer__text pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 0.84rem; line-height: 1.5; max-height: 320px; overflow: auto; margin: 10px 0; }
.crm-doc-uploaded p { margin: 0; padding: 9px 0; font-size: 0.9rem; color: var(--text-muted); }
.crm-doc-translate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.crm-doc-translate .crm-field-note { margin: 0; }
textarea.crm-doc-text { font-size: 0.84rem; line-height: 1.45; }
/* Add document: the big Take a photo button, then each page as a numbered thumbnail. */
.crm-doc-scan__shoot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--border); border-radius: 14px; cursor: pointer; text-align: center; color: var(--text-muted); transition: border-color 0.15s ease, background 0.15s ease; }
.crm-doc-scan__shoot svg { width: 40px; height: 40px; color: var(--text); }
.crm-doc-scan__shoot span { color: var(--text); font-weight: 600; font-size: 1.05rem; }
.crm-doc-scan__shoot em { font-style: normal; font-size: 0.82rem; }
.crm-doc-scan__shoot:hover { border-color: var(--ink); background: var(--surface); }
.crm-doc-scan__pick { display: flex; justify-content: center; margin: 10px auto 0; width: fit-content; cursor: pointer; }
.crm-doc-scan__pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-bottom: 12px; }
.crm-doc-scan__pages[hidden] { display: none; }
.crm-doc-scan__num { position: absolute; left: 4px; bottom: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.crm-doc-scan__status { margin: 12px 0 0; font-size: 0.86rem; font-weight: 600; text-align: center; }
.crm-doc-scan .crm-drawer-actions { margin-top: 16px; }
.crm-doc-scan label:has(input:disabled) { opacity: 0.5; pointer-events: none; }

/* Accounts: the Accesses section (extra portal logins): each person with their email and last
   sign-in, a status pill, the invite / reset button and a bin; + Add access opens a contact picker. */
.crm-accesses { margin-top: 14px; }
.crm-access-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.crm-access-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.crm-access-list__who { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 1px; font-size: 0.88rem; }
.crm-access-list__who span { font-size: 0.78rem; color: var(--text-muted); overflow-wrap: anywhere; }
.crm-access-list__x { width: 30px; height: 30px; border: none; border-radius: 6px; background: none; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.crm-access-list__x svg { width: 15px; height: 15px; }
.crm-access-list__x:hover { color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 10%, transparent); }
.crm-access-pw { flex: 1 0 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.crm-access-pw > label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.crm-access-pw__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-access-pw__row input { flex: 1; min-width: 190px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; }
.crm-access-new { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.crm-access-new[hidden] { display: none; }
.crm-access-new select { width: 100%; }

/* Account popup: "Add new from email" under the contact dropdown, and its picker (senders
   with an initial, name and email, and when / how many). */
.crm-link-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: none; background: none; color: var(--text); font: inherit; font-size: 0.84rem; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; cursor: pointer; }
.crm-link-btn svg { width: 14px; height: 14px; }
.crm-link-btn:hover { text-decoration-color: var(--text); }
.crm-sender-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.crm-sender-list { max-height: 55vh; overflow-y: auto; display: grid; gap: 4px; }
.crm-sender { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.crm-sender:hover { background: var(--surface); border-color: var(--border); }
.crm-sender .crm-msg-avatar { width: 32px; height: 32px; font-size: 0.84rem; }
.crm-sender__who { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.88rem; }
.crm-sender__who span { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sender__when { font-size: 0.74rem; color: var(--text-muted); text-align: right; }

/* Settings → Connections → Claude: the key box. */
/* Settings → Connections: grouped rows, each with a status pill by its name. */
.crm-conn-group { padding-bottom: 6px; }
.crm-conn-group + .crm-conn-group { border-top: 1px solid var(--border); }
.crm-conn-group h4 { margin: 0; padding: 16px 18px 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.crm-conn-row { align-items: flex-start; padding: 12px 18px; }
.crm-conn-row + .crm-conn-row { border-top: 1px dashed var(--border); }
.crm-conn-row .crm-setting-glyph { width: 44px; height: 44px; border-radius: 12px; }
.crm-conn-row .crm-setting-glyph svg { width: 22px; height: 22px; }
.crm-conn-row__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 22px; }
.crm-setting-row__text .crm-conn-row__status { margin-top: 6px; font-size: 0.82rem; color: var(--text); }
.crm-conn-row__action { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.crm-conn-row__more { margin-top: 10px; }
.crm-conn-list { display: grid; gap: 8px; margin-top: 10px; max-width: 640px; }
.crm-conn-list .crm-email-conn { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.crm-conn-row .crm-slack-workspaces { max-width: 640px; }
.crm-conn-row .crm-email-blocked, .crm-conn-row .crm-email-disk { max-width: 640px; }
/* Claude's monthly credit (Settings row) and the History popup. */
.crm-claude-budget { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); max-width: 640px; }
.crm-claude-budget__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; }
.crm-claude-budget__top strong { font-size: 1.05rem; }
.crm-claude-budget__bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text-muted) 18%, transparent); overflow: hidden; margin: 10px 0 8px; }
.crm-claude-budget__bar span { display: block; height: 100%; background: var(--teal); border-radius: inherit; }
.crm-claude-budget__bar.is-full span { background: var(--status-warning); }
.crm-claude-budget .crm-row-sub { margin: 0; }
.crm-claude-budget .crm-link-btn { margin-top: 0; font-size: inherit; }
.crm-claude-budget__form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.crm-claude-budget__form[hidden] { display: none; }
.crm-claude-budget__form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-muted); }
.crm-claude-budget__form input { width: 120px; font: inherit; font-size: 0.88rem; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, var(--surface)); color: var(--text); }
.crm-claude-budget__form .crm-field-note { flex-basis: 100%; margin: 0; }
.crm-claude-history { width: min(94vw, 860px); max-width: 860px; }
.crm-claude-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.crm-claude-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.crm-claude-stats span { font-size: 0.76rem; color: var(--text-muted); }
.crm-claude-stats strong { font-size: 1.3rem; font-weight: 600; }
.crm-claude-stats em { font-style: normal; font-size: 0.78rem; color: var(--text-muted); }
.crm-claude-history__tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-claude-history__tools select { font: inherit; font-size: 0.86rem; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.crm-claude-history__for { max-width: 320px; overflow-wrap: anywhere; }
.crm-claude-history__table td { vertical-align: top; }
.crm-claude-key { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.crm-claude-key input { flex: 1; min-width: 200px; font: inherit; font-size: 0.88rem; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }

/* Contacts: Add via email, above the name on a new contact. */
.crm-contact-via-email { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.crm-contact-via-email .crm-btn { display: inline-flex; align-items: center; gap: 6px; }
.crm-contact-via-email svg { width: 15px; height: 15px; }
.crm-contact-via-email .crm-field-note { margin: 0; }

/* Login: "Which portal?" popup, when one email and password open more than one portal. */
.crm-portal-pick { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 20, 20, 0.55); }
.crm-portal-pick__card { width: min(100%, 420px); max-height: 90vh; overflow: auto; background: var(--surface-2, #fff); color: var(--text); border-radius: 16px; padding: 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); }
.crm-portal-pick__card h2 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; }
.crm-portal-pick__card p { margin: 0 0 16px; color: var(--text-muted); font-size: 0.9rem; }
.crm-portal-pick__list { display: grid; gap: 8px; }
.crm-portal-pick__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.crm-portal-pick__item:hover, .crm-portal-pick__item:focus-visible { border-color: var(--ink); transform: translateY(-1px); }
.crm-portal-pick__tile { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 1.1rem; }
.crm-portal-pick__tile img { width: 26px; height: 26px; }
.crm-portal-pick__name { flex: 1; font-weight: 600; }
.crm-portal-pick__go { font-size: 1.4rem; color: var(--text-muted); line-height: 1; }
.crm-portal-pick__cancel { display: block; margin-top: 16px; text-align: center; font-size: 0.86rem; color: var(--text-muted); }

/* Documentation: tick boxes on the cards (also shift-click), Select all, Give access to an account. */
.crm-doc-select { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 0.86rem; }
.crm-doc-select__all { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.crm-doc-select__all:hover { border-color: var(--text-muted); }
/* Select all: a small square box, ink with a white tick when on. */
.crm-doc-select__all input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; border: 1.5px solid var(--text-muted); border-radius: 4px; background: var(--surface-2) center / 10px no-repeat; cursor: pointer; }
.crm-doc-select__all input:checked { border-color: var(--ink); background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.crm-doc-select__all input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.crm-doc-select__manage { margin-left: auto; }
.crm-doc-select .crm-link-btn { margin-top: 0; }
.crm-doc-cardwrap { position: relative; display: flex; }
.crm-doc-cardwrap > .crm-doc-card { flex: 1; min-width: 0; }
.crm-doc-pick { position: absolute; top: 8px; left: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.crm-doc-pick input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--ink); }
.crm-doc-cardwrap:hover .crm-doc-pick, .crm-doc-pick:focus-within, .crm-doc-cardwrap.is-picked .crm-doc-pick, .crm-doc-grid:has(.is-picked) .crm-doc-pick { opacity: 1; }
.crm-doc-cardwrap.is-picked > .crm-doc-card { outline: 2px solid var(--ink); outline-offset: -1px; }
@media (hover: none) { .crm-doc-pick { opacity: 1; } }
.crm-head-actions .crm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.crm-give .crm-cal-picker { width: 100%; }
.crm-shift-held .crm-doc-card { cursor: copy; }
.crm-shift-held .crm-doc-card:hover { transform: none; }

/* Give access popup: let the account dropdown spill out of the popup instead of being cut off. */
.crm-preview-modal.crm-give, .crm-give .crm-preview-modal__body { overflow: visible; }
.crm-give .crm-cal-picker__list { max-height: min(320px, 50vh); overflow-y: auto; z-index: 30; }

/* Invoices page: cards like Documentation. The account's colour runs along the top; the amount
   is the headline; View / Download PDF / Edit sit in the card's corner. */
.crm-inv-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.crm-inv-card { position: relative; border-top: 4px solid var(--inv-colour, var(--border)); }
.crm-inv-card.is-test { opacity: 0.6; }
.crm-inv-card__top { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--inv-colour, #b9b4aa) 10%, transparent), transparent); border-bottom: 1px solid var(--border); }
.crm-inv-card__acct { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.88rem; min-width: 0; padding-right: 92px; }
.crm-inv-card__acct > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-inv-card__no { font-size: 0.76rem; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.crm-inv-card__amount { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px; }
.crm-inv-card__part { font-size: 0.78rem; color: var(--status-warning); }
.crm-inv-card__desc { font-size: 0.86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-inv-card__foot { margin-top: 6px; }
.crm-doc-card__meta.is-late { color: var(--status-danger); font-weight: 600; }
.crm-inv-card__actions { position: absolute; top: 12px; right: 8px; z-index: 2; display: flex; gap: 2px; }
.crm-inv-card__actions .crm-btn--icon { width: 28px; height: 28px; background: var(--surface-2); }

/* Accounts, Quotes, Contracts and Notes as cards (cardRow), styled like the invoice cards. */
.crm-rcard { cursor: pointer; }
.crm-rcard:focus-visible { outline: 2px solid var(--focus, #2A5FA5); outline-offset: 2px; }
.crm-rcard__title { font-size: 1.15rem; font-weight: 600; line-height: 1.25; margin-top: 4px; overflow-wrap: anywhere; }
.crm-rcard .crm-doc-card__meta strong { color: var(--text); font-weight: 600; }
.crm-rcard .crm-doc-card__meta .is-late { color: var(--status-danger); font-weight: 600; }
.crm-rcard__snip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.crm-rcard .crm-inv-card__foot { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-rgrid .crm-inv-card__actions .crm-btn--icon svg { width: 15px; height: 15px; }
/* On these cards the buttons sit bottom right (Notes can have four), beside the pills. */
.crm-rgrid .crm-inv-card__actions { top: auto; bottom: 10px; right: 10px; }
.crm-rgrid .crm-inv-card__acct { padding-right: 0; }
.crm-rgrid .crm-inv-card__foot { min-height: 28px; padding-right: 128px; align-items: center; }

/* Document viewer: who has opened a shared document on the account. */
.crm-doc-viewer__views { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.86rem; }
.crm-doc-viewer__views ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.crm-doc-viewer__views li { display: flex; align-items: center; gap: 8px; }
.crm-doc-viewer__views li svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.crm-doc-viewer__views .crm-row-sub { margin: 4px 0 0; }

/* 2FA code as 6 boxes (otp-boxes.js): the real input sits on top, see-through. With letters
   (a recovery code) it becomes a normal text box. */
.crm-otp { position: relative; width: 100%; max-width: 320px; }
.crm-otp__boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; pointer-events: none; }
.crm-otp__boxes span { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 6; border: 1.5px solid var(--border, #E3E0DA); border-radius: 10px; background: var(--surface, #F6F5F2); font-size: 1.45rem; font-weight: 600; color: var(--text, #1C1C1C); transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.crm-otp__boxes span.is-filled { border-color: var(--text-muted, #6B6862); background: var(--surface-2, #fff); }
.crm-otp__boxes span.is-current { border-color: var(--ink, #1C1C1C); box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.12); }
.crm-otp__boxes span.is-current:empty::after { content: ""; width: 2px; height: 1.3em; background: var(--ink, #1C1C1C); animation: crm-otp-blink 1s steps(1) infinite; }
@keyframes crm-otp-blink { 50% { opacity: 0; } }
.crm-otp__input.crm-otp__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; opacity: 0.01; outline: none; }
.crm-otp.is-text .crm-otp__boxes { visibility: hidden; }
.crm-otp.is-text .crm-otp__input { position: absolute; opacity: 1; color: var(--text, #1C1C1C); caret-color: auto; background: var(--surface-2, #fff); border: 1.5px solid var(--ink, #1C1C1C); border-radius: 10px; padding: 0 12px; font-size: 1.05rem; letter-spacing: 0.08em; }

/* Activity history: the account's tile (or the CRM's) with the entry's type as a small badge. */
.crm-activity-icon.crm-activity-icon--tile { position: relative; background: none; border: none; width: 38px; height: 38px; overflow: visible; }
.crm-activity-icon--tile .crm-cal-tile { width: 36px; height: 36px; border-radius: 10px; }
.crm-activity-icon--tile .crm-cal-tile svg { width: 20px; height: 20px; }
.crm-activity-icon__type { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); display: flex; align-items: center; justify-content: center; }
.crm-activity-icon__type svg { width: 11px; height: 11px; }
.crm-activity-icon--tile .crm-cal-tile, .crm-activity-icon--tile .crm-cal-tile svg { color: #fff; }

/* Activity history popup: search and filters above the list. */
.crm-activity-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.crm-activity-tools .crm-email-search { flex: 1 1 200px; min-width: 0; margin: 0; }
.crm-activity-tools select { font: inherit; font-size: 0.84rem; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.crm-activity-tools .crm-link-btn { margin-top: 0; }
.crm-activity-count { margin: 0; padding: 10px 18px 0; font-size: 0.8rem; color: var(--text-muted); }

/* Documentation cards: who can see it, top right over the picture (click to change). */
.crm-doc-share-badge { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 52px); padding: 3px 9px 3px 3px; border: none; border-radius: 99px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22); color: var(--text); font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.crm-doc-share-badge > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-doc-share-badge .crm-cal-tile { width: 20px; height: 20px; border-radius: 50%; }
.crm-doc-share-badge .crm-cal-tile svg { width: 12px; height: 12px; }
.crm-doc-share-badge.is-none { padding: 4px 9px; color: var(--text-muted); opacity: 0; transition: opacity 0.15s ease; }
.crm-doc-share-badge.is-none svg { width: 13px; height: 13px; }
.crm-doc-cardwrap:hover .crm-doc-share-badge.is-none, .crm-doc-share-badge.is-none:focus-visible { opacity: 1; }
.crm-doc-share-badge:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
@media (hover: none) { .crm-doc-share-badge.is-none { opacity: 1; } }

/* Account popup: Shared documents. */
.crm-shared-docs__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.crm-shared-docs__list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.crm-shared-docs__thumb { flex-shrink: 0; width: 40px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.crm-shared-docs__thumb img { width: 100%; height: 100%; object-fit: cover; }
.crm-shared-docs__thumb svg { width: 24px; height: 24px; }
.crm-shared-docs__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 0.82rem; color: var(--text-muted); }
.crm-shared-docs__text strong { color: var(--text); font-size: 0.88rem; overflow-wrap: anywhere; }
.crm-shared-docs__text .is-opened { color: var(--status-positive); }
.crm-shared-docs__text .is-unopened { color: var(--status-warning); }
.crm-shared-docs__pick { list-style: none; margin: 10px 0; padding: 0; max-height: 50vh; overflow-y: auto; display: grid; gap: 6px; }
.crm-shared-docs__pick label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.crm-shared-docs__pick label > span { display: flex; flex-direction: column; gap: 1px; font-size: 0.8rem; color: var(--text-muted); }
.crm-shared-docs__pick strong { color: var(--text); font-size: 0.88rem; }
.crm-shared-docs__pick input { margin-top: 3px; }

/* Manage documents for an account: account dropdown, then every document with a tick. */
.crm-preview-modal.crm-manage-docs { width: min(94vw, 620px); max-width: 620px; overflow: visible; }
.crm-manage-docs .crm-preview-modal__body { overflow: visible; }
.crm-manage-docs .crm-cal-picker { width: 100%; }
.crm-manage-docs .crm-cal-picker__list { z-index: 30; }
.crm-manage-docs__tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.crm-manage-docs__tools .crm-email-search { flex: 1 1 220px; margin: 0; }
.crm-manage-docs__tools .crm-pause-check { margin-top: 0; }
.crm-manage-docs__list { max-height: 46vh; }
.crm-manage-docs__list label { align-items: center; }
.crm-manage-docs__list .is-elsewhere { color: var(--status-warning); }
.crm-manage-docs__list .is-opened { color: var(--status-positive); }
.crm-manage-docs__sum { margin-right: auto; }

/* Documents shared with several accounts: a tick per account (form, card badge popup), and the
   card badge's stacked account tiles. */
.crm-doc-share__accts { display: grid; gap: 6px; margin-top: 8px; }
.crm-doc-share__acct { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.crm-doc-share__acct:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.crm-doc-share__acct > span:last-child { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--text-muted); }
.crm-doc-share__acct strong { color: var(--text); font-size: 0.88rem; }
.crm-doc-share-badge__tiles { display: inline-flex; }
.crm-doc-share-badge__tiles .crm-cal-tile + .crm-cal-tile { margin-left: -6px; box-shadow: 0 0 0 2px #fff; }

/* Draft reply: the button on an email, its popup, and the Settings options. */
.crm-draft-btn { display: inline-flex; align-items: center; gap: 6px; }
.crm-draft-btn svg { width: 15px; height: 15px; }
.crm-preview-modal.crm-draft-modal { width: min(94vw, 720px); max-width: 720px; }
.crm-draft-modal textarea { width: 100%; font: inherit; font-size: 0.9rem; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; box-sizing: border-box; }
.crm-draft-go { justify-content: flex-end; margin-top: 4px; }
.crm-draft-result { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.crm-draft-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.crm-draft-text { min-height: 260px; line-height: 1.5; background: var(--surface-2) !important; }
.crm-draft-notes { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--status-warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--status-warning) 40%, transparent); font-size: 0.86rem; }
.crm-draft-notes ul, .crm-draft-used ul { margin: 6px 0 0; padding-left: 18px; }
.crm-draft-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 0.86rem; }
.crm-draft-share span { flex: 1 1 260px; }
.crm-draft-used { font-size: 0.86rem; }
.crm-draft-used .crm-link-btn { margin-top: 0; text-align: left; }
.crm-draft-error { margin: 0; color: var(--status-danger); font-weight: 600; }
.crm-claude-drafts { margin-top: 10px; }
.crm-claude-drafts__leave { margin-top: 6px; font-size: 0.86rem; }
.crm-claude-drafts__leave summary { cursor: pointer; font-weight: 600; }
.crm-claude-drafts__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 6px; }
.crm-claude-drafts__cols strong { display: block; margin-bottom: 2px; }
.crm-claude-drafts__cols .crm-pause-check { margin-top: 4px; }

/* Lights page (Home → Lights): a card per Hue room / zone (switch, brightness, scenes, its lights),
   tinted with the colour of a light that is on. */
.crm-hue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.crm-hue-heading { font-size: 1rem; margin: 8px 0 12px; }
.crm-hue-room { --hue-glow: 255, 214, 150; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: background 0.2s; }
.crm-hue-room.is-on { background: linear-gradient(160deg, rgba(var(--hue-glow), 0.22), var(--surface-2) 70%); border-color: rgba(var(--hue-glow), 0.55); }
.crm-hue-room__head { display: flex; align-items: center; gap: 12px; }
.crm-hue-room__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-hue-room.is-on .crm-hue-room__icon { background: var(--ink); color: rgb(var(--hue-glow)); }
.crm-hue-room__icon svg { width: 20px; height: 20px; }
.crm-hue-room__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-hue-room__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-hue-switch { width: 44px; height: 26px; border-radius: 13px; border: 0; padding: 3px; background: #CFCBC4; cursor: pointer; flex-shrink: 0; display: inline-flex; transition: background 0.15s; }
.crm-hue-switch span { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.crm-hue-switch.is-on { background: var(--ink); }
.crm-hue-switch.is-on span { transform: translateX(18px); }
.crm-hue-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm-hue-range { width: 100%; accent-color: var(--ink); margin: 0; }
.crm-hue-range:disabled { opacity: 0.35; }
.crm-hue-range--sm { width: 90px; flex-shrink: 0; }
.crm-hue-range--temp { appearance: none; -webkit-appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #DCEBFF, #FFE9C7, #FFB04F); }
.crm-hue-range--temp::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.crm-hue-range--temp::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.crm-hue-scenes { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-hue-scene { font: inherit; font-size: 0.8rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.crm-hue-scene:hover { border-color: var(--ink); }
.crm-hue-scene.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-hue-lights { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px dashed var(--border); display: grid; gap: 8px; }
.crm-hue-lights li { display: flex; align-items: center; gap: 10px; }
.crm-hue-lights__name { flex: 1; min-width: 0; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-hue-lights li:not(.is-on) .crm-hue-lights__name { color: var(--text-muted); }
.crm-hue-swatch { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; }
label.crm-hue-swatch { cursor: pointer; }
.crm-hue-lights li:not(.is-on) .crm-hue-swatch { filter: grayscale(1) brightness(0.8); opacity: 0.5; }
.crm-hue-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
@media (max-width: 560px) {
	.crm-hue-grid { grid-template-columns: 1fr; }
	.crm-hue-range--sm { width: 70px; }
}
/* Settings → Philips Hue: the light that flashes for Shopping List items, with Test. */
.crm-hue-shopflash { display: flex; gap: 8px; align-items: center; margin: 6px 0 0 26px; flex-wrap: wrap; }
.crm-hue-shopflash select { font: inherit; font-size: 0.88rem; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); }
/* Lights: a zone made of whole rooms (e.g. Garden) spans the row, with its rooms as cards inside. */
.crm-hue-parent { grid-column: 1 / -1; }
.crm-hue-subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.crm-hue-subgrid .crm-hue-room { border-radius: 12px; background: var(--surface-2); }
.crm-hue-subgrid .crm-hue-room.is-on { background: linear-gradient(160deg, rgba(var(--hue-glow), 0.18), var(--surface-2) 70%); }
@media (max-width: 560px) { .crm-hue-subgrid { grid-template-columns: 1fr; } }

/* Schedules page (Home → Schedules): schedules and recent runs on the left, daylight on the right. */
.crm-sched-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; }
.crm-sched-sun__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
.crm-sched-sun__stat { background: var(--surface-2); padding: 12px 18px; display: flex; flex-direction: column; }
.crm-sched-sun__stat span { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.crm-sched-sun__stat strong { font-size: 1.35rem; }
.crm-sched-week { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.crm-sched-week th, .crm-sched-week td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.crm-sched-week th { font-weight: 600; color: var(--text-muted); font-size: 0.74rem; }
.crm-sched-week th:first-child, .crm-sched-week td:first-child { padding-left: 18px; }
.crm-sched-sun__note { padding: 10px 18px 14px; margin: 0; }
.crm-sched-list, .crm-sched-log { list-style: none; margin: 0; padding: 0; }
.crm-sched-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.crm-sched-item:last-child { border-bottom: 0; }
.crm-sched-item__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: #FFD27A; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-sched-item__icon svg { width: 20px; height: 20px; }
.crm-sched-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-sched-item__text > span { font-size: 0.84rem; color: var(--text-muted); }
.crm-sched-item__next { font-size: 0.78rem !important; color: var(--teal) !important; font-weight: 600; }
.crm-sched-item__next.is-on { color: var(--status-warning) !important; }
.crm-sched-item.is-paused .crm-sched-item__next { color: var(--text-muted) !important; }
.crm-sched-log li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--border); font-size: 0.84rem; }
.crm-sched-log li:last-child { border-bottom: 0; }
.crm-sched-log__err { color: var(--status-danger); }
.crm-sched-log__skip { color: var(--text-muted); }
/* Money out on the Payments page: the amount reads as a deduction. */
.crm-table td.crm-pay-out { color: var(--status-danger); }
.crm-table td.crm-pay-bal { font-weight: 600; }
/* The original amount, above its euro figure, when a payment was not in euros. */
.crm-table td .crm-pay-orig { display: block; font-size: 0.76rem; line-height: 1.3; }
/* Balance per currency, above the table. */
.crm-pay-totals { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.crm-pay-total { flex: 1 1 180px; display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.crm-pay-total__cur { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.crm-pay-total__bal { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-pay-total__off { color: var(--status-danger); }
.crm-sched-rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.crm-sched-room { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 0.88rem; }
.crm-sched-room:has(input:checked) { border-color: var(--teal); background: var(--surface-2); }
.crm-sched-trigger { display: flex; }
.crm-sched-trigger button { flex: 1; padding: 8px 6px; }
.crm-sched-days { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-sched-days button { font: inherit; font-size: 0.82rem; font-weight: 600; width: 46px; padding: 7px 0; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.crm-sched-days button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-sched-form [hidden] { display: none; }
.crm-sched-form .crm-hue-range { margin-top: 10px; }
@media (max-width: 820px) { .crm-sched-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .crm-sched-rooms { grid-template-columns: 1fr; } .crm-sched-week th:last-child, .crm-sched-week td:last-child { display: none; } }

/* Heating page (Home → Heating): mode buttons, then a card per zone (temperature, − target +, note). */
.crm-heat-system .crm-panel__head { display: flex; align-items: center; gap: 10px; }
.crm-heat-modes { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 0; }
.crm-heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 14px 18px 18px; }
.crm-heat-zone { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.crm-heat-zone.is-heating { border-color: rgba(214, 105, 36, 0.5); background: linear-gradient(160deg, rgba(240, 140, 60, 0.14), var(--surface-2) 70%); }
.crm-heat-zone.is-off { opacity: 0.6; }
.crm-heat-zone__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-heat-zone__flame { color: #D66924; display: inline-flex; }
.crm-heat-zone__flame svg { width: 16px; height: 16px; }
.crm-heat-zone__now { font-size: 2rem; font-weight: 600; letter-spacing: -1px; line-height: 1.1; }
.crm-heat-zone__set { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.88rem; }
.crm-heat-step { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--text); }
.crm-heat-step:hover { border-color: var(--ink); }
.crm-heat-zone__note { font-size: 0.78rem; color: var(--text-muted); }
.crm-heat-zone__note .crm-link-btn { font: inherit; font-size: inherit; background: none; border: 0; padding: 0; color: var(--teal); text-decoration: underline; cursor: pointer; }
.crm-heat-dhw .crm-heat-modes { padding: 4px 0 0; }
.crm-heat-hold { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-muted); }
.crm-heat-hold select { font: inherit; font-size: 0.86rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); }
@media (max-width: 560px) { .crm-heat-grid { grid-template-columns: 1fr 1fr; } .crm-heat-zone__now { font-size: 1.6rem; } }

/* TV page (Home → TV): a remote (status, power, direction pad, back / home / play, volume), and app buttons. */
.crm-tv { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.crm-tv-remote { padding: 18px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.crm-tv-status { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-muted); }
.crm-tv-dot { width: 10px; height: 10px; border-radius: 50%; background: #CFCBC4; flex-shrink: 0; }
.crm-tv-dot.is-on { background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.18); }
.crm-tv-dot.is-off { background: var(--status-danger); }
.crm-tv-row { display: flex; gap: 8px; }
.crm-tv-row .crm-tv-btn { flex: 1; }
.crm-tv-btn { font: inherit; font-size: 0.95rem; font-weight: 600; padding: 12px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: transform 0.08s, background 0.15s; }
.crm-tv-btn:hover:not(:disabled) { border-color: var(--ink); }
.crm-tv-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.crm-tv-btn.is-sent { transform: scale(0.94); background: var(--ink); color: #fff; }
.crm-tv-btn--power { background: var(--ink); color: #fff; border-color: var(--ink); }
.crm-tv-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: ". up ." "left ok right" ". down ."; gap: 8px; width: 220px; margin: 0 auto; }
.crm-tv-pad .crm-tv-btn { padding: 14px 0; }
.crm-tv-pad__up { grid-area: up; } .crm-tv-pad__left { grid-area: left; } .crm-tv-pad__ok { grid-area: ok; border-radius: 50%; } .crm-tv-pad__right { grid-area: right; } .crm-tv-pad__down { grid-area: down; }
.crm-tv-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 16px 18px 4px; }
.crm-tv-app { padding: 18px 10px; }
.crm-tv-note { padding: 6px 18px 14px; margin: 0; }
.crm-bridge-key { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--teal); border-radius: 10px; background: var(--surface); }
.crm-bridge-key p { margin: 0 0 4px; font-size: 0.86rem; }
@media (max-width: 820px) { .crm-tv { grid-template-columns: 1fr; } }

/* Finance → Bank accounts: a card per account (balance), then the transactions with search. */
.crm-bank-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.crm-bank-card { font: inherit; text-align: left; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.crm-bank-card span { font-size: 0.82rem; color: var(--text-muted); }
.crm-bank-card strong { font-size: 1.5rem; letter-spacing: -0.5px; }
.crm-bank-card:hover { border-color: var(--ink); }
.crm-bank-card.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-bank-card.is-active span { color: rgba(255, 255, 255, 0.7); }
.crm-bank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.crm-bank-search { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.crm-bank-search input { width: 100%; font: inherit; font-size: 0.9rem; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.crm-bank-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.crm-bank-table td { padding: 10px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
.crm-bank-table td strong { font-weight: 600; display: block; }
.crm-bank-table__date { white-space: nowrap; color: var(--text-muted); width: 110px; }
.crm-bank-table__amt { text-align: right; white-space: nowrap; font-weight: 600; }
.crm-bank-table__amt.is-in { color: var(--green); }
.crm-bank-table tr.is-pending td { opacity: 0.6; }
.crm-bank-connect { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.crm-bank-connect select { font: inherit; font-size: 0.88rem; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); max-width: 100%; }
.crm-bank-pem { font: 0.74rem/1.4 ui-monospace, Menlo, monospace; width: 100%; }
@media (max-width: 560px) { .crm-bank-table__date { width: auto; } .crm-bank-table td { padding: 9px 12px; } }

/* Cameras page (Home → Cameras): a card per camera with its live view, then the events with snapshots / clips. */
.crm-cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 8px; }
.crm-cam { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.crm-cam__head { display: flex; align-items: center; gap: 10px; }
.crm-cam__head > div { display: flex; flex-direction: column; min-width: 0; }
.crm-cam__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-cam__icon svg { width: 18px; height: 18px; }
.crm-cam-live { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #111; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.crm-cam-live video { width: 100%; height: 100%; object-fit: contain; display: none; }
.crm-cam-live.is-live video { display: block; }
.crm-cam-live__note { position: absolute; inset: auto 12px 12px; color: rgba(255, 255, 255, 0.75); font-size: 0.8rem; text-align: center; }
.crm-cam-live:not(.is-live) .crm-cam-live__note { position: static; padding: 0 20px; }
.crm-cam__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-cam-filter { font: inherit; font-size: 0.84rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); }
.crm-cam-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 16px 18px 18px; }
.crm-cam-ev { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.crm-cam-ev__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }
.crm-cam-ev__none { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.4); }
.crm-cam-ev__none svg { width: 28px; height: 28px; }
.crm-cam-ev__text { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.crm-cam-ev__kinds { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.crm-cam-kind { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--text-muted); text-transform: lowercase; }
.crm-cam-kind--chime { background: rgba(9, 78, 103, 0.12); color: var(--teal); }
.crm-cam-kind--person { background: rgba(150, 101, 14, 0.14); color: var(--status-warning); }
.crm-nest-notify { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin-top: 8px; font-size: 0.86rem; }
.crm-nest-notify > span { color: var(--text-muted); }
.crm-nest-events { margin-top: 10px; font-size: 0.86rem; }
.crm-nest-events summary { cursor: pointer; font-weight: 600; }
@media (max-width: 560px) { .crm-cam-grid { grid-template-columns: 1fr; } }
/* Schedules: a camera start (camera, what it sees, dark only). */
.crm-sched-kinds button { width: auto; padding: 7px 14px; }
.crm-sched-camera { margin-bottom: 8px; }

/* Home overview (Home → Home overview): a card each for Lights, Heating, Cameras, Schedules and TV. */
.crm-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.crm-home-card { margin-bottom: 0; }
.crm-home-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.crm-home-card__head h3 { flex: 1; font-size: 1rem; margin: 0; }
.crm-home-card__icon { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-home-card__icon svg { width: 17px; height: 17px; }
.crm-home-card__more { font-size: 0.84rem; color: var(--teal); text-decoration: none; font-weight: 600; }
.crm-home-card__more:hover { text-decoration: underline; }
.crm-home-card__body { padding: 12px 16px 16px; }
.crm-home-note { margin: 0; font-size: 0.86rem; color: var(--text-muted); }
.crm-home-note a { color: var(--teal); }
.crm-home-sub { margin: 0 0 10px; font-size: 0.82rem; color: var(--text-muted); }
.crm-home-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.crm-home-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.crm-home-list li:last-child { border-bottom: 0; }
.crm-home-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-home-list__main strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-home-live { color: var(--status-warning) !important; font-weight: 600; }
.crm-home-dot { width: 12px; height: 12px; border-radius: 50%; background: #D8D4CD; flex-shrink: 0; }
.crm-home-dot.is-on { box-shadow: 0 0 0 3px rgba(255, 200, 100, 0.25); }
.crm-home-temp { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.5px; }
.crm-home-temp.is-warm { color: #D66924; }
.crm-home-mode { margin: 0 0 8px; }
.crm-home-action { margin-top: 12px; }
.crm-home-events { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-home-event { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.crm-home-event img, .crm-home-events__none { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.4); }
.crm-home-events__none svg { width: 22px; height: 22px; }
.crm-home-event > span { padding: 0 8px 8px; display: flex; flex-direction: column; font-size: 0.82rem; }
.crm-home-tvline { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9rem; }
@media (max-width: 560px) { .crm-home-grid { grid-template-columns: 1fr; } }
/* Home overview: the UK | Nederlands switch (top, centred) and the Dutch home's room buttons. */
.crm-home-areas { display: flex; justify-content: center; margin: 0 auto 18px; width: max-content; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--surface-2); }
.crm-home-areas button { font: inherit; font-size: 0.92rem; font-weight: 600; padding: 8px 22px; border: 0; border-radius: 999px; background: none; color: var(--text-muted); cursor: pointer; }
.crm-home-areas button.is-active { background: var(--ink); color: #fff; }
/* Projects & Tasks: the title with the Tasks | Projects toggle beside it. */
.crm-pt-head { align-items: center; }
.crm-pt-head .crm-pt-switch { margin: 0; }
@media (max-width: 640px) { .crm-pt-switch button { padding: 8px 12px; font-size: 0.85rem; } }
/* Add project: a round button in the bottom-right corner (the projects icon with a +). */
.crm-fab { position: fixed; right: 26px; bottom: 26px; z-index: 30; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0; border: none; border-radius: 50%; background: var(--ink); color: var(--paper); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); cursor: pointer; }
.crm-fab:hover { filter: brightness(1.15); }
.crm-fab svg { width: 24px; height: 24px; }
.crm-fab__plus { position: absolute; top: 7px; right: 7px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 0.85rem; font-weight: 700; line-height: 1; }
@media (max-width: 720px) { .crm-fab { right: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); } }
/* A second, smaller round button above the main one (Notes: Start meeting). */
.crm-fab.crm-fab--sub { right: 33px; bottom: 96px; width: 44px; height: 44px; }
.crm-fab.crm-fab--sub svg { width: 20px; height: 20px; }
.crm-fab--sub .crm-fab__plus { top: 3px; right: 3px; width: 15px; height: 15px; font-size: 0.75rem; }
/* Every page: its title as a small black label at the bottom left (Notes: the head takes no room). */
.crm-view-head--fixed { margin: 0; min-height: 0; }
.crm-page-badge, .crm-view > .crm-view-head h2 { position: fixed; left: 26px; bottom: 26px; white-space: nowrap; z-index: 30; margin: 0; padding: 4px 9px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 0.75rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }
/* Tasks & Projects: with the title at the bottom left, the Tasks | Projects toggle sits in the middle. */
.crm-pt-head { justify-content: center; }
.crm-pt-head > div:first-child { display: contents; }
/* Notes: the search and filter stay at the top while the cards scroll (under the 58px top bar). */
#crm-view-notes .crm-search { position: sticky; top: 58px; z-index: 12; margin: 0 -8px 14px; padding: 10px 8px; background: var(--surface); }
@media (max-width: 720px) {
	.crm-fab.crm-fab--sub { right: 25px; bottom: calc(156px + env(safe-area-inset-bottom)); }
	.crm-page-badge, .crm-view > .crm-view-head h2 { left: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); }
	/* Phones: the search is not sticky under the bar; admin.js moves it into the bar once it gets there. */
	#crm-view-notes .crm-search { position: relative; top: auto; }
	.crm-search.crm-search--stuck .crm-filter__menu { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; max-width: none; }
	/* Stuck in the top bar, between the logo and the bell (placed by admin.js). */
	.crm-search.crm-search--stuck { position: fixed !important; z-index: 25; margin: 0 !important; padding: 0 !important; background: none !important; }
	.crm-search.crm-search--stuck input { padding: 7px 44px 7px 12px; font-size: 0.85rem; border-radius: 999px; border-color: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); }
	.crm-search.crm-search--stuck .crm-filter { top: 2px; right: 2px; bottom: 2px; }
}
.crm-home-head { margin-bottom: 12px; }
.crm-home-rooms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.crm-home-rooms button { font: inherit; font-size: 0.86rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.crm-home-rooms button:hover { border-color: var(--ink); }
.crm-home-rooms button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 560px) { .crm-home-rooms { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .crm-home-rooms button { flex-shrink: 0; } }
/* Home overview Lights: a room's zones (the Garden zones) sit under it, indented. */
.crm-home-list li.crm-home-list__child { padding-left: 22px; position: relative; }
.crm-home-list li.crm-home-list__child::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 50%; width: 9px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); border-bottom-left-radius: 4px; }
.crm-home-list li.crm-home-list__child strong { font-weight: 500; }

/* Room icons (Home overview, Lights, Heating, Cameras). Small inline, or a 30px tile in lists; a
   lights tile takes a soft tint of the light's colour when on, a heating tile turns orange when warming. */
.crm-room-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
.crm-room-ico svg { width: 15px; height: 15px; }
.crm-room-ico--tile { width: 30px; height: 30px; border-radius: 9px; background: var(--surface); color: var(--text-muted); }
.crm-room-ico--tile svg { width: 17px; height: 17px; }
.crm-room-ico--tile.is-on { --glow: 255, 210, 122; background: rgba(var(--glow), 0.28); color: var(--ink); }
.crm-room-ico--tile.is-warm { background: rgba(240, 140, 60, 0.18); color: #D66924; }
.crm-home-rooms button { display: inline-flex; align-items: center; gap: 6px; }
.crm-home-rooms button svg { width: 15px; height: 15px; }
.crm-heat-zone__name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.crm-heat-zone__name .crm-room-ico svg { width: 16px; height: 16px; }
.crm-home-event__where { display: inline-flex; align-items: center; gap: 4px; }
.crm-home-event__where .crm-room-ico svg { width: 12px; height: 12px; }
/* Home overview Heating: − and + beside each room's temperature. */
.crm-home-steps { display: inline-flex; gap: 4px; margin-left: 4px; }
.crm-home-steps .crm-heat-step { width: 30px; height: 30px; font-size: 1.05rem; }
/* Heating page: the whole system's on / off switch, top right beside Refresh. */
.crm-heat-power { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; margin-right: 6px; }
/* Home overview: the Lights and Heating cards' on / off switch, top right of the card head. */
.crm-home-card__head .crm-hue-switch { margin-left: auto; }

/* Schedules & Rules → Rules: the heating on / off rule with each room's temperature. */
.crm-rules { padding: 14px 18px 18px; }
.crm-rule { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.crm-rule__head { display: flex; align-items: center; gap: 10px; }
.crm-rule__text { display: flex; flex-direction: column; }
.crm-rule__rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; width: 100%; }
.crm-rule__rooms[hidden] { display: none; }
.crm-rule__room { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.crm-rule__room > span:nth-child(2) { flex: 1; min-width: 0; }
.crm-rule__room input { width: 64px; font: inherit; font-size: 0.88rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); text-align: right; }
.crm-rule__room--other { font-weight: 600; }
.crm-rule__rooms .crm-field-note { grid-column: 1 / -1; margin: 0; }
/* Cameras page: a home with one camera (Nederland) shows it full width. */
.crm-cam-grid--single { grid-template-columns: 1fr; }
/* Home overview: Schedules first, full width; its schedules side by side when there is room. */
.crm-home-card--schedules { grid-column: 1 / -1; }
.crm-home-card--schedules .crm-home-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 24px; }
/* Home overview on desktop: Lights, Heating and Cameras side by side under Schedules (Cameras beside Heating). */
@media (min-width: 900px) { .crm-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Home overview Cameras, one camera in the home: the latest event fills the card, the next three small underneath. */
.crm-home-events--single { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-home-events--single .crm-home-event:first-child { grid-column: 1 / -1; }
.crm-home-events--single .crm-home-event:not(:first-child) > span { font-size: 0.74rem; }

/* Heating: device problems (low / flat battery, not responding, no reading) in amber. */
.crm-heat-alerts { margin: 14px 18px 0; padding: 12px 14px; border: 1px solid rgba(150, 101, 14, 0.35); border-radius: 12px; background: rgba(150, 101, 14, 0.08); font-size: 0.86rem; }
.crm-heat-alerts__head { display: flex; align-items: center; gap: 8px; color: var(--status-warning); }
.crm-heat-alerts__head svg { width: 18px; height: 18px; }
.crm-heat-alerts ul { margin: 8px 0 6px; padding-left: 20px; }
.crm-heat-alerts li { margin-bottom: 3px; }
.crm-heat-alerts .crm-field-note { margin: 0; }
.crm-heat-zone__warn { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.crm-heat-zone__warn span { display: inline-flex; align-items: flex-start; gap: 5px; font-size: 0.76rem; color: var(--status-warning); font-weight: 600; }
.crm-heat-zone__warn svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
.crm-heat-warn-inline { display: inline-flex; align-items: center; gap: 3px; color: var(--status-warning); font-weight: 600; }
.crm-heat-warn-inline svg { width: 12px; height: 12px; }

/* Home overview Schedules: a small box each (what it lights, what starts it, name, status, switch). */
.crm-home-scheds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.crm-home-sched { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.crm-home-sched.is-on { border-color: rgba(150, 101, 14, 0.45); background: rgba(255, 210, 122, 0.16); }
/* Paused: only the words fade; the icon tile always stays ink with a white icon. */
.crm-home-sched.is-paused .crm-home-sched__text { opacity: 0.6; }
.crm-home-sched__icon { position: relative; width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-home-sched__icon > svg { width: 19px; height: 19px; }
.crm-home-sched__why { position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px; border-radius: 50%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.crm-home-sched__why svg { width: 11px; height: 11px; }
.crm-home-sched__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-home-sched__text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Heating states: low battery / not responding / fault amber, battery flat red, switched off grey. */
.crm-heat-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: rgba(150, 101, 14, 0.12); color: var(--status-warning); vertical-align: middle; }
.crm-heat-chip svg { width: 13px; height: 13px; }
.crm-heat-chip.is-flat { background: rgba(156, 43, 32, 0.1); color: var(--status-danger); }
.crm-heat-chip.is-off { background: var(--surface); color: var(--text-muted); }
.crm-heat-zone__warn span.is-flat { color: var(--status-danger); }
.crm-heat-zone__warn span.is-off { color: var(--text-muted); font-weight: 500; }
.crm-heat-alerts__ico { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--status-warning); }
.crm-heat-alerts__ico svg { width: 14px; height: 14px; }
.crm-heat-alerts__ico.is-flat { color: var(--status-danger); }
.crm-home-subhead { margin: 14px 0 8px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* Schedules & Rules: panel titles with an icon; rows use the overview's schedule icon (when + what). */
.crm-panel-title { display: flex; align-items: center; gap: 8px; }
.crm-panel-title__icon { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-panel-title__icon svg { width: 15px; height: 15px; }
.crm-sched-item .crm-home-sched__icon { margin-right: 4px; }
.crm-sched-item.is-on { background: rgba(255, 210, 122, 0.12); }
.crm-sched-form .crm-segmented button[hidden] { display: none; }
.crm-sched-target, .crm-sched-heataction { display: flex; }
.crm-sched-target button, .crm-sched-heataction button { flex: 1; }

/* Settings → Home API: an app's activity (time, call, status, detail, address; failures red). */
.crm-homeapi-log { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 0.8rem; }
.crm-homeapi-log ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.crm-homeapi-log li { display: grid; grid-template-columns: 130px 170px 40px 1fr 110px; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.crm-homeapi-log li.is-bad { color: var(--status-danger); }
@media (max-width: 720px) { .crm-homeapi-log li { grid-template-columns: 1fr 1fr; } }

/* Home → History: lines by day, each with the room icon (badge: the system), the sentence, who and where, and the time. */
.crm-hh-filters { display: flex; gap: 14px; flex-wrap: wrap; margin: -8px 0 18px; font-size: 0.86rem; color: var(--text-muted); }
.crm-hh-filters select { font: inherit; font-size: 0.86rem; padding: 5px 8px; margin-left: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); }
.crm-hh-list { list-style: none; margin: 0; padding: 0; }
.crm-hh-list li { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--border); }
.crm-hh-list li:last-child { border-bottom: 0; }
.crm-hh-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.crm-hh-time { font-size: 0.84rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.crm-hh-failed { color: var(--status-danger); font-weight: 600; }
.crm-hh-list li.is-failed .crm-hh-text > span:first-child { color: var(--status-danger); }

/* Projects & Tasks: Projects / Tasks tabs, project cards (task progress bar, sign-offs waiting),
   the Tasks table (tick box, inline status), the project popup's tables, and the form's rows
   for Who's involved, Tasks and Sign-offs. */
.crm-proj-tabs { margin-bottom: 14px; }
.crm-proj-late, .crm-proj-tasks td.crm-proj-late, .crm-proj-doc-table td.crm-proj-late { color: var(--status-danger); font-weight: 600; }
.crm-proj-wait { color: var(--status-warning); font-weight: 600; }
.crm-proj-progress { display: block; height: 6px; margin: 4px 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.crm-proj-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.crm-rcard.is-closed { opacity: 0.7; }
.crm-proj-tick { width: 40px; }
.crm-proj-tick input { width: 17px; height: 17px; accent-color: var(--teal); cursor: pointer; }
.crm-proj-tasks tr.is-done .crm-proj-task-title, .crm-proj-doc-table tr.is-done .crm-proj-task-title { text-decoration: line-through; color: var(--text-muted); }
.crm-proj-status { font: inherit; font-size: 0.82rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.crm-proj-link { display: block; padding: 0; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.crm-proj-link:hover span span { text-decoration: underline; }
.crm-proj-team { margin: 0; padding-left: 18px; }
.crm-proj-team li { margin-bottom: 2px; }
.crm-proj-doc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.crm-proj-doc-table th { text-align: left; font-size: 0.74rem; font-weight: 600; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.crm-proj-doc-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.crm-proj-doc-table tr { break-inside: avoid; }
.crm-proj-signed { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; }
.crm-proj-signed svg { width: 14px; height: 14px; }
.crm-proj-notes { white-space: pre-wrap; }
.crm-proj-print-only { display: none; }
.crm-proj-rows__head, .crm-proj-rows__row { display: grid; gap: 6px; align-items: center; }
.crm-proj-rows__head { margin-bottom: 4px; }
.crm-proj-rows__head span { font-size: 0.72rem; color: var(--text-muted); }
.crm-proj-rows__row { margin-bottom: 6px; }
.crm-proj-rows__row input, .crm-proj-rows__row select { padding: 8px; min-width: 0; }
.crm-proj-rows__empty { margin: 0 0 8px; }
@media (max-width: 720px) {
	/* Phones: each row wraps, the main text across the full width. */
	.crm-proj-rows__head { display: none !important; }
	.crm-proj-rows__row { grid-template-columns: 1fr 1fr !important; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
	.crm-proj-rows__row > :first-child { grid-column: 1 / -1; }
	.crm-proj-rows__row > button { justify-self: end; }
}
@media print {
	.crm-proj-print-only { display: inline; }
	.crm-proj-tick input { display: none; }
}
.crm-proj-rows__row input.crm-proj-role { background: transparent; border-style: dashed; color: var(--text-muted); }
/* Who's involved: the person picker fills its column; its list can be wider than the cell. */
.crm-proj-person { min-width: 0; }
.crm-proj-person .crm-cal-picker__list { right: auto; min-width: max(100%, 260px); z-index: 20; }
.crm-proj-rows__row .crm-cal-picker__button { padding: 6px 8px; }
/* Who's involved: each person's jobs on the project, as chips under their row. */
.crm-proj-jobs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0 10px; }
.crm-proj-jobs__label { font-size: 0.72rem; color: var(--text-muted); margin-right: 2px; }
.crm-proj-jobs .crm-pause-chip { padding: 5px 10px; font-size: 0.78rem; }
.crm-proj-rows--team .crm-proj-rows__row { padding-bottom: 4px; border-bottom: 1px dashed var(--border); margin-bottom: 10px; }
.crm-proj-jobtags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.crm-proj-jobtag { padding: 1px 8px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal); }
/* Project cards have no corner buttons (the card opens the edit popup). */
.crm-proj-grid .crm-inv-card__foot { padding-right: 0; }

/* Project popup pages: pill tabs along the top with Download technical brief on the right;
   the Technical page gets a tall editor. Cards: the download icon top right. */
.crm-proj-formtabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.crm-proj-formtabs .crm-btn--sm { display: inline-flex; align-items: center; gap: 6px; }
.crm-proj-formtabs .crm-btn--sm svg { width: 14px; height: 14px; }
.crm-proj-page--technical .crm-richtext__editor, .crm-proj-page--scope .crm-richtext__editor { min-height: 380px; }
.crm-proj-grid .crm-inv-card__actions { top: 12px; bottom: auto; right: 10px; }
.crm-proj-grid .crm-inv-card__acct { padding-right: 36px; }

/* Notes cards: no corner buttons (the card opens the edit popup); a meeting's linked calendar
   event as a chip beside the Meeting pill, in its calendar's colour with the calendar's tile. */
.crm-rgrid .crm-rcard--bare .crm-inv-card__foot { padding-right: 0; }
.crm-note-event { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 9px 2px 2px; border-radius: 99px; background: color-mix(in srgb, var(--chip, #094E67) 14%, transparent); color: var(--text); font-size: 0.75rem; text-decoration: none; }
.crm-note-event:hover { background: color-mix(in srgb, var(--chip, #094E67) 24%, transparent); }
.crm-note-event .crm-cal-tile { width: 18px; height: 18px; border-radius: 99px; flex-shrink: 0; }
.crm-note-event .crm-cal-tile svg { width: 11px; height: 11px; }
.crm-note-event > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The edit popup's View (notes) sits on the left of Cancel / Save. */
.crm-drawer-actions__view { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.crm-drawer-actions__view svg { width: 15px; height: 15px; }

/* Schedules & Rules: the Schedules / Rules / Routines sub-menu, and the routine rows (Start on the right). */
.crm-sched-tabs { margin: -8px 0 18px; }
.crm-routine .crm-btn--sm { flex-shrink: 0; }
.crm-routine__go { min-width: 92px; justify-content: center; }
.crm-routine__note { margin: 0; padding: 12px 16px 16px; }

/* Settings → Connections → Weather: each place with its temperature now, and the place search. */
.crm-weather-places { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.crm-weather-places li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.crm-weather-places__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.8rem; color: var(--text-muted); }
.crm-weather-places__name strong { color: var(--text); font-size: 0.9rem; }
.crm-weather-places__now { font-size: 0.86rem; white-space: nowrap; }
.crm-weather-add { max-width: 560px; }
.crm-weather-add input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; }
.crm-weather-results { list-style: none; margin: 6px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.crm-weather-results button { display: block; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 0.86rem; color: var(--text-muted); cursor: pointer; }
.crm-weather-results button strong { color: var(--text); }
.crm-weather-results button:hover { background: var(--surface); }
.crm-weather-home { font: inherit; font-size: 0.8rem; padding: 5px 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
@media (max-width: 560px) { .crm-weather-places li { flex-wrap: wrap; } }

/* Home overview: the weather strip under the room buttons (the chosen home's place, Open-Meteo). */
.crm-home-weather { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.crm-home-weather .crm-home-note { margin: 0; }
.crm-home-weather__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #f5c451; flex-shrink: 0; }
.crm-home-weather__icon.is-night { color: #c9d4ff; }
.crm-home-weather__icon svg { width: 26px; height: 26px; }
.crm-home-weather__now { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; min-width: 0; }
.crm-home-weather__now strong { font-size: 1.9rem; line-height: 1; grid-row: span 2; }
.crm-home-weather__now > span:nth-child(2) { font-weight: 600; }
.crm-home-weather__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.crm-home-weather__facts > span { display: flex; flex-direction: column; font-size: 0.88rem; }
.crm-home-weather__rain.is-wet strong { color: var(--teal); }
@media (max-width: 720px) { .crm-home-weather__facts { margin-left: 0; width: 100%; justify-content: space-between; } }

/* Home overview → Cameras: each camera with a Live button; the live popup. */
.crm-home-cams__live { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.crm-home-cams__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.25); margin-right: 2px; }
.crm-cam-popup { width: min(94vw, 860px); }
.crm-cam-popup .crm-drawer__head h3 { display: flex; align-items: center; gap: 8px; }
.crm-cam-popup .crm-cam-live { aspect-ratio: 16 / 9; }
.crm-cam-popup .crm-cam__actions { margin-top: 12px; }
/* Home overview → Cameras: each camera's box under its row (16:9, black, the stream when live). */
.crm-home-list li.crm-home-cams__slot { display: block; padding: 0 0 12px; border: 0; }
.crm-home-cam-box { width: 100%; }
.crm-home-cams .crm-btn--sm { flex-shrink: 0; }
/* The weather strip's Tonight: blue when it drops to 3° or below. */
.crm-home-weather__night.is-cold strong { color: #2a5fa5; }
/* Settings → Weather: the Buienradar line. */
.crm-weather-radar { margin-top: 10px; max-width: 560px; }
.crm-weather-radar .crm-row-sub { margin: 4px 0 0; }

/* Companies & Products: Look up (Companies House / KvK) above the name, and the VAT check result. */
.crm-co-lookup { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.crm-co-lookup__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.crm-co-lookup .crm-segmented button { padding: 6px 12px; font-size: 0.82rem; }
.crm-co-lookup input[type="search"] { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font: inherit; }
.crm-co-lookup .crm-row-sub { margin: 6px 0 0; }
.crm-co-lookup__results { max-height: 260px; overflow-y: auto; }
.crm-vat-result { margin: 6px 0 0; font-size: 0.84rem; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crm-vat-result:empty { display: none; }
.crm-vat-result svg { width: 15px; height: 15px; }
.crm-vat-result.is-valid { color: var(--green); }
.crm-vat-result.is-invalid { color: var(--status-danger); }
.crm-vat-result .crm-row-sub { color: var(--text-muted); }

/* Filter dropdowns: +/− on a main category opens or shuts its sub-categories. */
.crm-email-catpick__fold { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--text); font-size: 0.85rem; line-height: 1; cursor: pointer; }
span.crm-email-catpick__fold { border-color: transparent; background: none; cursor: default; }
.crm-email-catpick__fold:hover { border-color: var(--ink); }
.crm-email-catpick__menu label[hidden] { display: none; }
.crm-email-catpick__menu label.is-sub { padding-left: 34px; }
.crm-email-catpick__total { display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.78rem; }
.crm-email-catpick__total b { font-weight: 700; }
.crm-email-catpick__own { color: var(--text-muted); font-weight: 400; }

/* Dashboard: Tilburg's weather for the day (the Home overview's block) with the coming hours under it. */
.crm-dash-weather { margin-bottom: 18px; padding: 8px 14px; gap: 10px 18px; min-height: 92px; box-sizing: border-box; }
.crm-dash-weather.is-loading { justify-content: center; animation: crm-dash-weather-pulse 1.4s ease-in-out infinite; }
@keyframes crm-dash-weather-pulse { 50% { opacity: 0.55; } }
.crm-dash-weather .crm-home-weather__icon { width: 36px; height: 36px; border-radius: 10px; }
.crm-dash-weather .crm-home-weather__icon svg { width: 22px; height: 22px; }
.crm-dash-weather .crm-home-weather__now strong { font-size: 1.55rem; }
.crm-dash-weather__hours { flex: 1 1 320px; min-width: 0; display: flex; gap: 6px; overflow-x: auto; }
.crm-dash-weather__hour { flex: 1 0 54px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 10px; font-size: 0.84rem; line-height: 1.2; }
.crm-dash-weather__hour svg { width: 18px; height: 18px; }
.crm-dash-weather__rain { font-size: 0.74rem; color: #3b82f6; font-weight: 600; }
/* Dashboard: the 7 days in a row of their own that scrolls sideways (no frame around it). */
.crm-dash-week.crm-dash-days { flex-direction: row; align-items: stretch; height: 500px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
/* One day at a time: each 90% of the block (the next one peeking in), scrolled sideways; a busy day scrolls down inside itself. */
.crm-dash-days > .crm-dash-day { flex: 0 0 90%; min-width: 0; max-height: 100%; overflow-y: auto; scroll-snap-align: start; }
.crm-dash-cal { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.crm-dash-cal__title { margin: 0; font-size: 1rem; font-weight: 600; }
.crm-dash-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crm-dash-mail { max-height: 500px; overflow-y: auto; overscroll-behavior: contain; }
.crm-dash-head { justify-content: flex-end; }
.crm-dash-cal__title .crm-row-sub { font-weight: 400; margin-left: 6px; }
.crm-head-actions .crm-btn { display: inline-flex; align-items: center; gap: 6px; }
.crm-head-actions .crm-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Every Dashboard section alike: a title above, its box under it (lists scroll inside 500px), the same space between. */
.crm-dash-outstanding { max-height: 500px; overflow-y: auto; overscroll-behavior: contain; }
.crm-dash-side.crm-dash-week { gap: 18px; }
.crm-dash-cal__head { min-height: 32px; }
.crm-dash-cal > .crm-dash-cal__title { min-height: 32px; display: flex; align-items: center; }

/* Phones: the bottom bar (Admin, Finance, iamfredperry B.V. in the middle, Home, Profile) and
   the sheet of pages a tab opens above it. Hidden on wider screens. */
.crm-tabbar, .crm-tabsheet, .crm-tabsheet-backdrop { display: none; }
@media (max-width: 720px) {
	.crm-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ink); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); }
	.crm-tabbar__tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 2px; background: none; border: none; color: rgba(255, 255, 255, 0.6); font: inherit; font-size: 0.68rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
	.crm-tabbar__tab svg { width: 22px; height: 22px; }
	.crm-tabbar__tab.is-active, .crm-tabbar__tab.is-open { color: #fff; }
	.crm-tabbar__avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -24px; border-radius: 50%; overflow: hidden; background: #3a3a3a; color: #fff; border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); box-sizing: border-box; }
	.crm-tabbar__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.crm-tabbar__avatar .crm-profile__initials { font-weight: 600; font-size: 1.05rem; }
	.crm-tabbar__tab .crm-tabbar__avatar svg { width: 24px; height: 24px; }
	.crm-tabbar__appicon { display: block; width: 24px; height: 24px; border-radius: 6px; opacity: 0.75; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
	.crm-tabbar__tab.is-active .crm-tabbar__appicon, .crm-tabbar__tab.is-open .crm-tabbar__appicon { opacity: 1; box-shadow: 0 0 0 1px #fff; }
	.crm-tabbar__tab--middle.is-active .crm-tabbar__avatar, .crm-tabbar__tab--middle.is-open .crm-tabbar__avatar { border-color: #fff; }
	.crm-tabsheet-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 48; background: rgba(0, 0, 0, 0.35); }
	.crm-tabsheet:not([hidden]) { display: flex; flex-direction: column; position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 49; max-height: 65vh; overflow-y: auto; padding: 8px; border-radius: 16px; background: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
	.crm-tabsheet__title { margin: 4px 10px 6px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
	.crm-tabsheet .crm-nav-btn, .crm-tabsheet .crm-signout-btn { width: 100%; font-size: 1rem; padding: 12px 10px; }
	.crm-main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
/* Desktop: the 7 days go down, not sideways, in a block as tall as Latest emails (500px) that scrolls. */
@media (min-width: 721px) {
	.crm-dash-week.crm-dash-days { flex-direction: column; height: 500px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; overscroll-behavior: contain; }
	.crm-dash-days > .crm-dash-day { flex: none; max-height: none; overflow: visible; }
	.crm-dash-mail { height: 500px; box-sizing: border-box; }
}
@media (max-width: 720px) {
	.crm-tabbar__tile { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
	.crm-tabbar__tab .crm-tabbar__tile svg { width: 16px; height: 16px; }
}
@media (max-width: 720px) {
	.crm-tabbar__wordmark { display: inline-flex; align-items: center; height: 22px; font-weight: 600; font-size: 1rem; letter-spacing: -0.6px; line-height: 1; }
}
@media (max-width: 720px) {
	/* Scrolling down: only the black bar fades; the logo and the bell stay, each in a small ink pill so they read on the page. */
	.crm-mobile-topbar { transition: background-color 0.25s ease; }
	/* The pill's padding is always there (offset by a negative margin), so "ia" stays put when the logo shortens to iafp_. */
	.crm-mobile-topbar .crm-logo { transition: background-color 0.25s ease, box-shadow 0.25s ease; border-radius: 999px; padding: 6px 12px; margin: -6px -12px; }
	.crm-mobile-topbar.is-faded { background-color: transparent; pointer-events: none; }
	.crm-mobile-topbar.is-faded .crm-logo, .crm-mobile-topbar.is-faded .crm-notify { pointer-events: auto; }
	.crm-mobile-topbar.is-faded .crm-logo { background: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
	.crm-mobile-topbar.is-faded .crm-notify__btn { background: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
}
.crm-logo__short { display: none; }
@media (max-width: 720px) {
	.crm-mobile-topbar.is-faded .crm-logo__full { display: none; }
	.crm-mobile-topbar.is-faded .crm-logo__short { display: inline; }
}
.crm-dash-heat.is-on { color: #e8590c; border-color: #e8590c; }
/* Phones: the month on the left, then < Today >, then a round + (no "Add event" text), on one line. */
@media (max-width: 720px) {
	.crm-cal-toolbar { flex-wrap: nowrap; gap: 6px; }
	.crm-cal-toolbar__month { order: -1; margin: 0; font-size: 1.25rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.crm-cal-toolbar [data-cal-add] { width: 44px; height: 40px; padding: 0; justify-content: center; border-radius: 999px; flex-shrink: 0; }
	.crm-cal-toolbar [data-cal-add] span { display: none; }
	.crm-cal-nav { flex-shrink: 0; }
}
/* Events in {Month}: each day's events as the Dashboard's event blocks. */
.crm-cal-list__events { display: flex; flex-direction: column; gap: 6px; }
/* Messages as cards (msgCardHtml): the Slack avatar sized like the other cards' tiles; unread in bold. */
.crm-msg-card .crm-inv-card__acct .crm-msg-avatar { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; font-size: 1rem; }
.crm-msg-card .crm-inv-card__acct .crm-msg-avatar svg { width: 22px; height: 22px; }
.crm-msg-card__team { display: block; width: 100%; margin-top: -2px; }
.crm-msg-card.is-unread .crm-rcard__title { font-weight: 700; }
.crm-msg-card .crm-rcard__title .crm-email-row__contact { margin-right: 4px; }
.crm-co-card .crm-inv-card__acct .crm-cal-tile { width: 40px; height: 40px; border-radius: 10px; }
.crm-co-card .crm-inv-card__acct .crm-cal-tile svg { width: 22px; height: 22px; }
.crm-contact-avatar { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; display: block; }
/* Contact edit → Photo: the photo (or initials) beside Upload photo / From another source / Remove. */
.crm-contact-photo { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.crm-contact-photo__img { flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.2rem; color: var(--text-muted); }
.crm-contact-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-contact-photo__side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.crm-contact-photo__btns, .crm-contact-photo__other { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crm-contact-photo__btns .crm-btn svg, .crm-contact-photo__other .crm-btn svg { width: 14px; height: 14px; }
.crm-contact-photo__btns label.crm-btn { cursor: pointer; }
.crm-msg-tabsbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-msg-tabsbar .crm-msg-tabs { margin: 0; }
/* Room on the right and bottom for the badge, so a card that clips its contents never cuts it off. */
.crm-contact-avatar-wrap { position: relative; flex-shrink: 0; display: inline-block; padding: 0 6px 6px 0; line-height: 0; }
.crm-contact-avatar__badge { position: absolute; right: 0; bottom: 0; display: inline-flex; border-radius: 7px; box-shadow: 0 0 0 2px var(--surface, #fff); }
.crm-co-card .crm-inv-card__acct .crm-contact-avatar__badge .crm-cal-tile { width: 20px; height: 20px; border-radius: 6px; }
.crm-co-card .crm-inv-card__acct .crm-contact-avatar__badge .crm-cal-tile svg { width: 12px; height: 12px; }
.crm-rem-item .crm-ev-tick { margin: 0 10px 0 auto; align-self: center; flex-shrink: 0; }

/* Auto invoices: the section above the invoices, the schedule popup and the email check popup. */
.crm-autoinv { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.crm-rcard.is-paused { opacity: 0.6; }
.crm-autoinv-modal { max-width: 560px; }
.crm-autoinv-form { display: flex; flex-direction: column; gap: 12px; }
.crm-autoinv-form [hidden] { display: none !important; }
.crm-autoinv-form .crm-segmented button.is-active { background: var(--ink); color: #fff; }
.crm-autoinv-email { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.crm-autoinv-email legend { font-weight: 600; font-size: 0.85rem; padding: 0 4px; }
.crm-autoinv-email label, .crm-autoinv-active { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.crm-autoinv-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.crm-invmail-modal { max-width: 720px; }
.crm-invmail-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 0.9rem; }
.crm-invmail-meta dt { color: var(--text-muted); }
.crm-invmail-meta dd { margin: 0; }
.crm-invmail-frame { width: 100%; height: 480px; border: 1px solid var(--border); border-radius: 10px; background: #F7F7F5; }
.crm-btn--icon.is-attention { color: #e8890c; box-shadow: inset 0 0 0 1px #e8890c; }

/* Replacements popup (tags to copy) and the auto invoice email preview. */
.crm-tags-overlay { z-index: 1200; }
.crm-tags-modal { max-width: 620px; }
.crm-tags-group { margin: 16px 0 6px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.crm-tags-list { display: flex; flex-direction: column; gap: 4px; }
.crm-tag { display: grid; grid-template-columns: minmax(150px, auto) 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; }
.crm-tag:hover { border-color: var(--ink); }
.crm-tag.is-copied { border-color: #2e9e4f; box-shadow: inset 0 0 0 1px #2e9e4f; }
.crm-tag code { font-size: 0.85rem; font-weight: 600; }
.crm-tag__what { font-size: 0.85rem; }
.crm-tag__eg { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 720px) { .crm-tag { grid-template-columns: 1fr; gap: 2px; } }
.crm-autoinv-tagsrow { margin-top: 6px; }
.crm-autoinv-mail { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.crm-autoinv-mail .crm-invmail-meta { margin: 0; }
.crm-autoinv-mail__text { width: 100%; box-sizing: border-box; max-height: 220px; overflow: auto; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font: inherit; font-size: 0.84rem; white-space: pre-wrap; }
.crm-autoinv-mailtext { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); }
.crm-autoinv-mailtext textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9rem; line-height: 1.5; }
.crm-autoinv-tagsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-autoinv-tagsrow .crm-field-note { margin: 0; flex: 1 1 200px; }
.crm-autoinv-form #crm-ai-desc { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; resize: vertical; }

/* Email address boxes with a dropdown of contacts (wireEmailPicker). */
.crm-mailpick { position: relative; }
.crm-mailpick__menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 4px; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); }
.crm-mailpick__menu[hidden] { display: none; }
.crm-mailpick__head { margin: 6px 8px 4px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.crm-mailpick__line { border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.crm-mailpick__row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 7px 8px; border: none; border-radius: 6px; background: none; font: inherit; color: var(--text); cursor: pointer; }
.crm-mailpick__row strong { font-size: 0.88rem; }
.crm-mailpick__row:hover, .crm-mailpick__row.is-active { background: var(--surface-2); }
.crm-mailpick__none { margin: 6px 8px; font-size: 0.85rem; color: var(--text-muted); }
.crm-invmail-attach { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 0.88rem; }
.crm-invmail-attach svg { width: 16px; height: 16px; }
.crm-invmail-attach span { flex: 1; }

/* Email composer: Attach (from this device / CRM item) and the CRM item picker. */
.crm-em-attach__row { position: relative; display: inline-block; }
.crm-em-attach__row .crm-btn svg { width: 14px; height: 14px; }
.crm-em-attach__menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); }
.crm-em-attach__menu[hidden] { display: none; }
.crm-em-attach__menu button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: none; border-radius: 6px; background: none; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.crm-em-attach__menu button:hover { background: var(--surface-2); }
.crm-em-attach__menu svg { width: 16px; height: 16px; }
.crm-email-file svg { width: 14px; height: 14px; flex-shrink: 0; }
.crm-crmpick { max-width: 620px; }
.crm-crmpick__q { width: 100%; box-sizing: border-box; margin: 10px 0; }
.crm-crmpick__list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.crm-crmpick__row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.crm-crmpick__row > span { display: flex; flex-direction: column; min-width: 0; }
.crm-crmpick__row.is-done { opacity: 0.55; cursor: default; }
.crm-crmpick__row input { margin-top: 3px; }

/* Add event → Repeats: the choice, day buttons for weekly, and when it ends. */
.crm-repeat { display: flex; flex-direction: column; gap: 8px; }
.crm-repeat__days { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-repeat__days[hidden], .crm-repeat__ends[hidden], .crm-repeat [hidden] { display: none; }
.crm-repeat__day { min-width: 46px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.crm-repeat__day.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.crm-repeat__ends { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-repeat__ends label { font-size: 0.85rem; color: var(--text-muted); }
.crm-repeat__ends input[type="number"] { width: 80px; }
.crm-del-series__opts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.crm-del-series__opts label { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; cursor: pointer; }