/* ════════════════════════════════════════════════════════════════════════
   mobile_phone.css — phone-width (<768px) responsive polish.

   Layered ON TOP of ipad_responsive.css (which handles iPad/tablet widths
   1024/820/768) and Bootstrap 5 (whose grid already stacks col-md-* below
   768px). These rules refine the patterns Bootstrap doesn't: page-header
   rows, action toolbars, oversized headings, table density, and tap targets
   on small phones.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Proper .table-responsive wrappers win over the iPad catch-all ──
   ipad_responsive.css turns bare tables into `display:block` scroll blocks at
   ≤1024px. Tables we explicitly wrap in .table-responsive should keep true
   table layout INSIDE the scroll container (cleaner columns + header align). */
.table-responsive > table,
.table-responsive table {
  display: table !important;
  width: 100%;
}

/* ── Phone layout (≤576px) ── */
@media (max-width: 576px) {
  /* Tighter page gutters so content isn't cramped by container padding. */
  .container-fluid.mt-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Page-header rows: title + action button stack instead of squeezing.
     Scoped to DIRECT children of the content container, so the navbar, card
     headers, dropdown headers, and in-table flex rows are all untouched. */
  .container-fluid.mt-4 > .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  /* A single action button in that header grows to full width under the title. */
  .container-fluid.mt-4 > .d-flex.justify-content-between > .btn,
  .container-fluid.mt-4 > .d-flex.justify-content-between > a.btn {
    width: 100%;
  }

  /* Softer headings so long titles don't wrap awkwardly on narrow screens. */
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  h3, .h3 { font-size: 1.15rem; }

  /* Toolbars / explicit button rows wrap rather than overflow. */
  .btn-toolbar { flex-wrap: wrap; }

  /* Denser tables so more columns fit before horizontal scroll kicks in. */
  .table { font-size: 0.875rem; }
  .table > :not(caption) > * > * { padding: 0.4rem 0.5rem; }

  /* Card padding a touch tighter than the 820px iPad rule. */
  .card-body { padding: 0.85rem; }

  /* Pagination wraps instead of overflowing the viewport. */
  .pagination { flex-wrap: wrap; row-gap: 0.25rem; }

  /* Near-full-width modal dialogs on phones. */
  .modal-dialog:not(.modal-fullscreen) { margin: 0.5rem; }

  /* Large stat/KPI numbers scale down so cards don't overflow. */
  .display-1, .display-2, .display-3 { font-size: 2.25rem; }
  .display-4 { font-size: 2rem; }
  .display-5 { font-size: 1.6rem; }
  .display-6 { font-size: 1.4rem; }

  /* Comfortable tap target for icon-only action buttons in table rows. */
  td .btn-sm { min-height: 38px; }
}

/* ── Very small phones (≤380px) ── */
@media (max-width: 380px) {
  .container-fluid.mt-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  h2, .h2 { font-size: 1.2rem; }
  .btn { font-size: 0.9rem; }
  .table { font-size: 0.82rem; }
}