/* ─────────────────────────────────────────────────────────────────────────
   GLPD — Generic Learning Path Dashboard
   GLPD-3.T1: induction-only conditional zone (New Joiners + Readiness
   Indicators widgets), rendered by GenericLpDashboardPage.js only when the
   selected LP's lp_category === 'induction'.

   Tenant-portal-only stylesheet (index.html). admin.css's .adm-kpi-* /
   .adm-filter-bar-group primitives are admin-portal-only and are not loaded
   here — this file ships its own glpd-* classes, built entirely on top of
   the shared --adm-* design-token custom properties already defined in
   tenant-shell.css (dark + light theme variants), per the platform's
   "no hardcoded design tokens" rule.

   GLPD-7 addition: GenericLpDashboardPage.js's markup (built across GLPD-1/
   GLPD-3) also uses several *.adm-* classes whose actual rules live only in
   admin.css (.adm-page-header, .adm-page-title, .adm-alert(-info/-error),
   .adm-filter-bar(-group), .adm-filter-label, .adm-input, .adm-stat-card) —
   admin.css is never loaded by this tenant-portal SPA (confirmed via
   index.html's <link> list), so those elements rendered unstyled/raw in
   production. Rather than loading admin.css into the tenant portal (a
   broader, unbounded styling change with unknown side effects on every
   other tenant-portal page), every equivalent rule below is scoped under
   `.glpd-dashboard-page` — the wrapper class this page's root element
   already carries — so the fix is self-contained to this one page and
   cannot collide with any other page's use of the same admin.css class
   names. Values are copied from admin.css's own rules, translated to the
   shared --adm-* custom properties already available here (tenant-shell.css
   defines both the dark default and the [data-theme="light"] override for
   every token referenced below, so both themes resolve correctly with no
   extra work).

   2026-09-11 update: the identical `.adm-filter-bar-group` gap has since
   recurred four times more — rpt-landing-page.css (`.rpt-landing-page`),
   rpt-detail-page.css (`.rpt-detail-page`), AuditEngagementsPage.js
   (`.aem-page`, fixed in auditor.css), PoshDashboardPage.js
   (`.posh-page-wrap`, fixed in posh.css), and AdminCertificatesPage.js
   (`.acp-wrap`, fixed in learning-admin.css). All five now fixed — see
   each file's own header comment for its specific variant of the bug.

   Architecture: .ai/generic-lp-dashboard-architecture.md §5.4, §6, §11
   Tracker:      requirement-manager/generic-lp-dashboard-tracker.md (GLPD-3, GLPD-7)
   ───────────────────────────────────────────────────────────────────────── */

/* ── GLPD-7: scoped admin.css-equivalents (page-local only) ──────────────── */

.glpd-dashboard-page .adm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-block-end: 28px;
    gap: 16px;
    flex-wrap: wrap;
}

.glpd-dashboard-page .adm-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--adm-text-primary);
}

.glpd-dashboard-page .adm-alert {
    padding: 12px 16px;
    border-radius: var(--adm-radius-sm);
    font-size: 13px;
    margin-block-end: 16px;
}

.glpd-dashboard-page .adm-alert-error {
    background: var(--adm-red-glow);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--adm-red);
}

.glpd-dashboard-page .adm-alert-info {
    background: var(--adm-teal-glow);
    border: 1px solid rgba(0, 180, 162, 0.25);
    color: var(--adm-teal);
}

.glpd-dashboard-page .adm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-md);
    margin-block-end: 1.5rem;
}

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

/* Root-cause fix (2026-09-10): components.css's unscoped ".adm-filter-bar
   .adm-input { flex: 1 1 200px; }" (assets/css/components.css ~line 7638)
   was written for the OLD flat, flex-ROW .adm-filter-bar layout, where
   flex-basis:200px means a 200px-*wide* field that grows to fill the row.
   .adm-filter-bar-group above is a flex-COLUMN wrapper (label stacked over
   the control), so that same shorthand is read on the vertical axis
   instead: flex-basis:200px became a 200px+ *height* basis and flex-grow:1
   stretched the LP <select> and both date <input>s to fill the filter
   bar's cross-axis height, ballooning all three controls to ~300-400px
   with the actual control floating in the middle of the oversized box.
   The LP <select> is not protected by components.css's own
   ".adm-filter-bar .adm-select { flex: 0 0 auto }" carve-out either, since
   this page assigns it class "adm-input", not "adm-select"
   (_buildLpSelectorGroup()). This is the exact same bug class already
   found and fixed for .adm-filter-cell / .adm-filter-bar__group in
   auditor.css (2026-09-06) — neutralized here the same way, scoped under
   .glpd-dashboard-page so it cannot affect any other page's use of
   .adm-filter-bar .adm-input. */
.glpd-dashboard-page .adm-filter-bar-group > .adm-input {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.glpd-dashboard-page .adm-filter-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
}

.glpd-dashboard-page .adm-input {
    padding: 9px 12px;
    background: var(--adm-bg-elevated);
    border: 1px solid var(--adm-border-mid);
    border-radius: var(--adm-radius-sm);
    color: var(--adm-text-primary);
    font-size: 13px;
    font-family: var(--adm-font, inherit);
    transition: border-color var(--adm-transition), box-shadow var(--adm-transition);
    outline: none;
}

.glpd-dashboard-page .adm-input:focus {
    border-color: var(--adm-teal);
    box-shadow: 0 0 0 3px var(--adm-teal-glow);
}

.glpd-dashboard-page .adm-input::placeholder {
    color: var(--adm-text-muted);
}

.glpd-dashboard-page .adm-stat-card {
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-md);
    padding: 20px;
    transition: border-color var(--adm-transition);
}

.glpd-dashboard-page .adm-stat-card:hover {
    border-color: var(--adm-border-mid);
}

.glpd-widget-section {
    margin-block-start: 1.5rem;
}

.glpd-widget-section-title {
    margin: 0 0 1rem 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--adm-text-primary);
}

.glpd-widget-section-body {
    min-height: 40px;
    /* MR-210: this container hosts _buildTable()'s <table class="glpd-table">
       (Completion by Department / Direct Reports / Location tables) with no
       dedicated wrapper of its own — without overflow-x:auto here, a wide
       table (long department/learner names) forces document.scrollWidth to
       expand at narrow viewports (H5 violation). Harmless for the widget
       types that render grids/text instead of a table (no overflow occurs
       unless content actually exceeds the container). */
    overflow-x: auto;
}

.glpd-widget-loading,
.glpd-widget-empty {
    color: var(--adm-text-muted);
    font-size: 13px;
    margin: 0;
    padding-block: 0.5rem;
}

.glpd-widget-footnote {
    color: var(--adm-text-muted);
    font-size: 11px;
    margin-block-start: 0.75rem;
    margin-block-end: 0;
}

/* ── New Joiners KPI cards ─────────────────────────────────────────────── */

.glpd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.glpd-kpi-card {
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-md);
    padding: 1rem 1.25rem;
    transition: border-color var(--adm-transition);
}

.glpd-kpi-card:hover {
    border-color: var(--adm-border-mid);
}

.glpd-kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
    margin-block-end: 0.5rem;
}

.glpd-kpi-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--adm-text-primary);
    overflow-wrap: break-word;
}

.glpd-kpi-sub {
    font-size: 12px;
    color: var(--adm-text-muted);
    margin-block-start: 0.375rem;
}

/* ── Readiness Indicators cards ────────────────────────────────────────── */

.glpd-ri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.glpd-ri-card {
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-inline-start: 3px solid var(--adm-border-mid);
    border-radius: var(--adm-radius-md);
    padding: 1rem 1.25rem;
}

/* status-driven accent — never blended into a single number, only a visual cue */
.glpd-ri-card--available {
    border-inline-start-color: var(--adm-green);
}

.glpd-ri-card--not-available {
    border-inline-start-color: var(--adm-text-muted);
}

.glpd-ri-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
    margin-block-end: 0.5rem;
}

.glpd-ri-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--adm-text-primary);
    line-height: 1.1;
}

.glpd-ri-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--adm-text-muted);
    background: var(--adm-border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}

.glpd-ri-reason {
    font-size: 12px;
    color: var(--adm-text-secondary);
    margin: 0.5rem 0 0 0;
    line-height: 1.4;
}

/* ── GLPD-7: Completion by Department / Location / Direct Reports table ─── */

.glpd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.glpd-table th,
.glpd-table td {
    text-align: start;
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--adm-border);
}

.glpd-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
}

.glpd-table td {
    color: var(--adm-text-primary);
}

/* ── GLPD-7: KPI Trend chips (quarter-over-quarter delta) ─────────────────── */

.glpd-trend-good { color: var(--adm-green); }
.glpd-trend-bad  { color: var(--adm-red); }
.glpd-trend-flat { color: var(--adm-text-muted); }

/* ── GLPD-7: Direct Reports Induction Status badges ───────────────────────── */

.glpd-status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
}

.glpd-status-badge--completed    { background: var(--adm-green-glow); color: var(--adm-green); }
.glpd-status-badge--in_progress  { background: var(--adm-teal-glow);  color: var(--adm-teal); }
.glpd-status-badge--overdue      { background: var(--adm-red-glow);   color: var(--adm-red); }
.glpd-status-badge--not_assigned { background: var(--adm-border);     color: var(--adm-text-muted); }

/* ── GLPD-7: Audit Ready Records export button ────────────────────────────── */

.glpd-audit-pack-btn {
    /* Text color matches admin.css's own .adm-btn--primary convention
       (dark-on-teal, not white-on-teal) — measured contrast on the dark-theme
       teal token (#00b4a2) is ~7.4:1 for #0a0e1a vs. ~2.6:1 for white, so
       white would fail WCAG 2.1 AA's 4.5:1 minimum for this 13px/600-weight
       label. No dedicated "on-accent" design token exists yet in this
       codebase; matching the already-shipped admin.css value is the safest
       choice available rather than introducing a new, unreviewed one. */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    font-size: 13px;
    font-weight: 600;
    color: #0a0e1a;
    background: var(--adm-teal);
    border: none;
    border-radius: var(--adm-radius-sm);
    cursor: pointer;
    transition: background-color var(--adm-transition), opacity var(--adm-transition);
}

.glpd-audit-pack-btn:hover:not(:disabled) {
    opacity: 0.9;
}

.glpd-audit-pack-btn:focus-visible {
    outline: 2px solid var(--adm-teal);
    outline-offset: 2px;
}

.glpd-audit-pack-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── GLPD-7: Overview / My Team top-level tabs ────────────────────────────── */
/* Structural rules (.tabs/.tabs__list/.tabs__tab/.tabs__panel) already ship
   in tenant-shell.css — this is a page-local spacing tweak only. */

.glpd-top-tabs {
    margin-block-start: 0.5rem;
}

/* ── Mobile Responsiveness Audit (differential, 2026-09-11) ───────────────── */
/* MR-209: `.glpd-dashboard-page .adm-input` (0-2-0 specificity) is this
   page-local scoped copy of the shared .adm-input primitive — it does NOT
   inherit tenant-shell.css's own `@media (max-width:768px) { .adm-input {
   font-size:16px } }` fix (MR-003), because that global rule is unscoped
   (0-1-0) and therefore loses the specificity contest to this file's
   .glpd-dashboard-page prefix regardless of viewport/media query. Confirmed
   live: the LP selector (<select class="adm-input">) and both from/to date
   <input>s render at font-size:13px / height:39px at 375, 414, and 768px —
   an iOS Safari auto-zoom trigger (Rule 6) and a sub-44px touch target
   (Rule 1) on every one of this page's three filter-bar controls. */
@media (max-width: 768px) {
    .glpd-dashboard-page .adm-input {
        font-size: 16px; /* prevent iOS Safari auto-zoom on focus */
        min-height: 44px;
        box-sizing: border-box;
    }
}

/* MR-211: .glpd-audit-pack-btn's padding (0.55rem vertical) + 13px font
   resolves to ~33-36px effective height — below the 44px minimum tap target
   (Rule 1). This is the only custom (non-.adm-btn) button on this page. */
@media (max-width: 768px) {
    .glpd-audit-pack-btn {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glpd-kpi-card,
    .glpd-audit-pack-btn,
    .glpd-dashboard-page .adm-stat-card,
    .glpd-dashboard-page .adm-input {
        transition: none;
    }
}