/* Pmago4 — stile base */
:root {
  --blu: #1f4e79; --blu-scuro: #163a5a; --blu-chiaro: #eaf1f8;
  --grigio: #5b6570; --bordo: #d7dde3; --fondo: #f4f6f8;
  --verde: #1e7e34; --rosso: #b02a37; --ambra: #8a6d1a; --ambra-fondo: #fff7dd;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", system-ui, sans-serif; background: var(--fondo); color: #21262b; }
main { max-width: 1180px; margin: 0 auto; padding: 20px 24px 40px; }
h1 { font-size: 24px; color: var(--blu); margin: 8px 0 16px; }
h2 { font-size: 16px; color: var(--blu); margin: 4px 0 10px; }
a { color: var(--blu); }
code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* Testata */
.testata { display: flex; align-items: center; gap: 22px; background: var(--blu); color: #fff; padding: 10px 24px; }
.marchio { font-size: 22px; font-weight: 700; letter-spacing: .3px; }
.marchio span { color: #a8c8e8; font-weight: 600; }
.marchio.grande { font-size: 34px; }
.testata nav { display: flex; gap: 4px; flex: 1; }
.testata nav a { color: #dbe7f3; text-decoration: none; padding: 7px 12px; border-radius: 6px; }
.testata nav a:hover { background: var(--blu-scuro); }
.testata nav a.attivo { background: var(--blu-scuro); color: #fff; font-weight: 600; }
.area-utente { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.area-utente a { color: #dbe7f3; }

/* Avvisi */
.avviso { background: var(--ambra-fondo); border-bottom: 1px solid #e7d9a3; color: var(--ambra); padding: 8px 24px; font-size: 14px; }
.avviso.informativo { background: var(--blu-chiaro); border: 1px solid #c6d8ea; color: var(--blu-scuro); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.avviso.successo { background: #e6f4ea; border: 1px solid #bfe0c8; color: var(--verde); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.errore { background: #fbe9eb; border: 1px solid #efc4c9; color: var(--rosso); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }

/* Riquadri cruscotto */
.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.riquadro { background: #fff; border: 1px solid var(--bordo); border-radius: 10px; padding: 14px; text-decoration: none; color: var(--grigio); }
.riquadro:hover { border-color: var(--blu); }
.riquadro .numero { font-size: 28px; font-weight: 700; color: var(--blu); }

.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .due-colonne { grid-template-columns: 1fr; } }
.scheda { background: #fff; border: 1px solid var(--bordo); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }

/* Tabelle */
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; }
th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: var(--grigio); background: #eef2f6; padding: 8px 10px; }
td { padding: 8px 10px; border-top: 1px solid #edf0f3; vertical-align: middle; }
tr:hover td { background: #f7fafd; }
tr.disattivo td { color: #9aa3ab; }
td.destra, th.destra { text-align: right; }
td.azioni { text-align: right; white-space: nowrap; }
td.azioni form { display: inline; }

/* Moduli */
.modulo fieldset { background: #fff; border: 1px solid var(--bordo); border-radius: 10px; margin: 0 0 14px; padding: 12px 16px 16px; }
.modulo legend { color: var(--blu); font-weight: 600; padding: 0 6px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--grigio); }
label.doppio { grid-column: span 2; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--bordo); border-radius: 7px; background: #fff; color: #21262b; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd4ea; border-color: var(--blu); }
.modulo.stretto { max-width: 420px; }
.riga-modulo { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.azioni-modulo { display: flex; gap: 10px; margin-top: 6px; }

/* Bottoni */
.bottone { display: inline-block; padding: 8px 14px; border: 1px solid var(--bordo); background: #fff; color: var(--blu); border-radius: 8px; text-decoration: none; font: inherit; cursor: pointer; }
.bottone:hover { border-color: var(--blu); }
.bottone.primario { background: var(--blu); border-color: var(--blu); color: #fff; }
.bottone.primario:hover { background: var(--blu-scuro); }
.bottone.largo { width: 100%; }
button.primario { composes: none; }
button.link { background: none; border: none; color: var(--blu); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* Varie */
.intestazione-pagina { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.schede-secondarie { display: flex; gap: 4px; }
.schede-secondarie a { padding: 6px 12px; border-radius: 7px; text-decoration: none; color: var(--grigio); border: 1px solid transparent; }
.schede-secondarie a.attivo { background: #fff; border-color: var(--bordo); color: var(--blu); font-weight: 600; }
.barra-ricerca { display: flex; gap: 10px; align-items: center; margin: 12px 0 16px; flex-wrap: wrap; }
.barra-ricerca input[name="q"] { flex: 1; min-width: 240px; }
.spunta { flex-direction: row; align-items: center; gap: 6px; }
.navigazione-mese { display: flex; gap: 10px; align-items: center; }
.etichetta { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.etichetta.carta { background: #e8eef5; color: var(--blu-scuro); }
.etichetta.web { background: #e6f4ea; color: var(--verde); }
.vuoto { color: var(--grigio); background: #fff; border: 1px dashed var(--bordo); border-radius: 10px; padding: 18px; }
.nota { color: var(--grigio); font-size: 13px; }
.pie { text-align: center; color: #9aa3ab; font-size: 12.5px; padding: 18px; }
.stato-progetto { margin: 0; padding-left: 20px; }
.stato-progetto li { margin-bottom: 6px; color: var(--grigio); }
.stato-progetto li.fatto { color: var(--verde); }
.stato-progetto li.fatto::marker { content: "✔ "; }

/* Login */
.pagina-login { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(160deg, var(--blu) 0%, var(--blu-scuro) 60%); }
.scatola-login { background: #fff; border-radius: 14px; padding: 30px 34px; width: min(400px, 92vw); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.scatola-login .marchio { color: var(--blu); }
.scatola-login .marchio span { color: #6d94b8; }
.sottotitolo { color: var(--grigio); margin-top: 2px; }
.scatola-login label { margin-bottom: 12px; }
.scatola-login form { display: flex; flex-direction: column; }

/* Scheda dettaglio */
.tabella-dettaglio th { width: 190px; text-transform: none; letter-spacing: 0; font-size: 13.5px; background: transparent; color: var(--grigio); vertical-align: top; }
.tabella-dettaglio { border: none; }
.tabella-dettaglio td, .tabella-dettaglio th { border-top: 1px solid #f0f2f5; padding: 6px 8px; }
.testo-errore { color: var(--rosso); }
.etichetta.radio { background: #f6e8f5; color: #7a2d6f; }
.etichetta.tv { background: #fdeee0; color: #9a5b12; }
.etichetta.altro { background: #eef1f4; color: var(--grigio); }
.riga-contratto { border-left: 4px solid var(--blu); }

/* ===== Workspace stile Mago4: menu laterale + schede in alto ===== */
.ws-corpo { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.ws-topbar { display: flex; align-items: center; gap: 14px; background: var(--blu); color: #fff; padding: 8px 16px; flex: 0 0 auto; }
.ws-topbar .area-utente { margin-left: 0; }
.ws-topbar-spazio { flex: 1; }
.ws-hamburger { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ws-hamburger:hover { background: var(--blu-scuro); }

.ws-tabbar { display: flex; gap: 2px; background: #dfe5eb; padding: 6px 8px 0; flex: 0 0 auto; overflow-x: auto; }
.ws-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--bordo); border-bottom: none;
  background: #eef1f4; color: var(--grigio); padding: 7px 12px; border-radius: 8px 8px 0 0; cursor: pointer;
  font: inherit; font-size: 13.5px; white-space: nowrap; max-width: 240px; }
.ws-tab.attiva { background: #fff; color: var(--blu); font-weight: 600; border-top: 3px solid var(--blu); padding-top: 5px; }
.ws-tab-label { overflow: hidden; text-overflow: ellipsis; }
.ws-tab-x { color: #9aa3ab; font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 4px; }
.ws-tab-x:hover { background: #fbe9eb; color: var(--rosso); }

.ws-layout { display: flex; flex: 1 1 auto; min-height: 0; }
.ws-sidebar { width: 225px; flex: 0 0 auto; background: #fff; border-right: 1px solid var(--bordo); overflow-y: auto; padding: 8px 0; }
.ws-sidebar.nascosta { display: none; }
.ws-sezione-titolo { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--blu); padding: 10px 16px 6px; }
.ws-sezione-titolo::before { content: "▸ "; color: #9db8d2; }
.ws-sezione.aperta .ws-sezione-titolo::before { content: "▾ "; }
.ws-voci { display: none; }
.ws-sezione.aperta .ws-voci { display: block; }
.ws-voci a { display: block; padding: 7px 16px 7px 30px; color: #2b3540; text-decoration: none; font-size: 14.5px; border-left: 3px solid transparent; }
.ws-voci a:hover { background: var(--blu-chiaro); border-left-color: var(--blu); color: var(--blu); }

.ws-contenuto { flex: 1 1 auto; min-width: 0; background: #fff; position: relative; }
.ws-frame { width: 100%; height: 100%; border: none; display: block; }

/* Pagine dentro una scheda: via la testata doppia, tutta larghezza */
.in-scheda .testata { display: none; }
.in-scheda body > .avviso { display: none; }
.in-scheda main { max-width: none; padding: 14px 18px 30px; }
.in-scheda .pie { display: none; }

/* ===== Planning web (v0.8) ===== */
.pw-grid { border-collapse: collapse; width: 100%; }
.pw-grid th.pw-info, .pw-grid td.pw-info { min-width: 240px; max-width: 320px; text-align: left; }
.pw-grid td.pw-info .nota { display: block; font-weight: 400; }
.pw-grid th.pw-g, .pw-grid td.pw-g { min-width: 22px; width: 22px; padding: 2px 0; text-align: center; font-size: 11.5px; border: 1px solid #eef1f4; }
.pw-grid .we { background: #f4f6f8; }
.pw-grid .oggi { outline: 2px solid var(--blu, #2266aa); outline-offset: -2px; }
.pw-grid td.occ { height: 26px; }
.pw-grid td.occ.pianificata { background: #bcd7ee; }
.pw-grid td.occ.pubblicata { background: #b7dfc0; }
.pw-grid td.occ.dafatt { box-shadow: inset 0 0 0 2px rgba(180, 120, 0, .55); }
.testo-avviso { color: #b45309; font-weight: 600; }

/* ===== Stampe (v1.0) ===== */
.stampa-corpo { background: #fff !important; color: #16202a; max-width: 820px; margin: 0 auto; padding: 26px 30px; font-size: 14px; }
.barra-stampa { display: flex; gap: 10px; margin-bottom: 18px; }
.stampa-testa { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid #16202a; padding-bottom: 12px; margin-bottom: 18px; }
.stampa-azienda { font-size: 21px; font-weight: 700; }
.stampa-riga-azienda { color: #4a5763; font-size: 12.5px; }
.stampa-doc { text-align: right; white-space: nowrap; }
.stampa-tipo-doc { font-size: 12px; letter-spacing: 1px; color: #4a5763; }
.stampa-num-doc { font-size: 20px; font-weight: 700; }
.stampa-destinatario { margin: 14px 0 18px; padding: 10px 14px; border: 1px solid #d7dde3; border-radius: 8px; display: inline-block; min-width: 320px; }
.stampa-nome-cliente { font-size: 16px; font-weight: 700; }
.stampa-tabella { width: 100%; border-collapse: collapse; margin: 10px 0 16px; }
.stampa-tabella th { background: #eef2f6; text-align: left; font-size: 12px; padding: 6px 8px; border: 1px solid #d7dde3; }
.stampa-tabella td { padding: 6px 8px; border: 1px solid #d7dde3; vertical-align: top; }
.stampa-tabella .destra, .stampa-tabella th.destra { text-align: right; }
.stampa-totali { display: flex; justify-content: flex-end; }
.stampa-totali .stampa-tabella { width: auto; min-width: 340px; }
.stampa-totale-doc td { background: #eef2f6; font-size: 15px; }
.stampa-titoletto { margin: 16px 0 6px; font-size: 15px; }
.stampa-firme { display: flex; gap: 60px; margin-top: 46px; }
.stampa-firme > div { flex: 1; max-width: 300px; }
.stampa-linea-firma { border-bottom: 1px solid #16202a; height: 34px; }
.stampa-importone { font-size: 30px; font-weight: 800; margin: 12px 0; }
.stampa-pie { margin-top: 30px; border-top: 1px solid #d7dde3; padding-top: 8px; color: #78848f; font-size: 11.5px; }
@media print {
  .no-stampa { display: none !important; }
  .stampa-corpo { padding: 0; max-width: none; }
  a { color: inherit; text-decoration: none; }
}

/* ===== Statistiche: tabelle con barre ===== */
.tab-barre { width: 100%; border: none; }
.tab-barre td { border: none; padding: 3px 6px; }
.tab-barre .etich { width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.tab-barre .barra-cella { width: auto; }
.tab-barre .barra { height: 16px; background: #4a90d9; border-radius: 3px; min-width: 2px; }
.tab-barre .barra.verde { background: #55a06b; }
.tab-barre .val { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* pallino stato FE */
.pallino { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.pallino.ok { background: #3f9d5e; }
.pallino.no { background: #d9822b; }