/* Keep overflow inside the component that owns it, never outside the page. */
html, body { overflow-x: visible; }
body .nav-tabs-wrapper { top: var(--admin-header-height, 77px); overscroll-behavior: contain; }
.header-top-row > *, .auth-bar > *, .view-panel *, .custom-modal-card * { min-width: 0; }
.view-panel, .panel-card, .table-container { max-width: 100%; }
.view-panel { overflow-wrap: anywhere; }
.view-panel :is(input, select, textarea, .user-autocomplete-wrapper) { max-width: 100%; min-width: 0 !important; }
.view-panel img, .custom-modal-card img { max-width: 100%; object-fit: contain; }
.table-container { min-width: 0; overflow: auto; overscroll-behavior-inline: contain; }
.table-container:focus-visible { outline-offset: -3px; }
.data-table td { overflow-wrap: anywhere; }
.payment-table { min-width: 1100px; }
.payment-table :is(th, td):last-child { position: sticky; right: 0; background: var(--panel); border-left: 1px solid var(--border); min-width: 150px; }
.payment-table tr:hover td:last-child { background: var(--panel); }
.payment-table td:last-child button { min-height: 36px; }
.custom-modal-card { max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
.custom-modal-header, .custom-modal-actions { flex-wrap: wrap; }
.custom-modal-card [style*="display: flex"], .view-panel [style*="display: flex"] { flex-wrap: wrap; }
.auth-bar { min-width: 0; flex-wrap: wrap; }
.auth-bar input { max-width: 100%; }
.responsive-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
@media (max-width: 900px) {
  body .app-header { position: static; }
  body .nav-tabs-wrapper { position: static; max-width: 100%; }
  body .nav-tabs { width: 100%; flex-direction: row; flex-wrap: wrap; }
  body .nav-tabs .tab-btn { width: auto; flex: 1 1 140px; white-space: normal; }
  .custom-modal-card [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 700px) {
  body .view-panel { padding: 12px; }
  body .panel-card { padding: 12px; }
  .section-title h2 { overflow-wrap: anywhere; }
  .responsive-table, .responsive-table tbody { display: block; width: 100%; }
  .payment-table { min-width: 0; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; }
  .responsive-table tr { display: block; padding: 8px; border-bottom: 1px solid var(--border); }
  .responsive-table td:not([colspan]) { display: grid; grid-template-columns: minmax(72px, 30%) minmax(0, 1fr); gap: 8px; width: 100%; max-width: none !important; padding: 8px; white-space: normal !important; text-align: left !important; border: 0; }
  .responsive-table td:not([colspan])::before { content: attr(data-label); color: var(--fg-dim); font-size: 12px; }
  .responsive-table td:not([colspan]) > * { grid-column: 2; }
  .responsive-table td[colspan] { display: block; padding: 12px; }
  .payment-table :is(th, td):last-child { position: static; min-width: 0; }
  .responsive-table td:last-child > div { justify-content: flex-start !important; }
  .responsive-table input[type="checkbox"] { width: 18px; min-height: 18px; }
  .custom-modal-card { padding: 16px; }
  body .header-top-row { padding: 12px; }
}