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

html,
body {
    width: 100%;
    min-width: 0;
    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;
}

/* Shared keyboard focus treatment inherited by every portal workflow. */
.main :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #1666d3;
    outline-offset: 2px;
}

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

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

main table:not(.dataTable),
.content-wrapper table:not(.dataTable),
.page-wrapper table:not(.dataTable) {
    max-width: 100%;
}

/*
 * Cards intentionally allow long prose to wrap anywhere, but that inherited
 * rule must not reach data grids. Otherwise identifiers such as student IDs,
 * application IDs, passport numbers, agent references, and invoice numbers
 * collapse into one character per line when a table becomes narrow.
 */
.table-responsive table th,
.table-responsive table td,
.dataTables_wrapper table th,
.dataTables_wrapper table td {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.table-responsive table thead th,
.dataTables_wrapper table thead th {
    white-space: nowrap;
}

.portal-id-column,
.id-column,
.application-id-column {
    min-width: 72px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.portal-identifier-column {
    min-width: 125px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.portal-date-column {
    min-width: 96px !important;
    white-space: nowrap !important;
}

.dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.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;
}

#notificationDropdown {
    width: min(400px, calc(100vw - 20px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
}

.student-contact-strip {
    min-width: 0;
}

.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%;
    }

    .student-contact-strip {
        display: none !important;
        padding-left: 0 !important;
    }
}

/* Keep the open mobile navigation above dashboard widgets, but below the header. */
@media (max-width: 1000px) {
    body.toggle-sidebar #sidebar {
        z-index: 996;
    }

    .portal-sidebar-backdrop {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 995;
        width: 100vw;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, .52);
        display: none;
        cursor: pointer;
        pointer-events: none;
        touch-action: manipulation;
    }

    body.toggle-sidebar { overflow: hidden; }

    body.toggle-sidebar .portal-sidebar-backdrop {
        display: block;
        pointer-events: auto;
    }

    #sidebar.sidebar { max-width: min(300px, 86vw); }

    /* 992-1000px matches both the desktop compact-sidebar rules and the mobile
       drawer. Make the open drawer win so labels cannot collapse to icons. */
    body.toggle-sidebar #sidebar.sidebar {
        position: fixed;
        width: min(300px, 86vw);
        max-width: min(300px, 86vw);
        overflow-y: auto;
    }
}

@media (min-width: 1001px) { .portal-sidebar-backdrop { display: none !important; } }

.institute-sidebar .nav-link:focus-visible,
.institute-workspace-heading select:focus-visible {
    outline: 3px solid #22d3ee !important;
    outline-offset: 2px;
}

.institute-sidebar .institute-nav-item > .nav-link,
.institute-sidebar .institute-nav-group > summary {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: .625rem;
}

.institute-sidebar .institute-nav-item > .nav-link > .menu-icon {
    flex: 0 0 1.25rem;
    margin: 0;
    text-align: center;
}

.institute-sidebar .institute-nav-item > .nav-link > .menu-title,
.institute-sidebar .institute-nav-group > summary > .menu-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: normal;
}

.institute-sidebar .institute-nav-group-item,
.institute-sidebar .institute-nav-group { width: 100%; }
.institute-sidebar .institute-nav-group > summary { cursor: pointer; list-style: none; }
.institute-sidebar .institute-nav-group > summary::-webkit-details-marker { display: none; }
.institute-sidebar .institute-nav-group > summary .ri-arrow-down-s-line {
    flex: 0 0 auto;
    margin: 0;
    transition: transform .2s ease;
}
.institute-sidebar .institute-nav-group[open] > summary .ri-arrow-down-s-line { transform: rotate(180deg); }
.institute-sidebar .institute-nav-group-links { margin: 0; padding: .15rem 0 .35rem .65rem; }
.institute-sidebar .institute-nav-group-links .nav-link { font-size: .92rem; }
.institute-sidebar .institute-nav-locked { opacity: .82; }
.institute-sidebar .institute-nav-locked:hover { opacity: 1; }
.institute-sidebar .institute-nav-status-icon {
    flex: 0 0 auto;
    margin: 0;
    color: #f2bd45;
    font-size: .9rem;
}
.institute-sidebar .institute-nav-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: .3rem .45rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #dce8ff;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 1000px) {
    body.toggle-sidebar .institute-sidebar .menu-title { display: block !important; }
    body.toggle-sidebar .institute-sidebar .institute-nav-item > .nav-link,
    body.toggle-sidebar .institute-sidebar .institute-nav-group > summary { display: flex !important; }
}

.institute-section-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.institute-section-nav .btn { text-align: left; }
.institute-form-actions { position: sticky; bottom: 0; z-index: 5; padding: .75rem; margin-inline: -.75rem; background: rgba(255,255,255,.96); border-top: 1px solid #e2e8f0; }

@media (max-width: 767.98px) {
    .account-management-page .table-responsive {
        overflow: visible;
    }

    .account-management-page .table-responsive table {
        display: table;
        min-width: 0;
        table-layout: fixed;
    }

    .account-management-page .table-responsive th {
        width: 36%;
    }

    .account-management-page .table-responsive th,
    .account-management-page .table-responsive td {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .institute-section-nav { display: grid; grid-template-columns: 1fr; padding: .75rem; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; }
    .institute-section-nav .btn { width: 100%; min-height: 44px; }
    .institute-form-actions { position: static; margin-inline: 0; padding: .75rem 0 0; }
    .institute-workspace-heading .institute-selector { width: 100%; }
    .institute-workspace-heading .institute-selector select { width: 100%; }
}

/* Desktop navigation follows the document so the page owns the only vertical scrollbar. */
@media (min-width: 1001px) {
    body:not(.toggle-sidebar) #sidebar.sidebar {
        position: absolute;
        bottom: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }
}

@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;
    }

    #sidebar .nav-link,
    #sidebar .nav-content a,
    .NavLeft a {
        min-height: 42px;
    }

    main table:not(.dataTable),
    .content-wrapper table:not(.dataTable),
    .page-wrapper table:not(.dataTable) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
    .header .search-bar {
        position: static !important;
        inset: auto !important;
        flex: 1 1 auto;
        min-width: 0 !important;
        padding: 0 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .header .search-bar .header-nav {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header .search-bar ul {
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .course-suggestion-actions {
        align-items: stretch !important;
        flex-direction: column;
        gap: 12px;
    }

    .course-suggestion-actions > .text-end {
        max-width: 100%;
        text-align: left !important;
    }

    .course-suggestion-actions .btn {
        max-width: 100%;
        white-space: normal;
    }
    .nav-profile {
        align-items: center;
        display: inline-flex !important;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }
    input[type="checkbox"]:not(.switch-input) {
        min-width: 24px;
        width: 24px;
        min-height: 24px;
        height: 24px;
    }
    .staff-university-edit-link {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
    }
    input[type="radio"].radio-col-blue,
    input.form-check-input[type="radio"] {
        min-width: 24px;
        width: 24px;
        min-height: 24px;
        height: 24px;
    }
    .application-student-link {
        align-items: center;
        display: flex;
        min-height: 24px;
    }
    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;
    }

    #burger-menu,
    .toggle-sidebar-btn,
    .header .nav-icon,
    .header .nav-profile,
    .notification-close {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .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 label {
        display: block;
    }

    .dataTables_wrapper .dataTables_filter input {
        box-sizing: border-box;
        display: block !important;
        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);
    }
}

/* Touch screens (phones, iPad): comfortable tap targets for the shared table controls.
   The DataTables export buttons rendered 24px tall and small row actions as narrow as 13px. */
@media (hover: none) and (pointer: coarse) {
    .dataTables_wrapper .dt-buttons .btn,
    .dataTables_wrapper .dt-buttons .dt-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }

    .table .btn-sm,
    .table .btn-xs {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .pagination .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }

    /* Header home link: the logo text alone made it 14px tall. */
    .header .logo {
        min-height: 40px;
    }

    /* Sign-in pages: "Forgot password?", "Sign Up", login switch and partner links were 17-22px tall. */
    .login-register .login-box a:is(#to-recover, .text-themecolor, .partner-options-link, .text-muted) {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
    }

    /* Row selection checkboxes were 14px on iPad (phones already get 24px). Toggle switches keep their shape. */
    .table input[type="checkbox"]:not(.switch-input, [role="switch"], .form-switch .form-check-input) {
        width: 24px;
        min-width: 24px;
        height: 24px;
        min-height: 24px;
    }

    /* Everything else the layout audit measured under the 24px touch minimum (WCAG 2.5.8):
       sidebar links and section toggles (21-23px), breadcrumb links, the contextual "i" help
       buttons (22px) and full-width link buttons (23px). */
    #sidebar .nav-link,
    #sidebar .chat-sidebar-toggle,
    #sidebar .agent-sidebar-toggle,
    .breadcrumb a,
    .btn-link.btn-block {
        min-height: 24px;
    }
    .breadcrumb a {
        display: inline-flex;
        align-items: center;
    }
    .contextual-help-trigger {
        min-width: 24px;
        min-height: 24px;
    }

    /* Found at the 360/768/1024px audit widths: agent dashboard heading and profile links, course
       finder institution/country links and detail toggles, lead-status edit links, radios on iPad
       (phones already get 24px) and the master-setup checkboxes. */
    .agent-panel-heading > a,
    .agent-completion-link,
    .program-university,
    .program-country,
    .program-result-card summary,
    a.edit-status {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        min-width: 24px;
    }
    .program-title-link {
        display: inline-block;
        min-height: 24px;
    }
    /* Icon-only row actions (edit/delete pencils) were 15x18. */
    .table td a:has(> i:only-child),
    .table td a:has(> svg:only-child) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        min-height: 24px;
    }
    input[type="radio"].radio-col-blue,
    input.form-check-input[type="radio"],
    input[type="checkbox"].m-auto {
        width: 24px;
        min-width: 24px;
        height: 24px;
        min-height: 24px;
    }
}

/* Long result sets (e.g. Security activity, 20,000 rows) ran the page links past the screen on iPad. */
.pagination {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Phones: the breadcrumb repeats the page title, so keep it to one quiet line. */
@media (max-width: 767.98px) {
    #main > .row:first-child .breadcrumb {
        flex-wrap: nowrap;
        margin-bottom: .35rem !important;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 12px;
        scrollbar-width: none;
    }

    #main > .row:first-child .breadcrumb::-webkit-scrollbar {
        display: none;
    }
}

/* Phones: the shared toolbar rule above makes every .btn-group a full-width row. Inside a table
   that pushed each row's action menu under its other buttons, so list rows were about 130px tall
   (Staff list). Keep row actions inline. */
@media (max-width: 575.98px) {
    .table td .btn-group {
        display: inline-flex;
        width: auto;
    }
}

/* Panels marked data-portal-mobile-collapse (public/js/portal-mobile-collapse.js): long filter and
   bulk-action panels fold behind one button on phones so the list comes first. */
.portal-mobile-collapse-toggle {
    display: none;
}

@media (max-width: 767.98px) {
    .portal-mobile-collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        margin: 0 0 12px;
        padding: 10px 14px;
        border: 1px solid var(--bs-border-color, #d6e0ee);
        border-radius: 10px;
        background: var(--bs-body-bg, #ffffff);
        color: var(--bs-body-color, #1f2d3d);
        font-weight: 700;
        text-align: left;
    }

    .portal-mobile-collapse-state {
        color: #1666d3;
        font-weight: 600;
        white-space: nowrap;
    }

    [data-portal-mobile-collapse].portal-mobile-collapsed {
        display: none !important;
    }

    /* Select2 measures its width when it initialises, which may be while the panel is folded. */
    [data-portal-mobile-collapse] .select2-container {
        width: 100% !important;
    }
}

/* 21 Oct 2026: the legacy theme turns any sidebar into a 70px icon rail when the menu
   button is pressed at >=992px. The institute sidebar has no rail design (groups have no
   icons, the Premium legend squashes), so on wide screens the button hides it instead. */
@media (min-width: 1001px) {
    body.toggle-sidebar:has(#sidebar.institute-sidebar) #sidebar.institute-sidebar { display: none !important; }
    body.toggle-sidebar:has(#sidebar.institute-sidebar) #main,
    body.toggle-sidebar:has(#sidebar.institute-sidebar) #footer { margin-left: 0 !important; }
    body.toggle-sidebar:has(#sidebar.institute-sidebar) { background-image: none !important; }
}