/*
 * Everything Bootstrap does not cover.
 *
 * Deliberately small. The previous stylesheet grew to 574 lines of per-feature
 * rules with no shared spacing or type scale, which is why the interface drifted
 * — each rule looked right on its own and none of them agreed. Bootstrap owns
 * layout, controls, and spacing now; this file owns only the financial report,
 * which is a specific document that no framework has an opinion about.
 */

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  padding: .5rem .75rem; background: #212529; color: #fff; border-radius: .375rem;
}

/* --- Consolidated Financial Report ----------------------------------- */

.report-card { max-width: 46rem; }

.figure-value { font-variant-numeric: tabular-nums; }

/* The payment schedule. Tabular on a wide screen; one line per month on a
   narrow one, where four columns cannot fit legibly. */
.schedule { font-variant-numeric: tabular-nums; }
.schedule .c-amount { text-align: right; white-space: nowrap; }
.schedule .c-month  { width: 1%; white-space: nowrap; }
.schedule .c-due,
.schedule .c-paid   { white-space: nowrap; }

.schedule tr.upcoming { color: var(--bs-secondary-color); }
.schedule .dash { color: var(--bs-tertiary-color); }

@media (max-width: 640px) {
  .schedule, .schedule tbody, .schedule tfoot,
  .schedule tr, .schedule th, .schedule td { display: block; width: auto; }
  .schedule thead { display: none; }

  /* Bootstrap draws a bottom border on every cell. Stacked, each cell is its
     own block, so that becomes a rule under every line of text. The row owns
     the separator here. */
  .schedule th, .schedule td { border: 0 !important; box-shadow: none !important; }

  .schedule tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .125rem .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .schedule .c-month { display: none; }

  /* The period heading and status come from data attributes so the wide
     layout can keep full dates in the cells. */
  .schedule .c-due  { grid-column: 1; grid-row: 1; padding: 0; font-size: 0; }
  .schedule .c-due::before {
    content: attr(data-period); font-size: 1rem; font-weight: 600;
  }
  .schedule .c-paid { grid-column: 1; grid-row: 2; padding: 0; font-size: 0; }
  .schedule .c-paid::before {
    content: attr(data-status); font-size: .8125rem; color: var(--bs-secondary-color);
  }
  .schedule tr.missed .c-paid::before { color: var(--bs-danger-text-emphasis); }

  .schedule .c-amount {
    grid-column: 2; grid-row: 1 / 3; align-self: center;
    padding: 0; font-size: 1.0625rem; font-weight: 600;
  }
  .schedule tr.missed .c-amount { font-weight: 400; color: var(--bs-secondary-color); }

  .schedule .c-notes { grid-column: 1 / 3; grid-row: 3; padding: .25rem 0 0; font-size: .8125rem; }
  .schedule .c-notes:empty { display: none; }

  .schedule tfoot tr {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: .75rem; border-top: 2px solid var(--bs-border-color);
  }
  .schedule tfoot th, .schedule tfoot td { border: 0; padding: 0; }
}