:root {
    /* Token temi (default SCURO) — sempre definiti; override in themes.css */
    --c-bg:#0c0c0c; --c-surface:#111111; --c-surface-2:#1a1a1a; --c-surface-3:#0f0f0f;
    --c-border:#232323; --c-text:#e5e5e5; --c-text-dim:#bbbbbb; --c-muted:#888888; --c-faint:#838383;
    --c-accent:#d6a83f; --c-accent-ink:#1a1305; --c-row-line:rgba(255,255,255,.05);
    --internal-bg: #101214;
    --internal-panel: #181c20;
    --internal-panel-soft: #20262b;
    --internal-border: #343b43;
    --internal-text: #f3f4f2;
    --internal-muted: #aeb6bd;
    --internal-gold: #d6a83f;
    --internal-red: #d86155;
    --internal-yellow: #d8b84e;
    --internal-green: #58b77a;
    --internal-blue: #6d99d6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   IL CARATTERE DELL'AREA INTERNA (14/10/2026, Luca: «sembra un Times New Roman, veramente antico»).
   ══════════════════════════════════════════════════════════════════════════════
   Questo foglio non dava un carattere alla pagina: ognuna se lo scriveva da sé, e chi se ne
   dimenticava finiva nel carattere di riserva del browser, il Times. Misurato aprendo una per una
   le 120 pagine interne: 107 con «'Inter', system-ui, sans-serif», 13 col Times (Flotta,
   Scadenziario, Da fare, Mansioni, Mezzi, Scadenze Golia, Persone estranee…).
   Qui il carattere standard per tutte. Una pagina che ne dichiara uno suo lo tiene: il suo <style>
   viene dopo questo foglio, a parità di peso vince lui.
   I campi e i bottoni non ereditano il carattere da soli (il browser dà loro Arial): con :where()
   il peso è zero, quindi ogni regola di pagina che ne sceglie uno continua a valere. */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
:where(button, input, select, textarea) { font-family: inherit; }

/* Layout app-like: topbar fissa + pannelli a scrolling indipendente */
.internal-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--internal-bg);
    color: var(--internal-text);
}

/* ══════════════════════════════════════════════════════════════════════════════
   .internal-lista — UNA PAGINA CHE SCORRE, con gli stessi colori del guscio.
   ══════════════════════════════════════════════════════════════════════════════
   ⚠️ PERCHE' ESISTE (22/09/2026, difetto segnalato da Luca su «Letture dei libretti»).

   `.internal-app` qui sopra NON e' un tema: e' un GUSCIO DA APPLICAZIONE. Impone al
   body height:100vh e overflow:hidden, e dà per scontato che dentro ci sia un
   `.internal-shell` con i suoi pannelli che scorrono per conto loro. Lo fanno
   davvero in due soli posti: il preventivatore interno e la Flotta.

   Il guaio e' che la classe SEMBRA quella «dell'area interna», e ogni pagina nuova
   copiata da una di quelle due se la porta dietro insieme ai colori — senza il
   pannello che scorre. Il risultato e' una finestra alta esattamente uno schermo
   che non scorre affatto: tutto ciò che sta sotto la piega diventa IRRAGGIUNGIBILE,
   col mouse, col dito e con la rotella. Su «Letture dei libretti» voleva dire che
   delle letture dei libretti se ne vedevano le prime e basta.

   ⚠️ NON SI VEDE SUL TELEFONO. Sotto i 1100px una @media più in basso in questo
   stesso file rimette `height:auto; overflow:visible`, e la pagina torna a
   scorrere. Quindi il difetto vive SOLO sul monitor grande — cioè dove la pagina
   si usa davvero, e dove chi la prova al volo da mobile non lo trova mai.

   Era già successo, e due volte: `interno/report_trasporti.php` porta un commento
   che racconta esattamente questo e si cura togliendo la classe;
   `includes/portal_header.php` se la cava con `html,body{overflow:auto!important}`.
   Due rattoppi in due posti per lo stesso difetto: questa classe è il terzo caso
   risolto una volta sola, con un nome che dice a cosa serve — così la prossima
   pagina copiata prende quella giusta invece di reintrodurre il guasto.

   REGOLA: pannelli affiancati che scorrono da soli → `.internal-app`.
           Un elenco, una tabella, delle card in colonna → `.internal-lista`.
   ══════════════════════════════════════════════════════════════════════════════ */
.internal-lista {
    /* 100dvh perché 100vh è l'altezza a barre del browser RITRATTE: su un telefono
       lascerebbe una striscia di fondo pagina sotto la barra degli indirizzi. Il vh
       resta scritto prima come ripiego per chi non conosce dvh. */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--internal-bg);
    color: var(--internal-text);
}

.internal-login {
    margin: 0;
    min-height: 100vh;
    background: var(--internal-bg);
    color: var(--internal-text);
}

/* ══ TOPBAR INTERNA — 2 righe ═══════════════════════════════════════════
   Riga 1: brand
   Riga 2: [🧪 ? + AI bar ←sinistra]   [nav →destra]
══════════════════════════════════════════════════════════════════════════ */
.internal-topbar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px clamp(12px, 2vw, 28px) 8px;
    border-bottom: 1px solid var(--internal-border);
    background: var(--c-surface);
}

/* Riga 1: brand */
.itb-row1 {
    display: flex;
    align-items: center;
}
.itb-logo {
    display: flex;
    align-items: center;
    gap: 7px;
}
.itb-mark {
    color: var(--internal-gold);
    font-size: 14px; font-weight: 900; line-height: 1;
}
.itb-titles { display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.itb-kicker {
    font-size: 8px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--internal-gold); opacity: .7;
}
.itb-name {
    font-size: 13px; font-weight: 800; color: var(--c-text);
    letter-spacing: .02em; text-transform: uppercase;
}

/* Riga 2: AI bar (sinistra, flex:1) + nav (destra, auto) */
.itb-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.itb-row2-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* Nav destra */
.itb-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.itb-nav-links {
    display: flex; align-items: center; gap: 2px;
    padding-right: 6px; border-right: 1px solid rgba(255,255,255,.08);
}
.itb-nav-links a {
    color: var(--internal-gold); font-size: 11px; font-weight: 600;
    padding: 4px 8px; border-radius: 4px; transition: background .15s; white-space: nowrap;
}
.itb-nav-links a:hover { background: rgba(214,168,63,.1); }
.itb-user {
    display: flex; align-items: center; gap: 8px;
    padding-left: 6px; border-left: 1px solid rgba(255,255,255,.08);
}
.itb-logout { font-size: 11px; color: rgba(255,255,255,.35) !important; transition: color .15s; }
.itb-logout:hover { color: rgba(255,255,255,.7) !important; }

/* itb-utils rimosso — i pulsanti ora sono in itb-row2-left direttamente */

/* Gruppo passthrough — portali esterni (solo admin) */
.nav-passthrough-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px;
    background: rgba(255,255,255,.03);
}
.nav-passthrough-group a {
    color: rgba(255,255,255,.45) !important;
    font-size: 11px;
    transition: color .15s;
    white-space: nowrap;
}
.nav-passthrough-group a:hover { color: rgba(255,255,255,.8) !important; }

/* Compat — topbar h1/p restano usati dal login panel */
.internal-topbar h1,
.internal-login-panel h1 {
    margin: 4px 0 6px;
    font-size: 30px;
    letter-spacing: 0;
}
.internal-topbar p,
.internal-login-panel p {
    margin: 0;
    color: var(--internal-muted);
}
.internal-topbar a { color: var(--internal-gold); }

/* ── V7: badge ruolo utente nella nav ──────────────────────── */
.nav-user-info { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.6); }
.nav-role-badge {
    font-size: 8px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; padding: 2px 6px; border-radius: 3px;
    vertical-align: middle;
}
.nav-role-badge.role-admin       { background: rgba(214,168,63,.18);  color: #d6a83f; border: 1px solid rgba(214,168,63,.3); }
.nav-role-badge.role-logistica   { background: rgba(99,179,237,.12);  color: #63b3ed; border: 1px solid rgba(99,179,237,.25); }
.nav-role-badge.role-operatore   { background: rgba(74,222,128,.10);  color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.nav-role-badge.role-subvettori  { background: rgba(167,139,250,.10); color: #a78bfa; border: 1px solid rgba(167,139,250,.2); }
.nav-role-badge.role-operatore_base { background: rgba(248,113,113,.08); color: #f87171; border: 1px solid rgba(248,113,113,.2); }

/* Classe body per CSS basato su ruolo */
body.role-subvettori .pv1-sel-targa-label,
body.role-operatore  .pv1-sel-targa-label { display: none; } /* nascondi targa nel header dettaglio */
.colli-match-type-only {
    font-size: 12px; padding: 6px 8px; margin: 4px 0;
    border-radius: 4px; background: rgba(255,255,255,.03);
}

.internal-kicker {
    display: block;
    color: var(--internal-gold);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.internal-shell {
    flex: 1;
    min-height: 0;               /* permette di shrinkare dentro il flex parent */
    display: grid;
    grid-template-columns: minmax(360px, 0.88fr) minmax(420px, 1.12fr);
    gap: 18px;
    padding: 14px clamp(16px, 4vw, 48px);
    align-items: stretch;        /* pannelli a tutta altezza disponibile */
}

.internal-panel,
.internal-login-panel {
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    background: var(--internal-panel);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.internal-form-panel,
.internal-results {
    position: relative;
    overflow: visible;      /* il bordo del gruppo deve restare libero: l'etichetta vi sborda sopra */
    display: flex;
    flex-direction: column;
    /* Con overflow: visible il browser non azzera piu' automaticamente la
       dimensione minima dell'elemento nella griglia (lo fa solo per overflow
       non-visible): senza questo min-height esplicito la riga della griglia
       cresce fino al contenuto, il pannello perde l'altezza vincolata e lo
       scorrimento interno (quindi quello "della pagina") sparisce. */
    min-height: 0;
}

/* Contenitore interno scorrevole: qui vivono padding e overflow, separati dal
   bordo del pannello, cosi' l'etichetta INPUT/OUTPUT puo' sovrapporsi al bordo
   senza essere tagliata dallo scrollport. */
.internal-panel-scroll {
    padding: 18px;
    overflow-y: auto;
    overflow-x: clip;   /* clip non blocca position:sticky a differenza di hidden */
    flex: 1;
    min-height: 0;
}

/* Gruppo INPUT: scrollbar nascosta come nelle colonne output — lo scroll resta
   pienamente funzionante (rotella, touchpad, tastiera, touch). Scoped al solo
   pannello form del preventivatore: nessun effetto globale. */
.internal-form-panel .internal-panel-scroll {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge legacy */
}
.internal-form-panel .internal-panel-scroll::-webkit-scrollbar {
    display: none;               /* Chrome/Edge/Safari */
}

/* I tab Preventivo/Storico/Richieste usano scrollIntoView su anchor dedicati
   (inizio form, filtri storico, comandi richieste): il margine evita che il
   target atterri coperto dalla topbar sticky o dalla barra comandi sticky.

   I DUE RIPIEGHI IN FILA, e perche' servono entrambi. --svs-top lo scrive il JS di
   interno/preventivi.php misurando .internal-topbar, che dal passaggio al layout
   unificato quella pagina non emette piu' (lo dice gia' il commento a preventivi.php
   riga 120): li' vale sempre il ripiego. E il ripiego non puo' restare 56px fisso,
   perche' dal 04/09 la barra unificata va su due righe quando le voci non ci stanno
   — con nove voci fra 1283 e 1386px e' alta 68 — e chi tocca le linguette atterrerebbe
   12px sotto la barra. --app-nav-h e' l'altezza VERA, pubblicata dalla barra stessa
   (includes/app_layout.php); il 56px finale copre il caso in cui il JS non giri, ed e'
   esattamente il comportamento di prima. */
#quoteForm, #historyPanel, #requestsPanel,
#historyTools, #requestsTools {
    scroll-margin-top: calc(var(--svs-top, var(--app-nav-h, 56px)) + 16px);
}

/* Tab INPUT / OUTPUT — etichetta "a rubrica": sborda e si sovrappone al bordo
   superiore del gruppo, restando interamente visibile (il pannello ora ha
   overflow: visible, quindi non viene piu' tagliata). */
.internal-form-panel::before,
.internal-results::before {
    position: absolute;
    top: -9px;
    right: 22px;
    padding: 2px 12px 4px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
    border-radius: 5px;
    pointer-events: none;
    z-index: 2;
}

.internal-form-panel::before {
    content: 'INPUT';
    background: rgba(36, 34, 28, 0.92);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(184, 192, 199, 0.75);
}

.internal-results::before {
    content: 'OUTPUT';
    right: auto;
    left: 22px;   /* speculare a INPUT che è right: 22px */
    background: rgba(36, 34, 28, 0.92);
    border: 1px solid rgba(214, 168, 63, 0.32);
    color: rgba(214, 168, 63, 0.75);
}

/* Header pannello form: tab a sinistra + tasto Calcola a destra */
.form-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Testata FISSA del gruppo input ("blocca riquadri"): vive fuori dal corpo
       scrollabile, quindi tab + Calcola sono sempre disponibili e il contenuto
       scorre solo SOTTO la barra — mai dietro: fondo pieno, niente overlay. */
    flex-shrink: 0;
    padding: 12px 18px 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 60%),
        var(--internal-panel);
    border-bottom: 1px solid rgba(214, 168, 63, 0.25);
    border-radius: 8px 8px 0 0;
}

/* Calcola de-enfatizzato fuori dalla scheda Preventivo (resta cliccabile) */
.btn-calcola-top.calc-dim {
    opacity: 0.45;
    filter: saturate(0.55);
}
.btn-calcola-top.calc-dim:hover,
.btn-calcola-top.calc-dim:focus-visible {
    opacity: 1;
    filter: none;
}

/* ── Workspace overlay: Storico / Richieste in finestra interna ampia ──────
   Finestra quasi full-screen sopra il contesto (il preventivatore resta
   intuibile dietro il backdrop). Sopra la sidebar subvettori (z 90), sotto
   il modal incarico (z 200) che può aprirsi dal workspace stesso. */
.ws-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ws-overlay[hidden] { display: none; }
.ws-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 6, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ws-window {
    position: relative;
    width: min(94vw, 1500px);
    height: min(90vh, 1000px);
    display: flex;
    flex-direction: column;
    background: var(--internal-panel);
    border: 1px solid rgba(214, 168, 63, 0.35);
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.ws-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px 20px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 60%);
    border-bottom: 1px solid rgba(214, 168, 63, 0.22);
}
.ws-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--internal-gold);
    outline: none;   /* focus programmatico all'apertura: il contesto è la finestra stessa */
}
.ws-sub {
    font-size: 11px;
    color: var(--internal-muted);
    margin-top: 2px;
}
.ws-close {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--internal-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--internal-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
.ws-close:hover { color: var(--c-text); border-color: rgba(214, 168, 63, 0.5); }
.ws-close:focus-visible { outline: 2px solid var(--internal-gold); outline-offset: 2px; }
.ws-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 20px;
}
@media (max-width: 768px) {
    .ws-window {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border: none;
    }
}

/* ── Q2: anteprima email cliente nel workspace ─────────────────────────────── */
.email-preview-meta {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.8;
}
.email-preview-meta span { color: var(--internal-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.email-preview-meta small { color: var(--internal-muted); }
.email-preview-body {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    padding: 16px 18px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--internal-text);
    margin: 0 0 12px;
}
.email-preview-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.email-preview-foot button[disabled] {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--internal-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--internal-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: not-allowed;
    opacity: 0.7;
}
.email-preview-foot span { font-size: 11px; color: var(--internal-muted); }
.email-preview-btn {
    margin-left: 10px;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(214, 168, 63, 0.45);
    background: rgba(214, 168, 63, 0.10);
    color: var(--internal-gold);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.email-preview-btn:hover { background: rgba(214, 168, 63, 0.18); border-color: rgba(214, 168, 63, 0.65); }
.email-preview-btn:focus-visible { outline: 2px solid var(--internal-gold); outline-offset: 2px; }

/* ── Intestazione di scheda: dichiara subito in quale ambiente sei ────────── */
.panel-mode-head {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--internal-border);
}
.pmh-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--internal-gold);
}
.pmh-sub {
    font-size: 11px;
    color: var(--internal-muted);
    margin-top: 2px;
}
.btn-calcola-top {
    position: relative;
    overflow: hidden;
    /* Distanza fissa dall'etichetta "INPUT" (posizionata a right:22px, top:0 sul pannello):
       margine ancorato per evitare sovrapposizioni quando si tocca il layout.
       Il bagliore (box-shadow) è stato inoltre ridotto perché il suo alone
       arrivava visivamente a toccare l'etichetta anche col margine aumentato. */
    margin-right: 52px;
    margin-top: 2px;
    padding: 5px 18px;
    font-size: 12.5px;
    font-weight: 800;
    background:
        linear-gradient(135deg, #f0cf7a 0%, var(--internal-gold) 45%, #c79530 100%);
    color: var(--c-accent-ink);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: .02em;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 2px 6px rgba(214,168,63,.4);
    transition: box-shadow .15s, transform .12s, filter .12s;
}
/* Riflesso diagonale che scorre sul tasto Calcola: lo distingue dagli altri,
   sottolineandone l'importanza con un effetto "vetro lucido" più ricco */
.btn-calcola-top::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -30%;
    width: 35%;
    height: 220%;
    background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(0deg);
    transition: left .5s ease;
    pointer-events: none;
}
.btn-calcola-top:hover::after { left: 130%; }
.btn-calcola-top:hover {
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 3px 10px rgba(214,168,63,.55);
    transform: translateY(-1px);
}
.btn-calcola-top:active { transform: translateY(0); filter: brightness(.96); }

.internal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    flex-wrap: wrap;   /* su schermi stretti i tab vanno a capo in modo ordinato */
}

/* Focus tastiera ben visibile sui tab (Tab + Invio/Spazio) */
.internal-tabs button:focus-visible {
    outline: 2px solid var(--internal-gold);
    outline-offset: 2px;
}

/* ── Flash sezione raggiunta dai tab Preventivo/Storico/Richieste ──────────
   Evidenzia per un momento la sezione mostrata: feedback immediato del click.
   Il focus programmatico (tabindex=-1) non disegna outline: il flash È il feedback. */
#quoteForm:focus,
#historyPanel:focus,
#requestsPanel:focus,
#historyTools:focus,
#requestsTools:focus {
    outline: none;
}
@keyframes sectionFlash {
    0%   { box-shadow: inset 0 0 0 2px rgba(214, 168, 63, 0.55), 0 0 14px rgba(214, 168, 63, 0.15); }
    100% { box-shadow: inset 0 0 0 2px rgba(214, 168, 63, 0),    0 0 0    rgba(214, 168, 63, 0); }
}
.section-flash {
    animation: sectionFlash 0.9s ease-out 1;
    border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .section-flash { animation: none; }
}

.internal-tabs button,
.internal-actions button,
.internal-login-form button {
    border: 1px solid var(--internal-border);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 12.5px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
        var(--internal-panel-soft);
    color: var(--internal-text);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
    transition: box-shadow .15s, transform .12s, border-color .12s;
}
.internal-tabs button:hover,
.internal-actions button:hover:not(:disabled),
.internal-login-form button:hover {
    border-color: var(--internal-gold);
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 0 0 1px rgba(214,168,63,.3);
    transform: translateY(-1px);
}

.internal-tabs button.active,
.internal-actions button:first-child,
.internal-login-form button {
    border-color: var(--internal-gold);
    background:
        linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%),
        var(--internal-gold);
    background-blend-mode: overlay;
    color: var(--c-accent-ink);
    box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 2px 10px rgba(214,168,63,.4);
}

.internal-actions button:disabled,
.internal-login-form button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.internal-form {
    display: grid;
    gap: 8px;    /* ridotto da 16px */
}

.internal-grid {
    display: grid;
    gap: 6px;    /* ridotto da 12px */
}

.internal-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Label-as-box: il bordo è sulla label, non sull'input.
   Il testo della label diventa micro-header in alto a sinistra. */
.internal-form label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--internal-border);
    border-radius: 6px;
    padding: 4px 9px 4px;
    background: var(--c-surface-3);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--internal-muted);
    cursor: default;
}

.internal-login-form label {
    display: grid;
    gap: 7px;
    color: var(--internal-muted);
    font-size: 13px;
    font-weight: 700;
}

/* ── STOP LIST MULTI-FERMATA ──────────────────────────────────────────────── */
.stops-wrapper { display: flex; flex-direction: column; gap: 4px; }
.stops-list    { display: flex; flex-direction: column; gap: 2px; }

.stop-row {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px;
    border: 1px solid var(--internal-border);
    border-radius: 6px; background: var(--c-surface-3);
    cursor: default; transition: background 80ms; user-select: none;
}
.stop-row.not-verified { border-color: var(--internal-yellow); }
.stop-row.dragging     { opacity: 0.45; }
.stop-row.drag-over    { border-color: var(--internal-gold); background: #1a1e22; }

.drag-handle { color: var(--internal-muted); font-size: 14px; cursor: grab; flex-shrink: 0; line-height: 1; }
.drag-handle:active { cursor: grabbing; }

.stop-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--internal-panel-soft); border: 1px solid var(--internal-border);
    font-size: 10px; font-weight: 900; color: var(--internal-muted);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.stop-tipo-badge {
    flex-shrink: 0; padding: 2px 8px; border-radius: 4px;
    font-size: 9px; font-weight: 900; letter-spacing: 0.08em; white-space: nowrap;
}
.stop-tipo-badge.carico  { background: rgba(88,183,122,0.15); color: var(--internal-green); border: 1px solid rgba(88,183,122,0.3); }
.stop-tipo-badge.scarico { background: rgba(216,97,85,0.15);  color: var(--internal-red);   border: 1px solid rgba(216,97,85,0.3); }
/* Punto di passaggio (checkpoint): azzurro «transito», distinto da carico(verde)/scarico(rosso) */
.stop-tipo-badge.passaggio { background: rgba(109,153,214,0.15); color: #9fc0ee; border: 1px solid rgba(109,153,214,0.35); }
.stop-num-pass { color: #9fc0ee !important; font-size: 13px; }
.stop-row-pass .stop-addr-input { opacity: .96; }

.stop-tipo-sel {
    flex-shrink: 0 !important;
    width: 115px !important;   /* !important: sovrascrive .internal-form select {width:100%} */
    height: 24px !important;
    border: 1px solid var(--internal-border) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    background: var(--c-surface-3) !important;
    color: var(--internal-text) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.stop-addr-wrap { flex: 1 !important; min-width: 0; position: relative; }
.stop-addr-input {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;   /* sottile line visibile */
    border-radius: 0 !important;
    padding: 2px 0 !important;
    background: transparent !important;
    color: var(--internal-text) !important;
    font-size: 12px !important;
    height: 22px !important;
    box-sizing: border-box !important;
}
.stop-addr-input::placeholder { color: rgba(174,182,189,0.4); }
.stop-addr-input.addr-warn { color: var(--internal-yellow) !important; }
.stop-addr-input:focus { outline: none; border-bottom-color: var(--internal-gold) !important; }

.stop-cond-toggle {
    flex-shrink: 0; width: 24px; height: 24px;
    border: 1px solid var(--internal-border); border-radius: 4px;
    background: var(--internal-panel-soft); color: var(--internal-muted);
    font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.stop-cond-toggle:hover { border-color: var(--internal-gold); color: var(--internal-gold); }

.stop-remove-btn {
    flex-shrink: 0 !important;
    width: 22px !important; height: 22px !important;
    border: 1px solid rgba(216,97,85,0.4) !important; border-radius: 4px !important;
    background: rgba(216,97,85,0.1) !important; color: var(--internal-red) !important;
    font-size: 15px !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important;
}
.stop-remove-placeholder { width: 20px; flex-shrink: 0; }

.stop-cond-panel {
    background: #12161a; border: 1px solid var(--internal-border);
    border-top: none; border-radius: 0 0 6px 6px; padding: 8px 10px 6px; margin-bottom: 2px;
}
/* Wrapper date ritiro+consegna: span 2 colonne, layout interno a 2 colonne */
.date-time-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Snapshot mappa per stampa: nascosta a schermo, visibile solo @media print */
.map-print-snapshot { display: none; }

/* ── Label inline: testo + select su una riga (per campi compatti) ────── */
.internal-grid .label-inline,
.internal-form .label-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap;
}
.internal-grid .label-inline select,
.internal-grid .label-inline input,
.internal-form .label-inline select,
.internal-form .label-inline input {
    flex: 1;
    min-width: 0;
}

/* ── Bottone test (solo utente luca, reso via PHP) ─────────────────────── */
/* Pulsanti utility compatti (icona-only nella nuova topbar) */
.btn-test-fill {
    font-size: 13px; line-height: 1; padding: 4px 6px;
    background: rgba(167,139,250,.08); border: 1px solid rgba(167,139,250,.22);
    color: #a78bfa; border-radius: 4px; cursor: pointer;
    transition: background .12s; opacity: .7;
}
.btn-test-fill:hover { opacity: 1; background: rgba(167,139,250,.16); }

/* ── Menu delle prove (16/09/2026) ─────────────────────────────────────────────
   Il tasto 🧪 non compila più «una delle cinque a caso»: apre un elenco di prove
   mirate, una per area del motore. Ancorato al tasto, mai più largo dello schermo. */
.tf-wrap { position: relative; display: inline-block; }
.tf-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    width: 300px; max-width: calc(100vw - 24px);
    max-height: 70vh; max-height: 70dvh; overflow-y: auto;
    background: #141414; border: 1px solid #2f2f2f; border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.55); padding: 6px;
    text-align: left;
}
.tf-gruppo {
    padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #6b7280;
}
.tf-voce {
    display: block; width: 100%; min-height: 40px; padding: 8px 10px;
    background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left;
    color: #e5e7eb; font: inherit; font-size: 16px;   /* il pavimento dei 16 pixel */
}
.tf-voce:hover, .tf-voce:focus-visible { background: rgba(167,139,250,.14); outline: none; }
.tf-lab  { display: block; font-weight: 700; font-size: 16px; }
.tf-hint { display: block; font-size: 12px; color: #9ca3af; margin-top: 2px; }

.btn-guide {
    font-size: 11px; font-weight: 800; padding: 4px 7px;
    background: rgba(99,179,237,.08); border: 1px solid rgba(99,179,237,.22);
    color: #63b3ed; border-radius: 4px; cursor: pointer;
    transition: background .12s; opacity: .7;
}
.btn-guide:hover { opacity: 1; background: rgba(99,179,237,.18); }

/* Pulsante Importa AI (Groq) */
/* ── Zona AI header — SINGOLA RIGA compatta ─────────────────────────────────
   Layout: [⚡ AI] | [↑ Trascina/sfoglia  PDF·DOCX] | [📍 maps URL  Importa]
   Altezza allineata ai link nav: nessuna colonna, tutto su un'unica riga.
─────────────────────────────────────────────────────────────────────────── */
.haz-container {
    display: flex;
    align-items: center;
    background: rgba(214,168,63,.05);
    border: 1px solid rgba(214,168,63,.2);
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
    height: 28px;
}

/* Etichetta sinistra: icona + badge, niente testo lungo */
.haz-left {
    display: flex; align-items: center; gap: 6px;
    padding: 0 10px; flex-shrink: 0; height: 100%;
}
.haz-ai-icon {
    width: 20px; height: 20px; border-radius: 5px;
    background: rgba(214,168,63,.12);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.haz-label-group { display: flex; flex-direction: column; gap: 0; }
.haz-label-title { font-size: 10px; font-weight: 800; color: var(--internal-gold); white-space: nowrap; }
.haz-label-sub   { display: none; }  /* rimosso: troppo stretto */
.haz-badge {
    font-size: 8px; font-weight: 800; padding: 1px 5px;
    border-radius: 100px; background: rgba(214,168,63,.15);
    color: var(--internal-gold); border: 1px solid rgba(214,168,63,.2);
    white-space: nowrap; flex-shrink: 0;
}

/* Separatore verticale */
.haz-vsep { width: 1px; background: rgba(214,168,63,.15); flex-shrink: 0; align-self: stretch; }

/* Destra: file zone + maps zone su una riga */
.haz-right {
    flex: 1; display: flex; flex-direction: row;
    align-items: center; min-width: 0; height: 100%;
}

/* Zona file drop — sempre visibile, espandersi */
.haz-dropzone {
    flex: 0 1 auto; display: flex; align-items: center; gap: 6px;
    padding: 0 10px; cursor: pointer; height: 100%;
    border-right: 1px solid rgba(214,168,63,.1);
    transition: background .15s;
}
.haz-dropzone:hover,
.haz-dropzone.haz-drag-over { background: rgba(214,168,63,.07); }
.haz-dropzone.haz-has-file  { background: rgba(74,222,128,.04); }

.haz-drop-hint  { font-size: 11px; color: var(--internal-muted); white-space: nowrap; }
.haz-drop-hint strong { color: var(--internal-gold); font-weight: 700; }
.haz-drop-formats { font-size: 10px; color: var(--c-faint); white-space: nowrap; }

/* Stato file — inline nella zona drop */
.haz-meta {
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.haz-meta-text {
    font-size: 10px; color: var(--c-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.haz-clear {
    background: none; border: none; color: var(--c-faint);
    cursor: pointer; font-size: 11px; padding: 0; line-height: 1; flex-shrink: 0;
}
.haz-clear:hover { color: #f87171; }

/* Footer (analizza / loading) — mai visibile nella nuova UI, auto-analisi */
.haz-footer { display: none !important; }
.haz-analyze-btn { display: none !important; }
.haz-loading { font-size: 10px; color: var(--c-muted); }

/* Mini-campo "incolla testo libero" — riquadro poco invasivo ma riconoscibile,
   affiancato alla zona di trascinamento file (stessa riga, stessa altezza) */
.haz-textarea {
    display: block; flex: 1 1 0; min-width: 160px;
    width: auto; height: 20px; resize: none; overflow: hidden;
    padding: 2px 7px; font-size: 10px; line-height: 1.4;
    background: rgba(0,0,0,.24); border: 1px solid rgba(214,168,63,.18);
    color: var(--c-text-dim); border-radius: 4px; font-family: inherit; outline: none;
    transition: border-color .15s, background .15s;
}
.haz-textarea:hover   { background: rgba(214,168,63,.05); }
.haz-textarea:focus   { border-color: rgba(214,168,63,.45); background: rgba(0,0,0,.3); }
.haz-textarea::placeholder { color: var(--c-muted); }

/* Zona Google Maps — width fissa a destra */
.haz-maps-row {
    display: flex; align-items: center; gap: 6px;
    padding: 0 8px 0 9px; flex-shrink: 0; height: 100%;
}
.haz-maps-url {
    width: 190px; padding: 3px 7px;
    background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07);
    color: var(--c-text-dim); border-radius: 4px; font-size: 10px;
    font-family: inherit; transition: border-color .15s; outline: none;
}
.haz-maps-url:focus { border-color: rgba(99,179,237,.4); }
.haz-maps-url::placeholder { color: var(--c-faint); }
.haz-maps-btn {
    padding: 3px 9px; background: rgba(99,179,237,.1);
    border: 1px solid rgba(99,179,237,.22); color: #63b3ed;
    border-radius: 4px; font-size: 10px; font-weight: 700;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    font-family: inherit; transition: all .15s;
}
.haz-maps-btn:hover  { background: rgba(99,179,237,.2); }
.haz-maps-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Sovraimpressione conferma testo incollato — evita che un testo lungo
   scombini la barra AI: si apre una finestra centrale con il testo,
   l'utente verifica e conferma (o annulla) prima dell'analisi */
.haz-paste-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(8,7,4,.62);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 84px;
}
.haz-paste-overlay[hidden] { display: none; }
.haz-paste-card {
    background: var(--c-surface-2); border: 1px solid rgba(214,168,63,.28);
    border-radius: 10px; padding: 16px; width: min(560px, 92vw);
    box-shadow: 0 14px 44px rgba(0,0,0,.55);
    display: flex; flex-direction: column; gap: 10px;
}
.haz-paste-title { font-size: 12px; font-weight: 800; color: var(--internal-gold); letter-spacing: .02em; }
.haz-paste-card textarea {
    width: 100%; min-height: 190px; max-height: 52vh; resize: vertical;
    background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.09);
    border-radius: 6px; color: var(--c-text-dim); padding: 9px; font-size: 12px;
    font-family: inherit; line-height: 1.45; outline: none; box-sizing: border-box;
}
.haz-paste-card textarea:focus { border-color: rgba(214,168,63,.4); }
.haz-paste-actions { display: flex; justify-content: flex-end; gap: 8px; }
.haz-paste-actions button {
    font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 6px;
    cursor: pointer; font-family: inherit; transition: all .15s; border: 1px solid;
}
.haz-paste-cancel  { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--c-muted); }
.haz-paste-cancel:hover  { background: rgba(255,255,255,.1); }
.haz-paste-confirm { background: rgba(214,168,63,.15); border-color: rgba(214,168,63,.35); color: var(--internal-gold); }
.haz-paste-confirm:hover { background: rgba(214,168,63,.28); }

/* Status sotto la barra (feedback analisi / maps) */
.haz-status-bar {
    font-size: 10px; color: var(--c-faint); text-align: center;
    min-height: 0.9em; padding: 1px 0;
    transition: color .2s;
}

.btn-import-text {
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.22);
    color: #4ade80; border-radius: 4px; cursor: pointer;
    transition: background .12s; opacity: .82;
}
.btn-import-text:hover { opacity: 1; background: rgba(74,222,128,.18); }

/* ══ PANNELLO SUBVETTORI SUGGERITI ═══════════════════════════════════════════ */

/* Pannello slide-in fisso a destra, collassabile tramite maniglia
   --svs-top viene impostato via JS misurando l'altezza reale della topbar.
   Senza .internal-topbar (layout unificato) --svs-top resta vuota: si ricade
   sull'altezza vera di .app-nav, pubblicata dalla barra stessa (22/10/2026).
   Prima il ripiego era 0px e la testata del pannello finiva sotto la barra. */
.svs-panel {
    position: fixed;
    top: var(--svs-top, var(--app-nav-h, 56px)); right: 0; bottom: 0;
    width: 360px;
    /* Trasparenza + blur: si vede la mappa sfocata sotto */
    background: rgba(13, 16, 19, 0.60);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-left: 1px solid rgba(214,168,63,.22);
    z-index: 90;
    display: flex;
    flex-direction: row;
    box-shadow: -8px 0 32px rgba(0,0,0,.55);
    animation: svs-in .2s ease;
    transition: width .25s ease;
    overflow: hidden;
}
@keyframes svs-in { from { transform: translateX(360px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.svs-panel[hidden] { display: none; }

/* Collassato: mostra solo la maniglia (36 px) */
.svs-panel.svs-collapsed {
    width: 36px;
    animation: none;
}

/* Maniglia laterale — sempre cliccabile */
.svs-handle {
    width: 36px;
    flex-shrink: 0;
    border: none;
    border-right: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 0;
    transition: background .15s;
    font-family: inherit;
}
.svs-handle:hover { background: rgba(214,168,63,.07); }

.svs-handle-arrow {
    color: var(--internal-gold);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    transition: transform .25s;
}
/* Pannello espanso: freccia › punta a destra = "chiudi/comprimi" */
/* Pannello collassato: freccia ruota 180° = ‹ = "espandi" */
.svs-panel.svs-collapsed .svs-handle-arrow { transform: rotate(180deg); }

.svs-handle-badge {
    background: var(--internal-gold);
    color: #111;
    font-size: 10px;
    font-weight: 900;
    border-radius: 999px;
    padding: 2px 5px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
    display: none;
}
.svs-handle-badge:not(:empty) { display: block; }

.svs-handle-label {
    writing-mode: vertical-rl;
    font-size: 9px;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Contenitore del contenuto espandibile */
.svs-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.svs-header {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.svs-title { font-size: 13px; font-weight: 800; color: var(--c-text); flex: 1; }
.svs-sub   { font-size: 10px; color: var(--c-faint); margin-top: 2px; }
/* .svs-close mantenuto solo per il modal incarichi */
.svs-close {
    background: none; border: none; color: var(--c-faint);
    font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px; flex-shrink: 0;
}
.svs-close:hover { color: #fff; }

.svs-filters {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.05); flex-shrink: 0;
    font-size: 10px; color: var(--c-muted);
}
.svs-filter-label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.svs-filter-label input { accent-color: var(--internal-gold); }
.svs-filter-sep { flex: 1; }
.svs-count { font-size: 10px; color: var(--c-faint); font-weight: 700; }
.svs-dash-link { font-size: 10px; color: var(--internal-gold); text-decoration: none; font-weight: 700; white-space: nowrap; }
.svs-dash-link:hover { text-decoration: underline; }

.svs-list { flex: 1; overflow-y: auto; padding: 8px 10px; }
.svs-empty { font-size: 11px; color: #444; padding: 20px; text-align: center; }

/* Card subvettore nel pannello */
.svs-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 7px; padding: 10px 11px; margin-bottom: 7px;
    cursor: pointer; transition: border-color .15s;
}
.svs-card:hover { border-color: rgba(214,168,63,.3); }
.svs-card.top3 { border-color: rgba(214,168,63,.22); background: rgba(214,168,63,.03); }

.svs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.svs-card-name { font-size: 12px; font-weight: 800; color: var(--c-text); line-height: 1.3; }
.svs-card-prov { font-size: 9px; font-weight: 700; background: rgba(255,255,255,.07);
    color: var(--c-muted); padding: 2px 5px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }

/* Score bar */
.svs-score-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.svs-score-bar-bg { flex: 1; height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; }
.svs-score-bar-fill { height: 4px; border-radius: 2px; transition: width .3s; }
.svs-score-num { font-size: 11px; font-weight: 900; min-width: 28px; text-align: right; }
.svs-score-good  { color: #4ade80; }
.svs-score-mid   { color: #fbbf24; }
.svs-score-low   { color: #f87171; }
.fill-good  { background: #4ade80; }
.fill-mid   { background: #fbbf24; }
.fill-low   { background: #f87171; }

/* Tags mezzo */
.svs-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.svs-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.svs-tag-aperti     { background:#0ea5e9; color:#fff; }
.svs-tag-centinati  { background:var(--internal-gold); color:#111; }
.svs-tag-ribassati  { background:#22c55e; color:#000; }
.svs-tag-eccezionali{ background:#ef4444; color:#fff; }
.svs-tag-other      { background:rgba(255,255,255,.07); color:var(--c-muted); }

/* Badge iscrizione portale */
.svs-reg-badge { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.svs-reg-yes { background: rgba(74,222,128,.1); color: #4ade80; border: 1px solid rgba(74,222,128,.25); }
.svs-reg-no  { background: rgba(251,191,36,.08); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }

/* Score detail hover */
.svs-reasons { font-size: 9px; color: var(--c-faint); line-height: 1.5; margin-bottom: 5px; }

/* Info rapide */
.svs-info { font-size: 10px; color: var(--c-muted); margin-bottom: 4px; }
.svs-tariffa { font-size: 11px; font-weight: 800; color: #fbbf24; margin-bottom: 6px; }
.svs-tariffa span { font-size: 9px; font-weight: 400; color: var(--c-faint); margin-left: 4px; }

/* Azioni rapide */
.svs-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.svs-btn {
    font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 4px;
    cursor: pointer; font-family: inherit; transition: all .15s; border: 1px solid;
}
.svs-btn-copy  { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.2); color: #7dd3fc; }
.svs-btn-send  { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.22); color: #4ade80; }
.svs-btn-scheda{ background: rgba(214,168,63,.08); border-color: rgba(214,168,63,.2); color: var(--internal-gold); }
.svs-btn:hover { opacity: .85; }

/* (svs-toggle-btn rimosso: sostituito dalla maniglia laterale svs-handle) */

/* Modal proposta incarico */
.svs-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.svs-modal-backdrop[hidden] { display: none; }
.svs-modal {
    background: var(--c-surface); border: 1px solid rgba(74,222,128,.28);
    border-radius: 10px; max-width: 560px; width: 100%;
    max-height: 88vh; overflow-y: auto;
    padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.svs-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.svs-modal-title { font-size: 14px; font-weight: 800; color: #4ade80; flex: 1; }
.svs-modal-body { font-size: 12px; color: var(--c-muted); line-height: 1.55; }
.svs-modal-body strong { color: var(--c-text); }
.svs-modal-msg {
    background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px; padding: 10px 12px; font-size: 11px;
    color: var(--c-text-dim); white-space: pre-wrap; margin: 10px 0;
    font-family: 'IBM Plex Mono', monospace; line-height: 1.6;
}
.svs-modal-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.svs-modal-btn {
    padding: 7px 14px; border-radius: 6px; font-size: 11px; font-weight: 800;
    cursor: pointer; font-family: inherit; border: 1.5px solid; transition: all .15s;
}
.svs-modal-btn-green { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.3); color: #4ade80; }
.svs-modal-btn-sky   { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.3); color: #7dd3fc; }
.svs-modal-btn-plain { background: transparent; border-color: rgba(255,255,255,.1); color: var(--c-faint); }
/* ══ FINE PANNELLO SUBVETTORI ════════════════════════════════════════════════ */

/* Badge dati test */
.test-data-badge {
    background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4);
    color: #fbbf24; font-size: 10px; font-weight: 800;
    padding: 4px 10px; border-radius: 4px; text-align: center;
    letter-spacing: .04em; margin-top: 4px;
}

/* ── Sezioni collassabili nel form ────────────────────────────────────── */
.form-section {
    margin: 4px 0;
    border: 1px solid var(--internal-border);
    border-radius: 6px;
    overflow: hidden;
}
.form-section-toggle {
    width: 100%; display: flex; align-items: center; gap: 6px;
    padding: 1px 8px; cursor: pointer;
    background: var(--internal-bg2); border: none;
    color: var(--internal-muted); font-size: 11px; font-weight: 700;
    text-align: left; transition: background .12s, color .12s;
    font-family: var(--internal-font);
}
.form-section-toggle:hover { background: var(--internal-bg3); color: var(--internal-text); }
.fs-icon { font-size: 14px; }
.fs-arrow { margin-left: auto; font-size: 13px; transition: transform .15s; }
.form-section-body {
    padding: 10px 12px 12px;
    background: var(--internal-bg);
    border-top: 1px solid var(--internal-border);
}

/* ── Blocco targhe specifiche ──────────────────────────────────────────── */
.targhe-block {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ── V5.3: Badge targa selezionata via chip flotta ─────────────────────── */
.mezzo-targa-badge[hidden] { display: none; }
.mezzo-targa-badge {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(214,168,63,.06);
    border: 1px solid rgba(214,168,63,.22);
    border-radius: 6px;
    margin-top: 2px;
}
.mezzo-targa-pill {
    font-size: 11px;
    font-weight: 800;
    color: var(--internal-gold);
    flex: 1;
}
.mezzo-targa-clear {
    background: none;
    border: none;
    color: var(--c-faint);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
    font-family: inherit;
}
.mezzo-targa-clear:hover { color: #fff; }

/* ── Blocco subvettore ─────────────────────────────────────────────────── */
.subvettore-block { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; position: relative; }
.subvettore-input { width: 100%; }

.subvettore-dropdown {
    position: fixed; z-index: 9999; list-style: none; margin: 0; padding: 3px 0;
    background: var(--c-surface-2); border: 1px solid #333;
    border-radius: 6px; max-height: 260px; overflow-y: auto;
    box-shadow: 0 8px 28px rgba(0,0,0,.75);
}
.subv-drop-item {
    padding: 6px 12px; cursor: pointer; font-size: 12px; color: var(--internal-text);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.subv-drop-item:hover { background: rgba(214,168,63,.1); color: var(--internal-gold); }
.subv-drop-prov { font-size: 10px; color: var(--internal-muted); font-weight: 700; flex-shrink: 0; }

/* Card anagrafica subvettore */
.subvettore-card {
    background: rgba(214,168,63,.06); border: 1px solid rgba(214,168,63,.25);
    border-radius: 7px; padding: 10px 12px; font-size: 12px;
}
.subv-card-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px; margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(214,168,63,.18);
}
.subv-name { font-weight: 700; color: var(--internal-text); font-size: 13px; }
.subv-prov  { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--internal-muted);
              background: var(--internal-bg3); padding: 1px 5px; border-radius: 3px; }
.subv-verified { margin-left: 6px; font-size: 10px; color: #4ade80; font-weight: 700; }
.subv-stars { color: var(--internal-gold); font-size: 12px; flex-shrink: 0; letter-spacing: 1px; }

.subv-body { display: flex; flex-direction: column; gap: 4px; }
.subv-row  { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.subv-lbl  { font-size: 10px; color: var(--internal-muted); text-transform: uppercase;
             letter-spacing: .04em; min-width: 52px; flex-shrink: 0; }
.subv-mono { font-family: monospace; font-size: 11px; }
.subv-link { color: var(--internal-gold); text-decoration: none; font-size: 12px; }
.subv-link:hover { text-decoration: underline; }
.subv-email { color: #38bdf8; font-size: 11px; }
.subv-mezzi { display: flex; flex-wrap: wrap; gap: 4px; }
.subv-mb    { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
              background: rgba(214,168,63,.12); color: var(--internal-gold);
              border: 1px solid rgba(214,168,63,.25); }
.subv-note  { font-size: 11px; color: #fcd34d; background: rgba(245,158,11,.06);
              border: 1px solid rgba(245,158,11,.18); border-radius: 4px;
              padding: 4px 7px; margin-top: 2px; line-height: 1.4; }
.subv-dim   { color: var(--internal-muted); font-size: 11px; }

/* ── Wrapper icona calendario: ::after sul wrapper, non sulla label,
   così non interferisce con il time-range-inline sotto */
.date-input-wrap {
    position: relative;
}
.date-input-wrap::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d6a83f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* Indicatore nativo grande per coprire il ::after — click passa attraverso il wrapper */
.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    width: 28px;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Rimuovi il vecchio ::after sulla label per date (ora gestito dal .date-input-wrap) */
.internal-form label:has(input[type="date"])::after {
    display: none;
}

/* Riga orario inline nelle label data ──────────────────────────────────── */
.time-range-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: nowrap;
}
.time-range-inline .tr-label {
    font-size: 10px;
    color: rgba(174,182,189,0.6);
    white-space: nowrap;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.time-range-inline select {
    width: auto !important;
    flex: 0 0 auto !important;
    height: 22px !important;
    padding: 0 3px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    border: 1px solid var(--internal-border) !important;
    background: var(--c-surface-3) !important;
    color: var(--internal-text) !important;
    min-width: 60px;
}
.tassativo-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 0 0 4px !important;
    font-size: 10px !important;
    color: var(--internal-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}
.tassativo-hint {
    font-size: 9px;
    color: var(--internal-gold);
    font-weight: 700;
    opacity: .7;
}

.stop-cond-date-row { margin-bottom: 8px; }
.stop-cond-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 4px;
}
/* Label inline: testo e select sulla stessa riga, più compatto */
.stop-cond-grid label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    white-space: nowrap;
}
.stop-cond-grid label select {
    flex: 1;
    min-width: 0;
    font-size: 11px !important;
    padding: 3px 4px !important;
    height: auto !important;
}
.stop-cond-summary { font-size: 10px; color: var(--internal-muted); display: block; }

.stops-footer { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.stops-colli-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    padding: 2px 0;
}
.stops-colli-bar-sep {
    flex: 1;  /* spinge i due gruppi ai lati opposti */
    border-top: 1px dashed var(--internal-border);
    margin: 0 6px;
    align-self: center;
}
.stops-add-check {
    background: rgba(109,153,214,.1) !important; border-color: rgba(109,153,214,.4) !important;
    color: #9fc0ee !important; border-style: dashed !important;
}
.stops-add-check:hover:not(:disabled) { background: rgba(109,153,214,.2) !important; }
.stops-add-btn {
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    background: rgba(214,168,63,.1); border: 1px solid rgba(214,168,63,.35);
    color: var(--internal-gold); border-radius: 4px; cursor: pointer;
    transition: background .12s;
}
.stops-add-btn:hover:not(:disabled) { background: rgba(214,168,63,.2); }
.stops-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.stops-count { font-size: 10px; color: var(--internal-muted); font-weight: 700; }

/* Google Maps URL import row */
.ip-maps-row {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px 5px 6px;
    background: rgba(99,179,237,.04); border: 1px solid rgba(99,179,237,.15);
    border-radius: 6px; margin-bottom: 6px;
}
.ip-maps-url-inp {
    flex: 1; min-width: 0; padding: 4px 8px;
    background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.07);
    color: var(--internal-text); border-radius: 4px; font-size: 11px;
    font-family: var(--font-ui, inherit); transition: border-color .15s;
}
.ip-maps-url-inp:focus { outline: none; border-color: rgba(99,179,237,.45); }
.ip-maps-url-inp::placeholder { color: rgba(174,182,189,.35); }
.ip-maps-btn {
    padding: 4px 10px; font-size: 10px; font-weight: 700;
    background: rgba(99,179,237,.12); border: 1px solid rgba(99,179,237,.3);
    color: #63b3ed; border-radius: 4px; cursor: pointer;
    font-family: inherit; transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.ip-maps-btn:hover { background: rgba(99,179,237,.22); }
.ip-maps-btn:disabled { opacity: .5; cursor: not-allowed; }
.ip-maps-status { font-size: 10px; flex-shrink: 0; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stop-marker-num {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
    color: #fff; font-size: 10px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5); cursor: pointer;
}
/* Marker checkpoint sulla mappa: rombo azzurro (instrada, non è una fermata numerata).
   Trascinabile (Fase 2): cursore «afferra». */
.stop-marker-check {
    width: 15px; height: 15px; background: #6d99d6; border: 2px solid #fff;
    transform: rotate(45deg); box-shadow: 0 2px 6px rgba(0,0,0,0.5); cursor: grab;
}
.stop-marker-check:active { cursor: grabbing; }

/* ── ICONA CALENDARIO ─────────────────────────────────────────────────────── */
/* Icona calendario: nascondo quella nativa e la sostituisco con SVG oro via ::after */
.internal-form label:has(input[type="date"]) {
    position: relative;
}

.internal-form label:has(input[type="date"])::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 7px;
    width: 14px;
    height: 14px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d6a83f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.internal-form input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;   /* nasconde l'icona nativa nera */
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* Inputs dentro la label-box: niente bordo, sfondo che eredita dal container */
.internal-form input:not([type="checkbox"]),
.internal-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    padding: 2px 0;
    height: 26px;
    background: transparent;
    color: var(--internal-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}

/* Select: sfondo esplicito scuro (transparent non funziona sui select nativi) */
.internal-form select {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    padding: 2px 0;
    height: 26px;
    background: var(--c-surface-3);
    color: var(--internal-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    -webkit-appearance: auto;
}

/* Login form mantiene lo stile originale */
.internal-login-form input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--internal-border);
    border-radius: 6px;
    padding: 10px 11px;
    background: var(--c-surface-3);
    color: var(--internal-text);
    font: inherit;
}

/* Il bordo "not-verified" sale sulla label container */
.internal-form label:has(input.not-verified) {
    border-color: var(--internal-yellow);
}
.internal-form input.not-verified {
    border: none;
}

/* Cliente non presente in lista — rosso tenue semitrasparente */
.internal-form label.cliente-unknown {
    border-color: rgba(216, 97, 85, 0.45) !important;
    background: rgba(216, 97, 85, 0.04) !important;
}

/* Wrapper per i suggerimenti cliente */
.cliente-suggestions-wrap {
    position: relative;
}

/* Checkbox labels: riga orizzontale */
.internal-form label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    font-size: 11px;
}

/* Textarea: compatta */
.internal-form label textarea {
    height: 46px !important;
    min-height: 46px !important;
    resize: none !important;
    overflow-y: auto !important;
    padding: 3px 0 !important;
}

/* Multi-select: altezza adeguata */
.internal-form label select[multiple] {
    height: 72px !important;
    padding: 3px 0 !important;
}

.address-field {
    position: relative;
}

.address-suggestions {
    position: absolute;
    z-index: 80;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    background: #11161a;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
}

.address-suggestions:empty,
.address-suggestions[hidden] {
    display: none;
}

.address-suggestion {
    display: grid;
    gap: 3px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--internal-border);
    padding: 10px 11px;
    background: transparent;
    color: var(--internal-text);
    text-align: left;
    cursor: pointer;
}

.address-suggestion:hover,
.address-suggestion:focus {
    background: #20262b;
}

.address-suggestion span,
.address-suggestion.muted {
    color: var(--internal-muted);
    font-size: 12px;
}

.internal-form input.not-verified {
    border-color: var(--internal-yellow);
}

.internal-form select[multiple] {
    min-height: 108px;
}

.internal-manual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    background: #14181c;
}

.internal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.internal-actions.compact {
    margin-bottom: 14px;
}

.internal-empty {
    display: grid;
    min-height: 260px;
    place-items: center;
    color: var(--internal-muted);
    text-align: center;
}

/* Riga superiore: sidebar prezzi a sinistra + mappa quadrata a destra */
/* Layout principale: sidebar sticky | contenuto principale */
.results-layout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.results-main {
    flex: 1;
    min-width: 0;
}

/* Sidebar prezzi: stessa altezza della mappa, flex verticale */
.result-price-sidebar {
    width: 192px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    /* altezza gestita dal contenuto, non fissa */
}

/* Card compresse: label a sx (span 2 righe) | prezzo riga 1 + €/km riga 2 */
.result-price-sidebar .internal-price {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    padding: 5px 10px;
    min-height: 0;
}
.result-price-sidebar .internal-price span {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 10px;
    white-space: nowrap;
}
.result-price-sidebar .internal-price strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
    line-height: 1.2;
}
.result-price-sidebar .internal-price.featured strong {
    font-size: 17px;
}
.result-price-sidebar .price-km {
    grid-column: 2;
    grid-row: 2;
    font-size: 9px;
    text-align: right;
    color: var(--internal-muted);
    white-space: normal;   /* "€/km · €/t" può andare a capo al separatore, mai sovrapporsi */
    line-height: 1.2;
}

/* ── Card prezzo cliccabili (Minimo / Consigliato / Target) ────────────────
   Niente bottoni: l'intera card applica il prezzo. Gerarchia psicologica:
   minimo sobrio/freddo, consigliato scelta naturale (oro moderato),
   target premium (glow più ricco ma professionale). Card senza prezzo:
   nessuna classe pick → non interattiva, cursore normale. */
/* La colonna prezzi (192px, overflow gestito) non ha gioco laterale: qualsiasi
   effetto che esce dal box (scale, glow esterno, outline esterno) viene
   clippato. Tutto l'effetto vive DENTRO la card: riflesso dorato che scorre
   da sinistra a destra (stesso linguaggio del tasto Calcola), bordo, sfondo
   e luce inset. Nessun transform: niente layout shift, niente clipping. */
.result-price-sidebar .price-card-pick {
    cursor: pointer;
    position: relative;
    overflow: hidden;    /* contiene il riflesso dentro la card */
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
/* Contenuto sopra il riflesso: la luce passa sotto testo e importi */
.result-price-sidebar .price-card-pick > * {
    position: relative;
    z-index: 1;
}
/* Riflesso "lingotto" — come .btn-calcola-top::after, intensità per variante */
.result-price-sidebar .price-card-pick::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -45%;
    width: 38%;
    height: 220%;
    background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 0;
    transition: left 0.55s ease;
}
.result-price-sidebar .price-card-pick:hover::after,
.result-price-sidebar .price-card-pick:focus-visible::after {
    left: 135%;
}
/* Focus tastiera: outline DENTRO la card (offset negativo) così non viene
   clippato dalla colonna stretta */
.result-price-sidebar .price-card-pick:focus-visible {
    outline: 2px solid var(--internal-gold);
    outline-offset: -2px;
}
/* Minimo: selezionabile ma sobrio — riflesso appena percepibile, niente oro */
.price-card-pick.pick-min:hover,
.price-card-pick.pick-min:focus-visible {
    background: rgba(240, 230, 210, 0.05);
    border-color: rgba(255, 255, 255, 0.30);
}
/* Consigliato: la scelta naturale — riflesso dorato elegante + luce interna */
.price-card-pick.pick-rec::after {
    background: linear-gradient(115deg, rgba(240,210,140,0) 0%, rgba(240,210,140,.30) 50%, rgba(240,210,140,0) 100%);
}
.price-card-pick.pick-rec:hover,
.price-card-pick.pick-rec:focus-visible {
    background: rgba(214, 168, 63, 0.05);
    border-color: rgba(214, 168, 63, 0.65);
    box-shadow: inset 0 0 12px rgba(214, 168, 63, 0.14);
}
/* Target: la più premium — riflesso oro intenso, "lingotto", luce interna ricca */
.price-card-pick.pick-target::after {
    width: 46%;
    background: linear-gradient(115deg, rgba(246,220,150,0) 0%, rgba(246,220,150,.42) 50%, rgba(246,220,150,0) 100%);
}
.price-card-pick.pick-target:hover,
.price-card-pick.pick-target:focus-visible {
    background: rgba(214, 188, 84, 0.06);
    border-color: rgba(214, 188, 84, 0.60);
    box-shadow: inset 0 0 16px rgba(214, 168, 63, 0.20),
                inset 0 0 0 1px rgba(214, 188, 84, 0.18);
}
/* Utenti sensibili al movimento: riflesso fermo, restano i segnali cromatici */
@media (prefers-reduced-motion: reduce) {
    .result-price-sidebar .price-card-pick::after {
        display: none;
    }
}

/* ── Q1: Salva bozza / Salva e prepara invio nella sidebar ────────────────── */
.result-price-sidebar .sidebar-save-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.sb-save-btn {
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    transition: filter 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.sb-save-btn.sb-prepare {
    background: var(--internal-gold);
    color: var(--c-accent-ink);
}
.sb-save-btn.sb-prepare:hover { filter: brightness(1.12); }
.sb-save-btn.sb-draft {
    background: transparent;
    color: var(--internal-muted);
    border-color: rgba(255, 255, 255, 0.16);
}
.sb-save-btn.sb-draft:hover { color: var(--c-text-dim); border-color: rgba(255, 255, 255, 0.34); }

/* Riquadro «N mezzi» sotto le tre cifre (01/10/2026): compare solo quando la verifica di carico distribuisce
   i colli su piu' mezzi, quindi il desktop di sempre non cambia. Le cifre × N si applicano con un clic. */
.sb-multi {
    margin-top: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(214, 168, 63, 0.45);
    border-left: 3px solid var(--internal-gold);
    border-radius: 8px;
    background: rgba(214, 168, 63, 0.07);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sb-multi-title {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--internal-gold);
}
.sb-multi-text {
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--internal-muted);
}
.sb-multi-text strong { color: var(--c-text-dim); }
.sb-multi-pick {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.sb-multi-pick strong { font-size: 0.8rem; color: var(--internal-gold); }
.sb-multi-pick:hover,
.sb-multi-pick:focus-visible { border-color: var(--internal-gold); background: rgba(214, 168, 63, 0.1); }
.sb-multi-pick:focus-visible { outline: 2px solid var(--internal-gold); outline-offset: -2px; }
.sb-multi-uno {
    padding: 0;
    border: 0;
    background: none;
    color: var(--internal-gold);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}
@media (pointer: coarse) {
    .sb-multi-pick { min-height: 40px; align-items: center; }
    .sb-multi-uno { min-height: 40px; }
}

/* ── Scroll indipendente colonne output (solo desktop) ─────────────────────
   Lo scroll passa dal contenitore unico alle due colonne: mappa/dettagli e
   prezzi/break-even scorrono ciascuna per conto proprio, con rotella,
   touchpad, tastiera e touch. Scrollbar nascoste SOLO qui (lo scroll resta
   pienamente funzionante). Sotto i 1024px e in stampa: comportamento
   precedente invariato (scroll unico, sidebar sticky). */
/* 1101px, non 1024: sotto i 1100px .internal-shell e' a colonna singola e (v. FASE 2 in
   fondo al file) la pagina torna a scorrere per intero. Lasciando la soglia a 1024 questo
   blocco avrebbe rimesso overflow-y:hidden sul pannello risultati proprio nella fascia
   1024-1100px, tagliandone il contenuto senza modo di scorrerlo: i due scorrimenti
   indipendenti hanno senso solo quando i pannelli stanno davvero affiancati. */
@media screen and (min-width: 1101px) {
    .internal-results .internal-panel-scroll {
        overflow-y: hidden;
    }
    .internal-results .results-layout {
        height: 100%;
        min-height: 0;
        align-items: stretch;
    }
    .internal-results .result-price-sidebar,
    .internal-results .results-main {
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE/Edge legacy */
    }
    .internal-results .result-price-sidebar {
        position: static;            /* sticky non più necessario: la colonna scorre da sé */
        padding-bottom: 24px;        /* respiro finale: suggerisce contenuto ulteriore */
    }
    .internal-results .results-main {
        padding-bottom: 24px;
    }
    .internal-results .result-price-sidebar::-webkit-scrollbar,
    .internal-results .results-main::-webkit-scrollbar {
        display: none;               /* Chrome/Edge/Safari */
    }
}

/* ── Checkbox ruotabile nella tabella colli ────────────────────────────── */
.collo-rotatable { width: 14px; height: 14px; cursor: pointer; accent-color: var(--internal-gold); }

/* ── Pannello Verifica Carico V1 ───────────────────────────────────────── */
/* ── V5.2: Debug panel V1 collassato ────────────────────────────────────── */
.pv1-debug-wrap {
    margin-top: 6px; border: 1px solid var(--internal-border);
    border-radius: 4px; font-size: 10px;
}
.pv1-debug-sum {
    padding: 4px 8px; cursor: pointer; font-size: 9px; font-weight: 700;
    color: var(--internal-muted); list-style: none; user-select: none;
}
.pv1-debug-sum::-webkit-details-marker { display: none; }
.pv1-debug-sum::marker { display: none; }
.pv1-debug-sum:hover { color: var(--internal-text); }
.pv1-debug-hint { font-weight: 400; font-style: italic; }
/* Non-compatibili collassati */
.colli-match-nok-wrap { margin-top: 2px; }
.colli-match-nok-sum  { font-size: 10px; color: #f87171; cursor: pointer;
    padding: 2px 4px; list-style: none; user-select: none; }
.colli-match-nok-sum::-webkit-details-marker { display: none; }
.colli-match-nok-sum::marker { display: none; }
.colli-match-nok-sum:hover { opacity: .85; }

.pv1-panel {
    margin-top: 8px;
    border-top: 1px dashed var(--internal-border);
    padding-top: 8px;
}
.pv1-title {
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--internal-muted); margin-bottom: 6px;
}
.pv1-row { margin-bottom: 6px; border-radius: 5px; overflow: hidden; }
.pv1-header {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 5px 8px; font-size: 11px;
}
.pv1-ok   { background: rgba(74,222,128,.08);  border: 1px solid rgba(74,222,128,.2); }
.pv1-warn { background: rgba(251,191,36,.08);  border: 1px solid rgba(251,191,36,.2); }
.pv1-fail { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.2); }
.pv1-ok   .pv1-icon { color: #4ade80; }
.pv1-warn .pv1-icon { color: #fbbf24; }
.pv1-fail .pv1-icon { color: #f87171; }
.pv1-targa   { font-weight: 800; color: var(--internal-text); }
.pv1-verdict { font-weight: 700; font-size: 10px; }
.pv1-ok   .pv1-verdict { color: #4ade80; }
.pv1-warn .pv1-verdict { color: #fbbf24; }
.pv1-fail .pv1-verdict { color: #f87171; }
.pv1-stats { font-size: 9px; color: var(--internal-muted); margin-left: auto; }
.pv1-reasons {
    list-style: none; margin: 0; padding: 2px 8px 4px;
    background: rgba(0,0,0,.12);
}
.pv1-reason-fail { font-size: 10px; color: #f87171; padding: 1px 0; }
.pv1-reason-warn { font-size: 10px; color: #fbbf24; padding: 1px 0; }
.pv1-reason-data { font-size: 10px; color: #38bdf8; padding: 1px 0; opacity: .85; }
/* ── Pannello V2 packing 2D ─────────────────────────────────────────────── */
.pv2-panel { margin: 4px 0 2px; border-radius: 4px; overflow: hidden; font-size: 10px; }
.pv2-ok   { background: rgba(74,222,128,.06);  border: 1px solid rgba(74,222,128,.2); }
.pv2-fail { background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.2); }
.pv2-info { background: rgba(56,189,248,.05);  border: 1px solid rgba(56,189,248,.15); }
.pv2-header { display: flex; align-items: center; gap: 5px; padding: 4px 8px; }
.pv2-icon  { font-size: 11px; font-weight: 800; }
.pv2-ok   .pv2-icon { color: #4ade80; }
.pv2-fail .pv2-icon { color: #f87171; }
.pv2-info .pv2-icon { color: #38bdf8; }
.pv2-label { font-weight: 700; color: var(--internal-text); flex: 1; }
.pv2-conf  { font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 10px; text-transform: uppercase; }
.pv2-conf-alta  { background: rgba(74,222,128,.12);  color: #4ade80; }
.pv2-conf-media { background: rgba(251,191,36,.1);   color: #fbbf24; }
.pv2-conf-bassa { background: rgba(248,113,113,.1);  color: #f87171; }
.pv2-rows { padding: 2px 8px 4px; border-top: 1px solid rgba(255,255,255,.06); }
.pv2-row-line { display: flex; align-items: center; gap: 6px; padding: 1px 0; font-size: 9px; }
.pv2-ri    { color: var(--internal-gold); font-weight: 800; min-width: 18px; }
.pv2-rw,.pv2-rl { color: var(--internal-muted); min-width: 50px; }
.pv2-ritems { display: flex; flex-wrap: wrap; gap: 3px; }
.pv2-item  { background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 3px; color: var(--internal-text); }
.pv2-item.rotated { border: 1px solid rgba(214,168,63,.3); color: var(--internal-gold); }
.pv2-unplaced { padding: 3px 8px; font-size: 9px; color: #f87171; border-top: 1px solid rgba(255,255,255,.06); }
.pv2-unpl-item { font-style: italic; }
.pv2-warn { padding: 2px 8px; font-size: 9px; color: #fbbf24; }

.pv1-disclaimer {
    font-size: 8px; color: var(--internal-muted);
    font-style: italic; margin-top: 4px; text-align: right;
}

/* ── V4: Preview 3D isometrica SVG ─────────────────────────────────────── */
.pv4-wrap {
    margin: 4px 0 2px;
    border: 1px solid rgba(74,222,128,.2);
    border-radius: 5px; background: rgba(74,222,128,.03);
    font-size: 10px; overflow: hidden;
}
.pv4-summary {
    padding: 4px 8px; cursor: pointer; font-weight: 700;
    color: var(--internal-muted); font-size: 10px;
    list-style: none; user-select: none;
}
.pv4-summary::-webkit-details-marker { display: none; }
.pv4-summary::marker              { display: none; }
.pv4-summary:hover                { color: var(--internal-text); }
.pv4-status { color: #4ade80; font-size: 9px; }
.pv4-body   { padding: 4px 0 6px; border-top: 1px solid rgba(74,222,128,.1); }
.pv4-dims   { font-size: 7px; color: var(--internal-muted); text-align: right; margin-top: 2px; }
.pv4-limited, .pv4-note {
    font-size: 8px; color: var(--internal-muted);
    margin-top: 2px; font-style: italic;
}
.pv4-limited { color: #fbbf24; }
.pv4-na {
    font-size: 9px; color: var(--internal-muted); padding: 4px 8px; font-style: italic;
}

/* ── V5: Viewer 3D interattivo Three.js ────────────────────────────────── */
.pv5-wrap {
    margin: 4px 0 2px;
    border: 1px solid rgba(99,179,237,.22);
    border-radius: 5px; background: rgba(99,179,237,.03);
    font-size: 10px; overflow: hidden;
}
.pv5-summary {
    padding: 4px 8px; cursor: pointer; font-weight: 700;
    color: var(--internal-muted); font-size: 10px;
    list-style: none; user-select: none;
}
.pv5-summary::-webkit-details-marker { display: none; }
.pv5-summary::marker              { display: none; }
.pv5-summary:hover                { color: var(--internal-text); }
.pv5-status { color: #63b3ed; font-size: 9px; font-weight: 400; margin-left: 4px; }
.pv5-canvas-wrap {
    width: 100%; max-width: 100%; box-sizing: border-box;
    overflow: hidden; background: var(--c-bg);
    /* altezza impostata via JS basandosi su clientWidth;
       la sincronizzazione con eventuali variazioni di larghezza (es. comparsa
       della barra di scorrimento del pannello) è gestita via ResizeObserver
       in packing-three-viewer.js, cosi' il canvas non resta mai piu' largo
       dell'area visibile e non viene tagliato. */
}
.pv5-canvas-wrap canvas { display: block; width: 100% !important; max-width: 100%; }
.pv5-controls {
    padding: 3px 8px 4px; border-top: 1px solid rgba(99,179,237,.10);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.btn-pv5-reset {
    font-size: 9px; padding: 2px 8px;
    background: rgba(99,179,237,.10); border: 1px solid rgba(99,179,237,.25);
    color: #63b3ed; border-radius: 3px; cursor: pointer; transition: background .12s;
}
.btn-pv5-reset:hover { background: rgba(99,179,237,.20); }
.pv5-hint    { font-size: 8px; color: var(--internal-muted); font-style: italic; }
.pv5-limited { font-size: 8px; color: #fbbf24; font-style: italic; }
.pv5-msg     { font-size: 9px; color: var(--internal-muted); padding: 6px 10px; font-style: italic; }
.pv5-na      { color: var(--internal-muted); }

/* ── V3-A: Riga stacking nella tabella colli ────────────────────────────── */
.collo-stack-cell {
    padding: 1px 6px 2px !important;
    width: 100%;
    background: rgba(214,168,63,.03);
    border-top: 1px dashed rgba(214,168,63,.15);
}
.collo-stack-inner {
    display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; gap: 8px;
    width: 100%;
    line-height: 1;
    overflow-x: auto;
}
.stack-cb {
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
    font-size: 9px !important; line-height: 1 !important; color: var(--internal-muted) !important;
    cursor: pointer; white-space: nowrap;
    flex: 0 0 auto;
    flex-direction: row !important;
}
.stack-cb input[type=checkbox] { width: 10px; height: 10px; margin: 0; accent-color: var(--internal-gold); flex-shrink: 0; }
.stack-input-lbl {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    font-size: 9px !important; line-height: 1 !important; color: var(--internal-muted) !important;
    font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important;
    white-space: nowrap; flex: 0 0 auto;
    flex-direction: row !important;
}
.stack-lbl-text { order: 1; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; }
.stack-input-lbl input {
    order: 2; width: 32px; font-size: 9px !important; line-height: 1;
    padding: 0 2px 1px; margin: 0; text-align: left;
    background: transparent; border: none; border-bottom: 1px solid rgba(214,168,63,.3);
    color: var(--internal-text); height: auto;
}
.stack-input-lbl input:focus { border-bottom-color: var(--internal-gold); outline: none; }
.stack-warn-hint {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    align-items: center; overflow: hidden;
    font-size: 6.5px; line-height: 1.15; color: #e0a83f;
    background: rgba(224,168,63,.10); border: 1px solid rgba(224,168,63,.3);
    border-radius: 4px; padding: 2px 5px;
    white-space: normal; word-break: break-word;
    flex: 1 1 0; min-width: 0; max-width: 100%;
}
.stack-warn-hint[hidden] { display: none; }

/* ── V3-A: Pannello risultato stacking 3D ───────────────────────────────── */
.pv3a-section {
    margin: 4px 0 2px;
    border: 1px solid rgba(251,191,36,.2);
    border-radius: 5px; background: rgba(251,191,36,.03);
    font-size: 10px; overflow: hidden;
}
.pv3a-na { border-color: rgba(136,136,136,.15); background: transparent; padding: 4px 8px; }
.pv3a-na-msg { color: var(--internal-muted); font-style: italic; font-size: 9px; }
.pv3a-header {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-bottom: 1px solid rgba(251,191,36,.1);
}
.pv3a-title { font-weight: 800; color: #fbbf24; flex: 1; }
.pv3a-reason { padding: 2px 8px; font-size: 9px; color: var(--internal-muted); }
.pv3a-stacks-label { padding: 2px 8px; font-size: 9px; color: #fbbf24; font-weight: 700; }
.pv3a-stack {
    display: flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-top: 1px solid rgba(255,255,255,.04);
    font-size: 9px;
}
.pv3a-base  { font-weight: 700; color: var(--internal-text); }
.pv3a-arr   { color: var(--internal-muted); }
.pv3a-above { color: #fbbf24; }
.pv3a-ht    { color: var(--internal-muted); margin-left: auto; }
.pv3a-note  { padding: 2px 8px 4px; font-size: 8px; color: var(--internal-muted); font-style: italic; border-top: 1px solid rgba(255,255,255,.04); }

/* ── V3-C: Pannello verifica a zone / culla ────────────────────────────── */
.pv3-seg-section {
    margin: 6px 0 2px;
    border: 1px solid rgba(163,230,53,.25);
    border-radius: 6px;
    background: rgba(163,230,53,.03);
    font-size: 10px;
    overflow: hidden;
}
.pv3-seg-header {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-bottom: 1px solid rgba(163,230,53,.12);
}
.pv3-seg-icon  { font-size: 12px; font-weight: 800; }
.pv3-seg-title { font-weight: 800; color: #a3e635; flex: 1; }
.pv3-seg-label { font-size: 9px; color: var(--internal-muted); }
.pv3-seg-reason { padding: 3px 10px; font-size: 9px; color: var(--internal-muted); }
.pv3-zone {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 4px;
    padding: 3px 10px; border-top: 1px solid rgba(255,255,255,.04);
}
.pv3-zone-label  { font-weight: 700; color: var(--internal-text); font-size: 9px; }
.pv3-zone-dims   { font-size: 8px; color: var(--internal-muted); }
/* Badge posizione zona culla: ANT. / CEN. / POST. */
.pv3-zone-pos { display:inline-block; font-size:7px; font-weight:800; padding:1px 4px;
                border-radius:2px; margin-left:4px; vertical-align:middle; letter-spacing:.03em; }
.pv3-pos-anteriore  { background:rgba(74,222,128,.15); color:#4ade80; border:1px solid rgba(74,222,128,.3); }
.pv3-pos-centrale   { background:rgba(214,168,63,.12); color:#d6a83f; border:1px solid rgba(214,168,63,.3); }
.pv3-pos-posteriore { background:rgba(99,179,237,.12); color:#63b3ed; border:1px solid rgba(99,179,237,.3); }
.pv3-zone-stats  { font-size: 9px; color: var(--internal-muted); text-align: right; }
.pv3-zone-items  { grid-column: 1 / -1; font-size: 8px; color: var(--internal-muted);
                   padding: 1px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── V3-B: Pannello suggerimento multi-mezzo ───────────────────────────── */
.pv3-multi-section {
    margin: 6px 0 2px;
    border: 1px solid rgba(56,189,248,.25);
    border-radius: 6px;
    background: rgba(56,189,248,.04);
    font-size: 10px;
    overflow: hidden;
}
.pv3-na { border-color: rgba(136,136,136,.2); background: transparent; padding: 5px 8px; }
.pv3-na-msg { color: var(--internal-muted); font-style: italic; }
.pv3-multi-header {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-bottom: 1px solid rgba(56,189,248,.12);
}
.pv3-multi-icon  { font-size: 12px; font-weight: 800; }
.pv3-multi-title { font-weight: 800; color: #38bdf8; flex: 1; }
.pv3-veh-badge   { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 10px;
                   background: rgba(56,189,248,.12); color: #38bdf8; }
.pv3-conf        { font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 10px;
                   text-transform: uppercase; }
.pv3-conf-alta   { background: rgba(74,222,128,.12);  color: #4ade80; }
.pv3-conf-media  { background: rgba(251,191,36,.1);   color: #fbbf24; }
.pv3-conf-bassa  { background: rgba(248,113,113,.1);  color: #f87171; }
.pv3-reason      { padding: 3px 10px; font-size: 9px; color: var(--internal-muted); }
.pv3-assignment  { padding: 3px 10px 4px; border-top: 1px solid rgba(255,255,255,.04); }
.pv3-asgn-head   { display: flex; align-items: center; gap: 6px; }
.pv3-asgn-num    { font-size: 9px; font-weight: 800; color: #38bdf8;
                   background: rgba(56,189,248,.1); padding: 1px 5px; border-radius: 3px; }
.pv3-asgn-label  { font-weight: 700; color: var(--internal-text); }
.pv3-asgn-tipo   { font-size: 9px; color: var(--internal-muted); }
.pv3-asgn-stats  { font-size: 9px; color: var(--internal-muted); margin-left: auto; }
.pv3-p2ok   { color: #4ade80; font-weight: 700; }
.pv3-p2warn { color: #fbbf24; font-weight: 700; }
.pv3-asgn-items  { font-size: 9px; color: var(--internal-muted); padding: 1px 0 2px 20px;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv3-asgn-warn   { font-size: 9px; color: #fbbf24; padding: 1px 0 2px 20px; }
.pv3-unassigned  { padding: 4px 10px; font-size: 9px; color: #f87171;
                   border-top: 1px solid rgba(248,113,113,.15);
                   background: rgba(248,113,113,.04); }
.pv3-unassigned-item { font-style: italic; }
.pv3-multi-warn  { padding: 3px 10px; font-size: 9px; color: #fbbf24; }
.pv3-disclaimer  { padding: 3px 10px 5px; font-size: 8px; color: var(--internal-muted);
                   font-style: italic; border-top: 1px solid rgba(255,255,255,.05); }

/* ── Preview 2D SVG del pianale ────────────────────────────────────────── */
.pv2-preview-wrap {
    margin: 6px 0 2px;
    border: 1px solid rgba(214,168,63,.2);
    border-radius: 5px;
    overflow: hidden;
    background: rgba(214,168,63,.03);
}
.pv2-preview-summary {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    color: var(--internal-muted);
    user-select: none;
    list-style: none;
}
.pv2-preview-summary::-webkit-details-marker { display: none; }
.pv2-preview-summary::marker { display: none; }
.pv2-preview-summary:hover { color: var(--internal-text); }
.pv2-preview-body {
    padding: 6px 10px 8px;
    border-top: 1px solid rgba(214,168,63,.15);
}
.pv2-dims-label {
    font-size: 8px;
    color: var(--internal-muted);
    margin-top: 3px;
    text-align: center;
}
.pv2-unplaced-list {
    font-size: 9px;
    color: #fbbf24;
    margin-top: 4px;
    padding: 3px 6px;
    background: rgba(251,191,36,.06);
    border-radius: 3px;
}
.pv2-unpl { font-style: normal; }
.pv2-unpl em { opacity: .7; }
.pv2-preview-na {
    font-size: 9px;
    color: var(--internal-muted);
    padding: 4px 8px;
    font-style: italic;
}

/* ── Widget Confidence ─────────────────────────────────────────────────── */
.conf-widget { margin: 4px 0 2px; }

/* Pill colorata */
.conf-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700;
    border: 1px solid; margin-bottom: 6px; width: 100%; box-sizing: border-box;
}
.conf-alta    { background: rgba(74,222,128,.1);  color: #4ade80; border-color: rgba(74,222,128,.3); }
.conf-media   { background: rgba(251,191,36,.1);  color: #fbbf24; border-color: rgba(251,191,36,.28); }
.conf-bassa   { background: rgba(248,113,113,.1); color: #f87171; border-color: rgba(248,113,113,.28); }
.conf-manuale { background: rgba(136,136,136,.1); color: #888;    border-color: rgba(136,136,136,.25); }
.conf-dot     { font-size: 10px; }
.conf-label-lvl { flex: 1; }
.conf-score-num { font-size: 10px; font-weight: 600; opacity: .75; }

/* Barra con zone colorate */
.conf-track {
    position: relative; height: 6px; border-radius: 3px;
    overflow: visible; display: flex; margin-bottom: 2px;
}
.conf-zone { height: 100%; }
.conf-z-bassa { background: rgba(248,113,113,.35); border-radius: 3px 0 0 3px; }
.conf-z-media { background: rgba(251,191,36,.35); }
.conf-z-alta  { background: rgba(74,222,128,.35); border-radius: 0 3px 3px 0; }
.conf-needle  {
    position: absolute; top: -2px; width: 2px; height: 10px;
    background: #fff; border-radius: 1px; transform: translateX(-50%);
    box-shadow: 0 0 3px rgba(0,0,0,.5);
}

/* Tick numbers */
.conf-ticks {
    position: relative; height: 12px; font-size: 8px;
    color: var(--internal-muted); margin-bottom: 2px;
}
.conf-ticks span {
    position: absolute; transform: translateX(-50%);
}

/* Prezzo manuale nel sidebar */
.sidebar-manual-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 10px;
    border: 1px dashed rgba(214,168,63,.35);
    border-radius: 6px;
    background: rgba(214,168,63,.04);
}
.sidebar-manual-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--internal-muted);
    font-weight: 700;
}
.sidebar-manual-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(214,168,63,.4);
    color: var(--internal-gold);
    font-size: 16px;
    font-weight: 800;
    width: 100%;
    padding: 2px 0;
    outline: none;
    font-family: var(--internal-font);
}
.sidebar-manual-input::placeholder { color: rgba(214,168,63,.3); font-size: 13px; font-weight: 400; }
.sidebar-manual-input:focus { border-bottom-color: var(--internal-gold); }

/* Sezione badge sotto le card */
.sidebar-badges-section {
    flex: 1;
    border-top: 1px solid var(--internal-border);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
}

.sidebar-badges-section .internal-badge {
    align-self: flex-start;
    font-size: 11px;
    padding: 5px 8px;
}

.sidebar-badge-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-badge-row .sb-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--internal-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sidebar-badge-row .sb-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--internal-text);
}

.internal-map-card {
    position: relative;
    /* Responsiva: riempie lo spazio disponibile fino a 650px e resta quadrata, così
       su pannelli/schermi stretti si RIMPICCIOLISCE invece di sforare a destra
       (prima width:650px fissa + flex-shrink:0 → i controlli/legenda venivano tagliati
       da overflow-x:clip su schermi < ~1620px al 100%). */
    width: 100%;
    max-width: 650px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    background: #101418;
    margin-left: auto;   /* resta allineata a destra quando c'è spazio in più */
    margin-bottom: 18px;
}

.internal-route-map {
    /* position absolute + inset: 0 è il pattern corretto per Leaflet
       in un container responsive. Evita che Leaflet legga dimensioni
       sbagliate prima che il layout CSS grid sia stabilizzato. */
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 160ms ease;
}

.internal-route-map.ready {
    opacity: 1;
}

/* ── Selettore stile mappa — icone sempre visibili, etichette su hover 2s ── */
#map-style-switcher {
    position: absolute;
    bottom: 30px;
    left: 10px;
    z-index: 10;
}
/* Glassmorphism coerente con la sidebar subvettori: trasparenza + blur,
   bordo dorato morbido, riflesso superiore leggero. Solo estetica:
   funzionalità layer invariata. */
.mss-panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
        rgba(13, 16, 19, 0.62);
    border: 1px solid rgba(214, 168, 63, 0.22);
    border-radius: 10px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* collassato: larghezza esatta dell'icona + padding */
    width: 34px;
    overflow: hidden;
    transition: width .25s ease, border-color .2s ease;
}
.mss-panel.expanded { width: 140px; }
.mss-panel:hover { border-color: rgba(214, 168, 63, 0.38); }

.mss-btn {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--c-muted);
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.mss-btn:hover {
    background: rgba(214, 168, 63, 0.08);
    color: #e8e2d5;
}
.mss-btn:focus-visible {
    outline: 2px solid var(--internal-gold);
    outline-offset: -2px;
}
.mss-btn.active {
    border-color: rgba(214, 168, 63, 0.55);
    color: var(--internal-gold);
    background: rgba(214, 168, 63, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.mss-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

/* Stato COLLASSATO: senza questa regola l'icona (22px) sborda dal content box
   del bottone (34 − padding pannello − padding bottone − bordi = 16px) e viene
   clippata a destra, risultando decentrata. Azzerando il padding laterale e
   centrando, l'icona ha 24px di spazio e siede al centro esatto della colonna.
   Lo stato espanso non è toccato (selettore :not(.expanded)). */
.mss-panel:not(.expanded) .mss-btn {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
/* Etichetta: nascosta di default, scorre in entrata/uscita */
.mss-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    transition: max-width .22s ease, opacity .18s ease, margin-left .22s ease;
    white-space: nowrap;
}
.mss-panel.expanded .mss-label {
    max-width: 100px;
    opacity: 1;
    margin-left: 6px;
}
/* Al tocco non c'è il passaggio del mouse che dopo 2 secondi apre le etichette: i nomi degli stili restano sempre scritti, e i bottoni sono alti 40px
   (CLAUDE.md §23.2, trappola 4 — 26/10/2026). Il desktop col mouse non cambia. */
@media (pointer: coarse) {
    .mss-panel, .mss-panel.expanded { width: 130px; }
    .mss-panel:not(.expanded) .mss-btn { justify-content: flex-start; padding-left: 4px; padding-right: 4px; }
    .mss-btn { min-height: 40px; }
    .mss-label, .mss-panel:not(.expanded) .mss-label { max-width: 100px; opacity: 1; margin-left: 6px; }
}

/* Popup Mapbox: forza testo scuro su sfondo bianco (il tema scuro ereditava color:#fff) */
.mapboxgl-popup-content {
    color: #111 !important;
    font-size: 12px;
    font-family: Inter, sans-serif;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.internal-map-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--internal-muted);
    text-align: center;
    background: linear-gradient(135deg, #11161a, #171c21);
}

.internal-map-placeholder[hidden] {
    display: none !important;
}

.internal-map-fallback {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 24px;
    background: #11161a;
}

.internal-map-fallback > div:not(.internal-map-fallback-line) {
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    padding: 12px;
    background: var(--c-surface);
}

.internal-map-fallback strong,
.internal-map-fallback span {
    display: block;
    overflow-wrap: anywhere;
}

.internal-map-fallback span {
    margin-top: 4px;
    color: var(--internal-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.internal-map-fallback-line {
    height: 2px;
    border-top: 2px dashed var(--internal-gold);
}

.internal-map-meta {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    pointer-events: none;
    z-index: 2;
}

.internal-map-meta span {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(16, 18, 20, 0.84);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* ── Legenda dinamica «Motore percorso» (ORS camion / OSRM auto) ─────────────
   Angolo basso-destra: l'unico libero (meta = alto-sx, switcher = basso-sx,
   zoom Mapbox = alto-dx, attribution compatta = angolo). Click-through. */
/* Percorso da auto (15/09/2026): avviso che non si può non vedere. */
.internal-route-degraded {
    margin: 0 0 10px;
    padding: 10px 14px;
    border: 1px solid #b91c1c;
    border-left: 4px solid #ef4444;
    border-radius: 8px;
    background: rgba(127, 29, 29, .35);
    color: #fecaca;
    font-size: .88rem;
    line-height: 1.5;
}
.internal-route-degraded strong { color: #fff; display: block; margin-bottom: 2px; }
/* Tratta con l'estero: stesso riquadro, colore d'avviso invece che di guasto. */
.internal-route-foreign {
    border-color: #b45309;
    border-left-color: #f59e0b;
    background: rgba(120, 53, 15, .35);
}
/* ── Percorsi a confronto: tratte con l'estero (16/09/2026) ────────────────────────────────────
   Una riga per percorso; quella in uso ha il bordo oro a sinistra, quella non percorribile
   (per esempio le 40 t della Svizzera) resta leggibile ma spenta. */
.rv-table td { vertical-align: top; }
.rv-table .rv-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-table tr.rv-on { background: rgba(250, 204, 21, .07); }
.rv-table tr.rv-on td:first-child { box-shadow: inset 3px 0 0 var(--c-accent, #facc15); }
.rv-table tr.rv-preclusa { opacity: .62; }
.rv-paesi, .rv-motivo { display: block; font-size: .82em; color: var(--c-muted, #9ca3af); margin-top: 2px; }
.rv-motivo { color: #fbbf24; }
.rv-azione { text-align: right; }
.rv-badge {
    display: inline-block; padding: 3px 8px; border-radius: 999px;
    font-size: .78em; font-weight: 700; white-space: nowrap;
}
.rv-badge-on  { background: rgba(250, 204, 21, .18); color: var(--c-accent, #facc15); }
.rv-badge-off { background: rgba(148, 163, 184, .16); color: var(--c-muted, #9ca3af); }
.rv-usa {
    min-height: 40px; padding: 8px 12px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--c-accent, #facc15); background: transparent;
    color: var(--c-accent, #facc15); font-weight: 700; font-size: .9rem;
}
.rv-usa:hover:not(:disabled) { background: rgba(250, 204, 21, .14); }
.rv-usa:disabled { opacity: .5; cursor: default; }
/* Al tocco il pulsante deve restare grande anche quando la tabella si stringe. */
@media (pointer: coarse) {
    .rv-usa { min-width: 96px; }
}
.internal-map-engine {
    position: absolute;
    right: 10px;
    bottom: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 9px;
    min-width: 92px;
    border-radius: 10px;
    border: 1px solid rgba(214, 168, 63, 0.22);
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
        rgba(13, 16, 19, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    pointer-events: none;
    font-family: Inter, sans-serif;
}
.rme-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 1px;
}
.rme-item {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .34;
    filter: grayscale(1);
    transition: opacity .18s ease, filter .18s ease;
}
.rme-item.active { opacity: 1; filter: none; }
.rme-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.35);
    flex: 0 0 auto;
}
.rme-name { font-size: 12px; font-weight: 800; color: #fff; }
.rme-sub  { font-size: 10px; font-weight: 600; color: var(--c-muted); }
/* motore attivo affidabile (camion) = verde acceso; fallback auto = ambra d'allerta */
.rme-item.active.rme-ok   .rme-dot  { background: #3fae6a; box-shadow: 0 0 8px rgba(63,174,106,.85); }
.rme-item.active.rme-ok   .rme-name { color: #7fe0a0; }
.rme-item.active.rme-warn .rme-dot  { background: #e0a83f; box-shadow: 0 0 8px rgba(224,168,63,.9); }
.rme-item.active.rme-warn .rme-name { color: #f0c674; }
.rme-note {
    margin-top: 2px;
    max-width: 120px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    color: #f0c674;
}

/* ── Fase 3 checkpoint: suggerimento corridoio memorizzato ─────────────────── */
.internal-corridor-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(214, 168, 63, 0.28);
    background:
        linear-gradient(180deg, rgba(214,168,63,.10), rgba(214,168,63,0) 60%),
        rgba(13, 16, 19, 0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--internal-text, #e8eaed);
    animation: ich-in .22s ease;
}
@keyframes ich-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.internal-corridor-hint[hidden] { display: none; }
.internal-corridor-hint .ich-icon { font-size: 16px; flex: 0 0 auto; }
.internal-corridor-hint .ich-text { flex: 1 1 auto; min-width: 0; }
.internal-corridor-hint .ich-text strong { color: #f0c674; font-weight: 700; }
.internal-corridor-hint .ich-count {
    display: inline-block;
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(214,168,63,.18);
    color: #f0c674;
    font-size: 10.5px;
    font-weight: 700;
}
.internal-corridor-hint .ich-add {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid rgba(214,168,63,.55);
    background: linear-gradient(180deg, rgba(214,168,63,.22), rgba(214,168,63,.08));
    color: #f7e2a8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.internal-corridor-hint .ich-add:hover {
    background: linear-gradient(180deg, rgba(214,168,63,.34), rgba(214,168,63,.14));
    border-color: rgba(214,168,63,.8);
}
.internal-corridor-hint .ich-forget {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--internal-muted, #9aa0a6);
    font-size: 13px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.internal-corridor-hint .ich-forget:hover {
    color: #ff8a8a;
    background: rgba(255,120,120,.10);
    border-color: rgba(255,120,120,.25);
}
@media (max-width: 640px) {
    .internal-corridor-hint { flex-wrap: wrap; }
    .internal-corridor-hint .ich-text { flex-basis: 100%; }
}

.internal-guide {
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    padding: 18px;
    background: var(--internal-panel-soft);
}

.internal-guide h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.internal-guide p,
.internal-guide li,
.internal-muted {
    color: var(--internal-muted);
}

.internal-preview-card {
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    padding: 18px;
    background: #151a1f;
}

.internal-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.internal-preview-head h2 {
    margin: 4px 0 0;
    font-size: 24px;
}

.internal-badge.preview {
    color: #ffe2a1;
    background: #27200f;
}

.internal-preview-range {
    border: 1px solid rgba(214, 168, 63, 0.42);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
    background: #211c12;
}

.internal-preview-range span {
    display: block;
    color: var(--internal-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.internal-preview-range strong {
    display: block;
    margin-top: 6px;
    color: var(--internal-gold);
    font-size: 30px;
}

.preview-prices .internal-price {
    min-height: 78px;
    opacity: 0.9;
}

.preview-prices .internal-price strong {
    font-size: 20px;
}

.preview-prices .internal-price.featured strong {
    font-size: 24px;
}

.internal-report-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.internal-report h2 {
    margin: 3px 0;
    font-size: 25px;
    letter-spacing: 0;
}

.internal-report h3 {
    margin: 24px 0 10px;
    font-size: 17px;
}

.internal-badge,
.internal-price,
.internal-summary-grid > div {
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    background: var(--internal-panel-soft);
}

.internal-badge {
    align-self: start;
    padding: 8px 10px;
    color: var(--internal-gold);
    font-weight: 800;
}

.internal-summary-grid,
.internal-price-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;    /* compattato da 10px */
}

.internal-summary-grid > div,
.internal-price {
    padding: 8px 10px;   /* compattato da 12px */
}

.internal-summary-grid span,
.internal-price span {
    display: block;
    color: var(--internal-muted);
    font-size: 11px;
    font-weight: 700;
}

.internal-summary-grid strong,
.internal-price strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

/* Auto-scaling: max 2 righe, JS riduce il font se sfora */
.metric-value {
    line-height: 1.35;
    max-height: calc(1.35em * 2);   /* esattamente 2 righe */
    overflow: hidden;
    word-break: break-word;
}

/* Badge velocità media — diagnostica routing camion vs auto */
.speed-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.6;
    letter-spacing: .02em;
    white-space: nowrap;
}
.speed-ok   { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.35); }
.speed-warn { background: rgba(251,191,36,.13); color: #fbbf24; border: 1px solid rgba(251,191,36,.35); }
.speed-bad  { background: rgba(248,113,113,.13); color: #f87171; border: 1px solid rgba(248,113,113,.35); }

.internal-price-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 16px 0;
}

.internal-price-grid.featured {
    align-items: stretch;
}

.internal-price {
    min-height: 94px;
}

.internal-price strong {
    font-size: 24px;
}

.internal-price.featured {
    border-color: var(--internal-gold);
    background: #262115;
}

.internal-price.featured strong {
    font-size: 32px;
    color: var(--internal-gold);
}

.internal-price .price-km {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--internal-muted);
    text-align: right;
    letter-spacing: 0.02em;
}

.internal-price.featured .price-km {
    color: rgba(214, 168, 63, 0.65);
}

.internal-risk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 8px 0 18px;
}

.internal-risk-row span:not(.internal-badge) {
    border: 1px solid var(--internal-border);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--internal-muted);
    background: #12161a;
    font-size: 13px;
    font-weight: 700;
}

.internal-price.danger strong { color: var(--internal-red); }
.internal-price.ok strong { color: var(--internal-green); }
.internal-price.info strong { color: var(--internal-blue); }

.internal-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--internal-border);
    border-radius: 8px;
}

.internal-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 0;       /* nessun overflow orizzontale */
    table-layout: auto;
}

.internal-table-wrap th,
.internal-table-wrap td {
    padding: 10px;
    border-bottom: 1px solid var(--internal-border);
    text-align: left;
    vertical-align: top;
}

.internal-table-wrap th {
    background: #11161a;
    color: var(--internal-gold);
}

.internal-table-wrap .breakdown-category td {
    background: #20262b;
    color: var(--internal-gold);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    position: relative;        /* per il subtotale assoluto */
}

.internal-table-wrap .breakdown-category td:hover {
    background: #262e35;
}

/* Quando la categoria è aperta, importo e subtotale già visibili nelle righe dati */
.breakdown-category.open td.money {
    opacity: 0.3;
}

.cat-toggle {
    display: inline-block;
    width: 14px;
    font-size: 10px;
    transition: transform 120ms;
}

/* Fonte e Note nascoste di default */
.col-details { display: none; }
.show-details .col-details { display: table-cell; }

/* Pulsante toggle dettagli tecnici */
.breakdown-details-btn {
    float: right;
    margin-bottom: 6px;
    border: 1px solid var(--internal-border);
    border-radius: 6px;
    padding: 4px 10px;
    background: var(--internal-panel-soft);
    color: var(--internal-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.breakdown-details-btn:hover { border-color: var(--internal-gold); color: var(--internal-gold); }

/* h3 collassabili */
.section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-toggle::before {
    content: '▾';
    font-size: 11px;
    color: var(--internal-gold);
    transition: transform 120ms;
}
.section-toggle.collapsed::before { transform: rotate(-90deg); }
.section-content.collapsed { display: none; }

/* Tabella 3 colonne: Voce (auto), Importo (90px), Subtotale (90px) */
.internal-table-wrap th:nth-child(1),
.internal-table-wrap td:nth-child(1) { width: auto; }
.internal-table-wrap th:nth-child(2),
.internal-table-wrap td:nth-child(2) { width: 90px; white-space: nowrap; }
.internal-table-wrap th:nth-child(3),
.internal-table-wrap td:nth-child(3) { width: 90px; white-space: nowrap; }

/* Cella Voce a due livelli */
.voce-cell { vertical-align: top; padding: 8px 10px !important; }
.voce-label { font-size: 13px; font-weight: 600; line-height: 1.3; }
.voce-detail { font-size: 10px; color: var(--internal-muted); margin-top: 3px; line-height: 1.4; }
.voce-note   { font-size: 9px;  color: rgba(174,182,189,0.55); margin-top: 2px; line-height: 1.3; }

.money {
    white-space: nowrap;
    text-align: right;
}

/* Colonna subtotale progressivo nella scomposizione analitica */
.internal-table-wrap th.subtotale-col,
.internal-table-wrap td.subtotale-col {
    border-left: 2px solid rgba(214, 168, 63, 0.25);
    background: rgba(214, 168, 63, 0.06);
    white-space: nowrap;
    text-align: right;
}

.internal-table-wrap th.subtotale-col {
    color: var(--internal-gold);
    font-weight: 800;
}

.internal-table-wrap td.subtotale-col {
    color: var(--internal-gold);
    font-weight: 700;
}

.internal-alert {
    margin: 12px 0;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--internal-border);
}

.internal-alert-danger { border-color: var(--internal-red); color: #ffd7d3; }
.internal-alert-warning { border-color: var(--internal-yellow); color: #fff0b8; }
.internal-alert-ok { border-color: var(--internal-green); color: #d7ffe4; }

.internal-warning-list {
    color: var(--internal-muted);
    padding-left: 20px;
}

/* «Dati che migliorerebbero la stima» (26/10/2026): ogni voce porta al suo campo. Con il dito il bersaglio è alto 40px, col mouse resta una riga. */
.dato-mancante {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--c-accent, #e8a020);
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}
.dato-mancante:hover, .dato-mancante:focus-visible { text-decoration-style: solid; }
.dato-evidenziato { outline: 2px solid var(--c-accent, #e8a020); outline-offset: 2px; transition: outline-color .3s; }
@media (pointer: coarse) {
    .dato-mancante { min-height: 40px; display: inline-flex; align-items: center; }
}

.internal-login {
    display: grid;
    place-items: center;
    padding: 24px;
}

.internal-login-panel {
    width: min(440px, 100%);
    padding: 26px;
}

.internal-login-logo {
    display: block;
    max-width: 180px;
    margin-bottom: 20px;
}

.internal-login-form {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.internal-history-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--internal-border);
    border-radius: 8px;
    background: #14181c;
}

.internal-history-filters input[type="search"],
.internal-history-filters input[type="date"],
.internal-history-filters select {
    border: 1px solid var(--internal-border);
    border-radius: 6px;
    padding: 8px 10px;
    background: var(--c-surface-3);
    color: var(--internal-text);
    font: inherit;
    font-size: 13px;
}

.internal-history-filters input[type="search"] {
    flex: 1 1 180px;
    min-width: 140px;
}

.internal-history-filters input[type="date"] {
    flex: 0 0 auto;
}

.internal-history-filters select {
    flex: 0 1 160px;
}

.internal-history-filters button {
    border: 1px solid var(--internal-border);
    border-radius: 6px;
    padding: 8px 12px;
    background: var(--internal-panel-soft);
    color: var(--internal-text);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.internal-history-filters button:hover {
    border-color: var(--internal-gold);
}

.internal-history-filters .internal-muted {
    font-size: 12px;
    white-space: nowrap;
}

.history-row:focus-visible { outline: 2px solid var(--internal-gold); outline-offset: -2px; }
.history-row {
    cursor: pointer;
    transition: background 120ms ease;
}

.history-row:hover td {
    background: #20262b;
}

@media (max-width: 1100px) {
    .internal-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .internal-topbar,
    .internal-report-head {
        flex-direction: column;
    }
    .internal-grid.two,
    .internal-manual,
    .internal-summary-grid,
    .internal-price-grid {
        grid-template-columns: 1fr;
    }
    .internal-tabs {
        overflow-x: auto;
    }
}

/* ── Tabella colli ─────────────────────────────────────────────────────── */
.colli-section { grid-column: 1 / -1; margin: 2px 0 6px; }
.colli-section-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.colli-section-title {
    font-size: 11px; font-weight: 700; color: var(--internal-muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.btn-collo-add {
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    background: rgba(214,168,63,.1); border: 1px solid rgba(214,168,63,.35);
    color: var(--internal-gold); border-radius: 4px; cursor: pointer;
    transition: background .12s;
}
.btn-collo-add:hover { background: rgba(214,168,63,.2); }
.btn-collo-clear {
    font-size: 11px; padding: 3px 8px; margin-left: auto;
    background: none; border: 1px solid rgba(248,113,113,.3);
    color: #f87171; border-radius: 4px; cursor: pointer;
}
.colli-auto-note { font-size: 10px; color: var(--internal-gold); font-weight: 400; }

.colli-table-wrap {
    background: var(--internal-bg2); border: 1px solid var(--internal-border);
    border-radius: 6px; overflow: hidden; margin-bottom: 8px;
}
.colli-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.colli-table th {
    background: var(--internal-bg3); color: var(--internal-muted);
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 5px 6px; text-align: left;
    border-bottom: 1px solid var(--internal-border);
}
.collo-row td {
    padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.04);
    vertical-align: middle;
}
/* Colonna N°/quantità: larghezza fissata (ancorata) per non farla mai
   schiacciare quando il browser ridistribuisce lo spazio tra le colonne. */
.colli-th-n { width: 48px; min-width: 48px; max-width: 48px; }
.collo-n {
    font-size: 11px; color: var(--internal-muted); text-align: center;
    width: 48px; min-width: 48px; max-width: 48px; box-sizing: border-box;
}
/* Pezzi identici: campo numerico libero nella colonna N°, ben leggibile */
.collo-qty {
    width: 100%; max-width: 38px; box-sizing: border-box;
    text-align: center; font-size: 13px; font-weight: 700;
    color: var(--internal-text);
}
.collo-input {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid transparent;
    color: var(--internal-text); font-family: var(--internal-font); font-size: 12px;
    padding: 2px 3px; outline: none; transition: border-color .12s;
}
.collo-input:focus { border-bottom-color: var(--internal-gold); }
.collo-desc { min-width: 120px; }
.collo-dim  { width: 60px; text-align: right; }
.collo-del-btn {
    background: none; border: none; color: #f87171; cursor: pointer;
    font-size: 12px; padding: 2px 4px; opacity: .5; transition: opacity .1s;
}
.collo-del-btn:hover { opacity: 1; }
.colli-total-row td {
    background: var(--internal-bg3); padding: 4px 6px;
    border-top: 1px solid var(--internal-border); font-size: 11px;
}
.colli-tot-label { font-weight: 700; color: var(--internal-text); }
.colli-tot-val   { color: var(--internal-gold); font-weight: 700; text-align: right; white-space: nowrap; }
.colli-tot-sub   { font-size: 9px; color: var(--internal-muted); font-weight: 400; }

/* Matching flotta */
.colli-match-panel { padding: 8px 10px; }
.colli-match-title {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 10px; font-weight: 800; color: var(--internal-muted);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.cmt-text { flex: 1; }
.colli-match-empty-hint { font-style: italic; opacity: .8; text-transform: none; letter-spacing: normal; }

/* Select mezzo previsto inline nel titolo compatibilità flotta */
.mezzo-inline-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
.mezzo-inline-label {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(214,168,63,.6);
    white-space: nowrap;
}
.mezzo-inline-select {
    font-size: 11px; font-weight: 700;
    background: #1a1d20;
    border: 1px solid rgba(214,168,63,.3);
    color: var(--internal-gold);
    border-radius: 5px;
    padding: 3px 6px;
    cursor: pointer;
    font-family: inherit;
    width: auto;
    max-width: 148px;
    text-transform: none;
    letter-spacing: 0;
}
.mezzo-inline-select:focus { outline: 1px solid var(--internal-gold); }
/* Fix bianco-su-bianco: colora le opzioni native del dropdown */
.mezzo-inline-select option {
    background: #1a1d20;
    color: var(--c-text);
}
/* Highlight quando tipo generico attivo (non Da definire, non targa chip) */
.mezzo-inline-select.mz-generic-active {
    border-color: rgba(214,168,63,.65);
    background: rgba(214,168,63,.07);
}

/* ── Step 1 modal tariffa subvettore ────────────────────────────────────── */
.svs-tariffa-stage1 { padding: 2px 0 4px; }
.svs-tariffa-stage1-hint { font-size: 11px; color: var(--c-faint); margin-bottom: 14px; line-height: 1.5; }
.svs-tariffa-edit-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.svs-tariffa-edit-label {
    font-size: 9px; font-weight: 800; color: var(--internal-gold);
    text-transform: uppercase; letter-spacing: .08em;
}
.svs-tariffa-input {
    background: #1a1d20;
    border: 1px solid rgba(214,168,63,.35);
    color: var(--c-text);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 20px; font-weight: 900;
    width: 160px;
    font-family: inherit;
    transition: border-color .15s;
}
.svs-tariffa-input:focus { outline: none; border-color: var(--internal-gold); }
.svs-tariffa-input.svs-tariffa-inp-error { border-color: #f87171 !important; }
.svs-tariffa-floor-hint { font-size: 10px; color: var(--c-faint); font-style: italic; }
.svs-tariffa-error {
    font-size: 11px; color: #f87171;
    padding: 6px 9px; margin-bottom: 10px;
    background: rgba(248,113,113,.07);
    border: 1px solid rgba(248,113,113,.2);
    border-radius: 5px;
}
.svs-tariffa-warn {
    font-size: 11px; color: #fbbf24;
    padding: 6px 9px; margin-bottom: 10px;
    background: rgba(251,191,36,.05);
    border: 1px solid rgba(251,191,36,.18);
    border-radius: 5px;
}
/* V5.4 — feedback margine in tempo reale nel modal tariffa */
.svs-tariffa-feedback {
    font-size: 11px; padding: 6px 10px; border-radius: 5px;
    min-height: 28px; margin-bottom: 10px;
    transition: background .15s, color .15s;
}
.svs-tariffa-fb-good {
    color: #4ade80;
    background: rgba(74,222,128,.08);
    border: 1px solid rgba(74,222,128,.22);
}
.svs-tariffa-fb-neutral {
    color: var(--c-muted);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
}
.svs-tariffa-fb-warn {
    color: #fbbf24;
    background: rgba(251,191,36,.07);
    border: 1px solid rgba(251,191,36,.2);
}
.colli-match-list { display: flex; flex-direction: column; gap: 4px; }
.colli-match-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; padding: 4px 6px; border-radius: 5px;
}
.match-ok  { background: rgba(74,222,128,.07); border: 1px solid rgba(74,222,128,.2); }
.match-no  { background: rgba(248,113,113,.05); border: 1px solid rgba(248,113,113,.15); opacity: .8; }
.match-warn{ background: rgba(251,191,36,.07);  border: 1px solid rgba(251,191,36,.2); }
.match-icon { font-size: 13px; flex-shrink: 0; }
.match-ok  .match-icon { color: #4ade80; }
.match-no  .match-icon { color: #f87171; }
.match-nome { font-weight: 700; color: var(--internal-text); }
.match-nveh { font-size: 10px; color: var(--internal-muted); }
.match-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 10px; }
.match-adr  { background: rgba(56,189,248,.12); color: #38bdf8; border: 1px solid rgba(56,189,248,.2); }
.match-reasons { font-size: 10px; color: #f87171; margin-left: auto; }

/* Nuova UI matching veicoli individuali */
.match-ok-color { color: #4ade80; }
.match-no-color { color: #f87171; }
.match-suggerito { color: var(--internal-gold); font-weight: 700; font-size: 10px; }
.colli-match-group { margin-bottom: 6px; }
.cmg-label { font-size: 9px; font-weight: 800; text-transform: uppercase;
             letter-spacing: .05em; color: var(--internal-muted); margin-bottom: 4px; }
.cmg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.colli-chip {
    display: inline-flex; flex-direction: column; align-items: center;
    padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700;
    cursor: default; line-height: 1.3; border: 1px solid transparent;
    background: none; font-family: inherit; text-align: center;
}
/* V5.1: chip cliccabili come button */
button.colli-chip { cursor: pointer; transition: background .12s, border-color .12s, transform .08s; }
button.colli-chip:hover  { opacity: 1; filter: brightness(1.2); transform: translateY(-1px); }
button.colli-chip:active { transform: translateY(0); }
.colli-chip small { font-size: 8px; font-weight: 400; opacity: .75; }
.chip-ok   { background: rgba(74,222,128,.10);  border-color: rgba(74,222,128,.25);  color: #4ade80; }
.chip-warn { background: rgba(251,191,36,.10);  border-color: rgba(251,191,36,.30);  color: #fbbf24; }
.chip-no   { background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.18); color: #f87171; opacity: .8; }
/* Stato selezionato */
.fleet-chip-selected,
button.colli-chip.fleet-chip-selected {
    outline: 2px solid currentColor; outline-offset: 2px;
    opacity: 1 !important; filter: brightness(1.3);
    box-shadow: 0 0 6px -1px currentColor;
}

/* ── Multi-veicolo: griglia viewer 3D ───────────────────── */
.mv-section { margin-top: 10px; border: 1px solid rgba(214,168,63,.2); border-radius: 5px;
              background: rgba(214,168,63,.02); overflow: hidden; }
.mv-header  { padding: 6px 12px; font-size: 11px; font-weight: 700; color: var(--internal-text);
              border-bottom: 1px solid rgba(214,168,63,.15); }
.mv-unassigned { padding: 4px 12px; font-size: 9px; color: #fbbf24; font-style: italic; }

/* Piano del bilico standard (01/10/2026): il piano della quotazione automatica, accanto alla verifica sulla
   flotta. Stesso linguaggio della distribuzione multi-mezzo; compare solo quando ci sono colli con misure. */
.pst-wrap   { margin-top: 10px; border: 1px solid rgba(99,179,237,.25); border-radius: 5px;
              background: rgba(99,179,237,.03); overflow: hidden; }
.pst-head   { padding: 6px 12px; font-size: 11px; color: var(--internal-text);
              border-bottom: 1px solid rgba(99,179,237,.15); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pst-badge  { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
.pst-ok     { color: #4ade80; background: rgba(74,222,128,.10); border: 1px solid rgba(74,222,128,.30); }
.pst-diverso { color: #fbbf24; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.35); }
.pst-nota   { padding: 6px 12px; font-size: 10px; line-height: 1.45; color: var(--internal-muted); }
.pst-avviso { padding: 2px 12px 4px; font-size: 10px; color: #fbbf24; }
.pst-schede { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px; }
.pst-scheda { padding: 3px 10px; font-size: 10px; font-weight: 700; border-radius: 4px; cursor: pointer;
              border: 1px solid rgba(99,179,237,.30); background: transparent; color: #63b3ed; font-family: inherit; }
.pst-scheda.attiva { background: rgba(99,179,237,.18); color: var(--internal-text); }
.pst-scheda:focus-visible { outline: 2px solid #63b3ed; outline-offset: 1px; }
.pst-3d     { min-height: 240px; }
.pst-elenco { overflow-x: auto; padding: 6px 12px 0; }
.pst-elenco table { width: 100%; border-collapse: collapse; font-size: 10px; font-variant-numeric: tabular-nums; }
.pst-elenco th { text-align: left; color: var(--internal-muted); font-weight: 600; padding: 3px 6px;
                 border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.pst-elenco td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.04); white-space: nowrap; }
.pst-totale { padding: 6px 12px 8px; font-size: 10px; font-weight: 700; color: var(--internal-text); }
@media (pointer: coarse) {
    .pst-scheda { min-height: 40px; min-width: 40px; }
}
.mv-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
              gap: 1px; background: var(--internal-border); }
.mv-card    { background: var(--internal-bg3); padding: 10px 12px; }
.mv-card-header { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.mv-num     { font-size: 9px; font-weight: 800; padding: 1px 6px; background: rgba(214,168,63,.15);
              color: var(--internal-gold); border-radius: 3px; }
.mv-targa   { font-size: 12px; font-weight: 800; color: var(--internal-text); }
.mv-tipo    { font-size: 10px; color: var(--internal-muted); }
.mv-stats   { font-size: 10px; color: var(--internal-muted); margin-left: auto; }
.mv-ok      { color: #4ade80; font-weight: 700; }
.mv-warn    { color: #fbbf24; font-weight: 700; }
.mv-items   { font-size: 9px; color: var(--internal-muted); margin-bottom: 6px; font-style: italic; }
.mv-warn-text { font-size: 9px; color: #fbbf24; margin-bottom: 4px; }
.mv-canvas  { border-radius: 3px; }
.mv-status  { font-size: 8px; color: var(--internal-muted); text-align: right;
              padding: 2px 4px; font-style: italic; }

/* ── V5.1: pannello dettaglio veicolo selezionato ────────── */
.pv1-selected-detail { margin-top: 10px; }
.pv1-sel-header {
    font-size: 11px; font-weight: 700; color: var(--internal-text);
    padding: 5px 10px; background: rgba(99,179,237,.08);
    border: 1px solid rgba(99,179,237,.18); border-radius: 4px;
    margin-bottom: 6px;
}
.pv1-sel-tipo      { color: var(--internal-muted); font-weight: 400; }
.pv1-sel-unverified{ color: #fbbf24; font-size: 10px; }
.pv1-sel-empty {
    font-size: 9px; color: var(--internal-muted); font-style: italic;
    padding: 8px 10px; text-align: center;
}

/* ── V5.1: pannello quote e volumi ──────────────────────── */
.packing-quotes-panel {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
    border-radius: 4px; padding: 6px 10px; margin-bottom: 6px; font-size: 10px;
}
.pq-row { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.pq-row:last-child { border-bottom: none; }
.pq-lbl { color: var(--internal-muted); min-width: 130px; flex-shrink: 0; }
.pq-val { color: var(--internal-text); }
.pq-pct-hi  { color: #4ade80; font-weight: 700; }
.pq-pct-mid { color: #fbbf24; }
.pq-pct-lo  { color: var(--internal-muted); }
.pq-seg-title { font-size: 10px; font-weight: 700; color: #63b3ed; margin-bottom: 4px; }
.pq-zone { border: 1px solid rgba(99,179,237,.15); border-radius: 3px; padding: 4px 7px; margin-bottom: 3px; }
.pq-zone-header { font-size: 10px; color: var(--internal-text); }
.pq-zone-items  { font-size: 9px; color: var(--internal-muted); margin-top: 2px; }
.pq-nom     { color: var(--internal-muted); font-size: 9px; }
.pq-tech-w  { color: #fbbf24; font-size: 8px; margin-left: 3px; }
.pq-warn    { font-size: 9px; color: #fbbf24; margin-top: 4px; padding: 3px 6px;
               background: rgba(251,191,36,.07); border-radius: 3px; }

/* ── Sezione "Dati richiesta" nel report ───────────────────── */
.report-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    margin-top: 4px;
}
.report-input-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-width: 0;
}
.report-input-label {
    font-size: 10px;
    color: var(--internal-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.report-input-value {
    font-size: 12px;
    color: var(--internal-text);
    word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════════
   STAMPA — Preventivatore interno Schiavetta Trasporti
   Layout A4 ottimizzato: nessuno spazio sprecato, dati compatti
   ══════════════════════════════════════════════════════════════════ */
@media print {

    /* ── Pagina A4 con margini uniformi ──────────────────────── */
    @page {
        size: A4 portrait;
        margin: 11mm 14mm 11mm 14mm;
    }

    /* ── Reset colori su bianco ──────────────────────────────── */
    *, *::before, *::after {
        background: #fff !important;
        color: #111 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body { font-size: 8pt; line-height: 1.3; font-family: 'Inter', Arial, sans-serif; margin: 0; }

    /* ── Nascondi: UI, form, packing, viewer, label decorativi ─ */
    .internal-topbar, nav,
    .internal-form-panel, .form-panel-header,
    .internal-actions, .internal-tabs,
    .internal-history, .internal-guide,
    .internal-preview-card,
    /* label pseudo-elementi INPUT / OUTPUT (visivi, non stampabili) */
    .internal-form-panel::before, .internal-results::before,
    /* packing previews e viewer 3D */
    .colli-match-panel, #selectedVehiclePackingPanel,
    .pv1-debug-wrap, .pv1-panel, .pv2-preview-wrap,
    .pv4-wrap, .pv5-wrap, .pv3-multi-section, .mv-section,
    /* controlli mappa */
    .internal-route-map, .internal-map-meta, .mapboxgl-control-container,
    .internal-map-placeholder, .internal-map-engine,
    /* bottoni e hint */
    .breakdown-details-btn, .section-toggle::before,
    #priceOriginLabel, .sidebar-save-actions, .ws-overlay,
    .btn-pv5-reset, .pv5-controls, .pv5-hint,
    /* sezioni non utili in stampa */
    .internal-report > p.internal-muted,
    .internal-report > h3:last-of-type {
        display: none !important;
    }

    /* ── Shell e pannelli: nessun bordo, nessun padding ─────── */
    .internal-shell { display: block !important; padding: 0 !important; }
    .internal-panel, .internal-results {
        border: 0 !important; box-shadow: none !important;
        padding: 0 !important; overflow: visible !important;
        position: static !important; /* rimuove sticky/absolute */
    }
    /* Rimuove il bordo pseudo-element dall'interno-results */
    .internal-results { outline: none !important; }

    /* Messaggio se nessun preventivo calcolato */
    .internal-result-content:empty::after,
    .internal-result-content > .internal-guide::after {
        content: 'Nessun preventivo calcolato — calcola prima di stampare.';
        display: block;
        padding: 20px;
        font-size: 10pt;
        color: #888;
        text-align: center;
    }

    /* ══════════════════════════════════════════════════════════
       LAYOUT STAMPA: Prezzi orizzontali → Mappa strip → Report
       ══════════════════════════════════════════════════════════ */

    /* Flatten: no sidebar/main split — tutto in colonna unica */
    .results-layout {
        display: block !important;
        width: 100% !important;
    }
    .results-main {
        display: block !important;
        width: 100% !important;
    }

    /* ── Prezzi: barra orizzontale a 3 colonne ─────────────── */
    .result-price-sidebar {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 6px !important;
        align-items: start !important;
        position: static !important;  /* sovrascrive sticky */
    }
    /* Badge sidebar (confidence, margine) sotto la griglia prezzi */
    .sidebar-badges-section {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 10px !important;
        border-top: 0.5pt solid #ccc !important;
        padding-top: 3px !important;
        margin-top: 0 !important;
    }
    .result-price-sidebar .internal-price {
        border: 0.75pt solid #bbb !important;
        border-radius: 3pt !important;
        padding: 5px 8px !important;
        min-height: 0 !important;
        text-align: center !important;
        page-break-inside: avoid !important;
    }
    .result-price-sidebar .internal-price.featured {
        border: 1.5pt solid #111 !important;
    }
    .result-price-sidebar .internal-price span { font-size: 6.5pt !important; color: #666 !important; }
    .result-price-sidebar .internal-price strong { font-size: 14pt !important; display: block; margin: 1px 0; }
    .result-price-sidebar .internal-price.featured strong { font-size: 16pt !important; }
    .result-price-sidebar .price-km { font-size: 6pt !important; color: #888 !important; }
    .sidebar-badge-row { font-size: 6.5pt !important; }
    .sidebar-badge-row .sb-label { color: #777 !important; }
    .sidebar-badge-row .sb-value { color: #111 !important; font-weight: 700; }
    .sidebar-badges-section .internal-badge {
        font-size: 6.5pt !important; padding: 1px 5px !important;
        color: #111 !important; border: 0.5pt solid #999 !important;
    }

    /* ── Mappa: strip orizzontale compatta ───────────────────── */
    .internal-map-card {
        width: 100% !important;
        height: 70px !important;
        max-height: 70px !important;
        aspect-ratio: unset !important;
        overflow: hidden !important;
        border: 0.5pt solid #ccc !important;
        border-radius: 3pt !important;
        margin: 0 0 5px !important;
    }
    .map-print-snapshot {
        display: block !important;
        width: 100% !important;
        height: 70px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* ── Intestazione report ─────────────────────────────────── */
    .internal-kicker { font-size: 7pt !important; color: #666 !important; display: block; margin-bottom: 1px; }
    .internal-report-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        border-bottom: 1.5pt solid #111 !important;
        padding-bottom: 4px !important;
        margin-bottom: 5px !important;
    }
    .internal-report h2 { font-size: 13pt !important; margin: 1px 0 !important; }
    .internal-report-head p { font-size: 8pt !important; margin: 1px 0 !important; color: #444 !important; }

    /* ── Titoli di sezione compatti ──────────────────────────── */
    .internal-report h3,
    .internal-report h3.section-toggle,
    .internal-report h3.section-toggle.collapsed {
        font-size: 7.5pt !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #555 !important;
        margin: 5px 0 2px !important;
        padding: 2px 0 2px !important;
        border-bottom: 0.5pt solid #ccc !important;
        page-break-after: avoid !important;
    }
    /* "Report e sintesi" è già nascosto sopra, ma per sicurezza: */
    .internal-report > h3:last-of-type { display: none !important; }

    /* ── Forza apertura sezioni collassate ───────────────────── */
    .section-content, .section-content.collapsed,
    .section-toggle.collapsed + .section-content,
    .section-toggle + .section-content.collapsed { display: block !important; }
    .breakdown-details, .breakdown-details.collapsed { display: table-row !important; }
    .internal-table-wrap tr  { display: table-row   !important; }
    .internal-table-wrap td,
    .internal-table-wrap th  { display: table-cell  !important; }

    /* ── Dati richiesta: 3 colonne ───────────────────────────── */
    .report-input-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 8px !important;
        margin: 0 !important;
    }
    .report-input-row {
        border-bottom: 0.5pt solid #e8e8e8 !important;
        padding: 2px 0 !important;
        break-inside: avoid !important;
    }
    .report-input-label { font-size: 6pt !important; color: #777 !important; display: block; }
    .report-input-value { font-size: 7.5pt !important; color: #111 !important; font-weight: 600; display: block; }

    /* ── Riepilogo operativo: 5 colonne ──────────────────────── */
    .internal-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3px !important;
        margin: 0 !important;
    }
    .internal-summary-grid > div {
        border: 0.5pt solid #ccc !important;
        padding: 3px 5px !important;
        break-inside: avoid !important;
    }
    .internal-summary-grid span  { font-size: 6pt  !important; color: #666 !important; display: block; }
    .internal-summary-grid strong{ font-size: 7.5pt !important; display: block; margin-top: 1px; }

    /* ── Tabella scomposizione analitica ─────────────────────── */
    .internal-table-wrap {
        border: 0.75pt solid #ccc !important;
        border-radius: 0 !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }
    .internal-table-wrap table { width: 100% !important; font-size: 7pt !important; border-collapse: collapse !important; }
    .internal-table-wrap th {
        background: #f2f2f2 !important; color: #111 !important;
        border: 0.5pt solid #ccc !important;
        padding: 2.5px 5px !important; font-size: 6.5pt !important; font-weight: 700 !important;
    }
    .internal-table-wrap td {
        color: #111 !important; border: 0.5pt solid #e0e0e0 !important;
        padding: 2px 5px !important;
    }
    .internal-table-wrap td.subtotale-col,
    .internal-table-wrap th.subtotale-col {
        background: #fdf6e3 !important; color: #7a5a00 !important;
        border-left: 1.5pt solid #c8a830 !important; font-weight: 700 !important;
    }
    .internal-table-wrap .breakdown-category td {
        background: #ebebeb !important; color: #111 !important;
        font-size: 7pt !important; font-weight: 700 !important;
    }

    /* ── Alert (deroga, warning) ─────────────────────────────── */
    .internal-alert {
        border: 0.5pt solid #999 !important; color: #111 !important;
        padding: 4px 7px !important; margin: 3px 0 !important;
        font-size: 7.5pt !important; break-inside: avoid !important;
    }

    /* ── Lista warning ───────────────────────────────────────── */
    .internal-warning-list {
        color: #333 !important; font-size: 7pt !important;
        margin: 2px 0 !important; padding-left: 14px !important;
    }

    /* ── Confidence / badge ──────────────────────────────────── */
    .internal-badge {
        border: 0.5pt solid #999 !important; color: #111 !important;
        font-size: 7pt !important; padding: 2px 5px !important;
    }
    .internal-risk-row {
        margin: 2px 0 5px !important; flex-wrap: wrap !important; gap: 4px !important;
    }
    .internal-risk-row span:not(.internal-badge) {
        border: 0.5pt solid #ccc !important; color: #555 !important;
        background: #f6f6f6 !important; font-size: 7pt !important; padding: 2px 6px !important;
    }

    /* ── Interruzioni di pagina ──────────────────────────────── */
    .internal-table-wrap   { page-break-inside: auto !important; }
    .internal-summary-grid { page-break-inside: avoid !important; }
    .internal-alert        { page-break-inside: avoid !important; }
    h3.section-toggle      { page-break-after: avoid !important; }
    .internal-report-head  { page-break-after: avoid !important; }
}

/* ── Scrollbar sottili e coerenti con il tema scuro ─────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,.13); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(214,168,63,.38); }
::-webkit-scrollbar-corner       { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   FASE 1 — Fondamenta mobile condivise (area interna)
   Solo aggiunte dentro questo @media: sopra i 768px il blocco non produce
   alcun effetto, il desktop resta invariato byte per byte.
   Ambito volutamente limitato a componenti generici/riusati (topbar già
   gestita altrove, pulsanti azione, sidebar prezzi, pannello subvettori
   suggeriti). Le griglie operative con motore JS proprio (tabelle "table.gr"
   nelle pagine di griglia trasporti, definite inline pagina per pagina) sono
   volutamente ESCLUSE: vanno riviste in Fase 2 pagina per pagina, toccarle
   qui rischierebbe di rompere ordinamento/ridimensionamento colonne/colonne
   bloccate che dipendono dal layout a tabella nativo.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Pulsanti generici (tab, azioni, login, Calcola): area di tocco più
       generosa. Non tocca .internal-tabs/.internal-actions in sé: solo
       l'altezza minima dei pulsanti al loro interno. */
    .internal-tabs button,
    .internal-actions button,
    .internal-login-form button,
    .btn-calcola-top {
        min-height: 40px;
    }

    /* Risultati preventivo interno: sidebar prezzi (192px fissi) + contenuto
       principale, oggi in riga. Su schermi stretti la riga schiaccerebbe il
       contenuto principale in ~150px: passa a colonna piena larghezza. */
    .results-layout {
        flex-direction: column;
    }
    .result-price-sidebar {
        width: 100%;
        position: static;
    }

    /* Scroll orizzontale della tabella di scomposizione analitica sempre
       fluido anche su iOS (l'overflow-x:auto esiste già fuori da questo
       blocco: qui solo l'inerzia del touch, nessuna larghezza forzata). */
    .internal-table-wrap {
        -webkit-overflow-scrolling: touch;
    }

    /* Pannello "Subvettori suggeriti" (overlay a destra, 360px fissi): sui
       dispositivi più stretti di 360px non deve mai superare la larghezza
       dello schermo. Sopra i 360px il comportamento resta invariato. */
    .svs-panel {
        width: min(360px, 100vw);
    }

    /* Corpo scrollabile dei pannelli input/output: meno spazio sprecato */
    .internal-panel-scroll {
        padding: 12px;
    }

    /* ══ FASE 3 (25/08) — IL VERO NEMICO SU iPHONE: LO ZOOM AUTOMATICO ══════
       Safari su iPhone ingrandisce il viewport ogni volta che riceve il focus un
       campo con testo calcolato sotto i 16px. E non torna indietro da solo: resti
       con la pagina zoomata, fuori squadro, e devi ripizzicarla a mano. Qui erano
       TUTTI sotto soglia — 13px nel modulo, 12px sull'indirizzo, 11px sulla
       tendina del tipo fermata, 10px nella barra AI. Quindi succedeva a ogni
       singolo tocco su un campo, per tutta la compilazione.
       I !important servono solo perche' le regole originali di .stop- e .collo-
       sono a loro volta !important: non e' forza bruta, e' pareggiare.
       Scritte senza asterisco DI PROPOSITO: un asterisco seguito da barra, dentro un
       commento, lo CHIUDE proprio li' — e tutto cio' che segue diventa CSS malformato,
       quindi la regola anti-zoom qui sotto verrebbe scartata in silenzio. E' la stessa
       trappola gia' pagata nei commenti PHP con i nomi di permesso abbreviati. */
    .internal-form input:not([type=checkbox]):not([type=radio]),
    .internal-form textarea,
    .internal-form select,
    .internal-login-form input,
    .stop-addr-input,
    .stop-tipo-sel,
    .collo-input,
    .collo-qty,
    .haz-textarea,
    .haz-maps-url { font-size: 16px !important; }
    .internal-form input:not([type=checkbox]):not([type=radio]),
    .internal-form select { height: 32px; }
    .stop-addr-input { height: 28px !important; }
    .internal-login-form input { padding: 12px 11px; }

    /* ── La riga «fermata»: l'indirizzo su una riga tutta sua ───────────────
       .stop-row e' una fila di elementi a larghezza fissa (maniglia, numero,
       tendina tipo 115px, ingranaggio, cestino) piu' UN solo elastico:
       l'indirizzo. Che quindi si mangia tutta la compressione. Conto su 375px:
       225px se ne vanno in elementi fissi e spazi, all'indirizzo ne restano 80;
       su 320px ne restano 37 — cioe' quattro caratteri. Mandandolo a capo a
       piena larghezza torna a ~305px. Il markup non cambia di una virgola:
       renderStopRow continua a produrre gli stessi nodi e gli stessi data-*. */
    .stop-row      { flex-wrap: wrap; row-gap: 4px; }
    .stop-addr-wrap{ flex: 1 0 100% !important; order: 9; }
    .stop-tipo-sel { width: auto !important; flex: 1 1 auto !important; }

    /* ── Barra «Import AI»: il campo per incollare non veniva tagliato, spariva
       .haz-container ha overflow:hidden. Il blocco mobile di preventivi.php lo
       impila in colonna ma quell'overflow resta, e dentro la fila ci sono tre
       elementi incomprimibili (suggerimento, elenco formati, area di testo con
       min-width:160px) che sommano ~449px in 325 disponibili. Sotto i 360px
       l'area di testo comincia oltre il bordo: non e' raggiungibile in alcun
       modo. L'elenco dei formati e' l'unico davvero superfluo — l'attributo
       accept del campo file dice gia' al telefono cosa accettare. */
    .haz-container    { overflow: visible; }
    .haz-dropzone     { flex-wrap: wrap; row-gap: 6px; }
    .haz-drop-formats { display: none; }
    .haz-textarea     { flex: 1 0 100%; min-width: 0; height: 34px; }
}
*                                { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.13) transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   FASE 2 — LO SCORRIMENTO NATURALE sotto i 1100px
   ═══════════════════════════════════════════════════════════════════════════
   IL DIFETTO CHE RIPARA. Le tre pagine con body.internal-app (preventivatore,
   flotta, report trasporti) usano un modello «da applicazione»: la finestra e'
   alta esattamente 100vh, non scorre (overflow:hidden), e sono i due pannelli
   dentro .internal-shell a scorrere per conto proprio. Funziona benissimo
   finche' i pannelli stanno AFFIANCATI. Sotto i 1100px la griglia passa a una
   colonna sola: i due pannelli diventano due RIGHE che devono spartirsi
   un'altezza fissa. Misurato su uno schermo 375x812: 363 pixel a testa, con la
   griglia che gia' sborda di 8px oltre il fondo — e quegli 8px, con
   overflow:hidden, non si raggiungono in alcun modo.
   Su un telefono vero e' peggio ancora, perche' 100vh e' l'altezza a barra del
   browser NASCOSTA: alla prima apertura il fondo della pagina sta sotto la
   barra degli indirizzi, e non c'e' scorrimento che possa portarlo in vista.

   COSA FA. Sotto i 1100px smette di fingere di essere un'applicazione e torna
   a essere una pagina: scorre il documento, i pannelli sono alti quanto il loro
   contenuto, e non si scorre piu' dentro un riquadro dentro un altro riquadro
   (due scorrimenti annidati al tocco sono la cosa piu' odiosa che ci sia:
   il dito non sa mai quale dei due sta muovendo).

   PERCHE' IL DESKTOP NON CAMBIA. Tutto vive dentro @media (max-width:1100px):
   sopra quella soglia nessuna di queste righe viene applicata. 1100px non e'
   un numero scelto a caso, e' esattamente la soglia a cui .internal-shell
   passa a colonna singola (v. la @media piu' sopra in questo file): il modello
   ad altezza fissa e quello a due colonne nascono e muoiono insieme.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* La finestra non e' piu' un contenitore chiuso: e' una pagina che scorre.
       100dvh (altezza dinamica) al posto di 100vh, cosi' il fondo non finisce
       mai sotto la barra del browser. Il 100vh sopra resta come ripiego per i
       browser che non conoscono dvh. */
    .internal-app {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    /* La griglia non deve piu' spartirsi un'altezza: le righe si dimensionano
       sul contenuto e la pagina cresce sotto di loro. */
    .internal-shell {
        flex: none;
        grid-auto-rows: auto;
        align-items: start;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    /* I pannelli erano alti quanto la riga di griglia; ora quanto il contenuto. */
    .internal-form-panel,
    .internal-results {
        min-height: 0;
        height: auto;
    }

    /* Lo scorrimento interno passa al documento. overflow-x resta clip: serviva
       a contenere le tabelle larghe, e quella funzione non cambia. */
    .internal-panel-scroll {
        overflow-y: visible;
        overflow-x: clip;
        flex: none;
    }

    /* Testata del pannello INPUT (linguette Preventivo/Storico + tasto Calcola).
       Prima era «fissa» perche' stava fuori dal corpo scrollabile; ora che scorre
       la pagina intera se ne andrebbe via, e Calcola e' il pulsante che serve
       piu' spesso. Resta appiccicata sotto la barra di navigazione — che e' a
       sua volta appiccicata in alto (position:sticky in app_layout.php).
       Il vincolo di sticky e' il pannello stesso: passando ai risultati la
       testata sparisce da sola, com'e' giusto.

       L'altezza della barra NON e' piu' fissa (era 56px quando questa regola
       fu scritta): dal 04/09 usa min-height e va su due righe quando le voci
       non ci stanno. Sotto i 1024px l'hamburger la riporta a una riga sola,
       ma questa @media arriva a 1100 e fra 1025 e 1100 la barra e' alta 68:
       la testata ci finiva dietro. Si legge la misura vera pubblicata dalla
       barra, col ripiego che vale quanto il numero di prima. */
    .form-panel-header {
        position: sticky;
        top: var(--app-nav-h, 56px);
        z-index: 6;
    }

    /* Chi salta a un'ancora (le linguette usano scrollIntoView) deve atterrare
       SOTTO barra di navigazione + testata, non dietro. */
    #quoteForm, #historyPanel, #requestsPanel,
    #historyTools, #requestsTools {
        scroll-margin-top: 124px;
    }

    /* La colonna prezzi era appiccicata a 20px dal bordo: con la barra di
       navigazione appiccicata in alto finirebbe dietro di lei. (Sotto i 768px
       una regola gia' esistente la rende statica a tutta larghezza: li' questa
       non ha effetto.) */
    .result-price-sidebar {
        top: 68px;
    }

    /* Etichette «INPUT»/«OUTPUT»: sono pseudo-elementi a z-index 2 che sbordano
       sopra il bordo del pannello. La testata resa appiccicata qui sopra ha
       z-index 6 e fondo pieno, e ne mangiava la meta' bassa. Difetto introdotto
       dalla riparazione stessa, trovato in revisione: si alza l'etichetta sopra
       la testata. Ha gia' pointer-events:none, quindi non ruba il tocco ai
       pulsanti sotto. */
    .internal-form-panel::before,
    .internal-results::before { z-index: 7; }

    /* ── Sovraimpressioni misurate in vh ────────────────────────────────────
       Un riquadro alto 88vh dentro un contenitore fisso senza scorrimento e'
       piu' alto dell'area realmente visibile (vh = schermo con le barre del
       browser RITRATTE) e viene tagliato sopra e sotto in parti uguali: sparisce
       il titolo E il pulsante di conferma, e non c'e' nulla da scorrere per
       riportarli dentro. In orizzontale su un telefono e' sistematico. Il
       rimedio e' sempre lo stesso: ancorare in alto invece che al centro, e dare
       al fondale uno scorrimento proprio. */
    .haz-paste-overlay { padding-top: 16px; overflow-y: auto; }
    .haz-paste-card    { max-height: calc(100dvh - 32px); }
    .haz-paste-card textarea { min-height: 110px; max-height: 38dvh; }
    .svs-modal-backdrop{ align-items: flex-start; overflow-y: auto; padding: 12px; }
    .svs-modal         { max-height: calc(100dvh - 24px); }
}

/* ══ IL PAVIMENTO DEI 16 PIXEL (25/08) ═══════════════════════════════════════
   Safari su iPhone ingrandisce il viewport al fuoco di QUALUNQUE campo con testo
   sotto i 16px, e non torna indietro da solo: si resta con la pagina fuori squadro,
   a ogni singolo tocco, per tutta la compilazione.

   PERCHE' UNA REGOLA SOLA e non trenta regole per pagina. Il portale ha un <style>
   per pagina, e una verifica a occhio ne salta sempre qualcuno: un censimento con 82
   agenti aveva concluso «il sito pubblico e' a posto perche' style.css usa
   font:inherit» — vero per style.css, falso per il preventivatore pubblico, che ha
   il proprio <style> con sei campi a 15,2px. Contati poi con uno strumento: 30 file
   sotto soglia senza alcun rimedio. Un pavimento unico non si puo' dimenticare.

   ⚠️ LA GUARDIA E' «pointer: coarse», NON LA LARGHEZZA, e questa e' la parte che
   conta. Un telefono girato di lato e' largo 829-844px: SOPRA ogni soglia mobile del
   progetto. Con una @media di larghezza tutto il lavoro mobile si spegne proprio li'
   — misurato in produzione, sul login subvettori in orizzontale i campi tornavano a
   15,2px e «Accedi» finiva sotto la piega. «coarse» vuol dire «si comanda col dito»
   e vale in qualunque orientamento; un monitor col mouse non la soddisfa mai, per
   quanto si stringa la finestra.

   IL !important SERVE: un selettore nudo perde contro qualunque regola di pagina, e
   sono proprio quelle il problema. Le specificita' sono scelte per battere le regole
   di pagina tipiche (una classe) senza salire piu' del necessario.

   ESCLUSIONI. Caselle e pulsanti di scelta, dove la misura non e' testuale. E le
   celle delle griglie operative (.gc), che hanno gia' la loro regola a DOPPIA
   guardia: li' il motore calcola le larghezze di colonna leggendo il font vero, e
   allargarle su un tablet largo non serve a nessuno. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not(.gc),
  select:not([multiple]):not(.gc),
  textarea:not(.gc) { font-size: 16px !important; }
  /* Il campo del carico massimo impilabile vive in una pastiglia da 32px con
     l'etichetta a 9px. Due cifre a 16px ne occupano ~18, quindi ci stanno: gli si da'
     solo il respiro perche' non sembri un errore. */
  .stack-input-lbl input { width: 44px; }
}

/* ══ TEMA CHIARO: leggibilità del preventivatore interno e dei componenti condivisi (09/10/2026) ══
   Tutto ciò che sta sopra è scritto per il fondo SCURO: testi chiari, fondi quasi neri, bordi in
   bianco trasparente e colori di stato accesi (verde, ambra, rosso, azzurro) che sul bianco del tema
   chiaro sparivano o finivano scuro su scuro. Qui, solo sotto html[data-theme="chiaro"], i colori di
   stato tornano nelle loro varianti scure e i fondi cablati prendono i token. Il tema scuro (nessun
   attributo) e le scale blu e verde non vedono nessuna di queste righe: per loro non cambia un pixel.
   Le misure, l'impaginazione e le regole mobile restano quelle di sopra. */
html[data-theme="chiaro"] {
    --internal-red: #b91c1c; --internal-yellow: #a16207; --internal-green: #166534; --internal-blue: #1d4ed8;
}
/* Ogni selettore qui sotto comincia con :where(html[data-theme="chiaro"]), che NON aggiunge
   specificità: l'override pareggia la regola originale e vince solo perché viene dopo. Così gli
   stati scritti sopra (passaggio del mouse, fuoco, scheda attiva, card in evidenza) continuano a
   vincere come nel tema scuro, invece di essere schiacciati da un selettore più pesante. */

/* Colori di stato usati come TESTO: varianti scure */
:where(html[data-theme="chiaro"]) .nav-role-badge.role-operatore,
:where(html[data-theme="chiaro"]) .btn-import-text,
:where(html[data-theme="chiaro"]) .svs-score-good,
:where(html[data-theme="chiaro"]) .svs-reg-yes,
:where(html[data-theme="chiaro"]) .svs-btn-send,
:where(html[data-theme="chiaro"]) .svs-modal-title,
:where(html[data-theme="chiaro"]) .svs-modal-btn-green,
:where(html[data-theme="chiaro"]) .subv-verified,
:where(html[data-theme="chiaro"]) .pv1-ok .pv1-icon,
:where(html[data-theme="chiaro"]) .pv1-ok .pv1-verdict,
:where(html[data-theme="chiaro"]) .pv2-ok .pv2-icon,
:where(html[data-theme="chiaro"]) .pv2-conf-alta,
:where(html[data-theme="chiaro"]) .pv4-status,
:where(html[data-theme="chiaro"]) .pv3-pos-anteriore,
:where(html[data-theme="chiaro"]) .pv3-conf-alta,
:where(html[data-theme="chiaro"]) .pv3-p2ok,
:where(html[data-theme="chiaro"]) .conf-alta,
:where(html[data-theme="chiaro"]) .speed-ok,
:where(html[data-theme="chiaro"]) .svs-tariffa-fb-good,
:where(html[data-theme="chiaro"]) .match-ok .match-icon,
:where(html[data-theme="chiaro"]) .match-ok-color,
:where(html[data-theme="chiaro"]) .chip-ok,
:where(html[data-theme="chiaro"]) .pst-ok,
:where(html[data-theme="chiaro"]) .mv-ok,
:where(html[data-theme="chiaro"]) .pq-pct-hi,
:where(html[data-theme="chiaro"]) .internal-alert-ok,
:where(html[data-theme="chiaro"]) .rme-item.active.rme-ok .rme-name { color: #166534; }

:where(html[data-theme="chiaro"]) .svs-score-mid,
:where(html[data-theme="chiaro"]) .svs-reg-no,
:where(html[data-theme="chiaro"]) .svs-tariffa,
:where(html[data-theme="chiaro"]) .test-data-badge,
:where(html[data-theme="chiaro"]) .subv-note,
:where(html[data-theme="chiaro"]) .pv1-warn .pv1-icon,
:where(html[data-theme="chiaro"]) .pv1-warn .pv1-verdict,
:where(html[data-theme="chiaro"]) .pv1-reason-warn,
:where(html[data-theme="chiaro"]) .pv2-warn,
:where(html[data-theme="chiaro"]) .pv2-conf-media,
:where(html[data-theme="chiaro"]) .pv4-limited,
:where(html[data-theme="chiaro"]) .pv5-limited,
:where(html[data-theme="chiaro"]) .stack-warn-hint,
:where(html[data-theme="chiaro"]) .pv3a-title,
:where(html[data-theme="chiaro"]) .pv3a-stacks-label,
:where(html[data-theme="chiaro"]) .pv3a-above,
:where(html[data-theme="chiaro"]) .pv3-conf-media,
:where(html[data-theme="chiaro"]) .pv3-p2warn,
:where(html[data-theme="chiaro"]) .pv3-asgn-warn,
:where(html[data-theme="chiaro"]) .pv3-multi-warn,
:where(html[data-theme="chiaro"]) .pv2-unplaced-list,
:where(html[data-theme="chiaro"]) .conf-media,
:where(html[data-theme="chiaro"]) .rv-motivo,
:where(html[data-theme="chiaro"]) .speed-warn,
:where(html[data-theme="chiaro"]) .svs-tariffa-warn,
:where(html[data-theme="chiaro"]) .svs-tariffa-fb-warn,
:where(html[data-theme="chiaro"]) .chip-warn,
:where(html[data-theme="chiaro"]) .mv-unassigned,
:where(html[data-theme="chiaro"]) .pst-diverso,
:where(html[data-theme="chiaro"]) .pst-avviso,
:where(html[data-theme="chiaro"]) .mv-warn,
:where(html[data-theme="chiaro"]) .mv-warn-text,
:where(html[data-theme="chiaro"]) .pv1-sel-unverified,
:where(html[data-theme="chiaro"]) .pq-pct-mid,
:where(html[data-theme="chiaro"]) .pq-tech-w,
:where(html[data-theme="chiaro"]) .pq-warn,
:where(html[data-theme="chiaro"]) .rme-item.active.rme-warn .rme-name,
:where(html[data-theme="chiaro"]) .rme-note,
:where(html[data-theme="chiaro"]) .internal-corridor-hint .ich-text strong,
:where(html[data-theme="chiaro"]) .internal-corridor-hint .ich-count { color: #92400e; }

:where(html[data-theme="chiaro"]) .nav-role-badge.role-operatore_base,
:where(html[data-theme="chiaro"]) .haz-clear:hover,
:where(html[data-theme="chiaro"]) .svs-score-low,
:where(html[data-theme="chiaro"]) .colli-match-nok-sum,
:where(html[data-theme="chiaro"]) .pv1-fail .pv1-icon,
:where(html[data-theme="chiaro"]) .pv1-fail .pv1-verdict,
:where(html[data-theme="chiaro"]) .pv1-reason-fail,
:where(html[data-theme="chiaro"]) .pv2-fail .pv2-icon,
:where(html[data-theme="chiaro"]) .pv2-conf-bassa,
:where(html[data-theme="chiaro"]) .pv2-unplaced,
:where(html[data-theme="chiaro"]) .pv3-conf-bassa,
:where(html[data-theme="chiaro"]) .pv3-unassigned,
:where(html[data-theme="chiaro"]) .conf-bassa,
:where(html[data-theme="chiaro"]) .speed-bad,
:where(html[data-theme="chiaro"]) .btn-collo-clear,
:where(html[data-theme="chiaro"]) .collo-del-btn,
:where(html[data-theme="chiaro"]) .svs-tariffa-error,
:where(html[data-theme="chiaro"]) .match-no .match-icon,
:where(html[data-theme="chiaro"]) .match-reasons,
:where(html[data-theme="chiaro"]) .match-no-color,
:where(html[data-theme="chiaro"]) .chip-no,
:where(html[data-theme="chiaro"]) .internal-corridor-hint .ich-forget:hover { color: #b91c1c; }

:where(html[data-theme="chiaro"]) .nav-role-badge.role-logistica,
:where(html[data-theme="chiaro"]) .stop-tipo-badge.passaggio,
:where(html[data-theme="chiaro"]) .btn-guide,
:where(html[data-theme="chiaro"]) .haz-maps-btn,
:where(html[data-theme="chiaro"]) .ip-maps-btn,
:where(html[data-theme="chiaro"]) .pv5-status,
:where(html[data-theme="chiaro"]) .btn-pv5-reset,
:where(html[data-theme="chiaro"]) .pv3-pos-posteriore,
:where(html[data-theme="chiaro"]) .pst-scheda,
:where(html[data-theme="chiaro"]) .pq-seg-title { color: #1d4ed8; }
:where(html[data-theme="chiaro"]) .stop-num-pass,
:where(html[data-theme="chiaro"]) .stops-add-check { color: #1d4ed8 !important; }

:where(html[data-theme="chiaro"]) .svs-btn-copy,
:where(html[data-theme="chiaro"]) .svs-modal-btn-sky,
:where(html[data-theme="chiaro"]) .subv-email,
:where(html[data-theme="chiaro"]) .pv1-reason-data,
:where(html[data-theme="chiaro"]) .pv2-info .pv2-icon,
:where(html[data-theme="chiaro"]) .pv3-multi-title,
:where(html[data-theme="chiaro"]) .pv3-veh-badge,
:where(html[data-theme="chiaro"]) .pv3-asgn-num,
:where(html[data-theme="chiaro"]) .match-adr { color: #0369a1; }

:where(html[data-theme="chiaro"]) .nav-role-badge.role-subvettori,
:where(html[data-theme="chiaro"]) .btn-test-fill { color: #6d28d9; }
:where(html[data-theme="chiaro"]) .pv3-seg-title { color: #3f6212; }
:where(html[data-theme="chiaro"]) .nav-role-badge.role-admin,
:where(html[data-theme="chiaro"]) .pv3-pos-centrale,
:where(html[data-theme="chiaro"]) .mezzo-inline-label,
:where(html[data-theme="chiaro"]) .internal-price.featured .price-km { color: var(--c-accent); }
:where(html[data-theme="chiaro"]) .conf-manuale { color: var(--c-muted); }
:where(html[data-theme="chiaro"]) .internal-alert-danger  { color: #991b1b; }
:where(html[data-theme="chiaro"]) .internal-alert-warning { color: #854d0e; }

/* Barre di punteggio e lancetta: sul bianco i toni accesi erano troppo tenui, la lancetta bianca spariva */
:where(html[data-theme="chiaro"]) .fill-good { background: #16a34a; }
:where(html[data-theme="chiaro"]) .fill-mid  { background: #d97706; }
:where(html[data-theme="chiaro"]) .fill-low  { background: #dc2626; }
:where(html[data-theme="chiaro"]) .conf-needle { background: var(--c-text); box-shadow: 0 0 3px rgba(255,255,255,.8); }

/* Testi chiari letterali (bianco trasparente, grigi chiari) */
:where(html[data-theme="chiaro"]) .itb-logout,
:where(html[data-theme="chiaro"]) .nav-passthrough-group a { color: var(--c-muted) !important; }
:where(html[data-theme="chiaro"]) .itb-logout:hover,
:where(html[data-theme="chiaro"]) .nav-passthrough-group a:hover { color: var(--c-text) !important; }
:where(html[data-theme="chiaro"]) .nav-user-info,
:where(html[data-theme="chiaro"]) .time-range-inline .tr-label,
:where(html[data-theme="chiaro"]) .voce-note { color: var(--c-muted); }
:where(html[data-theme="chiaro"]) .svs-close:hover,
:where(html[data-theme="chiaro"]) .mezzo-targa-clear:hover,
:where(html[data-theme="chiaro"]) .mss-btn:hover,
:where(html[data-theme="chiaro"]) .rme-name { color: var(--c-text); }
:where(html[data-theme="chiaro"]) .stop-addr-input::placeholder,
:where(html[data-theme="chiaro"]) .ip-maps-url-inp::placeholder { color: var(--c-faint); }
:where(html[data-theme="chiaro"]) .sidebar-manual-input::placeholder { color: rgba(154,102,4,.55); }

/* Fondi scuri cablati: diventano superfici del tema */
:where(html[data-theme="chiaro"]) .stop-row.drag-over,
:where(html[data-theme="chiaro"]) .stop-cond-panel,
:where(html[data-theme="chiaro"]) .internal-manual,
:where(html[data-theme="chiaro"]) .internal-map-card,
:where(html[data-theme="chiaro"]) .internal-map-placeholder,
:where(html[data-theme="chiaro"]) .internal-map-fallback,
:where(html[data-theme="chiaro"]) .internal-preview-card,
:where(html[data-theme="chiaro"]) .internal-risk-row span:not(.internal-badge),
:where(html[data-theme="chiaro"]) .internal-table-wrap th,
:where(html[data-theme="chiaro"]) .internal-history-filters,
:where(html[data-theme="chiaro"]) .address-suggestion:hover,
:where(html[data-theme="chiaro"]) .address-suggestion:focus { background: var(--c-surface-2); }
:where(html[data-theme="chiaro"]) .address-suggestions,
:where(html[data-theme="chiaro"]) .mezzo-inline-select,
:where(html[data-theme="chiaro"]) .mezzo-inline-select option,
:where(html[data-theme="chiaro"]) .svs-tariffa-input,
:where(html[data-theme="chiaro"]) .haz-textarea,
:where(html[data-theme="chiaro"]) .haz-textarea:focus,
:where(html[data-theme="chiaro"]) .haz-maps-url,
:where(html[data-theme="chiaro"]) .ip-maps-url-inp,
:where(html[data-theme="chiaro"]) .haz-paste-card textarea { background: var(--c-surface); }
:where(html[data-theme="chiaro"]) .internal-table-wrap .breakdown-category td { background: var(--c-surface-3); }
:where(html[data-theme="chiaro"]) .internal-table-wrap .breakdown-category td:hover { background: #dde3ea; }
:where(html[data-theme="chiaro"]) .history-row:hover td { background: var(--c-row-hover); }
:where(html[data-theme="chiaro"]) .internal-preview-range,
:where(html[data-theme="chiaro"]) .internal-price.featured { background: #fdf6e3; }
:where(html[data-theme="chiaro"]) .internal-badge.preview { color: #7a5203; background: #fdf3dc; }
:where(html[data-theme="chiaro"]) .svs-modal-msg { background: var(--c-surface-2); border-color: var(--c-border); }

/* Etichette INPUT / OUTPUT sul bordo dei pannelli */
:where(html[data-theme="chiaro"]) .internal-form-panel::before { background: var(--c-surface); border-color: var(--c-border); color: var(--c-muted); }
:where(html[data-theme="chiaro"]) .internal-results::before { background: var(--c-surface); color: var(--c-accent); }

/* Pastiglie a fondo oro: inchiostro del tema (bianco) invece del nero cablato */
:where(html[data-theme="chiaro"]) .svs-handle-badge,
:where(html[data-theme="chiaro"]) .svs-tag-centinati { color: var(--c-accent-ink); }

/* Pannelli in vetro sopra la mappa: vetro chiaro, perché i testi seguono il tema */
:where(html[data-theme="chiaro"]) .svs-panel { background: rgba(255,255,255,.86); box-shadow: -8px 0 32px rgba(0,0,0,.16); }
:where(html[data-theme="chiaro"]) .mss-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%), rgba(255,255,255,.86);
    box-shadow: 0 6px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
:where(html[data-theme="chiaro"]) .internal-map-engine {
    background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%), rgba(255,255,255,.88);
    box-shadow: 0 6px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
:where(html[data-theme="chiaro"]) .rme-dot { background: rgba(0,0,0,.3); }

/* Suggerimento corridoio: era un riquadro quasi nero con testo che segue il tema */
:where(html[data-theme="chiaro"]) .internal-corridor-hint {
    background: linear-gradient(180deg, rgba(214,168,63,.12), rgba(214,168,63,0) 60%), var(--c-surface-2);
    box-shadow: none;
}
:where(html[data-theme="chiaro"]) .internal-corridor-hint .ich-add { color: #7a5203; }

/* Avvisi «percorso da auto» e «tratta con l'estero»: testo rosa e bianco sul bianco */
:where(html[data-theme="chiaro"]) .internal-route-degraded { background: #fef2f2; color: #7f1d1d; }
:where(html[data-theme="chiaro"]) .internal-route-degraded strong { color: inherit; }
:where(html[data-theme="chiaro"]) .internal-route-foreign { background: #fffbeb; color: #78350f; }

/* Bordi e velature in bianco trasparente: sul bianco non si vedevano */
:where(html[data-theme="chiaro"]) .itb-nav-links,
:where(html[data-theme="chiaro"]) .itb-user,
:where(html[data-theme="chiaro"]) .nav-passthrough-group,
:where(html[data-theme="chiaro"]) .svs-handle,
:where(html[data-theme="chiaro"]) .svs-header,
:where(html[data-theme="chiaro"]) .svs-filters,
:where(html[data-theme="chiaro"]) .svs-card,
:where(html[data-theme="chiaro"]) .svs-modal-btn-plain,
:where(html[data-theme="chiaro"]) .haz-maps-url,
:where(html[data-theme="chiaro"]) .haz-paste-card textarea,
:where(html[data-theme="chiaro"]) .haz-paste-cancel,
:where(html[data-theme="chiaro"]) .ip-maps-url-inp,
:where(html[data-theme="chiaro"]) .sb-save-btn.sb-draft,
:where(html[data-theme="chiaro"]) .sb-multi-pick,
:where(html[data-theme="chiaro"]) .pv2-rows,
:where(html[data-theme="chiaro"]) .pv2-unplaced,
:where(html[data-theme="chiaro"]) .pv3a-stack,
:where(html[data-theme="chiaro"]) .pv3a-note,
:where(html[data-theme="chiaro"]) .pv3-zone,
:where(html[data-theme="chiaro"]) .pv3-assignment,
:where(html[data-theme="chiaro"]) .pv3-disclaimer,
:where(html[data-theme="chiaro"]) .svs-tariffa-fb-neutral,
:where(html[data-theme="chiaro"]) .pst-elenco th,
:where(html[data-theme="chiaro"]) .packing-quotes-panel,
:where(html[data-theme="chiaro"]) .pq-row,
:where(html[data-theme="chiaro"]) .report-input-row,
:where(html[data-theme="chiaro"]) .subvettore-dropdown { border-color: var(--c-border); }
:where(html[data-theme="chiaro"]) .collo-row td,
:where(html[data-theme="chiaro"]) .pst-elenco td { border-bottom-color: var(--c-row-line); }
:where(html[data-theme="chiaro"]) .stop-addr-input { border-bottom-color: rgba(0,0,0,.14) !important; }
:where(html[data-theme="chiaro"]) .sb-save-btn.sb-draft:hover { border-color: var(--c-muted); }
:where(html[data-theme="chiaro"]) .price-card-pick.pick-min:hover,
:where(html[data-theme="chiaro"]) .price-card-pick.pick-min:focus-visible { border-color: rgba(0,0,0,.25); }
:where(html[data-theme="chiaro"]) .svs-card-prov,
:where(html[data-theme="chiaro"]) .svs-tag-other,
:where(html[data-theme="chiaro"]) .pv2-item { background: rgba(0,0,0,.05); }
:where(html[data-theme="chiaro"]) .svs-score-bar-bg { background: rgba(0,0,0,.1); }

/* Barre di scorrimento: il cursore bianco trasparente spariva sul fondo chiaro */
:where(html[data-theme="chiaro"])::-webkit-scrollbar-thumb,
:where(html[data-theme="chiaro"]) ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); }
:where(html[data-theme="chiaro"]),
:where(html[data-theme="chiaro"]) * { scrollbar-color: rgba(0,0,0,.25) transparent; }