/* Dark Mode & Theme Toggle Styling */

/* Dark Mode Variables Override */
html[data-theme="dark"] {
  --ngg-mineral: #0a1128;
  --ngg-mineral-deep: #001f54;
  --ngg-paper: #0c182e;
  --ngg-midnight: #f2f4ee;
  --ngg-midnight-soft: #d3d8c8;
  --ngg-ink: #f2f4ee;
  --ngg-cobalt: #5c9eff;
  --ngg-cobalt-bright: #7faeff;
  --ngg-ice: #16243d;
  --ngg-ice-deep: #1e3052;
  --ngg-line: rgba(242, 244, 238, 0.1);
  --ngg-line-strong: rgba(242, 244, 238, 0.2);
  --ngg-shadow: rgba(0, 0, 0, 0.5);
  --ngg-focus: #5c9eff;
  color-scheme: dark;
}

/* Force dark background and color on body */
html[data-theme="dark"] body {
  background-color: var(--ngg-mineral);
  color: var(--ngg-ink);
}

/* Ensure components maintain dark appearance */
html[data-theme="dark"] .ngg-header,
html[data-theme="dark"] .ngg-rail,
html[data-theme="dark"] .ngg-topbar,
html[data-theme="dark"] .ngg-foot,
html[data-theme="dark"] .ngg-drop {
  background: #050a14 !important;
  color: #f2f4ee !important;
}

html[data-theme="dark"] .ngg-header__link {
  color: rgba(242, 244, 238, 0.8) !important;
}

html[data-theme="dark"] .ngg-header__link:hover {
  color: var(--ngg-lime) !important;
}

html[data-theme="dark"] .ngg-header__link[aria-current="page"] {
  color: #050a14 !important;
  background: var(--ngg-lime) !important;
}

html[data-theme="dark"] .ngg-panel {
  background: var(--ngg-paper) !important;
  border-color: var(--ngg-line-strong) !important;
}

html[data-theme="dark"] .ngg-scorecard {
  background: var(--ngg-paper) !important;
  border-color: var(--ngg-line-strong) !important;
}

html[data-theme="dark"] .ngg-linkcard {
  background: var(--ngg-paper) !important;
  border-color: var(--ngg-line-strong) !important;
}

html[data-theme="dark"] .ngg-recroute__card {
  background: var(--ngg-paper) !important;
  border-color: var(--ngg-line-strong) !important;
}

html[data-theme="dark"] .ngg-capmap__cell {
  background: var(--ngg-paper) !important;
  border-color: var(--ngg-line-strong) !important;
}

html[data-theme="dark"] .ngg-checkpoint {
  background: var(--ngg-paper) !important;
  border-color: var(--ngg-line-strong) !important;
}

html[data-theme="dark"] .ngg-accordion__trigger {
  color: var(--ngg-midnight) !important;
}

html[data-theme="dark"] .ngg-accordion__panel {
  color: var(--ngg-midnight-soft) !important;
}

html[data-theme="dark"] input:not(.ngg-header__search-input), 
html[data-theme="dark"] select, 
html[data-theme="dark"] textarea {
  background-color: #121f38 !important;
  color: #f2f4ee !important;
  border-color: var(--ngg-line-strong) !important;
}

html[data-theme="dark"] .ngg-weight {
  color: var(--ngg-lime) !important;
}

/* Floating Action Button (Theme Toggle) */
.theme-toggle-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--ngg-lime);
  color: var(--ngg-midnight);
  border: 2px solid var(--ngg-midnight);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle-btn:hover {
  transform: scale(1.1) rotate(15deg);
  background: var(--ngg-lime-deep);
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

.theme-toggle-btn svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  transition: transform 0.3s ease;
}

/* Hide sun/moon depending on active theme */
.theme-toggle-btn .sun-icon {
  display: none;
}

html[data-theme="dark"] .theme-toggle-btn .moon-icon {
  display: none;
}

html[data-theme="dark"] .theme-toggle-btn .sun-icon {
  display: block;
}

/* Search Dropdown Theme overrides */
html[data-theme="dark"] .ngg-header__search-dropdown {
  background: #0a1128 !important;
  border-color: var(--ngg-lime) !important;
}

html[data-theme="dark"] .ngg-header__search-item {
  color: #f2f4ee !important;
}

html[data-theme="dark"] .ngg-header__search-item:hover,
html[data-theme="dark"] .ngg-header__search-item:focus {
  background: var(--ngg-lime) !important;
  color: #050a14 !important;
}