/* ====================================================================
   FACULTY PORTAL - CLIENT THEMES  (css/facultyportal-v2-themes.css)
   ====================================================================

   Ported from StudentPortal's css/studentportal-v2-themes.css (its own
   handoff doc, section 48, documents the mechanism in full). Same client
   registry and hexes as both sibling portals (StudentPortal, AdmissionPortal
   / css/applicantportal-themes.css), so one client looks like one client
   across all three:

     Default / blank / unknown -> NO class -> the base "Warm Ink & Ember"
                                  theme in facultyportal-v2.css (+compat)
     SSUET    -> body.fp2-theme-ssuet     deep purple  #33174D
     UIT      -> body.fp2-theme-uit       corporate blue #01499E
     IAC      -> body.fp2-theme-iac       SAME blue as UIT (shares UIT's block
                                          via :is(); split it if they diverge)
     NEWPORTS -> body.fp2-theme-newports  navy #081D4A + GOLD GLOW #FBEE03
     BOLTON   -> body.fp2-theme-bolton    slate navy #1D253A

   MECHANISM
   - Every shell (6 masters + Login + ForgotPassword) stamps
     " fp2-theme-<code>" after "fp2" on <body> via GetThemeClass() in its
     code-behind. The code is read from SP_EDU_ACD_ADM_PortalUIConfiguration
     _Query (column ThemeCode, PortalID 3, read defensively), resolved fresh
     per request on the public Login / ForgotPassword pages, and cached in
     Session("PortalThemeCode") once signed in.
   - The code is normalised to [a-z0-9] before it becomes a class. There is
     NO whitelist in VB: an unknown code matches no block here and simply
     renders the default theme. Adding a client = ONE block in this file +
     the CMS value. No VB edit.
   - This file loads LAST in all eight shells, so equal-specificity rules win
     by order; rules fighting an !important in compat/v2 carry !important
     plus extra specificity (a second class on body, e.g. `.spcmsg`) so they
     win regardless of exact load order between a page's own inline <style>
     and this stylesheet's <link>.

   TWO TOKEN FAMILIES, BOTH MUST BE RE-DECLARED (Faculty Portal's own alias
   trap - the same shape of bug the dark-mode work on this project already
   hit once): facultyportal-v2.css independently hardcodes the brand orange
   TWICE - once as the "Part 1" tokens (--fp2-accent / -soft / -warm / -tint,
   used throughout compat.css and every fp2-* component built this project:
   buttons, badges, icon chips, links) and again as the "Part 2" legacy
   ramp (--fp2-ember-50..700, --fp2-orange*, --fp2-grad, --fp2-shadow-ember,
   used by the login page and page-canvas glow). Neither is var()-linked to
   the other in the base file. A theme block that only overrides one family
   would re-theme half the app and leave the other half orange.

   WHAT A BLOCK COVERS (Faculty Portal's own leak inventory - audited
   directly, notably smaller than StudentPortal's: zero @keyframes bake in a
   color here, and there is only one ember-colored data-URI icon, not two):
     1  both token families above, plus the warm neutrals (paper / surface-2
        / sand / line / line-soft / border / border-strong / lavender)
        re-tinted to the client hue at the same lightness - the first seven
        of those in LIGHT MODE ONLY (block 1a, see "DARK MODE" below).
        Semantic colors (--fp2-warn/-crit/-ok) and the separate institution
        --fp2-brand are NOT touched on purpose.
     2  the page canvas (the two brand glows behind every signed-in page).
     3  the login / forgot-password sheet: paper gradient, seal dark copy,
        focal glows, field focus wash + shadow, button hover shadow, and the
        architectural drawing's full ink family (same lightness ladder, so
        its deliberate fall-off reads unchanged) plus the hatch pattern's
        inline stroke attribute.
     4  the RadPicker calendar-glyph data-URI icon (baked-in stroke hex).
     5  the alert-light-info border-color raw rgba leak in compat.css.
     6  the Communicator reply-box focus-glow raw rgba leak (page-scoped
        <style> on EDU_EBS_FCT_Communicator_Message_Search.aspx).

   DARK MODE (read this before adding a token to a theme block). A theme
   declares its tokens directly on <body>, and a custom property declared on
   an element is never overridden by a value merely INHERITED from an
   ancestor, however specific the ancestor's selector is - so whatever a
   theme declares keeps its LIGHT value in dark mode unless the theme also
   declares a dark one on <body> (the dark mode palette itself lives on
   <html>, in facultyportal-v2.css). Two ways to handle a token:
     - an accent-family token that needs the client's HUE in dark mode too
       (accent / -soft / -tint, the ember ramp): its own dark twin in the
       "1b" block, [data-theme="dark"] body.<theme>, same element and a
       higher specificity than the light block, so it wins.
     - a NEUTRAL (paper / surface-2 / sand / line / line-soft / border /
       border-strong): declared in block 1a inside
       :root:not([data-theme="dark"]) so it simply does not exist in dark
       mode, and <body> inherits the generic dark value from <html>.
   (2026-10-02, client: dark mode showed light card borders, dividers and
   badges for every themed client - measured in a harness: surface-2, line,
   line-soft, paper and border all computed back to the client's LIGHT tint
   on a dark page. The 2026-10-01 fix had covered the accent tokens only.)

   NOT themed on purpose: the custom error page (self-contained, no
   session), the field-underline color and the charcoal login button
   (explicitly neutral in the base file too), Metronic's own JS
   KTAppSettings.colors config on the login page (JS, not CSS - a body
   class cannot reach it), and rptEDU_EXM_AwardList.aspx's loader spinner
   (one low-traffic report page, not shell chrome).
   ==================================================================== */


/* ====================================================================
   THEME SSUET  (client hex #33174D - deep purple)
   ==================================================================== */

/* 1. PALETTE - both token families, then the warm neutrals */
body.fp2-theme-ssuet {
    --fp2-accent: #5E2D91;
    --fp2-accent-soft: #8B5FC0;
    --fp2-accent-warm: #4B2178;
    --fp2-accent-tint: #F4EEFA;
    --fp2-ember-50: #F4EEFA;
    --fp2-ember-100: #E9DCF7;
    --fp2-ember-200: #DCCDF0;
    --fp2-ember-300: #C4A3E3;
    --fp2-ember-400: #8B5FC0;
    --fp2-ember-500: #5E2D91;
    --fp2-ember-600: #4B2178;
    --fp2-ember-700: #33174D;          /* THE CLIENT HEX */
    --fp2-orange: var(--fp2-ember-500);
    --fp2-orange-500: var(--fp2-ember-500);
    --fp2-orange-600: var(--fp2-ember-600);
    --fp2-orange-400: var(--fp2-ember-400);
    --fp2-orange-300: var(--fp2-ember-300);
    --fp2-orange-200: var(--fp2-ember-200);
    --fp2-orange-100: var(--fp2-ember-100);
    --fp2-orange-tint: var(--fp2-ember-50);
    --fp2-orange-grad: linear-gradient(120deg, var(--fp2-ember-400), var(--fp2-ember-600));
    --fp2-grad: linear-gradient(135deg, var(--fp2-ember-400), var(--fp2-ember-600) 92%);
    --fp2-shadow-ember: 0 8px 18px -8px rgba(75, 33, 120, .38);
    --fp2-lavender: #DCD3E8;
    --fp2-lavender-tint: #F1ECF7;
}

/* 1a. THE WARM NEUTRALS, LIGHT MODE ONLY (2026-10-02) - see "DARK MODE" in the
   file header. In dark mode this rule does not apply, so the client declares
   nothing for these seven and <body> inherits the dark palette from <html>. */
:root:not([data-theme="dark"]) body.fp2-theme-ssuet {
    --fp2-paper: #F7F5FA;
    --fp2-surface-2: #F9F7FC;
    --fp2-sand: #EAE5F2;
    --fp2-line: #E6E1EF;
    --fp2-line-soft: #F1ECF7;
    --fp2-border: #E6E1EF;
    --fp2-border-strong: #D4CCE3;
}

/* 1b. DARK MODE PALETTE (2026-10-01, client: "current class" agenda row,
   the topbar avatar circle and My Activity's icon chips all read as a
   plain WHITE box in dark mode, not just a wrong color). Root cause:
   --fp2-accent/-soft/-tint get a dark-mode value from facultyportal-v2.css's
   own [data-theme="dark"]{} block, but only on <html> - a CSS custom
   property declared directly on an element (here, this theme's own block
   on body.fp2-theme-ssuet) is never overridden by a value merely inherited
   from an ancestor, no matter how specific the ancestor selector is. So
   every themed client's own LIGHT accent-tint (#F4EEFA, a near-white pale
   wash - fine as a light-mode background tint, exactly what reads as a
   solid white box on a dark surface) kept winning over the dark-mode
   value, in dark mode, every time. --fp2-accent-warm does not need its own
   entry here: that one's dark value already lives in facultyportal-v2.css's
   OWN [data-theme="dark"]{} block (moved there from a wrongly-scoped
   compat.css rule the same day, see that file's own comment) for the exact
   same inheritance reason, and a medium-dark accent-warm reads fine as-is
   in dark mode unlike a near-white tint - confirmed in a harness, not
   assumed. Values reuse this theme's own already-lighter ember-400/300
   (the same hue, already designed as lighter steps of it) rather than
   inventing new ones: --fp2-accent = ember-400, --fp2-accent-soft =
   ember-300, --fp2-accent-tint = a translucent wash of ember-400 - the
   exact same relationship the base/default theme's own dark palette
   already uses (facultyportal-v2.css: --fp2-accent: #F6975F i.e. the LIGHT
   theme's accent-soft; --fp2-accent-tint: rgba of that same hex). */
[data-theme="dark"] body.fp2-theme-ssuet {
    --fp2-accent: #8B5FC0;
    --fp2-accent-soft: #C4A3E3;
    --fp2-accent-tint: rgba(139, 95, 192, 0.15);
    /* same inheritance gap, same fix, for the ember 50..700 ramp a
       RadComboBox dropdown's hover/selected rows read straight from
       (client, 2026-10-01: "every dropdown... the highlighted option is
       white and blank"). Not accent-warm: unlike a pale tint, a medium-
       dark accent-warm reads fine on a dark surface as-is (confirmed in a
       harness), so ember-600 (which equals accent-warm in every theme's
       own light block) is left at that same value here too.
       (2026-10-02) --fp2-sand and --fp2-border-strong used to be set here
       as well. They are neutrals now - light-mode only, block 1a - so their
       dark values come straight from <html>'s :root[data-theme="dark"]. */
    --fp2-ember-50: rgba(139, 95, 192, 0.08);
    --fp2-ember-100: rgba(139, 95, 192, 0.14);
    --fp2-ember-200: rgba(139, 95, 192, 0.20);
    --fp2-ember-300: rgba(139, 95, 192, 0.28);
    --fp2-ember-400: var(--fp2-accent-soft);
    --fp2-ember-500: var(--fp2-accent);
    --fp2-ember-600: #4B2178;
    --fp2-ember-700: #C4A3E3;
}

/* 2. PAGE CANVAS - the two brand glows behind every signed-in page */
body.fp2-theme-ssuet:not(.fp2-login-body) {
    background-image:
        radial-gradient(1100px 620px at 100% -8%, rgba(94, 45, 145, .07), transparent 60%),
        radial-gradient(880px 540px at -6% 3%, rgba(139, 95, 192, .07), transparent 58%),
        radial-gradient(760px 480px at 55% 112%, rgba(234, 229, 242, .42), transparent 62%);
}

/* 3. LOGIN / FORGOT PASSWORD sheet */
body.fp2-theme-ssuet .fp2-login { background-image: linear-gradient(97deg, #F7F5FA 40%, #F1ECF7 72%, #EAE5F2 100%); }
body.fp2-theme-ssuet .fp2-seal .fp2-s-dark { color: #33174D; }
body.fp2-theme-ssuet .fp2-sf-in::before { background: radial-gradient(closest-side, rgba(94, 45, 145, .10), rgba(139, 95, 192, .05) 55%, transparent 72%); }
body.fp2-theme-ssuet .fp2-sheet::before { background: radial-gradient(closest-side, rgba(94, 45, 145, .10), rgba(139, 95, 192, .04) 58%, transparent 74%); }
body.fp2-theme-ssuet .fp2-ed-line:focus-within {
    background: linear-gradient(to top, rgba(94, 45, 145, .05), transparent 72%);
    box-shadow: 0 12px 22px -16px rgba(75, 33, 120, .42);
}
body.fp2-theme-ssuet .fp2-btn:hover {
    box-shadow: 0 2px 3px rgba(36, 31, 24, .14), 0 20px 44px -16px rgba(75, 33, 120, .48);
}
body.fp2-theme-ssuet .fp2-elev .fp2-l-corner { stroke: #3E1D5E; }
body.fp2-theme-ssuet .fp2-elev .fp2-face-a { fill: #4B2178; }
body.fp2-theme-ssuet .fp2-elev .fp2-face-b { fill: #33174D; }
body.fp2-theme-ssuet .fp2-elev .fp2-l-ground { stroke: #8E6FAF; }
body.fp2-theme-ssuet .fp2-elev .fp2-l-mid { stroke: #5A2E8C; }
body.fp2-theme-ssuet .fp2-elev .fp2-l { stroke: #7B55A8; }
body.fp2-theme-ssuet .fp2-elev .fp2-l-faint { stroke: #9F80BF; }
body.fp2-theme-ssuet .fp2-elev .fp2-l-hair { stroke: #BBA4D2; }
body.fp2-theme-ssuet .fp2-elev .fp2-l-dash { stroke: #C9B8DB; }
body.fp2-theme-ssuet .fp2-elev .fp2-pane { fill: #4B2178; }
body.fp2-theme-ssuet .fp2-elev .fp2-dim,
body.fp2-theme-ssuet .fp2-elev .fp2-grid-l { fill: #8B72A6; }
body.fp2-theme-ssuet .fp2-elev pattern#hatch line { stroke: #C9B8DB !important; }

/* 4. DATA-URI ICON with a baked-in stroke (compat uses !important) */
body.fp2-theme-ssuet .RadPicker a[id$="popupButton"]::after,
body.fp2-theme-ssuet .RadPicker .rcCalPopup::after {
    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%234B2178%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;
}

/* 5. Alert border-color raw leak */
body.fp2-theme-ssuet .alert.alert-light-info { border-color: rgba(94, 45, 145, .25) !important; }

/* 6. Communicator reply-box focus glow (page-scoped !important leak) */
body.fp2-theme-ssuet.spcmsg .spc-replybox:focus { box-shadow: 0 0 0 3px rgba(94, 45, 145, .12) !important; }

/* 7. Announcement ticker (2026-09-30) - .fp2-ticker's ::after hatch and
   .fp2-ticker-live's pulse are hardcoded rgba()/named @keyframes in
   facultyportal-v2.css, not var()-driven, so unlike every rule above they
   cannot just inherit this theme's --fp2-accent/-warm automatically and
   need their own override here - same reason Student's sibling ticker
   needed one per theme. Hatch = accent-warm (#4B2178 = rgb(75,33,120)),
   pulse = accent (#5E2D91 = rgb(94,45,145)), matching every other
   hatch/pulse pair below. */
body.fp2-theme-ssuet .fp2-ticker::after { background: repeating-linear-gradient(135deg, rgba(75,33,120,.04) 0 1px, transparent 1px 16px); }
body.fp2-theme-ssuet .fp2-ticker-live { box-shadow: 0 0 0 0 rgba(94,45,145,.5); animation-name: fp2tickerpulse-ssuet; }
@keyframes fp2tickerpulse-ssuet { 0%{ box-shadow: 0 0 0 0 rgba(94,45,145,.45); } 70%{ box-shadow: 0 0 0 7px rgba(94,45,145,0); } 100%{ box-shadow: 0 0 0 0 rgba(94,45,145,0); } }


/* ====================================================================
   THEME UIT + IAC  (client hex #01499E - corporate blue, shared by both
   clients; split the block if they ever diverge)
   ==================================================================== */

/* 1. PALETTE */
body:is(.fp2-theme-uit, .fp2-theme-iac) {
    --fp2-accent: #1E63BD;
    --fp2-accent-soft: #6FA3E0;
    --fp2-accent-warm: #1252A8;
    --fp2-accent-tint: #EDF4FC;
    --fp2-ember-50: #EDF4FC;
    --fp2-ember-100: #E3EEFC;
    --fp2-ember-200: #C7DBF3;
    --fp2-ember-300: #9DC3EE;
    --fp2-ember-400: #6FA3E0;
    --fp2-ember-500: #1E63BD;
    --fp2-ember-600: #1252A8;
    --fp2-ember-700: #01499E;          /* THE CLIENT HEX */
    --fp2-orange: var(--fp2-ember-500);
    --fp2-orange-500: var(--fp2-ember-500);
    --fp2-orange-600: var(--fp2-ember-600);
    --fp2-orange-400: var(--fp2-ember-400);
    --fp2-orange-300: var(--fp2-ember-300);
    --fp2-orange-200: var(--fp2-ember-200);
    --fp2-orange-100: var(--fp2-ember-100);
    --fp2-orange-tint: var(--fp2-ember-50);
    --fp2-orange-grad: linear-gradient(120deg, var(--fp2-ember-400), var(--fp2-ember-600));
    --fp2-grad: linear-gradient(135deg, var(--fp2-ember-400), var(--fp2-ember-600) 92%);
    --fp2-shadow-ember: 0 8px 18px -8px rgba(18, 82, 168, .38);
    --fp2-lavender: #D3DEEC;
    --fp2-lavender-tint: #EDF3F9;
}

/* 1a. THE WARM NEUTRALS, LIGHT MODE ONLY (2026-10-02) - see "DARK MODE" in the
   file header. In dark mode this rule does not apply, so the client declares
   nothing for these seven and <body> inherits the dark palette from <html>. */
:root:not([data-theme="dark"]) body:is(.fp2-theme-uit, .fp2-theme-iac) {
    --fp2-paper: #F5F8FB;
    --fp2-surface-2: #F7FAFD;
    --fp2-sand: #E5ECF4;
    --fp2-line: #E0E8F1;
    --fp2-line-soft: #EDF3F9;
    --fp2-border: #E0E8F1;
    --fp2-border-strong: #CBD8E7;
}

/* 1b. DARK MODE PALETTE - see the SSUET block's own "1b" comment above for
   the full why (client, 2026-10-01: "current class"/avatar/activity-icon
   white boxes in dark mode). accent = ember-400, accent-soft = ember-300,
   accent-tint = a translucent wash of ember-400. */
[data-theme="dark"] body:is(.fp2-theme-uit, .fp2-theme-iac) {
    --fp2-accent: #6FA3E0;
    --fp2-accent-soft: #9DC3EE;
    --fp2-accent-tint: rgba(111, 163, 224, 0.15);
    /* see the SSUET block's own "1b" comment above - same gap, same fix,
       for the ember ramp (client, 2026-10-01: "dropdown... highlighted
       option white"). --fp2-sand/-border-strong are light-only neutrals
       now (block 1a), so they are no longer set here. */
    --fp2-ember-50: rgba(111, 163, 224, 0.08);
    --fp2-ember-100: rgba(111, 163, 224, 0.14);
    --fp2-ember-200: rgba(111, 163, 224, 0.20);
    --fp2-ember-300: rgba(111, 163, 224, 0.28);
    --fp2-ember-400: var(--fp2-accent-soft);
    --fp2-ember-500: var(--fp2-accent);
    --fp2-ember-600: #1252A8;
    --fp2-ember-700: #9DC3EE;
}

/* 2. PAGE CANVAS */
body:is(.fp2-theme-uit, .fp2-theme-iac):not(.fp2-login-body) {
    background-image:
        radial-gradient(1100px 620px at 100% -8%, rgba(30, 99, 189, .07), transparent 60%),
        radial-gradient(880px 540px at -6% 3%, rgba(111, 163, 224, .07), transparent 58%),
        radial-gradient(760px 480px at 55% 112%, rgba(229, 236, 244, .42), transparent 62%);
}

/* 3. LOGIN / FORGOT PASSWORD sheet */
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-login { background-image: linear-gradient(97deg, #F5F8FB 40%, #EDF3F9 72%, #E5ECF4 100%); }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-seal .fp2-s-dark { color: #01499E; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-sf-in::before { background: radial-gradient(closest-side, rgba(30, 99, 189, .10), rgba(111, 163, 224, .05) 55%, transparent 72%); }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-sheet::before { background: radial-gradient(closest-side, rgba(30, 99, 189, .10), rgba(111, 163, 224, .04) 58%, transparent 74%); }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-ed-line:focus-within {
    background: linear-gradient(to top, rgba(30, 99, 189, .05), transparent 72%);
    box-shadow: 0 12px 22px -16px rgba(18, 82, 168, .42);
}
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-btn:hover {
    box-shadow: 0 2px 3px rgba(36, 31, 24, .14), 0 20px 44px -16px rgba(18, 82, 168, .48);
}
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-l-corner { stroke: #0D3A78; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-face-a { fill: #1252A8; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-face-b { fill: #01499E; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-l-ground { stroke: #6B93C7; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-l-mid { stroke: #1A5AAF; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-l { stroke: #3E7CC9; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-l-faint { stroke: #7EA6D8; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-l-hair { stroke: #A9C4E5; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-l-dash { stroke: #BDD0E6; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-pane { fill: #1252A8; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-dim,
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev .fp2-grid-l { fill: #6A8FBF; }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-elev pattern#hatch line { stroke: #BDD0E6 !important; }

/* 4. DATA-URI ICON */
body:is(.fp2-theme-uit, .fp2-theme-iac) .RadPicker a[id$="popupButton"]::after,
body:is(.fp2-theme-uit, .fp2-theme-iac) .RadPicker .rcCalPopup::after {
    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%231252A8%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;
}

/* 5. Alert border-color raw leak */
body:is(.fp2-theme-uit, .fp2-theme-iac) .alert.alert-light-info { border-color: rgba(30, 99, 189, .25) !important; }

/* 6. Communicator reply-box focus glow */
body:is(.fp2-theme-uit, .fp2-theme-iac).spcmsg .spc-replybox:focus { box-shadow: 0 0 0 3px rgba(30, 99, 189, .12) !important; }

/* 7. Announcement ticker (2026-09-30) - see the SSUET block's own comment
   above for why this needs a hardcoded per-theme override at all. Hatch =
   accent-warm (#1252A8 = rgb(18,82,168)), pulse = accent (#1E63BD =
   rgb(30,99,189)). */
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-ticker::after { background: repeating-linear-gradient(135deg, rgba(18,82,168,.04) 0 1px, transparent 1px 16px); }
body:is(.fp2-theme-uit, .fp2-theme-iac) .fp2-ticker-live { box-shadow: 0 0 0 0 rgba(30,99,189,.5); animation-name: fp2tickerpulse-uit; }
@keyframes fp2tickerpulse-uit { 0%{ box-shadow: 0 0 0 0 rgba(30,99,189,.45); } 70%{ box-shadow: 0 0 0 7px rgba(30,99,189,0); } 100%{ box-shadow: 0 0 0 0 rgba(30,99,189,0); } }


/* ====================================================================
   THEME NEWPORTS  (client hex #081D4A - navy carries structure; the GOLD
   #FBEE03 appears ONLY as light - pulses, halos, glows - never as text or
   fill on a light ground)
   ==================================================================== */

/* 1. PALETTE */
body.fp2-theme-newports {
    --fp2-accent: #24418C;
    --fp2-accent-soft: #7E92C6;
    --fp2-accent-warm: #16306E;
    --fp2-accent-tint: #EDF1FA;
    --fp2-ember-50: #EDF1FA;
    --fp2-ember-100: #E7ECF9;
    --fp2-ember-200: #CBD5EC;
    --fp2-ember-300: #A9B8DC;
    --fp2-ember-400: #7E92C6;
    --fp2-ember-500: #24418C;
    --fp2-ember-600: #16306E;
    --fp2-ember-700: #081D4A;          /* THE CLIENT HEX */
    --fp2-orange: var(--fp2-ember-500);
    --fp2-orange-500: var(--fp2-ember-500);
    --fp2-orange-600: var(--fp2-ember-600);
    --fp2-orange-400: var(--fp2-ember-400);
    --fp2-orange-300: var(--fp2-ember-300);
    --fp2-orange-200: var(--fp2-ember-200);
    --fp2-orange-100: var(--fp2-ember-100);
    --fp2-orange-tint: var(--fp2-ember-50);
    --fp2-orange-grad: linear-gradient(120deg, var(--fp2-ember-400), var(--fp2-ember-600));
    --fp2-grad: linear-gradient(135deg, var(--fp2-ember-400), var(--fp2-ember-600) 92%);
    --fp2-shadow-ember: 0 8px 18px -8px rgba(251, 238, 3, .38);
    --fp2-lavender: #D2DAEA;
    --fp2-lavender-tint: #ECF0F8;
}

/* 1a. THE WARM NEUTRALS, LIGHT MODE ONLY (2026-10-02) - see "DARK MODE" in the
   file header. In dark mode this rule does not apply, so the client declares
   nothing for these seven and <body> inherits the dark palette from <html>. */
:root:not([data-theme="dark"]) body.fp2-theme-newports {
    --fp2-paper: #F5F7FB;
    --fp2-surface-2: #F7F9FD;
    --fp2-sand: #E4E9F3;
    --fp2-line: #DFE5F0;
    --fp2-line-soft: #ECF0F8;
    --fp2-border: #DFE5F0;
    --fp2-border-strong: #C9D2E4;
}

/* 1b. DARK MODE PALETTE - see the SSUET block's own "1b" comment above for
   the full why (client, 2026-10-01: "current class"/avatar/activity-icon
   white boxes in dark mode). accent = ember-400, accent-soft = ember-300,
   accent-tint = a translucent wash of ember-400 - the navy ramp, same as
   every property here except the ticker's own gold pulse two sections
   below (unrelated: a hardcoded rgba(), not one of these tokens, and
   already dark-mode-safe since --fp2-accent-tint never touches it). */
[data-theme="dark"] body.fp2-theme-newports {
    --fp2-accent: #7E92C6;
    --fp2-accent-soft: #A9B8DC;
    --fp2-accent-tint: rgba(126, 146, 198, 0.15);
    /* see the SSUET block's own "1b" comment above - same gap, same fix,
       for the ember ramp (client, 2026-10-01: "dropdown... highlighted
       option white"). --fp2-sand/-border-strong are light-only neutrals
       now (block 1a), so they are no longer set here.
       The gold pulse two sections below is unrelated (a hardcoded rgba(),
       not one of these tokens) and untouched. */
    --fp2-ember-50: rgba(126, 146, 198, 0.08);
    --fp2-ember-100: rgba(126, 146, 198, 0.14);
    --fp2-ember-200: rgba(126, 146, 198, 0.20);
    --fp2-ember-300: rgba(126, 146, 198, 0.28);
    --fp2-ember-400: var(--fp2-accent-soft);
    --fp2-ember-500: var(--fp2-accent);
    --fp2-ember-600: #16306E;
    --fp2-ember-700: #A9B8DC;
}

/* 2. PAGE CANVAS */
body.fp2-theme-newports:not(.fp2-login-body) {
    background-image:
        radial-gradient(1100px 620px at 100% -8%, rgba(36, 65, 140, .07), transparent 60%),
        radial-gradient(880px 540px at -6% 3%, rgba(126, 146, 198, .07), transparent 58%),
        radial-gradient(760px 480px at 55% 112%, rgba(228, 233, 243, .42), transparent 62%);
}

/* 3. LOGIN / FORGOT PASSWORD sheet - gold appears only in the two glows */
body.fp2-theme-newports .fp2-login { background-image: linear-gradient(97deg, #F5F7FB 40%, #ECF0F8 72%, #E4E9F3 100%); }
body.fp2-theme-newports .fp2-seal .fp2-s-dark { color: #081D4A; }
body.fp2-theme-newports .fp2-sf-in::before { background: radial-gradient(closest-side, rgba(36, 65, 140, .10), rgba(126, 146, 198, .05) 55%, transparent 72%); }
body.fp2-theme-newports .fp2-sheet::before { background: radial-gradient(closest-side, rgba(36, 65, 140, .10), rgba(126, 146, 198, .04) 58%, transparent 74%); }
body.fp2-theme-newports .fp2-ed-line:focus-within {
    background: linear-gradient(to top, rgba(36, 65, 140, .05), transparent 72%);
    box-shadow: 0 12px 22px -16px rgba(251, 238, 3, .42);
}
body.fp2-theme-newports .fp2-btn:hover {
    box-shadow: 0 2px 3px rgba(36, 31, 24, .14), 0 20px 44px -16px rgba(251, 238, 3, .48);
}
body.fp2-theme-newports .fp2-elev .fp2-l-corner { stroke: #0C2559; }
body.fp2-theme-newports .fp2-elev .fp2-face-a { fill: #16306E; }
body.fp2-theme-newports .fp2-elev .fp2-face-b { fill: #081D4A; }
body.fp2-theme-newports .fp2-elev .fp2-l-ground { stroke: #7A8DBE; }
body.fp2-theme-newports .fp2-elev .fp2-l-mid { stroke: #1F3B84; }
body.fp2-theme-newports .fp2-elev .fp2-l { stroke: #4560A5; }
body.fp2-theme-newports .fp2-elev .fp2-l-faint { stroke: #8497C8; }
body.fp2-theme-newports .fp2-elev .fp2-l-hair { stroke: #AEBBDC; }
body.fp2-theme-newports .fp2-elev .fp2-l-dash { stroke: #C3CDE3; }
body.fp2-theme-newports .fp2-elev .fp2-pane { fill: #16306E; }
body.fp2-theme-newports .fp2-elev .fp2-dim,
body.fp2-theme-newports .fp2-elev .fp2-grid-l { fill: #7385B4; }
body.fp2-theme-newports .fp2-elev pattern#hatch line { stroke: #C3CDE3 !important; }

/* 4. DATA-URI ICON */
body.fp2-theme-newports .RadPicker a[id$="popupButton"]::after,
body.fp2-theme-newports .RadPicker .rcCalPopup::after {
    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%2316306E%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;
}

/* 5. Alert border-color raw leak */
body.fp2-theme-newports .alert.alert-light-info { border-color: rgba(36, 65, 140, .25) !important; }

/* 6. Communicator reply-box focus glow */
body.fp2-theme-newports.spcmsg .spc-replybox:focus { box-shadow: 0 0 0 3px rgba(36, 65, 140, .12) !important; }

/* 7. Announcement ticker (2026-09-30) - see the SSUET block's own comment
   above for why this needs a hardcoded per-theme override at all. Hatch
   still follows the navy accent-warm (#16306E = rgb(22,48,110)) like every
   other theme, but the pulse is this theme's gold (#FBEE03 = rgb(251,238,3))
   rather than its own accent - matching this file's own rule at the top of
   this section: the gold is for light (pulses/halos/glows), never fill. */
body.fp2-theme-newports .fp2-ticker::after { background: repeating-linear-gradient(135deg, rgba(22,48,110,.04) 0 1px, transparent 1px 16px); }
body.fp2-theme-newports .fp2-ticker-live { box-shadow: 0 0 0 0 rgba(251,238,3,.5); animation-name: fp2tickerpulse-newports; }
@keyframes fp2tickerpulse-newports { 0%{ box-shadow: 0 0 0 0 rgba(251,238,3,.45); } 70%{ box-shadow: 0 0 0 7px rgba(251,238,3,0); } 100%{ box-shadow: 0 0 0 0 rgba(251,238,3,0); } }


/* ====================================================================
   THEME BOLTON  (client hex #1D253A - slate navy, deliberately desaturated)
   ==================================================================== */

/* 1. PALETTE */
body.fp2-theme-bolton {
    --fp2-accent: #405684;
    --fp2-accent-soft: #8B99BD;
    --fp2-accent-warm: #2E3F66;
    --fp2-accent-tint: #EEF1F7;
    --fp2-ember-50: #EEF1F7;
    --fp2-ember-100: #E9ECF4;
    --fp2-ember-200: #CFD7E6;
    --fp2-ember-300: #A9B5D0;
    --fp2-ember-400: #8B99BD;
    --fp2-ember-500: #405684;
    --fp2-ember-600: #2E3F66;
    --fp2-ember-700: #1D253A;          /* THE CLIENT HEX */
    --fp2-orange: var(--fp2-ember-500);
    --fp2-orange-500: var(--fp2-ember-500);
    --fp2-orange-600: var(--fp2-ember-600);
    --fp2-orange-400: var(--fp2-ember-400);
    --fp2-orange-300: var(--fp2-ember-300);
    --fp2-orange-200: var(--fp2-ember-200);
    --fp2-orange-100: var(--fp2-ember-100);
    --fp2-orange-tint: var(--fp2-ember-50);
    --fp2-orange-grad: linear-gradient(120deg, var(--fp2-ember-400), var(--fp2-ember-600));
    --fp2-grad: linear-gradient(135deg, var(--fp2-ember-400), var(--fp2-ember-600) 92%);
    --fp2-shadow-ember: 0 8px 18px -8px rgba(46, 63, 102, .38);
    --fp2-lavender: #D3D9E6;
    --fp2-lavender-tint: #EDF0F6;
}

/* 1a. THE WARM NEUTRALS, LIGHT MODE ONLY (2026-10-02) - see "DARK MODE" in the
   file header. In dark mode this rule does not apply, so the client declares
   nothing for these seven and <body> inherits the dark palette from <html>. */
:root:not([data-theme="dark"]) body.fp2-theme-bolton {
    --fp2-paper: #F5F6FA;
    --fp2-surface-2: #F7F8FB;
    --fp2-sand: #E5E8F0;
    --fp2-line: #E0E4ED;
    --fp2-line-soft: #EDF0F6;
    --fp2-border: #E0E4ED;
    --fp2-border-strong: #CAD1DF;
}

/* 1b. DARK MODE PALETTE - see the SSUET block's own "1b" comment above for
   the full why (client, 2026-10-01: "current class"/avatar/activity-icon
   white boxes in dark mode). accent = ember-400, accent-soft = ember-300,
   accent-tint = a translucent wash of ember-400. */
[data-theme="dark"] body.fp2-theme-bolton {
    --fp2-accent: #8B99BD;
    --fp2-accent-soft: #A9B5D0;
    --fp2-accent-tint: rgba(139, 153, 189, 0.15);
    /* see the SSUET block's own "1b" comment above - same gap, same fix,
       for the ember ramp (client, 2026-10-01: "dropdown... highlighted
       option white"). --fp2-sand/-border-strong are light-only neutrals
       now (block 1a), so they are no longer set here. */
    --fp2-ember-50: rgba(139, 153, 189, 0.08);
    --fp2-ember-100: rgba(139, 153, 189, 0.14);
    --fp2-ember-200: rgba(139, 153, 189, 0.20);
    --fp2-ember-300: rgba(139, 153, 189, 0.28);
    --fp2-ember-400: var(--fp2-accent-soft);
    --fp2-ember-500: var(--fp2-accent);
    --fp2-ember-600: #2E3F66;
    --fp2-ember-700: #A9B5D0;
}

/* 2. PAGE CANVAS */
body.fp2-theme-bolton:not(.fp2-login-body) {
    background-image:
        radial-gradient(1100px 620px at 100% -8%, rgba(64, 86, 132, .07), transparent 60%),
        radial-gradient(880px 540px at -6% 3%, rgba(139, 153, 189, .07), transparent 58%),
        radial-gradient(760px 480px at 55% 112%, rgba(229, 232, 240, .42), transparent 62%);
}

/* 3. LOGIN / FORGOT PASSWORD sheet */
body.fp2-theme-bolton .fp2-login { background-image: linear-gradient(97deg, #F5F6FA 40%, #EDF0F6 72%, #E5E8F0 100%); }
body.fp2-theme-bolton .fp2-seal .fp2-s-dark { color: #1D253A; }
body.fp2-theme-bolton .fp2-sf-in::before { background: radial-gradient(closest-side, rgba(64, 86, 132, .10), rgba(139, 153, 189, .05) 55%, transparent 72%); }
body.fp2-theme-bolton .fp2-sheet::before { background: radial-gradient(closest-side, rgba(64, 86, 132, .10), rgba(139, 153, 189, .04) 58%, transparent 74%); }
body.fp2-theme-bolton .fp2-ed-line:focus-within {
    background: linear-gradient(to top, rgba(64, 86, 132, .05), transparent 72%);
    box-shadow: 0 12px 22px -16px rgba(46, 63, 102, .42);
}
body.fp2-theme-bolton .fp2-btn:hover {
    box-shadow: 0 2px 3px rgba(36, 31, 24, .14), 0 20px 44px -16px rgba(46, 63, 102, .48);
}
body.fp2-theme-bolton .fp2-elev .fp2-l-corner { stroke: #182038; }
body.fp2-theme-bolton .fp2-elev .fp2-face-a { fill: #2E3F66; }
body.fp2-theme-bolton .fp2-elev .fp2-face-b { fill: #1D253A; }
body.fp2-theme-bolton .fp2-elev .fp2-l-ground { stroke: #8391B3; }
body.fp2-theme-bolton .fp2-elev .fp2-l-mid { stroke: #354A78; }
body.fp2-theme-bolton .fp2-elev .fp2-l { stroke: #56699A; }
body.fp2-theme-bolton .fp2-elev .fp2-l-faint { stroke: #8C9AB9; }
body.fp2-theme-bolton .fp2-elev .fp2-l-hair { stroke: #B4BED4; }
body.fp2-theme-bolton .fp2-elev .fp2-l-dash { stroke: #C6CDDD; }
body.fp2-theme-bolton .fp2-elev .fp2-pane { fill: #2E3F66; }
body.fp2-theme-bolton .fp2-elev .fp2-dim,
body.fp2-theme-bolton .fp2-elev .fp2-grid-l { fill: #7A88A8; }
body.fp2-theme-bolton .fp2-elev pattern#hatch line { stroke: #C6CDDD !important; }

/* 4. DATA-URI ICON */
body.fp2-theme-bolton .RadPicker a[id$="popupButton"]::after,
body.fp2-theme-bolton .RadPicker .rcCalPopup::after {
    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%232E3F66%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;
}

/* 5. Alert border-color raw leak */
body.fp2-theme-bolton .alert.alert-light-info { border-color: rgba(64, 86, 132, .25) !important; }

/* 6. Communicator reply-box focus glow */
body.fp2-theme-bolton.spcmsg .spc-replybox:focus { box-shadow: 0 0 0 3px rgba(64, 86, 132, .12) !important; }

/* 7. Announcement ticker (2026-09-30) - see the SSUET block's own comment
   above for why this needs a hardcoded per-theme override at all. Hatch =
   accent-warm (#2E3F66 = rgb(46,63,102)), pulse = accent (#405684 =
   rgb(64,86,132)). */
body.fp2-theme-bolton .fp2-ticker::after { background: repeating-linear-gradient(135deg, rgba(46,63,102,.04) 0 1px, transparent 1px 16px); }
body.fp2-theme-bolton .fp2-ticker-live { box-shadow: 0 0 0 0 rgba(64,86,132,.5); animation-name: fp2tickerpulse-bolton; }
@keyframes fp2tickerpulse-bolton { 0%{ box-shadow: 0 0 0 0 rgba(64,86,132,.45); } 70%{ box-shadow: 0 0 0 7px rgba(64,86,132,0); } 100%{ box-shadow: 0 0 0 0 rgba(64,86,132,0); } }