/* ============================================================
   responsive.css — application-wide responsive enhancements
   Additive only: no markup, logic, or existing-style changes.
   Loaded AFTER site.css so these rules refine, never fight it.
   Targets the app's real classes: page-header, table-s4,
   stat-card, card-s4, Bootstrap grid, forms, modals.
   Breakpoints: 320 / 375 / 768 / 1024 / 1366+.
   ============================================================ */

/* ---- Global overflow guard: nothing should cause the page to
   scroll sideways on a phone. Media/tables opt back into scroll. ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Tables must still scroll horizontally inside their own wrapper. */
.table-responsive, .table-scroll, [style*="overflow-x"] { -webkit-overflow-scrolling: touch; }

/* ============================================================
   TABLES — keep wide tables usable on small screens.
   The app wraps tables in a scroll container already; here we
   make that scroll smooth and hint that more columns exist.
   ============================================================ */
@media (max-width: 991.98px) {
  .table-s4 { min-width: 640px; }              /* force horizontal scroll rather than crushing columns */
  .table-s4 thead th,
  .table-s4 tbody td { padding: .75rem .625rem; font-size: .875rem; white-space: nowrap; }
}

/* ============================================================
   PAGE HEADER — title + action button stack on mobile.
   ============================================================ */
@media (max-width: 575.98px) {
  .page-header { margin-bottom: 1.25rem; }
  .page-header.d-flex { flex-direction: column; align-items: flex-start !important; gap: .75rem; }
  .page-header .btn-primary-s4,
  .page-header .btn-gold,
  .page-header button { width: 100%; justify-content: center; }
  .page-title { font-size: 1.35rem; line-height: 1.25; }
  .page-subtitle { font-size: .85rem; }
}

/* ============================================================
   STAT / KPI CARDS — full width on phones, 2-up on small tablets.
   ============================================================ */
@media (max-width: 575.98px) {
  .stat-card { padding: 1rem; }
  .stat-card .stat-value, .stat-value { font-size: 1.5rem; }
}

/* ============================================================
   FORMS — inputs go full width and controls stack on mobile.
   Bootstrap columns already stack; this tightens spacing and
   makes inline groups wrap instead of overflow.
   ============================================================ */
@media (max-width: 575.98px) {
  .form-control, .form-select, .form-select-sm, textarea { width: 100%; }
  .form-label { font-size: .875rem; }
  /* Inline button+input groups (e.g. assign row, search+button) wrap. */
  .d-flex.gap-2 > .form-select,
  .d-flex.gap-2 > .form-control { min-width: 0; flex: 1 1 auto; }
  .input-group { flex-wrap: wrap; }
}

/* ============================================================
   BUTTON ROWS — action button clusters wrap & stay tappable.
   ============================================================ */
@media (max-width: 575.98px) {
  .btn-xs, .btn-sm { min-height: 34px; }        /* touch-friendly */
  td .d-flex.gap-1 { flex-wrap: wrap; row-gap: .25rem; }
}

/* ============================================================
   MODALS — full-width, scrollable, safe padding on phones.
   ============================================================ */
@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
  .modal-body { max-height: 70vh; overflow-y: auto; }
  .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .modal-footer > .btn,
  .modal-footer > button { flex: 1 1 auto; }
}

/* ============================================================
   DASHBOARD widgets / charts — never overflow their card.
   ============================================================ */
.chart-container, canvas { max-width: 100%; }
@media (max-width: 767.98px) {
  .chart-container { height: 260px !important; }
}

/* ============================================================
   CARDS / GRID GUTTERS — consistent spacing on small screens.
   ============================================================ */
@media (max-width: 575.98px) {
  .card-s4, .card { padding: 1rem; }
  .row { --bs-gutter-x: .75rem; }
}

/* ============================================================
   TYPOGRAPHY — comfortable reading sizes on the smallest phones.
   ============================================================ */
@media (max-width: 375px) {
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.05rem; }
  body { font-size: 15px; }
}

/* ============================================================
   LARGE SCREENS — cap ultra-wide line lengths so content on
   1366px+ / 1920px doesn't stretch uncomfortably.
   ============================================================ */
@media (min-width: 1600px) {
  .main-content > .container,
  .main-content > .container-fluid { max-width: 1500px; margin-inline: auto; }
}

/* ============================================================
   PORTAL (client panel) — same treatments, its own wrappers.
   ============================================================ */
@media (max-width: 575.98px) {
  .portal-header, .portal-topbar { flex-wrap: wrap; gap: .5rem; }
  .portal-card { padding: 1rem; }
}