/* Keep content within its layout column; wide interactive grids scroll locally. */
.panel-main, .panel-main .container-fluid, .panel-main .card,
.panel-main .card-body, .panel-main .row > *, .panel-main fieldset { min-width: 0; }
.panel-main :where(img, video, iframe, canvas), #invoice :where(img, video) { max-width: 100%; }
.panel-main :where(input, select, textarea), .limiter :where(input, select, textarea) { max-width: 100%; }
.panel-main :where(p, h1, h2, h3, h4, h5, h6, label, dd, a), #invoice { overflow-wrap: anywhere; }
.panel-main :where(.table-responsive, .schedule-table-wrap, .sp-calendar-scroll, .pg-table-wrap, .ma-table-wrap) { min-width: 0; max-width: 100%; }
.panel-main :where(.packages-page, .resources-page, .study-plans, .progress-page, .teacher-dashboard) > * { min-width: 0; }
.sidenav .navbar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sidenav .navbar-brand > img { flex-shrink: 0; max-width: 60px; object-fit: contain; }
.sidenav .navbar-brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
    .panel-main { width: 100%; max-width: 100%; }
    .panel-main > .container-fluid { padding-inline: 12px; }
    .panel-main > .navbar { margin-inline: 12px !important; }
    .panel-main .card > .card-body, .panel-main .card > .card-header { padding: 18px 16px; }
    .panel-main .card-header { flex-wrap: wrap; gap: 10px; }
    .panel-main :where(.btn, .form-control, .form-select) { max-width: 100%; }
    .panel-main .btn { white-space: normal; overflow-wrap: anywhere; min-height: 40px; }
    .panel-main :where(input.form-control, select.form-control, textarea.form-control, .form-select),
    .limiter :where(input.form-control, select.form-control, textarea.form-control) { font-size: 16px; }
    .panel-main :where(.pkg-heading, .res-heading, .schedule-heading, .td-section-heading) { flex-wrap: wrap; }
    .panel-main :where(.pkg-heading, .res-heading, .schedule-heading, .td-section-heading) > * { min-width: 0; max-width: 100%; }
    .panel-main :where(.pkg-search, .res-search, .pkg-pagination, .res-pagination) { flex-wrap: wrap; }
    .panel-main :where(.pkg-search, .res-search) .form-control { flex: 1 1 160px; min-width: 0; }
    .modal-dialog { max-width: calc(100% - 24px); margin-inline: auto; }
    .modal-content { min-width: 0; overflow-wrap: anywhere; }
    .modal-footer { flex-wrap: wrap; }
    #invoice { padding: 12px; }
    #invoice .invoice-container { padding: 20px 12px; }
    #invoice .invoice-card, #invoice .invoice-total { padding: 18px 14px; }
    #invoice .invoice-details { gap: 16px; justify-content: flex-start; }
    #invoice .invoice-detail { flex: 1 1 120px; min-width: 0; }
    #invoice .invoice-item { gap: 12px; }
    #invoice .invoice-item > * { min-width: 0; }
    #invoice :where(.btn-invoice, .btn-info-invoice, .btn-success-invoice, .btn-warning-invoice) { min-width: 0; max-width: 100%; height: auto; min-height: 44px; white-space: normal; }
}

@media (max-width: 575px) {
    /* Record lists become labelled cards instead of a compressed desktop table. */
    .records-list table, .records-list tbody { display: block; width: 100%; }
    .records-list thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .records-list tbody tr { display: block; border: 1px solid #e9e1f0; border-radius: 12px; margin-bottom: 14px; padding: 8px 12px; }
    .records-list table.table > tbody > tr > td { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border: 0; font-size: .875rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; text-align: start; }
    .records-list tbody td::before { content: attr(data-label); flex: 0 0 100%; font-size: .75rem; font-weight: 600; line-height: 1.5; color: #81758f; }
    .records-list tbody td > * { min-width: 0; max-width: 100%; }
    .records-list tbody td[colspan] { display: block; }
    .records-list tbody td[colspan]::before { content: none; }
    .records-list .btn { margin: 4px 0 !important; min-width: 0 !important; }
}