/*
 | Proprietà software: Gianluca Amodio
 | Gestionale Scenografia — Foglio di stile unico dell'app
 | Riuso, copia e redistribuzione non autorizzati.
 |
 | STORIA (2026-08): questo file nasce dall'unione di tre <style> che prima
 | venivano ristampati per intero, inline, dentro l'HTML di OGNI pagina
 | (inc/layout.php::ensure_doc_open, inc/layout.php::render_header,
 | inc/styles.php::render_gestionale_page_styles). Essendo testo inline
 | dentro l'HTML — e non un file esterno — il browser non poteva mai
 | riusarlo da una navigazione all'altra: ogni cambio pagina costringeva
 | anche il telefono a riparsare da zero centinaia di righe di CSS.
 | Ora è un unico file esterno, cache-abile (vedi .htaccess accanto),
 | quindi il browser lo scarica/parsea una sola volta e lo riusa per
 | tutta la sessione di navigazione. L'ORDINE dei blocchi qui sotto
 | replica volutamente l'ordine di stampa originale, per non alterare
 | quale regola "vince" in caso di pari specificità.
 */

/* =========================================================
   BLOCCO 1 — ex ensure_doc_open() [pagina di login]
   ========================================================= */
:root{--bg:#f8fafc;--card:#ffffff;--border:#e2e8f0;--text:#1e293b;--muted:#64748b;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
input,select,textarea,button{max-width:100%}
input,select,textarea{min-width:0}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%)}
.login-shell{width:min(620px,100%);background:var(--card);border:1px solid var(--border);border-radius:28px;overflow:hidden;box-shadow:0 10px 34px rgba(15,23,42,.05)}
.login-shell-vertical{display:grid;grid-template-columns:1fr}
.login-brand-block{padding:34px 38px 24px;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);display:grid;justify-items:center;text-align:center;border-bottom:1px solid rgba(226,232,240,.72)}
.login-logo{display:block;width:min(280px,74vw);height:auto;object-fit:contain}
.login-wordmark{margin-top:10px;display:grid;gap:5px}
.login-brand-title{font-size:27px;line-height:1;font-weight:760;letter-spacing:.16em;color:var(--text);text-transform:uppercase}
.login-brand-subtitle{font-size:12px;line-height:1.25;color:var(--muted);font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.login-panel{padding:30px 42px 36px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.login-heading-wrap{display:grid;gap:6px;text-align:center}
.login-heading{margin:0;font-size:30px;line-height:1.05;font-weight:950}
.login-appver{font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.login-error{color:#e11d48;background:#fff1f2;border:1px solid #fecdd3;border-radius:14px;padding:12px 14px;font-weight:800;margin:0}
.login-form{display:grid;gap:14px}
.login-field{display:grid;gap:8px}
.login-label{font-size:14px;font-weight:900;color:var(--text)}
.login-input{width:100%;min-height:56px;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:#fff;font-size:17px;line-height:1.2;color:var(--text);}
.login-input:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(15,23,42,.08)}
.login-submit{width:100%;min-height:56px;padding:14px 18px;border-radius:14px;border:none;background:#475569;color:#fff;font-size:17px;font-weight:950;cursor:pointer;transition:all 0.2s ease;}
.login-submit:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,23,42,0.06);}
.login-links{margin-top:2px;text-align:center;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.login-links a{font-size:13px;color:#64748b;text-decoration:none;font-weight:800}
.login-links a:hover{text-decoration:underline;text-underline-offset:3px}
.login-links span{font-size:13px;color:#cbd5e1}
.login-install-box{margin-top:2px;padding:16px;border-radius:18px;background:#f8fafc;border:1px solid #e2e8f0}
.login-install-title{font-size:13px;color:var(--text);font-weight:950;text-align:center;margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.login-install-button{width:100%;min-height:46px;margin:0 0 10px;padding:11px 14px;border:0;border-radius:14px;background:#0f5f66;color:#fff;font-size:14px;font-weight:950;cursor:pointer;transition:all .18s ease}
.login-install-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.login-install-button:disabled{opacity:.65;cursor:wait;transform:none;box-shadow:none}
.login-install-note{margin:0 0 12px;color:#64748b;font-size:12px;line-height:1.4;font-weight:750;text-align:center}
.login-install-grid{display:grid;gap:9px}
.login-install-grid details{background:#fff;border:1px solid #e2e8f0;border-radius:15px;padding:12px 14px}
.login-install-grid details[open]{border-color:#cbd5e1;box-shadow:0 2px 8px rgba(15,23,42,.035)}
.login-install-grid summary{cursor:pointer;font-size:13px;font-weight:950;color:#475569;list-style:none;display:flex;align-items:center;gap:8px;padding-right:18px;position:relative}
.login-install-grid summary::-webkit-details-marker{display:none}
.login-install-grid summary:after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);color:#94a3b8;font-weight:950;font-size:16px;line-height:1}
.login-install-grid details[open] summary:after{content:'−'}
.browser-badge{display:inline-flex;align-items:center;justify-content:center;min-width:68px;padding:5px 9px;border-radius:999px;font-size:11px;line-height:1;font-weight:950;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent}
.browser-badge.chrome{background:#e8f0fe;color:#1a73e8;border-color:#d2e3fc}
.browser-badge.edge{background:#e6f6f7;color:#0078d4;border-color:#bde8ec}
.browser-badge.safari{background:#eaf3ff;color:#006cff;border-color:#cfe2ff}
.login-install-grid p{margin:10px 0 0;color:#64748b;font-size:13px;line-height:1.42;font-weight:700}
.login-install-grid strong{color:var(--text);font-weight:950}
@media (max-width: 860px){.login-page{padding:16px;align-items:stretch}.login-brand-block{padding:26px 20px 20px}.login-logo{width:min(235px,70vw)}.login-brand-title{font-size:23px;letter-spacing:.14em}.login-panel{padding:24px 20px 28px}.login-heading{font-size:28px}}
@media (max-width: 520px){.login-page{padding:12px}.login-shell{border-radius:20px}.login-panel{padding:20px 16px 24px}.login-input,.login-submit{min-height:52px;font-size:16px}.login-brand-subtitle{font-size:10px;letter-spacing:.08em}}

/* =========================================================
   BLOCCO 2 — ex inc/styles.php::render_gestionale_page_styles()
   ========================================================= */
/* ===== utility comuni ===== */
.form-reset{margin:0 !important;}
.m-0{margin:0 !important;}
.mt-8{margin-top:8px !important;}
.mt-10{margin-top:10px !important;}
.mt-12{margin-top:12px !important;}
.mb-12{margin-bottom:12px !important;}
.mb-14{margin-bottom:14px !important;}
.section-title{font-weight:900;font-size:16px;margin:0 0 10px 0;}
.alert-card{margin-bottom:14px;border-left:4px solid #1e293b;}
.alert-card .alert-body{font-weight:700;}
.alert-card.alert-error{border-left-color:#e11d48;}
.alert-card.alert-error .alert-body{color:#e11d48;}
.alert-card.alert-success{border-left-color:#059669;}
.alert-card.alert-success .alert-body{color:#059669;}
.inline-actions{display:flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:10px;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.5);}
.page-shell{max-width:720px;margin:18px auto;padding:0 14px;}
.panel-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow: 0 2px 8px rgba(15,23,42,0.03);}
.field-label{display:block;font-weight:900;margin:12px 0 6px 0;}
.field-label.compact{margin:10px 0 6px 0;}
.field-input{width:100%;padding:12px;border-radius:12px;border:1px solid #e2e8f0;font-size:16px;}
.primary-submit{margin-top:14px;width:100%;padding:12px;border-radius:12px;border:none;background:#1e293b;color:#fff;font-weight:950;font-size:16px;transition:all 0.2s;}
.primary-submit:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,23,42,0.06);}
.help-text{margin-top:10px;color:#64748b;font-weight:700;font-size:13px;line-height:1.35;}
.muted-lead{color:#64748b;font-weight:700;margin-bottom:14px;}
.notice-ok{background:#ecfdf5;border:1px solid #10b98133;color:#065f46;border-radius:12px;padding:10px;font-weight:800;margin:10px 0;}
.notice-error{background:#fef2f2;border:1px solid #ef444433;color:#7f1d1d;border-radius:12px;padding:10px;font-weight:800;margin:10px 0;}
/* [P0-3, 2026-09-03] Blocco residuo rimosso: era una seconda versione,
   mai finita, del login a DUE colonne (.login-visual/.login-brand/
   .login-kicker/.login-title/.login-subtitle/.login-apphead/.login-lead/
   .login-note), che sovrascriveva su desktop la versione corretta a
   colonna singola del BLOCCO 1 qui sopra (righe 20-72) — stessa
   specificità, vince perché viene dopo nel file. Verificato con grep su
   tutto l'albero app/ e web/: nessuna di queste classi compare in nessun
   markup PHP del progetto, login.php incluso — era codice morto lato CSS
   ma "vivo" lato cascata, quindi rompeva solo la resa visiva, non la
   funzionalità. Rimosso interamente (incluse le due @media che lo
   correggevano solo sotto 860px). Il login ora usa ovunque, desktop
   compreso, l'unica versione a colonna singola già corretta per mobile/
   tablet (BLOCCO 1). Rollback: ripristinare questo blocco da un backup
   precedente al 2026-09-03 se necessario. */
/* ===== dashboard.php ===== */
.page{padding:0;background:transparent;min-height:auto;box-sizing:border-box;}
.container{max-width:1100px;margin:auto;}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;}
h1{margin:0;font-size:22px; color: #1e293b;}
.grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr;}}
.card{background:#ffffff;border-radius:16px;padding:16px;border:1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(15,23,42,0.03); transition: all 0.2s ease;}
.card:hover{transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,0.06);}
.title{font-weight:800;font-size:18px;margin:0 0 6px 0; color: #1e293b;}
.meta{color:#64748b;font-size:14px;line-height:1.35;}
.actions{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;}
.link{display:inline-block;padding:7px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:13px;background:#f1f5f9;color:#1e293b;border:1px solid transparent; transition: all 0.2s ease;}
.link:hover{background:#e2e8f0; transform: translateY(-1px);}
.link.primary{background:#475569;color:#fff;border-color:transparent;}
.link.primary:hover{background:#334155;}
.link.secondary{background:#fff;border:1px solid #e2e8f0;color:#1e293b;}
.link.secondary:hover{border-color:#cbd5e1; box-shadow: 0 2px 8px rgba(15,23,42,0.03);}
.link.info{background:#fff;border:1px solid #e2e8f0;color:#64748b;}
.link.info:hover{border-color:#cbd5e1; color:#1e293b; box-shadow: 0 2px 8px rgba(15,23,42,0.03);}

.budget-total{font-weight:800; color: #1e293b;}
.budget-residuo{color:#64748b;font-weight:700;}
.budget-note{color:#64748b;font-weight:500;font-size:12px;}

.danger{background:#fff1f2 !important;color:#e11d48 !important;border:1px solid #fecdd3 !important; transition: all 0.2s ease;}
.danger:hover{background:#ffe4e6 !important;color:#be123c !important;border-color:#fda4af !important; transform: translateY(-1px);}
.neg{color:#e11d48;font-weight:800;}
/* ===== dashboard_progetto.php ===== */
/* Solo CSS “specifico pagina” (tutto il resto è in config) */
.kpi h3{margin:0 0 8px 0;font-size:12px;letter-spacing:.2px;color:#64748b;text-transform:uppercase}
.kpi .val{font-weight:900;font-size:20px;color:#1e293b;line-height:1.15}
.sep{height:12px}

.kpi--chip{padding:12px;border-radius:12px;border:1px solid transparent}
.kpi--total{background:#f8fafc;border-color:#e2e8f0}
.kpi--residuo{background:#f1fbf6;border-color:#d7f0de}
.kpi--residuo.neg{background:#fff1f2;border-color:#fecdd3}
.kpi--neg{color:#e11d48}

/* Budget totale: tono basso */
.kpi--budgettot{
  padding:12px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
}
.kpi--budgettot h3{color:#64748b}
.kpi--budgettot .val{color:#1e293b;font-size:18px}

/* IN CORSO: impegna/scala il budget residuo */
.kpi--incorso{
  padding:12px;
  border-radius:12px;
  border:1px solid #fde047;
  background:#fef9c3;
}
.kpi--incorso h3{color:#854d0e}
.kpi--incorso .val{color:#1e293b;font-size:18px}

/* Pulsante (se nel config non c’è ancora) */
.btn-primary{
  background:#475569;
  color:#fff;
  border:1px solid #475569;
  font-weight:900;
  cursor:pointer;
  transition: all 0.2s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,23,42,0.06);}

/* Mobile list ricariche */
.m-item{border:1px solid #e2e8f0;border-radius:14px;padding:12px;margin-bottom:10px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,0.03);}
.m-strong{font-weight:950;color:#1e293b;}
.m-meta{color:#64748b;font-size:14px;margin-top:8px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:900;border:1px solid #e2e8f0;background:#f8fafc;color:#1e293b
}
.badge.ok{border-color:#cfe8d6;background:#ecfff1}
/* ===== carta_spese.php & fornitori.php (RIPRISTINO IMPAGINAZIONE) =====
   [P1-5, 2026-09-03] CSS-003: questo blocco è stato scritto per le vecchie
   pagine carta_spese.php/fornitori.php, quando generavano DUE volte la
   stessa riga (una <table> desktop + una .mobile-list a schede) e usavano
   questo CSS per nascondere l'una o l'altra a seconda della larghezza.
   Da quando quelle due pagine sono state migrate al componente unico
   .data-rows (vedi commenti "NUOVO (2026-08-31)" in quei file), NESSUNA
   pagina del modulo genera più <table> insieme a .mobile-list — verificato
   con una ricerca su tutto l'albero app/: il blocco era rimasto attivo ma
   ORFANO, un selettore `table` nudo (non scoped a nessuna classe) applicato
   con !important a ogni <table> di ogni pagina.
   Risultato pratico: sotto 901px, QUALUNQUE tabella del modulo spariva
   senza alternativa — non solo "Spese Fornitori"/"Spese Carte" in
   report_progetto.php (il caso segnalato in origine, CSS-003), ma anche
   la tabella "Team di Lavoro" in progetto_edit.php e quella dei progetti
   orfani in pulizia_orfani.php: tutte e tre avevano già un wrapper
   `overflow-x:auto`/.table-scroll pensato apposta per lo scroll
   orizzontale su schermi stretti, wrapper reso inutile da questo
   `display:none`. La tabella di dashboard_progetto.php non era interessata:
   è già dentro `.desktop-only`, nascosta da quella classe indipendentemente
   da questo blocco.
   Rimosso interamente: non essendoci più nessuna pagina che ne ha bisogno,
   non c'è un sostituto da scrivere — le tabelle tornano visibili (con
   scroll orizzontale dove già previsto) a ogni larghezza, comportamento
   di default del browser. */

  .btn-del{
    background:#e11d48; color:#fff; border:none; border-radius:10px;
    padding:10px 12px; cursor:pointer; font-weight:900; transition: all 0.2s;
  }
  .btn-del:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(225,29,72,0.2);}
  .note-large{min-height:70px}
  .filter-active{ background:#f1f5f9 !important; border-color:#cbd5e1 !important; }
  .filter-active:focus{ outline:2px solid #cbd5e1; outline-offset:1px; }

  /* Layout condiviso inserimento spese / fornitori */
  .entry-grid{display:grid;gap:12px;align-items:stretch;}
  .entry-grid > *{min-width:0;}
  .entry-grid input,
  .entry-grid select,
  .entry-grid textarea,
  .entry-meta-grid input,
  .entry-meta-grid select,
  .entry-meta-grid textarea{
    width:100%;
    min-width:0;
    min-height:48px;
    height:48px;
    margin:0;
  }
  .entry-grid input[type="date"],
  .entry-meta-grid input[type="date"]{
    line-height:1.2;
    -webkit-appearance:none;
    appearance:none;
  }
  .entry-grid textarea,
  .entry-meta-grid textarea{
    min-height:110px;
    height:auto;
  }
  .entry-grid select,
  .entry-meta-grid select{
    -webkit-appearance:none;
    appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
    background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat;
    padding-right:34px;
  }
  .entry-aliquota{
    text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .entry-stack{display:grid;gap:12px;align-content:start;}
  .entry-meta-grid{display:grid;gap:16px;align-items:stretch;}
  .form-panel{display:grid;row-gap:18px;}
  .section-head{margin-bottom:14px;}

  @media (min-width: 901px){
    .card:has(.form-panel){padding:24px 22px;}
    .entry-row-carte-top{grid-template-columns:1.35fr .95fr 1.55fr 1fr .7fr 1fr;}
    .entry-row-carte-bottom{grid-template-columns:1.3fr 1.15fr .95fr 1.15fr 1.25fr;}
    .entry-row-fornitori-top{grid-template-columns:.95fr 1.8fr 1.15fr .7fr 1.15fr;}
    .entry-row-fornitori-bottom{grid-template-columns:1fr 1.1fr .95fr 1.15fr 1.3fr;}
    .entry-meta-grid{grid-template-columns:1.05fr 1.25fr;}
    .entry-row-carte-bottom,
    .entry-row-fornitori-bottom{margin-top:16px !important;}
    .entry-meta-grid{margin-top:18px !important;}
    .span-6.u-text-right{margin-top:14px !important;}
  }
  @media (max-width: 900px){
    .entry-row-carte-top,
    .entry-row-carte-bottom,
    .entry-row-fornitori-top,
    .entry-row-fornitori-bottom,
    .entry-meta-grid{grid-template-columns:1fr;}
    .form-panel{row-gap:20px;}
    .entry-row-carte-bottom,
    .entry-row-fornitori-bottom{margin-top:16px !important;}
    .entry-meta-grid{margin-top:18px !important;}
  }

  .fornitori-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .fornitori-actions button{
    flex:1 1 220px; padding:14px; font-size:16px; border-radius:10px; border:1px solid #e2e8f0;
    font-weight:900; cursor:pointer; background:#fff; color:#1e293b; transition: all 0.2s;
  }
  .fornitori-actions button:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(15,23,42,0.03);}
  @media (max-width: 900px){ .fornitori-actions button{width:100%} }

  /* Stati Fornitori */
  .statoTag{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:900;font-size:12px}
  .statoTag.IN_CORSO{background:#fef08a;color:#854d0e;}
  .statoTag.APPROVATO{background:#059669;color:#fff}
  .statoTag.ANNULLATO{background:#e11d48;color:#fff}
  .statoTag.EXTRA{background:#f3e8ff;color:#6b21a8}
  .statoTag.ALTRO_COSTO{background:#ffedd5;color:#9a3412}

  select.statoTag{ border:1px solid #e2e8f0; outline:none; -webkit-appearance:none; appearance:none; background:#fff; }
  select.statoTag.IN_CORSO{background:#fef08a;color:#854d0e;border-color:#fde047}
  select.statoTag.APPROVATO{background:#059669;color:#fff;border-color:#047857}
  select.statoTag.ANNULLATO{background:#e11d48;color:#fff;border-color:#be123c}
  select.statoTag.EXTRA{background:#f3e8ff;color:#6b21a8;border-color:#d8b4fe}
  select.statoTag.ALTRO_COSTO{background:#ffedd5;color:#9a3412;border-color:#fdba74}
/* ===== aggiunti.php ===== */
:root { --sat-bg: #fef08a; --sun-bg: #fee2e2; --wa-color: #059669; }
  .tabs { display: flex; gap: 5px; background: #f8fafc; padding: 5px; border-radius: 16px; margin-bottom: 20px; border:1px solid #e2e8f0; }
  .tab { flex: 1; text-align: center; padding: 12px; border-radius: 12px; text-decoration: none; color: #64748b; font-weight: 800; font-size: 14px; transition:all 0.2s; }
  .tab.active { background: #fff; color: #1e293b; box-shadow: 0 2px 8px rgba(15,23,42,0.03); }

  .week-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 5px 0 15px; scrollbar-width: none; }
  .wday { flex: 0 0 85px; display: flex; flex-direction: column; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid #e2e8f0; background: #fff; text-decoration: none; color: #1e293b; transition:all 0.2s;}
  .wday.sat { background: var(--sat-bg); border-color: #fde047; }
  .wday.sun { background: var(--sun-bg); border-color: #fca5a5; }
  .wday.active { border: 2px solid #1e293b; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(15,23,42,0.06); }
  .wday b { font-size: 18px; }
  .wday span { font-size: 11px; text-transform: uppercase; opacity: 0.6; }

  .card { background: #fff; border-radius: 16px; padding: 20px; border: 1px solid #e2e8f0; margin-bottom: 15px; box-shadow:0 2px 8px rgba(15,23,42,0.03); }
  .item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #f1f5f9; }
  .btn-wa { background: var(--wa-color); color: #fff; padding: 10px 15px; border-radius: 10px; text-decoration: none; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; transition:all 0.2s;}
  .btn-wa:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,23,42,0.06);}
  .btn-wa.sent { background: #94a3b8; }

  @media (max-width: 600px) {
    .item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .btn-wa { width: 100%; justify-content: center; }
  }
/* ===== progetto_edit.php ===== */
/* Evidenzia campi bloccati (readonly) solo su questa pagina */
  .progetto-form input[readonly],
  .progetto-form textarea[readonly] {
    background: #f8fafc;
    color: inherit;
    opacity: 1; /* evita lo sbiadimento automatico su alcuni browser */
    cursor: not-allowed;
    border-color:#e2e8f0;
  }
  .progetto-form input[readonly]:focus,
  .progetto-form textarea[readonly]:focus {
    outline: none;
    box-shadow: none;
  }
/* ===== report_produzione.php ===== */
.rp-wrap{max-width:920px;margin:18px auto;padding:0 14px;}
  .rp-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(15,23,42,0.03);}
  .rp-h{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:space-between}
  .rp-title{font-size:20px;font-weight:950;margin:0;color:#1e293b;}
  .rp-meta{color:#64748b;font-weight:800;font-size:13px}
  .rp-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
  @media(min-width:720px){.rp-grid{grid-template-columns:1fr 1fr}}
  .rp-box{border:1px solid #e2e8f0;border-radius:14px;padding:14px;background:#f8fafc;}
  .rp-k{color:#64748b;font-weight:900;font-size:12px;letter-spacing:.2px;text-transform:uppercase}
  .rp-v{font-weight:950;font-size:22px;margin-top:4px;color:#1e293b;}
  .rp-v.small{font-size:18px}
  .rp-row{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-weight:800;color:#1e293b;}
  .rp-row span{color:#64748b}
  .rp-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
  /* ✅ Print: nascondi header app e pulsanti stampa solo in modalità stampa */
  @media print{
    .app-header,.rp-actions{display:none !important}
    body{background:#fff}
    .rp-card{border:none;box-shadow:none;}
  }
/* ===== report_progetto.php ===== */
/* Rinominato classi per evitare cache vecchie */
  .rpt-container-fix {
    font-family: system-ui, -apple-system, sans-serif;
    color: #1e293b;
    max-width: 980px;
    margin: 20px auto; /* Margin top 20px per staccarsi dal menu */
    padding: 0 20px 40px 20px;
  }
  .rpt-container-fix h1 { margin: 0; font-size: 24px; }
  .rpt-sub { color: #64748b; margin-top: 5px; font-weight: 600; font-size: 14px; }

  .rpt-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; }
  .rpt-btn {
    padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 12px;
    text-decoration: none; color: #1e293b; font-weight: 600; font-size: 13px; background: #f8fafc; transition:all 0.2s;
  }
  .rpt-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(15,23,42,0.03);}

  .rpt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
  .rpt-card { border: 1px solid #e2e8f0; border-radius: 16px; padding: 15px; background: #fff; box-shadow:0 2px 8px rgba(15,23,42,0.03); }
  .rpt-card h3 { font-size: 12px; text-transform: uppercase; color: #64748b; font-weight: 700; margin: 0 0 5px 0; }
  .rpt-val { font-size: 20px; font-weight: 800; color:#1e293b;}
  .neg { color: #e11d48; }

  .rpt-sec { margin-top: 30px; font-size: 16px; font-weight: 700; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; color:#1e293b;}
  table.rpt-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
  table.rpt-table th { text-align: left; background: #f8fafc; padding: 8px; font-size: 11px; text-transform: uppercase; color: #64748b; border-bottom:1px solid #e2e8f0;}
  table.rpt-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }

  @media print {
    /* Nascondi header app SOLO in stampa */
    .app-header, .rpt-actions { display: none !important; }
    /* Reset body SOLO in stampa */
    body { background: #fff; margin: 0; }
    .rpt-container-fix { max-width: none; padding: 0; margin: 0; }
    .rpt-card { border: 1px solid #000; box-shadow:none;}
  }


/* ===== UI COERENZA (patch 2026-02-28) ===== */
.rpt-container-fix{margin-top:0;} /* app-main già gestisce lo spacing sotto l'header */
.rpt-btn, .rpt-btn a{
  border-radius: 10px;
  font-weight: 700;
}
.rpt-btn{min-height:42px; display:inline-flex; align-items:center;}
/* Tabelle: leggibilità */
table.rpt-table tr:hover td{background: rgba(15, 23, 42, .035);}
table.rpt-table td.amount, table.rpt-table th.amount{text-align:right; font-variant-numeric: tabular-nums;}
/* KPI cards: respiro coerente */
.rpt-card{border-radius:16px;}
/* ===== utenti.php ===== */
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --line:#e2e8f0;
  --text:#1e293b;
  --mut:#64748b;
  --btn:#475569;
  --btn2:#f1f5f9;
  --danger:#e11d48;
}

/* Page container */
body{background:var(--bg); color:var(--text);}
.app-main{max-width:1200px; margin:0 auto;}

/* Forza: desktop e mobile non insieme MAI */
.desktop-only{display:block; overflow-x:auto;}
.mobile-only{display:none}
@media(max-width:900px){
  .desktop-only{display:none}
  .mobile-only{display:block}
}

/* Card polishing (works with existing app.css) */
.card{background:var(--card); border-radius:16px; box-shadow:0 2px 8px rgba(15,23,42,0.03); border:1px solid var(--line);}

/* Form "Nuovo utente" */
.stack{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  align-items:center;
}
.stack input,
.stack select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-size:14px;
  outline:none;
}
.stack input:focus,
.stack select:focus{border-color:var(--text); box-shadow:0 0 0 3px rgba(15,23,42,.05);}

/* Fallback per i tuoi span-N se non sono definiti da app.css */
.span-2{grid-column:span 2;}
.span-6{grid-column:span 6;}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:0;
  background:var(--btn);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition:all 0.2s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,23,42,0.06);}

/* Table: leggibile, compatta, con header chiaro */
.desktop-only table{
  width:100%;
  min-width:980px;
  border-collapse:separate;
  border-spacing:0;
}
.desktop-only thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f8fafc;
  color:var(--mut);
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  padding:12px 12px;
  border-bottom:1px solid var(--line);
}
.desktop-only tbody td{
  padding:14px 12px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:top;
}
.desktop-only tbody tr:hover{background:rgba(15,23,42,.02)}

/* Progetti: non deve esplodere */
.proj-cell{
  max-width:360px;
  white-space:normal;
  word-break:break-word;
  color:var(--text);
}

/* Azioni: compatte e coerenti */
.u-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.u-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:all 0.2s;
}
.u-btn:disabled{opacity:.5;cursor:not-allowed}
.u-btn-secondary{background:var(--btn2);color:var(--text);border-color:var(--line);}
.u-btn-primary{background:var(--btn);color:#fff;}
.u-btn-danger{background:#fff1f2;color:var(--danger);border-color:#fecdd3;}
.u-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(15,23,42,0.03);}

/* Select ruolo in tabella: più pulito */
.role-form{margin:0}
.role-form select{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  width:120px;
  background:#fff;
}

/* azioni mobile: niente bottoni larghi a tappeto */
.m-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Badge (se app.css non li gestisce bene in tema chiaro) */
.badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid var(--line);background:#f8fafc;}
.badge.ok{background:#ecfdf5;border-color:#a7f3d0;color:#059669;}
.badge.danger{background:#fff1f2;border-color:#fecdd3;color:var(--danger);}


/* ===== Mappa colori UI unificata =====
   APPROVATO verde | IN CORSO blu | ANNULLATO rosso/rosa
   EXTRA viola | ALTRO/ALTRO COSTO pesca | SCENOGRAFIA/ARREDAMENTO neutri */
.status-select{padding:4px 8px;font-size:11px;outline:none;border:1px solid var(--app-border);border-radius:8px;background:var(--app-soft-2);font-weight:800;line-height:1.2;min-height:28px;}
.status-select.status-approved{background:#ecfdf5;border-color:#a7f3d0;color:#047857;}
.status-select.status-pending{background:#fef9c3;border-color:#fde047;color:#854d0e;}
.status-select.status-cancelled{background:#fff1f2;border-color:#fecdd3;color:#be123c;}
.status-select.status-extra{background:#f3e8ff;border-color:#d8b4fe;color:#6b21a8;}
.status-select.status-altro{background:#ffedd5;border-color:#fdba74;color:#9a3412;}
.badge.status-approved,.badge.ok{background:#ecfdf5;border-color:#a7f3d0;color:#047857;}
.badge.status-pending{background:#fef9c3;border-color:#fde047;color:#854d0e;}
.badge.status-cancelled,.badge.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c;}
.badge.status-extra{background:#f3e8ff;border-color:#d8b4fe;color:#6b21a8;}
.badge.status-altro{background:#ffedd5;border-color:#fdba74;color:#9a3412;}

/* [2026-09-04] Le classi .kpi-mini* (usate qui per una versione precedente,
   stesso giorno, della card "Speso/Impegnato" e "Disponibilità Residua" di
   report_produzione.php — due riquadri verde/ambra affiancati) sono state
   rimosse: dopo il riscontro diretto di Gianluca ("è tutto poco chiaro"),
   quella card è stata riprogettata con una gerarchia in verticale (numero
   certo grande, poi il totale con In corso subito sotto) usando lo stile
   già esistente della card, senza bisogno di componenti nuovi. Rimosse
   qui per non lasciare CSS orfano (lo stesso problema segnalato
   dall'audit in CSS-005/CSS-006/CSS-009). */
.reparto-select{padding:4px 8px;font-size:11px;outline:none;border:1px solid var(--app-border);border-radius:8px;background:var(--app-soft-2);max-width:180px;}
.reparto-select.rep-EXTRA,.reparto-badge.rep-EXTRA{background:#faf5ff;border-color:#e9d5ff;color:#7c3aed;}
.reparto-select.rep-ALTRO,.reparto-badge.rep-ALTRO{background:#fff7ed;border-color:#fed7aa;color:#ea580c;}

/* Mobile cards: più aria e separazione */
.m-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin:10px 0;box-shadow:0 2px 8px rgba(15,23,42,0.03);}
.m-strong{font-weight:900;margin-bottom:6px;color:var(--text);}
.m-meta{color:var(--mut);font-size:13px;display:grid;gap:4px}

/* ===== dashboard_progetto — KPI semantici ===== */
.kpi-dyn{padding:24px !important;border-radius:20px !important;}
.kpi-dyn h3{font-size:13px !important;margin-bottom:12px !important;letter-spacing:0.05em;font-weight:800;text-transform:uppercase;}
.kpi-dyn .val{font-size:32px !important;letter-spacing:-0.02em;font-weight:800;color:var(--app-text) !important;}
.kpi-totale{background:#f8fafc !important;border:1px solid #e2e8f0 !important;}
.kpi-totale h3{color:#3b82f6 !important;}
.kpi-speso-ok{background:#ffffff !important;border:1px solid var(--app-border) !important;}
.kpi-speso-ok h3{color:var(--app-muted) !important;}
.kpi-speso-warning{background:#fffbeb !important;border:1px solid #fde68a !important;}
.kpi-speso-warning h3{color:#d97706 !important;}
.kpi-speso-danger{background:#fff1f2 !important;border:1px solid #fecdd3 !important;}
.kpi-speso-danger h3{color:#e11d48 !important;}
.kpi-residuo-ok{background:#f0fdf4 !important;border:1px solid #bbf7d0 !important;}
.kpi-residuo-ok h3{color:#059669 !important;}
.kpi-residuo-warning{background:#fffbeb !important;border:1px solid #fde68a !important;}
.kpi-residuo-warning h3{color:#d97706 !important;}
.kpi-residuo-danger{background:#fff1f2 !important;border:1px solid #fecdd3 !important;}
.kpi-residuo-danger h3{color:#e11d48 !important;}
.kpi-pending{background:#eff6ff !important;border:1px solid #bfdbfe !important;}
.kpi-pending h3{color:#2563eb !important;}
.kpi-extra{background:#faf5ff !important;border:1px solid #e9d5ff !important;}
.kpi-extra h3{color:#7c3aed !important;}
.kpi-altri{background:#fff7ed !important;border:1px solid #fed7aa !important;}
.kpi-altri h3{color:#ea580c !important;}
.kpi-reparto{background:#ffffff !important;border:1px solid var(--app-border) !important;}
.kpi-reparto h3{color:var(--app-muted) !important;}
.kpi-layout{margin-bottom:24px;}
.kpi-row-1{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px;}
@media(min-width:900px){.kpi-row-1{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}}

/* =========================================================
   BLOCCO 3 — ex inc/layout.php::render_header()
   ========================================================= */
:root{
  --app-bg:#f8fafc;
  --app-card:#ffffff;
  --app-border:#e2e8f0;
  --app-border-strong:#cbd5e1;
  --app-text:#1e293b;
  --app-muted:#64748b;
  --app-accent:#475569;
  --app-soft:#f1f5f9;
  --app-soft-2:#f8fafc;
  --app-success:#059669;
  --app-danger:#e11d48;
  --app-radius:16px;
  --app-radius-sm:12px;
  --app-shadow-soft:0 2px 8px rgba(15,23,42,.03);
  --app-shadow-hover:0 4px 12px rgba(15,23,42,.06);
  --c-gestionale: #475569;
  --c-report: #6366f1;
  --c-aggiunti: #0d9488;
  --c-programmi: #3b82f6;
}

body{background:var(--app-bg);color:var(--app-text);}
.app-main{max-width:1180px;margin:0 auto;padding:20px 16px 36px;}
.page{padding:0;min-height:auto;background:transparent;}
.container{max-width:1120px;margin:0 auto;}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 20px;flex-wrap:wrap;}
.page h1{margin:0;font-size:clamp(28px,3.2vw,38px);line-height:1.04;font-weight:700;letter-spacing:-.02em;color:var(--app-text);}
.page h2,.u-title-sm{margin:0 0 14px;font-size:20px;line-height:1.12;font-weight:650;letter-spacing:-.01em;color:var(--app-text);}

.grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width: 900px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

.card, .panel-card, .kpi, .ui-toggle, .u-card-soft{
  background:var(--app-card); border:1px solid var(--app-border);
  border-radius:var(--app-radius); box-shadow:var(--app-shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover, .panel-card:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-hover); }
.card, .panel-card, .u-card-soft{padding:18px;}
.panel-card{color:var(--app-muted);}
.actions{margin-top:14px;display:grid;gap:10px;}
.actions-row,.u-flex-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.u-flex-between{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.u-flex-col-8{display:grid;gap:8px;}
.u-text-right{text-align:right;}
.u-text-success{color:#16a34a !important;}
.u-text-danger{color:#dc2626 !important;}

.btn, .link, .apple-app-pill, .apple-sub-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:10px 14px; border-radius:999px;
  border:1px solid var(--app-border); background:#fff; color:var(--app-text);
  text-decoration:none; font-size:14px; line-height:1; font-weight:600;
  white-space:nowrap; transition:all .18s ease; cursor:pointer;
}
.btn:hover,.link:hover,.apple-sub-pill:hover{transform:translateY(-1px);box-shadow:var(--app-shadow-soft);}
.btn,.link.primary,.btn.primary{background:var(--app-accent);border-color:var(--app-accent);color:#fff;}
.btn.secondary,.link.secondary{background:var(--app-soft);border-color:var(--app-border);color:var(--app-text);}
.danger,.btn.danger{background:#fff1f2 !important;color:var(--app-danger) !important;border-color:#fecdd3 !important;}

.budget-total{font-size:16px;font-weight:650;color:var(--app-text);}
.budget-residuo{margin-top:6px;font-size:15px;font-weight:600;color:var(--app-muted);}
.neg,.kpi--neg{color:var(--app-danger) !important;}

.field-input, input[type="text"],input[type="date"],input[type="email"],input[type="password"],input[type="number"],select,textarea{
  width:100%;max-width:100%;min-width:0; min-height:44px; padding:11px 13px;
  border-radius:var(--app-radius-sm); border:1px solid var(--app-border-strong);
  background:#fff; color:var(--app-text); font-size:16px; box-shadow:none;
}
textarea{min-height:96px;resize:vertical;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 4px rgba(15,23,42,.05);}

table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff;border:1px solid var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow-soft);}
th,td{padding:12px 14px;text-align:left;font-size:14px;vertical-align:top;}
thead th{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--app-muted);background:var(--app-soft-2);border-bottom:1px solid var(--app-border);}
tbody td{border-bottom:1px solid rgba(15,23,42,.04);}
tbody tr:last-child td{border-bottom:none;}

.ui-toggle{overflow:hidden;}
.ui-toggle summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;font-weight:650;font-size:15px;color:var(--app-text);background:transparent;
}
.ui-toggle summary::-webkit-details-marker{display:none;}
.ui-toggle summary::after{content:"+";font-size:18px;color:var(--app-muted);line-height:1;}
.ui-toggle[open] summary::after{content:"−";}
.ui-toggle[open] summary{border-bottom:1px solid var(--app-border);}

.kpi{padding:16px 18px;border-radius:16px;}
.kpi h3{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--app-muted);}
.kpi .val{font-size:28px;line-height:1.04;font-weight:700;letter-spacing:-.025em;color:var(--app-text);}
.kpi--chip{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);}
.kpi--total{background:#f8fafc;border-color:#e2e8f0;}
.kpi--residuo{background:#ecfdf5;border-color:#a7f3d0;}
.kpi--residuo.neg{background:#fff1f2;border-color:#fecdd3;}
.kpi--budgettot{background:#f8fafc;border-color:#e2e8f0;}
.kpi--incorso{background:#f1f5f9;border-color:#e2e8f0;}
.kpi--budgettot .val,.kpi--incorso .val{font-size:24px;}

.notice-ok,.notice-error{padding:12px 14px;border-radius:12px;font-size:14px;font-weight:650;border:1px solid transparent;margin:0 0 14px;}
.notice-ok{background:#ecfdf5;border-color:#a7f3d0;color:var(--app-success);}
.notice-error{background:#fff1f2;border-color:#fecdd3;color:var(--app-danger);}

.u-muted,.u-muted-12,.u-muted-13,.u-muted-14{color:var(--app-muted);}
.u-muted-12{font-size:12px;line-height:1.4;}
.u-title-sm{font-size:21px;font-weight:650;letter-spacing:-.015em;}
.u-mt-4{margin-top:4px}.u-mt-10{margin-top:10px}.u-mt-14{margin-top:14px}.u-mb-14{margin-bottom:14px}
.u-pt-16{padding-top:16px}.u-w-100{width:100%}.u-border-top-soft{border-top:1px solid var(--app-border)}

.grid-split{grid-template-columns:1fr;gap:12px;}
@media (min-width: 760px){.grid-split{grid-template-columns:1fr 1fr;}}

/* NUOVO HEADER CALM 2026 - UX REVISIONATA */
.apple-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(248, 250, 252, 0.82);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--app-border); padding: 12px 16px;
}
.apple-header-top {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}

/* 1. BREADCRUMBS: Dashboard / Nome Progetto */
.apple-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.crumb-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--app-muted); text-decoration: none; font-weight: 650; transition: color 0.2s;
}
.crumb-link:hover { color: var(--app-text); }
.crumb-link.active { color: var(--app-text); font-weight: 750; }
.crumb-sep { color: var(--app-border-strong); font-size: 14px; user-select: none; }

/* 2. APP SWITCHER (Segmented Control iOS Style) */
.ios-segmented {
    display: inline-flex; background: var(--app-soft);
    padding: 4px; border-radius: 12px; gap: 2px;
}
.ios-segment {
    padding: 6px 14px; border-radius: 8px; font-size: 13px;
    font-weight: 700; color: var(--app-muted); text-decoration: none; transition: all 0.2s ease;
}
.ios-segment.active { background: var(--app-card); color: var(--app-text); box-shadow: var(--app-shadow-soft); }
.ios-segment.app-gestionale.active { color: var(--c-gestionale); }
.ios-segment.app-report.active { color: var(--c-report); }
.ios-segment.app-aggiunti.active { color: var(--c-aggiunti); }
.ios-segment.app-programmi.active { color: var(--c-programmi); }

/* Tasti azione a destra */
.apple-header-right { display: flex; align-items: center; gap: 8px; }
.header-btn {
    font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 12px;
    border-radius: 8px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px;
}
.profile-btn { color: var(--app-text); background: var(--app-soft); border: 1px solid var(--app-border); }
.profile-btn:hover { background: #fff; box-shadow: var(--app-shadow-soft); }
.logout-btn { color: var(--app-danger); background: #fff1f2; border: 1px solid #fecdd3; }
.logout-btn:hover { background: #ffe4e6; }

.show-on-mobile { display: none; }

/* 3. SUB-NAV (Primaria e Secondaria) */
.apple-header-sub {
    max-width: 1180px; margin: 12px auto 0;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.sub-nav-group { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sub-nav-group::-webkit-scrollbar { display: none; }

.apple-sub-pill {
    min-height: 36px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.78);
    font-size: 13px; font-weight: 750; color: var(--app-text); text-decoration: none;
    border: 1px solid transparent; transition: all 0.2s;
}
.apple-sub-pill.active { background: var(--app-accent); color: #fff; box-shadow: var(--app-shadow-hover); }
.apple-sub-pill:hover:not(.active) { background: #fff; border-color: var(--app-border); }

.apple-sub-pill-secondary {
    min-height: 32px; padding: 6px 12px; border-radius: 999px; background: transparent;
    color: var(--app-muted); font-size: 12px; font-weight: 700; text-decoration: none;
    border: 1px dashed var(--app-border-strong); transition: all 0.2s;
}
.apple-sub-pill-secondary:hover {
    background: #fff; color: var(--app-text); border-color: var(--app-border); box-shadow: var(--app-shadow-soft);
}
.apple-sub-pill-secondary.active {
    background: #fff; color: var(--app-accent); border-style: solid; border-color: var(--app-accent); box-shadow: var(--app-shadow-soft);
}

/* Regole di visibilità Device — unica fonte di verità: inc/styles.php (breakpoint 900px) */

/* ==== VERA VERSIONE MOBILE CALM 2026 ==== */
@media (max-width: 768px) {
    .hide-on-mobile { display: none !important; }
    .show-on-mobile { display: inline-block !important; font-size: 16px; line-height: 1; }

    .apple-header-top {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    }

    /* Briciole: Icona Home + Titolo troncato */
    .apple-breadcrumbs { flex: 1; min-width: 0; flex-wrap: nowrap; display: flex; align-items: center; }
    .crumb-link svg { width: 26px; height: 26px; color: var(--app-text); }
    .crumb-link.proj-name {
        font-size: 16px; font-weight: 750; color: var(--app-text); margin-left: 6px;
        max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Bottoni quadrati a destra */
    .apple-header-right { gap: 6px; }
    .header-btn { padding: 8px 10px; border-radius: 10px; }
    .header-btn svg { width: 22px; height: 22px; }

    /* Switcher centrale 100% width a capo */
    .ios-segmented { width: 100%; order: 3; justify-content: space-between; margin-top: 2px;}
    .ios-segment { flex: 1; text-align: center; padding: 8px; }

    /* Adattamenti generali page */
    .app-main{padding:16px 12px 28px;}
    .page h1{font-size:26px;}
    .title{font-size:20px;}

    /*
      PERFORMANCE MOBILE (2026-08): l'header è "sticky" ed era sempre
      renderizzato con backdrop-filter: blur(20px). Un blur continuo dietro
      un elemento fisso, ricalcolato ad ogni frame di scroll, è uno dei costi
      GPU più alti che si possano dare a un browser mobile — molto più
      sentito su un iPhone (GPU più piccola) che su iPad o su desktop.
      Sotto i 768px lo sostituiamo con uno sfondo quasi solido, senza blur:
      stesso effetto visivo a schermo fermo, ma niente ricalcolo continuo
      durante lo scroll. Sopra i 768px il blur resta invariato.
    */
    .apple-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #f7fafc;
    }
}

/* ===== KPI dashboard_progetto ===== */
.kpi-dyn{padding:24px !important;border-radius:20px !important;}
.kpi-dyn h3{font-size:13px !important;margin-bottom:12px !important;letter-spacing:0.05em;font-weight:800;text-transform:uppercase;}
.kpi-dyn .val{font-size:32px !important;letter-spacing:-0.02em;font-weight:800;color:var(--app-text) !important;}
.kpi-totale{background:#f8fafc !important;border:1px solid #e2e8f0 !important;}
.kpi-totale h3{color:#3b82f6 !important;}
.kpi-speso-ok{background:#ffffff !important;border:1px solid var(--app-border) !important;}
.kpi-speso-ok h3{color:var(--app-muted) !important;}
.kpi-speso-warning{background:#fffbeb !important;border:1px solid #fde68a !important;}
.kpi-speso-warning h3{color:#d97706 !important;}
.kpi-speso-danger{background:#fff1f2 !important;border:1px solid #fecdd3 !important;}
.kpi-speso-danger h3{color:#e11d48 !important;}
.kpi-residuo-ok{background:#f0fdf4 !important;border:1px solid #bbf7d0 !important;}
.kpi-residuo-ok h3{color:#059669 !important;}
.kpi-residuo-warning{background:#fffbeb !important;border:1px solid #fde68a !important;}
.kpi-residuo-warning h3{color:#d97706 !important;}
.kpi-residuo-danger{background:#fff1f2 !important;border:1px solid #fecdd3 !important;}
.kpi-residuo-danger h3{color:#e11d48 !important;}
.kpi-pending{background:#fefce8 !important;border:1px solid #fde047 !important;}
.kpi-pending h3{color:#ca8a04 !important;}
.kpi-extra{background:#faf5ff !important;border:1px solid #e9d5ff !important;}
.kpi-extra h3{color:#7c3aed !important;}
.kpi-altri{background:transparent !important;border:1px dashed #cbd5e1 !important;box-shadow:none !important;}
.kpi-altri h3{color:var(--app-muted) !important;}
.kpi-reparto{background:#ffffff !important;border:1px solid var(--app-border) !important;}
.kpi-reparto h3{color:var(--app-muted) !important;}
.kpi-layout{margin-bottom:24px;}
.kpi-row-1{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px;}
@media(min-width:900px){.kpi-row-1{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}}

/* =========================================================
   BLOCCO 4 — NUOVO: componente lista responsive unificata
   (carte.php, progetto_sets.php)
   ---------------------------------------------------------
   Sostituisce il vecchio pattern "genera due volte la riga
   (tabella desktop + .mobile-list a schede), nascondi l'una o
   l'altra via CSS". Nascondere con display:none NON evita che
   il browser costruisca comunque entrambi i DOM: su mobile
   significa il doppio del lavoro di parsing/layout per la
   stessa lista di dati. Qui la riga è generata una sola volta
   in PHP; il CSS decide solo come disporla.
   ========================================================= */
.data-rows{display:flex;flex-direction:column;}
.data-rows-head{display:none;}
.data-row{
  display:block;border:1px solid var(--app-border);border-radius:16px;
  padding:12px 14px;margin-bottom:10px;background:#fff;box-shadow:var(--app-shadow-soft);
}
.data-row:last-child{margin-bottom:0;}
.data-cell{margin-bottom:8px;}
.data-cell:last-child{margin-bottom:0;}
.data-cell[data-label]:not([data-label=""]):before{
  content:attr(data-label);display:block;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--app-muted);margin-bottom:2px;
}
.data-cell-actions{display:flex;gap:6px;flex-wrap:wrap;}

@media (min-width: 769px){
  .data-rows-head{
    display:grid;padding:10px 14px;font-size:12px;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--app-muted);background:var(--app-soft-2);
    border:1px solid var(--app-border);border-bottom:none;
    border-radius:var(--app-radius) var(--app-radius) 0 0;
  }
  .data-row{
    display:grid;align-items:center;gap:12px;border-radius:0;margin-bottom:0;
    border:1px solid var(--app-border);border-top:none;box-shadow:none;
  }
  /* [P1-3, 2026-09-03] CSS-002/UX-002: questo selettore aveva meno
     specificità della regola base qui sopra (riga ~915), che include
     anche :not([data-label=""]) — quindi "vinceva" sempre la regola base
     e l'etichetta restava visibile anche su desktop (≥769px), duplicata
     sopra ogni cella in fornitori/carta_spese/carte/progetto_sets/utenti.
     Ripetuto :not([data-label=""]) per pareggiare la specificità. */
  .data-cell[data-label]:not([data-label=""]):before{content:none;}
  .data-cell-actions{justify-content:flex-end;}
}

.data-rows--carte .data-rows-head,
.data-rows--carte .data-row{ grid-template-columns:2fr .8fr .9fr 2fr; }
.data-rows--sets .data-rows-head,
.data-rows--sets .data-row{ grid-template-columns:1fr auto; align-items:center; }

/* NUOVO (2026-08-31): carta_spese.php / fornitori.php — stessa idea, lista
   spese: Data | Carta | Spesa di | Fornitore | Dettagli | Reparto | Importi
   | Azioni, con una colonna extra per la checkbox quando è attiva la
   selezione multipla per lo scarico. */
.data-rows--spese .data-rows-head,
.data-rows--spese .data-row{ grid-template-columns:.9fr .7fr 1fr 1.3fr 1.6fr 1fr 1.1fr 1.3fr; }
.data-rows--spese.has-select .data-rows-head,
.data-rows--spese.has-select .data-row{ grid-template-columns:28px .9fr .7fr 1fr 1.3fr 1.6fr 1fr 1.1fr 1.3fr; }

/* fornitori.php: Stato | Data | Fornitore | Dettagli | Reparto | Importi | Azioni */
.data-rows--fornitori .data-rows-head,
.data-rows--fornitori .data-row{ grid-template-columns:1fr .8fr 1.3fr 1.6fr 1fr 1.1fr 1.3fr; }

/* NUOVO (2026-09): dashboard_progetto.php — storico ricariche carte:
   Data | Carta | Importo | Note | Azioni (icona elimina) */
.data-rows--ricariche .data-rows-head,
.data-rows--ricariche .data-row{ grid-template-columns:.9fr 1.4fr 1fr 1.6fr 50px; }

/* NUOVO (2026-09): utenti.php — elenco utenti. Colonne diverse a seconda
   del ruolo di chi guarda: un super admin vede anche Moduli e Stato/Azioni
   (data-rows--utenti-full), un admin normale vede solo Utente/Ruolo/
   Progetti (data-rows--utenti-basic). */
.data-rows--utenti-full .data-rows-head,
.data-rows--utenti-full .data-row{ grid-template-columns:1.8fr .8fr 1.3fr 1.4fr 1.8fr; }
.data-rows--utenti-basic .data-rows-head,
.data-rows--utenti-basic .data-row{ grid-template-columns:2fr .8fr 2fr; }

/* NUOVO (2026-09): dentro una .data-row alcuni elementi devono comparire
   solo desktop o solo mobile (es. utenti.php: il <select> di cambio ruolo
   esisteva prima solo su desktop). .desktop-only/.mobile-only "globali"
   scattano a max-width:900px, mentre .data-row passa da stack a grid a
   min-width:769px: usarle qui lascerebbe una fascia 769-900px con troppi/
   pochi elementi visibili nella grid. Queste varianti scattano esattamente
   allo stesso breakpoint di .data-row, nessuna fascia di disallineamento. */
@media (min-width: 769px){ .data-row .row-mobile-only{ display:none !important; } }
@media (max-width: 768px){ .data-row .row-desktop-only{ display:none !important; } }

/* =========================================================
   BLOCCO 5 — NUOVO: messaggi di esito più visibili (2026-08)
   ---------------------------------------------------------
   Prima, un salvataggio riuscito o un campo obbligatorio mancante non
   davano NESSUN feedback (in carta_spese.php mancava del tutto), e dove
   il feedback c'era (.notice-ok/.notice-error, usati da dashboard.php,
   dashboard_progetto.php, profilo.php, utenti.php, utente_edit.php) il
   messaggio poteva restare fuori dallo schermo su una pagina lunga e
   passare inosservato. inc/layout.php ora porta [data-flash-notice] al
   centro dello schermo appena la pagina è pronta (vedi ensure_doc_close);
   qui aggiungiamo un doppio "pulse" del bordo per farlo notare anche a
   scroll già fermo, senza cambiare i colori già in uso per successo/errore.
   ========================================================= */
[data-flash-notice]{ scroll-margin: 96px; }

@keyframes flash-notice-pulse-error{
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,0); }
  50%      { box-shadow: 0 0 0 6px rgba(225,29,72,.16); }
}
@keyframes flash-notice-pulse-ok{
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
  50%      { box-shadow: 0 0 0 6px rgba(5,150,105,.16); }
}
.notice-error[data-flash-notice]{ animation: flash-notice-pulse-error 1.1s ease-in-out 2; }
.notice-ok[data-flash-notice]{ animation: flash-notice-pulse-ok 1.1s ease-in-out 2; }
@media (prefers-reduced-motion: reduce){
  .notice-error[data-flash-notice], .notice-ok[data-flash-notice]{ animation: none; }
}

/* [2026-09-04] Dissolvenza per la sparizione automatica del solo messaggio
   di SUCCESSO (segnalato da Gianluca su fornitori.php: restava in cima
   alla pagina per sempre). Timer e classe .is-dismissing aggiunti da
   inc/layout.php; qui solo la transizione — nessun cambiamento a
   .notice-error, che resta visibile finché l'utente non naviga altrove. */
.notice-ok[data-flash-notice]{ transition: opacity .4s ease, transform .4s ease; }
.notice-ok[data-flash-notice].is-dismissing{ opacity: 0; transform: translateY(-6px); }

/* =========================================================
   BLOCCO 6 — NUOVO (2026-09): .att-viewer* (modale visualizzatore
   allegati), condiviso tra allegati_spesa.php e allegati_fornitore.php
   ---------------------------------------------------------
   Era un blocco <style> identico byte-per-byte ristampato inline in
   entrambi i file ad ogni richiesta. Spostato qui (già collegato ovunque
   nel modulo gestionale via inc/layout.php) così viene scaricato e messo
   in cache dal browser una sola volta invece di essere reinviato ogni volta.
   ========================================================= */
.att-viewer{border:0;border-radius:22px;padding:0;width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--app-card,#fff);box-shadow:0 24px 80px rgba(15,23,42,.28);}
.att-viewer::backdrop{background:rgba(15,23,42,.38);backdrop-filter:blur(3px);}
.att-viewer-card{padding:16px;}
.att-viewer-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;}
.att-viewer-body{display:flex;justify-content:center;align-items:center;min-height:200px;}
.att-viewer-img{max-width:100%;max-height:78vh;border-radius:12px;display:block;}
.att-viewer-frame{width:100%;height:78vh;border:0;border-radius:12px;}
.att-pdf-wrap{width:100%;display:flex;justify-content:center;}
.att-pdf-canvas{max-width:100%;height:auto;border-radius:10px;box-shadow:0 2px 10px rgba(15,23,42,.14);}
.att-pdf-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;width:100%;}
@media (max-width:700px){.att-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0;}.att-viewer-card{padding:12px;}}

/* =========================================================
   BLOCCO 6bis — NUOVO (2026-09-04): .detail-modal* (popup "Dettagli"
   testuale in fornitori.php e carta_spese.php)
   ---------------------------------------------------------
   Prima questo popup riusava la classe .att-viewer, pensata per il
   VISUALIZZATORE ALLEGATI (foto/PDF), che sotto 700px va apposta a
   schermo intero (width:100vw;height:100dvh) perché serve tutto lo
   spazio per vedere bene un'immagine o un PDF. Riusata per un popup che
   contiene solo 3-4 righe di testo (stato, data, dettagli, reparto), lo
   stesso schermo intero produceva l'effetto lamentato da Gianluca:
   pannello enorme, quasi tutto vuoto, testo piccolo perché non pensato
   per riempire quello spazio.
   .detail-modal è indipendente da .att-viewer (nessuna delle due tocca
   l'altra): dimensione fissa e compatta a ogni larghezza, niente
   comportamento "schermo intero" sotto 700px, testo leggermente più
   grande per restare leggibile nel formato compatto.
   ========================================================= */
.detail-modal{border:0;border-radius:18px;padding:0;width:min(420px,92vw);max-height:calc(100dvh - 64px);overflow:auto;background:var(--app-card,#fff);box-shadow:0 24px 80px rgba(15,23,42,.28);}
.detail-modal::backdrop{background:rgba(15,23,42,.38);backdrop-filter:blur(3px);}
.detail-modal-card{padding:20px;}
.detail-modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;}
.detail-modal-body{display:flex;flex-direction:column;gap:12px;text-align:left;font-size:15px;line-height:1.4;}

/* =========================================================
   BLOCCO 6ter — NUOVO (2026-09-07): .edit-modal* (form di modifica
   spesa fornitore/carta), condiviso tra fornitori.php, carta_spese.php,
   allegati_fornitore.php e allegati_spesa.php
   ---------------------------------------------------------
   Era un blocco <style> identico byte-per-byte ristampato inline sia in
   fornitori.php sia in carta_spese.php. Spostato qui (stesso motivo del
   BLOCCO 6 per .att-viewer) quando è servito anche in allegati_fornitore.php/
   allegati_spesa.php per il modale di modifica locale (si modifica la
   spesa senza uscire dalla pagina Allegati) — evita una terza copia
   inline della stessa regola.
   ========================================================= */
.edit-modal{border:0;border-radius:22px;padding:0;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--app-card,#fff);box-shadow:0 24px 80px rgba(15,23,42,.28);}
.edit-modal::backdrop{background:rgba(15,23,42,.38);backdrop-filter:blur(3px);}
.edit-modal-card{padding:18px;}
.edit-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.edit-modal-grid .span-2{grid-column:1/-1;}
.edit-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.edit-modal input,.edit-modal select,.edit-modal textarea{width:100%;}
.edit-modal textarea{min-height:96px;}
@media (max-width:700px){.edit-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0;}.edit-modal-card{padding:16px 14px 24px;}.edit-modal-grid{grid-template-columns:1fr;}.edit-modal-actions{position:sticky;bottom:0;background:var(--app-card,#fff);padding-top:10px;}.edit-modal-grid .span-2{grid-column:auto;}}

/* =========================================================
   BLOCCO 7 — NUOVO (2026-09): dashboard.php — dettagli progetto e
   archivio progetti (.project-details-*, .project-summary-*, .archive-*)
   ---------------------------------------------------------
   Era un blocco <style> inline ristampato ad ogni apertura della pagina.
   Spostato qui (già collegato via inc/layout.php) per essere cache-abile.
   ========================================================= */
.project-details-body{display:grid;gap:14px;padding:16px;}
.project-details-section{border-top:1px solid var(--border, #e2e8f0);padding-top:14px;}
.project-details-section:first-child{border-top:0;padding-top:0;}
.project-section-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--muted,#64748b);margin:0 0 10px 0;}
.project-summary-grid{display:grid;grid-template-columns:1fr;gap:8px;}
.project-summary-line{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 10px;border:1px solid var(--border,#e2e8f0);border-radius:14px;background:#f8fafc;}
.project-summary-label{font-size:12px;font-weight:800;color:var(--muted,#64748b);text-transform:uppercase;letter-spacing:.04em;}
.project-summary-value{font-weight:900;color:var(--text,#1e293b);text-align:right;}
.project-summary-value.neg{color:#e11d48;}
.project-team-line{font-size:13px;color:var(--muted,#64748b);line-height:1.35;}
.project-team-line strong{color:var(--text,#1e293b);}
.project-tool-row,.project-manage-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.project-manage-row{justify-content:space-between;}
.project-manage-row .form-reset{margin:0;}
.archive-panel{margin-top:40px;}
.archive-body{padding:16px;}
.archive-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.archive-card{background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(15,23,42,.03);}
.archive-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.archive-actions form{flex:1 1 160px;}
@media(min-width:900px){
  .project-summary-grid{grid-template-columns:1fr 1fr;}
  .archive-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .project-details-body{padding:14px;}
  .project-summary-line{display:grid;gap:4px;}
  .project-summary-value{text-align:left;}
  .project-tool-row .link,.project-manage-row .link,.project-manage-row button.link{width:100%;justify-content:center;text-align:center;}
  .project-manage-row{display:grid;grid-template-columns:1fr;}
  .archive-actions{display:grid;grid-template-columns:1fr;}
}

/* =========================================================
   BLOCCO 8 — NUOVO (2026-09): .export-zip-* (modale "Esporta Backup ZIP",
   inc/export_zip_modal.php), incluso da dashboard.php e report_progetto.php
   ---------------------------------------------------------
   Era un blocco <style> inline ristampato da ogni pagina che include il
   componente. Spostato qui, già collegato ovunque nel modulo gestionale.
   ========================================================= */
.export-zip-modal{border:0;border-radius:22px;padding:0;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--app-card,#fff);box-shadow:0 24px 80px rgba(15,23,42,.28);}
.export-zip-modal::backdrop{background:rgba(15,23,42,.38);backdrop-filter:blur(3px);}
.export-zip-card{position:relative;padding:18px;}
.export-zip-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.export-zip-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.export-zip-option{display:flex;align-items:flex-start;gap:10px;padding:9px 4px;border-bottom:1px solid var(--app-border,#e2e8f0);cursor:pointer;font-size:14px;}
.export-zip-option:last-of-type{border-bottom:0;}
.export-zip-option input{margin-top:3px;flex:0 0 auto;}
.export-zip-option em{color:var(--app-muted,#64748b);font-style:normal;font-size:12px;display:block;}
.export-zip-error{color:var(--app-danger,#e11d48);font-size:13px;margin:10px 0 0;}
.export-zip-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.export-zip-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--app-card,#fff);border-radius:22px;}
.export-zip-overlay-box{text-align:center;padding:24px;}
.export-zip-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--app-border,#e2e8f0);border-top-color:var(--app-accent,#475569);margin:0 auto;animation:export-zip-spin .8s linear infinite;}
.export-zip-slow{color:var(--app-muted,#64748b);font-size:12px;margin-top:10px;max-width:280px;}
@keyframes export-zip-spin{to{transform:rotate(360deg);}}
@media (max-width:520px){.export-zip-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0;}.export-zip-overlay{border-radius:0;}}