/**
 * Ultra-Premium Global Dark Theme Override
 * Power of Knowledge - AI-Powered Academic Journal
 * 
 * This CSS forces the Quantum Twilight dark theme on ALL pages.
 * Applied globally via header.php to transform the entire site.
 */

/* ============================================
   ROOT OVERRIDE - Force Dark Theme
   ============================================ */

:root {
    /* Force Quantum Twilight palette */
    --bg-primary: var(--void-black, #0a0a0f);
    --bg-secondary: var(--obsidian, #12121a);
    --bg-card: var(--anthracite, #1a1a2e);
    --bg-elevated: var(--graphite, #252540);

    --text-primary: var(--platinum, #e5e7eb);
    --text-secondary: var(--silver, #9ca3af);
    --text-muted: rgba(156, 163, 175, 0.7);

    --accent-primary: var(--quantum-blue, #00d4ff);
    --accent-secondary: var(--neural-purple, #8b5cf6);
    --accent-tertiary: var(--synapse-pink, #ec4899);
    --accent-success: var(--plasma-green, #10b981);
    --accent-warning: var(--gold-standard, #fbbf24);

    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* ============================================
   BODY & HTML - Dark Background
   ============================================ */

html {
    background: var(--bg-primary) !important;
    scroll-behavior: smooth;
    /* Native smooth scroll */
    overflow-x: hidden;
}

body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    min-height: 100vh;
    overflow-x: hidden;
}

body:not(.light-mode) {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
}

/* ============================================
   NAVIGATION - Dark Header
   ============================================ */

.navbar,
.main-navigation,
header nav,
.site-header,
#main-header,
.nav-wrapper {
    background: rgba(18, 18, 26, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color) !important;
}

.navbar .nav-link,
.main-navigation a,
header nav a,
.nav-wrapper a {
    color: var(--text-secondary) !important;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.main-navigation a:hover,
header nav a:hover,
.nav-wrapper a:hover {
    color: var(--accent-primary) !important;
}

.navbar .nav-link.active,
.main-navigation a.active {
    color: var(--accent-primary) !important;
}

/* Logo treatment */
.navbar-brand,
.site-logo {
    filter: brightness(1.1);
}

/* Mobile menu */
.mobile-menu,
.nav-mobile,
.offcanvas {
    background: var(--bg-secondary) !important;
    border-left: 1px solid var(--border-color) !important;
}

/* ============================================
   DROPDOWN MENUS - Dark
   ============================================ */

.dropdown-menu,
.nav-dropdown,
.submenu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: 12px !important;
}

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

.dropdown-item:hover,
.dropdown-menu a:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    color: var(--accent-primary) !important;
}

/* ============================================
   FOOTER - Dark Theme
   ============================================ */

footer,
.site-footer,
#main-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

footer a,
.site-footer a {
    color: var(--text-secondary) !important;
    transition: color 0.3s ease;
}

footer a:hover,
.site-footer a:hover {
    color: var(--accent-primary) !important;
}

footer h3,
footer h4,
footer h5,
.site-footer h3,
.site-footer h4 {
    color: var(--text-primary) !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card,
.panel,
.box,
.module,
.widget,
.content-box {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    color: var(--text-primary) !important;
}

.card-header,
.panel-header {
    background: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.card-body,
.panel-body {
    background: transparent !important;
}

.card-footer,
.panel-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Glassmorphism cards */
.glass-card,
.up-glass-card {
    background: rgba(26, 26, 46, 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* ============================================
   BUTTONS - Ultra Premium Style
   ============================================ */

/* Primary buttons */
.btn-primary,
.btn-submit,
button[type="submit"],
.primary-button {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5) !important;
}

/* Secondary buttons */
.btn-secondary,
.btn-outline,
.secondary-button {
    background: transparent !important;
    border: 1px solid var(--border-hover) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* Success buttons */
.btn-success {
    background: linear-gradient(135deg, var(--accent-success), #059669) !important;
}

/* Danger buttons */
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.form-control,
.input-field {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
    outline: none !important;
}

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

/* Labels */
label,
.form-label {
    color: var(--text-secondary) !important;
}

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

table,
.data-table {
    background: var(--bg-card) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

thead,
th {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

tbody tr {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

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

td {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ============================================
   LINKS
   ============================================ */

a {
    color: var(--accent-primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-secondary);
}

/* Article links */
.article-title a,
.paper-title a {
    color: var(--text-primary) !important;
}

.article-title a:hover,
.paper-title a:hover {
    color: var(--accent-primary) !important;
}

/* ============================================
   HEADINGS
   ============================================ */

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

.section-title,
.page-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
}

/* ============================================
   BADGES & TAGS
   ============================================ */

.badge,
.tag,
.label,
.chip {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.badge-primary,
.badge-info {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    color: white !important;
    border: none !important;
}

.badge-success {
    background: var(--accent-success) !important;
    color: white !important;
}

.badge-warning {
    background: var(--accent-warning) !important;
    color: var(--bg-primary) !important;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

.alert,
.notice,
.notification {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
}

.alert-success {
    border-left: 4px solid var(--accent-success) !important;
}

.alert-warning {
    border-left: 4px solid var(--accent-warning) !important;
}

.alert-danger,
.alert-error {
    border-left: 4px solid #ef4444 !important;
}

.alert-info {
    border-left: 4px solid var(--accent-primary) !important;
}

/* ============================================
   MODALS
   ============================================ */

.modal-content,
.modal-dialog .modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

.modal-backdrop {
    background: rgba(10, 10, 15, 0.8) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination,
.page-numbers {
    gap: 8px;
}

.pagination a,
.page-numbers a,
.page-link {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
}

.pagination a:hover,
.page-link:hover {
    background: var(--bg-elevated) !important;
    color: var(--accent-primary) !important;
}

.pagination .active a,
.page-link.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    color: white !important;
    border: none !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumb {
    background: transparent !important;
}

.breadcrumb-item a {
    color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--text-muted) !important;
}

/* ============================================
   TABS & PILLS
   ============================================ */

.nav-tabs,
.nav-pills {
    border-bottom: 1px solid var(--border-color) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--accent-primary) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background: var(--bg-card) !important;
    color: var(--accent-primary) !important;
    border-color: var(--border-color) !important;
}

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

.progress {
    background: var(--bg-elevated) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar,
aside,
.side-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
}

.sidebar h3,
.sidebar h4,
aside h3,
aside h4 {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 12px !important;
}

/* ============================================
   HERO SECTIONS
   ============================================ */

.hero,
.page-header,
.banner {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   SCROLLBARS (Dark)
   ============================================ */

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

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Firefox scrollbar styling - applies to scrollable elements */
html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-elevated) var(--bg-primary);
}

/* ============================================
   SELECTION
   ============================================ */

::selection {
    background: rgba(0, 212, 255, 0.3);
    color: white;
}

/* ============================================
   SPECIFIC PAGE OVERRIDES
   ============================================ */

/* Login/Register pages */
.login-page,
.register-page,
.auth-page {
    background: var(--bg-primary) !important;
}

.login-form,
.register-form,
.auth-form {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
}

/* Error pages */
.error-page,
.not-found {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   UTILITY OVERRIDES
   ============================================ */

.bg-white,
.bg-light {
    background: var(--bg-card) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.border,
.border-top,
.border-bottom {
    border-color: var(--border-color) !important;
}
/* Lenis Recommended Styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }