/* ============================================================
   NEW UI – MODERN PAGES (myIncite)
   Visual-only restyle of bootstrap-3 page chrome: buttons, form
   controls, panel/modal headers, modals, labels/badges/alerts,
   content links, and #AppContainer scrollbars.

   Kill-switch: every selector in this file requires BOTH
   .is-myincite-ui (clientId === 'myincite' AND New UI toggle on —
   see #InciteWrapper ng-class in public/index.html) AND
   .nui-modern-pages (static class on the same #InciteWrapper
   element, public/index.html ~line 516). Drop nui-modern-pages to
   A/B back to classic bootstrap chrome without touching this file.

   Scoping note — modals: classic bootstrap-3 modals defined
   statically in index.html (e.g. #modal-profile, #TimeOffsetErrorNotif)
   sit BEFORE #InciteWrapper opens in the DOM, so they are siblings,
   not descendants, of #InciteWrapper. $uibModal-instantiated windows
   (ui-bootstrap 2.5.6) also default-append their window/backdrop to
   <body> unless an explicit appendTo is passed. Neither case is
   reachable via a plain ".is-myincite-ui.nui-modern-pages .modal-content"
   descendant selector. Section 5 instead guards on
   body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) — the same
   pattern new-ui-theme.css §12 already uses for uib-tooltip-append-to-body
   popups. This also transparently covers any modal markup that DOES
   live inside #AppContainer (a descendant), since :has() only checks
   that the wrapper exists somewhere in <body>; it doesn't require the
   modal to sit outside it.

   No !important battles hit: style.css's .btn / .form-control /
   .panel-heading / .modal-* / .label-* / .badge / .alert rules carry
   no !important, so scoping (.is-myincite-ui.nui-modern-pages ancestor
   + this file loading after style.css) is enough specificity to win
   outright.

   prefers-reduced-motion: transitions added below are disabled.
   ============================================================ */

/* ---------- 0. LOCAL TOKENS ---------- */
/* Semantic accent colors not already covered by new-ui.css's --nui-*
   tokens (which only carries --nui-destructive for red). Declared on
   the wrapper itself so the compound selector IS the scope. */
.is-myincite-ui.nui-modern-pages {
    --nuip-success: #10b981;
    --nuip-danger: #ef4444;
    --nuip-warning: #d97706;
    --nuip-info: #00AEC4;
}

/* ==========================================================================
   1. BUTTONS
   .btn-link is intentionally excluded from every rule below — it's a
   plain inline link masquerading as a button, not a surface to modernize.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages .btn:not(.btn-link) {
    border-radius: 8px;
    font-family: var(--nui-font);
    font-weight: 600;
    background-image: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.is-myincite-ui.nui-modern-pages .btn-primary {
    background-color: var(--nui-brand);
    border-color: var(--nui-brand);
    color: #fff;
}
.is-myincite-ui.nui-modern-pages .btn-primary:hover,
.is-myincite-ui.nui-modern-pages .btn-primary:focus {
    background-color: color-mix(in srgb, var(--nui-brand) 92%, black);
    border-color: color-mix(in srgb, var(--nui-brand) 92%, black);
    color: #fff;
}

.is-myincite-ui.nui-modern-pages .btn-success {
    background-color: var(--nuip-success);
    border-color: var(--nuip-success);
    color: #fff;
}
.is-myincite-ui.nui-modern-pages .btn-success:hover,
.is-myincite-ui.nui-modern-pages .btn-success:focus {
    background-color: color-mix(in srgb, var(--nuip-success) 92%, black);
    border-color: color-mix(in srgb, var(--nuip-success) 92%, black);
    color: #fff;
}

.is-myincite-ui.nui-modern-pages .btn-danger {
    background-color: var(--nuip-danger);
    border-color: var(--nuip-danger);
    color: #fff;
}
.is-myincite-ui.nui-modern-pages .btn-danger:hover,
.is-myincite-ui.nui-modern-pages .btn-danger:focus {
    background-color: color-mix(in srgb, var(--nuip-danger) 92%, black);
    border-color: color-mix(in srgb, var(--nuip-danger) 92%, black);
    color: #fff;
}

.is-myincite-ui.nui-modern-pages .btn-warning {
    background-color: var(--nuip-warning);
    border-color: var(--nuip-warning);
    color: #fff;
}
.is-myincite-ui.nui-modern-pages .btn-warning:hover,
.is-myincite-ui.nui-modern-pages .btn-warning:focus {
    background-color: color-mix(in srgb, var(--nuip-warning) 92%, black);
    border-color: color-mix(in srgb, var(--nuip-warning) 92%, black);
    color: #fff;
}

.is-myincite-ui.nui-modern-pages .btn-info {
    background-color: var(--nuip-info);
    border-color: var(--nuip-info);
    color: #fff;
}
.is-myincite-ui.nui-modern-pages .btn-info:hover,
.is-myincite-ui.nui-modern-pages .btn-info:focus {
    background-color: color-mix(in srgb, var(--nuip-info) 92%, black);
    border-color: color-mix(in srgb, var(--nuip-info) 92%, black);
    color: #fff;
}

.is-myincite-ui.nui-modern-pages .btn-default {
    background-color: #fff;
    border-color: var(--nui-border);
    color: var(--nui-text-body);
}
.is-myincite-ui.nui-modern-pages .btn-default:hover,
.is-myincite-ui.nui-modern-pages .btn-default:focus {
    background-color: var(--nui-bg-hover);
    border-color: var(--nui-border);
    color: var(--nui-text-body);
}

.is-myincite-ui.nui-modern-pages .btn:not(.btn-link):focus-visible {
    outline: 2px solid var(--nui-brand);
    outline-offset: 2px;
}

.is-myincite-ui.nui-modern-pages .btn.disabled,
.is-myincite-ui.nui-modern-pages .btn[disabled],
.is-myincite-ui.nui-modern-pages fieldset[disabled] .btn {
    opacity: .55;
}

/* ==========================================================================
   2. FORM CONTROLS
   ========================================================================== */
.is-myincite-ui.nui-modern-pages .form-control,
.is-myincite-ui.nui-modern-pages select.form-control {
    border: 1px solid var(--nui-border);
    border-radius: 8px;
    background-color: #fff;
}
.is-myincite-ui.nui-modern-pages .form-control:focus,
.is-myincite-ui.nui-modern-pages select.form-control:focus {
    border-color: var(--nui-brand);
    box-shadow: 0 0 0 3px rgba(0, 116, 197, .10);
    background-color: #fff;
}
.is-myincite-ui.nui-modern-pages .form-control::-moz-placeholder {
    color: var(--nui-text-muted);
}
.is-myincite-ui.nui-modern-pages .form-control:-ms-input-placeholder {
    color: var(--nui-text-muted);
}
.is-myincite-ui.nui-modern-pages .form-control::-webkit-input-placeholder {
    color: var(--nui-text-muted);
}

/* ==========================================================================
   3. HEADERS / TYPOGRAPHY
   Scoped to the specific heading-ish classes actually used as titles
   (checked against Students.html / Trackers filter templates / index.html
   modals) rather than a blanket #AppContainer h3/h4/h5, which risks
   catching widget-internal headings that shouldn't be retitled.
   ========================================================================== */
/* Light frosted-glass panels (request 2026-07-23, JIRA-style translucent
   cards over the gradient wash added to #AppContainer). Kept intentionally
   subtle — ~90% opacity, not a dark-glass copy of JIRA — full opaque white
   is the wrong direction here since this app's data-dense screens
   (MyPerformance especially) need solid contrast; a light blur keeps text
   crisp while letting the corner blooms bleed through at the edges.
   .panel is Bootstrap's base card wrapper, already broadly modernized
   here (this file's own .panel-heading rule below is the established
   precedent for treating it as generic, safe-to-modernize chrome — unlike
   narrower custom classes such as .wh-card, which are shared with
   unrelated legacy screens and must stay narrowly scoped). */
.is-myincite-ui.nui-modern-pages .panel {
    background-color: rgba(255, 255, 255, .90);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.is-myincite-ui.nui-modern-pages .panel-heading {
    background: rgba(255, 255, 255, .5);
    background-image: none;
    border-bottom: 1px solid var(--nui-border);
    font-family: var(--nui-font);
    font-weight: 600;
    color: var(--nui-text-dark);
}
.is-myincite-ui.nui-modern-pages .panel-title,
.is-myincite-ui.nui-modern-pages .modal-title {
    font-family: var(--nui-font);
    font-weight: 600;
    color: var(--nui-text-dark);
}
/* .section-title: collapsible filter-group header used across
   Students/catalog/assess/tracker filter panels (e.g.
   public/_enrollment/Students/Students-ffb3779347.html, public/_eLearning/catalog/filters-3dbd2d3333.html).
   Font/color only — inherits into the nested .text-large <strong>;
   its #ebebeb background + padding are left alone (layout-affecting). */
.is-myincite-ui.nui-modern-pages .section-title {
    font-family: var(--nui-font);
    color: var(--nui-text-dark);
}

/* ==========================================================================
   4. MODALS
   See file-header note: guarded on body:has(...) because classic
   modals in index.html are DOM siblings of #InciteWrapper, and
   $uibModal windows default-append to <body>, not #InciteWrapper.
   ========================================================================== */
body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
}
body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .modal-header {
    border-bottom: 1px solid var(--nui-border);
}
body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .modal-title {
    font-family: var(--nui-font);
    font-weight: 600;
}
body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .modal-footer {
    border-top: 1px solid var(--nui-border);
}

/* ==========================================================================
   5. BADGES / LABELS / ALERTS
   Soft treatment: tinted background (accent mixed 12% into white) +
   the accent itself darkened for text, so contrast holds on the tint.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages .label,
.is-myincite-ui.nui-modern-pages .badge {
    border-radius: 6px;
    font-weight: 600;
}

.is-myincite-ui.nui-modern-pages .label-default {
    background-color: var(--nui-bg-light);
    color: var(--nui-text-body);
}
.is-myincite-ui.nui-modern-pages .label-primary {
    background-color: color-mix(in srgb, var(--nui-brand) 12%, white);
    color: color-mix(in srgb, var(--nui-brand) 80%, black);
}
.is-myincite-ui.nui-modern-pages .label-success {
    background-color: color-mix(in srgb, var(--nuip-success) 12%, white);
    color: color-mix(in srgb, var(--nuip-success) 70%, black);
}
.is-myincite-ui.nui-modern-pages .label-danger {
    background-color: color-mix(in srgb, var(--nuip-danger) 12%, white);
    color: color-mix(in srgb, var(--nuip-danger) 75%, black);
}
.is-myincite-ui.nui-modern-pages .label-warning {
    background-color: color-mix(in srgb, var(--nuip-warning) 12%, white);
    color: color-mix(in srgb, var(--nuip-warning) 80%, black);
}
.is-myincite-ui.nui-modern-pages .label-info {
    background-color: color-mix(in srgb, var(--nuip-info) 12%, white);
    color: color-mix(in srgb, var(--nuip-info) 70%, black);
}

.is-myincite-ui.nui-modern-pages .badge {
    background-color: var(--nui-bg-light);
    color: var(--nui-text-body);
}

.is-myincite-ui.nui-modern-pages .alert {
    border-radius: 8px;
    background-image: none;
    border-left: 3px solid transparent;
}
.is-myincite-ui.nui-modern-pages .alert-success {
    background-color: color-mix(in srgb, var(--nuip-success) 12%, white);
    border-color: transparent;
    border-left-color: var(--nuip-success);
    color: color-mix(in srgb, var(--nuip-success) 70%, black);
}
.is-myincite-ui.nui-modern-pages .alert-info {
    background-color: color-mix(in srgb, var(--nuip-info) 12%, white);
    border-color: transparent;
    border-left-color: var(--nuip-info);
    color: color-mix(in srgb, var(--nuip-info) 70%, black);
}
.is-myincite-ui.nui-modern-pages .alert-warning {
    background-color: color-mix(in srgb, var(--nuip-warning) 12%, white);
    border-color: transparent;
    border-left-color: var(--nuip-warning);
    color: color-mix(in srgb, var(--nuip-warning) 80%, black);
}
.is-myincite-ui.nui-modern-pages .alert-danger {
    background-color: color-mix(in srgb, var(--nuip-danger) 12%, white);
    border-color: transparent;
    border-left-color: var(--nuip-danger);
    color: color-mix(in srgb, var(--nuip-danger) 75%, black);
}

/* ==========================================================================
   6. LINKS + SCROLLBARS
   Content links only — .btn and nav/menu components (topbar, sidebar,
   tabs, pagination, dropdowns, list-groups) keep their own link styling.
   ========================================================================== */
.is-myincite-ui.nui-modern-pages #AppContainer a[href]:not([href="#"]):not([href^="javascript"]):not([href^="unsafe"]):not(.btn):not(nav a):not(.nav a):not(.navbar a):not(.dropdown-menu a):not(.pagination a):not(.list-group-item):not(.nui-tb-dd-item):not(.nui-tile-link) {
    color: var(--nui-brand);
    text-decoration: none;
}
.is-myincite-ui.nui-modern-pages #AppContainer a[href]:not([href="#"]):not([href^="javascript"]):not([href^="unsafe"]):not(.btn):not(nav a):not(.nav a):not(.navbar a):not(.dropdown-menu a):not(.pagination a):not(.list-group-item):not(.nui-tb-dd-item):not(.nui-tile-link):hover {
    color: color-mix(in srgb, var(--nui-brand) 85%, black);
    text-decoration: underline;
}

.is-myincite-ui.nui-modern-pages #AppContainer::-webkit-scrollbar,
.is-myincite-ui.nui-modern-pages #AppContainer *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.is-myincite-ui.nui-modern-pages #AppContainer::-webkit-scrollbar-thumb,
.is-myincite-ui.nui-modern-pages #AppContainer *::-webkit-scrollbar-thumb {
    background-color: var(--nui-border-hover);
    border-radius: 6px;
}
.is-myincite-ui.nui-modern-pages #AppContainer::-webkit-scrollbar-track,
.is-myincite-ui.nui-modern-pages #AppContainer *::-webkit-scrollbar-track {
    background: transparent;
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .is-myincite-ui.nui-modern-pages .btn:not(.btn-link) {
        transition: none;
    }
}

/* ==========================================================================
   8. MYPERFORMANCE WIDGET CHROME
   Dashboard widget cards, headers, scoreboard gradients, and school-select
   toolbar restyled for the New UI modern aesthetic.
   ========================================================================== */

/* Widget cards — white surface with subtle border and soft shadow */
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .widget.panel.panel-widget {
    background-color: rgba(255, 255, 255, .90);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .06);
    overflow: hidden;
}

/* Widget headers — light background, subtle divider, Montserrat title with gradient tick.
   Same translucency as the card body (see .panel above) so header and
   body read as one uniform frosted surface, not a two-tone mismatch. */
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .widget-header {
    background: rgba(255, 255, 255, .5);
    border-bottom: 1px solid #f1f5f9;
    padding: 12px 16px;
}

.is-myincite-ui.nui-modern-pages .dashboard-widget-area .widget-header .panel-title {
    margin: 0;
    font-family: Montserrat, var(--nui-font);
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
}

/* Gradient tick indicator before title */
.is-myincite-ui.nui-modern-pages .dashboard-widget-area .widget-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background: linear-gradient(180deg, #0074C5, #8B5CB0 55%, #D98E32);
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: -2px;
    flex-shrink: 0;
}

/* My Scoreboard cards — on-palette gradients for each card type */
.is-myincite-ui.nui-modern-pages .summary-card.card-primary {
    background: linear-gradient(135deg, #0074C5, #00AEC4) !important;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .06);
}

.is-myincite-ui.nui-modern-pages .summary-card.card-cer {
    background: linear-gradient(135deg, #00AEC4, #0e7490) !important;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .06);
}

.is-myincite-ui.nui-modern-pages .summary-card.card-zero-credits {
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .06);
}

.is-myincite-ui.nui-modern-pages .summary-card.card-warning {
    background: linear-gradient(135deg, #D98E32, #f59e0b) !important;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .06);
}

.is-myincite-ui.nui-modern-pages .summary-card.card-alert {
    background: linear-gradient(135deg, #8B5CB0, #a78bfa) !important;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .06);
}

/* School Select toolbar — slim filter bar styled as a white card */
.is-myincite-ui.nui-modern-pages .widget-no-panel .widget.panel.panel-widget {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.is-myincite-ui.nui-modern-pages .widget-no-panel .panel-body {
    padding: 8px 14px;
}

/* Reduced motion for scoreboard card hover transitions */
@media (prefers-reduced-motion: reduce) {
    .is-myincite-ui.nui-modern-pages .summary-card.clickable {
        transition: none;
    }
}

/* ---------- COURSE SUB-NAV (Courses > a course) ----------
   new-ui.css hides every legacy .second-level-menu because the sidebar
   replaces them. The course-level tabs (course name, District Coursework,
   My Classrooms, Grading Center, Progress Tracker, Admin) have no sidebar
   equivalent, so courses/course/course.html marks its menu .nui-course-subnav
   and it is shown again here as a flat tab strip under the breadcrumb bar. */
.is-myincite-ui .second-level-menu.nui-course-subnav {
    display: block !important;
    margin: 0;
    padding: 0 24px;
    background: var(--nui-bg-white, #fff);
    border-bottom: 1px solid var(--nui-bg-light, #EEF1F2);
    box-shadow: none;
}
.is-myincite-ui .nui-course-subnav .container {
    width: auto;
    max-width: none;
    padding: 0;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    float: none;
    margin: 0;
    border: 0;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li {
    float: none;
    margin: 0;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li > a:not(.btn-in-menu) {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 12px !important; /* style.css: padding: 0 !important */
    font-family: var(--nui-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--nui-text-secondary, #7B8E92);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li > a:not(.btn-in-menu):hover,
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li > a:not(.btn-in-menu):focus {
    color: var(--nui-text-dark, #222831);
    background: transparent;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li > a.active,
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li.active > a:not(.btn-in-menu) {
    color: #0074C5;
    border-bottom-color: #0074C5;
    background: transparent;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li > .label.is-primary {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 0 8px 0 0;
    padding: 0 10px;
    border-radius: 999px;
    font-family: var(--nui-font);
    font-size: 12px;
    font-weight: 600;
    background: rgba(0, 116, 197, .10);
    color: #0074C5;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li.dropdown > .dropdown-menu {
    margin-top: 0;
    border: 1px solid var(--nui-bg-light, #EEF1F2);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(34, 40, 49, .12);
    padding: 6px 0;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li.dropdown > .dropdown-menu > li > a {
    display: block;
    padding: 8px 14px;
    font-family: var(--nui-font);
    font-size: 13px;
    color: var(--nui-text-dark, #222831);
    border-radius: 0;
}
.is-myincite-ui .nui-course-subnav ul.nav-tabs > li.dropdown > .dropdown-menu > li > a:hover {
    background: var(--nui-bg-light, #EEF1F2);
}