html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================
    CUSTOMIZZAZIONE DATATABLES BOOTSTRAP 5 
========================================= */

/* 1. ALLINEAMENTO E MARGINI GENERALI */
div.dataTables_wrapper > div.row:first-child,
div.dataTables_wrapper > div.row:last-child {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

div.dataTables_wrapper > div.row:first-child {
    margin-bottom: 1rem;
    align-items: center;
}

div.dataTables_wrapper > div.row:last-child {
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
    align-items: center;
}

/* 2. BARRA DI RICERCA ("Cerca:") */
div.dataTables_wrapper div.dataTables_filter label {
    font-weight: 500;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

div.dataTables_wrapper div.dataTables_filter input {
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
    padding: 0.4rem 1rem;
    width: 250px;
    transition: all 0.2s ease-in-out;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    background-color: #fff;
    border-color: #86b7fe;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* 3. MENU LUNGHEZZA ("Mostra X elementi") */
div.dataTables_wrapper div.dataTables_length label {
    font-weight: 500;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

div.dataTables_wrapper div.dataTables_length select {
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    cursor: pointer;
}

/* 4. INFO TESTO ("Risultati da 1 a X...") */
div.dataTables_wrapper div.dataTables_info {
    padding-top: 0 !important;
    color: #858c93;
    font-size: 0.85rem;
}

/* 5. PAGINAZIONE (Pulsanti 1, 2, Precedente, Successivo) */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin-bottom: 0;
    gap: 0.25rem;
}

.page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    border-radius: 0.5rem !important;
    font-weight: 600;
    box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.2);
}

.page-link {
    color: #495057;
    border: 1px solid transparent;
    border-radius: 0.5rem !important;
    padding: 0.375rem 0.875rem;
    transition: all 0.2s;
}

.page-link:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
    border-color: #e9ecef;
}

.page-item.disabled .page-link {
    background-color: transparent;
    border-color: transparent;
    color: #ced4da;
}

/*    6. OTTIMIZZAZIONE RESPONSIVE PULITA*/
/* Rimuove l'icona/freccia sovrapposta dal td dell'ID */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    display: none !important;
}

/* Padding standard senza lo spazio vuoto dell'icona rimossa */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    padding-left: 1rem !important;
}

/* Cursore a mano per indicare che la riga è cliccabile per aprirsi */
table.dataTable.dtr-inline.collapsed > tbody > tr {
    cursor: pointer;
}

/* Stile della riga espansa (Child Row) */
table.dataTable > tbody > tr.child {
    background-color: #f8fafc !important;
}

table.dataTable > tbody > tr.child td.child {
    padding: 0.85rem 1.5rem !important;
    border-bottom: 1px solid #e9ecef;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #dee2e6;
    padding-bottom: 0.35rem;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Titolo della colonna espansa (es. "Email:", "Phone Number:") */
table.dataTable > tbody > tr.child span.dtr-title {
    font-weight: 600;
    color: #495057;
    min-width: 130px;
    display: inline-block;
}

/* Valore della cella espansa */
table.dataTable > tbody > tr.child span.dtr-data {
    color: #6c757d;
}

/* Allinea in orizzontale i pulsanti azione anche quando finiscono nella tendina */
table.dataTable > tbody > tr.child span.dtr-data .d-flex {
    justify-content: flex-start !important;
    gap: 0.5rem;
}

/* Evita selezioni di testo accidentali facendo doppio clic sulla riga */
table.dataTable tbody tr {
    user-select: none;
    cursor: pointer;
}
/* =========================================
                SELECT 2
========================================= */
/* Stile base proporzionato agli input standard di Bootstrap 5 */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px); /* Altezza standard ~38px */
    padding: 0.375rem 0.75rem;
    font-size: 1rem; /* Font size standard */
    font-weight: 400;
    line-height: 1.5;
    border-radius: 0.375rem; /* Bordo standard Bootstrap */
    border-color: #dee2e6;
    background-color: #f8f9fa; /* Colore per abbinarsi a bg-light */
}

/* Centra perfettamente il testo verticalmente */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: #212529;
}

/* Freccina di destra allineata al centro */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
}

/* Focus azzurro in stile Bootstrap quando clicchi il Select */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* Fix per il pulsante affiancato "Nuovo Cliente" (Input Group) */
.input-group > .select2-container--bootstrap-5 {
    flex: 1 1 auto;
    width: 1% !important;
}

/* Rimuove il bordo destro arrotondato del select per far aderire il bottone "Nuovo" */
.input-group > .select2-container--bootstrap-5 .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* =======================================================
   STILE SELECT2 MULTIPLO IDENTICO A INDEX
   ======================================================= */
.select2-container { width: 100% !important; }

.select2-container .select2-selection--multiple {
    min-height: 38px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.5rem !important;
    padding: 3px 8px !important;
    display: block !important;
    cursor: text !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container--open .select2-selection--multiple,
.select2-container .select2-selection--multiple:focus {
    background-color: #ffffff !important;
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    direction: ltr !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 5px !important;
    width: 100% !important;
}

.select2-container .select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 160px !important;
    order: 99 !important;
}

.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    height: 28px !important;
    line-height: 28px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    color: #495057 !important;
    text-align: left !important;
    direction: ltr !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    margin: 2px 0 !important;
    padding: 2px 8px 2px 10px !important;
    background-color: #e7f1ff !important;
    border: 1px solid #b6d4fe !important;
    border-radius: 50rem !important;
    color: #0d6efd !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    gap: 6px !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(13, 110, 253, 0.05);
}

.select2-container .select2-selection--multiple .select2-selection__choice:hover {
    background-color: #cfe2ff !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: rgba(13, 110, 253, 0.15) !important;
    color: #0d6efd !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: #dc3545 !important;
    color: #ffffff !important;
}

.select2-container .select2-selection--multiple .select2-selection__clear {
    display: none !important;
}

.select2-dropdown {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    z-index: 1065 !important;
}

.select2-container .select2-results__option {
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #2b3440 !important;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

.select2-container .select2-results__option[aria-selected="true"] {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   BRUSHY BRAND THEME: NAVY BLUE (#1c3a56)
   ========================================================================== */

:root {
    /* 🟢 Variabili Core di Bootstrap 5 */
    --bs-primary: #1c3a56;
    --bs-primary-rgb: 22, 42, 69;
    --bs-primary-text-emphasis: #0e1b2d;
    --bs-primary-bg-subtle: #e9eff7;
    --bs-primary-border-subtle: #cad8e8;

    /* Link di navigazione */
    --bs-link-color: #1c3a56;
    --bs-link-hover-color: #0f1d30;
}

/* --- BOTTONI PRIMARY (.btn-primary) --- */
.btn-primary {
    --bs-btn-bg: #1c3a56;
    --bs-btn-border-color: #1c3a56;
    --bs-btn-hover-bg: #1f3b60;
    --bs-btn-hover-border-color: #1a3252;
    --bs-btn-active-bg: #0f1c2e;
    --bs-btn-active-border-color: #0d1726;
    --bs-btn-focus-shadow-rgb: 22, 42, 69;
    --bs-btn-disabled-bg: #1c3a56;
    --bs-btn-disabled-border-color: #1c3a56;
}

/* --- BOTTONI OUTLINE (.btn-outline-primary) --- */
.btn-outline-primary {
    --bs-btn-color: #1c3a56;
    --bs-btn-border-color: #1c3a56;
    --bs-btn-hover-bg: #1c3a56;
    --bs-btn-hover-border-color: #1c3a56;
    --bs-btn-active-bg: #0f1c2e;
    --bs-btn-active-border-color: #0d1726;
    --bs-btn-focus-shadow-rgb: 22, 42, 69;
}

/* --- CLASSI DI UTILITÀ BOOTSTRAP --- */
/* 🟢 Permette a bg-opacity-10, bg-opacity-25, ecc. di funzionare con il blu notte */
.bg-primary {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-primary {
    color: #1c3a56 !important;
}

.border-primary {
    border-color: #1c3a56 !important;
}

/* Badge ed elementi con sfondo tenue/chiaro */
.bg-primary-subtle,
.bg-primary.bg-opacity-10,
.bg-primary.bg-opacity-25 {
    background-color: #e9eff7 !important;
    color: #1c3a56 !important;
}

.border-primary-subtle {
    border-color: #cad8e8 !important;
}

/* --- FOCUS SUI CAMPI INPUT, SELECT E CHECKBOX --- */
.form-control:focus,
.form-select:focus {
    border-color: #1c3a56 !important;
    box-shadow: 0 0 0 0.25rem rgba(22, 42, 69, 0.15) !important;
}

.form-check-input:checked {
    background-color: #1c3a56 !important;
    border-color: #1c3a56 !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(22, 42, 69, 0.15) !important;
}

/* --- PAGINAZIONE DATATABLES / TABELLE --- */
.page-item.active .page-link {
    background-color: #1c3a56 !important;
    border-color: #1c3a56 !important;
}

/* --- SPINNER / CARICAMENTO --- */
.spinner-border.text-primary {
    color: #1c3a56 !important;
}