/* ============================================================
   EVENTIPO — Global responsive hardening (loaded LAST)
   Catches every known layout at tablet & phone breakpoints so the
   whole app works at any width. Module CSS handles fine detail;
   this is the safety net.
   ============================================================ */

/* Never let anything force horizontal scroll on the page itself */
.page { max-width: 100%; }
.page * { min-width: 0; }
img, canvas, video, image-slot, svg { max-width: 100%; }

/* ---------- TABLET (≤1024px) ---------- */
@media (max-width: 1024px) {
  .two-col { grid-template-columns: 1fr !important; }
  .orc-grid, .estoque-grid, .restock-grid, .mb-masonry, .conn-grid, .int-grid, .seat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .crm { grid-template-columns: 1fr !important; }
  .crm-list { position: static !important; max-height: none !important; }
  .crm-rows { max-height: 320px; }
  .sp-wrap { grid-template-columns: 1fr !important; }
  .iv-split { grid-template-columns: 1fr !important; }
  /* event rows: drop the fixed 5-col grid early so they never overflow */
  .ev-row { grid-template-columns: 56px 1fr auto !important; gap: 14px !important; }
  .ev-row-prog, .ev-row .bar, .ev-row-bnum { display: none !important; }
  .brief-actions { flex-wrap: wrap; }
}

/* ---------- NARROW TABLET / LARGE PHONE (≤860px) ---------- */
@media (max-width: 860px) {
  /* dashboard event rows → stacked, no fixed 5-col grid */
  .ev-row { grid-template-columns: 52px 1fr auto !important; gap: 12px !important; }
  .ev-row-date { padding-right: 12px !important; }
  .ev-row-prog, .ev-row .bar, .ev-row-bnum { display: none !important; }

  .kpi-grid, .reg-stats, .rp-kpis, .roi-kpis, .jn-metrics, .ck-metrics, .sp-kpis, .vd-hist, .portfolio-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .rel-intel-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pe-score, .reg-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- PHONE (≤680px) ---------- */
@media (max-width: 680px) {
  .orc-grid, .estoque-grid, .restock-grid, .mb-masonry, .conn-grid, .int-grid, .seat-grid,
  .reg-events, .fgrid, .tgl-grid, .vd-sw, .sv-top, .rp-sat, .rp-grid2, .orc-head-grid,
  .sw-pay, .ai-compare, .pe-gallery { grid-template-columns: 1fr !important; }

  .kpi-grid, .reg-stats, .rp-kpis, .roi-kpis, .jn-metrics, .ck-metrics, .sp-kpis,
  .vd-hist, .portfolio-stats, .rel-intel-grid, .pe-score, .inv-summary { grid-template-columns: 1fr 1fr !important; }

  /* horizontally scrollable wrappers for genuinely wide tables */
  .card { overflow-x: auto; }
  .reg-head, .reg-row,
  .bud-edit-head, .bud-edit-row,
  .br-head, .br-row,
  .est-table-head, .est-table-row,
  .orc-item-head, .orc-item-row,
  .ros-cont-head, .ros-cont-row,
  .reg-head, .lg-row,
  .sp-table, .orc-rep-table { min-width: 540px; }

  /* tabs & filter rows slide horizontally instead of wrapping/overflowing */
  .ws-tabs, .ci-tabs, .crm-filters, .ke-filters, .reg-filters, .rp-modeswitch, .ws-tab-scroll {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ws-tabs::-webkit-scrollbar, .ci-tabs::-webkit-scrollbar, .crm-filters::-webkit-scrollbar,
  .ke-filters::-webkit-scrollbar, .rp-modeswitch::-webkit-scrollbar { height: 0; }
  .ws-tab, .ci-tab, .ke-filter, .rp-modeswitch button { white-space: nowrap; flex-shrink: 0; }

  /* filter panel + toolbars stack */
  .fl-panel { flex-direction: column; align-items: stretch; }
  .fl-field { min-width: 0; }
  .rp-evbar, .est-toolbar, .reg-toolbar, .mb-toolbar, .orc-ed-bar, .br-top, .crm-toolbar { flex-wrap: wrap; }
  .rp-evselect { min-width: 0; width: 100%; }

  /* detail rows: label over value */
  .vd-row { grid-template-columns: 1fr !important; gap: 2px !important; }
  .vd-top { flex-direction: column !important; }
  .vd-actions { flex-wrap: wrap; }

  /* modals fill the screen comfortably */
  .modal-scrim { padding: 10px; align-items: flex-start; }
  .modal { max-height: 94vh; }
  .modal-head, .modal-body, .modal-foot { padding-left: 18px; padding-right: 18px; }

  /* report / proposal documents */
  .rp-report, .sp-doc, .orc-report { padding: 22px 16px !important; }
  .rp-header, .sp-cover { flex-direction: column; gap: 12px; }
  .rp-kpis { grid-template-columns: 1fr 1fr; }
  .sv-comments, .sp-quotes, .pe-quotes { columns: 1 !important; }

  /* AI chief-of-staff bubbles */
  .cos-hero-title { font-size: 26px !important; }
  .plan-grid { grid-template-columns: 1fr !important; }

  /* check-in overlay */
  .ci-cam-wrap, .ci-manual { width: 94vw !important; }

  /* headings dialed down a touch */
  .topbar-title { font-size: 16px; }
  .vd-name, .rp-title, .sp-title, .orc-card-name { word-break: break-word; }
}

/* ---------- SMALL PHONE (≤420px) ---------- */
@media (max-width: 420px) {
  .kpi-grid, .reg-stats, .rp-kpis, .roi-kpis, .jn-metrics, .ck-metrics,
  .vd-hist, .portfolio-stats, .rel-intel-grid, .pe-score, .inv-summary,
  .sp-kpis { grid-template-columns: 1fr !important; }
  .page { padding-left: 13px !important; padding-right: 13px !important; }
  .btn { font-size: 12px; }
  .ev-row-day { font-size: 22px; }
}

/* Touch targets: keep interactive controls tappable on coarse pointers */
@media (pointer: coarse) {
  .btn-sm { min-height: 38px; }
  .icon-btn, .nav-item, .ke-filter, .ws-tab { min-height: 38px; }
}