/* ============================================================
   ODIE Dark Mode
   Telerik controls use the Telerik "Glow" skin.
   This file only handles ODIE / Limitless custom styling.
   ============================================================ */

html[data-color-theme="dark"] {
    --odie-body-color: #E7E9ED;
    --odie-body-bg: #181A1F;
    --odie-muted: #A7ADB7;
    --odie-border: #464950;
    --odie-border-light: #34373D;
    --odie-link: #72C3F0;
    --odie-link-hover: #A7DDF8;
    --odie-editor-bg: #202228;
}

    html[data-color-theme="dark"] body,
    html[data-color-theme="dark"] #divMainContent {
        color: var(--odie-body-color);
        background-color: var(--odie-body-bg);
    }

    html[data-color-theme="dark"] .card {
        background-color: #23262C;
        border-color: #34373D;
    }

    html[data-color-theme="dark"] .card-header,
    html[data-color-theme="dark"] .card-footer {
        border-color: #34373D;
    }

    html[data-color-theme="dark"] h1,
    html[data-color-theme="dark"] h2,
    html[data-color-theme="dark"] h3,
    html[data-color-theme="dark"] h4,
    html[data-color-theme="dark"] h5,
    html[data-color-theme="dark"] h6,
    html[data-color-theme="dark"] .card-title {
        color: #F1F3F5;
    }

    html[data-color-theme="dark"] a {
        color: var(--odie-link);
    }

        html[data-color-theme="dark"] a:hover {
            color: var(--odie-link-hover);
        }

    /* Legacy ODIE text colors */
    html[data-color-theme="dark"] .label-id,
    html[data-color-theme="dark"] .label-hd-temp,
    html[data-color-theme="dark"] .data-bold,
    html[data-color-theme="dark"] .bold-header,
    html[data-color-theme="dark"] .icon_text,
    html[data-color-theme="dark"] .avatar_label {
        color: var(--odie-muted);
    }

    /* Legacy ODIE white/light containers */
    html[data-color-theme="dark"] .details_table,
    html[data-color-theme="dark"] .line,
    html[data-color-theme="dark"] .msg_body {
        background-color: #23262C;
    }

    /* .msg_head is .msg_body's other half - the clickable bar that expands it -
       and it was missed when that rule was written.  #ECECEC in the light sheet,
       so it has been a light grey strip sitting on top of a dark panel.  Network
       Dashboard renders four of them (Botnet Data, Antivirus Stats, Antivirus
       Logs, IPS Logs).

       The expand icon needs nothing, which is worth recording because it looks
       like it should.  /images/icons/expand.png is a background-image on the bar,
       and a dark glyph would have needed inverting - except the element also
       holds text, so filter: invert() would flip that too.  Measured instead:
       16x16, 67% opaque, mean ink luminance 203 of 255.  It is a LIGHT glyph, so
       it reads better on this bar than it did on #ECECEC. - 9/19/2026 */
    html[data-color-theme="dark"] .msg_head {
        background-color: #2A2F36;
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .linealt,
    html[data-color-theme="dark"] .lineselected {
        background-color: #292C32;
    }

    /* Legacy asp:GridView header text, #333333 in the light sheet.

       Global rather than page-scoped, which is the exception here and worth the
       reason: it is colour only, it appears on eleven pages across three
       sections, and no page could ever want dark-on-dark.  Three of those
       eleven - RegistrationAdd, RegistrationDetails and RegistrationEdit - are
       already converted and have been rendering this header near-black on a
       dark card since the Workshops pass.  A global rule fixes those without
       reopening them. - 9/18/2026 */
    html[data-color-theme="dark"] .gridview-header {
        color: #C9D1D9;
    }

    /* ODIE's save / submit button.  btn-light is a near-white Bootstrap fill in
       both themes - it does not resolve through a token - so dark mode has to
       restate it.

       Global for the same reasons .gridview-header above is: colour only, and
       very widely used - 168 .aspx/.ascx files carry .submit_button.  Seven
       page-scoped copies of this exact rule already existed when this was
       written (.sfe-sign, .walk-add, .fw-edit, .fw-workflow, .pl-edit,
       .slo-edit, .dp-page), all with identical values.  They still win on
       specificity and are harmless, but they are now redundant, and any page
       converted from here on needs no copy of its own. - 9/18/2026 */
    html[data-color-theme="dark"] .submit_button.btn-light {
        color: var(--odie-link) !important;
        background: #30363F !important;
        border-color: #4A535F !important;
    }

        html[data-color-theme="dark"] .submit_button.btn-light:hover,
        html[data-color-theme="dark"] .submit_button.btn-light:focus {
            color: var(--odie-link-hover) !important;
            background: #383F49 !important;
            border-color: #616B78 !important;
        }

    /* ODIE's small neutral action button - "Clear Signature", "Clear Approval".
       #333 on #fff with a #ccc border in master.css, and it had no dark rule at
       all, so it rendered as a white chip.  Its text was coming out light blue
       rather than #333, because these are LinkButtons: the global
       html[data-color-theme="dark"] a rule is (0,1,2) and the class rule that
       sets #333 is (0,1,0), so the anchor colour was winning.  The rule below is
       (0,2,1) and takes both back without needing !important.

       Global rather than page-scoped because the class lives in master.css, so
       it is shared vocabulary - the same call as .gridview-header and
       .submit_button.btn-light above.  Only ContractRequestDetails and
       ContractRequestEdit use it today.

       Values are the neutral-button set already used by the rgFileAttachments
       edit row, .rp-page input[type="submit"] and .btn-edit-offering, so the
       plain buttons in the app agree. - 9/19/2026 */
    html[data-color-theme="dark"] .light_grey_action_button {
        background-color: rgba(255, 255, 255, 0.04);
        color: #E7E9ED;
        border-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .light_grey_action_button:hover {
            background-color: rgba(255, 255, 255, 0.08);
            color: #FFFFFF;
            border-color: var(--odie-link);
        }

    /* Its sibling, #212529 on #f8f9fa with a #dee2e6 border.  Same family, same
       treatment - they appear next to each other and should not diverge.  Only
       SpedBillingUtility uses it. */
    html[data-color-theme="dark"] .light_grey_cancel_button {
        background-color: rgba(255, 255, 255, 0.04);
        color: #E7E9ED;
        border-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .light_grey_cancel_button:hover {
            background-color: rgba(255, 255, 255, 0.08);
            color: #FFFFFF;
            border-color: var(--odie-link);
        }

    /* Native check boxes and radio buttons.  asp:CheckBox, asp:CheckBoxList,
       asp:RadioButton and asp:RadioButtonList all render a bare native control,
       which the browser draws in its light chrome - a white box with a grey
       border - next to Telerik inputs that are already dark.

       Global for the same reasons .gridview-header and .submit_button.btn-light
       above are: colour only, and very widely used - 126 .aspx/.ascx files carry
       one of those four controls.  Three page-scoped copies of this exact rule,
       with identical values, already existed when this was written (.sb-page,
       .er-page, .lib-page).  They still win on specificity and are harmless, but
       they are now redundant, and any page converted from here on needs no copy
       of its own.

       Set on the controls rather than on a wrapper: color-scheme inherits, and a
       wrapper-level declaration would reach the Telerik text inputs nested
       inside, which take their fill from Glow and do not want the user agent's
       opinion.  accent-color is the checked fill and matches --odie-link.
       - 9/23/2026 */
    html[data-color-theme="dark"] input[type="checkbox"],
    html[data-color-theme="dark"] input[type="radio"] {
        color-scheme: dark;
        accent-color: #72C3F0;
    }

    /* ODIE's multi-line comment box.  .comment_textbox in master.css is width,
       max-width and height only - it carries no colour at all - and none of the
       global textarea rules below give a normal textarea a fill either; they
       only cover placeholder, readonly, disabled and focus.  So it has been
       rendering as a white box with black text on a dark card.

       Global rather than page-scoped, the same call as .gridview-header and
       .submit_button.btn-light above: colour only, the class lives in
       master.css, and it spans four sections - eight pages, four of which
       (NetworkDocumentUpload, TicketFeedback, RegistrationAdd, RegistrationEdit)
       were converted in earlier passes and are white-boxed today.  A global rule
       fixes those without reopening them.

       Values are the pair already used by .rp-page / .dp-page text inputs and
       .pdp-edit textareas, so every recessed field in the app agrees.
       - 9/23/2026 */
    html[data-color-theme="dark"] .comment_textbox {
        color: #E7E9ED;
        background: #1F242A;
        border: 1px solid #4A535F;
    }

    /* The copy-to-clipboard celebration - scripts/copy_celebration.js, styled
       by the .copy-celebration-* rules in master.css - shared since 9/23/2026
       by every "click to copy" spot: the API Key List, the Data Engine's
       sharable link, the URL Shortener list and details, and the calendar
       subscription link.  It replaced the little .star burst those pages
       carried inline, the one the URL SHORTENER and DATA ENGINE blocks below
       used to describe.

       Most of it needs no dark rule.  The ring borrows var(--odie-link), which
       this sheet redefines, and the canvas confetti reads data-color-theme
       itself and picks a brighter palette.  Only the sweep carries a literal
       brand colour: a translucent #157AAC highlight across the clicked
       element, too dim against the charcoal card, retuned here to the same
       translucent #72C3F0.

       Global for the usual reasons - colour only, the class lives in
       master.css, and it spans four sections. - 9/23/2026 */
    html[data-color-theme="dark"] .copy-celebration-flash {
        background-image: linear-gradient(100deg, transparent 25%, rgba(114, 195, 240, 0.26) 50%, transparent 75%);
    }

    /* Telerik RadLabel text */
    html[data-color-theme="dark"] .RadLabel,
    html[data-color-theme="dark"] .RadLabel_Glow {
        color: #F1F3F5 !important;
    }

    /* Dark mode placeholder text */
    html[data-color-theme="dark"] input::placeholder,
    html[data-color-theme="dark"] textarea::placeholder {
        color: #9AA3AF !important;
        opacity: 1 !important; /* Firefox likes to fade placeholders */
    }

    /* Optional: slightly brighter placeholder for Telerik text inputs too */
    html[data-color-theme="dark"] .riTextBox::placeholder,
    html[data-color-theme="dark"] .riTextBox[type="text"]::placeholder,
    html[data-color-theme="dark"] .riTextBox[type="search"]::placeholder,
    html[data-color-theme="dark"] .riTextBox[type="url"]::placeholder,
    html[data-color-theme="dark"] .riTextBox[type="email"]::placeholder,
    html[data-color-theme="dark"] .riTextBox[type="tel"]::placeholder,
    html[data-color-theme="dark"] .riTextBox[type="password"]::placeholder {
        color: #9AA3AF !important;
        opacity: 1 !important;
    }

    /* =========================================================================
   Dark Mode - Form / Telerik Cleanup
   ========================================================================= */


    /* -------------------------------------------------------------------------
   Placeholder text
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] input::placeholder,
    html[data-color-theme="dark"] textarea::placeholder,
    html[data-color-theme="dark"] .form-control::placeholder,
    html[data-color-theme="dark"] .riTextBox::placeholder {
        color: #9AA3AF !important;
        opacity: 1 !important;
    }


    /* -------------------------------------------------------------------------
   Read-only fields
   Still readable, but visually different from editable fields.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] input[readonly],
    html[data-color-theme="dark"] textarea[readonly],
    html[data-color-theme="dark"] .form-control[readonly],
    html[data-color-theme="dark"] .riTextBox[readonly] {
        color: #D6DAE0 !important;
        background-color: #303238 !important;
        border-color: #555A63 !important;
    }


    /* -------------------------------------------------------------------------
   Disabled fields
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] input:disabled,
    html[data-color-theme="dark"] textarea:disabled,
    html[data-color-theme="dark"] select:disabled,
    html[data-color-theme="dark"] .form-control:disabled,
    html[data-color-theme="dark"] .form-select:disabled {
        color: #9098A4 !important;
        background-color: #292B30 !important;
        border-color: #43474F !important;
        opacity: 1 !important;
    }


    /* Telerik disabled inputs */

    html[data-color-theme="dark"] .RadInput_Glow .riDisabled {
        color: #9098A4 !important;
        background-color: #292B30 !important;
    }


    /* Telerik disabled ComboBox */

    html[data-color-theme="dark"] .RadComboBox_Glow .rcbDisabled,
    html[data-color-theme="dark"] .RadComboBox_Glow .rcbDisabled .rcbInput {
        color: #9098A4 !important;
    }


    /* -------------------------------------------------------------------------
   Telerik RadLabel
   Some RadLabels otherwise inherit a very dark text color.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .RadLabel,
    html[data-color-theme="dark"] .RadLabel_Glow {
        color: #D7DAE0 !important;
    }


    /* -------------------------------------------------------------------------
   Standard ASP.NET / ODIE validation messages
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .error,
    html[data-color-theme="dark"] .field-validation-error,
    html[data-color-theme="dark"] .validation-summary-errors {
        color: #FF7B7B !important;
    }


    /* ASP.NET validators are often rendered as spans */

    html[data-color-theme="dark"] span[style*="color:Red"],
    html[data-color-theme="dark"] span[style*="color: red"] {
        color: #FF7B7B !important;
    }


    /* -------------------------------------------------------------------------
   Required-field asterisk
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .required,
    html[data-color-theme="dark"] .required-field,
    html[data-color-theme="dark"] .requiredField {
        color: #FF6969 !important;
    }


    /* -------------------------------------------------------------------------
   Muted/help text
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .text-muted,
    html[data-color-theme="dark"] .form-text {
        color: #A7ADB7 !important;
    }


    /* -------------------------------------------------------------------------
   Focus state for regular HTML / Bootstrap inputs
   Telerik Glow handles its own focus styling.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .form-control:focus,
    html[data-color-theme="dark"] .form-select:focus,
    html[data-color-theme="dark"] input[type="text"]:focus,
    html[data-color-theme="dark"] input[type="url"]:focus,
    html[data-color-theme="dark"] input[type="email"]:focus,
    html[data-color-theme="dark"] input[type="password"]:focus,
    html[data-color-theme="dark"] textarea:focus {
        border-color: #6db5ff !important;
        box-shadow: 0 0 0 0.125rem rgba(114, 195, 240, 0.22) !important;
        outline: 0;
    }


    html[data-color-theme="dark"] .icon_text,
    html[data-color-theme="dark"] .icon_text a,
    html[data-color-theme="dark"] .icon_text span {
        color: #B8DDF5 !important;
    }

        html[data-color-theme="dark"] .icon_text a:hover {
            color: #FFFFFF !important;
        }

    html[data-color-theme="dark"] .msg_body img,
    html[data-color-theme="dark"] .details_table img,
    html[data-color-theme="dark"] .line img,
    html[data-color-theme="dark"] .linealt img {
        max-width: 100%;
        height: auto;
    }

    /* =========================================================================
   Dark Mode - Navigation / Header Chrome
   Match the Limitless dark theme: white navigation foregrounds.
   ========================================================================= */


    /* -------------------------------------------------------------------------
   Main left navigation

   Limitless's sidebar-dark theme is designed for white/light navigation.
   ODIE's global link color otherwise makes these links blue.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .sidebar-dark .nav-sidebar {
        --nav-link-color: rgba(255, 255, 255, 0.90);
        --nav-link-hover-color: #FFFFFF;
        --nav-link-active-color: #FFFFFF;
    }

        html[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-link {
            color: rgba(255, 255, 255, 0.90) !important;
        }

            html[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-link:hover,
            html[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-link:focus,
            html[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-item-open > .nav-link,
            html[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-item-expanded > .nav-link,
            html[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-link[aria-current="page"] {
                color: #FFFFFF !important;
            }

            /* Phosphor menu icons and submenu arrows */
            html[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-link i,
            html[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-link::after {
                color: inherit !important;
            }


    /* -------------------------------------------------------------------------
   Top-right account / notifications

   Bell icon, user name, etc.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .navbar.navbar-dark .navbar-nav-link {
        color: #FFFFFF !important;
    }

        html[data-color-theme="dark"] .navbar.navbar-dark .navbar-nav-link:hover,
        html[data-color-theme="dark"] .navbar.navbar-dark .navbar-nav-link:focus {
            color: #FFFFFF !important;
        }

        html[data-color-theme="dark"] .navbar.navbar-dark .navbar-nav-link i,
        html[data-color-theme="dark"] .navbar.navbar-dark .navbar-nav-link > span:not(.badge) {
            color: #FFFFFF !important;
        }


    /* -------------------------------------------------------------------------
   Page action icons beside the page title

   Make both the caption and the old bitmap icons white.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .title_icons_style a,
    html[data-color-theme="dark"] .title_icons_style_link,
    html[data-color-theme="dark"] .title_icons_style span,
    html[data-color-theme="dark"] .title_icons_style_span {
        color: #FFFFFF !important;
    }

        html[data-color-theme="dark"] .title_icons_style a:hover,
        html[data-color-theme="dark"] .title_icons_style_link:hover {
            color: #FFFFFF !important;
        }

    /* =========================================================================
   Dark Mode - Account dropdown menu
   ========================================================================= */

    html[data-color-theme="dark"] .navbar .dropdown-menu .dropdown-item {
        color: #FFFFFF !important;
    }

        html[data-color-theme="dark"] .navbar .dropdown-menu .dropdown-item i {
            color: #FFFFFF !important;
        }

        /* Hover / keyboard focus */
        html[data-color-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
        html[data-color-theme="dark"] .navbar .dropdown-menu .dropdown-item:focus {
            color: #FFFFFF !important;
            background-color: rgba(255, 255, 255, 0.08) !important;
        }

    /* Divider lines */
    html[data-color-theme="dark"] .navbar .dropdown-menu .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    /* =========================================================================
   Welcome Page - Feature Buttons
   Inline dark text is retained for light-mode accessibility.
   Dark mode overrides it here.
   ========================================================================= */

    /* Workshops */
    html[data-color-theme="dark"] .odie-home .btn-flat-secondary {
        color: var(--odie-link) !important;
        border-color: var(--odie-link) !important;
        background-color: rgba(114, 195, 240, 0.08) !important;
    }

        html[data-color-theme="dark"] .odie-home .btn-flat-secondary:hover,
        html[data-color-theme="dark"] .odie-home .btn-flat-secondary:focus {
            color: var(--odie-link-hover) !important;
            border-color: var(--odie-link-hover) !important;
            background-color: rgba(114, 195, 240, 0.16) !important;
        }


    /* Helpdesk */
    html[data-color-theme="dark"] .odie-home .btn-flat-warning {
        color: #F5A15C !important;
        border-color: #F5A15C !important;
        background-color: rgba(245, 161, 92, 0.08) !important;
    }

        html[data-color-theme="dark"] .odie-home .btn-flat-warning:hover,
        html[data-color-theme="dark"] .odie-home .btn-flat-warning:focus {
            color: #FFC08A !important;
            border-color: #FFC08A !important;
            background-color: rgba(245, 161, 92, 0.16) !important;
        }


    /* Media Catalog */
    html[data-color-theme="dark"] .odie-home .btn-flat-primary {
        color: var(--odie-link) !important;
        border-color: var(--odie-link) !important;
        background-color: rgba(114, 195, 240, 0.08) !important;
    }

        html[data-color-theme="dark"] .odie-home .btn-flat-primary:hover,
        html[data-color-theme="dark"] .odie-home .btn-flat-primary:focus {
            color: var(--odie-link-hover) !important;
            border-color: var(--odie-link-hover) !important;
            background-color: rgba(114, 195, 240, 0.16) !important;
        }


    /* =========================================================================
   Welcome Page - Quick Links
   ========================================================================= */

    /* Quick Links list */
    html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }


    /* Each quick-link row */
    html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks .nav-link {
        display: flex;
        align-items: center;
        color: #E7E9ED !important;
        border-radius: 0.375rem;
        padding: 0.65rem 1.25rem;
        text-decoration: none !important;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    }


        /* Quick-link icons */
        html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks .nav-link i {
            flex: 0 0 1.6rem;
            width: 1.6rem;
            margin-right: 0.75rem;
            color: #FFFFFF !important;
            font-size: 1.25rem;
            text-align: center;
        }


        /* Hover / keyboard focus */
        html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks .nav-link:hover,
        html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks .nav-link:focus {
            color: #FFFFFF !important;
            background-color: rgba(255, 255, 255, 0.06);
        }


            /* Keep icons white on hover/focus */
            html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks .nav-link:hover i,
            html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks .nav-link:focus i {
                color: #FFFFFF !important;
            }


    /* Divider between ODIE links and ESU 10 website links */
    html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks .nav-item-divider {
        height: 1px;
        margin: 0.55rem 1.25rem;
        background-color: var(--odie-border);
        border: 0;
    }


    /* Remove any unwanted underline inherited from normal ODIE links */
    html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks a,
    html[data-color-theme="dark"] .odie-home #ctl00_cphBody_divQuickLinks a:hover {
        text-decoration: none !important;
    }


    /* System-generated memo information */
    html[data-color-theme="dark"] .memo-sysmsgs,
    html[data-color-theme="dark"] .memo-sysmsgs * {
        color: var(--odie-muted) !important;
    }


    /* -------------------------------------------------------------------------
   Memo bodies

   TicketDetails assigns the memo body straight through (lblMemo.Text =
   Memo.Body), so what renders is whatever HTML the mail client produced. Mail
   clients stamp an explicit text color onto every element they emit, typically
   a near-black like #333333, which is unreadable on the dark memo card.

   Neutralising the inline color lets the text fall back to the memo's own
   color. Two carve-outs:

   Elements that also declare a background are left alone. Nothing in the memos
   looked at so far does this, but if a sender ever pastes a block with its own
   fill, the color and background were chosen together and recoloring only half
   of the pair would read worse than leaving both.

   A background of `transparent` is the exception to that, and it has to be
   handled explicitly. Word and Google Docs stamp

       style="background-color: transparent; color: #222222"

   onto nearly every element they emit, so the carve-out above was catching a
   whole pasted document and leaving it dark. That is not a deliberate fill, so
   it is let through. This surfaced on the workshop descriptions in the
   .ws-stored-html block near the end of this file, where pasting out of a word
   processor is the normal route; it reaches memos too whenever someone pastes
   into a ticket rather than replying by mail.

   <font color="..."> is an attribute rather than a style, so no [style*=]
   selector reaches it. Memo bodies go back far enough that it still turns up.

   Links keep a link color rather than inheriting body text, otherwise they stop
   looking like links. Their inline color would beat the plain `a` rule in this
   file, so this one carries !important.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .memo_data [style*="color:" i]:not([style*="background" i]):not(a),
    html[data-color-theme="dark"] .memo_data [style*="color:" i][style*="background-color: transparent" i]:not(a),
    html[data-color-theme="dark"] .memo_data [style*="color:" i][style*="background-color:transparent" i]:not(a) {
        color: inherit !important;
    }

    html[data-color-theme="dark"] .memo_data font[color] {
        color: inherit !important;
    }

    html[data-color-theme="dark"] .memo_data a[style*="color:" i] {
        color: var(--odie-link) !important;
    }

        html[data-color-theme="dark"] .memo_data a[style*="color:" i]:hover {
            color: var(--odie-link-hover) !important;
        }

    /* =========================================================================
   Ticket Details - Ticket Files
   ========================================================================= */

    /* Overall grid */
    html[data-color-theme="dark"] [id$="rgFileAttachments"].RadGrid,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgMasterTable {
        background: transparent !important;
        color: var(--odie-body-color) !important;
    }

    /* Grid command/header areas */
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgCommandRow td,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgHeader,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgFilterRow td {
        background-color: #13222D !important;
        color: #E7E9ED !important;
        border-color: var(--odie-border-light) !important;
    }

    /* Data / edit rows */
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgRow > td,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgAltRow > td,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow > td {
        background-color: #34424D !important;
        color: #E7E9ED !important;
        border-color: var(--odie-border-light) !important;
    }

    /* No records row */
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgNoRecords td {
        background-color: #34424D !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border-light) !important;
    }

    /* Attachment text box / fake upload input */
    html[data-color-theme="dark"] [id$="rgFileAttachments"] input[type="text"],
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruFakeInput,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .riTextBox {
        background-color: #181A1F !important;
        color: #E7E9ED !important;
        border: 1px solid var(--odie-border) !important;
        box-shadow: none !important;
    }

        /* Placeholder text */
        html[data-color-theme="dark"] [id$="rgFileAttachments"] input[type="text"]::placeholder,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruFakeInput::placeholder {
            color: var(--odie-muted) !important;
        }

    /* Telerik async upload select / browse button */
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruButton,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruBrowse {
        background-color: #334553 !important;
        color: #FFFFFF !important;
        border: 1px solid var(--odie-border) !important;
        box-shadow: none !important;
    }

        html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruButton:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruButton:focus,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruBrowse:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruBrowse:focus {
            background-color: #3E5363 !important;
            color: #FFFFFF !important;
            border-color: var(--odie-link) !important;
        }

    /* Upload / Cancel buttons in edit form */
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow .rgUpdate,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow .rgCancel,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow input[type="submit"],
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow input[type="button"],
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow button {
        background-color: rgba(255, 255, 255, 0.04) !important;
        color: #E7E9ED !important;
        border: 1px solid var(--odie-border) !important;
        box-shadow: none !important;
    }

        /* Hover for Upload / Cancel */
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow .rgUpdate:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow .rgUpdate:focus,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow .rgCancel:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow .rgCancel:focus,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow input[type="submit"]:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow input[type="button"]:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow button:hover {
            background-color: rgba(255, 255, 255, 0.08) !important;
            color: #FFFFFF !important;
            border-color: var(--odie-link) !important;
        }

        /* Make sure icons inside those buttons stay visible */
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow .rgUpdate *,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow .rgCancel *,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .rgEditRow button * {
            color: inherit !important;
        }

    /* File links in the grid */
    html[data-color-theme="dark"] [id$="rgFileAttachments"] a {
        color: var(--odie-link) !important;
    }

        html[data-color-theme="dark"] [id$="rgFileAttachments"] a:hover {
            color: var(--odie-link-hover) !important;
        }


    /* =========================================================================
   Ticket Details - Ticket Files - Final Cleanup
   ========================================================================= */


    /* -------------------------------------------------------------------------
   Selected file name
   Telerik renders the selected filename inside .ruUploadProgress.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruUploadProgress,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruFileProgress,
    html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruFileName {
        color: var(--odie-body-color) !important;
    }


    /* -------------------------------------------------------------------------
   Remove selected file button
   Reset Telerik's built-in padding/background positioning so the text
   actually sits in the center of the button.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruRemove {
        color: #FFFFFF !important;
        background-color: #334553 !important;
        background-image: none !important;
        border: 1px solid var(--odie-border) !important;
        width: auto !important;
        min-width: 90px !important;
        height: auto !important;
        padding: 0.5rem 0.85rem !important;
        margin: 0 !important;
        text-align: center !important;
        text-indent: 0 !important;
        line-height: 1.4 !important;
        border-radius: 0.375rem !important;
        box-shadow: none !important;
    }

        html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruRemove:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .ruRemove:focus {
            color: #FFFFFF !important;
            background-color: #3E5363 !important;
            border-color: var(--odie-link) !important;
        }


    /* -------------------------------------------------------------------------
   Upload File button
   TicketDetails.aspx gives this link .custom-insert-button through JS.
   Override the old light-mode page styles here.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] [id$="rgFileAttachments"] .custom-insert-button {
        color: #FFFFFF !important;
        background-color: #334553 !important;
        border-color: #526575 !important;
        text-decoration: none !important;
    }

        html[data-color-theme="dark"] [id$="rgFileAttachments"] .custom-insert-button:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .custom-insert-button:focus {
            color: #FFFFFF !important;
            background-color: #3E5363 !important;
            border-color: var(--odie-link) !important;
            text-decoration: none !important;
        }


    /* -------------------------------------------------------------------------
   Cancel button
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] [id$="rgFileAttachments"] .custom-cancel-button {
        color: #E7E9ED !important;
        background-color: transparent !important;
        border-color: #7A818B !important;
        text-decoration: none !important;
    }

        html[data-color-theme="dark"] [id$="rgFileAttachments"] .custom-cancel-button:hover,
        html[data-color-theme="dark"] [id$="rgFileAttachments"] .custom-cancel-button:focus {
            color: #FFFFFF !important;
            background-color: rgba(255, 255, 255, 0.08) !important;
            border-color: #A7ADB7 !important;
            text-decoration: none !important;
        }


    /* =========================================================================
   Dark Mode - Dropdown Menus
   ========================================================================= */

    html[data-color-theme="dark"] .dropdown-menu .dropdown-item {
        color: #FFFFFF !important;
        text-decoration: none !important;
    }

        html[data-color-theme="dark"] .dropdown-menu .dropdown-item i {
            color: #FFFFFF !important;
        }

        html[data-color-theme="dark"] .dropdown-menu .dropdown-item:hover,
        html[data-color-theme="dark"] .dropdown-menu .dropdown-item:focus {
            color: #FFFFFF !important;
            background-color: rgba(255, 255, 255, 0.08) !important;
        }

            html[data-color-theme="dark"] .dropdown-menu .dropdown-item:hover i,
            html[data-color-theme="dark"] .dropdown-menu .dropdown-item:focus i {
                color: #FFFFFF !important;
            }

    html[data-color-theme="dark"] .dropdown-menu .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    html[data-color-theme="dark"] .dropdown-menu .dropdown-item.disabled,
    html[data-color-theme="dark"] .dropdown-menu .dropdown-item:disabled {
        color: var(--odie-muted) !important;
    }

/* asset edit - see the ASSET EDIT block at the end of this file for
   .attribute_table, which used to live here unscoped. */


/* =========================================================================
   Dark Mode - Horizontal Rule
   ========================================================================= */

html[data-color-theme="dark"] hr {
    border: 0;
    border-top: 1px solid var(--odie-border);
    color: var(--odie-muted);
    overflow: visible;
    text-align: center;
    height: 1px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

    html[data-color-theme="dark"] hr::after {
        content: "§";
        position: relative;
        top: -0.7rem;
        padding: 0 0.6rem;
        background-color: #23262C;
        color: var(--odie-muted);
        font-size: 0.8rem;
    }

/* =========================================================================
   Contract Usage
   ========================================================================= */

html[data-color-theme="dark"] .contract-summary-card {
    background-color: #292C32;
    color: var(--odie-body-color);
    border-top: 1px solid var(--odie-border-light);
    border-right: 1px solid var(--odie-border-light);
    border-bottom: 1px solid var(--odie-border-light);
}

html[data-color-theme="dark"] .contract-summary-title {
    color: #F1F3F5;
}

html[data-color-theme="dark"] .contract-summary-date {
    color: var(--odie-muted);
}

/* Hour contract */
html[data-color-theme="dark"] .contract-summary-pill-hours {
    background-color: rgba(93, 202, 165, 0.14);
    color: #8DDFC4;
}

/* Service contract */
html[data-color-theme="dark"] .contract-summary-pill-service {
    background-color: rgba(180, 178, 169, 0.12);
    color: #D3D1CB;
}

/* ---- Added when the rest of the Contracts folder was converted -------------
   The block above was written before this page had a .ct-page wrapper and
   covers most of it.  These are the selectors it missed.  Left unscoped to
   match the rules around them.  .contract-summary-card is page-local; the
   .odie-pill family was too until 9/19/2026, when it moved to master.css and
   the helpdesk Ticket List's search view started using it for status and
   priority, so its rules below are shared and stay unscoped on purpose.
   - 9/18/2026 */

/* The card's left accent, which is the only thing distinguishing an hours
   contract from a service one at a glance.  #5DCAA5 and #B4B2A9 in the page's
   own block - both are mid-tone enough to survive, and are only nudged to sit
   with the pill colours above. */
html[data-color-theme="dark"] .contract-summary-card-hours {
    border-left-color: #4FB394;
}

html[data-color-theme="dark"] .contract-summary-card-service {
    border-left-color: #8A8880;
}

/* ---- The .odie-pill family --------------------------------------------------
   Declared in master.css since 9/19/2026 (see the Pills block there): the four
   contract states plus meaning-named variants the Ticket List's search view
   uses for status and priority.  All the pale-chip pattern: dark ink on a
   near-white tint.  Same treatment as the other chips in this folder - keep
   the hue, invert the relationship, and rely on the pill's own background
   rather than a border, because these sit inside cards rather than on the
   page.  Each contract name shares its rule with its meaning-named twin so the
   two can never drift. */
html[data-color-theme="dark"] .odie-pill-depleted,
html[data-color-theme="dark"] .odie-pill-neutral {
    background-color: rgba(180, 178, 169, 0.12);
    color: #D3D1CB;
}

html[data-color-theme="dark"] .odie-pill-covered,
html[data-color-theme="dark"] .odie-pill-teal {
    background-color: rgba(93, 202, 165, 0.14);
    color: #8DDFC4;
}

/* #27500A on #EAF3DE - a yellower green than "covered", and the difference is
   meaningful here (covered by contract vs no charge), so it is kept apart. */
html[data-color-theme="dark"] .odie-pill-no-charge,
html[data-color-theme="dark"] .odie-pill-success {
    background-color: rgba(139, 195, 74, 0.14);
    color: #B8DE8F;
}

html[data-color-theme="dark"] .odie-pill-overage,
html[data-color-theme="dark"] .odie-pill-danger {
    background-color: var(--sev-crit-bg);
    color: var(--sev-crit-text);
}

/* the three added for the Ticket List: high priority, medium priority, and a
   ticket waiting in dispatch; the first two take the dashboard's info and
   warning tokens so a priority means the same colour it does there */
html[data-color-theme="dark"] .odie-pill-info {
    background-color: var(--kb-info-chip-bg);
    color: var(--kb-info-text);
}

html[data-color-theme="dark"] .odie-pill-warning {
    background-color: var(--sev-warn-bg);
    color: var(--sev-warn-text);
}

html[data-color-theme="dark"] .odie-pill-indigo {
    background-color: rgba(157, 166, 217, 0.16);
    color: #C3C9EE;
}

html[data-color-theme="dark"] .odie-overage-note {
    color: var(--odie-muted);
}

/* ---- The .odie-steps strip ---------------------------------------------------
   Declared in master.css since 9/23/2026 (see the Steps block there):
   NewAccountRequest's three-stop "what happens next" path, with progress
   states for the card shown after the form is submitted.  Same call as the
   pills above - the class lives in master.css, so the rules stay unscoped.

   The badge is a white disc with a brand-blue ring; white would glare here,
   so it takes the raised-surface grey and a neutral shadow.  The dashed path
   and the waiting state's greys are lifted to read on charcoal.  A done badge
   fills with var(--odie-link), which in this theme is the pale #72C3F0, so
   its check mark turns dark rather than white.  The path and pulse colours
   come through the two custom properties the light sheet declares on
   .odie-steps, so the keyframes need no copy. */
html[data-color-theme="dark"] .odie-steps {
    --odie-steps-path: #3E4550;
    --odie-steps-pulse: rgba(114, 195, 240, 0.45);
}

html[data-color-theme="dark"] .odie-steps-badge {
    background: #2A2F36;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

html[data-color-theme="dark"] .odie-steps-item:hover .odie-steps-badge {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

html[data-color-theme="dark"] .odie-steps-item.is-done .odie-steps-badge {
    color: #10202B;
}

html[data-color-theme="dark"] .odie-steps-detail {
    color: var(--odie-muted);
}

html[data-color-theme="dark"] .odie-steps-item.is-waiting .odie-steps-badge,
html[data-color-theme="dark"] .odie-steps-item.is-waiting .odie-steps-eyebrow {
    color: #6F7A88;
}

html[data-color-theme="dark"] .odie-steps-item.is-waiting .odie-steps-title {
    color: var(--odie-muted);
}



/* =========================================================================
   Contract Usage - Dark Mode Polish
   ========================================================================= */


/* Contract cards: just a tiny bit of life */
/*html[data-color-theme="dark"] .contract-summary-card {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

    html[data-color-theme="dark"] .contract-summary-card:hover {
        background-color: #2D3037;
        border-color: #4A4E57;
        transform: translateY(-1px);
    }*/


/* Contract titles */
/*html[data-color-theme="dark"] .contract-summary-title {
    color: #F1F3F5;
    font-weight: 600;
}*/


/* Dates remain secondary, but not nearly invisible */
/*html[data-color-theme="dark"] .contract-summary-date {
    color: #B0B6C0;
}*/


/* Grid rows */
/*html[data-color-theme="dark"] #ctl00_cphBody_rgContractUsage .rgRow > td,
html[data-color-theme="dark"] #ctl00_cphBody_rgContractUsage .rgAltRow > td {
    transition: background-color 0.12s ease-in-out;
}

html[data-color-theme="dark"] #ctl00_cphBody_rgContractUsage .rgRow:hover > td,
html[data-color-theme="dark"] #ctl00_cphBody_rgContractUsage .rgAltRow:hover > td {
    background-color: #414E58 !important;
}*/


/* Grid links brighten on hover */
/*html[data-color-theme="dark"] #ctl00_cphBody_rgContractUsage a:hover {
    color: var(--odie-link-hover) !important;
}*/



/* =========================================================================
   Contract Usage - Status / Progress
   ========================================================================= */

html[data-color-theme="dark"] .contract-usage-stats.contract-usage-healthy {
    --contract-usage-accent: #39B98C;
}

html[data-color-theme="dark"] .contract-usage-stats.contract-usage-low {
    --contract-usage-accent: #E89B35;
}

html[data-color-theme="dark"] .contract-usage-stats.contract-usage-over {
    --contract-usage-accent: #D94B4B;
}


/* Progress heading */

html[data-color-theme="dark"] .contract-usage-progress-header {
    color: var(--odie-muted);
}

html[data-color-theme="dark"] .contract-usage-progress-value strong {
    color: var(--odie-body-color);
}


/* Progress track */

html[data-color-theme="dark"] .contract-usage-progress {
    background-color: #34373D;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}


/* Stats */

html[data-color-theme="dark"] .contract-usage-stat-label {
    color: var(--odie-muted);
}

html[data-color-theme="dark"] .contract-usage-stat strong,
html[data-color-theme="dark"] .contract-usage-value {
    color: var(--odie-body-color);
}

html[data-color-theme="dark"] .contract-usage-note {
    color: var(--odie-muted);
}


/* Overage pill */

html[data-color-theme="dark"] .contract-usage-pill-over {
    color: #FFB4B4;
    background-color: rgba(217, 75, 75, 0.16);
    border: 1px solid rgba(217, 75, 75, 0.28);
}


/* Running-low pill */

html[data-color-theme="dark"] .contract-usage-pill-low {
    color: #FFC98F;
    background-color: rgba(232, 155, 53, 0.14);
    border: 1px solid rgba(232, 155, 53, 0.26);
}


/* No contract */

html[data-color-theme="dark"] .contract-usage-empty {
    color: var(--odie-muted);
}

/* =========================================================================
   Entity Dashboard
   The page declares its color vocabulary in a :root block inside its own
   <style>. This file loads after cphHead, and html[data-color-theme="dark"]
   outranks :root, so redefining the tokens here is all that is needed for
   any panel that reads them.

   Every panel on the page now reads these tokens, so this applies page-wide.
   While the conversion was in progress this was scoped to a list of the
   individual panels already converted, because a panel still holding its own
   color literals would have rendered dark tints on a white surface. That list
   is retired.
   ========================================================================= */

html[data-color-theme="dark"] {
    /* Severity palette. Solids stay punchy for donut segments and dots; the
       fills become low-alpha tints and the text goes light. */
    --sev-crit: #F2555A;
    --sev-crit-bg: rgba(242, 85, 90, 0.14);
    --sev-crit-border: rgba(242, 85, 90, 0.35);
    --sev-crit-text: #FFA8AB;
    --sev-warn: #F0A33A;
    --sev-warn-bg: rgba(240, 163, 58, 0.14);
    --sev-warn-border: rgba(240, 163, 58, 0.34);
    --sev-warn-text: #FFCC80;
    --sev-grey: #8B95A1;
    --sev-grey-bg: rgba(139, 149, 161, 0.12);
    --sev-grey-border: rgba(139, 149, 161, 0.30);
    --sev-grey-text: #B6BDC6;
    --sev-ok: #5FBF4B;
    --sev-ok-bg: rgba(95, 191, 75, 0.13);
    --sev-ok-border: rgba(95, 191, 75, 0.32);
    --sev-ok-text: #A5DE95;
    /* CISA vulnerability levels, used by Cyber Hygiene. Declared here so the
       palette stays in one place when that panel is converted. */
    --sev-high: #FF8A4C;
    --sev-high-bg: rgba(255, 138, 76, 0.14);
    --sev-high-border: rgba(255, 138, 76, 0.32);
    --sev-high-text: #FFBE96;
    --sev-med: #F5CE4A;
    --sev-med-bg: rgba(245, 206, 74, 0.13);
    --sev-med-border: rgba(245, 206, 74, 0.30);
    --sev-med-text: #F7DE93;
    --sev-low: #7FAAF5;
    --sev-low-bg: rgba(127, 170, 245, 0.14);
    --sev-low-border: rgba(127, 170, 245, 0.32);
    --sev-low-text: #AFC9F8;
    /* Surfaces, borders, and text, keyed to the #23262C card the panels sit on. */
    --ed-surface: #23262C;
    --ed-surface-alt: #2A2D34;
    --ed-surface-sunken: #1E2127;
    --ed-surface-hover: #2E3138;
    --ed-surface-alt-hover: #343841;
    --ed-btn-hover: rgba(255, 255, 255, 0.08);
    --ed-header-bg: #2A2F37;
    --ed-header-bg-hover: #333944;
    --ed-border: #3A3E45;
    --ed-border-card: #34373D;
    --ed-border-light: #3A3E45;
    --ed-border-subtle: #33373E;
    --ed-border-strong: #4A4F58;
    --ed-text: #EDEFF2;
    --ed-text-secondary: #A7ADB7;
    --ed-text-muted: #8E98A4;
    --ed-text-faint: #7B8593;
    --ed-accent: var(--odie-link);
    --ed-accent-hover: var(--odie-link-hover);
    --ed-accent-soft: rgba(114, 195, 240, 0.14);
    --ed-accent-wash: rgba(114, 195, 240, 0.10);
    --ed-header-border: #3E4550;
    --ed-info-bg: rgba(114, 195, 240, 0.13);
    --ed-info-text: #A8D5F5;
    --ed-donut-track: #31353C;
    --ed-count-badge-bg: rgba(255, 255, 255, 0.10);
    --ed-flash-ring: rgba(114, 195, 240, 0.45);
    --ed-chevron: #A7ADB7;
    /* The Scan for Issues button stays a filled blue in both modes, so it needs
       its own pair. --ed-accent inverts to a light blue in dark, which would put
       white label text on a pale fill. */
    --ed-btn-primary-bg: #2F6FA8;
    --ed-btn-primary-bg-hover: #3A82BE;
    --ed-btn-primary-fg: #FFFFFF;
    --ed-spinner: #4FC3DC;
}


/* =========================================================================
   Knowledgebase articles

   master.css carries the whole article stylesheet and it is entirely light:
   solid pastel fills on the callouts, chips and badges, and near-black text
   throughout. Nothing there changes. Only color is overridden here, so every
   size, spacing and layout rule stays in one place.

   The semantic families map onto the severity tokens already declared above,
   so a warning callout in an article is the same amber as a warning on the
   Entity Dashboard. The solid pastel fills become low-alpha tints of the same
   colors, which is what stops them reading as bright blocks on a dark page.
   ========================================================================= */

html[data-color-theme="dark"] {
    /* Informational blue. There is no --sev-info, and --ed-info-* is named for
       the Entity Dashboard, so the article palette gets its own pair. */
    --kb-info: var(--odie-link);
    --kb-info-bg: rgba(114, 195, 240, 0.10);
    --kb-info-chip-bg: rgba(114, 195, 240, 0.18);
    --kb-info-text: #A8D5F5;
    /* Heading text sits brighter than body text, matching how #1d2329 sits
       against #2c3034 in light mode. */
    --kb-heading: #EDEFF2;
    /* Body copy inside a tinted card, one step down from --odie-body-color. */
    --kb-card-text: #C7CCD4;
}

    /* ----- Article header ----- */
    html[data-color-theme="dark"] .kb-article-header {
        border-bottom-color: var(--odie-border-light);
    }

    html[data-color-theme="dark"] .kb-article-title {
        color: var(--kb-heading);
    }

    html[data-color-theme="dark"] .kb-article-meta {
        color: var(--odie-muted);
    }

        html[data-color-theme="dark"] .kb-article-meta .kb-meta-divider {
            color: #6B7280;
        }

    /* ----- Search highlight bar -----
       The sticky bar that appears when an article is opened from a knowledgebase
       search.  It began as the page's own .kb-search-bar; on 9/19/2026 the bar
       and its highlighting moved to scripts/search_highlight.js, shared with the
       helpdesk Ticket Details page, and the classes became .search-highlight-bar
       and mark.search-mark, declared in master.css.  master.css paints the bar
       white with a light border literal, so the dark surface is here.

       master.css paints the bar a pale amber with amber borders, all literals,
       so the dark surface is here: the same amber family, deepened until it
       sits on the #23262C cards without glowing, with the rail kept bright so
       the bar still reads as part of the search rather than another card.

       .search-highlight-bar-text and .search-highlight-bar a need nothing: margin
       and white-space only.  mark.search-mark is styled with the search result
       cards (SEARCH RESULTS, at the end of this file) so the two stay identical -
       as of 9/22/2026 that is a solid #BE9420 with dark ink, not the translucent
       wash it started as.  The current-match variant sets an explicit color:#000
       on a solid #FFC107 in master.css, reads correctly on either background,
       and is left alone. */
    html[data-color-theme="dark"] .search-highlight-bar {
        background-color: #35301F;
        border-color: rgba(255, 193, 7, 0.35);
        border-left-color: #E0A800;
        color: var(--odie-body-color);
        box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, 0.5);
    }

        html[data-color-theme="dark"] .search-highlight-bar-icon {
            color: var(--sev-warn-text);
        }

    /* ----- Body copy ----- */
    html[data-color-theme="dark"] .kb-article {
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .kb-article .lead-paragraph {
            color: var(--odie-body-color);
        }

        /* ----- Callouts ----- */
        html[data-color-theme="dark"] .kb-article .callout-info {
            background: var(--kb-info-bg);
            color: var(--kb-info-text);
        }

        html[data-color-theme="dark"] .kb-article .callout-warning {
            background: var(--sev-warn-bg);
            color: var(--sev-warn-text);
        }

        html[data-color-theme="dark"] .kb-article .callout-success {
            background: var(--sev-ok-bg);
            color: var(--sev-ok-text);
        }

        html[data-color-theme="dark"] .kb-article .callout-danger {
            background: var(--sev-crit-bg);
            color: var(--sev-crit-text);
        }

        /* ----- Section headings ----- */
        html[data-color-theme="dark"] .kb-article .section-heading .ph {
            color: var(--odie-link);
        }

        html[data-color-theme="dark"] .kb-article .section-heading h4 {
            color: var(--kb-heading);
        }

        /* ----- Step grid -----
   In light mode the #f5f6f8 fill alone reads as a card against white. On dark
   the equivalent fill sits too close to the article surface to register, so a
   border does that work instead. */
        html[data-color-theme="dark"] .kb-article .step-card {
            background: var(--ed-surface-alt);
            border: 1px solid var(--odie-border-light);
        }

            html[data-color-theme="dark"] .kb-article .step-card:hover {
                box-shadow: 0 .375rem .75rem rgba(0, 0, 0, .35);
            }

        html[data-color-theme="dark"] .kb-article .step-num {
            background: var(--ed-surface);
            color: var(--odie-link);
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .4);
        }

        html[data-color-theme="dark"] .kb-article .step-icon {
            color: var(--odie-link);
        }

        html[data-color-theme="dark"] .kb-article .step-card h6 {
            color: var(--kb-heading);
        }

        html[data-color-theme="dark"] .kb-article .step-card small {
            color: var(--odie-muted);
        }

        /* ----- Highlight cards ----- */
        html[data-color-theme="dark"] .kb-article .highlight-card-info {
            background: var(--kb-info-bg);
        }

        html[data-color-theme="dark"] .kb-article .highlight-card-warning {
            background: var(--sev-warn-bg);
        }

        html[data-color-theme="dark"] .kb-article .highlight-card-success {
            background: var(--sev-ok-bg);
        }

        html[data-color-theme="dark"] .kb-article .highlight-card-danger {
            background: var(--sev-crit-bg);
            border-left-color: var(--sev-crit);
        }

        html[data-color-theme="dark"] .kb-article .highlight-card-header h5 {
            color: var(--kb-heading);
        }

        html[data-color-theme="dark"] .kb-article .highlight-card p {
            color: var(--kb-card-text);
        }

    /* The left rails are declared outside .kb-article in master.css, so they need
   their own overrides rather than riding the rules above. */
    html[data-color-theme="dark"] .highlight-card-info {
        border-left-color: var(--kb-info);
    }

    html[data-color-theme="dark"] .highlight-card-warning {
        border-left-color: var(--sev-warn);
    }

    html[data-color-theme="dark"] .highlight-card-danger {
        border-left-color: var(--sev-crit);
    }

    html[data-color-theme="dark"] .highlight-card-success {
        border-left-color: var(--sev-ok);
    }

    /* ----- Icon chips ----- */
    html[data-color-theme="dark"] .kb-article .icon-chip {
        background: var(--kb-info-chip-bg);
        color: var(--kb-info-text);
    }

    html[data-color-theme="dark"] .kb-article .icon-chip-info {
        background: var(--kb-info-chip-bg);
        color: var(--kb-info-text);
    }

    html[data-color-theme="dark"] .kb-article .icon-chip-danger {
        background: var(--sev-crit-border);
        color: var(--sev-crit-text);
    }

    html[data-color-theme="dark"] .kb-article .icon-chip-warning {
        background: var(--sev-warn-border);
        color: var(--sev-warn-text);
    }

    html[data-color-theme="dark"] .kb-article .icon-chip-success {
        background: var(--sev-ok-border);
        color: var(--sev-ok-text);
    }

    /* ----- Field rows ----- */
    html[data-color-theme="dark"] .kb-article .field-row {
        border-bottom-color: var(--odie-border-light);
    }

        html[data-color-theme="dark"] .kb-article .field-row.highlight {
            background: var(--sev-warn-bg);
        }

        html[data-color-theme="dark"] .kb-article .field-row h6 {
            color: var(--kb-heading);
        }

        html[data-color-theme="dark"] .kb-article .field-row p {
            color: var(--odie-muted);
        }

    /* ----- Field badges ----- */
    html[data-color-theme="dark"] .kb-article .field-badge-required {
        background: var(--sev-crit-border);
        color: var(--sev-crit-text);
    }

    html[data-color-theme="dark"] .kb-article .field-badge-info {
        background: var(--kb-info-chip-bg);
        color: var(--kb-info-text);
    }

    html[data-color-theme="dark"] .kb-article .field-badge-warning {
        background: var(--sev-warn-border);
        color: var(--sev-warn-text);
    }

    html[data-color-theme="dark"] .kb-article .field-badge-success {
        background: var(--sev-ok-border);
        color: var(--sev-ok-text);
    }

    /* ----- Summary grid ----- */
    html[data-color-theme="dark"] .kb-article .summary-card-info {
        background: var(--kb-info-bg);
    }

    html[data-color-theme="dark"] .kb-article .summary-card-warning {
        background: var(--sev-warn-bg);
    }

    html[data-color-theme="dark"] .kb-article .summary-card-success {
        background: var(--sev-ok-bg);
    }

    html[data-color-theme="dark"] .kb-article .summary-card-secondary {
        background: var(--sev-grey-bg);
    }

    html[data-color-theme="dark"] .kb-article .summary-card-header h6 {
        color: var(--kb-heading);
    }

    html[data-color-theme="dark"] .kb-article .summary-card-info .ph {
        color: var(--kb-info-text);
    }

    html[data-color-theme="dark"] .kb-article .summary-card-warning .ph {
        color: var(--sev-warn-text);
    }

    html[data-color-theme="dark"] .kb-article .summary-card-success .ph {
        color: var(--sev-ok-text);
    }

    html[data-color-theme="dark"] .kb-article .summary-card-secondary .ph {
        color: var(--sev-grey-text);
    }

    html[data-color-theme="dark"] .kb-article .summary-card p {
        color: var(--kb-card-text);
    }

    /* ----- Figures ----- */
    html[data-color-theme="dark"] .kb-article .kb-figure img {
        border-color: var(--odie-border);
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .4);
    }

    html[data-color-theme="dark"] .kb-article .kb-figure figcaption {
        color: var(--odie-muted);
    }

    /* ----- Code -----
   master.css only sets wrapping on pre, so the fill and text come from the
   base theme. Both are set here so a code block reads as an inset panel. */
    html[data-color-theme="dark"] .kb-article pre {
        background: var(--ed-surface-sunken);
        border: 1px solid var(--odie-border-light);
        border-radius: .5rem;
        padding: .875rem 1rem;
        color: var(--kb-card-text);
    }

    html[data-color-theme="dark"] .kb-article code {
        color: var(--kb-card-text);
    }

    html[data-color-theme="dark"] .kb-article pre code {
        background: transparent;
        color: inherit;
    }


/* =========================================================================
   Staff Evaluation - Evaluator Dashboard
   =========================================================================

   The dashboard has a few page-local light-mode colors for the segmented
   summary rail. It also uses the shared se-status badge family. These dark
   overrides keep the same meaning and hierarchy without leaving bright white
   islands on the page.
   ========================================================================= */

html[data-color-theme="dark"] {
    --se-surface: #23262C;
    --se-surface-alt: #292E35;
    --se-surface-raised: #30363F;
    --se-surface-hover: #353D47;
    --se-border: #3D444E;
    --se-border-strong: #4A535F;
    --se-text: #E7E9ED;
    --se-text-secondary: #C5CBD3;
    --se-text-muted: #9EA7B3;
    --se-blue-bg: rgba(114, 195, 240, 0.14);
    --se-blue-text: #A8D5F5;
    --se-green-bg: rgba(95, 191, 75, 0.14);
    --se-green-text: #A5DE95;
    --se-amber-bg: rgba(240, 163, 58, 0.15);
    --se-amber-text: #FFD08A;
    --se-red-bg: rgba(242, 85, 90, 0.14);
    --se-red-text: #FFA8AB;
    --se-neutral-bg: rgba(255, 255, 255, 0.07);
    --se-neutral-text: #D0D5DC;
}

    /* -------------------------------------------------------------------------
   Shared Staff Evaluation status badges used by the dashboard
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .se-status-working {
        background: var(--se-neutral-bg);
        color: var(--se-neutral-text);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    html[data-color-theme="dark"] .se-status-waiting,
    html[data-color-theme="dark"] .se-status-review {
        background: var(--se-amber-bg);
        color: var(--se-amber-text);
        border: 1px solid rgba(240, 163, 58, 0.24);
    }

    html[data-color-theme="dark"] .se-status-signed {
        background: var(--se-blue-bg);
        color: var(--se-blue-text);
        border: 1px solid rgba(114, 195, 240, 0.24);
    }

    html[data-color-theme="dark"] .se-status-filed,
    html[data-color-theme="dark"] .se-status-completed {
        background: var(--se-green-bg);
        color: var(--se-green-text);
        border: 1px solid rgba(95, 191, 75, 0.24);
    }

    html[data-color-theme="dark"] .se-status-notstarted {
        background: #252A31;
        color: #C2C8D0;
        border-color: #626A75;
    }

    html[data-color-theme="dark"] .se-status-returned,
    html[data-color-theme="dark"] .se-status-deleted {
        background: var(--se-red-bg);
        color: var(--se-red-text);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

    html[data-color-theme="dark"] .se-status-date {
        color: var(--se-text-muted);
    }

    html[data-color-theme="dark"] .se-section-label,
    html[data-color-theme="dark"] .se-evidence-label {
        color: #F1B867;
    }

    html[data-color-theme="dark"] .se-add,
    html[data-color-theme="dark"] .se-action {
        color: var(--odie-link);
    }

        html[data-color-theme="dark"] .se-add:hover,
        html[data-color-theme="dark"] .se-action:hover {
            color: var(--odie-link-hover);
        }

    /* -------------------------------------------------------------------------
   Dashboard cards and filter area
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .evd-dashboard .evd-filter-card,
    html[data-color-theme="dark"] .evd-dashboard .evd-summary-card,
    html[data-color-theme="dark"] .evd-dashboard .evd-needs-card {
        border-color: var(--se-border);
    }

        html[data-color-theme="dark"] .evd-dashboard .evd-filter-card .details_table {
            background: transparent;
        }

        html[data-color-theme="dark"] .evd-dashboard .evd-filter-card .label {
            color: #E4E8ED;
        }

    /* -------------------------------------------------------------------------
   Segmented summary rail
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .evd-dashboard .evd-modules {
        gap: 9px;
    }

    html[data-color-theme="dark"] .evd-dashboard .evd-module {
        background: #252A31;
        border-color: var(--se-border);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    }

        html[data-color-theme="dark"] .evd-dashboard .evd-module .module-name {
            background: #2D333C;
            border-right-color: var(--se-border);
            color: #E4EAF2;
        }

    html[data-color-theme="dark"] .evd-dashboard a.module-seg {
        color: var(--se-text-secondary);
        border-right-color: var(--se-border);
        text-decoration: none !important;
        transition: background-color 0.12s ease-in-out, color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
    }

        html[data-color-theme="dark"] .evd-dashboard a.module-seg:hover,
        html[data-color-theme="dark"] .evd-dashboard a.module-seg:focus {
            color: #FFFFFF;
            background: rgba(114, 195, 240, 0.08);
        }

        html[data-color-theme="dark"] .evd-dashboard a.module-seg.module-seg-active {
            color: #FFFFFF;
            background: rgba(114, 195, 240, 0.11);
            box-shadow: inset 0 0 0 2px rgba(114, 195, 240, 0.75);
        }

    html[data-color-theme="dark"] .evd-dashboard .seg-count .seg-num {
        background: var(--se-blue-bg);
        color: var(--se-blue-text);
    }

    html[data-color-theme="dark"] .evd-dashboard .seg-good .seg-num {
        background: var(--se-green-bg);
        color: var(--se-green-text);
    }

    html[data-color-theme="dark"] .evd-dashboard .seg-neutral .seg-num {
        background: var(--se-neutral-bg);
        color: var(--se-neutral-text);
    }

    html[data-color-theme="dark"] .evd-dashboard .seg-bad .seg-num {
        background: var(--se-red-bg);
        color: var(--se-red-text);
    }

    html[data-color-theme="dark"] .evd-dashboard .seg-attention .seg-num {
        background: var(--se-amber-bg);
        color: var(--se-amber-text);
    }

    /* -------------------------------------------------------------------------
   Waiting-on-evaluator task card
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .evd-dashboard .evd-task {
        border-bottom-color: var(--se-border);
    }

        html[data-color-theme="dark"] .evd-dashboard .evd-task > i {
            color: #F3B45A;
        }

    html[data-color-theme="dark"] .evd-dashboard .evd-task-what {
        color: var(--se-text-secondary);
    }

    html[data-color-theme="dark"] .evd-dashboard a.evd-task-go {
        color: var(--se-amber-text);
    }

        html[data-color-theme="dark"] .evd-dashboard a.evd-task-go:hover,
        html[data-color-theme="dark"] .evd-dashboard a.evd-task-go:focus {
            color: #FFE0AB;
        }

    html[data-color-theme="dark"] .evd-dashboard .evd-task-footer,
    html[data-color-theme="dark"] .evd-dashboard .evd-muted {
        color: var(--se-text-muted);
    }

    html[data-color-theme="dark"] .evd-dashboard .evd-note a {
        color: var(--se-red-text);
    }

        html[data-color-theme="dark"] .evd-dashboard .evd-note a:hover {
            color: #FFC3C5;
        }

    /* -------------------------------------------------------------------------
   Employee grid

   Glow is already a dark Telerik skin. These overrides only bring its large
   surfaces into the same neutral charcoal family as ODIE's cards so the grid
   does not read as a separate blue/black theme inside the page.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgMasterTable {
        background: #252B32 !important;
        color: var(--se-text) !important;
        border-color: var(--se-border) !important;
    }

        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgHeader a {
            background: #1C2730 !important;
            color: #DCE3EA !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgRow > td {
            background: #29313A !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgAltRow > td {
            background: #2D3640 !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgAltRow:hover > td {
            background: #35414D !important;
        }

        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgPager > td {
            background: #1F282F !important;
            color: var(--se-text-secondary) !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .evd-dashboard .evd-grid.RadGrid_Glow .rgNoRecords td {
            background: #29313A !important;
            color: var(--se-text-muted) !important;
            border-color: #3A434D !important;
        }

    html[data-color-theme="dark"] .evd-dashboard .evd-grid img.rounded-pill {
        border: 1px solid #56606C;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }


    /* =========================================================================
   Staff Evaluation - Employee Dashboard

   The Employee Dashboard carries a small page-local color palette for its
   glance panels, section headings, muted copy and compact history grids. Those
   colors are deliberately light-mode values, so this block remaps them onto the
   shared Staff Evaluation dark palette introduced for the Evaluator Dashboard.

   EmployeeDashboard.aspx adds .emd-dashboard to its outer wrapper so every
   rule below stays page-scoped.
   ========================================================================= */

    /* -------------------------------------------------------------------------
   Cards and filter area
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .emd-dashboard .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .emd-dashboard .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .emd-dashboard .details_table .label {
            color: #E4E8ED;
        }

    /* -------------------------------------------------------------------------
   At-a-glance panels
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .emd-dashboard .emd-panel {
        background: #252A31;
        border-color: var(--se-border-strong);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    }

        html[data-color-theme="dark"] .emd-dashboard .emd-panel h3 {
            color: #F0F3F6;
        }

        html[data-color-theme="dark"] .emd-dashboard .emd-panel:hover {
            background: #292F37;
            border-color: #596471;
        }

    /* -------------------------------------------------------------------------
   Section headings and supporting copy
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .emd-dashboard .emd-section-title {
        color: #F1F3F5;
    }

    html[data-color-theme="dark"] .emd-dashboard .emd-muted,
    html[data-color-theme="dark"] .emd-dashboard .emd-source-note {
        color: var(--se-text-muted);
    }

    html[data-color-theme="dark"] .emd-dashboard .emd-notset {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .emd-dashboard .emd-note a {
        color: var(--se-red-text);
    }

        html[data-color-theme="dark"] .emd-dashboard .emd-note a:hover,
        html[data-color-theme="dark"] .emd-dashboard .emd-note a:focus {
            color: #FFC3C5;
        }

    /* -------------------------------------------------------------------------
   Compact Telerik grids

   Glow is already dark, but its default blue-gray surfaces do not match the
   neutral Staff Evaluation cards. Keep the same family used by the Evaluator
   Dashboard so moving between the two dashboards feels intentional.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow,
    html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgMasterTable {
        background: #252B32 !important;
        color: var(--se-text) !important;
        border-color: var(--se-border) !important;
    }

        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgHeader a {
            background: #1C2730 !important;
            color: #DCE3EA !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgRow > td {
            background: #29313A !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgAltRow > td {
            background: #2D3640 !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgAltRow:hover > td {
            background: #35414D !important;
        }

        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgNoRecords td {
            background: #29313A !important;
            color: var(--se-text-muted) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow td,
        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow .rgHeader {
            border-color: #3A434D !important;
        }

        /* Status badges and data links already use the shared Staff Evaluation dark
   palette. Keep their anchor boxes transparent so the grid row remains the
   visual surface instead of acquiring Telerik link-button chrome. */
        html[data-color-theme="dark"] .emd-dashboard .RadGrid_Glow a {
            background: transparent;
        }


    /* =========================================================================
   Staff Evaluation - Evaluation List

   This page was already in good shape with the Telerik Glow skin. These
   overrides are intentionally conservative: they simply bring the filter card,
   grid surfaces, row hover and pager into the same Staff Evaluation charcoal
   palette used by the Evaluator and Employee dashboards.

   EvaluationList.aspx adds .evl-list to the page wrapper and .evl-grid to the
   RadGrid so nothing here leaks into unrelated ODIE grids.
   ========================================================================= */

    html[data-color-theme="dark"] .evl-list .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .evl-list .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .evl-list .details_table .label {
            color: #E4E8ED;
        }

    /* Keep the list grid in the same neutral family as the two dashboards. */
    html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgMasterTable {
        background: #252B32 !important;
        color: var(--se-text) !important;
        border-color: var(--se-border) !important;
    }

        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgHeader a {
            background: #1C2730 !important;
            color: #DCE3EA !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgRow > td {
            background: #29313A !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgAltRow > td {
            background: #2D3640 !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgAltRow:hover > td {
            background: #35414D !important;
        }

        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgPager > td {
            background: #1F282F !important;
            color: var(--se-text-secondary) !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgNoRecords td {
            background: #29313A !important;
            color: var(--se-text-muted) !important;
            border-color: #3A434D !important;
        }

        /* Status badges should read as badges rather than acquiring any Telerik link
   background from the surrounding grid. */
        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow a .se-status {
            text-decoration: none !important;
        }

        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow td,
        html[data-color-theme="dark"] .evl-list .evl-grid.RadGrid_Glow .rgHeader {
            border-color: #3A434D !important;
        }


    /* =========================================================================
   Staff Evaluation - Professional Development Plan List

   This list already works well with the Glow skin and the shared Staff
   Evaluation status badges. The page-specific rules below only bring its
   filter card and RadGrid into the same dark palette and hover behavior as the
   Evaluation List.

   ProfessionalDevelopmentPlanList.aspx adds .pdl-list to the page wrapper and
   .pdl-grid to the RadGrid so these rules cannot affect other ODIE grids.
   ========================================================================= */

    html[data-color-theme="dark"] .pdl-list .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .pdl-list .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .pdl-list .details_table .label {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgMasterTable {
        background: #252B32 !important;
        color: var(--se-text) !important;
        border-color: var(--se-border) !important;
    }

        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgHeader a {
            background: #1C2730 !important;
            color: #DCE3EA !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgRow > td {
            background: #29313A !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgAltRow > td {
            background: #2D3640 !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgAltRow:hover > td {
            background: #35414D !important;
        }

        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgPager > td {
            background: #1F282F !important;
            color: var(--se-text-secondary) !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgNoRecords td {
            background: #29313A !important;
            color: var(--se-text-muted) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow a .se-status {
            text-decoration: none !important;
        }

        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow td,
        html[data-color-theme="dark"] .pdl-list .pdl-grid.RadGrid_Glow .rgHeader {
            border-color: #3A434D !important;
        }


    /* =========================================================================
   Staff Evaluation - Student Learning Objective List

   The SLO list is already largely dark-mode friendly because it uses Telerik
   Glow and the shared Staff Evaluation status badges. These page-scoped rules
   make its grid match the Evaluation and Professional Development Plan lists,
   while preserving the taller rows that naturally occur when an SLO has
   multiple teachers.

   StudentLearningObjectiveList.aspx adds .slo-list to the page wrapper and
   .slo-grid to the RadGrid so these rules cannot affect other ODIE grids.
   ========================================================================= */

    html[data-color-theme="dark"] .slo-list .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .slo-list .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .slo-list .details_table .label {
            color: #E4E8ED;
        }

    /* Main SLO grid */
    html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgMasterTable {
        background: #252B32 !important;
        color: var(--se-text) !important;
        border-color: var(--se-border) !important;
    }

        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgHeader a {
            background: #1C2730 !important;
            color: #DCE3EA !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgRow > td {
            background: #29313A !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgAltRow > td {
            background: #2D3640 !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgAltRow:hover > td {
            background: #35414D !important;
        }

        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgPager > td {
            background: #1F282F !important;
            color: var(--se-text-secondary) !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgNoRecords td {
            background: #29313A !important;
            color: var(--se-text-muted) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow td,
        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow .rgHeader {
            border-color: #3A434D !important;
        }

            /* A multi-teacher SLO can make a row several lines tall. Give the links a
   little breathing room without changing Telerik's overall row sizing. */
            html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow td .data-link {
                line-height: 1.55;
            }

        /* The status itself is a pill; keep the surrounding anchor visually quiet. */
        html[data-color-theme="dark"] .slo-list .slo-grid.RadGrid_Glow a .se-status {
            text-decoration: none !important;
        }


    /* =========================================================================
   Staff Evaluation - Framework List

   Framework List is a compact administrative list, so the dark-mode treatment
   stays intentionally simple. The page-specific hooks only align its filter
   card and RadGrid with the rest of Staff Evaluation.

   FrameworkList.aspx adds .fw-list to the page wrapper and .fw-grid to the
   RadGrid so these rules cannot affect unrelated ODIE grids.
   ========================================================================= */

    html[data-color-theme="dark"] .fw-list .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .fw-list .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .fw-list .details_table .label {
            color: #E4E8ED;
        }

    /* Main framework grid */
    html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgMasterTable {
        background: #252B32 !important;
        color: var(--se-text) !important;
        border-color: var(--se-border) !important;
    }

        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgHeader a {
            background: #1C2730 !important;
            color: #DCE3EA !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgRow > td {
            background: #29313A !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgAltRow > td {
            background: #2D3640 !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgAltRow:hover > td {
            background: #35414D !important;
        }

        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgPager > td {
            background: #1F282F !important;
            color: var(--se-text-secondary) !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgNoRecords td {
            background: #29313A !important;
            color: var(--se-text-muted) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow td,
        html[data-color-theme="dark"] .fw-list .fw-grid.RadGrid_Glow .rgHeader {
            border-color: #3A434D !important;
        }


    /* =========================================================================
   Staff Evaluation - Evaluation Records

   Evaluation Records is intentionally denser than the document-oriented list
   pages: one employee row can contain years of finished documents. The dark
   mode treatment therefore keeps the layout alone and concentrates on
   contrast, row separation, and the summary/secondary text that is defined by
   light-mode literals in EvaluationRecords.aspx.

   EvaluationRecords.aspx adds .evr-records to the page wrapper and .evr-grid
   to the RadGrid so nothing here affects unrelated ODIE pages.
   ========================================================================= */

    html[data-color-theme="dark"] .evr-records .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .evr-records .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .evr-records .details_table .label {
            color: #E4E8ED;
        }

    /* ----- roster summary --------------------------------------------------- */

    html[data-color-theme="dark"] .evr-records .evr-summary {
        color: #A7ADB7;
    }

        html[data-color-theme="dark"] .evr-records .evr-summary .evr-count {
            color: #8ED2F5;
        }

        html[data-color-theme="dark"] .evr-records .evr-summary .evr-count-none {
            color: #FF9B9B;
        }

    /* ----- secondary row text ---------------------------------------------- */

    html[data-color-theme="dark"] .evr-records .evr-note,
    html[data-color-theme="dark"] .evr-records .evr-title {
        color: #9EA7B2;
    }

    html[data-color-theme="dark"] .evr-records .se-none {
        color: #B6BDC6;
    }

    /* PDF actions sit beside document links and should stay clearly secondary
   without fading into the row background. */
    html[data-color-theme="dark"] .evr-records .evr-doc-pdf {
        color: #8ED2F5 !important;
    }

        html[data-color-theme="dark"] .evr-records .evr-doc-pdf:hover,
        html[data-color-theme="dark"] .evr-records .evr-doc-pdf:focus {
            color: #C4E8FA !important;
        }

    /* ----- main records grid ----------------------------------------------- */

    html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgMasterTable {
        background: #252B32 !important;
        color: var(--se-text) !important;
        border-color: var(--se-border) !important;
    }

        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgHeader a {
            background: #1C2730 !important;
            color: #DCE3EA !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgRow > td {
            background: #29313A !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgAltRow > td {
            background: #2D3640 !important;
            color: var(--se-text) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgAltRow:hover > td {
            background: #35414D !important;
        }

        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgPager > td {
            background: #1F282F !important;
            color: var(--se-text-secondary) !important;
            border-color: #39434D !important;
        }

        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgNoRecords td {
            background: #29313A !important;
            color: var(--se-text-muted) !important;
            border-color: #3A434D !important;
        }

        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow td,
        html[data-color-theme="dark"] .evr-records .evr-grid.RadGrid_Glow .rgHeader {
            border-color: #3A434D !important;
        }

    /* The records cells are intentionally tall when an employee has years of
   history. A little more vertical rhythm keeps long document stacks readable
   without turning each document into a separate card. */
    html[data-color-theme="dark"] .evr-records .evr-doc {
        line-height: 1.55;
    }

    html[data-color-theme="dark"] .evr-records .evr-note {
        margin-top: 3px;
    }


    /* =========================================================================
   Staff Evaluation - Formal Evaluation Details

   This page has a substantial light-mode rubric stylesheet in cphHead. The
   rules below deliberately change only color/surface treatment in dark mode;
   all rubric sizing, responsive grids, hierarchy, and workflow behavior stay
   in FormalEvaluationDetails.aspx.

   The page now wraps conBody in .fed-details so these overrides do not affect
   FormalEvaluationEdit or any other page that shares the ed-* class family.
   ========================================================================= */

    /* ----- top details card ------------------------------------------------- */

    html[data-color-theme="dark"] .fed-details .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .fed-details .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .fed-details .details_table .label {
            color: #E4E8ED;
        }

    /* ----- "what happens next" callout ------------------------------------- */

    html[data-color-theme="dark"] .fed-details .se-move-idle {
        background: #252A31;
        border-color: #3D444E;
    }

        html[data-color-theme="dark"] .fed-details .se-move-idle .se-move-title,
        html[data-color-theme="dark"] .fed-details .se-move-idle .se-move-text,
        html[data-color-theme="dark"] .fed-details .se-move-idle .se-move-ico {
            color: var(--se-text-secondary);
        }

    html[data-color-theme="dark"] .fed-details .se-move-amber,
    html[data-color-theme="dark"] .fed-details .se-move-waiting {
        background: rgba(240, 163, 58, 0.08);
        border-color: rgba(240, 163, 58, 0.28);
    }

        html[data-color-theme="dark"] .fed-details .se-move-amber .se-move-title,
        html[data-color-theme="dark"] .fed-details .se-move-amber .se-move-text,
        html[data-color-theme="dark"] .fed-details .se-move-waiting .se-move-title,
        html[data-color-theme="dark"] .fed-details .se-move-waiting .se-move-text {
            color: var(--se-amber-text);
        }

        html[data-color-theme="dark"] .fed-details .se-move-amber .se-move-ico,
        html[data-color-theme="dark"] .fed-details .se-move-waiting .se-move-ico {
            color: #FFD08A;
            background: rgba(240, 163, 58, 0.18);
        }

    html[data-color-theme="dark"] .fed-details .se-move-blue {
        background: rgba(114, 195, 240, 0.08);
        border-color: rgba(114, 195, 240, 0.26);
    }

        html[data-color-theme="dark"] .fed-details .se-move-blue .se-move-title,
        html[data-color-theme="dark"] .fed-details .se-move-blue .se-move-text,
        html[data-color-theme="dark"] .fed-details .se-move-blue .se-move-ico {
            color: var(--se-blue-text);
        }

    html[data-color-theme="dark"] .fed-details .se-move-green {
        background: rgba(95, 191, 75, 0.08);
        border-color: rgba(95, 191, 75, 0.26);
    }

        html[data-color-theme="dark"] .fed-details .se-move-green .se-move-title,
        html[data-color-theme="dark"] .fed-details .se-move-green .se-move-text,
        html[data-color-theme="dark"] .fed-details .se-move-green .se-move-ico {
            color: var(--se-green-text);
        }

    html[data-color-theme="dark"] .fed-details .se-move-btn {
        color: #1A1D21 !important;
        background: #F0B75A;
        border-color: #F0B75A;
    }

        html[data-color-theme="dark"] .fed-details .se-move-btn:hover,
        html[data-color-theme="dark"] .fed-details .se-move-btn:focus {
            color: #111317 !important;
            background: #FFD08A;
            border-color: #FFD08A;
        }

    /* ----- practice hierarchy ---------------------------------------------- */

    html[data-color-theme="dark"] .fed-details .ed-practice-desc,
    html[data-color-theme="dark"] .fed-details .ed-placement-comments {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .fed-details .ed-placement-none {
        color: var(--se-text-muted);
    }

    html[data-color-theme="dark"] .fed-details .ed-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .fed-details .ed-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fed-details .ed-cell,
    html[data-color-theme="dark"] .fed-details .ed-indicator {
        color: #E2E5E9;
    }

    /* The read-only page intentionally fades unselected choices. 55% works on a
   white page but becomes too faint once the cards themselves are dark. */
    html[data-color-theme="dark"] .fed-details .ed-level.ed-dim {
        opacity: 0.76;
    }

    /* ----- performance-level headers --------------------------------------- */

    /* Level 1 / not-met */
    html[data-color-theme="dark"] .fed-details .ed-head-1 {
        background: rgba(242, 85, 90, 0.13);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

        html[data-color-theme="dark"] .fed-details .ed-head-1 .ed-head-title {
            color: #FFB2B4;
        }

        html[data-color-theme="dark"] .fed-details .ed-head-1 .ed-head-desc {
            color: #EFA3A6;
        }

        html[data-color-theme="dark"] .fed-details .ed-head-1 .ed-head-check {
            color: #FF9EA1;
        }

    /* Proficient-range levels */
    html[data-color-theme="dark"] .fed-details .ed-head-green {
        background: rgba(95, 191, 75, 0.12);
        border: 1px solid rgba(95, 191, 75, 0.22);
    }

        html[data-color-theme="dark"] .fed-details .ed-head-green .ed-head-title {
            color: #B8E7AA;
        }

        html[data-color-theme="dark"] .fed-details .ed-head-green .ed-head-desc {
            color: #9FD68F;
        }

        html[data-color-theme="dark"] .fed-details .ed-head-green .ed-head-check {
            color: #A5DE95;
        }

    html[data-color-theme="dark"] .fed-details .ed-level.ed-sel.ed-sel-red {
        border-color: #D86468;
    }

    html[data-color-theme="dark"] .fed-details .ed-level.ed-sel.ed-sel-green {
        border-color: #67A54A;
    }

    /* ----- indicator / observation icons and supporting text --------------- */

    html[data-color-theme="dark"] .fed-details .ed-obs {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .fed-details .ed-ico-met {
        color: #78C65A;
    }

    html[data-color-theme="dark"] .fed-details .ed-ico-notmet {
        color: #EA777B;
    }

    html[data-color-theme="dark"] .fed-details .ed-ico-obs {
        color: #A7ADB7;
    }

    html[data-color-theme="dark"] .fed-details .ed-ico-link,
    html[data-color-theme="dark"] .fed-details .ed-ico-comment {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .fed-details .ed-comment-btn:hover .ed-ico-comment,
    html[data-color-theme="dark"] .fed-details .ed-comment-btn:focus-visible .ed-ico-comment {
        color: #FFD08A;
    }

    /* ----- linked evidence / level-placement evidence ---------------------- */

    html[data-color-theme="dark"] .fed-details .ed-linked {
        color: #C7CDD5;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .fed-details .ed-evidence {
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .fed-details .ed-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .fed-details .ed-status-obs {
        color: #B8E7AA;
        background: rgba(95, 191, 75, 0.14);
        border: 1px solid rgba(95, 191, 75, 0.24);
    }

    html[data-color-theme="dark"] .fed-details .ed-status-not {
        color: #FFB2B4;
        background: rgba(242, 85, 90, 0.14);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

    html[data-color-theme="dark"] .fed-details .ed-evidence-type {
        color: #B9C0C9;
        background: #343A43;
    }

    /* ----- indicators-by-level summary ------------------------------------- */

    html[data-color-theme="dark"] .fed-details .ed-summary {
        border-top-color: #555D68;
    }

    html[data-color-theme="dark"] .fed-details .ed-bar-label,
    html[data-color-theme="dark"] .fed-details .ed-bar-count,
    html[data-color-theme="dark"] .fed-details .ed-bar-key {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .fed-details .ed-bar-track {
        background: #3A4049;
    }

    html[data-color-theme="dark"] .fed-details .ed-bar-notmet {
        background: #C74F54;
    }

    html[data-color-theme="dark"] .fed-details .ed-bar-met {
        background: #4F8C2C;
    }

    /* The legend dots have inline light-mode colors in the page markup. */
    html[data-color-theme="dark"] .fed-details .ed-bar-dot[style*="#A32D2D" i] {
        background: #C74F54 !important;
    }

    html[data-color-theme="dark"] .fed-details .ed-bar-dot[style*="#3B6D11" i] {
        background: #4F8C2C !important;
    }

    html[data-color-theme="dark"] .fed-details .ed-bar-dot[style*="#EFEEE9" i] {
        background: #D6DAE0 !important;
        border-color: #7A838E !important;
    }

    /* ----- history and comment modal --------------------------------------- */

    html[data-color-theme="dark"] .fed-details #spanHistoryToggle {
        color: #A7ADB7 !important;
    }

    html[data-color-theme="dark"] .fed-details .modal-content {
        color: var(--se-text);
        background: #23262C;
        border-color: #454C56;
    }

    html[data-color-theme="dark"] .fed-details .modal-header,
    html[data-color-theme="dark"] .fed-details .modal-footer {
        border-color: #3D444E;
    }

    html[data-color-theme="dark"] .fed-details .ed-comment-modal-when {
        color: var(--se-text-muted);
    }


    /* -------------------------------------------------------------------------
   Formal Evaluation Details - waiting icon polish

   The amber "Waiting on ..." callout looked good overall, but the hourglass
   icon chip was too low-contrast against the dark amber card. These final
   overrides give the icon its own brighter circular surface, a clearer border,
   and a slightly stronger glyph color so it reads as a true focal point.
   ------------------------------------------------------------------------- */

    html[data-color-theme="dark"] .fed-details .se-move-waiting .se-move-ico {
        color: #F3B351;
        background: rgba(243, 179, 81, 0.16);
        border: 1px solid rgba(243, 179, 81, 0.24);
        box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.06);
    }

        html[data-color-theme="dark"] .fed-details .se-move-waiting .se-move-ico i {
            color: #F3B351;
        }


    /* =========================================================================
   Staff Evaluation - Formal Evaluation Edit

   FormalEvaluationEdit.aspx carries a sizeable light-mode rubric stylesheet.
   The page now adds .fee-edit to its main wrapper so these dark-mode color
   overrides stay isolated from the read-only details page and other Staff
   Evaluation screens.

   Layout, selection behavior, Telerik controls, and save logic are unchanged.
   ========================================================================= */

    /* ----- page cards / details table -------------------------------------- */

    html[data-color-theme="dark"] .fee-edit .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .fee-edit .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .fee-edit .details_table .label,
        html[data-color-theme="dark"] .fee-edit .main_table .label,
        html[data-color-theme="dark"] .fee-edit .main_table .label_no_colon {
            color: #E4E8ED;
        }

    /* ----- practice hierarchy ---------------------------------------------- */

    html[data-color-theme="dark"] .fee-edit .ee-practice-desc {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .fee-edit .se-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .fee-edit .se-rubric-title,
    html[data-color-theme="dark"] .fee-edit .ee-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fee-edit .se-cell,
    html[data-color-theme="dark"] .fee-edit .ee-cell,
    html[data-color-theme="dark"] .fee-edit .ee-indicator {
        color: #E2E5E9;
    }

    html[data-color-theme="dark"] .fee-edit .ee-observations {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .fee-edit .ee-linked-label {
        color: #C7CDD5;
    }

    /* ----- performance-level headers --------------------------------------- */

    /* Level 1 / not-met */
    html[data-color-theme="dark"] .fee-edit .se-head-1,
    html[data-color-theme="dark"] .fee-edit .ee-head-1 {
        background: rgba(242, 85, 90, 0.13);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

        html[data-color-theme="dark"] .fee-edit .se-head-1 .se-head-title,
        html[data-color-theme="dark"] .fee-edit .ee-head-1 .se-head-title {
            color: #FFB2B4;
        }

        html[data-color-theme="dark"] .fee-edit .se-head-1 .se-head-desc,
        html[data-color-theme="dark"] .fee-edit .ee-head-1 .se-head-desc {
            color: #EFA3A6;
        }

        html[data-color-theme="dark"] .fee-edit .ee-head-1 .ee-head-check {
            color: #FF9EA1;
        }

    /* Proficient-range levels */
    html[data-color-theme="dark"] .fee-edit .se-head-green,
    html[data-color-theme="dark"] .fee-edit .ee-head-green {
        background: rgba(95, 191, 75, 0.12);
        border: 1px solid rgba(95, 191, 75, 0.22);
    }

        html[data-color-theme="dark"] .fee-edit .se-head-green .se-head-title,
        html[data-color-theme="dark"] .fee-edit .ee-head-green .se-head-title {
            color: #B8E7AA;
        }

        html[data-color-theme="dark"] .fee-edit .se-head-green .se-head-desc,
        html[data-color-theme="dark"] .fee-edit .ee-head-green .se-head-desc {
            color: #9FD68F;
        }

        html[data-color-theme="dark"] .fee-edit .ee-head-green .ee-head-check {
            color: #A5DE95;
        }

    /* ----- linked evidence ------------------------------------------------- */

    html[data-color-theme="dark"] .fee-edit .se-linked {
        color: #C7CDD5;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    /* ----- evidence for level placement ----------------------------------- */

    html[data-color-theme="dark"] .fee-edit .se-evidence {
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .fee-edit .se-evidence-item,
    html[data-color-theme="dark"] .fee-edit .ee-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .fee-edit .se-evidence-type {
        color: #B9C0C9;
        background: #343A43;
    }

    /* ----- icons ----------------------------------------------------------- */

    html[data-color-theme="dark"] .fee-edit .se-ico-met,
    html[data-color-theme="dark"] .fee-edit .ee-ico-met {
        color: #78C65A;
    }

    html[data-color-theme="dark"] .fee-edit .se-ico-notmet,
    html[data-color-theme="dark"] .fee-edit .ee-ico-notmet {
        color: #EA777B;
    }

    html[data-color-theme="dark"] .fee-edit .se-ico-obs {
        color: #A7ADB7;
    }

    html[data-color-theme="dark"] .fee-edit .se-ico-link {
        color: #AAB2BD;
    }

    /* ----- enhanced-framework mark pills + evidence segmented controls ----- */

    html[data-color-theme="dark"] .fee-edit .ee-seg button {
        color: #D3D8DE;
        background: #2A3037;
        border-color: #4A535F;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
    }

        html[data-color-theme="dark"] .fee-edit .ee-seg button:hover {
            color: #EEF1F4;
            background: #313842;
            border-color: #697482;
        }

        html[data-color-theme="dark"] .fee-edit .ee-seg button:focus-visible {
            box-shadow: 0 0 0 3px rgba(114, 195, 240, 0.32), 0 2px 5px rgba(0, 0, 0, 0.28);
        }

        html[data-color-theme="dark"] .fee-edit .ee-seg button.ee-on-obs {
            color: #B8E7AA;
            background: rgba(95, 191, 75, 0.14);
            border-color: #67A54A;
        }

        html[data-color-theme="dark"] .fee-edit .ee-seg button.ee-on-not {
            color: #FFB2B4;
            background: rgba(242, 85, 90, 0.14);
            border-color: #D86468;
        }

        html[data-color-theme="dark"] .fee-edit .ee-seg button.ee-on-ne {
            color: #D5DAE0;
            background: #3A4049;
            border-color: #717A85;
        }

    /* ----- selectable level cards: basic frameworks ----------------------- */

    html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level {
        color: #E2E5E9;
        background: #24292F;
        box-shadow: 0 0 0 1px #414852, 0 4px 10px rgba(0, 0, 0, 0.28);
    }

        html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level:hover {
            background: #293039;
            box-shadow: 0 0 0 1px #68717D, 0 4px 10px rgba(0, 0, 0, 0.28);
        }

        html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level.ee-sel {
            box-shadow: 0 0 0 1px #4A535F, 0 4px 10px rgba(0, 0, 0, 0.28);
        }

            html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level.ee-sel.ee-c-red {
                border-color: #D86468;
            }

            html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level.ee-sel.ee-c-green {
                border-color: #67A54A;
            }

            html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level.ee-sel.ee-c-na {
                border-color: #929AA5;
            }

        html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level.ee-dim {
            opacity: 0.76;
        }

        html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level:focus-within {
            box-shadow: 0 0 0 3px rgba(114, 195, 240, 0.32), 0 4px 10px rgba(0, 0, 0, 0.28);
        }

        html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-level:active {
            box-shadow: 0 0 0 1px #697482;
        }

    html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-multi .ee-indicator-item.ee-ind-sel {
        background: rgba(95, 191, 75, 0.10);
    }

    html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-multi.ee-c-red .ee-indicator-item.ee-ind-sel {
        background: rgba(242, 85, 90, 0.10);
    }

    html[data-color-theme="dark"] .fee-edit .ee-selectable .ee-na-card {
        color: #C8CED6;
        background: #292E35;
        border-color: #4A535F;
    }

    /* ----- completion / confirmation messages ----------------------------- */

    html[data-color-theme="dark"] .fee-edit .ee-finish-error {
        color: #FFB2B4;
        background: rgba(242, 85, 90, 0.10);
        border-color: rgba(242, 85, 90, 0.28);
    }

    html[data-color-theme="dark"] .fee-edit .ee-confirm {
        color: #E7D7B9;
        background: rgba(240, 163, 58, 0.08);
        border-color: rgba(240, 163, 58, 0.26);
    }

        html[data-color-theme="dark"] .fee-edit .ee-confirm .ee-confirm-title {
            color: #FFD08A;
        }

    /* Keep the bottom action card in the same neutral family as the rest of the
   page; the site's existing dark button treatment still controls the buttons. */
    html[data-color-theme="dark"] .fee-edit .main_table {
        background: transparent;
    }


    /* =========================================================================
   Staff Evaluation - Sign Formal Evaluation

   The page itself is already structurally dark-mode friendly. The two local
   light-mode colors that need attention are the legal signature
   acknowledgment and the "Signing as..." line.

   SignFormalEvaluation.aspx now wraps conBody in .sfe-sign so these overrides
   stay isolated to the signing page. The RadEditor continues to use the
   existing ODIE/Telerik dark-mode treatment.
   ========================================================================= */

    html[data-color-theme="dark"] .sfe-sign .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .sfe-sign .details_table,
    html[data-color-theme="dark"] .sfe-sign .main_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .sfe-sign .details_table .label,
        html[data-color-theme="dark"] .sfe-sign .main_table .label,
        html[data-color-theme="dark"] .sfe-sign .main_table .label_no_colon {
            color: #E4E8ED;
        }

    /* The acknowledgment keeps the same amber "important / pending signature"
   meaning as light mode, but no longer creates a bright cream island. */
    html[data-color-theme="dark"] .sfe-sign .es-ack {
        color: #F3C77E;
        background: rgba(240, 163, 58, 0.09);
        border: 1px solid rgba(240, 163, 58, 0.20);
        border-left: 4px solid #D79B3C;
    }

        html[data-color-theme="dark"] .sfe-sign .es-ack i {
            color: #F3B351;
        }

    /* This was nearly disappearing in the screenshot because the page-local
   light-mode gray (#5f5e5a) was still winning. */
    html[data-color-theme="dark"] .sfe-sign .es-signing-as {
        color: #B7BEC8;
    }

    /* Keep the signature section heading consistent with the other Staff
   Evaluation cards. */
    html[data-color-theme="dark"] .sfe-sign .card-header.data-att {
        color: #E7E9ED;
        border-bottom-color: #3D444E;
    }

    /* The sign button is intentionally still a normal ODIE action button rather
   than turning amber; the amber surface communicates the warning while the
   button remains an action. This only tightens its dark-mode contrast. */
    html[data-color-theme="dark"] .sfe-sign .submit_button.btn-light {
        color: var(--odie-link) !important;
        background: #30363F !important;
        border-color: #4A535F !important;
    }

        html[data-color-theme="dark"] .sfe-sign .submit_button.btn-light:hover,
        html[data-color-theme="dark"] .sfe-sign .submit_button.btn-light:focus {
            color: var(--odie-link-hover) !important;
            background: #383F49 !important;
            border-color: #616B78 !important;
        }


    /* =========================================================================
   Staff Evaluation - Evaluation Comparison

   The comparison page intentionally uses two parallel columns, but its
   light-mode stylesheet makes column B nearly white and hard-codes several
   dark text colors. In dark mode that produced one bright half and one nearly
   unreadable half.

   EvaluationCompare.aspx now wraps conBody in .ec-compare. These overrides
   preserve the side-by-side hierarchy while using two related charcoal
   surfaces instead of a dark/white split.
   ========================================================================= */

    html[data-color-theme="dark"] .ec-compare .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .ec-compare .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .ec-compare .details_table .label {
            color: #E4E8ED;
        }

    /* ----- evaluation identity cards -------------------------------------- */

    html[data-color-theme="dark"] .ec-compare .ec-eval-col,
    html[data-color-theme="dark"] .ec-compare .ec-placement-col {
        color: #E2E5E9;
        background: #252A31;
        border-color: #515A65;
    }

        html[data-color-theme="dark"] .ec-compare .ec-eval-col.ec-col-b,
        html[data-color-theme="dark"] .ec-compare .ec-placement-col.ec-col-b {
            background: #2B3139;
            border-color: #56616D;
        }

    html[data-color-theme="dark"] .ec-compare .ec-col-head {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .ec-compare .ec-eval-by {
        color: #B9C0C9;
    }

    html[data-color-theme="dark"] .ec-compare .ec-eval-comments {
        color: #D5DAE0;
    }

    html[data-color-theme="dark"] .ec-compare .ec-placement {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .ec-compare .ec-placement-none {
        color: var(--se-text-muted);
    }

    html[data-color-theme="dark"] .ec-compare .ec-placement-comments {
        color: #CDD3DA;
    }

    /* Different-placement marker */
    html[data-color-theme="dark"] .ec-compare .ec-diff-flag {
        color: #FFD08A;
        background: rgba(240, 163, 58, 0.14);
        border: 1px solid rgba(240, 163, 58, 0.26);
    }

    /* ----- practice / rubric hierarchy ------------------------------------ */

    html[data-color-theme="dark"] .ec-compare .ec-practice-desc {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .ec-compare .ec-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .ec-compare .ec-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .ec-compare .ec-ind-head,
    html[data-color-theme="dark"] .ec-compare .ec-cell-label {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .ec-compare .ec-ind-row {
        color: #E2E5E9;
        border-top-color: #454D57;
    }

        html[data-color-theme="dark"] .ec-compare .ec-ind-row.ec-diff {
            background: rgba(240, 163, 58, 0.08);
            box-shadow: inset 3px 0 0 #C88A32;
            border-top-color: rgba(240, 163, 58, 0.20);
        }

    /* ----- level tags ------------------------------------------------------ */

    html[data-color-theme="dark"] .ec-compare .ec-level-tag {
        color: #C5CBD3;
        background: #343A43;
    }

        html[data-color-theme="dark"] .ec-compare .ec-level-tag.ec-tag-green {
            color: #B8E7AA;
            background: rgba(95, 191, 75, 0.14);
            border: 1px solid rgba(95, 191, 75, 0.22);
        }

        html[data-color-theme="dark"] .ec-compare .ec-level-tag.ec-tag-red {
            color: #FFB2B4;
            background: rgba(242, 85, 90, 0.14);
            border: 1px solid rgba(242, 85, 90, 0.22);
        }

    /* ----- comparison result pills ---------------------------------------- */

    html[data-color-theme="dark"] .ec-compare .ec-result-pill.ec-result-met {
        color: #B8E7AA;
        background: rgba(95, 191, 75, 0.14);
        border: 1px solid rgba(95, 191, 75, 0.24);
    }

    html[data-color-theme="dark"] .ec-compare .ec-result-pill.ec-result-notmet {
        color: #FFB2B4;
        background: rgba(242, 85, 90, 0.14);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

    html[data-color-theme="dark"] .ec-compare .ec-result-pill.ec-result-na {
        color: #A7ADB7;
    }

    html[data-color-theme="dark"] .ec-compare .ec-ico-met {
        color: #78C65A;
    }

    html[data-color-theme="dark"] .ec-compare .ec-ico-notmet {
        color: #EA777B;
    }

    html[data-color-theme="dark"] .ec-compare .ec-ico-muted {
        color: #929BA6;
    }

    /* ----- paired indicator summary --------------------------------------- */

    html[data-color-theme="dark"] .ec-compare .ec-summary {
        border-top-color: #555D68;
    }

    html[data-color-theme="dark"] .ec-compare .ec-summary-head,
    html[data-color-theme="dark"] .ec-compare .ec-bar-label,
    html[data-color-theme="dark"] .ec-compare .ec-bar-count,
    html[data-color-theme="dark"] .ec-compare .ec-bar-key {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .ec-compare .ec-bar-track {
        background: #3A4049;
    }

    html[data-color-theme="dark"] .ec-compare .ec-bar-notmet {
        background: #C74F54;
    }

    html[data-color-theme="dark"] .ec-compare .ec-bar-met {
        background: #4F8C2C;
    }

    /* The legend dots use inline light-mode colors in the ASPX. */
    html[data-color-theme="dark"] .ec-compare .ec-bar-dot[style*="#A32D2D" i] {
        background: #C74F54 !important;
    }

    html[data-color-theme="dark"] .ec-compare .ec-bar-dot[style*="#3B6D11" i] {
        background: #4F8C2C !important;
    }

    html[data-color-theme="dark"] .ec-compare .ec-bar-dot[style*="#EFEEE9" i] {
        background: #D6DAE0 !important;
        border-color: #7A838E !important;
    }


    /* =========================================================================
   Staff Evaluation - Self Evaluation Details

   SelfEvaluationDetails shares the read-only rubric vocabulary used by
   FormalEvaluationDetails, but has its own employee-evidence submission
   pieces and a simpler two-state workflow. The page now wraps conBody in
   .sed-details so these overrides remain isolated to this page.
   ========================================================================= */

    /* ----- top details card ------------------------------------------------- */

    html[data-color-theme="dark"] .sed-details .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .sed-details .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .sed-details .details_table .label {
            color: #E4E8ED;
        }

    /* ----- "what happens next" callout ------------------------------------- */

    html[data-color-theme="dark"] .sed-details .se-move-idle {
        background: #252A31;
        border-color: #3D444E;
    }

        html[data-color-theme="dark"] .sed-details .se-move-idle .se-move-title,
        html[data-color-theme="dark"] .sed-details .se-move-idle .se-move-text,
        html[data-color-theme="dark"] .sed-details .se-move-idle .se-move-ico {
            color: var(--se-text-secondary);
        }

    html[data-color-theme="dark"] .sed-details .se-move-amber {
        background: rgba(240, 163, 58, 0.08);
        border-color: rgba(240, 163, 58, 0.28);
    }

        html[data-color-theme="dark"] .sed-details .se-move-amber .se-move-title,
        html[data-color-theme="dark"] .sed-details .se-move-amber .se-move-text {
            color: var(--se-amber-text);
        }

        html[data-color-theme="dark"] .sed-details .se-move-amber .se-move-ico {
            color: #F3B351;
            background: rgba(243, 179, 81, 0.16);
            border: 1px solid rgba(243, 179, 81, 0.24);
            box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.06);
        }

            html[data-color-theme="dark"] .sed-details .se-move-amber .se-move-ico i {
                color: #F3B351;
            }

    html[data-color-theme="dark"] .sed-details .se-move-green {
        background: rgba(95, 191, 75, 0.08);
        border-color: rgba(95, 191, 75, 0.26);
    }

        html[data-color-theme="dark"] .sed-details .se-move-green .se-move-title,
        html[data-color-theme="dark"] .sed-details .se-move-green .se-move-text,
        html[data-color-theme="dark"] .sed-details .se-move-green .se-move-ico {
            color: var(--se-green-text);
        }

    html[data-color-theme="dark"] .sed-details .se-move-btn {
        color: #1A1D21 !important;
        background: #F0B75A;
        border-color: #F0B75A;
    }

        html[data-color-theme="dark"] .sed-details .se-move-btn:hover,
        html[data-color-theme="dark"] .sed-details .se-move-btn:focus {
            color: #111317 !important;
            background: #FFD08A;
            border-color: #FFD08A;
        }

    /* ----- practice hierarchy ---------------------------------------------- */

    html[data-color-theme="dark"] .sed-details .ed-practice-desc,
    html[data-color-theme="dark"] .sed-details .ed-placement-comments {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .sed-details .ed-placement-none {
        color: var(--se-text-muted);
    }

    html[data-color-theme="dark"] .sed-details .ed-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .sed-details .ed-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .sed-details .ed-cell,
    html[data-color-theme="dark"] .sed-details .ed-indicator {
        color: #E2E5E9;
    }

    /* 55% works on the light page but makes unselected options disappear against
   the dark card. Keep them subordinate without making them unreadable. */
    html[data-color-theme="dark"] .sed-details .ed-level.ed-dim {
        opacity: 0.76;
    }

    /* ----- performance-level headers --------------------------------------- */

    html[data-color-theme="dark"] .sed-details .ed-head-1 {
        background: rgba(242, 85, 90, 0.13);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

        html[data-color-theme="dark"] .sed-details .ed-head-1 .ed-head-title {
            color: #FFB2B4;
        }

        html[data-color-theme="dark"] .sed-details .ed-head-1 .ed-head-desc {
            color: #EFA3A6;
        }

        html[data-color-theme="dark"] .sed-details .ed-head-1 .ed-head-check {
            color: #FF9EA1;
        }

    html[data-color-theme="dark"] .sed-details .ed-head-green {
        background: rgba(95, 191, 75, 0.12);
        border: 1px solid rgba(95, 191, 75, 0.22);
    }

        html[data-color-theme="dark"] .sed-details .ed-head-green .ed-head-title {
            color: #B8E7AA;
        }

        html[data-color-theme="dark"] .sed-details .ed-head-green .ed-head-desc {
            color: #9FD68F;
        }

        html[data-color-theme="dark"] .sed-details .ed-head-green .ed-head-check {
            color: #A5DE95;
        }

    html[data-color-theme="dark"] .sed-details .ed-level.ed-sel.ed-sel-red {
        border-color: #D86468;
    }

    html[data-color-theme="dark"] .sed-details .ed-level.ed-sel.ed-sel-green {
        border-color: #67A54A;
    }

    /* ----- indicator / evidence icons -------------------------------------- */

    html[data-color-theme="dark"] .sed-details .ed-ico-met {
        color: #78C65A;
    }

    html[data-color-theme="dark"] .sed-details .ed-ico-notmet {
        color: #EA777B;
    }

    html[data-color-theme="dark"] .sed-details .ed-ico-obs {
        color: #A7ADB7;
    }

    html[data-color-theme="dark"] .sed-details .ed-ico-link {
        color: #AAB2BD;
    }

    /* ----- linked evidence and employee submissions ------------------------ */

    html[data-color-theme="dark"] .sed-details .ed-linked {
        color: #C7CDD5;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .sed-details .ed-submit {
        color: var(--odie-link) !important;
    }

        html[data-color-theme="dark"] .sed-details .ed-submit:hover,
        html[data-color-theme="dark"] .sed-details .ed-submit:focus {
            color: var(--odie-link-hover) !important;
        }

    html[data-color-theme="dark"] .sed-details .ed-submission {
        color: #B9C0C9;
    }

    /* ----- evidence for level placement ----------------------------------- */

    html[data-color-theme="dark"] .sed-details .ed-evidence {
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .sed-details .ed-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .sed-details .ed-evidence-type {
        color: #B9C0C9;
        background: #343A43;
    }

    /* ----- indicators-by-level summary ------------------------------------- */

    html[data-color-theme="dark"] .sed-details .ed-summary {
        border-top-color: #555D68;
    }

    html[data-color-theme="dark"] .sed-details .ed-bar-label,
    html[data-color-theme="dark"] .sed-details .ed-bar-count,
    html[data-color-theme="dark"] .sed-details .ed-bar-key {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .sed-details .ed-bar-track {
        background: #3A4049;
    }

    html[data-color-theme="dark"] .sed-details .ed-bar-notmet {
        background: #C74F54;
    }

    html[data-color-theme="dark"] .sed-details .ed-bar-met {
        background: #4F8C2C;
    }

    html[data-color-theme="dark"] .sed-details .ed-bar-dot[style*="#A32D2D" i] {
        background: #C74F54 !important;
    }

    html[data-color-theme="dark"] .sed-details .ed-bar-dot[style*="#3B6D11" i] {
        background: #4F8C2C !important;
    }

    html[data-color-theme="dark"] .sed-details .ed-bar-dot[style*="#EFEEE9" i] {
        background: #D6DAE0 !important;
        border-color: #7A838E !important;
    }

    /* ----- evaluation history ---------------------------------------------- */

    html[data-color-theme="dark"] .sed-details #spanHistoryToggle {
        color: #A7ADB7 !important;
    }


    /* =========================================================================
   Staff Evaluation - Self Evaluation Edit

   SelfEvaluationEdit is intentionally parallel to FormalEvaluationEdit. The
   page now adds .see-edit to divContents so the shared se-* rubric components,
   the local ee-* controls, and the employee-submission links can receive dark
   colors without affecting the rest of ODIE.
   ========================================================================= */

    /* ----- page cards / details table -------------------------------------- */

    html[data-color-theme="dark"] .see-edit .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .see-edit .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .see-edit .details_table .label,
        html[data-color-theme="dark"] .see-edit .main_table .label,
        html[data-color-theme="dark"] .see-edit .main_table .label_no_colon {
            color: #E4E8ED;
        }

    /* ----- practice hierarchy ---------------------------------------------- */

    html[data-color-theme="dark"] .see-edit .ee-practice-desc {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .see-edit .se-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .see-edit .se-rubric-title,
    html[data-color-theme="dark"] .see-edit .ee-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .see-edit .se-cell,
    html[data-color-theme="dark"] .see-edit .ee-cell,
    html[data-color-theme="dark"] .see-edit .ee-indicator {
        color: #E2E5E9;
    }

    html[data-color-theme="dark"] .see-edit .ee-linked-label {
        color: #C7CDD5;
    }

    /* ----- performance-level headers --------------------------------------- */

    html[data-color-theme="dark"] .see-edit .se-head-1,
    html[data-color-theme="dark"] .see-edit .ee-head-1 {
        background: rgba(242, 85, 90, 0.13);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

        html[data-color-theme="dark"] .see-edit .se-head-1 .se-head-title,
        html[data-color-theme="dark"] .see-edit .ee-head-1 .se-head-title {
            color: #FFB2B4;
        }

        html[data-color-theme="dark"] .see-edit .se-head-1 .se-head-desc,
        html[data-color-theme="dark"] .see-edit .ee-head-1 .se-head-desc {
            color: #EFA3A6;
        }

        html[data-color-theme="dark"] .see-edit .ee-head-1 .ee-head-check {
            color: #FF9EA1;
        }

    html[data-color-theme="dark"] .see-edit .se-head-green,
    html[data-color-theme="dark"] .see-edit .ee-head-green {
        background: rgba(95, 191, 75, 0.12);
        border: 1px solid rgba(95, 191, 75, 0.22);
    }

        html[data-color-theme="dark"] .see-edit .se-head-green .se-head-title,
        html[data-color-theme="dark"] .see-edit .ee-head-green .se-head-title {
            color: #B8E7AA;
        }

        html[data-color-theme="dark"] .see-edit .se-head-green .se-head-desc,
        html[data-color-theme="dark"] .see-edit .ee-head-green .se-head-desc {
            color: #9FD68F;
        }

        html[data-color-theme="dark"] .see-edit .ee-head-green .ee-head-check {
            color: #A5DE95;
        }

    /* ----- linked evidence and submissions -------------------------------- */

    html[data-color-theme="dark"] .see-edit .se-linked {
        color: #C7CDD5;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .see-edit .ee-submission {
        color: #B9C0C9;
    }

        html[data-color-theme="dark"] .see-edit .ee-submission a {
            color: var(--odie-link);
        }

            html[data-color-theme="dark"] .see-edit .ee-submission a:hover,
            html[data-color-theme="dark"] .see-edit .ee-submission a:focus {
                color: var(--odie-link-hover);
            }

    /* ----- evidence for level placement ----------------------------------- */

    html[data-color-theme="dark"] .see-edit .se-evidence {
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .see-edit .se-evidence-item,
    html[data-color-theme="dark"] .see-edit .ee-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .see-edit .se-evidence-type {
        color: #B9C0C9;
        background: #343A43;
    }

    /* ----- icons ----------------------------------------------------------- */

    html[data-color-theme="dark"] .see-edit .se-ico-met,
    html[data-color-theme="dark"] .see-edit .ee-ico-met {
        color: #78C65A;
    }

    html[data-color-theme="dark"] .see-edit .se-ico-notmet,
    html[data-color-theme="dark"] .see-edit .ee-ico-notmet {
        color: #EA777B;
    }

    html[data-color-theme="dark"] .see-edit .se-ico-obs {
        color: #A7ADB7;
    }

    html[data-color-theme="dark"] .see-edit .se-ico-link {
        color: #AAB2BD;
    }

    /* ----- Typical / Not Typical pill controls ----------------------------- */

    html[data-color-theme="dark"] .see-edit .ee-seg button {
        color: #D3D8DE;
        background: #2A3037;
        border-color: #4A535F;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
    }

        html[data-color-theme="dark"] .see-edit .ee-seg button:hover {
            color: #EEF1F4;
            background: #313842;
            border-color: #697482;
        }

        html[data-color-theme="dark"] .see-edit .ee-seg button:focus-visible {
            box-shadow: 0 0 0 3px rgba(114, 195, 240, 0.32), 0 2px 5px rgba(0, 0, 0, 0.28);
        }

        html[data-color-theme="dark"] .see-edit .ee-seg button.ee-on-obs {
            color: #B8E7AA;
            background: rgba(95, 191, 75, 0.14);
            border-color: #67A54A;
        }

        html[data-color-theme="dark"] .see-edit .ee-seg button.ee-on-not {
            color: #FFB2B4;
            background: rgba(242, 85, 90, 0.14);
            border-color: #D86468;
        }

        html[data-color-theme="dark"] .see-edit .ee-seg button.ee-on-ne {
            color: #D5DAE0;
            background: #3A4049;
            border-color: #717A85;
        }

    /* ----- selectable level cards: basic frameworks ----------------------- */

    html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level {
        color: #E2E5E9;
        background: #24292F;
        box-shadow: 0 0 0 1px #414852, 0 4px 10px rgba(0, 0, 0, 0.28);
    }

        html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level:hover {
            background: #293039;
            box-shadow: 0 0 0 1px #68717D, 0 4px 10px rgba(0, 0, 0, 0.28);
        }

        html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level.ee-sel {
            box-shadow: 0 0 0 1px #4A535F, 0 4px 10px rgba(0, 0, 0, 0.28);
        }

            html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level.ee-sel.ee-c-red {
                border-color: #D86468;
            }

            html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level.ee-sel.ee-c-green {
                border-color: #67A54A;
            }

            html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level.ee-sel.ee-c-na {
                border-color: #929AA5;
            }

        html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level.ee-dim {
            opacity: 0.76;
        }

        html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level:focus-within {
            box-shadow: 0 0 0 3px rgba(114, 195, 240, 0.32), 0 4px 10px rgba(0, 0, 0, 0.28);
        }

        html[data-color-theme="dark"] .see-edit .ee-selectable .ee-level:active {
            box-shadow: 0 0 0 1px #697482;
        }

    html[data-color-theme="dark"] .see-edit .ee-selectable .ee-multi .ee-indicator-item.ee-ind-sel {
        background: rgba(95, 191, 75, 0.10);
    }

    html[data-color-theme="dark"] .see-edit .ee-selectable .ee-multi.ee-c-red .ee-indicator-item.ee-ind-sel {
        background: rgba(242, 85, 90, 0.10);
    }

    html[data-color-theme="dark"] .see-edit .ee-selectable .ee-na-card {
        color: #C8CED6;
        background: #292E35;
        border-color: #4A535F;
    }

    /* ----- completion validation ------------------------------------------- */

    html[data-color-theme="dark"] .see-edit .ee-finish-error {
        color: #FFB2B4;
        background: rgba(242, 85, 90, 0.10);
        border-color: rgba(242, 85, 90, 0.28);
    }

    html[data-color-theme="dark"] .see-edit .main_table {
        background: transparent;
    }


    /* =========================================================================
   Staff Evaluation - Professional Development Plan Details

   The PDP details page already has a strong structure: one workflow callout,
   goal cards, and a vertical plan journey. Its page-local stylesheet was
   written for light mode, though, so several muted text colors, progress
   pieces, future journey steps, and workflow states lose contrast in dark
   mode.

   ProfessionalDevelopmentPlanDetails.aspx now wraps conBody in .pdp-details.
   These rules change only color/surface treatment; workflow and layout remain
   untouched.
   ========================================================================= */

    /* ----- page cards / header details ------------------------------------- */

    html[data-color-theme="dark"] .pdp-details .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .pdp-details .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .pdp-details .details_table .label {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .pdp-details .data-sm {
        color: #AAB2BD;
    }

    /* ----- Your Move callout ------------------------------------------------ */

    /* Quiet / waiting-for-someone-else state */
    html[data-color-theme="dark"] .pdp-details .se-move-idle {
        background: #252A31;
        border-color: #3D444E;
    }

        html[data-color-theme="dark"] .pdp-details .se-move-idle .se-move-title,
        html[data-color-theme="dark"] .pdp-details .se-move-idle .se-move-text,
        html[data-color-theme="dark"] .pdp-details .se-move-idle .se-move-ico {
            color: var(--se-text-secondary);
        }

    /* Viewer has the next step */
    html[data-color-theme="dark"] .pdp-details .se-move-amber {
        background: rgba(240, 163, 58, 0.08);
        border-color: rgba(240, 163, 58, 0.28);
    }

        html[data-color-theme="dark"] .pdp-details .se-move-amber .se-move-title,
        html[data-color-theme="dark"] .pdp-details .se-move-amber .se-move-text {
            color: var(--se-amber-text);
        }

        html[data-color-theme="dark"] .pdp-details .se-move-amber .se-move-ico {
            color: #F3B351;
            background: rgba(243, 179, 81, 0.16);
            border: 1px solid rgba(243, 179, 81, 0.24);
            box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.06);
        }

            html[data-color-theme="dark"] .pdp-details .se-move-amber .se-move-ico i {
                color: #F3B351;
            }

    /* Employee step is complete; waiting on evaluator */
    html[data-color-theme="dark"] .pdp-details .se-move-waiting {
        background: rgba(240, 163, 58, 0.07);
        border-color: rgba(240, 163, 58, 0.24);
    }

        html[data-color-theme="dark"] .pdp-details .se-move-waiting .se-move-title,
        html[data-color-theme="dark"] .pdp-details .se-move-waiting .se-move-text {
            color: var(--se-amber-text);
        }

        html[data-color-theme="dark"] .pdp-details .se-move-waiting .se-move-ico {
            color: #F3B351;
            background: rgba(243, 179, 81, 0.16);
            border: 1px solid rgba(243, 179, 81, 0.24);
            box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.06);
        }

            html[data-color-theme="dark"] .pdp-details .se-move-waiting .se-move-ico i {
                color: #F3B351;
            }

    /* Approved / evaluator milestone */
    html[data-color-theme="dark"] .pdp-details .se-move-blue {
        background: rgba(114, 195, 240, 0.08);
        border-color: rgba(114, 195, 240, 0.25);
    }

        html[data-color-theme="dark"] .pdp-details .se-move-blue .se-move-title,
        html[data-color-theme="dark"] .pdp-details .se-move-blue .se-move-text,
        html[data-color-theme="dark"] .pdp-details .se-move-blue .se-move-ico {
            color: var(--se-blue-text);
        }

    /* Returned for improvements / deleted */
    html[data-color-theme="dark"] .pdp-details .se-move-red,
    html[data-color-theme="dark"] .pdp-details .se-move-returned {
        background: rgba(242, 85, 90, 0.08);
        border-color: rgba(242, 85, 90, 0.26);
    }

        html[data-color-theme="dark"] .pdp-details .se-move-red .se-move-title,
        html[data-color-theme="dark"] .pdp-details .se-move-red .se-move-text,
        html[data-color-theme="dark"] .pdp-details .se-move-red .se-move-ico,
        html[data-color-theme="dark"] .pdp-details .se-move-returned .se-move-title,
        html[data-color-theme="dark"] .pdp-details .se-move-returned .se-move-text,
        html[data-color-theme="dark"] .pdp-details .se-move-returned .se-move-ico {
            color: var(--se-red-text);
        }

    /* Completed plan */
    html[data-color-theme="dark"] .pdp-details .se-move-green {
        background: rgba(95, 191, 75, 0.08);
        border-color: rgba(95, 191, 75, 0.25);
    }

        html[data-color-theme="dark"] .pdp-details .se-move-green .se-move-title,
        html[data-color-theme="dark"] .pdp-details .se-move-green .se-move-text,
        html[data-color-theme="dark"] .pdp-details .se-move-green .se-move-ico {
            color: var(--se-green-text);
        }

    /* Keep the action button prominent while matching the amber workflow cue. */
    html[data-color-theme="dark"] .pdp-details .se-move-btn {
        color: #1A1D21 !important;
        background: #F0B75A;
        border-color: #F0B75A;
    }

        html[data-color-theme="dark"] .pdp-details .se-move-btn:hover,
        html[data-color-theme="dark"] .pdp-details .se-move-btn:focus {
            color: #111317 !important;
            background: #FFD08A;
            border-color: #FFD08A;
        }

    /* ----- goal cards ------------------------------------------------------ */

    html[data-color-theme="dark"] .pdp-details .pdp-goal-title,
    html[data-color-theme="dark"] .pdp-details .pdp-card-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-goal-pill {
        color: #B8E7AA;
        background: rgba(95, 191, 75, 0.14);
        border: 1px solid rgba(95, 191, 75, 0.24);
    }

    html[data-color-theme="dark"] .pdp-details .pdp-goal-bar {
        background: #3A4049;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-goal-bar-fill {
        background: #5D9A39;
    }

    html[data-color-theme="dark"] .pdp-details .se-content {
        color: #E2E5E9;
    }

    html[data-color-theme="dark"] .pdp-details .se-none {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-as {
        color: #E2E5E9;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-as-ico-done {
        color: #78C65A;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-as-ico-open {
        color: #F0B75A;
    }

    /* The action-step meta reuses the journey meta class. */
    html[data-color-theme="dark"] .pdp-details .pdp-j-meta {
        color: #AAB2BD;
    }

    /* ----- Plan Journey ---------------------------------------------------- */

    html[data-color-theme="dark"] .pdp-details .pdp-j-title {
        color: #E4E8ED;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-j-dot-done {
        color: #DDF4D5;
        background: #477F24;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-j-dot-current {
        color: #3D2505;
        background: #F3B85A;
        border: 1px solid rgba(255, 208, 138, 0.32);
    }

    html[data-color-theme="dark"] .pdp-details .pdp-j-dot-returned {
        color: #FFE0E1;
        background: #B74449;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-j-dot-future {
        background: #30363F;
        border-color: #6A737F;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-j-line {
        background: #4A525C;
    }

    html[data-color-theme="dark"] .pdp-details .pdp-j-line-done {
        background: #639B43;
    }

    /* Future steps should recede, but 55% is too dim once the whole page is dark. */
    html[data-color-theme="dark"] .pdp-details .pdp-j-row-future {
        opacity: 0.72;
    }

        html[data-color-theme="dark"] .pdp-details .pdp-j-row-future .pdp-j-title {
            color: #C5CBD3;
        }

        html[data-color-theme="dark"] .pdp-details .pdp-j-row-future .pdp-j-meta {
            color: #8F98A4;
        }

    html[data-color-theme="dark"] .pdp-details .pdp-j-comment {
        color: #CDD3DA;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    /* ----- history --------------------------------------------------------- */

    html[data-color-theme="dark"] .pdp-details #spanHistoryToggle {
        color: #A7ADB7 !important;
    }


    /* =========================================================================
   Staff Evaluation - Professional Development Plan Edit

   This editor intentionally mirrors ProfessionalDevelopmentPlanDetails, but
   it also has two edit-only pieces: the drafting action-step cards and a
   custom PageTop RadEditor toolbar. The page adds .pdp-edit to divContents,
   and its script tags the floating toolbar windows with .pdp-toolbar-window.

   The ASPX also chains ODIE's normal RadEditorOnClientLoad into the page's
   custom pdpEditorClientLoad. That is important: the editor content lives in
   an iframe, so ordinary page CSS cannot turn the white editing canvas dark.
   ========================================================================= */

    /* ----- page cards / header details ------------------------------------- */

    html[data-color-theme="dark"] .pdp-edit .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .pdp-edit .details_table,
    html[data-color-theme="dark"] .pdp-edit .main_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .pdp-edit .details_table .label,
        html[data-color-theme="dark"] .pdp-edit .main_table .label,
        html[data-color-theme="dark"] .pdp-edit .main_table .label_no_colon {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .pdp-edit .data-sm {
        color: #AAB2BD;
    }

    /* ----- Your Move callout ------------------------------------------------ */

    html[data-color-theme="dark"] .pdp-edit .pdp-move-amber {
        background: rgba(240, 163, 58, 0.08);
        border-color: rgba(240, 163, 58, 0.28);
    }

        html[data-color-theme="dark"] .pdp-edit .pdp-move-amber .pdp-move-title,
        html[data-color-theme="dark"] .pdp-edit .pdp-move-amber .pdp-move-text {
            color: var(--se-amber-text);
        }

        html[data-color-theme="dark"] .pdp-edit .pdp-move-amber .pdp-move-ico {
            color: #F3B351;
            background: rgba(243, 179, 81, 0.16);
            border: 1px solid rgba(243, 179, 81, 0.24);
            box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.06);
        }

            html[data-color-theme="dark"] .pdp-edit .pdp-move-amber .pdp-move-ico i {
                color: #F3B351;
            }

    html[data-color-theme="dark"] .pdp-edit .pdp-move-red {
        background: rgba(242, 85, 90, 0.08);
        border-color: rgba(242, 85, 90, 0.26);
    }

        html[data-color-theme="dark"] .pdp-edit .pdp-move-red .pdp-move-title,
        html[data-color-theme="dark"] .pdp-edit .pdp-move-red .pdp-move-text,
        html[data-color-theme="dark"] .pdp-edit .pdp-move-red .pdp-move-ico,
        html[data-color-theme="dark"] .pdp-edit .pdp-move-red .pdp-move-ico i {
            color: var(--se-red-text);
        }

        html[data-color-theme="dark"] .pdp-edit .pdp-move-red .pdp-move-ico {
            background: rgba(242, 85, 90, 0.14);
            border: 1px solid rgba(242, 85, 90, 0.22);
        }

    html[data-color-theme="dark"] .pdp-edit .pdp-move-gray {
        background: #252A31;
        border-color: #3D444E;
    }

        html[data-color-theme="dark"] .pdp-edit .pdp-move-gray .pdp-move-title,
        html[data-color-theme="dark"] .pdp-edit .pdp-move-gray .pdp-move-text {
            color: var(--se-text-secondary);
        }

        html[data-color-theme="dark"] .pdp-edit .pdp-move-gray .pdp-move-ico {
            color: #B7BEC8;
            background: #343A43;
            border: 1px solid #4A535F;
        }

            html[data-color-theme="dark"] .pdp-edit .pdp-move-gray .pdp-move-ico i {
                color: #B7BEC8;
            }

    html[data-color-theme="dark"] .pdp-edit .pdp-move-green {
        background: rgba(95, 191, 75, 0.08);
        border-color: rgba(95, 191, 75, 0.25);
    }

        html[data-color-theme="dark"] .pdp-edit .pdp-move-green .pdp-move-title,
        html[data-color-theme="dark"] .pdp-edit .pdp-move-green .pdp-move-text,
        html[data-color-theme="dark"] .pdp-edit .pdp-move-green .pdp-move-ico,
        html[data-color-theme="dark"] .pdp-edit .pdp-move-green .pdp-move-ico i {
            color: var(--se-green-text);
        }

    /* ----- workspace / read-only goals ------------------------------------ */

    html[data-color-theme="dark"] .pdp-edit .pdp-card-title,
    html[data-color-theme="dark"] .pdp-edit .pdp-goal-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-goal-pill {
        color: #B8E7AA;
        background: rgba(95, 191, 75, 0.14);
        border: 1px solid rgba(95, 191, 75, 0.24);
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-goal-bar {
        background: #3A4049;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-goal-bar-fill {
        background: #5D9A39;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-as {
        color: #E2E5E9;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-as-ico-done {
        color: #78C65A;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-as-ico-open {
        color: #F0B75A;
    }

    html[data-color-theme="dark"] .pdp-edit .se-none {
        color: #AEB6C0;
    }

    /* ----- drafting action-step editors ----------------------------------- */

    html[data-color-theme="dark"] .pdp-edit .pdp-as-row {
        background: #292E35;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-as-fields label {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-as-fields textarea {
        color: #E7E9ED;
        background: #1F242A;
        border: 1px solid #4A535F;
    }

        html[data-color-theme="dark"] .pdp-edit .pdp-as-fields textarea:focus {
            border-color: #72C3F0;
            outline: none;
            box-shadow: 0 0 0 2px rgba(114, 195, 240, 0.16);
        }

    html[data-color-theme="dark"] .pdp-edit #pdpSteps1 .pdp-as-iconbtn,
    html[data-color-theme="dark"] .pdp-edit #pdpSteps1 .pdp-as-iconbtn .ph,
    html[data-color-theme="dark"] .pdp-edit #pdpSteps2 .pdp-as-iconbtn,
    html[data-color-theme="dark"] .pdp-edit #pdpSteps2 .pdp-as-iconbtn .ph {
        color: #AAB2BD;
    }

        html[data-color-theme="dark"] .pdp-edit #pdpSteps1 .pdp-as-iconbtn:hover,
        html[data-color-theme="dark"] .pdp-edit #pdpSteps1 .pdp-as-iconbtn:hover .ph,
        html[data-color-theme="dark"] .pdp-edit #pdpSteps2 .pdp-as-iconbtn:hover,
        html[data-color-theme="dark"] .pdp-edit #pdpSteps2 .pdp-as-iconbtn:hover .ph {
            color: #FF9B9B;
        }

    html[data-color-theme="dark"] .pdp-edit .pdp-as-empty {
        color: #AEB6C0;
        background: #252A31;
        border-color: #59616C;
    }

    /* ----- Plan Journey ---------------------------------------------------- */

    html[data-color-theme="dark"] .pdp-edit .pdp-j-title {
        color: #E4E8ED;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-meta {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-dot-done {
        color: #DDF4D5;
        background: #477F24;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-dot-current {
        color: #3D2505;
        background: #F3B85A;
        border: 1px solid rgba(255, 208, 138, 0.32);
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-dot-returned {
        color: #FFE0E1;
        background: #B74449;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-dot-future {
        background: #30363F;
        border-color: #6A737F;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-line {
        background: #4A525C;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-line-done {
        background: #639B43;
    }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-row-future {
        opacity: 0.72;
    }

        html[data-color-theme="dark"] .pdp-edit .pdp-j-row-future .pdp-j-title {
            color: #C5CBD3;
        }

        html[data-color-theme="dark"] .pdp-edit .pdp-j-row-future .pdp-j-meta {
            color: #8F98A4;
        }

    html[data-color-theme="dark"] .pdp-edit .pdp-j-comment {
        color: #CDD3DA;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    /* ----- this page's floating PageTop RadEditor toolbar ------------------ */

    /* The toolbar window is appended near <body>, outside .pdp-edit, which is why
   pdpEditorClientLoad tags it with .pdp-toolbar-window. */
    html[data-color-theme="dark"] .reToolbarWindow.pdp-toolbar-window.RadWindow .rwWindowContent,
    html[data-color-theme="dark"] .reToolbarWindow.pdp-toolbar-window .reToolbarWrapper,
    html[data-color-theme="dark"] .reToolbarWindow.pdp-toolbar-window .reToolbar {
        background-color: #252B32 !important;
        background-image: none !important;
    }

    html[data-color-theme="dark"] .reToolbarWindow.pdp-toolbar-window.RadWindow .rwWindowContent {
        border: 1px solid #5A4931 !important;
        border-left: 5px solid #C88A32 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
    }

    html[data-color-theme="dark"] .reToolbarWindow.pdp-toolbar-window .reToolbar li a.reTool {
        border-color: #4A535F !important;
    }

    html[data-color-theme="dark"] .reToolbarWindow.pdp-toolbar-window .reToolbar li.reSeparator {
        background: #C88A32 !important;
    }

    html[data-color-theme="dark"] .reToolbarWindow.pdp-toolbar-window .reToolbar li.pdp-tb-label {
        color: #FFD08A;
        background-color: rgba(240, 163, 58, 0.12);
        border-color: rgba(240, 163, 58, 0.28);
    }

    html[data-color-theme="dark"] .reToolbarWindow.pdp-toolbar-window.pdp-tb-active .rwWindowContent {
        box-shadow: 0 0 0 3px rgba(240, 163, 58, 0.16), 0 2px 8px rgba(0, 0, 0, 0.34);
    }

    html[data-color-theme="dark"] .pdp-edit .RadEditor.pdp-ed-active {
        outline-color: #C88A32;
        box-shadow: 0 0 0 3px rgba(240, 163, 58, 0.16);
    }


    /* =========================================================================
   Staff Evaluation - Walkthrough Details

   WalkthroughEvaluationDetails is a compact read-only rubric page. Its local
   stylesheet uses several light-mode literals for practice descriptions,
   rubric rails, evidence cards, status pills, and muted text. The page now
   wraps conBody in .wd-details so these dark-mode overrides stay isolated.

   Layout and print behavior remain owned by WalkthroughEvaluationDetails.aspx.
   ========================================================================= */

    /* ----- top details card ------------------------------------------------- */

    html[data-color-theme="dark"] .wd-details .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .wd-details .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .wd-details .details_table .label {
            color: #E4E8ED;
        }

    /* The legacy footprints PNG is nearly black and disappears on the dark card. */
    html[data-color-theme="dark"] .wd-details img[id$="imgWalkthroughIcon"] {
        filter: brightness(0) invert(1);
        opacity: 0.82;
    }

    /* ----- practice / rubric hierarchy ------------------------------------ */

    html[data-color-theme="dark"] .wd-details .ed-practice-desc {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .wd-details .ed-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .wd-details .ed-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .wd-details .ed-indicator {
        color: #E2E5E9;
    }

    html[data-color-theme="dark"] .wd-details .ed-none {
        color: #A7ADB7;
    }

    /* ----- observed / not-observed indicator icons ------------------------ */

    html[data-color-theme="dark"] .wd-details .ed-ico-met {
        color: #78C65A;
    }

    html[data-color-theme="dark"] .wd-details .ed-ico-notmet {
        color: #EA777B;
    }

    /* ----- observable evidence --------------------------------------------- */

    html[data-color-theme="dark"] .wd-details .ed-evidence {
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .wd-details .ed-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .wd-details .ed-status-obs {
        color: #B8E7AA;
        background: rgba(95, 191, 75, 0.14);
        border: 1px solid rgba(95, 191, 75, 0.24);
    }

    html[data-color-theme="dark"] .wd-details .ed-status-not {
        color: #FFB2B4;
        background: rgba(242, 85, 90, 0.14);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

    html[data-color-theme="dark"] .wd-details .ed-evidence-type {
        color: #B9C0C9;
        background: #343A43;
    }

    /* ----- evaluation history ---------------------------------------------- */

    html[data-color-theme="dark"] .wd-details #spanHistoryToggle {
        color: #A7ADB7 !important;
    }


    /* =========================================================================
   Staff Evaluation - Walkthrough Add

   WalkthroughEvaluationAdd uses the shared Staff Evaluation rubric/evidence
   classes plus a page-local three-state observation control. Its light-mode
   stylesheet gives the evidence containers, item cards and observation pills
   white/pastel surfaces, which become bright islands in dark mode.

   WalkthroughEvaluationAdd.aspx adds .walk-add to divContents so these rules
   stay isolated to this page. The RadEditor already uses ODIE's normal
   RadEditorOnClientLoad, so its iframe continues to use the existing global
   editor dark-mode treatment.
   ========================================================================= */

    /* ----- page cards / setup fields --------------------------------------- */

    html[data-color-theme="dark"] .walk-add .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .walk-add .details_table,
    html[data-color-theme="dark"] .walk-add .main_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .walk-add .details_table .label,
        html[data-color-theme="dark"] .walk-add .main_table .label,
        html[data-color-theme="dark"] .walk-add .main_table .label_no_colon {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .walk-add .data-sm {
        color: #B7BEC8;
    }

    /* ----- practice / rubric hierarchy ------------------------------------ */

    html[data-color-theme="dark"] .walk-add .ee-practice-desc {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .walk-add .se-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .walk-add .se-rubric-title,
    html[data-color-theme="dark"] .walk-add .ee-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .walk-add .ee-indicator {
        color: #E2E5E9;
    }

    /* ----- observable indicator / evidence sections ----------------------- */

    html[data-color-theme="dark"] .walk-add .se-evidence {
        color: #E2E5E9;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .walk-add .se-evidence-label {
        color: #F0B75A;
    }

    html[data-color-theme="dark"] .walk-add .se-evidence-item,
    html[data-color-theme="dark"] .walk-add .ee-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .walk-add .se-evidence-type {
        color: #B9C0C9;
        background: #343A43;
    }

    html[data-color-theme="dark"] .walk-add .se-ico-obs {
        color: #AAB2BD;
    }

    /* ----- Observed / NOT Observed / Not Evaluated segmented control ------- */

    /* Neutral/unselected */
    html[data-color-theme="dark"] .walk-add .ee-seg button {
        color: #D3D8DE;
        background: #2A3037;
        border-color: #4A535F;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
    }

        html[data-color-theme="dark"] .walk-add .ee-seg button:hover {
            color: #EEF1F4;
            background: #313842;
            border-color: #697482;
        }

        html[data-color-theme="dark"] .walk-add .ee-seg button:active {
            box-shadow: none;
        }

        html[data-color-theme="dark"] .walk-add .ee-seg button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(114, 195, 240, 0.32), 0 2px 5px rgba(0, 0, 0, 0.28);
        }

        /* Selected observed */
        html[data-color-theme="dark"] .walk-add .ee-seg button.ee-on-obs {
            color: #B8E7AA;
            background: rgba(95, 191, 75, 0.14);
            border-color: #67A54A;
        }

        /* Selected not observed */
        html[data-color-theme="dark"] .walk-add .ee-seg button.ee-on-not {
            color: #FFB2B4;
            background: rgba(242, 85, 90, 0.14);
            border-color: #D86468;
        }

        /* Selected not evaluated */
        html[data-color-theme="dark"] .walk-add .ee-seg button.ee-on-ne {
            color: #D5DAE0;
            background: #3A4049;
            border-color: #717A85;
        }

        html[data-color-theme="dark"] .walk-add .ee-seg button .ee-seg-ico {
            color: currentColor;
        }

    /* ----- no-practices / save card --------------------------------------- */

    html[data-color-theme="dark"] .walk-add #lblNoPractices {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .walk-add .submit_button.btn-light {
        color: var(--odie-link) !important;
        background: #30363F !important;
        border-color: #4A535F !important;
    }

        html[data-color-theme="dark"] .walk-add .submit_button.btn-light:hover,
        html[data-color-theme="dark"] .walk-add .submit_button.btn-light:focus {
            color: var(--odie-link-hover) !important;
            background: #383F49 !important;
            border-color: #616B78 !important;
        }


    /* =========================================================================
   Staff Evaluation - Framework Details

   Framework Details is a read-only reference view of the full rubric. Its
   local stylesheet intentionally uses light red/green level headers, a paper
   sticky-note legend, cream linked-evidence boxes, and a light placement-
   evidence panel. In dark mode those become bright islands and several muted
   descriptions become too faint.

   FrameworkDetails.aspx adds .fw-details to divContents so these overrides
   remain isolated to this page. Layout and framework-selection behavior are
   unchanged.
   ========================================================================= */

    /* ----- page cards / framework selector --------------------------------- */

    html[data-color-theme="dark"] .fw-details .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .fw-details .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .fw-details .details_table .label {
            color: #E4E8ED;
        }

    /* ----- sticky-note legend ---------------------------------------------- */

    /* Keep the pinned-note idea, but make it a dark warm note rather than a
   bright sheet of paper floating on the page. */
    html[data-color-theme="dark"] .fw-details .ps-legend-note {
        color: #E8D9B9;
        background: #383326;
        border: 1px solid #5A4E34;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34);
    }

    html[data-color-theme="dark"] .fw-details .ps-legend-title {
        color: #FFD08A;
    }

    html[data-color-theme="dark"] .fw-details .ps-legend-entry {
        color: #D7D0C1;
    }

        html[data-color-theme="dark"] .fw-details .ps-legend-entry .se-ico-obs,
        html[data-color-theme="dark"] .fw-details .ps-legend-entry .se-ico-link {
            color: #B8C1CB;
        }

    /* The two swatches carry inline light-mode colors; keep their meaning while
   softening them a little against the dark note. */
    html[data-color-theme="dark"] .fw-details .ps-swatch[style*="#F7C1C1" i] {
        background: #C96A6E !important;
    }

    html[data-color-theme="dark"] .fw-details .ps-swatch[style*="#C0DD97" i] {
        background: #78A653 !important;
    }

    /* ----- practice / rubric hierarchy ------------------------------------ */

    html[data-color-theme="dark"] .fw-details .ps-practice-desc {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .fw-details .ps-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .fw-details .ps-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fw-details .ps-cell,
    html[data-color-theme="dark"] .fw-details .ps-indicator {
        color: #E2E5E9;
    }

    /* ----- performance-level headers -------------------------------------- */

    html[data-color-theme="dark"] .fw-details .ps-head-1 {
        background: rgba(242, 85, 90, 0.13);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

        html[data-color-theme="dark"] .fw-details .ps-head-1 .ps-head-title {
            color: #FFB2B4;
        }

        html[data-color-theme="dark"] .fw-details .ps-head-1 .ps-head-desc {
            color: #EFA3A6;
        }

    html[data-color-theme="dark"] .fw-details .ps-head-green {
        background: rgba(95, 191, 75, 0.12);
        border: 1px solid rgba(95, 191, 75, 0.22);
    }

        html[data-color-theme="dark"] .fw-details .ps-head-green .ps-head-title {
            color: #B8E7AA;
        }

        html[data-color-theme="dark"] .fw-details .ps-head-green .ps-head-desc {
            color: #9FD68F;
        }

    /* ----- observable / linked evidence ----------------------------------- */

    html[data-color-theme="dark"] .fw-details .se-ico-obs,
    html[data-color-theme="dark"] .fw-details .se-ico-link {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .fw-details .ps-linked {
        color: #CDD3DA;
        background: #292E35;
        border: 1px solid #3B424C;
    }

        html[data-color-theme="dark"] .fw-details .ps-linked .ps-linked-item {
            color: #CDD3DA;
        }

    /* ----- evidence for level placement ----------------------------------- */

    html[data-color-theme="dark"] .fw-details .se-evidence {
        color: #E2E5E9;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .fw-details .se-evidence-label {
        color: #F0B75A;
    }

    html[data-color-theme="dark"] .fw-details .se-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .fw-details .se-evidence-type {
        color: #B9C0C9;
        background: #343A43;
    }

    html[data-color-theme="dark"] .fw-details .ps-none {
        color: #A7ADB7;
    }

    html[data-color-theme="dark"] .fw-details .ps-type-pill {
        color: #C7CDD5;
        background: #343A43;
        border: 1px solid #4A535F;
    }

    /* ----- framework history ----------------------------------------------- */

    html[data-color-theme="dark"] .fw-details #spanHistoryToggle {
        color: #A7ADB7 !important;
    }


    /* =========================================================================
   Staff Evaluation - Framework Edit

   FrameworkEdit.aspx has a custom client-side Effective Practices editor.
   Its page-local stylesheet was deliberately light: white practice cards,
   cream edit cards, gray text, and light outlined buttons. In dark mode this
   becomes the large white stack shown in the screenshot.

   FrameworkEdit.aspx adds .fw-edit to divContents so these overrides are
   isolated to this page. The JavaScript editor and the VB persistence/history
   logic are unchanged.
   ========================================================================= */

    /* ----- page cards / framework fields ----------------------------------- */

    html[data-color-theme="dark"] .fw-edit .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .fw-edit .details_table,
    html[data-color-theme="dark"] .fw-edit .main_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .fw-edit .details_table .label,
        html[data-color-theme="dark"] .fw-edit .main_table .label,
        html[data-color-theme="dark"] .fw-edit .main_table .label_no_colon {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .fw-edit .data-sm {
        color: #D7DCE2;
    }

    /* ----- Effective Practices toolbar ------------------------------------- */

    html[data-color-theme="dark"] .fw-edit .ep-count {
        color: #D7DCE2;
        background: #343A43;
        border: 1px solid #4A535F;
    }

    /* ----- practice display cards ----------------------------------------- */

    html[data-color-theme="dark"] .fw-edit .ep-card {
        color: #E2E5E9;
        background: #292E35;
        border-color: #414852;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
    }

        html[data-color-theme="dark"] .fw-edit .ep-card:hover {
            background: #2D343D;
            border-color: #535D69;
        }

        html[data-color-theme="dark"] .fw-edit .ep-card.ep-dragover {
            background: rgba(114, 195, 240, 0.08);
            border-color: #72C3F0;
            box-shadow: 0 0 0 2px rgba(114, 195, 240, 0.14);
        }

    html[data-color-theme="dark"] .fw-edit .ep-handle {
        color: #7F8995;
    }

    html[data-color-theme="dark"] .fw-edit .ep-card:hover .ep-handle {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .fw-edit .ep-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fw-edit .ep-desc {
        color: #B7BEC8;
    }

    /* Edit stays blue; delete turns red on hover so the two icon actions are
   distinguishable without adding permanent colored chrome to every row. */
    html[data-color-theme="dark"] .fw-edit #epEditor .ep-iconbtn,
    html[data-color-theme="dark"] .fw-edit #epEditor .ep-iconbtn .ph {
        color: #AAB2BD;
    }

        html[data-color-theme="dark"] .fw-edit #epEditor .ep-iconbtn:hover,
        html[data-color-theme="dark"] .fw-edit #epEditor .ep-iconbtn:hover .ph {
            color: var(--odie-link-hover);
            background: rgba(114, 195, 240, 0.08);
        }

    html[data-color-theme="dark"] .fw-edit #epEditor .ep-actions .ep-iconbtn:last-child:hover,
    html[data-color-theme="dark"] .fw-edit #epEditor .ep-actions .ep-iconbtn:last-child:hover .ph {
        color: #FF9B9B;
        background: rgba(242, 85, 90, 0.08);
    }

    /* ----- inline practice editor ----------------------------------------- */

    html[data-color-theme="dark"] .fw-edit .ep-editorcard {
        color: #E2E5E9;
        background: #252A31;
        border-color: #59616C;
        box-shadow: 0 0 0 1px rgba(114, 195, 240, 0.04), 0 3px 9px rgba(0, 0, 0, 0.26);
    }

        html[data-color-theme="dark"] .fw-edit .ep-editorcard label {
            color: #B7BEC8;
        }

        html[data-color-theme="dark"] .fw-edit .ep-editorcard input[type="text"],
        html[data-color-theme="dark"] .fw-edit .ep-editorcard textarea {
            color: #E7E9ED;
            background: #1F242A;
            border: 1px solid #4A535F;
        }

            html[data-color-theme="dark"] .fw-edit .ep-editorcard input[type="text"]::placeholder,
            html[data-color-theme="dark"] .fw-edit .ep-editorcard textarea::placeholder {
                color: #7F8995;
            }

            html[data-color-theme="dark"] .fw-edit .ep-editorcard input[type="text"]:focus,
            html[data-color-theme="dark"] .fw-edit .ep-editorcard textarea:focus {
                border-color: #72C3F0;
                outline: none;
                box-shadow: 0 0 0 2px rgba(114, 195, 240, 0.16);
            }

    html[data-color-theme="dark"] .fw-edit .ep-save {
        color: #9ED8F6;
        background: rgba(114, 195, 240, 0.08);
        border-color: #4F9EC9;
    }

        html[data-color-theme="dark"] .fw-edit .ep-save:hover,
        html[data-color-theme="dark"] .fw-edit .ep-save:focus {
            color: #D6F0FC;
            background: rgba(114, 195, 240, 0.14);
            border-color: #72C3F0;
        }

    html[data-color-theme="dark"] .fw-edit .ep-cancel {
        color: #C9CFD6;
        background: #30363F;
        border-color: #4A535F;
    }

        html[data-color-theme="dark"] .fw-edit .ep-cancel:hover,
        html[data-color-theme="dark"] .fw-edit .ep-cancel:focus {
            color: #EEF1F4;
            background: #383F49;
            border-color: #616B78;
        }

    html[data-color-theme="dark"] .fw-edit .ep-invalid {
        border-color: #EA777B !important;
        box-shadow: 0 0 0 2px rgba(242, 85, 90, 0.14);
    }

    /* ----- empty state ----------------------------------------------------- */

    html[data-color-theme="dark"] .fw-edit .ep-empty {
        color: #AEB6C0;
        background: #252A31;
        border-color: #59616C;
    }

    /* ----- bottom save action --------------------------------------------- */

    html[data-color-theme="dark"] .fw-edit .submit_button.btn-light {
        color: var(--odie-link) !important;
        background: #30363F !important;
        border-color: #4A535F !important;
    }

        html[data-color-theme="dark"] .fw-edit .submit_button.btn-light:hover,
        html[data-color-theme="dark"] .fw-edit .submit_button.btn-light:focus {
            color: var(--odie-link-hover) !important;
            background: #383F49 !important;
            border-color: #616B78 !important;
        }


    /* =========================================================================
   Staff Evaluation - Framework Workflow

   FrameworkWorkflow.aspx has two distinct views: the group list and the
   add/edit roster. Both were written with light surfaces, so dark mode left
   the group cards, roster header, role chips, search box and assigned rows
   looking like a separate light application.

   FrameworkWorkflow.aspx adds .fw-workflow to divContents so these rules stay
   isolated to this page. Workflow permissions, AJAX behavior, roster JSON,
   and save/delete logic remain unchanged.
   ========================================================================= */

    /* ----- page cards / selectors ------------------------------------------ */

    html[data-color-theme="dark"] .fw-workflow .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .fw-workflow .details_table,
    html[data-color-theme="dark"] .fw-workflow .main_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .fw-workflow .details_table .label,
        html[data-color-theme="dark"] .fw-workflow .main_table .label,
        html[data-color-theme="dark"] .fw-workflow .main_table .label_no_colon {
            color: #E4E8ED;
        }

    /* ----- group list ------------------------------------------------------ */

    html[data-color-theme="dark"] .fw-workflow .fw-group {
        color: #E2E5E9;
        background: #292E35;
        border-color: #414852;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
    }

    html[data-color-theme="dark"] .fw-workflow .fw-group-head {
        background: #252A31;
        border-bottom-color: #414852;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-group-name {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-group-body {
        background: #292E35;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-member-col .fw-member-label {
        color: #8ED2F5;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-none {
        color: #A7ADB7;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-empty-state {
        color: #AEB6C0;
        background: #252A31;
        border-color: #59616C;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-departed {
        color: #FF9B9B;
    }

    /* Edit remains blue; Delete gets a red hover so the destructive action reads
   differently without permanently turning the whole header red. */
    html[data-color-theme="dark"] .fw-workflow .fw-group-actions .data-link {
        color: var(--odie-link);
    }

        html[data-color-theme="dark"] .fw-workflow .fw-group-actions .data-link:hover,
        html[data-color-theme="dark"] .fw-workflow .fw-group-actions .data-link:focus {
            color: var(--odie-link-hover);
        }

        html[data-color-theme="dark"] .fw-workflow .fw-group-actions .data-link:last-child:hover,
        html[data-color-theme="dark"] .fw-workflow .fw-group-actions .data-link:last-child:focus {
            color: #FF9B9B;
        }

    /* ----- group editor fields -------------------------------------------- */

    html[data-color-theme="dark"] .fw-workflow .fw-search {
        color: #E7E9ED;
        background: #1F242A;
        border-color: #4A535F;
    }

        html[data-color-theme="dark"] .fw-workflow .fw-search::placeholder {
            color: #7F8995;
        }

        html[data-color-theme="dark"] .fw-workflow .fw-search:focus {
            outline: none;
            border-color: #72C3F0;
            box-shadow: 0 0 0 2px rgba(114, 195, 240, 0.16);
        }

    /* ----- roster filter tabs / counts ------------------------------------ */

    html[data-color-theme="dark"] .fw-workflow .fw-counts {
        color: #AEB6C0;
    }

        html[data-color-theme="dark"] .fw-workflow .fw-counts b {
            color: #E7E9ED;
        }

    html[data-color-theme="dark"] .fw-workflow .fw-tab {
        color: #C9CFD6;
        background: #2A3037;
        border-color: #4A535F;
    }

        html[data-color-theme="dark"] .fw-workflow .fw-tab:hover {
            color: #EEF1F4;
            background: #343B45;
            border-color: #697482;
        }

        html[data-color-theme="dark"] .fw-workflow .fw-tab.active {
            color: #EAF7FE;
            background: #285B7A;
            border-color: #4B9BC5;
        }

    /* ----- roster ---------------------------------------------------------- */

    html[data-color-theme="dark"] .fw-workflow .fw-roster {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-roster-head {
        background: #1F252C;
        border-bottom-color: #414852;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-head-sort {
        color: #C9CFD6;
    }

        html[data-color-theme="dark"] .fw-workflow .fw-head-sort:hover,
        html[data-color-theme="dark"] .fw-workflow .fw-head-sort:focus {
            color: var(--odie-link-hover);
        }

    html[data-color-theme="dark"] .fw-workflow .fw-head-links {
        color: #7F8995;
    }

    html[data-color-theme="dark"] .fw-workflow .fw-roster-head .fw-head-links button {
        color: #9EA7B2 !important;
    }

        html[data-color-theme="dark"] .fw-workflow .fw-roster-head .fw-head-links button:hover,
        html[data-color-theme="dark"] .fw-workflow .fw-roster-head .fw-head-links button:focus {
            color: var(--odie-link-hover) !important;
        }

    html[data-color-theme="dark"] .fw-workflow .fw-row {
        color: #E2E5E9;
        background: #252A31;
        border-bottom-color: #3D444E;
    }

        html[data-color-theme="dark"] .fw-workflow .fw-row:nth-child(even) {
            background: #292F37;
        }

        html[data-color-theme="dark"] .fw-workflow .fw-row:hover {
            background: #303842;
        }

        html[data-color-theme="dark"] .fw-workflow .fw-row.assigned {
            background: rgba(114, 195, 240, 0.08);
        }

            html[data-color-theme="dark"] .fw-workflow .fw-row.assigned:hover {
                background: rgba(114, 195, 240, 0.13);
            }

    html[data-color-theme="dark"] .fw-workflow .fw-row-name {
        color: #E2E5E9;
    }

    /* ----- Evaluator / Employee role chips -------------------------------- */

    html[data-color-theme="dark"] .fw-workflow .fw-role {
        color: #B7BEC8;
        background: #30363F;
        border-color: #4A535F;
    }

        html[data-color-theme="dark"] .fw-workflow .fw-role:hover {
            color: #D6F0FC;
            background: #38414B;
            border-color: #72C3F0;
        }

        html[data-color-theme="dark"] .fw-workflow .fw-role.on-evaluator {
            color: #EAF7FE;
            background: #285B7A;
            border-color: #4B9BC5;
        }

        html[data-color-theme="dark"] .fw-workflow .fw-role.on-employee {
            color: #E5F5DF;
            background: #3E7125;
            border-color: #69A94B;
        }

    html[data-color-theme="dark"] .fw-workflow .fw-empty {
        color: #A7ADB7;
    }

    /* ----- editor labels / actions ---------------------------------------- */

    html[data-color-theme="dark"] .fw-workflow .fw-box-label {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fw-workflow .submit_button.btn-light {
        color: var(--odie-link) !important;
        background: #30363F !important;
        border-color: #4A535F !important;
    }

        html[data-color-theme="dark"] .fw-workflow .submit_button.btn-light:hover,
        html[data-color-theme="dark"] .fw-workflow .submit_button.btn-light:focus {
            color: var(--odie-link-hover) !important;
            background: #383F49 !important;
            border-color: #616B78 !important;
        }


    /* =========================================================================
   Staff Evaluation - Rubric Manage

   RubricManage.aspx is the authoring counterpart to Framework Details. It
   shares the se-* rubric components, but adds edit/add links and a full
   evidence-management panel. The light stylesheet gives the level headers,
   linked evidence, evidence list, and map-key note pale surfaces that become
   bright islands in dark mode.

   RubricManage.aspx adds .rm-manage to divContents so these rules are isolated
   to this page. Selection, permissions, add/edit links, and persistence remain
   unchanged.
   ========================================================================= */

    /* ----- page cards / selectors ------------------------------------------ */

    html[data-color-theme="dark"] .rm-manage .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .rm-manage .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .rm-manage .details_table .label {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .rm-manage #trDescription .data,
    html[data-color-theme="dark"] .rm-manage #trDescription td {
        color: #B7BEC8;
    }

    /* ----- Map Key --------------------------------------------------------- */

    /* Preserve the pinned-note visual language, but use the same dark warm note
   as Framework Details instead of a bright paper surface. */
    html[data-color-theme="dark"] .rm-manage .se-legend-note {
        color: #E8D9B9;
        background: #383326;
        border: 1px solid #5A4E34;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34);
    }

    html[data-color-theme="dark"] .rm-manage .se-legend-title {
        color: #FFD08A;
    }

    html[data-color-theme="dark"] .rm-manage .se-legend-entry {
        color: #D7D0C1;
    }

        html[data-color-theme="dark"] .rm-manage .se-legend-entry .se-ico-obs,
        html[data-color-theme="dark"] .rm-manage .se-legend-entry .se-ico-link {
            color: #B8C1CB;
        }

    html[data-color-theme="dark"] .rm-manage .se-swatch[style*="#F7C1C1" i] {
        background: #C96A6E !important;
    }

    html[data-color-theme="dark"] .rm-manage .se-swatch[style*="#C0DD97" i] {
        background: #78A653 !important;
    }

    /* ----- rubric hierarchy ------------------------------------------------ */

    html[data-color-theme="dark"] .rm-manage .se-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .rm-manage .se-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .rm-manage .se-cell,
    html[data-color-theme="dark"] .rm-manage .se-indicator {
        color: #E2E5E9;
    }

    /* ----- performance-level headers -------------------------------------- */

    html[data-color-theme="dark"] .rm-manage .se-head-1 {
        background: rgba(242, 85, 90, 0.13);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

        html[data-color-theme="dark"] .rm-manage .se-head-1 .se-head-title {
            color: #FFB2B4;
        }

        html[data-color-theme="dark"] .rm-manage .se-head-1 .se-head-desc {
            color: #EFA3A6;
        }

    html[data-color-theme="dark"] .rm-manage .se-head-green {
        background: rgba(95, 191, 75, 0.12);
        border: 1px solid rgba(95, 191, 75, 0.22);
    }

        html[data-color-theme="dark"] .rm-manage .se-head-green .se-head-title {
            color: #B8E7AA;
        }

        html[data-color-theme="dark"] .rm-manage .se-head-green .se-head-desc {
            color: #9FD68F;
        }

    /* ----- edit / add actions ---------------------------------------------- */

    html[data-color-theme="dark"] .rm-manage .se-edit,
    html[data-color-theme="dark"] .rm-manage .se-add,
    html[data-color-theme="dark"] .rm-manage .se-action {
        color: var(--odie-link) !important;
    }

        html[data-color-theme="dark"] .rm-manage .se-edit:hover,
        html[data-color-theme="dark"] .rm-manage .se-edit:focus,
        html[data-color-theme="dark"] .rm-manage .se-add:hover,
        html[data-color-theme="dark"] .rm-manage .se-add:focus,
        html[data-color-theme="dark"] .rm-manage .se-action:hover,
        html[data-color-theme="dark"] .rm-manage .se-action:focus {
            color: var(--odie-link-hover) !important;
        }

        html[data-color-theme="dark"] .rm-manage .se-edit .ph,
        html[data-color-theme="dark"] .rm-manage .se-add .ph,
        html[data-color-theme="dark"] .rm-manage .se-action .ph {
            color: currentColor;
        }

    /* ----- observable / linked evidence ----------------------------------- */

    html[data-color-theme="dark"] .rm-manage .se-ico-obs,
    html[data-color-theme="dark"] .rm-manage .se-ico-link {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .rm-manage .se-linked {
        color: #CDD3DA;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .rm-manage .se-linked-item {
        color: #CDD3DA;
    }

    /* ----- Evidence for This Rubric --------------------------------------- */

    html[data-color-theme="dark"] .rm-manage .se-evidence {
        color: #E2E5E9;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .rm-manage .se-evidence-head {
        border-bottom-color: #414852;
    }

    html[data-color-theme="dark"] .rm-manage .se-evidence-label {
        color: #F0B75A;
    }

    html[data-color-theme="dark"] .rm-manage .se-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

        html[data-color-theme="dark"] .rm-manage .se-evidence-item:hover {
            background: #293039;
            border-color: #535D69;
        }

    html[data-color-theme="dark"] .rm-manage .se-evidence-type {
        color: #B9C0C9;
        background: #343A43;
        border: 1px solid #4A535F;
    }

    /* Keep the evidence edit pencil visible without making every evidence card
   feel like an action button. */
    html[data-color-theme="dark"] .rm-manage .se-evidence-item .se-edit {
        color: #8ED2F5 !important;
    }

        html[data-color-theme="dark"] .rm-manage .se-evidence-item .se-edit:hover,
        html[data-color-theme="dark"] .rm-manage .se-evidence-item .se-edit:focus {
            color: #C4E8FA !important;
        }

    /* ----- empty states ---------------------------------------------------- */

    html[data-color-theme="dark"] .rm-manage #divNoFramework,
    html[data-color-theme="dark"] .rm-manage #divNoIndicators {
        color: #AEB6C0;
    }


    /* =========================================================================
   Staff Evaluation - Performance Levels Edit

   PerformanceLevelsEdit.aspx has four intentionally soft light-mode level
   blocks. In dark mode those blocks become large cream islands even though the
   Telerik dropdowns and text inputs are already using ODIE's dark treatment.

   PerformanceLevelsEdit.aspx adds .pl-edit to divContents so these overrides
   remain isolated to this page. No server-side behavior changes are required.
   ========================================================================= */

    /* ----- page cards / header --------------------------------------------- */

    html[data-color-theme="dark"] .pl-edit .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .pl-edit .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .pl-edit .details_table .label {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .pl-edit .pl-card-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .pl-edit .pl-intro {
        color: #AEB6C0;
    }

    /* ----- performance-level cards ---------------------------------------- */

    html[data-color-theme="dark"] .pl-edit .pl-level {
        background: #292E35;
        border: 1px solid #414852;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.20);
    }

        html[data-color-theme="dark"] .pl-edit .pl-level:hover {
            background: #2D343D;
            border-color: #535D69;
        }

    html[data-color-theme="dark"] .pl-edit .pl-level-meaning {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .pl-edit .pl-field-label {
        color: #C9CFD6;
    }

    /* ----- level chips ----------------------------------------------------- */

    html[data-color-theme="dark"] .pl-edit .pl-chip-1 {
        color: #FFB2B4;
        background: rgba(242, 85, 90, 0.14);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

    html[data-color-theme="dark"] .pl-edit .pl-chip-green {
        color: #B8E7AA;
        background: rgba(95, 191, 75, 0.14);
        border: 1px solid rgba(95, 191, 75, 0.24);
    }

    /* ----- text fields ----------------------------------------------------- */

    html[data-color-theme="dark"] .pl-edit .pl-field input[type="text"] {
        color: #E7E9ED;
        background: #1F242A;
        border-color: #4A535F;
    }

        html[data-color-theme="dark"] .pl-edit .pl-field input[type="text"]:focus {
            border-color: #72C3F0;
            outline: none;
            box-shadow: 0 0 0 2px rgba(114, 195, 240, 0.16);
        }

    /* ----- admin add-title card ------------------------------------------- */

    html[data-color-theme="dark"] .pl-edit #pnlAdminAddTitle,
    html[data-color-theme="dark"] .pl-edit [id$="pnlAdminAddTitle"] {
        background: #23272E;
        border-color: #414852;
    }

    /* ----- actions --------------------------------------------------------- */

    html[data-color-theme="dark"] .pl-edit .submit_button.btn-light {
        color: var(--odie-link) !important;
        background: #30363F !important;
        border-color: #4A535F !important;
    }

        html[data-color-theme="dark"] .pl-edit .submit_button.btn-light:hover,
        html[data-color-theme="dark"] .pl-edit .submit_button.btn-light:focus {
            color: var(--odie-link-hover) !important;
            background: #383F49 !important;
            border-color: #616B78 !important;
        }


    /* =========================================================================
   Staff Evaluation - Formal Evaluation Summary

   FormalEvaluationSummary.aspx is an analytics/read-only page. Its local
   stylesheet uses light stat cards, pale meter tracks, light level chips and a
   large white Evidence for Level Placement area. In dark mode those surfaces
   stand out sharply and several muted labels become too faint.

   FormalEvaluationSummary.aspx adds .fes-summary to divContents so these rules
   stay isolated to this page. Filters, aggregate queries, meter math, and
   binding behavior remain unchanged.
   ========================================================================= */

    /* ----- page cards / filters -------------------------------------------- */

    html[data-color-theme="dark"] .fes-summary .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .fes-summary .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .fes-summary .details_table .label {
            color: #E4E8ED;
        }

    /* ----- headline statistics -------------------------------------------- */

    html[data-color-theme="dark"] .fes-summary .es-stat {
        background: #292E35;
        border: 1px solid #414852;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.20);
    }

        html[data-color-theme="dark"] .fes-summary .es-stat:hover {
            background: #2D343D;
            border-color: #535D69;
        }

    html[data-color-theme="dark"] .fes-summary .es-stat-num {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fes-summary .es-stat-sub {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .fes-summary .es-stat-label {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .fes-summary .es-stat-warn {
        background: rgba(242, 85, 90, 0.08);
        border-color: rgba(242, 85, 90, 0.26);
    }

        html[data-color-theme="dark"] .fes-summary .es-stat-warn .es-stat-num {
            color: #FF9B9B;
        }

    /* ----- practice headings / placement distribution -------------------- */

    html[data-color-theme="dark"] .fes-summary .es-standard-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fes-summary .es-standard-desc {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .fes-summary .es-levels-track {
        background: #3A4049;
    }

    html[data-color-theme="dark"] .fes-summary .es-levels-legend {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .fes-summary .es-levels-empty {
        color: #8F98A4;
    }

    /* Keep the existing level family but deepen the two pale green segments so
   the distribution bar does not glow against the dark card. */
    html[data-color-theme="dark"] .fes-summary .es-lvl1 {
        background: #C75B5F;
    }

    html[data-color-theme="dark"] .fes-summary .es-lvl2 {
        background: #86A95F;
    }

    html[data-color-theme="dark"] .fes-summary .es-lvl3 {
        background: #6F9D38;
    }

    html[data-color-theme="dark"] .fes-summary .es-lvl4 {
        background: #4F862F;
    }

    /* ----- rubric hierarchy ------------------------------------------------ */

    html[data-color-theme="dark"] .fes-summary .es-rubric {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .fes-summary .es-rubric-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .fes-summary .es-cell,
    html[data-color-theme="dark"] .fes-summary .es-indicator {
        color: #E2E5E9;
    }

    /* ----- level chips ----------------------------------------------------- */

    html[data-color-theme="dark"] .fes-summary .es-chip-1 {
        color: #FFB2B4;
        background: rgba(242, 85, 90, 0.14);
        border: 1px solid rgba(242, 85, 90, 0.24);
    }

    html[data-color-theme="dark"] .fes-summary .es-chip-green {
        color: #B8E7AA;
        background: rgba(95, 191, 75, 0.14);
        border: 1px solid rgba(95, 191, 75, 0.24);
    }

    html[data-color-theme="dark"] .fes-summary .es-ico-obs {
        color: #AAB2BD;
    }

    /* ----- indicator/evidence meters -------------------------------------- */

    html[data-color-theme="dark"] .fes-summary .es-meter-track {
        background: #3A4049;
    }

    html[data-color-theme="dark"] .fes-summary .es-meter-met {
        background: #4F8C2C;
    }

    html[data-color-theme="dark"] .fes-summary .es-meter-notmet {
        background: #C74F54;
    }

    html[data-color-theme="dark"] .fes-summary .es-meter-label {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .fes-summary .es-nodata {
        color: #8F98A4;
    }

    /* ----- Evidence for Level Placement ----------------------------------- */

    html[data-color-theme="dark"] .fes-summary .es-evidence {
        color: #E2E5E9;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .fes-summary .es-evidence-label {
        color: #F0B75A;
    }

    html[data-color-theme="dark"] .fes-summary .es-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

        html[data-color-theme="dark"] .fes-summary .es-evidence-item:hover {
            background: #293039;
            border-color: #535D69;
        }

    html[data-color-theme="dark"] .fes-summary .es-evidence-type {
        color: #B9C0C9;
        background: #343A43;
        border: 1px solid #4A535F;
    }

    html[data-color-theme="dark"] .fes-summary .es-none {
        color: #A7ADB7;
    }

    /* ----- empty states ---------------------------------------------------- */

    html[data-color-theme="dark"] .fes-summary #divNoFramework,
    html[data-color-theme="dark"] .fes-summary #lblNoPractices {
        color: #AEB6C0;
    }


    /* =========================================================================
   Staff Evaluation - Walkthrough Summary

   WalkthroughEvaluationSummary.aspx is the walkthrough counterpart to the
   Formal Evaluation Summary. Its local stylesheet still uses light stat cards,
   white indicator cards, pale meter tracks and a light evidence section.

   WalkthroughEvaluationSummary.aspx adds .wes-summary to divContents so these
   overrides remain isolated to this page. All filters, summary queries and
   walkthrough-specific aggregate logic remain unchanged.
   ========================================================================= */

    /* ----- page cards / filters -------------------------------------------- */

    html[data-color-theme="dark"] .wes-summary .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .wes-summary .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .wes-summary .details_table .label {
            color: #E4E8ED;
        }

    /* ----- headline statistics -------------------------------------------- */

    html[data-color-theme="dark"] .wes-summary .ws-stat {
        background: #292E35;
        border: 1px solid #414852;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.20);
    }

        html[data-color-theme="dark"] .wes-summary .ws-stat:hover {
            background: #2D343D;
            border-color: #535D69;
        }

    html[data-color-theme="dark"] .wes-summary .ws-stat-num {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .wes-summary .ws-stat-sub {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .wes-summary .ws-stat-label {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .wes-summary .ws-stat-warn {
        background: rgba(242, 85, 90, 0.08);
        border-color: rgba(242, 85, 90, 0.26);
    }

        html[data-color-theme="dark"] .wes-summary .ws-stat-warn .ws-stat-num {
            color: #FF9B9B;
        }

    /* ----- practice / strand hierarchy ------------------------------------ */

    html[data-color-theme="dark"] .wes-summary .ws-standard-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .wes-summary .ws-standard-desc {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .wes-summary .ws-strand {
        border-left-color: #59616C;
    }

    html[data-color-theme="dark"] .wes-summary .ws-strand-title {
        color: #E7E9ED;
    }

    /* ----- observable indicator cards ------------------------------------- */

    html[data-color-theme="dark"] .wes-summary .ws-indicator {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

        html[data-color-theme="dark"] .wes-summary .ws-indicator:hover {
            background: #293039;
            border-color: #535D69;
        }

    /* ----- observed / not-observed meters --------------------------------- */

    html[data-color-theme="dark"] .wes-summary .ws-meter-track {
        background: #3A4049;
    }

    html[data-color-theme="dark"] .wes-summary .ws-meter-met {
        background: #4F8C2C;
    }

    html[data-color-theme="dark"] .wes-summary .ws-meter-notmet {
        background: #C74F54;
    }

    html[data-color-theme="dark"] .wes-summary .ws-meter-label {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .wes-summary .ws-nodata {
        color: #8F98A4;
    }

    html[data-color-theme="dark"] .wes-summary .ws-ico-obs {
        color: #AAB2BD;
    }

    /* ----- supporting evidence -------------------------------------------- */

    html[data-color-theme="dark"] .wes-summary .ws-evidence {
        color: #E2E5E9;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    html[data-color-theme="dark"] .wes-summary .ws-evidence-label {
        color: #F0B75A;
    }

    html[data-color-theme="dark"] .wes-summary .ws-evidence-item {
        color: #E2E5E9;
        background: #23272E;
        border-color: #414852;
    }

        html[data-color-theme="dark"] .wes-summary .ws-evidence-item:hover {
            background: #293039;
            border-color: #535D69;
        }

    html[data-color-theme="dark"] .wes-summary .ws-evidence-type {
        color: #B9C0C9;
        background: #343A43;
        border: 1px solid #4A535F;
    }

    html[data-color-theme="dark"] .wes-summary .ws-none {
        color: #A7ADB7;
    }

    /* ----- empty states ---------------------------------------------------- */

    html[data-color-theme="dark"] .wes-summary #divNoFramework,
    html[data-color-theme="dark"] .wes-summary #lblNoData {
        color: #AEB6C0;
    }


    /* =========================================================================
   Staff Evaluation - Student Learning Objective Details

   StudentLearningObjectiveDetails follows the same card-stack / workflow
   language as ProfessionalDevelopmentPlanDetails. The remaining dark-mode
   issues are primarily the Your Move state colors and the SLO Journey's
   light future-step/comment styling.

   StudentLearningObjectiveDetails.aspx wraps conBody in .slo-details so these
   rules remain isolated to the read-only page.
   ========================================================================= */

    /* ----- common cards / header details ----------------------------------- */

    html[data-color-theme="dark"] .slo-details .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .slo-details .details_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .slo-details .details_table .label {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .slo-details .data-sm {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .slo-details .slo-card-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .slo-details .se-content {
        color: #E2E5E9;
    }

    html[data-color-theme="dark"] .slo-details .se-none {
        color: #AEB6C0;
    }

    /* ----- Your Move / waiting callout ------------------------------------- */

    /* Quiet draft / waiting-on-someone-else state */
    html[data-color-theme="dark"] .slo-details .se-move-idle {
        background: #252A31;
        border-color: #3D444E;
    }

        html[data-color-theme="dark"] .slo-details .se-move-idle .se-move-title,
        html[data-color-theme="dark"] .slo-details .se-move-idle .se-move-text {
            color: var(--se-text-secondary);
        }

        html[data-color-theme="dark"] .slo-details .se-move-idle .se-move-ico {
            color: #B7BEC8;
            background: #343A43;
            border: 1px solid #4A535F;
        }

    /* Viewer has the next step */
    html[data-color-theme="dark"] .slo-details .se-move-amber {
        background: rgba(240, 163, 58, 0.08);
        border-color: rgba(240, 163, 58, 0.28);
    }

        html[data-color-theme="dark"] .slo-details .se-move-amber .se-move-title,
        html[data-color-theme="dark"] .slo-details .se-move-amber .se-move-text {
            color: var(--se-amber-text);
        }

        html[data-color-theme="dark"] .slo-details .se-move-amber .se-move-ico {
            color: #F3B351;
            background: rgba(243, 179, 81, 0.16);
            border: 1px solid rgba(243, 179, 81, 0.24);
            box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.06);
        }

            html[data-color-theme="dark"] .slo-details .se-move-amber .se-move-ico i {
                color: #F3B351;
            }

    /* Teacher step is done; waiting on evaluator. This is the state shown in
   the supplied screenshot. */
    html[data-color-theme="dark"] .slo-details .se-move-waiting {
        background: rgba(240, 163, 58, 0.07);
        border-color: rgba(240, 163, 58, 0.24);
    }

        html[data-color-theme="dark"] .slo-details .se-move-waiting .se-move-title,
        html[data-color-theme="dark"] .slo-details .se-move-waiting .se-move-text {
            color: var(--se-amber-text);
        }

        html[data-color-theme="dark"] .slo-details .se-move-waiting .se-move-ico {
            color: #F3B351;
            background: rgba(243, 179, 81, 0.16);
            border: 1px solid rgba(243, 179, 81, 0.24);
            box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.06);
        }

            html[data-color-theme="dark"] .slo-details .se-move-waiting .se-move-ico i {
                color: #F3B351;
            }

    /* Evaluator milestone is complete; waiting on the participants */
    html[data-color-theme="dark"] .slo-details .se-move-blue {
        background: rgba(114, 195, 240, 0.08);
        border-color: rgba(114, 195, 240, 0.25);
    }

        html[data-color-theme="dark"] .slo-details .se-move-blue .se-move-title,
        html[data-color-theme="dark"] .slo-details .se-move-blue .se-move-text,
        html[data-color-theme="dark"] .slo-details .se-move-blue .se-move-ico {
            color: var(--se-blue-text);
        }

    /* Returned / deleted */
    html[data-color-theme="dark"] .slo-details .se-move-red {
        background: rgba(242, 85, 90, 0.08);
        border-color: rgba(242, 85, 90, 0.26);
    }

        html[data-color-theme="dark"] .slo-details .se-move-red .se-move-title,
        html[data-color-theme="dark"] .slo-details .se-move-red .se-move-text,
        html[data-color-theme="dark"] .slo-details .se-move-red .se-move-ico {
            color: var(--se-red-text);
        }

    /* Complete */
    html[data-color-theme="dark"] .slo-details .se-move-green {
        background: rgba(95, 191, 75, 0.08);
        border-color: rgba(95, 191, 75, 0.25);
    }

        html[data-color-theme="dark"] .slo-details .se-move-green .se-move-title,
        html[data-color-theme="dark"] .slo-details .se-move-green .se-move-text,
        html[data-color-theme="dark"] .slo-details .se-move-green .se-move-ico {
            color: var(--se-green-text);
        }

    html[data-color-theme="dark"] .slo-details .se-move-btn {
        color: #1A1D21 !important;
        background: #F0B75A;
        border-color: #F0B75A;
    }

        html[data-color-theme="dark"] .slo-details .se-move-btn:hover,
        html[data-color-theme="dark"] .slo-details .se-move-btn:focus {
            color: #111317 !important;
            background: #FFD08A;
            border-color: #FFD08A;
        }

    /* ----- SLO Journey ----------------------------------------------------- */

    html[data-color-theme="dark"] .slo-details .slo-j-title {
        color: #E4E8ED;
    }

    html[data-color-theme="dark"] .slo-details .slo-j-meta {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .slo-details .slo-j-dot-done {
        color: #DDF4D5;
        background: #477F24;
    }

    html[data-color-theme="dark"] .slo-details .slo-j-dot-current {
        color: #3D2505;
        background: #F3B85A;
        border: 1px solid rgba(255, 208, 138, 0.32);
    }

    html[data-color-theme="dark"] .slo-details .slo-j-dot-returned {
        color: #FFE0E1;
        background: #B74449;
    }

    html[data-color-theme="dark"] .slo-details .slo-j-dot-future {
        background: #30363F;
        border-color: #6A737F;
    }

    html[data-color-theme="dark"] .slo-details .slo-j-line {
        background: #4A525C;
    }

    html[data-color-theme="dark"] .slo-details .slo-j-line-done {
        background: #639B43;
    }

    /* Future steps still recede, but remain readable in dark mode. */
    html[data-color-theme="dark"] .slo-details .slo-j-row-future {
        opacity: 0.72;
    }

        html[data-color-theme="dark"] .slo-details .slo-j-row-future .slo-j-title {
            color: #C5CBD3;
        }

        html[data-color-theme="dark"] .slo-details .slo-j-row-future .slo-j-meta {
            color: #8F98A4;
        }

    html[data-color-theme="dark"] .slo-details .slo-j-comment {
        color: #CDD3DA;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    /* ----- history --------------------------------------------------------- */

    html[data-color-theme="dark"] .slo-details #spanHistoryToggle {
        color: #A7ADB7 !important;
    }

    html[data-color-theme="dark"] .slo-details .card-header[data-bs-target="#divCollapseHistory"] {
        border-bottom-color: #3D444E;
    }


    /* =========================================================================
   Staff Evaluation - Student Learning Objective Edit

   StudentLearningObjectiveEdit is the workflow editor for the same SLO card
   stack. It also owns a custom PageTop RadEditor toolbar, so it needs the same
   two-part fix used by ProfessionalDevelopmentPlanEdit: page CSS for the
   floating toolbar and ODIE's normal RadEditorOnClientLoad for the iframe
   content area.

   StudentLearningObjectiveEdit.aspx adds .slo-edit to divContents and tags its
   PageTop windows with .slo-toolbar-window.
   ========================================================================= */

    /* ----- cards / header details ------------------------------------------ */

    html[data-color-theme="dark"] .slo-edit .card {
        border-color: var(--se-border);
    }

    html[data-color-theme="dark"] .slo-edit .details_table,
    html[data-color-theme="dark"] .slo-edit .main_table {
        background: transparent;
    }

        html[data-color-theme="dark"] .slo-edit .details_table .label,
        html[data-color-theme="dark"] .slo-edit .main_table .label,
        html[data-color-theme="dark"] .slo-edit .main_table .label_no_colon {
            color: #E4E8ED;
        }

    html[data-color-theme="dark"] .slo-edit .data-sm {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .slo-edit .slo-card-title {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .slo-edit .se-content {
        color: #E2E5E9;
    }

    html[data-color-theme="dark"] .slo-edit .se-none {
        color: #AEB6C0;
    }

    html[data-color-theme="dark"] .slo-edit .slo-prompt {
        color: #D9DEE4;
    }

    /* ----- Your Move ------------------------------------------------------- */

    html[data-color-theme="dark"] .slo-edit .slo-move-amber {
        background: rgba(240, 163, 58, 0.08);
        border-color: rgba(240, 163, 58, 0.28);
    }

        html[data-color-theme="dark"] .slo-edit .slo-move-amber .slo-move-title,
        html[data-color-theme="dark"] .slo-edit .slo-move-amber .slo-move-text {
            color: var(--se-amber-text);
        }

        html[data-color-theme="dark"] .slo-edit .slo-move-amber .slo-move-ico {
            color: #F3B351;
            background: rgba(243, 179, 81, 0.16);
            border: 1px solid rgba(243, 179, 81, 0.24);
            box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.06);
        }

            html[data-color-theme="dark"] .slo-edit .slo-move-amber .slo-move-ico i {
                color: #F3B351;
            }

    html[data-color-theme="dark"] .slo-edit .slo-move-red {
        background: rgba(242, 85, 90, 0.08);
        border-color: rgba(242, 85, 90, 0.26);
    }

        html[data-color-theme="dark"] .slo-edit .slo-move-red .slo-move-title,
        html[data-color-theme="dark"] .slo-edit .slo-move-red .slo-move-text {
            color: var(--se-red-text);
        }

        html[data-color-theme="dark"] .slo-edit .slo-move-red .slo-move-ico {
            color: #FFB2B4;
            background: rgba(242, 85, 90, 0.14);
            border: 1px solid rgba(242, 85, 90, 0.22);
        }

            html[data-color-theme="dark"] .slo-edit .slo-move-red .slo-move-ico i {
                color: #FFB2B4;
            }

    html[data-color-theme="dark"] .slo-edit .slo-move-gray {
        background: #252A31;
        border-color: #3D444E;
    }

        html[data-color-theme="dark"] .slo-edit .slo-move-gray .slo-move-title,
        html[data-color-theme="dark"] .slo-edit .slo-move-gray .slo-move-text {
            color: var(--se-text-secondary);
        }

        html[data-color-theme="dark"] .slo-edit .slo-move-gray .slo-move-ico {
            color: #B7BEC8;
            background: #343A43;
            border: 1px solid #4A535F;
        }

            html[data-color-theme="dark"] .slo-edit .slo-move-gray .slo-move-ico i {
                color: #B7BEC8;
            }

    html[data-color-theme="dark"] .slo-edit .slo-move-green {
        background: rgba(95, 191, 75, 0.08);
        border-color: rgba(95, 191, 75, 0.25);
    }

        html[data-color-theme="dark"] .slo-edit .slo-move-green .slo-move-title,
        html[data-color-theme="dark"] .slo-edit .slo-move-green .slo-move-text {
            color: var(--se-green-text);
        }

        html[data-color-theme="dark"] .slo-edit .slo-move-green .slo-move-ico,
        html[data-color-theme="dark"] .slo-edit .slo-move-green .slo-move-ico i {
            color: #B8E7AA;
        }

    /* ----- workspace / level selection ------------------------------------ */

    html[data-color-theme="dark"] .slo-edit .slo-workspace-header {
        color: #E7E9ED;
    }

    html[data-color-theme="dark"] .slo-edit .error {
        color: #FF9B9B;
    }

    /* ----- SLO Journey ----------------------------------------------------- */

    html[data-color-theme="dark"] .slo-edit .slo-j-title {
        color: #E4E8ED;
    }

    html[data-color-theme="dark"] .slo-edit .slo-j-meta {
        color: #AAB2BD;
    }

    html[data-color-theme="dark"] .slo-edit .slo-j-dot-done {
        color: #DDF4D5;
        background: #477F24;
    }

    html[data-color-theme="dark"] .slo-edit .slo-j-dot-current {
        color: #3D2505;
        background: #F3B85A;
        border: 1px solid rgba(255, 208, 138, 0.32);
    }

    html[data-color-theme="dark"] .slo-edit .slo-j-dot-returned {
        color: #FFE0E1;
        background: #B74449;
    }

    html[data-color-theme="dark"] .slo-edit .slo-j-dot-future {
        background: #30363F;
        border-color: #6A737F;
    }

    html[data-color-theme="dark"] .slo-edit .slo-j-line {
        background: #4A525C;
    }

    html[data-color-theme="dark"] .slo-edit .slo-j-line-done {
        background: #639B43;
    }

    html[data-color-theme="dark"] .slo-edit .slo-j-row-future {
        opacity: 0.72;
    }

        html[data-color-theme="dark"] .slo-edit .slo-j-row-future .slo-j-title {
            color: #C5CBD3;
        }

        html[data-color-theme="dark"] .slo-edit .slo-j-row-future .slo-j-meta {
            color: #8F98A4;
        }

    html[data-color-theme="dark"] .slo-edit .slo-j-comment {
        color: #CDD3DA;
        background: #292E35;
        border: 1px solid #3B424C;
    }

    /* ----- action buttons -------------------------------------------------- */

    html[data-color-theme="dark"] .slo-edit .submit_button.btn-light {
        color: var(--odie-link) !important;
        background: #30363F !important;
        border-color: #4A535F !important;
    }

        html[data-color-theme="dark"] .slo-edit .submit_button.btn-light:hover,
        html[data-color-theme="dark"] .slo-edit .submit_button.btn-light:focus {
            color: var(--odie-link-hover) !important;
            background: #383F49 !important;
            border-color: #616B78 !important;
        }

    /* ----- this page's floating PageTop RadEditor toolbar ------------------ */

    html[data-color-theme="dark"] .reToolbarWindow.slo-toolbar-window.RadWindow .rwWindowContent,
    html[data-color-theme="dark"] .reToolbarWindow.slo-toolbar-window .reToolbarWrapper,
    html[data-color-theme="dark"] .reToolbarWindow.slo-toolbar-window .reToolbar {
        background-color: #252B32 !important;
        background-image: none !important;
    }

    html[data-color-theme="dark"] .reToolbarWindow.slo-toolbar-window.RadWindow .rwWindowContent {
        border: 1px solid #5A4931 !important;
        border-left: 5px solid #C88A32 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
    }

    html[data-color-theme="dark"] .reToolbarWindow.slo-toolbar-window .reToolbar li a.reTool {
        border-color: #4A535F !important;
    }

    html[data-color-theme="dark"] .reToolbarWindow.slo-toolbar-window .reToolbar li.reSeparator {
        background: #C88A32 !important;
    }

    html[data-color-theme="dark"] .reToolbarWindow.slo-toolbar-window .reToolbar li.slo-tb-label {
        color: #FFD08A;
        background-color: rgba(240, 163, 58, 0.12);
        border-color: rgba(240, 163, 58, 0.28);
    }

    html[data-color-theme="dark"] .reToolbarWindow.slo-toolbar-window.slo-tb-active .rwWindowContent {
        box-shadow: 0 0 0 3px rgba(240, 163, 58, 0.16), 0 2px 8px rgba(0, 0, 0, 0.34);
    }

    html[data-color-theme="dark"] .slo-edit .RadEditor.slo-ed-active {
        outline-color: #C88A32;
        box-shadow: 0 0 0 3px rgba(240, 163, 58, 0.16);
    }


    /* =========================================================================
   Staff Evaluation - Formal Evaluation Details
   Your Move amber bell visibility

   The amber card itself is already correct. The remaining issue is that the
   nested Phosphor bell glyph can inherit a darker color than the surrounding
   icon chip. Keep the chip the same size and simply give both the chip and the
   glyph a brighter amber treatment.
   ========================================================================= */

    html[data-color-theme="dark"] .fed-details .se-move-amber .se-move-ico {
        color: #FFD08A;
        background: rgba(243, 179, 81, 0.18);
        border: 1px solid rgba(255, 208, 138, 0.32);
        box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.08);
    }

        html[data-color-theme="dark"] .fed-details .se-move-amber .se-move-ico i {
            color: #FFD08A !important;
        }

/* =========================================================================
   DELIVERY
   -------------------------------------------------------------------------
   DeliveryAdd, DeliveryCoordination, DeliveryDetails, DeliveryEdit,
   DeliveryEmail and DeliveryList each add .dlv-page to their divContents
   wrapper; the three RadGrids add .dlv-grid.

   One wrapper is shared across the module rather than one per page because
   these six pages are assembled from the same handful of legacy classes
   (details_table, main_table, label, data). Six per-page wrappers would mean
   six copies of identical rules. The blast radius is still confined to
   delivery, which is the point of the wrapper.

   The save-time scrub was already applied to these pages when the dark mode
   helper was introduced, so this is the CSS half only - no code-behind
   change is needed for editor content.
   ========================================================================= */

    /* .details_table is repainted a flat #23262C by the global rule and
       .main_table has no rule at all. Transparent keeps both in step with the
       card surface if that colour is ever retuned. */
    html[data-color-theme="dark"] .dlv-page .details_table,
    html[data-color-theme="dark"] .dlv-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .dlv-page .label,
        html[data-color-theme="dark"] .dlv-page .label_no_colon {
            color: #E4E8ED;
        }

        html[data-color-theme="dark"] .dlv-page .data,
        html[data-color-theme="dark"] .dlv-page .data-att {
            color: var(--odie-body-color);
        }

    html[data-color-theme="dark"] .dlv-page .page_divider {
        border-color: var(--odie-border-light);
    }

    /* ---- Status text -------------------------------------------------------
       DeliveryDetails and DeliveryList build their status text in the
       code-behind with a named colour stamped inline (color:Purple / Blue /
       Green), so only !important can reach past the style attribute.

       Matching the literal colour word keeps this away from user-pasted
       content, which arrives as hex or rgb() rather than "Purple".

       The same pattern is emitted from eight other files across accounts,
       assets and workshops. Fixing it at the source is a cross-module change,
       so it is scoped to delivery here rather than made global. */
    html[data-color-theme="dark"] .dlv-page [style*="color:Purple" i],
    html[data-color-theme="dark"] .dlv-page a.purple-link {
        color: #C9A7F0 !important;
    }

    html[data-color-theme="dark"] .dlv-page [style*="color:Blue" i],
    html[data-color-theme="dark"] .dlv-page a.blue-link {
        color: #8AB4F8 !important;
    }

    html[data-color-theme="dark"] .dlv-page [style*="color:Green" i],
    html[data-color-theme="dark"] .dlv-page a.green-link {
        color: #7BD88F !important;
    }

    /* The history collapse chevron on DeliveryDetails carries color:#666 inline
       in the markup, which is near-invisible on the dark card. It is a plain
       span (no runat="server") so the id survives to the browser unmangled. */
    html[data-color-theme="dark"] .dlv-page #spanHistoryToggle {
        color: var(--odie-muted) !important;
    }

    /* ---- Stored comment HTML -----------------------------------------------
       DeliveryDetails renders dr("Comments") straight into lblAdditionalInformation,
       so whatever is in the database arrives as markup. The save-time scrub only
       protects content written from now on; comments pasted in from Word or an
       email years ago still carry near-black inline colours, and no ordinary rule
       can reach past an inline style.

       Same treatment and the same two carve-outs as the .memo_data block: leave
       an element alone if it also declares a background of its own, and let links
       keep a link colour. */
    html[data-color-theme="dark"] .dlv-page .dlv-comments {
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .dlv-page .dlv-comments [style*="color:" i]:not([style*="background" i]):not(a) {
            color: inherit !important;
        }

        html[data-color-theme="dark"] .dlv-page .dlv-comments a {
            color: var(--odie-link) !important;
        }

    /* ---- Grids -------------------------------------------------------------
       There is no global dark rule for RadGrid_Glow, so each converted page
       supplies its own. Same shape as the .evl-list block. */
    html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgAltRow:hover > td {
            background: #333941 !important;
        }

        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* An empty grid is a real state here - a coordination day with no
           scheduled deliveries - and otherwise keeps the skin's light surface
           in the middle of a dark card. */
        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .dlv-page .dlv-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border) !important;
        }

/* =========================================================================
   ACCOUNTS - shared
   -------------------------------------------------------------------------
   Every converted Account page adds .acc-page to its divContents wrapper plus
   a page class (.acc-list, .acc-details), and every RadGrid on those pages
   adds .acc-grid. Page-specific rules live in their own blocks below.

   The shared wrapper earns its place here: AccountList has one grid and
   AccountDetails has seven, all needing identical treatment. In dark mode the
   Telerik skin switches to Glow (see WebsiteTelerikSkin in common_settings.vb),
   and Glow's own bluish slate does not match ODIE's neutral #23262C card, so
   each grid needs pulling into the same family as .evl-list and .pdl-list.

   Neither page hardcodes a colour in a way that needed changing: the markup
   and code-behind colours found on AccountDetails are overridden below rather
   than edited, because they are all doing real work in light mode.
   ========================================================================= */

    /* Filter card above the grid. .label and .data carry no colour in the light
       sheet, so they already inherit the dark body colour - these only set what
       differs. */
    /* .details_table is repainted a flat #23262C by the global rule; .main_table
       has no colour rule anywhere (its only declaration in master.css is an
       inert border - border-width is 0, so the #FFF border-color never paints).
       Transparent keeps both in step with the card surface. */
    html[data-color-theme="dark"] .acc-page .details_table,
    html[data-color-theme="dark"] .acc-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .acc-page .label {
            color: #E4E8ED;
        }

    /* ---- Stored HTML -------------------------------------------------------
       .acc-stored-html marks any control that renders HTML straight out of the
       database - a saved RadEditor explanation, a history log assembled from
       HistoryDetails rows. The save-time scrub only protects content written
       from now on; anything typed or pasted years ago still carries inline
       colours, and no ordinary rule reaches past an inline style.

       Same two carve-outs as .memo_data: leave an element alone if it also
       declares a background of its own, and let links keep a link colour.

       Note this deliberately beats the named-colour status rules further down
       by specificity. Inside stored content there is no way to tell a colour
       somebody chose on purpose from one that arrived pasted in, so everything
       normalises to the body colour, which is at least guaranteed readable.
       Outside stored content - the live status label - the named-colour rules
       still apply and keep their meaning. */
    html[data-color-theme="dark"] .acc-page .acc-stored-html {
        color: var(--odie-body-color);
    }

        /* The transparent-background variants are not redundant: Word and Google
           Docs emit "background-color: transparent; color: #222222" on nearly
           every element, and the plain carve-out above treats that as a
           deliberate fill and leaves the whole paste dark.  See the fuller note
           in the Memo bodies block near the top of this file. */
        html[data-color-theme="dark"] .acc-page .acc-stored-html [style*="color:" i]:not([style*="background" i]):not(a),
        html[data-color-theme="dark"] .acc-page .acc-stored-html [style*="color:" i][style*="background-color: transparent" i]:not(a),
        html[data-color-theme="dark"] .acc-page .acc-stored-html [style*="color:" i][style*="background-color:transparent" i]:not(a) {
            color: inherit !important;
        }

        html[data-color-theme="dark"] .acc-page .acc-stored-html font[color] {
            color: inherit !important;
        }

        html[data-color-theme="dark"] .acc-page .acc-stored-html a {
            color: var(--odie-link) !important;
        }

    /* ---- Grid --------------------------------------------------------------
       Same shape as the .evl-list block. The rad_grid_*_style classes on the
       columns are inert on this theme - they are only defined in
       themes/simple/index.css - so the Glow classes are the real hook. */
    html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        /* Header cells and the sort links inside them. AllowSorting is on, so
           every header is an anchor and would otherwise take the link blue. */
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgAltRow:hover > td {
            background: #333941 !important;
        }

        /* Account, Email and Entity are all link columns, so most cells on this
           page are anchors. */
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

            html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgRow > td a:hover,
            html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgAltRow > td a:hover {
                color: var(--odie-link-hover) !important;
            }

        /* A filter that matches nothing is an ordinary outcome on this page. */
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        /* PagerStyle is NextPrevAndNumeric with AlwaysVisible, and ShowStatusBar
           is on, so both of these are always rendered on this page. */
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .acc-page .acc-grid.RadGrid_Glow .rgPager a {
                color: var(--odie-link) !important;
            }

/* =========================================================================
   ACCOUNT DETAILS
   -------------------------------------------------------------------------
   AccountDetails.aspx adds .acc-details alongside .acc-page, and .acc-grid to
   all seven of its RadGrids.

   Everything below overrides an inline colour rather than editing it, because
   each one is doing real work in light mode - unlike the delivery pages, none
   of these turned out to be dead markup.

   Deliberately left alone: lnkChangePassword carries color:#FFF !important
   inline, but it sits on a .btn-secondary whose fill does not change with the
   theme, so white is correct in both.
   ========================================================================= */

    /* Twelve collapse chevrons, one per card header, each carrying color:#666
       inline. Matched on the data-collapse-toggle attribute rather than by id:
       the ids differ per section, the attribute is what they have in common,
       and it survives ASP.NET id mangling. */
    html[data-color-theme="dark"] .acc-page [data-collapse-toggle] {
        color: var(--odie-muted) !important;
    }

    /* "Asset List" and "Registration List" in their card headers carry the
       brand teal #1490A6 inline, which is too dark against the card. The class
       is only a hook - it has no light-mode rule, so light is unchanged. */
    html[data-color-theme="dark"] .acc-page .acc-header-link {
        color: #4FC3D9 !important;
    }

    /* .header-spinner is defined at the same brand teal in the <style> block of
       both AccountDetails and EntityDetails - the only two pages that use it.
       Scoped to .acc-page rather than either page so one rule covers both.
       Overridden from here rather than edited there, so all dark knowledge stays
       in one file, and because those blocks are served to every tenant. */
    html[data-color-theme="dark"] .acc-page .header-spinner {
        color: #4FC3D9;
    }

    /* ---- Status text -------------------------------------------------------
       Three places emit a status wrapped in a named colour: the Absence
       Requests grid (code-behind) and an "Approved" literal built inside a SQL
       CASE expression. Same treatment and the same colours as the delivery
       pages, so the two modules stay consistent.

       Note the codebase's own answer for server-generated HTML is different -
       accounts_utilities.vb branches on CurrentUser.MasterPage = "esu10_dark_2026"
       and emits a separate class. That is the better fix, but it belongs in a
       deliberate cross-module pass rather than here. */
    html[data-color-theme="dark"] .acc-page [style*="color:Green" i] {
        color: #7BD88F !important;
    }

    html[data-color-theme="dark"] .acc-page [style*="color:Purple" i] {
        color: #C9A7F0 !important;
    }

    /* Red is emitted by five files under accounts/ - RequestList, RequestListOld,
       TravelRequestDetails, BeginningAbsenceBalanceManage and CurrentAbsenceBalances -
       so this covers each of them as its page gains the wrapper. #FF7B7B is the
       same red .error uses in dark mode, which keeps status reds and error reds
       consistent.

       This only reaches spans whose inline style has no !important of its own.
       Where the emitted markup carries "color:Red !important" the cascade puts it
       out of reach of any stylesheet, and the colour has to be chosen server-side -
       see the unassigned-vehicle link in RequestList.aspx.vb. */
    html[data-color-theme="dark"] .acc-page [style*="color:Red" i] {
        color: #FF7B7B !important;
    }

    /* EmailList's auto-send banner uses Bootstrap's success-alert palette in the
       page's own <style> block - #155724 on #d4edda with a #c3e6cb border. It is
       readable as-is, just obviously a light-mode element sitting on a dark card,
       so this is the same relationship rebuilt against the charcoal. Overridden
       here rather than in the page, since that block is served to every tenant.

       .auto-send-active is left alone: white on #28a745 works in both themes. */
    html[data-color-theme="dark"] .acc-page .auto-send-status {
        color: #A7E0B5;
        background-color: #1C2E22;
        border-color: #2F4A38;
    }

    /* ---- EmailDetails: the sent message is themed, not preserved -------------
       The body is a whole email document - composed in a RadEditor somewhere in
       ODIE, then sent to a mail client that rendered it on white. It therefore
       arrives full of light-mode colours, and it is themed here rather than shown
       on a light card.

       The ordinary .acc-stored-html neutraliser is not enough for this and would
       be actively harmful. That rule spares an element only when the *same*
       element declares a background, and email HTML habitually puts a background
       on a wrapping table and colours on the cells inside it. The wrapper would
       keep its light background while its text was forced light: white on white.

       Flattening the email's own surfaces is what makes recolouring safe, so the
       two rules below belong together - neither is correct without the other.
       bgcolor is matched as well as inline style, because email HTML still uses
       the attribute. */
    html[data-color-theme="dark"] .acc-page .email-body-card [style*="background" i],
    html[data-color-theme="dark"] .acc-page .email-body-card [bgcolor] {
        background-color: transparent !important;
        background-image: none !important;
    }

        /* Every colour goes, links included. An email's own link blue is chosen
           against white and is unreadable on the card. */
        html[data-color-theme="dark"] .acc-page .email-body-card [style*="color:" i]:not(a) {
            color: inherit !important;
        }

        html[data-color-theme="dark"] .acc-page .email-body-card a,
        html[data-color-theme="dark"] .acc-page .email-body-card a[style*="color:" i] {
            color: var(--odie-link) !important;
        }

    /* Images are deliberately not touched. Inverting them would keep a dark-ink
       logo visible but wreck photographs and anything already light-on-transparent,
       and there is no way to tell which is which from CSS. A dark logo on the dark
       card is the known cost of this approach. */

/* =========================================================================
   ACCOUNT EDIT
   -------------------------------------------------------------------------
   AccountEdit.aspx adds .acc-edit alongside .acc-page. It is a pure form -
   no grids - and it hardcodes no colours anywhere: no <style> block, nothing
   inline, nothing in the code-behind. The form inputs, validators and buttons
   are all covered by the global rules already.

   What it does need is the two things a page wrapper cannot reach on its own.
   ========================================================================= */

    /* ---- Modals ------------------------------------------------------------
       The "Verified Email" and "ESU 10 Work Phone" modals are SIBLINGS of
       divContents, not children - divContents closes at line 426 and both
       modals follow it. A .acc-page .modal-content rule would therefore match
       nothing at all while looking perfectly correct, so the hook goes on the
       modal itself (.acc-modal in the markup).

       Worth remembering generally: anything that renders outside the page
       wrapper - modals, Telerik popups, flyouts - is out of reach of a
       page-scoped rule. Check where it actually sits in the DOM before
       scoping to the wrapper.

       Only .fed-details has modal rules today, so these are the second set in
       the app; the shape is copied from there. */
    html[data-color-theme="dark"] .acc-modal .modal-content {
        color: var(--odie-body-color);
        background: #23262C;
        border-color: #454C56;
    }

        html[data-color-theme="dark"] .acc-modal .modal-header,
        html[data-color-theme="dark"] .acc-modal .modal-footer {
            border-color: #3D444E;
        }

        /* Bootstrap's close button is a dark glyph drawn for a light surface.
           It has no dark rule anywhere in this stylesheet yet, so it would be
           near-invisible on the charcoal header. */
        html[data-color-theme="dark"] .acc-modal .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

/* =========================================================================
   RADCALENDAR "TODAY" RING - global, and deliberately not page-scoped
   -------------------------------------------------------------------------
   master.css rings today's date with .RadCalendar_Bootstrap td.highlight_today.
   That selector names the *skin*, and in dark mode the skin switches to Glow
   (WebsiteTelerikSkin), so the rule stops matching and the ring silently
   disappears. Nothing about it is a colour problem - it is skin-name coupling.

   Global rather than scoped to .acc-page for two reasons: the RadCalendar
   popup is not guaranteed to render inside the page wrapper, and the same
   breakage affects every page using highlight_today - AccountEdit, four
   contracts pages, two helpdesk pages and both knowledgebase editors.

   This cannot leak into light mode: RadCalendar_Glow only exists when the Glow
   skin is active, which only happens in dark mode. The ring colour is the same
   #8AA1B4 master.css uses, which already reads against the dark cell.
   ========================================================================= */

    html[data-color-theme="dark"] .RadCalendar_Glow td.highlight_today {
        border: 1px solid #8AA1B4 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    /* ---- Special day text --------------------------------------------------
       The pale special-day fills in esu10_2026.css apply in both themes - that
       selector is .RadCalendar, not the skin name, so it survives the switch to
       Glow. The text colour it pairs them with does not survive: the light sheet
       declares it on the <td>, but Glow colours the day's own anchor, and an
       anchor's own colour beats a colour inherited from its cell. The number
       therefore stays light and all but disappears on the pale fill.

       Restate the intended colour on the day content itself. These are the same
       values esu10_2026.css uses, so the cells read exactly as they do in light
       mode rather than inventing a second palette.

       Not scoped to a page wrapper: only AbsenceRequestAdd and
       AbsenceRequestEdit emit these classes, so the class name is itself the
       gate, and the calendar is not guaranteed to render inside the wrapper.

       :not(.rcSelected) matters - the light sheet deliberately resets a selected
       special day to inherit, and that behaviour should stay. */
    html[data-color-theme="dark"] .RadCalendar td.special_day_closed:not(.rcSelected),
    html[data-color-theme="dark"] .RadCalendar td.special_day_closed:not(.rcSelected) > * {
        color: #791F1F !important;
    }

    html[data-color-theme="dark"] .RadCalendar td.special_day_mandatory:not(.rcSelected),
    html[data-color-theme="dark"] .RadCalendar td.special_day_mandatory:not(.rcSelected) > * {
        color: #3C3489 !important;
    }

    html[data-color-theme="dark"] .RadCalendar td.special_day_event:not(.rcSelected),
    html[data-color-theme="dark"] .RadCalendar td.special_day_event:not(.rcSelected) > * {
        color: #633806 !important;
    }

    /* The legend under the calendar is #6c757d in the light sheet - Bootstrap's
       muted grey, chosen against white. On the dark card it drops to roughly 4:1
       and reads as washed out. The swatches keep their own fills, which are the
       point of the legend; only the labels move. */
    html[data-color-theme="dark"] .calendar_legend {
        color: var(--odie-muted);
    }

    /* The "Not Selectable" swatch is darkgray in the light sheet, matching the
       DarkGray that DayRender paints onto weekend and out-of-year cells. Both
       AbsenceRequest DayRender handlers now emit #454C56 in dark mode, so the
       swatch has to follow or the key stops describing the calendar. If one
       changes, change the other. */
    html[data-color-theme="dark"] .calendar_legend_swatch_disabled {
        background-color: #454C56;
    }

/* =========================================================================
   TRAVEL REQUEST - Add, Details and Edit
   -------------------------------------------------------------------------
   All three pages add .acc-page plus a page class, and .acc-grid to their
   RadGrids. The rules below are scoped to .acc-page rather than to one page
   because all three carry the same file-attachment grid and the same <style>
   block, copied between them.

   Each of those <style> blocks carried two rules keyed to .RadGrid_Bootstrap. That
   names the skin, and the grid renders Glow in dark mode, so both rules were
   dropped entirely - taking with them not just the upload box styling but the
   ":before" that supplies the "Select your file..." instruction. The page now
   names both skins, which changes nothing in light mode because every light
   tenant renders Bootstrap. The colours those rules carry are light-mode
   values, so they are overridden here rather than in the page - that block is
   served to every tenant and must stay free of dark-theme knowledge.
   ========================================================================= */

    /* The dashed drop zone: #f5f5f5 on #5bc0de in the page's own block. */
    html[data-color-theme="dark"] .acc-page .RadGrid_Glow .RadAsyncUpload {
        background-color: #262A31;
        border-color: #4A8DA6;
    }

    /* The instruction banner is Bootstrap's "info" alert palette - #31708f on
       #d9edf7 with a #bce8f1 border. This is the same relationship rebuilt
       against the dark card. */
    html[data-color-theme="dark"] .acc-page .RadGrid_Glow .ruInputs:before {
        color: #9FD5E8;
        background-color: #1C2C34;
        border-color: #2E4A56;
    }

    /* The grid's insert and cancel links are given these classes by the page's
       own JavaScript. Both pin color:#333 with !important against a surface
       they do not set, so on the dark card they are near-invisible; only
       !important reaches past that. */
    html[data-color-theme="dark"] .acc-page .custom-insert-button,
    html[data-color-theme="dark"] .acc-page .custom-cancel-button {
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .acc-page .custom-insert-button:hover,
        html[data-color-theme="dark"] .acc-page .custom-cancel-button:hover {
            background-color: #333941 !important;
            border-color: var(--odie-border) !important;
            color: #F1F3F5 !important;
        }

/* =========================================================================
   ASSETS - shared
   -------------------------------------------------------------------------
   Every converted Asset page adds .ast-page to its divContents wrapper plus a
   page class (.asset-list), and every RadGrid on those pages adds .ast-grid.
   Page-specific rules live in their own blocks below.

   Same reasoning as the .acc-page block: in dark mode the Telerik skin
   switches to Glow (WebsiteTelerikSkin in common_settings.vb) and Glow's
   bluish slate rows do not match ODIE's neutral #23262C card, so each grid
   needs pulling into the same family. assets/ is 39 pages, so the shared
   wrapper pays for itself the same way .acc-page did.

   AssetList sets every control's Skin from WebsiteTelerikSkin in code-behind,
   so nothing here is fighting a hardcoded Bootstrap skin. Neither the markup
   nor the code-behind hardcodes a colour - the page's own <style> block is
   .break_word_asset_list, which is line-height and word-wrap only.

   A note on grid link colours, because the obvious reasoning is a trap. The
   light sheet declares .rad_grid_item_style a / .rad_grid_alternating_item_style a
   as color: var(--odie-link) !important, and the dark theme redefines
   --odie-link - so on a grid that sets ItemStyle CssClass="rad_grid_item_style",
   anchors in the data rows are already correct and need nothing here. That is
   true of AssetList. It is NOT true of the section: AssetTypeList and all four
   of AssetDetails' grids declare no ItemStyle at all, so their anchors fall
   through to the bare `a` rule at the top of this file and are at the mercy of
   whatever Glow sets. The rules below cover them; on AssetList they compute to
   the same value the light sheet already gives, which is harmless.
   ========================================================================= */

    /* Filter card above the grid. .label and .data carry no colour in the
       light sheet, so these only set what differs. .details_table is
       repainted a flat #23262C by the global rule; transparent keeps it in
       step with the card surface. */
    html[data-color-theme="dark"] .ast-page .details_table,
    html[data-color-theme="dark"] .ast-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .ast-page .label {
            color: #E4E8ED;
        }

    /* ---- Plain <select> ----------------------------------------------------
       Thirteen pages under assets/ use <asp:DropDownList>, which renders a bare
       <select> with no class. Nothing styles that: the light sheet only reaches
       .RadForm_Bootstrap select and .form-select, and this file only had
       select:disabled. So it takes the browser default - white fill, black text -
       which is fine in light mode and a white box on a dark card in this one.

       No page under accounts/ uses <asp:DropDownList>, which is why this did not
       come up in that conversion. */
    html[data-color-theme="dark"] .ast-page select {
        background-color: #181A1F;
        color: var(--odie-body-color);
        border: 1px solid var(--odie-border);
    }

        html[data-color-theme="dark"] .ast-page select:focus {
            border-color: #6db5ff;
            box-shadow: 0 0 0 0.125rem rgba(114, 195, 240, 0.22);
            outline: 0;
        }

        /* Firefox and Chrome render the popup list from the option's own colours
           on some platforms rather than inheriting the select's. */
        html[data-color-theme="dark"] .ast-page select option {
            background-color: #23262C;
            color: var(--odie-body-color);
        }

    /* ---- Grid --------------------------------------------------------------
       Same shape as the .acc-page block, with two additions this page needs
       and the Account pages did not: a filter row (AllowFilteringByColumn is
       on) and a selected-row state (ClientSettings.Selecting.AllowRowSelect is
       turned on for anyone who can use "Edit Selected Assets"). */
    html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        /* AllowSorting is on, so every header is an anchor and would otherwise
           take the link blue against the near-black header fill. */
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        /* EnableRowHoverStyle is set in code-behind, and Telerik implements
           that by adding .rgHoveredRow rather than relying on :hover - so the
           class is the one that actually fires here. :hover is kept for the
           permission branches that turn row hover off, where the rows are
           still ordinary table rows. */
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgAltRow:hover > td,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgHoveredRow > td {
            background: #333941 !important;
        }

        /* Selection is a real feature on this page - it is what "Edit Selected
           Assets" acts on - so it has to read as clearly picked rather than as
           a slightly different grey. A blue-tinted surface separates it from
           the hover shade above.

           The light sheet pins .rad_grid_selected_item_style a to #FFF
           !important, and SelectedItemStyle puts that class on the selected
           row, so links here go white. That is left alone: white on this fill is
           the stronger contrast, and it also marks the row as selected.

           RETUNED 9/21/2026, in step with the identical .hd-page rule - see the
           measurements there.  #2C3E4E sat at 1.23-1.33:1 against the two row
           stripes, which is not a visible state.  #3D6285 is 2.10-2.27:1.

           Three pages in this section actually select rows - AssetAnomaly,
           AssetTypeAdd and AssetTypeEdit - so the change matters here for the
           same reason it does on the Ticket Dashboard.  The .ws-page copy of
           this rule was deliberately left at the old value: no workshops grid
           enables AllowRowSelect, so there it only ever paints the transient
           .rgActiveRow under the cursor, where a subtle lift is what is wanted. */
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgSelectedRow > td,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgActiveRow > td {
            background: #3D6285 !important;
            color: #F1F3F5 !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgSelectedRow > td:first-child {
                border-left: 3px solid var(--odie-link) !important;
            }

        /* Link columns, and the anchors that AssetTypeList builds as strings in
           its code-behind. See the note at the top of this block: only AssetList
           sets ItemStyle CssClass="rad_grid_item_style", so only AssetList gets
           the link colour free from the light sheet. Everything else needs this.

           .rgSelectedRow is excluded rather than overridden - the light sheet
           pins that row's anchors to #FFF, which is what we want on #2C3E4E. */
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

            html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgRow > td a:hover,
            html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgAltRow > td a:hover {
                color: var(--odie-link-hover) !important;
            }

        /* ---- Filter row ----------------------------------------------------
           Six columns filter on this page (inventory number, manufacturer,
           model number, serial number, location, plus the attribute columns
           built at runtime). Glow leaves this row a lighter slate than the
           header, which reads as a stray band across the top of the grid. */
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgFilterRow > td {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgFilterRow input[type="text"],
            html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgFilterBox {
                background: #181A1F !important;
                color: var(--odie-body-color) !important;
                border: 1px solid var(--odie-border) !important;
                box-shadow: none !important;
            }

                html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgFilterRow input[type="text"]::placeholder {
                    color: var(--odie-muted) !important;
                }

        /* A filter that matches nothing is an ordinary outcome here - six
           filter boxes plus the search panel above make it easy to reach. */
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        /* PagerStyle is NextPrevAndNumeric with AlwaysVisible, and
           ShowStatusBar is on, so both are always rendered. The pager also
           carries the PageSizes dropdown. */
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgPager a {
                color: var(--odie-link) !important;
            }

            html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgPager select,
            html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgPager .rgPageSize {
                background: #181A1F !important;
                color: var(--odie-body-color) !important;
                border: 1px solid var(--odie-border) !important;
            }

/* =========================================================================
   ASSET EDIT
   -------------------------------------------------------------------------
   AssetEdit.aspx adds .asset-edit alongside .ast-page.

   Most of this page needed nothing. The file attachments grid is rgFileAttachments,
   the same control ID TicketDetails.aspx uses, so the [id$="rgFileAttachments"]
   block near the top of this file already covers its rows, header, filter row,
   inputs, upload/browse buttons and the JS-applied .custom-insert-button and
   .custom-cancel-button. Every Telerik control on the page takes its skin from
   WebsiteTelerikSkin in SetTelerikSkins(), so nothing is pinned to Bootstrap.

   Three colours were fixed at the source in AssetEdit.aspx.vb rather than
   overridden here, because ForeColor and an inline style='color:red' both write
   an inline attribute no stylesheet can reach: the helpdesk-only attribute
   label, the attribute validators' messages and the file-upload CustomValidator
   now all carry the .error class, which is themed in both directions.

   What is left is the page's own <style> block in cphHead.
   ========================================================================= */

    /* ---- Attribute table ---------------------------------------------------
       The light rule is .attribute_table { background-color: #F3F3F1 } in the
       page's own <style>, marking the runtime-built attribute table out from
       the plain .main_table blocks around it. This rebuilds that relationship
       against the dark card: #23262C card, so a small lift reads the same way
       #F3F3F1 does against white.

       This replaces an unscoped `.attribute_table { background-color: #23262C }`
       that used to sit near the top of this file. Because it named no
       data-color-theme, it also beat the page's own rule in LIGHT mode - the
       dark sheet loads after cphHead, and both selectors are a single class -
       so ESU10 had been painting this table charcoal in the light theme. The
       .main_table half of the selector is only here to outrank the
       `.ast-page .main_table { background: transparent }` rule above, which the
       table also matches. */
    html[data-color-theme="dark"] .ast-page .main_table.attribute_table {
        background-color: #292D34;
    }

    /* ---- File attachments: upload drop area --------------------------------
       The page's <style> now names both .RadGrid_Bootstrap and .RadGrid_Glow,
       matching accounts/TravelRequest*.aspx. Before that it named Bootstrap
       only, so in dark mode - where the skin is Glow - the whole rule stopped
       matching: the drop area lost its padding and dashed border, and the
       :before instruction text below disappeared entirely, because there was no
       other rule supplying its `content`. That was a functional loss in dark
       mode, not just a colour one.

       With both skins named, the rule applies in both themes and only the two
       light colours need overriding. Same values as the .acc-page block. */
    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .RadAsyncUpload {
        background-color: #262A31;
        border-color: #4A8DA6;
    }

    /* The instruction banner is Bootstrap's "info" alert palette - #31708f on
       #d9edf7 with a #bce8f1 border. This is the same relationship rebuilt
       against the dark card. */
    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .ruInputs:before {
        color: #9FD5E8;
        background-color: #1C2C34;
        border-color: #2E4A56;
    }

/* =========================================================================
   ASSET DETAILS
   -------------------------------------------------------------------------
   AssetDetails.aspx adds .asset-details alongside .ast-page, and .ast-grid to
   four of its five RadGrids. The fifth is rgFileAttachments, which is already
   covered by the [id$="rgFileAttachments"] block near the top of this file -
   the same control ID TicketDetails.aspx uses.

   The page's root problem was not colour. Ten Telerik controls carried a
   hardcoded Skin="Bootstrap" in the markup, so the skin never switched to Glow
   and five grids rendered the full light skin on a dark card. Those are now
   set from WebsiteTelerikSkin in SetTelerikSkins(), matching AssetList and
   AssetEdit. That is a no-op in light mode, where WebsiteTelerikSkin returns
   Bootstrap.
   ========================================================================= */

    /* ---- Collapsible card headers ------------------------------------------
       Six cards collapse, and each header's chevron carries an inline
       color: #666 - dim to the point of nearly vanishing against the dark
       header. Every one of them also carries data-collapse-toggle, so that
       attribute is the hook rather than matching on the colour itself. */
    html[data-color-theme="dark"] .ast-page [data-collapse-toggle] {
        color: var(--odie-muted) !important;
    }

    /* ---- Stored HTML -------------------------------------------------------
       .ast-stored-html marks the two controls that render HTML straight out of
       the database: lblComments (a saved RadEditor body) and lblAssetHistory
       (HistoryDetails rows joined with <hr />). StripDarkThemeInlineStyles is
       already wired into every save site under assets/, but that only protects
       content written from now on - anything pasted in years ago still carries
       inline colours, and no ordinary rule reaches past an inline style.

       Same two carve-outs as .memo_data and .acc-stored-html: leave an element
       alone if it also declares a background of its own, and let links keep a
       link colour. */
    html[data-color-theme="dark"] .ast-page .ast-stored-html {
        color: var(--odie-body-color);
    }

        /* The transparent-background variants are not redundant: Word and Google
           Docs emit "background-color: transparent; color: #222222" on nearly
           every element, and the plain carve-out above treats that as a
           deliberate fill and leaves the whole paste dark.  See the fuller note
           in the Memo bodies block near the top of this file. */
        html[data-color-theme="dark"] .ast-page .ast-stored-html [style*="color:" i]:not([style*="background" i]):not(a),
        html[data-color-theme="dark"] .ast-page .ast-stored-html [style*="color:" i][style*="background-color: transparent" i]:not(a),
        html[data-color-theme="dark"] .ast-page .ast-stored-html [style*="color:" i][style*="background-color:transparent" i]:not(a) {
            color: inherit !important;
        }

        html[data-color-theme="dark"] .ast-page .ast-stored-html font[color] {
            color: inherit !important;
        }

        html[data-color-theme="dark"] .ast-page .ast-stored-html a {
            color: var(--odie-link) !important;
        }

    /* ---- Status text -------------------------------------------------------
       Two named colours reach this page. The disposal-authorisation line is
       built in AssetDetails.aspx.vb as a span with an inline color:Green
       wrapping an a.data-link-green, and the helpdesk-only attribute labels and
       file-upload validator used to be ForeColor = Red.

       The Green rule is scoped to .ast-page rather than .asset-details because
       AssetDisposal.aspx.vb emits the same authorisation span - without the
       anchor, so it needs the span rule but not the data-link-green one.

       The two reds were fixed at the source - both now carry .error, which is
       themed in both directions - because ForeColor writes an inline attribute
       no stylesheet can reach. The green is overridden here instead: there is
       no house class for a green status the way .error exists for red, and
       inventing one would mean adding it to themes/master_css/master.css, which
       all twelve tenants load. Same colour the delivery and accounts blocks use,
       so the modules stay consistent. */
    html[data-color-theme="dark"] .ast-page [style*="color:Green" i] {
        color: #7BD88F !important;
    }

    /* master.css pins a.data-link-green to `color: green !important` for every
       tenant, so the link inside that span needs its own rule - the span rule
       above cannot reach past an !important on the anchor itself. */
    html[data-color-theme="dark"] .ast-page a.data-link-green,
    html[data-color-theme="dark"] .ast-page a.data-link-green:link,
    html[data-color-theme="dark"] .ast-page a.data-link-green:visited,
    html[data-color-theme="dark"] .ast-page a.data-link-green:active {
        color: #7BD88F !important;
    }

        html[data-color-theme="dark"] .ast-page a.data-link-green:hover {
            color: #A5E8B4 !important;
        }

    /* ---- Grid command rows and edit forms ----------------------------------
       Four of the grids set CommandItemDisplay="Top", which the shared
       .ast-page block does not cover because AssetList has no command row.
       Two of them put a "Create a New ... Ticket" LinkButton in a
       CommandItemTemplate, so the row carries a link as well as a surface. */
    html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgCommandRow,
    html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow .rgCommandRow td,
    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .rgCommandRow,
    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .rgCommandRow td {
        background: #1C2027 !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .ast-page .RadGrid_Glow .rgCommandRow a {
            color: var(--odie-link) !important;
        }

    /* The insert/edit form sits inside the attachments and software grids. */
    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .rgEditForm,
    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .rgEditForm > td,
    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .rgEditRow > td {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border-light) !important;
    }

    /* ---- File attachments: upload drop area --------------------------------
       The page's <style> now names both skins, same change as AssetEdit. Before
       that it named Bootstrap only, which mattered here the moment the grid
       stopped being pinned to Bootstrap above: the drop area would have lost its
       padding and dashed border, and the :before instruction text would have
       disappeared entirely, since nothing else supplies its `content`. */
    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .RadAsyncUpload {
        background-color: #262A31;
        border-color: #4A8DA6;
    }

    html[data-color-theme="dark"] .ast-page .RadGrid_Glow .ruInputs:before {
        color: #9FD5E8;
        background-color: #1C2C34;
        border-color: #2E4A56;
    }

    /* ---- phpIPAM panel -----------------------------------------------------
       UpdateNetworks() in the page's RadCodeBlock builds this panel client-side
       and gives its heading `class='rgHeader rad_grid_header_style'` - Telerik's
       own header class, but on a plain div outside any grid, so none of the
       grid rules above reach it. Grepping the markup for a colour finds nothing;
       the element only exists as a template literal in JavaScript.

       The links it builds carry .data-link, which the light sheet already
       resolves through var(--odie-link), so they need no rule here. */
    html[data-color-theme="dark"] .ast-page .rgHeader.rad_grid_header_style {
        background: #1C2027 !important;
        color: #DCE3EA !important;
        border-color: var(--odie-border) !important;
    }

/* =========================================================================
   ASSET ADD
   -------------------------------------------------------------------------
   AssetAdd.aspx adds .asset-add alongside .ast-page. It is AssetEdit's twin,
   so most of it is already covered: the attachments grid is rgFileAttachments
   again, SetTelerikSkins() was already reading WebsiteTelerikSkin, and the
   page's <style> now names both skins for the upload rules.

   Two things differ from AssetEdit.

   First, tblAttribute carried the tint as an inline
   Style="background-color: #F3F3F1;" rather than AssetEdit's .attribute_table
   class - the same element reached two different ways on sibling pages, and
   the inline one is unreachable from a stylesheet. It now uses the class, with
   the light rule added to this page's own <style> so light mode is unchanged,
   and the .attribute_table rule in the ASSET EDIT block above covers it.
   AssetBatchEdit carried the same inline style and was converted the same way,
   so that one rule now serves all three pages and none of them needs a block
   of its own for it.

   Second, the colour-picker attribute type, which only exists here.
   ========================================================================= */

    /* ---- Colour picker hex chip --------------------------------------------
       DisplayAttributes() builds a .color-hex-display label beside every
       "Color Picker" attribute, showing the chosen hex. The page's <style>
       gives it #f5f5f5 on a #ddd border - a light chip that would sit on the
       dark attribute table.

       Deliberately left alone: the <input type="color"> swatch next to it. That
       is a native browser control whose fill is the attribute's own stored
       colour, which is the data, not chrome - repainting it would be wrong in
       either theme. */
    html[data-color-theme="dark"] .ast-page .color-hex-display {
        background-color: #1F2228;
        border-color: var(--odie-border);
        color: var(--odie-body-color);
    }

/* =========================================================================
   ASSET TYPE EDIT / ASSET TYPE ADD
   -------------------------------------------------------------------------
   Both pages add .ast-page plus a page class, and .ast-grid to grdAttributes.
   Everything else they need is in the shared block: the attribute grid has no
   ItemStyle, so it depends on the link rules there, and it turns on
   AllowRowSelect and AllowRowsDragDrop, so it depends on .rgSelectedRow too.

   The one thing neither gets from the shared block is their loading panel.
   ========================================================================= */

    /* ---- AttributeLoadingPanel ---------------------------------------------
       Unlike the ralp* panels on the list pages, this one is not skinned and
       does not use RenderMode="Lightweight". It carries its own content: a
       hardcoded spinner pulled from the Telerik "Default" skin by
       RadAjaxLoadingPanel.GetWebResourceUrl. So it ignores WebsiteTelerikSkin
       entirely and stays a light-theme control in both themes - a near-opaque
       white 75px box over the dark card while the Attribute Pool postback runs.

       Scoped by id suffix rather than by .ast-page because that is the
       convention this file already uses for a control shared across pages -
       see the [id$="rgFileAttachments"] block near the top. AssetTypeAdd
       declares the same panel with the same id.

       The same hardcoded gif is on four more pages outside assets/ -
       admin/EventLogList, delivery/DeliveryCoordination, assets/SoftwareDetails
       and assets/SoftwareEdit - each with its own panel id, so they will need
       the same treatment as they are converted. */
    html[data-color-theme="dark"] [id$="AttributeLoadingPanel"] {
        background-color: #23262C !important;
        border: 1px solid var(--odie-border) !important;
        border-radius: 0.375rem;
    }

        /* The Default skin's spinner is dark on transparent, which disappears
           against the panel above. Inverting keeps one image working for both
           themes without guessing at a Glow web-resource name. */
        html[data-color-theme="dark"] [id$="AttributeLoadingPanel"] img {
            filter: invert(1);
        }

/* =========================================================================
   PRINT INVENTORY TAGS
   -------------------------------------------------------------------------
   PrintInventoryTags.aspx adds .print-inventory-tags alongside .ast-page.
   This is the setup page rather than the printed output - pick a label format
   and, for Avery sheets, which position on the sheet to start at.

   That position picker is a 10x3 grid of radio buttons drawn as an asp:Table
   with GridLines="Both" BorderColor="black".  Black lines on the dark card are
   effectively invisible, and the grid is the entire point of the control - it
   is how you tell the page which labels have already been peeled off.

   BorderColor renders as an inline style, which no ordinary rule can reach, so
   the table carries a CssClass purely as a hook and this recolours it with
   !important.  The class has no light-mode definition anywhere, so light mode
   keeps the black lines it has always had.
   ========================================================================= */

    html[data-color-theme="dark"] .ast-page .tag-position-grid,
    html[data-color-theme="dark"] .ast-page .tag-position-grid td {
        border-color: var(--odie-border) !important;
    }

/* =========================================================================
   ASSET ANOMALY
   -------------------------------------------------------------------------
   AssetAnomaly.aspx adds .asset-anomaly alongside .ast-page, and .ast-grid to
   its search results grid.  Every Telerik control on the page already takes
   its skin from SetTelerikSkins(), and the three step banners go through
   NoticeMessage, which is Bootstrap's alert palette and the same in both
   themes.

   The two muted spans that describe the selected asset were inline
   color:#6c757d built in the code-behind; they carry .text-muted now, which
   Bootstrap defines as that same #6c757d and this file already themes.

   What is left is .asset-card, from the page's own <style> block in cphHead.
   ========================================================================= */

    /* ---- Selected asset card -----------------------------------------------
       The page's <style> gives this #f8f9fa on a 2px #dee2e6 border - Bootstrap's
       "light" surface, a white-ish panel that would sit inside the dark card
       holding it.  It marks out the asset you picked in step 1 while you work
       through steps 2 and 3, so it needs to stay visually distinct from the
       card around it rather than just disappear into it. */
    html[data-color-theme="dark"] .ast-page .asset-card {
        background: #2A2F36;
        border-color: var(--odie-border);
    }

        /* The heading is #495057 in the light sheet, near-black on that surface. */
        html[data-color-theme="dark"] .ast-page .asset-card h5 {
            color: #E4E8ED;
        }

/* =========================================================================
   ASSET MERGE
   -------------------------------------------------------------------------
   AssetMerge.aspx adds .asset-merge alongside .ast-page, and
   .asset-merge-compare to the side-by-side comparison table.

   Both AssetComboBox controls are left alone: that user control defaults its
   own skin to WebsiteTelerikSkin and persists it through ViewState, so it does
   not need the page to set it.  rcbBillableEntity is skinned in code-behind,
   and every button already uses btn btn-light submit_button.
   ========================================================================= */

    /* ---- Comparison table banding ------------------------------------------
       The comparison table zebra-stripes its rows with BackColor - #F5F5F5 on
       the header row and #F9F9F9 on every other row after it, set both in the
       markup (ten rows) and in GetAttributes() in the code-behind, which bands
       the runtime attribute rows the same way.

       Unlike the delivery pages' white-on-white rows, these are doing real work
       in light mode: the table is .main_table, which has no background of its
       own, so the stripes read against the white card.  The banding is what
       lets you track a row across two columns of radio buttons, which is the
       entire job of this screen - so it is rebuilt here rather than dropped.

       Matching on the colour value does not work here: depending on the app's
       controlRenderingCompatibilityVersion, BackColor comes out either as an
       inline style or as a bgcolor attribute, and a first attempt keyed to
       "background-color:#F9F9F9" matched neither.  So these key on the row
       having a background at all, by either mechanism, and tell the header row
       apart by position rather than by shade.  !important covers the inline
       case; the bgcolor case would not need it. */
    html[data-color-theme="dark"] .ast-page .asset-merge-compare tr[bgcolor],
    html[data-color-theme="dark"] .ast-page .asset-merge-compare tr[style*="background" i] {
        background-color: #2A2F36 !important;
    }

        /* The first row is the "First Asset / Second Asset" header. */
        html[data-color-theme="dark"] .ast-page .asset-merge-compare tr:first-child[bgcolor],
        html[data-color-theme="dark"] .ast-page .asset-merge-compare tr:first-child[style*="background" i] {
            background-color: #1C2027 !important;
        }

/* =========================================================================
   ASSET IMPORT
   -------------------------------------------------------------------------
   AssetImport.aspx adds .asset-import alongside .ast-page, and .ast-grid to
   its preview grid.  All six Telerik controls are skinned in code-behind and
   every button already uses btn btn-light submit_button.

   This page carries more hardcoded light colour than anything else in the
   section: a <style> block in cphHead and a results panel assembled as a
   string in the code-behind.  Four inline colours in that string were moved
   onto classes rather than overridden - .stat-number-warning,
   .import-result-panel and .import-skipped-panel now hold those values in the
   page's own <style>, and the muted inventory number uses Bootstrap's
   .text-muted, which is the same #6c757d it hardcoded.  Light mode is
   unchanged; the dark theme now has something it can reach.
   ========================================================================= */

    /* ---- Preview grid row banding ------------------------------------------
       rgImporting_ItemDataBound puts .error-row or .success-row on every data
       row, and the page's <style> paints them #fff3cd and #d4edda with
       !important.  The STEP 3 notice tells the user rows with errors are
       highlighted in yellow, so this banding is the point of the preview.

       These have to outrank the shared `.ast-grid.RadGrid_Glow .rgRow > td`
       rule, which would otherwise paint straight over them.  Naming the row
       class and the cell does that, and deliberately does not depend on .rgRow
       surviving - ItemDataBound assigns CssClass outright rather than
       appending, so whether Telerik puts rgRow back is its own business.

       SHARED WITH SPED BILLING UTILITY, 9/19/2026.  contracts/SpedBillingUtility
       is a near-clone of this page - same <style> block, same rgImporting grid,
       same row classes assigned from ItemDataBound - so the .ct-page selectors
       below carry these rules across rather than duplicating the block.  It adds
       one state assets does not have, .skip-row, which is handled at the end. */
    html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow tr.error-row > td,
    html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow tr.error-row > td {
        background-color: #3A3222 !important;
        color: #F0DCA8 !important;
    }

    html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow tr.success-row > td,
    html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow tr.success-row > td {
        background-color: #1F3326 !important;
        color: #B7E0C2 !important;
    }

    /* Sped Billing Utility only.  A skipped row is neither a failure nor a
       success - the light value is #6c757d on #e2e3e5, the neutral grey chip
       palette - so it takes the grey family rather than amber. */
    html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow tr.skip-row > td {
        background-color: #2B2F35 !important;
        color: var(--sev-grey-text) !important;
    }

        /* The asset name column is the only link in the preview. */
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow tr.error-row > td a,
        html[data-color-theme="dark"] .ast-page .ast-grid.RadGrid_Glow tr.success-row > td a,
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow tr.error-row > td a,
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow tr.success-row > td a,
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow tr.skip-row > td a {
            color: var(--odie-link) !important;
        }

    /* ---- Paste box ---------------------------------------------------------
       A 300px monospace textarea with a 2px #ddd border - the border is the
       only colour on it. */
    html[data-color-theme="dark"] .ct-page .import-textarea,
    html[data-color-theme="dark"] .ast-page .import-textarea {
        border-color: var(--odie-border);
    }

    /* ---- Results panel -----------------------------------------------------
       .import-stats is `background: white` in the page's <style> - the one
       outright white surface left in this section. */
    html[data-color-theme="dark"] .ct-page .import-stats,
    html[data-color-theme="dark"] .ast-page .import-stats {
        background: #23262C;
        border-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .ct-page .import-stats h4,
        html[data-color-theme="dark"] .ast-page .import-stats h4 {
            color: #F1F3F5;
        }

    /* The big count is #28a745 and the skipped count #ffc107 - both Bootstrap
       solids that go muddy on charcoal, so these are the lighter members of the
       same families. */
    html[data-color-theme="dark"] .ct-page .stat-number,
    html[data-color-theme="dark"] .ast-page .stat-number {
        color: #7BD88F;
    }

    html[data-color-theme="dark"] .ast-page .stat-number-warning {
        color: #F0C674;
    }

    html[data-color-theme="dark"] .ct-page .stat-label,
    html[data-color-theme="dark"] .ast-page .stat-label {
        color: var(--odie-muted);
    }

    /* ---- The two lists under the counts ------------------------------------
       Same relationship as the panels they replace: a slightly raised neutral
       for the imported list, an amber wash for the skipped one. */
    html[data-color-theme="dark"] .ast-page .import-result-panel {
        background: #2A2F36;
    }

    html[data-color-theme="dark"] .ast-page .import-skipped-panel {
        background: #3A3222;
        color: #F0DCA8;
    }

/* =========================================================================
   HELPDESK - shared
   -------------------------------------------------------------------------
   Every converted Helpdesk page adds .hd-page to its divContents wrapper plus
   a page class (.ticket-dashboard, .ticket-details), and every RadGrid on
   those pages adds .hd-grid.  Page-specific rules live in their own blocks
   below.

   Same reasoning as the .acc-page and .ast-page blocks: in dark mode the
   Telerik skin switches to Glow (WebsiteTelerikSkin in common_settings.vb) and
   Glow's bluish slate rows do not match ODIE's neutral #23262C card, so each
   grid needs pulling into the same family.  helpdesk/ is 48 pages, so the
   shared wrapper pays for itself the way the other two did.

   Two things this section already had before any of it was converted: the
   [id$="rgFileAttachments"] block near the top of this file was written for
   TicketDetails, and the .memo_data stored-HTML neutraliser above it is a
   helpdesk control.  Neither is wrapper-scoped, so both keep working as pages
   here gain .hd-page.

   Grid link colours ARE included, unlike the first draft of the assets block.
   The light sheet gives .rad_grid_item_style a its colour through
   var(--odie-link), so on a grid that sets that ItemStyle these compute to the
   same value and are harmless - but plenty of grids in this section set no
   ItemStyle at all, and those need the rule.  Covering both is cheaper than
   auditing each grid.
   ========================================================================= */

    /* Filter cards above the grids. .label and .data carry no colour in the
       light sheet, so these only set what differs. */
    html[data-color-theme="dark"] .hd-page .details_table,
    html[data-color-theme="dark"] .hd-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .hd-page .label {
            color: #E4E8ED;
        }

    /* ---- Plain <select> ----------------------------------------------------
       Dashboard, QueueDefault and SolutionManage use <asp:DropDownList>, which
       renders a bare <select> with no class.  Nothing styles that: the light
       sheet only reaches .RadForm_Bootstrap select and .form-select.  So it
       takes the browser default - white fill, black text - which is a white box
       on a dark card.  Same rule the assets block carries. */
    html[data-color-theme="dark"] .hd-page select {
        background-color: #181A1F;
        color: var(--odie-body-color);
        border: 1px solid var(--odie-border);
    }

        html[data-color-theme="dark"] .hd-page select:focus {
            border-color: #6db5ff;
            box-shadow: 0 0 0 0.125rem rgba(114, 195, 240, 0.22);
            outline: 0;
        }

        html[data-color-theme="dark"] .hd-page select option {
            background-color: #23262C;
            color: var(--odie-body-color);
        }

    /* ---- Grid --------------------------------------------------------------
       Same shape as the .ast-page block. */
    html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        /* AllowSorting is on nearly everywhere here, so most headers are
           anchors and would otherwise take the link blue. */
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        /* EnableRowHoverStyle adds .rgHoveredRow rather than relying on :hover,
           so the class is what actually fires where it is turned on.  :hover is
           kept for the grids that leave it off. */
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgAltRow:hover > td,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgHoveredRow > td {
            background: #333941 !important;
        }

        /* Row selection is a real feature on the dashboard - the toolbar's
           Select All / Select Closed / Delete Selected act on it - so it has to
           read as clearly picked rather than as a slightly different grey.

           The light sheet pins .rad_grid_selected_item_style a to #FFF
           !important and SelectedItemStyle puts that class on the row, so links
           here go white.  That is left alone: white on this fill is the stronger
           contrast and it also marks the row as selected.

           RETUNED 9/21/2026.  This was #2C3E4E, which measured 1.33:1 against
           the .rgRow stripe (#262A31) and 1.23:1 against .rgAltRow (#2A2F36) -
           far too close to read as a state at all, and the reason selected rows
           were hard to pick out.  Light mode never had the problem because the
           Bootstrap skin paints its own solid selection.

           #3D6285 measures 2.27:1 and 2.10:1 against the two stripes, which is a
           step you can see down a long grid, and 5.8:1 against the #F1F3F5 text
           so the row stays comfortable to read.  It is a lift in brightness
           rather than only in hue - the old value differed from the stripes
           almost entirely in the blue channel, which is the weakest of the three
           for perceived lightness. */
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgSelectedRow > td,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgActiveRow > td {
            background: #3D6285 !important;
            color: #F1F3F5 !important;
            border-color: var(--odie-border) !important;
        }

            /* A left edge on the first cell, so a selected row is identifiable
               from its start rather than only by comparing fills - which is what
               you end up doing when several rows are selected at once. */
            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgSelectedRow > td:first-child {
                border-left: 3px solid var(--odie-link) !important;
            }

        /* Most columns on the ticket grids are link columns. */
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgRow > td a:hover,
            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgAltRow > td a:hover {
                color: var(--odie-link-hover) !important;
            }

        /* Column filtering is on for HelpdeskDashboard and SmsList. */
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgFilterRow > td {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgFilterRow input[type="text"],
            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgFilterBox {
                background: #181A1F !important;
                color: var(--odie-body-color) !important;
                border: 1px solid var(--odie-border) !important;
                box-shadow: none !important;
            }

        /* CommandItemDisplay is used by PowerschoolPluginRegistrations,
           PowerschoolTaskRoles and TicketDetails. */
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgCommandRow,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgCommandRow td {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgCommandRow a {
                color: var(--odie-link) !important;
            }

        /* An empty ticket grid is an ordinary outcome - a queue with nothing in
           it, a dashboard filter that matches nothing. */
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgPager a {
                color: var(--odie-link) !important;
            }

            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgPager select,
            html[data-color-theme="dark"] .hd-page .hd-grid.RadGrid_Glow .rgPager .rgPageSize {
                background: #181A1F !important;
                color: var(--odie-body-color) !important;
                border: 1px solid var(--odie-border) !important;
            }

/* =========================================================================
   TICKET DASHBOARD
   -------------------------------------------------------------------------
   Dashboard.aspx adds .ticket-dashboard alongside .hd-page and .hd-grid to
   both of its grids - the reminders grid at the top and the ticket list below
   the toolbar.

   Nothing else on this page needed a rule.  All four Telerik controls,
   including the RadToolBar, take their skin from WebsiteTelerikSkin in the
   code-behind, and there is not a single colour in Dashboard.aspx.vb.

   The page's own style block is entirely commented out - the
   rad_grid_*_style_dashboard and dashboard_grid rules in it are all dead.
   The live .dashboard_grid in esu10_2026.css is cursor:pointer only, so the
   toolbar buttons carry no colour of their own either.

   The snooze dropdown in the reminders grid is an <asp:DropDownList> inside a
   GridTemplateColumn; it is covered by the plain-select rule in the shared
   block above rather than being converted, since it is repeated per row and
   reached through the grid's item events.
   ========================================================================= */

/* =========================================================================
   TICKET DETAILS
   -------------------------------------------------------------------------
   TicketDetails.aspx adds .ticket-details alongside .hd-page, and .hd-grid to
   rgTasks only.  The other two grids on the page are deliberately left out:

     rgFileAttachments is already covered by the [id$="rgFileAttachments"]
     block near the top of this file - that block was written for this page,
     and it reaches the grid, its rows, its upload controls and the JS-applied
     .custom-insert-button / .custom-cancel-button by id suffix.

     rgHistory already has its own dark treatment, built as a <style> block in
     the code-behind and pushed through litMemoBackgroundColor.  It branches on
     CurrentUser.MasterPage = "esu10_dark_2026" and paints
     .ticket_details_memo_history #181A1F in dark and #cfd9ea in light.  Giving
     it .hd-grid would put the shared row rules above that runtime style on
     specificity and quietly undo it, so it does not get the class.

   The memo bodies carry .memo_data, whose stored-HTML neutraliser is already
   near the top of this file - also a helpdesk control that predates this pass.
   ========================================================================= */

    /* ---- File attachments: upload drop area --------------------------------
       The page's <style> now names both .RadGrid_Bootstrap and .RadGrid_Glow.
       Before that it named Bootstrap only, so in dark mode - where the skin is
       Glow - the whole rule stopped matching: the drop area lost its padding
       and dashed border, and the :before instruction text disappeared
       entirely, because nothing else supplies its `content`.  That was a
       functional loss in dark mode, not just a colour one.

       Same two overrides as the .acc-page and .ast-page blocks. */
    html[data-color-theme="dark"] .hd-page .RadGrid_Glow .RadAsyncUpload {
        background-color: #262A31;
        border-color: #4A8DA6;
    }

    /* The instruction banner is Bootstrap's "info" alert palette - #31708f on
       #d9edf7 with a #bce8f1 border.  This is the same relationship rebuilt
       against the dark card. */
    html[data-color-theme="dark"] .hd-page .RadGrid_Glow .ruInputs:before {
        color: #9FD5E8;
        background-color: #1C2C34;
        border-color: #2E4A56;
    }


/* =========================================================================
   QUEUE LIST
   -------------------------------------------------------------------------
   QueueList.aspx adds .queue-list alongside .hd-page, and .hd-grid to both
   rgQueueList and the rgQueueListDetails grid inside its NestedViewTemplate.

   That detail grid carried Skin="Silk" in the markup, which is why it stayed
   light while the page around it went dark.  It now takes WebsiteTelerikSkin
   like everything else on the page - but it sits in a templated naming
   container, so there is no page-level field for it and the assignment is a
   FindControl in rgQueueList_ItemCreated rather than a line in Page_Load.

   The detail grid is a descendant of the master grid, so the shared .hd-grid
   rules above would reach its rows even with no class of its own.  It gets
   one anyway, so the intent survives anyone rescoping those rules later.

   This is the first nested-view grid in the dark pass.  contracts/BillingRun
   and BillingRunDetails are the only other two in the app and neither has
   been converted yet - whatever lands here is the pattern they will follow.
   ========================================================================= */

    /* ---- The row that holds the nested view --------------------------------
       The shared block paints .rgRow and .rgAltRow but says nothing about the
       row RadGrid inserts to carry the NestedViewTemplate, so that cell keeps
       Glow's own fill and reads as a pale band sitting between two dark rows.

       It is set darker than either data row rather than matching them.
       Skin="Silk" used to be what marked the detail grid out as a different
       surface; recessing its container keeps that reading now that both grids
       share a skin.  #181A1F is the same well this sheet already draws input
       fills from, so the page ends up with one ladder - recess #181A1F, detail
       header #1C2027 from the shared rule, detail rows #262A31 / #2A2F36. */
    html[data-color-theme="dark"] .queue-list .hd-grid.RadGrid_Glow .rgNestedRow,
    html[data-color-theme="dark"] .queue-list .hd-grid.RadGrid_Glow .rgNestedRow > td {
        background: #181A1F !important;
        border-color: var(--odie-border) !important;
    }

    /* ---- The detail grid itself --------------------------------------------
       Its own chrome has to go transparent against that recess, otherwise the
       shared .hd-grid rule paints it #23262C and drops a card-coloured slab
       inside the recess we just made.  Rows and header are left to the shared
       rules, which is what lifts the three columns off the backing.

       Specificity: the shared rule is (0,4,1) and both are !important, so the
       extra .rgNestedRow here is what carries it. */
    html[data-color-theme="dark"] .queue-list .rgNestedRow .hd-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .queue-list .rgNestedRow .hd-grid.RadGrid_Glow .rgMasterTable {
        background: transparent !important;
        border-color: transparent !important;
    }


/* =========================================================================
   Telerik RadListBox - shared
   -------------------------------------------------------------------------
   Deliberately NOT scoped to a page wrapper.  RadListBox shows up in four
   sections - helpdesk/QueueEdit and ProblemTypeManage, accounts/
   AbsenceRequestSettings and VehicleRequestSettings, and districtprofile/
   DistrictProfileList - and scoping it to .hd-page would mean writing it
   again for .acc-page and whatever districtprofile ends up with.  Same call
   the [id$="rgFileAttachments"] and .memo_data blocks near the top of this
   file made for the same reason.  QueueEdit is just the first page in the
   pass that has one.

   Every one of those pages already sets Skin from WebsiteTelerikSkin, so the
   control is on Glow in dark mode and .RadListBox_Glow is a safe hook.

   Worth being clear about what this is and is not: Glow's list box is
   ALREADY dark - #35434b well, #e2e8eb text, #1c2327 border, and a dark
   gradient on the transfer buttons.  Nothing here is a rescue.  It is the
   same job the .acc-page / .ast-page / .hd-page grid blocks do: Glow's
   bluish slate is a different family from ODIE's neutral greys, so the
   control gets pulled into line with everything around it.

   master.css only gives .rad_list_box_250px / .rad_list_box_table widths and
   padding - no colour at all - so Glow is the only thing these override.

   Values below were read out of the shipped skin rather than guessed:
   Telerik.Web.UI.Skins.dll -> Telerik.Web.UI.Skins.Glow.ListBox.Glow.css.
   ========================================================================= */

    /* ---- The list well -----------------------------------------------------
       A list box is a form input, so it takes the same recessed fill the
       shared .hd-page select rule uses rather than a card colour.  That is
       var(--odie-body-bg), which is the same #181A1F written out there. */
    html[data-color-theme="dark"] .RadListBox_Glow .rlbGroup,
    html[data-color-theme="dark"] .RadListBox_Glow .rlbTemplateContainer {
        background-color: var(--odie-body-bg);
        color: var(--odie-body-color);
        border-color: var(--odie-border);
    }

    /* Glow hovers on #4d5c65, which is the same slate as the well it sits in
       lightened a little.  Against #181A1F that reads as almost nothing, so
       this uses the grid hover value instead and the two feel the same. */
    html[data-color-theme="dark"] .RadListBox_Glow .rlbItem.rlbHovered,
    html[data-color-theme="dark"] .RadListBox_Glow .rlbHighlight {
        background-color: #333941;
        color: #F1F3F5;
    }

    /* .rlbItem.rlbSelected and .rlbActive are left exactly as Glow ships them
       - #000 on #ffa915.  That is the same amber the RadTabStrip and the
       toggle buttons use, it is the strongest "this one is picked" signal on
       the page, and these list boxes are entirely about what is picked.
       Changing it here would put the section out of step with itself. */

    /* Multi-line empty messages carry real warnings on QueueEdit, so Telerik's
       #999 gets lifted to the muted token.  Still clearly secondary, but it
       holds up against the darker well. */
    html[data-color-theme="dark"] .RadListBox_Glow .rlbEmptyMessage {
        color: var(--odie-muted);
    }

    /* ---- Transfer / reorder buttons ----------------------------------------
       Glow paints these with a #30414b -> #1c262c gradient on a #35434b
       border.  background-image has to go to none or the gradient sits on top
       of whatever background-color is set here. */
    html[data-color-theme="dark"] .RadListBox_Glow .rlbButton {
        background-color: #262A31;
        background-image: none;
        border-color: var(--odie-border);
        color: var(--odie-body-color);
    }

        /* Glow's hover is its amber gradient and it stays.  It has to be
           restated rather than left alone: the rule above is (0,3,1) against
           Glow's (0,3,0), so without this the `background-image: none` would
           win on hover too and the button would lose its fill.  These are
           Glow's own values copied out of the skin, not new ones. */
        html[data-color-theme="dark"] .RadListBox_Glow .rlbButton:hover {
            background-color: #cd8100;
            background-image: linear-gradient(#ffa201, #cd8100);
            border-color: #cd8100;
            color: #733700;
        }

/* =========================================================================
   QUEUE EDIT
   -------------------------------------------------------------------------
   QueueEdit.aspx puts .hd-page and .queue-edit on divContents, which already
   carried .card - the wrapper and the card are the same element here, unlike
   most pages in this section.

   No page-scoped rules.  Everything on it is already covered: .main_table and
   .label by the shared helpdesk block, the six RadListBoxes by the block
   above, .error and the required asterisk by the global validation rules near
   the top of the file, and divQueueError by Bootstrap - ErrorMessage() in
   common_utilities.vb emits `alert bg-danger text-white`, which needs nothing.

   The page's own <style> block is left alone on purpose.  It sets padding on
   .rlbEmptyMessage and a margin on .rad_list_box_table, both keyed to the
   skin-independent base classes rather than to .RadListBox_Bootstrap, so it
   does not have the skin-name coupling problem that bit the file attachment
   rules on TicketDetails.
   ========================================================================= */


/* =========================================================================
   SOLUTION DETAILS
   -------------------------------------------------------------------------
   SolutionDetails.aspx adds .solution-details alongside .hd-page, and
   .hd-stored-html to divProblemDescription and divSolutionDescription.

   There is no grid on this page, so no .hd-grid.  The details_table, the
   .data-link anchors and the "(Inactive)" .error span are all already
   covered - .data-att is weight and size only in the light sheet, no colour.
   ========================================================================= */

    /* ---- Stored HTML -------------------------------------------------------
       .hd-stored-html is the helpdesk counterpart to .acc-stored-html and
       .ast-stored-html, and it is scoped to .hd-page rather than to this page
       so the rest of the section can use it.  Solutions are not the only
       RadEditor bodies under helpdesk/ that get written into a div with
       InnerHtml.

       It is NOT the same thing as .memo_data higher up this file.  That class
       is on ticket memos and predates the dark pass; this one is for editor
       content.  Both do the same job, but the markup they sit on is different
       and the memo rules do not reach here.

       SolutionManage already runs StripDarkThemeInlineStyles over both editors
       on both the add and the update path, so anything saved from now on is
       clean.  That does nothing for solutions written years ago, and an inline
       style is unreachable from an ordinary rule - which is the whole reason
       these neutraliser classes exist.

       Same two carve-outs as the other two: leave an element alone if it also
       declares a background of its own, and let links keep a link colour. */
    html[data-color-theme="dark"] .hd-page .hd-stored-html {
        color: var(--odie-body-color);
    }

        /* The transparent-background variants are not redundant: Word and Google
           Docs emit "background-color: transparent; color: #222222" on nearly
           every element, and the plain carve-out above treats that as a
           deliberate fill and leaves the whole paste dark.  See the fuller note
           in the Memo bodies block near the top of this file. */
        html[data-color-theme="dark"] .hd-page .hd-stored-html [style*="color:" i]:not([style*="background" i]):not(a),
        html[data-color-theme="dark"] .hd-page .hd-stored-html [style*="color:" i][style*="background-color: transparent" i]:not(a),
        html[data-color-theme="dark"] .hd-page .hd-stored-html [style*="color:" i][style*="background-color:transparent" i]:not(a) {
            color: inherit !important;
        }

        html[data-color-theme="dark"] .hd-page .hd-stored-html font[color] {
            color: inherit !important;
        }

        html[data-color-theme="dark"] .hd-page .hd-stored-html a {
            color: var(--odie-link) !important;
        }


/* =========================================================================
   PROJECT DETAILS
   -------------------------------------------------------------------------
   ProjectDetails.aspx adds .project-details alongside .hd-page, .hd-grid to
   both grids, and .hd-stored-html to lblDescription and divNotes - Project
   Description and Project Notes are both RadEditor fields (reDescription and
   reNotes on ProjectAdd / ProjectEdit).

   The RadToolBar needs nothing, for the reason already written up in the
   TICKET DASHBOARD block: it takes WebsiteTelerikSkin, and the live
   .dashboard_grid in esu10_2026.css is cursor:pointer only.

   Two things on this page were light-mode-only and were fixed in the ASPX
   rather than here, because the file was open anyway:

     The zoom readout was an inline color:#666 and is now .text-muted, which
     is #6c757d in Bootstrap - near enough that light mode does not move, and
     already themed for dark.

     Mermaid was initialised with theme:'default', which paints its own white
     diagram background.  It now picks 'dark' from the data-color-theme
     attribute on <html>, the same signal master.js reads before styling the
     RadEditor iframe.

   Left alone on purpose: the ECharts percent bars (#8fc975 and #85c9de are
   pastels that hold up on the dark card, and the '#000' label sits on the
   green bar rather than on the page), the fullscreen modal (its own
   rgba(0,0,0,0.95) backdrop, so .btn-light is correct there), and the two
   Mermaid render-error boxes in the script, which are rare and legible.
   ========================================================================= */

    /* ---- Mermaid toolbar ---------------------------------------------------
       The strip of zoom / pan / fullscreen / SVG buttons carries an inline
       background-color:#f8f9fa, which is a light grey bar across a dark page.

       The inline style is left in place so light mode is untouched, and the
       div picked up a .workflow-toolbar class to hang this off.  Overriding
       an inline style is the one case where !important is doing real work
       rather than papering over specificity. */
    html[data-color-theme="dark"] .project-details .workflow-toolbar {
        background-color: #1C2027 !important;
    }

    /* The six buttons on that strip are .btn-outline-secondary, which in
       all.min.css is a flat #247297 border and text with a transparent fill,
       and - unlike most of the Limitless palette - it has no dark variant of
       its own.  #247297 against #1C2027 is about 2.6:1, which is thin for a
       border and worse for the small "Pan" / "Fullscreen" / "SVG" captions.

       Only the resting colour is lifted.  Hover keeps Bootstrap's #247297
       fill with white text, which reads correctly on dark and still marks the
       state change.  The button icons are blue glyphs on transparent and need
       nothing. */
    html[data-color-theme="dark"] .project-details .workflow-toolbar .btn-outline-secondary {
        --btn-color: var(--odie-link);
        --btn-border-color: #3E7E9C;
    }


/* =========================================================================
   Telerik RadAsyncUpload - shared
   -------------------------------------------------------------------------
   Deliberately NOT scoped to a page wrapper, for the same reason as the
   RadListBox block: the control is broken in dark mode everywhere, not just
   on the page that happened to surface it.

   Glow ships no AsyncUpload skin.  Telerik.Web.UI.Skins.dll ->
   Skins.Glow.AsyncUpload.Glow.css is nineteen bytes long and its entire
   contents are `body{color:inherit}`.  The base Skins.Upload.css hardcodes
   `background-color:#fff` on .ruFakeInput and `color:#000` on
   .ruFileLI .ruButton:hover, so the filename box renders white and the hover
   text black no matter which skin is selected.  That is what these rules fix.

   CORRECTION, 9/19/2026 - an earlier version of this note said ALL the colour
   comes from the base stylesheet.  That is not true of the Select button.
   RadAsyncUpload draws it from the RadUpload classes, and the Upload skin does
   supply its colours:

       .RadUpload_Glow      .ruButton  #e2e8eb on #1c262c, border #35434b
       .RadUpload_Bootstrap .ruButton  #333    on #fff,    border #ccc

   So the skin very much matters for that button, and a RadAsyncUpload left on
   the configured default skin renders a white Select button on a dark card.
   Removing a hardcoded Skin="Bootstrap" without assigning WebsiteTelerikSkin in
   its place is therefore not a no-op - it looks like one right up until you open
   the insert row.  Every rauFileAttachment in the app now takes the skin from
   its page's ItemCreated handler.

   Both the Classic and Lightweight class names are covered (.ruButton and
   .ruBrowse) because RenderMode is not set on these controls and the default
   comes from configuration rather than from the markup.

   IMPORTANT - overlap with the file-attachments block near the top of this
   file.  That block does the same job scoped to [id$="rgFileAttachments"] on
   TicketDetails.  Both carry !important and both land at the same
   specificity, so on that page source order decides and these rules win.
   The values below are therefore copied from it exactly, which makes the
   overlap a no-op rather than a silent restyle of a page already signed off.
   If either set is ever retuned, retune both.
   ========================================================================= */

    /* Filename box */
    html[data-color-theme="dark"] .RadAsyncUpload .ruFakeInput,
    html[data-color-theme="dark"] .RadUpload .ruFakeInput {
        background-color: #181A1F !important;
        color: #E7E9ED !important;
        border: 1px solid var(--odie-border) !important;
        box-shadow: none !important;
    }

        html[data-color-theme="dark"] .RadAsyncUpload .ruFakeInput::placeholder,
        html[data-color-theme="dark"] .RadUpload .ruFakeInput::placeholder {
            color: var(--odie-muted) !important;
        }

    /* Select / Browse button.  The :hover rule is not decoration - the base
       stylesheet pins .ruFileLI .ruButton:hover to #000, which would be black
       text on the dark fill below. */
    html[data-color-theme="dark"] .RadAsyncUpload .ruButton,
    html[data-color-theme="dark"] .RadAsyncUpload .ruBrowse,
    html[data-color-theme="dark"] .RadUpload .ruButton,
    html[data-color-theme="dark"] .RadUpload .ruBrowse {
        background-color: #334553 !important;
        color: #FFFFFF !important;
        border: 1px solid var(--odie-border) !important;
        box-shadow: none !important;
    }

        html[data-color-theme="dark"] .RadAsyncUpload .ruButton:hover,
        html[data-color-theme="dark"] .RadAsyncUpload .ruButton:focus,
        html[data-color-theme="dark"] .RadAsyncUpload .ruBrowse:hover,
        html[data-color-theme="dark"] .RadAsyncUpload .ruBrowse:focus,
        html[data-color-theme="dark"] .RadUpload .ruButton:hover,
        html[data-color-theme="dark"] .RadUpload .ruButton:focus,
        html[data-color-theme="dark"] .RadUpload .ruBrowse:hover,
        html[data-color-theme="dark"] .RadUpload .ruBrowse:focus {
            background-color: #3E5363 !important;
            color: #FFFFFF !important;
            border-color: var(--odie-link) !important;
        }

/* =========================================================================
   PROJECT EDIT
   -------------------------------------------------------------------------
   ProjectEdit.aspx adds .project-edit alongside .hd-page.  No page-scoped
   rules: the standalone rauImage is handled by the shared block above, both
   RadEditors carry RadEditorOnClientLoad, and rdpDateClosed's
   highlight_today SpecialDay is already covered by the global
   .RadCalendar_Glow rule further up.

   Its <style> block is left alone - a float on .rcbCheckBox and padding on
   .ticket_radcombobox td, both keyed to skin-independent base classes.

   The label_no_colon cell on the submit row is empty, so it does not need the
   brightening that .fee-edit gives that class.
   ========================================================================= */


/* =========================================================================
   MEMO EDIT
   -------------------------------------------------------------------------
   MemoEdit.aspx adds .memo-edit alongside .hd-page.

   The On Site and Private toggles are handled in the code-behind rather than
   here - they are image-only RadButtons, and the light artwork is dark
   line-art on transparent, so CSS cannot reach it.  The page now swaps in the
   *Dark.png variants the same way TicketManage does.

   The page's <style> block is left alone, but it is worth knowing what is in
   it: .RadTabStrip_Silk, .rtsSelected, .RadListBox .rlbImage and the
   .RadTabStrip .rtsLI width rules are all dead here.  There is no tab strip
   and no list box on this page - they were copied across from TicketManage,
   which has both.  The .rtsSelected rule is unscoped and !important and
   carries the light #F4F5F1 border, so it would be a hazard if a tab strip
   ever appeared on this page; today it matches nothing.
   ========================================================================= */

    /* ---- Field separators --------------------------------------------------
       The "|" characters between the time fields and the memo option toggles
       carry an inline color:#d9d9d9.  That is a faint hairline against the
       white card it was designed for, and a bright near-white bar against
       #23262C - it ends up louder than the controls it separates.

       Dropped to the border token, which restores the "barely there" reading
       the light theme has.  !important is required because the colour is an
       inline style on the element.

       Matched on the inline style rather than on ids.  Ten of these spans
       exist across MemoEdit, TicketManage and ManagedServiceBatchUpdate, all
       written the same way, and the ids differ per page - spanBillableSpacer,
       spanPrivateSpacer, spanDistributeTimeSpacer and so on.  Keying on the
       declaration catches them all and catches the next copy too.  Kept inside
       .hd-page so it cannot reach anything outside the converted section. */
    html[data-color-theme="dark"] .hd-page [style*="color: #d9d9d9" i] {
        color: var(--odie-border) !important;
    }


/* =========================================================================
   TICKET FEEDBACK
   -------------------------------------------------------------------------
   TicketFeedback.aspx adds .ticket-feedback alongside .hd-page.

   The survey option boxes are the whole job here.  The page's own <style>
   gives .satisfaction_table td and .yesno_table td a lightgray fill with 5px
   white borders and sets no text colour at all, so in dark mode they were
   light grey slabs with near-white body text on them - the words disappeared.

   One change went into the ASPX rather than here.  The click handlers used to
   write background-color inline ("lightgray" on the siblings, "lightgreen" on
   the one clicked), and an inline style is not reachable from this file.  The
   page already declared a .selected class for precisely this and nothing used
   it, so the handlers now toggle that class instead.  Light mode is
   unchanged - .selected is still lightgreen, unselected still falls back to
   the lightgray base rule - and dark mode now has something to hook.

   No Telerik controls on this page at all, and apSuccess.gif on the three
   outcome cards is a green tick on transparent, so it needed nothing.
   ========================================================================= */

    /* ---- Option boxes ------------------------------------------------------
       The white borders are what separate the cells, so they become the card
       colour rather than disappearing - the gap stays, it just reads as a gap
       instead of as five pixels of white.

       No !important needed: the page rule is (0,1,1) and this is (0,3,1). */
    html[data-color-theme="dark"] .ticket-feedback .satisfaction_table td,
    html[data-color-theme="dark"] .ticket-feedback .yesno_table td {
        background-color: #2A2F36;
        border-color: #23262C;
        color: var(--odie-body-color);
    }

        /* Hover is worth having here - these are buttons in everything but
           name, and nothing else signals that they are clickable except the
           cursor. */
        html[data-color-theme="dark"] .ticket-feedback .satisfaction_table td:hover,
        html[data-color-theme="dark"] .ticket-feedback .yesno_table td:hover {
            background-color: #333941;
        }

    /* ---- The chosen option -------------------------------------------------
       lightgreen with near-white text is unreadable, and it is also far
       brighter than anything else on a dark page.  This keeps green as the
       meaning - it is the only colour in the app that says "you picked this"
       on a survey - but at a weight that belongs on #23262C.

       .selected carries !important in the page's <style>, so this has to as
       well; it wins on specificity, (0,3,1) against (0,1,0). */
    html[data-color-theme="dark"] .ticket-feedback .satisfaction_table td.selected,
    html[data-color-theme="dark"] .ticket-feedback .yesno_table td.selected {
        background-color: #2E7D46 !important;
        border-color: #23262C !important;
        color: #FFFFFF !important;
    }


/* =========================================================================
   Status badges - shared
   -------------------------------------------------------------------------
   Deliberately NOT scoped to a page wrapper.  .statusOk / .statusWarn /
   .statusError are ODIE's oldest status vocabulary - the "8. Status badges"
   section of esu10_2026.css - and eighteen files use them: every helpdesk
   dashboard, four pages under erate/, both CanaryAccount pages, and the three
   shared scripts under scripts/dashboards.  Scoping this to that one page
   would mean writing it again for each of them.

   All three are the classic pale-alert palette - #D8000C on #FFD2D2,
   #9F6000 on #FEEFB3, #4F8A10 on #DFF2BF - so on a dark card they are bright
   pastel blocks with the contrast running the wrong way.

   The replacements reuse the --sev-* tokens declared in the Entity Dashboard
   block above rather than inventing a fourth palette, so a failed Ansible job
   here is the same red as a critical row on that dashboard.  Those tokens are
   declared on html[data-color-theme="dark"], not on a page wrapper, so they
   are in scope anywhere in this file.

   One deviation from the light versions: these carry a 1px border, which the
   light ones do not.  A 13-14% tint on #23262C does not read as a badge on
   its own the way a solid pastel does on white - the border is what gives it
   an edge.  Same shape the Entity Dashboard and Knowledgebase blocks use.

   .statusInfo is deliberately absent.  It is #fff on a solid #286090, which
   is already a dark badge with light text and reads correctly in both modes.
   ========================================================================= */

    html[data-color-theme="dark"] .statusError {
        color: var(--sev-crit-text);
        background-color: var(--sev-crit-bg);
        border: 1px solid var(--sev-crit-border);
    }

    html[data-color-theme="dark"] .statusWarn {
        color: var(--sev-warn-text);
        background-color: var(--sev-warn-bg);
        border: 1px solid var(--sev-warn-border);
    }

    html[data-color-theme="dark"] .statusOk {
        color: var(--sev-ok-text);
        background-color: var(--sev-ok-bg);
        border: 1px solid var(--sev-ok-border);
    }

/* =========================================================================
   INFRASTRUCTURE TASKS
   -------------------------------------------------------------------------
   InfrastructureTasks.aspx adds .infrastructure-tasks alongside .hd-page.

   No page-scoped rules.  The two job cards are plain Bootstrap cards with
   .btn.btn-light buttons, and the job status text the page's script writes
   into #jobStatus / #jobStatusAzurePW uses the three status badges above.
   The success message it builds carries .data-link, which the global anchor
   rule already covers.

   lblEntity carries CssClass="td-label", which is not defined in any
   stylesheet in the repo - it is a dead class, not something that needed a
   dark value.
   ========================================================================= */


/* =========================================================================
   ENTITY DASHBOARD - grid pass
   -------------------------------------------------------------------------
   The Entity Dashboard block much further up this file converted the page by
   redefining the --ed-* and --sev-* tokens it declares in its own :root.  That
   covered every panel, because every panel reads those tokens.  It did not
   cover the RadGrids, which read nothing and were running on plain Glow.

   EntityDashboard.aspx now adds .hd-page and .entity-dashboard to divContents
   and .hd-grid to four of its five grids: rgCyberHygiene, rgServerAssets,
   rgEvents and rgTicketFiles.  That pulls them from Glow's bluish slate onto
   the same #23262C the panels around them use - which is exactly what
   --ed-surface already resolves to, so the two systems agree rather than the
   grid sitting in a slightly different grey.

   rgTicketMemos is deliberately NOT given .hd-grid.  It carries
   .entity-dashboard-memo-grid, whose rules in the page's own <style> reset
   every paintable layer to `background: transparent none !important` so the
   Telerik fill cannot show in the strip between two memo cards.  That comment
   is already dark-aware and names the Glow skin.  The shared row rules are
   (0,4,1) against its (0,2,1), so adding the class would outrank it and put
   the band straight back.  Same reasoning that keeps rgHistory off .hd-grid
   on TicketDetails.

   No rules needed here - the shared .hd-page block does all of it.  This
   comment exists so the exclusion is not read as an oversight later.
   ========================================================================= */


/* =========================================================================
   WORK SUMMARY
   -------------------------------------------------------------------------
   WorkSummary.aspx adds .work-summary alongside .hd-page.  rgHistory does NOT
   get .hd-grid - it is a memo grid, and those are handled per page, the same
   way rgHistory on TicketDetails and rgTicketMemos on EntityDashboard are.

   The page carries a second <style> block just above the grid:

       .RadGrid_Bootstrap { background-color: #cfd9ea !important; }
       .RadGrid_Bootstrap .rgAltRow > td { background-color: #cfd9ea !important; }

   That is the light-blue rail that shows in the gap between one memo card and
   the next.  It is keyed to the skin name, so in dark mode - where the skin is
   Glow - it stops matching entirely and nothing sets the fill, leaving Glow's
   own bluish slate showing between the cards.

   The rule is deliberately NOT given a .RadGrid_Glow twin.  That is the house
   fix for skin-name coupling, but it would push #cfd9ea into dark mode, which
   is the opposite of what is wanted - the same trap avoided on the TicketManage
   tab rules.  The dark value goes here instead.

   #181A1F is the value TicketManage and TicketDetails already use for the same
   rail, through their litMemoBackgroundColor style blocks.  This page builds
   its version in markup rather than in the code-behind, so it never had the
   dark branch those two have.

   Scoped to .work-summary rather than to .memo_radgrid generally, even though
   six pages carry that class.  EntityDashboard's memo grid wants the opposite
   treatment - transparent, so the fill cannot show at all - and its rule sits
   at the same specificity as an unscoped .memo_radgrid rule would.  This file
   loads after cphHead, so an unscoped rule would win and put the band back on
   a page that just had it removed.
   ========================================================================= */

    html[data-color-theme="dark"] .work-summary .memo_radgrid,
    html[data-color-theme="dark"] .work-summary .memo_radgrid .rgMasterTable,
    html[data-color-theme="dark"] .work-summary .memo_radgrid .rgRow > td,
    html[data-color-theme="dark"] .work-summary .memo_radgrid .rgAltRow > td {
        background-color: #181A1F !important;
    }

    /* The memo bodies carry .memo_data, so the stored-HTML neutraliser near the
       top of this file already covers them.  .memo-sysmsgs is handled there
       too.  The one thing neither could reach was the ticket link inside
       divSystemMessages, which carried an inline "color:#000000 !important" -
       an inline !important outranks every author rule, so that one had to be
       fixed in WorkSummary.aspx.vb rather than here. */


/* =========================================================================
   MANAGED SERVICE BATCH UPDATE
   -------------------------------------------------------------------------
   ManagedServiceBatchUpdate.aspx adds .managed-service-batch-update alongside
   .hd-page, and .hd-grid to rgTicketList.

   No page-scoped rules.  All nine Telerik controls take WebsiteTelerikSkin,
   the RadEditor carries RadEditorOnClientLoad, and both save paths already
   wrap reMemo.Content in StripDarkThemeInlineStyles.  Its three "|" separators
   are covered by the shared inline-style rule in the MEMO EDIT block above,
   which is why that rule was widened from two ids to the declaration itself.

   Worth recording what is in the page's <style> block, because most of it is
   dead.  There is no RadTabStrip, no RadMultiPage and no RadListBox anywhere
   on this page, so every one of these matches nothing:

       .RadTabStrip_Bootstrap .rtsLevel1 .rtsLink
       .RadTabStrip_Bootstrap.rtsTop .rtsLevel1 .rtsSelected .rtsLink
       .RadTabStrip_Bootstrap .rtsLevel1 .rtsHovered .rtsLink
       .rtsSelected, .rtsSelected span
       .RadListBox .rlbImage
       .RadTabStrip .rtsLI          (and its 700px media query)

   They were copied from TicketManage, which does have both controls - the
   same copy MemoEdit carries.  The .rtsSelected rule is the one to watch: it
   is unscoped, !important, and sets a light #F5F5F5 border, so it would bite
   the day a tab strip lands on either page.  Inert today, so left alone.
   ========================================================================= */


/* =========================================================================
   REGIONAL DASHBOARD
   -------------------------------------------------------------------------
   RegionalDashboard.aspx has no divContents - cphBody opens straight onto a
   .card - so the section wrapper is a plain div added around the whole thing,
   carrying .hd-page and .regional-dashboard.  Its three grids (rgScores,
   rgCyberHygiene, rgEvents) take .hd-grid.

   Everything else was already in hand: the tab strip, the three grids and
   rcbStatus all take WebsiteTelerikSkin, and the panels are filled by
   case "regional" in scripts/dashboards/main.js, which uses the status badges
   covered by the shared block above.
   ========================================================================= */

    /* ---- Uptime strip ------------------------------------------------------
       main.js paints downtime as a run of <span class='down'> inside an uptime
       bar, positioned by percentage width.  The page's own <style> gives that
       class background-color: hsl(209 20.8% 15%) - a near-black blue-grey,
       which is a clear dark bar across a white card.

       The dark card is about hsl(220 11% 15%), so the bar and the surface it
       sits on land at the same lightness and the downtime run disappears.

       The lightness is inverted rather than recoloured.  Turning it red would
       read better still, but .down means "this monitor was down for this slice
       of time" in both themes, and light mode says that with a neutral bar -
       introducing a severity colour on one theme only would make the two modes
       signal differently.  This keeps the same neutral, flipped to contrast.

       .up is left alone: it is declared in the page's <style> but the only
       reference to it in main.js is inside a commented-out example, so nothing
       renders it. */
    html[data-color-theme="dark"] .regional-dashboard .down {
        background-color: hsl(209 20.8% 72%);
    }


/* =========================================================================
   API KEY LIST
   -------------------------------------------------------------------------
   ApiKeyList.aspx adds .api-key-list alongside .hd-page, and .hd-grid to
   rgApiKey.  The shared block above already covers the card, the details
   table and the grid.

   No page-scoped rules.  The click-to-copy celebration that replaced the old
   star burst is shared now - scripts/copy_celebration.js - and its one dark
   retune, the sweep, is the global .copy-celebration-flash rule near the top
   of this file.  The page's own <style> is colour-free apart from a dotted
   hover underline that resolves through var(--odie-link). - 9/23/2026
   ========================================================================= */


/* =========================================================================
   WORKSHOPS - shared
   -------------------------------------------------------------------------
   Fourth section wrapper, after .acc-page, .ast-page and .hd-page, and built
   to the same shape: .ws-page on the page's divContents, .ws-grid on every
   RadGrid, page classes (.section-list and so on) for anything local.

   Same reasoning as the other three.  In dark mode the Telerik skin switches
   to Glow (WebsiteTelerikSkin in common_settings.vb) and Glow's bluish slate
   rows do not match ODIE's neutral #23262C card, so each grid needs pulling
   into the same family.  workshops/ is 36 pages, so the wrapper pays for
   itself the way the other three did.

   Values are identical to the .hd-page block above on purpose.  A grid should
   not look different because of which folder its page lives in.
   ========================================================================= */

    /* Filter cards above the grids. .label and .data carry no colour in the
       light sheet, so these only set what differs. */
    html[data-color-theme="dark"] .ws-page .details_table,
    html[data-color-theme="dark"] .ws-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .ws-page .label,
        html[data-color-theme="dark"] .ws-page .label_no_colon {
            color: #E4E8ED;
        }

    /* ---- Plain <select> ----------------------------------------------------
       Same rule the assets and helpdesk blocks carry, for the pages in this
       section that still use <asp:DropDownList>.  It renders a bare <select>
       with no class, which nothing styles, so it takes the browser default -
       a white box on a dark card. */
    html[data-color-theme="dark"] .ws-page select {
        background-color: #181A1F;
        color: var(--odie-body-color);
        border: 1px solid var(--odie-border);
    }

        html[data-color-theme="dark"] .ws-page select:focus {
            border-color: #6db5ff;
            box-shadow: 0 0 0 0.125rem rgba(114, 195, 240, 0.22);
            outline: 0;
        }

        html[data-color-theme="dark"] .ws-page select option {
            background-color: #23262C;
            color: var(--odie-body-color);
        }

    /* ---- Grid -------------------------------------------------------------- */
    html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgAltRow:hover > td,
        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgHoveredRow > td {
            background: #333941 !important;
        }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgSelectedRow > td,
        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgActiveRow > td {
            background: #2C3E4E !important;
            color: #F1F3F5 !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

            html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgRow > td a:hover,
            html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgAltRow > td a:hover {
                color: var(--odie-link-hover) !important;
            }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgFilterRow > td {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
        }

        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .ws-page .ws-grid.RadGrid_Glow .rgPager a {
                color: var(--odie-link) !important;
            }

    /* ---- Stored HTML -------------------------------------------------------
       .ws-stored-html is the workshops counterpart to .acc-stored-html,
       .ast-stored-html and .hd-stored-html.  Workshop descriptions are written
       in the reDescription RadEditor on WorkshopAdd / WorkshopEdit and then
       rendered raw into spans and divs across this section, so old ones carry
       inline colours that no ordinary rule can reach.

       Keyed on the class alone rather than on .ws-page .ws-stored-html, the way
       .memo_data is.  The class only exists where this file's markup puts it,
       so the wrapper added nothing except one more way for the rule to miss.

       This block does NOT follow the .memo_data pattern, and the reason is
       worth writing down because two attempts at it failed.

       .memo_data neutralises a matched element with `color: inherit`.  That
       works for a mail client, which stamps the same colour onto every element
       it emits - clear one, clear the lot.  A workshop description is a
       document pasted out of Word or Google Docs, and those nest: one wrapper
       carries the colour and hundreds of children carry none.  If the selector
       misses that one wrapper for any reason - a `background` shorthand, a
       colour in a form the attribute selector does not match, a `font` tag -
       then every child that DID match resolves `inherit` against it and takes
       the dark colour from it.  The rule spreads the problem instead of
       clearing it, which is exactly what the page looked like: the first few
       paragraphs readable and everything under one wrapper dark.

       So this sets the colour outright on every descendant rather than
       inheriting, and does not try to guess which elements carry a colour.
       Nothing inside a description can then stay dark, whatever produced it.

       The trade: a deliberate highlight fill pasted into a description loses
       its fill in dark mode (see the background rule below) rather than
       keeping a fill with body-coloured text on it, which is the failure the
       [style*="background"] carve-out elsewhere exists to prevent.  For
       marketing copy that is the right way round - unreadable paragraphs are
       worse than a lost highlight.

       No :not() on the colour rules below, deliberately.  An earlier version
       used a universal selector excluding anchors and font tags by name.  A
       type-plus-attribute argument is a compound selector, which :not() only
       accepts under Selectors Level 4, and an unparseable selector in a
       comma-separated list invalidates the WHOLE rule - so the plain
       .ws-stored-html selector sharing that list went down with it and none of
       this applied at all.  A bare universal selector plus a more specific rule
       for links does the same job and cannot fail to parse. */
    html[data-color-theme="dark"] .ws-stored-html,
    html[data-color-theme="dark"] .ws-stored-html * {
        color: var(--odie-body-color) !important;
    }

        /* Links, and anything inside one.  The descendant part is not
           defensive: Google Docs puts the colour on a span INSIDE the anchor -

               <a href="..."><span style="color: #1155cc;">Google Form</span></a>

           so an `a` selector on its own would leave the visible text untouched.

           Specificity: `.ws-stored-html a` and `.ws-stored-html a *` are both
           (0,2,2) against the universal rule's (0,2,1), so these carry without
           !important fights. */
        html[data-color-theme="dark"] .ws-stored-html a,
        html[data-color-theme="dark"] .ws-stored-html a * {
            color: var(--odie-link) !important;
        }

            html[data-color-theme="dark"] .ws-stored-html a:hover,
            html[data-color-theme="dark"] .ws-stored-html a:hover * {
                color: var(--odie-link-hover) !important;
            }

        /* Any real fill that travelled in with the paste is dropped, so a pale
           highlight cannot end up carrying body-coloured text.  Google Docs
           writes "background-color: transparent" on nearly every span, which is
           not a fill and is skipped. */
        html[data-color-theme="dark"] .ws-stored-html [style*="background" i]:not([style*="transparent" i]) {
            background-color: transparent !important;
            background-image: none !important;
        }

/* =========================================================================
   SECTION LIST
   -------------------------------------------------------------------------
   SectionList.aspx adds .section-list alongside .ws-page, .ws-grid to
   rgSection and .ws-stored-html to the card view's description span.

   Two things about this page that are worth knowing before touching it.

   The card view is not styled from this file.  SectionList.aspx.vb builds a
   <style> block at runtime into divCardViewCss and paints the grid with
   odie.settings.WebsiteBackgroundColor, which already branches on
   CurrentUser.MasterPage and returns #181A1F on the dark theme.  That is why
   the card view needed nothing here.

   That injected block is keyed to .RadGrid_Bootstrap, which would normally
   stop matching under Glow - but the same code assigns the class by hand
   (rgSection.CssClass = "RadGrid_Bootstrap CardView"), so it matches in both
   themes.  That assignment also drops ws-grid, deliberately: in card view the
   grid is a transparent container and the shared row rules above would
   outrank the injected padding and background.  List view keeps ws-grid.
   ========================================================================= */

    /* ---- Tag filter chip ---------------------------------------------------
       The "Workshop Tag" row shows the active tag in a .filterBox - #E6E6E6
       with an #818181 border, which is a pale chip on a white card and a
       bright one on #23262C.  The X that clears it carries .error and is
       already themed. */
    html[data-color-theme="dark"] .section-list .filterBox {
        background-color: #2A2F36;
        border-color: var(--odie-border);
    }


/* =========================================================================
   SECTION DETAILS
   -------------------------------------------------------------------------
   SectionDetails.aspx adds .section-details alongside .ws-page, .ws-grid to
   its four detail grids (rgSectionDates, rgRegistrationFees, rgGrants,
   rgPrivateSection) and .ws-stored-html to lblDescription, which renders
   mySection.Description straight out of the reDescription RadEditor.

   Worth recording: the page's own <style> block keys a border reset to
   .RadGrid_Silk, and all four grids take WebsiteTelerikSkin - Bootstrap in
   light, Glow in dark.  So that rule matches nothing in either theme.  It is
   dead rather than skin-coupled, which is a different problem from the one on
   WorkSummary, and left alone accordingly.
   ========================================================================= */

    /* ---- Collapse chevrons -------------------------------------------------
       spanHistoryToggle carries an inline color:#666, which is dim to the point
       of vanishing against the dark card header.  Matched on the
       data-collapse-toggle attribute rather than by id, the same hook the
       .acc-page and .ast-page blocks use for their chevrons. */
    html[data-color-theme="dark"] .ws-page [data-collapse-toggle] {
        color: var(--odie-muted) !important;
    }

    /* ---- Detail grids: no alternating band ---------------------------------
       These four are small fixed-width lists rather than data grids - no
       header, no paging - and the markup gives ItemStyle and
       AlternatingItemStyle the SAME class (rad_grid_item_style, not
       rad_grid_alternating_item_style) so that light mode shows no banding at
       all.

       The shared .ws-grid block does band .rgAltRow, which would give these
       grids a stripe in dark mode that they do not have in light.  This puts
       the alternating rows back on the .rgRow colour.  (0,5,1) against the
       shared rule's (0,4,1), so it carries without needing anything extra. */
    html[data-color-theme="dark"] .section-details .ws-grid.RadGrid_Glow .rgAltRow > td {
        background: #262A31 !important;
    }


/* =========================================================================
   REGISTRATION DETAILS
   -------------------------------------------------------------------------
   RegistrationDetails.aspx adds .registration-details alongside .ws-page,
   .ws-grid to rgSectionDates, and .ws-stored-html to lblRegistrationHistory
   and divRegistrationPolicy.

   The history label is an assembled log rather than editor output - rows of
   HistoryDetails joined with <hr /> - and the policy div is
   WorkshopRegistrationPolicy() written in with InnerHtml.  Both render stored
   markup, so both get the neutraliser for the same reason lblSectionHistory
   does on SectionDetails.

   The page's <style> keys a border reset to .RadGrid_Silk while rgSectionDates
   takes WebsiteTelerikSkin - Bootstrap in light, Glow in dark - so that rule
   matches in neither theme.  Dead, not skin-coupled, same as SectionDetails.
   Left alone.
   ========================================================================= */

    /* ---- "No Breakouts" -----------------------------------------------------
       The nested GridTableView sets NoDetailRecordsText to a span with its
       styling written inline in the attribute string, including
       color: #575C5F.  That is a readable muted grey on a white grid and a
       dark grey on a dark one.

       The shared .ws-grid block already recolours .rgNoRecords, but that lands
       on the cell while this colour is on a span inside it, so the span wins.
       Matched on the inline declaration, the same hook the helpdesk separators
       use.

       Doing it here rather than editing the attribute string keeps light mode
       untouched - #575C5F is a deliberate choice there, and swapping it for
       `inherit` would hand light mode whatever the Telerik skin happens to set
       on .rgNoRecords instead.

       Scoped to .ws-page rather than to this page: RegistrationAdd and
       RegistrationEdit carry the same NoDetailRecordsText string verbatim, so
       they are covered as they are converted. */
    html[data-color-theme="dark"] .ws-page [style*="color: #575C5F" i] {
        color: var(--odie-muted) !important;
    }


/* =========================================================================
   System notification cards - shared
   -------------------------------------------------------------------------
   odie.utilities.ErrorMessage, WarningMessage and NoticeMessage in
   common_utilities.vb each emit the same shape:

       <div class="alert bg-danger  text-white system-notification shadow">
       <div class="alert bg-warning text-white system-notification shadow">
       <div class="alert bg-info    text-white system-notification shadow">

   141 files call one of the three, so this is deliberately global rather than
   scoped to a page or a section wrapper.

   In light mode those are solid saturated bars - rgb(239,68,68),
   rgb(245,134,70) and rgb(4,154,173) - with white text, which reads as a
   banner against a white page.  Against #181A1F the same fill is the
   brightest thing on the screen and pulls far more attention than the content
   it is introducing.  A registration policy is not an emergency.

   These become low-alpha tints with a matching border and light severity
   text, which is the shape the Knowledgebase callouts and the status badges
   in this file already use, so a notice card and a warning row now read as
   the same family.

   Hooked on .system-notification rather than on .alert.bg-info and friends.
   That class is on all three emitters and on nothing else, so a hand-written
   Bootstrap alert elsewhere in the app is left alone - there is exactly one
   of those in the repo and it sits inside a commented-out block.

   !important throughout is not decoration: .bg-* and .text-white both carry
   !important themselves, so only specificity and importance together win.
   ========================================================================= */

html[data-color-theme="dark"] {
    /* The severity palette declared with the Entity Dashboard has no info
       pair - its comment says so, and the Knowledgebase block worked around it
       with its own --kb-info-*.  Declaring the missing pair here lets all
       three of these cards read from one family.  Keyed to the ODIE link blue
       so info means the same colour here as it does on the dashboards. */
    --sev-info: var(--odie-link);
    --sev-info-bg: rgba(114, 195, 240, 0.13);
    --sev-info-border: rgba(114, 195, 240, 0.34);
    --sev-info-text: #A8D5F5;
}

    /* Shared shape.  .shadow drops a black box-shadow that does nothing on a
       dark page except muddy the border, and the gradient reset guards against
       a themed .bg-* ever shipping one. */
    html[data-color-theme="dark"] .alert.system-notification {
        background-image: none !important;
        border-width: 1px !important;
        border-style: solid !important;
        box-shadow: none !important;
    }

    html[data-color-theme="dark"] .alert.bg-danger.system-notification {
        background-color: var(--sev-crit-bg) !important;
        border-color: var(--sev-crit-border) !important;
        color: var(--sev-crit-text) !important;
    }

    html[data-color-theme="dark"] .alert.bg-warning.system-notification {
        background-color: var(--sev-warn-bg) !important;
        border-color: var(--sev-warn-border) !important;
        color: var(--sev-warn-text) !important;
    }

    html[data-color-theme="dark"] .alert.bg-info.system-notification {
        background-color: var(--sev-info-bg) !important;
        border-color: var(--sev-info-border) !important;
        color: var(--sev-info-text) !important;
    }

        /* The leading icon is an <i> with no colour of its own, so it follows
           the card.  Stated only because it is easy to assume otherwise and
           add a rule that is not needed. */

        /* master.css pins .system-notification a to #ffffff !important.  That
           is left alone deliberately: white against any of these three tints
           is the strongest available contrast and keeps a link looking like a
           link now that the body text is no longer white itself. */


/* =========================================================================
   REGISTRATION MANAGE 2026
   -------------------------------------------------------------------------
   RegistrationManage2026.aspx adds .registration-manage-2026 alongside
   .ws-page.  There is no .ws-grid on it - the page has no RadGrid at all.  It
   is a hand-built card list with its own component vocabulary, every class
   prefixed rm-, declared in a 467-line <style> block in cphHead and used
   nowhere else in the repo.

   That block declares no custom properties, so unlike the Entity Dashboard
   this page cannot be converted by redefining tokens - each colour-bearing
   rule needs a counterpart here.  Hence the length.

   Load order is in our favour: litDarkCss2026 renders at line 45 of
   index.master and cphHead at line 44, so this file comes after the page's
   own <style>.  At equal specificity these win.  The page uses !important
   freely on the controls it size-locks (checkboxes, .rm-seg buttons, .rm-field
   inputs), so those rules carry !important here too - it is matching the
   original, not brute force.

   Colour mapping, so the next person can follow the intent rather than the
   hex:

     #fff surfaces        -> #23262C cards, #181A1F inputs
     #e2e6ea / #ccd2d8    -> var(--odie-border)
     #45505c / #98a2ae    -> body colour / var(--odie-muted)
     #1d5c96 as a fill    -> #2F6FA8, the filled-blue already proven on the
                             Entity Dashboard's Scan button
     #1d5c96 as ink       -> var(--odie-link)
     #6941c6 as a fill    -> #7A5BD0   (remote attendance)
     #6941c6 as ink       -> #B9A5EE
     #b3261e / #c0392b    -> the --sev-crit-* family
     #f0a020 / #9a6700    -> the --sev-warn-* family

   Purple has no token because nothing else in ODIE uses one; remote
   attendance is the only place it appears, so the two values are written
   inline here rather than polluting the severity palette.
   ========================================================================= */

    /* ---- Search and sort ---------------------------------------------------
       Both are bare inputs with a white background written directly on the id. */
    html[data-color-theme="dark"] .registration-manage-2026 #rmSearch,
    html[data-color-theme="dark"] .registration-manage-2026 #rmSort {
        background: var(--odie-body-bg);
        border-color: var(--odie-border);
        color: var(--odie-body-color);
    }

    /* ---- Card --------------------------------------------------------------
       The box-shadow goes: a black shadow over #181A1F is invisible, so the
       hover feedback moves onto the border instead, which is the only way the
       card can still react to the pointer. */
    html[data-color-theme="dark"] .registration-manage-2026 .rm-card {
        background: #23262C;
        border-color: var(--odie-border);
        border-left-color: var(--odie-border);
        box-shadow: none;
    }

        /* #4A4F58 written out rather than tokenised: --ed-border-strong is the
           same value but is named for the Entity Dashboard, and there is no
           global equivalent to borrow. */
        html[data-color-theme="dark"] .registration-manage-2026 .rm-card:hover {
            box-shadow: none;
            border-color: #4A4F58;
        }

        html[data-color-theme="dark"] .registration-manage-2026 .rm-card.rm-dirty {
            border-left-color: var(--sev-warn);
        }

        /* #fbf7f7 is a barely-there pink wash in light mode.  The dark
           equivalent is deliberately weaker than --sev-crit-bg: that token is
           sized for a badge, and at 14% across a whole card it reads as an
           alert rather than as a struck-through row. */
        html[data-color-theme="dark"] .registration-manage-2026 .rm-card.rm-cancelled {
            background: rgba(242, 85, 90, 0.06);
            border-left-color: var(--sev-crit);
        }

        html[data-color-theme="dark"] .registration-manage-2026 .rm-card.rm-invalid {
            border-left-color: var(--sev-crit);
        }

    /* ---- Row 1: identity, meta, badges ------------------------------------- */
    html[data-color-theme="dark"] .registration-manage-2026 .rm-meta {
        color: var(--odie-muted);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-badge-billed {
        background: var(--sev-crit-bg);
        color: var(--sev-crit-text);
    }

    /* Cancelled stays a solid fill rather than a tint - it is the one badge
       that marks a destructive end state and should not recede. */
    html[data-color-theme="dark"] .registration-manage-2026 .rm-badge-cancelled {
        background: var(--sev-crit);
        color: #2A1416;
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-badge-dirty {
        background: var(--sev-warn-bg);
        color: var(--sev-warn-text);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-dirty-msg {
        color: var(--sev-warn-text);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-cancel-toggle {
        border-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .registration-manage-2026 .rm-cancel-toggle.rm-on {
            border-color: var(--sev-crit);
            color: var(--sev-crit-text);
        }

    /* ---- Custom checkboxes -------------------------------------------------
       The page draws these itself with appearance:none and locks every
       dimension with !important, so the overrides have to match that weight.
       The tick is drawn with a border on ::after and stays white - it sits on
       a filled blue or red box in both themes. */
    html[data-color-theme="dark"] .registration-manage-2026 .rm-card input[type=checkbox] {
        background: var(--odie-body-bg) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .registration-manage-2026 .rm-card input[type=checkbox]:checked {
            background: #2F6FA8 !important;
            border-color: #2F6FA8 !important;
        }

        html[data-color-theme="dark"] .registration-manage-2026 .rm-card .rm-cancel-toggle input[type=checkbox]:checked {
            background: var(--sev-crit) !important;
            border-color: var(--sev-crit) !important;
        }

    /* ---- Segmented attendance control -------------------------------------- */
    html[data-color-theme="dark"] .registration-manage-2026 .rm-seg {
        border-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .registration-manage-2026 .rm-seg button {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
        }

            html[data-color-theme="dark"] .registration-manage-2026 .rm-seg button + button {
                border-left-color: var(--odie-border) !important;
            }

            html[data-color-theme="dark"] .registration-manage-2026 .rm-seg button.rm-sel {
                background: #2F6FA8 !important;
                color: #FFFFFF !important;
            }

            html[data-color-theme="dark"] .registration-manage-2026 .rm-seg button.rm-sel-remote {
                background: #7A5BD0 !important;
                color: #FFFFFF !important;
            }

            html[data-color-theme="dark"] .registration-manage-2026 .rm-seg button.rm-sel-none {
                background: #4A515C !important;
                color: #FFFFFF !important;
            }

    /* ---- Attendance chips --------------------------------------------------
       Unselected chips are outline-only in light mode - white fill, coloured
       border and ink.  Kept as outlines here, on the card rather than on white,
       so the selected state is still the one that fills. */
    html[data-color-theme="dark"] .registration-manage-2026 .rm-chip-none {
        background: #262A31;
        border-color: var(--odie-border);
        color: var(--odie-muted);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-chip-onsite {
        background: transparent;
        border-color: #4A8DA6;
        color: var(--odie-link);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-chip-remote {
        background: transparent;
        border-color: #6E57B8;
        color: #B9A5EE;
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-chip-att.rm-chip-onsite {
        background: #2F6FA8;
        color: #FFFFFF;
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-chip-att.rm-chip-remote {
        background: #7A5BD0;
        color: #FFFFFF;
    }

    /* ---- Row 3: fees, grants, comments -------------------------------------- */
    html[data-color-theme="dark"] .registration-manage-2026 .rm-field label,
    html[data-color-theme="dark"] .registration-manage-2026 .rm-field .rm-flabel {
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-field input[type=text],
    html[data-color-theme="dark"] .registration-manage-2026 .rm-field select {
        background: var(--odie-body-bg);
        border-color: var(--odie-border) !important;
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .registration-manage-2026 .rm-field input.rm-bad {
            border-color: var(--sev-crit) !important;
            background: var(--sev-crit-bg);
            color: var(--sev-crit-text);
        }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-pending,
    html[data-color-theme="dark"] .registration-manage-2026 .rm-notset {
        color: var(--sev-crit-text);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-grant {
        border-color: var(--odie-border);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-cbtn {
        background: #262A31;
        border-color: var(--odie-border);
        color: var(--odie-body-color);
    }

        html[data-color-theme="dark"] .registration-manage-2026 .rm-cbtn.rm-has {
            border-color: #4A8DA6;
            color: var(--odie-link);
        }

    /* ---- Row 4: comments and errors ----------------------------------------- */
    html[data-color-theme="dark"] .registration-manage-2026 .rm-row4 textarea {
        background: var(--odie-body-bg);
        border-color: var(--odie-border);
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-error-msg {
        background: var(--sev-crit-bg);
        color: var(--sev-crit-text);
    }

    html[data-color-theme="dark"] .registration-manage-2026 .rm-empty {
        color: var(--odie-muted);
    }


/* =========================================================================
   REGISTRATION MANAGE
   -------------------------------------------------------------------------
   RegistrationManage.aspx adds .registration-manage alongside .ws-page and
   .ws-grid to rgRegistrationManagement.

   Two of its three grids are NOT given .ws-grid, and that is not an
   oversight.  rgSectionDates and rgGrants are nested inside the outer grid's
   templates and neither is skinned in the code-behind, so both render on
   Telerik's "Default" skin - a light one - in both themes.  .ws-grid is
   written against .RadGrid_Glow and would match neither.

   They are handled below as .RadGrid_Default instead, which leaves light mode
   exactly as it is.  Skinning them from WebsiteTelerikSkin would be the more
   consistent fix and would let them use .ws-grid like everything else, but it
   moves them from Default to Bootstrap in LIGHT mode too, and the page's own
   <style> has a .RadGrid_Default border reset written for them.  That is a
   visible change to a working page, so it is left as a note rather than done
   quietly.

   The page's .RadGrid_Bootstrap border rule was given a .RadGrid_Glow twin in
   the ASPX - the house fix for skin-name coupling, safe there because the rule
   carries border-width and no colour.
   ========================================================================= */

    /* ---- Nested grids on the Default skin ----------------------------------
       Telerik's Default skin paints white rows, a #E0E0E0 header and grey
       borders.  These pull the two nested grids onto the same surfaces the
       .ws-grid block uses, so a section-dates table inside a dark card does not
       arrive as a white slab. */
    html[data-color-theme="dark"] .registration-manage .RadGrid_Default,
    html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgHeader,
        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgRow > td,
        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgAltRow > td,
        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgEditRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgRow > td a,
        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgNoRecords,
        html[data-color-theme="dark"] .registration-manage .RadGrid_Default .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
        }

    /* ---- AJAX loading overlay ----------------------------------------------
       The panel is declared BackColor="#E0E0E0" Transparency="50", so while a
       postback is in flight a half-opaque light grey wash sits over the grid -
       on a dark page that is a flash of white every time anything is saved.

       Matched by id suffix because the control is runat="server" and what
       reaches the browser is a prefixed ClientID.  Both the property and the
       attribute form are covered: BackColor renders as an inline style or as a
       bgcolor attribute depending on controlRenderingCompatibilityVersion,
       which is the same thing that caught the Asset Merge row banding. */
    html[data-color-theme="dark"] .registration-manage [id$="ralpRegistrationManagement"],
    html[data-color-theme="dark"] .registration-manage [id$="ralpRegistrationManagement"] table {
        background-color: #181A1F !important;
    }


/* =========================================================================
   REGISTRATION ONLINE PAYMENT
   -------------------------------------------------------------------------
   RegistrationOnlinePayment.aspx adds .registration-online-payment alongside
   .ws-page.  It goes on two elements, not one: divConfirmationCard is a
   sibling of divContents rather than a child, so without its own copy the
   receipt view would sit outside every .ws-page rule.

   The Square card form is NOT handled here and cannot be - see the note at
   the end of this block.
   ========================================================================= */

    /* ---- Receipt table -----------------------------------------------------
       ChargeCreditCard builds the receipt as a table with .additional_information,
       which master.css gives a #dedede border - a near-white box on a dark
       card.  The class is used in a handful of places across the app, so this
       stays scoped to the section wrapper rather than going global. */
    html[data-color-theme="dark"] .ws-page .additional_information {
        border-color: var(--odie-border);
    }

    /* ---- "The credit card was successfully charged!" -----------------------
       Written inline as color:green, which is #008000 - almost invisible on
       #23262C.  Same hook and the same replacement the .acc-page, .ast-page
       and .dlv-page blocks already use for their own inline greens; there is
       no house class for a green status the way .error exists for red, and
       inventing one would mean adding it to master.css, which all seventeen
       themes load. */
    html[data-color-theme="dark"] .ws-page [style*="color:green" i] {
        color: #7BD88F !important;
    }

/* -------------------------------------------------------------------------
   NOT DONE: the Square card form

   #card-container is where Square's Web Payments SDK mounts its hosted card
   fields.  Those render inside an iframe served from squarecdn.com, so
   nothing in this file can reach them - the card number, expiry and CVV
   inputs stay on Square's default light styling on a dark page.

   The fix is a style object passed to payments.card() in the ASPX, not CSS
   here, and it would need to go to all three call sites: this page,
   RegistrationAdd.aspx and the parked Square.aspx.exclude.  All three
   currently call payments.card() bare.

   Left undone deliberately.  It is a payment form, the SDK's style schema
   cannot be verified from this repo, and a malformed option risks breaking
   card entry rather than just looking wrong.  It wants testing against the
   sandbox endpoint the code-behind already switches to.
   ------------------------------------------------------------------------- */


/* =========================================================================
   WORKSHOP CALENDAR
   -------------------------------------------------------------------------
   Calendar.aspx adds .workshop-calendar alongside .ws-page.  No .ws-grid -
   the page has no RadGrid.  Its one large control is a RadScheduler, the
   first in this pass.

   No rules here any more - 9/18/2026.  The page was brought in line with
   accounts/AccountCalendar.aspx, which carries its whole calendar palette in
   its own <style> block as --cal-* custom properties on .cal-card and on the
   scheduler's class (.workshop_calendar here, .account_calendar there), and
   swaps them under html[data-color-theme="dark"] in that same block.  The
   variables are declared in the page, not in a theme sheet, so the other
   eleven tenants render the light set and are unaffected.

   The earlier block here (calendar body, header/footer, appointment border,
   keyed to .RadScheduler_Glow) was removed rather than left in place: its
   selectors are one class more specific than the page's, so they would have
   kept the header on #1C2027 and the cell borders on --odie-border-light and
   the two calendars would have drifted apart.  If the workshop calendar looks
   wrong in dark mode, the fix belongs in the dark half of Calendar.aspx's
   variable block, next to the Account Calendar's.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Screen-reader-only grid headers - shared

   Icon-only grid columns carry a header label for screen readers and hide it
   visually.  master.css does that with a single class:

       .rad_grid_header_text_screen_reader_only { color: transparent !important }

   Every per-section grid header rule in this file is five class-level
   components deep - .ws-page .ws-grid.RadGrid_Glow .rgHeader and its .acc- /
   .ast- / .hd- / .dlv- siblings - so it outranks that !important and paints
   the label back in.  master.css's font-size: 0 carries no !important at all,
   so Glow's own header sizing wins too and the label comes back at full size
   and uppercased rather than as a hairline.

   Four pages hit this, all in Workshops: Workshop Details, Workshop List,
   Grant List and Grant Details.

   The class is repeated deliberately.  It is the only way to out-specify the
   longest of those section rules without naming each one; drop the repeat and
   the labels go straight back on screen.  This block also has to stay below
   every section rule in the file. - 9/18/2026
   --------------------------------------------------------------------------- */
html[data-color-theme="dark"] .rgMasterTable th.rgHeader.rad_grid_header_text_screen_reader_only.rad_grid_header_text_screen_reader_only,
html[data-color-theme="dark"] .rgMasterTable th.rgHeader.rad_grid_header_text_screen_reader_only.rad_grid_header_text_screen_reader_only a {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}


/* =========================================================================
   DISTRICT PROFILE - shared
   -------------------------------------------------------------------------
   First page of this section, so this is where the wrapper convention starts:
   .dp-page on the page, .dp-grid on a results grid, matching .acc- / .ast- /
   .hd- / .ws- before it.

   This section did not follow the usual starting point.  Every Telerik control
   on District Profile List carried Skin="Bootstrap" hardcoded in the markup -
   sixteen of them - so the page stayed fully light no matter what the theme
   said.  Those are now assigned from WebsiteTelerikSkin in the code-behind, the
   four controls inside the rgFilters templates from ItemDataBound because
   Page_Load cannot reach into a template.  Check the other pages in this folder
   for the same markup skins before converting them.
   ========================================================================= */

    /* ---- Tab strip ---------------------------------------------------------
       Glow's tab strip is already dark and perfectly legible on its own:
       #5a6971 -> #3c474e on the strip, #71828b -> #7e8f99 on the selected tab,
       white text.  Read out of the shipped skin rather than guessed -
       Telerik.Web.UI.Skins.dll -> Telerik.Web.UI.Skins.Glow.TabStrip.Glow.css.

       Two things are worth changing anyway.  Glow's slate is bluish where the
       rest of this theme is neutral grey, the same mismatch the RadListBox
       block above corrects.  And Glow paints the selected tab LIGHTER than the
       strip, so it reads as a raised pill - the opposite of the light design,
       where the selected tab is the same white as the panel underneath and the
       two read as one surface.  Below, the selected tab takes the same #23262C
       the .details_table panel under it takes, which restores that. */
    html[data-color-theme="dark"] .dp-page .RadTabStrip_Glow .rtsLevel1 {
        background: #2A2F36 !important;
        background-image: none !important;
        border-radius: 3px 3px 0 0;
    }

    html[data-color-theme="dark"] .dp-page .RadTabStrip_Glow .rtsLevel1 .rtsLink {
        color: var(--odie-body-color) !important;
        border-left-color: var(--odie-border) !important;
        border-right-color: var(--odie-border) !important;
        text-shadow: none !important;
    }

        html[data-color-theme="dark"] .dp-page .RadTabStrip_Glow .rtsLevel1 .rtsLink:hover {
            background: #323840 !important;
            background-image: none !important;
            color: var(--odie-body-color) !important;
        }

        html[data-color-theme="dark"] .dp-page .RadTabStrip_Glow .rtsLevel1 .rtsSelected,
        html[data-color-theme="dark"] .dp-page .RadTabStrip_Glow .rtsLevel1 .rtsSelected:hover {
            background: #23262C !important;
            background-image: none !important;
            color: var(--odie-body-color) !important;
            box-shadow: none !important;
        }

    /* ---- Native text fields ------------------------------------------------
       txtSearchName on the Save Search tab and txtTextBoxFilter inside a filter
       row are plain asp:TextBoxes with no class.  color-scheme: dark alone would
       leave them on the browser's own grey, which does not match the Telerik
       inputs sitting beside them in the same row. */
    /* The two :not()s keep this off Telerik's own text inputs, which are
       input[type="text"] like any other and would otherwise be caught.

       The combo box is the one that shows it plainly.  Glow puts the border and
       the fill on the wrapping cell - .rcbInputCell is border-color #35434b,
       background #1c262c - and gives .rcbInput itself nothing but a font-size.
       Add a border to the input and you get a second line drawn just inside the
       cell's own border, with a slightly different fill between them.

       RadNumericTextBox and RadDatePicker are less obvious but still wrong: for
       those the border IS on the input (.riTextBox), so this rule quietly
       replaced Glow's #35434b / #1c262c with values a shade off.

       Each :not() holds a single attribute selector, which is Selectors 3.  A
       compound selector inside :not() is Selectors 4 and would invalidate the
       whole rule. - 9/18/2026 */
    html[data-color-theme="dark"] .dp-page input[type="text"]:not([class*="rcbInput"]):not([class*="riTextBox"]) {
        color: #E7E9ED;
        background: #1F242A;
        border-color: #4A535F;
    }

    /* ---- Save button -------------------------------------------------------
       "Add Profile" and "Update Profile" are the same .btn.btn-light, so this is
       scoped to .dp-page rather than copied per page.  btn-light is a near-white
       fill in both themes - it does not resolve through a token - so it has to be
       restated here. */
    html[data-color-theme="dark"] .dp-page .submit_button.btn-light {
        color: var(--odie-link) !important;
        background: #30363F !important;
        border-color: #4A535F !important;
    }

        html[data-color-theme="dark"] .dp-page .submit_button.btn-light:hover,
        html[data-color-theme="dark"] .dp-page .submit_button.btn-light:focus {
            color: var(--odie-link-hover) !important;
            background: #383F49 !important;
            border-color: #616B78 !important;
        }

/* =========================================================================
   DISTRICT PROFILE LIST
   -------------------------------------------------------------------------
   Two grids, and they want opposite treatment.

   rgFilters is not a results grid - it is a form.  Its rows are laid out with
   .rad_grid_item_style_district_profile, which is background transparent and
   border 0 in the light sheet, so the filter controls float on the panel with
   no table showing.  It gets .dp-filters-grid rather than .dp-grid precisely so
   the row fills below cannot reach it, and only the skin's own chrome is
   cleared.

   rgProfile is the results grid and gets the standard block.
   ========================================================================= */

    html[data-color-theme="dark"] .dp-page .dp-filters-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .dp-page .dp-filters-grid.RadGrid_Glow .rgMasterTable {
        background: transparent !important;
        color: var(--odie-body-color) !important;
        border: 0 !important;
    }

    /* ---- Results grid ------------------------------------------------------ */
    html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        /* The :not() carve-outs are load-bearing, not caution.  rgProfile_ItemDataBound
           paints the AQuESTT Classification cell per rating - white on #27B899,
           #F19B1F, #D15627, #C03A2B or #9ea0a1 - through ForeColor/BackColor, which
           land as an inline style or a bgcolor attribute depending on
           controlRenderingCompatibilityVersion.  An !important row fill outranks an
           inline style, so without these the ratings would all flatten to charcoal.
           Both spellings are excluded because either can be the one that renders.
           The five badge colours are saturated enough to hold up on a dark row, so
           they are left exactly as they are. */
        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgRow > td:not([style*="background" i]):not([bgcolor]) {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgAltRow > td:not([style*="background" i]):not([bgcolor]) {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* An empty result is a real state here - a filter combination can easily
           match nothing - so the skin's light panel would otherwise sit in the
           middle of the dark grid. */
        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .dp-page .dp-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }


/* =========================================================================
   DISTRICT PROFILE DETAILS
   -------------------------------------------------------------------------
   DistrictProfileDetails.aspx adds .district-profile-details alongside .dp-page
   on divContents.  rgElements - one grid per category card, inside the
   rptCategories template - had Skin="Bootstrap" in the markup and is now set
   from rptCategories_ItemDataBound, which is the only place that can reach it.

   Not fixed here, and not fixable from a stylesheet: divMap holds a Google Maps
   iframe built in DisplayEntityInformation.  It is cross-origin, so it renders
   light whatever this file says, the same way the Square card form does on
   Registration Online Payment.  Google's embed API has no dark parameter for
   the plain place embed, so leaving it light is the honest outcome rather than
   a workaround.
   ========================================================================= */

    /* ---- Stored HTML -------------------------------------------------------
       Two places render HTML that came out of the database rather than out of
       this page: a TextArea element renders its RadEditor content into
       lblResponse, and the history card renders rows of [tbl-pf-ProfileHistory]
       which include editor content captured at save time.

       Going forward both are clean - DistrictProfileEdit.aspx.vb:617 reads the
       editor once through StripDarkThemeInlineStyles and uses that local for the
       response and the history row alike.  This is only for what is already
       stored.

       Modelled on .memo_data, not on .ws-stored-html, and the difference matters
       on this page.  .ws-stored-html forces a colour onto every descendant;
       here that would repaint the AQuESTT Classification badge, which
       rgElements_ItemDataBound gives inline white on one of five fills.  The
       :not([style*="background" i]) carve-out is exactly what protects it - an
       element that sets its own background keeps its own text colour. */
    html[data-color-theme="dark"] .dp-stored-html [style*="color:" i]:not([style*="background" i]):not(a) {
        color: inherit !important;
    }

    html[data-color-theme="dark"] .dp-stored-html a,
    html[data-color-theme="dark"] .dp-stored-html a [style*="color:" i] {
        color: var(--odie-link) !important;
    }

    /* The <hr /> GetHistory puts between entries. */
    html[data-color-theme="dark"] .dp-stored-html hr {
        border-color: var(--odie-border);
        opacity: 1;
    }

    /* ---- Collapse chevron --------------------------------------------------
       Same #666 inline chevron the .acc-page rule above covers, matched the same
       way - on the attribute rather than the id. */
    html[data-color-theme="dark"] .dp-page [data-collapse-toggle] {
        color: var(--odie-muted) !important;
    }

    /* ---- Category element grids --------------------------------------------
       Deliberately flat rather than banded.  The page's own <style> block zeroes
       the row borders and the grid border, so in light mode these rows are white
       on a white card and the grid reads as a plain list, not a table.  Rows are
       transparent here so the card charcoal shows through and that reading
       survives.

       Colour is set on the td and NOT on its descendants, which is what lets the
       AQuESTT badge keep its inline white - an inline style beats an inherited
       value, but it would lose to an !important rule aimed at the span itself.
       That is also why this grid needs no [style]/[bgcolor] carve-out the way
       .dp-grid on the list page does: there the colours land on the cell, here
       they land on a label inside it. */
    html[data-color-theme="dark"] .dp-page .dp-elements-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .dp-page .dp-elements-grid.RadGrid_Glow .rgMasterTable {
        background: transparent !important;
        color: var(--odie-body-color) !important;
        border: 0 !important;
    }

        html[data-color-theme="dark"] .dp-page .dp-elements-grid.RadGrid_Glow .rgRow > td,
        html[data-color-theme="dark"] .dp-page .dp-elements-grid.RadGrid_Glow .rgAltRow > td {
            background: transparent !important;
            color: var(--odie-body-color) !important;
        }

        /* A category with no elements is a real state - the profile year can be
           newer than the category - and Glow's empty panel is light. */
        html[data-color-theme="dark"] .dp-page .dp-elements-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .dp-page .dp-elements-grid.RadGrid_Glow .rgNoRecords td {
            background: transparent !important;
            color: var(--odie-muted) !important;
            border: 0 !important;
        }


/* =========================================================================
   DISTRICT PROFILE EDIT
   -------------------------------------------------------------------------
   DistrictProfileEdit.aspx adds .district-profile-edit alongside .dp-page.  Its
   rgElements is the same control as the one on Details and takes the same
   .dp-elements-grid, so the block above covers the grid itself and only the
   editing controls inside it need anything here.

   Four markup skins removed: rgElements (set from rptCategories_ItemDataBound)
   plus rntbRadNumericTextBoxElement, radEditorElement and rcbRadComboBoxElement,
   all three set from rgElements_ItemDataBound because they live in the grid's
   own template.

   The RadEditor needed nothing beyond the skin.  It already carries
   OnClientLoad="RadEditorOnClientLoad", and the save path at
   DistrictProfileEdit.aspx.vb:617 already reads the editor once through
   StripDarkThemeInlineStyles and uses that one local for the response, the
   comparison and the history row alike.
   ========================================================================= */

    /* ---- The three NEP / clear icon buttons --------------------------------
       btnNep, btnNepRadioButtonList and btnClearRadioButtonList are the only
       Telerik controls on this page that never had a Skin at all, so they fall
       through to the Default skin - and Default's button is
       linear-gradient(white, #e6e6e6) with a #b3b3b3 border, read out of
       Telerik.Web.UI.dll -> Telerik.Web.UI.Skins.DefaultLite.Button.Default.css.
       Three white chips on a dark card.

       Recoloured here rather than given WebsiteTelerikSkin, deliberately: they
       have no Text and only a background image, so switching their skin would
       change how they look in LIGHT mode too, for no gain.  This way light mode
       is untouched. */
    html[data-color-theme="dark"] .dp-page .RadButton_Default.rbButton {
        color: var(--odie-body-color) !important;
        border-color: #4A535F !important;
        background-color: #30363F !important;
        background-image: linear-gradient(#3A414B, #30363F) !important;
    }

        html[data-color-theme="dark"] .dp-page .RadButton_Default.rbButton:hover,
        html[data-color-theme="dark"] .dp-page .RadButton_Default.rbButton.rbHovered {
            color: var(--odie-body-color) !important;
            border-color: #616B78 !important;
            background-color: #383F49 !important;
            background-image: linear-gradient(#434B56, #383F49) !important;
        }

    /* ---- Check box and radio labels ----------------------------------------
       .data-sm carries the element's answer text next to a native control.
       Scoped to .dp-page: Edit and Element Manage both render these - the two
       pages share the same block of answer controls, one down the elements of a
       profile and the other across the profiles of an element. */
    html[data-color-theme="dark"] .dp-page .data-sm {
        color: #B7BEC8;
    }


/* =========================================================================
   DISTRICT PROFILE DESIGN
   -------------------------------------------------------------------------
   The lightest page in the section.  No Telerik controls at all, so no skins
   to chase, and no <style> block.  Two nested repeaters of plain labels, and
   the only colour on it that dark mode does not already handle is the rule
   line under each category heading.

   .title_icons_style_link on the Edit Category / Add Element links is already
   covered by the global block near the top of this file, and the possibility
   list lblPossibilities builds is italics and parentheses with no colour.
   ========================================================================= */

    /* .page-section-line is border: 0 solid #d9d9d9 with a 1px bottom in the
       light sheet - a pale rule that reads as a bright line on a dark card.

       Scoped to .dp-page rather than made global on purpose: a grep of every
       .aspx and .ascx in the repo returns exactly one file using this class,
       and it is this page.  A global rule would look like it was carrying
       weight it is not. */
    html[data-color-theme="dark"] .dp-page .page-section-line {
        border-color: var(--odie-border-light);
    }


/* =========================================================================
   REPAIR TICKET DETAILS
   -------------------------------------------------------------------------
   First page of the Repair section, so the wrapper convention starts here:
   .rp-page on the page, alongside .acc- / .ast- / .hd- / .ws- / .dp- before it.

   rgHistory already takes WebsiteTelerikSkin, which is what makes the rest of
   this work - see the memo rail note below.

   Neither RepairTicketDetails.aspx nor its code-behind carries a BOM, unlike
   most of the repo.  Worth knowing before editing either one.
   ========================================================================= */

    /* ---- The memo rail -----------------------------------------------------
       This page has a SECOND <style> block, halfway down the body, that sets

           .RadGrid_Bootstrap { background-color: #cfd9ea !important }

       plus the same on .rgAltRow > td.  That is the blue-grey rail the memo
       cards sit on, and it is doing real work in light mode, so it stays.

       It needs no change at all, for the reason the Work Summary block above
       spells out: it is keyed to the Bootstrap skin, rgHistory follows
       WebsiteTelerikSkin, so under Glow the selector simply stops matching and
       #cfd9ea never reaches dark mode.  Giving it a .RadGrid_Glow twin - the
       usual fix for skin-name coupling - would be exactly wrong here.

       What is left is supplying the dark value, which is what this does.
       #181A1F matches Work Summary, TicketManage and TicketDetails, so all four
       memo rails in the app agree.

       Scoped to .rp-page rather than to .memo_radgrid generally, for the same
       reason Work Summary is scoped to .work-summary: EntityDashboard's memo
       grid wants the opposite treatment and an unscoped rule would beat it. */
    html[data-color-theme="dark"] .rp-page .memo_radgrid,
    html[data-color-theme="dark"] .rp-page .memo_radgrid .rgMasterTable,
    html[data-color-theme="dark"] .rp-page .memo_radgrid .rgRow > td,
    html[data-color-theme="dark"] .rp-page .memo_radgrid .rgAltRow > td {
        background-color: #181A1F !important;
    }

    /* ---- Repair notes modal ------------------------------------------------
       The hook is .rp-modal on the modal itself, NOT .rp-page.  divContents
       closes at line 364 and the modal opens at 369, so it is a sibling of the
       page wrapper and out of its reach entirely - the same trap the .acc-modal
       block above documents.  Shape copied from there. */
    html[data-color-theme="dark"] .rp-modal .modal-content {
        color: var(--odie-body-color);
        background: #23262C;
        border-color: #454C56;
    }

        html[data-color-theme="dark"] .rp-modal .modal-header,
        html[data-color-theme="dark"] .rp-modal .modal-footer {
            border-color: #3D444E;
        }

        /* Bootstrap's close button is a dark glyph drawn for a light surface. */
        html[data-color-theme="dark"] .rp-modal .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
        }


/* =========================================================================
   REPAIR TICKET UPDATE
   -------------------------------------------------------------------------
   The editing twin of Repair Ticket Details, and it shares that page's memo
   rail and repair notes modal - both covered by the .rp-page and .rp-modal
   rules above, which is why there is no second copy of either here.

   Fourteen Telerik controls already take WebsiteTelerikSkin.  The one that did
   not was lpParts, whose Skin="Silk" is now assigned in the code-behind.

   The RadEditor was already correct: reMemo carries RadEditorOnClientLoad, and
   its single save site wraps reMemo.Content in StripDarkThemeInlineStyles.

   Worth knowing how much of this page lives OUTSIDE divContents, which closes
   at line 712.  divAccessoriesCheckCard, the RadAjaxManager and the modal are
   all siblings of it.  The accessories card needs nothing - it is a plain .card
   with text and a .data-link, both handled globally, and it only ever renders
   with divContents hidden - but a page-scoped rule would not reach it if it
   ever did.  Check before scoping anything else to .rp-page on this page.
   ========================================================================= */

    /* ---- Billable time validation messages ---------------------------------
       No rule here, and the reason is worth recording because the page looks
       like it needs one.

       lblBillableHoursError and lblBillableMinutesError set ForeColor="#FF0000"
       rather than the CssClass="error" every other validator on the page uses,
       so the global .error rule cannot reach them.  Pure red on the card
       measures 3.79:1, which fails AA.

       They are nonetheless already handled, by the validator rule near the top
       of this file - span[style*="color:Red"] -> #FF7B7B.  That works because
       ASP.NET normalises ForeColor="#FF0000" to the KNOWN System.Drawing
       Color.Red, and ColorTranslator.ToHtml then writes it out by name as
       style="color:Red", not as the hex the markup was written with.  Verified
       against System.Drawing rather than assumed.

       So the same rule covers three different-looking cases: a validator left
       on its default ForeColor, an asp:Label given Red by name, and one given
       #FF0000 as hex.  A [style*="#FF0000"] selector would match none of them. */


/* =========================================================================
   REPAIR TICKET LIST
   -------------------------------------------------------------------------
   The plainest page in the section and the first results grid in it, so this
   is where .rp-grid is introduced.

   Nothing else needed changing.  All twelve Telerik controls - six combo
   boxes, two date pickers, two buttons, the loading panel and the grid -
   already take WebsiteTelerikSkin, there is no <style> block, and the
   code-behind carries no colour of any kind.

   Three of the columns are filled by helper functions in the code-behind
   (AssetName, Requestor, Technician) that build bare <a href> with no class,
   so they are reached by the row link rule below rather than needing one of
   their own.

   Noted in passing, not acted on: divDateCreatedError is declared in the
   markup at line 75 and never referenced anywhere in the code-behind.  It is
   a dead control, most likely copied in from another list page.

   SALES INVOICE LIST shares this block rather than having one of its own.  It
   is the same shape - a filter card over a results grid - and its four Telerik
   controls all take WebsiteTelerikSkin already, so .rp-page plus .rp-grid was
   the whole change there.  It did add the filter row rules at the end of this
   block, being the first grid in the section with AllowFilteringByColumn.

   PART LIST shares it too, and added the edit row rules.  Its grid is the first
   in the section with EditMode="InPlace" - a row becomes a form where it sits -
   and the four RadNumericTextBoxes that appear when it does had Skin="Silk"
   hardcoded in their EditItemTemplates.  They are now set from
   rgPartList_ItemDataBound, which is the only place that can reach a control
   that does not exist until a row is put into edit mode.

   PART DETAILS shares it as well.  Its rgTicketList is read-only and both its
   Telerik controls were already skinned, so .rp-page plus .rp-grid covered the
   grid.  Its one real addition was .rp-stored-html on lblOrderingComments -
   see the note in the SALES INVOICE DETAILS block, with one difference worth
   knowing: the reOrderingComments editors on Part Add and Part Edit carry
   StripFormattingOptions="None", not "AllExceptNewLines", so pasted formatting
   is kept rather than stripped and this field is the likelier of the two to
   hold inline colour.
   ========================================================================= */

    html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* A search that matches nothing is an ordinary outcome on this page -
           the form has seven filters - so the skin's light empty panel would
           show often. */
        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

        /* Column filter row.  Added for Sales Invoice List, which is the first
           grid in the section with AllowFilteringByColumn - Repair Ticket List
           filters through the form above it instead.  It lives in the shared
           .rp-grid block rather than in a page block so the next filtered grid
           in the section inherits it.  Shape copied from the .hd-page rules. */
        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgFilterRow > td {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgFilterRow input[type="text"],
            html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgFilterBox {
                background: #181A1F !important;
                color: var(--odie-body-color) !important;
                border: 1px solid var(--odie-border) !important;
                box-shadow: none !important;
            }

        /* In-place edit row.  Added for Part List, whose MasterTableView has
           EditMode="InPlace" and a GridEditCommandColumn, so a row turns into a
           form in situ.  Lifted a shade off .rgRow so the row being edited reads
           as active rather than just as another stripe.

           Part List is the only grid in the section that edits this way - Part
           Details' rgTicketList is read-only - so this sits in the shared block
           on the expectation that another editable grid turns up, not because
           one already has. */
        html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgEditRow > td {
            background: #2F343C !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .rp-page .rp-grid.RadGrid_Glow .rgEditRow > td a {
                color: var(--odie-link) !important;
            }


/* =========================================================================
   SALES INVOICE DETAILS
   -------------------------------------------------------------------------
   No Telerik controls on this page at all - the parts table is a legacy
   asp:GridView, whose .line / .linealt rows and .gridview-header are all
   handled globally near the top of this file.  .data-att is weight and size
   only in the light sheet and .list is padding only, so neither needs a rule.

   Everything the code-behind builds uses class='data-link', which resolves
   through --odie-link already.

   That leaves one real thing: .rp-stored-html.
   ========================================================================= */

    /* ---- Stored editor content ---------------------------------------------
       lblDescription and lblPrivateComments look like plain labels, but both
       fields are RadEditor-backed on Add and Edit (reDescription and
       rePrivateComments), so what lands here is stored HTML that can carry its
       own inline colours.

       Only legacy rows are at risk.  Every RadEditor save path in repair/ -
       all nine of them, across seven files - already wraps .Content in
       StripDarkThemeInlineStyles, and all four editors on Add and Edit carry
       StripFormattingOptions="AllExceptNewLines", which strips most formatting
       at paste time as well.

       Forced colour rather than the .memo_data "color: inherit" model that the
       repair memos use.  Nothing inside a description sets its own background,
       so there is no badge-shaped thing for a carve-out to protect, and the
       inherit form is the one that has already been seen to lose - stored HTML
       can put a colour on a span inside an anchor, which is why the anchor rule
       below names "a *" and not just "a". */
    html[data-color-theme="dark"] .rp-stored-html,
    html[data-color-theme="dark"] .rp-stored-html * {
        color: var(--odie-body-color) !important;
    }

    html[data-color-theme="dark"] .rp-stored-html a,
    html[data-color-theme="dark"] .rp-stored-html a * {
        color: var(--odie-link) !important;
    }


/* =========================================================================
   SALES INVOICE ADD
   -------------------------------------------------------------------------
   Almost nothing to do.  All nine Telerik controls take WebsiteTelerikSkin,
   including both RadEditors, and both carry RadEditorOnClientLoad plus
   StripFormattingOptions="AllExceptNewLines"; the save path at
   SalesInvoiceAdd.aspx.vb:639 wraps each .Content in
   StripDarkThemeInlineStyles.  No <style> block, no inline colour anywhere.

   The parts GridView is the same legacy control as on Details - .line /
   .linealt / .gridview-header, all handled globally.

   "Add Sales Invoice" needed no page rule either: this pass promoted
   .submit_button.btn-light to a global rule near the top of this file, rather
   than adding an eighth identical page-scoped copy of it.

   divPartError is filled with odie.utilities.ErrorMessage, which builds an
   .alert.bg-info.system-notification - already covered by the shared system
   notification block.
   ========================================================================= */

    /* ---- Add Part ----------------------------------------------------------
       btnAddPart is a plain asp:Button, so it renders as <input type="submit">
       and falls to the user agent's own button chrome.  color-scheme: dark makes
       that legible rather than broken, but it is the only control in the form
       that is not Telerik-skinned, and next to four combo boxes and a date
       picker the difference shows.

       Values reused from the rgFileAttachments edit-row buttons above rather
       than invented, so the two neutral buttons in the app agree. */
    html[data-color-theme="dark"] .rp-page input[type="submit"] {
        background-color: rgba(255, 255, 255, 0.04) !important;
        color: #E7E9ED !important;
        border: 1px solid var(--odie-border) !important;
        box-shadow: none !important;
    }

        html[data-color-theme="dark"] .rp-page input[type="submit"]:hover,
        html[data-color-theme="dark"] .rp-page input[type="submit"]:focus {
            background-color: rgba(255, 255, 255, 0.08) !important;
            color: #FFFFFF !important;
            border-color: var(--odie-link) !important;
        }


/* =========================================================================
   SALES INVOICE EDIT
   -------------------------------------------------------------------------
   Add's editing twin, and it shares most of that block - both RadEditors,
   btnAddPart, the parts GridView and the save button all behave the same and
   are already covered.

   All five Telerik controls take WebsiteTelerikSkin.  No <style> block, no
   inline colour, no markup skins.

   The structural difference is that this page carries THREE top-level cards,
   not one: divContents closes at line 173, and divChangeRequestor and
   divChangeTechnician follow it as siblings.  All three now carry .rp-page.
   That is deliberate - the wrapper is on each top-level block rather than on
   one outer container, because there is no outer container to put it on, and
   the two change cards hold real controls that need reaching.
   ========================================================================= */

    /* ---- Parts grid edit row -----------------------------------------------
       Putting a part row into edit mode swaps two cells for asp:TextBoxes
       (txtQuantity, txtUnitPrice).  They are plain inputs with no class, sitting
       on a .line / .linealt row, so without this they keep the user agent's own
       field colour inside a styled table. */
    /* The two :not()s are load-bearing.  A Telerik text input is an
       input[type="text"] like any other, so without them this rule reaches
       inside RadComboBox, RadNumericTextBox and RadDatePicker and fights their
       skin - see the note on the .dp-page copy of this rule for what that
       looks like and why it is worse for the combo box than the others.

       Each :not() holds a single attribute selector, which is Selectors 3 and
       parses everywhere.  Do not be tempted to compress them into something
       like :not(input[class*="rcb"]) - a compound selector inside :not() is
       Selectors 4, and an unparseable selector invalidates the whole rule. */
    html[data-color-theme="dark"] .rp-page input[type="text"]:not([class*="rcbInput"]):not([class*="riTextBox"]) {
        color: #E7E9ED;
        background: #1F242A;
        border: 1px solid #4A535F;
    }

    /* ---- Change Requestor / Change Technician ------------------------------
       Both cards pick their values with asp:DropDownList, which renders a
       native <select>.  color-scheme: dark gives those the browser's dark
       chrome, which is legible but is not the recessed fill every other field
       in this section uses.  Same values as the .ws-page select rule. */
    html[data-color-theme="dark"] .rp-page select {
        background-color: #181A1F;
        color: var(--odie-body-color);
        border: 1px solid var(--odie-border);
    }


/* =========================================================================
   PART ADD / PART EDIT
   -------------------------------------------------------------------------
   No page rules at all for either - recorded here so the absence is deliberate
   rather than an oversight.

   The two pages are the same form.  All six Telerik controls on each take
   WebsiteTelerikSkin, including the reOrderingComments RadEditor, which also
   carries RadEditorOnClientLoad; both save paths wrap .Content in
   StripDarkThemeInlineStyles (PartAdd.aspx.vb:111, PartEdit.aspx.vb:197).
   Neither has a <style> block, inline colour or a markup skin.

   Everything else is already covered by rules written earlier in this section
   or globally: txtPartName by the .rp-page input[type="text"] rule, and the
   asp:CheckBoxes are bare inputs whose captions sit in .label cells, so
   colour-scheme: dark is the whole story for them.

   Their save buttons differ and neither needs a rule: Add uses
   "btn btn-light submit_button" and is covered by the global rule near the top
   of this file, while Edit's lnkUpdatePart is a plain .data-link, which already
   resolves through --odie-link.  Worth knowing the two pages disagree - it is
   an inconsistency in the markup, not something dark mode introduced.
   ========================================================================= */


/* =========================================================================
   REPAIR DASHBOARD
   -------------------------------------------------------------------------
   Nine RadHtmlCharts, and none of them is fixed from this file.  The whole
   job is in RepairDashboard.aspx.vb -> SetChartAppearance.  Recorded here
   because a dashboard with no CSS block looks like one that was missed.

   Why it cannot be done here: a RadHtmlChart gets almost nothing from its
   skin.  Telerik.Web.UI.Skins.dll ships HtmlChart.Glow.css at 310 bytes and
   HtmlChart.Bootstrap.css at 300, and both style only the tooltip - the
   Black skin's is 305 and does the same.  Axis lines, tick labels, gridlines,
   titles and legends all come from Kendo's own defaults, drawn dark for a
   white page.  Taking Skin="Bootstrap" off the nine charts was necessary but
   would have changed almost nothing on its own.

   It is also not a job for a blanket "svg text { fill: ... }" override.  CSS
   does beat an SVG presentation attribute, so such a rule would work - but it
   would flatten the distinction the code-behind draws between muted axis
   labels and brighter titles, and it would repaint the series value labels
   that sit on data-coloured columns.

   The .rp-page and .rp-grid classes still apply here: rgTicketList is an
   ordinary results grid and ralpTicket now takes WebsiteTelerikSkin with
   everything else.

   Noted, not acted on: the nine charts all carry CssClass="RepairDashboardPadding",
   which is defined nowhere.  Its <style> block at the top of the page is
   commented out with <%-- --%>, so the class has been dead for as long as that
   comment has been there.
   ========================================================================= */


/* =========================================================================
   REPAIR TICKET CHECK IN
   -------------------------------------------------------------------------
   The QR scanner page.  Both Telerik controls already take WebsiteTelerikSkin.

   rgCheckedInTickets is not inside divContents - divContents closes at line 56
   and the grid follows it - so it is wrapped in a plain .rp-page div rather
   than given the class directly.  That matters: the grid rules in this file are
   .rp-page .rp-grid, a descendant selector, so putting both classes on the grid
   itself would have matched nothing.

   Noted, not acted on: the page's <style> block defines .alert, .alert-info and
   .alert-success with the old Bootstrap 3 palette.  Nothing on the page ever
   emits those classes - CheckInTicket returns <font> tags, not alert divs - so
   all three are dead.  The .alert rule is the one to watch if that changes,
   because it would also catch a .system-notification card.
   ========================================================================= */

    /* ---- Scanner result ----------------------------------------------------
       CheckInTicket writes its result straight into #divScannedResult through
       innerHTML, and returns either

           <font class="error">...</font>        - covered by the global .error rule
           <font color="Green">...Checked In!</font>

       "Green" is #008000, which measures 2.95:1 on the card and fails AA.  It is
       a colour ATTRIBUTE rather than an inline style, so any CSS rule beats it -
       no !important needed.

       --sev-ok-text is the palette's existing success text colour and measures
       9.73:1 here, so this uses that rather than inventing another green.

       Scoped to .rp-page and not to #divScannedResult, because the standalone
       check-in page returns the same <font color="Green"> from its own copy of
       this method. */
    html[data-color-theme="dark"] .rp-page font[color] {
        color: var(--sev-ok-text);
    }

    /* ---- RepairTicketCheckInsStandalone -------------------------------------
       Deliberately gets nothing from this file, and cannot.

       It is the only page in the section with no MasterPageFile.  It inherits
       System.Web.UI.Page rather than odie.page.Base, builds its own <html>, and
       links no stylesheet at all - not esu10_2026.css, not this file.  Nothing
       ever stamps data-color-theme on its html element, so every rule in here
       misses it by definition.  Adding .rp-page to it would do nothing.

       It is reachable: RepairTicketCheckIn.aspx links to it from the icon bar as
       "Standalone", so it is the kiosk version of the scanner.

       It did have one real problem, fixed in its code-behind rather than here.
       Its grid and loading panel followed WebsiteTelerikSkin, and that function
       reads CurrentUser out of Session rather than from the page - so it happily
       returned Glow for anyone whose saved master page is esu10_dark_2026, and
       the grid rendered in dark Telerik chrome on a white, unstyled page.  Both
       controls are now pinned to Bootstrap.

       Making this page genuinely theme-aware would mean giving it the stylesheet
       links and the html attribute - a change to what the page IS, not a dark
       mode tweak, so it is not done here. */


/* =========================================================================
   REPAIR TICKET ADD
   -------------------------------------------------------------------------
   All eight Telerik controls take WebsiteTelerikSkin, reMemo carries
   RadEditorOnClientLoad and its save path wraps .Content in
   StripDarkThemeInlineStyles at RepairTicketAdd.aspx.vb:719.

   divContents closes at line 303 and divConfirmation - the "ticket created"
   card - follows it as a sibling, so both carry .rp-page.

   Noted, not acted on: the page's <style> block holds one rule,
   ".Silk .reEmptyMessage { color: red }".  Nothing on this page uses the Silk
   skin, so it has never matched anything.
   ========================================================================= */

    /* ---- RadMultiColumnComboBox (rcbAsset) ---------------------------------
       This control is unlike every other Telerik control in the app, and the
       difference is worth writing down.

       It is Kendo-based and ships NO skin CSS at all - not in
       Telerik.Web.UI.Skins.dll and not in Telerik.Web.UI.dll.  The Glow and
       Bootstrap ComboBox skins contain zero .k- selectors; they style the
       classic .rcb* RadComboBox, which is a different control.  The only CSS it
       has is Kendo's common layout files, and every colour declaration in all
       23 of those is inherit, transparent or currentColor - not one concrete
       value.  Neither esu10_2026.css nor master.css defines a .k- selector, and
       no kendo theme stylesheet is referenced anywhere in the repo.

       So rcbAsset.Skin does almost nothing, and the control simply inherits.
       Inside the card that works in our favour.  The dropdown does not inherit
       from the card, though: Kendo appends its popup to <body>, which puts it
       outside .rp-page entirely - the same trap as the repair notes modal.
       Hence no wrapper on these two rules.

       These are deliberately conservative - a surface and a text colour, no
       !important, nothing touching hover or selection - because this is the one
       thing in the section I could not verify by reading the shipped CSS.  If
       the dropdown grid still reads light, it needs looking at with devtools
       open rather than more guessing from here.

       The same control is on four Assets pages (AssetAdd, AssetEdit,
       AssetEditOld, AssetList), which were converted before this was understood,
       so whatever proves true here applies there too. */
    html[data-color-theme="dark"] .k-animation-container .k-popup,
    html[data-color-theme="dark"] .k-animation-container .k-dropdowngrid {
        background-color: #23262C;
        color: var(--odie-body-color);
        border-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .k-animation-container .k-popup .k-table th,
        html[data-color-theme="dark"] .k-animation-container .k-popup .k-table td {
            background-color: transparent;
            color: var(--odie-body-color);
            border-color: var(--odie-border-light);
        }


/* =========================================================================
   REPAIR MEMO EDIT
   -------------------------------------------------------------------------
   No page rules.  All three Telerik controls take WebsiteTelerikSkin, reMemo
   carries RadEditorOnClientLoad, and the save path wraps .Content in
   StripDarkThemeInlineStyles at RepairMemoEdit.aspx.vb:211.  Both
   divContents.InnerHtml paths go through odie.utilities.ErrorMessage, so they
   render as .system-notification cards.

   Its two validators disagree with each other and neither needs a rule: rfvMemo
   carries CssClass="error", and valDateWorked carries nothing, so it falls back
   to BaseValidator's default ForeColor of Color.Red and is picked up by the
   span[style*="color:Red"] rule near the top of this file.
   ========================================================================= */


/* =========================================================================
   REPAIR REPORTS
   -------------------------------------------------------------------------
   The only page in the section with no Telerik controls at all.  Twenty-odd
   asp:DropDownLists, two asp:Calendars and an asp:Button, which means almost
   everything on it was already handled: the selects and the button by the
   .rp-page rules above, and every divXxxError by odie.utilities.ErrorMessage,
   which builds a .system-notification card.

   The calendars are the exception, and they were the whole job.
   ========================================================================= */

    /* ---- asp:Calendar ------------------------------------------------------
       The code-behind assigns FIVE classes to each calendar, at lines 545-549
       and 557-561: .threecaltitle, .threecalheader, .threecalothermonth,
       .threecalday and .threecalselected.  Four of the five need work - the
       month row is #FFF8D9 cream and the other three are #FFFFFF, so without
       this the page shows two solid white grids on a dark card.

       These classes are used by exactly one file in the repo, this page's own
       code-behind, so they are scoped to .rp-page rather than made global.

       .threecalselected is the one deliberately left alone.  It is an opaque
       #FFE749 chip with #60513A text - a high-contrast selection marker that
       reads correctly on either background, and overriding it would only weaken
       the one affordance that says which day is picked.

       The rest of the threecal family in the light sheet (.threecal,
       .threecaltoday, .threecalevent, .threecalreg, .threecalonemonth) is not
       reachable from here - this page never assigns any of them. */
    html[data-color-theme="dark"] .rp-page .threecalday,
    html[data-color-theme="dark"] .rp-page .threecalothermonth,
    html[data-color-theme="dark"] .rp-page .threecalheader {
        background-color: #1F242A;
    }

    /* The month name and the < > navigation links. */
    html[data-color-theme="dark"] .rp-page .threecaltitle {
        background-color: #2A2F36;
        color: var(--odie-body-color);
        border-bottom-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .rp-page .threecaltitle a {
            color: var(--odie-link);
        }

    /* The Su Mo Tu ... row. */
    html[data-color-theme="dark"] .rp-page .threecalheader {
        color: var(--odie-muted);
    }

    html[data-color-theme="dark"] .rp-page .threecalday {
        color: var(--odie-body-color);
    }

        /* The day numbers are anchors, and ASP.NET gives them no class of their
           own, so they take the app's link colour rather than the cell's. */
        html[data-color-theme="dark"] .rp-page .threecalday a {
            color: var(--odie-body-color);
        }

    html[data-color-theme="dark"] .rp-page .threecalothermonth {
        color: var(--odie-muted);
    }

        html[data-color-theme="dark"] .rp-page .threecalothermonth a {
            color: var(--odie-muted);
        }

    /* Both calendars carry Style="border: solid 1px #60513A" inline in the
       markup.  That brown is part of the same retired palette the threecal
       classes come from; inline loses to !important. */
    html[data-color-theme="dark"] .rp-page [id$="calAfter"],
    html[data-color-theme="dark"] .rp-page [id$="calBefore"] {
        border-color: var(--odie-border) !important;
    }


/* =========================================================================
   CONTRACTS - shared
   -------------------------------------------------------------------------
   Eighth section, so the convention is unchanged: .ct-page on the page,
   .ct-grid on a results grid, alongside .acc- / .ast- / .dlv- / .dp- / .hd- /
   .rp- / .ws- before it.

   Two things to know before converting the rest of this folder.

   Three of its 36 .aspx files have no MasterPageFile and no UI at all -
   BillingExport, GrabTheContractFile and GrabTheTransactionFile are 100 to 114
   bytes of page directive with everything in the code-behind.  They emit files.
   There is nothing to theme and, unlike RepairTicketCheckInsStandalone, no
   control on them to be mis-skinned either.

   BOMs are mixed across the folder - 21 files have one, 15 do not - so check
   before editing rather than assuming either way.
   ========================================================================= */

    /* ---- Results grid ------------------------------------------------------ */
    html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgEditRow > td {
            background: #2F343C !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgFilterRow > td {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

            html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgFilterRow input[type="text"],
            html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgFilterBox {
                background: #181A1F !important;
                color: var(--odie-body-color) !important;
                border: 1px solid var(--odie-border) !important;
                box-shadow: none !important;
            }

        /* A contract search that matches nothing is an ordinary outcome - the
           filter card above the grid has six selectors on it. */
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .ct-page .ct-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }


/* =========================================================================
   CONTRACT LIST
   -------------------------------------------------------------------------
   No page-scoped rules.  All eight Telerik controls take WebsiteTelerikSkin,
   there is no <style> block and no inline colour anywhere.

   Its two pieces of server-built HTML are both already covered: litNoticeMessage
   goes through odie.utilities.NoticeMessage, which returns the same
   .alert.bg-info.system-notification card ErrorMessage does, and the
   ContractStatus column builds an <a class="data-link"> around an icon.
   ========================================================================= */


/* =========================================================================
   CONTRACT DETAILS / CONTRACT EDIT / CONTRACT ADD
   -------------------------------------------------------------------------
   The file attachments grid again - the same block accounts, assets and
   helpdesk all carry, copied from page to page over the years.  See the
   .acc-page notes above for the full reasoning; this is the fourth copy of it.

   All three pages carry it and all three got the same three markup changes, so
   the rules below are scoped to .ct-page rather than to any one page class and
   serve all of them.

   Edit and Add are the same form and needed nothing else: every Telerik control
   on each takes WebsiteTelerikSkin, reComments carries RadEditorOnClientLoad
   and is wrapped in StripDarkThemeInlineStyles on save (ContractEdit.aspx.vb:515,
   ContractAdd.aspx.vb:485), and both save buttons are the global
   .submit_button.btn-light.

   TRANSACTION ADD / DETAILS / EDIT are the same three pages again, carrying the
   same block, and took the same three markup changes.  Six pages in this folder
   have it; a grep for ".RadGrid_Bootstrap .RadAsyncUpload" finds all of them.

   The <style> blocks have drifted as they were copied.  Contract Edit and Add
   run to eight selectors; Contract Details has a ninth, hiding the bare label
   cell for _FileName as well as _Description; Transaction Add and Edit have a
   different ninth, .quantity-price-group, handled below.

   Two fixes, one of which is not a colour problem at all.

   rgFileAttachments already took WebsiteTelerikSkin, so in dark mode it renders
   Glow and BOTH .RadGrid_Bootstrap rules in the page's own <style> block were
   matching nothing.  One of those rules is a ":before" carrying content: - the
   "Select your file, then click the 'Upload File' button to upload:" line - so
   the instruction was not merely unstyled in dark mode, it was absent.  The page
   now names both skins, which is a no-op in light mode because every light
   tenant renders Bootstrap.

   rauFileAttachment also had Skin="Bootstrap" hardcoded and now follows the
   theme.  Worth knowing that this buys less than it looks: Glow ships an
   AsyncUpload skin of 19 bytes - body{color:inherit} - so the control's colour
   comes from the base Skins.Upload.css either way.  That is what the shared
   RadAsyncUpload block further up this file exists to correct, and it is
   unscoped, so it already covers this page.
   ========================================================================= */

    /* The dashed drop zone: #f5f5f5 on #5bc0de in the page's own block. */
    html[data-color-theme="dark"] .ct-page .RadGrid_Glow .RadAsyncUpload {
        background-color: #262A31;
        border-color: #4A8DA6;
    }

    /* The instruction banner is Bootstrap's "info" alert palette - #31708f on
       #d9edf7 with a #bce8f1 border - rebuilt against the dark card. */
    html[data-color-theme="dark"] .ct-page .RadGrid_Glow .ruInputs:before {
        color: #9FD5E8;
        background-color: #1C2C34;
        border-color: #2E4A56;
    }

    /* The grid's insert and cancel links are given these classes by the page's
       own JavaScript.  Both pin color:#333 with !important against a surface
       they do not set, so on the dark card they are near-invisible; only
       !important reaches past that.  These two are NOT skin-keyed, so unlike the
       rules above they have been live in dark mode all along. */
    html[data-color-theme="dark"] .ct-page .custom-insert-button,
    html[data-color-theme="dark"] .ct-page .custom-cancel-button {
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .ct-page .custom-insert-button:hover,
        html[data-color-theme="dark"] .ct-page .custom-cancel-button:hover {
            background-color: #333941 !important;
            border-color: var(--odie-border) !important;
            color: #F1F3F5 !important;
        }

    /* ---- Stored editor content ---------------------------------------------
       lblComments on Contract Details and Transaction Details looks like a plain
       label but renders reComments RadEditor content saved from the matching Add
       and Edit pages, so legacy rows can carry their own inline colours.

       Forced colour rather than the .memo_data "color: inherit" model, for the
       same reason as .rp-stored-html: nothing inside a comments field sets its
       own background, so there is no badge-shaped thing a carve-out would need
       to protect.  "a *" is there because stored HTML routinely puts the colour
       on a span inside the anchor rather than on the anchor.

       Only legacy rows are at risk - all four save paths already wrap .Content
       in StripDarkThemeInlineStyles. */
    html[data-color-theme="dark"] .ct-stored-html,
    html[data-color-theme="dark"] .ct-stored-html * {
        color: var(--odie-body-color) !important;
    }

    html[data-color-theme="dark"] .ct-stored-html a,
    html[data-color-theme="dark"] .ct-stored-html a * {
        color: var(--odie-link) !important;
    }

    /* ---- Quantity / price band ---------------------------------------------
       Transaction Add and Transaction Edit band a group of form rows with
       .quantity-price-group td { background-color: #F3F3F1 } in their own <style>
       blocks.  That one is NOT keyed to a skin, unlike the two attachment rules
       above it, so it has been painting a near-white stripe across the dark form
       all along rather than only since the grid became theme-aware. */
    html[data-color-theme="dark"] .ct-page .quantity-price-group td {
        background-color: #2A2F36;
    }


/* =========================================================================
   CONTRACT TYPE - List / Details / Add / Edit
   -------------------------------------------------------------------------
   Four pages, no Telerik skins in any markup, no editors, no generated HTML.
   Each one got the wrapper; ContractTypeList's rgContractType also got .ct-grid.

   Their <style> blocks split two ways.  List and Details carry the flag chips
   below; Add and Edit carry .service-contract-group, which is the same banded
   form group Transaction Add and Edit have under a different name.
   ========================================================================= */

    /* ---- Contract type flag chips ------------------------------------------
       .helpdesk-flag is the shape - a pill - and the four .flag-* classes are
       the colours, all from the pale Bootstrap alert palette: #155724 on
       #d4edda, #383d41 on #e2e3e5, #0c5460 on #d1ecf1, #856404 on #fff3cd.

       Same situation and same treatment as the shared status badges block
       above: a solid pastel reads as a badge on white, but on #23262C it is
       four bright blocks with the contrast running backwards.  These reuse the
       --sev-* tokens rather than inventing a palette, and take the 1px border
       that block explains - a 13% tint does not read as a chip without an edge,
       where a solid pastel does.

       Scoped to .ct-page rather than left global: .helpdesk-flag sounds shared
       but a grep finds it on these two pages only, both in this folder. */
    html[data-color-theme="dark"] .ct-page .flag-access-yes {
        color: var(--sev-ok-text);
        background-color: var(--sev-ok-bg);
        border: 1px solid var(--sev-ok-border);
    }

    html[data-color-theme="dark"] .ct-page .flag-access-no {
        color: var(--sev-grey-text);
        background-color: var(--sev-grey-bg);
        border: 1px solid var(--sev-grey-border);
    }

    html[data-color-theme="dark"] .ct-page .flag-billed {
        color: var(--sev-info-text);
        background-color: var(--sev-info-bg);
        border: 1px solid var(--sev-info-border);
    }

    html[data-color-theme="dark"] .ct-page .flag-minimum {
        color: var(--sev-warn-text);
        background-color: var(--sev-warn-bg);
        border: 1px solid var(--sev-warn-border);
    }

    /* ---- Banded form group -------------------------------------------------
       .service-contract-group td is #F3F3F1 in Add's and Edit's own <style>
       blocks - the same near-white band .quantity-price-group paints on the two
       Transaction pages, under a different class name.  Neither is skin-keyed,
       so both have been live in dark mode all along. */
    html[data-color-theme="dark"] .ct-page .service-contract-group td {
        background-color: #2A2F36;
    }


/* =========================================================================
   CONTRACT BUNDLE - List / Details / Add / Edit / Offering Add / Offering Edit
   -------------------------------------------------------------------------
   Six pages.  Five of them needed only the wrapper - no <style> block, no
   markup skins, every Telerik control already on WebsiteTelerikSkin, no colour
   in any code-behind.  ContractBundleList's rgContractBundle also takes .ct-grid.

   ContractBundleDetails is the exception and the whole of this block.  Its
   offerings list is not a grid at all: it is a hand-built component in the
   page's own <style> block, 23 selectors of flex rows, group headers, chips,
   action buttons and an empty state, every value of it a light one.  Nothing
   in it is keyed to a skin, so all of it has been live in dark mode.
   ========================================================================= */

    /* ---- Group header ------------------------------------------------------
       #f0f4f8 with a #d0d8e0 border and a 2px #286090 underline.  That blue is
       ODIE's solid brand blue and is the one value worth keeping recognisable,
       so it is lifted rather than replaced. */
    html[data-color-theme="dark"] .ct-page .offering-group-header {
        background-color: #1C2027;
        border-color: var(--odie-border);
        border-bottom-color: #4A8DA6;
    }

    html[data-color-theme="dark"] .ct-page .offering-group-title {
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .ct-page .offering-group-meta {
        color: var(--odie-muted);
    }

    /* ---- Rows -------------------------------------------------------------- */
    html[data-color-theme="dark"] .ct-page .offering-row {
        border-color: var(--odie-border-light);
    }

        /* #fafafa in the light block - a barely-there lift.  The dark equivalent
           has to go up, not down, to read as the same gesture. */
        html[data-color-theme="dark"] .ct-page .offering-row:hover {
            background-color: #2A2F36;
        }

    html[data-color-theme="dark"] .ct-page .offering-name,
    html[data-color-theme="dark"] .ct-page .offering-price-info {
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .ct-page .offering-description {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .ct-page .offering-notes,
    html[data-color-theme="dark"] .ct-page .offerings-empty {
        color: var(--odie-muted);
    }

    /* ---- Offering chips ----------------------------------------------------
       Same pale-alert palette and same treatment as the .flag-* chips on the
       Contract Type pages above - tint, light ink, and a 1px border to give the
       tint an edge.  Note the class names differ from that page's while three of
       the colours are identical: .flag-monthly here is .flag-billed there, and
       .flag-first-year here is .flag-minimum there. */
    html[data-color-theme="dark"] .ct-page .flag-member {
        color: var(--sev-ok-text);
        background-color: var(--sev-ok-bg);
        border: 1px solid var(--sev-ok-border);
    }

    html[data-color-theme="dark"] .ct-page .flag-non-member {
        color: var(--sev-grey-text);
        background-color: var(--sev-grey-bg);
        border: 1px solid var(--sev-grey-border);
    }

    html[data-color-theme="dark"] .ct-page .flag-first-year {
        color: var(--sev-warn-text);
        background-color: var(--sev-warn-bg);
        border: 1px solid var(--sev-warn-border);
    }

    html[data-color-theme="dark"] .ct-page .flag-monthly {
        color: var(--sev-info-text);
        background-color: var(--sev-info-bg);
        border: 1px solid var(--sev-info-border);
    }

    /* The only one of the nine chips in this folder with no --sev- equivalent:
       #5a3d8a on #f0e6ff, a purple.  Built from the two purples this file
       already uses - #C9A7F0 is the dark-mode purple ink the delivery and
       accounts blocks use for [style*="color:Purple"], and #7A5BD0 is the fill
       Registration Manage 2026 uses - rather than introducing a tenth colour. */
    html[data-color-theme="dark"] .ct-page .flag-radio {
        color: #C9A7F0;
        background-color: rgba(122, 91, 208, 0.16);
        border: 1px solid rgba(122, 91, 208, 0.36);
    }

    /* ---- Row action buttons ------------------------------------------------
       #333 on #fff with a #ccc border.  Same neutral treatment the Sales Invoice
       Add button and the rgFileAttachments edit row use, so the plain buttons in
       the app agree. */
    html[data-color-theme="dark"] .ct-page .btn-edit-offering,
    html[data-color-theme="dark"] .ct-page .btn-delete-offering {
        background-color: rgba(255, 255, 255, 0.04);
        color: #E7E9ED;
        border-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .ct-page .btn-edit-offering:hover {
            background-color: rgba(255, 255, 255, 0.08);
            color: #FFFFFF;
        }

        /* Delete keeps its danger hover - #721c24 on #f8d7da is the pale alert
           palette again, so it takes the --sev-crit tokens the status badges
           block uses. */
        html[data-color-theme="dark"] .ct-page .btn-delete-offering:hover {
            background-color: var(--sev-crit-bg);
            border-color: var(--sev-crit-border);
            color: var(--sev-crit-text);
        }


/* =========================================================================
   CONTRACT REQUEST - List / Details / Add / Edit
   -------------------------------------------------------------------------
   List and Add needed only the wrapper; List's rgContractRequest takes .ct-grid.

   Details and Edit are two more hand-built components, 36 and 38 selectors,
   and they share most of their vocabulary with the Contract Bundle Details
   offerings list above - .offering-group-header, .offering-group-title,
   .offering-row, .offering-name, .offering-description, .offering-notes, all at
   the same light values.  Those are already covered by that block, which is why
   only the selectors NEW to these two pages appear here.

   That overlap is the argument for scoping this folder's component rules to
   .ct-page rather than per page: three different pages grew the same list and
   named it the same way.
   ========================================================================= */

    /* ---- Signed / approved status badges -----------------------------------
       The pale alert palette a fourth time - #155724 on #d4edda for both signed
       and approved, #856404 on #fff3cd for not-signed, and #6c757d on #f8f9fa
       for not-approved.  Same tint-plus-border treatment as the chips above.

       not-approved is the interesting one: in light mode it is near-white with
       grey text, which reads as "nothing has happened yet" rather than as a
       failure.  The grey tokens keep that reading; the crit tokens would turn a
       neutral state into an alarming one. */
    html[data-color-theme="dark"] .ct-page .status-signed,
    html[data-color-theme="dark"] .ct-page .status-approved {
        color: var(--sev-ok-text);
        background-color: var(--sev-ok-bg);
        border: 1px solid var(--sev-ok-border);
    }

    html[data-color-theme="dark"] .ct-page .status-not-signed {
        color: var(--sev-warn-text);
        background-color: var(--sev-warn-bg);
        border: 1px solid var(--sev-warn-border);
    }

    html[data-color-theme="dark"] .ct-page .status-not-approved {
        color: var(--sev-grey-text);
        background-color: var(--sev-grey-bg);
        border: 1px solid var(--sev-grey-border);
    }

    /* ---- Offering row states -----------------------------------------------
       Three states layered on .offering-row, each a pale wash in light mode.
       The directions matter and they are not all the same:

       .selected    #f0faf0 - a green wash, lifts off white.  Lifts here too.
       .contracted  #e8f5e8 with a #28a745 left edge.  The edge is the signal
                    and survives on dark, so it is kept and only lightened.
       .not-selected #fafafa with #999 text - this one DIMS in light mode, even
                    though #fafafa is lighter than white's siblings, because the
                    grey text is what carries it.  On dark, lifting the fill
                    would read as emphasis, so it goes DOWN toward the page
                    background instead and the text goes muted. */
    html[data-color-theme="dark"] .ct-page .offering-row.selected {
        background-color: rgba(95, 191, 75, 0.10);
    }

    html[data-color-theme="dark"] .ct-page .offering-row.contracted {
        background-color: rgba(95, 191, 75, 0.07);
        border-left-color: var(--sev-ok);
    }

    html[data-color-theme="dark"] .ct-page .offering-row.not-selected {
        background-color: #1F2228;
        color: var(--odie-muted);
    }

        html[data-color-theme="dark"] .ct-page .not-selected .offering-name {
            color: var(--odie-muted);
        }

    /* ---- Costs and totals --------------------------------------------------
       #286090 is ODIE's solid brand blue and appears here as ink on
       .last-year-link, .view-contract-link and .total-cost, and as a 2px rule on
       .offerings-total.  As ink on a dark card it is too dark to read, so it
       becomes the link colour; as a rule it only needs lifting. */
    html[data-color-theme="dark"] .ct-page .offering-cost,
    html[data-color-theme="dark"] .ct-page .total-label {
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .ct-page .offering-unit-price {
        color: #B7BEC8;
    }

    /* #ccc in light mode - a zero cost greyed almost to nothing. */
    html[data-color-theme="dark"] .ct-page .offering-cost-zero {
        color: #5A616B;
    }

    html[data-color-theme="dark"] .ct-page .last-year-link,
    html[data-color-theme="dark"] .ct-page .view-contract-link,
    html[data-color-theme="dark"] .ct-page .total-cost {
        color: var(--odie-link);
    }

    html[data-color-theme="dark"] .ct-page .offerings-total {
        background-color: #1C2027;
        border-color: var(--odie-border);
        border-top-color: #4A8DA6;
    }

    /* Solid #28a745 with white text - already a dark badge with light ink, so
       it reads correctly in both modes and only the green is brought into line
       with the --sev-ok the rest of this folder uses. */
    html[data-color-theme="dark"] .ct-page .contracted-badge {
        background-color: #2F7D3E;
        color: #FFFFFF;
    }

    /* ---- Details: status summary and signature block ----------------------- */
    html[data-color-theme="dark"] .ct-page .status-summary {
        background-color: #1C2027;
        color: #B7BEC8;
    }

        html[data-color-theme="dark"] .ct-page .status-summary strong {
            color: var(--odie-body-color);
        }

    /* The signature line is a literal ruled line to sign on - #333 solid when
       signed, #ccc dashed while awaiting.  Both need to be visible against the
       card rather than against paper. */
    html[data-color-theme="dark"] .ct-page .signature-line {
        border-bottom-color: #8B95A1;
    }

    html[data-color-theme="dark"] .ct-page .signature-awaiting {
        border-bottom-color: #5A616B;
    }

    /* #1a3a5c is a deep navy, essentially black on a dark card. */
    html[data-color-theme="dark"] .ct-page .signature-name {
        color: #A8D5F5;
    }

    html[data-color-theme="dark"] .ct-page .signature-meta {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .ct-page .signature-empty,
    html[data-color-theme="dark"] .ct-page .signature-label {
        color: var(--odie-muted);
    }

    /* ---- Edit: the controls Details does not have -------------------------- */
    html[data-color-theme="dark"] .ct-page .clear-selection-btn {
        background-color: #4A525C;
        color: #FFFFFF;
    }

        html[data-color-theme="dark"] .ct-page .clear-selection-btn:hover {
            background-color: #565F6A;
            color: #FFFFFF;
        }

    /* Per-offering quantity boxes.  Named explicitly rather than relying on a
       broad .ct-page input rule - this folder deliberately has no such rule,
       after the one on .rp-page and .dp-page turned out to be reaching inside
       Telerik's own combo box inputs. */
    html[data-color-theme="dark"] .ct-page .offering-quantity input[type="text"],
    html[data-color-theme="dark"] .ct-page .offering-quantity input[type="number"] {
        color: #E7E9ED;
        background: #1F242A;
        border-color: #4A535F;
    }

    html[data-color-theme="dark"] .ct-page .offering-quantity .quantity-label,
    html[data-color-theme="dark"] .ct-page .offering-quantity .quantity-rate,
    html[data-color-theme="dark"] .ct-page .signature-legal {
        color: #B7BEC8;
    }

    html[data-color-theme="dark"] .ct-page .btn-not-ready {
        color: var(--odie-muted);
    }

        html[data-color-theme="dark"] .ct-page .btn-not-ready:hover {
            color: var(--odie-body-color);
        }


/* =========================================================================
   BILLING RUN / BILLING RUN DETAILS
   -------------------------------------------------------------------------
   The two largest pages in the folder, and the most carefully built - both
   ship a 300-line <style> block with its own commentary.  Billing Run List is
   an ordinary list page and took only .ct-page plus .ct-grid.

   Both carry a drill-down drawer, .line-detail-panel, holding eight (nine on
   Details) nested rgLines* grids.  Those all had Skin="Bootstrap" hardcoded;
   they live in a NestedViewTemplate, so they are now set from BindLineSection,
   which is the one helper that reaches every one of them.

   What needs no rule here, and deliberately:

     - The KPI tiles.  .kpi-tile-statements and friends are SOLID saturated
       fills - #185FA5, #3B6D11, #BA7517, #A32D2D, #4B4B8F - with #fff text and
       a rgba(255,255,255,0.18) icon well.  Those are already dark badges with
       light ink and read correctly in both themes, the same call made for
       .contracted-badge and .statusInfo.
     - .warning-icon and .warning-count, which take their fill from a
       --severity-color custom property set per card and put #fff on it.
     - .chevron::after, drawn from currentColor, so it follows whatever it
       sits in.

   The page's own comment says the .line-detail-panel block is "kept
   byte-identical" between the two pages.  That is true of that sub-block but
   not of the whole <style> block - the two differ in their KPI tiles and
   Details adds .acct-subtotal-strip - so do not assume a change to one lands
   on the other.
   ========================================================================= */

    /* ---- The drill-down drawer ---------------------------------------------
       #EAF4EE - a pale mint panel - inset into the parent grid with a #1F4E79
       navy left edge and a matching notch pointing up at the parent row.  The
       whole point of it is to read as contained and distinct from the rows
       above, so the dark version has to keep that contrast rather than melt
       into the card. */
    html[data-color-theme="dark"] .ct-page .line-detail-panel {
        background: #1E262B;
        border-color: rgba(122, 170, 200, 0.30);
        border-left-color: #4A8DA6;
        box-shadow: inset 0 7px 10px -9px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.30);
    }

        /* The notch is a rotated square that has to match the panel exactly or
           it shows as a seam. */
        html[data-color-theme="dark"] .ct-page .line-detail-panel::before {
            background: #1E262B;
            border-left-color: rgba(122, 170, 200, 0.30);
            border-top-color: rgba(122, 170, 200, 0.30);
        }

    /* ---- Section bands ----------------------------------------------------- */
    html[data-color-theme="dark"] .ct-page .nested-section-title {
        color: #C9D5E2;
        background: #232C33;
        border-color: rgba(122, 170, 200, 0.30);
        border-bottom-color: #4A8DA6;
    }

        html[data-color-theme="dark"] .ct-page .nested-section-title em {
            color: #7FB6D0;
        }

    /* ---- Nested line grids -------------------------------------------------
       These are the rules that actually bite.  The page strips Telerik's chrome
       and hand-builds a quiet sub-table, and it does so through .RadGrid - the
       BASE class, not a skin class - with !important throughout.  So unlike
       every .RadGrid_Bootstrap block elsewhere in this folder, none of it goes
       away under Glow: "background: #ffffff !important" on every row has been
       painting white stripes inside the dark drawer.

       Each selector below mirrors the page's own, one class deeper, so it wins
       on specificity as well as carrying !important.  The hover rules matter as
       much as the base ones: the page forces hovered and rgActiveRow rows back
       to their normal stripe precisely so the skin's own hover never shows, and
       dropping that here would let Glow's green hover through. */
    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid .rgMasterTable {
        border-color: rgba(122, 170, 200, 0.30) !important;
    }

    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid th.rgHeader,
    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid .rgHeader {
        background: #1C2027 !important;
        color: #A7B4C2 !important;
        border-bottom-color: var(--odie-border) !important;
    }

    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid td {
        border-bottom-color: #2A323A !important;
        color: #DAE0E6 !important;
    }

    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid tr.rgRow td,
    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid tr.rgRow:hover td,
    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid tr.rgRow.rgActiveRow td,
    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid tr.rgRow.rgHoveredRow td {
        background: #232A31 !important;
    }

    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid tr.rgAltRow td,
    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid tr.rgAltRow:hover td,
    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid tr.rgAltRow.rgActiveRow td,
    html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid tr.rgAltRow.rgHoveredRow td {
        background: #1F262C !important;
    }

        /* #185FA5 as ink on a white row; on the dark stripe it needs the link
           colour instead. */
        html[data-color-theme="dark"] .ct-page .line-detail-panel .RadGrid .data-link {
            color: var(--odie-link) !important;
        }

    /* ---- Details only: the account subtotal strip -------------------------- */
    html[data-color-theme="dark"] .ct-page .acct-subtotal-strip table {
        background: #232A31;
    }

    html[data-color-theme="dark"] .ct-page .acct-subtotal-strip thead th {
        background: #1C2027;
        color: #A7B4C2;
        border-bottom-color: var(--odie-border);
    }

    html[data-color-theme="dark"] .ct-page .acct-subtotal-strip tbody tr + tr td {
        border-top-color: #2A323A;
    }

    html[data-color-theme="dark"] .ct-page .acct-subtotal-strip tbody tr:nth-child(even) td {
        background: #1F262C;
    }

    /* ---- Billing flags -----------------------------------------------------
       .flag-credit is the pale green chip again - #155724 on #d4edda - and
       .flag-managed-service is the pale grey one - #383d41 on #e2e3e5 - so both
       take the same tint-and-border treatment as the other chips in this folder.
       .flag-managed-service is on Billing Run only; .flag-credit is on both. */
    html[data-color-theme="dark"] .ct-page .flag-credit {
        color: var(--sev-ok-text);
        background-color: var(--sev-ok-bg);
        border: 1px solid var(--sev-ok-border);
    }

    html[data-color-theme="dark"] .ct-page .flag-managed-service {
        color: var(--sev-grey-text);
        background-color: var(--sev-grey-bg);
        border: 1px solid var(--sev-grey-border);
    }


/* =========================================================================
   TRANSACTION LIST
   -------------------------------------------------------------------------
   No page rules.  All nine Telerik controls take WebsiteTelerikSkin from
   SetTelerikSkins, there is no <style> block and no inline colour, so .ct-page
   plus .ct-grid was the whole change.

   This one was missed on the first pass through the folder - it has no
   attachments block and no <style> block, so nothing about it stood out, and
   it sat on Glow's own grid palette rather than ODIE's.  That is a bluish slate
   rather than a neutral grey, which reads as "converted" at a glance without
   actually being so.  Worth remembering that a page can look done in dark mode
   purely because Glow is already dark.
   ========================================================================= */


/* =========================================================================
   CONTRACT ANALYSIS
   -------------------------------------------------------------------------
   No page rules.  A filter card over a results grid, the same shape as Contract
   List: all five Telerik controls take WebsiteTelerikSkin, no <style> block, no
   inline colour, and the one piece of server-built HTML wraps the entity name in
   an <a class="data-link">.  .ct-page plus .ct-grid was the whole change.

   Worth knowing the grid runs AutoGenerateColumns="true", so its columns come
   from the shape of the data rather than from the markup.  Nothing in this file
   targets a named column on it, which is what keeps that safe.
   ========================================================================= */


/* =========================================================================
   CONTRACT ANALYSIS OLD / REPORTS OLD / REQUEST DETAILS OLD / USAGE OLD
   -------------------------------------------------------------------------
   The four superseded variants.  Two of them are still linked and reachable -
   ContractAnalysisOld from the icon bar on Contract Analysis, ContractUsageOld
   from three places - so they are converted rather than skipped.  The other two
   have no inbound references at all but are not .exclude'd either, so they are
   done for consistency rather than left half-dark.

   Three missing skins turned up, none of them hardcoded - just never set:
   rgContract on Analysis Old, and cboPageBreaks and ddlGroupBy on Reports Old,
   which were two of that page's seven combo boxes.  All three now follow
   WebsiteTelerikSkin.

   Request Details Old needed a markup change of its own; see below.  It has no
   Telerik controls at all, and its .smallbutton is #fff on a solid #286090,
   which is already a dark chip with light ink and reads correctly either way.

   Reports Old sets lblBillingStatement.ForeColor = Drawing.Color.Red, which
   renders as style="color:Red" and is picked up by the span[style*="color:Red"]
   rule near the top of this file - the same route the Repair Ticket Update
   labels take.
   ========================================================================= */

    /* ---- "Already contracted this year" highlight --------------------------
       ContractRequestDetailsOld marks an offering that is already under contract
       by tinting its row #BDF8BD, a pale mint.  It used to do that by setting

           divItem.Style("background-color") = "#BDF8BD !important"

       from the code-behind, and an inline !important outranks every author rule
       in every stylesheet - there is no selector that can reach past it.  The
       value now lives on .contracted-this-year in the page's own <style> block,
       unchanged, and the code-behind appends that class instead.  Light mode is
       byte-for-byte what it was; dark mode finally has a hook.

       The dark value keeps the same meaning - a green wash saying "this one is
       settled" - at a tint the row text can sit on. */
    html[data-color-theme="dark"] .ct-page .contracted-this-year {
        background-color: rgba(95, 191, 75, 0.13) !important;
    }


/* =========================================================================
   CONTRACT REPORTS
   -------------------------------------------------------------------------
   No page rules and no grid - a filter card that ends in a Generate Report
   button.  All six Telerik controls take WebsiteTelerikSkin, divDirections is
   filled through odie.utilities.NoticeMessage so it renders as a
   .system-notification card, and the button is the global
   .submit_button.btn-light.

   One markup fix went with the wrapper.  lblBillingStatementError carried
   CssClass="Error" with a capital E, and CSS class selectors are
   case-sensitive, so it matched neither the light sheet's .error nor the dark
   rule near the top of this file - it had simply never been styled, in either
   theme.  A grep of the repo found that capitalisation exactly once, on that
   one control, against 400-odd lowercase uses, so it is a typo rather than a
   second convention.  Corrected to "error", which means the message is now red
   in light mode as it was always meant to be. - 9/18/2026
   ========================================================================= */


/* =========================================================================
   SEARCH RESULTS (shared card list)
   -------------------------------------------------------------------------
   master.css declares .search-result* for pages that show search results as
   one card per hit; knowledgebase/ArticleList.aspx (search view) is the
   first.  Nearly all of it reads through var(--odie-*) with a light literal
   as the fallback, so the card surface, borders, muted text, links and the
   summary line follow the tokens at the top of this file and need nothing
   here.

   What is left is the handful of literals the light sheet has no token for:
   the match-count and Inactive pills (link-blue and red washes taken from
   --kb-info-* and --sev-crit-*, so they match the article page and the
   dashboards), the amber match highlight (the same family as the article
   page's current-match mark, at an alpha the body text can sit on), the
   section name in the crumb, and the footer icons.

   The audience badges need nothing: they are Bootstrap .badge.bg-light
   .text-body, and all.min.css redefines --light-rgb and --body-color-rgb
   under [data-color-theme=dark], so they already flip to a dark chip with
   light ink. - 9/19/2026
   ========================================================================= */

html[data-color-theme="dark"] .search-result-badge {
    background-color: var(--kb-info-chip-bg);
    color: var(--kb-info-text);
}

html[data-color-theme="dark"] .search-result-badge-danger {
    background-color: var(--sev-crit-bg);
    color: var(--sev-crit-text);
}

html[data-color-theme="dark"] .search-result-crumb-section {
    color: var(--kb-card-text);
}

/* RETUNED 9/22/2026.  This was rgba(255, 193, 7, 0.28) with master.css's
   color: inherit left in place, so a match composited to roughly #615122 on the
   #23262C card and kept the light body text.  That measures 1.95:1 against the
   card - present, but reading as a smudge rather than a highlight, which is
   what a translucent wash does on a dark surface: there is nothing bright
   underneath for it to tint.

   A highlighter is a bright fill with dark ink, and that is already how the
   current-match variant works.  #BE9420 measures 5.43:1 against the card and
   6.17:1 against the ink, so a match now carries on its own rather than
   depending on the reader noticing a tint.

   The hierarchy with the current match is kept: master.css paints
   .search-mark-current a solid #FFC107, which stays 1.7x brighter than this, so
   "the one you are on" still separates from "the others". */
/* The ink is a warm dark brown rather than near-black.  #1A1A1A measured 6.17:1
   and was perfectly readable, but a pure neutral black reads as harsh dropped
   into a dark UI.  #33291A is the same hue family as the fill and still measures
   5.06:1, so the change costs nothing that matters and the highlight stops
   looking like it was pasted in from the light theme. - 9/23/2026 */
html[data-color-theme="dark"] .search-result mark {
    background-color: #BE9420;
    color: #33291A;
}

    /* this selector outranks the light sheet's transparent title mark, so it
       has to be restated here.

       color: inherit is NOT optional since the retune above.  A title match is
       deliberately unshaded - the title is already a bold link - but it is still
       a <mark> inside .search-result, so it picks up the dark ink meant for the
       shaded matches.  Dark ink on a transparent card is an invisible word in
       the middle of a link.  inherit hands it back to the link colour. */
    html[data-color-theme="dark"] .search-result-title mark {
        background-color: transparent;
        color: inherit;
    }

html[data-color-theme="dark"] .search-result-meta i {
    color: #6B7280;
}

html[data-color-theme="dark"] .search-result-badge-muted {
    background-color: rgba(167, 173, 183, 0.16);
    color: var(--kb-card-text);
}

/* the matched words on the page a result opens (scripts/search_highlight.js);
   the current match keeps its solid amber and black ink from master.css.

   Same retune as .search-result mark above, for the same reason and to the same
   values - these are the two halves of one journey (the match you saw in the
   result card, and the same match on the page it opens), so they have to look
   like the same thing. - 9/22/2026 */
html[data-color-theme="dark"] mark.search-mark {
    background-color: #BE9420;
    color: #33291A;
}

/* the pulsing ring on a Search button with a date or search text waiting to be
   applied (master.css .search-pending), in the dark link blue */
html[data-color-theme="dark"] .search-pending {
    animation-name: search-pending-pulse-dark;
}

@keyframes search-pending-pulse-dark {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(114, 195, 240, 0.40);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(114, 195, 240, 0.12);
    }
}

    /* ----- Search view on a helpdesk grid -----
       TicketList keeps .hd-grid on rgTicketList in its search view so the pager
       and status bar stay in the helpdesk family above, but the shared .hd-grid
       row rules paint every row a card grey with !important at a higher
       specificity than master.css's .search-results-grid, which would put a
       grey slab behind each card.  These restate the transparent grid for that
       combination.  Padding is not repeated: the .hd-grid rules never set it, so
       master.css's zero padding on the cells still applies. */
    html[data-color-theme="dark"] .hd-page .hd-grid.search-results-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .hd-page .hd-grid.search-results-grid.RadGrid_Glow .rgMasterTable {
        background: transparent !important;
        border-color: transparent !important;
    }

        html[data-color-theme="dark"] .hd-page .hd-grid.search-results-grid.RadGrid_Glow .rgRow > td,
        html[data-color-theme="dark"] .hd-page .hd-grid.search-results-grid.RadGrid_Glow .rgAltRow > td,
        html[data-color-theme="dark"] .hd-page .hd-grid.search-results-grid.RadGrid_Glow .rgRow:hover > td,
        html[data-color-theme="dark"] .hd-page .hd-grid.search-results-grid.RadGrid_Glow .rgAltRow:hover > td,
        html[data-color-theme="dark"] .hd-page .hd-grid.search-results-grid.RadGrid_Glow .rgHoveredRow > td {
            background: transparent !important;
            border-width: 0 !important;
        }

/* =========================================================================
   Admin: Operations Dashboard (admin/OperationsDashboard.aspx)
   The page's own <style> block defines every color as an --ops-* token on
   .ops-dashboard and paints its pills, chips, buttons and the active range
   button white through --ops-card.  Restating the tokens here recolors all
   of it, including the ECharts sparklines and activity chart, whose script
   reads the same tokens off the wrapper at draw time (canvas, so no rule
   could reach it).  The series hues were checked against this card grey:
   the blue and teal that share the activity chart clear the colour-vision
   floors, and the pink is stepped down from the light value so it sits in
   the dark lightness band. - 9/20/2026 */
html[data-color-theme="dark"] .ops-dashboard {
    --ops-blue: #3b93ff;
    --ops-teal: #26A69A;
    --ops-purple: #8e70c1;
    --ops-pink: #e64f7a;
    --ops-good: #34c38f;
    --ops-warn: #f79a68;
    --ops-warn-text: #f79a68;
    --ops-bad: #f26b6b;
    --ops-surface: #2A2F36;
    --ops-card: #23262C;
    --ops-chart-grid: #34373D;
    --ops-chart-axis: #464950;
    --ops-heat-0: #30363A;
    --ops-heat-1: #1E4F4A;
    --ops-heat-2: #1F6E67;
    --ops-heat-3: #23918A;
    --ops-heat-4: #3FB8AB;
    --ops-heat-5: #8FDCD3;
}

    /* the selected scope pill inverts: light ink on the dark page becomes a light pill */
    html[data-color-theme="dark"] .ops-dashboard .ops-pill.active {
        background: #E7E9ED;
        color: #181A1F !important;
        border-color: #E7E9ED;
    }

    html[data-color-theme="dark"] .ops-dashboard .ops-badge.neutral {
        background: #2A2F36;
        color: var(--odie-muted);
    }

    html[data-color-theme="dark"] .ops-dashboard table.ops-fleet tbody tr.sel td {
        background: rgba(59, 147, 255, 0.14);
    }

    /* the people rows reuse the Limitless list-group; its muted grey is too dark on the card */
    html[data-color-theme="dark"] .ops-dashboard .list-group-item .text-muted {
        color: var(--odie-muted) !important;
    }


/* =========================================================================
   URL SHORTENER - List / Details / Manage
   -------------------------------------------------------------------------
   Three pages, and the only thing any of them needed was the wrapper and the
   grid block below.  Recorded because the absence of anything else is itself
   the finding: this is the cleanest section in the app.

   Every skinnable Telerik control already takes WebsiteTelerikSkin.  Two names
   look unskinned and are not - rcbShortenedUrlList on the List page and
   rcbDistrictProfileCharts on the Details page are RadCodeBlocks, which have no
   Skin property at all.  The second is a copy-paste leftover from District
   Profile Charts; harmless, but do not go looking for a combo box.

   Both <style> blocks are colour-free.  .break_word_longlink is word wrapping,
   .responsive_width_chart is a width and .fun-text is a cursor.  The .star
   burst that used to fire when you copy a link left both pages on 9/23/2026;
   they call the shared scripts/copy_celebration.js now, whose one dark
   retune is the global .copy-celebration-flash rule near the top of this
   file.

   Manage writes four strings through InnerHtml and none carries markup: two are
   heading and button text, and the two error messages land in divs that already
   carry class="error", which the global rule near the top of this file covers.
   ========================================================================= */

    html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* rgShortenedUrlClick starts Visible="false" and only appears once a link
           has been clicked at least once, so an empty state is ordinary here. */
        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .url-page .url-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }


/* =========================================================================
   STUDENT BEHAVIOR - Activity Schedule List / Add / Edit, Student Behavior
                      List / Add / Edit, Student Behavior Charts
   -------------------------------------------------------------------------
   Seven pages, all wrapped in .sb-page.  Add and Edit put it on the card div
   itself rather than in a new wrapper, because divContents already WAS the card
   on those four - class="sb-page card".  The three list-shaped pages had no
   class on divContents at all.

   Four hardcoded Skin="Bootstrap" came off the Search and Reset RadButtons on
   the two list pages.  Those four were the one case in the section where
   removing the markup attribute is not enough on its own: rbSearch and
   rbClearSearch were absent from both code-behinds' skin lists, so with the
   attribute gone they would have fallen to the configured default rather than
   to WebsiteTelerikSkin - the same mistake the contracts upload controls made.
   Matching assignments went into both Page_Load blocks.

   StudentBehaviorCharts is unfinished, and is styled here as what it actually
   renders rather than as what its name suggests.  divChart is an empty 700px
   div: no script writes to it, and the 31-line code-behind does nothing but
   check permissions.  Its six Telerik controls were the only unskinned ones
   left in the section and now follow the theme, so the filter card - the
   finished part - is correct.  There is no chart to colour, and nothing here
   pretends there is; when the chart lands it will need its own treatment, the
   way DistrictProfileCharts needed ECharts handled in the page and not in CSS.

   Both grids declare ItemStyle and AlternatingItemStyle CssClass, so their row
   anchors already resolve through .rad_grid_item_style a in the light sheet and
   its var(--odie-link).  The anchor rule below computes to the same value; it is
   kept so the block reads completely rather than leaving a reader to work out
   which grids are covered by accident.

   All six <style> blocks are colour-free: .RadComboBoxDropDown .rcbImage is
   size and border-radius, .FormatRadioButtonList is margin and padding, and
   .responsive_width_chart is a width.

   The comment boxes on the two Student Behavior pages are NOT handled here.
   .comment_textbox turned out to span four sections and was promoted to a
   global rule near the top of this file. - 9/23/2026
   ========================================================================= */

    /* Filter card on the list pages, detail card on the rest.  .label and .data
       carry no colour in the light sheet, so only the surface differs;
       transparent keeps .details_table in step with the card it sits in rather
       than repainting it the flat #23262C of the global rule. */
    html[data-color-theme="dark"] .sb-page .details_table,
    html[data-color-theme="dark"] .sb-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

    /* ---- Grids -------------------------------------------------------------
       rgActivitySchedule and rgStudentBehavior.  Neither sets AllowRowSelect or
       AllowFilteringByColumn, so there is no selected-row rule and no filter-row
       rule here, on purpose. */
    html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* Both lists open on an unfiltered query, but a tenant that has the
           section turned on and no records entered yet lands here rather than on
           a populated grid. */
        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .sb-page .sb-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

    /* ---- Native check boxes and radio buttons ------------------------------
       This section leans on them harder than any converted so far: Performance
       and Restroom are asp:RadioButtonLists, Days of Week is an asp:CheckBoxList
       and Active is an asp:CheckBox, and on the two Add pages they are most of
       the form.  Every one renders a bare native control, which the browser
       draws in its light chrome - a white box with a grey border - sitting next
       to Telerik inputs that are already dark.

       color-scheme is set on the controls themselves rather than on .sb-page.
       It inherits, and a wrapper-level declaration would reach the Telerik text
       inputs nested inside, which take their fill from Glow and do not want the
       user agent's opinion - the same reasoning that put the two :not()s on the
       .rp-page and .dp-page input rules.

       accent-color is the checked fill and matches --odie-link. */
    html[data-color-theme="dark"] .sb-page input[type="checkbox"],
    html[data-color-theme="dark"] .sb-page input[type="radio"] {
        color-scheme: dark;
        accent-color: #72C3F0;
    }

    /* The label beside asp:CheckBox.  ASP.NET wraps the input and its label in a
       span carrying the CssClass, so .data-sm is the text and not the box - the
       same shape as the .dp-page rule above.  ckbActive on the two Edit pages. */
    html[data-color-theme="dark"] .sb-page .data-sm {
        color: #B7BEC8;
    }


/* =========================================================================
   ERATE - Default, RFP List / Details / Manage, Bid Evaluation (+ Details),
           Erate Entity Details / Manage, Erate Device List / Manage,
           Erate Question Manage, Erate RFP Bid Upload
   -------------------------------------------------------------------------
   Twelve pages on .er-page, and the oldest-feeling section converted so far.
   Three things here were not true of any earlier section.

   1. The hardcoded skins were Silk, not Bootstrap - rgBids on both Bid
      Evaluation pages and cboBidWinner.  Alongside them sat ten Telerik
      controls with no skin at all, including both RadEditors, a RadCaptcha and
      a RadNumericTextBox nested in a grid template (txtQuantity, which had to
      be set in rgDevices_ItemDataBound because it has no page-level handle).

   2. Neither RadEditor declared OnClientLoad="RadEditorOnClientLoad".  That is
      the hook in scripts/master.js that calls ApplyOdieRadEditorTheme and
      darkens the editing iframe, so the skin alone would have left both editors
      with a white content area inside a dark chrome.  Both declare it now.

   3. Two colours were set by page script as inline styles, which no author rule
      can reach without !important, and !important would have repainted every
      cell rather than the one the script picked.  Both were measured before
      being changed: the winning-total cell was #FFFF00 under light text at
      1.13:1, and the unsaved-changes warning was #FF0000 on the card at
      3.37:1.  The scripts now toggle a class instead - .total-high, defined in
      each page's own <style> and restated below, and .error, which this file
      already resolves per theme.

   AllowRowSelect is not set on any of the ten grids, so there is no selected-row
   rule here.  ErateDeviceList declares a SelectedItemStyle anyway; it is dead
   markup and is left alone.

   Deliberately NOT handled: the RadCaptcha image on Erate Question Manage and
   Erate RFP Bid Upload.  It is a PNG generated server-side by Telerik, so its
   background cannot be restated in CSS, and inverting it would wreck the
   distortion the captcha depends on.  It renders as a light rectangle on a dark
   card - legible, and the only honest option short of replacing the control.

   Worth knowing: RFP Details, Erate Question Manage and Erate RFP Bid Upload are
   reachable by vendors who are not logged in.  Dark mode is stamped from
   CurrentUser.MasterPage, so an anonymous visitor always gets the light theme
   and never sees any of this. - 9/23/2026
   ========================================================================= */

    /* .label and .data carry no colour in the light sheet, so only the surface
       differs.  Bid Evaluation is the one page whose details_table sits directly
       in divContents rather than inside a card, which transparent handles the
       same way. */
    html[data-color-theme="dark"] .er-page .details_table,
    html[data-color-theme="dark"] .er-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

    /* ---- Grids ------------------------------------------------------------- */
    html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* rgDevices on RFP Manage starts empty - devices are added to it one at a
           time from the combo box above - so this is the ordinary first state of
           that page, not an edge case. */
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        /* rgBids on Bid Evaluation is a batch-edit grid, so it also draws a
           command item bar above and below the rows. */
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgCommandRow,
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgCommandRow td,
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .er-page .er-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

    /* ---- The winning total on the two Bid Evaluation pages -----------------
       #FFFF00 measured 1.13:1 against the grid's light row text.  The fill and
       ink are the pair used by .search-result mark in this file - #33291A on
       #BE9420, 5.06:1 - kept deliberately in step, because both are the same
       device: a highlighter marking the thing you are looking for.  The text
       colour is not optional: the cell inherits the grid's light body colour
       otherwise, which is the bug being fixed.

       !important twice over - it has to beat the skin's own .rgRow > td fill and
       the page's own light-mode .total-high, which is itself !important for the
       same reason. */
    html[data-color-theme="dark"] .er-page .total-high {
        background-color: #BE9420 !important;
        color: #33291A !important;
    }

    /* ---- Erate Entity Details ----------------------------------------------
       .highlighter is the hover tie-in between a 470 and the 471s and 486s that
       reference it: myHover() adds it to every span sharing an application
       number.  #e3d7ff is a pale lavender that measured 1.12:1 against this
       theme's body text.

       A dark violet rather than a dark text colour, because the highlighted
       spans contain .data-link anchors as well as plain text and forcing a text
       colour would fight the link.  Body text measures 10.05:1 on this fill and
       links 6.27:1, so both survive untouched.

       NOT scoped to .er-page, and this is the important part.  divContents closes
       at line 136 of the ASPX and the rptYears repeater opens on line 137 - every
       funding-year card, and all the 470/471/486/472 markup the page's script
       injects into their .usacData divs, is OUTSIDE the wrapper.  A .er-page
       .highlighter rule matches nothing at all; it was written that way first and
       the highlight stayed washed out.

       The same trap is why .statusOk / .statusWarn / .statusError are global.
       Anything that only ever appears inside those cards has to be global too.
       Nothing else in them needs a rule: .card is global, .label and .fundingYear
       and .usacData carry no colour, .erTypeDisplay is a width, and .data-link
       resolves through var(--odie-link). - 9/23/2026 */
    html[data-color-theme="dark"] .highlighter {
        background-color: #3A2E5A;
    }

    /* The Funding Cycle Status table is the only class="table" in the app.
       Limitless resolves .table's colour through --table-color -> --body-color,
       and this file redefines --odie-* tokens, never Limitless's own, so the
       cascade lands on the light --body-color and the table renders near-black
       on a dark card.  Restated here rather than by redefining --body-color,
       which would reach far more than this one table. */
    html[data-color-theme="dark"] .er-page .table {
        color: var(--odie-body-color);
        border-color: var(--odie-border);
    }

        html[data-color-theme="dark"] .er-page .table > :not(caption) > * > * {
            border-color: var(--odie-border-light);
        }

    /* ---- Native check boxes and radio buttons ------------------------------
       cbVerifyCompliance on Erate RFP Bid Upload, and the BEN selector on Erate
       Entity Manage, where the radios do not exist in the markup at all - the
       page's script builds them with createElement once the USAC call returns
       more than one billed entity.

       Set on the controls rather than on .er-page for the reason given in the
       Student Behavior block above: color-scheme inherits, and a wrapper-level
       declaration would reach the Telerik inputs nested inside. */
    html[data-color-theme="dark"] .er-page input[type="checkbox"],
    html[data-color-theme="dark"] .er-page input[type="radio"] {
        color-scheme: dark;
        accent-color: #72C3F0;
    }


/* =========================================================================
   LIBRARY - Default, Media Item Details / Edit, Collection List / Details /
             Add / Edit, Reservation List / Add / Details / Extend / Cancel,
             Spotlight List / Details / Add / Edit, Loan List, Bookmark List,
             Route Manage, Route Sequence List / Edit, FL Manage, Usage
             Reports, and Reports/SelectDate
   -------------------------------------------------------------------------
   23 converted pages on .lib-page.  Five are deliberately left alone: Default
   and all of Reports/ except SelectDate.  Every one of those five is a tombstone
   that says "this page has moved" or "no longer exists" and holds nothing but a
   .card, an <h2>, some <p> and a .data-link - already correct in dark mode from
   the global rules, and slated for deletion, so a wrapper class no rule uses
   would be churn.  BookmarkList is not in the count at all; it was parked as
   .exclude by the Library rewrite.

   This section was rewritten under this block on 9/23/2026 (commit c96d08040,
   "Finished Library Section Classes Rewrite"), which landed after the first dark
   pass.  Default, MediaItemDetails and MediaItemEdit were replaced and their
   originals parked as *Old.aspx.exclude, and MediaItemAdd and MediaItemList are
   new.  Those five needed re-wrapping; nothing else in the section moved.  The
   notes below were checked against the rewrite rather than carried over.

   Skins are the section's strong point and survived the rewrite intact: no
   hardcoded Skin= anywhere, and every skinnable control takes
   WebsiteTelerikSkin, including the ones nested in grid templates.  Both
   RadEditors - reDescription on Media Item Add and Edit - carry
   OnClientLoad="RadEditorOnClientLoad", so their iframes are themed.

   Two structural notes for whoever reads this next:

   - RouteSequenceList.aspx has NO MasterPageFile in its page directive, which
     looks like the standalone case that needed a pinned skin in repair.  It is
     not.  It inherits odie.page.Base, so OnPreInit in App_Code/common/pages.vb
     assigns the master at runtime, and it themes like every other page.

   - Seven pages had no divContents to hang the wrapper on and more than one
     top-level element, so they got a real wrapping <div class="lib-page">:
     CollectionAdd, CollectionDetails, CollectionEdit and LoanList (several
     sibling cards), CollectionList and SpotlightList (a bare RadGrid as the only
     child of the content placeholder), and MediaItemList, where the wrapper
     spans the filter card and the grid but deliberately leaves the RadAjaxManager
     and the two RadCodeBlocks outside it.
   ========================================================================= */

    html[data-color-theme="dark"] .lib-page .details_table,
    html[data-color-theme="dark"] .lib-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

    /* ---- Grids ------------------------------------------------------------- */
    html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* MediaItemList opens with rgMediaItem Visible="false" and fills it from a
           search, and the Spotlight Add/Edit pages both carry an empty "new items"
           grid until something is searched for, so this is a normal state here
           rather than an edge case. */
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        /* rgMediaCopies on Media Item Add/Edit is an edit-enabled grid, so it
           draws a command item bar as well as a pager. */
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgCommandRow,
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgCommandRow td,
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .lib-page .lib-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

    /* ---- The legacy asp:Calendar on Route Manage and Reports/SelectDate -----
       Not a RadCalendar.  This is ODIE's oldest calendar: an asp:Calendar wearing
       the cal / calday / caltitle / calothermonth / calselected family from
       esu10_2026.css, and that family is entirely light - #F4F5F1 day cells,
       #FFFFFF other-month cells and #575C5F text - with no dark half at all, so
       the whole widget rendered as a white block on a dark card.

       Scoped to .lib-page because these two pages are the only live users.
       RepairReports has an asp:Calendar too, but its code-behind dresses it in
       the separate threecal* family, which is already handled under .rp-page.

       .calselected is deliberately given only a border here.  Both pages set
       SelectedDayStyle-BackColor and -ForeColor as markup attributes, which
       render inline and outrank this file; measured, those pairings are
       self-consistent at 18.35:1 and 19.18:1, so the selected day stays a light
       chip on purpose rather than being fought with !important. */
    html[data-color-theme="dark"] .lib-page .cal {
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .lib-page .calday,
    html[data-color-theme="dark"] .lib-page .caltitle {
        background-color: #262A31;
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .lib-page .caltitle {
        border-color: #262A31;
    }

    html[data-color-theme="dark"] .lib-page .calothermonth {
        background-color: #1C2027;
        color: var(--odie-muted);
    }

    html[data-color-theme="dark"] .lib-page .calselected {
        border-color: var(--odie-link);
    }

    /* ---- Reservation Add: unavailable ship / return days -------------------
       ReservationAdd's own <style> paints four day states #F2E6E6 with
       !important and sets no text colour, so in dark mode Glow's light disabled
       day sat on a pale pink fill at 1.31:1 - the worst contrast measured in
       this section.

       Same treatment as the special_day_* rules further up, and for the same
       reason: the fill is class-keyed rather than skin-keyed so it survives into
       dark mode, and what has to be restated is the day's own anchor, because an
       anchor's colour beats one inherited from its cell.  #791F1F is the
       special_day_closed red already in this file - semantically the same thing,
       "you cannot pick this day" - and measures 8.50:1 on that fill.

       .reservation_padding is in that <style> block too and is applied nowhere
       in the repo; it is left alone rather than tidied, and is listed here only
       so the next reader does not go hunting for it. */
    html[data-color-theme="dark"] .lib-page .media_copy_taken,
    html[data-color-theme="dark"] .lib-page .media_copy_taken a,
    html[data-color-theme="dark"] .lib-page .cant_select_weekends,
    html[data-color-theme="dark"] .lib-page .cant_select_weekends a,
    html[data-color-theme="dark"] .lib-page .cant_select_today,
    html[data-color-theme="dark"] .lib-page .cant_select_today a {
        color: #791F1F !important;
    }

    /* ---- Media Item Details: the description ------------------------------
       The description is saved RadEditor content, and reDescription on Media Item
       Add and Edit carries StripFormattingOptions="None", so whatever a user
       pastes in is kept verbatim - inline colours included.  Same treatment as
       the other stored-HTML blocks in this file.

       The page's own <style> also gives description links #157AAC, which was
       chosen against white (4.76:1) and drops to 3.18:1 on the dark card.
       var(--odie-link) is 7.78:1 and is what every other link in the app uses. */
    html[data-color-theme="dark"] .lib-page .description-body a:link,
    html[data-color-theme="dark"] .lib-page .description-body a:visited,
    html[data-color-theme="dark"] .lib-page .description-body a:active {
        color: var(--odie-link) !important;
    }

        html[data-color-theme="dark"] .lib-page .description-body a:hover {
            color: var(--odie-link-hover) !important;
        }

    html[data-color-theme="dark"] .lib-page .description-body [style*="color:" i]:not([style*="background" i]):not(a),
    html[data-color-theme="dark"] .lib-page .description-body font[color] {
        color: inherit !important;
    }

    /* ---- Native form controls ----------------------------------------------
       Route Manage and Route Sequence List/Edit are the oldest markup in the
       section and use asp:DropDownList, asp:RadioButtonList and asp:Button
       rather than Telerik, so they render bare native controls.

       color-scheme goes on the controls themselves, not on .lib-page: it
       inherits, and a wrapper-level declaration would reach the Telerik inputs
       nested inside elsewhere in the section. */
    html[data-color-theme="dark"] .lib-page select {
        color-scheme: dark;
        color: #E7E9ED;
        background: #1F242A;
        border: 1px solid #4A535F;
    }

    html[data-color-theme="dark"] .lib-page input[type="checkbox"],
    html[data-color-theme="dark"] .lib-page input[type="radio"] {
        color-scheme: dark;
        accent-color: #72C3F0;
    }

    /* btnSave on Route Sequence List is a plain asp:Button, so it renders as
       <input type="submit"> and falls to the user agent's button chrome.  Values
       reused from .rp-page input[type="submit"] so the neutral buttons agree. */
    html[data-color-theme="dark"] .lib-page input[type="submit"] {
        background-color: rgba(255, 255, 255, 0.04) !important;
        color: #E7E9ED !important;
        border: 1px solid var(--odie-border) !important;
        box-shadow: none !important;
    }

    /* ---- Plain asp:TextBox fields -----------------------------------------
       The Library rewrite built Media Item Add and Edit almost entirely out of
       asp:TextBox rather than Telerik inputs - a dozen on each page, plus the
       search box on Spotlight Edit and the name fields on Collection Add/Edit.
       Those render as bare <input type="text"> and <textarea>, and nothing in
       this file gives a plain text field a fill; the global rules near the top
       only cover placeholder, readonly, disabled and focus.  They were white
       boxes on a dark card, and on those two pages they are most of the form.

       The two :not()s keep this off Telerik's own text inputs, which are
       input[type="text"] like any other.  Same reasoning as the .rp-page and
       .dp-page rules above: Glow puts the combo box's border and fill on
       .rcbInputCell and gives .rcbInput only a font-size, so adding a border
       here would draw a second line inside the cell's own.  Each :not() holds a
       single attribute selector, which is Selectors 3 - do not compress them
       into a compound, which is Selectors 4 and would invalidate the rule.

       Values are the pair used by .comment_textbox and the .rp-page / .dp-page
       inputs, so every recessed field in the app agrees. - 9/23/2026 */
    html[data-color-theme="dark"] .lib-page input[type="text"]:not([class*="rcbInput"]):not([class*="riTextBox"]),
    html[data-color-theme="dark"] .lib-page textarea:not([class*="rcbInput"]):not([class*="riTextBox"]) {
        color: #E7E9ED;
        background: #1F242A;
        border: 1px solid #4A535F;
    }

    /* ---- Media Item List: the spotlight pager dots -------------------------
       The dots are built as spans in MediaItemList.aspx.vb, and the page's own
       <style> gives them #ccc with #777 for .active.  That is the right way
       round on white - the inactive dots sit back at 1.61:1 and the current one
       carries at 4.48:1 - but the pair inverts on the dark card: inactive
       measures 9.44:1 and active only 3.39:1, so the dots you have already read
       shout and the one you are on recedes.

       Restated rather than swapped, because the light values are correct where
       they are.  Inactive #4A535F is 1.94:1, close to what #ccc does on white,
       and active takes --odie-link at 7.78:1, which is also the colour this
       theme already uses to mean "current". - 9/23/2026 */
    html[data-color-theme="dark"] .lib-page .spotlight-dot {
        background-color: #4A535F;
    }

        html[data-color-theme="dark"] .lib-page .spotlight-dot.active {
            background-color: var(--odie-link);
        }


/* =========================================================================
   STAFF EVALUATION - Framework Add, Indicator Add, Indicator Edit
   -------------------------------------------------------------------------
   The current-generation section (/staffevaluation/, odie.StaffEvaluation.v2)
   was already all but finished: 26 of its 42 live pages carry their own rich
   dark blocks further up this file, and an audit of all 42 found no hardcoded
   Skin= anywhere, no unskinned Telerik control, and no hardcoded colour in any
   markup or code-behind.  The old /staffeval/ generation is deliberately out of
   scope and is not converted at all - it is being switched off.

   Sixteen pages had no dark rules of their own.  Thirteen of them need none and
   are deliberately left without a wrapper class, because a class no rule uses is
   churn: they are small Add/Edit forms built entirely from Telerik controls that
   already follow WebsiteTelerikSkin, plus labels and .data-link anchors that
   resolve through var(--odie-link).  FrameworkCopy's <style> is margins and an
   opacity, and a.link-att - the one class the sweep flagged that is not a known
   false positive - also resolves through var(--odie-link).

   The other three are here.  What they have that the thirteen do not is plain
   asp:TextBox fields, which render bare and have no fill in this theme: two
   text inputs on Framework Add (txtTitle, txtWalkthroughLabel) and one textarea
   each on Indicator Add and Edit (txtOtherRelatedEvidence).

   Their native check boxes are NOT handled here - they are covered by the global
   rule near the top of this file, which was promoted out of the .sb-page /
   .er-page / .lib-page copies while doing this section.

   Kept scoped rather than promoted: a global input[type="text"] would reach
   every text field in the app, including Telerik grid filter rows and editor
   dialogs, which is a far wider blast radius than the check-box rule and is not
   worth it for four fields.  The :not()s are the usual guard against Telerik's
   own inputs, and values match .dp-page / .rp-page / .lib-page so every recessed
   field agrees. - 9/23/2026
   ========================================================================= */

    html[data-color-theme="dark"] .fw-add input[type="text"]:not([class*="rcbInput"]):not([class*="riTextBox"]),
    html[data-color-theme="dark"] .ind-add textarea:not([class*="rcbInput"]):not([class*="riTextBox"]),
    html[data-color-theme="dark"] .ind-edit textarea:not([class*="rcbInput"]):not([class*="riTextBox"]) {
        color: #E7E9ED;
        background: #1F242A;
        border: 1px solid #4A535F;
    }


/* =========================================================================
   ACCOUNTS - Activation Request, New Account Request, Beginning Absence
              Balance Manage, Current Absence Balances
   -------------------------------------------------------------------------
   The last four unconverted UI pages in accounts.  They join the section's
   existing .acc-page / .acc-grid wrappers.  Activation Request has no
   divContents, so the class went on its two top-level divs instead - divForm
   and divConfirmation.

   No skins to chase: every Telerik control on all four already takes
   WebsiteTelerikSkin and none of the four hardcodes a Skin.
   ========================================================================= */

    /* ---- The step-box chrome on the two request pages ----------------------
       Activation Request and New Account Request each draw three numbered "step"
       boxes as a 3x3 table of background GIFs - step1/2/3.gif for the numbered
       badge and steps_top / _left / _right / _bottom / _topright / _bottomleft /
       _bottomright for the frame.  Measured, all ten are fully opaque with a mean
       luminance of 217-245: white fill, a 1px near-black hairline border, and a
       brown numeral (rgb 99,60,3).  On a dark card that is a large white slab.

       Hiding the images is not an option - the step numbers exist ONLY inside
       step1/2/3.gif, so removing the backgrounds loses "1", "2" and "3"
       entirely.  A filter is the only way to keep them.

       invert(0.88) rather than invert(1), chosen by computing the output:
         white fill 255 -> 30, against the card's 35/38/44 -> 1.09:1, so the box
           reads as a frame rather than a dark slab (invert(1) gives pure black
           at 1.39:1, a visible block)
         hairline     0 -> 224, a clearly drawn border
         numeral 99,60,3 -> 149,178,222 at 7.70:1 on its own badge
       Known and accepted consequence: inverting turns the brown numeral into a
       soft blue.  That is inherent to inverting and cannot be avoided while
       keeping the numbers; the blue happens to sit near this theme's accent.

       Only the frame cells are filtered.  They are empty self-closing <td>s, so
       nothing but the background image is affected - the middle cell that holds
       the step text carries no background image and is not matched.

       The chrome is NOT limited to the two pages this block is named for.  Seven
       live pages use it, all of them already carrying .acc-page: Activation
       Request, Activation Confirm, New Account Request, Change Password Request,
       Change Password Process, Verification Request and Verification Confirm.
       (NewAccountRequestOld uses it too and is deliberately left out - it is
       superseded and carries no wrapper.)

       They use it in two forms, hence two selectors.  Five pages draw the frame
       as <td> background images; seven also place the numbered badge as a plain
       <img>, which the attribute selector on style= cannot reach.  The img rule
       fixes five pages that were converted in earlier passes and have been
       showing white step badges ever since. */
    html[data-color-theme="dark"] .acc-page td[style*="/images/step"],
    html[data-color-theme="dark"] .acc-page img[src*="/images/step"] {
        filter: invert(0.88);
    }

    /* ---- Beginning Absence Balance Manage ---------------------------------
       The page's own <style> puts border-color: #E2E2E2 !important on edit-row
       cells.  The selector is .RadGrid, not a skin name, so it applies in both
       themes and drew a near-white grid on the dark card.  Restated to the
       theme's border token; !important is needed only to beat the page's own. */
    html[data-color-theme="dark"] .acc-page .RadGrid .rgEditRow td {
        border-color: var(--odie-border) !important;
    }


/* =========================================================================
   KNOWLEDGEBASE - Article List / Details / Add / Edit
   -------------------------------------------------------------------------
   The article body was already done - the .kb-article and .kb-article-header
   blocks further up this file cover the callouts, step cards and highlight
   cards, and ArticleList's results already use the shared .search-result*
   vocabulary.  What was left was the page frame, the grid, and the diagram
   viewer.

   QuickHelp.aspx is deliberately not converted: it is an empty placeholder - a
   card with an empty card-body, and a code-behind that sets nothing but Section
   and IsSecure.  There is no content to theme, and .card is already global.

   No skins to chase - every Telerik control in the section already takes
   WebsiteTelerikSkin, and nothing hardcodes a Skin.

   Article Details is the page that needed real work.  It renders Mermaid
   diagrams, and mermaid.initialize was pinned to theme: 'default' - dark text on
   light node fills, unreadable on a dark card.  It now follows
   data-color-theme, the same way ECharts does on District Profile Charts.

   Worth recording, because it nearly went the other way: searching
   scripts/mermaid.min.js for "dark" returns nothing, which looks like the build
   has no dark theme.  It does - the minifier drops the quotes, so the theme
   registry has to be read as object keys, where base, dark, default, forest and
   neutral are all present.

   Two colours on that page were inline and are now classes so this file can
   reach them: the fullscreen pane, which had background-color: white and would
   have put a dark diagram on a white sheet once Mermaid switched, and the
   diagram error box, which was three inline properties repeated in both JS
   failure branches.  The zoom readout and the Article History chevron were both
   inline #666 - 5.74:1 on white but 2.64:1 on the dark card - and are now
   .text-muted, which this file already resolves to #A7ADB7 at 6.72:1.
   - 9/23/2026
   ========================================================================= */

    html[data-color-theme="dark"] .kb-page .details_table,
    html[data-color-theme="dark"] .kb-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

    /* ---- Article List grid ------------------------------------------------- */
    html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* the list is a search results page, so an unmatched search is ordinary */
        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .kb-page .kb-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

    /* ---- The fullscreen diagram pane --------------------------------------
       Not scoped to .kb-page: #fullscreenModal is position: fixed and sits at the
       end of the article card, but the class is unique to this page either way.
       The overlay behind it is rgba(0,0,0,0.95) in both themes and is left alone;
       only the sheet the diagram is drawn on changes, so a dark-themed Mermaid
       diagram has a dark surface under it. */
    html[data-color-theme="dark"] .kb-fullscreen-content {
        background-color: #1C2027;
    }

    /* ---- Diagram render failure -------------------------------------------
       Light mode keeps red on #ffe6e6, which is self-consistent at 3.37:1 but a
       bright box on a dark card.  Uses the critical-severity tokens already
       defined in this file rather than a second red. */
    html[data-color-theme="dark"] .kb-diagram-error {
        color: var(--sev-crit-text);
        background-color: var(--sev-crit-bg);
        border-color: var(--sev-crit-border);
    }

    /* ---- Browse by Section sidebar ----------------------------------------
       DisplaySectionsSidebar builds a .nav.nav-sidebar of .nav-link anchors, and
       with no rule of their own they fell through to the plain `a` rule at the
       top of this file and came out link-blue.  A list of destinations reads
       better as plain white, which is what the Welcome page's Quick Links do -
       these are the same values as that block, so the two menus agree.

       Scoped to .kb-page, which cannot reach the master page's own left-hand
       navigation: that is outside the wrapper and is styled by the
       .sidebar-dark .nav-sidebar rules near the top of this file.  The component
       sidebar here is the only .nav-sidebar inside the page body.

       The article count keeps .text-muted so it stays secondary to the name.
       - 9/23/2026 */
    html[data-color-theme="dark"] .kb-page .nav-sidebar .nav-link {
        color: #E7E9ED !important;
        text-decoration: none !important;
    }

        html[data-color-theme="dark"] .kb-page .nav-sidebar .nav-link i {
            color: #FFFFFF !important;
        }

        html[data-color-theme="dark"] .kb-page .nav-sidebar .nav-link:hover,
        html[data-color-theme="dark"] .kb-page .nav-sidebar .nav-link:focus {
            color: #FFFFFF !important;
            background-color: rgba(255, 255, 255, 0.06);
        }

            html[data-color-theme="dark"] .kb-page .nav-sidebar .nav-link:hover i,
            html[data-color-theme="dark"] .kb-page .nav-sidebar .nav-link:focus i {
                color: #FFFFFF !important;
            }


/* =========================================================================
   ADMIN - Event Log List
   -------------------------------------------------------------------------
   The smallest section in the app: four live pages, six more parked as
   .exclude and left alone.  Only one of the four needed anything.

   Operations Dashboard was already done and has its own .ops-dashboard block
   further up this file.

   Event Log Details and Info are deliberately left without a wrapper, because
   everything they render is already covered globally and a class no rule uses
   is churn.  Between them they are .card, .details_table, .main_table, .label /
   .icon / .data, .data-link and plain labels - and, on Info, the .line /
   .linealt striping its code-behind writes for the request-data table, which
   the global rules near the top of this file already repaint.  Info's other two
   panels are plain text and <strong>, and Event Log Details' lblDetails is
   unformatted text straight out of the database.  Neither hardcodes a colour.

   So this block is just Event Log List: the filter card, the grid, and one
   control - ralpEventLog, the loading panel - that was the only thing in the
   section with no skin assignment.

   The grid needs no anchor rule.  Most of its columns carry
   rad_grid_item_style_dashboard rather than the usual rad_grid_item_style, but
   that class resolves its link colour through var(--odie-link) in the light
   sheet just like its sibling does, so the theme's own token already reaches it.
   - 9/23/2026
   ========================================================================= */

    html[data-color-theme="dark"] .adm-page .details_table,
    html[data-color-theme="dark"] .adm-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* the page opens filtered, so a combination with no events is ordinary */
        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .adm-page .adm-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }


/* =========================================================================
   DATA ENGINE - Data Engine, Data Set Manage
   -------------------------------------------------------------------------
   Two pages, and clean ones: no hardcoded Skin anywhere, every Telerik control
   already taking WebsiteTelerikSkin, and not one hardcoded colour in either the
   markup or the code-behinds.

   Both <style> blocks are colour-free in the ways that matter.  DataSetManage's
   is border-spacing and padding.  DataEngine's holds .fun-text, a cursor.  The
   .star burst that used to fire when you copy the sharable link - and the
   var(--color) it set per star, once the one unresolved var() in this file -
   left on 9/23/2026 when the page moved to the shared
   scripts/copy_celebration.js, whose one dark retune is the global
   .copy-celebration-flash rule near the top of this file.

   divSqlError needs nothing either: it is handed either a plain exception
   message and stack trace, which inherit the body colour, or
   odie.utilities.ErrorMessage, which builds the .alert.bg-danger system
   notification the shared block already covers.

   Two classes looked like gaps in a sweep and are not.  .data-link-text on the
   copy-link label and .rad_grid_item_style on the grid rows both resolve their
   colour through var(--odie-link) in the light sheet, and the dark theme
   redefines that token. - 9/23/2026
   ========================================================================= */

    html[data-color-theme="dark"] .de-page .details_table,
    html[data-color-theme="dark"] .de-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

    /* ---- The results grid -------------------------------------------------
       Columns are generated from whatever the data set returns, so there is no
       fixed column set to style - only the frame. */
    html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* the page opens before a data set has been picked, so an empty grid is
           the first thing anyone sees here */
        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .de-page .de-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

    /* ---- Data Set Manage's plain fields -----------------------------------
       That page is built from asp:TextBox rather than Telerik: the data set
       name, the description, and txtSQL - a 400px-tall textarea holding the
       query, which is the whole point of the page and would otherwise be a white
       slab on a dark card.  Nothing in this file gives a bare text field a fill.

       The :not()s are the usual guard against Telerik's own inputs, and the
       values match .dp-page / .rp-page / .lib-page so every recessed field in
       the app agrees.  Its asp:CheckBoxList of allowed positions is covered by
       the global native check box rule near the top of this file. */
    html[data-color-theme="dark"] .de-page input[type="text"]:not([class*="rcbInput"]):not([class*="riTextBox"]),
    html[data-color-theme="dark"] .de-page textarea:not([class*="rcbInput"]):not([class*="riTextBox"]) {
        color: #E7E9ED;
        background: #1F242A;
        border: 1px solid #4A535F;
    }


/* =========================================================================
   ESU 10 WEBSITE - Page Editors, Services Manage
   -------------------------------------------------------------------------
   Two live pages; four more are parked as .exclude and left alone.  Both are
   in-place editable grids of ESU 10 website metadata, and both were in the same
   shape as erate: hardcoded Skin="Silk" - four of them - on combo boxes that had
   no code-behind assignment to fall back on.

   All four live in EditItemTemplates, so they have no page-level handle and are
   skinned in ItemCreated rather than ItemDataBound.  ItemCreated because it fires
   for edit and insert rows whether or not they are data bound, and because
   rcbManagers on Services Manage is never bound at all - its binding is commented
   out, but the control is still in the markup and still renders.

   The other find was the loading panels.  Both carried BackColor="#E0E0E0" in
   the markup with Transparency="50", so every postback washed the page in light
   grey - the more noticeable because these grids post back on every edit.  That
   is now set in the code-behind alongside the skin, so both themes live in one
   place instead of the light one sitting in the ASPX.

   Nothing else on either page carries a colour, and neither has a <style> block.
   - 9/23/2026
   ========================================================================= */

    html[data-color-theme="dark"] .ews-page .details_table,
    html[data-color-theme="dark"] .ews-page .main_table {
        background: transparent;
        color: var(--odie-body-color);
    }

    html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow,
    html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgMasterTable {
        background: #23262C !important;
        color: var(--odie-body-color) !important;
        border-color: var(--odie-border) !important;
    }

        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgHeader,
        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgHeader a {
            background: #1C2027 !important;
            color: #DCE3EA !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgRow > td {
            background: #262A31 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgAltRow > td {
            background: #2A2F36 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgRow > td a,
        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgAltRow > td a {
            color: var(--odie-link) !important;
        }

        /* Both grids are editable in place, so they draw a command item bar above
           the rows as well as the edit row itself. */
        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgCommandRow,
        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgCommandRow td,
        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgEditRow > td {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }

        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgNoRecords,
        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgNoRecords td {
            background: #23262C !important;
            color: var(--odie-muted) !important;
            border-color: var(--odie-border-light) !important;
        }

        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgPager,
        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgPager td,
        html[data-color-theme="dark"] .ews-page .ews-grid.RadGrid_Glow .rgStatusBar {
            background: #1C2027 !important;
            color: var(--odie-body-color) !important;
            border-color: var(--odie-border) !important;
        }