/* Sagra del Tartufo 2026 — coda intelligente · palette dal flyer: verde oliva + pergamena */
:root{
  --green:oklch(0.52 0.1 125);
  --green-dark:oklch(0.45 0.1 125);
  --green-soft:oklch(0.52 0.1 125 / .12);
  --green-bright:oklch(0.68 0.14 125);
  --green-pale:oklch(0.78 0.12 125);
  --ink:#2b2416;
  --cream:#f8efd9;
  --paper:#e9dfc6;
  --red:oklch(0.5 0.17 30);
  --red-soft:oklch(0.5 0.17 30 / .12);
  --line:rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Sora',sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
button{font-family:inherit;border:0;background:none;padding:0;cursor:pointer;color:inherit}
input{font-family:inherit;outline:none}
a{color:var(--green)}
[hidden]{display:none!important}

/* ============ cliente (index) ============ */
.shell{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--cream);box-shadow:0 0 48px rgba(0,0,0,.1);position:relative;display:flex;flex-direction:column}
.view{display:flex;flex-direction:column;flex:1}

.hero{background:var(--green);color:#fff;padding:calc(env(safe-area-inset-top) + 30px) 24px 22px}
.hero .kicker{font:600 11px 'Sora',sans-serif;letter-spacing:.14em;opacity:.8;text-transform:uppercase}
.hero h1{font:800 32px/1.05 'Bricolage Grotesque',sans-serif;margin-top:8px}
.hero .sub{font:600 12px 'Sora',sans-serif;margin-top:8px;opacity:.85}

.welcome-body{padding:22px 24px calc(env(safe-area-inset-bottom) + 20px);display:flex;flex-direction:column;gap:16px;flex:1}
.welcome-body h2{font:700 24px/1.2 'Bricolage Grotesque',sans-serif}
.lead{font-size:14px;line-height:1.6;color:rgba(43,36,22,.7)}
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;align-items:center;gap:12px}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font:700 13px 'Sora',sans-serif;flex:none}
.step .t{font-size:13.5px;font-weight:600}
.pill{align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.07);font:600 12px 'Sora',sans-serif}
.welcome-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.smallprint{font-size:11.5px;color:rgba(43,36,22,.5);text-align:center;line-height:1.5}
.btn-primary{display:block;width:100%;background:var(--green);color:#fff;border-radius:14px;padding:17px;text-align:center;font:700 16px 'Sora',sans-serif;transition:background .15s}
.btn-primary:hover{background:var(--green-dark)}
.staff-links{text-align:center;font:600 10px 'Sora',sans-serif;letter-spacing:.08em;color:rgba(43,36,22,.35);text-transform:uppercase}
.staff-links a{color:rgba(43,36,22,.4);text-decoration:none}
.staff-links a:hover{color:var(--green)}

/* listino */
.menu-head{padding:calc(env(safe-area-inset-top) + 18px) 20px 12px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--cream);z-index:2}
.menu-head h1{font:800 20px 'Bricolage Grotesque',sans-serif}
.menu-head .ev{font:600 11px 'Sora',sans-serif;color:var(--green);white-space:nowrap}
.menu-back{font:600 12px 'Sora',sans-serif;color:rgba(43,36,22,.5);background:none}
.menu-list{flex:1;padding:6px 20px 130px}
.cat-label{font:700 12px 'Sora',sans-serif;letter-spacing:.12em;color:rgba(43,36,22,.45);margin:18px 0 6px}
.mi{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.mi-info{flex:1;min-width:0}
.mi-name{font:600 14px 'Sora',sans-serif}
.mi-desc{font-size:11px;color:rgba(43,36,22,.5);margin-top:2px}
.mi-meta{display:flex;gap:8px;align-items:center;margin-top:3px}
.mi-price{font:700 13px 'Sora',sans-serif;color:rgba(43,36,22,.6)}
.mi-badge{font:600 10px 'Sora',sans-serif;color:var(--red);background:var(--red-soft);padding:2px 7px;border-radius:999px}
.stepper{display:flex;align-items:center;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:999px;flex:none}
.st-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font:600 18px 'Sora',sans-serif;user-select:none;-webkit-tap-highlight-color:transparent}
.st-btn:hover{color:var(--green)}
.st-qty{min-width:18px;text-align:center;font:700 14px 'Sora',sans-serif;color:rgba(43,36,22,.3)}
.st-qty.on{color:var(--green)}
.sendbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;padding:14px 20px calc(env(safe-area-inset-bottom) + 16px);background:linear-gradient(transparent,var(--cream) 30%);z-index:3}
.sendbar-inner{width:100%;background:var(--ink);color:#fff;border-radius:16px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:opacity .15s}
.sendbar-inner:disabled{opacity:.45;cursor:default}
.sendbar .sum{font:600 13px 'Sora',sans-serif;opacity:.85}
.sendbar .cta{display:flex;align-items:center;gap:8px;font:700 15px 'Sora',sans-serif}

/* conferma */
.done{padding:calc(env(safe-area-inset-top) + 34px) 24px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;flex:1}
.done-check{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin:12px auto 0}
.done h1{font:800 26px 'Bricolage Grotesque',sans-serif;text-align:center;margin-top:16px}
.done .sub{font-size:13.5px;line-height:1.6;color:rgba(43,36,22,.65);text-align:center;margin-top:8px}
.done .disclaimer{margin-top:12px;padding:10px 14px;background:rgba(43,36,22,.06);border-radius:10px;font-size:12px;line-height:1.5;color:rgba(43,36,22,.65);text-align:center}
.receipt{margin-top:24px;background:#fff;border:1.5px dashed rgba(43,36,22,.35);border-radius:14px;padding:18px 20px}
.receipt .label{font:700 11px 'Sora',sans-serif;letter-spacing:.12em;color:rgba(43,36,22,.45);margin-bottom:10px}
.receipt .row{display:flex;justify-content:space-between;padding:5px 0;font:500 13.5px 'Sora',sans-serif}
.receipt .row .q{font-weight:700;color:var(--green)}
.receipt .row .p{font-weight:600}
.receipt .tot{display:flex;justify-content:space-between;border-top:1px solid rgba(0,0,0,.1);margin-top:8px;padding-top:10px;font:700 15px 'Sora',sans-serif}
.receipt .empty{font-size:13px;color:rgba(43,36,22,.5)}
.done .edit{margin-top:14px;font-size:12px;color:rgba(43,36,22,.55);text-align:center;line-height:1.6}
.done .edit button{color:var(--green);font-weight:600;font-size:12px}
.done .brand{margin-top:auto;padding-top:24px;text-align:center;font:600 10.5px 'Sora',sans-serif;letter-spacing:.1em;color:rgba(43,36,22,.35)}

/* ============ staff (dashboard + admin) ============ */
.board{max-width:920px;margin:18px auto 48px;background:var(--cream);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
@media(max-width:960px){.board{margin:0 0 32px;border-radius:0;border-left:0;border-right:0}}
.board-head{background:var(--ink);color:#fff;padding:calc(env(safe-area-inset-top) + 20px) 28px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.board-head h1{font:800 22px 'Bricolage Grotesque',sans-serif}
.board-head .meta{font:500 12px 'Sora',sans-serif;opacity:.6;margin-top:3px}
.head-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.live{display:flex;align-items:center;gap:8px;font:600 12px 'Sora',sans-serif;color:var(--green-pale);white-space:nowrap}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--green-bright);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.head-links{display:flex;gap:14px;font:600 11px 'Sora',sans-serif;flex-wrap:wrap}
.head-links a{color:rgba(255,255,255,.55);text-decoration:none}
.head-links a:hover{color:#fff}
@media(max-width:640px){.board-head{padding:calc(env(safe-area-inset-top) + 16px) 18px 16px}.head-right{align-items:flex-start}}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.stat{background:var(--cream);padding:18px 28px}
.stat b{display:block;font:800 32px 'Bricolage Grotesque',sans-serif;font-weight:800}
.stat.hot b{color:var(--green)}
.stat span{display:block;font:600 11.5px 'Sora',sans-serif;color:rgba(43,36,22,.55);margin-top:2px}
@media(max-width:640px){.stat{padding:14px 14px}.stat b{font-size:24px}.stat span{font-size:10.5px}}

.demand{padding:22px 28px 26px;display:flex;flex-direction:column;gap:12px}
@media(max-width:640px){.demand{padding:18px 18px 22px}}
.demand-cols{display:flex;justify-content:space-between;font:700 10.5px 'Sora',sans-serif;letter-spacing:.12em;color:rgba(43,36,22,.4)}
.d-cat{font:700 10.5px 'Sora',sans-serif;letter-spacing:.12em;color:var(--green);margin-top:4px}
.demand-row{display:grid;grid-template-columns:220px 1fr 90px;align-items:center;gap:16px}
.d-name{font:600 13.5px 'Sora',sans-serif}
.d-bar{height:22px;background:rgba(0,0,0,.05);border-radius:5px;overflow:hidden}
.d-bar i{display:block;height:100%;border-radius:5px;background:var(--green);transition:width .4s}
.demand-row.cold .d-bar i{background:oklch(0.52 0.1 125 / .45)}
.d-qty{display:flex;align-items:baseline;gap:8px;justify-content:flex-end}
.d-qty b{font:800 16px 'Bricolage Grotesque',sans-serif}
.d-qty .trend{font:600 11px 'Sora',sans-serif;color:var(--green)}
@media(max-width:640px){
  .demand-row{grid-template-columns:1fr 90px;row-gap:5px}
  .d-name{grid-column:1 / -1}
}
.insight{margin-top:8px;padding:12px 16px;background:var(--green-soft);border-radius:8px;font:500 12px/1.6 'Sora',sans-serif}
.demand .foot{font-size:11px;color:rgba(43,36,22,.45)}

/* admin */
.admin-body{padding:22px 28px 28px}
@media(max-width:640px){.admin-body{padding:18px 18px 24px}}
.admin-intro{font:500 12px 'Sora',sans-serif;color:rgba(43,36,22,.55);margin-bottom:18px}
.add-row{display:flex;gap:10px}
.add-row input{padding:12px 14px;border:1px solid rgba(0,0,0,.15);border-radius:10px;background:#fff;font:500 13px 'Sora',sans-serif;color:var(--ink)}
.add-row input:focus{border-color:var(--green)}
.add-row input.invalid{border-color:var(--red)}
.add-row .f-name{flex:1;min-width:0}
.add-row .f-price{width:96px;font-weight:600;text-align:right}
.add-row select.f-cat{padding:12px 10px;border:1px solid rgba(0,0,0,.15);border-radius:10px;background:#fff;font:600 13px 'Sora',sans-serif;color:var(--ink);cursor:pointer}
.add-row select.f-cat:focus{border-color:var(--green)}
.btn-add{padding:12px 16px;background:var(--ink);color:#fff;border-radius:10px;font:700 13px 'Sora',sans-serif;transition:background .15s}
.btn-add:hover{background:var(--green)}
@media(max-width:480px){.add-row{flex-wrap:wrap}.add-row .f-name{flex:1 1 100%}.add-row select.f-cat{flex:1}.add-row .f-price{flex:1}}
.admin-table{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.at-head,.at-row{display:grid;grid-template-columns:1fr 84px 92px;align-items:center;padding:0 16px}
.at-head{padding-top:10px;padding-bottom:10px;background:rgba(0,0,0,.04);font:700 10px 'Sora',sans-serif;letter-spacing:.1em;color:rgba(43,36,22,.45)}
.at-head .r,.at-row .r{text-align:right}
.at-cat{padding:10px 16px 4px;border-top:1px solid rgba(0,0,0,.05);font:700 10px 'Sora',sans-serif;letter-spacing:.12em;color:var(--green)}
.at-row{border-top:1px solid rgba(0,0,0,.05);min-height:44px;padding-top:6px;padding-bottom:6px}
.at-cat+.at-row{border-top:0}
.at-row .name{font:500 13px 'Sora',sans-serif;padding-right:8px}
.at-row .price{font:600 13px 'Sora',sans-serif;color:rgba(43,36,22,.7)}
.at-row .actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.btn-x{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(43,36,22,.45);font:600 15px 'Sora',sans-serif}
.btn-x:hover{background:var(--red-soft);color:var(--red)}
.btn-yes{padding:6px 11px;border-radius:8px;background:var(--red);color:#fff;font:700 11px 'Sora',sans-serif}
.btn-no{padding:6px 11px;border-radius:8px;background:rgba(0,0,0,.08);color:var(--ink);font:700 11px 'Sora',sans-serif}
.btn-save{display:block;width:100%;margin-top:18px;background:var(--green);color:#fff;border-radius:12px;padding:15px;text-align:center;font:700 14px 'Sora',sans-serif;transition:background .15s}
.btn-save:hover{background:var(--green-dark)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font:600 13px 'Sora',sans-serif;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;z-index:9}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* stati vuoti / errori */
.d-empty{font:500 13px 'Sora',sans-serif;color:rgba(43,36,22,.5);padding:6px 0}
.menu-error{padding:28px 0;font-size:13px;line-height:1.6;color:rgba(43,36,22,.6)}
.menu-error button{color:var(--green);font-weight:600;font-size:13px;text-decoration:underline}

/* overlay PIN area volontari */
.pin-overlay{position:fixed;inset:0;background:rgba(43,36,22,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:99;padding:20px}
.pin-card{background:var(--cream);border-radius:16px;padding:28px;width:100%;max-width:320px;box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:12px}
.pin-title{font:800 20px 'Bricolage Grotesque',sans-serif}
.pin-sub{font:500 12px 'Sora',sans-serif;color:rgba(43,36,22,.55)}
.pin-input{padding:14px;border:1px solid rgba(0,0,0,.15);border-radius:10px;background:#fff;font:700 20px 'Sora',sans-serif;text-align:center;letter-spacing:.35em;color:var(--ink);width:100%}
.pin-input:focus{border-color:var(--green)}
.pin-err{font:600 12px 'Sora',sans-serif;color:var(--red)}
.pin-btn{background:var(--green);color:#fff;border-radius:12px;padding:14px;font:700 14px 'Sora',sans-serif;transition:background .15s}
.pin-btn:hover{background:var(--green-dark)}
.pin-btn:disabled{opacity:.6;cursor:default}