/* Responsive foundation shared by the authenticated, public and auth layouts. */
html { overflow-x: hidden; }
body { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
.row > *, .card, .card-body, main { min-width: 0; }
.d-flex > .flex-grow-1 { min-width: 0; }
.text-break-mobile, td, .card-title { overflow-wrap: anywhere; }

/* Keep the help panel inside the sidebar instead of the template's fixed
   5rem footer, which is shorter than the panel itself. */
.sidenav .sidenav-footer {
    height: auto;
    min-height: 0;
    padding: 0;
    align-items: stretch;
}
.sidenav .sidenav-footer .support-card {
    width: calc(100% - 2rem);
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.sidenav .sidenav-footer .support-card a { max-width: 100%; }

/* Prevent wide data sets from enlarging the page. */
.table-responsive {
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-responsive > .table { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .nav-fixed .topnav { padding-inline: .5rem; }
    /* On small screens scroll the complete drawer. Keeping the menu and its
       footer as separate scroll areas makes the help card cover the last link. */
    #layoutSidenav_nav .sidenav {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav .sidenav-menu {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible !important;
    }
    #layoutSidenav_nav .sidenav .sidenav-footer {
        flex: 0 0 auto;
    }
    /* The template uses a negative desktop sidebar offset by default. On mobile
       that offset must be reset or the whole page is rendered 15rem off-screen. */
    #layoutSidenav { width: 100%; }
    #layoutSidenav #layoutSidenav_content,
    .nav-fixed #layoutSidenav #layoutSidenav_content {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
    }
    #sidebarToggle { order: -1 !important; }
    .topnav .navbar-brand { max-width: min(45vw, 230px); min-width: 0; margin-right: auto; }
    .topnav .navbar-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topnav .navbar-nav { flex-direction: row; flex-shrink: 0; }
    #layoutSidenav_content { min-width: 0; }
    #layoutSidenav_content main { overflow: hidden; }
    .container-xl, .container-fluid { max-width: 100%; }
}

@media (max-width: 767.98px) {
    /* Comfortable page rhythm on narrow screens. */
    #layoutSidenav_content main .container-xl,
    #layoutSidenav_content main .container-fluid,
    footer .container-xl { padding-right: 1rem !important; padding-left: 1rem !important; }
    .page-header { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .page-header-title { font-size: 1.4rem; line-height: 1.25; overflow-wrap: anywhere; }
    .card-header, .card-body, .card-footer { padding-right: 1rem; padding-left: 1rem; }
    .card-header.d-flex, .card-body.d-flex,
    main .d-flex.justify-content-between:not(.input-group):not(.navbar-nav) {
        flex-wrap: wrap;
        gap: .75rem;
    }
    main .d-flex.justify-content-between > .btn,
    main .d-flex.justify-content-between > form,
    main .d-flex.justify-content-between > .input-group { max-width: 100%; }
    .btn-group { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
    .btn-group > .btn { flex: 0 0 auto; }
    .modal-dialog { margin: .75rem; }
    .modal-dialog-scrollable { height: calc(100% - 1.5rem); }
    .modal-header, .modal-body, .modal-footer { padding: 1rem; }
    .modal-footer { gap: .5rem; }
    .modal-footer > * { margin: 0; }
    .offcanvas { max-width: 90vw; }
    .table > :not(caption) > * > * { padding: .7rem .75rem; }
    .table { font-size: .82rem; }
    .footer-admin .row { gap: .35rem; text-align: center; }
    .footer-admin .text-md-end { text-align: center !important; }
    .pagination { flex-wrap: wrap; gap: .2rem; }
    .alert { overflow-wrap: anywhere; }
    input, select, textarea { font-size: 16px !important; } /* Avoid iOS focus zoom. */
    .auth-showcase + [class*="col-"] { min-height: 100dvh; padding: 1.25rem !important; }
    .login-box { width: 100%; max-width: 430px; }
    .verify-card { margin-inline: .75rem; }
    .certificate-name { font-size: clamp(1.45rem, 8vw, 2.1rem); overflow-wrap: anywhere; }

    /* Course catalogue toolbar: filters remain swipeable and search gets a row. */
    #courseFilters { width: 100%; justify-content: flex-start; }
    #courseFilters + .search-courses { width: 100%; max-width: none; flex-basis: 100%; }
}

@media (max-width: 575.98px) {
    .topnav { height: 4rem !important; }
    .sidenav { top: 4rem !important; }
    .nav-fixed #layoutSidenav #layoutSidenav_content { top: 4rem; }
    .topnav .navbar-brand { max-width: calc(100vw - 218px); padding-inline: 0 !important; }
    .topnav .navbar-brand .brand-logo-icon { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
    .topnav .navbar-brand span { display: none; }
    .topnav .nav-item { margin-right: .25rem !important; }
    .topnav .btn-icon { width: 2.5rem; height: 2.5rem; }
    .topnav .dropdown-toggle > svg { display: none; }
    .avatar-initials { width: 34px; height: 34px; }
    .dropdown-menu-end { max-width: calc(100vw - 1rem); }
    .page-header-title { font-size: 1.3rem; }
    h1, .h1 { font-size: 1.4rem; }
    h2, .h2 { font-size: 1.25rem; }
    .card { border-radius: .55rem; }
    .card-header.d-flex > .btn, .card-header.d-flex > form,
    main .d-flex.justify-content-between > .btn { width: 100%; }
    main .d-flex.justify-content-between > .btn-group { width: 100%; }
    .modal-dialog { margin: .5rem; }
    .modal-dialog-scrollable { height: calc(100% - 1rem); }
    .modal-footer .btn { flex: 1 1 auto; }
    .notification-item { align-items: flex-start; gap: .7rem; padding: .85rem; }
    .notification-list .icon-stack { min-width: 2.25rem; }
    .student-lesson { align-items: flex-start; gap: .7rem; padding: .85rem; }
    .course-detail-image { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .event-banner { height: auto; min-height: 125px; }
    .verification-code { overflow-wrap: anywhere; word-break: break-all; }
}

@media (max-width: 359.98px) {
    #layoutSidenav_content main .container-xl,
    #layoutSidenav_content main .container-fluid { padding-right: .75rem !important; padding-left: .75rem !important; }
    .card-header, .card-body, .card-footer { padding-right: .8rem; padding-left: .8rem; }
}

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