/* ==================== BEYOND THE VOID - UNIVERSAL THEME ==================== */


/* This stylesheet overrides all colors to apply the Beyond the Void design to all pages */

:root {
    /* ==================== BEYOND THE VOID COLOR SCHEME ==================== */
    --void-bg: #0a0a0f;
    --void-surface: rgba(20, 20, 35, 0.6);
    --void-glass: rgba(255, 255, 255, 0.03);
    --void-glass-border: rgba(255, 255, 255, 0.08);
    --void-text: #e8e8f0;
    --void-text-dim: rgba(255, 255, 255, 0.5);
    --void-text-muted: rgba(255, 255, 255, 0.3);
    --void-accent: #b8a9ff;
    --void-glow: rgba(184, 169, 255, 0.4);
    --void-line: rgba(255, 255, 255, 0.1);
    /* ==================== OVERRIDE APPLE DARK THEME COLORS ==================== */
    /* Backgrounds */
    --bg-primary: #0a0a0f !important;
    --bg-secondary: #0a0a0f !important;
    --bg: #0a0a0f !important;
    --panel: #0d0d18 !important;
    --bg-tertiary: #15151f !important;
    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.03) !important;
    --glass-bg-light: rgba(255, 255, 255, 0.02) !important;
    --glass-border: rgba(255, 255, 255, 0.08) !important;
    --glass-border-hover: rgba(255, 255, 255, 0.15) !important;
    --card: rgba(255, 255, 255, 0.03) !important;
    --border: rgba(255, 255, 255, 0.08) !important;
    /* Text Colors */
    --text-primary: #e8e8f0 !important;
    --text: #e8e8f0 !important;
    --text-secondary: rgba(255, 255, 255, 0.6) !important;
    --muted: rgba(255, 255, 255, 0.5) !important;
    --text-muted: rgba(255, 255, 255, 0.3) !important;
    --text-disabled: rgba(255, 255, 255, 0.2) !important;
    /* Brand Colors - Purple/Void Accent */
    --primary-50: rgba(184, 169, 255, 0.1);
    --primary-100: rgba(184, 169, 255, 0.2);
    --primary-200: rgba(184, 169, 255, 0.3);
    --primary-300: rgba(184, 169, 255, 0.4);
    --primary-400: rgba(184, 169, 255, 0.5);
    --primary-500: #b8a9ff;
    --primary-600: #a895ff;
    --primary-700: #9881ff;
    --primary-800: #8866ff;
    --primary-900: #7749ff;
    /* Replace blue accent with purple */
    --accent: #b8a9ff !important;
    --accent2: #b8a9ff !important;
    --accent-blue: #b8a9ff !important;
    --accent-cyan: #b8a9ff !important;
    --accent-pink: #b8a9ff !important;
    --primary: #b8a9ff !important;
    --primary-light: #c9b9ff !important;
    /* Secondary Accents */
    --accent-green: #a895ff;
    --success: #a895ff;
    --info: #b8a9ff;
    /* Glows & Shadows */
    --glow: rgba(184, 169, 255, 0.2) !important;
    --glow-primary: 0 0 20px rgba(184, 169, 255, 0.3);
    --glow-primary-lg: 0 0 40px rgba(184, 169, 255, 0.4);
    --glow-cyan: 0 0 20px rgba(184, 169, 255, 0.3);
    --glow-green: 0 0 20px rgba(168, 149, 255, 0.2);
    --glow-success: 0 0 20px rgba(184, 169, 255, 0.2);
    --purple-glow: rgba(184, 169, 255, 0.3);
}


/* ==================== SPACE BACKGROUND ==================== */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(30, 25, 60, 0.5) 0%, transparent 50%), radial-gradient(ellipse 80% 80% at 80% 50%, rgba(20, 30, 50, 0.3) 0%, transparent 50%), linear-gradient(180deg, #0a0a0f 0%, #0d0d18 50%, #0a0a0f 100%);
    pointer-events: none;
}


/* ==================== OVERRIDE BUTTONS ==================== */

button,
input[type="button"],
input[type="submit"],
.btn {
    border-color: var(--void-glass-border) !important;
    background: var(--void-glass) !important;
    color: var(--void-text) !important;
    transition: all 0.3s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:hover {
    border-color: var(--void-accent) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 20px var(--void-glow) !important;
}


/* ==================== OVERRIDE FORM ELEMENTS ==================== */

input,
textarea,
select {
    background: var(--void-glass) !important;
    border: 1px solid var(--void-glass-border) !important;
    color: var(--void-text) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--void-accent) !important;
    box-shadow: 0 0 20px var(--void-glow) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--void-text-muted) !important;
}


/* ==================== OVERRIDE CARDS & PANELS ==================== */

.card,
.glass-card,
.panel,
.dashboard-panel,
.settings-panel {
    background: var(--void-glass) !important;
    border: 1px solid var(--void-glass-border) !important;
    color: var(--void-text) !important;
}

.card:hover,
.glass-card:hover {
    border-color: var(--void-accent) !important;
    box-shadow: 0 0 30px var(--void-glow) !important;
}


/* ==================== OVERRIDE MODALS & DIALOGS ==================== */

.modal,
.dialog,
[role="dialog"] {
    background: var(--void-glass) !important;
    border: 1px solid var(--void-glass-border) !important;
    color: var(--void-text) !important;
}

.modal-backdrop,
.dialog-backdrop {
    background: rgba(10, 10, 15, 0.5) !important;
    backdrop-filter: blur(5px) !important;
}


/* ==================== OVERRIDE NAVBAR & SIDEBARS ==================== */

nav,
.navbar,
.sidebar,
aside {
    background: var(--void-glass) !important;
    border-color: var(--void-glass-border) !important;
    color: var(--void-text) !important;
}

.nav-link,
.sidebar-item,
[class*="nav"],
[class*="menu"] {
    color: var(--void-text-dim) !important;
    transition: color 0.3s ease !important;
}

.nav-link:hover,
.sidebar-item:hover,
.nav-link.active,
.sidebar-item.active {
    color: var(--void-accent) !important;
}


/* ==================== OVERRIDE TABLES ==================== */

table,
tbody,
thead,
tr,
td,
th {
    border-color: var(--void-glass-border) !important;
    color: var(--void-text) !important;
}

thead,
th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--void-accent) !important;
}

tbody tr:hover {
    background: rgba(184, 169, 255, 0.05) !important;
}


/* ==================== OVERRIDE BADGES & LABELS ==================== */

.badge,
.label,
.status-badge,
.count-badge,
.notification-badge {
    background: rgba(184, 169, 255, 0.15) !important;
    color: var(--void-accent) !important;
    border-color: var(--void-accent) !important;
}


/* ==================== OVERRIDE PROGRESS BARS ==================== */

.progress,
.progress-bar {
    background: var(--void-glass) !important;
    border: 1px solid var(--void-glass-border) !important;
}

.progress-bar {
    background: linear-gradient(90deg, #b8a9ff, #a895ff) !important;
    box-shadow: 0 0 15px var(--void-glow) !important;
}


/* ==================== OVERRIDE ALERTS ==================== */

.alert,
.notification,
[class*="alert"],
[class*="notification"] {
    background: var(--void-glass) !important;
    border: 1px solid var(--void-glass-border) !important;
    color: var(--void-text) !important;
}


/* ==================== OVERRIDE SCROLLBARS ==================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--void-glass);
}

::-webkit-scrollbar-thumb {
    background: var(--void-accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c9b9ff;
}


/* ==================== ENSURE ALL TEXT IS READABLE ==================== */

body {
    background-color: #0a0a0f !important;
    color: #e8e8f0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--void-text) !important;
}

p,
span,
div,
a {
    color: inherit !important;
}

a {
    color: var(--void-accent) !important;
}

a:hover {
    color: #c9b9ff !important;
}


/* ==================== OVERRIDE DROPDOWN MENUS ==================== */

.dropdown,
.dropdown-menu,
.menu {
    background: var(--void-glass) !important;
    border: 1px solid var(--void-glass-border) !important;
}

.dropdown-item,
.menu-item {
    color: var(--void-text-dim) !important;
}

.dropdown-item:hover,
.menu-item:hover,
.dropdown-item.active {
    background: rgba(184, 169, 255, 0.1) !important;
    color: var(--void-accent) !important;
}


/* ==================== OVERRIDE LOADING STATES ==================== */

.spinner,
.loader,
.loading {
    border-color: rgba(184, 169, 255, 0.1) !important;
    border-top-color: var(--void-accent) !important;
}


/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

@media (max-width: 768px) {
    body::before {
        display: none !important;
    }
}