/*
 * DSE client portal production-readiness layer
 * Mobile navigation, account forms, and support-widget containment.
 */

html body.dse-client-portal {
    overflow-x: hidden !important;
}

body.dse-client-portal #container,
body.dse-client-portal #content,
body.dse-client-portal .dse-helpdesk-shell,
body.dse-client-portal .dse-profile-wrap,
body.dse-client-portal .dse-profile-panel {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.dse-client-portal #content {
    padding-bottom: 88px !important;
}

body.dse-client-portal :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.42) !important;
    outline-offset: 2px !important;
}

@media (min-width: 721px) {
    .dse-ai-chat-launcher {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }
}

@media (max-width: 720px) {
    body.dse-client-portal #content {
        padding-bottom: 92px !important;
    }

    body.dse-client-portal .dse-helpdesk-nav-wrap {
        overflow: visible !important;
    }

    body.dse-client-portal ul#nav.dse-helpdesk-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 8px !important;
        overflow: visible !important;
    }

    body.dse-client-portal ul#nav.dse-helpdesk-nav > li {
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.dse-client-portal ul#nav.dse-helpdesk-nav > li:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }

    body.dse-client-portal ul#nav.dse-helpdesk-nav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 9px 8px !important;
        border-radius: 8px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body.dse-client-portal .dse-client-command-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    body.dse-client-portal .dse-client-command-bar > a {
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 8px !important;
        white-space: normal !important;
    }

    /* Repair osTicket's generated registration/profile table on narrow screens. */
    body.dse-client-portal .dse-profile-panel form,
    body.dse-client-portal .dse-profile-panel table.padded,
    body.dse-client-portal .dse-profile-panel table.padded > tbody,
    body.dse-client-portal .dse-profile-panel table.padded > tbody > tr,
    body.dse-client-portal .dse-profile-panel table.padded > tbody > tr > td,
    body.dse-client-portal .dse-profile-panel table.padded > tbody > tr > th {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.dse-client-portal .dse-profile-panel table.padded {
        border-spacing: 0 !important;
        table-layout: auto !important;
    }

    body.dse-client-portal .dse-profile-panel table.padded > tbody > tr {
        margin: 0 0 18px !important;
    }

    body.dse-client-portal .dse-profile-panel table.padded > tbody > tr > td,
    body.dse-client-portal .dse-profile-panel table.padded > tbody > tr > th {
        padding: 0 !important;
    }

    body.dse-client-portal .dse-profile-panel table.padded > tbody > tr > td + td {
        margin-top: 8px !important;
    }

    body.dse-client-portal .dse-profile-panel label {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 18px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    body.dse-client-portal .dse-profile-panel label,
    body.dse-client-portal .dse-profile-panel label > span,
    body.dse-client-portal .dse-profile-panel table.padded > tbody > tr > td:first-child {
        color: #172033 !important;
    }

    body.dse-client-portal .dse-profile-panel label .error,
    body.dse-client-portal .dse-profile-panel label > span > .error {
        color: #dc2626 !important;
    }

    body.dse-client-portal #content .dse-profile-panel label > span.required {
        color: #172033 !important;
    }

    body.dse-client-portal #content .dse-profile-panel label .error {
        color: #dc2626 !important;
    }

    body.dse-client-portal .dse-profile-panel label > br {
        display: none !important;
    }

    body.dse-client-portal .dse-profile-panel :is(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        input[type="file"],
        select,
        textarea,
        .select2-container
    ) {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    html body.dse-client-portal #content .dse-profile-panel form select#timezone-dropdown.select2-hidden-accessible,
    html body.dse-client-portal #content .dse-profile-panel form select#timezone-dropdown.select2-offscreen {
        position: absolute !important;
        width: 1px !important;
        min-width: 1px !important;
        max-width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    body.dse-client-portal .dse-profile-panel .select2-container .select2-choice,
    body.dse-client-portal .dse-profile-panel .select2-container .select2-selection {
        min-height: 50px !important;
        border-radius: 8px !important;
    }

    body.dse-client-portal .dse-profile-panel hr {
        margin: 8px 0 18px !important;
    }

    body.dse-client-portal .dse-profile-panel form > p:last-of-type {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 20px 0 0 !important;
    }

    body.dse-client-portal .dse-profile-panel :is(
        input[type="submit"],
        input[type="button"],
        input[type="reset"],
        button[type="submit"],
        .button
    ) {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    .dse-ai-chat {
        right: 8px !important;
        bottom: 8px !important;
    }

    .dse-ai-chat-launcher {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .dse-ai-chat-panel {
        width: min(360px, calc(100vw - 16px)) !important;
        max-height: min(680px, calc(100dvh - 72px)) !important;
    }
}

@media (max-width: 420px) {
    body.dse-client-portal .dse-client-command-bar {
        grid-template-columns: 1fr !important;
    }

    body.dse-client-portal .dse-profile-wrap {
        padding-inline: 10px !important;
    }

    body.dse-client-portal .dse-profile-panel {
        padding: 22px 16px !important;
        border-radius: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.dse-client-portal *,
    body.dse-client-portal *::before,
    body.dse-client-portal *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}