@font-face{
  font-family:'Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/plexsans-var.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/plexmono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/plexmono-500.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/plexmono-600.woff2') format('woff2');
}

:root{
  --bg:#eef1ee;
  --surface:#ffffff;
  --surface-2:#e3e7e3;
  --surface-3:#d3d9d3;
  --border:#c8cec8;
  --text:#1a201d;
  --text-muted:#5c655e;
  --accent:#24417e;
  --accent-strong:#1a3164;
  --accent-soft:#dfe6f3;
  --accent-contrast:#ffffff;
  --done:#2f7a52;
  --done-soft:#dfeee5;
  --danger:#a4402e;
  --danger-soft:#f3ddd7;
  --warn:#93630f;
  --warn-soft:#f2e6cd;
  --shadow:0 1px 2px rgba(20,25,20,.07), 0 8px 24px rgba(20,25,20,.09);
  --p1:#24417e; --p2:#b5502e; --p3:#5c7a34; --p4:#7a4f8a; --p5:#1f7a76; --p6:#a8791a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181a;
    --surface:#1b2224;
    --surface-2:#232b2d;
    --surface-3:#2c3638;
    --border:#374244;
    --text:#e8ece9;
    --text-muted:#99a6a1;
    --accent:#8aabe8;
    --accent-strong:#a9c3f2;
    --accent-soft:rgba(138,171,232,.16);
    --accent-contrast:#0d1420;
    --done:#6ac393;
    --done-soft:rgba(106,195,147,.14);
    --danger:#e2896f;
    --danger-soft:rgba(226,137,111,.14);
    --warn:#e0b25e;
    --warn-soft:rgba(224,178,94,.16);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --p1:#8aabe8; --p2:#e2916b; --p3:#a2c26b; --p4:#c298d6; --p5:#63c7c1; --p6:#e0b25e;
  }
}
:root[data-theme="dark"]{
  --bg:#14181a;
  --surface:#1b2224;
  --surface-2:#232b2d;
  --surface-3:#2c3638;
  --border:#374244;
  --text:#e8ece9;
  --text-muted:#99a6a1;
  --accent:#8aabe8;
  --accent-strong:#a9c3f2;
  --accent-soft:rgba(138,171,232,.16);
  --accent-contrast:#0d1420;
  --done:#6ac393;
  --done-soft:rgba(106,195,147,.14);
  --danger:#e2896f;
  --danger-soft:rgba(226,137,111,.14);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --p1:#8aabe8; --p2:#e2916b; --p3:#a2c26b; --p4:#c298d6; --p5:#63c7c1; --p6:#e0b25e;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'Plex Mono', ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric:tabular-nums; }
h1,h2,h3{ text-wrap:balance; margin:0; }
button, select, input{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

.wrap{ max-width:1280px; margin:0 auto; padding:20px 20px 64px; }

/* ---- App shell: persistent sidebar (nav-ui.js) ---- */
#appShell[hidden]{ display:none !important; }
#appShell{ display:flex; align-items:stretch; min-height:100vh; }
#mainContent{ flex:1; min-width:0; }
.app-sidebar{
  flex:none; width:220px; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh; overflow:hidden;
  transition:width .16s ease;
}
.app-sidebar.collapsed{ width:64px; }
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:18px 16px; white-space:nowrap; flex:none; }
.sidebar-brand-mark{ width:26px; height:26px; flex:none; border-radius:6px; }
.sidebar-brand-text{ font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.app-sidebar.collapsed .sidebar-brand-text{ display:none; }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; padding:6px 10px; flex:1; overflow-y:auto; }
.sidebar-nav-item{
  display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:9px; border:none;
  background:none; color:var(--text-muted); font-size:.88rem; font-weight:600; white-space:nowrap;
  text-align:left; width:100%;
}
.sidebar-nav-item svg{ width:19px; height:19px; flex:none; }
.sidebar-nav-item:hover{ background:var(--surface-2); color:var(--text); }
.sidebar-nav-item.active{ background:var(--accent-soft); color:var(--accent-strong); }
.app-sidebar.collapsed .sidebar-nav-item{ justify-content:center; padding:10px; }
.app-sidebar.collapsed .sidebar-nav-item span{ display:none; }
.sidebar-collapse-btn{
  flex:none; margin:8px 10px 14px; padding:9px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); display:flex; align-items:center; justify-content:center;
}
.sidebar-collapse-btn:hover{ color:var(--text); border-color:var(--text-muted); }
.sidebar-collapse-btn svg{ width:15px; height:15px; transition:transform .16s ease; }
.app-sidebar.collapsed .sidebar-collapse-btn svg{ transform:rotate(180deg); }
@media (max-width:700px){
  .app-sidebar{ width:64px; }
  .app-sidebar .sidebar-brand-text, .app-sidebar .sidebar-nav-item span{ display:none; }
  .app-sidebar.collapsed{ width:64px; }
}

/* ---- App gating (hidden until authenticated) ---- */
#appRoot[hidden]{ display:none !important; }

/* ---- Read-only mode (viewer share) ---- */
#appRoot.readonly #openAddZone,
#appRoot.readonly #openImportHub,
#appRoot.readonly #openImportUrls,
#appRoot.readonly #resetAll,
#appRoot.readonly .item-del,
#appRoot.readonly .item-edit,
#appRoot.readonly .item-copy,
#appRoot.readonly .cat-icon-btn,
#appRoot.readonly .subcat-icon-btn,
#appRoot.readonly .add-subcat-btn,
#appRoot.readonly .cat-reorder,
#appRoot.readonly .subcat-drag-handle,
#appRoot.readonly .item-drag-handle,
#appRoot.readonly .add-phase,
#appRoot.readonly .sp-toolbar,
#appRoot.readonly .sp-url-row,
#appRoot.readonly #addOfferForm,
#appRoot.readonly [data-select-offer],
#appRoot.readonly .phase-chip .del{ display:none !important; }
#appRoot.readonly .chk,
#appRoot.readonly .phase-select,
#appRoot.readonly .qty-btn,
#appRoot.readonly .qty-num-input{ pointer-events:none; opacity:.55; }
#appRoot.readonly .phase-chip input.rename{ pointer-events:none; }

/* ---- Back-to-projects + project name + role pill ---- */
.project-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:2px; }
.project-bar .account-chip{ margin-left:auto; }
.back-btn{
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); background:var(--surface);
  border-radius:99px; padding:5px 12px 5px 10px; font-size:.8rem; font-weight:600; color:var(--text-muted); flex:none;
}
.back-btn:hover{ color:var(--text); border-color:var(--text-muted); }
.back-btn svg{ width:14px; height:14px; }
.project-name-label{ font-size:.86rem; font-weight:600; color:var(--text-muted); }
.role-pill{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 9px; border-radius:99px; flex:none;
}
.role-pill[hidden]{ display:none; }
.role-pill.role-editor{ background:var(--accent-soft); color:var(--accent-strong); }
.role-pill.role-viewer{ background:var(--warn-soft); color:var(--warn); }

/* ---- Header ---- */
.page-header{
  display:flex; flex-direction:column; gap:16px;
  padding-bottom:18px; margin-bottom:20px;
  border-bottom:1px solid var(--border);
}
.title-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.title-block h1{ font-size:1.7rem; font-weight:700; letter-spacing:-.01em; }
.title-block p{ margin:.3rem 0 0; color:var(--text-muted); font-size:.92rem; max-width:56ch; }
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin:0 0 4px;
}

/* ---- Wordmark, fissa in cima all'header su ogni tab (non solo "Piano acquisti") ---- */
.app-brand-row{ display:flex; align-items:center; gap:9px; }
.app-brand-row .mark{ width:26px; height:26px; border-radius:7px; flex:none; overflow:hidden; display:flex; }
.app-brand-row .mark img{ width:100%; height:100%; display:block; }
.app-brand-name{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }

/* ---- Account chip ---- */
.account-chip{
  display:flex; align-items:center; gap:10px; flex:none; padding:6px 6px 6px 12px;
  border:1px solid var(--border); background:var(--surface); border-radius:99px; box-shadow:var(--shadow);
}
.account-chip .email{ font-size:.78rem; color:var(--text-muted); max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chip .sync-dot{ width:7px; height:7px; border-radius:50%; background:var(--surface-3); flex:none; transition:background .2s ease; }
.account-chip .sync-dot.saving{ background:var(--warn); }
.account-chip .sync-dot.saved{ background:var(--done); }
.account-chip .sync-dot.error{ background:var(--danger); }
.account-chip button{
  border:1px solid var(--border); background:var(--surface-2); border-radius:99px; padding:5px 11px;
  font-size:.76rem; font-weight:600; color:var(--text);
}
.account-chip button:hover{ border-color:var(--text-muted); }
.account-type-pill{
  background:var(--accent-soft); color:var(--accent-strong); border-color:transparent;
}
.account-type-pill[hidden]{ display:none; }
.account-type-pill:hover{ background:var(--accent-soft); border-color:var(--accent); }

/* Fase 1: qualunque elemento marcato .pro-only è visibile solo per account_type "pro" —
   spento di default (nessun elemento lo usa ancora: il markup/margine reale arriva in Fase 2,
   qui si prepara solo il meccanismo). body.account-pro viene impostato in js/auth-ui.js dopo
   aver letto il profilo dell'utente loggato. */
.pro-only{ display:none; }
body.account-pro .pro-only{ display:revert; }
/* [hidden] deve sempre vincere su .pro-only, anche per un account pro — altrimenti un tab
   spento via JS (view !== "estimates") resta visibile lo stesso perché display:revert ha
   specificità maggiore della regola [hidden] dello user-agent stylesheet. Stesso bug di
   cascata già visto con .cat-summary-actions — qui la correzione è una regola con [hidden]
   nel selettore, che batte "body.account-pro .pro-only" a prescindere dall'ordine nel file. */
body.account-pro .pro-only[hidden]{ display:none; }
/* Stesso bug di cascata, altra direzione: .sidebar-nav-item ha un proprio display:flex (per
   allineare icona e testo), ma "display:revert" su un <button> non ripristina flex — torna al
   default dello user-agent per <button>, cioè inline-block. Icona e testo restavano quindi
   layout inline invece che in riga con gap, con lo spazio tra i due ridotto al solo spazio
   bianco del sorgente HTML: ecco perché "Preventivi"/"Fatture"/"Clienti" (tutti .pro-only)
   avevano testo più vicino all'icona di "Progetti" (che non è .pro-only e quindi non subisce
   mai il "revert"). Serve più specificità di "body.account-pro .pro-only" per vincere. */
body.account-pro .sidebar-nav-item.pro-only{ display:flex; }

/* ---- Progress hero ---- */
.progress-hero{
  display:flex; align-items:center; gap:18px; padding:14px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
}
.progress-ring-wrap{ position:relative; width:72px; height:72px; flex:none; }
.progress-ring{ width:100%; height:100%; transform:rotate(-90deg); }
.progress-ring .ring-bg{ fill:none; stroke:var(--surface-3); stroke-width:9; }
.progress-ring .ring-fill{
  fill:none; stroke:var(--done); stroke-width:9; stroke-linecap:round;
  transition:stroke-dasharray .4s ease;
}
.progress-ring-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Plex Mono', monospace; font-weight:700; font-size:1.05rem;
}
.progress-hero-text{ flex:1; min-width:0; }
.progress-hero-title{ font-size:1.05rem; font-weight:700; }
.progress-hero-sub{ font-size:.82rem; color:var(--text-muted); margin-top:3px; line-height:1.5; }
.progress-hero-money{
  flex:none; display:flex; gap:20px; padding-left:18px; border-left:1px solid var(--border);
}
.phm-item{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.phm-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.phm-amount{ font-size:1.05rem; font-weight:700; font-variant-numeric:tabular-nums; }
.phm-caveat{ flex-basis:100%; text-align:right; font-size:.7rem; color:var(--text-muted); margin-top:2px; }
@media (max-width:700px){
  .progress-hero{ flex-wrap:wrap; }
  .progress-hero-money{ flex-basis:100%; border-left:none; border-top:1px solid var(--border); padding:10px 0 0; margin-top:2px; justify-content:space-between; }
  .phm-item{ align-items:flex-start; }
  .phm-caveat{ text-align:left; }
}
@media (max-width:480px){
  .progress-hero{ gap:14px; padding:12px 14px; }
  .progress-ring-wrap{ width:58px; height:58px; }
  .progress-ring-label{ font-size:.86rem; }
  .progress-hero-title{ font-size:.92rem; }
  .phm-amount{ font-size:.92rem; }
}

/* ---- Phase manager ---- */
.phase-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.phase-chip{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--border); background:var(--surface);
  border-radius:99px; padding:5px 6px 5px 12px;
  box-shadow:var(--shadow);
}
.phase-chip.active{ border-color:var(--chip-c); background:var(--accent-soft); }
.phase-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--chip-c); flex:none; }
.phase-chip button.select{
  background:none; border:none; padding:0; font-weight:600; font-size:.86rem; color:var(--text);
}
.phase-chip input.rename{
  background:none; border:none; font-weight:600; font-size:.86rem; color:var(--text);
  width:7ch; padding:0;
}
.phase-chip input.rename:focus{ outline:none; border-bottom:1px dashed var(--accent); }
.phase-chip .count{ font-size:.74rem; color:var(--text-muted); font-family:'Plex Mono',monospace; }
.phase-chip .del{
  width:20px; height:20px; border-radius:50%; border:none; background:transparent;
  color:var(--text-muted); font-size:.85rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.phase-chip .del:hover{ background:var(--danger-soft); color:var(--danger); }
.phase-chip .del.confirm{ background:var(--danger); color:#fff; font-size:.65rem; width:auto; padding:0 8px; border-radius:99px; }
.unassigned-chip{ border-color:var(--border); }
.unassigned-chip .dot{ background:var(--text-muted); }
.add-phase{
  border:1px dashed var(--border); background:transparent; border-radius:99px;
  padding:6px 14px; font-size:.86rem; font-weight:600; color:var(--text-muted);
}
.add-phase:hover{ border-color:var(--accent); color:var(--accent); }

.toolbar{ display:flex; flex-direction:column; gap:10px; margin:0 0 16px; }
.search{
  border:1px solid var(--border); background:var(--surface); border-radius:8px;
  padding:9px 12px; font-size:.86rem; width:100%;
}
.toolbar-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.toolbar-actions #resetAll{ margin-left:auto; }
@media (max-width:600px){
  .toolbar-actions #resetAll{ margin-left:0; }
}
.text-btn{
  background:none; border:1px solid var(--border); border-radius:8px; padding:6px 11px;
  font-size:.8rem; color:var(--text-muted); font-weight:600;
}
.text-btn:hover{ color:var(--text); border-color:var(--text-muted); }
.text-btn.danger-hover:hover{ color:var(--danger); border-color:var(--danger); }
.text-btn.confirm{ background:var(--danger); color:#fff; border-color:var(--danger); }

/* ---- Tag filter bar & per-item tag chips ---- */
.tag-filter-bar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 14px; }
.tag-filter-bar[hidden]{ display:none; }
.tag-filter-label{ font-size:.74rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; margin-right:2px; }
.tag-chip{
  display:inline-flex; align-items:center; border:1px solid var(--border); background:var(--surface);
  border-radius:99px; padding:4px 11px; font-size:.78rem; font-weight:600; color:var(--text-muted);
}
.tag-chip:hover{ color:var(--text); border-color:var(--text-muted); }
.tag-chip.active{ border-color:var(--warn); background:var(--warn-soft); color:var(--warn); }
.tag-chip-clear{ border-style:dashed; font-weight:500; }
.tag-chip-clear:hover{ color:var(--danger); border-color:var(--danger); }
.tag-chip-sm{ padding:1px 8px; font-size:.68rem; border-radius:6px; }

.item-tags-line{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }

/* ---- Layout ----
   summary (#summaryPanel) e help ("Come funziona") stanno insieme in un unico blocco sticky
   (.layout-aside) invece di essere due grid-area separate nella stessa colonna con solo
   #summaryPanel sticky: la riga "summary" si dimensiona sul SUO contenuto (spesso corto), quindi
   lo spazio utile perché restasse "incollato" scorrendo finiva presto, e il pannello successivo
   ("help", riga a parte) poteva ritrovarsi scavalcato dal riepilogo ancora in movimento — il bug
   segnalato dall'utente. Un solo blocco sticky lo evita del tutto: quel che scorre, scorre
   insieme, non c'è più un confine di riga a metà tra i due pannelli. */
/* #purchasePlanView raggruppa titolo, anello di avanzamento, fasi e il grid vero e proprio
   (.layout) sotto un unico contenitore, cosi tab di progetto (js/app.js) lo nascondono/mostrano
   tutto insieme con un solo hidden — niente di "Piano acquisti" resta visibile sugli altri tab. */
#purchasePlanView{ display:flex; flex-direction:column; gap:16px; }
/* #purchasePlanView ha un display:flex proprio, che batte sempre il default [hidden] dello
   user-agent (le regole d'autore vincono sempre su quelle UA, a prescindere da
   specificità/ordine) — serve una regola esplicita che forzi display:none quando è spento,
   altrimenti il piano acquisti resta visibile sotto gli altri tab. Stesso bug di cascata già
   visto con .pro-only qui sopra. */
#purchasePlanView[hidden]{ display:none; }
.layout{
  display:grid; grid-template-columns:1fr 360px; grid-template-areas:"main aside";
  gap:22px; align-items:start;
}
.layout main{ grid-area:main; min-width:0; }
.layout .layout-aside{
  grid-area:aside; position:sticky; top:20px; align-self:start;
  display:flex; flex-direction:column; gap:12px;
}
@media (max-width:1040px){ .layout{ grid-template-columns:1fr 300px; gap:16px; } }
@media (max-width:700px){
  .layout{ grid-template-columns:1fr; grid-template-areas:"aside" "main"; }
  .layout .layout-aside{ position:static; }
}

#catalog{ container-type:inline-size; container-name:catalog; }
.add-zone-bottom{ display:flex; width:100%; justify-content:center; border-style:dashed; }

/* ---- Catalog ---- */
.cat{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  margin-bottom:18px; overflow:hidden; box-shadow:var(--shadow);
}
.cat.dragging{ opacity:.4; }
.cat-reorder{ display:flex; align-items:center; gap:2px; flex:none; }
.cat-drag-handle{
  width:20px; height:28px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); cursor:grab; border-radius:6px;
}
.cat-drag-handle:hover{ background:var(--surface); color:var(--text); }
.cat-drag-handle:active{ cursor:grabbing; }
.cat-drag-handle svg{ width:14px; height:14px; }
.cat-move-btn{
  width:20px; height:20px; border-radius:5px; border:1px solid transparent; background:transparent;
  color:var(--text-muted); display:flex; align-items:center; justify-content:center;
}
.cat-move-btn:hover{ background:var(--surface); color:var(--text); }
.cat-move-btn svg{ width:12px; height:12px; }
@media (max-width:700px){
  /* Up/down buttons are the reliable path on touch (HTML5 drag doesn't work there);
     keep the handle visible too since some mobile browsers do support it via long-press. */
  .cat-move-btn{ width:24px; height:24px; }
}
.cat > summary{
  list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface-2);
}
.cat > summary::-webkit-details-marker{ display:none; }
.cat > summary .chev{ transition:transform .15s ease; color:var(--text-muted); flex:none; }
.cat[open] > summary .chev{ transform:rotate(90deg); }
/* Titolo/espandi (sempre visibile, si restringe per primo) e riordino/rinomina/elimina
   (dimensione fissa, va a capo per primo su schermi stretti — vedi la media query più sotto)
   in due gruppi separati, invece di sei-sette elementi sciolti fianco a fianco. */
.cat-summary-main{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.cat-summary-actions{ display:flex; align-items:center; gap:4px; flex:none; }
.cat-heading{ flex:1; min-width:0; }
.cat-heading h2{ font-size:1rem; font-weight:600; text-wrap:pretty; }
.cat-num{
  display:inline-flex; align-items:center; justify-content:center; font-family:'Plex Mono',monospace;
  font-size:.72rem; font-weight:600; color:var(--text-muted); background:var(--surface);
  border:1px solid var(--border); border-radius:5px; width:19px; height:19px; margin-right:7px;
  vertical-align:2px;
}
.cat-heading .meta{ font-size:.78rem; color:var(--text-muted); margin-top:2px; }
.cat-count{
  font-family:'Plex Mono',monospace; font-size:.76rem; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:3px 9px; flex:none;
}
.cat-icon{
  flex:none; width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.cat-icon svg{ width:18px; height:18px; }
.cat-icon-btn{
  flex:none; width:26px; height:26px; border-radius:7px; border:1px solid transparent; background:transparent;
  color:var(--text-muted); display:flex; align-items:center; justify-content:center;
}
.cat-icon-btn svg{ width:14px; height:14px; }
.cat-icon-btn:hover{ background:var(--accent-soft); color:var(--accent); }
.cat-icon-btn.confirm{ width:auto; padding:0 8px; font-size:.65rem; font-weight:700; color:#fff; background:var(--danger); border-color:var(--danger); }
.cat-icon-btn.confirm:hover{ background:var(--danger); color:#fff; }
.cat-rename-input{
  font-size:1rem; font-weight:600; color:var(--text); background:none; border:none; border-bottom:1px dashed var(--accent);
  padding:0 0 1px; width:100%; max-width:280px; cursor:text;
}
.cat-rename-input:focus{ outline:none; }
.cat-body{ padding:6px 18px 16px; }
.cat-note{
  font-size:.8rem; color:var(--text-muted); background:var(--surface-2); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:8px 12px; margin:10px 0 4px;
}

.group{ margin-top:14px; border-radius:8px; transition:background-color .1s ease; }
.group.dragging{ opacity:.4; }
.group.drag-target{ background:var(--accent-soft); outline:2px dashed var(--accent); outline-offset:2px; }
.group h3{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
  padding-bottom:6px; border-bottom:1px solid var(--border); margin-bottom:2px;
}
/* Stesso principio di .cat-summary-main/.cat-summary-actions: nome a sinistra (si restringe
   per primo), rinomina/elimina a destra (dimensione fissa, va a capo per prima su mobile). */
.subcat-head-main{ display:flex; align-items:center; gap:4px; flex:1; min-width:0; }
.subcat-head-actions{ display:flex; align-items:center; gap:2px; flex:none; }
.subcat-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Va DOPO le regole base .cat-summary-actions/.subcat-head-actions qui sopra (stessa
   specificità: una media query prima nel file perde comunque contro una regola successiva
   non condizionale) — flex-basis:100% le forza a capo su una riga propria, sotto al
   titolo/nome invece di schiacciarlo sugli schermi stretti. */
@media (max-width:700px){
  .cat-summary-actions{
    flex-basis:100%; justify-content:flex-end;
    padding-top:8px; border-top:1px dashed var(--border);
  }
  .subcat-head-actions{ flex-basis:100%; justify-content:flex-end; margin-top:4px; }
}
.group-toggle{
  flex:none; width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); border-radius:4px;
}
.group-toggle:hover{ background:var(--surface-2); color:var(--text); }
.group-toggle .chev{ transition:transform .15s ease; }
.group:not(.collapsed) .group-toggle .chev{ transform:rotate(90deg); }
.group.collapsed .group-items{ display:none; }
.group.collapsed{ margin-top:8px; }
.subcat-drag-handle{
  flex:none; width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); cursor:grab; border-radius:4px; margin-right:2px;
}
.subcat-drag-handle:hover{ background:var(--surface-2); color:var(--text); }
.subcat-drag-handle:active{ cursor:grabbing; }
.subcat-drag-handle svg{ width:12px; height:12px; }
.cat-body.drag-target{ background:var(--accent-soft); border-radius:10px; outline:2px dashed var(--accent); outline-offset:-2px; }
.cat > summary.drag-target{ background:var(--accent-soft); }
.subcat-icon-btn{
  flex:none; width:20px; height:20px; border-radius:5px; border:1px solid transparent; background:transparent;
  color:var(--text-muted); display:flex; align-items:center; justify-content:center; text-transform:none; letter-spacing:normal;
}
.subcat-icon-btn svg{ width:11px; height:11px; }
.subcat-icon-btn:hover{ background:var(--accent-soft); color:var(--accent); }
.subcat-icon-btn.confirm{ width:auto; padding:0 6px; font-size:.62rem; font-weight:700; color:#fff; background:var(--danger); border-color:var(--danger); }
.subcat-icon-btn.confirm:hover{ background:var(--danger); color:#fff; }
.subcat-rename-input{
  flex:1; min-width:0; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text); background:none; border:none; border-bottom:1px dashed var(--accent); padding:0 0 1px; cursor:text;
}
.subcat-rename-input:focus{ outline:none; }
.add-subcat-btn{
  display:block; margin-top:10px; border:1px dashed var(--border); background:transparent; border-radius:8px;
  padding:6px 12px; font-size:.76rem; font-weight:600; color:var(--text-muted);
}
.add-subcat-btn:hover{ border-color:var(--accent); color:var(--accent); }
.cat-body-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-body-actions .add-subcat-btn{ margin-top:10px; }
.group .add-subcat-btn{ margin-top:8px; font-size:.72rem; padding:5px 10px; }

.item-row{
  display:flex; align-items:flex-start; gap:12px; padding:13px 6px;
  border-bottom:1px solid var(--border); border-left:3px solid transparent;
}
.item-row .chk, .item-row .item-icon{ margin-top:1px; }
.item-row:last-child{ border-bottom:none; }
.item-row.done{ opacity:.55; }
.item-row.assigned{ border-left-color:var(--row-c, transparent); }
.item-row.dragging{ opacity:.4; }
.item-drag-handle{
  flex:none; width:16px; height:20px; margin-top:2px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); cursor:grab; border-radius:4px;
}
.item-drag-handle:hover{ background:var(--surface-2); color:var(--text); }
.item-drag-handle:active{ cursor:grabbing; }
.item-drag-handle svg{ width:13px; height:13px; }
.item-drag-handle.placeholder{ visibility:hidden; cursor:default; }

.chk{ position:relative; flex:none; width:20px; height:20px; }
.chk input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.chk .box{
  width:20px; height:20px; border-radius:5px; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; background:var(--surface);
}
.chk input:checked + .box{ background:var(--done); border-color:var(--done); }
.chk .box svg{ width:12px; height:12px; opacity:0; }
.chk input:checked + .box svg{ opacity:1; }

/* item-main groups everything to the right of icon+checkbox; row on desktop, column on phone */
.item-main{ flex:1; min-width:0; display:flex; align-items:center; gap:14px; }
.item-info{ flex:1; min-width:0; }
.item-name{ display:block; font-size:.92rem; font-weight:500; line-height:1.4; }
.item-row.done .item-name{ text-decoration:line-through; text-decoration-color:var(--text-muted); }
.item-dim{ display:block; font-size:.8rem; color:var(--text-muted); margin-top:2px; line-height:1.4; font-variant-numeric:tabular-nums; }

.item-controls{ flex:none; min-width:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.item-qtyprice{ display:flex; align-items:baseline; gap:6px 10px; flex:1 1 auto; min-width:0; flex-wrap:wrap; }
.item-qty{ flex:none; min-width:44px; text-align:right; font-size:.82rem; font-weight:500; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.item-qty .unit{ color:var(--text-muted); font-weight:400; margin-left:3px; }
.qty-stepper{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:7px; overflow:hidden; }
.qty-btn{
  width:20px; height:20px; border:none; background:var(--surface-2); color:var(--text-muted);
  font-size:.85rem; line-height:1; display:flex; align-items:center; justify-content:center; font-weight:600;
}
.qty-btn:hover{ background:var(--accent-soft); color:var(--accent); }
.qty-num{ min-width:22px; text-align:center; font-variant-numeric:tabular-nums; }
.qty-num-input{
  width:34px; min-width:34px; text-align:center; border:none; background:transparent; color:inherit;
  font-size:inherit; font-family:inherit; font-variant-numeric:tabular-nums; padding:0;
  -moz-appearance:textfield;
}
.qty-num-input:focus{ background:var(--accent-soft); }
.qty-num-input::-webkit-outer-spin-button, .qty-num-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.phase-select{
  flex:none; width:150px; border:1px solid var(--border); background:var(--surface);
  border-radius:7px; padding:6px 8px; font-size:.8rem;
}
.phase-select.unset{ color:var(--text-muted); }

/* Item rows respond to the catalog column's own width, not the viewport — this keeps them
   compact both on phones (1-col layout) and on tablets (2-col layout, narrower column). */
@container catalog (max-width:660px){
  .item-main{ flex-direction:column; align-items:stretch; gap:8px; }
  .item-controls{ justify-content:space-between; }
  .item-qty{ text-align:left; min-width:0; }
  .chk, .chk .box{ width:26px; height:26px; }
}
@container catalog (max-width:360px){
  .phase-select{ width:120px; font-size:.76rem; }
}
@supports not (container-type: inline-size){
  @media (max-width:760px){
    .item-main{ flex-direction:column; align-items:stretch; gap:8px; }
    .item-controls{ justify-content:space-between; }
    .item-qty{ text-align:left; min-width:0; }
    .chk, .chk .box{ width:26px; height:26px; }
  }
  @media (max-width:400px){ .phase-select{ width:120px; font-size:.76rem; } }
}

/* ---- Sidebar ---- */
.sidebar{ display:flex; flex-direction:column; gap:12px; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.panel-head{ padding:14px 16px; border-bottom:1px solid var(--border); }
.panel-head h2{ font-size:.95rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.panel-head .dot{ width:9px; height:9px; border-radius:50%; background:var(--chip-c,var(--text-muted)); }
.panel-head .sub{ font-size:.78rem; color:var(--text-muted); margin-top:3px; }
.panel-body{ padding:6px 16px 14px; max-height:52vh; overflow-y:auto; }
.panel-empty{ padding:22px 6px; text-align:center; color:var(--text-muted); font-size:.85rem; }

.agg-group{ margin-top:12px; }
.agg-group h4{
  font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
  margin:0 0 4px;
}
.agg-row{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.agg-row .chk{ margin-top:2px; }
.agg-icon{
  flex:none; width:32px; height:32px; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  overflow:hidden; margin-top:1px;
}
.agg-icon svg{ width:17px; height:17px; }
.agg-icon img{ width:100%; height:100%; object-fit:cover; }
.agg-row:last-child{ border-bottom:none; }
.agg-row.done .agg-name{ text-decoration:line-through; text-decoration-color:var(--text-muted); }
.agg-row.done{ opacity:.55; }
.agg-info{ flex:1; min-width:0; }
.agg-name{ font-size:.86rem; font-weight:500; display:block; }
.agg-dim{ display:block; font-size:.78rem; color:var(--text-muted); line-height:1.4; font-variant-numeric:tabular-nums; }
.agg-qty{ font-size:.82rem; font-weight:600; white-space:nowrap; }
.agg-qty .unit{ font-weight:400; color:var(--text-muted); margin-left:2px; }
.agg-unassign{
  flex:none; width:20px; height:20px; border:none; background:transparent; color:var(--text-muted);
  border-radius:5px; font-size:.8rem;
}
.agg-unassign:hover{ background:var(--danger-soft); color:var(--danger); }

.panel-foot{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); background:var(--surface-2); flex-wrap:wrap; }
.btn{
  border-radius:8px; padding:8px 13px; font-size:.82rem; font-weight:600; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:6px;
}
.btn[hidden]{ display:none; }
.btn-primary{ background:var(--accent); color:var(--accent-contrast); }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{ background:var(--surface); border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-muted); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.toast{
  font-size:.76rem; color:var(--done); padding:0 16px 10px; margin-top:-6px;
}

.help-panel .panel-body{ max-height:none; font-size:.82rem; color:var(--text-muted); padding:12px 16px 16px; }
.help-panel ul{ margin:6px 0 0; padding-left:18px; }
.help-panel li{ margin-bottom:5px; }

footer.note{ text-align:center; color:var(--text-muted); font-size:.76rem; margin-top:28px; }

/* ---- Item media / commerce meta ---- */
.item-icon{
  flex:none; width:38px; height:38px; border-radius:9px; background:var(--surface-2);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  overflow:hidden;
}
.item-icon svg{ width:20px; height:20px; }
.item-icon img{ width:100%; height:100%; object-fit:cover; }
.item-row.assigned .item-icon{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.item-del,
.item-edit,
.item-copy{
  flex:none; width:26px; height:26px; border-radius:7px; border:1px solid transparent; background:transparent;
  color:var(--text-muted); display:flex; align-items:center; justify-content:center;
}
.item-del:hover{ background:var(--danger-soft); color:var(--danger); }
.item-del svg,
.item-edit svg,
.item-copy svg{ width:15px; height:15px; }
.item-edit:hover,
.item-copy:hover{ background:var(--accent-soft); color:var(--accent); }
.item-del.confirm{ width:auto; padding:0 8px; font-size:.65rem; font-weight:700; color:#fff; background:var(--danger); border-color:var(--danger); }
.item-del.confirm:hover{ background:var(--danger); color:#fff; }
.custom-tag{ font-size:.66rem; color:var(--text-muted); font-style:italic; }

.item-meta-line{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:3px; }
.meta-tag{
  font-size:.68rem; color:var(--text-muted); background:var(--surface-2); border-radius:5px;
  padding:1px 6px; font-family:'Plex Mono', monospace;
}
.meta-tag.store{ color:var(--accent); background:var(--accent-soft); font-family:'Plex Sans', sans-serif; font-weight:600; }
.link-btn{
  display:inline-flex; align-items:center; gap:3px; font-size:.68rem; font-weight:600; color:var(--accent);
  text-decoration:none; border-bottom:1px solid transparent;
}
.link-btn:hover{ border-bottom-color:var(--accent); }
.link-btn svg{ width:10px; height:10px; }

.pending-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:600; color:var(--warn);
  background:var(--warn-soft); border-radius:5px; padding:2px 7px; margin-top:3px;
}
.pending-badge svg{ width:11px; height:11px; flex:none; }

.item-price{ flex:1 1 auto; min-width:0; text-align:right; }
.item-price .amount{ display:block; font-size:.92rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.item-price .per{ display:block; font-size:.66rem; color:var(--text-muted); white-space:nowrap; }
.item-price .tbd{ display:inline-block; max-width:100%; font-size:.72rem; color:var(--text-muted); font-style:normal; text-align:left; white-space:normal; }

/* ---- Sidebar total hero ---- */
.panel-total{
  padding:16px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--accent-soft), transparent);
}
.panel-total .amount{ font-size:2rem; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1; }
.panel-total .caption{ font-size:.74rem; color:var(--text-muted); margin-top:6px; }

.agg-meta{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:3px; }
.agg-price{ flex:none; text-align:right; font-size:.86rem; font-weight:700; font-variant-numeric:tabular-nums; min-width:64px; }
.agg-price .per{ display:block; font-size:.66rem; font-weight:400; color:var(--text-muted); }

/* ---- Add-material modal ---- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,14,12,.5); display:flex; align-items:flex-start;
  justify-content:center; padding:5vh 16px; z-index:50; overflow-y:auto;
}
:root:not([data-theme="light"]) .modal-overlay{ background:rgba(0,0,0,.65); }
:root[data-theme="dark"] .modal-overlay{ background:rgba(0,0,0,.65); }
.modal-overlay[hidden]{ display:none; }
.modal{
  background:var(--surface); border-radius:14px; border:1px solid var(--border); width:100%; max-width:520px;
  box-shadow:0 20px 60px rgba(0,0,0,.3); position:relative;
}
.modal-wide{ max-width:900px; }
.modal-head{ padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal-head h2{ font-size:1.05rem; font-weight:700; }
.modal-close{ flex:none; width:28px; height:28px; border-radius:7px; border:none; background:transparent; color:var(--text-muted); font-size:1.1rem; }
.modal-close:hover{ background:var(--surface-2); color:var(--text); }
.modal-body{ padding:16px 18px; max-height:70vh; overflow-y:auto; }
.modal-body > .search{ margin-bottom:12px; }

/* ---- Confronto fornitori: overlay di caricamento (ricerca online/web, analisi URL) ---- */
.sp-loading-overlay{
  position:absolute; inset:0; z-index:5; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--surface); padding:24px; text-align:center;
}
.sp-loading-overlay[hidden]{ display:none; }
.sp-spinner{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:3px solid var(--accent-soft); border-top-color:var(--accent);
  animation:sp-spin .8s linear infinite;
}
@keyframes sp-spin{ to{ transform:rotate(360deg); } }
.sp-loading-overlay p{ font-size:.86rem; color:var(--text-muted); max-width:320px; margin:0; }

/* ---- Materials database modal ---- */
/* Riga propria e più alta sopra i pulsanti: prima era stretta nel toolbar in mezzo a cinque
   pulsanti e il testo digitato non si leggeva bene. */
.mdb-search-big{ font-size:1rem; padding:12px 14px; margin-bottom:12px; }
.mdb-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.mdb-dup-group{
  border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:14px;
}
.mdb-dup-group h4{ font-size:.8rem; font-weight:700; margin-bottom:8px; }
.mdb-dup-row{
  display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:7px;
}
.mdb-dup-row:hover{ background:var(--surface-2); }
.mdb-dup-radio{ flex:none; margin:0; cursor:pointer; }
.mdb-dup-include{ flex:none; margin:0 0 0 auto; cursor:pointer; }
.mdb-dup-row .mdb-icon img, .mdb-dup-row .mdb-icon svg{ width:26px; height:26px; border-radius:6px; object-fit:cover; }
.mdb-dup-row .mdb-icon svg{ padding:5px; background:var(--surface-2); color:var(--text-muted); box-sizing:border-box; }
.mdb-dup-info{ flex:1; min-width:0; font-size:.82rem; }
.mdb-dup-info .mdb-dim{ display:block; font-size:.72rem; color:var(--text-muted); }
.mdb-dup-meta{ font-size:.72rem; color:var(--text-muted); }
.mdb-dup-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.mdb-dup-section-title{ font-size:.86rem; font-weight:700; margin:18px 0 10px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mdb-dup-section-hint{ font-size:.74rem; font-weight:500; color:var(--warn); }
.mdb-empty-dup{ padding:20px 4px; }
.mdb-back-link{ background:none; border:none; color:var(--accent); font-size:.8rem; font-weight:600; padding:0 0 12px; display:block; }
.mdb-store-list{ display:flex; flex-direction:column; gap:6px; }
.mdb-store-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:9px;
  background:var(--surface-2);
}
.mdb-store-name{ flex:1; min-width:0; font-size:.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mdb-store-input{
  flex:1; min-width:0; border:1px solid var(--border); background:var(--surface); border-radius:7px;
  padding:6px 10px; font-size:.86rem; color:var(--text);
}
.mdb-url-progress{ margin:4px 0 10px; }
.progress-bar-track{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-bottom:6px; }
.progress-bar-fill{ height:100%; width:0%; background:var(--accent); border-radius:99px; transition:width .25s ease; }
.progress-bar-label{ font-size:.8rem; color:var(--text-muted); }
.mdb-url-results{ display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; }
.mdb-url-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  border:1px solid var(--border); font-size:.8rem;
}
.mdb-url-row .mdb-icon img{ width:24px; height:24px; border-radius:6px; object-fit:cover; flex:none; }
.mdb-url-row-info{ flex:1; min-width:0; }
.mdb-url-row-info .mdb-url-name{ font-weight:600; }
.mdb-url-row-info .mdb-url-link{ display:block; font-size:.7rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mdb-url-row-status{ flex:none; font-size:.72rem; font-weight:600; }
.mdb-url-row.ok .mdb-url-row-status{ color:var(--success, #1a7f37); }
.mdb-url-row.error .mdb-url-row-status{ color:var(--danger, #c92a2a); }
.mdb-url-row.skip .mdb-url-row-status{ color:var(--text-muted); }
.mdb-url-row.pending .mdb-url-row-status{ color:var(--text-muted); }

.import-hub-option{
  width:100%; display:flex; align-items:flex-start; gap:14px; text-align:left;
  padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface);
  cursor:pointer; transition:border-color .1s ease, background-color .1s ease;
}
.import-hub-option:hover{ border-color:var(--accent); background:var(--accent-soft); }
.import-hub-icon{
  flex:none; width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.import-hub-icon svg{ width:18px; height:18px; }
.import-hub-icon{ font-size:1.2rem; font-weight:700; line-height:1; }
.import-hub-text{ display:flex; flex-direction:column; gap:2px; }
.import-hub-text strong{ font-size:.9rem; }
.import-hub-text span{ font-size:.78rem; color:var(--text-muted); }

.pick-material-list{ max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin:10px 0 14px; }
.pick-material-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:9px;
  background:var(--surface); cursor:pointer; text-align:left; width:100%;
}
.pick-material-row:hover{ border-color:var(--accent); background:var(--accent-soft); }
.pick-material-row .mdb-icon img, .pick-material-row .mdb-icon svg{ width:26px; height:26px; border-radius:6px; object-fit:cover; flex:none; }
.pick-material-row .mdb-icon svg{ padding:5px; background:var(--surface-2); color:var(--text-muted); box-sizing:border-box; }
.pick-material-info{ flex:1; min-width:0; font-size:.84rem; }
.pick-material-info .mdb-dim{ display:block; font-size:.72rem; color:var(--text-muted); }
.pick-material-meta{ font-size:.72rem; color:var(--text-muted); flex:none; text-align:right; }
.materials-db-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
.materials-db-table th{
  text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  padding:6px 8px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface);
}
.materials-db-table td{ padding:8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.materials-db-table tr:last-child td{ border-bottom:none; }
.mdb-icon{ width:32px; }
.mdb-icon img, .mdb-icon svg{ width:28px; height:28px; border-radius:7px; object-fit:cover; }
.mdb-icon svg{ padding:5px; background:var(--surface-2); color:var(--text-muted); box-sizing:border-box; }
.mdb-dim{ display:block; font-size:.72rem; color:var(--text-muted); margin-top:1px; }
.mdb-edit-col{ width:34px; text-align:right; }
.mdb-actions-col{ width:auto; white-space:nowrap; text-align:right; }
.mdb-actions-col .item-del,
.mdb-actions-col .item-edit{ display:inline-flex; margin-left:4px; }
.modal-foot{ padding:14px 18px; border-top:1px solid var(--border); background:var(--surface-2); display:flex; gap:10px; justify-content:flex-end; }

/* ---- Menu di navigazione tra sezioni del progetto (piano acquisti / preventivi / ore /
   giornale) — colorato in tinta accent per distinguerlo visivamente dai tab secondari
   (es. quelli dentro il modal di login), dato che qui è la navigazione primaria della pagina. */
.view-tabs{
  max-width:720px; margin:0; background:var(--accent-soft); padding:4px;
}
.view-tabs .auth-tab{ color:var(--accent-strong); }
.view-tabs .auth-tab.active{ background:var(--accent); color:var(--accent-contrast); }

/* ---- Fase 2: preventivi commerciali ---- */
.estimate-select{
  border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:8px;
  padding:8px 10px; font-size:.86rem; min-width:220px;
}
.standalone-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:16px; border-radius:10px;
  background:var(--warn-soft); color:var(--warn); font-size:.86rem; font-weight:600;
}
.standalone-banner[hidden]{ display:none; }
.standalone-banner .btn{ flex:none; font-weight:700; }
.estimate-header-fields{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.estimate-header-fields .auth-field{ flex:1; min-width:220px; margin-bottom:0; }
.estimate-header-fields .auth-field input{ background:var(--surface); }
.estimate-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
.estimate-table{ width:100%; border-collapse:collapse; font-size:.84rem; min-width:720px; }
.estimate-table th{
  text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  padding:8px 10px; border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap;
}
.estimate-table td{ padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.estimate-table tbody tr:last-child td{ border-bottom:1px solid var(--border); }
.estimate-col-desc{ min-width:220px; }
.estimate-table input, .estimate-table select{
  border:1px solid transparent; background:none; border-radius:6px; padding:5px 6px; font-size:.84rem; width:100%;
  color:var(--text);
}
.estimate-table input:hover, .estimate-table select:hover{ border-color:var(--border); }
.estimate-table input:focus, .estimate-table select:focus{ border-color:var(--accent); background:var(--surface); outline:none; }
.estimate-table input[type="number"]{ text-align:right; -moz-appearance:textfield; }
/* Le celle numeriche strette di queste tabelle (spessore muri, Ø tubi, ecc.) dimensionano
   l'input in `ch` sulle sole cifre attese — la freccina nativa dello stepper del browser si
   sovrappone all'ultima cifra invece di starci a fianco, tagliandola visivamente (es. "20"
   che appare come "2("). Toglierla è puramente cosmetico: si può ancora digitare o usare le
   frecce ↑/↓ da tastiera, semplicemente non c'è più il controllo a schermo. */
.estimate-table input[type="number"]::-webkit-outer-spin-button,
.estimate-table input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.estimate-num-col{ width:110px; }
.estimate-margin-cell{ text-align:right; font-weight:600; color:var(--done); white-space:nowrap; padding-right:12px; }
.estimate-row-del{ text-align:right; }
#estimateTotalsRow td{ font-weight:700; border-bottom:none; border-top:2px solid var(--border); background:var(--surface-2); }
#estimateTotalsRow .estimate-margin-cell{ color:var(--done); }

.import-site-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface);
}
.import-site-row input[type="checkbox"]{ flex:none; width:16px; height:16px; }
.import-site-row .pick-material-info{ flex:1; min-width:0; font-size:.84rem; }

/* ---- Fase 3: operatività cantiere ---- */
.ops-analytics{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.ops-card{ flex:1; min-width:180px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.ops-card .ops-card-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:6px; }
.ops-card .ops-card-value{ font-size:1.4rem; font-weight:700; }
.ops-card .ops-card-sub{ font-size:.74rem; color:var(--text-muted); margin-top:3px; }
.ops-alert{ flex-basis:100%; padding:12px 14px; border-radius:10px; background:var(--danger-soft); color:var(--danger); font-size:.86rem; font-weight:600; }

.ops-section{ margin-bottom:32px; }
.ops-section h3{ margin:0 0 12px; font-size:1.05rem; }
.ops-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.ops-form input, .ops-form select{
  border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:8px 10px; font-size:.86rem;
}
.ops-form-journal{ align-items:flex-start; }
.ops-form-journal textarea{
  border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:8px 10px; font-size:.86rem;
  flex:1; min-width:220px; resize:vertical; font-family:inherit;
}

.journal-list{ display:flex; flex-direction:column; gap:12px; }
.journal-entry{ border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--surface); }
.journal-entry-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.journal-entry-date{ font-size:.76rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.journal-entry-note{ font-size:.88rem; line-height:1.5; }
.journal-entry-preview{ display:flex; align-items:center; gap:10px; cursor:pointer; border-radius:8px; margin:-4px; padding:4px; }
.journal-entry-preview:hover{ background:var(--surface-2); }
.journal-entry-preview .journal-entry-note{ flex:1; min-width:0; }
.journal-entry-photos-badge{ flex:none; font-size:.78rem; color:var(--text-muted); white-space:nowrap; }
.journal-entry-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

/* Nota compressa a una riga in "Ore registrate" (cella tabella) e "Giornale lavori" (scheda) —
   il testo completo (e le foto, per il giornale) si vede nel popup #noteDetailModal. */
.note-preview{
  display:block; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.note-preview:hover{ text-decoration:underline; }
.note-detail-meta{ font-size:.78rem; color:var(--text-muted); margin-bottom:10px; }
.note-detail-text{ font-size:.92rem; line-height:1.55; white-space:pre-wrap; }
.note-detail-photos{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.note-detail-photos img{ max-width:220px; max-height:220px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.note-detail-photos[hidden]{ display:none; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.form-field[hidden]{ display:none; }
.form-field.span2{ grid-column:1 / -1; }
.form-field label{ font-size:.74rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.form-field input, .form-field select{
  border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:8px 10px; font-size:.88rem;
  width:100%; min-width:0; max-width:100%;
}
.form-hint{ font-size:.72rem; color:var(--text-muted); margin-top:2px; }
.import-checkbox{ display:flex; align-items:center; gap:8px; font-size:.84rem; margin-top:12px; cursor:pointer; }
.import-checkbox input{ width:auto; }
.import-preview{
  margin-top:12px; padding:10px 12px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border);
  font-size:.82rem; display:flex; flex-wrap:wrap; gap:6px 16px;
}
.import-preview b{ font-variant-numeric:tabular-nums; }

/* ---- Fase 4: canvas planimetria ---- */
#fpUploadZone{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
/* Stesso bug di cascata già visto con .pro-only/#purchasePlanView: display:flex qui sopra
   batte sempre il default [hidden] dello user-agent. */
#fpUploadZone[hidden]{ display:none; }
.fp-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.fp-toolbar-sep{ width:1px; height:20px; background:var(--border); margin:0 2px; }
.fp-toolbar .btn.active-mode{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
.fp-hint{ font-size:.8rem; color:var(--text-muted); margin:0 0 10px; min-height:1.2em; }
.fp-scale-label{ font-size:.78rem; color:var(--text-muted); font-weight:600; }
.fp-subhead{ font-size:1rem; font-weight:700; margin:22px 0 4px; color:var(--text); }

.wall-default-cell{ min-width:200px; padding-top:8px; padding-bottom:8px; }
.wall-default-grid{ display:flex; flex-direction:column; gap:6px; }
.wall-default-grid label{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);
}
.wall-default-grid select{ flex:none; width:auto; min-width:118px; }
.wall-default-thickness{ display:flex; align-items:center; gap:4px; font-size:.84rem; color:var(--text); font-weight:600; }
.wall-default-thickness input{ width:5ch; flex:none; }
.wall-segment-tag{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);
  background:var(--surface-2); padding:2px 6px; border-radius:6px; margin-left:6px; white-space:nowrap;
}
#sdiPayloadPreview{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
  font-size:.78rem; line-height:1.5; overflow-x:auto; white-space:pre; margin-top:12px;
}
.fp-canvas-wrap{
  border:1px solid var(--border); border-radius:12px; overflow:auto; background:var(--surface-2);
  margin-bottom:18px; display:flex; justify-content:center; padding:10px;
}
/* touch-action:none è indispensabile, non solo un dettaglio: senza, un trascinamento con dito o
   pen (spostare una porta, un vertice, un punto di un impianto) può essere interrotto a metà dal
   gesto di pan/scroll nativo del browser — il pointerdown parte ma pointermove/pointerup non
   arrivano più puliti, quindi lo spostamento non si salva mai. Stesso principio già applicato a
   #fpAdjustCanvas qui sotto; mancava qui, la causa più probabile di "le porte non si spostano". */
#fpCanvas{ display:block; cursor:crosshair; border-radius:6px; max-width:100%; touch-action:none; }

.fp-adjust-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:8px; }
.fp-adjust-toolbar .auth-tabs{ margin-bottom:0; }
.fp-zoom-label{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text-muted); font-weight:600; }
.fp-zoom-label input[type="range"]{ width:140px; }
.fp-adjust-canvas-wrap{
  border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#15181a;
  display:flex; justify-content:center; margin-bottom:10px;
}
#fpAdjustCanvas{ display:block; cursor:grab; touch-action:none; }
#fpAdjustCanvas.crop-mode{ cursor:default; }
#fpAdjustCanvas:active{ cursor:grabbing; }
#deleteFpOpeningBtn{ margin-right:auto; }
.fp-editing-shape{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }

/* ---- Supplier price comparator ---- */
.item-compare{
  flex:none; width:26px; height:26px; border-radius:7px; border:1px solid transparent; background:transparent;
  color:var(--text-muted); display:flex; align-items:center; justify-content:center;
}
.item-compare:hover{ background:var(--accent-soft); color:var(--accent); }
.item-compare svg{ width:15px; height:15px; }

.sp-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.sp-url-row{ display:flex; gap:8px; margin-top:14px; }
.sp-url-row input{
  flex:1; min-width:0; border:1px solid var(--border); background:var(--surface); border-radius:8px;
  padding:8px 10px; font-size:.86rem;
}

/* ---- filter bar ---- */
.sp-filterbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.sp-filterbar select{
  border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:7px 9px; font-size:.82rem;
}
.sp-result-count{ font-size:.78rem; color:var(--text-muted); margin-left:auto; }
.sp-filter-dropdown{ position:relative; }
.sp-filter-dropdown summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:5px;
  border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:7px 10px; font-size:.82rem; font-weight:600;
}
.sp-filter-dropdown summary::-webkit-details-marker{ display:none; }
.sp-filter-dropdown[open] summary{ border-color:var(--accent); }
.sp-filter-count{ font-family:'Plex Mono',monospace; font-size:.72rem; color:var(--text-muted); }
.sp-filter-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:5; min-width:220px; max-height:260px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:10px;
}
.sp-filter-panel-actions{ display:flex; gap:8px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.sp-filter-panel-actions button{ background:none; border:none; color:var(--accent); font-size:.76rem; font-weight:600; padding:0; }
.sp-filter-panel-actions button:hover{ text-decoration:underline; }
.sp-supplier-checkbox{ display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:.84rem; cursor:pointer; }
.sp-supplier-checkbox input{ width:auto; }
.sp-freshness{
  display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--text-muted); margin-bottom:10px;
}
.sp-freshness button{ background:none; border:none; color:var(--accent); font-weight:600; padding:0; font-size:.76rem; }
.sp-freshness button:hover{ text-decoration:underline; }
.sp-filtered-warning{
  font-size:.78rem; color:var(--warn); background:var(--warn-soft); border-radius:8px; padding:7px 10px; margin-bottom:10px;
}

.sp-card{
  display:flex; align-items:flex-start; gap:12px; padding:12px 4px; border-bottom:1px solid var(--border);
}
.sp-card:last-child{ border-bottom:none; }
.sp-card.selected{ background:var(--accent-soft); border-radius:10px; padding-left:10px; padding-right:10px; }
.sp-thumb{
  position:relative; flex:none; width:44px; height:44px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); overflow:hidden;
}
.sp-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sp-thumb svg{ width:20px; height:20px; position:relative; z-index:0; }
.sp-info{ flex:1; min-width:0; }
.sp-row1{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sp-supplier{ font-weight:600; font-size:.9rem; }
.sp-price{ font-weight:700; font-size:.95rem; flex:none; }
.sp-row2{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:4px; }
.sp-source-tag{
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:99px;
  background:var(--surface-2); color:var(--text-muted);
}
.sp-badge{ font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:99px; }
.sp-badge-best{ background:var(--done-soft); color:var(--done); }
.sp-badge-visible-best{ background:var(--warn-soft); color:var(--warn); }
.sp-badge-selected{ background:var(--accent-soft); color:var(--accent); }
.sp-badge-similar{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.sp-badge-own{ background:var(--accent); color:var(--accent-contrast); text-transform:uppercase; letter-spacing:.03em; }
/* Card fissa fuori dalla lista scorrevole/ordinabile delle offerte — bordo e sfondo dedicati
   così resta riconoscibile a colpo d'occhio come "il punto di paragone", non un'altra offerta
   tra le tante. */
.sp-card-own{
  display:flex; align-items:flex-start; gap:12px; padding:12px; margin-bottom:12px;
  border:1.5px solid var(--accent); border-radius:12px; background:var(--accent-soft);
}
.sp-card-own:empty{ display:none; }
.sp-notes{ font-size:.78rem; color:var(--text-muted); margin-top:4px; font-style:italic; }
.sp-saving{ font-size:.76rem; color:var(--done); font-weight:600; margin-top:4px; }
.sp-updated{ font-size:.7rem; color:var(--text-muted); }
.sp-actions-col{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

/* ---- Cerca & importa materiali online ---- */
.sm-searchbar{ display:flex; gap:10px; flex-wrap:wrap; }
.sm-searchbar input{
  flex:1; min-width:200px; font-size:1rem; padding:12px 14px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--text);
}
.sm-searchbar select{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:8px; padding:0 10px; font-size:.86rem; flex:none;
}
.sm-results{ margin-top:14px; display:flex; flex-direction:column; }
.sm-load-more{ display:flex; width:100%; justify-content:center; margin-top:12px; border-style:dashed; }
.sm-load-more[hidden]{ display:none; }
.sm-results .sp-card{ align-items:center; }
.sm-title{ font-weight:600; font-size:.9rem; line-height:1.35; text-wrap:pretty; }
.sm-code{
  font-size:.68rem; font-family:'Plex Mono',monospace; color:var(--text-muted);
  background:var(--surface-2); border-radius:5px; padding:1px 6px;
}
.sm-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--done); color:#fff; font-weight:600; font-size:.86rem;
  padding:10px 20px; border-radius:99px; box-shadow:var(--shadow); z-index:200;
  animation:sm-toast-in .2s ease;
}
.sm-toast[hidden]{ display:none; }
@keyframes sm-toast-in{
  from{ opacity:0; transform:translateX(-50%) translateY(8px); }
  to{ opacity:1; transform:translateX(-50%) translateY(0); }
}
.btn-sm{ padding:5px 10px; font-size:.76rem; }
.file-row{ display:flex; align-items:center; gap:10px; }
.file-preview{
  flex:none; width:48px; height:48px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); overflow:hidden;
}
.file-preview img{ width:100%; height:100%; object-fit:cover; }
.file-preview svg{ width:22px; height:22px; }

@media (max-width:520px){ .form-grid{ grid-template-columns:1fr; } }

/* ---- Auth overlay (login / register) ---- */
#authOverlay{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
#authOverlay[hidden]{ display:none; }
.auth-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); padding:28px 26px;
}
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.auth-brand .mark{
  width:38px; height:38px; border-radius:10px; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.auth-brand .mark img{ width:100%; height:100%; display:block; }
.auth-brand h1{ font-size:1.25rem; font-weight:700; letter-spacing:-.01em; }
.auth-brand p{ margin:1px 0 0; font-size:.78rem; color:var(--text-muted); }

.auth-tabs{ display:flex; gap:4px; background:var(--surface-2); border-radius:9px; padding:3px; margin-bottom:20px; }
.auth-tabs[hidden]{ display:none; }
.auth-tab{
  flex:1; text-align:center; padding:7px 0; border-radius:7px; font-size:.84rem; font-weight:600;
  color:var(--text-muted); background:none; border:none;
}
.auth-tab.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.auth-field .auth-tabs{ margin-bottom:0; }
.auth-subtitle{ font-size:.82rem; color:var(--text-muted); margin:-8px 0 16px; line-height:1.5; }
.auth-subtitle[hidden]{ display:none; }

.auth-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.auth-field[hidden]{ display:none; }
.auth-field label{ font-size:.74rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.auth-field input, .auth-field textarea, .auth-field select{
  border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:9px;
  padding:10px 12px; font-size:.92rem; font-family:inherit; width:100%;
}
.auth-field textarea{ resize:vertical; }
.auth-submit{
  width:100%; margin-top:6px; padding:11px 0; border-radius:9px; border:none;
  background:var(--accent); color:var(--accent-contrast); font-size:.92rem; font-weight:700;
}
.auth-submit:hover{ background:var(--accent-strong); }
.auth-submit[disabled]{ opacity:.6; cursor:wait; }
.auth-forgot, .auth-back{
  font-size:.8rem; color:var(--accent); font-weight:600; text-align:right; margin:-6px 0 14px; cursor:pointer;
}
.auth-back{ text-align:center; margin:14px 0 0; }
.auth-forgot[hidden], .auth-back[hidden]{ display:none; }
.auth-forgot:hover, .auth-back:hover{ text-decoration:underline; }
.auth-msg{
  font-size:.8rem; margin-top:14px; padding:9px 11px; border-radius:8px; line-height:1.5; display:none;
}
.auth-msg.show{ display:block; }
.auth-msg[hidden]{ display:none; }
.auth-msg.error{ background:var(--danger-soft); color:var(--danger); }
.auth-msg.info{ background:var(--accent-soft); color:var(--accent-strong); }
.auth-msg.success{ background:var(--done-soft); color:var(--done); }

.auth-loading{
  position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:.9rem;
}
.auth-loading[hidden]{ display:none; }

/* ---- Print view ----
   #printArea is nested inside #appRoot, itself now nested inside #appShell > #mainContent
   (the sidebar shell, see nav-ui.js) — not a direct body child, so a plain "every body child
   but #printArea" rule doesn't reach it. A visibility:hidden trick isolates it visually but
   leaves the rest of the app occupying its normal layout height (visibility doesn't remove
   anything from flow), so the print job paginates across as many blank pages as the hidden
   app would have needed — hence walking the exact ancestor chain with display:none instead,
   which removes hidden siblings from flow at every level. */
#printArea{ display:none; }
@media print{
  body > *{ display:none !important; }
  #appShell{ display:block !important; }
  #appShell > *{ display:none !important; }
  #appShell > #mainContent{ display:block !important; }
  #mainContent > *{ display:none !important; }
  #appRoot{ display:block !important; }
  #appRoot > *{ display:none !important; }
  #appRoot > #printArea{ display:block !important; }
  html, body{ background:#fff; }
  #printArea{ color:#111; font-family:'Plex Sans', ui-sans-serif, system-ui, sans-serif; }
  .print-header{ margin-bottom:16px; }
  .print-header h1{ font-size:15px; margin:0; color:#555; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
  .print-header h2{ font-size:21px; margin:3px 0 0; font-weight:700; }
  .print-header p{ font-size:11px; margin:4px 0 0; color:#555; }
  .print-table{ width:100%; border-collapse:collapse; font-size:11.5px; }
  .print-table th{
    text-align:left; border-bottom:1.5px solid #111; padding:5px 8px; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.03em; color:#333;
  }
  .print-table td{ border-bottom:1px solid #ccc; padding:8px; vertical-align:top; }
  .print-table tbody tr{ break-inside:avoid; }
  .print-table td:first-child, .print-table th:first-child{ width:22px; padding-right:0; }
  .print-table td:nth-child(2){ width:32px; padding-left:0; }
  .print-table td:nth-child(4), .print-table td:nth-child(5){ white-space:nowrap; }
  .print-table td:last-child{ text-align:right; white-space:nowrap; }
  .print-table th:last-child{ text-align:right; }
  .print-box{ display:inline-block; width:12px; height:12px; border:1.3px solid #111; border-radius:2px; }
  .print-thumb{ width:28px; height:28px; object-fit:cover; border-radius:4px; border:1px solid #ccc; display:block; }
  .print-dim{ color:#666; font-size:10px; }
  .print-pending{ color:#8a5a00; font-style:italic; font-size:10px; }
  .print-store-row td{
    border-bottom:1.3px solid #111; border-top:1px solid #111; background:#f0f0f0;
    font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; padding:6px 8px;
  }
  .print-store-row:first-child td{ border-top:none; }
  .print-table tfoot td{ border-top:1.5px solid #111; border-bottom:none; font-weight:700; padding-top:10px; }
  .print-note{ font-size:10.5px; color:#555; margin-top:10px; }
  @page{ margin:16mm 14mm; }

  /* Preventivi (Fase 2) — due layout fissi per l'export PDF (vedi js/estimates-ui.js):
     "Executive/Cliente" (.pdf-exec-*) e "Tecnico/Fornitore" (.pdf-tech-*). Colonne diverse
     dalla lista acquisti, non devono ereditare le regole :nth-child di .print-table. */
  .print-client-box{ margin:14px 0 18px; font-size:11.5px; color:#333; }
  .print-client-box strong{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; color:#777; margin-bottom:2px; }

  /* Executive/Cliente: fascia col colore del brand, totale evidenziato, mai un costo interno. */
  .pdf-exec-header{
    margin:-16mm -14mm 20px; padding:22px 14mm 18px; background:#1a3164; color:#fff;
  }
  .pdf-exec-brand{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.75; }
  .pdf-exec-header h2{ font-size:23px; margin:6px 0 0; font-weight:700; }
  .pdf-exec-header p{ font-size:11.5px; margin:5px 0 0; opacity:.85; }
  .pdf-exec-table{ width:100%; border-collapse:collapse; font-size:12px; }
  .pdf-exec-table th{
    text-align:left; border-bottom:1.5px solid #1a3164; padding:6px 8px; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.03em; color:#1a3164;
  }
  .pdf-exec-table td{ border-bottom:1px solid #ddd; padding:9px 8px; vertical-align:top; }
  .pdf-exec-table tbody tr{ break-inside:avoid; }
  .pdf-exec-table td.num, .pdf-exec-table th.num{ text-align:right; white-space:nowrap; }
  .pdf-exec-table tfoot td{
    border-top:1.5px solid #1a3164; border-bottom:none; font-weight:700; font-size:14px;
    padding-top:12px; background:#eef1f8;
  }

  /* Tecnico/Fornitore: righe dense, codice articolo e quantità in primo piano, bianco e nero. */
  .pdf-tech-header{ margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid #111; }
  .pdf-tech-header span{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#555; }
  .pdf-tech-header h2{ font-size:16px; margin:3px 0 0; font-weight:700; }
  .pdf-tech-header p{ font-size:10px; margin:3px 0 0; color:#555; }
  .pdf-tech-table{ width:100%; border-collapse:collapse; font-size:11px; }
  .pdf-tech-table th{
    text-align:left; border-bottom:1.3px solid #111; padding:4px 6px; font-size:9px;
    text-transform:uppercase; letter-spacing:.02em; color:#333;
  }
  .pdf-tech-table td{ border-bottom:1px solid #ddd; padding:5px 6px; vertical-align:top; }
  .pdf-tech-table tbody tr{ break-inside:avoid; }
  .pdf-tech-table tbody tr:nth-child(even){ background:#f4f4f4; }
  .pdf-tech-table th:first-child, .pdf-tech-table td:first-child{ width:16%; }
  .pdf-tech-code{ font-family:'Plex Mono', ui-monospace, monospace; font-weight:600; }
  .pdf-tech-qty{ font-weight:700; }
  .pdf-tech-table td.num, .pdf-tech-table th.num{ text-align:right; white-space:nowrap; }
}

/* ---- Projects home ---- */
#projectsRoot[hidden]{ display:none !important; }
.projects-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--border);
}
.projects-header h1{ font-size:1.6rem; font-weight:700; letter-spacing:-.01em; }
.projects-header p{ margin:.3rem 0 0; color:var(--text-muted); font-size:.9rem; }
.projects-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }

.projects-list{ display:flex; flex-direction:column; gap:12px; }
.project-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow);
}
.project-card-main{ flex:1; min-width:200px; }
.project-role-badge{
  display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:2px 8px; border-radius:99px; margin-bottom:6px;
}
.project-role-badge.role-owner{ background:var(--accent-soft); color:var(--accent-strong); }
.project-role-badge.role-editor{ background:var(--done-soft); color:var(--done); }
.project-role-badge.role-viewer{ background:var(--warn-soft); color:var(--warn); }
.project-card-name-row{ display:flex; align-items:center; }
.project-card-name{ font-size:1.05rem; font-weight:700; }
.project-card-name-input{
  font-size:1.05rem; font-weight:700; border:1px solid var(--accent); border-radius:6px; padding:2px 7px;
  background:var(--surface); width:100%; max-width:280px;
}
.project-card-name-input[hidden]{ display:none; }
.project-card-meta{ font-size:.78rem; color:var(--text-muted); margin-top:3px; }
.project-card-actions{ display:flex; align-items:center; gap:6px; flex:none; }
.icon-btn{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); display:flex; align-items:center; justify-content:center; flex:none;
}
.icon-btn svg{ width:15px; height:15px; }
.icon-btn:hover{ color:var(--text); border-color:var(--text-muted); }
.icon-btn.danger{ width:auto; padding:0 10px; font-size:.72rem; font-weight:700; color:#fff; background:var(--danger); border-color:var(--danger); }

/* ---- "I miei preventivi" / "Le mie fatture" (hub-ui.js) ---- */
.hub-groups{ display:flex; flex-direction:column; gap:18px; }
.hub-group{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.hub-group-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface-2);
}
.hub-group-head h3{ font-size:.98rem; font-weight:700; }
.hub-group-body{ display:flex; flex-direction:column; }
.hub-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 18px; border-bottom:1px solid var(--border); cursor:pointer;
}
.hub-row:last-child{ border-bottom:none; }
.hub-row:hover{ background:var(--surface-2); }
.hub-row-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hub-row-title{ font-weight:600; font-size:.92rem; }
.hub-row-sub{ font-size:.78rem; color:var(--text-muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hub-row-amount{ flex:none; font-weight:700; font-variant-numeric:tabular-nums; }

.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }

/* ---- Clienti (clients-ui.js) — riusa .hub-group per il riquadro, ma l'intestazione è
   interattiva (espandi/contrai) e ha pulsanti di modifica/eliminazione al posto del conteggio. */
.client-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; cursor:pointer;
}
.client-card-head:hover{ background:var(--surface-2); }
.client-card-name-block{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.client-card-name{ font-weight:700; font-size:1rem; }
.client-card-contact{ font-size:.78rem; color:var(--text-muted); display:flex; gap:10px; flex-wrap:wrap; }
.client-card-actions{ display:flex; align-items:center; gap:6px; flex:none; }
.client-card-counts{ display:flex; gap:6px; flex-wrap:wrap; flex:none; }
.client-card-body{ border-top:1px solid var(--border); padding:14px 18px; display:flex; flex-direction:column; gap:14px; }
.client-card-body[hidden]{ display:none; }
.client-card-section h4{ font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:6px; }
.client-card-empty{ font-size:.82rem; color:var(--text-muted); }

.new-project-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.new-project-row[hidden]{ display:none; }
.new-project-row input{
  border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:8px 12px; font-size:.88rem; min-width:220px;
}

/* ---- Paywall Pro ---- */
.paywall-features{ display:flex; flex-direction:column; gap:8px; margin:14px 0; padding:0; list-style:none; }
.paywall-features li{
  display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--text);
  padding:9px 12px; background:var(--accent-soft); border-radius:9px;
}
.paywall-features li::before{
  content:"✓"; flex:none; width:18px; height:18px; border-radius:50%; background:var(--accent);
  color:var(--accent-contrast); font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* ---- Share modal ---- */
.share-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.share-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
}
.share-email{ flex:1; min-width:0; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-form-row{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.share-form-row .auth-field{ flex:1; min-width:160px; margin-bottom:0; }
.share-form-row select{
  border:1px solid var(--border); background:var(--surface); border-radius:9px; padding:10px 10px; font-size:.86rem;
}
.share-links-section{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.share-links-section h3{ font-size:.86rem; font-weight:700; margin-bottom:2px; }
.share-links-section .form-hint{ margin-bottom:10px; }
.share-link-row{
  display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:6px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
}
.share-link-label{ flex:1; min-width:0; font-size:.86rem; font-weight:600; }
.share-link-row .icon-btn{ font-size:1rem; line-height:1; }