/*
 * Dashboard module tiles, every role: the icon with the module's name beside it, the
 * count underneath.
 *
 * Members (renderMemberDashNavTile) and Admin / Approver / Account Manager
 * (renderStaffCompactDashNavTile) draw the same tile, with the icon and name stacked
 * on the left and the count floating on the right, so most of each tile was empty
 * and eight tiles took two rows of 140-160px. Now a tile is about 75px.
 *
 * The number of tiles to a row follows the width the dashboard actually has (a
 * container query on its section), not the window's, so it is the same with the
 * sidebar open or closed. The counts divide evenly: members have six tiles (6, 3 or
 * 2 to a row), each staff role eight (8, 4 or 2).
 *
 * Spacing and arrangement only: typography.css still sets the type.
 */

#app .role-dash-nav {
  container-type: inline-size;
  container-name: dash-nav;
}

/* --- How many to a row ------------------------------------------------------ */

#app .role-nav-kpi-grid--member-full {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .5rem !important;
}

@container dash-nav (min-width: 460px) {
  #app .role-nav-kpi-grid--member-full {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }
}

@container dash-nav (min-width: 900px) {
  #app .role-nav-kpi-grid--member-full {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

#app .role-nav-kpi-grid--staff-full,
#app .role-nav-kpi-grid--am-full {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .5rem !important;
}

@container dash-nav (min-width: 520px) {
  #app .role-nav-kpi-grid--staff-full,
  #app .role-nav-kpi-grid--am-full {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }
}

@container dash-nav (min-width: 1300px) {
  #app .role-nav-kpi-grid--staff-full,
  #app .role-nav-kpi-grid--am-full {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}

/* --- The tile --------------------------------------------------------------- */

#app .role-nav-kpi:is(.role-nav-kpi--member-row, .role-nav-kpi--staff-row, .role-nav-kpi--am-row) {
  min-height: 0 !important;
  padding: .6rem .7rem .55rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: .35rem !important;
  border-radius: 12px !important;
}

/* Row one: the icon, then the name. */
#app :is(.role-nav-kpi--member-row, .role-nav-kpi--staff-row, .role-nav-kpi--am-row) .role-nav-kpi__member-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
  flex: 0 0 auto !important;
  min-width: 0;
  padding: 0 !important;
  position: relative;
  z-index: 2;
}

#app :is(.role-nav-kpi--member-row, .role-nav-kpi--staff-row, .role-nav-kpi--am-row) .role-nav-kpi__icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  flex: 0 0 30px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset !important;
}

#app :is(.role-nav-kpi--member-row, .role-nav-kpi--staff-row, .role-nav-kpi--am-row) .role-nav-kpi__icon svg {
  width: 16px !important;
  height: 16px !important;
}

#app :is(.role-nav-kpi--member-row, .role-nav-kpi--staff-row, .role-nav-kpi--am-row) .role-nav-kpi__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25 !important;
}

/* Row two: the count, lined up under the name, with its amount (if any) beside it. */
#app :is(.role-nav-kpi--member-row, .role-nav-kpi--staff-row, .role-nav-kpi--am-row) .role-nav-kpi__member-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: .15rem .5rem !important;
  padding-left: calc(30px + .5rem) !important;
  text-align: left !important;
  position: relative;
  z-index: 2;
}

#app :is(.role-nav-kpi--member-row, .role-nav-kpi--staff-row, .role-nav-kpi--am-row) .role-nav-kpi__val--member {
  line-height: 1.1 !important;
}

#app :is(.role-nav-kpi--member-row, .role-nav-kpi--staff-row, .role-nav-kpi--am-row) .role-nav-kpi__member-amount {
  text-align: left !important;
}

/* The member tile's "needs you" dot sits in the corner, clear of the name. */
#app .role-nav-kpi--member-row .role-nav-kpi__pulse {
  top: .45rem !important;
  right: .45rem !important;
}

/* The staff tile's accent bar down the left edge, kept to the shorter tile. */
#app :is(.role-nav-kpi--staff-row, .role-nav-kpi--am-row)::after {
  top: 12px !important;
  bottom: 12px !important;
}

/* --- The member dashboard's heading --------------------------------------------
   The Member ID had a line of its own under the subtitle; it sits beside the title
   now, where the line had room. The "6 modules · All clear / 1 need attention ·
   1 open items" pills repeated what the tiles already show (the badge dot, the
   figures), so they are hidden — hidden, not removed. */
#app .role-dash-nav--member .role-dash-nav__stats {
  display: none !important;
}

#app .role-dash-nav--member .role-dash-nav__copy {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: baseline;
}

#app .role-dash-nav--member .role-dash-nav__copy > * {
  grid-column: 1 / -1;
  justify-self: start; /* the "MEMBER · DASHBOARD" chip keeps its own width */
}

#app .role-dash-nav--member .role-dash-nav__copy > .role-dash-nav__title {
  grid-column: 1;
}

#app .role-dash-nav--member .role-dash-nav__copy > .role-dash-nav__member-id {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin: 0 !important;
  white-space: nowrap;
}

/* A phone has no room beside the title: the ID goes back under it. */
@container dash-nav (max-width: 480px) {
  #app .role-dash-nav--member .role-dash-nav__copy > .role-dash-nav__member-id {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: .25rem !important;
  }
}