/* ================================================================
   MY NEGOSYO — MOBILE.CSS
   Final-cascade mobile overrides — loads after all page stylesheets
   so these rules always win for responsive layout.
   ================================================================ */

/* ── Ensure viewport covers full width on mobile ── */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── Base layout always fluid ── */
.main-content { width: 100%; min-height: 100vh; }
img, video, iframe { max-width: 100%; height: auto; }
table { table-layout: auto; }

/* ──────────────────────────────────────────────────────
   BREAKPOINT 1 — Tablet (≤1024px)
────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-bar  { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .biz-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .prod-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .page-content { padding: 24px 20px 80px !important; }
}

/* ──────────────────────────────────────────────────────
   BREAKPOINT 2 — Tablet small / large phone (≤900px)
   Sidebar becomes drawer, bottom nav appears
────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Sidebar drawer */
  .sidebar {
    position: fixed !important;
    left: 0 !important; top: 0 !important;
    height: 100vh !important;
    z-index: 500 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: none !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,0.30) !important;
  }
  .sidebar-close { display: flex !important; }

  /* Overlay when sidebar open */
  #overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 490;
    backdrop-filter: blur(2px);
  }
  #overlay.show { display: block; }

  /* Main content takes full width */
  .main-content { margin-left: 0 !important; }

  /* Show mobile bottom nav */
  .mob-bottom-nav { display: flex !important; }

  /* Page padding accounts for bottom nav */
  .page-content { padding: 20px 16px 80px !important; }

  /* Chat layout stacks */
  .chat-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .chat-sidebar { height: 260px; }
  .chat-messages { min-height: 300px; }

  /* Courier/biz grids */
  .biz-grid   { grid-template-columns: 1fr !important; }
  .prod-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .courier-grid { grid-template-columns: 1fr 1fr !important; }

  /* Settings layout */
  .settings-layout { grid-template-columns: 1fr !important; }
  .settings-nav     { display: flex; flex-wrap: wrap; gap: 8px; border-right: none !important; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
  .settings-nav-item { flex: 0 0 auto; }
}

/* ──────────────────────────────────────────────────────
   BREAKPOINT 3 — Large phone (≤768px)
────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-bar  { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .prod-grid  { grid-template-columns: 1fr 1fr !important; }
  .form-row   { grid-template-columns: 1fr !important; }
  .modal      { max-width: 96vw !important; margin: 12px !important; }
  .modal-body { padding: 16px !important; }
  .modal-footer { padding: 14px 16px !important; gap: 8px !important; }

  .page-header { flex-direction: column !important; align-items: flex-start !important; }
  .page-title  { font-size: 1.4rem !important; }

  /* Scrollable tables */
  .table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 540px; }

  /* Topbar */
  .home-topbar, .topbar { padding: 10px 14px !important; }
  .topbar-search { max-width: 180px !important; }

  /* Page title typography */
  h1, .page-title { font-size: 1.4rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }

  /* Analytics insights */
  .insights-grid { grid-template-columns: 1fr !important; }
  .chart-card { overflow-x: auto; }

  /* Bid forms */
  .bid-form { flex-direction: column !important; }

  /* Compose / wall */
  .composer-tools { flex-wrap: wrap; gap: 4px; }
}

/* ──────────────────────────────────────────────────────
   BREAKPOINT 4 — Standard phone (≤600px)
────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .stats-bar    { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat-box     { padding: 12px 10px !important; }
  .stat-box-num { font-size: 1.2rem !important; }
  .stat-box-icon { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; }

  .prod-grid  { grid-template-columns: 1fr !important; }
  .courier-grid { grid-template-columns: 1fr !important; }
  .biz-actions  { flex-direction: column !important; }

  .btn-primary, .btn-secondary { padding: 9px 14px !important; font-size: 0.82rem !important; }

  .theme-picker { grid-template-columns: repeat(2, 1fr) !important; }

  /* AdSense responsiveness */
  .mn-ad-unit.rectangle { max-width: 100% !important; margin: 16px 0 !important; }
  .mn-ad-unit ins { width: 100% !important; }

  /* index.html landing */
  .hero-title   { font-size: 1.8rem !important; }
  .hero-sub     { font-size: 0.9rem !important; }
  .categories-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .biz-grid-landing { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────────────
   BREAKPOINT 5 — Small phone (≤480px)
────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-content { padding: 14px 12px 74px !important; }
  .home-topbar, .topbar { padding: 8px 12px !important; }
  .topbar-search { display: none !important; }

  .stat-box-label { font-size: 0.68rem !important; }
  .stats-bar { gap: 6px !important; }

  .nav-badge { font-size: 0.58rem !important; padding: 1px 4px !important; }

  .modal { margin: 8px !important; border-radius: 16px !important; }

  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom on input focus */
    padding: 10px 12px !important;
  }

  .data-table th, .data-table td { padding: 10px 12px !important; font-size: 0.78rem !important; }

  /* Settings */
  .settings-panel { padding: 16px !important; }
  .settings-section { margin-bottom: 20px !important; }

  /* Theme picker */
  .theme-picker { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .theme-option { padding: 12px 8px !important; }
  .theme-swatch { width: 40px !important; height: 40px !important; font-size: 0.9rem !important; }
}

/* ──────────────────────────────────────────────────────
   BREAKPOINT 6 — Extra small (≤380px)
────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .stats-bar { grid-template-columns: 1fr !important; }
  .page-title { font-size: 1.15rem !important; }

  /* Bottom nav — icon only */
  .mob-nav-item span:not(i) { display: none; }
  .mob-nav-item i { font-size: 1.25rem; }
  .mob-bottom-nav { height: 54px; }

  .categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .theme-picker    { grid-template-columns: 1fr 1fr !important; }

  .hero-title { font-size: 1.5rem !important; }
}

/* ──────────────────────────────────────────────────────
   iOS / Android specific fixes
────────────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari — prevent input zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  select, textarea {
    font-size: 16px !important;
  }

  /* iOS Safari — fix 100vh issue */
  .sidebar { height: -webkit-fill-available !important; }
}

/* Smooth scrolling for all touch devices */
@media (hover: none) {
  .sidebar-nav { -webkit-overflow-scrolling: touch; }
  .chat-messages { -webkit-overflow-scrolling: touch; }
  .table-card { -webkit-overflow-scrolling: touch; }
}