/* ============================================================
   NEW UI - MYPERFORMANCE TILE SYSTEM (v2)
   Full rewrite. v1's card-on-everything approach failed visually
   for the KPI-row widgets (Caseload Health / Weekly Efforts read
   better as compact label/value rows than as a grid of cards) and
   has been superseded end-to-end by this file.

   Kill-switch: every selector below requires BOTH .is-myincite-ui
   (clientId === 'myincite' AND New UI toggle on) AND
   .nui-modern-pages, both classes on #InciteWrapper. Drop
   nui-modern-pages to A/B back to the classic tile look. Zero
   template/JS edits; pure CSS reskin.

   Design system: brand blue #0074C5, teal #00AEC4, green #16a34a,
   red #dc2626; font stack 'Montserrat', -apple-system, sans-serif;
   gradient tick linear-gradient(180deg, #0074C5, #8B5CB0 55%, #D98E32).

   File order (deliberate, not narrative order - see Section 5 note):
     0. Kill legacy tile paint (root-cause var/ripple neutralization)
     1. Shared bits (percent pill, ? icon, group label tick)
     5. Generic fallback card base (placed here, ahead of 2-4, so the
        row/card containers below can override it purely via the
        extra specificity their #container-… ID adds - no :not()
        chains needed). aa-tile-fill::before is toggled on here at
        equal specificity to Section 0's kill rule, so it MUST stay
        after Section 0 in source order to win the cascade.
     2. Caseload Health KPI rows
     3. Weekly Efforts KPI rows
     4. Achievement compact stat cards
   ============================================================ */

/* ==========================================================================
   SECTION 0 - KILL LEGACY TILE PAINT (root-cause fixes)
   .is-aa-primary-L90/L70 paint via !important; redefine the vars they
   read to transparent so the !important rule still "wins" but paints
   nothing. Also kill the legacy ripple pseudo-element outright; the
   sections that need a ::before (progress track / accent bar) re-enable
   it below with an explicit, full property set.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-metric {
    --primary-L90: transparent;
    --primary-L70: transparent;
    --aa-tile-metric-bg: transparent;
}
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-fill::before {
    display: none;
}
/* Legacy .aa-tile-arrow:after draws a rotated "→" in the tile corner —
   under the New UI it reads as a stray diagonal slash. Kill it; the
   id-scoped [style*="--pct"] progress fills below re-establish ::after
   with content:"" and full resets (id specificity beats this kill). */
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-arrow::after {
    content: none;
}

/* ==========================================================================
   SECTION 1 - SHARED BITS
   ========================================================================== */

/* Percent pill - only inside the four KPI/stat-card widgets. */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-value > span,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-value > span,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-value > span,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-value > span {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nuiperf-accent, #0074C5) 12%, white);
    color: color-mix(in srgb, var(--nuiperf-accent, #0074C5) 80%, #0f172a);
    margin-left: 6px;
    vertical-align: 2px;
    line-height: 1.4;
    white-space: nowrap;
}

/* ? icon - hidden until the tile is hovered, wherever it lives. */
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-question {
    font-size: 16px;
    color: #94a3b8;
    opacity: 0;
    transition: opacity .15s ease;
}
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-metric:hover .aa-tile-question {
    opacity: .75;
}

/* Group label - uppercase micro-label with a gradient tick, inside the
   four containers. */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .text-large.ph9.fw600,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .text-large.ph9.fw600,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .text-large.ph9.fw600,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .text-large.ph9.fw600 {
    display: block;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: #64748b;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .text-large.ph9.fw600::before,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .text-large.ph9.fw600::before,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .text-large.ph9.fw600::before,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .text-large.ph9.fw600::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    margin-right: 7px;
    vertical-align: -1px;
    border-radius: 2px;
    background: linear-gradient(180deg, #0074C5, #8B5CB0 55%, #D98E32);
}
/* Structural fallback: Caseload Health's first group label is
   empty/whitespace-only (unlabeled neutral counts) - collapse the tick
   rather than leave a floating dash. NOTE: the group wrappers repeat as
   SIBLINGS (.d-flex.f-dir-column.h100, one per group), so the group is
   selected at wrapper level, not at its (only) child. */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100:nth-child(1) .text-large.ph9.fw600 {
    margin: 0;
    padding: 0;
    min-height: 0;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100:nth-child(1) .text-large.ph9.fw600::before {
    /* REFINEMENTS: Section 2's new category-icon rule for this same
       nth-child(1) group (added near the accent block below) is equal
       specificity and sits LATER in source order, which would
       otherwise flip this suppression off. !important keeps this
       group's (empty-label) icon suppressed regardless of source
       order. */
    content: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-metric,
    .is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-question,
    .is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric,
    .is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric,
    .is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-metric,
    .is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-metric {
        transition: none;
    }
    .is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-metric:hover,
    .is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric:hover,
    .is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric:hover,
    .is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-metric:hover,
    .is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-metric:hover {
        transform: none;
    }
}

/* ==========================================================================
   SECTION 5 - GENERIC FALLBACK
   Base card look for any .aa-tile-metric in .dashboard-widget-area NOT
   in the four named containers (e.g. Santa Rosa widgets): white card,
   brand accent bar, typography. No grid/box-stack overrides, no
   progress bars. Placed ahead of Sections 2-4 in the file: those
   containers carry an ID in their selectors, which already outranks
   this class-only selector regardless of order, but the aa-tile-fill
   re-enable below is equal-specificity with Section 0's kill rule, so
   it must stay physically after Section 0 (it is) to win.
   ========================================================================== */
/* Default accent lives on the AREA (inherits down) — never on the tile
   itself, or it would beat the group wrappers' semantic accents. */
.is-myincite-ui.nui-modern-pages .dashboard-widget-area {
    --nuiperf-accent: #0074C5;
}
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-metric {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 3px 10px rgba(15, 23, 42, .04);
    min-height: 84px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-metric:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08), 0 6px 16px rgba(15, 23, 42, .07);
}
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-fill::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0;
    background: var(--nuiperf-accent);
    transform: none;
    transition: none;
}
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-value {
    padding: 0;
}
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-value strong {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    color: #123a5c;
}
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .aa-tile-label {
    padding: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

/* ==========================================================================
   SECTION 2 - KPI ROWS: CASELOAD HEALTH (#container-aaw-caseload-health)
   ========================================================================== */

/* REFINEMENTS: with the band border dropped (below), darken the group
   header label in the two row containers only (achievement cards keep
   Section 1's lighter #64748b) so the band is still legible as a
   distinct group. Same selector/specificity as Section 1's shared rule
   - wins by appearing later in source order. */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .text-large.ph9.fw600,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .text-large.ph9.fw600 {
    color: #475569;
}

/* REFINEMENTS: last-updated stamp (element added in templates as
   <span class="nui-perf-updated"> inside these two containers).
   Placed at top:2px/right:8px INSIDE the container rather than
   top:-30px above it - the containers sit inside a widget panel whose
   ancestor likely clips overflow, so a negative offset risks getting
   clipped; top:2px keeps it safely inside the box. */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts {
    position: relative;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .nui-perf-updated,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .nui-perf-updated {
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
}

/* a) Three side-by-side columns. The .d-flex.f-dir-column.h100 wrapper
   repeats PER GROUP (data has one subcateg per row), so the flex row is
   their parent — the categ div. */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: stretch;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100 {
    flex: 1 1 0;
    min-width: 0;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .d-flex.f-dir-column.h100 > div {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    /* REFINEMENTS: drop the visible band border, relying on the
       background tint plus the header typography below instead. */
    border-color: transparent;
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
}

/* b) Accent per group (wrapper-level siblings) */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100:nth-child(1) {
    --nuiperf-accent: #0074C5;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100:nth-child(2) {
    --nuiperf-accent: #16a34a;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100:nth-child(3) {
    --nuiperf-accent: #dc2626;
}

/* REFINEMENTS: category icons - replace Section 1's generic gradient
   tick with an accent-colored Font Awesome 5 Free solid glyph per
   group. Group 1's rule is present for consistency but never renders:
   the nth-child(1) suppression rule above is !important and wins
   (that group's label is empty/whitespace, so no icon should show). */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100:nth-child(1) .text-large.ph9.fw600::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--nuiperf-accent);
    width: auto;
    height: auto;
    background: none;
    margin-right: 7px;
    content: "\f0c0"; /* users - suppressed above via !important */
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100:nth-child(2) .text-large.ph9.fw600::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--nuiperf-accent);
    width: auto;
    height: auto;
    background: none;
    margin-right: 7px;
    content: "\f062"; /* arrow-up */
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health > .h100 > div > .d-flex.f-dir-column.h100:nth-child(3) .text-large.ph9.fw600::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--nuiperf-accent);
    width: auto;
    height: auto;
    background: none;
    margin-right: 7px;
    content: "\f063"; /* arrow-down */
}

/* c) Rows (shared with Weekly Efforts - same box-stack/box-x shape) */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .box-stack,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .box-stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; /* utility sets wrap — with 33% flex-basis items this wrapped into scattered columns */
    gap: 2px;
    height: auto;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .box-stack [class*="box-x"],
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .box-stack [class*="box-x"] {
    width: 100% !important;
    max-width: 100% !important; /* box-x* utilities clamp via max-width 25/33/50% */
    flex: none !important; /* box-x* utilities carry flex-basis: 33%/25% — width alone doesn't override it */
    padding: 0;
    margin: 0 !important;  /* .mhauto centers via auto margins */
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .box-stack [class*="box-x"]:not(:last-child),
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .box-stack [class*="box-x"]:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}

/* d) Row tile - shared base (background/radius/spacing/hover tint),
   then per-container display mode (Section 3 overrides display for
   Weekly Efforts, whose value+label live in a nested wrapper). */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric {
    background: transparent;
    border-radius: 8px;
    min-height: 42px;
    padding: 6px 30px 6px 10px;
    position: relative;
    box-shadow: none;
    border: none;
    transition: background-color .15s ease;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric:hover,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric:hover {
    background: color-mix(in srgb, var(--nuiperf-accent) 8%, white);
    box-shadow: none;
    transform: none;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* e) Label (shared) */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-label,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-label {
    font-size: 13px;
    /* REFINEMENTS: de-emphasize the row label so the value (bumped to
       18px above) reads as the primary figure; label truncates to a
       single line — a native title tooltip is being added on the
       element in the templates, so this is safe. Both templates put
       is-text-black (color:#000 !important) on this same element, so
       color needs !important here to actually take effect. */
    font-weight: 500;
    color: #7b8794 !important;
    padding: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-label::before,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-label::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nuiperf-accent);
    margin-right: 8px;
    vertical-align: 0.5px;
}

/* f) Value (shared) */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-value,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-value {
    padding: 0;
    white-space: nowrap;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-value strong,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-value strong {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-weight: 700;
    /* REFINEMENTS: bump the row value up so it reads as the primary
       figure in the row (see label de-emphasis below). */
    font-size: 18px;
    color: color-mix(in srgb, var(--nuiperf-accent) 72%, #0f172a);
}

/* g) Progress bar - only on tiles carrying --pct (shared) */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric[style*="--pct"],
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric[style*="--pct"] {
    padding-bottom: 12px;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric[style*="--pct"]::before,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric[style*="--pct"]::before {
    content: "";
    display: block;
    position: absolute;
    left: 26px;
    right: 30px;
    bottom: 6px;
    height: 3px;
    border-radius: 999px;
    background: #e8edf3;
    transform: none;
    transition: none;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric[style*="--pct"]::after,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric[style*="--pct"]::after {
    content: "";
    position: absolute;
    left: 26px;
    right: auto;
    top: auto;
    bottom: 6px;
    height: 3px;
    line-height: 0;
    border-radius: 999px;
    background: var(--nuiperf-accent);
    width: calc((100% - 56px) * min(var(--pct, 0), 100) / 100);
    max-width: calc(100% - 56px);
    /* legacy .aa-tile-arrow:after is a rotated "→" — without these
       resets the fill renders as a diagonal slash on expandable tiles */
    transform: none;
    transition: none;
}

/* REFINEMENTS: a tile pinned at --pct: 100 is a meaningless "100%"
   pill plus a fully-filled bar - hide both and give the row back the
   space. NOTE substring caveat: [style*="--pct: 100"] also matches
   "--pct: 1000" etc, but real values here are integers/decimals like
   9.8 or 67, so in practice only an exact 100 matches. Same
   specificity as the (g) [style*="--pct"] rules above - must stay
   after them in source order to win. */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric[style*="--pct: 100"],
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric[style*="--pct: 100"] {
    padding-bottom: 6px;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric[style*="--pct: 100"] .aa-tile-value > span,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric[style*="--pct: 100"] .aa-tile-value > span {
    display: none;
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric[style*="--pct: 100"]::before,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric[style*="--pct: 100"]::before,
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric[style*="--pct: 100"]::after,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric[style*="--pct: 100"]::after {
    content: none;
}

/* h) ? icon (shared) */
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-buttons-br,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-buttons-br {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.is-myincite-ui.nui-modern-pages #container-aaw-caseload-health .aa-tile-metric:hover .aa-tile-question,
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric:hover .aa-tile-question {
    opacity: .75;
}

/* ==========================================================================
   SECTION 3 - KPI ROWS: WEEKLY EFFORTS (#container-aaw-weekly-efforts)
   Shared row system above; differences only below.
   ========================================================================== */

/* Groups stay stacked vertically - band chrome + spacing only, no
   flex-direction flip on the wrapper. The wrapper repeats per group
   (one subcateg child each); the path pins to the top-level wrappers so
   the tile-internal .d-flex.f-dir-column.h100.f-justify-center wrapper
   and its children are never matched. */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts > .d-flex > div > .d-flex.f-dir-column.h100 > div {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    /* REFINEMENTS: drop the visible band border, relying on the
       background tint plus the header typography below instead. */
    border-color: transparent;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
}

/* Accents: Attendance / Staff Outreach (wrapper-level siblings) */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts > .d-flex > div > .d-flex.f-dir-column.h100:nth-child(1) {
    --nuiperf-accent: #0074C5;
}
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts > .d-flex > div > .d-flex.f-dir-column.h100:nth-child(2) {
    --nuiperf-accent: #00AEC4;
}

/* REFINEMENTS: category icons - same treatment as Caseload Health
   above (replaces Section 1's gradient tick). No empty-label group
   here, so both render unconditionally. */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts > .d-flex > div > .d-flex.f-dir-column.h100:nth-child(1) .text-large.ph9.fw600::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--nuiperf-accent);
    width: auto;
    height: auto;
    background: none;
    margin-right: 7px;
    content: "\f274"; /* calendar-check - Attendance */
}
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts > .d-flex > div > .d-flex.f-dir-column.h100:nth-child(2) .text-large.ph9.fw600::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--nuiperf-accent);
    width: auto;
    height: auto;
    background: none;
    margin-right: 7px;
    content: "\f086"; /* comments - Staff Outreach */
}

/* CRITICAL DIFFERENCE: value+label live in a nested wrapper here, so
   .aa-tile-metric itself stays block and the inner wrapper becomes the
   row-reverse flex container. */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric {
    display: block;
}
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .aa-tile-metric > .d-flex.f-dir-column.h100.f-justify-center {
    display: flex;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: auto !important;
    gap: 8px;
}

/* Nested login group: box-x wrapper holding .h50 submetric tiles. The
   tiles inside are still .aa-tile-metric under the same box-stack, so
   the shared row rules above already cover them; only the .h50
   wrapper's own sizing needs correcting. */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-efforts .box-stack [class*="box-x"] > .h50 {
    height: auto !important;
    width: 100%;
}

/* ==========================================================================
   SECTION 4 - COMPACT STAT CARDS: ACHIEVEMENTS
   (#container-aaw-weekly-achievement, #container-aaw-monthly-achievement)
   ========================================================================== */

/* a) Grid */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .box-stack,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .box-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 260px));
    gap: 10px;
    height: auto;
    /* REFINEMENTS: equalize card height within each grid row so a
       longer label in one card doesn't leave neighbors short. */
    grid-auto-rows: 1fr;
}
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .box-stack [class*="box-x"],
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .box-stack [class*="box-x"] {
    width: auto !important;
    max-width: none !important; /* box-x* utilities clamp via max-width 25/33/50% */
    margin: 0 !important;
    padding: 0;
    /* REFINEMENTS: stretch the box-x wrapper to fill its grid-auto-rows
       track so the card inside can be told height:100%. */
    height: 100%;
}

/* b) Card */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-metric,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-metric {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 3px 10px rgba(15, 23, 42, .04);
    min-height: 84px;
    transition: transform .18s ease, box-shadow .18s ease;
    /* REFINEMENTS: fill the height:100% box-x wrapper above so all
       cards in a grid row equalize; box-sizing keeps the border/padding
       inside that 100% instead of overflowing it. */
    height: 100%;
    box-sizing: border-box;
}
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-metric:hover,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-metric:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08), 0 6px 16px rgba(15, 23, 42, .07);
}

/* c) Accent bar (explicit re-enable of aa-tile-fill::before) */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-fill::before,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-fill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--nuiperf-accent);
    display: block;
    border-radius: 0;
    transform: none;
    transition: none;
}

/* d) Value */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-value,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-value {
    padding: 0;
}
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-value strong,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-value strong {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    color: #123a5c;
}

/* e) Label */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-label,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-label {
    padding: 4px 0 0;
    font-size: 12px;
    /* REFINEMENTS: de-emphasize card label to match the row-label
       treatment above; the value carries the emphasis instead. Both
       achievement templates put is-text-black (color:#000 !important)
       on this same element, so color needs !important here too. */
    font-weight: 500;
    color: #7b8794 !important;
}

/* f) Progress - bottom-edge fill */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-metric[style*="--pct"]::after,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-metric[style*="--pct"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    height: 4px;
    line-height: 0;
    background: linear-gradient(90deg, var(--nuiperf-accent), color-mix(in srgb, var(--nuiperf-accent) 55%, #00AEC4));
    width: calc(min(var(--pct, 0), 100) * 1%);
    border-radius: 0 2px 2px 0;
    /* reset the legacy rotated "→" from .aa-tile-arrow:after */
    transform: none;
    transition: none;
}

/* g) ? icon - top-right corner, hover-reveal handled globally (Section 1) */
.is-myincite-ui.nui-modern-pages #container-aaw-weekly-achievement .aa-tile-buttons-br,
.is-myincite-ui.nui-modern-pages #container-aaw-monthly-achievement .aa-tile-buttons-br {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* h) Monthly tiles carry extra classes (d-flex f-dir-column
   f-justify-center) directly on .aa-tile-metric for internal centering;
   nothing above sets `display` on these cards, so that utility class
   controls layout inside the card unopposed. */

/* ==========================================================================
   SECTION 6 - TWO-COLUMN ROW BOTTOM ALIGNMENT
   The Weekly Efforts / Weekly Achievement+Monthly Achievement row is a
   flex row (.d-flex.row.mh0.mb18) with default align-items: stretch.
   Left column has one widget with h100, so it fills the full (tallest-
   column) row height. Right column stacks TWO independent widgets in
   normal block flow — they only take their natural content height,
   leaving invisible empty space below Monthly Achievement (the column
   div itself is stretched, but its static-flow children aren't), so
   Monthly Achievement's visible bottom edge sits above Weekly Efforts'.
   Fix: make the right column a flex column too, so its own stretched
   height is real — space-between then pins the last widget's bottom to
   the container's bottom (matching the left column), growing the GAP
   between the two right-side cards rather than stretching either card's
   internals.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages .dashboard-widget-area > .d-flex.row.mh0.mb18 > .col-xs-6:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}