/*--------------------------------------------------------------
# AltiusOne Dark Mode
# Overrides CSS variables from main.css when [data-theme="dark"]
--------------------------------------------------------------*/

/* Transition for smooth theme switching */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .header .header-container,
html[data-theme="dark"] .card,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .pricing-card {
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ---- Core Variables ---- */
html[data-theme="dark"] {
  --background-color: #0f1923;
  --default-color: #c8cdd3;
  --heading-color: #e8eaed;
  --accent-color: #0aa395;
  --surface-color: #162231;
  --contrast-color: #ffffff;

  --nav-color: #c8cdd3;
  --nav-hover-color: #0aa395;
  --nav-mobile-background-color: #162231;
  --nav-dropdown-background-color: #1a2b3d;
  --nav-dropdown-color: #c8cdd3;
  --nav-dropdown-hover-color: #0aa395;
}

/* Light-background sections in dark mode */
html[data-theme="dark"] .light-background {
  --background-color: #13202e;
  --surface-color: #1a2b3d;
}

/* Dark-background sections (CTA, etc.) stay vivid */
html[data-theme="dark"] .dark-background {
  --background-color: #065e56;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #077a6f;
  --contrast-color: #ffffff;
}

/* ---- Header ---- */
html[data-theme="dark"] .header .header-container {
  background: rgba(22, 34, 49, 0.98);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .scrolled .header .header-container {
  background: rgba(22, 34, 49, 0.98);
}

/* ---- Cards ---- */
html[data-theme="dark"] .card {
  background: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .card .text-muted {
  color: #8a95a3 !important;
}

/* ---- Pricing ---- */
html[data-theme="dark"] .pricing-card {
  background: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .pricing-card.popular {
  background: linear-gradient(135deg, #0a3d38 0%, #162231 100%);
  border-color: var(--accent-color);
}

html[data-theme="dark"] .pricing-card .btn-primary {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

/* Billing toggle */
html[data-theme="dark"] .bg-white {
  background: var(--surface-color) !important;
  color: var(--default-color);
}

/* ---- FAQ ---- */
html[data-theme="dark"] .faq-item {
  background: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ---- Stats row ---- */
html[data-theme="dark"] .stat-item {
  background: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ---- Footer ---- */
html[data-theme="dark"] .footer {
  --background-color: #0b1620;
  --default-color: #8a95a3;
  --heading-color: #e8eaed;
}

html[data-theme="dark"] .footer .copyright {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ---- Form controls ---- */
html[data-theme="dark"] .form-control {
  background-color: #1a2b3d;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--default-color);
}

html[data-theme="dark"] .form-control::placeholder {
  color: #5a6a7a;
}

html[data-theme="dark"] .form-control:focus {
  background-color: #1e3244;
  border-color: var(--accent-color);
  color: var(--heading-color);
}

/* ---- Info box ---- */
html[data-theme="dark"] .info-box {
  background: var(--surface-color);
}

/* ---- Scroll top ---- */
html[data-theme="dark"] .scroll-top {
  background: var(--accent-color);
}

/* ---- Hero customers badge ---- */
html[data-theme="dark"] .customers-badge {
  background: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Company badge ---- */
html[data-theme="dark"] .company-badge {
  background: rgba(10, 163, 149, 0.12);
  color: #0dd4be;
}

/* ---- Section titles ---- */
html[data-theme="dark"] .section-title p {
  color: #8a95a3;
}

/* ---- Logo swap ---- */
img.logo-dark {
  display: none !important;
}

html[data-theme="dark"] img.logo-light {
  display: none !important;
}
html[data-theme="dark"] img.logo-dark {
  display: inline !important;
}

/* ---- Theme Toggle Button ---- */
.theme-toggle {
  background: none;
  border: 1.5px solid rgba(128, 128, 128, 0.3);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--default-color);
  font-size: 1.1rem;
  margin-left: 12px;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: scale(1.08);
}

.theme-toggle .bi-moon-fill { display: none; }
.theme-toggle .bi-sun-fill { display: none; }

/* Light mode: show moon (to switch to dark) */
html:not([data-theme="dark"]) .theme-toggle .bi-moon-fill { display: inline; }
html:not([data-theme="dark"]) .theme-toggle .bi-sun-fill { display: none; }

/* Dark mode: show sun (to switch to light) */
html[data-theme="dark"] .theme-toggle .bi-moon-fill { display: none; }
html[data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline; }

/* ---- Hero Graph Container ---- */
.hero-graph {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-graph svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 991px) {
  .hero-graph {
    min-height: 320px;
    margin-top: 2rem;
  }
}

@media (max-width: 575px) {
  .hero-graph {
    min-height: 260px;
  }
}

/* ---- Code blocks (download page, community) ---- */
html[data-theme="dark"] .card pre,
html[data-theme="dark"] .info-card pre {
  background: #0b1620 !important;
}

html[data-theme="dark"] .info-card {
  background: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .info-card [style*="color:#555"],
html[data-theme="dark"] .info-card p {
  color: #8a95a3 !important;
}

/* ---- Platform cards (download) ---- */
html[data-theme="dark"] .platform-card {
  background: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .platform-card.detected {
  border-color: var(--accent-color);
  box-shadow: 0 0.5rem 1.5rem rgba(10, 163, 149, 0.15);
}

html[data-theme="dark"] .platform-card:hover {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

/* ---- Checksum text ---- */
html[data-theme="dark"] .checksum-text {
  color: #5a6a7a;
}

/* ---- Alert banners ---- */
html[data-theme="dark"] .alert[style*="background:#f0faf8"] {
  background: rgba(10, 163, 149, 0.08) !important;
  border-color: rgba(10, 163, 149, 0.2) !important;
}

/* ---- Pricing card - popular badge ---- */
html[data-theme="dark"] .popular-badge {
  background: var(--accent-color);
}

/* ---- Contact form info-box ---- */
html[data-theme="dark"] .info-box {
  color: var(--default-color);
}

html[data-theme="dark"] .info-box .icon-box {
  background: rgba(10, 163, 149, 0.12);
}

/* ---- Select form control ---- */
html[data-theme="dark"] select.form-control {
  background-color: #1a2b3d;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--default-color);
}

html[data-theme="dark"] select.form-control option {
  background: #1a2b3d;
  color: var(--default-color);
}

/* ---- Badges ---- */
html[data-theme="dark"] .badge.bg-secondary {
  background: #2a3a4a !important;
}

/* ---- Generic text color overrides for inline styles ---- */
html[data-theme="dark"] [style*="color:#555"] {
  color: #8a95a3 !important;
}

html[data-theme="dark"] [style*="color:#6c757d"] {
  color: #6a7a8a !important;
}