/* Reports integration — minimal overrides for mounting the reports VIEWS
   inside the PRODUCTION shell. Loaded AFTER reports.css.

   Reports now uses the production chrome EXACTLY like the Delivery section:
   the production top-header + the production secondary panel (the client
   roster + nav) drive navigation, and ONLY the active view content is
   rendered into #raiReportsRoot. There is no immersive takeover anymore —
   the old `.app.reports-active` / `.main.reports-host` / absolute-positioned
   `#reportsSection` / `.rai-reports .shell` grid rules were removed because the
   reports app no longer renders its own sidebar/topbar shell.

   The report VIEWS keep their own layout from reports.css (scoped under
   `.rai-reports`). All that's needed here is to let that content flow inside
   the production main column EXACTLY like Delivery does. */

/* NOTE: #reportsSection margin/min-height are intentionally NOT overridden here.
   The legacy `margin:-20px` + `min-height:100%` were removed at the source
   (style.css) so #reportsSection inherits the SAME production layout rules as
   #deliverySection: `.main > .top-header ~ *` gives the 32px top inset on list
   views, and `.main.dlv-fullbleed > .top-header ~ *` zeroes it for the
   full-bleed report document. Setting any margin here would re-break the top
   gap (a shorthand `margin:0` also zeroes margin-top → content flush to the
   topbar, inconsistent with the rest of the dashboard). */

#raiReportsRoot.rai-reports { display: block; width: 100%; min-width: 0; }

/* Page padding mirrors Delivery's `.rai-delivery .page`: ZERO horizontal
   padding — the production `.main` supplies the 32px (--sp-8) horizontal inset
   for the padded list views (clients / insights / sends / resty), so the title
   sits the same distance from the edge as every other dashboard section
   (was 28px + a redundant max-width:1440 cap → looked cramped + off-grid).
   The immersive report document keeps its own `.page:has(.reports-shell)`
   padding:0 rule (more specific), so it still goes edge-to-edge when `.main`
   is full-bleed. */
.rai-reports .page { padding: 18px 0 20px; max-width: none; min-width: 0; }

/* Kill any horizontal page-scroll: the report views were authored for the
   old wider immersive shell, so a few dense grids/tables can exceed the
   (narrower) production main column. We use `overflow-x: clip` (NOT hidden) so
   we contain the slide WITHOUT establishing a scroll container — `hidden`
   would force overflow-y to `auto`, which hijacks the report document's
   `position: sticky` toolbars (they'd stick to this root instead of .main and
   stop working). `clip` has no such side-effect. Intrinsically-wide tables
   keep their own inner overflow-x:auto wrapper, so they scroll in place
   instead of dragging the whole column sideways. */
#raiReportsRoot.rai-reports { overflow-x: clip; }
.rai-reports .page > * { min-width: 0; }

/* ── Report document header (the "header sobre el contenido" fix) ──
   The report's sticky toolbar (.rep-toolbar, sticky at top:56px below the 56px
   production header) can wrap to TWO rows in the narrower production main
   column (it was authored for the wider immersive shell). The live-strip
   ("CLOSED PERIOD · …") had a HARDCODED sticky offset of top:119px that assumed
   a ~63px single-row toolbar — so a wrapped 102px toolbar overlapped it (the
   "CLOSED PERIOD" bar showed half-cut under the toolbar).
   Fix: (a) let the toolbar wrap at GROUP boundaries (flex-wrap) instead of
   breaking buttons mid-group, and (b) make the live-strip NON-sticky so it
   sits in normal flow right below the toolbar and can never collide with it,
   regardless of how many rows the toolbar takes. The toolbar stays sticky so
   the period/scope/tone controls remain reachable while scrolling. */
.rai-reports .rep-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rai-reports .rep-tb-left { flex: 0 0 auto; }
.rai-reports .rep-tb-mid { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }
.rai-reports .rep-tb-right { flex: 0 0 auto; margin-left: auto; }
.rai-reports .rep-live-strip { position: static; top: auto; }

/* In-card empty state for the Insights cards (anomalies feed, watch list) when
   there's no real data yet — keeps the card structure but shows an honest
   placeholder instead of fabricated rows. Mirrors the muted tone of
   .sends-empty so it reads as intentional. */
.rai-reports .ins-empty { text-align: center; padding: 30px 20px; }
.rai-reports .ins-empty-h { font: 600 14px var(--font-ui); color: var(--fg-2); margin-bottom: 5px; }
.rai-reports .ins-empty-s { font: 400 12.5px var(--font-ui); color: var(--fg-3); line-height: 1.5; max-width: 420px; margin: 0 auto; }