/* 06-screens-contracts-compliance.css: Stat tiles, prototype chrome, contract lifecycle, compliance group.
   Loaded by base.html, one <link> per file in number order; a later file wins on source order. */

/* ===========================================================================
   Stat tiles: the row of counts above a work list (HEA-225, HEA-227, HEA-221,
   HEA-223). A tile is a small card with the number on top of its label; a
   tone colours the number only, never the tile, so four tiles read as one row.
   =========================================================================== */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat__value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.stat__label {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.stat--warning .stat__value {
  color: var(--color-warning-fg);
}

.stat--error .stat__value {
  color: var(--color-error);
}

/* A checkbox with its label inside a .filter-bar, e.g. "Alleen geblokkeerd". */
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

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

/* Short lists inside a dashboard tile: a link line, a quieter second line,
   and a status pill (external dashboard). */
.tile-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tile-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tile-list .badge {
  align-self: flex-start;
}

/* A tile list whose items are a name with its status pill (the external
   dashboard's Dossier card, HEA-498): name left, pill right, one line each. */
.tile-list--status li {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.75rem;
}

.tile-list--status .badge {
  align-self: center;
  flex-shrink: 0;
}

.tile-subhead {
  margin: 1.25rem 0 0.25rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* Card grids of equal tiles: the Beheer overview and the prototype index. */
.proto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.beheer-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.beheer-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.beheer-card p {
  margin: 0 0 0.5rem;
}

a.beheer-card:hover {
  border-color: var(--color-border-strong);
}

.beheer-card--pending {
  opacity: 0.7;
}

/* ===========================================================================
   Prototype chrome (DEBUG only; see backend/prototype/README.md). The index
   shows each screen beside its mockup; every prototype page carries a thin bar
   at the bottom naming the screen and its states. Nothing here is used by a
   production screen.
   =========================================================================== */
.proto-card h3 {
  margin: 0.75rem 0 0.2rem;
  font-size: 1rem;
}

.proto-card p {
  margin: 0 0 0.35rem;
}

.proto-card__thumb {
  display: block;
  height: 9rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-field);
}

.proto-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.proto-card__thumb--none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.prototype-bar {
  margin-top: 2rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 0.35rem 2.5rem;
  background: var(--color-surface-strong);
  color: #fff;
  font-size: 0.8rem;
}

.prototype-bar a {
  color: #fff;
  text-decoration: none;
  opacity: 0.75;
  margin-right: 0.5rem;
}

.prototype-bar a:hover,
.prototype-bar a.active {
  opacity: 1;
  text-decoration: underline;
}

/* ===========================================================================
   Contract lifecycle (Core Flows F7): HEA-197, HEA-200, HEA-201, HEA-202,
   HEA-241, HEA-399, HEA-400. Four generic additions, no screen-specific CSS.
   =========================================================================== */

/* A pill or note parked at the right end of a .form-section__head, the way
   HEA-197 sets "1e - klant eerst" opposite the bundle title and HEA-202 sets
   "automatisch, geen handtekening" opposite the side title. */
.form-section__head-aside {
  margin-left: auto;
}

/* A row of status chips under a page header, e.g. HEA-241's "4 lopend /
   1 niet getekend / 1 loopt af < 30d". Deliberately not .stat-tiles: these
   carry a label and a count in one pill, not a number over a caption, and the
   mockup sets them at pill height rather than as cards. */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0;
}

/* The warm attention banner: HEA-200's "Aandachtspunten" and HEA-202's
   back-to-back warning. Sits beside the existing .info-banner-error, on the
   same warning tokens the badges use. */
.info-banner-warning {
  background: var(--color-warning-bg);
  border-color: rgba(138, 90, 18, 0.35);
  color: var(--color-warning-fg);
}

/* An amount that is subtracted (the kickback columns on HEA-200 and HEA-241
   are drawn red). Colour is not the only signal -- the value itself is
   written with a leading minus. */
.amount-negative {
  color: var(--color-error);
}

/* ===========================================================================
   Compliance group: the action centre (HEA-228), the escalation schedule
   (HEA-226) and the exemption page (HEA-398).
   =========================================================================== */

/* A panel's heading and its count. The count is a readout, not a status, so it
   sits on the accent fill rather than taking a .badge tone that would compete
   with the pills inside the rows. */
.task-panel__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border);
}

.task-panel__head h2 {
  margin: 0;
  font-size: 1rem;
}

.task-count {
  background: var(--color-bg-accent);
  color: var(--color-muted);
  border-radius: 4px;
  padding: 0.05rem 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
}

/* HEA-419: the category tabs as a tight grid of equal-width pills, three per
   row (two rows of three for the six categories). The steps are fixed rather
   than auto-fit so the rows always balance: auto-fit gives 4 + 2 on a wide
   screen, and one row of six never fits inside .page's 1600px cap with the
   longest title ("Ontbrekende / niet-geaccordeerde uren") on one line. Below
   the tablet breakpoint two per row, below 40rem one. Row and column gaps
   match, half the .section-grid gap, so the tabs read as one control. */
.task-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1.25rem;
}

@media (max-width: 60rem) {
  .task-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .task-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One tab: a compact pill filling its grid cell, title left, count at the
   right edge, so the counts line up in columns across the grid. */
.task-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 0.65rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.task-tile__title {
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-tile__count {
  flex-shrink: 0;
  min-width: 1.75rem;
  text-align: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.task-tile--active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: #fff;
}

.task-tile--active .task-tile__count {
  background: #fff;
  color: var(--color-text);
}

.task-tile--disabled {
  cursor: default;
  color: var(--color-muted);
}

.task-tile--disabled .task-tile__count {
  background: var(--color-bg-accent);
  color: var(--color-muted);
}

/* Task rows are plain lines with one action on the right, the same lighter
   treatment .check-row uses: HEA-228 draws no border and no fill per row, and
   boxing them would cost a panel half its height for no information. */
/* The list is a grid of two columns, text and button, and every row lies on it (subgrid): the
   button column is as wide as the card's widest button, so the buttons of one card are one
   width whatever their labels. */
.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.85rem;
}

.task-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0.5rem 0;
  /* Every row has the rule's width, the first one's transparent: all rows are one height. */
  border-top: 1px solid transparent;
}

.task-row + .task-row {
  border-top-color: var(--color-bg-accent);
}

.task-row__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

/* A row that carries a hint (its tooltip, on the body) is one line per text, cut with an
   ellipsis: a long relation name or a second item must not make one row taller than its
   neighbours. The hint holds the whole text. Rows without a hint wrap as before. */
.task-row__body[title] .task-row__title,
.task-row__body[title] .task-row__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A title with a tail cuts its head and keeps the tail ("Bouwbedrijf Van Di… · leveranciers-
   dossier"): the tail is what tells the rows of one card apart from other kinds of row. */
.task-row__body[title] .task-row__title--tailed {
  display: flex;
}

.task-row__body[title] .task-row__head {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row__body[title] .task-row__tail {
  flex: none;
  white-space: pre;
}

.task-row__title {
  font-size: 0.875rem;
  font-weight: 600;
}

.task-row__sub {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* The filled and the outlined button of a card's rows are one size: their borders and paddings
   differ, so the box is set here instead of left to them. */
.task-row__action {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Wide enough for the usual labels, so cards beside each other get the same width too. */
  min-width: 10rem;
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

/* On a phone the button would leave the text a few words per line: it goes under the text, the
   full width of the card. */
@media (max-width: 40rem) {
  .task-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-row {
    row-gap: 0.5rem;
  }
}

/* Vertical step list with a rail and a dot per step, for a schedule that runs
   in time order (HEA-226's escalation, and any later history or audit trail).
   The tone colours the dot only, as .stat does with its value. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.timeline__step {
  position: relative;
}

.timeline__step::before {
  content: "";
  position: absolute;
  left: -2.05rem;
  top: 0.3rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
}

.timeline__step--warning::before {
  border-color: var(--color-warning-fg);
}

.timeline__step--error::before {
  border-color: var(--color-error);
}

.timeline__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.timeline__name {
  min-width: 8rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.timeline__offset {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* The day offset is a two- or three-digit number; the global control rule
   would stretch it across the card. Class + attribute beats the global
   input[type] selector, per the specificity trap in the frontend-ui skill. */
.timeline__offset input[type="number"] {
  width: 4.5rem;
  text-align: center;
  font-weight: 600;
}

/* A schedule setting under the timeline: the offset's markup at body size and colour. */
.timeline__offset--setting {
  font-size: 0.875rem;
  color: var(--color-text);
}

.timeline__note {
  margin: 0.2rem 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* Rendered example of an outgoing mail: the dark sender bar of HEA-226, then
   the body as the recipient sees it. HEA-205's e-mail template editor shows
   the same preview. */
.mail-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.mail-preview__bar {
  background: var(--color-surface-strong);
  color: #fff;
  padding: 0.85rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.mail-preview__body {
  padding: 1.1rem;
  font-size: 0.875rem;
}

.mail-preview__body > p {
  margin: 0 0 0.75rem;
}

.mail-preview__subject {
  font-weight: 700;
}

.mail-preview__missing {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.mail-preview__missing li {
  font-weight: 600;
}

.mail-preview__missing li::marker {
  color: var(--color-primary);
}

/* A section grid nested inside a taller column (the action centre's panels
   beside the intake launcher). Without this its auto rows stretch to fill the
   column and every card grows a block of dead space; cards within one row
   still share a height. */
.section-grid--start {
  align-content: start;
}

/* HEA-194's Tarief & marge card (contract flow step 1, HEA-463): the rate row on the form's own
   12-column grid, flat as the mockup draws it. Vanaf and Tot share the first field column, the rates
   the second, Brutomarge takes the third (x=984 in the mockup, under Functie). Headers are the
   field-label face; the inputs are .field controls, so they match the form's control height; a
   text cell is a control high, so a row lines up whether or not an input shows an error under it. */
.rate-grid {
  margin-top: 0.5rem;
}

.rate-grid__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 1.5rem;
  align-items: start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.rate-grid__row--head {
  padding-top: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.rate-grid__from {
  grid-column: 1 / span 2;
}

.rate-grid__until {
  grid-column: 3 / span 2;
}

.rate-grid__purchase {
  grid-column: 5 / span 2;
}

.rate-grid__sales {
  grid-column: 7 / span 2;
}

.rate-grid__margin {
  grid-column: 9 / span 4;
}

.rate-grid__value {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: 0.875rem;
}

/* Placeholders ("(einde contract)") in the muted ink. Not .muted: that class carries a block
   margin that would stretch the row. */
.rate-grid__value--muted {
  color: var(--color-muted);
}

/* The one-cell "no periods yet" line spans the row. */
.rate-grid__value--wide {
  grid-column: 1 / -1;
}

.rate-grid__question {
  margin-top: 1rem;
}

/* Narrow screens stack the cells, as .field-grid does at the same breakpoint. */
@media (max-width: 60rem) {
  .rate-grid__row > * {
    grid-column: 1 / -1;
  }
}

/* ===========================================================================
   Leveranciers > Dossiers (HEA-227): the compliance worklist. Fixed columns,
   so every filter and role lands its columns at the same x whatever the rows
   hold. Percentages of the 1360px table at 1440, measured on the seed: the
   item column fits two long pills and a "+N" untruncated, the exemption
   column "Mgmt t/m <datum>", the action column "Stuur aanvullingslink ·
   Bekijk". A longer party name truncates with its title, as on the overview.
   =========================================================================== */
.dossier-worklist {
  table-layout: fixed;
}

.dossier-worklist .col-party {
  width: 14%;
}

.dossier-worklist .col-type {
  width: 8%;
}

.dossier-worklist .col-items {
  width: 39%;
}

.dossier-worklist .col-payout {
  width: 9%;
}

.dossier-worklist .col-exemption {
  width: 13%;
}

.dossier-worklist .col-row-actions {
  width: 17%;
}

/* Contract detail's documents: every row is two lines tall, whatever it holds. The name cell
   takes the room the others leave (max-width 0 lets its lines cut off instead of widening the
   table): the name with its link, then the newest request's line. That line folds out into every
   request's line in full, a rejection's reason included; closed, it never adds height. */
.document-table tbody td {
  height: 3rem;
}

.document-table td:first-child {
  width: 100%;
  max-width: 0;
}

/* The name gives way before its link: a long file name is cut, "Naar ondertekening" never. */
.document-table__name {
  display: flex;
  gap: 0.35rem;
  white-space: nowrap;
}

.document-table__name > :first-child,
.document-table__history summary .cell-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-table__link {
  flex-shrink: 0;
}

.document-table__history summary {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

.document-table__history summary::-webkit-details-marker {
  display: none;
}

/* The cue that the line folds out, also on a row with one request: a cut line reads as a
   control, not as lost text. */
.document-table__history summary::before {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.7rem;
  content: "\25B8";
}

.document-table__history[open] summary::before {
  content: "\25BE";
}

.document-table__history summary:hover .cell-sub {
  text-decoration: underline;
}

.document-table__history summary .cell-sub {
  min-width: 0;
}

.document-table__more {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.document-table__history ul {
  margin: 0.3rem 0 0;
  padding: 0 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.8rem;
  list-style: none;
}

.document-table td:not(:first-child) {
  white-space: nowrap;
}

/* The upload of a signed contract under that table: its label left, the button right, as the
   upload on step 3. The file input is hidden; the button is its label. */
.document-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  position: relative;
}

.document-upload > .section-note,
.document-upload > label {
  margin: 0;
}

.document-upload > .field__errors {
  flex-basis: 100%;
  order: 1;
  margin: 0;
}