/* Custom Pure CSS Stylesheet for GitHub Pages Static Deployment */

/* Elegant Dark Theme Root Variables */
:root {
  --bg-dark: #050505;
  --bg-card: #0A0A0B;
  --bg-card-alt: #070708;
  --border-dark: #1A1A1A;
  --border-cyan: rgba(0, 255, 209, 0.4);
  --accent-cyan: #00FFD1;
  --accent-purple: #7000FF;
  --accent-amber: #FFBD2E;
  --accent-green: #27C93F;
  --accent-red: #FF5F56;
  --text-main: #E0E0E0;
  --text-muted: #888888;
  --text-subtle: #666666;
}

/* Background Grid Pattern - Elegant Dark Dot Grid */
.bg-grid-pattern {
  background-size: 24px 24px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
}

.bg-radial-glow {
  background: radial-gradient(circle at 50% 0%, rgba(0, 255, 209, 0.08) 0%, rgba(112, 0, 255, 0.04) 40%, transparent 75%);
}

/* Elegant Dark Glassmorphism & Panel Styling */
.glass-panel {
  background: #0A0A0B;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #1A1A1A;
}

.glass-panel:hover {
  border-color: rgba(0, 255, 209, 0.35);
  box-shadow: 0 0 20px -5px rgba(0, 255, 209, 0.15);
}

.glass-pill {
  background: #070708;
  backdrop-filter: blur(8px);
  border: 1px solid #1A1A1A;
}

/* Glowing Border Effect */
.glow-border-cyan {
  border: 1px solid rgba(0, 255, 209, 0.4);
  box-shadow: 0 0 15px -3px rgba(0, 255, 209, 0.25);
}

.glow-border-purple {
  border: 1px solid rgba(112, 0, 255, 0.4);
  box-shadow: 0 0 15px -3px rgba(112, 0, 255, 0.25);
}

/* Text Gradient Accents - High Contrast & Luminous */
.text-gradient-cyan {
  background: linear-gradient(135deg, #00FFD1 0%, #38BDF8 50%, #34D399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #A855F7 0%, #38BDF8 50%, #00FFD1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dynamic Themes & Global Smooth Theme Transitions */
body, 
body *, 
header, 
.glass-panel, 
.glass-pill, 
.system-status-bar, 
#mobile-menu, 
#theme-dropdown-menu,
.tab-btn,
input,
textarea,
select,
button {
  transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}

body.theme-cyber-dark {
  background-color: #050505;
  color: #E2E8F0;
}

body.theme-midnight-violet {
  background-color: #080612;
  color: #E2E8F0;
}
body.theme-midnight-violet .glass-panel {
  background: #100C22;
  border-color: #1F1938;
}
body.theme-midnight-violet .glass-panel:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 20px -5px rgba(168, 85, 247, 0.2);
}

body.theme-matrix-emerald {
  background-color: #03100C;
  color: #ECFDF5;
}
body.theme-matrix-emerald .glass-panel {
  background: #071B15;
  border-color: #0F3328;
}
body.theme-matrix-emerald .glass-panel:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 20px -5px rgba(16, 185, 129, 0.2);
}

body.theme-clean-light {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* Typography Overrides for Light Mode */
body.theme-clean-light h1,
body.theme-clean-light h2,
body.theme-clean-light h3,
body.theme-clean-light h4,
body.theme-clean-light h5,
body.theme-clean-light h6,
body.theme-clean-light .text-white,
body.theme-clean-light .text-slate-100,
body.theme-clean-light .text-slate-200 {
  color: #0F172A !important;
}

body.theme-clean-light .text-slate-300,
body.theme-clean-light .text-slate-400 {
  color: #334155 !important;
}

body.theme-clean-light .text-slate-500,
body.theme-clean-light .text-slate-600 {
  color: #64748B !important;
}

/* Accent Colors - Rich High Contrast for Light Mode */
body.theme-clean-light .text-cyan-400,
body.theme-clean-light .text-cyan-300 {
  color: #0284C7 !important;
}

body.theme-clean-light .text-emerald-400,
body.theme-clean-light .text-emerald-300 {
  color: #059669 !important;
}

body.theme-clean-light .text-purple-400,
body.theme-clean-light .text-purple-300 {
  color: #7C3AED !important;
}

body.theme-clean-light .text-amber-300,
body.theme-clean-light .text-amber-400 {
  color: #D97706 !important;
}

body.theme-clean-light .text-rose-400,
body.theme-clean-light .text-rose-300 {
  color: #E11D48 !important;
}

body.theme-clean-light .text-gradient-cyan {
  background: linear-gradient(135deg, #0284C7 0%, #059669 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.theme-clean-light .text-gradient-purple {
  background: linear-gradient(135deg, #7C3AED 0%, #0284C7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Glass Panels, Cards & Glass Pills */
body.theme-clean-light .glass-panel,
body.theme-clean-light .glass-pill {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.05) !important;
}

body.theme-clean-light .glass-panel:hover {
  border-color: #0284C7 !important;
  box-shadow: 0 8px 25px -5px rgba(2, 132, 199, 0.15) !important;
}

/* Navigation Header & Top System Bar */
body.theme-clean-light header,
body.theme-clean-light .system-status-bar,
body.theme-clean-light #mobile-menu,
body.theme-clean-light #theme-dropdown-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-clean-light #theme-dropdown-menu {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

body.theme-clean-light #theme-dropdown-menu button {
  color: #0F172A !important;
}

body.theme-clean-light #theme-dropdown-menu button:hover {
  background-color: #F1F5F9 !important;
}

/* Background Utility Classes in Light Mode */
body.theme-clean-light .bg-slate-900,
body.theme-clean-light .bg-slate-900\/60,
body.theme-clean-light .bg-slate-900\/80,
body.theme-clean-light .bg-slate-900\/90,
body.theme-clean-light .bg-slate-950,
body.theme-clean-light .bg-slate-950\/60,
body.theme-clean-light .bg-slate-950\/80,
body.theme-clean-light .bg-slate-950\/95,
body.theme-clean-light .bg-\[\#0A0A0B\],
body.theme-clean-light .bg-\[\#0A0A0B\]\/80,
body.theme-clean-light .bg-\[\#0A0A0B\]\/90,
body.theme-clean-light .bg-\[\#070708\] {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* Category & Status Badges in Light Mode */
body.theme-clean-light .bg-emerald-950,
body.theme-clean-light .bg-emerald-950\/60,
body.theme-clean-light .bg-emerald-950\/80,
body.theme-clean-light .bg-emerald-950\/20 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #047857 !important;
}

body.theme-clean-light .bg-cyan-950,
body.theme-clean-light .bg-cyan-950\/60,
body.theme-clean-light .bg-cyan-950\/80,
body.theme-clean-light .bg-cyan-950\/20,
body.theme-clean-light .bg-cyan-950\/30 {
  background-color: #F0F9FF !important;
  border-color: #BAE6FD !important;
  color: #0369A1 !important;
}

body.theme-clean-light .bg-purple-950,
body.theme-clean-light .bg-purple-950\/60,
body.theme-clean-light .bg-purple-950\/80,
body.theme-clean-light .bg-purple-950\/20 {
  background-color: #F3E8FF !important;
  border-color: #DDD6FE !important;
  color: #6B21A8 !important;
}

body.theme-clean-light .bg-rose-950\/20,
body.theme-clean-light .bg-rose-950\/40 {
  background-color: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  color: #BE123C !important;
}

/* Command Palette Modal (#command-palette) in Light Mode */
body.theme-clean-light #command-palette {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

body.theme-clean-light #command-palette > div {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
}

body.theme-clean-light #command-palette #palette-search {
  color: #0F172A !important;
}

body.theme-clean-light #command-palette #palette-search::placeholder {
  color: #64748B !important;
}

body.theme-clean-light #command-palette .palette-item {
  color: #0F172A !important;
}

body.theme-clean-light #command-palette .palette-item:hover {
  background-color: #F1F5F9 !important;
}

body.theme-clean-light #command-palette .palette-item span:last-child {
  background-color: #E0F2FE !important;
  border-color: #BAE6FD !important;
  color: #0284C7 !important;
}

body.theme-clean-light #command-palette div.border-t {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}

/* Project Modal (#project-modal) in Light Mode */
body.theme-clean-light #project-modal {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

body.theme-clean-light #project-modal > div {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
}

body.theme-clean-light #project-modal-content * {
  color: inherit;
}

body.theme-clean-light #project-modal-content h2 {
  color: #0F172A !important;
}

/* Tab Buttons in Light Mode */
body.theme-clean-light .tab-btn {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}

body.theme-clean-light .tab-btn:hover {
  border-color: #0284C7 !important;
  color: #0284C7 !important;
}

body.theme-clean-light .tab-btn.active {
  background-color: #E0F2FE !important;
  border-color: #0284C7 !important;
  color: #0284C7 !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.15) !important;
}

/* Inputs, Textareas and Selects */
body.theme-clean-light input,
body.theme-clean-light textarea,
body.theme-clean-light select {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-clean-light input::placeholder,
body.theme-clean-light textarea::placeholder {
  color: #94A3B8 !important;
}

/* Dark CLI Elements (Terminal & Code Playground) - Kept Dark & High Contrast */
body.theme-clean-light .terminal-window,
body.theme-clean-light #code-playground-output,
body.theme-clean-light #code-playground-input {
  background-color: #090D16 !important;
  border-color: #1E293B !important;
  color: #E2E8F0 !important;
}

body.theme-clean-light .terminal-window *,
body.theme-clean-light #code-playground-output *,
body.theme-clean-light #code-playground-input * {
  color: inherit;
}

body.theme-clean-light .terminal-window .text-cyan-400,
body.theme-clean-light #code-playground-output .text-cyan-300 {
  color: #38BDF8 !important;
}

body.theme-clean-light .terminal-window .text-emerald-400,
body.theme-clean-light #code-playground-output .text-emerald-400 {
  color: #34D399 !important;
}

body.theme-clean-light .terminal-window .text-amber-400 {
  color: #FBBF24 !important;
}

body.theme-clean-light .terminal-window .text-slate-400,
body.theme-clean-light .terminal-window .text-slate-300,
body.theme-clean-light .terminal-window .text-slate-200,
body.theme-clean-light .terminal-window .text-slate-100 {
  color: #CBD5E1 !important;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #050505;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #1A1A1A;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #00FFD1;
}

/* Keyframe Animations */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.animate-pulse-glow {
  animation: pulseGlow 4s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Timeline vertical line glowing node */
.timeline-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 255, 209, 0.25);
  z-index: -1;
}

/* Interactive Filter Tabs */
.tab-btn.active {
  background: rgba(0, 255, 209, 0.1);
  color: #00FFD1;
  border-color: rgba(0, 255, 209, 0.5);
  box-shadow: 0 0 12px rgba(0, 255, 209, 0.2);
}

/* System Bar Badge */
.system-status-bar {
  background: rgba(10, 10, 11, 0.85);
  border-bottom: 1px solid #1A1A1A;
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}