/* Shared layout constraints. Tables scroll locally; the document is never clipped. */
.sc-page-shell,
.sc-responsive :is(.card, .card-body, .tab-content, .tab-pane, .dt-container, .dataTables_wrapper),
.modal :is(.modal-content, .modal-body, .tab-content, .tab-pane),
.workspace-widget,
.row > * {
    min-width: 0;
}

:is(.sc-page-shell, .modal, .auth-box, .sc-responsive) :is(.form-control, .form-select, .select2-container, .input-group) {
    max-width: 100%;
}

:is(.sc-page-shell, .modal, .auth-box, .sc-responsive) :is(h1, h2, h3, h4, h5, h6, label, .alert, dd) {
    overflow-wrap: anywhere;
}

:is(.sc-page-shell, .modal, .auth-box, .sc-responsive) .btn:not(.btn-icon) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Keep short cell actions together inside their own scroll region. */
.table-responsive .table .btn { white-space: nowrap; }
.table-responsive { min-width: 0; max-width: 100%; }
.sc-table-scroll { overscroll-behavior-x: contain; }
.sc-table-scroll:focus-visible { outline: 2px solid var(--bs-primary, #1ab394); outline-offset: 2px; }

.sc-action-row,
:is(.sc-page-shell, .modal) .card-header,
.page-title-head {
    flex-wrap: wrap;
    gap: .5rem;
}
.sc-action-row > * { min-width: 0; max-width: 100%; }
.sc-action-row > .input-group { flex: 1 1 14rem; }
.sc-action-row > :is(.form-control, .form-select) { flex: 1 1 12rem; width: auto; }
.page-title-head > * { min-width: 0; }
.page-title-head .breadcrumb { flex-wrap: wrap; overflow-wrap: anywhere; }

:is(.sc-page-shell, .modal) .nav-link { white-space: normal; overflow-wrap: anywhere; }
:is(.sc-page-shell, .modal, .auth-box, .sc-responsive) pre { max-width: 100%; overflow: auto; }
.modal-header { gap: .5rem; }
.modal-header > :not(.btn-close) { min-width: 0; overflow-wrap: anywhere; }
.modal-header .btn-close { flex-shrink: 0; }
.modal-footer { gap: .5rem; }
.modal-footer > * { max-width: 100%; }

/* Do not let a long company/user name displace the mobile navigation toggle. */
.sc-app-shell .topbar-menu > .d-flex { min-width: 0; }
.sc-app-shell .nav-user h5 { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sc-vehicle-check-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.sc-vehicle-check-label { flex: 0 1 18.75rem; min-width: 0; overflow-wrap: anywhere; }
.sc-vehicle-check-statuses { display: flex; flex-wrap: wrap; gap: .4rem; }
.sc-vehicle-check-statuses > .btn { flex: 0 1 auto; margin: 0; border-radius: var(--bs-border-radius, .375rem) !important; }

/* FullCalendar owns its inner time grid. Only its controls and outer shell wrap. */
.sc-calendar-shell > .card { min-width: 0; }
.sc-calendar-shell .fc-toolbar { flex-wrap: wrap; gap: .65rem; }
.sc-calendar-shell .fc-toolbar-chunk { min-width: 0; max-width: 100%; }
.sc-calendar-shell .fc-button-group,
.sc-calendar-source { flex-wrap: wrap; }
.sc-calendar-shell .fc-toolbar-title { overflow-wrap: anywhere; }

.auth-box .auth-brand img { max-width: 100%; object-fit: contain; }
.auth-box .two-factor { gap: clamp(.2rem, 1vw, .5rem) !important; }
.auth-box .two-factor .otp { flex: 1 1 0; min-width: 0; width: 0; padding-inline: .2rem; }
.booking-dialog { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 2rem); overflow: auto; }
.booking-dialog label { max-width: 100%; }

/* DataTables v1/v2 controls can be wider than the actual table on a phone. */
:is(.dt-container, .dataTables_wrapper) :is(.dt-search, .dataTables_filter) input { max-width: 100%; min-width: 0; }
:is(.dt-container, .dataTables_wrapper) :is(.dt-search, .dataTables_filter) label { max-width: 100%; }
:is(.dt-container, .dataTables_wrapper) .dt-buttons { display: flex; flex-wrap: wrap; gap: .25rem; }
:is(.dt-container, .dataTables_wrapper) .pagination { flex-wrap: wrap; gap: .25rem; }

@media (max-width: 991.98px) {
    .sc-calendar-shell { height: auto; min-height: 32rem; }
    .sc-calendar-shell > .card { height: auto !important; }
    .sc-calendar-shell .sc-calendar-body { height: auto !important; }
    .sc-app-shell .topbar-menu { gap: .5rem; }
}

@media (max-width: 767.98px) {
    .sc-action-row { align-items: stretch !important; }
    .sc-action-row > :is(.btn, .dropdown) { flex: 1 1 auto; }
    .sc-action-row > .dropdown > .btn { width: 100%; }
    .sc-action-row > :is(.form-control, .form-select, .input-group) { flex-basis: 100%; width: 100%; }
    .page-title-head { padding-block: .6rem; }
    .page-title-head > .text-end { text-align: start !important; }
    .sc-vehicle-check-label { flex-basis: 100%; margin-right: 0 !important; }
    .sc-vehicle-check-statuses { width: 100%; }
    .sc-vehicle-check-statuses > .btn { flex: 1 1 7rem; }
    .sc-calendar-shell .fc-toolbar-title { font-size: 1.15rem; }
    :is(.sc-page-shell, .modal) .btn-group:not(.dropdown):not(.input-group) { flex-wrap: wrap; max-width: 100%; }
    .sc-crm-admin-page .crm-checkbox-grid { grid-template-columns: minmax(0, 1fr); }
    .sc-crm-admin-page :is(.crm-company-selector, .crm-connector-select) { min-width: 0; width: 100%; }
    :is(.dt-container, .dataTables_wrapper) > .row > .col.ms-auto { flex-basis: 100%; margin-left: 0 !important; }
    :is(.dt-container, .dataTables_wrapper) :is(.dt-search, .dataTables_filter) { flex: 1 1 10rem; text-align: start; }
    :is(.dt-container, .dataTables_wrapper) :is(.dt-search, .dataTables_filter) input { width: 100%; margin-left: 0; }
    :is(.dt-container, .dataTables_wrapper) .pagination { justify-content: flex-start; }
    :is(.sc-page-shell, .modal) .dropdown-menu { max-width: calc(100vw - 2rem); }
    :is(.sc-page-shell, .modal) .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 575.98px) {
    /* Header padding otherwise leaves too little room for long modal titles. */
    .modal .modal-header, .modal .modal-body, .modal .modal-footer { padding: 1rem !important; }
    .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) { max-width: calc(100% - 1rem); margin-inline: .5rem; }
    .date-range-filter { min-width: 0; width: 100%; }
    .date-range-filter__calendar-wrap { padding-inline: .65rem; }
    .date-range-filter__weekdays, .date-range-filter__days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .date-range-filter__day, .date-range-filter__blank { min-width: 0; }
    .date-range-filter__actions { flex-wrap: wrap; }
}

@media print {
    .sc-table-scroll { overflow: visible; max-width: none; }
}
