/* ==========================================================================
   CityWorkshop — CSS Containment Performance Layer (CWS_V_5_Fixed_7.13)
   --------------------------------------------------------------------------
   Critical Rendering Path analysis (see CHANGELOG.md for the full writeup)
   found the visual/CSS side was already well-optimized (deferred scripts,
   inline critical CSS, font-display:swap, preconnects) — the two concrete
   gaps were: (1) four of five render-blocking stylesheets had no preload
   hint, and (2) NO css `contain` was used anywhere in ~300KB of CSS despite
   the app being built almost entirely from repeated card/list/row
   components — exactly the pattern containment is for.

   `contain` tells the browser "changes inside this box never affect layout,
   style computation, or paint outside it" — so when one card's countdown
   timer ticks, or one list row's status pill updates, the browser can skip
   recalculating every other card/row on the page instead of walking the
   whole document.

   Two containment strategies used here, deliberately conservative:

   1. `contain: layout style` on card-shaped containers (dashboards, panels,
      tiles). Layout+style containment does NOT clip overflow, so it's safe
      even with the decorative ::before/::after sheen and edge-glow effects
      layered on top by crystal-3d-upgrade.css and premium-saas.css.

   2. `content-visibility: auto` (+ `contain-intrinsic-size` to avoid
      scrollbar jump) on genuinely repeated, simple data ROWS only —
      history rows, priority rows, specialist rows — where the browser can
      skip layout/paint work entirely for rows currently off-screen. This
      DOES clip overflow, so it's intentionally restricted to plain data
      rows with no popovers/dropdowns/tooltips escaping their box, not to
      the fancier cards above.

   Loaded last. Purely a performance layer — changes no colors, spacing,
   or visual output on any role.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Layout+style containment — card-shaped containers, every role
   ------------------------------------------------------------------------- */
.card,
.v910-detail-card,
.professional-card,
.v910-filter-card,
.v910-priority-card,
.v910-query-card,
.v910-refresh-card,
.v910-specialists-card,
.v910-velocity-card,
.v910-map-card,
.swiggy-service-tile,
.service-icon-card,
.hero-service-chip,
.customer-live-track-card,
.customer-compact-card,
.customer-welcome-card,
.customer-ops-card,
.cityworkshop-toast,
.professional-notification{
  contain: layout style;
}

/* The sidebar's own content changes (nav highlight, collapse toggle) never
   need to trigger layout recalculation of the main content area, and vice
   versa — isolating it is a bigger relative win since it's sticky-positioned
   and re-evaluated on scroll. */
.v910-sidebar{
  contain: layout style;
}

/* -------------------------------------------------------------------------
   2. content-visibility for genuinely repeated, simple data rows.
   contain-intrinsic-size gives the browser a size estimate for off-screen
   rows so the scrollbar/page height doesn't jump as rows enter/exit the
   viewport during scroll.
   ------------------------------------------------------------------------- */
.history-item,
.item,
.customer-inline-item,
.swiggy-history-item,
.compact-review-item,
.compact-history-list > *,
.v910-priority-row,
.v910-specialist-row,
.ticket-row{
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}

/* Review/history rows tend to run two lines (comment text) — give them a
   taller intrinsic estimate so auto-sizing doesn't undershoot on first paint. */
.review-list .item,
.professional-reviews .review-item,
.swiggy-review-item{
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}