/* Dark mode overrides for Bootstrap / Rails pages */

html.dark body {
  background-color: #0a0a0a;
  color: #fafafa;
}

/* Navbar */
html.dark #menu {
  background-color: #171717 !important;
  border-bottom-color: #262626;
}

/* Logo: swap light/dark variants */
.logo-dark {
  display: none;
}

html.dark .logo-light {
  display: none;
}

html.dark .logo-dark {
  display: inline;
}

/* Avatar placeholder: swap light/dark variants */
.avatar-dark {
  display: none;
}

html.dark .avatar-light {
  display: none;
}

html.dark .avatar-dark {
  display: inline;
}

html.dark #menu .navbar-brand a,
html.dark #menu .nav-link {
  color: #d4d4d4;
}

html.dark #menu .nav-link:hover,
html.dark #menu .nav-link.active {
  color: #fafafa;
}

html.dark #menu .navbar-toggler {
  border-color: #404040;
  filter: invert(1);
}

html.dark .logout {
  color: #d4d4d4;
  border-color: #404040;
}

html.dark .logout:hover {
  color: #fafafa;
  background-color: #262626;
  border-color: #525252;
}

/* Content area */
html.dark #content {
  color: #fafafa;
}

/* Cards */
html.dark .card,
html.dark .card-padding {
  background-color: #171717 !important;
  border-color: #262626 !important;
  color: #fafafa;
}

/* Tables */
html.dark .table {
  --bs-table-bg: transparent;
  --bs-table-color: #d4d4d4;
  --bs-table-border-color: #262626;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  color: #d4d4d4;
  border-color: #262626;
}

html.dark .table thead th {
  border-color: #404040;
  color: #fafafa;
  background-color: transparent;
}

html.dark .table td,
html.dark .table th {
  border-color: #262626;
  background-color: transparent;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  background-color: rgba(255, 255, 255, 0.03);
}

html.dark .table-hover > tbody > tr:hover {
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Forms */
html.dark .form-control,
html.dark .form-select {
  background-color: #171717;
  border-color: #404040;
  color: #fafafa;
}

html.dark .form-control:focus,
html.dark .form-select:focus {
  background-color: #1a1a1a;
  border-color: #525252;
  color: #fafafa;
}

html.dark .form-control::placeholder {
  color: #737373;
}

/* Buttons */
html.dark .btn-outline-dark {
  color: #d4d4d4;
  border-color: #525252;
}

html.dark .btn-outline-dark:hover {
  color: #171717;
  background-color: #d4d4d4;
  border-color: #d4d4d4;
}

html.dark .btn-outline-danger {
  color: #f87171;
  border-color: #dc2626;
}

html.dark .btn-outline-danger:hover {
  color: #fafafa;
  background-color: #7f1d1d;
  border-color: #f87171;
}

html.dark .btn-outline-secondary {
  color: #d4d4d4;
  border-color: #404040;
}

html.dark .btn-outline-secondary:hover {
  color: #fafafa;
  background-color: #262626;
  border-color: #525252;
}

html.dark .btn-outline-primary {
  color: #60a5fa;
  border-color: #3b82f6;
}

html.dark .btn-outline-primary:hover {
  color: #fafafa;
  background-color: #1e3a5f;
  border-color: #60a5fa;
}

html.dark .btn-primary {
  background-color: #fafafa;
  border-color: #fafafa;
  color: #171717;
}

html.dark .btn-primary:hover {
  background-color: #d4d4d4;
  border-color: #d4d4d4;
  color: #171717;
}

/* Dropdowns */
html.dark .dropdown-menu {
  background-color: #171717;
  border-color: #262626;
}

html.dark .dropdown-item {
  color: #d4d4d4;
}

html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
  background-color: #262626;
  color: #fafafa;
}

html.dark .dropdown-item.active {
  background-color: #262626;
  color: #fafafa;
}

/* Popovers */
html.dark .popover {
  background-color: #171717;
  border-color: #262626;
}

html.dark .popover-body {
  color: #d4d4d4;
}

html.dark .popover .popover-arrow::before {
  border-bottom-color: #262626;
}

html.dark .popover .popover-arrow::after {
  border-bottom-color: #171717;
}

/* Badges */
html.dark .badge.bg-light {
  background-color: #262626 !important;
  color: #d4d4d4 !important;
}

/* Links (scoped to Rails content area — React SPA uses its own Tailwind tokens) */
html.dark #content a {
  color: #60a5fa;
}

html.dark #content a:hover {
  color: #93bbfd;
}

/* Navbar links should stay neutral */
html.dark #menu a {
  color: #d4d4d4;
}

html.dark #menu a:hover,
html.dark #menu a.active {
  color: #fafafa;
}

/* Alerts */
html.dark .alert-info {
  background-color: #1e3a5f;
  border-color: #2563eb;
  color: #93bbfd;
}

html.dark .alert-danger {
  background-color: #451a1a;
  border-color: #dc2626;
  color: #fca5a5;
}

html.dark .alert-success {
  background-color: #14532d;
  border-color: #16a34a;
  color: #86efac;
}

/* Homepage / login */
html.dark .homepage {
  color: #fafafa;
}

html.dark .login-modal-content {
  color: #fafafa;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 8px;
  color: #555;
  font-size: 1.2rem;
  line-height: 1;
  vertical-align: middle;
}

.theme-toggle:hover {
  color: #111;
}

html.dark .theme-toggle {
  color: #a3a3a3;
}

html.dark .theme-toggle:hover {
  color: #fafafa;
}

/* Sun icon: hidden in light mode, shown in dark mode */
.theme-icon-sun {
  display: none;
}

html.dark .theme-icon-sun {
  display: inline;
}

/* Moon icon: shown in light mode, hidden in dark mode */
html.dark .theme-icon-moon {
  display: none;
}