/* ============================================= */
/*  WGPortal – Custom Dark Theme + #e70033 Red   */
/*  Easy to edit – everything in one place       */
/* ============================================= */

/* Primary color override (your exact red) */
:root {
  --bs-primary: #e70033;
  --bs-primary-rgb: 231, 0, 51;
}

/* Force red on danger buttons & text */
.btn-danger,
.btn-outline-danger:hover,
.text-danger,
.accordion-button:focus {
  --bs-btn-bg: #e70033;
  --bs-btn-border-color: #e70033;
  --bs-btn-hover-bg: #cc002b;
  --bs-btn-active-bg: #b80028;
  color: #ffffff !important;
}

/* Dark mode defaults */
body {
  background-color: #121212;
  color: #e0e0e0;
  min-height: 100vh;
}

/* Light mode overrides */
body[data-bs-theme="light"] {
  background-color: #f8f9fa;
  color: #212529;
}

/* Navbar */
.navbar {
  background-color: #1e1e1e !important;
  border-bottom: 1px solid #333;
}
body[data-bs-theme="light"] .navbar {
  background-color: #343a40 !important;
}

/* Accordion (nice dark look) */
.accordion-item {
  background-color: #1e1e1e;
  border: 1px solid #333;
}
.accordion-button {
  background-color: #1e1e1e;
  color: #e0e0e0;
}
.accordion-button:not(.collapsed) {
  background-color: #2a2a2a;
  color: #ffffff;
}

/* Code blocks */
pre code,
code {
  background-color: #000 !important;
  color: #0f0 !important; /* green text like classic WireGuard config */
}

/* Modals in dark mode */
.modal-content {
  background-color: #1e1e1e;
  color: #e0e0e0;
}
.modal-header,
.modal-footer {
  border-color: #444;
}

/* Smooth transitions */
*, *::before, *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
}
.theme-toggle:hover {
  opacity: 1;
}

/* Footer */
footer {
  background-color: #000 !important;
}


/* ========= ULTRA-RELIABLE LIGHT MODE – WHITE BG + BLACK TEXT ========= */
html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Force absolutely EVERYTHING to white background in light mode */
html[data-bs-theme="light"] .bg-dark,
html[data-bs-theme="light"] .navbar,
html[data-bs-theme="light"] .card,
html[data-bs-theme="light"] .accordion-item,
html[data-bs-theme="light"] .modal-content,
html[data-bs-theme="light"] .table,
html[data-bs-theme="light"] pre,
html[data-bs-theme="light"] footer {
  background-color: #bababa !important;
  color: #000000 !important;
  border-color: #dee2e6 !important;
}

/* Navbar – light gray so it's visible */
html[data-bs-theme="light"] .navbar {
  background-color: #bababa !important;
  border-bottom: 1px solid #dee2e6 !important;
}

/* ALL text becomes black (this is the nuclear option that kills invisible text forever) */
html[data-bs-theme="light"] *,
html[data-bs-theme="light"] .text-light,
html[data-bs-theme="light"] .text-white,
html[data-bs-theme="light"] .text-muted,
html[data-bs-theme="light"] h1, h2, h3, h4, h5, h6,
html[data-bs-theme="light"] .accordion-button,
html[data-bs-theme="light"] .modal-title {
  color: #000000 !important;
}

/* Code blocks – light gray background */
html[data-bs-theme="light"] pre,
html[data-bs-theme="light"] code {
  background-color: #bababa !important;
  color: #d63384 !important;
}

/* Keep your red buttons red */
html[data-bs-theme="light"] .btn-danger,
html[data-bs-theme="light"] .btn-outline-danger:hover,
html[data-bs-theme="light"] .text-danger {
  color: #bababa !important;
  background-color: #e70033 !important;
  border-color: #e70033 !important;
}