/* FILE GENERATO: modificare src/main/frontend/css, poi eseguire npm run build:css. */
/* CrawlMole — design system condiviso: token, base, utility e componenti globali. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-700-latin.woff2') format('woff2');
}
:root {
  /* Scala di spacing condivisa da primitive, componenti e utility applicative. */
  --cm-space-0: 0;
  --cm-space-1: .25rem;
  --cm-space-2: .5rem;
  --cm-space-3: 1rem;
  --cm-space-4: 1.5rem;
  --cm-space-5: 3rem;

  /* Spaziature semantiche dei componenti interattivi. */
  --cm-control-padding-x: .875rem;
  --cm-control-padding-y: .625rem;
  --cm-button-padding-x: 1rem;
  --cm-button-padding-y: .5625rem;
  --cm-panel-padding: var(--cm-space-4);
  --cm-layout-gap: var(--cm-space-3);
  --cm-layout-gap-lg: var(--cm-space-4);
  --cm-popover-shift-x: 0px;

  /* Famiglie e scala tipografica condivise. */
  --cm-font-family-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --cm-font-family-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --cm-font-family-code: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
  --cm-font-xs: .6875rem;
  --cm-font-sm: .75rem;
  --cm-font-compact: .8125rem;
  --cm-font-body: .875rem;
  --cm-font-md: 1rem;
  --cm-font-lg: 1.25rem;
  --cm-font-xl: 1.5rem;
  --cm-font-2xl: 1.875rem;
  --cm-font-3xl: 2.5rem;

  /* Pesi realmente caricati da IBM Plex Sans e IBM Plex Mono. */
  --cm-weight-regular: 400;
  --cm-weight-medium: 500;
  --cm-weight-semibold: 600;
  --cm-weight-bold: 700;
  /* Colori semantici: unica sorgente cromatica per componenti e pagine. */
  --cm-color-brand: #4f46e5;
  --cm-color-brand-hover: #4338ca;
  --cm-color-accent: #8b5cf6;
  --cm-color-text-primary: #1a1d21;
  --cm-color-text-secondary: #3a3f47;
  --cm-color-text-muted: #626b77;
  --cm-color-text-subtle: #68717d;
  --cm-color-text-faint: #a2a9b3;
  --cm-color-on-brand: #fff;
  --cm-color-surface-page: #f4f5f7;
  --cm-color-surface-raised: #fff;
  --cm-color-surface-subtle: #fafbfc;
  --cm-color-surface-hover: #f7f8fa;
  --cm-color-border-default: #e6e8ec;
  --cm-color-border-subtle: #eef0f3;
  --cm-color-status-success: #087a43;
  --cm-color-status-success-strong: #0f6b32;
  --cm-color-status-success-bg: #e7f6ee;
  --cm-color-status-success-border: var(--cm-color-status-success);
  --cm-color-status-warning: #925000;
  --cm-color-status-warning-bg: #fdf2e2;
  --cm-color-status-warning-border: #f3d9a8;
  --cm-color-status-danger: #c51642;
  --cm-color-status-danger-bg: #fdeaea;
  --cm-color-status-danger-border: #f2dada;
  --cm-color-status-info: var(--cm-color-brand);
  --cm-color-status-info-bg: #eef0fe;
  --cm-color-status-info-border: #c7d2fe;
  --cm-color-status-info-alt: #0e7490;
  --cm-color-status-info-alt-bg: #cffafe;
  --cm-color-status-neutral: #5a616b;

  /* Le azioni riusano la stessa palette di stato, con una sola variante hover. */
  --cm-color-action-success-hover: #0c7d46;
  --cm-color-action-danger-border-hover: #e8b3b3;
  --cm-color-action-info-bg-hover: #e9e9fb;

  /* Famiglie cromatiche condivise dai badge che descrivono un tipo di azione. */
  --cm-color-kind-click: var(--cm-color-brand);
  --cm-color-kind-click-bg: var(--cm-color-status-info-bg);
  --cm-color-kind-select: #6842bd;
  --cm-color-kind-select-bg: #f1ebff;
  --cm-color-kind-cookie: var(--cm-color-status-warning);
  --cm-color-kind-cookie-bg: var(--cm-color-status-warning-bg);

  /* Colori funzionali per grafici, codice e integrazioni. */
  --cm-series-neutral: #cbd0d8;
  --cm-code: #db2777;
  --cm-ring-track: #e9ebef;
  --cm-chart-cyan: #0891b2;
  --cm-chart-neutral: #6b7280;
  --cm-chart-grid: #eceef2;
  --cm-chart-brand-fill: rgba(79, 70, 229, .1);
  --cm-vnc-bg: #0d0d10;

  /* Navigazione scura: token separati dalle superfici chiare dell'applicazione. */
  --cm-color-nav-surface: #14171c;
  --cm-color-nav-surface-deep: #0b0d12;
  --cm-color-nav-surface-hover: #20242a;
  --cm-color-nav-surface-active: #262a31;
  --cm-color-nav-surface-mobile-hover: var(--cm-color-nav-surface-hover);
  --cm-color-nav-control-hover: var(--cm-color-nav-surface-hover);
  --cm-color-nav-border: #2a2e38;
  --cm-color-nav-border-subtle: #22262f;
  --cm-color-nav-divider: var(--cm-color-nav-border-subtle);
  --cm-color-nav-text: #c7cdd6;
  --cm-color-nav-text-strong: #e8eaed;
  --cm-color-nav-text-mobile: var(--cm-color-nav-text-strong);
  --cm-color-nav-text-muted: #9aa2ad;
  --cm-color-nav-backdrop: rgba(0, 0, 0, .52);
  --cm-color-nav-border-hover: #4a505a;
  --cm-color-nav-foreground: #fff;
  --cm-color-live-placeholder: #8a8a92;

  /* Forma, ritmo verticale e tracking condivisi. */
  --cm-radius-sm: 6px;
  --cm-radius-md: 9px;
  --cm-radius-lg: 12px;
  --cm-radius-pill: 999px;
  --cm-leading-tight: 1;
  --cm-leading-snug: 1.35;
  --cm-leading-normal: 1.5;
  --cm-leading-relaxed: 1.6;
  --cm-tracking-tight: -.02em;
  --cm-tracking-title: -.01em;
  --cm-tracking-label: .06em;
  --cm-tracking-wide: .08em;
  --cm-tracking-subtle: .02em;
  --cm-tracking-extra-wide: .12em;

  /* Elevazione e motion: pochi livelli, usati in base al ruolo del componente. */
  --cm-shadow-sm: 0 1px 2px rgba(16, 20, 40, .04);
  --cm-shadow-md: 0 8px 20px rgba(16, 20, 40, .05);
  --cm-shadow-overlay: 0 1px 2px rgba(16, 20, 40, .04), 0 18px 40px -12px rgba(16, 20, 40, .22);
  --cm-shadow-popover: 0 12px 28px rgba(20, 23, 28, .14);
  --cm-shadow-control: 0 1px 3px rgba(0, 0, 0, .25);
  --cm-shadow-active-edge: inset 3px 0 0 var(--cm-color-brand);
  --cm-shadow-selected: inset 0 0 0 1px var(--cm-color-brand);
  --cm-shadow-focus: 0 0 0 3px rgba(79, 70, 229, .14);
  --cm-shadow-focus-danger: 0 0 0 3px rgba(225, 29, 72, .14);
  --cm-focus-outline: 2px solid var(--cm-color-brand);
  --cm-focus-offset: 2px;
  --cm-disabled-opacity: .6;
  --cm-content-max-width: 90rem;
  --cm-icon-button-size: 2rem;
  --cm-z-sticky-header: 1030;
  --cm-motion-fast: 120ms;
  --cm-motion-normal: 200ms;
  --cm-ease-standard: ease;
}

/* Densità adattiva: componenti e pagine condividono lo stesso ritmo anche su viewport stretti. */
@media (max-width: 576px) {
  :root {
    --cm-panel-padding: var(--cm-space-3);
    --cm-layout-gap: var(--cm-space-2);
    --cm-layout-gap-lg: var(--cm-space-3);
  }
}
:where(html) { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* I temi modificano soltanto token: componenti e pagine mantengono la stessa API. */
:root[data-theme="dark"] {
  --cm-color-brand: #a8a3ff;
  --cm-color-on-brand: #11131a;
  --cm-color-brand-hover: #c0bcff;
  --cm-color-accent: #c4a7ff;
  --cm-color-text-primary: #f2f4f7;
  --cm-color-text-secondary: #d7dbe2;
  --cm-color-text-muted: #bbc2cd;
  --cm-color-text-subtle: #aeb6c2;
  --cm-color-text-faint: #929caa;
  --cm-color-surface-page: #10141a;
  --cm-color-surface-raised: #181d24;
  --cm-color-surface-subtle: #1c222b;
  --cm-color-surface-hover: #252b34;
  --cm-color-border-default: #3a424e;
  --cm-color-border-subtle: #2b323c;
  --cm-color-status-success: #63dfa0;
  --cm-color-status-success-bg: #153a29;
  --cm-color-status-success-border: var(--cm-color-status-success);
  --cm-color-status-warning: #ffc46b;
  --cm-color-status-warning-bg: #3c2d18;
  --cm-color-status-warning-border: #765a2e;
  --cm-color-status-danger: #ff809b;
  --cm-color-status-danger-bg: #3d2029;
  --cm-color-status-danger-border: #784052;
  --cm-color-status-info-bg: #29294a;
  --cm-color-status-info-border: #55588f;
  --cm-color-status-info-alt: #67d4ee;
  --cm-color-status-info-alt-bg: #153943;
  --cm-color-kind-select: var(--cm-color-accent);
  --cm-series-neutral: #687281;
  --cm-code: #ff86c8;
  --cm-ring-track: #303743;
  --cm-chart-cyan: #54d5ef;
  --cm-chart-neutral: #aab2bd;
  --cm-chart-grid: #353c47;
  --cm-chart-brand-fill: rgba(168, 163, 255, .16);
  --cm-color-status-success-strong: #82e9ae;
  --cm-color-status-neutral: #c3cad4;
  --cm-color-action-success-hover: #87ebb5;
  --cm-color-action-danger-border-hover: #a65b70;
  --cm-color-action-info-bg-hover: #333253;
  --cm-color-kind-select-bg: #382b52;
  --cm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
  --cm-shadow-md: 0 8px 20px rgba(0, 0, 0, .3);
  --cm-shadow-overlay: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -12px rgba(0, 0, 0, .75);
  --cm-shadow-popover: 0 12px 28px rgba(0, 0, 0, .55);
  --cm-shadow-focus: 0 0 0 3px rgba(168, 163, 255, .3);
  --cm-shadow-focus-danger: 0 0 0 3px rgba(255, 128, 155, .3);
}

:root[data-contrast="high"] {
  --cm-color-brand: #2418b8;
  --cm-color-brand-hover: #13098d;
  --cm-color-accent: #6514a8;
  --cm-color-text-primary: #000;
  --cm-color-text-secondary: #171717;
  --cm-color-text-muted: #303030;
  --cm-color-text-subtle: #383838;
  --cm-color-text-faint: #505050;
  --cm-color-border-default: #000;
  --cm-color-border-subtle: #505050;
  --cm-color-surface-hover: #eee;
  --cm-color-surface-page: #fff;
  --cm-color-surface-subtle: #fff;
  --cm-color-surface-raised: #fff;
  --cm-color-status-success: #006b35;
  --cm-color-status-warning: #754000;
  --cm-color-status-danger: #a8002f;
  --cm-color-status-neutral: #202020;
  --cm-color-status-success-border: var(--cm-color-status-success);
  --cm-color-status-danger-border: var(--cm-color-status-danger);
  --cm-color-status-info-border: var(--cm-color-brand);
  --cm-focus-outline: 3px solid var(--cm-color-brand);
  --cm-focus-offset: 3px;
  --cm-disabled-opacity: .75;
}

:root[data-theme="dark"][data-contrast="high"] {
  --cm-color-brand: #c6c2ff;
  --cm-color-on-brand: #000;
  --cm-color-brand-hover: #e2e0ff;
  --cm-color-accent: #e0c1ff;
  --cm-color-text-primary: #fff;
  --cm-color-text-secondary: #fff;
  --cm-color-text-muted: #e5e5e5;
  --cm-color-text-subtle: #ddd;
  --cm-color-text-faint: #c7c7c7;
  --cm-color-border-default: #fff;
  --cm-color-border-subtle: #bfbfbf;
  --cm-color-surface-hover: #222;
  --cm-color-surface-page: #000;
  --cm-color-surface-subtle: #000;
  --cm-color-surface-raised: #000;
  --cm-color-status-success: #8dffbd;
  --cm-color-status-success-bg: #073b20;
  --cm-color-status-warning: #ffd38a;
  --cm-color-status-warning-bg: #402900;
  --cm-color-status-danger: #ff9caf;
  --cm-color-status-danger-bg: #470014;
  --cm-color-status-info-bg: #17114f;
  --cm-color-status-neutral: #fff;
  --cm-color-status-success-border: var(--cm-color-status-success);
  --cm-color-status-danger-border: var(--cm-color-status-danger);
  --cm-color-status-info-border: var(--cm-color-brand);
}

@keyframes cm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes cm-spin { to { transform: rotate(360deg); } }

/* ===== Baseline applicativa ===== */
/* Il documento non deve mai sviluppare uno scroll orizzontale proprio: i contenuti larghi
   (tabelle, grafici) scorrono nel loro contenitore (.cm-panel-scroll). */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; line-height: var(--cm-leading-normal); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0; padding: 0; max-width: 100%; overflow-x: hidden;
  background: var(--cm-color-surface-page); color: var(--cm-color-text-primary);
  font-family: var(--cm-font-family-sans);
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, h5, h6, p) { margin: 0; }
h1 { font-size: var(--cm-font-2xl); line-height: var(--cm-leading-tight); }
h2 { font-size: var(--cm-font-lg); line-height: var(--cm-leading-snug); }
h3 { font-size: var(--cm-font-md); line-height: var(--cm-leading-snug); }
:where(h1, h2, h3, h4, h5, h6) { font-weight: var(--cm-weight-semibold); }
:where(button, input, optgroup, select, textarea) { margin: 0; font: inherit; color: inherit; }
:where(button, select) { text-transform: none; }
:where(img, svg, canvas) { max-width: 100%; }
:where(table) { border-collapse: collapse; border-color: currentColor; }
:where(th) { text-align: inherit; }
:where(hr) { margin: 0; color: inherit; border: 0; border-top: 1px solid var(--cm-color-border-subtle); }
a { color: var(--cm-color-brand); text-decoration: underline; }
a:hover { color: var(--cm-color-brand-hover); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--cm-focus-outline) !important;
  outline-offset: var(--cm-focus-offset);
}

/* ===== Header ===== */
.cm-header {
  background: var(--cm-color-nav-surface);
  color: var(--cm-color-nav-foreground);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--cm-space-2) var(--cm-space-4);
  position: sticky;
  top: 0;
  z-index: var(--cm-z-sticky-header);
  font-family: var(--cm-font-family-sans);
}
.cm-header-left { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.cm-brand { display: flex; align-items: center; gap: 10px; color: var(--cm-color-nav-foreground); text-decoration: none; }
.cm-brand:hover { color: var(--cm-color-nav-foreground); text-decoration: none; }
.cm-logo {
  width: 24px; height: 24px; border-radius: var(--cm-radius-md);
  background: linear-gradient(135deg, var(--cm-color-accent), var(--cm-color-brand));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cm-font-family-mono); font-weight: var(--cm-weight-semibold); font-size: var(--cm-font-body); color: var(--cm-color-nav-foreground);
}
.cm-brand-text { font-weight: var(--cm-weight-semibold); font-size: var(--cm-font-md); letter-spacing: var(--cm-tracking-subtle); }
.cm-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-nav a {
  font-size: var(--cm-font-body); font-weight: var(--cm-weight-medium); color: var(--cm-color-nav-text-muted);
  padding: 6px 12px; border-radius: var(--cm-radius-md); text-decoration: none;
  transition: background var(--cm-motion-fast), color var(--cm-motion-fast);
}
.cm-nav a:hover { color: var(--cm-color-nav-foreground); background: var(--cm-color-nav-surface-hover); text-decoration: none; }
.cm-nav a.active { color: var(--cm-color-nav-foreground); background: var(--cm-color-nav-surface-active); }
.cm-header-right { display: flex; align-items: center; gap: var(--cm-space-3); flex-wrap: wrap; }
.cm-tools-toggle {
  font-size: var(--cm-font-body); color: var(--cm-color-nav-text-muted); padding: 6px 12px; border-radius: var(--cm-radius-md);
  background: transparent; border: none; cursor: pointer; list-style: none;
}
.cm-tools-toggle:hover, .cm-tools-toggle:focus, .cm-tools-dropdown[open] .cm-tools-toggle { color: var(--cm-color-nav-foreground); background: var(--cm-color-nav-surface-hover); }
.cm-appearance-controls { display: flex; align-items: center; gap: var(--cm-space-1); }
.cm-appearance-btn {
  display: inline-flex; align-items: center; gap: var(--cm-space-1); min-height: 34px;
  padding: var(--cm-space-1) var(--cm-space-2); border: 1px solid var(--cm-color-nav-border);
  border-radius: var(--cm-radius-md); background: transparent; color: var(--cm-color-nav-text);
  font: inherit; font-size: var(--cm-font-sm); cursor: pointer;
}
.cm-appearance-btn:hover { color: var(--cm-color-nav-foreground); background: var(--cm-color-nav-surface-hover); }
.cm-appearance-btn[aria-pressed="true"] { border-color: var(--cm-color-brand); box-shadow: var(--cm-shadow-selected); }
/* Menù Strumenti (desktop) */
@keyframes cm-tools-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.cm-tools-dropdown { position: relative; }
.cm-tools-toggle::-webkit-details-marker { display: none; }
.cm-tools-toggle::after { content: ""; display: inline-block; margin-left: 7px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(3px); }
.cm-tools-dropdown .cm-tools-menu {
  position: absolute; z-index: 1; top: calc(100% + 10px); right: 0;
  width: 292px; padding: 0; margin: 0; list-style: none;
  background: var(--cm-color-surface-raised); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-overlay);
  overflow: hidden; animation: cm-tools-menu-in .14s cubic-bezier(.16,1,.3,1);
  font-family: var(--cm-font-family-sans);
}
.cm-tools-menu-label {
  padding: 13px 16px 9px; font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-wide);
  text-transform: uppercase; color: var(--cm-color-text-subtle);
}
.cm-tools-menu .cm-tools-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px; margin: 0 6px; border-radius: var(--cm-radius-md); text-decoration: none;
  transition: background var(--cm-motion-fast) var(--cm-ease-standard);
}
.cm-tools-menu li:last-child .cm-tools-item { margin-bottom: 6px; }
.cm-tools-menu .cm-tools-item:hover, .cm-tools-menu .cm-tools-item:focus { background: var(--cm-color-surface-hover); }
.cm-tools-item-text { display: flex; flex-direction: column; gap: 2px; }
.cm-tools-item-title { font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold); color: var(--cm-color-text-primary); }
.cm-tools-item-desc { font-size: var(--cm-font-sm); color: var(--cm-color-text-muted); }
.cm-tools-item-arrow { font-family: var(--cm-font-family-mono); font-size: var(--cm-font-sm); color: var(--cm-color-text-faint); }
.cm-user { display: flex; align-items: center; gap: 9px; }
.cm-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--cm-color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); color: var(--cm-color-nav-text); font-family: var(--cm-font-family-mono);
  text-transform: uppercase;
}
.cm-username { font-size: var(--cm-font-compact); color: var(--cm-color-nav-text); }
.cm-logout-btn {
  font-size: var(--cm-font-compact); font-weight: var(--cm-weight-medium); color: var(--cm-color-nav-text-strong); background: transparent;
  border: 1px solid var(--cm-color-text-secondary); padding: 6px 14px; border-radius: var(--cm-radius-md); cursor: pointer;
}
.cm-logout-btn:hover { background: var(--cm-color-nav-surface-hover); border-color: var(--cm-color-nav-border-hover); }

/* ===== Menù mobile ===== */
.cm-menu-toggle {
  display: none;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--cm-color-nav-border); background: var(--cm-color-nav-surface); border-radius: var(--cm-radius-md);
  flex-direction: column; align-items: center; justify-content: center; gap: var(--cm-space-1);
  cursor: pointer; padding: 0;
}
.cm-menu-toggle span { width: 16px; height: 2px; border-radius: 2px; background: var(--cm-color-nav-foreground); display: block; }
.cm-menu-toggle:hover { background: var(--cm-color-nav-control-hover); }

.cm-mobile-menu {
  width: min(300px, calc(100vw - var(--cm-space-4))); height: 100dvh; max-height: none;
  margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--cm-color-nav-border-subtle);
  background: var(--cm-color-nav-surface-deep); color: var(--cm-color-nav-foreground);
  display: flex; flex-direction: column;
  font-family: var(--cm-font-family-sans);
}
.cm-mobile-menu:not([open]) { display: none; }
.cm-mobile-menu::backdrop { background: var(--cm-color-nav-backdrop); }
.cm-mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  height: 58px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--cm-color-nav-divider);
}
.cm-mobile-menu-title { font-family: var(--cm-font-family-mono); font-size: var(--cm-font-xs); font-weight: var(--cm-weight-bold); letter-spacing: var(--cm-tracking-extra-wide); color: var(--cm-color-nav-text-muted); }
.cm-menu-close {
  width: 36px; height: 36px; border: 1px solid var(--cm-color-nav-border); background: var(--cm-color-nav-surface); border-radius: var(--cm-radius-md);
  color: var(--cm-color-nav-foreground); font-size: var(--cm-font-lg); line-height: var(--cm-leading-tight); cursor: pointer;
}
.cm-menu-close:hover { background: var(--cm-color-nav-control-hover); }

.cm-mobile-nav { flex: 1; overflow: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: var(--cm-space-1); }
.cm-mobile-nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--cm-radius-md);
  text-decoration: none; color: var(--cm-color-nav-text-muted); font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold); transition: background var(--cm-motion-fast), color var(--cm-motion-fast);
}
.cm-mobile-nav a:hover { color: var(--cm-color-nav-foreground); background: var(--cm-color-nav-surface-mobile-hover); text-decoration: none; }
.cm-mobile-nav a.active { color: var(--cm-color-nav-foreground); background: var(--cm-color-nav-surface-mobile-hover); box-shadow: var(--cm-shadow-active-edge); }
.cm-mobile-nav-section { font-family: var(--cm-font-family-mono); font-size: var(--cm-font-xs); font-weight: var(--cm-weight-bold); letter-spacing: var(--cm-tracking-extra-wide); color: var(--cm-color-nav-text-muted); padding: 18px 12px 6px; }
.cm-mobile-appearance { display: grid; gap: var(--cm-space-2); padding: 0 var(--cm-space-2); }
.cm-mobile-appearance .cm-appearance-btn { justify-content: flex-start; min-height: 44px; }

.cm-mobile-menu-footer { flex: none; border-top: 1px solid var(--cm-color-nav-divider); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cm-mobile-menu-footer .cm-avatar { width: 34px; height: 34px; font-size: var(--cm-font-compact); }
.cm-mobile-menu-footer .cm-username { font-size: var(--cm-font-body); color: var(--cm-color-nav-text-mobile); }
.cm-logout-btn-block { width: 100%; text-align: center; }

@media (max-width: 1200px) {
  .cm-appearance-controls [data-theme-label], .cm-appearance-controls [data-contrast-label] { display: none; }
}

@media (max-width: 768px) {
  .cm-nav, .cm-desktop-only { display: none; }
  .cm-menu-toggle { display: flex; }
}

/* ===== Fondazioni applicative e utility ===== */
.cm-dashboard { background: var(--cm-color-surface-page); min-height: calc(100vh - 58px); font-family: var(--cm-font-family-sans); color: var(--cm-color-text-primary); }
.cm-main { max-width: var(--cm-content-max-width); margin: 0 auto; padding: var(--cm-space-4) var(--cm-space-4) var(--cm-space-5); }
@media (min-width: 1200px) {
  .cm-main { max-width: 100%; padding-left: var(--cm-space-5); padding-right: var(--cm-space-5); }
}
.cm-mono { font-family: var(--cm-font-family-mono); }

/* Spacing logico limitato ai valori realmente usati dall'applicazione. */
.cm-mbe-1 { margin-block-end: var(--cm-space-1) !important; }
.cm-mbe-2 { margin-block-end: var(--cm-space-2) !important; }
.cm-mbe-3 { margin-block-end: var(--cm-space-3) !important; }
.cm-mbe-4 { margin-block-end: var(--cm-space-4) !important; }
.cm-mbs-1 { margin-block-start: var(--cm-space-1) !important; }
.cm-mbs-2 { margin-block-start: var(--cm-space-2) !important; }
.cm-mbs-3 { margin-block-start: var(--cm-space-3) !important; }
.cm-mbs-4 { margin-block-start: var(--cm-space-4) !important; }
.cm-mis-1 { margin-inline-start: var(--cm-space-1) !important; }
.cm-my-3 { margin-block: var(--cm-space-3) !important; }
.cm-p-0 { padding: 0 !important; }
.cm-p-3 { padding: var(--cm-space-3) !important; }
.cm-p-4 { padding: var(--cm-space-4) !important; }
.cm-py-2 { padding-block: var(--cm-space-2) !important; }
.cm-py-3 { padding-block: var(--cm-space-3) !important; }
.cm-py-4 { padding-block: var(--cm-space-4) !important; }
.cm-px-3 { padding-inline: var(--cm-space-3) !important; }
.cm-px-4 { padding-inline: var(--cm-space-4) !important; }
.cm-pbs-2 { padding-block-start: var(--cm-space-2) !important; }
.cm-pbs-3 { padding-block-start: var(--cm-space-3) !important; }
.cm-pbe-4 { padding-block-end: var(--cm-space-4) !important; }

/* Primitive di composizione: descrivono relazioni di layout, non singole proprietà. */
.cm-stack { display: flex; flex-direction: column; gap: var(--cm-space-3); }
.cm-stack--xs { gap: var(--cm-space-1); }
.cm-stack--sm { gap: var(--cm-space-2); }
.cm-stack--start { align-items: flex-start; }
.cm-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cm-space-3); }
.cm-cluster--sm { gap: var(--cm-space-2); }
.cm-cluster--baseline { align-items: baseline; }
.cm-cluster--align-end { align-items: flex-end; }
.cm-cluster--end { justify-content: flex-end; }
.cm-split { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cm-space-3); }
.cm-split--sm { gap: var(--cm-space-2); }
.cm-split--baseline { align-items: baseline; }
.cm-layout-grid { display: grid; gap: var(--cm-space-3); }
.cm-layout-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 768px) {
  .cm-layout-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Utility tipografiche riusabili per i pochi testi che non appartengono già a un componente. */
.cm-fs-xs { font-size: var(--cm-font-xs) !important; }
.cm-fs-sm { font-size: var(--cm-font-sm) !important; }
.cm-fs-compact { font-size: var(--cm-font-compact) !important; }
.cm-fs-body { font-size: var(--cm-font-body) !important; }
.cm-fs-md { font-size: var(--cm-font-md) !important; }
.cm-fs-lg { font-size: var(--cm-font-lg) !important; }
.cm-fs-xl { font-size: var(--cm-font-xl) !important; }
.cm-fs-2xl { font-size: var(--cm-font-2xl) !important; }
.cm-fs-3xl { font-size: var(--cm-font-3xl) !important; }
.cm-fw-regular { font-weight: var(--cm-weight-regular) !important; }
.cm-fw-medium { font-weight: var(--cm-weight-medium) !important; }
.cm-fw-semibold { font-weight: var(--cm-weight-semibold) !important; }
.cm-fw-bold { font-weight: var(--cm-weight-bold) !important; }
.cm-uppercase { text-transform: uppercase !important; }
.cm-normal-case { text-transform: none !important; }
.cm-text-start { text-align: start !important; }
.cm-text-center { text-align: center !important; }
.cm-text-end { text-align: end !important; }

/* Utility semantiche. Restano intenzionalmente poche: il layout composto appartiene ai componenti. */
.cm-text-primary { color: var(--cm-color-text-primary) !important; }
.cm-text-secondary { color: var(--cm-color-text-secondary) !important; }
.cm-text-muted { color: var(--cm-color-text-muted) !important; }
.cm-text-subtle { color: var(--cm-color-text-subtle) !important; }
.cm-text-faint { color: var(--cm-color-text-faint) !important; }
.cm-text-brand { color: var(--cm-color-brand) !important; }
.cm-text-success { color: var(--cm-color-status-success) !important; }
.cm-text-warning { color: var(--cm-color-status-warning) !important; }
.cm-text-danger { color: var(--cm-color-status-danger) !important; }
.cm-text-code { color: var(--cm-code) !important; }
.cm-bg-warning { background: var(--cm-color-status-warning-bg) !important; }
.cm-bg-neutral { background: var(--cm-series-neutral) !important; }
.cm-lh-normal { line-height: var(--cm-leading-normal) !important; }
.cm-lh-relaxed { line-height: var(--cm-leading-relaxed) !important; }
.cm-tracking-tight { letter-spacing: var(--cm-tracking-tight) !important; }
.cm-tracking-title { letter-spacing: var(--cm-tracking-title) !important; }
.cm-tracking-wide { letter-spacing: var(--cm-tracking-wide) !important; }

/* Primitive ricorrenti emerse dalle pagine. */
.cm-page-head-start { align-items: flex-start; }
.cm-actions-end { display: flex; justify-content: flex-end; gap: 3px; }
.cm-meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 11px 14px; }
.cm-stack-compact { display: grid; gap: var(--cm-space-3); }
.cm-inline-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--cm-space-1); }
.cm-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--cm-color-surface-hover); border: 1px solid var(--cm-color-border-subtle); border-radius: var(--cm-radius-lg); }
.cm-truncate-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-break-all { word-break: break-all; }
.cm-break-anywhere { overflow-wrap: anywhere; }
.cm-no-underline { text-decoration: none !important; }
.cm-control-full { width: 100%; box-sizing: border-box; }
.cm-resize-y { resize: vertical; }
.cm-clickable { cursor: pointer; }
.cm-copy-narrow { max-width: 640px; }
.cm-empty-icon-subtle { background: var(--cm-color-border-subtle) !important; color: var(--cm-color-text-faint) !important; }
.cm-bg-brand { background: var(--cm-color-brand) !important; }
.cm-bg-accent { background: var(--cm-color-accent) !important; }
.cm-chart-h-sm { height: 260px; }
.cm-chart-h-md { height: 320px; }
.cm-copy-medium { max-width: 680px; }
.cm-copy-wide { max-width: 760px; }
.cm-min-w-0 { min-width: 0; }
.cm-inline { display: inline !important; }
.cm-inline-block { display: inline-block !important; }
.cm-block { display: block !important; }
.cm-grow { flex-grow: 1 !important; }
.cm-flex-wrap { flex-wrap: wrap !important; }
.cm-justify-center { justify-content: center !important; }
.cm-justify-end { justify-content: flex-end !important; }
.cm-overflow-auto { overflow: auto !important; }
.cm-overflow-x-auto { overflow-x: auto !important; }
.cm-visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}
.cm-grid-full { grid-column: 1 / -1; }
.cm-divider-top { border-top: 1px solid var(--cm-color-border-subtle); }
.cm-divider-end { border-right: 1px solid var(--cm-color-border-subtle); }
.cm-surface-note { background: var(--cm-color-surface-subtle); border: 1px solid var(--cm-color-border-subtle); border-radius: var(--cm-radius-lg); }
.cm-callout { background: var(--cm-color-surface-hover); border: 1px solid var(--cm-color-border-subtle); border-radius: var(--cm-radius-lg); color: var(--cm-color-text-secondary); line-height: var(--cm-leading-relaxed); }
.cm-section-head { border-bottom: 1px solid var(--cm-color-border-subtle); background: var(--cm-color-surface-subtle); }
.cm-row-danger { background: var(--cm-color-status-danger-bg); }
.cm-row-warning { background: var(--cm-color-status-warning-bg); }
.cm-state-danger { --cm-state-color: var(--cm-color-status-danger); color: var(--cm-color-status-danger) !important; }
.cm-state-warning { --cm-state-color: var(--cm-color-status-warning); color: var(--cm-color-status-warning) !important; }
.cm-state-success { --cm-state-color: var(--cm-color-status-success); color: var(--cm-color-status-success) !important; }
.cm-state-muted { --cm-state-color: var(--cm-color-text-subtle); color: var(--cm-color-text-subtle) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .cm-pulse-dot, .cm-spinner { animation: none !important; }
}

@media (forced-colors: active) {
  .cm-btn, .cm-icon-btn, .cm-field-input, .cm-select, .cm-panel, .cm-alert { border: 1px solid CanvasText; }
  .cm-status-pill, .cm-badge { border: 1px solid currentColor; }
  .cm-spinner { border-color: CanvasText; border-top-color: Highlight; }
}

@media (pointer: coarse) {
  :root { --cm-icon-button-size: 2.75rem; }
  .cm-btn, .cm-field-input, .cm-select, .cm-toggle-wrap { min-height: 44px; }
}

.cm-page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--cm-layout-gap); margin-bottom: var(--cm-layout-gap-lg); }
.cm-page-title { margin: 0; font-size: var(--cm-font-xl); font-weight: var(--cm-weight-bold); letter-spacing: var(--cm-tracking-title); }
.cm-page-sub { margin: var(--cm-space-2) 0 0; font-size: var(--cm-font-compact); color: var(--cm-color-text-muted); }
.cm-page-actions { display: flex; align-items: center; gap: var(--cm-space-3); flex-wrap: wrap; }

/* Widget browser live condiviso da recorder e replay. */
.cm-live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); border-radius: var(--cm-radius-pill); }
.cm-live-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cm-live-screen { position: relative; aspect-ratio: 1600 / 900; background: var(--cm-vnc-bg); overflow: hidden; }
.cm-live-screen canvas { display: block; }
.cm-live-screen__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cm-color-live-placeholder); font-size: var(--cm-font-compact); }
.cm-live-url { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-live-steps { padding: var(--cm-space-2); display: flex; flex-direction: column; overflow-y: auto; }
.cm-live-step {
  display: grid; grid-template-columns: var(--cm-live-step-index-width, 22px) minmax(0, 1fr) auto;
  gap: 10px; align-items: start; padding: 9px 8px; border-radius: var(--cm-radius-md);
}
.cm-live-step__index {
  font-family: var(--cm-live-font-family, var(--cm-font-family-mono)); font-size: var(--cm-font-xs);
  color: var(--cm-live-step-muted, var(--cm-color-text-muted)); text-align: center; padding-top: 3px;
}
.cm-live-step__body { min-width: 0; }
.cm-live-step__label { font-size: var(--cm-font-compact); color: var(--cm-live-step-ink, var(--cm-color-text-primary)); line-height: var(--cm-leading-snug); }
.cm-live-step__selector {
  font-family: var(--cm-live-font-family, var(--cm-font-family-mono)); font-size: var(--cm-font-xs);
  color: var(--cm-live-step-muted, var(--cm-color-text-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cm-toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.cm-toggle-track {
  width: 40px; height: 22px; border-radius: var(--cm-radius-pill); padding: 2px; transition: background var(--cm-motion-normal);
  background: var(--cm-series-neutral); display: inline-block; box-sizing: border-box; flex: none;
}
.cm-toggle-input:checked + .cm-toggle-track { background: var(--cm-color-brand); }
.cm-toggle-input:disabled + .cm-toggle-track { opacity: var(--cm-disabled-opacity); }
.cm-toggle-input:disabled ~ .cm-toggle-label { opacity: var(--cm-disabled-opacity); }
.cm-toggle-wrap:has(.cm-toggle-input:disabled) { cursor: not-allowed; }
.cm-toggle-wrap:has(.cm-toggle-input:focus-visible) .cm-toggle-track { outline: var(--cm-focus-outline); outline-offset: var(--cm-focus-offset); }
.cm-toggle-knob { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--cm-color-surface-raised); box-shadow: var(--cm-shadow-control); transition: transform var(--cm-motion-normal); }
.cm-toggle-input:checked + .cm-toggle-track .cm-toggle-knob { transform: translateX(18px); }
.cm-toggle-label { font-size: var(--cm-font-compact); font-weight: var(--cm-weight-medium); color: var(--cm-color-text-secondary); }

.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--cm-radius-md); cursor: pointer; font-family: var(--cm-font-family-sans);
  font-size: var(--cm-font-compact); line-height: var(--cm-leading-normal); text-decoration: none;
}
.cm-btn:hover { text-decoration: none; }
.cm-btn:disabled, .cm-btn[aria-disabled="true"] { opacity: var(--cm-disabled-opacity); cursor: not-allowed; }
.cm-btn--primary, .cm-btn--success {
  padding: var(--cm-button-padding-y) var(--cm-button-padding-x); border: none;
  color: var(--cm-color-on-brand); font-weight: var(--cm-weight-semibold);
}
.cm-btn--primary { background: var(--cm-color-brand); box-shadow: var(--cm-shadow-sm); }
.cm-btn--primary:hover { background: var(--cm-color-brand-hover); color: var(--cm-color-on-brand); }
.cm-btn--success { background: var(--cm-color-status-success); box-shadow: var(--cm-shadow-sm); }
.cm-btn--success:hover { background: var(--cm-color-action-success-hover); color: var(--cm-color-on-brand); }
.cm-btn--outline {
  padding: 7px 12px; border: 1px solid var(--cm-color-border-default);
  background: var(--cm-color-surface-raised); color: var(--cm-color-text-secondary);
  font-weight: var(--cm-weight-medium);
}
.cm-btn--brand { color: var(--cm-color-brand); }
.cm-btn--brand:hover { background: var(--cm-color-status-info-bg); border-color: var(--cm-color-status-info-border); color: var(--cm-color-brand-hover); }
.cm-btn--neutral:hover { background: var(--cm-color-surface-hover); color: var(--cm-color-text-secondary); }
.cm-btn--danger { color: var(--cm-color-status-danger); border-color: var(--cm-color-status-danger-border); }
.cm-btn--danger:hover { background: var(--cm-color-status-danger-bg); border-color: var(--cm-color-action-danger-border-hover); color: var(--cm-color-status-danger); }
/* Variante gemella di .cm-field-input--compact per azioni affiancate a controlli compatti. */
.cm-btn--compact { padding: calc(var(--cm-space-1) + 1px) var(--cm-space-2); font-size: var(--cm-font-compact); }
.cm-btn--sm { padding: var(--cm-space-1) var(--cm-space-2); font-size: var(--cm-font-sm); }

.cm-kpi-card { container: cm-kpi / inline-size; background: var(--cm-color-surface-raised); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: var(--cm-space-2); }
.cm-kpi-label { font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-wide); text-transform: uppercase; color: var(--cm-color-text-subtle); display: flex; align-items: center; gap: var(--cm-space-1); }
.cm-kpi-value { font-family: var(--cm-font-family-mono); font-size: var(--cm-font-2xl); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-tight); }
.cm-kpi-sub { font-size: var(--cm-font-sm); color: var(--cm-color-text-muted); }
.cm-kpi-baseline { display: flex; align-items: baseline; gap: var(--cm-space-2); }

.cm-popover { position: relative; }
.cm-popover__trigger { color: var(--cm-color-text-subtle); font-size: var(--cm-font-sm); cursor: help; list-style: none; }
.cm-popover__trigger::-webkit-details-marker { display: none; }
.cm-popover__trigger:hover, .cm-popover__trigger:focus { color: var(--cm-color-text-secondary); }
.cm-popover__panel {
  position: absolute; z-index: 2; top: calc(100% + var(--cm-space-2)); left: 0;
  width: min(340px, calc(100vw - 48px)); overflow: hidden;
  background: var(--cm-color-surface-raised); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg);
  color: var(--cm-color-text-muted); font-family: var(--cm-font-family-sans); font-size: var(--cm-font-compact);
  font-weight: var(--cm-weight-regular); line-height: var(--cm-leading-normal); text-transform: none; letter-spacing: normal;
  box-shadow: var(--cm-shadow-popover); transform: translateX(var(--cm-popover-shift-x));
}
.cm-popover[data-cm-auto-flip][open]:not(.is-positioned) .cm-popover__panel { visibility: hidden; }
.cm-popover.is-flipped .cm-popover__panel { right: 0; left: auto; }
.cm-popover__title { display: block; padding: 10px 14px; background: var(--cm-color-surface-subtle); border-bottom: 1px solid var(--cm-color-border-subtle); color: var(--cm-color-text-secondary); font-weight: var(--cm-weight-semibold); }
.cm-popover__body { margin: 0; padding: 12px 14px; }

/* Disclosure nativa per sezioni comprimibili: l'indicatore comunica lo stato senza JavaScript. */
.cm-disclosure > summary { cursor: pointer; list-style: none; }
.cm-disclosure > summary::-webkit-details-marker { display: none; }
.cm-disclosure__trigger:focus-visible { outline: var(--cm-focus-outline); outline-offset: var(--cm-focus-offset); }
.cm-disclosure__indicator { color: var(--cm-color-text-muted); font-size: var(--cm-font-lg); line-height: var(--cm-leading-tight); }
.cm-disclosure__indicator::before { content: "+"; }
.cm-disclosure[open] .cm-disclosure__indicator::before { content: "−"; }

.cm-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); padding: 4px 10px; border-radius: var(--cm-radius-pill); }
.cm-status-pill--success { color: var(--cm-color-status-success); background: var(--cm-color-status-success-bg); }
.cm-status-pill--warning { color: var(--cm-color-status-warning); background: var(--cm-color-status-warning-bg); }
.cm-status-pill--info { color: var(--cm-color-status-info); background: var(--cm-color-status-info-bg); }
.cm-status-pill--neutral { color: var(--cm-color-status-neutral); background: var(--cm-color-border-subtle); }

.cm-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cm-color-status-success); animation: cm-pulse 1.4s ease-in-out infinite; }
.cm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cm-dot--success { background: var(--cm-color-status-success); }
.cm-dot--danger { background: var(--cm-color-status-danger); }
.cm-dot--warning { background: var(--cm-color-status-warning); }


.cm-panel { container: cm-panel / inline-size; background: var(--cm-color-surface-raised); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.cm-panel--subtle { background: var(--cm-color-surface-subtle); border-color: var(--cm-color-border-subtle); }
.cm-panel--warning { border-color: var(--cm-color-status-warning-border); }
.cm-panel--danger { border-color: var(--cm-color-status-danger-border); }
.cm-panel--compact .cm-panel-header, .cm-panel--compact .cm-panel-footer { padding: var(--cm-space-2) var(--cm-space-3); }
.cm-panel--compact .cm-panel-body { padding: var(--cm-space-3); }
.cm-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--cm-color-border-subtle); gap: 9px; }
.cm-panel-header :is(h2, h3) { margin: 0; font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold); display: flex; align-items: center; gap: 9px; }
.cm-panel-header .muted { font-weight: var(--cm-weight-regular); color: var(--cm-color-text-subtle); }
.cm-panel-meta { font-size: var(--cm-font-sm); color: var(--cm-color-text-subtle); }
.cm-panel-scroll { max-height: 520px; overflow: auto; min-height: 0; contain: paint; }

.cm-table { width: 100%; border-collapse: collapse; }
.cm-table thead th {
  padding: 9px 14px; text-align: left; font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-label);
  text-transform: uppercase; color: var(--cm-color-text-subtle); background: var(--cm-color-surface-subtle);
  border-bottom: 1px solid var(--cm-color-border-subtle); position: sticky; top: 0;
}
.cm-table td { padding: 10px 14px; border-bottom: 1px solid var(--cm-color-border-subtle); font-size: var(--cm-font-compact); color: var(--cm-color-text-secondary); vertical-align: middle; }
.cm-table tbody tr:hover { background: var(--cm-color-surface-hover); }
.cm-table--compact th, .cm-table--compact td { padding: var(--cm-space-2); }
.cm-table--striped tbody tr:nth-child(even) { background: var(--cm-color-surface-subtle); }
.cm-table thead th.num, .cm-table td.num { text-align: right; }
.cm-table thead th.center, .cm-table td.center { text-align: center; }
.cm-table td.nowrap, .cm-table th.nowrap { white-space: nowrap; }
.cm-icon-btn:disabled { opacity: var(--cm-disabled-opacity); cursor: not-allowed; }
@keyframes cm-row-flash-ok { from { background: var(--cm-color-status-success-bg); } to { background: transparent; } }
@keyframes cm-row-flash-err { from { background: var(--cm-color-status-danger-bg); } to { background: transparent; } }
.cm-table tbody tr.cm-row-flash-ok { animation: cm-row-flash-ok 1.8s ease-out; }
.cm-table tbody tr.cm-row-flash-err { animation: cm-row-flash-err 1.8s ease-out; }

/* Riga singola "tabella vuota", riutilizzabile anche fuori da .cm-table. */
.cm-table-empty-row { text-align: center; color: var(--cm-color-text-subtle); font-style: italic; padding: 34px 26px; }

/* ===== Alert messages (flash/notifiche) ===== */
.cm-alert {
  container: cm-alert / inline-size;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cm-color-surface-raised); border: 1px solid var(--cm-color-border-default); border-left: 3px solid var(--cm-color-text-secondary);
  border-radius: var(--cm-radius-lg); padding: 14px 16px; box-shadow: var(--cm-shadow-sm);
  margin-bottom: var(--cm-space-3);
}
.cm-alert-icon { width: 26px; height: 26px; border-radius: var(--cm-radius-md); background: var(--cm-color-border-subtle); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.cm-alert-icon .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cm-color-text-secondary); }
.cm-alert-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cm-alert-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-alert-title { font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold); color: var(--cm-color-text-primary); }
.cm-alert-badge { font-family: var(--cm-font-family-mono); font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; padding: 3px 7px; border-radius: var(--cm-radius-sm); }
.cm-alert-actions { display: flex; align-items: center; gap: var(--cm-space-2); flex: none; }
.cm-alert-action {
  font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); color: var(--cm-color-brand); border: 1px solid var(--cm-color-status-info-border); background: var(--cm-color-status-info-bg);
  padding: 6px 12px; border-radius: var(--cm-radius-md); text-decoration: none; display: inline-block;
}
.cm-alert-action:hover { background: var(--cm-color-action-info-bg-hover); color: var(--cm-color-brand-hover); text-decoration: none; }
.cm-alert-close {
  width: 28px; height: 28px; border-radius: var(--cm-radius-md); color: var(--cm-color-text-subtle); border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; font-size: var(--cm-font-md); line-height: var(--cm-leading-tight); cursor: pointer; flex: none;
}
.cm-alert-close:hover { background: var(--cm-color-border-subtle); color: var(--cm-color-text-secondary); }

@container cm-alert (max-width: 28rem) {
  .cm-alert-head { align-items: flex-start; flex-direction: column; gap: var(--cm-space-1); }
  .cm-alert-actions { align-self: stretch; justify-content: flex-end; }
}

@container cm-panel (max-width: 28rem) {
  .cm-panel-header { align-items: flex-start; flex-direction: column; }
  .cm-panel-header > * { width: 100%; }
  .cm-panel-body { padding: var(--cm-space-3); }
  .cm-panel-footer { align-items: stretch; flex-direction: column; }
}

@container cm-kpi (max-width: 13rem) {
  .cm-kpi-value { font-size: var(--cm-font-xl); overflow-wrap: anywhere; }
  .cm-kpi-baseline { align-items: flex-start; flex-direction: column; gap: var(--cm-space-1); }
}

@container cm-list-toolbar (max-width: 34rem) {
  .cm-list-toolbar { align-items: stretch; flex-direction: column; }
  .cm-list-toolbar__filters { align-items: stretch; }
  .cm-list-toolbar__filters .cm-search, .cm-list-toolbar__filters .cm-select { min-width: 0; width: 100%; }
  .cm-list-toolbar__summary { white-space: normal; }
}

.cm-alert--success { border-left-color: var(--cm-color-status-success); }
.cm-alert--success .cm-alert-icon { background: var(--cm-color-status-success-bg); }
.cm-alert--success .cm-alert-icon .dot { background: var(--cm-color-status-success); }
.cm-alert--success .cm-alert-badge { color: var(--cm-color-status-success); background: var(--cm-color-status-success-bg); }

.cm-alert--info { border-left-color: var(--cm-color-brand); }
.cm-alert--info .cm-alert-icon { background: var(--cm-color-status-info-bg); }
.cm-alert--info .cm-alert-icon .dot { background: var(--cm-color-brand); }
.cm-alert--info .cm-alert-badge { color: var(--cm-color-brand-hover); background: var(--cm-color-status-info-bg); }

.cm-alert--warning { border-left-color: var(--cm-color-status-warning); }
.cm-alert--warning .cm-alert-icon { background: var(--cm-color-status-warning-bg); }
.cm-alert--warning .cm-alert-icon .dot { background: var(--cm-color-status-warning); }
.cm-alert--warning .cm-alert-badge { color: var(--cm-color-status-warning); background: var(--cm-color-status-warning-bg); }

.cm-alert--danger { border-left-color: var(--cm-color-status-danger); }
.cm-alert--danger .cm-alert-icon { background: var(--cm-color-status-danger-bg); }
.cm-alert--danger .cm-alert-icon .dot { background: var(--cm-color-status-danger); }
.cm-alert--danger .cm-alert-badge { color: var(--cm-color-status-danger); background: var(--cm-color-status-danger-bg); }

.cm-badge { display: inline-flex; align-items: center; width: fit-content; font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); padding: 3px 8px; border-radius: var(--cm-radius-sm); }
.cm-badge--country { font-family: var(--cm-font-family-mono); color: var(--cm-color-status-neutral); background: var(--cm-color-border-subtle); padding-block: 2px; }
.cm-badge--source { color: var(--cm-color-brand); background: var(--cm-color-status-info-bg); padding-inline: 9px; }
.cm-badge--manual { color: var(--cm-color-status-neutral); background: var(--cm-color-border-subtle); }
.cm-badge--warning { color: var(--cm-color-status-warning); background: var(--cm-color-status-warning-bg); white-space: nowrap; }
.cm-badge--fetch { padding: 4px 10px; border-radius: var(--cm-radius-md); background: var(--cm-color-border-subtle); color: var(--cm-color-text-secondary); }
.cm-badge--advanced { background: var(--cm-color-status-info-bg); color: var(--cm-color-brand); }
.cm-badge--count { font-family: var(--cm-font-family-mono); font-size: var(--cm-font-compact); font-weight: var(--cm-weight-medium); color: var(--cm-color-text-secondary); background: var(--cm-color-border-subtle); padding: 5px 11px; border-radius: var(--cm-radius-md); }

.cm-kind { display: inline-flex; align-items: center; font-size: var(--cm-font-xs); font-weight: var(--cm-weight-bold); text-transform: uppercase; letter-spacing: var(--cm-tracking-label); padding: 3px 8px; border-radius: var(--cm-radius-sm); }
.cm-kind--click, .cm-kind--other { background: var(--cm-color-kind-click-bg); color: var(--cm-color-kind-click); }
.cm-kind--select { background: var(--cm-color-kind-select-bg); color: var(--cm-color-kind-select); }
.cm-kind--wait, .cm-kind--scroll { background: var(--cm-color-border-subtle); color: var(--cm-color-text-muted); }
.cm-kind--cookie { background: var(--cm-color-kind-cookie-bg); color: var(--cm-color-kind-cookie); }

.cm-status-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: var(--cm-font-sm); font-weight: var(--cm-weight-semibold); }
.cm-status-indicator__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cm-status-indicator--success { color: var(--cm-color-status-success); }
.cm-status-indicator--warning { color: var(--cm-color-status-warning); }
.cm-status-indicator--danger { color: var(--cm-color-status-danger); }
.cm-status-indicator--pending { color: var(--cm-color-text-muted); font-weight: var(--cm-weight-regular); }
.cm-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cm-color-status-info-border); border-top-color: var(--cm-color-brand); animation: cm-spin .8s linear infinite; display: inline-block; flex-shrink: 0; }
.cm-spinner--sm { width: 11px; height: 11px; }
.cm-spinner--lg { width: 24px; height: 24px; border-width: 3px; }
.cm-spinner--success { border-color: var(--cm-color-status-success-bg); border-top-color: var(--cm-color-status-success); }
.cm-spinner--danger { border-color: var(--cm-color-status-danger-bg); border-top-color: var(--cm-color-status-danger); }

.cm-progress { width: 100%; height: 8px; border-radius: var(--cm-radius-pill); background: var(--cm-color-border-subtle); overflow: hidden; display: block; }
.cm-progress--mini { width: 52px; height: 6px; display: inline-block; }
.cm-progress__bar { display: block; width: var(--cm-progress, 0%); height: 100%; background: var(--cm-state-color, var(--cm-color-status-success)); transition: width var(--cm-motion-normal) var(--cm-ease-standard); }

.cm-empty { padding: 36px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cm-empty--compact { padding: var(--cm-space-4); }
.cm-empty--danger .cm-empty-icon { background: var(--cm-color-status-danger-bg); color: var(--cm-color-status-danger); }
.cm-empty-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--cm-font-family-mono); font-size: var(--cm-font-md); }
.cm-empty-title { font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold); color: var(--cm-color-text-secondary); }
.cm-empty-sub { font-size: var(--cm-font-sm); color: var(--cm-color-text-subtle); }

.cm-grid-2-14 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--cm-space-3); margin-bottom: var(--cm-space-3); }
.cm-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cm-space-3); margin-bottom: var(--cm-space-3); }


/* ===== Componenti condivisi per liste e azioni ===== */
.cm-count-pill { font-size: var(--cm-font-compact); font-weight: var(--cm-weight-semibold); padding: 5px 11px; border-radius: var(--cm-radius-pill); }
.cm-count-pill--total { background: var(--cm-color-border-subtle); color: var(--cm-color-text-secondary); }
.cm-count-pill--active { background: var(--cm-color-status-success-bg); color: var(--cm-color-status-success-strong); }

.cm-select, select.cm-field-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa0ab' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.cm-select {
  display: inline-flex; align-items: center; gap: 40px; min-width: 220px;
  background: var(--cm-color-surface-raised); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-md);
  padding: var(--cm-control-padding-y) var(--cm-control-padding-x); font-size: var(--cm-font-body); color: var(--cm-color-text-primary); cursor: pointer;
}
.cm-select:focus { outline: none; border-color: var(--cm-color-brand); }

/* ===== Filtri e tabelle condivisi ===== */
.cm-filter-row { display: flex; align-items: center; gap: var(--cm-layout-gap); flex-wrap: wrap; margin-bottom: var(--cm-layout-gap); }
.cm-list-toolbar { container: cm-list-toolbar / inline-size; display: flex; align-items: center; gap: var(--cm-layout-gap); margin-bottom: var(--cm-layout-gap); }
.cm-list-toolbar__filters { flex: 1 1 auto; margin-bottom: 0; }
.cm-list-toolbar__summary { color: var(--cm-color-text-muted); font-size: var(--cm-font-compact); white-space: nowrap; }
.cm-search { position: relative; flex: 1; min-width: 260px; }
.cm-search__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--cm-color-text-faint); font-size: var(--cm-font-body); pointer-events: none; }
.cm-search__input {
  width: 100%; padding: var(--cm-control-padding-y) var(--cm-control-padding-x) var(--cm-control-padding-y) 36px; border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-md);
  font-family: var(--cm-font-family-sans); font-size: var(--cm-font-body); color: var(--cm-color-text-primary); outline: none; background: var(--cm-color-surface-raised);
}
.cm-search__input::placeholder { color: var(--cm-color-text-faint); }
.cm-search__input:focus { border-color: var(--cm-color-brand); }

.cm-status-pill--danger { color: var(--cm-color-status-danger); background: var(--cm-color-status-danger-bg); }
.cm-status-pill--removed { color: var(--cm-color-surface-raised); background: var(--cm-color-text-secondary); }

.cm-icon-btn {
  width: var(--cm-icon-button-size); height: var(--cm-icon-button-size); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cm-color-border-default); background: var(--cm-color-surface-raised); border-radius: var(--cm-radius-md); color: var(--cm-color-text-secondary);
  cursor: pointer; text-decoration: none; flex: none;
}
.cm-icon-btn:hover { text-decoration: none; }
.cm-icon-btn--success:hover { border-color: var(--cm-color-status-success); color: var(--cm-color-status-success); }
.cm-icon-btn--brand:hover { border-color: var(--cm-color-brand); color: var(--cm-color-brand); }
.cm-icon-btn--neutral:hover { border-color: var(--cm-color-text-subtle); color: var(--cm-color-text-primary); }
.cm-icon-btn--danger { border-color: var(--cm-color-status-danger-border); color: var(--cm-color-status-danger); }
.cm-icon-btn--danger:hover { background: var(--cm-color-status-danger-bg); border-color: var(--cm-color-status-danger); }

.cm-panel-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-3);
  padding: 14px 18px; border-top: 1px solid var(--cm-color-border-subtle); background: var(--cm-color-surface-subtle); flex-wrap: wrap;
}

.cm-pagination { display: flex; align-items: center; gap: 6px; padding: 0; margin: 0; list-style: none; }
.cm-pagination__item { margin: 0; }
.cm-pagination__link {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cm-color-border-default); background: var(--cm-color-surface-raised); border-radius: var(--cm-radius-md); color: var(--cm-color-text-secondary);
  font-weight: var(--cm-weight-bold); font-size: var(--cm-font-compact); padding: 0 8px; margin-left: 0;
}
.cm-pagination__link:hover { background: var(--cm-color-surface-hover); color: var(--cm-color-text-secondary); }
.cm-pagination__item.is-active .cm-pagination__link { background: var(--cm-color-brand); border-color: var(--cm-color-brand); color: var(--cm-color-on-brand); }
.cm-pagination__item.is-disabled .cm-pagination__link, .cm-pagination__link.is-disabled { color: var(--cm-color-text-faint); background: var(--cm-color-surface-raised); cursor: default; pointer-events: none; }
.cm-pagination__ellipsis { border-color: transparent; background: transparent; }
/* ===== Form condivisi (prodotto, sito, proxy, replay, recorder, prova scrape...) ===== */
.cm-back-link { color: var(--cm-color-text-muted); font-size: var(--cm-font-body); text-decoration: none; display: inline-block; margin-bottom: var(--cm-space-3); }
.cm-back-link:hover { color: var(--cm-color-text-secondary); text-decoration: none; }

.cm-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--cm-layout-gap-lg); align-items: start; }
.cm-form-main { display: flex; flex-direction: column; gap: var(--cm-layout-gap-lg); min-width: 0; }
.cm-form-aside { display: flex; flex-direction: column; gap: var(--cm-layout-gap); position: sticky; top: 78px; }

/* Separatore sottile dentro un aside/riepilogo, tra un gruppo di righe e il successivo. */
.cm-divider { height: 1px; background: var(--cm-color-border-subtle); margin: var(--cm-space-3) 0; }

/* Riga "etichetta / valore" di un riepilogo (aside dei form). */
.cm-summary-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--cm-space-2); }
.cm-summary-row-label { font-size: var(--cm-font-body); color: var(--cm-color-text-muted); }

/* Padding standard del contenuto di un .cm-panel quando non è una tabella (form, riepiloghi). */
.cm-panel-body { padding: var(--cm-panel-padding); }
.cm-panel-body.cm-grid-2 { margin-bottom: 0; }

/* Blocco di testo esplicativo dentro un .cm-panel (nota informativa nell'aside di un form). */
.cm-panel-note { padding: var(--cm-space-4); font-size: var(--cm-font-compact); line-height: var(--cm-leading-relaxed); color: var(--cm-color-text-muted); }

.cm-field-label { display: block; font-size: var(--cm-font-xs); font-weight: var(--cm-weight-semibold); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; color: var(--cm-color-text-subtle); margin-bottom: var(--cm-space-2); }
/* "(opzionale)" dentro un'etichetta campo: stessa dimensione del resto dell'etichetta ma senza l'uppercase. */
.cm-field-label-optional { text-transform: none; letter-spacing: 0; color: var(--cm-color-text-subtle); }
/* Etichetta a testo normale (non maiuscolo/uppercase) per input dentro un simulatore/form compatto. */
.cm-field-label-plain { text-transform: none; letter-spacing: normal; font-size: var(--cm-font-compact); color: var(--cm-color-text-secondary); }
.cm-field-input {
  width: 100%; box-sizing: border-box; padding: var(--cm-control-padding-y) var(--cm-control-padding-x); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-md);
  font-family: var(--cm-font-family-sans); font-size: var(--cm-font-body); color: var(--cm-color-text-primary); background: var(--cm-color-surface-raised); outline: none;
}
.cm-field-input:focus { border-color: var(--cm-color-brand); box-shadow: var(--cm-shadow-focus); }
.cm-field-input::placeholder { color: var(--cm-color-text-faint); }
.cm-field-input:disabled, .cm-field-input[readonly] { background: var(--cm-color-surface-subtle); color: var(--cm-color-text-muted); cursor: not-allowed; }
.cm-field-input.is-invalid, .cm-field-input[aria-invalid="true"] { border-color: var(--cm-color-status-danger); }
.cm-field-input.is-invalid:focus, .cm-field-input[aria-invalid="true"]:focus { box-shadow: var(--cm-shadow-focus-danger); }
.cm-field-input.cm-mono { font-family: var(--cm-font-family-mono); }
.cm-field-input--compact { padding: var(--cm-space-1) var(--cm-space-2); border-radius: var(--cm-radius-sm); font-size: var(--cm-font-compact); }
select.cm-field-input {
  cursor: pointer; padding-right: 36px;
}
.cm-checkbox { width: 1rem; height: 1rem; accent-color: var(--cm-color-brand); cursor: pointer; }
.cm-checkbox:disabled { opacity: var(--cm-disabled-opacity); cursor: not-allowed; }
.cm-field-hint { font-size: var(--cm-font-sm); color: var(--cm-color-text-muted); margin-top: var(--cm-space-2); line-height: var(--cm-leading-normal); }
.cm-field-error { margin-top: var(--cm-space-2); color: var(--cm-color-status-danger); font-size: var(--cm-font-sm); line-height: var(--cm-leading-normal); }

@media (max-width: 992px) {
  .cm-form-layout { grid-template-columns: 1fr; }
  .cm-form-aside { position: static; }
  .cm-grid-2-14, .cm-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 576px) {
  .cm-table th, .cm-table td { padding: 8px 8px; }
}

/* Liste Siti/Prodotti/Proxy: la tabella resta larga quanto il suo contenuto naturale (come
   "Prossimi scrape"/"Ultimi job" nel cruscotto) e scorre in orizzontale dentro .cm-panel-scroll
   — niente table-layout:fixed né colonne nascoste, altrimenti si perde la possibilità di
   scorrere per vedere tutti i dati della riga. La pagina resta comunque ferma perché lo scroll
   è contenuto nel pannello, non nel body (vedi [[mobile-scroll-list-tables-fixed-layout]]). */

/* Griglia KPI condivisa da dettaglio link e schedulazione. */
.cm-kpi-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cm-space-3); margin-bottom: var(--cm-space-3); }
@media (max-width: 992px) { .cm-kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) { .cm-kpi-grid-4 { grid-template-columns: minmax(0, 1fr); } }