/* Mobile overrides load after page styles. Keep every rule inside this query
   so desktop and print retain the original cascade, including inline styles. */

@media screen and (max-width: 860px) {
  .content, .page-content { padding: 18px 14px; min-width: 0; }
  .page-header, .detail-header, .card-header, .section-header,
  .toolbar, .filter-bar, .filters-bar, .filters, .page-actions,
  .header-actions, .detail-actions, .modal-footer, .table-footer,
  .pagination, .totals-bar { flex-wrap: wrap; gap: 10px; }
  .page-header > *, .detail-header > *, .card-header > *,
  .form-group, .form-row > *, .form-grid > *, .modal-grid > * { min-width: 0; }
  .page-header h1, .page-header h2, .detail-title, .modal-title,
  .comment-body, .info-value { overflow-wrap: anywhere; }
  .filter-bar input, .filter-bar select, .filters input, .filters select,
  .filters-bar input, .filters-bar select { min-width: 0; max-width: 100%; }
  .table-wrap, .table-wrapper, .table-container { max-width: 100%; overflow-x: auto; }
  /* Tables without a dedicated wrapper still scroll inside their own panel. */
  .card:has(> table), .card-body:has(> table), .section-card:has(> table) { overflow-x: auto; }
  .tab-bar, .tabs { max-width: 100%; overflow-x: auto; }
  .tab-bar > *, .tabs > * { flex-shrink: 0; }
  .modal-overlay { padding: 8px; }
  .modal-overlay .modal {
    width: 100%; max-width: calc(100vw - 16px); min-width: 0;
    max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  }
  .modal-header, .modal-body, .modal-footer { padding: 16px; }
  .modal-body { min-width: 0; }
  .modal-footer .btn { white-space: normal; height: auto; min-height: 44px; }
  .btn, .collapse-btn, .modal-close { min-height: 44px; }
  .modal-close { min-width: 44px; }
  .form-input, .form-control, .form-select { min-width: 0; max-width: 100%; font-size: 16px; }
  .toast { max-width: calc(100vw - 24px); min-width: 0; overflow-wrap: anywhere; }

  .content-area { padding: 18px 14px; min-width: 0; }
  .page-header > *, .detail-header > * { max-width: 100%; }
  .page-header-actions, .page-header > div:has(> .btn), .form-footer,
  .form-footer-left, .form-footer-right, .pkg-sort-bar, .pkg-sort-btns,
  .breadcrumb, .pds-view-header, .qr-date-row, .completed-bar { flex-wrap: wrap; gap: 8px; }
  .page-header-actions .btn { white-space: normal; height: auto; min-height: 44px; }
  .filter-field { min-width: 0 !important; max-width: 100%; }
  .filter-input { width: 100%; min-width: 0; max-width: 100%; font-size: 16px; }
  .stack, .stack > *, .dash-grid > * { min-width: 0; }
  .form-footer > * { min-width: 0; }
  .onboard-card { min-width: 0; }
  .pds-actions { margin-left: 0; }
  .pds-btn { white-space: normal; height: auto; min-height: 44px; max-width: 100%; }
  .pds-email-input { max-width: 100%; min-width: 0; }
  .completed-bar { white-space: normal; }
  .rvw-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
  .pe-filters .pe-search { min-width: 0; flex-basis: 100%; }
  .pe-drawer:not(.active) { visibility: hidden; }
  .pe-drawer { max-width: 100vw; }
  .hr-head-actions { flex-wrap: wrap; }
  .hr-form-grid { grid-template-columns: minmax(0, 1fr); }
  .hr-field, .hr-select-wrap, .hr-field select { min-width: 0; max-width: 100%; }
  .hr-field input, .hr-field select, .hr-field textarea { font-size: 16px; }
  .hr-head-actions .hr-btn { min-height: 44px; }

  /* Content, onboarding, backlinks, SEO templates and administration. */
  .metric-grid, .summary-grid, .stats-grid, .budget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .budgets-grid, .batches-grid { grid-template-columns: minmax(0, 1fr); }
  .top-grid, .info-grid, .details-grid { grid-template-columns: minmax(0, 1fr); }
  .form-row, .form-grid, .modal-grid, .modal-form-grid-2, .details-row,
  .item-row-r1, .item-row-r2, .item-row-r3 { grid-template-columns: minmax(0, 1fr) !important; }
  .module-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Finance and developer assistance. */
  .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-section-head, .item-detail-head, .comment-head { flex-wrap: wrap; gap: 8px; }
  .section-card:has(.cat-row) { overflow-x: auto; }
  .cat-row { min-width: 720px; }
  .bar-row { grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) 60px; }

  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
  .page-header h1, .page-header h2 { white-space: normal; }
  .page-header { flex-wrap: nowrap; }
  .page-header-actions, .page-header > div:has(> .btn) { max-width: 100%; }
  .form-row { flex-wrap: wrap; }
  .form-field { min-width: 0; }
  .form-field input, .form-field select, .form-field textarea { min-width: 0; max-width: 100%; font-size: 16px; }
  .modal-head, .modal-foot { padding: 14px; flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { min-height: 44px; height: auto; white-space: normal; }
  .page-header-title-row { max-width: 100%; }
  .person-filter { height: auto !important; min-height: 44px; margin-left: 0 !important; }
  .sprint-header-dates { white-space: nowrap; }
  .v2-popover, #v2DepPopover { position: fixed; left: 12px !important; right: 12px; width: auto; }

  .form-field { max-width: 100%; }
  .form-field label { white-space: normal; }
  .v2-popover, #v2DepPopover { max-height: 70vh; max-height: 70dvh; overflow-y: auto; }

  .page-header { flex-direction: column; align-items: stretch; }
  .timeline-card-header, .timeline-card-header > div { flex-wrap: wrap; gap: 8px; }
  .section-card > div:has(> #webhookUrl) { flex-wrap: wrap; }
  #webhookUrl { min-width: 0; max-width: 100%; }
  .bl-table-wrap, .pe-table-wrap { position: relative; }
  .activity-feed-overlay:not(.active) { visibility: hidden; }
  .items-header, .items-header > div { flex-wrap: wrap; gap: 8px; }
}

@media screen and (max-width: 600px) {
  .form-row { flex-direction: column; }
  .page-header { flex-direction: column; align-items: stretch; }

  .form-row { flex-wrap: nowrap; }
  .form-row > .form-field { width: 100%; flex-basis: auto; }
}

@media screen and (max-width: 480px) {
  .metric-grid, .summary-grid, .stats-grid, .budget-grid, .stat-strip,
  .stats-row { grid-template-columns: minmax(0, 1fr); }
  .page-header, .detail-header { flex-direction: column; align-items: stretch; }
  .modal-footer > .btn { flex: 1 1 auto; }
}