/**
 * Dark Mode Background & Z-Index Fixes
 * Ensures consistent glassmorphic backgrounds throughout the site in dark mode
 */

/* Site Header - Dark Mode Background */
:root[data-theme="dark"] .site-header.scrolled .container {
  background: rgba(15, 22, 41, 0.7) !important;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 16px 48px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .site-header.pure .container {
  background: rgba(15, 22, 41, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* Philosophy Cards - Dark Mode Background */
:root[data-theme="dark"] .philosophy-item {
  background: rgba(15, 22, 41, 0.6) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Kind Words Section - Dark Mode Background */
:root[data-theme="dark"] .kind-words {
  background: var(--surface-1);
  position: relative;
}

:root[data-theme="dark"] .testimonial-card,
:root[data-theme="dark"] .testimonial-card-mini {
  background: rgba(15, 22, 41, 0.5) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 4px 16px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] .testimonial-card-mini:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4),
              0 8px 24px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Beautiful dark mode gradient overlay on hover */
:root[data-theme="dark"] .testimonial-card-mini::before {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(59, 130, 246, 0.15) 25%,
    rgba(16, 185, 129, 0.15) 50%,
    rgba(245, 158, 11, 0.15) 75%,
    rgba(236, 72, 153, 0.15) 100%) !important;
  background-size: 400% 400%;
}

:root[data-theme="dark"] .testimonial-skill {
  background: rgba(15, 22, 41, 0.7) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}

:root[data-theme="dark"] .testimonial-card-mini:hover .testimonial-skill {
  background: rgba(15, 22, 41, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="dark"] .testimonial-avatar {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
              0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="dark"] .testimonial-card-mini:hover .testimonial-avatar {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4),
              0 0 0 4px rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="dark"] .testimonial-author {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Case Studies / Selected Work - Dark Mode Background */
:root[data-theme="dark"] .case-studies {
  background: var(--surface-1);
}

:root[data-theme="dark"] .work-card {
  background: rgba(15, 22, 41, 0.5) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

:root[data-theme="dark"] .work-card-overlay {
  background: linear-gradient(
    to top,
    rgba(15, 22, 41, 0.95) 0%,
    rgba(15, 22, 41, 0.8) 50%,
    rgba(15, 22, 41, 0.4) 80%,
    transparent 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Experience Section - Dark Mode Background */
:root[data-theme="dark"] .experience {
  background: var(--surface-1);
}

:root[data-theme="dark"] .timeline-item {
  background: rgba(15, 22, 41, 0.5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Side Projects Section */
:root[data-theme="dark"] .side-projects {
  background: var(--surface-1);
}

:root[data-theme="dark"] .side-project-card {
  background: rgba(15, 22, 41, 0.5) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] .side-project-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="dark"] .side-project-card::before {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.2) 0%,
    rgba(59, 130, 246, 0.2) 25%,
    rgba(16, 185, 129, 0.2) 50%,
    rgba(245, 158, 11, 0.2) 75%,
    rgba(236, 72, 153, 0.2) 100%) !important;
  background-size: 400% 400%;
}

:root[data-theme="dark"] .project-tag {
  background: rgba(15, 22, 41, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
}

:root[data-theme="dark"] .side-project-card:hover .project-tag {
  background: rgba(15, 22, 41, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

:root[data-theme="dark"] .project-card-footer {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(15, 22, 41, 0.5) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}

:root[data-theme="dark"] .project-meta-grid {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Insights / Articles Section */
:root[data-theme="dark"] .insights {
  background: var(--surface-1);
}

:root[data-theme="dark"] .article-card {
  background: rgba(15, 22, 41, 0.5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* CTA Section */
:root[data-theme="dark"] .cta-section {
  background: var(--surface-1);
}

/* Footer */
:root[data-theme="dark"] .site-footer {
  background: var(--surface-1);
}

/* Navigation Dropdown - Dark Mode */
:root[data-theme="dark"] .nav-dropdown {
  background: rgba(15, 22, 41, 0.95);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .nav-dropdown-item {
  background: transparent;
  transition: background 0.2s ease;
}

:root[data-theme="dark"] .nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Ensure consistent backdrop blur support */
:root[data-theme="dark"] [class*="card"],
:root[data-theme="dark"] [class*="item"],
:root[data-theme="dark"] [class*="panel"] {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

/* Modal/Dialog backgrounds in dark mode */
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .dialog,
:root[data-theme="dark"] .popup {
  background: rgba(15, 22, 41, 0.95);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Previous Work Section */
:root[data-theme="dark"] .previous-work-card {
  background: rgba(15, 22, 41, 0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Chatbot Section */
:root[data-theme="dark"] .chatbot-prompts {
  background: var(--surface-1);
}

:root[data-theme="dark"] .snipe-prompt-card {
  background: rgba(15, 22, 41, 0.5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Z-Index Management - Ensure proper layering */
:root[data-theme="dark"] .site-header {
  z-index: 2000;
}

:root[data-theme="dark"] .hero {
  z-index: 1;
  position: relative;
}

:root[data-theme="dark"] .hero-bg-shader {
  z-index: 0;
}

:root[data-theme="dark"] .hero-card {
  z-index: 10;
  position: relative;
}

/* Ensure sections have proper stacking context */
:root[data-theme="dark"] section {
  position: relative;
  z-index: 1;
}

/* Fix for work card previews */
:root[data-theme="dark"] .work-card-preview {
  background: rgba(15, 22, 41, 0.95);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .case-story-card {
  background: rgba(15, 22, 41, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Hero Terminal Window - Keep it bright */
:root[data-theme="dark"] .hero-terminal-window {
  background: rgba(15, 22, 41, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure all glass effects are visible */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root[data-theme="dark"] .glass-effect,
  :root[data-theme="dark"] [class*="glass"] {
    background: rgba(15, 22, 41, 0.6);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  :root[data-theme="dark"] .site-header .container {
    background: rgba(15, 22, 41, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}