/* ---------------------------------------------------------
   20. Coherence helpers
   These class names were used in server-rendered markup (appalti, audit/CAPA,
   dpi, import, several inline forms) but had no rule, so they fell back to raw
   browser styling — unstyled cards, grey native selects/inputs that didn't
   match the rest of the app. Map them onto the existing design tokens so every
   form, filter and helper looks coherent. No new colours/spacing introduced.
   --------------------------------------------------------- */

/* Muted text — alias of .text-muted (used widely as .muted). */
.muted { color: var(--color-text-muted); }

/* Larger intro paragraph (guida, landing copy). */
.lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}

/* Page subtitle under a page title. */
.page-subtitle { margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); }

/* Section heading row (title + optional inline action). */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 var(--sp-3);
}
.section-heading h2 { font-size: var(--text-lg); margin: 0; }

/* Card-style form container (mirror of .card-form). Neutral surface — no
   colored accent edge; identity comes from the heading inside, per §3.1. */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.form-card > h2 {
  font-size: var(--text-lg);
  line-height: 1.3;
  margin-bottom: var(--sp-4);
}
/* Bare submit buttons in legacy form cards get the same separation as the
   shared .form-actions bar. This is a layout safety net while screens are
   progressively migrated to an explicit action row. */
.form-card > .btn {
  margin-top: var(--sp-4);
}

/* Grid of labelled fields (label wraps its control directly). */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.form-grid > label {
  display: grid;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  /* Free-text areas read better spanning the full width. */
  .form-grid > label:has(textarea) { grid-column: 1 / -1; }
}

/* Stacked single field wrapper (label + control), used where .form-row isn't. */
.form-field {
  display: grid;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.form-field > label { font-size: var(--text-sm); font-weight: 500; }

/* Audit package: the two groups live inside the form card, rather than a
   second full-width card. This keeps the export scope legible and avoids
   controls visually colliding with the outer surface border. */
.audit-package-form { margin-top: var(--sp-5); }
.audit-package-form .form-grid { margin-bottom: 0; }
.audit-package-form fieldset { margin-bottom: 0; }
.audit-package-form__actions { margin-top: var(--sp-5); }

/* Inline form: controls + button on one line (restore/verify/ocr actions). */
.inline-form {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0;
}

/* Inline filter form (e.g. DPI per-ruolo): label + select + button on a line. */
.filter-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.filter-form label { font-size: var(--text-sm); font-weight: 500; }

/* Native controls inside the above containers (and any bare control in a
   .filter-bar) get the same field styling as .form-row controls so they no
   longer render as default grey browser widgets. */
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-field input,
.form-field select,
.form-field textarea,
.inline-form input,
.inline-form select,
.filter-form input,
.filter-form select,
.filter-bar select,
.filter-bar input:not([type="checkbox"]):not([type="radio"]) {
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-field input,
.form-field select,
.form-field textarea { width: 100%; }

/* OCR results remain a table on desktop, but its review actions must not
   determine the whole table's intrinsic width. Each alternative workflow is
   deliberately stacked inside a bounded action column. */
.ocr-results-table .data-table {
  min-width: 68rem;
  table-layout: fixed;
}
.ocr-results-table .data-table th:nth-child(1) { width: 3rem; }
.ocr-results-table .data-table th:nth-child(2) { width: 8rem; }
.ocr-results-table .data-table th:nth-child(3) { width: 10rem; }
.ocr-results-table .data-table th:nth-child(4) { width: 12rem; }
.ocr-results-table .data-table th:nth-child(5) { width: 15rem; }
.ocr-results-table .data-table th {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.ocr-results-table .data-table td {
  overflow-wrap: anywhere;
  vertical-align: top;
}
.ocr-results-table .badge {
  box-sizing: border-box;
  max-width: 100%;
  align-items: flex-start;
  white-space: normal;
}
.ocr-results-table td.actions {
  white-space: normal;
}
.ocr-results-actions {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}
.ocr-result-action__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ocr-review-help {
  margin: 0;
  padding-left: var(--sp-5);
}
.ocr-review-help li + li { margin-top: var(--sp-2); }
.ocr-batch-start p { max-width: 60rem; }
.ocr-results-intro {
  margin: var(--sp-3) 0 var(--sp-4);
  color: var(--color-text-muted);
}
.ocr-batch-landing { max-width: 54rem; }
.ocr-batch-landing .detail-list { margin-block: var(--sp-4); }
.confirm-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  max-width: 54rem;
  margin-bottom: var(--sp-3);
  color: var(--color-text);
}
.confirm-form .checkbox-row input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: .2em;
}

.ocr-batch-assignment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.ocr-batch-assignment__choice {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.ocr-batch-assignment__choice h2 {
  margin-bottom: var(--sp-2);
  font-size: var(--text-lg);
}
.ocr-batch-assignment__choice .card-form {
  padding: 0;
  border: 0;
  box-shadow: none;
}
.ocr-results-actions > form,
.ocr-results-actions > form.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: var(--sp-2);
  margin: 0;
}
.ocr-results-table td.actions .combobox {
  min-width: 0;
  width: 100%;
}
.ocr-results-table td.actions .btn {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

@media (max-width: 639px) {
  .ocr-results-table .data-table { min-width: 0; }
  .ocr-results-table .data-table td { vertical-align: middle; }
  .ocr-results-table td.actions {
    display: grid;
    justify-content: stretch;
    align-items: stretch;
    text-align: left;
  }
  .ocr-results-table td.actions::before { margin-bottom: var(--sp-2); }
  .ocr-results-table td.actions .btn { width: 100%; }
  .ocr-batch-assignment { grid-template-columns: minmax(0, 1fr); }
  .ocr-batch-assignment__choice .btn { width: 100%; }
}

@media (min-width: 640px) and (max-width: 1100px) {
  .ocr-results-table .data-table {
    min-width: 54rem;
    table-layout: auto;
  }
  .ocr-results-table .data-table th:nth-child(n) { width: auto; }
}

/* Hover gives the field life before it is focused (mirrors .form-row). */
.form-grid input:hover:not(:disabled):not(:focus),
.form-grid select:hover:not(:disabled):not(:focus),
.form-grid textarea:hover:not(:disabled):not(:focus),
.form-field input:hover:not(:disabled):not(:focus),
.form-field select:hover:not(:disabled):not(:focus),
.form-field textarea:hover:not(:disabled):not(:focus),
.inline-form input:hover:not(:disabled):not(:focus),
.inline-form select:hover:not(:disabled):not(:focus),
.filter-form input:hover:not(:disabled):not(:focus),
.filter-form select:hover:not(:disabled):not(:focus),
.filter-bar select:hover:not(:disabled):not(:focus),
.filter-bar input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-text-muted);
}

/* Focus uses the Registro accent regardless of area — interactive elements
   stay uniform across the app (matches .form-row in forms.css). */
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.inline-form input:focus,
.inline-form select:focus,
.filter-form input:focus,
.filter-form select:focus,
.filter-bar select:focus,
.filter-bar input:focus {
  outline: none;
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Compact inline input (verification notes, efficacy). */
.input-sm {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-sm);
}