/* ============================================================
   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: #00344a;
    --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;
}

/* E20-0000: the design's .panel is an 8px radius with a 1px border and NO
   shadow. This was 14px with a two-layer shadow, ported from an earlier
   revision. The only box-shadows in the current design file belong to #tw /
   #tw-open - the floating Tweaks preview panel, deliberately not ported - so
   there is no shadow on a real section anywhere in the design. */
.nui-mp-board .widget-container > .widget.panel,
.nui-mp-board .nui-mp-cols2-group {
    background: #fff;
    border: 1px solid var(--nui-d-line);
    border-radius: 8px;
    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;
}

/* E20-3715: the second selector was missing, so the right-hand column's group
   header ("Operating Metrics") never got the padding reset the left column's
   widget headers get - it kept Bootstrap's .panel-heading inset and sat
   indented against everything beside it. Its own children
   (.nui-mp-cols2-sub-title) were already flush, which is what made the group
   title look like the odd one out. */
.nui-mp-board .widget-container > .widget.panel > .widget-header,
.nui-mp-board .nui-mp-cols2-group > .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: 8px;
    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.

   E20-0000: re-read from project 21542f19 uploads/my_performance_mockup_24_2.html.
   Six of the seven start colours here had been ported from an earlier revision of
   that file and sat consistently duller than the design - card-primary #2a8fd6 vs
   #0091d6, card-cer #22c3d8 vs #2fd0e2, card-zero-credits #d15a4d vs #e04340,
   card-warning #f0bb44 vs #f0c04a, card-alert #7a54a0 vs #9d5cb3, and steps-ok
   shifted hue (#c8f0d0/#a5e3b4, a pure green, where the design is the teal-green
   #c3ecdd/#a5e3cb). card-steps-late already matched exactly, which is what
   identified this as a stale-revision port rather than a mapping error.
   --nui-d-navy-dark was #005a99 against the design's #00344a; it backs the dark
   table header (.staff-table thead th) so the Academy Performance header read
   markedly lighter than the mockup. */
.nui-mp-board .summary-card.card-primary {
    background: linear-gradient(160deg, #0091d6, var(--nui-d-brand-blue));
    min-width: 0;
}

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

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

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

.nui-mp-board .summary-card.card-alert {
    background: linear-gradient(160deg, #9d5cb3, 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, #c3ecdd, #a5e3cb);
    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, #2fd0e2, 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, #0091d6, 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, #0091d6, 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, #0091d6, 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;
    }
}


/* ==========================================================================
   .nui-mp-exec - the shared exec-board hook

   The RVP and Director designs are the same treatment over different section
   lists, so everything both boards want is scoped to .nui-mp-exec, which each
   template carries alongside its own class. Two families stay board-specific
   because only one board has them: the Academy Performance table (.nui-acad-*)
   and the Enrollment row's box-x7 override, both RVP. Network is deliberately
   excluded until its own design file has been read.
   ========================================================================== */

/* ==========================================================================
   TWO-COLUMN ROW  (the design's .cols-2)

   Performance 360 Metrics beside an Operating Metrics panel that holds Weekly
   Attendance and Achievement stacked. Driven by RVP_ROWS in
   myPerformance.controller.js, not by widget order - see myPerformanceRvp.html.

   minmax(0, 1fr) rather than 1fr, straight from the design: a wide table in
   either cell would otherwise size the track to its content and push the grid
   past the page.
   ========================================================================== */
.nui-mp-board .nui-mp-cols2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--nui-d-panel-gap);
    align-items: stretch;
    margin-bottom: var(--nui-d-panel-gap);
}

/* align-items:stretch on the grid plus a column flex here is what finishes the
   two panels level regardless of which holds more rows. */
.nui-mp-board .nui-mp-cols2-col {
    display: flex;
    flex-direction: column;
    gap: var(--nui-d-panel-gap);
    min-width: 0;
}

/* Inside a cell the grid gap does the spacing, so the per-panel bottom margin
   the full-width rows rely on has to come off or the columns sit unevenly. */
.nui-mp-board .nui-mp-cols2-col > .widget-container {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.nui-mp-board .nui-mp-cols2-col > .widget-container > .widget.panel {
    margin-bottom: 0;
    height: 100%;
}

.nui-mp-board .nui-mp-cols2-group {
    margin-bottom: 0;
    height: 100%;
}

/* The group panel supplies the padding; its body must not add a second inset. */
.nui-mp-board .nui-mp-cols2-group-body {
    padding: 0;
}

/* Weekly Attendance and Achievement lose their own panel chrome here - the
   design titles the PAIR ("Operating Metrics") and marks each half with a
   small label only. */
.nui-mp-board .nui-mp-cols2-sub {
    padding: 0;
    margin: 0;
}

.nui-mp-board .nui-mp-cols2-sub + .nui-mp-cols2-sub {
    margin-top: 16px;
}

/* The design's .group-label, verbatim. */
.nui-mp-board .nui-mp-cols2-sub-title {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--nui-d-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px;
}

/* ==========================================================================
   PERFORMANCE 360 METRICS  (the design's .score-row.score-2x2 + .score-card)

   E20-0000: this widget's styling existed only as `.nui-my-performance
   .nui-p360*` - the staff landing page's anchor - so on the exec boards, whose
   anchor is .nui-mp-board, none of it applied and the tiles rendered as bare
   text under the panel title. These are the design's card values, keyed to the
   markup p360-metrics.html actually emits.

   Colour runs navy / teal / slate / orange down the grid, as the design shows.
   Cycled on 4n so a role returning more than four goals keeps repeating the
   ramp instead of falling out of the palette - goals are configured per region
   and role, so the count is not fixed at four.
   ========================================================================== */
/* The design's P360 panel is as tall as Operating Metrics beside it and its
   cards stretch to fill, which is what .panel.fill .score-row { flex:1;
   grid-auto-rows:1fr } does there. minmax floors the row so a two-card role
   still gets card-height rows instead of collapsing to the text height. */
/* height:100% on .nui-p360 alone was not enough: the widget directive wraps the
   template in two plain divs between .widget-content and it, and those collapse
   to content height, so the grid never saw the panel's height and the cards sat
   at their 88px floor inside a 649px panel. */
.nui-mp-board .aaw-p360-metrics .widget-content > div,
.nui-mp-board .aaw-p360-metrics .widget-content > div > div {
    height: 100%;
}

.nui-mp-board .nui-p360 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nui-mp-board .nui-p360-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(88px, 1fr);
    gap: 10px;
    flex: 1 1 auto;
    align-content: stretch;
}

.nui-mp-board .nui-p360-tile {
    border-radius: 6px;
    padding: calc(var(--nui-d-card-pad) + 2px) var(--nui-d-card-pad) calc(var(--nui-d-card-pad) + 2px);
    color: #fff;
    font-family: Montserrat, sans-serif;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.nui-mp-board .nui-p360-tile:nth-child(4n + 1) {
    background: linear-gradient(160deg, var(--nui-d-navy), var(--nui-d-navy-dark));
}

.nui-mp-board .nui-p360-tile:nth-child(4n + 2) {
    background: linear-gradient(160deg, #2fd0e2, var(--nui-d-teal));
}

.nui-mp-board .nui-p360-tile:nth-child(4n + 3) {
    background: linear-gradient(160deg, #96a6aa, var(--nui-d-muted));
}

.nui-mp-board .nui-p360-tile:nth-child(4n + 4) {
    background: linear-gradient(160deg, #f0c04a, var(--nui-d-orange));
}

/* Value and goal share a row in the markup, but the design puts the goal in a
   chip pinned to the top-right corner, so it comes out of the flow. */
.nui-mp-board .nui-p360-top {
    display: block;
}

.nui-mp-board .nui-p360-value {
    display: block;
    font-size: var(--nui-d-value-size);
    font-weight: 800;
    line-height: 1;
    padding-right: 62px;
}

.nui-mp-board .nui-p360-goal {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, .2);
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.nui-mp-board .nui-p360-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-top: 8px;
    opacity: .95;
}

/* The design has no role line in this panel. It stays in the markup for the
   staff landing page, which does show it, but is hidden here: on this board the
   role is already fixed by the filter bar's own scope, so the line was pure
   noise above the cards and pushed them out of alignment with Operating
   Metrics beside it. */
.nui-mp-board .nui-p360-role {
    display: none;
}

.nui-mp-board .nui-p360-role-unused {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--nui-d-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px;
}

.nui-mp-board .nui-p360-empty {
    font-family: Montserrat, sans-serif;
    font-size: 12.5px;
    color: var(--nui-d-muted);
    padding: 6px 0 2px;
}

/* ==========================================================================
   ACADEMY PERFORMANCE  (the design's .staff-table)

   One row per academy, two grouped header spans over a NAME column. Values are
   the design's: 10.5px Montserrat, navy-dark header, brand-blue group bands,
   2px separators at each group boundary and odd-row striping.
   ========================================================================== */
.nui-mp-board .nui-acad-scroll {
    overflow: auto;
}

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

.nui-mp-board .nui-acad-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;
    cursor: pointer;
    user-select: none;
}

/* CER / WEEKLY ATTENDANCE bands. Brand blue over the navy-dark row beneath, so
   the hairline keeps the two header rows legible where they meet. */
.nui-mp-board .nui-acad-table thead th.nui-acad-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);
    cursor: default;
}

/* Group boundaries: white against the header, line colour in the body. */
.nui-mp-board .nui-acad-table thead th.nui-acad-grp-start {
    border-left: 2px solid #fff;
}

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

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

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

.nui-mp-board .nui-acad-table tbody td.nui-acad-name {
    color: var(--nui-d-ink);
}

/* CER is the column the table exists to compare, so the design picks it out. */
.nui-mp-board .nui-acad-table tbody td.nui-acad-cer {
    color: var(--nui-d-brand-blue);
    font-weight: 700;
}

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

.nui-mp-board .nui-acad-empty {
    font-family: Montserrat, sans-serif;
    font-size: 12.5px;
    color: var(--nui-d-muted);
    padding: 6px 0 2px;
}

/* ==========================================================================
   OPERATING METRICS - trimmed to what the RVP design shows

   Scoped to .nui-mp-rvp, not the shared .nui-mp-board: the Director board draws
   from its own design file (project 6528a456) which has not been re-read yet, so
   it keeps every section until it has been checked against that file.
   ========================================================================== */

/* The design's Operating Metrics panel carries WEEKLY ATTENDANCE only. Staff
   Outreach (No of Notes, Ave # of Contacts / GC) is not in it. */
.nui-mp-exec .aaw-we-subcateg--staff-outreach {
    /* !important is required, not sloppiness: the same element carries the legacy
       .d-flex utility, which declares display:flex !important, so no amount of
       specificity beats it. */
    display: none !important;
}

/* Achievement is Courses Completed and Graduates. The other three rows report
   weekly only, so half of each row read "Not reported monthly" - and the extra
   height pushed this panel to 649px against the design's ~190px, which in turn
   stretched the Performance 360 cards beside it out of proportion. */
.nui-mp-exec .nui-d-row--weekly-only {
    display: none;
}

/* ==========================================================================
   "PERFORMANCE 360 METRICS" = MY SCOREBOARD, as the RVP design draws it

   The design shows FOUR cards in a 2x2, and they are not the widget's first
   four. Mapping design slot -> widget card:

     1  Total GCs                              .card-primary      navy
     2  Credit Earned Rate      + Courses v Goal
                                               .card-cer          teal
     3  GCs ... Course          + Credits Earned Distribution
                                               .card-zero-credits slate
     4  GCs Past 90 Days With Outstanding Steps
                                               .card-steps-late   orange

   Slot 4 lives in .my-scoreboard-steps, a second row below the cards, so both
   containers get display:contents and the 2x2 is declared on the wrapper -
   otherwise the four cannot share one grid. Dropped here because the design has
   no slot for them: .card-warning (GCs > 21 Days In Course), .card-alert (30+
   Days Since Credit) and .card-steps-ok (GCs With Outstanding 90 Day Steps).

   Scoped to .nui-mp-rvp. The Director board keeps all seven until its own
   design file (project 6528a456) has been read.
   ========================================================================== */
.nui-mp-exec .my-scoreboard-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(96px, auto);
    gap: 10px;
}

/* Both rows dissolve so their cards become direct grid items of the wrapper. */
.nui-mp-exec .my-scoreboard-cards,
.nui-mp-exec .my-scoreboard-steps {
    display: contents;
}

.nui-mp-exec .summary-card.card-warning,
.nui-mp-exec .summary-card.card-alert,
.nui-mp-exec .summary-card.card-steps-ok {
    display: none !important;
}

/* Slot colours follow the design, not the widget's own semantics: its palette
   codes by severity (zero-credits red, steps-late pale red) while the design
   runs navy / teal / slate / orange down the grid. */
.nui-mp-exec .summary-card.card-primary {
    background: linear-gradient(160deg, var(--nui-d-navy), var(--nui-d-navy-dark));
}

.nui-mp-exec .summary-card.card-zero-credits {
    background: linear-gradient(160deg, #96a6aa, var(--nui-d-muted));
}

.nui-mp-exec .summary-card.card-steps-late {
    background: linear-gradient(160deg, #f0c04a, var(--nui-d-orange));
    color: #fff;
}

/* The pale step cards carried dark ink for contrast; on the orange fill the
   shared white-on-gradient treatment applies again. */
.nui-mp-exec .summary-card.card-steps-late .card-badge {
    background: rgba(255, 255, 255, .2);
}

/* ==========================================================================
   GC SUCCESS CENTER SUMMARY - the design's four filled cards

   The widget's own stylesheet lives under .nui-my-performance, so on this board
   three of its four cards computed to the page background and read as white
   boxes. Structure is shared from that file; these are the design's colours and
   column widths.

   Colour by position, as the design runs them: slate / blue / green / teal for
   Quick Insight, Achievement Status, With Attendance, With Progress.
   ========================================================================== */
.nui-mp-exec .nui-gcsc-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.3fr 1.3fr .7fr;
    gap: 12px;
    align-items: stretch;
}

.nui-mp-exec .nui-gcsc-panel {
    border-radius: 8px;
    padding: 16px 16px 15px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 0;
}

.nui-mp-exec .nui-gcsc-grid > .nui-gcsc-panel:nth-child(1) {
    background: linear-gradient(160deg, #96a6aa, var(--nui-d-muted));
}

.nui-mp-exec .nui-gcsc-grid > .nui-gcsc-panel:nth-child(2) {
    background: linear-gradient(160deg, #0091d6, var(--nui-d-brand-blue));
}

.nui-mp-exec .nui-gcsc-grid > .nui-gcsc-panel:nth-child(3) {
    background: linear-gradient(160deg, #22b18b, #1b9e6f);
}

.nui-mp-exec .nui-gcsc-grid > .nui-gcsc-panel:nth-child(4) {
    background: linear-gradient(160deg, #2fd0e2, var(--nui-d-brand-teal));
}

/* Everything inside a filled card is white-on-fill, including the pieces the
   staff page renders as dark ink on white. */
.nui-mp-exec .nui-gcsc-panel,
.nui-mp-exec .nui-gcsc-panel .nui-gcsc-eyebrow,
.nui-mp-exec .nui-gcsc-panel .nui-gcsc-figure,
.nui-mp-exec .nui-gcsc-panel .nui-gcsc-headline,
.nui-mp-exec .nui-gcsc-panel .nui-gcsc-muted,
.nui-mp-exec .nui-gcsc-panel .nui-gcsc-legend,
.nui-mp-exec .nui-gcsc-panel .nui-gcsc-mix-lbl,
.nui-mp-exec .nui-gcsc-panel .nui-gcsc-mix-val {
    color: #fff;
}

.nui-mp-exec .nui-gcsc-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .92;
    margin-bottom: 8px;
}

.nui-mp-exec .nui-gcsc-figure {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.nui-mp-exec .nui-gcsc-pill {
    background: rgba(255, 255, 255, .22);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* The attendance card's four sub-boxes read as insets on the green fill. */
.nui-mp-exec .nui-gcsc-mix-tile {
    background: rgba(255, 255, 255, .16);
    border-radius: 6px;
    border: 0;
}

/* ==========================================================================
   MY PROGRESS BANDS SUMMARY - the design's four cards

   Range on top at 40px, count and percentage together on a teal chip pinned to
   the bottom, flat blues deepening left to right, and no progress bar.
   ========================================================================== */
.nui-mp-exec .nui-bands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.nui-mp-exec .nui-bands-card {
    border-radius: 8px;
    padding: 22px 22px 24px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 190px;
}

/* !important is required: the card takes its fill from an inline
   ng-style="{'background': b.bg}", which no selector can outrank. The controller
   is left alone so the staff landing page keeps its own ramp. */
.nui-mp-exec .nui-bands-grid > .nui-bands-card:nth-child(1) { background: #5ba9de !important; }
.nui-mp-exec .nui-bands-grid > .nui-bands-card:nth-child(2) { background: #3d8fd1 !important; }
.nui-mp-exec .nui-bands-grid > .nui-bands-card:nth-child(3) { background: #1f7fc4 !important; }
.nui-mp-exec .nui-bands-grid > .nui-bands-card:nth-child(4) { background: #0c5fa0 !important; }

/* E20-3715: the Staff board's Progress Bands now match the Director view -
   the range is the headline (was 11px and hard to read), the count/percent/bar
   give way to the pill. Selectors are shared rather than duplicated so the two
   boards cannot drift apart again. */
.nui-mp-exec .nui-bands-range,
.nui-my-performance .nui-bands-range {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}

/* The design's .band-pill. */
.nui-mp-exec .nui-bands-pill,
.nui-my-performance .nui-bands-pill {
    display: inline-block;
    margin-top: auto;
    background: var(--nui-d-brand-teal);
    border-radius: 9px;
    padding: 12px 18px;
    font-size: 18px;
    font-weight: 800;
    align-self: flex-start;
}

/* Superseded by the chip above; the design has no bar and no second percentage. */
.nui-mp-exec .nui-bands-count,
.nui-mp-exec .nui-bands-pct,
.nui-mp-exec .nui-bands-share,
.nui-my-performance .nui-bands-count,
.nui-my-performance .nui-bands-pct,
.nui-my-performance .nui-bands-share {
    display: none !important;
}

/* The pill is only for boards that ask for it. */
.nui-bands-pill {
    display: none;
}

/* ==========================================================================
   SPACING FIXES against the design

   1. ACADEMY PERFORMANCE was laying out at 1910px inside a 927px panel and
      scrolling: with auto table layout the header words set the column widths,
      so "START OF MONTH ENROLLMENT" alone claimed 648px. Fixed layout with
      declared shares makes it fit the panel, and the headers wrap onto two
      lines exactly as the design draws them.
   2. The scoreboard cards sat at their 96px floor while the panel stretched to
      match Operating Metrics beside it, leaving dead white space underneath.
      The design's cards fill the panel.
   ========================================================================== */
.nui-mp-board .nui-acad-table {
    table-layout: fixed;
    width: 100%;
}

.nui-mp-board .nui-acad-table thead th,
.nui-mp-board .nui-acad-table tbody td {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* NAME carries the widest content, then CER's two and attendance's three share
   what is left evenly - the proportions the design uses. */
.nui-mp-board .nui-acad-table col,
.nui-mp-board .nui-acad-table thead th.nui-acad-name-head {
    width: 22%;
}

.nui-mp-board .nui-acad-table thead tr:nth-child(2) th:nth-child(1),
.nui-mp-board .nui-acad-table thead tr:nth-child(2) th:nth-child(2) {
    width: 17%;
}

.nui-mp-board .nui-acad-table thead tr:nth-child(2) th:nth-child(3),
.nui-mp-board .nui-acad-table thead tr:nth-child(2) th:nth-child(4),
.nui-mp-board .nui-acad-table thead tr:nth-child(2) th:nth-child(5) {
    width: 14.66%;
}

/* Left-justified, as the design draws it: names against the column's left edge
   rather than floating in the middle of a 22% column, and the header over them
   aligned to match so the column reads as one block. */
.nui-mp-board .nui-acad-table tbody td.nui-acad-name,
.nui-mp-board .nui-acad-table thead th.nui-acad-name-head {
    text-align: left;
    padding-left: 12px;
}

/* --- scoreboard cards fill the panel ------------------------------------- */
.nui-mp-exec .aaw-my-scoreboard .widget-content > div,
.nui-mp-exec .aaw-my-scoreboard .widget-content > div > div,
.nui-mp-exec .my-scoreboard-container {
    height: 100%;
}

.nui-mp-exec .my-scoreboard-wrapper {
    height: 100%;
    grid-auto-rows: minmax(96px, 1fr);
}

/* The Enrollment tiles sit in .box-x7 wrappers - flex:0 1 14.28571% with a
   matching max-width, sized for the SEVEN tiles this widget used to render. The
   design's row is six, so one seventh of the row was left empty on the right.
   max-width has to be restated: overriding the flex basis alone leaves the cap
   in place and the tiles stay at a seventh. */
.nui-mp-rvp .aaw-current-month-action-widget .box-x7,
.nui-mp-su .aaw-current-month-action-widget .box-x7 {
    flex: 0 1 16.66667%;
    max-width: 16.66667%;
}

/* ==========================================================================
   PERFORMANCE 360 + OPERATING METRICS - spacing

   P360: the cards stopped 89px short of the panel floor. height:100% reached
   .my-scoreboard-container but not the ng-controller div nested inside it, so
   the chain broke one level above the grid. Both need it, and the container
   becomes a flex column so the grid can actually take the remaining height.

   OPERATING: the Achievement table was laying out at its intrinsic 306px - 33%
   of the panel - leaving two thirds of the row white. The design runs it the
   full width with the weekly and monthly columns sharing what the label column
   does not use. The attendance row was 93% for the same reason.
   ========================================================================== */
.nui-mp-exec .aaw-my-scoreboard [id^="container-"] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nui-mp-exec .my-scoreboard-container {
    display: flex;
    flex-direction: column;
}

.nui-mp-exec .my-scoreboard-wrapper {
    flex: 1 1 auto;
}

/* --- Operating Metrics fills its panel ----------------------------------- */
.nui-mp-exec .aaw-director-achievement table {
    width: 100%;
    table-layout: fixed;
}

/* Label column takes what it needs; weekly and monthly split the rest evenly,
   which is the proportion the design draws. */
.nui-mp-exec .aaw-director-achievement table td:first-child,
.nui-mp-exec .aaw-director-achievement table th:first-child {
    width: 34%;
    text-align: left;
}

.nui-mp-exec .aaw-director-achievement table td:not(:first-child),
.nui-mp-exec .aaw-director-achievement table th:not(:first-child) {
    width: 33%;
}

.nui-mp-exec .aaw-weekly-efforts .box-stack {
    width: 100%;
}

/* ==========================================================================
   LOADING STATE

   Every widget here ships an aa-spinner, but each one only fades it in once IT
   starts fetching. A widget that has not started yet - the boards are
   section-gated, so several wait on the filter bar's selection - renders an
   empty panel with no indicator at all, which reads as a broken section rather
   than a loading one.

   This is the board-level backstop: while dashboardWidgetsLoading is set and a
   widget has not reported loaded, its panel shows a moving sheen. The widget's
   own spinner still does the fine-grained work; this only covers the gap before
   it starts.
   ========================================================================== */
.nui-mp-board .nui-mp-loading > .widget.panel {
    position: relative;
    overflow: hidden;
}

.nui-mp-board .nui-mp-loading > .widget.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(0, 116, 197, .07) 50%,
        rgba(255, 255, 255, 0) 80%);
    background-size: 220% 100%;
    animation: nui-mp-sheen 1.15s ease-in-out infinite;
}

@keyframes nui-mp-sheen {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

/* Respect a reduced-motion preference: keep the tint, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .nui-mp-board .nui-mp-loading > .widget.panel::after {
        animation: none;
        background: rgba(0, 116, 197, .05);
    }
}

/* --- Operating Metrics: the sub-widgets' own panel padding ----------------
   Each stacked widget keeps a .panel-body with 9px padding inside a container
   that loses another 48px, so the attendance row stopped at 93% of the panel
   while the design runs it edge to edge. The group panel already supplies the
   inset. */
.nui-mp-exec .nui-mp-cols2-sub > .panel-body,
.nui-mp-exec .nui-mp-cols2-sub .widget-content {
    padding-left: 0;
    padding-right: 0;
}

/* .widget-container is float:left in the legacy dashboard grid, and a floated
   block shrinks to its content - so Weekly Attendance sat at its natural 861px
   inside a 927px panel while Achievement, whose table is width:100%, filled.
   Both need to be plain full-width blocks here. */
.nui-mp-exec .nui-mp-cols2-sub {
    float: none;
    width: 100%;
}

/* ==========================================================================
   HUB LINKS

   .nui-mp-link ships display:none and only new-ui-my-performance.css turns it
   on, under .nui-my-performance. That gate is deliberate - the markup sits in
   several shared widgets and must stay inert in the legacy UI - but it also hid
   every link on these boards: Courses Completed v Goal, GC Success Center, My
   Progress Bands and Staff CER Performance were all in the DOM and invisible.

   Values are the design's .sum-link, not the staff page's ghost button: plain
   brand-blue text under the panel, underlined on hover. Horizontal padding is 0
   because the panel already supplies the inset.
   ========================================================================== */
/* The CER Monthly Competition panel carries no link on ANY of these pages - the
   staff landing page included. The standings are the whole section, and none of
   the four designs puts a link under it. An explicit exception is needed because
   .nui-mp-link is turned on wholesale per page, which surfaced that widget's
   "Staff CER Performance" link along with the ones the designs do show. */
.nui-mp-exec .aaw-cer-competition .nui-mp-link,
.nui-my-performance .aaw-cer-competition .nui-mp-link {
    display: none;
}

.nui-mp-exec .nui-mp-link {
    display: flex;
    justify-content: flex-start;
    gap: 18px;
    padding: 14px 0 0;
}

.nui-mp-exec .nui-mp-link .aa-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nui-d-brand-blue);
    text-decoration: none;
    cursor: pointer;
}

.nui-mp-exec .nui-mp-link .aa-btn:hover {
    background: transparent;
    color: #005a9c;
    text-decoration: underline;
}

/* ==========================================================================
   REGION / ACADEMY PERFORMANCE - the Network board's two-level table

   A region row expands to the academies beneath it. Only the region rows are
   clickable, so the pointer and the caret both sit on those alone - an academy
   row that looked clickable and did nothing would be worse than no affordance.
   ========================================================================== */
.nui-mp-su .nui-acad-table tbody tr.nui-acad-region-row {
    cursor: pointer;
    font-weight: 700;
}

.nui-mp-su .nui-acad-table tbody tr.nui-acad-region-row:hover {
    background: #eaf2f8;
}

.nui-mp-su .nui-acad-caret {
    display: inline-block;
    width: 14px;
    color: var(--nui-d-brand-blue);
    font-size: 9px;
    vertical-align: middle;
}

/* Academies read as belonging to the region above: indented, lighter, and on a
   flat ground so the odd-row striping does not fight the grouping. */
.nui-mp-su .nui-acad-table tbody tr.nui-acad-child-row td {
    background: #fbfdfe;
    font-weight: 400;
}

.nui-mp-su .nui-acad-table tbody tr.nui-acad-child-row td.nui-acad-name {
    padding-left: 34px;
    color: var(--nui-d-muted);
}

/* The striping is per-tbody now that each region is its own group, so it would
   restart at every region and read as noise. Dropped here. */
.nui-mp-su .nui-acad-table tbody tr:nth-child(odd) {
    background: transparent;
}

/* ==========================================================================
   OPERATING METRICS - internal rhythm

   1. The panel showed the label twice: "WEEKLY ATTENDANCE" from the group title
      and "ATTENDANCE" from the widget's own category heading directly beneath.
      The design has one. The group title is the one that stays, because it names
      the pair and the widget's heading is invisible on a board that only shows
      the attendance half.

   2. The tile wrappers carry .p3 - 3px, not 9px: the 18px the row was short of
      its container is 3 wrappers x 2 sides. So the cards sat 3px inside the
      panel while the labels above them sat flush. Pulling the stack out by that
      3px lines the first card's left edge up with the label and leaves the
      wrapper padding doing the inter-card gaps.
   ========================================================================== */
.nui-mp-exec .aaw-we-subcateg > .text-large.fw600 {
    display: none;
}

.nui-mp-exec .aaw-weekly-efforts .box-stack {
    margin-left: -3px;
    margin-right: -3px;
    /* width has to grow by the same 6px the margins pull out. An earlier fix set
       width:100% here to make the row fill its panel; with that still pinned to
       the container width, the negative margins only SHIFTED the row left and
       left the last card 6px off the right edge. */
    width: calc(100% + 6px);
    /* The wrappers are fixed thirds (.box-x3), so a flex gap on top of them has
       nowhere to come from and pushes the last card in. The wrappers' own 3px
       padding already reads as a 6px channel between cards. */
    gap: 0;
}

/* ── Enrollment widget header row (E20-3715) ──────────────────────
   A link out to the RVP Enrollment tracker on the left, and the note that
   Cobb is excluded pushed to the upper right. The note is a statement of
   fact: the widget requests skipCobb:true, so these figures are
   network-minus-Cobb, which the board previously did not say anywhere. */
.nui-mp-board .nui-enr-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0 4px 10px;
}

.nui-mp-board .nui-enr-note {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--aa-slate, #5A6B70);
}

.nui-mp-board .nui-enr-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--aa-blue, #0074C5);
    cursor: pointer;
}