/* ============================================================
   TEMA SALA COMANDO — assets/tema.css

   Porta nel gestionale la stessa lingua visiva della HUD:
   cenere calda invece di grigio neutro, ambra della brace,
   Big Shoulders per i titoli, Space Grotesk per i numeri.

   Va caricato DOPO style.css.
   Non tocca app.js: se lo togli, torna tutto come prima.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Karla:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --cenere:#0D0A08; --carbone:#171210; --carbone2:#211A16; --riga:#2E2521;
  --brace:#E06D2A; --brace2:#F2913F; --fiamma:#FF4D2E; --oliva:#8FA96B; --oro:#D9A441;
  --fumo:#8A7F76; --panna:#F5EFE7;

  /* nomi usati da style.css: li riporto sulla nuova tavolozza */
  --bg:#0D0A08; --card:#171210; --card2:#211A16; --linea:#2E2521;
  --amber:#E06D2A; --amber2:#F2913F; --acc:#E06D2A; --acc2:#F2913F;
  --green:#8FA96B; --green-soft:rgba(143,169,107,.15);
  --red:#FF4D2E; --yellow:#D9A441;
  --txt:#F5EFE7; --mut:#8A7F76;

  --display:'Big Shoulders Display',sans-serif;
  --testo:'Karla',sans-serif;
  --dato:'Space Grotesk',monospace;
}

/* ── fondo e testo ── */
html,body{background:var(--cenere)!important;color:var(--panna)!important}
body{font-family:var(--testo)!important;-webkit-font-smoothing:antialiased}

/* ── testata ── */
.app-header{
  background:var(--carbone)!important;
  border-bottom:1px solid var(--riga)!important;
}
.brand{
  font-family:var(--display)!important;font-weight:900!important;
  font-size:19px!important;letter-spacing:.02em!important;
  text-transform:uppercase;
}
.brand .flame{filter:saturate(1.2)}
.user-name{font-weight:700!important;font-size:13px!important}
.user-role{
  font-family:var(--dato)!important;font-size:9.5px!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--fumo)!important;
}

/* ── navigazione a pillole ── */
.nav-btn{
  border-radius:99px!important;
  border:1px solid var(--riga)!important;
  background:var(--carbone2)!important;
  color:var(--fumo)!important;
  font-size:13px!important;font-weight:600!important;
  padding:8px 15px!important;
  transition:background .15s,color .15s,border-color .15s;
}
.nav-btn:hover{color:var(--panna)!important;border-color:var(--fumo)!important}
.nav-btn.active{
  background:var(--brace)!important;color:#140F0B!important;
  border-color:var(--brace)!important;font-weight:700!important;
}

/* ── schede ── */
.card,.stat{
  background:var(--carbone)!important;
  border:1px solid var(--riga)!important;
  border-radius:14px!important;
}
.stat .val{
  font-family:var(--dato)!important;font-weight:700!important;
  font-size:30px!important;line-height:1!important;
}

/* ── titoli di sezione: la riga che continua ── */
.section-title{
  font-family:var(--dato)!important;
  font-size:10.5px!important;font-weight:700!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  color:var(--fumo)!important;
  display:flex!important;align-items:center;gap:10px;
  margin-bottom:12px!important;
}
.section-title::after{content:'';flex:1;height:1px;background:var(--riga)}

.eyebrow{
  font-family:var(--dato)!important;
  font-size:10px!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:var(--fumo)!important;font-weight:700!important;
}

/* ── bottoni ── */
.btn{
  border-radius:11px!important;
  font-weight:700!important;font-size:13.5px!important;
  background:var(--brace)!important;color:#140F0B!important;
  padding:10px 16px!important;
  transition:background .15s;
}
.btn:hover{background:var(--brace2)!important}
.btn.ghost,.btn.secondary{
  background:transparent!important;
  border:1px solid var(--riga)!important;
  color:var(--fumo)!important;
}
.btn.ghost:hover,.btn.secondary:hover{
  border-color:var(--brace)!important;color:var(--brace2)!important;background:transparent!important;
}
.btn.small{font-size:12px!important;padding:7px 12px!important;border-radius:9px!important}
.icon-btn{border-radius:9px!important;color:var(--fumo)!important}
.icon-btn:hover{background:var(--carbone2)!important;color:var(--panna)!important}

/* ── campi ── */
input,select,textarea{
  background:var(--cenere)!important;
  border:1px solid var(--riga)!important;
  border-radius:10px!important;
  color:var(--panna)!important;
  font-family:var(--testo)!important;
  padding:10px 12px!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brace)!important;outline:none!important;
}
input::placeholder,textarea::placeholder{color:#5A524B!important}
input[type=number],input[type=time],input[type=date]{font-family:var(--dato)!important}

/* ── tabelle ── */
.tablewrap{
  background:var(--carbone)!important;
  border:1px solid var(--riga)!important;
  border-radius:14px!important;overflow:hidden;
}
table th{
  background:var(--carbone2)!important;
  font-family:var(--dato)!important;
  font-size:10px!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;color:var(--fumo)!important;font-weight:700!important;
  padding:11px 12px!important;
}
table td{border-top:1px solid var(--riga)!important;padding:11px 12px!important;font-size:13.5px!important}
table tr:hover td{background:rgba(224,109,42,.045)!important}
.mono{font-family:var(--dato)!important;font-weight:600!important}
.muted{color:var(--fumo)!important}
.small{font-size:12px!important}

/* ── etichette di stato ── */
.badge{
  font-family:var(--dato)!important;
  font-size:11px!important;font-weight:700!important;
  border-radius:99px!important;padding:4px 10px!important;
  letter-spacing:.04em!important;
}
.badge.pronto{background:rgba(143,169,107,.16)!important;color:var(--oliva)!important}
.badge.corso{background:rgba(217,164,65,.16)!important;color:var(--oro)!important}
.badge.attesa{background:var(--carbone2)!important;color:var(--fumo)!important}

/* ── avvisi ── */
.alert{border-radius:13px!important;padding:13px 15px!important;font-size:13.5px!important}
.alert.warn{
  background:rgba(217,164,65,.09)!important;
  border:none!important;border-left:3px solid var(--oro)!important;
  color:var(--panna)!important;
}

/* ── ticket del KDS ── */
.ticket{
  background:var(--carbone)!important;
  border:1px solid var(--riga)!important;
  border-left:3px solid var(--riga)!important;
  border-radius:14px!important;
}
.ticket.urgente{
  border-left-color:var(--fiamma)!important;
  background:linear-gradient(90deg,rgba(255,77,46,.08),var(--carbone) 55%)!important;
}
.ticket-head{
  border-bottom:1px solid var(--riga)!important;
  font-family:var(--display)!important;font-weight:800!important;
  font-size:16px!important;text-transform:uppercase;letter-spacing:.03em;
}
.ticket-item{border-top:1px solid var(--riga)!important}

/* ── pallini reparto ── */
.dot{border-radius:50%!important}
.dot-amber{background:var(--brace)!important}
.dot-emerald{background:var(--oliva)!important}
.dot-sky{background:#6FA8C7!important}
.dot-rose{background:var(--fiamma)!important}
.dot-violet{background:#9B7EC7!important}

/* ── barre ── */
.bar-bg{background:var(--riga)!important;border-radius:99px!important;height:6px!important}
.bar-fill{background:var(--brace)!important;border-radius:99px!important}

/* ── carrello ── */
.cart-line{border-bottom:1px solid var(--riga)!important;padding:10px 0!important}
.qty-ctl button{
  background:var(--carbone2)!important;
  border:1px solid var(--riga)!important;
  border-radius:8px!important;color:var(--panna)!important;
}
.qty-ctl button:hover{border-color:var(--brace)!important;color:var(--brace2)!important}
.type-toggle{background:var(--carbone)!important;border:1px solid var(--riga)!important;border-radius:11px!important;padding:3px!important}
.type-toggle button{border-radius:9px!important;color:var(--fumo)!important;font-weight:600!important}
.type-toggle button.active{background:var(--brace)!important;color:#140F0B!important}

/* ── prodotti ── */
.btn-prodotto-menu,.btn-prodotto-griglia{
  background:var(--carbone)!important;
  border:1px solid var(--riga)!important;
  border-radius:11px!important;
  color:var(--panna)!important;
  transition:border-color .15s,background .15s;
}
.btn-prodotto-menu:hover,.btn-prodotto-griglia:hover{
  border-color:var(--brace)!important;background:rgba(224,109,42,.07)!important;color:var(--panna)!important;
}

/* ── accesso ── */
.login-wrap{background:var(--cenere)!important}
.login-card{
  background:var(--carbone)!important;
  border:1px solid var(--riga)!important;
  border-radius:20px!important;
  padding:30px!important;
}
.login-title{
  font-family:var(--display)!important;font-weight:900!important;
  font-size:30px!important;text-transform:uppercase!important;
  letter-spacing:-.01em!important;line-height:.95!important;margin-bottom:20px!important;
}
.login-item{
  background:var(--carbone2)!important;
  border:1px solid var(--riga)!important;
  border-radius:12px!important;
  padding:14px 16px!important;margin-bottom:7px!important;
  transition:border-color .15s;
}
.login-item:hover{border-color:var(--brace)!important}
.pin-input{
  font-family:var(--dato)!important;
  font-size:28px!important;font-weight:700!important;
  letter-spacing:.35em!important;text-align:center!important;
  padding:15px!important;margin-bottom:12px!important;
}

/* ── navbar in basso ── */
.bottom-nav-mobile{
  background:var(--carbone)!important;
  border-top:1px solid var(--riga)!important;
}
.nav-btn-bottom{
  background:transparent!important;color:var(--fumo)!important;
  font-family:var(--dato)!important;font-size:11px!important;
  letter-spacing:.04em!important;font-weight:700!important;
}
.nav-btn-bottom.active{background:var(--brace)!important;color:#140F0B!important}

/* ── barra di scorrimento ── */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--cenere)}
::-webkit-scrollbar-thumb{background:var(--riga);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#3E342D}

/* ── ritorno alla sala comando ── */
.torna-hud{
  position:fixed;right:16px;bottom:16px;z-index:200;
  background:var(--brace);color:#140F0B;
  font-family:var(--display);font-weight:900;font-size:14px;
  text-transform:uppercase;letter-spacing:.05em;
  padding:12px 18px;border-radius:99px;text-decoration:none;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
}
.torna-hud:hover{background:var(--brace2)}

/* ── mobile ── */
@media (max-width:768px){
  .nav{
    display:flex!important;order:3;width:100%;gap:6px;
    padding:8px 12px 10px;margin:0;overflow-x:auto;
    border-top:1px solid var(--riga);scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav-btn{flex:0 0 auto;white-space:nowrap}
  .app-header{position:sticky;top:0;z-index:50}
  .header-row{align-items:center;padding:9px 13px;gap:8px}
  .brand{font-size:15px!important;flex:1;min-width:0}
  .brand .muted{display:none}
  .user-box>div:first-child{display:none}
  .main{padding-bottom:56px!important}
  .torna-hud{bottom:70px}
}
body:has(.bottom-nav-mobile) .nav{display:none!important}
body:has(.bottom-nav-mobile) .main{padding-bottom:96px!important}
body:has(.bottom-nav-mobile) .torna-hud{bottom:78px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}