/* ==========================================================================
   Tema scuro — wizard creazione/modifica campagna
   campaign_setup.php -> campaign_create_edit/partner_details_form.php + step:
   choose_category, collaboration_terms, minimun_requirement,
   business_campaign, payment_method. Gli step hanno <style> inline caricati
   dopo questo file: i selettori partono da #w4 / #w4-<step> per batterli.
   Widget condivisi (SweetAlert, select2, datepicker, slider) restano a
   10-widgets: qui solo i ritocchi che i <style> del wizard impongono.
   ========================================================================== */

/* --- Guscio: card, intestazione, footer ----------------------------------- */
/* partner_details_form.php forza .card-header bianco con !important */
html[data-theme="dark"] #w4 .card-header {
    background-color: var(--cu-surface) !important;
    border-bottom: 1px solid var(--cu-border) !important;
}

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

html[data-theme="dark"] #w4 > form > .card-body,
html[data-theme="dark"] #w4 .tab-content {
    background: var(--cu-surface);
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .card-footer {
    background: var(--cu-surface);
    border-top: 1px solid var(--cu-border);
}

/* Pulsante "Salva" in alto */
html[data-theme="dark"] #w4 .btn-customBt:hover {
    background-color: var(--cu-primary-hi) !important;
    color: #0d1312 !important;
}

/* Pager Precedente / Successivo: bianchi con !important nel sorgente */
html[data-theme="dark"] #w4 .pager li.previous a,
html[data-theme="dark"] #w4 .pager li.next a {
    background-color: var(--cu-surface-3) !important;
    border-color: var(--cu-border-2);
    color: var(--cu-text) !important;
}

html[data-theme="dark"] #w4 .pager li.previous a:hover,
html[data-theme="dark"] #w4 .pager li.next a:hover {
    background-color: var(--cu-primary) !important;
    border-color: var(--cu-primary);
    color: #fff !important;
}

html[data-theme="dark"] #w4 .pager li.disabled a,
html[data-theme="dark"] #w4 .pager li.disabled a:hover {
    background-color: var(--cu-surface-2) !important;
    border-color: var(--cu-border);
    color: var(--cu-text-3) !important;
}

html[data-theme="dark"] #w4 .pager li.finish a {
    border-color: var(--cu-primary);
}

/* --- Stepper (Porto wizard-progress) -------------------------------------- */
html[data-theme="dark"] #w4 .wizard-progress .steps-progress,
html[data-theme="dark"] #w4 .wizard-progress .steps-progress .progress-indicator {
    background: var(--cu-border-2);
}

html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li a {
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li.active a,
html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li.completed a {
    color: var(--cu-text);
}

/* cerchio: da fare */
html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li a span {
    background: var(--cu-surface-3);
    border-color: var(--cu-border-3);
    color: var(--cu-text-3);
}

/* cerchio: fatto (teal pieno come in chiaro) */
html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li.completed a span {
    background: var(--cu-primary);
    border-color: var(--cu-primary);
    color: #fff;
}

/* cerchio: step corrente */
html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li.active a span,
html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li.completed.active a span {
    background: var(--cu-surface);
    border-color: var(--cu-primary);
    color: var(--cu-primary-hi);
    box-shadow: 0 0 0 4px var(--cu-primary-soft);
}

/* Mobile: Porto disegna le linee tra i cerchi con :before/:after */
@media only screen and (max-width: 991px) {
    html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li:before,
    html[data-theme="dark"] #w4 .wizard-progress .wizard-steps li:after {
        background: var(--cu-border-2);
    }
}

/* Modifica campagna pubblicata: avviso step bloccati */
html[data-theme="dark"] #w4 .cu-edit-locked {
    background: var(--cu-surface-2);
    border-color: var(--cu-border-2);
}

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

html[data-theme="dark"] #w4 .cu-edit-locked-title .fa-lock {
    color: var(--cu-warning);
}

html[data-theme="dark"] #w4 .cu-edit-locked p {
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .cu-edit-locked a {
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] .first-compaign {
    color: var(--cu-warning);
}

/* --- Campi comuni a tutti gli step ---------------------------------------- */
/* theme.css forza .form-control bianco con !important */
html[data-theme="dark"] #w4 .form-control,
html[data-theme="dark"] #w4 select.form-control {
    background-color: var(--cu-surface-2) !important;
    border-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] #w4 .form-control:focus {
    border-color: var(--cu-primary);
    box-shadow: var(--cu-focus);
}

/* Intestazioni con color inline (#333 / #777) negli step 3 e 5 */
html[data-theme="dark"] #w4 .tab-pane h4[style*="color"] {
    color: var(--cu-text) !important;
}

html[data-theme="dark"] #w4 .tab-pane p[style*="color: #777"] {
    color: var(--cu-text-3) !important;
}

html[data-theme="dark"] #w4 label.error,
html[data-theme="dark"] #w4 .error-message {
    color: var(--cu-danger);
}

/* --- Step 1 · Categoria ---------------------------------------------------- */
html[data-theme="dark"] #w4-account h4 {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4-account label {
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4-account label span {
    color: var(--cu-text);
}

/* --- Step 2 · Termini di collaborazione ------------------------------------ */
html[data-theme="dark"] #w4-profile h4,
html[data-theme="dark"] #w4-profile label > span,
html[data-theme="dark"] #w4-profile strong {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4-profile select.form-control {
    border-color: var(--cu-border-2);
}

/* select "Valore merce": bordo #ddd inline */
html[data-theme="dark"] #w4-profile #offer_value {
    border-color: var(--cu-border-2) !important;
}

html[data-theme="dark"] #w4-profile #compenso_content p,
html[data-theme="dark"] #w4-profile #content p {
    color: var(--cu-text-2);
}

/* Sconto: icona info, link esempi, suggerimento 50% */
html[data-theme="dark"] #w4-profile #discount_hint_icon,
html[data-theme="dark"] #w4-profile #discount_details a[style*="color"] {
    color: var(--cu-primary-hi) !important;
}

html[data-theme="dark"] #w4-profile #discount_percentage_hint {
    color: var(--cu-warning) !important;
}

/* Contenuti di esempio: area upload (Dropzone) e immagini già caricate */
html[data-theme="dark"] #w4 .dropzone {
    background: var(--cu-surface-2);
    border: 2px dashed var(--cu-border-3) !important;
    border-radius: 12px;
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .dropzone:hover {
    border-color: var(--cu-primary) !important;
}

html[data-theme="dark"] #w4 .dropzone .dz-message,
html[data-theme="dark"] #w4 .dropzone .dz-message span {
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4 .dropzone .dz-preview .dz-details {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4 .dropzone .dz-preview .dz-remove {
    color: var(--cu-danger) !important;
}

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

/* Link di esempio: bottone "Aggiungi" disattivato e righe dei link */
html[data-theme="dark"] #w4 .btn-add-link {
    background-color: var(--cu-surface-3);
    border-color: var(--cu-border-2);
    color: var(--cu-text-4);
}

html[data-theme="dark"] #w4 .btn-add-link.is-valid {
    background-color: var(--cu-primary);
    border-color: var(--cu-primary);
    color: #fff;
}

html[data-theme="dark"] #w4 #example_links_list > div {
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 #example_links_list .fa-link {
    color: var(--cu-primary-hi) !important;
}

html[data-theme="dark"] #w4 #example_links_list button {
    color: var(--cu-danger) !important;
}

html[data-theme="dark"] #w4 #example_counter {
    color: var(--cu-text-3);
}

/* --- Step 3 · Requisiti minimi --------------------------------------------- */
html[data-theme="dark"] #w4 .step3-section {
    background: var(--cu-surface-2);
    border-color: var(--cu-border);
}

html[data-theme="dark"] #w4 .step3-section.has-error {
    background: var(--cu-danger-soft);
    border-color: var(--cu-danger);
}

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

html[data-theme="dark"] #w4 .step3-section-title .badge-optional,
html[data-theme="dark"] #w4 .step5-section-title .badge-optional {
    background: var(--cu-surface-4);
    color: var(--cu-text-2);
}

/* nel collapse "Gestisci contenuti" è testo semplice anche in chiaro */
html[data-theme="dark"] #w4 .step5-collapse-header .badge-optional {
    background: transparent;
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4 .step3-section-desc,
html[data-theme="dark"] #w4 .cat-plan-hint {
    color: var(--cu-text-3);
}

/* Categorie influencer e pulsanti engagement rate */
html[data-theme="dark"] #w4 .cat-btn,
html[data-theme="dark"] #w4 .er-btn {
    background: var(--cu-surface);
    border-color: var(--cu-border-2);
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .cat-btn small {
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4 .cat-btn:hover,
html[data-theme="dark"] #w4 .er-btn:hover {
    background: var(--cu-primary-soft);
    border-color: var(--cu-primary);
    color: var(--cu-text);
}

html[data-theme="dark"] #w4 .cat-btn.active,
html[data-theme="dark"] #w4 .er-btn.active {
    background: var(--cu-primary);
    border-color: var(--cu-primary);
    color: #fff;
}

html[data-theme="dark"] #w4 .cat-btn.active small {
    color: #d4f5ef;
}

/* Tabella ER */
html[data-theme="dark"] #w4 .er-table {
    border-color: var(--cu-border-2);
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .er-table th {
    background: var(--cu-surface-3);
    border-bottom-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] #w4 .er-table td {
    border-bottom-color: var(--cu-border);
}

/* rosso inline #F44336 poco leggibile sul fondo scuro */
html[data-theme="dark"] #w4 .er-table span[style*="#F44336"] {
    color: var(--cu-danger) !important;
}

html[data-theme="dark"] #w4 .er-table .er-dot[style*="#F44336"] {
    background: var(--cu-danger) !important;
}

/* Province / settore: bordo della select2 forzato con !important nello step */
html[data-theme="dark"] #w4-billing .select2-container--default .select2-selection--multiple {
    border-color: var(--cu-border-2) !important;
}

html[data-theme="dark"] #w4-billing .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--cu-primary) !important;
}

html[data-theme="dark"] #w4-billing .form-control {
    border-color: var(--cu-border-2);
}

html[data-theme="dark"] #w4-billing .form-control:focus {
    border-color: var(--cu-primary);
}

html[data-theme="dark"] #w4 .all-provinces-check {
    background: var(--cu-surface-3);
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .all-provinces-check:hover {
    background: var(--cu-primary-soft);
    color: var(--cu-text);
}

/* Età: binario dello slider (colori impostati nello step) */
html[data-theme="dark"] #w4-billing .slider .slider-track {
    background: var(--cu-surface-4);
}

html[data-theme="dark"] #w4-billing .slider .slider-handle {
    border: 2px solid var(--cu-surface-2);
}

html[data-theme="dark"] #w4 .age-labels {
    color: var(--cu-text-3);
}

/* Errori di validazione step 3 e 5 */
html[data-theme="dark"] #w4 .step3-error,
html[data-theme="dark"] #w4 .step5-error {
    background: var(--cu-danger-soft);
    border-left-color: var(--cu-danger);
    color: var(--cu-danger);
}

/* --- Step 4 · Informazioni aziendali e campagna ---------------------------- */
html[data-theme="dark"] #w4-confirm {
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4-confirm .s4-label,
html[data-theme="dark"] #w4-confirm .s4-section-title {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4-confirm .s4-section-sub,
html[data-theme="dark"] #w4-confirm .s4-hint,
html[data-theme="dark"] #w4-confirm .s4-cover-hint,
html[data-theme="dark"] #w4-confirm .s4-recap-empty,
html[data-theme="dark"] #w4-confirm .s4-word-count {
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4-confirm .s4-word-count.s4-over {
    color: var(--cu-danger);
}

html[data-theme="dark"] #w4-confirm .s4-section-head {
    border-bottom-color: var(--cu-border);
}

html[data-theme="dark"] #w4-confirm .s4-section-icon {
    background: var(--cu-primary-soft);
    color: var(--cu-primary-hi);
}

/* Campi: bordo teal attenuato, sfondo scuro (theme.css li forza bianchi) */
html[data-theme="dark"] #w4-confirm .s4-input,
html[data-theme="dark"] #w4-confirm select.s4-input {
    background: var(--cu-surface-2) !important;
    border-color: rgba(39, 163, 140, .45);
    color: var(--cu-text);
}

html[data-theme="dark"] #w4-confirm .s4-input::placeholder {
    color: var(--cu-text-4);
}

html[data-theme="dark"] #w4-confirm .s4-input:focus {
    background: var(--cu-surface-2) !important;
    border-color: var(--cu-primary-hi);
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] #w4-confirm .form-group.has-error .s4-input {
    background: var(--cu-danger-soft) !important;
    border-color: var(--cu-danger);
}

html[data-theme="dark"] #w4-confirm label.error {
    color: var(--cu-danger);
}

/* Copertina */
html[data-theme="dark"] #w4-confirm .s4-cover-box {
    background: var(--cu-surface-2);
    border-color: var(--cu-border-3);
}

html[data-theme="dark"] #w4-confirm .s4-cover-box:hover {
    background: var(--cu-primary-soft);
    border-color: var(--cu-primary);
}

/* con immagine resta bianco: i PNG trasparenti scuri sparirebbero */
html[data-theme="dark"] #w4-confirm .s4-cover-box.has-image {
    background: #fff;
    border-color: var(--cu-primary);
}

html[data-theme="dark"] #w4-confirm .form-group.has-error .s4-cover-box {
    border-color: var(--cu-danger);
}

html[data-theme="dark"] #w4-confirm .s4-cover-icon {
    background: var(--cu-primary-soft-2);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4-confirm .s4-cover-placeholder strong {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4-confirm .s4-cover-placeholder span {
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4-confirm .s4-cover-btn {
    background: var(--cu-surface-2);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4-confirm .s4-cover-btn-danger {
    color: var(--cu-danger);
}

html[data-theme="dark"] #w4-confirm .msg[style*="color"] {
    color: var(--cu-success) !important;
}

/* Modale ritaglio copertina */
html[data-theme="dark"] .s4-crop-modal-backdrop {
    background: var(--cu-overlay);
}

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

html[data-theme="dark"] .s4-crop-modal-header,
html[data-theme="dark"] .s4-crop-modal-footer {
    border-color: var(--cu-border-2);
}

html[data-theme="dark"] .s4-crop-modal-header h5 {
    color: var(--cu-text);
}

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

html[data-theme="dark"] .s4-crop-modal-close:hover {
    color: var(--cu-text);
}

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

html[data-theme="dark"] .s4-crop-btn-primary {
    background: var(--cu-primary);
    border-color: var(--cu-primary);
    color: #fff;
}

/* Riepilogo offerta (dallo step 2) */
html[data-theme="dark"] #w4-confirm .s4-offer-box {
    background: var(--cu-primary-soft);
    border-color: rgba(60, 196, 166, .45);
}

html[data-theme="dark"] #w4-confirm .s4-offer-tag {
    background: var(--cu-primary-soft-2);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4-confirm .s4-offer-lines .s4-recap-line {
    color: var(--cu-text);
}

/* Checklist cosa fare / non fare */
html[data-theme="dark"] #w4-confirm .s4-check-item {
    background: var(--cu-surface-2);
    border-color: var(--cu-border);
}

html[data-theme="dark"] #w4-confirm .s4-check-item:hover {
    border-color: rgba(60, 196, 166, .45);
}

html[data-theme="dark"] #w4-confirm .s4-check-item:has(input:checked) {
    background: var(--cu-primary-soft);
    border-color: var(--cu-primary);
}

html[data-theme="dark"] #w4-confirm .s4-check-text {
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4-confirm .s4-check-item:has(input:checked) .s4-check-text {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4-confirm .form-group.has-error .s4-checklist {
    box-shadow: 0 0 0 1px var(--cu-danger) inset;
}

/* Profili social */
html[data-theme="dark"] #w4-confirm .s4-social-card {
    background: var(--cu-warning-soft);
    border-color: rgba(242, 181, 74, .55);
}

html[data-theme="dark"] #w4-confirm .s4-social-card.s4-locked {
    background: var(--cu-primary-soft);
    border-color: rgba(60, 196, 166, .5);
}

html[data-theme="dark"] #w4-confirm .s4-social-username {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4-confirm .s4-social-select,
html[data-theme="dark"] #w4-confirm .s4-social-input {
    background: var(--cu-surface-2);
    border-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] #w4-confirm .s4-social-input:focus,
html[data-theme="dark"] #w4-confirm .s4-social-select:focus {
    border-color: var(--cu-primary);
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] #w4-confirm .s4-icon-btn-primary {
    background: var(--cu-primary-soft-2);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4-confirm .s4-icon-btn-danger {
    background: var(--cu-danger-soft);
    color: var(--cu-danger);
}

html[data-theme="dark"] #w4-confirm .s4-icon-btn:hover {
    filter: brightness(1.2);
}

html[data-theme="dark"] #w4-confirm .s4-add-social {
    background: transparent;
    border-color: var(--cu-primary);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4-confirm .s4-add-social:hover {
    background: var(--cu-primary-soft);
}

/* Suggerimenti Google Places dell'indirizzo (appesi al body) */
html[data-theme="dark"] body:has(#w4-confirm) .pac-container {
    background: var(--cu-surface-2);
    border: 1px solid var(--cu-border-2);
    box-shadow: var(--cu-shadow-lg);
}

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

html[data-theme="dark"] body:has(#w4-confirm) .pac-item:hover,
html[data-theme="dark"] body:has(#w4-confirm) .pac-item-selected {
    background: var(--cu-surface-3);
}

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

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

html[data-theme="dark"] body:has(#w4-confirm) .pac-logo:after {
    filter: invert(1) brightness(1.4);
    opacity: .6;
}

/* --- Step 5 · Durata e programmazione -------------------------------------- */
html[data-theme="dark"] #w4 .step5-section,
html[data-theme="dark"] #w4 .step5-collapse {
    background: var(--cu-surface-2);
    border-color: var(--cu-border);
}

html[data-theme="dark"] #w4 .step5-section.has-error {
    background: var(--cu-danger-soft);
    border-color: var(--cu-danger);
}

/* dentro al collapse le sezioni non hanno bordo: niente secondo fondo */
html[data-theme="dark"] #w4 .step5-collapse-body .step5-section {
    background: transparent;
}

html[data-theme="dark"] #w4 .step5-section-title,
html[data-theme="dark"] #w4 .step5-collapse-title {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4 .step5-section-desc {
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4 .step5-section label[style*="color"] {
    color: var(--cu-text-2) !important;
}

html[data-theme="dark"] #w4 .cu-start-locked {
    color: var(--cu-text-3) !important;
}

/* Collapse "Gestisci contenuti" */
html[data-theme="dark"] #w4 .step5-collapse-header:hover {
    background: var(--cu-surface-3);
}

html[data-theme="dark"] #w4 .step5-collapse-chevron {
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4 .step5-collapse-body {
    border-top-color: var(--cu-border);
}

/* Campi data / ora / select / numero */
html[data-theme="dark"] #w4 .step5-date-input label {
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .step5-date-input input[type="text"],
html[data-theme="dark"] #w4 .step5-date-input input[type="time"],
html[data-theme="dark"] #w4 .step5-select,
html[data-theme="dark"] #w4 .step5-number-input {
    background: var(--cu-surface);
    border-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] #w4 .step5-date-input input[type="text"]:hover,
html[data-theme="dark"] #w4 .step5-date-input input[type="time"]:hover {
    background-color: var(--cu-surface-3);
    border-color: var(--cu-primary);
}

html[data-theme="dark"] #w4 .step5-date-input input[type="text"]:focus,
html[data-theme="dark"] #w4 .step5-date-input input[type="time"]:focus,
html[data-theme="dark"] #w4 .step5-select:focus,
html[data-theme="dark"] #w4 .step5-number-input:focus {
    border-color: var(--cu-primary);
    box-shadow: var(--cu-focus);
}

html[data-theme="dark"] #w4 .step5-date-input .date-icon {
    color: var(--cu-primary-hi);
}

/* Toggle "un giorno", checkbox inline */
html[data-theme="dark"] #w4 .step5-toggle,
html[data-theme="dark"] #w4 .step5-checkbox-label {
    background: var(--cu-surface-3);
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .step5-toggle:hover,
html[data-theme="dark"] #w4 .step5-checkbox-label:hover {
    background: var(--cu-primary-soft);
}

html[data-theme="dark"] #w4 .step5-toggle.active {
    background: var(--cu-primary-soft);
    color: var(--cu-primary-hi);
}

/* Riepilogo intervallo date */
html[data-theme="dark"] #w4 .date-range-indicator {
    background: var(--cu-surface-3);
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .date-range-indicator .date-arrow,
html[data-theme="dark"] #w4 .date-range-indicator .date-duration {
    color: var(--cu-text-3);
}

/* Chip date (hover rosso = rimuovi): ok così, solo un rosso del token */
html[data-theme="dark"] #w4 .step5-chip:hover {
    background: var(--cu-danger);
}

/* Fasce orarie */
html[data-theme="dark"] #w4 .ts-toolbar {
    background: var(--cu-surface-3);
    border-color: var(--cu-border-2);
}

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

html[data-theme="dark"] #w4 .ts-summary i,
html[data-theme="dark"] #w4 .ts-summary strong,
html[data-theme="dark"] #w4 .ts-link {
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4 .ts-link:hover {
    background: var(--cu-primary-soft);
}

html[data-theme="dark"] #w4 .ts-link.ts-link-muted {
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4 .ts-link.ts-link-muted:hover {
    background: var(--cu-surface-4);
    color: var(--cu-text);
}

html[data-theme="dark"] #w4 .ts-sep {
    background: var(--cu-border-3);
}

html[data-theme="dark"] #w4 .ts-band {
    background: var(--cu-surface);
    border-color: var(--cu-border-2);
}

html[data-theme="dark"] #w4 .ts-band.has-selection {
    border-color: rgba(60, 196, 166, .5);
    box-shadow: 0 2px 12px rgba(39, 163, 140, .12);
}

html[data-theme="dark"] #w4 .ts-band-head {
    border-bottom-color: var(--cu-border);
}

html[data-theme="dark"] #w4 .ts-band-icon {
    background: var(--cu-surface-3);
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4 .ts-band.has-selection .ts-band-icon {
    background: var(--cu-primary-soft);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4 .ts-band-name {
    color: var(--cu-text);
}

html[data-theme="dark"] #w4 .ts-band-range {
    color: var(--cu-text-3);
}

html[data-theme="dark"] #w4 .ts-band-count {
    color: var(--cu-text-4);
}

html[data-theme="dark"] #w4 .ts-band.has-selection .ts-band-count {
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4 .ts-switch-track {
    background: var(--cu-surface-4);
}

html[data-theme="dark"] #w4 .ts-switch-track::after {
    background: var(--cu-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] #w4 .ts-switch input:checked + .ts-switch-track {
    background: var(--cu-primary);
}

html[data-theme="dark"] #w4 .ts-switch input:checked + .ts-switch-track::after {
    background: #fff;
}

html[data-theme="dark"] #w4 .time-slot label {
    background: var(--cu-surface-2);
    border-color: var(--cu-border-2);
    color: var(--cu-text-2);
}

html[data-theme="dark"] #w4 .time-slot label:hover {
    border-color: var(--cu-primary);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] #w4 .time-slot input:checked + label {
    background: var(--cu-primary);
    border-color: var(--cu-primary);
    color: #fff;
}

/* Calendari dello step 5: il <style> dello step li forza chiari con
   !important; qui solo quelle forzature e le barre Fatto / Annulla-OK */
html[data-theme="dark"] body:has(#w4-payment) .datepicker {
    border-color: var(--cu-border-2) !important;
    box-shadow: var(--cu-shadow-lg) !important;
}

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

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

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

html[data-theme="dark"] body:has(#w4-payment) .datepicker table tr td.today {
    background: var(--cu-primary-soft) !important;
    color: var(--cu-primary-hi) !important;
}

html[data-theme="dark"] body:has(#w4-payment) .datepicker table tr td.today:hover {
    background: var(--cu-primary-soft-2) !important;
}

html[data-theme="dark"] body:has(#w4-payment) .datepicker table tr td.active,
html[data-theme="dark"] body:has(#w4-payment) .datepicker table tr td.active:hover,
html[data-theme="dark"] body:has(#w4-payment) .datepicker table tr td.selected,
html[data-theme="dark"] body:has(#w4-payment) .datepicker table tr td.selected:hover {
    background: var(--cu-primary) !important;
    color: #fff !important;
}

html[data-theme="dark"] body:has(#w4-payment) .datepicker table tr td.disabled,
html[data-theme="dark"] body:has(#w4-payment) .datepicker table tr td.disabled:hover {
    background: transparent !important;
    color: var(--cu-text-4) !important;
}

html[data-theme="dark"] body:has(#w4-payment) .datepicker .meeting-done-bar {
    border-top-color: var(--cu-border-2);
}

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

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