/*
 * Inpi Sumbawm — staff shell density
 * ==================================
 * Loaded after platform.css, compact.css and mobile-compact.css, from this checkout's
 * override asset root only, so the shared CodeIgniter tree is untouched.
 *
 * Why a second density file
 * -------------------------
 * compact.css already did this work, but it did it for the PUBLIC site at phone width —
 * its selectors are .home-*, .public-section, .hero-inner, .footer-top. The staff shell
 * behind /dashboard was left almost entirely alone, and that is where the day's work
 * actually happens. This file is the staff half, and it is scoped to .dash-layout so
 * the public pages keep the density they were already tuned to.
 *
 * Measured, not guessed
 * ---------------------
 * Every number below came from walking all 39 sidebar pages at 1440px and 390px and
 * recording what each one costs. The scrolling element in this shell is .content, not
 * the document, so document height reads one viewport on every page and says nothing;
 * these are .content scrollHeights.
 *
 *   all 39 pages, desktop      49,123px of content
 *   Approved Items / Loan       3,723px   5.36 screens
 *   API Management              3,737px   5.38 screens
 *   Reconciliation              2,671px   3.85 screens
 *   System Settings             2,184px   3.15 screens
 *
 * and the money was in three places:
 *
 *   1. TABLE ROWS at 55px on every list page. Only 11.2px of that is cell padding —
 *      the rest is an inline status chip 33px tall sitting in a line box that adds
 *      leading above and below it. Rows are the single largest cost in the product:
 *      the Approved Items page alone lays out 532 cells.
 *
 *   2. THE SIDEBAR, which could not show its own menu. 39 items at 47px plus a 112px
 *      brand block needed 801px inside a 656px rail, so six of the items were always
 *      below the fold and reachable only by scrolling a second scroll area nested
 *      inside the page. That is a navigation fault, not a spacing preference.
 *
 *   3. CARD AND SHELL PADDING at 16px on .content and again at 16px on .card, so every
 *      page paid 64px before it drew anything.
 *
 * Two rules, carried over from compact.css and not broken here
 * -----------------------------------------------------------
 *   1. Touch targets are never reduced. The 44px minimum for anything a finger uses is
 *      load-bearing for accessibility, so every reduction to a control below is gated
 *      to (hover: hover) and (min-width: 769px) — a mouse on a desktop. Phones keep
 *      every target they have.
 *   2. Horizontal gutters stay. Narrowing side padding pushes text to the screen edge.
 *      The win here is vertical.
 *
 * Nothing is hidden, reordered, recoloured or restructured. No functionality changes:
 * this file sets spacing properties and font-size on two chip classes, and nothing else.
 */

/* ===========================================================================
 | 1. The shell — desktop and mobile alike
 |
 | .content pays 16px top and bottom on every page, and the card inside it pays
 | another 16px. Trimming both is the one change that shortens all 39 pages.
 --------------------------------------------------------------------------- */

#app .dash-layout .content {
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
}

#app .dash-layout .card,
#app .dash-layout .panel {
  padding-top: .75rem !important;
  padding-bottom: .75rem !important;
}

/*
 * The toolbar above a table: a 12px gap between its controls and 12px under it. The
 * controls are 36px tall, so the row reads as a band of its own without needing the
 * extra separation.
 */
#app .dash-layout .filter-toolbar {
  margin-bottom: .5rem !important;
  gap: .5rem !important;
}

#app .dash-layout .section-head,
#app .dash-layout .page-head {
  margin-bottom: .6rem !important;
}

/* ===========================================================================
 | 2. Tables — the largest single cost in the product
 |
 | A row is 55px. 11.2px of that is the cell's own padding; the rest is the line
 | box around an inline status chip 33px tall, which adds leading above and below
 | itself the way any inline element does.
 |
 | So the fix is in three parts: trim the cell padding, shrink the chip, and take
 | the chip OUT of the text baseline with vertical-align, which is what removes
 | the leading. Together they bring a row to roughly 44px without touching a
 | single font size in the table body.
 --------------------------------------------------------------------------- */

#app .dash-layout tbody td {
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
}

#app .dash-layout thead th {
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}

/*
 * Status chips and tags. Aligning them to the middle of the line rather than the
 * baseline is what reclaims the descender space underneath them — that alone is
 * worth more per row than the padding change above.
 */
#app .dash-layout .tag,
#app .dash-layout .amd-detail-chip,
#app .dash-layout .tag-status,
#app .dash-layout .dash-status-with-icon {
  vertical-align: middle;
  padding-top: .15rem !important;
  padding-bottom: .15rem !important;
}

#app .dash-layout .amd-detail-chip {
  /* 33px tall for an 11px label. The label is unchanged; the box around it is not. */
  line-height: 1.35 !important;
}

/*
 * THE ROW HEIGHT ITSELF.
 *
 * data-tables.css sets an explicit `height: 46px` on every body cell, unconditionally:
 *
 *     #app table:not(.members-hub-page__table) tbody td { height: 46px }
 *
 * That is a deliberate choice and a good one — it gives every table a uniform row
 * rather than rows that jump about with their contents. It is also, measured, the ONLY
 * thing setting row height on this page: zeroing the cell padding, the line-height, the
 * chip padding and the button min-heights each moved the row pitch by 0px, while
 * `height: auto` alone took it from 55.2px to 36.2px and the Approved Items page from
 * 3,696px to 2,491px.
 *
 * So the uniform row is kept and the unit is made smaller, rather than removed. With
 * the .25rem cell padding above, 34px yields a 42px row — comfortably legible for a
 * 12px cell font, and 13px shorter on every row of every list in the product.
 *
 * Desktop only. The phone rule (data-tables.css, max-width: 768px) sets 52px with the
 * padding counted inside it, and that is the touch target; it is left exactly alone.
 */
@media (min-width: 769px) {
  #app .dash-layout table:not(.members-hub-page__table) tbody td {
    height: 34px !important;
  }

  /*
   * Buttons sitting inside a row. Once the row can actually shrink, these become
   * what holds it open, so they come down to match. A mouse does not need a 36px
   * target for a row action; a finger does, and a finger is served by the phone
   * rules this block excludes.
   */
  #app .dash-layout tbody td .btn,
  #app .dash-layout tbody td .tbl-action-icon-btn,
  #app .dash-layout .newly-row-actions .btn {
    padding-top: .2rem !important;
    padding-bottom: .2rem !important;
    min-height: 28px !important;
  }
}

/* An empty table drew an 89px row to say "nothing here". */
#app .dash-layout td.table-empty-cell {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* ===========================================================================
 | 3. The sidebar — so the menu fits
 |
 | 39 items at 47px, six group headers, and a 112px brand block came to 801px of
 | menu inside a 656px rail. The bottom six items were permanently below the fold,
 | behind a nested scrollbar most people never find.
 |
 | Trimming the item to 38px and the brand block reclaims about 380px, which is
 | enough for the whole menu to be visible at 900px tall. This is the "make
 | navigation easier" half of the work, and it is desktop-only: on a phone the
 | sidebar is a drawer and its items stay at full touch size.
 --------------------------------------------------------------------------- */

@media (min-width: 769px) {
  #app .dash-layout .sidebar .nav-item {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
    gap: .45rem !important;
  }

  #app .dash-layout .sidebar .nav-item--group {
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
  }

  #app .dash-layout .sidebar-brand {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }

  /* The rail's own list spacing, between items rather than inside them. */
  #app .dash-layout .sidebar-nav {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
  }
}

/* ===========================================================================
 | 4. KPI tiles and dashboard cards
 |
 | The Home page draws eight role-nav-kpi tiles carrying 159px of padding and
 | 192px of grid gap between them — 351px for eight numbers.
 --------------------------------------------------------------------------- */

#app .dash-layout .role-nav-kpi,
#app .dash-layout .role-nav-kpi--compact {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

#app .dash-layout .role-nav-kpis,
#app .dash-layout .dash-analytics,
#app .dash-layout .member-dash-sections {
  gap: .6rem !important;
}

/* ===========================================================================
 | 5. The pages that are not tables
 |
 | Five screens have nothing to do with rows, and after the table work above they
 | were the tallest things left. Measured at 1440px, what each one spends:
 |
 |   API Management   10,173px across 374 .apim__ep blocks — 6,582px of padding
 |                    and 3,590px of gap, for a list of endpoints
 |   Data Manager      1,033px across 44 .dm__tile buttons, plus 317px of grid gap
 |   System Settings     192px across 12 inputs, 134px across 4 cards, and 45px of
 |                    margin under four card headings
 |   Reports             179px across 8 breakdown rows, 96px across 4 figures
 |   Home                320px across 8 KPI tiles, 192px of which is grid gap
 |
 | All of these classes belong to this checkout's own override files, so tuning them
 | is tuning our own work rather than reaching into platform.css.
 --------------------------------------------------------------------------- */

/* The endpoint list: 374 blocks, each paying 17px of padding and 10px of gap. */
#app .apim__ep {
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
  gap: .3rem !important;
}

#app .apim__method {
  padding-top: .1rem !important;
  padding-bottom: .1rem !important;
}

#app .apim__ep summary,
#app .apim__group summary {
  padding-top: .4rem !important;
  padding-bottom: .4rem !important;
}

/* Data Manager's table tiles. 44 of them, three lines of text each. */
#app .dm__tile {
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
}

#app .dm__tiles {
  gap: .45rem !important;
}

/* System Settings and the pages sharing its card shell. */
#app .sysset__card {
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
}

#app .sysset__cardhead {
  margin-bottom: .5rem !important;
  padding-bottom: .35rem !important;
}

#app .sysset__grid {
  gap: .6rem !important;
  margin-bottom: .5rem !important;
}

#app .sysset__input {
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}

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

/* The money summary above the report builder (financial-summary.css, ours). */
#app .fsum__breakdown-row {
  gap: .5rem !important;
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
}

#app .fsum__figure {
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
}

#app .fsum__figures {
  gap: .5rem !important;
}

/* The dashboard's KPI strip: 192px of grid gap for eight numbers. */
#app .role-nav-kpi-grid,
#app .role-nav-kpi-grid--staff-full {
  gap: .5rem !important;
}

/* ===========================================================================
 | 6. Phones
 |
 | mobile-compact.css already tightened the public site at this width. These are
 | the staff-shell blocks it does not cover. Controls keep their size; only the
 | space between them moves.
 --------------------------------------------------------------------------- */

@media (max-width: 768px) {
  #app .dash-layout .content {
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
  }

  #app .dash-layout .card,
  #app .dash-layout .panel {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
    /* Side padding too, but only here: 16px each side of a 390px screen is 8% of
       the width spent on nothing. 10px still keeps text off the edge. */
    padding-left: .65rem !important;
    padding-right: .65rem !important;
  }

  #app .dash-layout .role-nav-kpis,
  #app .dash-layout .dash-analytics,
  #app .dash-layout .member-dash-sections {
    gap: .5rem !important;
  }

  #app .dash-layout .filter-toolbar {
    margin-bottom: .45rem !important;
    gap: .45rem !important;
  }

  /*
   * The head of every list page: back link, title block, search row, filter grid.
   * Measured on a 390px screen, these four cost about 110px before the first row of
   * data appears — an eighth of the screen spent on chrome. The controls inside them
   * keep their 44px targets; only the space between them moves.
   */
  #app .newly-page {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }

  #app .newly-page__head {
    margin-bottom: .45rem !important;
    gap: .35rem !important;
  }

  #app .newly-controls {
    margin-bottom: .45rem !important;
    gap: .4rem !important;
  }

  #app .newly-filters {
    margin-top: .4rem !important;
    margin-bottom: .4rem !important;
    gap: .45rem !important;
  }

  /* The back link keeps its 44px height; it is the air around it that goes. */
  #app .newly-back {
    margin-bottom: .3rem !important;
  }
}