/* CSS variables for theme colors - can be overridden in base.html */
:root {
  --dark-bg: #0B0E14;
  --dark-card-bg: #23272b;
  --light-bg: #ffffff;
  --light-card-bg: #f8f9fa;
}

body.dark-theme, .dark-theme .card, .dark-theme .container {
  background-color: var(--dark-bg) !important;
  color: #e8e6e3 !important;
}
.dark-theme .card {
  background-color: var(--dark-card-bg) !important;
  color: #e8e6e3 !important;
}
.dark-theme .btn-outline-secondary, .dark-theme .btn-outline-danger {
  color: #e8e6e3;
  border-color: #888;
  background: transparent;
}
.dark-theme .btn-outline-secondary:hover, .dark-theme .btn-outline-danger:hover {
  background: #333;
  color: #fff;
}
.dark-theme code {
  background: #222;
  color: #e8e6e3;
}

body.dark-theme .navbar,
.dark-theme .navbar.navbar-light,
.dark-theme .navbar.navbar-default {
  background-color: #20232c !important;
  color: #e8e6e3 !important;
  border-bottom: 1px solid #333;
}

body.dark-theme .navbar a,
body.dark-theme .navbar .navbar-brand,
body.dark-theme .navbar .nav-link {
  color: #e8e6e3 !important;
}

body.dark-theme .footer {
  background-color: var(--dark-card-bg) !important;
  color: #e8e6e3 !important;
  border-top: 1px solid #333;
}

/* Light theme - uses CSS variables for background */
body:not(.dark-theme), body:not(.dark-theme) .container, body:not(.dark-theme) .container-fluid {
  background-color: var(--light-bg) !important;
}

/* Light theme footer (navbar style) */
body:not(.dark-theme) .footer,
body:not(.dark-theme) .footer .py-2 {
  background-color: #e5f5ff !important;
  color: #286eb1 !important;
  border-top: 1px solid #dee2e6;
}
body:not(.dark-theme) .footer a {
  color: #286eb1 !important;
  text-decoration: underline;
}

/* Dark theme footer */
body.dark-theme .footer,
body.dark-theme .footer .py-2 {
  background-color: var(--dark-card-bg) !important;
  color: #e8e6e3 !important;
  border-top: 1px solid #333;
}
body.dark-theme .footer a {
  color: #e8e6e3 !important;
  text-decoration: underline;
}

/* Ensure the API Access Token (`#api-key` and related code) always uses `#3f7fc3` in both themes */
#api-key,
.access-token-row code,
.access-token-row #api-key {
  color: #3f7fc3 !important;
  background: inherit !important;
}

.access-token-row .btn-outline-danger {
  color: #3f7fc3 !important;
  border-color: #3f7fc3 !important;
  background: transparent !important;
}
.access-token-row .btn-outline-danger:hover,
.access-token-row .btn-outline-danger:focus {
  background: #3f7fc3 !important;
  color: #fff !important;
  border-color: #3f7fc3 !important;
}

/* Remove conflicting color from .dark-theme code for access token */
.dark-theme code#api-key,
.dark-theme .access-token-row code,
.dark-theme .access-token-row #api-key {
  color: #3f7fc3 !important;
}

/* Remove background color from API Access URL in both themes */
#api-access-url,
code#api-access-url,
.access-token-row #api-access-url {
  background: inherit !important;
}

#vspace4
{
 padding:4px 0px 0px 0px;
}

#vspace8
{
 padding:8px 0px 0px 0px;
}