/* ============================================================
   MARIN · layout.css
   Struttura dell'app: topbar, navigazione, editor, anteprima,
   modalità focus (compilazione con il cliente) e breakpoint iPad
   ============================================================ */

#app{display:flex;flex-direction:column;height:100vh;height:100dvh;opacity:0;animation:appIn .5s ease .05s forwards;padding-top:var(--sat)}

/* ---------- Topbar ---------- */
.topbar{height:66px;display:flex;align-items:center;gap:14px;padding:0 20px;flex-shrink:0}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand .logo-chip{width:44px;height:44px;border-radius:14px;background:var(--card);box-shadow:var(--out-sm);display:flex;align-items:center;justify-content:center}
.brand .logo-chip svg{width:26px;height:26px}
.brand .bname{font-weight:900;letter-spacing:.16em;font-size:16px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand .bsub{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut2);font-weight:700;margin-top:1px}

.docid{display:flex;align-items:center;gap:10px;margin-left:8px}
.docid .dl{font-size:11px;font-weight:700;color:var(--mut2);text-transform:uppercase;letter-spacing:.1em}
.docid input{background:var(--card);box-shadow:var(--in-sm);border:none;border-radius:10px;font-weight:800;font-size:13.5px;padding:8px 12px;width:130px;letter-spacing:.02em;color:var(--txt)}

.status-pill{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 0;min-width:88px;text-align:center;border-radius:99px;background:var(--card);box-shadow:var(--in-sm);color:var(--mut2);white-space:nowrap}
.status-pill.st-bozza{color:var(--mut)}
.status-pill.st-inviato{color:var(--a1)}
.status-pill.st-accettato{color:var(--ok)}
.status-pill.st-pagato{color:#0D9488}
.status-pill.st-rifiutato{color:var(--danger)}
.status-pill:empty{display:none}

/* Larghezza FISSA: il testo passa da "Salvato" a "Salvataggio…"
   senza spostare di un pixel il resto della barra. */
.savestate{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:700;color:var(--mut2);padding:7px 0;width:124px;flex-shrink:0;border-radius:99px;background:var(--card);box-shadow:var(--in-sm)}
.savestate .dot{width:7px;height:7px;border-radius:50%;background:var(--mut2);transition:.3s}
.savestate.saved .dot{background:var(--ok);box-shadow:0 0 7px var(--ok)}
.savestate.saving .dot{background:var(--warn);animation:pulse 1s infinite}

.tb-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.hide-s{display:inline}

/* Freccia indietro: visibile solo in modalità focus */
.back-btn{display:none;width:44px;height:44px;border-radius:15px}
.back-btn svg{width:19px;height:19px}

.main{flex:1;display:flex;min-height:0;gap:0}

/* ---------- Navigazione ---------- */
.rail{width:206px;padding:10px 16px calc(16px + var(--sab));display:flex;flex-direction:column;gap:7px;flex-shrink:0;overflow-y:auto;transition:width .35s var(--ease-out),opacity .3s,margin .35s var(--ease-out)}
.rail-lab{font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mut2);padding:10px 14px 4px}
.nav-it{display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:15px;color:var(--mut);font-size:13px;font-weight:700;transition:.18s;text-align:left;width:100%;background:var(--card)}
.nav-it svg{width:17px;height:17px;flex-shrink:0}
.nav-it:hover{color:var(--txt);box-shadow:var(--out-xs)}
.nav-it.on{background:var(--grad);color:#fff;box-shadow:5px 5px 12px color-mix(in srgb,var(--a1) 38%,var(--dark)),-4px -4px 10px var(--lite)}
.rail-foot{margin-top:auto;padding:14px;font-size:10px;color:var(--mut2);line-height:1.6}
.rail-foot b{color:var(--mut)}

/* ---------- MODALITÀ FOCUS ----------
   Quando si compila il preventivo (pane "quote") la navigazione
   sparisce: il cliente vede solo editor + anteprima. Si torna
   al gestionale con la freccia in alto a sinistra. */
body.focus-quote .rail{width:0;padding:0;opacity:0;pointer-events:none;overflow:hidden}
body.focus-quote .back-btn{display:inline-flex;animation:paneIn .3s var(--ease-out)}
body.focus-quote .editor{padding-left:16px}

/* ---------- Editor ---------- */
/* Editor FISSO a sinistra: prende la parte grande dello schermo,
   si scorre solo in verticale. L'anteprima vive nel resto, a destra,
   e il foglio si scala da solo. */
.editor{width:clamp(430px,58%,760px);flex-shrink:0;display:flex;flex-direction:column;min-width:0;padding:0 6px 0 4px;container-type:inline-size;container-name:editor}
.ed-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 18px calc(70px + var(--sab));-webkit-overflow-scrolling:touch;
  /* Solo su e giù col dito: niente trascinamenti laterali né zoom */
  touch-action:pan-y;overscroll-behavior:contain}
@media (hover:hover) and (pointer:fine){
  .ed-scroll{scrollbar-gutter:stable}
  .ed-scroll::-webkit-scrollbar{width:9px}
  .ed-scroll::-webkit-scrollbar-thumb{background:#CBD3E2;border-radius:8px;border:2px solid var(--bg)}
}

.pane{display:none}
.pane.on{display:block;animation:paneIn .35s var(--ease-out)}
.pane-head{margin:8px 4px 18px}
.pane-head h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.pane-head p{font-size:12.5px;color:var(--mut);margin-top:3px}
.pane-head .ph-row{display:flex;align-items:flex-end;gap:12px}
.pane-head .ph-row>div{flex:1}

/* ---------- Anteprima ---------- */
.preview{flex:1;display:flex;flex-direction:column;min-width:0}
.pv-bar{height:52px;display:flex;align-items:center;gap:10px;padding:4px 22px 0;flex-shrink:0}
.pv-bar .pv-t{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2)}
.pv-btn{padding:7px 14px;font-size:11.5px}
.zoomer{margin-left:auto;display:flex;align-items:center;gap:2px;background:var(--card);box-shadow:var(--in-sm);border-radius:99px;padding:3px}
.zoomer button{width:32px;height:32px;border-radius:50%;font-weight:800;color:var(--mut);font-size:16px;transition:.15s}
.zoomer button:hover{background:rgba(255,255,255,.7);color:var(--txt)}
.zoomer .zl{font-size:11px;font-weight:800;color:var(--mut);min-width:58px;height:32px;padding:0 6px;border-radius:99px;text-align:center;font-variant-numeric:tabular-nums;transition:.15s}
.zoomer .zl:hover{background:rgba(255,255,255,.7);color:var(--txt)}
.pv-scroll{flex:1;overflow:auto;padding:22px 22px calc(60px + var(--sab));display:flex;justify-content:center;align-items:flex-start;-webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;overscroll-behavior:contain}
@media (hover:hover) and (pointer:fine){
  .pv-scroll{scrollbar-gutter:stable}
  .pv-scroll::-webkit-scrollbar{width:9px;height:9px}
  .pv-scroll::-webkit-scrollbar-thumb{background:#CBD3E2;border-radius:8px;border:2px solid var(--bg)}
  .pv-scroll::-webkit-scrollbar-corner{background:transparent}
}
#zoomwrap{position:relative;flex-shrink:0}
#zoomwrap .doc{position:absolute;top:0;left:0;transform-origin:top left;will-change:transform}

body.presenting .rail,body.presenting .editor,body.presenting .topbar .docid,body.presenting .back-btn{display:none}
body.presenting .pv-scroll{padding-top:30px}

/* ---------- Breakpoint ----------
   1194 = iPad Pro 11" landscape · 1024 = iPad landscape base
   834/768 = iPad portrait */
@media screen and (max-width:1240px){
  .rail{width:64px;padding:10px 10px}
  .rail .nav-it span,.rail-lab,.rail-foot{display:none}
  .nav-it{justify-content:center;padding:12px}
}
@media screen and (max-width:1180px){
  .brand .bsub,.docid .dl{display:none}
  .docid input{width:104px}
  .topbar{gap:10px}
  /* pill compatta: solo il pallino, larghezza fissa piccola */
  .savestate{width:34px}
  .savestate span:last-child{display:none}
}
@media screen and (max-width:1024px){
  .editor{width:clamp(400px,60%,640px)}
  .topbar{gap:9px;padding:0 12px}
  /* su iPad i bottoni della barra sono solo-icona, tutti uguali */
  .tb-actions .hide-s{display:none}
  .tb-actions .nbtn{width:44px;height:44px;padding:0;justify-content:center;border-radius:14px}
}
@media screen and (max-width:900px){
  .editor{width:clamp(360px,62%,560px)}
  .topbar{gap:8px;padding:0 10px}
  .savestate,.status-pill{display:none}
  .pv-scroll{padding:12px}
  .fgrid{grid-template-columns:1fr}
}