/* detail-v2: restyle pagine di dettaglio, solo sotto body.test-environment. Specifica: docs/PianoRestyleDettaglio.md. Ritorno: tag pre-restyle-dettaglio o git revert.
   Fase 1: scheda, testata, sola lettura (variante B), vassoio azioni, tab sottolineate, popup combobox.
   Usa solo i token di site.css; font e colori dei pulsanti non sono toccati.
   Specificita': site.css e forms-v2.css forzano i campi disabilitati con !important, quindi qui i selettori
   partono da "body.test-environment .work-surface.work-surface--half" (0,3,1) e usano !important dove serve. */

/* ---------- a) Scheda ---------- */
body.test-environment .work-surface.work-surface--half {
  position: relative;
  /* site.css mette overflow:hidden alle schede con tabella: qui serve visibile per lo sticky del vassoio. */
  overflow: visible !important;
  padding: 0 0 22px;
  border: 1px solid rgba(219, 227, 238, .9);
  border-radius: 18px;
  background: var(--surface);
  /* Ombra a strati con tinta del blu del sito (stesso --lift della proposta). */
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 24px -10px rgba(15, 23, 42, .16), 0 36px 64px -28px rgba(30, 58, 138, .28);
}

/* Striscia in alto come il banner. Niente overflow:hidden sulla scheda: romperebbe lo sticky del vassoio azioni. */
body.test-environment .work-surface.work-surface--half::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #0f172a, var(--primary-strong) 58%, var(--primary-hero-end)) !important;
  opacity: 1;
  pointer-events: none;
}

/* Il contenuto sotto la testata prende il rientro laterale; la testata ha il suo. */
body.test-environment .work-surface.work-surface--half > :where(:not(.surface-head)) {
  padding-inline: 28px;
}

/* Griglia dei campi dentro la scheda: gap del prototipo approvato, con selettore piu' specifico di forms-v2/site.css. */
body.test-environment .work-surface.work-surface--half :is(.form-grid, .settings-form-grid, .commesse-form-grid, .nh-form, .spr-grid) {
  gap: 24px 22px;
}

/* ---------- b) Testata ---------- */
/* Indietro a sinistra del titolo (assoluto nel rientro), Modifica resta a destra. Il rientro si applica solo se il pulsante c'e'. */
body.test-environment .work-surface.work-surface--half > .surface-head {
  position: relative;
  align-items: center;
  margin: 0 0 22px;
  padding: 24px 28px 0;
}

body.test-environment .work-surface.work-surface--half > .surface-head:has(.expense-icon-button.btn-outline-secondary) {
  padding-left: 68px;
}

/* Solo il blocco del titolo: i pulsanti (.surface-actions) restano com'e'. */
body.test-environment .work-surface.work-surface--half > .surface-head > div:first-child:not(.surface-actions) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.test-environment .work-surface.work-surface--half > .surface-head h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* Eyebrow: riga normale sopra il titolo, solo dove la pagina lo passa gia'. */
body.test-environment .work-surface.work-surface--half > .surface-head .eyebrow {
  order: -1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Pulsante indietro: ghost, senza bordo ne' sfondo (il colore di Modifica e degli altri pulsanti resta com'e'). */
body.test-environment .work-surface.work-surface--half > .surface-head .expense-icon-button.btn-outline-secondary {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 0 !important;
  border-radius: 10px;
  background: transparent !important;
  box-shadow: none;
  /* #475569 (slate 600): nessun token equivalente, --muted e' piu' chiaro. */
  color: #475569 !important;
  /* Allineato al centro del titolo: 24px di rientro alto + meta' riga del titolo; con eyebrow scende di una riga. */
  position: absolute;
  left: 20px;
  top: 20px;
}

body.test-environment .work-surface.work-surface--half > .surface-head:has(.eyebrow) .expense-icon-button.btn-outline-secondary {
  top: 42px;
}

body.test-environment .work-surface.work-surface--half > .surface-head .expense-icon-button.btn-outline-secondary:hover,
body.test-environment .work-surface.work-surface--half > .surface-head .expense-icon-button.btn-outline-secondary:focus-visible {
  background: rgba(15, 23, 42, .06) !important;
  color: var(--text) !important;
}

/* ---------- c) Sola lettura, variante B ---------- */
/* Il valore diventa testo in un riquadro tenue, senza bordo, senza freccia, senza hover. La sola lettura nel DOM e'
   quasi sempre "disabled": per questo si agisce sul singolo campo e funziona anche nei form misti. */
body.test-environment .work-surface.work-surface--half :is(
    .dxbl-text-edit.dxbl-disabled,
    .dxbl-text-edit.dxbl-readonly,
    textarea.form-control:is(:disabled, [readonly]),
    input.form-control:is(:disabled, [readonly]),
    select.form-control:disabled,
    select.form-select:disabled,
    .dxbl-memo-edit.dxbl-disabled
  ) {
  min-height: 44px;
  height: auto;
  border: 0 !important;
  border-radius: 10px;
  background: var(--surface-soft) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  font-weight: 650 !important;
  opacity: 1 !important;
  cursor: default !important;
}

/* Campo DevExpress: l'ingombro lo da il riquadro esterno, il rientro lo da l'input interno. */
body.test-environment .work-surface.work-surface--half :is(.dxbl-text-edit.dxbl-disabled, .dxbl-text-edit.dxbl-readonly) {
  padding: 0;
}

body.test-environment .work-surface.work-surface--half :is(.dxbl-text-edit.dxbl-disabled, .dxbl-text-edit.dxbl-readonly) :is(input, .dxbl-text-edit-input) {
  min-height: 44px;
  height: auto;
  padding: 11px 14px;
  background: transparent !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  font-size: 15px;
  font-weight: 650 !important;
  cursor: default !important;
}

/* Focus visibile anche sui campi di sola lettura (sono raggiungibili da tastiera): solo il contorno, l'aspetto resta quello di lettura. */
body.test-environment .work-surface.work-surface--half :is(.dxbl-text-edit.dxbl-readonly:focus-within, input.form-control[readonly]:focus-visible, textarea.form-control[readonly]:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body.test-environment .work-surface.work-surface--half .dxbl-text-edit.dxbl-readonly :is(input, .dxbl-text-edit-input):focus {
  outline: 0;
}

/* Niente freccia/calendario: non e' un campo modificabile. */
body.test-environment .work-surface.work-surface--half :is(.dxbl-text-edit.dxbl-disabled, .dxbl-text-edit.dxbl-readonly) :is(.dxbl-edit-btn-dropdown, .dxbl-btn-group-right, .dxbl-edit-btn-spin) {
  display: none !important;
}

/* Campi nativi: stesso riquadro; niente freccia della select ne' spinner del numero. */
body.test-environment .work-surface.work-surface--half :is(input.form-control, textarea.form-control, select.form-control, select.form-select):is(:disabled, [readonly]) {
  padding: 11px 14px;
  font-size: 15px;
}

body.test-environment .work-surface.work-surface--half :is(select.form-control, select.form-select):disabled {
  appearance: none;
  -webkit-appearance: none;
  background-image: none !important;
}

body.test-environment .work-surface.work-surface--half input[type="number"].form-control:disabled {
  appearance: textfield;
  -moz-appearance: textfield;
}

body.test-environment .work-surface.work-surface--half input[type="number"].form-control:disabled::-webkit-inner-spin-button,
body.test-environment .work-surface.work-surface--half input[type="number"].form-control:disabled::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* L'area di testo in lettura mostra tutto il testo, senza maniglia di ridimensionamento. */
body.test-environment .work-surface.work-surface--half textarea.form-control:is(:disabled, [readonly]),
body.test-environment .work-surface.work-surface--half .dxbl-memo-edit.dxbl-disabled textarea {
  resize: none;
  min-height: 44px;
  background: transparent !important;
  font-weight: 650 !important;
}

body.test-environment .work-surface.work-surface--half textarea.form-control:is(:disabled, [readonly]) {
  background: var(--surface-soft) !important;
}

/* Etichetta sopra il campo: grassetto 13px a colore pieno (forms-v2 la rende 500 grigia). Solo nei campi della scheda. */
body.test-environment .work-surface.work-surface--half label.field > span:first-child,
body.test-environment .work-surface.work-surface--half .standard-date-input > label {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 16px;
}

/* Interruttore disabilitato: testo pieno, niente attenuazione. Il disegno dell'interruttore resta quello del sito. */
body.test-environment .work-surface.work-surface--half :is(.switch-line, .check-line, .check-row):is(:has(input:disabled), .dxbl-disabled) {
  opacity: 1 !important;
  color: var(--text) !important;
  font-weight: 650;
  cursor: default !important;
}

/* ---------- d) Campi modificabili: solo coerenza di altezza e raggio dentro la scheda (l'aspetto resta di forms-v2.css) ---------- */
body.test-environment .work-surface.work-surface--half :is(.dxbl-text-edit:not(.dxbl-disabled):not(.dxbl-readonly), input.form-control:not(:disabled):not([readonly]), select.form-control:not(:disabled), textarea.form-control:not(:disabled):not([readonly])) {
  min-height: 44px;
  border-radius: 10px;
}

body.test-environment .work-surface.work-surface--half .dxbl-text-edit:not(.dxbl-disabled):not(.dxbl-readonly) {
  /* min-height: i campi a selezione multipla o memo possono crescere. */
  min-height: 44px;
}

body.test-environment .work-surface.work-surface--half .dxbl-text-edit:not(.dxbl-disabled):not(.dxbl-readonly) :is(input, .dxbl-text-edit-input) {
  min-height: 42px;
  padding: 0 14px;
}

/* ---------- e) Vassoio azioni in fondo ---------- */
/* Escluse le modali annidate nella scheda (.editor-dialog): hanno il vassoio di modals-v2.css. */
body.test-environment .work-surface.work-surface--half .modal-form-actions:where(:not(.editor-dialog *)) {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 24px -28px 0;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  background: rgba(248, 250, 252, .96);
  backdrop-filter: blur(6px);
}

/* Se il vassoio chiude la scheda, riempie anche il rientro in basso e segue gli angoli. */
body.test-environment .work-surface.work-surface--half > :last-child > .modal-form-actions:last-child:where(:not(.editor-dialog *)),
body.test-environment .work-surface.work-surface--half > .modal-form-actions:last-child {
  margin-bottom: -22px;
  border-radius: 0 0 18px 18px;
}

body.test-environment .work-surface.work-surface--half > .modal-form-actions {
  margin-inline: 0;
  padding-inline: 28px;
}

/* Salva spento: lo stile grigio del sito per i pulsanti disabilitati resta, qui si aggiunge solo l'attenuazione. */
body.test-environment .work-surface.work-surface--half .modal-form-actions:where(:not(.editor-dialog *)) .btn-primary:disabled,
body.test-environment .work-surface.work-surface--half .modal-form-actions:where(:not(.editor-dialog *)) .btn-primary.disabled {
  opacity: .5;
}

/* ---------- f) Tab sottolineate (tutte le .settings-tabs, anche partner-company-tabs e --left) ---------- */
body.test-environment .settings-tabs.settings-tabs {
  --tab-accent: var(--primary);
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 26px;
  width: 100%;
  max-width: 100%;
  /* Il margine inferiore non e' qui: dentro .settings-tab-shell e .surface-head resta 0 (site.css), vedi regola sotto. */
  padding: 0;
  /* Spazio dopo l'ultima tab: a fine corsa non resta mai sotto la sfumatura. */
  padding-inline-end: 28px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--border), var(--border)) bottom / 100% 1px no-repeat;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

/* Distanza dal contenuto solo per le tab libere: non dentro il riquadro delle tab ne' nella testata. */
body.test-environment .settings-tabs.settings-tabs:where(:not(.settings-tab-shell *, .surface-head *)) {
  margin-bottom: 20px;
}

/* Tab figlie dirette della scheda: stesso rientro laterale del titolo (margine, cosi' la linea di base parte dal titolo). */
body.test-environment .work-surface.work-surface--half > .settings-tabs.settings-tabs {
  width: auto;
  margin-inline: 28px;
}

/* Sfumatura a destra solo quando c'e' altro da scorrere: pseudo-elemento fisso al bordo (sticky), visibile
   a inizio corsa e spento negli ultimi 28px di scorrimento. Senza supporto non compare e la linea di base non sfuma mai. */
@supports (animation-timeline: scroll(inline)) {
  body.test-environment .settings-tabs.settings-tabs::after {
    content: "";
    position: sticky;
    right: 0;
    flex: none;
    width: 28px;
    margin-left: -28px;
    margin-bottom: 1px;
    background: linear-gradient(90deg, transparent, var(--surface));
    pointer-events: none;
    opacity: 0;
    animation: nh-tabs-fade linear both;
    animation-timeline: scroll(inline);
    animation-range: calc(100% - 28px) 100%;
  }
}

@keyframes nh-tabs-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

body.test-environment .settings-tabs.settings-tabs::-webkit-scrollbar {
  display: none;
}

body.test-environment .settings-tabs .settings-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #475569; /* slate 600, nessun token equivalente */
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}

body.test-environment .settings-tabs .settings-tab:hover {
  background: none;
  color: var(--text);
}

body.test-environment .settings-tabs .settings-tab.active {
  background: none;
  box-shadow: none;
  color: var(--text);
}

body.test-environment .settings-tabs .settings-tab.active::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--tab-accent, var(--primary));
}

body.test-environment .settings-tabs .settings-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Conteggio: etichetta tonda grigia con cifre tabulari. */
body.test-environment .settings-tab .tab-count {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* Errori per scheda (classe predisposta per il futuro): numero bianco su rosso. */
body.test-environment .settings-tab .tab-errors {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* ---------- g) Popup della combobox (portale sotto <body>, classe nh-combo-dd da BlazorComboBoxInput via DropDownCssClass) ---------- */
/* Struttura come in smart-table-filters.css (.nhf-dd): dxbl-dropdown-dialog riceve la classe, le voci sono
   .dxbl-list-box-render-container ul > li, la selezionata ha aria-selected="true". Il tema fissa bordo, raggio e ombra
   con specificita' alta, per questo li' serve !important. Lo z-index non si tocca (lo gestisce site.css). */
body.test-environment dxbl-dropdown-dialog.nh-combo-dd {
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 22px 40px -14px rgba(15, 23, 42, .38) !important;
  background: var(--surface);
  overflow: hidden;
}

body.test-environment dxbl-dropdown-dialog.nh-combo-dd .dxbl-list-box-render-container ul {
  margin: 0;
  padding: 4px;
}

body.test-environment dxbl-dropdown-dialog.nh-combo-dd .dxbl-list-box-render-container li {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14.5px;
}

body.test-environment dxbl-dropdown-dialog.nh-combo-dd .dxbl-list-box-render-container li:is(:hover, :focus-visible) {
  background: var(--surface-soft);
}

body.test-environment dxbl-dropdown-dialog.nh-combo-dd .dxbl-list-box-render-container li[aria-selected="true"] {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 700;
}

/* ---------- h) Telefono ---------- */
@media (max-width: 560px) {
  body.test-environment .work-surface.work-surface--half {
    max-width: 100%;
    border-radius: 14px;
  }

  body.test-environment .work-surface.work-surface--half::before {
    border-radius: 14px 14px 0 0;
  }

  body.test-environment .work-surface.work-surface--half > :where(:not(.surface-head)) {
    padding-inline: 18px;
  }

  body.test-environment .work-surface.work-surface--half > .surface-head {
    padding: 20px 18px 0;
  }

  body.test-environment .work-surface.work-surface--half > .surface-head h2 {
    font-size: 22px;
  }

  body.test-environment .work-surface.work-surface--half .modal-form-actions:where(:not(.editor-dialog *)) {
    margin-inline: -18px;
    padding: 12px 18px;
  }

  body.test-environment .work-surface.work-surface--half > .modal-form-actions {
    margin-inline: 0;
    padding-inline: 18px;
  }

  body.test-environment .work-surface.work-surface--half .modal-form-actions:where(:not(.editor-dialog *)) .btn {
    min-height: 44px;
  }

  body.test-environment .work-surface.work-surface--half > .surface-head .expense-icon-button.btn-outline-secondary {
    min-width: 44px;
    min-height: 44px;
  }

  body.test-environment .work-surface.work-surface--half > .surface-head:has(.expense-icon-button.btn-outline-secondary) {
    padding-left: 60px;
  }

  /* Indietro a 44px: centro del titolo da 22px (20px di rientro alto + mezza riga); con eyebrow scende di una riga. */
  body.test-environment .work-surface.work-surface--half > .surface-head .expense-icon-button.btn-outline-secondary {
    left: 12px;
    top: 10px;
  }

  body.test-environment .work-surface.work-surface--half > .surface-head:has(.eyebrow) .expense-icon-button.btn-outline-secondary {
    top: 32px;
  }

  body.test-environment .work-surface.work-surface--half > .settings-tabs.settings-tabs {
    margin-inline: 18px;
  }

  body.test-environment dxbl-dropdown-dialog.nh-combo-dd .dxbl-list-box-render-container li {
    min-height: 48px;
    font-size: 16px;
  }
}

/* ---------- i) Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  body.test-environment .work-surface.work-surface--half *,
  body.test-environment .settings-tabs * {
    transition: none !important;
    animation: none !important;
  }
}