/* =====================================================================
   Gestionale EB - modulo Acquisti
   Base grafica comune

   Le pagine caricano questo file PRIMA del proprio <style>:
   qui stanno variabili, header e componenti condivisi;
   nelle pagine restano solo gli stili specifici del modulo.
   Le classi nuove usano il prefisso "ds-"; le classi esistenti
   (usate anche dal JavaScript) sono stilizzate con il loro nome.
   ===================================================================== */

:root{
  /* Colori predefiniti del prodotto (sostituiti dal branding dell installazione: /api/branding.css) */
  --ds-blue:#0878b5;
  --ds-blue-dark:#075e8f;
  --ds-blue-deep:#073c70;
  --ds-blue-soft:#eaf4fb;
  --ds-blue-line:#c9dceb;
  --ds-grey:#8a9aa5;

  --ds-bg:#f3f6f8;
  --ds-surface:#ffffff;
  --ds-surface-alt:#f7fafc;
  --ds-text:#16324a;
  --ds-text-muted:#657b88;
  --ds-border:#dbe5eb;
  --ds-border-strong:#bdccd5;

  /* Colori semantici (solo per stati, non strutturali) */
  --ds-success:#198754;
  --ds-success-dark:#146c43;
  --ds-success-soft:#e9f7ef;
  --ds-success-line:#b7e1c8;
  --ds-warning:#d98a00;
  --ds-warning-dark:#8a5a00;
  --ds-warning-soft:#fff4e0;
  --ds-warning-line:#f3d9a6;
  --ds-danger:#d62932;
  --ds-danger-dark:#a51d2a;
  --ds-danger-soft:#fdebed;
  --ds-danger-line:#f1b8be;

  /* Font */
  --ds-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ds-text-sm:13px;
  --ds-text-base:14px;
  --ds-text-md:15px;

  /* Spaziature */
  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-5:24px;
  --ds-space-6:32px;

  /* Raggi */
  --ds-radius-sm:6px;
  --ds-radius:10px;
  --ds-radius-lg:14px;

  /* Ombre */
  --ds-shadow-sm:0 1px 3px rgba(16,50,74,.08);
  --ds-shadow:0 2px 10px rgba(16,50,74,.08);
  --ds-shadow-lg:0 10px 30px rgba(16,50,74,.18);

  /* Layout */
  --ds-content-max:1200px;
  --ds-touch:44px;

  /* Alias delle vecchie variabili di pagina (compatibilità) */
  --blue:var(--ds-blue);
  --blue-dark:var(--ds-blue-dark);
  --blue-title:var(--ds-blue-dark);
  --ds-brand:var(--ds-blue-dark);
  --ds-brand-2:var(--ds-blue-deep);
  --bg:var(--ds-bg);
  --line:var(--ds-blue-line);
  --soft:var(--ds-blue-soft);
  --text:var(--ds-text);
  --danger:var(--ds-danger);
  --green:var(--ds-success);
}

/* =====================================================================
   BASE
   ===================================================================== */

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--ds-font);
  font-size:var(--ds-text-base);
  line-height:1.45;
  background:var(--ds-bg);
  color:var(--ds-text);
}

body.ds-lock{
  overflow:hidden;
}

button,input,select,textarea{
  font-family:inherit;
}

img{
  max-width:100%;
}

.hidden{display:none!important}

main{
  max-width:var(--ds-content-max);
  margin:0 auto;
  padding:var(--ds-space-5) max(var(--ds-space-5),env(safe-area-inset-right))
          48px max(var(--ds-space-5),env(safe-area-inset-left));
}

/* =====================================================================
   HEADER COMUNE
   ===================================================================== */

.ds-header{
  background:var(--ds-surface);
  border-bottom:3px solid var(--ds-blue);
  box-shadow:var(--ds-shadow-sm);
  font-family:var(--ds-font);
  padding-top:env(safe-area-inset-top);
}

.ds-header-inner{
  max-width:var(--ds-content-max);
  margin:0 auto;
  min-height:84px;
  padding:var(--ds-space-3) max(var(--ds-space-5),env(safe-area-inset-right))
          var(--ds-space-3) max(var(--ds-space-5),env(safe-area-inset-left));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"logo titles home";
  align-items:center;
  column-gap:var(--ds-space-5);
}

.ds-brand{
  grid-area:logo;
  display:flex;
  align-items:center;
  text-decoration:none;
}

.ds-logo{
  display:block;
  height:56px;
  width:auto;
  max-width:min(60vw,280px);
  object-fit:contain;
  object-position:left center;
  /* visibile solo dopo che ds-brand.js ha applicato il logo della configurazione (nessun lampeggio del ripiego) */
  visibility:hidden;
}
.ds-logo.ds-logo-pronto{
  visibility:visible;
}

.ds-titles{
  grid-area:titles;
  min-width:0;
  padding-left:var(--ds-space-5);
  border-left:1px solid var(--ds-border);
}

.ds-app-name{
  margin:0;
  color:var(--ds-blue-deep);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.3;
  text-transform:uppercase;
}

.ds-module{
  margin:2px 0 0;
  color:var(--ds-blue-dark);
  font-size:24px;
  font-weight:800;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ds-home-btn{
  grid-area:home;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ds-space-2);
  min-height:var(--ds-touch);
  min-width:var(--ds-touch);
  padding:0 var(--ds-space-4);
  border:1px solid var(--ds-blue-line);
  border-radius:var(--ds-radius);
  background:var(--ds-blue-soft);
  color:var(--ds-blue-dark);
  font-family:var(--ds-font);
  font-size:14px;
  font-weight:800;
  letter-spacing:.03em;
  text-decoration:none;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s,border-color .15s,color .15s;
}

.ds-home-btn:hover{
  background:var(--ds-blue);
  border-color:var(--ds-blue);
  color:#fff;
}

.ds-home-btn:focus-visible{
  outline:3px solid #0878b555;
  outline-offset:2px;
}

.ds-home-icon{
  font-size:18px;
  line-height:1;
}

/* TABLET */
@media(max-width:850px){
  .ds-header-inner{
    min-height:76px;
    padding-left:max(var(--ds-space-4),env(safe-area-inset-left));
    padding-right:max(var(--ds-space-4),env(safe-area-inset-right));
    column-gap:var(--ds-space-4);
  }

  .ds-logo{
    height:48px;
  }

  .ds-titles{
    padding-left:var(--ds-space-4);
  }

  .ds-module{
    font-size:21px;
  }
}

/* SMARTPHONE / IPHONE
   Riga 1: logo + HOME   -   Riga 2: nome gestionale + modulo */
@media(max-width:600px){
  .ds-header-inner{
    min-height:0;
    padding-top:var(--ds-space-3);
    padding-bottom:var(--ds-space-3);
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "logo home"
      "titles titles";
    row-gap:var(--ds-space-2);
    column-gap:var(--ds-space-3);
  }

  .ds-logo{
    height:42px;
  }

  .ds-titles{
    padding:var(--ds-space-2) 0 0;
    border-left:0;
    border-top:1px solid var(--ds-border);
  }

  .ds-app-name{
    font-size:12px;
  }

  .ds-module{
    font-size:20px;
  }
}

@media(max-width:360px){
  .ds-logo{
    height:36px;
  }

  .ds-home-btn{
    padding:0 var(--ds-space-3);
  }
}

/* =====================================================================
   INTESTAZIONE DEL CONTENUTO (descrizione + contatore)
   ===================================================================== */

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ds-space-3) var(--ds-space-4);
  margin-bottom:var(--ds-space-4);
}

.top p{
  margin:0;
  color:var(--ds-text-muted);
  font-size:var(--ds-text-md);
}

/* =====================================================================
   CONTATORI
   ===================================================================== */

.counter{
  display:inline-flex;
  align-items:center;
  gap:var(--ds-space-2);
  min-height:var(--ds-touch);
  padding:var(--ds-space-1) var(--ds-space-4);
  background:var(--ds-blue-soft);
  border:1px solid var(--ds-blue-line);
  border-radius:var(--ds-radius);
  color:var(--ds-blue-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
}

.counter strong{
  color:var(--ds-blue-deep);
  font-size:22px;
  line-height:1;
  letter-spacing:0;
}

/* =====================================================================
   PULSANTI
   Primario: blu predefinito - Secondario: chiaro con bordo
   Pericolo: rosso   - Successo/conferma: verde
   ===================================================================== */

.ds-btn,
button.primary,button.secondary,button.add,button.danger,
button.open,button.back,button.cancel,button.confirm,
button.prepare,button.close,button.filter-btn,button.prep-cancel,
button.logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ds-space-2);
  min-height:40px;
  padding:0 var(--ds-space-4);
  border:1px solid transparent;
  border-radius:8px;
  font-family:inherit;
  font-size:var(--ds-text-base);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;
}

/* Primario */
.ds-btn-primary,
button.primary,button.open,button.prepare,button.filter-btn.apply{
  background:var(--ds-blue);
  border-color:var(--ds-blue);
  color:#fff;
}

.ds-btn-primary:hover,
button.primary:hover,button.open:hover,button.prepare:hover,button.filter-btn.apply:hover{
  background:var(--ds-blue-dark);
  border-color:var(--ds-blue-dark);
}

/* Secondario */
.ds-btn-secondary,
button.secondary,button.back,button.cancel,button.filter-btn.reset{
  background:var(--ds-surface);
  border-color:var(--ds-blue-line);
  color:var(--ds-blue-dark);
}

.ds-btn-secondary:hover,
button.secondary:hover,button.back:hover,button.cancel:hover,button.filter-btn.reset:hover{
  background:var(--ds-blue-soft);
}

/* Azione di inserimento (tono blu chiaro) */
button.add{
  background:var(--ds-blue-soft);
  border-color:var(--ds-blue-line);
  color:var(--ds-blue-dark);
}

button.add:hover{
  background:#dcecf8;
}

/* Pericolo */
button.danger,button.close,button.logout{
  background:var(--ds-danger);
  border-color:var(--ds-danger);
  color:#fff;
}

button.danger:hover,button.close:hover,button.logout:hover{
  background:var(--ds-danger-dark);
  border-color:var(--ds-danger-dark);
}

button.prep-cancel{
  background:var(--ds-danger-soft);
  border-color:var(--ds-danger-line);
  color:var(--ds-danger-dark);
}

button.prep-cancel:hover{
  background:#fbd9dd;
}

/* Successo / conferma */
button.confirm{
  background:var(--ds-success);
  border-color:var(--ds-success);
  color:#fff;
}

button.confirm:hover{
  background:var(--ds-success-dark);
  border-color:var(--ds-success-dark);
}

.ds-btn:focus-visible,
button:focus-visible{
  outline:3px solid #0878b555;
  outline-offset:2px;
}

.ds-btn:disabled,
button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =====================================================================
   CARD E CONTENITORI
   ===================================================================== */

.ds-card,
.card,
.detail{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-sm);
  padding:var(--ds-space-5);
}

.detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--ds-space-4);
  margin-bottom:var(--ds-space-4);
}

.detail-head h2{
  margin:0;
  color:var(--ds-blue-deep);
  font-size:20px;
  line-height:1.25;
}

.detail-head .code,
.detail-head p{
  margin:var(--ds-space-1) 0 0;
  color:var(--ds-text-muted);
  font-weight:700;
}

.items-title{
  margin:var(--ds-space-5) 0 var(--ds-space-3);
  color:var(--ds-blue-deep);
  font-size:16px;
  font-weight:800;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--ds-space-2);
  margin-bottom:var(--ds-space-4);
}

.info-box{
  padding:var(--ds-space-2) var(--ds-space-3);
  background:var(--ds-surface-alt);
  border:1px solid var(--ds-border);
  border-radius:8px;
  min-width:0;
  overflow-wrap:anywhere;
}

.info-box small{
  display:block;
  margin-bottom:2px;
  color:var(--ds-text-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.info-box strong{
  font-size:var(--ds-text-base);
}

.actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ds-space-3);
  margin-top:var(--ds-space-5);
}

.empty{
  padding:var(--ds-space-6) var(--ds-space-4);
  background:var(--ds-surface);
  border:1px dashed var(--ds-border-strong);
  border-radius:var(--ds-radius-lg);
  color:var(--ds-text-muted);
  text-align:center;
}

/* =====================================================================
   MESSAGGI E PANNELLI INFORMATIVI
   ===================================================================== */

.message,
.info,
.ps-info{
  margin:0 0 var(--ds-space-4);
  padding:var(--ds-space-3) var(--ds-space-4);
  border:1px solid var(--ds-blue-line);
  border-left:4px solid var(--ds-blue);
  border-radius:8px;
  background:var(--ds-blue-soft);
  color:var(--ds-text);
  font-size:var(--ds-text-base);
  font-weight:600;
  line-height:1.45;
}

.message.ok{
  background:var(--ds-success-soft);
  border-color:var(--ds-success-line);
  border-left-color:var(--ds-success);
  color:var(--ds-success-dark);
}

.message.error{
  background:var(--ds-danger-soft);
  border-color:var(--ds-danger-line);
  border-left-color:var(--ds-danger);
  color:var(--ds-danger-dark);
}

.message.warn{
  background:var(--ds-warning-soft);
  border-color:var(--ds-warning-line);
  border-left-color:var(--ds-warning);
  color:var(--ds-warning-dark);
}

.message ul{
  margin:var(--ds-space-2) 0 0;
  padding-left:20px;
}

/* =====================================================================
   BADGE E STATI
   ===================================================================== */

.ds-badge,
.badge-free,
.status-ok,
.status-no{
  display:inline-flex;
  align-items:center;
  gap:var(--ds-space-1);
  padding:2px 8px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  font-weight:800;
  line-height:1.5;
  vertical-align:middle;
  white-space:nowrap;
}

.badge-free{
  margin-left:6px;
  background:var(--ds-warning-soft);
  border-color:var(--ds-warning-line);
  color:var(--ds-warning-dark);
}

.status-ok{
  background:var(--ds-success-soft);
  border-color:var(--ds-success-line);
  color:var(--ds-success-dark);
}

.status-no{
  background:var(--ds-danger-soft);
  border-color:var(--ds-danger-line);
  color:var(--ds-danger-dark);
}

.item-sub{
  display:block;
  margin-top:3px;
  color:var(--ds-text-muted);
  font-size:12px;
}

/* =====================================================================
   TABELLE
   Desktop: tabella classica - Smartphone: righe trasformate in schede
   (etichette da data-label)
   ===================================================================== */

.table-wrap{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-sm);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table-wrap table{
  width:100%;
  border-collapse:collapse;
}

.table-wrap th{
  padding:10px 12px;
  background:var(--ds-surface-alt);
  border-bottom:1px solid var(--ds-border);
  color:var(--ds-blue-deep);
  font-size:12px;
  font-weight:800;
  text-align:left;
  white-space:nowrap;
}

.table-wrap td{
  padding:10px 12px;
  border-top:1px solid #edf2f5;
  font-size:var(--ds-text-base);
  text-align:left;
  vertical-align:middle;
}

.table-wrap tbody tr:first-child td{
  border-top:0;
}

.table-wrap tbody tr:hover td{
  background:#f8fbfd;
}

.table-wrap button.open{
  min-height:36px;
}

/* Campi quantità nelle tabelle articoli */
.items-table input:not([type=checkbox]){
  width:96px;
  min-height:38px;
  padding:6px 8px;
  border:1px solid var(--ds-border-strong);
  border-radius:var(--ds-radius-sm);
  background:#fff;
  font-size:var(--ds-text-md);
  text-align:center;
}

.items-table input:not([type=checkbox]):disabled{
  background:#eef2f4;
  color:#8a999f;
}

/* =====================================================================
   FILTRI A SCOMPARSA
   Barra compatta + pannello (desktop: espandibile; smartphone: drawer)
   Il pannello viene nascosto solo quando ds-filtri.js è attivo
   (classe is-ready): senza script resta visibile come prima.
   ===================================================================== */

.ds-filters{
  margin-bottom:var(--ds-space-4);
}

.ds-filterbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ds-space-2) var(--ds-space-3);
  padding:var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-4);
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-sm);
}

.ds-filterbar-main{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ds-space-2) var(--ds-space-3);
  min-width:0;
}

.ds-filterbar-title{
  color:var(--ds-blue-deep);
  font-size:var(--ds-text-md);
  font-weight:800;
}

.ds-filter-count{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  background:#eef2f4;
  color:var(--ds-text-muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.ds-filter-count.is-active{
  background:var(--ds-blue);
  color:#fff;
}

.ds-filterbar .filter-result{
  color:var(--ds-text-muted);
  font-size:var(--ds-text-sm);
}

.ds-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:var(--ds-space-2);
}

.ds-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:3px 10px;
  background:var(--ds-blue-soft);
  border:1px solid var(--ds-blue-line);
  border-radius:999px;
  color:var(--ds-blue-deep);
  font-size:12px;
  line-height:1.4;
}

.ds-chip-label{
  color:var(--ds-blue-dark);
  font-weight:800;
  white-space:nowrap;
}

.ds-chip-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ds-filters-backdrop{
  display:none;
}

.filters-panel{
  margin-top:var(--ds-space-2);
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow);
}

.ds-filters.is-ready:not(.is-open) .filters-panel{
  display:none;
}

.filters-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--ds-space-3);
  padding:var(--ds-space-3) var(--ds-space-4);
  border-bottom:1px solid var(--ds-border);
  color:var(--ds-blue-deep);
  font-size:var(--ds-text-md);
  font-weight:800;
}

.ds-filters-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ds-touch);
  height:var(--ds-touch);
  margin:-6px -8px -6px 0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ds-text-muted);
  font-size:20px;
  cursor:pointer;
}

.ds-filters-close:hover{
  background:#eef2f4;
  color:var(--ds-text);
}

.filters-body{
  padding:var(--ds-space-4);
}

.filters-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ds-space-3);
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.filter-field label{
  color:#4f6775;
  font-size:12px;
  font-weight:800;
}

.filter-field input:not([type=checkbox]):not([type=radio]),
.filter-field select{
  width:100%;
  min-height:40px;
  padding:7px 10px;
  border:1px solid var(--ds-border-strong);
  border-radius:8px;
  background:#fff;
  color:var(--ds-text);
  font-size:var(--ds-text-base);
}

.filter-field input:not([type=checkbox]):not([type=radio]):focus,
.filter-field select:focus{
  outline:none;
  border-color:var(--ds-blue);
  box-shadow:0 0 0 3px #0878b522;
}

.filter-advanced{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ds-space-2) var(--ds-space-5);
  margin-top:var(--ds-space-4);
  padding-top:var(--ds-space-3);
  border-top:1px solid var(--ds-border);
}

.filter-check{
  display:flex;
  align-items:center;
  gap:var(--ds-space-2);
  min-height:36px;
  color:#425b69;
  font-size:var(--ds-text-sm);
  font-weight:700;
  cursor:pointer;
}

.filter-check input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--ds-blue);
}

.filters-actions{
  display:flex;
  justify-content:flex-end;
  gap:var(--ds-space-2);
  padding:var(--ds-space-3) var(--ds-space-4);
  border-top:1px solid var(--ds-border);
  background:var(--ds-surface-alt);
  border-radius:0 0 var(--ds-radius-lg) var(--ds-radius-lg);
}

/* =====================================================================
   MODALI
   ===================================================================== */

.overlay,
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(var(--ds-space-4),env(safe-area-inset-top))
          max(var(--ds-space-4),env(safe-area-inset-right))
          max(var(--ds-space-4),env(safe-area-inset-bottom))
          max(var(--ds-space-4),env(safe-area-inset-left));
  background:rgba(7,32,52,.55);
}

.modal{
  width:100%;
  max-width:560px;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:var(--ds-space-5);
  background:var(--ds-surface);
  border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-lg);
}

.modal h2,
.modal h3{
  margin:0 0 var(--ds-space-3);
  color:var(--ds-blue-deep);
  font-size:20px;
}

.modal p{
  margin:0 0 var(--ds-space-4);
  font-size:var(--ds-text-md);
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:var(--ds-space-2);
}

/* =====================================================================
   SPINNER
   ===================================================================== */

.spinner{
  display:inline-block;
  width:17px;
  height:17px;
  margin-right:7px;
  border:3px solid #ffffff66;
  border-top-color:#fff;
  border-radius:50%;
  vertical-align:middle;
  animation:ds-spin .8s linear infinite;
}

@keyframes ds-spin{
  to{transform:rotate(360deg)}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* TABLET */
@media(max-width:850px){
  main{
    padding:var(--ds-space-4) max(var(--ds-space-4),env(safe-area-inset-right))
            40px max(var(--ds-space-4),env(safe-area-inset-left));
  }

  .filters-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .table-wrap table{
    min-width:760px;
  }
}

/* SMARTPHONE / IPHONE: campi almeno 16px (niente zoom iOS) e touch 44px */
@media(max-width:850px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  select,
  textarea{
    font-size:max(16px,1em)!important;
  }

  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  select{
    min-height:var(--ds-touch);
  }

  .ds-btn,
  button.primary,button.secondary,button.add,button.danger,
  button.open,button.back,button.cancel,button.confirm,
  button.prepare,button.close,button.filter-btn,button.prep-cancel,
  button.logout,
  .table-wrap button.open{
    min-height:var(--ds-touch);
  }

  .filter-check{
    min-height:var(--ds-touch);
  }

  .filter-check input{
    width:22px;
    height:22px;
  }
}

@media(max-width:600px){
  .card,
  .detail,
  .ds-card{
    padding:var(--ds-space-4);
    border-radius:var(--ds-radius);
  }

  .detail-head{
    flex-direction:column;
    align-items:stretch;
  }

  .info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .actions button{
    width:100%;
  }

  .modal{
    padding:var(--ds-space-4);
  }

  .modal-actions{
    flex-direction:column-reverse;
  }

  .modal-actions button{
    width:100%;
  }

  /* Tabelle -> schede */
  .table-wrap{
    overflow:visible;
    background:transparent;
    border:0;
    box-shadow:none;
  }

  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td{
    display:block;
  }

  .table-wrap table{
    min-width:0;
  }

  .table-wrap thead{
    display:none;
  }

  .table-wrap tr{
    margin-bottom:var(--ds-space-3);
    padding:var(--ds-space-2) var(--ds-space-3);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius);
    box-shadow:var(--ds-shadow-sm);
  }

  .table-wrap td,
  .table-wrap tbody tr:first-child td{
    padding:6px 0;
    border:0;
    border-top:1px solid #f0f4f6;
    overflow-wrap:anywhere;
  }

  .table-wrap tbody tr td:first-child{
    border-top:0;
  }

  .table-wrap tbody tr:hover td{
    background:transparent;
  }

  .table-wrap td::before{
    content:attr(data-label);
    display:inline-block;
    width:42%;
    max-width:140px;
    padding-right:var(--ds-space-2);
    color:var(--ds-text-muted);
    font-size:12px;
    font-weight:700;
    vertical-align:top;
  }

  .table-wrap td:not([data-label])::before,
  .table-wrap td[data-label=""]::before{
    display:none;
  }

  .table-wrap td:not([data-label]) button.open{
    width:100%;
    margin-top:var(--ds-space-1);
  }

  .items-table input:not([type=checkbox]){
    width:110px;
  }
}

/* SMARTPHONE: filtri in drawer dal basso */
@media(max-width:700px){
  .filters-grid{
    grid-template-columns:1fr;
  }

  .ds-filterbar{
    padding-left:var(--ds-space-3);
  }

  .ds-filters.is-ready .ds-filters-backdrop{
    position:fixed;
    inset:0;
    z-index:110;
    background:rgba(7,32,52,.55);
  }

  .ds-filters.is-ready.is-open .ds-filters-backdrop{
    display:block;
  }

  .ds-filters.is-ready .filters-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:111;
    display:flex;
    flex-direction:column;
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px - env(safe-area-inset-top));
    margin:0;
    border:0;
    border-radius:18px 18px 0 0;
    box-shadow:var(--ds-shadow-lg);
  }

  .ds-filters.is-ready:not(.is-open) .filters-panel{
    display:none;
  }

  .ds-filters.is-ready .filters-title{
    flex:0 0 auto;
    padding-left:max(var(--ds-space-4),env(safe-area-inset-left));
    padding-right:max(var(--ds-space-4),env(safe-area-inset-right));
  }

  .ds-filters.is-ready .filters-body{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-left:max(var(--ds-space-4),env(safe-area-inset-left));
    padding-right:max(var(--ds-space-4),env(safe-area-inset-right));
  }

  .ds-filters.is-ready .filters-actions{
    flex:0 0 auto;
    border-radius:0;
    padding-bottom:max(var(--ds-space-3),env(safe-area-inset-bottom));
    padding-left:max(var(--ds-space-4),env(safe-area-inset-left));
    padding-right:max(var(--ds-space-4),env(safe-area-inset-right));
  }

  .filters-actions button{
    flex:1 1 0;
  }

  .filter-advanced{
    flex-direction:column;
    gap:0;
  }
}

/* =====================================================================
   INTERFACCIA EB - menu laterale e barra superiore (11/10/26)
   Attiva con html.ds-shell (impostata da ds-auth.js prima del disegno);
   il menu e' costruito da ds-nav.js con le sole voci restituite dal server.
   Marchio EB = piattaforma; logo e nome dell'azienda restano nella barra
   superiore e vengono dalla configurazione (ds-brand.js).
   ===================================================================== */

:root{
  --eb-notte:#0b1f3a;
  --eb-notte-2:#12294b;
  --eb-notte-linea:rgba(255,255,255,.10);
  --eb-testo:#c8d5e6;
  --eb-testo-forte:#ffffff;
  --eb-accento:#4da3ff;
  --eb-w:260px;
  --eb-w-ridotto:76px;
}

/* menu laterale */
.eb-side{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:90;
  width:var(--eb-w);
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,var(--eb-notte) 0%,var(--eb-notte-2) 100%);
  color:var(--eb-testo);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  overflow:hidden;
}

.eb-side-top{
  flex-shrink:0;   /* con molte voci il menu scorre: l'intestazione (pulsante riduci/espandi) non si schiaccia */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:64px;
  padding:10px 12px 10px 16px;
  border-bottom:1px solid var(--eb-notte-linea);
}

.eb-marchio{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--eb-testo-forte);
  text-decoration:none;
  min-width:0;
}

.eb-marchio-segno{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
  background:linear-gradient(135deg,#2f80ed,#56ccf2);
  color:#fff;
  font-weight:900;
  font-size:16px;
  letter-spacing:.04em;
}

.eb-marchio-testo{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eb-testo);
  white-space:nowrap;
}

.eb-comprimi,
.eb-chiudi{
  flex:0 0 auto;
  min-width:var(--ds-touch);
  min-height:var(--ds-touch);
  border:1px solid var(--eb-notte-linea);
  border-radius:10px;
  background:transparent;
  color:var(--eb-testo);
  font-size:18px;
  cursor:pointer;
}

.eb-comprimi:hover,
.eb-chiudi:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.eb-chiudi{display:none}

.eb-nav{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:10px 10px 24px;
}

.eb-sezione{
  margin:0 0 4px;
}

.eb-sezione-titolo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 10px 4px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8fa6c4;
}

.eb-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:var(--ds-touch);
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--eb-testo);
  font:inherit;
  font-size:14px;
  font-weight:600;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.eb-link:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}

.eb-link:focus-visible{
  outline:3px solid var(--eb-accento);
  outline-offset:1px;
}

.eb-link.eb-attivo{
  background:rgba(77,163,255,.16);
  color:#fff;
}

.eb-link.eb-attivo::before{
  content:"";
  position:absolute;
  left:-10px;
  top:8px;
  bottom:8px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:var(--eb-accento);
}

.eb-icona{
  flex:0 0 28px;
  width:28px;
  text-align:center;
  font-size:18px;
  line-height:1;
}

.eb-testo{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.eb-conta{
  flex:0 0 auto;
  min-width:24px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--eb-accento);
  color:#04203f;
  font-size:12px;
  font-weight:800;
  text-align:center;
}

.eb-conta[hidden]{display:none}

.eb-presto{
  flex:0 0 auto;
  padding:2px 8px;
  border:1px solid var(--eb-notte-linea);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:#8fa6c4;
}

.eb-side-piede{
  flex-shrink:0;
  padding:10px 16px 14px;
  border-top:1px solid var(--eb-notte-linea);
  font-size:11px;
  color:#7f95b3;
}

.eb-velo{
  position:fixed;
  inset:0;
  z-index:89;
  background:rgba(7,20,38,.5);
}

.eb-velo[hidden]{display:none}

/* pulsante del menu nella barra superiore (smartphone e tablet) */
.eb-apri{
  display:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:var(--ds-touch);
  min-height:var(--ds-touch);
  padding:0 12px;
  border:1px solid var(--ds-border-strong);
  border-radius:var(--ds-radius);
  background:var(--ds-surface);
  color:var(--ds-blue-deep);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.eb-apri-icona{font-size:20px;line-height:1}

/* barra superiore chiara */
html.ds-shell .ds-header{
  border-bottom:1px solid var(--ds-border);
  box-shadow:0 1px 0 rgba(16,50,74,.04);
}

html.ds-shell .ds-header-inner{
  max-width:none;
  min-height:68px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));
}

html.ds-shell .eb-apri{order:0}
html.ds-shell .ds-brand{order:1}
html.ds-shell .ds-titles{order:2;flex:1 1 220px;padding-left:16px}
html.ds-shell .ds-utente{order:3}
html.ds-shell .ds-home-btn{order:4}

html.ds-shell .ds-logo{height:44px;max-width:min(40vw,220px)}
html.ds-shell .ds-module{font-size:21px}

.ds-utente .ds-azienda{
  padding:4px 10px;
  border-radius:999px;
  background:var(--ds-blue-soft);
  color:var(--ds-blue-deep);
  font-weight:700;
  white-space:nowrap;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* desktop: menu sempre visibile, riducibile alle sole icone */
@media(min-width:1024px){
  html.ds-shell body{padding-left:var(--eb-w)}
  html.ds-shell.eb-ridotto body{padding-left:var(--eb-w-ridotto)}
  html.ds-shell.eb-ridotto .eb-side{width:var(--eb-w-ridotto)}
  html.ds-shell.eb-ridotto .eb-marchio-testo,
  html.ds-shell.eb-ridotto .eb-testo,
  html.ds-shell.eb-ridotto .eb-presto,
  html.ds-shell.eb-ridotto .eb-sezione-titolo,
  html.ds-shell.eb-ridotto .eb-side-piede{display:none}
  html.ds-shell.eb-ridotto .eb-side-top{flex-direction:column;padding:10px 8px}
  html.ds-shell.eb-ridotto .eb-link{justify-content:center;padding:8px 0}
  html.ds-shell.eb-ridotto .eb-conta{position:absolute;top:2px;right:2px;min-width:18px;padding:0 5px;font-size:10px}
  /* menu ridotto: anche le sottovoci restano come icone, con il loro contatore (nessuna sovrapposizione: badge sull'angolo) */
  html.ds-shell.eb-ridotto .eb-sotto{padding-left:0}
  html.ds-shell.eb-ridotto .eb-sezione-titolo{display:none}
  html.ds-shell .eb-velo{display:none}
  /* barre fisse in basso delle pagine: non sotto il menu */
  html.ds-shell .barra{left:var(--eb-w)}
  html.ds-shell.eb-ridotto .barra{left:var(--eb-w-ridotto)}
}

/* smartphone e tablet: menu a scomparsa da sinistra, aperto dal pulsante MENU */
@media(max-width:1023.98px){
  html.ds-shell .eb-apri{display:inline-flex}
  .eb-side{
    width:min(86vw,320px);
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:none;
  }
  html.eb-aperto .eb-side{
    transform:none;
    box-shadow:0 10px 40px rgba(0,0,0,.35);
  }
  .eb-comprimi{display:none}
  .eb-chiudi{display:inline-block}
}

@media(max-width:600px){
  html.ds-shell .ds-header-inner{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  html.ds-shell .ds-brand{flex:1 1 auto;min-width:0}
  html.ds-shell .ds-logo{height:38px}
  html.ds-shell .ds-titles{order:5;flex:1 1 100%;padding:6px 0 0;border-left:0;border-top:1px solid var(--ds-border)}
  html.ds-shell .ds-module{font-size:19px}
  html.ds-shell .ds-utente{order:6;flex:1 1 100%;justify-content:space-between!important}
  .ds-utente .ds-azienda{max-width:45vw}
  .eb-apri-testo{display:none}
}

@media (prefers-reduced-motion:reduce){
  .eb-side{transition:none}
}

@media print{
  .eb-side,.eb-velo,.eb-apri{display:none!important}
  html.ds-shell body{padding-left:0!important}
}

/* =====================================================================
   COMPONENTI CONDIVISI: indicatori (dashboard), caricamento, avvisi in pagina
   ===================================================================== */

.ds-indicatori{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--ds-space-3);
}

.ds-indicatore{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:104px;
  padding:14px 16px;
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg);
  background:var(--ds-surface);
  box-shadow:var(--ds-shadow-sm);
  color:var(--ds-text);
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.ds-indicatore:hover{border-color:var(--ds-blue-line);box-shadow:var(--ds-shadow)}
.ds-indicatore:focus-visible{outline:3px solid #0878b555;outline-offset:2px}

.ds-indicatore-etichetta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  color:var(--ds-text-muted);
}

.ds-indicatore-valore{
  font-size:30px;
  font-weight:800;
  line-height:1.1;
  color:var(--ds-blue-deep);
}

.ds-indicatore-nota{
  font-size:12px;
  color:var(--ds-text-muted);
}

.ds-indicatore.ds-attenzione .ds-indicatore-valore{color:var(--ds-warning-dark)}

.ds-caricamento{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 0;
  color:var(--ds-text-muted);
  font-weight:700;
}

.ds-caricamento::before{
  content:"";
  width:20px;
  height:20px;
  border:3px solid var(--ds-border-strong);
  border-top-color:var(--ds-blue);
  border-radius:50%;
  animation:ds-spin .8s linear infinite;
}

.ds-avviso{
  padding:12px 14px;
  border:1px solid var(--ds-blue-line);
  border-radius:var(--ds-radius);
  background:var(--ds-blue-soft);
  color:var(--ds-blue-deep);
  font-size:var(--ds-text-md);
}

.ds-avviso.ds-avviso-errore{border-color:var(--ds-danger-line);background:var(--ds-danger-soft);color:var(--ds-danger-dark)}
.ds-avviso.ds-avviso-ok{border-color:var(--ds-success-line);background:var(--ds-success-soft);color:var(--ds-success-dark)}
.ds-avviso.ds-avviso-attenzione{border-color:var(--ds-warning-line);background:var(--ds-warning-soft);color:var(--ds-warning-dark)}

/* telefono: indicatori su due colonne, compatti */
@media(max-width:600px){
  .ds-indicatori{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-2)}
  .ds-indicatore{min-height:88px;padding:10px 12px}
  .ds-indicatore-etichetta{font-size:12px;align-items:flex-start}
  .ds-indicatore-valore{font-size:24px}
  .ds-indicatore-nota{font-size:11px}
}

/* UX-004: testi liberi (note, nominativi, descrizioni): a capo automatico anche per parole senza spazi, ritorni a capo originali
   conservati, nessuna uscita dal contenitore. Unicode (accenti, virgolette, emoji) resta com'e'. */
.ds-testo{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;max-width:100%}
.info-box.ds-largo{grid-column:1/-1}
.info-box .ds-testo{font-weight:600;font-size:var(--ds-text-base);display:block}
:where(p,dd,li,h1,h2,h3,h4,summary,small,blockquote){overflow-wrap:anywhere}
/* il contenuto delle pagine va a capo anche con parole lunghissime (proprieta' ereditata da tutti i discendenti) */
main{overflow-wrap:anywhere}

/* UX-005: intestazioni ordinabili (ds-ordina.js). Il pulsante riempie la cella: bersaglio di tocco ampio, focus visibile da tastiera */
th[data-ordina]{padding:0}
th[data-ordina] button.ds-ord{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:4px;width:100%;min-height:44px;padding:8px;cursor:pointer;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;-webkit-tap-highlight-color:transparent}
th[data-ordina].num button.ds-ord,th[data-ordina][data-tipo=numero] button.ds-ord{justify-content:flex-end}
th[data-ordina] button.ds-ord:focus-visible{outline:3px solid var(--ds-focus,#1b6fa8);outline-offset:-3px;border-radius:4px}
th[data-ordina] button.ds-ord:hover{background:rgba(27,111,168,.08)}
th[data-ordina] .ds-ord-ind{display:inline-block;min-width:12px;font-size:11px;color:var(--ds-blue-deep,#0b3f66)}
th[data-ordina][aria-sort=ascending] .ds-ord-ind::after{content:"▲"}
th[data-ordina][aria-sort=descending] .ds-ord-ind::after{content:"▼"}
th[data-ordina][aria-sort=none] .ds-ord-ind::after{content:"↕";opacity:.35}
.ds-ord-mobile{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.ds-ord-mobile.nascosto-ds{display:none}
.ds-ord-mobile label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.ds-ord-mobile select{min-height:44px;font:inherit;padding:0 8px;border:1px solid var(--ds-border-strong,#9fb3c8);border-radius:8px;background:#fff}
.ds-ord-mobile .ds-ord-inv{min-height:44px;min-width:44px;font:inherit;border:1px solid var(--ds-border-strong,#9fb3c8);border-radius:8px;background:#fff;cursor:pointer}

/* =====================================================================
   UX-007 - TABELLE E PULSANTI D'AZIONE
   Causa del difetto "APRI in verticale": la regola ereditata overflow-wrap:anywhere (UX-004, su main) permette di spezzare ovunque, quindi nel calcolo
   automatico delle colonne la larghezza minima di un pulsante o di un codice diventava quella di UN carattere: una colonna con un testo lunghissimo
   lasciava agli altri pochi pixel. Ora: i testi a capo automatico restano, ma i CONTROLLI (pulsanti, intestazioni, etichette di stato) e i dati
   brevi (codici, date, numeri) non si spezzano mai; i testi lunghi hanno un'anteprima a righe limitate (ds-tabelle.js).
   ===================================================================== */
:root{--ds-ico-apri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E")}
main button,main button *,main .ds-btn,main a.apri,main a.ds-btn,main .open,main th,main .stato,main .chip,main .status-ok,main .status-no,main .ds-nw,main .ds-az,
main .badge-free,main .conta,main .interruttore{overflow-wrap:normal;word-break:normal;hyphens:none}
main td button,main td a.apri,main td a.ds-btn,main td .open,main .ds-az button,main .ds-az a{white-space:nowrap;flex:none}
button.open::before,a.apri::before{content:"";flex:none;width:1.05em;height:1.05em;background:currentColor;
  -webkit-mask:var(--ds-ico-apri) center/contain no-repeat;mask:var(--ds-ico-apri) center/contain no-repeat}
a.apri{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2)}
.table-wrap td.ds-nw,.elenco td.ds-nw,.catalogo td.ds-nw{white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
.table-wrap td.ds-az,.elenco td.ds-az,.catalogo td.ds-az{width:1%;white-space:nowrap;text-align:right}
.table-wrap td.ds-az button+button,.elenco td.ds-az button+button{margin-left:var(--ds-space-2)}
.ds-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;min-width:min(12ch,100%);max-width:min(30ch,100%);overflow-wrap:anywhere;line-height:1.35}
.ds-clamp[data-troncato]{cursor:pointer;position:relative;border-radius:4px}
.ds-clamp[data-troncato]:focus-visible{outline:3px solid var(--ds-focus,#1b6fa8);outline-offset:2px}
.ds-clamp[data-troncato]:hover{background:rgba(27,111,168,.06)}
.ds-clamp.aperto{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;max-width:min(56ch,100%);white-space:pre-wrap}
.table-wrap td,.elenco td{padding-top:8px;padding-bottom:8px}
.table-wrap td.ds-testo-lungo,.elenco td.ds-testo-lungo{vertical-align:top;padding-top:10px}
@media(min-width:601px){.table-wrap table{min-width:0}}
@media(max-width:600px){
  .table-wrap td.ds-az,.elenco td.ds-az{width:auto;text-align:left}
  .table-wrap td.ds-az button,.table-wrap td.ds-az a{width:100%}
  .ds-clamp,.ds-clamp.aperto{max-width:100%}
  .table-wrap td.ds-nw{white-space:normal}
}
/* nelle tabelle le parole si spezzano solo a capo-spazio (mai a meta' parola): le parole lunghissime stanno nelle celle ds-clamp */
main table.ds-auto td{overflow-wrap:normal}
main .ds-clamp,main .ds-clamp.aperto{overflow-wrap:anywhere}
@media(max-width:600px){main .table-wrap table.ds-auto td{overflow-wrap:anywhere}}
/* impostazioni DDT (DDT-002): scelte si/no ordinate */

/* UX-008 - controlli di scelta (checkbox, radio) e gruppi di scelte.
   Base a specificita' zero: nessuna pagina eredita piu' larghezza/altezza dei campi di testo; le pagine possono ancora ingrandirli. */
:where(input[type=checkbox]:not([role=switch]),input[type=radio]){
  width:22px;height:22px;flex:0 0 auto;box-sizing:border-box;
  accent-color:var(--ds-blue);cursor:pointer;vertical-align:middle;
}
:where(input[type=checkbox],input[type=radio]):disabled{cursor:not-allowed}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:3px solid #0878b566;outline-offset:2px}
/* gruppo di scelte: una voce per riga, controllo a sinistra, testo a destra, bersaglio tattile >= 44px */
.ds-scelte{grid-column:1/-1;display:block;min-width:0;margin:0 0 4px;padding:10px 14px;border:1px solid var(--ds-border);border-radius:10px}
.ds-scelte>legend{padding:0 6px;font-size:14px;font-weight:800;color:var(--ds-blue-deep)}
.ds-scelte>.meta{margin:2px 0 6px}
.ds-scelta{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:0;padding:10px 4px;
  font-size:15px;font-weight:600;line-height:1.35;color:var(--ds-text);cursor:pointer;overflow-wrap:normal;word-break:normal}
.ds-scelte .ds-scelta{border-top:1px solid var(--ds-border)}
.ds-scelte .ds-scelta:first-of-type{border-top:0}
.ds-scelta input{margin:1px 0 0;width:22px;height:22px;min-height:0;padding:0}
.ds-scelta:focus-within{background:var(--ds-surface-alt);border-radius:8px}
.ds-scelta .meta{display:block;font-weight:400}
@media(min-width:900px){.ds-scelte.in-colonne{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.ds-scelte.in-colonne>legend,.ds-scelte.in-colonne>.meta{grid-column:1/-1}.ds-scelte.in-colonne .ds-scelta:nth-of-type(2){border-top:0}}

/* foto allegate alle richieste (ds-allegati.js) */
.ds-foto-blocco{margin:14px 0}
.ds-foto-titolo{font-weight:700;color:var(--ds-text,#17212b);margin-bottom:8px}
.ds-foto-elenco{display:flex;flex-wrap:wrap;gap:12px}
.ds-foto{display:flex;flex-direction:column;gap:4px;width:150px;text-decoration:none;color:inherit;font-size:12px}
.ds-foto img{width:150px;height:110px;object-fit:cover;border:1px solid var(--ds-border,#d5dde5);border-radius:10px;background:#f2f6fa}
.ds-foto span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-foto-nota{font-size:12px;color:var(--ds-text-muted,#5b6b7c);margin:6px 0 0}