/* ==========================================================================
   Invoicing — the tracking listing

   Every invoice the practice has raised, of every kind, and what state each is
   in. The screen answers one question — what is outstanding — so the tiles get
   the weight and the table gets the detail.
   ========================================================================== */

/* --- The state tiles ----------------------------------------------------- */

/* Auto-fit rather than a fixed column count: a third kind of invoice is coming
   and may bring a state with it, and a grid that has to be recounted every time
   is a grid that will be wrong once. */
.invoice-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.invoice-summary__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  /* The state's own colour, as a spine down the left rather than a fill. Five
     filled tiles side by side is a paint chart; a spine says which is which
     without any of them shouting. */
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.invoice-summary__tile:hover {
  background-color: var(--tint-navy-04);
}

/* The tile you are currently filtered to. Marked by weight rather than by
   colour, so it reads as "selected" and not as "this state is the bad one". */
.invoice-summary__tile--active {
  background-color: var(--tint-navy-06);
  border-color: var(--color-border-strong);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.invoice-summary__tile--gray { border-left-color: var(--color-border-strong); }
.invoice-summary__tile--yellow { border-left-color: var(--color-warning); }
.invoice-summary__tile--blue { border-left-color: var(--color-primary-dark); }
.invoice-summary__tile--red { border-left-color: var(--color-danger); }
.invoice-summary__tile--green { border-left-color: var(--color-success); }

.invoice-summary__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The money is the headline. It is the figure somebody came to this screen for. */
.invoice-summary__amount {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-xlarge);
  font-weight: bold;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}

.invoice-summary__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
}

/* --- The table ----------------------------------------------------------- */

.invoice-row__number {
  font-family: var(--font-family-bold);
  font-weight: bold;
  white-space: nowrap;
}

/* The one free-text column, and the one that varies most in length: a case
   reference runs to four names joined by dashes, a retainer's is a month. */
.invoice-row__subject {
  max-width: 34ch;
}

.invoice-row__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-row__late {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

.invoice-row__actions {
  text-align: right;
  white-space: nowrap;
}