/* Customized by Prashant
   Shared mobile rules for every backoffice layout (main, auth, landing, setup).
   Loaded once from each layout head, right after app.css. Everything that changes
   layout sits inside a max-width query, so desktop renders exactly as before.
   Source: mobile responsive audit 2026-10-30 (storage/shared-logs/discoveries). */

/* Customized by Prashant
   Android Chrome boosts px text when text-size-adjust is auto (font boosting), so the
   owner's Samsung showed bigger text than any simulator. 100% keeps the sizes we set. */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Customized by Prashant
   One height for the top bar and one for the phone tab bar. Full-height app pages size
   themselves from these instead of hard-coded numbers. --app-vh is the visible screen:
   100vh on Android Chrome is the screen WITHOUT the address bar, so a 100vh page that
   cannot scroll hides its bottom ~56px under the bar. 100dvh is what is really visible. */
:root {
  --tabbar-base: 60px;
  --tabbar-h: calc(var(--tabbar-base) + env(safe-area-inset-bottom, 0px));
  --app-vh: 100vh;
}
@supports (height: 100dvh) { :root { --app-vh: 100dvh; } }
@media (max-width: 640px) {
  /* Customized by Prashant
     Tab bar: one height variable, also used for the page's bottom padding, so the last
     control on a page never sits under the bar (b2c/settings textarea, finance/settings). */
  .m-tabbar { height: var(--tabbar-h) !important; box-sizing: border-box; }
  .m-tab { font-size: 11px !important; min-width: 0; }
  /* 11px labels on a 313px screen (115% text): "My Booking" broke onto two lines. One line,
     a slightly narrower centre slot, and an ellipsis only if it still cannot fit. */
  .m-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .m-fabslot { width: 58px !important; }
  body.has-mtabbar .page-content { padding-bottom: calc(var(--tabbar-h) + 24px) !important; }

  /* Customized by Prashant
     Full-height app pages (WhatsApp chat, email inbox) are apps with their own composer
     at the bottom: the tab bar covered the send/mic button. Hide the bar there, like the
     booking flows already do; the menu button in the top bar still opens every module. */
  body:has(.wa-crm) #mTabbar,
  body:has(.email-app) #mTabbar,
  body:has(.mtg-live) #mTabbar { display: none !important; }
  body.has-mtabbar:has(.wa-crm) .page-content,
  body.has-mtabbar:has(.email-app) .page-content { padding-bottom: 0 !important; }

  /* Customized by Prashant
     Tap targets: breadcrumb links, the bell and the tenant switch were 20-32px tall.
     40px boxes; the negative margin keeps the breadcrumb row where it was. */
  .adv-crumb .adv-crumb__item { min-height: 40px; min-width: 40px; justify-content: center; margin-top: -10px; margin-bottom: -10px; }
  .topbar .notif-bell,
  .topbar #tenantSwitcherToggle,
  .topbar .topbar-toggle,
  .topbar .nsr-icon-btn { min-width: 40px !important; min-height: 40px !important; justify-content: center; }
  .topbar .notif-bell { width: 40px !important; height: 40px !important; }

  /* Customized by Prashant
     Shared header rule: the title block shrinks (ellipsis) instead of squeezing the
     buttons off the screen; action groups wrap under the title. */
  .page-header { flex-wrap: wrap; min-width: 0; }
  .page-header > * { min-width: 0; max-width: 100%; }
  .page-header .page-title,
  .page-header h1 { overflow-wrap: anywhere; }

  /* Customized by Prashant
     Tab rows and segmented controls scroll sideways instead of running off the screen
     (b2b/kyc tabs, b2b insurance/cars/visa trip tabs, finance period switch). */
  .page-content .tabs,
  .page-content .nav-tabs,
  .page-content .trip-tabs,
  .page-content .fx-seg,
  .page-content [role="tablist"] {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-content .tabs::-webkit-scrollbar,
  .page-content .nav-tabs::-webkit-scrollbar,
  .page-content .trip-tabs::-webkit-scrollbar,
  .page-content .fx-seg::-webkit-scrollbar,
  .page-content [role="tablist"]::-webkit-scrollbar { display: none; }
  .page-content .tabs > *,
  .page-content .nav-tabs > *,
  .page-content .trip-tabs > *,
  .page-content .fx-seg > *,
  .page-content [role="tablist"] > * { flex: 0 0 auto !important; white-space: nowrap; }

  /* Customized by Prashant
     Two-column grids stack on a phone. minmax(0,1fr) (not 1fr) so a wide table inside
     a column cannot stretch the column past the screen; the table scrolls instead. */
  .itn-grid,
  .mux-sup-twocol,
  .mux-sup-split,
  .fx-grid--2,
  .grid-2,
  .two-col,
  .form-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .mux-sup-twocol > *,
  .mux-sup-split > *,
  .fx-grid > *,
  .grid-2 > *,
  .two-col > * { min-width: 0; }

  /* Customized by Prashant
     .mob-shrink is set by mobile.js on grid items (and items of a one-line flex row) that
     would otherwise push the page past the screen edge: min-width:auto keeps them as wide
     as their widest content, min-width:0 lets them fit the column. */
  .mob-shrink { min-width: 0 !important; }
  .mob-grid1 { grid-template-columns: minmax(0, 1fr) !important; }
  .mob-item { flex: 1 1 140px !important; min-width: 0; }
  .mob-item-text { flex-shrink: 0 !important; max-width: 100%; }
  .mob-wrap { flex-wrap: wrap !important; row-gap: .4rem; }
  /* Long unbroken strings (references, e-mails, keys) break inside their box instead of
     running past the screen. break-word only breaks when nothing else fits. */
  .page-content { overflow-wrap: break-word; }
  /* A fixed min-width wider than the parent (300px cards, 280px search boxes) becomes the
     full width of the parent instead, so the item takes its own line. */
  .mob-fullw { min-width: 100% !important; max-width: 100%; box-sizing: border-box; }

  /* Customized by Prashant
     Provider catalogue pages (settings book-keeping, CRM, WhatsApp/SMS providers, payment
     gateways, channel managers): fixed 280px header and search widths and side-by-side card
     buttons ran past the screen. Inline styles there, so !important. */
  .ic-head-main { min-width: 0 !important; flex-basis: 100% !important; }
  .ic-search { flex: 1 1 100% !important; }
  .ic-search > div { flex: 1 1 auto; min-width: 0; }
  .ic-search-input { min-width: 0 !important; width: 100%; box-sizing: border-box; }
  .ic-card { flex-wrap: wrap; }
  .ic-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }

  /* Customized by Prashant
     Search forms (B2B insurance, cars, visa and the other product tabs): the stacked fields
     sat right-aligned at 90-150px because the small-field minimum beat the full-width rule.
     Every field takes the full width of the form on a phone. */
  .page-content .search-bar { align-items: stretch; }
  .page-content .search-bar > .sb-field { min-width: 0 !important; width: 100%; flex: 0 0 auto; }
  /* The field icon (pin, calendar) sat on top of the first letters: a phone rule reset the
     input padding that leaves room for it. */
  .page-content .sb-control .sb-icon ~ .form-control { padding-left: 2.25rem !important; }

  /* Customized by Prashant
     Tables: mobile.js wraps any table wider than its box in .mob-tbl-x. */
  .mob-tbl-x { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-content video,
  .page-content iframe { max-width: 100%; }
  .page-content pre { max-width: 100%; overflow-x: auto; }
  /* Form fields never wider than their box (file pickers and fixed-size inputs ran off the edge). */
  .page-content input:not([type=checkbox]):not([type=radio]),
  .page-content select,
  .page-content textarea { max-width: 100%; }
}