/* =========================================================
   staff.css — stessa famiglia dell'app e della dashboard:
   crema, vermiglio, fili sottili. Quello che cambia è la scala:
   orari grandi e bottoni larghi, perché si lavora in piedi.
   ========================================================= */

:root{
  --crema:   #fff6ed;
  --crema-2: #fdeede;
  --crema-3: #f7e3ce;
  --carta:   #fffbf5;
  --rosso:   #c32c04;
  --rosso-2: #e2551f;
  --rosso-scuro: #9c2203;
  --ink:     #201c19;
  --ink-2:   #6e5b50;
  --ink-3:   #a08d7f;
  --linea:   #f0e4d5;
  --linea-2: #e2d1bb;
  --verde:   #4a7a3f;
  --senape:  #e9a53b;
  --r:    14px;
  --r-lg: 20px;
  --font: 'Inter', system-ui, sans-serif;
  --head: 'Archivo', system-ui, sans-serif;
  --sh: 0 1px 2px rgba(32,28,25,.03), 0 4px 16px rgba(32,28,25,.06);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  font-family: var(--font); background: var(--crema); color: var(--ink);
  font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button, select, input{ font: inherit; color: inherit; }
button{ cursor: pointer; background: none; border: 0; }
a{ color: inherit; text-decoration: none; }
h1, h2, p, ul{ margin: 0; }
[hidden]{ display: none !important; }
svg{ width: 22px; height: 22px; flex: none; }

/* ---------- scelta del ruolo ---------- */

.entra{ max-width: 620px; margin: 0 auto; padding: 30px 18px 40px; }
.entra__t{ margin-bottom: 24px; }
/* Il marchio dell'app di servizio: un file solo, colorato con la maschera. */
.marchio{
  display: block; width: 148px; aspect-ratio: 2058 / 680; background: var(--rosso);
  margin-bottom: 20px;
  -webkit-mask: url(/assets/logo-staff.svg) left center / contain no-repeat;
  mask: url(/assets/logo-staff.svg) left center / contain no-repeat;
}
.entra h1{
  font-family: var(--head); font-size: 25px; font-weight: 700; letter-spacing: -.01em;
}

.campo{ display: block; margin-bottom: 20px; }
.campo__et{
  display: block; font-family: var(--head); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
select{
  width: 100%; padding: 13px 12px; border-radius: 12px;
  background: var(--carta); border: 1px solid var(--linea-2); color: var(--ink);
  font-family: var(--head); font-weight: 600;
}

.ruoli{ display: grid; gap: 10px; }
.ruolo{
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 15px; border-radius: var(--r-lg);
  background: var(--carta); border: 1px solid var(--linea); box-shadow: var(--sh);
}
.ruolo:active{ background: var(--crema-2); }
.ruolo__ic{
  width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--crema-2); color: var(--rosso);
}
.ruolo__ic svg{ width: 24px; height: 24px; }
.ruolo__b{ flex: 1; min-width: 0; }
.ruolo__t{ display: block; font-family: var(--head); font-size: 18px; font-weight: 700; }
.ruolo__n{
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; flex: none;
  background: var(--rosso); color: var(--crema); font-family: var(--head); font-weight: 700;
  display: grid; place-items: center;
}
.ruolo__n.is-zero{ background: var(--crema-3); color: var(--ink-3); }

/* ---------- testata del turno ---------- */

.testa{
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--carta); border-bottom: 1px solid var(--linea);
}
.testa__b{
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--crema-2); color: var(--ink-2);
}
.testa__c{ flex: 1; min-width: 0; line-height: 1.2; }
.testa__c b{ font-family: var(--head); font-size: 17px; display: block; }
.testa__c span{ font-size: 12.5px; color: var(--ink-3); }
.spia{
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--verde);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 20%, transparent);
}

.corpo{ padding: 18px 14px calc(30px + var(--safe-b)); max-width: 920px; margin: 0 auto; }

/* ---------- sezioni ---------- */

.sez{ margin-bottom: 26px; }
.sez__t{
  font-family: var(--head); font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.riga-info{ font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
.vuoto{
  padding: 22px 16px; border-radius: var(--r); border: 1px dashed var(--linea-2);
  color: var(--ink-3); text-align: center;
}

/* ---------- la scheda di lavoro ---------- */

.lav{
  border-radius: var(--r-lg); background: var(--carta); border: 1px solid var(--linea);
  box-shadow: var(--sh); padding: 15px; margin-bottom: 12px;
}
.lav--pallida{ background: var(--crema-2); box-shadow: none; color: var(--ink-2); }
.lav.is-ora{ border-color: var(--senape); }
.lav.is-tardi{
  border-color: var(--rosso);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosso) 9%, transparent);
}

.lav__t{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lav__ora{
  font-family: var(--head); font-size: 26px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lav__quando{ font-size: 13px; color: var(--ink-2); flex: 1; }
.lav.is-tardi .lav__quando{ color: var(--rosso); font-weight: 700; }
.lav.is-ora .lav__quando{ color: #a9741a; font-weight: 700; }

.tag{
  font-family: var(--head); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 8px;
  background: var(--crema-2); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.tag svg{ width: 13px; height: 13px; }
.tag--dom{ background: color-mix(in srgb, var(--rosso) 12%, transparent); color: var(--rosso); }
.tag--canale{ background: var(--ink); color: var(--crema); }

.lav__chi{ font-size: 15px; color: var(--ink-2); margin-bottom: 8px; }
.lav__dove{ font-family: var(--head); font-size: 17px; font-weight: 700; margin-top: 4px; }
.lav__mod{ font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.lav__conto{ font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.lav__nota{
  font-size: 14px; margin-top: 8px; padding: 9px 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--senape) 16%, transparent); color: #7a5410;
}

.piatti{ list-style: none; padding: 0; margin: 10px 0 0; }
.piatti li{ padding: 9px 0; border-top: 1px solid var(--linea); }
.piatti b{ font-family: var(--head); font-size: 17px; font-weight: 700; }
.mod{
  display: block; font-size: 14px; color: var(--rosso); padding-left: 14px; margin-top: 2px;
  font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.mod--nota{
  color: #7a5410; text-transform: none; letter-spacing: 0; font-weight: 500;
  font-family: var(--font);
}

.lav__cmd{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cmd{
  flex: 1; min-width: 132px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px; border-radius: 999px;
  background: var(--crema-2); border: 1px solid var(--linea-2); color: var(--ink);
  font-family: var(--head); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.cmd:active{ transform: translateY(1px); }
.cmd--ok{ background: var(--rosso); border-color: var(--rosso); color: var(--crema); }
.cmd--ko{ background: none; border-color: var(--linea-2); color: var(--ink-3); flex: 0 1 auto; }

.fatti{ display: flex; flex-wrap: wrap; gap: 6px; }
.fatto{
  font-size: 13px; color: var(--ink-3); padding: 6px 11px; border-radius: 999px;
  background: var(--carta); border: 1px solid var(--linea);
}

/* ---------- avviso ---------- */

.toast{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + var(--safe-b)); z-index: 40;
  background: var(--ink); color: var(--crema); padding: 13px 20px; border-radius: 999px;
  font-family: var(--head); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 0 10px 30px rgba(32,28,25,.22);
}

@media (min-width: 720px){
  .corpo{ padding-inline: 20px; }
}