/* 07-screens-brokers-money.css: Brokers group (contract-check wizard), money group (hours, invoicing, payments).
   Loaded by base.html, one <link> per file in number order; a later file wins on source order. */

/* ===========================================================================
   Brokers group: the contract-check wizard (HEA-238) and the counts above a
   work list that is too small for .stat-tiles (HEA-238's lijstpagina).
   =========================================================================== */

/* A row of status pills carrying counts. Lighter than .stat-tiles, which
   spends a card and a 1.6rem number on each figure; five rows do not warrant
   that. Also the wizard bar's left cluster. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.chip-row--inline {
  margin: 0;
  flex-shrink: 0;
}

/* A control parked at the right end of a .form-section__head, the way
   .info-banner__actions sits at the right end of a banner: HEA-238 puts
   "+ Afwijking toevoegen" and the page indicator there. */
.form-section__head-action {
  margin-left: auto;
  flex-shrink: 0;
}

/* Title and note as one block, so a long note wraps under the title instead
   of pushing .form-section__head-action onto a row of its own. The basis has
   to be 0: flex wraps on the hypothetical size, so an `auto` basis puts the
   action on a second line before the note is ever allowed to shrink. */
.form-section__head-text {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
}

/* A card whose body should fill the height the grid row gives it, rather than
   leaving the bottom third empty: HEA-238's document pane beside a much taller
   review column. */
.form-section--stretch {
  display: flex;
  flex-direction: column;
}

.form-section--stretch > .doc-pane {
  flex: 1 1 auto;
}

/* A stretched card of fields that closes with a note: the fields take the
   spare height, so two such cards side by side end their notes on one line
   even when one has a field more (HEA-202's renewal cards). */
.form-section--stretch > .field-grid {
  flex: 1 1 auto;
  align-content: start;
}

/* One reviewable item in the wizard: a deviation to carry over to the supplier
   or a WTTA risk to act on. A card, not a .form-section, because a stack of
   them sits *inside* one -- so it carries the tighter padding and no top
   margin of its own. */
.check-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}

.check-card + .check-card {
  margin-top: 0.75rem;
}

/* The item being worked on. The deck fills it pink on the WTTA tab and leaves
   it white on the other; the orange edge alone carries the state on both, and
   the badge beside the title says which state it is -- colour is never the
   only signal. */
.check-card--active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.check-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.check-card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.check-card__body {
  margin: 0.45rem 0 0;
  font-size: 0.875rem;
}

/* The clause the card cites, in the pane's own accent so the eye pairs the two. */
.check-card__source {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary-hover);
}

.check-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

/* What still has to happen, or what was agreed. Muted by default; the open
   ones are set apart with --open rather than by being the only red text. */
.check-card__note {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-muted);
}

.check-card__note--open {
  color: var(--color-error);
  font-style: normal;
}

.check-card__actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.check-card__resolve {
  flex-shrink: 0;
}

/* The source document beside the list. Its body is drawn as rules: the real
   document viewer is not built yet, and rendering invented contract prose
   would read as content rather than as a placeholder. */
.doc-pane {
  background: var(--color-field);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}

.doc-pane__title {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.doc-line {
  display: block;
  height: 0.45rem;
  border-radius: 3px;
  background: var(--color-bg-accent);
  margin: 0.55rem 0;
}

.doc-line--w95 {
  width: 95%;
}

.doc-line--w85 {
  width: 85%;
}

.doc-line--w75 {
  width: 75%;
}

.doc-line--w60 {
  width: 60%;
}

.doc-clause {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* The clause a card cites, highlighted in the document the way a reader would
   mark it. Its tone matches the card's status: amber for a proposal to carry
   over, red for a WTTA risk. */
.doc-highlight {
  display: block;
  padding: 0.2rem 0.35rem;
  font-size: 0.8125rem;
  background: var(--color-warning-bg);
}

.doc-highlight--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* The bar that closes a wizard: counts left, the rule that gates Afronden in
   the middle, the two actions right. */
.wizard-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 0.85rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.wizard-bar__note {
  margin: 0;
  flex: 1 1 16rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.wizard-bar__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* An action that is not reachable yet (Afronden before every item is done).
   Lives with .btn conceptually; kept in this block so the group's additions
   stay in one place. */
.btn:disabled {
  background: var(--color-bg-accent);
  border-color: var(--color-border);
  color: var(--color-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* A busy island button is disabled too (the island blocks other writes), but it
   is working, not unavailable: it keeps its own look (busy indicator at .spinner). */
.btn[aria-busy="true"]:disabled {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
  cursor: progress;
}

.btn-quiet[aria-busy="true"]:disabled {
  opacity: 1;
  cursor: progress;
}

/* ===========================================================================
   Money group: hours, invoicing and payments (HEA-207 .. HEA-213, HEA-219,
   HEA-243). Everything here is shared by at least two of those screens; the
   one-screen decorations in the deck are built from the existing vocabulary
   instead.
   =========================================================================== */

/* A single-task page an external account lands on (hours submission,
   self-bill review). The deck draws these on a 1180 frame with one centred
   card, far narrower than the 1600 app band: one form, one decision, no list
   beside it. Used by HEA-207 and HEA-243. Declared after .page so it wins on
   source order at equal specificity. */
.page-task {
  max-width: 64rem;
}

/* Row of summary chips above a work list ("6 contracten - 2 klaar om te
   factureren", HEA-212). The chips themselves are .badge-*; this lays them
   out. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

/* A row of secondary actions belonging to the content rather than to the page
   header: the invoice toolbar (HEA-213) and the self-bill footer (HEA-243). */
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

/* ---------------------------------------------------------------------------
   Month grid of days. HEA-207 fills it with inputs, HEA-208 with recognised
   values and a confidence tone; both are the same seven-column calendar, so
   the tones are modifiers rather than two separate grids.
   --------------------------------------------------------------------------- */
.day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.day-grid__weekday {
  padding-left: 0.2rem;
  color: var(--color-muted);
  font-size: 0.75rem;
}

.day-cell {
  min-width: 0;
  padding: 0.35rem 0.5rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* Leading blanks before the first of the month: keeps the columns aligned
   without drawing an empty box. */
.day-cell--pad {
  border-color: transparent;
  background: none;
}

.day-cell__num {
  display: block;
  color: var(--color-muted);
  font-size: 0.7rem;
}

.day-cell__value {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* [type] carried for the same reason .field input[type] carries it: the
   global input[type="text"] rule is declared later and would otherwise win. */
.day-cell input[type] {
  width: 100%;
  max-width: none;
  margin-top: 0.2rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.8125rem;
}

/* Recognised with confidence (HEA-208). */
.day-cell--ok {
  background: var(--color-success-bg);
  border-color: rgba(22, 101, 52, 0.2);
}

/* Recognised, low confidence: must be confirmed by hand (HEA-208). Always
   paired with a "controleren" pill in the cell, never colour alone. */
.day-cell--check {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-fg);
}

/* Weekend, or a day with no hours. */
.day-cell--off {
  background: var(--color-bg-accent);
  color: var(--color-muted);
}

.day-cell--off .day-cell__value {
  font-weight: 400;
}

/* The same cells laid out as a strip around a rate change (HEA-209): only the
   days either side of the boundary are shown, so a whole calendar would be
   noise. */
.day-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.day-strip .day-cell {
  min-width: 6rem;
}

/* The rate boundary itself: a rule between two days, labelled underneath. */
.day-strip__break {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.day-strip__break::before {
  content: "";
  width: 2px;
  height: 2.6rem;
  background: var(--color-primary);
}

/* Key to the tones above, sitting beside a card heading (HEA-208). */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-left: auto;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.legend__swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.legend__swatch--ok {
  background: var(--color-success-bg);
}

.legend__swatch--check {
  background: var(--color-warning-bg);
}

.legend__swatch--off {
  background: var(--color-bg-accent);
}

/* ---------------------------------------------------------------------------
   Table extras for the money screens.
   --------------------------------------------------------------------------- */

/* Totals row under an invoice or reconciliation table. A tfoot rather than a
   styled last row, so the total is never mistaken for a line. */
.data-table tfoot td {
  border-top: 1px solid var(--color-border-strong);
  border-bottom: none;
  font-weight: 700;
}

/* Tick-off column on the payments screen (HEA-219): the checkbox centres
   under its header and does not stretch to the global input width. */
.data-table th.col-check,
.data-table td.col-check {
  width: 6.5rem;
  text-align: center;
}

.col-check input {
  width: auto;
  margin: 0;
}

/* A tick that cannot be set yet (dossier incomplete, kickback unsigned). The
   ring is the mockup's amber box; the row's status pill and its note carry
   the same fact in words, so colour is never the only signal. */
.check-blocked {
  display: inline-flex;
  padding: 2px;
  border: 2px solid var(--color-warning-fg);
  border-radius: 4px;
}

/* A note under the first cell of a row, explaining that row's block
   (HEA-219). Reads as part of the row, not as a line of its own. */
.row-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-muted);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   Banner and text tones the money screens need and the base set lacks.
   --------------------------------------------------------------------------- */

/* Text the system inserted and the user may still edit -- the invoice
   instructions pulled into the mail body (HEA-213 mailpreview). */
.text-accent {
  color: var(--color-primary-hover);
}

/* Numbers and dates in a wide table never wrap: a line break inside
   "16.640,00" or "01-07-2026" reads as two values (HEA-213, HEA-219). */
.data-table .col-num,
.data-table .col-date {
  white-space: nowrap;
}

/* A ticked payment is green in the deck, and green is this palette's "done".
   accent-color recolours the native control without replacing it, so the
   checkbox stays a checkbox for the keyboard and the screen reader. */
.col-check input {
  accent-color: var(--color-success-fg);
}

/* HEA-505: list pages at 1200 and 1024. */

/* Filter bars (HEA-505): below 1400px the controls of a bar share each row's width, so every row ends on the same
   right edge: the search box and a segmented group take two shares, every other control one,
   and the forced break after the first row is dropped. */
@media (max-width: 1400px) {
  .filter-bar--even > .filter-bar__break {
    display: none;
  }

  .filter-bar--even > :not(noscript) {
    flex: 1 1 10.5rem;
    min-width: 0;
    max-width: none;
  }

  .filter-bar--even > input[type="search"],
  .filter-bar--even > input[type="text"] {
    flex: 2 1 16rem;
    width: auto;
  }

  .filter-bar--even > .segmented {
    flex: 2 1 auto;
    display: flex;
  }

  .filter-bar--even .segmented__option {
    flex: 1 1 0;
  }

  .filter-bar--even .segmented__option > span {
    flex: 1 1 auto;
    padding-inline: 0.5rem;
    text-align: center;
    white-space: nowrap;
  }

  .filter-bar--even > .btn {
    flex: 0 0 auto;
  }
}

/* The supplier list's names never wrap: rows keep one height (HEA-462) and a long name ends in
   an ellipsis, its full text in the title. Scoped to the card frame, so the Dossiers worklist
   keeps its wrapping. */
.table-scroll--card .pill-row > a {
  white-space: nowrap;
}

/* Below 1400px the supplier and contract tables take tighter cells, so at 1200 they fit
   without a scroll; names end in an ellipsis. At 1024 they scroll inside the card. */
@media (max-width: 1400px) {
  .table-scroll--compact .data-table th,
  .table-scroll--compact .data-table td {
    padding: 0.7rem 0.5rem;
  }

  .table-scroll--compact .data-table--pills .col-truncate {
    max-width: 11rem;
  }

  /* 7rem leaves the Aandacht column room for its first pill in full on two lines at 1200. */
  .table-scroll--compact .contract-list .col-truncate {
    max-width: 7rem;
  }

  .table-scroll--compact .data-table th {
    letter-spacing: 0.03em;
  }
}

/* One line per cell in the company and candidate lists: a name, a broker or a supplier that
   does not fit ends in an ellipsis instead of wrapping, so every row has one height. */
.table-scroll--oneline .data-table td {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-scroll--oneline .data-table td:first-child {
  max-width: 18rem;
}

/* The candidate list: every row is as high as a row with an e-mail line and two dossier pills
   (those wrap inside their cell), whatever the row holds. */
.table-scroll--candidates .data-table td {
  height: 3.25rem;
}

.table-scroll--candidates .data-table td:nth-child(5) {
  max-width: 18rem;
  overflow: visible;
  white-space: normal;
}

/* The candidate search box is wide enough for its placeholder, and its five filters split
   three over two rows below 1400px. */
.filter-bar--candidates input[type="search"] {
  width: 21.5rem;
}

@media (max-width: 1400px) {
  /* The billing party select lists the longest company names of the contract bar. */
  #contract-filters > select[name="billing_party"] {
    flex-basis: 14rem;
  }

  .filter-bar--candidates.filter-bar--even > input[type="search"] {
    flex-basis: 21.5rem;
  }

  .filter-bar--candidates.filter-bar--even > select {
    flex-basis: 13rem;
  }
}

/* The customer list's bar carries a search box, a segmented group and two filters. At 1024 the
   search box takes the room that leaves the two filters side by side on the second row, rather
   than one filter alone. */
@media (max-width: 1100px) {
  .filter-bar--roomy.filter-bar--even > input[type="search"] {
    flex-basis: 27rem;
  }
}

/* The contract bar carries a search box and six filters (HEA-492 adds Tekenstatus, HEA-202
   Verlengt binnenkort) on HEA-199's one row at 1440. The three selects with fixed options keep
   the width of their longest one; the search box and the three company selects, as wide as the
   longest company name, share the rest, so a long name gives up width instead of wrapping the
   bar. */
@media (min-width: 1401px) {
  #contract-filters {
    flex-wrap: nowrap;
  }

  #contract-filters > input[type="text"] {
    flex: 2 1 16rem;
    width: auto;
    min-width: 0;
  }

  #contract-filters > select {
    flex: 0 0 auto;
  }

  #contract-filters > select[name="customer"],
  #contract-filters > select[name="billing_party"],
  #contract-filters > select[name="supplier"] {
    flex: 1 1 9rem;
    min-width: 0;
  }

  #contract-filters > .filter-bar__break {
    display: none;
  }
}

/* Below 1400px the seven controls split four over three, as at 1024, rather than one filter
   stretched across a second row. */
@media (max-width: 1400px) {
  #contract-filters > .filter-bar__break {
    display: block;
    flex: 0 0 100%;
    height: 0;
  }
}

/* The Aandacht column takes the room the other columns leave (width: 100%), and only that
   (max-width: 0 keeps its pills out of the table's minimum width), so the contract list fits its
   card at every width HEA-505 made it fit. The first pill reads in full: where the room is short
   it wraps to a second line inside the row's height. "+n" stays whole beside it, and every point
   is in full in the title. */
.contract-list td.col-attention {
  width: 100%;
  max-width: 0;
}

.attention-pills {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}

.attention-pills > .badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.attention-pills > .badge-neutral {
  padding-inline: 0.25rem;
}

.attention-pills > .badge-warning {
  flex-shrink: 1;
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
  padding-inline: 0.3rem;
}

/* At 1024 the list scrolls inside its card anyway: the Aandacht column takes the room its pills
   need instead of the leftover. */
@media (max-width: 1100px) {
  .contract-list td.col-attention {
    width: 9rem;
    min-width: 9rem;
  }
}