/* The cash-flow view of the schedule — `Features/Schedule/Components/ScheduleCashflow`.

   The sheet of the piece (P8): the frame of the table, the two rows of its sticky header, the three columns stuck to
   the left edge, the cells of an amount, the two lines of the foot, the dimming of an item with nothing assigned and
   the empty state.

   It declares no token — every colour and every step of type it uses is the family's, declared once in `tokens.css`
   (`DEC-W75`) — and it computes no figure: the columns, the amounts, the totals and the running total are the ones the
   server published with the grid (`DEC-W80`), which is why nothing here is arithmetic.

   The measures are `PLANNING-SCHEDULE-UI.md` §1.5's, taken from the origin: the three fixed columns of 48, 140 and
   80 px, the period columns of 48 px, the two label rows of the header, and the sticky foot. The three left edges add
   up to the 236 px the primary row's label sticks at (48 + 140 + 48), which is the one number of this sheet that is a
   sum of another two and is written as the origin wrote it.

   There is no control in this sheet, because there is none in the table of §1.5: the time scale of the screen is the
   bar's and it is declared there (`Toolbar.tsx:105-117`, I-22). */

/* ---------------------------------------------------------------------------------------------------------------
   The frame. The panel keeps the surface and the corner radius of the family's views, and the scrollport is the one
   box inside it that scrolls: at 48 px a column, a two-year project is wider than any screen (`§1.5`). */

.schedule-cashflow {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

.schedule-cashflow__scroll {
  height: 100%;
  overflow: auto;
}

.schedule-cashflow__assignment-note {
  margin: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.schedule-cashflow__mobile-summary {
  display: none;
}

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

.schedule-cashflow__table {
  border-collapse: collapse;
  font-size: var(--schedule-font-compact);
}

/* ---- The header: two rows, both stuck to the top of the scrollport -------------------------------------------- */

/* The empty cells of the primary row over the three fixed columns, the cells that carry the three headings, the cells
   of the period labels, and the cell of a run of periods. All four stick to the top and carry the surface of the
   header; what tells them apart is the rule that follows each one, not a different surface. */
.schedule-cashflow__head-spacer,
.schedule-cashflow__head-fixed,
.schedule-cashflow__head-period,
.schedule-cashflow__group {
  position: sticky;
  top: 0;
  z-index: var(--schedule-layer-header);
  background: var(--color-surface-muted);
  border-right: var(--border-default);
  border-bottom: var(--border-default);
  white-space: nowrap;
}

/* The cell of a run of periods: it draws one label over its own columns and no padding of its own, because the label
   inside it is the box that keeps the place and the padding (`CashflowView.tsx:326-329`). */
.schedule-cashflow__group {
  padding: 0;
  border-left: var(--border-default);
  text-align: left;
}

/* The label of a run. It sticks to the left edge of the scrollport at the end of the three fixed columns, so a run
   wider than the screen keeps saying which run it is while its own columns are on screen
   (`CashflowView.tsx:329`). */
.schedule-cashflow__group-label {
  position: sticky;
  left: 236px;
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-text);
  font-size: var(--schedule-font-tiny);
  font-weight: var(--font-weight-semibold);
}

/* The three headings of the fixed columns (`px-2 py-1` in the origin). */
.schedule-cashflow__head-fixed {
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

/* The label of a period: 10 px, centred over its own column (`CashflowView.tsx:341-345`). */
.schedule-cashflow__head-period {
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-text-subtle);
  font-size: var(--schedule-font-tiny);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/* ---- The three columns stuck to the left edge ---------------------------------------------------------------- */

/* Their widths and the offset each one keeps are the origin's (`§1.5`: 48, 140 and 80 px, stuck at `left: 0`,
   `left: 48px` and `left: 188px`). They are declared once and worn by the cell of the header, of a row and of the
   foot alike, so a column cannot be one width in one row and another in the row below it. */
.schedule-cashflow__col-category {
  position: sticky;
  left: 0;
  min-width: 48px;
  text-align: left;
}

.schedule-cashflow__col-description {
  position: sticky;
  left: 48px;
  min-width: 140px;
  text-align: left;
}

.schedule-cashflow__col-total {
  position: sticky;
  left: 188px;
  min-width: 80px;
  text-align: right;
}

/* On a phone Category and Description identify the row; Total joins the periods in the horizontal scroll area. */
@media (max-width: 767px) {
  .schedule-cashflow__mobile-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
    margin: 0 var(--space-xs) var(--space-xs);
  }

  .schedule-cashflow__mobile-summary div {
    padding: var(--space-xs);
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
  }

  .schedule-cashflow__mobile-summary dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
  }

  .schedule-cashflow__mobile-summary dd {
    margin: var(--space-3xs) 0 0;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .schedule-cashflow__group-label {
    left: 188px;
  }

  .schedule-cashflow__col-total {
    position: static;
    min-width: 72px;
  }
}

/* ---- The body: one row per item of the investment listing ----------------------------------------------------- */

.schedule-cashflow__row {
  border-bottom: var(--border-width) solid var(--schedule-grid-line);
}

/* An item with nothing assigned: dimmed and not hidden (RS-76), which is what the origin draws with `opacity-50`
   over the whole row (`CashflowView.tsx:358`). */
.schedule-cashflow__row--unassigned {
  opacity: 0.5;
}

/* The three fixed cells of a row: opaque, because they scroll over the period cells, and one layer below the header
   so that a row passing under it is not painted over the labels. 6 px of vertical padding is the origin's `py-1.5`. */
.schedule-cashflow__fixed {
  z-index: var(--schedule-layer-sticky);
  padding: 6px var(--space-xs);
  background: var(--color-surface);
  border-right: var(--border-width) solid var(--schedule-grid-line);
  white-space: nowrap;
}

/* A period cell of a row: the amount, right aligned, in the 10 px step of the family. */
.schedule-cashflow__cell {
  padding: var(--space-2xs) var(--space-2xs);
  border-right: var(--border-width) solid var(--schedule-grid-line);
  text-align: right;
  white-space: nowrap;
  font-size: var(--schedule-font-tiny);
}

/* The money of a cell: the green of the family and the weight the origin gives a figure (`font-medium`,
   `CashflowView.tsx:369`). */
.schedule-cashflow__amount {
  color: var(--schedule-amount);
  font-weight: var(--font-weight-semibold);
}

/* And the dash of a cell that carries none: the faintest tone the family declares, which is where the origin's
   `text-gray-200` sits — a zero is drawn as nothing at all (`CashflowView.tsx:371`). */
.schedule-cashflow__amount--none {
  color: var(--schedule-grid-line);
  font-weight: normal;
}

/* ---- The foot: the totals of every period, and the running total --------------------------------------------- */

/* Both lines stick to the bottom of the scrollport, opaque and over the rows. Each line carries its own top rule
   below: the heavy one is the origin's (`border-t-2 border-gray-300`, `CashflowView.tsx:380`) and belongs to the line
   of totals, and the running total under it is separated by a hairline, so the two summaries read as one foot. */
.schedule-cashflow__foot-fixed,
.schedule-cashflow__foot-cell {
  position: sticky;
  bottom: 0;
  z-index: var(--schedule-layer-header);
  padding: var(--space-xs) var(--space-xs);
  background: var(--color-surface-muted);
  border-right: var(--border-width) solid var(--schedule-grid-line);
  text-align: right;
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
}

.schedule-cashflow__foot-row--totals > .schedule-cashflow__foot-fixed,
.schedule-cashflow__foot-row--totals > .schedule-cashflow__foot-cell {
  border-top: 2px solid var(--color-border-strong);
}

.schedule-cashflow__foot-row--cumulative > .schedule-cashflow__foot-fixed,
.schedule-cashflow__foot-row--cumulative > .schedule-cashflow__foot-cell {
  border-top: var(--border-width) solid var(--color-border);
}

/* ---- The empty state ------------------------------------------------------------------------------------------ */

/* No item at all is the sentence of §1.5 and nothing else: the server publishes the listing whole (RS-76), so an empty
   table is a project with no investment item and not a filter of this view (`CashflowView.tsx:274-280`). */
.schedule-cashflow__empty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}

.schedule-cashflow__empty-text {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}