/* ==========================================================================
   CassaEdile.Web — Design Tokens — Enterprise Edition
   --------------------------------------------------------------------------
   Look B2B istituzionale stile Stripe / Linear / GOV.UK:
     - Accent slate-blue #3b5266, semantic desaturati
     - Densità moderata (font UI 14px, padding 0.5rem)
     - Bordi 1px invece di ombre decorative (elevazione reale solo dropdown/modal)
     - Gradient MD3 → tinta unita
     - Corner radius 6px/8px (non 12/16)
     - Sidenav #fafafa

   Organizzazione per sezioni:
     1. Tokens  :root
     2. Body / tipografia
     3. Skip-link (A11Y — WCAG 2.4.1)
     4. Override MD3 — gradient → tinta unita
     5. Override MD3 — shadow colorate → none
     6. Override MD3 — border-radius
     7. Card + hover
     8. Bottoni
     (Input — nessuna personalizzazione: MD3 originale via material-dashboard.min.css)
    10. Sidenav #fafafa
    11. Avatar / icon-shape
    12. Table header
    13. Badge
    14. Dropdown / modal (elevazione reale)
    15. Link / text-primary utility
    16. Navbar topbar
    17. Scroll-to-top button
    18. DataTables — contenimento orizzontale + soppressione paginazione
   ========================================================================== */


/* ==========================================================================
   1. Tokens — :root
   ========================================================================== */

:root {
    /* Palette — accent slate-blue + semantic tenui (tinte Metronic-style) */
    --ce-primary: #4f6a80;
    --ce-primary-rgb: 79, 106, 128;
    --ce-primary-dark: #3d5567;
    --ce-primary-soft: rgba(79, 106, 128, 0.1);
    --ce-primary-light: #eaeef2;

    --ce-success: #5a8a6f;
    --ce-success-rgb: 90, 138, 111;
    --ce-success-dark: #446b56;
    --ce-success-light: #e8f1ec;

    --ce-warning: #b08a4a;
    --ce-warning-rgb: 176, 138, 74;
    --ce-warning-dark: #8d6c33;
    --ce-warning-light: #f5ede0;

    --ce-danger: #b65a5a;
    --ce-danger-rgb: 182, 90, 90;
    --ce-danger-dark: #974646;
    --ce-danger-light: #f3e2e2;

    --ce-info: #6a8299;
    --ce-info-rgb: 106, 130, 153;
    --ce-info-dark: #526a80;
    --ce-info-light: #e9edf1;
    --ce-info-soft: rgba(106, 130, 153, 0.1);

    --ce-dark: #1f2937;
    --ce-dark-rgb: 31, 41, 55;

    --ce-secondary: #64748b;
    --ce-secondary-rgb: 100, 116, 139;

    /* Neutrali */
    --ce-bg: #f5f6f8;
    --ce-surface: #ffffff;
    --ce-surface-muted: #fafafa;
    --ce-border: rgba(15, 23, 42, 0.08);
    --ce-border-strong: rgba(15, 23, 42, 0.14);
    --ce-text: #1e293b;
    --ce-text-muted: #64748b;

    /* Radii — compatti, enterprise */
    --ce-radius-sm: 4px;
    --ce-radius: 6px;
    --ce-radius-lg: 8px;

    /* Elevazione — solo per floaters (dropdown, modal, toast) */
    --ce-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ce-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --ce-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);

    /* Testo su sfondo primary / sfondi colorati pieni (loader, badge, header colorati) */
    --ce-on-primary: #ffffff;
    --ce-on-primary-muted: rgba(255, 255, 255, 0.85);

    /* Overlay bianchi semitrasparenti (loader, footer auth con backdrop-filter) */
    --ce-bg-overlay: rgba(255, 255, 255, 0.8);
    --ce-bg-overlay-soft: rgba(255, 255, 255, 0.7);

    /* Chat bubble — sfondi bolla messaggi area riservata */
    --ce-chat-mine-bg: #e8f1ec;
    --ce-chat-other-bg: #e9edf1;

    /* Install page (PWA Sportello Web) — accenti Material green branding install */
    --ce-install-accent: #15803d;
    --ce-install-accent-dark: #166534;
    --ce-install-accent-active: #005fa3;
    --ce-text-secondary-strong: #3f4254;
    --ce-surface-soft: #f5f8fa;
    --ce-surface-tint: #f8f9fc;
    --ce-border-soft: #e1e3ea;
    --ce-border-faint: #eff2f5;
    --ce-text-placeholder: #b5b5c3;

    /* --app-bg riferito dal Layout Lavoratore */
    --app-bg: var(--ce-bg);

    /* Remap Bootstrap vars (picked up by Bootstrap 5 utilities) */
    --bs-primary: var(--ce-primary);
    --bs-primary-rgb: var(--ce-primary-rgb);
    --bs-success: var(--ce-success);
    --bs-success-rgb: var(--ce-success-rgb);
    --bs-warning: var(--ce-warning);
    --bs-warning-rgb: var(--ce-warning-rgb);
    --bs-danger: var(--ce-danger);
    --bs-danger-rgb: var(--ce-danger-rgb);
    --bs-info: var(--ce-info);
    --bs-info-rgb: var(--ce-info-rgb);
    --bs-dark: var(--ce-dark);
    --bs-dark-rgb: var(--ce-dark-rgb);
    --bs-secondary: var(--ce-secondary);
    --bs-secondary-rgb: var(--ce-secondary-rgb);

    --bs-body-bg: var(--ce-bg);
    --bs-body-color: var(--ce-text);
    --bs-border-color: var(--ce-border-strong);
    --bs-border-radius: var(--ce-radius);
    --bs-border-radius-sm: var(--ce-radius-sm);
    --bs-border-radius-lg: var(--ce-radius-lg);
}


/* ==========================================================================
   2. Body / tipografia — densità moderata
   ========================================================================== */

body {
    background-color: var(--ce-bg);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
    color: var(--ce-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Allinea Lavoratore mobile alla stessa base */
body.lav-body {
    background-color: var(--ce-bg);
}

/* Titoli più compatti */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--ce-text);
}


/* ==========================================================================
   3. Skip-link (WCAG 2.1 SC 2.4.1 — Bypass Blocks)
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 10000;
    padding: .5rem 1rem;
    background: var(--ce-primary);
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: var(--ce-radius);
    box-shadow: var(--ce-shadow-md);
    transition: top .15s ease;
}

    .skip-link:focus,
    .skip-link:focus-visible {
        top: 0;
        outline: 3px solid #ffffff;
        outline-offset: -3px;
        color: #ffffff !important;
    }


/* ==========================================================================
   4. Override MD3 — gradient → tinta unita
   Tutte le classi bg-gradient-* MD3 diventano colore piatto desaturato.
   ========================================================================== */

.bg-gradient-primary {
    background-image: none !important;
    background-color: var(--ce-primary) !important;
}

.bg-gradient-success {
    background-image: none !important;
    background-color: var(--ce-success) !important;
}

.bg-gradient-warning {
    background-image: none !important;
    background-color: var(--ce-warning) !important;
}

.bg-gradient-danger {
    background-image: none !important;
    background-color: var(--ce-danger) !important;
}

.bg-gradient-info {
    background-image: none !important;
    background-color: var(--ce-info) !important;
}

.bg-gradient-dark {
    background-image: none !important;
    background-color: var(--ce-dark) !important;
}

.bg-gradient-secondary {
    background-image: none !important;
    background-color: var(--ce-secondary) !important;
}

.bg-gradient-light {
    background-image: none !important;
    background-color: var(--ce-surface-muted) !important;
}


/* ==========================================================================
   5. Override MD3 — shadow colorate → none
   Le shadow decorative colorate MD3 spariscono; elevazione reale solo
   dove serve (dropdown, modal — vedi sezione 14).
   ========================================================================== */

.shadow-primary,
.shadow-success,
.shadow-warning,
.shadow-danger,
.shadow-info,
.shadow-dark,
.shadow-secondary {
    box-shadow: none !important;
}

.shadow-none { box-shadow: none !important; }


/* ==========================================================================
   6. Override MD3 — border-radius
   ========================================================================== */

.border-radius-sm { border-radius: var(--ce-radius-sm) !important; }
.border-radius-md { border-radius: var(--ce-radius) !important; }
.border-radius-lg { border-radius: var(--ce-radius-lg) !important; }
.border-radius-xl { border-radius: var(--ce-radius-lg) !important; }
.border-radius-2xl { border-radius: var(--ce-radius-lg) !important; }
.border-radius-3xl { border-radius: var(--ce-radius-lg) !important; }


/* ==========================================================================
   7. Card — border 1px invece di shadow elevata
   ========================================================================== */

.card {
    border: 1px solid var(--ce-border) !important;
    border-radius: var(--ce-radius-lg) !important;
    box-shadow: none !important;
    background-color: var(--ce-surface);
}

/* Hover soft solo su card cliccabili (link) */
a.card {
    transition: border-color .15s ease, box-shadow .15s ease;
}

    a.card:hover {
        border-color: var(--ce-border-strong) !important;
        box-shadow: var(--ce-shadow-sm) !important;
        transform: none !important;
    }

/* Card-header flottante: mantiene la forma ma con radius ridotto e zero shadow */
.card-header > [class*="bg-gradient-"] {
    box-shadow: none !important;
    border-radius: var(--ce-radius-lg) !important;
}


/* ==========================================================================
   8. Bottoni — flat, radius compatto, no transform hover
   ========================================================================== */

.btn {
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: var(--ce-radius) !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .btn:hover,
    .btn:focus,
    .btn:active {
        box-shadow: none !important;
        transform: none !important;
    }

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

/* Bottoni gradient → tinta unita con hover scuro */
.btn.bg-gradient-primary {
    background-image: none !important;
    background-color: var(--ce-primary) !important;
    border-color: var(--ce-primary) !important;
    color: #fff !important;
}

    .btn.bg-gradient-primary:hover,
    .btn.bg-gradient-primary:focus {
        background-color: var(--ce-primary-dark) !important;
        border-color: var(--ce-primary-dark) !important;
        color: #fff !important;
    }

.btn.bg-gradient-success {
    background-image: none !important;
    background-color: var(--ce-success) !important;
    border-color: var(--ce-success) !important;
    color: #fff !important;
}

    .btn.bg-gradient-success:hover,
    .btn.bg-gradient-success:focus {
        background-color: var(--ce-success-dark) !important;
        border-color: var(--ce-success-dark) !important;
    }

.btn.bg-gradient-warning {
    background-image: none !important;
    background-color: var(--ce-warning) !important;
    border-color: var(--ce-warning) !important;
    color: #fff !important;
}

    .btn.bg-gradient-warning:hover,
    .btn.bg-gradient-warning:focus {
        background-color: var(--ce-warning-dark) !important;
        border-color: var(--ce-warning-dark) !important;
    }

.btn.bg-gradient-danger {
    background-image: none !important;
    background-color: var(--ce-danger) !important;
    border-color: var(--ce-danger) !important;
    color: #fff !important;
}

    .btn.bg-gradient-danger:hover,
    .btn.bg-gradient-danger:focus {
        background-color: var(--ce-danger-dark) !important;
        border-color: var(--ce-danger-dark) !important;
    }

.btn.bg-gradient-info {
    background-image: none !important;
    background-color: var(--ce-info) !important;
    border-color: var(--ce-info) !important;
    color: #fff !important;
}

    .btn.bg-gradient-info:hover,
    .btn.bg-gradient-info:focus {
        background-color: var(--ce-info-dark) !important;
        border-color: var(--ce-info-dark) !important;
    }

.btn.bg-gradient-dark {
    background-image: none !important;
    background-color: var(--ce-dark) !important;
    border-color: var(--ce-dark) !important;
    color: #fff !important;
}

    .btn.bg-gradient-dark:hover,
    .btn.bg-gradient-dark:focus {
        background-color: #0f172a !important;
        border-color: #0f172a !important;
    }

/* Bottoni outline */
.btn-outline-secondary {
    color: var(--ce-text-muted) !important;
    border-color: var(--ce-border-strong) !important;
    background-color: transparent !important;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        background-color: rgba(15, 23, 42, 0.04) !important;
        border-color: var(--ce-border-strong) !important;
        color: var(--ce-text) !important;
    }

/* Bottone bg-white dentro card-header flottante */
.card-header .btn.bg-white {
    background-color: #fff !important;
    box-shadow: none !important;
    border: 1px solid var(--ce-border-strong) !important;
}


/* ==========================================================================
   10. Sidenav — background #fafafa + testo scuro + accenti primary
   Il layout usa class="sidenav ... bg-white"; riportiamo testo/icone a
   scuro, cambiamo il bg a #fafafa per staccarlo dal content area.
   ========================================================================== */

.sidenav.bg-white {
    background-color: var(--ce-surface-muted) !important;
    border: 1px solid var(--ce-border) !important;
    box-shadow: none !important;
}

.sidenav.bg-white .navbar-brand,
.sidenav.bg-white .navbar-brand .navbar-brand-text,
.sidenav.bg-white .navbar-brand .navbar-brand-text strong,
.sidenav.bg-white .nav-link,
.sidenav.bg-white .nav-link .nav-link-text {
    color: var(--ce-text) !important;
}

.sidenav.bg-white .navbar-brand .navbar-brand-text small {
    color: var(--ce-text-muted) !important;
}

.sidenav.bg-white .navbar-nav .nav-link {
    border-radius: var(--ce-radius) !important;
    font-weight: 500 !important;
}

    .sidenav.bg-white .navbar-nav .nav-link i {
        color: var(--ce-text-muted) !important;
    }

    .sidenav.bg-white .navbar-nav .nav-link:hover {
        background-color: rgba(15, 23, 42, 0.04) !important;
    }

    .sidenav.bg-white .navbar-nav .nav-link.active {
        background-color: var(--ce-primary-soft) !important;
        color: var(--ce-primary) !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }

        .sidenav.bg-white .navbar-nav .nav-link.active i {
            color: var(--ce-primary) !important;
        }

.sidenav.bg-white .navbar-heading {
    color: var(--ce-text-muted) !important;
    font-weight: 600 !important;
}

.sidenav.bg-white hr.horizontal {
    background-image: linear-gradient(90deg, transparent, var(--ce-border-strong), transparent);
}

/* Brand icon nel sidenav-header — tinta unita primary invece di gradient verde hardcoded */
.sidenav .ce-brand-icon {
    background: var(--ce-primary) !important;
    border-radius: var(--ce-radius) !important;
}

/* Avatar utente nel menu topbar — tinta unita primary */
.navbar-main .nav-item.dropdown > .nav-link > .avatar {
    background: var(--ce-primary) !important;
}

/* Larghezza sidenav — override MD3 (14rem → 16rem, +~14%).
   MD3 definisce la larghezza tramite `max-width:14rem!important` su
   `.navbar-vertical.navbar-expand-*` + offset `.main-content` a 15rem e
   `translateX(-15.5rem)` per la posizione off-screen su viewport stretto.
   Per allargare uniformemente occorre sovrascrivere tutti gli stati. */
.navbar-vertical.navbar-expand-xs,
.navbar-vertical.navbar-expand-sm,
.navbar-vertical.navbar-expand-md,
.navbar-vertical.navbar-expand-lg,
.navbar-vertical.navbar-expand-xl,
.navbar-vertical.navbar-expand-xxl {
    max-width: 16rem !important;
}

@media (min-width: 1200px) {
    .sidenav.fixed-start + .main-content {
        margin-left: 17rem;
    }
}

@media (max-width: 1199.98px) {
    .g-sidenav-show:not(.rtl) .sidenav {
        transform: translateX(-17.5rem);
    }

    .g-sidenav-show.rtl .sidenav {
        transform: translateX(17.5rem);
    }

    /* Pinned deve vincere sulle traslazioni sopra (stessa specificità, ordine più recente). */
    .g-sidenav-show.g-sidenav-pinned .sidenav {
        transform: translateX(0);
    }
}

.g-sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content {
    margin-left: 17.5rem;
}

/* Banner contestuali sidebar Consulente/Impresa (impresa selezionata, utenza
   di lavoro consulente). Stessa estetica info-soft per entrambe le aree. */
.sidebar-impresa-banner,
.sidebar-consulente-banner {
    background: var(--ce-info-soft);
    border-color: var(--ce-info) !important;
}

    .sidebar-impresa-banner .sidebar-banner-icon,
    .sidebar-impresa-banner .sidebar-banner-title,
    .sidebar-consulente-banner .sidebar-banner-icon,
    .sidebar-consulente-banner .sidebar-banner-title {
        color: var(--ce-info);
    }

    .sidebar-impresa-banner .sidebar-banner-icon,
    .sidebar-consulente-banner .sidebar-banner-icon {
        font-size: 1.25rem;
    }

    .sidebar-impresa-banner .sidebar-banner-action,
    .sidebar-consulente-banner .sidebar-banner-action {
        background: var(--ce-info-soft);
        color: var(--ce-info);
        border: 1px solid var(--ce-info);
    }


/* ==========================================================================
   11. Avatar + icon-shape — flat, no shadow
   ========================================================================== */

.avatar, .icon, .icon-shape {
    box-shadow: none !important;
}

/* Avatar con gradient utility — già gestiti dalla sezione 4 (bg-gradient-*),
   qui solo reset border-radius ai token. */
.avatar {
    border-radius: var(--ce-radius-lg) !important;
}

.avatar.rounded-circle {
    border-radius: 50% !important;
}


/* ==========================================================================
   12. Table header — neutralità visiva, separatore soft
   ========================================================================== */

.table {
    color: var(--ce-text);
    --bs-table-bg: var(--ce-surface);
}

    .table thead th {
        background-color: transparent;
        border-bottom: 1px solid var(--ce-border-strong) !important;
        color: var(--ce-text-muted) !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em;
    }

    .table tbody tr {
        border-bottom: 1px solid var(--ce-border);
    }

        .table tbody tr:hover {
            background-color: rgba(15, 23, 42, 0.02);
        }


/* ==========================================================================
   13. Badge — flat, padding compatto
   ========================================================================== */

.badge {
    font-weight: 600;
    border-radius: var(--ce-radius-sm);
    padding: 0.3em 0.55em;
    text-transform: none;
    letter-spacing: 0;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
}

/* Filter chip — standard a due livelli di emphasis per filtri "stato/tipo"
   in cima alle liste. Sostituisce il pattern legacy `a.badge bg-gradient-*`
   che perdeva leggibilità (testo link slate-blue su bg slate-gray) e
   confondeva "filtro attivo" con "stato record".
   Non-selezionato: outline gray, testo scuro.
   Selezionato (.is-active): fill primary, testo bianco, check-icon. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.2;
    padding: .4em .7em;
    border-radius: var(--ce-radius);
    background-color: #fff;
    border: 1px solid var(--ce-border-strong);
    color: var(--ce-text) !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    cursor: pointer;
}

    .filter-chip:hover,
    .filter-chip:focus {
        background-color: rgba(var(--ce-primary-rgb), .06);
        border-color: var(--ce-primary);
        color: var(--ce-text) !important;
        text-decoration: none !important;
    }

    .filter-chip .chip-count {
        color: var(--ce-text-muted);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .filter-chip.is-active {
        background-color: var(--ce-primary);
        border-color: var(--ce-primary);
        color: #fff !important;
    }

        .filter-chip.is-active:hover,
        .filter-chip.is-active:focus {
            background-color: var(--ce-primary-dark);
            border-color: var(--ce-primary-dark);
            color: #fff !important;
        }

        .filter-chip.is-active .chip-count {
            color: rgba(255, 255, 255, .85);
        }

        .filter-chip.is-active::before {
            content: "\ea5e"; /* ti-check */
            font-family: "tabler-icons";
            font-size: .9em;
            line-height: 1;
        }


/* ==========================================================================
   14. Dropdown / modal — elevazione reale (unica ombra permessa)
   ========================================================================== */

.dropdown-menu {
    border: 1px solid var(--ce-border-strong) !important;
    border-radius: var(--ce-radius-lg) !important;
    box-shadow: var(--ce-shadow-md) !important;
    padding: 0.375rem 0;
}

    .dropdown-menu .dropdown-item {
        padding: 0.5rem 0.875rem;
        font-size: 0.875rem;
        color: var(--ce-text);
    }

        .dropdown-menu .dropdown-item:hover,
        .dropdown-menu .dropdown-item:focus {
            background-color: rgba(15, 23, 42, 0.04);
            color: var(--ce-text);
        }

        .dropdown-menu .dropdown-item.text-danger {
            color: var(--ce-danger) !important;
        }

            .dropdown-menu .dropdown-item.text-danger:hover {
                background-color: rgba(var(--ce-danger-rgb), 0.08);
            }

.modal-content {
    border: 1px solid var(--ce-border-strong) !important;
    border-radius: var(--ce-radius-lg) !important;
    box-shadow: var(--ce-shadow-lg) !important;
}


/* ==========================================================================
   15. Link / text-primary utility — allineare all'accent
   ========================================================================== */

a, a:visited {
    color: var(--ce-primary);
    text-decoration: none;
}

    a:hover,
    a:focus {
        color: var(--ce-primary-dark);
        text-decoration: underline;
    }

/* Link su sfondo scuro (header flottante bg-gradient-*) — no underline */
.card-header a,
.card-header a:hover {
    text-decoration: none;
}

.text-primary { color: var(--ce-primary) !important; }
.text-success { color: var(--ce-success) !important; }
.text-warning { color: var(--ce-warning) !important; }
.text-danger  { color: var(--ce-danger)  !important; }
.text-info    { color: var(--ce-info)    !important; }
.text-secondary { color: var(--ce-text-muted) !important; }
.text-dark    { color: var(--ce-text)    !important; }

/* Breadcrumb topbar */
.breadcrumb-item a { color: var(--ce-text-muted); }
.breadcrumb-item.active { color: var(--ce-text); }


/* ==========================================================================
   16. Navbar topbar — pulisce shadow e border-radius grandi
   ========================================================================== */

.navbar-main {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.main-content {
    border-radius: 0 !important;
    background-color: var(--ce-bg);
}



/* ==========================================================================
   17. Scroll-to-top button (#ce_scrolltop / .scrolltop)
   Toggle `.show` gestito da CassaEdileWeb.js (scroll > 100px).
   ========================================================================== */

.scrolltop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--ce-primary);
    color: #fff;
    border-radius: var(--ce-radius);
    box-shadow: var(--ce-shadow-md);
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 1030;
    cursor: pointer;
    border: 0;
}

.scrolltop:hover {
    background-color: var(--ce-primary-dark);
    color: #fff;
}

.scrolltop.show {
    display: flex;
    opacity: 1;
}


/* ==========================================================================
   18. DataTables — contenimento orizzontale + soppressione paginazione
   --------------------------------------------------------------------------
   - Il wrapper iniettato da DataTables deve rispettare la larghezza del
     contenitore (evita overflow a destra quando la tabella + le toolbar
     superano la viewport).
   - `paging: false` è impostato nei defaults JS, ma nascondiamo i controlli
     residui per sicurezza (es. tabelle inizializzate con opzioni custom che
     potrebbero ri-attivarli inavvertitamente).
   ========================================================================== */

.dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    /* Padding orizzontale: info/filter/tabella non toccano i bordi del card-body
       (il card-body ha px-0 per lasciare la tabella a tutta larghezza). */
    padding: 0 1rem;
}

.dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}

.dataTables_wrapper table.dataTable {
    width: 100% !important;
}

.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length {
    display: none !important;
}

/* Info in fondo (X elementi nella lista) */
.dataTables_wrapper .dataTables_info {
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    color: var(--ce-text-muted);
    font-size: 0.875rem;
}

/* Filter in alto (label "Cerca:" + input) */
.dataTables_wrapper .dataTables_filter {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: right;
}

.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    color: var(--ce-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input[type="search"] {
    margin-left: 0;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--ce-text);
    background-color: #fff;
    border: 1px solid var(--ce-border-strong);
    border-radius: var(--ce-radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 14rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ce-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--ce-primary-rgb), 0.15);
}