/* ============================================================================
   facultyportal-v2-compat.css  -  legacy -> Faculty Portal V2 bridge
   ----------------------------------------------------------------------------
   Everything the content pages ship (Metronic 7 / Bootstrap 4 shell, Telerik,
   the sb-admin-2 shell of FacultyMasterPage.master) restyled onto the tokens
   of facultyportal-v2.css.

   THE SWITCH: class="fp2" on <body>. Every rule here is scoped body.fp2, so
   removing that one class restores the original look of any page.

   LAYOUT OF THIS FILE
     1. canvas          - beat Metronic's Poppins / grey page
     2. geometry        - 222px sidebar, 54px topbar, no fixed subheader
     3. sidebar         - the DB-driven Metronic menu rendered as the mockup's
                          nav-label / nav-item list (markup untouched)
     4. topbar          - #kt_header reused as the mockup topbar
     5. content + page head (#kt_subheader) + page-level .subheader blocks
     6. footer / offcanvas / scrolltop / mobile header
     ---- GENERATED: sections 7-20, 6e, 6g ported from the Student Portal
          (cards, buttons, forms, tables, Telerik, alerts, labels, modals,
          nav-tabs, symbols, scrollbars, responsive, the sb-admin-2 shell,
          toast, print, lightbox, wide report grids) ----
     ---- hand-written overrides that must beat the generated part ----

   CONVENTIONS (same as the Student Portal port)
     * any rule aimed at grid cells uses  > td  (Telerik nests tables)
     * no :has() without a child combinator
     * bump ?v=NN on every link after any CSS edit (see metadata/bump.js)
   ============================================================================ */

/* ==========================================================================
   1. CANVAS
   ========================================================================== */
body.fp2,
body.fp2 .text-dark,
body.fp2 .text-dark-50,
body.fp2 .text-dark-75 {
    font-family: var(--fp2-sans);
}

body.fp2 {
    background-color: var(--fp2-bg) !important;
    color: var(--fp2-ink);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Metronic paints the page grey behind everything */
body.fp2 .wrapper,
body.fp2 .d-flex.flex-column.flex-root,
body.fp2 .page,
body.fp2 .content,
body.fp2 #kt_content {
    background: transparent !important;
}

body.fp2 h1, body.fp2 h2, body.fp2 h3,
body.fp2 h4, body.fp2 h5, body.fp2 h6 {
    font-family: var(--fp2-sans);
    color: var(--fp2-ink);
    letter-spacing: -.005em;
}

/* the (0,2,1) rule above outranks the theme's own (0,1,1) serif headings -
   restore every serif heading facultyportal-v2.css declares */
body.fp2 .fp2-sf-in h1,
body.fp2 .fp2-page-head h1,
body.fp2 .fp2-card-head h3,
body.fp2 .fp2-welcome-strip .fp2-greet-text h2,
body.fp2 .fp2-qa-head h3,
body.fp2 .fp2-timeline-head h3,
body.fp2 .fp2-deadlines-head h3,
body.fp2 .fp2-alerts-head h3,
body.fp2 .fp2-courses-row-head h3,
body.fp2 .fp2-profile-main h2,
body.fp2 .fp2-msg-list-head h4,
body.fp2 .fp2-msg-view-head h3,
body.fp2 .fp2-survey-head h4,
body.fp2 .fp2-d4-date,
body.fp2 .fp2-mc-title,
body.fp2 .fp2-dl4-n {
    font-family: var(--fp2-serif);
}

body.fp2 .fp2-shead h3 { font-family: var(--fp2-sans); color: var(--fp2-ink-soft); }

/* the display serif for the legacy card titles and big figures */
body.fp2 .fp2-figure,
body.fp2 .card.card-custom > .card-header .card-title .card-label {
    font-family: var(--fp2-serif);
}

body.fp2 a { color: var(--fp2-accent-warm); }
body.fp2 a:hover { color: var(--fp2-accent); }
body.fp2 .text-primary { color: var(--fp2-accent-warm) !important; }
body.fp2 .text-hover-primary:hover { color: var(--fp2-accent-warm) !important; }
body.fp2 .svg-icon-primary svg g [fill] { fill: var(--fp2-accent) !important; }
body.fp2 .text-muted { color: var(--fp2-ink-muted) !important; }
/* Metronic's dark utilities are cold navy - warm them up */
body.fp2 .text-dark { color: var(--fp2-ink) !important; }
body.fp2 .text-dark-75 { color: var(--fp2-ink) !important; }
body.fp2 .text-dark-50 { color: var(--fp2-ink-muted) !important; }
body.fp2 .text-dark-25 { color: var(--fp2-faint) !important; }
body.fp2 .text-danger { color: var(--fp2-danger) !important; }
body.fp2 .text-success { color: var(--fp2-success) !important; }
body.fp2 .text-warning { color: var(--fp2-warning) !important; }

/* ==========================================================================
   2. GEOMETRY  -  Metronic reserves 265px for the aside and 65px for the
      header; the mockup is a 222px sidebar and a 54px topbar. `subheader-fixed`
      and `footer-fixed` are no longer on <body>, so nothing else reserves
      space. Below 992px Metronic's own off-canvas aside + burger header stay
      as they are (55px).
   ========================================================================== */
body.fp2 .aside { width: 222px; }

@media (min-width: 992px) {
    body.fp2.aside-fixed .wrapper { padding-left: 222px !important; }
    body.fp2.aside-enabled .header.header-fixed { left: 222px !important; }
    body.fp2.header-fixed .wrapper { padding-top: 54px !important; }
    body.fp2 .header { height: 54px !important; }
    /* hover-minimise is off, but if a page ever adds aside-minimize keep it sane */
    body.fp2.aside-fixed.aside-minimize:not(.aside-minimize-hover) .wrapper { padding-left: 222px !important; }
    body.fp2.aside-minimize:not(.aside-minimize-hover) .aside { width: 222px; }
    body.fp2 .aside-minimize .brand-toggle { display: none; }
}

/* ==========================================================================
   3. SIDEBAR  -  #kt_aside. The Metronic DOM and ids are kept (KTLayout binds
      to them); only the paint changes.
   ========================================================================== */
body.fp2 .aside {
    background: var(--fp2-surface) !important;
    border-right: 1px solid var(--fp2-line);
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
}

/* --- brand: logo | rule | two-line institution name ------------------------ */
body.fp2 .aside .brand {
    height: auto !important;
    min-height: 0;
    padding: 18px 8px 6px 16px !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
body.fp2 .aside .brand .brand-logo {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    width: 100%;
    text-decoration: none;
}
body.fp2 .aside .brand .brand-logo img,
body.fp2 .aside .brand .brand-logo .CompanyLogo {
    display: block !important;
    height: 34px !important;
    width: auto !important;
    max-width: 96px;
    object-fit: contain;
}
/* the divider span stays in the markup but is not drawn any more: the divider is
   now the NAME BLOCK's own left border (below), so it travels with the name and
   can never be left standing alone beside the logo (client, 2026-10-02: boxed the
   brand on a UIT page - logo, then a stray vertical line with nothing beside it,
   and "UIT University" on a row of its own underneath). */
body.fp2 .fp2-brand-rule { display: none; }
/* the two name lines are block boxes (inline spans ignore width/overflow):
   both lines WRAP to as many lines as the name needs (client: show the
   complete name, never clip it); the brand simply grows taller.
   LAYOUT (2026-10-02, changed 2026-10-05). The text block is a flex item and
   .brand-logo may wrap. It asks for a COLUMN, not for the whole name on one
   line: flex-basis 112px (divider + padding + ~100px of text), so
     - the name sits BESIDE the logo whenever that column is left, i.e. for any
       logo up to about 78px wide: "UIT University" on one line, "University
       of Greater Manchester Islamabad" on three, always logo | divider | name
       (client, 2026-10-05, UGMI / Bolton: "why does the name keep moving in
       next line? i want the logo and name side by side");
     - it drops to a row of its own only under a logo too wide to leave that
       column (a ~96px logo - the SSUET case that was a 6-7 line sliver beside
       it, client 2026-10-01), where it gets the full width and 2-3 lines.
   Until 2026-10-05 the flex-basis was the name on ONE line (flex: 1 1 auto),
   so any name that did not fit on a single line beside the logo dropped under
   it - UGMI's, an IAC-like one - even when two or three short lines fitted
   beside it perfectly. The brand's right padding is 8px (was 16) and the
   gaps 8px: ~12px more for the name; the left edge stays on the menu's 16px.
   The 222px sidebar itself is a deliberate layout constant (see "geometry" at
   the top) and is not touched. A row-gap / column-gap pair (not margins on
   the name block): the 8px only exists when the name sits on a second row,
   and the 8px between logo and divider only when the two share a row - so a
   stacked name starts flush with the logo's left edge instead of being
   indented. */
body.fp2 .aside .brand .brand-logo { flex-wrap: wrap; gap: 8px 8px; }
body.fp2 .fp2-brand-text {
    display: flex; flex-direction: column; justify-content: center;
    flex: 1 1 112px; min-width: 0; align-self: stretch;
    padding-left: 8px; border-left: 1px solid var(--fp2-line);
    line-height: 1.25;
}
body.fp2 .fp2-brand-text .fp2-t1 {
    display: block;
    font-size: 12px; font-weight: 700; letter-spacing: .002em; color: var(--fp2-ink);
    text-transform: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
}
body.fp2 .fp2-brand-text .fp2-t2 {
    display: block;
    font-size: 9.5px; font-weight: 700; letter-spacing: .002em; margin-top: 1px; color: var(--fp2-ink);
    text-transform: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
body.fp2 .fp2-brand-text .fp2-t1:empty,
body.fp2 .fp2-brand-text .fp2-t2:empty { display: none; }
/* Client wants the full name (spnBrandT1/.fp2-t1) kept, only the short
   code line (spnBrandT2/.fp2-t2, e.g. "SSUET") dropped (2026-09-30
   follow-up - the first pass hid this whole block, too much). Markup and
   PopulateShell() keep writing both spans (86+ pages worth of code-behind
   reference them), so hide just the one line here instead of touching
   markup - same display:none pattern already used for .CompanyLogoMob/
   .userProfileCopy elsewhere in this file. */
body.fp2 .fp2-brand-text .fp2-t2 { display: none; }
body.fp2 .aside .brand .brand-toggle { display: none; }

/* --- the menu: a flat list, groups become section labels ------------------- */
body.fp2 .aside-menu-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 64px;         /* room for the rail foot */
    flex: 1 1 auto;
}
body.fp2 .aside-menu { background: transparent !important; padding: 0 16px !important; margin: 0 !important; }
/* KTLayoutAsideMenu (scripts.bundle.js) stamps a computed pixel HEIGHT onto
   #kt_aside_menu at init (it replaces the inline height:auto), which made the
   menu taller than its wrapper and showed a scrollbar even for a short menu.
   A stylesheet !important beats an inline non-important value. The wrapper
   still scrolls natively when a menu really is longer than the viewport. */
body.fp2 #kt_aside_menu { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
body.fp2 #kt_aside_menu > .ps__rail-y, body.fp2 #kt_aside_menu > .ps__rail-x { display: none !important; }
body.fp2 .aside-menu-wrapper { scrollbar-width: thin; scrollbar-color: var(--fp2-line) transparent; }
body.fp2 .aside-menu .menu-nav { padding: 0 !important; margin: 0; }
body.fp2 .aside-menu .menu-nav > .menu-item { margin: 0; }

/* the HOUserLogin "select faculty" stub: an icon-only link with an onclick */
body.fp2 .aside-menu .menu-nav > .menu-item > a.menu-link[onclick] { display: none !important; }

/* every link (top-level page or group child) is a mockup nav-item */
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 11px 0 !important;
    min-height: 0 !important;
    height: auto;
    border-radius: 0;
    background: transparent !important;
    color: var(--fp2-ink-soft) !important;
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
    transition: color .15s ease;
}
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link:hover { color: var(--fp2-ink) !important; }
body.fp2 .aside-menu .menu-nav .menu-item.fp2-active > .menu-link { color: var(--fp2-accent) !important; font-weight: 600; }
body.fp2 .aside-menu .menu-nav .menu-item.fp2-active > .menu-link::before {
    content: ''; position: absolute; left: -16px; top: 2px; bottom: 2px; width: 3px; background: var(--fp2-accent);
}
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-text {
    color: inherit !important; font-size: inherit !important; font-weight: inherit !important;
    flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.3;
}
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-icon {
    width: 18px; height: 18px; flex: none; margin: 0 !important; display: flex; align-items: center;
    color: inherit !important; opacity: 1;
}
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-icon svg { width: 18px; height: 18px; display: block; }
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-icon svg g [fill] { fill: currentColor !important; }
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-icon svg [fill="#000000"] { fill: currentColor; }
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-icon svg [opacity="0.3"] { opacity: .35; }
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-icon i { color: inherit !important; }
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-bullet,
body.fp2 .aside-menu .menu-submenu > .menu-arrow { display: none !important; }
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-label { margin-left: auto; }
body.fp2 .aside-menu .menu-nav .menu-item > .menu-link .menu-label .label {
    background: transparent; color: var(--fp2-ink-muted); font-size: 11.5px; font-weight: 500; padding: 0; height: auto;
}

/* GROUPS: expandable, like the original portal (Metronic accordion, driven by
   KTMenu on click). The parent link is a nav-item with its DB icon, its text
   and a chevron; the submenu stays hidden until the group is opened. The
   group holding the current page is opened on load by initRailActive() in
   facultyportal-v2.js (it adds Metronic's own menu-item-open class). */
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-submenu > .menu-link.menu-toggle {
    cursor: pointer;
    padding: 11px 0 !important;
}
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-submenu > .menu-link.menu-toggle .menu-icon { display: flex !important; }
body.fp2 .aside-menu .menu-nav .menu-item.menu-item-submenu > .menu-link.menu-toggle .menu-arrow {
    display: block !important;
    flex: none;
    width: auto;
    margin-left: auto;
    font-size: 8px;
    color: var(--fp2-ink-muted);
    opacity: .9;
    transition: transform .2s ease;
}
body.fp2 .aside-menu .menu-nav .menu-item.menu-item-submenu > .menu-link.menu-toggle .menu-arrow::before { color: inherit; }
body.fp2 .aside-menu .menu-nav .menu-item.menu-item-submenu.menu-item-open > .menu-link.menu-toggle { color: var(--fp2-ink) !important; }
body.fp2 .aside-menu .menu-nav .menu-item.menu-item-submenu.menu-item-open > .menu-link.menu-toggle .menu-arrow { transform: rotate(90deg); }
body.fp2 .aside-menu .menu-nav .menu-item.menu-item-submenu.fp2-has-active > .menu-link.menu-toggle { color: var(--fp2-ink) !important; }
/* the submenu itself: Metronic shows it only when the group carries
   menu-item-open (accordion); the theme only strips its paint */
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-submenu > .menu-submenu {
    padding: 2px 0 6px !important; margin: 0 !important;
    background: transparent !important;
    position: static !important; width: auto !important; box-shadow: none !important;
}
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-submenu.menu-item-open > .menu-submenu { display: block !important; }
/* never the hover fly-out KTMenu builds for data-menu-toggle=hover groups */
body.fp2 .aside-menu .menu-nav .menu-item.menu-item-submenu:not(.menu-item-open) > .menu-submenu { display: none !important; }
body.fp2 .aside-menu .menu-nav .menu-item.menu-item-submenu.menu-item-hover:not(.menu-item-open) > .menu-submenu { display: none !important; }
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-submenu > .menu-submenu .menu-subnav { padding: 0 !important; margin: 0; }
body.fp2 .aside-menu .menu-nav .menu-subnav > .menu-item.menu-item-parent { display: none !important; }
/* children: text aligned under the parent's text (18px icon + 11px gap) */
body.fp2 .aside-menu .menu-nav .menu-subnav > .menu-item > .menu-link { padding: 9px 0 9px 29px !important; font-size: 13px; }
body.fp2 .aside-menu .menu-nav .menu-subnav > .menu-item.fp2-active > .menu-link::before { left: -16px; }
/* nested groups (3rd level) */
body.fp2 .aside-menu .menu-nav .menu-subnav .menu-subnav > .menu-item > .menu-link { padding-left: 41px !important; }
body.fp2 .aside-menu .menu-nav .menu-subnav > .menu-item.menu-item-submenu > .menu-submenu { padding: 0 !important; background: transparent !important; }
body.fp2 .aside-menu .menu-nav .menu-subnav > .menu-item.menu-item-submenu.menu-item-open > .menu-submenu { display: block !important; }

/* .menu-section (the "Go To Employee Panel" link SSUET/UIT get) */
body.fp2 .aside-menu .menu-nav > .menu-section {
    margin: 0 !important; padding: 11px 0 !important; height: auto !important; display: flex; align-items: center;
}
body.fp2 .aside-menu .menu-nav > .menu-section > .menu-text {
    color: var(--fp2-accent-warm) !important; font-size: 12.5px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0 !important; text-decoration: none;
}
body.fp2 .aside-menu .menu-nav > .menu-section > .menu-text:hover { color: var(--fp2-accent) !important; }
body.fp2 .aside-menu .menu-nav > .menu-section > .menu-icon { display: none !important; }

/* Metronic's hover / open / active backgrounds for the aside (light skin) */
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading,
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link,
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
body.fp2 .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link,
body.fp2 .aside-menu .menu-nav .menu-subnav > .menu-item.menu-item-active > .menu-link,
body.fp2 .aside-menu .menu-nav .menu-subnav > .menu-item:hover > .menu-link {
    background: transparent !important;
}
/* Metronic sets the icon span's colour directly per state - neutralise */
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon,
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-icon,
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon,
body.fp2 .aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-icon,
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-active:hover > .menu-link .menu-icon {
    color: inherit !important;
}
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
body.fp2 .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text,
body.fp2 .aside-menu .menu-nav .menu-subnav > .menu-item.menu-item-active > .menu-link .menu-text {
    color: inherit !important;
}


/* --- rail foot: sign out. Sits BEFORE the menu wrapper in the markup and is
   pinned to the bottom, so the unbalanced HTML the menu generator can emit
   cannot re-parent it (see the handoff doc). --- */
body.fp2 .fp2-rail-foot {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 16px 14px;
    background: var(--fp2-surface);
    border-top: 1px solid var(--fp2-line-soft);
    display: flex; flex-direction: column; gap: 2px;
    z-index: 2;
}
body.fp2 .fp2-rail-foot a {
    display: flex; align-items: center; gap: 11px;
    padding: 6px 0; font-size: 13px; font-weight: 500;
    color: var(--fp2-ink-soft); text-decoration: none; transition: color .15s ease;
}
body.fp2 .fp2-rail-foot a svg { width: 18px; height: 18px; flex: none; }
body.fp2 .fp2-rail-foot a:hover { color: var(--fp2-ink); }
body.fp2 .fp2-rail-foot a.fp2-rail-out:hover { color: var(--fp2-danger); }

/* ==========================================================================
   4. TOPBAR  -  #kt_header is reused (KTLayout looks it up at init); its
      container carries the mockup's .fp2-topbar classes.
   ========================================================================== */
body.fp2 .header {
    background: var(--fp2-bg) !important;
    border-bottom: 1px solid var(--fp2-line);
    box-shadow: none !important;
}
body.fp2 .header > .container-fluid.fp2-topbar {
    position: static;
    height: 54px;
    padding: 0 26px;
    gap: 14px;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: none;
}
body.fp2 #kt_header_menu_wrapper { display: none !important; }
body.fp2 .fp2-topbar .fp2-crumb { font-size: 13.5px; color: var(--fp2-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.fp2 .fp2-topbar .fp2-crumb b { font-weight: 600; color: var(--fp2-ink); }
body.fp2 .fp2-topbar .fp2-crumb b:empty::before { content: ''; }
body.fp2 .fp2-tb-term { font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--fp2-ink-muted); white-space: nowrap; }
body.fp2 .fp2-tb-term:empty { display: none; }
body.fp2 .fp2-top-actions { display: flex; gap: 8px; align-items: center; flex: none; margin-left: auto; }
body.fp2 .fp2-top-actions .fp2-icon-btn {
    width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--fp2-line); background: var(--fp2-surface);
    cursor: pointer; display: grid; place-items: center; color: var(--fp2-ink-soft); transition: all .15s; position: relative;
    padding: 0; text-decoration: none;
}
body.fp2 .fp2-top-actions .fp2-icon-btn:hover { color: var(--fp2-ink); border-color: var(--fp2-ink-muted); }
body.fp2 .fp2-top-actions .fp2-icon-btn svg { display: block; }
body.fp2 .fp2-top-actions .fp2-user-btn {
    display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 13px 0 4px;
    border: 1px solid var(--fp2-line); background: var(--fp2-surface); border-radius: 999px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--fp2-ink); white-space: nowrap; transition: border-color .15s, background .15s;
    max-width: 260px;
}
body.fp2 .fp2-top-actions .fp2-user-btn:hover { border-color: var(--fp2-ink-muted); background: var(--fp2-surface-2); }
body.fp2 .fp2-top-actions .fp2-user-btn .fp2-av {
    width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--fp2-accent-tint); color: var(--fp2-accent-warm);
    display: grid; place-items: center; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
}
body.fp2 .fp2-top-actions .fp2-user-btn .fp2-nm { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--fp2-ink); }

/* ==========================================================================
   5. CONTENT + PAGE HEAD
   ========================================================================== */
@media (min-width: 992px) {
    body.fp2 .content { padding: 20px 0 36px !important; }
}
/* full width: the mockup capped the content at 1400px and left it flush left,
   which on wide screens left a big gap on the right only (client, 2026-09-15:
   the two side gaps must match). No cap now - the 26px padding is the gap. */
body.fp2 #kt_content > .d-flex > .container {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0 26px;
}
body.fp2 .fp2-page-dashboard { max-width: none; }   /* the dashboard had its own 1360px cap */
body.fp2 #kt_content > .d-flex > .container > .row { margin: 0; }
body.fp2 #kt_content > .d-flex > .container > .row > .col-lg-12 { padding: 0; }

/* the master's page head (#kt_subheader, class fp2-page-head) */
body.fp2 .subheader.fp2-page-head {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    height: auto !important; width: auto !important; min-height: 0;
    z-index: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 22px !important;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
body.fp2 .subheader.fp2-page-head > .container-fluid { padding: 0; margin: 0; max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
body.fp2 .fp2-page-head h1 {
    font-family: var(--fp2-serif);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0;
    color: var(--fp2-ink);
}
body.fp2 .fp2-page-head h1:empty { display: none; }
body.fp2 .fp2-page-head .fp2-sub { color: var(--fp2-ink-muted); font-size: 13px; margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.fp2 .fp2-page-head .fp2-sub a { color: var(--fp2-ink-muted); text-decoration: none; }
body.fp2 .fp2-page-head .fp2-sub a:hover { color: var(--fp2-accent); }
body.fp2 .fp2-page-head .fp2-sub a:empty,
body.fp2 .fp2-page-head .fp2-sub a:empty + .fp2-crumb-sep { display: none; }
body.fp2 .fp2-page-head .fp2-sub .fp2-crumb-sep { color: var(--fp2-faint, #AAA090); }
body.fp2 .fp2-page-head .fp2-head-date { font-size: 12.5px; color: var(--fp2-ink-muted); white-space: nowrap; padding-bottom: 4px; }
body.fp2 .fp2-page-head .fp2-head-date b { font-family: var(--fp2-serif); font-weight: 600; font-size: 15px; color: var(--fp2-ink); margin-right: 4px; }
/* pages with no menu row have an empty title: keep the head minimal */
body.fp2 .subheader.fp2-page-head.fp2-head-empty { margin-bottom: 8px !important; }

/* survey-eligibility notices (moved out of the masthead; normal flow) */
body.fp2 .fp2-notice-crit {
    background: var(--fp2-danger-soft); color: var(--fp2-danger);
    border: 1px solid rgba(162,65,42,.25); border-radius: 10px;
    padding: 10px 14px; margin: 0 0 16px;
}
body.fp2 .fp2-notice-crit h4 { margin: 0; font-size: 13px; font-weight: 600; text-align: center; color: inherit; }

/* PAGE-LEVEL .subheader blocks (36 content pages carry their own copy of the
   old Metronic subheader, mostly a duplicated title + dead buttons) */
body.fp2 .content .subheader:not(.fp2-page-head) {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    height: auto !important; min-height: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: -8px 0 14px !important;
}
body.fp2 .content .subheader:not(.fp2-page-head) > .container-fluid { padding: 0; max-width: none; }
body.fp2 .content .subheader:not(.fp2-page-head) h5 {
    font-family: var(--fp2-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--fp2-ink-muted); margin: 0 12px 0 0 !important;
}
body.fp2 .content .subheader:not(.fp2-page-head) .subheader-separator { display: none; }
body.fp2 .content .subheader:not(.fp2-page-head) .btn.btn-light { background: var(--fp2-surface); border: 1px solid var(--fp2-line); color: var(--fp2-ink-soft); }

/* ==========================================================================
   6. FOOTER / OFFCANVAS / SCROLLTOP / MOBILE HEADER / LOADER
   ========================================================================== */
body.fp2 .footer { display: none !important; }
body.fp2.footer-fixed .wrapper { padding-bottom: 0 !important; }
body.fp2.footer-fixed .content { padding-bottom: 36px !important; }

/* FacultyNewMasterPage only (2026-09-30, client - see the markup comment
   above #kt_footer): #kt_content already flex-grows to fill the viewport
   (Metronic's own .flex-column-fluid), so re-showing this footer pins it to
   the actual bottom of the screen instead of leaving a dead gap with no
   visual end. bg-white/text-dark-75 dropped from the markup in favour of
   this - transparent to blend into the page canvas, a hairline top border
   for separation, and the same small-caps muted treatment .footer-text
   already had two rules below (written for the old shell, never reachable
   there since .footer was unconditionally display:none - reused here where
   it finally applies). Every property here needs !important, not just the
   extra class's specificity: TWO existing rules already fight this element
   with !important of their own (this one's own display:none above, and the
   "old footer" background/border-top rule further down) - important beats
   non-important regardless of specificity, so only within the important
   tier does .footer.fp2-footer's (0,3,1) correctly outrank their (0,2,1)/
   (0,1,0). Caught live: the first pass left border-top plain and a harness
   computed-style check (not just a screenshot - a 1px border is not
   something you reliably spot by eye) showed the old rule's
   "border-top:0!important" had won. */
body.fp2 .footer.fp2-footer {
    display: flex !important;
    background: transparent !important;
    border-top: 1px solid var(--fp2-line) !important;
}
body.fp2 .footer.fp2-footer .text-dark,
body.fp2 .footer.fp2-footer a {
    font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fp2-faint) !important;
}

body.fp2 .scrolltop { background: var(--fp2-primary); border-radius: 10px; }
body.fp2 .scrolltop svg g [fill] { fill: var(--fp2-accent) !important; }

body.fp2 .header-mobile {
    background: var(--fp2-surface) !important;
    border-bottom: 1px solid var(--fp2-line);
    box-shadow: none !important;
    padding: 0 16px;
}
body.fp2 .header-mobile .CompanyLogo { height: 30px !important; width: auto !important; }
body.fp2 .header-mobile .burger-icon span,
body.fp2 .header-mobile .burger-icon span::before,
body.fp2 .header-mobile .burger-icon span::after { background: var(--fp2-ink) !important; }
body.fp2 #fp2ParkedMobileHeader { display: none !important; }


/* the offcanvas user panel: warm paper */
body.fp2 .offcanvas { background: var(--fp2-surface) !important; color: var(--fp2-ink); box-shadow: var(--fp2-shadow-lg) !important; }
body.fp2 .offcanvas .offcanvas-header h3 { font-family: var(--fp2-serif); font-weight: 500; }
body.fp2 .offcanvas .symbol .symbol-label { background: var(--fp2-surface-2); border: 1px solid var(--fp2-line); overflow: hidden; }
body.fp2 .offcanvas .separator-dashed { border-color: var(--fp2-line) !important; }
body.fp2 .offcanvas .navi .navi-item .navi-link:hover { background: var(--fp2-surface-2); border-radius: 10px; }
body.fp2 .offcanvas .navi .symbol.bg-light .symbol-label { background: var(--fp2-accent-tint) !important; }
body.fp2 .offcanvas .navi .symbol svg g [fill] { fill: var(--fp2-accent-warm) !important; }
body.fp2 .offcanvas .label.label-light-danger { background: var(--fp2-accent-tint); color: var(--fp2-accent-warm); }
body.fp2 .offcanvas .timeline.timeline-6 .timeline-badge i { font-size: 14px; }

/* the master modal used by the HOUserLogin faculty picker */
body.fp2 #MasterModal .modal-dialog { margin-top: 10vh; }

/* ===== GENERATED BELOW: generic legacy sections ported from StudentPortal compat (7-20, 6e, 6g). Regenerate with scratchpad build-css.js; do not hand-edit between the markers. ===== */

/* ==========================================================================
   7. CARDS  (card card-custom)  ->  the mockup's paper card
   ========================================================================== */
body.fp2 .card.card-custom,
body.fp2 .card {
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border);
    border-radius: var(--fp2-r);
    box-shadow: var(--fp2-shadow-sm) !important;
}

body.fp2 .card.card-custom > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--fp2-border);
    min-height: 0;
    padding: 10px 16px;
}

body.fp2 .card.card-custom > .card-header .card-title { margin: 0; align-items: center; }

body.fp2 .card.card-custom > .card-header .card-title .card-label,
body.fp2 .card.card-custom > .card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--fp2-ink);
    margin: 0;
    letter-spacing: -.01em;
}

body.fp2 .card.card-custom > .card-header .card-title .card-label small,
body.fp2 .card.card-custom > .card-header .card-title .text-muted {
    display: block;
    font-family: var(--fp2-sans);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--fp2-faint) !important;
    margin-top: 2px;
}

body.fp2 .card.card-custom > .card-body { padding: 14px 16px !important; }
body.fp2 .card.card-custom > .card-footer {
    background: var(--fp2-surface-2);
    border-top: 1px solid var(--fp2-border);
    padding: 11px 16px;
}

body.fp2 .card.gutter-b { margin-bottom: 12px !important; }

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
body.fp2 .btn {
    font-family: var(--fp2-sans);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--fp2-r-sm);
    transition: background .18s ease, border-color .18s ease, color .15s ease, transform .15s ease, box-shadow .18s ease;
}

body.fp2 .btn:not(.btn-icon):not(.btn-clean) { padding: .55rem 1.05rem; }
body.fp2 .btn.btn-sm:not(.btn-icon) { padding: .4rem .85rem; font-size: 12px; }
body.fp2 .btn.btn-lg:not(.btn-icon) { padding: .7rem 1.4rem; font-size: 13.5px; }

/* primary / success / info / warning all collapse to the ONE ember action */
body.fp2 .btn.btn-primary,
body.fp2 .btn.btn-success,
body.fp2 .btn.btn-info,
body.fp2 .btn.btn-warning,
body.fp2 .btn.btn-dark,
body.fp2 input[type="submit"].btn-primary {
    background: var(--fp2-grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: var(--fp2-shadow-ember) !important;
}

body.fp2 .btn.btn-primary:hover,
body.fp2 .btn.btn-success:hover,
body.fp2 .btn.btn-info:hover,
body.fp2 .btn.btn-warning:hover,
body.fp2 .btn.btn-dark:hover {
    filter: brightness(1.06);
    color: #fff !important;
    transform: translateY(-1px);
}

body.fp2 .btn.btn-secondary,
body.fp2 .btn.btn-light,
body.fp2 .btn.btn-default,
body.fp2 .btn.btn-outline-secondary {
    background: var(--fp2-surface) !important;
    border: 1px solid var(--fp2-border-strong) !important;
    color: var(--fp2-text) !important;
    box-shadow: none !important;
}

body.fp2 .btn.btn-secondary:hover,
body.fp2 .btn.btn-light:hover,
body.fp2 .btn.btn-default:hover,
body.fp2 .btn.btn-outline-secondary:hover {
    border-color: var(--fp2-ember-500) !important;
    color: var(--fp2-ember-600) !important;
}

body.fp2 .btn.btn-danger {
    background: var(--fp2-crit) !important;
    border: 0 !important;
    color: #fff !important;
}
body.fp2 .btn.btn-danger:hover { filter: brightness(1.08); }

body.fp2 .btn.btn-light-primary {
    background: var(--fp2-ember-50) !important;
    color: var(--fp2-ember-600) !important;
    border: 1px solid color-mix(in srgb, var(--fp2-ember-500) 28%, transparent) !important;
}
body.fp2 .btn.btn-light-primary:hover {
    background: var(--fp2-ember-100) !important;
    color: var(--fp2-ember-700) !important;
}

body.fp2 .btn.btn-light-danger {
    background: var(--fp2-crit-tint) !important;
    color: var(--fp2-crit) !important;
    border: 1px solid color-mix(in srgb, var(--fp2-crit) 24%, transparent) !important;
}

body.fp2 .btn.btn-light-success {
    background: var(--fp2-ok-tint) !important;
    color: var(--fp2-ok) !important;
    border: 1px solid color-mix(in srgb, var(--fp2-ok) 24%, transparent) !important;
}

body.fp2 .btn.btn-light-warning {
    background: var(--fp2-ember-50) !important;
    color: var(--fp2-ember-700) !important;
    border: 1px solid color-mix(in srgb, var(--fp2-ember-500) 24%, transparent) !important;
}

body.fp2 .btn.btn-clean {
    background: transparent !important;
    border: 0 !important;
    color: var(--fp2-muted) !important;
}
body.fp2 .btn.btn-clean:hover { color: var(--fp2-ember-600) !important; background: var(--fp2-surface-2) !important; }

body.fp2 .btn.btn-hover-primary:hover { color: var(--fp2-ember-600) !important; }

/* ==========================================================================
   9. FORMS
   ========================================================================== */
body.fp2 .form-group { margin-bottom: 13px; }

body.fp2 label,
body.fp2 .control-label,
body.fp2 .form-group > label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fp2-muted);
    margin-bottom: 5px;
}

body.fp2 .form-control,
body.fp2 select.form-control,
body.fp2 textarea.form-control {
    background: var(--fp2-surface-2);
    border: 1px solid var(--fp2-border-strong);
    border-radius: var(--fp2-r-sm);
    color: var(--fp2-text);
    font-family: var(--fp2-sans);
    font-size: 13px;
    height: 40px;
    padding: 0 12px;
    box-shadow: none;
    transition: border-color .16s, box-shadow .16s, background .16s;
}

body.fp2 textarea.form-control { height: auto; padding: 9px 12px; line-height: 1.55; }

body.fp2 .form-control:focus {
    background: var(--fp2-surface);
    border-color: var(--fp2-ember-500);
    box-shadow: 0 0 0 3px var(--fp2-ember-50);
    color: var(--fp2-text);
}

body.fp2 .form-control::placeholder { color: var(--fp2-faint); }
body.fp2 .form-control:disabled,
body.fp2 .form-control[readonly] { background: var(--fp2-sand); opacity: .8; }

body.fp2 .form-control.form-control-sm { height: 34px; font-size: 12px; }
body.fp2 .form-control.form-control-lg { height: 46px; font-size: 14px; }

/* WrapperCssClass="form-control ..." on RadNumericTextBox/RadTextBox (9 pages,
   22+ declarations - GenerateCurrentBalanceVoucher, GPACalculator, Student
   FinancialAid) makes Telerik put "form-control" on its OWN outer wrapper
   <span class="RadInput ... form-control ...">, which also wraps the real
   <input class="riTextBox">. The .form-control rule above boxes the SPAN;
   .RadInput .riTextBox (further down) separately boxes the INPUT nested
   inside it - two independently-bordered boxes, one visibly inset in the
   other, which is what reads as "two textboxes". Verified via a live
   throwaway render of the exact declaration, not assumed - Telerik's real
   wrapper class list is "riSingle RadInput RadInput_Default form-control
   input_full" (input_full carries no rule anywhere in this theme or the
   stock CSS, dead weight, left alone). .RadInput .riTextBox already owns the
   visible-box job correctly for every OTHER RadInput on this site, so only
   this one combination (RadInput + form-control together, which only occurs
   via this WrapperCssClass pattern) needs its box stripped - ordinary
   <input class="form-control"> elsewhere is untouched. */
body.fp2 .RadInput.form-control {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
}
body.fp2 .RadInput.form-control:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.fp2 .form-text { font-size: 10.5px; color: var(--fp2-faint); }
body.fp2 .invalid-feedback, body.fp2 .text-danger.field-validation-error { color: var(--fp2-crit); }

body.fp2 .input-group-text,
body.fp2 .input-group-prepend .btn,
body.fp2 .input-group-append .btn {
    background: var(--fp2-sand);
    border: 1px solid var(--fp2-border-strong);
    color: var(--fp2-muted);
    border-radius: var(--fp2-r-sm);
}

/* required-field asterisk from the old portal */
body.fp2 .required_field,
body.fp2 .required { color: var(--fp2-ember-600); font-weight: 700; }

/* checkbox / radio */
body.fp2 .checkbox > span,
body.fp2 .radio > span {
    background: var(--fp2-surface-2);
    border: 1px solid var(--fp2-border-strong);
}

body.fp2 .checkbox > input:checked ~ span,
body.fp2 .radio > input:checked ~ span {
    background: var(--fp2-ember-500);
    border-color: var(--fp2-ember-500);
}

body.fp2 input[type="checkbox"],
body.fp2 input[type="radio"] { accent-color: var(--fp2-ember-500); }

/* ==========================================================================
   10. TABLES  —  plain Bootstrap tables + the old portal's own classes
   ========================================================================== */
body.fp2 .table,
body.fp2 table.st_Table,
body.fp2 table.top_table,
body.fp2 table.tbl,
body.fp2 table.grid_form,
body.fp2 table.grd_form {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    color: var(--fp2-text);
    margin-bottom: 0;
}

body.fp2 .table thead th,
body.fp2 table.st_Table thead th,
body.fp2 table.top_table thead th,
body.fp2 table.tbl thead th {
    text-align: left;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp2-faint);
    font-weight: 700;
    background: transparent;
    padding: 0 13px 6px;
    border: 0;
    border-bottom: 1px solid var(--fp2-border);
    vertical-align: bottom;
}

body.fp2 .table tbody > tr > td,
body.fp2 table.st_Table tbody > tr > td,
body.fp2 table.top_table tbody > tr > td,
body.fp2 table.tbl tbody > tr > td {
    padding: 7px 12px;
    border: 0;
    border-bottom: 1px solid var(--fp2-border);
    font-size: 12.5px;
    vertical-align: middle;
    color: var(--fp2-text);
}

body.fp2 .table tbody > tr:last-child > td { border-bottom: 0; }
body.fp2 .table tbody > tr:hover { background: var(--fp2-surface-2); }
body.fp2 .table.table-bordered,
body.fp2 .table.table-bordered > tbody > tr > td,
body.fp2 .table.table-bordered > thead > tr > th { border-color: var(--fp2-border); }
body.fp2 .table.table-striped > tbody > tr:nth-of-type(odd) { background: var(--fp2-surface-2); }
body.fp2 .table-responsive, body.fp2 .table-responsive-x { scrollbar-width: thin; }

/* the old auto-style* / Coursetr / divP helpers */
body.fp2 .auto-styleL { text-align: left; }
body.fp2 .auto-styleR { text-align: right; font-variant-numeric: tabular-nums; }
body.fp2 tr.Coursetr > td { border-bottom: 1px solid var(--fp2-border); }
body.fp2 .default_style_head,
body.fp2 .page-header,
body.fp2 .heading,
body.fp2 .testimonial-tittle {
    font-family: var(--fp2-sans);
    font-size: 9.5px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700 !important;
    color: var(--fp2-faint) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fp2-border) !important;
    padding: 0 0 7px !important;
    margin: 0 0 12px !important;
}

/* ==========================================================================
   11. TELERIK
   IMPORTANT: grid-cell rules use  > td  - Telerik classic controls nest
   their own <table> inside a cell, and a descendant selector steals that
   inner table's padding and crushes the combo input.
   ========================================================================== */
body.fp2 .RadGrid,
body.fp2 .RadGrid_Default {
    border: 1px solid var(--fp2-border) !important;
    border-radius: var(--fp2-r-sm);
    overflow: hidden;
    background: var(--fp2-surface) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 12.5px !important;
    color: var(--fp2-text) !important;
}

body.fp2 .RadGrid .rgMasterTable,
body.fp2 .RadGrid .rgDetailTable { border-collapse: collapse; background: transparent; }

body.fp2 .RadGrid th.rgHeader,
body.fp2 .RadGrid .rgHeader,
body.fp2 .RadGrid .rgHeaderWrapper {
    background: var(--fp2-espresso) !important;
    background-image: none !important;
    color: #F5F1E9 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fp2-espresso-2) !important;
    font-size: 9.5px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700 !important;
    padding: 9px 10px !important;
    text-align: left;
}

body.fp2 .RadGrid th.rgHeader a,
body.fp2 .RadGrid .rgHeader a { color: #F5F1E9 !important; }

body.fp2 .RadGrid .rgRow > td,
body.fp2 .RadGrid .rgAltRow > td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fp2-border) !important;
    padding: 8px 10px !important;
    color: var(--fp2-text) !important;
    vertical-align: middle;
}

body.fp2 .RadGrid .rgAltRow > td { background: var(--fp2-surface-2) !important; }

body.fp2 .RadGrid .rgRow:hover > td,
body.fp2 .RadGrid .rgAltRow:hover > td { background: var(--fp2-ember-50) !important; }

body.fp2 .RadGrid .rgSelectedRow > td { background: var(--fp2-ember-100) !important; }

body.fp2 .RadGrid .rgFooter > td,
body.fp2 .RadGrid .rgFooterDiv {
    background: var(--fp2-sand) !important;
    border-top: 1px solid var(--fp2-border-strong) !important;
    font-weight: 700 !important;
    color: var(--fp2-ink) !important;
}

body.fp2 .RadGrid .rgPager > td,
body.fp2 .RadGrid .rgPagerCell {
    background: var(--fp2-surface-2) !important;
    border-top: 1px solid var(--fp2-border) !important;
    color: var(--fp2-muted) !important;
}

body.fp2 .RadGrid .rgNumPart a,
body.fp2 .RadGrid .rgPager a {
    color: var(--fp2-muted) !important;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    padding: 3px 7px;
    box-sizing: content-box;
}

body.fp2 .RadGrid .rgNumPart a.rgCurrentPage,
body.fp2 .RadGrid .rgNumPart a:hover {
    background: var(--fp2-ember-50) !important;
    color: var(--fp2-ember-600) !important;
}

body.fp2 .RadGrid .rgNoRecords > td,
body.fp2 .RadGrid .rgNoRecords {
    background: var(--fp2-surface-2) !important;
    color: var(--fp2-faint) !important;
    font-style: italic;
    padding: 18px !important;
}

/* combo / input / date picker

   PORTAL-WIDE FIX, one rule instead of 27 files: every page that declares
   Skin="Metro" on a RadComboBox (75 occurrences across 27 .aspx files - Todo
   List's Status/Priority combos among them) rendered double-bordered, exactly
   the bug fixed for the Communicator compose combo a few rounds ago. Same root
   cause, same fix, just scoped body.fp2 (every page) instead of body.spcmsg
   (one page): the OLD version of this block put a border on EACH CELL
   (rcbInputCell/rcbArrowCell), while the Metro skin ALSO paints its own border
   and sprite background-image on the ROOT/table - two borders stacking is what
   read as "double-bordered / wrong" in the screenshot. Fixed by moving the
   border+radius to the ROOT ONLY, killing background-image everywhere in the
   chain, collapsing the table, and drawing the arrow ourselves - the same
   recipe as compat section 6d-8, generalised. Declarations were NOT touched on
   any of the 27 pages - this is CSS-only, so nothing about validation,
   postback wiring, or control behaviour changes anywhere. */
body.fp2 .RadComboBox,
body.fp2 .RadComboBox_Default,
body.fp2 .RadComboBox_Metro {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: var(--fp2-r-sm) !important;
    background: var(--fp2-surface-2) !important;
    background-image: none !important;
    box-shadow: none !important;
    font-family: var(--fp2-sans) !important;
}

body.fp2 .RadComboBox table {
    width: 100% !important;
    height: 38px !important;
    table-layout: fixed !important;
    border: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body.fp2 .RadComboBox table td.rcbInputCell,
body.fp2 .RadComboBox table td.rcbArrowCell {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
}

body.fp2 .RadComboBox table td.rcbInputCell { width: auto !important; }

body.fp2 .RadComboBox table td.rcbArrowCell {
    position: relative !important;
    width: 28px !important;
    min-width: 28px !important;
}

/* Telerik's own arrow sprite - replaced by a CSS chevron, same technique as 6d-8 */
body.fp2 .RadComboBox table td.rcbArrowCell a span,
body.fp2 .RadComboBox table td.rcbArrowCell a img {
    display: none !important;
}

body.fp2 .RadComboBox table td.rcbArrowCell a {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    background: none !important;
    background-image: none !important;
}

body.fp2 .RadComboBox table td.rcbArrowCell a::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 9px !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: -5px !important;
    border-right: 1.6px solid var(--fp2-muted) !important;
    border-bottom: 1.6px solid var(--fp2-muted) !important;
    transform: rotate(45deg) !important;
}

body.fp2 .RadComboBox .rcbInput {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--fp2-text) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 13px !important;
    padding: 0 10px !important;
}

body.fp2 .RadComboBox_Default.RadComboBox_Focused,
body.fp2 .RadComboBox.rcbFocused {
    background: var(--fp2-surface) !important;
    border-color: var(--fp2-ember-500) !important;
    box-shadow: 0 0 0 3px var(--fp2-ember-50) !important;
}

/* All 75 Skin="Metro" combos portal-wide were switched to
   RenderMode="Lightweight" (see the handoff doc) once the classic table
   render proved unreliable twice over - first the double border, then a
   chevron that never showed because Telerik's runtime script does not
   guarantee the classic <a>/<span> structure the CSS above assumes. Lightweight
   emits a plain span > span/input, no table, no runtime cell-width rewriting -
   the exact fix already proven on the Communicator compose combo, generalised
   from body.spcmsg to body.fp2 so it applies everywhere at once. The classic
   rules above stay as a fallback for anything still in Classic mode. */
body.fp2 .RadComboBox .rcbInner {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
    padding: 0 30px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.fp2 .RadComboBox .rcbActionButton {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 30px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    cursor: pointer !important;
}

body.fp2 .RadComboBox .rcbActionButton .rcbIcon,
body.fp2 .RadComboBox .rcbActionButtonIcon,
body.fp2 .RadComboBox .rcbActionButton img {
    display: none !important;
}

body.fp2 .RadComboBox .rcbActionButton::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 11px !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: -5px !important;
    border-right: 1.6px solid var(--fp2-muted) !important;
    border-bottom: 1.6px solid var(--fp2-muted) !important;
    transform: rotate(45deg) !important;
}

body.fp2 .RadComboBox.rcbFocused .rcbInner,
body.fp2 .RadComboBox .rcbInner.rcbFocused {
    border-color: var(--fp2-ember-500) !important;
    box-shadow: 0 0 0 3px var(--fp2-ember-50) !important;
}

body.fp2 .RadComboBoxDropDown {
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: var(--fp2-r-sm);
    box-shadow: var(--fp2-shadow) !important;
    background: var(--fp2-surface) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 12.5px !important;
}

body.fp2 .RadComboBoxDropDown .rcbList > li { padding: 7px 11px !important; color: var(--fp2-text) !important; }
body.fp2 .RadComboBoxDropDown .rcbHovered { background: var(--fp2-surface-2) !important; color: var(--fp2-text) !important; }
body.fp2 .RadComboBoxDropDown .rcbSelected,
body.fp2 .RadComboBoxDropDown .rcbLoading { background: var(--fp2-ember-50) !important; color: var(--fp2-ember-600) !important; }

body.fp2 .RadInput .riTextBox,
body.fp2 .RadInput input.riTextBox {
    background: var(--fp2-surface-2) !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: var(--fp2-r-sm) !important;
    color: var(--fp2-text) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 13px !important;
    height: 40px !important;
    padding: 0 11px !important;
}

body.fp2 .RadInput .riTextBox:focus {
    background: var(--fp2-surface) !important;
    border-color: var(--fp2-ember-500) !important;
    box-shadow: 0 0 0 3px var(--fp2-ember-50) !important;
}

/* RadDatePicker/RadDateTimePicker.

   MY FIRST ATTEMPT HERE GUESSED WRONG - it targeted .riSingle as the shared
   text+button wrapper. It is not: .riSingle is Telerik's class for a
   text-only RadInput; a date picker's text box and its calendar trigger
   button are TWO SEPARATE elements sitting side by side inside the outer
   .RadPicker, not one nested inside the other. That is exactly why nothing
   in that rule ever matched anything and the field stayed unstyled after the
   previous edit - not a caching problem, a wrong-selector problem.

   Ported instead from the CMS reference's OWN proven fix for this exact
   control (Content/GeneralSearch.css, ~L2900 and ~L9993) - a live page this
   exact bug is already solved on. Two things I would not have found by
   guessing:
     1. the calendar button's class is NOT a fixed name across versions -
        the CMS targets it by ID SUFFIX instead: a[id$="popupButton"].
        ASP.NET always appends "_popupButton" to this control's generated
        client ID regardless of the container ID prefix, so this is a
        reliable, version-proof hook.
     2. they do not fight Telerik's classic table layout with flex - the
        text box gets width:calc(100% - 30px) with rounded corners on the
        LEFT only, the button gets a fixed 30px with rounded corners on the
        RIGHT only and border-left:none, so they read as one joined control
        while Telerik's own <table> keeps doing the layout work. */
/* MEASURED BUG: the DevTools HTML shows this wrapper carries THREE classes -
   class="RadPicker RadPicker_Default form-control" - because the control is
   declared CssClass="form-control" (matching every other field on the form).
   Bootstrap's own .form-control rule paints ITS OWN border/padding/background
   /radius on this exact element, stacked underneath whatever .riTextBox /
   .rcCalPopup draw inside it - the calendar button's rounded square floating
   disconnected from the input's pill in the screenshot is that second,
   Bootstrap-drawn box showing through. Same category of bug as the
   Skin="Metro" combo fix above: one control, two borders, because two
   different rules both think they own the box. Fix is the same too - strip
   the box model from the OUTER element entirely and let the INNER elements
   (.riTextBox, .rcCalPopup) be the only thing that draws a visible border. */
body.fp2 .RadPicker {
    width: 100% !important;
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}

body.fp2 .RadPicker .rcTable,
body.fp2 .RadPicker table.rcTable {
    width: 100% !important;
}

/* Measured: both <td>s default to 1px of their own padding (Telerik sets
   none, so the browser's default table cell padding applies), leaving a 2px
   residual gap between the input's flat right edge and the button's flat
   left edge even after the width double-subtraction fix. At a rounded
   corner, a couple of stray pixels of background showing through the seam is
   exactly what reads as a "notch" rather than one continuous pill. Zeroed on
   both cells so the two elements are edge-to-edge with nothing between them. */
body.fp2 .RadPicker td.rcInputCell,
body.fp2 .RadPicker td.rcInputCell + td {
    padding: 0 !important;
    /* THE ACTUAL MISALIGNMENT, found only by measuring the field inside a real
       .form-group row rather than on its own: the button is inline-flex, so it
       sat on the ROW'S TEXT BASELINE - 3.2px lower than the input (input top
       41.3 vs button top 44.5). vertical-align:middle on the button could not
       fix that, because the baseline offset comes from the CELL's line box, not
       the button's own alignment. Killing the cell's line box (line-height:0 +
       font-size:0) removes the baseline the button was sitting on; the button
       resets both properties for its own icon. This is why every isolated test
       measured 0px difference and the real page still looked wrong - the seam
       was never the problem, the vertical offset was. */
    line-height: 0 !important;
    font-size: 0 !important;
    vertical-align: top !important;
}

body.fp2 .RadPicker td.rcInputCell { width: 100% !important; }

body.fp2 .RadPicker .RadInput {
    width: 100% !important;
    display: block !important;
    box-shadow: none !important;
}

body.fp2 .RadPicker .riTextBox,
body.fp2 .RadPicker input.riTextBox {
    /* MEASURED BUG: this used to be calc(100% - 32px), on the assumption that
       the text box needed to manually leave room for the button. It didn't -
       the <table> already gives the button its OWN column (td, no width set,
       sized to its 32px content) and cooperatively shrinks the input's column
       (td.rcInputCell) to "table width minus that", regardless of what the
       inline style="width:100%" on the td claims (browsers treat td width as
       a hint under automatic table layout, not an absolute, when a sibling
       cell has a real content-based width need). Subtracting 32px a SECOND
       time on top of that left a dead 34px gap between the input and the
       button - confirmed by measuring both rects in the harness against the
       real markup. width:100% here means 100% of the input's own column,
       which the table has already sized correctly. */
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box !important;
    background: var(--fp2-surface-2) !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-right: 0 !important;
    border-radius: var(--fp2-r-sm) 0 0 var(--fp2-r-sm) !important;
    color: var(--fp2-text) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 13px !important;
    padding: 0 11px !important;
}

body.fp2 .RadPicker .riTextBox:focus {
    background: var(--fp2-surface) !important;
    border-color: var(--fp2-ember-500) !important;
    box-shadow: 0 0 0 3px var(--fp2-ember-50) !important;
}

/* the calendar trigger button - found by id suffix, not by class, per the
   CMS reference. .rcCalPopup covered too, as a second, class-based hook.

   MEASURED BUG, now fixed: the anchor's own content is not an icon at all -
   it is real, visible accessibility text ("Open the calendar popup."),
   normally hidden by Telerik's embedded skin CSS via a background-image
   sprite that also supplies the calendar glyph. Killing that sprite with
   background-image:none (to stop double chrome, same as everywhere else in
   this file) left the text with nothing hiding it, so it rendered for real
   at 13px inside a 32px box - the "black scribble" in the screenshot.
   font-size:0 on the anchor collapses that text to zero width without
   touching the child ::after icon, which sets its own font-size back. */
/* [id$="popupButton"] widened from a[id$="popupButton"] (2026-10-01, client:
   "clock icons of Start/End Time float outside their boxes" on a RadTimePicker
   that is Enabled="false" by design on this form, not a bug in that - Telerik
   renders a disabled trigger as a plain element, not the clickable <a> this
   whole reskin was built and proven against, so it fell through every rule
   below untouched, back to Telerik's own unskinned chrome. Dropping the tag
   name only ADDS a match for whatever non-<a> element the disabled state
   uses; every already-working enabled-state <a> still matches exactly as
   before, so this cannot regress the fix the long comment above describes. */
body.fp2 .RadPicker [id$="popupButton"],
body.fp2 .RadPicker .rcCalPopup {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 32px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-left: 0 !important;
    border-radius: 0 var(--fp2-r-sm) var(--fp2-r-sm) 0 !important;
    background: var(--fp2-ember-50) !important;
    background-image: none !important;
}

body.fp2 .RadPicker [id$="popupButton"]:hover,
body.fp2 .RadPicker .rcCalPopup:hover {
    background: var(--fp2-ember-100) !important;
}

/* the calendar icon itself. The border-box-plus-inset-shadow version read as
   a blank rounded square rather than a calendar, per the screenshot. Replaced
   with an actual line-icon glyph (rounded rect body + header divider + two
   binder-ring ticks), matching the same thin-stroke SVG style used for every
   other icon in this theme (Search, New Message, etc.). A data-URI background
   image can't inherit currentColor, so the stroke is baked in as a literal
   hex matching --fp2-ember-600 (#D8580E) - if that variable's value ever
   changes, re-encode this SVG to match. */
body.fp2 .RadPicker [id$="popupButton"]::after,
body.fp2 .RadPicker .rcCalPopup::after {
    content: '' !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    font-size: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D8580E%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%3C%2Fsvg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* TIME pickers (RadTimePicker) - added 2026-10-02 (client, twice: "Start/End Time clock
   icons float outside their boxes", 2026-10-01 and again after the first attempt).
   The two pickers are different controls with different triggers. A RadDatePicker's
   is  <a id="..._popupButton" class="rcCalPopup">  (everything above); a
   RadTimePicker's is  <a id="..._timePopupLink" class="rcTimePopup">  (+ class
   rcDisabled while the picker is disabled) - read off the HTML Telerik really
   renders for this project's own controls, not guessed. Nothing in this file
   styled it, so on every page with a RadTimePicker (Extra Classes, Make-up
   Classes, Take Attendance time in/out) the input drew as the portal's pill and
   Telerik's own grey clock sprite hung off its right edge, outside it. The
   2026-10-01 "fix" widened the DATE picker's [id$="popupButton"] selector, which
   can never match this anchor - it changed nothing, enabled or disabled.
   Now the same joined button as the calendar's (32x40, tinted, right-rounded,
   border shared with the input) with a clock in the accent colour. The glyph is a
   mask over a theme token rather than a baked-in stroke colour, so every client
   theme and dark mode follow it with no per-theme copy.
   My Availability keeps its own one-box time picker skin (page-level, higher
   specificity): `:not(.fp2-av a)` keeps these !important rules off it. */
body.fp2 .RadPicker a.rcTimePopup:not(.fp2-av a) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 32px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-left: 0 !important;
    border-radius: 0 var(--fp2-r-sm) var(--fp2-r-sm) 0 !important;
    background: var(--fp2-ember-50) !important;
    background-image: none !important;
    cursor: pointer;
}
body.fp2 .RadPicker a.rcTimePopup:not(.fp2-av a):hover { background: var(--fp2-ember-100) !important; }
body.fp2 .RadPicker a.rcTimePopup:not(.fp2-av a)::after {
    content: '' !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    background: var(--fp2-ember-600) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* a disabled picker: the same button, faded and not clickable (Telerik gives the
   disabled anchor no href) */
body.fp2 .RadPicker a.rcTimePopup.rcDisabled:not(.fp2-av a) { opacity: .55; cursor: default; }
body.fp2 .RadPicker a.rcTimePopup.rcDisabled:not(.fp2-av a):hover { background: var(--fp2-ember-50) !important; }
/* dark mode: ember-600 stays a deep colour for the themed clients (SSUET #4B2178 ...),
   which would sink into a dark surface - the glyph takes the accent there (lighter in
   dark mode, and the default theme's peach) */
[data-theme="dark"] body.fp2 .RadPicker a.rcTimePopup:not(.fp2-av a)::after { background: var(--fp2-accent) !important; }

body.fp2 .RadPicker,
body.fp2 .RadPicker .rcCalPopup {
    font-family: var(--fp2-sans) !important;
    vertical-align: middle;
}

body.fp2 .RadCalendar,
body.fp2 .RadCalendarPopup {
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: var(--fp2-r-sm);
    box-shadow: var(--fp2-shadow) !important;
    font-family: var(--fp2-sans) !important;
}

/* A date / time POPUP is two boxes: the shell Telerik appends to <body> (div.RadCalendarPopup) and the table inside
   it (table.RadCalendar, table.RadCalendarTimeView). The rule above outlined BOTH, and Telerik pads the shell by 5px
   on the right and bottom for a drop-shadow image the portal switches off, so the rounded outline stood 6px clear of
   the square one inside it - and was see-through, the page's own text showing in the gap (client, 2026-10-05: "there
   are 2 boxes outlines showing" on the Time IN list). The tables also carry accessibility <caption>s (their text is
   display:none) that Metronic's generic `caption { padding: .75rem 0 }` turned into empty 19.5px strips - under the
   time grid, under the calendar's dark title bar and under its day grid. The calendar's own main cell (td.rcMain)
   adds a third, grey, 1px line from Telerik's skin. One box now: the shell is it - no padding, an opaque fill and its
   content clipped to the rounded corners - the tables inside lose their own outer borders and shadow (their inner
   dividers stay) and their captions take no room. The three shadow strips are not drawn: FacultyNewMasterPage
   already hides them from its own head, this covers every master. A calendar placed on the page itself (no shell)
   keeps the border from the rule above. The month/year picker has a different, single-box popup and is not touched. */
body.fp2 .RadCalendarPopup.RadCalendarPopupShadows {
    padding: 0 !important;
    background: var(--fp2-surface);
    overflow: hidden;
}
body.fp2 .RadCalendarPopup > .rcShadTR,
body.fp2 .RadCalendarPopup > .rcShadBL,
body.fp2 .RadCalendarPopup > .rcShadBR { display: none !important; }
body.fp2 .RadCalendarPopup table.RadCalendar,
body.fp2 .RadCalendarPopup table.RadCalendarTimeView { border: 0 !important; box-shadow: none !important; }
body.fp2 .RadCalendarPopup td.rcMain { border: 0 !important; }
body.fp2 .RadCalendar caption,
body.fp2 .RadCalendarTimeView caption { padding: 0 !important; }

body.fp2 .RadCalendar .rcTitlebar,
body.fp2 .RadCalendar .rcTitlebar table {
    background: var(--fp2-espresso) !important;
    background-image: none !important;
    color: #F5F1E9 !important;
}

body.fp2 .RadCalendar .rcSelected a,
body.fp2 .RadCalendar .rcHover a {
    background: var(--fp2-ember-500) !important;
    color: #fff !important;
    border-radius: 6px;
}

body.fp2 .RadCalendar .rcToday a { color: var(--fp2-ember-600) !important; font-weight: 700; }

body.fp2 .RadWindow .rwTitleBar,
body.fp2 .RadWindow_Default .rwTitleBar,
body.fp2 .RadWindow .rwTopLeft,
body.fp2 .RadWindow .rwTopRight,
body.fp2 .RadWindow .rwTopCenter {
    background: var(--fp2-espresso) !important;
    background-image: none !important;
    color: #F5F1E9 !important;
}

body.fp2 .RadWindow .rwTitle { color: #F5F1E9 !important; font-weight: 600 !important; }
body.fp2 .RadWindow .rwContent { background: var(--fp2-surface) !important; }

body.fp2 .RadTabStrip .rtsLink {
    background: var(--fp2-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--fp2-border) !important;
    color: var(--fp2-muted) !important;
    font-family: var(--fp2-sans) !important;
    font-weight: 600 !important;
    border-radius: 9px 9px 0 0;
}

/* rtsSelected is NOT a wrapper around rtsLink - Telerik puts it as a SECOND
   class on the anchor itself (<a class="rtsLink rtsSelected">), confirmed
   against Telerik's own embedded skin CSS (.rtsLI .rtsSelected / .rtsSelected
   .rtsOut - the only element between rtsLI and rtsOut in the markup is the
   anchor). The old descendant-combinator selector below could never match a
   real tab strip; kept alongside the compound one in case some Telerik
   version nests it the other way after all. */
body.fp2 .RadTabStrip .rtsSelected .rtsLink,
body.fp2 .RadTabStrip .rtsLink.rtsSelected {
    background: var(--fp2-surface) !important;
    color: var(--fp2-ember-600) !important;
    border-bottom-color: transparent !important;
}

body.fp2 .RadTabStrip .rtsLink:focus,
body.fp2 .RadTabStrip .rtsLink:focus:after {
    outline: none !important;
    border-color: transparent !important;
}

body.fp2 .RadTabStrip .rtsLink:hover {
    background: var(--fp2-surface) !important;
    color: var(--fp2-ember-600) !important;
}

body.fp2 .RadUpload,
body.fp2 .RadAsyncUpload { font-family: var(--fp2-sans) !important; }
body.fp2 .RadUpload .ruFileWrap,
body.fp2 .RadAsyncUpload .ruFileWrap { color: var(--fp2-text) !important; }
body.fp2 .RadUpload .ruButton,
body.fp2 .RadAsyncUpload .ruButton {
    background: var(--fp2-surface) !important;
    background-image: none !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 8px !important;
    color: var(--fp2-text) !important;
    font-weight: 600 !important;
    height: auto !important;
    padding: 7px 13px !important;
}
body.fp2 .RadUpload .ruButton:hover,
body.fp2 .RadAsyncUpload .ruButton:hover {
    border-color: var(--fp2-ember-500) !important;
    color: var(--fp2-ember-600) !important;
}

/* the master's own legacy override made every RadInput border white */
body.fp2 .RadInput_Default .riTextBox,
body.fp2 .RadInputMgr_Default { border-color: var(--fp2-border-strong) !important; }

/* ==========================================================================
   12. ALERTS  (alert alert-custom alert-notice alert-light-*)
   ========================================================================== */
/* Metronic gives .alert-custom a thick coloured LEFT border and squares off the
   left corners; both have to be reset or the strip keeps a stray primary-blue
   bar and a half-rounded shape. */
body.fp2 .alert.alert-custom {
    border-radius: var(--fp2-r-sm) !important;
    border: 1px solid var(--fp2-border) !important;
    border-left-width: 1px !important;
    background: var(--fp2-surface-2);
    color: var(--fp2-text);
    padding: 10px 14px;
    box-shadow: none;
    font-size: 12.5px;
}

body.fp2 .alert.alert-custom .alert-text { font-size: 12.5px; color: inherit; }
body.fp2 .alert.alert-custom .alert-icon i { font-size: 1.2rem; color: inherit; }

body.fp2 .alert.alert-light-danger,
body.fp2 .alert.alert-danger {
    background: var(--fp2-crit-tint);
    border-color: color-mix(in srgb, var(--fp2-crit) 26%, transparent) !important;
    color: var(--fp2-crit);
}

body.fp2 .alert.alert-light-success,
body.fp2 .alert.alert-success {
    background: var(--fp2-ok-tint);
    border-color: color-mix(in srgb, var(--fp2-ok) 26%, transparent) !important;
    color: var(--fp2-ok);
}

body.fp2 .alert.alert-light-warning,
body.fp2 .alert.alert-warning,
body.fp2 .alert.alert-light-primary,
body.fp2 .alert.alert-info {
    background: var(--fp2-ember-50);
    border-color: color-mix(in srgb, var(--fp2-ember-500) 26%, transparent) !important;
    color: var(--fp2-ember-700);
}

/* the flaticon glyph in .alert-icon inherits the strip's colour */
body.fp2 .alert.alert-custom .alert-icon i,
body.fp2 .alert.alert-custom .alert-close i { color: inherit !important; }

/* ==========================================================================
   13. LABELS / BADGES  ->  the mockup's chip
   ========================================================================== */
body.fp2 .label,
body.fp2 .badge {
    border-radius: 999px;
    font-family: var(--fp2-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

body.fp2 .label.label-inline { padding: 3px 9px; height: auto; width: auto; }

body.fp2 .label.label-light-primary,
body.fp2 .badge.badge-primary { background: var(--fp2-ember-50) !important; color: var(--fp2-ember-600) !important; }

body.fp2 .label.label-light-danger,
body.fp2 .badge.badge-danger { background: var(--fp2-crit-tint) !important; color: var(--fp2-crit) !important; }

body.fp2 .label.label-light-success,
body.fp2 .badge.badge-success { background: var(--fp2-ok-tint) !important; color: var(--fp2-ok) !important; }

body.fp2 .label.label-light-warning,
body.fp2 .badge.badge-warning { background: var(--fp2-ember-50) !important; color: var(--fp2-ember-700) !important; }

body.fp2 .label.label-light-info,
body.fp2 .badge.badge-info { background: var(--fp2-slate-100) !important; color: var(--fp2-slate-600) !important; }

/* ==========================================================================
   14. MODALS
   ========================================================================== */
body.fp2 .modal-content {
    border: 1px solid var(--fp2-border-strong);
    border-radius: var(--fp2-r);
    box-shadow: 0 30px 70px -30px rgba(60, 44, 28, .45);
    background: var(--fp2-surface);
}

body.fp2 .modal-header {
    background: linear-gradient(120deg, var(--fp2-espresso-2), var(--fp2-espresso));
    border-bottom: 0;
    border-radius: var(--fp2-r) var(--fp2-r) 0 0;
    padding: 13px 18px;
}

body.fp2 .modal-header .modal-title {
    color: #F5F1E9;
    font-family: var(--fp2-serif);
    font-size: 15.5px;
    font-weight: 600;
}

body.fp2 .modal-header .close,
body.fp2 .modal-header .close span,
body.fp2 .modal-header .close i { color: #F5F1E9 !important; opacity: .8; text-shadow: none; }
body.fp2 .modal-header .close:hover { opacity: 1; }

body.fp2 .modal-body { padding: 16px 18px; }
body.fp2 .modal-footer { background: var(--fp2-surface-2); border-top: 1px solid var(--fp2-border); padding: 11px 18px; }
body.fp2 .modal-backdrop.show { opacity: .42; background: #241F18; }

/* vertical centring - margin:auto centres AND lets tall modals scroll */
body.fp2 .modal.show, body.fp2 .modal.in { display: flex; overflow-y: auto; }
body.fp2 .modal.show .modal-dialog, body.fp2 .modal.in .modal-dialog { margin: auto; }

/* ==========================================================================
   15. NAV TABS / navi lists / offcanvas panels
   ========================================================================== */
body.fp2 .nav.nav-tabs { border-bottom: 1px solid var(--fp2-border); }

body.fp2 .nav.nav-tabs .nav-link {
    border: 0;
    color: var(--fp2-muted);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 9px 9px 0 0;
}

body.fp2 .nav.nav-tabs .nav-link.active {
    background: var(--fp2-ember-50);
    color: var(--fp2-ember-600);
    box-shadow: inset 0 -2px 0 var(--fp2-ember-500);
}

body.fp2 .navi .navi-item .navi-link { border-radius: 8px; }
body.fp2 .navi .navi-item .navi-link:hover { background: var(--fp2-surface-2); }
body.fp2 .navi .navi-item .navi-link .navi-text { color: var(--fp2-text); font-size: 12.5px; }
body.fp2 .navi .navi-item .navi-link .navi-icon i { color: var(--fp2-muted); }
body.fp2 .navi .navi-item .navi-link:hover .navi-icon i { color: var(--fp2-ember-600); }
body.fp2 .navi .navi-separator { border-color: var(--fp2-border); }

body.fp2 .offcanvas {
    background: var(--fp2-surface);
    box-shadow: -22px 0 60px -20px rgba(60, 44, 28, .28);
    border-left: 1px solid var(--fp2-border);
}

body.fp2 .offcanvas .offcanvas-header h3 {
    font-family: var(--fp2-serif);
    font-size: 19px;
    color: var(--fp2-ink);
}

body.fp2 .offcanvas-overlay { background: rgba(36, 31, 24, .38); }

body.fp2 .dropdown-menu {
    border: 1px solid var(--fp2-border-strong);
    border-radius: var(--fp2-r-sm);
    box-shadow: var(--fp2-shadow);
    background: var(--fp2-surface);
}

body.fp2 .scrolltop {
    background: var(--fp2-espresso) !important;
    border-radius: 10px;
    box-shadow: var(--fp2-shadow);
}
body.fp2 .scrolltop svg g [fill] { fill: #F5F1E9 !important; }

/* ==========================================================================
   16. SYMBOLS / timeline / misc Metronic widgets
   ========================================================================== */
body.fp2 .symbol .symbol-label {
    background: var(--fp2-surface-2);
    color: var(--fp2-muted);
    border-radius: 10px;
}
body.fp2 .symbol.symbol-light-success .symbol-label,
body.fp2 .symbol.symbol-light-primary .symbol-label {
    background: var(--fp2-ember-50);
    color: var(--fp2-ember-600);
}

body.fp2 .timeline.timeline-6 .timeline-item .timeline-label { color: var(--fp2-muted); font-weight: 700; }
body.fp2 .timeline.timeline-6 .timeline-item .timeline-badge span { background: var(--fp2-ember-500) !important; }
body.fp2 .timeline.timeline-6:before { background: var(--fp2-border); }

body.fp2 .separator.separator-dashed { border-bottom-color: var(--fp2-border) !important; }
body.fp2 .separator.separator-solid { border-bottom-color: var(--fp2-border) !important; }

body.fp2 .progress { background: var(--fp2-sand); border-radius: 4px; height: 6px; }
body.fp2 .progress .progress-bar { background: var(--fp2-grad); border-radius: 4px; }

body.fp2 .bg-light, body.fp2 .bg-light-primary { background: var(--fp2-surface-2) !important; }
body.fp2 .bg-white { background: var(--fp2-surface) !important; }
body.fp2 .border, body.fp2 .border-top, body.fp2 .border-bottom,
body.fp2 .border-left, body.fp2 .border-right { border-color: var(--fp2-border) !important; }

/* ==========================================================================
   17. QUIET SCROLLBARS
   ========================================================================== */
body.fp2 ::-webkit-scrollbar { width: 9px; height: 9px; }
body.fp2 ::-webkit-scrollbar-track { background: var(--fp2-surface-2); }
body.fp2 ::-webkit-scrollbar-thumb { background: var(--fp2-border-strong); border-radius: 6px; }
body.fp2 ::-webkit-scrollbar-thumb:hover { background: var(--fp2-muted); }
body.fp2 * { scrollbar-width: thin; scrollbar-color: var(--fp2-border-strong) var(--fp2-surface-2); }

/* ==========================================================================
   18. RESPONSIVE  —  the sheet loses its inset radius on small screens and
   the wide legacy grids get their own scroll box instead of cropping.
   ========================================================================== */
@media (max-width: 991.98px) {
    body.fp2 #kt_content {
        border-radius: 0;
        box-shadow: none;
        padding-bottom: 18px;
    }
    body.fp2 #kt_content > .d-flex.flex-column-fluid > .container,
    body.fp2 #kt_content > .d-flex.flex-column-fluid > .container-fluid { padding: 0 12px; }
}

@media (max-width: 767.98px) {
    /* 3 legacy pages hard-code min-width:992px on the FORM CONTAINER, which
       forces the whole page 992px wide on a phone (text never wraps, the
       container - not the grid - becomes the scroll box). Neutralise it and
       let the grid itself scroll. */
    body.fp2 [class*="col-"],
    body.fp2 .card-body .form { min-width: 0 !important; }
    body.fp2 .card-body .form,
    body.fp2 [style*="overflow"] { overflow-x: visible !important; }

    body.fp2 .RadGrid,
    body.fp2 .table-responsive,
    body.fp2 .table-responsive-x { overflow-x: auto !important; max-width: 100%; }
    body.fp2 .RadGrid .rgMasterTable { table-layout: auto !important; width: max-content !important; min-width: 100%; }

    body.fp2 label, body.fp2 .control-label, body.fp2 p, body.fp2 span,
    body.fp2 h1, body.fp2 h2, body.fp2 h3, body.fp2 h4, body.fp2 h5 {
        white-space: normal !important;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    body.fp2 .form-control, body.fp2 .RadComboBox { max-width: 100% !important; }
}

/* ==========================================================================
   18b. THE OLDER SHELL  —  sb-admin-2 / Bootstrap 3
   StudentMasterPage.master (9 routed pages: MyActivity, WorkFlow,
   WorkFlowSearch, BookReservation, FeeDetails, AdvanceFee, AssessmentResult,
   FacultyCourseAssesment, RegistrationView), Popup.master (10 popup pages),
   ReportMaster / SurveyResponseMasterPage / OnlineExamMasterPage.
   Different class vocabulary from Metronic, same palette.
   ========================================================================== */
body.fp2 #wrapper,
body.fp2 #page-wrapper,
body.fp2 .main_container {
    background: transparent !important;
    border-left: 0 !important;
}

body.fp2 #page-wrapper {
    background: var(--fp2-surface) !important;
    border-radius: 26px 0 0 26px;
    box-shadow: -18px 0 40px rgba(60, 44, 28, .06);
}

/* top bar */
body.fp2 .navbar-default,
body.fp2 .navbar-static-top {
    background: var(--fp2-surface) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fp2-border) !important;
    box-shadow: none !important;
}

body.fp2 .navbar-default .navbar-brand,
body.fp2 .navbar-top-links > li > a {
    color: var(--fp2-muted) !important;
    text-shadow: none !important;
}

body.fp2 .navbar-top-links > li > a:hover,
body.fp2 .navbar-top-links > li.active > a {
    color: var(--fp2-ember-600) !important;
    background: var(--fp2-ember-50) !important;
}

body.fp2 .navbar-toggle .icon-bar { background: var(--fp2-ink) !important; }

body.fp2 .blue_bar,
body.fp2 .bar {
    background: linear-gradient(120deg, var(--fp2-espresso-2), var(--fp2-espresso)) !important;
    background-image: linear-gradient(120deg, var(--fp2-espresso-2), var(--fp2-espresso)) !important;
    color: #F5F1E9 !important;
    border: 0 !important;
}

/* the sidebar, as index tabs (same language as the Metronic rail) */
body.fp2 .sidebar {
    background: var(--fp2-surface) !important;
    border-right: 1px solid var(--fp2-border);
}

body.fp2 .sidebar .nav > li > a {
    color: var(--fp2-muted) !important;
    background: var(--fp2-surface-2) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--fp2-border);
    border-radius: 13px 0 0 13px;
    margin: 0 0 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    transition: background .18s ease, color .15s ease, margin-left .18s ease;
}

body.fp2 .sidebar .nav > li > a:hover,
body.fp2 .sidebar .nav > li > a:focus {
    background: var(--fp2-sand) !important;
    color: var(--fp2-text) !important;
    margin-left: 6px;
}

body.fp2 .sidebar .nav > li.active > a,
body.fp2 .sidebar .nav > li > a.active {
    background: var(--fp2-ember-50) !important;
    color: var(--fp2-ember-600) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp2-ember-500) 30%, transparent);
    margin-left: 4px;
    font-weight: 700;
}

body.fp2 .sidebar .nav .nav-second-level > li > a {
    background: transparent !important;
    box-shadow: none;
    border-radius: 8px;
    margin-left: 22px;
    font-weight: 500;
}

/* Bootstrap 3 panels -> the paper card */
body.fp2 .panel {
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border);
    border-radius: var(--fp2-r);
    box-shadow: var(--fp2-shadow-sm) !important;
}

body.fp2 .panel > .panel-heading {
    background: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid var(--fp2-border);
    border-radius: var(--fp2-r) var(--fp2-r) 0 0;
    color: var(--fp2-ink) !important;
    padding: 11px 16px;
}

body.fp2 .panel > .panel-heading .panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fp2-ink);
}

body.fp2 .panel > .panel-body { padding: 14px 16px; }

body.fp2 .panel > .panel-footer {
    background: var(--fp2-surface-2);
    border-top: 1px solid var(--fp2-border);
}

body.fp2 .panel-primary,
body.fp2 .panel-info,
body.fp2 .panel-success,
body.fp2 .panel-warning,
body.fp2 .panel-danger { border-color: var(--fp2-border); }

body.fp2 .panel-primary > .panel-heading {
    background: var(--fp2-ember-50) !important;
    border-color: var(--fp2-border);
    color: var(--fp2-ember-700) !important;
}

/* Bootstrap 3 theme gradients on buttons */
body.fp2 .btn { text-shadow: none !important; background-image: none; }

/* profile block in the old sidebar */
body.fp2 .profile-sidebar { background: transparent; }
body.fp2 .profile-userpic img { border-radius: 14px; }

body.fp2 .profile-usertitle-name {
    font-family: var(--fp2-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--fp2-ink);
}

body.fp2 .profile-usertitle-job {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--fp2-faint);
}

/* old footer */
body.fp2 .footer,
body.fp2 .registration_footer {
    background: transparent !important;
    border-top: 0 !important;
}

body.fp2 .footer-text,
body.fp2 .powered {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--fp2-faint) !important;
}

/* the old page-load overlay */
body.fp2 .load_background { background: rgba(36, 31, 24, .42) !important; }
body.fp2 .load_progress,
body.fp2 .progress_container { background: var(--fp2-surface) !important; border-radius: var(--fp2-r-sm); }

/* timeline.css */
body.fp2 .timeline > li > .timeline-panel {
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border);
    border-radius: var(--fp2-r-sm);
    box-shadow: var(--fp2-shadow-sm);
}

body.fp2 .timeline > li > .timeline-badge { background: var(--fp2-ember-500) !important; }
body.fp2 .timeline:before { background: var(--fp2-border); }

/* Bootstrap 3 well / breadcrumb / pagination */
body.fp2 .well {
    background: var(--fp2-surface-2);
    border: 1px solid var(--fp2-border);
    border-radius: var(--fp2-r-sm);
    box-shadow: none;
}

body.fp2 .breadcrumb { background: transparent; }

body.fp2 .pagination > li > a,
body.fp2 .pagination > li > span {
    color: var(--fp2-muted);
    background: var(--fp2-surface);
    border-color: var(--fp2-border);
}

body.fp2 .pagination > .active > a,
body.fp2 .pagination > .active > span,
body.fp2 .pagination > li > a:hover {
    background: var(--fp2-ember-50) !important;
    border-color: color-mix(in srgb, var(--fp2-ember-500) 30%, transparent) !important;
    color: var(--fp2-ember-600) !important;
}

body.fp2 .nav-tabs > li > a { color: var(--fp2-muted); border-radius: 9px 9px 0 0; }

body.fp2 .nav-tabs > li.active > a,
body.fp2 .nav-tabs > li.active > a:hover,
body.fp2 .nav-tabs > li.active > a:focus {
    background: var(--fp2-ember-50);
    border-color: var(--fp2-border) var(--fp2-border) transparent;
    color: var(--fp2-ember-600);
}

/* ==========================================================================
   19. TOAST  (FP2.toast(msg, kind) - opt-in, see facultyportal-v2.js)
   ========================================================================== */
.fp2-toast-host {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    gap: 9px;
    pointer-events: none;
}

.fp2-toast {
    pointer-events: auto;
    max-width: 340px;
    padding: 11px 15px;
    border-radius: var(--fp2-r-sm);
    background: var(--fp2-espresso);
    color: #F5F1E9;
    font-family: var(--fp2-sans);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    box-shadow: 0 18px 40px -18px rgba(36, 31, 24, .6);
    animation: fp2fadeUp .28s cubic-bezier(.2, .7, .3, 1) both;
}

.fp2-toast-success { background: var(--fp2-ok); }
.fp2-toast-error { background: var(--fp2-crit); }
.fp2-toast-info { background: var(--fp2-espresso); }
.fp2-toast-out { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }

/* ==========================================================================
   20. PRINT  —  vouchers / transcripts / admit cards must stay printable:
   drop the sheet chrome, the grain and the rail.
   ========================================================================== */
@media print {
    body.fp2::after { display: none !important; }
    body.fp2 { background: #fff !important; }
    body.fp2 .aside, body.fp2 .header, body.fp2 .header-mobile,
    body.fp2 .footer, body.fp2 .offcanvas, body.fp2 .scrolltop,
    body.fp2 .fp2-tabs-nav, body.fp2 .no-print { display: none !important; }
    body.fp2 #kt_content {
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    body.fp2 .wrapper { padding: 0 !important; }
}


/* ==========================================================================
   6e. THE LEGACY LIGHTBOX  (#lightbox / .lightFrame / .cross)

   EDU_EBS_STU_WorkFlowSearch.aspx ships this markup, and its code-behind opens
   it with ViewLightBoxFrame(url, 'lightbox', 'lightframe'). Both the CSS and
   the JS for it came from the pre-V2 theme and were lost, which left the box
   with NO display rule at all - so it rendered as a permanently visible empty
   bordered panel under the grid, its close button called a function that no
   longer existed, and the "view" action could not open it either.

   Restored here (CSS) and in facultyportal-v2.js (ViewLightBoxFrame /
   Hidelightbox). Hidden by default is the important part: display:none unless
   .fp2-lb-open is present, so a missing/failed script can never leave it
   showing again.

   The iframe keeps the page's own width="890px" height="250px" attributes -
   that is the author's intended size, and this is a restoration, not a
   redesign. Only max-width is added so it cannot overflow a narrow viewport.
   ========================================================================== */
body.fp2 .lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1090;
    padding: 24px;
    background: rgba(36, 31, 24, .55);
    align-items: center;
    justify-content: center;
}

body.fp2 .lightbox.fp2-lb-open { display: flex; }

body.fp2 .lightbox .lightFrame {
    max-width: 100%;
    border: 0;
    border-radius: 14px;
    background: var(--fp2-surface);
    box-shadow: 0 30px 70px -20px rgba(60, 44, 28, .55);
}

/* absolute, so it leaves the flex flow and the iframe stays centred on its own */
body.fp2 .lightbox .cross {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    border-radius: 50%;
    background: var(--fp2-surface);
    padding: 3px;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .5);
    transition: transform .15s ease;
}

body.fp2 .lightbox .cross:hover { transform: scale(1.08); }

@media (max-width: 720px) {
    body.fp2 .lightbox { padding: 12px; }
    body.fp2 .lightbox .cross { top: 10px; right: 12px; }
}


/* ==========================================================================
   6g. WIDE REPORT GRIDS  -  scroll instead of being cut off

   67 pages render a telerik:RadGrid; only 2 wrap it in a scroll container. Any
   report whose columns are generated (AutoGenerateColumns="True" - PLO
   attainment, ledger, transcripts, assessment marks) is therefore wider than
   the content area and simply gets clipped at the right edge.

   These exact rules already existed - but ONLY inside
   @media (max-width: 767.98px), so grids scrolled correctly on a phone and were
   cut on the desktop where the reports are actually read. Promoted to all
   widths here. Editing 67 pages to add a wrapper would be the wrong fix; the
   grid making itself scrollable is one rule and cannot be forgotten on the next
   report page someone adds.

   width:max-content + min-width:100% is the pair that matters: max-content lets
   the table be as wide as its columns need (so it overflows and the scrollbar
   appears) while min-width keeps a narrow grid filling the card instead of
   shrinking to its text.
   ========================================================================== */
body.fp2 .RadGrid {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* ⚠ DO NOT put `width: max-content` here. An earlier version of this section
   did, copied from the mobile block further up, and it caused a much worse bug
   than the one it fixed: max-content means "as wide as the content wants WITHOUT
   WRAPPING", so a 6-column ledger whose Description column holds a sentence
   stopped wrapping and the table ballooned to several screens wide. Every report
   grew a huge horizontal scrollbar, including ones that had been fine.

   `overflow-x: auto` on the .RadGrid above is enough on its own:
     * a grid that fits (Telerik renders Width="100%") does not overflow, so no
       scrollbar appears and long cell text wraps exactly as it did before the
       re-theme;
     * a grid that genuinely cannot fit - many generated columns, or explicit
       column widths, as on PLO attainment - overflows its container and the
       scrollbar appears on the grid instead of the page being clipped.
   min-width:100% is kept so a grid with few narrow columns still fills its card
   rather than shrinking to its text. */
body.fp2 .RadGrid .rgMasterTable {
    min-width: 100%;
}

/* Don't nest a second scroller: two pages already wrap their grid in
   .fp2-tbl-scroll, which is the scroll box there. */
body.fp2 .fp2-tbl-scroll .RadGrid { overflow-x: visible; }

/* ⚠ The Communicator inbox list is a RadGrid too, and it must NOT do this - it
   lives in a fixed 380px column and its rows are a card layout, not columns.
   Its own rule at section 6d-2 already forces width:100% + table-layout:fixed
   with !important (higher specificity, so it wins on the table), but the
   overflow has to be turned off explicitly or the list gets a stray horizontal
   scrollbar. */
body.fp2 .spc-items .RadGrid {
    overflow-x: hidden;
    max-width: none;
}

/* --- the report action bar (print / export) ------------------------------
   Report pages put these in a bare <div style="float:left"> as raw <img>
   links. Give them a row that matches the rest of the portal's actions.
   .no-print / .hide_print are the pages' own classes for print-hiding. */
body.fp2 .fp2-report-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 4px;
}

body.fp2 .fp2-report-actions img,
body.fp2 .fp2-report-actions input[type="image"] {
    width: 30px !important;
    height: auto !important;
    margin: 0 !important;
    vertical-align: middle;
    opacity: .85;
    transition: opacity .15s ease, transform .15s ease;
}

body.fp2 .fp2-report-actions img:hover,
body.fp2 .fp2-report-actions input[type="image"]:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* Rounded icon-button chrome for the print link (inline SVG, currentColor)
   and the Excel input[type=image] (a real image file, cannot use
   currentColor - see the .aspx comment) - the chrome, not the icon's own
   colour, is what supplies the themed hover feedback for both alike. The
   img/input[type=image] sizing rule above still applies to ExcelImg's own
   icon inside this button; !important the icon needs there is why width
   isn't repeated here. */
body.fp2 .fp2-report-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--fp2-border);
    background: var(--fp2-surface);
    color: var(--fp2-muted);
    padding: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

body.fp2 .fp2-report-icon-btn:hover {
    background: var(--fp2-ember-50);
    border-color: var(--fp2-ember-200);
    color: var(--fp2-ember-600);
    transform: translateY(-1px);
}

body.fp2 .fp2-report-actions input.fp2-report-icon-btn[type="image"] {
    width: 34px !important;
    height: 34px !important;
}

/* --- grid action icons: Edit / Delete / View (2026-09-23) ------------------
   Client screenshot: the Edit/View/Delete icons on a RadGrid look like raw,
   unstyled clip-art (Telerik/legacy defaults), inconsistent with the rest of
   the theme - "match the icons with theme... apply this in the whole
   project". images/edit.png, images/delete.png and images/view.png are
   referenced ~147 times across 46 pages, via two different markup patterns
   (GridButtonColumn ButtonType="ImageButton" -> <input type="image">, and
   asp:HyperLink/asp:Image ImageUrl="..." -> <img>) and inconsistent path
   casing (../images/edit.png, ~/Images/Edit.png, etc. - the same physical
   file either way on a case-insensitive filesystem).
   FIRST PASS re-themed these live via CSS content:url() (a hand-drawn inline
   SVG per icon) rather than hand-editing 46 files - that part of the
   reasoning still holds. SUPERSEDED the same day: the sibling StudentPortal
   project had already solved this exact problem (its own handoff doc,
   sections 45a-45c) and the client's preference, once shown both, was the
   *real* designed assets, not a theme-recoloured redraw - StudentPortal's
   45a (theme-recoloured SVG chips) was explicitly rejected in favour of 45b
   (icons copied verbatim from the CMS's own Setup page), then 45c rolled
   that out portal-wide via a straight asset swap - the two files
   images/edit.png and images/delete.png overwritten in place (originals
   kept as edit-old-blue.png/delete-old-blue.png), because "most usages are
   GridButtonColumn ImageButtons that render at NATURAL image size" - i.e.
   the exact same constraint this project has. Ported that outcome here
   instead of re-deriving it: copied StudentPortal's current edit.png (22x22)
   / delete.png (25x25) / view.png (24x24, its own "already-themed" eye,
   sourced from a LordIcon master image - see StudentPortal's handoff
   section on the View links) straight into this project's images/ folder,
   same filenames, same approach FacultyPortal's own edit/delete already
   used (an asset swap is also markup-free AND resolution-agnostic - it
   doesn't care whether a given usage is <img>, <input type=image>, or
   wrapped in an <a>, unlike StudentPortal's own View-link technique, which
   needed an anchor to hide an inner <img> behind and could not reach a bare
   <input> either - see that project's "btnView ... NOT matched" note).
   Originals backed up the same way, as edit-old-blue.png / delete-old-blue.png
   / view-old.png. The content:url() rules that used to live here are gone -
   they would otherwise repaint these new files right back into last week's
   hand-drawn version. Kept the hover/transition feedback below; it doesn't
   care which image is underneath. */
body.fp2 img[src$="edit.png" i],
body.fp2 input[src$="edit.png" i],
body.fp2 img[src$="delete.png" i],
body.fp2 input[src$="delete.png" i],
body.fp2 img[src$="view.png" i],
body.fp2 input[src$="view.png" i] {
    transition: opacity .15s ease;
}

body.fp2 img[src$="edit.png" i]:hover,
body.fp2 input[src$="edit.png" i]:hover,
body.fp2 img[src$="delete.png" i]:hover,
body.fp2 input[src$="delete.png" i]:hover,
body.fp2 img[src$="view.png" i]:hover,
body.fp2 input[src$="view.png" i]:hover {
    opacity: .7;
}

/* --- report pages: the "no records" banner ---------------------------------
   5 report pages (rptEDU_OBE_StudentProgramOutcomePLOAttainment,
   rptEDU_EBS_STU_StudentGeneralLedgerReport, rptEDU_EBS_STU_StudentUnofficialTranscript,
   rptEDU_EBS_STU_AssessmentMarks, rptEDU_EBS_STU_StudentFeeSummaryReport) share
   the exact same code-behind pattern: a bare <h5 id="alert" runat="server">
   the code sets to "No Record(s) Found" when there is nothing to show. It
   carries no CssClass, yet renders as a full-width bright-blue banner - that
   comes from ReportMaster.master's legacy stylesheet chain (bootstrap-theme /
   Reportstyle / Style.css), not from anything in this theme, and the exact
   rule wasn't worth hunting down inside minified vendor CSS. Overridden
   directly instead, matching how the same "nothing to show" state already
   reads elsewhere (RadGrid's own .rgNoRecords). Scoped to .wrapper, the
   container ReportMaster.master alone renders, so this cannot reach any
   other page's differently-suffixed alert ids (alertS/alertW/alertD etc. -
   [id$="alert"] only matches an id actually ENDING "alert"). */
body.fp2 .wrapper [id$="alert"] {
    background: var(--fp2-surface-2) !important;
    color: var(--fp2-faint) !important;
    font-style: italic;
    font-weight: 500 !important;
    text-transform: none !important;
    text-align: left !important;
    padding: 14px 16px !important;
    border-radius: var(--fp2-r-sm);
    margin: 10px 0;
}

/* ===== END GENERATED. Hand-written overrides that must win over the generic sections go BELOW this line. ===== */

/* ==========================================================================
   B. OVERRIDES that must beat the generated sections above. The Student
      Portal's generic layer paints primary actions as an ember gradient and
      inputs on sand; the Faculty mockup is quieter: charcoal primary button,
      paper inputs with a hairline, accent only on focus and active states.
   ========================================================================== */

/* B1. buttons */
body.fp2 .btn {
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}
body.fp2 .btn.btn-primary,
body.fp2 .btn.btn-success,
body.fp2 .btn.btn-info,
body.fp2 .btn.btn-warning,
body.fp2 .btn.btn-dark,
body.fp2 input[type="submit"].btn-primary,
body.fp2 input[type="button"].btn-primary {
    background: var(--fp2-primary) !important;
    border: 1px solid var(--fp2-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
}
body.fp2 .btn.btn-primary:hover,
body.fp2 .btn.btn-success:hover,
body.fp2 .btn.btn-info:hover,
body.fp2 .btn.btn-warning:hover,
body.fp2 .btn.btn-dark:hover,
body.fp2 input[type="submit"].btn-primary:hover {
    background: var(--fp2-primary-soft) !important;
    border-color: var(--fp2-primary-soft) !important;
    filter: none !important;
    transform: none !important;
}
body.fp2 .btn.btn-secondary,
body.fp2 .btn.btn-light,
body.fp2 .btn.btn-default,
body.fp2 .btn.btn-outline-secondary,
body.fp2 .btn.btn-outline-primary {
    background: var(--fp2-surface) !important;
    border: 1px solid var(--fp2-line) !important;
    color: var(--fp2-ink) !important;
}
body.fp2 .btn.btn-secondary:hover,
body.fp2 .btn.btn-light:hover,
body.fp2 .btn.btn-default:hover,
body.fp2 .btn.btn-outline-secondary:hover,
body.fp2 .btn.btn-outline-primary:hover {
    border-color: var(--fp2-ink-muted) !important;
    color: var(--fp2-ink) !important;
}
body.fp2 .btn.btn-danger { background: var(--fp2-danger) !important; border: 1px solid var(--fp2-danger) !important; }
body.fp2 .btn.btn-light-primary,
body.fp2 .btn.btn-light-warning {
    background: var(--fp2-accent-tint) !important;
    color: var(--fp2-accent-warm) !important;
    border: 1px solid transparent !important;
}
body.fp2 .btn.btn-light-primary:hover,
body.fp2 .btn.btn-light-warning:hover { background: #F9DFCC !important; color: var(--fp2-accent-warm) !important; }
body.fp2 .btn.btn-light-danger { background: var(--fp2-danger-soft) !important; color: var(--fp2-danger) !important; border: 1px solid transparent !important; }
body.fp2 .btn.btn-light-success { background: var(--fp2-success-soft) !important; color: var(--fp2-success) !important; border: 1px solid transparent !important; }
body.fp2 .btn.btn-clean:hover { color: var(--fp2-accent-warm) !important; }
body.fp2 .btn.btn-hover-primary:hover { color: var(--fp2-accent-warm) !important; }

/* B2. forms */
body.fp2 label,
body.fp2 .control-label,
body.fp2 .form-group > label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp2-ink-muted);
    margin-bottom: 6px;
}
body.fp2 .form-control,
body.fp2 select.form-control,
body.fp2 textarea.form-control {
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 7px;
    color: var(--fp2-ink);
    font-size: 13px;
    height: 36px;
    padding: 0 11px;
}
body.fp2 textarea.form-control { height: auto; padding: 9px 11px; }
body.fp2 .form-control:focus {
    background: var(--fp2-surface);
    border-color: var(--fp2-accent);
    box-shadow: 0 0 0 3px rgba(242, 106, 27, .10);
}
body.fp2 .form-control::placeholder { color: var(--fp2-ink-muted); }
body.fp2 .form-control:disabled,
body.fp2 .form-control[readonly] { background: var(--fp2-bg-soft); opacity: 1; color: var(--fp2-ink-soft); }
body.fp2 .form-control.form-control-sm { height: 32px; }
body.fp2 .form-control.form-control-lg { height: 42px; }
body.fp2 .input-group-text,
body.fp2 .input-group-prepend .btn,
body.fp2 .input-group-append .btn {
    background: var(--fp2-bg-soft);
    border: 1px solid var(--fp2-line);
    color: var(--fp2-ink-muted);
    border-radius: 7px;
}
body.fp2 .checkbox > input:checked ~ span,
body.fp2 .radio > input:checked ~ span { background: var(--fp2-accent-warm); border-color: var(--fp2-accent-warm); }
body.fp2 input[type="checkbox"],
body.fp2 input[type="radio"] { accent-color: var(--fp2-accent-warm); }
body.fp2 .required_field,
body.fp2 .required { color: var(--fp2-accent-warm); }

/* B3. cards */
body.fp2 .card.card-custom,
body.fp2 .card {
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    box-shadow: none !important;
}
body.fp2 .card.card-custom > .card-header {
    border-bottom: 1px solid var(--fp2-line-soft);
    padding: 14px 22px;
    background: transparent;
}
body.fp2 .card.card-custom > .card-header .card-title .card-label,
body.fp2 .card.card-custom > .card-header h3 {
    font-family: var(--fp2-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--fp2-ink);
}
body.fp2 .card.card-custom > .card-header .card-title .card-label small,
body.fp2 .card.card-custom > .card-header .card-title .text-muted { color: var(--fp2-ink-muted) !important; font-size: 11.5px; }
body.fp2 .card.card-custom > .card-body { padding: 18px 22px !important; }
body.fp2 .card.card-custom > .card-footer { background: var(--fp2-surface-2); border-top: 1px solid var(--fp2-line-soft); padding: 12px 22px; }
body.fp2 .card.gutter-b { margin-bottom: 20px !important; }

/* B4. tables */
body.fp2 .table thead th,
body.fp2 table.st_Table thead th,
body.fp2 table.top_table thead th,
body.fp2 table.tbl thead th {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fp2-ink-muted);
    font-weight: 600;
    background: var(--fp2-surface-2);
    padding: 12px 16px;
    border-bottom: 1px solid var(--fp2-line);
}
body.fp2 .table tbody > tr > td,
body.fp2 table.st_Table tbody > tr > td,
body.fp2 table.top_table tbody > tr > td,
body.fp2 table.tbl tbody > tr > td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--fp2-line-soft);
    font-size: 13px;
    color: var(--fp2-ink);
}
body.fp2 .table tbody > tr:hover { background: var(--fp2-surface-2); }

/* B5. Telerik grid header + hover / selected rows in the same table language */
body.fp2 .RadGrid .rgHeader,
body.fp2 .RadGrid th.rgHeader,
body.fp2 .RadGrid .rgHeaderWrapper {
    background: var(--fp2-surface-2) !important;
    color: var(--fp2-ink-muted) !important;
    font-size: 11px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600 !important;
    border-color: var(--fp2-line) !important;
}
body.fp2 .RadGrid .rgHeader a { color: var(--fp2-ink-muted) !important; }
body.fp2 .RadGrid .rgRow > td,
body.fp2 .RadGrid .rgAltRow > td { border-color: var(--fp2-line-soft) !important; font-size: 13px; }
body.fp2 .RadGrid .rgRow:hover > td,
body.fp2 .RadGrid .rgAltRow:hover > td { background: var(--fp2-surface-2) !important; }
/* some marking grids flag EVERY row rgSelectedRow (editable rows), so the
   selected tint stays quiet - sand, not ember */
body.fp2 .RadGrid .rgSelectedRow > td { background: var(--fp2-surface-2) !important; }

/* B6. alerts: quieter tints */
body.fp2 .alert.alert-custom { border-radius: 10px; border: 1px solid var(--fp2-line) !important; }
body.fp2 .alert.alert-light-danger { background: var(--fp2-danger-soft) !important; color: var(--fp2-danger) !important; border-color: rgba(162,65,42,.25) !important; }
body.fp2 .alert.alert-light-success { background: var(--fp2-success-soft) !important; color: var(--fp2-success) !important; border-color: rgba(85,116,76,.25) !important; }
body.fp2 .alert.alert-light-warning { background: var(--fp2-warning-soft) !important; color: var(--fp2-warning) !important; border-color: rgba(169,106,8,.25) !important; }
body.fp2 .alert.alert-light-primary,
body.fp2 .alert.alert-light-info { background: var(--fp2-accent-tint) !important; color: var(--fp2-accent-warm) !important; border-color: rgba(242,106,27,.25) !important; }

/* B7. labels / pills */
body.fp2 .label.label-inline,
body.fp2 .label.label-rounded { border-radius: 20px; font-size: 11px; font-weight: 600; padding: 3px 10px; height: auto; }
body.fp2 .label.label-light-success { background: var(--fp2-success-soft); color: var(--fp2-success); }
body.fp2 .label.label-light-danger { background: var(--fp2-danger-soft); color: var(--fp2-danger); }
body.fp2 .label.label-light-warning { background: var(--fp2-warning-soft); color: var(--fp2-warning); }
body.fp2 .label.label-light-primary,
body.fp2 .label.label-light-info { background: var(--fp2-accent-tint); color: var(--fp2-accent-warm); }

/* B8. Metronic "link" buttons (btn-link-primary on the Search pages' "Add New
   Record") were the last hard-coded #3699FF found by the harness sweep */
body.fp2 .btn.btn-link,
body.fp2 .btn.btn-link-primary,
body.fp2 .btn.btn-link-info,
body.fp2 .btn.btn-link-success { color: var(--fp2-accent-warm) !important; background: transparent !important; border: 0 !important; padding-left: 0; }
body.fp2 .btn.btn-link:hover,
body.fp2 .btn.btn-link-primary:hover,
body.fp2 .btn.btn-link-info:hover,
body.fp2 .btn.btn-link-success:hover { color: var(--fp2-accent) !important; text-decoration: underline; }
body.fp2 .btn.btn-link-danger { color: var(--fp2-danger) !important; background: transparent !important; border: 0 !important; }

/* B9. TOPBAR ON PHONES. Below 992px Metronic renders #kt_header in flow under
   its 55px fixed burger header. The crumb and term chip go and the user pill shrinks to its initials - measured
   in the harness at 375px: the desktop layout overflowed to 468px. */
@media (max-width: 991.98px) {
    body.fp2 .header { overflow: hidden; }
    body.fp2 .header > .container-fluid.fp2-topbar { padding: 0 14px; gap: 10px; }
    body.fp2 .fp2-topbar .fp2-crumb,
    body.fp2 .fp2-topbar .fp2-tb-term { display: none; }
        body.fp2 .fp2-top-actions .fp2-user-btn .fp2-nm { display: none; }
    body.fp2 .fp2-top-actions .fp2-user-btn { padding: 0 4px; gap: 0; max-width: none; }
    body.fp2 #kt_content > .d-flex > .container { padding: 0 12px; }
    body.fp2 .subheader.fp2-page-head { margin-bottom: 14px !important; }
    body.fp2 .fp2-page-head h1 { font-size: 24px; }
}

/* ==========================================================================
   C. LIVE-SITE FIXES (walked every sidebar page on the running portal)
   ========================================================================== */

/* C1. THE CLASSIC RadComboBox (Skin=Metro, 61 pages) COLLAPSED.
   Measured on the live site: the arrow cell computed 9999px wide and the input
   cell 20px, so every combo showed as an empty sand bar with no text and no
   chevron. Two Telerik base rules together: the <table> is display:inline-block
   (so it is laid out as an anonymous auto-width table, not a fixed one) and the
   arrow <a> has text-indent:9999px (its "select" text pushed 9999px right).
   Inside an auto-width table that indent is the cell's intrinsic width, so the
   arrow cell took 9999px and the root's overflow:hidden clipped everything.
   Fix: a real table again, and no indent on the link (its text is hidden by
   font-size:0 / transparent colour instead; the chevron is drawn by ::after). */
body.fp2 .RadComboBox table { display: table !important; }
body.fp2 .RadComboBox table td.rcbArrowCell a {
    text-indent: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    width: 28px !important;
    overflow: hidden !important;
}
body.fp2 .RadComboBox table td.rcbInputCell { width: auto !important; }
body.fp2 .RadComboBox .rcbInput {
    color: var(--fp2-ink) !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
}
body.fp2 .RadComboBox,
body.fp2 .RadComboBox_Metro { background: var(--fp2-surface) !important; border-color: var(--fp2-line) !important; border-radius: 7px !important; height: 36px !important; }
body.fp2 .RadComboBox table,
body.fp2 .RadComboBox table td.rcbArrowCell a,
body.fp2 .RadComboBox .rcbInput { height: 34px !important; }
body.fp2 .RadComboBox table td.rcbArrowCell a::after { border-color: var(--fp2-ink-muted) !important; }
/* the Bootstrap .form-control classes the pages put on the combo root must not
   re-box it (height/padding come from the rules above) */
body.fp2 .RadComboBox.form-control { padding: 0 !important; }

/* C2. EMPTY ALERT HEADINGS. Many form rows open with <h2 id="alert"></h2> /
   <h5 id="alert"></h5> placeholders the code-behind fills on error; empty they
   rendered as a small sand square before the first field (the flex row gave
   them a box). Hidden while empty; the moment the server writes a message they
   show again. */
body.fp2 .form-group > h1:empty,
body.fp2 .form-group > h2:empty,
body.fp2 .form-group > h3:empty,
body.fp2 .form-group > h4:empty,
body.fp2 .form-group > h5:empty,
body.fp2 .form-group > h6:empty,
body.fp2 .card-body > h2:empty,
body.fp2 .card-body > h5:empty,
/* the direct-child rules above miss this same id="alert" placeholder
   wherever a page nests it deeper than a direct .form-group/.card-body
   child (e.g. EDU_EBS_FCT_MarkingScheme.aspx: .card-body > .col-md-12 >
   h5#alert) or puts it beside .card-body instead of inside it (e.g.
   EDU_EBS_FCT_SearchCancelledClasses.aspx) - an id selector targets the
   placeholder itself regardless of nesting, same [id$=...] convention this
   file already uses for server-mangled ids elsewhere (client, 2026-10-01:
   "empty coloured bar shown at the top of forms"). */
body.fp2 h2[id$="alert"]:empty,
body.fp2 h5[id$="alert"]:empty { display: none !important; }
/* ...and when they DO carry a message, make it read as one */
body.fp2 .form-group > h2:not(:empty),
body.fp2 .form-group > h5:not(:empty),
body.fp2 .card-body > h2:not(:empty),
body.fp2 .card-body > h5:not(:empty),
body.fp2 h2[id$="alert"]:not(:empty),
body.fp2 h5[id$="alert"]:not(:empty) {
    display: block;
    flex: 0 0 100%;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    background: var(--fp2-warning-soft);
    color: var(--fp2-warning);
    border: 1px solid rgba(169, 106, 8, .25);
}
body.fp2 .form-group > h2:not(:empty),
body.fp2 .form-group > h5:not(:empty) { margin: 0 15px 12px; }

/* C3. THE REPORT SHELL (ReportMaster.master, 18 pages: attendance sheet, award
   list, comprehensive, course review, detailed result, OBE ...). The legacy
   default.css / Reportstyle.css paint a blue/maroon company block, an 8px blue
   top line, a fixed filter panel (#fixed, position:fixed; top:0) that COVERS
   the report header, and a maroon "Selection Criteria" tab. Rebuilt as: a
   flat header row (company / report name + date / Back to main), a paper card
   for the filter panel in normal flow, a pill toggle, and the results below.
   The pages' own jQuery keeps toggling #filteration/#maindiv (slideToggle) and
   tries to fadeOut #fixed on scroll - the panel is pinned visible here because a
   static panel that vanishes on scroll would make the report jump. */
body.fp2 .top_line,
body.fp2 .side_blue { display: none !important; }

body.fp2 .top_1 {
    position: static !important;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 26px 14px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--fp2-line);
    background: transparent;
}
body.fp2 .top_1 .main_heading {
    all: unset;
    display: block;
    margin-right: auto;
    font-family: var(--fp2-serif);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--fp2-ink);
}
body.fp2 .top_1 .main_heading p { margin: 0; font-weight: 500; }
body.fp2 .top_1 .side {
    float: none !important;
    position: static !important;
    height: auto !important;
    width: auto !important;
    right: auto !important;
    top: auto !important;
    text-align: right;
}
body.fp2 .top_1 .side h1 {
    font-family: var(--fp2-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fp2-ink-muted);
    margin: 0 0 4px !important;
    padding: 0 !important;
}
body.fp2 .top_1 .side table { margin-left: auto; width: auto !important; }
body.fp2 .top_1 .side td { font-size: 12.5px; color: var(--fp2-ink-soft); padding: 0 0 0 6px; height: auto !important; }
body.fp2 .top_1 .side td.small_blue { color: var(--fp2-ink-muted); }
body.fp2 #backtomain {
    position: static !important;
    padding: 0 !important;
    right: auto !important;
    top: auto !important;
    font-size: 12px !important;
}
body.fp2 #backtomain b { font-weight: 500; }
body.fp2 #backtomain a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px !important;
    border-radius: 9px;
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    color: var(--fp2-ink) !important;
    text-decoration: none !important;
    text-transform: none !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}
body.fp2 #backtomain a:hover { border-color: var(--fp2-ink-muted); }
body.fp2 .penal_text { width: auto !important; margin: 0 !important; }
body.fp2 .penal_text table:empty { display: none; }

/* the filter panel: in flow, a paper card, never hidden by the scroll fade */
body.fp2 #fixed {
    position: static !important;
    width: auto !important;
    display: block !important;
    opacity: 1 !important;
    margin: 0 26px 18px !important;
}
body.fp2 #filteration {
    background: var(--fp2-surface) !important;
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 18px 22px 12px !important;
    height: auto !important;
}
body.fp2 #filteration > .container,
body.fp2 #filteration .container { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
body.fp2 #filteration fieldset { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; width: auto !important; }
body.fp2 #filteration legend { font-family: var(--fp2-serif); font-size: 18px; font-weight: 500; color: var(--fp2-ink); border: 0; margin: 0 0 12px; padding: 0; }
body.fp2 #filteration label,
body.fp2 #filteration .textFields { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fp2-ink-muted); padding: 0; margin-bottom: 6px; }
body.fp2 #opener {
    position: static !important;
    display: table;
    width: auto !important;
    margin: 12px auto 0 !important;
    padding: 7px 16px !important;
    background: var(--fp2-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: var(--fp2-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    left: auto !important;
    top: auto !important;
}
body.fp2 #opener:hover { background: var(--fp2-primary-soft) !important; }
body.fp2 #maindiv {
    float: none !important;
    width: auto !important;
    margin: 0 26px !important;
    padding: 0 !important;
}
/* the print / excel bar under the report */
body.fp2 div.no-print[ar] {
    float: none !important;
    width: auto !important;
    padding: 12px 26px 24px !important;
    display: flex;
    align-items: center;
    gap: 14px;
}
body.fp2 div.no-print[ar] img { margin: 0 !important; border-radius: 8px; }
body.fp2 div.no-print[ar] > div { position: static !important; height: auto !important; margin-left: auto; color: var(--fp2-ink-muted); }
body.fp2 div.no-print[ar] p { margin: 0; }
/* report grids: the legacy sheets colour the header links white on blue */
body.fp2 .RadGrid .rgHeader,
body.fp2 .RadGrid .rgHeader a,
body.fp2 .RadGrid_Default .rgHeader a { color: var(--fp2-ink-muted) !important; background: var(--fp2-surface-2) !important; }
body.fp2 .RadGrid .rgHeader { text-align: center !important; }
/* Attendance grids: the Present/Session checkbox columns (client, 2026-10-01,
   reported again 2026-10-02 as still broken: "the header box is left/centre,
   every student's box is pushed to the far right").
   The header (the rule above) centres; the cells below need to centre too, and
   the select-all box in the header has to sit on the SAME vertical line as the
   boxes under it.
   * cells: centred, for every grid (a cell holding a checkbox).
   * header: the select-all box goes on its own line above its label. Inline,
     "[box] Present (Session 1)" is centred as one unit, which puts the box left
     of centre by about half the label - so it could never line up with centred
     boxes below it, whatever the column width.
   WHY THE 2026-10-01 VERSION OF THIS RULE CHANGED NOTHING: StudentAttendance
   (#...TgridStudentAttendance table tr td:nth-child(4)) and MergeSectionsAttendance
   (nth-child(5)) each carried a pre-V2 rule of their own,
   `text-align: right !important`, keyed on the grid's ID. An ID selector outranks
   every class-based rule here, !important or not, so those two pages kept
   right-aligning the Present column. The pages' own rules are removed (comment
   left in each .aspx); this rule only works because they are gone. */
body.fp2 .RadGrid .rgRow > td:has(input[type="checkbox"]),
body.fp2 .RadGrid .rgAltRow > td:has(input[type="checkbox"]) { text-align: center !important; }
body.fp2 .RadGrid .rgHeader > span:has(> input[type="checkbox"]) { display: block; }
/* the maroon/blue action buttons some report pages hard-code */
body.fp2 .btn.btn-primary,
body.fp2 input.btn-primary,
body.fp2 .btn.btn-info { background: var(--fp2-primary) !important; border-color: var(--fp2-primary) !important; color: #fff !important; }

/* C4. MENU LINKS WITH A TITLE THE GENERATOR CANNOT MATCH. A few DB MenuURLs carry
   trailing whitespace, so HeadingOwn stays empty on those pages; the JS then
   promotes the page's own old subheader title into the page head and hides
   the duplicate. */
body.fp2 .content .subheader:not(.fp2-page-head) h5.fp2-promoted { display: none !important; }
body.fp2 .content .subheader:not(.fp2-page-head) .breadcrumb { display: none !important; }

/* C5. REPORT HEADER, second pass (measured live): the pages' own <style>
   blocks re-paint .main_heading blue with !important and colour .side h1, so
   every declaration here carries !important too; and the DOM order is
   side / company / back, so flex order puts the company first. */
body.fp2 .top_1 .main_heading {
    order: 1;
    background: transparent !important;
    background-image: none !important;
    color: var(--fp2-ink) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 auto 0 0 !important;
    float: none !important;
    width: auto !important;
    text-transform: none !important;
    text-align: left !important;
    font-family: var(--fp2-serif) !important;
    font-size: 26px !important;
    font-weight: 500 !important;
}
body.fp2 .top_1 .main_heading p { color: inherit !important; font-family: inherit !important; font-size: inherit !important; }
body.fp2 .top_1 .side { order: 2; }
body.fp2 .top_1 .side h1 { color: var(--fp2-ink-muted) !important; font-family: var(--fp2-sans) !important; }
body.fp2 .top_1 #backtomain { order: 3; }
body.fp2 .top_1 .side td,
body.fp2 .top_1 .side td.small_blue { color: var(--fp2-ink-soft) !important; font-family: var(--fp2-sans) !important; }
body.fp2 .top_1 .side td.small_blue { color: var(--fp2-ink-muted) !important; }

/* C6. GRID ACTION ICONS ARE PNG IMAGES (../Images/Delete.png, Edit.png, View.png
   ...) drawn in the old blue. A filter turns them charcoal so they sit with
   the theme; the images and links are untouched.
   (2026-09-23) edit.png/delete.png/view.png EXCLUDED here now: this filter
   was specifically compensating for their old raw-blue look (client screenshot,
   "why are they grey???" - this rule is why), and images/edit.png,
   images/delete.png, images/view.png are real themed icons now (see the "grid
   action icons" handoff entries) - graying them right back out defeats the
   point. This selector only ever matched plain <img> tags (asp:HyperLink /
   asp:Image ImageUrl="..."), never the GridButtonColumn ImageButton pattern
   (<input type="image">) - MarkingScheme_Search.aspx, where the client saw
   this, uses exactly the <img> form. Left in place for every *other* icon
   still hitting this selector - e.g. images/download.png on
   EDU_EBS_FCT_FinalResult.aspx, still the old style and still wanting the
   charcoal treatment. */
body.fp2 .RadGrid img[src*="/Images/"]:not([src$="edit.png" i]):not([src$="delete.png" i]):not([src$="view.png" i]),
body.fp2 .RadGrid img[src*="/images/"]:not([src$="edit.png" i]):not([src$="delete.png" i]):not([src$="view.png" i]),
body.fp2 .card img[src$=".png"][style*="width:25px"]:not([src$="edit.png" i]):not([src$="delete.png" i]):not([src$="view.png" i]) {
    filter: grayscale(1) brightness(.42) contrast(1.15);
    opacity: .85;
    transition: opacity .15s;
}
body.fp2 .RadGrid a:hover img[src*="/Images/"]:not([src$="edit.png" i]):not([src$="delete.png" i]):not([src$="view.png" i]),
body.fp2 .RadGrid a:hover img[src*="/images/"]:not([src$="edit.png" i]):not([src$="delete.png" i]):not([src$="view.png" i]) { opacity: 1; filter: grayscale(1) brightness(.2); }

/* C7. the print/excel bar on the standalone Award List page has no `ar` attribute */
body.fp2 div.no-print:has(> a > img[src*="print"]) {
    float: none !important;
    width: auto !important;
    padding: 12px 26px 24px !important;
    display: flex;
    align-items: center;
    gap: 14px;
}
body.fp2 div.no-print:has(> a > img[src*="print"]) img { margin: 0 !important; border-radius: 8px; }
body.fp2 div.no-print:has(> a > img[src*="print"]) > div { position: static !important; height: auto !important; margin-left: auto; color: var(--fp2-ink-muted); }

/* C8. report grid header links were near-white: the generated 6g section has
   `body.fp2 .RadGrid th.rgHeader a` (one element more specific than the B5/C3
   rules) painting them paper-coloured for the old blue header. Same
   specificity, later in the file, ink-muted. */
body.fp2 .RadGrid th.rgHeader a,
body.fp2 .RadGrid th.rgHeader a:hover,
body.fp2 .RadGrid th.rgHeader { color: var(--fp2-ink-muted) !important; background: var(--fp2-surface-2) !important; }
body.fp2 .RadGrid th.rgHeader a:hover { color: var(--fp2-ink) !important; }

/* C9. TWO ALERTS AT ONCE (Online Attendance and the 52 other pages with the
   alertWU / alertW pair). The code-behind switches the warning strip on and
   then blanks its text on some paths (the locked-date message is written
   into a separate <h5 id=alertE>), so an empty strip with just an icon and a
   close button sat above the real message. An alert with no text is hidden;
   the moment alertW carries a message it shows again. :has() anchored with a
   child combinator, as the house rule requires. */
body.fp2 .alert.alert-custom:has(> .alert-text:empty) { display: none !important; }

/* C10. METRONIC PILL / LINE TABS (Attendance Report "Student / Faculty
   Attendance", CLO-PLO tabs, the quick panel): nav-light-primary / nav-pills
   and nav-tabs-line paint the active tab Metronic blue (#E1F0FF on #3699FF).
   Re-tinted to the theme: active pill = ember tint on ember-warm text, line
   tabs = ember underline on ink. nav-light-danger keeps a danger tint. */
body.fp2 .nav.nav-pills .nav-link {
    border-radius: 9px;
    color: var(--fp2-ink-soft);
    font-weight: 500;
    transition: background .15s, color .15s;
}
body.fp2 .nav.nav-pills .nav-link:hover:not(.active) { background: var(--fp2-surface-2); color: var(--fp2-ink); }
body.fp2 .nav.nav-pills .nav-link.active,
body.fp2 .nav.nav-pills .show > .nav-link,
body.fp2 .nav.nav-light-primary .nav-link.active,
body.fp2 .nav.nav-light-primary .show > .nav-link,
body.fp2 .nav.nav-primary .nav-link.active {
    background: var(--fp2-accent-tint) !important;
    color: var(--fp2-accent-warm) !important;
}
body.fp2 .nav.nav-light-primary .nav-link:hover:not(.active) { color: var(--fp2-accent-warm) !important; background: var(--fp2-surface-2) !important; }
body.fp2 .nav.nav-pills .nav-link.active .nav-text,
body.fp2 .nav.nav-light-primary .nav-link.active .nav-text,
body.fp2 .nav.nav-light-primary .nav-link:hover .nav-text { color: inherit !important; }
body.fp2 .nav.nav-pills .nav-link.active .nav-icon i,
body.fp2 .nav.nav-light-primary .nav-link.active .nav-icon i,
body.fp2 .nav.nav-light-primary .nav-link.active .svg-icon svg g [fill] { color: var(--fp2-accent-warm) !important; fill: var(--fp2-accent-warm) !important; }
body.fp2 .nav.nav-light-danger .nav-link.active { background: var(--fp2-danger-soft) !important; color: var(--fp2-danger) !important; }
/* underline tabs */
body.fp2 .nav.nav-tabs-line .nav-link { color: var(--fp2-ink-muted); border-bottom: 1px solid transparent; }
body.fp2 .nav.nav-tabs-line .nav-link.active,
body.fp2 .nav.nav-tabs-line .nav-link:hover,
body.fp2 .nav.nav-tabs-line .show > .nav-link { color: var(--fp2-ink) !important; border-bottom-color: var(--fp2-accent) !important; background: transparent !important; }
body.fp2 .nav.nav-tabs-line.nav-tabs-line-3x .nav-link { border-bottom-width: 3px; }

/* C11. THE RadGrid PAGER (measured DOM, Telerik 2014.2 classic):
     tr.rgPager > td > table(caption+thead "Data pager") > td.rgPagerCell
       div.rgWrap.rgArrPart1  input[type=submit].rgPageFirst / .rgPagePrev  (value " ", sprite)
       div.rgWrap.rgNumPart   a.rgCurrentPage > span, a > span ...
       div.rgWrap.rgArrPart2  input.rgPageNext / .rgPageLast
       div.rgWrap.rgAdvPart   span.rgPagerLabel "Page size:" + RadComboBox_Default (46px)
       div.rgWrap.rgInfoPart  "<strong>N</strong> items in <strong>M</strong> pages"
   It rendered as sprite stubs, then "Page size:" on its own line with the
   combo stretched full width (the portal-wide combo rule), then the info.
   Now one flex row: chevron buttons, number pills, a compact page-size combo,
   info pushed right. Inputs cannot carry ::before, so the chevrons are inline
   SVG backgrounds. Telerik marks an inactive arrow with onclick="return false;". */
body.fp2 .RadGrid .rgPager > td { padding: 0 !important; background: var(--fp2-surface-2) !important; border-top: 1px solid var(--fp2-line) !important; }
body.fp2 .RadGrid .rgPager > td > table { width: 100% !important; border: 0 !important; margin: 0 !important; background: transparent !important; }
body.fp2 .RadGrid .rgPager thead,
body.fp2 .RadGrid .rgPager caption { display: none !important; }
body.fp2 .RadGrid td.rgPagerCell {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 9px 14px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 12.5px;
    color: var(--fp2-ink-muted) !important;
}
body.fp2 .RadGrid .rgPager .rgWrap {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: normal !important;
    white-space: nowrap;
}
body.fp2 .RadGrid .rgPager .rgArrPart1 { margin-right: 2px !important; }
body.fp2 .RadGrid .rgPager .rgArrPart2 { margin-left: 2px !important; }
/* the four arrow buttons */
body.fp2 .RadGrid .rgPager input.rgPageFirst,
body.fp2 .RadGrid .rgPager input.rgPagePrev,
body.fp2 .RadGrid .rgPager input.rgPageNext,
body.fp2 .RadGrid .rgPager input.rgPageLast {
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 7px !important;
    background-color: var(--fp2-surface) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
    box-shadow: none !important;
    cursor: pointer;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    vertical-align: middle;
    transition: border-color .15s, background-color .15s;
}
body.fp2 .RadGrid .rgPager input.rgPageFirst { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325231F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 18l-6-6 6-6'/><path d='M19 18l-6-6 6-6'/></svg>") !important; }
body.fp2 .RadGrid .rgPager input.rgPagePrev  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325231F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>") !important; }
body.fp2 .RadGrid .rgPager input.rgPageNext  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325231F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>") !important; }
body.fp2 .RadGrid .rgPager input.rgPageLast  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325231F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 18l6-6-6-6'/><path d='M5 18l6-6-6-6'/></svg>") !important; }
body.fp2 .RadGrid .rgPager input.rgPageFirst:hover,
body.fp2 .RadGrid .rgPager input.rgPagePrev:hover,
body.fp2 .RadGrid .rgPager input.rgPageNext:hover,
body.fp2 .RadGrid .rgPager input.rgPageLast:hover { border-color: var(--fp2-ink-muted) !important; background-color: var(--fp2-surface) !important; }
body.fp2 .RadGrid .rgPager input[onclick="return false;"] { opacity: .55; cursor: default; }
body.fp2 .RadGrid .rgPager input[onclick="return false;"]:hover { border-color: var(--fp2-line) !important; }
/* page numbers */
body.fp2 .RadGrid .rgPager .rgNumPart a,
body.fp2 .RadGrid .rgNumPart a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 28px;
    padding: 0 5px !important;
    margin: 0 2px !important;
    border-radius: 0;
    box-sizing: border-box !important;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fp2-ink-soft) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
/* Telerik boxes the numeral SPAN itself (border + background + padding) -
   that was the half-cut outline around the current page */
body.fp2 .RadGrid .rgNumPart a span,
body.fp2 .RadGrid .rgNumPart a.rgCurrentPage span,
body.fp2 .RadGrid .rgPager .rgNumPart a span {
    color: inherit !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: inline !important;
    line-height: inherit !important;
}
body.fp2 .RadGrid .rgNumPart a:hover { background: transparent !important; color: var(--fp2-ink) !important; box-shadow: inset 0 -2px 0 var(--fp2-line); }
/* current page: ember tint, not a solid charcoal block (client: "the black thing") */
/* current page: bold ink numeral with a short ember underline - no filled block
   (a 28px filled pill read as an orange bar on the live site) */
body.fp2 .RadGrid .rgNumPart a.rgCurrentPage,
body.fp2 .RadGrid .rgNumPart a.rgCurrentPage:hover { background: transparent !important; color: var(--fp2-ink) !important; border: 0 !important; font-weight: 700; box-shadow: inset 0 -2px 0 var(--fp2-accent) !important; }
body.fp2 .RadGrid .rgNumPart a.rgCurrentPage span { color: var(--fp2-ink) !important; }
/* page size */
body.fp2 .RadGrid .rgPager .rgAdvPart { margin-left: 6px !important; gap: 8px; }
body.fp2 .RadGrid .rgPager .rgPagerLabel {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp2-ink-soft) !important;
    margin: 0 !important;
    display: inline !important;
}
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox,
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox_Default {
    display: inline-block !important;
    width: 66px !important;
    height: 30px !important;
    vertical-align: middle;
    margin: 0 !important;
}
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox table,
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox .rcbInput,
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox table td.rcbArrowCell a { height: 28px !important; }
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox .rcbInput { padding: 0 6px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--fp2-ink) !important; text-align: center; }
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox table td.rcbArrowCell,
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox table td.rcbArrowCell a { width: 22px !important; min-width: 22px !important; }
body.fp2 .RadGrid .rgPager .rgAdvPart .RadComboBox table td.rcbArrowCell a::after { right: 7px !important; width: 6px !important; height: 6px !important; }
/* info, pushed to the right */
body.fp2 .RadGrid .rgPager .rgInfoPart {
    margin-left: auto !important;
    font-size: 12.5px;
    color: var(--fp2-ink-soft) !important;
    float: none !important;
}
body.fp2 .RadGrid .rgPager .rgInfoPart strong { color: var(--fp2-ink); font-weight: 600; }
/* the older "page N of M" pager variants (slider / NextPrev only) */
body.fp2 .RadGrid .rgPager .rgPagerButton {
    height: 28px !important; padding: 0 10px !important; border: 1px solid var(--fp2-line) !important; border-radius: 7px !important;
    background: var(--fp2-surface) !important; color: var(--fp2-ink-soft) !important; font-size: 12px !important;
}

/* C12. THE OBE DYNAMIC TABLES - every <table> the code-behinds write into a
   div[id*="_DynamicTable"] wrapper: rptEDU_OBE_ClassRoomCombineResult (#tblCLO),
   rptEDU_OBE_ClassRoomConsolidated (#tblCLO + #tblPLO), rptEDU_OBE_PLOReport (#tblPLO),
   rptEDU_OBE_ResultReport (#tblResultRpt), rptEDU_OBE_Result (no id) and
   rptEDU_OBE_Course_Analysis_Report (five small tables + <h6> headings, no student rows).
   The code-behind emits <table id='tblCLO'> with table-layout:fixed, width:100%,
   a 30% corner cell and ten 5% rowspan cells, so the twelve activity columns
   shared the last 20% (about 19px each) and every label wrapped letter by
   letter. Header cells were 20px Poppins on rgb(53,149,246) blue, sub-header
   text the same blue (inline). Header rows are the rows without a student cell (the
   generators write inline font-weight:100 on every student's first two cells - that
   attribute is the row test, since the header row count differs per generator; tables
   without student rows, like Course Analysis, only get the plain cell + <th> look). Only
   the presentation changes here: auto layout inside a scrolling paper card,
   theme ink and sand, ember accents. The corner cell's inline `!important`
   white/black is left as it is (nothing in a stylesheet can beat it). */
body.fp2 center > h2:empty { display: none !important; }          /* #Recordalert placeholder */
body.fp2 div[id*="_DynamicTable"] {
    /* the wrapper's only class is col-xs-12, which Bootstrap 4 does not define, so
       inside the parent .row (a flex container) it sized to content and the
       excel / print bar slid up beside it (client, 2026-09-16: the buttons sat
       at the right, mid-report). Take the full row so the bar wraps underneath. */
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    margin: 6px 0 14px;
    padding: 0;
    border: 1px solid var(--fp2-line);
    border-radius: 12px;
    background: var(--fp2-surface);
    scrollbar-width: thin;
}
body.fp2 div[id*="_DynamicTable"]:empty { display: none; }
body.fp2 div[id*="_DynamicTable"] > table {
    table-layout: auto !important;
    width: auto !important;
    min-width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    font-family: var(--fp2-sans) !important;
    font-size: 12px !important;
    color: var(--fp2-ink);
    background: transparent;
}
body.fp2 div[id*="_DynamicTable"] > table > tbody > tr > th,
body.fp2 div[id*="_DynamicTable"] > table > tbody > tr > td {
    width: auto !important;
    height: auto !important;
    padding: 7px 10px !important;
    border: 1px solid var(--fp2-line-soft) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--fp2-ink);
    background: transparent;
}
/* row 1: the CLO band */
body.fp2 div[id*="_DynamicTable"] > table > tbody > tr > th.tHeadStyles {
    padding: 10px 14px !important;
    background: var(--fp2-surface-2);
    color: var(--fp2-ink);
    font-family: var(--fp2-sans) !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--fp2-accent) !important;
}
/* every <th>, whatever the generator put on it: the Course Analysis page paints
   th:first-of-type #3699FF !important and inlines Times New Roman 20px */
body.fp2 div[id*="_DynamicTable"] > table > tbody > tr > th {
    background: var(--fp2-surface-2) !important;
    color: var(--fp2-ink) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 14px !important;
}
body.fp2 div[id*="_DynamicTable"] > table > tbody > tr > th[colspan] { text-align: left; }
/* Course Analysis: several tables with <h6> section titles inside one wrapper */
body.fp2 div[id*="_DynamicTable"] > h6 {
    margin: 18px 14px 8px !important;
    font-family: var(--fp2-serif) !important;
    font-size: 16px !important;
    font-weight: 500;
    color: var(--fp2-ink);
}
body.fp2 div[id*="_DynamicTable"] > h6:empty { display: none; }
body.fp2 div[id*="_DynamicTable"] > table + table { border-top: 1px solid var(--fp2-line) !important; }
/* rows 1-5: the header block (activity names, % weight, reg-no / name labels) */
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:not(:has(> td[style*="font-weight:100"])) > td {
    background: var(--fp2-surface-2);
    color: var(--fp2-ink-soft) !important;
    font-weight: 600;
    font-size: 11.5px;
}
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:not(:has(> td[style*="font-weight:100"])) > td[colspan="2"],
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:not(:has(> td[style*="font-weight:100"])):has(+ tr > td[style*="font-weight:100"]) > td:nth-child(-n+2) {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp2-ink-muted) !important;
}
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:not(:has(> td[style*="font-weight:100"])):has(+ tr > td[style*="font-weight:100"]) > td[colspan="2"] { text-align: center; }   /* KPI 50% */
/* the Weighted Total / CLO Achieved cells span the whole header block */
body.fp2 div[id*="_DynamicTable"] > table > tbody > tr > td[rowspan] {
    white-space: normal;
    word-break: keep-all;
    min-width: 72px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fp2-accent-warm) !important;
    background: var(--fp2-accent-tint);
}
/* rows 6+: one per student */
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:has(> td[style*="font-weight:100"]) > td:nth-child(-n+2) {
    text-align: left;
    color: var(--fp2-ink) !important;
    font-size: 12.5px;
}
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:has(> td[style*="font-weight:100"]) > td:nth-child(2) { min-width: 150px; }
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:has(> td[style*="font-weight:100"]) > td { font-variant-numeric: tabular-nums; color: var(--fp2-ink-soft); }
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:has(> td[style*="font-weight:100"]):hover > td { background: var(--fp2-accent-tint); }
/* weighted total: generator writes style=" " (achieved) or style=" color:red;" (not),
   and the Y / N status cell always follows it */
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:has(> td[style*="font-weight:100"]) > td[style=" "] { color: var(--fp2-ink) !important; font-weight: 600; }
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:has(> td[style*="font-weight:100"]) > td[style=" "] + td { color: var(--fp2-success) !important; font-weight: 700; }
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:has(> td[style*="font-weight:100"]) > td[style*="red"] { color: var(--fp2-danger) !important; font-weight: 600; }
body.fp2 div[id*="_DynamicTable"] > table:has(> tbody > tr > td[style*="font-weight:100"]) > tbody > tr:has(> td[style*="font-weight:100"]) > td[style*="red"] + td { color: var(--fp2-danger) !important; font-weight: 700; }
/* the excel / print bar under the table */
body.fp2 div[id$="_divExcel"] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 18px;
    /* its own full row, always BELOW the table (it has no col class either) */
    flex: 0 0 100%;
    width: 100%;
}
body.fp2 div[id$="_divExcel"] input[type="image"],
body.fp2 div[id$="_divExcel"] a > img { display: block; width: 34px !important; height: auto; border-radius: 8px; opacity: .85; transition: opacity .15s; }
body.fp2 div[id$="_divExcel"] input[type="image"]:hover,
body.fp2 div[id$="_divExcel"] a:hover > img { opacity: 1; }
/* the other dynamic-table reports (ClassRoomConsolidated x2, CRC, ResultReport,
   Course_Analysis) keep their export bar OUTSIDE the .row, as a plain
   <div class="hideOnPrint"> holding the excel ImageButton (ResultReport adds
   align="right") or the #DivPrint print link with inline 50px / 100px margins.
   Same look as divExcel for all of them - and no `> td` here, nothing is a grid. */
body.fp2 div.hideOnPrint:has(> input[type="image"][src*="excel"]),
body.fp2 div[id$="_DivPrint"] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 18px;
    margin: 0 !important;
    text-align: left !important;
}
body.fp2 div.hideOnPrint[align="right"]:has(> input[type="image"][src*="excel"]) { justify-content: flex-end; }
body.fp2 div.hideOnPrint:has(> input[type="image"][src*="excel"]) input[type="image"],
body.fp2 div[id$="_DivPrint"] a > img { display: block; width: 34px !important; height: auto; border-radius: 8px; opacity: .85; transition: opacity .15s; }
body.fp2 div.hideOnPrint:has(> input[type="image"][src*="excel"]) input[type="image"]:hover,
body.fp2 div[id$="_DivPrint"] a:hover > img { opacity: 1; }
@media print {
    body.fp2 div[id*="_DynamicTable"] { overflow: visible; border: 0; }
    body.fp2 div[id*="_DynamicTable"] > table > tbody > tr > th,
    body.fp2 div[id*="_DynamicTable"] > table > tbody > tr > td { white-space: normal; }
}

/* C13. THE BLUE LEFT STRIPE ON TEXT BOXES. Five pages (Qualification,
   QualificationAndPublication, MyDetails, Communicator_Message, FacultyMarking)
   carry their own <style> with `.form-control { border-left: 4px solid #3699FF
   !important }` - the old theme's accent stripe - and the client Blue.css has
   the same rule without !important. The page rule (0,1,0 + !important) beat
   the theme's plain border, so text boxes there showed a Metronic-blue edge.
   Scoped to the real inputs: the RadInput / RadPicker wrapper spans and the
   RadComboBox already own their borders with !important rules of their own. */
body.fp2 input.form-control,
body.fp2 textarea.form-control,
body.fp2 select.form-control {
    border-left-width: 1px !important;
    border-left-color: var(--fp2-line) !important;
}
body.fp2 input.form-control:focus,
body.fp2 textarea.form-control:focus,
body.fp2 select.form-control:focus { border-left-color: var(--fp2-accent) !important; }

/* C14. THE LEGACY `btn_theme` BUTTON (the View button on the 16 ReportMaster
   report pages, and one FacultyNewMasterPage page). Blue.css paints it as a
   blue gradient, square, Poppins uppercase, 30px, with !important on every
   declaration - so every declaration here carries !important too. Same look
   as the theme's charcoal primary button (B1). */
body.fp2 .btn_theme,
body.fp2 input.btn_theme,
body.fp2 a.btn_theme {
    display: inline-block;
    background: var(--fp2-primary) !important;
    background-image: none !important;
    border: 1px solid var(--fp2-primary) !important;
    border-radius: 9px !important;
    color: #fff !important;
    font-family: var(--fp2-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    height: 34px !important;
    line-height: 32px !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    margin-right: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
body.fp2 .btn_theme:hover,
body.fp2 .btn_theme:focus {
    background: var(--fp2-primary-soft) !important;
    border-color: var(--fp2-primary-soft) !important;
    color: #fff !important;
    outline: none !important;
}
body.fp2 .btn_theme:disabled,
body.fp2 .btn_theme[disabled] { opacity: .55 !important; cursor: default; }

/* C15. THE PROFILE PAGE (Faculty\EDU_EBS_FCT_Demograph.aspx, the rail's "My
   Profile"). Its markup was rebuilt on the mockup's profile layout - the theme
   file already carries .fp2-profile-layout / .fp2-profile-main / .fp2-big-av /
   .fp2-profile-details / .fp2-detail-row / .fp2-divider from the mockup. These
   are the bits the mockup did inline or did not have: the real photo, the
   upload block under it, editable rows holding the page's own inputs, and the
   Save bar. Every server control kept its ID; only the markup around it moved. */
body.fp2 .fp2-profile-main .fp2-hero-photo {
    display: block;
    width: 100px; height: 100px;
    margin: 0 auto 16px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--fp2-surface-2);
    box-shadow: 0 0 0 1px var(--fp2-line);
}
body.fp2 .fp2-profile-main h2 { color: var(--fp2-ink); font-family: var(--fp2-serif) !important; }
body.fp2 .fp2-profile-main .fp2-id .fp2-mono,
body.fp2 .fp2-detail-row .fp2-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
body.fp2 .fp2-profile-photo {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--fp2-line-soft);
    text-align: left;
}
body.fp2 .fp2-profile-photo .fp2-l,
body.fp2 .fp2-detail-row .fp2-l { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fp2-ink-muted); }
body.fp2 .fp2-profile-photo .fp2-l { margin-bottom: 8px; }
body.fp2 .fp2-profile-photo .RadUpload,
body.fp2 .fp2-profile-photo .RadAsyncUpload { width: 100% !important; }
body.fp2 .fp2-profile-photo .fp2-hint { margin-top: 8px; font-size: 11.5px; color: var(--fp2-ink-muted); }
/* section titles: the theme's global heading rule (body.fp2 h3 -> sans) would win otherwise */
body.fp2 .fp2-profile-details h3.fp2-h3 {
    margin: 0 0 12px;
    font-family: var(--fp2-serif) !important;
    font-weight: 500;
    font-size: 18px;
    color: var(--fp2-ink);
}
body.fp2 .fp2-profile-details .fp2-divider { margin: 18px 0 22px; }
/* rows that hold an input line the label up with the 36px control */
body.fp2 .fp2-detail-row .fp2-v { color: var(--fp2-ink); min-width: 0; }
body.fp2 .fp2-detail-row.fp2-edit { align-items: start; }
body.fp2 .fp2-detail-row.fp2-edit .fp2-l { padding-top: 11px; }
body.fp2 .fp2-detail-row.fp2-edit .fp2-v .form-control,
body.fp2 .fp2-detail-row.fp2-edit .fp2-v .RadComboBox { max-width: 440px; }
body.fp2 .fp2-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--fp2-line-soft);
}
body.fp2 .fp2-profile-layout .alert { margin-bottom: 14px; }
@media (max-width: 640px) {
    body.fp2 .fp2-detail-row { grid-template-columns: 1fr; gap: 4px; }
    body.fp2 .fp2-detail-row.fp2-edit .fp2-l { padding-top: 0; }
}

/* C16. RadAsyncUpload / RadUpload, second pass (measured on the profile page).
   Telerik's Silk skin gives the row (.ruFileWrap / li) a fixed 30px height
   with overflow:hidden, while section 11 above lets the Select button grow to
   33px - so the button's bottom border was clipped. The row now sizes to its
   content and lays out as a flex line: the fake file box and the button share
   the same 34px height and the theme's paper + hairline look. */
body.fp2 .RadUpload .ruInputs,
body.fp2 .RadUpload .ruInputs > li,
body.fp2 .RadUpload .ruFileWrap {
    height: auto !important;
    line-height: normal !important;
    overflow: visible !important;
}
body.fp2 .RadUpload .ruFileWrap {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100% !important;
}
body.fp2 .RadUpload .ruFakeInput {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    border: 1px solid var(--fp2-line) !important;
    border-radius: 8px !important;
    background: var(--fp2-surface) !important;
    color: var(--fp2-ink) !important;
    font-size: 13px !important;
    box-shadow: none !important;
}
body.fp2 .RadUpload .ruButton {
    flex: 0 0 auto;
    height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 14px !important;
    line-height: 32px !important;
}
body.fp2 .RadUpload .ruFileInput { height: 34px !important; }

/* ==========================================================================
   C17. COMMUNICATOR  -  ported from the Student Portal V2 (its compat sections
   6d .. 6d-9), sp2 -> fp2, class names spc-* kept so the two portals' inbox
   markup stays identical. Covers: the inbox page head + search drawer + split
   list / reading pane, the RadGrid dissolved into the list, the message page
   (body.spcmsg, on NewMessage.master), the compose modal and every compose-form
   fix the Student Portal needed (measured there; read its handoff before
   touching these). The four status-chip tones the list uses come first: the
   Student Portal defines them in its theme file, this one does not.
   ========================================================================== */
body.fp2 .fp2-t-bl { background: var(--fp2-slate-100); color: var(--fp2-slate-600); }
body.fp2 .fp2-t-ok { background: var(--fp2-ok-tint); color: var(--fp2-ok); }
body.fp2 .fp2-t-or { background: var(--fp2-ember-50); color: var(--fp2-ember-600); }
body.fp2 .fp2-t-wn { background: var(--fp2-ember-50); color: var(--fp2-ember-600); }
/* the inbox's message heading: hidden while empty, a strip when the code-behind writes to it */
body.fp2 h5.fp2-comm-alert:empty { display: none; }
body.fp2 h5.fp2-comm-alert { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--fp2-warn-tint); border: 1px solid var(--fp2-border-strong); color: var(--fp2-text); font-size: 13px; font-weight: 500; }

/* ==========================================================================
   6d. COMMUNICATOR INBOX  —  a faithful port of the CMS V2 page

   Source: eDUSMARTZCMSV2\Edusmart\Communicator\Communicator_Message.html +
   Communicator_2026.css. The GEOMETRY is copied class-for-class (380px list,
   the 3-column list row, the badge scale, the bubble thread, the composer) so
   this page reads exactly like the reference; only the COLOURS are remapped
   onto the portal's sp2 tokens, because the rest of the portal is Warm Ink &
   Ember while the CMS sheet is indigo. Token map used throughout:

     CMS                  ->  here
     --primary  #2C5AA0       --fp2-ember-600
     --primary-light          --fp2-ember-500
     #EEF2FF (selected)       --fp2-ember-50
     --g50 / --g100           --fp2-surface-2 / --fp2-sand
     --g200 / --g300          --fp2-border / --fp2-border-strong
     --g400 / --g500          --fp2-faint / --fp2-muted
     --g700 / --g800          --fp2-text / --fp2-ink
     --green / --red          --fp2-ok / --fp2-crit

   Classes are spc- prefixed (student-portal communicator) and mirror the CMS
   names 1:1 - .page-head becomes .spc-page-head, .item becomes .spc-item - so
   the two codebases stay diff-able.
   ========================================================================== */

/* ---------- page head: title, count chip, actions ---------- */
body.fp2 .spc-page-head {
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border);
    border-radius: var(--fp2-r);
    box-shadow: var(--fp2-shadow-sm);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

body.fp2 .spc-page-head .spc-ico {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--fp2-ember-50);
    color: var(--fp2-ember-600);
    border: 1px solid color-mix(in srgb, var(--fp2-ember-500) 26%, transparent);
}

body.fp2 .spc-page-head h2 {
    font-size: 18px;
    color: var(--fp2-ember-600);
    font-weight: 700;
    flex: 1;
    min-width: 0;
    letter-spacing: -.01em;
    margin: 0;
}

body.fp2 .spc-page-head h2 small {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--fp2-muted);
    letter-spacing: 0;
    margin-top: 1px;
}

body.fp2 .spc-chip {
    font-size: 11px;
    background: var(--fp2-ember-50);
    color: var(--fp2-ember-600);
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
    flex: none;
}

/* ---------- buttons (CMS .btn / .btn.primary) ---------- */
body.fp2 .spc-btn,
body.fp2 a.spc-btn,
body.fp2 input.spc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--fp2-border-strong);
    background: var(--fp2-surface);
    color: var(--fp2-text);
    font-family: var(--fp2-sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s, filter .15s, transform .15s;
}

body.fp2 .spc-btn:hover,
body.fp2 a.spc-btn:hover,
body.fp2 input.spc-btn:hover {
    border-color: var(--fp2-ember-500);
    color: var(--fp2-ember-600);
}

body.fp2 .spc-btn.spc-primary,
body.fp2 a.spc-btn.spc-primary,
body.fp2 input.spc-btn.spc-primary {
    border: 0;
    background: var(--fp2-grad);
    color: #fff !important;
    box-shadow: var(--fp2-shadow-ember);
}

body.fp2 .spc-btn.spc-primary:hover,
body.fp2 a.spc-btn.spc-primary:hover,
body.fp2 input.spc-btn.spc-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff !important;
}

/* ---------- search drawer
     NOT in the CMS reference - that mockup has filter pills only. This portal's
     search is real functionality, so it lives in a drawer that starts CLOSED and
     is opened from the head. It is rendered with an inline display:none so it can
     never flash open if jQuery is slow or missing. ---------- */
body.fp2 .spc-search {
    border-top: 1px solid var(--fp2-border);
    background: var(--fp2-surface-2);
    margin: 14px -18px -14px;
    padding: 14px 18px 16px;
    border-radius: 0 0 var(--fp2-r) var(--fp2-r);
    flex: 1 0 100%;
}

body.fp2 .spc-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 11px 16px;
}

body.fp2 .spc-search .spc-f { min-width: 0; }

body.fp2 .spc-search .spc-f > label,
body.fp2 .spc-search .spc-f > label label {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fp2-muted);
    margin: 0 0 5px;
}

body.fp2 .spc-search .spc-wide { grid-column: 1 / -1; }

body.fp2 .spc-search-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 13px;
}

/* ---------- the split (CMS .inbox-split) ---------- */
body.fp2 .spc-split {
    display: grid;
    grid-template-columns: 380px 1fr;
    height: 740px;
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border);
    border-radius: var(--fp2-r);
    overflow: hidden;
    box-shadow: var(--fp2-shadow-sm);
}

@media (max-width: 1100px) {
    body.fp2 .spc-split { grid-template-columns: 1fr; height: auto; }
    body.fp2 .spc-listpanel { max-height: 420px; }
    body.fp2 .spc-conv { min-height: 620px; }
}

/* ---------- list panel ---------- */
body.fp2 .spc-listpanel {
    border-right: 1px solid var(--fp2-border);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.fp2 .spc-listpanel .spc-h {
    padding: 12px 14px;
    border-bottom: 1px solid var(--fp2-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
}

body.fp2 .spc-listpanel .spc-h b { font-size: 13px; color: var(--fp2-ink); font-weight: 700; }
body.fp2 .spc-listpanel .spc-h span { font-size: 11px; color: var(--fp2-muted); }

body.fp2 .spc-filterbar {
    padding: 10px 14px;
    border-bottom: 1px solid var(--fp2-border);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--fp2-surface-2);
    flex: none;
}

body.fp2 .spc-pill {
    font-size: 11px;
    background: var(--fp2-surface);
    color: var(--fp2-text);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--fp2-border);
    cursor: pointer;
    font-weight: 500;
    user-select: none;
    transition: background .15s, color .15s, border-color .15s;
    /* pills are asp:LinkButton now (real postback, see the search page's
       PillXClick handlers) - an <a>, not a <button>, so the anchor defaults
       need resetting the same way the CMS reference's own .cm-pill does */
    display: inline-block;
    text-decoration: none !important;
}

body.fp2 .spc-pill:hover,
body.fp2 .spc-pill:focus,
body.fp2 .spc-pill:active,
body.fp2 .spc-pill:visited {
    border-color: var(--fp2-border-strong);
    color: var(--fp2-text);
    text-decoration: none !important;
}

body.fp2 .spc-pill.spc-on,
body.fp2 .spc-pill.spc-on:hover,
body.fp2 .spc-pill.spc-on:visited {
    background: var(--fp2-ember-600);
    color: #fff;
    border-color: var(--fp2-ember-600);
}

body.fp2 .spc-items { flex: 1; overflow: auto; scrollbar-width: thin; min-height: 0; }

/* ---------- a list row (CMS .item: 40px | 1fr | auto) ---------- */
body.fp2 .spc-item {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    cursor: pointer;
    align-items: start;
}

body.fp2 .spc-item .spc-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fp2-sand);
    color: var(--fp2-ember-600);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--fp2-serif);
}

body.fp2 .spc-item .spc-who { font-weight: 600; color: var(--fp2-ink); font-size: 13px; }
body.fp2 .spc-item .spc-sub { color: var(--fp2-text); font-size: 13px; margin-top: 2px; font-weight: 500; }

body.fp2 .spc-item .spc-pre {
    color: var(--fp2-muted);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

body.fp2 .spc-item .spc-tags { margin-top: 4px; display: flex; gap: 5px; flex-wrap: wrap; }

body.fp2 .spc-item .spc-right {
    font-size: 11px;
    color: var(--fp2-faint);
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
}

/* ---------- badges (CMS .b scale) ---------- */
body.fp2 .spc-b {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-block;
}

body.fp2 .spc-b.spc-type { background: var(--fp2-slate-100); color: var(--fp2-slate-600); }
body.fp2 .spc-b.spc-cat { background: var(--fp2-surface-2); color: var(--fp2-muted); }
body.fp2 .spc-b.spc-ok { background: var(--fp2-ok-tint); color: var(--fp2-ok); }
body.fp2 .spc-b.spc-warn { background: var(--fp2-ember-50); color: var(--fp2-ember-700); }
body.fp2 .spc-b.spc-bad { background: var(--fp2-crit-tint); color: var(--fp2-crit); }
body.fp2 .spc-b.spc-gray { background: var(--fp2-sand); color: var(--fp2-muted); }

body.fp2 .spc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fp2-ember-500);
    display: inline-block;
}

/* ---------- empty state (CMS .empty) ---------- */
body.fp2 .spc-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--fp2-faint);
    font-size: 12.5px;
    font-weight: 600;
}

body.fp2 .spc-empty .spc-eico {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 16px;
    background: var(--fp2-surface-2);
    border: 1px solid var(--fp2-border);
    color: var(--fp2-border-strong);
}

body.fp2 .spc-empty p { margin: 4px auto 0; max-width: 260px; font-weight: 500; color: var(--fp2-muted); }

/* ---------- conversation pane ---------- */
body.fp2 .spc-conv { display: flex; flex-direction: column; min-width: 0; background: var(--fp2-surface); }

body.fp2 .spc-conv .spc-frame {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    display: block;
    background: var(--fp2-surface);
}


/* ==========================================================================
   6d-2. THE RADGRID, DISSOLVED INTO THE CMS LIST
   The left pane IS grdMessage, so its table chrome has to go. Every cell rule
   uses a CHILD combinator - Telerik nests its own tables inside cells, and a
   descendant cell selector steals their padding (this bit the Admission Portal).
   ========================================================================== */
body.fp2 .spc-items .RadGrid,
body.fp2 .spc-items .RadGrid_Default {
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    font-family: var(--fp2-sans) !important;
}

body.fp2 .spc-items .RadGrid .rgMasterTable {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
}

/* the header row says nothing the .spc-h line above it does not already say */
body.fp2 .spc-items .RadGrid thead,
body.fp2 .spc-items .RadGrid .rgHeader,
body.fp2 .spc-items .RadGrid .rgHeaderDiv,
body.fp2 .spc-items .RadGrid .rgCommandRow { display: none !important; }

body.fp2 .spc-items .RadGrid .rgRow > td,
body.fp2 .spc-items .RadGrid .rgAltRow > td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fp2-border) !important;
    padding: 0 !important;
    text-align: left !important;
    vertical-align: top;
}

body.fp2 .spc-items .RadGrid .rgRow:hover > td,
body.fp2 .spc-items .RadGrid .rgAltRow:hover > td { background: var(--fp2-surface-2) !important; }

body.fp2 .spc-items .RadGrid .rgSelectedRow > td {
    background: var(--fp2-ember-50) !important;
    box-shadow: inset 3px 0 0 var(--fp2-ember-600);
}

body.fp2 .spc-items .RadGrid .rgNoRecords > td,
body.fp2 .spc-items .RadGrid .rgNoRecords {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.fp2 .spc-items .RadGrid .rgPager > td,
body.fp2 .spc-items .RadGrid .rgPagerCell {
    background: var(--fp2-surface-2) !important;
    border: 0 !important;
    border-top: 1px solid var(--fp2-border) !important;
    padding: 7px 10px !important;
    color: var(--fp2-muted) !important;
}

body.fp2 .spc-items .RadGrid .rgNumPart a { color: var(--fp2-muted) !important; border-radius: 6px; }

body.fp2 .spc-items .RadGrid .rgNumPart a.rgCurrentPage,
body.fp2 .spc-items .RadGrid .rgNumPart a:hover {
    background: var(--fp2-ember-50) !important;
    color: var(--fp2-ember-600) !important;
}


/* ==========================================================================
   6d-3. THE MESSAGE PAGE  (the iframe's content, on NewMessage.master)
   The CMS conversation pane: bubble thread + composer. Everything is scoped
   body.spcmsg so it can only ever touch that one page.
   ========================================================================== */
body.spcmsg {
    background: var(--fp2-surface);
    margin: 0;
    font-family: var(--fp2-sans);
    color: var(--fp2-text);
    font-size: 13px;
}

body.spcmsg .spc-mhead {
    padding: 14px 18px;
    border-bottom: 1px solid var(--fp2-border);
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    background: var(--fp2-surface);
    z-index: 3;
}

body.spcmsg .spc-mhead .spc-av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--fp2-grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--fp2-serif);
    flex: none;
}

body.spcmsg .spc-mhead .spc-title {
    font-weight: 700;
    color: var(--fp2-ink);
    font-size: 15px;
    overflow-wrap: anywhere;
}

body.spcmsg .spc-mhead .spc-meta { font-size: 12px; color: var(--fp2-muted); margin-top: 1px; }
body.spcmsg .spc-mhead .spc-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }

/* the thread */
body.spcmsg .ChatHistory_ScrollStyle,
body.spcmsg [id$="chatHistory"] {
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px !important;
    width: auto !important;
    float: none !important;
}

body.spcmsg .spc-bubble {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--fp2-border);
    background: var(--fp2-surface);
    font-size: 13px;
    max-width: 80%;
    box-shadow: var(--fp2-shadow-sm);
    width: auto !important;
    float: none !important;
}

body.spcmsg .spc-bubble.spc-out {
    background: var(--fp2-ember-50);
    border-color: color-mix(in srgb, var(--fp2-ember-500) 26%, transparent);
    align-self: flex-end;
}

body.spcmsg .spc-bubble .spc-mrow { font-size: 11px; color: var(--fp2-muted); margin-bottom: 4px; }
body.spcmsg .spc-bubble .spc-mrow strong { color: var(--fp2-ink); font-weight: 700; }
body.spcmsg .spc-bubble .spc-mtext { white-space: pre-wrap; overflow-wrap: anywhere; }

body.spcmsg .spc-attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: var(--fp2-sand);
    border: 1px dashed var(--fp2-border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 11px;
    color: var(--fp2-text);
    margin-top: 9px;
}

body.spcmsg .spc-attach a { color: var(--fp2-ember-600) !important; font-weight: 600; padding: 0 !important; }

body.spcmsg .spc-closed-banner {
    margin: 14px 18px 0;
    padding: 9px 13px;
    border-radius: var(--fp2-r-sm);
    background: var(--fp2-ok-tint);
    border: 1px solid color-mix(in srgb, var(--fp2-ok) 26%, transparent);
    color: var(--fp2-ok);
    font-size: 12px;
    font-weight: 700;
}

/* the composer - the legacy form, re-laid-out as a grid */
body.spcmsg [id$="MessageContainer"] {
    border: 1px solid var(--fp2-border) !important;
    border-radius: var(--fp2-r) !important;
    background: var(--fp2-surface-2) !important;
    padding: 16px 18px !important;
    margin: 16px 18px !important;
    width: auto !important;
    float: none !important;
    box-shadow: none;
}

body.spcmsg [id$="MessageContainer"] .form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

body.spcmsg [id$="MessageContainer"] .form > div {
    min-width: 0;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}

/* NO nth-child rule here. It used to say `> div:nth-child(n+3) { grid-column:
   1/-1 }`, which (a) broke the moment RecipientPanel was hidden - every later
   panel slid up a slot and Subject landed in row 1 column 2 - and (b) outranked
   the explicit .spc-fcol / .spc-fwide rules in section 6d-5 on element count, so
   fixing the markup alone would not have helped. Column spans are declared by
   class on each panel now; see 6d-5. */

body.spcmsg [id$="MessageContainer"] label {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fp2-muted);
    margin-bottom: 5px;
}

body.spcmsg [id$="MessageContainer"] br { display: none; }

body.spcmsg .spc-convtools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 18px 0;
    margin: 0;
}

body.spcmsg fieldset { border: 0; margin: 0; padding: 0; }

body.spcmsg legend {
    border: 0;
    margin: 0;
    padding: 14px 18px 0;
    font-family: var(--fp2-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--fp2-ink);
    width: auto;
    line-height: 1.3;
}

body.spcmsg .AlertColor { color: var(--fp2-crit); font-size: 12.5px; font-weight: 600; margin: 14px 18px 0; display: block; }
body.spcmsg .AlertColor:empty { display: none; }



/* ==========================================================================
   6d-4. THE COMPOSE MODAL
   New Message opens as a POPUP over the inbox, exactly like the CMS. Ported
   from the reference's #composeModal (.modal-bg / .modal / .mh / .mb / .mf in
   Communicator_2026.css), with the live CMS's header treatment: orange icon
   tile, title over a one-line subtitle, round close button.

   Geometry copied verbatim: 720px wide, max 94vw / 90vh, 16px radius, the body
   scrolls. Only the colours are remapped to sp2 tokens.

   The modal BODY is an iframe pointing at the existing compose page
   (EDU_EBS_STU_Communicator_Message.aspx?Action=Initiate). That is deliberate:
   the send / validate / attachment logic on that page is untouched, and its own
   Send / Discard row acts as the modal footer, so there is no second code path
   for sending a message.
   ========================================================================== */
body.fp2 .spc-modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(36, 31, 24, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 20px;
}

body.fp2 .spc-modal-bg.spc-show { display: flex; }

body.fp2 .spc-modal {
    background: var(--fp2-surface);
    border-radius: 16px;
    width: 720px;
    max-width: 94vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 30px 70px -25px rgba(36, 31, 24, .55);
    display: flex;
    flex-direction: column;
    animation: fp2fadeUp .22s cubic-bezier(.2, .7, .3, 1) both;
}

body.fp2 .spc-modal .spc-mh {
    padding: 16px 20px;
    border-bottom: 1px solid var(--fp2-border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(120deg, var(--fp2-ember-50), var(--fp2-surface) 70%);
    flex: none;
}

body.fp2 .spc-modal .spc-mh .spc-mico {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--fp2-grad);
    color: #fff;
    box-shadow: var(--fp2-shadow-ember);
}

body.fp2 .spc-modal .spc-mh h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fp2-ink);
    margin: 0;
    flex: 1;
    min-width: 0;
}

body.fp2 .spc-modal .spc-mh h3 small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--fp2-muted);
    margin-top: 2px;
}

body.fp2 .spc-modal .spc-closebtn {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border);
    cursor: pointer;
    color: var(--fp2-muted);
    display: grid;
    place-items: center;
    padding: 0;
    transition: border-color .15s, color .15s, background .15s;
}

body.fp2 .spc-modal .spc-closebtn:hover {
    border-color: var(--fp2-crit);
    color: var(--fp2-crit);
    background: var(--fp2-crit-tint);
}

body.fp2 .spc-modal .spc-mb {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--fp2-surface-2);
    display: flex;
}

body.fp2 .spc-modal .spc-mframe {
    width: 100%;
    height: 66vh;
    min-height: 380px;
    border: 0;
    display: block;
    background: var(--fp2-surface-2);
}

/* the compose page fills the modal body: no card chrome of its own, and the
   Send / Discard row pins to the bottom as the modal's footer */
body.spcmsg.spcmsg-compose { background: var(--fp2-surface-2); }

body.spcmsg.spcmsg-compose [id$="MessageContainer"] {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 14px 20px 16px !important;
}

body.spcmsg.spcmsg-compose [id$="ChatContainer"] { display: none !important; }


/* ==========================================================================
   6d-5. THE COMPOSE FORM inside the modal
   Matched field-for-field against the live CMS modal. What was wrong before and
   is fixed here, in the order it was visible:

     1. body was cream - the reference body is WHITE, only the header and footer
        are warm.
     2. the captions are <asp:Label>, i.e. <span>, so every `label` rule missed
        them and they inherited a link colour. They are .spc-lbl now.
     3. Subject sat in row 1 column 2. The grid was positional (nth-child) and
        RecipientPanel is hidden for communication types with preconfigured
        recipients, so everything slid up a slot. The grid is EXPLICIT now
        (.spc-fcol = half width, .spc-fwide = full width).
     4. Subject carried a 5px blue left bar from an inline !important style -
        removed in the markup, since no stylesheet can beat that.
     5. attachments were a bare button - now a dashed drop box with the allowed
        types as a hint underneath.
     6. there was no footer - Send floated in the flow. Cancel + Send now sit in
        a bordered warm bar pinned under the fields.
   ========================================================================== */

/* the modal body is white; the warmth belongs to the header and footer only */
body.fp2 .spc-modal .spc-mb { background: var(--fp2-surface); }
body.fp2 .spc-modal .spc-mframe { background: var(--fp2-surface); }

/* a thin ember rule along the top of the dialog, as in the reference */
body.fp2 .spc-modal { border-top: 3px solid var(--fp2-ember-500); }

body.spcmsg.spcmsg-compose { background: var(--fp2-surface); }

/* ---------- the field grid ---------- */
body.spcmsg.spcmsg-compose [id$="MessageContainer"] .form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    align-items: start;
}

body.spcmsg [id$="MessageContainer"] .form > .spc-fcol { grid-column: auto; }
body.spcmsg [id$="MessageContainer"] .form > .spc-fwide { grid-column: 1 / -1; }

/* the legacy bootstrap column classes must not fight the grid */
body.spcmsg [id$="MessageContainer"] .form > div {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

/* ---------- captions: small-caps, grey, above the control ---------- */
body.spcmsg .spc-lbl {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp2-muted);
    margin: 0 0 6px;
    line-height: 1.3;
}

/* ---------- controls ---------- */
body.spcmsg [id$="MessageContainer"] .form input.form-control,
body.spcmsg [id$="MessageContainer"] .form textarea.form-control {
    width: 100% !important;
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border-strong);
    border-radius: 8px;
    color: var(--fp2-text);
    font-family: var(--fp2-sans);
    font-size: 13px;
    box-shadow: none;
    padding: 9px 11px;
    height: 40px;
}

body.spcmsg [id$="MessageContainer"] .form textarea.form-control {
    height: auto;
    min-height: 132px;
    line-height: 1.55;
    resize: vertical;
}

body.spcmsg [id$="MessageContainer"] .form input.form-control:focus,
body.spcmsg [id$="MessageContainer"] .form textarea.form-control:focus {
    border-color: var(--fp2-ember-500);
    box-shadow: 0 0 0 3px var(--fp2-ember-50);
}

/* Telerik combo + token box, to the same 40px / 8px radius as the plain inputs */
body.spcmsg .RadComboBox table td.rcbInputCell,
body.spcmsg .RadComboBox table td.rcbArrowCell {
    background: var(--fp2-surface) !important;
    border: 1px solid var(--fp2-border-strong) !important;
}

body.spcmsg .RadComboBox table td.rcbInputCell { border-right: 0 !important; border-radius: 8px 0 0 8px; }
body.spcmsg .RadComboBox table td.rcbArrowCell { border-left: 0 !important; border-radius: 0 8px 8px 0; }
body.spcmsg .RadComboBox .rcbInput { height: 38px !important; font-size: 13px !important; }

body.spcmsg .RadAutoCompleteBox,
body.spcmsg .racTokenList {
    background: var(--fp2-surface) !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 8px !important;
    min-height: 40px;
    box-shadow: none !important;
}

body.spcmsg .racTokenList .racInput { font-size: 13px !important; color: var(--fp2-text) !important; }

/* ---------- attachments: dashed drop box + hint ---------- */
body.spcmsg .spc-drop {
    border: 1px dashed var(--fp2-border-strong);
    border-radius: 10px;
    background: var(--fp2-surface-2);
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.spcmsg .spc-hint {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    color: var(--fp2-muted);
}

/* the RadAsyncUpload "Select" button is the one ember action in this block */
body.spcmsg .spc-drop .ruButton,
body.spcmsg .spc-drop .ruBrowse {
    background: var(--fp2-grad) !important;
    background-image: var(--fp2-grad) !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #fff !important;
    font-family: var(--fp2-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 30px !important;
    padding: 0 14px !important;
    width: auto !important;
    box-shadow: var(--fp2-shadow-ember);
    cursor: pointer;
}

body.spcmsg .spc-drop .ruFileInput,
body.spcmsg .spc-drop input[type="text"] {
    background: var(--fp2-surface) !important;
    border: 1px solid var(--fp2-border) !important;
    border-radius: 7px !important;
    height: 30px !important;
    font-size: 12px !important;
    padding: 0 9px !important;
}

body.spcmsg .spc-drop .ruFakeInput { border-radius: 7px !important; }
body.spcmsg .spc-drop .RadUpload { width: auto !important; }

/* ---------- footer ---------- */
body.spcmsg .spc-mf {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 4px -20px -16px !important;
    padding: 14px 20px !important;
    border-top: 1px solid var(--fp2-border);
    background: var(--fp2-ember-50);
}

body.spcmsg .spc-mf input.spc-btn { min-width: 96px; }

@media (max-width: 620px) {
    body.spcmsg.spcmsg-compose [id$="MessageContainer"] .form { grid-template-columns: 1fr; }
}


/* ==========================================================================
   6d-6. COMPOSE FORM — width and combo fixes

   TWO defects, both with the same shape: a legacy declaration my earlier rules
   did not actually cancel.

   1. THE FORM ONLY FILLED ~80% OF THE MODAL.
      MessageContainer is class="col-sm-10", and Bootstrap 4 gives that
      `flex: 0 0 83.333%; max-width: 83.333%`. Section 6d-3 set `width: auto
      !important`, which does NOTHING about max-width - so the grid stayed at
      83% and the right of the modal was empty. max-width and flex have to be
      reset too. There are also two empty <div class="col-sm-1"> spacers around
      the container (a hand-made centring hack) that steal another 16%.

   2. THE COMMUNICATION TYPE COMBO HAD A DOUBLE BORDER and a broken arrow.
      Section 6d-5 put the border on the inner td.rcbInputCell / td.rcbArrowCell,
      but the RadComboBox ROOT element carries its own border and background from
      the Metro skin - so you saw a box inside a box, and the skin's arrow sprite
      does not load here. One border on the ROOT, none on the cells, and the
      arrow is drawn in CSS.
   ========================================================================== */

/* ---------- 1. width ---------- */
body.spcmsg [id$="MessageContainer"] {
    max-width: none !important;
    flex: none !important;
}

/* the two empty col-sm-1 spacers around the container are dead weight here */
body.spcmsg .card-body > .col-sm-1:empty { display: none !important; }

/* ---------- 2. the Telerik combo: ONE border, on the root ---------- */
body.spcmsg [id$="MessageContainer"] .RadComboBox {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    background: var(--fp2-surface) !important;
    background-image: none !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: none !important;
    vertical-align: top;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox table {
    width: 100% !important;
    height: 38px !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox table td.rcbInputCell,
body.spcmsg [id$="MessageContainer"] .RadComboBox table td.rcbArrowCell {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: 38px !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbInput {
    height: 38px !important;
    line-height: 38px !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 11px !important;
    margin: 0 !important;
    font-family: var(--fp2-sans) !important;
    font-size: 13px !important;
    color: var(--fp2-text) !important;
    box-shadow: none !important;
}

/* the skin's arrow sprite is not available here - draw a chevron instead */
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCell {
    width: 32px !important;
    position: relative;
    font-size: 0 !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCell * {
    background-image: none !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    width: 100% !important;
    height: 38px !important;
    border: 0 !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCell::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--fp2-muted);
    border-bottom: 2px solid var(--fp2-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox.rcbFocused,
body.spcmsg [id$="MessageContainer"] .RadComboBox.RadComboBox_Focused {
    border-color: var(--fp2-ember-500) !important;
    box-shadow: 0 0 0 3px var(--fp2-ember-50) !important;
}

/* ---------- the token box (To / Recipient) to the same shape ---------- */
body.spcmsg [id$="MessageContainer"] .RadAutoCompleteBox {
    display: block !important;
    width: 100% !important;
    min-height: 40px !important;
    background: var(--fp2-surface) !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.spcmsg [id$="MessageContainer"] .RadAutoCompleteBox .racTokenList {
    border: 0 !important;
    background: transparent !important;
    min-height: 38px !important;
    padding: 3px 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

body.spcmsg [id$="MessageContainer"] .RadAutoCompleteBox .racInput {
    border: 0 !important;
    background: transparent !important;
    height: 30px !important;
    font-family: var(--fp2-sans) !important;
    font-size: 13px !important;
    color: var(--fp2-text) !important;
    box-shadow: none !important;
}

body.spcmsg [id$="MessageContainer"] .RadAutoCompleteBox .racToken {
    background: var(--fp2-ember-50) !important;
    border: 1px solid color-mix(in srgb, var(--fp2-ember-500) 30%, transparent) !important;
    border-radius: 999px !important;
    color: var(--fp2-ember-700) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

/* ---------- breathing room between the caption rows ---------- */
body.spcmsg.spcmsg-compose [id$="MessageContainer"] .form { gap: 16px 18px; }
body.spcmsg [id$="MessageContainer"] .form > div > br { display: none !important; }

/* ==========================================================================
   6d-7. COMPOSE FORM — three residual fixes, each found by measuring
   ==========================================================================
   1. THE FORM STILL SAT 85px NARROWER THAN THE MODAL (asymmetrically: 35px left,
      50px right). 6d-6 killed col-sm-10's max-width, but the ANCESTOR .card-body
      keeps its own padding and the container its gutter margin. Both zeroed here,
      so the only inset left is the container's own 20px.

   2. THE FORM BACKGROUND WAS PAPER, NOT WHITE. Section 1 sets
      `body.fp2 { background-color: var(--fp2-paper) !important }` - the compose
      override had no !important and lost. The reference body is white.

   3. THE FOOTER LOST ITS PADDING (35px tall instead of ~63). 6d-5 styles
      `.spc-mf`, but `[id$="MessageContainer"] .form > div { padding: 0
      !important }` from 6d-5 is MORE specific and won. The footer rule now
      matches through the same chain so it outranks it.
   ========================================================================== */
body.spcmsg.spcmsg-compose { background: var(--fp2-surface) !important; }

body.spcmsg.spcmsg-compose .card-body {
    padding: 0 !important;
    margin: 0 !important;
}

body.spcmsg.spcmsg-compose [id$="MessageContainer"] {
    margin: 0 !important;
    width: auto !important;
}

body.spcmsg [id$="MessageContainer"] .form > .spc-mf {
    padding: 14px 20px !important;
    margin: 6px -20px -16px !important;
    border-top: 1px solid var(--fp2-border);
    background: var(--fp2-ember-50);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* --- 4. the attachment "Select" button lost its ember fill --------------------
   Section 11 (Telerik) has `body.fp2 .RadUpload .ruButton { background-image:
   none !important }` at EQUAL specificity to the 6d-5 rule but LATER in the
   file, so it won. Re-asserted here, at the end of the sheet and with the
   RadUpload class in the chain, so nothing downstream can take it again. */
body.spcmsg .spc-drop .RadUpload .ruButton,
body.spcmsg .spc-drop .RadUpload .ruBrowse,
body.spcmsg .spc-drop .RadAsyncUpload .ruButton,
body.spcmsg .spc-drop .RadAsyncUpload .ruBrowse {
    background: var(--fp2-grad) !important;
    background-image: linear-gradient(135deg, var(--fp2-ember-400), var(--fp2-ember-600) 92%) !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #fff !important;
    font-family: var(--fp2-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 14px !important;
    width: auto !important;
    text-align: center;
    box-shadow: var(--fp2-shadow-ember) !important;
    cursor: pointer;
}


/* ==========================================================================
   6d-8. COMPOSE FORM — the combo's input and its dropdown

   1. THE INPUT WAS A ~38px BOX at the left of a 331px field. Telerik's client
      script writes pixel widths onto the classic combo's cells at runtime, and
      the input cell then shrank to its content. Fixed deterministically:
      table-layout:fixed + the arrow cell pinned at 32px, so the input cell can
      only be "everything else". (This did NOT show in the static harness -
      there was no Telerik JS there to set the inline widths. Worth remembering:
      the harness cannot reproduce anything Telerik does at runtime.)

   2. THE DROPDOWN WAS AN UNSTYLED 150px-TALL WHITE BOX that covered Subject and
      Message. Its height is the combo's Height="150" property written inline on
      .rcbScroll, so it stays 150px tall for a single item; height:auto lets it
      shrink to its content. It also renders into the IFRAME's body, which is why
      it is scoped body.spcmsg here and not on the parent page.
   ========================================================================== */

/* ---------- 1. the combo is ONE field, with nothing nested inside it ----------

   Ported from the CMS reference's own recipe for this same control and this same
   Telerik version - Content/GeneralSearch.css, ".rgEditRow td .RadComboBox ...".
   The five things that actually matter, all of which I had missed:

     a) display:block + overflow:hidden on the ROOT   -> clips the inner box, so
        nothing can ever escape as a second border
     b) border-collapse:collapse on the table         -> Telerik writes
        border-collapse:separate INLINE, which leaves gaps that read as a frame
     c) background-image:none on cells/input/arrow    -> every skin paints sprites
        there; that is the shading that looked like a nested field
     d) border:none on .rcbInput                      -> THE dark inner box
     e) .rcbArrowCell a span { display:none } + a CSS chevron on a::after
                                                      -> the sprite span was the
        stray artifact at the bottom-left of the field

   Fixed heights on root/table/input as well, so the control cannot grow when
   Telerik's script stamps its own pixel sizes on after load.
   -------------------------------------------------------------------------- */
body.spcmsg [id$="MessageContainer"] .RadComboBox {
    display: block !important;
    position: relative !important;   /* anchor for the Lightweight arrow button */
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 9px !important;
    background: var(--fp2-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    font-family: var(--fp2-sans) !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox table,
body.spcmsg [id$="MessageContainer"] .RadComboBox table.rcbFocused,
body.spcmsg [id$="MessageContainer"] .RadComboBox table.rcbHovered {
    width: 100% !important;
    height: 38px !important;
    table-layout: fixed !important;
    border: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox table td,
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbInputCell,
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbInputCellLeft,
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbInputCellRight {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox input.rcbInput {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    color: var(--fp2-text) !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbEmptyMessage {
    color: var(--fp2-faint) !important;
}

/* the arrow cell: fixed width so the input can only be "everything else" */
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCell,
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCellLeft,
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCellRight {
    position: relative !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    padding: 0 8px 0 0 !important;
}

/* Telerik puts the sprite in a <span> inside the anchor - hide it and draw the
   chevron ourselves, exactly as the reference does */
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCell a span,
body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCell a img {
    display: none !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCell a {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 38px !important;
    background: none !important;
    background-image: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox td.rcbArrowCell a::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 3px !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: -5px !important;
    border-right: 1.6px solid var(--fp2-muted) !important;
    border-bottom: 1.6px solid var(--fp2-muted) !important;
    transform: rotate(45deg) !important;
}

/* ---------- 1b. the LIGHTWEIGHT render (what the control emits now) ----------

   RenderMode="Lightweight" replaces the nested table with

       span.RadComboBox > span.rcbInner > input.rcbInput
                                        + span.rcbActionButton > span.rcbIcon

   so the arrow is a normal element that can be pinned to right:0 of the root.
   No table, no cells, no runtime cell widths - the geometry cannot drift, which
   is the whole point of switching. The classic rules above are kept as a
   fallback in case a page renders this control in Classic mode.
   -------------------------------------------------------------------------- */
body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbInner {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
    /* room for the arrow, so long text never runs under it */
    padding: 0 30px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbActionButton {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 30px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* the sprite icon span - replaced by a CSS chevron, same as the classic arrow */
body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbActionButton .rcbIcon,
body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbActionButtonIcon,
body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbActionButton img {
    display: none !important;
}

body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbActionButton::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 11px !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: -5px !important;
    border-right: 1.6px solid var(--fp2-muted) !important;
    border-bottom: 1.6px solid var(--fp2-muted) !important;
    transform: rotate(45deg) !important;
}

/* Lightweight puts the focus ring on .rcbInner / .rcbFocused, not the root */
body.spcmsg [id$="MessageContainer"] .RadComboBox.rcbFocused,
body.spcmsg [id$="MessageContainer"] .RadComboBox .rcbInner.rcbFocused {
    border-color: var(--fp2-ember-500) !important;
    box-shadow: 0 0 0 3px var(--fp2-ember-50) !important;
}

/* ---------- 2. the dropdown ---------- */
body.spcmsg .RadComboBoxDropDown {
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 36px -14px rgba(60, 44, 28, .3) !important;
    background: var(--fp2-surface) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 13px !important;
    overflow: hidden !important;
    padding: 4px !important;
    height: auto !important;
}

/* Height="150" lands inline on the scroll box; let it shrink to its content */
body.spcmsg .RadComboBoxDropDown .rcbScroll {
    height: auto !important;
    max-height: 230px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
}

body.spcmsg .RadComboBoxDropDown .rcbList {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.spcmsg .RadComboBoxDropDown .rcbList > li {
    padding: 8px 11px !important;
    border-radius: 7px !important;
    color: var(--fp2-text) !important;
    line-height: 1.4 !important;
    border: 0 !important;
    background: transparent !important;
}

/* hover = ember tint, selected = solid ember - the reference's own behaviour
   (cmb.css: .rcbHovered{background:#fff7ed;color:#f58a18} /
   .rcbSelected{background:#f58a18;color:#fff;font-weight:600}) */
body.spcmsg .RadComboBoxDropDown .rcbItem.rcbHovered,
body.spcmsg .RadComboBoxDropDown .rcbList > li.rcbHovered {
    background: var(--fp2-ember-50) !important;
    color: var(--fp2-ember-600) !important;
}

body.spcmsg .RadComboBoxDropDown .rcbItem.rcbSelected,
body.spcmsg .RadComboBoxDropDown .rcbList > li.rcbSelected {
    background: var(--fp2-ember-500) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

body.spcmsg .RadComboBoxDropDown .rcbList > li.rcbLoading,
body.spcmsg .RadComboBoxDropDown .rcbList > li.rcbNoMatches {
    color: var(--fp2-faint) !important;
    font-style: italic;
}

/* ShowMoreResultsBox is now False in the markup, but any other combo on the page
   could still emit this. It has no text unless there really are more results, so
   left visible it is just an empty ~28px band hanging under the last item - which
   is exactly what showed under the single "Test" row. The dropdown scrolls at
   max-height 230px, so the scrollbar already signals overflow. */
body.spcmsg .RadComboBoxDropDown .rcbMoreResults {
    display: none !important;
}

/* the token-box dropdown gets the same treatment */
body.spcmsg .RadAutoCompleteBoxDropDown,
body.spcmsg .racDropDown {
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 36px -14px rgba(60, 44, 28, .3) !important;
    background: var(--fp2-surface) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 13px !important;
    padding: 4px !important;
}

body.spcmsg .racDropDown .racItem,
body.spcmsg .racList > li {
    padding: 8px 11px !important;
    border-radius: 7px !important;
    color: var(--fp2-text) !important;
    border: 0 !important;
}

body.spcmsg .racDropDown .racItemHovered,
body.spcmsg .racList > li.racItemHovered {
    background: var(--fp2-surface-2) !important;
    color: var(--fp2-text) !important;
}

/* (the "Allowed: .jpeg, ..." hint looked ember in the screenshot, but it
   measures rgb(125,115,101) = --fp2-muted from the section-6d-5 rule above.
   No override added - nothing was actually beating it.) */


/* ==========================================================================
   6d-9. COMPOSE FORM - the attachment "Select" button and its dropzone

   The button itself was already sized by 6d-7 (30px, radius 7, ember fill), so
   the problem was never the button - it was everything Telerik wraps around it.
   RadAsyncUpload emits roughly

       div.RadAsyncUpload
         > div.ruFileWrap / div.ruInputs      <- own height + margins
             > input.ruFileInput              <- hidden (HideFileInput="true")
             + span.ruButton.ruBrowse         <- the visible button
         + div.ruFakeInput                    <- filename field
         + ul.ruUploadProgress                <- EMPTY, but still has margins
         + div.ruActions                      <- empty until a file is picked

   The empty <ul> and the wrappers' own box model added phantom height, so the
   flex centring in .spc-drop was centring a box much taller than the button and
   the button sat off-centre against the dashed border.

   So: flatten the chain, collapse anything empty, and let the button be the only
   thing with a size. The selector list also matches the reference's own, which
   targets input[type="button"][value="Select"] as well as .ruButton - some
   render paths emit a real <input> with no .ruButton class
   (CMS Content/GeneralSearch.css, .cm-upload-wrap).
   ========================================================================== */

/* the dropzone: keep the button optically centred, with room for a file row */
body.spcmsg .spc-drop {
    min-height: 58px;
    align-content: center;
}

/* flatten every wrapper Telerik puts between the dropzone and the button */
body.spcmsg .spc-drop .RadAsyncUpload,
body.spcmsg .spc-drop .RadUpload {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: normal !important;
    vertical-align: middle !important;
}

body.spcmsg .spc-drop .ruFileWrap,
body.spcmsg .spc-drop .ruInputs,
body.spcmsg .spc-drop .ruStyled {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    list-style: none !important;
    vertical-align: middle !important;
}

/* .ruDropZone is NOT in the group above on purpose - it is where the regression
   came from. Lightweight RadAsyncUpload paints its own default hint text
   ("Drop files here to upload") inside this element, which was invisible before
   only because Telerik's base skin clips it to a short fixed height. Giving it
   height:auto (as the shared rule above used to, before this split) revealed
   that hint text wrapping over the Select button - the "Drop files / here"
   overlap the user pointed at.

   This project's dropzone already carries its own "ATTACHMENTS" label, a dashed
   border and the "Allowed: ..." line - Telerik's hint is pure redundant chrome
   that is not part of the mockup or the CMS reference. It stays functional
   (EnableDragAndDrop is untouched - dropping a file still works), only the
   caption is suppressed:

     1. clip back to the button's own height (34px) with overflow:hidden, so
        nothing the hint tries to render can push the box taller or spill out
     2. font-size:0 / color:transparent as a second line of defense, in case the
        hint text sits beside the button rather than behind/under it (covers
        both a normal-flow sibling and an absolutely-positioned overlay)

   Neither trick can hide the button itself: the button rule below is a more
   specific selector targeting .ruButton/.ruBrowse directly, and an explicit
   font-size/color declaration on an element always wins over an inherited
   value from an ancestor, regardless of the ancestor's specificity. */
body.spcmsg .spc-drop .ruDropZone {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    vertical-align: middle !important;
}

/* the empty progress list and actions row are pure phantom height until a file
   is actually picked - collapse them, then let them back in when they fill */
body.spcmsg .spc-drop .ruUploadProgress,
body.spcmsg .spc-drop .ruActions {
    display: none !important;
}

body.spcmsg .spc-drop .ruUploadProgress:not(:empty) {
    display: block !important;
    width: 100% !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 12px !important;
    color: var(--fp2-text) !important;
}

body.spcmsg .spc-drop .ruUploadProgress:not(:empty) > li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    border-top: 1px solid var(--fp2-border) !important;
}

/* HideFileInput="true" makes this invisible, not display:none - it is very
   likely the REAL click target, sized and positioned by Telerik's own script to
   sit exactly over the visible "Select" button (the standard accessible
   file-input pattern: a transparent native <input type=file> on top of a styled
   decoy). The previous round pinned this to 1x1px and pointer-events:none to
   stop it claiming layout space - which also stops it from ever being clicked,
   which is why Select silently did nothing afterwards. position:absolute alone
   already takes it out of flow (nothing for it to claim); its size and position
   are left for Telerik to set, and pointer-events is left at its default. */
body.spcmsg .spc-drop .ruFileInput {
    position: absolute !important;
    opacity: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    cursor: pointer !important;
}

/* Once a file is picked, Telerik adds its own "Remove" control - and Telerik
   marks it with the SAME .ruButton class it puts on Select/Browse, only Select
   also carries .ruBrowse. My old selector was bare ".ruButton", so it caught
   Remove too and painted it the identical ember pill - that is why "Remove" and
   "Select" rendered as two copies of the same button stacked on each other
   ("image (70).png" with Remove and Select both overlapping it). Restricted to
   .ruBrowse now; Remove gets its own, deliberately different rule below, and
   position:static kills whatever offset Telerik's skin baked in for its
   original (much smaller) layout. */
body.spcmsg .spc-drop .ruFileWrap,
body.spcmsg .spc-drop .ruInputs {
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
}

body.spcmsg .spc-drop .ruButton:not(.ruBrowse),
body.spcmsg .spc-drop .ruRemove,
body.spcmsg .spc-drop .ruDeleteFile,
body.spcmsg .spc-drop .ruFileWrap a {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 7px !important;
    background: var(--fp2-surface) !important;
    background-image: none !important;
    color: var(--fp2-muted) !important;
    font-family: var(--fp2-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

body.spcmsg .spc-drop .ruButton:not(.ruBrowse):hover,
body.spcmsg .spc-drop .ruRemove:hover,
body.spcmsg .spc-drop .ruDeleteFile:hover {
    border-color: #DC2626 !important;
    color: #DC2626 !important;
}

/* ---------- the "Select" button, final word ---------- */
body.spcmsg .spc-drop .ruButton.ruBrowse,
body.spcmsg .spc-drop .ruBrowse,
body.spcmsg .spc-drop .RadAsyncUpload .ruButton.ruBrowse,
body.spcmsg .spc-drop .RadAsyncUpload .ruBrowse,
body.spcmsg .spc-drop .RadUpload .ruButton.ruBrowse,
body.spcmsg .spc-drop .RadUpload .ruBrowse,
body.spcmsg .spc-drop input[type="button"][value="Select"],
body.spcmsg .spc-drop input[type="button"][value="Upload"],
body.spcmsg .spc-drop input[type="submit"][value="Select"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 92px !important;
    height: 34px !important;
    /* inline-flex centres the label, so no line-height crutch */
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--fp2-grad) !important;
    background-image: linear-gradient(135deg, var(--fp2-ember-400), var(--fp2-ember-600) 92%) !important;
    color: #fff !important;
    font-family: var(--fp2-sans) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 2px 7px -1px rgba(242, 106, 27, .38) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: box-shadow .16s ease, transform .16s ease, filter .16s ease;
}

body.spcmsg .spc-drop .ruButton.ruBrowse:hover,
body.spcmsg .spc-drop .ruBrowse:hover,
body.spcmsg .spc-drop .RadAsyncUpload .ruButton.ruBrowse:hover,
body.spcmsg .spc-drop .RadUpload .ruButton.ruBrowse:hover,
body.spcmsg .spc-drop input[type="button"][value="Select"]:hover {
    filter: brightness(1.05) !important;
    box-shadow: 0 5px 14px -3px rgba(242, 106, 27, .48) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

body.spcmsg .spc-drop .ruButton.ruBrowse:active,
body.spcmsg .spc-drop .ruBrowse:active,
body.spcmsg .spc-drop .RadAsyncUpload .ruButton.ruBrowse:active,
body.spcmsg .spc-drop input[type="button"][value="Select"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px -1px rgba(242, 106, 27, .4) !important;
}

/* the filename field, once a file has been chosen */
body.spcmsg .spc-drop .ruFakeInput {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--fp2-border) !important;
    border-radius: 8px !important;
    background: var(--fp2-surface) !important;
    color: var(--fp2-text) !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

@media (prefers-reduced-motion: reduce) {
    body.spcmsg .spc-drop .ruButton,
    body.spcmsg .spc-drop .ruBrowse,
    body.spcmsg .spc-drop input[type="button"][value="Select"] {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   C18.    ONLINE SURVEY VIEW  (Faculty/EDU_EBS_FCT_SurveyView.aspx on
   MasterPages/SurveyResponseMasterPage.master)
   The only page on that master, so everything here is scoped to the
   master's own wrapper class .suveypage (historical typo - keep as-is).
   The page's former inline style block was moved here in full; the legacy
   skin css/SurveyMaroon.css stays loaded for structure (fixed .domainDiv
   rail, floats) and is overpowered per-property below - it uses !important
   on its colors, so several overrides here must too.
   Layout: paper ground, espresso left rail (domain tabs), one white sheet
   (.quesdiv) for the header + questions. Question chips are ink pills; the
   page JS marks unanswered ones with .svy-missed (a class contract with
   EDU_EBS_FCT_SurveyView.aspx - it used to write inline blue/red colors).
   The old red marquee is wrapped by the code-behind in .fp2-svy-note, a
   dashboard-ticker-style strip (label + live dot + the scrolling marquee,
   id topMarquee kept). */

/* --- canvas ------------------------------------------------------------- */
body.fp2 .suveypage { background: var(--fp2-paper); font-family: var(--fp2-sans); }
body.fp2 .page-wrapper.suveypage { min-height: 100vh; }
body.fp2 .suveypage .content.exam { background: transparent !important; }
body.fp2 .suveypage .shadow { box-shadow: none !important; }

/* --- domain strip (client 27 Aug: no sidebar - the fixed rail was mostly
       empty; the domains render instead as horizontal pills above the sheet.
       SurveyMaroon's .domainDiv is position:fixed 247px - undone here) ---- */
body.fp2 .suveypage .domainDiv {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    box-shadow: none;
    z-index: auto;
    overflow: visible;
    font-family: var(--fp2-sans);
    margin: 18px 24px 0;
    padding: 0;
}

body.fp2 .suveypage .domainDiv .header { height: auto; min-height: 0; margin: 0; padding: 0; }
body.fp2 .suveypage .examcountdown { margin: 0 0 8px; }

/* countdown plugin chrome (only shows when the survey has a duration) */
body.fp2 .suveypage .colorDefinition {
    background: var(--fp2-surface) !important;
    color: var(--fp2-ink) !important;
    border-color: var(--fp2-border-strong) !important;
    border-radius: 8px !important;
    font-family: var(--fp2-sans) !important;
    padding: 8px 10px;
}

/* the WELCOME name/reg-no block belonged to the removed rail - hidden, the
   control itself stays alive for the code-behind */
body.fp2 .suveypage .hdAppInfo { display: none; }

body.fp2 .suveypage .domainDiv .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

body.fp2 .suveypage .tabs-left > li,
body.fp2 .suveypage .tabs-right > li { float: none; margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: 400; }

body.fp2 .suveypage .domainDiv .nav > li > a {
    display: block;
    margin: 0 !important;
    padding: 8px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fp2-muted) !important;
    background: var(--fp2-surface) !important;
    border: 1px solid var(--fp2-border) !important;
    border-radius: 999px;
    cursor: pointer !important;
    transition: background .15s ease, color .15s ease;
}

body.fp2 .suveypage .domainDiv .nav > li > a:hover,
body.fp2 .suveypage .domainDiv .nav > li > a:focus {
    background: var(--fp2-surface-2) !important;
    color: var(--fp2-ink) !important;
}

body.fp2 .suveypage .domainDiv .tabs-left > li.active > a,
body.fp2 .suveypage .domainDiv .tabs-left > li.active > a:hover,
body.fp2 .suveypage .domainDiv .tabs-left > li.active > a:focus {
    background: var(--fp2-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    border-radius: 999px;
    box-shadow: var(--fp2-shadow-ember);
}

/* --- the white sheet ----------------------------------------------------- */
body.fp2 .suveypage .quesdiv {
    margin: 14px 24px 44px !important;
    width: auto !important;
    min-width: 0 !important;
    float: none;
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border);
    border-radius: var(--fp2-r);
    box-shadow: var(--fp2-shadow-sm);
    padding: 26px 30px 30px;
    overflow: hidden; /* contains the legacy floated col-* children */
}

body.fp2 .suveypage .alertColor {
    color: var(--fp2-crit) !important;
    font-family: var(--fp2-serif);
    font-size: 20px;
    margin: 40px auto 10px !important;
    text-align: center;
    float: none;
}

/* header: eyebrows (term, institution) + serif survey title. The survey
   title <b> is the only header <b> carrying an inline style attribute -
   that is the hook, so !important is needed to beat its inline font-size. */
body.fp2 .suveypage .quesdiv .col-lg-4 b {
    font-family: var(--fp2-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fp2-muted);
}

body.fp2 .suveypage .quesdiv .col-lg-4 b[style] {
    font-family: var(--fp2-serif) !important;
    font-size: 26px !important;
    font-weight: 700;
    letter-spacing: -.015em;
    text-transform: none;
    color: var(--fp2-ink);
    display: inline-block;
    margin-top: 6px;
    line-height: 1.15;
}

/* description row (DB HTML, often empty) */
body.fp2 .suveypage .quesdiv > .col-lg-12.row { color: var(--fp2-muted); font-size: 13px; }

/* the Faculty | Course line is the one direct-child .col-lg-12 with an
   inline style attribute (font-size 18px) - quiet it down */
body.fp2 .suveypage .quesdiv > .col-lg-12[style] {
    font-size: 13px !important;
    color: var(--fp2-muted);
    margin: 2px 0 0 !important;
}

body.fp2 .suveypage .quesdiv > .col-lg-12[style] b { color: var(--fp2-ink); font-weight: 600; font-size: 13px; }

/* --- the note ticker (label + live dot + the old marquee, restyled) ------ */
body.fp2 .suveypage .fp2-svy-note {
    display: flex;
    align-items: center;
    gap: 10px;
    clear: both;
    background: var(--fp2-surface-2);
    border: 1px solid var(--fp2-border);
    border-radius: 999px;
    padding: 7px 16px 7px 12px;
    margin: 16px 0 4px;
    overflow: hidden;
}

body.fp2 .suveypage .fp2-svy-note-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp2-ember-600);
    padding-right: 12px;
    border-right: 1px solid var(--fp2-border);
}

body.fp2 .suveypage .fp2-svy-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fp2-ember-500);
    box-shadow: 0 0 0 0 rgba(242, 106, 27, .5);
    animation: fp2pulse 1.8s ease-out infinite;
}

body.fp2 .suveypage #topMarquee {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    color: var(--fp2-text) !important;
    font-size: 12.5px;
}

body.fp2 .suveypage #topMarquee strong { font-weight: 600; }
body.fp2 .suveypage #topMarquee i { color: var(--fp2-ember-600); font-weight: 700; }

/* --- questions ----------------------------------------------------------- */
body.fp2 .suveypage .tab-pane > table { width: 100% !important; border-collapse: collapse; }

body.fp2 .suveypage .QuestainsNo {
    color: var(--fp2-ink) !important;
    font-size: 15px;
    min-width: 0;
    margin-top: 30px !important;   /* also cancels the generated inline 83px on each pane's first question */
    margin-bottom: 14px !important;
}

/* the generated inner div carries inline border-top:2px solid + padding:0 */
body.fp2 .suveypage .QuestainsNo > div {
    border-top-width: 1px !important;
    border-top-color: var(--fp2-border-strong) !important;
    padding-top: 14px !important;
}

body.fp2 .suveypage .QuestainsNo .quesNoTag {
    background: var(--fp2-ink) !important;
    color: var(--fp2-paper) !important;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    height: auto !important;
    width: auto !important;
    min-width: 0;
    padding: 5px 12px !important;
    border-radius: 999px;
    float: none !important;
    display: inline-block;
    margin-right: 10px;
    vertical-align: 2px;
}

/* set by the page JS on a final-submit attempt with unanswered questions */
body.fp2 .suveypage .QuestainsNo .quesNoTag.svy-missed {
    background: var(--fp2-crit) !important;
    color: #fff !important;
}

body.fp2 .suveypage .QuestainsNo i {
    position: static !important;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--fp2-ink);
}

/* --- answers ------------------------------------------------------------- */
body.fp2 .suveypage .ansMainDiv { margin-left: 6px !important; }

body.fp2 .suveypage .ansDiv {
    float: left;
    width: auto !important;
    margin-top: 3px;
    padding: 2px 34px 2px 0 !important;
}

/* the per-answer letter spans have been empty strings for years - the 27px
   placeholder box is pure dead space now */
body.fp2 .suveypage .ansPoint { display: none !important; }

/* legacy style.css has a global td:first-child { text-transform: uppercase }
   which shouts every answer label (question rows are single-td rows) - give
   answers back their own casing; question text is stored uppercase anyway */
body.fp2 .suveypage .quesdiv td:first-child { text-transform: none; }

body.fp2 .suveypage input[type=radio],
body.fp2 .suveypage input[type=checkbox] {
    height: 26px;
    width: 26px;
    accent-color: var(--fp2-ember-600);
}

body.fp2 .suveypage .text {
    position: relative;
    top: -5px;
    left: 17px;
    font-size: 14px;
    color: var(--fp2-text);
}

body.fp2 .suveypage .form-control {
    background: var(--fp2-surface);
    color: var(--fp2-ink);
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 10px !important;
    font-size: 13px;
}

body.fp2 .suveypage .form-control:focus {
    border-color: var(--fp2-ember-400) !important;
    box-shadow: 0 0 0 3px var(--fp2-ember-50) !important;
}

body.fp2 .suveypage .textarea { height: 160px !important; width: 100%; }
body.fp2 .suveypage .dynamicDropdown { width: 260px !important; max-width: 100%; margin-top: 10px; height: 38px !important; }
body.fp2 .suveypage span.quesPower { vertical-align: super; font-size: 100%; }

/* --- Prev / Next / Submit ------------------------------------------------ */
body.fp2 .suveypage .btn_theme {
    background: var(--fp2-grad) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 9px 22px;
    cursor: pointer;
    box-shadow: var(--fp2-shadow-ember);
    transition: filter .15s ease, transform .15s ease;
}

body.fp2 .suveypage .btn_theme:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.fp2 .suveypage .btn_theme:active { transform: translateY(0); }

/* Prev steps back - quiet secondary, so ember stays on the forward action */
body.fp2 .suveypage input.btn_theme[id^="btnP"] {
    background: var(--fp2-surface) !important;
    color: var(--fp2-ink) !important;
    border: 1px solid var(--fp2-border-strong) !important;
    box-shadow: none;
}

body.fp2 .suveypage input.btn_theme[id^="btnP"]:hover { background: var(--fp2-surface-2) !important; filter: none; }

body.fp2 .suveypage .Answerbtn > input[type=button] {
    margin-top: 26px;
    height: 40px;
    width: auto;
    min-width: 96px;
}

body.fp2 .suveypage #sumbitLoader {
    display: none;
    float: right;
    margin-top: 26px;
    height: 50px;
    width: 167px;
    text-align: center;
    padding-top: 12px;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 10px;
    background: var(--fp2-surface);
}

body.fp2 .suveypage #loadingCont { display: none; transition: all .2s ease; }

/* footer note row (sits inside .tab-content, after the last pane) */
body.fp2 .suveypage .tab-content > .col-lg-12.row { color: var(--fp2-muted); font-size: 12px; margin-top: 10px; }

/* --- postback / ajax progress -------------------------------------------- */
body.fp2 .suveypage .load_background { background: rgba(36, 31, 24, .16); }

body.fp2 .suveypage .progress_container {
    border: 1px solid var(--fp2-border-strong);
    border-radius: 12px;
    box-shadow: var(--fp2-shadow);
}

body.fp2 .suveypage .progress-bar { background-color: var(--fp2-ember-600); }

/* --- submitted greeting modal -------------------------------------------- */
body.fp2 .suveypage #greetingModel { z-index: 99999999; }

body.fp2 .suveypage #greetingModel .modal-dialog {
    width: 400px;
    max-width: calc(100vw - 24px);
    margin-top: 96px;
}

body.fp2 .suveypage #greetingModel .modal-content {
    border: 1px solid var(--fp2-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--fp2-shadow-hov);
}

body.fp2 .suveypage #greetingModel .modal-header {
    background: var(--fp2-ink) !important;
    color: var(--fp2-paper) !important;
    text-align: center;
    padding: 10px 16px;
    border-bottom: 0;
}

body.fp2 .suveypage #greetingModel .modal-header h4.modal-title {
    font-family: var(--fp2-serif);
    font-size: 16.5px;
    margin: 0;
    letter-spacing: .01em;
}

body.fp2 .suveypage #greetingModel .modal-body {
    color: var(--fp2-text) !important;
    text-align: center;
    padding: 18px 18px 14px;
    min-height: 0 !important;
}

body.fp2 .suveypage .fp2-svy-gm-check {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fp2-ok-tint);
    color: var(--fp2-ok);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px auto 10px;
}

body.fp2 .suveypage .fp2-svy-gm-check svg { width: 22px; height: 22px; }

body.fp2 .suveypage .fp2-svy-gm-thanks {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fp2-muted);
}

body.fp2 .suveypage .fp2-svy-gm-name {
    font-family: var(--fp2-serif);
    font-size: 22px;
    color: var(--fp2-ink);
    margin-top: 4px;
    line-height: 1.2;
}

body.fp2 .suveypage .fp2-svy-gm-reg { font-size: 12px; color: var(--fp2-muted); margin-top: 2px; }

body.fp2 .suveypage .fp2-svy-gm-meta {
    margin-top: 14px;
    border-top: 1px solid var(--fp2-border);
    text-align: left;
}

body.fp2 .suveypage .fp2-svy-gm-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--fp2-border);
    font-size: 12.5px;
}

body.fp2 .suveypage .fp2-svy-gm-row:last-child { border-bottom: 0; }

body.fp2 .suveypage .fp2-svy-gm-row > span {
    flex: 0 0 64px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp2-muted);
}

body.fp2 .suveypage .fp2-svy-gm-row > div {
    flex: 1;
    min-width: 0;
    color: var(--fp2-ink);
    overflow-wrap: break-word;
}

body.fp2 .suveypage .fp2-svy-gm-row > div b { font-weight: 600; }

body.fp2 .suveypage #greetingModel .modal-footer {
    padding: 9px 14px;
    border-top: 1px solid var(--fp2-border);
    display: flex;
    justify-content: flex-end;
}

body.fp2 .suveypage .modal-footer .btn-default {
    background: var(--fp2-grad) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px;
    height: auto;
    width: auto;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
}

body.fp2 .suveypage .modal-footer .btn-default:hover { filter: brightness(1.06); }

/* --- submit-confirm modal (replaces the native confirm dialog) ----------- */
body.fp2 .suveypage #confirmSubmitModal .modal-dialog {
    width: 400px;
    max-width: calc(100vw - 24px);
    margin-top: 110px;
}

body.fp2 .suveypage #confirmSubmitModal .modal-content {
    border: 1px solid var(--fp2-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--fp2-shadow-hov);
}

body.fp2 .suveypage #confirmSubmitModal .modal-header {
    background: var(--fp2-ink) !important;
    color: var(--fp2-paper) !important;
    padding: 10px 16px;
    border-bottom: 0;
}

body.fp2 .suveypage #confirmSubmitModal .modal-header h4 {
    font-family: var(--fp2-serif);
    font-size: 16.5px;
    margin: 0;
    letter-spacing: .01em;
}

body.fp2 .suveypage #confirmSubmitModal .modal-body {
    padding: 16px 16px 14px;
    min-height: 0 !important;
    color: var(--fp2-text) !important;
}

body.fp2 .suveypage .fp2-svy-cf-stats { display: flex; gap: 8px; }

body.fp2 .suveypage .fp2-svy-cf-stat {
    flex: 1;
    text-align: center;
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-border);
    border-radius: 9px;
    padding: 8px 6px 7px;
}

body.fp2 .suveypage .fp2-svy-cf-stat b {
    display: block;
    font-family: var(--fp2-serif);
    font-size: 21px;
    line-height: 1;
    color: var(--fp2-ink);
    font-variant-numeric: tabular-nums;
}

body.fp2 .suveypage .fp2-svy-cf-stat span {
    display: block;
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp2-muted);
}

/* the Remaining cell goes crit-tinted while anything is unanswered */
body.fp2 .suveypage .fp2-svy-cf-stat.is-left { background: var(--fp2-crit-tint); border-color: var(--fp2-crit); }
body.fp2 .suveypage .fp2-svy-cf-stat.is-left b { color: var(--fp2-crit); }
body.fp2 .suveypage .fp2-svy-cf-stat.is-left span { color: var(--fp2-crit); }

body.fp2 .suveypage .fp2-svy-cf-warn {
    display: none;
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--fp2-crit);
    background: var(--fp2-crit-tint);
    border-radius: 8px;
    padding: 7px 11px;
}

body.fp2 .suveypage .fp2-svy-cf-msg { margin: 10px 0 0; font-size: 12px; color: var(--fp2-muted); }

body.fp2 .suveypage #confirmSubmitModal .modal-footer {
    padding: 9px 14px;
    border-top: 1px solid var(--fp2-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

body.fp2 .suveypage .fp2-svy-cf-cancel {
    background: var(--fp2-surface) !important;
    color: var(--fp2-ink) !important;
    border: 1px solid var(--fp2-border-strong) !important;
    border-radius: 9px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
}

body.fp2 .suveypage .fp2-svy-cf-cancel:hover { background: var(--fp2-surface-2) !important; }

body.fp2 .suveypage .fp2-svy-cf-confirm {
    background: var(--fp2-grad) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 9px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: var(--fp2-shadow-ember);
}

body.fp2 .suveypage .fp2-svy-cf-confirm:hover { filter: brightness(1.06); }

/* --- small screens. The old off-canvas rail (hamburger toggle + overlay)
       is obsolete now that the domains are an in-flow strip - toggle and
       overlay stay hidden at every width; only spacing tightens. ---------- */
body.fp2 .suveypage .panelToggle { display: none !important; }
body.fp2 .suveypage .panelOverlay { display: none !important; }

@media (max-width: 1024px) {
    body.fp2 .suveypage .domainDiv { margin: 12px 10px 0; }

    body.fp2 .suveypage .quesdiv {
        margin: 12px 10px 24px !important;
        padding: 18px 14px 22px;
    }

    body.fp2 .suveypage .ansMainDiv { margin-left: 0 !important; }
    body.fp2 .suveypage .ansDiv { padding: 2px 18px 2px 0 !important; }

    body.fp2 .suveypage .QuestainsNo {
        margin-top: 26px !important;
        margin-bottom: 12px !important;
    }
}

/* ==========================================================================
   21. DARK MODE  (2026-09-23, client: "add dark mode") - the topbar toggle
   (fp2-theme-toggle) and the one spot elsewhere in this file that hard-coded
   a light-only color instead of a --fp2- token, so it would otherwise have
   stayed light-mode-colored even with [data-theme="dark"] set. The palette
   itself (light AND dark) lives in facultyportal-v2.css's :root /
   [data-theme="dark"] blocks - already had a full dark palette before this
   change, just nothing set the attribute. This section only reacts to it,
   never redefines a --fp2- value. Toggle click handling + localStorage
   persistence: js/facultyportal-v2.js (initThemeToggle). The anti-flash
   <head> script that applies a returning visitor's saved choice before
   first paint is duplicated inline on every V2-themed master page.
   ========================================================================== */

/* topbar sun/moon icon button (FacultyNewMasterPage's .fp2-top-actions
   only). Both SVGs stay in the DOM; CSS shows whichever one matches the
   CURRENT theme - shown as the icon for what the page looks like right now,
   not what clicking it switches to. !important is required here: section 2's
   `body.fp2 .fp2-top-actions .fp2-icon-btn svg { display: block; }` outranks
   a plain (non-!important) rule on specificity (it ends in an extra bare
   `svg` element, which outweighs this selector's extra classes) - confirmed
   live, the sun icon showed in both themes without it. */
body.fp2 .fp2-theme-toggle .fp2-theme-ico-sun { display: none !important; }
body.fp2 .fp2-theme-toggle .fp2-theme-ico-moon { display: block !important; }
[data-theme="dark"] body.fp2 .fp2-theme-toggle .fp2-theme-ico-sun { display: block !important; }
[data-theme="dark"] body.fp2 .fp2-theme-toggle .fp2-theme-ico-moon { display: none !important; }

/* .btn-light-primary / .btn-light-warning hover: the resting state already
   uses var(--fp2-accent-tint), which the dark palette repoints to a
   translucent ember tint (see facultyportal-v2.css) - but this hover shade
   was hard-coded to a light-only pale peach (#F9DFCC, ~line 2303 above), so
   hovering one of these buttons in dark mode flashed a bright light-mode
   patch. Dark equivalent: the same accent color at higher opacity, so
   hovering still reads as "lighter than resting" without approaching
   light-mode brightness. */
[data-theme="dark"] body.fp2 .btn.btn-light-primary:hover,
[data-theme="dark"] body.fp2 .btn.btn-light-warning:hover {
    background: rgba(246, 151, 95, 0.28) !important;
}

/* RadGrid row-level plain links (asp:LinkButton drill-down actions like
   "View" with no CssClass of their own - rpt_EDU_EBS_StudentAttendanceView's
   grid is one, almost certainly not the only one project-wide) had no color
   rule anywhere in this file; everything above only covers .rgHeader /
   .rgPager anchors. Client (2026-09-23), from a live dark-mode screenshot:
   "in dark mode there must not be any black text.. look at the view button" -
   whatever set that text's color (Metronic's own base link color, not a
   --fp2- token) was merely inconspicuous dark-on-light before and went
   nearly unreadable dark-on-dark once the toggle shipped. Fixed with the
   theme's accent rather than just patching the contrast, since these ARE
   action links and every other clickable text in this file (.fp2-go,
   .btn-clean:hover, .btn-hover-primary:hover, ...) already reads as one via
   the same accent-resting / accent-warm-hover pattern - and accent is
   dark-mode-safe by construction (a token), so this cannot regress the same
   way again. Does not affect the image-based edit/delete/view buttons themed
   earlier today - <img> does not respond to a wrapping <a>'s color, and
   GridButtonColumn ButtonType="ImageButton" is not an <a> at all. */
body.fp2 .RadGrid .rgRow a,
body.fp2 .RadGrid .rgAltRow a { color: var(--fp2-accent) !important; }
body.fp2 .RadGrid .rgRow a:hover,
body.fp2 .RadGrid .rgAltRow a:hover { color: var(--fp2-accent-warm) !important; }

/* Client (2026-09-23): "check dark mode thoroughly." Tracing the "View" link
   bug above led somewhere much bigger: facultyportal-v2.css declares a
   SECOND, entirely separate `:root{}` block down in its Part 2 (the login
   page's own token set, "WARM NEUTRALS" / "semantic accents" / the ember
   ramp) - and because `:root` is the document root regardless of which part
   of the file declares it, every one of those tokens is just as globally
   live as Part 1's. Only Part 1 (--fp2-bg/-ink/-accent/-success/-warning/
   -danger and their -soft/-tint siblings) got a [data-theme="dark"] override
   when dark mode shipped earlier today - Part 2's own tokens did not, and a
   project-wide grep shows this file leans on them constantly: --fp2-sand
   (the exact token behind the "Students present" row from the next client
   message), --fp2-border-strong, --fp2-faint, --fp2-espresso(-2), --fp2-ok(-
   tint), --fp2-crit(-tint), --fp2-warn(-tint), --fp2-slate-100/600, and the
   entire --fp2-ember-50..700 ramp, which alone backs something like fifteen
   separate hover/selected/focus-ring states across buttons, every Telerik
   input type, alerts, badges, pagination and the survey chat widget. Every
   one of those stayed pinned to its light-only hex in dark mode: pale tints
   (ember-50..300, ok-tint, crit-tint, warn-tint, slate-100, sand) painted as
   near-white patches on a dark surface, and the muted/"dark chrome" end
   (border-strong, faint, espresso) either vanished or barely lifted off the
   equally-dark page. This block gives every one of them a dark value, so
   the whole family stops being a standing trap for the next report page
   that happens to use one - not just a fix for the two seen so far.
   Wherever a Part 2 token's light-mode hex already matches (or nearly
   matches) an already-dark-safe Part 1 token - ember-500/400/600 ARE
   --fp2-accent/-soft/-warm to the hex; --fp2-sand ~= --fp2-bg-soft;
   --fp2-espresso(-2) ~= --fp2-primary(-soft); --fp2-ok/-crit ~=
   --fp2-success/-danger - aliased to that token's dark value rather than
   inventing a second, independently-tuned dark color for what is
   functionally the same role. Only --fp2-border-strong, --fp2-faint and
   --fp2-slate-100/600 have no Part 1 analog and needed values of their own;
   the ember 50-300 pale end became a translucent accent wash, the same
   trick --fp2-accent-tint's own dark value already uses, with a small step
   between each stop so a resting/hover pair that both draw from the ramp
   (e.g. 50 resting, 100 hover) still shows a visible change instead of going
   flat. Not touched: the --fp2-brand family, --fp2-slate-200, -300 and -500,
   and the --fp2-lavender / --fp2-purple / --fp2-cyan / --fp2-skyblue /
   --fp2-lblue / --fp2-blue alias family - confirmed via the same grep that none of
   them appear anywhere in this file, only within Part 2's own login-page
   rules, which this toggle was never wired into and were not asked to
   cover. --fp2-grad (used once, a header gradient) needs no entry here at
   all: it is defined as `linear-gradient(...,var(--fp2-ember-400),
   var(--fp2-ember-600)...)`, a var() reference resolved wherever it is USED,
   so fixing ember-400/600 below fixes it automatically.

   Follow-up (2026-10-01, client: dark mode showing orange/peach instead of
   each client's own theme color on several elements): --fp2-accent-warm,
   --fp2-border-strong, --fp2-sand and the whole --fp2-ember-50..700 ramp
   moved OUT of this block and into facultyportal-v2.css's own
   [data-theme="dark"]{} root block instead - every one of them is ALSO
   redeclared per client in facultyportal-v2-themes.css, and scoped here
   (on body.fp2 directly, not just html) this block's selector was
   specific enough to beat a theme's own body.fp2-theme-X{} declaration,
   overriding every themed client back to this file's flat default in dark
   mode. Declared on html instead, a theme's own value on body wins the
   normal way. The remaining tokens below have no per-theme twin (confirmed
   via grep against facultyportal-v2-themes.css), so they stay here with no
   such conflict. */
[data-theme="dark"] body.fp2 {
    --fp2-faint: #6E6355;
    --fp2-espresso: var(--fp2-primary);
    --fp2-espresso-2: var(--fp2-primary-soft);
    --fp2-ok: var(--fp2-success);
    --fp2-ok-tint: var(--fp2-success-soft);
    --fp2-crit: var(--fp2-danger);
    --fp2-crit-tint: var(--fp2-danger-soft);
    --fp2-warn: var(--fp2-accent);
    --fp2-warn-tint: var(--fp2-accent-tint);
    --fp2-slate-100: rgba(174, 189, 198, 0.16);
    --fp2-slate-600: #AEBDC6;
}

/* Client (2026-09-23), three more live reports, two of them dark-mode gaps
   this file genuinely never reached before tonight - not the token family
   above, three separate untouched elements:

   1) The RadGrid "Add New Record" command row (CommandItemDisplay="Top" -
      confirmed identical markup on EDU_EBS_FCT_WorkFlow.aspx and
      EDU_OBE_CLO.aspx, both reported; grep turns up the same pattern on at
      least EDU_ADM_SetupCity, EDU_ACD_ADM_DigitalCourseFolder and
      EDU_ELMS_Activities too). This row is Telerik's own .rgCommandRow
      chrome, never restyled in EITHER theme before now - the light-grey
      gradient was simply never jarring enough against the light paper theme
      for anyone to notice it was untouched.
   2) A bare .card-header (the "Initiator Attatchment" panel on the same
      WorkFlow page) - every existing .card-header rule in this file requires
      a .card.card-custom parent (see section near the top), which this
      element does not have, so it fell through to Bootstrap's own default
      (near-white) header background with nothing dark-mode-aware about it.
      Deliberately LOWER specificity than the existing .card.card-custom >
      .card-header rules (2 classes vs. their 4) so this only fills the gap,
      never competes with them.
   3) The pager's first/prev/next/last arrow buttons - NOT a --fp2- token
      gap at all, a structurally different problem: their icons are inline
      SVG data-URIs with the stroke color hard-coded into the URI string
      itself (stroke='%2325231F', i.e. #25231F, light --fp2-ink). A var()
      cannot be substituted inside a background-image URL, so no token fix
      is possible here - the two data-URIs (light default, dark override)
      have to carry their own literal colors and be swapped wholesale under
      [data-theme="dark"], which is what the four rules below do (same path
      data as the light rules above, stroke recolored to #F2EADC, dark
      --fp2-ink, the only thing that changes). This is very likely why the
      WorkFlow screenshot showed blank squares where the pager arrows should
      be - a near-black icon on a near-black button in dark mode. */
body.fp2 .RadGrid .rgCommandRow > td {
    background: var(--fp2-surface-2) !important;
    border-bottom: 1px solid var(--fp2-line) !important;
}
body.fp2 .card-header {
    background: var(--fp2-surface-2) !important;
    border-bottom: 1px solid var(--fp2-line) !important;
}
/* The rule above already gives a bare .card-header (no .card.card-custom
   parent - see "2)" in the comment above body.fp2 .RadGrid .rgCommandRow >
   td) the right background/border for both modes, but not the rest of the
   real card-header look (facultyportal-v2-compat.css:586-591/596-602): its
   own padding is set inline with !important per instance (2026-10-01:
   EDU_EBS_FCT_WorkFlow.aspx's Remarks/Attachment panels, 2rem and 1rem
   respectively - deliberately different, left alone), so only the fieldset/
   h2 inside is fixed here. Un-boxing the fieldset (browsers default it to a
   bordered, padded box) and restyling the h2 to the same card-title
   typography closes the "old grey bars" gap - still lower specificity than
   the real .card.card-custom > .card-header rules, so it only fills gaps,
   never competes with them.
   2026-10-02: that was NOT enough for the WorkFlow page itself (client: "not
   fixed") - the bands were still full-bleed, 12px left of the form and of the
   grids they head, and flush on those grids, which no typography rule can
   change. WorkFlow now has its own .fp2-wf-sec titles (inside the grid's
   column) and no longer uses a .card-header at all; the two rules below stay
   as the fallback for any other page that does. */
body.fp2 .card-header fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
body.fp2 .card-header fieldset h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--fp2-ink);
    margin: 0;
    letter-spacing: -.01em;
}
[data-theme="dark"] body.fp2 .RadGrid .rgPager input.rgPageFirst { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EADC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 18l-6-6 6-6'/><path d='M19 18l-6-6 6-6'/></svg>") !important; }
[data-theme="dark"] body.fp2 .RadGrid .rgPager input.rgPagePrev  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EADC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>") !important; }
[data-theme="dark"] body.fp2 .RadGrid .rgPager input.rgPageNext  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EADC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>") !important; }
[data-theme="dark"] body.fp2 .RadGrid .rgPager input.rgPageLast  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EADC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 18l6-6-6-6'/><path d='M5 18l6-6-6-6'/></svg>") !important; }

/* Client (2026-09-23): "dark mode is not completely dark... white hue coming
   from the bottom... visible on all pages." Not a missing token this time -
   facultyportal-v2.css's own body.fp2 rule (its very first rule, the page
   canvas itself) paints THREE decorative radial-gradient washes over
   var(--fp2-paper) as a permanent background-image, `background-attachment:
   fixed` (so it is genuinely on every page, exactly as reported): a faint
   orange glow top-right, a faint peach glow top-left, and - the one the
   client is seeing - `radial-gradient(760px 480px at 55% 112%,
   rgba(232,214,186,.42),transparent 62%)`, a warm cream wash centred just
   BELOW the bottom edge (112%) at nearly half opacity, bleeding upward into
   view. All three are hard-coded rgba, not var()-based, so none of them
   knew to turn off when the page itself went dark - they are a light-mode
   design choice (the "light falling across paper" read the whole canvas is
   built around), not a bug in light mode, but painted straight over a dark
   page they read exactly as reported: a wrong, glowing white/cream patch
   the toggle can't touch because there is no token here to override, only
   a background-image to replace wholesale. Removed outright for dark mode
   rather than re-tinted to an "equivalent" dark glow - a plain, flat dark
   canvas is the safer call given the client's own words were "completely
   dark," and inventing a new decorative wash risks becoming its own
   subjective back-and-forth. The film-grain layer (body.fp2::after, a
   couple of rules below this one in the source, blend-mode soft-light) is
   NOT part of this - it is a uniform all-over texture with no directional
   bias, not a plausible source of a bottom-specific glow, and was not
   touched. */
[data-theme="dark"] body.fp2 {
    background-image: none !important;
}


/* BUG-027 (client 2026-10-05, "Award List report and Two-Factor page ignore the UIT theme ... orange accents"):
   with the theme class switched on those two pages (2026-10-01) the only default orange left on them is the
   postback loader's tassel - an inline SVG stroke="#F26A1B" copied into FacultyNewMasterPage, ReportMaster and the
   standalone Award List page. A CSS rule beats a presentation attribute, so the client's colour reaches it on every
   page that carries the loader without editing the three copies (the loader only shows during a postback). */
body.fp2 #fp2Loader path[stroke="#F26A1B"] { stroke: var(--fp2-accent); }