/* =============================================================================
   app.css — thin brand/override layer on top of Bootstrap 5.3.
   ---------------------------------------------------------------------------
   STYLING MODEL (see docs/design-handoff.md):
   - Bootstrap 5.3 (self-hosted, bootstrap.min.css) is the unbranded base. It is
     fully CSS-custom-property driven and provides light/dark via data-bs-theme,
     which our theme toggle sets alongside data-theme.
   - Claude Design BRANDS the product here: override Bootstrap's CSS variables
     (--bs-primary, --bs-body-bg, component --bs-*-* tokens, fonts, radii) for
     light and dark under :root / [data-bs-theme="dark"], and style the stable
     `cb-` hooks (cb-header, cb-brand, cb-hero, cb-card, cb-sidebar, cb-auth, …).
   - Claude Code does NOT hand-write finished/branded CSS. Keep this file minimal;
     Design extends or replaces it. Brand colors will come from the brand record's
     color tokens (mapped to --bs-* here) so a brand is a token set, not a restyle.
   ============================================================================= */

/* --- Brand token seam -------------------------------------------------------
   Map brand color tokens onto Bootstrap variables here once the brand record
   carries them. Example (Design fills real values per brand):
   :root { --bs-primary: #2f6df6; --bs-primary-rgb: 47,109,246; }
   --------------------------------------------------------------------------- */

/* --- Minimal layout glue (not branding) ----------------------------------- */

/* Floating light/dark toggle. */
.cb-theme-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
}

/* Members/admin sidebar fills the column height. */
.cb-sidebar {
  min-height: calc(100vh - 56px);
}

/* Hero media placeholder keeps a sensible aspect while unstyled. */
.cb-hero__img {
  width: 100%;
  object-fit: cover;
}

/* Sign-out rendered as an inline nav link. */
.cb-logout .btn-link {
  text-decoration: none;
}