/*
 * Shared phone / tablet rules for every dashboard (layouts/app) and the Portal (portal/layout).
 * Pairs with assets/js/responsive.js, which wraps any bare <table> in .table-responsive so wide
 * tables scroll sideways inside their card instead of pushing the whole page past the screen.
 */

/* `min-w-0` is used across the dashboards / portal so a flex child can shrink and its
   .text-truncate actually truncates — but it isn't a Bootstrap class, so it was never defined:
   long names pushed cards (and the whole page) past the screen edge. */
.min-w-0 { min-width: 0 !important; }

/* Long unbroken values (emails, URLs, reference codes) wrap instead of stretching cards. */
.portal-card, .card, .modal-body { overflow-wrap: break-word; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }
.table td, .table th { overflow-wrap: normal; }

/* ── Tablet and below (< 992px) ───────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Tab bars and filter pills scroll sideways in one line rather than wrapping into a wall. */
  .nav-tabs, .nav-pills {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
  .nav-tabs > .nav-item, .nav-pills > .nav-item { flex-shrink: 0; }

  /* Card headers: title + actions wrap onto two lines instead of clipping. */
  .portal-card-header, .card-header { flex-wrap: wrap; row-gap: 8px; }
}

/* ── Phone (< 576px) ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* Page headers / toolbars built as "title ⟷ buttons" rows wrap when they don't fit. */
  .page-content .d-flex.justify-content-between:not(.flex-nowrap),
  .portal-main .d-flex.justify-content-between:not(.flex-nowrap),
  .page-content .d-flex.justify-content-end:not(.flex-nowrap),
  .portal-main .d-flex.justify-content-end:not(.flex-nowrap) { flex-wrap: wrap; row-gap: 8px; }
  .page-content form.d-flex, .portal-main form.d-flex { flex-wrap: wrap; }
  .btn-group:not(.btn-group-vertical) { flex-wrap: wrap; }
  .welcome-actions { flex-wrap: wrap; }

  /* Inline fixed widths on search boxes / selects never exceed the screen. */
  .page-content input, .page-content select, .page-content textarea,
  .portal-main input, .portal-main select, .portal-main textarea { max-width: 100%; }

  /* Comfortable tap targets and slightly tighter cards. */
  .portal-card { padding: 14px; }
  .modal-dialog { margin: .5rem; }
  .modal-footer { flex-wrap: wrap; }
  .table { font-size: .8rem; }
  .table td, .table th { padding: .45rem .5rem; }
  h4, .h4 { font-size: 1.15rem; }
  h5, .h5 { font-size: 1.02rem; }
}