:root{
  --bg:#f4f5f7; --panel:#fff; --ink:#1f2430; --muted:#6b7280; --line:#e3e6ea;
  --accent:#2b6cb0; --accent-ink:#fff; --sensibile:#8a5a00; --sensibile-bg:#fff7e6;
  --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:2000px;margin:0 auto;padding:0 28px}
main.wrap{padding-top:24px;padding-bottom:64px}

.topbar{background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.topbar .wrap{display:flex;align-items:center;gap:8px 10px;min-height:58px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{font-weight:700;color:var(--ink);padding-right:14px;margin-right:2px;border-right:1px solid var(--line);white-space:nowrap}
.topbar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap;align-items:center}
.topbar nav a{color:var(--muted);font-weight:500;padding:6px 11px;border-radius:8px;line-height:1;white-space:nowrap}
.topbar nav a:hover{background:#eef1f4;color:var(--ink);text-decoration:none}
.topbar nav a.active{background:var(--accent);color:#fff}
.topbar nav a.active:hover{background:var(--accent);color:#fff;filter:brightness(1.06)}
.lang-switch{margin:0}
.logout{display:flex;align-items:center;gap:10px;margin:0;padding-left:14px;border-left:1px solid var(--line)}
.who{color:var(--muted);font-size:13px;white-space:nowrap}

h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:28px 0 10px}
.muted{color:var(--muted)}

button,input[type=submit]{
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;
  padding:9px 16px;font-size:14px;cursor:pointer
}
button:hover{filter:brightness(1.05)}
.logout button{background:transparent;color:var(--muted);border:1px solid var(--line);padding:6px 12px}

label{display:block;margin:12px 0;font-size:14px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--ink);background:#fff;margin-top:4px
}

.login-box{max-width:360px;margin:8vh auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.login-box h1{font-size:20px}
.login-box button{width:100%;margin-top:8px}

.flash{background:#eef3fb;border:1px solid #cfe0f5;color:#1f3a5f;padding:10px 14px;border-radius:8px;margin-bottom:18px}
.alert-costo{background:#fdf1dd;border:1px solid #f0dcae;color:#8a5a00;padding:10px 14px;border-radius:8px;margin:12px 0;font-size:14px}
.alert-costo.grave{background:#fdecea;border-color:#f5c6cb;color:#b3261e}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card-val{font-size:22px;font-weight:700}
.card-lbl{color:var(--muted);font-size:13px;margin-top:2px}
.card.sensibile{background:var(--sensibile-bg);border-color:#f0dcae}
.card.sensibile .card-val{color:var(--sensibile)}

table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{background:#fafbfc;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
tr:last-child td{border-bottom:0}
.num{text-align:right}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:#eef1f4;color:#374151}
.pill-attivo,.pill-in_lavorazione{background:#e4f4e8;color:#1f7a3d}
.pill-in_traduzione{background:#e8f0e0;color:#4a6b1f}
.pill-da_cominciare{background:#e3f0f7;color:#1d6a8f}
.pill-in_pausa,.pill-sospeso{background:#fdf1dd;color:#8a5a00}
.pill-in_attesa_cliente{background:#fdeede;color:#a65b1a}
.pill-revisione_cliente{background:#f6e7f0;color:#9c3b73}
.pill-fatturabile{background:#eae4f7;color:#5b3ea8}
.pill-chiuso{background:#eceff2;color:#6b7280}
.pill-prospect,.pill-preventivo{background:#e8eefc;color:#2b4fb0}
.pill-urgente{background:#fdecea;color:#b3261e;font-weight:700;vertical-align:middle;margin-left:6px}

/* ---- Ruoli di sola lettura ---- */
.ro-bar{background:#fff7e6;border-bottom:1px solid #f0dcae;color:#8a5a00;font-size:13px;padding:6px 20px;text-align:center}
/* nasconde ogni form che modifica dati (le POST sono comunque bloccate lato server) */
body.sola-lettura form:not([method=get]):not([method=GET]):not(.logout):not(.lang-switch){display:none !important}
body.sola-lettura .admin-add,
body.sola-lettura a.btn:not(.ghost),
body.sola-lettura .page-head .actions{display:none !important}
body.sola-lettura .actions-cell{display:none !important}
.pill-urg-off{background:#eceff2;color:#8a929c;font-weight:400}
.urg-toggle{display:inline;margin:0}
button.pill{border:0;cursor:pointer;padding:3px 10px;font-size:12px;line-height:1.4;margin-left:6px}
button.pill.pill-urg-off:hover{background:#fdecea;color:#b3261e}

/* selettore di stato inline */
.stato-form{display:inline-flex;align-items:center;gap:6px;margin:0}
.stato-sel{width:auto;margin:0;padding:5px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;background:#eef1f4;color:#374151;cursor:pointer}
.stato-sel.stato-in_lavorazione{background:#e4f4e8;color:#1f7a3d}
.stato-sel.stato-in_traduzione{background:#e8f0e0;color:#4a6b1f}
.stato-sel.stato-da_cominciare{background:#e3f0f7;color:#1d6a8f}
.stato-sel.stato-in_pausa{background:#fdf1dd;color:#8a5a00}
.stato-sel.stato-in_attesa_cliente{background:#fdeede;color:#a65b1a}
.stato-sel.stato-revisione_cliente{background:#f6e7f0;color:#9c3b73}
.stato-sel.stato-fatturabile{background:#eae4f7;color:#5b3ea8}
.stato-sel.stato-chiuso{background:#eceff2;color:#6b7280}
.stato-sel.stato-preventivo{background:#e8eefc;color:#2b4fb0}
.stato-row{margin-top:6px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}

.next{margin-top:34px;padding-top:18px;border-top:1px dashed var(--line)}

/* ---- Testata pagina + bottoni ---- */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px}
.page-head .actions,.page-head .actions form{display:inline-flex;gap:8px;margin:0}
.btn{display:inline-block;background:var(--accent);color:#fff;border-radius:8px;padding:9px 16px;font-size:14px}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
button.danger,.btn.danger{background:#c0392b}
.back{font-size:13px;color:var(--muted)}
.back:hover{color:var(--ink)}
h1 .pill{vertical-align:middle;font-size:12px;margin-left:8px}

/* ---- Form ---- */
.form-narrow{max-width:520px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:12px}
.form-narrow button{margin-top:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check-inline{display:flex;align-items:center;gap:8px;color:var(--ink)}
.check-inline input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:8px}
.inline-form input,.inline-form select{width:auto;flex:1 1 160px;margin-top:0}
.inline-form button{flex:0 0 auto}
.contact{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin:4px 0 10px}
.note-box{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;white-space:pre-wrap}
td.neg,.num.neg{color:#c0392b}

/* ---- Lavagna clienti ---- */
.board-toolbar{display:flex;align-items:center;gap:12px;margin:6px 0 2px}
.board-toolbar input[type=search]{width:auto;flex:0 1 320px;margin:0}
.board{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;margin-top:16px;overflow-x:auto}
.col{background:#eef0f3;border:1px solid var(--line);border-radius:var(--radius);padding:10px;min-height:120px}
.col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.col-count{font-size:12px;color:var(--muted);background:#fff;border-radius:999px;padding:1px 8px}
.col-body{display:flex;flex-direction:column;gap:8px;min-height:60px}
.cli-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cli-card:active{cursor:grabbing}
.cli-card.dragging{opacity:.45}
.cli-nome{font-weight:600;color:var(--ink)}
.cli-nome:hover{text-decoration:underline}
.cli-ref{font-size:12px;color:var(--muted);margin-top:2px}
.cli-meta{font-size:12px;color:var(--muted);margin-top:6px}

/* ---- Tabelle: righe disattivate + azioni ---- */
tr.row-off td{color:var(--muted);background:#fafafa}
.actions-cell{white-space:nowrap}
.actions-cell form{display:inline;margin:0}
.mini{display:inline-block;font-size:12px;padding:5px 10px;border-radius:6px;background:var(--accent);color:#fff;border:0;cursor:pointer}
a.mini:hover{text-decoration:none}
.mini.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.mini.danger{background:#c0392b}
.actions-cell > *{margin-right:6px}

/* ---- Liste modificabili (tipi progetto) ---- */
.edit-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.edit-row{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.edit-main{display:flex;gap:8px;align-items:center;flex:1;margin:0;flex-wrap:wrap}
.edit-main input{width:auto;margin-top:0}
.edit-main input[name=nome]{flex:0 1 220px}
.edit-main input[name=descrizione]{flex:1 1 220px}
.edit-row form{margin:0}
.count{font-size:12px;color:var(--muted);white-space:nowrap}
.lotto-rip{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}

/* ---- Scheda progetto ---- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:10px 0}
.info-grid > div{display:flex;flex-direction:column;font-size:14px;color:var(--ink)}
.info-grid span{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:2px}
.card.card-neg{background:#fdecea;border-color:#f5c6cb}
.card.card-neg .card-val{color:#c0392b}

.asg-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.asg-info{flex:1 1 260px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.asg-info .muted{font-size:12px}
.asg-edit{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.asg-edit input{width:auto;margin-top:0;flex:0 1 140px}
.asg-row > form{margin:0}

/* ---- Calendario assenze ---- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:12px 0}
.cal-h{font-size:12px;color:var(--muted);text-align:center;padding:4px 0;font-weight:600}
.cal-cell{background:var(--panel);border:1px solid var(--line);border-radius:6px;min-height:96px;padding:5px 6px;font-size:12px}
.cal-cell.oom{background:#fafbfc}
.cal-cell.oom .cal-num{color:#c7ccd2}
.cal-cell.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal-num{display:block;font-weight:700;color:var(--muted);font-size:12px}
.cal-dow{display:none}
.cal-ev{display:block;border-radius:4px;padding:2px 6px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.5}
.cal-ev.pend{border:1px dashed currentColor;background:transparent !important}
.cal-ev.ferie{background:#e4f4e8;color:#1f7a3d}
.cal-ev.permesso{background:#e8eefc;color:#2b4fb0}
.cal-ev.malattia{background:#fdecea;color:#b3261e}
.cal-ev.altro{background:#eef1f4;color:#374151}
.cal-ev.remoto{background:#e8eefc;color:#2b4fb0}
.cal-ev.sede_cliente{background:#fdf1dd;color:#8a5a00}
.cal-ev.sede_logos{background:#e4f4e8;color:#1f7a3d}
a.cal-ev:hover{text-decoration:none;filter:brightness(.97)}
.cal-legenda .cal-ev{display:inline-block;margin:2px 6px 2px 0}

/* schermi stretti: elenco di giorni invece della griglia */
@media (max-width:720px){
  .cal{display:flex;flex-direction:column;gap:6px}
  .cal-h{display:none}
  .cal-cell{min-height:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
  .cal-cell.oom{display:none}
  .cal-dow{display:inline;color:var(--muted);font-weight:600;margin-left:4px}
  .cal-cell .cal-ev{display:inline-block;margin-top:0}
  .cal-cell.empty{display:none}
}

/* ---- Sessione di lavoro ---- */
.lavoro-banner{margin:10px 0 16px;padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:#fafbfc;font-size:14px}
.lavoro-banner.on{background:#e4f4e8;border-color:#bfe3c9}
tr.row-mio > td{background:#e4f4e8}

/* ---- Fatturati / grafico ---- */
.fchart-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:12px 0;max-width:920px}
.fchart{width:100%;height:auto;display:block}
.fchart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.fchart-legend label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--ink)}
.fchart-legend label::before{content:"";width:12px;height:3px;border-radius:2px;background:var(--c,#888)}
.fchart-legend input{width:auto;margin:0}
.table-scroll{overflow-x:auto}
.cell-live{background:#fff7e6}
.cell-live-key{display:inline-block;width:14px;height:14px;vertical-align:middle;border:1px solid var(--line);background:#fff7e6;border-radius:3px}

/* ---- Ore ---- */
.mese-nav{display:flex;align-items:center;gap:12px;margin:12px 0 4px;flex-wrap:wrap}
.mese-nav strong{font-size:15px;text-transform:capitalize}
tfoot th{background:#fafbfc;color:var(--ink);font-size:13px;text-transform:none;letter-spacing:0}
.grp-head{display:flex;align-items:center;gap:10px;margin:26px 0 8px;font-size:16px}
.grp-head .grp-sub{font-size:13px;color:var(--muted);font-weight:400}
.tot-mese{margin-top:22px;padding:12px 14px;background:#fafbfc;border:1px solid var(--line);border-radius:8px;font-size:14px}
.admin-add{margin:14px 0;border:1px solid var(--line);border-radius:8px;padding:6px 12px;background:var(--panel)}
.admin-add summary{cursor:pointer;font-size:14px;color:var(--muted);padding:6px 0}
.admin-add .inline-form{margin-top:8px}

/* ---- Barra avanzamento (checklist) ---- */
.prog{display:inline-block;width:120px;height:8px;background:#e6e9ec;border-radius:6px;overflow:hidden;vertical-align:middle;line-height:0}
.prog-fill{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .2s ease}
.prog-fill.full{background:#1f7a3d}
.prog-txt{font-size:12px;color:var(--muted);margin-left:8px;white-space:nowrap}
.prog-wrap{display:flex;align-items:center;gap:0;margin:6px 0 14px}
.prog-wrap .prog{width:260px;height:12px}

.check-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.check-item{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.check-item.done .check-title{text-decoration:line-through;color:var(--muted)}
.check-item form{margin:0;display:inline-flex}
.check-item .check-title{flex:1}
.check-edit{flex:1;gap:6px}
.check-edit input[name="titolo"]{flex:1 1 160px;min-width:120px}
.check-edit input[name="nota"]{flex:1 1 140px;min-width:100px}
.promo-edit{flex-wrap:wrap}
.promo-edit input[name="testo"]{flex:2 1 220px;min-width:160px;margin-top:0}
.promo-edit select{flex:1 1 160px;min-width:120px;margin-top:0}
.promo-edit input[type="date"]{flex:0 1 150px;margin-top:0}
.promo-item.scaduto{border-color:#f5c6cb;background:#fdecea}
.check-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer;font-size:13px;line-height:1;color:#1f7a3d;flex:0 0 auto}
.check-toggle.on{background:#1f7a3d;border-color:#1f7a3d;color:#fff}

/* ============ Responsive ============ */
@media (max-width:900px){
  .wrap{padding:0 16px}
  main.wrap{padding-top:18px}
  .board{grid-template-columns:repeat(3,78vw)}
  .row2{grid-template-columns:1fr}

  /* testata pagina: titolo sopra, azioni sotto a capo */
  .page-head{flex-direction:column;align-items:stretch}
  .page-head .actions{flex-wrap:wrap}
  .page-head .actions form{flex-wrap:wrap;margin:0}

  /* tabelle larghe: scorrono in orizzontale dentro il loro riquadro */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

  /* form in linea: ogni campo su una riga a tutta larghezza
     (!important per battere gli stili "flex" inline scritti per il desktop) */
  .inline-form{padding:12px}
  .inline-form > input,.inline-form > select,.inline-form > button,
  .inline-form > label{flex:1 1 100% !important;width:100%;min-width:0}

  /* righe modificabili (task, tipi, ecc.): i campi vanno a capo, niente colonna
     (la colonna trasformerebbe i "flex-basis:NNpx" inline in altezze) */
  .edit-row{flex-direction:column;align-items:stretch}
  .edit-row > form,.edit-row > div{width:100%}
  .edit-main{width:100%}
  .edit-main > input,.edit-main > select{flex:1 1 100% !important;width:100%;min-width:0}
  .lotto-rip{flex-direction:column}

  /* assegnazioni risorse */
  .asg-row{flex-direction:column;align-items:stretch}
  .asg-info{flex:1 1 auto}
  .asg-edit{flex-wrap:wrap}
  .asg-edit > input,.asg-edit > select{flex:1 1 100% !important;width:100%;min-width:0}
  .asg-row > form{width:100%}

  /* checklist: campo di modifica a tutta larghezza */
  .check-item{flex-wrap:wrap}
  .check-edit{flex:1 1 100%;flex-wrap:wrap}
  .check-edit > input{flex:1 1 100% !important}

  .mese-nav,.board-toolbar{flex-wrap:wrap}
  .form-narrow{padding:16px}
}

@media (max-width:480px){
  .wrap{padding:0 12px}
  h1{font-size:20px}
  h2{font-size:16px;margin-top:22px}
  .card-val{font-size:20px}
  .cards{gap:10px}
  .topbar nav{gap:10px 12px}

  /* azioni di testata: una sotto l'altra, a tutta larghezza */
  .page-head .actions{flex-direction:column;align-items:stretch;width:100%}
  .page-head .actions form{width:100%}
  .page-head .actions .btn,
  .page-head .actions button{display:block;width:100%;text-align:center}
}