/* ============================================================
   CRAVERO PM — THEME
   Design system condiviso di tutte le pagine dashboard.
   Struttura + tipografia: linguaggio Airtable (editoriale, leggibile).
   Palette: linguaggio Figma (color block pastello + accento magenta).
   Sidebar: superficie chiara.

   Un solo file: ogni ritocco estetico si fa qui e si propaga
   a tutte le pagine. Le regole specifiche di pagina restano
   inline nella pagina, ma usano i token qui sotto.
   ============================================================ */

:root {
  /* — Ink / testo — */
  --c-primary:#181D26;
  --c-primary-active:#0D1218;
  --c-ink:#181D26;
  --c-body:#333840;
  --c-muted:#41454D;
  --c-border-strong:#9297A0;

  /* — Superfici — */
  --c-canvas:#FFFFFF;
  --c-surface-soft:#F8FAFC;
  --c-surface-strong:#E0E2E6;
  --c-hairline:#DDDDDD;
  --c-on-dark:#FFFFFF;

  /* — Color block pastello — */
  --c-block-lime:#E9EFB6;
  --c-block-lilac:#E7E1F4;
  --c-block-cream:#F3ECDC;
  --c-block-mint:#D7EBDC;
  --c-block-pink:#F3D9E5;
  --c-block-coral:#F6DBCA;
  --c-block-navy:#1C1A36;

  /* — Status — pastello + tinta scura per dot/testo — */
  --c-st-lead:#B8995F;          --c-st-lead-bg:#F3ECDC;
  --c-st-proposta:#8A6FC0;      --c-st-proposta-bg:#E7E1F4;
  --c-st-negoziazione:#C9669A;  --c-st-negoziazione-bg:#F3D9E5;
  --c-st-attivo:#7E8E22;        --c-st-attivo-bg:#E9EFB6;
  --c-st-pausa:#CF8559;         --c-st-pausa-bg:#F6DBCA;
  --c-st-completato:#5A6068;    --c-st-completato-bg:#ECEDEF;
  --c-st-archiviato:#9297A0;    --c-st-archiviato-bg:#F1F2F3;

  /* — Accento single-shot — */
  --c-accent-magenta:#E5237B;

  /* — Semantica — */
  --c-success:#1E7A3E;
  --c-link:#1B61C9;

  /* — Radius (niente pill) — */
  --r-xs:2px; --r-sm:6px; --r-md:10px; --r-lg:12px; --r-full:9999px;

  /* — Spacing, base 4px — */
  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px;
  --s-lg:24px; --s-xl:32px; --s-xxl:48px;

  /* — Tipografia — */
  --font:"Inter","Inter Display",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease:cubic-bezier(0.2,0,0,1);
  --d:160ms;
}

/* ============================ RESET ============================ */
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font);
  color:var(--c-body);
  background:var(--c-canvas);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
input,select,textarea { font:inherit; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { margin:0; font-weight:inherit; }

.icon {
  width:14px; height:14px; stroke:currentColor; stroke-width:1.8;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.eyebrow {
  font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:0.11em; color:var(--c-muted);
}

/* ============================ APP SHELL ============================ */
.app { display:grid; grid-template-columns:240px 1fr; height:100vh; overflow:hidden; }

/* ============================ SIDEBAR — chiara ============================ */
.sb {
  background:var(--c-surface-soft); color:var(--c-body);
  display:flex; flex-direction:column;
  border-right:1px solid var(--c-hairline);
  overflow-y:auto;
}
.sb__brand {
  display:flex; align-items:center; gap:11px;
  padding:21px 20px 19px; border-bottom:1px solid var(--c-hairline);
}
.sb__logo {
  width:31px; height:31px; background:var(--c-primary); color:var(--c-on-dark);
  font-weight:600; font-size:13px; letter-spacing:-0.02em;
  display:grid; place-items:center; border-radius:var(--r-sm); flex-shrink:0;
}
.sb__brand-name { font-size:14.5px; font-weight:500; line-height:1.25; display:block; color:var(--c-ink); }
.sb__brand-org {
  font-size:10.5px; font-weight:400; letter-spacing:0.03em;
  color:var(--c-muted); line-height:1.4;
}
.sb__section { padding:22px 12px 4px; }
.sb__section-label {
  font-size:10.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--c-muted); padding:0 10px 11px;
}
.sb__nav { display:flex; flex-direction:column; gap:2px; }
.sb__item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--r-md);
  color:var(--c-body); font-size:14px; font-weight:400;
  transition:background var(--d) var(--ease),color var(--d) var(--ease);
}
.sb__item:hover { background:rgba(24,29,38,0.05); color:var(--c-ink); }
.sb__item--active { background:#E7E8EA; color:var(--c-ink); font-weight:500; }
.sb__item-count {
  margin-left:auto; font-size:11px; font-weight:500;
  background:#E2E3E6; color:var(--c-muted);
  border-radius:var(--r-sm); padding:1px 7px; line-height:1.6;
}
.sb__icon { width:18px; height:18px; flex-shrink:0; stroke-width:1.6; }
.sb__ws {
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:var(--r-md);
  font-size:13.5px; color:var(--c-body); width:100%; text-align:left;
}
.sb__ws:hover { background:rgba(24,29,38,0.05); color:var(--c-ink); }
.sb__ws-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.sb__footer { margin-top:auto; padding:15px 14px; border-top:1px solid var(--c-hairline); }
.sb__user { display:flex; align-items:center; gap:11px; padding:6px 8px; }
.sb__avatar {
  width:32px; height:32px; background:var(--c-block-lime); color:#3F4416;
  font-weight:600; font-size:11.5px; display:grid; place-items:center;
  border-radius:var(--r-full); flex-shrink:0;
}
.sb__user-name { font-size:13.5px; font-weight:500; line-height:1.3; color:var(--c-ink); }
.sb__user-role { font-size:11px; color:var(--c-muted); }

/* ============================ MAIN ============================ */
.main { display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* Topbar */
.tb {
  display:flex; align-items:center; gap:16px;
  padding:0 28px; height:62px; border-bottom:1px solid var(--c-hairline);
  flex-shrink:0;
}
.tb__crumb { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--c-muted); }
.tb__crumb-current { color:var(--c-ink); font-weight:500; }
.tb__sep { color:var(--c-border-strong); }
.tb__search { margin-left:auto; position:relative; width:280px; }
.tb__search input {
  width:100%; height:40px; padding:0 12px 0 36px;
  border:1px solid var(--c-hairline); border-radius:var(--r-sm);
  background:var(--c-canvas); font-size:13.5px; color:var(--c-ink); outline:none;
}
.tb__search input::placeholder { color:var(--c-muted); }
.tb__search input:focus { border-color:var(--c-block-navy); }
.tb__search-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--c-muted); pointer-events:none;
}

/* Page header */
.ph { padding:30px 28px 22px; border-bottom:1px solid var(--c-hairline); flex-shrink:0; }
.ph__top { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; }
.ph__title {
  font-size:30px; font-weight:400; letter-spacing:-0.005em;
  color:var(--c-ink); line-height:1.15; margin:8px 0 7px;
}
.ph__subtitle { font-size:14px; color:var(--c-muted); }
.ph__actions { margin-left:auto; display:flex; gap:10px; }
.ph__bar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* ============================ BUTTONS — rounded-lg, niente pill ============================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-lg);
  font-size:14px; font-weight:500;
  transition:all var(--d) var(--ease); white-space:nowrap;
}
.btn .icon { width:15px; height:15px; stroke-width:1.9; }
.btn--primary { background:var(--c-primary); color:var(--c-on-dark); }
.btn--primary:hover { background:var(--c-primary-active); }
.btn--secondary {
  background:var(--c-canvas); color:var(--c-ink);
  border:1px solid var(--c-hairline);
}
.btn--secondary:hover { background:var(--c-surface-soft); }
.btn:disabled { opacity:0.5; cursor:default; }

/* ============================ VIEW TOGGLE — segmented ============================ */
.vt {
  display:flex; align-items:center; gap:3px;
  border:1px solid var(--c-hairline); border-radius:var(--r-md); padding:3px;
}
.vt__tab {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:var(--r-sm);
  font-size:13px; font-weight:400; color:var(--c-muted);
  transition:all var(--d) var(--ease); white-space:nowrap;
}
.vt__tab:hover { color:var(--c-ink); }
.vt__tab--active { background:var(--c-primary); color:var(--c-on-dark); font-weight:500; }
.vt__tab .icon { width:14px; height:14px; stroke-width:1.7; }

/* ============================ FILTER CHIPS ============================ */
.flt { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.flt__chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border:1px solid var(--c-hairline);
  border-radius:var(--r-sm); font-size:13px; color:var(--c-muted);
  background:var(--c-canvas);
}
.flt__chip:hover { border-color:var(--c-border-strong); color:var(--c-ink); }
.flt__chip--active { border-color:var(--c-ink); color:var(--c-ink); }
.flt__chip .icon { width:13px; height:13px; stroke-width:1.8; }

/* ============================ BODY PANE ============================ */
.body-pane { background:var(--c-canvas); flex:1; overflow:auto; }

/* ============================ KPI STRIP ============================ */
.kpis {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  padding:24px 28px 6px;
}
.kpi {
  background:var(--c-canvas); border:1px solid var(--c-hairline);
  border-radius:var(--r-md); padding:20px 22px;
}
.kpi__label {
  display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:0.10em; color:var(--c-muted); margin-bottom:14px;
}
.kpi__value {
  font-size:33px; font-weight:400; letter-spacing:-0.01em;
  color:var(--c-ink); font-variant-numeric:tabular-nums; line-height:1;
}
.kpi__unit { font-size:13px; font-weight:400; color:var(--c-muted); margin-left:6px; }
.kpi__sub { font-size:13px; color:var(--c-muted); margin-top:11px; }
/* accento magenta single-shot per il KPI di allerta */
.kpi--alert .kpi__value { color:var(--c-accent-magenta); }
.kpi--alert .kpi__dot { width:7px; height:7px; border-radius:50%; background:var(--c-accent-magenta); }

/* ============================ STATUS / TYPE TAG ============================ */
.tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:500;
  padding:3px 10px; border-radius:var(--r-full);
  background:var(--tag-bg,#ECEDEF); color:var(--tag-ink,var(--c-muted));
}
.tag__dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ============================ STATI GENERICI ============================ */
.loading, .empty {
  padding:48px 24px; text-align:center;
  color:var(--c-muted); font-size:14px;
}
.err {
  margin:16px 28px; padding:14px 18px;
  background:#FBE6E2; color:#9A2A14;
  border:1px solid #F0C4BB; border-radius:var(--r-md); font-size:13.5px;
}