/*
 * CSS Base - Dark Theme moderno ispirato al template
 * Colori: Grigio #6b7280, Cyan #22d3ee
 */

/* Palette del PORTALE TECNICO, misurata sui pixel dello screenshot del 18-09
   (portaletecnico.it/clienti) e non stimata a occhio.
   ⚠️ E' una palette NEUTRA: grigi e neri, nessuna dominante. Un primo giro
   aveva portato qui la palette "ciano" di NAISAT, che vira al verde-azzurro:
   sbagliata, perche' il riferimento che conta e' il Portale.
   ⚠️ `--accent` e' il nome che usa NAISAT, `--primary` quello storico di
   Jarvis: si tengono ALLINEATI invece di sostituirne uno, perche' `--primary`
   e' usato in decine di regole sparse (dashboard, anagrafica, impostazioni) e
   rinominarlo qui le spegnerebbe tutte in silenzio. */
:root {
    --bg-primary: #000000;
    --bg-secondary: #0e0e0e;
    --bg-card: #1b1b1b;
    --border-color: #232323;
    --text-primary: #ffffff;
    --text-secondary: #a5a5a5;
    /* Il ciano resta il colore dei COMANDI (pulsanti, link, stati attivi dei
       controlli): nel Portale la cromia sta li', non negli sfondi. */
    --accent: #22d3ee;
    --primary: #22d3ee;
    --text-faint: #6b6b6b;
    --transition: 0.2s ease;
    /* Voce di menu: grigi neutri, misurati sulla voce "Clienti" attiva.
       Non derivano da `--accent` di proposito -- la voce attiva dice dove sei
       e non deve competere col colore dei comandi. */
    --sidebar-hover: #1c1c1c;
    --sidebar-active: #272727;
    --sidebar-active-bar: #d4d4d4;
    /* Campi e tendine, misurati sulla tendina "Stato" del Portale:
       interno del campo, bordo quando ha il fuoco (chiaro, non colorato),
       fondo dell'elenco aperto e voce sotto il mouse. */
    --campo-bg: #141414;
    --campo-bordo-focus: #b3b2b3;
    --menu-bg: #1c1c1c;
    --menu-hover: #2d2d2d;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #22d3ee;
    /* Misurate sugli screenshot del Portale Tecnico: i bordi destri della sua
       sidebar cadono esattamente a 240px da aperta e a 55px da chiusa. */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 55px;
    --navbar-height: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'JARVIS', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
}

/* Navbar */
.navbar {
    height: var(--navbar-height);
    /* Le variabili al posto dei due colori cablati (#1a1d29/#0f1117): erano
       la vecchia palette scritta a mano, e sarebbero rimasti bluastri mentre
       tutto il resto passava al ciano. */
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 0 1.5rem;
    z-index: 1000;
}

/* Proporzioni del marchio come sul Portale Tecnico e su NAISAT: logo alto
   22px, testo a 17px in grassetto, 10px fra i due. Verificate due volte --
   misurate sui pixel dello screenshot (cap-height 12px -> ~17px di corpo) e
   ritrovate scritte in `NAISAT/src/styles/index.css`.
   ⚠️ Il gap e' 10px anche se fra logo e testo se ne MISURANO 20: la
   differenza sono i margini interni del viewBox dell'SVG. Prendere il valore
   visivo avrebbe raddoppiato lo spazio.
   La spaziatura fra le lettere resta a zero: a 17px separarle di 2px allarga
   la parola oltre il logo che la precede.
   Jarvis, NAISAT e il Portale condividono il font E il file del logo (md5
   identico per entrambi): qui non si e' copiato nulla, si e' solo allineata
   la misura. */
.navbar-brand {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    gap: 10px;
}

.navbar-brand img {
    height: 22px;
    width: auto;
}

/* Sidebar */
/* La sidebar sta STRETTA e si apre al passaggio del mouse. Non c'e' piu' un
   pulsante di collasso: lo stato non si comanda e non si ricorda, quindi la
   larghezza di riposo e' quella collassata e `.collapsed` resta fissa nel
   markup solo perche' le regole delle voci ci si appoggiano.
   ⚠️ Il Portale Tecnico tiene la sua sidebar SEMPRE larga; qui l'apertura al
   passaggio del mouse e' una scelta di Marco, non una differenza sfuggita. */
.sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: var(--sidebar-collapsed-width);
    height: calc(100vh - var(--navbar-height));
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    overflow-x: hidden;
    /* ⚠️ NIENTE ritardo: un primo tentativo ne aveva messo uno prima
       dell'apertura, ma un menu che si muove quando il mouse e' gia' altrove
       e' peggio di uno che scatta subito. Si rallenta il MOVIMENTO invece:
       0,45s, abbastanza perche' l'occhio lo segua e non sembri uno scatto. */
    transition: width 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
    z-index: 999;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    overflow-y: hidden;
}

/* Apertura al passaggio del mouse, e per chi naviga da tastiera.
   ⚠️ `:has(:focus-visible)` e NON `:focus-within`, che teneva il menu aperto
   dopo il click: la navigazione e' SPA, la pagina non si ricarica, quindi la
   voce cliccata conserva il focus e la sidebar restava larga anche a mouse
   lontano -- serviva un click altrove per chiuderla. Difetto segnalato da
   Marco il 18-09 e riprodotto nel DOM: `hover: false`, `focus_within: true`,
   larghezza 240.
   `:focus-visible` distingue i due casi: il browser NON lo assegna a un click
   col mouse (misurato: `focus_visible: false` dopo il click) ma lo assegna
   all'arrivo col Tab. Cosi' il menu si chiude quando esci col mouse e resta
   aperto per chi lo sta percorrendo da tastiera.
   Niente ombra: il contenuto si sposta a destra invece di passare sotto la
   colonna (vedi `.main-content`), quindi non c'e' nulla da staccare. */
.sidebar:hover,
.sidebar:has(:focus-visible) {
    width: var(--sidebar-width);
    overflow-y: auto;
}

/* Gli stili di `.sidebar-header` e `.sidebar-toggle` sono stati RIMOSSI con
   l'intestazione "Menu" e il suo pulsante di collasso (18-09): la sidebar si
   apre al passaggio del mouse e quello stato non si comanda piu' a mano. */

.sidebar-menu {
    list-style: none;
    padding: 1rem 0;
}

/* Voce di menu come sul Portale Tecnico, MISURATA sui pixel dello screenshot
   del 18-09 e non stimata a occhio:
     riga alta 40px, da x=4 a x=235 su una sidebar larga 240 -> margine di 4px
       a sinistra e ~5px a destra, non a tutta larghezza;
     angoli arrotondati su ENTRAMBI i lati, raggio ~8px (il profilo passa da
       x=10 a x=4 in nove righe di pixel);
     sfondo attivo #272727, barra sinistra #d4d4d4 di 3x22px DENTRO la pillola.
   ⚠️ Un primo giro l'aveva fatta squadrata e a tutta larghezza: il `#272727`
   che si legge a x=240 e' il bordo verticale della sidebar, un elemento
   diverso, e mi aveva fatto credere che la riga arrivasse fino in fondo. */
.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0.75rem;
    margin: 0 5px 0 4px;
    height: 40px;
    border-radius: 8px;
    /* 14px DICHIARATI, come in NAISAT (`.sidebar-menu li a`). Prima non c'era
       nessuna dimensione qui e le voci ereditavano i 16px del body: piu'
       grandi del resto della famiglia, e cambiavano se cambiava il body.
       ⚠️ Il valore viene da NAISAT e non da una misura sullo screenshot del
       Portale: quello disponibile ha il menu CHIUSO, senza etichette, e
       l'unico con le etichette era a una risoluzione diversa -- una stima di
       corpo presa di li' sarebbe stata riscalata, come gia' successo col
       confronto del marchio. */
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition), background var(--transition);
    position: relative;
    white-space: nowrap;
}

/* A menu stretto: pillola da 4px a 51px su una colonna di 55 e icona CENTRATA,
   come sullo screenshot del Portale (misurato: le icone cadono a x=27.5, cioe'
   esattamente meta' dei 55px).

   ⚠️ IL CENTRAGGIO NON PASSA PIU' DA `justify-content`, ed e' la correzione di
   un difetto che Marco ha filmato il 18-09. `justify-content` e' una
   proprieta' DISCRETA: non ha valori intermedi, quindi in chiusura l'icona
   restava appoggiata a sinistra per tutta l'animazione e poi SCATTAVA al
   centro. Misurato sui fotogrammi del video: per tutta la chiusura il centro
   dell'icona resta ~5px a sinistra del centro colonna, e nell'ultimo
   fotogramma salta da 21,5 a 26,5.
   Rinviarlo a fine animazione non bastava: il ritardo parte quando il mouse
   ESCE, la larghezza inizia a cambiare un istante dopo, e lo scarto fra i due
   lasciava comunque un fotogramma con l'icona fuori asse.

   La soluzione toglie il problema invece di spostarlo: la pillola parte a 4px
   dal bordo (il suo margine) e l'icona e' larga 28, quindi su una colonna di
   55 il padding che la centra e' 55/2 - 28/2 - 4 = 9,5px.
   ⚠️ I 4px del margine vanno sottratti: senza, il conto dava 13px e l'icona
   restava 3,5px a destra del centro (misurato nel browser).
   `padding` e' una proprieta' CONTINUA: si anima insieme alla larghezza, e
   l'icona scivola al centro invece di saltarci. Niente `justify-content`,
   niente ritardi, nessun fotogramma storto. */
.sidebar.collapsed:not(:hover):not(:has(:focus-visible)) .sidebar-menu li a {
    margin: 0 4px;
    padding: 0 0 0 9.5px;
    gap: 0;
    /* Il padding accompagna la larghezza della colonna, con la stessa curva e
       la stessa durata: i due movimenti sono lo stesso movimento. */
    transition: color var(--transition), background var(--transition),
                padding 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.sidebar-menu li a:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
    text-decoration: none;
}

/* ⚠️ Grigio neutro, NON il colore d'accento: la voce attiva dice dove sei, e
   sul Portale Tecnico non compete con gli elementi che si possono premere.
   Il ciano resta sui comandi. */
.sidebar-menu li a.active {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--sidebar-active);
    /* Ritaglia la barra sugli angoli tondi della pillola. */
    overflow: hidden;
    transition: none !important; /* aggiornamento immediato, come prima */
}

/* La barra chiara a sinistra: 3px, centrata, 22px di altezza -- poco piu' di
   meta' riga. Sta DENTRO la pillola, appoggiata al suo bordo sinistro, e gli
   angoli tondi la ritagliano (`overflow: hidden` sul link). */
.sidebar-menu li a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    width: 3px;
    background: var(--sidebar-active-bar);
}

/* ⚠️ Niente `margin-right`: la distanza dall'etichetta la da' ora il `gap` del
   link. Tenendo entrambi lo spazio si sommerebbe (12px + 10px) e le icone si
   disallineerebbero rispetto a NAISAT. Larghezza 28px come li'. */
.sidebar-menu li a i {
    width: 28px;
    font-size: 1.15rem;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
    transition: color var(--transition);
}

.sidebar-menu li a span {
    /* La dissolvenza dura meno dell'apertura (0,45s) e finisce prima: cosi' a
       menu chiuso non resta un'etichetta mezza visibile accanto all'icona. */
    transition: opacity 0.25s ease;
}

/* ⚠️ `:not(:hover)` e `:not(:has(:focus-visible))`: `.collapsed` ora e' SEMPRE nel
   markup, quindi la sola `.collapsed` terrebbe le etichette nascoste anche a
   menu aperto e la colonna larga mostrerebbe solo icone.
   ⚠️ NON `display: none`, che e' ISTANTANEO e non si anima: uscendo col mouse
   le etichette sparivano di colpo mentre la colonna impiegava ancora mezzo
   secondo a restringersi, e per quel mezzo secondo il menu restava largo con
   le sole icone -- il difetto segnalato da Marco il 18-09.
   `opacity` sfuma insieme al movimento; `width: 0` e `overflow: hidden`
   tolgono comunque l'etichetta dal flusso, cosi' l'icona non viene spinta
   fuori asse (che era la ragione per cui si era scelto `display: none`). */
.sidebar.collapsed:not(:hover):not(:has(:focus-visible)) .sidebar-menu li a span {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.menu-section {
    padding: 1.5rem 1.5rem 0.5rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.sidebar.collapsed:not(:hover):not(:has(:focus-visible)) .menu-section {
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
}

/* Sidebar Footer */
.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    text-align: center;
    /* Come su NAISAT: la riga del copyright e' un'informazione di servizio e
       non deve competere con le voci del menu. */
    color: var(--text-faint);
    letter-spacing: 0.3px;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.sidebar.collapsed:not(:hover):not(:has(:focus-visible)) .sidebar-footer {
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 0;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-collapsed-width);
    margin-top: var(--navbar-height);
    min-height: calc(100vh - var(--navbar-height));
    padding: 2rem;
    /* Stessa curva e stessa durata della sidebar: se i tempi divergessero il
       contenuto rincorrerebbe il menu invece di muoversi con lui. */
    transition: margin-left 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
}

/* ⚠️ Il contenuto SI SPOSTA quando il menu si apre (richiesta di Marco,
   18-09): la sidebar spinge la pagina invece di scorrerle sopra.
   Il selettore `~` funziona senza JS perche' `#main-content` e' un fratello
   SUCCESSIVO di `#sidebar` nel markup di base.html. Se un domani lo si
   spostasse fuori da li', questa regola smetterebbe di valere in silenzio:
   il contenuto resterebbe fermo, senza errori. */
/* ⚠️ `#main-content` e non `.main-content`: la dissolvenza della navigazione
   SPA e' dichiarata su un selettore per ID, piu' specifico di qualunque
   classe, e vincerebbe. Alla pari di specificita' i due si muovono insieme. */
.sidebar:hover ~ #main-content,
.sidebar:has(:focus-visible) ~ #main-content {
    margin-left: var(--sidebar-width);
}

/* Classe legacy: la aggiungeva il pulsante di collasso, che non c'e' piu'. */
.main-content.expanded {
    margin-left: var(--sidebar-collapsed-width);
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.card-header {
    background: rgba(107, 114, 128, 0.1);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

.card-body {
    padding: 1.5rem;
}

/* Tables */
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: rgba(107, 114, 128, 0.1);
}

.table thead th {
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table thead th {
    padding: 0.5rem 0.75rem;
}

.table tbody tr {
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background: rgba(107, 114, 128, 0.1);
}

/* Button groups */
.btn-group .btn {
    margin-left: 0.25rem;
}

/* Search input groups */
.input-group-text {
    border-right: none;
}

.input-group .form-control.border-start-0 {
    border-left: none;
}

/* ⚠️ Qui c'era `.input-group .form-control:focus { border-color: <scuro> }`,
   che SPEGNEVA il bordo del campo di ricerca quando prendeva il fuoco.
   Aveva senso finche' la lente stava in un riquadro suo: accendere il solo
   campo avrebbe illuminato meta' controllo. Ora i due sono un pezzo unico e
   si accendono INSIEME (vedi `.input-group:focus-within` piu' sotto), quindi
   questa regola faceva solo il danno che voleva evitare.
   Non bastava scrivere la regola nuova dopo: con tre classi questa era piu'
   specifica e vinceva comunque -- misurato, il campo restava a rgb(35,35,35)
   mentre la lente passava al chiaro. */

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease;
}

/* Primary: grigio scuro a riposo, più chiaro su hover */
.btn-primary {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
    border: none;
    color: #ffffff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(107, 114, 128, 0.4);
    color: #ffffff;
}

/* Success: verde scuro a riposo, più chiaro su hover */
.btn-success {
    background: #059669;
    border: none;
    color: #ffffff;
}

.btn-success:hover {
    background: var(--success);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.4);
    color: #ffffff;
}

/* Danger: rosso scuro a riposo, più chiaro su hover */
.btn-danger {
    background: #dc2626;
    border: none;
    color: #ffffff;
}

.btn-danger:hover {
    background: var(--danger);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.4);
    color: #ffffff;
}

/* Warning: arancione scuro a riposo, più chiaro su hover */
.btn-warning {
    background: #d97706;
    border: none;
    color: #ffffff;
}

.btn-warning:hover {
    background: var(--warning);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
    color: #ffffff;
}

/* Info: cyan scuro a riposo, più chiaro su hover */
.btn-info {
    background: #0891b2;
    border: none;
    color: #ffffff;
}

.btn-info:hover {
    background: var(--info);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(34, 211, 238, 0.4);
    color: #000000;
}

/* Secondary: grigio scuro a riposo, più chiaro su hover */
.btn-secondary {
    background: #374151;
    border: none;
    color: #ffffff;
}

.btn-secondary:hover {
    background: #6b7280;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(107, 114, 128, 0.4);
    color: #ffffff;
}

/* Badges */
.badge {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
}

/* Toast */
.toast {
    backdrop-filter: blur(10px);
}

/* User Dropdown - stile sidebar */
.user-dropdown {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0;
}

/* Elenco a tendina come sul Portale: fondo #1c1c1c, voce sotto il mouse
   #2d2d2d, angoli tondi. Vale per OGNI `.dropdown-menu`, non solo per quello
   dell'utente: le tendine di Bootstrap nascono tutte da questa classe, quindi
   basta vestirla una volta.
   ⚠️ Niente barra a sinistra e niente colore d'accento sulla voce: qui non c'e'
   una posizione corrente da segnare -- sono comandi, e si distinguono col solo
   sfondo, come li'. */
.dropdown-menu {
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.35rem;
}

.dropdown-item {
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 14px;
    transition: background var(--transition), color var(--transition);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--menu-hover);
    color: var(--text-primary);
}

.dropdown-divider {
    border-top-color: var(--border-color);
}

.user-dropdown .dropdown-item i {
    width: 20px;
    margin-right: 8px;
    text-align: center;
}

/* Forms — campi e tendine come sul Portale Tecnico (screenshot del 18-09 con
   la tendina "Stato" aperta). Valori MISURATI sui pixel:
     campo alto 32px, interno #141414, bordo 1px #2c2c2c, raggio 8px;
     testo del segnaposto grigio; chevron a ~10px dal bordo destro. */
.form-control,
.form-select {
    background: var(--campo-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0 0.75rem;
    height: 32px;
    font-size: 14px;
}

/* ⚠️ Bootstrap definisce `-sm` DOPO `.form-select` e vince: senza questa
   riga le tendine marcate `form-select-sm` restavano alte 36px e col testo a
   12.8px, cioe' piu' alte del campo di ricerca che sta loro accanto sulla
   stessa barra (misurato in campo il 18-09). La variante piccola non serve
   piu': l'altezza del Portale e' gia' quella. */
.form-control-sm,
.form-select-sm {
    height: 32px;
    font-size: 14px;
    border-radius: 8px;
}

/* I campi a piu' righe non possono avere un'altezza fissa. */
textarea.form-control {
    height: auto;
    padding: 0.5rem 0.75rem;
}

/* Campo di ricerca: la lente deve stare DENTRO al campo, non in un riquadro
   suo. ⚠️ Segnalato da Marco il 18-09: "togli il bordo bianco intorno
   all'icona lente". Bootstrap costruisce l'`input-group` come due caselle
   affiancate, ognuna col proprio bordo e sfondo, e si vedeva la cucitura in
   mezzo.
   Qui l'icona perde bordo destro e angoli, il campo accanto perde il bordo
   sinistro: i due tornano a leggersi come un solo controllo. */
/* ⚠️ `.input-group-sm > ...` va nominato esplicitamente: Bootstrap lo definisce
   con un raggio piu' piccolo e una specificita' maggiore della sola
   `.input-group-text`, quindi vinceva e lasciava l'angolo sinistro a 4px
   mentre quello destro era a 8 (misurato in campo). */
.input-group-text,
.input-group-sm > .input-group-text {
    background: var(--campo-bg);
    border: 1px solid var(--border-color);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    color: var(--text-secondary);
    height: 32px;
    padding: 0 0.5rem 0 0.75rem;
}

.input-group > .form-control,
.input-group-sm > .form-control {
    border-left: 0;
    border-radius: 0 8px 8px 0;
    padding-left: 0.5rem;
}


.form-control::placeholder {
    color: var(--text-faint);
}

/* ⚠️ La freccia del `<select>` va disegnata a mano: Bootstrap ne mette una
   propria come immagine di sfondo, in un grigio che sul nero del Portale non
   si distingue. `appearance: none` toglie anche quella nativa del browser,
   altrimenti si vedrebbero due frecce.
   E' un SVG inline (chevron, non triangolo pieno) nello stesso grigio del
   testo: il `%23` e' il cancelletto del colore, che in un data URI va
   codificato. */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a5a5a5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    /* Spazio a destra per la freccia, altrimenti il testo ci finisce sotto. */
    padding-right: 2rem;
}

/* ⚠️ Ripiego per i `<select>` che restassero nativi (JS non caricato): il
   sistema disegna l'elenco e qui si arriva solo a sfondo e testo. Le tendine
   vere sono quelle qui sotto, costruite da `js/tendine.js`. */
.form-select option {
    background: var(--menu-bg);
    color: var(--text-primary);
}

/* ==========================================================================
   TENDINE — l'elenco aperto come sul Portale Tecnico
   ==========================================================================
   Il `<select>` nativo non basta: l'elenco che si apre lo disegna il SISTEMA
   OPERATIVO, e il CSS ci arriva solo su sfondo e colore del testo. Niente
   angoli, niente spaziature, niente voce evidenziata. Per questo
   `js/tendine.js` gli costruisce accanto una facciata di `<div>`, che qui si
   veste per intero -- il select resta nel DOM, nascosto, come sorgente della
   verita' per i form e per il JS che lo legge.
   Valori misurati sulla tendina "Stato" del Portale (screenshot del 18-09). */
.tendina {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Il select vero sparisce alla vista ma resta nel form. `display: none` lo
   escluderebbe da alcune raccolte del DOM: meglio renderlo invisibile. */
.tendina > select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Il campo chiuso: le stesse misure di `.form-select`, cosi' una tendina
   convertita e una ancora nativa restano indistinguibili. */
.tendina-campo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 0.75rem;
    background: var(--campo-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition);
}

.tendina-campo:hover {
    border-color: var(--menu-hover);
}

.tendina.aperta .tendina-campo,
.tendina-campo:focus-visible {
    border-color: var(--campo-bordo-focus);
    outline: none;
}

/* Il chevron, lo stesso SVG di `.form-select`. */
.tendina-campo::after {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a5a5a5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
    transition: transform var(--transition);
}

.tendina.aperta .tendina-campo::after {
    transform: rotate(180deg);
}

.tendina-valore {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Il segnaposto ("Tutti i tipi") in grigio: e' un'assenza di filtro, non una
   scelta fatta. */
.tendina-valore.e-segnaposto {
    color: var(--text-secondary);
}

/* L'elenco aperto: fondo #1c1c1c, angoli 8px, come sul Portale. */
.tendina-elenco {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.35rem;
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.7);
    z-index: 1050;
}

.tendina.aperta .tendina-elenco {
    display: block;
}

/* Vicino al fondo della finestra l'elenco si apre verso l'alto, altrimenti
   finirebbe fuori schermo e le ultime voci sarebbero irraggiungibili. */
.tendina.verso-alto .tendina-elenco {
    top: auto;
    bottom: calc(100% + 4px);
}

.tendina-voce {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.tendina-voce:hover {
    background: var(--menu-hover);
    color: var(--text-primary);
}

/* La voce corrente resta marcata anche a elenco aperto, cosi' si vede da dove
   si sta cambiando. */
.tendina-voce.scelta {
    background: var(--sidebar-active);
    color: var(--text-primary);
}

.tendina-voce.disabilitata {
    opacity: 0.45;
    cursor: not-allowed;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--campo-bg);
    border-color: var(--campo-bordo-focus);
    box-shadow: none;
    color: var(--text-primary);
}

/* ⚠️ DEVE stare DOPO `.form-control:focus`: ha la stessa specificita', quindi
   a parita' vince l'ultima scritta. Messo prima, il campo di ricerca restava
   spento mentre la sua lente si accendeva -- mezzo controllo illuminato
   (misurato in campo il 18-09). Qui i due bordi si accendono insieme. */
.input-group:focus-within .input-group-text,
.input-group:focus-within > .form-control {
    border-color: var(--campo-bordo-focus);
}

.form-label {
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Pagination - Dark Theme */
.pagination .page-link {
    background-color: #343a40;
    border-color: #495057;
    color: #adb5bd;
    transition: all 0.15s ease;
}

.pagination .page-link:hover {
    background-color: #495057;
    border-color: #6c757d;
    color: #fff;
}

.pagination .page-item.active .page-link {
    background-color: #495057;
    border-color: #6c757d;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    background-color: #212529;
    border-color: #343a40;
    color: #6c757d;
}

.pagination .page-link:focus {
    box-shadow: none;
    outline: none;
}

.pagination .page-link {
    border-radius: 6px !important;
    margin: 0 0.25rem;
    min-width: 28px;
    text-align: center;
    padding: 0.25rem 0.5rem;
}

.pagination {
    flex-shrink: 0;
}

/* Settings tabs - gap uniforme tra colonne */
.tab-content .row {
    --bs-gutter-x: 1rem;
}

/* Delete Modal - Global */
#deleteModal .modal-content {
    border: 2px solid #dc3545;
    box-shadow: 0 10px 40px rgba(220, 53, 69, 0.3);
}

#deleteModal .modal-header {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(220, 53, 69, 0.1) 100%);
}

#deleteModal .modal-title {
    font-weight: 600;
}

#deleteModal .modal-body strong {
    color: #6b7280;
    font-weight: 600;
}

#deleteModal .alert-warning {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

#deleteModal .btn-danger {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    border: none;
    transition: all 0.3s ease;
}

#deleteModal .btn-danger:hover {
    background: linear-gradient(135deg, #dc3545 0%, #ef4444 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

/* Rimuovi focus outline/halo da tutti gli elementi interattivi */
.btn:focus,
.btn:focus-visible,
.btn-close:focus,
.form-check-input:focus,
.form-switch .form-check-input:focus,
.dropdown-toggle:focus,
.nav-link:focus,
.page-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Il tooltip delle voci a sidebar stretta e' stato RIMOSSO (18-09): da quando
   il menu si apre al passaggio del mouse, l'etichetta si legge da se' e un
   tooltip mostrerebbe la stessa parola due volte. Restano gli attributi
   `data-tooltip` nel markup: li usa il `title` nativo come ripiego, e non
   costano nulla. */

/* Responsive */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
        width: var(--sidebar-width);
    }

    .main-content {
        margin-left: 0;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* SPA Navigation - Loading Indicator */
.spa-loading {
    cursor: wait;
}

.spa-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--info) 100%);
    z-index: 10000;
    animation: spa-loading-bar 1.5s ease-in-out infinite;
    transform-origin: left;
}

@keyframes spa-loading-bar {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(0.5);
    }
    100% {
        transform: scaleX(1);
    }
}

.spa-loader .spinner-border {
    display: none;
}

/* Transizione smooth per cambio contenuto (navigazione SPA).
   ⚠️ Deve elencare ANCHE `margin-left`: e' un selettore per id, quindi piu'
   specifico di `.main-content`, e la forma abbreviata `transition:` azzera le
   proprieta' che non nomina. Con la sola `opacity` qui, il contenuto smetteva
   di seguire l'apertura del menu e SALTAVA alla posizione nuova -- misurato:
   durata 0.2s e ritardo 0s invece di 0.25s/0.25s. */
#main-content {
    transition: opacity 0.2s ease,
                margin-left 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.spa-loading #main-content {
    opacity: 0.6;
}

/* Card con altezza fissa e scroll interno - CRITICHE per il layout */
.customers-card-body,
.systems-card-body,
.types-card-body {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    overflow: hidden;
}

.customers-card-body .table-responsive,
.systems-card-body .table-responsive,
.types-card-body .table-responsive {
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: auto;
    flex: 1;
    max-height: calc(100vh - 280px);
}

/* Header fisso della tabella */
.table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #000000;
    color: #ffffff;
    border-top: none;
}

/* ==================== Search Box con Spinner ==================== */
.search-box .search-spinner {
    color: #ffffff;
    font-size: 1rem;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Quando caricato: nascondi spinner */
.search-box.loaded .search-spinner {
    opacity: 0;
    width: 0;
    margin: 0;
    overflow: hidden;
}