/* Small additions on top of Bootstrap (Bootswatch Yeti). */

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

.nowrap {
  white-space: nowrap;
}

/* Amounts owed (red) and advances (green): the theme colours, a bit darker so small text stays readable.
   The `.table ... > .x` selectors beat Bootstrap's rule that paints every table cell in the body colour. */
.bad,
a.bad,
.table > :not(caption) > * > .bad {
  color: color-mix(in srgb, var(--bs-danger) 85%, #000);
}

.ok,
a.ok,
.table > :not(caption) > * > .ok {
  color: color-mix(in srgb, var(--bs-success) 80%, #000);
}

.warn,
.table > :not(caption) > * > .warn {
  color: var(--bs-warning-text-emphasis);
}

tr.row-warning > * {
  --bs-table-bg-state: var(--bs-danger-bg-subtle);
}

tr.row-credit > * {
  --bs-table-bg-state: var(--bs-success-bg-subtle);
}

tr.row-muted > * {
  color: var(--bs-secondary-color);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.15rem 1rem;
}

.login-card {
  max-width: 24rem;
  margin: 3rem auto;
}

/* Inputs inside the bulk-entry grids (readings, starting indexes, balances). */
table.grid-inputs .form-control,
table.grid-inputs .form-select {
  min-width: 7rem;
}

table.grid-inputs .input-group .form-control {
  min-width: 6.5rem;
}

/* Calendar button next to a text date field; the invisible native date input covers it (static/js/dates.js). */
.date-picker {
  position: relative;
  display: flex;
  align-items: center;
}

.date-picker input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.date-input {
  max-width: 9.5rem;
}

table.calc th,
table.calc td {
  white-space: nowrap;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.stat-value {
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}