/* ── WRETAN v2.0 — Responsive ─────────────────────────────────────────────── */

/* ── Desktop tweaks (> 1100px) ──────────────────────────────────────────── */
@media (min-width: 1100px) {
  .content { padding: 28px 32px; }
}

/* ── Tablet / narrow desktop (721px–900px) ──────────────────────────────── */
@media (max-width: 900px) and (min-width: 721px) {
  :root { --sidebar-w: 196px; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ── Mobile breakpoint (≤ 720px) ────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Body: column flow, no fixed height, scrollable */
  body {
    flex-direction: column;
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Hide desktop sidebar */
  .sidebar { display: none !important; }
  .topbar-toggle { display: none !important; }

  /* Main fills viewport width — never overflows */
  .main {
    width: 100%;
    max-width: 100vw;
    flex: 1;
    overflow-x: hidden;
    overflow-y: visible;
    min-width: 0;
  }

  /* Topbar */
  .topbar {
    padding: 0 16px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    /* Prevent topbar from expanding beyond viewport */
    max-width: 100vw;
    box-sizing: border-box;
  }
  .topbar-right { gap: 6px; }

  /* Content area */
  .content {
    padding: 14px 16px;
    overflow-x: hidden;
    overflow-y: visible;
    /* Ensure content doesn't push outside viewport */
    max-width: 100%;
    box-sizing: border-box;
    min-height: calc(100dvh - var(--topbar-h) - var(--bottomnav-h));
  }

  /* Show bottom nav */
  .bottom-nav { display: flex; }

  /* Grid collapses */
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .hero-stats { width: 100%; }
  .hero-stat { flex: 1; padding: 10px 12px; }

  /* Cards: allow horizontal scroll for wide content (tables etc.)
     but prevent the card itself from stretching the page */
  .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Legacy table inside .card */
  .tbl { min-width: 380px; }

  /* Gauge label */
  .gauge-label { width: 80px; font-size: 0.68rem; }

  /* Speedtest display */
  #speed-num { font-size: 2.2rem !important; }

  /* Hero */
  .hero { padding: 28px 0 24px; }
  .hero-logo { margin-bottom: 8px; }
  .hero-title { font-size: 1.5rem; }

  /* Input groups wrap */
  .input-group { flex-wrap: wrap; }

  /* View header */
  .view-header { margin-bottom: 16px; }
  .view-title { font-size: 1rem; }
}

@media (max-width: 480px) {
  .tool-grid { grid-template-columns: 1fr; }
  .content { padding: 12px; }
  .card { padding: 12px 14px; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-stat { border-right: 1px solid var(--border); }

  /* Tighten up typography on very small screens */
  .view-title { font-size: 0.95rem; }
  .view-sub   { font-size: 0.7rem; }
}