/*
 * DSE Helpdesk UI hardening
 *
 * This is the final shared layer for floating UI. Legacy osTicket menus keep
 * their native JavaScript positioning and show/hide behavior; this file only
 * normalizes their readable surface, stacking, and viewport-safe geometry.
 */

body.dse-helpdesk-portal,
body.dse-client-portal {
    --dse-layer-menu: 10040;
    --dse-layer-picker: 2147482150;
    --dse-layer-modal-backdrop: 2147482000;
    --dse-layer-modal: 2147482100;
    --dse-layer-loading: 2147482200;
    --dse-float-ink: #0f172a;
    --dse-float-text: #334155;
    --dse-float-muted: #64748b;
    --dse-float-line: #cbd5e1;
    --dse-float-hover: #eff6ff;
    --dse-float-accent: #1d4ed8;
}

/*
 * Staff action menus
 *
 * Keep position, top, left, and display under jquery.dropdown.js control.
 * The #content qualifier intentionally beats the older dark-theme link rule.
 */
body.dse-helpdesk-portal #content .action-dropdown,
body.dse-helpdesk-portal #content .noclick-dropdown,
body.dse-helpdesk-portal #content .customQ-dropdown,
body.dse-helpdesk-portal #content #quickfilter-dropdown,
body.dse-helpdesk-portal #content #sort-dropdown {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 210px !important;
    max-width: min(360px, calc(100vw - 24px)) !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 6px !important;
    border: 1px solid var(--dse-float-line) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--dse-float-ink) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .20) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: var(--dse-layer-menu) !important;
    isolation: isolate;
}

body.dse-helpdesk-portal #content .action-dropdown > ul,
body.dse-helpdesk-portal #content .noclick-dropdown > ul,
body.dse-helpdesk-portal #content .customQ-dropdown > ul,
body.dse-helpdesk-portal #content #quickfilter-dropdown > ul,
body.dse-helpdesk-portal #content #sort-dropdown > ul {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(56vh, 460px) !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: var(--dse-float-ink) !important;
    box-shadow: none !important;
    list-style: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    opacity: 1 !important;
    visibility: visible !important;
}

body.dse-helpdesk-portal #content .action-dropdown > ul > li,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li,
body.dse-helpdesk-portal #content #quickfilter-dropdown > ul > li,
body.dse-helpdesk-portal #content #sort-dropdown > ul > li {
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--dse-float-text) !important;
    list-style: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.dse-helpdesk-portal #content .action-dropdown > ul > li > a,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li > a,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li > a,
body.dse-helpdesk-portal #content #quickfilter-dropdown > ul > li > a,
body.dse-helpdesk-portal #content #sort-dropdown > ul > li > a {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--dse-float-text) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.dse-helpdesk-portal #content .action-dropdown > ul > li > a i,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li > a i,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li > a i,
body.dse-helpdesk-portal #content #quickfilter-dropdown > ul > li > a i,
body.dse-helpdesk-portal #content #sort-dropdown > ul > li > a i {
    flex: 0 0 auto !important;
    color: var(--dse-float-muted) !important;
}

body.dse-helpdesk-portal #content .action-dropdown > ul > li > a:hover,
body.dse-helpdesk-portal #content .action-dropdown > ul > li > a:focus,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li > a:hover,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li > a:focus,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li > a:hover,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li > a:focus,
body.dse-helpdesk-portal #content #quickfilter-dropdown > ul > li > a:hover,
body.dse-helpdesk-portal #content #quickfilter-dropdown > ul > li > a:focus,
body.dse-helpdesk-portal #content #sort-dropdown > ul > li > a:hover,
body.dse-helpdesk-portal #content #sort-dropdown > ul > li > a:focus {
    background: var(--dse-float-hover) !important;
    color: var(--dse-float-accent) !important;
    text-decoration: none !important;
}

body.dse-helpdesk-portal #content .action-dropdown > ul > li > a:focus-visible,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li > a:focus-visible,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li > a:focus-visible {
    outline: 2px solid #60a5fa !important;
    outline-offset: -2px !important;
}

body.dse-helpdesk-portal #content .action-dropdown > ul > li.active > a,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li.active > a,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li.active > a {
    background: #dbeafe !important;
    color: #1e40af !important;
}

body.dse-helpdesk-portal #content .action-dropdown > ul > li.danger > a,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li.danger > a,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li.danger > a {
    color: #b42318 !important;
}

body.dse-helpdesk-portal #content .action-dropdown > ul > li.danger > a:hover,
body.dse-helpdesk-portal #content .noclick-dropdown > ul > li.danger > a:hover,
body.dse-helpdesk-portal #content .customQ-dropdown > ul > li.danger > a:hover {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

body.dse-helpdesk-portal #content .action-dropdown::before,
body.dse-helpdesk-portal #content .action-dropdown::after,
body.dse-helpdesk-portal #content .noclick-dropdown::before,
body.dse-helpdesk-portal #content .noclick-dropdown::after {
    display: none !important;
}

/* Only the immediate legacy menu hosts need to permit the absolute menu. */
body.dse-helpdesk-portal #content #basic_search,
body.dse-helpdesk-portal #content #basic_search > .pull-right,
body.dse-helpdesk-portal #content #basic_search > .pull-left,
body.dse-helpdesk-portal #content .sticky.bar.opaque,
body.dse-helpdesk-portal #content .sticky.bar.opaque > .content,
body.dse-helpdesk-portal #content .sticky.bar.opaque .pull-right,
body.dse-helpdesk-portal #content .sticky.bar.opaque .flush-right,
body.dse-helpdesk-portal #content .dse-tickets-content {
    overflow: visible !important;
}

/*
 * Client form safeguards
 *
 * Broad legacy input rules must not reveal Select2's source element or turn a
 * short phone-extension field into a second full-width control.
 */
body.dse-client-portal #content select.select2-hidden-accessible,
body.dse-client-portal #content select.select2-offscreen,
body.dse-client-portal #content .select2-hidden-accessible,
body.dse-client-portal #content .select2-offscreen,
body.dse-client-portal select.select2-hidden-accessible,
body.dse-client-portal select.select2-offscreen {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

body.dse-client-portal #content label.required,
body.dse-client-portal #content label > span.required,
body.dse-client-portal #content span.required {
    color: #344054 !important;
}

body.dse-client-portal #content label.required .error,
body.dse-client-portal #content label > span.required .error,
body.dse-client-portal #content .required > .error,
body.dse-client-portal #content .error {
    color: #b42318 !important;
}

body.dse-client-portal #content input[type="text"][name$="-ext"] {
    display: inline-block !important;
    flex: 0 0 78px !important;
    width: 78px !important;
    min-width: 64px !important;
    max-width: 78px !important;
    vertical-align: middle !important;
}

/*
 * Enhanced selects, autocomplete, date/time pickers, and legacy chosen menus.
 * These widgets are commonly appended to <body>, so their layer must also sit
 * above a modal when the originating field lives inside one.
 */
body.dse-helpdesk-portal .select2-dropdown,
body.dse-helpdesk-portal .select2-drop,
body.dse-helpdesk-portal .chosen-drop,
body.dse-client-portal .select2-dropdown,
body.dse-client-portal .select2-drop,
body.dse-client-portal .chosen-drop {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    border: 1px solid var(--dse-float-line) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--dse-float-ink) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .20) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: var(--dse-layer-picker) !important;
}

body.dse-helpdesk-portal .select2-results__options,
body.dse-helpdesk-portal .select2-results,
body.dse-client-portal .select2-results__options,
body.dse-client-portal .select2-results {
    max-height: min(52vh, 420px) !important;
    background: #ffffff !important;
    color: var(--dse-float-ink) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

body.dse-helpdesk-portal .select2-results__option,
body.dse-helpdesk-portal .select2-result-label,
body.dse-client-portal .select2-results__option,
body.dse-client-portal .select2-result-label {
    min-height: 38px !important;
    padding: 10px 13px !important;
    background: #ffffff !important;
    color: var(--dse-float-text) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.dse-helpdesk-portal .select2-results__option--highlighted,
body.dse-helpdesk-portal .select2-results__option--highlighted[aria-selected],
body.dse-helpdesk-portal .select2-results .select2-highlighted .select2-result-label,
body.dse-client-portal .select2-results__option--highlighted,
body.dse-client-portal .select2-results__option--highlighted[aria-selected],
body.dse-client-portal .select2-results .select2-highlighted .select2-result-label {
    background: #2563eb !important;
    color: #ffffff !important;
}

body.dse-helpdesk-portal .ui-autocomplete,
body.dse-helpdesk-portal .typeahead.dropdown-menu,
body.dse-helpdesk-portal .tt-menu,
body.dse-client-portal .ui-autocomplete,
body.dse-client-portal .typeahead.dropdown-menu,
body.dse-client-portal .tt-menu {
    box-sizing: border-box !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(62vh, 520px) !important;
    border: 1px solid var(--dse-float-line) !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    color: var(--dse-float-ink) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .20) !important;
    overflow: hidden auto !important;
    z-index: var(--dse-layer-picker) !important;
}

body.dse-helpdesk-portal .ui-autocomplete .ui-menu-item,
body.dse-helpdesk-portal .typeahead.dropdown-menu li,
body.dse-helpdesk-portal .tt-suggestion,
body.dse-client-portal .ui-autocomplete .ui-menu-item,
body.dse-client-portal .typeahead.dropdown-menu li,
body.dse-client-portal .tt-suggestion {
    background: #ffffff !important;
    color: var(--dse-float-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.dse-helpdesk-portal .typeahead.dropdown-menu > li > a,
body.dse-helpdesk-portal .tt-suggestion,
body.dse-client-portal .typeahead.dropdown-menu > li > a,
body.dse-client-portal .tt-suggestion {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/*
 * Modal and loading layers must cover the workspace rail, command palette, and
 * assistant. Picker widgets remain one layer higher for fields inside dialogs.
 */
body.dse-helpdesk-portal #overlay,
body.dse-helpdesk-portal .ui-widget-overlay,
body.dse-client-portal #overlay,
body.dse-client-portal .ui-widget-overlay {
    z-index: var(--dse-layer-modal-backdrop) !important;
}

body.dse-helpdesk-portal #popup,
body.dse-helpdesk-portal #alert,
body.dse-helpdesk-portal .dialog,
body.dse-helpdesk-portal .ui-dialog,
body.dse-client-portal #popup,
body.dse-client-portal #alert,
body.dse-client-portal .dialog,
body.dse-client-portal .ui-dialog {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    color: var(--dse-float-ink) !important;
    overflow: hidden auto !important;
    isolation: isolate;
    z-index: var(--dse-layer-modal) !important;
}

body.dse-helpdesk-portal #loading,
body.dse-helpdesk-portal #upgrading,
body.dse-client-portal #loading,
body.dse-client-portal #upgrading {
    z-index: var(--dse-layer-loading) !important;
}

@media (min-width: 721px) {
    body.dse-client-portal #content .thread-entry > .pull-left.avatar,
    body.dse-client-portal #content #msg_info > .pull-left {
        float: left !important;
    }

    body.dse-client-portal #content .thread-entry > .pull-right.avatar,
    body.dse-client-portal #content .thread-entry .header > .pull-right,
    body.dse-client-portal #content #ticketInfo h1 > .pull-right {
        float: right !important;
    }
}

@media (max-width: 720px) {
    body.dse-helpdesk-portal #content .action-dropdown,
    body.dse-helpdesk-portal #content .noclick-dropdown,
    body.dse-helpdesk-portal #content .customQ-dropdown,
    body.dse-helpdesk-portal #content #quickfilter-dropdown,
    body.dse-helpdesk-portal #content #sort-dropdown {
        width: min(320px, calc(100vw - 24px)) !important;
        min-width: min(210px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }

    body.dse-helpdesk-portal .select2-results__options,
    body.dse-helpdesk-portal .select2-results,
    body.dse-client-portal .select2-results__options,
    body.dse-client-portal .select2-results {
        max-height: min(32vh, 260px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.dse-helpdesk-portal .action-dropdown,
    body.dse-helpdesk-portal .noclick-dropdown,
    body.dse-helpdesk-portal .customQ-dropdown,
    body.dse-helpdesk-portal .select2-dropdown,
    body.dse-client-portal .select2-dropdown,
    body.dse-helpdesk-portal .ui-autocomplete,
    body.dse-client-portal .ui-autocomplete {
        transition: none !important;
        animation: none !important;
    }
}