/* =====================================================================
 * ui-refresh.css - livello grafico unificato del gestionale.
 *
 * Caricato per ultimo in layouts/app.blade.php: vince su style.css,
 * components.css e custom.css senza doverli modificare.
 *
 * Indice:
 *   1. Token
 *   2. Pagina e sezioni
 *   3. Card e testatine
 *   4. Tabelle (testatina scura / testatine campi grigie / righe bianche)
 *   5. Colonna azioni (nessuna sovrapposizione a 1024px)
 *   6. Form ed etichette
 *   7. Menu laterale
 *   8. Dashboard alert
 *   9. Controlli DataTables, modali, varie
 * ===================================================================== */

/* --- 1. Token ------------------------------------------------------- */
:root {
    --ui-brand: #0a243e;
    --ui-brand-soft: #143a5e;
    --ui-brand-line: #1d4470;
    --ui-page-bg: #eef1f5;
    --ui-card-bg: #fff;
    --ui-card-border: #dfe4ea;
    --ui-head-bg: #e9edf2;
    --ui-head-fg: #0a243e;
    --ui-text: #2d3a4b;
    --ui-muted: #7b8794;
    --ui-row-h: 40px;
    --ui-radius: 4px;
}

/* --- 2. Pagina e sezioni -------------------------------------------- */
body {
    background-color: var(--ui-page-bg);
    color: var(--ui-text);
}

/* Le spaziature che dipendono dal menu laterale valgono solo per il
   layout di amministrazione (.main-wrapper-1); il portale clienti usa
   layout-3, senza sidebar. */
/* La fascia scura dietro la barra superiore e' alta 115px in stisla e
   sbuca sotto la barra: la si porta all'altezza della barra stessa. */
.navbar-bg {
    height: 58px;
}

.main-navbar {
    min-height: 58px;
}

.main-wrapper-1 .main-content {
    padding-top: 70px;
    padding-right: 18px;
    padding-bottom: 10px;
    padding-left: 268px;
}

/* Il pie' di pagina segue il contenuto, altrimenti scorre sotto al
   menu laterale. */
.main-wrapper-1 .main-footer {
    padding-left: 268px;
}

/* Menu laterale chiuso dal pulsante in barra: il contenuto recupera
   la larghezza invece di lasciare una colonna vuota. */
body.sidebar-gone .main-content,
body.sidebar-gone .main-footer {
    padding-left: 18px !important;
}

/* La testata di pagina fa da barra compatta, non da blocco alto. */
.section .section-header {
    margin-bottom: 14px;
    padding: 10px 18px;
    min-height: 52px;
    background-color: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    border-left: 4px solid var(--ui-brand);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(10, 36, 62, .06);
}

.main-wrapper-1 .section .section-header {
    margin-top: 0;
    padding-left: 18px;
    padding-right: 18px;
    border-top: 1px solid var(--ui-card-border);
}

.section .section-header {
    flex-wrap: wrap;
    row-gap: 8px;
}

.section .section-header h1 {
    flex: 0 0 auto;
    margin-right: 14px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ui-brand);
}

/* Titolo e filtri non devono spezzarsi a meta' parola quando lo spazio
   si stringe: vanno semmai a capo in blocco. */
.section .section-header .btn,
.section .section-header .section-header-breadcrumb {
    white-space: nowrap;
}

.section .section-header .section-header-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
}

.section .section-header .section-header-breadcrumb {
    margin-top: 0 !important;
}

.section-body {
    margin-top: 0;
}

/* --- 3. Card e testatine -------------------------------------------- */
.card {
    margin-bottom: 18px;
    background-color: var(--ui-card-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(10, 36, 62, .06);
}

.card .card-body {
    padding: 14px 16px;
}

/* La testatina della card e' la riga scura alta 40px che intesta
   l'oggetto della tabella o della sezione. */
.card > .card-header,
.card > .collapse > .card-header {
    min-height: var(--ui-row-h);
    padding: 0 14px;
    background-color: var(--ui-brand) !important;
    border: 0;
    border-bottom: 1px solid var(--ui-brand-line);
    border-radius: 0;
    line-height: 1.2;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card > .card-header > *,
.card > .card-header h1,
.card > .card-header h2,
.card > .card-header h3,
.card > .card-header h4,
.card > .card-header h5,
.card > .card-header h6,
.card > .card-header .card-title,
.card > .card-header a,
.card > .card-header label,
.card > .card-header i {
    color: #fff !important;
}

.card > .card-header h1,
.card > .card-header h2,
.card > .card-header h3,
.card > .card-header h4,
.card > .card-header h5,
.card > .card-header h6,
.card > .card-header .card-title {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.card > .card-header .badge {
    color: var(--ui-brand) !important;
    background-color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.card > .card-header .btn {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 26px;
    border-radius: var(--ui-radius) !important;
}

.card > .card-header .form-control,
.card > .card-header .select2-container .select2-selection--single {
    height: 28px;
    min-height: 28px;
    font-size: 12px;
    border-radius: var(--ui-radius);
}

/* L'editor summernote costruisce la sua barra strumenti come
   .note-editor.card > .note-toolbar.card-header: non e' una testata di
   sezione e va lasciata con l'aspetto suo. */
.note-editor > .card-header,
.note-editor > .note-toolbar {
    min-height: 0;
    padding: 5px 8px;
    background-color: #f7f8fa !important;
    border-bottom: 1px solid var(--ui-card-border);
    color: inherit;
    display: block;
}

.note-editor > .card-header > *,
.note-editor > .card-header i,
.note-editor > .card-header .btn,
.note-editor > .card-header a {
    color: #495057 !important;
}

.note-editor > .card-header .btn {
    height: auto;
    padding: 5px 8px;
    font-size: 14px;
    line-height: 1.2;
}

/* Header iniettato da ui-refresh.js sopra le tabelle senza testatina. */
.card > .card-header.ui-auto-header {
    justify-content: space-between;
}

/* --- 4. Tabelle ----------------------------------------------------- */
.table {
    margin-bottom: 0;
    background-color: #fff;
    color: var(--ui-text);
}

/* Righe dati: bianche, alte 40px. Il selettore ricalca quello di
   style.css (padding 0 25px / height 60px) per sovrascriverlo. */
/* I selettori sono ridondanti di proposito: servono a superare
   jquery.dataTables.min.css (table.dataTable tbody td) e custom.css
   (.dataTable td { font-size: 14px !important }). */
.table td,
.table th,
.table:not(.table-sm):not(.table-md):not(.dataTable) td,
.table:not(.table-sm):not(.table-md):not(.dataTable) th,
table.dataTable td,
table.dataTable th,
table.dataTable tbody td,
table.dataTable tbody th {
    box-sizing: border-box;
    height: var(--ui-row-h);
    padding: 4px 10px !important;
    font-size: 13.5px !important;
    line-height: 1.25;
    vertical-align: middle;
}

/* Testatine dei campi: riga grigia, stessa altezza. */
.table thead th,
.table:not(.table-sm) thead th,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead tr th {
    box-sizing: border-box;
    height: var(--ui-row-h);
    padding: 4px 10px !important;
    background-color: var(--ui-head-bg);
    color: var(--ui-head-fg);
    font-size: 12.5px !important;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--ui-card-border) !important;
}

.table tbody tr {
    border-bottom: 1px solid #edf0f4;
}

.table tbody td {
    background-color: transparent;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfd;
}

.table tbody tr:hover,
.table-responsive-sm tbody tr:hover {
    background-color: #eaf0f7;
    color: var(--ui-text);
}

.table tfoot th,
.table tfoot td {
    box-sizing: border-box;
    height: var(--ui-row-h);
    padding: 4px 10px;
    background-color: var(--ui-head-bg);
    color: var(--ui-head-fg);
    font-size: 13px;
    font-weight: 700;
    border-top: 1px solid var(--ui-card-border);
}

/* Campi dentro le righe editabili (righe fattura, preventivo, ...). */
.table td .form-control,
.table td .custom-select {
    height: 30px;
    min-height: 30px;
    padding: 2px 8px;
    font-size: 13px;
}

/* Una tabella a filo card non deve avere doppio bordo laterale. */
.card > .card-body > .table-responsive,
.card > .card-body > .table,
.card > .card-body > .dataTables_wrapper {
    margin-bottom: 0;
}

/* --- 5. Colonna azioni ---------------------------------------------- */
/* I pulsanti restano su una sola riga e la colonna si stringe al
   contenuto: a 1024px non finiscono mai sopra i dati. */
/* .action-column viene applicata da ui-refresh.js alla colonna delle
   azioni (riconosciuta dall'intestazione) e ad ogni ridisegno della
   DataTable; :has() copre i casi in cui il JS non gira. */
.table td.action-column,
.table th.action-column,
.table td:has(> .action-btn),
.table th:has(> .action-btn) {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.table td.action-column > *,
.table td:has(> .action-btn) > * {
    float: none !important;
    position: static !important;
}

.action-btn,
.table .btn.has-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0 !important;
    margin-right: 3px !important;
    font-size: 12px;
    line-height: 1;
    border-radius: var(--ui-radius);
    vertical-align: middle;
}

.action-btn:last-child,
.table .btn.has-icon:last-child {
    margin-right: 0 !important;
}

.action-btn i {
    font-size: 12px !important;
}

@media (min-width: 992px) and (max-width: 1366px) {
    /* Risoluzioni standard 1024/1280: si guadagna larghezza dai
       margini, non comprimendo la colonna azioni. */
    .main-wrapper-1 .main-content {
        padding-left: 258px;
        padding-right: 12px;
    }

    .table td,
    .table th,
    table.dataTable td,
    table.dataTable th {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
    }

    .table thead th,
    table.dataTable thead th {
        font-size: 12px;
    }
}

/* --- 6. Form ed etichette ------------------------------------------- */
.form-group {
    margin-bottom: 12px;
}

.form-group > label,
.form-group label,
.form-group .control-label,
form label,
.card-body > .row label,
label.col-form-label {
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: normal !important;
    line-height: 1.35;
    margin-bottom: 4px;
    color: var(--ui-brand);
}

/* Le etichette non restano "appese": stanno attaccate al loro campo. */
.form-group > label + .form-control,
.form-group > label + .input-group,
.form-group > label + .select2-container,
.form-group > label + textarea {
    margin-top: 0;
}

/* .image__file-upload e' una <label> usata come pulsante su fondo
   colorato: la regola generale sulle label la renderebbe scura su
   scuro. La maggior parte delle viste non ha la classe text-white. */
label.image__file-upload,
label.image__file-upload:hover,
.image__file-upload {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.4;
}

.form-group .required {
    margin-left: 2px;
}

/* style.css impone 42px con un selettore a tre classi: va pareggiato. */
.form-control,
.custom-select,
.form-control:not(.form-control-sm):not(.form-control-lg),
select.form-control:not([size]):not([multiple]) {
    height: 36px;
    min-height: 36px;
    padding: 5px 10px;
    font-size: 14px;
    color: var(--ui-text);
    background-color: #fff;
    border: 1px solid #ccd4de;
    border-radius: var(--ui-radius);
}

textarea.form-control,
textarea.form-control:not(.form-control-sm):not(.form-control-lg) {
    height: auto !important;
    min-height: 70px;
}

.form-control:focus {
    border-color: var(--ui-brand-soft);
    box-shadow: 0 0 0 2px rgba(10, 36, 62, .10);
}

.input-group-text,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    background-color: var(--ui-head-bg);
    border: 1px solid #ccd4de;
    color: var(--ui-brand);
}

/* Select2 si disegna da solo e restava a 42px mentre text, select
   semplici e input-group stanno a 36px: allineato all'altezza comune
   dei campi (create/edit di preventivi e vendite). */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 36px;
    height: 36px;
    padding: 0 4px;
    border: 1px solid #ccd4de;
    border-radius: var(--ui-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    padding-left: 6px;
    padding-right: 24px;
    font-size: 14px;
    color: var(--ui-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 34px;
    line-height: 34px;
}

/* Le multiple crescono con le pastiglie: 36px e' il minimo, non un
   tetto. Le misure interne stanno sotto i 36px cosi' da vuota resta
   alta quanto gli altri campi. */
.select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    height: auto;
    padding: 1px 4px;
}

/* In flex le pastiglie e il campo di ricerca non generano line box
   extra: senza, la select restava 2px piu' alta degli altri campi. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0 2px;
    line-height: 1.2;
    min-height: 32px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0;
    padding: 1px 6px;
    font-size: 12.5px;
    line-height: 20px;
}

.select2-container--default .select2-search--inline .select2-search__field {
    height: 24px;
    margin: 0;
    font-size: 14px;
}

.select2-container .select2-search--dropdown .select2-search__field {
    height: 32px;
    padding: 4px 8px;
    font-size: 14px;
}

.select2-container--default .select2-results__option {
    font-size: 14px;
    padding: 5px 10px;
}

/* Dentro le righe di prodotti e servizi i campi sono piu' bassi: la
   select2 delle imposte deve seguirli, non i 36px del form. */
.table td .select2-container--default .select2-selection--single,
.table td .select2-container--default .select2-selection--multiple {
    min-height: 30px;
    height: auto;
}

.table td .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
}

.table td .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px;
}

/* Viste di dettaglio in sola lettura: etichetta sopra, valore sotto,
   con un separatore che delimita il blocco. */
.profile-label-color,
.detail-label,
.show-label {
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: normal !important;
    color: var(--ui-brand);
}

/* --- Sotto-sezioni dentro le card ----------------------------------- */
.section .section-title:before,
.card .card-body .section-title:before {
    content: none;
}

.card .card-body .section-title {
    margin: 18px 0 8px;
    padding-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--ui-brand);
    border-bottom: 2px solid var(--ui-head-bg);
}

/* --- Dettaglio vendite e preventivi (primo tab) ---------------------- */
/* Il blocco dei dati e le tabelle prodotti/servizi stanno dentro un
   unico .row, i cui margini negativi li portavano a filo della card,
   piu' a sinistra delle tabelle degli elenchi. */
.ui-detail-row {
    margin-left: 0;
    margin-right: 0;
}

/* Le tabelle restano a filo del corpo card, come negli elenchi: il
   padding di 10px delle celle le allinea al testo delle etichette. */
.ui-detail-row > table,
.ui-detail-row > .table-responsive,
.ui-detail-row > h6 {
    margin-left: 0;
    margin-right: 0;
}

.ui-detail-row > h6 {
    padding-left: 10px;
}

/* --- Tab ------------------------------------------------------------ */
.nav-tabs {
    border-bottom: 2px solid var(--ui-card-border);
}

.nav-tabs .nav-link {
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--ui-brand);
}

.nav-tabs .nav-link.active {
    color: var(--ui-brand);
    background-color: transparent;
    border-bottom-color: var(--ui-brand);
}

/* --- 7. Menu laterale ----------------------------------------------- */
.main-sidebar,
body.sidebar-mini .main-sidebar:after,
.sidebar-sticky {
    background-color: var(--ui-brand) !important;
}

.main-sidebar {
    width: 250px;
    box-shadow: 2px 0 6px rgba(10, 36, 62, .12);
}

.main-sidebar .sidebar-brand,
.main-sidebar .sidebar-brand.sidebar-sticky {
    background-color: var(--ui-brand) !important;
    border-bottom: 1px solid var(--ui-brand-line);
}

.main-sidebar .sidebar-menu li.menu-header {
    padding: 10px 16px 4px;
    color: rgba(255, 255, 255, .45) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.main-sidebar .sidebar-menu li a,
.main-sidebar .sidebar-menu li a .menu-text-wrap,
.main-sidebar .sidebar-menu li a span {
    color: rgba(255, 255, 255, .88) !important;
}

.main-sidebar .sidebar-menu li a {
    height: 36px;
    padding: 0 16px;
    font-size: 13.5px;
    letter-spacing: .2px;
}

/* Icone uniformi: stessa dimensione, stesso colore, mai multicolore. */
.main-sidebar .sidebar-menu li a i,
.main-sidebar .sidebar-menu li a .fa,
.main-sidebar .sidebar-menu li a .fas,
.main-sidebar .sidebar-menu li a .far,
.main-sidebar .sidebar-menu li a .fab,
.sidebar-menu i[class*="fa-"] {
    width: 22px;
    min-width: 22px;
    margin-right: 10px;
    font-size: 14px !important;
    line-height: inherit;
    text-align: center;
    color: rgba(255, 255, 255, .88) !important;
    opacity: 1;
}

.main-sidebar .sidebar-menu li a:hover {
    background-color: rgba(255, 255, 255, .08);
}

.main-sidebar .sidebar-menu li a:hover,
.main-sidebar .sidebar-menu li a:hover i,
.main-sidebar .sidebar-menu li a:hover span {
    color: #fff !important;
}

.main-sidebar .sidebar-menu li.active > a,
body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li.active > a,
body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li.active > a:hover,
body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li > a:focus {
    background-color: rgba(255, 255, 255, .14) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #fff;
}

.main-sidebar .sidebar-menu li.active > a,
.main-sidebar .sidebar-menu li.active > a i,
.main-sidebar .sidebar-menu li.active > a span {
    color: #fff !important;
    background-color: transparent;
}

.main-sidebar .sidebar-menu li.active > a {
    background-color: rgba(255, 255, 255, .14) !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu,
.main-sidebar .sidebar-menu li.active ul.dropdown-menu {
    background-color: rgba(0, 0, 0, .16) !important;
}

/* style.css forza il fondo bianco sulle voci di sottomenu
   (.dropdown-menu .side-menus a): va riportato in tinta. */
.main-sidebar .sidebar-menu li ul.dropdown-menu li a,
.main-sidebar .dropdown-menu .side-menus a {
    height: 34px;
    padding-left: 34px;
    font-size: 13px;
    color: rgba(255, 255, 255, .75) !important;
    background-color: transparent !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a i {
    width: 20px;
    min-width: 20px;
    margin-right: 8px;
    font-size: 12px !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover,
.main-sidebar .sidebar-menu li.active > ul.dropdown-menu li a:hover,
.main-sidebar .dropdown-menu .side-menus a:hover {
    background-color: rgba(255, 255, 255, .08) !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover,
.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover i,
.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover span {
    color: #fff !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a {
    background-color: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 3px 0 0 #fff;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a,
.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a i,
.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a span {
    color: #fff !important;
    font-weight: 600;
}

.sidebar-search-box .form-control {
    background-color: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}

.sidebar-search-box .form-control::placeholder {
    color: rgba(255, 255, 255, .55);
}

/* --- 8. Dashboard alert --------------------------------------------- */
/* Ogni sezione di alert e' una card con testata scura, come su CIE ma
   in tinta unica. */
.ui-alert-section > .card-header {
    cursor: pointer;
}

.ui-alert-section > .card-header .accordion-icon {
    margin-left: auto;
    font-size: 12px;
}

/* Stesso respiro delle tabelle degli elenchi: il corpo card non e' a
   filo, la tabella sta dentro il padding standard. */
.ui-alert-section .card-body {
    padding: 14px 16px;
}

.ui-alert-section .table {
    margin-bottom: 0;
}

.ui-alert-section .ui-alert-scroll {
    max-height: 340px;
    overflow-y: auto;
}

/* Nelle sezioni di alert il conteggio sta gia' nel badge della
   testatina: la riga "Mostra x da y a z" e' ridondante. */
.ui-alert-section .dataTables_info {
    display: none !important;
}

.ui-alert-section .dataTables_paginate {
    padding-top: 4px;
    float: right;
}

.ui-alert-empty {
    padding: 14px;
    text-align: center;
    color: var(--ui-muted);
    font-size: 13px;
}

#alertsAccordion .card {
    margin-bottom: 12px;
}

/* --- 9. DataTables, modali, varie ----------------------------------- */
.dataTables_wrapper {
    font-size: 13px !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 8px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input.form-control {
    height: 32px !important;
    min-height: 32px;
    padding: 3px 8px !important;
    border: 1px solid #ccd4de;
    border-radius: var(--ui-radius);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding-top: 8px;
    font-size: 12.5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
    color: #fff !important;
}

.modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.modal-header {
    min-height: var(--ui-row-h);
    padding: 0 14px;
    background-color: var(--ui-brand);
    border-bottom: 0;
    align-items: center;
}

.modal-header .modal-title,
.modal-header .close,
.modal-header .close span {
    color: #fff !important;
    opacity: 1;
}

.modal-header .modal-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.modal-body {
    padding: 14px 16px;
}

.btn {
    border-radius: var(--ui-radius);
    font-size: 13.5px;
    font-weight: 600;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ui-brand);
    border-color: var(--ui-brand);
}

.btn-primary:hover {
    background-color: var(--ui-brand-soft);
    border-color: var(--ui-brand-soft);
}

.badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 8px;
}

/* custom.css inchioda il pie' di pagina in basso (position: fixed):
   cosi' copre il contenuto durante lo scorrimento. Torna in linea. */
.main-footer {
    position: static !important;
    padding: 10px 18px;
    font-size: 12.5px;
    background-color: transparent !important;
    border-top: 1px solid var(--ui-card-border);
}

body #app {
    margin-bottom: 0 !important;
}

/* Contatori di stato in testa agli elenchi: pastiglie compatte al posto
   dei dischi da 60px, per guadagnare spazio verticale. */
.ticket-statistics {
    height: 42px;
    width: 42px;
    font-size: 15px;
    font-weight: 700;
    line-height: 42px;
    box-shadow: none;
}

.ticket-statistics p {
    padding-top: 0 !important;
    margin-bottom: 0;
    line-height: 42px;
}

.owl-carousel .item h5,
.ticket-statistics + h5 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ui-brand);
}

.row.justify-content-md-center.text-center.mb-4 {
    margin-bottom: 8px !important;
}

/* Barra dei filtri delle DataTables: una riga compatta, non un blocco. */
.dataTables_wrapper > .row:first-child {
    margin-bottom: 0;
}

.dataTables_wrapper > .row:first-child > div {
    padding-top: 0;
    padding-bottom: 6px;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    margin-bottom: 0;
    font-size: 13px !important;
    font-weight: 400;
}

/* Sidebar compatta: il contenuto segue la larghezza ridotta. */
body.sidebar-mini .main-content {
    padding-left: 90px !important;
}

@media (max-width: 991.98px) {
    .main-wrapper-1 .main-content,
    body.sidebar-mini .main-content {
        padding-left: 18px !important;
        padding-right: 18px;
    }
}