/* Gestionale · componenti.
   I valori stanno in tokens.css (caricato prima). Qui solo componenti, stati e layout.
   Elenco delle classi per lo sviluppatore: css/COMPONENTI.md */

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--background);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  margin: 0;
  color: var(--foreground);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-base, 14px);
  line-height: var(--lh, 1.5);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { background: var(--background); caret-color: var(--primary); }
::selection { background: color-mix(in oklab, var(--primary) 22%, transparent); }
h1, h2, h3 { text-wrap: balance; }
p { line-height: 1.5; text-wrap: pretty; }
b, strong { font-weight: 600; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-tap-highlight-color: transparent; }
pre { font-family: var(--font-mono); font-size: 12px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
* { scrollbar-color: var(--input) transparent; }

/* utilità */
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted-foreground); }
.faint { color: var(--faint-foreground); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.neg { color: var(--red); }
.pos { color: var(--green); }
.hidden { display: none !important; }
.icon { flex: none; vertical-align: -3px; }

/* ================================================================ campi (base comune a tutte le pagine) */
input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden])),
select, textarea {
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background-color: var(--input-bg);
  box-shadow: var(--shadow-xs);
  color: var(--foreground);
  font-size: 13.5px;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
textarea { padding: 7px 10px; line-height: 1.45; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: var(--bg-chevron);
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  cursor: pointer;
}
input[type=search] {
  padding-left: 32px;
  background-image: var(--bg-search);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px;
}
input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
input:where(:not([type=checkbox], [type=radio], [type=file])):hover, select:hover, textarea:hover {
  border-color: color-mix(in oklab, var(--input) 75%, var(--foreground) 25%);
}
input:where(:not([type=checkbox], [type=radio], [type=file])):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring-soft);
}
input:disabled, select:disabled, textarea:disabled { background-color: var(--muted); color: var(--muted-foreground); box-shadow: none; cursor: not-allowed; opacity: 0.8; }
::placeholder { color: var(--placeholder); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); width: 15px; height: 15px; margin: 0; cursor: pointer; flex: none; }
input[type=date] { font-variant-numeric: tabular-nums; }
input[type=file] { font-size: 13px; color: var(--muted-foreground); max-width: 100%; }
input[type=file]::file-selector-button {
  margin-right: 10px; min-height: 32px; padding: 0 12px; border: 1px solid var(--input); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground); font: inherit; font-weight: 500; cursor: pointer;
}

/* ================================================================ guscio: barra, menu, area di lavoro */
.shell {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  grid-template-rows: var(--top) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
.topbar {
  grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--top);
  padding: 0 14px 0 12px;
  background: var(--topbar-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 6px; width: calc(var(--side) - 24px); min-width: 0; flex: none; }
.brand-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--brand); color: var(--brand-foreground);
  font-size: 12.5px; font-weight: 700; line-height: 24px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), var(--shadow-xs);
}
select.company-sel {
  min-height: 30px; max-width: 176px;
  padding: 0 24px 0 6px;
  border: 0; border-radius: var(--radius-sm);
  background-color: transparent; background-position: right 4px center;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  box-shadow: none;
}
select.company-sel:hover { background-color: color-mix(in oklab, var(--foreground) 6%, transparent); }
.search { position: relative; flex: 1; max-width: 520px; }
.search input { width: 100%; height: 32px; }
.search-results {
  position: absolute; top: 38px; left: 0; right: 0; z-index: 40;
  max-height: 60vh; overflow: auto; padding: 4px;
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: pop var(--dur-2) var(--ease);
}
.search-results a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--foreground); font-size: 13.5px; }
.search-results a:hover, .search-results a:focus-visible { background: var(--accent); color: var(--accent-foreground); text-decoration: none; outline: none; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.viewas { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted-foreground); }
.viewas select { min-height: 28px; font-size: 13px; border-color: var(--border); }
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--foreground-2); cursor: pointer;
}
.icon-btn:hover { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
.menu-toggle { display: none; font-size: 0; }
.menu-toggle::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--i-menu) center / contain no-repeat; mask: var(--i-menu) center / contain no-repeat;
}

/* menu laterale: icone, gruppi, voce attiva */
.sidebar {
  position: sticky; top: var(--top);
  height: calc(100vh - var(--top)); height: calc(100dvh - var(--top));
  overflow: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 10px 20px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}
.sidebar a {
  display: flex; align-items: center; gap: 10px;
  min-height: 32px; padding: 0 10px;
  border-radius: 7px;
  color: var(--foreground-2);
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sidebar a > span { min-width: 0; }
.sidebar .nav-ext { width: 13px; height: 13px; margin-left: auto; color: var(--faint-foreground); }
.sidebar a:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); color: var(--foreground); text-decoration: none; }
.sidebar a.on { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
.sidebar svg { width: 17px; height: 17px; flex: none; color: var(--muted-foreground); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sidebar a.on svg { color: var(--accent-foreground); }
.sidebar .grp, .sidebar .nav-group {
  padding: 18px 10px 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted-foreground);
}
.sidebar .grp:first-child, .sidebar .nav-group:first-child { padding-top: 4px; }
.sidebar a.nav-sub { min-height: 30px; padding-left: 37px; font-size: 13px; }
.sidebar .nav-sep { height: 1px; margin: 8px 10px; background: var(--border); }
.sidebar .nav-bottom { display: flex; flex-direction: column; gap: 1px; margin-top: auto; padding-top: 8px; }
.sidebar .badge {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 9px; background: var(--red-bg); color: var(--red);
  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
}
/* menu del progetto (01/11/2026): dentro un progetto il menu a sinistra diventa il suo, con "← Overall" per tornare al generale */
.sidebar > .navset { display: contents; }
.sidebar > .navset.off { display: none; }
.sidebar .nav-back { color: var(--muted-foreground); }
.sidebar .nav-proj { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; padding: 8px 10px 12px; border-bottom: 1px solid var(--border); }
.sidebar .np-code { color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; }
.sidebar .np-title { color: var(--foreground); font-size: 14px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
@media (min-width: 821px) {
  body.in-project .ptabs { display: none; }                         /* su schermo largo le schede sono nel menu a sinistra */
  body.in-project .main:has(.ptabs) { --stick: var(--top); }
}
.page-head.sub-head h2 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 650; }   /* pagina dentro una scheda del progetto */
.scrim { display: none; }

.main {
  --main-px: 32px;
  min-width: 0;
  padding: 24px var(--main-px) 64px;
  background: var(--background);
  overflow-x: clip;
}
.main:has(.ptabs) { --stick: calc(var(--top) + var(--tabs-h)); }
.loading { padding: 48px 0; color: var(--muted-foreground); }
.loading::before {
  content: ""; display: block; width: 180px; height: 10px; margin-bottom: 12px; border-radius: 5px;
  background: linear-gradient(90deg, var(--secondary), var(--muted), var(--secondary));
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}

/* ================================================================ testata di pagina */
.crumbs { margin-bottom: 6px; font-size: var(--fs-sm); color: var(--muted-foreground); }
.crumbs a { color: var(--muted-foreground); }
.crumbs a:hover { color: var(--foreground); }
.page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 20px; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 650; letter-spacing: -0.017em; }
.page-head .sub { margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--muted-foreground); }
.page-head .sub b { color: var(--foreground-2); }
.page-head .sub a { font-weight: 500; }
.page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
h2 { letter-spacing: -0.008em; }

/* ================================================================ bottoni */
.btn {
  --h: 32px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--h); padding: 0 12px;
  border: 1px solid var(--input); border-radius: var(--radius);
  background-color: var(--input-bg); color: var(--foreground);
  font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  box-shadow: var(--shadow-xs);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn:hover { background-color: var(--accent); border-color: color-mix(in oklab, var(--input) 70%, var(--primary) 30%); text-decoration: none; }
.btn:active { background-color: var(--secondary); box-shadow: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.pri { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn.pri:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn.pri:active { background-color: var(--primary-hover); box-shadow: none; }
.btn.ghost { background-color: transparent; border-color: transparent; box-shadow: none; color: var(--foreground-2); }
.btn.ghost:hover { background-color: color-mix(in oklab, var(--foreground) 6%, transparent); color: var(--foreground); }
.btn.sm { --h: 28px; padding: 0 10px; border-radius: var(--radius-md); font-size: var(--fs-sm); }
/* bottoni che portano altrove: freccia (come Brain); in una nuova finestra, freccia obliqua */
a.btn.pri:not([href*="new="], [href*="nuova"])::after {
  content: ""; width: 14px; height: 14px; flex: none; margin-right: -2px; background: currentColor;
  -webkit-mask: var(--i-arrow-right) center / contain no-repeat; mask: var(--i-arrow-right) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease);
}
a.btn.pri[target="_blank"]::after { -webkit-mask-image: var(--i-arrow-up-right); mask-image: var(--i-arrow-up-right); }
a.btn.pri:hover::after { transform: translateX(2px); }
a.btn.pri[target="_blank"]:hover::after { transform: translate(1px, -1px); }
.btn.danger { color: var(--red); }
.btn.danger:hover { background-color: var(--red-bg); border-color: color-mix(in oklab, var(--red) 30%, var(--input)); color: var(--red); }
.mf .btn.danger, .btn.pri.danger { background-color: var(--destructive); border-color: var(--destructive); color: var(--destructive-foreground); }
.mf .btn.danger:hover, .btn.pri.danger:hover { background-color: color-mix(in oklab, var(--destructive) 88%, black); }
.btn:disabled, .btn[aria-disabled=true] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { background-color: var(--card); border-color: var(--input); }
.btn.pri:disabled:hover { background-color: var(--primary); border-color: var(--primary); }
select.btn {
  padding-right: 28px;
  background-image: var(--bg-chevron); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
  font-weight: 500;
}
select.btn:focus { box-shadow: 0 0 0 3px var(--ring-soft); }

/* bottoni con un solo simbolo (▾ ▲ ▼ ⋯ ✕ ×): il glifo diventa un'icona disegnata */
.btn:is([data-collapse], [data-secmove], [data-menu], [data-close], [data-secdel], [data-del][title]), .btn.icon {
  --h: 28px;
  width: 28px; min-width: 28px; padding: 0; font-size: 0; color: var(--muted-foreground);
}
.btn:is([data-collapse], [data-secmove], [data-menu], [data-close], [data-secdel], [data-del][title])::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease);
}
[data-collapse] { --glyph: var(--i-chevron-down); }
.sec.collapsed [data-collapse]::before { transform: rotate(-90deg); }
[data-secmove="-1"] { --glyph: var(--i-chevron-up); }
[data-secmove="1"] { --glyph: var(--i-chevron-down); }
[data-menu] { --glyph: var(--i-more); }
[data-close] { --glyph: var(--i-x); }
[data-secdel], button[data-del][title] { --glyph: var(--i-x); }
.btn:is([data-collapse], [data-secmove], [data-menu], [data-close]):hover { color: var(--foreground); }
.btn:is([data-secdel], [data-del][title]):hover { color: var(--red); background-color: var(--red-bg); }
.btn.icon svg { width: 16px; height: 16px; }

/* ================================================================ card, griglie, kpi */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.card-h { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.card-h h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.card-h .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card-h a.right { font-size: var(--fs-sm); font-weight: 500; }
.card-b { padding: 14px 16px; }
.card-b + .card-b { padding-top: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding: 14px 16px 16px; }
.kpi .l { font-size: var(--fs-sm); font-weight: 500; color: var(--muted-foreground); }
.kpi .v { margin-top: 6px; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.018em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .s { margin-top: 3px; font-size: 12px; color: var(--muted-foreground); }

/* ================================================================ filtri, schede, controlli segmentati */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.filters input[type=search] { min-width: 240px; }
.tabs {
  display: flex; gap: 2px;
  margin-bottom: 20px;
  overflow-x: auto; scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--border);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  position: relative; flex: none;
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 10px;
  color: var(--muted-foreground); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}
.tabs a:hover { color: var(--foreground); text-decoration: none; }
.tabs a.on { color: var(--foreground); }
.tabs a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); }
.ptabs {
  position: sticky; top: var(--top); z-index: 15;
  height: var(--tabs-h);
  margin: 0 calc(-1 * var(--main-px)) 20px;
  padding: 0 calc(var(--main-px) - 10px);
  background: color-mix(in oklab, var(--background) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(10px); backdrop-filter: saturate(1.6) blur(10px);
}
.tabs-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--secondary); }
.tabs-seg button, .tabs-seg a, .tabs-seg .btn {
  --h: 28px;
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--muted-foreground); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tabs-seg button:hover, .tabs-seg a:hover { color: var(--foreground); text-decoration: none; background: transparent; }
.tabs-seg .on { background: var(--card) !important; color: var(--foreground) !important; box-shadow: var(--shadow-sm) !important; }

/* ================================================================ tabelle */
.table-wrap { position: relative; overflow-x: auto; }   /* relative: gli elementi assoluti delle celle restano dentro lo scorrimento, la pagina non si allarga */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.list th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground); font-size: 12px; font-weight: 550; text-align: left; white-space: nowrap;
}
table.list td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.list :is(th, td):first-child { padding-left: 16px; }
table.list :is(th, td):last-child { padding-right: 16px; }
table.list thead tr:first-child th:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); }
table.list thead tr:first-child th:last-child { border-top-right-radius: calc(var(--radius-lg) - 1px); }
table.list > tbody:last-child > tr:last-child > td { border-bottom: 0; }
table.list > tbody:last-child > tr:last-child > td:first-child { border-bottom-left-radius: calc(var(--radius-lg) - 1px); }
table.list > tbody:last-child > tr:last-child > td:last-child { border-bottom-right-radius: calc(var(--radius-lg) - 1px); }
table.list tbody tr { transition: background-color var(--dur-1) var(--ease); }
table.list tr.click { cursor: pointer; }
table.list tr.click:hover > td { background: var(--row-hover); }
table.list tfoot td { padding-top: 11px; padding-bottom: 11px; border-top: 1px solid var(--input); border-bottom: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
table.list .t-title { font-weight: 550; }
table.list .t-sub { margin-top: 1px; font-size: 12px; color: var(--muted-foreground); }
table.list td.t-wide { min-width: 220px; }
table.list td.t-title { min-width: 180px; }
table.list td.num .t-sub { white-space: normal; }
table.list td .pill { height: auto; min-height: 20px; padding-block: 3px; line-height: 1.3; white-space: normal; }
table.list td a { font-weight: 500; }
td.empty, .empty { padding: 32px 16px; text-align: center; color: var(--muted-foreground); font-size: 13.5px; }
.card > .empty { padding: 40px 24px; }

/* ================================================================ etichette di stato */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px;
  border-radius: 5px;
  font-size: 12px; font-weight: 550; line-height: 1.3; white-space: nowrap;
  vertical-align: 1px;
}
.tone-grey { background: var(--grey-bg); color: var(--grey); }
.tone-blue { background: var(--blue-bg); color: var(--blue); }
.tone-green { background: var(--green-bg); color: var(--green); }
.tone-amber { background: var(--amber-bg); color: var(--amber); }
.tone-red { background: var(--red-bg); color: var(--red); }
.tone-purple { background: var(--purple-bg); color: var(--purple); }
.tone-teal { background: var(--teal-bg); color: var(--teal); }
.tone-dark { background: var(--dark-bg); color: var(--dark); }
.tone-strike { background: var(--grey-bg); color: var(--muted-foreground); text-decoration: line-through; }
.demo {
  display: inline-block; margin-left: 8px; padding: 1px 5px;
  border-radius: var(--radius-xs); background: var(--amber-bg); color: var(--amber);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4;
  vertical-align: 2px;
}
.page-head h1 .demo { vertical-align: 4px; }
.count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--grey-bg); color: var(--grey);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.red { background: var(--destructive); }
.dot.amber { background: var(--warn-dot); }
.dot.blue { background: var(--primary); }

/* ================================================================ dettaglio con colonna laterale */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.aside-sticky { position: sticky; top: calc(var(--stick) + 16px); display: grid; gap: 16px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 13.5px; }
.kv .l { color: var(--muted-foreground); }
.kv .t { padding-top: 10px; border-top: 1px solid var(--input); font-size: var(--fs-md); font-weight: 650; }
.kv .num { font-variant-numeric: tabular-nums; }

/* moduli */
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--muted-foreground); }
.field input, .field select, .field textarea { width: 100%; max-width: 100%; }
.field textarea { min-height: 64px; resize: vertical; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--foreground-2); cursor: pointer; user-select: none; }
.switch input {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none;
  width: 30px; height: 18px; margin: 0;
  border-radius: 999px; background: var(--input);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease);
}
.switch input::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px oklch(0% 0 0 / 0.25);
  transition: transform var(--dur-2) var(--ease);
}
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(12px); }
.switch:hover input:not(:checked) { background: color-mix(in oklab, var(--input) 80%, var(--foreground) 20%); }
.checks { display: grid; gap: 8px; }
.checks label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--input); border-radius: 999px;
  background: var(--card); color: var(--foreground);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover { background: var(--muted); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* avvisi in linea */
.lock-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-bottom: 16px; padding: 10px 14px;
  border: 1px solid color-mix(in oklab, currentColor 22%, transparent) !important;
  border-radius: var(--radius-md);
  background: var(--blue-bg); color: var(--blue);
  font-size: 13.5px; line-height: 1.45;
}
.lock-banner > span { flex: 1 1 320px; }
.lock-banner .btn { margin-left: auto; }
.lock-banner .btn + .btn { margin-left: 0; }
.lock-banner.ghost-banner {
  background: color-mix(in oklab, var(--primary) 5%, var(--card));
  color: var(--foreground-2);
  border-style: dashed !important; border-color: var(--primary-line) !important;
}
.ghost-banner b { color: var(--primary-text); }
.warn-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.warn-list li { margin: 4px 0; }
.warn-list li::marker { color: var(--warn-dot); }

/* ================================================================ liste della situazione */
.todo { display: grid; }
.todo a, .alert, .up {
  display: grid; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  color: var(--foreground); line-height: 1.4;
}
.todo a { grid-template-columns: 8px 1fr auto; }
.todo a:last-child, .alert:last-child, .up:last-child { border-bottom: 0; }
.todo a:hover, .up:hover { background: var(--row-hover); text-decoration: none; }
.todo .tx b { font-weight: 550; }
.todo .tx div { margin-top: 1px; font-size: 12.5px; color: var(--muted-foreground); }
.alerts { display: grid; }
.alert { grid-template-columns: 8px 1fr auto; }
.alert .t b { font-weight: 550; }
.alert .t div { margin-top: 1px; font-size: 12.5px; color: var(--muted-foreground); }
.alert.suggestion .t b::before { content: "Suggerimento · "; color: var(--primary-text); font-weight: 600; }
.up { grid-template-columns: 56px 1fr auto; }
.up .cd { padding: 6px 0; border-radius: var(--radius-md); background: var(--accent); color: var(--primary-text); text-align: center; line-height: 1.3; }
.up .cd b { display: block; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.up .cd span { font-size: 12px; font-weight: 500; }
.timeline-mini { display: grid; }
.tl-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.4; }
.tl-row:last-child { border-bottom: 0; }
.tl-row:hover { text-decoration: none; }
.tl-row:hover > span:nth-child(2) { color: var(--primary-text); }
.progress { height: 6px; min-width: 80px; overflow: hidden; border-radius: 999px; background: var(--secondary); }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.progress.over i { background: var(--destructive); }
.progress.warn i { background: var(--warn-dot); }

/* ================================================================ calendario */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(var(--border) 0 0), var(--card); }
.cal .dow { padding: 8px 10px; background: var(--card); color: var(--muted-foreground); font-size: 12px; font-weight: 550; }
.cal .day { display: flex; flex-direction: column; gap: 2px; min-height: 112px; padding: 6px; background: var(--card); }
.cal .day.out { background: var(--row-hover); }
.cal .day.out .d { color: var(--muted-foreground); }
.cal a.d { color: inherit; text-decoration: none; border-radius: 50%; }
.cal a.d:hover { background: var(--secondary); }
.cal .d { display: grid; place-items: center; width: 22px; height: 22px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal .day.today .d { border-radius: 50%; background: var(--primary); color: var(--primary-foreground); }
.ev {
  display: block; padding: 1px 6px; border-radius: var(--radius-xs);
  overflow: hidden; color: var(--foreground);
  font-size: 12px; font-weight: 500; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis;
}
.ev:hover { text-decoration: none; filter: brightness(0.97); }
.ev.PROJECT { background: var(--accent); color: var(--primary-text); font-weight: 600; }
.ev.FLIGHT { background: var(--teal-bg); color: var(--teal); }
.ev.HOTEL { background: var(--purple-bg); color: var(--purple); }
.ev.HOTEL.stay { background: transparent; box-shadow: inset 0 0 0 1px var(--purple-bg); }
.ev.PAYMENT { background: var(--red-bg); color: var(--red); }
.ev.RECEIVABLE { background: var(--green-bg); color: var(--green); }
.ev.MILESTONE { background: var(--grey-bg); color: var(--grey); }
.ev.WORK { background: var(--teal-bg); color: var(--teal); }
.ev.tobook { outline: 1px dashed var(--red); outline-offset: -1px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--muted-foreground); }
.legend .ev { display: inline-block; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week .col { display: flex; flex-direction: column; gap: 4px; min-height: 300px; padding: 10px 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.week .col h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.week .col.today { border-color: var(--primary-line); box-shadow: 0 0 0 1px var(--primary-line); }
.gantt { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.gantt .gh { display: grid; border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-size: 12px; }
.gantt .gr { display: grid; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); }
.gantt .gr:last-child { border-bottom: 0; }
.gantt .gl { position: sticky; left: 0; z-index: 1; padding: 6px 12px; border-right: 1px solid var(--border); background: var(--card); font-size: 13px; }
.gantt .bar { display: flex; align-items: center; height: 22px; padding: 0 8px; overflow: hidden; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ================================================================ editor del preventivo */
.qe { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 16px; align-items: start; }
.sec { margin-bottom: 12px; }
.sec.is-hidden { opacity: 0.62; }
.sec.collapsed .sec-body { display: none; }
.sec-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  min-height: 48px; padding: 8px 12px 8px 8px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--card);
}
.sec.collapsed .sec-h { border-bottom-color: transparent; border-radius: var(--radius-lg); }
.sec-h .letter {
  display: inline-grid; place-items: center; flex: none;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--radius-sm); background: var(--accent); color: var(--primary-text);
  font-size: 12.5px; font-weight: 700;
}
.sec-h input.sec-name {
  flex: none; field-sizing: content; width: auto; min-width: 96px; max-width: 320px; min-height: 30px; padding: 0 6px;
  border-color: transparent; background-color: transparent; box-shadow: none;
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em;
}
.sec-h input.sec-name:hover { border-color: var(--border); }
.sec-h input.sec-name:focus { border-color: var(--primary); background-color: var(--card); box-shadow: 0 0 0 3px var(--ring-soft); }
.sec-h input.sec-name:disabled { background-color: transparent; color: var(--foreground); }
.sec-h .tot { flex: 1 1 auto; min-width: 0; margin-left: auto; padding: 0 4px; font-size: var(--fs-sm); line-height: 1.8; text-align: right; }
.sec-h > .btn.sm:not([data-collapse], [data-secmove], [data-secdel]) { background-color: transparent; border-color: transparent; box-shadow: none; color: var(--muted-foreground); }
.sec-h > .btn.sm:not([data-collapse], [data-secmove], [data-secdel]):hover { background-color: color-mix(in oklab, var(--foreground) 6%, transparent); color: var(--foreground); }
.sec-h .tot .pair { display: inline-block; margin-left: 14px; white-space: nowrap; }
.sec-h .tot .pair:first-child { margin-left: 0; }
.sec-h .tot .muted { margin-right: 3px; }
.sec-h .tot b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sec-h .tot b[data-k$=":cost"] { padding: 2px 6px; border-radius: var(--radius-xs); background: var(--cost-bg); box-shadow: inset 0 0 0 1px var(--cost-line); }
.sec-h .tot b[data-k$=":margin"] { padding: 2px 6px; border-radius: var(--radius-xs); background: var(--margin-bg); box-shadow: inset 0 0 0 1px var(--margin-line); }

table.lines { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.lines th {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap;
}
table.lines td { padding: 3px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.lines :is(th, td):first-child { padding-left: 8px; }
table.lines tbody tr:hover > td:not(.c, .m) { background-color: var(--row-hover); }
table.lines tr.blk > td {
  padding: 12px 12px 4px;
  border-bottom: 0;
  background: var(--card) !important;
  color: var(--foreground-2); font-size: 12px; font-weight: 600;
}
table.lines tbody tr:first-child.blk > td { padding-top: 8px; }
table.lines td[colspan] > .btn.ghost.sm { color: var(--primary-text); font-weight: 500; }
table.lines td[colspan] > .btn.ghost.sm:hover { background: var(--accent); }

/* campi nelle righe: invisibili finché non servono */
table.lines input, table.lines select, table.lines textarea {
  width: 100%; min-width: 0; min-height: 28px; padding: 4px 6px;
  border: 1px solid transparent; border-radius: 5px;
  background-color: transparent; box-shadow: none;
  font-size: 13.5px;
}
table.lines select { padding-right: 20px; background-image: none; background-position: right 4px center; }
table.lines input:hover, table.lines select:hover, table.lines textarea:hover { border-color: var(--input); background-color: var(--card); }
table.lines select:hover, table.lines select:focus { background-image: var(--bg-chevron); }
table.lines input:focus, table.lines select:focus, table.lines textarea:focus { border-color: var(--primary); background-color: var(--card); box-shadow: 0 0 0 3px var(--ring-soft); outline: none; }
table.lines input:disabled, table.lines select:disabled, table.lines textarea:disabled { background-color: transparent; border-color: transparent; color: inherit; cursor: default; }
table.lines input.n { text-align: right; font-variant-numeric: tabular-nums; }
table.lines input.bad { border-color: var(--red); background-color: var(--red-bg); }
table.lines textarea { display: block; min-height: 30px; overflow: hidden; resize: none; line-height: 1.4; }
table.lines td.item, table.lines th.item { min-width: 190px; }
table.lines th:is(.w-tot, .c, .m) { width: 1%; }
table.lines .item-note { font-size: 12px; color: var(--muted-foreground); }
table.lines input.item-note { min-height: 24px; padding: 2px 6px; line-height: 1.4; }
table.lines .sub { padding: 0 6px 2px; color: var(--muted-foreground); font-size: 12px; line-height: 1.4; text-align: right; }
table.lines .sub.neg { color: var(--red); }
table.lines td.num.small { padding-right: 10px; }

/* le tre aree: vendita (neutra) · costo · margine */
table.lines th.c { background: color-mix(in oklab, var(--cost-bg), var(--cost) 7%); color: var(--cost); box-shadow: inset 1px 0 0 var(--cost-line); }
table.lines th.m { background: color-mix(in oklab, var(--margin-bg), var(--margin) 7%); color: var(--margin); }
table.lines td.c { background: var(--cost-bg); color: var(--cost); box-shadow: inset 1px 0 0 var(--cost-line); }
table.lines td.m { background: var(--margin-bg); color: var(--margin); font-weight: 550; }
table.lines td.c input { color: var(--cost); }
table.lines td.m .sub { color: color-mix(in oklab, var(--margin) 75%, var(--muted-foreground)); font-weight: 400; }
table.lines td.m .neg, table.lines td.m.neg { color: var(--red); }
table.lines td.m { padding: 7px 8px 3px; }
table.lines tbody tr:hover > td.c { background: color-mix(in oklab, var(--cost-bg), var(--cost) 6%); }
table.lines tbody tr:hover > td.m { background: color-mix(in oklab, var(--margin-bg), var(--margin) 6%); }
table.lines th.w-money, table.lines td.m { min-width: 6.6em; }
table.lines th.c, table.lines td.c { min-width: 9em; }
table.lines td:has(> input.n), table.lines td.w-q { min-width: 3.9em; }
table.lines td:has(input[data-f="unitPrice"]), table.lines td:has(input[data-f="insurancePct"]) { min-width: 6.8em; }
table.lines td:has(input[data-f="discount"]) { min-width: 4.8em; }
table.lines td:has(input[data-f="total"]), table.lines th.w-tot { min-width: 6.8em; }
table.lines td:has(input[data-f="prep"]), table.lines td:has(input[data-f="shoot"]), table.lines td:has(input[data-f="qty"]) { min-width: 3.6em; }

/* tipi di riga */
table.lines tr.k-EXCLUDED > td:not(.c, .m), table.lines tr.k-INFO > td:not(.c, .m) { color: var(--muted-foreground); }
table.lines tr.k-OPTION > td:not(.c, .m) { background-color: color-mix(in oklab, var(--amber-bg) 40%, var(--card)); }

/* righe proposte (fantasma): bordo tratteggiato pervinca, tinta, corsivo; fuori dai totali */
table.lines tr.st-GHOST > td {
  border-bottom: 1px dashed var(--primary);
  background-color: color-mix(in oklab, var(--primary) 7%, var(--card));
  opacity: 0.88;
  transition: opacity var(--dur-2) var(--ease);
}
table.lines tr.st-GHOST > td.c { background-color: color-mix(in oklab, var(--primary) 7%, var(--cost-bg)); }
table.lines tr.st-GHOST > td.m { background-color: color-mix(in oklab, var(--primary) 7%, var(--margin-bg)); }
table.lines tr:has(+ tr.st-GHOST) > td { border-bottom: 1px dashed var(--primary); }
table.lines tr.st-GHOST:hover > td, table.lines tr.st-GHOST:focus-within > td { opacity: 1; }
table.lines tr.st-GHOST :is(input, textarea) { font-style: italic; color: var(--foreground-2); }
/* righe in standby: grigie, fuori dai totali e dal PDF */
table.lines tr.st-STANDBY > td { background-color: color-mix(in oklab, var(--secondary) 80%, var(--card)) !important; color: var(--muted-foreground); }
table.lines tr.st-STANDBY > td :is(span, b, div) { color: var(--muted-foreground) !important; }
table.lines tr.st-STANDBY :is(input, textarea, select) { color: var(--muted-foreground); }
table.lines tr.st-STANDBY > td.c, table.lines tr.st-STANDBY > td.m { box-shadow: none; }
.state-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 6px 4px; color: var(--muted-foreground); font-size: 12px; line-height: 1.4; }
.state-bar.ghost-bar { color: var(--primary-text); font-weight: 500; }
.mini-ok, .mini-no {
  display: inline-flex; align-items: center; min-height: 20px; margin-left: 4px; padding: 0 7px;
  border: 1px solid var(--input); border-radius: 5px; background: var(--card);
  font-size: 12px; font-weight: 550; line-height: 1.3; font-style: normal; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.mini-ok { color: var(--green); border-color: color-mix(in oklab, var(--green) 35%, var(--border)); }
.mini-no { color: var(--red); border-color: color-mix(in oklab, var(--red) 30%, var(--border)); }
.mini-ok:hover { background: var(--green-bg); }
.mini-no:hover { background: var(--red-bg); }

.item-wrap { display: flex; align-items: flex-start; gap: 4px; }
.item-wrap .pill { margin-top: 5px; }
.note-btn {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 28px; padding: 0;
  border: 0; border-radius: 5px; background: none; color: var(--faint-foreground);
  line-height: 0; opacity: 0.4; cursor: pointer;
  transition: opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
tr:hover .note-btn, tr:focus-within .note-btn { opacity: 1; }
.note-btn:hover { background: var(--accent); color: var(--primary-text); }
.excl-cell { display: flex; align-items: flex-start; gap: 6px; }
.excl-cell select { flex: none; width: auto; max-width: 48%; }
.flag-note { padding: 0 6px; color: var(--amber); font-size: 12px; text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.cost-wrap { position: relative; }
.cost-src { font-style: italic; text-align: left !important; }
.actual-dot { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--cost-bg); cursor: help; }
.actual-dot.same { background: var(--green); }
.actual-dot.diff { background: var(--warn-dot); }
.assign-chip {
  display: inline-flex; align-items: center; height: 20px; margin: 2px 0 2px 6px; padding: 0 8px;
  border: 0; border-radius: 999px;
  font-size: 12px; font-weight: 550; line-height: 1.3; white-space: nowrap; cursor: pointer;
}
.assign-chip { gap: 4px; }
.assign-chip .icon { flex: none; opacity: .85; }
/* "Assegna" (31/10/2026): sempre visibile, contorno tratteggiato nel colore delle azioni; pieno al passaggio */
.assign-chip.empty {
  padding: 0 9px 0 7px; border: 1px dashed var(--primary-line); background: color-mix(in oklab, var(--accent) 55%, transparent);
  color: var(--primary-text); font-weight: 600; text-align: left;
}
.assign-chip.empty:hover { border-style: solid; border-color: var(--primary); background: var(--accent); }
.assign-chip.empty:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
input.proposed, .proposed { font-style: italic; color: var(--muted-foreground) !important; }
table.lines .rowmenu { position: relative; width: 32px; }

/* menu a comparsa */
.menu {
  position: absolute; top: 30px; right: 0; z-index: 25;
  min-width: 220px; padding: 4px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--popover); box-shadow: var(--shadow-lg);
  animation: pop var(--dur-2) var(--ease);
}
.menu button, .menu select {
  display: flex; align-items: center; width: 100%; min-height: 30px; padding: 4px 10px;
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--foreground); font-size: 13px; text-align: left; cursor: pointer;
}
.menu select { background-image: var(--bg-chevron); }
.menu button:hover, .menu button:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: none; }
.menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--border); }
.menu .lbl { padding: 6px 10px 2px; color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 600; }
.menu.sugg { top: auto; right: auto; left: 0; min-width: 320px; max-width: 460px; }
.menu.sugg button { justify-content: space-between; gap: 12px; }
.menu.sugg button span:first-child { white-space: normal; }

/* totali, riquadro interno, barra in basso */
.qtot { font-size: 13.5px; }
.qtot .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; }
.qtot .row .num { font-variant-numeric: tabular-nums; }
.qtot .row input { min-height: 28px; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums; }
.qtot .row input:not([style*="width"]) { width: 112px; }
.qtot .row select { min-height: 28px; font-size: 12.5px; }
.qtot .row.big { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--input); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.012em; }
.qtot .row.sm { color: var(--muted-foreground); font-size: var(--fs-sm); }
.card.internal { background: var(--cost-bg); border-color: var(--cost-line); }
.card.internal .card-h { border-bottom-color: var(--cost-line); }
.card.internal .card-h h2 { display: flex; align-items: center; gap: 6px; color: var(--cost); }
.card.internal .card-h h2::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--i-lock) center / contain no-repeat; mask: var(--i-lock) center / contain no-repeat;
}
.card.internal .qtot .row + .row { border-top: 1px solid color-mix(in oklab, var(--cost-line) 60%, transparent); }
.qbar { display: none; }
.qe .qaside { max-height: calc(100vh - var(--stick) - 32px); overflow: auto; overscroll-behavior: contain; padding-bottom: 2px; }

/* ================================================================ pannello laterale, finestra, notifica */
.drawer-bg {
  position: fixed; inset: 0; z-index: 45;
  display: flex; justify-content: flex-end;
  background: color-mix(in oklab, var(--overlay) 70%, transparent);
  animation: fade var(--dur-2) var(--ease);
}
.drawer {
  display: flex; flex-direction: column;
  width: min(var(--dw, 520px), 100vw); height: 100%;
  border-left: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow-xl);
  animation: slide-in var(--dur-3) var(--ease);
}
.drawer-h { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--border); }
.drawer-h h2 { margin: 0; font-size: var(--fs-lg); font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; }
.drawer-h .small { margin-top: 4px; line-height: 1.6; }
.drawer-h .btn { margin-left: auto; }
.drawer-b { display: grid; flex: 1; align-content: start; gap: 22px; padding: 18px 20px 40px; overflow: auto; overscroll-behavior: contain; }
.dsec h3 { margin: 0 0 10px; color: var(--muted-foreground); font-size: var(--fs-sm); font-weight: 600; }
.dsec .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dsec textarea { width: 100%; }
.cand { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%; background: var(--accent); color: var(--primary-text);
  font-size: 12px; font-weight: 650;
}
.avatar.empty { padding: 0; border: 1px dashed var(--input); background: var(--muted); color: var(--faint-foreground); font-size: 12px; }

.modal-bg {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 16px;
  background: var(--overlay);
  animation: fade var(--dur-2) var(--ease);
}
.modal {
  width: 100%; max-width: 600px; max-height: 90vh; overflow: auto;
  border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-xl);
  animation: rise var(--dur-3) var(--ease);
}
.modal .mh { display: flex; align-items: center; gap: 12px; padding: 18px 16px 4px 22px; }
.modal .mh h2 { margin: 0; font-size: var(--fs-lg); font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; }
.modal .mb { padding: 12px 22px 18px; }
.modal .mb > p:first-child { margin-top: 0; }
.modal .mf { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 22px 16px; border-top: 1px solid var(--border); background: var(--card); }

.toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 12px 10px 16px;
  transform: translateX(-50%);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--popover); color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  animation: toast-in var(--dur-3) var(--ease);
}
.toast.err { border-color: transparent; background: var(--destructive); color: var(--destructive-foreground); }
.toast-act {
  flex: none; min-height: 28px; padding: 0 10px;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: none; color: inherit; font-weight: 600; cursor: pointer;
}
.toast-act:hover { background: var(--accent); }
.toast.err .toast-act { border-color: rgb(255 255 255 / 0.4); }
.toast.err .toast-act:hover { background: rgb(255 255 255 / 0.14); }

/* ================================================================ panoramica di progetto */
.ov { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.ov > * { min-width: 0; }
.ov .c3 { grid-column: span 3; } .ov .c4 { grid-column: span 4; } .ov .c5 { grid-column: span 5; } .ov .c6 { grid-column: span 6; }
.ov .c7 { grid-column: span 7; } .ov .c8 { grid-column: span 8; } .ov .c12 { grid-column: 1 / -1; }
.ready { display: flex; align-items: center; gap: 20px; }
.ring { --p: 0; display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--secondary) 0); }
.ring b { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--card); font-size: 18px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ready .miss { display: grid; gap: 10px; font-size: 13px; }
.ready .miss a { display: grid; gap: 4px; color: var(--foreground); }
.ready .miss a:hover { text-decoration: none; color: var(--primary-text); }
.ready .miss .bar { height: 4px; overflow: hidden; border-radius: 99px; background: var(--secondary); }
.ready .miss .bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.mcard { padding: 10px 0; border-top: 1px solid var(--border); }
.mcards > .mcard:first-child { padding-top: 0; border-top: 0; }
.mcards > .mcard:last-child { padding-bottom: 0; }
.mcard .l { color: var(--foreground-2); font-size: 12.5px; font-weight: 600; }
.mcard .v { margin-top: 2px; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcard .s { color: var(--muted-foreground); font-size: 12px; line-height: 1.4; }
.mcard > div:last-child .s { white-space: nowrap; }
.slot-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.slot-card {
  display: grid; grid-template-columns: 32px 1fr; gap: 10px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); color: inherit; font: inherit; line-height: 1.4; text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.slot-card:hover { border-color: var(--input); box-shadow: var(--shadow-md); }
.slot-card .nm { font-weight: 600; }
.slot-card .rl { color: var(--muted-foreground); font-size: 12.5px; }
.slot-card .meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.slot-card.unsold { border-style: dashed; border-color: var(--input); background: color-mix(in oklab, var(--amber-bg) 30%, var(--card)); }
.need { padding: 2px 6px; border-radius: var(--radius-xs); background: var(--grey-bg); color: var(--grey); font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.need.miss { background: var(--red-bg); color: var(--red); }
.need.ok { background: var(--green-bg); color: var(--green); }
.ask { display: grid; gap: 8px; color: var(--muted-foreground); }
.ask input { width: 100%; background-color: var(--muted); }
.bk-cards { display: grid; gap: 8px; }
.bk {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); line-height: 1.4; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.bk:hover { border-color: var(--input); box-shadow: var(--shadow-sm); }
.card .bk-cards { gap: 0; }
.card .bk-cards .bk { padding: 10px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.card .bk-cards .bk:first-child { padding-top: 2px; border-top: 0; }
.card .bk-cards .bk:hover b { color: var(--primary-text); }
.bk .k { padding: 2px 6px; border-radius: var(--radius-xs); background: var(--accent); color: var(--primary-text); font-size: 12px; font-weight: 600; }

/* matrice logistica */
table.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.matrix th { padding: 9px 10px; border-bottom: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); font-size: 12px; font-weight: 550; text-align: left; white-space: nowrap; }
table.matrix td { min-width: 150px; padding: 8px 10px; border-bottom: 1px solid var(--border); line-height: 1.4; vertical-align: top; }
table.matrix tbody tr:last-child td { border-bottom: 0; }
table.matrix td.who { min-width: 180px; }
table.matrix :is(td, th).sel { width: 28px; min-width: 0; padding-left: 14px; }
.mcell { display: grid; gap: 4px; }
.mchip {
  display: block; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: inherit; font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; cursor: pointer;
}
.mchip:hover { border-color: var(--input); box-shadow: var(--shadow-sm); }
.mchip .s { color: var(--muted-foreground); font-size: 12px; }
td.missing { background: color-mix(in oklab, var(--red-bg) 70%, var(--card)); }
td.missing .addc { color: var(--red); font-weight: 600; }
td.na { color: var(--faint-foreground); }
.addc { padding: 2px 0; border: 0; background: none; color: var(--primary-text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.addc:hover { text-decoration: underline; text-underline-offset: 2px; }

/* timeline di progetto */
.ptl { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.ptl table { width: 100%; border-collapse: collapse; }
.ptl th, .ptl td { height: 34px; padding: 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.ptl th { min-width: 34px; color: var(--muted-foreground); font-weight: 550; text-align: center; font-variant-numeric: tabular-nums; }
.ptl th.today { color: var(--red); }
.ptl td.lab { position: sticky; left: 0; z-index: 1; min-width: 200px; padding: 6px 12px; background: var(--card); font-size: 13px; white-space: nowrap; box-shadow: 1px 0 0 var(--border); }
.ptl td.d { position: relative; min-width: 34px; border-left: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }
.ptl td.d.we { background: var(--row-hover); }
.ptl .w { position: absolute; inset: 9px 0; border-top: 2px solid var(--primary); background: var(--accent); }
.ptl .h { position: absolute; left: 0; right: 0; bottom: 4px; height: 4px; background: var(--purple); }
.ptl .mk { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; }
.ptl .mk.a { color: var(--teal); }
.ptl .mk.miss { color: var(--red); }

/* sotto-menu delle aree (Operation, Finance, Suppliers) */
.subnav {
  display: flex; gap: 2px;
  margin: -6px 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; display: inline-flex; align-items: center;
  min-height: 30px; padding: 0 12px; border-radius: var(--radius-md);
  color: var(--muted-foreground); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.subnav a:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); color: var(--foreground); text-decoration: none; }
.subnav a.on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }

/* pipeline a colonne */
.pipe { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(232px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.pipe-col { display: grid; align-content: start; gap: 8px; min-height: 120px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--muted); }
.pipe-col h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 4px 2px; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.pipe-card {
  display: block; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground); line-height: 1.4;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pipe-card:hover { border-color: var(--input); box-shadow: var(--shadow-md); text-decoration: none; }
.pipe-card b { font-weight: 600; }
.pipe-card .v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* bozza ripristinata, conferma "Scartare le modifiche?" */
.draft-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 6px 6px 6px 12px;
  border: 1px solid color-mix(in oklab, currentColor 20%, transparent); border-radius: var(--radius-md);
  background: var(--amber-bg); color: var(--amber);
  font-size: 13px; line-height: 1.5;
}
.draft-note .btn { margin-left: auto; color: inherit; }
.discard-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; color: var(--red); font-size: 13px; font-weight: 600; line-height: 1.4; }
.drawer-ask { margin: 0; padding: 10px 20px; border-bottom: 1px solid color-mix(in oklab, var(--red) 25%, transparent); background: var(--red-bg); }

/* destinazione della spesa, differenze tra budget, varianti */
.dest { display: grid; gap: 8px; }
.chip.center { border-style: dashed; }
.chip.center.on { border-style: solid; }
.diff-list { display: grid; gap: 4px; font-size: 13px; line-height: 1.5; }
.diff-list .add { color: var(--green); }
.diff-list .del { color: var(--red); }
.diff-list .chg { color: var(--amber); }
.variant-tag {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 8px; padding: 0 6px;
  border-radius: var(--radius-sm); background: var(--grey-bg); color: var(--grey);
  font-size: 12px; font-weight: 700; vertical-align: 1px;
}

/* diario */
.feed { display: grid; gap: 10px; }
.feed .n { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); line-height: 1.5; }
.feed .c { padding-left: 12px; border-left: 1px solid var(--input); color: var(--muted-foreground); font-size: 12.5px; line-height: 1.5; }
.hist table.list th, .hist table.list td { padding: 5px 8px; font-size: 12.5px; }
.hist table.list :is(th, td):first-child { padding-left: 0; }
.print-warning { display: none; }

/* ================================================================ movimento */
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes slide-in { from { opacity: 0.5; transform: translateX(28px); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ================================================================ larghezze */
/* testata di sezione del preventivo sempre visibile scorrendo (con i totali della sezione) */
@media (min-width: 1101px) {
  .main:has(.qe) .sec-h { position: sticky; top: var(--stick); z-index: 6; flex-wrap: nowrap; }
}
@media (max-width: 1400px) {
  .qe { grid-template-columns: minmax(0, 1fr); }
  .qe .qaside { display: none; position: static; max-height: none; overflow: visible; }
  body.show-qaside .qe .qaside { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .qbar {
    position: sticky; bottom: 12px; z-index: 12;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    margin: 16px 0 0; padding: 8px 8px 8px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--card) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
    box-shadow: var(--shadow-lg);
    font-size: 13px; font-variant-numeric: tabular-nums;
  }
  .qbar b { font-weight: 600; }
  .qbar .big b { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.012em; }
  .qbar .btn { margin-left: auto; }
}
@media (max-width: 1300px) { table.list .opt { display: none; } }
@media (max-width: 1100px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .aside-sticky { position: static; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov .c3, .ov .c4, .ov .c5, .ov .c6, .ov .c7, .ov .c8 { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  :root { --top: 52px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: 6px; padding: 0 10px 0 6px; min-width: 0; }
  .menu-toggle { display: inline-grid; }
  .brand { width: auto; gap: 6px; min-width: 0; flex: 0 1 auto; }
  select.company-sel { max-width: 150px; }
  .search { display: none; }
  .viewas { font-size: 0; gap: 0; }
  .viewas select { max-width: 124px; font-size: 13px; }
  .sidebar {
    position: fixed; top: var(--top); bottom: 0; left: 0; z-index: 40;
    width: 272px; height: auto;
    transform: translateX(-102%);
    visibility: hidden;   /* chiuso è fuori schermo: le sue voci non devono entrare nel percorso del tasto Tab */
    transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
    box-shadow: var(--shadow-xl);
  }
  .shell.nav-open .sidebar { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease), visibility 0s; }
  .shell.nav-open .scrim { display: block; position: fixed; inset: var(--top) 0 0 0; z-index: 35; background: color-mix(in oklab, var(--overlay) 70%, transparent); animation: fade var(--dur-2) var(--ease); }
  .sidebar a { min-height: 40px; font-size: 14.5px; }
  .main { --main-px: 16px; padding: 18px var(--main-px) 48px; }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { font-size: var(--fs-xl); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .field :is(input:not([type=checkbox], [type=radio], [type=file]), select, textarea), .filters :is(input:not([type=checkbox], [type=radio]), select) { min-height: 44px; font-size: 16px; }
  .filters > div { flex-wrap: wrap; min-width: 0; }
  .filters select.btn { min-width: 0; max-width: 100%; }
  .field textarea { padding: 10px 12px; }
  .btn { --h: 38px; }
  .btn.sm { --h: 32px; }
  .chip { min-height: 44px; }
  .cal .day { min-height: 64px; padding: 4px; }
  .cal .dow { padding: 6px 4px; font-size: 12px; }
  .ev { font-size: 11px; padding: 0 4px; }
  .week { grid-template-columns: minmax(0, 1fr); }
  .week .col { min-height: 0; }
  table.list th, table.list td { padding: 9px 8px; }
  table.list .opt2 { display: none; }
  .mcards { grid-template-columns: minmax(0, 1fr); }
  .drawer { width: 100vw; border-left: 0; }
  .drawer-b { padding: 16px 16px 40px; }
  .ready { flex-direction: column; align-items: stretch; }
  .ring { align-self: flex-start; }
  .filters input[type=search] { min-width: 0; flex: 1 1 200px; }
  .qbar { bottom: 8px; margin-inline: -4px; }
  .modal-bg { align-items: end; padding: 0; }
  .modal { max-width: none; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation-name: sheet; }
  .toast { bottom: 16px; }
}
@keyframes sheet { from { transform: translateY(24px); opacity: 0.4; } }
@media (max-width: 560px) {
  .main { padding-top: 14px; }
  .page-head { gap: 12px; margin-bottom: 16px; }
  .page-head .actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  .g4 { grid-template-columns: minmax(0, 1fr); }
  .kpi { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 12px 14px; }
  .kpi .v { margin-top: 0; font-size: 18px; grid-column: 2; grid-row: 1; }
  .kpi .s { grid-column: 1 / -1; }
  .card-h { padding: 8px 14px; }
  .card-b { padding: 12px 14px; }
  .todo a, .alert, .up { padding: 10px 14px; gap: 10px; }
  .alert { grid-template-columns: 8px 1fr; }
  .alert > .btn { grid-column: 2; justify-self: start; }
  .lock-banner > span { flex-basis: 100%; }
  .lock-banner .btn { margin-left: 0; }
  select.company-sel { max-width: 120px; }
  .viewas select { max-width: 104px; }
  .sec-h .tot { width: 100%; margin-left: 0; padding-left: 32px; text-align: left; }
  .qbar > span:nth-child(-n+2) { display: none; }
  .qbar { gap: 4px 14px; }
}

/* ================================================================ stampa: le viste interne non escono */
@media print {
  .shell, #modalRoot, .toast { display: none !important; }
  .print-warning { display: block; padding: 40px; font-size: 18px; }
  body.print-ok .shell { display: block !important; }
  body.print-ok .topbar, body.print-ok .sidebar, body.print-ok .actions, body.print-ok .crumbs,
  body.print-ok .print-warning, body.print-ok button, body.print-ok .ptabs { display: none !important; }
  body.print-ok .main { padding: 0; background: #fff; }
  body.print-ok .detail { grid-template-columns: 1fr; }
  body.print-ok .card { box-shadow: none; }
}

/* ================================================================ Preventivo · editor semplificato */
/* testata: versioni come piccole schede, avviso della versione */
.qvers { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: 8px; vertical-align: 1px; }
.qvers a { padding: 1px 8px; border-radius: var(--radius-sm); color: var(--muted-foreground); font-size: var(--fs-sm); font-weight: 500; }
.qvers a:hover { background: var(--secondary); color: var(--foreground); text-decoration: none; }
.qvers a.on { background: var(--secondary); color: var(--foreground); font-weight: 650; }
.lock-banner.note-banner { background: var(--amber-bg); color: var(--amber); }
.q-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* intestazione: una riga di riepilogo, "Modifica" apre i campi */
.qhead { margin-bottom: 12px; }
.qh-sum { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; }
.qh-items { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 10px 26px; min-width: 0; }
.qh-i { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qh-i .l { color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; }
.qh-i .v { max-width: 300px; overflow: hidden; font-size: 13.5px; font-weight: 550; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.qh-i .v .muted { font-weight: 400; font-style: italic; }
.qh-edit { flex: none; align-self: center; }
.qhead.open .card-h .right .small { margin-right: 4px; }

/* barra strumenti: vendita o vendita + interno, sezione, vista */
.qtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.qtools .tabs-seg button { gap: 6px; }
.qtools .tabs-seg button .icon { width: 13px; height: 13px; }
.qtools .tabs-seg button[data-costs="1"].on { color: var(--cost) !important; }
.qtools-r { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.qtools-r .count { min-width: 18px; height: 18px; margin-left: 2px; font-size: 11px; }

/* testata di sezione: nome + totale; costi e margine piccoli, solo in vista interna */
.sec-h .tot { display: flex; align-items: center; justify-content: flex-end; gap: 4px 16px; line-height: 1.3; }
.sec-sum { display: flex; flex-direction: column; align-items: flex-end; }
.sec-h .sec-sum b { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; }
.sec-sum .x { color: var(--muted-foreground); font-size: var(--fs-xs); white-space: nowrap; }
.sec-sum .x:empty { display: none; }
.sec-int { display: flex; gap: 12px; color: var(--muted-foreground); font-size: var(--fs-xs); white-space: nowrap; }
.sec-h .sec-int b[data-k] { padding: 0; background: none; box-shadow: none; font-size: var(--fs-xs); font-weight: 600; }
.sec-h .sec-int .c b { color: var(--cost); }
.sec-h .sec-int .m b { color: var(--margin); }
.sec-h .sec-int .m b.neg { color: var(--red); }
.sec-h > .btn.icon[data-secmenu] { flex: none; }

/* piede di sezione: aggiungi riga / extra / promemoria, note solo se servono */
.sec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; }
.sec-foot:not(:has(button)) { display: none; }
.sec-foot .btn.ghost.sm { gap: 4px; padding: 0 8px; color: var(--primary-text); font-weight: 500; }
.sec-foot .btn.ghost.sm:hover { background: var(--accent); }
.sec-foot .btn .icon { width: 14px; height: 14px; }
.sec-foot-r { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.sec-foot-r .btn.ghost.sm { color: var(--muted-foreground); }
@media (hover: hover) {
  .sec-foot-r { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
  .sec:hover .sec-foot-r, .sec:focus-within .sec-foot-r, .sec-foot:not(:has(> .btn)) .sec-foot-r { opacity: 1; }
}
.sec-foot:not(:has(> .btn)) { padding-block: 2px; }
.sec-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px 12px; padding: 2px 12px 12px; }
.sec-notes .field[hidden], .sec-notes:not(:has(> .field:not([hidden]))) { display: none; }
.sec-notes .note-int label { color: var(--cost); }
.sec-notes .note-int textarea { background: var(--cost-bg); }
table.lines td.sec-empty { padding: 14px 12px; color: var(--muted-foreground); font-size: 13px; }

/* righe: sconto senza segnaposto finché non serve, costo proposto in una riga, stati più leggeri */
table.lines input[data-f="discount"]::placeholder { color: transparent; }
table.lines input[data-f="discount"]:is(:hover, :focus)::placeholder { color: var(--placeholder); }
.cost-meta { display: flex; align-items: center; gap: 2px; padding: 0 0 3px 2px; }
.cost-why {
  display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 5px;
  border: 0; border-radius: 5px; background: none;
  color: color-mix(in oklab, var(--cost) 78%, var(--muted-foreground)); font-size: 11.5px; font-style: italic; cursor: pointer;
}
.cost-why .icon { width: 12px; height: 12px; }
.cost-why:hover, .cost-why:focus-visible, .cost-why[aria-expanded="true"] { background: color-mix(in oklab, var(--cost) 12%, transparent); }
.cost-meta .mini-ok { margin-left: auto; min-height: 22px; }
.state-bar { gap: 6px; padding: 1px 6px 4px; }
.state-bar .mini-ok, .state-bar .mini-no { margin-left: 0; }
.state-chip {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; flex: none;
  border-radius: 999px; background: var(--secondary); color: var(--muted-foreground);
  font-size: 11px; font-weight: 600; cursor: help;
}
.state-chip.ghost { background: color-mix(in oklab, var(--primary) 16%, transparent); color: var(--primary-text); }
.state-note { flex: 1 1 0; width: 0; min-width: 24px; overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
table.lines th.c, table.lines td.c { min-width: 7.6em; }
table.lines .sub { white-space: nowrap; }
table.lines tr.flash > td { animation: qflash 1.6s var(--ease); }
@keyframes qflash { 0%, 45% { background-color: var(--accent); } }

/* menu a comparsa fuori dalle tabelle (non più tagliati) */
.menu.float { position: fixed; top: 0; right: auto; left: 0; z-index: 42; max-width: min(420px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain; }
.menu.float.sugg { min-width: min(320px, calc(100vw - 16px)); }
.menu button .hint { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding-left: 16px; color: var(--muted-foreground); font-size: var(--fs-xs); }
.menu button.menu-back { color: var(--muted-foreground); font-weight: 600; }
.menu.float button.menu-back > .icon { margin-right: 4px; }
.menu button:disabled { color: var(--faint-foreground); background: none; cursor: default; }
.menu button.danger-item:not(:disabled) { color: var(--red); }
.menu button.danger-item:not(:disabled):hover { background: var(--red-bg); }
.menu .mck { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-right: 8px; color: var(--primary-text); }
.menu .mletter {
  display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; margin-right: 8px; padding: 0 4px;
  border-radius: var(--radius-xs); background: var(--accent); color: var(--primary-text); font-size: 11.5px; font-weight: 700;
}
.menu .menu-text { max-width: 300px; margin: 2px 10px 6px; color: var(--foreground-2); font-size: 13px; line-height: 1.45; white-space: normal; }
.menu.float button > .icon { margin-right: 8px; }

/* riepilogo: TOTALE in evidenza, dettagli che si aprono, controlli in una riga */
.qsum-top { display: grid; gap: 2px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.qsum-top .l { color: var(--muted-foreground); font-size: var(--fs-sm); font-weight: 500; }
.qsum-top .v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.qsum-top .v small { color: var(--muted-foreground); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; }
.qsum-top .s { color: var(--muted-foreground); font-size: var(--fs-xs); }
.qsum .qtot { padding-top: 8px; }
.qmore { margin-top: 4px; border-top: 1px solid var(--border); }
.card.internal .qmore { border-top-color: var(--cost-line); }
.qmore > summary, .qcheck > summary {
  display: flex; align-items: center; gap: 6px; min-height: 34px;
  color: var(--muted-foreground); font-size: var(--fs-sm); font-weight: 500;
  list-style: none; cursor: pointer; user-select: none;
}
.qmore > summary::-webkit-details-marker, .qcheck > summary::-webkit-details-marker { display: none; }
.qmore > summary::before, .qcheck > summary::after {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--i-chevron-down) center / contain no-repeat; mask: var(--i-chevron-down) center / contain no-repeat;
  transform: rotate(-90deg); transition: transform var(--dur-2) var(--ease);
}
.qmore[open] > summary::before, .qcheck[open] > summary::after { transform: none; }
.qmore > summary:hover { color: var(--foreground); }
.qmore > summary:focus-visible, .qcheck > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.qcheck > summary { gap: 8px; min-height: 44px; padding: 0 14px; font-size: 13.5px; font-weight: 600; }
.qcheck > summary::after { margin-left: auto; }
.qcheck > summary .icon { width: 16px; height: 16px; }
.qcheck.ok > summary { color: var(--green); }
.qcheck.warn > summary { color: var(--amber); }
.qcheck-b { padding: 0 14px 12px; }
.q-link { padding: 0; border: 0; background: none; color: var(--primary-text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 1400px) {
  body.show-qaside .qe .qaside .qcheck { align-self: start; }
}

/* telefono */
@media (max-width: 820px) {
  .qh-items { gap: 8px 20px; }
  .qh-i .v { max-width: 44vw; }
  .sec-foot .btn.ghost.sm, .qtools .btn.sm { --h: 36px; }
  .cost-why, .cost-meta .mini-ok, .state-bar .mini-ok, .state-bar .mini-no { min-height: 28px; }
}
@media (max-width: 560px) {
  .qh-sum { flex-direction: column; align-items: stretch; padding: 10px 12px; }
  .qh-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .qh-i .v { max-width: 100%; white-space: normal; }
  .qh-edit { align-self: flex-start; }
  .qtools .tabs-seg { flex: 1 1 100%; }
  .qtools .tabs-seg button { flex: 1; justify-content: center; }
  .qtools-r { margin-left: 0; }
  .sec-h { flex-wrap: wrap; }
  .sec-h input.sec-name { flex: 1 1 120px; min-width: 0; max-width: none; field-sizing: fixed; }
  .sec-h .tot { order: 5; flex: 1 1 100%; width: auto; min-width: 0; margin-left: 0; padding: 0 4px 0 36px; justify-content: space-between; text-align: right; }
  .sec-h .tot:not(:has(.sec-int)) { justify-content: flex-end; }
  .sec-int { flex-direction: column; gap: 0; align-items: flex-start; }
  .sec-foot-r { margin-left: 0; }
}

/* Operation · lista progetti */
/* filtri (periodo, cliente, valore, stato) nell'indirizzo; gruppi Aperti / Confermati / Chiusi; versioni a discesa */
.pl-filters select { max-width: 210px; }
.pl-filters input[type=search] { min-width: 220px; }
.pl-range { display: inline-flex; align-items: center; gap: 6px; }
.pl-range[hidden] { display: none; }
.pl-range input[type=date] { width: 148px; }
.pl-range input:not([type=date]) { width: 96px; font-variant-numeric: tabular-nums; }
.pl-sort { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted-foreground); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.page-head .actions .tabs-seg { align-self: center; }
#freset .count { min-width: 18px; height: 18px; background: var(--accent); color: var(--accent-foreground); }
.pl-groups { display: grid; gap: 16px; }
.pl-group { overflow: hidden; }   /* righe annidate con fondo: restano dentro gli angoli arrotondati */
.pl-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 50px; padding: 7px 16px 7px 8px; }
.pl-group:not(.is-collapsed) .pl-gh { border-bottom: 1px solid var(--border); }
.pl-gt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground); font: inherit; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.pl-gt:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); }
.pl-gt:focus-visible, .pl-tog:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.pl-gh h2 { margin: 0; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.pl-gt { font-weight: 600; }
.pl-chev { color: var(--muted-foreground); transition: transform var(--dur-2) var(--ease); }
.pl-group.is-collapsed .pl-gt .pl-chev { transform: rotate(-90deg); }
.pl-flag { display: inline-flex; align-items: center; gap: 6px; color: var(--foreground-2); font-size: var(--fs-sm); font-weight: 500; }
.pl-gv { margin-left: auto; font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-gb[hidden] { display: none; }
.pl-empty { padding: 16px; }
.pl-more { padding: 6px 10px; border-top: 1px solid var(--border); }
table.pl-table { table-layout: fixed; }
/* larghezze fisse (colonne allineate fra i tre gruppi) che si stringono con lo schermo; Progetto prende il resto */
table.pl-table th.pl-x { width: 52px; }
table.pl-table th.pl-date { width: 150px; }
table.pl-table th.pl-st { width: 184px; }
table.pl-table th.pl-ver { width: 150px; }
table.pl-table th.pl-val { width: 128px; }
table.pl-table th.pl-mar { width: 112px; }
@media (max-width: 1300px) {
  table.pl-table th.pl-date { width: 124px; }
  table.pl-table th.pl-st { width: 150px; }
  table.pl-table th.pl-val { width: 112px; }
  table.pl-table th.pl-mar { width: 100px; }
}
table.pl-table th.num { text-align: right; }
table.pl-table td.pl-x { padding-right: 0; }
table.pl-table td.pl-name { overflow-wrap: anywhere; }
table.pl-table a.pl-title { color: inherit; font-weight: 550; }
table.pl-table a.pl-title:hover { text-decoration: none; color: var(--primary-text); }
table.pl-table .pl-soon { color: var(--foreground-2); font-weight: 500; }
.pl-act { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; color: var(--foreground-2); font-size: 12px; line-height: 1.35; }
.pl-act .dot { flex: none; transform: translateY(-1px); }
.pipe-card .pl-act { margin-top: 6px; }
.pipe-card .v { white-space: nowrap; }
.pl-tog {
  display: inline-flex; align-items: center; gap: 1px; min-width: 38px; height: 26px; padding: 0 7px 0 3px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
  color: var(--muted-foreground); font: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pl-tog:hover { background: var(--secondary); color: var(--foreground); }
.pl-tog[aria-expanded=true] { border-color: var(--border); background: var(--card); color: var(--foreground); }
.pl-tog[aria-expanded=true] .pl-chev { transform: rotate(90deg); color: var(--foreground); }
/* versioni annidate: stesse colonne della riga progetto, fondo tenue e filo verticale sotto la freccia */
table.pl-table tr.pl-row.is-open > td { border-bottom-color: transparent; }
table.pl-table tr.pl-v[hidden] { display: none; }
table.pl-table tr.pl-v > td { padding-top: 7px; padding-bottom: 7px; border-bottom-color: transparent; background: var(--muted); font-size: 13px; }
table.pl-table tr.pl-v.is-last:not(.pl-end) > td { border-bottom-color: var(--border); }
table.pl-table tr.pl-end > td { border-bottom-color: transparent; }
table.pl-table tr.pl-v:hover > td { background: color-mix(in oklab, var(--muted) 70%, var(--row-hover)); }
table.pl-table tr.pl-v > td.pl-x { background-image: linear-gradient(var(--input), var(--input)); background-size: 1px 100%; background-position: 32px 0; background-repeat: no-repeat; }
table.pl-table tr.pl-v.is-last > td.pl-x { background-size: 1px 50%; }
.pl-vn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pl-vg { flex: 0 0 104px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.pl-vv { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
@media (max-width: 1300px) { .pl-vg { flex-basis: 72px; } }
.pl-vn a { color: var(--foreground); font-weight: 600; }
.pl-vn a:hover { color: var(--primary-text); text-decoration: none; }
.pl-ref { padding: 0 6px; white-space: nowrap; border: 1px solid var(--primary-line); border-radius: 5px; color: var(--primary-text); font-size: 11px; font-weight: 600; line-height: 18px; }
@media (max-width: 1100px) {
  .pl-sort { margin-left: 0; }
}
@media (max-width: 560px) {
  .pl-filters > input[type=search] { flex: 1 1 100%; }
  .pl-filters > select { flex: 1 1 calc(50% - 4px); max-width: none; }
  .pl-range { flex: 1 1 100%; }
  .pl-range input, .pl-range input[type=date], .pl-range input:not([type=date]) { flex: 1 1 0; width: auto; }
  .pl-sort { flex: 1 1 100%; }
  .pl-sort select { flex: 1 1 auto; }
  .pl-gh { padding-right: 14px; }
  table.pl-table, table.pl-table tbody { display: block; }
  table.pl-table thead { display: none; }
  table.pl-table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; padding: 11px 14px 11px 4px; border-bottom: 1px solid var(--border); }
  table.pl-table tbody > tr.pl-end { border-bottom-color: transparent; }
  table.pl-table td { display: block; padding: 0 !important; border: 0 !important; background: none !important; }
  table.pl-table td:is(.opt, .opt2) { display: none; }
  table.pl-table td.pl-x { grid-column: 1; grid-row: 1 / span 3; }
  table.pl-table td.pl-name { grid-column: 2; grid-row: 1; }
  table.pl-table td.pl-val { grid-column: 3; grid-row: 1; }
  table.pl-table td.pl-date { grid-column: 2 / 4; grid-row: 2; margin-top: 6px; white-space: normal; }
  table.pl-table tr.pl-row td.pl-date { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
  table.pl-table tr.pl-row td.pl-date .t-sub { margin-top: 0; }
  table.pl-table td.pl-st { grid-column: 2 / 4; grid-row: 3; margin-top: 6px; }
  table.pl-table tr.pl-row.is-open { border-bottom-color: transparent; }
  table.pl-table tr.pl-v { padding-top: 8px; padding-bottom: 8px; border-bottom-color: transparent; background: var(--muted); }
  table.pl-table tr.pl-v.is-last:not(.pl-end) { border-bottom-color: var(--border); }
  table.pl-table tr.pl-v td.pl-date { grid-column: 2; grid-row: 2; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; }
  table.pl-table tr.pl-v td.pl-st { grid-column: 3; grid-row: 2; margin-top: 2px; text-align: right; }
  table.pl-table tr.pl-v td.pl-x { grid-row: 1 / span 2; }
  .pl-vn { gap: 4px 8px; }
  .pl-vg { flex-basis: 84px; }
}

/* Impostazioni · Database voci */
/* richiesta leggera sulla riga del preventivo: voce scritta a mano che non è nel database */
table.lines tr:has(+ tr.cat-ask-row) > td { border-bottom-color: transparent; }
table.lines tr.cat-ask-row > td { padding-top: 0; padding-bottom: 8px; }
.cat-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 6px 5px 8px;
  border: 1px dashed color-mix(in oklab, var(--primary) 45%, var(--border)); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--primary) 6%, transparent); color: var(--foreground-2); font-size: 12px; line-height: 1.4; }
.cat-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; flex: none; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 16%, transparent); color: var(--primary-text); font-size: 11px; font-weight: 600; cursor: help; }
.cat-chip.arch { background: var(--amber-bg); color: var(--amber); }
.cat-near { min-width: 0; }
.cat-link { padding: 0; border: 0; background: none; color: var(--primary-text); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cat-link:hover { text-decoration-thickness: 2px; }
.cat-acts { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.cat-ask .mini-ok { margin-left: 0; }
.mini-btn { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border: 1px solid var(--input); border-radius: 5px; background: var(--card);
  color: var(--foreground-2); font-size: 12px; font-weight: 550; line-height: 1.3; cursor: pointer; transition: background-color var(--dur-1) var(--ease); }
.mini-btn:hover { background: var(--secondary); color: var(--foreground); }
:is(.cat-link, .mini-btn):focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.menu.sugg button > span:last-child { flex: none; white-space: nowrap; }
/* listino di un'altra società (prefisso TCF_, CS_): etichetta sempre visibile accanto al nome */
.list-tag { display: inline-flex; align-items: center; height: 17px; margin-right: 6px; padding: 0 5px; flex: none; vertical-align: 1px;
  border: 1px solid color-mix(in oklab, var(--purple) 45%, var(--border)); border-radius: 4px; background: var(--purple-bg); color: var(--purple);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; cursor: help; }
.menu.sugg .sugg-alias { display: block; margin-top: 1px; color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 400; }
/* schermata */
.vc-clean { margin: -6px 0 14px; }
.vc-filters .tabs-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.vc-filters .tabs-seg::-webkit-scrollbar { display: none; }
.vc-n { margin-left: 6px; color: var(--faint-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }
.vc-tabs .on .vc-n { color: var(--muted-foreground); }
.vc-filters input[type=search] { flex: 1 1 160px; min-width: 140px; }
.vc-filters select { max-width: 180px; }
table.vc-table td.vc-name { min-width: 240px; overflow-wrap: anywhere; }
table.vc-table tr.click:focus-visible > td { background: var(--row-hover); }
table.vc-table tr.click:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.vc-lock { display: inline-flex; margin-right: 6px; color: var(--muted-foreground); vertical-align: -1px; }
.vc-alias { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
.vc-mob { display: none; }
table.vc-table tr.vc-gh > td { padding-top: 14px; padding-bottom: 6px; background: var(--muted); color: var(--amber); font-size: 12px; font-weight: 600; }
.vc-more { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); }
.vc-hint { margin: -4px 0 10px; }
/* scheda della voce */
.vc-form { grid-template-columns: 1fr 1fr; }
.vc-save { margin-top: 12px; }
.vc-rates { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 4px; }
.vc-review { padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--amber) 35%, var(--border)); border-radius: var(--radius-md); background: var(--amber-bg); }
.vc-review h3 { color: var(--amber); }
.vc-why { margin: 0 0 10px; color: var(--foreground); font-weight: 550; }
.vc-others { display: grid; gap: 4px; margin-bottom: 10px; }
.vc-other, .vc-mres button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; min-height: 32px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--foreground); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.vc-other:hover, .vc-mres button:hover { background: var(--accent); color: var(--accent-foreground); }
.vc-other:focus-visible, .vc-mres button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.vc-mres button .icon { margin-right: 6px; vertical-align: -1px; }
.vc-aliases, .vc-uses { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.vc-aliases li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 2px 0 2px 10px; border-left: 2px solid var(--border); font-size: 13px; overflow-wrap: anywhere; }
.vc-uses li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 3px 0; font-size: 13px; }
.vc-uses .demo { margin-left: 0; }
.vc-merge { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.vc-mres { display: grid; gap: 4px; }
@media (max-width: 820px) {
  .vc-form { grid-template-columns: 1fr; }
  .cat-acts { margin-left: 0; }
  .mini-btn, .cat-ask .mini-ok { min-height: 28px; }
}
@media (max-width: 560px) {
  .vc-filters .tabs-seg { flex: 1 1 100%; }
  .vc-filters input[type=search] { flex: 1 1 100%; }
  .vc-filters select { flex: 1 1 calc(50% - 4px); max-width: none; }
  table.vc-table, table.vc-table tbody { display: block; }
  table.vc-table thead { display: none; }
  table.vc-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--border); }
  table.vc-table td { display: none; padding: 0 !important; border: 0 !important; background: none !important; }
  table.vc-table td.vc-name { display: block; min-width: 0; }
  table.vc-table td.vc-price { display: block; padding-top: 1px !important; }
  table.vc-table tr.vc-gh { display: block; padding: 12px 14px 6px; background: var(--muted); }
  table.vc-table tr.vc-gh > td, table.vc-table td.empty { display: block; }
  table.vc-local tr { grid-template-columns: minmax(0, 1fr); }
  table.vc-local td { display: block; margin-top: 4px; text-align: left; }
  .vc-mob { display: block; }
  .vc-alias { max-width: none; white-space: normal; }
}

/* voci a tariffa oraria (ruoli non CCNL): monte ore sulla riga del preventivo, over time a parte */
.hours-chip {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; margin: 2px 0 2px 6px; padding: 0 5px 0 7px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  color: var(--foreground-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.hours-chip .icon { color: var(--muted-foreground); }
.hours-chip:hover, .hours-chip[aria-expanded="true"] { background: var(--accent); color: var(--accent-foreground); }
.hours-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.hours-chip.is-locked { padding-right: 7px; background: none; cursor: default; }
.hours-ot { margin-left: 6px; color: var(--amber); font-size: 12px; font-weight: 550; white-space: nowrap; }
.menu.hours-menu { min-width: 300px; }
.hm-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px 6px 6px; }
.menu .hm-quick button { justify-content: center; padding: 4px 6px; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.menu .hm-quick button.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.hm-row { display: flex; align-items: center; gap: 6px; padding: 2px 10px 4px; color: var(--foreground-2); font-size: 13px; }
.hm-row label { flex: none; }
.hm-row input { width: 72px; min-height: 28px; padding: 3px 6px; font-variant-numeric: tabular-nums; text-align: right; }
.hm-row > span { white-space: nowrap; }
.menu .hm-row button.mini-ok { display: inline-flex; flex: none; width: auto; min-height: 28px; margin-left: auto; padding: 0 10px;
  border: 1px solid color-mix(in oklab, var(--green) 35%, var(--border)); background: var(--card); color: var(--green); font-size: 12px; font-weight: 600; }
.menu .hm-row button.mini-ok:hover, .menu .hm-row button.mini-ok:focus-visible { background: var(--green-bg); color: var(--green); }
.hm-ot label + input + label { margin-left: 6px; }
.menu .menu-text.small { font-size: 12px; color: var(--muted-foreground); }
.vc-hourly { grid-column: 1 / -1; }
/* prezzo fisso: ore esposte diverse da quelle del prezzo, segnalato in rosso */
.hours-chip.is-fixed { border-color: color-mix(in oklab, var(--red) 45%, var(--border)); color: var(--red); }
.hours-chip.is-fixed .icon { color: var(--red); }
.hc-fixed { margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--red-bg); color: var(--red); font-size: 11px; font-weight: 600; }
.menu .hm-fixed { display: flex; align-items: center; gap: 8px; margin: 2px 6px 4px; padding: 6px 8px; border-radius: 8px; color: var(--red); font-size: 13px; font-weight: 550; cursor: pointer; }
.menu .hm-fixed:hover { background: var(--red-bg); }
.menu .hm-fixed.on { background: var(--red-bg); }
.menu .hm-fixed input { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--red); }
.hm-warn { padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--red) 35%, var(--border)); border-radius: 10px; background: var(--red-bg); color: var(--red); line-height: 1.5; }
.hm-warn p { margin: 0; }
.hm-warn p + p { margin-top: 8px; color: var(--foreground-2); }
@media (max-width: 820px) {
  .hours-chip { height: 28px; }
}

/* Preventivo · aggiungi voce, sottogruppi, cestino, NIC, ordine sezioni (30/10/2026) */
table.lines tr.add-row > td { padding: 4px 6px 8px; border-bottom: 0; }
.add-voce {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border: 1px dashed color-mix(in oklab, var(--green) 45%, var(--border)); border-radius: 8px; background: color-mix(in oklab, var(--green-bg) 50%, transparent);
  color: var(--green); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.add-voce:hover { border-style: solid; background: var(--green-bg); }
/* tabella più larga dello schermo: bottone e titolo del sottogruppo restano visibili a sinistra mentre la tabella scorre */
.add-voce, table.lines tr.grp-row .grp-label { position: sticky; left: 8px; }
table.lines tr.grp-row .grp-label { display: inline-flex; align-items: baseline; }
.add-voce:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.add-voce .add-in { color: var(--muted-foreground); font-weight: 500; }
table.lines tr.grp-row > td { padding: 10px 8px 4px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 45%, transparent); }
table.lines tr.grp-row .grp-name { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--foreground-2); }
table.lines tr.grp-row .grp-n { margin-left: 8px; color: var(--muted-foreground); font-size: 12px; }
table.lines tr.grp-row .grp-tot { float: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground-2); }
table.lines td.rowmenu { white-space: nowrap; }
table.lines td.rowmenu .row-del { display: flex; margin-top: 2px; color: var(--muted-foreground); }
table.lines td.rowmenu .row-del:hover { color: var(--red); background: var(--red-bg); }
table.lines .nic-sel { width: 100%; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.grp-props { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip-btn { min-height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--foreground-2); font: inherit; font-size: 12px; cursor: pointer; }
.chip-btn:hover { border-color: var(--primary); color: var(--foreground); }
ol.sec-order { margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 10px; }
ol.sec-order li { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-top: 1px solid var(--border); }
ol.sec-order li:first-child { border-top: 0; }
ol.sec-order .so-name { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; }
ol.sec-order .mletter { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--muted); font-size: 11px; font-weight: 700; }
@media (max-width: 820px) {
  .add-voce { min-height: 40px; }
  table.lines td.rowmenu .row-del { margin-top: 6px; }
}
/* Preventivo · prezzo originale, colonne riordinabili, nota dell'unità (31/10/2026) */
.price-wrap { position: relative; }
.price-reset {
  position: absolute; top: 50%; left: 2px; transform: translateY(-50%); z-index: 1;
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px;
  background: var(--amber-bg); color: var(--amber); cursor: pointer;
}
.price-reset[hidden] { display: none; }
.price-reset:hover { background: color-mix(in oklab, var(--amber) 22%, var(--amber-bg)); }
.price-reset:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.price-wrap:has(.price-reset:not([hidden])) input { padding-left: 25px; }
table.lines th[draggable="true"] { cursor: grab; user-select: none; }
table.lines th.col-dragging { opacity: .45; }
table.lines th.col-drop-before { box-shadow: inset 3px 0 0 var(--primary); }
table.lines th.col-drop-after { box-shadow: inset -3px 0 0 var(--primary); }
.unit-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 12px 2px; color: var(--muted-foreground); font-size: 12px; }
.unit-note b { color: var(--foreground-2); font-weight: 600; }
.sec-order .so-name .small { margin-left: 8px; }
/* Progetto · Impostazioni (facoltative) */
.loc-list { display: grid; gap: 2px; }
.loc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.loc-item:first-child { border-top: 0; }

/* Logistica · piano del progetto (30/10/2026): stato, da fare, venduto/prenotato, timeline, giorni, prenotazioni, itinerario */
.lg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lg > *, .lgtl { min-width: 0; }   /* la timeline scorre dentro la sua scheda, la pagina non si allarga */
.lg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lg-kpi { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-xs); }
.lg-kpi .l { color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.lg-kpi .v { margin-top: 4px; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.lg-kpi .v small { color: var(--muted-foreground); font-size: 14px; font-weight: 600; }
.lg-kpi .s { margin-top: 6px; color: var(--muted-foreground); font-size: var(--fs-sm); }
.lg-kpi.is-warn .s { color: var(--amber); } .lg-kpi.is-bad .s { color: var(--red); } .lg-kpi.is-ok .s { color: var(--green); }
.lg-meter { display: block; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--muted); }
.lg-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width var(--dur-2, .2s) var(--ease); }
.lg-kpi.is-warn .lg-meter > span { background: var(--amber); } .lg-kpi.is-ok .lg-meter > span { background: var(--green); }
.lg-kpi.is-bad .lg-meter > span, .lg-meter.is-bad > span { background: var(--red); }
.lg-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lg-actions { margin: 0; padding: 4px 0; list-style: none; }
.lg-actions li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); }
.lg-actions li:first-child { border-top: 0; }
.lg-actions .dot { flex: none; margin-top: 6px; }
.lg-a-t { flex: 1; min-width: 0; line-height: 1.45; }
.lg-a-t b { font-weight: 600; }
.lg-actions .btn { flex: none; align-self: center; }
.lg-more { margin: 0 12px 10px; }
.lg-ok { display: flex; align-items: center; gap: 8px; color: var(--green); }
.lg-lines { margin: 0; padding: 4px 0 8px; list-style: none; }
.lg-lines li { padding: 8px 16px; border-top: 1px solid var(--border); }
.lg-lines li:first-child { border-top: 0; }
.lg-l-t { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); line-height: 1.4; }
.lg-l-t > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-lines .lg-meter { margin: 6px 0 4px; }
.lg-unl { display: flex; align-items: center; gap: 6px; color: var(--amber); }
.lg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.lg-add { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-add .btn .icon { margin-right: 4px; }
.lg-empty { display: grid; gap: 6px; justify-items: start; }
.lg-empty p { margin: 0; }

/* timeline: persone × giorni, due corsie (viaggi sopra, notti sotto) */
.lgtl { --tl-name: 236px; --tl-day: 58px; overflow: hidden; }
.lgtl-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.lgtl-scroll:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.lgtl-row { display: grid; grid-template-rows: 30px 26px; width: max-content; min-width: 100%; border-bottom: 1px solid var(--border); }
.lgtl-row:last-child { border-bottom: 0; }
.lgtl-head { grid-template-rows: 46px; position: sticky; top: 0; z-index: 4; background: var(--card); }
.lgtl-name { position: sticky; left: 0; z-index: 3; grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px;
  border: 0; border-right: 1px solid var(--border); background: var(--card); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; }
.lgtl-head .lgtl-name { grid-row: 1; color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 600; cursor: default; }
button.tl-name:hover { background: var(--row-hover); }
.lgtl-name .avatar { flex: none; }
.lgtl-who { display: grid; min-width: 0; line-height: 1.3; }
.lgtl-who b, .lgtl-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgtl-who b { font-size: var(--fs-sm); }
.lgtl-need { color: var(--red); }
.lgtl-h { position: relative; grid-row: 1; display: grid; place-content: center; justify-items: center; border-left: 1px solid var(--border); color: var(--muted-foreground); line-height: 1.2; }
.lgtl-h .wd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.lgtl-h .dn { color: var(--foreground); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lgtl-h .mo { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 600; }
.lgtl-h .ms { position: absolute; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.lgtl-h.is-we { background: color-mix(in oklab, var(--muted) 60%, transparent); }
.lgtl-h.is-event { background: var(--accent); color: var(--accent-foreground); }
.lgtl-h.is-event .dn { color: var(--accent-foreground); }
.lgtl-h.is-today { box-shadow: inset 0 -3px 0 var(--primary); }
.lgtl-c { grid-row: 1 / span 2; border-left: 1px solid var(--border); }
.lgtl-c.is-away { background: color-mix(in oklab, var(--muted) 70%, transparent); }
.lgtl-c.is-work { background: color-mix(in oklab, var(--primary) 16%, transparent); }
.lgtl-c.is-today { box-shadow: inset 2px 0 0 var(--primary); }
.lgtl-mv, .lgtl-stay, .lgtl-gap { position: relative; z-index: 1; min-width: 0; margin: 3px 2px; border-radius: 6px; font: inherit; font-size: 11.5px; line-height: 1; cursor: pointer; }
.lgtl-mvs { position: relative; z-index: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 0 2px; }
.lgtl-mvs .lgtl-mv { margin: 0; }
.lgtl-mv.is-icon { padding: 0 4px; }
.lgtl-mv small { margin-left: 1px; padding: 0 3px; border-radius: 4px; background: color-mix(in oklab, currentColor 16%, transparent); font-size: 10px; }
.lgtl-mv { grid-row: 1; justify-self: center; align-self: center; display: inline-flex; flex: none; align-items: center; gap: 3px; height: 22px; padding: 0 6px;
  border: 1px solid color-mix(in oklab, var(--blue) 40%, var(--border)); background: var(--blue-bg); color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums; }
.lgtl-mv.k-CAR, .lgtl-mv.k-TRANSFER { border-color: color-mix(in oklab, var(--teal) 40%, var(--border)); background: var(--teal-bg); color: var(--teal); }
.lgtl-mv.st-TO_BOOK, .lgtl-stay.st-TO_BOOK { border-style: dashed; background: var(--amber-bg); color: var(--amber); }
.lgtl-stay { grid-row: 2; display: flex; align-items: center; gap: 4px; padding: 0 8px; overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--green) 40%, var(--border)); background: var(--green-bg); color: var(--green); font-weight: 600; text-align: left; }
.lgtl-stay span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgtl-gap { grid-row: 2; padding: 0 8px; border: 1px dashed var(--red); background: var(--red-bg); color: var(--red); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgtl-gap:disabled { cursor: default; }
.lgtl-mv:hover, .lgtl-stay:hover, button.tl-gap:hover:not(:disabled) { filter: brightness(0.96); box-shadow: var(--shadow-xs); }
.lgtl-mv:focus-visible, .lgtl-stay:focus-visible, .lgtl-gap:focus-visible, .lgtl-name:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.lgtl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; border-top: 1px solid var(--border); }
.lgtl-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lg-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.lg-sw.is-work { background: color-mix(in oklab, var(--primary) 30%, transparent); } .lg-sw.is-away { background: var(--muted); border: 1px solid var(--border); }
.lg-sw.is-stay { background: var(--green-bg); border: 1px solid var(--green); } .lg-sw.is-gap { background: var(--red-bg); border: 1px dashed var(--red); }
.lg-sw.is-ms { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }

/* prima di partire */
.lg-chk { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin: 0; padding: 6px 8px 10px; list-style: none; }
.lg-chk li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.lg-chk li:hover { background: var(--row-hover); }
.lg-chk-b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; padding: 0; border: 1.5px solid var(--input); border-radius: 6px; background: var(--card); color: var(--primary-foreground); cursor: pointer; }
.lg-chk-b:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.lg-chk li.is-done .lg-chk-b { border-color: var(--green); background: var(--green); color: var(--card); }
.lg-chk-t { flex: 1; display: grid; gap: 1px; font-size: var(--fs-sm); line-height: 1.4; }
.lg-chk li.is-done .lg-chk-t, .lg-chk li.is-na .lg-chk-t { color: var(--muted-foreground); }
.lg-chk li.is-na .lg-chk-t { text-decoration: line-through; }
.lg-chk li.is-late .lg-chk-t .muted { color: var(--red); }
.lg-chk li.is-late .lg-chk-b { border-color: var(--red); }

/* giorno per giorno */
.lg-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: start; }
.lg-day .card-h { gap: 8px; } .lg-day .card-h h3 { margin: 0; font-size: var(--fs-md); text-transform: capitalize; }
.lg-day.is-event { border-color: var(--primary-line); }
.lg-day.is-today { box-shadow: 0 0 0 2px var(--ring-soft); }
.lg-day .card-b { display: grid; gap: 10px; }
.lg-ds-t { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.lg-it { display: block; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: none; color: var(--foreground); font: inherit; font-size: var(--fs-sm); line-height: 1.45; text-align: left; cursor: pointer; }
button.lg-it:hover { background: var(--row-hover); }
.lg-it b { font-variant-numeric: tabular-nums; }
.lg-ppl { display: block; color: var(--muted-foreground); font-size: var(--fs-xs); }
.lg-nobed .lg-ds-t, .lg-nobed .lg-ppl { color: var(--red); }
.lg-ms { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--purple-bg); color: var(--purple); font-size: var(--fs-sm); font-weight: 600; }
.lg-ms::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lg-work { padding: 0 8px; }

/* prenotazioni */
.lg-gh { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: var(--fs-md); }
.lg-bks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 8px; }
.lg-bk { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; }
.lg-bk.st-TO_BOOK { border-style: dashed; border-color: color-mix(in oklab, var(--amber) 50%, var(--border)); }
.lg-bk-main { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 0; background: none; color: var(--foreground); font: inherit; text-align: left; cursor: pointer; }
.lg-bk-main:hover { background: var(--row-hover); }
.lg-bk-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.lg-bk-t b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-bk-t .pill { flex: none; }
.lg-bk-f { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.lg-bk-f .num { flex: none; font-weight: 600; }
.lg-line { flex: 1; width: 100%; min-width: 0; min-height: 30px; font-size: var(--fs-sm); }

/* itinerario */
.lg-iti { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.lg-iti .lg-it { padding: 2px 0; }
.lg-iti-miss { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--red-bg); color: var(--red); line-height: 1.5; }
.lg-iti-txt { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }

@media (max-width: 980px) { .lg-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .lgtl { --tl-name: 150px; --tl-day: 50px; }
  .lgtl-name .avatar { display: none; }
  .lg-actions li { flex-wrap: wrap; } .lg-actions .btn { margin-left: 18px; }
  .lg-bar { align-items: stretch; } .lg-add .btn { flex: 1; justify-content: center; }
}
/* Logistica · vista di tutti i progetti */
.lgo { display: grid; gap: 16px; }
.lgo-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lgo-days { display: grid; }
.lgo-day { padding: 10px 16px; border-top: 1px solid var(--border); }
.lgo-day:first-child { border-top: 0; }
.lgo-day.is-today { background: color-mix(in oklab, var(--accent) 60%, transparent); }
.lgo-d { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lgo-d b { text-transform: capitalize; }
.lgo-day ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lgo-i { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); line-height: 1.45; }
.lgo-i .icon { flex: none; margin-top: 3px; color: var(--muted-foreground); }
.lgo-i.k-nobed, .lgo-i.k-nobed .icon { color: var(--red); }
.lgo-it { flex: 1; min-width: 0; }
.lgo-p { flex: none; max-width: 40%; overflow: hidden; color: var(--primary-text); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.lgo-projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lgo-pc .card-h h3 { margin: 0; font-size: var(--fs-md); }
.lgo-pc .card-b { display: grid; gap: 8px; }
.lgo-m { display: grid; gap: 2px; font-size: var(--fs-sm); }
.lgo-m .lg-meter { margin-top: 2px; }
.lgo-top { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-sm); line-height: 1.4; }
.lgo-top li { display: flex; gap: 8px; } .lgo-top .dot { flex: none; margin-top: 5px; }
@media (max-width: 980px) { .lgo-grid { grid-template-columns: minmax(0, 1fr); } }

/* menu ⋯ nelle liste (Operation, progetto, logistica) */
.pl-table th.pl-more, .pl-table td.pl-more { width: 40px; padding-left: 0; padding-right: 6px; text-align: right; }
.more-btn { color: var(--muted-foreground); }
.more-btn:hover, .more-btn[aria-expanded="true"] { color: var(--foreground); background: var(--accent); }
.pipe-card { position: relative; }
.pipe-card + .card-more, .vc-wrap { position: relative; }
.vc-wrap .more-btn { position: absolute; top: 8px; right: 8px; z-index: 1; }
.vc-wrap .pipe-card { padding-right: 40px; }

/* ================================================================ portale della squadra nel gestionale (31/10/2026) */
.cp-b { display: grid; gap: 16px; }
.cp-link { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); }
.cp-lt { display: grid; gap: 2px; }
.cp-url { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-url input { flex: 1 1 260px; font-family: var(--font-mono); font-size: 12.5px; }
.cp-url select { flex: 0 1 auto; }
.cp-t td { vertical-align: top; }
.cp-lv { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 28px; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-perms { display: grid; gap: 10px; }
.cp-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--amber-bg); color: var(--amber); font-size: var(--fs-sm); }
.cp-warn svg { flex: none; margin-top: 2px; }
.cp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.cp-more summary { cursor: pointer; margin-top: 14px; color: var(--primary-text); font-weight: 550; font-size: var(--fs-sm); }
.cp-doc { max-height: 64vh; overflow: auto; padding: 4px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); font-size: 13px; line-height: 1.55; }
.cp-doc h2 { font-size: 16px; margin: 18px 0 6px; } .cp-doc h3 { font-size: 14px; margin: 14px 0 4px; }
.cp-doc table { border-collapse: collapse; width: 100%; } .cp-doc td, .cp-doc th { border: 1px solid var(--border); padding: 4px 6px; text-align: left; }
.cp-doc hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.cp-doc mark { background: var(--amber-bg); color: var(--amber); border-radius: 3px; padding: 0 3px; font-size: 11px; font-weight: 600; }
.cp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.mail-body { white-space: pre-wrap; font-size: 13px; line-height: 1.5; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); max-height: 46vh; overflow: auto; }
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--border); }
.notif:first-child { border-top: 0; }
.notif.unread { background: color-mix(in oklab, var(--accent) 55%, transparent); }
.notif .tx { flex: 1; min-width: 0; } .notif .tx b { display: block; } .notif .when { flex: none; color: var(--muted-foreground); font-size: var(--fs-sm); }
.bell { position: relative; }
.bell .badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--destructive); color: var(--destructive-foreground); font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; }
@media (max-width: 860px) { .cp-cols { grid-template-columns: 1fr; } }
.bell[hidden] { display: none; }

/* differenze dalla versione confermata (01/11/2026): voci nuove, cambiate, tolte; + e − sul totale; margine previsto contro attuale/finale */
.dpill { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.dpill:empty { display: none; }
.dpill.add { background: var(--green-bg); color: var(--green); }
.dpill.chg { background: var(--amber-bg); color: var(--amber); }
.dpill.del { background: var(--red-bg); color: var(--red); }
table.lines tr.diff-add > td:first-child { box-shadow: inset 3px 0 0 var(--green); }
table.lines tr.diff-chg > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.sub.dlt:empty { display: none; }
.dlt.up { color: var(--green); }
.dlt.down, .dlt.over { color: var(--red); }
tr.diff-del td { padding-top: 6px; padding-bottom: 6px; background: color-mix(in oklab, var(--red-bg) 45%, transparent); }
.del-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
.del-row .del-item { text-decoration: line-through; }
.del-row .num { margin-left: auto; color: var(--red); font-variant-numeric: tabular-nums; }
.qsum-top .qdelta { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted-foreground); }
.qsum-top .qdelta.up b { color: var(--green); }
.qsum-top .qdelta.down b { color: var(--red); }
.qcmp .card-h select { max-width: 190px; min-height: 28px; font-size: 12.5px; }
.qcmp .row s { color: var(--muted-foreground); }
.qcmp-int { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--cost-line); border-radius: var(--radius-sm); background: var(--cost-bg); }
.qcmp-ex .more-btn { margin-left: 4px; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cmp-grid .mcard .v.up { color: var(--green); }
.cmp-grid .mcard .v.down { color: var(--red); }

/* versione di questa copia (01/11/2026, app/versione.json): barra del backup archiviato, etichetta della copia di lavoro */
.release-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 8px 16px;
  background: var(--amber); color: #1d1a12; font-size: var(--fs-sm); text-align: center; position: relative; z-index: 60; }
.release-bar b { font-family: var(--font-display, inherit); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.release-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted-foreground); font-size: 11px; font-weight: 650; letter-spacing: 0.06em; white-space: nowrap; }
@media (max-width: 820px) { .release-tag { display: none; } }

/* note che si aprono e si richiudono (01/11/2026): ✕ per toglierle, riga della nota sotto la voce */
.note-x { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted-foreground); font-size: 12px; cursor: pointer; }
.note-x:hover { background: var(--accent); color: var(--foreground); }
.note-x[hidden] { display: none; }
.note-h { display: flex; align-items: center; gap: 6px; }
.note-h label { flex: 1; }
.item-note-row { display: flex; align-items: center; gap: 4px; }
.item-note-row.hidden { display: none; }
.item-note-row input.item-note { flex: 1; min-width: 0; }
.note-btn[hidden] { display: none; }

/* "aggiunte 2" (01/11/2026, Finance, anagrafiche e Impostazioni): azioni in più nel piede dei popup (Elimina…, Segna non incassato, Disattiva…) */
.modal .mf .m-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: auto; }
.modal .mf .btn.m-del { color: var(--red); }
.modal .mf .btn.m-del:hover { background-color: var(--red-bg); color: var(--red); }
.modal .mf .m-why { color: var(--amber); }
.modal .mf .m-why:empty { display: none; }
.tpl-list .loc-item { flex-wrap: wrap; }
@media (max-width: 560px) { .modal .mf .m-acts { flex-basis: 100%; } }

/* aggiunte con ritorno (01/11/2026, giro aggiunte-3: posta, candidati, allegati): conferma sul posto, candidato cliccabile, scartati richiusi */
.mail-ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: var(--fs-sm); }
.mail-ask[hidden] { display: none; }
.cand-main { min-width: 0; }
.cand-main[role="button"] { margin: -4px -6px; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.cand-main[role="button"]:hover { background: var(--accent); }
.cand-main[role="button"]:hover b { color: var(--primary-text); }
.cand.is-discarded .avatar { opacity: 0.55; }
.cand.is-discarded b { color: var(--muted-foreground); }
.cand-tog { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px 0; border: 0; background: none; color: var(--muted-foreground); font-size: var(--fs-sm); cursor: pointer; }
.cand-tog:hover { color: var(--foreground); }
@media (max-width: 560px) { .cand.cand-row { grid-template-columns: 32px 1fr; } .cand.cand-row > .row { grid-column: 2; } .cand.cand-row > .row:empty { display: none; } }
.att-acts { display: inline-flex; align-items: center; gap: 2px; }

/* ================================================================ aggiunte con via d'uscita (01/11/2026 · agente aggiunte-1: preventivi.js, progetto.js, actions.js) */
/* popup di modifica: "Elimina…" in fondo a sinistra, discreto (non pieno come la conferma); sparisce mentre chiede "Scartare le modifiche?" */
.mf .btn.m-act.danger { margin-right: auto; background-color: transparent; border-color: transparent; box-shadow: none; color: var(--red); }
.mf .btn.m-act.danger:hover { background-color: var(--red-bg); border-color: transparent; color: var(--red); }
.discard-ask:not([hidden]) ~ .m-act { display: none; }
.m-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
/* righe che si aprono con un clic (costi e incassi del progetto): anche da tastiera */
table.list tr.row-open:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
table.list tr.row-open:focus-visible > td { background: var(--row-hover); }
/* milestone: spunta + testo che apre il popup; ◆ della timeline cliccabile */
.ms-row { display: flex; align-items: center; gap: 8px; }
.ms-row input[type=checkbox] { flex: none; }
.ms-open { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; min-height: 32px; margin: 0 -8px 0 -4px; padding: 5px 8px; border: 0; border-radius: var(--radius-sm);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ms-open:hover { background: var(--accent); }
.ms-open:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.ms-open .ms-t { min-width: 0; overflow-wrap: anywhere; }
.ptl .ms-mk { inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; transform: none; background: none; color: var(--primary); font-family: inherit; cursor: pointer; }
.ptl .ms-mk:hover { background: var(--accent); }
.ptl .ms-mk:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
/* nota del diario: autore e ⋯ sulla stessa riga; il testo tiene gli a capo */
.feed .n-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin: -4px -6px 2px 0; }
.feed .n-t { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 820px) { .ms-open { min-height: 40px; } }

/* ================================================================ lavori e consegne (02/11/2026, js/pages/lavori.js) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -4px 0 22px; }
.wk-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.wk-filters button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px;
  border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--foreground-2);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.wk-filters button:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); }
.wk-filters button.on { background: var(--accent); border-color: var(--primary-line); color: var(--accent-foreground); font-weight: 600; }
.wk-n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.wk-filters button.on .wk-n { color: inherit; }
.wk-search { margin-left: auto; width: 240px; }
.wk-group { margin-bottom: 26px; }
.wk-gh { display: flex; align-items: flex-start; gap: 8px; margin: 0 2px 10px; }
.wk-gh h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.wk-gm { margin-top: 2px; font-size: 13px; color: var(--muted-foreground); }
.wk-gh .more-btn { margin-left: auto; }
.wk-group.is-archived .wk-gh h3 { color: var(--muted-foreground); }
.wk-list { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.wk-row { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.wk-row:first-child { border-top: 0; }
.wk-row:hover { background: var(--row-hover); }
.wk-check {
  flex: none; align-self: center; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 4px 0 16px; padding: 0;
  border: 1.5px solid var(--input); border-radius: 50%; background: var(--card); color: transparent; cursor: pointer;
}
.wk-check:hover { border-color: var(--green); color: var(--green); }
.wk-check[aria-pressed=true], .wk-check.is-ro:has(svg) { border-color: var(--green); background: var(--green); color: var(--card); }
.wk-check.is-ro { cursor: default; }
.wk-open {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 170px 112px 104px 16px; align-items: center; gap: 12px;
  padding: 13px 18px 13px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--foreground);
}
.wk-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-t { font-weight: 600; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.wk-row.is-done .wk-t { color: var(--muted-foreground); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.wk-s { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12.5px; color: var(--muted-foreground); }
.wk-s svg { vertical-align: -2px; margin-right: 3px; }
.wk-dot { color: var(--faint-foreground); }
.wk-wait { color: var(--amber); }
.wk-who { font-size: 13px; color: var(--foreground-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-who.is-none { color: var(--muted-foreground); font-style: italic; }
.wk-due { font-size: 13px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.3; }
.wk-due small, .wk-dg-d small { color: var(--red); font-weight: 600; font-size: 12px; }
.wk-row.is-late .wk-due { color: var(--red); }
.wk-late-t { color: var(--red); }
.wk-go { color: var(--faint-foreground); }
.wk-add { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.wk-add-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--primary-text); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.wk-add-btn:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); }
.wk-add-in { flex: 1; max-width: 560px; }
.wk-none { padding: 12px 4px; font-size: 13.5px; color: var(--muted-foreground); }
.wk-none-all { padding: 36px 16px; text-align: center; }
.wk-empty { max-width: 640px; }
.wk-empty h3 { margin: 4px 0 6px; font-size: 17px; }
.wk-empty p { margin: 0 0 16px; }
.wk-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* pannello del lavoro */
.wk-form { display: flex; flex-direction: column; gap: 14px; }
.wk-form .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wk-form .field > label { font-size: 12.5px; font-weight: 600; color: var(--foreground-2); display: flex; align-items: center; gap: 8px; }
.wk-form .field :is(input:not([type=checkbox], [type=radio]), select, textarea) { width: 100%; }
.wk-form input[type=checkbox], .wk-pick input[type=checkbox] { width: 17px; height: 17px; flex: none; }
.wk-form .field > .btn { align-self: flex-start; }
.wk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wk-two:has(> [data-olbox][hidden]) > .field:first-child { grid-column: 1 / -1; }   /* responsabile scelto: il nome a mano non serve */
.wk-seg { align-self: flex-start; flex-wrap: wrap; }
.wk-inline { display: flex; gap: 8px; } .wk-inline input { flex: 1; }
.wk-cl, .wk-att { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-cl li, .wk-att li { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 4px; border-radius: var(--radius-sm); }
.wk-cl li:hover, .wk-att li:hover { background: var(--row-hover); }
.wk-cl label { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--foreground); }
.wk-cl input:checked + span { color: var(--muted-foreground); text-decoration: line-through; }
.wk-att a { flex: 1; display: inline-flex; align-items: center; gap: 6px; }
.wk-meta { margin: 0; }
.wk-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.wk-foot .btn.danger { order: -1; margin-right: auto; }
/* dal preventivo */
.wk-pick { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; padding-right: 4px; }
.wk-pick fieldset { margin: 0; padding: 0; border: 0; }
.wk-pick legend { padding: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }
.wk-pick label { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 6px; border-radius: var(--radius-sm); cursor: pointer; }
.wk-pick label:hover { background: var(--row-hover); }
.wk-pick label.is-linked { color: var(--muted-foreground); cursor: default; }
.wk-pick small { margin-left: 6px; color: var(--green); font-weight: 600; }
/* riepilogo (Panoramica, home) */
.wk-dg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--foreground); }
.wk-dg:first-child { border-top: 0; }
.wk-dg:hover { background: var(--row-hover); text-decoration: none; }
.wk-dg-t { display: flex; flex-direction: column; min-width: 0; }
.wk-dg-t b { font-weight: 600; overflow-wrap: anywhere; }
.wk-dg-d { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-variant-numeric: tabular-nums; }
.wk-dg-d.is-late { color: var(--red); }
@media (max-width: 1100px) { .wk-open { grid-template-columns: minmax(0, 1fr) 140px 96px 100px 16px; } }
@media (max-width: 760px) {
  .wk-search { margin-left: 0; width: 100%; }
  .wk-open { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main st" "meta meta"; gap: 6px 10px; padding: 12px 14px 12px 8px; }
  .wk-main { grid-area: main; } .wk-st { grid-area: st; align-self: start; } .wk-go { display: none; }
  .wk-who, .wk-due { grid-row: 2; font-size: 12.5px; }
  .wk-who { grid-column: 1; } .wk-due { grid-column: 2; flex-direction: row; gap: 6px; justify-content: flex-end; }
  .wk-check { width: 26px; height: 26px; margin-left: 12px; }
  .wk-two { grid-template-columns: 1fr; }
  .wk-filters button { min-height: 38px; }
}

/* Impostazioni › Utenti e accessi (03/11/2026): tabella su schermo largo, schede impilate da telefono */
.us-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; color: var(--foreground); background: var(--amber-bg); border-color: transparent; }
.us-alert:hover { text-decoration: none; }
.us-alert .right { margin-left: auto; font-weight: 600; }
.us-table td { vertical-align: top; }
.us-sup .pill, .us-sups .pill { margin: 0 4px 4px 0; }
.us-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.us-pick { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.us-contacts { margin-bottom: 16px; }
.us-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 0; }
@media (max-width: 720px) {
  table.list.us-table thead { display: none; }
  table.list.us-table, table.list.us-table tbody, table.list.us-table tr, table.list.us-table td { display: block; width: 100%; }
  table.list.us-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  table.list.us-table td, table.list.us-table td:first-child, table.list.us-table td:last-child, table.list.us-table tr:hover td { padding: 0; border: 0; background: none; }
  table.list.us-table tr:hover { background: color-mix(in oklab, var(--foreground) 4%, transparent); }
  .us-table .us-who { grid-column: 1; }
  .us-table .us-st { grid-column: 2; grid-row: 1; text-align: right; }
  .us-table .us-lvl, .us-table .us-con, .us-table .us-sup, .us-table .us-seen { grid-column: 1 / -1; }
  .us-table .us-con:empty, .us-table .us-sup:has(> .muted:only-child) { display: none; }
}
table.list.us-table .us-st, table.list.us-table .us-lvl { white-space: nowrap; }
table.list.us-table .us-st .pill, table.list.us-table .us-lvl .pill { white-space: nowrap; }
@media (min-width: 641px) { table.list.us-table .us-who { min-width: 230px; } }

/* Telefono (03/11/2026, revisione mobile): tabelle a schede (ui/mobile.js mette data-label e .rt), pagina ferma sotto pannelli e finestre */
html.overlay-open, html.overlay-open body { overflow: hidden; }
.drawer-b, .modal, .sidebar { overscroll-behavior: contain; }
@media (max-width: 640px) {
  .table-wrap:has(> table.rt), .card.table-wrap:has(table.rt) { overflow-x: visible; }
  table.list.rt { min-width: 0; }
  table.list.rt thead { display: none; }
  table.list.rt, table.list.rt tbody, table.list.rt tfoot, table.list.rt tr { display: block; width: 100%; }
  table.list.rt tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  table.list.rt tbody tr:last-child { border-bottom: 0; }
  table.list.rt td, table.list.rt tr:hover td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 3px 0; border: 0; background: none; text-align: right; white-space: normal; }
  table.list.rt td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; color: var(--muted-foreground); font-size: 12px; font-weight: 500; text-align: left; }
  table.list.rt td[data-label=""]::before { content: none; }
  table.list.rt td:first-child { display: block; padding: 0 0 4px; text-align: left; font-weight: 600; }
  table.list.rt td:first-child::before { content: none; }
  table.list.rt td:empty, table.list.rt td.opt, table.list.rt td.opt2 { display: none; }
  table.list.rt td[colspan] { display: block; text-align: left; }
  table.list.rt td .pill { white-space: nowrap; }
  table.list.rt td > :is(.btn, button):only-child { margin-left: auto; }
  table.list.rt tfoot tr { border-top: 1px solid var(--border); }
  .card-h { flex-wrap: wrap; row-gap: 4px; }
  table.list td .pill { white-space: nowrap; }   /* tabelle che restano a colonne (scorrono di lato): niente etichette spezzate lettera per lettera */
  .tabs-seg { flex-wrap: wrap; max-width: 100%; }
  table.list.rt td > select { max-width: 60%; }
}

/* Barra delle liste (04/11/2026): Filtri, ricerca, Elenco/Schede, Ordina; sotto risultati e filtri applicati. Fornitori e crew, Utenti e accessi */
.lb { margin-bottom: 8px; }
.lb-row { position: relative; display: flex; align-items: center; gap: 8px; }
.lb-anchor { position: relative; flex: none; }
.lb-f .icon { margin-right: 6px; }
.lb-s .icon { margin-left: 6px; }
.lb-q { flex: 1 1 auto; width: auto; min-width: 0; height: 36px; }
.lb-view, .lb-s { flex: none; }
.lb-view button { --h: 28px; }
.lb-n { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 600; }
.lb-n[hidden] { display: none; }
.lb-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 25; width: min(520px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); box-shadow: var(--shadow-lg); animation: pop var(--dur-2) var(--ease); }
.lb-pop[hidden] { display: none; }
.lb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.lb-fld { display: grid; gap: 4px; min-width: 0; color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 600; }
.lb-fld select { width: 100%; min-width: 0; color: var(--foreground); font-size: 13px; font-weight: 400; }
.lb-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.lb-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; margin-bottom: 8px; color: var(--muted-foreground); font-size: 12px; }
.lb-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.lb-order { margin-left: auto; }
.lb-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 6px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--accent); color: var(--foreground); font: inherit; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.lb-tag:hover { border-color: var(--input); }
.lb-clear { padding: 0 2px; border: 0; background: none; color: var(--primary-text); font: inherit; cursor: pointer; }
.lb-clear:hover { text-decoration: underline; }
/* Selettore: Tutti/Persone/Società e tipologie (o stati degli utenti), sempre a vista */
.rb-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.rb-sel > .tabs-seg { flex: none; }
.rb-chips { flex: 1 1 auto; min-width: 0; align-items: center; }
.rb-chips .chip { min-height: 30px; padding: 0 11px; font-size: 13px; }
.rb-chips .chip .muted { margin-left: 3px; }
.rb-chips .chip.on .muted { color: inherit; opacity: .8; }
table.list .rb-type { font-size: 13px; }
.rb-acc { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--green-bg); color: var(--green); font-size: 11px; font-weight: 550; line-height: 16px; vertical-align: 1px; }
.rb-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 24px; }
/* Schede */
.rb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rb-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rb-card:hover { border-color: var(--input); background: color-mix(in oklab, var(--foreground) 3%, var(--card)); text-decoration: none; }
.rb-card .t-sub { font-size: 12px; color: var(--muted-foreground); }
.rb-c-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rb-c-who { flex: 1 1 auto; min-width: 0; }
.rb-c-name { font-weight: 550; overflow-wrap: anywhere; }
.rb-c-top > .pill, .rb-c-top > .rb-acc { flex: none; align-self: flex-start; }
.rb-c-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 12px; }
.rb-c-nums b { margin-left: 3px; color: var(--foreground); font-weight: 550; font-variant-numeric: tabular-nums; }
.us-mail { overflow-wrap: anywhere; }
.us-c-end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; margin-left: auto; }
@media (max-width: 640px) {
  .lb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "f v s" "q q q"; }
  .lb-anchor { position: static; grid-area: f; }
  .lb-view { grid-area: v; justify-self: center; flex-wrap: nowrap; }
  .lb-s { grid-area: s; }
  .lb-q { grid-area: q; width: 100%; height: auto; min-height: 44px; font-size: 16px; }
  .lb-view button { --h: 38px; padding-inline: 10px; }
  .lb-pop { top: 46px; right: 0; width: auto; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
  .lb-fld select { min-height: 44px; font-size: 16px; }
  .lb-foot .btn { --h: 40px; }
  .lb-tag, .lb-clear { min-height: 32px; }
  .rb-sel > .tabs-seg { flex: 1 1 100%; flex-wrap: nowrap; }
  .rb-sel > .tabs-seg button { flex: 1; justify-content: center; }
  .rb-chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: none; }
  .rb-chips .chip { flex: 0 0 auto; min-height: 40px; }
  .rb-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .lb-f .icon { display: none; }
  .lb-view button { padding-inline: 7px; font-size: 13px; }
  .lb-f, .lb-s { padding-inline: 8px; }
}

/* Impostazioni divise in voci (04/11/2026) */
.set-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.set-page > .set-wide { grid-column: 1 / -1; }
.group-tabs { margin-bottom: 16px; }
@media (max-width: 1100px) { .set-page { grid-template-columns: minmax(0, 1fr); } }