/* =====================================================================
   TEMA CONDIVISO DELL'APP — unica definizione di testo, colori,
   pulsanti, link e badge di stato. Caricato su ogni pagina da
   includes/header.php (e da login.php), dopo Bootstrap e prima di
   assets/app.css (che contiene solo layout specifici delle pagine).

   Scala per risoluzione: tutto (testo, padding, altezze di pulsanti,
   righe, badge, menu, navbar, modali, form — anche Bootstrap, che è in
   rem) è espresso in rem e segue la base del documento, che cambia per
   fascia: 16px sul telefono (sotto 768px, come prima), 15px da 768 a
   1599px, 17px da 1600px (Full HD, riferimento principale). La dimensione testo scelta dall'utente in "Aspetto"
   moltiplica la base (--app-text-scale). I px restano solo per bordi.
   Oltre i 1600px il contenuto sta in un contenitore centrato che si
   ferma a 110rem (circa 1870px), così oltre i 2200px non cresce più.

   Regole:
   - una sola famiglia di caratteri (quella di sistema di Bootstrap);
   - tre stili di testo: titolo, valore, etichetta (+ grassetto solo
     per il nome del cliente nelle schede);
   - un solo colore d'accento (--app-accent, verde del brand se l'utente
     non ne sceglie un altro in "Aspetto e preferenze") per pulsante
     principale, link e voce attiva del menu; hover, pressione, focus e
     testo sopra l'accento ne derivano (UserPreferences::accentColors,
     buildUserThemeCss). Il colore della barra è a parte (--app-nav-bg).
     NON si personalizzano: colori degli stati, rosso di "Elimina" e dei
     problemi, PDF ed etichette;
   - colori vivaci solo nei badge di stato (.badge-st + .st-*), la cui
     scelta per ogni stato è fatta in un solo punto: src/StatusBadge.php.
   ===================================================================== */

:root {
    --app-text: #1f2328;
    --app-muted: #6b7280;
    --app-border: #dfe3e8;
    --app-border-strong: #c9ced6;
    --app-surface: #ffffff;
    --app-hover: #f1f3f5;
    --app-accent: #198754;            /* sovrascritti dalla preferenza utente (buildUserThemeCss) */
    --app-accent-rgb: 25, 135, 84;
    --app-accent-hover: #146c43;
    --app-accent-active: #115c39;
    --app-on-accent: #ffffff;         /* testo sopra l'accento: bianco o nero, sempre >= 4,5:1 */
    --app-on-accent-rgb: 255, 255, 255;
    --app-accent-text: #198754;       /* accento come testo sul bianco (link): sempre >= 4,5:1 */
    --app-accent-text-rgb: 25, 135, 84;
    --app-accent-text-hover: #146c43;
    --app-accent-text-hover-rgb: 20, 108, 67;
    --app-danger: #b02a37;
    --app-radius: .4rem;          /* 6px a 15px, 7px a 17px */
    --app-control-h: 2.15rem;     /* altezza controlli piccoli: 32px a 15px, 37px a 17px */
    --app-text-scale: 1;          /* sovrascritto dalla preferenza utente (buildUserThemeCss) */

    /* Scala tipografica: multipli della base del documento. */
    --fs-title: 1.6rem;
    --fs-lead: 1.1rem;            /* dati più letti della testata: cliente e destinazione */
    --fs-value: 1rem;
    --fs-label: .86rem;
    --lh-value: 1.5rem;          /* interlinea comune di valori e "lead": linea di base allineata */
    --app-nav-bg: #0d6efd;   /* sovrascritto dalla preferenza utente (buildUserThemeCss) */
    --app-nav-fg: #ffffff;   /* testo della barra: chiaro o scuro secondo il fondo (Nav::colorsFor) */
    --app-nav-fg-rgb: 255, 255, 255;

    /* Accento al posto del "primary" di Bootstrap, in tutte le pagine. .text-primary (icone) e i link
       usano la variante leggibile sul bianco. */
    --bs-primary: var(--app-accent);
    --bs-primary-rgb: var(--app-accent-text-rgb);
    --bs-link-color: var(--app-accent-text);
    --bs-link-color-rgb: var(--app-accent-text-rgb);
    --bs-link-hover-color: var(--app-accent-text-hover);
    --bs-link-hover-color-rgb: var(--app-accent-text-hover-rgb);
    --bs-border-radius: var(--app-radius);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-muted);
}

/* ---------------------------------------------------------------------
   Base del documento per fascia di risoluzione (rem del browser x scala
   utente: rispetta anche la dimensione carattere impostata nel browser).
   --------------------------------------------------------------------- */
html { font-size: calc(.9375rem * var(--app-text-scale)); }          /* 15px */

/* Scrollbar verticale sempre presente (pagine con la barra del menu, html.app-scrollbar da includes/header.php):
   pagine corte e lunghe hanno la stessa larghezza utile, quindi barra e contenuto non si spostano di lato
   passando dall'una all'altra; sulle pagine corte la scrollbar è vuota. Le scrollbar sovrapposte (telefono,
   macOS) non occupano spazio e non cambiano. Login e stampe non hanno la classe: restano come sono.
   Non scrollbar-gutter: stable: Chrome lascia bianco lo spazio riservato (striscia chiara accanto alla barra
   e non scurita sotto i modali) e conta quello spazio in documentElement.clientWidth se la pagina non scorre. */
@media screen {
    html.app-scrollbar { overflow-y: scroll; }
    /* Modale aperto: Bootstrap blocca lo scorrimento con overflow: hidden sul body, che con overflow-y: scroll su
       html non vale per la pagina. Si nasconde la scrollbar di html; Bootstrap l'ha già misurata e compensa la sua
       larghezza con un padding a destra su body e barra, come prima. */
    html.app-scrollbar:has(> body.modal-open) { overflow-y: hidden; }
}

/* Telefono: resta la base di prima (16px, predefinita del browser), per non rimpicciolire
   la pagina "Esito consegna" già in uso sul campo. */
@media (max-width: 767.98px) {
    html { font-size: calc(1rem * var(--app-text-scale)); }          /* 16px */
    :root {
        /* Telefono invariato: stessi stili di testo di prima (22/14/12px su base 16). */
        --fs-title: 1.375rem;
        --fs-lead: .875rem;
        --fs-value: .875rem;
        --fs-label: .75rem;
        --lh-value: 1.25rem;
        --app-control-h: 2rem;
    }
}

@media (min-width: 1600px) {
    html { font-size: calc(1.0625rem * var(--app-text-scale)); }     /* 17px */
}

body { font-size: var(--fs-value); }

/* Contenitore: tutta la larghezza sotto i 1600px; sopra, centrato al 94% e mai oltre
   110rem. La barra di navigazione resta a tutta larghezza con il contenuto allineato. */
.app-container { width: 100%; margin-inline: auto; }

@media (min-width: 1600px) {
    .app-container { width: 94%; max-width: 110rem; }
    .app-navbar > .app-container { padding-inline: 1.5rem; }   /* come il px-4 del contenuto */
}

/* ---------------------------------------------------------------------
   Testo: i tre stili (+ "lead" per cliente e destinazione in testata)
   --------------------------------------------------------------------- */
.t-title { font-size: var(--fs-title); line-height: 1.25; font-weight: 700; color: var(--app-text); margin: 0; }
.t-value { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 400; color: var(--app-text); }
.t-lead { font-size: var(--fs-lead); }      /* stessa interlinea del valore: linea di base comune */
.t-label { font-size: var(--fs-label); line-height: 1.3; font-weight: 400; color: var(--app-muted); }
.t-strong { font-weight: 700; }   /* solo per il nome del cliente */

/* ---------------------------------------------------------------------
   Link: accento, sottolineati solo al passaggio del mouse
   --------------------------------------------------------------------- */
a { text-decoration: none; }
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.list-group-item):hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Pulsanti: principale pieno (accento), secondario con bordo neutro.
   Stessa altezza (--app-control-h nei controlli piccoli) e stesso raggio per tutti.
   --------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--app-radius);
    --bs-btn-font-weight: 400;
}

.btn-sm {
    --bs-btn-border-radius: var(--app-radius);
    --bs-btn-font-size: var(--fs-value);
    min-height: var(--app-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}

.form-select-sm,
.form-control-sm {
    min-height: var(--app-control-h);
    font-size: var(--fs-value);
    border-radius: var(--app-radius);
}

.btn-primary {
    --bs-btn-color: var(--app-on-accent);
    --bs-btn-hover-color: var(--app-on-accent);
    --bs-btn-active-color: var(--app-on-accent);
    --bs-btn-disabled-color: var(--app-on-accent);
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-active-bg: var(--app-accent-active);
    --bs-btn-active-border-color: var(--app-accent-active);
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
    --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-accent-text);
    --bs-btn-border-color: var(--app-accent-text);
    --bs-btn-hover-color: var(--app-on-accent);
    --bs-btn-hover-bg: var(--app-accent);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-active-color: var(--app-on-accent);
    --bs-btn-active-bg: var(--app-accent-hover);
    --bs-btn-active-border-color: var(--app-accent-hover);
    --bs-btn-disabled-color: var(--app-accent-text);
    --bs-btn-disabled-border-color: var(--app-accent-text);
    --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
}

/* Secondario: bordo neutro, testo scuro, nessun colore. */
.btn-outline-secondary,
.btn-neutral {
    --bs-btn-color: var(--app-text);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-border-color: var(--app-border-strong);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-hover);
    --bs-btn-hover-border-color: var(--app-border-strong);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: #e7eaee;
    --bs-btn-active-border-color: var(--app-border-strong);
    --bs-btn-disabled-color: var(--app-muted);
    --bs-btn-disabled-bg: var(--app-surface);
    --bs-btn-disabled-border-color: var(--app-border);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
}

/* Voce distruttiva nei menu (es. "Elimina" in "Altro"). */
.dropdown-item.text-danger,
.dropdown-item.item-danger { color: var(--app-danger); }
.dropdown-item.item-danger:hover { color: var(--app-danger); background: #fbeaec; }

/* Componenti Bootstrap che usano il colore principale. */
.form-check-input:checked { background-color: var(--app-accent-text); border-color: var(--app-accent-text); }
.form-control:focus,
.form-select:focus { border-color: color-mix(in srgb, var(--app-accent) 50%, #ffffff); box-shadow: 0 0 0 .25rem rgba(var(--app-accent-rgb), .25); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-accent); --bs-nav-pills-link-active-color: var(--app-on-accent); }
.pagination { --bs-pagination-active-bg: var(--app-accent); --bs-pagination-active-border-color: var(--app-accent); --bs-pagination-active-color: var(--app-on-accent); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--app-accent); --bs-dropdown-link-active-color: var(--app-on-accent); }

/* ---------------------------------------------------------------------
   Barra di navigazione (includes/header.php, voci in src/Nav.php): fondo
   del colore della barra scelto dall'utente, testo chiaro o scuro secondo
   il fondo (--app-nav-fg). La voce accesa ha il colore dell'accento con il
   suo testo (--app-on-accent, sempre >= 4,5:1) e un bordo del colore del
   testo della barra, così si distingue anche quando accento e barra sono
   simili. Stati: passaggio del mouse = velatura; accesa = accento con
   bordo; focus da tastiera = contorno di 2px del colore del testo.
   --------------------------------------------------------------------- */
/* Barra appena caricata (.is-loading, tolta da assets/app.js dopo "load"): nessuna transizione o animazione
   mentre la pagina si apre, così l'adattamento e la voce accesa non si vedono "arrivare". */
.app-navbar.is-loading,
.app-navbar.is-loading * { transition: none !important; animation: none !important; }

.app-navbar {
    background-color: var(--app-nav-bg);
    color: var(--app-nav-fg);
    /* Livello proprio fin dal primo disegno: altrimenti Chrome ve la sposta quando la pagina diventa scorrevole (barra
       "sticky") e ridisegna il testo con una resa diversa, un piccolo lampeggio. Nessun elemento fisso sta nella barra. */
    will-change: transform;
    z-index: 1035;   /* sopra le barre fisse delle pagine (z-index < 1035), sotto le finestre modali */
    --bs-navbar-padding-y: .375rem;
    --bs-navbar-color: var(--app-nav-fg);
    --bs-navbar-hover-color: var(--app-nav-fg);
    --bs-navbar-active-color: var(--app-on-accent);
    --bs-navbar-brand-color: var(--app-nav-fg);
    --bs-navbar-brand-hover-color: var(--app-nav-fg);
    --bs-navbar-brand-margin-end: .75rem;
    --bs-navbar-nav-link-padding-x: .6rem;
}

.app-navbar .navbar-brand:focus-visible,
.app-navbar .nav-link:focus-visible,
.app-navbar .btn-nav:focus-visible,
.app-navbar .navbar-toggler:focus-visible {
    outline: 2px solid var(--app-nav-fg);
    outline-offset: 2px;
    box-shadow: none;
}

.app-navbar .nav-link {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding-block: .4rem;
    border-radius: var(--app-radius);
    color: var(--app-nav-fg);
    white-space: nowrap;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link.show { color: var(--app-nav-fg); background: rgba(var(--app-nav-fg-rgb), .16); }
.app-navbar .nav-link.active,
.app-navbar .nav-link.active:hover,
.app-navbar .nav-link.active.show {
    color: var(--app-on-accent);
    background: var(--app-accent);
    box-shadow: inset 0 0 0 2px rgba(var(--app-nav-fg-rgb), .9);
}
.app-navbar .dropdown-toggle::after { margin-left: .1rem; }

/* Pulsanti a destra (campanella, Aspetto, Esci, scorciatoia Giri): bordo del colore del testo. */
.app-navbar .btn-nav {
    --bs-btn-color: var(--app-nav-fg);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(var(--app-nav-fg-rgb), .6);
    --bs-btn-hover-color: var(--app-nav-fg);
    --bs-btn-hover-bg: rgba(var(--app-nav-fg-rgb), .16);
    --bs-btn-hover-border-color: var(--app-nav-fg);
    --bs-btn-active-color: var(--app-on-accent);
    --bs-btn-active-bg: var(--app-accent);
    --bs-btn-active-border-color: var(--app-nav-fg);
    white-space: nowrap;
}

.app-navbar .navbar-toggler:focus:not(:focus-visible) { box-shadow: none; }

.app-navbar .navbar-toggler {
    color: var(--app-nav-fg);
    border-color: rgba(var(--app-nav-fg-rgb), .6);
    font-size: 1.5rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
}

/* Tendine: sopra a tutto il contenuto, voce corrente con l'accento del tema. */
.app-navbar .dropdown-menu { --bs-dropdown-min-width: 13rem; --bs-dropdown-zindex: 1040; }
.app-navbar .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.app-navbar .dropdown-item:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }

.app-nav-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.app-navbar:not(.is-compact) .app-nav-shortcut { display: none; }   /* scorciatoia "Giri": solo con la barra compatta */

/* Nome utente lungo: troncato (nome intero nel title, che si legge anche toccando). */
.app-navbar .nav-user {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: 0;
    color: var(--app-nav-fg);
    white-space: nowrap;
}

.app-navbar .nav-user-name {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-navbar .nav-user-role {
    font-size: var(--fs-label);
    line-height: 1.3;
    padding: .0625rem .45rem;
    border: 1px solid rgba(var(--app-nav-fg-rgb), .5);
    border-radius: .625rem;
}

/* Barra in riga (da 1200px, se le voci ci stanno): tendine sotto la voce. La barra compatta ha la
   classe .is-compact, messa dallo script subito dopo la barra in includes/header.php. */
@media (min-width: 1200px) {
    .app-navbar:not(.is-compact) .navbar-nav { gap: .125rem; }
    .app-navbar:not(.is-compact) .navbar-nav .dropdown-menu { margin-top: .375rem; }
    .app-navbar:not(.is-compact) .app-nav-tools { flex-wrap: nowrap; margin-left: .5rem; }
}

/* 1200-1599px (1280, 1366, 1536): stesse voci per esteso e stesso corpo, solo spazi più stretti;
   fino a 1499px (1280, 1366) le voci di primo livello e il marchio perdono l'icona, il nome resta intero. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .app-navbar:not(.is-compact) { --bs-navbar-nav-link-padding-x: .45rem; --bs-navbar-brand-margin-end: .5rem; }
    .app-navbar:not(.is-compact) .navbar-nav { gap: 0; }
    .app-navbar:not(.is-compact) .app-nav-tools { gap: .375rem; }
    .app-navbar .nav-user-name { max-width: 7rem; }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
    .app-navbar:not(.is-compact) { --bs-navbar-nav-link-padding-x: .35rem; --bs-navbar-brand-margin-end: .25rem; }
    .app-navbar:not(.is-compact) .app-nav-main > .nav-item > .nav-link > .bi,
    .app-navbar:not(.is-compact) .navbar-brand > .bi { display: none; }
    .app-navbar:not(.is-compact) .dropdown-toggle::after { margin-left: 0; }
    .app-navbar .nav-user-name { max-width: 6rem; }
}

/* Voci che non stanno in una riga (1200-1279px, testo ingrandito in "Aspetto"): prima .is-crowded
   (via icone delle voci, ruolo e scritta "Esci", che restano nel title), poi la barra compatta. */
.app-navbar.is-crowded:not(.is-compact) .nav-user-role,
.app-navbar.is-crowded:not(.is-compact) .btn-nav .nav-btn-label,
.app-navbar.is-crowded:not(.is-compact) .app-nav-main > .nav-item > .nav-link > .bi,
.app-navbar.is-crowded:not(.is-compact) .navbar-brand > .bi { display: none; }

/* Da 1600px la barra usa un corpo un po' più piccolo del contenuto (circa 15px a 1920). */
@media (min-width: 1600px) {
    .app-navbar { font-size: .9rem; }
    .app-navbar .nav-link,
    .app-navbar .navbar-text,
    .app-navbar .btn { font-size: inherit; }
}

/* Barra compatta (sotto i 1200px, o voci che non ci stanno): menu unico a comparsa, con le tendine
   già aperte (sotto-voci sempre visibili, nessun secondo tocco) e la sezione corrente evidenziata;
   scorre se è più alto dello schermo. */
.app-navbar.is-compact .navbar-collapse { max-height: calc(100dvh - 3.75rem); overflow-y: auto; }
.app-navbar.is-compact .navbar-nav { padding-top: .5rem; gap: .125rem; }
.app-navbar.is-compact .nav-link,
.app-navbar.is-compact .dropdown-item { min-height: max(2.75rem, 44px); padding-inline: .75rem; }
.app-navbar.is-compact .app-nav-group > .dropdown-toggle { pointer-events: none; opacity: .85; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .03em; min-height: 2rem; }
.app-navbar.is-compact .app-nav-group > .dropdown-toggle::after { display: none; }
.app-navbar.is-compact .app-nav-group > .dropdown-toggle.active { color: var(--app-nav-fg); background: rgba(var(--app-nav-fg-rgb), .16); opacity: 1; font-weight: 600; }
.app-navbar.is-compact .app-nav-group > .dropdown-menu {
    display: block;
    position: static;
    margin: 0;
    padding: 0 0 .25rem 1.25rem;
    border: 0;
    background: transparent;
    box-shadow: none !important;
    font-size: inherit;
}
.app-navbar.is-compact .app-nav-group .dropdown-item { color: var(--app-nav-fg); border-radius: var(--app-radius); }
.app-navbar.is-compact .app-nav-group .dropdown-item:hover { color: var(--app-nav-fg); background: rgba(var(--app-nav-fg-rgb), .16); }
.app-navbar.is-compact .app-nav-group .dropdown-item.active { color: var(--app-on-accent); background: var(--app-accent); box-shadow: inset 0 0 0 2px rgba(var(--app-nav-fg-rgb), .9); }
.app-navbar.is-compact .app-nav-group .dropdown-item:focus-visible { outline-color: var(--app-nav-fg); }
.app-navbar.is-compact .app-nav-tools { padding-block: .75rem .5rem; margin-top: .5rem; border-top: 1px solid rgba(var(--app-nav-fg-rgb), .3); }
.app-navbar.is-compact .app-nav-tools .btn-nav { min-height: max(2.75rem, 44px); min-width: max(2.75rem, 44px); }
/* Notifiche nel menu a comparsa: a tutta larghezza sotto i pulsanti, dentro il menu che scorre
   (dentro la barra Bootstrap non usa Popper: allineata alla campanella uscirebbe dallo schermo). */
.app-navbar.is-compact .app-nav-tools { position: relative; }
.app-navbar.is-compact .nav-bell { position: static; }
.app-navbar.is-compact .nav-bell-menu { left: 0; right: 0; width: auto; max-height: 60vh; }

/* ---------------------------------------------------------------------
   Ricerca globale, "+ Nuovo" e contatori della barra (includes/header.php,
   comportamento in assets/app.js). Ricerca e "+ Nuovo" stanno fuori dal
   menu a comparsa (.app-nav-quick): in riga il menu a comparsa non fa da
   riquadro (display: contents) e l'ordine è marchio, voci, ricerca,
   + Nuovo, campanella, utente, Aspetto, Esci; con la barra compatta
   restano accanto al pulsante del menu.
   --------------------------------------------------------------------- */
.app-nav-quick { display: flex; align-items: center; gap: .5rem; }

@media (min-width: 1200px) {
    .app-navbar.navbar-expand-xl:not(.is-compact) .navbar-collapse { display: contents !important; }
    .app-navbar:not(.is-compact) .app-nav-main { order: 1; margin-right: auto; }
    .app-navbar:not(.is-compact) .app-nav-quick { order: 2; margin-left: .5rem; }
    .app-navbar:not(.is-compact) .app-nav-tools { order: 3; }
}

.app-navbar.is-compact .app-nav-quick { margin-left: auto; margin-right: .5rem; gap: .375rem; }
.app-navbar.is-compact .app-nav-quick .btn { min-height: max(2.75rem, 44px); min-width: max(2.75rem, 44px); }

/* Casella di ricerca: chiara su qualunque colore della barra. */
.nav-search-open,
.nav-search-close,
.nav-label-short { display: none; }
.nav-search-panel { position: relative; }
.nav-search-field { position: relative; display: flex; align-items: center; width: clamp(12rem, 14vw, 17rem); }
.nav-search-field .form-control {
    min-height: var(--app-control-h);
    padding-block: .2rem;
    padding-inline: 2rem 2.25rem;
    font-size: var(--fs-value);
    color: var(--app-text);
    background-color: var(--app-surface);
    border: 1px solid rgba(var(--app-nav-fg-rgb), .55);
}
.nav-search-field .form-control::-webkit-search-cancel-button { display: none; }
.nav-search-icon { position: absolute; left: .65rem; color: var(--app-muted); pointer-events: none; }
.nav-search-kbd {
    position: absolute;
    right: .5rem;
    padding: 0 .35rem;
    font-family: inherit;
    font-size: var(--fs-label);
    line-height: 1.3;
    color: var(--app-muted);
    background: var(--app-surface);
    border: 1px solid var(--app-border-strong);
    border-radius: .25rem;
    box-shadow: none;
}
.nav-search-field .form-control:focus ~ .nav-search-kbd { display: none; }
@media (pointer: coarse) { .nav-search-kbd { display: none; } }

.nav-search-results {
    position: absolute;
    top: calc(100% + .375rem);
    right: 0;
    z-index: 1045;
    width: max(100%, 30rem);
    max-width: calc(100vw - 1rem);
    max-height: min(70vh, 36rem);
    overflow-y: auto;
    padding: .25rem 0;
    color: var(--app-text);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
}
.nav-search-group + .nav-search-group { border-top: 1px solid var(--app-border); }
.nav-search-group-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .5rem .9rem .15rem;
    font-size: var(--fs-label);
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.nav-search-item {
    display: block;
    padding: .35rem .9rem;
    color: var(--app-text);
    text-decoration: none !important;
    border-left: 3px solid transparent;
}
.nav-search-item:hover { background: var(--app-hover); color: var(--app-text); }
.nav-search-item.is-active { background: rgba(var(--app-accent-rgb), .12); border-left-color: var(--app-accent); }
.nav-search-item-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-search-item-context { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-label); color: var(--app-muted); }
.nav-search-more {
    display: block;
    padding: .3rem .9rem .5rem;
    font-size: var(--fs-label);
    color: var(--app-accent-text);
    border-left: 3px solid transparent;
}
.nav-search-more.is-active { background: rgba(var(--app-accent-rgb), .12); border-left-color: var(--app-accent); }
.nav-search-message { padding: .6rem .9rem; color: var(--app-muted); }
.nav-search-empty ul { padding-left: 1.1rem; margin: .35rem 0; }
.nav-search-group-count { text-transform: none; letter-spacing: 0; }
/* A 1920 la finestra può essere più larga (circa 720px), mai oltre lo schermo (max-width sopra). */
@media (min-width: 1600px) { .nav-search-results { width: max(100%, 45rem); } }
/* Con il gruppo Articoli (8 righe a due livelli e i chip) serve più altezza, sempre entro lo schermo. */
.nav-search-results.has-articles { max-height: min(calc(100vh - 5rem), 52rem); }

/* Riga a due livelli di un articolo (barra, selettore delle righe, "Collega ad articolo"):
   codice e descrizione in evidenza, a destra provenienza e prezzi, sotto categoria · materiale ·
   comfort · tipologia · misure. */
.art-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .75rem;
    row-gap: .1rem;
    align-items: baseline;
}
.art-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-code { font-weight: 600; }
.art-badges { white-space: nowrap; }
.art-badges .badge-tag { margin-left: .25rem; font-size: var(--fs-label); }
.art-side { display: flex; gap: .5rem; align-items: baseline; justify-content: flex-end; white-space: nowrap; font-size: var(--fs-label); }
.art-source { color: var(--app-muted); }
.art-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.art-cost { color: var(--app-muted); font-variant-numeric: tabular-nums; }
.art-details { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-label); color: var(--app-muted); }
.art-row mark { padding: 0; color: inherit; background: rgba(var(--app-accent-rgb), .22); border-radius: 2px; }
.badge-tag.art-inactive { color: var(--app-muted); border-style: dashed; }
.nav-search-article { padding-top: .45rem; padding-bottom: .45rem; }
.search-modal-rows td { padding-top: .5rem; padding-bottom: .5rem; }
.coding-link-results .art-row { width: 100%; }
@media (max-width: 575.98px) {
    /* Telefono: la descrizione può andare a capo, provenienza e prezzi sotto. */
    .art-row { grid-template-columns: minmax(0, 1fr); }
    .art-main { white-space: normal; }
    .art-side { justify-content: flex-start; }
    .art-details { white-space: normal; }
}

/* Filtri attivi di un elenco (Catalogo): un chip per filtro, la x lo toglie. */
.filter-chips { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .65rem;
    font-size: var(--fs-label);
    color: var(--app-text);
    text-decoration: none !important;
    background: rgba(var(--app-accent-rgb), .1);
    border: 1px solid var(--app-accent);
    border-radius: 999px;
}
.filter-chip:hover { background: rgba(var(--app-accent-rgb), .2); color: var(--app-text); }
@media (pointer: coarse) { .filter-chip { min-height: max(2.75rem, 44px); padding: 0 .85rem; } }
/* Catalogo: i quattro pulsanti delle azioni su una riga solo dove c'è spazio; sotto vanno su due. */
@media (min-width: 1400px) { .catalog-table .col-actions { white-space: nowrap; } }
/* Sotto i 1280px la miniatura (la colonna meno utile) lascia spazio a materiale, comfort e misure. */
@media (min-width: 768px) and (max-width: 1279.98px) { .catalog-table .col-photo { display: none; } }
.catalog-table mark { padding: 0; color: inherit; background: rgba(var(--app-accent-rgb), .22); border-radius: 2px; }

/* Chip dei filtri rapidi del gruppo Articoli: un clic restringe la ricerca. */
.nav-search-chips { display: flex; flex-wrap: wrap; gap: .3rem .4rem; padding: .35rem .9rem; }
.nav-search-facets { border-top: 1px dashed var(--app-border); }
.nav-search-facet { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-right: .5rem; }
.nav-search-facet-label { font-size: var(--fs-label); color: var(--app-muted); }
.nav-search-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .55rem;
    font-size: var(--fs-label);
    color: var(--app-text);
    text-decoration: none !important;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 999px;
}
.nav-search-chip:hover { background: var(--app-hover); color: var(--app-text); }
.nav-search-chip.is-active,
.nav-search-chip:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 1px; }
.nav-search-chip.is-active-filter { background: rgba(var(--app-accent-rgb), .12); border-color: var(--app-accent); }
.nav-search-chip-count { color: var(--app-muted); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .nav-search-chip { min-height: max(2.75rem, 44px); padding: 0 .8rem; } }

/* Ricerca a icona (.is-search-icon, barra stretta) e con la barra compatta: si apre sopra la barra
   (in riga) o a tutta larghezza sotto la barra (compatta), con il pulsante per chiuderla. */
.app-navbar.is-search-icon .nav-search-open,
.app-navbar.is-compact .nav-search-open { display: inline-flex; }
.app-navbar.is-search-icon .nav-search-panel,
.app-navbar.is-compact .nav-search-panel { display: none; }
.app-navbar.is-search-icon .nav-search.is-open .nav-search-panel {
    display: block;
    position: absolute;
    top: 50%;
    right: 1rem;
    z-index: 1046;
    width: min(36rem, calc(100% - 2rem));
    transform: translateY(-50%);
}
.app-navbar.is-compact .nav-search.is-open .nav-search-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1046;
    padding: .5rem 1rem .75rem;
    background: var(--app-nav-bg);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.app-navbar .nav-search.is-open .nav-search-field { width: 100%; }
.app-navbar .nav-search.is-open .nav-search-kbd { display: none; }
.app-navbar .nav-search.is-open .nav-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: .125rem;
    min-width: 2.25rem;
    min-height: 2rem;
    padding: 0;
    color: var(--app-muted);
    border: 0;
}
.app-navbar.is-compact .nav-search.is-open .nav-search-field .form-control { min-height: max(2.75rem, 44px); }
.app-navbar.is-compact .nav-search.is-open .nav-search-close { min-width: 44px; min-height: 44px; }
.app-navbar.is-compact .nav-search-results {
    position: static;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 9rem);
    margin-top: .5rem;
}
.app-navbar.is-compact .nav-search-item,
.app-navbar.is-compact .nav-search-more { min-height: max(2.75rem, 44px); }
@media (pointer: coarse) {
    .nav-search-item,
    .nav-search-more,
    .app-navbar .btn-nav-new,
    .app-navbar .nav-search-open { min-height: max(2.75rem, 44px); }
    .app-navbar .nav-search-open,
    .app-navbar .nav-new .dropdown-toggle-split { min-width: 44px; }
    .app-navbar .nav-search.is-open .nav-search-close { min-width: 44px; min-height: 44px; }
    .nav-search-field .form-control { min-height: max(2.75rem, 44px); }
}

/* "+ Nuovo": pieno, del colore dell'accento con il suo testo; bordo del colore del testo della barra,
   così si vede anche quando accento e barra sono simili. */
.app-navbar .btn-nav-new {
    --bs-btn-color: var(--app-on-accent);
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: rgba(var(--app-nav-fg-rgb), .85);
    --bs-btn-hover-color: var(--app-on-accent);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-nav-fg);
    --bs-btn-active-color: var(--app-on-accent);
    --bs-btn-active-bg: var(--app-accent-active);
    --bs-btn-active-border-color: var(--app-nav-fg);
    --bs-btn-focus-shadow-rgb: var(--app-nav-fg-rgb);
    font-weight: 600;
    white-space: nowrap;
}
.app-navbar .btn-nav-new:focus-visible { outline: 2px solid var(--app-nav-fg); outline-offset: 2px; box-shadow: none; }
.app-navbar .nav-new .dropdown-toggle-split { padding-inline: .45rem; }
.app-navbar .nav-new .dropdown-toggle-split::after { margin-left: 0; }
.app-navbar.is-compact .nav-new .nav-btn-label { display: none; }
.app-navbar.is-compact .nav-new .dropdown-toggle-split { min-width: 2rem; }

/* Telefono: "+" apre subito un nuovo preventivo (cliente e articolo restano nelle loro sezioni),
   "Giri" e marchio più stretti, così marchio, ricerca, "+", "Giri" e menu stanno in una riga. */
@media (max-width: 575.98px) {
    .app-navbar.is-compact .nav-new .dropdown-toggle-split,
    .app-navbar.is-compact .nav-new .dropdown-menu { display: none; }
    .app-navbar.is-compact .nav-new .btn-nav-new:first-child { border-radius: var(--app-radius); }
    .app-navbar.is-compact .app-nav-quick { margin-right: .375rem; gap: .25rem; }
    .app-navbar.is-compact .app-nav-shortcut { padding-inline: .5rem; }
    .app-navbar.is-compact { --bs-navbar-brand-margin-end: .25rem; }
}

/* Contatori sulle voci: numero piccolo, neutro; arancione per ciò che richiede un intervento. Hanno
   un fondo proprio, quindi si leggono su qualunque barra e dentro la voce accesa. Larghezza minima quella di
   "99+": se il numero cambia (aggiornamento ogni 60 secondi) le voci accanto non si spostano. */
.nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.25rem;
    padding: 0 .35rem;
    margin-left: .1rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    color: #1f2328;
    background: #ffffff;
    border: 1px solid #c9ced6;
    border-radius: .625rem;
    font-variant-numeric: tabular-nums;
}
.nav-count.is-action { color: #ffffff; background: #b54708; border-color: rgba(255, 255, 255, .85); }
.app-navbar .dropdown-item .nav-count { margin-left: auto; }
/* Barra piena anche con le etichette abbreviate (window.appNavLayout, .is-dots): sulle tendine il contatore
   diventa un pallino; il numero resta nella voce dentro la tendina e nel testo per gli screen reader. */
.app-navbar.is-dots .app-nav-group > .nav-link .nav-count { min-width: 0; width: .6rem; height: .6rem; padding: 0; font-size: 0; line-height: 0; }
/* Ultimo passo prima della barra compatta (.is-noname): resta l'icona dell'utente, il nome è nel title (anche al tocco). */
.app-navbar.is-noname:not(.is-compact) .nav-user-name { display: none; }

/* Etichette abbreviate (.is-abbrev, solo le voci .is-short): il nome intero resta per gli screen
   reader e nel title. */
.app-navbar.is-abbrev:not(.is-compact) .is-short .nav-label-short { display: inline; }
.app-navbar.is-abbrev:not(.is-compact) .is-short .nav-label-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Spazi più stretti quando le voci non ci stanno (.is-crowded): mai un corpo del testo più piccolo. */
.app-navbar.is-crowded:not(.is-compact) { --bs-navbar-nav-link-padding-x: .3rem; --bs-navbar-brand-margin-end: .25rem; }
.app-navbar.is-crowded:not(.is-compact) .app-nav-tools,
.app-navbar.is-crowded:not(.is-compact) .app-nav-quick { gap: .25rem; }
.app-navbar.is-crowded:not(.is-compact) .app-nav-quick { margin-left: .25rem; }

/* Schermi al tocco anche oltre i 1200px (tablet orizzontale): voci alte almeno 44px. */
@media (pointer: coarse) {
    .app-navbar .nav-link,
    .app-navbar .dropdown-item,
    .app-navbar .btn-nav { min-height: max(2.75rem, 44px); }
}

/* ---------------------------------------------------------------------
   Badge di stato — UNICA palette per stati riga, documento, consegna,
   pagamento, attivo/disattivo. Tinte chiare con testo scuro (contrasto
   >= 5:1), "fatto" pieno. Quale classe per quale stato: src/StatusBadge.php.
   --------------------------------------------------------------------- */
.badge-st {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    vertical-align: baseline;
    font-size: var(--fs-label);
    line-height: 1.3;
    font-weight: 400;
    padding: .0625rem .5rem;
    border: 1px solid transparent;
    border-radius: .625rem;
    white-space: nowrap;
}

.st-todo      { background: #ffe5cc; color: #7a3500; border-color: #f5a96b; }   /* da fare: arancione */
.st-progress  { background: #d9f1fb; color: #054a5c; border-color: #79c7e3; }   /* in corso: azzurro */
.st-ready     { background: #d4f3de; color: #0c4a2c; border-color: #74c493; }   /* pronto: verde */
.st-done      { background: #146c43; color: #ffffff; border-color: #146c43; }   /* fatto: verde scuro */
.st-cancelled { background: #e9ecef; color: #5c636a; border-color: #ced4da; text-decoration: line-through; }
.st-problem   { background: #fbe0e3; color: #842029; border-color: #eba3ab; }   /* problema: ritardo, non consegnato, rifiutato */
.st-neutral   { background: #eef1f5; color: #3d4a5c; border-color: #c3cbd6; }   /* informativo */

/* Badge che possono andare a capo (elenchi lunghi di etichette in una cella). */
.badge-tag.badge-wrap { white-space: normal; text-align: left; }

/* Etichette che NON sono stati (tipo documento, "Banco", conteggi): sempre neutre. */
.badge-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    vertical-align: baseline;
    font-size: var(--fs-label);
    line-height: 1.3;
    font-weight: 400;
    padding: .0625rem .5rem;
    color: var(--app-muted);
    background: var(--app-surface);
    border: 1px solid var(--app-border-strong);
    border-radius: .625rem;
    white-space: nowrap;
}

/* Etichetta neutra con icona in evidenza (es. "Dispositivo Medico CE"): l'icona è
   più grande e scura del testo, così si riconosce a colpo d'occhio senza usare un colore di stato. */
.badge-tag-icon { color: var(--app-text); }
.badge-tag-icon > .bi { font-size: .875rem; line-height: 1; color: var(--app-text); }

/* ---------------------------------------------------------------------
   Tablet e tocco (768-1099px): area di tocco di almeno 44px per
   pulsanti, campi, voci di menu e righe delle tabelle. max() tiene i
   44px anche quando la base del documento è piccola.
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1099.98px) {
    .btn,
    .btn-sm,
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    .input-group-text,
    .page-link {
        min-height: max(2.75rem, 44px);
    }

    .btn,
    .btn-sm { display: inline-flex; align-items: center; justify-content: center; }

    .dropdown-item,
    .list-group-item-action {
        min-height: max(2.75rem, 44px);
        display: flex;
        align-items: center;
    }

    .navbar-nav .nav-link { min-height: max(2.75rem, 44px); display: flex; align-items: center; }

    .table > tbody > tr > td,
    .table > tbody > tr > th { height: max(2.75rem, 44px); }

    .form-check-input { width: 1.4em; height: 1.4em; margin-top: 0; }
    .form-check { min-height: max(2.75rem, 44px); display: flex; align-items: center; gap: .5rem; padding-left: 0; }
    .form-check .form-check-input { float: none; margin-left: 0; }
    .form-check-inline { display: inline-flex; margin-right: 1rem; }

    /* Tabelle senza scroll orizzontale: le colonne meno usate (.col-tablet-hide) spariscono
       solo in questa fascia (su telefono la tabella scorre come prima, su desktop c'è spazio);
       intestazioni e badge lunghi possono andare a capo. */
    .col-tablet-hide { display: none; }
    .table > thead > tr > th { white-space: normal; }
    .table .badge-st,
    .table .badge-tag { white-space: normal; }

    /* Badge cliccabili: area di tocco allargata senza cambiarne l'aspetto (il badge di stato
       della riga è un .btn ma resta un badge, non un pulsante alto 44px). */
    .btn.badge-st { min-height: 0; display: inline-flex; }
    .tap-target { position: relative; }
    .tap-target::after { content: ""; position: absolute; inset: -.75rem -.35rem; }
}

/* Fumetto con il testo completo (title) mostrato al tocco: sui dispositivi senza mouse
   il title non compare mai. Gestito da assets/app.js (App.tapTitles). */
.tap-tip {
    position: fixed;
    z-index: 1080;
    max-width: min(24rem, calc(100vw - 1rem));
    padding: .4rem .65rem;
    font-size: var(--fs-label);
    line-height: 1.35;
    color: #fff;
    background: rgba(31, 35, 40, .95);
    border-radius: var(--app-radius);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
    pointer-events: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Riordino al tocco (App.touchReorder): la maniglia non fa scorrere la pagina. */
.drag-handle { touch-action: none; cursor: grab; padding: .35rem; margin: -.35rem; }
.is-dragging { opacity: .85; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18); position: relative; z-index: 5; }