/*
 * Inpi Sumbawm — one shape everywhere, and an app on a phone
 * ==========================================================
 * Loaded after every other stylesheet except typography.css, which keeps the final
 * word on type. This file is shape and space only: how tall a control is, how round
 * its corners are, the gaps between things, how a touch feels, and how a phone lays
 * the shell out. Nothing is hidden for good, moved to another screen, re-worded or
 * recoloured, and no feature changes. (The search row in the phone header folds away
 * while you scroll down and comes straight back when you scroll up; see §7.)
 *
 * What was measured before this file (every sidebar page as administrator and as a
 * member, and the public pages, at 390px and 1440px):
 *
 *   buttons   18px to 104px tall — up to seven heights on one page — with eight corner
 *             radii between them (0, 6, 8, 9, 10, 11, 12px and pills)
 *   inputs    eleven heights: 24, 32, 34, 36, 38, 40, 43, 44, 45, 46 and 48px
 *   touch     up to 85 targets on one phone screen smaller than 40px: member-name
 *             links in list rows, outline buttons at 36px, sortable column headings,
 *             the Permissions checkboxes
 *   chrome    on a phone the header (104px) and tab bar (59px) held a fifth of the
 *             screen at all times; the Statements page's filters stacked into grids
 *             three rows deep; list pages scrolled sideways with no hint they did
 *
 * The system
 *   control   36px on a desktop, 44px on a phone (the touch minimum on both platforms)
 *   small     30px on a desktop, 44px on a phone — small is a desktop idea
 *   corners   8px on controls, 12px on cards and panels; pills stay pills
 */

:root {
  --ui-control: 36px;
  --ui-control-sm: 30px;
  --ui-radius-sm: 8px;
  --ui-radius: 12px;
}

@media (max-width: 768px) {
  :root {
    --ui-control: 44px;
    --ui-control-sm: 44px;
  }
}

/* ---------------------------------------------------------------------------
 | 1. Buttons — one height, one corner, everywhere
 |
 | Padding stays on the sides only: the height is the min-height, so a one-line
 | button is exactly the control height whatever its font, and a two-line button
 | still grows. <button> centres its own content; links and labels styled as
 | buttons need flex to do the same.
 --------------------------------------------------------------------------- */
.dash-layout .btn,
.dash-layout .sysset__btn,
.creq__btn,
.rcx-modal .sysset__btn {
  min-height: var(--ui-control);
  padding-top: .3rem;
  padding-bottom: .3rem;
  border-radius: var(--ui-radius-sm);
  line-height: 1.2;
}

.dash-layout .sysset-tab {
  min-height: var(--ui-control);
  padding-top: .3rem;
  padding-bottom: .3rem;
}

.dash-layout .btn.btn-sm,
.dash-layout .btn-sm,
.dash-layout .sysset__btn--ghost,
.dash-layout .rcx-correct,
.dash-layout .rcx-requested {
  min-height: var(--ui-control-sm);
  padding-left: .75rem;
  padding-right: .75rem;
  border-radius: var(--ui-radius-sm);
}

.dash-layout a.btn,
.dash-layout label.btn,
.dash-layout .rcx-correct,
.dash-layout .rcx-requested {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

/* ---------------------------------------------------------------------------
 | 2. Inputs — the same height as the button beside them
 |
 | Not inside table cells: an inline input there sets the row's height, which the
 | density pass tuned on purpose.
 --------------------------------------------------------------------------- */
.dash-layout .content :is(
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="password"], input[type="url"], input:not([type])
):not(td *),
.dash-layout .content select:not(td *),
.rcx-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select),
.creqm select {
  min-height: var(--ui-control);
  /* Their own 9px made them 38px beside a 36px button; the height is the min-height. */
  padding-top: .3rem;
  padding-bottom: .3rem;
  border-radius: var(--ui-radius-sm);
}

/* The date picker's calendar button sits beside its field; it matches it. */
.dash-layout .platform-date-toggle {
  min-height: var(--ui-control);
}

/* ---------------------------------------------------------------------------
 | 3. Cards and panels — one corner
 --------------------------------------------------------------------------- */
.dash-layout .card,
.dash-layout .sysset__card,
.dash-layout .fsum,
.dash-layout .creq,
.dash-layout .rcx-card,
.dash-layout .members-hub-page,
.dash-layout .deposit-requests-page {
  border-radius: var(--ui-radius);
}

/* ---------------------------------------------------------------------------
 | 4. Phones: rows of choices scroll sideways instead of stacking
 |
 | The Statements page's five account tabs made a grid three rows deep, and its five
 | quick periods another three; a native app puts a row of choices on one line that
 | scrolls. Every choice is still there, one swipe away, and the row fades at the
 | edge while there is more of it (ui-touch.js sets .ui-more).
 --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .member-statements-tabs__list,
  .member-statements-presets,
  .deposit-requests-kpi__chips,
  .permissions-role-tabs,
  .rcx-filters,
  .rcx-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .4rem !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .member-statements-tabs__list::-webkit-scrollbar,
  .member-statements-presets::-webkit-scrollbar,
  .deposit-requests-kpi__chips::-webkit-scrollbar,
  .permissions-role-tabs::-webkit-scrollbar,
  .rcx-filters::-webkit-scrollbar,
  .rcx-tabs::-webkit-scrollbar {
    display: none;
  }

  .member-statements-tabs__list > *,
  .member-statements-presets > *,
  .deposit-requests-kpi__chips > *,
  .permissions-role-tabs > *,
  .rcx-filters > *,
  .rcx-tabs > * {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* The platform stacks the account tabs in a column on phones; a row is the point. */
  .member-statements-tabs__list {
    flex-direction: row !important;
  }

  .member-statements-presets__label {
    align-self: center;
  }

  /* The fade that says "there is more this way". */
  .ui-more {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}

/* ---------------------------------------------------------------------------
 | 4a. Phones: a statement line reads like a line in a banking app
 |
 | mobile-compact.css already pairs a transaction's fields two across; each field
 | still kept a 38px floor and a label column of 38%, so a description wrapped to
 | three lines in the 62% left beside it, and a transaction stood about 200px tall.
 | A 30px floor and narrower labels give the text the width and take ~60px back.
 --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #app table.member-statements-table tbody td {
    min-height: 30px;
    padding-top: .15rem;
    padding-bottom: .15rem;
    gap: .5rem;
  }

  #app table.member-statements-table tbody td::before {
    flex-basis: 30%;
  }

  #app table.member-statements-table tbody td[data-label="Reference"]::before,
  #app table.member-statements-table tbody td[data-label="Description"]::before {
    flex-basis: 22%;
  }

  #app table.member-statements-table tbody tr {
    margin-bottom: .45rem;
  }
}

/* ---------------------------------------------------------------------------
 | 5. Phones: page headers say what the page is, briefly
 |
 | The large decorative icon beside a page title took a third of the line, so the
 | description beside it wrapped to four lines; without it, the same words take two.
 --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .member-statements-hero__icon,
  .newly-page__icon,
  .app-track-hero__icon {
    display: none !important;
  }

  .member-statements-hero,
  .newly-page__head,
  .reports-hero-card,
  .deposit-requests-page__hero {
    gap: .5rem !important;
    margin-bottom: .6rem !important;
  }

  .member-statements-hero {
    padding: .7rem .75rem !important;
  }

  .member-statements-hero__main {
    gap: .5rem !important;
  }

  .member-statements-hero__actions {
    gap: .4rem !important;
    margin-top: .1rem !important;
  }

  .newly-page__sub,
  .member-statements-hero__subtitle,
  .reports-lead {
    margin-top: .15rem !important;
    line-height: 1.45 !important;
  }
}

/* ---------------------------------------------------------------------------
 | 6. Phones: everything you tap is at least 44px (or 40px inside a list row)
 --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* The member's name in a list row: the thing tapped most, and 18-24px tall. */
  .memberlink,
  .newly-memberlink,
  .depcat__members,
  .member-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* FE-09: Sanction / Clearance / Receipt pill links (loan-letters.js, emi-receipts.js,
     member-profile-tabs.js) were 11.5px text in a ~24px pill — under the 32px a thumb
     needs. Desktop keeps the compact pill (notifications.css); this only adds height. */
  .emi-receipt-link {
    min-height: 32px;
  }

  /* Sortable column headings are buttons in all but name. */
  th.th-sortable {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
  }

  /* Tick boxes a thumb can find. */
  .permissions-check-cell input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  .sysset-tab,
  .rcx-tab,
  .rcx-filter,
  .member-statements-preset-chip {
    min-height: 40px;
  }
}

/* ---------------------------------------------------------------------------
 | 7. Phones: the header folds its search row away while you scroll down
 |
 | Native apps give the content the screen while it is being read and bring the
 | search back the moment you scroll up. ui-touch.js sets html.ui-scrolling-down.
 --------------------------------------------------------------------------- */
/*
 * Without moving the page (2026-10-02, "the screen blinks when scrolling").
 *
 * The top bar is sticky, so it keeps its place in the page's flow: folding the
 * search row used to make everything below it 42px shorter, animated over .2s.
 * Chrome holds the content still by moving the scroll position up with it (scroll
 * anchoring), and ui-touch.js read that movement as the reader scrolling UP and
 * unfolded the row again; the next move down folded it, and so on, so the bar and
 * the page blinked open and shut. Safari has no scroll anchoring, so there the
 * content jumped 42px up and down instead.
 *
 * Now the folded bar gives back the space it stops using as a margin under itself,
 * the exact height of the search row (ui-touch.js measures it into --ui-search-fold
 * just before folding). Everything below stays exactly where it was, so the scroll
 * position never moves, and the bar simply shows less of itself: the content the
 * search row covered comes into view. Nothing changes height by animation, so there
 * is no in-between state to react to.
 *
 * Both halves depend on :has(); a browser without it does not fold at all, rather
 * than folding without the margin.
 */
@media (max-width: 768px) {
  .topbar .dash-search-wrap {
    transition: opacity .15s ease;
  }

  html.ui-scrolling-down .topbar:has(.dash-search-wrap:not(:focus-within)) .dash-search-wrap {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    pointer-events: none;
  }

  html.ui-scrolling-down .topbar:has(.dash-search-wrap:not(:focus-within)) {
    margin-bottom: var(--ui-search-fold, 0px);
  }

  @media (prefers-reduced-motion: reduce) {
    .topbar .dash-search-wrap { transition: none; }
  }
}

/* ---------------------------------------------------------------------------
 | 8. Phones: lists that scroll sideways say so
 |
 | Every list keeps its columns on a phone (mobile-app.js explains why), so most
 | are wider than the screen — and nothing showed there was more to the right.
 | A soft shadow now sits on whichever edge has more; ui-touch.js keeps it current.
 --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ui-scroll-right {
    box-shadow: inset -18px 0 14px -14px rgba(13, 27, 62, .3);
  }

  .ui-scroll-left {
    box-shadow: inset 18px 0 14px -14px rgba(13, 27, 62, .3);
  }

  .ui-scroll-left.ui-scroll-right {
    box-shadow: inset 18px 0 14px -14px rgba(13, 27, 62, .3), inset -18px 0 14px -14px rgba(13, 27, 62, .3);
  }
}

/* ---------------------------------------------------------------------------
 | 9. Phones: pop-ups open as sheets from the bottom
 |
 | The platform's dialogs (sign-in, confirm delete, and the rest) opened as a small
 | box in the middle of the screen. On a phone they now rise from the bottom edge,
 | full width, within thumb reach — and above the tab bar, which covered them.
 --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    z-index: 1250 !important;
  }

  .modal-overlay .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: contain;
    animation: ui-sheet-up .2s ease-out;
  }

  @keyframes ui-sheet-up {
    from { transform: translateY(24px); opacity: .6; }
    to { transform: none; opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .modal-overlay .modal { animation: none; }
  }
}