/* ==========================================================================
   Dark mode — component-level overrides beyond CSS variables
   ========================================================================== */

[data-theme="dark"] body {
  background-image: var(--gradient-radial);
  background-attachment: fixed;
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nx-brand {
  color: #fff;
}

[data-theme="dark"] .premium-card,
[data-theme="dark"] .glass-card {
  background: var(--bg-glass);
}

[data-theme="dark"] .form-control-nx,
[data-theme="dark"] .form-select-nx,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] .table {
  color: var(--text-secondary);
}

[data-theme="dark"] .divider-wave path {
  fill: var(--bg-body);
}

[data-theme="dark"] .btn-white {
  background: var(--gray-100);
}

[data-theme="dark"] .nx-compare-table thead th:not(.featured) {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}

[data-theme="dark"] .dashboard-mock {
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), var(--glow-blue);
}

[data-theme="dark"] .logo-chip img {
  filter: grayscale(1) brightness(0) invert(1) opacity(0.6);
}

[data-theme="dark"] ::selection {
  background: var(--color-cyan);
  color: #06070f;
}

/* Theme toggle swap icon rotation */
.theme-toggle i {
  transition: transform var(--transition-base);
}
.theme-toggle:hover i {
  transform: rotate(20deg);
}