/*
 * modern-touches.css
 *
 * Layer CSS additive per modernizzare leggermente l'UI senza stravolgere.
 * Caricato PER ULTIMO da css_custom.php -> override naturale per specificità d'ordine.
 *
 * Principi:
 * - Zero !important salvo necessità estrema
 * - Specificità medio-bassa per permettere override in _SITECUSTOM_/<cliente>/
 * - Solo proprietà visive (border-radius, shadow, transition, spacing, font)
 * - Zero layout structurale (no display/position/float/grid changes)
 * - Desktop-first (Chrome/Firefox)
 *
 * Rollback: eliminare questo file + la riga <link> in css_custom.php
 */

/* ========== TYPOGRAPHY REFINEMENTS ========== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
    line-height: 1.3;
}

label {
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ========== BUTTONS ========== */

.btn {
    border-radius: 6px;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.btn:hover:not([disabled]):not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn:active:not([disabled]):not(.disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn:focus,
.btn:focus-visible {
    outline: 2px solid rgba(25, 118, 210, 0.25);
    outline-offset: 2px;
}

/* ========== FORM INPUTS ========== */

.form-control {
    border-radius: 5px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: rgba(25, 118, 210, 0.55);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}

/* select, input date/time focus */
select.form-control:focus,
input[type="date"].form-control:focus,
input[type="datetime-local"].form-control:focus,
input[type="time"].form-control:focus,
input[type="number"].form-control:focus {
    border-color: rgba(25, 118, 210, 0.55);
}

/* error state più calmo */
.formerror,
.form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.08);
}

/* ========== TABLES ========== */

.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.table tbody tr {
    transition: background-color 0.12s ease;
}

.table-hover tbody tr:hover {
    background-color: rgba(25, 118, 210, 0.04);
}

.table td,
.table th {
    vertical-align: middle;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========== ALERTS ========== */

.alert {
    border-radius: 6px;
    border-width: 1px;
    border-left-width: 4px;
    padding: 12px 16px;
    line-height: 1.5;
}

.alert-danger {
    border-left-color: #c62828;
}

.alert-warning {
    border-left-color: #ef6c00;
}

.alert-success {
    border-left-color: #2e7d32;
}

.alert-info,
.alert-primary {
    border-left-color: #1565c0;
}

/* ========== CARDS / BOXES ========== */

.card,
#ds-primary,
#ds-primary-body,
#ds-menu-container {
    border-radius: 8px;
}

.card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ds-list-row (listing bolle/anagrafiche) */
.ds-list-row {
    border-radius: 6px;
    transition: background-color 0.12s ease, box-shadow 0.15s ease;
}

.ds-list-row:hover {
    background-color: rgba(25, 118, 210, 0.03);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ========== BREADCRUMB / NAV ========== */

#ds-breadcrumb .breadcrumb-item a {
    transition: color 0.15s ease;
    text-decoration: none;
}

#ds-breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ========== LINKS ========== */

a {
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    text-decoration-skip-ink: auto;
}

/* ========== FOCUS VISIBLE per accessibility ========== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(25, 118, 210, 0.5);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ========== SCROLLBAR (webkit only — Chrome/Firefox desktop) ========== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.32);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

/* ========== DROPDOWN MENU ========== */

.dropdown-menu {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
}

.dropdown-item {
    padding: 8px 16px;
    transition: background-color 0.12s ease;
}

/* ========== LOADER / SPINNER ========== */

#ds-loader {
    transition: opacity 0.25s ease;
}

/* ========== BADGES ========== */

.badge {
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 3px 7px;
}

/* ========== MODAL ========== */

.modal-content {
    border-radius: 10px;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px 10px 0 0;
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0 0 10px 10px;
}

/* ========== LOGIN PAGE — redesign moderno ==========
 *
 * Layout originale: #wrapper_main (display:table) con #bg_box (colonna
 * fluida) + #box_main (colonna destra 400px fisso).
 *
 * Redesign: sfondo fullscreen + card "bubble" floating centrata.
 *   - #bg_box diventa fullscreen (fixed/absolute) con overlay scuro
 *   - #box_main diventa card (width: 440px, border-radius 20px, shadow
 *     morbida, backdrop-filter blur leggero) centrata col flex di
 *     #wrapper_main
 *
 * Form, input, validazione, logica JS: INVARIATI. Tocchiamo solo
 * presentation layer.
 */

#wrapper_main {
    display: flex !important;          /* override table */
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
    /* fallback gradient se #bg_box non copre */
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

#wrapper_main #bg_box {
    display: block !important;         /* override table-cell */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0;
    /* l'img viene gia' settata inline dal PHP (background: url(..) cover).
     * Qui assicuriamo solo che copra tutto il viewport. */
    background-size: cover !important;
    background-position: center !important;
}

/* Overlay scuro per leggibilita' del testo nella card frontale */
#wrapper_main #bg_box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 32, 39, 0.55) 0%, rgba(44, 83, 100, 0.45) 100%);
    pointer-events: none;
}

/* Card "bubble" floating */
#wrapper_main #box_main {
    display: block !important;         /* override table-cell */
    position: relative;
    z-index: 2;
    width: 440px !important;
    max-width: calc(100% - 40px);
    height: auto !important;
    margin: 0 auto;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    overflow: hidden;
}

/* Barra colorata accent in alto alla card login */
#wrapper_main #box_main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);
    z-index: 2;
    pointer-events: none;
}

/* Padding piu' generoso nella card */
#wrapper_main .box_main_content {
    padding: 40px 36px !important;
}

/* Logo: centrato e con piu' aria */
#wrapper_main .box_main_logo {
    margin-bottom: 28px !important;
    text-align: center;
}

/* Footer login: sempre leggibile sia su sfondo scuro sia su card bianca.
 * Uso testo blu-navy scuro (#1a2b47) con text-shadow bianco diffuso che
 * fa da alone. Su bianco: si legge direttamente. Su scuro: l'alone
 * bianco crea contrasto. Zero pill, zero background box. */
#wrapper_main .box_main_footer {
    position: fixed !important;
    bottom: 14px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    padding: 0 20px !important;
    font-size: 12px;
    line-height: 1.5;
    pointer-events: none;                /* aree vuote non bloccano click */
}

#wrapper_main .box_main_footer > * {
    pointer-events: auto;
}

/* Stile comune alle 3 righe del footer */
#wrapper_main .box_main_footer .footer-info,
#wrapper_main .box_main_footer .footer-links,
#wrapper_main .box_main_footer .footer-credits {
    color: #1a2b47;
    font-weight: 500;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.95),
        0 0 14px rgba(255, 255, 255, 0.75),
        0 1px 0 rgba(255, 255, 255, 0.9);
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

#wrapper_main .box_main_footer .footer-links {
    margin-top: 4px;
}

#wrapper_main .box_main_footer .footer-credits {
    margin-top: 2px;
    font-size: 11px;             /* leggermente piu' piccolo del resto */
    opacity: 0.85;
}

/* Link: blu primario con hover piu' scuro */
#wrapper_main .box_main_footer a {
    color: #1565c0 !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

#wrapper_main .box_main_footer a:hover,
#wrapper_main .box_main_footer a:focus {
    color: #0d47a1 !important;
    text-decoration: underline;
}

/* ========== MODAL FLOATING (Privacy Policy, Condizioni, etc.) ==========
 * Usato dal footer login per aprire testi legal sopra la card, al centro
 * del viewport. Non interferisce col layout del login form. */

.login-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10, 20, 30, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.login-modal-backdrop.is-open {
    opacity: 1;
}

.login-modal-card {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 60px);
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
    padding: 44px 44px 32px;
    overflow-y: auto;
    transform: translateY(14px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-overflow-scrolling: touch;
}

.login-modal-backdrop.is-open .login-modal-card {
    transform: translateY(0) scale(1);
}

/* Bottone X in alto a destra */
.login-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f1f4f9;
    color: #5a6c7d;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    z-index: 2;
}

.login-modal-close:hover {
    background: #ef4444;
    color: #ffffff;
    transform: rotate(90deg);
}

.login-modal-close:focus,
.login-modal-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* Tipografia del contenuto dentro il modal */
.login-modal-body h2,
.login-modal-body h3 {
    color: #1a2b47;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 0;
    margin-bottom: 16px;
}

.login-modal-body h2 {
    font-size: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eef2f7;
}

.login-modal-body p {
    color: #3b4a63;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 12px;
}

.login-modal-body a {
    color: #1976d2;
    text-decoration: none;
}

.login-modal-body a:hover {
    text-decoration: underline;
}

/* Mobile: modal a tutta larghezza con padding ridotto */
@media (max-width: 600px) {
    .login-modal-backdrop {
        padding: 12px;
    }
    .login-modal-card {
        max-height: calc(100vh - 24px);
        padding: 32px 22px 24px;
        border-radius: 14px;
    }
    #wrapper_main .box_main_footer {
        font-size: 11px;
        padding: 6px 12px !important;
    }
}

/* Bottone REGISTRATI (DivSceltaOrange) restava full-width col vecchio
 * layout: ora col box centrato sta bene, nessuna modifica width */

/* Material-style floating label input - più pulito */
#wrapper_main .FormFloatLabel {
    margin-top: 22px;
    margin-bottom: 22px;
}

#wrapper_main .inputMaterial_FL {
    border: none;
    border-bottom: 1px solid #ced4da;
    background: transparent;
    font-size: 15px;
    padding: 8px 2px;
    transition: border-color 0.2s ease, padding-bottom 0.2s ease;
}

#wrapper_main .inputMaterial_FL:focus {
    outline: none;
    border-bottom-color: #1976d2;
    padding-bottom: 7px;
}

#wrapper_main .bar_FL {
    position: relative;
    display: block;
    width: 100%;
}

#wrapper_main .bar_FL:before,
#wrapper_main .bar_FL:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 0;
    position: absolute;
    background: #1976d2;
    transition: width 0.25s ease;
}

#wrapper_main .bar_FL:before { left: 50%; }
#wrapper_main .bar_FL:after  { right: 50%; }

#wrapper_main .inputMaterial_FL:focus ~ .bar_FL:before,
#wrapper_main .inputMaterial_FL:focus ~ .bar_FL:after {
    width: 50%;
}

/* Bottoni login più moderni */
#wrapper_main .DivSceltaBlu,
#wrapper_main .DivSceltaOrange {
    border-radius: 8px;
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
    letter-spacing: 0.02em;
    font-weight: 500;
}

#wrapper_main .DivSceltaBlu:hover,
#wrapper_main .DivSceltaOrange:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    filter: brightness(1.05);
}

#wrapper_main .DivSceltaBlu:active,
#wrapper_main .DivSceltaOrange:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Sfondo login — gradiente moderno più visibile se nessun background image */
#wrapper_main #bg_box {
    background-color: #667eea;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

/* Pattern decorativo pseudo-element su sfondo login */
#wrapper_main #bg_box::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 40%);
    pointer-events: none;
}

/* BoxSwitch (tra login/registrazione/recupero) — transizione fade */
#wrapper_main .BoxSwitch {
    transition: opacity 0.25s ease;
}

/* Mobile: #bg_box resta visibile (il template vecchio lo nascondeva con
 * display:none a <600px). Forziamo visible per mantenere la bubble
 * floating coerente anche su smartphone. */
@media (max-width: 600px) {
    #wrapper_main #bg_box {
        display: block !important;
    }
    #wrapper_main #box_main {
        width: 100% !important;
        max-width: 100%;
    }
    #wrapper_main .box_main_content {
        padding: 32px 24px !important;
    }
}

/* ========== HOME PAGE (/start/) ========== */
/*
 * Scope: #ds-menu-sections con le tessere del menu principale.
 * Il container #ds-page lo lascio intatto (struttura).
 */

/*
 * HOME MENU — approccio conservativo:
 * NON modifichiamo display/padding/margin di .ds-menu-section (preserviamo
 * layout originale). Aggiungiamo solo effetti on hover/active via
 * background + border-left SENZA cambiare dimensioni, così i box restano
 * allineati come prima.
 */

#ds-menu-sections .ds-menu-section {
    border-left: 3px solid transparent;
    transition: background-color 0.18s ease, border-left-color 0.18s ease, color 0.18s ease;
}

#ds-menu-sections .ds-menu-section:hover {
    background-color: rgba(25, 118, 210, 0.06);
    border-left-color: #1976d2;
    color: #1565c0;
    text-decoration: none;
}

#ds-menu-sections .ds-menu-section.active {
    background-color: rgba(25, 118, 210, 0.10);
    border-left-color: #1976d2;
    color: #1565c0;
    font-weight: 600;
}

/* Separatore h6 — solo tipografia, niente padding/margin nuovi */
#ds-menu-sections h6 {
    color: #8899a8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* Header primario (cerchio icona + titolo) — solo tipografia/colori, no layout */
#ds-primary-header-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1a2b47;
}

#ds-primary-header-subtitle {
    color: #8899a8;
}

#ds-primary-header-circle {
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
    transition: box-shadow 0.25s ease;
}

#ds-primary-header-circle:hover {
    box-shadow: 0 4px 14px rgba(25, 118, 210, 0.2);
}

/* BoxStart (eventuali tessere sulla home custom) */
.BoxStart {
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.BoxStart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* ========== SNIPPET STATS DASHBOARD HOME ==========
 * Le 4 card in cima alla home:
 *   <div class="card rounded bg-{info,secondary,success,danger} p-2 shadow-lg text-white">
 *     <h2>numero</h2>
 *     <p class="text-muted text-white">descrizione</p>
 *     <i class="fa fa-..."></i>
 *
 * Scope: .card.rounded[class*="bg-"] per colpire solo queste
 *        (non le card generiche in altre pagine).
 */

.card.rounded[class*="bg-"] {
    border: none;
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
    padding: 18px 20px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}

/* Overlay gradient scuro in diagonale per dare profondità */
.card.rounded[class*="bg-"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.12) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Pallino decorativo angolo alto-dx (pseudo, no HTML change) */
.card.rounded[class*="bg-"]::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 0;
    transition: transform 0.3s ease;
}

.card.rounded[class*="bg-"] > .row {
    position: relative;
    z-index: 1;
}

.card.rounded[class*="bg-"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18) !important;
}

.card.rounded[class*="bg-"]:hover::after {
    transform: scale(1.15);
}

/* Numero grande — più peso visivo */
.card.rounded[class*="bg-"] h2 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Descrizione snippet — leggibile su sfondo colorato */
.card.rounded[class*="bg-"] p {
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    opacity: 0.95;
    letter-spacing: 0.01em;
    font-weight: 500;
}

/* Icona: più brillante e con transizione al hover */
.card.rounded[class*="bg-"] .fa,
.card.rounded[class*="bg-"] .fas,
.card.rounded[class*="bg-"] [class*="fa-"] {
    opacity: 0.3 !important;
    transition: transform 0.25s ease, opacity 0.25s ease;
    font-size: 4.5em !important;
}

.card.rounded[class*="bg-"]:hover .fa,
.card.rounded[class*="bg-"]:hover .fas,
.card.rounded[class*="bg-"]:hover [class*="fa-"] {
    opacity: 0.5 !important;
    transform: rotate(-8deg) scale(1.08);
}

/* Colori più moderni e vibrant (override dei default Bootstrap) */
.card.rounded.bg-info {
    background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%) !important;
}

.card.rounded.bg-secondary {
    background: linear-gradient(135deg, #546e7a 0%, #78909c 100%) !important;
}

.card.rounded.bg-success {
    background: linear-gradient(135deg, #2e7d32 0%, #66bb6a 100%) !important;
}

.card.rounded.bg-danger {
    background: linear-gradient(135deg, #c62828 0%, #ef5350 100%) !important;
}

/* Spacing tra card (mantiene layout col-md-3) */
.row > .col-md-3.col-xs-12 {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 18px;
}

/* ========== TABLE MODERN (scoped: .table.table-modern) ==========
 * Applicabile aggiungendo classe "table-modern" a qualunque table.
 * Attualmente usato in: documenti/bolle_elenco.php
 */

.table-modern-wrapper {
    border-radius: 10px;
    /* overflow-x: auto per scroll orizzontale se la tabella supera la larghezza
     * overflow-y: hidden per mantenere il border-radius sulle righe superiori */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eef2f7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    background: #fff;
    max-width: 100%;
}

.table-modern {
    margin-bottom: 0 !important;
    font-size: 14px;
}

.table-modern thead {
    background: #f8faff;
}

.table-modern thead th {
    padding: 14px 18px !important;
    font-weight: 600 !important;
    color: #5a6c7d !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    border-top: none !important;
    border-bottom: 2px solid #eef2f7 !important;
    white-space: nowrap;
}

.table-modern tbody td,
.table-modern tbody th {
    padding: 14px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid #f1f4f9 !important;
}

.table-modern tbody tr {
    transition: background-color 0.12s ease, box-shadow 0.15s ease;
}

.table-modern.table-hover tbody tr:hover {
    background-color: rgba(25, 118, 210, 0.04);
    box-shadow: inset 3px 0 0 #1976d2;
}

/* Badge stato più moderni nella lista bolle */
.table-modern .badge {
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
}

.table-modern .badge-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.table-modern .badge-info {
    background: #e3f2fd;
    color: #1565c0;
}

.table-modern .badge-danger {
    background: #ffebee;
    color: #c62828;
}

.table-modern .badge-primary {
    background: #e3f2fd;
    color: #1565c0;
}

.table-modern .badge-light {
    background: #f5f5f5;
    color: #6c757d;
}

/* Link MRN monospace per allineamento */
.table-modern tbody td a:not(.dropdown-item) {
    color: #1565c0;
    text-decoration: none;
    transition: color 0.15s ease;
}

.table-modern tbody td a:not(.dropdown-item):hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* Pulsante kebab (dropdown azioni) più moderno */
.table-modern .dropdown > .btn {
    padding: 6px 10px;
    border-radius: 6px;
    color: #5a6c7d;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.table-modern .dropdown > .btn:hover {
    background-color: rgba(25, 118, 210, 0.08);
    color: #1976d2;
}

.table-modern .dropdown-menu {
    border-radius: 8px;
    border: 1px solid #eef2f7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    min-width: 180px;
}

.table-modern .dropdown-item {
    padding: 8px 16px;
    font-size: 13.5px;
    color: #2c3e50;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.table-modern .dropdown-item:hover {
    background-color: rgba(25, 118, 210, 0.06);
    color: #1565c0;
}

/* ========== IMPORT-ERRORI MODAL (bolle_import.php) ==========
 * Modal #modalErrori mostra la lista errori di un import. La tabella
 * aveva class="text-nowrap" che impediva il wrap della descrizione
 * quando il messaggio era lungo (es. 240+ char con LRN/MRN/filename)
 * -> la tabella sforava il modal di ~100px ("spagina").
 *
 * Fix: consenti il wrap della descrizione, Data resta nowrap, e il
 * body del modal ha overflow-x auto come fallback di sicurezza. */
.errori-modal-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.import-errori-table {
    min-width: 0;
    width: 100%;
    table-layout: auto;
}

.import-errori-table .col-data {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: #5a6c7d;
    width: 170px;          /* larghezza fissa per la colonna data */
}

/* Descrizione: lascia wrap naturale + break-word per messaggi con
 * numeri lunghi (LRN/MRN/filename) senza spazi */
.import-errori-table tbody td:last-child {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.45;
    color: #1a2b47;
}

/* Titolo sezione in sidebar form (bolle_import.php) */
.import-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a6c7d;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f7;
}

/* Icona help/download inline accanto a una label form (bolle_import.php)
 * Stile discreto: cerchio chiaro che diventa blu pieno on hover. */
.guide-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 50%;
    background: #eef5ff;
    color: #1976d2 !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    vertical-align: middle;
    line-height: 1;
}

.guide-icon:hover,
.guide-icon:focus {
    background: #1976d2;
    color: #fff !important;
    transform: scale(1.08);
    text-decoration: none !important;
}

.guide-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
}

/* ========== IMPORT-LOG TABLE (bolle_import.php) ==========
 * Layout semplificato a 5 colonne:
 *   Utente | Caricamento | Stato | File | Data Inserimento
 *
 * Rimosse Tipo + MRN (sempre vuote per i multipli, il 99% del traffico)
 * e accorpate IDOC+IRISP nella cella "File" con icona + nomi impilati. */
.import-log-table {
    min-width: 900px;           /* piu' stretto di prima: 5 colonne entrano */
}

.import-log-table thead th {
    white-space: nowrap;
    vertical-align: middle !important;
}

.import-log-table .col-data {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: #5a6c7d;
}

/* Nome Utente/Azienda */
.import-log-table tbody th:first-child {
    min-width: 160px;
    font-weight: 600;
}

/* Colonna "File": icona + uno o due nomi file monospace impilati */
.import-log-table .col-file {
    min-width: 300px;
}

.import-log-table .file-cell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.import-log-table .file-cell-icon {
    font-size: 18px;
    line-height: 1.4;
    color: #1976d2;
    flex: 0 0 auto;
    opacity: 0.85;
}

.import-log-table .file-cell-names {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.import-log-table .file-cell-name {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #1a2b47;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.import-log-table .file-cell-name-secondary {
    color: #5a6c7d;
    font-size: 12px;
}

/* ========== SIDEBAR RICERCA (anagrafe, container elenchi) ==========
 * Scope: #sidebar_container dentro le pagine elenco. Modernizzo label,
 * input, select, bottone "Cerca" mantenendo tutta la logica di ricerca
 * intatta. Zero modifiche HTML. */

#sidebar_container {
    padding: 20px 16px;
}

/* Label uppercase stile moderno */
#sidebar_container .Campo.Verticale > label,
#sidebar_container .Campo > label:first-child {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #5a6c7d;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

/* Input text + search: arrotondati, focus blu */
#sidebar_container input[type="text"],
#sidebar_container input[type="email"],
#sidebar_container input[type="tel"],
#sidebar_container input[type="search"],
#sidebar_container input.Cerca {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    font-size: 14px;
    color: #1a2b47;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#sidebar_container input[type="text"]:focus,
#sidebar_container input[type="email"]:focus,
#sidebar_container input[type="tel"]:focus,
#sidebar_container input[type="search"]:focus,
#sidebar_container input.Cerca:focus {
    outline: none !important;
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12) !important;
}

/* Select: stesso stile + freccetta SVG moderna */
#sidebar_container .select_tmp,
#sidebar_container select {
    width: 100%;
    box-sizing: border-box;
}

#sidebar_container select {
    padding: 9px 32px 9px 12px !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 8px !important;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center !important;
    font-size: 14px;
    color: #1a2b47;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

#sidebar_container select:focus {
    outline: none !important;
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12) !important;
}

/* Spacing tra campi */
#sidebar_container .Campo.Verticale,
#sidebar_container .Campo {
    margin-bottom: 14px !important;
}

/* Bottone "Cerca" — pill blu moderno, full-width opzionale */
#sidebar_container input[type="submit"].btG1,
#sidebar_container input.btG1.btB,
#sidebar_container button.btG1 {
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #1976d2 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25);
    margin-top: 8px;
}

#sidebar_container input[type="submit"].btG1:hover,
#sidebar_container input.btG1.btB:hover,
#sidebar_container button.btG1:hover {
    background: #1565c0 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
}

/* Link "Ricerca avanzata / veloce" */
#sidebar_container a {
    color: #1976d2;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s ease;
}

#sidebar_container a:hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* ========== FORM CREATE/EDIT (anagrafe_add, anagrafe_add_fast, ecc.) ==========
 * Scope: .Form_Base.dettaglio (wrapper form edit anagrafe) e .FormTabs
 * (tabs Azienda/Privato in anagrafe_add_fast).
 * Applico input moderni mantenendo logica form/JS intatta. */

.Form_Base.dettaglio input[type="text"],
.Form_Base.dettaglio input[type="email"],
.Form_Base.dettaglio input[type="tel"],
.Form_Base.dettaglio input[type="password"],
.Form_Base.dettaglio input[type="date"],
.Form_Base.dettaglio input[type="number"],
.Form_Base.dettaglio textarea,
#page .FormTabs input[type="text"],
#page .FormTabs input[type="email"],
#page .FormTabs input[type="tel"],
#page .FormTabs input[type="password"],
#page .FormTabs input[type="date"],
#page .FormTabs input[type="number"],
#page .FormTabs textarea {
    padding: 9px 12px !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    font-size: 14px;
    color: #1a2b47;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.Form_Base.dettaglio input[type="text"]:focus,
.Form_Base.dettaglio input[type="email"]:focus,
.Form_Base.dettaglio input[type="tel"]:focus,
.Form_Base.dettaglio input[type="password"]:focus,
.Form_Base.dettaglio input[type="date"]:focus,
.Form_Base.dettaglio input[type="number"]:focus,
.Form_Base.dettaglio textarea:focus,
#page .FormTabs input[type="text"]:focus,
#page .FormTabs input[type="email"]:focus,
#page .FormTabs input[type="tel"]:focus,
#page .FormTabs input[type="password"]:focus,
#page .FormTabs input[type="date"]:focus,
#page .FormTabs input[type="number"]:focus,
#page .FormTabs textarea:focus {
    outline: none !important;
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12) !important;
}

.Form_Base.dettaglio select,
#page .FormTabs select {
    padding: 9px 32px 9px 12px !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 8px !important;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center !important;
    font-size: 14px;
    color: #1a2b47;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.Form_Base.dettaglio select:focus,
#page .FormTabs select:focus {
    outline: none !important;
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12) !important;
}

/* Bottoni Annulla/Conferma/Aggiungi (menu_bottom) — pill moderni
 * inline-flex + min-height + margin:0 per allineamento perfetto tra
 * bottoni con testi di larghezza diversa (Annulla 7 char vs Conferma 8). */
.menu_bottom .action,
.menu_bottom button.action,
#primary .menu_bottom .action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 22px !important;
    margin: 3px 4px !important;         /* gap uniforme tra i bottoni */
    border: 1px solid #dfe4ea !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #1a2b47 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    vertical-align: middle;
}

.menu_bottom .action:hover,
#primary .menu_bottom .action:hover {
    background: #f5fafd !important;
    border-color: #1976d2 !important;
    color: #1976d2 !important;
    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.12);
}

.menu_bottom .action.greenbtn,
#primary .menu_bottom .action.greenbtn {
    background: #1976d2 !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25) !important;
}

.menu_bottom .action.greenbtn:hover,
#primary .menu_bottom .action.greenbtn:hover {
    background: #1565c0 !important;
    border-color: #1565c0 !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35) !important;
}

/* Tabs Azienda/Privato/Libero professionista (anagrafe_add_fast) */
#page .FormTabs {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    border: 1px solid #eef2f7;
    border-bottom: none;
}

#page .FormTabs > div {
    padding: 14px 20px !important;
    font-weight: 500;
    color: #5a6c7d;
    cursor: pointer;
    transition: all 0.15s ease;
    border-right: 1px solid #eef2f7;
}

#page .FormTabs > div:last-child {
    border-right: none;
}

#page .FormTabs > div:hover {
    background: #f8faff;
    color: #1976d2;
}

#page .FormTabs > div.active,
#page .FormTabs > div.selezionato {
    background: #ffffff;
    color: #1976d2;
    font-weight: 600;
    border-bottom: 2px solid #1976d2;
}

/* ========== ANAGRAFE ELENCO — look table-modern (dashboard style) ==========
 *
 * Il file PHP usa un loop `.elenco` (div card-like, layout legacy). Per
 * uniformarlo allo stile dashboard (bolle_elenco), avvolgiamo il loop
 * in un contenitore `.table-modern-wrapper.anagrafe-list` con:
 *   - header di colonne uppercase stile table-modern thead
 *   - righe gia' stilizzate da .elenco (padding, hover, separator —
 *     regole cross-pagina piu' in basso)
 *   - niente modifiche al DOM interno di .elenco, solo wrapping. */

.anagrafe-list {
    margin-top: 8px;
    border-radius: 10px;
    overflow: hidden;                 /* il wrapper e' gia' table-modern-wrapper */
}

/* Header finto (riga uppercase sopra l'elenco) */
.anagrafe-list .anagrafe-list-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: #f8faff;
    border-bottom: 1px solid #eef2f7;
    font-size: 11px;
    font-weight: 600;
    color: #5a6c7d;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.anagrafe-list .anagrafe-list-header .col-azienda {
    flex: 1 1 auto;
    padding-left: 80px;               /* stesso offset dell'icona 64px + gap */
}

.anagrafe-list .anagrafe-list-header .col-fiscali {
    flex: 0 0 260px;
    text-align: left;
}

.anagrafe-list .anagrafe-list-header .col-actions {
    flex: 0 0 80px;
    text-align: right;
}

/* Dentro .anagrafe-list le righe .elenco perdono border-bottom (lo da
 * il wrapper stesso) tranne l'ultima: nessun border-bottom ovunque,
 * il contenitore gestisce i bordi. */
.anagrafe-list .elenco {
    background: #fff;
    border-bottom: 1px solid #f1f4f9 !important;
}

.anagrafe-list .elenco:last-of-type {
    border-bottom: none !important;
}

/* Mobile: header semplificato (solo 'Azienda', altre colonne via) */
@media (max-width: 768px) {
    .anagrafe-list .anagrafe-list-header .col-fiscali {
        display: none;
    }
    .anagrafe-list .anagrafe-list-header .col-azienda {
        padding-left: 70px;
    }
}

@media (max-width: 480px) {
    .anagrafe-list .anagrafe-list-header {
        display: none;                /* tolgo header su schermi molto piccoli */
    }
}

/* ========== COERENZA ELENCHI (cross-pagina) ==========
 * Obiettivo: rendere visivamente coerenti le pagine elenco dei vari
 * moduli (bolle, container/viaggi, report, anagrafe, owners/clienti).
 * Tutti i selettori qui sono scoped su classi/id esclusivi delle
 * pagine elenco — NON toccano form, dettagli, modali o altre pagine.
 */

/* --- A) DS-LIST-ROW (container/elenco.php, oReport/elenco.php) ---
 * Sono righe custom (non <table>) gia' abbastanza moderne. Qui
 * uniformiamo spacing, hover e icone al look di .table-modern. */
#ds-primary-body .ds-list-row {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f4f9;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

#ds-primary-body .ds-list-row:last-child {
    border-bottom: none;
}

#ds-primary-body .ds-list-row:hover {
    background: #f5fafd;
    box-shadow: inset 3px 0 0 #1976d2;
}

#ds-primary-body .ds-list-row-icon {
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease;
}

#ds-primary-body .ds-list-row:hover .ds-list-row-icon {
    transform: scale(1.03);
}

#ds-primary-body .ds-list-row-title {
    font-weight: 600;
    font-size: 14px;
    color: #1a2b47;
    margin-bottom: 2px;
}

#ds-primary-body .ds-list-row-title a {
    color: #1a2b47;
    text-decoration: none;
}

#ds-primary-body .ds-list-row-title a:hover {
    color: #1976d2;
}

#ds-primary-body .ds-list-row-subtitle {
    font-size: 13px;
    color: #6b7a90;
}

#ds-primary-body .ds-list-row-settings {
    border-radius: 6px;
    padding: 6px 10px;
    color: #6b7a90;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

#ds-primary-body .ds-list-row-settings:hover {
    background: #eef5ff;
    color: #1976d2;
}

/* --- B) PAGINA LEGACY (.elenco + .TitPage — anagrafe, owners) ---
 * Queste pagine usano un layout piu' vecchio. Le allineamo al look
 * moderno senza rifare l'HTML. */

/* Header legacy: solo rifinitura tipografica.
 * NON tocchiamo padding-left: il template lo usa come offset per
 * il cerchio verde "+" posizionato assoluto a sinistra. */
#primary .TitPage h1 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Righe elenco legacy: rendiamole simili a .ds-list-row */
.elenco {
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f4f9 !important;
    background: #fff;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.elenco:hover {
    background: #f5fafd;
    box-shadow: inset 3px 0 0 #1976d2;
}

.elenco .titolo {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a2b47 !important;
    margin-bottom: 2px !important;
}

.elenco .titolo a {
    color: #1a2b47;
    text-decoration: none;
}

.elenco .titolo a:hover {
    color: #1976d2;
}

.elenco .sottotitolo {
    font-size: 13px !important;
    color: #6b7a90 !important;
    font-style: normal !important;
}

.elenco label {
    color: #6b7a90 !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

/* Icona tonda con shadow leggera */
.elenco .icona,
.elenco .bordoico {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease;
}

.elenco:hover .icona,
.elenco:hover .bordoico {
    transform: scale(1.03);
}

/* --- C) PAGINAZIONE LEGACY (#navigazione — anagrafe, owners) ---
 * La barra grigia scura del template viene sostituita da una
 * paginazione pill pulita, in linea col resto. */
#navigazione {
    background: transparent !important;
    padding: 16px 0 !important;
    margin: 12px 0 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
}

#navigazione ul {
    display: inline-flex !important;
    gap: 4px;
    margin: 0 !important;
    padding: 6px !important;
    list-style: none !important;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

#navigazione ul li {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: none !important;
    border: none !important;
}

#navigazione ul li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 34px;
    padding: 0 10px !important;
    border-radius: 6px;
    background: transparent !important;
    color: #1976d2 !important;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

#navigazione ul li a:hover {
    background: #eef5ff !important;
    color: #1565c0 !important;
}

/* li.no-link: frecce disabilitate */
#navigazione ul li.no-link {
    opacity: 0.35;
}

#navigazione ul li.no-link a {
    cursor: default;
    pointer-events: none;
}

/* Etichette prev/next/first/last: icone decorative invece di testo */
#navigazione ul li.primo a::before   { content: '\00AB'; font-size: 16px; }
#navigazione ul li.indietro a::before{ content: '\2039'; font-size: 18px; }
#navigazione ul li.avanti a::before  { content: '\203A'; font-size: 18px; }
#navigazione ul li.ultimo a::before  { content: '\00BB'; font-size: 16px; }

/* Il blocco centrale "page go" con input e bottone ">" va pulito */
#navigazione .pageGo {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 8px !important;
    border: none !important;
    box-shadow: none !important;
}

#navigazione .pageGo input[type="text"] {
    width: 42px;
    height: 28px;
    padding: 0 6px !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 5px !important;
    text-align: center;
    font-size: 13px;
    background: #fff !important;
}

#navigazione .pageGo input[type="text"]:focus {
    outline: none;
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}

#navigazione .pageGo .btG1 {
    height: 28px;
    padding: 0 10px !important;
    border: none !important;
    border-radius: 5px !important;
    background: #1976d2 !important;
    color: #fff !important;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

#navigazione .pageGo .btG1:hover {
    background: #1565c0 !important;
}

#navigazione #ShowPageGo {
    padding: 0 10px;
    color: #5a6c7d;
    font-size: 13px;
    font-weight: 500;
}

/* ========== NOTE ========== */
/*
   Classi evitate volutamente per non interferire col layout esistente:
   - #ds-nav, #ds-nav-primary, #ds-nav-secondary (struttura header)
   - #ds-wrapper, #ds-page (container principali)
   - .row, .col-* (grid bootstrap)
   - Qualsiasi utility class Bootstrap (d-flex, mb-*, ecc.)
   - display/position/float/grid (layout structurale)
*/

/* ========== MOBILE RESPONSIVE (extra, additive) ==========
 * SOLO @media max-width: il desktop NON e' MAI toccato da queste regole.
 * Scope mirato: ottimizza i punti meno usabili su smartphone senza
 * rifare i layout. La piattaforma resta desktop-first.
 */
@media (max-width: 768px) {

    /* Form inserimento/modifica bolla (#FormAddBolla, condiviso add+edit):
     * le colonne Bootstrap (.col/.col-N) erano senza prefisso responsive
     * -> restavano affiancate e compresse su mobile. Le impiliamo a piena
     * larghezza. Scoped a #FormAddBolla: nessun'altra pagina toccata. */
    #FormAddBolla .form-row > [class*="col"],
    #FormAddBolla .row > [class*="col"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Su mobile la doppia colonna Speditore|Destinatario diventa verticale:
     * il bordo destro divisorio non ha piu' senso */
    #FormAddBolla .border-right {
        border-right: none !important;
    }
    /* Spaziatura verticale tra campi impilati */
    #FormAddBolla .form-row > [class*="col"] {
        margin-bottom: 10px;
    }
}