/* Prompt Vault — app styles */

body { min-height: 100vh; }

.markdown-body { line-height: 1.7; }
.markdown-body pre {
  background: #0d1117;
  color: #e6edf3;
  padding: 1rem;
  border-radius: .5rem;
  overflow-x: auto;
}
.markdown-body code { font-size: .9em; }
.markdown-body :not(pre) > code {
  background: rgba(135,131,120,.15);
  padding: .15em .35em;
  border-radius: .25rem;
}
.markdown-body blockquote {
  border-left: 4px solid var(--bs-border-color);
  padding-left: 1rem;
  color: var(--bs-secondary-color);
}
.markdown-body img { max-width: 100%; height: auto; border-radius: .5rem; }
.markdown-body table { width: 100%; }

/* Lazy-loaded images fade in */
img[loading="lazy"] { background: var(--bs-tertiary-bg); }

/* =========================================================
   Global sidebar navigation
   ========================================================= */
:root { --sb-width: 280px; --nav-height: 58px; }

[x-cloak] { display: none !important; }

.app-navbar { z-index: 1050; }

.app-sidebar {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  bottom: 0;
  width: var(--sb-width);
  background: var(--bs-body-bg);
  border-right: 1px solid var(--bs-border-color);
  z-index: 1045;
  overflow-y: auto;
  padding: 1rem .75rem 2rem;
  transform: translateX(-100%);
  transition: transform .25s ease;
  -webkit-overflow-scrolling: touch;
}
.sb-open .app-sidebar { transform: translateX(0); }

.sb-backdrop {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1040;
}

.app-main { transition: margin-left .25s ease; }

/* Desktop: open sidebar pushes content. Mobile: it overlays. */
@media (min-width: 992px) {
  .sb-open .app-main { margin-left: var(--sb-width); }
}

/* Sidebar items */
.app-sidebar .sb-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: .375rem;
  color: var(--bs-body-color);
  font-weight: 500;
}
.app-sidebar .sb-item:hover { background: var(--bs-tertiary-bg); }
.app-sidebar .nav-link.active,
.app-sidebar .sb-item.active {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-weight: 600;
}
.app-sidebar .nav-link { color: var(--bs-body-color); }
.app-sidebar .nav-link:hover { color: var(--bs-primary); }
.app-sidebar .sb-section { margin-bottom: .25rem; }