/** * ListingPilot — global dark mode overrides * Active when (user preference in Settings) */ /* ── Design tokens (dashboard + admin) ── */ html.dark { --lc-foreground: 210 40% 96%; --lc-card: 222 22% 11%; --lc-muted-foreground: 215 16% 62%; --lc-secondary: 222 18% 16%; --lc-border: 222 14% 24%; --lc-input: 222 18% 14%; --lc-gradient-subtle: linear-gradient(180deg, hsl(222 28% 7%), hsl(222 24% 10%)); --lc-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.45); --lc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35); --lc-shadow-glow: 0 0 40px hsl(var(--lc-primary) / 0.18); --lc-scrollbar-track: 222 18% 13%; color-scheme: dark; } /* ── Public / shop / welcome tokens ── */ html.dark { --fg: 210 40% 96%; --mu: 215 16% 62%; --bo: 222 14% 24%; --bg: 222 28% 7%; } html.dark body { background: hsl(var(--bg)); color: hsl(var(--fg)); } /* ── Tailwind CDN utilities (analytics, scraping, partials) ── */ html.dark .bg-white { background-color: hsl(var(--lc-card)) !important; } html.dark .bg-gray-50 { background-color: hsl(var(--lc-secondary)) !important; } html.dark .bg-gray-100 { background-color: hsl(var(--lc-secondary)) !important; } html.dark .bg-gray-200 { background-color: hsl(var(--lc-border)) !important; } html.dark .from-gray-50 { --tw-gradient-from: hsl(var(--lc-secondary)) !important; } html.dark .to-white { --tw-gradient-to: hsl(var(--lc-card)) !important; } html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: hsl(var(--lc-border)) !important; } html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: hsl(var(--lc-border)) !important; } html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: hsl(var(--lc-border)) !important; } html.dark .border-indigo-100 { border-color: hsl(217 40% 28%) !important; } html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700 { color: hsl(var(--lc-foreground)) !important; } html.dark .text-gray-600, html.dark .text-gray-500, html.dark .text-gray-400 { color: hsl(var(--lc-muted-foreground)) !important; } html.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--lc-secondary)) !important; } html.dark .hover\:bg-gray-100:hover { background-color: hsl(var(--lc-secondary)) !important; } html.dark .hover\:text-gray-700:hover, html.dark .hover\:text-gray-900:hover { color: hsl(var(--lc-foreground)) !important; } html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: var(--lc-shadow-card) !important; } /* ── Inline light surfaces (scoped to dashboard content) ── */ html.dark .lp-content [style*="background:#fff"], html.dark .lp-content [style*="background: #fff"], html.dark .lp-content [style*="background-color:#fff"], html.dark .lp-content [style*="background-color: #fff"] { background-color: hsl(var(--lc-card)) !important; } html.dark input[style*="background:#fff"], html.dark input[style*="background: #fff"], html.dark textarea[style*="background:#fff"], html.dark textarea[style*="background: #fff"], html.dark select[style*="background:#fff"], html.dark select[style*="background: #fff"] { background-color: hsl(var(--lc-input)) !important; } /* White CTA buttons on red gradient hero — keep intentional contrast */ html.dark .dash-welcome a[style*="background:#fff"], html.dark .dash-welcome a[style*="background: #fff"], html.dark .dash-welcome a[style*="background:hsl(var(--lc-card))"][style*="color:hsl(var(--lc-primary))"] { background-color: #fff !important; color: hsl(var(--lc-primary)) !important; } /* ── Semantic alert / status inline palettes ── */ html.dark [style*="background:#ecfdf5"], html.dark [style*="background: #ecfdf5"] { background-color: hsl(152 35% 12%) !important; } html.dark [style*="background:#fef2f2"], html.dark [style*="background: #fef2f2"] { background-color: hsl(0 40% 12%) !important; } html.dark [style*="background:#fffbeb"], html.dark [style*="background: #fffbeb"] { background-color: hsl(38 40% 12%) !important; } html.dark [style*="background:#eff6ff"], html.dark [style*="background: #eff6ff"] { background-color: hsl(217 40% 14%) !important; } html.dark [style*="background:#fefce8"], html.dark [style*="background: #fefce8"] { background-color: hsl(38 40% 12%) !important; } html.dark [style*="background:#f0fdf4"], html.dark [style*="background: #f0fdf4"] { background-color: hsl(152 35% 12%) !important; } html.dark [style*="background:#fef3c7"], html.dark [style*="background: #fef3c7"] { background-color: hsl(38 40% 12%) !important; } html.dark [style*="background:#f8f9fa"], html.dark [style*="background: #f8f9fa"], html.dark [style*="background:#f3f4f6"], html.dark [style*="background: #f3f4f6"] { background-color: hsl(var(--lc-secondary)) !important; } html.dark [style*="background:#fee2e2"], html.dark [style*="background: #fee2e2"] { background-color: hsl(0 40% 12%) !important; } html.dark [style*="background:#dbeafe"], html.dark [style*="background: #dbeafe"] { background-color: hsl(217 40% 14%) !important; } html.dark [style*="color:#065f46"], html.dark [style*="color: #065f46"] { color: #6ee7b7 !important; } html.dark [style*="color:#991b1b"], html.dark [style*="color: #991b1b"] { color: #fca5a5 !important; } html.dark [style*="color:#92400e"], html.dark [style*="color: #92400e"] { color: #fcd34d !important; } html.dark [style*="color:#1e40af"], html.dark [style*="color: #1e40af"], html.dark [style*="color:#3b82f6"], html.dark [style*="color: #3b82f6"] { color: #93c5fd !important; } html.dark [style*="color:#10b981"], html.dark [style*="color: #10b981"] { color: #6ee7b7 !important; } html.dark [style*="color:#d97706"], html.dark [style*="color: #d97706"] { color: #fcd34d !important; } html.dark [style*="color:#dc2626"], html.dark [style*="color: #dc2626"] { color: #fca5a5 !important; } html.dark [style*="border:1px solid #a7f3d0"], html.dark [style*="border: 1px solid #a7f3d0"], html.dark [style*="border-color:#a7f3d0"] { border-color: hsl(152 30% 28%) !important; } html.dark [style*="border:1px solid #fecaca"], html.dark [style*="border: 1px solid #fecaca"], html.dark [style*="border-color:#fecaca"] { border-color: hsl(0 35% 25%) !important; } html.dark [style*="border:1px solid #fde68a"], html.dark [style*="border: 1px solid #fde68a"], html.dark [style*="border-color:#fde68a"] { border-color: hsl(38 35% 25%) !important; } html.dark [style*="border-color:#f59e0b"] { border-color: hsl(38 50% 40%) !important; } html.dark .lc-action-link.danger:hover { color: #fca5a5 !important; background: hsl(0 45% 18%) !important; } /* ── Page-specific component classes ── */ html.dark .lc-plan-card { background: hsl(var(--lc-card)); } html.dark .lc-plan-card.featured { background: linear-gradient(165deg, hsl(var(--lc-primary) / 0.14) 0%, hsl(var(--lc-card)) 55%); box-shadow: 0 10px 36px hsl(var(--lc-primary) / 0.2); } html.dark .sub-toggle-bar { background: hsl(var(--lc-card)); } html.dark .site-mcard { background: hsl(var(--lc-card)); } html.dark .so-action-card { background: hsl(var(--lc-card)) !important; } html.dark .lm-box, html.dark .lm-head { background: hsl(var(--lc-card)); } html.dark .lm-foot { background: hsl(var(--lc-secondary) / 0.5); } html.dark .lm-icon-warn { background: hsl(38 40% 12%); color: #fcd34d; } html.dark .lm-icon-info { background: hsl(217 40% 14%); color: #93c5fd; } html.dark .lm-icon-success { background: hsl(152 35% 12%); color: #6ee7b7; } html.dark .lm-icon-error { background: hsl(0 40% 12%); color: #fca5a5; } html.dark .se-smtp-warn { background: hsl(38 40% 12%); border-color: hsl(38 35% 25%); color: #fcd34d; } html.dark .se-smtp-ok { background: hsl(152 35% 12%); border-color: hsl(152 30% 28%); color: #6ee7b7; } html.dark .se-smtp-err { background: hsl(0 40% 12%); border-color: hsl(0 35% 25%); color: #fca5a5; } html.dark .lst-card { background: hsl(var(--lc-card)); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } html.dark .lst-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } html.dark .lst-logo { background: hsl(var(--lc-input)); } html.dark .lc-pag-btn { background: hsl(var(--lc-input)); } html.dark .inline-editing { background: hsl(var(--lc-input)); } html.dark .lst-toolbar-bar { background: hsl(var(--lc-card)) !important; } /* Listing show — stat icon tints */ html.dark .lc-stat-icon[style*="background:#ecfdf5"], html.dark .lc-block-icon[style*="background:#ecfdf5"] { background: hsl(152 35% 14%) !important; color: #6ee7b7 !important; } html.dark .lc-stat-icon[style*="background:#eff6ff"], html.dark .lc-block-icon[style*="background:#eff6ff"] { background: hsl(217 40% 14%) !important; color: #93c5fd !important; } html.dark .lc-stat-icon[style*="background:#fefce8"], html.dark .lc-block-icon[style*="background:#fefce8"] { background: hsl(38 40% 12%) !important; color: #fcd34d !important; } /* Tables */ html.dark .lc-table tbody tr:hover td { background: hsl(var(--lc-secondary) / 0.55); } /* Filters / collapsible panels */ html.dark #filters-content, html.dark .lst-filters-wrap { background: hsl(var(--lc-card)); } /* Dropdowns & user menu */ html.dark .lp-user-dropdown-panel, html.dark [class*="dropdown-panel"], html.dark .lp-dashboard-lang-select { background: hsl(var(--lc-card)) !important; color: hsl(var(--lc-foreground)) !important; border-color: hsl(var(--lc-border)) !important; } html.dark .lc-alert-success { background: hsl(152 35% 12%) !important; border-color: hsl(152 30% 28%) !important; color: #6ee7b7 !important; } html.dark .lm-info { background: hsl(217 40% 14%) !important; border-color: hsl(217 35% 28%) !important; color: #93c5fd !important; } /* Modals (inline style fallback) */ html.dark [style*="background:#fff;border-radius:16px"], html.dark [style*="background: #fff;border-radius:16px"] { background-color: hsl(var(--lc-card)) !important; } /* Charts / canvas containers — keep readable grid */ html.dark canvas { filter: brightness(0.92) contrast(1.05); } /* Quill / rich text if present */ html.dark .ql-toolbar, html.dark .ql-container { background: hsl(var(--lc-card)); border-color: hsl(var(--lc-border)); color: hsl(var(--lc-foreground)); } /* Toggle knob stays light for contrast */ html.dark .lc-toggle-slider:before { background: #f4f4f5; } /* Skeleton loaders */ html.dark .animate-pulse.bg-gray-100, html.dark .animate-pulse.bg-gray-200 { background-color: hsl(var(--lc-secondary)) !important; } /* ═══════════════════════════════════════════════════════ SHOP LAYOUT (layouts.shop, products, cart, checkout shop) ═══════════════════════════════════════════════════════ */ html.dark #shop-nav { background: rgba(30, 30, 34, 0.97) !important; box-shadow: 0 1px 0 hsl(var(--bo)), 0 2px 16px rgba(0, 0, 0, 0.35); } html.dark .lp-theme-toggle { background: hsl(222 22% 11%); border-color: hsl(var(--bo)); color: hsl(var(--fg)); } html.dark .sn-user-btn, html.dark .sn-hbg, html.dark .sn-mob, html.dark .sn-locale, html.dark .sn-user-dd, html.dark .sncart { background: hsl(222 22% 11%); border-color: hsl(var(--bo)); color: hsl(var(--fg)); } html.dark .sn-dd-link:hover { background: hsl(var(--bg)); } html.dark .sn-dd-out:hover, html.dark .sn-mob-logout:hover { background: hsl(0 40% 12%) !important; } html.dark .sp-card, html.dark .sp-stat, html.dark .sp-prod-card, html.dark .sp-item-row, html.dark .sp-table, html.dark .lp-btn, html.dark .shop-filter-drawer { background: hsl(222 22% 11%); border-color: hsl(var(--bo)); } html.dark .sp-input, html.dark .sp-select, html.dark .sp-textarea { background: hsl(222 18% 14%); color: hsl(var(--fg)); border-color: hsl(var(--bo)); } html.dark .sp-btn-o, html.dark .sp-btn-danger { background: hsl(222 18% 14%); color: hsl(var(--fg)); border-color: hsl(var(--bo)); } html.dark .sp-btn-o:hover { background: hsl(var(--bg)); } html.dark .sp-btn-danger:hover { background: hsl(0 40% 12%); border-color: hsl(0 35% 25%); } html.dark .sp-table th { background: hsl(var(--bg)); } html.dark .sp-table tr:hover td { background: hsl(var(--bg) / 0.6); } html.dark .sp-badge-green { background: hsl(152 35% 12%); color: #6ee7b7; border-color: hsl(152 30% 28%); } html.dark .sp-badge-yellow { background: hsl(38 40% 12%); color: #fcd34d; border-color: hsl(38 35% 25%); } html.dark .sp-badge-red { background: hsl(0 40% 12%); color: #fca5a5; border-color: hsl(0 35% 25%); } html.dark .sp-badge-blue { background: hsl(217 40% 14%); color: #93c5fd; border-color: hsl(217 35% 28%); } html.dark .sp-badge-gray { background: hsl(var(--bg)); color: hsl(var(--mu)); } html.dark .sp-alert-success { background: hsl(152 35% 12%); border-color: hsl(152 30% 28%); color: #6ee7b7; } html.dark .sp-alert-error { background: hsl(0 40% 12%); border-color: hsl(0 35% 25%); color: #fca5a5; } html.dark .sp-stat-icon.g { background: hsl(152 35% 14%); color: #6ee7b7; } html.dark .sp-stat-icon.r { background: hsl(0 40% 12%); color: #fca5a5; } html.dark .sp-stat-icon.y { background: hsl(38 40% 12%); color: #fcd34d; } html.dark .sp-stat-icon.b { background: hsl(217 40% 14%); color: #93c5fd; } /* ═══════════════════════════════════════════════════════ WELCOME LISTEO / AI SEO (marketing homepage) ═══════════════════════════════════════════════════════ */ html.dark .sw, html.dark .hero, html.dark .mk, html.dark .fc, html.dark .prc, html.dark .card-mock, html.dark .aip, html.dark .amock, html.dark .float, html.dark .stbar, html.dark .stbar .fc, html.dark .bw, html.dark .pcard, html.dark .faqc, html.dark .vmb, html.dark .pc, html.dark .card-mock-head, html.dark .amock-h, html.dark .faqbd.open { background: hsl(222 22% 11%); color: hsl(var(--fg)); } html.dark .sl, html.dark body.lp-welcome { background: hsl(var(--bg)); color: hsl(var(--fg)); } html.dark .bw:hover { background: hsl(222 18% 16%); } html.dark .mkbar, html.dark .ast { background: hsl(var(--bg)); border-color: hsl(var(--bo)); } html.dark .mks, html.dark .mku { background: hsl(222 18% 16%); border-color: hsl(var(--bo)); } html.dark .htic { background: hsl(152 35% 14%); color: #6ee7b7; } html.dark .pcard.pop { background: linear-gradient(160deg, hsl(var(--p) / 0.12) 0%, hsl(222 22% 11%) 55%) !important; border-color: hsl(var(--p) / 0.45); } html.dark .faqb:hover { background: hsl(222 18% 16%); } html.dark .faqic { background: hsl(222 18% 16%); color: hsl(var(--mu)); } html.dark .ctbl th, html.dark .ctbl td:first-child { background: hsl(222 18% 14%); border-color: hsl(var(--bo)); color: hsl(var(--fg)); } html.dark .ctbl td { border-color: hsl(var(--bo)); color: hsl(var(--fg)); } html.dark .ctbl tr:hover td { background: hsl(222 18% 16%); } html.dark .ctbl .pop th { background: hsl(var(--p) / 0.2); color: hsl(var(--p)); } html.dark .cm-footer { background: hsl(152 35% 12%); border-color: hsl(152 30% 28%); color: #6ee7b7; } html.dark .pcta-o { background: hsl(222 18% 16%); border-color: hsl(var(--bo)); color: hsl(var(--fg)); } html.dark .pcta-o:hover { background: hsl(222 18% 20%); } html.dark .info-box { background: hsl(var(--p) / 0.12); border-color: hsl(var(--p) / 0.35); } html.dark .lp-welcome [style*="background:#fff"], html.dark .lp-welcome [style*="background: #fff"], html.dark body.lp-welcome [style*="background:#fff"], html.dark body.lp-welcome [style*="background: #fff"] { background: hsl(222 22% 11%) !important; border-color: hsl(var(--bo)) !important; } html.dark .lp-welcome [style*="background:hsl(var(--bg))"] { background: hsl(222 18% 14%) !important; } /* Footer — fixed dark bar (do not use --fg, it flips in dark mode) */ .ft-root { background: hsl(222 47% 11%); } html.dark .ft-root { background: hsl(222 32% 8%); } /* ═══════════════════════════════════════════════════════ AUTH (login / register) ═══════════════════════════════════════════════════════ */ html.dark .auth-right { background: hsl(222 22% 11%); } html.dark .auth-input { background: hsl(222 18% 14%); border-color: hsl(var(--bo)); color: hsl(var(--fg)); } html.dark .auth-error { background: hsl(0 40% 12%); border-color: hsl(0 35% 25%); color: #fca5a5; } @media (max-width: 900px) { html.dark .auth-right { background: hsl(var(--bg)); } } /* ═══════════════════════════════════════════════════════ ERROR PAGES ═══════════════════════════════════════════════════════ */ html.dark body:has(.em) { background: hsl(var(--bg)); color: hsl(var(--fg)); } html.dark .en { background: rgba(30, 30, 34, 0.93); border-color: hsl(var(--bo)); } html.dark .en-back, html.dark .err-btn-s, html.dark button.err-btn-s, html.dark a.err-btn-s { background: hsl(222 22% 11%); border-color: hsl(var(--bo)); color: hsl(var(--fg)); } html.dark .en-back:hover, html.dark .err-btn-s:hover { border-color: var(--p); color: var(--p); } /* ═══════════════════════════════════════════════════════ ADMIN (admin.layouts.app — mirrors dashboard shell) ═══════════════════════════════════════════════════════ */ html.dark .lp-layout { background: hsl(var(--lc-card)); box-shadow: 0 0 24px rgba(0, 0, 0, 0.45); } html.dark .lp-topbar { background: hsl(var(--lc-card)); } html.dark .lc-settings-block, html.dark .lc-stat-card { background: hsl(var(--lc-card)); } /* Admin + shop scoped inline surfaces */ html.dark .lp-content [style*="background:#fff"], html.dark .sp-wrap [style*="background:#fff"], html.dark .sp-wrap [style*="background: #fff"], html.dark main [style*="background:#fff"], html.dark main [style*="background: #fff"] { background-color: hsl(222 22% 11%) !important; } /* Site nav partial (legacy pages using partials.site-nav) */ html.dark .sn-locale, html.dark .sn-user-btn, html.dark .sn-user-dd, html.dark .sn-hbg, html.dark .sn-mob { background: hsl(222 22% 11%); border-color: hsl(var(--bo, 222 14% 24%)); color: hsl(var(--fg, 210 40% 96%)); }