/* Shared layout rules. Wide technical tables keep their own scroll area. */
main { overflow-wrap: anywhere; }
main .row > *, main .d-flex > *, main .card, main .card-body,
main .work-panel, main .table-responsive { min-width: 0; }
main img { max-width: 100%; }
main .table-responsive { max-width: 100%; }
main summary { scroll-margin-top: 1rem; }

@media (max-width: 991.98px) {
  main.container { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  main .form-control, main .form-select { font-size: 1rem; min-height: 44px; }
  main .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; white-space: normal; }
  main .d-flex { flex-wrap: wrap; }
  main .input-group { flex-wrap: nowrap; }
  main .input-group > .form-control { min-width: 0; }
  main .form-check { padding-top: .35rem; padding-bottom: .35rem; }
  main .form-check-label { line-height: 1.5; }
  main .work-sidebar { position: static; }
  main .work-panel summary { font-size: 1rem; line-height: 1.5; }
  main .work-panel.p-5 { padding: 1.25rem !important; }
  main .next-step .btn { width: 100%; }
  main .next-step .align-self-lg-center { width: 100%; }
  main .badge { white-space: normal; text-align: left; line-height: 1.35; }
  main .pagination { flex-wrap: wrap; gap: .25rem; }

}

@media (max-width: 1199.98px) {
  /* Keep table markup and column names on desktop; show labeled rows on mobile. */
  main .mobile-cards, main .mobile-cards tbody { display: block; width: 100%; }
  main .mobile-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  main .mobile-cards tbody tr { display: block; margin-bottom: 1rem; border: 1px solid #dee2e6; border-radius: .65rem; padding: .5rem; }
  main .mobile-cards tbody td { display: block; width: 100%; min-width: 0 !important; border: 0; padding: .5rem; box-shadow: none; }
  main .mobile-cards td[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; color: #59636d; margin-bottom: .2rem; }
  main .mobile-cards td a:not(.btn) { display: inline-block; padding-top: .35rem; padding-bottom: .35rem; }
  main .mobile-cards td details { width: 100%; }
  main .mobile-cards td summary { padding: .4rem 0; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  main .mobile-cards tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  main .mobile-cards tbody tr { min-width: 0; margin-bottom: 0; }
  main .mobile-cards tbody td .btn { min-height: 44px; white-space: normal; }
}