/*
 * Mobile — compact, app-like layout
 * =================================
 * Phones only: every rule is inside @media (max-width: 768px), so desktop is exactly
 * as it was. Spacing and arrangement only — every control is still there and does
 * what it did. Loaded after the other stylesheets, before typography.css.
 *
 * Measured at 390 × 844 before this file, the dashboard spent 318px on chrome before
 * the first line of content — 38% of the screen — on every page:
 *
 *   top bar      167px  logo row 60 · search 46 · a THIRD row for Home / Back 50
 *   role switch  128px  + 11px margin, repeating the role the highlighted button shows
 *
 * leaving 467px for the page itself. Home / Back had no slot in the top bar's grid,
 * so they fell onto a row of their own; the role switch spelled out a paragraph the
 * selected button already says.
 */

@media (max-width: 768px) {

  /* ------------------------------------------------------------ 1. top bar */

  /*
   * Two rows instead of three: Home and Back join the logo row, search keeps the
   * second. Every variant platform.css defines (with and without the notification
   * bell and the staff-portal switch) gets the same "nav" slot.
   */
  .dash-layout .topbar {
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-areas: "menu nav logo notif user" "search search search search search";
    row-gap: .4rem;
    column-gap: .4rem;
    padding: .4rem .75rem .5rem;
  }

  /*
   * "Switch to Administrator" / "Switch to Member" is not a band on a phone: it is the
   * first entry of the account menu behind the avatar (portal-switch-menu.js), so the
   * bar keeps its two rows. This rule outranks platform.css's three-row grid for a bar
   * with the switch, and the button itself is hidden here.
   */
  .dash-layout .topbar:has(.topbar-portal-switch) {
    grid-template-areas: "menu nav logo notif user" "search search search search search";
  }

  /* !important: platform.css shows it with display:inline-flex !important. */
  .dash-layout .topbar .topbar-portal-switch {
    display: none !important;
  }

  .dash-layout .topbar .topbar-nav-actions {
    grid-area: nav;
    display: flex;
    gap: .3rem;
    margin: 0;
  }

  .dash-layout .topbar .mobile-topbar-logo {
    justify-self: center;
  }

  .dash-layout .topbar .mobile-topbar-logo img {
    height: 28px;
    width: auto;
  }

  /* 40px: still a comfortable thumb target, 4px less per button across the bar. */
  .dash-layout .topbar .mobile-menu-btn,
  .dash-layout .topbar .topbar-notif-btn,
  .dash-layout .topbar .avatar {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
  }

  .dash-layout .topbar .topbar-home-btn,
  .dash-layout .topbar .topbar-back-btn {
    min-height: 36px;
    height: 36px;
    padding: 0 .55rem;
    border-radius: 10px;
    white-space: nowrap;
  }

  .dash-layout .topbar .search-bar,
  .dash-layout .topbar .dash-search-wrap {
    margin: 0;
  }

  .dash-layout .topbar .search-bar__input {
    min-height: 40px;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 12px;
  }

  /* ------------------------------------------------------- 2. role switch */

  /*
   * The role switch is no longer a band on the page: it moved into the account menu
   * behind the avatar (role-switch.js), which is worth more on a phone than anywhere
   * else — it was 128px of a 844px screen, on every page. The rules that slimmed the
   * band went with it; role-switch.css styles the menu version at every width.
   *
   * Only the spacing the band used to occupy is reclaimed here.
   */
  .roleswitch--menu {
    padding: .55rem .6rem;
  }

  /* --------------------------------------------------------- 3. the page */

  .dash-layout .content {
    padding: .5rem .75rem .75rem;
  }

  .card,
  .sysset__card,
  .members-hub-page,
  .deposit-requests-page {
    padding: .7rem .75rem;
    border-radius: 12px;
  }

  .card {
    margin-bottom: .6rem;
  }

  .sysset-page,
  .newly-page {
    row-gap: .6rem;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    gap: .55rem;
    margin-bottom: .6rem;
  }

  /* Page headings: the icon tile and the gap beside it were sized for a desktop. */
  .newly-page__head {
    gap: .6rem;
    margin-bottom: .1rem;
  }

  .newly-page__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 18px;
    border-radius: 10px;
  }

  .newly-page__sub {
    margin-top: .1rem;
  }

  .card-title {
    margin-bottom: .45rem;
  }

  /* --------------------------------------------------------- 4. forms */

  .form-group {
    margin-bottom: .6rem;
  }

  .form-group label {
    margin-bottom: .25rem;
  }

  .form-row {
    gap: .55rem;
  }

  .filter-toolbar {
    gap: .5rem !important;
    margin-bottom: .55rem !important;
  }

  /* Buttons: 44px for the main action, 36px for small row buttons. */
  .btn {
    min-height: 44px;
    padding-top: .4rem;
    padding-bottom: .4rem;
    border-radius: 11px;
  }

  .btn.btn-sm,
  .btn-sm,
  .action-btns .btn {
    min-height: 36px;
    padding: .25rem .6rem;
    border-radius: 9px;
  }

  /* ------------------------------------------------------ 5. figures & lists */

  /* Headline figure tiles two across, tighter. */
  .role-nav-kpi,
  .deposit-requests-kpi__chip,
  .stat-card {
    padding: .55rem .65rem;
  }

  .table-pagination {
    padding: .5rem 0 0;
    gap: .4rem;
  }

  /*
   * FE-09 — Expenditure (and anything else with a wide table) wraps its table AND the
   * pagination footer together in one `overflow:auto` box, so on a phone a wide table
   * makes that whole box scroll sideways — carrying Prev / Next / Per page out of view
   * with it, reachable only by first scrolling the table itself all the way across.
   * Sticking the footer to the left edge of that scroll box keeps it in reach at
   * whatever scroll position the table is at, with no change to the table or to desktop
   * (this rule is phone-only, and does nothing where a table is narrow enough not to
   * scroll in the first place).
   */
  .table-responsive > .table-pagination,
  [style*="overflow:auto"] > .table-pagination,
  [style*="overflow: auto"] > .table-pagination {
    position: sticky;
    left: 0;
    width: max-content;
    max-width: calc(100vw - 2.5rem);
  }

  /* ------------------------------------------------- 5b. two across
   |
   | Short, full-width blocks stacked one per row waste a phone screen: the statement
   | account chooser was five rows of 34px, the From/To dates two rows of 53px, the
   | balance tiles four rows of 73px. Each of these pairs up.
   |
   | What is NOT paired: table rows (one record per row is the point), a title with
   | its subtitle, paragraphs of policy text, and anything that reads as the primary
   | action — those keep the full width, declared explicitly below.
   --------------------------------------------------------------------------- */

  .member-statements-tabs__list,
  .member-statements-toolbar__grid--dates,
  .member-statements-kpis,
  .member-withdrawals-form-grid,
  .closure-checks-list,
  .deposit-plan-grid,
  .reports-filter-form,
  .member-statements-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    align-items: start;
  }

  .member-statements-tabs__list > *,
  .member-statements-kpis > *,
  .member-withdrawals-form-grid > *,
  .closure-checks-list > *,
  .deposit-plan-grid > *,
  .reports-filter-form > *,
  .member-statements-toolbar__grid--dates > * {
    min-width: 0;
    width: auto;
    margin: 0;
  }

  /* "All accounts" is the default and the widest label, so it keeps its own row. */
  .member-statements-tabs__list > :first-child {
    grid-column: 1 / -1;
  }

  /* Anything that submits keeps the full width — it is the action, not a field. */
  .member-statements-field--actions,
  .reports-field--actions,
  .reports-filter-form > button,
  .reports-filter-form > .btn,
  .member-withdrawals-form-grid > .form-actions {
    grid-column: 1 / -1;
  }

  /*
   * The loan preview figures — interest rate, EMI, total repayable — miss two columns
   * by two pixels: the grid asks for minmax(140px, 1fr) inside a 288px card, where two
   * columns plus the gap need 290px, so all ten figures stack and cost 510px. A 120px
   * floor gets the pair back. !important because that width is set inline by the
   * shared bundle, which this project does not edit.
   */
  #app [style*="minmax(140px"],
  #app [style*="minmax(150px"] {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }

  /* Field pairs the desktop already shows side by side stay side by side here. */
  .form-row,
  .form-row.three {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }

  /* A field holding an address, a long list or a note needs the whole row. */
  .form-row > .form-group:has(textarea),
  .form-row > .form-group--wide {
    grid-column: 1 / -1;
  }

  /* Filter toolbars: search across the top, the narrow filters two across. */
  .filter-toolbar .form-group {
    flex: 1 1 calc(50% - .35rem) !important;
    min-width: 0 !important;
  }

  .filter-toolbar .form-group:has(input[type="search"]),
  .filter-toolbar .form-group:first-child,
  .filter-toolbar .form-group.depamt {
    flex-basis: 100% !important;
  }

  /* Apply ends up alone on the last row, so it may as well be easy to hit. */
  .filter-toolbar .filter-apply-btn,
  .filter-toolbar > .btn {
    flex: 1 1 100%;
  }

  /*
   * The statement list is the one table the app turns into cards on a phone. Seven
   * label/value rows of 52px made a single transaction 366px tall — under three per
   * screen, and 27 of them to scroll through. Two across, a transaction is about
   * half that.
   *
   * "dense" is what makes the order read properly: Reference and Description claim
   * whole rows, and the cell after each one backfills the gap beside its neighbour,
   * giving Date | Type, Reference, Description, Debit | Credit, Balance.
   */
  .member-statements-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    column-gap: .55rem;
  }

  .member-statements-table tbody td[data-label="Reference"],
  .member-statements-table tbody td[data-label="Description"],
  .member-statements-table tbody td[colspan] {
    grid-column: 1 / -1;
  }

  /* Having a whole row, these two can show the rest of the text instead of ending
     in an ellipsis — "EMI installment #12 · LA-IMP…" was hiding the account. */
  #app table.member-statements-table tbody td[data-label="Reference"],
  #app table.member-statements-table tbody td[data-label="Description"],
  #app table.member-statements-table tbody td[data-label="Type"] {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /*
   * These cells are stacked cards here, not table rows, so the uniform 52px row
   * height the tables use elsewhere only adds air: the label is 15px and the value
   * 18px. They size to their content instead, with 38px kept as the floor.
   */
  /* Outranks the uniform `#app table:not(...) tbody td { height: 52px }` in
     data-tables.css, which is written for rows that really are rows. */
  #app table.member-statements-table tbody td {
    height: auto;
    min-height: 38px;
    padding-top: .25rem;
    padding-bottom: .25rem;
  }

  /* --------------------------------------------------------- 6. tab bar */

  /* Native tab bars are 49–56pt; this one was 59px. */
  .mapp-tabbar {
    min-height: 54px;
  }

  .mapp-tab {
    padding-top: .3rem;
    padding-bottom: .25rem;
    /* Room between the icon's pill and its word (mobile-app.css, section 8). */
    gap: 3px;
  }

  .mapp-tab__icon {
    font-size: 18px;
    line-height: 1;
  }
}

/* ---------------------------------------------------------------- tablets */

/*
 * Between the phone rules above and the desktop layout, platform.css collapses
 * .form-row to a single column — so a tablet at 820px gave one 720px-wide field per
 * row, stacked, while both the phone and the desktop show the pair side by side.
 * This is the only rule that reaches above 768px, and it restores the arrangement
 * the row was written for.
 */
@media (min-width: 769px) and (max-width: 1024px) {
  .form-row,
  .form-row.three {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }

  .form-row > .form-group:has(textarea),
  .form-row > .form-group--wide {
    grid-column: 1 / -1;
  }
}