/* ============================================================================
   BASE DELLE PAGINE MIGRATE AL DESIGN SYSTEM (body.ds-page)
   ----------------------------------------------------------------------------
   Regole condivise da tutte le pagine gia' migrate: base tipografica e sfondo,
   mappa dei .btn legacy sui ruoli del design system, flash, footer, ricerca
   punti vendita, "torna su". Caricato globalmente da base.html ma attivo solo
   con body.ds-page: le pagine non migrate non cambiano.
   Estratto da ds-home.css nella Mossa 3.
   ========================================================================== */

/* ---- Base pagina ---------------------------------------------------------- */
body.ds-page {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  -webkit-font-smoothing: antialiased;
}
body.ds-page h1 {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  letter-spacing: -.01em;
  color: var(--ds-text);
}
body.ds-page .home-title-row p { color: var(--ds-text-secondary); }
body.ds-page .muted { color: var(--ds-text-secondary); }
body.ds-page a { color: var(--ds-brand-text); }

/* Footer e flash coerenti col tema. */
body.ds-page .app-footer { color: var(--ds-text-faint); }
body.ds-page .flash {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-1);
}
body.ds-page .flash.ok { border-left: 4px solid var(--ds-success); }
body.ds-page .flash.error { border-left: 4px solid var(--ds-danger); }
body.ds-page .tfa-invite {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text);
}

/* ---- Bottoni: mappa dei .btn legacy sui ruoli del design system ----------- */
body.ds-page .btn, body.ds-page .btn-primary {
  background: var(--ds-brand-solid);
  border: 1px solid var(--ds-brand-solid);
  color: var(--ds-on-brand);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-semibold);
  transition: background-color var(--ds-dur-fast) var(--ds-ease),
              border-color var(--ds-dur-fast) var(--ds-ease),
              transform var(--ds-dur-fast) var(--ds-ease),
              box-shadow var(--ds-dur-fast) var(--ds-ease);
}
body.ds-page .btn:hover, body.ds-page .btn-primary:hover {
  background: var(--ds-brand-solid-hover);
  border-color: var(--ds-brand-solid-hover);
  box-shadow: var(--ds-shadow-1);
}
body.ds-page .btn:active { transform: scale(.97); }
body.ds-page .btn.secondary, body.ds-page .btn-secondary, body.ds-page .btn.home-back {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-strong);
  color: var(--ds-text);
}
body.ds-page .btn.secondary:hover, body.ds-page .btn-secondary:hover {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-text-secondary);
  color: var(--ds-text);
}
body.ds-page .btn.danger, body.ds-page .btn-danger {
  background: transparent;
  border: 1px solid var(--ds-danger-border);
  color: var(--ds-danger);
}
body.ds-page .btn.danger:hover, body.ds-page .btn-danger:hover {
  background: var(--ds-danger-surface);
  border-color: var(--ds-danger);
  color: var(--ds-danger);
}
body.ds-page .btn:disabled, body.ds-page .btn[disabled] {
  opacity: .45; filter: none; transform: none; cursor: not-allowed;
}
body.ds-page .btn:focus-visible { outline: 3px solid var(--ds-focus-ring); outline-offset: 2px; }
/* Stato di caricamento sul pulsante (invio prezzi in corso). */
body.ds-page .btn.is-loading {
  position: relative; color: transparent !important; pointer-events: none;
}
body.ds-page .btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--ds-on-brand); border-top-color: transparent;
  animation: ds-spin .7s linear infinite;
}
body.ds-page .read-only-badge {
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-surface-subtle);
  color: var(--ds-text-secondary);
}
body.ds-page .selection-count { color: var(--ds-text); }


/* ---- Ricerca punti vendita ------------------------------------------------------ */
body.ds-page .station-search label { color: var(--ds-text); }
body.ds-page .station-search input {
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); color: var(--ds-text);
}
body.ds-page .station-search input:focus-visible {
  border-color: var(--ds-brand);
  outline: 3px solid var(--ds-focus-ring); outline-offset: 1px;
}
body.ds-page .station-search-results {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-elevated);
  box-shadow: var(--ds-shadow-3);
}
body.ds-page .station-search-results button { background: transparent; color: var(--ds-text); }
body.ds-page .station-search-results button:hover,
body.ds-page .station-search-results button[aria-selected="true"] {
  background: var(--ds-brand-soft); color: var(--ds-text);
}
body.ds-page .station-search-results button span { color: var(--ds-text-secondary); }
body.ds-page .station-search-empty { color: var(--ds-text-secondary); }


/* ---- Torna su ----------------------------------------------------------------------- */
body.ds-page .back-to-top {
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-elevated);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-2);
  margin-bottom: env(safe-area-inset-bottom, 0px);
  transition: border-color var(--ds-dur-fast) var(--ds-ease),
              box-shadow var(--ds-dur-fast) var(--ds-ease),
              transform var(--ds-dur-fast) var(--ds-ease);
}
body.ds-page .back-to-top:hover {
  border-color: var(--ds-brand);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-3);
}


/* ---- Riduzione del movimento -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.ds-page .btn:active { transform: none; }
  body.ds-page .back-to-top { transition: none; }
}

/* ==== BANDA IMPIANTO (condivisa: homepage e Controllo dettagliato) ==== */
/* Identita' dell'impianto nella banda: marchio piccolo, LOCALITA' dominante.
   L'evidenza viene da contrasto e struttura, l'altezza resta compatta. */
body.ds-page .fs-identity { min-width: 0; }
body.ds-page .fs-identity h3 { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
body.ds-page .fs-name-prefix {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-label);
  text-transform: uppercase;
  opacity: .75;
}
body.ds-page .fs-name-main {
  font-size: 16px;
  font-weight: var(--ds-weight-black);
  letter-spacing: -.01em;
}

/* Banda impianto CONSOLIDATA (scelte di Andrea, 2026-08-18):
   - tema CHIARO: antracite VERTICALE LUMINOSA bisellata (chiara in alto,
     cupa in basso) con filo rosso Acton sotto;
   - tema SCURO: rosso Acton profondo bisellato (override piu' sotto).
   Valori fissi apposta: e' l'identita' della banda, non segue i token. */
body.ds-page .formulation-station-heading , body.ds-page .station-hero {
  background: linear-gradient(180deg, #4a4744 0%, #2b2a28 60%, #211f1e 100%);
  border-top: 1px solid rgba(255, 255, 255, .4);
  border-bottom: 2px solid var(--ds-brand-solid);
  color: #f4f2ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              inset 0 -4px 8px -5px rgba(0, 0, 0, .45),
              0 4px 10px rgba(32, 31, 29, .3);
}
body.ds-page .formulation-station-heading h3 , body.ds-page .station-hero h3 {
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
  color: inherit;
}
body.ds-page .formulation-station-heading .fs-name-main , body.ds-page .station-hero .fs-name-main {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
body.ds-page .formulation-station-heading .fs-identity span , body.ds-page .station-hero .fs-identity span { color: #b3afa7; }
body.ds-page .formulation-station-heading .fs-name-prefix , body.ds-page .station-hero .fs-name-prefix { color: #b3afa7; opacity: 1; }
body.ds-page .formulation-station { border-left: 1px solid var(--ds-border); }

/* In tema scuro l'antracite si confondeva con le card: banda in ROSSO ACTON
   PROFONDO sfumato con effetto bisellato (scelta finale di Andrea dopo tre
   giri di proposte, 2026-08-18): gradiente orizzontale rosso vivo -> cupo,
   bordo-luce sopra, bordo scuro sotto, luci/ombre laterali incise e ombra
   esterna. I badge di stato usano le pillole chiare (valori fissi apposta:
   devono staccare sul rosso). Nel tema chiaro la banda resta antracite. */
html[data-theme="dark"] body.ds-page .formulation-station-heading , html[data-theme="dark"] body.ds-page .station-hero {
  background: linear-gradient(90deg, #a01016 0%, #7a0a10 100%);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, .4);
  border-bottom: 2px solid #4a060a;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18),
              inset -1px 0 0 rgba(0, 0, 0, .3),
              inset 0 -6px 10px -6px rgba(0, 0, 0, .5),
              0 5px 12px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] body.ds-page .formulation-station-heading .fs-name-main , html[data-theme="dark"] body.ds-page .station-hero .fs-name-main {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] body.ds-page .formulation-station-heading .btn:not(.secondary) , html[data-theme="dark"] body.ds-page .station-hero .btn:not(.secondary) {
  border-color: rgba(255, 255, 255, .55);
}
html[data-theme="dark"] body.ds-page .formulation-station-heading .fs-identity span, html[data-theme="dark"] body.ds-page .station-hero .fs-identity span,
html[data-theme="dark"] body.ds-page .formulation-station-heading .fs-name-prefix , html[data-theme="dark"] body.ds-page .station-hero .fs-name-prefix { color: #f0b9bc; }
html[data-theme="dark"] body.ds-page .formulation-station {
  border-color: #54504a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] body.ds-page .formulation-station-heading .station-status--ok , html[data-theme="dark"] body.ds-page .station-hero .station-status--ok {
  color: #157a41; background: #e7f4ec; border-color: #b2d8c1;
}
html[data-theme="dark"] body.ds-page .formulation-station-heading .station-status--pending , html[data-theme="dark"] body.ds-page .station-hero .station-status--pending {
  color: #c9060f; background: #fdeeee; border-color: #f3b8bb;
}
html[data-theme="dark"] body.ds-page .formulation-station-heading .station-status--warning , html[data-theme="dark"] body.ds-page .station-hero .station-status--warning {
  color: #c2371f; background: #fdefec; border-color: #eec0b5;
}
/* Modalita' automatica con sistema scuro: stesse regole (tenerle IDENTICHE
   al blocco sopra). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station-heading ,   html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .station-hero {
    background: linear-gradient(90deg, #a01016 0%, #7a0a10 100%);
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, .4);
    border-bottom: 2px solid #4a060a;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18),
                inset -1px 0 0 rgba(0, 0, 0, .3),
                inset 0 -6px 10px -6px rgba(0, 0, 0, .5),
                0 5px 12px rgba(0, 0, 0, .5);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station-heading .fs-name-main ,   html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .station-hero .fs-name-main {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station-heading .btn:not(.secondary) ,   html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .station-hero .btn:not(.secondary) {
    border-color: rgba(255, 255, 255, .55);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station-heading .fs-identity span,   html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .station-hero .fs-identity span,
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station-heading .fs-name-prefix ,   html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .station-hero .fs-name-prefix { color: #f0b9bc; }
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station {
    border-color: #54504a;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station-heading .station-status--ok ,   html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .station-hero .station-status--ok {
    color: #157a41; background: #e7f4ec; border-color: #b2d8c1;
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station-heading .station-status--pending ,   html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .station-hero .station-status--pending {
    color: #c9060f; background: #fdeeee; border-color: #f3b8bb;
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .formulation-station-heading .station-status--warning ,   html:not([data-theme="light"]):not([data-theme="dark"]) body.ds-page .station-hero .station-status--warning {
    color: #c2371f; background: #fdefec; border-color: #eec0b5;
  }
}

/* Stato compatto del PV nella banda. */
body.ds-page .station-status {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
  white-space: nowrap; border: 1px solid var(--ds-border);
}
body.ds-page .station-status--ok {
  color: var(--ds-success); background: var(--ds-success-surface);
  border-color: var(--ds-success-border);
}
body.ds-page .station-status--pending {
  color: var(--ds-brand-text); background: var(--ds-brand-soft);
  border-color: var(--ds-brand-border);
}
body.ds-page .station-status--warning {
  color: var(--ds-danger); background: var(--ds-danger-surface);
  border-color: var(--ds-danger-border);
}


/* ============================================================================
   MOSSA 4 — BASE GLOBALE DELLE PAGINE MIGRATE
   Tipografia, tabelle, form, badge e wrapper comuni a tutte le sezioni.
   ========================================================================== */

/* ---- Titoli e intestazioni di pagina --------------------------------------- */
body.ds-page h1 { color: var(--ds-text); }
body.ds-page h2, body.ds-page h3 { color: var(--ds-text); font-family: var(--ds-font-sans); }
body.ds-page .sub, body.ds-page .hint, body.ds-page small.hint { color: var(--ds-text-secondary); }
body.ds-page .page-heading p.muted { color: var(--ds-text-secondary); }
body.ds-page .eyebrow, body.ds-page .admin-page .eyebrow {
  color: var(--ds-brand-text);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-label); text-transform: uppercase;
}
body.ds-page .section-heading h2 { color: var(--ds-text); }
body.ds-page .section-heading p { color: var(--ds-text-secondary); }

/* ---- Card/pannelli ---------------------------------------------------------- */
body.ds-page .panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-1);
}
body.ds-page .panel h2 {
  color: var(--ds-text);
  border-bottom: 2px solid var(--ds-brand);
  text-transform: none; letter-spacing: -.005em;
  font-size: var(--ds-text-lg); font-weight: var(--ds-weight-bold);
}

/* ---- Tabelle (globali) ------------------------------------------------------- */
body.ds-page th, body.ds-page td { border-bottom-color: var(--ds-border); }
body.ds-page thead th {
  background: var(--ds-surface-subtle);
  color: var(--ds-text-secondary);
  border-top: 2px solid var(--ds-brand);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-label); text-transform: uppercase;
}
body.ds-page tbody tr:hover { background: var(--ds-surface-subtle); }
body.ds-page td.num, body.ds-page th.num {
  font-variant-numeric: tabular-nums; font-feature-settings: var(--ds-numeric);
}
body.ds-page .current-sale-price, body.ds-page .rec-product { color: var(--ds-text); }
body.ds-page .pos { color: var(--ds-success); }
body.ds-page .neg { color: var(--ds-danger); }
body.ds-page .table-wrap, body.ds-page .responsive-table,
body.ds-page .seclog-table-wrap, body.ds-page .other-costs-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}
body.ds-page .responsive-table td small { color: var(--ds-text-secondary); }
body.ds-page .empty-state { color: var(--ds-text-secondary); }
body.ds-page .pagination span { color: var(--ds-text-secondary); }

/* ---- Form e campi (globali) --------------------------------------------------- */
body.ds-page input[type="text"], body.ds-page input[type="email"],
body.ds-page input[type="password"], body.ds-page input[type="number"],
body.ds-page input[type="date"], body.ds-page input[type="search"],
body.ds-page input[type="file"], body.ds-page select, body.ds-page textarea {
  background: var(--ds-surface); color: var(--ds-text);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-sans);
}
body.ds-page input:focus-visible, body.ds-page select:focus-visible,
body.ds-page textarea:focus-visible {
  border-color: var(--ds-brand);
  outline: 3px solid var(--ds-focus-ring); outline-offset: 1px;
}
body.ds-page form label { color: var(--ds-text); }
body.ds-page code {
  background: var(--ds-surface-subtle); color: var(--ds-text);
  border-radius: 4px; padding: 1px 5px;
  font-size: .92em;
}
body.ds-page pre {
  background: var(--ds-surface-subtle); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
}

/* ---- Badge e pillole (famiglie legacy) ----------------------------------------- */
body.ds-page .badge {
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius-full);
  font-weight: var(--ds-weight-bold);
}
body.ds-page .badge-ok {
  background: var(--ds-success-surface); border-color: var(--ds-success-border);
  color: var(--ds-success);
}
body.ds-page .badge-warn {
  background: var(--ds-warning-surface); border-color: var(--ds-warning-border);
  color: var(--ds-warning);
}
body.ds-page .status-pill {
  border-radius: var(--ds-radius-full);
  font-weight: var(--ds-weight-bold);
  padding: 2px 10px; display: inline-flex; align-items: center;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-subtle); color: var(--ds-text-secondary);
}
body.ds-page .status-pill.status-ok { background: var(--ds-success-surface); border-color: var(--ds-success-border); color: var(--ds-success); }
body.ds-page .status-pill.status-info { background: var(--ds-info-surface); border-color: var(--ds-info-border); color: var(--ds-info); }
body.ds-page .status-pill.status-muted { background: var(--ds-surface-subtle); color: var(--ds-text-secondary); }
/* Ruoli utente: Amministratore rosso Acton, Standard informativo, Visualizzatore neutro. */
body.ds-page .role-badge {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-subtle); color: var(--ds-text-secondary);
}
body.ds-page .role-badge.role-admin { background: var(--ds-brand-soft); border-color: var(--ds-brand-border); color: var(--ds-brand-text); }
body.ds-page .role-badge.role-user { background: var(--ds-info-surface); border-color: var(--ds-info-border); color: var(--ds-info); }
body.ds-page .role-badge.role-viewer { background: var(--ds-surface-subtle); border-color: var(--ds-border-strong); color: var(--ds-text-secondary); }
body.ds-page .stock-source-badge { border-radius: var(--ds-radius-full); font-weight: var(--ds-weight-bold); }
body.ds-page .stock-source-badge.automatic { background: var(--ds-success-surface); border-color: var(--ds-success-border); color: var(--ds-success); }
body.ds-page .stock-source-badge.manual { background: var(--ds-info-surface); border-color: var(--ds-info-border); color: var(--ds-info); }
body.ds-page .stock-source-badge.unavailable { background: var(--ds-surface-subtle); border-color: var(--ds-border); color: var(--ds-text-secondary); }
/* Giacenza CALCOLATA (PV senza sonda): distinta dalla rilevata da sonda. */
body.ds-page .stock-source-badge.calculated { background: var(--ds-warning-surface); border-color: var(--ds-warning-border); color: var(--ds-warning); }
body.ds-page .read-only-badge { background: var(--ds-surface-subtle); border-color: var(--ds-border-strong); color: var(--ds-text-secondary); }

/* ---- Griglie di stato (fortech, componenti di costo, dashboard admin) ----------- */
body.ds-page .status-grid > div {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  padding: 8px 10px; display: grid; gap: 2px;
}
body.ds-page .status-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
body.ds-page .status-grid b { color: var(--ds-text-secondary); font-size: var(--ds-text-xs); text-transform: uppercase; letter-spacing: var(--ds-tracking-label); }
body.ds-page .status-grid span { color: var(--ds-text); font-weight: var(--ds-weight-semibold); }

/* ---- Editor richiudibili e dettagli --------------------------------------------- */
body.ds-page .admin-editor {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface); box-shadow: var(--ds-shadow-1);
}
body.ds-page .admin-editor summary { color: var(--ds-text); }
body.ds-page .admin-editor[open] summary { border-bottom-color: var(--ds-border); }
/* :not(.header-icon-button): il summary del menu Strumenti amministrativi
   nella topbar deve restare bianco come le altre icone di navigazione (la
   topbar e' scura in entrambi i temi); senza esclusione questa regola vince
   per specificita' su .header-icon-button e in tema chiaro l'icona diventava
   quasi nera su fondo scuro. */
body.ds-page details > summary:not(.header-icon-button) { color: var(--ds-text); }

/* ---- Menu strumenti nell'header (tema) -------------------------------------------- */
body.ds-page .header-menu-panel {
  border-color: var(--ds-border);
  background: var(--ds-surface-elevated);
  box-shadow: var(--ds-shadow-3);
}
body.ds-page header.topbar .header-menu-panel a,
body.ds-page header.topbar .header-menu-panel button {
  color: var(--ds-text);
}
body.ds-page header.topbar .header-menu-panel a:hover,
body.ds-page header.topbar .header-menu-panel button:hover {
  background: var(--ds-brand-soft); color: var(--ds-brand-text);
}
body.ds-page .header-menu-head { color: var(--ds-text-secondary); }

/* ---- Trade Area (componente condiviso) --------------------------------------------- */
body.ds-page .ta-list-head {
  background: var(--ds-surface-subtle);
  color: var(--ds-text-secondary);
  border-top: 2px solid var(--ds-brand);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-label); text-transform: uppercase;
}
body.ds-page .ta-own-badge {
  background: var(--ds-brand-soft); border: 1px solid var(--ds-brand-border);
  color: var(--ds-brand-text); border-radius: var(--ds-radius-full);
  font-weight: var(--ds-weight-bold);
}
body.ds-page .ta-delta.ta-cheaper { color: var(--ds-success); }
body.ds-page .ta-delta.ta-higher { color: var(--ds-danger); }
body.ds-page .ta-delta.ta-equal { color: var(--ds-text-secondary); }
body.ds-page .ta-extreme.ta-min { color: var(--ds-success); font-weight: var(--ds-weight-bold); }
body.ds-page .ta-extreme.ta-max { color: var(--ds-danger); font-weight: var(--ds-weight-bold); }
body.ds-page .ta-row-sub, body.ds-page .ta-legend-hint { color: var(--ds-text-secondary); }
body.ds-page .ta-tabs button {
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-full);
  background: var(--ds-surface); color: var(--ds-text-secondary);
  font-family: var(--ds-font-sans); font-weight: var(--ds-weight-semibold);
}
body.ds-page .ta-tabs button[aria-selected="true"],
body.ds-page .ta-tabs button.active {
  background: var(--ds-brand-soft); border-color: var(--ds-brand-border);
  color: var(--ds-brand-text);
}
/* Superfici e testi della lista: le regole legacy di style.css usano token
   solo-chiari (--surface-card, --brand-light, --brand-dark), che in tema
   scuro lasciavano la lista BIANCA sotto testo color --ds-text (nomi dei
   concorrenti illeggibili). Il bridge va tenuto completo: superficie E testo
   insieme, mai solo uno dei due. */
body.ds-page .ta-list,
body.ds-page .ta-nearby-block {
  background: var(--ds-surface);
  border-color: var(--ds-border);
}
body.ds-page .ta-row { border-bottom-color: var(--ds-border); }
body.ds-page .ta-nearby-block .ta-row { border-top-color: var(--ds-border); }
body.ds-page .ta-row-own {
  background: var(--ds-brand-soft);
  border-left-color: var(--ds-brand);
}
body.ds-page .ta-row-nearby { background: var(--ds-surface-subtle); }
body.ds-page .ta-row-who b { color: var(--ds-text); font-weight: var(--ds-weight-bold); }
body.ds-page .ta-row-price { color: var(--ds-text); }
body.ds-page .ta-row-details { color: var(--ds-text-secondary); }
body.ds-page .ta-row-details summary,
body.ds-page .ta-nearby-block > summary { color: var(--ds-text); }
body.ds-page .ta-extreme.ta-max { background: var(--ds-danger-surface); }
body.ds-page .ta-extreme.ta-min { background: var(--ds-success-surface); }
body.ds-page .ta-outlet-base { border-color: var(--ds-brand); color: var(--ds-brand-text); }