/**
 * BazaarVerse POS — consolidated responsive foundation (v1)
 * Load AFTER pos-mobile-v1…v8. Does not replace legacy files yet.
 *
 * Tiers:
 *   Phone:   max-width 767.98px  (mobile shell + bottom nav)
 *   Tablet:  768px – 1023.98px  (sidebar shell, tablet-safe layouts)
 *   Desktop: min-width 1024px    (preserve existing xl/lg Tailwind intent)
 *
 * Visual identity unchanged — sizing, padding, scroll, and tier behavior only.
 */

/* ================================================================== */
/* Shared tokens                                                       */
/* ================================================================== */
:root {
  --bv-app-header-h: 56px;
  --bv-mobile-nav-h: 60px;

  --bv-space-xs: 0.25rem;
  --bv-space-sm: 0.5rem;
  --bv-space-md: 0.75rem;
  --bv-space-lg: 1rem;

  --bv-page-padding-phone: 0.75rem;
  --bv-page-padding-tablet: 1rem;
  --bv-page-padding-desktop: 1.5rem;

  --bv-control-h-sm: clamp(2rem, 5vw, 2.25rem);
  --bv-control-h-md: clamp(2.25rem, 5.5vw, 2.5rem);

  --bv-font-xs: clamp(0.625rem, 2vw, 0.75rem);
  --bv-font-sm: clamp(0.75rem, 2.4vw, 0.875rem);
  --bv-font-md: clamp(0.875rem, 2.8vw, 1rem);
  --bv-font-lg: clamp(1rem, 3.2vw, 1.125rem);
  --bv-font-xl: clamp(1.125rem, 3.6vw, 1.375rem);
  --bv-font-stat: clamp(1.25rem, 4vw, 1.75rem);

  --bv-radius-control: 0.5rem;

  /* Cart compact tokens (phone + tablet POS mode) */
  --bv-cart-font: clamp(0.6875rem, 2.6vw, 0.8125rem);
  --bv-cart-font-sm: clamp(0.625rem, 2.2vw, 0.75rem);
  --bv-cart-font-name: clamp(0.75rem, 3.1vw, 0.875rem);
  --bv-cart-font-total: clamp(0.75rem, 2.8vw, 0.9375rem);
  --bv-cart-pad-y: clamp(0.25rem, 1.4vw, 0.4375rem);
  --bv-cart-pad-x: clamp(0.5rem, 2.4vw, 0.75rem);
  --bv-cart-gap: clamp(0.1875rem, 1.1vw, 0.3125rem);
  --bv-cart-ctrl-h: clamp(1.75rem, 5.2vw, 2rem);
  --bv-cart-tap: clamp(1.625rem, 5vw, 2rem);
  --bv-cart-footer-max: clamp(9.5rem, 34dvh, 14rem);
}

/* ================================================================== */
/* Typography — titles / stats only (not global body)                  */
/* ================================================================== */
@media (max-width: 1023.98px) {
  main h1.text-2xl,
  main h2.text-2xl,
  main .text-2xl.font-bold,
  main .text-2xl.font-black {
    font-size: var(--bv-font-stat);
    line-height: 1.2;
  }

  main h1.text-xl,
  main h2.text-xl,
  main h3.text-lg.font-bold {
    font-size: var(--bv-font-xl);
    line-height: 1.25;
  }
}

/* ================================================================== */
/* Shared DataTable card                                               */
/* ================================================================== */
@media (max-width: 767.98px) {
  .bv-datatable > .p-6,
  .bv-datatable > div:first-child {
    padding: var(--bv-space-md);
  }

  .bv-datatable h3.text-lg {
    font-size: var(--bv-font-lg);
  }

  .bv-datatable table th,
  .bv-datatable table td {
    padding: 0.625rem 0.75rem;
    font-size: var(--bv-font-sm);
  }

  .bv-datatable .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .bv-datatable table {
    min-width: max-content;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .bv-datatable > .p-6,
  .bv-datatable > div:first-child {
    padding: var(--bv-space-lg);
  }

  .bv-datatable table th,
  .bv-datatable table td {
    padding: 0.75rem 1rem;
  }
}

/* ================================================================== */
/* Shared compact control rows (tabs / filters / chips)                */
/* ================================================================== */
@media (max-width: 1023.98px) {
  .tab-scroll,
  .hide-scrollbar,
  .bv-pos-cat-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tab-scroll > *,
  .hide-scrollbar > *,
  .bv-pos-cat-scroll > * {
    flex-shrink: 0;
  }

  .tab-scroll {
    gap: 0.625rem;
  }

  .tab-scroll > button.whitespace-nowrap {
    font-size: var(--bv-font-sm);
    min-height: var(--bv-control-h-sm);
    padding-bottom: 0.5rem;
  }
}

/* ================================================================== */
/* Phone + tablet POS — Products/Cart mode until desktop (1024+)       */
/* Mirrors pos-mobile-v5/v7/v8 behavior for 768–1023 tablet tier       */
/* ================================================================== */
@media (max-width: 1023.98px) {
  .bv-sales-pos-main {
    flex-direction: column;
  }

  .bv-sales-product-col {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }

  .bv-sales-cart-panel:not(.mobile-cart-slide) {
    display: none;
  }

  .bv-sales-view-cart-fab {
    display: flex;
    bottom: calc(var(--bv-mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 35;
  }

  .bv-sales-pos-main .bv-sales-product-col:not(.hidden) {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
  }

  .bv-sales-cart-panel.mobile-cart-slide {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 50;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(var(--bv-mobile-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  body:has(.bv-sales-cart-panel.mobile-cart-slide) #root main.flex-1.overflow-y-auto {
    overflow: hidden;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-header,
  .bv-sales-cart-panel.mobile-cart-slide > .p-4.border-b.border-gray-100 {
    flex-shrink: 0;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-footer,
  .bv-sales-cart-panel.mobile-cart-slide > .p-4.bg-white.border-t.border-gray-100 {
    flex-shrink: 0;
    overflow-y: auto;
    max-height: var(--bv-cart-footer-max);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
  }

  /* Compact cart line (canonical — supersedes conflicting v7 column stack) */
  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-line {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.375rem;
    row-gap: 0.125rem;
    padding: var(--bv-cart-pad-y) var(--bv-cart-pad-x);
    min-width: 0;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-line-top {
    grid-column: 1 / 2;
    grid-row: 1;
    margin-bottom: 0;
    min-width: 0;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-line-top > span.w-5,
  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-line-top .bv-sales-cart-remove {
    display: none;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-line-name {
    padding-right: clamp(4rem, 26vw, 6rem);
    font-size: var(--bv-cart-font-name);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    min-width: 0;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-line-total {
    position: absolute;
    top: var(--bv-cart-pad-y);
    right: var(--bv-cart-pad-x);
    font-size: var(--bv-cart-font-total);
    font-weight: 700;
    text-align: right;
    max-width: clamp(4.5rem, 30vw, 6.5rem);
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-line-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0;
    padding-left: 0;
    gap: var(--bv-cart-gap);
    min-width: 0;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-price { order: 1; }
  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-qty { order: 2; }
  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-discount { order: 3; }
  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-remove-mobile {
    order: 4;
    margin-left: auto;
    min-width: var(--bv-cart-tap);
    min-height: var(--bv-cart-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .bv-sales-cart-panel.mobile-cart-slide .bv-sales-cart-qty button {
    min-width: var(--bv-cart-tap);
    min-height: var(--bv-cart-tap);
  }
}

/* Tablet-only: hide bottom-nav FAB offset when sidebar shell (no bottom nav) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .bv-sales-view-cart-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .bv-sales-cart-panel.mobile-cart-slide {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ================================================================== */
/* Tablet tier — shell padding, forms, inventory tables                */
/* ================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body:not(:has(#signup-btn)) #root main.flex-1.overflow-y-auto {
    padding-bottom: calc(var(--bv-space-lg) + env(safe-area-inset-bottom, 0px));
  }

  /* Settings / dense forms: cap 3-col md grids at 2 cols on tablet */
  main .md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Inventory wide tables — preserve readable columns + swipe */
  .bv-inv-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .bv-inv-table {
    min-width: 880px;
  }

  /* Reports / ledger tables inside main */
  main .overflow-x-auto table {
    min-width: max-content;
  }
}

/* ================================================================== */
/* Modals — short viewport + safe area (phone + tablet)                */
/* ================================================================== */
@media (max-width: 1023.98px) {
  .fixed.inset-0.flex.items-center > div,
  .fixed.inset-0[class*="items-center"] > div,
  .fixed.inset-0[class*="justify-center"] > div {
    max-height: min(92dvh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ================================================================== */
/* Desktop ≥1024 — preserve existing lg: POS split + DataTable density */
/* ================================================================== */
@media (min-width: 1024px) {
  .bv-datatable > div:first-child {
    padding: 1.5rem;
  }

  .bv-datatable table th {
    padding: 1rem 1.5rem;
  }
}

/* ================================================================== */
/* Dashboard + Reports chart responsiveness (v1)                       */
/* Phone/tablet stack; desktop preserves side-by-side chart grids.     */
/* ================================================================== */

.bv-dashboard-charts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  min-width: 0;
}

.bv-dashboard-chart-sales,
.bv-dashboard-chart-category {
  min-width: 0;
}

@media (min-width: 1024px) {
  .bv-dashboard-charts-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .bv-dashboard-chart-sales {
    grid-column: span 3 / span 3;
  }

  .bv-dashboard-chart-category {
    grid-column: span 2 / span 2;
  }
}

.bv-reports-charts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: inherit;
  min-width: 0;
}

.bv-reports-charts-grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .bv-reports-charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bv-chart-wrap {
  width: 100%;
  min-width: 0;
  position: relative;
}

.bv-chart-card-body {
  min-width: 0;
  overflow: visible;
}

.bv-chart-wrap .recharts-wrapper,
.bv-chart-wrap .recharts-surface {
  overflow: visible;
}

.bv-chart-wrap .recharts-tooltip-wrapper {
  z-index: 30;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .bv-chart-wrap-pie .recharts-pie-label-text {
    font-size: 10px;
  }
}