#hamburger-btn { display: none !important; }
#mobile-menu { display: none !important; }
#desktop-links { display: flex !important; }
#bottom-nav { display: none !important; }
#mobile-menu .hidden { display: none !important; }
#desktop-links .hidden { display: none !important; }
#bottom-nav .hidden { display: none !important; }

@media (max-width: 768px){
  #desktop-links { display: none !important; }
  #bottom-nav { display: flex !important; }
  body { padding-bottom: 75px !important; }
  #nav-logo { font-size: 15px !important; }
  #mobile-menu.flex-col { 
    display: flex !important; 
    flex-direction: column !important; 
  }
  /* only show links that are NOT hidden */
  #mobile-menu a:not(.hidden), 
  #mobile-menu button:not(.hidden),
  #mobile-menu span:not(.hidden) { 
    display: block !important; 
    width: 100% !important; 
    text-align: left !important; 
  }
}

/* --- ADMIN NAV FINAL FIX --- */
#admin-desktop-links { display: flex !important; }
#admin-hamburger-btn { display: none !important; }
#admin-mobile-menu { display: none !important; }

@media (max-width: 768px){
  #admin-desktop-links { display: none !important; }
  #admin-hamburger-btn { display: flex !important; }
  #admin-mobile-menu.hidden { display: none !important; }
  #admin-mobile-menu.flex { display: flex !important; flex-direction: column !important; }
  #admin-mobile-menu.flex-col { display: flex !important; flex-direction: column !important; }
}

/* --- INVENTORY + EDIT MODAL FIX FOR MOBILE --- */
@media (max-width: 768px){
  /* Make inventory scroll sideways instead of squashing */
  #inventory-list { overflow-x: auto!important; -webkit-overflow-scrolling: touch; }
  #inventory-list table { min-width: 650px!important; }

  /* Convert inventory to cards on phone - much cleaner */
  #inventory-list table thead { display: none!important; }
  #inventory-list table,
  #inventory-list tbody,
  #inventory-list tr,
  #inventory-list td { display: block!important; width: 100%!important; }
  #inventory-list tr {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    display: grid!important;
    grid-template-columns: 60px 1fr;
    gap: 8px;
  }
  #inventory-list td { border: none!important; padding: 4px!important; text-align: left!important; }
  #inventory-list td:first-child { grid-row: span 3; }

  /* Fix edit modal - was cutting off */
  #editModal { padding: 10px!important; align-items: flex-start!important; padding-top: 20px!important; overflow-y: auto!important; }
  #editModal > div { width: 95vw!important; max-width: 95vw!important; margin: 0 auto!important; max-height: 90vh!important; }
  #editProductForm { grid-template-columns: 1fr!important; }
  #editProductForm input, #editProductForm textarea, #editProductForm select { width: 100%!important; font-size: 16px!important; } /* prevents iPhone zoom */
}

/* --- ALL ORDERS FIX --- */
#order-modal {
  align-items: flex-start!important;
  padding-top: 15px!important;
  overflow-y: auto!important;
}
#order-modal > div {
  max-height: 92vh!important;
  overflow-y: auto!important;
  margin: 0 auto!important;
}

#order-details {
  max-height: none!important;
}

/* Make Items Ordered scroll inside modal if plenty */
#order-details.space-y-2 {
  max-height: 45vh;
  overflow-y: auto;
  padding-right: 6px;
}

/* All Orders table - make it scroll on mobile */
#orders-tab.overflow-x-auto {
  overflow-x: auto!important;
  -webkit-overflow-scrolling: touch;
}
#orders-tab table { min-width: 650px; }

@media (max-width: 768px){
  #order-modal > div { width: 95vw!important; max-width: 95vw!important; }
}

/* --- ALL ORDERS STATS FIX --- */
@media (max-width: 768px){
  #orders-tab .grid {
    grid-template-columns: repeat(2, 1fr)!important;
    gap: 10px!important;
  }
  #orders-tab .grid > div {
    padding: 12px!important;
    min-width: 0!important;
    word-break: break-word;
  }
  #orders-tab .grid p {
    font-size: 13px!important;
    line-height: 1.2!important;
  }
  #orders-tab .grid p:last-child {
    font-size: 20px!important;
  }
}

/* --- ABANDONED CARTS FIX --- */
#abandoned-tab {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
#abandoned-tab table {
  min-width: 600px !important;
}

@media (max-width: 768px){
  #abandoned-tab .flex { flex-direction: column !important; }
  #abandoned-tab table thead { display: none !important; }
  #abandoned-tab table,
  #abandoned-tab tbody,
  #abandoned-tab tr,
  #abandoned-tab td { display: block !important; width: 100% !important; }
  #abandoned-tab tr {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
  }
  #abandoned-tab td {
    border: none !important;
    padding: 6px !important;
    text-align: left !important;
  }
  #abandoned-tab td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
  }
}

/* BOTTOM NAV */
#bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: white; border-top: 1px solid #e5e7eb;
  z-index: 9998; justify-content: space-around;
  padding: 6px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
#bottom-nav a {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: #6b7280;
  font-size: 10px; font-weight: 500; gap: 2px; flex: 1; padding: 4px;
}
#bottom-nav a.active { color: #d69e2e; }
#bottom-nav a .icon { font-size: 20px; }
#bottom-nav .cart-badge {
  position: absolute; top: -4px; right: 12px;
  background: #ef4444; color: white; font-size: 10px;
  min-width: 16px; height: 16px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-weight:700
}

/* FIX AI CHAT BUTTON - not to cover bottom nav */
@media (max-width: 768px){
  #ai-chat-btn { bottom: 85px !important; right: 15px !important; }
  #ai-chat-box { bottom: 150px !important; right: 10px !important; width: 92vw !important; max-width: 350px !important; }
}