/* App-level patterns — from rv-theme/src/scss/showcase/_showcase.scss.
   These are loaded on top of the theme the same way a consuming app's app.css is. */

/* App shell */
.app-navbar { background-color: var(--rv-surface) }
.app-content-spacer { height: 4rem }

/* Auth page (login) */
.auth-page .card { max-width: 440px; width: 100% }

/* Brand lockup — image form. The reversed logo swaps in on dark. */
.logo-img { display: inline-block; line-height: 0 }
.logo-img > img { display: block; width: auto }
.logo-img > .logo-img-dark { display: none }
[data-bs-theme=dark] .logo-img > .logo-img-light { display: none }
[data-bs-theme=dark] .logo-img > .logo-img-dark { display: block }

/* Star rating */
.star-rating { display: inline-flex; gap: 4px }
.star-rating .star { font-size: 2rem; cursor: pointer; color: var(--rv-gray-200); transition: color .15s ease, transform .1s ease }
.star-rating .star:hover, .star-rating .star.active { color: var(--rv-warning); transform: scale(1.1) }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: inherit }
.empty-state > i:first-of-type { font-size: 3rem; margin-bottom: 1rem; opacity: .5 }

/* Reward tier row */
.tier-row { background: var(--rv-gray-50); border-radius: 8px; padding: 1rem; margin-bottom: .75rem }

/* Dashboard bar chart (static bars; real apps use Chart.js etc.) */
.chart-placeholder { position: relative; height: 240px; display: flex; align-items: flex-end; gap: .5rem; padding: 1rem 0 }
.chart-placeholder .bar { flex: 1; background-color: color-mix(in srgb, var(--rv-accent) 70%, transparent); border-radius: 6px; min-height: 12px }

/* Code sample block */
.showcase-code { background-color: var(--rv-surface); border: 1px solid var(--rv-gray-200); border-radius: var(--bs-border-radius); padding: 1rem }