/**
 * POS mobile v6 — global compact controls + horizontal scroll for overflowing rows
 * Mobile-only (≤767.98px). Desktop / tablet ≥768px untouched.
 * Sizing / overflow only — no color, radius, or design-language changes.
 */

@media (max-width: 767.98px) {
  /* ------------------------------------------------------------------ */
  /* Shared horizontal-scroll row (matches category-chip / hide-scrollbar) */
  /* ------------------------------------------------------------------ */
  .tab-scroll,
  .hide-scrollbar,
  .bv-pos-cat-scroll,
  .bv-mobile-hscroll,
  main .flex.gap-3.w-full:has(select):has(input[type="date"]),
  main .border-b.border-gray-100 .flex.items-center.gap-2.flex-wrap,
  main .flex.flex-wrap.gap-3:has(select),
  main .flex.flex-wrap.gap-3:has(input[type="date"]) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tab-scroll::-webkit-scrollbar,
  .hide-scrollbar::-webkit-scrollbar,
  .bv-pos-cat-scroll::-webkit-scrollbar,
  .bv-mobile-hscroll::-webkit-scrollbar,
  main .flex.gap-3.w-full:has(select):has(input[type="date"])::-webkit-scrollbar,
  main .border-b.border-gray-100 .flex.items-center.gap-2.flex-wrap::-webkit-scrollbar,
  main .flex.flex-wrap.gap-3:has(select)::-webkit-scrollbar,
  main .flex.flex-wrap.gap-3:has(input[type="date"])::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Keep children readable — scroll instead of squeeze / clip */
  .tab-scroll > *,
  .hide-scrollbar > *,
  .bv-pos-cat-scroll > *,
  .bv-mobile-hscroll > *,
  main .flex.gap-3.w-full:has(select):has(input[type="date"]) > *,
  main .border-b.border-gray-100 .flex.items-center.gap-2.flex-wrap > *,
  main .flex.flex-wrap.gap-3:has(select) > *,
  main .flex.flex-wrap.gap-3:has(input[type="date"]) > * {
    flex-shrink: 0 !important;
  }

  /* ------------------------------------------------------------------ */
  /* Tab bars — Sales, Purchase, Accounts, Expense, etc.                 */
  /* ------------------------------------------------------------------ */
  .tab-scroll {
    gap: 0.625rem !important; /* overrides v1 gap-8 / 1rem */
    padding-bottom: 0 !important;
  }

  /* Underline / icon tabs (Sales, Expense, etc.) */
  .tab-scroll > button.whitespace-nowrap {
    font-size: 0.8125rem !important;
    gap: 0.375rem !important;
    padding-top: 0.125rem !important;
    padding-bottom: 0.625rem !important;
    min-height: 2.5rem;
  }

  .tab-scroll > button.whitespace-nowrap svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* Pill / segmented tabs (Purchase etc.) */
  .tab-scroll > button.rounded-lg,
  .tab-scroll > button.rounded-full {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.8125rem !important;
    min-height: 2.5rem;
  }

  /* ------------------------------------------------------------------ */
  /* Manage Invoices / list filter rows                                   */
  /* Search stays full-width in flex-col parent; filters scroll below   */
  /* ------------------------------------------------------------------ */
  main .flex.flex-col.gap-3.items-center > .flex-1.relative.w-full {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  main .flex.gap-3.w-full:has(select):has(input[type="date"]) {
    gap: 0.5rem !important;
    width: 100% !important;
    padding-bottom: 0.125rem;
  }

  main .flex.gap-3.w-full:has(select):has(input[type="date"]) > select,
  main .flex.gap-3.w-full:has(select):has(input[type="date"]) > input[type="date"],
  main .flex.gap-3.w-full:has(select):has(input[type="date"]) > button {
    flex: 0 0 auto !important;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    white-space: nowrap;
  }

  main .flex.gap-3.w-full:has(select):has(input[type="date"]) > select {
    min-width: 7.25rem;
  }

  main .flex.gap-3.w-full:has(select):has(input[type="date"]) > input[type="date"] {
    min-width: 9.25rem;
  }

  /* ------------------------------------------------------------------ */
  /* Inventory — category chips + compact filter row                    */
  /* ------------------------------------------------------------------ */
  main .border-b.border-gray-100 .flex.items-center.gap-2.flex-wrap {
    gap: 0.375rem !important;
    padding-bottom: 0.125rem;
  }

  main .border-b.border-gray-100 .flex.items-center.gap-2.flex-wrap > button {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.6875rem !important;
    min-height: 2.5rem;
  }

  main .flex.flex-wrap.gap-3:has(select),
  main .flex.flex-wrap.gap-3:has(input[type="date"]) {
    gap: 0.5rem !important;
    align-items: center;
  }

  /* Search grows but stays in the scroll row with filters */
  main .flex.flex-wrap.gap-3:has(select) > .relative.flex-1,
  main .flex.flex-wrap.gap-3:has(input[type="date"]) > .relative.flex-1 {
    flex: 1 1 12rem !important;
    min-width: 10rem !important;
    width: auto !important;
  }

  main .flex.flex-wrap.gap-3:has(select) > select,
  main .flex.flex-wrap.gap-3:has(input[type="date"]) > select,
  main .flex.flex-wrap.gap-3:has(input[type="date"]) > input[type="date"] {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  /* ------------------------------------------------------------------ */
  /* Catalogue — compact category chips (already scroll via hide-scrollbar) */
  /* ------------------------------------------------------------------ */
  .hide-scrollbar.flex.items-center.gap-2 {
    gap: 0.375rem !important;
  }

  .hide-scrollbar.flex.items-center.gap-2 > button.rounded-full {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    min-height: 2.5rem;
  }

  /* ------------------------------------------------------------------ */
  /* POS category nav chips                                             */
  /* ------------------------------------------------------------------ */
  .bv-pos-cat-scroll {
    gap: 0.375rem !important;
  }

  .bv-pos-cat-scroll > button,
  .bv-pos-cat-scroll > [data-bv-pos-cat] {
    min-height: 2.5rem;
  }

  /* ------------------------------------------------------------------ */
  /* Generic compact filter selects / dates in module toolbars          */
  /* (excludes full-width search inputs and large primary CTAs)         */
  /* ------------------------------------------------------------------ */
  main select.rounded-xl,
  main input[type="date"].rounded-xl {
    min-height: 2.5rem;
  }

  /* Expense date-range chips / secondary filter chips */
  main .flex.flex-wrap.gap-2:has(> button.rounded-full),
  main .flex.flex-wrap.gap-2:has(> button.rounded-lg):not(:has(> button.bg-\[\#5C33F6\])) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 0.375rem !important;
  }

  main .flex.flex-wrap.gap-2:has(> button.rounded-full) > *,
  main .flex.flex-wrap.gap-2:has(> button.rounded-lg):not(:has(> button.bg-\[\#5C33F6\])) > * {
    flex-shrink: 0 !important;
  }

  main .flex.flex-wrap.gap-2:has(> button.rounded-full)::-webkit-scrollbar,
  main .flex.flex-wrap.gap-2:has(> button.rounded-lg):not(:has(> button.bg-\[\#5C33F6\]))::-webkit-scrollbar {
    display: none;
  }
}