/* gvs-report-page.css — the GVS Suite Reports page around the report: the back link, the filter bar, the
   content area, and the consolidated dashboard's strip and view picker. The report itself (tiles, cards, tables, tabs, grid) is styled by GVS.Components.Reports. */

/* ---------- Header ------------------------------------------------------- */
.rp-back { display: inline-flex; align-items: center; gap: 4px; color: var(--gvs-primary); font-weight: 600; text-decoration: none; border-radius: 4px; }
/* Underline the words only: on the link itself each flex item draws its own line, and the icon's sits lower. */
.rp-back:hover { color: var(--gvs-primary-hover); }
.rp-back:hover .rp-back-text { text-decoration: underline; }
.rp-back:focus-visible { outline: none; box-shadow: var(--gvs-focus-ring); }
.rp-back .material-symbols-rounded { font-size: 17px; }

/* ---------- Filter bar and tabs, one card -------------------------------- */
.rp-panel { background: var(--gvs-surface); border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-lg); box-shadow: var(--gvs-elev-1); }
.rp-filterbar { display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 3vw, 24px); border-bottom: 1px solid var(--gvs-border); }
.rp-filter-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; flex: 1; min-width: 0; }
.rp-filter-controls > * { flex-shrink: 0; }
/* GvsSelect / GvsDateRangePicker (MudBlazor) fields sit in sized wrappers: a class passed to them
   lands on an inner element MudBlazor sizes itself (on each of the date picker's two inputs, even).
   Fixed widths stop the row reflowing as the selection text changes. */
.rp-field { flex: none; }
.rp-field > .mud-input-control, .rp-field .mud-picker, .rp-field .mud-select { width: 100%; margin: 0; }
.rp-field-range { width: 160px; }
.rp-field-dates { width: 300px; }
.rp-field-types { width: 240px; }
.rp-field-sites { width: 200px; }
.rp-field-time { width: 190px; }
/* Each audit type's own MyAudit icon beside its name in the Audit types list. */
.rp-type-option { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rp-type-option .mud-icon-root { width: 18px; text-align: center; font-size: 15px; }
/* MudBlazor sizes a select's list to its field, so once the list scrolls the scrollbar eats into the
   names. GvsSelect has no width setting, so the list is widened here; min-width outranks the inline
   width MudBlazor writes whenever it is the larger of the two. The list renders in the popover
   provider, outside this page's markup, hence :has(). */
.mud-popover:has(.rp-type-option) { min-width: 300px !important; }
/* Generate and the settings cog travel together, so they always share a row and a centre line. */
.rp-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rp-icon-btn { width: 44px; padding: 0; flex: none; }
.rp-filters-toggle { display: none; }

/* ---------- Content ------------------------------------------------------ */
.rp-content { padding-top: 24px; }

/* ---------- Loading skeletons ------------------------------------------- */
.rp-tabs.rp-sk-tabs { gap: 32px; padding-top: 18px; padding-bottom: 18px; }
.rp-sk-toggle { display: none; }

/* ---------- Consolidated dashboard (in place of the tabs) ------------------ */
/* The strip keeps the tab row's height, so the page doesn't jump as the view changes. */
.rp-dash-strip { min-height: 53px; }
.rp-dash-back { gap: 4px; font-weight: 600; }
.rp-dash-back .material-symbols-rounded { font-size: 17px; }
.rp-icon-btn.active { color: var(--gvs-primary); background: var(--gvs-primary-weak); }
.rp-dash-title { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: var(--gvs-fg-1); }
.rp-view-picker { width: 220px; margin-bottom: 20px; }
/* In the dashboard's strip the picker sits at the end of the row, before Dashboard View. */
.rp-dash-strip .rp-view-picker { margin: 0 0 0 auto; }
.rp-dash-strip .rp-tab-tools { margin-left: 8px; }

/* ---------- Progress while generating ------------------------------------ */
/* Pinned under the shell's sticky top bar (64px, 56px on small phones), so it stays in view while the page is scrolled. */
.rp-content > .rp-progress { position: sticky; top: 76px; z-index: 10; padding: 12px 16px; background: var(--gvs-surface); border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-lg); box-shadow: var(--gvs-elev-1); }
@media (max-width: 560px) { .rp-content > .rp-progress { top: 68px; } }

/* ---------- Responsive --------------------------------------------------- */
/* Phones: the controls fold behind a Filters toggle so the report starts above the fold. */
@media (max-width: 640px) {
    .rp-filterbar { flex-wrap: wrap; align-items: center; padding: 8px 12px; }
    .rp-filters-toggle { display: inline-flex; align-items: center; justify-content: space-between; flex: 1; height: 40px; padding: 0 12px; border: 1px solid var(--gvs-border-strong); border-radius: var(--gvs-radius-sm); background: var(--gvs-surface); color: var(--gvs-fg-1); font: inherit; font-size: 14px; cursor: pointer; }
    .rp-filters-toggle:focus-visible { outline: none; box-shadow: var(--gvs-focus-ring); }
    .rp-sk-toggle { display: block; flex: 1; }
    .rp-tabs.rp-sk-tabs { gap: 16px; padding: 14px 12px; overflow: hidden; }
    .rp-filter-controls { order: 3; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; }
    .rp-filters-open .rp-filter-controls { display: flex; }
    .rp-field, .rp-field-range, .rp-field-dates, .rp-field-types, .rp-field-sites, .rp-field-time { width: 100%; }
    .rp-filter-controls > .mh-btn { justify-content: flex-start; }
    .rp-actions { margin-left: 0; }
    .rp-actions .mh-btn:first-child { flex: 1; }
    .rp-content { padding-top: 16px; }
    /* Dashboard View stays on phones, the only way into the dashboard; the other tools stay hidden. */
    .rp-tab-tools { display: flex; }
    .rp-tab-tools > :not([data-testid=reports-dashboard-view]) { display: none; }
    .rp-view-picker { width: 100%; }
    /* Phones: the picker takes its own line under Back to report and Dashboard View. */
    .rp-dash-strip { flex-wrap: wrap; }
    .rp-dash-strip .rp-view-picker { order: 3; margin: 0 0 10px; }
    .rp-dash-strip .rp-tab-tools { margin-left: auto; }
}