/* ── Index page (project file index) — class-based overrides ── */
@media (max-width: 767px) {
  .wrap { padding: 16px 14px 80px !important; }
  .hero { padding: 20px !important; border-radius: 14px !important; margin-bottom: 20px !important; }
  .hero-inner { gap: 14px !important; flex-direction: column !important; align-items: flex-start !important; }
  .mark { width: 52px !important; height: 52px !important; border-radius: 13px !important; }
  .hero h1 { font-size: 22px !important; }
  .hero p { font-size: 13px !important; }
  .meta-row { gap: 6px !important; margin-top: 12px !important; }
  .chip { font-size: 10.5px !important; padding: 4px 9px !important; }
  .grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .card { padding: 16px !important; border-radius: 12px !important; }
  .card h3 { font-size: 15px !important; }
  .card p { font-size: 12px !important; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stat { padding: 12px 14px !important; }
  .stat .value { font-size: 20px !important; }
  .section-hd { margin: 28px 0 12px !important; flex-wrap: wrap !important; }
  .section-hd h2 { font-size: 18px !important; }
  .section-hd .sub { font-size: 12px !important; }
  .sitemap { padding: 16px !important; }
  .sitemap-grid { min-width: 0 !important; }
  .sm-row { flex-direction: column !important; gap: 6px !important; }
  .sm-node { padding: 9px 11px !important; }
  .sm-node small { font-size: 10px !important; }
  .tree { padding: 14px !important; font-size: 11px !important; line-height: 1.7 !important; }
  .tree .desc { font-size: 10px !important; margin-right: 4px !important; display: inline; }
}

/* ════════════════════════════════════════════════════════════════════════
   Zowof — Mobile responsive layer (overlays inline styles via [style*=…])
   Loaded AFTER tokens.css so all rules take precedence.
   Native-app feel: safe areas, large touch targets, sheet animations,
   single-column grids, sticky CTAs, smooth momentum scroll.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Force the html/body to fit viewport exactly (kill rubber-band on iOS) ── */
@media (max-width: 767px) {
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* App container: full viewport + safe areas */
  #root { height: 100dvh; height: 100vh; }

  /* Use dynamic viewport for true app feel where supported */
  @supports (height: 100dvh) {
    #root, .zw { height: 100dvh !important; }
  }

  /* Smooth momentum scrolling everywhere */
  .zw * { -webkit-overflow-scrolling: touch; }

  /* Bigger base font for readability */
  .zw { font-size: 14.5px; line-height: 1.5; }

  /* ─── Topbar polish: subtle elevation + safe-area top inset ─── */
  .zw-mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: rgba(15, 20, 17, 0.88) !important;
    box-shadow: 0 1px 0 var(--border-subtle), 0 4px 16px rgba(0,0,0,0.18);
  }

  /* ─── Bottom nav: stronger blur + safe-area bottom + active spring ─── */
  .zw-mobile-bottomnav {
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    background: rgba(15, 20, 17, 0.92) !important;
    border-top-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
  }
  .zw-mobile-bottomnav button:active {
    transform: scale(0.92);
    transition: transform .08s ease-out;
  }

  /* ═══════════ INLINE-STYLE OVERRIDES (matches React-rendered styles) ════ */
  /* React renders {padding:24} as "padding: 24px;". Match with [style*=…]. */

  /* All screen root containers: drop padding from 24 → 14 */
  main [style*="padding: 24px"][style*="flex-direction: column"],
  main [style*="padding: 24px"][style*="display: flex"],
  main [style*="padding: 24px"][style*="display: grid"],
  main [style*="padding: 24px"][style*="overflow-y: auto"] {
    padding: 14px !important;
    gap: 12px !important;
  }

  /* POS top-level grid (1fr 420px) → vertical layout filling the screen,
     with products in a scrollable area and cart as a max-height bottom panel. */
  main [style*="grid-template-columns: 1fr 420px"] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  /* Products section (first child) — scrollable region */
  main [style*="grid-template-columns: 1fr 420px"] > div:first-child {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 12px 12px !important;
    gap: 10px !important;
  }
  /* Cart sidebar (second child) — bottom panel; capped height, internal scroll */
  main [style*="grid-template-columns: 1fr 420px"] > div:nth-child(2) {
    border-left: 0 !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-radius: 18px 18px 0 0 !important;
    flex: 0 0 auto !important;
    max-height: 50dvh !important;
    background: var(--bg-1) !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Items list inside cart — keep its internal scroll behavior (flex:1 + auto) */
  /* (no override needed — the original style handles it) */

  /* Cart's totals/payment footer — stays at bottom (it's last child of cart, flex column) */
  main [style*="grid-template-columns: 1fr 420px"] > div:nth-child(2) > div[style*="background: var(--bg-2)"][style*="border-top: 1px solid"] {
    flex-shrink: 0 !important;
  }

  /* 4-column KPI grid → 2 columns (use minmax(0, 1fr) so children shrink) */
  main [style*="grid-template-columns: repeat(4, 1fr)"],
  main [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* 3-column → 2 columns (or 1 if labels too long) */
  main [style*="grid-template-columns: repeat(3, 1fr)"],
  main [style*="grid-template-columns: repeat(3,1fr)"],
  main [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* 2-column 2fr 1fr or 1fr 320px → stack */
  main [style*="grid-template-columns: 2fr 1fr"],
  main [style*="grid-template-columns: 1fr 320px"],
  main [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  /* 5-column (whatsapp media type) → 3 */
  main [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* Settings 2-column nav layout: 260px sidebar + content → stack */
  main [style*="grid-template-columns: 260px 1fr"],
  main [style*="grid-template-columns: 240px 1fr"],
  main [style*="grid-template-columns: 220px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Settings side-nav (sticky column) → horizontal scrolling chip bar on mobile.
     The inline combo (position:sticky + align-self:flex-start + flex-direction:column)
     is specific to the Settings category list. Without this the nav stays pinned
     to the top and overlaps the content, and the 9 stacked items push the actual
     settings far down the page. */
  main [style*="position: sticky"][style*="align-self: flex-start"][style*="flex-direction: column"] {
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 6px !important;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  main [style*="position: sticky"][style*="align-self: flex-start"][style*="flex-direction: column"]::-webkit-scrollbar { display: none; }
  main [style*="position: sticky"][style*="align-self: flex-start"][style*="flex-direction: column"] > a {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--border-subtle);
  }

  /* Reports / settings header rows — let them wrap so date ranges don't push out */
  main [style*="justify-content: space-between"][style*="align-items: center"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Date inputs (commonly width:140) — make them flexible on mobile */
  main input[type="date"] { width: auto !important; min-width: 0 !important; max-width: 45% !important; flex: 1 !important; }
  /* Reports date-picker row wraps cleanly */
  main [style*="display: flex"][style*="align-items: center"][style*="gap: 8"]:has(> input[type="date"]) { flex-wrap: wrap !important; width: 100%; }

  /* All KPI/stat cards: ensure they don't force min-width via children */
  main .zw-card { min-width: 0 !important; }
  main .zw-card svg { max-width: 100%; }

  /* Sparklines and similar fixed-width chart children: cap to container */
  main .zw-card [style*="margin-left: auto"] { max-width: 60%; }

  /* Cards with desktop padding → reduce */
  main [style*="padding: 20px"][style*="card"],
  main .zw-card[style*="padding: 20px"],
  main .zw-card[style*="padding:20"] {
    padding: 14px !important;
  }

  /* Search bar 360px → full width */
  main [style*="width: 360px"] {
    width: 100% !important;
  }

  /* maxWidth constraints that fight mobile width */
  main [style*="max-width: 760px"],
  main [style*="max-width: 900px"],
  main [style*="max-width: 1100px"],
  main [style*="max-width: 800px"] {
    max-width: 100% !important;
  }

  /* Tables: wrap in horizontal scroll automatically */
  main .zw-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 12px;
    background: var(--bg-2);
    -webkit-overflow-scrolling: touch;
  }
  main .zw-table thead, main .zw-table tbody { display: table; width: 100%; min-width: 600px; }
  main .zw-table th { font-size: 10px !important; padding: 9px 10px !important; }
  main .zw-table td { font-size: 12px !important; padding: 11px 10px !important; }

  /* ─── Modals: turn covering "padding: 48px 24px" overlays into sheets ── */
  /* Generic full-cover backdrop with padding → sheet from bottom */
  [style*="position: fixed"][style*="inset: 0"][style*="padding: 48px 24px"],
  [style*="position: fixed"][style*="inset: 0px"][style*="padding: 48px 24px"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  /* The inner modal card → fills width, rounded top corners only */
  [style*="position: fixed"][style*="inset: 0"][style*="padding: 48px 24px"] > div,
  [style*="position: fixed"][style*="inset: 0px"][style*="padding: 48px 24px"] > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 18px 18px 0 0 !important;
    animation: zw-sheet-up .28s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -12px 40px rgba(0,0,0,0.6) !important;
  }

  /* Centered modals (alignItems: center) → also become bottom sheets */
  [style*="position: fixed"][style*="inset: 0"][style*="align-items: center"][style*="justify-content: center"]:not([style*="z-index: 200"]) {
    align-items: flex-end !important;
  }
  [style*="position: fixed"][style*="inset: 0"][style*="align-items: center"][style*="justify-content: center"]:not([style*="z-index: 200"]) > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    animation: zw-sheet-up .28s cubic-bezier(.32,.72,0,1);
  }

  /* Offline queue panel: was top:70 left:50% transform — make it a sheet */
  [style*="position: absolute"][style*="top: 70px"][style*="left: 50%"] {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 80dvh !important;
    animation: zw-sheet-up .28s cubic-bezier(.32,.72,0,1);
  }

  /* Full-screen receipt modal (z-index 1000 + bg-0 background) — keep fullscreen but pad top safe area */
  [style*="position: fixed"][style*="inset: 0"][style*="z-index: 1000"][style*="background: var(--bg-0)"] {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  /* ─── Cards in lists: round + subtle shadow → app-like card feel ── */
  main .zw-card {
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  }

  /* ─── Inputs / buttons feel ── */
  .zw-input {
    font-size: 16px !important;  /* prevent iOS zoom on focus */
    border-radius: 12px !important;
    padding: 12px 14px !important;
  }
  .zw-btn {
    border-radius: 12px !important;
    font-size: 14px !important;
  }
  .zw-btn.primary {
    box-shadow: 0 4px 14px rgba(20, 180, 102, 0.28);
  }

  /* Sticky CTA: any button at .zw-card bottom looks better full-width */
  main .zw-btn.primary[style*="width: 100%"],
  main .zw-btn.primary.lg[style*="width: 100%"] {
    height: 50px !important;
    font-size: 15px !important;
  }

  /* ─── Headings & H1 desktop — scale down ── */
  main h1[style*="font-size: 22px"], main h1[style*="font-size: 26px"] { font-size: 19px !important; }
  main h2[style*="font-size: 18px"] { font-size: 16px !important; }

  /* ─── Sidebar (aside) hidden by default on mobile (shell already does this with grid) ── */

  /* ─── POS specific tweaks ── */
  /* Product grid: smaller minmax so 2 columns fit comfortably */
  main [style*="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))"],
  main [style*="grid-template-columns: repeat(auto-fill, minmax(148px, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  main [style*="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))"],
  main [style*="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* POS cart sidebar — handled above via :nth-child(2) on the outer grid. */

  /* Reduce default screen container vertical padding to fit small phones */
  main > div > [style*="display: flex"][style*="flex-direction: column"][style*="height: 100%"] {
    height: auto !important;
    min-height: 100%;
  }

  /* ─── Drawer-style navigation: pretty animation ── */
  /* Already implemented via inline slideInRight — boost shadow */

  /* ─── Switchers row stretch on tiny screens ── */
  .zw-mobile-bottomnav button > div {
    transition: background .15s, transform .12s;
  }

  /* Touch targets: language/country/small buttons get a comfortable ≥40px tap
     height on mobile (were 36px — below the ~44px guideline). */
  .zw-btn.sm { min-height: 40px; }

  /* Reduce ambient padding of the offline banner */
  main [style*="background: rgba(239,68,68,0.1)"][style*="padding: 7px 20px"] {
    padding: 9px 14px !important;
    font-size: 11.5px !important;
  }

  /* ─── Action sheet / native polish keyframes ── */
  /* (defined globally below in @keyframes) */
}

/* ── Sheet up animation, share across mobile + desktop drawers ── */
@keyframes zw-sheet-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes zw-fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

/* ── Tablet (768–1023): keep desktop but tighter ── */
@media (min-width: 768px) and (max-width: 1023px) {
  main [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  main [style*="grid-template-columns: 1fr 420px"] {
    grid-template-columns: 1fr 340px !important;
  }
  main [style*="padding: 24px"] {
    padding: 18px !important;
  }
}

/* ── Hide scrollbars on mobile webview but keep functionality ── */
@media (max-width: 767px) {
  main::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
}

/* ── Pull-to-refresh visual hint (decorative, doesn't block) ── */
@media (max-width: 767px) {
  main {
    overscroll-behavior-y: contain;
  }
}

/* ── Small phone: even tighter (≤380px) ── */
@media (max-width: 380px) {
  main [style*="grid-template-columns: repeat(4, 1fr)"],
  main [style*="grid-template-columns: repeat(3, 1fr)"],
  main [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  main [style*="padding: 24px"] { padding: 12px !important; }
}

/* ── Notch / safe area: pad top of every fixed top element ── */
@supports (padding: env(safe-area-inset-top)) {
  .zw-mobile-topbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important; }
}