/**
 * Theme Option Dark Mode engine (v3.3.0).
 * Palettes via :root[data-dark-theme]. Shells use CSS variables so OLED/Slate apply.
 * Loaded in ClientAreaFooterOutput so it wins over Maestro theme-color-*.css.
 */

:root {
    --dark-bg: #ffffff;
    --dark-surface: #f8fafc;
    --dark-text: #0f172a;
    --dark-muted: #64748b;
    --dark-border: #e2e8f0;
    --dark-accent: #2563eb;
    --dark-accent-2: #1d4ed8;
    --dark-icon: #0284c7;
}

:root[data-dark-theme="midnight"],
html.dark-theme[data-dark-theme="midnight"] {
    color-scheme: dark;
    --dark-bg: #0f172a;
    --dark-surface: #1e293b;
    --dark-text: #f8fafc;
    --dark-muted: #94a3b8;
    --dark-border: #334155;
    --dark-accent: #2563eb;
    --dark-accent-2: #1d4ed8;
    --dark-icon: #38bdf8;
}

:root[data-dark-theme="oled"],
html.dark-theme[data-dark-theme="oled"] {
    color-scheme: dark;
    --dark-bg: #000000;
    --dark-surface: #0a0a0a;
    --dark-text: #f5f5f5;
    --dark-muted: #a3a3a3;
    --dark-border: #262626;
    --dark-accent: #3b82f6;
    --dark-accent-2: #1d4ed8;
    --dark-icon: #60a5fa;
}

:root[data-dark-theme="slate"],
html.dark-theme[data-dark-theme="slate"] {
    color-scheme: dark;
    --dark-bg: #1c2433;
    --dark-surface: #2a3444;
    --dark-text: #e8eef7;
    --dark-muted: #9aa6b8;
    --dark-border: #4a5568;
    --dark-accent: #5b7c99;
    --dark-accent-2: #3d5568;
    --dark-icon: #7dd3fc;
}

html.dark-theme,
html.dark-theme body,
body.dark-theme {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

body.theme-transition-active * {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* —— Toggle in Maestro top bar (locked, image_73514f) —— */
html.dark-theme .dark-mode-toggle,
html.dark-theme .theme-option-dark-toggle,
body.dark-theme .dark-mode-toggle,
body.dark-theme .theme-option-dark-toggle {
    padding: 0;
    border: 0;
    box-shadow: none;
    vertical-align: middle;
}
html.dark-theme .theme-option-dark-toggle-nav,
body.dark-theme .theme-option-dark-toggle-nav {
    position: static;
    left: auto;
    bottom: auto;
}
.theme-option-dark-toggle.dark-mode-toggle,
html.dark-theme .theme-option-dark-toggle.dark-mode-toggle,
body.dark-theme .theme-option-dark-toggle.dark-mode-toggle,
.topbar .theme-option-dark-toggle.dark-mode-toggle,
#primaryMenu .theme-option-dark-toggle.dark-mode-toggle,
#primaryNavbar .theme-option-dark-toggle.dark-mode-toggle {
    height: 25px;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease;
    border: 0;
    box-shadow: none;
    padding: 0;
    flex: 0 0 25px;
    align-self: center;
    line-height: 1;
}
.theme-option-dark-toggle.dark-mode-toggle:hover,
html.dark-theme .theme-option-dark-toggle.dark-mode-toggle:hover,
body.dark-theme .theme-option-dark-toggle.dark-mode-toggle:hover,
.topbar .theme-option-dark-toggle.dark-mode-toggle:hover,
#primaryMenu .theme-option-dark-toggle.dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}
body.theme-transition-active .theme-option-dark-toggle.dark-mode-toggle {
    transition: background 0.2s ease;
}
#primaryMenu .primary-social-menu-links > .theme-option-dark-toggle.dark-mode-toggle {
    margin: 4px 0 4px 6px;
}

/* —— Dashboard / home shortcuts —— */
body.dark-theme .home-shortcuts .panel,
body.dark-theme .icon-box,
body.dark-theme .panel-body,
body.dark-theme .home-shortcuts,
body.dark-theme .home-shortcuts .panel-body,
body.dark-theme .client-home-panels .panel,
body.dark-theme .client-home-panels .panel-body,
body.dark-theme #main-body .tiles .tile,
body.dark-theme .tile,
html.dark-theme body.dark-theme .home-shortcuts .panel {
    background: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
}
body.dark-theme .home-shortcuts h1,
body.dark-theme .home-shortcuts h2,
body.dark-theme .home-shortcuts h3,
body.dark-theme .home-shortcuts h4,
body.dark-theme .home-shortcuts .panel-title,
body.dark-theme .icon-box h1,
body.dark-theme .icon-box h2,
body.dark-theme .icon-box h3,
body.dark-theme .icon-box h4,
body.dark-theme .home-shortcuts a,
body.dark-theme .icon-box a {
    color: var(--dark-text) !important;
}
body.dark-theme .home-shortcuts i,
body.dark-theme .home-shortcuts .fas,
body.dark-theme .home-shortcuts .far,
body.dark-theme .home-shortcuts .fal,
body.dark-theme .icon-box i,
body.dark-theme .icon-box svg,
body.dark-theme .client-home-panels i {
    color: var(--dark-icon) !important;
    fill: var(--dark-icon);
}

/* —— AI Command Center launcher + chat contrast —— */
html.dark-theme #aicmdcenter-launcher,
html.dark-theme .aicmdcenter-launcher,
body.dark-theme #aicmdcenter-launcher,
body.dark-theme .aicmdcenter-launcher,
body.dark-theme #ai-command-center-widget-trigger,
body.dark-theme .ai-chat-trigger {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
html.dark-theme #aicmdcenter-launcher svg,
html.dark-theme .aicmdcenter-launcher svg,
html.dark-theme #aicmdcenter-launcher svg path,
html.dark-theme .aicmdcenter-launcher-icon svg,
body.dark-theme #aicmdcenter-launcher svg,
body.dark-theme .aicmdcenter-launcher svg,
body.dark-theme #aicmdcenter-launcher svg path,
body.dark-theme .aicmdcenter-launcher-icon svg,
body.dark-theme #ai-command-center-widget-trigger svg,
body.dark-theme .ai-chat-trigger svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

html.dark-theme #aicmdcenter-root,
body.dark-theme #aicmdcenter-root,
html.dark-theme .ai-chat-container,
body.dark-theme .ai-chat-container {
    --aicmd-bg: #1e293b;
    --aicmd-ink: #f8fafc;
    --aicmd-muted: #64748b;
    --aicmd-line: #334155;
    color: #f8fafc;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-panel,
html.dark-theme #aicmdcenter-root .ai-chat-box,
body.dark-theme #aicmdcenter-root .aicmdcenter-panel,
body.dark-theme #aicmdcenter-root .ai-chat-box,
body.dark-theme .ai-chat-container,
body.dark-theme .ai-chat-box {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.45) !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-header,
body.dark-theme #aicmdcenter-root .aicmdcenter-header {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #334155 !important;
}
html.dark-theme #aicmdcenter-root .aicmdcenter-title,
html.dark-theme #aicmdcenter-root .aicmdcenter-status,
html.dark-theme #aicmdcenter-root #aicmdcenter-close,
body.dark-theme #aicmdcenter-root .aicmdcenter-title,
body.dark-theme #aicmdcenter-root .aicmdcenter-status,
body.dark-theme #aicmdcenter-root #aicmdcenter-close {
    color: #f8fafc !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-body,
html.dark-theme #aicmdcenter-root .aicmdcenter-messages,
body.dark-theme #aicmdcenter-root .aicmdcenter-body,
body.dark-theme #aicmdcenter-root .aicmdcenter-messages {
    background: #1e293b !important;
    color: #f8fafc !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-bubble.is-assistant,
body.dark-theme #aicmdcenter-root .aicmdcenter-bubble.is-assistant {
    background: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-bubble.is-user,
body.dark-theme #aicmdcenter-root .aicmdcenter-bubble.is-user {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-confirm-card,
html.dark-theme #aicmdcenter-root .aicmdcenter-bubble.is-system,
body.dark-theme #aicmdcenter-root .aicmdcenter-confirm-card,
body.dark-theme #aicmdcenter-root .aicmdcenter-bubble.is-system {
    background: #451a03 !important;
    border-color: #f59e0b !important;
    color: #fde68a !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-bubble.is-blocked,
html.dark-theme #aicmdcenter-root .aicmdcenter-confirm-card.is-failed,
body.dark-theme #aicmdcenter-root .aicmdcenter-bubble.is-blocked,
body.dark-theme #aicmdcenter-root .aicmdcenter-confirm-card.is-failed {
    background: #7f1d1d !important;
    border-color: #f87171 !important;
    color: #fecaca !important;
}
html.dark-theme #aicmdcenter-root .aicmdcenter-blocked-icon,
html.dark-theme #aicmdcenter-root .aicmdcenter-blocked-text,
html.dark-theme #aicmdcenter-root .aicmdcenter-prechat-error,
html.dark-theme #aicmdcenter-root #aicmdcenter-consent-hint,
html.dark-theme #aicmdcenter-root .aicmdcenter-confirm-status.is-error,
body.dark-theme #aicmdcenter-root .aicmdcenter-blocked-icon,
body.dark-theme #aicmdcenter-root .aicmdcenter-blocked-text,
body.dark-theme #aicmdcenter-root .aicmdcenter-prechat-error,
body.dark-theme #aicmdcenter-root #aicmdcenter-consent-hint,
body.dark-theme #aicmdcenter-root .aicmdcenter-confirm-status.is-error {
    color: #fecaca !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-composer,
html.dark-theme #aicmdcenter-root .aicmdcenter-composer-footer,
html.dark-theme #aicmdcenter-root .chat-footer-wrapper,
html.dark-theme #aicmdcenter-root .aicmdcenter-emoji-pop,
html.dark-theme #aicmdcenter-root .aicmdcenter-consent-card,
html.dark-theme #aicmdcenter-root .aicmdcenter-prechat,
body.dark-theme #aicmdcenter-root .aicmdcenter-composer,
body.dark-theme #aicmdcenter-root .aicmdcenter-composer-footer,
body.dark-theme #aicmdcenter-root .chat-footer-wrapper,
body.dark-theme #aicmdcenter-root .aicmdcenter-emoji-pop,
body.dark-theme #aicmdcenter-root .aicmdcenter-consent-card,
body.dark-theme #aicmdcenter-root .aicmdcenter-prechat {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-theme #aicmdcenter-root #aicmdcenter-input,
html.dark-theme #aicmdcenter-root .chat-input-field,
html.dark-theme #aicmdcenter-root .aicmdcenter-composer textarea,
html.dark-theme #aicmdcenter-root .aicmdcenter-prechat input,
html.dark-theme #aicmdcenter-root #aicmdcenter-lead-name,
html.dark-theme #aicmdcenter-root #aicmdcenter-lead-email,
html.dark-theme #aicmdcenter-root .aicmdcenter-confirm-input,
html.dark-theme #aicmdcenter-root .ai-chat-input,
body.dark-theme #aicmdcenter-root #aicmdcenter-input,
body.dark-theme #aicmdcenter-root .chat-input-field,
body.dark-theme #aicmdcenter-root .aicmdcenter-composer textarea,
body.dark-theme #aicmdcenter-root .aicmdcenter-prechat input,
body.dark-theme #aicmdcenter-root #aicmdcenter-lead-name,
body.dark-theme #aicmdcenter-root #aicmdcenter-lead-email,
body.dark-theme #aicmdcenter-root .aicmdcenter-confirm-input,
body.dark-theme #aicmdcenter-root .ai-chat-input {
    background: #0f172a !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
    border-color: #334155 !important;
}
html.dark-theme #aicmdcenter-root #aicmdcenter-input::placeholder,
html.dark-theme #aicmdcenter-root .chat-input-field::placeholder,
html.dark-theme #aicmdcenter-root .aicmdcenter-composer textarea::placeholder,
body.dark-theme #aicmdcenter-root #aicmdcenter-input::placeholder,
body.dark-theme #aicmdcenter-root .chat-input-field::placeholder,
body.dark-theme #aicmdcenter-root .aicmdcenter-composer textarea::placeholder {
    color: #64748b !important;
    opacity: 1;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-tool,
html.dark-theme #aicmdcenter-root .aicmdcenter-emoji-head,
body.dark-theme #aicmdcenter-root .aicmdcenter-tool,
body.dark-theme #aicmdcenter-root .aicmdcenter-emoji-head {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-consent-title,
html.dark-theme #aicmdcenter-root .aicmdcenter-composer-brand,
html.dark-theme #aicmdcenter-root .aicmdcenter-composer-brand-link,
body.dark-theme #aicmdcenter-root .aicmdcenter-consent-title,
body.dark-theme #aicmdcenter-root .aicmdcenter-composer-brand,
body.dark-theme #aicmdcenter-root .aicmdcenter-composer-brand-link {
    color: #f8fafc !important;
}
html.dark-theme #aicmdcenter-root .aicmdcenter-consent-text,
body.dark-theme #aicmdcenter-root .aicmdcenter-consent-text {
    color: #64748b !important;
}

html.dark-theme #aicmdcenter-root .aicmdcenter-bubble code,
html.dark-theme #aicmdcenter-root .aicmdcenter-bubble pre,
body.dark-theme #aicmdcenter-root .aicmdcenter-bubble code,
body.dark-theme #aicmdcenter-root .aicmdcenter-bubble pre {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* —— Header / navbar —— */
body.dark-theme .navbar-main,
body.dark-theme .header-nav,
body.dark-theme header#header,
body.dark-theme #primaryMenu,
body.dark-theme #secondaryMenu,
body.dark-theme .main-navbar-wrapper,
body.dark-theme #mainNavbar,
body.dark-theme .topbar {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}
body.dark-theme .navbar-main a,
body.dark-theme .header-nav a,
body.dark-theme #primaryMenu a,
body.dark-theme #secondaryMenu a,
body.dark-theme #mainNavbar a,
body.dark-theme #nav > li > a,
body.dark-theme .secondary-menu-links a,
body.dark-theme .primary-menu-links a {
    color: var(--dark-text) !important;
}
body.dark-theme .navbar-main a:hover,
body.dark-theme .navbar-main a:focus,
body.dark-theme .navbar-main .active > a,
body.dark-theme .header-nav a:hover,
body.dark-theme #mainNavbar .nav-link:hover,
body.dark-theme #nav > li.active > a,
body.dark-theme #nav > li > a:hover {
    color: var(--dark-accent) !important;
}
body.dark-theme #header .dropdown-menu,
body.dark-theme #secondaryMenu .dropdown-menu,
body.dark-theme .navbar-main .dropdown-menu {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}
body.dark-theme #header .dropdown-menu > li > a,
body.dark-theme #secondaryMenu .dropdown-menu > li > a {
    color: var(--dark-text) !important;
}
body.dark-theme #header .dropdown-menu > li > a:hover {
    background: var(--dark-bg) !important;
    color: var(--dark-accent) !important;
}
body.dark-theme .topbar .btn,
body.dark-theme .topbar .input-group-text,
body.dark-theme .btn-active-client {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* —— Knowledgebase —— */
body.dark-theme .kb-category-card,
body.dark-theme .kb-article-item,
body.dark-theme .kb-article,
body.dark-theme .kbarticles,
body.dark-theme .knowledgebase-search,
body.dark-theme #main-body .kb-category,
body.dark-theme .panel.kb-category,
body.dark-theme .list-group.kb-list .list-group-item {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border) !important;
}
body.dark-theme .kb-category-card p,
body.dark-theme .kb-article-item p,
body.dark-theme .kb-article .article-desc,
body.dark-theme .kbarticles small,
body.dark-theme .kb-category-card .text-muted,
body.dark-theme .kb-article-item .text-muted {
    color: var(--dark-muted) !important;
}
body.dark-theme .kb-category-card h1,
body.dark-theme .kb-category-card h2,
body.dark-theme .kb-category-card h3,
body.dark-theme .kb-article-item a,
body.dark-theme .kbarticles a {
    color: var(--dark-text) !important;
}

/* —— Cart / order summary —— */
body.dark-theme .view-cart-items,
body.dark-theme .cart-body,
body.dark-theme .item-title,
body.dark-theme #order-standard_cart,
body.dark-theme #order-standard_cart .view-cart-items,
body.dark-theme #order-standard_cart .view-cart-items-header,
body.dark-theme #order-standard_cart .cart-body {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}
body.dark-theme .item-title,
body.dark-theme #order-standard_cart .item-title,
body.dark-theme #order-standard_cart .product-name,
body.dark-theme #order-standard_cart td,
body.dark-theme #order-standard_cart th {
    color: var(--dark-text) !important;
}
body.dark-theme .order-summary,
body.dark-theme .summary-container,
body.dark-theme .subtotal,
body.dark-theme .total-due,
body.dark-theme #order-standard_cart div.order-summary,
body.dark-theme #order-standard_cart .order-summary {
    background: var(--dark-surface) !important;
    color: #ffffff !important;
    border-color: var(--dark-border) !important;
}
body.dark-theme .order-summary label,
body.dark-theme .summary-container label,
body.dark-theme .subtotal,
body.dark-theme .total-due,
body.dark-theme #order-standard_cart .total-due-today,
body.dark-theme #order-standard_cart .summary-totals {
    color: #ffffff !important;
}
body.dark-theme .promo-code-tab,
body.dark-theme input.promo-input,
body.dark-theme #order-standard_cart #inputPromotionCode,
body.dark-theme #order-standard_cart input[name="promocode"],
body.dark-theme #order-standard_cart .view-cart-promotion input {
    background: var(--dark-bg) !important;
    border: 1px solid var(--dark-border) !important;
    color: #ffffff !important;
}

/* —— Shared Maestro shells —— */
body.dark-theme #main-body,
body.dark-theme .primary-content,
body.dark-theme .main-content,
body.dark-theme #main-body .panel,
body.dark-theme #main-body .card,
body.dark-theme #main-body .well,
body.dark-theme #main-body .list-group-item,
body.dark-theme footer.footer,
body.dark-theme div#footer,
body.dark-theme #copyright {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}
body.dark-theme #main-body .form-control,
body.dark-theme #main-body input:not([type="checkbox"]):not([type="radio"]),
body.dark-theme #main-body select,
body.dark-theme #main-body textarea,
body.dark-theme #main-body .table,
body.dark-theme #main-body .table td,
body.dark-theme #main-body .table th {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}
body.dark-theme #main-body a {
    color: var(--dark-icon);
}
body.dark-theme #main-body .text-muted {
    color: var(--dark-muted) !important;
}