/* ============================================================================ Dashboard dark mode. Activated by `html[data-theme="dark"]` (set early in from localStorage key `wh_theme`; toggled from the ad library header or profile dropdown on other dashboard pages). The light UI mostly uses hardcoded colors, so this file re-skins the major surfaces: page canvas, navbar, filter bar, ad cards, popovers and the ad detail modal. Where the light UI already reads CSS variables (--wh- / --es-) we override those instead. ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; /* Palette */ --dk-bg: #0e1014; /* page canvas */ --dk-surface-deep: #0b0d11; /* recessed cards (darker than the panel around them) */ --dk-surface: #15181e; /* cards, navbar, modal panels */ --dk-surface-2: #1b1f27; /* raised surfaces, hovers */ --dk-surface-3: #232936; /* active / focus surfaces */ --dk-border: #262b35; --dk-border-strong: #353c4a; --dk-text: #e6e8ee; --dk-text-2: #a6adbb; --dk-text-3: #7e8595; --dk-accent: #4d7df2; /* Existing dashboard theme hooks */ --wh-page-canvas: var(--dk-bg); --wh-filter-bar-bg: var(--dk-surface); --wh-filter-bar-border: var(--dk-border); --wh-filter-surface: var(--dk-surface-2); --wh-filter-surface-hover: var(--dk-surface-3); --wh-filter-surface-focus: var(--dk-surface-3); /* Product import (Shopify) modal theme hooks */ --pi-bg-gray: var(--dk-surface-2); --pi-border-gray: var(--dk-border-strong); --pi-text-main: var(--dk-text); --pi-text-muted: var(--dk-text-2); --pi-text-light: var(--dk-text-3); } /* ── Page shell ─────────────────────────────────────────────────────────── */ html[data-theme="dark"] body { background-color: var(--dk-bg) !important; color: var(--dk-text); } 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(--dk-text); } html[data-theme="dark"] hr { border-color: var(--dk-border); background-color: var(--dk-border); } /* Native scrollbars */ html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dk-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--dk-border-strong); } /* ── Navbar ─────────────────────────────────────────────────────────────── */ html[data-theme="dark"] #main-navbar.navbar_component { background-color: var(--dk-surface) !important; border-bottom: 1px solid var(--dk-border); } /* The wordmark is a black-text PNG; invert it (hue-rotate keeps the blue mark blue). */ html[data-theme="dark"] .navbar1_logo { filter: invert(1) hue-rotate(180deg); } html[data-theme="dark"] .navbar_component .menu_links { color: var(--dk-text-2) !important; } html[data-theme="dark"] .navbar_component .menu_links:hover { color: var(--dk-text) !important; } html[data-theme="dark"] .watch-tutorial-btn { background: var(--dk-surface-2); box-shadow: 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .watch-tutorial-btn:hover { background: var(--dk-surface-3); } html[data-theme="dark"] .watch-tutorial-btn .watch-tutorial-text { color: var(--dk-text); } html[data-theme="dark"] .dark-hover:hover { background-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .nav-dropdown-menu { background: var(--dk-surface-2); color: var(--dk-text); border-color: var(--dk-border-strong); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .nav-dropdown-menu::before { border-bottom-color: var(--dk-surface-2); } html[data-theme="dark"] .nav-dropdown-item { color: var(--dk-text-2); } html[data-theme="dark"] .nav-dropdown-item:hover { background-color: var(--dk-surface-3); color: var(--dk-accent); } /* styles.css forces #111827 !important on these navbar links (light-navbar contrast) */ html[data-theme="dark"] .navbar_component .menu_links, html[data-theme="dark"] .navbar_component .dashboard-label, html[data-theme="dark"] .navbar_component .nav-dropdown-item, html[data-theme="dark"] .navbar_component .nav-dropdown-toggle { color: var(--dk-text-2) !important; } html[data-theme="dark"] .navbar_component .nav-dropdown-item:hover { color: #8ab0f8 !important; } /* Tour / Knowledge / icon buttons in navbar (white pills) */ html[data-theme="dark"] #main-navbar .bg-white { background-color: var(--dk-surface-2) !important; } html[data-theme="dark"] #main-navbar .border-gray-200 { border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] #main-navbar [stroke="#374151"] { stroke: var(--dk-text-2); } html[data-theme="dark"] #main-navbar [fill="#030712"] { fill: var(--dk-text); } html[data-theme="dark"] #main-navbar .text-\[\#374151\], html[data-theme="dark"] #main-navbar .text-\[\#030712\] { color: var(--dk-text) !important; } /* Profile dropdown (popper) */ html[data-theme="dark"] .dropdown-container { background-color: var(--dk-surface-2); color: var(--dk-text); border: 1px solid var(--dk-border-strong); } html[data-theme="dark"] .dropdown-container hr { border-color: var(--dk-border-strong); } html[data-theme="dark"] .dropdown-item { color: var(--dk-text-2); } html[data-theme="dark"] .dropdown-item:hover { color: var(--dk-text); } /* Inputs inside any dropdown popup (e.g. ad card "Share Url") */ html[data-theme="dark"] .dropdown-container input, html[data-theme="dark"] .dropdown-container textarea { background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .dropdown-container input::placeholder, html[data-theme="dark"] .dropdown-container textarea::placeholder { color: var(--dk-text-3) !important; } /* ── Generic Tailwind utility re-skin (page scope) ──────────────────────── */ html[data-theme="dark"] .bg-white { background-color: var(--dk-surface) !important; } html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-grey-100, html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-indigo-50, html[data-theme="dark"] .bg-blue-50 { background-color: var(--dk-surface-2) !important; } html[data-theme="dark"] .bg-gray-200, html[data-theme="dark"] .bg-gray-300 { background-color: var(--dk-surface-3) !important; } html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--dk-surface-3) !important; } html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800 { color: var(--dk-text) !important; } html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-slate-600 { color: var(--dk-text-2) !important; } html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400, html[data-theme="dark"] .text-slate-500 { color: var(--dk-text-3) !important; } html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300, html[data-theme="dark"] .border-slate-200 { border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .divide-gray-100 > *, html[data-theme="dark"] .divide-gray-200 > * { border-color: var(--dk-border) !important; } /* Keep "dark" CTAs visible (e.g. bg-gray-900 upgrade buttons) */ html[data-theme="dark"] .bg-gray-900, html[data-theme="dark"] .bg-gray-800 { background-color: var(--dk-surface-3) !important; } /* styles.css scoped legacy glossy inset to .w-button / .button only. Keep dark mode reset for any stray buttons that still pick it up. */ html[data-theme="dark"] button { box-shadow: none !important; } /* ── Filter form shell + controls ───────────────────────────────────────── */ html[data-theme="dark"] .shadow-container { background-color: var(--dk-surface); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .dashboard-filters-explore.filters-bar { --es-border: var(--dk-border); --es-border-hover: var(--dk-border-strong); --es-control-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --es-control-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.5); --es-control-focus-ring: 0 0 0 3px rgba(77, 125, 242, 0.25); --es-filter-text: var(--dk-text); --es-filter-text-placeholder: var(--dk-text-2); } html[data-theme="dark"] .dashboard-meta-filters-panel.dashboard-filters-explore.filters-bar { --es-filter-surface: var(--dk-surface-2); --es-filter-surface-hover: var(--dk-surface-3); } /* Inputs / selects / textareas */ html[data-theme="dark"] .form-input, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .form-input::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dk-text-3); } /* Select2 */ html[data-theme="dark"] .select2-container .select2-selection--single, html[data-theme="dark"] .select2-container .select2-selection--multiple { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .select2-container .select2-selection__rendered { color: var(--dk-text) !important; } html[data-theme="dark"] .select2-dropdown { background-color: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--dk-surface); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .select2-results__option { color: var(--dk-text-2); } html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] { background-color: var(--dk-surface-3) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .select2-results__option[aria-selected="true"] { background-color: var(--dk-surface-3); } html[data-theme="dark"] .select2-selection__choice { background-color: var(--dk-surface-3) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } /* Filter dropdown panels attached to : dashboard-filters-explore.css styles them via high-specificity `body:has(.filters-bar)` rules with literal colors and !important (the --es-* vars are out of scope there), so match that specificity. */ html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown { background: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important; } /* styles.css gives the inner options

its own white card (padding + radius) */ html[data-theme="dark"] .select2-results__options { background-color: var(--dk-surface-2); border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option:not(.select2-results__message) { color: var(--dk-text-2) !important; -webkit-text-fill-color: var(--dk-text-2) !important; } html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option:hover, html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option:focus { background-color: var(--dk-surface-3) !important; color: var(--dk-text) !important; -webkit-text-fill-color: var(--dk-text) !important; } html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option[aria-selected='true']:not(.select2-results__option--highlighted) { background-color: var(--dk-surface-2) !important; color: var(--dk-text) !important; -webkit-text-fill-color: var(--dk-text) !important; } /* Multi-select checkboxes inside the dropdowns */ html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option:not(.select2-results__message):before { background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option[aria-selected='true']:before, html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option--highlighted[aria-selected='true']:before { background-color: var(--dk-accent) !important; border: 0 !important; } html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-results__option--highlighted[aria-selected='false']:before { background-color: var(--dk-surface) !important; border: 1.5px solid var(--dk-border-strong) !important; background-image: none !important; } /* Search box inside the dropdowns */ html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown .select2-search--dropdown .select2-search__field { background: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } html[data-theme="dark"] body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown .select2-search--dropdown .select2-search__field:focus { border-color: var(--dk-accent) !important; box-shadow: 0 0 0 3px rgba(77, 125, 242, 0.2) !important; -webkit-box-shadow: 0 0 0 3px rgba(77, 125, 242, 0.2) !important; } /* Themes dropdown helper bar (select all / clear all) */ html[data-theme="dark"] .select2-dropdown .themes-select-helpers { background: var(--dk-surface-2); border-bottom-color: var(--dk-border-strong); } html[data-theme="dark"] .select2-dropdown .themes-helper-btn:hover, html[data-theme="dark"] .select2-dropdown .themes-helper-btn:focus { background: var(--dk-surface-3); } /* "Sort By" pill relocated to the results row: styled with literal colors + !important and 4-class selectors, so match its specificity here. */ html[data-theme="dark"] .select-wrapper.sortby-in-results .select2-container--default .select2-selection--single { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .select-wrapper.sortby-in-results .select2-container--default .select2-selection--single:hover { background-color: var(--dk-surface-3) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .select-wrapper.sortby-in-results .select2-caption-label { color: var(--dk-text) !important; -webkit-text-fill-color: var(--dk-text) !important; } html[data-theme="dark"] .select-wrapper.sortby-in-results .select2-selection__rendered { color: var(--dk-text-2) !important; } html[data-theme="dark"] .select-wrapper.sortby-in-results .select-label { color: var(--dk-text-2); } /* Tab badges + "Clear all" button in the filters bar header */ html[data-theme="dark"] .wh-tab-count { background: transparent; border: 1px solid var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .dashboard-filters-explore.filters-bar .wh-tab.active .wh-tab-count { background: var(--dk-surface-3); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .wh-active-label { color: var(--dk-text-2); } html[data-theme="dark"] .dashboard-filters-explore.filters-bar .wh-clear-all { background: var(--dk-surface-2); color: var(--dk-text-2); } html[data-theme="dark"] .dashboard-filters-explore.filters-bar .wh-clear-all:hover { background: var(--dk-surface-3); color: var(--dk-text); } /* Range/summary filter popovers (Days Running, EU ad spend, EU/UK Audience, …): inline Dashboard.php rule paints them with a white gradient !important. */ html[data-theme="dark"] .filters [id^="tooltip"] { background: linear-gradient(var(--dk-surface-2) 0%, var(--dk-surface) 100%) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text); } html[data-theme="dark"] .dashboard-filters-explore.filters-bar [id^="tooltip"] .text-gray-600, html[data-theme="dark"] .dashboard-filters-explore.filters-bar [id^="tooltip"] .text-gray-500 { color: var(--dk-text-2) !important; } /* Min/Max range inputs inside the popovers stay white via .w-input/.select2-selection */ html[data-theme="dark"] .filters [id^="tooltip"] input.form-input, html[data-theme="dark"] .filters [id^="tooltip"] input.w-input, html[data-theme="dark"] .filters [id^="tooltip"] textarea { background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .filters [id^="tooltip"] input::placeholder, html[data-theme="dark"] .filters [id^="tooltip"] textarea::placeholder { color: var(--dk-text-3) !important; } /* Lightpick date picker */ html[data-theme="dark"] .lightpick { background-color: var(--dk-surface-2); color: var(--dk-text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .lightpick__day, html[data-theme="dark"] .lightpick__month-title, html[data-theme="dark"] .lightpick__days-of-the-week, html[data-theme="dark"] .lightpick__day-of-the-week { color: var(--dk-text-2); } html[data-theme="dark"] .lightpick__day.is-available:hover { background-color: var(--dk-surface-3); } /* lightpick.css paints the month grid as light cards (#EEE grid lines + #FFF cells) */ html[data-theme="dark"] .lightpick__months { background-color: var(--dk-border); } html[data-theme="dark"] .lightpick__month { background-color: var(--dk-surface-2); } html[data-theme="dark"] .lightpick__month-title > .lightpick__select { color: var(--dk-text); } html[data-theme="dark"] .lightpick__month-title > .lightpick__select:disabled { color: var(--dk-text-2); } html[data-theme="dark"] .lightpick__previous-action, html[data-theme="dark"] .lightpick__next-action, html[data-theme="dark"] .lightpick__close-action { background-color: var(--dk-surface-3) !important; color: var(--dk-text); } html[data-theme="dark"] .lightpick__tooltip { background-color: var(--dk-surface-3); color: var(--dk-text); } html[data-theme="dark"] .lightpick__tooltip::after { border-top-color: var(--dk-surface-3); } html[data-theme="dark"] .lightpick .preset-range.selected { background-color: var(--dk-surface-3); color: var(--dk-text); } html[data-theme="dark"] .lightpick__reset-action { background-color: var(--dk-surface-3) !important; } /* Quick pills (timeframe etc.) */ html[data-theme="dark"] .timeframe-pill { background: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .timeframe-pill:hover { background: var(--dk-surface-3); border-color: var(--dk-border-strong); } html[data-theme="dark"] .timeframe-pill.active { background: var(--dk-accent); border-color: var(--dk-accent); color: #fff; } /* ── Ad cards ───────────────────────────────────────────────────────────── */ html[data-theme="dark"] .add_item, html[data-theme="dark"] .skeletonadd { /* !important: styles.css has higher-specificity white rules (.one_add_wrapper > .add_item:has(...)) and ads.js sets an inline `border: 1px solid rgb(242,242,242)` on each card */ background: var(--dk-surface) !important; border: 1px solid var(--dk-border) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } /* Some title boxes carry inline background-color:white */ html[data-theme="dark"] .frameitem-title-box { background-color: transparent !important; } html[data-theme="dark"] .add_item .text-block-7, html[data-theme="dark"] .add_item .primary-copy, html[data-theme="dark"] .add_item p { color: var(--dk-text-2) !important; } html[data-theme="dark"] .add_item a, html[data-theme="dark"] .add_item strong, html[data-theme="dark"] .add_item b, html[data-theme="dark"] .add_item h1, html[data-theme="dark"] .add_item h2, html[data-theme="dark"] .add_item h3, html[data-theme="dark"] .add_item h4 { color: var(--dk-text) !important; } html[data-theme="dark"] .skeleton { background-color: var(--dk-surface-3) !important; background-image: linear-gradient(90deg, var(--dk-surface-3), var(--dk-surface-2), var(--dk-surface-3)) !important; } /* CTA row: domain/caption lines carry inline hex colors; media area has inline #f8fafc */ html[data-theme="dark"] .add_item .frameitem-titles div { color: var(--dk-text-3) !important; } html[data-theme="dark"] .add_item .frameitem-titles div:nth-child(2) { color: var(--dk-text) !important; } html[data-theme="dark"] .add_item .video-2 { background: var(--dk-surface-2) !important; } html[data-theme="dark"] .frameitem-info { background-color: var(--dk-surface-2); color: var(--dk-text-2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .frameitem-info:hover { background-color: var(--dk-surface-3); color: var(--dk-text); } /* Card top cap: light-blue EU metrics bar -> dark blue tint */ html[data-theme="dark"] .fw-ad-card-top { background: #1d2940; color: #b9c8e8; } html[data-theme="dark"] .fw-ad-card-top--no-eu { background: var(--dk-surface-3); color: var(--dk-text-2); } html[data-theme="dark"] .fw-ad-card-top:not(.fw-ad-card-top--no-eu) .fw-ad-card-metrics-bar__sep, html[data-theme="dark"] .fw-ad-card-top:not(.fw-ad-card-top--no-eu) .fw-ad-card-metrics-bar__metric-daily::before { color: #7da4f5; } /* Metric values/icons in the top bar are near-black in light mode */ html[data-theme="dark"] .fw-ad-card-metrics-bar__metric-value, html[data-theme="dark"] .fw-ad-card-metrics-bar__metric-daily, html[data-theme="dark"] .fw-ad-card-metrics-bar__metric-icon--eye { color: var(--dk-text); } html[data-theme="dark"] .fw-ad-card-metrics-bar__per-day, html[data-theme="dark"] .fw-ad-card-metrics-bar__metric-icon--dollar { color: var(--dk-text-2); } html[data-theme="dark"] .fw-ad-card-metrics-bar__sep, html[data-theme="dark"] .fw-ad-card-metrics-bar__metric-daily::before { color: var(--dk-border-strong); } html[data-theme="dark"] .fw-ad-card-metrics-bar__placeholder, html[data-theme="dark"] .fw-ad-card-metrics-bar__countries .fw-ad-card-info-overflow { color: var(--dk-text-3); } /* Product revenue strip (white pill under the metrics bar) */ html[data-theme="dark"] .fw-ad-card-product-revenue__inner { background: var(--dk-surface-2); border-color: var(--dk-border-strong); } html[data-theme="dark"] .fw-ad-card-product-revenue__value { color: var(--dk-text); } html[data-theme="dark"] .fw-ad-card-product-revenue--empty .fw-ad-card-product-revenue__inner { background: var(--dk-surface-2); border-color: var(--dk-border); } html[data-theme="dark"] .fw-ad-card-product-revenue--empty .fw-ad-card-product-revenue__value { color: var(--dk-text-3); } /* Header info tiles (countries / website / targeting) */ html[data-theme="dark"] .fw-ad-card-info-tile { border-color: var(--dk-border); background: var(--dk-surface-2); } html[data-theme="dark"] .fw-ad-card-info-tile-k { color: var(--dk-text-3); } html[data-theme="dark"] .fw-ad-card-info-tile-v { color: var(--dk-text); } /* Rank state rows: tinted backgrounds work on dark, but the "stable" text is too dim */ html[data-theme="dark"] .fw-ad-card-rank-state--stable { color: var(--dk-text-2); } html[data-theme="dark"] .fw-ad-card-product-info { border-color: var(--dk-border-strong); } html[data-theme="dark"] .fw-ad-card-product-info:not(.fw-ad-card-product-info--placeholder):hover { background-color: var(--dk-surface-2); border-color: var(--dk-border-strong); } html[data-theme="dark"] .fw-ad-card-product-placeholder-avatar { background: var(--dk-surface-3); border-color: var(--dk-border-strong); } /* Light separator lines / borders inside cards: - .fw-ad-card-page-info gets an inline `border-top: 1px solid #f2f2f2` (ads.js) - .fw-ad-card-timeline and some title boxes use Tailwind border-[#f2f2f2] - page/product avatars carry an inline `border: 1px solid #e9eaeb` */ html[data-theme="dark"] .fw-ad-card-page-info { border-top-color: var(--dk-border) !important; } html[data-theme="dark"] .fw-ad-card-timeline, html[data-theme="dark"] .add_item .frameitem-title-box { border-color: var(--dk-border) !important; } html[data-theme="dark"] .add_item img { border-color: var(--dk-border-strong) !important; } /* Chips row below the metrics bar */ html[data-theme="dark"] .fw-ad-card-header { background: var(--dk-surface); } /* "read full" pill + white fade over truncated ad copy */ html[data-theme="dark"] .primary-copy-read-full-pill { background: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .primary-copy-read-full-pill:hover { background: var(--dk-surface-3); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .primary-copy-cutoff::after { background: linear-gradient( to top, rgba(21, 24, 30, 0.98) 0%, rgba(21, 24, 30, 0.9) 24%, rgba(21, 24, 30, 0.62) 50%, rgba(21, 24, 30, 0.22) 76%, rgba(21, 24, 30, 0) 100% ); } /* Card chips / popups */ html[data-theme="dark"] .fw-ad-card-header-chip { background-color: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .custom-popup { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important; } /* ── Page / Product information popups (structured-popup) ─────────────── */ html[data-theme="dark"] .custom-popup.structured-popup { background-color: var(--dk-surface-2) !important; border: 1px solid var(--dk-border-strong) !important; color: var(--dk-text) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] .one_add_wrapper .fw-ad-card-page-info.has-popup > .custom-popup.structured-popup { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] .structured-popup .popup-header { color: var(--dk-text) !important; border-bottom-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .structured-popup .popup-body, html[data-theme="dark"] .structured-popup .popup-row { color: var(--dk-text) !important; } html[data-theme="dark"] .structured-popup .popup-section { border-top-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .structured-popup .popup-date-row { color: var(--dk-text-2) !important; } html[data-theme="dark"] .structured-popup .popup-date-row.text-muted { color: var(--dk-text-3) !important; } html[data-theme="dark"] .structured-popup .popup-footer { border-top-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .structured-popup .popup-identity { color: var(--dk-text) !important; } html[data-theme="dark"] .structured-popup .popup-identity img { border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .structured-popup .popup-action-btn { color: var(--dk-text) !important; background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .structured-popup .popup-action-btn:hover { background-color: var(--dk-surface-3) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .structured-popup .popup-track-brand-link { color: var(--dk-accent) !important; } html[data-theme="dark"] .structured-popup .popup-brand-ad-thumb { background: var(--dk-surface-3) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .structured-popup .popup-brand-ad-thumb:hover { border-color: var(--dk-border-strong) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .structured-popup .popup-brand-ad-thumb__fallback { background: linear-gradient(135deg, var(--dk-surface-3) 0%, var(--dk-surface-2) 100%) !important; } html[data-theme="dark"] .structured-popup .popup-brand-ad-skel--thumb { border-color: var(--dk-border) !important; background: linear-gradient(90deg, var(--dk-surface-3) 0%, var(--dk-surface-2) 50%, var(--dk-surface-3) 100%) !important; background-size: 200% 100%; } html[data-theme="dark"] .structured-popup .popup-country-flags { border-color: var(--dk-border-strong) !important; background: var(--dk-surface) !important; } html[data-theme="dark"] .structured-popup .popup-country-flags-wrap:hover .popup-country-flags { border-color: var(--dk-border-strong) !important; background: var(--dk-surface-3) !important; } html[data-theme="dark"] .popup-country-breakdown { background: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .popup-country-breakdown__header { color: var(--dk-text) !important; } html[data-theme="dark"] .popup-country-breakdown__sub, html[data-theme="dark"] .popup-country-breakdown__more, html[data-theme="dark"] .popup-country-breakdown__loading, html[data-theme="dark"] .popup-country-breakdown__empty { color: var(--dk-text-2) !important; } html[data-theme="dark"] .popup-country-breakdown__row { color: var(--dk-text) !important; } html[data-theme="dark"] .popup-country-breakdown__meta { color: var(--dk-text) !important; } /* greybadge() date pills inside product popup */ html[data-theme="dark"] .structured-popup .popup-date-row span[style*="background-color:#EFEFF7"], html[data-theme="dark"] .structured-popup .popup-date-row span[style*="background-color: #EFEFF7"] { background-color: var(--dk-surface-3) !important; color: var(--dk-text-2) !important; } /* Nested EU metric tooltips inside product popup rows */ html[data-theme="dark"] .structured-popup .popup-row .custom-popup, html[data-theme="dark"] .structured-popup .fw-ad-card-product-revenue__inner .custom-popup { background-color: var(--dk-surface-3) !important; border: 1px solid var(--dk-border-strong) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .structured-popup .fw-ad-card-product-revenue__inner { background: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .structured-popup .fw-ad-card-product-revenue__value { color: var(--dk-text) !important; } /* ── Ad detail modal ────────────────────────────────────────────────────── */ html[data-theme="dark"] .ad-modal-sheet { background: var(--dk-bg); border-color: var(--dk-border-strong); } html[data-theme="dark"] .ad-modal-right { background: var(--dk-surface); border-left-color: var(--dk-border); } html[data-theme="dark"] #ad-detail-modal .bg-grey-100 { background-color: var(--dk-bg) !important; } html[data-theme="dark"] #ad-detail-modal { color: var(--dk-text); } /* Cards / tiles / rows inside the modal */ html[data-theme="dark"] .ad-modal-tabs, html[data-theme="dark"] .ad-landing-link, html[data-theme="dark"] .ad-info-row, html[data-theme="dark"] .ad-modal-ad-card, html[data-theme="dark"] .ad-modal-transcript-body, html[data-theme="dark"] .ad-overview-details-grid, html[data-theme="dark"] .ad-page-overview-charts, html[data-theme="dark"] .ad-page-overview-grid, html[data-theme="dark"] .ad-page-overview-main, html[data-theme="dark"] .ad-modal-partner-page, html[data-theme="dark"] .ad-modal-similar-item { background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text); } /* Section cards (Brand / Page info, metric tiles, charts, partner pages): darker than the surrounding panel so they read as distinct cards */ html[data-theme="dark"] .ad-info-actions-card, html[data-theme="dark"] .ad-info-landing-card, html[data-theme="dark"] .ad-info-text-card, html[data-theme="dark"] .ad-info-card, html[data-theme="dark"] .ad-rank-history-card, html[data-theme="dark"] .ad-modal-metric-tile, html[data-theme="dark"] .ad-page-traffic-chart-card, html[data-theme="dark"] .ad-modal-partner-pages-card { background-color: var(--dk-surface-deep) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] .ad-modal-inner, html[data-theme="dark"] .ad-modal-right-scroll { background: transparent; } html[data-theme="dark"] .ad-modal-right { border-color: var(--dk-border) !important; } /* Modal text */ html[data-theme="dark"] #ad-detail-modal h1, html[data-theme="dark"] #ad-detail-modal h2, html[data-theme="dark"] #ad-detail-modal h3, html[data-theme="dark"] #ad-detail-modal h4, html[data-theme="dark"] #ad-detail-modal strong { color: var(--dk-text); } html[data-theme="dark"] .info-row-value, html[data-theme="dark"] .adm-copy-text, html[data-theme="dark"] .adm-page-row, html[data-theme="dark"] .adm-info-rows { color: var(--dk-text-2); } /* Embedded ad card (left media panel) */ html[data-theme="dark"] .adm-page-name { color: var(--dk-text); } html[data-theme="dark"] .adm-page-sub { color: var(--dk-text-2); } html[data-theme="dark"] .adm-copy-text { color: var(--dk-text-2); } html[data-theme="dark"] .adm-copy-read-full { background: var(--dk-surface-3); color: var(--dk-text-2); } html[data-theme="dark"] .adm-copy-read-full:hover { background: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .adm-divider { border-top-color: var(--dk-border); } html[data-theme="dark"] .adm-cta-button { background: var(--dk-surface-3); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .adm-cta-button:hover { background: var(--dk-border-strong); } html[data-theme="dark"] .adm-product-row { background: var(--dk-surface) !important; } html[data-theme="dark"] .adm-product-row:hover { background: var(--dk-surface-2) !important; } /* Rank history / traffic chart cards */ html[data-theme="dark"] .ad-rank-history-head, html[data-theme="dark"] .ad-page-traffic-chart-head { color: var(--dk-text); } html[data-theme="dark"] .ad-rank-history-explainer { color: var(--dk-text-3); } html[data-theme="dark"] .ad-rank-history-canvas-wrap { border-color: var(--dk-border-strong); background: linear-gradient(180deg, #171c28 0%, #14171f 100%); } /* Traffic / active-ads sparkline cards (light-blue in light mode) */ html[data-theme="dark"] .ad-page-traffic-chart-canvas-wrap, html[data-theme="dark"] #ad-modal-traffic-canvas-wrap { border-color: #2c437a; background: linear-gradient(180deg, #141c2e 0%, #11141c 100%); } html[data-theme="dark"] .ad-page-traffic-chart-explainer { color: var(--dk-text-3); } /* Big metric values ("72.4K" monthly visits / active ads) are #18181b in light mode */ html[data-theme="dark"] .ad-modal-monthly-visits-value { color: var(--dk-text); } /* Store markets row: "90%" percentages + separators */ html[data-theme="dark"] .info-row-value .markets-entry { color: var(--dk-text-2); } html[data-theme="dark"] .info-row-value .markets-pct { color: var(--dk-text); } html[data-theme="dark"] .info-row-value .markets-sep { color: var(--dk-text-3); } /* "Other pages advertising the same domain" rows */ html[data-theme="dark"] .ad-modal-partner-page-name { color: var(--dk-text); } html[data-theme="dark"] .ad-modal-partner-page:hover { border-color: var(--dk-border-strong) !important; background: var(--dk-surface-2) !important; } html[data-theme="dark"] .ad-modal-partner-page-lib, html[data-theme="dark"] .ad-modal-partner-pages-show-more { background: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .ad-modal-partner-page-lib:hover, html[data-theme="dark"] .ad-modal-partner-pages-show-more:hover { background: var(--dk-surface-3); border-color: var(--dk-border-strong); color: #8ab0f8; } html[data-theme="dark"] .ad-rank-history-stat, html[data-theme="dark"] .ad-page-traffic-chart-stat { border-color: var(--dk-border-strong); background: var(--dk-surface-2); color: var(--dk-text-2); } html[data-theme="dark"] .ad-rank-history-stat strong, html[data-theme="dark"] .ad-page-traffic-chart-stat strong { color: var(--dk-text); } html[data-theme="dark"] .ad-rank-history-stat--good, html[data-theme="dark"] .ad-page-traffic-chart-stat--good { border-color: #1f5132; background: #11271a; color: #4ade80; } html[data-theme="dark"] .ad-rank-history-stat--good strong, html[data-theme="dark"] .ad-page-traffic-chart-stat--good strong { color: #86efac; } html[data-theme="dark"] .ad-rank-history-stat--bad, html[data-theme="dark"] .ad-page-traffic-chart-stat--bad { border-color: #5c1f24; background: #2a1416; color: #f87171; } html[data-theme="dark"] .ad-rank-history-stat--bad strong, html[data-theme="dark"] .ad-page-traffic-chart-stat--bad strong { color: #fca5a5; } /* EU/UK reach & spend panel */ html[data-theme="dark"] .ad-spend-left:hover, html[data-theme="dark"] .ad-spend-left:focus-visible { background: var(--dk-surface-2); } html[data-theme="dark"] .ad-spend-label, html[data-theme="dark"] .ad-spend-daily-label { color: var(--dk-text-2); } html[data-theme="dark"] .ad-spend-value, html[data-theme="dark"] .ad-spend-estimate-inline, html[data-theme="dark"] .ad-spend-estimate-label, html[data-theme="dark"] .ad-spend-estimate-value, html[data-theme="dark"] .ad-spend-daily-value { color: var(--dk-text); } html[data-theme="dark"] .ad-spend-right { background: var(--dk-surface-2); } html[data-theme="dark"] .ad-spend-demo-row, html[data-theme="dark"] .ad-info-chart-card { background: var(--dk-surface); } html[data-theme="dark"] .demo-label { color: var(--dk-text); } html[data-theme="dark"] .demo-value { color: var(--dk-text-2); } /* Gender/age stat spans get inline dark colors from JS */ html[data-theme="dark"] .ad-spend-demo-row span, html[data-theme="dark"] .ad-info-chart-card span { color: var(--dk-text) !important; } html[data-theme="dark"] .adm-cta-caption { color: var(--dk-text) !important; } html[data-theme="dark"] .adm-cta-domain, html[data-theme="dark"] .adm-cta-description { color: var(--dk-text-3) !important; } /* Buttons & interactive bits in modal */ html[data-theme="dark"] .ad-float-icon-btn, html[data-theme="dark"] .ad-modal-close, html[data-theme="dark"] .ad-modal-info-btn, html[data-theme="dark"] .ad-bottom-save-btn, html[data-theme="dark"] .adm-btn-save, html[data-theme="dark"] .ad-modal-view-store-btn, html[data-theme="dark"] .ad-action-item { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .ad-float-icon-btn:hover, html[data-theme="dark"] .ad-modal-close:hover, html[data-theme="dark"] .ad-action-item:hover { background-color: var(--dk-surface-3) !important; } html[data-theme="dark"] .ad-modal-floating-actions { background: transparent; } html[data-theme="dark"] .ad-modal-tab { color: var(--dk-text-3); } html[data-theme="dark"] .ad-modal-tab:hover { color: var(--dk-text); } html[data-theme="dark"] .ad-modal-tab.active { background: var(--dk-surface-3); color: var(--dk-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* Breadcrumb / section titles / info rows */ html[data-theme="dark"] .breadcrumb-label, html[data-theme="dark"] .info-card-title, html[data-theme="dark"] .info-row-label { color: var(--dk-text); } html[data-theme="dark"] .info-card-icon { color: var(--dk-text-2); } html[data-theme="dark"] .ad-breadcrumb-item:hover { background: var(--dk-surface-3); } html[data-theme="dark"] .ad-modal-back-btn { background: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .ad-modal-back-btn:hover { background: var(--dk-surface-3); border-color: var(--dk-accent); color: var(--dk-accent); } html[data-theme="dark"] .info-row-value { color: var(--dk-text); } html[data-theme="dark"] .ad-modal-transcript-card { background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text); } html[data-theme="dark"] .ad-modal-transcript-toolbar, html[data-theme="dark"] .ad-modal-copy-wrap { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .ad-modal-similar-country-button, html[data-theme="dark"] .ad-modal-similar-filter-toggle, html[data-theme="dark"] .ad-modal-similar-country-search-input, html[data-theme="dark"] .ad-modal-copy-option { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .ad-modal-similar-country-option:hover { background-color: var(--dk-surface-3) !important; } html[data-theme="dark"] .ad-modal-similar-card, html[data-theme="dark"] .ad-modal-similar-body { background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .ad-modal-similar-thumb { background-color: var(--dk-surface-2) !important; } html[data-theme="dark"] .ad-modal-similar-metric { background: var(--dk-surface-2); color: var(--dk-text-2); } html[data-theme="dark"] .ad-modal-similar-metric strong { color: var(--dk-text); } /* Login/signup gate shown to logged-out visitors at the end of the feed */ html[data-theme="dark"] .auth-modal-content { background: var(--dk-surface-2); color: var(--dk-text); } /* ── Misc dashboard chrome ──────────────────────────────────────────────── */ /* Range slider (ion.rangeSlider) */ html[data-theme="dark"] .irs-line { background: var(--dk-surface-3) !important; } html[data-theme="dark"] .irs-min, html[data-theme="dark"] .irs-max { background: var(--dk-surface-3) !important; color: var(--dk-text-2) !important; } /* Tooltips / info popovers that use white backgrounds inline */ html[data-theme="dark"] [id^="tooltip"]:not(.hidden) { color: var(--dk-text); } /* Locked (plan-gated) filters: inline styles in Dashboard.php force a light gray #f3f4f6 capsule; keep the dimmed look but on dark surfaces. */ html[data-theme="dark"] .select-wrapper.filter-locked > .div-block-71 .form-input, html[data-theme="dark"] .select-wrapper.filter-locked > .div-block-71 input, html[data-theme="dark"] .select-wrapper.filter-locked > select, html[data-theme="dark"] .select-wrapper.filter-locked > .div-block-71 .select2-selection, html[data-theme="dark"] .select-wrapper.filter-locked > .cfd-container .cfd-trigger, html[data-theme="dark"] .select-wrapper.filter-locked.store-visitor-country-select #dashboardStoreVisitorCountryTrigger { background-color: var(--dk-surface-3) !important; color: var(--dk-text-3) !important; border-color: var(--dk-border) !important; } /* Include/exclude (cfd) dropdowns: "Based In", countries, Shopify apps, … inc-exc-filter.css hardcodes light colors with !important on the triggers. */ html[data-theme="dark"] .cfd-trigger { background: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text-2); } html[data-theme="dark"] .cfd-search-input { color: var(--dk-text) !important; } html[data-theme="dark"] .cfd-search-input::placeholder { color: var(--dk-text-3); } html[data-theme="dark"] .cfd-panel { background: var(--dk-surface-2); border-color: var(--dk-border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); color: var(--dk-text); } html[data-theme="dark"] .cfd-item:hover { background: var(--dk-surface-3); } html[data-theme="dark"] .cfd-item.cfd-included { background: #11271a; } html[data-theme="dark"] .cfd-item.cfd-excluded { background: #2a1416; } html[data-theme="dark"] .cfd-btn { background: var(--dk-surface); border-color: var(--dk-border-strong); } html[data-theme="dark"] .cfd-toolbar, html[data-theme="dark"] .cfd-bundles { background: var(--dk-surface-2); border-bottom-color: var(--dk-border); } html[data-theme="dark"] .cfd-bulk { background: var(--dk-surface); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .cfd-bulk:hover, html[data-theme="dark"] .cfd-bulk-clear:hover { background: var(--dk-surface-3); color: var(--dk-text); } html[data-theme="dark"] .cfd-bundle { background: var(--dk-surface); border-color: var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .cfd-group-header { background: var(--dk-surface-2); border-top-color: var(--dk-border); } html[data-theme="dark"] .cfd-tag-more { background: var(--dk-surface-3); color: var(--dk-text); } html[data-theme="dark"] .cfd-compact-label { color: var(--dk-text-2); } html[data-theme="dark"] .cfd-compact-more { color: var(--dk-text); } /* Niche (n3) dropdown */ html[data-theme="dark"] .n3-trigger { background: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text-2) !important; } html[data-theme="dark"] .n3-trigger:hover { border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .n3-trigger-icon { color: var(--dk-text-2) !important; } html[data-theme="dark"] .n3-trigger-label { color: var(--dk-text-2); } html[data-theme="dark"] .n3-panel-inner { background: var(--dk-surface-2); border-color: var(--dk-border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .n3-item:hover { background: var(--dk-surface-3); } html[data-theme="dark"] .n3-item.active { background: #18233c; } html[data-theme="dark"] .n3-item.excluded-active { background: #2a1416; } html[data-theme="dark"] .n3-item-name { color: var(--dk-text-2); } html[data-theme="dark"] .n3-item.active .n3-item-name { color: #8ab0f8; } html[data-theme="dark"] .n3-item:hover .n3-item-arrow { color: var(--dk-text); } html[data-theme="dark"] .n3-search-box { background: var(--dk-surface); border-color: var(--dk-border-strong); } html[data-theme="dark"] .n3-search-input { color: var(--dk-text); } html[data-theme="dark"] .n3-mode-btn, html[data-theme="dark"] .n3-bulk-btn { background: var(--dk-surface); border-color: var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .n3-mode-btn:hover, html[data-theme="dark"] .n3-bulk-btn:hover { color: var(--dk-text); border-color: var(--dk-border-strong); background: var(--dk-surface-3); } html[data-theme="dark"] .n3-mode-btn.active[data-n3-mode="include"] { background: #18233c; border-color: #2c437a; color: #8ab0f8; } html[data-theme="dark"] .n3-mode-btn.active[data-n3-mode="exclude"] { background: #2a1416; border-color: #5c1f24; color: #f87171; } /* ── Filter preset modals ──────────────────────────────────────────────── */ /* "Save filter preset" / "Preset limit reached" modal (inline styles in Dashboard.php) */ html[data-theme="dark"] .dashboard-filter-preset-modal-panel { background: var(--dk-surface-2); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .dashboard-filter-preset-modal-title { color: var(--dk-text); } html[data-theme="dark"] .dashboard-filter-preset-modal-close { background: var(--dk-surface-3); color: var(--dk-text-3); } html[data-theme="dark"] .dashboard-filter-preset-modal-close:hover { background: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .dashboard-filter-preset-modal-desc, html[data-theme="dark"] .dashboard-filter-preset-modal-limit-text { color: var(--dk-text-2); } html[data-theme="dark"] .dashboard-filter-preset-modal-label { color: var(--dk-text-2); } html[data-theme="dark"] .dashboard-filter-preset-modal-input { background: var(--dk-surface); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .dashboard-filter-preset-modal-input::placeholder { color: var(--dk-text-3); } html[data-theme="dark"] .dashboard-filter-preset-modal-hint { color: var(--dk-text-3); } html[data-theme="dark"] .dashboard-filter-preset-modal-btn.secondary { background: var(--dk-surface-3); color: var(--dk-text-2); } html[data-theme="dark"] .dashboard-filter-preset-modal-btn.secondary:hover { background: var(--dk-border-strong); } /* Delete preset confirmation modal: styled entirely with inline style attributes */ html[data-theme="dark"] #dashboard-filter-preset-delete-modal > div { background-color: var(--dk-surface-2) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] #dashboard-filter-preset-delete-title { color: var(--dk-text) !important; } html[data-theme="dark"] #dashboard-filter-preset-delete-message { color: var(--dk-text-2) !important; } html[data-theme="dark"] #cancel-delete-preset-btn { border-color: var(--dk-border-strong) !important; color: var(--dk-text-2) !important; } /* Ad library header: "See same ads?" */ html[data-theme="dark"] .dashboard-header-actions .accuracy-info-btn { background: var(--dk-surface-2); color: var(--dk-text-2); border: 1px solid var(--dk-border); box-shadow: none; } html[data-theme="dark"] .dashboard-header-actions .accuracy-info-btn:hover { background: var(--dk-surface-3); color: var(--dk-text); border-color: var(--dk-border-strong); } html[data-theme="dark"] .dashboard-header-actions .accuracy-info-btn:focus { box-shadow: 0 0 0 2px var(--dk-surface), 0 0 0 4px rgba(77, 125, 242, 0.35); } html[data-theme="dark"] .dashboard-header-actions .wh-theme-toggle--pill:focus-visible .wh-theme-toggle__track { box-shadow: 0 0 0 2px var(--dk-surface), 0 0 0 4px rgba(77, 125, 242, 0.35); } /* ── Filter category tabs (All / Ad / Product / Page / …) ─────────────── */ html[data-theme="dark"] .dashboard-filters-explore.filters-bar .wh-filter-tabs { --wh-filter-tab-text: var(--dk-text-2); --wh-filter-tab-text-hover: var(--dk-text); --wh-filter-tab-text-active: #8ab0f8; --wh-filter-tab-strip-border: var(--dk-border); } html[data-theme="dark"] .dashboard-filters-explore.filters-bar .wh-tab.active .wh-tab-icon { color: #8ab0f8; } html[data-theme="dark"] .dashboard-filters-explore.filters-bar .wh-tab-underline { background: #8ab0f8; } /* ── Range filter popovers: segmented switchers + preset pills ─────────── */ html[data-theme="dark"] .ad-rank-filter-panel { border-color: var(--dk-border-strong); background: linear-gradient(180deg, var(--dk-surface-2) 0%, var(--dk-surface) 100%); } html[data-theme="dark"] .ad-rank-mode-pills, html[data-theme="dark"] .metric-mode-pills { border-color: var(--dk-border-strong); background: var(--dk-surface-3); } html[data-theme="dark"] .ad-rank-mode-pills .ad-rank-mode-pill, html[data-theme="dark"] .metric-mode-pills .metric-mode-pill { color: var(--dk-text-2); } html[data-theme="dark"] .ad-rank-mode-pills .ad-rank-mode-pill:hover, html[data-theme="dark"] .metric-mode-pills .metric-mode-pill:hover { background: var(--dk-surface-2); color: var(--dk-text); } html[data-theme="dark"] .ad-rank-mode-pills .ad-rank-mode-pill.active, html[data-theme="dark"] .metric-mode-pills .metric-mode-pill.active { background: var(--dk-accent); border-color: var(--dk-accent); color: #fff; box-shadow: none; } html[data-theme="dark"] .ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill { background: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text-2); } html[data-theme="dark"] .ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill.active { background: var(--dk-accent); border-color: var(--dk-accent); color: #fff; } html[data-theme="dark"] .range-popover-clear { color: var(--dk-text-3); } html[data-theme="dark"] .range-popover-clear:hover { color: #f87171; } /* ── Active filter chips + results row ─────────────────────────────────── */ html[data-theme="dark"] #active-filters-container .text-black { color: var(--dk-text-2) !important; } html[data-theme="dark"] #active-filters-list > div { background-color: var(--dk-surface-2) !important; color: var(--dk-text-2) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] #active-filters-list > div:hover { background-color: var(--dk-surface-3) !important; } html[data-theme="dark"] #active-filters-list > div button { color: var(--dk-text-2) !important; } html[data-theme="dark"] #active-filters-list > div button:hover { background-color: var(--dk-border-strong) !important; color: #f87171 !important; } html[data-theme="dark"] #clear-all-filters { color: #f87171 !important; } html[data-theme="dark"] #clear-all-filters:hover { color: #fca5a5 !important; } html[data-theme="dark"] #ad-results-count { color: var(--dk-text-2) !important; } html[data-theme="dark"] #free-credits-banner { background: #18233c !important; border-color: #2c437a !important; } html[data-theme="dark"] #free-credits-banner .text-blue-800 { color: #bfdbfe !important; } html[data-theme="dark"] #free-credits-banner .text-blue-600 { color: #8ab0f8 !important; } html[data-theme="dark"] .hover\:bg-gray-300:hover { background-color: var(--dk-surface-3) !important; } html[data-theme="dark"] #openHiddenPagesBtn { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text-2) !important; } html[data-theme="dark"] #openHiddenPagesBtn:hover { background-color: var(--dk-surface-3) !important; color: var(--dk-text) !important; } /* ── Accuracy modal ("See same ads?") ──────────────────────────────────── */ html[data-theme="dark"] #accuracy-modal .modal__content > .bg-white, html[data-theme="dark"] #accuracy-modal .modal__content > div.bg-white { background-color: var(--dk-surface-2) !important; color: var(--dk-text); } html[data-theme="dark"] .accuracy-modal-title { color: var(--dk-text); } html[data-theme="dark"] .accuracy-modal-close { color: var(--dk-text-3); } html[data-theme="dark"] .accuracy-modal-close:hover { color: var(--dk-text); } html[data-theme="dark"] .accuracy-modal-body { color: var(--dk-text-2); } html[data-theme="dark"] .accuracy-modal-body .section-title { color: var(--dk-text); } html[data-theme="dark"] .accuracy-modal-body li::before { color: var(--dk-text-3); } html[data-theme="dark"] .accuracy-modal-body::-webkit-scrollbar-track { background: var(--dk-surface); } html[data-theme="dark"] .accuracy-modal-body::-webkit-scrollbar-thumb { background: var(--dk-border-strong); } html[data-theme="dark"] .accuracy-modal-body::-webkit-scrollbar-thumb:hover { background: var(--dk-text-3); } /* ── Ad card inline styles from ads.js ─────────────────────────────────── */ html[data-theme="dark"] .add_item .frameitem-title-box[style*="background-color:white"], html[data-theme="dark"] .add_item .frameitem-title-box[style*="background-color: white"], html[data-theme="dark"] .add_item [data-ad-view="saveDetails"] { background-color: var(--dk-surface) !important; border-top-color: var(--dk-border) !important; } html[data-theme="dark"] .add_item .fw-ad-card-timeline { color: var(--dk-text-2) !important; } html[data-theme="dark"] .add_item .fw-ad-card-timeline-toggle { color: var(--dk-text-2) !important; } html[data-theme="dark"] .add_item .fw-ad-card-timeline-toggle:hover { color: var(--dk-text) !important; } html[data-theme="dark"] .add_item .fw-ad-card-page-info { color: var(--dk-text-2) !important; } html[data-theme="dark"] .add_item [data-ad-view="saveDetails"] .see-details { background-color: var(--dk-surface-2) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .add_item [data-ad-view="saveDetails"] .see-details:hover { background-color: var(--dk-surface-3) !important; } html[data-theme="dark"] .add_item [data-ad-view="saveDetails"] .save-ad-lid { background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .add_item [data-ad-view="saveDetails"] .save-ad-lid:hover { background-color: var(--dk-surface-2) !important; } html[data-theme="dark"] .add_item .glide__arrow { background-color: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .add_item .border-\[\#E1E4EA\] { border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .add_item .border-\[\#f2f2f2\] { border-color: var(--dk-border) !important; } /* ── Rank chips on dark card headers ───────────────────────────────────── */ html[data-theme="dark"] .fw-ad-card-rank-toggle--rising { background: #11271a; border-color: #1f5132; color: #4ade80; } html[data-theme="dark"] .fw-ad-card-rank-toggle--rising:hover { background: #1a3324; border-color: #276749; } html[data-theme="dark"] .fw-ad-card-rank-toggle--rising:active { background: #1f5132; } html[data-theme="dark"] .fw-ad-card-rank-toggle--declining { background: #2a1416; border-color: #5c1f24; color: #f87171; } html[data-theme="dark"] .fw-ad-card-rank-toggle--declining:hover { background: #3d181c; border-color: #7f1d1d; } html[data-theme="dark"] .fw-ad-card-rank-toggle--declining:active { background: #5c1f24; } html[data-theme="dark"] .fw-ad-card-rank-toggle:not(.fw-ad-card-rank-toggle--rising):not(.fw-ad-card-rank-toggle--declining):hover { background: var(--dk-surface-3); border-color: var(--dk-border-strong); color: var(--dk-text); } html[data-theme="dark"] .fw-ad-card-rank-toggle:not(.fw-ad-card-rank-toggle--rising):not(.fw-ad-card-rank-toggle--declining):active { background: var(--dk-border-strong); } /* Ion range slider handles + selected bar */ html[data-theme="dark"] .irs-bar { background: var(--dk-accent) !important; } html[data-theme="dark"] .irs-handle { background: var(--dk-text) !important; border-color: var(--dk-accent) !important; } html[data-theme="dark"] .irs-from, html[data-theme="dark"] .irs-to, html[data-theme="dark"] .irs-single { background: var(--dk-surface-3) !important; color: var(--dk-text) !important; } /* ── Product import (Shopify) modal ─────────────────────────────────────── */ /* Variables (--pi-*) are remapped in the palette block; below covers the surfaces hardcoded to white in ProductImportModal.php. */ html[data-theme="dark"] .pi-modal-container, html[data-theme="dark"] .pi-section, html[data-theme="dark"] .pi-body, html[data-theme="dark"] .pi-editor-header, html[data-theme="dark"] .pi-editor-footer, html[data-theme="dark"] .pi-toggle-container, html[data-theme="dark"] .pi-select-dropdown, html[data-theme="dark"] .pi-success-container { background: var(--dk-surface) !important; } html[data-theme="dark"] .pi-editor-body { background: var(--dk-bg) !important; } html[data-theme="dark"] .pi-thumbnail-box, html[data-theme="dark"] .pi-carousel-item { background: var(--dk-surface-2) !important; } html[data-theme="dark"] .pi-dropdown-trigger { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border-strong) !important; } html[data-theme="dark"] .pi-dropdown-trigger:hover { background: var(--dk-surface-3) !important; } html[data-theme="dark"] .pi-input { background: transparent !important; color: var(--dk-text) !important; } html[data-theme="dark"] .pi-input-suffix { background: var(--dk-surface-3) !important; color: var(--dk-text-2) !important; } html[data-theme="dark"] .pi-toggle-slider { background-color: var(--dk-surface-3); } html[data-theme="dark"] .pi-icon-box-subtle { background: rgba(150, 191, 72, 0.12); } html[data-theme="dark"] .pi-header-minimal { border-bottom-color: var(--dk-border); }