/* Dashboard-only responsive layout and DataTables containment. */

#cu-main-content.container-fluid.row {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
}

#cu-main-content > *,
#departments,
#departments .department-body,
#departments .department-body > .col-md-10,
#departments .department-body > .col-md-10 > .row,
.fac-dashboard-page,
.fac-dashboard-page > *,
.fac-dashboard-page .row > * {
    min-width: 0;
    max-width: 100%;
}

.fac-dashboard-page.row {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    overflow-x: visible !important;
}

.fac-dashboard-page :where(.container, .container-fluid, .card, .card-body, .tab-content) {
    min-width: 0;
    max-width: 100%;
}

#departments .department-body h2,
.fac-dashboard-page :where(h2, h3, p, a, button, label) {
    overflow-wrap: anywhere;
}

.fac-dashboard-page :where(.button, .btn, .cu-btn) {
    max-width: 100%;
    white-space: normal;
}

/* Wide dashboard tables keep their columns and scroll inside their panel. */
.fac-dashboard-page .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.fac-dashboard-page :where(.dt-container, .dataTables_wrapper, .dt-layout-row, .dt-layout-cell, .dt-scroll) {
    min-width: 0;
    max-width: 100%;
}

.fac-dashboard-page :where(.dt-container, .dataTables_wrapper) {
    width: 100%;
}

.fac-dashboard-page .dt-container .dt-layout-row:not(.dt-layout-table),
.fac-dashboard-page .dataTables_wrapper > .row {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-right: 0;
    margin-left: 0;
}

.fac-dashboard-page .dt-container .dt-layout-row:not(.dt-layout-table) > .dt-layout-cell,
.fac-dashboard-page .dataTables_wrapper > .row > * {
    flex: 1 1 14rem;
    min-width: 0;
}

.fac-dashboard-page .dt-container .dt-layout-table,
.fac-dashboard-page .dt-container .dt-layout-table > .dt-layout-cell {
    display: block;
    width: 100%;
    min-width: 0;
}

.fac-dashboard-page :where(.dt-scroll, .dt-scroll-head, .dt-scroll-body, .dt-scroll-foot) {
    width: 100%;
    max-width: 100%;
}

.fac-dashboard-page .dt-scroll-body {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* DataTables' scroll body owns overflow when scrollX is enabled. */
.fac-dashboard-page .table-responsive:has(.dt-scroll) {
    overflow-x: visible !important;
}

.fac-dashboard-page :where(.dt-buttons, .dt-search, .dt-length) {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fac-dashboard-page .dt-buttons .dt-button {
    max-width: 100%;
    margin: 0;
    white-space: normal;
}

.fac-dashboard-page .dt-search input[type="search"] {
    width: min(100%, 22rem);
    max-width: 100%;
    margin-left: 0;
}

.fac-dashboard-page .dt-length select {
    max-width: 100%;
}

.fac-dashboard-page :where(.dt-paging, .pagination) {
    max-width: 100%;
    flex-wrap: wrap;
}

.fac-dashboard-page :where(.dtsp-panesContainer, .dtsp-searchPanes, .dtsb-searchBuilder, .dtsb-group) {
    min-width: 0;
    max-width: 100%;
}

.fac-dashboard-page .dtsb-criteria {
    min-width: 0 !important;
    max-width: 100%;
    flex-wrap: wrap;
}

.fac-dashboard-page .dtsb-criteria :where(input, select, button) {
    min-width: 0;
    max-width: 100%;
}

.fac-dashboard-page .modal-dialog {
    max-width: calc(100vw - 2rem);
    margin-right: auto;
    margin-left: auto;
}

.fac-dashboard-page :where(.modal-content, .modal-body) {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 64em) {
    #departments .department-body > .col-md-10 {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding-right: clamp(0.75rem, 2vw, 1.25rem);
        padding-left: clamp(0.75rem, 2vw, 1.25rem);
    }

    .fac-dashboard-page .dtsp-searchPanes {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) !important;
    }

    .fac-dashboard-page .dtsp-searchPane {
        width: auto !important;
        min-width: 0 !important;
    }
}

@media (max-width: 48em) {
    #departments .department-body h2 {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
    }

    .fac-dashboard-page {
        padding-right: 0;
        padding-left: 0;
    }

    .fac-dashboard-page .sectionHeaders {
        font-size: clamp(1.05rem, 4vw, 1.25rem);
    }

    .fac-dashboard-page .dt-container .dt-layout-row:not(.dt-layout-table),
    .fac-dashboard-page .dataTables_wrapper > .row {
        flex-direction: column;
        align-items: stretch;
    }

    .fac-dashboard-page .dt-container .dt-layout-row:not(.dt-layout-table) > .dt-layout-cell,
    .fac-dashboard-page .dataTables_wrapper > .row > * {
        width: 100% !important;
        flex-basis: auto;
        text-align: left !important;
    }

    .fac-dashboard-page :where(.dt-buttons, .dt-search, .dt-length) {
        width: 100%;
        justify-content: flex-start;
    }

    .fac-dashboard-page .dt-search input[type="search"] {
        width: 100%;
    }

    .fac-dashboard-page :where(.nav, .nav-tabs, #workorders_tabs) {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .fac-dashboard-page table.table {
        font-size: 0.875rem;
    }
}

@media (max-width: 36em) {
    #departments .department-body > .col-md-10 {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .fac-dashboard-page > [class*="col-"] > .row:first-of-type :where(.button, .btn, .cu-btn) {
        display: block;
        width: 100%;
        text-align: center;
    }

    .fac-dashboard-page .dt-buttons .dt-button {
        flex: 1 1 auto;
    }

    .fac-dashboard-page .modal-dialog {
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        margin: 0.5rem auto;
    }
}