/* ============================================================
   Mnemosynce — custom styles
   Bootstrap handles the heavy lifting; this file adds:
     - CSS custom properties for theming
     - Home page background image layout
     - Dark mode overrides
     - Mobile-first refinements
   ============================================================ */

/* ---- Light theme (default) -------------------------------- */
:root {
  --bs-body-bg: #f8f9fa;
  --app-navbar-bg: #212529;
  --app-footer-bg: #212529;
  --app-card-bg: #ffffff;
  --app-bg-image-opacity: 0.18;
}

/* ---- Dark theme ------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-body-bg: #1a1d20;
  --app-navbar-bg: #0d0f11;
  --app-footer-bg: #0d0f11;
  --app-card-bg: #2b2f32;
  --app-bg-image-opacity: 0.08;
}

/* ---- Base ------------------------------------------------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bs-body-bg);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---- Home page background image --------------------------- */
body.page-home {
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: auto 90vh;
  background-position: left center;
}

/* On small screens the image would cover the content, so hide it */
@media (max-width: 767.98px) {
  body.page-home {
    background-image: none;
  }
}

/* ---- Navbar ----------------------------------------------- */
.navbar {
  background-color: var(--app-navbar-bg) !important;
}

/* ---- Cards ------------------------------------------------ */
.card {
  background-color: var(--app-card-bg);
  transition: background-color 0.2s ease;
}

/* ---- Footer ----------------------------------------------- */
footer {
  background-color: var(--app-footer-bg) !important;
}

/* ---- Theme toggle button ---------------------------------- */
#theme-toggle {
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  transition: color 0.15s ease;
}
#theme-toggle:hover {
  color: #fff;
}

/* ---- Mobile: full-width buttons in card footers ----------- */
@media (max-width: 575.98px) {
  .card-footer .btn {
    width: 100%;
  }
}

/* ---- CodeMirror dark mode --------------------------------- */
[data-bs-theme="dark"] .CodeMirror {
  border-color: #495057;
}

/* ---- Connection step results ------------------------------ */
.step-result {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.step-result:last-child {
  border-bottom: none;
}
.step-detail {
  font-size: 0.8rem;
  margin-left: 1.6rem;
  opacity: 0.75;
}