/* ========================================================
   PSOBB.IO OFFICIAL COSMIC THEME FOR FIDER (V13 - DROPDOWN LIST MATCH FIX)
   ======================================================== */

:root {
    --pso-blue: #00ffff !important;
    --pso-dark: #0a0a10 !important;
    --pso-panel: rgba(0, 20, 40, 0.9) !important;
    --pso-text: #e0f0ff !important;
    --pso-orange: #ffaa00 !important;
    --pso-purple: #9d4edd !important;
}

/* Redefine Fider's custom variables on body for both light and dark themes */
body,
body[data-theme=light],
body[data-theme=dark] {
    --colors-white: rgba(0, 20, 40, 0.9) !important;  /* var(--pso-panel) */
    --colors-gray-50: #0a0a10 !important;    /* var(--pso-dark) */
    --colors-gray-100: #0a0a10 !important;   /* var(--pso-dark) */
    --colors-gray-200: #121218 !important;   /* Lighter dark panel */
    --colors-gray-300: #1a1a24 !important;
    --colors-gray-400: #1f1f2e !important;   /* Border color */
    --colors-gray-500: #8899a6 !important;   /* Dim text */
    --colors-gray-600: #a0b0c0 !important;   /* Normal text */
    --colors-gray-700: #c0d0e0 !important;   /* Bright text */
    --colors-gray-800: #e0f0ff !important;   /* Brightest text (var(--pso-text)) */
    --colors-gray-900: #00ffff !important;   /* Highlight text (var(--pso-blue)) */
    --colors-black: #00ffff !important;
    --colors-primary-light: rgba(0, 255, 255, 0.15) !important;
    --colors-primary-base: #00ffff !important;
    --colors-primary-dark: #9d4edd !important;
}

/* ========================================================
   CRITICAL UNIVERSAL LAYERING & POSITIONING (BULLETPROOF)
   ======================================================== */

/* Force header stacking context universally using correct ID selector */
#c-header,
.c-menu {
    position: relative !important; /* CRITICAL: Establishes a positioning context so z-index works! */
    z-index: 99999999 !important; /* Force the header stacking context above all page content */
}

/* Force absolute positioning and maximum z-index on dropdown menus universally */
/* NOTE: Avoided [class*="c-dropdown__list"] substring matcher as it incorrectly targets .c-dropdown__listitem */
.c-dropdown__list,
.dropdown-menu,
[role="menu"],
[id^="headlessui-menu-items"] {
    position: absolute !important; /* Forces positioning so z-index is active */
    z-index: 999999999 !important; /* Insanely high z-index to stay on the absolute front layer */
    background-color: rgba(0, 10, 20, 0.98) !important;
    border: 1px solid var(--pso-blue) !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.8) !important;
}

/* Maintain mobile full-screen fixed positioning and stack context */
.c-dropdown__list--fullscreen-small {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999999 !important;
}

/* Correctly flow the inner notifications container inside the absolute dropdown list */
.c-notifications-container {
    position: relative !important; /* Keep in flow so parent dropdown list doesn't collapse to 0 height */
    z-index: auto !important; /* Let parent absolute context handle the layering */
    background: transparent !important; /* Background is already handled by parent c-dropdown__list */
    border: none !important; /* Border is already handled by parent */
    box-shadow: none !important; /* Shadow is already handled by parent */
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* ========================================================
   STANDARD CUSTOMIZATIONS & COSMETICS
   ======================================================== */

/* 1. Global Typography & Core Background */
html,
body,
html[data-theme],
body[data-theme] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background-color: var(--pso-dark) !important;
    background-image: radial-gradient(circle at top center, #1a0b2e 0%, #050a14 60%, #000000 100%) !important;
    background-attachment: fixed !important;
    color: var(--pso-text) !important;
}

* {
    border-radius: 4px !important;
}

/* Force dark layout elements regardless of light/dark modes */
body[data-theme=light] .layout,
body[data-theme=dark] .layout,
body[data-theme=light] .bg-gray-50,
body[data-theme=dark] .bg-gray-50,
body[data-theme=light] .bg-gray-100,
body[data-theme=dark] .bg-gray-100 {
    background-color: transparent !important;
    background-image: none !important;
}

/* 2. Header Customization to match psobb.io */
body[data-theme=light] #c-header,
body[data-theme=dark] #c-header,
body[data-theme=light] .c-menu,
body[data-theme=dark] .c-menu {
    background: rgba(0, 0, 0, 0.85) !important;
    border-bottom: 1px solid var(--pso-blue) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.1) !important;
}

/* Header links and brand text */
body[data-theme=light] #c-header a,
body[data-theme=dark] #c-header a,
body[data-theme=light] #c-header .logo-text,
body[data-theme=dark] #c-header .logo-text {
    color: var(--pso-blue) !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
    font-weight: 700 !important;
}

/* 3. Panels, Cards & Suggestion Forms (Dark Cosmic Panels) */
body[data-theme=light] .bg-white,
body[data-theme=dark] .bg-white,
body[data-theme=light] .panel,
body[data-theme=dark] .panel,
body[data-theme=light] .card,
body[data-theme=dark] .card,
body[data-theme=light] #root form,
body[data-theme=dark] #root form,
body[data-theme=light] #root form > div,
body[data-theme=dark] #root form > div,
body[data-theme=light] #root main > div > div > div,
body[data-theme=dark] #root main > div > div > div,
body[data-theme=light] #root main > div > div > ul,
body[data-theme=dark] #root main > div > div > ul,
body[data-theme=light] #root main > div > div > section,
body[data-theme=dark] #root main > div > div > section,
body[data-theme=light] .bg-white,
body[data-theme=dark] .bg-white {
    background-color: var(--pso-panel) !important;
    border: 1px solid rgba(0, 255, 255, 0.25) !important;
    color: var(--pso-text) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px) !important;
}

/* 4. Font Color Overrides */
body[data-theme=light] .text-gray-900,
body[data-theme=dark] .text-gray-900,
body[data-theme=light] .text-gray-800,
body[data-theme=dark] .text-gray-800,
body[data-theme=light] .text-gray-700,
body[data-theme=dark] .text-gray-700,
body[data-theme=light] .text-gray-600,
body[data-theme=dark] .text-gray-600,
body[data-theme=light] .text-gray-500,
body[data-theme=dark] .text-gray-500,
body[data-theme=light] p[class*="text-gray-"],
body[data-theme=dark] p[class*="text-gray-"] {
    color: var(--pso-text) !important;
}

/* Headers */
body[data-theme=light] h1, body[data-theme=dark] h1,
body[data-theme=light] h2, body[data-theme=dark] h2,
body[data-theme=light] h3, body[data-theme=dark] h3,
body[data-theme=light] h4, body[data-theme=dark] h4,
body[data-theme=light] h5, body[data-theme=dark] h5,
body[data-theme=light] h6, body[data-theme=dark] h6,
body[data-theme=light] .text-display2, body[data-theme=dark] .text-display2 {
    color: var(--pso-blue) !important;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4) !important;
    font-weight: bold !important;
}

/* 5. Inputs & Focus Primitives */
body[data-theme=light] input, body[data-theme=dark] input,
body[data-theme=light] textarea, body[data-theme=dark] textarea,
body[data-theme=light] select, body[data-theme=dark] select {
    background-color: rgba(0, 10, 20, 0.8) !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    color: var(--pso-blue) !important;
}

body[data-theme=light] input:focus, body[data-theme=dark] input:focus,
body[data-theme=light] textarea:focus, body[data-theme=dark] textarea:focus {
    outline: none !important;
    border-color: var(--pso-blue) !important;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3) !important;
}

/* 6. Primary Buttons (Mirroring psobb.io Cyan Action Buttons) */
body[data-theme=light] .btn-primary, body[data-theme=dark] .btn-primary,
body[data-theme=light] button[type="submit"], body[data-theme=dark] button[type="submit"],
body[data-theme=light] [class*="bg-blue-"], body[data-theme=dark] [class*="bg-blue-"] {
    background: rgba(0, 255, 255, 0.1) !important;
    border: 1px solid var(--pso-blue) !important;
    color: var(--pso-blue) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.2) !important;
}

body[data-theme=light] .btn-primary:hover, body[data-theme=dark] .btn-primary:hover,
body[data-theme=light] button[type="submit"]:hover, body[data-theme=dark] button[type="submit"]:hover,
body[data-theme=light] [class*="bg-blue-"]:hover, body[data-theme=dark] [class*="bg-blue-"]:hover {
    background: var(--pso-blue) !important;
    border-color: var(--pso-blue) !important;
    color: #000000 !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* 7. Secondary Buttons (Mirroring Cosmic Purple Buttons) */
body[data-theme=light] .btn-secondary, body[data-theme=dark] .btn-secondary {
    background: rgba(157, 78, 221, 0.15) !important;
    border: 1px solid var(--pso-purple) !important;
    color: var(--pso-purple) !important;
    transition: all 0.3s ease !important;
}

body[data-theme=light] .btn-secondary:hover, body[data-theme=dark] .btn-secondary:hover {
    background: var(--pso-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.5) !important;
}

/* 8. Voting & Support Counters */
body[data-theme=light] .c-support-counter,
body[data-theme=dark] .c-support-counter {
    border-color: rgba(0, 255, 255, 0.15) !important;
    background-color: rgba(0, 20, 40, 0.4) !important;
    color: var(--pso-text) !important;
}

body[data-theme=light] .c-support-counter.m-supported,
body[data-theme=dark] .c-support-counter.m-supported {
    border-color: var(--pso-purple) !important;
    background-color: rgba(157, 78, 221, 0.15) !important;
    color: var(--pso-purple) !important;
}

/* 9. Sidebar Navigation & Lists */
body[data-theme=light] a[href^="/admin/"], body[data-theme=dark] a[href^="/admin/"],
body[data-theme=light] a[href^="/settings/"], body[data-theme=dark] a[href^="/settings/"] {
    background-color: transparent !important;
    color: var(--pso-text) !important;
    border: 1px solid transparent !important;
}

body[data-theme=light] a.bg-white, body[data-theme=dark] a.bg-white,
body[data-theme=light] a[aria-current="page"], body[data-theme=dark] a[aria-current="page"] {
    background-color: rgba(157, 78, 221, 0.2) !important;
    color: var(--pso-blue) !important;
    border-left: 4px solid var(--pso-purple) !important;
}

body[data-theme=light] a[href^="/admin/"]:hover, body[data-theme=dark] a[href^="/admin/"]:hover,
body[data-theme=light] a[href^="/settings/"]:hover, body[data-theme=dark] a[href^="/settings/"]:hover {
    color: var(--pso-blue) !important;
    background-color: rgba(0, 255, 255, 0.05) !important;
}

/* Links */
body[data-theme=light] a, body[data-theme=dark] a {
    color: var(--pso-blue) !important;
    transition: color 0.3s !important;
}

body[data-theme=light] a:hover, body[data-theme=dark] a:hover {
    color: var(--pso-purple) !important;
    text-shadow: 0 0 5px var(--pso-purple) !important;
}

/* Ensure list items inside Fider c-dropdown also have correct colors */
body[data-theme=light] .c-dropdown__listitem, body[data-theme=dark] .c-dropdown__listitem {
    background-color: transparent !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
}

body[data-theme=light] .c-dropdown__listitem:hover, body[data-theme=dark] .c-dropdown__listitem:hover {
    background-color: rgba(0, 255, 255, 0.15) !important;
    color: var(--pso-blue) !important;
}

body[data-theme=light] [role="menuitem"], body[data-theme=dark] [role="menuitem"],
body[data-theme=light] [data-reach-menu-item], body[data-theme=dark] [data-reach-menu-item] {
    background-color: transparent !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
}

body[data-theme=light] [role="menuitem"]:hover, body[data-theme=dark] [role="menuitem"]:hover,
body[data-theme=light] [data-reach-menu-item]:hover, body[data-theme=dark] [data-reach-menu-item]:hover,
body[data-theme=light] [data-reach-menu-item][data-selected], body[data-theme=dark] [data-reach-menu-item][data-selected] {
    background-color: rgba(0, 255, 255, 0.15) !important;
    color: var(--pso-blue) !important;
}

/* 12. Custom Tags & Badges */
body[data-theme=light] .c-tag, body[data-theme=dark] .c-tag,
body[data-theme=light] [class*="bg-gray-"], body[data-theme=dark] [class*="bg-gray-"] {
    background-color: rgba(0, 20, 40, 0.6) !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    color: var(--pso-blue) !important;
}

/* 13. Structural Dividers */
body[data-theme=light] hr, body[data-theme=dark] hr,
body[data-theme=light] .border-t, body[data-theme=dark] .border-t,
body[data-theme=light] .border-gray-200, body[data-theme=dark] .border-gray-200 {
    border-color: rgba(0, 255, 255, 0.1) !important;
}

/* 14. UI Elements Cleanups (Hide light/dark switch & dim SVGs) */
[aria-label="Toggle dark mode"], 
.c-header button svg.lucide-moon, 
.c-header button svg.lucide-sun {
    display: none !important;
}

body[data-theme=light] .empty-state svg, 
body[data-theme=dark] .empty-state svg,
body[data-theme=light] div[class*="text-center"] svg, 
body[data-theme=dark] div[class*="text-center"] svg {
    opacity: 0.25 !important;
    filter: invert(1) hue-rotate(180deg) !important;
}