/* =======================================================================
   Frontdesk CST — restyle grafico flat/moderno
   Non contiene alcuna logica: solo aspetto (colori, spaziature, layout).
   Applicato sopra ai CSS esistenti (bootstrap/chosen/responsive), che
   restano invariati per le pagine non ancora convertite.
   ======================================================================= */

:root {
  --fd-border: #e2e8f0;
  --fd-bg: #f8fafc;
  --fd-text: #1e293b;
  --fd-text-muted: #64748b;
  --fd-primary: #3275c1;
  --fd-radius: 12px;
}

body {
  background-color: var(--fd-bg);
  font-size: 15px;
}

/* -----------------------------------------------------------------------
   Menu top: da navbar scura anni 2010 a bottoni/pill chiari
   ----------------------------------------------------------------------- */
.navbar-inverse {
  background-color: #ffffff;
  border: none;
  border-bottom: 1px solid var(--fd-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* La navbar resta fissa in cima anche scrollando. La sua altezza e' variabile
   (i pill/la ricerca rapida vanno a capo su schermi stretti), quindi il
   padding-top di compensazione sul body NON e' un valore fisso in CSS: viene
   calcolato a runtime da menu.php (fdSetHeaderOffset), che misura l'altezza
   reale della navbar e la applica come padding-top. Se in futuro la navbar
   cambia altezza (nuovi elementi, resize, wrap dei pill) il padding si
   riadatta da solo invece di dover essere ritoccato a mano qui. */
.navbar-inverse.navbar-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
}

body.fd-has-fixed-header {
  transition: padding-top 0.1s ease;
}

.navbar-inverse .navbar-brand {
  color: var(--fd-text) !important;
  font-weight: 600;
}

/* Lo username era pensato per la vecchia navbar scura (font color chiaro):
   sul nuovo sfondo bianco va ricolorato per restare leggibile. */
.navbar-inverse .navbar-brand font {
  color: var(--fd-text-muted) !important;
}

.navbar-inverse .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.navbar-inverse .navbar-nav > li {
  margin: 6px 4px;
}

/* Gruppo "sempre visibile" (Home, Khata: vedi menu.php, fuori da
   #navbar/.navbar-collapse quindi non nascosto dall'hamburger su mobile).
   Stessa pillola/flex-wrap del resto della navbar (eredita da .navbar-nav),
   solo senza margin-bottom residuo quando e' l'ultimo elemento prima della
   ricerca rapida. */
.fd-nav-persistent {
  margin-bottom: 0;
}

.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a.dropdown-toggle {
  color: var(--fd-text) !important;
  background-color: #f1f5f9;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Pagina corrente: Bootstrap tema "inverse" mette di serie uno sfondo quasi
   nero (#080808) su .navbar-nav > .active > a, pensato per la vecchia
   navbar scura. Sul nuovo sfondo chiaro va sostituito con un indicatore
   leggero (sfondo azzurrino + bordo colorato), non nero pieno. Va PRIMA
   della regola :hover cosi' l'hover (dichiarata dopo, stessa specificita')
   continua a vincere e mostrare il riempimento pieno anche sul pill attivo. */
.navbar-inverse .navbar-nav > li.active > a {
  background-color: #eff6ff;
  color: var(--fd-primary) !important;
  box-shadow: inset 0 0 0 2px var(--fd-primary);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover {
  background-color: var(--fd-primary) !important;
  color: #ffffff !important;
}

.navbar-inverse .navbar-nav > li > a[href="logout.php"] {
  background-color: #fef2f2;
}
.navbar-inverse .navbar-nav > li > a[href="logout.php"]:hover {
  background-color: #ef4444 !important;
}
.navbar-inverse .navbar-nav > li > a[href="logout.php"] font {
  color: inherit !important;
}

/* Tracking Device: modulo separato su un altro dominio/index.php, va
   distinto a colpo d'occhio dagli altri bottoni del menu. */
.navbar-inverse .navbar-nav > li.tracking-device-btn > a {
  background-color: #facc15;
  color: #713f12 !important;
  font-weight: 600;
}
.navbar-inverse .navbar-nav > li.tracking-device-btn > a:hover,
.navbar-inverse .navbar-nav > li.tracking-device-btn.active > a {
  background-color: #eab308 !important;
  color: #713f12 !important;
}

/* Bottone verde "Tracking Device" nella barra principale: stessa forma a
   pillola degli altri bottoni (ereditata da .navbar-nav > li > a), solo
   il colore cambia per segnalare che porta a un'altra app/dominio. */
.navbar-inverse .navbar-nav > li.nav-pill-tracking > a {
  background-color: #28a745;
  color: #ffffff !important;
}
.navbar-inverse .navbar-nav > li.nav-pill-tracking > a:hover,
.navbar-inverse .navbar-nav > li.nav-pill-tracking.active > a {
  background-color: #218838 !important;
  color: #ffffff !important;
}

.navbar-inverse .navbar-nav .dropdown-menu {
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 6px;
  /* Condivisa da TUTTI i dropdown della navbar (Presa In Carico, Liste
     Schede, Sistema Ordini, Features, Desk Option — stessa classe generata
     genericamente da menu.php). Desk Option ha 10+ voci: su schermi bassi
     le ultime finivano fuori dal viewport invece di scrollare. max-height
     + overflow-y risolve per tutti i dropdown lunghi in un colpo solo,
     senza bisogno di scoping specifico a Desk Option. */
  max-height: 70vh;
  overflow-y: auto;
}

/* Desk Option e' l'ULTIMO <li class="dropdown"> della navbar (Tracking
   Device e Logout, dopo di esso, non sono dropdown) — selettore
   posizionale stabile, non legato al nome/testo della voce. Essendo
   l'ultimo, il suo toggle e' spesso vicino al bordo destro dello schermo:
   ancorare il menu a destra invece che a sinistra evita che venga tagliato
   orizzontalmente dal bordo. Gli altri dropdown restano col default
   Bootstrap (ancorati a sinistra), che va gia' bene per la loro posizione
   piu' centrale/a sinistra nella riga. */
.navbar-inverse .navbar-nav > li.dropdown:last-of-type > .dropdown-menu {
  left: auto;
  right: 0;
}

.navbar-inverse .navbar-nav .dropdown-menu > li > a {
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--fd-text);
}

.navbar-inverse .navbar-nav .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .dropdown-menu > li.active > a {
  background-color: #eff6ff;
  color: var(--fd-primary);
}

/* .navbar-toggle (X righe hamburger): Bootstrap ha gia' una regola piu'
   specifica ".navbar-inverse .navbar-toggle .icon-bar { background-color:
   #fff }" (pensata per la vecchia navbar scura) che altrimenti vince su
   questa per specificita' (3 classi contro 2), lasciando le barre bianche
   su bianco = icona "vuota". Serve lo stesso prefisso ".navbar-inverse" +
   !important per garantire che vinca sempre. */
.navbar-inverse .navbar-toggle {
  border-color: var(--fd-border);
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: var(--fd-text) !important;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #f1f5f9;
}

/* Sotto i 768px (breakpoint standard Bootstrap, non piu' abbassato a 480px
   come in una versione precedente): Home/Khata/ricerca rapida restano
   sempre visibili (sono fuori da #navbar/.navbar-collapse, vedi menu.php),
   il resto del menu collassa dietro l'hamburger con il comportamento
   nativo di Bootstrap, senza bisogno di override qui. */

/* -----------------------------------------------------------------------
   Pannelli homepage: bordi sottili invece di blocco blu pieno
   ----------------------------------------------------------------------- */
.fd-panel {
  background: #ffffff;
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  overflow: hidden;
}

.fd-panel-heading {
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 600;
  color: var(--fd-text);
  border-bottom: 1px solid var(--fd-border);
}

.fd-panel-body {
  padding: 24px;
}

.fd-panel-intro {
  color: var(--fd-text-muted);
  font-size: 15px;
  margin-bottom: 20px;
}

/* -----------------------------------------------------------------------
   Card azioni rapide (Aggiungi Cliente, Accettazione, ecc.)
   ----------------------------------------------------------------------- */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 44px;
  padding: 28px 16px;
  background: #ffffff;
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  text-decoration: none;
  color: var(--fd-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.action-card:hover,
.action-card:focus {
  border-color: var(--fd-primary);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--fd-text);
}

.action-icon {
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
}

.action-label {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* -----------------------------------------------------------------------
   Form di login: stessi campi/nomi, solo input piu' comodi al tocco
   ----------------------------------------------------------------------- */
.fd-login-form {
  max-width: 360px;
  margin: 0 auto;
}

.fd-login-form .form-control {
  min-height: 44px;
  font-size: 15px;
  border-radius: 8px;
}

.fd-login-form .btn {
  min-height: 44px;
  padding: 10px 24px;
  font-size: 15px;
  border-radius: 8px;
}

/* Dark mode: mantiene compatibilita' con il toggle esistente (#testdark*) */
.dark-mode.fd-panel,
.dark-mode .fd-panel-heading,
.dark-mode .fd-panel-body {
  background-color: #0f172a;
  color: #f1f5f9;
  border-color: #1e293b;
}
.dark-mode .fd-panel-intro {
  color: #94a3b8;
}
.dark-mode .action-card {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
.dark-mode .action-card:hover {
  color: #f1f5f9;
}

/* -----------------------------------------------------------------------
   Ricerca rapida in navbar (menu.php): stile "pillola", coerente coi
   bottoni del menu. I campi esposti sono Nominativo e N. Scheda, piu' il
   bottone "Ricerca Avanzata" (spostato qui dalla riga pillole principale,
   .fd-quick-search-adv piu' sotto) che porta alla ricerca completa in
   search.php.
   ----------------------------------------------------------------------- */
.fd-quick-search {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 6px 4px;
  margin-left: auto;
}

.fd-quick-search-field {
  position: relative;
}

.fd-quick-search-field .form-control {
  border-radius: 999px;
  border: 1px solid var(--fd-border);
  min-height: 44px;
  font-size: 14px;
  padding: 10px 16px;
  width: 200px;
}

.fd-quick-search-nominativo .form-control {
  width: 220px;
}

#fdqsScheda {
  width: 130px;
}

/* Bottone "Ricerca Avanzata": stessa pillola grigio-chiara dei bottoni di
   primo livello (vedi .navbar-nav > li > a), qui fuori dal <ul> quindi
   ristilizzata a mano sullo stesso schema colori. align-self + margin-top
   negativo per farla sedere leggermente piu' in alto dei campi di input
   della riga, come richiesto. */
.fd-quick-search-adv {
  align-self: flex-start;
  margin-top: -4px;
}

.fd-quick-search-adv a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--fd-text) !important;
  background-color: #f1f5f9;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fd-quick-search-adv a:hover,
.fd-quick-search-adv a:focus {
  background-color: var(--fd-primary) !important;
  color: #ffffff !important;
}

/* Stato "pagina corrente" (search.php): stessa resa azzurrina/bordo blu
   usata per le altre pillole attive, non nero pieno. */
.fd-quick-search-adv a.active {
  background-color: #eff6ff;
  color: var(--fd-primary) !important;
  box-shadow: inset 0 0 0 2px var(--fd-primary);
}

/* position: fixed (non absolute) con top/left/right calcolati via JS
   (menu.php, positionPanel()) in base al bounding rect del campo di
   riferimento. Con la navbar in fixed, un posizionamento absolute verrebbe
   agganciato a #fdQuickSearch e rischierebbe di essere tagliato dagli
   overflow del .navbar-collapse su schermi stretti; fixed lo evita del
   tutto ed e' comunque corretto perche' la navbar non si sposta piu' con lo
   scroll. */
.fd-quick-search-suggest,
.fd-quick-search-results {
  display: none;
  position: fixed;
  background-color: #ffffff;
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 1040;
  max-height: 320px;
  overflow-y: auto;
}

.fd-quick-search-suggest {
  min-width: 220px;
}

.fd-quick-search-suggest-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--fd-text);
}

.fd-quick-search-suggest-item:hover {
  background-color: var(--fd-primary);
  color: #ffffff;
}

.fd-quick-search-results {
  min-width: 480px;
  max-width: calc(100vw - 24px);
  padding: 6px 0;
}

.fd-quick-search-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--fd-text-muted);
}

.fd-quick-search-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fd-quick-search-table th,
.fd-quick-search-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--fd-border);
  white-space: nowrap;
}

.fd-quick-search-table th {
  color: var(--fd-text-muted);
  font-weight: 600;
}

@media (max-width: 767px) {
  /* Sicurezza anti-scrollbar orizzontale: niente elemento della navbar
     (pillole sempre visibili o menu collassato aperto) deve poter sporgere
     oltre la larghezza dello schermo. */
  .navbar-inverse.navbar-fixed-top,
  .navbar-inverse .container {
    overflow-x: hidden;
  }

  .fd-quick-search {
    margin-left: 0;
    width: 100%;
  }
  .fd-quick-search-field .form-control,
  .fd-quick-search-nominativo .form-control,
  #fdqsScheda {
    width: 100%;
  }
  .fd-quick-search-adv {
    align-self: stretch;
    margin-top: 0;
    width: 100%;
  }
  .fd-quick-search-adv a {
    justify-content: center;
  }
  .fd-quick-search-results {
    min-width: calc(100vw - 24px);
  }
}

/* -----------------------------------------------------------------------
   Immagini/icone decorative (non funzionali: nessun link/onclick, solo
   illustrazione). Riusabile su qualsiasi pagina: aggiungere questa classe
   all'<img> per nasconderla sotto i 768px, invariata su desktop. Stesso
   breakpoint gia' in uso per l'hamburger della navbar.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .fd-decorative-img {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------
   Tabelle dati con molte colonne (elenchi tipo listaSchede.php,
   ListaSchedeRiv.php, e future pagine simili): invece di impilare le righe
   o forzare le celle a capo, la tabella resta con le sue colonne native e
   scorre lateralmente dentro il proprio contenitore, senza spingere il
   resto della pagina in orizzontale. Regola generale, non scoped al
   mobile: su desktop, se la tabella ci sta gia' nello spazio disponibile,
   non ha alcun effetto visibile (nessuna scrollbar se non serve).
   ----------------------------------------------------------------------- */
.fd-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -----------------------------------------------------------------------
   acceptation.php: label + bottone "+" (Marca/Modello/Accessori/Tipo
   Device/Status/Tecnico/Muletto). Su 2 dei 7 campi (Tipo di Device, Status)
   il bottone andava a capo sotto la label pur avendo lo STESSO markup degli
   altri 5 (verificato, nessuna differenza di struttura HTML) — dipende
   dalla larghezza di colonna che il browser assegna a quella cella nella
   tabella (auto layout, calcolata sul contenuto piu' largo tra tutte le
   righe), non da un errore nel markup di quei 2 campi specifici.
   white-space:nowrap forza label+icona a restare sempre sulla stessa riga
   a prescindere da come il browser distribuisce le colonne — attivo sia
   desktop che mobile, non e' un problema legato al breakpoint.
   ----------------------------------------------------------------------- */
.fd-add-icon-label {
  white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Toggle switch Si/No (acceptation.php: Dati Importanti, Pin Sblocco,
   Segno, Urgente, Preventivo). Wrappa i 2 radio nativi ESISTENTI (stessi
   name/id/value/required di sempre, invariati) dentro due <label> — una
   meta' switch ciascuna. Cliccare una meta' seleziona il radio nascosto
   al suo interno (comportamento nativo del browser: click su una <label>
   che avvolge un radio lo attiva), quindi submit/required/evento "change"
   restano quelli nativi sui radio originali — cambia solo l'aspetto.
   Rosso = No/Off (o nessuna selezione ancora fatta), verde = Si/On.
   Non scoped al mobile: stesso aspetto ovunque, come richiesto.
   ----------------------------------------------------------------------- */
.fd-toggle-switch {
  position: relative;
  display: inline-flex;
  width: 64px;
  height: 28px;
  border-radius: 999px;
  background-color: #ef4444;
  overflow: hidden;
  vertical-align: middle;
  transition: background-color 0.15s ease;
}

.fd-toggle-switch:has(.fd-toggle-half-si input:checked) {
  background-color: #22c55e;
}

.fd-toggle-half {
  flex: 1;
  margin: 0;
  cursor: pointer;
  position: relative;
}

/* Selettore generico (non legato a una singola pagina/pannello): qualsiasi
   pagina che usa .fd-toggle-switch deve poter contare su questa regola,
   senza doverla ri-dichiarare per ogni nuovo ".fd-xxx-panel". Specificita'
   alzata apposta con "input[type=radio]" perche' nel blocco mobile piu'
   sotto c'e' gia' una regola tipo ".fd-acceptation-panel input[type=radio]
   { width:auto !important }" per gli ALTRI radio della pagina (es. la
   griglia 9 pulsanti del codice di sblocco) che pero' qui andrebbe a
   rompere il click-target a tutta meta'-switch — questa vince sempre,
   desktop e mobile, in qualunque pannello scoped si trovi il toggle. */
.fd-toggle-switch .fd-toggle-half input[type="radio"] {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.fd-toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
  pointer-events: none;
}

.fd-toggle-switch:has(.fd-toggle-half-si input:checked)::after {
  transform: translateX(36px);
}

/* -----------------------------------------------------------------------
   Toggle a pulsanti con icona per scelte a 2 opzioni con etichetta propria
   (es. Metodo Di Pagamento: Contanti/Bancomat in Khata.php, EditKhata.php,
   editAcceptation.php, Edit_Desk_Order.php). A differenza di
   .fd-toggle-switch (binario Si/No, stile interruttore), qui ogni opzione
   e' una card con icona + testo — riusabile per qualsiasi coppia di scelte
   con icone diverse, non solo pagamento. Stesso trucco del radio nativo
   avvolto da <label> (nessun id/for necessario): name/value restano quelli
   gia' in uso pagina per pagina, cambia solo l'aspetto.
   ----------------------------------------------------------------------- */
.fd-payment-toggle {
  display: inline-flex;
  gap: 10px;
}

.fd-payment-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 84px;
  min-height: 64px;
  padding: 10px 8px;
  border: 2px solid var(--fd-border);
  border-radius: var(--fd-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.fd-payment-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fd-payment-icon {
  font-size: 22px;
  color: var(--fd-text-muted);
}

.fd-payment-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fd-text);
}

.fd-payment-option:has(input:checked) {
  border-color: var(--fd-primary);
  background-color: #eff6ff;
}

.fd-payment-option:has(input:checked) .fd-payment-icon,
.fd-payment-option:has(input:checked) .fd-payment-label {
  color: var(--fd-primary);
}

/* -----------------------------------------------------------------------
   Form a tabella label/input con width fissa (search.php, customer.php, e
   le prossime pagine riviste): niente classe propria di serie, riusano
   ".spaceUnder" che pero' e' condivisa da un'altra sessantina di pagine —
   per questo lo scope qui e' sui contenitori dedicati (".fd-search-panel",
   ".fd-customer-panel", ecc. — aggiungere qui il selettore per ogni nuova
   pagina rivista, stesso pattern), non su ".spaceUnder" direttamente, per
   non toccare le pagine non ancora riviste. Input/select hanno width fissa
   via style inline (es. 250-300px), serve !important per vincerla su
   mobile.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .fd-search-panel table,
  .fd-search-panel tbody,
  .fd-search-panel tr,
  .fd-search-panel td,
  .fd-customer-panel table,
  .fd-customer-panel tbody,
  .fd-customer-panel tr,
  .fd-customer-panel td,
  .fd-acceptation-panel table,
  .fd-acceptation-panel tbody,
  .fd-acceptation-panel tr,
  .fd-acceptation-panel td,
  .fd-listaschederiv-panel table,
  .fd-listaschederiv-panel tbody,
  .fd-listaschederiv-panel tr,
  .fd-listaschederiv-panel td,
  .fd-khata-panel table,
  .fd-khata-panel tbody,
  .fd-khata-panel tr,
  .fd-khata-panel td,
  .fd-ordinaricambi-panel table,
  .fd-ordinaricambi-panel tbody,
  .fd-ordinaricambi-panel tr,
  .fd-ordinaricambi-panel td,
  .fd-gestionespeseb-panel table,
  .fd-gestionespeseb-panel tbody,
  .fd-gestionespeseb-panel tr,
  .fd-gestionespeseb-panel td,
  .fd-deskorder-panel table,
  .fd-deskorder-panel tbody,
  .fd-deskorder-panel tr,
  .fd-deskorder-panel td,
  .fd-gestioneaziende-panel table,
  .fd-gestioneaziende-panel tbody,
  .fd-gestioneaziende-panel tr,
  .fd-gestioneaziende-panel td,
  .fd-labelgenerator-panel table,
  .fd-labelgenerator-panel tbody,
  .fd-labelgenerator-panel tr,
  .fd-labelgenerator-panel td,
  .fd-contogiornaliero-panel table,
  .fd-contogiornaliero-panel tbody,
  .fd-contogiornaliero-panel tr,
  .fd-contogiornaliero-panel td,
  .fd-contomensile-panel table,
  .fd-contomensile-panel tbody,
  .fd-contomensile-panel tr,
  .fd-contomensile-panel td,
  .fd-khatamensile-panel table,
  .fd-khatamensile-panel tbody,
  .fd-khatamensile-panel tr,
  .fd-khatamensile-panel td,
  .fd-khatatotaltest-panel table,
  .fd-khatatotaltest-panel tbody,
  .fd-khatatotaltest-panel tr,
  .fd-khatatotaltest-panel td,
  .fd-device-panel table,
  .fd-device-panel tbody,
  .fd-device-panel tr,
  .fd-device-panel td,
  .fd-devicesearch-panel table,
  .fd-devicesearch-panel tbody,
  .fd-devicesearch-panel tr,
  .fd-devicesearch-panel td {
    display: block;
    width: 100% !important;
  }

  .fd-search-panel tr.spaceUnder,
  .fd-customer-panel tr.spaceUnder,
  .fd-acceptation-panel tr.spaceUnder,
  .fd-listaschederiv-panel tr.spaceUnder,
  .fd-khata-panel tr.spaceUnder,
  .fd-ordinaricambi-panel tr.spaceUnder,
  .fd-gestionespeseb-panel tr.spaceUnder,
  .fd-deskorder-panel tr.spaceUnder,
  .fd-gestioneaziende-panel tr.spaceUnder,
  .fd-labelgenerator-panel tr.spaceUnder,
  .fd-contogiornaliero-panel tr.spaceUnder,
  .fd-contomensile-panel tr.spaceUnder,
  .fd-khatamensile-panel tr.spaceUnder,
  .fd-khatatotaltest-panel tr.spaceUnder,
  .fd-device-panel tr.spaceUnder,
  .fd-devicesearch-panel tr.spaceUnder {
    margin-bottom: 14px;
  }

  .fd-search-panel td,
  .fd-customer-panel td,
  .fd-acceptation-panel td,
  .fd-listaschederiv-panel td,
  .fd-khata-panel td,
  .fd-ordinaricambi-panel td,
  .fd-gestionespeseb-panel td,
  .fd-deskorder-panel td,
  .fd-gestioneaziende-panel td,
  .fd-labelgenerator-panel td,
  .fd-contogiornaliero-panel td,
  .fd-contomensile-panel td,
  .fd-khatamensile-panel td,
  .fd-khatatotaltest-panel td,
  .fd-device-panel td,
  .fd-devicesearch-panel td {
    padding: 2px 0;
  }

  .fd-search-panel input,
  .fd-search-panel select,
  .fd-search-panel .chosen-container,
  .fd-customer-panel input,
  .fd-customer-panel select,
  .fd-customer-panel .chosen-container,
  .fd-acceptation-panel input,
  .fd-acceptation-panel select,
  .fd-acceptation-panel .chosen-container,
  .fd-listaschederiv-panel input,
  .fd-listaschederiv-panel select,
  .fd-listaschederiv-panel .chosen-container,
  .fd-khata-panel input,
  .fd-khata-panel select,
  .fd-khata-panel .chosen-container,
  .fd-ordinaricambi-panel input,
  .fd-ordinaricambi-panel select,
  .fd-ordinaricambi-panel .chosen-container,
  .fd-gestionespeseb-panel input,
  .fd-gestionespeseb-panel select,
  .fd-gestionespeseb-panel .chosen-container,
  .fd-unlockcode-panel input,
  .fd-unlockcode-panel select,
  .fd-unlockcode-panel .chosen-container,
  .fd-deskorder-panel input,
  .fd-deskorder-panel select,
  .fd-deskorder-panel .chosen-container,
  .fd-gestioneaziende-panel input,
  .fd-gestioneaziende-panel select,
  .fd-gestioneaziende-panel .chosen-container,
  .fd-labelgenerator-panel input,
  .fd-labelgenerator-panel select,
  .fd-labelgenerator-panel .chosen-container,
  .fd-contogiornaliero-panel input,
  .fd-contogiornaliero-panel select,
  .fd-contogiornaliero-panel .chosen-container,
  .fd-contomensile-panel input,
  .fd-contomensile-panel select,
  .fd-contomensile-panel .chosen-container,
  .fd-khatamensile-panel input,
  .fd-khatamensile-panel select,
  .fd-khatamensile-panel .chosen-container,
  .fd-khatatotaltest-panel input,
  .fd-khatatotaltest-panel select,
  .fd-khatatotaltest-panel .chosen-container,
  .fd-device-panel input,
  .fd-device-panel select,
  .fd-device-panel .chosen-container,
  .fd-devicesearch-panel input,
  .fd-devicesearch-panel select,
  .fd-devicesearch-panel .chosen-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Il tastierino di sblocco (unlockcode.php) vive dentro lo stesso
     .fd-unlockcode-panel: i suoi radio hanno pero' display:none via
     .fd-unlockcode-keypad (non solo opacity:0 come nei toggle Si/No), quindi
     restano fuori dal flusso a prescindere dalla larghezza — nessuna eccezione
     input[type="radio"] necessaria qui, a differenza di acceptation.php/
     ordinaricambi.php. */

  /* La regola sopra ("input { width:100% !important }") matcha QUALSIASI
     <input>, radio/checkbox compresi: su acceptation.php questo stirava i
     radio Si/No a piena larghezza, facendoli comportare come blocchi che
     si spingono a vicenda a capo — la vera causa del gruppo Si/No
     scomposto su mobile (non una questione di <tr> separate, verificato:
     ogni gruppo e' gia' in un'unica riga/cella). Qui li si riporta alla
     dimensione naturale. Stessa cosa serve su .fd-ordinaricambi-panel, che
     ha 3 gruppi radio Si/No (In Stock, Gia' preso, Fornitore) non ancora
     convertiti a fd-toggle-switch — restano testo+radio come oggi, ma
     senza questa eccezione si stirerebbero comunque a piena larghezza. */
  .fd-acceptation-panel input[type="radio"],
  .fd-acceptation-panel input[type="checkbox"],
  .fd-ordinaricambi-panel input[type="radio"],
  .fd-ordinaricambi-panel input[type="checkbox"],
  .fd-deskorder-panel input[type="radio"],
  .fd-deskorder-panel input[type="checkbox"],
  .fd-device-panel input[type="radio"],
  .fd-device-panel input[type="checkbox"] {
    width: auto !important;
    max-width: none;
  }

  .fd-search-panel .panel-body,
  .fd-customer-panel .panel-body,
  .fd-acceptation-panel .panel-body,
  .fd-khata-panel .panel-body,
  .fd-ordinaricambi-panel .panel-body,
  .fd-gestionespeseb-panel .panel-body,
  .fd-unlockcode-panel .panel-body,
  .fd-deskorder-panel .panel-body {
    overflow-x: hidden;
  }

  /* desk_order.php: a differenza delle altre pagine con lo stesso pattern di
     form (acceptation.php, ordinaRicambi.php), qui la tabella e' avvolta in
     un ulteriore contenitore con "width: 600px" fisso via style inline
     (".panel-danger"). Sotto i 600px di viewport questo forzava comunque lo
     scroll orizzontale, indipendentemente dal fix sugli input. */
  .fd-deskorder-panel .panel-danger {
    width: 100% !important;
  }

  /* index.php (Home): icone delle card di scelta rapida (Aggiungi Cliente,
     Accettazione, ecc.) sono funzionali (dentro <a class="action-card">),
     NON vanno nascoste come le immagini decorative — solo rimpicciolite per
     occupare meno spazio verticale nella colonna impilata su mobile. La
     dimensione e' gia' in classe (.action-icon, non inline), quindi non
     serve !important qui. */
  .action-icon {
    width: 48px;
    height: 48px;
  }

  /* index.php (Home): su mobile 2 colonne fisse invece di lasciare che
     l'auto-fit (usato su desktop) collassi a 1 sola colonna quando lo
     spazio non basta per 180px+gap. */
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Card "Ricerca Avanzata" ridondante su mobile: la ricerca rapida
     (#fdQuickSearch) e' gia' fissa in alto. Targettizzata per href esatto
     (non per posizione/ordine, che potrebbe cambiare) cosi' da colpire solo
     questa card e non le altre 4 (Aggiungi Cliente/Accettazione/Lista
     Schede/Ordina Ricambi, che linkano a customer.php/acceptation.php/
     listaSchede.php/ordinaRicambi.php — nessuna corrisponde a "search.php").
     Solo display:none via CSS, il link resta intatto nel markup. */
  a.action-card[href="search.php"] {
    display: none;
  }

  /* acceptation.php: bottoni "+" (Aggiungi Brand/Modello/Accessori/Tipo
     Device/Status/Tecnico/Muletto). Su desktop l'immagine e' nativa 16x16,
     dimensione gia' ragionevole (nessuna regola la ingrandisce sopra i
     1024px) — la classe resta quindi solo qui, dentro il breakpoint
     mobile, per non toccare l'aspetto desktop. Il problema "grande e
     sfocata" veniva da responsive.css, che ha una regola "img { width:
     150px }" globale e non scoped valida sotto i 1024px/991px: qui la
     vinciamo con una dimensione fissa piccola, coerente con l'uso come
     icona inline accanto alla label. Nota: responsive.css ripete la stessa
     regola "img { width: 150px }" anche dentro @media(max-width:991px) e
     @media(min-width:768px)and(max-width:1024px) — fasce dove QUESTA regola
     (scoped solo a 767px) non basta a vincerla. Vedi le due estensioni dello
     stesso fix più in fondo al file, che coprono quelle fasce aggiuntive. */
  .fd-add-icon {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle;
    margin-left: 6px;
  }

  /* -----------------------------------------------------------------------
     GestioneBranding.php: griglia orari settimanali (tabella nativa a 6
     colonne, 7 righe = giorni, 4 select + 1 checkbox per riga). A differenza
     delle altre tabelle label/valore gia' riviste, qui il significato di ogni
     colonna e' dato solo dall'header — srotolare i <td> a blocco pieno come
     nel pattern condiviso li avrebbe resi illeggibili (select nudi senza
     etichetta). Ogni riga diventa quindi una card verticale per giorno:
     l'header nativo sparisce (il nome colonna non serve piu'), il nome del
     giorno diventa l'intestazione della card, e ogni select/checkbox ottiene
     una micro-etichetta generata da "data-label" (attributo aggiunto ai <td>
     nel PHP, invisibile su desktop: qui e' l'unico posto in cui viene letto).
     Su desktop (sopra i 767px) non cambia nulla: la tabella resta quella
     nativa con l'header, questo blocco intero e' scoped al breakpoint mobile.
     ----------------------------------------------------------------------- */
  .fd-orari-panel thead {
    display: none;
  }

  .fd-orari-panel,
  .fd-orari-panel tbody {
    display: block;
    width: 100%;
  }

  .fd-orari-panel tr {
    display: block;
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-radius);
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  .fd-orari-panel td {
    display: block;
    border: none !important;
    padding: 3px 0 !important;
  }

  /* Prima cella (Giorno): intestazione della card, non un campo. */
  .fd-orari-panel td[data-label="Giorno"] {
    font-weight: 700;
    font-size: 15px;
    padding-bottom: 8px !important;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--fd-border) !important;
  }

  /* Chiuso: checkbox nativa piu' etichetta testuale, oggi capibile solo
     dall'header di colonna che qui sparisce. */
  .fd-orari-panel td[data-label="Chiuso"] {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .fd-orari-panel td[data-label="Chiuso"]::before {
    content: attr(data-label);
    font-weight: 600;
  }

  .fd-orari-panel td[data-label="Chiuso"] input {
    width: auto !important;
    margin: 0;
  }

  /* I 4 select (apertura/chiusura mattina e pomeriggio) affiancati a coppie:
     mattina su una riga, pomeriggio sulla successiva, ciascuno con la sua
     micro-etichetta sopra. */
  .fd-orari-panel td[data-label="Apertura mattina"],
  .fd-orari-panel td[data-label="Chiusura mattina"],
  .fd-orari-panel td[data-label="Apertura pomeriggio"],
  .fd-orari-panel td[data-label="Chiusura pomeriggio"] {
    display: inline-block;
    width: calc(50% - 4px);
    box-sizing: border-box;
    vertical-align: top;
  }

  .fd-orari-panel td[data-label="Apertura mattina"],
  .fd-orari-panel td[data-label="Apertura pomeriggio"] {
    margin-right: 8px;
  }

  .fd-orari-panel td[data-label="Apertura mattina"]::before,
  .fd-orari-panel td[data-label="Chiusura mattina"]::before,
  .fd-orari-panel td[data-label="Apertura pomeriggio"]::before,
  .fd-orari-panel td[data-label="Chiusura pomeriggio"]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--fd-text-muted);
    margin-bottom: 2px;
  }

  .fd-orari-panel td[data-label="Apertura mattina"] select,
  .fd-orari-panel td[data-label="Chiusura mattina"] select,
  .fd-orari-panel td[data-label="Apertura pomeriggio"] select,
  .fd-orari-panel td[data-label="Chiusura pomeriggio"] select {
    width: 100% !important;
  }

}

/* -----------------------------------------------------------------------
   GestioneBranding.php: prima di aggiungere <thead> la riga di intestazione
   della griglia orari era orfana (nessun thead/tbody esplicito), quindi il
   browser la trattava come parte di un tbody implicito — stessa resa delle
   righe dati (bordo superiore 1px, vertical-align top). Con <thead> esplicito
   scattano le regole native di Bootstrap ".table > thead > tr > th"
   (border-bottom 2px, vertical-align bottom), che cambierebbero l'aspetto
   desktop. Non scoped al breakpoint mobile: sotto i 767px il thead e' gia'
   display:none (vedi sopra), quindi qui conta solo per il desktop.
   ----------------------------------------------------------------------- */
.fd-orari-panel > thead > tr > th {
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

/* -----------------------------------------------------------------------
   trackingdevice/index.php: dashboard con 3 immagini cliccabili (170x200px
   fissi via style inline) affiancate in un'unica riga di tabella — pattern
   diverso dai form label/input gia' visti (qui non ci sono campi, solo link
   con immagine). Su mobile le 3 celle si impilano verticalmente invece di
   restare affiancate (che avrebbe forzato scroll orizzontale, 3x170px+
   supera qualsiasi schermo telefono), e le immagini si adattano alla
   larghezza disponibile mantenendo le proporzioni (max-width, non una
   dimensione fissa diversa) cosi' da vincere la dimensione inline 170x200
   senza deformarle. Non tocca il desktop: scoped al breakpoint mobile
   condiviso.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .fd-trackingindex-panel,
  .fd-trackingindex-panel tbody,
  .fd-trackingindex-panel tr,
  .fd-trackingindex-panel td {
    display: block;
    width: 100% !important;
  }

  .fd-trackingindex-panel td {
    text-align: center;
    padding: 10px 0;
  }

  .fd-trackingindex-panel img {
    width: auto !important;
    height: auto !important;
    max-width: 200px;
    max-height: 200px;
  }
}

/* -----------------------------------------------------------------------
   Estensione del fix ".fd-add-icon" (bottoni "+" oversize, vedi commento
   sopra alla definizione dentro @media(max-width:767px)) alle due fasce
   dove responsive.css ripete "img { width: 150px }" ma il fix originale
   non arrivava: @media(max-width:991px) e la fascia tablet dedicata
   @media(min-width:768px)and(max-width:1024px). Stessa identica regola,
   nessun'altra differenza — senza queste due estensioni l'icona torna
   gigante a qualunque larghezza di viewport tra 768px e 1024px, anche con
   CSS aggiornato (non serviva cache stale per riprodurlo). Sopra i 1024px
   nessuna regola di responsive.css ingrandisce l'immagine, quindi non
   serve estendere oltre: l'aspetto desktop resta invariato. */
@media (max-width: 991px) {
  .fd-add-icon {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle;
    margin-left: 6px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .fd-add-icon {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle;
    margin-left: 6px;
  }
}

/* -----------------------------------------------------------------------
   Device.php: autocomplete "Fornitore" (sostituisce il <select> con 9.470
   <option> precaricate, causa del bug "non si apre" per il peso del
   componente chosen.js su una lista cosi' grande). Stesso pattern visivo
   della ricerca rapida in navbar (fd-quick-search-suggest), ma con
   position:absolute invece di fixed+calcolo JS: qui il campo vive dentro il
   normale flusso della tabella, non sotto una navbar fixed, quindi non
   serve la matematica di posizionamento via getBoundingClientRect usata in
   menu.php. Solo su questa pagina: non aggiunto a gestionalecst, stesso
   criterio gia' usato per .fd-device-panel/.fd-trackingindex-panel. */
.fd-fornitore-search {
  position: relative;
  display: inline-block;
}

.fd-fornitore-suggest {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 300px;
  background-color: #ffffff;
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 1040;
  max-height: 260px;
  overflow-y: auto;
}

.fd-fornitore-suggest-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--fd-text);
}

.fd-fornitore-suggest-item:hover {
  background-color: var(--fd-primary);
  color: #ffffff;
}