* { box-sizing: border-box; }
:root {
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22c55e;
  --accent-2:#3b82f6;
  --danger:#ef4444;
  --border:#1f2937;
  --input-disabled-bg: #1e40af;
}
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
  background: var(--bg);
  color: var(--text);
}
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 12px 0; }
.card.sub { background: #0b1220; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.error { color: var(--danger); }
.status { color: var(--accent-2); }

/* Header */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; }
.right { display: flex; align-items: center; gap: 10px; }
.chip { background: #0b1220; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; font-size: .9rem; }

/* Barra Tab */
.tabs-bar { display: flex; justify-content: center; margin: 8px 0; }
.mode-switch { display: inline-flex; background: #0b1220; border: 1px solid var(--border); border-radius: 10px; padding: 2px; }
.mode-switch .tab { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; color: var(--text); cursor: pointer; }
.mode-switch .tab.active { background: #132133; border: 1px solid #1f2e44; }

/* Card Dati Compatta */
.card-compact { padding: 6px 12px; margin: 6px 0; }
.card-compact h2 { font-size: 1rem; margin-top: 4px; margin-bottom: 4px; }
.card-compact p { margin-top: 2px; margin-bottom: 2px; font-size: 0.85rem; }

/* Form Grid */
.form-grid { display: grid; gap: 8px; }

/* Scanner */
.scanner-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.video-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
video { width: 100%; height: auto; background: #000; }
[id^="overlay-"] { position: absolute; inset: 0; border: 2px dashed rgba(255,255,255,.2); border-radius: 12px; }
.controls .row { margin: 8px 0; }

/* Stile per i bottoni Cerca EAN manuale */
#search-manual-A,
#search-manual-B,
#search-manual-C { /* <-- AGGIUNTO SCANNER C */
    width: 100%;       /* Occupa tutta la larghezza */
    margin-top: 8px;   /* Aggiunge spazio sopra, separandolo dall'input */
    display: block;    /* Assicura che sia su una riga separata */
}
#search-manual-D { /* <--- AGGIUNGI QUESTA RIGA (con la virgola prima) */
    width: 100%;       /* Occupa tutta la larghezza */
    margin-top: 8px;   /* Aggiunge spazio sopra (l'aria che chiedevi) */
    display: block;    /* Assicura che sia su una riga separata */
}

/* Assicura che il div .actions nel tab Carico EAN non limiti la larghezza del bottone */
#mode-carico .controls .row:has(#manual-code-B) .actions {
   width: 100%; /* Fa sì che il contenitore del bottone B sia largo */
   margin-top: 0; /* Rimuove eventuale margine del div actions */
}

/* Risultati e Suggerimenti */
.result { display: grid; gap: 2px; }

.kv {
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding: 8px 12px;
    border:1px solid var(--border);
    border-radius:2px;
    background:#0b1220;
}

#ricprod-details.card.sub {
    display: grid;
    gap: 0px; /* Spazio tra gli elementi kv */
}

.list { display:flex; gap:2px; flex-wrap:wrap; }
.pill { background:#111827; border:1px solid var(--border); border-radius:999px; padding:2px 4px; }
.suggest { margin-top:6px; display:grid; gap:2px; }
.suggest .item {
   text-align:left; padding: 4px 12px; border-radius:8px; border:1px solid var(--border); background:#0b1220; cursor: pointer;
}
.suggest .item .hl { color: var(--accent-2); font-weight: 600; }
.suggest .item small { color:#94a3b8 }

/* Login Form */
#login-form label { display: block; margin-bottom: 8px; }

/* Input standard */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    width: 100%; padding: 8px 10px; background: #0b1220; border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); font-size: 1rem;
}
input:disabled, select:disabled, textarea:disabled { background: #1f2937; opacity: 0.7; cursor: not-allowed; }
fieldset.radios { border: none; padding: 0; margin: 0; }
fieldset.radios legend { font-size: 0.9em; color: var(--muted); margin-bottom: 4px; }
fieldset.radios label { display: inline-flex; align-items: center; margin-right: 12px; font-size: 0.95rem; }
fieldset.radios input[type="radio"] { width: auto; margin-right: 4px; }


button { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-size: 0.95rem; }
button.primary { background: var(--accent); color: #000; font-weight: 600; border-color: var(--accent); }
button.secondary { background: #374151; color: var(--text); border-color: #4b5563; }
button.danger { background-color: var(--danger); color: white; border-color: #b91c1c; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stili Spostamenti */
#mode-spostamenti input[readonly][disabled] { background-color: var(--input-disabled-bg); color: #a5b4fc; border-color: #3b82f6; cursor: not-allowed; opacity: 0.9; }
#spost-note { width: 100%; }
.spost-items-container table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.spost-items-container th, .spost-items-container td { border: 1px solid var(--border); padding: 4px 6px; text-align: left; }
.spost-items-container th { background-color: #1f2937; }
.spost-items-container td:nth-child(1) { width: 15%; } /* Codice */
.spost-items-container td:nth-child(2) { width: 40%; } /* Descrizione */
.spost-items-container td:nth-child(3) { width: 15%; } /* Ubicazione */
.spost-items-container td:nth-child(4) { width: 10%; text-align: center; } /* UM */
.spost-items-container td:nth-child(5) { width: 10%; text-align: right; } /* Qty */
.spost-items-container td:nth-child(6) { width: 10%; text-align: center; } /* Azioni */
.spost-items-container .remove-item-btn { background: none; border: none; color: var(--danger); cursor: pointer; padding: 2px; font-size: 1rem; }


/* --- Stili Storico --- (NUOVA STRUTTURA HEADER) --- */
/* ====== MODIFICA V6: Aggiunti selettori #log-spese-list-container ====== */
#storico-list-container .storico-item,
#log-spese-list-container .storico-item {
    border: 1px solid var(--border);
    background: #0b1220;
    border-radius: 6px;
    padding: 6px 10px; /* Mantenuto compatto */
    margin-bottom: 5px;
}

/* Header dell'item (riga riassuntiva cliccabile) */
#storico-list-container .storico-header,
#log-spese-list-container .storico-header {
    display: flex; /* Mette tutto su una riga */
    align-items: center; /* Allinea verticalmente gli elementi */
    gap: 8px; /* Spazio tra i blocchi info e la freccia */
    cursor: pointer;
    position: relative; /* Necessario per posizionare la freccia */
    min-height: 0;
    line-height: 1.2; /* Line height di base per l'header */
}

/* Contenitore per le info principali (Locali, Data, Utente/NR) */
.header-main-info {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    display: flex; /* MODIFICA: Mantiene flex */
    flex-direction: column; /* MODIFICA: Imposta la direzione a colonna */
    justify-content: center; /* Centra verticalmente le due righe */
    gap: 2px; /* MODIFICA: Spazio ridotto tra le due righe */
}

/* NUOVA CLASSE: Riga 1 (NR, Locali) */
.header-line-1 {
    display: flex;
    flex-wrap: wrap; /* Permette il wrap se la riga è troppo lunga */
    align-items: baseline;
    gap: 4px 10px; /* MANTIENE IL GAP (non saranno "attaccati") */
    font-size: 0.85rem; /* MODIFICA: Rimpicciolisci tutta la riga 1 */
    font-weight: 300; /* Applica il grassetto a tutta la riga 1 */
}

/* NUOVA CLASSE (da app.js): Stile per il nome locale (blu) */
.header-line-1 .locale-name {
    color: var(--accent-2); /* MODIFICA: Ripristina il colore blu */
}

/* NUOVA CLASSE: Riga 2 (Data, Utente) */
.header-line-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px; /* Mantiene il gap originale */
    font-size: 0.75rem;
    color: var(--muted);
}

.header-main-info .date-time,
.header-main-info .user-nr { /* Data/Ora e Utente/NR */
    margin: 0;
    padding: 0;
    white-space: nowrap; /* Non mandare a capo */
}

/* Regola mantenuta per compatibilità o se usata altrove */
.header-main-info .nr-prog {
    font-weight: 700;
    color: var(--accent);
    font-size: 0.75rem; 
}

/* Contenitore per le info secondarie (Conteggio Prodotti) */
.header-secondary-info {
    flex-shrink: 0; /* Non farlo restringere */
    margin-left: auto; /* Spinge a destra, prima della freccia */
    padding-left: 10px; /* Spazio dal blocco principale */
}
.header-secondary-info .items-summary {
    font-style: italic;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap; /* Non mandare a capo */
}

/* Freccia (Chevron) */
#storico-list-container .storico-header .chevron,
#log-spese-list-container .storico-header .chevron { /* Riferimento più specifico */
    font-size: 0.7rem;
    color: var(--muted);
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
    flex-shrink: 0; /* Non farlo restringere */
}
#storico-list-container .storico-item.expanded .storico-header .chevron,
#log-spese-list-container .storico-item.expanded .storico-header .chevron {
    transform: rotate(90deg);
}

/* Rimuovi la regola ::after che non serve più */
#storico-list-container .storico-header::after,
#log-spese-list-container .storico-header::after {
   display: none;
}

/* Corpo dell'item (visibile solo quando espanso) - Mantenuto compatto */
#storico-list-container .storico-body,
#log-spese-list-container .storico-body {
    display: none;
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px dashed var(--border);
}
#storico-list-container .storico-item.expanded .storico-body,
#log-spese-list-container .storico-item.expanded .storico-body { display: block; }

#storico-list-container .storico-body p,
#log-spese-list-container .storico-body p { margin: 0 0 6px 0; font-size: 0.85rem; line-height: 1.25; }

#storico-list-container .storico-body h4,
#log-spese-list-container .storico-body h4 { margin: 6px 0 4px 0; font-size: 0.95rem; }

/* Tabella interna */
.storico-body table.compact { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 6px; }

.storico-body table.compact th,
.storico-body table.compact td { 
    border: 1px solid var(--border); 
    padding: 2px 4px; 
    text-align: left; 
    vertical-align: top; 
    word-break: break-word; 
}
.storico-body table.compact th { background-color: #1f2937; }
/* Larghezze colonne (mantenute) */
.storico-body table.compact td:nth-child(1), .storico-body table.compact th:nth-child(1) { width: 20%; }
.storico-body table.compact td:nth-child(2), .storico-body table.compact th:nth-child(2) { width: auto; }
.storico-body table.compact td:nth-child(3), .storico-body table.compact th:nth-child(3) { width: 15%; }
.storico-body table.compact td:nth-child(4), .storico-body table.compact th:nth-child(4) { width: 10%; text-align: center;}
.storico-body table.compact td:nth-child(5), .storico-body table.compact th:nth-child(5) { width: 10%; text-align: right;}

/* Azioni in fondo */
.storico-actions {
    margin-top: 6px;
    /* text-align: right; */ /* <-- MODIFICA V6.4: Sostituito con flex */
    display: flex;
    justify-content: flex-end;
    gap: 8px; /* <-- MODIFICA V6.4: Spaziatura bottoni */
}
/* --- FINE Stili Storico --- */
/* ====== FINE MODIFICA V6 ====== */


/* Stili Gestione Utenti (Opzioni) */
.users-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.9rem; }
.users-table th, .users-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.users-table th { background-color: #1f2937; }

/* <-- MODIFICA V6.4: Spaziatura bottoni in OPZIONI */
.users-table td[style*="text-align: right"] { /* Selettore più robusto per la cella azioni */
    text-align: right;
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
    gap: 8px; /* Aggiunto spazio */
}
.users-table td[style*="text-align: right"] button {
    margin-left: 0; /* Rimuove vecchio margine se c'era */
    padding: 4px 8px;
}
/* <-- FINE MODIFICA V6.4 */


/* Media Queries */
@media (min-width: 900px) {
  .scanner-grid { grid-template-columns: 1fr 1fr; }
}


/* Stili per gli item nella Ricerca per Locale con azioni */
.locale-search-item {
    display: flex; /* Mette info e azioni sulla stessa riga */
    justify-content: space-between; /* Spinge azioni a destra */
    align-items: center; /* Allinea verticalmente al centro */
    gap: 12px; /* Spazio tra blocco info e blocco azioni */
    padding-top: 4px;
    padding-bottom: 4px;
}

.locale-item-info {
    flex-grow: 1; /* Occupa lo spazio disponibile a sinistra */
    display: flex; /* Mette nome e dettagli in colonna */
    flex-direction: column;
    justify-content: center; /* Centra verticalmente se c'è spazio */
    min-height: 34px; /* Altezza minima per allineamento con azioni */
}

.locale-item-info .product-name {
   line-height: 1.2; /* Riduce l'altezza di riga del nome */
}
 .locale-item-info .product-details {
    margin-top: 2px; /* Piccolo spazio tra nome e dettagli */
     line-height: 1.1; /* Riduce l'altezza di riga dei dettagli */
}


.locale-item-actions {
    display: flex; /* Mette select, input e bottone in riga */
    align-items: center; /* Allinea verticalmente */
    gap: 6px; /* Spazio tra gli elementi di azione */
    flex-shrink: 0; /* Impedisce al blocco azioni di restringersi */
}

/* Stili per input e select più piccoli */
.small-input, .small-select {
    padding: 4px 6px !important; /* Forza padding piccolo */
    font-size: 0.9rem !important; /* Forza font piccolo */
    height: auto !important; /* Altezza automatica */
    border-radius: 4px;
    max-width: 65px; /* Larghezza massima per quantità */
}
.small-select {
    max-width: 75px; /* Larghezza massima per UM */
}

/* Stile bottone "+" */
.locale-item-actions button.small {
    padding: 4px 8px !important;
    line-height: 1; /* Centra il "+" verticalmente */
    min-width: 30px; /* Larghezza minima */
}

/* Span per i messaggi vicino al "+" */
.locale-item-msg {
    min-width: 10px;
    display: none; /* Nascosto di default */
    margin-left: 4px;
}



/* --- NUOVA CLASSE PER GESTIONE PRODOTTI --- */
.checkbox-grid {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    background: var(--bg); /* Sfondo leggermente diverso */
}
.checkbox-grid legend {
    font-size: 0.9rem;
    color: var(--muted);
    padding: 0 4px;
    margin-left: -4px;
}
.checkbox-grid label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    cursor: pointer;
}
.checkbox-grid input[type="checkbox"] {
    width: auto;
}

/* Stile per l'input della quantità nella tabella Spostamenti */
.spost-item-qty-input {
    width: 75px; /* Era 60px inline, aumentiamo a 75px (o prova 80px se serve) */
    padding: 2px 4px;
    font-size: 0.85rem;
    border-radius: 4px;
    border: 1px solid var(--border); /* Aggiungiamo un bordo coerente */
    background-color: var(--card); /* Sfondo coerente */
    color: var(--text); /* Colore testo coerente */
    text-align: right; /* Manteniamo allineamento a destra */
    /* Rimuove le freccette standard (opzionale, ma migliora su alcuni browser) */
    -moz-appearance: textfield;
}

/* Stili specifici per browser Webkit (Chrome, Safari) per rimuovere le freccette */
.spost-item-qty-input::-webkit-outer-spin-button,
.spost-item-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- NUOVI STILI PER TABELLA PERMESSI (Opzioni) --- */
#permissions-table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    white-space: nowrap; /* Impedisce al testo di andare a capo */
}
#permissions-table-container th,
#permissions-table-container td {
    border: 1px solid var(--border);
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
}
#permissions-table-container th {
    background-color: #1f2937;
    position: sticky; /* Blocca l'header allo scroll */
    top: 0;
    z-index: 1;
}
/* Stile per la prima colonna (Nome Permesso) */
#permissions-table-container td:first-child {
    font-weight: 600;
    color: var(--text);
    background-color: #111827; /* Sfondo leggermente diverso per la colonna "permesso" */
    position: sticky; /* Blocca la prima colonna allo scroll orizzontale */
    left: 0;
    z-index: 0; /* Inferiore all'header per lo scroll */
}
/* Stile per le righe "sezione" (es. **Pagine (Tabs)**) */
#permissions-table-container tr.section-header td {
    background-color: #374151;
    font-weight: bold;
    color: var(--text);
    font-size: 0.9rem;
    position: sticky; /* Si attacca anche questo */
    left: 0;
}
/* Stile per le celle con checkbox */
#permissions-table-container td {
    text-align: center;
}
/* La prima colonna (Nome Permesso) deve rimanere allineata a sinistra */
#permissions-table-container td:first-child {
    text-align: left;
}
#permissions-table-container input[type="checkbox"] {
    width: auto;
    height: 16px;
    width: 16px;
    cursor: pointer;
    margin: 0;
}

/* Aggiunge una linea rossa fissa al centro del riquadro video */
[id^="overlay-"]::after {
  content: '';
  position: absolute;
  top: 50%; /* Centra verticalmente */
  left: 5%; /* Lascia un 5% di margine ai lati */
  right: 5%;
  height: 2px;
  background: var(--danger); /* Usa il colore rosso --danger che abbiamo già */
  opacity: 0.8;
  border-radius: 2px;
  transform: translateY(-1px); /* Centra la linea da 2px */
  box-shadow: 0 0 4px rgba(0,0,0,0.5); /* Ombra per farla risaltare */
}

/* V8.3 - Ri-nasconde il selettore fotocamera... */
label:has(#camera-select-A),
label:has(#camera-select-B),
label:has(#camera-select-C),
label:has(#camera-select-D) /* <--- AGGIUNGI QUESTA RIGA */ {
    display: none; 
}

/* --- MENU A TENDINA FLOTTANTI (Overlay) --- */
.input-wrapper {
    position: relative; 
}

.suggest-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999; /* Altissimo per coprire tutto */
    
    /* SFONDO SOLIDO (Non trasparente) */
    background-color: #1f2937 !important; /* Grigio scuro solido */
    box-shadow: 0 10px 25px rgba(0,0,0,0.8); /* Ombra forte per staccarlo */
    
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 250px;
    overflow-y: auto;
}

.suggest-overlay .item {
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Linea separatrice sottile */
    background: transparent;
    padding: 10px 12px; /* Un po' più spaziato */
    transition: background 0.2s;
    cursor: pointer;
}

.suggest-overlay .item:hover {
    background-color: #374151; /* Colore hover più chiaro */
}

/* --- COLORI TESTO RICHIESTI --- */

/* 1. Nome Locale / Descrizione Prodotto -> BIANCO */
.suggest-overlay .item div,
.suggest-overlay .item .hl {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 1rem;
}

/* 2. Codice -> BLU (Accent) */
.suggest-overlay .item small {
    color: var(--accent-2) !important; /* Blu brillante */
    font-weight: bold;
    font-size: 0.85rem;
    display: block; /* Mette il codice sotto o separato */
    margin-top: 2px;
}

/* --- FIX MENU FLOTTANTE VUOTO --- */
/* Nasconde il contenitore dei suggerimenti se non c'è niente dentro */
.suggest-overlay:empty {
    display: none;
    border: none;
    box-shadow: none;
}

/* --- RAGGRUPPAMENTO TAB (DROPDOWNS) --- */

/* Contenitore del singolo gruppo (es. Ricerche) */
.tab-group {
    position: relative;
    display: inline-block;
}

/* Bottone "Padre" del gruppo */
.tab-parent {
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
}

/* Freccetta accanto al nome */
.tab-parent::after {
    content: '▼';
    font-size: 0.7em;
    opacity: 0.7;
}

/* Stato attivo del Padre (se una delle sue figlie è selezionata) */
.tab-parent.active-parent {
    color: var(--accent-2); /* Blu */
    background: rgba(59, 130, 246, 0.1);
}

/* Il Menu a tendina nascosto */
.tab-dropdown {
    display: none; /* Nascosto di default */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* Centrato rispetto al padre */
    background-color: #1f2937; /* Sfondo scuro */
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    z-index: 2000;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    min-width: 160px;
    flex-direction: column;
    gap: 2px;
}

/* Mostra il menu quando ha la classe 'show' */
.tab-dropdown.show {
    display: flex;
}

/* I bottoni dentro la tendina */
.tab-dropdown .tab {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.tab-dropdown .tab:hover {
    background-color: #374151;
    color: var(--text);
}

/* Tab figlia attiva */
.tab-dropdown .tab.active {
    background-color: var(--accent-2);
    color: white;
    font-weight: bold;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS (Max Width 600px) - VERSIONE DEFINITIVA V2
   ========================================================================== */
@media (max-width: 600px) {

  /* --- 1. NAVIGAZIONE E MENU A TENDINA --- */
  
  .tabs-bar { 
      overflow: visible !important; 
      flex-wrap: wrap;
      justify-content: center;
      padding-bottom: 0;
      height: auto;
      gap: 4px;
  }

  /* TRUCCO: position relative qui, così i dropdown si riferiscono A TUTTA LA BARRA */
  .mode-switch { 
      display: flex;
      flex-wrap: wrap; 
      justify-content: center;
      width: 100%;
      border: none;
      background: transparent;
      position: relative; /* <--- FONDAMENTALE */
  }

  /* TRUCCO 2: position static qui, così il dropdown NON si riferisce al singolo bottone */
  .tab-group {
      position: static; 
      flex: 1 1 auto; /* Si comporta come un bottone normale */
      display: flex; /* Per allineare il bottone interno */
  }

  .mode-switch .tab, 
  .tab-parent { 
      padding: 8px 4px; /* Padding laterale ridotto per farne stare di più */
      font-size: 0.85rem; 
      flex: 1 1 auto; 
      margin: 2px; 
      text-align: center;
      justify-content: center;
      border: 1px solid var(--border);
      background: #0b1220;
      border-radius: 6px;
      width: 100%; /* Riempie il tab-group */
  }
  
  /* --- MENU A TENDINA "FULL WIDTH" --- */
  /* Ora il menu si apre sotto tutta la riga, non sotto il bottone */
  .tab-dropdown {
      position: absolute;
      left: 0;   /* Incolla a sinistra dello schermo */
      right: 0;  /* Incolla a destra dello schermo */
      width: 100%; /* Larghezza totale */
      transform: none; /* RIMUOVIAMO il vecchio centraggio che causava il taglio */
      top: 100%; /* Subito sotto l'ultima riga di bottoni */
      margin-top: 4px;
      z-index: 99999;
      border-radius: 8px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.8);
      background-color: #1f2937; /* Sfondo scuro solido */
  }


  /* --- 2. FIX LISTE STORICO E LOG --- */
  #storico-list-container .storico-header,
  #log-spese-list-container .storico-header { flex-wrap: wrap; }

  #storico-list-container .header-main-info,
  #log-spese-list-container .header-main-info { width: 100%; margin-bottom: 4px; }

  #storico-list-container .header-secondary-info,
  #log-spese-list-container .header-secondary-info { margin-left: 0; font-size: 0.75rem; }
  
  #storico-list-container .storico-item,
  #log-spese-list-container .storico-item { padding: 8px; }


  /* --- 3. FIX RICERCA LOCALE --- */
  .locale-search-item {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
      margin-bottom: 8px;
  }
  
  .locale-item-actions {
     justify-content: space-between;
     margin-top: 0;
     width: 100%;
  }
  
  .small-input { max-width: 80px; padding: 6px; }
  .small-select { max-width: 90px; padding: 6px; }
  
  /* --- 4. FIX TABELLA SPOSTAMENTI (CARD VIEW) --- */
  .spost-items-container thead { display: none; }

  .spost-items-container tr {
      display: flex;
      flex-wrap: wrap; 
      align-items: center;
      border: 1px solid var(--border);
      background: #131c2e; 
      border-radius: 8px;
      margin-bottom: 10px; 
      padding: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .spost-items-container td {
      border: none !important;
      padding: 2px 4px;
      width: auto !important; 
  }

  .spost-items-container td:nth-child(2) { /* Descrizione */
      order: 1; width: 100% !important; font-weight: 600; font-size: 1rem; color: #fff; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding-bottom: 6px;
  }
  .spost-items-container td:nth-child(1) { /* Codice */
      order: 2; font-family: monospace; color: var(--accent-2); font-size: 0.9rem; margin-right: auto; 
  }
  .spost-items-container td:nth-child(3) { /* Ubicazione */
      order: 3; font-size: 0.8rem; color: var(--muted); margin-right: 8px;
  }
  .spost-items-container td:nth-child(4) { /* UM */
      order: 4; font-size: 0.8rem; color: var(--muted);
  }
  .spost-items-container td:nth-child(5) { /* Quantità */
      order: 5; width: 80px !important; 
  }
  .spost-items-container .spost-item-qty-input {
      width: 100% !important; padding: 8px; font-size: 1.1rem; text-align: center; border: 1px solid var(--accent); 
  }
  .spost-items-container td:nth-child(6) { /* Cancella */
      order: 6; padding-left: 8px;
  }
  .spost-items-container .remove-item-btn { padding: 8px 12px; font-size: 1.2rem; }
  
  /* --- FIX INVENTARIO MOBILE (TABELLA) --- */
  /* Applichiamo lo stesso stile "Card" anche alla tabella inventario */
  #inv-items-list thead { display: none; }
  #inv-items-list tr {
      display: flex; flex-wrap: wrap; align-items: center;
      border: 1px solid var(--border); background: #131c2e; border-radius: 8px;
      margin-bottom: 10px; padding: 10px;
  }
  #inv-items-list td { border: none !important; width: auto !important; }
  
  /* Descrizione */
  #inv-items-list td:nth-child(2) { 
      order: 1; width: 100% !important; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1) !important; margin-bottom: 6px; 
  }
  /* Codice */
  #inv-items-list td:nth-child(1) { order: 2; margin-right: 10px; }
  /* UM */
  #inv-items-list td:nth-child(3) { order: 3; margin-right: auto; color: var(--muted); }
  /* Dettagli (Note) - Va a capo sotto codice/um */
  #inv-items-list td:nth-child(4) { order: 6; width: 100% !important; margin-top: 6px; font-style: italic; color: #aaa; font-size: 0.85rem; }
  /* Qty */
  #inv-items-list td:nth-child(5) { order: 4; }
  #inv-items-list input[type="number"] { width: 70px !important; padding: 8px; font-size: 1.1rem; text-align: center; }
  /* Cancella */
  #inv-items-list td:nth-child(6) { order: 5; padding-left: 10px; }
}

/* --- PICKING: STEPPER QUANTITÀ --- */
.stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--card);
    height: 44px; /* Altezza comoda per il dito */
}

.stepper button {
    width: 44px;
    height: 100%;
    border: none;
    background: #1f2937;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper button:active {
    background: #374151;
}

.stepper input {
    flex-grow: 1;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    background: transparent;
    color: var(--text);
    appearance: textfield; /* Nasconde le freccette native */
    -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* --- PICKING: STICKY FOOTER (Barra fissa in basso) --- */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1f2937;
    border-top: 1px solid var(--accent-2); /* Linea blu sopra */
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.5);
}

/* Spazio extra in fondo alla pagina per non coprire l'ultimo prodotto */
#picking-items-list {
    padding-bottom: 80px !important; 
}


/* --- FEEDBACK VISIVO (Animazioni) --- */
@keyframes flash-green {
    0% { box-shadow: inset 0 0 0 4px var(--accent); border-color: var(--accent); }
    100% { box-shadow: none; border-color: var(--border); }
}
@keyframes flash-red {
    0% { box-shadow: inset 0 0 0 4px var(--danger); border-color: var(--danger); }
    100% { box-shadow: none; border-color: var(--border); }
}

.flash-success {
    animation: flash-green 0.5s ease-out;
}
.flash-error {
    animation: flash-red 0.5s ease-out;
}

/* Stile Input Tabella Picking */
.picking-qty-input {
    width: 100%; 
    max-width: 80px;
    padding: 6px;
    font-size: 1rem;
    font-weight: bold;
    text-align: right;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    -moz-appearance: textfield;
}
.picking-qty-input::-webkit-outer-spin-button,
.picking-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ============================================
   MODALITÀ PICKING IMMERSIVA (FULLSCREEN)
   ============================================ */

/* Quando il body ha la classe .picking-mode: */

/* 1. Nascondi Header (Logo e Utente) */
body.picking-mode header.topbar {
    display: none !important;
}

/* 2. Nascondi Barra dei Tab (Menu principale) */
body.picking-mode div.tabs-bar {
    display: none !important;
}

/* 3. Riduci i margini del contenitore principale per guadagnare spazio in alto */
body.picking-mode main {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 4. Stile per la riga Input ottimizzata (Qtà + UM) */
.picking-input-row {
    display: flex; 
    gap: 8px; 
    align-items: flex-end; /* Allinea al fondo */
}

/* Parte sinistra: Quantità (Si adatta allo spazio rimasto) */
.picking-qty-wrapper {
    flex-grow: 1; 
}

/* Parte destra: Unità di Misura (Larghezza fissa più ampia) */
.picking-um-wrapper {
    flex: 0 0 100px; /* Larghezza fissa 100px per facilitare il tocco */
    min-width: 100px;
}

/* ============================================================
   MODALITÀ PICKING: NASCONDI LOGO E FOOTER (Opzione A)
   ============================================================ */

/* 1. Nasconde l'immagine del logo (quella fuori dal main) */
body.picking-mode > img {
    display: none !important;
}

/* 2. Nasconde i paragrafi dei crediti (Powered by, Versione, ecc.) */
body.picking-mode > p {
    display: none !important;
}

/* 3. Assicura che la barra "SALVA SPESA" sia incollata in fondo */
body.picking-mode .sticky-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    /* Un po' di padding extra sotto per i telefoni moderni (iPhone/Android gestures) */
    padding-bottom: 15px; 
}

/* 4. Aggiunge spazio sotto la lista prodotti affinché l'ultimo non finisca dietro la barra */
body.picking-mode #picking-items-list {
    padding-bottom: 100px !important;
}

/* --- GESTIONE QXC: NUOVI FILTRI CATEGORIA --- */

.qxc-cat-filters {
    display: flex;
    flex-wrap: wrap; /* Va a capo su mobile */
    gap: 8px;
    margin-bottom: 12px;
}

.qxc-cat-btn {
    flex: 1;
    min-width: 60px; /* Larghezza minima per il dito */
    padding: 10px 0;
    background: #1f2937;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    transition: all 0.2s;
}

.qxc-cat-btn:hover {
    background: #374151;
    color: #fff;
}

.qxc-cat-btn.active {
    background: var(--accent-2); /* Blu */
    color: white;
    border-color: var(--accent-2);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* FIX FONT TABELLA: Codice uguale a Descrizione */
#qxc-list-container table td {
    font-family: system-ui, -apple-system, sans-serif !important; /* Toglie il monospace */
    font-size: 0.95rem;
}

/* ============================================================
   NUOVO STILE MENU PRINCIPALE (Stile "Bottoni QxC")
   ============================================================ */

/* 1. Rimuove lo stile "contenitore unito" della barra */
.mode-switch {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 6px; /* Spazio tra i bottoni */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* 2. Stile Base dei Bottoni (Tab e Genitori) */
.mode-switch .tab,
.tab-parent {
    background-color: #1f2937; /* Sfondo Grigio Scuro */
    border: 1px solid var(--border); /* Bordo sottile */
    color: var(--muted); /* Testo Grigio */
    border-radius: 6px; /* Angoli arrotondati */
    padding: 8px 14px; /* Spaziatura interna comoda */
    font-weight: 700; /* Grassetto */
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Animazione fluida */
    margin: 0 !important; /* Rimuove margini vecchi */
    
    /* Flex per centrare testo e freccette */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px; /* Altezza minima per il dito */
}

/* 3. Effetto Hover (Passaggio del mouse) */
.mode-switch .tab:hover,
.tab-parent:hover {
    background-color: #374151; /* Grigio più chiaro */
    color: #fff; /* Testo Bianco */
    border-color: #4b5563;
}

/* 4. STATO ATTIVO (BLU ACCESO + GLOW) */
.mode-switch .tab.active,
.tab-parent.active-parent {
    background-color: var(--accent-2) !important; /* Blu */
    color: #ffffff !important; /* Bianco */
    border-color: var(--accent-2) !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); /* Alone Blu luminoso */
    transform: translateY(-1px); /* Leggero sollevamento */
}

/* 5. Correzione Menu a Tendina (Dropdown) */
/* I bottoni dentro la tendina devono rimanere semplici o adattarsi */
.tab-dropdown {
    background-color: #1f2937;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    padding: 6px;
    margin-top: 8px; /* Distanza dal bottone padre */
}

/* Stile bottoni dentro la tendina */
.tab-dropdown .tab {
    background: transparent; /* Sfondo trasparente default */
    border: none;
    color: #e5e7eb;
    width: 100%; /* Piena larghezza */
    justify-content: flex-start; /* Allineati a sinistra */
    margin-bottom: 2px !important;
}

.tab-dropdown .tab:hover {
    background-color: #374151;
}

.tab-dropdown .tab.active {
    background-color: var(--accent-2) !important; /* Blu anche qui */
    color: white !important;
    box-shadow: none; /* Niente glow dentro la tendina per pulizia */
}

/* 6. Mobile Optimization */
@media (max-width: 600px) {
    .mode-switch .tab,
    .tab-parent {
        flex: 1 1 auto; /* I bottoni si allargano per riempire la riga */
        font-size: 0.85rem; /* Testo leggermente più piccolo su mobile */
        padding: 8px 6px;
    }
}

/* --- MODALE COLLI MISTI (POPUP) --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85); /* Sfondo scuro */
    z-index: 10000; /* Sopra a tutto */
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
}
.modal-box {
    background: #1f2937;
    border: 1px solid var(--accent-2);
    border-radius: 12px;
    padding: 20px;
    width: 90%; max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}
.modal-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0;
}
.btn-misto {
    background: #374151; border: 1px solid var(--border);
    color: #fff; font-size: 1.2rem; font-weight: bold;
    padding: 15px 0; border-radius: 8px; cursor: pointer;
}
.btn-misto:active, .btn-misto.selected {
    background: var(--accent-2); border-color: var(--accent-2);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
.btn-manual-misto {
    grid-column: span 4; /* Occupa tutta la riga sotto */
    background: #111827; color: var(--accent-2); border: 1px dashed var(--accent-2);
    font-size: 1rem; padding: 10px 0;
}

/* --- IMPORTAZIONE: DETTAGLI INTERATTIVI --- */
.import-stat-card {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    user-select: none; /* Evita che si selezioni il testo cliccando */
}
.import-stat-card:hover {
    filter: brightness(1.1); /* Leggermente più luminoso */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.import-stat-card:active {
    transform: scale(0.98); /* Effetto click */
}

/* Tabella Dettagli Import */
.import-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 10px;
    background: #131c2e;
}
.import-preview-table th {
    text-align: left;
    padding: 6px;
    background: #1f2937;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
}
.import-preview-table td {
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Stile Riquadro Obsoleti (Rosso) */
.import-stat-card.obsolete {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
}
.import-stat-card.obsolete strong {
    color: var(--danger);
}

/* Azioni nella tabella anteprima */
.preview-actions {
    display: flex; gap: 8px; justify-content: center;
}
.preview-actions button {
    padding: 4px 8px; font-size: 0.8rem;
}

/* Switch "Prodotto Attivo" in Modifica */
.status-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border: 1px solid var(--border); border-radius: 6px;
    background: #1f2937; margin-top: 8px; cursor: pointer;
}
.status-toggle input { width: 20px; height: 20px; cursor: pointer; }
.status-active { color: var(--accent); font-weight: bold; }
.status-paused { color: var(--danger); font-weight: bold; }

/* FORZA IL COLORE ROSSO PER GLI OBSOLETI */
#btn-preview-obsolete {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid #ef4444 !important;
}
#btn-preview-obsolete strong {
    color: #ef4444 !important; /* Rosso Acceso */
}
#btn-preview-obsolete .small {
    color: #fca5a5 !important; /* Rosso Chiaro per il testo */
}

/* Stile Bottoni Filtro Dashboard */
.filter-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}
.filter-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text);
}
.filter-btn.active {
    background: var(--accent-2); /* Blu */
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- STILE INPUT MANUALE PICKING GUIDATO --- */
#mod-picked-input {
    text-align: center !important; /* Centra il numero dentro la casella */
    
    /* --- NUOVE RIGHE PER CENTRARE LA CASELLA --- */
    margin: 0 auto !important;     /* Spinge la casella al centro orizzontalmente */
    display: block !important;     /* Assicura che i margini funzionino correttamente */
    /* ------------------------------------------- */

    -moz-appearance: textfield;    /* Nasconde freccette su Firefox */
    caret-color: #fff;             /* Colore cursore */
}

/* Nasconde freccette su Chrome, Safari, Edge, Opera */
#mod-picked-input::-webkit-outer-spin-button,
#mod-picked-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* [styles.css] - Aggiungi in fondo */

/* Stile Compatto Lista Locali */
#gloc-list-container {
    gap: 6px !important; /* Meno spazio tra le righe */
}

/* Targetta i div generati da JS dentro la lista */
#gloc-list-container > div {
    padding: 8px 12px !important; /* Card più sottili */
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem; /* Testo leggermente più compatto */
}

/* Bottone Pausa/Attiva compatto */
#gloc-list-container button {
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* Rende tutte le tabelle dentro i contenitori log/list scorrevoli su mobile */
#pg-main-list, #pkl-main-list, #log-spese-list-container, #storico-list-container {
    overflow-x: auto;
    display: block;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

table.compact {
    min-width: 500px; /* Forza una larghezza minima per mantenere la leggibilità in scroll */
}

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center;
    transition: opacity 0.3s;
}
.modal-overlay.hidden { display: none !important; }

/* --- POPUP PRIVACY & MODAL --- */

/* Contenitore principale a tutto schermo */
#privacy-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Sfondo scurito */
    backdrop-filter: blur(5px); /* Effetto sfocato moderno */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Sopra a ogni elemento dell'app */
    padding: 20px;
}

/* Card centrale del popup */
.privacy-card {
    background-color: #1a202c; /* Colore card coerente con app.js */
    border: 1px solid var(--accent, #3b82f6);
    border-radius: 12px;
    width: 100%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn 0.3s ease-out;
}

/* Header del popup */
.privacy-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.privacy-header h2 {
    margin: 0;
    color: var(--accent, #3b82f6);
    font-size: 1.5rem;
}

/* Area del testo scrollabile */
.privacy-body {
    padding: 20px 24px;
    max-height: 350px;
    overflow-y: auto;
    color: #cbd5e0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Styling della scrollbar interna (stile Dark) */
.privacy-body::-webkit-scrollbar {
    width: 6px;
}
.privacy-body::-webkit-scrollbar-track {
    background: #000;
}
.privacy-body::-webkit-scrollbar-thumb {
    background: var(--accent, #3b82f6);
    border-radius: 10px;
}

.privacy-body h3 {
    color: #fff;
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem 0;
}

/* Footer con il bottone */
.privacy-footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#btn-accept-privacy {
    width: 100%;
    padding: 14px;
    background-color: var(--accent, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s;
}

#btn-accept-privacy:hover {
    filter: brightness(1.1);
}

#btn-accept-privacy:active {
    transform: scale(0.98);
}

/* Animazione di entrata */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Classe helper per nascondere */
.hidden {
    display: none !important;
}

.app-footer {
    padding: 20px;
    text-align: center;
    background-color: #0f172a; /* Coerente con il manifest */
    color: #64748b; /* Grigio tenue per non distrarre */
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 40px;
}

.version-tag {
    font-weight: bold;
    color: var(--accent, #3b82f6);
    margin-top: 5px;
}

.legal-notice {
    font-style: italic;
    font-size: 0.7rem;
    opacity: 0.6;
}

/* --- LOGIN SCREEN STYLE --- */
#login-card {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #0b1220; /* Sfondo profondo */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s;
    opacity: 1;
    visibility: visible;
}

.login-container {
    background:#1e293b;
    padding: 40px;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.login-brand {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo {
    width: 140px;
    height: 180px;
    margin-bottom: 15px;
    border-radius: 12px;
}

.login-brand h1 {
    color: #f8fafc;
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 1px;
}

.app-subtitle {
    color: #3b82f6; /* Colore accent */
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: bold;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: white;
    outline: none;
    transition: border-color 0.3s;
}

.input-group input:focus {
    border-color: #3b82f6;
}

#btn-login {
    width: 100%;
    padding: 14px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s;
}

#btn-login:active { transform: scale(0.98); }

.error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 15px;
}

.login-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
}

/* Classe per l'effetto scomparsa */
#login-card.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Overlay con sfocatura sfondo */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.8); /* Colore profondo dal manifest */
    backdrop-filter: blur(8px); /* Effetto vetro satinato */
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}

.modal-content {
    background: #1e293b; /* Colore della tua login card */
    padding: 30px;
    border-radius: 20px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay:not(.hidden) .modal-content {
    transform: scale(1);
}

/* Stile dei Toast */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10001;
}

.toast {
    background: #3b82f6; /* Accent color dal manifest */
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.2);
    animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* [styles.css] - Splash Screen Statico Professionale */
#splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #0f172a; /* Sfondo scuro del sistema */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: opacity 0.5s ease;
}

.splash-content { text-align: center; width: 300px; }

/* Logo Cliente: Fermo e centrato */
.splash-logo-client {
    width: 160px;
    height: auto;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.splash-software-brand {
    margin-bottom: 40px;
    opacity: 0.8;
}

.loader-bar {
    width: 100%; height: 4px;
    background: #1e293b;
    border-radius: 10px;
    overflow: hidden;
}

.loader-progress {
    width: 40%; height: 100%;
    background: var(--accent-2);
    border-radius: 10px;
    animation: loader-move 1.5s infinite ease-in-out;
}

@keyframes loader-move {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* [styles.css] - Nasconde il footer se l'app è nascosta */
#app.hidden ~ .app-footer {
    display: none !important;
}