/* ============================================================
   RestroSpire POS - Mobile Responsive CSS v3
   COMPLETE override for ALL modules - A to Z
   Works on top of styled-components
   ============================================================ */

/* ============================================================
   GLOBAL - Mobile viewport base
   ============================================================ */
@media (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  #root {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ============================================================
     SIDEBAR → BOTTOM NAVIGATION
     ============================================================ */
  /* Hide the desktop sidebar completely on mobile */
  [class*="SidebarContainer"],
  [class*="SidebarWrapper"],
  [class*="RightSidebarWrapper"] {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    border-right: none !important;
    border-top: 1px solid #E5E7EB !important;
    background: #fff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  /* Sidebar header - hide logo on mobile */
  [class*="SidebarHeader"] {
    padding: 8px 16px !important;
    border-bottom: 1px solid #F3F4F6 !important;
  }

  [class*="SidebarHeader"] img {
    width: 32px !important;
    height: 32px !important;
  }

  [class*="Logo"] {
    font-size: 16px !important;
    gap: 8px !important;
  }

  /* Nav content - horizontal scroll */
  [class*="NavContent"] {
    padding: 4px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    max-height: 120px !important;
  }

  [class*="NavGroup"] {
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  [class*="GroupTitle"] {
    display: none !important;
  }

  [class*="NavItem"] {
    padding: 8px 12px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  [class*="NavItem"] svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Overlay - don't show on mobile (sidebar is bottom nav) */
  [class*="Overlay"] {
    display: none !important;
  }

  /* ============================================================
     NAVIGATION HEADER
     ============================================================ */
  [class*="HeaderContainer"],
  [class*="NavigationHeader"] > div:first-child {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  [class*="HeaderLeft"] {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  [class*="HeaderRight"] {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  [class*="PageTitle"] {
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
  }

  /* Hide nav tabs on mobile - use sidebar/bottom nav instead */
  [class*="NavTabs"] {
    display: none !important;
  }

  /* ============================================================
     MAIN CONTENT AREA - remove sidebar space
     ============================================================ */
  [class*="ContentArea"] {
    flex-direction: column !important;
  }

  [class*="MainContent"] {
    width: 100% !important;
    flex: 1 !important;
    padding-bottom: 60px !important; /* space for bottom nav */
  }

  [class*="FullWidthSection"] {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ============================================================
     POS REGISTER / ORDER PAGE - Stack vertically
     ============================================================ */
  [class*="MainContent"][style*="grid"],
  [class*="MainContent"] > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  /* Register.js MainContent grid: 320px 1fr → 1fr */
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns:320px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Left panel (order summary) - full width, collapsible */
  [class*="LeftPanel"] {
    width: 100% !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #E5E7EB !important;
  }

  /* Center panel (menu grid) - full width */
  [class*="CenterPanel"] {
    width: 100% !important;
  }

  /* Right panel (order details) - full width */
  [class*="RightPanel"] {
    width: 100% !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  /* Search box - full width */
  [class*="SearchWrap"],
  [style*="width: 320px"],
  [style*="width:320px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* POS Layout content area - stack */
  [class*="ContentArea"] {
    flex-direction: column !important;
  }

  [class*="OrderSection"] {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #E5E7EB !important;
    min-height: 300px !important;
    max-height: 50vh !important;
  }

  [class*="MenuSectionMain"] {
    flex: 1 !important;
    min-height: 300px !important;
  }

  /* ============================================================
     MENU GRID - Smaller items on mobile
     ============================================================ */
  [class*="GridContainer"],
  [class*="MenuGrid"] {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  [class*="MenuItem"] {
    height: 130px !important;
    padding: 8px !important;
  }

  [class*="ItemEmoji"] {
    font-size: 32px !important;
    margin-bottom: 4px !important;
  }

  [class*="PreviewImage"] {
    height: 50px !important;
    margin-bottom: 4px !important;
  }

  [class*="ItemName"] {
    font-size: 11px !important;
  }

  [class*="ItemPrice"] {
    font-size: 12px !important;
  }

  /* Category bar - horizontal scroll */
  [class*="CategoryBar"],
  [class*="CategoryChips"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  [class*="CategoryButton"],
  [class*="CategoryChip"] {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
  }

  /* ============================================================
     PAYMENT SCREEN - Stack vertically
     ============================================================ */
  [class*="PaymentScreen"] [class*="Content"],
  [class*="PaymentOverlay"] [class*="Content"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  [class*="NumpadGrid"] {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  [class*="NumpadButton"] {
    height: 50px !important;
    font-size: 16px !important;
  }

  [class*="AmountDisplay"] {
    font-size: 48px !important;
  }

  [class*="AmountDisplay"] span {
    font-size: 24px !important;
  }

  [class*="ChangeDisplay"] {
    font-size: 18px !important;
  }

  [class*="RightPanel"] {
    padding: 16px !important;
  }

  [class*="MethodButton"] {
    padding: 10px !important;
    font-size: 13px !important;
  }

  /* ============================================================
     TABLES GRID - Responsive cards
     ============================================================ */
  [class*="TablesGrid"] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    padding: 8px !important;
  }

  [class*="TableCard"] {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* ============================================================
     ORDERS GRID - Responsive
     ============================================================ */
  [class*="OrdersGrid"] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 8px !important;
  }

  [class*="OrderCard"] {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* ============================================================
     DASHBOARD - Responsive stats
     ============================================================ */
  [class*="DashboardContainer"] {
    padding: 12px !important;
  }

  [class*="DashboardContainer"] h1 {
    font-size: 20px !important;
  }

  [class*="StatsGrid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  [class*="StatsGrid"] > * {
    padding: 12px !important;
  }

  [class*="MiniStatsGrid"] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }

  [class*="MiniStatCard"] {
    padding: 12px !important;
  }

  [class*="MiniStatCard"] .icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  [class*="MiniStatCard"] .info .value {
    font-size: 16px !important;
  }

  [class*="StatCard"] {
    padding: 14px !important;
  }

  /* ============================================================
     SETTINGS - Stack vertically
     ============================================================ */
  [class*="SettingsLayout"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  [class*="Settings"] [class*="Sidebar"] {
    width: 100% !important;
    position: relative !important;
    overflow-x: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  [class*="Settings"] [class*="TabButton"] {
    width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 16px !important;
  }

  [class*="ContentCard"] {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  [class*="Settings"] [class*="Grid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="Settings"] [class*="FullWidth"] {
    grid-column: span 1 !important;
  }

  [class*="Settings"] input,
  [class*="Settings"] select,
  [class*="Settings"] textarea {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  [class*="Settings"] button {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }

  /* ============================================================
     SALES REPORTS - Stack stats, scrollable table
     ============================================================ */
  [class*="StatsRow"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  [class*="StatsRow"] > * {
    padding: 10px !important;
    font-size: 12px !important;
  }

  [class*="SalesReports"] [class*="Table"],
  [class*="SalesReport"] [class*="Table"] {
    min-width: 700px !important;
  }

  [class*="TblScroll"],
  [class*="TableContainer"],
  [class*="TableScroll"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 320px) !important;
  }

  [class*="SearchInp"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ============================================================
     INVENTORY MANAGEMENT - Responsive
     ============================================================ */
  [class*="InventoryManagement"] [class*="StatsGrid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  [class*="ReportGrid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  [class*="ChartCard"] {
    height: 280px !important;
  }

  [class*="ValuationSummary"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  [class*="TabsContainer"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }

  [class*="FilterSection"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ============================================================
     CUSTOMER MANAGEMENT - Responsive
     ============================================================ */
  [class*="CustomerManagement"] [class*="Header"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  [class*="CustomerManagement"] [class*="ActionButtons"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  [class*="CustomerManagement"] [class*="Table"] {
    min-width: 600px !important;
  }

  /* ============================================================
     STAFF MANAGEMENT - Responsive
     ============================================================ */
  [class*="StaffManagement"] [class*="PageWrap"] {
    padding: 12px !important;
  }

  [class*="StaffManagement"] [class*="StatsGrid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  [class*="FilterGroup"] {
    min-width: 120px !important;
  }

  [class*="SearchInput"] {
    min-width: 120px !important;
    width: 100% !important;
  }

  /* ============================================================
     CASH COUNTER - Responsive
     ============================================================ */
  [class*="CashCounter"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="CashCounter"] [class*="Header"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  [class*="CashCounter"] [class*="StatsGrid"] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }

  [class*="CashCounter"] [class*="ContentGrid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  [class*="CashCounter"] [class*="Card"] {
    padding: 12px !important;
  }

  /* ============================================================
     EXPENSE TRACKING - Responsive
     ============================================================ */
  [class*="ExpenseTracking"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="ExpenseTracking"] [class*="Header"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ============================================================
     SUPPLIER MANAGEMENT - Responsive
     ============================================================ */
  [class*="SupplierManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="SupplierManagement"] [class*="Header"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  [class*="SupplierManagement"] [class*="Table"] {
    min-width: 600px !important;
  }

  /* ============================================================
     PURCHASE ORDER MANAGEMENT - Responsive
     ============================================================ */
  [class*="PurchaseOrderManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="PurchaseOrderManagement"] [class*="Table"] {
    min-width: 600px !important;
  }

  /* ============================================================
     RECIPE MANAGEMENT - Responsive
     ============================================================ */
  [class*="RecipeManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  /* ============================================================
     DEALS MANAGEMENT - Responsive
     ============================================================ */
  [class*="DealsManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  /* ============================================================
     RIDER MANAGEMENT - Responsive
     ============================================================ */
  [class*="RiderManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="RiderReport"] [class*="Container"] {
    padding: 12px !important;
  }

  /* ============================================================
     HOTEL MANAGEMENT - Responsive
     ============================================================ */
  [class*="RoomManagement"] [class*="Container"],
  [class*="BookingManagement"] [class*="Container"],
  [class*="HousekeepingManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="RoomManagement"] [class*="Grid"],
  [class*="BookingManagement"] [class*="Grid"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ============================================================
     RETAIL POS / INVENTORY - Responsive
     ============================================================ */
  [class*="RetailPOS"] [class*="Container"],
  [class*="RetailInventory"] [class*="Container"] {
    padding: 12px !important;
  }

  /* ============================================================
     BRANCH MANAGEMENT - Responsive
     ============================================================ */
  [class*="BranchManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  /* ============================================================
     AUDIT LOGS - Responsive
     ============================================================ */
  [class*="AuditLogs"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="AuditLogs"] [class*="Table"] {
    min-width: 600px !important;
  }

  /* ============================================================
     ITEMS MANAGEMENT - Responsive
     ============================================================ */
  [class*="ItemsManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="ItemsManagement"] [class*="Grid"] {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 8px !important;
  }

  /* ============================================================
     CATEGORY MANAGEMENT - Responsive
     ============================================================ */
  [class*="CategoryManagement"] [class*="Container"] {
    padding: 12px !important;
  }

  /* ============================================================
     PROFIT LOSS REPORT - Responsive
     ============================================================ */
  [class*="ProfitLossReport"] [class*="Container"] {
    padding: 12px !important;
  }

  [class*="ProfitLossReport"] [class*="Grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ============================================================
     SALES TYPES REPORT - Responsive
     ============================================================ */
  [class*="SalesTypesReport"] [class*="Container"] {
    padding: 12px !important;
  }

  /* ============================================================
     ALL MODALS - Full width on mobile
     ============================================================ */
  [class*="ModalContent"],
  [class*="ModalCard"],
  [class*="ModalOverlay"] > div {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 10px auto !important;
    border-radius: 12px !important;
  }

  [class*="ModalContent"][style*="width: 400px"],
  [class*="ModalContent"][style*="width:400px"] {
    width: 95% !important;
  }

  /* Modal buttons - stack on mobile */
  [class*="DeleteActions"],
  [class*="ModalActions"],
  [class*="ModalFooter"] {
    flex-direction: column !important;
    gap: 8px !important;
  }

  [class*="DeleteActions"] > button,
  [class*="ModalActions"] > button,
  [class*="ModalFooter"] > button {
    width: 100% !important;
  }

  /* ============================================================
     ALL TABLES - Horizontal scroll
     ============================================================ */
  table {
    font-size: 13px !important;
  }

  table th,
  table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* ============================================================
     ALL BUTTONS - Touch friendly
     ============================================================ */
  button {
    min-height: 40px !important;
    font-size: 14px !important;
  }

  [class*="PrimaryBtn"],
  [class*="SecondaryBtn"],
  [class*="NewButton"],
  [class*="NewOrderButton"] {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* ============================================================
     ALL CONTAINERS - Reduce padding
     ============================================================ */
  [class*="Container"] {
    padding: 12px !important;
  }

  [class*="Header"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  [class*="Header"] h1,
  [class*="Header"] h2 {
    font-size: 18px !important;
  }

  [class*="ActionBar"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ============================================================
     FORMS - Stack inputs
     ============================================================ */
  [class*="FormGrid"],
  [class*="FormRow"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  /* ============================================================
     CARDS - Reduce padding
     ============================================================ */
  [class*="Card"] {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* ============================================================
     KITCHEN TICKET - Responsive
     ============================================================ */
  [class*="KitchenTicket"] {
    width: 100% !important;
    padding: 12px !important;
  }

  /* ============================================================
     CASHIER DASHBOARD - Responsive
     ============================================================ */
  [class*="CashierDashboard"] {
    padding: 12px !important;
  }

  /* ============================================================
     ADD MENU ITEM MODAL - Responsive
     ============================================================ */
  [class*="AddMenuItemModal"] [class*="Grid"],
  [class*="AddMenuItemModal"] [class*="FormGrid"] {
    grid-template-columns: 1fr !important;
  }

  /* ============================================================
     CREATE PRODUCT VIEW - Responsive
     ============================================================ */
  [class*="CreateProductView"] [class*="Grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ============================================================
     MODULE MANAGER - Responsive
     ============================================================ */
  [class*="ModuleManager"] [class*="Grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ============================================================
     SCROLLBARS - Hide on mobile
     ============================================================ */
  ::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
  }

  ::-webkit-scrollbar-thumb {
    background: #D1D5DB !important;
    border-radius: 4px !important;
  }

  /* ============================================================
     UTILITY - Hide elements that don't work on mobile
     ============================================================ */
  [class*="SubscriptionCountdown"],
  [class*="DayToggleButton"],
  [class*="StatusBadge"] {
    display: none !important;
  }
}

/* ============================================================
   EXTRA SMALL MOBILE (≤480px) - Even more compact
   ============================================================ */
@media (max-width: 480px) {
  [class*="StatsGrid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="StatsRow"] {
    grid-template-columns: 1fr !important;
  }

  [class*="GridContainer"],
  [class*="MenuGrid"] {
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important;
    gap: 6px !important;
  }

  [class*="MenuItem"] {
    height: 110px !important;
    padding: 6px !important;
  }

  [class*="ItemEmoji"] {
    font-size: 26px !important;
  }

  [class*="TablesGrid"] {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }

  [class*="OrdersGrid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="StaffManagement"] [class*="StatsGrid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="InventoryManagement"] [class*="StatsGrid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="AmountDisplay"] {
    font-size: 36px !important;
  }

  [class*="NumpadButton"] {
    height: 44px !important;
    font-size: 14px !important;
  }

  [class*="PageTitle"] {
    font-size: 14px !important;
    max-width: 150px !important;
  }

  [class*="NavItem"] {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   TABLET (769px-1024px) - Moderate adjustments
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  [class*="StatsGrid"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  [class*="StatsRow"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  [class*="GridContainer"],
  [class*="MenuGrid"] {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }

  [style*="grid-template-columns: 320px 1fr"] {
    grid-template-columns: 280px 1fr !important;
  }
}