/* ========================================
   TABLE MANAGER V2 - MODERN UI STYLES
   ======================================== */

/*
GUIDA RAPIDA PERSONALIZZAZIONE (TableManager)
---------------------------------------------
1) Colore principale UI:
   - usa #153d77 in tab attiva, bottoni primari, focus ring e spinner.
   - se vuoi cambiare tema, sostituisci in modo coerente questi punti chiave:
     .navigation-tabs .nav-link.active
     .table-card .btn-primary
     .category-filter .btn-primary
     .search-input input:focus
     .table-manager-v2 .btn:focus / .nav-link:focus

2) Aspetto "morbido" (UI moderna):
   - border-radius 8/12px = arrotondamenti
   - box-shadow = profondita' delle card

3) Spaziature:
   - padding e margin controllano densita' e respirazione del layout.

4) Motion:
   - transition/transform gestiscono feedback hover (scale, elevate).
*/

/*
RIFERIMENTO COMPLETO "COMANDI CSS" USATI IN QUESTO FILE
---------------------------------------------------------
Ogni voce spiega: cosa modifica e cosa succede se cambi valore.

- padding:
  Spazio interno dell'elemento. Aumentando -> contenuto piu "arioso".
  Diminuendo -> UI piu compatta/densa.

- margin:
  Spazio esterno tra elementi. Aumentando -> piu distanza fra blocchi.
  Riducendo/negativo -> elementi piu vicini o sovrapposti.

- background / background-color:
  Sfondo elemento. Cambiando colore/gradiente cambia il tono visivo del blocco.

- color:
  Colore testo/icone. Cambiarlo influenza leggibilita e contrasto.

- border / border-color:
  Bordo elemento (spessore, stile, colore). Piu evidente = maggiore separazione visiva.

- border-radius:
  Arrotondamento angoli. Valori alti -> look piu morbido; bassi -> look piu squadrato.

- box-shadow:
  Ombra/profondita. Valori alti -> effetto "sollevato"; nessuna ombra -> UI piatta.

- font-size:
  Dimensione testo. Aumentando migliora leggibilita ma occupa piu spazio.

- font-weight:
  Spessore testo (500/600/700). Alti = testo piu enfatico.

- font-family:
  Famiglia tipografica. Cambia personalita visiva e leggibilita.

- line-height:
  Altezza riga testo. Aumentando migliora lettura su paragrafi lunghi.

- text-align:
  Allineamento testo (left/center/right).

- display:
  Modello di layout (block, flex, inline-block, grid...).
  Cambiarlo puo alterare radicalmente la disposizione interna.

- position + top/left/right/bottom:
  Posizionamento (relative/absolute/fixed). Con offset top/left... sposti il blocco.

- z-index:
  Priorita in profondita (stacking). Maggiore = elemento sopra agli altri.

- width / min-width / height / min-height:
  Dimensioni elemento. Aumentando migliora spazio contenuto ma puo rompere responsive.

- grid-template-columns:
  Struttura colonne grid. Modificando minmax/repeat cambi numero e larghezza card.

- flex / flex-wrap:
  Crescita/riduzione item e ritorno a capo in layout flex.

- align-items / justify-content / gap:
  Allineamento verticale, orizzontale e spaziatura tra item in flex/grid.

- overflow:
  Gestione contenuto eccedente (hidden/auto/visible). hidden taglia, auto aggiunge scroll.

- cursor:
  Aspetto cursore (es. pointer) per comunicare interattivita.

- opacity:
  Trasparenza. Valori bassi = elemento attenuato/disattivato visivamente.

- transition:
  Durata/tipo transizione animata tra stati (hover/focus ecc.).

- transform:
  Trasformazioni (translate, scale, rotate). Cambia posizione/dimensione percepita.

- animation + @keyframes:
  Animazioni continue o d'ingresso. Modificando durata/easing cambia dinamica UI.

- outline / outline-offset:
  Evidenza focus tastiera (accessibilita). Fondamentale per navigazione keyboard.

- pointer-events:
  Abilita/disabilita interazione mouse sull'elemento (none = click ignorati).

- break-inside:
  In stampa evita che una card venga spezzata fra due pagine.
*/

/*
MATRICE DETTAGLIATA SELETTORE -> COMANDI (TABLEMANAGER)
--------------------------------------------------------

[.table-manager-v2]
- padding: 0 => azzera spazio interno del wrapper pagina.
  Se aumenti: si crea una cornice interna attorno a tutto il contenuto.
- background: #f8f9fa => colore di sfondo generale del modulo.
  Se cambi: cambia il "canvas" base su cui poggiano card e tab.

[.table-manager-v2 .header]
- background: none => header trasparente.
- color: #ffffff => colore testo ereditato nell'header.
- padding: 1.5rem 1.5rem 0.5rem 1.5rem => spazio interno (piu alto sopra, meno sotto).
- margin: -20px -20px 20px -20px => allarga il blocco ai bordi esterni e crea distanza sotto.
- border-radius: 0 => angoli netti.
- position: relative => abilita layering locale (z-index interno).
- z-index: 1 => mantiene header sopra elementi base sottostanti.

[.table-manager-v2 .header-title]
- font-size: 2rem => dimensione titolo principale.
- font-weight: 700 => titolo in grassetto forte.
- color: #ffffff => contrasto su header scuro.
- display: flex => allineamento icona/titolo inline.
- align-items: center => centratura verticale dei figli.
- gap: 0.5rem => distanza tra icona e testo.

[.table-manager-v2 .version-badge]
- font-size: 0.75rem => badge compatto.
- background: #e8f0fe => sfondo badge chiaro.
- color: #153d77 => testo badge nel colore brand.
- padding: 0.25rem 0.75rem => "pill" leggibile.
- border-radius: 20px => forma capsula.
- font-weight: 500 => enfasi media.

[.search-section]
- border: none => rimuove bordo standard bootstrap.
- box-shadow: 0 2px 8px ... => profondita della card ricerca.
- border-radius: 12px => angoli arrotondati.
- background: white => superficie neutra per input.

[.search-container], [.search-input-wrapper]
- position: relative => base di riferimento per icona assoluta.

[.search-icon]
- position: absolute => icona sovrapposta dentro input.
- left: 1rem => distanza dal bordo sinistro input.
- top: 50% + transform: translateY(-50%) => centratura verticale precisa.
- color: #6c757d => colore neutro secondario.
- font-size: 1.2rem => icona visibile ma non dominante.
- z-index: 10 => icona sopra il campo.
- pointer-events: none => clic passa all'input sottostante.

[.search-input input]
- padding-left: 3rem !important => spazio per non sovrapporre testo e icona.
- font-size: 1.1rem => testo campo piu leggibile.
- border: 2px solid #e9ecef => bordo chiaro iniziale.
- border-radius: 50px => input a pillola.
- transition: all 0.3s ease => animazione morbida tra stati.
- height: 50px => altezza touch-friendly.

[.search-input input:focus]
- border-color: #153d77 => focus nel colore tema.
- box-shadow: 0 0 0 0.2rem ... => anello accessibile intorno al campo.

[.search-results-count]
- margin-top: 0.75rem => separa dal campo sopra.
- color: #28a745 => feedback positivo (success).
- font-weight: 500 => testo evidenziato.
- display: flex + align-items: center + gap: 0.5rem => allineamento icona/testo.

[.navigation-tabs]
- position: relative + z-index: 10 => mantiene tabs in primo piano.

[.navigation-tabs .nav-pills]
- background: white => contenitore tab pulito.
- padding: 0.5rem => respiro interno.
- border-radius: 12px => box morbido.
- box-shadow: 0 2px 8px ... => separazione dallo sfondo.

[.navigation-tabs .nav-link]
- color: #495057 => colore testo default.
- font-weight: 500 => testo medio.
- border-radius: 8px => bottoni tab arrotondati.
- transition: all 0.3s ease => passaggi hover/active fluidi.
- display: flex + align-items/justify-content: center => contenuto centrato.
- gap: 0.5rem => distanza icona/titolo.
- padding: 0.75rem 1rem => area clic comoda.

[.navigation-tabs .nav-link:hover]
- background-color: #f8f9fa => lieve highlight in hover.
- color: #153d77 => colore tema in hover.

[.navigation-tabs .nav-link.active]
- background: #153d77 => stato selezionato.
- color: white => contrasto testo.
- box-shadow: 0 4px 12px ... => pulsante attivo "sollevato".

[.tm-count-badge]
- background: white => badge neutro.
- color: #495057 => testo leggibile.
- padding: 0.3rem 0.6rem => badge compatto.
- border-radius: 10px => bordi morbidi.
- border: 2px solid #8fc3f0 => contorno evidenza contatore.
- font-size: 0.75rem + font-weight: 600 => numero chiaro.
- min-width: 24px => evita badge troppo stretto.
- text-align: center => numero centrato.
- display: inline-block => si comporta da elemento "capsula".
- line-height: 1.2 => altezza testo equilibrata.
- vertical-align: middle => allineamento con testo vicino.
- margin-left: 0.5rem => spazio da label tab.

[.navigation-tabs .nav-link.active .tm-count-badge]
- background: white => resta leggibile sul blu attivo.
- color: #495057 => contrasto testo badge.
- border-color: #153d77 => coerenza col tema.

[.category-section]
- border: none => niente bordo rigido.
- box-shadow: 0 2px 8px ... => depth iniziale card categoria.
- border-radius: 12px => angoli arrotondati.
- overflow: hidden => contenuti figli non escono dagli angoli.
- transition: transform 0.2s ease => hover fluido.
- position: relative + z-index: 1 => contesto locale layering.

[.category-section:hover]
- transform: translateY(-2px) => lieve movimento verso l'alto.
- box-shadow: 0 4px 12px ... => ombra piu forte al passaggio mouse.

[.category-header]
- cursor: pointer => comunica cliccabilita.
- padding: 1rem 1.5rem => area titolo categoria ampia.
- border-bottom: none => elimina linea separatrice standard.
- color: #212529 !important => testo scuro forzato.
- background: white !important => sfondo uniforme forzato.
- border-left: 5px solid transparent => spazio predisposto per accento laterale.
- transition: all 0.3s ease => cambio stato morbido.

[.category-header:hover]
- opacity: 0.9 => feedback visivo lieve.

[.category-header h5]
- margin: 0 => rimuove margine default heading.
- font-weight: 600 => titolo categoria in evidenza.
- display: flex + align-items: center + gap: 0.75rem => layout titolo+icone.

[.category-header h5 i]
- transition: transform 0.3s ease => eventuale rotazione icona fluida.

[.category-header .badge]
- background: rgba(0,0,0,0.75) => badge count scuro.
- color: #ffffff => testo badge bianco.
- padding: 0.4rem 0.8rem => badge corposo.
- font-weight: 700 => numero molto visibile.
- font-size: 0.85rem => dimensione compatta.
- border: 2px solid rgba(255,255,255,0.3) => bordo chiaro di separazione.
- box-shadow: 0 2px 4px ... => effetto rilievo.

[.tables-grid]
- display: grid => layout a griglia.
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) => colonne responsive automatiche.
- gap: 1.5rem => distanza costante tra card.

[.table-card]
- border: none => senza bordo rigido.
- border-radius: 12px => card morbida.
- box-shadow: 0 2px 8px ... => ombra base.
- transition: all 0.3s ease => hover animato.
- overflow: hidden => clip contenuti.
- height: 100% => allinea altezze in griglia.

[.table-card:hover]
- transform: translateY(-4px) => card si solleva.
- box-shadow: 0 8px 24px ... => ombra piu profonda.

[.table-card .card-body]
- padding: 1.5rem => spazio interno contenuti card.

[.card-header-custom]
- display: flex => header card in layout orizzontale.
- justify-content: space-between => elementi agli estremi.
- align-items: flex-start => allineamento in alto.
- margin-bottom: 1rem => separazione dal testo sotto.

[.table-card .card-title]
- font-size: 1.1rem => titolo leggibile.
- font-weight: 600 => enfasi media-alta.
- color: #212529 => testo principale scuro.
- margin: 0 => rimuove margini heading default.
- flex: 1 => titolo occupa spazio disponibile.
- display: flex + align-items: center => allineamento icona/testo.

[.table-card .card-text]
- font-size: 0.9rem => testo descrittivo secondario.
- line-height: 1.5 => leggibilita migliore.
- margin-bottom: 1rem => distanza prima delle azioni.
- min-height: 3rem => altezza minima uniforme fra card.

[.favorite-btn]
- padding: 0.5rem => area clic adeguata.
- color: #48aaff => colore icona default.
- transition: all 0.3s ease => hover morbido.
- border: 2px solid #66b1fd => bordo pulsante.
- background: #f8f9fa => sfondo chiaro.
- border-radius: 6px => bottone arrotondato.
- font-size: 1.2rem => icona evidente.
- min-width/min-height: 40px => area touch minima.
- display: flex + align-items/justify-content: center => icona centrata.
- cursor: pointer => interattivo.

[.favorite-btn:hover]
- color: #007bff => accentua colore icona.
- transform: scale(1.1) => ingrandimento hover.
- background: #e7f3ff => sfondo hover.
- border-color: #007bff => bordo coerente hover.
- box-shadow: 0 2px 8px ... => profondita.

[.favorite-btn.active]
- color/background/border-color => stato attivo persistente.
- box-shadow: 0 0 0 3px ... => alone stato selezionato.

[.table-card .badge-secondary]
- font-size: 0.75rem => testo badge piccolo.
- font-weight: 500 => enfasi media.
- padding: 0.35rem 0.75rem => badge leggibile.
- border-radius: 6px => bordi smussati.

[.table-card .btn-primary]
- background: #153d77 => colore CTA principale.
- border: none => niente contorno.
- border-radius: 8px => look morbido.
- padding: 0.5rem 1.25rem => area clic.
- font-weight: 500 => testo pulsante evidente.
- transition: all 0.3s ease => hover fluido.

[.table-card .btn-primary:hover]
- transform: scale(1.05) => ingrandimento leggero.
- box-shadow: 0 4px 12px ... => maggiore risalto.

[.empty-state]
- border: 2px dashed #dee2e6 => bordo tratteggiato informativo.
- border-radius: 12px => contenitore morbido.
- background: white => base neutra.

[.empty-state .fa-3x]
- opacity: 0.3 => icona attenuata (non dominante).

[.empty-state h4]
- color: #495057 => titolo stato vuoto leggibile.
- margin-top: 1rem => distanza da icona.

[.empty-state p]
- max-width: 500px => limita ampiezza testo (leggibilita).
- margin: 0 auto => centra paragrafo.

[.category-filter]
- display: flex => layout orizzontale filtri.
- justify-content: center => filtri centrati.
- flex-wrap: wrap => va a capo su schermi stretti.
- gap: 0.5rem => spazio tra pulsanti.

[.category-filter .btn-group]
- box-shadow: 0 2px 8px ... => profondita gruppo.
- border-radius: 8px => angoli arrotondati.
- overflow: hidden => ritaglia angoli ai bottoni interni.

[.category-filter .btn]
- border: none => senza bordo standard.
- font-weight: 500 => testo medio.
- transition: all 0.3s ease => hover fluido.

[.category-filter .btn-primary]
- background: #153d77 => stato attivo/primario filtro.

[.help-section]
- border: none => rimuove bordo default.
- border-radius: 12px => card help arrotondata.
- box-shadow: 0 2px 8px ... => rilievo leggero.

[.help-content h5]
- color: #495057 => titolo secondario.
- font-weight: 600 => evidenza.
- margin-top: 1.5rem => separa blocchi help.
- display: flex + align-items center + gap 0.5rem => titolo con icona ben allineato.

[.help-content h5:first-child]
- margin-top: 0 => evita spazio extra sul primo titolo.

[.help-content kbd]
- background-color: #e9ecef => aspetto tasto.
- color: #212529 => contrasto testo tasto.
- border: 2px solid #adb5bd => contorno "fisico".
- border-radius: 4px => smusso lieve.
- padding: 0.25rem 0.5rem => dimensione keycap.
- font-size: 0.875rem => testo compatto.
- font-weight: 600 => leggibile.
- font-family: 'Courier New', monospace => stile tecnico.
- box-shadow: 0 2px 0 ... => effetto rilievo tasto.

[.help-content ul]
- line-height: 2 => righe piu distanziate.

[@media (max-width: 768px)]
- .header-title font-size: 1.5rem => titolo ridotto su tablet/mobile.
- .tables-grid grid-template-columns: 1fr => una colonna.
- .nav-link font-size/padding ridotti => tabs piu compatte.
- .nav-link span:not(.badge) display:none => nasconde testo, mantiene badge.
- .category-filter .btn font-size: 0.875rem => bottoni piu piccoli.

[@media (max-width: 576px)]
- .search-input input font-size: 1rem + height:45px => adattamento a telefoni piccoli.

[@keyframes fadeIn]
- from: opacity 0 + translateY(10px) => ingresso da sotto, trasparente.
- to: opacity 1 + translateY(0) => posizione finale visibile.

[.table-card]
- animation: fadeIn 0.3s ease forwards => animazione ingresso card.

[.table-card:nth-child(1..6)]
- animation-delay progressivo => effetto stagger (apparizione a cascata).

[.loading-overlay]
- position: fixed + top/left/right/bottom:0 => copre tutto viewport.
- background: rgba(255,255,255,0.9) => velo semi-opaco.
- display:flex + align-items/justify-content center => spinner centrato.
- z-index: 9999 => sopra quasi tutto.

[.loading-spinner]
- width/height: 3rem => dimensione spinner.
- border: 0.3rem solid #f3f3f3 => anello base.
- border-top: 0.3rem solid #153d77 => settore colorato visibile in rotazione.
- border-radius: 50% => forma circolare.
- animation: spin 1s linear infinite => rotazione continua.

[@keyframes spin]
- 0% rotate(0deg) -> 100% rotate(360deg) => giro completo.

[focus accessibilita]
- outline: 2px solid #153d77 => contorno visibile da tastiera.
- outline-offset: 2px => stacca il contorno dal bordo elemento.

[@media print]
- nasconde search/tabs/favorite/action button con display:none.
- .table-card break-inside: avoid => non spezza card tra pagine.
- .table-card box-shadow:none + border:1px solid ... => stampa pulita/leggibile.
*/

.table-manager-v2 {
    padding: 0;
    background: #f8f9fa;
}

/* Header Styling */
.table-manager-v2 .header {
    background: none;
    color: #ffffff;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    margin: -20px -20px 20px -20px;
    border-radius: 0;
    position: relative;
    z-index: 1;
}

.table-manager-v2 .header-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-manager-v2 .version-badge {
    font-size: 0.75rem;
    background: #e8f0fe;
    color: #153d77;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
}

/* Search Section */
.search-section {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: white;
}

.search-container {
    position: relative;
}

.search-input-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1.2rem;
    z-index: 10;
    pointer-events: none;
}

.search-input input {
    padding-left: 3rem !important;
    font-size: 1.1rem;
    border: 2px solid #e9ecef;
    border-radius: 50px;
    transition: all 0.3s ease;
    height: 50px;
}

.search-input input:focus {
    border-color: #153d77;
    box-shadow: 0 0 0 0.2rem rgba(21, 61, 119, 0.25);
}

.search-results-count {
    margin-top: 0.75rem;
    color: #28a745;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Navigation Tabs */
.navigation-tabs {
    position: relative;
    z-index: 10;
}

.navigation-tabs .nav-pills {
    background: white;
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navigation-tabs .nav-link {
    color: #495057;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.navigation-tabs .nav-link:hover {
    background-color: #f8f9fa;
    color: #153d77;
}

.navigation-tabs .nav-link.active {
    /* background: colore pieno della tab selezionata */
    background: #153d77;
    /* color: colore testo/icona dentro la tab attiva */
    color: white;
    /* box-shadow: profondita' visuale del bottone attivo */
    box-shadow: 0 4px 12px rgba(21, 61, 119, 0.4);
}

/* Custom Badge per conteggi - NO conflitti Bootstrap */
.tm-count-badge {
    background: white;
    color: #495057;
    padding: 0.3rem 0.6rem;
    border-radius: 10px;
    border: 2px solid #8fc3f0;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    display: inline-block;
    line-height: 1.2;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.navigation-tabs .nav-link.active .tm-count-badge {
    background: white;
    color: #495057;
    border-color: #153d77;
}

/* Category Sections */
.category-section {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1;
}

.category-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.category-header {
    cursor: pointer;
    padding: 1rem 1.5rem;
    border-bottom: none;
    color: #212529 !important;
    background: white !important;
    border-left: 5px solid transparent;
    transition: all 0.3s ease;
}

.category-header:hover {
    opacity: 0.9;
}

.category-header h5 {
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.category-header h5 i {
    transition: transform 0.3s ease;
}

.category-header .badge {
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: 0.4rem 0.8rem;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Table Cards */
.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.table-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
}

.table-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.table-card .card-body {
    padding: 1.5rem;
}

.card-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.table-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
}

.table-card .card-text {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    min-height: 3rem;
}

.favorite-btn {
    padding: 0.5rem;
    color: #48aaff;
    transition: all 0.3s ease;
    border: 2px solid #66b1fd;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 1.2rem;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.favorite-btn:hover {
    color: #007bff;
    transform: scale(1.1);
    background: #e7f3ff;
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}

.favorite-btn.active {
    color: #007bff;
    background: #e7f3ff;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.table-card .badge-secondary {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
}

.table-card .btn-primary {
    /* Bottone primario card (azione "Apri editor") */
    background: #153d77;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.table-card .btn-primary:hover {
    /* transform: piccolo ingrandimento in hover per feedback utente */
    transform: scale(1.05);
    /* shadow piu intensa in hover */
    box-shadow: 0 4px 12px rgba(21, 61, 119, 0.5);
}

/* Empty States */
.empty-state {
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    background: white;
}

.empty-state .fa-3x {
    opacity: 0.3;
}

.empty-state h4 {
    color: #495057;
    margin-top: 1rem;
}

.empty-state p {
    max-width: 500px;
    margin: 0 auto;
}

/* Category Filter */
.category-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-filter .btn-group {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.category-filter .btn {
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.category-filter .btn-primary {
    /* Pulsante filtro attivo nella barra categorie */
    background: #153d77;
}

/* Help Section */
.help-section {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.help-content h5 {
    color: #495057;
    font-weight: 600;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-content h5:first-child {
    margin-top: 0;
}

.help-content kbd {
    background-color: #e9ecef;
    color: #212529;
    border: 2px solid #adb5bd;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.help-content ul {
    line-height: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
    .table-manager-v2 .header-title {
        font-size: 1.5rem;
    }

    .tables-grid {
        grid-template-columns: 1fr;
    }

    .navigation-tabs .nav-link {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .navigation-tabs .nav-link span:not(.badge) {
        display: none;
    }

    .category-filter .btn {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .search-input input {
        font-size: 1rem;
        height: 45px;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table-card {
    animation: fadeIn 0.3s ease forwards;
}

.table-card:nth-child(1) { animation-delay: 0.05s; }
.table-card:nth-child(2) { animation-delay: 0.1s; }
.table-card:nth-child(3) { animation-delay: 0.15s; }
.table-card:nth-child(4) { animation-delay: 0.2s; }
.table-card:nth-child(5) { animation-delay: 0.25s; }
.table-card:nth-child(6) { animation-delay: 0.3s; }

/* Loading States */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 0.3rem solid #f3f3f3;
    /* border-top: colore "accent" dello spinner in rotazione */
    border-top: 0.3rem solid #153d77;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Accessibility */
.table-manager-v2 button:focus,
.table-manager-v2 .btn:focus,
.table-manager-v2 .nav-link:focus {
    /* outline: accessibilita' tastiera (focus visibile) */
    outline: 2px solid #153d77;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .search-section,
    .navigation-tabs,
    .favorite-btn,
    .table-card .btn {
        display: none;
    }

    .table-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}