/* ==========================================================================
 * _performance.css — global perf overrides for Richardo
 *
 * Loaded LAST so it wins the cascade. Pure CSS, no JS touched.
 *
 * Tunes:
 *  1. Cheaper backdrop-filter (24px+saturate → 8px) for all glass panels.
 *  2. Wires the settings toggles `body.no-glass` / `body.no-anim` so users
 *     can fully kill blur or animation if their device still lags.
 *  3. Respects `prefers-reduced-motion` automatically.
 *  4. Adds `content-visibility: auto` to off-route pages so the browser
 *     can skip rendering them.
 *  5. Adds CSS containment to common card patterns so layout/paint stays
 *     local instead of invalidating the whole page on hover/focus.
 *  6. Caps `transition: all` to specific properties on hot interactive
 *     surfaces (hover transitions on buttons/cards).
 *  7. Provides density variants for the settings toggle.
 * ========================================================================== */

/* --- 1. Global backdrop-filter cap -------------------------------------- */
/* 24px blur + saturate(180%) on dozens of panels = paint kill on mid-range
 * laptops. 8px blur keeps the glass look but cuts cost ~3-5x.
 */
.glass,
.bs-glass, .bmg-glass, .set-glass, .set-pane, .pf-glass,
.sidebar, .topbar, #eliteSidebar,
.bs-card, .bmg-modal-content, .bmg-drawer, .set-modal-content,
[class*="-glass"], [class*="-card"][class*="glass"] {
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

/* --- 2. Settings opt-outs ---------------------------------------------- */
body.no-glass *,
body.no-glass *::before,
body.no-glass *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* When glass is off, swap to a solid-ish background so panels stay readable */
body.no-glass .sidebar,
body.no-glass .topbar,
body.no-glass [class*="-glass"],
body.no-glass [class*="bs-glass"],
body.no-glass [class*="bmg-glass"],
body.no-glass [class*="set-glass"] {
  background-color: rgba(15, 15, 20, 0.92) !important;
}

body.no-anim,
body.no-anim *,
body.no-anim *::before,
body.no-anim *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* --- 3. Reduced-motion media query ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 4. content-visibility on pages ----------------------------------- */
/* main.js toggles each page via inline `style.display = "block"|"none"`
 * (see app/js/main.js:132/377), so we don't have a stable `.active` class
 * to gate on. Applying content-visibility:auto to every `.page` is still a
 * net win — hidden pages are display:none anyway, and the visible page
 * gains skip-paint for scrolled-out parts. The intrinsic-size hint keeps
 * scrollbars stable while the browser lazy-paints content.
 */
.page {
  content-visibility: auto;
  contain-intrinsic-size: 0 1200px;
}

/* --- 5. CSS containment on cards / panels ------------------------------ */
/* These class names are the common card / dashboard tile patterns across
 * the journal / dashboard / analytics / settings / etc.
 */
.bs-card, .bs-row, .bs-glass,
.bmg-dest-card, .bmg-modal-content, .bmg-drawer,
.set-row, .set-pane, .set-modal-content,
.pf-card, .twofa-card, .audit-card,
.privacy-card, .vault-card,
.dashboard-card, .analytics-card,
.journal-row, .trade-row, .account-card {
  contain: layout style paint;
}

/* --- 6. Scoped transitions on hot interactive surfaces ----------------- */
/* `transition: all` is expensive because the engine has to diff every
 * computed property. Most surfaces only animate a handful.
 */
button,
.bs-btn, .bmg-btn, .set-btn, .pf-btn,
.bs-card:hover, .bmg-dest-card:hover, .set-row:hover {
  transition-property: background-color, border-color, transform, opacity, box-shadow, color;
}

/* --- 7. Density toggle (Phase 5 settings) ------------------------------ */
body[data-density="compact"] {
  --row-pad-y: 6px;
  --row-pad-x: 12px;
}
body[data-density="cozy"] {
  --row-pad-y: 10px;
  --row-pad-x: 16px;
}
body[data-density="spacious"] {
  --row-pad-y: 16px;
  --row-pad-x: 22px;
}

/* --- 8. Promote a couple of hot scroll containers to their own layer --- */
/* `.content-area` is the main vertical scroll viewport that Lenis drives.
 * Forcing a compositor layer here keeps scroll smooth without taking down
 * the entire page on every frame.
 */
.content-area {
  will-change: scroll-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --- 9. Lazy iframes / images ----------------------------------------- */
/* Same effect as native lazy loading without touching the HTML/JS. */
img, iframe {
  content-visibility: auto;
}

/* --- 10. Reduce paint area for off-screen modals ----------------------- */
/* Modals that exist in DOM but aren't active still cost paint each frame.
 * Hiding them with `pointer-events: none` doesn't help — the browser still
 * lays them out. content-visibility:hidden does.
 *
 * NOTE: The broad `[class*="-modal"]:not(.active):not(.open)` catch-all was
 * removed because it matched `.elite-modal-overlay` (the app's main modal
 * system, which contains the substring `-modal`). Those modals toggle
 * visibility via `style.display = 'flex'` rather than an `.active`/`.open`
 * class, so the catch-all kept matching even while the modal was open —
 * resulting in the modal-box's content being skipped from paint while the
 * backdrop blur still rendered (looks like "blur visible, content invisible").
 * If a new modal subsystem needs this perf treatment, add an explicit
 * selector here (like `.set-modal`, `.bmg-modal`, `.bs-modal` below).
 */
.set-modal:not(.active),
.bmg-modal:not(.active),
.bs-modal:not(.active) {
  content-visibility: hidden;
  contain: strict;
  contain-intrinsic-size: 0 600px;
}