/* Responsive foundations shared by every authenticated module. */
*,
*::before,
*::after { box-sizing: border-box; }

html { min-width: 320px; max-width: 100%; overflow-x: clip; }
body { min-width: 320px; max-width: 100%; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
iframe, video { height: auto; }

#wrapper,
#page-content-wrapper,
#page-content-wrapper > .container,
#page-content-wrapper > .container-fluid,
#page-content-wrapper .row,
#page-content-wrapper .card,
#page-content-wrapper .card-body,
#page-content-wrapper .tab-content,
#page-content-wrapper .tab-pane { min-width: 0; }

.container,
.container-fluid { min-width: 0; max-width: 100%; }
body > .container,
body > .container-fluid { width: 100%; }
.container-fluid h1 .badge,
.container-fluid h2 .badge,
.container-fluid h3 .badge,
.container-fluid h4 .badge,
.container-fluid h5 .badge,
.container-fluid h6 .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }

#page-content-wrapper { overflow-x: clip; }
#page-content-wrapper :where(h1,h2,h3,h4,h5,h6,p,small,label,.form-text,.card-title,.modal-title) {
    overflow-wrap: anywhere;
}
#page-content-wrapper :where(.d-flex,.btn-toolbar,.input-group) { min-width: 0; }
#page-content-wrapper :where(.btn-toolbar,.action-buttons,.page-actions,.module-actions) { flex-wrap: wrap; }
#page-content-wrapper :where(input,select,textarea,.form-control,.form-select) { min-width: 0; max-width: 100%; }
#page-content-wrapper :where(.form-control,.form-select) { font-size: max(16px, 1rem); }
#page-content-wrapper :where(.card-header,.modal-header,.modal-footer) { flex-wrap: wrap; gap: .5rem; }

.table-responsive,
.dataTables_wrapper,
.fc-scroller,
.calendar-scroll,
.cs-horizontal-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive { overscroll-behavior-inline: contain; }

.modal-dialog { width: auto; max-width: min(100% - 1rem, var(--bs-modal-width, 500px)); }
.modal-dialog-scrollable { max-height: calc(100dvh - 1rem); }
.modal-content { max-height: calc(100dvh - 1rem); }
.modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.fc { width: 100%; max-width: 100%; min-width: 0; }
.fc .fc-toolbar { flex-wrap: wrap; gap: .5rem; }
.fc .fc-toolbar-chunk { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.fc .fc-toolbar-title { font-size: clamp(1rem, 2.4vw, 1.45rem); }

@media (max-width: 991.98px) {
    #page-content-wrapper { padding: 1rem !important; }
    .container-fluid { --bs-gutter-x: 1.25rem; }
    .container-fluid > .d-flex.justify-content-between { flex-wrap: wrap; align-items: flex-start !important; }
    .container-fluid > .d-flex.justify-content-between > :first-child { flex: 1 1 100%; min-width: 0; }
    .container-fluid > .d-flex.justify-content-between > :not(:first-child) { max-width: 100%; }
    .cs-topbar .cs-topbar-content { flex-wrap: wrap; }
    .cs-topbar-actions { flex-wrap: wrap; }
}

@media (max-width: 767.98px) {
    #page-content-wrapper { padding: .75rem !important; }
    #page-content-wrapper .container-fluid { padding-left: .5rem; padding-right: .5rem; }
    body > .container-fluid { padding-left: .5rem; padding-right: .5rem; }
    #page-content-wrapper :where(.row) { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    #page-content-wrapper :where(.card-body) { padding: .85rem; }
    #page-content-wrapper :where(.card-header) { padding: .75rem .85rem; }

    /* Preserve table columns and allow an intentional touch scroll instead of
       forcing tiny unreadable cells or letting the whole page grow sideways. */
    #page-content-wrapper table:not(.table-layout-fixed) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #page-content-wrapper table:not(.table-layout-fixed) th,
    #page-content-wrapper table:not(.table-layout-fixed) td { white-space: nowrap; }
    #page-content-wrapper .table-responsive table { display: table; }

    #page-content-wrapper :where(.btn-group,.btn-toolbar) { flex-wrap: wrap; }
    #page-content-wrapper :where(.btn-group > .btn) { border-radius: .375rem !important; margin: .1rem; }
    #page-content-wrapper :where(.input-group) { flex-wrap: wrap; }
    #page-content-wrapper :where(.input-group > .form-control,
        .input-group > .form-select,
        .input-group > .form-floating) { flex: 1 1 10rem; width: 1%; }

    .cs-topbar { position: sticky; top: 0; }
    .cs-topbar .container-fluid { align-items: center; }
    .cs-topbar-actions { flex: 1 1 auto; justify-content: flex-end; }
    .cs-topbar-actions > * { max-width: 100%; }
    .cs-context-control .form-select { max-width: 42vw; }
    .dropdown-menu { max-width: calc(100vw - 1rem); }

    .fc .fc-toolbar { justify-content: center; }
    .fc .fc-toolbar-chunk { justify-content: center; }
    .fc { overflow-x: auto; overscroll-behavior-inline: contain; }
    .fc .fc-scrollgrid,
    .fc .fc-scrollgrid table,
    .fc .fc-col-header,
    .fc .fc-daygrid-body,
    .fc .fc-daygrid-body table { width: 100% !important; table-layout: fixed; }
    .fc .fc-scroller { max-width: 100%; overflow-x: auto !important; }
    .fc .fc-daygrid-event { white-space: normal; font-size: .66rem; line-height: 1.15; }
    .fc .fc-daygrid-day-number { padding: 1px 2px; }
    .fc .fc-daygrid-day-frame { min-height: 3.5rem; }
}

@media (max-width: 575.98px) {
    #page-content-wrapper { padding: .5rem !important; }
    #page-content-wrapper .container-fluid { padding-left: .25rem; padding-right: .25rem; }
    #page-content-wrapper h1 { font-size: 1.45rem; }
    #page-content-wrapper h2 { font-size: 1.3rem; }
    #page-content-wrapper h3 { font-size: 1.15rem; }
    #page-content-wrapper .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
    #page-content-wrapper :where(.modal-header,.modal-body,.modal-footer) { padding: .8rem; }
    #page-content-wrapper :where(.btn:not(.btn-group .btn)) { min-height: 2.5rem; }
    #page-content-wrapper .btn-group > .btn { min-height: 2.25rem; }
    .cs-topbar .cs-topbar-content { padding-inline: .4rem; }
    .cs-topbar-actions { gap: .25rem !important; }
    .cs-topbar-actions .btn { min-width: 2.25rem; }
    .cs-user-name { display: none !important; }
    .cs-topbar .dropdown-menu { position: fixed !important; inset: var(--navbar-h, 58px) .5rem auto auto !important; }
}

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