/* ─────────────────────────────────────────────────────────────────────────
   RPT — Learning Report detail page (#/reports/:slug, LearningReportDetailPage.js)

   Same root-cause bug as rpt-landing-page.css and glpd-dashboard.css, now
   confirmed on a THIRD page: `.adm-filter-bar-group` (the label-stacked-
   over-control filter wrapper — `filterGroup.className = 'adm-filter-bar-
   group'` around line ~715, and the Wave 1B typed-filter builder's `group.
   className = 'adm-filter-bar-group'` around line ~851, both in
   LearningReportDetailPage.js) has no CSS rule anywhere in this SPA's
   loaded stylesheets. components.css only ships two UNSCOPED rules that
   were written for an OLD flat flex-ROW `.adm-filter-bar` layout, not for
   the flex-COLUMN `.adm-filter-bar-group` wrapper this page (and its
   siblings) actually use:

     - `.adm-filter-bar .adm-input { flex: 1 1 200px }` (~line 7638) — read
       against a flex-COLUMN group, `flex-basis:200px` is misread as a
       *height* basis instead of a width basis, ballooning the control.
     - `.adm-filter-bar .adm-filter-label { display: inline-flex; ...
       white-space: nowrap }` (~line 7651) — written for an inline
       checkbox-label use case. Without a `flex-direction:column` on the
       group to force it onto its own line, this inline-flex label sits on
       the same line as the control that follows it, which is exactly the
       "label runs straight into the input with no stacking/gap" bug
       reported live on every `rpt-detail-page` filter bar (both the single
       Wave-1A search box and every Wave-1B typed filter — Learner,
       Department, Employment Type, LP Status, Search).

   Fix mirrors rpt-landing-page.css's `.rpt-landing-page`-scoped rules
   exactly, scoped instead to `.rpt-detail-page` (the wrapper class this
   page's root `.page-shell` element carries — see `page.className =
   'page-shell rpt-detail-page'`), so it cannot collide with any other
   page's use of the same admin.css-only class names.

   One addition specific to this page: `_buildWave1bFilters()` also builds
   an actions group (`btnGroup.className = 'adm-filter-bar-group adm-
   filter-bar-group--actions'`, ~line 979) holding the Apply/Clear buttons
   side by side, not a label+control pair. Forcing every `.adm-filter-bar-
   group` into a flex-COLUMN (needed for the label/control groups) would
   incorrectly stack those two buttons vertically instead of side by side —
   `--actions` is re-asserted back to a flex-ROW below.

   Root-cause precedents (read before re-fixing again — since fixed in
   three further instances, each using a different page-wrapper class and
   therefore NOT covered by this file's `.rpt-detail-page` scope):
     - frontend/assets/css/glpd-dashboard.css  (`.glpd-dashboard-page`)
     - frontend/assets/css/rpt-landing-page.css (`.rpt-landing-page`)
     - frontend/assets/css/auditor.css          (`.aem-page`, plus separate pre-existing markup: `.adm-filter-cell` / `.adm-filter-bar__group`)
     - frontend/assets/css/posh.css             (`.posh-page-wrap` + `.adm-cjp-filter-bar`)
     - frontend/assets/css/learning-admin.css   (`.acp-wrap`, AdminCertificatesPage.js)

   Architecture ref: requirement-manager (RPT-1A/1B/1C trackers)
   ───────────────────────────────────────────────────────────────────────── */

.rpt-detail-page .adm-filter-bar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ballooning-height neutralization — identical fix to .rpt-landing-page's
   and .glpd-dashboard-page's own carve-outs. Only .adm-input is affected
   (this page's Wave-1B <select> filters use class "adm-select", whose own
   unscoped `.adm-filter-bar .adm-select { flex: 0 0 auto }` rule already
   resolves its basis against auto content height, not a fixed pixel
   value, so it does not balloon and needs no override here). */
.rpt-detail-page .adm-filter-bar-group > .adm-input {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Re-assert the intended small-caps filter-label look at higher specificity
   than components.css's unscoped ".adm-filter-bar .adm-filter-label" (which
   was written for an inline checkbox-label use case and is what actually
   causes the label-runs-into-input crammed layout on this page). */
.rpt-detail-page .adm-filter-bar .adm-filter-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
}

/* The Apply/Clear actions group has no label — keep its two buttons in a
   row instead of inheriting the label+control column stack above. */
.rpt-detail-page .adm-filter-bar-group--actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .rpt-detail-page .adm-filter-bar-group > .adm-input {
        min-height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   RPT drill-down modal (`.rpt-drill-modal`, opened by
   LearningReportDetailPage.js#_openDrillModal when a drillable count cell
   — e.g. "3" under "LPs Assigned" on the learner-progress report — is
   clicked) — SAME admin.css-only-class bug as the filter-bar rules above,
   ported from frontend/assets/css/admin.css lines 4372-4453 + 4962-4985
   (admin.css is never loaded by this tenant-portal SPA; see index.html's
   `<link>` list).

   UNSCOPED ON PURPOSE — do not "fix" this by prefixing with
   `.rpt-detail-page`, unlike every other rule in this file. The drill
   modal's backdrop is appended directly to `document.body`
   (`document.body.appendChild(backdrop)`, LearningReportDetailPage.js
   ~line 1728), the same pattern every other `.adm-modal-backdrop` in this
   SPA uses (including this page's own PII-export confirmation modal) —
   it is NOT a descendant of `.rpt-detail-page`. A `.rpt-detail-page
   .rpt-drill-*` selector would silently never match. Base `.adm-modal*`
   rules in tenant-shell.css are unscoped for the identical reason; these
   follow that convention instead. The `.rpt-drill-*` class names are
   specific enough (grep-confirmed against learning-admin.css, posh.css,
   auditor.css, components.css — no collisions) that global scope is safe.

   `.rpt-drill-btn` (the clickable count-cell button) needs no rule here —
   it composes only base `.adm-btn .adm-btn-ghost .adm-btn-sm`, all
   already loaded via components.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Drill modal — wider, taller, flex-column so body scrolls while header/footer stay fixed */
.rpt-drill-modal {
    max-width: 1100px;
    width: 96vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Body scrolls; header (adm-modal-header) and learner bar and pagination stay pinned */
.rpt-drill-modal .adm-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0;
    min-height: 0;
}

/* Learner bar: single line — name then dept capsule */
.rpt-drill-learner-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px 10px;
    background: var(--adm-bg-elevated);
    border-bottom: 1px solid var(--adm-border);
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.rpt-drill-learner-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--adm-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.rpt-drill-dept-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--color-teal-glow, rgba(0,180,162,.12));
    color: var(--color-teal, #00b4a2);
    border: 1px solid var(--color-teal, #00b4a2);
}

.rpt-drill-table-wrap { overflow-x: auto; }

/* Pagination footer — pinned at bottom. Layout (flex row, gap, centered info span) now
   comes from .rpt-pager below (combined class, see LearningReportDetailPage.js
   _loadDrillPage); this rule keeps only the modal-specific chrome. */
.rpt-drill-pagination {
    padding: 10px 24px;
    border-top: 1px solid var(--adm-border);
    background: var(--adm-bg-card);
    flex-shrink: 0;
}

[data-theme="light"] .rpt-drill-learner-bar { background: #f3f4f6; border-bottom-color: #e5e7eb; }
[data-theme="light"] .rpt-drill-pagination  { background: #f9fafb; border-top-color: #e5e7eb; }
[data-theme="light"] .rpt-drill-dept-tag    { background: rgba(0,180,162,.08); }

/* Mobile: .rpt-drill-learner-bar uses flex-wrap:nowrap above — a long
   learner name + department tag overflows the modal at 375px because the
   tag (flex-shrink:0) cannot compress, pushing the name off the right edge
   even with text-overflow:ellipsis. Allow wrapping and stack name + tag
   vertically at mobile instead. */
@media (max-width: 768px) {
    .rpt-drill-learner-bar {
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 16px;
    }
    .rpt-drill-learner-name {
        flex: 1 1 100%;
    }
    .rpt-drill-dept-tag {
        flex-shrink: 1;
    }
    .rpt-drill-pagination {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   RPT pager — restyled to match the platform-canonical "Team" pagination
   look, per explicit request (TeamPage.js ~line 506-521 / team.css
   .team-pager ~line 815-826): word-labeled Prev/Next buttons, a centered
   "Page X of Y (N items)" info span, and a "Per page" selector.

   Used in two places (LearningReportDetailPage.js):
     - `.rpt-pager` alone — the main report table's pagination strip,
       appended after `.adm-table-wrap` inside `.rpt-detail-page`
       (_renderPagination).
     - `.rpt-drill-pagination.rpt-pager` (combined) — the drill-down
       modal's footer, appended to `document.body` (_loadDrillPage), so
       this rule is UNSCOPED on purpose (same reasoning as `.rpt-drill-*`
       and `.rpt-empty-state` above — it is not a descendant of
       `.rpt-detail-page`).

   Deliberately NOT named `.acp-page-info` / `.avp-page-btn` — those
   belong to AdminCertificatesPage's own Certificate Registry pagination
   (learning-admin.css / components.css) and restyling them directly
   would have silently changed that page's pagination too (grep-confirmed
   collision: both classes are also referenced by
   TtsVoiceCatalogPickerDialog.js and AvatarPickerDialog.js). `.rpt-pager*`
   is exclusively scoped to this file / LearningReportDetailPage.js.

   Prev/Next buttons reuse `.btn .btn-ghost .btn-sm` from components.css
   (platform-wide base classes, loaded at index.html line 22, before
   team.css — confirmed NOT scoped to team.css). */
.rpt-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0 4px;
    font-size: 13px;
    color: var(--adm-text-secondary);
}
.rpt-pager-info {
    flex: 1;
    text-align: center;
    white-space: nowrap;
}
.rpt-pager-size-label {
    font-size: 12px;
    color: var(--adm-text-muted);
}
.rpt-pager-size-select {
    width: auto;
    min-width: 70px;
    background: var(--adm-bg-elevated);
    border: 1px solid var(--adm-border);
    color: var(--adm-text-primary);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.rpt-pager-size-select:focus {
    outline: none;
    border-color: var(--color-teal, #00b4a2);
}
/* .btn:disabled (components.css) already handles Prev/Next disabled state —
   only the select needs its own rule here. */
.rpt-pager-size-select:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .rpt-pager {
        justify-content: center;
    }
    .rpt-pager-info {
        flex: 1 1 100%;
        order: -1;
    }
    .rpt-pager-size-select {
        min-height: 44px;
        font-size: 16px; /* iOS auto-zoom guard, same convention as .team-role-select mobile rule */
    }
}

/* .rpt-empty-state — same admin.css-only bug (admin.css line 4369),
   discovered via the required grep for this fix. Used by the drill
   modal's own "No records found." state (LearningReportDetailPage.js
   ~line 1786, inside _loadDrillPage) as well as this page's main-table
   and filtered-results empty states (~lines 1073, 1458) — in scope here
   because it's rendered inside the same drill-modal code path this ticket
   fixes, and because leaving it out would mean the modal still ships one
   unstyled empty state alongside the now-fixed learner bar/pagination.
   Global on purpose for the same reason as the .rpt-drill-* rules above:
   the class is also used outside any `.rpt-detail-page`-scoped subtree
   (inside the body-appended modal). */
.rpt-empty-state {
    color: var(--adm-text-muted);
    font-size: 14px;
    text-align: center;
    padding: 32px 0;
    margin: 0;
}