/*
 * DSE customer portal final system layer.
 *
 * This keeps the customer experience distinct from staff operations while
 * sharing the same spacing, color, control, table, and responsive rules.
 */

:root {
    --dse-client-page: #f5f7fb;
    --dse-client-surface: #ffffff;
    --dse-client-surface-soft: #f8fafc;
    --dse-client-ink: #10203b;
    --dse-client-muted: #66758c;
    --dse-client-line: #dce5ef;
    --dse-client-blue: #2f64e9;
    --dse-client-blue-soft: #edf3ff;
    --dse-client-navy: #101b32;
    --dse-client-navy-2: #162746;
    --dse-client-radius: 14px;
    --dse-client-radius-small: 9px;
    --dse-client-gutter: clamp(12px, 2.4vw, 28px);
    --dse-client-max: 1240px;
}

html,
body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: var(--dse-client-page) !important;
    color: var(--dse-client-ink) !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-rendering: optimizeLegibility !important;
}

body::before {
    height: 5px !important;
    background: var(--dse-client-blue) !important;
}

*,
*::before,
*::after {
    min-width: 0;
    box-sizing: border-box !important;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(47, 100, 233, .30) !important;
    outline-offset: 2px !important;
}

#container,
#content,
#landing_page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#content {
    min-height: 520px !important;
    padding: 0 0 72px !important;
    overflow: visible !important;
}

#content p,
#content li,
#content td,
#content th,
#content label,
#content h1,
#content h2,
#content h3,
#content h4 {
    overflow-wrap: anywhere !important;
}

/* Customer header and navigation. */
.dse-helpdesk-top {
    background: var(--dse-client-surface) !important;
    border-bottom: 1px solid var(--dse-client-line) !important;
    box-shadow: 0 8px 24px rgba(16, 32, 59, .08) !important;
}

.dse-helpdesk-shell {
    width: min(100%, var(--dse-client-max)) !important;
    padding: 16px var(--dse-client-gutter) !important;
}

#header.dse-helpdesk-header {
    min-width: 0 !important;
    gap: 18px !important;
}

.dse-helpdesk-brand {
    min-width: 0 !important;
    gap: 14px !important;
}

#header.dse-helpdesk-header #logo img {
    max-width: 172px !important;
    max-height: 58px !important;
}

.dse-helpdesk-brand-text strong {
    color: var(--dse-client-ink) !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

.dse-helpdesk-brand-text span {
    color: var(--dse-client-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.dse-helpdesk-account {
    min-width: 0 !important;
    color: var(--dse-client-muted) !important;
}

.dse-helpdesk-account p {
    margin: 0 !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
}

.dse-helpdesk-account a {
    color: var(--dse-client-blue) !important;
    font-weight: 800 !important;
}

.dse-helpdesk-signin {
    min-height: 40px !important;
    padding: 10px 14px !important;
    border: 1px solid #b8c9ed !important;
    border-radius: var(--dse-client-radius-small) !important;
    background: var(--dse-client-blue-soft) !important;
    text-decoration: none !important;
}

.dse-helpdesk-nav-wrap {
    background: var(--dse-client-surface-soft) !important;
    border-top: 1px solid var(--dse-client-line) !important;
    border-bottom: 1px solid var(--dse-client-line) !important;
}

ul#nav.dse-helpdesk-nav {
    width: min(100%, var(--dse-client-max)) !important;
    padding: 10px var(--dse-client-gutter) !important;
    gap: 8px !important;
}

ul#nav.dse-helpdesk-nav > li > a {
    min-height: 40px !important;
    padding: 10px 14px !important;
    border: 1px solid transparent !important;
    border-radius: var(--dse-client-radius-small) !important;
    background: transparent !important;
    color: #344762 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

ul#nav.dse-helpdesk-nav li a:hover,
ul#nav.dse-helpdesk-nav li a:focus {
    border-color: #cbd8e8 !important;
    background: #ffffff !important;
    color: var(--dse-client-blue) !important;
}

ul#nav.dse-helpdesk-nav li a.active {
    border-color: var(--dse-client-blue) !important;
    background: var(--dse-client-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(47, 100, 233, .22) !important;
}

.dse-client-command-bar {
    width: min(100%, var(--dse-client-max)) !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 10px !important;
    padding: 0 var(--dse-client-gutter) 16px !important;
}

.dse-client-command-bar a {
    min-height: 66px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--dse-client-line) !important;
    border-radius: var(--dse-client-radius-small) !important;
    background: var(--dse-client-surface) !important;
    color: var(--dse-client-ink) !important;
    box-shadow: 0 5px 14px rgba(16, 32, 59, .06) !important;
}

.dse-client-command-bar a:hover,
.dse-client-command-bar a:focus {
    border-color: #b9cdf7 !important;
    background: var(--dse-client-blue-soft) !important;
    box-shadow: 0 9px 20px rgba(47, 100, 233, .14) !important;
    transform: translateY(-1px) !important;
}

.dse-client-command-bar a strong {
    color: var(--dse-client-ink) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.dse-client-command-bar a span {
    color: var(--dse-client-muted) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* Shared customer content surfaces. */
.dse-hd-wrap,
.dse-login-wrap,
.dse-open-wrap,
.dse-view-wrap,
.dse-profile-wrap,
.dse-client-tickets {
    width: min(100%, var(--dse-client-max)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 28px var(--dse-client-gutter) 72px !important;
}

.dse-hd-card,
.dse-hd-search-panel,
.dse-hd-featured,
.dse-hd-cta,
.dse-login-card,
.dse-login-helper,
.dse-login-panel,
.dse-open-form-card,
.dse-open-help-card,
.dse-open-success,
.dse-view-panel,
.dse-view-helper,
.dse-view-card,
.dse-profile-panel,
.dse-profile-helper,
#content .thread-body,
#content .search-form,
#content .featured-category.front-page,
#content .client-login,
#content #clientLogin,
#content .ticket_info,
#content .ticket-thread,
#content .thread-entry,
#content .faq-content,
#content .kb-results,
#content .profile,
#content .form_table,
#content table.form_table,
#content .tab_content {
    min-width: 0 !important;
    max-width: 100% !important;
    background: var(--dse-client-surface) !important;
    border: 1px solid var(--dse-client-line) !important;
    border-radius: var(--dse-client-radius) !important;
    box-shadow: 0 8px 22px rgba(16, 32, 59, .07) !important;
    color: var(--dse-client-ink) !important;
}

#content .thread-body,
#content .search-form,
#content .featured-category.front-page,
#content .client-login,
#content #clientLogin,
#content .ticket_info,
#content .ticket-thread,
#content .thread-entry,
#content .faq-content,
#content .kb-results,
#content .profile,
#content .form_table,
#content table.form_table,
#content .tab_content {
    margin-bottom: 22px !important;
    padding: 24px !important;
}

/* Correct dark-theme text that older client layers applied inside light cards. */
.dse-login-panel h1,
.dse-login-panel h2,
.dse-login-panel h3,
.dse-login-helper h1,
.dse-login-helper h2,
.dse-login-helper h3,
.dse-open-form-card h1,
.dse-open-form-card h2,
.dse-open-form-card h3,
.dse-open-help-card h1,
.dse-open-help-card h2,
.dse-open-help-card h3,
.dse-view-panel h1,
.dse-view-panel h2,
.dse-view-panel h3,
.dse-profile-panel h1,
.dse-profile-panel h2,
.dse-profile-panel h3 {
    color: var(--dse-client-ink) !important;
}

.dse-login-panel p,
.dse-login-helper p,
.dse-open-form-card p,
.dse-open-help-card p,
.dse-view-panel p,
.dse-profile-panel p {
    color: var(--dse-client-muted) !important;
}

.dse-login-panel label,
.dse-login-helper label,
.dse-open-form-card label,
.dse-open-help-card label,
.dse-view-panel label,
.dse-profile-panel label {
    color: #344762 !important;
}

#content .dse-login-wrap .dse-login-panel h1,
#content .dse-login-wrap .dse-login-panel h2,
#content .dse-login-wrap .dse-login-panel h3,
#content .dse-login-wrap .dse-login-helper h1,
#content .dse-login-wrap .dse-login-helper h2,
#content .dse-login-wrap .dse-login-helper h3 {
    color: var(--dse-client-ink) !important;
}

body #content .dse-login-wrap .dse-login-field label,
body #content .dse-login-wrap .dse-login-panel label {
    color: #344762 !important;
}

body #content .dse-login-wrap .dse-login-panel-footer span {
    color: var(--dse-client-muted) !important;
}

/* Keep prominent page introductions consistent with the staff workspace. */
#content > h1:not(.plain),
#content > h2:not(.plain),
.dse-hd-hero,
.dse-login-hero,
.dse-open-hero,
.dse-view-hero,
.dse-profile-hero,
.dse-ticket-hero {
    max-width: 1080px !important;
    margin: 0 auto 24px !important;
    padding: 38px clamp(22px, 5vw, 48px) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--dse-client-navy) 0%, var(--dse-client-navy-2) 100%) !important;
    box-shadow: 0 12px 30px rgba(16, 32, 59, .16) !important;
    color: #ffffff !important;
}

#content > h1:not(.plain),
#content > h2:not(.plain),
.dse-hd-hero h1,
.dse-login-hero h1,
.dse-open-hero h1,
.dse-view-hero h1,
.dse-profile-hero h1,
.dse-ticket-hero h1 {
    line-height: 1.16 !important;
    overflow-wrap: anywhere !important;
}

.dse-hd-hero p,
.dse-login-hero p,
.dse-open-hero p,
.dse-view-hero p,
.dse-profile-hero p,
.dse-ticket-hero p {
    color: #dbeafe !important;
    line-height: 1.6 !important;
}

/* Controls, messages, rich text, and file uploads. */
#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="password"],
#content input[type="number"],
#content input[type="search"],
#content input[type="url"],
#content input[type="date"],
#content input[type="time"],
#content input[type="datetime-local"],
#content input[type="file"],
#content select,
#content textarea {
    width: min(100%, 640px) !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border: 1px solid #cbd8e8 !important;
    border-radius: var(--dse-client-radius-small) !important;
    background: #ffffff !important;
    color: var(--dse-client-ink) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

#content textarea {
    min-height: 124px !important;
    resize: vertical !important;
}

#content input[type="submit"],
#content input[type="button"],
#content input[type="reset"],
#content button,
#content .button,
#content a.button,
#content .dse-open-button,
#content .dse-login-button,
#content .dse-view-button,
#content .dse-profile-button,
#content .dse-ticket-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    max-width: 100% !important;
    padding: 9px 14px !important;
    border: 1px solid #b9cdf7 !important;
    border-radius: var(--dse-client-radius-small) !important;
    background: var(--dse-client-blue) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    cursor: pointer !important;
    box-shadow: 0 7px 16px rgba(47, 100, 233, .18) !important;
}

#content input[type="reset"],
#content .cancel,
#content .cancel.button,
#content .secondary,
#content .dse-ticket-button.secondary {
    border-color: var(--dse-client-line) !important;
    background: var(--dse-client-surface) !important;
    color: var(--dse-client-ink) !important;
    box-shadow: none !important;
}

#content label,
#content th,
#content .field-label,
#content .dse-open-field-label {
    color: #344762 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

#content .redactor-box {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: 1px solid #cbd8e8 !important;
    border-radius: var(--dse-client-radius-small) !important;
    background: #ffffff !important;
}

#content .redactor-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-height: 44px !important;
    padding: 7px !important;
    background: var(--dse-client-navy) !important;
    border: 0 !important;
}

#content .redactor-editor {
    min-height: 180px !important;
    padding: 14px !important;
    color: var(--dse-client-ink) !important;
    background: #ffffff !important;
    line-height: 1.6 !important;
}

#content .filedrop,
#content .dropzone,
#content .dse-filedrop {
    width: 100% !important;
    min-height: 56px !important;
    margin-top: 10px !important;
    padding: 14px !important;
    border: 1px dashed #aebed3 !important;
    border-radius: var(--dse-client-radius-small) !important;
    background: var(--dse-client-surface-soft) !important;
    color: var(--dse-client-muted) !important;
}

#msg_error,
#msg_warning,
#msg_notice,
.error_bar,
.warning_bar,
.notice_bar {
    width: min(calc(100% - 2 * var(--dse-client-gutter)), 1100px) !important;
    margin: 16px auto !important;
    padding: 13px 16px !important;
    border-radius: var(--dse-client-radius-small) !important;
    line-height: 1.5 !important;
}

/* Tables scroll horizontally rather than becoming unreadable. */
#content .dse-ticket-table-wrap,
#content .table-wrap,
#content .table-container,
#content .table-responsive,
#content .table-scroll,
#content .results,
#content .overflow-x {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

#content table.list,
#content table.grid,
#content table.fixed,
#content table.ticket_info,
#content table.dse-ticket-table {
    width: 100% !important;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#content table.list th,
#content table.list td,
#content table.grid th,
#content table.grid td,
#content table.fixed th,
#content table.fixed td,
#content table.ticket_info th,
#content table.ticket_info td,
#content table.dse-ticket-table th,
#content table.dse-ticket-table td {
    padding: 11px 12px !important;
    vertical-align: top !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

#content table.list th,
#content table.grid th,
#content table.fixed th,
#content table.ticket_info th,
#content table.dse-ticket-table th {
    color: #52647d !important;
    background: #f3f7fc !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

#content table.list td,
#content table.grid td,
#content table.fixed td,
#content table.ticket_info td,
#content table.dse-ticket-table td {
    color: var(--dse-client-ink) !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--dse-client-line) !important;
    font-size: 13px !important;
}

/* Keep ticket-specific panels aligned with the lighter staff data surfaces. */
#content .dse-ticket-panel {
    overflow: hidden !important;
    background: var(--dse-client-surface) !important;
    border-color: var(--dse-client-line) !important;
    color: var(--dse-client-ink) !important;
}

#content .dse-ticket-panel-head {
    background: var(--dse-client-surface-soft) !important;
    border-bottom-color: var(--dse-client-line) !important;
}

#content .dse-ticket-panel h2,
#content .dse-ticket-panel p {
    color: var(--dse-client-ink) !important;
}

#content .dse-ticket-panel p {
    color: var(--dse-client-muted) !important;
}

#content .dse-ticket-state {
    border-color: #cbd8e8 !important;
    background: #ffffff !important;
    color: #344762 !important;
}

#content .dse-ticket-state.active {
    border-color: var(--dse-client-blue) !important;
    background: var(--dse-client-blue) !important;
    color: #ffffff !important;
}

@media (max-width: 980px) {
    #header.dse-helpdesk-header {
        flex-wrap: wrap !important;
    }

    .dse-helpdesk-account {
        width: 100% !important;
        text-align: left !important;
    }

    .dse-helpdesk-flags {
        justify-content: flex-start !important;
    }

    #content .dse-ticket-panel-head {
        grid-template-columns: 1fr !important;
    }

    #content .dse-ticket-states {
        justify-content: flex-start !important;
    }
}

@media (max-width: 720px) {
    .dse-helpdesk-brand-text span {
        display: none !important;
    }

    body .dse-helpdesk-nav-wrap {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

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

    body ul#nav.dse-helpdesk-nav > li {
        flex: initial !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body ul#nav.dse-helpdesk-nav > li > a {
        width: 100% !important;
        min-height: 42px !important;
        padding: 10px 13px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    .dse-client-command-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dse-hd-wrap,
    .dse-login-wrap,
    .dse-open-wrap,
    .dse-view-wrap,
    .dse-profile-wrap,
    .dse-client-tickets {
        padding-top: 20px !important;
        padding-bottom: 56px !important;
    }

    #content > h1:not(.plain),
    #content > h2:not(.plain),
    .dse-hd-hero,
    .dse-login-hero,
    .dse-open-hero,
    .dse-view-hero,
    .dse-profile-hero,
    .dse-ticket-hero {
        padding: 28px 22px !important;
        border-radius: 14px !important;
    }

    #content .thread-body,
    #content .search-form,
    #content .featured-category.front-page,
    #content .client-login,
    #content #clientLogin,
    #content .ticket_info,
    #content .ticket-thread,
    #content .thread-entry,
    #content .faq-content,
    #content .kb-results,
    #content .profile,
    #content .form_table,
    #content table.form_table,
    #content .tab_content {
        padding: 18px !important;
        border-radius: 12px !important;
    }

    #content table.list,
    #content table.grid,
    #content table.fixed,
    #content table.ticket_info,
    #content table.dse-ticket-table {
        min-width: 680px !important;
    }

    #content table.form_table,
    #content table.form_table tbody,
    #content table.form_table tr,
    #content table.form_table th,
    #content table.form_table td,
    #content table.form-table,
    #content table.form-table tbody,
    #content table.form-table tr,
    #content table.form-table th,
    #content table.form-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #content table.form_table tr,
    #content table.form-table tr {
        margin-bottom: 12px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--dse-client-line) !important;
    }

    #content table.form_table th,
    #content table.form_table td,
    #content table.form-table th,
    #content table.form-table td {
        padding: 4px 0 !important;
        border: 0 !important;
    }

    #content input[type="text"],
    #content input[type="email"],
    #content input[type="tel"],
    #content input[type="password"],
    #content input[type="number"],
    #content input[type="search"],
    #content input[type="url"],
    #content input[type="date"],
    #content input[type="time"],
    #content input[type="datetime-local"],
    #content input[type="file"],
    #content select,
    #content textarea,
    #content input[type="submit"],
    #content input[type="button"],
    #content input[type="reset"],
    #content button,
    #content .button,
    #content a.button {
        width: 100% !important;
        max-width: 100% !important;
    }

    #content .dse-open-form-actions,
    #content .dse-ticket-actions,
    #content .buttons,
    #content .form-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

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

    .dse-helpdesk-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .dse-helpdesk-account p {
        font-size: 13px !important;
    }

    body ul#nav.dse-helpdesk-nav {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #content .redactor-editor {
        min-height: 150px !important;
        padding: 12px !important;
    }
}

@media (max-width: 380px) {
    body ul#nav.dse-helpdesk-nav {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}