/* ==========================================================================
   Nairaloop — Theme Toggle & Dark Mode
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navbar tools (theme toggle + hamburger)
   -------------------------------------------------------------------------- */
.nl-navbar__tools {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
}

@media (max-width: 991.98px) {
  .nl-navbar__tools {
    position: static;
    transform: none;
    order: 2;
  }

  .nl-navbar .navbar-collapse {
    order: 3;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Theme toggle (icon button)
   -------------------------------------------------------------------------- */
.nl-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--nl-border-subtle);
  background: var(--nl-surface);
  box-shadow: var(--nl-shadow-filter);
  color: var(--nl-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.nl-theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--nl-shadow-search);
  color: var(--nl-brand-purple);
}

.nl-theme-toggle:focus-visible {
  outline: 2px solid var(--nl-primary);
  outline-offset: 2px;
}

[data-theme="dark"] .nl-theme-toggle {
  color: #f5a623;
}

[data-theme="dark"] .nl-theme-toggle:hover {
  color: #ffc94d;
}

/* --------------------------------------------------------------------------
   Dark theme — global tokens
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --nl-brand-purple: #9B6BFF;
  --nl-brand-blue: #6B5CFF;
  --nl-accent-blue: #5B8FFF;
  --nl-primary: #8B7CFF;
  --nl-accent-sky: #4DA3FF;
  --nl-navy: #ECECF5;
  --nl-text-body: #9499B3;
  --nl-text-muted: #6E7390;
  --nl-surface: #1E1E38;
  --nl-surface-hover: #282845;
  --nl-page-bg: #141428;
  --nl-body-bg: #0A0A18;
  --nl-page-border: #1E1E38;
  --nl-gradient-lavender: #3D2B8E;
  --nl-gradient-opacity: 0.35;
  --nl-border-subtle: rgba(255, 255, 255, 0.1);
  --nl-hover-overlay: rgba(255, 255, 255, 0.06);
  --nl-focus-ring: rgba(139, 124, 255, 0.45);
  --nl-shade-opacity: 0.15;

  --nl-shadow-page: 0 8px 40px rgba(0, 0, 0, 0.45);
  --nl-shadow-search: 0 4px 20px rgba(0, 0, 0, 0.35);
  --nl-shadow-filter: 0 2px 8px rgba(0, 0, 0, 0.3);
  --nl-shadow-filter-active: 0 4px 16px rgba(107, 92, 255, 0.4);
  --nl-shadow-chat: 0 2px 12px rgba(0, 0, 0, 0.4);
  --nl-shadow-qr: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* Modal tokens */
  --primary: #8B7CFF;
  --secondary: #4DA3FF;
  --text: #ECECF5;
  --muted: #9499B3;
  --bg: #1A1A32;
  --modal-bg: #16162C;
  --card-bg: #1E1E38;
  --card-border: rgba(255, 255, 255, 0.07);
  --modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --timeline-line: #3A3A58;
  --modal-close-bg: #282845;
}

/* --------------------------------------------------------------------------
   Dark theme — homepage
   -------------------------------------------------------------------------- */
[data-theme="dark"] .nl-page-container {
  background-blend-mode: overlay;
}

[data-theme="dark"] .nl-page-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nl-page-bg);
  opacity: 0.88;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

[data-theme="dark"] .nl-page-container > *:not(.nl-assistant) {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .nl-header,
[data-theme="dark"] .nl-main,
[data-theme="dark"] .nl-footer {
  z-index: 2;
}

[data-theme="dark"] .nl-assistant {
  position: absolute;
  z-index: 2;
}

[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(1.8);
}

[data-theme="dark"] .nl-filter--active:hover {
  background: #5B52F0;
}

[data-theme="dark"] .nl-download__qr {
  background: #262640;
}

[data-theme="dark"] .nl-download__qr img {
  filter: brightness(0.95);
}

[data-theme="dark"] .modal-backdrop {
  --bs-backdrop-opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Dark theme — modal
   -------------------------------------------------------------------------- */
[data-theme="dark"] .nl-modal {
  background: var(--modal-bg);
  box-shadow: var(--modal-shadow);
}

[data-theme="dark"] .nl-modal__glow {
  opacity: 0.22;
}

[data-theme="dark"] .nl-modal__close {
  background: var(--modal-close-bg);
  color: var(--muted);
}

[data-theme="dark"] .nl-modal__close:hover {
  background: rgba(139, 124, 255, 0.15);
  color: var(--primary);
  box-shadow: 0 0 0 4px rgba(139, 124, 255, 0.1);
}

[data-theme="dark"] .nl-timeline::before {
  border-left-color: var(--timeline-line);
}

[data-theme="dark"] .nl-modal__download {
  background: var(--bg);
}

[data-theme="dark"] .nl-feature-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .nl-feature-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  border-color: rgba(139, 124, 255, 0.2);
}

[data-theme="dark"] .nl-modal__download .nl-badge:hover {
  filter: drop-shadow(0 4px 12px rgba(139, 124, 255, 0.35));
}

/* Smooth transitions when switching theme */
.nl-page-container,
.nl-search__bar,
.nl-filter,
.nl-assistant__bubble,
.nl-assistant__contact,
.nl-download__qr,
.nl-modal,
.nl-feature-card,
.nl-modal__download,
.nl-theme-toggle {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}