/* ============================================================
   NEW UI — MY PERFORMANCE (staff landing page)
   Implements the design-system concept for the staff landing page
   (claude.ai/design project ff7139a4, uploads/My Performance.dc.html),
   which composes the AA Design System's Card/Badge/Button around the
   page's existing sections.

   SCOPE — .nui-my-performance is a one-line anchor added to this
   page's root div (myPerformance.html), applied only on
   /Trackers.MyPerformanceNext. It is the ONLY scope these rules need.

   Every selector here used to also carry .is-myincite-ui.nui-modern-pages,
   from when this board was New-UI-only. Once it became its own tracker that
   prefix stopped being a scope and became a second gate - and one that is not
   satisfied outside a myincite client with the New UI on, which is why the
   Performance 360 tiles and every hub link rendered unstyled there while the
   rules that happened to be written bare kept working. It exists because the obvious
   hook, .dashboard-widget-area, is shared by 141 templates, and the
   card chrome below must not reach any of them. Every rule here needs
   .nui-my-performance, so it is
   New-UI-only AND this-page-only.

   RELATIONSHIP TO new-ui-performance.css: that file owns the TILE
   system inside these widgets and stays authoritative. Its header
   records that v1 "card-on-everything" failed, because the KPI rows
   (Caseload Health / Weekly Efforts) read better as label/value rows
   than as a grid of cards. Nothing here re-cards a tile - the concept
   applies Card at SECTION level (one card per widget, tiles inside),
   which is a different granularity and does not revive v1.

   Colours come from the --aa-* tokens imported in aa-tokens.css, the
   same tokens the concept file itself uses, rather than the slate
   hexes hard-coded in new-ui-pages.css.
   ============================================================ */

/* ==========================================================================
   1. PAGE CANVAS
   The concept file is a standalone 1180px preview and centres itself in a
   fixed column. That cap was carried over here at first and left a dead
   band down the right of the real content region on anything wider, so the
   board now fills the width it is given. The bootstrap row/col groupings
   the template builds by ng-repeat $index are untouched either way.
   ========================================================================== */
.nui-my-performance .dashboard-widget-area {
    max-width: none;
    width: 100%;
}

/* Same base ink the exec boards set on .nui-mp-board. Without it this board
   inherits the app default (#5A595B), so any text that does not set its own
   colour rendered a different grey here than on the other three boards. */
.nui-my-performance {
    color: var(--aa-ink, #222831);
}

/* Sticky filter bar - see new-ui-mp-boards.css section 1c for why the scroll
   container and the overflow chain matter here. */
.nui-my-performance .widget-container.aaw-my-performance-school-select {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--aa-off-white, #F7F9FA);
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ==========================================================================
   2. SECTION CARD
   Concept Card: solid white, hairline border, --radius-lg, --shadow-md.
   Overrides new-ui-pages.css's frosted treatment for this page only -
   the concept is an opaque surface, and the blur reads as haze behind
   the dense number grids these widgets contain.
   ========================================================================== */
.nui-my-performance .dashboard-widget-area .widget.panel.panel-widget {
    background-color: var(--aa-white, #fff);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--aa-grey-100, #EEF1F2);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-md, 0 2px 6px rgba(26, 26, 26, .08), 0 6px 16px rgba(26, 26, 26, .08));
}

/* ==========================================================================
   3. SECTION HEADER
   Concept header: uppercase 13px/700 at .04em on --aa-ink, separated
   from the body by a hairline. The header sits flush (no fill) so the
   card reads as one surface.
   ========================================================================== */
.nui-my-performance .dashboard-widget-area .widget-header {
    background: transparent;
    border-bottom: 1px solid var(--aa-grey-100, #EEF1F2);
    padding: 16px 18px 10px;
}
.nui-my-performance .dashboard-widget-area .widget-header .panel-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--aa-ink, #222831);
}
/* The gradient tick is a New UI flourish that the concept does not use -
   its section headers are plain type. Dropped here only; every other
   page keeps it. Delete this rule to bring it back. */
.nui-my-performance .dashboard-widget-area .widget-title::before {
    display: none;
}

/* ==========================================================================
   4. FILTER BAR
   The School select widget carries .widget-no-panel and the page's own
   <style> block hides its header, so its .panel is the bar itself.
   Concept treatment: white bar, --aa-grey-300 hairline, --radius-md,
   --shadow-sm, 10px gap, with each control reading as a bordered chip.

   Selectors repeat .widget.panel.panel-widget because the filter widget's
   inner div carries those classes too - without them §2's 7-class card
   rule outranks these and the bar renders as a card (verified).
   ========================================================================== */
.nui-my-performance .dashboard-widget-area .widget-no-panel > .widget.panel.panel-widget {
    background: var(--aa-white, #fff);
    border: 1px solid var(--aa-grey-300, #C5CDD0);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(26, 26, 26, .06));
}
.nui-my-performance .dashboard-widget-area .widget-no-panel > .widget.panel.panel-widget > .panel-body {
    padding: 8px 6px;
}

/* CHIPS — uniform width.
   The widget already sizes each filter wrapper flex:0 0 170px
   (SchoolSelect/school-select.html), so the chips only looked ragged
   because the select2 container inside did not fill its wrapper - one was
   even narrow enough to clip "Select a Site" to "Sel". Filling the wrapper
   makes every chip exactly 170px.

   Selectors target select2 v4 (.select2-selection--single, theme
   "acadetheme" - see the widget's own <style> block). An earlier pass here
   used the v3 .select2-choice, which does not exist in this app and styled
   nothing. */
/* Follows the .mass-filter-toolbar precedent already in style.css (~33105):
   fixed height + matching line-height on the single selection, with the
   rendered label padded clear of the arrow. Fixed height, not min-height -
   min-height let the Site chip grow taller than its neighbours. */
.nui-my-performance .myPerformanceSchoolSelect .select2-container {
    width: 100% !important;
}
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection--single {
    box-sizing: border-box;
    height: 34px;
    line-height: 32px;
    border: 1px solid var(--aa-grey-300, #C5CDD0);
    border-radius: var(--radius-sm, 4px);
    /* !important is required. style.css:15873 sets
       .select2-container--acadetheme .select2-selection { background-color:
       var(--s2-acad-select-bg) !important }, and an !important declaration
       beats a non-important one whatever the specificity - so the plain
       `background` here lost and every chip kept the theme's blue tint. */
    background: var(--aa-white, #fff) !important;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
/* The Site and AA Cohort chips are multi-selects, so they are a different
   select2 element and were missed by the single-selection rule above. */
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection--multiple {
    background: var(--aa-white, #fff) !important;
    border: 1px solid var(--aa-grey-300, #C5CDD0);
    border-radius: var(--radius-sm, 4px);
}
/* The Site chip clipped its label to "Sel". It is the one select behind an
   ng-show, so select2 initialises it while hidden and measures the label
   span at ~0 width; the box is sized by the 170px wrapper, the text is not.
   min-width:0 lets the flex child expand once it is visible (a flex item's
   default min-width:auto is what pins it to the stale measurement), and
   ellipsis handles genuinely long values instead of a hard crop. */
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    font-size: 13px;
    line-height: 32px;
    padding: 0 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection__arrow {
    flex: none;
    height: 32px;
    line-height: 32px;
}

/* GRADUATION TRACKER — hard right.
   The markup already carries .mlauto, but it only pushes to the right if
   the flex row it sits in actually spans the bar. Guarantee the row is
   full width so the auto margin has space to collect. */
.nui-my-performance .myPerformanceSchoolSelect > .d-flex {
    width: 100%;
}
.nui-my-performance .mp-graduation-tracker {
    margin-left: auto !important;
}

/* HISTORY TOGGLE — the toggle-button directive carries .btn, so it picks up
   the app's default button chrome and reads as a grey slab next to the
   chips. Strip the chrome and let the toggle itself show. */
.nui-my-performance .myPerformanceSchoolSelect toggle-button.btn {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    line-height: 1;
}

/* ==========================================================================
   5. HUB LINKS
   The concept turns this page into a hub: each section links through to the
   fuller tool. The markup (.nui-mp-link) is added to five widget templates
   but ships display:none, so it is inert everywhere by default and only
   appears here. That gate is load-bearing, not belt-and-braces:
     - aaw-engagement-progress-bands also renders on My Engagement, so an
       ungated link would show up there too;
     - none of these links should exist in the legacy UI at all.

   Destinations (all verified to resolve against registered ui-router states):
     Caseload Health      -> /GCSuccessCenter
     Weekly Efforts       -> /CourseCompletion.GCAAttendanceBoard
     Monthly Achievement  -> /Trackers.CreditsEarnedDistribution
     Progress Bands       -> /CourseCompletion.MyProgressBandsSummary
     CER Competition      -> /Trackers.CerStaffPerformance
   ========================================================================== */
.nui-mp-link {
    display: none;
}
.nui-my-performance .nui-mp-link {
    display: flex;
    justify-content: flex-end;
    padding: 12px 18px 4px;
}
/* Concept's ghost Button: brand type, no fill, arrow trailing. Reuses the
   app's existing .aa-btn--secondary link pattern (cf. insightsOverview.html)
   so it inherits the established button metrics. */
.nui-my-performance .nui-mp-link .aa-btn {
    background: transparent;
    border: 1px solid var(--aa-grey-300, #C5CDD0);
    border-radius: var(--radius-sm, 4px);
    color: var(--aa-blue, #0074C5);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    text-decoration: none;
    transition: background var(--dur-fast, 120ms) var(--ease-standard, ease),
                border-color var(--dur-fast, 120ms) var(--ease-standard, ease);
}
.nui-my-performance .nui-mp-link .aa-btn:hover {
    background: rgba(0, 116, 197, .06);
    border-color: var(--aa-blue, #0074C5);
    text-decoration: none;
}

/* ==========================================================================
   6. GC SUCCESS CENTER SUMMARY
   The concept's four-panel row: a feature-blue Quick Insight beside three
   white panels. Widget markup lives in
   widgets/MyPerformance/GCSuccessCenterSummary/. Class-scoped to the widget
   itself (.nui-gcsc-*), so unlike the rest of this file these rules do not
   need the page anchor - the widget only renders on the New UI dashboard.
   ========================================================================== */
.nui-my-performance .nui-gcsc-grid,
.nui-mp-board .nui-gcsc-grid {
    display: grid;
    grid-template-columns: 1.25fr 1.5fr 1.35fr .85fr;
    gap: 12px;
}
@media (max-width: 1100px) {
    .nui-gcsc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .nui-gcsc-grid { grid-template-columns: 1fr; }
}
/* No border. Each panel drawing its own 1px edge put two parallel grey
   lines between every neighbouring pair (each panel's edge, either side of
   the gap), and pressed a third against the card's own border at both
   ends. A flat --aa-off-white fill separates them just as clearly with one
   visual boundary instead of three. */
.nui-my-performance .nui-gcsc-panel,
.nui-mp-board .nui-gcsc-panel {
    border-radius: var(--radius-md, 8px);
    padding: 16px 18px;
    background: var(--aa-off-white, #F7F9FA);
    border: none;
}
.nui-my-performance .nui-gcsc-panel--feature,
.nui-mp-board .nui-gcsc-panel--feature {
    background: var(--aa-blue, #0074C5);
    border-color: var(--aa-blue, #0074C5);
    color: #fff;
}
.nui-my-performance .nui-gcsc-eyebrow,
.nui-mp-board .nui-gcsc-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: 12px;
}
.nui-my-performance .nui-gcsc-eyebrow--brand,
.nui-mp-board .nui-gcsc-eyebrow--brand {
    color: var(--aa-blue, #0074C5);
    opacity: 1;
}
.nui-my-performance .nui-gcsc-headline,
.nui-mp-board .nui-gcsc-headline {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}
.nui-my-performance .nui-gcsc-bullets,
.nui-mp-board .nui-gcsc-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    opacity: .95;
}
.nui-my-performance .nui-gcsc-figure-row,
.nui-mp-board .nui-gcsc-figure-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.nui-my-performance .nui-gcsc-figure,
.nui-mp-board .nui-gcsc-figure {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--aa-ink, #222831);
}
.nui-my-performance .nui-gcsc-figure--teal { color: var(--aa-teal, #00AEC4); }
.nui-my-performance .nui-gcsc-figure--brand { color: var(--aa-blue, #0074C5); }

/* ── ONSITE / ONLINE SPLIT (concept ff7139a4) ──
   Four quarter-width tiles under the With Attendance figure. The panels sit
   on --aa-off-white, so these step up to white rather than down to a grey
   that would vanish into the panel. */
.nui-my-performance .nui-gcsc-mix,
.nui-mp-board .nui-gcsc-mix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.nui-my-performance .nui-gcsc-mix-tile,
.nui-mp-board .nui-gcsc-mix-tile {
    background: var(--aa-white, #fff);
    border-radius: var(--radius-sm, 4px);
    padding: 8px 6px;
    text-align: center;
    min-width: 0;
}
.nui-my-performance .nui-gcsc-mix-lbl,
.nui-mp-board .nui-gcsc-mix-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aa-grey-500, #7B8E92);
    margin-bottom: 4px;
    /* "Onsite Only" wraps at a quarter of a quarter-width panel; let it,
       rather than clipping a label that is already abbreviated. */
    line-height: 1.2;
}
.nui-my-performance .nui-gcsc-mix-val,
.nui-mp-board .nui-gcsc-mix-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--aa-ink, #222831);
}

/* ── PANEL BAR: SITE SCOPE + LAST EDMENTUM SYNC (concept ff7139a4) ──
   The concept sets the sync stamp beside the section title. This board renders
   section titles from the widget chrome, which the widget template cannot
   reach into, so the bar sits at the top of the widget body instead - same
   reading order, same quiet treatment. The site picker shares the row and
   leads, because it says what the numbers below are actually about. */
/* NAME COLLISION NOTE: this is the panel's header row, NOT the Achievement
   Status band bar further down - that one owns .nui-gcsc-bar (an 8px
   overflow:hidden pill). Naming this one .nui-gcsc-bar too let the later rule
   win and crushed the site select into that 8px pill. */
.nui-my-performance .nui-gcsc-head,
.nui-mp-board .nui-gcsc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.nui-my-performance .nui-gcsc-sync,
.nui-mp-board .nui-gcsc-sync {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--aa-slate, #5A6B70);
}
/* ── SHARED FILTER CONTROL ──
   One definition for every small select on this board. The Performance 360
   role select is the only user today, but this is deliberately not scoped to
   that widget: when it was duplicated per widget the copies drifted, which is
   exactly how two controls meant to look identical stop looking identical. */
.nui-my-performance .nui-mp-field {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-weight: 400;
}
.nui-my-performance .nui-mp-field-lbl {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--aa-slate, #5A6B70);
    white-space: nowrap;
}
.nui-my-performance .nui-mp-field select {
    height: 28px;
    max-width: 240px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--aa-grey-300, #D6DDE0);
    border-radius: var(--radius-sm, 4px);
    background-color: var(--aa-white, #fff);
    font-family: var(--nui-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--aa-blue, #0074C5);
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--aa-grey-500, #7B8E92) 50%),
                      linear-gradient(135deg, var(--aa-grey-500, #7B8E92) 50%, transparent 50%);
    background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.nui-my-performance .nui-mp-field select:focus {
    outline: 2px solid var(--aa-blue, #0074C5);
    outline-offset: 1px;
}
.nui-my-performance .nui-gcsc-pill,
.nui-mp-board .nui-gcsc-pill {
    background: rgba(0, 174, 196, .14);
    color: var(--aa-teal, #00AEC4);
    border-radius: var(--radius-pill, 999px);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}
.nui-my-performance .nui-gcsc-muted,
.nui-mp-board .nui-gcsc-muted {
    font-size: 16px;
    font-weight: 600;
    color: var(--aa-grey-500, #7B8E92);
}
/* stacked band bar — widths come from the server's category totals */
.nui-my-performance .nui-gcsc-bar,
.nui-mp-board .nui-gcsc-bar {
    display: flex;
    height: 8px;
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--aa-grey-100, #EEF1F2);
}
.nui-my-performance .nui-gcsc-bar > span { display: block; height: 100%; }
.nui-my-performance .nui-gcsc-legend,
.nui-mp-board .nui-gcsc-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--aa-grey-700, #4A5358);
}
.nui-my-performance .nui-gcsc-legend > span { display: flex; align-items: center; gap: 6px; }
.nui-my-performance .nui-gcsc-legend i,
.nui-mp-board .nui-gcsc-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}
.nui-my-performance .nui-gcsc-legend b { font-weight: 700; color: var(--aa-ink, #222831); }
/* the concept shows two links side by side on the metrics section */
.nui-my-performance .nui-mp-link { gap: 8px; }/* ==========================================================================
   7. MY PROGRESS BANDS SUMMARY (cards)
   The concept's four filled cards: band range top-left,
"count | percent"
   on a teal chip pinned to the bottom. Widget markup lives in
   widgets/MyPerformance/ProgressBandsCards/. Class-scoped like §6 - the
   widget only renders on the New UI board.
   ========================================================================== */
.nui-my-performance .nui-bands-grid,
.nui-mp-board .nui-bands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 900px) {
    .nui-bands-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .nui-bands-grid { grid-template-columns: 1fr; }
}.nui-my-performance .nui-bands-card,
.nui-mp-board .nui-bands-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 18px;
    min-height: 130px;
    border-radius: var(--radius-md, 8px);
    color: #fff;
}/* Range is the card's LABEL,
so it is set as a quiet eyebrow. It used to be
   the largest thing here (22px/800) with the count in a chip below,
which
   inverted the hierarchy - people read the band they already knew and had to
   hunt for the figure they came for. */
.nui-my-performance .nui-bands-range,
.nui-mp-board .nui-bands-range {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
}.nui-my-performance .nui-bands-count,
.nui-mp-board .nui-bands-count {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    /* tabular figures so the four counts line up as a row of numbers rather
       than four differently-drifting baselines */
    font-variant-numeric: tabular-nums;
}.nui-my-performance .nui-bands-pct,
.nui-mp-board .nui-bands-pct {
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
}/* Share bar — the percentage,
drawn. Sits above the link and below the
   figures so the four cards read as one distribution across the row. */
.nui-my-performance .nui-bands-share,
.nui-mp-board .nui-bands-share {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: auto;
    border-radius: var(--radius-pill, 999px);
    /* Darkened rather than a white wash: the card fills run from #8FC4E6 to
       brand blue, and a translucent-white track on the palest of them was
       almost the same colour as the white fill, so the bar read as full.
       Going darker separates track from fill on every card in the ramp. */
    background: rgba(0, 0, 0, .18);
    overflow: hidden;
}.nui-my-performance .nui-bands-share > i,
.nui-mp-board .nui-bands-share > i {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: #fff;
}

/* ==========================================================================
   8. SECTION BODY INSET
   The template writes {{widget.directive}} onto the widget container as a
   class, which gives each purpose-built section a precise hook. Every section
   added to this board has to be listed in these groups - a new widget
   otherwise keeps the 9px base padding and sits flush to the card edge while
   its neighbours are inset. That is exactly how aaw-p360-metrics arrived.

   Base .panel-body.ui-widget-content.widget-content is padding:9px, so
   their panel grids sat almost flush against the card edge while the
   section header above them is inset 18px - the two read as misaligned.
   Match the header's 18px so content lines up with its title.
   ========================================================================== */
.nui-my-performance .aaw-gc-success-center-summary .panel-body.widget-content,
.nui-my-performance .aaw-progress-bands-cards .panel-body.widget-content,
.nui-my-performance .aaw-p360-metrics .panel-body.widget-content {
    /* !important is required, not defensive. The template's FIRST widget
       block puts the .p3 utility on its panel-body (myPerformance.html:76)
       and .p3 is padding:3px !important (style.css:62533). An !important
       declaration beats a non-important one whatever the specificity, so
       without this the GC Success Center Summary - which lands in that
       block at $index 3 - rendered flush to the card edge while Progress
       Bands, in the second block at $index 4, had no .p3 and looked
       correctly inset. Same rule, different template block: that was the
       whole asymmetry. With !important on both, specificity decides and
       these 6-class selectors beat .p3's single class. */
    padding: 16px 18px 20px !important;
}/* ==========================================================================
   9. TILE LINKS
   A link per tile,
matching the treatment already used inside the
   Performance 360 tiles (.card-link: label + chevron,
no button chrome) so
   every tile on the board reads the same way. Plain type,
not a bordered
   button - the box repeated eight times fought with the cards.

   Two variants: default is brand blue for the white panels; --on-fill is
   white-on-colour for the feature panel and the filled band cards,
where
   blue would be unreadable.
   ========================================================================== */
.nui-my-performance .nui-tile-link,
.nui-mp-board .nui-tile-link {
    display: inline-block;
    margin-top: auto;
    padding-top: 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--aa-blue, #0074C5);
    text-decoration: none;
    cursor: pointer;
}.nui-my-performance .nui-tile-link:hover,
.nui-mp-board .nui-tile-link:hover,
.nui-my-performance .nui-tile-link:focus,
.nui-mp-board .nui-tile-link:focus {
    color: var(--link-hover, #005a99);
    text-decoration: underline;
}.nui-my-performance .nui-tile-link--on-fill,
.nui-mp-board .nui-tile-link--on-fill {
    color: #fff;
    opacity: .92;
}.nui-my-performance .nui-tile-link--on-fill:hover,
.nui-mp-board .nui-tile-link--on-fill:hover,
.nui-my-performance .nui-tile-link--on-fill:focus,
.nui-mp-board .nui-tile-link--on-fill:focus {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
}
/* the panels are flex columns so margin-top:auto pins the link to the
   bottom, keeping the links on one baseline across a row of tiles */
.nui-my-performance .nui-gcsc-panel,
.nui-mp-board .nui-gcsc-panel {
    display: flex;
    flex-direction: column;
}

/* Section footer link: same plain-text treatment as the tile links above,
   rather than the bordered button it started as. */
.nui-my-performance .nui-mp-link .aa-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--aa-blue, #0074C5);
}
.nui-my-performance .nui-mp-link .aa-btn:hover {
    background: transparent;
    color: var(--link-hover, #005a99);
    text-decoration: underline;
}
/* left-aligned under the content, as in the reference */
.nui-my-performance .nui-mp-link {
    justify-content: flex-start;
    gap: 18px;
    padding: 12px 18px 2px;
}/* Dark link variant for the two palest band fills — see the lightFill flag
   in progress-bands-cards.controller.js for the contrast reasoning. Uses
   --aa-ink rather than brand blue,
which is itself too close to the fill. */
.nui-my-performance .nui-tile-link--on-light,
.nui-mp-board .nui-tile-link--on-light {
    color: var(--aa-ink, #222831);
    opacity: .95;
}

.nui-my-performance .nui-tile-link--on-light:hover,
.nui-mp-board .nui-tile-link--on-light:hover,
.nui-my-performance .nui-tile-link--on-light:focus,
.nui-mp-board .nui-tile-link--on-light:focus {
    color: var(--aa-black, #1A1A1A);
    opacity: 1;
    text-decoration: underline;
}

/* ==========================================================================
   10. BOTTOM CLEARANCE
   The page root carries pb0 (padding-bottom:0) inside an h100/overflauto
   scroll container, and the template gives the second block's container
   mb0. Together the last section's footer link sat flush against the
   container's bottom edge and was clipped.

   The board's own bottom padding is the whole fix. Overriding .mb0 was
   tried and dropped: it is a utility carrying margin-bottom:0 !important,
   and the container it sits on holds the LAST section, so the padding
   below already covers it - no reason to fight the utility.
   ========================================================================== */
.nui-my-performance .dashboard-widget-area {
    padding-bottom: 28px;
}

/* ==========================================================================
   11. FOOTER LINK CLIPPING (real cause)
   §10's board padding was the wrong fix - the clipping is inside the CARD,
   not at the page bottom. .widget-content is overflow:hidden (style.css)
   and the dashboard framework writes widget.contentStyle onto the
   panel-body via ng-style (directives/angular-ui-dashboard-5559f1f8e7.js setHeight),
   so anything that lands a height there crops whatever sits lowest - here
   the section's footer link, sliced through the middle.

   These two sections are content-sized by design, so pin the body to auto
   height and let it overflow rather than crop. !important is deliberate:
   ng-style writes an inline style, which a class rule cannot otherwise
   beat. Scoped to the two purpose-built sections via the
   {{widget.directive}} class, so no other widget's sizing is touched.
   ========================================================================== */
.nui-my-performance .aaw-gc-success-center-summary .panel-body.widget-content,
.nui-my-performance .aaw-progress-bands-cards .panel-body.widget-content,
.nui-my-performance .aaw-p360-metrics .panel-body.widget-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
}
.nui-my-performance .aaw-gc-success-center-summary .widget.panel.panel-widget,
.nui-my-performance .aaw-progress-bands-cards .widget.panel.panel-widget,
.nui-my-performance .aaw-p360-metrics .widget.panel.panel-widget {
    overflow: visible;
}

/* ==========================================================================
   12. FILTER CHIP — OPEN STATE
   Opening a chip swaps its label for select2's inline search field
   (.select2-search--inline, float:left in style.css:15122). select2 writes
   an inline width on that input measured from the typed text, so with an
   empty box it collapsed to a ~10px sliver with a cursor in it.
   Make it a flex child that fills the chip instead of floating.
   ========================================================================== */
.nui-my-performance .myPerformanceSchoolSelect .select2-search--inline {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0;
}
.nui-my-performance .myPerformanceSchoolSelect .select2-search--inline .select2-search__field {
    /* !important: select2 sets this width inline, per keystroke */
    width: 100% !important;
    margin-top: 0;
    height: 30px;
    font-size: 13px;
    font-family: var(--nui-font);
    color: var(--aa-ink, #222831);
}

/* ==========================================================================
   13. FILTER DROPDOWN PANEL
   select2 appends its dropdown to <body>, so it is NOT a descendant of
   #InciteWrapper and cannot be reached by this file's usual page scope.
   Rather than restyle every select2 dropdown in the app, these key off the
   results id select2 derives from the select's own id
   (myPerformanceZone/District/Site/Staff/AACohort SelectWidget-*), so the
   treatment lands on this filter bar's dropdowns only.
   ========================================================================== */
/* Base selectors carry .select2-container--acadetheme .select2-dropdown so
   they outrank the theme's own list rules (style.css ~15987), which are
   3-class and were beating a plainer [id^=] selector - which is why an
   earlier pass here changed nothing visible. */
.select2-dropdown:has(.select2-results__options[id^="select2-myPerformance"]) {
    border: 1px solid var(--aa-grey-300, #C5CDD0);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md, 0 2px 6px rgba(26, 26, 26, .08), 0 6px 16px rgba(26, 26, 26, .08));
    overflow: hidden;
    font-family: var(--nui-font);
}
.select2-container--acadetheme .select2-dropdown .select2-results__options[id^="select2-myPerformance"] {
    padding: 6px;
}
.select2-container--acadetheme .select2-dropdown .select2-results__options[id^="select2-myPerformance"] li {
    border-radius: var(--radius-sm, 4px);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--aa-ink, #222831);
}
/* Kill the zebra striping. The theme tints odd rows with --primary-L90
   (#efebf2, a purple cast) which reads as noise against the brand blue and
   fights the hover state. Selector deliberately mirrors the theme's own
   nth-child/:not shape plus the id anchor, so it wins on specificity
   without !important - and only for this filter bar's dropdowns.
   The hover/highlighted rules below carry the same :not([aria-selected])
   for the same reason: without it the striping rule outranks them and the
   keyboard-highlighted row renders with no background at all. */
.select2-container--acadetheme .select2-dropdown .select2-results__options[id^="select2-myPerformance"] li:nth-child(odd):not([aria-selected="true"]) {
    background-color: transparent;
}
.select2-container--acadetheme .select2-dropdown .select2-results__options[id^="select2-myPerformance"] li:hover:not([aria-selected="true"]),
.select2-container--acadetheme .select2-dropdown .select2-results__options[id^="select2-myPerformance"] li.select2-results__option--highlighted:not([aria-selected="true"]) {
    background-color: var(--aa-grey-100, #EEF1F2);
    color: var(--aa-ink, #222831);
}
.select2-container--acadetheme .select2-dropdown .select2-results__options[id^="select2-myPerformance"] li[aria-selected="true"] {
    background-color: rgba(0, 116, 197, .10);
    color: var(--aa-blue, #0074C5);
    font-weight: 600;
}
/* the dropdown's own search box (used where select2 renders it in-panel) */
.select2-dropdown:has(.select2-results__options[id^="select2-myPerformance"]) .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--aa-grey-300, #C5CDD0);
    border-radius: var(--radius-sm, 4px);
    padding: 6px 10px;
    font-size: 13px;
    font-family: var(--nui-font);
}

/* ==========================================================================
   14. FILTER CHIP — MULTI-SELECT
   The Site filter is a select2 MULTIPLE, which the earlier rules did not
   cover (they targeted .select2-selection--single only). Left to the theme
   it stacks one selected value per line and grows downward, so the chip
   pushed out of the bar and broke the row's alignment.

   The widget already establishes the pattern for this in its own <style>
   (AA Cohort, "show like single select with count"): pin the multiple to a
   fixed height and lay it out as a flex row. Same approach here, except the
   selected values stay visible as compact pills rather than being hidden
   behind a placeholder - a Site filter reads better showing what is chosen.
   Values beyond the chip's width scroll horizontally instead of wrapping.
   ========================================================================== */
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection--multiple {
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    border: 1px solid var(--aa-grey-300, #C5CDD0);
    border-radius: var(--radius-sm, 4px);
    background: var(--aa-white, #fff);
    padding: 0 10px;
}
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar {
    display: none;
}
/* selected values as compact brand pills, matching the chip language */
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    margin: 0;
    padding: 2px 7px;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: rgba(0, 116, 197, .10);
    color: var(--aa-blue, #0074C5);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection__choice__remove {
    color: var(--aa-blue, #0074C5);
    opacity: .65;
    margin: 0;
    border: none;
    background: none;
    font-weight: 700;
}
.nui-my-performance .myPerformanceSchoolSelect .select2-container--acadetheme .select2-selection__choice__remove:hover {
    opacity: 1;
}

/* ==========================================================================
   15. PERFORMANCE 360 METRICS (concept ff7139a4)
   Filled tiles carrying a value, its goal pill and the goal text. Values and
   targets come from Performance 360 itself (see the widget controller), so
   this file only dresses them.

   The concept fills each tile in brand blue with one teal among them. Rather
   than assign colours by position - which would shuffle as roles change the
   number of goals - the fill follows the metric's own status against target:
   met reads teal, everything else brand blue. That keeps the concept's
   two-tone look and makes the colour mean something.
   ========================================================================== */
/* Caption directly above the tiles. 10px clears it from the grid without
   opening the gap a control needed - it is a line of type, not a row. */
.nui-my-performance .nui-p360 .nui-p360-role {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--aa-slate, #5A6B70);
    margin-bottom: 10px;
}
.nui-my-performance .nui-p360 .nui-p360-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.nui-my-performance .nui-p360 .nui-p360-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* No min-height. The tiles carry two lines whatever the role, so a floor
       only added dead space under them - most visible when a role has three
       goals and each tile stretches to a third of the row. */
    padding: 14px 16px;
    border-radius: var(--radius-md, 8px);
    background: var(--aa-blue, #0074C5);
    color: #fff;
}
/* Value and its goal pill share a baseline row. The pill used to be absolutely
   placed in the corner, which forced the value to reserve a fixed gutter it did
   not always need and left the tile bottom-heavy with empty space. */
.nui-my-performance .nui-p360 .nui-p360-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.nui-my-performance .nui-p360 .nui-p360-tile--met {
    background: var(--aa-teal, #00AEC4);
}
/* Goal is configured but its resolver is not wired yet, so there is no value to
   show. Stated plainly with an em dash and a stepped-back fill rather than
   omitted - the role's metric set should read complete, and a missing tile is
   indistinguishable from a metric the role does not have. */
/* Muted rather than grey. A grey slab beside brand-blue tiles read as an error;
   the same blue at half strength says "not in yet" while keeping the row one
   family. */
.nui-my-performance .nui-p360 .nui-p360-tile--pending {
    background: var(--aa-blue, #0074C5);
    opacity: .45;
}
.nui-my-performance .nui-p360 .nui-p360-tile--pending .nui-p360-value {
    opacity: .75;
}
.nui-my-performance .nui-p360 .nui-p360-goal {
    flex: none;
    align-self: flex-start;
    background: rgba(255, 255, 255, .22);
    border-radius: var(--radius-pill, 999px);
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.nui-my-performance .nui-p360 .nui-p360-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.nui-my-performance .nui-p360 .nui-p360-label {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
}
.nui-my-performance .nui-p360 .nui-p360-empty {
    padding: 4px 0 8px;
}
.nui-my-performance .nui-p360 .nui-p360-empty-msg {
    font-size: 13px;
    color: var(--aa-grey-500, #7B8E92);
    margin-bottom: 12px;
}