/**
 * Dark Mode Styles — Merged premium + fixes
 * Eliminates render-blocking @import; consolidated into single stylesheet.
 * 
 * Color Palette:
 *   Background:     #0b1120 — deep navy base
 *   Surface:        #141d33 — card/container surfaces
 *   Elevated:       #1a2642 — elevated elements (hover states)
 *   Accent:         #f97316 — primary accent (used sparingly)
 *   Accent Glow:    rgba(249, 115, 22, 0.25)
 *   Border:         rgba(249, 115, 22, 0.08)
 *   Text Primary:   #f1f5f9
 *   Text Secondary: #94a3b8
 *   Text Tertiary:  #64748b
 *
 * Z-index layers:
 *   --z-under: -1, --z-base: 1, --z-content: 10, --z-overlay: 50,
 *   --z-modal: 100, --z-tooltip: 200, --z-max: 9999
 */

/* ============================================
   ROOT VARIABLES — Smooth color transitions
   ============================================ */
:root {
    --dm-bg: #ffffff;
    --dm-surface: #ffffff;
    --dm-elevated: #f8fafc;
    --dm-border: #e2e8f0;
    --dm-text: #0f172a;
    --dm-text-secondary: #475569;
    --dm-text-tertiary: #64748b;
    --dm-accent: #f97316;
    --dm-accent-glow: rgba(249, 115, 22, 0.15);
    --dm-header-bg: rgba(255, 255, 255, 0.85);
    --dm-glass: rgba(255, 255, 255, 0.08);

    --dm-transition-duration: 0.35s;
    --dm-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index layer system */
    --z-under: -1;
    --z-base: 1;
    --z-content: 10;
    --z-overlay: 50;
    --z-modal: 100;
    --z-tooltip: 200;
    --z-max: 9999;
}

.dark {
    --dm-bg: #0b1120;
    --dm-surface: #141d33;
    --dm-elevated: #1a2642;
    --dm-border: rgba(249, 115, 22, 0.08);
    --dm-text: #f1f5f9;
    --dm-text-secondary: #94a3b8;
    --dm-text-tertiary: #64748b;
    --dm-accent: #fb923c;
    --dm-accent-glow: rgba(249, 115, 22, 0.25);
    --dm-header-bg: rgba(11, 17, 32, 0.85);
    --dm-glass: rgba(255, 255, 255, 0.05);
}

/* Smooth theme transitions via variables */
[class] {
    transition: background-color var(--dm-transition-duration) var(--dm-transition-timing),
                border-color var(--dm-transition-duration) var(--dm-transition-timing),
                color var(--dm-transition-duration) var(--dm-transition-timing),
                fill var(--dm-transition-duration) var(--dm-transition-timing),
                stroke var(--dm-transition-duration) var(--dm-transition-timing),
                box-shadow var(--dm-transition-duration) var(--dm-transition-timing);
}

/* ============================================
   BASE DARK MODE
   ============================================ */
.dark {
    background-color: var(--dm-bg);
    color: var(--dm-text);
    color-scheme: dark;
}

.dark body {
    background: radial-gradient(ellipse at 50% 0%, #141d33 0%, #0b1120 60%, #080d1a 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ============================================
   HEADER — Premium glass with subtle accent bottom
   ============================================ */
.dark header {
    background: var(--dm-header-bg) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--dm-border) !important;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
   FOOTER — Deep gradient
   ============================================ */
.dark footer {
    background: linear-gradient(180deg, #141d33 0%, #0b1120 100%) !important;
    border-color: var(--dm-border) !important;
}

.dark footer .border-t {
    border-color: rgba(249, 115, 22, 0.06) !important;
}

/* Footer dark mode overrides */
.dark footer .border-slate-200,
.dark footer .bg-slate-50,
.dark footer .bg-white {
    border-color: rgba(51, 65, 85, 0.6) !important;
    background-color: #0f172a !important;
}

.dark footer p,
.dark footer li,
.dark footer a {
    color: rgba(148, 163, 184, 0.9) !important;
}

.dark footer a:hover {
    color: #f97316 !important;
}

/* Footer social buttons */
.dark footer a[class*="rounded-full"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

.dark footer a[class*="rounded-full"]:hover {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-accent) !important;
    box-shadow: 0 0 24px var(--dm-accent-glow);
    transform: translateY(-2px);
}

/* ============================================
   FLOATING BOTTOM NAV — Premium dark glass
   ============================================ */
.dark #floating-bottom-nav {
    background: rgba(11, 17, 32, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(249, 115, 22, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 40px rgba(249, 115, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ── Bottom Nav hard fix: override all generic dark mode text colors ── */
.dark #floating-bottom-nav .nav-item .nav-label {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    font-size: 11px !important;
}
.dark #floating-bottom-nav .nav-item .nav-icon svg {
    color: #94a3b8 !important;
    width: 20px !important;
    height: 20px !important;
}
.dark #floating-bottom-nav .nav-item.text-brand .nav-label {
    color: #fb923c !important;
    font-weight: 600 !important;
}
.dark #floating-bottom-nav .nav-item.text-brand .nav-icon svg {
    color: #fb923c !important;
}
.dark #floating-bottom-nav .nav-item:not(.text-brand):hover .nav-label {
    color: #f8fafc !important;
}
.dark #floating-bottom-nav .nav-item:not(.text-brand):hover .nav-icon svg {
    color: #fb923c !important;
}
.dark #floating-bottom-nav .nav-item {
    background: transparent !important;
    color: inherit !important;
}
.dark #floating-bottom-nav .nav-item:hover {
    background: rgba(249,115,22,0.12) !important;
    color: inherit !important;
}
.dark .nav-icon svg {
    filter: none !important;
}
.dark #floating-bottom-nav .nav-item .nav-label {
    color: #cbd5e1 !important; /* slate-300 — light enough to read on dark glass */
    font-weight: 500 !important;
}
.dark #floating-bottom-nav .nav-item .nav-icon svg {
    color: #94a3b8 !important; /* slate-400 — visible icons */
    opacity: 0.9 !important;
}
.dark #floating-bottom-nav .nav-item.text-brand .nav-label {
    color: #fb923c !important; /* accent orange for active */
    font-weight: 600 !important;
}
.dark #floating-bottom-nav .nav-item.text-brand .nav-icon svg {
    color: #fb923c !important;
}
.dark #floating-bottom-nav .nav-item:not(.text-brand):hover .nav-label {
    color: #f1f5f9 !important;
}
.dark #floating-bottom-nav .nav-item:not(.text-brand):hover .nav-icon svg {
    color: #fb923c !important;
}

.dark #nav-active-indicator {
    background: var(--dm-accent) !important;
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.5);
}



/* Mobile nav dropdown */
.dark #mobileNav > div > div {
    background: rgba(11, 17, 32, 0.98) !important;
    backdrop-filter: blur(20px);
    border-color: var(--dm-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ============================================
   SURFACES & CARDS — Subtle glass with refined borders
   ============================================ */
.dark .bg-white,
.dark .bg-slate-50,
.dark .bg-slate-100,
.dark div.bg-white,
.dark article.bg-white {
    background: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
}

.dark section.bg-slate-50 {
    background-color: #0f172a !important;
}

.dark [class*="bg-white/"] {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(51, 65, 85, 0.6) !important;
}

/* Card-like elements (rounded-3xl, rounded-2xl) */
.dark .rounded-3xl,
.dark .rounded-2xl,
.dark .rounded-xl,
.dark article {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.dark .rounded-3xl:hover,
.dark .rounded-2xl:hover,
.dark .rounded-xl:hover,
.dark article:hover {
    border-color: rgba(249, 115, 22, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 48px rgba(249, 115, 22, 0.06);
    transform: translateY(-1px);
}

/* Elevated surface (hover/active cards) */
.dark .bg-slate-900\/95,
.dark [data-hero-stat] {
    background: linear-gradient(135deg, rgba(26, 38, 66, 0.7) 0%, rgba(20, 29, 51, 0.7) 100%);
    border: 1px solid var(--dm-border);
}

.dark [data-hero-stat]:hover {
    box-shadow: 0 0 32px var(--dm-accent-glow), 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Focus areas (resume hero) */
.dark .border-white\/10.bg-white\/5 {
    background: rgba(20, 29, 51, 0.6);
    border-color: rgba(249, 115, 22, 0.1);
}

/* CTA Banner */
.dark section[id="contact"] .bg-dark {
    background: radial-gradient(ellipse at center, #1a2642 0%, #0b1120 100%) !important;
    box-shadow: inset 0 0 60px rgba(249, 115, 22, 0.06);
}

/* CTA sidebar */
.dark .bg-brand\/5 {
    background: rgba(249, 115, 22, 0.06) !important;
    border-color: rgba(249, 115, 22, 0.15) !important;
}

/* ============================================
   RIPPLE EFFECT — Dark mode
   ============================================ */
.dark .ripple-container span {
    background: rgba(249, 115, 22, 0.2) !important;
}

/* ============================================
   TEXT COLORS — Proper contrast hierarchy
   ============================================ */
.dark .text-dark,
.dark .text-slate-900,
.dark h1, .dark h2, .dark h3,
.dark h4, .dark h5, .dark h6 {
    color: var(--dm-text) !important;
}

.dark .text-slate-700,
.dark .text-slate-600 {
    color: var(--dm-text-secondary) !important;
}

.dark .text-slate-500,
.dark .text-slate-400,
.dark p:not([class*="text-"]),
.dark li:not([class*="text-"]) {
    color: var(--dm-text-tertiary) !important;
}

.dark .text-brand,
.dark .text-accent {
    color: var(--dm-accent) !important;
}

/* ============================================
   BORDERS — Subtle
   ============================================ */
.dark .border-slate-200,
.dark .border-slate-300 {
    border-color: var(--dm-border) !important;
}

.dark .border-b,
.dark .border-t,
.dark .border-l,
.dark .border-r {
    border-color: rgba(55, 65, 81, 0.2) !important;
}

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */
/* Primary brand buttons */
.dark .bg-brand {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--dm-accent-glow);
}

.dark .bg-brand:hover {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
    box-shadow: 0 8px 28px rgba(249, 115, 22, 0.35);
    transform: translateY(-1px);
}

/* Outline buttons */
.dark a[class*="border-slate-200"]:not(footer a) {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.dark a[class*="border-slate-200"]:not(footer a):hover {
    border-color: var(--dm-accent) !important;
    color: var(--dm-accent) !important;
}

/* Submit button */
.dark #submitBtn,
.dark button[type="submit"] {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--dm-accent-glow);
}

.dark #submitBtn:hover,
.dark button[type="submit"]:hover {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
    box-shadow: 0 8px 28px rgba(249, 115, 22, 0.35);
    transform: translateY(-1px);
}

/* Theme toggle */
.dark #themeToggle {
    background: rgba(249, 115, 22, 0.08);
    border-color: var(--dm-border) !important;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.06);
}

.dark #themeToggle:hover {
    box-shadow: 0 0 30px var(--dm-accent-glow);
}

/* ============================================
   FORMS
   ============================================ */
.dark input,
.dark textarea,
.dark select {
    background: rgba(20, 29, 51, 0.7) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--dm-text-tertiary) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

.dark select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fb923c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.dark select option {
    background: #141d33;
    color: #f1f5f9;
}

/* FAQ details elements */
.dark details {
    background-color: #1e293b !important;
    border-color: rgba(51, 65, 85, 0.6) !important;
}

/* ============================================
   SHADOWS — Dark mode overrides
   ============================================ */
.dark .shadow-sm,
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
                0 2px 4px -2px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   LINKS
   ============================================ */
.dark a {
    transition: color 0.25s ease;
}

.dark a:hover {
    color: var(--dm-accent) !important;
}

/* ============================================
   SCROLLBAR — Elegant dark scrollbar
   ============================================ */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #0b1120;
}

.dark ::-webkit-scrollbar-thumb {
    background: #1a2642;
    border-radius: 4px;
    border: 2px solid #0b1120;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #2a3a5e;
}

/* ============================================
   IMAGES
   ============================================ */
.dark img:not(.hero-bg-image) {
    border: 1px solid var(--dm-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Keep hero background image clean */
.dark .hero-bg-image {
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   HERO BACKGROUND IMAGE — Show through in dark mode
   ============================================ */
.dark section[id="home"],
.dark section[id="experience"],
.dark section[id="projects"],
.dark section {
    background: transparent !important;
}

.dark section[class*="bg-"] {
    background: var(--dm-bg) !important;
}

/* Replace white overlay with dark gradient so bg image shows through */
.dark section[id="home"] .bg-gradient-to-t {
    background: linear-gradient(to top, #0b1120 0%, rgba(11, 17, 32, 0.55) 50%, rgba(11, 17, 32, 0.15) 100%) !important;
}

/* ============================================
   ACCENT GLOW ON SPECIFIC ELEMENTS
   ============================================ */
.dark .bg-accent\/10,
.dark .bg-accent\/15 {
    background: rgba(249, 115, 22, 0.08) !important;
}

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



/* ============================================
   ADMIN SIDEBAR — Fixed layout with proper stacking
   ============================================ */
.dark #adminSidebar {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(249, 115, 22, 0.3) rgba(17, 24, 39, 0.1) !important;
    background: linear-gradient(180deg, #141d33 0%, #0b1120 100%) !important;
    border-color: var(--dm-border) !important;
}

.dark #adminSidebar::-webkit-scrollbar {
    width: 6px !important;
}

.dark #adminSidebar::-webkit-scrollbar-track {
    background: rgba(17, 24, 39, 0.1) !important;
    border-radius: 3px !important;
}

.dark #adminSidebar::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.3) !important;
    border-radius: 3px !important;
}

.dark #adminSidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.5) !important;
}

.dark #adminSidebar a {
    color: var(--dm-text-secondary);
}

.dark #adminSidebar a:hover,
.dark #adminSidebar a.active {
    background: rgba(249, 115, 22, 0.1);
    color: var(--dm-accent);
}

/* FIXED: Admin sidebar layout with proper stacking and spacing */
.dark .min-h-screen.w-full.lg\:grid {
    display: grid !important;
    grid-template-columns: 20rem 1fr !important;
    grid-template-rows: 1fr !important;
    min-height: 100vh !important;
    position: relative !important;
}

.dark .min-h-screen.w-full.lg\:grid > aside {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 20rem !important;
    max-width: 20rem !important;
    min-width: 20rem !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 20 !important;
    border-right: 1px solid rgba(249, 115, 22, 0.15) !important;
    overflow-y: auto !important;
}

.dark .min-h-screen.w-full.lg\:grid > .flex {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
}

.dark .min-h-screen.w-full.lg\:grid > .flex > main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 10 !important;
}

.dark .min-h-screen.w-full.lg\:grid > .flex > main .mx-auto {
    width: 100% !important;
    max-width: calc(100vw - 22rem) !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.dark .min-h-screen.w-full.lg\:grid > .flex > main > * {
    position: relative !important;
    z-index: 5 !important;
}

/* Grid separation line */
.dark .min-h-screen.w-full.lg\:grid::after {
    content: '' !important;
    position: absolute !important;
    left: 20rem !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 1px !important;
    background: rgba(249, 115, 22, 0.1) !important;
    z-index: 15 !important;
    pointer-events: none !important;
}

/* Admin content containers */
.dark .min-h-screen.w-full.lg\:grid > .flex > main .max-w-7xl,
.dark .min-h-screen.w-full.lg\:grid > .flex > main .max-w-6xl {
    width: 100% !important;
    max-width: calc(100vw - 24rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile override for admin */
@media (max-width: 1024px) {
    .dark .min-h-screen.w-full.lg\:grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .dark .min-h-screen.w-full.lg\:grid > aside {
        display: none !important;
    }

    .dark .min-h-screen.w-full.lg\:grid > .flex {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dark .min-h-screen.w-full.lg\:grid > .flex > main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dark .min-h-screen.w-full.lg\:grid > .flex > main .mx-auto {
        max-width: 100% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .dark .min-h-screen.w-full.lg\:grid > .flex > main .max-w-7xl,
    .dark .min-h-screen.w-full.lg\:grid > .flex > main .max-w-6xl {
        max-width: 100% !important;
    }
}

/* ============================================
   ADMIN TOPBAR
   ============================================ */
.dark #adminTopbar {
    background: linear-gradient(135deg, #141d33 0%, #0b1120 100%) !important;
    border-color: rgba(249, 115, 22, 0.1) !important;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
   SECTION OVERLAP PREVENTION (Admin areas)
   ============================================ */
.dark .min-h-screen .rounded-3xl,
.dark .min-h-screen .rounded-2xl,
.dark .min-h-screen .rounded-xl {
    overflow: hidden !important;
}

/* ============================================
   DEBUG HELPER (remove in production)
   ============================================ */
.dark.debug * {
    outline: 1px solid rgba(249, 115, 22, 0.1);
}

.dark.debug .absolute,
.dark.debug .fixed,
.dark.debug .sticky {
    outline: 2px solid rgba(59, 130, 246, 0.3);
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .dark [class] {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   MOBILE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .dark {
        overflow-x: hidden;
    }
}

/* ── Bottom Nav ULTIMATE FIX ─────────────────────────────────── */
/* Force ALL bottom nav text/icon colors with maximum specificity */
html.dark #floating-bottom-nav a.nav-item,
html.dark #floating-bottom-nav a.nav-item:link,
html.dark #floating-bottom-nav a.nav-item:visited {
    color: #94a3b8 !important;
}
html.dark #floating-bottom-nav a.nav-item .nav-label {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}
html.dark #floating-bottom-nav a.nav-item .nav-icon svg {
    color: #94a3b8 !important;
    filter: none !important;
}
html.dark #floating-bottom-nav a.nav-item.text-brand,
html.dark #floating-bottom-nav a.nav-item.text-brand:link {
    color: #fb923c !important;
}
html.dark #floating-bottom-nav a.nav-item.text-brand .nav-label {
    color: #fb923c !important;
    font-weight: 600 !important;
}
html.dark #floating-bottom-nav a.nav-item.text-brand .nav-icon svg {
    color: #fb923c !important;
}
html.dark #floating-bottom-nav a.nav-item:hover .nav-label {
    color: #f8fafc !important;
}
html.dark #floating-bottom-nav a.nav-item:hover .nav-icon svg {
    color: #fb923c !important;
}