/* Il gestionale (backoffice) di Kherno Food nei racconti scorrendo di food.html: Magazzino, Direzione, Marketing.
   Ricalca alhena-pos/apps/backoffice: tema chiaro, barra laterale, intestazione in vetro, schede k-card, tabelle mono.
   --b è il «rem» del gestionale ridotto al tablet della pagina. Dati di fantasia. */
.tz-scr.bo { --b: calc(2.85 * var(--u)); --fondo: #F2F3F6; --sup: #fff; --ln: #E4E7EC; --ln2: #EEF0F4; --ink: #0A0C11; --ink2: #3C414B; --gr: #6E737D; --gr2: #9AA0AA;
  --blu: #1B3BD9; --wash: #EEF1FF; --ok: #0E7C56; --bad: #B3261E;
  padding: 0 !important; gap: 0 !important; display: grid !important; grid-template-columns: calc(10.6 * var(--b)) 1fr; grid-template-rows: minmax(0, 1fr); background: var(--fondo) !important; color: var(--ink);
  font-family: var(--font-body, sans-serif); font-size: var(--b); line-height: 1.3; }
.bo p { margin: 0; max-width: none; }

/* barra laterale */
.bo-side { background: var(--fondo); border-right: 1px solid var(--ln2); padding: calc(1 * var(--b)) calc(.6 * var(--b)); display: grid; align-content: start; gap: calc(.55 * var(--b)); overflow: hidden; }
.bo-logo { display: flex; align-items: center; gap: calc(.4 * var(--b)); padding-bottom: calc(.6 * var(--b)); border-bottom: 1px solid var(--ln2); }
.bo-logo svg { width: calc(1 * var(--b)); color: var(--blu); flex: 0 0 auto; }
.bo-logo b { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(1.05 * var(--b)); letter-spacing: -.02em; white-space: nowrap; }
.bo-loc, .bo-cerca { border: 1px solid var(--ln); border-radius: calc(.5 * var(--b)); background: #fafafa; padding: calc(.3 * var(--b)) calc(.45 * var(--b)); font-size: calc(.72 * var(--b)); color: var(--ink2); white-space: nowrap; overflow: hidden; }
.bo-cerca { color: var(--gr2); display: flex; justify-content: space-between; }
.bo-cerca kbd { font-family: var(--font-mono, monospace); font-size: calc(.6 * var(--b)); }
.bo-side nav { display: grid; gap: calc(.1 * var(--b)); }
.bo-it, .bo-gr { display: flex; align-items: center; gap: calc(.45 * var(--b)); padding: calc(.32 * var(--b)) calc(.45 * var(--b)); border-radius: calc(.45 * var(--b)); font-size: calc(.78 * var(--b)); color: var(--gr); white-space: nowrap; }
.bo-it::before { content: ""; width: calc(.7 * var(--b)); height: calc(.7 * var(--b)); border: 1.5px solid currentColor; border-radius: calc(.2 * var(--b)); opacity: .7; flex: 0 0 auto; }
.bo-it i { margin-left: auto; font-style: normal; background: var(--blu); color: #fff; border-radius: 99px; font-size: calc(.6 * var(--b)); padding: 0 calc(.35 * var(--b)); }
.bo-it.on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(10, 12, 17, .06), 0 4px 12px rgba(10, 12, 17, .04); }
.bo-gr { font-weight: 600; color: var(--ink2); justify-content: space-between; }
.bo-gr::after { content: "›"; color: var(--gr2); }
.bo-gr.aperto { background: #E4E7EC66; }
.bo-gr.aperto::after { transform: rotate(90deg); }
.bo-figli { display: grid; gap: calc(.1 * var(--b)); margin-left: calc(.45 * var(--b)); padding-left: calc(.3 * var(--b)); border-left: 1px solid var(--ln); }
.bo-figli .bo-it { font-size: calc(.72 * var(--b)); padding-inline: calc(.35 * var(--b)); }

/* contenuto */
.bo-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.bo-glass, .bo-head { background: rgba(255, 255, 255, .76); border-bottom: 1px solid var(--ln); padding: calc(.75 * var(--b)) calc(1.3 * var(--b)); display: flex; align-items: center; gap: calc(.8 * var(--b)); }
.bo-tit { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(1.45 * var(--b)); letter-spacing: -.02em; }
.bo-head > span:first-child { display: grid; }
.bo-head small { color: var(--gr); font-size: calc(.72 * var(--b)); }
.bo-nav, .bo-chk { margin-left: auto; font-size: calc(.72 * var(--b)); color: var(--ink2); border: 1px solid var(--ln); border-radius: calc(.5 * var(--b)); padding: calc(.25 * var(--b)) calc(.5 * var(--b)); background: #fff; }
.bo-chk { margin-left: 0; border: 0; background: none; }
.bo-filtri { display: flex; gap: calc(.5 * var(--b)); align-items: center; background: #fff; border-bottom: 1px solid var(--ln); padding: calc(.45 * var(--b)) calc(1.3 * var(--b)); font-size: calc(.72 * var(--b)); }
.bo-filtri span { border: 1px solid var(--ln); border-radius: calc(.5 * var(--b)); padding: calc(.2 * var(--b)) calc(.5 * var(--b)); color: var(--ink2); }
.bo-filtri .bo-iva { margin-left: auto; }
.bo-tabs { display: flex; gap: calc(1.1 * var(--b)); background: #fff; border-bottom: 1px solid var(--ln); padding: 0 calc(1.3 * var(--b)); font-size: calc(.78 * var(--b)); color: var(--gr); }
.bo-tabs span { padding: calc(.5 * var(--b)) 0; border-bottom: 2px solid transparent; }
.bo-tabs .on { color: var(--blu); border-bottom-color: var(--blu); font-weight: 600; }
.bo-cont { flex: 1; min-height: 0; padding: calc(.9 * var(--b)) calc(1.3 * var(--b)); display: grid; align-content: start; gap: calc(.75 * var(--b)); }
.bo-sub, .bo-tb { display: flex; gap: calc(.25 * var(--b)); font-size: calc(.68 * var(--b)); color: var(--gr); }
.bo-sub span, .bo-tb span { padding: calc(.25 * var(--b)) calc(.6 * var(--b)); border-radius: calc(.45 * var(--b)); }
.bo-sub .on, .bo-tb .on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(10, 12, 17, .08); }
.bo-tb { margin-left: auto; }
.bo-card { background: var(--sup); border: 1px solid var(--ln); border-radius: calc(.9 * var(--b)); padding: calc(.75 * var(--b)) calc(.9 * var(--b)); box-shadow: 0 1px 2px rgba(10, 12, 17, .06), 0 4px 12px rgba(10, 12, 17, .04); min-width: 0; }
.bo-card h5 { margin: 0 0 calc(.45 * var(--b)); font-family: var(--font-display, sans-serif); font-weight: 600; font-size: calc(.92 * var(--b)); letter-spacing: -.01em; display: flex; align-items: center; gap: calc(.4 * var(--b)); }
.bo-card h5 i { font-style: normal; font-family: var(--font-mono, monospace); font-size: calc(.62 * var(--b)); background: rgba(239, 68, 68, .12); color: #EF4444; border-radius: 99px; padding: 0 calc(.4 * var(--b)); }
.bo-cap { display: block; color: var(--gr); font-size: calc(.68 * var(--b)); margin-bottom: calc(.4 * var(--b)); }
.bo-kpi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(.55 * var(--b)); }
.bo-kpi { position: relative; background: #fff; border: 1px solid var(--ln); border-radius: calc(.9 * var(--b)); padding: calc(.65 * var(--b)) calc(.75 * var(--b)); display: grid; gap: calc(.15 * var(--b)); box-shadow: 0 1px 2px rgba(10, 12, 17, .06); }
.bo-kpi small { font-family: var(--font-mono, monospace); font-size: calc(.55 * var(--b)); letter-spacing: .05em; text-transform: uppercase; color: var(--gr); }
.bo-kpi > i { position: absolute; top: calc(.7 * var(--b)); right: calc(.7 * var(--b)); width: calc(.45 * var(--b)); height: calc(.45 * var(--b)); border-radius: 50%; }
.bo-kpi b { font-size: calc(1.2 * var(--b)); font-weight: 600; font-variant-numeric: tabular-nums; }
.bo-kpi em { font-style: normal; font-size: calc(.6 * var(--b)); color: var(--gr); }
.bo-due { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(.55 * var(--b)); }
.bo table { width: 100%; border-collapse: collapse; font-size: calc(.66 * var(--b)); }
.bo th { text-align: left; font-family: var(--font-mono, monospace); font-size: calc(.52 * var(--b)); letter-spacing: .05em; text-transform: uppercase; color: var(--gr); font-weight: 600; padding: calc(.25 * var(--b)) calc(.3 * var(--b)); border-bottom: 1px solid var(--ln); }
.bo td { padding: calc(.3 * var(--b)); border-bottom: 1px solid var(--ln2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo td.rosso { color: #EF4444; font-weight: 600; }
.bo tr.k-hide { opacity: 0; transform: translateY(calc(-.3 * var(--b))); transition: opacity .45s, transform .45s; }
.bo tr.k-hide.in { opacity: 1; transform: none; }
.bo-pill { display: inline-block; border-radius: 99px; padding: calc(.05 * var(--b)) calc(.45 * var(--b)); font-size: calc(.56 * var(--b)); font-weight: 600; background: rgba(245, 158, 11, .14); color: #A96B00; transition: background .4s, color .4s; }
.bo-pill.r { background: rgba(239, 68, 68, .12); color: #DC2626; }
.bo-pill.v { background: rgba(16, 185, 129, .14); color: var(--ok); }
.bo-amb { display: inline-block; margin-top: calc(.55 * var(--b)); background: #F59E0B; color: #fff; border-radius: calc(.6 * var(--b)); padding: calc(.3 * var(--b)) calc(.6 * var(--b)); font-size: calc(.66 * var(--b)); font-weight: 600; }

/* direzione */
.bo-kpi6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(.45 * var(--b)); }
.bo-k { background: #fff; border: 1px solid var(--ln); border-radius: calc(.7 * var(--b)); padding: calc(.55 * var(--b)); display: grid; gap: calc(.35 * var(--b)); }
.bo-k small { font-family: var(--font-mono, monospace); font-size: calc(.5 * var(--b)); letter-spacing: .06em; text-transform: uppercase; color: var(--gr); text-align: right; }
.bo-k b { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(1.15 * var(--b)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo-k.dark { background: #0A0C11; border-color: #0A0C11; color: #fff; }
.bo-k.dark small { color: #9AA0AA; }
.bo-kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(.45 * var(--b)); }
.bo-kpi3 span { display: grid; background: var(--wash); border-radius: calc(.6 * var(--b)); padding: calc(.45 * var(--b)) calc(.6 * var(--b)); }
.bo-kpi3 small { font-size: calc(.6 * var(--b)); color: var(--gr); }
.bo-kpi3 b { font-family: var(--font-display, sans-serif); font-size: calc(1.1 * var(--b)); color: var(--blu); }
.bo-card.k-hide { opacity: 0; transform: translateY(calc(-.4 * var(--b))); transition: opacity .5s, transform .5s; }
.bo-card.k-hide.in, .bo-gwrap.k-hide.in, .bo-met.k-hide.in, .bo-amb.k-hide.in { opacity: 1; transform: none; }
.bo-csv { margin-left: auto; font-family: var(--font-body, sans-serif); font-weight: 500; font-size: calc(.62 * var(--b)); border: 1px solid var(--ln); border-radius: calc(.45 * var(--b)); padding: calc(.15 * var(--b)) calc(.45 * var(--b)); color: var(--ink2); }
.bo-gwrap { position: relative; }
.bo-graf { width: 100%; height: calc(5.4 * var(--b)); display: block; overflow: visible; }
.bo-graf line { stroke: #E4E7EC; stroke-dasharray: 3 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bo-graf .linea { fill: none; stroke: rgb(245, 158, 11); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s ease; }
.bo-gwrap.in .linea { stroke-dashoffset: 0; }
.bo-assi { display: flex; justify-content: space-between; font-family: var(--font-mono, monospace); font-size: calc(.52 * var(--b)); color: var(--gr2); margin-top: calc(.25 * var(--b)); }

.bo-anom { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.35 * var(--b)); font-size: calc(.68 * var(--b)); }
.bo-anom span { display: flex; align-items: center; gap: calc(.45 * var(--b)); }
.bo-anom i { font-style: normal; font-family: var(--font-mono, monospace); font-weight: 700; min-width: calc(1.3 * var(--b)); text-align: center; border-radius: 99px; padding: calc(.05 * var(--b)) calc(.3 * var(--b)); }
.bo-anom .ok { background: rgba(16, 185, 129, .14); color: var(--ok); } .bo-anom .ko { background: rgba(239, 68, 68, .12); color: #DC2626; }
.bo-loc2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.45 * var(--b)); }
.bo-loc2 span { display: grid; border: 1px solid var(--ln2); border-radius: calc(.6 * var(--b)); padding: calc(.45 * var(--b)) calc(.6 * var(--b)); background: #FAFAFB; }
.bo-loc2 b { font-size: calc(.78 * var(--b)); } .bo-loc2 small { font-size: calc(.58 * var(--b)); color: var(--gr); }
.bo-loc2 em { font-style: normal; font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(1.1 * var(--b)); }

/* marketing */
.bo-mk { grid-template-columns: 1.1fr 1fr; align-items: start; }
.bo-col { display: grid; gap: calc(.55 * var(--b)); }
.bo-nero { margin-left: auto; background: #1A1E26; color: #fff; border-radius: calc(.5 * var(--b)); padding: calc(.2 * var(--b)) calc(.5 * var(--b)); font-family: var(--font-body, sans-serif); font-weight: 600; font-size: calc(.6 * var(--b)); }
.bo-seg { display: grid; border: 1px solid var(--ln); border-radius: calc(.6 * var(--b)); padding: calc(.45 * var(--b)) calc(.6 * var(--b)); background: #FAFAFB; }
.bo-seg b { font-size: calc(.78 * var(--b)); }
.bo-seg small { font-size: calc(.62 * var(--b)); color: var(--gr); }
.bo-cond { display: grid; gap: calc(.25 * var(--b)); margin: calc(.5 * var(--b)) 0; }
.bo-cond span { font-size: calc(.64 * var(--b)); border-left: 2px solid var(--blu); padding: calc(.15 * var(--b)) calc(.45 * var(--b)); background: var(--wash); border-radius: 0 calc(.35 * var(--b)) calc(.35 * var(--b)) 0; color: var(--ink2); }
.bo-match { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--ln2); padding-top: calc(.45 * var(--b)); }
.bo-match small { font-size: calc(.66 * var(--b)); color: var(--gr); }
.bo-match b { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: calc(1.9 * var(--b)); letter-spacing: -.035em; color: var(--blu); }
.bo-camp { display: grid; gap: calc(.15 * var(--b)); background: #FAFAFB; border: 1px solid var(--ln2); border-radius: calc(.6 * var(--b)); padding: calc(.5 * var(--b)) calc(.6 * var(--b)); justify-items: start; }
.bo-camp small { font-family: var(--font-mono, monospace); font-size: calc(.52 * var(--b)); letter-spacing: .06em; color: var(--gr); }
.bo-camp b { font-size: calc(.8 * var(--b)); }
.bo-camp em { font-style: normal; font-size: calc(.6 * var(--b)); color: var(--gr); }
.bo-camp .bo-pill.v { background: rgba(16, 185, 129, .14); color: var(--ok); }
.bo-met { display: flex; gap: calc(.6 * var(--b)); font-size: calc(.6 * var(--b)); }
.bo-met i { font-style: normal; font-weight: 600; } .bo-met .v { color: var(--ok); } .bo-met .b { color: var(--blu); }
.bo-met.k-hide, .bo-gwrap.k-hide, .bo-amb.k-hide { opacity: 0; transition: opacity .5s; }
.bo-invia { margin-top: calc(.25 * var(--b)); background: #1A1E26; color: #fff; border-radius: calc(.5 * var(--b)); padding: calc(.25 * var(--b)) calc(.6 * var(--b)); font-size: calc(.62 * var(--b)); font-weight: 600; transition: background .4s; }
.bo-invia.ok { background: var(--ok); }
.bo-ok { background: #E3F4EA; border-color: #bfe6d3; }
.bo-ok small { font-size: calc(.6 * var(--b)); color: var(--ok); }
.bo-ok b { display: block; font-size: calc(.85 * var(--b)); }

/* telefono: il tablet sta in verticale, la barra laterale si nasconde come nel gestionale su schermi stretti */
@media (max-width: 600px) {
  .tz-scr.bo { --b: calc(2.6 * var(--u)); grid-template-columns: 1fr; }
  .bo-side { display: none; }
  .bo-kpi4, .bo-kpi6 { grid-template-columns: repeat(2, 1fr); }
  .bo-kpi6 .bo-k:nth-child(n+5) { display: none; }
  .bo-due, .bo-mk { grid-template-columns: 1fr; }
  .bo-tabs span:nth-child(n+5), .bo-sub span:nth-child(n+4), .bo-chk, .bo-tb span:nth-child(3) { display: none; }
  .bo table td:nth-child(5), .bo table th:nth-child(5) { display: none; }
}