/* --------------------------------------------------------------------------
   Light / dark theme for the user and moderator UI.

   Most colours switch through the generated --dk-* variables (theme-dark-vars.css).
   This file covers what that cannot reach: page defaults, CDN frameworks
   (Bootstrap, Tailwind utilities), logos, and the theme toggle itself.
   Every dark rule is scoped to :root[data-theme="dark"], so light mode is untouched.
   -------------------------------------------------------------------------- */

/* Toggle button: shows the moon in light mode and the sun in dark mode */
.mdx-theme-icon-sun,
:root[data-theme="dark"] .mdx-theme-icon-moon {
    display: none;
}

:root[data-theme="dark"] .mdx-theme-icon-sun {
    display: inline-block;
}

/* Floating switch for layouts without the shared top bar */
.mdx-theme-fab {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.mdx-theme-fab:hover {
    color: #0f172a;
}

:root[data-theme="dark"] .mdx-theme-fab {
    border-color: #2c2940;
    background: #1b1929;
    color: #cfcbe0;
}

:root[data-theme="dark"] .mdx-theme-fab:hover {
    color: #f1effa;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* globalstyles.css colours every element with `* { color: var(--primary-color) }` */
    --primary-color: #f1effa;

    /* Shared shell tokens that are not plain colours in shell.css */
    --mdx-brand-tint: #2a2448;
    --mdx-muted: #8a85a3;
    --mdx-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --mdx-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.5);

    /* Bootstrap 5.3 (data-bs-theme="dark" is set alongside data-theme) */
    --bs-body-bg: #100e1a;
    --bs-body-bg-rgb: 16, 14, 26;
    --bs-body-color: #cfcbe0;
    --bs-body-color-rgb: 207, 203, 224;
    --bs-emphasis-color: #f1effa;
    --bs-heading-color: #f1effa;
    --bs-secondary-color: #9e99b5;
    --bs-secondary-bg: #201e30;
    --bs-tertiary-bg: #1b1929;
    --bs-border-color: #2c2940;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
}

/* Palette tokens whose role the generator cannot infer from the name */
:root[data-theme="dark"] {
    /* marketplace.css grey scale: 900-500 are text, 300 is borders, 100 is fills and dividers */
    --mp-gray-900: #f1effa;
    --mp-gray-700: #cfcbe0;
    --mp-gray-500: #9e99b5;
    --mp-gray-300: #3a3652;
    --mp-gray-100: #201e30;
}

/* Marketplace category list: the active item uses --mp-primary-dark, which is also a button fill */
:root[data-theme="dark"] .mp-tax-item.active {
    color: #a5b4fc;
}

/* Marketplace live search dropdown: indigo price and "see all" link */
:root[data-theme="dark"] .mp-live-price:not(.is-sold),
:root[data-theme="dark"] .mp-live-all {
    color: #a5b4fc;
}

/* my-posts.css mirrors the admin console tokens, so it takes the admin dark values */
:root[data-theme="dark"] .myp {
    --myp-chart: #8f78f0;
    --myp-chart-grid: #2a2840;
    --myp-g: #6fd19c;
    --myp-r: #f28b82;
    --myp-a: #f0b85a;
    --myp-tint: #2a2448;
    --myp-brand: #8f78f0;
}

/* Page default for screens that never set a background (low specificity on purpose) */
:where(:root[data-theme="dark"]) body {
    background-color: #100e1a;
    color: #cfcbe0;
}

/* Bootstrap utilities whose colours stay fixed under data-bs-theme="dark".
   Scoped to layouts that load Bootstrap (themeKit), because elsewhere these classes do nothing. */
:root.mdx-kit-bootstrap[data-theme="dark"] .bg-white {
    background-color: #1b1929 !important;
}

:root.mdx-kit-bootstrap[data-theme="dark"] .bg-light:not(.badge) {
    background-color: #201e30 !important;
}

/* Dark text stays dark on bright fills that do not change: Bootstrap warning/info and badges
   (badges carry their own colour, e.g. the marketplace category colour) */
:root.mdx-kit-bootstrap[data-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.btn-warning):not(.btn-info):not(.badge),
:root.mdx-kit-bootstrap[data-theme="dark"] .text-black {
    color: #f1effa !important;
}

:root.mdx-kit-bootstrap[data-theme="dark"] .border-light {
    border-color: #2c2940 !important;
}

:root.mdx-kit-bootstrap[data-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #f1effa;
    --bs-btn-border-color: #9e99b5;
    --bs-btn-hover-color: #100e1a;
    --bs-btn-hover-bg: #f1effa;
    --bs-btn-hover-border-color: #f1effa;
    --bs-btn-active-color: #100e1a;
    --bs-btn-active-bg: #f1effa;
}

:root.mdx-kit-bootstrap[data-theme="dark"] .btn-light {
    --bs-btn-bg: #201e30;
    --bs-btn-border-color: #2c2940;
    --bs-btn-color: #f1effa;
    --bs-btn-hover-bg: #2a2740;
    --bs-btn-hover-border-color: #3a3652;
    --bs-btn-hover-color: #f1effa;
}

:root.mdx-kit-bootstrap[data-theme="dark"] .table-light {
    --bs-table-bg: #201e30;
    --bs-table-color: #f1effa;
    --bs-table-border-color: #2c2940;
}

/* Tailwind utilities used by the Breeze screens (built CSS, so mapped here) */
:root.mdx-kit-tailwind[data-theme="dark"] .bg-white { background-color: #1b1929 !important; }
:root.mdx-kit-tailwind[data-theme="dark"] .bg-gray-50,
:root.mdx-kit-tailwind[data-theme="dark"] .bg-gray-100 { background-color: #100e1a !important; }
:root.mdx-kit-tailwind[data-theme="dark"] .bg-gray-200 { background-color: #2a2740 !important; }
:root.mdx-kit-tailwind[data-theme="dark"] .text-gray-900,
:root.mdx-kit-tailwind[data-theme="dark"] .text-gray-800 { color: #f1effa !important; }
:root.mdx-kit-tailwind[data-theme="dark"] .text-gray-700,
:root.mdx-kit-tailwind[data-theme="dark"] .text-gray-600 { color: #cfcbe0 !important; }
:root.mdx-kit-tailwind[data-theme="dark"] .text-gray-500,
:root.mdx-kit-tailwind[data-theme="dark"] .text-gray-400 { color: #9e99b5 !important; }
:root.mdx-kit-tailwind[data-theme="dark"] .border-gray-200,
:root.mdx-kit-tailwind[data-theme="dark"] .border-gray-300 { border-color: #2c2940 !important; }

/* Tailwind's forms plugin paints fields white in the built CSS */
:root.mdx-kit-tailwind[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
:root.mdx-kit-tailwind[data-theme="dark"] select,
:root.mdx-kit-tailwind[data-theme="dark"] textarea {
    background-color: #201e30;
    border-color: #3a3652;
    color: #f1effa;
}

:root.mdx-kit-tailwind[data-theme="dark"] .bg-gray-800 { background-color: #3a3652 !important; }
:root.mdx-kit-tailwind[data-theme="dark"] .hover\:bg-gray-700:hover { background-color: #4a4566 !important; }

/* Form fields: stop autofill from painting them pale yellow */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] textarea:-webkit-autofill,
:root[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: #f1effa;
    -webkit-box-shadow: 0 0 0 1000px #201e30 inset;
}

/* Logos: the dark-on-light Metapedia mark is flipped exactly as on the dark top bar */
:root[data-theme="dark"] .mdx-topbar--light .mdx-logo-img--dark-on-light {
    filter: invert(1);
}

:root[data-theme="dark"] .mdx-topbar--light .mdx-logo-img--light-on-dark {
    filter: none;
}

/* Background art with white cut-out "notches" baked in: dark copies swap the white for the
   dark page colour (public/assets/images/dark, made from the originals). */
:root[data-theme="dark"] .banner-bg { background-image: url(../images/dark/banner-bg.webp); }
:root[data-theme="dark"] .daily-elemental-bg { background-image: url(../images/dark/daliy-bg.png); }
:root[data-theme="dark"] .follow-us-bg { background-image: url(../images/dark/follow-bg.png); }
:root[data-theme="dark"] .footer-bg,
:root[data-theme="dark"] #particles-js { background-image: url(../images/dark/footer-bg.png); }
:root[data-theme="dark"] .footer-section .footer-try-now-btn,
:root[data-theme="dark"] .footer-section a.custom-secondary-btn,
:root[data-theme="dark"] .top-c a.custom-btn {
    background-color: #ffffff !important;
    color: #0b0f19 !important;
}
:root[data-theme="dark"] .footer-section .footer-try-now-btn:hover,
:root[data-theme="dark"] .footer-section a.custom-secondary-btn:hover,
:root[data-theme="dark"] .top-c a.custom-btn:hover {
    background-color: #f1f5f9 !important;
    color: #000000 !important;
}

/* AI Launcher Tooltip Theme Colors */
.mdx-ai-launcher-tooltip,
:root:not([data-theme="dark"]) .mdx-ai-launcher-tooltip {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(124, 58, 237, 0.45) !important;
}
.mdx-ai-launcher-tooltip span,
:root:not([data-theme="dark"]) .mdx-ai-launcher-tooltip span {
    color: #0f172a !important;
}
:root[data-theme="dark"] .mdx-ai-launcher-tooltip {
    background: #1e1b4b !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
}
:root[data-theme="dark"] .mdx-ai-launcher-tooltip span {
    color: #f1f5f9 !important;
}
:root[data-theme="dark"] .authpage-content::before,
:root[data-theme="dark"] .authpage-content::after { background-image: url(../images/dark/shapes.webp); }

/* Single-colour dark UI icons shipped as image files (post actions, counters, menus).
   They cannot follow `color`, so they are inverted to light grey. */
:root[data-theme="dark"] img[src$="/HeartStraight.png"],
:root[data-theme="dark"] img[src$="/ChatCircle.png"],
:root[data-theme="dark"] img[src$="/Icon.png"],
:root[data-theme="dark"] img[src$="/check.png"],
:root[data-theme="dark"] img[src$="/eye.svg"],
:root[data-theme="dark"] img[src$="/more.svg"],
:root[data-theme="dark"] img[src$="/pin.svg"],
:root[data-theme="dark"] img[src$="/pin-fill.svg"],
:root[data-theme="dark"] img[src$="/share.svg"] {
    filter: invert(0.88);
}

/* Scrollbars */
:root[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #14121f;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a3652;
}