/*
 * Public site dark mode — the top bar's moon / sun button sets
 * <html data-bs-theme="dark"> (js/site.js; remembered per browser, light by
 * default). Bootstrap 5.3 themes its own components from that attribute;
 * this file darkens the colours site.css (Yii's style.css, kept verbatim)
 * and the layout's inline styles hard-code.
 */
[data-bs-theme="dark"] {
    --lpc-bg: #15111a;
    --lpc-surface: #211a29;
    --lpc-surface-2: #2a2233;
    --lpc-hover: #33293e;
    --lpc-border: #3a3045;
    --lpc-text: #e6e1ea;
    --lpc-muted: #b0a6ba;
    --lpc-brand-text: #c9a7e8;

    --bs-body-bg: var(--lpc-bg);
    --bs-body-color: var(--lpc-text);
    --bs-secondary-bg: var(--lpc-surface-2);
    --bs-tertiary-bg: var(--lpc-surface);
    --bs-secondary-color: var(--lpc-muted);
    --bs-border-color: var(--lpc-border);
    --bs-heading-color: var(--lpc-text);
    --bs-link-color: #8fb8ff;
    --bs-link-hover-color: #b3cfff;
    --bs-link-color-rgb: 143, 184, 255;
    --bs-link-hover-color-rgb: 179, 207, 255;
    color-scheme: dark;
}

[data-bs-theme="dark"] body {
    background: var(--lpc-bg);
    color: var(--lpc-text);
}

/* Surfaces (cards, panels, menus) */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .section-sm.bg-white,
[data-bs-theme="dark"] .section-fluid-white,
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .psychic-card,
[data-bs-theme="dark"] .search-summary,
[data-bs-theme="dark"] .article-card,
[data-bs-theme="dark"] .faq-item,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .pagination .page-link,
[data-bs-theme="dark"] .testimonial-carousel-btn,
[data-bs-theme="dark"] .pill,
[data-bs-theme="dark"] .btn-tip,
[data-bs-theme="dark"] .account-menu-toggle,
[data-bs-theme="dark"] .account-inner-card,
[data-bs-theme="dark"] #slide-menu-collapse,
[data-bs-theme="dark"] .chat-input-bar,
[data-bs-theme="dark"] #cookie-modal,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .search-filter {
    background: var(--lpc-surface) !important;
    color: var(--lpc-text);
    border-color: var(--lpc-border) !important;
}

[data-bs-theme="dark"] .navbar {
    border-bottom-color: var(--lpc-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

[data-bs-theme="dark"] .psychic-card,
[data-bs-theme="dark"] .faq-item,
[data-bs-theme="dark"] .search-summary {
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
}

[data-bs-theme="dark"] .bg-lavender,
[data-bs-theme="dark"] .account-card-unread {
    background-color: var(--lpc-surface-2) !important;
}

[data-bs-theme="dark"] .pill:hover,
[data-bs-theme="dark"] .list-group-item:hover,
[data-bs-theme="dark"] .testimonial-carousel-btn:hover,
[data-bs-theme="dark"] .account-card:hover,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background: var(--lpc-hover) !important;
}

[data-bs-theme="dark"] .search-filter {
    border-bottom-color: var(--lpc-border);
}

/* Text site.css sets dark */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .psychic-card h2,
[data-bs-theme="dark"] .page-content,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item,
[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--lpc-text) !important;
}

[data-bs-theme="dark"] .search-summary,
[data-bs-theme="dark"] .hero p,
[data-bs-theme="dark"] .article-excerpt {
    color: var(--lpc-muted);
}

/* The home hero's white-to-pink wash */
[data-bs-theme="dark"] .hero {
    background: linear-gradient(135deg, var(--lpc-bg) 60%, #2a1a2b);
}

/* Brand purple text is too dark on a dark background (buttons keep it as their fill) */
[data-bs-theme="dark"] .section-title,
[data-bs-theme="dark"] .hero h1,
[data-bs-theme="dark"] .heading-primary,
[data-bs-theme="dark"] .heading-dashboard,
[data-bs-theme="dark"] .article-title,
[data-bs-theme="dark"] .breadcrumb-item a,
[data-bs-theme="dark"] .pagination .page-link,
[data-bs-theme="dark"] .account-menu-toggle i,
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .text-brand,
[data-bs-theme="dark"] .search-summary .text-brand,
[data-bs-theme="dark"] .nav-link span,
[data-bs-theme="dark"] [style*="color:#684287"] {
    color: var(--lpc-brand-text) !important;
}

/* The layout's inline light backgrounds / text */
[data-bs-theme="dark"] [style*="background:#faf8fb"] {
    background: #1c1622 !important;
}

[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background:#ffffff"],
[data-bs-theme="dark"] [style*="background:linear-gradient(135deg,#fff"] {
    background: var(--lpc-surface) !important;
    border-color: var(--lpc-border) !important;
}

[data-bs-theme="dark"] [style*="color:#333"] {
    color: var(--lpc-text) !important;
}

/* Brand buttons keep their purple; outline buttons get a visible edge */
[data-bs-theme="dark"] .btn-brand-outline-secondary {
    color: var(--lpc-text);
    border-color: var(--lpc-border);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--lpc-surface-2);
    color: var(--lpc-text);
    border-color: var(--lpc-border);
}

/* The moon / sun button in the top bar */
.theme-toggle {
    color: #684287;
    line-height: 1;
    font-size: 1.35rem;
}

/* Top utility bar: plain links + outlined Sign In / Sign out button */
.top-bar-link {
    color: #684287;
    font-weight: 500;
    text-decoration: none;
}

.top-bar-link:hover {
    color: #4f2f6b;
}

.top-bar-btn {
    color: #fff;
    background-color: #684287;
    font-weight: 600;
    border: 1.5px solid #684287;
    border-radius: .5rem;
    padding: .3rem 1.5rem;
}

.top-bar-btn:hover,
.top-bar-btn:focus-visible {
    color: #fff;
    background-color: #4f2f6b;
    border-color: #4f2f6b;
}

[data-bs-theme="dark"] .top-bar-link {
    color: var(--lpc-brand-text);
}

[data-bs-theme="dark"] .top-bar-btn {
    color: #1a1320;
    background-color: var(--lpc-brand-text);
    border-color: var(--lpc-brand-text);
}

[data-bs-theme="dark"] .top-bar-btn:hover,
[data-bs-theme="dark"] .top-bar-btn:focus-visible {
    color: #1a1320;
    background-color: #ddc6f2;
    border-color: #ddc6f2;
}

[data-bs-theme="dark"] .theme-toggle {
    color: var(--lpc-brand-text);
}