/* Project-only layout for the staking pools page. Everything visual comes
   from the UZH BCC UI kit (uzh_bcc_ui_kit/css/uzh-bcc-ui.css); rules here
   only ADAPT kit components to this page. A rule that would CORRECT a kit
   component belongs in the kit instead. */

/* This site is one page, so it does not need the kit's shared 227px header
   box (which keeps the fold still between the pages of a multi-page site). */
.uzh-frame-header { min-height: 0; padding-block: 1.1rem; gap: 1.1rem; margin-bottom: 1.25rem; }

/* The six epoch figures: one row when the window is wide, then 3 + 3, then 2 + 2 + 2. */
#epoch-stats, #net-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
:is(#epoch-stats, #net-stats) .uzh-stat-grid__item { padding: 0.8rem 0.6rem; min-width: 0; }
:is(#epoch-stats, #net-stats) .uzh-stat-grid__item b { font-size: 1.2rem; overflow-wrap: anywhere; }
@media (max-width: 1100px) { #epoch-stats, #net-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { #epoch-stats, #net-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A card's title row: heading left, its tools or caption right. */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}
.card-head__tools { display: flex; align-items: center; gap: 0.6rem; }
.card-head__unit { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.card-head__unit .uzh-amount__token .uzh-coin-frame { width: 18px; height: 18px; }

/* Ten columns do not fit a phone: the table scrolls, the page does not. */
.table-scroll { overflow-x: auto; }

/* ...but in the wide wrap they must fit, or the Stake column (the last one)
   is cut off behind a scrollbar nobody sees. The one-line uppercase heads
   ("DECLARED PLEDGE") set several columns wider than their figures, so heads
   may wrap; and the columns sit a little closer than the kit's 12px. */
#pool-table thead th {
  white-space: normal;
  vertical-align: bottom;
  padding-inline: 8px;
}
#pool-table tr.uzh-row-main td { padding-inline: 8px; }
#pool-table thead th:first-child,
#pool-table tr.uzh-row-main td:first-child { padding-left: 12px; }
#pool-table thead th:last-child,
#pool-table tr.uzh-row-main td:last-child { padding-right: 12px; }

.pool-name { display: inline-flex; align-items: center; gap: 0.45rem; }
.pool-name .uzh-arrow { margin-right: 0; }
.pool-name__text { font-weight: 600; color: var(--uzh-ink); }
.pool-name__text.is-unnamed { font-weight: 400; font-style: italic; color: var(--uzh-mut); }
.pool-name .uzh-chip { font-size: 0.7rem; padding: 0.05rem 0.5rem; }
.uzh-table .pool-name__id {
  display: block;
  margin-left: 1.05rem;
  font-size: 12px;
  color: var(--uzh-mut);
  background: none;
  padding: 0;
}

/* The expanded row: what a pool says about itself. */
.pool-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding-top: 0.6rem;
  text-align: left;
  white-space: normal;
}
.pool-facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--uzh-mut);
  padding-top: 0.15rem;
}
.pool-facts dd { margin: 0; color: var(--uzh-ink); min-width: 0; }
.pool-facts .uzh-addr { word-break: break-all; }

/* The kit's wallet bar is laid out for a wide coloured band; on this card
   it is one row, directly under the heading. */
#stake-card .uzh-wallet-bar, #you-card .uzh-wallet-bar { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
#stake-card .uzh-status { margin-bottom: 0; }

/* The Stake column holds actions, so it does not sort. */
.uzh-table thead th.stake-head { cursor: default; text-align: center; }
.uzh-table thead th.stake-head:hover { color: var(--uzh-mut); }
.uzh-table tr.uzh-row-main td.stake-cell { text-align: center; }

/* Pagination: the status keeps its width so the buttons never move. */
.uzh-pagination__status { min-width: 6.5rem; text-align: center; }
.page-jump {
  --tc-bg: var(--uzh-blue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
:root[data-theme="dark"] .page-jump { --tc-bg: #7ea1ff; }
.page-jump label { margin: 0; white-space: nowrap; }
.page-jump .uzh-calm-inputgroup { width: 5.5rem; }
.page-jump .uzh-calm-inputgroup input { padding: 0.3rem 0.6rem; font-size: 0.9rem; }

.uzh-toast-stack { margin-top: 0.25rem; }

.site-credit { text-align: center; font-size: 0.8rem; margin: 0.5rem 0 0; }