:root {
  --cv-bg: #ffffff;
  --cv-text: #212529;
  --cv-muted: #6c757d;
  --cv-frame-bg: #f4f6fb;
}
:root[data-bs-theme="dark"] {
  /* Darker background for improved contrast */
  --cv-bg: #050505;
  --cv-text: #e9eef8;
  --cv-muted: #9aa6bb;
  --cv-frame-bg: #050505;
}
body { background-color: var(--cv-bg); color: var(--cv-text); }
.text-muted { color: var(--cv-muted) !important; }
/* Navbar colors */
:root { --cv-navbar-bg: #ffffff; --cv-navbar-border: rgba(0,0,0,0.08); --toggle-bg: #e9ecef; --toggle-knob: #ffffff; --cv-navbar-height: 70px; }
:root[data-bs-theme="dark"] { --cv-navbar-bg: #071028; --cv-navbar-border: rgba(255,255,255,0.04); --toggle-bg: #253046; --toggle-knob: #0b1220; --cv-navbar-height: 70px; }
.navbar { background-color: var(--cv-navbar-bg) !important; border-bottom: 1px solid var(--cv-navbar-border) !important; }

/* Sliding theme switch */
.theme-toggle-btn { display:inline-block; padding:0; border:0; background:transparent; }
.theme-toggle { position: relative; display:inline-block; width:48px; height:26px; border-radius:13px; background:var(--toggle-bg); border:1px solid rgba(0,0,0,0.06); }
.theme-toggle .knob { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--toggle-knob); transition:left .18s ease; box-shadow:0 1px 2px rgba(0,0,0,0.06); }
.theme-toggle .icon { position:absolute; top:50%; transform:translateY(-50%); font-size:12px; pointer-events:none; color:var(--cv-text); }
.theme-toggle .icon.sun { left:6px; }
.theme-toggle .icon.moon { right:6px; opacity:0.5; }
/* Use the document theme attribute for initial rendering to avoid JS layout jumps */
:root[data-bs-theme="dark"] .theme-toggle .knob { left: calc(100% - 24px); }
:root[data-bs-theme="dark"] .theme-toggle .sun { opacity:0.3; }
:root[data-bs-theme="dark"] .theme-toggle .moon { opacity:1; }

/* small layout niceties */
.theme-toggle-btn { height:26px; }

/* Plain nav link styling (Collections) */
:root { --cv-navlink-hover: rgba(0,0,0,0.04); }
:root[data-bs-theme="dark"] { --cv-navlink-hover: rgba(255,255,255,0.04); }
.nav-link-plain { color: inherit !important; text-decoration: none !important; padding: 0.35rem 0.6rem; border-radius: 0.35rem; display: inline-block; cursor: pointer; }
.nav-link-plain:hover, .nav-link-plain:focus { background-color: var(--cv-navlink-hover); text-decoration: none !important; color: inherit !important; }

/* Active state for current page */
:root { --cv-navlink-active: rgba(13,110,253,0.10); }
:root[data-bs-theme="dark"] { --cv-navlink-active: rgba(13,110,253,0.18); }
.nav-link-plain.active { background-color: var(--cv-navlink-active); font-weight: 600; }
.nav-link-plain.active:hover { background-color: var(--cv-navlink-active); }

/* Ensure footer stays at bottom when page content is short */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--cv-navbar-height); }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

/* Utility: center page content without forcing extra height/scroll */
.page-center { display: flex; align-items: center; justify-content: center; flex: 1 0 auto; padding-bottom: 1rem; }

/* Prevent content from stretching to full width on very large screens */
@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Vault / content card styling */
:root { --cv-card-bg: #ffffff; --cv-card-border: rgba(0,0,0,0.06); }
:root[data-bs-theme="dark"] { --cv-card-bg: #0b1228; --cv-card-border: rgba(255,255,255,0.04); }
.vault-card { background-color: var(--cv-card-bg); border: 1px solid var(--cv-card-border); border-radius: 0.5rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.vault-card h1 { margin-bottom: 0.5rem; }

/* When the theme applies a boxed page frame, avoid a second "card" look
   from pages that still include a .vault-card wrapper. This prevents the
   double-tile effect while allowing nested cards (use explicit classes).
*/
.cv-page-boxed main.container .vault-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Boxed page frame: when `.cv-page-boxed` is present on <html>,
   wrap the main container in a framed card so page content appears centered
   with a visible card-like panel. Uses the same card color/border vars. */
.cv-page-boxed body {
  background-color: var(--cv-frame-bg);
}
.cv-page-boxed main.container {
  max-width: 1100px;
  margin: 1.5rem auto;
  background-color: var(--cv-card-bg);
  border: 1px solid var(--cv-card-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(11,26,40,0.08);
}

@media (max-width: 767px) {
  .cv-page-boxed main.container { margin: 0.75rem; padding: 0.9rem; box-shadow: 0 4px 12px rgba(11,26,40,0.06); }
}

/* Ensure Bootstrap row with align-items-stretch produces equal-height cards */
.row.align-items-stretch > [class*="col-"] > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.row.align-items-stretch > [class*="col-"] > .card > .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.row.align-items-stretch > [class*="col-"] > .card > .card-body .mt-auto {
  margin-top: auto !important;
}

/* Ticket row styling that follows theme variables for closed/archived rows */
.cv-ticket-closed {
  background-color: var(--cv-card-bg) !important;
  color: var(--cv-text) !important;
  border-top: 1px solid var(--cv-card-border) !important;
}
.cv-ticket-closed a { color: inherit !important; text-decoration: underline; }

/* Make a vault/content card optionally follow the navbar height when used as a
  sidebar or floating panel. Add the `follow-navbar` class to enable. */
.vault-card.follow-navbar { position: sticky; top: var(--cv-navbar-height); z-index: 1; }

/* Keep a sticky follow-navbar card contained within the viewport so it
   doesn't grow past the visible area; allow internal scrolling when needed. */
@media (min-width: 768px) {
  .vault-card.follow-navbar {
    max-height: calc(100vh - var(--cv-navbar-height) - 1rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Responsive navbar heights: tune the CSS variable at breakpoints so the
  `follow-navbar` top offset matches the actual navbar size on different
  viewport widths. */
@media (max-width: 991.98px) {
  :root { --cv-navbar-height: 64px; }
}
@media (max-width: 767.98px) {
  /* On smaller screens the navbar is more compact; avoid sticky so the
    expanded collapse doesn't overlap content. */
  :root { --cv-navbar-height: 56px; }
  .vault-card.follow-navbar { position: static; top: auto; }
}

/* Apply the "card" look automatically to page containers on non-boxed pages
   so pages get the same visual tile without needing an explicit .vault-card
   wrapper in templates. Boxed pages (html.cv-page-boxed) keep their framed
   container rules. */
/* Apply vault-card look to main content containers on non-boxed pages.
   This covers both `main.container` and `main > .container` patterns so
   pages that use either markup receive the same tile styling without
   editing templates. */
html:not(.cv-page-boxed) main.container,
html:not(.cv-page-boxed) main > .container {
  background-color: var(--cv-card-bg);
  border: 1px solid var(--cv-card-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Ensure inner containers don't add extra top margin — outer `main` now
   provides consistent spacing across pages. This avoids vaults having
   too much gap while admin pages remain correctly spaced. */
html:not(.cv-page-boxed) main.container,
html:not(.cv-page-boxed) main > .container,
html:not(.cv-page-boxed) main.container-fluid > .container {
  margin-top: 0;
}

/* Provide a small, uniform top offset for the visual card/tile so it
   consistently clears the navbar across all pages. This moves the card
   slightly down from the start of `main` while keeping inner content
   positioning unchanged. */
html:not(.cv-page-boxed) main.container,
html:not(.cv-page-boxed) main > .container,
html:not(.cv-page-boxed) main.container-fluid > .container {
  margin-top: 1rem;
}

@media (max-width: 991.98px) {
  html:not(.cv-page-boxed) main.container,
  html:not(.cv-page-boxed) main > .container,
  html:not(.cv-page-boxed) main.container-fluid > .container { margin-top: 0.75rem; }
}

@media (max-width: 767.98px) {
  html:not(.cv-page-boxed) main.container,
  html:not(.cv-page-boxed) main > .container,
  html:not(.cv-page-boxed) main.container-fluid > .container { margin-top: 0.5rem; }
}

/* Normalize spacing when Bootstrap padding utility classes are present
   on `main.container` so pages like admin dashboard don't get extra top
   space from `.py-5`. These rules explicitly limit top/bottom padding. */
/* Ensure a consistent outer gutter on pages: give `main` a generous
   top/bottom padding so the card tile sits away from the navbar. Pages
   that opt into `.cv-page-boxed` keep their own framed spacing. */
/* Ensure a consistent outer gutter on pages: give `main` a generous
   top/bottom padding so the card tile sits away from the navbar. Pages
   that opt into `.cv-page-boxed` keep their own framed spacing. */
/* Use a single uniform top padding for non-boxed pages so the visible
   content tile always starts the same distance below the navbar. Keep
   a slightly larger bottom padding for breathing room. */
html:not(.cv-page-boxed) main {
  padding-top: 1.5rem; /* gap below navbar */
  padding-bottom: 2rem;
}

@media (max-width: 991.98px) {
  html:not(.cv-page-boxed) main { padding-top: 1.25rem; padding-bottom: 1.5rem; }
}

@media (max-width: 767.98px) {
  html:not(.cv-page-boxed) main { padding-top: 0.75rem; padding-bottom: 1rem; }
}

/* Also normalize when the padding utilities are applied to an inner
   container (common pattern: <main><div class="container py-5">). */
/* Leave inner container padding as-is (the tile/card padding). */

/* If a page already wraps its content in an inner `.vault-card`, avoid
   rendering a second nested card by neutralizing the inner one when the
   outer container has been styled. This prevents the "double box" effect. */
html:not(.cv-page-boxed) main.container > .vault-card,
html:not(.cv-page-boxed) main > .container > .vault-card,
html:not(.cv-page-boxed) main.container > .collection-shell,
html:not(.cv-page-boxed) main > .container > .collection-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

@media (max-width: 767.98px) {
  html:not(.cv-page-boxed) main > .container {
    padding: 0.9rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
  }
}

/* General responsiveness fixes: ensure cards, images, code blocks and tables
   do not force horizontal overflow and wrap appropriately on small screens. */
*, *::before, *::after { box-sizing: border-box; }
.card, .vault-card { width: 100%; box-sizing: border-box; }
.card img, .vault-card img, img.responsive, svg { max-width: 100%; height: auto; }

/* Prevent long inline content from breaking layout */
pre, code, kbd, samp { word-break: break-word; overflow-wrap: anywhere; }

/* Make wide tables horizontally scrollable on small screens so they don't
   break the layout. Desktop/tablet keep normal table rendering. */
@media (max-width: 767.98px) {
  .table, table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* When boxed pages are used, ensure container padding and max-width scale
   down on narrower viewports so cards don't appear clipped. */
@media (max-width: 1199.98px) {
  .cv-page-boxed main.container { max-width: calc(100% - 2rem); }
}

@media (max-width: 767.98px) {
  .cv-page-boxed main.container { margin: 0.6rem; padding: 0.75rem; }
}