/*
=========================================================================
EduSuite Responsive UX 9.0
System-wide responsive, accessible and scroll-safe interaction layer.
Loaded after page styles and the authenticated System UI stylesheet.
=========================================================================
*/

:root {
    --ux-viewport-height: 100dvh;
    --ux-safe-top: env(safe-area-inset-top, 0px);
    --ux-safe-right: env(safe-area-inset-right, 0px);
    --ux-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ux-safe-left: env(safe-area-inset-left, 0px);
    --ux-focus: var(--brand-500, #14a0bf);
    --ux-focus-ring: rgba(20, 160, 191, .24);
    --ux-surface: var(--surface, #ffffff);
    --ux-surface-soft: var(--bg, #f4f8fb);
    --ux-text: var(--text, #0f172a);
    --ux-muted: var(--muted, #64748b);
    --ux-line: rgba(148, 163, 184, .28);
    --ux-modal-gap: clamp(.5rem, 1.8vw, 1.35rem);
    --ux-touch-target: 44px;
    --ux-navbar-height: 68px;
}

body.app-authenticated {
    --ux-focus: var(--ct-brand, #176bbd);
    --ux-focus-ring: rgba(23, 107, 189, .2);
    --ux-surface: var(--ct-surface, #ffffff);
    --ux-surface-soft: var(--ct-bg, #f4f7fb);
    --ux-text: var(--ct-text, #203652);
    --ux-muted: var(--ct-muted, #6f7f92);
    --ux-line: var(--ct-line, #e0e7ef);
}

html[data-theme="dark"] {
    --ux-surface: var(--surface, #112031);
    --ux-surface-soft: var(--bg, #081019);
    --ux-text: var(--text, #e2ebf6);
    --ux-muted: var(--muted, #9fb2c9);
    --ux-line: rgba(148, 163, 184, .24);
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-top: calc(var(--ux-navbar-height) + 16px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    accent-color: var(--ux-focus);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* ----------------------------------------------------------------------
   Accessibility and predictable focus
   ---------------------------------------------------------------------- */

.ux-skip-link {
    position: fixed;
    z-index: 3000;
    top: max(8px, var(--ux-safe-top));
    left: max(8px, var(--ux-safe-left));
    padding: .7rem .9rem;
    border: 2px solid var(--ux-focus);
    border-radius: .7rem;
    color: #ffffff;
    background: #082653;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .28);
    transform: translateY(calc(-100% - 24px));
    transition: transform .16s ease;
}

.ux-skip-link:focus {
    color: #ffffff;
    transform: translateY(0);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ux-focus-ring);
    outline-offset: 2px;
}

:where(.btn, .nav-link, .dropdown-item, .form-control, .form-select, .form-check-input):focus-visible {
    border-color: var(--ux-focus) !important;
    box-shadow: 0 0 0 .2rem var(--ux-focus-ring) !important;
}

.ux-required-label::after {
    content: " *";
    color: #c53b49;
    font-weight: 900;
}

.ux-visually-busy {
    cursor: progress !important;
}

/* ----------------------------------------------------------------------
   Fluid layout foundations
   ---------------------------------------------------------------------- */

:where(main, .app-main, #main-content, .container, .container-fluid, .row,
       .card, .card-body, .modal-content, .modal-body, .tab-content,
       .tab-pane, .accordion, .accordion-item, .accordion-body,
       .role-shell, .role-shell__content, .assessor-shell__content,
       .facilitator-content, .learner-app, .learner-main,
       .subadmin-template, .subadmin-shell, .subadmin-section__container) {
    min-width: 0;
    max-width: 100%;
}

.row > *,
:where(.d-flex, .d-grid, [class*="__grid"], [class$="-grid"], [class*="-layout"]) > * {
    min-width: 0;
}

:where(img, svg, video, canvas, iframe, object, embed) {
    max-width: 100%;
}

:where(.app-main, main, .modal-body) img {
    height: auto;
}

:where(.card-title, .modal-title, .alert, .dropdown-item, .nav-link,
       .form-label, .form-text, .badge, .breadcrumb-item, .toast-body,
       .app-brand__copy, .app-user-menu__copy, .subadmin-nav-copy,
       .role-shell__sidebar-title, .learner-sidebar__profile,
       .table td, .table th) {
    overflow-wrap: anywhere;
}

pre,
code,
.ux-code-scroll {
    max-width: 100%;
}

pre {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------------------
   Forms and controls
   ---------------------------------------------------------------------- */

:where(.form-control, .form-select, .form-check, .input-group, textarea,
       input, select, fieldset, .choices, .select2-container) {
    min-width: 0;
    max-width: 100%;
}

input[type="file"] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-control-color {
    min-width: 3rem;
}

.form-check-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.input-group > :where(.form-control, .form-select) {
    width: 1%;
}

textarea.form-control {
    resize: vertical;
}

fieldset[disabled] {
    cursor: not-allowed;
}

fieldset[disabled] :where(input, select, textarea, button, label) {
    cursor: not-allowed;
}

/* App helper text is converted to an info icon by app.js. Keep the full
   wording visible on touch screens where hover is unavailable. */
.ux-mobile-tip-copy {
    display: none;
}

/* ----------------------------------------------------------------------
   Navigation, dropdowns and tabs
   ---------------------------------------------------------------------- */

.app-navbar {
    padding-top: var(--ux-safe-top);
}

.app-navbar .navbar-toggler {
    width: var(--ux-touch-target);
    height: var(--ux-touch-target);
    display: none;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--ux-line);
    border-radius: 12px;
    color: var(--ux-text);
    background: var(--ux-surface);
    box-shadow: none;
}

.app-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem var(--ux-focus-ring);
}

.dropdown-menu {
    max-width: min(94vw, 440px);
    max-height: min(70vh, calc(var(--ux-viewport-height) - 96px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs,
.nav-pills.ux-horizontal-nav,
.ux-horizontal-nav {
    max-width: 100%;
}

.nav-tabs.ux-scroll-tabs,
.nav-pills.ux-scroll-tabs,
.ux-horizontal-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs.ux-scroll-tabs > *,
.nav-pills.ux-scroll-tabs > *,
.ux-horizontal-nav > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
}

.nav-tabs.ux-scroll-tabs .nav-link,
.nav-pills.ux-scroll-tabs .nav-link {
    white-space: nowrap;
}

/* ----------------------------------------------------------------------
   Tables and other horizontal scroll regions
   ---------------------------------------------------------------------- */

/* EduSuite 9.5.5 — consistent breathing room below data tables.
   The gap belongs to the table region, not the table inside it, so horizontal
   scrolling, rounded borders and sticky columns remain unchanged. */
:root {
    --ux-table-block-gap: clamp(14px, 1.6vw, 24px);
}

:is(
    .table-responsive,
    .question-bank-table-wrap,
    .question-bank-picker__table-wrap,
    .accreditation-table-wrap,
    .facilitator-table-scroll
),
.ux-scroll-region:has(> table) {
    margin-bottom: var(--ux-table-block-gap);
}

/* A few small registers are rendered without a scroll wrapper. Give those the
   same visual separation, while wrapped tables keep their margin inside the
   scrolling surface at zero. Bootstrap spacing utilities (mb-0, mb-4, etc.)
   still win when a page intentionally requests a different gap. */
body.app-authenticated table.table,
body.app-public table.table {
    margin-bottom: var(--ux-table-block-gap);
}

:is(
    .table-responsive,
    .question-bank-table-wrap,
    .question-bank-picker__table-wrap,
    .accreditation-table-wrap,
    .facilitator-table-scroll,
    .ux-scroll-region
) > table.table {
    margin-bottom: 0;
}

.table-responsive,
.question-bank-picker__table-wrap,
.ux-scroll-region {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.table-responsive:focus-visible,
.question-bank-picker__table-wrap:focus-visible,
.ux-scroll-region:focus-visible {
    outline: 3px solid var(--ux-focus-ring);
    outline-offset: 2px;
}

.table-responsive > .table,
.question-bank-picker__table-wrap > .table {
    width: max-content;
    min-width: 100%;
}

.ux-table-scroll-hint {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    margin: 0 0 .4rem;
    color: var(--ux-muted);
    font-size: .67rem;
    font-weight: 750;
}

.ux-table-scroll-hint.is-visible {
    display: flex;
}

.ux-table-scroll-hint i {
    color: var(--ux-focus);
}

.ux-scroll-region.is-ux-overflowing:not(.is-ux-scroll-end),
.table-responsive.is-ux-overflowing:not(.is-ux-scroll-end),
.question-bank-picker__table-wrap.is-ux-overflowing:not(.is-ux-scroll-end) {
    box-shadow: inset -12px 0 12px -14px rgba(15, 23, 42, .45);
}

/* ----------------------------------------------------------------------
   Scroll-safe Bootstrap modals
   ---------------------------------------------------------------------- */

.modal {
    padding:
        max(var(--ux-modal-gap), var(--ux-safe-top))
        max(var(--ux-modal-gap), var(--ux-safe-right))
        max(var(--ux-modal-gap), var(--ux-safe-bottom))
        max(var(--ux-modal-gap), var(--ux-safe-left)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

html body .modal .modal-dialog {
    width: auto;
    max-width: min(var(--bs-modal-width, 500px), 100%);
    min-height: 0;
    height: calc(
        var(--ux-viewport-height)
        - (var(--ux-modal-gap) * 2)
        - var(--ux-safe-top)
        - var(--ux-safe-bottom)
    );
    max-height: calc(
        var(--ux-viewport-height)
        - (var(--ux-modal-gap) * 2)
        - var(--ux-safe-top)
        - var(--ux-safe-bottom)
    ) !important;
    margin: 0 auto !important;
    display: flex;
    align-items: center;
}

html body .modal .modal-dialog.modal-sm {
    --bs-modal-width: 360px;
}

html body .modal .modal-dialog.modal-lg {
    --bs-modal-width: 800px;
}

html body .modal .modal-dialog.modal-xl {
    --bs-modal-width: 1140px;
}

html body .modal .modal-dialog-scrollable {
    height: calc(
        var(--ux-viewport-height)
        - (var(--ux-modal-gap) * 2)
        - var(--ux-safe-top)
        - var(--ux-safe-bottom)
    ) !important;
    max-height: calc(
        var(--ux-viewport-height)
        - (var(--ux-modal-gap) * 2)
        - var(--ux-safe-top)
        - var(--ux-safe-bottom)
    ) !important;
}

.modal .modal-content,
.modal .modal-dialog-scrollable .modal-content {
    width: 100%;
    min-height: 0;
    max-height: 100% !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.modal-content > form,
.modal-content > .modal-form,
.modal-content > [data-modal-form] {
    min-height: 0;
    max-height: inherit;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.modal-header,
.modal-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.modal-header {
    padding-top: max(1rem, var(--ux-safe-top));
}

.modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.modal-body:focus:not(:focus-visible) {
    outline: none;
}

.modal-body:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--ux-focus-ring);
}

.modal-footer {
    padding-bottom: max(.75rem, var(--ux-safe-bottom));
}

.modal-footer,
.modal-header {
    gap: .6rem;
}

.modal-footer .btn {
    margin: 0 !important;
}

.modal .sticky-top {
    top: 0;
}

.modal.qcto-review-modal .modal-dialog-scrollable > .modal-content {
    display: flex !important;
    min-height: 0;
    max-height: 100% !important;
    flex-direction: column;
    overflow: hidden !important;
}

.modal.qcto-review-modal .modal-dialog-scrollable > .modal-content > .modal-header,
.modal.qcto-review-modal .modal-dialog-scrollable > .modal-content > form > .modal-footer {
    flex: 0 0 auto;
}

.modal.qcto-review-modal .modal-dialog-scrollable > .modal-content > .modal-body,
.modal.qcto-review-modal .modal-dialog-scrollable > .modal-content > form > .modal-body {
    min-height: 0;
    flex: 1 1 0%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.modal.qcto-review-modal .modal-dialog-scrollable > .modal-content > form {
    min-height: 0;
    max-height: none;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    overflow: hidden;
}

/* The Organisation Administrator keeps desktop modals inside its fixed
   content pane. Respect that pane while retaining internal body scrolling. */
@media (min-width: 768px) {
    .subadmin-template #main-content > .modal {
        padding: .75rem !important;
    }

    .subadmin-template #main-content > .modal .modal-dialog {
        width: min(var(--bs-modal-width, 500px), 100%);
        min-height: 0;
        height: 100% !important;
        max-height: 100% !important;
    }

    .subadmin-template #main-content > .modal .modal-content {
        max-height: 100%;
    }
}

/* ----------------------------------------------------------------------
   Sidebars and long menus
   ---------------------------------------------------------------------- */

:where(.role-shell__nav, .assessor-shell__nav, .facilitator-nav-pills,
       .learner-sidebar__nav, .subadmin-sidebar-scroll, #sidebar .nav) {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

:where(.role-shell__nav, .assessor-shell__nav, .facilitator-nav-pills,
       .learner-sidebar__nav, .subadmin-sidebar-nav) > * {
    min-width: 0;
    flex-shrink: 0;
}

:where(.role-shell__nav, .assessor-shell__nav, .facilitator-nav-pills,
       .learner-sidebar__nav, .subadmin-sidebar-nav) .nav-link {
    width: 100%;
    min-width: 0;
}

/* ----------------------------------------------------------------------
   Friendly content hierarchy and states
   ---------------------------------------------------------------------- */

.alert {
    max-width: 100%;
}

.alert > :last-child,
.card-body > :last-child,
.modal-body > :last-child {
    margin-bottom: 0;
}

.btn,
.nav-link,
.dropdown-item {
    touch-action: manipulation;
}

.btn[disabled],
.btn.disabled,
button[aria-disabled="true"] {
    cursor: not-allowed;
}

.ux-empty-state {
    max-width: 560px;
    margin-inline: auto;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    text-align: center;
}

/* ----------------------------------------------------------------------
   Tablet and mobile behaviour
   ---------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    :root {
        --ux-navbar-height: 64px;
    }

    .app-navbar .navbar-toggler {
        display: inline-grid;
    }

    .app-navbar .navbar-collapse {
        width: 100%;
        max-height: calc(var(--ux-viewport-height) - var(--ux-navbar-height) - var(--ux-safe-top) - 10px);
        padding: .75rem 0 max(.8rem, var(--ux-safe-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .app-navbar .navbar-nav {
        width: 100%;
        align-items: stretch !important;
        gap: .35rem !important;
    }

    .app-navbar .navbar-nav > .nav-item,
    .app-navbar .navbar-nav > .nav-item > .nav-link,
    .app-navbar .app-user-menu {
        width: 100%;
    }

    .app-navbar .navbar-nav > .nav-item > .nav-link,
    .app-navbar .app-user-menu {
        min-height: var(--ux-touch-target) !important;
        justify-content: flex-start !important;
    }

    .app-navbar .app-user-menu__copy {
        display: inline-flex !important;
    }

    .app-navbar .dropdown-menu {
        position: static !important;
        width: 100%;
        max-width: 100%;
        margin-top: .35rem !important;
        transform: none !important;
    }

    .app-navbar .navbar-nav > .nav-item > :where(.btn-brand, .btn-outline-brand) {
        width: 100%;
        min-height: var(--ux-touch-target);
    }

    .role-shell__sidebar,
    .assessor-shell__sidebar,
    .facilitator-quick-nav,
    .learner-sidebar,
    .subadmin-template .subadmin-sidebar-col,
    .subadmin-shell .subadmin-sidebar-col {
        max-width: min(310px, calc(100vw - 22px)) !important;
    }

    .role-shell__content,
    .assessor-shell__content,
    .facilitator-content,
    .learner-main,
    .subadmin-template #main-content {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    html body.app-authenticated .form-control.form-control,
    html body.app-authenticated .form-select.form-select,
    html body.app-public .form-control.form-control,
    html body.app-public .form-select.form-select,
    html body :is(.modal, .auth-panel) .form-control.form-control,
    html body :is(.modal, .auth-panel) .form-select.form-select {
        font-size: 16px !important;
    }

    :where(.btn, button, .nav-link, .dropdown-item, summary,
           .form-check-input, .app-tip-icon) {
        min-height: var(--ux-touch-target);
    }

    .form-check-input {
        min-width: 1.2rem;
        min-height: 1.2rem;
    }

    .app-tip-shell {
        display: flex;
        align-items: flex-start;
        gap: .45rem;
        width: 100%;
        margin-top: .35rem;
    }

    .app-tip-shell .app-tip-icon {
        width: 28px !important;
        min-width: 28px;
        height: 28px !important;
        min-height: 28px;
        flex: 0 0 28px;
    }

    .ux-mobile-tip-copy {
        display: inline;
        color: var(--ux-muted);
        font-size: .72rem;
        line-height: 1.45;
    }

    .nav-tabs,
    .nav-pills.ux-scroll-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs > *,
    .nav-pills.ux-scroll-tabs > * {
        flex: 0 0 auto !important;
    }

    .nav-tabs .nav-link,
    .nav-pills.ux-scroll-tabs .nav-link {
        white-space: nowrap;
    }

    .ux-table-scroll-hint.is-visible {
        display: flex;
    }

    .modal-dialog {
        align-items: flex-end;
    }

    .modal-content {
        border-radius: 18px 18px 12px 12px !important;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .modal-header .btn-close {
        width: 2.4rem;
        height: 2.4rem;
        flex: 0 0 2.4rem;
        padding: .65rem;
        margin: -.45rem -.45rem -.45rem auto !important;
    }

    .modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .modal-footer > * {
        min-width: 0;
    }

    .modal-footer .btn {
        width: 100%;
        min-height: var(--ux-touch-target);
        white-space: normal;
    }

    .btn-group,
    .btn-group-vertical {
        max-width: 100%;
    }

    .pagination {
        max-width: 100%;
        flex-wrap: wrap;
        gap: .25rem;
    }

    .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: grid;
        place-items: center;
    }
}

@media (max-width: 575.98px) {
    :root {
        --ux-modal-gap: .35rem;
    }

    .app-main > .container,
    .app-main > .container-fluid,
    main > .container,
    main > .container-fluid {
        padding-right: max(.75rem, var(--ux-safe-right)) !important;
        padding-left: max(.75rem, var(--ux-safe-left)) !important;
    }

    .app-navbar > .container,
    .app-navbar > .container-fluid {
        padding-right: max(.75rem, var(--ux-safe-right)) !important;
        padding-left: max(.75rem, var(--ux-safe-left)) !important;
    }

    .app-brand__copy strong {
        max-width: min(48vw, 190px) !important;
    }

    .app-user-menu__copy strong,
    .app-user-menu__copy small {
        max-width: 65vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :where(.page-header, .workspace-header, .tab-section-head,
           .section-header, .panel-heading, .subadmin-section__head,
           .card-header.d-flex, .modal-header) {
        min-width: 0;
    }

    :where(.page-header, .workspace-header, .tab-section-head,
           .section-header, .panel-heading, .subadmin-section__head,
           .card-header.d-flex):not(.ux-keep-row) {
        align-items: stretch !important;
        flex-wrap: wrap;
        gap: .65rem !important;
    }

    :where(.page-actions, .workspace-actions, .section-actions,
           .hero-actions, .toolbar-actions, .card-header-actions) {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    :where(.page-actions, .workspace-actions, .section-actions,
           .hero-actions, .toolbar-actions, .card-header-actions) > :where(.btn, .dropdown, .dropdown > .btn) {
        width: 100%;
    }

    .modal {
        padding:
            max(.35rem, var(--ux-safe-top))
            max(.35rem, var(--ux-safe-right))
            max(.35rem, var(--ux-safe-bottom))
            max(.35rem, var(--ux-safe-left)) !important;
    }

    .modal-dialog:not(.modal-fullscreen) {
        width: 100%;
        max-width: 100%;
    }

    .modal .modal-content {
        max-height: 100% !important;
    }

    .modal-footer {
        grid-template-columns: 1fr;
    }

    .modal-footer .btn,
    .modal-footer .dropdown,
    .modal-footer .dropdown > .btn {
        width: 100%;
    }

    .auth-wrap {
        min-height: var(--ux-viewport-height);
    }

    .auth-shell,
    .auth-shell--login {
        min-height: var(--ux-viewport-height);
    }

    .auth-panel {
        padding-bottom: max(2.5rem, calc(1.25rem + var(--ux-safe-bottom)));
    }

    .table-responsive,
    .question-bank-picker__table-wrap {
        margin-right: 0;
        margin-left: 0;
    }
}

/* Short landscape phones and browser windows need top-aligned dialogs. */
@media (max-height: 620px) {
    .modal-dialog {
        align-items: flex-start;
    }

    .modal .modal-content {
        max-height: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ux-skip-link,
    .auth-visual > img {
        transition: none !important;
    }
}

@media print {
    .ux-skip-link,
    .ux-table-scroll-hint {
        display: none !important;
    }

    html,
    body {
        overflow: visible !important;
    }
}

/* ======================================================================
   EduSuite Learner Dashboard desktop and laptop workspace 9.1
   Keeps the learner workspace attached to the sidebar and allows the
   dashboard to use the full remaining viewport instead of a narrow,
   right-aligned legacy column.
   ====================================================================== */

body.learner-experience-page {
    overflow-x: clip;
}

@media (min-width: 992px) {
    body.learner-experience-page .learner-app {
        --learner-desktop-sidebar: clamp(224px, 15.5vw, 252px);
        display: grid !important;
        grid-template-columns: var(--learner-desktop-sidebar) minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    body.learner-experience-page .learner-app > .learner-sidebar {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        justify-self: stretch !important;
    }

    body.learner-experience-page .learner-app > .learner-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        margin-inline: 0 !important;
        padding: 0 !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }

    body.learner-experience-page .learner-topbar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding-inline: clamp(16px, 2vw, 32px) !important;
    }

    body.learner-experience-page .learner-search {
        flex: 1 1 520px;
        width: auto !important;
        min-width: 240px;
        max-width: min(860px, calc(100% - 150px)) !important;
    }
}

:is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-page {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
    padding:
        clamp(18px, 1.75vw, 30px)
        clamp(16px, 2.2vw, 36px)
        clamp(38px, 4vw, 56px) !important;
    container-name: learner-dashboard;
    container-type: inline-size;
}

:is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) :where(
    .learner-dashboard-hero,
    .learner-stat-grid,
    .learner-dashboard-grid,
    .learner-enrolled-section,
    .learner-dashboard-lower,
    .learner-merged-tools-card,
    .learner-merged-workspace
) {
    width: 100%;
    min-width: 0;
    max-width: none;
}

:is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-stat,
:is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-stat > div,
:is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-card,
:is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-card__header > div {
    min-width: 0;
}

:is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-stat > div > span,
:is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-card__header :where(h2, p) {
    overflow-wrap: anywhere;
}

@media (min-width: 1600px) {
    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-page {
        padding-inline: clamp(36px, 2.5vw, 48px) !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-hero {
        padding-inline: clamp(34px, 3vw, 52px) !important;
    }
}

@container learner-dashboard (max-width: 980px) {
    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-grid > * {
        grid-column: auto !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-lower {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-lower > :last-child {
        grid-column: 1 / -1 !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-hero {
        grid-template-columns: minmax(0, 1fr) minmax(190px, .45fr) !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-hero-art {
        min-width: 190px;
    }
}

@container learner-dashboard (max-width: 720px) {
    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-hero-art {
        display: none !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-lower {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-lower > :last-child {
        grid-column: auto !important;
    }
}

@container learner-dashboard (max-width: 520px) {
    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-stat-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-card__header {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
    @media (min-width: 992px) and (max-width: 1240px) {
        :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-stat-grid,
        :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-lower {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-grid {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        :is(body.learner-dashboard-page, body.learner-experience-page:has(.learner-dashboard-hero)) .learner-dashboard-lower > :last-child {
            grid-column: 1 / -1 !important;
        }
    }
}

@media print {
    body.learner-experience-page {
        overflow: visible !important;
    }
}