/* SehatKart Mobile CSS v3 - Complete Fix */

/* ===== GLOBAL ===== */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ===== ALL TABLES - FORCE SCROLL ===== */
.table-wrap,
.table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  width: 100% !important;
  border-radius: 12px;
}
table { min-width: 700px !important; width: 100% !important; }
.table-wrap table, .table-responsive table { min-width: 700px !important; }

/* ===== NAVBAR ===== */
@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none !important; }
  .hamburger { display: flex !important; }
  .navbar { padding: 0 14px !important; height: 56px !important; }
}

/* ===== HERO ===== */
@media (max-width: 600px) {
  .hero { padding: 32px 14px !important; }
  .hero h1 { font-size: 21px !important; line-height: 1.3 !important; }
  .hero p { font-size: 13px !important; }
  .hero-trust { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .trust-pill { font-size: 11px !important; text-align: center; }
  .search-bar { padding: 8px 12px !important; }
}

/* ===== STATS BAR ===== */
@media (max-width: 600px) {
  .stats-bar { grid-template-columns: 1fr 1fr !important; }
  .stat-num { font-size: 20px !important; }
}

/* ===== GRIDS ===== */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(4,1fr) !important; gap: 8px !important; }
  .cat-item { padding: 10px 4px !important; }
  .cat-name { font-size: 9px !important; }
  .section { padding: 24px 12px !important; }
  .card { padding: 14px !important; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
}

/* ===== FOOTER ===== */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; }
}

/* ===== DASHBOARD LAYOUT ===== */
@media (max-width: 768px) {
  .dash-layout { flex-direction: column !important; }
  .dash-sidebar { display: none !important; }
  .dash-main { width: 100% !important; }
  .dash-topbar {
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .dash-topbar h2 { font-size: 15px !important; }
  .dash-content { padding: 14px 12px 90px !important; }
  .dash-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dash-stat { padding: 12px !important; }
  .dash-stat-num { font-size: 20px !important; }
  /* Admin quick stats 2x2 on mobile */
  .admin-stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ===== MOBILE BOTTOM NAV ===== */
.dash-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(135deg,#0f2027,#1e3a8a);
  z-index: 999;
  padding: 8px 0 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 768px) { .dash-mobile-nav { display: flex !important; } }
.dash-mobile-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(255,255,255,0.55); font-size: 10px; font-weight: 500;
  text-decoration: none; padding: 4px 6px; border-radius: 8px;
  min-width: 50px; text-align: center; transition: color 0.2s;
}
.dash-mobile-nav a.active, .dash-mobile-nav a:hover { color: #2dd4bf; }
.dash-mobile-nav a .nav-icon { font-size: 18px; display: block; line-height: 1; }

/* ===== ADMIN MOBILE QUICK NAV ===== */
.admin-quick-nav {
  display: none; overflow-x: auto; gap: 8px;
  padding-bottom: 12px; margin-bottom: 16px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  white-space: nowrap;
}
.admin-quick-nav::-webkit-scrollbar { display: none; }
@media (max-width: 768px) { .admin-quick-nav { display: flex !important; } }
.admin-quick-nav a {
  display: inline-block; white-space: nowrap; padding: 8px 16px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 9999px;
  font-size: 12px; font-weight: 600; color: #0f2027; text-decoration: none; flex-shrink: 0;
}
.admin-quick-nav a.active { background: #0d9488; border-color: #0d9488; color: #fff; }

/* ===== CATEGORY TABS SCROLL ===== */
.cat-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
.cat-tab { flex-shrink: 0 !important; }

/* ===== PHARMACY DETAIL ===== */
@media (max-width: 768px) {
  .pharmacy-detail-grid { grid-template-columns: 1fr !important; }
  #products-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .product-img { height: 80px !important; }
  .sticky-cart { position: static !important; }
}

/* ===== CHECKOUT ===== */
@media (max-width: 768px) {
  #cart-content { grid-template-columns: 1fr !important; }
}

/* ===== FORMS ===== */
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr !important; } }

/* ===== MODALS ===== */
@media (max-width: 480px) {
  .modal { max-width: calc(100vw - 32px) !important; }
  .modal-body { padding: 16px !important; }
}

/* ===== RIDER BENEFIT CARDS ===== */
.rider-benefits { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
@media (min-width: 600px) { .rider-benefits { grid-template-columns: repeat(4,1fr) !important; } }
.rider-benefit-card {
  background: rgba(255,255,255,0.12) !important; border-radius: 12px !important;
  padding: 16px 12px !important; text-align: center !important;
  min-height: 100px !important; display: flex !important;
  flex-direction: column !important; justify-content: center !important; align-items: center !important;
}

/* ===== ADMIN DETAIL CARDS ===== */
.detail-image-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (max-width: 600px) { .detail-image-grid { grid-template-columns: 1fr !important; } }
.detail-image-card { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.detail-image-card img { width: 100%; height: auto; display: block; cursor: pointer; }
.detail-image-label { font-size: 11px; font-weight: 600; color: #64748b; text-align: center; padding: 8px; background: #f8fafb; }

/* ===== EARNINGS PAGE ===== */
.earnings-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 768px) { .earnings-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .earnings-grid { grid-template-columns: 1fr !important; } }

/* ===== TOP CARDS (pharmacies/riders) ===== */
.top-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 768px) { .top-cards { grid-template-columns: 1fr !important; } }

/* ===== GENERAL BUTTONS MOBILE ===== */
@media (max-width: 480px) {
  .btn-lg { padding: 11px 18px !important; font-size: 14px !important; }
  .btn { font-size: 12px !important; }
}

/* ===== EARNINGS PAGE - STICKY STATS ON MOBILE ===== */
@media(max-width:768px) {
  .earnings-sticky-top {
    position: sticky;
    top: 56px;
    z-index: 100;
    background: var(--bg);
    padding: 12px 0 8px;
    margin-bottom: 0 !important;
  }
  .earnings-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* ===== ALL DASHBOARD TABLES - FORCE SCROLL ===== */
.dash-content .table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
.dash-content table {
  min-width: 600px !important;
}
.dash-content .table-wrap table {
  min-width: 600px !important;
}

/* ===== PHARMACY DASHBOARD TABLE FIX ===== */
@media(max-width:768px) {
  .dash-content {
    overflow-x: hidden !important;
  }
  .dash-content > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Allow table-wrap to scroll within overflow-hidden parent */
  .dash-content .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ===== INCOMPLETE/CANCELLED ORDER BADGE ===== */
.status-incomplete { background: #f3f4f6; color: #6b7280; }

/* ===== CRITICAL TABLE FIX ===== */
/* Override any overflow:hidden that blocks table scroll */
@media (max-width: 768px) {
  .dash-content {
    overflow-x: hidden;
    overflow-y: auto;
  }
  /* But allow the scroll wrapper inside to work */
  .dash-content > .card,
  .dash-content > div {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Force all inline scroll divs to work */
  div[style*="overflow-x:auto"],
  div[style*="overflow-x: auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }
  div[style*="overflow-x:auto"] table,
  div[style*="overflow-x: auto"] table {
    min-width: 580px !important;
  }
}