/*
 * Inpi Sumbawm — the sitewide compact pass
 * =======================================
 * Loaded after every other stylesheet (typography.css included: this file sets no type),
 * from this checkout's override asset root only, so the shared tree is untouched.
 * Spacing and arrangement only. Nothing is hidden for good, removed, re-worded or
 * re-ordered, and no control loses its touch size on a phone.
 *
 * Measured first: every tab of every role (administrator, approver, account manager,
 * member) and the public pages, at 1366×900 and 390×844, with the DOM skeleton of the
 * tallest pages (class, height, padding, margin of every block). What was left after
 * compact.css, density.css, mobile-compact.css and ui-system.css had done their work:
 *
 *   card heads     "Approved Items / All approved…" + Refresh: on a phone the button
 *                  fell onto a row of its own (55px + 36px + margins) on every list page
 *   page heroes    Members, Deposit Payments, Unit Master, Statements, Withdrawals:
 *                  1.15–1.25rem of padding and a 52px icon before the first control
 *   forms          on a desktop a number box for "3" ran the full 900px width of the
 *                  card, one field per row (loan amount, tenure, deposit amount…);
 *                  mobile-two-col.js now pairs short fields at every width, drawn here
 *   sub-tabs       Financial report / Reconciliation / Statements wrapped to two lines
 *                  on a phone; profile and loan tabs 47–53px tall on a desktop
 *   the rest       1rem gaps between stacked cards, 1.25rem under grids and sections,
 *                  .75rem under every card title, 1rem between form groups, 67px pagers
 *
 * The desktop is drawn at 120% (platform.css: body { zoom: 1.2 } above 1024px), so a
 * .75rem here is 14.4 screen pixels there. That zoom is the platform's own choice and
 * is left alone.
 */

/* ===========================================================================
 | 1. One rhythm: the gaps between stacked blocks, and inside a card
 --------------------------------------------------------------------------- */

#app .dash-layout :is(
  .members-hub-page, .deposit-requests-page, .reports-page, .unit-master-page,
  .member-withdrawals-page, .member-statements-page
) {
  gap: .75rem;
}

#app .dash-layout .card-title {
  margin-bottom: .5rem;
}

#app .dash-layout .detail-section {
  margin-bottom: .75rem;
  padding-bottom: .75rem;
}

#app .dash-layout .member-dash-sections {
  margin-bottom: .75rem;
}

/* The shared pager: 67px for one line of text and three small controls. */
#app .dash-layout .table-pagination {
  padding-top: .4rem;
  padding-bottom: .4rem;
}

#app .dash-layout .table-pagination select {
  min-height: var(--ui-control-sm, 30px);
  padding-top: .15rem;
  padding-bottom: .15rem;
}

/* The head of a card: its title (and one line under it) with the buttons at the right. */
#app .card > div[style*="space-between"]:is(:has(> div > .card-title), :has(> .card-title)) {
  margin-bottom: .6rem !important;
  align-items: flex-start !important;
}

@media (min-width: 769px) {
  #app .dash-layout .content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #app .form-group {
    margin-bottom: .75rem;
  }

  #app .grid-2,
  #app .grid-3,
  #app .grid-4 {
    margin-bottom: .75rem;
  }

  #app .dash-layout .filter-toolbar .form-group label {
    margin-bottom: .25rem;
  }
}

/* ===========================================================================
 | 2. Page heroes and heads
 --------------------------------------------------------------------------- */

#app :is(.members-hub-page__hero, .deposit-requests-page__hero, .unit-master-page__hero) {
  padding: .8rem 1rem;
}

#app :is(.member-statements-hero, .member-withdrawals-hero) {
  padding: .85rem 1rem;
}

#app .members-hub-page__title {
  margin-bottom: .2rem;
}

#app .dash-layout .reports-hero-card .card-title {
  margin-bottom: .2rem;
}

#app .newly-page__head {
  margin-bottom: .6rem !important;
}

#app .newly-page.sysset-page {
  padding-top: .5rem !important;
  padding-bottom: .75rem !important;
  gap: .5rem !important;
}

/* The System Settings tab strip (settings-hub.css): a little less air above the cards. */
#app .dash-layout .shub-tabs {
  margin-bottom: .6rem;
  padding-bottom: .5rem;
}

/* Members: the "At a glance" block and its application lists. */
#app .msum {
  padding: .65rem .8rem .7rem;
}

#app .msum__views {
  margin-top: .5rem;
  padding-top: .5rem;
}

/* Dashboards */
#app .role-dash-nav {
  margin-bottom: .75rem;
}

#app .role-dash-nav--member {
  padding: .9rem 1rem 1rem;
}

#app .role-dash-nav--member .role-dash-nav__head {
  margin-bottom: .7rem;
}

#app .member-dash-accordion__toggle {
  padding-top: .6rem;
  padding-bottom: .6rem;
}

#app .member-dash-accordion__body {
  padding: .6rem .85rem;
}

/* ===========================================================================
 | 3. Sub-tabs and chip rows
 --------------------------------------------------------------------------- */

#app .fpos-tabs__tab {
  padding-top: .45rem;
  padding-bottom: .45rem;
}

#app .loantabs__tab {
  padding-top: .35rem;
  padding-bottom: .35rem;
}

#app .loantabs {
  margin-bottom: .6rem;
}

#app .depcat {
  margin-bottom: .6rem;
}

#app .deposit-requests-kpi {
  margin-bottom: .6rem;
}

#app :is(.deposit-subnav, .deposit-member-subnav) {
  margin-bottom: .6rem;
}

#app .mtabs__nav {
  margin-bottom: .6rem;
}

/* A mouse does not need a 44px tab; a finger keeps it (the phone rules never reach here). */
@media (min-width: 769px) and (hover: hover) {
  #app .mtabs__tab {
    min-height: 40px;
  }
}

/* ===========================================================================
 | 4. Forms: short fields two across at every width
 |
 | mobile-two-col.js sets .m2c-form / .m2c-half on a run of short fields (a number, a
 | date, a select, a code). mobile-two-col.css draws the pair on phones; this is the
 | same pair on wider screens, where a 900px box for a two-digit tenure was no better.
 --------------------------------------------------------------------------- */

@media (min-width: 769px) {
  #app .m2c-form,
  .modal .m2c-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: .85rem !important;
    align-items: start;
  }

  .m2c-form > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .m2c-form > .m2c-half {
    grid-column: auto;
  }

  .m2c-form > .m2c-half input,
  .m2c-form > .m2c-half select {
    width: 100%;
    min-width: 0;
  }

  .m2c-lab2 > label {
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-end;
    column-gap: .25em;
    min-height: 2.7em;
    line-height: 1.3;
  }
}

#app .closure-status-banner {
  margin-top: .6rem;
  padding: .6rem .8rem;
}

#app .deposit-plan-card {
  padding: .65rem .75rem;
}

/* ===========================================================================
 | 5. The pages measured individually
 --------------------------------------------------------------------------- */

/* Unit Master */
#app .unit-master-page__panel-head {
  padding: .7rem .9rem .6rem;
}

#app .unit-master-page__panel-scroll {
  padding: .7rem .9rem;
  gap: .6rem;
}

#app .unit-master-page__panel-footer {
  padding: .6rem .9rem;
}

#app .master-type-form__section {
  padding: .7rem .8rem .75rem;
}

#app .master-type-form__section-head {
  margin-bottom: .55rem;
}

/* Reports */
#app .fsum.frep {
  padding: .8rem .9rem .9rem;
  margin-bottom: .75rem;
}

#app .frep-head {
  margin-bottom: .5rem;
}

/* Email Log */
#app .emaillog {
  padding: .8rem .9rem .9rem;
}

#app .emaillog__head {
  margin-bottom: .5rem;
}

/* One line each on a desktop instead of two. */
#app .emaillog__lead,
#app .emaillog__route {
  max-width: none;
}

#app .emaillog__filters {
  margin-bottom: .5rem;
}

#app .emaillog__summary {
  margin-bottom: .6rem;
}

/* The subject had 18 characters of width and wrapped to three lines (104px rows);
   the address had half the table. */
@media (min-width: 701px) {
  #app .emaillog table.emaillog__table td.emaillog__to,
  #app .emaillog table.emaillog__table th:nth-child(3) {
    width: 20%;
  }

  #app .emaillog table.emaillog__table td.emaillog__subject,
  #app .emaillog table.emaillog__table th:nth-child(4) {
    width: 48%;
  }
}

/* Account Statements (member) */
#app .member-statements-table-head {
  padding: .5rem .75rem;
}

#app .member-statements-kpi {
  padding: .65rem .85rem;
}

#app .member-statements-meta {
  padding: .55rem .85rem;
}

#app .member-statements-presets {
  margin-top: .6rem;
  padding-top: .6rem;
}

/* Deposit withdrawals (member) */
#app .member-withdrawals-form-card {
  padding: .75rem .9rem;
}

#app .member-withdrawals-account-card {
  padding: .7rem .8rem;
}

/* My Profile */
#app .profile-photo-card {
  margin-bottom: .6rem;
  padding-bottom: .6rem;
}

#app .profile-photo-card .card-subtitle {
  margin-bottom: .35rem !important;
}

#app .profile-photo-block {
  margin-bottom: .5rem;
}

#app .rel-lock__note {
  margin: .25rem 0 .6rem;
}

#app .profile-section-card__head {
  padding: .6rem .85rem;
}

#app .profile-section-card__body {
  padding: .6rem .85rem;
}

#app .profile-page-grid {
  margin-bottom: .75rem;
}

#app .profile-save-bar {
  padding: .5rem .75rem;
}

/* ===========================================================================
 | 6. Phones
 --------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* A card's head keeps its buttons in the corner instead of on a row of their own.
     A head that holds a field (a search box, a select) still wraps as before. */
  #app .card > div[style*="space-between"]:is(:has(> div > .card-title), :has(> .card-title)):not(:has(input, select, textarea)) {
    flex-wrap: nowrap !important;
    gap: .5rem !important;
    margin-bottom: .5rem !important;
  }

  #app .card > div[style*="space-between"]:is(:has(> div > .card-title), :has(> .card-title)):not(:has(input, select, textarea)) > :first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  #app .card > div[style*="space-between"]:is(:has(> div > .card-title), :has(> .card-title)):not(:has(input, select, textarea)) > :last-child:not(:first-child) {
    flex: 0 0 auto;
  }

  #app .card > div[style*="space-between"]:is(:has(> div > .card-title), :has(> .card-title)):not(:has(input, select, textarea)) > div:last-child:not(:first-child) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
  }

  /* Page heroes: the copy with its Refresh in the corner; the decorative icon folds
     away on a phone as it already does for the statements and the tool pages. */
  #app :is(.members-hub-page__hero, .deposit-requests-page__hero, .unit-master-page__hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .5rem;
    row-gap: .35rem;
    align-items: start;
    padding: .65rem .75rem !important;
  }

  #app :is(.members-hub-page__hero-icon, .unit-master-page__hero-icon) {
    display: none !important;
  }

  #app :is(.members-hub-page__hero-copy, .deposit-requests-page__hero-copy, .unit-master-page__hero-copy) {
    grid-column: 1;
    min-width: 0;
  }

  #app :is(.members-hub-page__hero-actions, .deposit-requests-page__hero-actions) {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
  }

  #app :is(.member-statements-hero, .member-withdrawals-hero) {
    padding: .65rem .75rem !important;
  }

  #app .dash-layout :is(
    .members-hub-page, .deposit-requests-page, .reports-page, .unit-master-page,
    .member-withdrawals-page, .member-statements-page
  ) {
    gap: .6rem;
  }

  /* Dashboards */
  #app .role-dash-nav--member {
    padding: .75rem .8rem .85rem;
  }

  #app .role-dash-nav--member .role-dash-nav__head {
    margin-bottom: .5rem;
  }

  /* The report's three tabs on one line: they wrapped "Financial / report" onto two. */
  #app .fpos-tabs {
    gap: .15rem;
  }

  #app .fpos-tabs__tab {
    flex: 1 1 0;
    min-height: 40px;
    padding: .35rem .3rem;
    white-space: nowrap;
  }

  #app .reports-hero-card {
    padding: .6rem .75rem !important;
  }

  /* Blocks that still carried their desktop padding on a 390px screen. */
  #app .msum {
    padding: .6rem .65rem;
  }

  #app .emaillog {
    padding: .7rem .65rem .75rem;
  }

  #app .fsum.frep {
    padding: .7rem .65rem .75rem;
  }

  #app .member-withdrawals-form-card {
    padding: .65rem .7rem;
  }

  #app .member-statements-kpi {
    padding: .6rem .7rem;
  }

  #app .profile-section-card__head,
  #app .profile-section-card__body {
    padding: .55rem .7rem;
  }

  #app .unit-master-page__panel-head,
  #app .unit-master-page__panel-scroll,
  #app .unit-master-page__panel-footer {
    padding-left: .7rem;
    padding-right: .7rem;
  }

  #app .master-type-form__section {
    padding: .6rem .65rem;
  }
}

/*
 * Phone tap targets (audit FE-09, found again by the 2026-10-02 regression walk): member
 * name links, staff-grant links, the applicant-name button and the rate-history link were
 * under 28 px on phones. Phones only, so desktop is unchanged; inline-flex keeps them on
 * their line inside table cells.
 */
@media (max-width: 768px) {
  #app .memberlink,
  #app .sgrant__link,
  #app .dash-applicant-name-btn,
  #app .lrs__link,
  .faq-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 32px;
  }
}