/* ---------------------------------------------------------------------------
 * v110.2 — phone & tablet layout for the ERP web app (billing.poojaloka.com).
 *
 * The app was laid out for the shop PCs: a fixed 256px blue sidebar beside the
 * page. On a phone (the salesperson's New Bill / Find Product, a manager on the
 * move) that sidebar took most of the screen and squeezed every page into a
 * strip. Below 1024px the sidebar now slides in from the left as a menu
 * (☰ button, rv-responsive.js); the page gets the full width; tables scroll
 * sideways inside their card instead of being cut off.
 *
 * Desktop (1024px and wider — every shop PC and laptop) is unchanged.
 * ------------------------------------------------------------------------- */

.rv-burger,
.rv-nav-backdrop {
  display: none;
}

@media (max-width: 1023.98px) {
  /* The app shell: full dynamic viewport height (mobile URL bars). */
  #root > div.h-screen.w-screen {
    height: 100vh;
    height: 100dvh;
    width: 100%;
  }

  /* Sidebar → slide-in drawer. */
  #root > div.h-screen > aside.w-64 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: min(17.5rem, 86vw);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
  }
  body.rv-nav-open #root > div.h-screen > aside.w-64 {
    transform: none;
  }
  #root > div.h-screen > aside.w-64 nav a {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .rv-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0.45);
  }
  body.rv-nav-open .rv-nav-backdrop {
    display: block;
  }
  body.rv-nav-open {
    overflow: hidden;
  }

  /* ☰ button — sits over the left end of the page header. */
  body.rv-has-shell .rv-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 6px;
    left: 8px;
    z-index: 998;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #1e39c2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.rv-has-shell .rv-burger:active {
    background: #eef2ff;
  }
  body.rv-has-shell .rv-burger svg {
    width: 24px;
    height: 24px;
  }

  /* Page header: room for ☰, title truncates, actions stay on one line. */
  #root > div.h-screen > div.flex-1 > header.h-16 {
    height: 56px;
    padding-left: 60px;
    padding-right: 10px;
    gap: 8px;
  }
  #root > div.h-screen > div.flex-1 > header.h-16 > div:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
  }
  #root > div.h-screen > div.flex-1 > header.h-16 > div:last-child {
    flex-shrink: 0;
    gap: 6px;
    min-width: 0;
  }
  #root > div.h-screen > div.flex-1 > header.h-16 select {
    min-width: 0 !important;
    max-width: 100%;
    flex: 1 1 auto;
    text-overflow: ellipsis;
  }

  /* Page body. */
  #root > div.h-screen > div.flex-1 > main {
    padding: 14px !important;
    padding-bottom: 96px !important; /* clear of the floating Voice Billing / Rentals buttons */
    -webkit-overflow-scrolling: touch;
  }
  main .card {
    padding: 1rem;
  }
  main h1.text-2xl,
  main h1.text-3xl {
    font-size: 1.35rem;
    line-height: 1.75rem;
  }
  /* Page title row with buttons on the right: let the buttons drop below. */
  main div.flex.justify-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  main .mb-6 {
    margin-bottom: 1rem;
  }

  /* Tables scroll sideways inside their card instead of being clipped. */
  main .overflow-hidden:has(> table),
  main .card:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  main .rv-x-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  main select,
  main input,
  main textarea {
    max-width: 100%;
  }
  main [class*="min-w-["]:not(td):not(th) {
    min-width: 0 !important;
  }
  main table th,
  main table td {
    white-space: nowrap;
  }
  main table td input,
  main table td select {
    min-width: 4.5rem;
  }

  /* Tabs rows scroll instead of wrapping into a tall block. */
  main .border-b.flex:not(.flex-wrap) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  main .border-b.flex:not(.flex-wrap) > * {
    flex-shrink: 0;
  }

  /* Two-part pages (bill + checkout, list + detail): one column, checkout
     below the bill instead of squeezed beside it. */
  main .grid.bill-grid,
  main .grid.grid-cols-3:has(> .col-span-2),
  main .grid.grid-cols-4:has(> .col-span-3),
  main .grid.grid-cols-4:has(> .col-span-2),
  main .grid.grid-cols-5:has(> .col-span-3),
  main .grid.grid-cols-12:has(> [class*="col-span-"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto;
  }
  main .grid.bill-grid > *,
  main .grid:has(> [class*="col-span-"]) > [class*="col-span-"] {
    grid-column: auto !important;
  }
  main .sticky.top-0 {
    position: static;
  }

  /* Header actions (branch picker etc.) shrink instead of running off-screen. */
  #root > div.h-screen > div.flex-1 > header.h-16 > div:last-child {
    overflow: hidden;
  }
  #root > div.h-screen > div.flex-1 > header.h-16 label,
  #root > div.h-screen > div.flex-1 > header.h-16 > div:last-child > div {
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Pop-up dialogs fit the screen. */
  .fixed.inset-0 > div[class*="max-w-"] {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

@media (max-width: 639.98px) {
  /* Phones: the shop name is already in the menu; give the branch picker the room. */
  #root > div.h-screen > div.flex-1 > header.h-16:has(select) > div:first-child {
    display: none;
  }
  #root > div.h-screen > div.flex-1 > header.h-16:has(select) > div:last-child {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  #root > div.h-screen > div.flex-1 > header.h-16 > div:last-child > label {
    display: none;
  }
}

@media (max-width: 767.98px) {
  /* Fixed-column grids (no sm:/md: version) fold down on phones. */
  main .grid.grid-cols-3:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]),
  main .grid.grid-cols-4:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]),
  main .grid.grid-cols-5:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]),
  main .grid.grid-cols-6:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main .grid > * {
    min-width: 0;
  }
  main .flex.gap-3:not(.flex-col):not(.flex-wrap):not(.items-center),
  main .flex.gap-4:not(.flex-col):not(.flex-wrap):not(.items-center) {
    flex-wrap: wrap;
  }

  /* Text-size floor so iOS doesn't zoom into a field when it's tapped. */
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea {
    font-size: 16px;
  }

  /* Floating buttons: smaller and tucked into the corners. */
  #rvr-fab {
    right: 10px !important;
    bottom: 10px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }
  main .fixed.bottom-5.left-5 {
    left: 10px;
    bottom: 10px;
    padding: 6px 10px;
  }
  .fixed.bottom-5.right-5 {
    right: 10px;
    left: 10px;
    bottom: 64px;
  }
}

@media (max-width: 420px) {
  main .grid.grid-cols-3:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]).rv-fold-1,
  main .grid.grid-cols-2.rv-fold-1 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .rv-burger,
  .rv-nav-backdrop {
    display: none !important;
  }
}

/* v110.4 — Sales Billing item list: its own scrolling box on PCs/laptops so the
   newest item is always in view (sized and scrolled by rv-billscroll.js). */
@media (min-width: 1024px) {
  .bill-items.rv-bill-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .bill-items.rv-bill-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 #e2e8f0;
  }
}
.bill-items tr.rv-row-flash > td {
  animation: rv-row-flash 1.2s ease-out;
}
@keyframes rv-row-flash {
  0%,
  35% {
    background-color: #fef3c7;
  }
  100% {
    background-color: transparent;
  }
}
@media print {
  .bill-items.rv-bill-scroll {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ---------------------------------------------------------------------------
 * v110.10 — every page and pop-up fits phones and tablets.
 * A page-by-page check at 360 / 414 / 768 / 1024 px found these things still
 * pushing the page sideways; each rule below fixes one kind of them.
 * ------------------------------------------------------------------------- */

/* Pop-up forms on every screen size: a field never pokes out of its grid cell
   (a long branch / product name in a drop-down used to make it wider than the
   pop-up). */
.fixed.inset-0 .grid > * {
  min-width: 0;
}
.fixed.inset-0 .grid > div > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fixed.inset-0 .grid > div > select,
.fixed.inset-0 .grid > div > textarea,
.fixed.inset-0 form.grid > div > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fixed.inset-0 form.grid > div > select {
  width: 100%;
}
.fixed.inset-0 input,
.fixed.inset-0 select,
.fixed.inset-0 textarea {
  max-width: 100%;
  min-width: 0;
}

/* Several bills (up to 10): one row that scrolls sideways on small screens. */
@media (max-width: 767.98px) {
  .rv-billtabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .rv-billtabs > * {
    flex: 0 0 auto;
  }
}

@media (max-width: 1023.98px) {
  /* The ☰ button never sits on top of an open pop-up. */
  body:has(> .fixed.inset-0) .rv-burger {
    display: none !important;
  }

  /* Filter bars (Branch / From / To / Search …): each part may shrink to the
     screen, and a drop-down with a long branch name stops at the edge. */
  main .flex-wrap > * {
    max-width: 100%;
    min-width: 0 !important; /* some cards carry an inline min-width for the shop PCs */
  }
  main .flex-wrap > .card {
    overflow-x: auto;
  }
  /* "flex-1" parts of a wrapping row keep a usable width and wrap instead of
     being squeezed to a sliver beside their neighbours. */
  main .flex-wrap > .flex-1,
  main .flex-wrap > [class*="min-w-["] {
    flex: 1 1 14rem;
  }
  main .flex-wrap > div > select,
  main .flex-wrap > div > input:not([type="checkbox"]):not([type="radio"]) {
    max-width: 100%;
  }

  /* A search box / "Verify" / "+ Add" field with its button: the field shrinks
     and the button drops below when there is no room. */
  main .flex:not(.flex-col):has(> input),
  main .flex:not(.flex-col):has(> select),
  main .flex:not(.flex-col):has(> div > input),
  .fixed.inset-0 .flex:not(.flex-col):has(> input),
  .fixed.inset-0 .flex:not(.flex-col):has(> select) {
    flex-wrap: wrap;
  }
  main .flex > input:not([type="checkbox"]):not([type="radio"]),
  main .flex > select,
  .fixed.inset-0 .flex > input:not([type="checkbox"]):not([type="radio"]),
  .fixed.inset-0 .flex > select {
    min-width: 0;
    flex: 1 1 9rem;
  }
  main .flex > button,
  .fixed.inset-0 .flex > button {
    flex-shrink: 0;
  }

  /* A search box with the 🎤 button inside: takes the room it needs and the
     things beside it (a tick box, a button) drop below. */
  main .flex > div.relative:has(> input),
  .fixed.inset-0 .flex > div.relative:has(> input) {
    flex: 1 1 12rem;
    min-width: 0;
  }
  /* Segmented switches (Stock | Moves to shop): never squeezed; the row wraps. */
  main .flex:has(> .flex.rounded-lg.overflow-hidden) {
    flex-wrap: wrap;
  }
  main .flex.rounded-lg.overflow-hidden {
    flex-shrink: 0;
    max-width: 100%;
  }
  main .flex.rounded-lg.overflow-hidden > button {
    white-space: nowrap;
  }

  /* Charts: the hover tooltip stays inside the chart. */
  main .recharts-responsive-container,
  main .recharts-wrapper {
    overflow: hidden;
    max-width: 100%;
  }
}

@media (max-width: 539.98px) {
  /* Phones: pop-up forms are one field per line. */
  .fixed.inset-0 .grid.grid-cols-2:has(> div > label),
  .fixed.inset-0 .grid.grid-cols-3:has(> div > label),
  .fixed.inset-0 .grid.grid-cols-4:has(> div > label),
  .fixed.inset-0 form.grid.grid-cols-2,
  .fixed.inset-0 form.grid.grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .fixed.inset-0 .grid > [class*="col-span-"] {
    grid-column: auto !important;
  }
  /* Pop-ups use the whole width of the phone. */
  .fixed.inset-0.p-4 {
    padding: 8px !important;
  }
  .fixed.inset-0 > div[class*="max-w-"] .p-5 {
    padding: 14px;
  }
}

/* v110.10 — Customer Kiosk header on a narrow screen / tablet: the shop name wraps. */
[class*="min-h-[80vh]"] button.flex {
  max-width: 100%;
}
[class*="min-h-[80vh]"] button.flex > * {
  min-width: 0;
}
[class*="min-h-[80vh]"] button.flex div {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* v110.10 — on every screen size (incl. a 1024px laptop with the sidebar open):
   a row of tabs too long for the page scrolls sideways instead of pushing the page. */
main .border-b.flex:not(.flex-wrap) {
  overflow-x: auto;
  scrollbar-width: thin;
}
main .border-b.flex:not(.flex-wrap) > * {
  flex-shrink: 0;
}