/* ============================================================
   BRIDGE AI — Shared Mobile Stylesheet
   Applied to all dashboard pages via <link rel="stylesheet">
   Fixes: padding, font sizes, grid collapse, overflow, nav spacing
   ============================================================ */

/* ── Universal fixes ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent horizontal overflow on all pages */
  body { overflow-x: hidden; }
  * { max-width: 100%; }

  /* Sidebar always collapsed on mobile — collapsed by JS */
  .sidebar { transform: translateX(-240px) !important; }

  /* Main area: no left margin, safe padding */
  .main,
  .main-wrap,
  .chat-main { margin-left: 0 !important; }

  /* Content padding — tighter on mobile, clear mobile nav */
  .content,
  .main,
  .main-wrap > .main { padding: 14px 16px 100px !important; }

  /* Topbar */
  .topbar { padding: 12px 16px !important; gap: 10px !important; }
  .topbar-titles h1,
  .topbar-title,
  .page-title { font-size: 18px !important; letter-spacing: -0.4px !important; }
  .topbar-titles p,
  .topbar .page-sub { display: none; }

  /* Hide desktop-only elements */
  .points-bar,
  .ai-banner,
  .period-sel,
  .topbar-search { display: none !important; }

  /* Page headers: stack on mobile */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
  }
  .page-header .btn,
  .page-header button,
  .page-header a.btn { width: 100% !important; justify-content: center !important; }

  /* KPI / stats grids → 2 columns max */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .content-grid,
  .content-row { grid-template-columns: 1fr !important; }
  .social-grid { grid-template-columns: 1fr 1fr !important; }

  /* Analytics hero metric — too large on phone */
  .hero-value { font-size: 36px !important; letter-spacing: -1.5px !important; }
  .hero-metric { padding: 20px 16px !important; }
  .metrics-grid { grid-template-columns: 1fr 1fr !important; }

  /* Agent cards grid */
  .agents-grid,
  .agent-grid { grid-template-columns: 1fr !important; }

  /* Templates grid */
  .templates-grid { grid-template-columns: 1fr !important; }

  /* Integration cards */
  .int-grid { grid-template-columns: 1fr !important; }

  /* Settings */
  .settings-wrap { grid-template-columns: 1fr !important; padding: 14px 16px 100px !important; }
  .settings-nav { position: static !important; display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 12px !important; }
  .s-tab { width: auto !important; padding: 7px 12px !important; border-left: none !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .plan-grid { grid-template-columns: 1fr !important; }
  .usage-grid { grid-template-columns: 1fr 1fr !important; }
  .savings-grid { grid-template-columns: 1fr 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }

  /* Cards — reduce padding */
  .card,
  .kpi-card,
  .template-card,
  .int-card,
  .agent-card { padding: 14px !important; }

  /* Buttons in card footers */
  .card-footer,
  .int-actions,
  .template-footer { flex-wrap: wrap !important; gap: 6px !important; }
  .btn { font-size: 12px !important; padding: 7px 12px !important; }

  /* Chat page */
  .messages-area { padding: 14px 16px !important; }
  .input-area { padding: 12px 16px !important; }

  /* Section head font */
  .section-head h2,
  .page-title,
  h1.page-title { font-size: 20px !important; }

  /* Table horizontal scroll */
  .table-wrap,
  table { overflow-x: auto; display: block; }

  /* Mobile hamburger — show on all pages */
  .hamburger { display: flex !important; }

  /* Tour modal */
  .tour-modal,
  #spCard { width: calc(100vw - 32px) !important; max-width: 100% !important; }
}

/* ── Extra small phones (< 480px) ─────────────────────────── */
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .social-grid { grid-template-columns: 1fr !important; }
  .usage-grid { grid-template-columns: 1fr !important; }
  .savings-grid { grid-template-columns: 1fr !important; }
  .agent-grid { grid-template-columns: 1fr !important; }
  .metrics-grid { grid-template-columns: 1fr !important; }

  /* Topbar tight */
  .topbar { padding: 10px 14px !important; }
  .topbar-titles h1,
  .page-title { font-size: 16px !important; }

  /* Card padding */
  .card,
  .kpi-card { padding: 12px !important; }
  .kpi-value { font-size: 22px !important; }

  /* Hero metric */
  .hero-value { font-size: 28px !important; }

  /* Mobile nav items */
  .mob-item span,
  .mobile-nav-item span { font-size: 8px !important; }

  /* Reduce main padding on tiny screens */
  .content,
  .main { padding: 10px 12px 100px !important; }
}

/* ── Landing page mobile fixes ─────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 0 20px; height: 60px; }
  .nav-links { display: none; }
  .hero { min-height: 100svh; }
  .hero h1 { font-size: clamp(36px, 10vw, 64px) !important; }
  .hero-sub { font-size: 15px !important; }
  .hero-actions { flex-direction: column; width: 100%; padding: 0 20px; }
  .btn-mag, .btn-ghost { width: 100%; justify-content: center; }
  .sec { padding: 80px 20px; }
  .sec-h { font-size: clamp(28px, 7vw, 48px) !important; }
  .results-inner { grid-template-columns: 1fr !important; gap: 24px; padding: 40px 20px; }
  .result-item::after { display: none; }
  .feat-grid { grid-template-columns: 1fr !important; }
  .how-layout { grid-template-columns: 1fr !important; gap: 40px; }
  .how-sticky { position: static; height: auto; }
  .price-grid,
  .plan-grid { grid-template-columns: 1fr !important; }
  .compare-table { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 24px; }
}