/* CMP Backoffice, componenti. Dipende da tokens.css (caricare prima).
   Convenzione: BEM leggero. Blocco .nome, elemento .nome__parte, variante .nome--var, stato .is-stato o attributo ARIA.
   Ogni componente e' un blocco HTML autonomo: puo' essere sostituito da HTMX senza toccare il resto. */

/* ================= 0. Base ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-height) + 16px)}
body{margin:0;background:var(--color-bg);color:var(--color-text);
  font:var(--weight-regular) var(--text-body-size)/var(--text-body-line) var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--color-accent-strong)}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
::placeholder{color:var(--color-placeholder);opacity:1}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:16px;height:16px}
.icon--lg{width:24px;height:24px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.muted{color:var(--color-text-muted)}
.nowrap{white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--color-accent-strong);color:var(--color-on-accent);
  padding:12px 16px;border-radius:var(--radius-md);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ================= 1. Struttura: app, barra laterale, intestazione ================= */
.app{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.app__main{min-width:0;display:flex;flex-direction:column}
.scrim{display:none}

.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;
  background:var(--color-surface);border-right:1px solid var(--color-border)}
.sidebar__brand{height:var(--header-height);flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-md) 0 var(--space-lg);border-bottom:1px solid var(--color-border)}
.sidebar__brand a{display:flex;border-radius:var(--radius-sm)}
.sidebar__brand img{height:26px;width:auto}
.logo--light{display:var(--logo-light)}
.logo--dark{display:var(--logo-dark)}
.sidebar__close{display:none}
.nav{padding:var(--space-md) var(--space-smd) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);flex:1}
.nav__group{display:flex;flex-direction:column;gap:2px}
.nav__label{font:var(--weight-semibold) var(--text-caption-size)/var(--text-caption-line) var(--font-body);
  letter-spacing:var(--text-caption-tracking);text-transform:uppercase;color:var(--color-text-muted);padding:0 var(--space-smd);margin-bottom:var(--space-xs)}
.nav__item{display:flex;align-items:center;gap:var(--space-smd);min-height:var(--control-target);padding:0 var(--space-smd);
  border-radius:var(--radius-md);color:var(--color-text);text-decoration:none;font-weight:var(--weight-semibold);position:relative}
a.nav__item:hover{background:var(--color-row-hover)}
.nav__item .icon{color:var(--color-text-muted)}
.nav__item[aria-current]{background:var(--color-accent-soft);color:var(--color-accent-strong);box-shadow:inset 3px 0 0 var(--color-accent)}
.nav__item[aria-current] .icon{color:var(--color-accent-strong)}
.nav__item.is-locked{color:var(--color-text-muted);font-weight:var(--weight-regular);cursor:default}
.nav__badge{margin-left:auto;font:var(--weight-semibold) 13px/1 var(--font-body);padding:5px 8px;border-radius:var(--radius-pill);
  border:1px solid var(--color-border-strong);color:var(--color-text-muted);white-space:nowrap}
.nav__foot{padding:var(--space-md) var(--space-smd);border-top:1px solid var(--color-border)}

.topbar{position:sticky;top:0;z-index:30;height:var(--header-height);display:flex;align-items:center;gap:var(--space-smd);
  padding:0 var(--page-gutter);background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.icon-btn.topbar__burger,.icon-btn.sidebar__close{display:none}
.topbar__spacer{flex:1}

/* menu a tendina (pattern disclosure: bottone + pannello) */
.menu{position:relative}
.menu__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;min-width:260px;max-width:calc(100vw - 32px);padding:var(--space-sm);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-menu)}
.menu--end .menu__panel{left:auto;right:0}
.menu--up .menu__panel{top:auto;bottom:calc(100% + 8px)}
.menu__title{padding:var(--space-sm) var(--space-smd);font:var(--weight-semibold) var(--text-caption-size)/var(--text-caption-line) var(--font-body);
  letter-spacing:var(--text-caption-tracking);text-transform:uppercase;color:var(--color-text-muted)}
.menu__item{display:flex;align-items:center;gap:var(--space-smd);width:100%;min-height:var(--control-target);padding:0 var(--space-smd);
  border:0;border-radius:var(--radius-md);background:none;color:var(--color-text);text-align:left;text-decoration:none;font-weight:var(--weight-regular)}
.menu__item:hover{background:var(--color-row-hover)}
.menu__item[aria-current="true"]{font-weight:var(--weight-semibold)}
.menu__item[aria-current="true"]::after{content:"";margin-left:auto;width:18px;height:18px;border-radius:50%;
  background:var(--color-accent-strong) var(--check-mark) center/12px no-repeat}
.menu__item--danger{color:var(--color-danger)}
.menu__sep{height:1px;background:var(--color-border);margin:var(--space-sm) 0}
.menu__who{padding:var(--space-sm) var(--space-smd) var(--space-smd)}
.menu__who strong{display:block}
.menu__who span{color:var(--color-text-muted);font-size:var(--text-small-size)}
.menu__seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--color-bg);border-radius:var(--radius-md);margin:0 var(--space-sm) var(--space-sm)}
.menu__seg button{min-height:40px;border:0;border-radius:var(--radius-sm);background:none;font-weight:var(--weight-semibold);color:var(--color-text-muted)}
.menu__seg button[aria-pressed="true"]{background:var(--color-surface);color:var(--color-text);box-shadow:0 0 0 1px var(--color-border-strong)}

.locale-switch,.account-btn{display:inline-flex;align-items:center;gap:var(--space-smd);min-height:var(--control-target);padding:0 var(--space-smd);
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);text-align:left}
.locale-switch:hover,.account-btn:hover{background:var(--color-row-hover)}
.locale-switch__text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.locale-switch__label{font-size:13px;color:var(--color-text-muted)}
.locale-switch__name{font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent-strong);color:var(--color-on-accent);
  font:var(--weight-bold) 13px/1 var(--font-body);flex:none}
.account-btn{border-color:transparent;padding:0 var(--space-sm)}

/* pagina */
.page{padding:var(--space-xl) var(--page-gutter) 96px;display:flex;flex-direction:column;gap:var(--space-lg);flex:1}
.page--narrow{max-width:1120px;width:100%}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-md) var(--space-lg)}
.page-head__main{min-width:0;display:flex;flex-direction:column;gap:var(--space-sm)}
.page-head__title{font:var(--weight-regular) var(--text-hero-size)/var(--text-hero-line) var(--font-display);
  text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-smd)}
.page-head__title::after{content:"";flex-basis:100%;height:3px;width:48px;background:var(--color-accent);margin-top:var(--space-smd)}
.page-head__sub{color:var(--color-text-muted)}
.page-head__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--text-small-size);color:var(--color-text-muted)}
.crumbs li+li::before{content:"/";content:"/" / "";margin-right:6px}
.crumbs a{color:var(--color-text-muted)}
.crumbs [aria-current]{color:var(--color-text);font-weight:var(--weight-semibold)}

/* ================= 2. Schede, riquadri, metriche ================= */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-smd);padding:var(--space-lg) var(--space-lg) 0}
.card__title{font:var(--weight-semibold) var(--text-h2-size)/var(--text-h2-line) var(--font-body)}
.card__body{padding:var(--space-lg)}
.card__foot{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:flex-end;padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border)}
.card__lead{color:var(--color-text-muted);padding:var(--space-xs) var(--space-lg) 0}
.grid{display:grid;gap:var(--space-md)}
.grid--stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-lg);align-items:start}
.section-title{font:var(--weight-semibold) var(--text-h2-size)/var(--text-h2-line) var(--font-body);display:flex;align-items:baseline;gap:var(--space-smd)}
.section-title small{font:var(--weight-regular) var(--text-small-size)/var(--text-small-line) var(--font-body);color:var(--color-text-muted)}
.stack{display:flex;flex-direction:column;gap:var(--space-md)}
.stack--lg{gap:var(--space-lg)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}

.stat{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);justify-content:space-between}
.stat__label{font:var(--weight-semibold) var(--text-caption-size)/var(--text-caption-line) var(--font-body);letter-spacing:var(--text-caption-tracking);
  text-transform:uppercase;color:var(--color-text-muted)}
.stat__value{font:var(--weight-regular) var(--text-kpi-size)/var(--text-kpi-line) var(--font-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.stat__note{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--color-text-muted)}

.seclist{display:flex;flex-direction:column;flex:1}
.seclist>li{flex:1;display:flex;border-top:1px solid var(--color-border)}
.seclist__item{flex:1;display:flex;align-items:center;gap:var(--space-md);min-height:72px;padding:var(--space-smd) var(--space-lg);color:var(--color-text);text-decoration:none}
a.seclist__item:hover{background:var(--color-row-hover)}
a.seclist__item:hover .seclist__go{color:var(--color-accent-strong)}
.seclist__icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--color-accent-soft);color:var(--color-accent-strong)}
.seclist__body{flex:1;min-width:0;display:flex;flex-direction:column}
.seclist__name{font-weight:var(--weight-semibold);font-size:var(--text-lead-size);line-height:var(--text-lead-line)}
.seclist__text{color:var(--color-text-muted);font-size:var(--text-small-size);line-height:var(--text-small-line)}
.seclist__go{color:var(--color-text-muted)}
.seclist__item.is-locked{color:var(--color-text-muted);background:repeating-linear-gradient(135deg,transparent 0 10px,var(--color-row-hover) 10px 11px)}
.seclist__item.is-locked .seclist__icon{background:var(--color-neutral-soft);color:var(--color-text-muted)}
.seclist__item.is-locked .seclist__name{color:var(--color-text-muted)}
.card--col{display:flex;flex-direction:column;overflow:clip}
.card--col .card__head{padding-bottom:var(--space-smd)}

.todo{display:flex;flex-direction:column}
.todo>li{flex:1;display:flex;border-top:1px solid var(--color-border)}
.todo>li:first-child{border-top:0}
.todo__item{flex:1;display:flex;align-items:center;gap:var(--space-md);min-height:68px;padding:var(--space-smd) var(--space-lg);color:var(--color-text);text-decoration:none}
a.todo__item:hover{background:var(--color-row-hover)}
.todo__icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--color-warning-soft);color:var(--color-warning)}
.todo__icon--danger{background:var(--color-danger-soft);color:var(--color-danger)}
.todo__icon--info{background:var(--color-accent-soft);color:var(--color-accent-strong)}
.todo__text{flex:1;min-width:0}
.todo__text small{display:block;color:var(--color-text-muted);font-size:var(--text-small-size)}
.todo__item>.icon:last-child{color:var(--color-text-muted)}

.bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end;gap:6px;height:168px;border-bottom:1px solid var(--color-border-strong);padding:0 2px}
.bars__bar{height:var(--h);background:var(--color-data);border-radius:6px 6px 0 0;min-height:3px}
.bars__bar.is-peak{background:var(--color-accent)}
.bars__axis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding:6px 2px 0;font-size:13px;color:var(--color-text-muted);text-align:center;font-variant-numeric:tabular-nums}
.splitbar{display:flex;height:14px;border-radius:var(--radius-pill);overflow:hidden;gap:2px}
.splitbar>span{display:block;height:100%}
.legend{display:flex;flex-direction:column;gap:var(--space-sm)}
.legend li{display:flex;align-items:center;gap:var(--space-smd)}
.legend__sw{width:12px;height:12px;border-radius:4px;flex:none}
.legend__val{margin-left:auto;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}

/* ================= 3. Pulsanti ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:var(--control-height);padding:0 var(--space-md);
  border:1px solid transparent;border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);
  font:var(--weight-semibold) var(--text-body-size)/1.2 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--primary{background:var(--color-action);color:var(--color-on-action)}
.btn--primary:hover{background:var(--color-action-hover)}
.btn--accent{background:var(--color-accent-strong);color:var(--color-on-accent)}
.btn--accent:hover{filter:brightness(1.12)}
.btn--secondary{border-color:var(--color-border-strong)}
.btn--secondary:hover{background:var(--color-row-hover)}
.btn--text{background:none;color:var(--color-accent-strong);padding:0 var(--space-smd)}
.btn--text:hover{background:var(--color-accent-soft)}
.btn--danger{border-color:var(--color-danger);color:var(--color-danger)}
.btn--danger:hover{background:var(--color-danger-soft)}
.btn--danger-solid{background:var(--color-danger);color:var(--color-on-danger)}
.btn--danger-solid:hover{filter:brightness(1.1)}
.btn--icon{width:var(--control-height);padding:0}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--color-surface-alt);border-color:transparent;color:var(--color-text-muted);cursor:not-allowed}
.btn[aria-busy="true"]{position:relative;color:transparent;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--color-on-action);border-right-color:transparent;animation:spin .7s linear infinite}
.btn--secondary[aria-busy="true"]::after{border-color:var(--color-text);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{display:inline-grid;place-items:center;width:var(--control-target);height:var(--control-target);flex:none;border:0;border-radius:var(--radius-md);
  background:none;color:var(--color-text-muted)}
.icon-btn:hover{background:var(--color-row-hover);color:var(--color-text)}
.icon-btn[aria-expanded="true"]{background:var(--color-sand-soft);color:var(--color-text)}

/* ================= 4. Moduli ================= */
.form{display:flex;flex-direction:column;gap:var(--space-lg)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg) var(--space-lg)}
.span-2{grid-column:1/-1}
.fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-smd)}
.fieldset__legend{font:var(--weight-semibold) 14px/20px var(--font-body);padding:0;margin-bottom:var(--space-xs)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{font:var(--weight-semibold) 14px/20px var(--font-body)}
.field__opt{font-weight:var(--weight-regular);color:var(--color-text-muted);margin-left:6px}
.field__hint{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--color-text-muted)}
.field__error{display:flex;gap:6px;align-items:flex-start;font-size:var(--text-small-size);line-height:var(--text-small-line);font-weight:var(--weight-semibold);color:var(--color-danger)}
.field__error .icon{width:16px;height:16px;margin-top:1px}
.input,.select,.textarea{width:100%;min-height:var(--control-height);padding:0 var(--space-smd);background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font:var(--weight-regular) var(--text-body-size)/var(--text-body-line) var(--font-body)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--color-text-muted)}
.input:focus,.select:focus,.textarea:focus{outline:3px solid var(--color-focus);outline-offset:1px;border-color:var(--color-focus)}
.input[disabled],.select[disabled],.textarea[disabled]{background:var(--color-surface-alt);color:var(--color-text-muted);border-color:var(--color-border);cursor:not-allowed}
.input[readonly]{background:var(--color-bg)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--color-danger);box-shadow:inset 0 0 0 1px var(--color-danger);background:var(--color-surface)}
.textarea{padding:10px var(--space-smd);min-height:104px;resize:vertical}
.select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:18px;cursor:pointer}
.select--sm{min-height:36px}
.affix{position:relative}
.affix .input{padding-right:40px;text-align:right;font-variant-numeric:tabular-nums}
.affix__unit{position:absolute;right:var(--space-smd);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-weight:var(--weight-semibold)}
.search{position:relative;flex:1 1 280px;min-width:0}
.search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.search .input{padding-left:40px;padding-right:44px}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search__clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:var(--control-target);height:var(--control-target);display:grid;place-items:center;
  border:0;background:none;color:var(--color-text-muted);border-radius:var(--radius-md)}
.search__clear:hover{color:var(--color-text)}

.check{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:2px solid var(--color-border-strong);border-radius:6px;background:var(--color-surface);cursor:pointer;
  display:inline-grid;place-content:center}
.check:hover{border-color:var(--color-text)}
.check:checked,.check:indeterminate{background:var(--color-accent-strong) var(--check-mark) center/16px no-repeat;border-color:var(--color-accent-strong)}
.check:indeterminate{background-image:var(--dash-mark)}
.check[type="radio"]{border-radius:50%}
.check[type="radio"]:checked{background:radial-gradient(circle,var(--color-accent-strong) 0 5px,var(--color-surface) 6px);border-color:var(--color-accent-strong)}
.check-row{display:flex;align-items:center;gap:var(--space-smd);min-height:var(--control-target);cursor:pointer}
.check-row--cell{justify-content:center;min-height:var(--control-target);min-width:var(--control-target);margin:-8px -12px}
.choice{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.choice__opt{display:flex;align-items:center;gap:var(--space-sm);min-height:var(--control-target);padding:0 var(--space-md) 0 var(--space-smd);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer}
.choice__opt:has(input:checked){border-color:var(--color-accent-strong);box-shadow:inset 0 0 0 1px var(--color-accent-strong);background:var(--color-accent-soft)}
.choice__opt:focus-within{outline:3px solid var(--color-focus);outline-offset:2px}
.switch{display:inline-flex;align-items:center;gap:var(--space-smd);min-height:var(--control-target);cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;position:relative;width:46px;height:28px;margin:0;border-radius:var(--radius-pill);background:var(--color-surface-alt);
  border:2px solid var(--color-border-strong);cursor:pointer;flex:none;transition:background var(--dur) var(--ease)}
.switch input::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--color-text-muted);transition:transform var(--dur) var(--ease)}
.switch input:checked{background:var(--color-accent-strong);border-color:var(--color-accent-strong)}
.switch input:checked::before{transform:translateX(18px);background:var(--color-on-accent)}
.switch input:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}

/* ================= 5. Chip e avvisi ================= */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--radius-pill);
  font:var(--weight-semibold) 13px/1 var(--font-body);white-space:nowrap;background:var(--color-neutral-soft);color:var(--color-text)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.chip--ok{background:var(--color-ok-soft);color:var(--color-ok)}
.chip--ok::before{background:var(--color-ok-dot)}
.chip--paused{background:var(--color-warning-soft);color:var(--color-warning)}
.chip--paused::before{width:9px;height:10px;border-radius:0;background:none;border-left:3px solid currentColor;border-right:3px solid currentColor}
.chip--off{background:var(--color-neutral-soft);color:var(--color-text-muted)}
.chip--off::before{background:none;border:2px solid currentColor}
.chip--danger{background:var(--color-danger-soft);color:var(--color-danger)}
.chip--plain::before{display:none}
.chip--derived{background:var(--color-accent-soft);color:var(--color-text);padding-left:8px}
.chip--derived::before{display:none}
.chip--manual{background:var(--color-surface);color:var(--color-text);border:1px dashed var(--color-border-strong);padding:0 4px 0 8px}
.chip--manual::before{display:none}
.chip .icon{width:14px;height:14px}
.chip__remove{display:inline-grid;place-items:center;width:var(--control-target);height:var(--control-target);margin:-10px -6px -10px 0;border:0;background:none;color:var(--color-text-muted);border-radius:50%}
.chip__remove:hover{color:var(--color-danger)}
.chip-filter{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px 0 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);font-size:14px}
.chip-filter button{display:grid;place-items:center;width:32px;height:32px;border:0;background:none;color:var(--color-text-muted);border-radius:50%}
.chip-filter button:hover{color:var(--color-text);background:var(--color-row-hover)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-sm)}

.alert{display:flex;gap:var(--space-smd);align-items:flex-start;padding:var(--space-smd) var(--space-md);border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-accent-soft);color:var(--color-text);box-shadow:inset 4px 0 0 var(--color-accent-strong)}
.alert>.icon{margin-top:2px;color:var(--color-accent-strong)}
.alert__body{flex:1;min-width:0}
.alert__title{font-weight:var(--weight-semibold)}
.alert__body p+p{margin-top:4px}
.alert--ok{background:var(--color-ok-soft);box-shadow:inset 4px 0 0 var(--color-ok-dot)}
.alert--ok>.icon{color:var(--color-ok)}
.alert--warning{background:var(--color-warning-soft);border-color:var(--color-warning);box-shadow:inset 4px 0 0 var(--color-warning)}
.alert--warning>.icon{color:var(--color-warning)}
.alert--danger{background:var(--color-danger-soft);border-color:var(--color-danger);box-shadow:inset 4px 0 0 var(--color-danger)}
.alert--danger>.icon{color:var(--color-danger)}
.alert__close{margin:-8px -10px -8px 0}

/* ================= 6. Schede a linguetta ================= */
.tabs{display:flex;gap:var(--space-xs);border-bottom:1px solid var(--color-border);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tab{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:48px;padding:0 var(--space-md);margin-bottom:-1px;flex:none;
  border-bottom:3px solid transparent;color:var(--color-text-muted);font-weight:var(--weight-semibold);text-decoration:none;white-space:nowrap}
.tab:hover{color:var(--color-text)}
.tab[aria-current="page"]{color:var(--color-accent-strong);border-bottom-color:var(--color-accent)}
.tab:focus-visible{outline-offset:-3px;border-radius:var(--radius-sm)}
.tab__count{font-size:13px;font-weight:var(--weight-semibold);padding:2px 8px;border-radius:var(--radius-pill);background:var(--color-neutral-soft);color:var(--color-text-muted)}
.tabpanel{display:flex;flex-direction:column;gap:var(--space-lg);padding-top:var(--space-lg)}

/* ================= 7. Barra dei filtri ================= */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-smd);align-items:center}
.toolbar__sel{flex:0 1 200px;min-width:150px}
.toolbar__count{margin-left:auto;color:var(--color-text-muted);white-space:nowrap}
.toolbar__sort{display:none}
.filters-active{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}

/* ================= 8. Tabella dati ================= */
.table-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:clip;position:relative}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-cell-size);line-height:var(--text-cell-line);font-variant-numeric:tabular-nums}
.table caption{text-align:left}
.table th{position:sticky;top:var(--header-height);z-index:3;height:44px;padding:0 var(--space-smd);background:var(--color-surface-alt);text-align:left;white-space:nowrap;
  font:var(--weight-semibold) var(--text-caption-size)/var(--text-caption-line) var(--font-body);letter-spacing:var(--text-caption-tracking);text-transform:uppercase;
  color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}
.table tbody th,.table tfoot th{position:static;height:var(--row-height);background:transparent;text-transform:none;letter-spacing:0;font:var(--weight-semibold) var(--text-cell-size)/var(--text-cell-line) var(--font-body);color:var(--color-text);border-bottom:1px solid var(--color-border);white-space:normal}
.table tbody tr:last-child th{border-bottom:0}
.table td{height:var(--row-height);padding:0 var(--space-smd);border-bottom:1px solid var(--color-border);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--color-row-hover)}
.table tbody tr.is-selected{background:var(--color-row-selected)}
.table tr.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--color-accent)}
.table .col-check{width:52px;padding:0 0 0 var(--space-smd)}
.table .col-num,.table th.col-num{text-align:right}
.table .col-price{width:148px;text-align:right}
.table .col-vat{width:84px}
.table .cell-name{min-width:210px}
.table .col-status{width:140px}
.table .col-actions{width:56px;padding:0 var(--space-xs) 0 0;text-align:right}
.table .cell-name a{font-weight:var(--weight-semibold);color:var(--color-text);text-decoration:none}
.table .cell-name a:hover{text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:3px}
.table .cell-sub{display:block;font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--color-text-muted);font-weight:var(--weight-regular)}
.th-sort{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;margin:0;border:0;background:none;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.th-sort:hover{color:var(--color-text)}
.th-sort .icon{width:16px;height:16px}
th[aria-sort="ascending"] .th-sort,th[aria-sort="descending"] .th-sort{color:var(--color-text)}
th.col-num .th-sort,th.col-price .th-sort{flex-direction:row-reverse}
.th-edit{display:inline-flex;align-items:center;gap:6px}
.th-edit .icon{width:14px;height:14px}
.th-check-label{display:none}
.table-wrap{position:relative}
.table-wrap[aria-busy="true"]::before,.table-wrap.htmx-request::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;z-index:6;
  background:linear-gradient(90deg,transparent,var(--color-accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:slide 1.1s linear infinite}
@keyframes slide{from{background-position:-40% 0}to{background-position:140% 0}}
.table-wrap[aria-busy="true"] tbody,.table-wrap.htmx-request tbody{opacity:.55}
.table-scroll{overflow-x:auto}
.card__body:has(>.table-scroll){overflow:clip;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.table--scroll th:first-child,.table--scroll td:first-child{position:sticky;left:0;top:auto;z-index:2;background:var(--color-surface);box-shadow:inset -1px 0 0 var(--color-border)}
.table--scroll tbody th:first-child{min-width:190px}
.table--scroll thead th:first-child{position:sticky;left:0;background:var(--color-surface-alt);z-index:4}
.table--static thead th{position:static}
.table tfoot td:first-child{background:var(--color-surface-alt)}
.table tfoot td{background:var(--color-surface-alt);font-weight:var(--weight-semibold);border-top:1px solid var(--color-border);border-bottom:0}

/* riga vuota */
.empty{padding:var(--space-xxl) var(--space-lg);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-smd)}
.empty__icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent-soft);color:var(--color-accent-strong)}
.empty__title{font:var(--weight-semibold) var(--text-lead-size)/var(--text-lead-line) var(--font-body)}
.empty__text{color:var(--color-text-muted);max-width:44ch}
.table td.table__empty{height:auto;padding:0;border-bottom:0;background:var(--color-surface)}

/* caricamento: righe scheletro */
.skeleton{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--color-surface-alt) 25%,var(--color-row-hover) 50%,var(--color-surface-alt) 75%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skeleton--w40{width:40%}.skeleton--w60{width:60%}.skeleton--w80{width:80%}.skeleton--price{width:64px;margin-left:auto}.skeleton--chip{width:84px;height:24px;border-radius:12px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* campo di modifica in cella (prezzo): normale, in modifica, salvato, errore, in salvataggio */
.cellfield{position:relative;display:inline-block;margin:0;width:116px;vertical-align:middle}
.cellfield__input{width:100%;height:36px;padding:0 34px 0 28px;text-align:right;font:var(--weight-semibold) var(--text-cell-size)/1 var(--font-body);font-variant-numeric:tabular-nums;
  color:var(--color-text);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm)}
.cellfield__unit{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-weight:var(--weight-semibold)}
.cellfield__state{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:none;width:16px;height:16px}
.cellfield__msg{position:absolute;right:0;top:calc(100% + 6px);z-index:8;display:none;width:max-content;max-width:260px;padding:8px 12px;border-radius:var(--radius-md);
  background:var(--color-surface);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-menu);font:var(--weight-regular) 13px/18px var(--font-body);color:var(--color-text);text-align:left}
tbody tr:hover .cellfield__input,.cellfield__input:hover{border-color:var(--color-border-strong)}
.cellfield__input:focus,.cellfield.is-editing .cellfield__input{outline:none;background:var(--color-surface);border-color:var(--color-focus);box-shadow:0 0 0 2px var(--color-focus)}
.cellfield:focus-within .cellfield__msg--hint,.cellfield.is-editing .cellfield__msg--hint{display:block}
.cellfield.is-saving .cellfield__input{background:var(--color-bg);border-color:var(--color-border-strong)}
.cellfield.is-saving .cellfield__state--saving{display:block;border:2px solid var(--color-text-muted);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.cellfield.is-saved .cellfield__input{background:var(--color-ok-soft);border-color:var(--color-ok-dot);color:var(--color-ok)}
.cellfield.is-saved .cellfield__state--saved{display:block;color:var(--color-ok)}
.cellfield.is-error .cellfield__input{background:var(--color-danger-soft);border-color:var(--color-danger);box-shadow:inset 0 0 0 1px var(--color-danger);color:var(--color-text)}
.cellfield.is-error .cellfield__state--error{display:block;color:var(--color-danger)}
.cellfield.is-error .cellfield__msg--error{display:block;color:var(--color-danger);border-color:var(--color-danger);font-weight:var(--weight-semibold)}
.cellfield.is-error .cellfield__msg--hint{display:none!important}
.table tbody tr:nth-last-child(-n+3) .cellfield__msg{top:auto;bottom:calc(100% + 6px)}
.cellfield--sm{width:96px}

/* barra di azione sulle selezioni */
.selbar{position:sticky;bottom:var(--space-md);z-index:25;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-smd);
  padding:var(--space-smd) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-bar)}
.selbar__count{font-weight:var(--weight-bold);display:flex;align-items:center;gap:var(--space-smd);margin-right:var(--space-sm)}
.selbar__n{min-width:32px;height:32px;padding:0 8px;border-radius:var(--radius-pill);display:inline-grid;place-items:center;background:var(--color-accent-strong);color:var(--color-on-accent);font-variant-numeric:tabular-nums}
.selbar__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);flex:1 1 auto}
.selbar__clear{margin-left:auto}

/* paginazione */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-smd) var(--space-lg);padding:var(--space-smd) var(--space-md);border-top:1px solid var(--color-border)}
.pagination__info{color:var(--color-text-muted);font-size:var(--text-cell-size)}
.pagination__list{display:flex;align-items:center;gap:var(--space-xs)}
.pagination__link{display:inline-grid;place-items:center;min-width:var(--control-target);min-height:var(--control-target);padding:0 var(--space-smd);border-radius:var(--radius-md);
  color:var(--color-text);text-decoration:none;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;gap:6px;grid-auto-flow:column}
a.pagination__link:hover{background:var(--color-row-hover)}
.pagination__link[aria-current="page"]{background:var(--color-accent-strong);color:var(--color-on-accent)}
.pagination__link[aria-disabled="true"]{color:var(--color-text-muted);cursor:not-allowed}
.pagination__gap{padding:0 6px;color:var(--color-text-muted)}
.pagination__size{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-muted);font-size:var(--text-cell-size)}
.pagination__size .select{width:auto;min-height:36px}

/* ================= 9. Elenco chiave-valore, cronologia ================= */
.kv{display:grid;grid-template-columns:minmax(120px,210px) minmax(0,1fr);margin:0}
.kv dt,.kv dd{padding:var(--space-smd) 0;border-bottom:1px solid var(--color-border)}
.kv dt{color:var(--color-text-muted)}
.kv dd{font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}
.kv--compact{grid-template-columns:minmax(100px,1fr) auto}
.kv--compact dd{text-align:right}

.timeline{position:relative;display:flex;flex-direction:column}
.timeline__item{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--space-md);padding:0 0 var(--space-lg) var(--space-lg)}
.timeline__item::before{content:"";position:absolute;left:5px;top:6px;bottom:-6px;width:2px;background:var(--color-border)}
.timeline__item:last-child::before{display:none}
.timeline__item::after{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;background:var(--color-surface);border:3px solid var(--color-accent-strong)}
.timeline__when{color:var(--color-text-muted);font-size:var(--text-small-size);line-height:var(--text-small-line);padding-top:2px;font-variant-numeric:tabular-nums}
.timeline__what{font-weight:var(--weight-semibold)}
.timeline__who{color:var(--color-text-muted);font-size:var(--text-small-size)}
.diff{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.diff del{color:var(--color-text-muted)}

/* ricetta: margine */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md)}
.metric{padding:var(--space-md) var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);display:flex;flex-direction:column;gap:4px}
.metric__label{font:var(--weight-semibold) var(--text-caption-size)/var(--text-caption-line) var(--font-body);letter-spacing:var(--text-caption-tracking);text-transform:uppercase;color:var(--color-text-muted)}
.metric__value{font:var(--weight-regular) 30px/36px var(--font-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.metric__note{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--color-text-muted)}
.metric--key{border-color:var(--color-accent-strong);box-shadow:inset 0 0 0 1px var(--color-accent-strong)}
.priceflow{display:flex;height:40px;border-radius:var(--radius-md);overflow:hidden;gap:2px;font-weight:var(--weight-semibold);font-size:var(--text-small-size)}
.priceflow>span{display:flex;align-items:center;padding:0 var(--space-smd);white-space:nowrap;overflow:hidden}
.priceflow__cost{background:var(--color-surface-alt);color:var(--color-text)}
.priceflow__margin{background:var(--color-data);color:var(--color-on-accent)}
.allergens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
.allergens__group{display:flex;flex-direction:column;gap:var(--space-smd)}
.allergens__title{font:var(--weight-semibold) 14px/20px var(--font-body);display:flex;align-items:center;gap:var(--space-sm)}
.allergens__why{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--color-text-muted)}

/* ================= 10. Finestra di conferma ================= */
.modal{width:calc(100% - 32px);max-width:480px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-pop)}
.modal::backdrop{background:rgba(0,0,0,.45);background:var(--color-overlay)}
.modal__body{display:flex;gap:var(--space-md);padding:var(--space-lg)}
.modal__icon{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--color-danger-soft);color:var(--color-danger)}
.modal__title{font:var(--weight-semibold) var(--text-h2-size)/var(--text-h2-line) var(--font-body);margin-bottom:var(--space-sm)}
.modal__text{color:var(--color-text-muted)}
.modal__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-smd);padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border)}

/* ================= 11. Utilita' di visibilita' ================= */
.only-mobile{display:none}

/* ================= 12. Responsive ================= */
@media (max-width:1279px){
  .grid--stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .split,.grid--2{grid-template-columns:minmax(0,1fr)}
  .table .col-dept,.table .col-vat{display:none}
  .selbar__count{order:1;margin-right:0}
  .selbar__clear{order:2}
  .selbar__actions{order:3;width:100%;flex:none;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .selbar__actions .btn{flex:none}
}
/* tablet e telefono: la barra laterale diventa un menu a scomparsa */
@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;width:min(320px,88vw);height:100dvh;transform:translateX(-100%);visibility:hidden;
    transition:transform 220ms var(--ease),visibility 0s linear 220ms;box-shadow:none}
  .app[data-nav="open"] .sidebar{transform:none;visibility:visible;transition:transform 220ms var(--ease),visibility 0s;box-shadow:var(--shadow-pop)}
  .app[data-nav="open"] .scrim{display:block;position:fixed;inset:0;z-index:55;background:var(--color-overlay)}
  .icon-btn.sidebar__close{display:inline-grid}
  .icon-btn.topbar__burger{display:inline-grid;margin-left:-6px}
  .page-head__title{font-size:30px;line-height:36px}
}
@media (max-width:767px){
  .grid--stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .allergens{grid-template-columns:minmax(0,1fr)}
}
/* telefono */
@media (max-width:640px){
  .only-mobile{display:revert}
  .only-desktop{display:none!important}
  .page{padding-top:var(--space-lg);gap:var(--space-md)}
  .page-head__title{font-size:26px;line-height:32px}
  .page-head__actions{width:100%}
  .page-head__actions .btn{flex:1 1 auto}
  .topbar{gap:var(--space-sm)}
  .locale-switch__label{display:none}
  .locale-switch{flex:1 1 auto;min-width:0;max-width:240px}
  .account-btn .account-btn__name,.account-btn .icon{display:none}
  .grid--stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-smd)}
  .stat{padding:var(--space-md)}
  .stat__value{font-size:32px;line-height:36px}
  .grid--2{grid-template-columns:minmax(0,1fr)}
  .card__head{padding:var(--space-md) var(--space-md) 0}
  .card__body{padding:var(--space-md)}
  .card__foot{padding:var(--space-smd) var(--space-md)}
  .card__foot .btn{flex:1 1 auto}
  .todo__item,.seclist__item{padding:var(--space-smd) var(--space-md)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-smd)}
  .metric{padding:var(--space-smd) var(--space-md)}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv dt{padding:var(--space-smd) 0 0;border-bottom:0}
  .kv dd{padding:2px 0 var(--space-smd)}
  .kv--compact{grid-template-columns:minmax(0,1fr) auto}
  .kv--compact dt{padding:var(--space-smd) 0;border-bottom:1px solid var(--color-border)}
  .kv--compact dd{padding:var(--space-smd) 0;border-bottom:1px solid var(--color-border)}
  .timeline__item{grid-template-columns:minmax(0,1fr);gap:2px}
  .toolbar{display:grid;grid-template-columns:1fr 1fr}
  .toolbar .search{grid-column:1/-1;flex:none}
  .toolbar__sel{min-width:0;flex:none}
  .toolbar__sort{display:block;grid-column:1/-1}
  .toolbar__count{grid-column:1/-1;margin-left:0}
  .selbar{left:0;right:0;bottom:var(--space-sm);padding:var(--space-smd)}
  .selbar__count{order:1;margin-right:0}
  .selbar__clear{order:2}
  .selbar__actions{order:3;width:100%;flex:none;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .selbar__actions .btn{flex:none}
  .pagination{justify-content:center}
  .pagination__num,.pagination__size,.pagination__info--long{display:none}
  .modal__foot{flex-direction:column-reverse}
  .modal__foot .btn{width:100%}
  .modal__body{padding:var(--space-md)}
  .modal__foot{padding:var(--space-md)}
  .menu__panel{position:fixed;left:var(--space-md);right:var(--space-md);top:calc(var(--header-height) + 8px);max-width:none}
  .menu--end .menu__panel{left:var(--space-md);right:var(--space-md)}

  /* tabella a schede: su telefono ogni riga e' una scheda. Motivazione in NOTE.md */
  .table--cards,.table--cards tbody,.table--cards thead,.table--cards tr,.table--cards td,.table--cards th{display:block}
  .table--cards thead tr{display:flex;align-items:center;min-height:48px;background:var(--color-surface-alt);border-bottom:1px solid var(--color-border)}
  .table--cards th{position:static;height:auto;background:none;border:0;padding:0}
  .table--cards th:not(.col-check){display:none}
  .table--cards th.col-check{display:flex;align-items:center;width:100%;padding:0 0 0 var(--space-smd)}
  .th-check-label{display:inline;font:var(--weight-semibold) 14px/20px var(--font-body);letter-spacing:0;text-transform:none;color:var(--color-text)}
  .table--cards thead{position:sticky;top:var(--header-height);z-index:3}
  .table--cards tbody tr{display:grid;grid-template-columns:var(--control-target) minmax(0,1fr) auto var(--control-target);
    grid-template-areas:"check name name actions" ". cat vat vat" ". price status status";
    column-gap:var(--space-xs);row-gap:2px;align-items:center;padding:var(--space-sm) var(--space-xs) var(--space-smd) 0;border-bottom:1px solid var(--color-border)}
  .table--cards tbody tr:last-child{border-bottom:0}
  .table--cards td{height:auto;border:0;padding:0}
  .table--cards .col-check{grid-area:check;width:auto;display:flex;justify-content:center}
  .table--cards .cell-name{grid-area:name;align-self:center;font-size:16px;line-height:22px;padding:var(--space-xs) 0}
  .table--cards .col-actions{grid-area:actions;width:auto;padding:0}
  .table--cards .cell-cat{grid-area:cat;color:var(--color-text-muted);font-size:var(--text-small-size)}
  .table--cards .col-dept{display:none}
  .table--cards .col-vat{display:block}
  .table--cards .cell-name{min-width:0}
  .table--cards .col-vat{grid-area:vat;width:auto;text-align:right;color:var(--color-text-muted);font-size:var(--text-small-size)}
  .table--cards .col-vat::before{content:"IVA "}
  .table--cards .col-price{grid-area:price;width:auto;text-align:left;padding-top:var(--space-xs)}
  .table--cards .col-status{grid-area:status;width:auto;text-align:right;padding-right:var(--space-smd);padding-top:var(--space-xs)}
  .table--cards .cellfield{width:148px}
  .table--cards .cellfield__input{height:var(--control-target);font-size:16px;border-color:var(--color-border-strong);background:var(--color-surface)}
  .table--cards .cellfield__msg{left:0;right:auto}
  .table--cards tr.is-selected{box-shadow:inset 3px 0 0 var(--color-accent)}
  .table--cards tr.is-selected td:first-child{box-shadow:none}
  .table--cards .table__empty,.table--cards tr:has(.table__empty){display:block;padding:0}
  .table--cards .skeleton-row{display:block;padding:var(--space-md)}
  /* tabelle che restano tabelle: scorrono in orizzontale con la prima colonna fissa */
  .table--scroll tbody th:first-child{min-width:136px}
  .table--scroll th,.table--scroll td{padding:0 var(--space-sm)}
}
@media (pointer:coarse){
  .cellfield__input{border-color:var(--color-border-strong);background:var(--color-surface)}
}
@media print{.sidebar,.topbar,.selbar{display:none}.app{display:block}}