/*
 * Tema del console Tools: traduce i token di ../design_system (assets/ds/*.css) nelle variabili e
 * nei componenti di Bootstrap 5.3. Le regole del design system che questo file applica:
 *  - un valore esiste solo se ha un token: niente hex qui, solo var(--...);
 *  - un solo significato per colore (azzurro primario, navy struttura, toni di stato per gli avvisi);
 *  - tipografia del console 28/800 titolo, 20/700 sezione, 15/700 valore, 15/400 testo, 11/800
 *    etichetta maiuscola, 13/400 meta';
 *  - raggi 8 (controlli) e 12 (card), due ombre, focus 2px con offset 2px, nessun gradiente.
 * Caricato DOPO bootstrap.min.css: sovrascrive le variabili e i componenti compilati da Bootstrap.
 */

/* --------------------------------------------------------------- variabili */

:root {
  /* colore: le utility di Bootstrap leggono questi rgb, quindi li riallineiamo ai token */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 0, 114, 158;
  --bs-secondary-rgb: 94, 110, 124;
  --bs-success-rgb: 26, 122, 94;
  --bs-danger-rgb: 163, 43, 30;
  --bs-warning-rgb: 138, 90, 0;
  --bs-info-rgb: 70, 88, 106;
  --bs-light-rgb: 244, 247, 249;
  --bs-dark-rgb: 12, 62, 86;

  --bs-body-color: var(--text-primary);
  --bs-body-color-rgb: 27, 42, 56;
  --bs-body-bg: var(--surface-page);
  --bs-body-bg-rgb: 247, 249, 251;
  --bs-emphasis-color: var(--text-primary);
  --bs-emphasis-color-rgb: 27, 42, 56;
  --bs-secondary-color: var(--text-label);
  --bs-secondary-bg: var(--surface-quote);
  --bs-tertiary-color: var(--text-label);
  --bs-tertiary-bg: var(--surface-quote);
  --bs-heading-color: var(--text-primary);
  --bs-border-color: var(--border-card);
  --bs-border-color-translucent: var(--border-card);
  --bs-highlight-bg: var(--warning-bg);

  --bs-link-color: var(--primary);
  --bs-link-color-rgb: 0, 114, 158;
  --bs-link-hover-color: var(--primary-hover);
  --bs-link-hover-color-rgb: 0, 91, 126;

  /* forma e tipografia */
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 15px;
  --bs-body-font-weight: var(--text-body-weight);
  --bs-body-line-height: 1.5;
  --bs-border-radius: var(--radius-control);
  --bs-border-radius-sm: var(--radius-control);
  --bs-border-radius-lg: var(--radius-card);
  --bs-border-radius-xl: var(--radius-card);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-box-shadow-sm: var(--shadow-rest);
  --bs-box-shadow: var(--shadow-raised);
}

/* -------------------------------------------------------------- tipografia */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  color: var(--text-primary);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1,
.h1 {
  font-size: var(--text-page-title-size);
  font-weight: var(--text-page-title-weight);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* il console non ha una scala sotto il titolo di pagina: i livelli h2-h4 sono "sezione" */
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-size: var(--text-section-size);
  font-weight: var(--text-section-weight);
  line-height: 1.3;
}

h5,
.h5 {
  font-size: var(--text-value-size);
  font-weight: var(--text-value-weight);
}

h6,
.h6 {
  margin-bottom: var(--space-2);
  font-size: var(--text-meta-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--text-label);
}

small,
.small,
.form-text {
  font-size: var(--text-meta-size);
}

.form-text {
  color: var(--text-label);
}

hr {
  border-color: var(--border-card);
  opacity: 1;
}

/* focus: anello 2px con offset 2px sempre visibile; i campi usano il ring del design system */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- bottoni */

.btn {
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-size: var(--text-body-size);
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: var(--space-4);
  --bs-btn-padding-y: 0;
  --bs-btn-border-radius: var(--radius-control);
  --bs-btn-focus-box-shadow: var(--focus-ring);
  --bs-btn-disabled-opacity: 0.45;
  --bs-btn-active-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  line-height: 1.2;
  white-space: nowrap;
}

.btn-sm {
  --bs-btn-padding-x: var(--space-3);
  --bs-btn-font-size: var(--text-meta-size);
  height: var(--space-8);
}

/* primario: azzurro pieno, hover #005B7E (primary-hover) */
.btn-primary,
.btn-primary:active,
.btn-primary:disabled,
.btn-primary.disabled {
  --bs-btn-color: var(--on-primary);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-color: var(--on-primary);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

/* secondario: superficie bianca, bordo e testo primari, hover sulla superficie citata */
.btn-outline-primary,
.btn-outline-primary:active {
  --bs-btn-color: var(--primary);
  --bs-btn-bg: var(--surface-card);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary);
  --bs-btn-hover-bg: var(--surface-quote);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: var(--primary);
  --bs-btn-active-bg: var(--surface-quote);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-bg: var(--surface-card);
  --bs-btn-disabled-border-color: var(--border-input);
}

/* neutro: bordo input, testo primario */
.btn-secondary,
.btn-light {
  --bs-btn-color: var(--text-primary);
  --bs-btn-bg: var(--surface-quote);
  --bs-btn-border-color: var(--border-card);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--surface-page);
  --bs-btn-hover-border-color: var(--border-input);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-bg: var(--surface-page);
  --bs-btn-active-border-color: var(--border-input);
  --bs-btn-disabled-color: var(--text-label);
  --bs-btn-disabled-bg: var(--surface-quote);
  --bs-btn-disabled-border-color: var(--border-card);
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border-input);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--surface-quote);
  --bs-btn-hover-border-color: var(--border-input);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-bg: var(--surface-quote);
  --bs-btn-active-border-color: var(--border-input);
  --bs-btn-disabled-color: var(--text-label);
  --bs-btn-disabled-border-color: var(--border-card);
}

/* distruttivo: solo il bordo e il testo incriticale finche' non si conferma */
.btn-outline-danger {
  --bs-btn-color: var(--critical);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--critical);
  --bs-btn-hover-color: var(--critical);
  --bs-btn-hover-bg: var(--critical-bg);
  --bs-btn-hover-border-color: var(--critical);
  --bs-btn-active-color: var(--critical);
  --bs-btn-active-bg: var(--critical-bg);
  --bs-btn-active-border-color: var(--critical);
  --bs-btn-disabled-color: var(--critical);
  --bs-btn-disabled-border-color: var(--border-input);
}

.btn-danger,
.btn-success,
.btn-dark {
  --bs-btn-color: var(--on-primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--on-primary);
  --bs-btn-disabled-border-color: transparent;
}

.btn-danger {
  --bs-btn-bg: var(--critical);
  --bs-btn-hover-bg: var(--critical);
  --bs-btn-active-bg: var(--critical);
  --bs-btn-disabled-bg: var(--critical);
}

.btn-success {
  --bs-btn-bg: var(--ok);
  --bs-btn-hover-bg: var(--ok);
  --bs-btn-active-bg: var(--ok);
  --bs-btn-disabled-bg: var(--ok);
}

.btn-dark {
  --bs-btn-bg: var(--surface-deep);
  --bs-btn-hover-bg: var(--surface-deep);
  --bs-btn-active-bg: var(--surface-deep);
  --bs-btn-disabled-bg: var(--surface-deep);
}

/* testuale: nessun bordo, sottolineatura in hover */
.btn-link {
  --bs-btn-color: var(--primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--primary-hover);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--primary-hover);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-box-shadow: none;
  font-weight: 700;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------- form e campi */

.form-control,
.form-select {
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border-color: var(--border-input);
  border-radius: var(--radius-control);
  background-color: var(--surface-card);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
}

/* bootstrap disegna la freccia della tendina dentro il padding destro: va riservato */
.form-select {
  padding-right: 2.25rem;
}

textarea.form-control {
  min-height: 0;
  padding: var(--space-2) var(--space-3);
}

.form-control-sm,
.form-select-sm {
  min-height: var(--space-8);
  font-size: var(--text-meta-size);
}

.form-control::placeholder {
  color: var(--text-label);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  background-color: var(--surface-card);
  color: var(--text-primary);
  outline: none;
  box-shadow: var(--focus-ring);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--surface-quote);
  color: var(--text-label);
}

.form-label {
  margin-bottom: var(--space-1);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--text-label);
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.25rem + 2px);
  padding: var(--space-4) var(--space-3) var(--space-1);
}

.form-floating > label {
  padding: var(--space-3);
  font-size: var(--text-meta-size);
  color: var(--text-label);
}

.form-check-input {
  width: 1.15em;
  height: 1.15em;
  border-color: var(--border-input);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: var(--focus-ring);
}

.form-check-label,
.form-check {
  font-size: var(--text-body-size);
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: none;
}

/* ----------------------------------------------------------------- tabelle */

.table {
  --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-card);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: var(--surface-quote);
  --bs-table-active-color: var(--text-primary);
  --bs-table-active-bg: var(--surface-quote);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: var(--surface-page);
  margin-bottom: 0;
  font-size: var(--text-body-size);
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  padding: var(--space-3) var(--space-4);
}

.table thead th,
.table-light {
  --bs-table-color: var(--text-label);
  --bs-table-bg: var(--surface-quote);
  --bs-table-border-color: var(--border-card);
  --bs-table-hover-color: var(--text-label);
  --bs-table-hover-bg: var(--surface-quote);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody td {
  vertical-align: middle;
}

.table > tbody > tr:last-child > * {
  border-bottom: 0;
}

.table-dark {
  --bs-table-color: var(--text-inverse);
  --bs-table-bg: var(--surface-deep);
  --bs-table-border-color: color-mix(in srgb, var(--brand-ghiaccio) 16%, var(--surface-deep));
  --bs-table-hover-color: var(--text-inverse);
  --bs-table-hover-bg: color-mix(in srgb, var(--brand-ghiaccio) 6%, var(--surface-deep));
}

/* la tabella responsive e' una card del design system (radius 12 + ombra rest) */
.table-responsive {
  background-color: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
}

/* ------------------------------------------------------------------- card */

.card {
  --bs-card-border-color: var(--border-card);
  --bs-card-border-radius: var(--radius-card);
  --bs-card-bg: var(--surface-card);
  --bs-card-cap-bg: var(--surface-card);
  --bs-card-inner-border-radius: calc(var(--radius-card) - 1px);
  box-shadow: var(--shadow-rest);
}

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

.card-title {
  font-size: var(--text-section-size);
  font-weight: var(--text-section-weight);
}

/* --------------------------------------------------------- avvisi e badge */

.alert {
  --bs-alert-border: 0;
  --bs-alert-border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-size);
}

.alert-danger {
  --bs-alert-color: var(--critical);
  --bs-alert-bg: var(--critical-bg);
}

.alert-warning {
  --bs-alert-color: var(--warning);
  --bs-alert-bg: var(--warning-bg);
}

.alert-success {
  --bs-alert-color: var(--ok);
  --bs-alert-bg: var(--ok-bg);
}

.alert-info,
.alert-light,
.alert-secondary {
  --bs-alert-color: var(--neutral);
  --bs-alert-bg: var(--neutral-bg);
}

.badge {
  --bs-badge-padding-x: var(--space-2);
  --bs-badge-padding-y: var(--space-1);
  --bs-badge-font-size: var(--text-meta-size);
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: var(--radius-pill);
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.badge.bg-secondary,
.badge.bg-light,
.badge.bg-primary {
  background-color: var(--neutral-bg) !important;
  color: var(--neutral) !important;
}

.badge.bg-success {
  background-color: var(--ok-bg) !important;
  color: var(--ok) !important;
}

.badge.bg-warning {
  background-color: var(--warning-bg) !important;
  color: var(--warning) !important;
}

.badge.bg-danger {
  background-color: var(--critical-bg) !important;
  color: var(--critical) !important;
}

.badge.bg-dark {
  background-color: var(--surface-deep) !important;
  color: var(--text-inverse) !important;
}

/* ------------------------------------------------------- tab, menu, modali */

.nav-tabs {
  gap: var(--space-6);
  border-bottom: 1px solid var(--border-card);
}

.nav-tabs .nav-link {
  height: var(--touch-target);
  margin-bottom: -1px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--text-label);
  font-size: var(--text-body-size);
  font-weight: 600;
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border-bottom-color: var(--border-input);
}

.nav-tabs .nav-link.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  background: none;
  font-weight: 700;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--border-card);
  --bs-dropdown-border-radius: var(--radius-control);
  --bs-dropdown-link-active-bg: var(--surface-quote);
  --bs-dropdown-link-active-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--surface-page);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-font-size: var(--text-body-size);
  box-shadow: var(--shadow-raised);
  padding: var(--space-2) 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
}

.dropdown-divider {
  border-color: var(--border-card);
}

.accordion {
  --bs-accordion-color: var(--text-primary);
  --bs-accordion-bg: var(--surface-card);
  --bs-accordion-border-color: var(--border-card);
  --bs-accordion-border-radius: var(--radius-card);
  --bs-accordion-inner-border-radius: calc(var(--radius-card) - 1px);
  --bs-accordion-btn-color: var(--text-primary);
  --bs-accordion-btn-bg: var(--surface-card);
  --bs-accordion-active-color: var(--text-primary);
  --bs-accordion-active-bg: var(--surface-quote);
  --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
}

.accordion-button {
  font-size: var(--text-body-size);
  font-weight: 700;
}

.offcanvas {
  --bs-offcanvas-bg: var(--surface-card);
  --bs-offcanvas-color: var(--text-primary);
  --bs-offcanvas-border-color: var(--border-card);
}

.modal {
  --bs-modal-border-color: var(--border-card);
  --bs-modal-border-radius: var(--radius-card);
  --bs-modal-header-border-color: var(--border-card);
  --bs-modal-footer-border-color: var(--border-card);
  --bs-modal-bg: var(--surface-card);
}

.modal-content {
  box-shadow: var(--shadow-raised);
}

.modal-title {
  font-size: var(--text-section-size);
  font-weight: var(--text-section-weight);
}

.toast {
  --bs-toast-bg: var(--surface-card);
  --bs-toast-border-color: var(--border-card);
  --bs-toast-border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}

.pagination {
  --bs-pagination-color: var(--primary);
  --bs-pagination-hover-color: var(--primary-hover);
  --bs-pagination-hover-bg: var(--surface-quote);
  --bs-pagination-focus-color: var(--primary);
  --bs-pagination-focus-box-shadow: var(--focus-ring);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-border-color: transparent;
  gap: var(--space-1);
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-control);
  font-weight: 700;
}

.spinner-border {
  color: var(--primary);
}

/* ------------------------------------------------- componenti delle pagine */

/* contorno di pagina: le pagine legacy non devono piu' disegnare il proprio sfondo/ombra */
.ds-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.ds-page--narrow {
  max-width: 1100px;
}

.ds-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

/* la parte descrittiva puo' restringersi, le azioni restano a destra senza coprire il testo */
.ds-page-head > :first-child {
  flex: 1 1 240px;
  min-width: 0;
}

.ds-page-head h1,
.ds-page-head h2,
.ds-page-head .h1,
.ds-page-head .h2 {
  margin: 0;
}

.ds-card {
  padding: var(--space-6);
  background-color: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
}

.ds-card--flush {
  padding: 0;
  overflow: hidden;
}

/* tabella "nuda" (senza le classi di Bootstrap): la stessa pelle di .table */
.ds-table-wrap {
  overflow: auto;
  background-color: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-size);
}

.ds-table thead th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-card);
  background-color: var(--surface-quote);
  color: var(--text-label);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.ds-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-card);
  vertical-align: middle;
}

.ds-table tbody tr:hover {
  background-color: var(--surface-page);
}

.ds-table tbody tr:last-child td {
  border-bottom: 0;
}

.ds-table tbody td:first-child {
  font-weight: 700;
}

.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* le tendine non si restringono (il testo dell'opzione non deve tagliarsi): lo spazio lo
   assorbe il campo di ricerca, che ha flex-grow */
.ds-toolbar .form-select {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
}

.ds-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-label);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
}

.ds-muted {
  color: var(--text-label);
  font-size: var(--text-meta-size);
}

/* pill di stato: tono di stato + etichetta, mai solo il colore */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background-color: var(--neutral-bg);
  color: var(--neutral);
  font-size: var(--text-meta-size);
  font-weight: 700;
  white-space: nowrap;
}

.ds-pill--ok {
  background-color: var(--ok-bg);
  color: var(--ok);
}

.ds-pill--warning {
  background-color: var(--warning-bg);
  color: var(--warning);
}

.ds-pill--critical {
  background-color: var(--critical-bg);
  color: var(--critical);
}

.ds-empty {
  padding: var(--space-6);
  background-color: var(--surface-card);
  border: 1px dashed var(--border-input);
  border-radius: var(--radius-card);
  color: var(--text-label);
  font-size: var(--text-body-size);
}

.ds-pre {
  overflow: auto;
  padding: var(--space-3);
  background-color: var(--surface-quote);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-meta-size);
  line-height: 1.5;
}

/* form "nudo": i campi senza classi di Bootstrap prendono la stessa pelle dei form-control */
.ds-form :is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']), select, textarea) {
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  background-color: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
}

.ds-form textarea {
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

.ds-form :is(input, select, textarea):focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: var(--focus-ring);
}

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

/* ------------------------------------------- pattern del console (record) */

/* drawer del record: elenco in secondo piano + pannello a destra, header con le azioni,
   corpo a sezioni, Elimina in fondo (design system: Drawer 896px, qui 720 per stare comodo
   accanto alla sidebar) */
.ds-drawer-page {
  position: fixed;
  inset: var(--app-topbar-h) 0 0 0;
  z-index: 1010;
  display: flex;
  background-color: color-mix(in srgb, var(--surface-deep) 55%, transparent);
}

.ds-drawer-scrim {
  flex: 1 1 auto;
  padding: var(--space-6);
  color: var(--text-inverse);
  font-size: var(--text-meta-size);
}

.ds-drawer {
  display: flex;
  flex: 0 1 720px;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  overflow-y: auto;
  background-color: var(--surface-card);
  box-shadow: var(--shadow-raised);
}

.ds-drawer-head > :first-child {
  flex: 1 1 320px;
  min-width: 0;
}

.ds-drawer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-card);
}

.ds-drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}

.ds-drawer-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ds-drawer-footer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-card);
}

@media (max-width: 991.98px) {
  .ds-drawer-scrim {
    display: none;
  }

  .ds-drawer {
    flex: 1 1 auto;
  }
}

/* barra delle azioni della tabella: compare con almeno una riga selezionata */
.ds-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background-color: var(--surface-deep);
  color: var(--text-inverse);
}

.ds-bulkbar[hidden] {
  display: none;
}

.ds-bulkbar .btn {
  --bs-btn-color: var(--text-inverse);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--brand-ghiaccio);
  --bs-btn-hover-color: var(--surface-deep);
  --bs-btn-hover-bg: var(--brand-ghiaccio);
  --bs-btn-hover-border-color: var(--brand-ghiaccio);
  --bs-btn-active-color: var(--surface-deep);
  --bs-btn-active-bg: var(--brand-ghiaccio);
  --bs-btn-active-border-color: var(--brand-ghiaccio);
  --bs-btn-focus-box-shadow: 0 0 0 2px var(--surface-deep), 0 0 0 4px var(--brand-ghiaccio);
  height: var(--space-8);
  font-size: var(--text-meta-size);
}

.ds-bulkbar .btn-link {
  --bs-btn-color: var(--text-inverse);
  --bs-btn-hover-color: var(--text-inverse);
  text-decoration: underline;
}

.ds-bulkbar-count {
  flex: 1 1 auto;
  font-size: var(--text-value-size);
  font-weight: 700;
}

/* riga selezionata nell'elenco */
.ds-table tbody tr.is-selected {
  background-color: var(--neutral-bg);
}

/* passo del wizard di import */
.ds-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-body-size);
}

.ds-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-label);
}

.ds-step--done {
  color: var(--ok);
  font-weight: 700;
}

.ds-step--current {
  color: var(--primary);
  font-weight: 800;
}

.ds-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-pill);
  font-size: var(--text-meta-size);
}

.ds-step--current .ds-step-num {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--on-primary);
}

.ds-step--done .ds-step-num {
  border-color: var(--ok);
  color: var(--ok);
}

/* celle con codici (IMEI, ICCID, MSISDN): monospazio allineato, stessa taglia del testo */
/* elenco con molte colonne (wearable): padding stretto, cosi' la tabella sta nella larghezza
   del contenuto accanto alla sidebar */
.ds-table--records > :not(caption) > * > * {
  padding: var(--space-2) var(--space-3);
}

.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-meta-size);
  white-space: nowrap;
}

/* campo in errore: il messaggio sta sotto il campo, non in tooltip */
.ds-field-error {
  color: var(--critical);
  font-size: var(--text-meta-size);
  font-weight: 700;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--critical);
}

/* nota di avviso dentro un form (tenant, assegnazione) */
.ds-note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background-color: var(--warning-bg);
  color: var(--warning);
  font-size: var(--text-body-size);
}

.ds-note i {
  flex: 0 0 auto;
  font-size: 22px;
}

.ds-note[hidden] {
  display: none;
}

/* testata del record: titolo + pill sulla stessa riga */
.ds-record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ds-record-head h1 {
  margin: 0;
}