/* ============================================================
   RestroSpire POS - Mobile Responsive CSS Override
   Injected after main app CSS to make it mobile-friendly
   ============================================================ */

/* ===== VIEWPORT & ROOT ===== */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
}

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

/* ===== MOBILE BREAKPOINTS ===== */

/* ─── TABLET (≤ 1024px) ─── */
@media screen and (max-width: 1024px) {

  /* Sidebar: narrower on tablet */
  [style*="width: 280px"],
  [style*="width:280px"],
  [style*="width: 250px"],
  [style*="width:250px"] {
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
  }

  /* Dashboard stat cards: 2 columns */
  [style*="gridTemplateColumns"][style*="repeat(auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tables: allow horizontal scroll */
  table {
    font-size: 13px !important;
  }

  th, td {
    padding: 6px 8px !important;
  }
}

/* ─── MOBILE (≤ 768px) - MAIN BREAKPOINT ─── */
@media screen and (max-width: 768px) {

  /* ===== GLOBAL OVERRIDES ===== */
  body {
    font-size: 14px !important;
  }

  #root {
    font-size: 14px !important;
  }

  /* ===== SIDEBAR → HIDDEN (replaced by bottom nav) ===== */
  /* Hide desktop sidebar on mobile */
  [style*="width: 280px"],
  [style*="width:280px"],
  [style*="width: 250px"],
  [style*="width:250px"],
  [style*="width: 220px"],
  [style*="width:220px"] {
    display: none !important;
  }

  /* Main content takes full width */
  [style*="marginLeft: 280px"],
  [style*="margin-left: 280px"],
  [style*="marginLeft:280px"],
  [style*="marginLeft: 250px"],
  [style*="marginLeft:250px"],
  [style*="marginLeft: 220px"],
  [style*="marginLeft:220px"] {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* If content uses flex with sidebar, make it full width */
  [style*="display: flex"][style*="minHeight: 100vh"],
  [style*="display:flex"][style*="minHeight:100vh"],
  [style*="display: flex"][style*="min-height: 100vh"] {
    flex-direction: column !important;
  }

  /* ===== HEADER / NAVBAR ===== */
  header,
  [style*="position: sticky"][style*="top: 0"],
  [style*="position: sticky"][style*="top:0"] {
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 56px !important;
  }

  /* Header title: smaller */
  header h1,
  header h2 {
    font-size: 16px !important;
  }

  /* ===== DASHBOARD ===== */
  /* Stat cards: single column on mobile */
  [style*="gridTemplateColumns"][style*="repeat(auto-fit"],
  [style*="grid-template-columns"][style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Dashboard cards: full width */
  [style*="gridTemplateColumns"][style*="repeat(2"],
  [style*="gridTemplateColumns"][style*="repeat(3"],
  [style*="gridTemplateColumns"][style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Card padding: reduce */
  [style*="padding: 24px"],
  [style*="padding:24px"],
  [style*="padding: 20px"],
  [style*="padding:20px"] {
    padding: 12px !important;
  }

  /* ===== POS SCREEN ===== */
  /* POS layout: stack vertically */
  [style*="display: grid"][style*="gridTemplateColumns"][style*="1fr"][style*="380px"],
  [style*="display:grid"][style*="gridTemplateColumns"][style*="1fr"][style*="380px"],
  [style*="display: grid"][style*="gridTemplateColumns"][style*="1fr"][style*="400px"],
  [style*="display:grid"][style*="gridTemplateColumns"][style*="1fr"][style*="400px"],
  [style*="display: grid"][style*="gridTemplateColumns"][style*="2fr"][style*="1fr"],
  [style*="display:grid"][style*="gridTemplateColumns"][style*="2fr"][style*="1fr"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  /* Menu items grid: 2 columns on mobile */
  [style*="gridTemplateColumns"][style*="repeat(auto-fill"][style*="minmax(180px"],
  [style*="gridTemplateColumns"][style*="repeat(auto-fill"][style*="minmax(200px"],
  [style*="gridTemplateColumns"][style*="repeat(auto-fill"][style*="minmax(160px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Menu item cards: compact */
  [style*="minWidth: 180px"],
  [style*="min-width: 180px"],
  [style*="minWidth: 200px"],
  [style*="min-width: 200px"] {
    min-width: unset !important;
  }

  /* Cart: fixed bottom panel on mobile */
  [style*="position: sticky"][style*="top: 20px"],
  [style*="position: sticky"][style*="top:20px"],
  [style*="position: sticky"][style*="top: 24px"],
  [style*="position: sticky"][style*="top:24px"] {
    position: fixed !important;
    bottom: 60px !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 100 !important;
  }

  /* ===== TABLES → CARD VIEW ===== */
  /* Wrap tables in scrollable container */
  table {
    width: 100% !important;
    font-size: 12px !important;
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  thead {
    display: table !important;
    width: max-content !important;
  }

  tbody {
    display: table !important;
    width: max-content !important;
  }

  th, td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* ===== BUTTONS: TOUCH-FRIENDLY ===== */
  button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* Small icon buttons can be smaller */
  button[style*="padding: 4px"],
  button[style*="padding:4px"],
  button[style*="padding: 6px"],
  button[style*="padding:6px"],
  button[style*="padding: 8px"],
  button[style*="padding:8px"] {
    min-height: 36px !important;
    min-width: 36px !important;
  }

  /* ===== FORMS / INPUTS ===== */
  input,
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 10px 12px !important;
    max-width: 100% !important;
  }

  /* Form groups: stack vertically */
  [style*="display: flex"][style*="gap: 16px"] > input,
  [style*="display:flex"][style*="gap:16px"] > input,
  [style*="display: flex"][style*="gap: 12px"] > input,
  [style*="display:flex"][style*="gap:12px"] > input {
    flex: 1 1 100% !important;
  }

  /* ===== MODALS → FULL SCREEN ===== */
  [style*="position: fixed"][style*="maxWidth: 500px"],
  [style*="position:fixed"][style*="maxWidth:500px"],
  [style*="position: fixed"][style*="max-width: 500px"],
  [style*="position: fixed"][style*="maxWidth: 600px"],
  [style*="position:fixed"][style*="maxWidth:600px"],
  [style*="position: fixed"][style*="max-width: 600px"],
  [style*="position: fixed"][style*="maxWidth: 700px"],
  [style*="position:fixed"][style*="maxWidth:700px"],
  [style*="position: fixed"][style*="max-width: 700px"],
  [style*="position: fixed"][style*="maxWidth: 800px"],
  [style*="position:fixed"][style*="maxWidth:800px"],
  [style*="position: fixed"][style*="max-width: 800px"] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 0 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

  /* Modal content: reduce padding */
  [style*="position: fixed"] [style*="padding: 24px"],
  [style*="position: fixed"] [style*="padding:24px"],
  [style*="position: fixed"] [style*="padding: 32px"],
  [style*="position: fixed"] [style*="padding:32px"] {
    padding: 16px !important;
  }

  /* ===== TYPOGRAPHY ===== */
  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  h4, h5, h6 { font-size: 14px !important; }

  /* ===== FLEX LAYOUTS: STACK VERTICALLY ===== */
  [style*="display: flex"][style*="gap: 24px"],
  [style*="display:flex"][style*="gap:24px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  [style*="display: flex"][style*="gap: 16px"][style*="alignItems: center"],
  [style*="display:flex"][style*="gap:16px"][style*="alignItems:center"] {
    flex-wrap: wrap !important;
  }

  /* ===== CHARTS: RESPONSIVE ===== */
  svg {
    max-width: 100% !important;
    height: auto !important;
  }

  [style*="height: 300px"],
  [style*="height:300px"],
  [style*="height: 400px"],
  [style*="height:400px"] {
    height: 250px !important;
  }

  /* ===== PADDING / MARGINS: REDUCE ===== */
  [style*="padding: 40px"],
  [style*="padding:40px"] {
    padding: 16px !important;
  }

  [style*="padding: 32px"],
  [style*="padding:32px"] {
    padding: 12px !important;
  }

  [style*="margin: 0 auto"],
  [style*="margin:0 auto"] {
    margin: 0 !important;
  }

  /* ===== APP LAUNCHER / DASHBOARD GRID ===== */
  /* App launcher cards on home screen */
  [style*="gridTemplateColumns"][style*="repeat(auto-fit"][style*="minmax(300px"],
  [style*="gridTemplateColumns"][style*="repeat(auto-fit"][style*="minmax(280px"],
  [style*="gridTemplateColumns"][style*="repeat(auto-fit"][style*="minmax(250px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  [style*="minWidth: 300px"],
  [style*="min-width: 300px"],
  [style*="minWidth: 280px"],
  [style*="min-width: 280px"],
  [style*="minWidth: 250px"],
  [style*="min-width: 250px"] {
    min-width: unset !important;
  }

  /* ===== TABS / FILTERS ===== */
  [style*="display: flex"][style*="overflowX: auto"],
  [style*="display:flex"][style*="overflowX:auto"],
  [style*="overflowX: auto"],
  [style*="overflow-x: auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  /* ===== SEARCH BARS ===== */
  [style*="display: flex"][style*="alignItems: center"][style*="gap: 8px"],
  [style*="display:flex"][style*="alignItems:center"][style*="gap:8px"] {
    flex: 1 1 100% !important;
  }

  /* ===== ORDER CARDS ===== */
  [style*="display: grid"][style*="gridTemplateColumns"][style*="repeat(2"],
  [style*="display:grid"][style*="gridTemplateColumns"][style*="repeat(2"],
  [style*="display: grid"][style*="gridTemplateColumns"][style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* ===== STATS / SUMMARY ROWS ===== */
  [style*="display: flex"][style*="justifyContent: space-between"],
  [style*="display:flex"][style*="justifyContent:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ===== BOTTOM NAVIGATION BAR (injected via JS) ===== */
  #mobile-bottom-nav {
    display: flex !important;
  }
}

/* ─── SMALL MOBILE (≤ 480px) ─── */
@media screen and (max-width: 480px) {

  body {
    font-size: 13px !important;
  }

  /* Menu items: single column on very small screens */
  [style*="gridTemplateColumns"][style*="repeat(2"],
  [style*="gridTemplateColumns"][style*="repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  /* Modals: truly full screen */
  [style*="position: fixed"][style*="maxWidth"],
  [style*="position:fixed"][style*="maxWidth"] {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }

  /* Headers: even more compact */
  header h1,
  header h2 {
    font-size: 14px !important;
  }

  /* Stat numbers: smaller */
  [style*="fontSize: 24px"],
  [style*="fontSize:24px"],
  [style*="font-size: 24px"],
  [style*="fontSize: 28px"],
  [style*="fontSize:28px"],
  [style*="font-size: 28px"],
  [style*="fontSize: 32px"],
  [style*="fontSize:32px"],
  [style*="font-size: 32px"] {
    font-size: 18px !important;
  }

  /* Bottom nav: smaller icons */
  #mobile-bottom-nav button {
    padding: 6px !important;
    min-height: 50px !important;
    font-size: 10px !important;
  }

  #mobile-bottom-nav svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ─── LANDSCAPE MODE ─── */
@media screen and (max-width: 768px) and (orientation: landscape) {

  /* Use horizontal space better in landscape */
  [style*="gridTemplateColumns"][style*="repeat(auto-fill"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Cart: side panel in landscape */
  [style*="position: sticky"][style*="top: 20px"],
  [style*="position: sticky"][style*="top:20px"] {
    position: sticky !important;
    bottom: auto !important;
    top: 10px !important;
    max-height: 70vh !important;
  }
}

/* ===== PWA / STANDALONE MODE ===== */
@media (display-mode: standalone) {
  body {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Safe area insets for notched phones */
  #mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  header {
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* ===== CAPACITOR / NATIVE APP MODE ===== */
@media (display-mode: standalone) and (max-width: 768px) {
  /* Prevent text selection on buttons in native mode */
  button {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* Smooth scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== LOADING / SPINNER ===== */
@media screen and (max-width: 768px) {
  [style*="display: flex"][style*="justifyContent: center"][style*="alignItems: center"][style*="minHeight: 100vh"],
  [style*="display:flex"][style*="justifyContent:center"][style*="alignItems:center"][style*="minHeight:100vh"],
  [style*="display: flex"][style*="justifyContent: center"][style*="alignItems: center"][style*="min-height: 100vh"] {
    min-height: 50vh !important;
  }
}

/* ===== SCROLLBAR: HIDE ON MOBILE ===== */
@media screen and (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
  }

  ::-webkit-scrollbar-thumb {
    background: transparent !important;
  }

  /* Firefox */
  * {
    scrollbar-width: none !important;
  }
}