/* Water Account Summary: the per-account monthly ledger and the GSA pulse cards above it.
   Prefixed `ledger-` because this ships in watermarkBundle, which loads app-wide. */

.ledger-grid {
  --ledger-cols: 1.25rem minmax(9rem, 1fr) 9rem 9rem 9rem 4.5rem;
}

.ledger-grid__head,
.ledger-grid__row {
  display: grid;
  grid-template-columns: var(--ledger-cols);
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.875rem 1rem;
}

.ledger-grid__head {
  padding-top: 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.ledger-grid__row {
  border-top: 1px solid var(--bs-border-color-translucent);
}

.ledger-grid__row:first-child {
  border-top: 0;
}

/* Not .border-4: the literal width above wins over --bs-border-width. */
.ledger-grid__row--total {
  border-top: 4px solid var(--bs-border-color);
}

/* 0.6875rem and 0.04em both fall between the available fs- and ls- steps. */
.ledger-grid__label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.ledger-grid__cell {
  text-align: right;
}

.ledger-grid__month {
  color: var(--color-brand-darker);
  font-weight: 600;
  text-decoration: none;
}

.ledger-grid__month:hover,
.ledger-grid__month:focus {
  color: var(--color-brand-extra-dark);
  text-decoration: underline;
}

/* Pair with .rounded-circle, .d-inline-block and a .bg-* utility. */
.ledger-dot {
  width: 0.5rem;
  height: 0.5rem;
}

/* Pair with .d-flex, .rounded-pill, .overflow-hidden and .bg-body-secondary. */
.ledger-bar {
  position: relative;
  height: 0.75rem;
}

/* The intensity meter is scaled past 100%, so the allowance has to be marked inside the
   track rather than read off its end. */
.ledger-bar__limit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-brand-super-dark);
}

/* 2px is below Bootstrap's smallest gap step. */
.ledger-bar--split {
  gap: 2px;
}

.ledger-state-pill {
  min-width: 7rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  text-align: center;
  font-weight: 600;
}

.ledger-state-pill--ok {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.ledger-state-pill--low {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.ledger-state-pill--over {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

@media (max-width: 991.98px) {
  .ledger-grid__head {
    display: none;
  }

  .ledger-grid__row {
    grid-template-columns: 1.25rem 1fr;
    row-gap: 0.625rem;
  }

  .ledger-grid__cell {
    grid-column: 2;
    text-align: left;
  }

  /* The header is gone at this width, so each cell states its own label. Scoped to cells
     that carry one — the actions cell shares the class but has no label. */
  .ledger-grid__cell[data-label] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.75rem;
  }

  .ledger-grid__cell[data-label]::before {
    content: attr(data-label);
    flex: 0 0 100%;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
  }
}

/* Meters inside a list row read as a column of marks and want less weight than the strip's. */
.ledger-bar--thin {
  height: 0.375rem;
}

/* The category's position in the drawdown order. */
.ledger-order-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--bs-brand-cashmere);
  color: var(--bs-brand-charcoal);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Where the next acre-foot comes from. Neutral dark rather than brand teal: the position is
   as likely to be a tier billing $250/AF as it is to be the account's own water. */
.ledger-order-pill--active {
  background-color: var(--color-brand-super-dark);
  color: #fff;
}

/* One supply category: a label/value line, its meter beneath, and the order chip in the
   gutter. Flex rather than extending .water-supply-datapoint, whose two auto-sized columns
   put a third child in the first column's cell rather than on a row of its own. */
.ledger-category {
  position: relative;
  border-top: 1px solid var(--bs-border-color);
  padding: 1rem 0 1rem 2.25rem;
}

/* Pinned to the first text line, so the chip reads as belonging to the category name. */
.ledger-category__order {
  position: absolute;
  left: 0;
  top: 1rem;
  line-height: 1;
}

.ledger-category__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.ledger-category__meter {
  margin-top: 0.75rem;
}

/* Groups the drawdown list without dividing it — a rule here would read as a section break
   in a list that is one continuous sequence. The row heading a group drops its own rule. */
.ledger-group-label {
  padding: 1.25rem 0 0 2.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.ledger-group-label:first-child {
  padding-top: 0.5rem;
}

.ledger-group-label + .ledger-category {
  border-top: 0;
}

/* Three readings of one quantity, divided rather than spaced. Separate tiles would read as
   three independent metrics; these are one figure decomposed. */
.ledger-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.ledger-figures > * + * {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1.25rem;
}

@media (min-width: 768px) {
  .ledger-figures {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .ledger-figures > * + * {
    border-top: 0;
    border-left: 1px solid var(--bs-border-color);
    padding-top: 0;
    padding-left: 1.5rem;
  }
}

/* The tier ladder: entitlement, then each transitional tier, each filled independently so
   depth into the current tier is readable and not just distance along the whole run.

   Tier count is a GSA configuration, so span rides on a custom property and flex-grow does
   the sizing — one tier or five needs no other change. An uncapped last tier gets a nominal
   span, enough room for its label; its volume is printed, never drawn as a width. */
.ledger-ladder {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.ledger-ladder__tier {
  flex-grow: var(--tier-span, 1);
  flex-basis: 0;
  min-width: 0;
}

.ledger-ladder__bar {
  display: flex;
  height: 1rem;
  overflow: hidden;
  background-color: var(--bs-secondary-bg);
}

.ledger-ladder__tier:first-child .ledger-ladder__bar {
  border-start-start-radius: 1rem;
  border-end-start-radius: 1rem;
}

.ledger-ladder__tier:last-child .ledger-ladder__bar {
  border-start-end-radius: 1rem;
  border-end-end-radius: 1rem;
}

/* The line between free water and charged water. */
.ledger-ladder__tier--boundary {
  margin-left: 0.25rem;
}

.ledger-ladder__tier--boundary .ledger-ladder__bar {
  border-left: 3px solid var(--color-brand-super-dark);
}

.ledger-ladder__label {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.4;
}

/* Segments too narrow to read are worse than no picture, so below md the ladder stacks.
   flex-grow has to be neutralised or the spans would size the segments by height. */
@media (max-width: 767.98px) {
  .ledger-ladder {
    flex-direction: column;
    gap: 0.875rem;
  }

  .ledger-ladder__tier {
    flex-grow: 0;
    flex-basis: auto;
  }

  .ledger-ladder__tier .ledger-ladder__bar {
    border-radius: 1rem;
  }

  .ledger-ladder__tier--boundary {
    margin-left: 0;
    border-top: 2px solid var(--color-brand-super-dark);
    padding-top: 0.875rem;
  }

  .ledger-ladder__tier--boundary .ledger-ladder__bar {
    border-left: 0;
  }
}