/* ==========================================================================
   INT-DB — design system sopra Pico CSS v2
   Call center outbound, layout CRM: sidebar sinistra fissa + area contenuto.
   Principi:
   - navigazione sempre a portata, a sinistra, raggruppata per ambito;
   - bersagli grandi e azione primaria evidente (l'operatore guarda lo schermo
     mentre parla, un tocco sbagliato registra un esito sbagliato);
   - urgenza leggibile a colpo d'occhio (scaduto, in attesa, doppioni);
   - tabelle dense ma scansionabili, card con gerarchia chiara.
   ========================================================================== */

/* ---- Token: luce -------------------------------------------------------- */
:root:not([data-theme="dark"]), [data-theme="light"] {
  color-scheme: light;

  --brand: #2563eb;
  --brand-strong: #1e40af;
  --brand-soft: #dbeafe;

  --ok: #15803d;      --ok-bg: #dcfce7;
  --warn: #b45309;    --warn-bg: #fef3c7;
  --danger: #dc2626;  --danger-bg: #fee2e2;
  --info: #0369a1;    --info-bg: #e0f2fe;
  --muted: #64748b;

  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --text: #0f172a;

  --sidebar-bg: #0f172a;
  --sidebar-ink: #e2e8f0;
  --sidebar-muted: #94a3b8;
  --sidebar-hover: rgba(255, 255, 255, .07);
  --sidebar-active: #2563eb;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-pop: 0 6px 16px -2px rgba(15, 23, 42, .14);
  --radius-lg: .75rem;
  --sidebar-w: 15.5rem;

  --pico-background-color: #f1f5f9;
  --pico-color: var(--text);
  --pico-muted-color: #64748b;
  --pico-muted-border-color: var(--border);
  --pico-primary: var(--brand);
  --pico-primary-background: var(--brand);
  --pico-primary-border: var(--brand);
  --pico-primary-hover: var(--brand-strong);
  --pico-primary-hover-background: var(--brand-strong);
  --pico-primary-hover-border: var(--brand-strong);
  --pico-primary-focus: rgba(37, 99, 235, .28);
  --pico-primary-inverse: #fff;
  --pico-secondary: #475569;
  --pico-secondary-background: #475569;
  --pico-secondary-hover-background: #334155;
  --pico-secondary-inverse: #fff;
  --pico-h1-color: var(--text);
  --pico-h2-color: var(--text);
  --pico-h3-color: #1e293b;
  --pico-h4-color: #1e293b;
  --pico-h5-color: #334155;
  --pico-h6-color: #475569;
  --pico-card-background-color: var(--surface);
  --pico-card-border-color: var(--border);
  --pico-card-sectioning-background-color: var(--surface-2);
  --pico-card-box-shadow: var(--shadow-card);
  --pico-form-element-background-color: var(--surface);
  --pico-form-element-border-color: #cbd5e1;
  --pico-form-element-active-background-color: var(--surface);
  --pico-form-element-active-border-color: var(--brand);
  --pico-form-element-focus-color: rgba(37, 99, 235, .28);
  --pico-table-border-color: #e5e9f0;
  --pico-table-row-stripped-background-color: rgba(100, 116, 139, .05);
  --pico-dropdown-background-color: var(--surface);
  --pico-dropdown-border-color: var(--border);
  --pico-dropdown-hover-background-color: var(--surface-2);
  --pico-border-radius: .5rem;
}

/* Tipografia compatta e costante (Pico la fa crescere con lo schermo). */
:root:not([data-theme="dark"]), [data-theme="light"] { --pico-font-size: 94%; }
@media (min-width: 576px) { :root:not([data-theme="dark"]), [data-theme="light"] { --pico-font-size: 94%; } }
@media (min-width: 768px) { :root:not([data-theme="dark"]), [data-theme="light"] { --pico-font-size: 95%; } }
@media (min-width: 1024px) { :root:not([data-theme="dark"]), [data-theme="light"] { --pico-font-size: 96%; } }
@media (min-width: 1280px) { :root:not([data-theme="dark"]), [data-theme="light"] { --pico-font-size: 97%; } }
@media (min-width: 1536px) { :root:not([data-theme="dark"]), [data-theme="light"] { --pico-font-size: 98%; } }

/* ---- Token: scuro ---------------------------------------------------- */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #60a5fa;
    --brand-strong: #93c5fd;
    --brand-soft: #1e3a5f;

    --ok: #4ade80;   --ok-bg: #14381f;
    --warn: #fbbf24; --warn-bg: #3a2c0e;
    --danger: #f87171; --danger-bg: #3a1514;
    --info: #38bdf8; --info-bg: #0d2f44;
    --muted: #94a3b8;

    --surface: #111a2c;
    --surface-2: #16233a;
    --border: #1e293b;
    --text: #e2e8f0;

    --sidebar-bg: #0a0e1c;
    --sidebar-ink: #e2e8f0;
    --sidebar-muted: #7f8ea3;
    --sidebar-hover: rgba(255, 255, 255, .05);
    --sidebar-active: #3b82f6;

    --pico-background-color: #0b1220;
    --pico-color: var(--text);
    --pico-muted-color: #94a3b8;
    --pico-muted-border-color: var(--border);
    --pico-primary: var(--brand);
    --pico-primary-background: #2563eb;
    --pico-primary-border: #2563eb;
    --pico-primary-hover: var(--brand-strong);
    --pico-primary-hover-background: #1d4ed8;
    --pico-primary-hover-border: #1d4ed8;
    --pico-primary-focus: rgba(96, 165, 250, .3);
    --pico-primary-inverse: #fff;
    --pico-secondary: #94a3b8;
    --pico-secondary-background: #334155;
    --pico-secondary-hover-background: #475569;
    --pico-secondary-inverse: #fff;
    --pico-h1-color: var(--text);
    --pico-h2-color: var(--text);
    --pico-h3-color: var(--text);
    --pico-h4-color: var(--text);
    --pico-h5-color: #cbd5e1;
    --pico-h6-color: #94a3b8;
    --pico-card-background-color: var(--surface);
    --pico-card-border-color: var(--border);
    --pico-card-sectioning-background-color: var(--surface-2);
    --pico-card-box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .35);
    --pico-form-element-background-color: var(--surface-2);
    --pico-form-element-border-color: #24324a;
    --pico-form-element-active-background-color: var(--surface);
    --pico-form-element-active-border-color: var(--brand);
    --pico-form-element-focus-color: rgba(96, 165, 250, .3);
    --pico-table-border-color: #1e293b;
    --pico-table-row-stripped-background-color: rgba(100, 116, 139, .06);
    --pico-dropdown-background-color: var(--surface);
    --pico-dropdown-border-color: var(--border);
    --pico-dropdown-hover-background-color: var(--surface-2);
    --pico-font-size: 94%;
  }
  @media (min-width: 576px) { :root:not([data-theme="light"]) { --pico-font-size: 94%; } }
  @media (min-width: 768px) { :root:not([data-theme="light"]) { --pico-font-size: 95%; } }
  @media (min-width: 1024px) { :root:not([data-theme="light"]) { --pico-font-size: 96%; } }
  @media (min-width: 1280px) { :root:not([data-theme="light"]) { --pico-font-size: 97%; } }
  @media (min-width: 1536px) { :root:not([data-theme="light"]) { --pico-font-size: 98%; } }
}

/* ---- Shell: sidebar + contenuto --------------------------------------- */
html { height: 100%; overflow-x: hidden; }
body { min-height: 100%; margin: 0; overflow-x: hidden; }

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

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 60;
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  display: flex; flex-direction: column;
}
.sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.1rem 1.25rem;
  color: var(--sidebar-ink); text-decoration: none; font-weight: 700;
  font-size: 1.02rem; letter-spacing: .01em;
  border-bottom: 1px solid var(--sidebar-hover);
}
.sidebar-brand:hover { color: #fff; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; border-radius: .5rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff; font-size: .82rem; font-weight: 800;
  flex: none;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .75rem 1rem; }
.nav-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--sidebar-muted);
  padding: .9rem .6rem .35rem; opacity: .75;
}
.nav-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem; margin-bottom: .15rem;
  border-radius: .5rem;
  color: var(--sidebar-muted); text-decoration: none;
  font-size: .92rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-item svg { flex: none; opacity: .9; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.nav-item[aria-current="page"] {
  background: linear-gradient(135deg, var(--sidebar-active), #1d4ed8);
  color: #fff; font-weight: 600;
}
.nav-item .badge { margin-left: auto; }

.sidebar-user {
  border-top: 1px solid var(--sidebar-hover);
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.avatar {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff; font-weight: 700; font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-id { display: flex; flex-direction: column; min-width: 0; }
.user-id .u { font-size: .88rem; font-weight: 600; color: var(--sidebar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-id .r { font-size: .72rem; color: var(--sidebar-muted); }
.logout-btn {
  margin-left: auto; border: 0; background: transparent; color: var(--sidebar-muted);
  cursor: pointer; padding: .35rem; border-radius: .4rem; line-height: 0;
}
.logout-btn:hover { color: #fff; background: var(--sidebar-hover); }

.main-shell {
  flex: 1; margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex; flex-direction: column;
}
.layout.no-side .main-shell { margin-left: 0; }
main.container-fluid {
  flex: 1; width: 100%;
  padding: 1.5rem 2rem 3rem;
  max-width: 1440px; margin: 0 auto;
}

/* ---- Messaggi --------------------------------------------------------- */
.messages .alert { margin-bottom: .6rem; }

/* ---- Pagine ----------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.page-head h1, .page-head h2, .page-head h3 {
  margin: 0 0 .2rem; font-weight: 700; letter-spacing: -.01em;
}
.page-head p { margin: 0; color: var(--pico-muted-color); }
.page-actions { display: flex; gap: .5rem; align-items: center; }
.page-actions button, .page-actions a[role="button"] { margin: 0; }

/* ---- Card di contenuto ---------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card + .card { margin-top: 1rem; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.card-head h4, .card-head h5 { margin: 0; font-size: .98rem; }
.card-head .card-sub { font-size: .8rem; color: var(--pico-muted-color); margin-top: .15rem; }
.card-body { padding: 1.05rem 1.1rem 1.2rem; }
.card-body.clean { padding: 0; }
.card-body.clean .scroll-x { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ---- Bottoni compatti e azioni in riga ----------------------------------- */
.btn-sm, button.btn-sm {
  padding: .22rem .7rem; font-size: .78rem; margin: 0;
}
.td-actions { display: flex; gap: .35rem; align-items: center; white-space: nowrap; }
.td-actions a[role="button"] { margin: 0; padding: .18rem .6rem; font-size: .78rem; }
.td-actions a:not([role="button"]), .crm-compact-item .quiet-link { font-size: .78rem; }
.crm-compact-item form.inline { margin: 0; }
.crm-compact-item form.inline button.quiet-link { margin: 0; padding: 0; border: 0; background: transparent; color: var(--brand); }
.company-form, .appointment-form { max-width: 66rem; }
.google-conflict-list { display: grid; gap: .75rem; }
.google-conflict-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.google-conflict-item > div:first-child { display: grid; gap: .15rem; }
.google-conflict-item span, .google-conflict-item small { color: var(--pico-muted-color); }
.google-conflict-actions { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.google-conflict-actions form, .google-conflict-actions button { margin: 0; }
@media (max-width: 700px) {
  .google-conflict-item { align-items: flex-start; flex-direction: column; }
  .google-conflict-actions { justify-content: flex-start; }
}
.center-box { max-width: 44rem; margin: 0 auto; }
.muted { color: var(--pico-muted-color); }

/* ---- Paginatore ------------------------------------------------------------ */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 1.1rem; border-top: 1px solid var(--border);
}
.pager a[role="button"] { margin: 0; padding: .3rem .85rem; font-size: .82rem; }
.pager .page-pos { font-size: .82rem; color: var(--pico-muted-color); }
.pager .page-pos strong { color: var(--pico-color); }

/* ---- Colonne asimmetriche --------------------------------------------------- */
.cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* ---- Tab ------------------------------------------------------------------ */
.tabs { margin-bottom: .5rem; }
.tablist {
  display: flex; gap: .15rem; flex-wrap: nowrap; overflow-x: auto;
  border-bottom: 1px solid var(--border); margin-bottom: 1.25rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.tab {
  appearance: none; background: transparent; border: 0; margin: 0;
  padding: .6rem .95rem; font-size: .88rem; font-weight: 600;
  color: var(--pico-muted-color); cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; line-height: 1.2;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text); }
.tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: .3rem; }
.tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tabpanel[hidden] { display: none; }
.tabpanel { outline: none; }
.tab-count {
  margin-left: .4rem; font-size: .7rem; font-weight: 700;
  color: var(--pico-muted-color); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 2rem; padding: 0 .42rem;
  font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] .tab-count { color: var(--brand-strong); background: var(--brand-soft); border-color: transparent; }
.assignments-tabs .tablist { overflow: visible; flex-wrap: wrap; }
.assignment-form-tabs { margin-bottom: 0; }
.assignment-form-tabs .tablist { margin-bottom: 1rem; }
.assignment-form h6 { margin: 0 0 .65rem; font-size: .9rem; }
.assignment-grid { gap: .65rem; }
.assignment-form .assignment-grid label { margin-bottom: .45rem; }
.assignment-form .assignment-grid input,
.assignment-form .assignment-grid select { margin-bottom: 0; }
.assignment-form details { margin: .35rem 0 .75rem; }
.assignment-form label > small {
  display: block;
  width: auto;
  margin: .25rem 0 .45rem;
  font-size: .78rem;
  line-height: 1.3;
}
.province-grid { columns: 3; }
.assignment-option {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  width: 100% !important;
  gap: 0;
}
.assignment-option input[type="checkbox"] { flex: none; margin: 0 .45rem 0 0; }
.assignment-option > span { flex: 1; min-width: 0; }
.assignment-option > small {
  flex-basis: 100%;
  margin: .15rem 0 .35rem 1.7rem;
}
.assignment-error { display: block; margin-top: .5rem; color: var(--danger); }
.assignment-count {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .9rem; padding: .6rem .75rem;
  border: 1px solid rgba(43, 73, 99, .78); border-radius: .6rem;
  background: rgba(7, 19, 33, .28); color: var(--pico-muted-color);
  font-size: .84rem;
}
.assignment-count strong { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.assignment-count-result {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .55rem;
  min-width: 0;
  text-align: right;
}
.assignment-count-result strong {
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.assignment-count-note {
  color: var(--pico-muted-color);
  font-size: .78rem;
  white-space: nowrap;
}
.assignment-form-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1rem;
}
.assignment-form-actions button {
  width: auto;
  min-width: 7rem;
  margin: 0;
  flex: 0 0 auto;
}
.assignment-action-hint { color: var(--pico-muted-color); font-size: .78rem; }
.assignment-stats { margin-bottom: 1rem; }
@media (max-width: 820px) { .tablist { margin-bottom: 1rem; } .tab { padding: .55rem .75rem; font-size: .84rem; } }

/* ---- Barre di avanzamento ---------------------------------------------------- */
.bar { height: .4rem; border-radius: 2rem; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 2rem; background: var(--brand); }
.bar .done { background: var(--ok); }
.bar .warn { background: var(--warn); }

/* ---- Rendimento liste --------------------------------------------------- */
.mese-nav {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.mese-nav strong { font-size: 1.05rem; text-transform: capitalize; }
.mese-nav-freccia {
  font-size: .82rem; color: var(--pico-muted-color); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .25rem .6rem; background: var(--surface);
}
.mese-nav-freccia:hover { color: var(--brand-strong); border-color: var(--brand); }

/* La variazione sta accanto al valore: verde in su, rosso in giù. */
.delta {
  display: inline-block; margin-left: .35rem; font-size: .75rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.delta-su   { color: var(--ok); }
.delta-giu  { color: var(--danger); }
.delta-pari { color: var(--pico-muted-color); }

.rendimento-progress { min-width: 9rem; }
.rendimento-progress .bar { margin-bottom: .25rem; }
.rendimento-progress .muted { font-size: .75rem; }
.rendimento-filtri { font-size: .72rem; }

/* ---- Filtri per settore ATECO ------------------------------------------ */
/* La tabella dei settori è scritta a mano: l'elenco dei codici va mostrato,
   non nascosto, altrimenti non c'è modo di accorgersi che è sbagliata. */
.settori-coperti { margin: .5rem 0 1rem; }
.settori-coperti summary { font-size: .85rem; }
.settori-elenco { margin: .5rem 0 0; font-size: .72rem; }
.settori-elenco > div { margin-bottom: .3rem; }
.settori-elenco dt { font-weight: 600; }
.settori-elenco dt .tag { font-weight: 400; margin-left: .35rem; }
.settori-elenco dd {
  margin: 0; color: var(--muted, #8a8f98);
  font-variant-numeric: tabular-nums;
}
.cerca-settori { margin-top: .75rem; }

/* ---- Statistiche ----------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: .8rem; margin-bottom: 1.5rem;
}
.stat {
  margin: 0; padding: 1rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  background: var(--surface);
}
.stat .stat-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--pico-muted-color); margin-bottom: .35rem;
}
.stat .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .stat-hint { font-size: .8rem; color: var(--pico-muted-color); margin-top: .2rem; }

/* ---- Alert ------------------------------------------------------------- */
.alert {
  border: 1px solid var(--border); border-left: 4px solid var(--info);
  border-radius: var(--radius);
  background: var(--info-bg);
  padding: .65rem 1rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.alert-danger { border-left-color: var(--danger); background: var(--danger-bg); }
.alert-warn   { border-left-color: var(--warn); background: var(--warn-bg); }
.alert-success{ border-left-color: var(--ok); background: var(--ok-bg); }
.alert-muted  { border-left-color: var(--pico-muted-color); background: var(--surface); }
.alert form { margin: 0 0 0 auto; }
.alert.block { display: block; }
.alert.block form { margin: .5rem 0 0; }

/* ---- Badge e tag --------------------------------------------------------- */
.badge {
  display: inline-block; min-width: 1.2rem; padding: .04rem .42rem;
  border-radius: 2rem; background: var(--danger); color: #fff;
  font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.2;
}
.tag {
  display: inline-block; border-radius: .3rem; padding: .05rem .45rem;
  font-size: .75rem; font-weight: 500;
  background: var(--surface-2); color: var(--pico-muted-color);
  border: 1px solid var(--border); white-space: nowrap;
}
.tag.ok      { background: var(--ok-bg);  color: var(--ok);     border-color: transparent; }
.tag.warn    { background: var(--warn-bg); color: var(--warn);   border-color: transparent; }
.tag.overdue { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.tag.info    { background: var(--info-bg); color: var(--info);   border-color: transparent; }
.tag.brand   { background: var(--brand-soft); color: var(--brand-strong); border-color: transparent; }

/* ---- Tabelle --------------------------------------------------------------- */
table.compact td, table.compact th { padding: .45rem .65rem; font-size: .86rem; }
table.compact th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pico-muted-color); font-weight: 600; border-bottom: 2px solid var(--border);
}
table.compact tbody tr:hover td { background: var(--surface-2); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---- Form / toolbar ------------------------------------------------------- */
.filters {
  display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: .85rem 1.1rem; margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
}
.filters label { margin-bottom: 0; font-size: .78rem; font-weight: 600; color: var(--pico-muted-color); }
.filters input, .filters select { margin-bottom: 0; font-size: .9rem; }
.filters button, .filters [role="button"] { margin-bottom: 0; }

/* ---- Esiti chiamata: semaforo, bersagli grandi ------------------------------ */
.esiti { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.esiti label {
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .4rem .7rem; margin: 0;
  border: 1px solid var(--pico-form-element-border-color);
  border-radius: var(--radius); cursor: pointer;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.esiti label:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 2px var(--pico-primary-focus);
}
.esiti input[type="radio"] { margin: 0; width: 1.15rem; height: 1.15rem; flex: none; }
.tone-good    { border-left: 4px solid var(--ok) !important; }
.tone-bad     { border-left: 4px solid var(--danger) !important; }
.tone-retry   { border-left: 4px solid var(--warn) !important; }
.tone-neutral { border-left: 4px solid var(--pico-muted-color) !important; }
.tocco { min-height: 44px; }

/* ---- Layout dettaglio azienda ------------------------------------------------ */
.dossier th { width: 8.5rem; }
.sticky-side { position: sticky; top: 1rem; }

/* ---- Storico assegnazioni: schede senza scrollbar interna -------------- */
.assignment-history { display: grid; gap: .75rem; }
.assignment-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem 1rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(43, 73, 99, .78);
  border-radius: .6rem;
  background: rgba(7, 19, 33, .28);
}
.assignment-history-summary { min-width: 0; }
.assignment-history-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .35rem;
}
.assignment-history-title strong { font-size: .9rem; }
.assignment-history-title .muted { font-size: .78rem; }
.assignment-history-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem 1rem;
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}
.assignment-history-details div { min-width: 0; }
.assignment-history-details dt {
  color: var(--pico-muted-color);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.assignment-history-details dd {
  margin: .1rem 0 0;
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.assignment-history-action {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: .25rem;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}
.assignment-history-action form,
.assignment-history-action > a,
.assignment-history-action > .tag {
  width: 5.5rem !important;
  min-width: 5.5rem;
  box-sizing: border-box;
  text-align: center;
}
.assignment-history-action form { display: inline-flex; margin: 0; }
.assignment-history-action form button { width: 100%; }
.assignment-history-action .assignment-history-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(22, 168, 216, .3);
  background: rgba(22, 168, 216, .1);
  color: #16a8d8;
  text-decoration: none !important;
}
.assignment-history-action .assignment-history-edit:hover {
  background: rgba(22, 120, 163, .72);
  color: #effcff;
}
.assignment-history-inline-edit { width: 5.5rem; }
.assignment-history-inline-edit summary { cursor: pointer; list-style: none; }
.assignment-history-inline-edit summary::-webkit-details-marker { display: none; }
.assignment-history-inline-edit[open] { width: min(15rem, 72vw); }
.assignment-history-inline-edit form {
  display: grid !important;
  gap: .35rem;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: .35rem !important;
  text-align: left;
}
.assignment-history-inline-edit label { margin: 0; font-size: .72rem; white-space: normal; }
.assignment-history-inline-edit select { margin: .2rem 0 0; font-size: .75rem; }
.assignment-history-inline-edit button { width: 100% !important; }
.assignment-history-empty { margin: 0; }

@media (max-width: 700px) {
  .assignment-history-item { grid-template-columns: 1fr; }
  .assignment-history-details { grid-column: 1; grid-row: auto; }
  .assignment-history-action {
    grid-column: 1;
    grid-row: auto;
    justify-self: end;
  }
  .assignment-history-details { grid-template-columns: 1fr; }
}

/* ---- TheEnq brand layer ----------------------------------------------------
   Il sito ufficiale usa un'identità blu/ciano. Qui la traduciamo in una
   versione scura e riposante: navy profondo, superfici appena più chiare e
   accento ciano solo per azioni e stati attivi. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand: #16a8d8;
  --brand-strong: #0782c1;
  --brand-soft: #123d58;
  --ok: #55c98a;
  --ok-bg: #123a2b;
  --warn: #e9b85c;
  --warn-bg: #3d3119;
  --danger: #f0808d;
  --danger-bg: #3d2027;
  --info: #43b9e4;
  --info-bg: #12364a;
  --muted: #8ca5b8;

  --surface: #101f31;
  --surface-2: #14283d;
  --border: #223b53;
  --text: #e6eef5;

  --sidebar-bg: #071321;
  --sidebar-ink: #e6eef5;
  --sidebar-muted: #8da5b8;
  --sidebar-hover: rgba(55, 181, 222, .11);
  --sidebar-active: #087fbd;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .24), 0 8px 24px rgba(0, 0, 0, .12);
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, .28);

  --pico-background-color: #0a1726;
  --pico-color: var(--text);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--border);
  --pico-primary: var(--brand);
  --pico-primary-background: #087fbd;
  --pico-primary-border: #087fbd;
  --pico-primary-hover: #63c9e8;
  --pico-primary-hover-background: #096b9f;
  --pico-primary-hover-border: #096b9f;
  --pico-primary-focus: rgba(22, 168, 216, .28);
  --pico-primary-inverse: #fff;
  --pico-secondary: #a9bac8;
  --pico-secondary-background: #29445d;
  --pico-secondary-hover-background: #35546d;
  --pico-secondary-inverse: #fff;
  --pico-h1-color: var(--text);
  --pico-h2-color: var(--text);
  --pico-h3-color: var(--text);
  --pico-h4-color: var(--text);
  --pico-h5-color: #d4e1ea;
  --pico-h6-color: #aac0cf;
  --pico-card-background-color: var(--surface);
  --pico-card-border-color: var(--border);
  --pico-card-sectioning-background-color: var(--surface-2);
  --pico-card-box-shadow: var(--shadow-card);
  --pico-form-element-background-color: var(--surface-2);
  --pico-form-element-border-color: #2b4963;
  --pico-form-element-active-background-color: #172f47;
  --pico-form-element-active-border-color: var(--brand);
  --pico-form-element-focus-color: rgba(22, 168, 216, .3);
  --pico-table-border-color: var(--border);
  --pico-table-row-stripped-background-color: rgba(80, 149, 182, .06);
  --pico-dropdown-background-color: var(--surface);
  --pico-dropdown-border-color: var(--border);
}

body {
  background:
    radial-gradient(circle at 86% -12%, rgba(0, 157, 207, .11), transparent 30rem),
    var(--pico-background-color);
}
.sidebar {
  border-right: 1px solid rgba(73, 151, 184, .14);
  box-shadow: 6px 0 24px rgba(0, 0, 0, .08);
}
.sidebar-brand {
  min-height: 4.2rem;
  padding: 1rem 1.15rem;
  gap: .7rem;
}
.theenq-wordmark {
  display: block;
  width: 8.7rem;
  height: auto;
  max-width: 100%;
}
.brand-product {
  color: #83b8d0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-item[aria-current="page"] {
  background: linear-gradient(135deg, #0566ad, #079ecb);
  box-shadow: 0 5px 14px rgba(0, 126, 188, .2);
}
.card, .stat, .filters {
  box-shadow: var(--shadow-card);
}
button:not(.tab):not(.logout-btn), [role="button"] {
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
button:not(.tab):not(.logout-btn):hover, [role="button"]:hover {
  box-shadow: 0 5px 14px rgba(0, 132, 191, .18);
}
.login-wrap .login-logo {
  display: block;
  width: min(15rem, 75vw);
  height: auto;
  margin: 0 auto .65rem;
}
.login-product {
  display: block;
  margin-bottom: 1.15rem;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.login-wrap article {
  border: 1px solid var(--border);
  background: rgba(16, 31, 49, .92);
  box-shadow: var(--shadow-pop);
}

/* Watermark TheEnq: grande, leggero e sempre dietro ai contenuti. */
.main-shell {
  position: relative;
  overflow: visible;
}
.main-shell::before {
  content: "";
  position: fixed;
  z-index: 2;
  pointer-events: none;
  top: 50%;
  left: 50%;
  right: auto;
  width: min(54vw, 50rem);
  height: min(78vh, 50rem);
  transform: translate(-50%, -50%);
  background: url("/static/callcenter/theenq-logo-big.cbb25a7b31bd.png") center / contain no-repeat;
  opacity: .07;
  filter: saturate(.78);
}
.main-shell > * {
  position: relative;
  z-index: 1;
}

/* ---- Stati vuoti -------------------------------------------------------------- */
.empty { text-align: center; padding: 3rem 1rem; color: var(--pico-muted-color); }
.empty .empty-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* ---- Login ---------------------------------------------------------------------- */
.login-wrap { max-width: 26rem; margin: 10vh auto 0; text-align: center; }
.login-wrap .brand-mark { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; margin: 0 auto .75rem; }
.login-wrap article { padding: 2rem; text-align: left; }

/* ---- Mappa di calore (dashboard) ---------------------------------------------- */
.heat td { text-align: center; font-size: .7rem; padding: .2rem; }
.heat td span { display: block; border-radius: .2rem; padding: .25rem 0; }
.heat .h0 { background: transparent; color: var(--pico-muted-color); }
.heat .h1 { background: #cfe8d8; color: #14361f; }
.heat .h2 { background: #8fd0a8; color: #14361f; }
.heat .h3 { background: #4fae76; color: #fff; }
.heat .h4 { background: #2e7d32; color: #fff; }

/* ---- Riduzione movimento --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Schermi piccoli: la sidebar diventa barra in alto ---------------------------- */
@media (max-width: 820px) {
  .sidebar {
    position: static; width: 100%; height: auto;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: .5rem .9rem; gap: .75rem;
    overflow-x: auto;
  }
  .sidebar-brand { padding: .4rem 0; border-bottom: 0; min-height: auto; }
  .theenq-wordmark { width: 7.3rem; }
  .brand-product { display: none; }
  .sidebar-nav { flex: none; display: flex; align-items: center; gap: .15rem; padding: 0; overflow: visible; }
  .nav-label { display: none; }
  .nav-item { padding: .4rem .55rem; font-size: .85rem; margin: 0; }
  .nav-item span.ni-text { display: none; }
  .sidebar-user { display: none; }
  .main-shell { margin-left: 0; }
  .main-shell::before {
    left: 50%;
    width: 78vw;
    height: 72vh;
  }
  main.container-fluid { padding: 1rem 1rem 2.5rem; }
  .esiti { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
}

/* ---- Sidebar: rifinitura TheEnq ------------------------------------------- */
.sidebar {
  position: fixed;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(10, 44, 66, .22), transparent 18rem),
    var(--sidebar-bg);
}
.sidebar::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, #0758a9, #15b2df, transparent);
  opacity: .9;
}
.sidebar::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -4.5rem;
  bottom: 3.5rem;
  width: 14rem;
  height: 14rem;
  background: url("/static/callcenter/theenq-logo-big.cbb25a7b31bd.png") center / contain no-repeat;
  opacity: .025;
  pointer-events: none;
}
.sidebar > * {
  position: relative;
  z-index: 1;
}
.sidebar-brand {
  position: relative;
  background: linear-gradient(180deg, rgba(22, 168, 216, .055), transparent);
  box-shadow: 0 1px 0 rgba(74, 164, 195, .12);
}
.sidebar-brand::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  bottom: -.5px;
  width: 2.7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(22, 168, 216, .45);
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .85rem .65rem 1rem;
}
.nav-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem .7rem .4rem;
  color: #8eb0c1;
}
.nav-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(111, 169, 193, .22), transparent);
}
.nav-item {
  position: relative;
  border: 1px solid transparent;
  padding: .54rem .7rem;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.nav-item:hover {
  border-color: rgba(45, 162, 201, .18);
  transform: translateX(2px);
}
.nav-item[aria-current="page"] {
  border-color: rgba(115, 216, 242, .2);
  background: linear-gradient(100deg, #0569ad, #079fca);
  box-shadow: 0 7px 18px rgba(0, 118, 177, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -.66rem;
  top: .38rem;
  bottom: .38rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #8de6f3;
  box-shadow: 0 0 9px rgba(91, 221, 240, .65);
}
.nav-item[aria-current="page"] svg { color: #e7fbff; }
.sidebar-user {
  background: linear-gradient(180deg, transparent, rgba(9, 65, 91, .18));
  box-shadow: 0 -1px 0 rgba(74, 164, 195, .12);
}
.avatar {
  background: linear-gradient(135deg, #0b81c0, #16b4dc);
  box-shadow: 0 0 0 3px rgba(22, 168, 216, .1), 0 5px 12px rgba(0, 102, 157, .24);
}
.logout-btn:hover {
  color: #8ee8f4;
  background: rgba(22, 168, 216, .13);
}

@media (max-width: 820px) {
  .sidebar {
    position: relative;
  }
  .sidebar-nav {
    justify-content: flex-start;
    padding: 0;
  }
  .nav-label { display: none; }
  .nav-item { padding: .4rem .55rem; }
  .sidebar::after { display: none; }
  .sidebar-brand::after { display: none; }
  .nav-item[aria-current="page"]::before { display: none; }
}

/* ---- Rifinitura comune delle sezioni -----------------------------------
   Tutte le pagine applicative condividono gli stessi livelli: intestazione,
   riepilogo, contenitore e azione. L'accento ciano resta riservato a stati
   attivi e azioni, mentre i contenuti rimangono su superfici navy. */
:root[data-theme="dark"] {
  --brand-cyan: #16a8d8;
  --brand-cyan-bright: #63c9e8;
  --surface-panel: #101f31;
  --surface-panel-raised: #14283d;
  --border-brand: #2b4963;
  --border-soft: #2b4963;
  --brand-green: #78d987;
}

main.container-fluid {
  padding-top: 1.35rem;
}

.page-head {
  position: relative;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(48, 86, 115, .55);
}
.page-head h3 {
  color: #f0f6fa;
  font-size: 1.45rem;
  letter-spacing: -.025em;
}
.page-head p {
  color: #8ca5b8;
  font-size: .88rem;
  line-height: 1.45;
}
.page-head p strong { color: #dbeaf2; }

.card {
  border-color: var(--border-brand);
  border-radius: .75rem;
  background: rgba(16, 31, 49, .88);
}
.card-head {
  min-height: 2.75rem;
  padding: .7rem 1rem;
  border-bottom-color: var(--border-soft);
  background: linear-gradient(110deg, rgba(19, 132, 183, .16), transparent 70%);
}
.card-head h4, .card-head h5 {
  color: #fff;
  letter-spacing: -.01em;
}
.card-head .card-sub { color: #8ca5b8; }
.card-body { padding: .95rem 1rem 1.05rem; }
.card + .card { margin-top: .85rem; }

.page-actions a[role="button"],
.page-actions button {
  border-color: rgba(22, 168, 216, .5);
  box-shadow: 0 4px 12px rgba(0, 100, 153, .1);
}
/* Le azioni devono avere il loro peso visivo, senza trasformarsi in barre. */
body:not(.admin-page) button:not(.tab):not(.logout-btn),
body:not(.admin-page) [type="submit"],
body:not(.admin-page) [type="button"],
body:not(.admin-page) a[role="button"] {
  width: auto;
  min-height: 2rem;
  padding: .38rem .78rem;
  font-size: .82rem;
  line-height: 1.2;
}
body:not(.admin-page) .action-primary {
  background: linear-gradient(135deg, #087fbd, #16a8d8);
  border-color: rgba(99, 209, 236, .48);
  color: #f1fcff;
  box-shadow: 0 4px 12px rgba(0, 121, 181, .18);
}
body:not(.admin-page) .action-primary:hover {
  background: linear-gradient(135deg, #0994cc, #46c6e3);
  border-color: rgba(159, 237, 249, .7);
  color: #fff;
}
body:not(.admin-page) .action-secondary {
  background: rgba(22, 168, 216, .1);
  border-color: rgba(22, 168, 216, .3);
  color: #16a8d8;
}
button:not(.tab):not(.logout-btn),
[role="button"] {
  border-radius: .5rem;
  font-weight: 600;
}
button:not(.tab):not(.logout-btn):focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--brand-cyan-bright);
  outline-offset: 2px;
}
button.secondary,
[role="button"].secondary {
  color: #c5d7e1;
  border-color: rgba(111, 155, 180, .45);
  background: rgba(32, 61, 86, .72);
}
body:not(.admin-page) button.secondary.outline,
body:not(.admin-page) [role="button"].secondary.outline {
  background: rgba(22, 168, 216, .1);
  border-color: rgba(22, 168, 216, .3);
  color: #16a8d8;
}
body:not(.admin-page) button.secondary.outline:hover,
body:not(.admin-page) [role="button"].secondary.outline:hover {
  background: rgba(22, 168, 216, .18);
  border-color: #16a8d8;
  color: #63c9e8;
}
button.secondary:hover,
[role="button"].secondary:hover {
  color: #f0f8fb;
  border-color: rgba(99, 209, 236, .68);
  background: rgba(37, 86, 116, .82);
}
button.outline,
[role="button"].outline {
  background: transparent;
}

.stats {
  gap: .7rem;
  margin-bottom: 1.15rem;
}
.stat {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  padding: .85rem 1rem;
  border-color: var(--border-brand);
  background: rgba(16, 31, 49, .88);
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand-cyan-bright), var(--brand-strong));
  opacity: .85;
}
.stat .stat-label {
  color: #8ca5b8;
  font-size: .72rem;
}
.stat .stat-value { color: #edf7fb; }
.stat .stat-value.stat-danger { color: var(--danger); }
.stat .stat-value.stat-warn { color: var(--warn); }
.stat .stat-hint { color: #7895a8; }

.tablist {
  gap: .2rem;
  padding: .25rem;
  border: 1px solid var(--border-soft);
  border-radius: .65rem;
  background: rgba(16, 31, 49, .88);
}
.tab {
  border-bottom: 0;
  border-radius: .42rem;
  padding: .52rem .85rem;
}
.tab:hover { background: rgba(22, 168, 216, .08); }
.tab[aria-selected="true"] {
  color: #e8f9fd;
  background: linear-gradient(100deg, #0569ad, #079fca);
  border-bottom-color: transparent;
  border-color: rgba(115, 216, 242, .2);
  box-shadow: 0 7px 18px rgba(0, 118, 177, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.tab[aria-selected="true"] .tab-count {
  color: #e9fbff;
  background: rgba(6, 56, 82, .45);
  border-color: rgba(141, 230, 243, .32);
}
.tab-count {
  color: #8ca5b8;
  background: rgba(20, 40, 61, .8);
  border-color: var(--border-soft);
}

.filters {
  gap: .7rem;
  padding: .75rem 1rem .9rem;
  border-radius: .75rem;
  border-color: var(--border-brand);
  background: rgba(16, 31, 49, .88);
}
.filters label { color: #8ca5b8; }
.filters input, .filters select { background-color: rgba(20, 40, 61, .88); }
.filters-in-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

table.compact th {
  color: #8fb0c1;
  border-bottom-color: var(--border-brand);
  background: rgba(7, 19, 33, .24);
}
table.compact td { border-bottom-color: rgba(43, 73, 99, .6); }
table.compact tbody tr:hover td { background: rgba(22, 168, 216, .08); }
table.compact a { color: var(--brand-cyan-bright); }

details {
  margin: .55rem 0 .8rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border-soft);
  border-radius: .5rem;
  background: rgba(7, 19, 33, .28);
}
details summary { color: #b9d3df; font-weight: 600; }
details[open] summary { color: var(--brand-cyan-bright); margin-bottom: .65rem; }

.alert {
  border-color: var(--border-soft);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.tag.brand {
  color: #bcecf7;
  background: rgba(18, 61, 88, .75);
  border-color: rgba(22, 168, 216, .28);
}
.empty {
  padding: 2.4rem 1rem;
  color: #8eabba;
}
.empty .empty-icon { filter: saturate(.8); }

.page-stats { margin-bottom: 1rem; }
.pipeline-stat { text-align: center; }
.pipeline-stat .stat-label { justify-content: center; }
.logout-form { margin: 0; }
.filters-money { width: 9rem; }
.form-error { color: var(--danger); }
.script-body { white-space: pre-wrap; }
.script-section-title { margin-top: 1rem; }
body:not(.admin-page) .call-save-actions button { width: 100%; }
body:not(.admin-page) .login-wrap button { width: 100%; }
body:not(.admin-page) .assignment-history-action form button {
  width: 5.5rem !important;
  min-width: 5.5rem;
  box-sizing: border-box;
}
.operator-card .card-body { padding: .8rem .9rem; }
.operator-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .45rem;
}
.inline-help { margin: .55rem 0 0; font-size: .82rem; }
.full-width-action { width: 100%; }
.form-search { margin: 0; }
.form-search-help { margin: .6rem 0 0; font-size: .82rem; }
.alert-duplicate { padding: 1rem; }
.table-select { margin: 0; font-size: .8rem; }
.table-action { margin: 0; padding: .25rem .65rem; font-size: .78rem; }
.table-note { display: block; margin: .25rem 0 0; font-size: .8rem; }
.appointment-result-group { margin: 0; }
.login-title { margin-bottom: 1.5rem; text-align: center; }
.assignment-summary { margin: 0 0 .8rem; font-size: .9rem; }
.assignment-progress-row { margin-bottom: .85rem; }
.assignment-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .25rem;
  font-size: .85rem;
}

@media (max-width: 820px) {
  main.container-fluid { padding-top: 1rem; }
  .page-head { padding-bottom: .7rem; }
  .card-head { padding: .65rem .8rem; }
  .card-body { padding: .8rem; }
  .tablist { overflow-x: auto; }
}

/* ---- Clienti: rubrica CRM interna -------------------------------------- */
.page-kicker {
  display: block;
  margin-bottom: .22rem;
  color: var(--brand-cyan-bright, var(--brand));
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.client-page-head { margin-bottom: .9rem; }
.client-register-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-brand, var(--border));
  border-radius: .75rem;
  background: rgba(16, 31, 49, .9);
  box-shadow: var(--shadow-card);
}
.client-register-strip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand-cyan-bright, var(--brand));
}
.client-register-strip > div {
  display: flex;
  min-height: 4.35rem;
  padding: .72rem 1rem;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(43, 73, 99, .72);
}
.client-register-strip > div:first-child { border-left: 0; padding-left: 1.2rem; }
.client-register-strip span {
  color: #87a5b7;
  font-size: .69rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.client-register-strip strong {
  color: #edf8fb;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.client-register-strip .is-due strong { color: var(--danger); }
.client-filters .client-search { flex: 1 1 20rem; }
.client-filters .client-search input { width: 100%; }
.quiet-link, .back-link {
  color: var(--brand-cyan-bright, var(--brand));
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}
.quiet-link:hover, .back-link:hover { text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: .35rem; }

.client-table-card { overflow: visible; }
.client-table-card .card-body.clean,
.client-table-card .scroll-x { border-radius: 0; }
.client-table { min-width: 68rem; }
.client-identity {
  display: inline-flex;
  min-width: 14rem;
  align-items: center;
  gap: .65rem;
  color: inherit !important;
  text-decoration: none;
}
.client-identity:hover strong { color: var(--brand-cyan-bright, var(--brand)); }
.client-identity > span:last-child { display: grid; min-width: 0; }
.client-identity strong {
  max-width: 19rem;
  overflow: hidden;
  color: #eaf5f8;
  font-size: .88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-identity small {
  max-width: 19rem;
  overflow: hidden;
  color: #819daf;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-avatar {
  display: inline-flex;
  width: 2rem;
  height: 2.2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(74, 188, 220, .32);
  border-radius: .38rem .7rem .7rem .38rem;
  color: #bfeefa;
  background: linear-gradient(145deg, rgba(6, 105, 173, .75), rgba(8, 53, 82, .85));
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: inset 3px 0 0 rgba(99, 209, 236, .38);
}
.client-status-cell { display: flex; max-width: 13rem; flex-wrap: wrap; gap: .25rem; }
.client-empty strong { display: block; margin-bottom: .2rem; color: var(--pico-color); }
.client-empty p { margin: 0 0 .8rem; }

.client-dossier-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border-brand, var(--border));
  border-left: 4px solid var(--brand-cyan-bright, var(--brand));
  border-radius: .75rem;
  background: linear-gradient(110deg, rgba(10, 39, 61, .95), rgba(16, 31, 49, .9));
  box-shadow: var(--shadow-card);
}
.client-dossier-avatar {
  display: inline-flex;
  width: 4.25rem;
  height: 4.7rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(99, 209, 236, .34);
  border-radius: .5rem 1.15rem 1.15rem .5rem;
  color: #e1f8fc;
  background: linear-gradient(145deg, #0569ad, #087f9f);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: inset 5px 0 0 rgba(174, 239, 248, .22), 0 9px 20px rgba(0, 89, 137, .2);
}
.client-dossier-title h2 { margin: 0 0 .45rem; font-size: 1.6rem; letter-spacing: -.02em; }
.client-tags, .client-quick-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.client-quick-actions { justify-content: flex-end; }
.client-dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  align-items: start;
}
.client-dossier-grid .card + .card { margin-top: 0; }
.client-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.2rem;
  margin: 0;
}
.client-facts > div { padding: .55rem 0; border-bottom: 1px solid rgba(43, 73, 99, .55); }
.client-facts > div:nth-last-child(-n+2) { border-bottom-color: transparent; }
.client-facts dt {
  margin-bottom: .13rem;
  color: #819daf;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.client-facts dd { margin: 0; overflow-wrap: anywhere; font-size: .88rem; }
.client-address { margin: 0 0 .8rem; color: #b9d0dc; font-size: .88rem; font-style: normal; }
.client-notes {
  min-height: 5rem;
  padding: .8rem .9rem;
  border-left: 3px solid rgba(22, 168, 216, .42);
  border-radius: .25rem .5rem .5rem .25rem;
  background: rgba(7, 19, 33, .3);
  white-space: normal;
}
.client-notes.is-empty { color: #7894a6; font-style: italic; }
.client-history-title { margin-top: 1.1rem !important; }
.client-history-facts { margin-bottom: .4rem; }
.client-extra-properties {
  margin-top: 1rem;
  border-top: 1px solid rgba(43, 73, 99, .72);
  padding-top: .8rem;
}
.client-extra-properties summary {
  color: #a8c8d8;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
}
.client-extra-properties[open] summary { margin-bottom: .7rem; }
.client-extra-table { margin: 0; font-size: .78rem; }
.client-extra-table th {
  width: 42%;
  color: #91adbc;
  font-weight: 650;
  text-align: left;
  vertical-align: top;
}
.client-extra-table td { overflow-wrap: anywhere; vertical-align: top; }
.client-audit { margin-top: 1rem; color: #718e9f; font-size: .72rem; text-align: right; }

.client-form { max-width: 62rem; margin: 0 auto; }
.client-form-section { overflow: visible; }
.form-grid { display: grid; gap: .8rem 1rem; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid label, .client-form-section > .card-body > label {
  margin: 0;
  color: #91adbc;
  font-size: .76rem;
  font-weight: 650;
}
.form-grid input, .form-grid select, .form-grid textarea,
.client-form-section > .card-body > label textarea { margin: .28rem 0 0; }
.form-span-2 { grid-column: 1 / -1; }
.form-check { display: flex; align-items: center; min-height: 4.2rem; }
.form-check label { display: flex; align-items: center; gap: .55rem; color: #c7dce5; }
.form-check input { order: -1; margin: 0; }
.field-error { display: block; margin-top: .25rem; color: var(--danger); font-weight: 600; }
.client-form-actions {
  position: sticky;
  z-index: 8;
  bottom: .75rem;
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  margin-top: 1rem;
  padding: .65rem;
  border: 1px solid var(--border-brand, var(--border));
  border-radius: .7rem;
  background: rgba(10, 24, 39, .94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
}

@media (max-width: 820px) {
  .client-register-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-register-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(43, 73, 99, .72); }
  .client-register-strip > div:nth-child(4) { border-top: 1px solid rgba(43, 73, 99, .72); }
  .client-dossier-head { grid-template-columns: auto minmax(0, 1fr); }
  .client-quick-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .client-dossier-grid { grid-template-columns: 1fr; }
  .client-dossier-grid .card + .card { margin-top: 0; }
}

@media (max-width: 560px) {
  .client-register-strip strong { font-size: 1.2rem; }
  .client-register-strip > div { min-height: 3.8rem; padding: .6rem .75rem; }
  .client-dossier-head { grid-template-columns: 1fr; }
  .client-dossier-avatar { width: 3.3rem; height: 3.7rem; }
  .client-facts, .form-grid.two { grid-template-columns: 1fr; }
  .form-span-2 { grid-column: auto; }
  .client-facts > div:nth-last-child(2) { border-bottom-color: rgba(43, 73, 99, .55); }
  .client-form-actions { bottom: .35rem; }
}

/* CRM operativo: registro, timeline e pannelli di relazione. */
.crm-page-head { align-items: flex-end; }
.crm-register-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 1rem;
  overflow: hidden;
  border: 1px solid var(--border-brand, var(--border));
  border-left: 4px solid var(--brand-cyan-bright, var(--brand));
  border-radius: .75rem;
  background: rgba(16, 31, 49, .9);
  box-shadow: var(--shadow-card);
}
.crm-register-strip > div {
  display: grid;
  min-height: 4.35rem;
  padding: .7rem 1rem;
  align-content: center;
  border-left: 1px solid rgba(43, 73, 99, .72);
}
.crm-register-strip > div:first-child { border-left: 0; }
.crm-register-strip span, .crm-utility-label {
  color: #82a1b2;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.crm-register-strip strong { color: #edf8fb; font-size: 1.38rem; font-variant-numeric: tabular-nums; }
.crm-register-strip .is-due strong { color: var(--danger); }
.crm-money { color: #a8ebd0 !important; }

.crm-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(17rem, .8fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
.crm-detail-main, .crm-detail-side { display: grid; gap: 1rem; }
.crm-detail-layout .card { margin: 0; }
.crm-compact-list { display: grid; gap: .25rem; }
.crm-compact-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .2rem .65rem;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(43, 73, 99, .55);
  font-size: .8rem;
}
.crm-compact-item:last-child { border-bottom: 0; }
.crm-compact-item > span { color: #7f9cad; font-size: .7rem; white-space: nowrap; }
.crm-zero { margin: 0; }

.crm-timeline { position: relative; margin: 0; padding: .1rem 0 .1rem 1.85rem; list-style: none; }
.crm-timeline::before {
  content: "";
  position: absolute;
  top: .4rem;
  bottom: .4rem;
  left: .55rem;
  width: 1px;
  background: linear-gradient(var(--brand-cyan-bright, var(--brand)), rgba(43, 73, 99, .2));
}
.crm-timeline-item { position: relative; padding: 0 0 1rem; }
.crm-timeline-marker {
  position: absolute;
  top: .32rem;
  left: -1.64rem;
  width: .7rem;
  height: .7rem;
  border: 2px solid #0c1d2c;
  border-radius: 50%;
  background: #52c9e8;
  box-shadow: 0 0 0 1px rgba(82, 201, 232, .55), 0 0 12px rgba(82, 201, 232, .22);
}
.crm-timeline-item.kind-email .crm-timeline-marker { background: #a38cf5; }
.crm-timeline-item.kind-meeting .crm-timeline-marker { background: #f1b95d; }
.crm-timeline-item.kind-system .crm-timeline-marker { background: #7893a4; }
.crm-timeline-meta { display: flex; flex-wrap: wrap; gap: .4rem; color: #7592a4; font-size: .68rem; }
.crm-timeline-content {
  margin-top: .28rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(43, 73, 99, .62);
  border-radius: .55rem;
  background: rgba(7, 19, 33, .28);
}
.crm-timeline-content strong { color: #e5f4f8; }
.crm-timeline-outcome { margin-left: .4rem; color: #9ed9e8; font-size: .72rem; }
.crm-timeline-body { margin-top: .35rem; color: #b6ccd6; font-size: .82rem; overflow-wrap: anywhere; }
.crm-timeline-links { margin-top: .4rem; font-size: .7rem; }
.crm-empty { padding: 1.5rem; text-align: center; }

.crm-tabs .tablist { margin-bottom: .8rem; }
.crm-task-card { margin-top: 0; }
.crm-task-table { min-width: 58rem; }
.task-row-overdue { box-shadow: inset 3px 0 0 var(--danger); }
.btn-sm { min-height: 0; padding: .28rem .55rem; font-size: .7rem; }
.table-note { display: block; color: #7895a6; font-size: .68rem; }

.opportunity-filters { align-items: end; }
.opportunity-table { min-width: 68rem; }
.opportunity-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-brand, var(--border));
  border-left: 4px solid #52c9e8;
  border-radius: .75rem;
  background: rgba(43, 73, 99, .72);
}
.opportunity-hero > div { display: grid; gap: .2rem; padding: 1rem; background: #102033; }
.opportunity-hero strong { color: #edf8fb; font-size: 1.05rem; }
.opportunity-hero.stage-vinta { border-left-color: #4fd29a; }
.opportunity-hero.stage-persa { border-left-color: var(--danger); }
.opportunity-stage-form { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: .65rem; align-items: end; }
.opportunity-stage-form label { margin: 0; font-size: .72rem; }
.opportunity-stage-form input, .opportunity-stage-form select, .opportunity-stage-form button { margin: .25rem 0 0; }
.opportunity-stage.stage-vinta, .stage-vinta { color: #8be6bd; border-color: rgba(79, 210, 154, .4); }
.opportunity-stage.stage-persa, .stage-persa { color: #ff9caa; border-color: rgba(255, 96, 118, .42); }
.opportunity-stage.stage-negoziazione, .stage-negoziazione { color: #e8c57a; }

.duplicate-register { display: grid; gap: 1rem; }
.duplicate-group-card { margin: 0; }
.duplicate-table { min-width: 60rem; }
.merge-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.merge-client-title { display: flex; gap: .7rem; align-items: center; margin-bottom: .7rem; }
.merge-options { display: grid; gap: .5rem; }
.merge-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  margin: 0;
  padding: .7rem;
  border: 1px solid rgba(43, 73, 99, .72);
  border-radius: .55rem;
  background: rgba(7, 19, 33, .28);
}
.merge-option small { display: block; color: #819daf; }
.merge-confirm { display: flex; gap: .45rem; align-items: center; margin-right: auto; font-size: .76rem; }
.merge-warning { margin-bottom: 1rem; }

.google-account-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border-brand, var(--border));
  border-radius: .75rem;
  background: linear-gradient(110deg, rgba(10, 39, 61, .95), rgba(16, 31, 49, .9));
}
.google-account-mark {
  display: inline-flex;
  width: 2.8rem;
  height: 2.8rem;
  align-items: center;
  justify-content: center;
  border-radius: .7rem;
  color: #fff;
  background: linear-gradient(135deg, #4285f4, #34a853 55%, #fbbc05);
  font-size: 1.2rem;
  font-weight: 850;
}
.google-account-hero h4, .google-connect-intro h4 { margin: .1rem 0; }
.google-account-hero p, .google-connect-intro p, .google-control-actions p { margin: 0; color: #829eaf; font-size: .78rem; }
.google-sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sync-status-card { margin: 0; }
.sync-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #4fd29a; box-shadow: 0 0 8px rgba(79, 210, 154, .45); }
.sync-dot.has-error { background: var(--danger); }
.sync-error { color: var(--danger); font-size: .75rem; }
.google-control-actions { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.google-connect-card { max-width: 48rem; margin-inline: auto; }
.google-connect-intro { display: flex; gap: 1rem; align-items: center; }
.permission-list { display: grid; gap: .45rem; margin: 1rem 0; padding: 0; list-style: none; }
.permission-list li { display: grid; padding: .55rem .7rem; border-left: 2px solid rgba(82, 201, 232, .5); background: rgba(7, 19, 33, .25); }
.permission-list span, .google-privacy-note { color: #7895a6; font-size: .72rem; }
.google-connect-action { text-align: right; }
.google-privacy-note { text-align: center; }

@media (max-width: 900px) {
  .crm-register-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-detail-layout, .merge-layout { grid-template-columns: 1fr; }
  .opportunity-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .google-sync-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .crm-register-strip { grid-template-columns: 1fr; }
  .crm-register-strip > div { border-top: 1px solid rgba(43, 73, 99, .72); border-left: 0; }
  .opportunity-hero, .opportunity-stage-form { grid-template-columns: 1fr; }
  .google-account-hero { grid-template-columns: auto 1fr; }
  .google-account-hero > .tag { grid-column: 1 / -1; justify-self: start; }
  .google-control-actions { grid-template-columns: 1fr; }
  .merge-actions { align-items: stretch; flex-direction: column; }
}

/* ---- Scheda cliente: cockpit operativo ----------------------------------
   La gerarchia parte dal prossimo passo, non dall'archivio dei campi. */
.client-detail-page { max-width: 118rem; margin-inline: auto; }
.client-hero {
  margin-bottom: .85rem;
  padding: .85rem 1.15rem 1.1rem;
  border: 1px solid var(--border-brand, var(--border));
  border-left: 4px solid var(--brand-cyan-bright, var(--brand));
  border-radius: .75rem;
  background: linear-gradient(115deg, rgba(10, 39, 61, .97), rgba(16, 31, 49, .92));
  box-shadow: var(--shadow-card);
}
.client-hero-top { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.client-hero-top .back-link { margin: 0; }
.client-hero-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.client-hero-actions form.inline { margin: 0; }
.client-hero-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: .85rem; }
.client-hero-identity { min-width: 0; }
.client-hero-identity h1 { margin: 0 0 .3rem; color: #f3f8fb; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -.03em; overflow-wrap: anywhere; }
.client-hero-context { margin: 0 0 .55rem; color: #a4bdca; font-size: .9rem; overflow-wrap: anywhere; }
.client-hero-context a { color: var(--brand-cyan-bright); }
.client-alert-stack { display: grid; gap: .45rem; margin-top: .9rem; }
.client-alert { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: baseline; padding: .62rem .75rem; border-left: 3px solid var(--danger); border-radius: .25rem .5rem .5rem .25rem; background: rgba(61, 32, 39, .78); color: #f5c8cf; font-size: .8rem; }
.client-alert strong { color: #ffd9de; }
.client-alert-review { border-left-color: var(--warn); background: rgba(61, 49, 25, .72); color: #e8d29e; }
.client-alert-review strong { color: #ffe3a4; }

.client-operating-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-brand, var(--border));
  border-left: 4px solid var(--brand-cyan-bright, var(--brand));
  border-radius: .7rem;
  background: rgba(16, 31, 49, .92);
  box-shadow: var(--shadow-card);
}
.client-operating-item { display: grid; gap: .16rem; min-width: 0; padding: .75rem 1rem; border-left: 1px solid rgba(43, 73, 99, .72); }
.client-operating-item:first-child { border-left: 0; }
.client-operating-item > span, .client-section-kicker { color: #82a1b2; font-size: .67rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.client-operating-item strong { color: #edf8fb; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.client-operating-item small { color: #82a1b2; font-size: .72rem; overflow-wrap: anywhere; }
.client-operating-item.is-due { border-left-color: var(--danger); background: rgba(61, 32, 39, .32); }
.client-operating-item.is-due strong { color: #ffb6c0; }
.client-operating-item.is-missing strong { color: #e9b85c; }
.client-operating-item .quiet-link { justify-self: start; font-size: .72rem; }

.client-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .8fr);
  grid-template-areas: "contact side" "notes side" "timeline side";
  gap: 1rem;
  align-items: start;
}
.client-contact-card { grid-area: contact; }
.client-notes-card { grid-area: notes; }
.client-detail-layout .crm-timeline-card { grid-area: timeline; }
.client-detail-side { grid-area: side; display: grid; gap: 1rem; position: sticky; top: 1rem; min-width: 0; }
.client-section { min-width: 0; margin: 0; }
.client-section .card-head { display: flex; gap: .8rem; align-items: center; justify-content: space-between; }
.client-section .card-head h2 { margin: 0; color: #f1f7fa; font-size: 1.05rem; letter-spacing: -.01em; }
.client-section .card-head .client-section-kicker { display: block; margin-bottom: .14rem; }

.client-contact-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-contact-facts > div, .client-secondary-facts > div { min-width: 0; }
.client-contact-facts dd, .client-secondary-facts dd { overflow-wrap: anywhere; }
.client-missing-field dd { color: #e9b85c; }
.client-missing-field dd a { color: #f4cb75; }
.client-secondary-details { margin-top: .9rem; }
.client-secondary-details[open] summary { margin-bottom: .6rem; }
.client-secondary-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-secondary-facts .client-address-field { grid-column: 1 / -1; }
.client-address { margin: 0; color: #b9d0dc; font-size: .88rem; font-style: normal; overflow-wrap: anywhere; }
.client-company-suggestion { display: grid; gap: .4rem; margin-top: 1rem; padding: .75rem .85rem; border: 1px solid rgba(233, 184, 92, .38); border-left: 3px solid var(--warn); border-radius: .35rem .55rem .55rem .35rem; background: rgba(61, 49, 25, .28); }
.client-company-suggestion strong { color: #f3d28c; font-size: .82rem; }
.client-company-suggestion p { margin: 0; color: #b9aa83; font-size: .76rem; }
.client-company-suggestion form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
.client-company-suggestion select, .client-company-suggestion button { margin: 0; }
.client-notes { min-height: 0; overflow-wrap: anywhere; }
.client-notes-card .client-notes { padding: .7rem .8rem; }
.client-empty-inline { display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: baseline; padding: .7rem .8rem; border-left: 3px solid rgba(22, 168, 216, .42); border-radius: .25rem .5rem .5rem .25rem; background: rgba(7, 19, 33, .3); color: #7894a6; font-size: .8rem; }
.client-empty-inline strong { color: #b9d0dc; }

.client-operations-card .card-body { padding-top: .65rem; }
.client-subsection + .client-subsection { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(43, 73, 99, .72); }
.client-subsection-head { display: flex; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: .2rem; }
.client-subsection-head h3 { margin: 0; color: #cfe1e9; font-size: .8rem; }
.client-subsection-head .quiet-link { font-size: .72rem; }
.client-compact-item { min-width: 0; }
.client-compact-item.is-overdue { margin-inline: -.35rem; padding-inline: .35rem; border-left: 2px solid var(--danger); background: rgba(61, 32, 39, .25); }
.client-item-meta { overflow-wrap: anywhere; }
.client-compact-item small { grid-column: 2; color: #819daf; font-size: .7rem; overflow-wrap: anywhere; }
.client-item-actions { display: flex; flex-wrap: wrap; gap: .35rem; grid-column: 2; }
.client-item-actions form.inline { margin: 0; }
.client-item-actions button.quiet-link { margin: 0; padding: 0; border: 0; background: transparent; color: var(--brand-cyan-bright); font-size: .72rem; }
.client-empty-copy { margin: .45rem 0 0; color: #819daf; font-size: .78rem; }
.client-past-details { margin: .7rem 0 0; }
.client-past-details summary { font-size: .75rem; }

@media (max-width: 900px) {
  .client-detail-layout { grid-template-columns: 1fr; grid-template-areas: "contact" "notes" "timeline" "side"; }
  .client-detail-side { position: static; }
}
@media (max-width: 620px) {
  .client-hero { padding: .75rem .85rem 1rem; }
  .client-hero-top { align-items: flex-start; flex-direction: column; }
  .client-hero-actions { justify-content: flex-start; }
  .client-hero-body { align-items: start; }
  .client-operating-strip { grid-template-columns: 1fr; }
  .client-operating-item, .client-operating-item:first-child { border-top: 1px solid rgba(43, 73, 99, .72); border-left: 0; }
  .client-operating-item:first-child { border-top: 0; }
  .client-contact-facts, .client-secondary-facts, .client-company-suggestion form { grid-template-columns: 1fr; }
  .client-secondary-facts .client-address-field { grid-column: auto; }
  .client-item-actions { grid-column: 1 / -1; }
}

/* Modali inline: overlay separato dal pannello per non ereditare il dialog
   full-screen di Pico e mantenere sempre percepibile il contesto della scheda. */
.client-modal[hidden] { display: none !important; }
.client-modal.is-open {
  display: grid;
  position: fixed;
  z-index: 1000;
  inset: 0;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 10, 18, .78);
  backdrop-filter: blur(4px);
}
.client-modal-panel {
  display: block;
  width: min(58rem, calc(100vw - 1.5rem));
  max-width: 100%;
  height: min(82vh, 58rem);
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  border: 1px solid var(--border-brand, var(--border));
  border-radius: .85rem;
  color: #d8e8ee;
  background: linear-gradient(135deg, rgba(10, 39, 61, .99), rgba(16, 31, 49, .99));
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .5);
}
.client-action-modal .client-modal-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(48rem, calc(100vw - 1.5rem));
  height: min(38rem, calc(100vh - 2rem));
  min-height: 0;
}
.client-modal-form { display: grid; height: 100%; max-height: min(90vh, 58rem); grid-template-rows: auto minmax(0, 1fr) auto; margin: 0; }
.client-modal-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: 1rem 1.15rem .8rem; border-bottom: 1px solid rgba(43, 73, 99, .78); }
.client-modal-head h2 { margin: .15rem 0 .25rem; color: #f1f7fa; font-size: 1.25rem; }
.client-modal-head p { margin: 0; color: #8ba7b6; font-size: .78rem; }
.client-modal-close { display: inline-grid; width: 2rem; min-width: 2rem; height: 2rem; margin: 0; padding: 0; place-items: center; border: 1px solid rgba(99, 201, 232, .35); border-radius: .45rem; color: #b9d0dc; background: rgba(7, 19, 33, .35); font-size: 1.35rem; line-height: 1; }
.client-modal-close:hover { border-color: var(--brand-cyan-bright); color: #fff; background: rgba(22, 168, 216, .18); }
.client-modal-body { min-height: 0; overflow-y: auto; padding: 1rem 1.15rem .35rem; }
.client-modal-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.client-modal-section + .client-modal-section { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid rgba(43, 73, 99, .66); }
.client-modal-section legend { float: none; width: 100%; margin: 0 0 .65rem; padding: 0; color: #d9edf3; font-size: .9rem; font-weight: 750; }
.client-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .72rem 1rem; }
.client-modal-grid > label, .client-modal-grid > .form-span-2 > label { min-width: 0; margin: 0; color: #91adbc; font-size: .76rem; font-weight: 650; }
.client-modal-grid input, .client-modal-grid select, .client-modal-grid textarea { width: 100%; margin: .28rem 0 0; }
.client-modal-grid textarea { min-height: 5.5rem; }
.client-modal-grid .form-check { min-height: 3.25rem; }
.client-modal-grid .form-check label { color: #c7dce5; }
.client-modal-footer { display: flex; justify-content: flex-end; gap: .55rem; padding: .75rem 1.15rem; border-top: 1px solid rgba(43, 73, 99, .78); background: rgba(7, 19, 33, .64); }
.client-modal-footer button { margin: 0; }
.client-modal-loading { margin: 0; padding: 2rem 0; color: #9bb4c0; text-align: center; }
.client-action-modal .client-modal-body { padding: .9rem 1.15rem 1.15rem; }
.client-action-modal .client-form { margin: 0; }
.client-action-modal .client-form-section { margin: 0 0 .8rem; }
.client-action-modal .client-form-actions { margin-top: .8rem; }
body.client-modal-open { overflow: hidden; }
@media (max-width: 620px) {
  .client-modal.is-open { padding: .5rem; }
  .client-modal-panel, .client-action-modal .client-modal-panel { width: calc(100vw - 1rem); height: calc(100vh - 1rem); max-height: calc(100vh - 1rem); }
  .client-modal-form { height: 100%; max-height: calc(100vh - 1rem); }
  .client-modal-head, .client-modal-body, .client-modal-footer { padding-inline: .85rem; }
  .client-modal-grid { grid-template-columns: 1fr; }
  .client-modal-grid .form-span-2 { grid-column: auto; }
  .client-modal-footer { position: sticky; bottom: 0; }
}

/* Pulsanti: gerarchia tattile e leggibile, coerente con il blu/ciano TheEnq. */
body:not(.admin-page) button:not(.tab):not(.logout-btn):not(.client-modal-close):not(.quiet-link),
body:not(.admin-page) [role="button"] {
  min-height: 2.3rem;
  padding: .5rem 1rem;
  border: 1px solid rgba(99, 209, 236, .42);
  border-radius: .68rem;
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .012em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 .35rem .9rem rgba(0, 80, 125, .18);
  transform: translateY(0);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
body:not(.admin-page) button:not(.tab):not(.logout-btn):not(.client-modal-close):not(.quiet-link):not(.secondary):not(.outline),
body:not(.admin-page) [role="button"]:not(.secondary):not(.outline):not(.action-secondary) {
  background: linear-gradient(145deg, #087fbd 0%, #13a4d4 100%);
  border-color: rgba(134, 230, 247, .68);
  color: #f4fdff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 .45rem 1.1rem rgba(0, 112, 172, .3);
}
body:not(.admin-page) button.secondary,
body:not(.admin-page) button.outline,
body:not(.admin-page) [role="button"].secondary,
body:not(.admin-page) [role="button"].outline,
body:not(.admin-page) .action-secondary {
  background: linear-gradient(145deg, rgba(24, 75, 103, .9), rgba(13, 46, 70, .94));
  border-color: rgba(79, 190, 225, .5);
  color: #9fe5f5;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 .35rem .85rem rgba(0, 55, 87, .2);
}
body:not(.admin-page) button:not(.tab):not(.logout-btn):not(.client-modal-close):not(.quiet-link):hover,
body:not(.admin-page) [role="button"]:hover {
  border-color: rgba(160, 239, 250, .85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 .55rem 1.15rem rgba(0, 132, 191, .32);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
body:not(.admin-page) button:not(.tab):not(.logout-btn):not(.client-modal-close):not(.quiet-link):active,
body:not(.admin-page) [role="button"]:active {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 .15rem .35rem rgba(0, 65, 100, .28);
  filter: brightness(.98);
  transform: translateY(1px);
}
body:not(.admin-page) button:not(.tab):not(.logout-btn):not(.client-modal-close):not(.quiet-link):focus-visible,
body:not(.admin-page) [role="button"]:focus-visible {
  outline: 2px solid #8ce8f6;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(22, 168, 216, .22), 0 .35rem .9rem rgba(0, 115, 170, .28);
}
body:not(.admin-page) button:not(.tab):not(.logout-btn):not(.client-modal-close):not(.quiet-link):disabled,
body:not(.admin-page) [role="button"][aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.45);
  opacity: .55;
  transform: none;
  box-shadow: none;
}
.client-form-actions, .client-modal-footer { gap: .7rem; }
.client-form-actions button, .client-form-actions a[role="button"], .client-modal-footer button { min-width: 6.75rem; }
body:not(.admin-page) button.btn-sm,
body:not(.admin-page) .btn-sm[role="button"] {
  min-height: 1.9rem;
  padding: .3rem .7rem;
  border-radius: .55rem;
  font-size: .76rem;
}

/* Stessa geometria per i due elementi che Pico tratta in modo diverso:
   <button> e <a role="button">. */
body:not(.admin-page) button:not(.tab):not(.logout-btn):not(.client-modal-close):not(.quiet-link),
body:not(.admin-page) a[role="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 2.35rem;
  min-height: 2.35rem;
  max-height: 2.35rem;
  margin: 0;
  padding: 0 1rem;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.client-hero-actions, .client-form-actions, .client-modal-footer { align-items: center; }
body:not(.admin-page) button.btn-sm,
body:not(.admin-page) a.btn-sm[role="button"] {
  height: 1.9rem;
  min-height: 1.9rem;
  max-height: 1.9rem;
  padding-inline: .7rem;
}

/* Gruppi di azioni: stessa superficie cliccabile, stessa altezza e stessa
   larghezza nel gruppo. I comandi di riga e i link "quiet" restano compatti
   perché hanno un peso operativo diverso. */
.client-hero-actions > form.inline,
.client-hero-actions > a[role="button"] {
  flex: 0 0 9rem;
  min-width: 9rem;
}
.client-hero-actions > form.inline > button {
  width: 100%;
}

.client-form-actions,
.client-modal-footer {
  flex-wrap: wrap;
}
.client-form-actions > button,
.client-form-actions > a[role="button"],
.client-modal-footer > button {
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
}

.page-actions > button,
.page-actions > a[role="button"],
.page-actions > details.dropdown > summary[role="button"] {
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
}
.page-actions > details.dropdown {
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-actions > details.dropdown > summary[role="button"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  list-style: none;
}
/* Pico usa width:100vw per il layer che chiude il menu. Con una scrollbar
   verticale, 100vw comprende anche la sua area e può generare overflow
   orizzontale. L'overlay resta a pieno viewport usando gli inset, senza
   aggiungere una nuova dimensione al documento. */
.page-actions > details.dropdown[open] > summary::before {
  width: auto;
  height: auto;
}

.filters > button,
.filters > a[role="button"] {
  width: 8.5rem;
  min-width: 8.5rem;
  max-width: 8.5rem;
}

.pager > a[role="button"] {
  width: 8.5rem;
  min-width: 8.5rem;
  max-width: 8.5rem;
}

.td-actions > a[role="button"] {
  width: 6.5rem;
  min-width: 6.5rem;
  max-width: 6.5rem;
  height: 1.9rem;
  min-height: 1.9rem;
  max-height: 1.9rem;
  padding-inline: .65rem;
  font-size: .76rem;
}

/* Le azioni direttamente nelle righe mantengono una scala compatta, ma
   condividono comunque la stessa geometria tra link e button. */
body:not(.admin-page) button.table-action,
.assignment-history-action .assignment-history-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 1.9rem;
  min-height: 1.9rem;
  max-height: 1.9rem;
  margin: 0;
  padding: 0 .65rem;
  line-height: 1;
  white-space: nowrap;
}
.assignment-history-action .assignment-history-edit {
  width: 5.5rem;
  min-width: 5.5rem;
  max-width: 5.5rem;
}

.assignment-form-actions > button {
  width: 8.5rem;
  min-width: 8.5rem;
  max-width: 8.5rem;
}

.google-control-actions > form > button,
.google-conflict-actions > form > button {
  width: 9.5rem;
  min-width: 9.5rem;
  max-width: 9.5rem;
}
.google-conflict-actions > form {
  flex: 0 0 9.5rem;
}

.client-company-suggestion form > button {
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
}

.opportunity-stage-form > button {
  width: 9rem;
  min-width: 9rem;
  max-width: 9rem;
}

.call-save-actions > button {
  width: 100%;
  min-width: 0;
  max-width: none;
}

@media (max-width: 620px) {
  .client-hero-actions > form.inline,
  .client-hero-actions > a[role="button"] {
    flex: 1 1 9rem;
    min-width: 0;
  }
  .client-form-actions > button,
  .client-form-actions > a[role="button"],
  .client-modal-footer > button {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .client-company-suggestion form > button {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .page-actions > button,
  .page-actions > a[role="button"],
  .page-actions > details.dropdown,
  .page-actions > details.dropdown > summary[role="button"],
  .filters > button,
  .filters > a[role="button"],
  .pager > a[role="button"] {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}