/* ==========================================================================
   CollaborUp Business — tema scuro
   Attivo con html[data-theme="dark"] (impostato da include/theme_head.php
   prima del paint, toggle in fondo a include/sidebar.php). In tema chiaro
   questo file non ha effetto: ogni regola è sotto html[data-theme="dark"].

   Token: usare le variabili --cu-* qui sotto per qualunque nuova regola, così
   tutte le pagine restano coerenti. Le sezioni sono in ordine: token, guscio
   (body, header), componenti Bootstrap/Porto generici, poi una sezione per
   area del sito.
   ========================================================================== */

/* --- Token ---------------------------------------------------------------- */
:root {
    --cu-primary: #27A38C;
    --cu-primary-hi: #1f8c77;
    --cu-primary-soft: rgba(39, 163, 140, .08);
    --cu-bg: #fafafa;
    --cu-surface: #ffffff;
    --cu-surface-2: #f6f7f9;
    --cu-surface-3: #eef0f2;
    --cu-border: #eef0f2;
    --cu-border-2: #dfe3e8;
    --cu-text: #222222;
    --cu-text-2: #555b63;
    --cu-text-3: #8a8f98;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* superfici, dalla più profonda alla più alta */
    --cu-bg: #0d1312;
    --cu-surface: #141c1b;
    --cu-surface-2: #192321;
    --cu-surface-3: #202b29;
    --cu-surface-4: #283533;
    --cu-overlay: rgba(4, 9, 8, .72);

    /* bordi */
    --cu-border: #232f2d;
    --cu-border-2: #2e3c39;
    --cu-border-3: #3b4b48;

    /* testo */
    --cu-text: #e3ebe9;
    --cu-text-2: #a7b4b1;
    --cu-text-3: #7a8986;
    --cu-text-4: #5a6866;

    /* brand: il teal pieno resta per i riempimenti, quello chiaro per testo/link */
    --cu-primary: #27A38C;
    --cu-primary-hi: #3cc4a6;
    --cu-primary-soft: rgba(39, 163, 140, .16);
    --cu-primary-soft-2: rgba(39, 163, 140, .26);

    /* stati */
    --cu-danger: #f06c6c;
    --cu-danger-soft: rgba(240, 108, 108, .14);
    --cu-warning: #f2b54a;
    --cu-warning-soft: rgba(242, 181, 74, .14);
    --cu-info: #5aa8f2;
    --cu-info-soft: rgba(90, 168, 242, .14);
    --cu-success: #3cc48c;
    --cu-success-soft: rgba(60, 196, 140, .14);
    --cu-purple: #a78bfa;
    --cu-purple-soft: rgba(167, 139, 250, .14);

    --cu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --cu-shadow: 0 8px 24px -8px rgba(0, 0, 0, .55);
    --cu-shadow-lg: 0 18px 48px -12px rgba(0, 0, 0, .7);
    --cu-focus: 0 0 0 3px rgba(60, 196, 166, .28);
}

/* --- Cambio tema animato -------------------------------------------------- */
/* View Transitions: il nuovo tema si apre a cerchio dal pulsante (vedi JS in
   include/sidebar.php). Il fallback per i browser senza View Transitions è una
   dissolvenza dei colori con html.cu-theme-fading. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html.cu-theme-vt::view-transition-old(root) {
    z-index: 1;
}

html.cu-theme-vt::view-transition-new(root) {
    z-index: 2;
}

html.cu-theme-fading,
html.cu-theme-fading *,
html.cu-theme-fading *::before,
html.cu-theme-fading *::after {
    transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, box-shadow .45s ease !important;
}

/* ==========================================================================
   Guscio
   ========================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--cu-bg);
    background-image: none;
}

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

html[data-theme="dark"] section.body,
html[data-theme="dark"] .inner-wrapper,
html[data-theme="dark"] .content-body {
    background-color: var(--cu-bg);
}

html[data-theme="dark"] ::selection {
    background: rgba(60, 196, 166, .35);
    color: #fff;
}

/* Scrollbar della pagina e dei pannelli interni */
html[data-theme="dark"] {
    scrollbar-color: var(--cu-surface-4) var(--cu-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--cu-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--cu-surface-4);
    border: 3px solid var(--cu-bg);
    border-radius: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--cu-border-3);
}

html[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: var(--cu-bg);
}

/* Tipografia di base */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6 {
    color: var(--cu-text);
}

html[data-theme="dark"] hr {
    border-top-color: var(--cu-border);
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-color-dark,
html[data-theme="dark"] .text-black {
    color: var(--cu-text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-color-light {
    color: var(--cu-text-3) !important;
}

html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .text-success {
    color: var(--cu-primary-hi) !important;
}

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

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

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

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--cu-surface) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right {
    border-color: var(--cu-border) !important;
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm {
    box-shadow: var(--cu-shadow) !important;
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    background: var(--cu-surface-2);
    color: var(--cu-primary-hi);
}

/* --- Header in alto -------------------------------------------------------- */
html[data-theme="dark"] .modern-header {
    background: #101917;
    box-shadow: 0 1px 0 var(--cu-border), 0 6px 20px -10px rgba(0, 0, 0, .8);
}

html[data-theme="dark"] .modern-currency-button:hover,
html[data-theme="dark"] .modern-profile-button:hover {
    background: rgba(255, 255, 255, .06);
}

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

html[data-theme="dark"] .modern-profile-picture {
    box-shadow: 0 0 0 2px var(--cu-border-2);
}

html[data-theme="dark"] .modern-dropdown {
    background: var(--cu-surface-2);
    border-color: var(--cu-border-2);
    box-shadow: var(--cu-shadow-lg);
}

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

html[data-theme="dark"] .modern-dropdown-link:hover,
html[data-theme="dark"] .modern-dropdown-link:focus {
    background: var(--cu-primary-soft);
    color: var(--cu-primary-hi);
}

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

html[data-theme="dark"] .modern-dropdown-link:hover .modern-dropdown-icon,
html[data-theme="dark"] .modern-dropdown-link:focus .modern-dropdown-icon {
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] .modern-dropdown-head {
    background: var(--cu-primary-soft);
}

html[data-theme="dark"] .modern-dropdown-head-img {
    border-color: var(--cu-surface-2);
}

html[data-theme="dark"] .modern-dropdown-head-name {
    color: var(--cu-text);
}

html[data-theme="dark"] .modern-dropdown-head-mail,
html[data-theme="dark"] .modern-dropdown-label {
    color: var(--cu-text-3);
}

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

html[data-theme="dark"] .modern-dropdown-link--logout,
html[data-theme="dark"] .modern-dropdown-link--logout .modern-dropdown-icon {
    color: var(--cu-danger);
}

html[data-theme="dark"] .modern-dropdown-link--logout:hover,
html[data-theme="dark"] .modern-dropdown-link--logout:focus {
    background: var(--cu-danger-soft);
    color: #ff8a8a;
}

html[data-theme="dark"] .modern-dropdown-link--logout:hover .modern-dropdown-icon,
html[data-theme="dark"] .modern-dropdown-link--logout:focus .modern-dropdown-icon {
    color: #ff8a8a;
}

/* Pulsante WhatsApp "Hai bisogno di aiuto?" (fondo pagina, in include/sidebar.php) */
html[data-theme="dark"] .whatsapp-button {
    color: var(--cu-text);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] div.whatsapp-button {
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   Componenti Bootstrap 4 / Porto Admin
   ========================================================================== */

/* --- Card ------------------------------------------------------------------ */
html[data-theme="dark"] .card {
    background-color: transparent;
    color: inherit;
}

html[data-theme="dark"] .card:not(.card-transparent) > .card-body,
html[data-theme="dark"] .card-body {
    background: var(--cu-surface);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-header.bg-white {
    background: var(--cu-surface-2);
    border-bottom-color: var(--cu-border);
    color: var(--cu-text);
}

html[data-theme="dark"] .card-footer {
    background: var(--cu-surface-2);
    border-top-color: var(--cu-border);
    color: var(--cu-text-2);
}

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

html[data-theme="dark"] .card-actions a,
html[data-theme="dark"] .card-actions .card-action {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .card-actions a:hover,
html[data-theme="dark"] .card-actions .card-action:hover {
    background-color: var(--cu-surface-3);
    color: var(--cu-text);
}

/* --- Form ------------------------------------------------------------------ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"] {
    background-color: var(--cu-surface-2);
    border-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
    background-color: var(--cu-surface-2);
    border-color: var(--cu-primary);
    color: var(--cu-text);
    box-shadow: var(--cu-focus);
}

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

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled {
    background-color: var(--cu-surface);
    color: var(--cu-text-3);
    border-color: var(--cu-border);
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background-color: var(--cu-surface-2);
    color: var(--cu-text);
}

/* Freccia delle select nere: Bootstrap usa un SVG scuro come sfondo */
html[data-theme="dark"] .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23a7b4b1' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}

/* Autocompletamento del browser: niente riquadri gialli/bianchi */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--cu-text);
    -webkit-box-shadow: 0 0 0 1000px var(--cu-surface-3) inset;
    caret-color: var(--cu-text);
}

html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .input-group-addon {
    background-color: var(--cu-surface-3);
    border-color: var(--cu-border-2);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .form-text,
html[data-theme="dark"] .help-block {
    color: var(--cu-text-3);
}

html[data-theme="dark"] .custom-control-label::before {
    background-color: var(--cu-surface-2);
    border-color: var(--cu-border-3);
}

html[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cu-primary);
    border-color: var(--cu-primary);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] input[type="range"],
html[data-theme="dark"] progress {
    accent-color: var(--cu-primary);
}

html[data-theme="dark"] .has-error .form-control,
html[data-theme="dark"] .form-control.is-invalid,
html[data-theme="dark"] .form-control.error {
    border-color: var(--cu-danger);
}

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

/* --- Bottoni -------------------------------------------------------------- */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary {
    background-color: var(--cu-surface-3);
    border-color: var(--cu-border-2);
    color: var(--cu-text);
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus {
    background-color: var(--cu-surface-4);
    border-color: var(--cu-border-3);
    color: #fff;
}

html[data-theme="dark"] .btn-default:active,
html[data-theme="dark"] .btn-default.active,
html[data-theme="dark"] .btn-light:active,
html[data-theme="dark"] .btn-light.active {
    background-color: var(--cu-surface-4);
    color: #fff;
}

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-light {
    border-color: var(--cu-border-3);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-light:hover {
    background-color: var(--cu-surface-3);
    border-color: var(--cu-border-3);
    color: var(--cu-text);
}

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

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

/* --- Tabelle --------------------------------------------------------------- */
html[data-theme="dark"] .table {
    color: var(--cu-text-2);
    background-color: transparent;
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
    border-color: var(--cu-border);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table > thead > tr > th {
    background-color: var(--cu-surface-2);
    color: var(--cu-text);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--cu-surface-3);
    color: var(--cu-text);
}

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

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

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

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

html[data-theme="dark"] .modal-backdrop.show,
html[data-theme="dark"] .modal-backdrop.in {
    opacity: .7;
}

html[data-theme="dark"] .modal-backdrop {
    background-color: #020605;
}

html[data-theme="dark"] .close,
html[data-theme="dark"] button.close {
    color: var(--cu-text-2);
    text-shadow: none;
    opacity: .8;
}

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

/* --- Dropdown, liste, nav --------------------------------------------------- */
html[data-theme="dark"] .dropdown-menu {
    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"] .dropdown-item,
html[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--cu-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: var(--cu-surface-3);
    color: #fff;
}

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

html[data-theme="dark"] .list-group-item {
    background-color: var(--cu-surface);
    border-color: var(--cu-border);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--cu-surface-3);
    color: var(--cu-text);
}

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

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

html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
    border-color: var(--cu-border) var(--cu-border) var(--cu-border);
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link,
html[data-theme="dark"] .nav-tabs > li.active > a {
    background-color: var(--cu-surface);
    border-color: var(--cu-border) var(--cu-border) var(--cu-surface);
    color: var(--cu-text);
}

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

html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: var(--cu-surface);
    border-color: var(--cu-border);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .pagination .page-link:hover,
html[data-theme="dark"] .pagination > li > a:hover {
    background-color: var(--cu-surface-3);
    color: var(--cu-text);
}

html[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .pagination > .active > a {
    background-color: var(--cu-primary);
    border-color: var(--cu-primary);
    color: #fff;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--cu-surface);
    border-color: var(--cu-border);
    color: var(--cu-text-4);
}

/* --- Avvisi, badge, progress ---------------------------------------------- */
html[data-theme="dark"] .alert {
    border-color: var(--cu-border-2);
}

html[data-theme="dark"] .alert-success {
    background-color: var(--cu-success-soft);
    border-color: rgba(60, 196, 140, .3);
    color: #8fe3bf;
}

html[data-theme="dark"] .alert-info {
    background-color: var(--cu-info-soft);
    border-color: rgba(90, 168, 242, .3);
    color: #a9d1f8;
}

html[data-theme="dark"] .alert-warning {
    background-color: var(--cu-warning-soft);
    border-color: rgba(242, 181, 74, .3);
    color: #f6d08f;
}

html[data-theme="dark"] .alert-danger {
    background-color: var(--cu-danger-soft);
    border-color: rgba(240, 108, 108, .3);
    color: #f6a8a8;
}

html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-default {
    background-color: var(--cu-surface-2);
    color: var(--cu-text-2);
}

html[data-theme="dark"] .badge-light,
html[data-theme="dark"] .badge-default,
html[data-theme="dark"] .badge-secondary {
    background-color: var(--cu-surface-4);
    color: var(--cu-text);
}

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

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

html[data-theme="dark"] .popover-header {
    background-color: var(--cu-surface-4);
    border-bottom-color: var(--cu-border-2);
    color: var(--cu-text);
}

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

html[data-theme="dark"] .bs-popover-top .arrow::after,
html[data-theme="dark"] .bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: var(--cu-surface-3);
}

html[data-theme="dark"] .bs-popover-bottom .arrow::after,
html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cu-surface-4);
}

html[data-theme="dark"] .bs-popover-left .arrow::after,
html[data-theme="dark"] .bs-popover-auto[x-placement^="left"] .arrow::after {
    border-left-color: var(--cu-surface-3);
}

html[data-theme="dark"] .bs-popover-right .arrow::after,
html[data-theme="dark"] .bs-popover-auto[x-placement^="right"] .arrow::after {
    border-right-color: var(--cu-surface-3);
}

html[data-theme="dark"] .tooltip-inner {
    background-color: #e3ebe9;
    color: #0d1312;
}

html[data-theme="dark"] .bs-tooltip-top .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #e3ebe9;
}

html[data-theme="dark"] .bs-tooltip-bottom .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #e3ebe9;
}

html[data-theme="dark"] .bs-tooltip-left .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #e3ebe9;
}

html[data-theme="dark"] .bs-tooltip-right .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #e3ebe9;
}

/* --- Porto: page-header, tabs, wizard generici ----------------------------- */
html[data-theme="dark"] .page-header {
    background: var(--cu-surface);
    border-bottom-color: var(--cu-border);
    box-shadow: none;
}

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

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

html[data-theme="dark"] .tabs .nav-tabs .nav-link:hover {
    background: var(--cu-surface-3);
}

html[data-theme="dark"] .tabs .nav-tabs .nav-link.active,
html[data-theme="dark"] .tabs .nav-tabs li.active .nav-link {
    background: var(--cu-surface);
    border-left-color: var(--cu-border);
    border-right-color: var(--cu-border);
    color: var(--cu-primary-hi);
}

html[data-theme="dark"] .tabs .tab-content {
    background: var(--cu-surface);
    border-color: var(--cu-border);
    box-shadow: none;
}