/* ==========================================================================
   Tema scuro — widget condivisi e stili legacy generici
   Popup (SweetAlert2 + SweetAlert legacy), select2, datepicker,
   daterangepicker, slider, toggle, DataTables, Google Places, flash message
   e classi generiche di custom.css (righe 1–1241) ancora usate.
   Solo token di css/dark-theme.css; ogni regola sotto html[data-theme="dark"].
   ========================================================================== */

/* --- Campi Porto ---------------------------------------------------------- */
/* theme.css:3986 forza `.form-control { background-color: #FFF !important }`:
   senza questo ogni campo resta bianco. Le partial delle pagine lo
   ridefiniscono con selettori più specifici (e caricano dopo). */
html[data-theme="dark"] .form-control {
    background-color: var(--cu-surface-2) !important;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--cu-surface) !important;
}

/* Icona "?" di aiuto (img/question.png è nera): chiara sul fondo scuro */
html[data-theme="dark"] .help_text,
html[data-theme="dark"] img[src*="img/question.png"] {
    filter: invert(1) brightness(.82);
}

/* ==========================================================================
   SweetAlert2 (Swal.fire) — v10 da CDN + css/sweetalert2.min.css
   ========================================================================== */
html[data-theme="dark"] .swal2-container.swal2-backdrop-show,
html[data-theme="dark"] .swal2-container.swal2-noanimation {
    background: var(--cu-overlay);
}

html[data-theme="dark"] .swal2-popup {
    background: var(--cu-surface);
    border: 1px solid var(--cu-border-2);
    box-shadow: var(--cu-shadow-lg);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .swal2-title {
    color: var(--cu-text);
}

html[data-theme="dark"] .swal2-content,
html[data-theme="dark"] .swal2-html-container {
    color: var(--cu-text-2);
}

/* theme.css dà ai <p> #777: nel popup seguono il testo */
html[data-theme="dark"] .swal2-html-container p,
html[data-theme="dark"] .swal2-content p,
html[data-theme="dark"] .swal-text p,
html[data-theme="dark"] .swal-content p {
    color: inherit;
}

/* righe separatrici #eee (riepilogo pagamento in js/collaborazioni.js) */
html[data-theme="dark"] .swal2-html-container [style*="solid #eee"],
html[data-theme="dark"] .swal2-html-container [style*="solid #ddd"] {
    border-color: var(--cu-border-2) !important;
}

html[data-theme="dark"] .swal2-html-container b,
html[data-theme="dark"] .swal2-html-container strong,
html[data-theme="dark"] .swal2-content b,
html[data-theme="dark"] .swal2-content strong {
    color: var(--cu-text);
}

html[data-theme="dark"] .swal2-html-container a,
html[data-theme="dark"] .swal2-content a,
html[data-theme="dark"] .swal2-footer a {
    color: var(--cu-primary-hi);
}

/* testo grigio scuro scritto inline nell'html dei popup */
html[data-theme="dark"] .swal2-html-container [style*="color:#444"],
html[data-theme="dark"] .swal2-html-container [style*="color: #444"],
html[data-theme="dark"] .swal2-html-container [style*="color:#333"],
html[data-theme="dark"] .swal2-html-container [style*="color: #333"],
html[data-theme="dark"] .swal2-html-container [style*="color:#555"],
html[data-theme="dark"] .swal2-html-container [style*="color: #555"] {
    color: var(--cu-text-2) !important;
}

html[data-theme="dark"] .swal2-footer {
    border-top-color: var(--cu-border);
    color: var(--cu-text-3);
}

html[data-theme="dark"] .swal2-close {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .swal2-close:hover {
    color: var(--cu-danger);
}

html[data-theme="dark"] .swal2-close:focus {
    box-shadow: inset var(--cu-focus);
}

/* Campi dentro il popup */
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-file,
html[data-theme="dark"] .swal2-select {
    background: var(--cu-surface-2);
    border-color: var(--cu-border-2);
    box-shadow: none;
    color: var(--cu-text);
}

html[data-theme="dark"] .swal2-input:focus,
html[data-theme="dark"] .swal2-textarea:focus,
html[data-theme="dark"] .swal2-file:focus,
html[data-theme="dark"] .swal2-select:focus {
    border-color: var(--cu-primary);
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] .swal2-input::placeholder,
html[data-theme="dark"] .swal2-textarea::placeholder {
    color: var(--cu-text-4);
}

html[data-theme="dark"] .swal2-input.swal2-inputerror,
html[data-theme="dark"] .swal2-textarea.swal2-inputerror,
html[data-theme="dark"] .swal2-file.swal2-inputerror {
    border-color: var(--cu-danger) !important;
    box-shadow: 0 0 0 3px var(--cu-danger-soft);
}

html[data-theme="dark"] .swal2-checkbox,
html[data-theme="dark"] .swal2-radio,
html[data-theme="dark"] .swal2-range {
    background: transparent;
    color: var(--cu-text-2);
}

html[data-theme="dark"] .swal2-checkbox label,
html[data-theme="dark"] .swal2-radio label,
html[data-theme="dark"] .swal2-input-label {
    color: var(--cu-text-2);
}

html[data-theme="dark"] .swal2-validation-message {
    background: var(--cu-danger-soft);
    color: #f6a8a8;
}

html[data-theme="dark"] .swal2-validation-message::before {
    background-color: var(--cu-danger);
    color: #fff;
}

/* Bottoni: il default blu diventa teal; un confirmButtonColor inline resta */
html[data-theme="dark"] .swal2-styled.swal2-confirm {
    background-color: var(--cu-primary);
}

html[data-theme="dark"] .swal2-styled.swal2-cancel {
    background-color: var(--cu-surface-4);
    color: var(--cu-text);
}

html[data-theme="dark"] .swal2-styled.swal2-deny {
    background-color: #d9534f;
}

html[data-theme="dark"] .swal2-styled:focus {
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08));
}

html[data-theme="dark"] .swal2-actions:not(.swal2-loading) .swal2-styled:active {
    background-image: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .18));
}

html[data-theme="dark"] .swal2-loader {
    border-color: var(--cu-primary-hi) transparent var(--cu-primary-hi) transparent;
}

html[data-theme="dark"] .swal2-timer-progress-bar {
    background: rgba(60, 196, 166, .55);
}

html[data-theme="dark"] .swal2-icon.swal2-question {
    border-color: var(--cu-text-3);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .swal2-progress-steps .swal2-progress-step,
html[data-theme="dark"] .swal2-progress-steps .swal2-progress-step-line {
    background: var(--cu-primary);
}

html[data-theme="dark"] .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step,
html[data-theme="dark"] .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
    background: var(--cu-surface-4);
    color: var(--cu-text-2);
}

/* Toast */
html[data-theme="dark"] .swal2-popup.swal2-toast {
    background: var(--cu-surface-3);
    border: 1px solid var(--cu-border-2);
    box-shadow: var(--cu-shadow);
}

html[data-theme="dark"] .swal2-popup.swal2-toast .swal2-title {
    color: var(--cu-text);
}

html[data-theme="dark"] .swal2-popup.swal2-toast .swal2-styled:focus {
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] body.swal2-no-backdrop .swal2-container > .swal2-modal {
    box-shadow: var(--cu-shadow-lg);
}

/* ==========================================================================
   SweetAlert legacy (swal(), js/sweetalert.min.js: .swal-modal)
   Il suo CSS è iniettato a runtime dopo questo file: bastano i selettori
   più specifici.
   ========================================================================== */
html[data-theme="dark"] .swal-overlay {
    background-color: var(--cu-overlay);
}

html[data-theme="dark"] .swal-modal {
    background-color: var(--cu-surface);
    border: 1px solid var(--cu-border-2);
    box-shadow: var(--cu-shadow-lg);
}

html[data-theme="dark"] .swal-title {
    color: var(--cu-text);
}

html[data-theme="dark"] .swal-text {
    color: var(--cu-text-2);
}

html[data-theme="dark"] .swal-button {
    background-color: var(--cu-primary);
    color: #fff;
}

html[data-theme="dark"] .swal-button:not([disabled]):hover {
    background-color: #2db39a;
}

html[data-theme="dark"] .swal-button:active {
    background-color: #21917c;
}

html[data-theme="dark"] .swal-button:focus {
    box-shadow: 0 0 0 1px var(--cu-surface), 0 0 0 4px rgba(60, 196, 166, .4);
}

html[data-theme="dark"] .swal-button--cancel {
    background-color: var(--cu-surface-3);
    color: var(--cu-text);
}

html[data-theme="dark"] .swal-button--cancel:not([disabled]):hover {
    background-color: var(--cu-surface-4);
}

html[data-theme="dark"] .swal-button--cancel:focus {
    box-shadow: 0 0 0 1px var(--cu-surface), 0 0 0 4px rgba(167, 180, 177, .3);
}

html[data-theme="dark"] .swal-button--danger {
    background-color: #d9534f;
}

html[data-theme="dark"] .swal-button--danger:not([disabled]):hover {
    background-color: #e0605c;
}

html[data-theme="dark"] .swal-content__input,
html[data-theme="dark"] .swal-content__textarea {
    background-color: var(--cu-surface-2);
    border: 1px solid var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] .swal-content__input:focus,
html[data-theme="dark"] .swal-content__textarea:focus {
    border-color: var(--cu-primary);
}

/* l'icona "success" usa maschere bianche per l'animazione del cerchio */
html[data-theme="dark"] .swal-icon--success::before,
html[data-theme="dark"] .swal-icon--success::after,
html[data-theme="dark"] .swal-icon--success__hide-corners {
    background-color: var(--cu-surface);
}

/* ==========================================================================
   select2 (tema default + select2-bootstrap)
   ========================================================================== */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection {
    background-color: var(--cu-surface-2);
    border-color: var(--cu-border-2);
    box-shadow: none;
    color: var(--cu-text);
}

html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple,
html[data-theme="dark"] .select2-container--bootstrap.select2-container--focus .select2-selection,
html[data-theme="dark"] .select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--cu-primary) !important;
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: var(--cu-text);
}

html[data-theme="dark"] .select2-container--default .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection__placeholder {
    color: var(--cu-text-4);
}

html[data-theme="dark"] .select2-container--default .select2-selection__clear,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection__clear {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .select2-container--default .select2-selection__clear:hover,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection__clear:hover {
    color: var(--cu-danger);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
    border-color: var(--cu-text-3) transparent transparent transparent;
}

html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
html[data-theme="dark"] .select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b {
    border-color: transparent transparent var(--cu-primary-hi) transparent;
}

/* Scelte della multipla: pillola teal come nello step 3 del wizard */
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cu-primary);
    border-color: var(--cu-primary);
    color: #fff;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, .7);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
}

html[data-theme="dark"] .select2-container .select2-search--inline .select2-search__field {
    background: transparent;
    color: var(--cu-text);
}

html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple,
html[data-theme="dark"] .select2-container--bootstrap.select2-container--disabled .select2-selection {
    background-color: var(--cu-surface);
    border-color: var(--cu-border);
}

/* Tendina */
html[data-theme="dark"] .select2-dropdown {
    background-color: var(--cu-surface-2);
    border-color: var(--cu-border-2);
    box-shadow: var(--cu-shadow);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .select2-container--open .select2-dropdown--below {
    border-top-color: var(--cu-border);
}

html[data-theme="dark"] .select2-container--open .select2-dropdown--above {
    border-bottom-color: var(--cu-border);
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    background-color: var(--cu-surface-3);
    border-color: var(--cu-border-2);
    box-shadow: none;
    color: var(--cu-text);
}

html[data-theme="dark"] .select2-search__field::placeholder {
    color: var(--cu-text-4);
    opacity: 1;
}

html[data-theme="dark"] .select2-results__option {
    color: var(--cu-text-2);
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option[aria-selected=true] {
    background-color: var(--cu-surface-3);
    color: var(--cu-text);
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cu-primary);
    color: #fff;
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled=true],
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option[aria-disabled=true] {
    color: var(--cu-text-4);
}

html[data-theme="dark"] .select2-container--default .select2-results__group,
html[data-theme="dark"] .select2-container--bootstrap .select2-results__group {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .select2-results__message {
    color: var(--cu-text-3);
}

/* ==========================================================================
   bootstrap-datepicker (tendina .datepicker-dropdown)
   Lo step 5 del wizard ha un suo tema teal inline con !important: qui gli
   stessi stati, scuri, con !important dove lui lo usa.
   ========================================================================== */
html[data-theme="dark"] .datepicker.dropdown-menu,
html[data-theme="dark"] .datepicker-dropdown {
    background-color: var(--cu-surface-2);
    border: 1px solid var(--cu-border-2) !important;
    box-shadow: var(--cu-shadow-lg) !important;
    color: var(--cu-text-2);
}

html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-bottom::before {
    border-bottom-color: var(--cu-border-2);
}

html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-bottom::after {
    border-bottom-color: var(--cu-surface-2);
}

html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top::before {
    border-top-color: var(--cu-border-2);
}

html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top::after {
    border-top-color: var(--cu-surface-2);
}

html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr td span {
    color: var(--cu-text-2);
}

html[data-theme="dark"] .datepicker table thead tr th {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .datepicker .datepicker-switch,
html[data-theme="dark"] .datepicker .prev,
html[data-theme="dark"] .datepicker .next {
    color: var(--cu-text) !important;
}

html[data-theme="dark"] .datepicker .dow {
    color: var(--cu-text-3) !important;
}

/* frecce prev/next disegnate con bordi neri (theme.css) */
html[data-theme="dark"] .datepicker table thead tr th.prev span,
html[data-theme="dark"] .datepicker table thead tr th.next span {
    border-color: var(--cu-text-2);
}

html[data-theme="dark"] .datepicker .datepicker-switch:hover,
html[data-theme="dark"] .datepicker .prev:hover,
html[data-theme="dark"] .datepicker .next:hover,
html[data-theme="dark"] .datepicker tfoot tr th:hover,
html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td.focused,
html[data-theme="dark"] .datepicker table tr td span:hover,
html[data-theme="dark"] .datepicker table tr td span.focused {
    background: var(--cu-primary-soft-2) !important;
    color: var(--cu-primary-hi) !important;
}

html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new,
html[data-theme="dark"] .datepicker table tr td span.old,
html[data-theme="dark"] .datepicker table tr td span.new {
    color: var(--cu-text-4);
}

html[data-theme="dark"] .datepicker table tr td.disabled,
html[data-theme="dark"] .datepicker table tr td.disabled:hover,
html[data-theme="dark"] .datepicker table tr td span.disabled,
html[data-theme="dark"] .datepicker table tr td span.disabled:hover {
    background: none !important;
    color: var(--cu-text-4) !important;
}

html[data-theme="dark"] .datepicker table tr td.today,
html[data-theme="dark"] .datepicker table tr td.today:hover {
    background: var(--cu-primary-soft) !important;
    border-color: transparent;
    color: var(--cu-primary-hi) !important;
}

html[data-theme="dark"] .datepicker table tr td.range,
html[data-theme="dark"] .datepicker table tr td.range:hover,
html[data-theme="dark"] .datepicker table tr td.highlighted {
    background: var(--cu-primary-soft) !important;
    border-color: transparent;
    color: var(--cu-primary-hi) !important;
}

html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover,
html[data-theme="dark"] .datepicker table tr td.active.disabled,
html[data-theme="dark"] .datepicker table tr td.active.disabled:hover,
html[data-theme="dark"] .datepicker table tr td.selected,
html[data-theme="dark"] .datepicker table tr td.selected:hover,
html[data-theme="dark"] .datepicker table tr td span.active,
html[data-theme="dark"] .datepicker table tr td span.active:hover {
    background: var(--cu-primary) !important;
    border-color: var(--cu-primary);
    color: #fff !important;
    text-shadow: none;
}

/* barre "Fatto" / "Annulla – OK" aggiunte dallo step 5 sotto il calendario */
html[data-theme="dark"] .datepicker .meeting-done-bar {
    border-top-color: var(--cu-border-2);
}

html[data-theme="dark"] .datepicker .meeting-done-btn.btn-secondary-light {
    background: var(--cu-surface-4);
    color: var(--cu-text);
}

html[data-theme="dark"] .datepicker .meeting-done-btn.btn-secondary-light:hover {
    background: var(--cu-border-3);
}

/* ==========================================================================
   daterangepicker (css/daterangepicker1.css, caricato dal wizard)
   ========================================================================== */
html[data-theme="dark"] .daterangepicker {
    background-color: var(--cu-surface-2);
    border-color: var(--cu-border-2);
    box-shadow: var(--cu-shadow-lg);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .daterangepicker::before {
    border-bottom-color: var(--cu-border-2);
}

html[data-theme="dark"] .daterangepicker::after {
    border-bottom-color: var(--cu-surface-2);
}

html[data-theme="dark"] .daterangepicker.drop-up::before {
    border-top-color: var(--cu-border-2);
}

html[data-theme="dark"] .daterangepicker.drop-up::after {
    border-top-color: var(--cu-surface-2);
}

html[data-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--cu-surface-2);
    border-color: var(--cu-surface-2);
}

html[data-theme="dark"] .daterangepicker .calendar-table td {
    color: var(--cu-text-2);
}

html[data-theme="dark"] .daterangepicker .calendar-table th {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .daterangepicker .calendar-table th.month {
    color: var(--cu-text);
}

html[data-theme="dark"] .daterangepicker .calendar-table .next span,
html[data-theme="dark"] .daterangepicker .calendar-table .prev span {
    border-color: var(--cu-text-2);
}

html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--cu-primary-soft-2);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date {
    background-color: transparent;
    color: var(--cu-text-4);
}

html[data-theme="dark"] .daterangepicker td.disabled,
html[data-theme="dark"] .daterangepicker option.disabled {
    color: var(--cu-text-4);
}

html[data-theme="dark"] .daterangepicker td.in-range {
    background-color: var(--cu-primary-soft);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover {
    background-color: var(--cu-primary);
    color: #fff;
}

html[data-theme="dark"] .daterangepicker td.week,
html[data-theme="dark"] .daterangepicker th.week {
    color: var(--cu-text-4);
}

html[data-theme="dark"] .daterangepicker .drp-buttons,
html[data-theme="dark"] .daterangepicker .drp-calendar.left,
html[data-theme="dark"] .daterangepicker .calendar-time,
html[data-theme="dark"] .daterangepicker .ranges {
    border-color: var(--cu-border);
}

html[data-theme="dark"] .daterangepicker .drp-selected {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect,
html[data-theme="dark"] .daterangepicker select.hourselect,
html[data-theme="dark"] .daterangepicker select.minuteselect,
html[data-theme="dark"] .daterangepicker select.secondselect,
html[data-theme="dark"] .daterangepicker select.ampmselect {
    background: var(--cu-surface-3);
    border-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] .daterangepicker .ranges li {
    color: var(--cu-text-2);
}

html[data-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: var(--cu-surface-3);
}

html[data-theme="dark"] .daterangepicker .ranges li.active {
    background-color: var(--cu-primary);
    color: #fff;
}

/* ==========================================================================
   bootstrap-slider (età nello step 3, ecc.)
   ========================================================================== */
html[data-theme="dark"] .slider .slider-track,
html[data-theme="dark"] .slider.slider-horizontal .slider-track,
html[data-theme="dark"] .slider.slider-vertical .slider-track {
    background: var(--cu-surface-4);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}

/* :where() lascia vincere il colore che la pagina dà alla maniglia */
html[data-theme="dark"] :where(.slider-handle) {
    background: var(--cu-text);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .slider-handle:focus,
html[data-theme="dark"] .slider-handle:hover {
    box-shadow: var(--cu-focus), 0 2px 6px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .slider.slider-disabled .slider-track {
    background: var(--cu-surface-3);
}

html[data-theme="dark"] .slider-tick {
    background: var(--cu-surface-4);
    box-shadow: none;
}

html[data-theme="dark"] .slider-tick.in-selection {
    background: var(--cu-primary);
}

html[data-theme="dark"] .slider-tick-label {
    color: var(--cu-text-3);
}

/* ==========================================================================
   bootstrap-toggle
   ========================================================================== */
html[data-theme="dark"] .toggle.btn .toggle-handle,
html[data-theme="dark"] .toggle .toggle-handle.btn-default {
    background-color: var(--cu-text);
    border-color: var(--cu-text);
}

html[data-theme="dark"] .toggle.btn .toggle-off {
    background-color: var(--cu-surface-3);
    border-color: var(--cu-border-2);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .toggle.btn.off {
    border-color: var(--cu-border-2);
}

/* ==========================================================================
   DataTables (dataTables.bootstrap4 + Porto)
   ========================================================================== */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: var(--cu-surface-2) !important;
    border-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--cu-primary);
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_empty {
    color: var(--cu-text-3);
}

html[data-theme="dark"] table.dataTable thead .sorting::before,
html[data-theme="dark"] table.dataTable thead .sorting::after,
html[data-theme="dark"] table.dataTable thead .sorting_asc::before,
html[data-theme="dark"] table.dataTable thead .sorting_asc::after,
html[data-theme="dark"] table.dataTable thead .sorting_desc::before,
html[data-theme="dark"] table.dataTable thead .sorting_desc::after {
    color: var(--cu-text-2);
}

html[data-theme="dark"] table.dataTable tbody tr.selected,
html[data-theme="dark"] table.dataTable tbody tr.selected > td {
    background-color: var(--cu-primary-soft-2);
    color: var(--cu-text);
}

html[data-theme="dark"] .dataTables_processing {
    background: var(--cu-surface-3);
    border: 1px solid var(--cu-border-2);
    box-shadow: var(--cu-shadow);
    color: var(--cu-text);
}

/* ==========================================================================
   Google Places Autocomplete (.pac-container, CSS iniettato dalle Maps API)
   ========================================================================== */
html[data-theme="dark"] .pac-container {
    background-color: var(--cu-surface-2);
    border: 1px solid var(--cu-border-2);
    border-radius: 8px;
    box-shadow: var(--cu-shadow-lg);
    margin-top: 4px;
}

html[data-theme="dark"] .pac-item {
    border-top-color: var(--cu-border);
    color: var(--cu-text-3);
}

html[data-theme="dark"] .pac-item:first-child {
    border-top-color: transparent;
}

html[data-theme="dark"] .pac-item:hover {
    background-color: var(--cu-surface-3);
}

html[data-theme="dark"] .pac-item-selected,
html[data-theme="dark"] .pac-item-selected:hover {
    background-color: var(--cu-primary-soft-2);
}

html[data-theme="dark"] .pac-item-query {
    color: var(--cu-text);
}

html[data-theme="dark"] .pac-matched {
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] .pac-icon {
    filter: invert(1) brightness(1.4);
    opacity: .7;
}

/* logo "powered by Google": versione per fondi non bianchi */
html[data-theme="dark"] .pac-logo::after {
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-non-white3.png);
}

html[data-theme="dark"] .hdpi.pac-logo::after {
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-non-white3_hdpi.png);
}

/* ==========================================================================
   custom.css legacy (righe 1–1241): solo le classi ancora usate
   ========================================================================== */

/* Flash message nell'header (include/flash.php) */
html[data-theme="dark"] #flash_error {
    background: #1c2b3a;
    border-bottom: 1px solid rgba(90, 168, 242, .35);
    color: #a9d1f8;
}

html[data-theme="dark"] #flash_error .close {
    color: #a9d1f8;
    opacity: .85;
}

html[data-theme="dark"] #flash_error .close:hover {
    color: #fff;
    opacity: 1;
}

/* Messaggi di errore e upload */
html[data-theme="dark"] .error-message,
html[data-theme="dark"] .cross_btn {
    color: var(--cu-danger);
}

html[data-theme="dark"] #upload-progress {
    background: var(--cu-surface-3);
    border-color: var(--cu-danger);
}

html[data-theme="dark"] .uploadedImages .dz-image span::after {
    background: var(--cu-surface-4);
    color: var(--cu-danger);
}

/* Tab Porto fuori da .tabs (theme.css: fondo #F4F4F4, bordo alto 3px #EEE) */
html[data-theme="dark"] .nav-tabs li .nav-link,
html[data-theme="dark"] .nav-tabs li .nav-link:hover {
    background: var(--cu-surface-2);
    border-left-color: var(--cu-border);
    border-right-color: var(--cu-border);
    border-top-color: var(--cu-border-2);
    color: var(--cu-text-3);
}

html[data-theme="dark"] .nav-tabs li .nav-link:hover {
    border-top-color: var(--cu-border-3);
    color: var(--cu-text-2);
}

/* Tab legacy: custom.css colora di teal la tab attiva su fondo trasparente */
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] #tabs .nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #tabs .nav-tabs .nav-link {
    color: var(--cu-text-2);
}

/* Dettaglio pagamento .trans_detail (valori #333, etichette #545454) */
html[data-theme="dark"] .trans_detail .form-group {
    color: var(--cu-text);
}

html[data-theme="dark"] .trans_detail .form-group label {
    color: var(--cu-text-3);
}

/* Separatore tratteggiato .b-b (#ccc) */
html[data-theme="dark"] .b-b {
    border-top-color: var(--cu-border-2);
}

/* Riquadri importo .euro (fondo #f2f2f2, testo nero); .active resta teal */
html[data-theme="dark"] .euro {
    background-color: var(--cu-surface-3);
    color: var(--cu-text);
}

html[data-theme="dark"] .euro.active {
    background-color: var(--cu-primary);
    color: #fff;
}