/* CountMe dashboard styles — split into modules under dashboard/ (§6.3). */
@import url('dashboard/01-core.css');
@import url('dashboard/02-tables.css');
@import url('dashboard/03-accordion.css');
@import url('dashboard/04-analytics.css');
@import url('dashboard/05-superadmin.css');
@import url('dashboard/06-overlays.css');
@import url('dashboard/07-modal.css');
@import url('dashboard/08-panels.css');
@import url('dashboard/09-projects.css');
@import url('dashboard/10-invoices-misc.css');
@import url('dashboard/11-agreements.css');
@import url('dashboard/12-themes.css');
@import url('dashboard/13-mobile-calendar.css');
@import url('dashboard/14-print.css');

/* Service edit page — scoped so .cm-tabs does not collide with project-detail tabs in 09-projects.css */
.cm-service-edit .cm-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0;
  border-bottom: 1px solid var(--cm-border);
}
.cm-service-edit .cm-tab {
  background: transparent;
  border: 0;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--cm-muted);
  border-bottom: 2px solid transparent;
  font-size: var(--cm-text-md);
  font-weight: 500;
}
.cm-service-edit .cm-tab:hover { color: var(--cm-text); }
.cm-service-edit .cm-tab.is-active {
  color: var(--cm-text);
  border-bottom-color: var(--cm-primary);
}
.cm-service-edit .cm-tab[disabled] { opacity: 0.5; cursor: not-allowed; }
.cm-service-edit .cm-dirty-dot {
  color: var(--cm-primary);
  font-size: var(--cm-text-xl);
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
}
.cm-service-edit .cm-breadcrumb-link {
  color: var(--cm-muted);
  text-decoration: none;
  font-size: var(--cm-text-base);
  display: inline-block;
  margin-bottom: 6px;
}
.cm-service-edit .cm-breadcrumb-link:hover { color: var(--cm-text); }
.cm-service-edit .cm-page-header { align-items: flex-start; }

.cm-service-edit .cm-pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1200px) {
  .cm-service-edit .cm-pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cm-service-edit .cm-pkg-grid { grid-template-columns: 1fr; }
}
.cm-service-edit .cm-pkg-card {
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  padding: var(--cm-card-pad-md);
  background: var(--cm-surface);
  min-width: 0;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.cm-pkg-drag {
  cursor: grab;
  opacity: 0.5;
  user-select: none;
  padding: 4px;
  display: inline-block;
  color: var(--cm-muted);
  transition: opacity 0.15s;
}
.cm-pkg-drag:hover { opacity: 1; }
.cm-pkg-drag:active { cursor: grabbing; }
.cm-pkg-card.is-drag-target {
  border-color: var(--cm-primary);
  background: var(--cm-primary-soft, rgba(0, 122, 255, 0.08));
}
.cm-pkg-card.is-pkg-dragging {
  opacity: 0.4;
}
.cm-service-edit .cm-subitem-row {
  align-items: center;
}
.cm-service-edit .cm-pro-lock-card {
  text-align: center;
  padding: 32px 24px;
  border: 1px dashed var(--cm-border);
  border-radius: var(--cm-radius-lg);
  background: var(--cm-bg-0);
}
.cm-service-edit .cm-pro-lock-card h3 {
  margin: 0 0 12px;
}
.cm-service-edit .cm-pro-lock-card p {
  color: var(--cm-muted);
  margin: 0 0 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.cm-callout {
  padding: 12px 16px;
  border-radius: var(--cm-radius-sm);
  margin-bottom: 16px;
}
.cm-callout-warning {
  background: rgba(255, 200, 0, 0.12);
  border: 1px solid rgba(255, 180, 0, 0.4);
  color: var(--cm-warn-text);
}

.cm-service-edit .cm-tr-base {
  padding: 8px 12px;
  background: var(--cm-bg-0);
  border-radius: var(--cm-radius-sm);
  color: var(--cm-muted);
  font-size: var(--cm-text-md);
  border: 1px dashed var(--cm-border);
  white-space: pre-wrap;
}

.cm-service-edit .cm-landing-teaser {
  max-width: 640px;
  margin: 0 auto;
}
.cm-service-edit .cm-landing-mockup {
  margin-bottom: 20px;
}
.cm-service-edit .cm-landing-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.cm-service-edit .cm-landing-benefits li {
  padding: 6px 0 6px 24px;
  position: relative;
  color: var(--cm-muted);
  font-size: var(--cm-text-md);
}
.cm-service-edit .cm-landing-benefits li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--cm-primary);
  font-weight: bold;
}

.cm-service-edit .cm-landing-editor { max-width: 720px; }
.cm-service-edit .cm-landing-hero-preview {
  padding: 12px;
  border: 1px dashed var(--cm-border);
  border-radius: 8px;
  background: var(--cm-bg-0);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-service-edit .cm-landing-hero-empty {
  color: var(--cm-muted);
  font-size: var(--cm-text-md);
}
.cm-service-edit .cm-landing-preview-box code {
  font-size: var(--cm-text-base);
  color: var(--cm-text);
}

.cm-nav-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: var(--cm-text-xs);
	font-weight: 700;
	background: var(--cm-danger, #dc2626);
	color: #fff;
	border-radius: 999px;
	vertical-align: middle;
}
.cm-lead-board {
	display: grid;
	grid-template-columns: repeat(5, minmax(200px, 1fr));
	gap: 12px;
	overflow-x: auto;
}
.cm-lead-col {
	background: var(--cm-bg-0, #f6f5f1);
	border: 1px solid var(--cm-border, #e5e5e5);
	border-radius: var(--cm-radius-md, 8px);
	padding: 12px;
	min-height: 200px;
}
.cm-lead-col h3 {
	font-size: var(--cm-text-base);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 12px;
}
.cm-lead-col-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 150px;
}
.cm-lead-col.is-drop-target {
	outline: 2px dashed var(--cm-primary);
	outline-offset: -4px;
	background: rgba(var(--cm-primary-rgb), 0.04);
}
.cm-lead-card {
	background: #fff;
	border: 1px solid var(--cm-border, #e5e5e5);
	border-radius: 6px;
	padding: 10px;
	cursor: grab;
}
.cm-lead-card:active {
	cursor: grabbing;
}
/* BUG-046: removed .cm-pill-status-* (Tailwind palette). Migrated to .cm-status .cm-status-{tone}. */
@media (max-width: 900px) {
	.cm-lead-board { grid-template-columns: repeat(2, 1fr); }
}

.cm-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--cm-z-modal);
	padding: 20px;
}
/* ─── Drawer (fixed right-side panel, e.g. leads edit) ────── */
.cm-drawer {
	position: fixed;
	top: 0;
	right: -480px;
	bottom: 0;
	width: 480px;
	max-width: 100vw;
	background: var(--cm-surface, #fff);
	box-shadow: -8px 0 30px rgba(0,0,0,.12);
	z-index: var(--cm-z-elevated);
	overflow-y: auto;
	transition: right .3s ease;
	padding: 24px;
}
.cm-drawer.is-open {
	right: 0;
}
.cm-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.3);
	z-index: 99;
}
@media (max-width: 540px) {
	.cm-drawer {
		width: 100vw;
		right: -100vw;
	}
}

.cm-marketing-editor .cm-marketing-section {
	border-top: 1px solid var(--cm-border, #e5e5e5);
	padding-top: 16px;
}
.cm-marketing-editor .cm-marketing-section:first-child {
	border-top: 0;
	padding-top: 0;
}
.cm-marketing-editor .cm-marketing-item textarea {
	resize: vertical;
}
.cm-marketing-gallery-thumb {
	background: var(--cm-bg-0, #f6f5f1);
	border-radius: 6px;
	overflow: hidden;
}
.cm-marketing-gallery-thumb img {
	width: 100%;
}

/* Extension PRO lock teaser */
.cm-ext-locked-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.cm-ext-locked-bullets,
.cm-ext-locked-steps {
	padding-left: 20px;
	line-height: 1.8;
	margin: 8px 0 0;
}
.cm-ext-locked h2 {
	margin: 0 0 8px;
}
@media (max-width: 820px) {
	.cm-ext-locked-grid { grid-template-columns: 1fr; }
}

/* License gate modal */
.cm-license-gate { max-width: 720px; width: 100%; }
.cm-license-gate-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}
.cm-license-gate-features {
	margin: 8px 0 0;
	padding-left: 20px;
	line-height: 1.7;
	font-size: var(--cm-text-base);
}
@media (max-width: 720px) {
	.cm-license-gate-grid { grid-template-columns: 1fr; }
}

/* Demo mode — blur sensitive data for screenshares / recordings */
.cm-sidebar-foot-tools {
	padding: 0 8px 8px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.cm-demo-toggle {
	width: 100%;
	font-size: var(--cm-text-sm);
	justify-content: flex-start;
}
.cm-demo-toggle.is-active {
	background: var(--cm-warning-soft, #fef3c7) !important;
	color: var(--cm-warning-text, #92400e) !important;
	border-color: var(--cm-warning, #d97706) !important;
}

/* ───────────────────────────────────────────────────────────────
 * Demo mode — blur rules (category-scoped)
 *
 * Each category is opt-in: the JS toggles a `data-blur-{cat}="1"`
 * attribute on <body> when the user enables it in Impostazioni →
 * Privacy demo. Rules are scoped by that attribute so the operator
 * can control exactly what's blurred.
 *
 * Categories: contacts | addresses | fiscal | names | amounts |
 *             numbers | dates
 *
 * Explicit opt-in (`data-blur="1"` / `.cm-sensitive`) always blurs
 * regardless of category selection, so one-off overrides still work.
 * ─────────────────────────────────────────────────────────────── */

/* Shared visual treatment used by every category selector below.
 *
 * N10 — Accessibility note: `filter: blur()` only affects visual rendering.
 * Screen readers still announce the underlying text, leaking the very data
 * we're hiding from over-the-shoulder demo viewers. We add `speak: never;`
 * (CSS Speech Module L1) where the UA supports it — coverage is partial
 * (Chrome ignores it, Safari/Orca treat it best-effort), so for guaranteed
 * suppression callers should additionally set `aria-hidden="true"` on the
 * element via JS. The `.cm-sensitive[aria-hidden]` rule below makes that
 * opt-out cleanly compose with the blur (still visually blurred but also
 * removed from the accessibility tree).
 */
.cm-demo-blur-effect,
body.cm-demo-mode [data-blur="1"],
body.cm-demo-mode .cm-sensitive {
	filter: blur(8px);
	transition: filter 0.15s ease;
	user-select: none;
	speak: never;
}

/* N10 — explicit opt-out from the SR accessibility tree for blurred content.
 * JS can set `aria-hidden="true"` on a `.cm-sensitive` node to guarantee the
 * blurred value isn't announced, regardless of `speak` support. */
body.cm-demo-mode .cm-sensitive[aria-hidden="true"],
body.cm-demo-mode [data-blur="1"][aria-hidden="true"] {
	filter: blur(8px);
	user-select: none;
}

/* ── CATEGORY: contacts — email, phone, mailto/tel links ────────── */
body.cm-demo-mode[data-blur-contacts="1"] td[data-col="email"],
body.cm-demo-mode[data-blur-contacts="1"] td[data-col="phone"],
body.cm-demo-mode[data-blur-contacts="1"] td[data-col="mobile"],
body.cm-demo-mode[data-blur-contacts="1"] a[href^="mailto:"],
body.cm-demo-mode[data-blur-contacts="1"] a[href^="tel:"],
body.cm-demo-mode[data-blur-contacts="1"] .cm-client-card-contact,
body.cm-demo-mode[data-blur-contacts="1"] .cm-client-card-contact * {
	filter: blur(8px);
	transition: filter 0.15s ease;
	user-select: none;
	/* N10 — partial SR coverage; pair with aria-hidden for guaranteed mute. */
	speak: never;
}
body.cm-demo-mode[data-blur-contacts="1"] input[type="email"],
body.cm-demo-mode[data-blur-contacts="1"] input[type="tel"],
body.cm-demo-mode[data-blur-contacts="1"] input[data-settings-field="email"],
body.cm-demo-mode[data-blur-contacts="1"] input[data-settings-field="phone"],
body.cm-demo-mode[data-blur-contacts="1"] input[data-field="client_email"],
body.cm-demo-mode[data-blur-contacts="1"] input[data-field="client_phone"] {
	color: transparent;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* ── CATEGORY: addresses — street, postcode, city, province ─────── */
body.cm-demo-mode[data-blur-addresses="1"] td[data-col="address"],
body.cm-demo-mode[data-blur-addresses="1"] td[data-col="street_address"],
body.cm-demo-mode[data-blur-addresses="1"] td[data-col="city"],
body.cm-demo-mode[data-blur-addresses="1"] td[data-col="postcode"],
body.cm-demo-mode[data-blur-addresses="1"] td[data-col="province"] {
	filter: blur(8px);
	transition: filter 0.15s ease;
	user-select: none;
	speak: never;
}
body.cm-demo-mode[data-blur-addresses="1"] input[data-settings-field="street_address"],
body.cm-demo-mode[data-blur-addresses="1"] input[data-settings-field="city"],
body.cm-demo-mode[data-blur-addresses="1"] input[data-settings-field="postcode"],
body.cm-demo-mode[data-blur-addresses="1"] input[data-settings-field="province"],
body.cm-demo-mode[data-blur-addresses="1"] input[data-field="client_street_address"],
body.cm-demo-mode[data-blur-addresses="1"] input[data-field="client_city"],
body.cm-demo-mode[data-blur-addresses="1"] input[data-field="client_postcode"],
body.cm-demo-mode[data-blur-addresses="1"] input[data-field="client_province"] {
	color: transparent;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* ── CATEGORY: fiscal — VAT / CF / PEC / SDI / IBAN / website ───── */
body.cm-demo-mode[data-blur-fiscal="1"] td[data-col="vat"],
body.cm-demo-mode[data-blur-fiscal="1"] td[data-col="cf"],
body.cm-demo-mode[data-blur-fiscal="1"] td[data-col="fiscal_code"],
body.cm-demo-mode[data-blur-fiscal="1"] td[data-col="pec"],
body.cm-demo-mode[data-blur-fiscal="1"] td[data-col="sdi"],
body.cm-demo-mode[data-blur-fiscal="1"] td[data-col="iban"],
body.cm-demo-mode[data-blur-fiscal="1"] td[data-col="website"] {
	filter: blur(8px);
	transition: filter 0.15s ease;
	user-select: none;
	speak: never;
}
body.cm-demo-mode[data-blur-fiscal="1"] input[data-settings-field="vat_number"],
body.cm-demo-mode[data-blur-fiscal="1"] input[data-settings-field="fiscal_code"],
body.cm-demo-mode[data-blur-fiscal="1"] input[data-settings-field="iban"],
body.cm-demo-mode[data-blur-fiscal="1"] input[data-settings-field="pec"],
body.cm-demo-mode[data-blur-fiscal="1"] input[data-settings-field="sdi"],
body.cm-demo-mode[data-blur-fiscal="1"] input[data-field="client_vat"],
body.cm-demo-mode[data-blur-fiscal="1"] input[data-field="client_cf"],
body.cm-demo-mode[data-blur-fiscal="1"] input[data-field="client_pec"],
body.cm-demo-mode[data-blur-fiscal="1"] input[data-field="client_sdi"] {
	color: transparent;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* ── CATEGORY: names — client/company/contact names ──────────────── */
body.cm-demo-mode[data-blur-names="1"] td[data-col="client"],
body.cm-demo-mode[data-blur-names="1"] td[data-col="company"],
body.cm-demo-mode[data-blur-names="1"] td[data-col="name"],
body.cm-demo-mode[data-blur-names="1"] td[data-col="contact"],
body.cm-demo-mode[data-blur-names="1"] td[data-col="contact_name"],
body.cm-demo-mode[data-blur-names="1"] td[data-col="agreement"],
body.cm-demo-mode[data-blur-names="1"] td[data-col="companies"],
body.cm-demo-mode[data-blur-names="1"] .cm-client-info,
body.cm-demo-mode[data-blur-names="1"] .cm-client-info * {
	filter: blur(8px);
	transition: filter 0.15s ease;
	user-select: none;
	speak: never;
}
body.cm-demo-mode[data-blur-names="1"] input[data-field="client_name"],
body.cm-demo-mode[data-blur-names="1"] input[data-field="client_company"],
body.cm-demo-mode[data-blur-names="1"] input[data-field="client_contact_name"] {
	color: transparent;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* ── CATEGORY: amounts — every monetary value ────────────────────── */
body.cm-demo-mode[data-blur-amounts="1"] .cm-kpi,
body.cm-demo-mode[data-blur-amounts="1"] .cm-kpi-value,
body.cm-demo-mode[data-blur-amounts="1"] .cm-kpi-amount,
body.cm-demo-mode[data-blur-amounts="1"] .cm-dash-kpi-value,
body.cm-demo-mode[data-blur-amounts="1"] .cm-dash-kpi-main-value,
body.cm-demo-mode[data-blur-amounts="1"] .cm-sa-kpi-value,
body.cm-demo-mode[data-blur-amounts="1"] .cm-quote-total,
body.cm-demo-mode[data-blur-amounts="1"] .cm-quote-amount,
body.cm-demo-mode[data-blur-amounts="1"] .cm-currency,
body.cm-demo-mode[data-blur-amounts="1"] .cm-amount,
body.cm-demo-mode[data-blur-amounts="1"] .cm-total,
body.cm-demo-mode[data-blur-amounts="1"] .cm-price,
body.cm-demo-mode[data-blur-amounts="1"] .cm-stat-value,
body.cm-demo-mode[data-blur-amounts="1"] .cm-summary-amount,
body.cm-demo-mode[data-blur-amounts="1"] td[data-col="total"],
body.cm-demo-mode[data-blur-amounts="1"] td[data-col="amount"],
body.cm-demo-mode[data-blur-amounts="1"] td[data-col="price"],
body.cm-demo-mode[data-blur-amounts="1"] td[data-col="subtotal"],
body.cm-demo-mode[data-blur-amounts="1"] td[data-col="tax"],
body.cm-demo-mode[data-blur-amounts="1"] td[data-col="vat_amount"],
body.cm-demo-mode[data-blur-amounts="1"] .cm-toolbar strong:not(.cm-status-label) {
	filter: blur(8px);
	transition: filter 0.15s ease;
	user-select: none;
	speak: never;
}
body.cm-demo-mode[data-blur-amounts="1"] input[type="number"] {
	color: transparent;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* ── CATEGORY: numbers — document sequence numbers ───────────────── */
body.cm-demo-mode[data-blur-numbers="1"] td[data-col="quote_number"],
body.cm-demo-mode[data-blur-numbers="1"] td[data-col="invoice_number"],
body.cm-demo-mode[data-blur-numbers="1"] .cm-quote-number,
body.cm-demo-mode[data-blur-numbers="1"] .cm-invoice-number {
	filter: blur(8px);
	transition: filter 0.15s ease;
	user-select: none;
	speak: never;
}

/* ── CATEGORY: dates — off by default ────────────────────────────── */
body.cm-demo-mode[data-blur-dates="1"] td[data-col="created_at"],
body.cm-demo-mode[data-blur-dates="1"] td[data-col="accepted_at"],
body.cm-demo-mode[data-blur-dates="1"] td[data-col="due_date"],
body.cm-demo-mode[data-blur-dates="1"] td[data-col="date"],
body.cm-demo-mode[data-blur-dates="1"] td[data-col="expiry_date"] {
	filter: blur(8px);
	transition: filter 0.15s ease;
	user-select: none;
	speak: never;
}
body.cm-demo-mode[data-blur-dates="1"] input[type="date"],
body.cm-demo-mode[data-blur-dates="1"] input[type="datetime-local"] {
	color: transparent;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* Persistent "demo mode" corner badge so the operator never forgets
   it's on (blur alone is easy to miss if there's no sensitive data
   on the current view). */
body.cm-demo-mode::before {
	content: "DEMO MODE — dati oscurati";
	position: fixed;
	bottom: 12px;
	right: 12px;
	z-index: var(--cm-z-debug);
	/* Darker amber: 7.1:1 contrast vs #fff, meets WCAG AAA. Old #d97706 was 3.5:1. */
	background: #92400e;
	color: #fff;
	font: 600 11px/1 system-ui, sans-serif;
	padding: 6px 10px;
	border-radius: 999px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	pointer-events: none;
}

/* ── Google Leads / Prospect cards ─── */
.cm-score-high { background: rgba(var(--cm-success-rgb), 0.18); color: var(--cm-success); }
.cm-score-mid  { background: rgba(var(--cm-warn-rgb), 0.18); color: var(--cm-warn-text); }
.cm-score-low  { background: rgba(var(--cm-muted-rgb), 0.18); color: var(--cm-muted); }
.cm-gp-prospect.is-imported { opacity: 0.5; }
.cm-stars { color: #f59e0b; letter-spacing: 1px; }

/* ── My Area KPI grid (responsive) ─── */
.cm-my-area-kpi {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 960px) {
	.cm-my-area-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cm-my-area-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.cm-my-area-kpi { grid-template-columns: 1fr; }
}

/* ── My Area weekly calendar ─── */
.cm-my-area-calendar { margin-top: 16px; }
.cm-my-area-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}
.cm-my-area-cal-col {
	border: 1px solid var(--cm-border);
	border-radius: var(--cm-radius-md);
	padding: 8px;
	min-height: 110px;
	background: var(--cm-bg-0);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cm-my-area-cal-col.is-today {
	border-color: var(--cm-primary);
	box-shadow: 0 0 0 1px var(--cm-primary) inset;
}
.cm-my-area-cal-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	padding-bottom: 4px;
	border-bottom: 1px dashed var(--cm-border);
}
.cm-my-area-cal-tasks { display: flex; flex-direction: column; gap: 4px; }
.cm-my-area-cal-task {
	display: block;
	font-size: var(--cm-text-sm);
	padding: 4px 6px;
	border-radius: var(--cm-radius-sm);
	background: var(--cm-surface);
	border: 1px solid var(--cm-border);
	color: var(--cm-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cm-my-area-cal-task:hover { border-color: var(--cm-primary); }
.cm-my-area-cal-task.is-overdue {
	border-color: var(--cm-danger);
	color: var(--cm-danger);
}
@media (max-width: 860px) {
	.cm-my-area-cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-my-area-cal-col { min-height: 90px; }
}
@media (max-width: 480px) {
	.cm-my-area-cal-grid { grid-template-columns: 1fr; }
}

/* ── Pin button (star toggle) ─── */
.cm-pin-btn {
	font-size: var(--cm-text-lg);
	line-height: 1;
	padding: 4px 8px;
	min-width: 32px;
}
.cm-pin-btn.is-pinned {
	color: #f59e0b;
	border-color: #f59e0b;
}

/* ── My Area preferiti (pinned) grid ─── */
.cm-my-area-pinned { margin-bottom: 16px; }
.cm-my-area-pin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.cm-my-area-pin-card {
	display: block;
	border: 1px solid var(--cm-border);
	border-radius: var(--cm-radius-md);
	padding: 10px 12px;
	background: var(--cm-bg-0);
	color: var(--cm-text);
	text-decoration: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cm-my-area-pin-card:hover {
	border-color: var(--cm-primary);
	box-shadow: 0 0 0 1px var(--cm-primary) inset;
}
.cm-my-area-pin-type {
	font-size: var(--cm-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cm-muted);
	margin-bottom: 2px;
}
.cm-my-area-pin-title {
	font-size: var(--cm-text-md);
	line-height: 1.3;
}

/* ── My Area activity feed ─── */
.cm-my-area-activity-list {
	max-height: 320px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 4px;
}
.cm-my-area-activity-item {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--cm-border);
	border-radius: var(--cm-radius-sm);
	background: var(--cm-bg-0);
	color: var(--cm-text);
	text-decoration: none;
	font-size: var(--cm-text-base);
	line-height: 1.4;
}
a.cm-my-area-activity-item:hover { border-color: var(--cm-primary); }
.cm-my-area-activity-date {
	color: var(--cm-muted);
	font-size: var(--cm-text-sm);
	white-space: nowrap;
}
.cm-my-area-activity-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── KPI notification badge dot ─── */
.cm-badge-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cm-danger);
	margin-left: 6px;
	vertical-align: middle;
}

/* Sidebar macro-nav groups — Wave 2026-04-22 */
.cm-macro-nav { margin-top: 8px; }
.cm-macro-nav:first-child { margin-top: 0; }
.cm-macro-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px 4px;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.6;
  font-size: var(--cm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  outline: none;
  transition: opacity 0.15s ease;
}
.cm-macro-nav-header:hover { opacity: 0.9; }
.cm-macro-nav-header:focus-visible {
  outline: 2px solid var(--cm-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.cm-macro-nav-header:hover .cm-macro-nav-caret { opacity: 1; }
.cm-macro-nav-label { display: inline-block; }
.cm-macro-nav-caret { display: inline-flex; width: 14px; height: 14px; transition: transform 0.15s ease, opacity 0.15s ease; opacity: 0.6; }
.cm-macro-nav-caret svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.cm-macro-nav.is-open .cm-macro-nav-caret { transform: rotate(0deg); }
.cm-macro-nav:not(.is-open) .cm-macro-nav-caret { transform: rotate(-90deg); }
.cm-macro-nav-body { display: none; }
.cm-macro-nav.is-open .cm-macro-nav-body { display: block; }

.cm-assignee-badge { font-size: var(--cm-text-sm); background: var(--cm-bg-0); color: var(--cm-muted); border: 1px solid var(--cm-border); padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.cm-assignee-badge.is-me { color: var(--cm-primary); border-color: var(--cm-primary); background: rgba(var(--cm-primary-rgb),0.06); }
.cm-assignee-badge.is-missing { color: var(--cm-danger); border-color: var(--cm-danger); background: rgba(220,53,69,0.06); }