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);
}
/* 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;
}

/* Contenitore dei banner di alert (successo/errore/info/warning) iniettati da
   _AlertMessages.cshtml, incluso una sola volta nel layout: stesso inset di
   .page-list-header/.page-form-body così il banner risulta allineato al contenuto
   della pagina invece di usare il padding di default di Bootstrap (px-3 = 1rem). */
.app-alert-container {
  padding: 1rem var(--page-inset-x);
}

/* 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(--brand-ink);
  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(--brand-ink) !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: var(--ghost-hover-bg, 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;
}

/* 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);
}

/* 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(--brand-ink);
  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(--brand-ink) !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;
}
/* 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;
}

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

/* 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: wrap;
    overflow-x: auto;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    gap: 6px;
}

.entity-tabs .nav-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink) !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(--brand-ink) !important;
}

/* 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(--brand-ink);
  line-height: 1.2;
}

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

.entity-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--entity-primary);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--entity-primary-light);
}

/* ══════════════════════════════════════════════════════════════════
   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: 1.75rem !important;
  line-height: 1.75rem !important;
  display: block !important;
}

/* -- Details sections ----------------------------------- */
.details-section-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-ink);
  border-bottom: 1px solid var(--brand-ink);
  padding-bottom: 4px;
  margin-bottom: 0;
}

/* 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; }

/* ── Generazione RFQ/Ordine fornitore da esplosione BOM: griglia Syncfusion ──
   Stessa griglia (ejs-grid) e stesso meccanismo di colore/rientro per livello
   della BOM in Articoli (classi bom-level-N / bom-code-cell, vedi sopra e
   Views/Articles/Bom/_Scripts.cshtml) — qui applicati via rowDataBound sulla
   griglia sogGrid. Le celle Seleziona/Quantità/Fornitore sono template con
   controlli editabili sempre visibili (non edit-on-click come una normale
   griglia Syncfusion), per permettere di comporre più righe in un colpo solo. */
.sog-qty {
  min-width: 5.5rem;
}

.sog-toggle-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.sog-toggle {
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  color: inherit;
  vertical-align: middle;
}

/* Cella Fornitore senza fornitore assegnato: stesso stile "disabilitato" usato per i campi
   readonly nel resto dell'app (sfondo grigio chiaro, non l'intera riga sbiadita) — la checkbox
   di riga resta visivamente identica alle altre griglie; un tentativo di selezione mostra
   comunque l'alert sotto la riga. */
.e-grid td.sog-supplier-cell-missing {
  background-color: var(--bs-secondary-bg, #f8f9fa) !important;
}

.sog-row-error {
  white-space: normal;
}

/* ══════════════════════════════════════════════════════════════════
   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); }

.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); }

/* ══════════════════════════════════════════════════════════════════
   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 {
  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 {
  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);
}


/* ── Articles Index — miniatura griglia + anteprima a dimensione reale (Views/Articles/Index.cshtml) ── */
.grid-article-thumb {
  height: 32px;
  max-width: 56px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 3px;
  cursor: zoom-in;
}

#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;
  }
}

/* ── Badge priorità ticket ────────────────────────────────────────────────
   Stile volutamente diverso dagli stati (che sono pill morbide con pallino):
   qui badge solidi rettangolari con icona, colori per gravità crescente. */
.pchip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    color: var(--pr-fg); padding: .12rem .5rem; border-radius: 4px; white-space: nowrap; line-height: 1.55;
}
.pchip i { font-size: .8rem; line-height: 1; }
.p-low  { background: var(--pr-low); }  /* bassa   — grigio ardesia */
.p-norm { background: var(--pr-norm); } /* normale — azzurro */
.p-high { background: var(--pr-high); } /* alta    — arancione */
.p-urg  { background: var(--pr-urg); }  /* urgente — rosso */

/* ── Badge stato ticket ───────────────────────────────────────────────────
   Pill morbida con pallino: stessa resa in elenco, dettaglio e modifica. */
.tchip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; font-weight: 500;
    padding: .14rem .6rem; border-radius: 999px; white-space: nowrap; line-height: 1.4;
}
.tchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.c-open { color: var(--st-open-fg); background: var(--st-open-bg); } /* aperto         */
.c-prog { color: var(--st-prog-fg); background: var(--st-prog-bg); } /* in lavorazione */
.c-wait { color: var(--st-wait-fg); background: var(--st-wait-bg); } /* in attesa      */
.c-reso { color: var(--st-reso-fg); background: var(--st-reso-bg); } /* risolto        */
.c-clos { color: var(--st-clos-fg); background: var(--st-clos-bg); } /* chiuso         */
.c-canc { color: var(--st-canc-fg); background: var(--st-canc-bg); } /* annullato      */

/* Scadenza SLA superata (ticket ancora attivo): rosso + grassetto. */
.t-overdue, .e-grid td.e-rowcell.t-overdue { color: var(--danger-fg) !important; font-weight: 700; }

/* ── Scheda riepilogo ticket (dettaglio) ──────────────────────────────────
   Etichetta e valore allineati sulla stessa linea di base anche quando il
   valore è un badge (stato/priorità), che è più alto del testo semplice. */
.ticket-meta dt,
.ticket-meta dd { display: flex; align-items: center; min-height: 1.75rem; margin-bottom: .35rem; }
.ticket-meta dt { font-weight: 600; color: var(--body-color-secondary); }
.ticket-meta dd { margin-bottom: .35rem; }
.ticket-meta dt:last-of-type, .ticket-meta dd:last-of-type { margin-bottom: 0; }

/* ── Margini laterali delle pagine senza griglia ──────────────────────────
   Le pagine elenco (con .grid-index-full-height / .grid-tab-full-height) restano a
   filo dei bordi, perché la griglia deve sfruttare tutta la larghezza.

   In tutte le altre (dashboard, dettaglio, form) l'inset orizzontale sta sul
   CONTENITORE, così ogni figlio — card, .row, sezione — parte esattamente dallo
   stesso punto. Applicarlo ai figli darebbe risultati diversi a seconda del tipo:
   su una .row rientra le colonne, ma su una card lascerebbe il bordo a filo
   rientrando solo il contenuto (sommandosi al padding della card).

   Serve !important perché .document-page sta dentro un .container-fluid.px-0,
   e le utility px-* di Bootstrap sono a loro volta !important.

   Header e form-body portano già lo stesso inset: al loro interno va azzerato,
   altrimenti si sommerebbe a quello del contenitore (4rem invece di 2rem). */
.document-page:not(:has(.grid-index-full-height)):not(:has(.grid-tab-full-height)) {
    padding-inline: var(--page-inset-x) !important;
}
.document-page:not(:has(.grid-index-full-height)):not(:has(.grid-tab-full-height)) > .page-list-header,
.document-page:not(:has(.grid-index-full-height)):not(:has(.grid-tab-full-height)) > .page-form-body {
    padding-inline: 0;
}

/* ── Allegati del ticket ──────────────────────────────────────────────────
   Elenco a card compatte con zona di rilascio, al posto della fila di pulsanti. */
.attachment-drop {
    border: 1px dashed var(--border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem;
    background: var(--surface-2);
    transition: border-color .15s ease, background-color .15s ease;
}
.attachment-drop.no-drop { border-style: solid; }
.attachment-drop.is-dragover {
    border-color: var(--accent-color);
    background: var(--accent-soft-bg);
}
.attachment-drop-hint {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    font-size: .78rem; color: var(--body-color-secondary);
    padding-top: .5rem;
}
.attachment-drop-hint i { font-size: 1rem; }

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .5rem;
}
.attachment-grid:empty { display: none; }

.attachment-card {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .65rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: .5rem;
    background: var(--surface-1);
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.attachment-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px var(--dashboard-card-shadow);
    color: inherit;
}
.attachment-icon {
    flex: 0 0 auto;
    width: 2rem; height: 2rem; border-radius: .4rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft-bg); color: var(--accent-color);
}
.attachment-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.attachment-name {
    font-size: .82rem; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attachment-size { font-size: .72rem; color: var(--body-color-secondary); }
.attachment-action { margin-left: auto; color: var(--body-color-secondary); opacity: 0; transition: opacity .15s ease; }
.attachment-card:hover .attachment-action { opacity: 1; }
.attachment-empty { padding: .35rem .1rem; }

/* ── Dashboard ────────────────────────────────────────────────────────────
   Il blocco ticket è "in evidenza": bordo colorato a sinistra e KPI compatti. */
.dash-hero { border-left: 4px solid var(--accent-color); }

.dash-kpi {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .1rem; padding: .7rem .4rem;
    border: 1px solid var(--border-color, #dee2e6); border-radius: .55rem;
    background: var(--surface-1); height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--dashboard-card-hover-shadow); }
.dash-kpi i { font-size: 1.15rem; opacity: .9; }
.dash-kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-kpi-label { font-size: .72rem; color: var(--body-color-secondary); text-align: center; }

.dash-kpi-primary   { border-top: 3px solid var(--st-open-fg); } .dash-kpi-primary i   { color: var(--st-open-fg); }
.dash-kpi-warning   { border-top: 3px solid var(--st-wait-fg); } .dash-kpi-warning i   { color: var(--st-wait-fg); }
.dash-kpi-info      { border-top: 3px solid var(--st-prog-fg); } .dash-kpi-info i      { color: var(--st-prog-fg); }
.dash-kpi-secondary { border-top: 3px solid var(--st-clos-fg); } .dash-kpi-secondary i { color: var(--st-clos-fg); }
.dash-kpi-danger    { border-top: 3px solid var(--danger-fg);  } .dash-kpi-danger i    { color: var(--danger-fg); }

.dash-shortcut { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.dash-shortcut:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--dashboard-card-hover-shadow); }
.dash-shortcut-alert { border-color: var(--danger-fg); }

/* == Home / pagina di accesso (Views/Home/Index.cshtml) ===================
   Unica vista pubblica servita da _Layout (senza navbar ne sidebar), quindi
   qui non c'e' il selettore di tema: la palette e' fissa e ad alto contrasto.
   Il pannello hero resta dentro il container di _Layout: niente larghezze in
   100vw, che su mobile producono una scrollbar orizzontale. */

.home-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    padding: 3.5rem 1.5rem 3rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #0b3c6e 0%, var(--entity-primary) 45%, #2b7fd4 100%);
    box-shadow: 0 18px 45px rgba(11, 60, 110, .28);
}

/* Alone luminoso decorativo: puramente estetico, fuori dal flusso e non cliccabile. */
.home-hero::after {
    content: "";
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .18), transparent 70%);
    pointer-events: none;
}

/* Il contenuto sta sopra l'alone. */
.home-hero > * { position: relative; z-index: 1; }

.home-hero-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    padding: .75rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
}

.home-hero-title { font-weight: 600; letter-spacing: -.02em; }

.home-hero-subtitle {
    color: rgba(255, 255, 255, .85);
    max-width: 34rem;
    margin-inline: auto;
}

.home-signin-btn {
    --bs-btn-padding-x: 2.25rem;
    --bs-btn-padding-y: .75rem;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.home-signin-hint { color: rgba(255, 255, 255, .72); }

/* ── Griglia delle funzionalita' sotto l'hero ───────────────────────────── */

.home-feature {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: .9rem;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.home-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.home-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    font-size: 1.25rem;
    background: var(--entity-primary-light);
    color: var(--entity-primary);
}

.home-feature-title { font-size: 1rem; font-weight: 600; }
.home-feature-text { font-size: .9rem; color: var(--body-color-secondary); }

@media (max-width: 575.98px) {
    .home-hero { padding: 2.5rem 1rem 2.25rem; border-radius: 1rem; }
    .home-hero-logo { width: 80px; height: 80px; }
}

/* Rispetta la preferenza di sistema per il movimento ridotto. */
@media (prefers-reduced-motion: reduce) {
    .home-feature { transition: none; }
    .home-feature:hover { transform: none; }
}