html {
  font-size: 14px;
}

body {
  background-color: var(--page-bg);
  color: var(--body-color);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

/* Syncfusion Grid: bottoni azione non devono evidenziare la cella */
.btn-grid-action {
  position: relative;
  z-index: 1;
}

/* Syncfusion Grid: larghezza piena del contenitore */
.e-grid {
  width: 100% !important;
}

/* Syncfusion Grid: scroll orizzontale solo nel contenuto */
.e-grid .e-gridheader,
.e-grid .e-headercontent {
  overflow-x: hidden !important;
}

.e-grid .e-gridcontent {
  overflow-x: auto !important;
}

.e-grid .e-headercell {
  height: auto !important;
  min-height: 44px;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

.e-grid .e-headercell:not(.e-gridchkbox):not(.e-stackedheadercell),
.e-grid .e-rowcell:not(.e-gridchkbox) {
  min-width: 7.5rem;
}

.e-grid .e-rowcell:has(.dropdown),
.e-grid .e-rowcell.e-gridchkbox,
.e-grid .e-headercell.e-gridchkbox,
.e-grid .e-headercell:has(.e-headertext:empty) {
  min-width: auto;
}

.e-grid .e-headercell .e-headercelldiv,
.e-grid .e-headercell .e-headertext {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

@media (max-width: 991.98px) {
  .e-grid .e-headercell:not(.e-gridchkbox):not(.e-stackedheadercell),
  .e-grid .e-rowcell:not(.e-gridchkbox) {
    min-width: 6.5rem;
  }
}

/* Contenitore per grid a tutta pagina nelle view Index.
   Calcola l'altezza disponibile sottraendo navbar + header di pagina.
   La grid figlio deve avere height="100%". */
.grid-index-full-height {
  height: calc(100vh - var(--navbar-current-height, var(--navbar-height)) - 80px);
}

/* Come .grid-index-full-height, ma per una grid dentro una tab della pagina
   dettaglio: sottrae anche page-header, hr e barra delle tab. */
.grid-tab-full-height {
  height: calc(100vh - var(--navbar-current-height, var(--navbar-height)) - 190px);
}

/* Syncfusion Grid: hover e selezione più evidenti senza schiarire la cella attiva */
.e-grid {
  --grid-row-hover-bg: rgba(13, 110, 253, 0.12);
  --grid-row-selected-bg: rgba(13, 110, 253, 0.18);
}

.e-grid .e-gridcontent .e-row:hover .e-rowcell,
.e-grid .e-gridcontent .e-altrow:hover .e-rowcell {
  background-color: var(--grid-row-hover-bg) !important;
}

.e-grid .e-rowcell.e-focused,
.e-grid .e-rowcell:focus,
.e-grid td.e-focused {
  outline: none !important;
  box-shadow: none !important;
}

.e-grid tr[aria-selected="true"] td,
.e-grid tr[aria-selected="true"] .e-rowcell,
.e-grid tr.e-selectionbackground td,
.e-grid tr.e-selectionbackground .e-rowcell,
.e-grid .e-rowcell.e-selectionbackground,
.e-grid .e-rowcell.e-cellselectionbackground {
  background-color: var(--grid-row-selected-bg) !important;
  color: inherit !important;
}

.e-grid tr[aria-selected="true"] td.e-focused,
.e-grid tr[aria-selected="true"] .e-rowcell.e-focused,
.e-grid tr.e-selectionbackground td.e-focused,
.e-grid tr.e-selectionbackground .e-rowcell.e-focused,
.e-grid .e-rowcell.e-selectionbackground.e-focused,
.e-grid .e-rowcell.e-cellselectionbackground.e-focused,
.e-grid .e-rowcell.e-focused.e-selectionbackground,
.e-grid .e-rowcell.e-focused.e-cellselectionbackground {
  background-color: var(--grid-row-selected-bg) !important;
  color: inherit !important;
}

.e-grid tr[aria-selected="true"]:hover td,
.e-grid tr[aria-selected="true"]:hover .e-rowcell,
.e-grid tr.e-selectionbackground:hover td,
.e-grid tr.e-selectionbackground:hover .e-rowcell {
  background-color: var(--grid-row-selected-bg) !important;
}

/* Syncfusion Grid: la cella della colonna azioni dropdown non deve ritagliare il menu */
.e-grid .e-rowcell:has(.dropdown) {
  overflow: visible !important;
}

/* Syncfusion Grid: il dropdown azioni deve emergere sopra le altre celle */
.e-grid .dropdown-menu {
  z-index: 10050 !important;
}

/* Syncfusion Grid: colonna azioni dropdown centrata (per contenuto, non per posizione:
   se la checkbox e' la prima colonna della griglia, come nelle griglie senza menu azioni
   per riga, non deve ereditare questa regola). */
.e-grid .e-rowcell:has(.dropdown):not(.e-gridchkbox) {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Syncfusion Grid: colonna checkbox — allineamento verticale centro.
   Il markup nativo di Syncfusion (.e-checkbox-wrapper, .e-frame) e' gia' inline-block +
   vertical-align:middle: basta lasciare la cella come table-cell con text-align/vertical-align
   centrati. Forzare display:flex sul wrapper (block-level) romperebbe il vertical-align
   ereditato dalla cella, facendo salire la checkbox in alto. */
.e-grid td.e-gridchkbox,
.e-grid th.e-gridchkbox {
  display: table-cell !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
}
.e-grid td.e-gridchkbox .e-checkbox-wrapper,
.e-grid th.e-gridchkbox .e-headerchkcelldiv,
.e-grid .e-headerchkcelldiv {
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Syncfusion Grid: intestazione colonna — azzerati personalizzazioni padding fluent */
.e-grid.e-device .e-headercell {
    padding: 7px 12px;
}

/* Campi readonly nelle pagine Details — sfondo grigio chiaro per distinguerli dagli editabili */
.page-form-body input[readonly],
.page-form-body textarea[readonly] {
  background-color: var(--bs-secondary-bg, #f8f9fa) !important;
  cursor: default;
  color: var(--bs-body-color);
}
/* Campo readonly che contiene link (es. documenti collegati di una matricola): stesso grigio dei campi
   readonly; i link dentro restano quelli standard (blu, sottolineati) come nelle griglie. */
.page-form-body .form-control.readonly-link-field {
  background-color: var(--bs-secondary-bg, #f8f9fa);
  cursor: default;
}
/* Placeholder nascosto su campi readonly (dettaglio) */
.page-form-body input[readonly]::placeholder,
.page-form-body textarea[readonly]::placeholder {
  color: transparent;
}

/* Griglie "sola lettura" nei documenti (Riepilogo IVA, Referenti/Righe/Allegati in Visualizza):
   stesso sfondo grigio chiaro dei campi readonly qui sopra, per segnalare visivamente che la
   tabella non è modificabile — coerente in tutte le sezioni documento. */
.doc-readonly-grid .e-grid .e-rowcell,
.doc-readonly-grid .e-grid .e-gridcontent,
.doc-readonly-grid .e-grid .e-emptyrow {
  background-color: var(--bs-secondary-bg, #f8f9fa) !important;
}

/* Griglia master-detail (Righe documento, Allegati) annidata dentro una tab documento: la card
   che la contiene eredita già l'inset orizzontale 2rem del .page-form-body ambientale che in
   Documents/Edit.cshtml e Details.cshtml avvolge l'intero blocco tab (diverso dal pattern delle
   altre entità con tab, es. Customers, dove il tab-content non ha un padding ambientale e ogni
   _Tab.cshtml gestisce il proprio inset). Il padding proprio di .doc-grid-panel/.page-list-header/
   .page-form-body qui sotto si sommerebbe a quello ambientale (4rem anziché 2rem), restringendo
   griglia/intestazione/form rispetto alle altre tab (che non hanno questo annidamento): azzerato
   per restare al singolo inset ambientale, uniforme con le altre tab. */
.doc-sections .doc-grid-panel,
.doc-sections .page-list-header.detail-entity-header,
.doc-sections .page-form-body {
  padding-left: 0;
  padding-right: 0;
}
.doc-sections .page-form-hr {
  margin-left: 0;
  margin-right: 0;
}

/* Stesso motivo: il separatore sotto il tab-header (es. sotto "Aggiungi riga" in Righe
   documento, sotto "Aggiungi" in Allegati) ha di suo un margin di 2rem (.tab-pane .page-form-hr,
   definito più sotto in questo stesso file) che si sommerebbe all'inset ambientale già scontato
   qui sopra, accorciandolo rispetto alla griglia/intestazione che lo affiancano. Selettore a tre
   classi (non due come sopra) perché ".tab-pane .page-form-hr" ha la stessa specificità di un
   ipotetico ".doc-sections .page-form-hr" — a parità di specificità vincerebbe l'ultima
   dichiarazione nel file (quella, più sotto), quindi va superata in specificità, non solo
   preceduta nell'ordine. */
.tab-pane .doc-sections .page-form-hr {
  margin-left: 0;
  margin-right: 0;
}

/* Header lista pagina: base per tutte le pagine (index, details, create, edit) */
.page-list-header {
  padding: 1rem var(--page-inset-x);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-top: none;
  border-bottom: none;
}

/* Toast di esito (successo/errore/avviso/info): un solo contenitore fisso, in basso a destra, creato
   da AppToast (site.js). I messaggi TempData di _AlertMessages.cshtml e gli esiti AJAX passano tutti
   da qui. z-index sopra header sticky (900) e modali (1055), sotto i flyout dei menu (10060).
   Il contenitore non intercetta i click: solo i toast sì. I toast nuovi si aggiungono in basso e
   spingono in alto quelli precedenti. Colori pieni (non tenui) e barra di avanzamento per i toast
   che si chiudono da soli, così l'esito si nota anche con la coda dell'occhio. */
.app-toast-container {
  position: fixed;
  right: clamp(1.5rem, 2vw, 2.5rem);
  bottom: clamp(1.5rem, 2vw, 2.5rem);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  /* Responsive: cresce con lo schermo (32% della larghezza tra 34rem e 50rem); sotto i ~37rem di
     viewport occupa tutta la larghezza disponibile meno i margini. */
  width: min(calc(100vw - 3rem), clamp(34rem, 32vw, 50rem));
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  pointer-events: none;
}

.app-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5vw + 0.6rem, 1.4rem);
  min-height: clamp(5rem, 2vw + 2.4rem, 7rem);
  margin: 0;
  padding: clamp(1.25rem, 0.5vw + 1rem, 1.9rem) clamp(1.5rem, 0.8vw + 1.1rem, 2.4rem);
  overflow: hidden;
  border: 0;
  border-radius: 0.6rem;
  font-weight: 500;
  box-shadow: 0 0.6rem 1.75rem rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(110%);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.app-toast.app-toast-show {
  opacity: 1;
  transform: translateX(0);
}

.app-toast-success {
  background-color: var(--bs-success, #198754);
  color: #fff;
}

.app-toast-error {
  background-color: var(--bs-danger, #dc3545);
  color: #fff;
}

.app-toast-warning {
  background-color: var(--bs-warning, #ffc107);
  color: #212529;
}

.app-toast-info {
  background-color: var(--bs-info, #0dcaf0);
  color: #212529;
}

.app-toast a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.app-toast-icon {
  flex: 0 0 auto;
  font-size: clamp(1.75rem, 0.6vw + 1.4rem, 2.4rem);
  line-height: 1;
}

.app-toast-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-toast-close {
  flex: 0 0 auto;
  padding: 0.35rem;
  margin: 0 -0.3rem 0 0;
}

.app-toast-success .app-toast-close,
.app-toast-error .app-toast-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Barra di tempo residuo: si svuota nella durata impostata da AppToast (--app-toast-duration) e si
   ferma insieme al timer quando il mouse è sopra il toast. */
.app-toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.3rem;
  background-color: rgba(255, 255, 255, 0.6);
  transform-origin: left center;
  animation: app-toast-progress var(--app-toast-duration, 4s) linear forwards;
}

.app-toast-warning .app-toast-progress,
.app-toast-info .app-toast-progress {
  background-color: rgba(0, 0, 0, 0.35);
}

.app-toast:hover .app-toast-progress {
  animation-play-state: paused;
}

@keyframes app-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Header nei tab-pane (sedi/dest/banche): bordo superiore sottile */
.tab-pane .page-list-header {
  padding: 0.75rem 2rem;
  min-height: 56px;
  background: transparent;
  border-top: 1px solid var(--border-color);
  border-bottom: none;
  margin-top: 1.5rem;
}

/* Variante trasparente usata nell'header nome entità in Details (nessun bordo, nessun sfondo) */
.page-list-header.detail-entity-header {
  background: transparent;
  border-top: none;
  border-bottom: none;
  padding-bottom: 0.75rem;
  margin-top: 0;
}

/* Pagine con wrapper ".document-page" (Documenti, le anagrafiche multi-tab Articoli/Clienti/
   Fornitori — Views/Articles/Details.cshtml, Customers/Details.cshtml, Suppliers/Details.cshtml —
   e, più in generale, tutte le altre pagine con header azioni: liste/griglia (.index-entity-header,
   es. Views/Articles/Index.cshtml) e le pagine Create/Edit a form singolo che riusano la stessa
   classe sul proprio header): header sticky sotto la navbar fissa, cosi' Salva/Indietro restano
   raggiungibili anche a metà scroll di pagine lunghe (righe, sezioni collassabili, ecc.) senza
   risalire tutta la pagina. */
.document-page .page-list-header.detail-entity-header,
.document-page .page-list-header.index-entity-header {
  position: sticky;
  top: var(--navbar-current-height, var(--navbar-height));
  z-index: 900;
  background: var(--dashboard-bg);
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.15s ease, box-shadow 0.15s ease;
}

/* Separazione visiva solo quando il contenuto ha effettivamente scorso sotto l'header
   (classe aggiunta via JS su scroll), per non mostrare un bordo/ombra piatti a inizio pagina. */
.document-page .page-list-header.detail-entity-header.is-stuck,
.document-page .page-list-header.index-entity-header.is-stuck {
  border-bottom-color: var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

@media (max-width: 991.98px) {
  .page-list-header.detail-entity-header {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }

  .page-header-actions {
    justify-content: flex-end;
  }

  .tab-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 575.98px) {
  .tab-header-actions {
    width: 100%;
  }

  .tab-header-actions .btn,
  .tab-header-actions .btn-group {
    flex: 1 0 auto;
  }
}

.page-list-header h5 {
  color: var(--sidebar-bg);
  font-size: var(--entity-title-size, 20px);
  font-weight: 700;
  line-height: 1.2;
}

/* Bottoni nell'header: ghost flat + leggermente più grandi di btn-sm */
.page-list-header .btn,
.page-list-header .btn.btn-sm {
  font-size: 0.9rem !important;
  padding: 0.4rem 0.85rem !important;
  line-height: 1.5;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--sidebar-bg) !important;
}
.page-list-header .btn i {
  font-size: 0.9rem;
}
.page-list-header .btn:hover,
.page-list-header .btn:focus,
.page-list-header .btn:active {
  background-color: rgba(0, 0, 0, 0.07) !important;
  border-color: transparent !important;
}

.section-print-flyout {
  position: absolute;
  z-index: 1085;
  min-width: 17.5rem;
  max-width: 20rem;
  padding: 0.35rem 0;
}

.section-print-flyout-tree {
  min-width: 17.5rem;
  max-height: min(20rem, 55vh);
  overflow: auto;
}

.section-print-flyout-tree .e-treeview {
  padding: 0.25rem 0;
}

.section-print-flyout-tree .e-list-text {
  font-size: 0.92rem;
}

/* Il padding orizzontale di default del TreeView Syncfusion non corrisponde al px-3 (1rem)
   usato dalle altre righe del flyout (loading/empty/error/"Codice: ..."): senza questo
   allineamento esplicito il nome del template parte più a sinistra della riga "Codice". */
.section-print-flyout-tree .e-list-item > .e-text-content {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.section-print-flyout .alert {
  font-size: 0.875rem;
}

/* Elenco componenti proponibili nel modal di cancellazione a cascata (Articles/Details): con
   distinte profonde può arrivare a decine di righe, quindi scorre in un riquadro di altezza
   fissa invece di allungare il modal fino a coprire la pagina. */
.delete-modal-cascade-list {
  max-height: min(16rem, 45vh);
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

/* Body form pagina create/edit: padding abbondante coerente con page-list-header */
.page-form-body {
  padding: 1.25rem var(--page-inset-x) 2rem var(--page-inset-x);
}

/* Stesso inset orizzontale di .page-list-header/.page-form-body, per elementi "leggeri" (avviso,
   banner) fuori da entrambi — es. tra l'hr di testata e le tab di una pagina Details — che
   altrimenti restano a filo pagina (root .document-page è px-0) invece che allineati al titolo.
   Stessa idea di .mrp-inset, generalizzata: quella resta scoping specifico della pagina MRP. */
.page-banner-inset {
  padding-left: var(--page-inset-x);
  padding-right: var(--page-inset-x);
}

/* Tab-header/hr annidati dentro un pannello dettaglio già paddato (es. scaglioni
   dentro la riga listino): senza questo, il padding orizzontale di .page-list-header
   e il margin di .page-form-hr si sommano a quello del pannello contenitore,
   disallineando "Aggiungi" ecc. rispetto al resto dei campi della sezione. */
.tab-pane .nested-tab-header-flush .page-list-header {
  padding-left: 0;
  padding-right: 0;
}
.tab-pane .nested-tab-header-flush .page-form-hr {
  margin-left: 0;
  margin-right: 0;
}

/* Spazio in fondo ai form con pannelli inline che si aprono a fine pagina
   (es. riga listino + scaglioni): senza questo la pagina non ha margine
   sufficiente per scrollare il pannello appena aperto sopra la piega. */
.pll-scroll-spacer {
  height: 35vh;
}

/* Separatore blu Mechanica */
.page-form-hr {
  border: 0;
  border-top: 2px solid var(--sidebar-bg);
  margin: 0.5rem 2rem 1.25rem 2rem;
  opacity: 1;
}

/* Separatore nei tab-pane: stessa larghezza piena dell'header principale */
.tab-pane .page-form-hr {
  margin: 0 2rem 0.75rem 2rem;
}

/* Margine tra la Syncfusion grid e il pannello di dettaglio sottostante nei tab-pane */
.tab-pane .e-grid {
  margin-bottom: 0.5rem;
}

/* Riduzione spazio mb-4 nelle section dei tab-pane */
.tab-pane .page-form-body .mb-4,
.tab-pane .mb-4 {
  margin-bottom: 1rem !important;
}

/* Nei tab-pane, il form body ha padding top ridotto */
.tab-pane .page-form-body {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

/* Colori testo bottoni ghost flat — override esplicito per ogni variante */
.page-list-header .btn-primary,
.page-list-header .btn-outline-primary {
  color: var(--sidebar-bg) !important;
}
.page-list-header .btn-danger,
.page-list-header .btn-outline-danger {
  color: var(--bs-danger) !important;
}
.page-list-header .btn-warning,
.page-list-header .btn-outline-warning {
  color: var(--bs-warning-text-emphasis, #6c4a00) !important;
}
.page-list-header .btn-success,
.page-list-header .btn-outline-success {
  color: #146c43 !important;
}
.page-list-header .btn-light,
.page-list-header .btn-secondary,
.page-list-header .btn-outline-secondary,
.page-list-header .btn-outline-light {
  color: var(--bs-secondary-color, #6c757d) !important;
}
/* Gruppi di opzioni nell'header (i filtri Stato e Ciclo di Fatturazione elettronica).
   Il "ghost flat" qui sopra toglie bordo e sfondo a OGNI .btn dell'intestazione: applicato a
   un .btn-group il risultato è una fila di parole affiancate, che nessuno riconosce come
   pulsanti né come opzioni — e l'opzione attiva non si distingue dalle altre. Qui il gruppo
   torna a leggersi come un segmented control: bordo intorno, e la scelta corrente evidente.
   Vale solo dentro .btn-group, quindi non tocca i pulsanti singoli dell'header. */
.page-list-header .btn-group > .btn {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
}

.page-list-header .btn-group > .btn:hover,
.page-list-header .btn-group > .btn:focus {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

.page-list-header .btn-group > .btn.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Dropdown toggle nel header: mantiene il colore del testo */
.page-list-header .dropdown-toggle::after {
  vertical-align: middle;
}

/* Flyout laterale per le voci Documenti (Stato / Genera documento): stessa
   logica di apertura e posizionamento del flyout "Stampa" (vedi
   section-print-menu.js / dropdown-submenu-flyout.js). Il trigger è una
   normale .dropdown-item (nessuna freccia): l'apertura a fianco è gestita
   interamente via JS con position: fixed, non da CSS Bootstrap .dropend.
   Mentre è aperto il menu viene spostato sotto <body> (vedi detachToBody in
   dropdown-submenu-flyout.js), quindi la regola non è scoped a un contenitore
   specifico: vale ovunque compaia un trigger, sia nel menu Azioni di Details
   sia nel menu della prima colonna della griglia documenti (Index/_Grid). */
[data-submenu-trigger] {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

/* z-index più alto di ".e-grid .dropdown-menu" (10050 !important, poco sopra) e con !important:
   il trigger del sottomenu può trovarsi dentro una grid Syncfusion (Documents/Index/_Grid.cshtml)
   il cui dropdown "Azioni" padre eredita quella regola. Senza superarlo, il flyout risulta
   comunque presente e posizionato in DOM ma visivamente coperto dal pannello del dropdown padre
   (che ha uno sfondo opaco) — sembra che "non si apra nulla" anche se l'apertura in realtà
   avviene. */
.submenu-flyout {
  position: fixed;
  z-index: 10060 !important;
  min-width: 12rem;
}

/* Ponte hit-test trasparente sullo spazio tra trigger e flyout: il mouseenter
   del menu viene quindi rilevato anche con il padding di separazione. */
.submenu-flyout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 4px;
}
.submenu-flyout.submenu-flyout-opens-left::before {
  right: -4px;
  left: auto;
}

/* Voce di menu disabilitata col motivo nel tooltip (title): Bootstrap le dà pointer-events: none e il
   tooltip nativo non comparirebbe mai, vanificando lo scopo (spiegare perché la voce non è
   utilizzabile). Il pulsante disabilitato non genera comunque click. Solo <button>: un <a> con
   pointer-events attivi resterebbe cliccabile. */
button.dropdown-item:disabled[title] {
  pointer-events: auto;
  cursor: not-allowed;
}

/* Stesso discorso per il bottone d'intestazione disabilitato col motivo nel tooltip (page-header,
   extra-action-disabled): .btn:disabled ha pointer-events: none e il title non comparirebbe. */
.btn.has-disabled-reason:disabled[title] {
  pointer-events: auto;
  cursor: not-allowed;
}

/* Syncfusion Grid: tutte le celle verticalmente al centro */
.e-grid .e-rowcell {
  vertical-align: middle !important;
}

/* Barra di ricerca aggiunta alla toolbar delle data-grid (site.js): allinea sfondo,
   spaziatura e campo di input al layout compatto del resto della griglia. */
.e-grid .e-toolbar {
  min-height: 40px;
  padding: 3px 8px;
  background-color: var(--bs-body-bg, #fff);
  border: 0;
  border-bottom: 1px solid var(--border-color, #dee2e6);
  box-shadow: none;
}

.e-grid .e-toolbar .e-toolbar-items,
.e-grid .e-toolbar .e-toolbar-item {
  background: transparent;
}

.e-grid .e-toolbar .e-search {
  width: min(180px, 100%);
  margin-inline-start: auto;
}

.e-grid .e-toolbar .e-search .e-input-group {
  min-height: 32px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background-color: var(--bs-body-bg, #fff);
  box-shadow: none;
}

.e-grid .e-toolbar .e-search .e-input-group:hover {
  border-color: #cfcfcf;
}

.e-grid .e-toolbar .e-search .e-input-group:focus-within {
  border-color: #c8c8c8;
  box-shadow: none;
}

.e-grid .e-toolbar .e-search .e-input {
  height: 30px;
  padding: 3px 7px;
  font: inherit;
  font-size: 0.875rem;
  text-transform: none;
}

.e-grid .e-toolbar .e-search .e-input::placeholder {
  text-transform: none;
}

.e-grid .e-toolbar .e-search .e-input-group-icon {
  min-width: 28px;
  color: var(--entity-primary, var(--bs-primary));
}

/* Syncfusion Grid: riga disabilitata — opacizza tutte le celle eccetto
   la 1ª (dropdown azioni) e la 2ª (checkbox selezione).
   Uso: aggiungere la classe .row-disabled alla <tr> tramite rowDataBound.
   Richiamato da bindGridRowDisabled() in site.js. */
.e-grid tr.row-disabled td:not(:nth-child(1)):not(:nth-child(2)) {
  opacity: 0.45;
}

/* Dimensioni titolo/sottotitolo pagina company (customer/supplier/article) */
:root {
  --entity-title-size: 20px;
  --entity-subtitle-size: 13px;
}

/* Fix gap mobile tra sezioni colonne stacked */
@media (max-width: 991.98px) {
  /* Riduce il gap del row quando le colonne lg si impilano verticalmente */
  .page-form-body .row.g-4 {
    --bs-gutter-y: 0.5rem;
  }
  .col-lg-6 .mb-4 {
    margin-bottom: 1rem !important;
  }
}

/* Tabs company: su mobile scrollabili e non centrate */
@media (max-width: 767.98px) {
  .entity-tabs {
    justify-content: flex-start;
  }
  .entity-tabs .nav-link {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* Bootstrap Modal: z-index superiore a Syncfusion grid */
.modal-backdrop {
  z-index: 10000 !important;
}
.modal {
  z-index: 10001 !important;
}

/* Custom file input: hide native input and show localized wrapper */
.custom-file-wrapper {
  position: relative;
}
.custom-file-wrapper input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.custom-file-wrapper .custom-file-display {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  background: #fff;
  overflow: hidden;
}
.custom-file-wrapper .custom-file-btn {
  padding: 0.375rem 0.75rem;
  background: var(--file-input-btn-bg);
  border-right: 1px solid var(--border-color);
  white-space: nowrap;
  font-size: 1rem;
}
.custom-file-wrapper .custom-file-text {
  padding: 0.375rem 0.75rem;
  color: var(--file-input-text-color);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Syncfusion Grid: responsive / mobile ───────────────────────── */
@media (max-width: 767.98px) {
  .e-grid .e-gridcontent {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .e-grid .e-gridheader,
  .e-grid .e-headercontent {
    overflow-x: hidden;
  }

  .e-grid .e-rowcell,
  .e-grid .e-headercell {
    padding: 6px 8px !important;
    font-size: 0.85rem;
  }
  .e-grid .e-pager {
    font-size: 0.8rem;
  }
  .e-grid .e-pager .e-numericcontainer {
    gap: 2px;
  }
  .e-grid .e-toolbar {
    min-height: auto;
    padding: 4px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Entity detail — Tab navigation
══════════════════════════════════════════════════════════════════ */

.entity-tabs {
    background: transparent;
    border-bottom: none;
    padding: 0 0 0.5rem 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: safe center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    gap: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.entity-tabs::-webkit-scrollbar {
    display: none;
}

.entity-tabs .nav-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-bg) !important;
  border-radius: 20px;
  white-space: nowrap;
  padding: 6px 16px;
  border: 1.5px solid rgba(6, 97, 171, 0.35);
  background: transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: none;
}

.entity-tabs .nav-link.active {
  color: #fff !important;
  background: var(--sidebar-bg) !important;
  border-color: var(--sidebar-bg) !important;
  box-shadow: 0 2px 8px rgba(6, 97, 171, 0.25) !important;
}

.entity-tabs .nav-link:hover:not(.active) {
  background-color: rgba(6, 97, 171, 0.08) !important;
  border-color: var(--sidebar-bg) !important;
}

/* Viste della Timeline (Commessa): tre voci per la stessa tab. La voce corrente resta "active"
   per Bootstrap (gli serve per nascondere il pannello al cambio tab) ma senza l'evidenziazione
   blu, così la tendina è uguale a quella di "Altro". */
.entity-tabs .dropdown-item[data-timeline-view].active {
  color: var(--bs-dropdown-link-color);
  background-color: transparent;
}

.entity-tabs .dropdown-item[data-timeline-view].active:hover,
.entity-tabs .dropdown-item[data-timeline-view].active:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}

/* Tab-content: nessun bordo laterale, continuità visiva */
.entity-tab-content {
  border: none;
  padding-top: 0;
}

/* Prima tab-pane attiva: padding top per staccarsi dalla tab bar */
.entity-tab-content .tab-pane {
  padding-top: 1rem;
}

/* ══════════════════════════════════════════════════════════════════
   Entity detail — Titolo / sottotitolo
══════════════════════════════════════════════════════════════════ */

.entity-page-title {
  font-size: var(--entity-title-size, 20px);
  font-weight: 700;
  color: var(--sidebar-bg);
  line-height: 1.2;
}

.entity-page-subtitle {
  font-size: var(--entity-subtitle-size, 13px);
  color: var(--body-color-secondary);
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════
   Entity detail — Tabelle interne (Bootstrap table compatta)
══════════════════════════════════════════════════════════════════ */

.entity-table {
  font-size: 12px;
  margin-bottom: 0;
}

.entity-table thead th {
  background-color: var(--bs-secondary-bg, #f8f9fa);
  font-weight: 600;
  font-size: 11px;
  color: var(--body-color-secondary);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  padding: 6px 8px;
}

.entity-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}

.entity-table tbody tr:hover {
  background-color: var(--entity-row-hover);
}

.entity-table .row-selected {
  background-color: var(--entity-row-selected) !important;
}

/* Indentazione righe figlio BOM */
.entity-table .row-child-1 td:nth-child(2) { padding-left: 28px; }
.entity-table .row-child-2 td:nth-child(2) { padding-left: 52px; }
.entity-table .row-child-3 td:nth-child(2) { padding-left: 76px; }

.entity-expand-icon {
  font-size: 10px;
  color: var(--body-color-secondary);
  cursor: pointer;
  margin-right: 4px;
  transition: transform 0.15s;
  display: inline-block;
}

.entity-expand-icon.expanded {
  transform: rotate(90deg);
}

/* ══════════════════════════════════════════════════════════════════
   Entity detail — Link colorati nelle griglie
══════════════════════════════════════════════════════════════════ */

.entity-link-red   { color: var(--entity-accent-red);   cursor: pointer; }
.entity-link-green { color: var(--entity-accent-green);  cursor: pointer; }
.entity-link-teal  { color: var(--entity-accent-teal);   cursor: pointer; }

.entity-link-red:hover,
.entity-link-green:hover,
.entity-link-teal:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════
   Entity detail — Paginazione compatta (Bootstrap table)
══════════════════════════════════════════════════════════════════ */

.entity-pagination .page-link {
  font-size: 11px;
  color: var(--entity-primary);
  padding: 3px 8px;
}

.entity-pagination .page-item.active .page-link {
  background-color: var(--entity-primary);
  border-color: var(--entity-primary);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   Entity detail — Pannello dettaglio (separatore + header)
══════════════════════════════════════════════════════════════════ */

.entity-detail-separator {
  border-top: 2px solid var(--entity-primary-light);
}

.entity-tab-body {
  padding: 16px;
  background: #fff;
  font-size: 13px;
}

.entity-tab-body .form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--body-color-secondary);
  margin-bottom: 2px;
}

.entity-tab-body .form-control,
.entity-tab-body .form-select {
  font-size: 13px;
}


/* ══════════════════════════════════════════════════════════════════
   TomSelect — allineamento verticale e altezza coerente con .form-control-sm
══════════════════════════════════════════════════════════════════ */

/* Il wrapper TomSelect deve avere la stessa altezza del form-control-sm.
   .form-control-sm copre i campi TomSelect costruiti su un <input> anziché un <select> (es.
   Codice articolo/Descrizione riga documento, che ammettono anche testo libero): senza queste
   regole anche per quella variante, il campo si presenta con un'altezza diversa prima/dopo
   l'inserimento di un valore (nessuna voce selezionata → controllo "vuoto" più basso, valore
   selezionato → pill dell'item con padding proprio più alto), disallineandosi dagli altri campi. */
.ts-wrapper.form-select-sm,
.ts-wrapper.form-control-sm {
  padding: 0 !important;
  height: auto !important;
}

/* Il controllo visibile (singolo valore selezionato) deve allinearsi come un input */
.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.form-control-sm .ts-control {
  min-height: calc(1.5em + 0.5rem + 2px) !important; /* uguale a form-control-sm */
  padding: 0.25rem 2rem 0.25rem 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* L'opzione vuota nel dropdown non deve collassare a un'altezza minima */
.ts-dropdown .ts-dropdown-content .option:empty,
.ts-dropdown .ts-dropdown-content .option[data-value=""] {
  min-height: 2.5rem !important;
  line-height: 2.5rem !important;
  display: block !important;
}

/* -- Details sections ----------------------------------- */
.details-section-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-bg);
  padding-top: 0.5rem;
  padding-bottom: 8px;
  margin-bottom: 0.75rem;
}

/* Azioni nell'intestazione di una sezione (es. "Aggiungi" sopra la griglia): stessi pulsanti ghost flat
   dell'intestazione di pagina (.page-list-header .btn: Salva, Indietro) — stessa dimensione, peso e colore —
   con meno padding verticale per non gonfiare la riga del titolo, e senza il maiuscolo/grassetto/spaziatura
   del titolo che altrimenti erediterebbero. */
.details-section-header .btn,
.details-section-header .btn.btn-sm {
  font-size: 0.9rem !important;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.2rem 0.85rem !important;
  line-height: 1.5;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--sidebar-bg) !important;
}
.details-section-header .btn i {
  font-size: 0.9rem;
}
.details-section-header .btn:hover,
.details-section-header .btn:focus,
.details-section-header .btn:active {
  background-color: rgba(0, 0, 0, 0.07) !important;
  border-color: transparent !important;
}

/* Barra azioni sopra una griglia/sezione fuori da .page-list-header e .details-section-header
   (es. "Aggiungi referente" / "Rimuovi" nella sezione Generalità del documento): stessi pulsanti
   ghost flat di Salva/Indietro, con il colore per variante dell'intestazione di pagina (blu primario,
   rosso per le azioni distruttive, grigio per le neutre). Senza questa classe un .btn-outline-* resta
   un pulsante con bordo, diverso da tutti gli altri del sistema. */
.ghost-actions .btn,
.ghost-actions .btn.btn-sm {
  font-size: 0.9rem !important;
  font-weight: 400;
  padding: 0.2rem 0.85rem !important;
  line-height: 1.5;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--sidebar-bg) !important;
}
.ghost-actions .btn i {
  font-size: 0.9rem;
}
.ghost-actions .btn:hover,
.ghost-actions .btn:focus,
.ghost-actions .btn:active {
  background-color: rgba(0, 0, 0, 0.07) !important;
  border-color: transparent !important;
}
.ghost-actions .btn-danger,
.ghost-actions .btn-outline-danger {
  color: var(--bs-danger) !important;
}
.ghost-actions .btn-warning,
.ghost-actions .btn-outline-warning {
  color: var(--bs-warning-text-emphasis, #6c4a00) !important;
}
.ghost-actions .btn-success,
.ghost-actions .btn-outline-success {
  color: #146c43 !important;
}
.ghost-actions .btn-light,
.ghost-actions .btn-secondary,
.ghost-actions .btn-outline-secondary,
.ghost-actions .btn-outline-light {
  color: var(--bs-secondary-color, #6c757d) !important;
}
.ghost-actions .btn:disabled,
.ghost-actions .btn.disabled {
  opacity: 0.5;
}

/* Riduce il gap tra sezioni details consecutive */
.page-form-body .mb-4 + .mb-4 .details-section-header {
  margin-top: 0.5rem;
}
.page-form-body .mb-4 {
  margin-bottom: 1.75rem !important;
}

/* Badge anagrafica attiva — integrato nel details-section-header */
.company-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
.company-active-badge .badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.btn-xs {
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 4px;
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .border-start-xl {
    border-left: 1px solid #dee2e6 !important;
  }
}

/* ── BOM Grid: colori per livello ──────────────────────────────────────────── */
/* La classe bom-level-N viene aggiunta via rowDataBound (ciclo su 7 livelli:
   oltre la profondità 7 il colore si ripete, distinguibilità > numero di tinte) */
.e-grid tr.bom-level-1 td { background-color: var(--bom-level-1) !important; }
.e-grid tr.bom-level-2 td { background-color: var(--bom-level-2) !important; }
.e-grid tr.bom-level-3 td { background-color: var(--bom-level-3) !important; }
.e-grid tr.bom-level-4 td { background-color: var(--bom-level-4) !important; }
.e-grid tr.bom-level-5 td { background-color: var(--bom-level-5) !important; }
.e-grid tr.bom-level-6 td { background-color: var(--bom-level-6) !important; }
.e-grid tr.bom-level-7 td { background-color: var(--bom-level-7) !important; }

/* Riga selezionata: sovrascrive il colore livello mantenendo la selezione visibile */
.e-grid tr.bom-level-1.e-selectionbackground td,
.e-grid tr.bom-level-2.e-selectionbackground td,
.e-grid tr.bom-level-3.e-selectionbackground td,
.e-grid tr.bom-level-4.e-selectionbackground td,
.e-grid tr.bom-level-5.e-selectionbackground td,
.e-grid tr.bom-level-6.e-selectionbackground td,
.e-grid tr.bom-level-7.e-selectionbackground td { background-color: var(--entity-row-selected) !important; }

/* ── Griglia ad albero "Revisioni" articolo: Revisione (livello 1) + sue Modifiche
   rapide (livello 2), stesso meccanismo di indentazione via rowDataBound della BOM. */
.e-grid tr.revtree-level-2 td { color: var(--text-muted); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════
   Documento — Sezione "Marginalità" (card KPI)
══════════════════════════════════════════════════════════════════ */

.doc-margin-card {
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--entity-primary);
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.doc-margin-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.doc-margin-card__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--entity-primary-light);
  color: var(--entity-primary);
  font-size: 15px;
  margin-bottom: 8px;
}

.doc-margin-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--body-color-secondary);
  margin-bottom: 4px;
}

.doc-margin-card__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--body-color);
  line-height: 1.1;
}

.doc-margin-card__unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--body-color-secondary);
  margin-left: 2px;
}

/* Semaforo del margine */
.doc-margin-card.is-positive { border-left-color: var(--entity-accent-green); }
.doc-margin-card.is-positive .doc-margin-card__icon { background-color: #e6f5ec; color: var(--entity-accent-green); }
.doc-margin-card.is-positive .doc-margin-card__value { color: var(--entity-accent-green); }

.doc-margin-card.is-warning { border-left-color: #b7791f; }
.doc-margin-card.is-warning .doc-margin-card__icon { background-color: #fdf3e2; color: #b7791f; }
.doc-margin-card.is-warning .doc-margin-card__value { color: #b7791f; }

.doc-margin-card.is-negative { border-left-color: var(--entity-accent-red); }
.doc-margin-card.is-negative .doc-margin-card__icon { background-color: #fbeae8; color: var(--entity-accent-red); }
.doc-margin-card.is-negative .doc-margin-card__value { color: var(--entity-accent-red); }

/* ══════════════════════════════════════════════════════════════════
   Documento — Sezione "Documenti collegati" (albero gerarchico del flusso)
══════════════════════════════════════════════════════════════════ */

.doc-flow-tree,
.doc-flow-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-flow-tree {
  padding: 4px 0 4px 4px;
}

/* Ogni livello di discendenza rientra e porta con sé la propria linea di connessione. */
.doc-flow-children {
  padding-left: 34px;
  margin-top: 10px;
}

.doc-flow-node {
  position: relative;
}

.doc-flow-children > .doc-flow-node {
  padding-bottom: 10px;
}

.doc-flow-children > .doc-flow-node:last-child {
  padding-bottom: 0;
}

/* Tronco verticale che collega i fratelli all'interno dello stesso gruppo di figli */
.doc-flow-children > .doc-flow-node::before {
  content: "";
  position: absolute;
  top: 0;
  left: -21px;
  bottom: 0;
  width: 2px;
  background-color: var(--border-color);
}

/* L'ultimo fratello non prosegue oltre il proprio nodo (niente linea "a vuoto" sotto) */
.doc-flow-children > .doc-flow-node:last-child::before {
  bottom: auto;
  height: 15px;
}

/* Diramazione orizzontale dal tronco al marker del nodo */
.doc-flow-children > .doc-flow-node::after {
  content: "";
  position: absolute;
  top: 13px;
  left: -21px;
  width: 21px;
  height: 2px;
  background-color: var(--border-color);
}

.doc-flow-node-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
}

/* Slot sempre presente (vuoto per i nodi senza figli) così i marker restano allineati
   in colonna a prescindere dal fatto che un fratello abbia o meno il toggle di collapse. */
.doc-flow-toggle-slot {
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-flow-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  color: var(--body-color-secondary);
  cursor: pointer;
}

.doc-flow-toggle:hover { background-color: var(--page-bg); }

.doc-flow-toggle i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* Bootstrap aggiunge/rimuove .collapsed sul trigger in base allo stato del target */
.doc-flow-toggle.collapsed i { transform: rotate(-90deg); }

.doc-flow-marker {
  position: relative;
  z-index: 1;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid var(--border-color);
  color: var(--body-color-secondary);
  font-size: 13px;
}

.doc-flow-node.is-descendant .doc-flow-marker {
  border-color: var(--entity-accent-teal);
  color: var(--entity-accent-teal);
}

.doc-flow-node.is-current .doc-flow-marker {
  border-color: var(--entity-primary);
  background-color: var(--entity-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--entity-primary-light);
}

/* Card di un documento "normale" (antenato o discendente): sempre bianca/neutra. */
.doc-flow-card,
.doc-flow-card--current {
  flex: 1 1 auto;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease;
}

.doc-flow-card:hover,
.doc-flow-card--current:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07); }

/* Card del documento corrente: unica card con accento azzurrino, classe dedicata invece di
   un modificatore su .doc-flow-node per evitare qualunque ambiguità di specificità/cascata. */
.doc-flow-card--current {
  border-color: var(--entity-primary);
  background-color: var(--entity-primary-light);
}

.doc-flow-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.doc-flow-type {
  font-size: 13px;
  font-weight: 700;
  color: var(--body-color);
}

.doc-flow-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 10px;
}

.doc-flow-tag--current {
  background-color: var(--entity-primary);
  color: #fff;
}

.doc-flow-tag--root {
  background-color: #fdf3e2;
  color: #b7791f;
}

.doc-flow-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

.doc-flow-code a,
.doc-flow-code span {
  font-size: 13px;
  font-weight: 600;
  color: var(--entity-primary);
  text-decoration: none;
}

.doc-flow-code a:hover { text-decoration: underline; }

.doc-flow-node.is-current .doc-flow-code span { color: var(--body-color); }

.doc-flow-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--body-color-secondary);
}

.doc-flow-total { font-weight: 600; color: var(--body-color); }

/* Cronostoria delle revisioni (v. piano-revisione-documenti.md): riga con le revisioni dello stesso
   documento, ciascuna cliccabile, e tag "da Rev. N" sui documenti generati da una revisione. */
.doc-flow-revisions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--body-color-secondary);
}

.doc-flow-revision-chip {
  padding: 1px 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background-color: var(--page-bg);
  color: var(--body-color-secondary);
  text-decoration: none;
}

a.doc-flow-revision-chip:hover { border-color: var(--entity-primary); color: var(--entity-primary); }
.doc-flow-revision-chip--superseded { text-decoration: line-through; }
.doc-flow-revision-chip--current { border-color: var(--entity-primary); color: var(--entity-primary); font-weight: 600; }
.doc-flow-revision-chip--viewing { background-color: var(--entity-primary); border-color: var(--entity-primary); color: #fff; }

.doc-flow-tag--revision { background-color: #fff3cd; color: #7a5c00; }
.doc-flow-tag--from-revision { border: 1px solid var(--border-color); background-color: var(--page-bg); color: var(--body-color-secondary); }

.doc-flow-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background-color: var(--page-bg);
  color: var(--body-color-secondary);
  font-size: 13px;
}

.doc-flow-empty i { font-size: 18px; color: var(--body-color-secondary); }

/* ══════════════════════════════════════════════════════════════════
   Commessa — Tab "Tempi": barre percentuali del report (fase/operatore)
══════════════════════════════════════════════════════════════════ */
.report-progress { height: 8px; }

/* ══════════════════════════════════════════════════════════════════
   Documento — Edit/Details: sezioni collassabili (accordion) compatte
   Scope: solo dentro .doc-sections (Views/Documents/Edit.cshtml e Details.cshtml),
   non tocca .form-control/.form-label usati nel resto dell'app.
══════════════════════════════════════════════════════════════════ */

.doc-sections {
  display: flex;
  flex-direction: column;
}

.doc-section + .doc-section {
  margin-top: 0.5rem;
}

.doc-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0 6px 0;
  margin-bottom: 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--entity-primary-light);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--entity-primary);
  transition: border-color 0.15s ease;
}

.doc-section-header:hover {
  border-bottom-color: var(--entity-primary);
}

.doc-section-header:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.doc-section-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.doc-section-header-title i {
  font-size: 14px;
  color: var(--entity-primary);
}

.doc-section-chevron {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--body-color-secondary);
  transition: transform 0.2s ease;
}

.doc-section-header[aria-expanded="true"] .doc-section-chevron {
  transform: rotate(180deg);
}

.doc-section-body {
  padding: 0 0 0.5rem 0;
}

/* Compattazione campi form dentro le sezioni collassabili dell'Edit documento */
.doc-sections .row.g-3 {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.45rem;
}

.doc-sections .mb-4 {
  margin-bottom: 0 !important;
}

.doc-sections .form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--body-color-secondary);
  margin-bottom: 0.15rem;
}

.doc-sections .form-control,
.doc-sections .form-select {
  font-size: 13px;
  padding: 0.28rem 0.55rem;
}

/* I bottoni negli input-group (es. numeratore/data documento) non erano coperti
   dalla compattazione sopra: restando alla dimensione Bootstrap di default,
   il flex layout dell'input-group stirava l'input accanto per adattarsi
   all'altezza del bottone, rendendolo più grande degli altri campi. */
.doc-sections .input-group .btn {
  font-size: 13px;
  padding: 0.28rem 0.55rem;
}

.doc-sections textarea.form-control {
  min-height: auto;
}

/* Sotto-titoli interni (es. "Indirizzo di spedizione", "Totali in valuta", "Stato fattura
   elettronica"): .entity-subsection-title non aveva mai avuto uno stile proprio in tutta
   l'app. Uniformato alla stessa tipografia dell'intestazione di sezione (.doc-section-header:
   stessa dimensione/peso/colore/bordo) così non risulta più "diverso" dal resto — resta senza
   cursore/freccia perché non è cliccabile. Esclusa la sezione Righe documento (vedi sotto): i
   suoi sotto-titoli "Castelletto IVA"/"Riepilogo" restano invariati per vincolo. */
.doc-sections .entity-subsection-title,
.page-form-body .entity-subsection-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--entity-primary);
  margin-top: 0.75rem;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--entity-primary-light);
}

.doc-sections .entity-subsection-title i,
.page-form-body .entity-subsection-title i {
  font-size: 14px;
  color: var(--entity-primary);
}

.doc-sections .document-lines .entity-subsection-title {
  display: block;
  gap: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.doc-sections .document-lines .entity-subsection-title i {
  font-size: inherit;
  color: inherit;
}

.doc-sections .alert {
  margin-bottom: 0;
}

/* Eccezione alla regola sopra: l'avviso "righe non modificabili" è il primo elemento dentro
   .document-lines, quindi il suo spazio sopra è già dato dal padding-top del tab-pane (1rem,
   .entity-tab-content .tab-pane) — margin-bottom: 0 lo lascerebbe invece a contatto diretto con
   la tabella sottostante, con uno spazio superiore ma nessuno inferiore. 1rem sotto pareggia i due
   lati sullo stesso ritmo di spaziatura già usato in questo contesto (v. .tab-pane .page-form-body). */
.doc-sections .alert.document-lines-readonly-notice {
  margin-bottom: 1rem;
}

body.theme-dark .doc-section-header {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

body.theme-dark .doc-section-header:hover {
  border-bottom-color: var(--entity-primary);
}

/* ── Info hint icon (Views/Shared/_InfoHint.cshtml) ─────────────────────────── */
.info-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1;
  cursor: help;
}

.info-hint-icon:hover,
.info-hint-icon:focus-visible {
  color: var(--entity-primary);
}

/* ── Icona "revisione sostituita" (Views/ProductionOrders/Lines/_Scripts.cshtml) ──
   Stesso ASPETTO di .info-hint-icon, ma classe propria invece di riusare quella: .info-hint-icon è
   agganciata a un listener di click globale in _InfoHintModal.cshtml che apre SEMPRE il modale
   generico "info hint" per qualunque elemento con quella classe, a prescindere da un onclick
   proprio — riusarla qui apriva anche quel modale in più, sopra al nostro (due modali assieme). */
.revision-override-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1;
  cursor: pointer;
}

.revision-override-icon:hover,
.revision-override-icon:focus-visible {
  color: var(--entity-primary);
}


/* ── Miniatura articolo in griglie e selettori (partial _ArticleImageTemplate, site.js) + anteprima a dimensione reale ── */
.grid-article-thumb {
  height: 32px;
  max-width: 56px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 3px;
  cursor: zoom-in;
}

/* Voce di selettore con miniatura (combobox articolo): miniatura + testo; il segnaposto tiene
   la stessa larghezza per gli articoli senza immagine. */
.article-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-thumb-placeholder {
  display: inline-block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.article-select-item .grid-article-thumb {
  flex: 0 0 auto;
}

#gridImagePreview {
  position: fixed;
  z-index: 20000;
  display: none;
  pointer-events: none;
  padding: 4px;
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: 4px;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

#gridImagePreview img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
}

.production-order-external-processing-qty {
  max-width: 120px;
}

/* Riga "Ordina da fornitore" (header + righe generate via JS in openGenerateSupplierOrderModal,
   v. Lines/_Scripts.cshtml): stesse tre colonne (componente/fornitore/qty) su header e righe, con
   larghezza fissa sulle ultime due — è quanto garantisce che le etichette restino allineate sopra
   il rispettivo select/input invece di scivolare per via di justify-content-between su elementi di
   larghezza diversa tra header e righe. */
.production-order-supplier-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.production-order-col-component {
  flex: 1 1 auto;
  min-width: 0;
}

.production-order-col-supplier {
  flex: 0 0 220px;
  max-width: 220px;
}

.production-order-col-qty {
  flex: 0 0 110px;
  max-width: 110px;
}

@media (max-width: 575.98px) {
  /* Sotto i 576px il modal-lg diventa a piena larghezza ma le tre colonne a larghezza fissa
     non ci stanno più affiancate: si passa ad andare a capo, con fornitore/qty a metà riga
     ciascuno invece che su un'unica riga stretta e illeggibile. */
  .production-order-supplier-row {
    flex-wrap: wrap;
    row-gap: .375rem;
  }

  .production-order-col-component {
    flex-basis: 100%;
  }

  .production-order-col-supplier,
  .production-order-col-qty {
    flex: 1 1 45%;
    max-width: none;
  }
}

/* ===== Pagina di errore (404 / 500) ===== */
/* Variante anonima (login/pubblico): card centrata a schermo intero, come Auth/AccessDenied.cshtml */
.error-page-wrapper {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--mechanica-overlay-bg);
  padding: 1.5rem;
}

.error-page-card {
  width: 100%;
  max-width: 440px;
  border-radius: 1rem;
  overflow: hidden;
}

/* Variante autenticata: dentro .page-form-body, stesso contenitore usato dalle
   pagine del gestionale (es. PaymentTerms/Create), nessuna card. */
.error-page-body {
  max-width: 440px;
  margin: 3rem auto;
}

.error-page-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.error-page-icon--404 {
  color: var(--mechanica-blue);
}

.error-page-icon--500 {
  color: #e67e00;
}

.error-page-code {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--body-color-secondary);
  margin-bottom: .5rem;
}

.error-page-request-id {
  font-size: .75rem;
  color: var(--body-color-secondary);
}

/* ===== Commessa: righe Ordine Cliente già coperte da un Ordine di Produzione ===== */
/* Non riselezionabili per una nuova generazione (WorkOrders/OrdiniCliente/_Tab.cshtml) */
.wo-line-in-production {
  color: var(--body-color-secondary);
}

.wo-line-in-production .e-checkbox-wrapper.e-checkbox-disabled {
  opacity: .35;
  pointer-events: none;
}

/* Righe di un ordine Revisionato (WorkOrders/OrdiniCliente/_Tab.cshtml, v. piano-revisione-documenti.md):
   restano in vista ma disabilitate — grigie come ogni riga .row-disabled (qui aggiunta da rowDataBound,
   che lascia piena la sola miniatura: seconda colonna, come la 1ª è la checkbox), senza link e non
   selezionabili; niente barrato: bastano il badge "Rev. N" grigio e la colonna "Variazione". La riga
   della revisione nuova compare sotto. */
.e-grid tr.wo-line-superseded td:nth-child(2) {
  opacity: 0.45;
}

.wo-line-superseded .e-checkbox-wrapper.e-checkbox-disabled {
  opacity: .35;
  pointer-events: none;
}

/* Badge dello stato di una revisione ordine (colonna "Rev. ordine" e relativa legenda,
   WorkOrders/OrdiniCliente/_Tab.cshtml): in uso, sostituita, bozza, annullata. */
.wo-revision-state {
  border: 1px solid transparent;
  font-weight: 600;
}

.wo-revision-state--active {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  color: var(--bs-success-text-emphasis);
}

.wo-revision-state--superseded {
  background-color: var(--bs-secondary-bg-subtle);
  border-color: var(--bs-secondary-border-subtle);
  color: var(--bs-secondary-text-emphasis);
}

.wo-revision-state--draft {
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
  color: var(--bs-warning-text-emphasis);
}

.wo-revision-state--cancelled {
  background-color: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
  color: var(--bs-danger-text-emphasis);
}

/* Legenda dei colori del badge "Rev. ordine", sotto la griglia. */
.wo-revision-legend {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  color: var(--body-color-secondary);
}

.wo-revision-legend-title {
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--entity-primary);
}

.wo-revision-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.wo-revision-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== Dashboard: modale «Aggiungi widget» (Views/Dashboard/Index.cshtml) ===== */
/* Passo 1: un riquadro per area; passo 2: un pulsante per widget dell'area scelta. */
.dw-catalog-item {
  width: 100%;
  text-align: left;
}

.dw-catalog-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  min-height: 5.5rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background-color: var(--bs-body-bg);
  color: inherit;
  text-align: center;
}

.dw-catalog-category:hover,
.dw-catalog-category:focus-visible {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-primary);
}

.dw-catalog-category > i {
  font-size: 1.5rem;
}

.dw-catalog-category-name {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}

.dw-catalog-category-count {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* ===== Dashboard: contenitore dei grafici (Views/Dashboard/_PieWidget.cshtml, _BarWidget.cshtml) ===== */
.dashboard-widget-chart {
  min-height: 150px;
  position: relative;
}

/* La chart a colonne fissa la propria altezza sul contenitore: senza overflow nascosto il flex item
   non potrebbe rimpicciolirsi quando l'utente restringe il pannello. */
.dashboard-widget-bar .dashboard-widget-chart {
  min-width: 0;
  overflow: hidden;
}

/* ===== Dashboard: widget "a indicatori" (Views/Dashboard/_KpiWidget.cshtml) ===== */
.dashboard-widget-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
  align-content: start;
  min-height: 0;
}

.dashboard-widget-kpi-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bs-border-color);
  border-left-width: 4px;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
}

/* Filetto di colore a sinistra: lo stesso colore Bootstrap del valore (KpiWidgetItem.Variant). */
.dashboard-widget-kpi-tile-primary { border-left-color: var(--bs-primary); }
.dashboard-widget-kpi-tile-secondary { border-left-color: var(--bs-secondary); }
.dashboard-widget-kpi-tile-success { border-left-color: var(--bs-success); }
.dashboard-widget-kpi-tile-info { border-left-color: var(--bs-info); }
.dashboard-widget-kpi-tile-warning { border-left-color: var(--bs-warning); }
.dashboard-widget-kpi-tile-danger { border-left-color: var(--bs-danger); }

a.dashboard-widget-kpi-tile:hover {
  background-color: var(--bs-tertiary-bg);
  color: inherit;
}

.dashboard-widget-kpi-tile.disabled {
  pointer-events: none;
}

.dashboard-widget-kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-widget-kpi-label {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* ===== Dashboard: widget "a lista" (Views/Dashboard/_ListWidget.cshtml) ===== */
.dashboard-widget-list .list-group {
  min-height: 0;
}

.dashboard-widget-list .list-group-item.disabled {
  pointer-events: none;
  color: inherit;
}

.dashboard-widget-list-footer {
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   Piano di approvvigionamento (MRP) — Views/Documents/MrpPlan.cshtml
   Sostituisce la griglia sog* (generazione ordini fornitore da albero BOM):
   qui una riga è un ARTICOLO (o una sua proposta d'ordine a una certa data),
   non un nodo di distinta, quindi niente colore/rientro per livello — la
   gerarchia si legge dal drill-down "Perché serve", non dalla griglia.
   Piano completo: _Support/Docs/Purchasing/piano-mrp-approvvigionamento.md
══════════════════════════════════════════════════════════════════ */

/* ── Impaginazione a tutta altezza ──
   Le pagine Index usano .grid-index-full-height, un calc() che sottrae navbar + intestazione: lì
   funziona perché la griglia segue subito l'intestazione. Qui no — sopra la griglia ci sono anche
   la fascia di riepilogo e la riga delle opzioni (~125px che quel calc non conosce, da cui lo
   sfondamento oltre il fondo pagina), e soprattutto i banner errore/successo/vuoto che compaiono e
   spariscono a runtime: qualunque numero fisso sarebbe sbagliato appena ne appare uno.
   Layout flex in colonna: tutto ciò che sta sopra tiene la propria altezza naturale, la griglia
   prende esattamente ciò che avanza — si ricalcola da sé, senza costanti da tenere aggiornate. */
.mrp-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--navbar-current-height, var(--navbar-height)));
}

.mrp-page > * {
  flex: 0 0 auto;
}

/* min-height indispensabile: senza un valore esplicito un figlio flex non scende MAI sotto la
   propria altezza di contenuto, e una griglia con molte righe continuerebbe a sfondare invece di
   scrollare internamente. Non 0 ma 15rem, così su schermi molto bassi la griglia non collassa a
   un'unica riga: in quel caso è la pagina a scorrere, che è il male minore. */
.mrp-page > .mrp-grid-area {
  flex: 1 1 auto;
  min-height: 15rem;
}

/* Pagina di scelta RdO/Ordine Fornitore (MrpPlanStart): due sole voci, una colonna larga quanto
   il testo le renderebbe illeggibili su schermi wide. */
.mrp-start-list {
  max-width: 32rem;
}

/* Stesso inset orizzontale di .page-list-header (1rem var(--page-inset-x)): banner, fascia di
   riepilogo e riga opzioni devono partire dalla stessa colonna del titolo di pagina. Con il
   px-2 di Bootstrap usato prima (0.5rem contro 2rem) restavano visibilmente rientrati rispetto
   all'intestazione. La griglia resta invece a filo pagina, come in tutte le view Index. */
.mrp-inset {
  padding-left: var(--page-inset-x);
  padding-right: var(--page-inset-x);
}

/* Respiro sotto l'intestazione: senza, le card risultavano appiccicate al titolo. */
.mrp-summary-band {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

.mrp-options-row {
  padding-bottom: 0.75rem;
}

/* ── Intestazioni con etichetta + icona "?" (.mrp-header-hint, v. gli headerTemplate in
   MrpPlan.cshtml) ──
   Flusso di testo normale, NON un flex. Con d-flex l'etichetta e l'icona erano due elementi
   affiancati e verticalmente centrati: appena l'etichetta andava a capo, l'icona restava sospesa a
   metà del blocco — in "Domanda altre commesse", su tre righe, finiva incastrata di fianco alla
   seconda. In linea l'icona segue l'ultima parola come farebbe una parentesi, che è come si legge
   un'intestazione, e l'a capo torna a essere un a capo normale.
   L'allineamento (destra o centro) NON si imposta qui: arriva da headerTextAlign della colonna, che
   Syncfusion applica con text-align sulla cella ed è ereditato — così resta una decisione sola, nel
   .cshtml accanto alla colonna.
   Il padding a destra riserva lo spazio dell'icona di filtro, che Syncfusion disegna all'estremo
   destro della cella SOPRA il contenuto: senza, con l'etichetta allineata a destra, il filtro resta
   mezzo coperto dall'icona "?". Da solo però NON basta: se la colonna è stretta il testo viene
   semplicemente tagliato, quindi va in coppia con larghezze calcolate — v. il commento con la
   formula sulle larghezze in MrpPlan.cshtml. */
.mrp-page .e-grid .e-headercell .mrp-header-hint {
  padding-right: 1.4rem;
}

.mrp-page .e-grid .e-headercell .mrp-header-hint .info-hint-icon {
  margin-left: 0.2rem;
  vertical-align: -0.15em;
}


/* ── Fascia di riepilogo: sei numeri cliccabili che filtrano la griglia ──
   Ogni riquadro è una CARD (.mrp-summary-card, il bordo/sfondo/stato) che contiene DUE elementi
   affiancati: il bottone di filtro (.mrp-summary-item, senza bordo proprio: eredita l'aspetto
   dalla card) e l'icona "?" (.info-hint-icon, v. _InfoHintModal.cshtml). Struttura in due bottoni
   fratelli invece di uno annidato nell'altro: un <button> dentro un <button> è HTML non valido e
   il browser lo tratterebbe comunque come non cliccabile. */
.mrp-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mrp-summary-card {
  position: relative;
  flex: 1 1 8rem;
  min-width: 7rem;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 8px;
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mrp-summary-card:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Filtro attivo: il bordo spesso segnala che la griglia sotto NON mostra tutto. */
.mrp-summary-card.is-active {
  border-color: var(--entity-primary, #0d6efd);
  box-shadow: inset 0 0 0 1px var(--entity-primary, #0d6efd);
}

.mrp-summary-card.is-static:hover {
  box-shadow: none;
}

.mrp-summary-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0.6rem 2.1rem 0.6rem 0.85rem;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
}

.mrp-summary-card.is-static .mrp-summary-item {
  cursor: default;
}

.mrp-summary-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
}

.mrp-summary-label {
  display: block;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}

.mrp-summary-card.is-alert .mrp-summary-value {
  color: var(--bs-danger, #dc3545);
}

.mrp-summary-card.is-warn .mrp-summary-value {
  color: var(--bs-warning-text-emphasis, #6c4a00);
}

/* Icona "?" in alto a destra della card, sopra al bottone di filtro sottostante — staccata
   dall'angolo (non incollata al bordo) e con un'area di click un po' più generosa di quella
   minima di .info-hint-icon, altrimenti su una card piccola è scomoda da centrare col dito. */
.mrp-summary-card > .info-hint-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.3rem;
  height: 1.3rem;
}

/* ── Righe ── */
/* Semaforo: la tinta segnala "ordinando oggi si arriva tardi", non un errore di
   dato — resta leggera per non rendere illeggibile una griglia molto densa. */
.e-grid tr.mrp-late td {
  background-color: rgba(220, 53, 69, 0.08) !important;
}

.e-grid tr.mrp-soon td {
  background-color: rgba(255, 193, 7, 0.12) !important;
}

.e-grid tr.mrp-late.e-selectionbackground td,
.e-grid tr.mrp-soon.e-selectionbackground td {
  background-color: var(--entity-row-selected) !important;
}

/* Articolo interamente coperto: nessuna azione, resta visibile ma in secondo piano. Prima
   segnalato solo col testo attenuato: su una riga bianca, grigio chiaro contro nero era una
   differenza troppo sottile da notare a colpo d'occhio — si confondeva con le righe "in
   programma" (bianche, testo normale, ma CON una proposta futura). Un lieve fondo verde rende
   inconfondibili le due situazioni: qui non c'è proprio nulla da ordinare, per questo "Da
   ordinare" e "Fornitore" restano vuoti — non è un dato mancante. */
.e-grid tr.mrp-covered td {
  background-color: rgba(25, 135, 84, 0.06) !important;
  color: var(--bs-secondary-color, #6c757d);
}

.e-grid tr.mrp-covered.e-selectionbackground td {
  background-color: var(--entity-row-selected) !important;
}

/* Checkbox disattivata SOLO visivamente (mai rimossa dal DOM, a differenza di prima): su una
   riga coperta l'utente può forzare una quantità a mano (v. renderOrderQtyCell) e la riga deve
   poter tornare selezionabile — una checkbox rimossa dal DOM non ricomparirebbe più senza un
   ridisegno completo della griglia. */
.e-grid tr.mrp-row-locked .e-checkbox-wrapper {
  opacity: 0.25;
  pointer-events: none;
}

/* ── Legenda colori riga, sopra la griglia: stessi identici colori delle righe, solo più
   saturi nel piccolo campione — la tinta reale della riga (v. sopra) è volutamente leggera per
   non appesantire una griglia densa, e a quell'opacità un quadratino di mezzo centimetro
   sarebbe illeggibile. ── */
.mrp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Passi della modale Istruzioni: numeri della lista ordinata come riferimento visivo, testo del
   passo staccato dal titolo su due livelli — così la sequenza si legge scorrendo i soli titoli in
   grassetto, senza dover leggere ogni descrizione. */
.mrp-instructions-steps {
  padding-left: 1.2rem;
  margin-bottom: 0;
}

.mrp-instructions-steps > li {
  margin-bottom: 0.6rem;
}

.mrp-instructions-steps > li > div {
  color: var(--bs-secondary-color, #6c757d);
}

.mrp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mrp-legend-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--border-color, #dee2e6);
}

.mrp-legend-late {
  background-color: rgba(220, 53, 69, 0.28);
  border-color: rgba(220, 53, 69, 0.5);
}

.mrp-legend-soon {
  background-color: rgba(255, 193, 7, 0.4);
  border-color: rgba(255, 193, 7, 0.6);
}

.mrp-legend-ok {
  background-color: transparent;
}

/* Stesso trattamento delle altre tre: un quadratino colorato, non più solo testo corsivo — era
   l'unica voce senza campione visivo, e per questo sembrava un'informazione di un'altra natura
   invece che il quarto colore di riga. */
.mrp-legend-covered {
  background-color: rgba(25, 135, 84, 0.2);
  border-color: rgba(25, 135, 84, 0.4);
}

/* Seconda (e successiva) proposta dello stesso articolo: le colonne anagrafiche e di
   copertura sono le stesse della prima riga, quindi si sbiadiscono per far capire a
   colpo d'occhio che è lo stesso articolo a una data diversa, non un altro articolo. */
.mrp-continuation {
  opacity: 0.45;
}

/* Nome e Categoria articolo: testo libero, che con il nowrap+ellipsi di default di Syncfusion
   veniva tagliato a metà parola. Qui va a capo dentro la larghezza della colonna, facendo
   crescere in altezza la sola riga interessata — meglio di un troncamento che rende
   indistinguibili due articoli con nome simile. break-word e non break-all: si spezza dentro la
   parola solo quando una singola parola non ci sta, non a ogni fine riga. */
.e-grid .e-rowcell.mrp-wrap-cell {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  line-height: 1.3;
}

.mrp-policy-make {
  color: var(--bs-primary, #0d6efd);
}

.mrp-policy-buy {
  color: var(--bs-success-text-emphasis, #0a3622);
}

/* ══════════════════════════════════════════════════════════════════
   Elenco magazzini — Views/WarehouseStock/Index.cshtml
   Stessa impostazione del piano di approvvigionamento (fascia di riepilogo cliccabile, riga di
   opzioni, griglia a tutta altezza, popup di dettaglio), con classi proprie: sono due pagine
   che evolvono per conto loro e agganciarle alle stesse regole .mrp-* le avrebbe legate l'una
   all'altra. Le spiegazioni di ogni regola sono nel blocco .mrp-* più sopra.
══════════════════════════════════════════════════════════════════ */

/* Layout flex in colonna: tutto ciò che sta sopra la griglia (riepilogo, opzioni, banner che
   compaiono a runtime) tiene la sua altezza naturale e la griglia prende ciò che avanza. */
.stock-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--navbar-current-height, var(--navbar-height)));
}

.stock-page > * {
  flex: 0 0 auto;
}

.stock-page > .stock-grid-area {
  flex: 1 1 auto;
  min-height: 15rem;
}

/* Stesso rientro di .page-list-header: banner, riepilogo e opzioni partono dalla colonna del titolo. */
.stock-inset {
  padding-left: var(--page-inset-x);
  padding-right: var(--page-inset-x);
}

.stock-summary-band {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

.stock-options-row {
  padding-bottom: 0.75rem;
}

/* Intestazioni con etichetta + icona "?": flusso di testo normale (non flex), con il padding a
   destra che riserva lo spazio dell'icona di filtro di Syncfusion. */
.stock-page .e-grid .e-headercell .stock-header-hint {
  padding-right: 1.4rem;
}

.stock-page .e-grid .e-headercell .stock-header-hint .info-hint-icon {
  margin-left: 0.2rem;
  vertical-align: -0.15em;
}

/* ── Fascia di riepilogo: numeri cliccabili che filtrano la griglia ──
   Card con DUE elementi fratelli (bottone di filtro e icona "?"): un <button> dentro un
   <button> non è HTML valido. */
.stock-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stock-summary-card {
  position: relative;
  flex: 1 1 8rem;
  min-width: 7rem;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 8px;
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stock-summary-card:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Filtro attivo: il bordo spesso segnala che la griglia sotto NON mostra tutto. */
.stock-summary-card.is-active {
  border-color: var(--entity-primary, #0d6efd);
  box-shadow: inset 0 0 0 1px var(--entity-primary, #0d6efd);
}

.stock-summary-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0.6rem 2.1rem 0.6rem 0.85rem;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
}

.stock-summary-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
}

.stock-summary-label {
  display: block;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}

.stock-summary-card.is-alert .stock-summary-value {
  color: var(--bs-danger, #dc3545);
}

.stock-summary-card.is-warn .stock-summary-value {
  color: var(--bs-warning-text-emphasis, #6c4a00);
}

.stock-summary-card > .info-hint-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.3rem;
  height: 1.3rem;
}

/* ── Righe: la tinta segnala "sotto soglia", non un errore di dato — resta leggera per non
   rendere illeggibile una griglia densa. ── */
.e-grid tr.stock-below td {
  background-color: rgba(255, 193, 7, 0.12) !important;
}

.e-grid tr.stock-critical td {
  background-color: rgba(220, 53, 69, 0.08) !important;
}

.e-grid tr.stock-below.e-selectionbackground td,
.e-grid tr.stock-critical.e-selectionbackground td {
  background-color: var(--entity-row-selected) !important;
}

/* Nome e categoria: testo libero, va a capo dentro la colonna invece di essere troncato. */
.e-grid .e-rowcell.stock-wrap-cell {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  line-height: 1.3;
}

/* Quantità cliccabile (apre "Dove si trova"): link a puntini come le quantità di copertura del
   piano, ma su un <button> senza aspetto da bottone. */
.stock-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.stock-drill-btn {
  border: none;
  background: none;
  padding: 0 0.15rem;
  line-height: 1;
  color: inherit;
}

/* Lotto a quantità negativa: il segnale sta accanto al numero, non lo sostituisce. */
.stock-negative-flag {
  color: var(--bs-danger, #dc3545);
  margin-right: 0.25rem;
}

.stock-muted {
  color: var(--bs-secondary-color, #6c757d);
}

/* ── Popup "Dove si trova" e "Altre revisioni" ── */
.stock-breakdown-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bs-secondary-color, #6c757d);
}

.stock-breakdown-section-title {
  font-size: 0.85rem;
  font-weight: 600;
}

.stock-kind-badge {
  font-size: 0.7rem;
  font-weight: 600;
}

.stock-kind-physical {
  background-color: var(--bs-success-bg-subtle, #d1e7dd);
  color: var(--bs-success-text-emphasis, #0a3622);
}

.stock-kind-virtual {
  background-color: var(--bs-purple-bg-subtle, #e0cffc);
  color: var(--bs-purple-text-emphasis, #3d0a91);
}

.stock-kind-external {
  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
  color: var(--bs-primary-text-emphasis, #052c65);
}

/* ===== Commessa: tab Timeline, Gantt Syncfusion EJ2 (Views/WorkOrders/Timeline/_Tab.cshtml) ===== */
/* Il colore delle taskbar è impostato via JS (evento queryTaskbarInfo, legge WorkOrderGanttTaskDTO.
   CssClass) perché i nomi delle classi interne del DOM Syncfusion non sono un'API pubblica stabile —
   qui restano solo i pallini della legenda, stessi 4 colori di stato. */
.wo-gantt-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: .4rem 1.25rem;
}

/* Legenda in due gruppi (colore delle barre / tipo di riga), ciascuno col proprio titolo, staccata dal grafico. */
.wo-gantt-legends {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: .65rem;
  margin: .4rem 0 1rem;
}

.wo-timeline-layout {
  display: flex;
  flex-direction: column;
}

.wo-timeline-layout > [data-wo-pane] { order: 2; }
.wo-timeline-layout > .wo-gantt-legends { order: 3; width: 100%; }

.wo-gantt-legend-panel {
  margin-top: 0;
  padding: .65rem .85rem;
}

.wo-gantt-legend-panel .wo-revision-legend-title {
  margin-bottom: .45rem;
}

.wo-gantt-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.wo-gantt-scroll > .e-gantt {
  min-width: 1200px;
}

#workOrderTabs {
  flex-wrap: wrap;
  row-gap: .35rem;
}

#workOrderTabs .dropdown-menu {
  min-width: max-content;
  max-width: min(36rem, calc(100vw - 2rem));
}

#workOrderTabs .dropdown-item {
  white-space: normal;
}

.wo-gantt-legend-content { width: 100%; }

@media (min-width: 768px) {
  .wo-gantt-legend-content.collapse { display: flex !important; }
}

@media (max-width: 767.98px) {
  .wo-gantt-legends {
    gap: .5rem;
    flex-direction: column;
  }

  .wo-gantt-legend-panel {
    padding: .55rem .65rem;
  }

  .wo-gantt-legend {
    gap: .45rem .85rem;
  }
}

.wo-gantt-legend-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}

.wo-gantt-legend-dot.wo-gantt-task-completed { background: var(--bs-success, #198754); }
.wo-gantt-legend-dot.wo-gantt-task-inprogress { background: var(--bs-primary, #0d6efd); }
.wo-gantt-legend-dot.wo-gantt-task-late { background: var(--bs-danger, #dc3545); }
.wo-gantt-legend-dot.wo-gantt-task-risk { background: var(--bs-warning, #ffc107); }
.wo-gantt-legend-dot.wo-gantt-task-pending { background: var(--border-color); }

.wo-gantt-tooltip {
  min-width: 15rem;
  padding: .15rem;
  font-size: .8125rem;
  line-height: 1.45;
}

/* Niente sfondo proprio: stesso principio di .page-list-header.detail-entity-header (trasparente),
   altrimenti stona con lo sfondo grigio dei soli campi readonly (.page-form-body input[readonly]
   qui sopra) — due grigi leggermente diversi affiancati si notavano. */
.wo-gantt-detail {
  width: 100%;
  margin-top: .5rem;
}

.mrp-qty {
  min-width: 5.5rem;
}

/* Cella Fornitore vuota su una proposta d'acquisto: stesso stile "campo disabilitato"
   già usato altrove, non l'intera riga sbiadita. */
.e-grid td.mrp-supplier-cell-missing {
  background-color: var(--bs-secondary-bg, #f8f9fa) !important;
}

.mrp-row-error,
.mrp-row-draft {
  white-space: normal;
}

/* L'avviso «N documenti già in bozza» è cliccabile (apre il popup di dettaglio): il cursore lo dice. */
.mrp-row-draft {
  cursor: pointer;
}

.mrp-drill-btn {
  border: none;
  background: none;
  padding: 0 0.15rem;
  line-height: 1;
  color: inherit;
}

.mrp-breakdown-link {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* Fabbisogno lordo/netto: stesso stile "link" delle altre quantità di copertura sopra, ma su un
   <button> invece di un <a> — apre la modale "Perché serve"/"Andamento nel tempo" (v.
   renderRequirementCell in MrpPlan/_Scripts.cshtml), non un popup di dettaglio dedicato: riusa lo
   stesso bottone .mrp-explain già cablato per l'icona in fondo alla riga. Il reset qui sotto lo fa
   sembrare testo cliccabile, non un bottone. */
.mrp-cell-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ── Drill-down "Andamento nel tempo" ── */
.mrp-timeline-shortage {
  color: var(--bs-danger, #dc3545);
  font-weight: 600;
}

.mrp-timeline-inbound {
  color: var(--bs-success-text-emphasis, #0a3622);
}

.mrp-timeline-opening {
  color: var(--bs-secondary-color, #6c757d);
}

/* ── Drill-down "Perché serve": colonna "Serve per produrre" della tabella origine fabbisogno ──
   Catena di distinta compatta (ART001 › ART002 › ART005) come contesto della riga: i codici sono
   marcati come token per non confonderli col separatore, e la cella va a capo perché su distinte
   profonde la catena è lunga. */
.mrp-pegging-path {
  white-space: normal;
  line-height: 1.5;
}

.mrp-pegging-step {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background-color: var(--bs-tertiary-bg, #f1f3f5);
  font-size: 0.8rem;
}

.mrp-pegging-sep {
  color: var(--bs-secondary-color, #adb5bd);
  margin: 0 0.2rem;
}

/* ── Popup "Perché serve" / "Andamento nel tempo": due tab invece di due sezioni impilate ── */
.mrp-explain-tabs {
  margin-bottom: 1rem;
}

.mrp-explain-tab-content {
  min-height: 6rem;
}

/* ── Popup di dettaglio copertura (Impegnata / In arrivo / In produzione / Domanda altre commesse):
   tabella leggermente più curata della griglia dati grezza di partenza — zebra + intestazione
   marcata, così una tabella di poche righe non sembra un dump di dati. */
.mrp-breakdown-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bs-secondary-color, #6c757d);
}

/* Variante senza il tutto-maiuscolo, per i due popup delle bozze già esistenti (dettaglio dall'avviso
   in riga e finestra al «Genera documenti»): stessa tabella, intestazioni con la sola iniziale
   maiuscola. */
.mrp-breakdown-table.mrp-breakdown-table-natural-case th {
  text-transform: none;
  letter-spacing: normal;
}

/* Badge origine (Ordine Cliente / Ordine di Produzione) nel dettaglio "Impegnata": due tinte
   nettamente diverse, per riconoscere la provenienza scorrendo la colonna senza leggere il testo. */
.mrp-source-badge {
  font-size: 0.7rem;
  font-weight: 600;
}

.mrp-source-sales {
  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
  color: var(--bs-primary-text-emphasis, #052c65);
}

.mrp-source-production {
  background-color: var(--bs-purple-bg-subtle, #e0cffc);
  color: var(--bs-purple-text-emphasis, #3d0a91);
}

/* Ordine fornitore (popup "In arrivo") e Articolo aggiuntivo di commessa (popup "Domanda altre
   commesse"): stessa forma e stessa dimensione delle due badge sopra, tinte diverse — la colonna
   "Origine" esiste in tutti i popup che elencano documenti e deve leggersi allo stesso modo. */
.mrp-source-purchase {
  background-color: var(--bs-success-bg-subtle, #d1e7dd);
  color: var(--bs-success-text-emphasis, #0a3622);
}

.mrp-source-additional {
  background-color: var(--bs-secondary-bg-subtle, #e2e3e5);
  color: var(--bs-secondary-text-emphasis, #2b2f32);
}

/* ── Colonna Prezzo: icona che dice da dove viene il numero, senza dover riaprire l'icona "?"
   dell'header per ogni riga (v. renderPriceCellContent in MrpPlan/_Scripts.cshtml). Un tag pieno
   vs uno vuoto (invece del pallino colorato di prima) si distingue anche senza percepire i
   colori, ed è un simbolo meno ambiguo accanto a un numero. .mrp-price-cell è un flex inline che
   tiene icona e importo impilati sulla stessa riga, allineati a destra come il resto della
   colonna — nessuna modifica alla larghezza o all'allineamento della cella. ── */
.mrp-price-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: 100%;
}

.mrp-price-source-icon {
  flex: 0 0 auto;
  font-size: 0.9rem;
}

.mrp-price-source-list {
  color: var(--bs-success, #198754);
}

.mrp-price-source-fallback {
  color: var(--bs-secondary-color, #adb5bd);
}

/* ── Pannello "Partite" nel dettaglio fattura (modulo Scadenziario) ──────────
   Sola lettura: nessuna interazione, solo leggibilità. La riga annullata va
   riconosciuta a colpo d'occhio senza sparire — il partitario è un registro
   storico, e una partita annullata resta visibile (v. OpenItem.IsCancelled). */
.open-items-panel {
  font-variant-numeric: tabular-nums;
}

.open-items-cancelled td {
  text-decoration: line-through;
}

/* ── Scadenziario: fascia di riepilogo per fasce di ritardo ──────────────────
   Cinque riquadri cliccabili che filtrano la griglia sulla propria fascia. I
   colori vanno dal neutro al rosso seguendo il ritardo: l'unica cosa che deve
   saltare all'occhio in una pagina di numeri è cosa è scaduto da troppo. */
.open-items-aging {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  /* La pagina è un container-fluid px-0: il rientro laterale se lo rimette ogni sezione, con la
     stessa variabile usata da .page-list-header. Senza, i riquadri toccano i bordi mentre
     intestazione e griglia restano rientrate. */
  padding: .75rem var(--page-inset-x);
}

/* Stesso rientro, per i blocchi che non sono la fascia: l'avviso in cima a «Incassi e
   pagamenti» partiva dal bordo della finestra mentre intestazione e griglia restavano
   rientrate. Stessa soluzione di .mrp-inset nella pagina MRP — il contenitore della pagina è
   un container-fluid px-0 e il rientro se lo rimette ogni sezione. */
.open-items-inset {
  padding-left: var(--page-inset-x);
  padding-right: var(--page-inset-x);
}

/* Scadenziario: impaginazione a tutta altezza. .grid-index-full-height sottrae solo navbar e
   intestazione, ma qui sopra la griglia c'è anche la fascia di riepilogo: la griglia sfondava il
   fondo pagina, il paginatore finiva fuori schermo e la pagina scorreva anche con una sola riga.
   Stesso schema di .mrp-page: colonna flex, la griglia prende ciò che avanza senza costanti. */
.open-items-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--navbar-current-height, var(--navbar-height)));
}

.open-items-page > * {
  flex: 0 0 auto;
}

.open-items-page > .open-items-grid-area {
  flex: 1 1 auto;
  min-height: 15rem;
}

/* Dettaglio di riga (sotto-righe) di Incassi e pagamenti: la griglia figlia si appoggia al
   rientro della cella senza altri bordi, e le sue colonne seguono la griglia madre. */
.payment-transaction-allocations {
  padding: .25rem 0 .5rem;
}

/* Le sotto-righe si leggono come un blocco a sé: sfondo grigio chiaro su tutta la larghezza (anche
   sotto la freccia di espansione), filetto colorato a sinistra e rientro, così non si confondono con
   le righe dei movimenti sopra e sotto. La griglia figlia è trasparente per lasciar vedere lo sfondo. */
#paymentTransactionsGrid .e-detailrow > td {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

#paymentTransactionsGrid .e-detailrow > td.e-detailindentcell {
  border-left: 3px solid var(--bs-primary);
}

#paymentTransactionsGrid .e-detailrow > td.e-detailcell {
  padding: .5rem 1rem .75rem 1rem;
}

#paymentTransactionsGrid .e-detailcell .e-grid,
#paymentTransactionsGrid .e-detailcell .e-gridheader,
#paymentTransactionsGrid .e-detailcell .e-headercontent,
#paymentTransactionsGrid .e-detailcell .e-headercell,
#paymentTransactionsGrid .e-detailcell .e-gridcontent,
#paymentTransactionsGrid .e-detailcell .e-content,
#paymentTransactionsGrid .e-detailcell .e-table,
#paymentTransactionsGrid .e-detailcell .e-row .e-rowcell,
#paymentTransactionsGrid .e-detailcell .e-emptyrow td {
  background-color: transparent;
}

/* La griglia figlia si appoggia alla cella senza una cornice propria: con quella di Syncfusion si
   vedevano due cornici annidate, con gli angoli sfalsati del rientro della cella. Restano i filetti
   orizzontali tra le righe e sotto l'intestazione (gridLines: 'Horizontal'). */
#paymentTransactionsGrid .e-detailcell .e-grid {
  border: 0;
}

#paymentTransactionsGrid .e-detailcell .e-gridheader {
  border-top: 0;
}

/* Hover delle sotto-righe: grigio più scuro dello sfondo, non l'azzurro delle righe principali (la
   regola globale .e-grid … .e-row:hover è !important, quindi serve una più specifica e !important). */
#paymentTransactionsGrid .e-detailcell .e-gridcontent .e-row:hover .e-rowcell,
#paymentTransactionsGrid .e-detailcell .e-gridcontent .e-altrow:hover .e-rowcell {
  background-color: var(--bs-secondary-bg) !important;
}

/* Intestazione della griglia figlia più sobria di quella dei movimenti. */
#paymentTransactionsGrid .e-detailcell .e-headercell {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.open-items-aging-card {
  flex: 1 1 8rem;
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .5rem .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  text-align: left;
  cursor: pointer;
}

.open-items-aging-card:hover {
  border-color: var(--bs-primary);
}

.open-items-aging-card.is-active {
  border-color: var(--bs-primary);
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.open-items-aging-label {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.open-items-aging-value {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.open-items-aging-total .open-items-aging-value { color: var(--bs-body-color); }
.open-items-aging-ok .open-items-aging-value { color: var(--bs-success); }
.open-items-aging-warn .open-items-aging-value { color: var(--bs-warning-text-emphasis); }
.open-items-aging-bad .open-items-aging-value { color: var(--bs-danger); }

/* Griglia: il residuo è la colonna che si legge, gli stati si riconoscono a
   colpo d'occhio senza dover cercare la colonna Stato. */
.open-items-remaining {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.open-items-row-overdue td { background-color: var(--bs-danger-bg-subtle); }
.open-items-row-settled td { color: var(--bs-secondary-color); }
.open-items-row-cancelled td { color: var(--bs-secondary-color); text-decoration: line-through; }

/* Estratto conto a mastrino: il pagamento che chiude una scadenza sta sotto di lei, rientrato e
   in tono sommesso, con l'importo incassato in verde. Un filetto sopra ogni scadenza separa i
   gruppi (tranne il primo, che ha già la riga d'intestazione sopra). */
.open-items-row-payment td { color: var(--bs-secondary-color); font-size: .875em; }
.open-items-row-payment td:first-child { padding-left: 1.75rem; }
.open-items-row-payment td:first-child::before { content: "\21B3\00a0"; }
.open-items-row-payment .open-items-settled { color: var(--bs-success); font-weight: 600; }
.open-items-row-due:not(:first-child) td { border-top: 1px solid var(--bs-border-color-translucent); }

/* ── Scadenziario: estratto conto e saldi per controparte ────────────────────
   L'estratto conto è un documento che si manda fuori — al cliente col
   sollecito, allo studio — quindi deve reggere la stampa: la barra dei
   pulsanti sparisce (d-print-none nelle view) e la griglia non si spezza a
   metà riga. */
/* Il rientro e il padding vengono da .page-form-body, come nelle altre pagine di dettaglio. */
.open-items-statement-head {
  border-bottom: 2px solid var(--bs-border-color);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

/* Stessi riquadri della fascia scaduto dello Scadenziario (.open-items-aging-card), non cliccabili.
   Stanno dentro una colonna Bootstrap (.col-md-4 / .col-md-3): è la riga a decidere la larghezza,
   il riquadro riempie la colonna e ha sempre la stessa altezza dei vicini. */
.open-items-statement-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .5rem .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}

/* Riga di dettaglio sotto la cifra (es. quante partite compongono lo scaduto). */
.open-items-aging-hint {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.open-items-statement-aging {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

@media print {
  /* Una riga spezzata fra due pagine rende illeggibile il progressivo. */
  .open-items-page .e-grid tr { break-inside: avoid; }
}

/* Campo TomSelect dentro un input-group (es. Codice articolo della riga documento, con il
   pulsante "Ultimi acquisti" in coda): il bordo visibile è quello di .ts-control, non del
   wrapper, quindi senza questa regola l'angolo destro resta arrotondato sotto il pulsante. */
.input-group > .ts-wrapper:not(:last-child) .ts-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ── Stato articolo in griglie e selettori (partial _ArticleStatusTemplate): contrassegno + nome ── */
.grid-article-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.grid-article-status-icon {
  display: inline-block;
  font-size: 1.15rem;
  vertical-align: middle;
}

/* Dichiarazioni d'intento: griglia nella tab di cliente/fornitore (altezza fissa, la tab non ha un contenitore a tutta altezza). */
.doi-tab-grid {
    height: 420px;
}

/* Menu azioni di riga spostato su <body> mentre e' aperto (v. site.js): sopra sidebar e pannelli. */
body > .dropdown-menu.dropdown-menu-in-body {
  z-index: 10050 !important;
}

/* TomSelect — elenco a tendina uniforme in tutto il sistema, come quello di selezione articolo nelle
   righe documento: righe alte (la miniatura articolo da 32px detta il passo), testo 0.875rem, ombra leggera
   e angoli arrotondati. Prima solo le voci con miniatura avevano quell'altezza: le altre (pagamenti,
   fornitori, sedi…) erano righe strette e compresse. */
.ts-dropdown {
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  font-size: 0.875rem;
  overflow: hidden;
}

.ts-dropdown .ts-dropdown-content .option,
.ts-dropdown .ts-dropdown-content .optgroup-header,
.ts-dropdown .ts-dropdown-content .no-results,
.ts-dropdown .ts-dropdown-content .create {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.25rem 0.75rem;
}

.ts-dropdown .ts-dropdown-content .option > div,
.ts-dropdown .ts-dropdown-content .option > span {
  min-width: 0;
}

.ts-dropdown .ts-dropdown-content .option:not(:last-child) {
  border-bottom: 0;
}

/* Contabilita analitica nel documento: colonne con i menu a tendina, abbastanza larghe da leggere il conto. */
.analytics-panel .analytics-col-account {
    min-width: 220px;
}

.analytics-panel .analytics-col-center {
    min-width: 150px;
}

/* Contabilita analitica, tabelle di configurazione: larghezze delle colonne. */
.analytics-col-w30 {
    width: 30%;
}

.analytics-col-w35 {
    width: 35%;
}