/**
 * YOOAdmin — dark mode brand color blending
 *
 * Maps saved brand sources into softened dark-mode accents (color-mix),
 * keeping surfaces/text on dark tokens while reflecting custom colors subtly.
 *
 * @package YOOAdmin
 */

html.yoo-wizard-html-dark,
html[data-yooadmin-studio-color-mode-effective="dark"],
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] {
    --yoo-brand-source: var(--yooadmin-brand-source, #eda934);
    --yoo-brand-strong: color-mix(in srgb, var(--yoo-brand-source) 93%, #0c0e12 7%);
    --yoo-brand-accent: color-mix(in srgb, var(--yoo-brand-source) 88%, #0c0e12 12%);
    --yoo-brand-soft: color-mix(in srgb, var(--yoo-brand-source) 82%, #0c0e12 18%);
    --yoo-brand-muted: color-mix(in srgb, var(--yoo-brand-source) 68%, #5a6070 32%);
    --yoo-brand-surface: color-mix(in srgb, var(--yoo-brand-source) 11%, #141820 89%);
    --yoo-brand-border: color-mix(in srgb, var(--yoo-brand-source) 18%, rgba(255, 255, 255, 0.08) 82%);
    --yoo-brand-glow: color-mix(in srgb, var(--yoo-brand-source) 24%, transparent 76%);

    --yooadmin-primary: var(--yoo-brand-accent);
    --yp-primary: var(--yoo-brand-accent);
    --yp-primary-600: var(--yoo-brand-strong);
    --ysh-brand: var(--yoo-brand-accent);
    --ysh-icon-well: color-mix(in srgb, var(--yoo-brand-source) 18%, transparent);

    --yp-header-bg: color-mix(
        in srgb,
        var(--yooadmin-header-bg-source, var(--yooadmin-header-bg, #4b4b4b)) 26%,
        #0c0e12 74%
    );
    --yooadmin-header-bg: var(--yp-header-bg);

    --yps-bg: color-mix(
        in srgb,
        var(--yooadmin-sidebar-bg-source, var(--yooadmin-sidebar-bg, #4b4b4b)) 18%,
        #0f1115 82%
    );
    --yooadmin-sidebar-bg: var(--yps-bg);

    --yooadmin-card-icon: var(--yoo-brand-soft);
    --yooadmin-border: var(--yoo-brand-border);

    --wp-admin-theme-color: var(--yoo-brand-accent);
    --wp-admin-theme-color-darker-10: color-mix(in srgb, var(--yoo-brand-strong) 92%, #000 8%);
    --wp-admin-theme-color-darker-20: color-mix(in srgb, var(--yoo-brand-strong) 84%, #000 16%);
    --wp-components-color-accent: var(--yoo-brand-accent);
    --wp-components-color-accent-darker-10: var(--wp-admin-theme-color-darker-10);
    --wp-components-color-accent-darker-20: var(--wp-admin-theme-color-darker-20);
}

/* Wizard — dark brand tokens (resolve from page-level brand source) */
html.yoo-wizard-html-dark,
html.yoo-wizard-html-dark .yooadmin-wizard-page,
.yooadmin-wizard-page.yoo-wizard--dark {
    --yoo-wizard-brand-source: var(--yooadmin-brand-source, #eda934);
    --yoo-wizard-brand-strong: color-mix(in srgb, var(--yoo-wizard-brand-source) 93%, #0c0e12 7%);
    --yoo-wizard-brand-accent: color-mix(in srgb, var(--yoo-wizard-brand-source) 88%, #0c0e12 12%);
    --yoo-wizard-brand-soft: color-mix(in srgb, var(--yoo-wizard-brand-source) 82%, #0c0e12 18%);
    --yoo-wizard-brand-muted: color-mix(in srgb, var(--yoo-wizard-brand-source) 68%, #5a6070 32%);
    --yoo-wizard-brand-surface: color-mix(in srgb, var(--yoo-wizard-brand-source) 11%, #141820 89%);
    --yoo-wizard-brand-border: color-mix(in srgb, var(--yoo-wizard-brand-source) 18%, rgba(255, 255, 255, 0.08) 82%);
    --yoo-wizard-brand-glow: color-mix(in srgb, var(--yoo-wizard-brand-source) 24%, transparent 76%);
    --yoo-wizard-brand: var(--yoo-wizard-brand-accent);
    --yoo-wizard-header: color-mix(
        in srgb,
        var(--yoo-wizard-header-brand, var(--yooadmin-header-bg-source, #4b4b4b)) 24%,
        #0c0e12 76%
    );
}

/* Wizard — accent overrides (beat inline light rules) */
html.yoo-wizard-html-dark .yooadmin-wizard-page .yooadmin-setup-steps li.completed,
.yooadmin-wizard-page.yoo-wizard--dark .yooadmin-setup-steps li.completed {
    color: var(--yoo-wizard-brand-soft) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .yooadmin-setup-steps li.active .step-number,
html.yoo-wizard-html-dark .yooadmin-wizard-page .yooadmin-setup-steps li.completed .step-number,
.yooadmin-wizard-page.yoo-wizard--dark .yooadmin-setup-steps li.active .step-number,
.yooadmin-wizard-page.yoo-wizard--dark .yooadmin-setup-steps li.completed .step-number {
    background: var(--yoo-wizard-brand-strong) !important;
    border-color: var(--yoo-wizard-brand-strong) !important;
    box-shadow: 0 4px 14px var(--yoo-wizard-brand-glow) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-step-footer .wizard-btn-primary:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-step-footer .wizard-btn-next:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-primary:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-next:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-step-footer .wizard-btn-primary:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-step-footer .wizard-btn-next:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-primary:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-next:not(:disabled):not(.disabled) {
    background-color: var(--yoo-wizard-brand-strong) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 1px 8px var(--yoo-wizard-brand-glow) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-step-footer .wizard-btn-primary:hover:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-step-footer .wizard-btn-next:hover:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-primary:hover:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-next:hover:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-launch:hover:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-step-footer .wizard-btn-primary:hover:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-step-footer .wizard-btn-next:hover:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-primary:hover:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-next:hover:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-launch:hover:not(:disabled):not(.disabled) {
    background-color: color-mix(in srgb, var(--yoo-wizard-brand-strong) 92%, #fff 8%) !important;
    opacity: 1 !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-step-footer .wizard-btn-primary:active:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-step-footer .wizard-btn-next:active:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-primary:active:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-next:active:not(:disabled):not(.disabled),
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-launch:active:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-step-footer .wizard-btn-primary:active:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-step-footer .wizard-btn-next:active:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-primary:active:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-next:active:not(:disabled):not(.disabled),
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-launch:active:not(:disabled):not(.disabled) {
    transform: translateY(0) scale(0.98) !important;
    background-color: color-mix(in srgb, var(--yoo-wizard-brand-strong) 82%, #000 18%) !important;
    box-shadow: 0 1px 3px var(--yoo-wizard-brand-glow) !important;
    opacity: 1 !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-primary:disabled,
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-next:disabled,
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-primary.disabled,
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-btn-next.disabled,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-primary:disabled,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-next:disabled,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-primary.disabled,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-btn-next.disabled {
    background-color: var(--yoo-wizard-panel, #141820) !important;
    border: 1px solid var(--yoo-wizard-border) !important;
    color: var(--yoo-wizard-subtle, #7d8794) !important;
    opacity: 0.55 !important;
    filter: saturate(0.45) !important;
    box-shadow: none !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-compact-setting input[type="checkbox"]:checked ~ .wizard-compact-checkmark,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-compact-setting input[type="checkbox"]:checked ~ .wizard-compact-checkmark,
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-checkbox-label input[type="checkbox"]:checked + .wizard-checkbox-custom,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-checkbox-label input[type="checkbox"]:checked + .wizard-checkbox-custom {
    background: var(--yoo-wizard-brand-strong) !important;
    border-color: var(--yoo-wizard-brand-strong) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-section-hint .yoo-hint,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-section-hint .yoo-hint,
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-checkbox-text a,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-checkbox-text a,
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-features-list .dashicons,
html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-launch-icon .dashicons,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-features-list .dashicons,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-launch-icon .dashicons {
    color: var(--yoo-wizard-brand-soft) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-activate-license.yp-yoo-btn--primary,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-activate-license.yp-yoo-btn--primary {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--yoo-wizard-brand-strong) 88%, #fff 12%) 0%,
        var(--yoo-wizard-brand-strong) 100%
    ) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-activate-license.yp-yoo-btn--primary:hover,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-activate-license.yp-yoo-btn--primary:hover {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--yoo-wizard-brand-strong) 92%, #fff 8%) 0%,
        color-mix(in srgb, var(--yoo-wizard-brand-strong) 96%, #000 4%) 100%
    ) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.yoo-wizard-html-dark .yoo-wizard-appearance-btn.is-active,
.yooadmin-wizard-page.yoo-wizard--dark .yoo-wizard-appearance-btn.is-active {
    color: var(--yoo-wizard-brand-soft) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-colors-dark-notice,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-colors-dark-notice {
    border-color: var(--yoo-wizard-brand-border) !important;
    background: var(--yoo-wizard-brand-surface) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-colors-dark-notice__icon,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-colors-dark-notice__icon {
    color: var(--yoo-wizard-brand-soft) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .wizard-colors-dark-notice__btn,
.yooadmin-wizard-page.yoo-wizard--dark .wizard-colors-dark-notice__btn {
    background: var(--yoo-wizard-brand-strong) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .yooadmin-wizard-popup-checkbox input[type="checkbox"]:checked + span::before,
.yooadmin-wizard-page.yoo-wizard--dark .yooadmin-wizard-popup-checkbox input[type="checkbox"]:checked + span::before {
    background: var(--yoo-wizard-brand-strong) !important;
    border-color: var(--yoo-wizard-brand-strong) !important;
}

html.yoo-wizard-html-dark .yooadmin-wizard-page .yooadmin-wizard-popup-checkbox a,
.yooadmin-wizard-page.yoo-wizard--dark .yooadmin-wizard-popup-checkbox a {
    color: var(--yoo-wizard-brand-soft) !important;
}

html.yoo-wizard-html-dark #yooadmin-otp-popup .button-primary,
html.yoo-wizard-html-dark #yooadmin-otp-popup .button.yooadmin-login-code,
html.yoo-wizard-html-dark #yooadmin-otp-popup .button.yooadmin-otp-use-code,
html.yoo-wizard-html-dark #yooadmin-otp-popup .button.yooadmin-otp-resend,
html.yoo-wizard-html-dark #yooadmin-otp-popup .button.yooadmin-code-back,
html.yoo-wizard-html-dark #yooadmin-otp-popup .button.yooadmin-otp-back {
    background-color: var(--yoo-brand-strong) !important;
    border-color: var(--yoo-brand-strong) !important;
}

html.yoo-wizard-html-dark #yooadmin-otp-popup .yooadmin-otp-forgot,
html.yoo-wizard-html-dark #yooadmin-otp-popup .yooadmin-otp-mode-active {
    color: var(--yoo-brand-soft) !important;
}

html.yoo-wizard-html-dark #yooadmin-otp-popup .yooadmin-otp-mode-active {
    background: var(--yoo-brand-surface) !important;
    box-shadow: inset 0 -2px 0 var(--yoo-brand-soft) !important;
}