/* REAL NOW — global mobile polish
 * Loaded after components.css. Surgical fixes for narrow viewports.
 */

/* Prevent horizontal page scroll from stray wide elements */
html, body { max-width: 100%; overflow-x: hidden; }

/* ─── Tables inside cards: allow horizontal scroll instead of breaking layout ─── */
.rn-chart-card > table,
.rn-chart-card > div > table,
.rn-table-wrap,
.cmp-table-wrap,
.srch-grid table,
.acct-card table {
  min-width: 100%;
}

/* Add a mobile scroll hint to wide tables on narrow screens */
@media (max-width: 680px) {
  .rn-chart-card table,
  .rn-chart-card div[style*="overflow-x"],
  .rn-chart-card canvas {
    max-width: 100%;
  }
  /* KPI grids → 2 columns on phones (was 4) */
  .rn-kpi-grid,
  .rn-kpi-row,
  .acct-grid,
  .adm-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Chart grids → stack on phones */
  .rn-chart-grid,
  .calc-grid,
  .acct-grid,
  .cmp-table-wrap,
  .srch-grid {
    grid-template-columns: 1fr !important;
  }
  /* Hero title scales down */
  .rn-hero h1,
  .rn-section-title {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
  }
  /* Reduce section padding */
  .rn-section {
    padding-top: var(--rn-space-5, 1.5rem) !important;
    padding-bottom: var(--rn-space-5, 1.5rem) !important;
  }
  /* Filter bars don't stretch awkwardly */
  .rn-filter-bar,
  .adm-toolbar,
  .rn-map-filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .rn-filter-bar .rn-btn,
  .adm-toolbar .rn-btn { flex: 1 1 auto; }

  /* Hide dense extra columns on admin tables to save width */
  .adm-table th:nth-child(n+4),
  .adm-table td:nth-child(n+4) {
    display: none;
  }

  /* Navbar: collapse brand subtitle */
  .rn-nav-brand-sub { display: none !important; }
  .rn-nav-actions .rn-tier { display: none !important; }

  /* Map layer toggles: wrap and squeeze */
  .rn-layer-toggle { flex-wrap: wrap; gap: 4px; }
  .rn-layer-toggle button { padding: 6px 10px !important; font-size: 10px !important; }
  #map, #zoneRiskMap { height: 360px !important; }

  /* Calculator: tighter spacing */
  .calc-result-top { grid-template-columns: 1fr !important; }

  /* Sticky search filters: unstick on phone so it doesn't cover content */
  .srch-filters { position: static !important; }

  /* Zone card grid: 1 column on very narrow */
  .rn-grid-5, .rn-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Listing hero: stack price over map */
  .lst-hero { grid-template-columns: 1fr !important; }
  .lst-specs { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer columns collapse */
  .rn-footer-cols { grid-template-columns: 1fr !important; }

  /* Report tool bar stacks */
  .report-tools { flex-wrap: wrap; gap: 8px; }
  .report-head { flex-direction: column; gap: var(--rn-space-3); align-items: flex-start !important; }
  .report-head .meta { text-align: left; }

  /* Heatmap/matrix tables get min-width + scroll */
  #hmTable, #domTable, #sourceZoneMatrix {
    min-width: 540px;  /* forces horizontal scroll */
  }
}

/* ─── Very narrow (< 420px): further compress ─── */
@media (max-width: 420px) {
  .rn-kpi-grid, .rn-kpi-row, .rn-grid-5, .rn-grid-4 {
    grid-template-columns: 1fr !important;
  }
  .rn-nav-brand-name { font-size: 16px !important; }
}

/* ─── Touch targets: larger tap surface on buttons for mobile ─── */
@media (hover: none) and (pointer: coarse) {
  .rn-btn, button, .rn-nav-link, .srch-fav, .fav-remove { min-height: 40px; }
  .rn-nav-menu a { padding: 14px 0 !important; }
}

/* Loading state utility for lazy-loaded sections */
[data-lazy-loading="true"] {
  min-height: 180px;
  background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-size: 200% 100%;
  animation: rn-skeleton 1.5s ease-in-out infinite;
}
@keyframes rn-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Mobile refinements for 2026-05-07 simplified-hero changes
   - Hero trust hint stacks neatly on narrow phones
   - Intel verdict card pads tighter
   - Paywall data strip stays readable
   ============================================================ */
@media (max-width: 480px) {
  .rn-hero-search-hint {
    font-size: var(--rn-size-xs);
    line-height: 1.55;
    padding: 0 var(--rn-space-3);
  }
  .rn-hero-search-hint strong { font-weight: 700; }

  .intel-verdict { padding: var(--rn-space-4); }
  .intel-verdict__title {
    font-size: var(--rn-size-lg);
    margin-bottom: var(--rn-space-3);
  }
  .intel-verdict__card {
    padding: var(--rn-space-3) var(--rn-space-3) var(--rn-space-3) 44px;
  }
  .intel-verdict__num {
    top: 11px; left: 11px;
    width: 22px; height: 22px;
    font-size: 11px;
  }
  .intel-verdict__q { font-size: var(--rn-size-sm); }

  .rn-paywall-data {
    font-size: 10px;
    gap: 6px;
    padding: 5px 10px;
  }

  .acct-empty-state { padding: var(--rn-space-5) var(--rn-space-4); }
  .acct-empty-state__icon { font-size: 30px; }
  .acct-empty-state__title { font-size: var(--rn-size-base); }
}