/* ao.theme-dark.css
   Dark theme (brand-aligned, easier on eyes).
   Enterprise CRM rules:
   - Most buttons = light blue
   - Links = orange (no underline)
   - Urgent/critical = magenta
   - Remove legacy teal accents (incl. .blue_link border)
*/

/* ==========================================================
   TOKENS
   ========================================================== */

:root[data-theme="dark"],
html[data-theme="dark"] {
    /* Brand anchors */
    --brand-dark-blue: #1A4179;
    --brand-light-blue: #5091C4;
    --brand-magenta: #E42289;
    --brand-orange: #F88D2F;
    --brand-teal: #4F9BBA; /* legacy only (avoid using) */
    /* Page surfaces */
    --color-bg: #0b1220;
    --color-text: #e5e7eb;
    --color-muted-text: rgba(229, 231, 235, 0.72);
    --surface-1: #0f172a;
    --surface-2: #111c33;
    --surface-3: #162444;
    --border-1: rgba(255, 255, 255, 0.12);
    --border-2: rgba(255, 255, 255, 0.20);
    /* Links */
    --color-link: #9ec5ff;
    --color-link-hover: #c3dbff;
    /* Focus */
    --focus-ring: rgba(80, 145, 196, 0.45);
    /* Actions (enterprise primary = light blue) */
    --color-primary: #2f6db5;
    --color-primary-hover: #2a5f9d;
    --color-on-primary: #ffffff;
    /* Accent (magenta) */
    --color-accent: var(--brand-magenta);
    --color-on-accent: #ffffff;
    --color-success: #22c55e;
    --color-warning: var(--brand-orange);
    --color-danger: #f87171;
    /* Shell */
    --shell-bg: #0c1630;
    --shell-text: #ffffff;
    --shell-border: rgba(255, 255, 255, 0.14);
    /* Inputs */
    --input-bg: #0b142b;
    --input-text: #e5e7eb;
    --input-border: rgba(255, 255, 255, 0.16);
    --input-border-hover: rgba(255, 255, 255, 0.24);
    --input-placeholder: rgba(229, 231, 235, 0.55);
    /* Legacy panel tokens */
    --panel-bg: var(--surface-1);
    --panel-header-bg: var(--surface-2);
    --card-bg: rgba(255, 255, 255, 0.04);
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.35);
    /* AI Accent */
    --color-ai: #7c6cff;
    --color-ai-hover: #9b8bff;
    --color-ai-bg: linear-gradient(135deg, #6d5dfc 0%, #8b5cf6 100%);
    /* AI Button tokens */
    --ai-btn-bg: #6d5dfc;
    --ai-btn-bg-hover: #7f73ff;
    --ai-btn-bg-active: #5b4ee8;
    --ai-btn-border: rgba(255,255,255,0.16);
    --ai-btn-glow: rgba(109, 93, 252, 0.35);
    --ai-btn-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

    /* ==========================================================
   BASE / TYPOGRAPHY
   ========================================================== */

    html[data-theme="dark"] body,
    html[data-theme="dark"] #right_content {
        background: var(--color-bg);
        color: var(--color-text);
        text-rendering: auto !important;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }

/* Make native controls choose dark UI where supported */
html[data-theme="dark"] {
    color-scheme: dark;
}

    /* ==========================================================
   GLOBAL LINKS (orange, no underline)
   ========================================================== */

    html[data-theme="dark"] a,
    html[data-theme="dark"] a:visited,
    html[data-theme="dark"] span.link {
        color: var(--brand-orange) !important;
        text-decoration: none !important;
    }

        html[data-theme="dark"] a:hover,
        html[data-theme="dark"] span.link:hover {
            color: #ffb067 !important;
            text-decoration: none !important;
        }

    /* ==========================================================
   SHELL / HEADER / NAV (kills legacy teal)
   ========================================================== */

    html[data-theme="dark"] #header {
        background: linear-gradient(45deg, #000 0%, var(--brand-dark-blue) 100%) !important;
        color: var(--shell-text) !important;
    }

    html[data-theme="dark"] #navigation,
    html[data-theme="dark"] #helpstrip,
    html[data-theme="dark"] #nav-container {
        background: var(--brand-dark-blue) !important;
    }

        html[data-theme="dark"] #navigation li,
        html[data-theme="dark"] #helpstrip li,
        html[data-theme="dark"] #navigation a,
        html[data-theme="dark"] #helpstrip a,
        html[data-theme="dark"] #navigation span,
        html[data-theme="dark"] #helpstrip span {
            color: #fff !important;
            text-decoration: none !important;
        }

            html[data-theme="dark"] #navigation a:hover,
            html[data-theme="dark"] #helpstrip a:hover {
                color: var(--brand-orange) !important;
                text-decoration: none !important;
            }

    /* Header search inputs */
    html[data-theme="dark"] .header-search input,
    html[data-theme="dark"] #header input[type="text"],
    html[data-theme="dark"] #header input[type="search"] {
        background: var(--input-bg) !important;
        color: var(--input-text) !important;
        border: 1px solid var(--input-border) !important;
    }

        html[data-theme="dark"] .header-search input::placeholder,
        html[data-theme="dark"] #header input[type="text"]::placeholder,
        html[data-theme="dark"] #header input[type="search"]::placeholder {
            color: var(--input-placeholder) !important;
        }

/* ==========================================================
   LOGO SWITCHING (master page)
   ========================================================== */

/* Legacy theme: show legacy image, hide new logo */
html:not([data-theme="dark"]) .legacy-logo-link {
    display: inline-flex !important;
    align-items: center;
}

html:not([data-theme="dark"]) .ao-logo-link,
html:not([data-theme="dark"]) .ao-logo-text,
html:not([data-theme="dark"]) .ao-logo-mark {
    display: none !important;
}

/* Dark theme: show new logo, hide legacy image */
html[data-theme="dark"] .legacy-logo-link {
    display: none !important;
}

html[data-theme="dark"] .ao-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px;
}

/* Logo sizing */
html[data-theme="dark"] .logo {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
}

    html[data-theme="dark"] .logo img {
        height: 34px !important;
        width: auto !important;
        max-width: 260px !important;
        object-fit: contain;
        display: block;
    }

/* Text logo colours */
html[data-theme="dark"] #header .ao-logo-text {
    display: inline-flex;
    align-items: baseline;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}

html[data-theme="dark"] #header .ao-logo-agency {
    color: #1A4179;
}

html[data-theme="dark"] #header .ao-logo-office {
    color: #5091C4;
}

html[data-theme="dark"] #header .ao-logo-crm {
    font-weight: 500;
    font-size: 12px;
    opacity: 0.9;
    color: var(--shell-text);
}

html[data-theme="dark"] #header .ao-logo-link:hover .ao-logo-agency {
    color: #5091C4;
}

/* ==========================================================
   FORMS: baseline inputs/selects/textarea (works in iframes)
   ========================================================== */

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 4px !important;
    outline: none;
}

    html[data-theme="dark"] input::placeholder,
    html[data-theme="dark"] textarea::placeholder {
        color: var(--input-placeholder) !important;
    }

    html[data-theme="dark"] input:focus,
    html[data-theme="dark"] textarea:focus,
    html[data-theme="dark"] select:focus {
        border-color: var(--input-border-hover) !important;
        box-shadow: 0 0 0 3px var(--focus-ring) !important;
    }

    /* Improve dropdown list contrast (Chrome/Edge support) */
    html[data-theme="dark"] select option,
    html[data-theme="dark"] select optgroup {
        background: #0b142b;
        color: #e5e7eb;
    }

/* QuickSearch box specifically (it has inline color:#444444) */
html[data-theme="dark"] #ctl00_QuickSearch1_txtQuickSearch {
    color: var(--input-text) !important;
}

/* Labels */
html[data-theme="dark"] .label,
html[data-theme="dark"] td.label,
html[data-theme="dark"] label {
    color: var(--color-muted-text) !important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

html[data-theme="dark"] input.Button,
html[data-theme="dark"] button.Button,
html[data-theme="dark"] .Button,
html[data-theme="dark"] #BtnSearchQS,
html[data-theme="dark"] #btnSearch,
html[data-theme="dark"] .header-search button {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
}

    html[data-theme="dark"] input.Button:hover,
    html[data-theme="dark"] button.Button:hover,
    html[data-theme="dark"] .Button:hover,
    html[data-theme="dark"] #BtnSearchQS:hover,
    html[data-theme="dark"] #btnSearch:hover,
    html[data-theme="dark"] .header-search button:hover {
        background: var(--color-primary-hover) !important;
    }

/* Critical / dangerous buttons (magenta) */
html[data-theme="dark"] .CriticalButton,
html[data-theme="dark"] .MagentaAction,
html[data-theme="dark"] .MagentaAction.Button {
    background: var(--brand-magenta) !important;
    color: #fff !important;
}

    html[data-theme="dark"] .CriticalButton:hover,
    html[data-theme="dark"] .MagentaAction:hover {
        background: #ff4fb0 !important;
    }

/* If common WebForms inputs rely on value text */
html[data-theme="dark"] input.Button[value="Delete"],
html[data-theme="dark"] input.Button[value="Save"],
html[data-theme="dark"] input.Button[value="Clone"],
html[data-theme="dark"] input.Button[value="DELETE"],
html[data-theme="dark"] input.Button[value="SAVE"],
html[data-theme="dark"] input.Button[value="CLONE"] {
    background: var(--brand-magenta) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.18) !important;
}

    html[data-theme="dark"] input.Button[value="Delete"]:hover,
    html[data-theme="dark"] input.Button[value="Save"]:hover,
    html[data-theme="dark"] input.Button[value="Clone"]:hover {
        background: #ff4fb0 !important;
    }

/* ==========================================================
   RHS / PANELS (legacy)
   ========================================================== */

html[data-theme="dark"] #right_content {
    background: var(--panel-bg);
    color: var(--color-text);
}

    html[data-theme="dark"] #right_content .rpheading,
    html[data-theme="dark"] #right_content .ui-accordion-header {
        background: var(--panel-header-bg);
        color: var(--color-text);
        border-color: var(--border-1);
    }

    html[data-theme="dark"] #right_content .rpcontent,
    html[data-theme="dark"] #right_content .ui-accordion-content,
    html[data-theme="dark"] #right_content .ui-widget-content {
        background: var(--panel-bg);
        color: var(--color-text);
        border-color: var(--border-1);
    }

    html[data-theme="dark"] #right_content .news_post {
        background: var(--card-bg);
        border: 1px solid var(--border-1);
        color: var(--color-text);
    }

    html[data-theme="dark"] #right_content a,
    html[data-theme="dark"] #right_content .link {
        color: var(--brand-orange) !important;
        text-decoration: none !important;
        cursor: pointer;
    }

        html[data-theme="dark"] #right_content a:hover,
        html[data-theme="dark"] #right_content .link:hover {
            color: #ffb067 !important;
        }

    /* RHS Related Info table */
    html[data-theme="dark"] #right_content table.related_info {
        background: var(--surface-1) !important;
        border: 1px solid var(--border-1) !important;
        border-radius: 10px;
        overflow: hidden;
    }

        html[data-theme="dark"] #right_content table.related_info td,
        html[data-theme="dark"] #right_content table.related_info th {
            border: 0 !important;
            padding: 8px 10px;
            background: transparent !important;
            color: var(--color-text) !important;
        }

            html[data-theme="dark"] #right_content table.related_info td.label,
            html[data-theme="dark"] #right_content .related_info .label {
                color: var(--color-muted-text) !important;
            }

/* RHS header with inline green override */
html[data-theme="dark"] #ctl00_RIheader {
    background: var(--surface-2) !important;
    color: var(--color-text) !important;
}

html[data-theme="dark"] #ctl00_LabelPrivate {
    color: var(--brand-orange) !important;
    text-decoration: none !important;
}

/* ==========================================================
   MENUS (.submenu / .popmenu)
   ========================================================== */

html[data-theme="dark"] .submenu,
html[data-theme="dark"] .submenu .menuDiv {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-1) !important;
}

    html[data-theme="dark"] .submenu li.menu {
        background: transparent !important;
        color: var(--color-text) !important;
        border-bottom: 1px solid var(--border-1) !important;
    }

        html[data-theme="dark"] .submenu li.menu:hover {
            background: var(--surface-2) !important;
        }

        html[data-theme="dark"] .submenu li.menu.blue_link {
            background: var(--surface-2) !important;
            color: var(--brand-orange) !important;
            font-weight: 700;
        }

/* Right-side pop menus */
html[data-theme="dark"] .popmenu,
html[data-theme="dark"] .popmenu2,
html[data-theme="dark"] .popsubmenu {
    background: var(--surface-1) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--border-1) !important;
}

    html[data-theme="dark"] .popmenu hr,
    html[data-theme="dark"] .popmenu2 hr,
    html[data-theme="dark"] hr.popmenuhr {
        border: 0;
        border-top: 1px solid var(--border-1);
    }

html[data-theme="dark"] .popmenulink {
    background: transparent !important;
    color: var(--color-text) !important;
}

    html[data-theme="dark"] .popmenulink:hover {
        background: var(--surface-2) !important;
    }

html[data-theme="dark"] #popsub_Menu h1 {
    color: var(--brand-light-blue) !important;
}

/* Theme dropdown */
html[data-theme="dark"] select.theme-ddl {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
}

/* ==========================================================
   ACTIVE EDGE: override legacy .blue_link teal border-left
   ========================================================== */

html[data-theme="dark"] .blue_link {
    border-left: 5px solid var(--brand-orange) !important;
}

    html[data-theme="dark"] .blue_link.menu,
    html[data-theme="dark"] li.blue_link {
        background: rgba(248,141,47,0.06) !important;
    }

/* ==========================================================
   BLUEDISPLAY (forms/panels) - unify and remove noisy grid
   ========================================================== */

html[data-theme="dark"] .BlueDisplay {
    background: #0b1220 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 12px;
    color: var(--color-text);
}

html[data-theme="dark"] .BlueDisplayHeader {
    display: block;
    background: #0e1a33 !important;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--border-1) !important;
    padding: 12px 14px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Layout tables inside BlueDisplay: no row-underlines */
html[data-theme="dark"] .BlueDisplay > table td,
html[data-theme="dark"] .BlueDisplay > table th,
html[data-theme="dark"] .BlueDisplay > table > tbody > tr > td > table td,
html[data-theme="dark"] .BlueDisplay > table > tbody > tr > td > table th {
    border: 0 !important;
    background: transparent !important;
    color: var(--color-text) !important;
}

/* Kill any legacy alternating row whites inside BlueDisplay */
html[data-theme="dark"] .BlueDisplay tr:nth-of-type(odd),
html[data-theme="dark"] .BlueDisplay tr:nth-of-type(even),
html[data-theme="dark"] .BlueDisplay tr td {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dividers */
html[data-theme="dark"] .BlueDisplay hr {
    display: none !important;
}

/* ==========================================================
   TASKS PAGE
   ========================================================== */

html[data-theme="dark"] .heading h1,
html[data-theme="dark"] .heading h1 * {
    color: var(--brand-light-blue) !important;
}

html[data-theme="dark"] .heading h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* “View Activity Report” type buttons */
html[data-theme="dark"] input.Button.Large,
html[data-theme="dark"] .heading input.Button {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    box-shadow: var(--shadow-md);
}

    html[data-theme="dark"] input.Button.Large:hover,
    html[data-theme="dark"] .heading input.Button:hover {
        background: var(--color-primary-hover) !important;
    }

/* Unified heading blocks (task_block and BlueDisplayHeader clickable) */
html[data-theme="dark"] .task_block > h1.clickable,
html[data-theme="dark"] .BlueDisplayHeader.clickable {
    display: block;
    background: var(--surface-2) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--border-1) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin: 14px 0 10px !important;
    box-shadow: var(--shadow-sm);
}

/* ==========================================================
   MultiSelect (custom MultiSelectBox / MultiSelectOptions)
   ========================================================== */

html[data-theme="dark"] .MultiSelectBox {
    background: #0f1b31 !important;
    color: var(--color-text) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 4px !important;
    height: 30px !important;
    line-height: 20px !important;
    padding: 6px 10px !important;
    text-align: left !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

    html[data-theme="dark"] .MultiSelectBox:hover {
        border-color: rgba(80, 145, 196, 0.65) !important;
        cursor: pointer;
    }

    html[data-theme="dark"] .MultiSelectBox:focus,
    html[data-theme="dark"] .MultiSelectBox:focus-visible {
        outline: 2px solid rgba(80, 145, 196, 0.45);
        outline-offset: 2px;
    }

html[data-theme="dark"] .MultiSelectOptions {
    background: #0b1220 !important;
    color: var(--color-text) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    z-index: 99999 !important;
}

html[data-theme="dark"] .MultiSelectOption {
    color: var(--color-text) !important;
    padding: 8px 10px;
}

    html[data-theme="dark"] .MultiSelectOption:hover {
        background: rgba(80, 145, 196, 0.18);
    }

    html[data-theme="dark"] .MultiSelectOption:active {
        background: rgba(80, 145, 196, 0.28);
    }

    html[data-theme="dark"] .MultiSelectOption[itemvalue="-1"] {
        color: var(--color-muted-text) !important;
    }

/* Scrollbar (WebKit) */
html[data-theme="dark"] .MultiSelectOptions::-webkit-scrollbar {
    width: 10px;
}

html[data-theme="dark"] .MultiSelectOptions::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
}

html[data-theme="dark"] .MultiSelectOptions::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
}

    html[data-theme="dark"] .MultiSelectOptions::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.26);
    }

/* ==========================================================
   jQuery UI MultiSelect menu
   ========================================================== */

html[data-theme="dark"] .ui-multiselect-menu {
    background: #0b1220 !important;
    color: var(--color-text) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55) !important;
    border-radius: 6px !important;
    overflow: hidden;
    z-index: 10002 !important; /* above dockFloat */
}

    html[data-theme="dark"] .ui-multiselect-menu .ui-multiselect-header {
        background: var(--brand-dark-blue) !important;
        color: #fff !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    }

    html[data-theme="dark"] .ui-multiselect-menu .ui-multiselect-close a {
        color: #fff !important;
        opacity: 0.8;
        text-decoration: none;
    }

        html[data-theme="dark"] .ui-multiselect-menu .ui-multiselect-close a:hover {
            opacity: 1;
        }

    html[data-theme="dark"] .ui-multiselect-menu .ui-multiselect-checkboxes {
        background: transparent !important;
        color: inherit !important;
    }

        html[data-theme="dark"] .ui-multiselect-menu .ui-multiselect-checkboxes li label {
            background: transparent !important;
            color: var(--color-text) !important;
            border: 0 !important;
            border-radius: 4px !important;
            padding: 6px 10px !important;
        }

            html[data-theme="dark"] .ui-multiselect-menu .ui-multiselect-checkboxes li label:hover,
            html[data-theme="dark"] .ui-multiselect-menu .ui-multiselect-checkboxes li label.ui-state-hover {
                background: rgba(80, 145, 196, 0.18) !important;
            }

    html[data-theme="dark"] .ui-multiselect-menu input[type="checkbox"] {
        accent-color: var(--brand-light-blue);
    }

/* ==========================================================
   Legacy DockFloat Modal
   ========================================================== */

html[data-theme="dark"] #dockFloat {
    background: #0f1b31 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.65) !important;
    color: var(--color-text);
}

    html[data-theme="dark"] #dockFloat > div:first-child {
        background: var(--brand-dark-blue) !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    html[data-theme="dark"] #dockFloat span[onclick="closeDockFloat()"] {
        opacity: 0.75;
    }

        html[data-theme="dark"] #dockFloat span[onclick="closeDockFloat()"]:hover {
            opacity: 1;
            color: var(--brand-orange);
        }

    html[data-theme="dark"] #dockFloat > div:last-child,
    html[data-theme="dark"] #divWaiting,
    html[data-theme="dark"] #ifmDockFloat {
        background: #0b1220;
    }

/* ==========================================================
   PERSON WIZARD (iframe popup)
   ========================================================== */

html[data-theme="dark"] #PeopleContainer {
    background: transparent !important;
}

    html[data-theme="dark"] #PeopleContainer > div {
        background: transparent !important;
        color: var(--color-text) !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    }

        html[data-theme="dark"] #PeopleContainer > div:nth-child(odd) {
            background: rgba(255,255,255,0.03) !important;
        }

        html[data-theme="dark"] #PeopleContainer > div:nth-child(even) {
            background: rgba(255,255,255,0.01) !important;
        }

        html[data-theme="dark"] #PeopleContainer > div:hover {
            background: rgba(80,145,196,0.14) !important;
        }

        html[data-theme="dark"] #PeopleContainer > div.archivedResult {
            color: rgba(229,231,235,0.65) !important;
        }

/* Pager */
html[data-theme="dark"] .simplePagerNav a {
    color: var(--brand-orange) !important;
    text-decoration: none !important;
}

html[data-theme="dark"] .simplePagerNav li.currentPage a {
    color: var(--color-text) !important;
    font-weight: 700;
}

/* ==========================================================
   PROPERTY WIZARD popup
   ========================================================== */

html[data-theme="dark"] #PropertyWizardContainer {
    color: var(--color-text);
}

    html[data-theme="dark"] #PropertyWizardContainer .labelWidth,
    html[data-theme="dark"] #PropertyWizardContainer td.label,
    html[data-theme="dark"] #PropertyWizardContainer .label {
        color: var(--color-text) !important;
        opacity: 0.9;
    }

    html[data-theme="dark"] #PropertyWizardContainer input[type="text"],
    html[data-theme="dark"] #PropertyWizardContainer select,
    html[data-theme="dark"] #PropertyWizardContainer textarea {
        background: rgba(255,255,255,0.04) !important;
        color: var(--color-text) !important;
        border: 1px solid rgba(229,231,235,0.18) !important;
    }

/* Address selection mini-popup */
html[data-theme="dark"] #AddressSelectionctl02 {
    background: rgba(10,16,28,0.98) !important;
    border: 1px solid rgba(229,231,235,0.18) !important;
    color: var(--color-text) !important;
}

/* ==========================================================
   AI MODAL POPUP (AI Content Assistant)
   ========================================================== */

html[data-theme="dark"] .ai-modal-overlay {
    background: rgba(0,0,0,0.70) !important;
    backdrop-filter: blur(2px);
}

html[data-theme="dark"] .ai-modal-content {
    background: var(--surface-1) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--border-1) !important;
    border-radius: 12px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.65) !important;
}

html[data-theme="dark"] .ai-modal-header {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border-1) !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

    html[data-theme="dark"] .ai-modal-header h2 {
        color: var(--brand-light-blue) !important;
    }

html[data-theme="dark"] .ai-input-group label,
html[data-theme="dark"] .ai-comparison-row label {
    color: var(--color-muted-text) !important;
}

html[data-theme="dark"] #ai-modal-prompt,
html[data-theme="dark"] #ai-modal-original,
html[data-theme="dark"] #ai-modal-suggested {
    background: #070d1a !important;
    color: var(--color-text) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

    html[data-theme="dark"] #ai-modal-original[readonly] {
        opacity: 0.95;
    }

html[data-theme="dark"] .ai-modal-footer {
    border-top: 1px solid var(--border-1) !important;
    background: rgba(255,255,255,0.02) !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* AI buttons (match enterprise rules) */
html[data-theme="dark"] .ai-btn {
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

    html[data-theme="dark"] .ai-btn.ai-btn-cancel {
        background: rgba(255,255,255,0.06) !important;
        color: var(--color-text) !important;
    }

        html[data-theme="dark"] .ai-btn.ai-btn-cancel:hover {
            background: rgba(255,255,255,0.10) !important;
        }

    html[data-theme="dark"] .ai-btn.ai-btn-generate {
        background: var(--color-primary) !important;
        color: var(--color-on-primary) !important;
    }

        html[data-theme="dark"] .ai-btn.ai-btn-generate:hover {
            background: var(--color-primary-hover) !important;
        }

    html[data-theme="dark"] .ai-btn.ai-btn-accept {
        background: var(--brand-magenta) !important;
        color: #fff !important;
    }

        html[data-theme="dark"] .ai-btn.ai-btn-accept:hover {
            background: #ff4fb0 !important;
        }

/* ==========================================================
   FineUploader (qq-gallery)
   ========================================================== */

html[data-theme="dark"] .qq-uploader.qq-gallery {
    background: transparent !important;
    color: var(--color-text) !important;
}

    html[data-theme="dark"] .qq-uploader.qq-gallery .qq-upload-drop-area,
    html[data-theme="dark"] .qq-uploader.qq-gallery .qq-upload-list,
    html[data-theme="dark"] .qq-uploader.qq-gallery .qq-upload-list-selector {
        background: rgba(255,255,255,0.02) !important;
        color: var(--color-text) !important;
        border-color: var(--border-1) !important;
    }

    html[data-theme="dark"] .qq-uploader.qq-gallery .qq-upload-list {
        border: 1px dashed rgba(255,255,255,0.18) !important;
        border-radius: 10px !important;
    }

    html[data-theme="dark"] .qq-uploader.qq-gallery [qq-drop-area-text],
    html[data-theme="dark"] .qq-uploader.qq-gallery .qq-drop-processing,
    html[data-theme="dark"] .qq-uploader.qq-gallery .qq-drop-processing span {
        color: rgba(229,231,235,0.75) !important;
    }

    html[data-theme="dark"] .qq-uploader.qq-gallery .qq-upload-button {
        background: var(--color-primary) !important;
        color: var(--color-on-primary) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 10px !important;
    }

        html[data-theme="dark"] .qq-uploader.qq-gallery .qq-upload-button:hover {
            background: var(--color-primary-hover) !important;
        }

    html[data-theme="dark"] .qq-uploader.qq-gallery dialog {
        background: var(--surface-1) !important;
        color: var(--color-text) !important;
        border: 1px solid var(--border-1) !important;
        border-radius: 12px !important;
        box-shadow: 0 25px 60px rgba(0,0,0,0.65) !important;
    }

        html[data-theme="dark"] .qq-uploader.qq-gallery dialog button {
            background: var(--color-primary) !important;
            color: var(--color-on-primary) !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            border-radius: 10px !important;
        }

            html[data-theme="dark"] .qq-uploader.qq-gallery dialog button:hover {
                background: var(--color-primary-hover) !important;
            }

/* ==========================================================
   LOGIN PAGE (hp25login)
   ========================================================== */

html[data-theme="dark"] body#hp25login,
html[data-theme="dark"] body#hp25login #loginarea,
html[data-theme="dark"] body#hp25login #content {
    background: transparent !important;
    background-image: none !important;
}

html[data-theme="dark"] body#hp25login {
    background: radial-gradient(1200px 700px at 50% 35%, #0e1a33 0%, #07101f 55%, #030814 100%) !important;
    color: var(--color-text);
    min-height: 100vh;
}

    html[data-theme="dark"] body#hp25login #loginarea {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    html[data-theme="dark"] body#hp25login #content {
        width: 100%;
        max-width: 520px;
        border: 0 !important;
        box-shadow: none !important;
    }

    html[data-theme="dark"] body#hp25login #controls {
        background: var(--surface-1) !important;
        border: 1px solid var(--border-1) !important;
        border-radius: 14px !important;
        padding: 26px 26px 22px;
        box-shadow: var(--shadow-md) !important;
    }

    html[data-theme="dark"] body#hp25login input.text,
    html[data-theme="dark"] body#hp25login input[type="text"],
    html[data-theme="dark"] body#hp25login input[type="password"] {
        width: 100%;
        box-sizing: border-box;
        background: #070d1a !important;
        color: var(--input-text) !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        border-radius: 10px;
        padding: 12px 12px;
    }

        html[data-theme="dark"] body#hp25login input.text:focus,
        html[data-theme="dark"] body#hp25login input[type="text"]:focus,
        html[data-theme="dark"] body#hp25login input[type="password"]:focus {
            border-color: var(--input-border-hover) !important;
            box-shadow: 0 0 0 3px var(--focus-ring) !important;
            outline: none;
        }

    /* Login buttons: force enterprise blue */
    html[data-theme="dark"] body#hp25login .button,
    html[data-theme="dark"] body#hp25login input.button,
    html[data-theme="dark"] body#hp25login input[type="submit"],
    html[data-theme="dark"] body#hp25login #LoginButton,
    html[data-theme="dark"] body#hp25login #ResetPasswordButton {
        background: var(--color-primary) !important;
        color: var(--color-on-primary) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 10px !important;
        padding: 12px 14px !important;
    }

        html[data-theme="dark"] body#hp25login .button:hover,
        html[data-theme="dark"] body#hp25login input.button:hover,
        html[data-theme="dark"] body#hp25login input[type="submit"]:hover,
        html[data-theme="dark"] body#hp25login #LoginButton:hover,
        html[data-theme="dark"] body#hp25login #ResetPasswordButton:hover {
            background: var(--color-primary-hover) !important;
        }

    html[data-theme="dark"] body#hp25login a,
    html[data-theme="dark"] body#hp25login a:visited {
        color: var(--brand-orange) !important;
        text-decoration: none !important;
    }

/* ==========================================================
   TASK BLOCK TABLES (Tasks + Web Views)
   ========================================================== */

html[data-theme="dark"] .task_block {
    color: var(--color-text);
}

    html[data-theme="dark"] .task_block > h1,
    html[data-theme="dark"] .task_block > h1 * {
        background: var(--surface-2) !important;
        color: var(--color-text) !important;
        border: 1px solid var(--border-1) !important;
        border-radius: 10px !important;
        padding: 14px 16px !important;
        margin: 14px 0 10px !important;
        box-shadow: var(--shadow-sm);
    }

    html[data-theme="dark"] .task_block a.button,
    html[data-theme="dark"] .task_block a.button:visited {
        display: inline-block;
        background: var(--color-primary) !important;
        color: var(--color-on-primary) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 10px !important;
        padding: 10px 16px !important;
        text-decoration: none !important;
        box-shadow: var(--shadow-sm);
    }

        html[data-theme="dark"] .task_block a.button:hover {
            background: var(--color-primary-hover) !important;
        }

    html[data-theme="dark"] .task_block table {
        width: 100%;
        background: var(--surface-1) !important;
        border: 1px solid var(--border-1) !important;
        border-radius: 10px;
        overflow: hidden;
        border-collapse: separate;
        border-spacing: 0;
    }

        html[data-theme="dark"] .task_block table thead tr,
        html[data-theme="dark"] .task_block table thead tr[style] {
            background: var(--surface-2) !important;
        }

        html[data-theme="dark"] .task_block table thead th,
        html[data-theme="dark"] .task_block table thead td {
            background: transparent !important;
            color: var(--color-text) !important;
            border-bottom: 1px solid var(--border-1) !important;
            padding: 10px 12px !important;
            text-align: left;
        }

        html[data-theme="dark"] .task_block table tbody td,
        html[data-theme="dark"] .task_block table tbody th {
            background: transparent !important;
            color: var(--color-text) !important;
            border-bottom: 1px solid var(--border-1) !important;
            padding: 10px 12px !important;
        }

        html[data-theme="dark"] .task_block table tbody tr:hover td {
            background: var(--surface-2) !important;
        }

        html[data-theme="dark"] .task_block table a,
        html[data-theme="dark"] .task_block table a:visited {
            color: var(--brand-orange) !important;
            text-decoration: none !important;
        }

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

/* ==========================================================
   GLOBAL H1 Override (kill legacy teal)
   ========================================================== */

html[data-theme="dark"] h1,
html[data-theme="dark"] h1 span,
html[data-theme="dark"] h1 * {
    color: var(--color-text) !important;
}

html[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .heading h1 {
    color: var(--brand-light-blue) !important;
}

/* ==========================================================
   AI BUTTON (CANONICAL) — DARK THEME
   Use: <button class="Button AIButton DontDisable">AI Suggest</button>
   - Branded purple
   - No teal hover
   - Wand icon via CSS
   - Right-most aligned inside .ai-enabled-header
   ========================================================== */

html[data-theme="dark"] .BlueDisplayHeader.ai-enabled-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding-right: 12px !important;
}

    /* Heading content stays left (do not force order unless you must) */

    /* DescriptionOptions: right side, before AI button */
    html[data-theme="dark"] .BlueDisplayHeader.ai-enabled-header .DescriptionOptions {
        margin-left: auto !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 14px;
    }

    /* AI button always right-most */
    html[data-theme="dark"] .BlueDisplayHeader.ai-enabled-header .AIButton {
        margin-left: 12px !important;
        order: 999 !important;
    }

html[data-theme="dark"] .AIButton,
html[data-theme="dark"] button.AIButton,
html[data-theme="dark"] .Button.AIButton,
html[data-theme="dark"] button.Button.AIButton {
    background: var(--ai-btn-bg) !important;
    color: #fff !important;
    border: 1px solid var(--ai-btn-border) !important;
    border-radius: 10px !important;
    padding: 7px 12px 8px !important;
    line-height: 1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    cursor: pointer !important;
    text-decoration: none !important;
    /* kill legacy gradients/icons */
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: var(--ai-btn-shadow) !important;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

    html[data-theme="dark"] .AIButton:hover,
    html[data-theme="dark"] .Button.AIButton:hover,
    html[data-theme="dark"] button.AIButton:hover,
    html[data-theme="dark"] button.Button.AIButton:hover {
        background: var(--ai-btn-bg-hover) !important;
        border-color: rgba(255,255,255,0.22) !important;
        box-shadow: 0 0 0 3px var(--ai-btn-glow), 0 10px 22px rgba(0,0,0,0.45) !important;
        transform: translateY(-1px);
    }

    html[data-theme="dark"] .AIButton:active,
    html[data-theme="dark"] .Button.AIButton:active {
        background: var(--ai-btn-bg-active) !important;
        transform: translateY(0);
    }

    html[data-theme="dark"] .AIButton:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px var(--ai-btn-glow), 0 10px 22px rgba(0,0,0,0.45) !important;
    }

    /* Wand icon (always) */
    html[data-theme="dark"] .AIButton::before {
        content: "";
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        display: inline-block;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21l3-1 9-9-2-2-9 9-1 3zm11.5-13l1.5-3 1.5 3 3 1.5-3 1.5-1.5 3-1.5-3-3-1.5 3-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21l3-1 9-9-2-2-9 9-1 3zm11.5-13l1.5-3 1.5 3 3 1.5-3 1.5-1.5 3-1.5-3-3-1.5 3-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
        opacity: 0.95;
    }

/* Loading indicator should not affect alignment */
html[data-theme="dark"] .BlueDisplayHeader.ai-enabled-header .ai-loading-indicator {
    order: 998;
    margin-left: 10px;
    float: none !important;
    color: rgba(229,231,235,0.75) !important;
}
/* ==========================================================
   PATCH — DARK THEME ONLY
   - Fix header/nav right alignment for user menu
   - Restyle QuickSearch dropdown (QSSuggestionsDiv) to match dark theme
   ========================================================== */

/* --------------------------
   1) Header / user menu alignment
   -------------------------- */

html[data-theme="dark"] #header .user-menu,
html[data-theme="dark"] #header #userMenu,
html[data-theme="dark"] #header .header-right,
html[data-theme="dark"] #header .login,
html[data-theme="dark"] #header .user,
html[data-theme="dark"] #header .userDropdown {
    float: right !important;
    margin-left: auto !important;
    text-align: right !important;
}

/* Nav strip alignment */
html[data-theme="dark"] #navigation ul {
    display: flex !important;
    align-items: center !important;
    gap: 18px;
}

    

/* Helpstrip variant */
html[data-theme="dark"] #helpstrip ul {
    display: flex !important;
    align-items: center !important;
    gap: 18px;
}

    html[data-theme="dark"] #helpstrip ul > li:last-child {
        margin-left: auto !important;
    }


/* --------------------------
   2) QuickSearch dropdown styling
   -------------------------- */

html[data-theme="dark"] #QSSuggestionsDiv,
html[data-theme="dark"] #divQuickSearchResults {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Primary dropdown scroll container */
html[data-theme="dark"] #quick-search-results {
    background: var(--surface-1) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--border-1) !important;
    border-radius: 12px !important;
    overflow: auto !important;
    max-height: 520px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55) !important;
}

/* "Showing 1-10..." header */
html[data-theme="dark"] #quick-search-message {
    background: var(--surface-2) !important;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--border-1) !important;
    padding: 10px 12px !important;
    font-weight: 700;
}

/* Next/Previous bar */
html[data-theme="dark"] #btn-container {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid var(--border-1) !important;
    padding: 8px 12px !important;
}

    /* Next/Previous links */
    html[data-theme="dark"] #btn-container .link,
    html[data-theme="dark"] #btn-container span.link {
        color: var(--brand-orange) !important;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none !important;
    }

        html[data-theme="dark"] #btn-container .link:hover,
        html[data-theme="dark"] #btn-container span.link:hover {
            color: #ffb067 !important;
        }

/* Results table cells */
html[data-theme="dark"] #quick-search-results table#Results td {
    border-bottom: 1px solid var(--border-1) !important;
    padding: 10px 10px !important;
    color: var(--color-text) !important;
}

/* Hover row */
html[data-theme="dark"] #quick-search-results table#Results tr:hover td {
    background: rgba(80,145,196,0.18) !important;
}

/* Links inside results */
html[data-theme="dark"] #quick-search-results a,
html[data-theme="dark"] #quick-search-results a:visited,
html[data-theme="dark"] #quick-search-results .qsDetails {
    color: var(--color-text) !important;
    text-decoration: none !important;
}

/* Bottom actions */
html[data-theme="dark"] #quick-search-results #AddPerson,
html[data-theme="dark"] #quick-search-results #AddProperty {
    padding: 10px 12px !important;
    border-top: 1px solid var(--border-1) !important;
    color: var(--brand-orange) !important;
    font-weight: 700;
}

    html[data-theme="dark"] #quick-search-results #AddPerson:hover,
    html[data-theme="dark"] #quick-search-results #AddProperty:hover {
        background: rgba(248,141,47,0.08) !important;
    }

/* Scrollbar (WebKit) */
html[data-theme="dark"] #quick-search-results::-webkit-scrollbar {
    width: 10px;
}

html[data-theme="dark"] #quick-search-results::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
}

html[data-theme="dark"] #quick-search-results::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
}

/* ==========================================================
   SEARCH RESULTS (legacy table.SearchResults) - DARK
   ========================================================== */

:root[data-theme="dark"] #Results table.SearchResults,
html[data-theme="dark"] #Results table.SearchResults,
:root[data-theme="dark"] table.SearchResults,
html[data-theme="dark"] table.SearchResults {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02) !important; /* overrides inline White */
    color: var(--color-text, #e5e7eb);
    border: 1px solid rgba(229, 231, 235, 0.14);
}

    /* Header */
    :root[data-theme="dark"] table.SearchResults th,
    html[data-theme="dark"] table.SearchResults th {
        background: rgba(26, 65, 121, 0.70); /* brand-dark-blue */
        color: #ffffff;
        font-weight: 700;
        border-bottom: 1px solid rgba(229, 231, 235, 0.18);
        padding: 10px 10px;
        text-align: left;
        vertical-align: bottom;
    }

        /* Legacy <font class="SortableColumn"> */
        :root[data-theme="dark"] table.SearchResults th .SortableColumn,
        html[data-theme="dark"] table.SearchResults th .SortableColumn {
            color: #ffffff;
            font-weight: 700;
            text-decoration: none;
        }

    /* Cells */
    :root[data-theme="dark"] table.SearchResults td,
    html[data-theme="dark"] table.SearchResults td {
        padding: 12px 10px;
        border-bottom: 1px solid rgba(229, 231, 235, 0.12);
        vertical-align: top;
        background: transparent;
    }

    /* Row zebra + hover */
    :root[data-theme="dark"] table.SearchResults tbody tr:nth-child(even) td,
    html[data-theme="dark"] table.SearchResults tbody tr:nth-child(even) td {
        background: rgba(80, 145, 196, 0.08);
    }

    :root[data-theme="dark"] table.SearchResults tbody tr:hover td,
    html[data-theme="dark"] table.SearchResults tbody tr:hover td {
        background: rgba(80, 145, 196, 0.14);
    }

    /* Links in table (brand rule: links = orange, no underline) */
    :root[data-theme="dark"] table.SearchResults a,
    html[data-theme="dark"] table.SearchResults a {
        color: var(--brand-orange, #F88D2F);
        text-decoration: none;
        font-weight: 600;
    }

        :root[data-theme="dark"] table.SearchResults a:hover,
        html[data-theme="dark"] table.SearchResults a:hover {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 2px;
        }

    /* Vendor name label */
    :root[data-theme="dark"] table.SearchResults .NameLbl,
    html[data-theme="dark"] table.SearchResults .NameLbl {
        color: rgba(229, 231, 235, 0.92);
        font-weight: 700;
    }

    /* Images */
    :root[data-theme="dark"] table.SearchResults img,
    html[data-theme="dark"] table.SearchResults img {
        display: block;
        border-radius: 8px;
        border: 1px solid rgba(229, 231, 235, 0.16);
        background: rgba(255, 255, 255, 0.04);
    }

    /* Checkbox alignment (legacy inline center div) */
    :root[data-theme="dark"] table.SearchResults td div[style*="text-align: center"],
    html[data-theme="dark"] table.SearchResults td div[style*="text-align: center"] {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 24px;
    }

    /* Inline pink rows (#FFAAB2) -> map to "urgent/critical" magenta tint */
    :root[data-theme="dark"] table.SearchResults tr[style*="#FFAAB2"] td,
    html[data-theme="dark"] table.SearchResults tr[style*="#FFAAB2"] td {
        background: rgba(228, 34, 137, 0.22) !important; /* brand-magenta */
    }
/* ==========================================================
   PAGINATION (Search Results) - DARK
   ========================================================== */

:root[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination a,
:root[data-theme="dark"] .SearchResults a.page,
html[data-theme="dark"] .SearchResults a.page {
    display: inline-block;
    min-width: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 2px solid var(--brand-orange, #F88D2F);
    background: transparent;
    color: var(--brand-orange, #F88D2F);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
}

    /* Hover */
    :root[data-theme="dark"] .pagination a:hover,
    html[data-theme="dark"] .pagination a:hover {
        background: rgba(248, 141, 47, 0.15);
    }

    /* Current page */
    :root[data-theme="dark"] .pagination .current,
    html[data-theme="dark"] .pagination .current,
    :root[data-theme="dark"] .pagination a.active,
    html[data-theme="dark"] .pagination a.active {
        background: var(--brand-orange, #F88D2F);
        color: #ffffff;
        border-color: var(--brand-orange, #F88D2F);
    }

/* ==========================================================
   PAGINATION (.nav / .PagingButton)
   Dark Theme
   ========================================================== */

:root[data-theme="dark"] .nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    /* Base button */
    :root[data-theme="dark"] .nav .PagingButton,
    :root[data-theme="dark"] .nav .PagingSelectedButton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
    }

    /* NON-CURRENT */
    :root[data-theme="dark"] .nav .PagingButton {
        background: transparent;
        border: 1px solid var(--brand-orange, #F88D2F);
        color: var(--brand-orange, #F88D2F);
    }

        :root[data-theme="dark"] .nav .PagingButton:hover {
            background: rgba(248, 141, 47, 0.15);
        }

    /* CURRENT */
    :root[data-theme="dark"] .nav .PagingSelectedButton {
        background: var(--brand-orange, #F88D2F);
        border: 1px solid var(--brand-orange, #F88D2F);
        color: #ffffff !important;
    }