/* Phone-width rules shared by every layout (_Layout, _StaffLayout, _CustomerLayout).

   Loaded LAST in each layout, after the page-scoped Styles section, so a rule here wins over
   a page sheet at equal specificity. Plain CSS for the same reason as app-shell.css: there is
   no Node toolchain in the build, so a new Tailwind utility would not exist in app.css.

   Scope is deliberately narrow — only what made a screen overflow or cramp at 360-414px.
   Desktop and tablet are untouched: everything below sits inside a max-width query. */

/* Nothing on a page may widen the document past the viewport. A wide table or tab row keeps
   its own horizontal scroll (its wrapper is overflow-x:auto); this only stops strays — chiefly
   an absolutely positioned .app-sr-only inside a scrolled table header, which escapes its
   scroller and stretched /Staff/Team, /Staff/Enquiries and the invoice page to ~650px.
   clip, not hidden: hidden would make <main> a scroll container and break position:sticky. */
.app-main-content,
body > main {
  overflow-x: clip;
}

/* .app-table-container is overflow:hidden in app.css, so a table wider than its card lost its
   right-hand columns with no way to reach them — Invoices, Wallet Receipts, Units, Visitors,
   Payments and every other list table on a phone or narrow tablet. It scrolls sideways
   instead. Still a clipping box, so the rounded corners hold, and it was already the
   scroll container for any sticky header cell, so nothing sticky changes. */
.app-table-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* The clip above only reaches elements whose containing block is inside <main>. The
   visually-hidden header labels (.rpt-sr, .enq-sr, .app-sr-only …) are position:absolute
   with no positioned ancestor, so they were placed against the viewport at the far end of a
   sideways-scrolling table and still widened the page. A positioned table keeps them inside
   the table's own scroller. Sticky header cells are unaffected — they are th, not table. */
.app-main-content table,
body > main table {
  position: relative;
}

/* reports-board.css sizes toolbar controls with flex: 1 1 45% below 1100px so two share a
   row. Inside a form field (a flex COLUMN) that basis became a height, and the Profession
   picker on Create/Edit Customer collapsed to ~20px on phones and tablets alike. In a field
   it is simply full width at its own 42px. */
.app-field > .rpt-control { flex: 0 0 auto; width: 100%; }

@media (max-width: 639.98px) {

  /* ---------------------------------------------------------------- Page headers */

  /* Title on top, actions below at full width. Some page sheets re-declare the header as a
     row; on a phone the action button then ran off the right edge (Customers). */
  .app-page-header {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
  }
  .app-page-header > * { flex: 0 0 auto; min-width: 0; max-width: 100%; }
  .app-page-header > .rpt-action,
  .app-page-header > a.app-btn-primary,
  .app-page-header > button.app-btn-primary { width: 100%; }
  .app-page-header > div:last-child:not(.app-page-title) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .app-page-title { align-items: flex-start; }
  .app-page-title h1 { font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }

  /* ---------------------------------------------------------------- Tabs & switches */

  /* Sub-tab rows (Reports → Financial / Customers / Plans) scroll sideways instead of
     widening the page. */
  .app-nav-tabs,
  .app-subtab-bar,
  .app-status-tabs {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-nav-tabs::-webkit-scrollbar,
  .app-subtab-bar::-webkit-scrollbar,
  .app-status-tabs::-webkit-scrollbar { display: none; }
  .app-nav-tab,
  .app-nav-tab-active { flex-shrink: 0; white-space: nowrap; }

  /* Customer portal's scrolling tab strip under the header pill: "My Plan" broke onto two
     lines and squeezed its neighbours. Keep each tab on one line and let the strip scroll. */
  .crextio-nav-tab,
  .crextio-nav-tab-active { flex-shrink: 0; white-space: nowrap; }

  /* Segmented pickers (Period: Today / 7 days / Month …) wrap onto a second line. */
  .app-view-switch { flex-wrap: wrap; max-width: 100%; }
  /* …and the options share each row, so the one that wraps ("This FY", "This month")
     fills its line instead of sitting alone beside a blank box (Discounts, Wallet). */
  .app-view-switch > .app-view-switch-btn { flex: 1 1 auto; justify-content: center; text-align: center; }

  /* ---------------------------------------------------------------- Filter bars & forms */

  /* Each filter takes the full row; side-by-side fields at 375px left ~120px inputs. */
  .app-filter-bar > .app-field,
  .app-filter-bar > div,
  .rpt-filterbar > * {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
  .app-filter-bar input,
  .app-filter-bar select,
  .rpt-filterbar input,
  .rpt-filterbar select { width: 100%; max-width: 100%; }

  /* Report toolbars: the From — To date pair takes a whole row and its two inputs share it,
     instead of running past the card's right edge (Reports → Financial). */
  .rpt-range { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .rpt-range input { flex: 1 1 0; min-width: 0; width: auto; }

  /* 16px stops iOS Safari zooming the page whenever a field takes focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }

  /* Form action rows: a button keeps its label on one line and grows to fill the row; when
     two no longer fit side by side the second drops below, each still full width. Before,
     "Create Visitor Pass" and "Save Changes" broke over two and three lines. */
  .app-form-actions, .aod-form-actions, .rv-actions, .pf-actions, .nb-actions,
  .inv-actions, .enq-actions, .vp-actions, .sd-actions, .fd-actions {
    flex-wrap: wrap;
  }
  .app-form-actions > :is(a, button), .aod-form-actions > :is(a, button),
  .rv-actions > :is(a, button), .pf-actions > :is(a, button), .nb-actions > :is(a, button),
  .inv-actions > :is(a, button), .enq-actions > :is(a, button), .vp-actions > :is(a, button),
  .sd-actions > :is(a, button), .fd-actions > :is(a, button) {
    flex: 1 1 auto;
    white-space: nowrap;
    justify-content: center;
  }

  /* Form grids collapse to one column. */
  .app-form-grid,
  .app-form-row { grid-template-columns: minmax(0, 1fr) !important; }

  /* ---------------------------------------------------------------- Cards & tables */

  .app-card,
  .app-section { min-width: 0; max-width: 100%; }

  /* Telemetry tiles (_TelemetryStrip) sit two-up on a phone. The figure shared its row with
     the footnote, so money values cut to "₹24,5…". Figure on its own line, note beneath. */
  .app-stat-tile { min-width: 0; }
  .app-stat-tile-foot { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .app-stat-tile-value { font-size: 1.375rem; max-width: 100%; }
  /* The untinted variant of the same strip (.app-stat-card, Tailwind-built row). */
  .app-stat-card { min-width: 0; }
  .app-stat-card > .flex.items-baseline { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .app-stat-card > .flex.items-baseline > .text-2xl { font-size: 1.375rem; max-width: 100%; }

  /* Long unbroken values (emails, invoice numbers, GSTINs) in definition lists wrap instead
     of overflowing. Not applied to table cells: "anywhere" lowers a cell's min-content width
     to one character, and the table then squeezes columns to a letter per line instead of
     scrolling sideways inside its wrapper. */
  .app-main-content dd,
  body > main dd { overflow-wrap: anywhere; }

  /* Tables scroll sideways within their wrapper; a column never narrows below its words.
     Each cell also stays on one line: an auto-layout table squeezed into 340px otherwise
     narrowed every column to its longest word, so a date broke over five lines
     ("Oct / 15, / 2026, / 5:20 / PM") and every row grew 100px tall (Audit Log,
     Notification History, Enquiries, Plan Terms, Fulfillment). */
  .app-table th,
  .app-table td { word-break: normal; overflow-wrap: normal; white-space: nowrap; }
  /* An empty table's single full-width row: the message wraps, and it is pinned to the
     visible part of the scroller instead of centring across the full 700px table, where
     "No discounts here yet." sat half off-screen (Discount Codes). */
  .app-table td[colspan] { white-space: normal; }
  .app-table td[colspan] > .app-empty-state {
    position: sticky;
    left: 0;
    width: calc(100vw - 5rem);
    max-width: 100%;
  }
  .app-table :is(.app-badge, .app-badge-success, .app-badge-warning, .app-badge-danger,
                 .app-badge-info, .app-badge-neutral, .app-badge-brand) { white-space: nowrap; }

  /* ---------------------------------------------------------------- Modals & drawers */

  .app-modal-panel {
    width: calc(100% - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    padding: 1.25rem;
  }

  /* ---------------------------------------------------------------- Media */

  img,
  video,
  canvas { max-width: 100%; height: auto; }
}