/* Layout: dark rail of sections on the left, a working canvas of solid pastel tiles and white panels on the right; stacks on phones. */
:root{
  --bg:#EFEBE3; --surface:#FFFFFF; --surface2:#F7F4EE; --ink:#161513; --muted:#5E5A53;
  --line:#161513; --hair:#E3DED4; --side:#161513; --side-ink:#D9D4CA; --side-hover:#2A2825;
  --accent:#C94420; --accent-ink:#FFFFFF; --warn-bg:#FCE3DC; --warn-ink:#8E2A10; --info-bg:#E4EEF8; --info-ink:#1D3F63;
  --on-pastel:#161513;
  --c-y:#F6D365; --c-l:#CDBBF5; --c-s:#BBD8F2; --c-p:#F4BEDC; --c-g:#C3D0A4; --c-o:#F7C59F; --c-m:#A8DCC8; --c-n:#E3DED4;
  --f-disp:'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
  --f-body:'DM Sans', 'Helvetica Neue', 'Segoe UI', sans-serif;
  --r-lg:28px; --r-md:20px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#141311; --surface:#1F1D1A; --surface2:#272420; --ink:#F1EDE5; --muted:#ABA498;
  --line:#4F4A43; --hair:#302D29; --side:#0B0A09; --side-ink:#CFC9BE; --side-hover:#1F1D1A;
  --accent:#D9542C; --accent-ink:#FFFFFF; --warn-bg:#4A2216; --warn-ink:#FFC9B6; --info-bg:#1C2D40; --info-ink:#C6DDF5;
  --c-y:#E9C75A; --c-l:#BDAAEB; --c-s:#A9C9E6; --c-p:#E7ADCB; --c-g:#B3C193; --c-o:#EBB68E; --c-m:#97CDB8; --c-n:#CFC9BE;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#141311; --surface:#1F1D1A; --surface2:#272420; --ink:#F1EDE5; --muted:#ABA498;
  --line:#4F4A43; --hair:#302D29; --side:#0B0A09; --side-ink:#CFC9BE; --side-hover:#1F1D1A;
  --accent:#D9542C; --accent-ink:#FFFFFF; --warn-bg:#4A2216; --warn-ink:#FFC9B6; --info-bg:#1C2D40; --info-ink:#C6DDF5;
  --c-y:#E9C75A; --c-l:#BDAAEB; --c-s:#A9C9E6; --c-p:#E7ADCB; --c-g:#B3C193; --c-o:#EBB68E; --c-m:#97CDB8; --c-n:#CFC9BE;
  color-scheme:dark }

html,body{height:100%}
body{margin:0; -webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none!important}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.45}
*{box-sizing:border-box}
h1,h2,h3{font-family:var(--f-disp); letter-spacing:-0.02em; margin:0; text-wrap:balance}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

.app{display:flex; flex-wrap:wrap; gap:16px; padding-inline:16px; padding-block:16px; min-height:100%; align-items:flex-start}
.side{flex:1 1 220px; max-width:260px; background:var(--side); border-radius:var(--r-lg); padding:24px 14px; display:flex; flex-direction:column; gap:4px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 16px); min-height:calc(100vh - 32px)}
.logo{font-family:var(--f-disp); font-weight:800; font-size:26px; color:#FFFFFF; padding:0 14px 18px}
.logo span{color:#F6D365}
.side-label{color:#8F8A80; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px}
.nav{display:flex; flex-direction:column; gap:4px}
.nav a{display:flex; align-items:center; gap:12px; min-height:44px; padding:0 14px; border-radius:999px; color:var(--side-ink); text-decoration:none; font-weight:500}
.nav a:hover{background:var(--side-hover); color:#FFFFFF}
.nav a.on{background:#F6D365; color:#161513; font-weight:700}
.nav svg{flex:none; width:18px; height:18px}
.nav .count{margin-left:auto; font-size:12px; opacity:.75}
.side-foot{margin-top:auto; padding-top:16px}
.main{flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:20px; padding:8px 4px 40px}
@media (max-width:820px){
  .side{flex:1 1 100%; max-width:100%; min-width:0; min-height:0; position:static; padding:16px 12px}
  .logo{padding:0 8px 10px; font-size:22px}
  .side-label,.who{display:none}
  .side-foot{margin-top:0; padding-top:4px; flex-direction:row; flex-wrap:wrap}
  .side .side-foot .logout{width:auto}
  .nav{flex-direction:row; overflow-x:auto; padding-bottom:4px; min-width:0}
  .nav a{flex:none}
  .nav .count{display:none}
}

.head{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between}
.head h1{font-size:clamp(32px,5vw,48px); font-weight:800; line-height:1.05}
.head p{margin:6px 0 0; color:var(--muted); font-size:16px}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.grow{flex-grow:1}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px; border:1.5px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn:hover{filter:brightness(.92)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--surface2); filter:none}
.btn.small{min-height:36px; padding:0 14px; font-size:14px}
.btn.danger{background:transparent; color:var(--warn-ink); border-color:var(--warn-ink)}
.btn.danger.armed{background:var(--warn-ink); color:var(--bg)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.link{background:none; border:none; padding:0; color:var(--accent); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px}

.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; color:var(--on-pastel); background:var(--c-n)}
.pill.sm{padding:3px 10px; font-size:12px}
.c-y{background:var(--c-y); color:var(--on-pastel)} .c-l{background:var(--c-l); color:var(--on-pastel)} .c-s{background:var(--c-s); color:var(--on-pastel)}
.c-p{background:var(--c-p); color:var(--on-pastel)} .c-g{background:var(--c-g); color:var(--on-pastel)} .c-o{background:var(--c-o); color:var(--on-pastel)}
.c-m{background:var(--c-m); color:var(--on-pastel)} .c-n{background:var(--c-n); color:var(--on-pastel)}
.chip{display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:999px; border:1.5px solid var(--line); background:transparent; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap}
.chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.flag{display:inline-flex; gap:6px; align-items:center; border-radius:10px; padding:5px 10px; font-size:13px; font-weight:600; background:var(--warn-bg); color:var(--warn-ink)}
.flag.info{background:var(--info-bg); color:var(--info-ink)}

.panel{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px; display:flex; flex-direction:column; gap:16px; min-width:0}
.panel-h{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.panel-h h2{font-size:24px; font-weight:700}
.dark{background:var(--side); border-color:var(--side); color:#F1EDE5}
.dark .muted{color:#BDB6AA}
.muted{color:var(--muted)}
.small{font-size:13px}
.split{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start}
.split > *{flex:1 1 320px}
.split > .wide{flex:999 1 520px}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.kpi{border-radius:24px; padding:20px; display:flex; flex-direction:column; gap:14px; color:var(--on-pastel)}
.kpi .pill{background:#FFFFFF; color:#161513; align-self:flex-start}
.kpi b{font-family:var(--f-disp); font-size:clamp(30px,3.4vw,40px); font-weight:800; line-height:1}
.stages{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.stage{border-radius:var(--r-md); padding:14px; display:flex; flex-direction:column; gap:8px; color:var(--on-pastel); text-decoration:none}
.stage:hover{filter:brightness(.96)}
.stage .top{display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px}
.stage b{font-family:var(--f-disp); font-size:22px; font-weight:800}

.list{display:flex; flex-direction:column}
.li{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--hair)}
.li:first-child{border-top:none}
.dark .li{border-color:#33302C}
.li .t{font-weight:600}
.li .s{font-size:13px; color:var(--muted)}
.dark .li .s{color:#BDB6AA}

.tbl-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:15px}
th{text-align:left; font-size:13px; font-weight:500; color:var(--muted); padding:0 12px 10px 0; white-space:nowrap}
td{padding:12px 12px 12px 0; border-top:1px solid var(--hair); vertical-align:middle}
td .s{font-size:13px; color:var(--muted)}
tr.clk{cursor:pointer}
tr.clk:hover td{background:var(--surface2)}
.rowbtn{background:none; border:none; padding:0; text-align:left; font-weight:600; cursor:pointer}
.rowbtn:hover{text-decoration:underline}

.search{display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:0 16px; min-height:44px; flex:1 1 220px; max-width:360px}
.search input{border:none; outline:none; background:transparent; width:100%; min-width:0}
.search svg{flex:none}


/* Brand cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.bcard{border-radius:24px; padding:18px; display:flex; flex-direction:column; gap:12px; text-align:left; border:none; cursor:pointer; color:var(--on-pastel); min-height:170px}
.bcard:hover{filter:brightness(.96)}
.bcard h3{font-size:22px; font-weight:700}
.bcard .meta{margin-top:auto; display:flex; justify-content:space-between; font-size:14px; font-weight:500}
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.info dt{font-size:13px; color:var(--muted)}
.info dd{margin:2px 0 0; font-weight:600; overflow-wrap:anywhere}
.progress{height:8px; border-radius:999px; background:var(--hair); overflow:hidden}
.progress i{display:block; height:100%; background:var(--ink); border-radius:999px}

.empty{border:1.5px dashed var(--line); border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.empty h2{font-size:24px}
.empty p{margin:0; color:var(--muted); max-width:60ch}
.banner{border-radius:16px; padding:14px 18px; background:var(--warn-bg); color:var(--warn-ink); font-weight:500}

/* Modal */
.overlay{position:fixed; inset:0; background:rgba(20,19,17,.55); display:flex; align-items:flex-start; justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 24px) 16px 24px; overflow-y:auto; z-index:20}
.modal{background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-lg); width:100%; max-width:680px; padding:24px; display:flex; flex-direction:column; gap:18px}
.modal h2{font-size:28px; font-weight:800}
.fgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:560px){ .fgrid{grid-template-columns:minmax(0,1fr)} }
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field.full{grid-column:1/-1}
.field > label, .field > .lbl{font-size:13px; font-weight:600}
.field input:not([type=checkbox]), .field select, .field textarea{width:100%; min-height:44px; border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--surface2)}
.field textarea{min-height:88px; resize:vertical}
.field .help{font-size:12.5px; color:var(--muted)}
.checks{display:flex; flex-wrap:wrap; gap:6px}
.checks label{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:1.5px solid var(--line); border-radius:999px; font-size:13.5px; cursor:pointer}
.checks input{accent-color:var(--accent)}
.checks label:has(input:checked){background:var(--ink); color:var(--bg)}
.inline-check{display:flex; align-items:center; gap:10px; min-height:44px; font-weight:600}
.inline-check input{width:20px; height:20px; accent-color:var(--accent)}
.err{color:var(--warn-ink); background:var(--warn-bg); border-radius:12px; padding:10px 14px; font-weight:600}
.mfoot{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.sub{border-top:1px solid var(--hair); padding-top:16px; display:flex; flex-direction:column; gap:12px}
.sub h3{font-size:18px}

.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 20px); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:999px; font-weight:600; z-index:30; max-width:calc(100% - 32px)}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* Accesso e utente */
.who{color:#8F8A80; font-size:12.5px; padding:4px 14px 8px; overflow-wrap:anywhere}
.side-foot .logout{background:none; border:none; width:100%; text-align:left; display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; color:var(--side-ink); font-weight:500; cursor:pointer}
.side-foot .logout:hover{background:var(--side-hover); color:#FFFFFF}
body.signed-out .side{display:none}
body.signed-out .main{align-items:center; justify-content:center; min-height:calc(100vh - 32px)}
.auth{width:100%; max-width:420px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column; gap:16px}
.auth .logo{color:var(--ink); padding:0; font-size:28px}
.auth h1{font-size:32px; font-weight:800}
.auth .field input{width:100%; min-height:44px; border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--surface2)}