/* Shared responsive hardening for public, student, agent, and admin portal pages. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

img,
video {
    height: auto;
}

input,
select,
textarea,
button,
.form-control,
.form-select,
.custom-select,
.select2-container,
.select2-selection,
.input-group,
.btn,
.card,
.modal-content {
    max-width: 100%;
}

textarea {
    min-width: 0;
}

.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width: 0;
}

.card,
.box,
.panel,
.white-box,
.content-card,
.main-card,
.modal-content {
    overflow-wrap: anywhere;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table,
.dataTables_wrapper table {
    width: 100% !important;
}

.dataTables_wrapper {
    max-width: 100%;
}

.dataTables_wrapper .row,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    min-width: 0;
}

.dataTables_wrapper .dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dataTables_wrapper .dataTables_filter input {
    max-width: 100%;
}

.select2-container {
    width: 100% !important;
}

.select2-dropdown,
.select2-container--open .select2-dropdown {
    max-width: calc(100vw - 24px) !important;
}

.select2-results__option {
    white-space: normal;
    overflow-wrap: anywhere;
}

.iti,
.iti--allow-dropdown {
    width: 100%;
}

.iti__country-list {
    max-width: min(420px, calc(100vw - 24px));
    white-space: normal;
    z-index: 10050;
}

.iti__country {
    display: flex;
    align-items: center;
    gap: 8px;
}

.iti__country-name {
    overflow-wrap: anywhere;
}

.ck-editor,
.ck-editor__main,
.ck-content,
.tox-tinymce,
.note-editor,
.ql-container {
    max-width: 100%;
}

.nav-tabs,
.nav-pills {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

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

.breadcrumb {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.modal-dialog {
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
}

.dropdown-menu {
    max-width: calc(100vw - 24px);
    overflow-wrap: anywhere;
}

.dashboard-welcome,
.student-dashboard,
.student-home,
.recent-activity-card,
.quick-card,
.fees-card,
.support-ticket-ui,
.additional-service-ui,
.stat-card {
    max-width: 100%;
}

.recent-activity-card,
.quick-card,
.fees-card,
.support-ticket-ui,
.additional-service-ui,
.stat-card {
    overflow-wrap: anywhere;
}

.btn-group,
.btn-toolbar,
.filter-toolbar,
.action-toolbar {
    flex-wrap: wrap;
    gap: 8px;
}

.application-tracking,
.tracking-matrix,
.commission-matrix,
.pipeline-track {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.program-card,
.course-card,
.course-finder-card,
.application-card,
.university-card,
.agent-card {
    min-width: 0;
}

@media (max-width: 1199.98px) {
    .container,
    .container-fluid {
        max-width: 100%;
    }

    .main,
    .page-wrapper,
    .main-content,
    .main-content-public {
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    body .main,
    body main#main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .app-body {
        display: block !important;
    }

    .header,
    .topbar,
    .navbar,
    .public-auth-header {
        max-width: 100vw;
    }

    .navbar,
    .navbar .container,
    .navbar .container-fluid,
    .topbar .navbar-collapse,
    .topbar .navbar-nav,
    .public-auth-header,
    .public-auth-menu {
        flex-wrap: wrap;
        gap: 10px;
    }

    .main-content {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        padding: 14px !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .dashboard-welcome .container-fluid,
    .student-dashboard .container-fluid,
    .student-home .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .agent-application-hero,
    .intake-hero,
    .dashboard-grid,
    .course-finder-layout,
    .course-results-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 15px;
    }

    h1,
    .h1 {
        font-size: 2rem !important;
        line-height: 1.12 !important;
    }

    h2,
    .h2 {
        font-size: 1.55rem !important;
        line-height: 1.18 !important;
    }

    h3,
    .h3 {
        font-size: 1.25rem !important;
    }

    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 12px;
    }

    .card-body,
    .box-body,
    .panel-body,
    .white-box,
    .main-card,
    .agent-application-card .card-body,
    .agent-form-section,
    .intake-form,
    .intake-panel {
        padding: 16px !important;
    }

    .public-auth-header {
        padding: 14px 12px !important;
    }

    .public-auth-logo img,
    .auth-brand img {
        width: min(170px, 70vw) !important;
    }

    .public-auth-menu a {
        min-height: 38px;
        padding: 0 12px;
        font-size: 14px;
    }

    .login-register,
    .agent-application-page,
    .intake-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .login-box.card,
    .agent-application-card,
    .intake-card,
    .intake-panel,
    .agent-hero-panel,
    .agent-process-panel {
        width: 100% !important;
        border-radius: 14px !important;
    }

    .agent-form-grid,
    .agent-checkbox-grid,
    .intake-grid {
        grid-template-columns: 1fr !important;
    }

    .agent-form-grid .full-width,
    .intake-grid .wide {
        grid-column: auto !important;
    }

    .phone-combo {
        grid-template-columns: minmax(104px, 34%) minmax(0, 1fr) !important;
    }

    .dataTables_wrapper .row {
        display: block;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: left !important;
        margin: 8px 0;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length label {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0 !important;
    }

    .dt-buttons {
        margin-top: 8px;
    }

    .table-responsive table,
    .dataTables_wrapper table {
        min-width: 680px;
    }

    .modal-dialog {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .btn:not(.btn-sm):not(.btn-link):not(.dropdown-toggle) {
        min-height: 42px;
    }

    .dashboard-welcome {
        padding: 18px 0 !important;
    }

    .stat-card,
    .quick-card,
    .fees-card,
    .recent-activity-card,
    .support-ticket-ui,
    .additional-service-ui {
        margin-bottom: 12px;
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .main,
    main#main,
    .page-wrapper,
    .main-content,
    .main-content-public {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

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

    .btn-group,
    .btn-toolbar,
    .filter-toolbar,
    .action-toolbar {
        display: flex;
        width: 100%;
    }

    .btn-group > .btn,
    .filter-toolbar > .btn,
    .action-toolbar > .btn {
        flex: 1 1 auto;
    }

    .table-responsive table,
    .dataTables_wrapper table {
        min-width: 620px;
    }

    .iti__country-list {
        left: 0 !important;
        right: auto !important;
        width: calc(100vw - 24px);
    }
}