/* =======================================================================
   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;
}

/* Bottone arancione "Khata" nella barra principale: stessa forma a
   pillola degli altri bottoni, solo il colore cambia per distinguerlo. */
.navbar-inverse .navbar-nav > li.nav-pill-khata > a {
  background-color: #F57C00;
  color: #ffffff !important;
}
.navbar-inverse .navbar-nav > li.nav-pill-khata > a:hover,
.navbar-inverse .navbar-nav > li.nav-pill-khata.active > a {
  background-color: #E65100 !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-editacceptation-panel table,
  .fd-editacceptation-panel tbody,
  .fd-editacceptation-panel tr,
  .fd-editacceptation-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 {
    display: block;
    width: 100% !important;
  }

  .fd-search-panel tr.spaceUnder,
  .fd-customer-panel tr.spaceUnder,
  .fd-acceptation-panel tr.spaceUnder,
  .fd-editacceptation-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 {
    margin-bottom: 14px;
  }

  .fd-search-panel td,
  .fd-customer-panel td,
  .fd-acceptation-panel td,
  .fd-editacceptation-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 {
    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-editacceptation-panel input,
  .fd-editacceptation-panel select,
  .fd-editacceptation-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 {
    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-editacceptation-panel input[type="radio"],
  .fd-editacceptation-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"] {
    width: auto !important;
    max-width: none;
  }

  .fd-search-panel .panel-body,
  .fd-customer-panel .panel-body,
  .fd-acceptation-panel .panel-body,
  .fd-editacceptation-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;
  }
}

/* -----------------------------------------------------------------------
   Work_Form_Tec.php: tabellina "Legenda" (Rosso/Arancio/Nero) affiancata a
   destra del testo introduttivo via attributo HTML "align=right" (equivalente
   a float:right). Su desktop resta cosi' com'e' oggi. Su mobile il float la
   farebbe restare una colonnina stretta accanto al testo, rischiando di
   schiacciarsi o sovrapporsi al contenuto sotto — qui la rendiamo un blocco a
   piena larghezza, impilato DOPO il testo invece che affiancato. */
@media (max-width: 767px) {
  .fd-legenda-worktec {
    float: none !important;
    width: 100% !important;
  }
}

/* -----------------------------------------------------------------------
   editAcceptation.php: autocomplete "Nominativo Del Cliente" (sostituisce il
   <select> IdNominativoCliente popolato con TUTTI i FRONTDESK_CUSTOMER senza
   LIMIT). Stesso pattern/markup gia' validato in trackingdevice/Device.php e
   trackingdevice/Search.php per il campo Fornitore (position:absolute, non
   fixed, perche' il campo vive nel normale flusso della tabella e non sotto
   una navbar fixed). */
.fd-customer-search {
  position: relative;
  display: inline-block;
}

.fd-customer-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-customer-suggest-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--fd-text);
}

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