/* ============================================
   GOSUNCN — Light/Dark Theme System
   Shared across all pages
   ============================================ */

/* === THEME TOGGLE BUTTON === */
/* Ensure nav menu doesn't overlap with toggle */
.nav-menu { margin-right: 64px; }

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-line);
  border-radius: 100px;
  padding: 3px;
  cursor: pointer;
  transition: all var(--t, 0.35s cubic-bezier(0.4,0,0.2,1));
  flex-shrink: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 28px;
  overflow: hidden;
  z-index: 1001;
}
.theme-toggle:hover {
  background: rgba(0,217,255,0.08);
  border-color: rgba(0,217,255,0.2);
}
.theme-toggle-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF, #E8E8E8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.35s ease;
  position: absolute;
  left: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.theme-toggle-thumb svg {
  width: 14px;
  height: 14px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Sun icon (visible in dark mode — click to go light) */
.theme-toggle-thumb .icon-sun {
  color: #FFB347;
  opacity: 1;
}
/* Moon icon (visible in light mode — click to go dark) */
.theme-toggle-thumb .icon-moon {
  color: #6366F1;
  opacity: 0;
  position: absolute;
}

/* === DARK MODE (default) === */
.theme-toggle-thumb {
  transform: translateX(0);
}

/* === LIGHT MODE === */
[data-theme="light"] {
  /* Core backgrounds */
  --bg-void: #EDF1F8;
  --bg-deep: #FFFFFF;
  --bg-panel: #FFFFFF;
  --bg-card: transparent;
  --bg-card-hover: rgba(0,149,255,0.05);

  /* Text colors — inverted */
  --text-white: #0A1628;
  --text-mid: rgba(10,22,40,0.68);
  --text-dim: rgba(10,22,40,0.45);

  /* Borders */
  --border-glow: rgba(0,149,255,0.15);
  --border-line: rgba(10,30,60,0.08);

  /* Accent colors — slightly darkened for contrast on light bg */
  --accent-teal: #00A88E;
  --accent-teal-d: #008F76;
  --accent-cyan: #0095CC;
  --accent-blue: #0077DD;
  --accent-amber: #D68A00;
  --accent-orange: #CC7000;
  --accent-green: #00B57C;
  --accent-red: #E63950;
  --accent-violet: #7C5FCC;
  --accent-violet-d: #6D4FB8;
}

/* === LIGHT MODE: Toggle thumb position === */
[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(28px);
  background: linear-gradient(135deg, #1A1A2E, #16213E);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
[data-theme="light"] .theme-toggle-thumb .icon-sun {
  opacity: 0;
}
[data-theme="light"] .theme-toggle-thumb .icon-moon {
  opacity: 1;
}

/* === LIGHT MODE: Navigation === */
[data-theme="light"] .nav {
  background: rgba(255,255,255,0.90);
  border-bottom-color: rgba(10,30,60,0.08);
}
[data-theme="light"] .nav-dd {
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,149,255,0.12);
  box-shadow: 0 20px 60px rgba(10,30,60,0.12), 0 0 30px rgba(0,149,255,0.04);
}
[data-theme="light"] .nav-dd::before {
  background: rgba(255,255,255,0.98);
  border-top-color: rgba(0,149,255,0.12);
  border-left-color: rgba(0,149,255,0.12);
}
[data-theme="light"] .nav-dd-item:hover .nav-dd-icon svg {
  color: #FFFFFF;
}
[data-theme="light"] .theme-toggle {
  background: rgba(10,30,60,0.05);
  border-color: rgba(10,30,60,0.1);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(0,149,255,0.06);
  border-color: rgba(0,149,255,0.2);
}

/* === LIGHT MODE: Atmosphere & Grid === */
[data-theme="light"] .atmosphere {
  background:
    radial-gradient(ellipse 1200px 600px at 30% 10%, rgba(0,149,255,0.05), transparent),
    radial-gradient(ellipse 900px 500px at 80% 60%, rgba(0,217,180,0.03), transparent);
}
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(10,30,60,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,30,60,0.03) 1px, transparent 1px);
}

/* === LIGHT MODE: Hero === */
[data-theme="light"] .hero-slideshow::after {
  background: linear-gradient(180deg, rgba(237,241,248,0.75) 0%, rgba(237,241,248,0.85) 50%, rgba(237,241,248,0.92) 100%);
}
[data-theme="light"] .hero h1 .grad-cyan {
  background: linear-gradient(135deg, #0A1628, var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .hero h1 .grad-teal {
  background: linear-gradient(135deg, #0A1628, var(--accent-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .hero-caption-text {
  color: rgba(10,22,40,0.55);
}

/* === LIGHT MODE: Cards & Components === */
[data-theme="light"] .sol-card:hover {
  background: rgba(10,30,60,0.03);
}
[data-theme="light"] .sol-card-teal .sol-pill { background: rgba(0,168,142,0.1); color: var(--accent-teal); }
[data-theme="light"] .sol-card-cyan .sol-pill { background: rgba(0,149,204,0.1); color: var(--accent-cyan); }
[data-theme="light"] .sol-card-amber .sol-pill { background: rgba(214,138,0,0.1); color: var(--accent-amber); }
[data-theme="light"] .sol-card-violet .sol-pill { background: rgba(124,95,204,0.1); color: var(--accent-violet); }

/* === LIGHT MODE: Footer === */
[data-theme="light"] .footer {
  border-top-color: rgba(10,30,60,0.08);
}
[data-theme="light"] .footer-bottom {
  border-top-color: rgba(10,30,60,0.08);
}
[data-theme="light"] .footer-contact-icon {
  background: rgba(0,149,255,0.06);
  border-color: rgba(0,149,255,0.12);
}

/* === LIGHT MODE: Hardcoded dark backgrounds override === */
/* Cards using rgba(8,20,40,0.06) gradient backgrounds */
[data-theme="light"] .ivs-scope .adv-card,
[data-theme="light"] .its-scope .adv-card,
[data-theme="light"] .oms-scope .adv-card,
[data-theme="light"] .cases-scope .adv-card {
  background: linear-gradient(135deg, rgba(0,149,255,0.03), rgba(10,30,60,0.02))!important;
}

/* Hero badge panels with dark backgrounds */
[data-theme="light"] .hero-panel {
  background: rgba(255,255,255,0.6)!important;
  border-color: rgba(10,30,60,0.08)!important;
}

/* Section heading gradient text */
[data-theme="light"] .sol-heading h2 .ac-teal { color: var(--accent-teal); }
[data-theme="light"] .sol-heading h2 .ac-cyan { color: var(--accent-cyan); }
[data-theme="light"] .sol-heading h2 .ac-amber { color: var(--accent-amber); }
[data-theme="light"] .sol-heading h2 .ac-violet { color: var(--accent-violet); }

/* Various dark color references → light equivalents */
[data-theme="light"] .nav-dd-item:hover .nav-dd-icon svg { color: #FFFFFF; }

/* Hero overlay card backgrounds with rgba(8,20,40,0.7) or similar */
[data-theme="light"] .hero-overlay,
[data-theme="light"] .hero-info-card {
  background: rgba(255,255,255,0.85)!important;
  backdrop-filter: blur(8px);
  border-color: rgba(10,30,60,0.08)!important;
}

/* Hero section dark panel backgrounds (rgba(8,20,40,0.35)) */
[data-theme="light"] .hero-bg-panel {
  background: rgba(226,232,242,0.5)!important;
  border-color: rgba(10,30,60,0.06)!important;
}

/* Text that uses #050B18 as color → invert */
[data-theme="light"] .stat-num-dark,
[data-theme="light"] .badge-text-dark {
  color: var(--text-white)!important;
}

/* Timeline & project card backgrounds */
[data-theme="light"] .timeline-card,
[data-theme="light"] .project-card,
[data-theme="light"] .platform-card {
  background: rgba(255,255,255,0.8)!important;
  border-color: rgba(10,30,60,0.08)!important;
}

/* Topology diagram backgrounds */
[data-theme="light"] .topo-layer,
[data-theme="light"] .topo-node {
  background: rgba(255,255,255,0.9)!important;
  border-color: rgba(10,30,60,0.1)!important;
}

/* Lightbox backgrounds */
[data-theme="light"] .lightbox-content {
  background: #FFFFFF!important;
  border-color: rgba(10,30,60,0.1)!important;
}

/* World map dots */
[data-theme="light"] .worldmap-dots {
  opacity: 0.5;
}

/* Monitoring terminal panels in hero sections */
[data-theme="light"] .monitor-panel {
  background: rgba(255,255,255,0.7)!important;
  border-color: rgba(10,30,60,0.06)!important;
}

/* === RESPONSIVE: Toggle on mobile === */
@media (max-width: 768px) {
  .nav-menu { margin-right: 0; }
  .theme-toggle {
    width: 48px;
    height: 24px;
  }
  .theme-toggle-thumb {
    width: 18px;
    height: 18px;
    left: 3px;
  }
  .theme-toggle-thumb svg {
    width: 12px;
    height: 12px;
  }
  [data-theme="light"] .theme-toggle-thumb {
    transform: translateX(24px);
  }
}