/* ============================================
   AIFied — Unified Responsive Layer
   Loaded on every page via components.js
   Breakpoints: 1100 (tablet-lg) / 768 (tablet) / 480 (phone)
   ============================================ */

/* Universal: prevent horizontal page scroll */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* Tables — wrap with horizontal scroll on small screens */
.table-wrap, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============== TABLET-LARGE (<= 1100px) ============== */
@media (max-width: 1100px) {
  .stats-grid, .stats-grid-compact {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .gs-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .features-grid, .use-case-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============== TABLET (<= 768px) ============== */
@media (max-width: 768px) {
  /* Sidebar becomes a drawer on every dashboard page */
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 1000; }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.18); }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; display: none; }
  .sidebar-overlay.open { display: block; }
  .main-content { margin-left: 0 !important; }
  .mobile-toggle { display: inline-flex !important; align-items:center; justify-content:center; width:40px; height:40px; }

  /* Landing nav: enable burger */
  .nav-links { display: none; }
  .nav-links.open {
    display: flex !important; flex-direction: column;
    position: absolute; top: 64px; left: 0; right: 0;
    background: #fff; padding: 16px; gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 999;
  }
  .burger { display: flex !important; }

  /* Grids */
  .stats-grid, .stats-grid-compact { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .gs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pricing-grid, .features-grid, .use-case-grid, .content-grid {
    grid-template-columns: 1fr !important;
  }

  /* Landing hero */
  .hero h1, .hero-title { font-size: 32px !important; line-height: 1.15 !important; }
  .hero p, .hero-sub { font-size: 16px !important; }
  .hero, .hero-section { padding: 48px 16px !important; text-align: center; }
  .section, section { padding: 40px 16px !important; }

  /* Tables — horizontal scroll fallback */
  table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }

  /* Forms full width */
  input, select, textarea { max-width: 100%; box-sizing: border-box; }
  .form-row { flex-direction: column !important; gap: 8px !important; }

  /* Modals: near-fullscreen on mobile */
  .modal { width: 95vw !important; max-width: 95vw !important; max-height: 90vh; overflow-y: auto; }
  .modal-overlay { padding: 12px; }

  /* Padding tighten */
  .main-header { padding: 12px 14px; }
  .main-body, .page-body { padding: 14px !important; }
  .card, .panel { padding: 14px !important; }

  /* Help chat bubble */
  #aifiedHelpChatBubble, .help-chat-bubble {
    bottom: 14px !important; right: 14px !important;
    width: 54px !important; height: 54px !important;
  }
  #aifiedHelpChatWindow, .help-chat-window {
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 100px) !important;
    bottom: 80px !important; right: 12px !important; left: 12px !important;
  }

  /* Touch targets */
  button, .btn, a.btn, .nav-item, .user-menu-item {
    min-height: 44px;
  }
}

/* ============== PHONE (<= 480px) ============== */
@media (max-width: 480px) {
  .stats-grid, .stats-grid-compact, .gs-grid { grid-template-columns: 1fr !important; }
  .hero h1, .hero-title { font-size: 26px !important; }
  .hero p, .hero-sub { font-size: 15px !important; }
  .logo, .logo-text { font-size: 18px !important; }
  .btn { padding: 10px 14px; font-size: 14px; }
  .modal { width: 100vw !important; max-width: 100vw !important; height: 100vh; max-height: 100vh; border-radius: 0 !important; }
  .modal-overlay { padding: 0; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }
}

/* ============== Floating action button helper ============== */
.fab {
  position: fixed; bottom: 18px; right: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary, #2563eb); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .35);
  cursor: pointer; border: none; z-index: 900;
}
.fab:hover { transform: translateY(-2px); }
@media (max-width: 480px) { .fab { width: 52px; height: 52px; bottom: 14px; right: 14px; } }