/* WebinarHub 360° Phase 5: refinement of the approved FPD look, never a redesign. */
body.wh-v4 {
    --wh5-navy: #17384d;
    --wh5-teal: #00878d;
    --wh5-outline: #bcd9df;
    --wh5-subtle: #58717e;
    --wh5-radius: 15px;
    --wh5-shadow: 0 6px 22px rgba(21, 56, 75, .045);
}
/* The legacy enterprise stylesheet used position: sticky!important. */
body.wh-v4 .topbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; }
body.wh-v4 .hub-header-account-action { display: none; }
body.wh-v4 .app-shell.has-sidebar > main { min-width: 0; }
body.wh-v4 .app-shell.has-sidebar > main > .section { width: 100%; max-width: 1600px; margin-inline: auto; }
body.wh-v4 .app-shell.has-sidebar > main .section-head,
body.wh-v4 .app-shell.has-sidebar > main .section-head > div {
    min-width: 0;
}
body.wh-v4 .app-shell.has-sidebar > main .section-head {
    border: 1px solid #dce9ed;
    border-radius: var(--wh5-radius);
    background: #fff;
    padding: clamp(17px, 2.1vw, 27px);
    box-shadow: var(--wh5-shadow);
    margin-bottom: 17px;
}
body.wh-v4 .app-shell.has-sidebar > main .section-head h1 { line-height: 1.2; letter-spacing: -.025em; margin: 5px 0 7px; }
body.wh-v4 .app-shell.has-sidebar > main .section-head p { max-width: 80ch; color: var(--wh5-subtle); line-height: 1.5; margin: 0; }
body.wh-v4 .app-shell.has-sidebar > main .section-head :is(.actions, .wh-participant-top-actions, .wh-lifecycle-top-actions) {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0;
}
body.wh-v4 .app-shell.has-sidebar > main .panel {
    border-color: #dce9ed;
    border-radius: var(--wh5-radius);
    box-shadow: var(--wh5-shadow);
    min-width: 0;
}
body.wh-v4 :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--wh5-teal);
    outline-offset: 3px;
}
body.wh-v4 .app-shell > main .btn,
body.wh-v4 .app-shell > main button[type="submit"] {
    min-height: 42px;
    max-width: 100%;
}
body.wh-v4 .app-shell > main :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    max-width: 100%;
}
body.wh-v4 .app-shell > main :is(label, fieldset) { min-width: 0; }
body.wh-v4 .app-shell > main .section-head .btn { white-space: normal; text-align: center; }
body.wh-v4 .wh-feedback-alert {
    margin: 14px clamp(12px, 2vw, 25px);
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #c6e0e4;
    background: #eff9fa;
    color: #185364;
    font-weight: 650;
}
body.wh-v4 .wh-feedback-alert:is(.error,.danger) {
    border-color: #eac1b8; background: #fff4f2; color: #8c3729;
}
body.wh-v4 .wh-feedback-alert.warning {
    border-color: #efd4a3; background: #fff9eb; color: #78521a;
}
body.wh-v4 .wh-field-error {
    display: block;
    margin-top: 5px;
    font-size: .84rem;
    font-weight: 650;
    color: #a5372f;
}
body.wh-v4 .wh-invalid-field { border-color: #bf4a3f !important; box-shadow: 0 0 0 2px rgba(191, 74, 63, .13); }
body.wh-v4 .wh-form-invalid-summary {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e7bbb4;
    background: #fff4f2;
    color: #873c30;
    margin: 10px 0 14px;
    font-weight: 650;
}
body.wh-v4 .app-shell > main .table-wrap,
body.wh-v4 .app-shell > main .profile-table-scroll {
    width: 100%; max-width: 100%; min-width: 0;
}
body.wh-v4 .app-shell > main table { width: 100%; }
body.wh-v4 .app-shell > main th, body.wh-v4 .app-shell > main td { overflow-wrap: anywhere; }
body.wh-v4 .app-shell > main th { vertical-align: middle; }
body.wh-v4 .app-shell > main td { vertical-align: top; }
body.wh-v4 .wh5-mobile-sort { display: none; }
body.wh-v4 .hub-responsive-table-caption { margin: 4px 0 10px; color: var(--wh5-subtle); font-size: .82rem; }
body.wh-v4 .wh-ux-dialog-confirm { max-height: min(90dvh, 660px); overflow-y: auto; }
body.wh-v4 :is(.hub-more-actions,.wh-lifecycle-actions details) { position: relative; }
body.wh-v4 :is(.registration-status,.wh-participant-identity-badge) { white-space: normal; }
@media (max-width: 1024px) {
    body.wh-v4.js-mobile-nav .topbar { justify-content: space-between; }
    body.wh-v4.js-mobile-nav .topbar .brand { flex: 1 1 auto; }
    body.wh-v4.js-mobile-nav .hub-header-account-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 70px;
        margin: 0;
        flex: 0 0 auto;
        color: var(--wh5-navy);
        text-decoration: none;
    }
    body.wh-v4.js-mobile-nav .hub-header-account-link {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 44px; padding: 8px 10px;
        background: #f5f9fa; color: var(--wh5-navy);
        border: 1px solid #dce9ed; border-radius: 9px;
        font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
    }
    body.wh-v4.js-mobile-nav .topbar .hub-mobile-nav-toggle { order: 3; }
    body.wh-v4.js-mobile-nav .topbar .hub-header-account-action { order: 2; }
}
@media (max-width: 700px) {
    body.wh-v4 .app-shell.has-sidebar > main .section-head { padding: 17px 15px; }
    body.wh-v4 .app-shell.has-sidebar > main .section-head :is(.actions,.wh-participant-top-actions,.wh-lifecycle-top-actions) { width: 100%; }
    body.wh-v4 .app-shell.has-sidebar > main .section-head .btn { flex: 1 1 130px; }
    body.wh-v4 .app-shell > main :is(.ui-table-tools,.ui-table-footer) { flex-wrap: wrap; gap: 8px; }
    body.wh-v4 .app-shell > main :is(.ui-table-tools,.ui-table-footer) > * { min-width: 0; max-width: 100%; }
    body.wh-v4 .app-shell > main .wh5-mobile-sort {
        display: inline-flex; min-height: 42px; padding: 8px; flex: 1 1 150px;
        border: 1px solid #cbdfe4; background: white; border-radius: 9px;
        color: var(--wh5-navy);
    }
    /* Complex rowspans are kept as regular tables; simple data tables become complete cards. */
    body.wh-v4 .app-shell > main table.wh5-stacked-table,
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody,
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr { display: block; width: 100%; }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr {
        background: #fff; border: 1px solid #dce9ed; border-radius: 12px;
        padding: 8px 12px; margin-bottom: 10px; box-shadow: 0 3px 12px rgba(21,56,75,.035);
    }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td {
        display: grid; grid-template-columns: minmax(90px,38%) minmax(0,1fr);
        align-items: start; column-gap: 10px; width: 100%; min-width: 0;
        padding: 9px 0; border: 0; border-bottom: 1px solid #e8eef1;
        white-space: normal; text-align: left;
    }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td:last-child { border-bottom: 0; }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td::before {
        content: attr(data-wh5-label); font-weight: 750; font-size: .8rem;
        color: #506d7a; overflow-wrap: anywhere;
    }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td > :is(form,div) { min-width: 0; }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td :is(button,input,select) { max-width: 100%; }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td .btn { white-space: normal; }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td[colspan] { display: block; }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td[colspan]::before { content: none; }
    body.wh-v4 .app-shell > main .table-wrap:has(> table.wh5-stacked-table),
    body.wh-v4 .app-shell > main .profile-table-scroll:has(> table.wh5-stacked-table) {
        overflow-x: clip; padding: 2px 0;
    }
}
@media (max-width: 400px) {
    body.wh-v4.js-mobile-nav .topbar .brand span { display: none; }
    body.wh-v4.js-mobile-nav .topbar .hub-mobile-nav-toggle { padding-inline: 9px; }
    body.wh-v4.js-mobile-nav .topbar .hub-header-account-link { padding-inline: 7px; }
    body.wh-v4 .app-shell > main table.wh5-stacked-table > tbody > tr > td { grid-template-columns: minmax(98px,42%) minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    body.wh-v4 *, body.wh-v4 *::before, body.wh-v4 *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
@media print {
    body.wh-v4 .hub-header-account-action { display: none !important; }
    body.wh-v4 .wh-feedback-alert { box-shadow: none; }
}

/* One vertical page scroll for the full navigation and management content.
   The header stays fixed, but desktop sidebar groups use natural document
   height instead of a separate viewport-limited scrolling region. */
@media (min-width: 1025px) {
    body.wh-v4 .app-shell.hub-workspace-shell > .admin-sidebar {
        position: relative !important;
        top: auto !important;
        align-self: stretch !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
}