/* ============================================================
   NEW UI - MY PERFORMANCE EXECUTIVE BOARDS (shared chrome)

   One stylesheet behind every redesigned My Performance board. Each board's
   root div carries .nui-mp-board plus its own class:

       Director   /Trackers.MyPerformanceDirector   .nui-mp-board .nui-mp-director
       RVP        /Trackers.MyPerformanceRvp        .nui-mp-board .nui-mp-rvp

   SCOPE - every selector here carries .nui-mp-board. The obvious hook,
   .dashboard-widget-area, is shared by 141 templates and this section chrome
   must not reach any of them. Board-specific rules use the board's own class
   and belong in the section they modify, not in a separate file - the boards
   are the same design with different section lists, and splitting them into a
   file each is what would let them drift.

   Design sources: Director = project 6528a456, RVP = project 21542f19, both
   uploads/my_performance_mockup_24_2.html. The two mockups share their whole
   stylesheet apart from the sections each board adds.

   SOURCE FIDELITY - neither design file could be read whole. A ~244KB inline
   PNG (the CER Standings placeholder) sits early in each body and exceeds the
   design MCP's 256KB per-file cap, so everything after it truncates. These
   rules are ported from the files' complete <style> blocks, which survived
   intact and carry a commented block per section, cross-checked against the
   projects' rendered screenshots.

   NOT PORTED - both mockups ship a floating "Tweaks" panel (#tw) driving
   density, two-column layout, panel collapse, table capping and zoom. That is
   preview chrome for evaluating the design, not a product feature.
   ============================================================ */

/* ==========================================================================
   0. TOKENS
   The mockup's :root, re-declared on the page root. Kept as custom properties
   rather than inlined so the gradients below read the same as the source.
   ========================================================================== */
.nui-mp-board {
    --nui-d-navy: #0074C5;
    --nui-d-navy-dark: #005a99;
    --nui-d-teal: #00AEC4;
    --nui-d-red: #C0392B;
    --nui-d-orange: #E3A50E;
    --nui-d-purple: #57327C;
    /* These reference the AA design system rather than restating hexes. The
       Director mockup literally wrote --ink: var(--aa-ink, #1c2b3a) - the token
       with a fallback - and an earlier revision of this file kept only the
       fallback, which is how the exec boards drifted to a different ink, muted
       and border colour from the coach board. The RVP and superuser mockups
       both use the --aa-* values outright, so this is what 2 of the 3 designs
       already specify. */
    --nui-d-ink: var(--aa-ink, #222831);
    --nui-d-muted: var(--aa-grey-500, #7B8E92);
    --nui-d-line: var(--aa-grey-100, #EEF1F2);
    --nui-d-brand-blue: #0074C5;
    --nui-d-brand-teal: #00AEC4;

    --nui-d-card-min: 150px;
    --nui-d-panel-pad: 16px;
    --nui-d-panel-gap: 16px;
    --nui-d-card-pad: 14px;
    --nui-d-value-size: 26px;

    color: var(--nui-d-ink);
}

/* ==========================================================================
   1. SECTION CHROME
   Each widget's .panel becomes the mockup's .panel: 14px radius, the two-layer
   shadow from the source, and an uppercase Montserrat title rule.
   ========================================================================== */
.nui-mp-board .widget-container {
    margin-bottom: 0;
}

.nui-mp-board .widget-container > .widget.panel {
    background: #fff;
    border: 1px solid var(--nui-d-line);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(26, 26, 26, 0.08), 0 6px 16px rgba(26, 26, 26, 0.08);
    padding: var(--nui-d-panel-pad) calc(var(--nui-d-panel-pad) + 2px) calc(var(--nui-d-panel-pad) + 4px);
    margin-bottom: var(--nui-d-panel-gap);
    overflow: visible;
}

.nui-mp-board .widget-container > .widget.panel > .widget-header {
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 14px 0;
    border-bottom: 1px solid var(--nui-d-line);
    padding-bottom: 10px;
}

.nui-mp-board .widget-header .panel-title,
.nui-mp-board .widget-header .widget-title {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    /* 13px/.04em to match the coach board's section headers, not the mockup's
       14px/.03em - the four boards sit side by side in one product. */
    font-size: 13px;
    color: var(--nui-d-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}

/* The panel now owns the padding; the body must not add a second inset. */
.nui-mp-board .widget-container > .widget.panel > .panel-body,
.nui-mp-board .widget-container > .widget.panel > .widget-content {
    padding: 0;
    background: none;
    border: 0;
    min-height: 0;
}

/* The filter bar is chrome, not a section - no card, no title. */
.nui-mp-board .aaw-my-performance-school-select > .widget.panel > .widget-header {
    display: none;
}

.nui-mp-board .aaw-my-performance-school-select > .widget.panel {
    padding: 10px 14px;
    border-radius: 6px;
    box-shadow: none;
}

/* ==========================================================================
   1b. REGION GATE EMPTY STATE
   Shown in place of every section until a region (or a narrower district) is
   picked. Same panel chrome as a real section so the page does not appear to
   have failed to load - it reads as a prompt, not an error.
   ========================================================================== */
.nui-mp-board .nui-mp-board-empty {
    background: #fff;
    border: 1px solid var(--nui-d-line);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(26, 26, 26, 0.08), 0 6px 16px rgba(26, 26, 26, 0.08);
    padding: 34px 28px;
    margin-bottom: var(--nui-d-panel-gap);
    text-align: center;
}

.nui-mp-board .nui-mp-board-empty-title {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--nui-d-ink);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 8px;
}

.nui-mp-board .nui-mp-board-empty-body {
    font-family: Montserrat, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nui-d-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ==========================================================================
   1c. STICKY FILTER BAR

   These boards are long and every section depends on the selection, so the
   filter bar pins to the top of the scroll container instead of scrolling away.

   The scroll container is the board's own root (.h100.overflauto), NOT the
   window, so top:0 resolves against that. Verified there is no overflow:hidden
   between .widget-container and it - style.css only sets that on
   .widget-container .widget-content > div, which is INSIDE each widget and so
   is not an ancestor of the bar. An overflow:hidden anywhere up that chain
   silently disables position:sticky with no error.

   The bar needs its own background and a z-index above the section cards, which
   carry a two-layer shadow, or content scrolls through it.
   ========================================================================== */
.nui-mp-board .widget-container.aaw-my-performance-school-select {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--nui-d-page-bg, #eef1f4);
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Dimmed, non-interactive while the sections below reload. Deliberately does
   not hide or unmount anything - that is what used to make the bar disappear
   mid-selection. */
.nui-mp-board .aaw-my-performance-school-select .is-refreshing,
.nui-my-performance .aaw-my-performance-school-select .is-refreshing {
    opacity: .55;
    pointer-events: none;
    transition: opacity .12s ease;
}

/* ==========================================================================
   2. SCOREBOARD
   my-scoreboard.html emits .summary-card in a flex row with its own inline
   <style>. Those rules are plain (no !important), so scoped selectors here
   outrank them. The mockup replaces the flex row with an auto-fit grid so the
   cards reflow instead of squeezing below their legible width.
   ========================================================================== */
.nui-mp-board .my-scoreboard-wrapper {
    padding: 0;
}

.nui-mp-board .my-scoreboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--nui-d-card-min), 1fr));
    gap: 10px;
}

.nui-mp-board .summary-card {
    flex: none;
    min-width: 0;
    border-radius: 6px;
    padding: var(--nui-d-card-pad) var(--nui-d-card-pad) calc(var(--nui-d-card-pad) - 2px);
    color: #fff;
    font-family: Montserrat, sans-serif;
    position: relative;
    overflow: hidden;
}

/* The mockup leads with the value and drops the label beneath it, where the
   live widget leads with the label. Order is flipped with flex rather than by
   editing the template, so the widget keeps rendering unchanged everywhere else. */
.nui-mp-board .summary-card {
    display: flex;
    flex-direction: column;
}

.nui-mp-board .summary-card .card-value {
    order: 1;
    font-size: var(--nui-d-value-size);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0;
}

.nui-mp-board .summary-card .card-label {
    order: 2;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 8px 0 0;
    opacity: .95;
}

.nui-mp-board .summary-card .card-label i {
    display: none;
}

.nui-mp-board .summary-card .card-link {
    order: 3;
    font-size: 10.5px;
    font-weight: 400;
    opacity: .75;
    margin-top: 2px;
    font-family: Montserrat, sans-serif;
}

/* Gradients: the mockup re-cut every one of these to the AA brand ramp. The
   widget's own palette (#1a5276, #148f77, #b71c1c ...) predates the tokens. */
.nui-mp-board .summary-card.card-primary {
    background: linear-gradient(160deg, #2a8fd6, var(--nui-d-brand-blue));
    min-width: 0;
}

.nui-mp-board .summary-card.card-cer {
    background: linear-gradient(160deg, #22c3d8, var(--nui-d-brand-teal));
}

.nui-mp-board .summary-card.card-zero-credits {
    background: linear-gradient(160deg, #d15a4d, var(--nui-d-red));
}

.nui-mp-board .summary-card.card-warning {
    background: linear-gradient(160deg, #f0bb44, var(--nui-d-orange));
}

.nui-mp-board .summary-card.card-alert {
    background: linear-gradient(160deg, #7a54a0, var(--nui-d-purple));
}

/* Goal chip, top-right. */
.nui-mp-board .summary-card .card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, .2);
    padding: 2px 7px;
    border-radius: 10px;
}

/* Second scoreboard row: the two 90-day-step cards are light fills with dark
   ink, so the shared white-on-gradient treatment above has to be undone. */
.nui-mp-board .my-scoreboard-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.nui-mp-board .summary-card.card-steps-ok {
    background: linear-gradient(160deg, #c8f0d0, #a5e3b4);
    color: #14532d;
}

.nui-mp-board .summary-card.card-steps-late {
    background: linear-gradient(160deg, #fcd6d6, #f7b4b4);
    color: #7f1d1d;
}

.nui-mp-board .summary-card.card-steps-ok .card-badge,
.nui-mp-board .summary-card.card-steps-late .card-badge {
    background: rgba(0, 0, 0, .08);
}

/* ==========================================================================
   3. TILE SECTIONS - WEEKLY ATTENDANCE, CASELOAD HEALTH
   Both are built from the shared aa-tile system. The mockup recasts the tiles
   as its gradient cards but KEEPS the widgets' own grouping, which is what
   .group-label is for in the source stylesheet ("grouping headers within a
   panel, e.g. Trending Positive/Negative" - Caseload Health's own subcategory
   labels).

   TARGETING NOTE. Everything here hangs off .aa-tile-metric and the group
   label. .box-stack, .box-x2/x3/x4 are deliberately untouched: .box-stack is
   one of the app's flex rows and those box-* classes are WIDTH WRAPPERS
   (flex:0 1 33.33% / 50% / 25% with matching max-width). An earlier revision
   overrode .box-stack to an auto-fit grid, which made those capped wrappers the
   grid items - every tile drew at a third of a much wider track and the rows
   came out scattered. The native flex row already lays these out correctly.

   Card colour follows is-aa-primary-L70 / -L90, the widgets' own headline vs
   supporting distinction, rather than :nth-of-type. Positional selectors do not
   work here anyway - each .aa-tile-metric is an only child of its wrapper, so
   every one of them is :nth-of-type(1).
   ========================================================================== */
.nui-mp-board .aaw-weekly-efforts .text-large.fw600,
.nui-mp-board .aaw-caseload-health .text-large.fw600 {
    font-family: Montserrat, sans-serif;
    /* !important because style.css sets .text-large{font-size:1.25rem!important},
       and !important beats any amount of specificity. */
    font-size: 11px !important;
    font-weight: 700;
    color: var(--nui-d-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 16px 0 8px;
    padding: 0;
}

.nui-mp-board .aaw-weekly-efforts .d-flex.f-dir-column > div:first-child > .text-large.fw600,
.nui-mp-board .aaw-caseload-health div:first-child > .text-large.fw600 {
    margin-top: 0;
}

.nui-mp-board .aaw-weekly-efforts .aa-tile-metric,
.nui-mp-board .aaw-caseload-health .aa-tile-metric {
    border-radius: 6px;
    padding: var(--nui-d-card-pad);
    font-family: Montserrat, sans-serif;
    position: relative;
    overflow: hidden;
    border: 0;
    color: #fff;
    background: linear-gradient(160deg, #22c3d8, var(--nui-d-brand-teal));
}

/* Headline tiles - Total Attendance, Total Enrolled, Active GCs, Withdrawals. */
.nui-mp-board .aaw-weekly-efforts .aa-tile-metric.is-aa-primary-L70,
.nui-mp-board .aaw-caseload-health .aa-tile-metric.is-aa-primary-L70 {
    background: linear-gradient(160deg, #2a8fd6, var(--nui-d-brand-blue));
}

.nui-mp-board .aaw-weekly-efforts .aa-tile-value,
.nui-mp-board .aaw-caseload-health .aa-tile-value {
    padding: 0;
    display: block;
}

/* The value carries an inline ng-style colour on some tiles (Withdrawals MTD
   is set red). On a filled card that is unreadable, so it is overridden here -
   inline styles lose to !important. The card fill is what signals severity in
   this design. */
.nui-mp-board .aaw-weekly-efforts .aa-tile-value strong,
.nui-mp-board .aaw-caseload-health .aa-tile-value strong {
    font-size: var(--nui-d-value-size);
    font-weight: 800;
    line-height: 1;
    color: #fff !important;
}

/* The percentage rides along inside the value as .fs2xl. The mockup lifts it
   out into the card's top-right chip, which is a pure presentation move - no
   template change needed. */
.nui-mp-board .aaw-weekly-efforts .aa-tile-value .fs2xl,
.nui-mp-board .aaw-caseload-health .aa-tile-value .fs2xl {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px !important;
    font-weight: 700;
    background: rgba(255, 255, 255, .2);
    padding: 2px 7px;
    border-radius: 10px;
    color: #fff !important;
    line-height: 1.4;
}

.nui-mp-board .aaw-weekly-efforts .aa-tile-label,
.nui-mp-board .aaw-caseload-health .aa-tile-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-top: 8px;
    padding: 0;
    opacity: .95;
    color: #fff !important;
}

.nui-mp-board .aaw-weekly-efforts .aa-tile-question,
.nui-mp-board .aaw-caseload-health .aa-tile-question {
    color: #fff;
    opacity: .7;
}

/* ==========================================================================
   3b. ENROLLMENT (RVP board)

   The mockup's <!-- CURRENT MONTH ACTION --> panel. Same aa-tile system as
   section 3, but this widget's value row is a flex box (.aa-tile-value carries
   d-flex) with the "% of Goal" / "% of Starting Enrollment" figure as a second
   flex child pinned right by INLINE styles. So it gets its own rules: setting
   display:block on the value here (as section 3 does) would drop that figure
   onto its own line, and the inline styles cannot be outranked without
   !important on each one - not worth it, the figure reads correctly where the
   widget already puts it.

   The mockup paints all six cards brand blue. The widget instead colours
   "Current Total Enrolled" green / yellow / red by percentToGoal, which is a
   real status signal the flat mockup drops - so the fill below is applied only
   to tiles NOT carrying an is-aa-accent-* class, and those keep their status
   colour.
   ========================================================================== */
.nui-mp-board .aaw-current-month-action-widget .aa-tile-metric {
    border-radius: 6px;
    padding: var(--nui-d-card-pad);
    font-family: Montserrat, sans-serif;
    position: relative;
    overflow: hidden;
    border: 0;
    color: #fff;
}

.nui-mp-board .aaw-current-month-action-widget .aa-tile-metric:not([class*="is-aa-accent"]) {
    background: linear-gradient(160deg, #2a8fd6, var(--nui-d-brand-blue));
}

.nui-mp-board .aaw-current-month-action-widget .aa-tile-value {
    padding: 0;
}

.nui-mp-board .aaw-current-month-action-widget .aa-tile-value strong {
    font-size: var(--nui-d-value-size);
    font-weight: 800;
    line-height: 1;
    color: #fff !important;
}

/* The goal figure - the mockup's badge, in the position the widget gives it. */
.nui-mp-board .aaw-current-month-action-widget .aa-tile-value > div:last-child {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    color: #fff !important;
    opacity: .9;
}

.nui-mp-board .aaw-current-month-action-widget .aa-tile-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-top: 8px;
    padding: 0;
    opacity: .95;
    color: #fff !important;
}

.nui-mp-board .aaw-current-month-action-widget .text-large.fw600 {
    font-size: 11px !important;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    color: var(--nui-d-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px;
    padding: 0;
}

.nui-mp-board .aaw-current-month-action-widget .aa-tile-question {
    color: #fff;
    opacity: .7;
}

/* ==========================================================================
   3c. ACADEMY MATRICES (network board)

   Weekly Attendance / Achievement / Caseload Health on the superuser board are
   the Academy Details matrices: a row per district with its academies nested
   underneath. The mockup styles them as .region-row / .acad-row inside its
   .staff-table treatment, so they get the same table chrome as CER Staff
   Performance rather than the tile treatment the other boards use.

   ROW TARGETING. There is no region/academy class on these rows - the widgets
   distinguish the two levels through the fill classes their ng-class already
   sets from row.isSite:

       district : is-aa-primary-L80 ($even) / is-aa-primary-L90 ($odd)
       academy  : is-white ($odd) / is-aa-accent-gray-L90 ($even)

   so those are the hooks used below. The templates also indent the academy
   name by 14px inline, which is left alone - it is the same cue the mockup
   gives with padding-left on .acad-row.
   ========================================================================== */
.nui-mp-board .aaw-attendance-matrix table,
.nui-mp-board .aaw-achievement-matrix table,
.nui-mp-board .aaw-caseload-health-matrix table {
    width: 100%;
    border-collapse: collapse;
    font-family: Montserrat, sans-serif;
    font-size: 10.5px;
    margin: 0;
}

.nui-mp-board .aaw-attendance-matrix thead th,
.nui-mp-board .aaw-achievement-matrix thead th,
.nui-mp-board .aaw-caseload-health-matrix thead th {
    background: var(--nui-d-navy-dark);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 8px 3px;
    text-align: center;
    border: 0;
}

.nui-mp-board .aaw-attendance-matrix tbody td,
.nui-mp-board .aaw-achievement-matrix tbody td,
.nui-mp-board .aaw-caseload-health-matrix tbody td {
    padding: 7px 3px;
    text-align: center;
    border-bottom: 1px solid var(--nui-d-line);
    color: var(--nui-d-ink);
}

/* District rows - the mockup's .region-row. */
.nui-mp-board .aaw-attendance-matrix tbody tr.is-aa-primary-L80 td,
.nui-mp-board .aaw-attendance-matrix tbody tr.is-aa-primary-L90 td,
.nui-mp-board .aaw-achievement-matrix tbody tr.is-aa-primary-L80 td,
.nui-mp-board .aaw-achievement-matrix tbody tr.is-aa-primary-L90 td,
.nui-mp-board .aaw-caseload-health-matrix tbody tr.is-aa-primary-L80 td,
.nui-mp-board .aaw-caseload-health-matrix tbody tr.is-aa-primary-L90 td {
    background: #e9f1f8;
    font-weight: 700;
    color: var(--nui-d-navy-dark);
}

/* Academy rows - the mockup's .acad-row. */
.nui-mp-board .aaw-attendance-matrix tbody tr.is-aa-accent-gray-L90 td,
.nui-mp-board .aaw-achievement-matrix tbody tr.is-aa-accent-gray-L90 td,
.nui-mp-board .aaw-caseload-health-matrix tbody tr.is-aa-accent-gray-L90 td {
    background: #f5f8fa;
}

/* ==========================================================================
   4. ACHIEVEMENT MATRIX
   Weekly and monthly achievement merged into one table: rows are metrics,
   columns are the two periods. Weekly-only metrics get an .empty monthly cell
   - that state exists in the source stylesheet precisely because three of the
   five rows have no monthly counterpart.
   ========================================================================== */
.nui-mp-board .nui-d-metric-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
}

.nui-mp-board .nui-d-metric-table thead th {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--nui-d-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
    padding: 0 8px 6px;
}

.nui-mp-board .nui-d-metric-table thead th:first-child {
    text-align: left;
}

.nui-mp-board .nui-d-metric-table td {
    padding: 0;
}

.nui-mp-board .nui-d-metric-label {
    font-family: Montserrat, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nui-d-ink);
    padding: 0 10px 0 4px;
}

.nui-mp-board .nui-d-metric-cell {
    border-radius: 6px;
    padding: 7px 12px;
    color: #fff;
    text-align: center;
    font-family: Montserrat, sans-serif;
    min-width: 90px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    background: linear-gradient(160deg, #2a8fd6, var(--nui-d-brand-blue));
}

.nui-mp-board .nui-d-metric-cell .value {
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}


.nui-mp-board .nui-d-metric-cell.empty {
    background: #f2f4f6;
    color: var(--nui-d-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 9px 12px;
}

/* ==========================================================================
   5. CLARK 4-YEAR GRADUATION PROJECTION

   The mockup's .clark-* block was traced FROM this widget, not designed against
   a blank page - graduation-projection-widget.html already ships the same
   anatomy under gpw-* names:

       .clark-num        -> .gpw-rank            .clark-seg   -> .gpw-bar-*
       .clark-name       -> .gpw-lb-name         .clark-trend -> .gpw-lb-versus
       .clark-track      -> .gpw-lb-bar-area     .gc-count    -> .gpw-lb-gcs
       .clark-goal-line  -> .gpw-goal-line

   and the measurements barely differ (name 130px vs 120px, track 30px vs 26px).
   An earlier revision of this file carried the mockup's .clark-* rules verbatim,
   which matched nothing in the app and left the section rendering untouched
   while looking, in the stylesheet, like it had been styled.

   So this is only the delta: the board's Montserrat/token treatment over the
   widget's own layout. The goal line keeps its GOAL flag and the trend keeps
   its red/green pills - both carry more meaning than the mockup's flat
   equivalents, and neither fights the design.
   ========================================================================== */
.nui-mp-board .gpw-lb-name,
.nui-mp-board .gpw-rank,
.nui-mp-board .gpw-lb-versus-pill,
.nui-mp-board .gpw-lb-gcs {
    font-family: Montserrat, sans-serif;
}

.nui-mp-board .gpw-lb-bar-area {
    height: 26px;
    background: #eef1f4;
}

.nui-mp-board .gpw-lb-gcs {
    font-size: 10px;
    font-weight: 500;
    color: var(--nui-d-muted);
}

.nui-mp-board .gpw-lb-name {
    color: var(--nui-d-ink);
}

/* ==========================================================================
   5b. DAYS IN COURSE

   Only the toggle. The mockup draws this section's chart as .bars / .stack /
   .seg divs, but that is the mockup author's static re-creation of it - the
   real widget renders into #daysInCourseChart through a charting library that
   owns that subtree, so those class names have nothing to attach to and the
   series styling is not CSS's to set.

   The widget's Column Graph / Grid Breakdown switch is already the mockup's
   .toggle-row, so this is just its type treatment.
   ========================================================================== */
.nui-mp-board .dic-toggle-btn {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--nui-d-line);
    background: #fff;
    color: var(--nui-d-muted);
    padding: 6px 14px;
    border-radius: 5px;
}

.nui-mp-board .dic-toggle-btn.dic-toggle-active {
    background: var(--nui-d-navy);
    color: #fff;
    border-color: var(--nui-d-navy);
}

/* ==========================================================================
   6. GC SUCCESS CENTER SUMMARY
   NOT STYLED HERE - shared with the coach board, same as section 7.

   new-ui-my-performance.css section 6 is the single source of truth and its
   .nui-gcsc-* rules now carry .nui-mp-board alongside .nui-my-performance.

   An earlier revision restyled this section to the exec mockups' own treatment
   - four full-colour gradient cards with white text, on a 1.35/1.5/1.5/.85
   grid - against the coach board's four pale panels with a single brand-blue
   feature card on a 1.25/1.5/1.35/.85 grid. Same widget, same data, two
   visibly different designs depending on which board you opened. Sharing the
   rules is what keeps the four boards reading as one product; if the gradient
   treatment is preferred, change it in the coach sheet so every board moves.
   ========================================================================== */

/* ==========================================================================
   7. MY PROGRESS BANDS SUMMARY
   NOT STYLED HERE - this board renders it exactly as the coach board does.

   new-ui-my-performance.css section 7 is the single source of truth, and its
   .nui-bands-* / .nui-tile-link rules now carry a .nui-mp-board scope
   alongside .nui-my-performance. Sharing rather than copying is deliberate: an
   earlier revision of this file restyled the cards to the mockup's own
   treatment (band range as a 32px headline, count in a teal pill, percentage
   and share bar hidden), which meant the same widget looked different on the
   two boards and the two copies would have drifted apart on the next edit.

   Card fills are not CSS on either board - progress-bands-cards.controller.js
   sets them per band via ng-style, so both boards get the same ramp for free.
   ========================================================================== */

/* ==========================================================================
   8. CER STAFF PERFORMANCE
   Two stacked tables (Content Coach, then GCA) rather than the live widget's
   side-by-side 50/50 split - at director width the paired grids each lost
   about half their columns to horizontal scroll.
   ========================================================================== */
.nui-mp-board .nui-d-staff-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nui-mp-board .nui-d-staff-col {
    flex: 1;
    min-width: 340px;
    border: 1px solid var(--nui-d-line);
    border-radius: 8px;
    overflow: hidden;
}

.nui-mp-board .nui-d-staff-banner {
    background: linear-gradient(160deg, #0091d6, var(--nui-d-brand-blue));
    color: #fff;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .04em;
    padding: 10px 12px;
    text-transform: uppercase;
}

.nui-mp-board .nui-d-staff-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Montserrat, sans-serif;
    font-size: 10.5px;
    margin: 0;
}

.nui-mp-board .nui-d-staff-table thead th {
    background: var(--nui-d-navy-dark);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 8px 3px;
    text-align: center;
    border: 0;
}

/* Group band - CER / WEEKLY ATTENDANCE spanning their sub-columns. */
.nui-mp-board .nui-d-staff-table thead th.group {
    background: var(--nui-d-brand-blue);
    font-size: 11px;
    letter-spacing: .05em;
    padding: 7px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.nui-mp-board .nui-d-staff-table thead th.grp-start {
    border-left: 2px solid #fff;
}

.nui-mp-board .nui-d-staff-table tbody td.grp-start {
    border-left: 2px solid var(--nui-d-line);
}

.nui-mp-board .nui-d-staff-table tbody td {
    padding: 7px 3px;
    text-align: center;
    border-bottom: 1px solid var(--nui-d-line);
    color: var(--nui-d-ink);
}

.nui-mp-board .nui-d-staff-table tbody tr:nth-child(odd) {
    background: #f5f8fa;
}

.nui-mp-board .nui-d-staff-subhead td {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--nui-d-muted);
    background: #eef1f4;
    text-align: center;
}

.nui-mp-board .nui-d-staff-totalrow td {
    font-weight: 800;
    color: var(--nui-d-ink);
    background: #eef1f4;
    border-bottom: none;
}

.nui-mp-board .nui-d-staff-cer {
    font-weight: 700;
    color: var(--nui-d-brand-blue);
}

.nui-mp-board .nui-d-sort-ind {
    display: inline-block;
    margin-left: 4px;
    opacity: .55;
    font-size: 9px;
    vertical-align: middle;
}

.nui-mp-board .nui-d-staff-links {
    display: flex;
    gap: 22px;
    margin-top: 14px;
    font-family: Montserrat, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}

.nui-mp-board .nui-d-staff-links a {
    color: var(--nui-d-brand-blue);
    text-decoration: none;
}

.nui-mp-board .nui-d-staff-links a:hover {
    color: #005a9c;
    text-decoration: underline;
}

/* ==========================================================================
   9. RESPONSIVE
   The mockup is a fixed 1180px preview and never has to reflow. These are the
   collapses the real content region needs below that width.
   ========================================================================== */
/* Neither the GC Success Center grid nor the bands grid is narrowed here -
   new-ui-my-performance.css owns both breakpoint sets (sections 6 and 7) and
   they now apply to every board. Duplicating them would just be a second place
   to forget. */
@media (max-width: 780px) {
    /* gpw-* names, per section 5 - the widget's own classes, not the mockup's. */
    .nui-mp-board .gpw-lb-name {
        width: 90px;
    }

    .nui-mp-board .gpw-lb-versus {
        width: 78px;
    }
}