/*
 * Universal mobile layout layer for the pedagogical platform.
 * It only changes sizing, flow and overflow. Existing page colours are preserved.
 */

@media screen {
    html {
        width: 100%;
        max-width: 100%;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body *,
    body *::before,
    body *::after {
        min-width: 0;
    }

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

    body img,
    body video {
        height: auto;
    }

    body .content,
    body main.content,
    body .student-content,
    body .container,
    body .container-fluid,
    body .row,
    body .card,
    body .card-body,
    body .card-header,
    body form,
    body fieldset {
        max-width: 100%;
    }

    body p,
    body td,
    body th,
    body label,
    body .alert,
    body .card-title,
    body .card-text,
    body .navbar-brand,
    body .page-title,
    body .page-header,
    body .page-head {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    body .mobile-table-scroll {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        border-radius: inherit;
    }

    body .mobile-table-scroll > table {
        margin-bottom: 0;
    }

    body .mobile-table-scroll:focus-visible {
        outline: 3px solid rgba(20, 184, 166, .18);
        outline-offset: 2px;
    }

    body .mobile-table-scroll::-webkit-scrollbar {
        height: 7px;
    }

    body .mobile-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, .38);
        border-radius: 999px;
    }

    body .mobile-table-scroll::-webkit-scrollbar-track {
        background: rgba(148, 163, 184, .12);
        border-radius: 999px;
    }

    body .nav-tabs,
    body .nav-pills,
    body .pagination,
    body .breadcrumb {
        max-width: 100%;
    }

    body .select2-container,
    body .choices,
    body .choices__inner,
    body .flatpickr-wrapper,
    body .input-group,
    body .form-floating {
        width: 100% !important;
        max-width: 100% !important;
    }

    body .dropdown-menu {
        max-width: min(92vw, 360px);
        overflow-wrap: anywhere;
    }

    body .modal-content,
    body .offcanvas,
    body .toast {
        max-width: 100%;
    }

    body textarea {
        min-height: 110px;
        resize: vertical;
    }

    body input[type="file"] {
        max-width: 100%;
    }
}

@media screen and (max-width: 991.98px) {
    body {
        font-size: 14px;
    }

    body .content,
    body main.content,
    body .student-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    body .navbar {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-height: 64px !important;
        height: auto !important;
        padding: .65rem 1rem !important;
    }

    body .navbar ~ .content,
    body .navbar ~ main.content {
        margin-top: 0 !important;
        padding-top: 80px !important;
    }

    body .navbar .container,
    body .navbar .container-fluid {
        min-height: 44px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .45rem .75rem;
        padding: 0;
    }

    body .navbar-brand {
        max-width: calc(100% - 54px);
        margin: 0;
        font-size: clamp(1rem, 4.3vw, 1.22rem) !important;
        line-height: 1.3;
        white-space: normal;
    }

    body .navbar .position-absolute,
    body .navbar .start-50,
    body .navbar .top-50,
    body .navbar .translate-middle {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        margin-inline-start: auto;
    }

    body .container,
    body .container-fluid {
        --bs-gutter-x: 1rem;
    }

    body h1 {
        font-size: clamp(1.45rem, 6vw, 1.95rem) !important;
        line-height: 1.3;
    }

    body h2 {
        font-size: clamp(1.25rem, 5.4vw, 1.7rem) !important;
        line-height: 1.35;
    }

    body h3 {
        font-size: clamp(1.1rem, 4.8vw, 1.4rem) !important;
        line-height: 1.4;
    }

    body h4,
    body h5 {
        line-height: 1.4;
    }

    body .page-head,
    body .page-header,
    body .topbar,
    body .hero-section,
    body .welcome-section,
    body .welcome-banner {
        padding: 1rem !important;
        border-radius: 14px !important;
    }

    body .page-head,
    body .page-header,
    body .topbar,
    body .mobile-action-group,
    body .card-header > .d-flex,
    body .card-body > .d-flex:first-child,
    body .content > .d-flex:first-child,
    body .container-fluid > .d-flex:first-child {
        flex-wrap: wrap !important;
        gap: .65rem !important;
    }

    body .topbar {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    body .topbar > * {
        max-width: 100%;
    }

    body .card {
        margin-bottom: 1rem;
        border-radius: 14px;
    }

    body .card-header {
        padding: 1rem !important;
        font-size: 1rem;
    }

    body .card-body,
    body .card.p-4,
    body .card.p-3,
    body .student-card {
        padding: 1rem !important;
    }

    body .row {
        --bs-gutter-x: .85rem;
        --bs-gutter-y: .85rem;
    }

    body .mobile-filter-form,
    body form.d-flex:not(.d-inline):not(.d-inline-flex),
    body form.rounded-pill {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: .65rem !important;
        border-radius: 14px !important;
    }

    body .mobile-filter-form > *,
    body form.d-flex:not(.d-inline):not(.d-inline-flex) > *,
    body form.rounded-pill > * {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body .form-control,
    body .form-select,
    body .btn:not(.btn-sm),
    body .input-group-text {
        min-height: 44px;
    }

    body .form-control,
    body .form-select,
    body input,
    body select,
    body textarea {
        font-size: 16px;
    }

    body .mobile-action-group {
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    body .mobile-action-group > .btn,
    body .mobile-action-group > a.btn,
    body .mobile-action-group > form {
        flex: 1 1 190px;
        max-width: 100%;
    }

    body .mobile-action-group > form > .btn {
        width: 100%;
    }

    body .btn-group.mobile-action-group,
    body .btn-group-vertical.mobile-action-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        border-radius: 0;
    }

    body .btn-group.mobile-action-group > .btn {
        border-radius: 8px !important;
        margin: 0 !important;
    }

    body .mobile-table-scroll {
        margin-inline: 0;
        padding-bottom: .25rem;
    }

    body .mobile-table-scroll > table {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        font-size: .84rem;
    }

    body .mobile-table-scroll > table th {
        min-width: 110px;
        white-space: nowrap;
        padding: .75rem .65rem;
    }

    body .mobile-table-scroll > table td {
        min-width: 110px;
        max-width: 300px;
        padding: .72rem .65rem;
        white-space: normal;
        vertical-align: middle;
    }

    body .mobile-table-scroll > table.mobile-table-compact th,
    body .mobile-table-scroll > table.mobile-table-compact td {
        min-width: 90px;
    }

    body .mobile-table-scroll > table.mobile-table-wide,
    body .mobile-table-scroll > table.schedule-table,
    body .mobile-table-scroll > table.timetable,
    body .mobile-table-scroll > table[id*="schedule" i] {
        min-width: 920px !important;
    }

    body .mobile-table-scroll td.text-nowrap,
    body .mobile-table-scroll td:last-child {
        max-width: none;
    }

    body .mobile-table-scroll td .btn,
    body .mobile-table-scroll td form,
    body .mobile-table-scroll td a.btn {
        margin: .15rem !important;
    }

    body .nav-tabs,
    body .nav-pills {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .3rem;
    }

    body .nav-tabs .nav-item,
    body .nav-pills .nav-item,
    body .nav-tabs .nav-link,
    body .nav-pills .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    body .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: .2rem;
    }

    body .modal-dialog {
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        margin: .5rem auto !important;
    }

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

    body .modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    body .modal-footer > * {
        margin: 0 !important;
    }

    body .alert {
        padding: .85rem 1rem;
    }

    body .lang-switcher {
        top: .7rem;
        right: auto;
        left: .75rem;
        max-width: calc(100vw - 1.5rem);
    }

    body:not(.rtl) .lang-switcher,
    html[dir="ltr"] body .lang-switcher {
        right: .75rem;
        left: auto;
    }

    body .lang-option {
        padding: .4rem .65rem;
        font-size: .76rem;
    }

    body .chart-container,
    body .chart-wrapper,
    body [class*="chart"] {
        max-width: 100%;
        overflow: hidden;
    }

    body .chart-container canvas,
    body .chart-wrapper canvas,
    body [class*="chart"] canvas {
        width: 100% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 575.98px) {
    body .content,
    body main.content,
    body .student-content {
        padding-right: .75rem !important;
        padding-left: .75rem !important;
        padding-bottom: 1rem !important;
    }

    body .navbar {
        padding: .6rem .75rem !important;
    }

    body .navbar ~ .content,
    body .navbar ~ main.content {
        padding-top: 76px !important;
    }

    body .card,
    body .page-head,
    body .page-header,
    body .topbar {
        border-radius: 12px !important;
    }

    body .page-head,
    body .page-header,
    body .topbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body .topbar .btn,
    body .page-head .btn,
    body .page-header .btn {
        width: 100%;
        margin-top: .35rem !important;
    }

    body .mobile-action-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body .mobile-action-group > .btn,
    body .mobile-action-group > a.btn,
    body .mobile-action-group > form {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    body .mobile-action-group > form > .btn,
    body .mobile-action-group > form > a.btn {
        width: 100% !important;
    }

    body .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh;
        margin: 0 !important;
    }

    body .modal-content {
        min-height: 100dvh;
        border-radius: 0 !important;
    }

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

    body .toast-container {
        right: .5rem !important;
        left: .5rem !important;
        width: auto !important;
    }

    body .toast {
        width: 100% !important;
    }

    body .table-responsive,
    body .mobile-table-scroll {
        border-radius: 10px;
    }

    body .badge {
        white-space: normal;
        line-height: 1.35;
    }
}


@media screen and (max-width: 991.98px) {
    body .page,
    body .page-shell,
    body .page-content,
    body .content-canvas,
    body .main-content,
    body .dashboard-content,
    body .main-wrapper,
    body .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body .page,
    body .content-canvas,
    body .main-content,
    body .dashboard-content,
    body .main-wrapper {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    body div[style*="width:"],
    body section[style*="width:"],
    body article[style*="width:"],
    body main[style*="width:"],
    body form[style*="width:"] {
        max-width: 100% !important;
    }

    body div[style*="min-width:"],
    body section[style*="min-width:"],
    body article[style*="min-width:"],
    body main[style*="min-width:"],
    body form[style*="min-width:"] {
        min-width: 0 !important;
    }

    body .autocomplete-wrap,
    body .suggestions,
    body .dropdown,
    body .dropdown-menu,
    body .position-relative {
        max-width: 100%;
    }

    body .suggestions {
        max-height: min(45vh, 280px) !important;
        overflow-y: auto !important;
    }
}

@media screen and (max-width: 575.98px) {
    body .page,
    body .content-canvas,
    body .main-content,
    body .dashboard-content,
    body .main-wrapper {
        padding-right: .75rem !important;
        padding-left: .75rem !important;
    }
}

@media screen and (hover: none) and (pointer: coarse) {
    body .card:hover,
    body .btn:hover,
    body .group-hover-lift:hover,
    body .action-card:hover,
    body .student-card:hover {
        transform: none !important;
    }
}

@media print {
    .mobile-table-scroll {
        overflow: visible !important;
    }
}