/* Tema condiviso: il front office è il riferimento visivo del Kit A. */
:root{
  --bg:#f3f2f8;
  --card:#fff;
  --bd:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --indigo:#4f46e5;
  --indigo-soft:#eef2ff;
  --grad:linear-gradient(115deg,#4338ca,#4f46e5);
  --shadow:0 1px 3px rgba(17,24,39,.07);
}
body{background:var(--bg)}
.aurora{display:none}
.topbar{background:var(--bg);border-bottom:1px solid var(--bd)}
.brand .logo,.avatar{background:var(--grad);box-shadow:none}
.brand .lg{background:var(--grad)}
.ctx-pill{background:#f1f1f6;color:#52525b;border-color:var(--bd)}
.btn-exit{color:#52525b}
.btn-exit:hover{border-color:#c7c7d4;color:#17181f}
.kpi,.panel,.result,.feed .it{background:var(--card);border-color:var(--bd);border-radius:10px;box-shadow:var(--shadow)}
.panel-head .n{background:var(--indigo-soft);color:var(--indigo)}
.row,.ev{border-bottom-color:var(--bd)}
.row:hover{background:#fafaff}
.tab{background:var(--card);border-radius:10px}
.tab.on,.fchip.on{background:var(--indigo-soft);color:var(--indigo);border-color:#d6dcfc;box-shadow:none}
.btn-p{box-shadow:0 5px 20px rgba(79,70,229,.25)}
.btn-p:hover{box-shadow:0 8px 28px rgba(79,70,229,.35)}
.btn-sm:hover{border-color:#c7c7d4}
.inp{background:#faf9ff;border:1px solid #dddcef;font-size:16px;min-height:48px}
.inp:focus{background:#fff;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.scanbox input{border-color:#dddcef;background:var(--card)}
.scanbox input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.kbd{background:var(--indigo-soft)}
.r-row{background:#faf9ff;border-color:var(--bd);gap:12px}
.rolesel button.on,.batchsel button.on{border-color:var(--indigo);color:var(--indigo);background:var(--indigo-soft);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.ov{background:rgba(28,27,45,.42)}
.win{border-radius:22px;box-shadow:0 30px 90px rgba(28,27,45,.3)}
.card{border-radius:22px;box-shadow:0 16px 48px rgba(67,56,202,.1)}
#toasts.notice-stack{position:fixed;inset:auto 22px 22px auto;transform:none;display:flex;flex-direction:column;gap:10px;width:min(430px,calc(100vw - 32px));z-index:1200;pointer-events:none}
.toast.notice,.notice-inline{--notice-accent:#4f46e5;--notice-soft:#eef2ff;display:flex;align-items:flex-start;gap:12px;background:#fff;color:var(--text);border:1px solid var(--bd);border-left:3px solid var(--notice-accent);border-radius:14px;padding:16px;box-shadow:0 12px 36px rgba(28,27,45,.12);font-size:14px;animation:notice-in .18s ease;pointer-events:auto}
.toast.notice[data-type="success"],.notice-inline[data-type="success"]{--notice-accent:#047857;--notice-soft:#e6faf1}
.toast.notice[data-type="warning"],.notice-inline[data-type="warning"]{--notice-accent:#b45309;--notice-soft:#fff3df}
.toast.notice[data-type="error"],.notice-inline[data-type="error"]{--notice-accent:#b91c1c;--notice-soft:#fff1f2}
.notice-icon{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;background:var(--notice-soft);color:var(--notice-accent);border-radius:11px}
.notice-icon svg{width:21px;height:21px}
.notice-copy{min-width:0;flex:1}
.notice-copy strong{display:block;font-size:14px;line-height:1.4;font-weight:750}
.notice-copy p{font-size:13px;color:var(--muted);line-height:1.5;margin-top:5px;overflow-wrap:anywhere;white-space:pre-wrap}
.notice-close{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;margin:-6px -6px 0 0;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.notice-close:hover{background:#f4f4f5;color:var(--text)}
.notice-close:focus-visible{outline:2px solid var(--indigo);outline-offset:1px}
.notice-close svg{width:17px;height:17px}
.notice-inline{box-shadow:none;margin-bottom:16px}
@keyframes notice-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1180px){#toasts.notice-stack{inset:76px 16px auto auto}.notice-close{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.toast.notice,.notice-inline{animation:none}}

/* I testi inseriti dagli operatori non devono allargare i contenitori. */
.panel,.view,.modal,.win,.panel-head h2,.modal-head h3,.win .wh{min-width:0}
.panel-head h2,.modal-head h3,.win .wh{overflow-wrap:anywhere}
.panel-head button,.modal-head button,.busta-row>button,.busta-row>.pill,.when{flex-shrink:0}
.busta .info{min-width:0}
.busta .ref{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busta .cust{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.45}
.busta .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cas .bc,.cas .busta-on,.cas>.bc:last-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cas .code,.ctile .code{overflow-wrap:anywhere;max-width:100%}
#cmap .ctile .who{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
#cmap .ctile .assignment{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cassette-details dd,.customer-info,.anag .f,.note,.toast,.form-error{overflow-wrap:anywhere;min-width:0}
.cassette-details dd{white-space:pre-wrap}
.row>div:not(.av),.ev>div{min-width:0;flex:1}
.row .l1,.row .l2,.ev .l1{overflow-wrap:anywhere}
.row>.role-pill,.row>.st-pill,.row>button{flex-shrink:0}
.r-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
.r-row{min-width:0;flex-direction:column;align-items:flex-start;gap:8px}
.r-row>span:last-child{overflow-wrap:anywhere;white-space:pre-wrap;min-width:0;max-width:100%}
.r-head{flex-wrap:wrap}
.r-head .bigcode{min-width:0;overflow-wrap:anywhere}
.feed .it{overflow-wrap:anywhere;min-width:0}
.feed .activity-text{min-width:0;flex:1;overflow-wrap:anywhere}
.customer-option strong,.selected-customer strong{overflow-wrap:anywhere}
.customer-option .mini-av,.selected-customer .mini-av{overflow:hidden}
.label .row{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.acc>div:not(.av){min-width:0;flex:1;overflow-wrap:anywhere}
.admin-overview{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.workspace-tabs{display:none}
.cassette-tabs{flex-wrap:wrap;overflow-x:visible}
.cassette-filters{flex-wrap:wrap;overflow-x:visible}
.topbar .brand,.topbar .who{min-width:0}
.topbar #uName{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn,.btn-p,.btn-sm,.btn-exit,.tab,.fchip,.cassette-filter,.cassette-tabs button,.operators-states button,.lab-movement-tabs button,.log-select-option{min-height:44px}
.cassette-search-toggle{width:44px;height:44px}
.cassette-pagination .controls button,.lab-pagination button{min-width:44px;min-height:44px}
.log-calendar{width:370px}
.calendar-day{height:44px}
.log-calendar-header button{width:44px;height:44px}
.log-calendar-footer button{min-height:44px}
.scan-dialog-head button,.demo-scanner button{min-height:44px}
#opPasswordToggle{width:44px;height:44px;top:3px;right:4px}
.operator-password .inp{padding-right:56px}
.log-date-control #logDateClear{width:44px;height:44px}
@media(pointer:coarse){
  .front-office-page .cassette-search,.admin-page .log-toolbar .inp,.admin-page .operators-toolbar .inp,.login-page .inp{font-size:16px}
}
.ov{align-items:center;padding:16px}
.ov>.win{max-height:calc(100dvh - 32px);display:flex;flex-direction:column}
.ov>.win>.wh,.ov>.win>.wf{flex-shrink:0}
.ov>.win>.wb{min-height:0;overflow-y:auto}
.modal{max-height:calc(100dvh - 32px)}
@media(max-width:1100px){
  .topbar .ctx-pill{display:none}
  .operator-columns,.operator-row{grid-template-columns:minmax(0,1fr) 120px 80px 216px;gap:10px}
  .operator-row .btn-sm{min-width:100px}
}
@media(max-width:900px){
  .topbar .brand{font-size:14px;gap:8px}
  .topbar .who{font-size:0;gap:8px}
  .topbar .who b{font-size:12px}
  .topbar #uName{max-width:110px}
}
@media screen and (min-width:700px) and (min-height:600px){
  body.front-office-page,body.laboratory-page,body.admin-page{height:100dvh;overflow:hidden}
  .front-office-page .shell,.laboratory-page .shell,.admin-page .shell{height:100dvh;display:flex;flex-direction:column}
  .topbar{flex-shrink:0}
  .front-office-page .page,.laboratory-page .page,.admin-page .page{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:1360px;padding:18px 18px 16px}
  .page>.hero,.admin-page .page>h1,.admin-page .page>.sub,.admin-page .tabs{flex-shrink:0}
  .admin-page .tabs{margin:14px 0}
  .admin-page .view.on{display:flex;flex-direction:column;flex:1;min-height:0;animation:none}
  .admin-page .view>.panel{display:flex;flex-direction:column;flex:1;min-height:0;margin-bottom:0}
  .admin-page .panel-head,.admin-page .cassette-toolbar,.admin-page .operators-toolbar,.admin-page .operators-states,.admin-page .operator-columns,.admin-page .log-toolbar,.admin-page #filters,.admin-page .log-columns,.admin-page .cassette-pagination,.admin-page #operatorsError{flex-shrink:0}
  .admin-page #pbOp,.admin-page #pbLog{flex:1;min-height:0}
  .admin-page #cmap{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);padding-bottom:12px}
  .admin-page #cmap .ctile{min-height:0;padding:12px}
  .admin-page #cmap .who{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}
  .admin-page #vHome>.hero{flex-shrink:0}
  .admin-page .admin-overview{flex:1;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr)}
  .admin-page .admin-overview>.panel{display:flex;flex-direction:column;min-height:0}
  .admin-overview .pb{flex:1;min-height:0}
  #pbLast .ev{height:74px;align-items:center;padding:10px 16px}
  #pbLast .ev .l1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;font-size:13px}
  #pbNow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;align-content:start}
  #pbNow .row{padding:14px;border:1px solid var(--bd);border-radius:10px;background:#faf9ff;align-items:flex-start;min-height:90px}
  #pbNow .row .l1{font-size:13px;line-height:1.5}
  .front-office-page .split{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
  .front-office-page #busteList{overflow:hidden}
  .front-office-page .grid-cassette{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
  .front-office-page .grid-cassette .cas{min-height:0;padding:12px}
  .laboratory-page .lab-workspace{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
  .laboratory-page .lab-panel-head,.laboratory-page .lab-movement-tabs,.laboratory-page .lab-pagination{flex-shrink:0}
  .laboratory-page #feedList{flex:1;min-height:0}
}
@media screen and (min-width:700px) and (max-width:1180px) and (min-height:600px){
  .page>.hero{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
  .kpi{padding:16px}
  .kpi .label,.kpi .kpi-title{font-size:11px;letter-spacing:.02em}
  .workspace-tabs{display:flex;gap:8px;flex-shrink:0;margin-bottom:12px}
  .workspace-tabs button{flex:1;min-height:44px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--muted);font-size:13px;font-weight:650}
  .workspace-tabs button[aria-pressed="true"]{background:#eef2ff;color:var(--indigo);border-color:#d6dcfc}
  .front-office-page #frontWorkspace,.laboratory-page #labWorkspace{grid-template-columns:minmax(0,1fr)}
  .front-office-page #frontWorkspace>.panel,.laboratory-page #labWorkspace>.lab-panel{display:none;min-height:0}
  .front-office-page #frontWorkspace[data-pane="buste"]>.panel:first-child,.front-office-page #frontWorkspace[data-pane="cassette"]>.panel:last-child,.laboratory-page #labWorkspace[data-pane="scanner"]>.lab-panel:first-child,.laboratory-page #labWorkspace[data-pane="movements"]>.lab-panel:last-child{display:flex}
  .front-office-page #frontWorkspace>.panel{contain:size}
  .front-office-page .grid-cassette{grid-template-columns:repeat(4,minmax(0,1fr))}
  .log-columns,.log-row{grid-template-columns:108px minmax(0,1fr) 95px 135px 20px;gap:10px;padding-inline:14px}
  #pbNow{grid-template-columns:minmax(0,1fr)}
}
@media screen and (min-width:981px) and (max-width:1180px) and (min-height:600px){
  #pbNow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:800px){
  .login-page{padding:16px}
  .login-page .card{padding:24px}
  .login-page h1{margin-top:14px}
  .login-page .sub{margin-bottom:14px}
  .login-page .frm{margin-bottom:12px}
  .login-page .demo{margin-top:14px;padding-top:12px}
  .login-page .demo .t{margin-bottom:8px}
  .login-page .acc{padding:8px 10px;margin-bottom:6px}
  .login-page .acc .av{width:32px;height:32px}
  .login-page .reset{margin-top:10px}
}
@media screen and (min-width:700px) and (max-height:599px){
  body.front-office-page,body.laboratory-page,body.admin-page{height:auto;overflow-y:auto}
  .front-office-page .shell,.laboratory-page .shell,.admin-page .shell{height:auto;min-height:100dvh}
  .front-office-page .split>.panel:first-child{contain:none}
  .admin-page .view>.panel,.lab-panel{min-height:280px}
}
@media(max-width:560px){
  .busta-row{flex-wrap:wrap}
  .busta .info{flex-basis:calc(100% - 60px)}
  .busta-row>button{flex:1}
  .row{flex-wrap:wrap}
  .r-rows{grid-template-columns:minmax(0,1fr)}
}
/* ══════════════════════════════════════════════════════════════
   KIT D · Struttura: densità. Tutto più compatto e ravvicinato
   per vedere più dati per schermo. Colori identici al tema base.
   ══════════════════════════════════════════════════════════════ */

body{font-size:13px}
.page{max-width:1080px;padding:14px 16px 12px}

/* KPI ridotte a striscia sottile */
.hero{gap:10px;margin-bottom:14px}
.kpi{padding:10px 14px 9px;border-radius:8px}
.kpi .value{font-size:24px;margin-top:3px}
.kpi .hint{font-size:11px;margin-top:2px}
.kpi .label,.kpi .kpi-title{font-size:10px}

/* pannelli più asciutti */
.panel{border-radius:8px}
.panel-head{padding:11px 16px;min-height:0}
.panel-head h2{font-size:14px}
.panel-body{padding:10px}

/* righe e liste dense */
.row{padding:8px 16px;gap:10px}
.row .l1{font-size:13px}
.row .l2{font-size:11.5px}
.ev{padding:9px 16px}
.av{width:32px;height:32px;font-size:11px;border-radius:8px}
.mini-av{width:36px;height:36px;border-radius:8px}

/* griglie casrette più fitte */
.grid-cassette{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;padding:4px}
.cas{min-height:86px;padding:10px 11px;border-radius:8px}
.cas .code{font-size:13.5px}
.cmap{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px;padding:12px 16px}
.ctile{min-height:112px;padding:11px;border-radius:8px}
.ctile .code{font-size:14px}

/* controlli compatti */
.btn{min-height:42px;padding:9px 14px;font-size:13px}
.btn-p{min-height:44px}
.btn-sm{min-height:36px;padding:7px 11px;font-size:12px}
.inp{min-height:42px;font-size:14px}
.tab{padding:9px 14px;font-size:12.5px;border-radius:8px}
.fchip{padding:7px 12px;min-height:38px}

/* spazio di lavoro: più stanza alla lista principale */
.split{grid-template-columns:minmax(300px,4fr) 8fr}
.lab-workspace{grid-template-columns:minmax(300px,4fr) 8fr}
.busta-row{padding:10px 13px}

@media(max-width:980px){
  .hero{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .hero{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi .value{font-size:20px}
}