/**
 * DSE helpdesk brand alignment.
 *
 * Final visual authority shared by the customer portal, staff workspace,
 * knowledgebase, documentation, and authentication screens. Tokens mirror
 * the public DSE site while preserving the denser workflows needed in a PSA.
 */

:root {
    --dse-brand-navy: #0b1324;
    --dse-brand-navy-soft: #15233b;
    --dse-brand-blue: #275df5;
    --dse-brand-blue-hover: #1947c7;
    --dse-brand-cyan: #0b6f85;
    --dse-brand-cyan-bright: #54cbe8;
    --dse-brand-yellow: #f3df2b;
    --dse-brand-ink: #151b2b;
    --dse-brand-text: #2f3a4d;
    --dse-brand-muted: #65738b;
    --dse-brand-canvas: #ffffff;
    --dse-brand-surface: #f5f7fb;
    --dse-brand-surface-strong: #eaf0f8;
    --dse-brand-border: #cfdaea;
    --dse-brand-border-strong: #aebdd2;
    --dse-brand-success: #147a57;
    --dse-brand-warning: #9b6500;
    --dse-brand-danger: #b42336;
    --dse-brand-info: #176b9b;
    --dse-brand-on-dark: #f8fbff;
    --dse-brand-muted-on-dark: #d8e2ef;
    --dse-brand-font-body: "Segoe UI", Arial, Helvetica, sans-serif;
    --dse-brand-font-display: Aldrich, "Segoe UI", Arial, Helvetica, sans-serif;
    --dse-brand-radius-small: 4px;
    --dse-brand-radius: 8px;
    --dse-brand-shadow-small: 0 1px 2px rgba(11, 19, 36, .08);
    --dse-brand-shadow: 0 12px 32px rgba(11, 19, 36, .12);
    --dse-brand-focus: 0 0 0 3px var(--dse-brand-yellow), 0 0 0 5px var(--dse-brand-navy);
    --dse-brand-container: 75rem;

    /* Normalize the aliases used by earlier helpdesk layers. */
    --dse-client-page: var(--dse-brand-surface);
    --dse-client-surface: var(--dse-brand-canvas);
    --dse-client-surface-soft: var(--dse-brand-surface);
    --dse-client-ink: var(--dse-brand-ink);
    --dse-client-muted: var(--dse-brand-muted);
    --dse-client-line: var(--dse-brand-border);
    --dse-client-blue: var(--dse-brand-blue);
    --dse-client-blue-soft: #edf3ff;
    --dse-client-navy: var(--dse-brand-navy);
    --dse-client-navy-2: var(--dse-brand-navy-soft);
    --dse-client-radius: var(--dse-brand-radius);
    --dse-client-radius-small: var(--dse-brand-radius-small);
    --dse-entry-page: var(--dse-brand-surface);
    --dse-entry-surface: var(--dse-brand-canvas);
    --dse-entry-surface-soft: var(--dse-brand-surface);
    --dse-entry-ink: var(--dse-brand-ink);
    --dse-entry-muted: var(--dse-brand-muted);
    --dse-entry-line: var(--dse-brand-border);
    --dse-entry-blue: var(--dse-brand-blue);
    --dse-entry-blue-soft: #edf3ff;
    --dse-entry-navy: var(--dse-brand-navy);
    --dse-entry-radius: var(--dse-brand-radius);
    --dse-entry-radius-small: var(--dse-brand-radius-small);
    --dse-final-page: var(--dse-brand-surface);
    --dse-final-surface: var(--dse-brand-canvas);
    --dse-final-surface-soft: var(--dse-brand-surface);
    --dse-final-ink: var(--dse-brand-ink);
    --dse-final-muted: var(--dse-brand-muted);
    --dse-final-line: var(--dse-brand-border);
    --dse-final-blue: var(--dse-brand-blue);
    --dse-final-blue-soft: #edf3ff;
    --dse-final-radius: var(--dse-brand-radius);
    --dse-final-radius-small: var(--dse-brand-radius-small);
}

html {
    text-size-adjust: 100%;
}

body.dse-client-portal,
body.dse-agent-panel,
body.dse-admin-panel,
body.dse-staff-login {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: var(--dse-brand-surface) !important;
    color: var(--dse-brand-text) !important;
    font-family: var(--dse-brand-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: antialiased;
}

body.dse-client-portal::before,
body.dse-agent-panel::before,
body.dse-admin-panel::before,
body.dse-staff-login::before {
    height: 5px !important;
    background: var(--dse-brand-blue) !important;
}

body.dse-client-portal *,
body.dse-client-portal *::before,
body.dse-client-portal *::after,
body.dse-agent-panel *,
body.dse-agent-panel *::before,
body.dse-agent-panel *::after,
body.dse-admin-panel *,
body.dse-admin-panel *::before,
body.dse-admin-panel *::after,
body.dse-staff-login *,
body.dse-staff-login *::before,
body.dse-staff-login *::after {
    box-sizing: border-box;
}

body.dse-client-portal :where(h1, h2, h3, h4, h5, h6),
body.dse-agent-panel :where(h1, h2, h3, h4, h5, h6),
body.dse-admin-panel :where(h1, h2, h3, h4, h5, h6),
body.dse-staff-login :where(h1, h2, h3, h4, h5, h6) {
    color: var(--dse-brand-ink);
    font-family: var(--dse-brand-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

body.dse-client-portal :where(p, a, button, input, select, textarea, label, summary),
body.dse-agent-panel :where(p, a, button, input, select, textarea, label, summary),
body.dse-admin-panel :where(p, a, button, input, select, textarea, label, summary),
body.dse-staff-login :where(p, a, button, input, select, textarea, label, summary) {
    letter-spacing: 0 !important;
}

body.dse-client-portal a,
body.dse-agent-panel a,
body.dse-admin-panel a {
    color: var(--dse-brand-blue);
    text-underline-offset: 3px;
}

body.dse-client-portal a:hover,
body.dse-agent-panel a:hover,
body.dse-admin-panel a:hover {
    color: var(--dse-brand-blue-hover);
}

body.dse-client-portal :where(a, button, input, select, textarea, summary):focus-visible,
body.dse-agent-panel :where(a, button, input, select, textarea, summary):focus-visible,
body.dse-admin-panel :where(a, button, input, select, textarea, summary):focus-visible,
body.dse-staff-login :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 0 !important;
    box-shadow: var(--dse-brand-focus) !important;
}

/* Customer portal shell */
body.dse-client-portal .dse-helpdesk-top {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dse-brand-border) !important;
    background: var(--dse-brand-canvas) !important;
    box-shadow: none !important;
}

body.dse-client-portal .dse-helpdesk-shell {
    width: min(calc(100% - 3rem), var(--dse-brand-container)) !important;
    max-width: var(--dse-brand-container) !important;
    margin: 0 auto !important;
    padding: 16px 0 !important;
}

body.dse-client-portal #header.dse-helpdesk-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dse-client-portal .dse-helpdesk-brand {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

body.dse-client-portal #header.dse-helpdesk-header #logo {
    display: inline-flex !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-navy) !important;
    box-shadow: var(--dse-brand-shadow-small) !important;
}

body.dse-client-portal #header.dse-helpdesk-header #logo .valign-helper {
    display: none !important;
}

body.dse-client-portal #header.dse-helpdesk-header #logo img {
    display: block !important;
    width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

body.dse-client-portal .dse-helpdesk-brand-text {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body.dse-client-portal .dse-helpdesk-brand-text strong {
    color: var(--dse-brand-ink) !important;
    font-family: var(--dse-brand-font-display) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

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

body.dse-client-portal .dse-helpdesk-account {
    min-width: 0 !important;
    color: var(--dse-brand-muted) !important;
    font-size: 13px !important;
    text-align: right !important;
}

body.dse-client-portal .dse-helpdesk-account p {
    margin: 0 !important;
}

body.dse-client-portal .dse-helpdesk-account a {
    display: inline-flex !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 2px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-ink) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

body.dse-client-portal .dse-helpdesk-account a.dse-helpdesk-signin {
    border-color: var(--dse-brand-blue) !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
}

body.dse-client-portal .dse-helpdesk-nav-wrap {
    width: min(calc(100% - 3rem), var(--dse-brand-container)) !important;
    max-width: var(--dse-brand-container) !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dse-client-portal ul#nav.dse-helpdesk-nav {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    box-shadow: var(--dse-brand-shadow-small) !important;
}

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

body.dse-client-portal ul#nav.dse-helpdesk-nav > li > a {
    display: inline-flex !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--dse-brand-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: normal !important;
}

body.dse-client-portal ul#nav.dse-helpdesk-nav > li > a:hover {
    background: var(--dse-brand-surface-strong) !important;
    color: var(--dse-brand-ink) !important;
}

body.dse-client-portal ul#nav.dse-helpdesk-nav > li > a.active {
    border-color: var(--dse-brand-blue) !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
}

body.dse-client-portal .dse-client-command-bar {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dse-client-portal .dse-client-command-bar a {
    display: grid !important;
    min-height: 62px !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-text) !important;
    box-shadow: var(--dse-brand-shadow-small) !important;
    text-decoration: none !important;
}

body.dse-client-portal .dse-client-command-bar a:hover {
    border-color: var(--dse-brand-border-strong) !important;
    background: var(--dse-brand-surface) !important;
}

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

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

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

body.dse-client-portal #content {
    width: 100% !important;
    min-height: 32rem !important;
    padding: 20px 0 64px !important;
}

body.dse-client-portal #footer {
    width: min(calc(100% - 3rem), var(--dse-brand-container)) !important;
    max-width: var(--dse-brand-container) !important;
    margin: 0 auto !important;
    padding: 24px 0 32px !important;
    border-top: 1px solid var(--dse-brand-border) !important;
    color: var(--dse-brand-muted) !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* Customer content, entry points, and knowledgebase */
body.dse-client-portal :where(
    .dse-hd-wrap,
    .dse-login-wrap,
    .dse-open-ticket,
    .dse-kb-shell,
    .dse-docs
) {
    width: min(calc(100% - 3rem), var(--dse-brand-container)) !important;
    max-width: var(--dse-brand-container) !important;
    margin-inline: auto !important;
}

body.dse-client-portal :where(
    .dse-hd-company-link,
    .dse-hd-card,
    .dse-hd-kb-callout,
    .dse-login-panel,
    .dse-login-card,
    .dse-open-card,
    .dse-kb-panel,
    .dse-kb-side-card,
    .faq-content,
    .dse-docs-intro,
    .dse-doc-card,
    .dse-docs-article,
    .dse-docs-sidebar,
    .dse-docs-email-callout
) {
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-text) !important;
    box-shadow: var(--dse-brand-shadow-small) !important;
}

body.dse-client-portal :where(
    .dse-hd-hero,
    .dse-hd-cta,
    .dse-login-hero,
    .dse-open-hero,
    .dse-kb-hero,
    .dse-docs-hero,
    .dse-docs-footer-cta
) {
    border: 1px solid rgba(207, 218, 234, .28) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-navy) !important;
    color: var(--dse-brand-on-dark) !important;
    box-shadow: var(--dse-brand-shadow) !important;
}

body.dse-client-portal :where(
    .dse-hd-hero,
    .dse-hd-cta,
    .dse-login-hero,
    .dse-open-hero,
    .dse-kb-hero,
    .dse-docs-hero,
    .dse-docs-footer-cta
) :where(h1, h2, h3, p, strong) {
    color: var(--dse-brand-on-dark) !important;
}

body.dse-client-portal :where(
    .dse-hd-kicker,
    .dse-hd-label,
    .dse-login-kicker,
    .dse-open-kicker,
    .dse-kb-kicker,
    .dse-docs-hero-copy > span,
    .dse-docs-intro > span,
    .dse-doc-card > span,
    .dse-docs-article-head > span
) {
    color: var(--dse-brand-cyan) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

body.dse-client-portal :where(
    .dse-hd-hero,
    .dse-hd-cta,
    .dse-login-hero,
    .dse-open-hero,
    .dse-kb-hero,
    .dse-docs-hero,
    .dse-docs-footer-cta
) :where(
    .dse-hd-kicker,
    .dse-hd-label,
    .dse-login-kicker,
    .dse-open-kicker,
    .dse-kb-kicker,
    .dse-docs-hero-copy > span
) {
    color: var(--dse-brand-cyan-bright) !important;
}

body.dse-client-portal :where(.dse-hd-hero h1, .dse-login-hero h1, .dse-open-hero h1, .dse-kb-hero h1, .dse-docs-hero h1) {
    margin-block: 10px 14px !important;
    font-size: 40px !important;
    line-height: 1.12 !important;
}

body.dse-client-portal :where(.dse-hd-card h2, .dse-hd-kb-callout h2, .dse-login-card h2, .dse-kb-panel h2, .dse-docs-intro h2, .dse-docs-article h2) {
    color: var(--dse-brand-ink) !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
}

body.dse-client-portal :where(.dse-hd-button, .dse-login-button, .dse-open-button, .dse-kb-button, .dse-docs-hero-actions a, .dse-docs-footer-cta a) {
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--dse-brand-blue) !important;
    border-radius: var(--dse-brand-radius) !important;
    padding: 10px 16px !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
    font-family: var(--dse-brand-font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.dse-client-portal :where(.dse-hd-button.secondary, .dse-login-button.secondary, .dse-open-button.secondary, .dse-docs-hero-actions a:nth-child(3)) {
    border-color: rgba(216, 226, 239, .64) !important;
    background: transparent !important;
    color: var(--dse-brand-on-dark) !important;
}

body.dse-client-portal :where(.dse-hd-button, .dse-login-button, .dse-open-button, .dse-kb-button, .dse-docs-hero-actions a, .dse-docs-footer-cta a):hover {
    border-color: var(--dse-brand-yellow) !important;
    background: var(--dse-brand-yellow) !important;
    color: var(--dse-brand-navy) !important;
}

body.dse-client-portal .dse-hd-company-link {
    grid-template-columns: 60px minmax(0, 1fr) auto !important;
    gap: 16px !important;
    padding: 18px !important;
}

body.dse-client-portal .dse-hd-company-mark {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-navy) !important;
}

body.dse-client-portal .dse-hd-company-copy h2 {
    margin: 2px 0 4px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
}

body.dse-client-portal .dse-hd-company-button {
    border-radius: var(--dse-brand-radius) !important;
    color: var(--dse-brand-blue) !important;
}

body.dse-client-portal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
    min-height: 44px !important;
    border: 1px solid var(--dse-brand-border-strong) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-ink) !important;
    padding: 10px 12px !important;
    font: inherit !important;
    box-shadow: none !important;
}

body.dse-client-portal :where(button, input[type="submit"], input[type="button"], a.button, .button) {
    min-height: 44px !important;
    border: 1px solid var(--dse-brand-blue) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

body.dse-client-portal :where(table) {
    border-color: var(--dse-brand-border) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-text) !important;
}

body.dse-client-portal :where(th) {
    background: var(--dse-brand-surface-strong) !important;
    color: var(--dse-brand-ink) !important;
}

body.dse-client-portal :where(td, th) {
    border-color: var(--dse-brand-border) !important;
}

/* Public client documentation */
body.dse-client-portal #content .dse-docs {
    padding: 14px 0 72px !important;
    background: transparent !important;
    color: var(--dse-brand-text) !important;
    font-family: var(--dse-brand-font-body) !important;
}

body.dse-client-portal #content .dse-docs-hero {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 28px !important;
}

body.dse-client-portal #content .dse-docs-brand {
    min-height: 88px !important;
    padding: 8px !important;
    border: 1px solid rgba(216, 226, 239, .32) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-navy-soft) !important;
    box-shadow: none !important;
}

body.dse-client-portal #content .dse-docs-brand img {
    width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    object-fit: contain !important;
}

body.dse-client-portal #content .dse-docs-grid {
    gap: 12px !important;
}

body.dse-client-portal #content .dse-doc-card {
    min-height: 0 !important;
    padding: 20px !important;
}

body.dse-client-portal #content .dse-doc-card strong {
    color: var(--dse-brand-ink) !important;
    font-family: var(--dse-brand-font-display) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

body.dse-client-portal #content .dse-doc-card em,
body.dse-client-portal #content .dse-docs-intro p,
body.dse-client-portal #content .dse-docs-article p,
body.dse-client-portal #content .dse-docs-section li {
    color: var(--dse-brand-muted) !important;
}

body.dse-client-portal #content .dse-docs-layout {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 16px !important;
}

/* Staff workspace shell */
body.dse-agent-panel,
body.dse-admin-panel {
    background: var(--dse-brand-surface) !important;
    color: var(--dse-brand-text) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.dse-agent-panel .dse-scp-page-shell,
body.dse-admin-panel .dse-scp-page-shell,
body.dse-agent-panel #pjax-container,
body.dse-admin-panel #pjax-container,
body.dse-agent-panel #content,
body.dse-admin-panel #content {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.dse-agent-panel .dse-scp-page-shell,
body.dse-admin-panel .dse-scp-page-shell {
    width: min(calc(100% - 2rem), 115rem) !important;
    margin-inline: auto !important;
    padding: 16px 0 0 !important;
}

body.dse-agent-panel .dse-scp-header-card,
body.dse-admin-panel .dse-scp-header-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem) !important;
    gap: 20px !important;
    align-items: center !important;
    padding: 18px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-text) !important;
    box-shadow: var(--dse-brand-shadow-small) !important;
}

body.dse-agent-panel .dse-scp-brand,
body.dse-admin-panel .dse-scp-brand {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
}

body.dse-agent-panel #logo.dse-scp-logo,
body.dse-admin-panel #logo.dse-scp-logo {
    display: inline-flex !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-navy) !important;
    box-shadow: none !important;
}

body.dse-agent-panel #logo.dse-scp-logo img,
body.dse-admin-panel #logo.dse-scp-logo img {
    width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

body.dse-agent-panel .dse-scp-title-block,
body.dse-admin-panel .dse-scp-title-block {
    display: grid !important;
    gap: 2px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dse-agent-panel .dse-scp-kicker,
body.dse-admin-panel .dse-scp-kicker {
    color: var(--dse-brand-cyan) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

body.dse-agent-panel .dse-scp-title,
body.dse-admin-panel .dse-scp-title {
    margin: 0 !important;
    color: var(--dse-brand-ink) !important;
    font-family: var(--dse-brand-font-display) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

body.dse-agent-panel .dse-scp-subtitle,
body.dse-admin-panel .dse-scp-subtitle {
    margin: 0 !important;
    color: var(--dse-brand-muted) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

body.dse-agent-panel #info.dse-scp-account,
body.dse-admin-panel #info.dse-scp-account {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 10px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-surface) !important;
    color: var(--dse-brand-text) !important;
    box-shadow: none !important;
}

body.dse-agent-panel .dse-scp-welcome,
body.dse-admin-panel .dse-scp-welcome,
body.dse-agent-panel #info.dse-scp-account strong,
body.dse-admin-panel #info.dse-scp-account strong {
    color: var(--dse-brand-ink) !important;
}

body.dse-agent-panel .dse-scp-account-links,
body.dse-admin-panel .dse-scp-account-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

body.dse-agent-panel #info.dse-scp-account a,
body.dse-admin-panel #info.dse-scp-account a {
    display: inline-flex !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: 6px !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-ink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.dse-agent-panel #info.dse-scp-account a.dse-scp-admin-link,
body.dse-admin-panel #info.dse-scp-account a.dse-scp-admin-link {
    border-color: var(--dse-brand-blue) !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
}

body.dse-agent-panel #info.dse-scp-account a.dse-scp-logout-link,
body.dse-admin-panel #info.dse-scp-account a.dse-scp-logout-link {
    border-color: #e9b9c0 !important;
    background: #fff1f3 !important;
    color: var(--dse-brand-danger) !important;
}

body.dse-agent-panel .dse-psa-command-bar,
body.dse-admin-panel .dse-psa-command-bar {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.dse-agent-panel .dse-psa-command-bar a,
body.dse-admin-panel .dse-psa-command-bar a {
    display: grid !important;
    min-height: 58px !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-text) !important;
    box-shadow: var(--dse-brand-shadow-small) !important;
    text-decoration: none !important;
}

body.dse-agent-panel .dse-psa-command-bar a strong,
body.dse-admin-panel .dse-psa-command-bar a strong {
    color: var(--dse-brand-ink) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

body.dse-agent-panel .dse-psa-command-bar a span,
body.dse-admin-panel .dse-psa-command-bar a span {
    color: var(--dse-brand-muted) !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

body.dse-agent-panel .dse-scp-nav-card,
body.dse-admin-panel .dse-scp-nav-card,
body.dse-agent-panel .dse-scp-subnav-card,
body.dse-admin-panel .dse-scp-subnav-card {
    border-radius: var(--dse-brand-radius) !important;
    box-shadow: var(--dse-brand-shadow-small) !important;
}

body.dse-agent-panel .dse-scp-nav-card,
body.dse-admin-panel .dse-scp-nav-card {
    border: 1px solid var(--dse-brand-border) !important;
    background: var(--dse-brand-canvas) !important;
}

body.dse-agent-panel .dse-scp-subnav-card,
body.dse-admin-panel .dse-scp-subnav-card {
    border: 1px solid rgba(207, 218, 234, .24) !important;
    background: var(--dse-brand-navy) !important;
}

body.dse-agent-panel #content,
body.dse-admin-panel #content {
    color: var(--dse-brand-text) !important;
}

body.dse-agent-panel #content :where(h1, h2, h3, h4),
body.dse-admin-panel #content :where(h1, h2, h3, h4) {
    color: var(--dse-brand-ink);
}

body.dse-agent-panel #content :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea),
body.dse-admin-panel #content :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
    min-height: 42px !important;
    border: 1px solid var(--dse-brand-border-strong) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-ink) !important;
    padding: 9px 11px !important;
    box-shadow: none !important;
}

body.dse-agent-panel #content :where(button, input[type="submit"], input[type="button"], a.button, .button),
body.dse-admin-panel #content :where(button, input[type="submit"], input[type="button"], a.button, .button) {
    min-height: 42px !important;
    border-radius: var(--dse-brand-radius) !important;
    box-shadow: none !important;
}

body.dse-agent-panel #content :where(table),
body.dse-admin-panel #content :where(table) {
    border-color: var(--dse-brand-border) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-text) !important;
}

body.dse-agent-panel #content :where(th),
body.dse-admin-panel #content :where(th) {
    border-color: var(--dse-brand-border) !important;
    background: var(--dse-brand-surface-strong) !important;
    color: var(--dse-brand-ink) !important;
}

body.dse-agent-panel #content :where(td),
body.dse-admin-panel #content :where(td) {
    border-color: var(--dse-brand-border) !important;
}

body.dse-agent-panel :where(#msg_notice, #notice_bar, .success-banner),
body.dse-admin-panel :where(#msg_notice, #notice_bar, .success-banner),
body.dse-client-portal :where(#msg_notice, .notice_bar) {
    border: 1px solid #9fd6c4 !important;
    border-left: 4px solid var(--dse-brand-success) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: #eef9f4 !important;
    color: #0d5d42 !important;
}

body.dse-agent-panel :where(#msg_warning, #warning_bar, .warning-banner),
body.dse-admin-panel :where(#msg_warning, #warning_bar, .warning-banner),
body.dse-client-portal :where(#msg_warning, .warning_bar) {
    border: 1px solid #e8cf8e !important;
    border-left: 4px solid var(--dse-brand-warning) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: #fff8e5 !important;
    color: #6f4900 !important;
}

body.dse-agent-panel :where(#msg_error, #error_bar, .error-banner),
body.dse-admin-panel :where(#msg_error, #error_bar, .error-banner),
body.dse-client-portal :where(#msg_error, .error_bar) {
    border: 1px solid #e9b9c0 !important;
    border-left: 4px solid var(--dse-brand-danger) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: #fff1f3 !important;
    color: #8f1d2d !important;
}

/* Standalone staff authentication */
body.dse-staff-login {
    min-height: 100vh !important;
    background: var(--dse-brand-navy) !important;
    color: var(--dse-brand-muted-on-dark) !important;
}

body.dse-staff-login .dse-scp-page {
    min-height: calc(100vh - 5px) !important;
    padding: 32px 20px !important;
}

body.dse-staff-login .dse-scp-shell {
    width: min(100%, var(--dse-brand-container)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem) !important;
    gap: 20px !important;
}

body.dse-staff-login .dse-scp-brand,
body.dse-staff-login .dse-scp-login {
    border: 1px solid rgba(207, 218, 234, .24) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-navy-soft) !important;
    color: var(--dse-brand-on-dark) !important;
    box-shadow: var(--dse-brand-shadow) !important;
}

body.dse-staff-login .dse-scp-brand {
    padding: 40px !important;
}

body.dse-staff-login .dse-scp-login {
    padding: 32px !important;
}

body.dse-staff-login .dse-scp-login-brand {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

body.dse-staff-login .dse-scp-login-brand img {
    width: 52px !important;
    height: 52px !important;
    padding: 4px !important;
    border: 1px solid rgba(207, 218, 234, .28) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-navy) !important;
    object-fit: contain !important;
}

body.dse-staff-login .dse-scp-login-brand strong {
    display: block !important;
    color: var(--dse-brand-on-dark) !important;
    font-family: var(--dse-brand-font-display) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}

body.dse-staff-login .dse-scp-login-brand span {
    display: block !important;
    color: var(--dse-brand-muted-on-dark) !important;
    font-size: 12px !important;
}

body.dse-staff-login .dse-scp-kicker {
    color: var(--dse-brand-cyan-bright) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

body.dse-staff-login :where(.dse-scp-brand h1, .dse-scp-login h1) {
    color: var(--dse-brand-on-dark) !important;
    font-size: 36px !important;
    line-height: 1.15 !important;
}

body.dse-staff-login :where(.dse-scp-brand p, .dse-scp-login p) {
    color: var(--dse-brand-muted-on-dark) !important;
}

body.dse-staff-login .dse-scp-list li {
    border: 1px solid rgba(207, 218, 234, .20) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: rgba(11, 19, 36, .54) !important;
    color: var(--dse-brand-muted-on-dark) !important;
}

body.dse-staff-login .dse-scp-alert {
    border-radius: var(--dse-brand-radius) !important;
    border-color: rgba(84, 203, 232, .54) !important;
    background: #102747 !important;
    color: var(--dse-brand-on-dark) !important;
}

body.dse-staff-login .dse-scp-field label {
    color: var(--dse-brand-on-dark) !important;
}

body.dse-staff-login .dse-scp-field input {
    min-height: 48px !important;
    border: 1px solid var(--dse-brand-border-strong) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-ink) !important;
}

body.dse-staff-login .dse-scp-submit {
    min-height: 48px !important;
    border: 1px solid var(--dse-brand-blue) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
    box-shadow: none !important;
}

body.dse-staff-login .dse-scp-submit:hover {
    border-color: var(--dse-brand-yellow) !important;
    background: var(--dse-brand-yellow) !important;
    color: var(--dse-brand-navy) !important;
    filter: none !important;
}

/* High-specificity guardrails for legacy page-local rules. */
body.dse-client-portal #content #landing_page.dse-hd-wrap {
    width: min(calc(100% - 3rem), var(--dse-brand-container)) !important;
    max-width: var(--dse-brand-container) !important;
    margin-inline: auto !important;
}

body.dse-client-portal #content #landing_page.dse-hd-wrap > .sidebar {
    display: none !important;
}

body.dse-client-portal #content #landing_page.dse-hd-wrap > .main-content {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.dse-client-portal #content a {
    color: var(--dse-brand-blue) !important;
}

body.dse-client-portal #content :where(
    .dse-hd-hero,
    .dse-hd-cta,
    .dse-login-hero,
    .dse-open-hero,
    .dse-kb-hero,
    .dse-kb-clean-hero,
    .dse-docs-hero,
    .dse-docs-footer-cta
) a:not(.dse-hd-company-button) {
    color: var(--dse-brand-on-dark) !important;
}

body.dse-client-portal #content :where(
    .dse-hd-button,
    .dse-login-button,
    .dse-open-button,
    .dse-kb-button,
    .dse-docs-hero-actions a,
    .dse-docs-footer-cta a
) {
    color: var(--dse-brand-on-dark) !important;
    font-family: var(--dse-brand-font-body) !important;
}

body.dse-client-portal #content .dse-hd-company-button {
    border-color: var(--dse-brand-border-strong) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-blue) !important;
    font-family: var(--dse-brand-font-body) !important;
}

body.dse-client-portal #content .dse-hd-company-button:hover {
    border-color: var(--dse-brand-yellow) !important;
    background: var(--dse-brand-yellow) !important;
    color: var(--dse-brand-navy) !important;
}

body.dse-client-portal #content .dse-login-wrap .dse-login-field-head a,
body.dse-client-portal #content .dse-login-wrap .dse-login-form-footer a {
    color: var(--dse-brand-blue) !important;
}

/* Resolve legacy color/surface pairings on public account entry points. */
body.dse-client-portal #header .dse-helpdesk-account,
body.dse-client-portal #header .dse-helpdesk-account p {
    color: var(--dse-brand-muted) !important;
}

body.dse-client-portal #content #landing_page.dse-hd-wrap :where(.dse-hd-hero, .dse-hd-cta) .dse-hd-kicker {
    color: var(--dse-brand-cyan-bright) !important;
}

body.dse-client-portal #content .dse-login-wrap .dse-login-field-head a,
body.dse-client-portal #content .dse-login-wrap .dse-login-form-footer a,
body.dse-client-portal #content .dse-login-wrap #clientLogin a:not(.dse-login-button) {
    color: var(--dse-brand-blue) !important;
}

body.dse-client-portal #content .dse-login-wrap a.dse-login-button {
    border-color: var(--dse-brand-blue) !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
}

/* Ticket lookup uses the same dark-hero/light-workspace composition as the site. */
body.dse-client-portal #content .dse-view-wrap .dse-view-hero {
    border: 1px solid rgba(207, 218, 234, .28) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-navy) !important;
    color: var(--dse-brand-on-dark) !important;
    box-shadow: var(--dse-brand-shadow) !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-view-hero h1 {
    color: var(--dse-brand-on-dark) !important;
    font-family: var(--dse-brand-font-display) !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-view-hero p {
    color: var(--dse-brand-muted-on-dark) !important;
}

body.dse-client-portal #content .dse-view-wrap :where(.dse-view-kicker, .dse-view-label) {
    color: var(--dse-brand-cyan) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-view-hero .dse-view-kicker {
    color: var(--dse-brand-cyan-bright) !important;
}

body.dse-client-portal #content .dse-view-wrap :where(.dse-view-panel, .dse-view-helper) {
    border: 1px solid var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-text) !important;
    box-shadow: var(--dse-brand-shadow-small) !important;
}

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

body.dse-client-portal #content .dse-view-wrap :where(.dse-view-panel-head p, .dse-view-helper p, .dse-access-footer span) {
    color: var(--dse-brand-text) !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-access-field label {
    color: var(--dse-brand-ink) !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-access-hint {
    color: var(--dse-brand-muted) !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-access-footer a {
    color: var(--dse-brand-blue) !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-view-panel #clientLogin .dse-access-footer a {
    color: var(--dse-brand-blue) !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-view-button {
    border: 1px solid var(--dse-brand-blue) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
    box-shadow: none !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-view-button.secondary {
    border-color: var(--dse-brand-border-strong) !important;
    background: var(--dse-brand-canvas) !important;
    color: var(--dse-brand-blue) !important;
}

body.dse-client-portal #content .dse-view-wrap .dse-view-list li {
    border-color: var(--dse-brand-border) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-surface) !important;
    color: var(--dse-brand-text) !important;
}

body.dse-client-portal #footer,
body.dse-client-portal #footer p,
body.dse-client-portal #footer span {
    background: var(--dse-brand-navy) !important;
    color: var(--dse-brand-muted-on-dark) !important;
}

body.dse-client-portal #footer {
    margin-bottom: 24px !important;
    padding: 24px !important;
    border: 1px solid rgba(207, 218, 234, .28) !important;
    border-radius: var(--dse-brand-radius) !important;
}

body.dse-client-portal #footer a {
    color: var(--dse-brand-cyan-bright) !important;
}

/* Knowledgebase and documentation labels need light- and dark-surface variants. */
body.dse-client-portal #content .dse-kb-shell .dse-kb-clean-section-head > span,
body.dse-client-portal #content .dse-kb-shell .dse-kb-clean-card > div > span {
    color: var(--dse-brand-cyan) !important;
}

body.dse-client-portal #content .dse-kb-shell .dse-kb-clean-hero a.is-primary > span {
    color: var(--dse-brand-on-dark) !important;
}

body.dse-client-portal #content .dse-kb-shell .dse-kb-step-card a.dse-kb-step-link {
    border-color: var(--dse-brand-blue) !important;
    background: var(--dse-brand-blue) !important;
    color: var(--dse-brand-on-dark) !important;
}

body.dse-client-portal #content .dse-docs .dse-docs-intro h2 {
    color: var(--dse-brand-ink) !important;
}

body.dse-client-portal #content :where(
    .dse-hd-hero h1,
    .dse-login-hero h1,
    .dse-open-hero h1,
    .dse-kb-hero h1,
    .dse-kb-clean-hero h1,
    .dse-docs-hero h1
) {
    width: auto !important;
    max-width: 100% !important;
    margin: 10px 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.dse-client-portal #content .dse-hd-welcome .thread-body :where(h1, h2) {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--dse-brand-ink) !important;
    box-shadow: none !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
}

body.dse-client-portal #content .dse-hd-welcome .thread-body h2 {
    font-size: 16px !important;
}

body.dse-client-portal #content .dse-hd-welcome .thread-body u {
    text-decoration: none !important;
}

body.dse-client-portal #content :where(
    .dse-kb-clean-hero,
    .dse-kb-clean-hero a,
    .dse-kb-clean-section,
    .dse-kb-clean-card,
    .dse-kb-system-card,
    .dse-kb-step-card
) {
    border-radius: var(--dse-brand-radius) !important;
}

/* Align the floating assistant with the shared control geometry. */
.dse-ai-chat {
    right: 16px !important;
    bottom: 16px !important;
    font-family: var(--dse-brand-font-body) !important;
}

.dse-ai-chat-launcher {
    width: 58px !important;
    height: 58px !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: var(--dse-brand-radius) !important;
    background: var(--dse-brand-blue) !important;
    box-shadow: 0 8px 22px rgba(11, 19, 36, .24) !important;
}

.dse-ai-chat-panel,
.dse-ai-chat-header,
.dse-ai-chat-send {
    border-radius: var(--dse-brand-radius) !important;
}

.dse-ai-chat-send {
    background: var(--dse-brand-blue) !important;
}

@media (max-width: 64rem) {
    body.dse-client-portal .dse-helpdesk-shell,
    body.dse-client-portal .dse-helpdesk-nav-wrap,
    body.dse-client-portal #footer,
    body.dse-client-portal :where(.dse-hd-wrap, .dse-login-wrap, .dse-open-ticket, .dse-kb-shell, .dse-docs) {
        width: min(calc(100% - 2rem), var(--dse-brand-container)) !important;
    }

    body.dse-client-portal #content #landing_page.dse-hd-wrap {
        width: min(calc(100% - 2rem), var(--dse-brand-container)) !important;
    }

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

    body.dse-client-portal #content .dse-docs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.dse-client-portal #content .dse-docs-layout {
        grid-template-columns: 1fr !important;
    }

    body.dse-agent-panel .dse-scp-header-card,
    body.dse-admin-panel .dse-scp-header-card {
        grid-template-columns: 1fr !important;
    }

    body.dse-agent-panel .dse-psa-command-bar,
    body.dse-admin-panel .dse-psa-command-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 42rem) {
    body.dse-client-portal .dse-helpdesk-shell,
    body.dse-client-portal .dse-helpdesk-nav-wrap,
    body.dse-client-portal #footer,
    body.dse-client-portal :where(.dse-hd-wrap, .dse-login-wrap, .dse-open-ticket, .dse-kb-shell, .dse-docs) {
        width: min(calc(100% - 1.5rem), var(--dse-brand-container)) !important;
    }

    body.dse-client-portal #content #landing_page.dse-hd-wrap {
        width: min(calc(100% - 1.5rem), var(--dse-brand-container)) !important;
    }

    body.dse-client-portal .dse-helpdesk-shell {
        padding-block: 12px !important;
    }

    body.dse-client-portal #header.dse-helpdesk-header {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.dse-client-portal .dse-helpdesk-brand {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.dse-client-portal #header.dse-helpdesk-header #logo {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    body.dse-client-portal #header.dse-helpdesk-header #logo img {
        width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
    }

    body.dse-client-portal .dse-helpdesk-brand-text strong {
        font-size: 18px !important;
    }

    body.dse-client-portal .dse-helpdesk-brand-text span {
        font-size: 12px !important;
    }

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

    body.dse-client-portal ul#nav.dse-helpdesk-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    body.dse-client-portal ul#nav.dse-helpdesk-nav > li {
        flex: 0 0 auto !important;
    }

    body.dse-client-portal ul#nav.dse-helpdesk-nav > li > a {
        min-height: 40px !important;
        padding: 8px 11px !important;
        white-space: nowrap !important;
    }

    body.dse-client-portal .dse-client-command-bar {
        display: none !important;
    }

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

    body.dse-client-portal :where(.dse-hd-hero h1, .dse-login-hero h1, .dse-open-hero h1, .dse-kb-hero h1, .dse-docs-hero h1) {
        font-size: 30px !important;
    }

    body.dse-client-portal #content :where(.dse-hd-hero h1, .dse-login-hero h1, .dse-open-hero h1, .dse-kb-hero h1, .dse-kb-clean-hero h1, .dse-docs-hero h1) {
        font-size: 30px !important;
    }

    body.dse-client-portal .dse-hd-company-link {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    body.dse-client-portal .dse-hd-company-button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    body.dse-client-portal #content .dse-docs-hero {
        grid-template-columns: 1fr !important;
        padding: 22px 18px !important;
    }

    body.dse-client-portal #content .dse-docs-brand {
        width: 64px !important;
        min-height: 64px !important;
    }

    body.dse-client-portal #content .dse-docs-brand img {
        width: 52px !important;
        max-width: 52px !important;
        height: 52px !important;
    }

    body.dse-client-portal #content .dse-docs-grid {
        grid-template-columns: 1fr !important;
    }

    body.dse-client-portal #content :where(table) {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }

    body.dse-agent-panel .dse-scp-page-shell,
    body.dse-admin-panel .dse-scp-page-shell {
        width: calc(100% - 1rem) !important;
        padding-top: 8px !important;
    }

    body.dse-agent-panel .dse-scp-header-card,
    body.dse-admin-panel .dse-scp-header-card {
        gap: 12px !important;
        padding: 12px !important;
    }

    body.dse-agent-panel .dse-scp-brand,
    body.dse-admin-panel .dse-scp-brand {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.dse-agent-panel #logo.dse-scp-logo,
    body.dse-admin-panel #logo.dse-scp-logo {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    body.dse-agent-panel #logo.dse-scp-logo img,
    body.dse-admin-panel #logo.dse-scp-logo img {
        width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
    }

    body.dse-agent-panel .dse-scp-title,
    body.dse-admin-panel .dse-scp-title {
        font-size: 20px !important;
    }

    body.dse-agent-panel .dse-scp-account-links,
    body.dse-admin-panel .dse-scp-account-links {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.dse-agent-panel .dse-psa-command-bar,
    body.dse-admin-panel .dse-psa-command-bar {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
        scrollbar-width: thin;
    }

    body.dse-agent-panel .dse-psa-command-bar a,
    body.dse-admin-panel .dse-psa-command-bar a {
        flex: 0 0 9.5rem !important;
        min-height: 54px !important;
    }

    body.dse-agent-panel #content :where(table),
    body.dse-admin-panel #content :where(table) {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }

    body.dse-staff-login .dse-scp-page {
        align-items: flex-start !important;
        padding: 20px 12px !important;
    }

    body.dse-staff-login .dse-scp-shell {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.dse-staff-login .dse-scp-brand,
    body.dse-staff-login .dse-scp-login {
        padding: 24px 20px !important;
    }

    body.dse-staff-login :where(.dse-scp-brand h1, .dse-scp-login h1) {
        font-size: 28px !important;
    }

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

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

@media (max-width: 24rem) {
    body.dse-client-portal .dse-helpdesk-brand-text span,
    body.dse-agent-panel .dse-scp-subtitle,
    body.dse-admin-panel .dse-scp-subtitle {
        display: none !important;
    }

    body.dse-agent-panel .dse-scp-account-links,
    body.dse-admin-panel .dse-scp-account-links {
        grid-template-columns: 1fr !important;
    }
}

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