/* Shared layout constraints; Bootstrap handles grids and components. */
html, body { min-width: 0; }
.app-content, main, .card, .card-body { min-width: 0; }
.app-content { overflow-wrap: anywhere; }
.table-responsive { max-width: 100%; }
.table-responsive th, .table-responsive td { vertical-align: middle; }
img { max-width: 100%; }
@media (max-width: 991.98px) {
    #sidebar { --bs-offcanvas-width: min(320px, 90vw); }
}
@media (max-width: 575.98px) {
    .app-content { padding: 1rem !important; }
    .app-content .card-body, .modal-body { padding: 1rem !important; }
    .app-content .btn, .modal .btn, .calendar-dialog .btn { min-height: 44px; }
    .form-control, .form-select { font-size: 1rem; min-height: 44px; }
    .table-responsive table { font-size: .875rem; }
    .table-responsive th { white-space: nowrap; }
    .modal-dialog { margin: .5rem; }
    .calendar-dialog { max-height: calc(100dvh - 16px); width: calc(100vw - 16px); }
    .calendar-dialog .p-4 { padding: 1rem !important; }
    .calendar-dialog .d-flex.flex-wrap > .btn { flex: 1 1 auto; }
    .calendar-dialog #block-option { flex: 1 1 100%; }
    .calendar-dialog #close-slot-now { width: 100%; }
    .calendar-date-picker { min-width: 0; width: 100%; }
    #header-clock { display: block; font-size: 1rem !important; }
}