/* ============================================================
   RestroSpire POS - Mobile Responsive CSS v4
   Works with BOTH media queries AND .mobile-app body class
   ============================================================ */

/* ============================================================
   CAPACITOR APP - Force mobile layout (no media query needed)
   ============================================================ */
body.mobile-app,
body.mobile-app #root {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body.mobile-app * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ============================================================
   SIDEBAR → BOTTOM NAVIGATION
   ============================================================ */
body.mobile-app [class*="SidebarContainer"],
body.mobile-app [class*="SidebarWrapper"],
body.mobile-app [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;
}

body.mobile-app [class*="SidebarHeader"] {
  padding: 8px 16px !important;
}

body.mobile-app [class*="SidebarHeader"] img {
  width: 32px !important;
  height: 32px !important;
}

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

body.mobile-app [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;
}

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

body.mobile-app [class*="GroupTitle"] {
  display: none !important;
}

body.mobile-app [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;
}

body.mobile-app [class*="NavItem"] svg {
  width: 18px !important;
  height: 18px !important;
}

body.mobile-app [class*="Overlay"] {
  display: none !important;
}

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

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

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

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

body.mobile-app [class*="NavTabs"] {
  display: none !important;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
body.mobile-app [class*="ContentArea"] {
  flex-direction: column !important;
}

body.mobile-app [class*="MainContent"] {
  width: 100% !important;
  flex: 1 !important;
  padding-bottom: 60px !important;
}

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

/* ============================================================
   POS REGISTER - Stack vertically
   ============================================================ */
body.mobile-app [style*="grid-template-columns: 320px 1fr"],
body.mobile-app [style*="grid-template-columns:320px 1fr"] {
  grid-template-columns: 1fr !important;
}

body.mobile-app [class*="LeftPanel"] {
  width: 100% !important;
  max-height: 40vh !important;
  overflow-y: auto !important;
  border-right: none !important;
  border-bottom: 1px solid #E5E7EB !important;
}

body.mobile-app [class*="CenterPanel"] {
  width: 100% !important;
}

body.mobile-app [class*="RightPanel"] {
  width: 100% !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
}

body.mobile-app [class*="SearchWrap"],
body.mobile-app [style*="width: 320px"],
body.mobile-app [style*="width:320px"] {
  width: 100% !important;
  max-width: 100% !important;
}

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

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

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

body.mobile-app [class*="MenuItem"] {
  height: 130px !important;
  padding: 8px !important;
}

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

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

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

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

body.mobile-app [class*="CategoryBar"],
body.mobile-app [class*="CategoryChips"] {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  padding: 8px !important;
  -webkit-overflow-scrolling: touch !important;
}

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

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

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

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

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

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

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

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

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

body.mobile-app [class*="TableCard"] {
  padding: 12px !important;
}

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

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

/* ============================================================
   DASHBOARD
   ============================================================ */
body.mobile-app [class*="DashboardContainer"] {
  padding: 12px !important;
}

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

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

body.mobile-app [class*="StatsGrid"] > * {
  padding: 12px !important;
}

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

body.mobile-app [class*="MiniStatCard"] {
  padding: 12px !important;
}

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

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

body.mobile-app [class*="StatCard"] {
  padding: 14px !important;
}

/* ============================================================
   SETTINGS
   ============================================================ */
body.mobile-app [class*="SettingsLayout"] {
  flex-direction: column !important;
  gap: 12px !important;
}

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

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

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

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

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

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

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

/* ============================================================
   REPORTS
   ============================================================ */
body.mobile-app [class*="StatsRow"] {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

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

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

body.mobile-app [class*="TblScroll"],
body.mobile-app [class*="TableContainer"],
body.mobile-app [class*="TableScroll"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

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

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

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

body.mobile-app [class*="ChartCard"] {
  height: 280px !important;
}

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

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

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

/* ============================================================
   STAFF
   ============================================================ */
body.mobile-app [class*="StaffManagement"] [class*="PageWrap"] {
  padding: 12px !important;
}

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

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

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

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

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

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

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

body.mobile-app [class*="CashCounter"] [class*="Card"] {
  padding: 12px !important;
}

/* ============================================================
   ALL MODALS
   ============================================================ */
body.mobile-app [class*="ModalContent"],
body.mobile-app [class*="ModalCard"],
body.mobile-app [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;
}

body.mobile-app [class*="DeleteActions"],
body.mobile-app [class*="ModalActions"],
body.mobile-app [class*="ModalFooter"] {
  flex-direction: column !important;
  gap: 8px !important;
}

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

/* ============================================================
   ALL TABLES
   ============================================================ */
body.mobile-app table {
  font-size: 13px !important;
}

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

/* ============================================================
   ALL BUTTONS
   ============================================================ */
body.mobile-app button {
  min-height: 40px !important;
  font-size: 14px !important;
}

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

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

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

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

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

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

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

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

/* ============================================================
   HOTEL MANAGEMENT
   ============================================================ */
body.mobile-app [class*="RoomManagement"] [class*="Grid"],
body.mobile-app [class*="BookingManagement"] [class*="Grid"] {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

/* ============================================================
   HIDE UNNECESSARY ELEMENTS
   ============================================================ */
body.mobile-app [class*="SubscriptionCountdown"],
body.mobile-app [class*="DayToggleButton"],
body.mobile-app [class*="StatusBadge"] {
  display: none !important;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
body.mobile-app ::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

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

/* ============================================================
   ALSO KEEP MEDIA QUERIES FOR BROWSER ACCESS
   ============================================================ */
@media (max-width: 768px) {
  /* All the same rules apply via media query too */
  #root {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  [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;
  }

  [class*="SidebarHeader"] { padding: 8px 16px !important; }
  [class*="SidebarHeader"] img { width: 32px !important; height: 32px !important; }
  [class*="Logo"] { font-size: 16px !important; gap: 8px !important; }
  [class*="NavContent"] { padding: 4px 8px !important; overflow-x: auto !important; display: flex !important; flex-direction: row !important; gap: 4px !important; max-height: 120px !important; }
  [class*="NavGroup"] { margin-bottom: 0 !important; display: flex !important; flex-direction: row !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; flex-shrink: 0 !important; }
  [class*="NavItem"] svg { width: 18px !important; height: 18px !important; }
  [class*="Overlay"] { display: none !important; }
  [class*="NavTabs"] { display: none !important; }
  [class*="PageTitle"] { font-size: 16px !important; max-width: 200px !important; }
  [class*="ContentArea"] { flex-direction: column !important; }
  [class*="MainContent"] { width: 100% !important; padding-bottom: 60px !important; }
  [style*="grid-template-columns: 320px 1fr"] { grid-template-columns: 1fr !important; }
  [class*="LeftPanel"] { width: 100% !important; max-height: 40vh !important; overflow-y: auto !important; }
  [class*="RightPanel"] { width: 100% !important; max-height: 50vh !important; }
  [class*="SearchWrap"], [style*="width: 320px"] { width: 100% !important; }
  [class*="OrderSection"] { width: 100% !important; border-left: none !important; border-top: 1px solid #E5E7EB !important; }
  [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; }
  [class*="ItemName"] { font-size: 11px !important; }
  [class*="ItemPrice"] { font-size: 12px !important; }
  [class*="CategoryBar"], [class*="CategoryChips"] { overflow-x: auto !important; flex-wrap: nowrap !important; }
  [class*="PaymentScreen"] [class*="Content"], [class*="PaymentOverlay"] [class*="Content"] { grid-template-columns: 1fr !important; }
  [class*="NumpadGrid"] { grid-template-columns: repeat(4, 1fr) !important; }
  [class*="NumpadButton"] { height: 50px !important; }
  [class*="AmountDisplay"] { font-size: 48px !important; }
  [class*="TablesGrid"] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  [class*="OrdersGrid"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  [class*="StatsGrid"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  [class*="StatsRow"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  [class*="DashboardContainer"] { padding: 12px !important; }
  [class*="DashboardContainer"] h1 { font-size: 20px !important; }
  [class*="SettingsLayout"] { flex-direction: column !important; }
  [class*="Settings"] [class*="Sidebar"] { width: 100% !important; overflow-x: auto !important; flex-direction: row !important; }
  [class*="Settings"] [class*="Grid"] { grid-template-columns: 1fr !important; }
  [class*="ContentCard"] { padding: 16px !important; }
  [class*="InventoryManagement"] [class*="StatsGrid"] { grid-template-columns: repeat(2, 1fr) !important; }
  [class*="ReportGrid"] { grid-template-columns: 1fr !important; }
  [class*="ValuationSummary"] { grid-template-columns: 1fr !important; }
  [class*="StaffManagement"] [class*="StatsGrid"] { grid-template-columns: repeat(2, 1fr) !important; }
  [class*="CashCounter"] [class*="ContentGrid"] { grid-template-columns: 1fr !important; }
  [class*="CashCounter"] [class*="StatsGrid"] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  [class*="ModalContent"], [class*="ModalCard"] { width: 95% !important; max-width: 95% !important; max-height: 90vh !important; overflow-y: auto !important; }
  [class*="DeleteActions"], [class*="ModalActions"] { flex-direction: column !important; gap: 8px !important; }
  [class*="DeleteActions"] > button, [class*="ModalActions"] > button { width: 100% !important; }
  [class*="Container"] { padding: 12px !important; }
  [class*="Header"] { flex-wrap: wrap !important; gap: 8px !important; }
  [class*="Header"] h1, [class*="Header"] h2 { font-size: 18px !important; }
  [class*="FormGrid"], [class*="FormRow"] { grid-template-columns: 1fr !important; }
  input, select, textarea { width: 100% !important; font-size: 14px !important; }
  [class*="Card"] { padding: 12px !important; }
  button { min-height: 40px !important; font-size: 14px !important; }
  table { font-size: 13px !important; }
  table th, table td { padding: 8px 10px !important; }
  [class*="TblScroll"], [class*="TableContainer"] { overflow-x: auto !important; }
  [class*="SubscriptionCountdown"], [class*="DayToggleButton"], [class*="StatusBadge"] { display: none !important; }
  [class*="RoomManagement"] [class*="Grid"], [class*="BookingManagement"] [class*="Grid"] { grid-template-columns: 1fr !important; }
}

@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*="AmountDisplay"] { font-size: 36px !important; }
  [class*="NumpadButton"] { height: 44px !important; font-size: 14px !important; }
  [class*="PageTitle"] { font-size: 14px !important; max-width: 150px !important; }
}