/* ─────────────────────────────────────────────────────────────────────────
   UnmappedEmployeePage (#/people/unmapped) — filter bar fix.

   Same root-cause CLASS FAMILY as rpt-detail-page.css / rpt-landing-page.css /
   glpd-dashboard.css / auditor.css / posh.css / learning-admin.css:
   `.adm-filter-bar-group` (the label-stacked-over-control wrapper) has no
   base rule in any of this SPA's loaded stylesheets. admin.css defines it
   (flex-column, gap:4px) but admin.css is never loaded by this tenant-portal
   SPA (see index.html's <link> list). components.css only ships two
   UNSCOPED rules written for the OLD flat flex-ROW `.adm-filter-bar` layout:
     - `.adm-filter-bar .adm-select { flex: 0 0 auto; width: auto; ... }`
       — already resolves correctly regardless of nesting depth, so this
       page's <select> filters do not balloon and need no width override.
     - `.adm-filter-bar .adm-filter-label { display: inline-flex; ... }`
       — written for an inline checkbox-label use case. Without a
       `flex-direction: column` on the group, this sits the label next to
       (not above) the control it labels.

   This page's ACTUAL reported bug (filters rendering full-row-width,
   stacked vertically) was a more basic, distinct defect: the filter
   container used `.adm-filters` (an admin.css-only class — also never
   loaded here) and each <select> combined two classes: `adm-select
   adm-select-sm`. `.adm-select` sets `width: 100%` (tenant-shell.css line
   ~1499); `.adm-select-sm` (tenant-shell.css line ~2472, explicitly
   documented there as "standalone — does NOT set width:100%") never
   declares a `width` at all, so it never overrode that 100% — same
   specificity (single class each), no conflicting declaration to resolve —
   `width: 100%` won outright, forcing each select to claim the full row
   width and wrap under `flex-wrap` onto its own line.

   Fix: markup now uses the platform-standard `.adm-filter-bar` /
   `.adm-filter-bar-group` / `.adm-filter-label` / `.adm-select` composition
   already established by LearningReportDetailPage.js and
   GenericLpDashboardPage.js, instead of `.adm-filters`. `.adm-filter-bar`
   itself is defined (unscoped) in components.css and already renders a
   proper flex row with a working compact-select carve-out — only the
   group/label layer needs a page-scoped rule, mirrored here from the five
   precedents above, scoped to `.ump-page` (this page's root wrapper — see
   UnmappedEmployeePage.js `_renderShell()`, `<div class="adm-page-wrap
   ump-page" id="ump-wrap">`) so it cannot collide with any other page's use
   of the same admin.css-only class names.
   ───────────────────────────────────────────────────────────────────────── */

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

/* Re-assert the intended small-caps filter-label look at higher specificity
   than components.css's unscoped ".adm-filter-bar .adm-filter-label" (inline
   checkbox-label styling — wrong for this page's label-above-select layout). */
.ump-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);
}