/* 04-detail-lists.css: Detail blocks: info rows, divider, checklist rows, check grid; then the narrow-screen span collapse.
   Loaded by base.html, one <link> per file in number order; a later file wins on source order. */

/* Dense label/value block for detail screens -- HEA-192's "Gegevens" card.
   Deliberately not a field grid: read-only values need a row, not a control
   with input-sized padding, which is what lets that card stay short enough
   to sit beside a taller one. */
/* Lined paper: one rule straight across each row, content resting on the
   rule instead of floating in the middle of a band: boxed or part-divided
   rows read as input fields (HEA-440). */
.info-rows {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  column-gap: 0;
  row-gap: 0;
  margin: 0;
}

/* No column-gap: dt and dd sit in adjacent grid tracks with nothing between
   them, so their border-bottom draws as one unbroken line across the row.
   dt's padding-right stands in for the gap instead. Every row keeps its
   rule, the last one too -- on ruled paper the last line is still a line.
   dt and dd are the same font size and line-height, so their boxes are the
   same height and align-items: flex-end lands both rules on the same pixel. */
.info-rows dt,
.info-rows dd {
  margin: 0;
  display: flex;
  align-items: flex-end;
  padding: 0.95rem 0 0.3rem;
  font-size: 0.875rem;
  line-height: 1.25;
  border-bottom: 1px solid var(--color-border);
}

/* dl dt (above) sets a generic uppercase/letter-spaced label style; the
   lined-paper label reads at normal case and weight like the value. */
.info-rows dt {
  padding-right: 1.5rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
}

/* min-width and overflow-wrap: a value with no break opportunity (a long From header or address)
   wraps inside its column instead of widening the grid past the card. */
.info-rows dd {
  font-weight: 400;
  color: var(--color-text);
  gap: 0.3rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A value built from several parts -- klantdetail's Raamovereenkomst is a
   number, a download link and an end date -- reads as one run of words. dd is
   a flex container, which drops the whitespace between those parts, so the
   gap above supplies it; a single-part value is unaffected. The link takes
   the same treatment as one in a .data-table: bold, in the brand tone, no
   underline -- that treatment distinguishes it from the plain values around
   it, so the reader spots which row leads somewhere. */
.info-rows a:not(.btn):not(.action-link) {
  color: var(--color-primary-hover);
  font-weight: 600;
  text-decoration: none;
}

.info-rows a:not(.btn):not(.action-link):hover {
  text-decoration: underline;
}

/* A dd that pairs a value with an inline hint ("25% (default on new
   contracts)") holds both as flex items of the flex dd, which trims the space
   the template writes between them at the item boundary. This margin stands in
   for that space, so the hint keeps its gap; scoped to .info-rows so
   muted-inline elsewhere (a document's version) is untouched (HEA-462, against
   HEA-189_leverancierdetail). */
.info-rows dd .muted-inline {
  margin-inline-start: 0.3em;
}

/* A badge value (klantdetail's Status, a supplier's ZZP "n/a" row, a
   template's "to check" flag) is taller than a text line -- .badge's own
   padding and border outgrow dd's 1.09375rem (0.875rem * 1.25) line box,
   which would grow that one row past the rest (HEA-440). Shrunk to fit inside it:
   0.75rem content + 0.0625rem*2 padding + 1px*2 border = 1rem, under the
   text line box, so this row's height still comes from dt's plain text and
   the grid stays uniform. Scoped to .info-rows -- .badge elsewhere (tables,
   headers, card headings) keeps its full size. */
.info-rows .badge {
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.0625rem 0.4rem;
}

/* Labelled rule between two check lists, e.g. HEA-192's documents above and
   checks below inside one card. */
.check-divider {
  margin: 1.25rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Checklist rows (documents, checks): control + name + status pill. */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* A row, not a box. HEA-192 lists documents and checks as plain lines with a
   status pill on the right -- no border, no fill -- at roughly a 35px pitch.
   Boxing each one would cost the card half its height again for no
   information. */
.check-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0;
}

.check-row__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.check-row__status {
  margin-left: auto;
  flex-shrink: 0;
}

/* The row's end slot (HEA-447): the action that acts on this row, anchored
   right of the status pill.

   Reserved on every row of both lists, filled or not, and a fixed width
   rather than shrink-to-fit. .check-row__status is pushed right by
   margin-left:auto, so without a slot on every row the pills would sit at one
   x on a row carrying an action and at another on a row without one. Wide
   enough for the longest action label on one line: a button broken over two
   lines would set the height of its row alone. */
.check-row__action {
  flex: 0 0 7.5rem;
  display: flex;
  justify-content: flex-end;
}

.check-row__action .btn-quiet {
  white-space: nowrap;
}

/* A link inside a row's name cell, with its sub-line in small muted type
   under it, as HEA-192 draws its document rows. A candidate document row
   carries its Downloaden action in the end slot instead. */
.check-row__name a {
  color: var(--color-primary-hover);
  text-decoration: none;
}

.check-row__name a:hover {
  text-decoration: underline;
}

.check-row__hint {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
}

/* Checks that record who performed them and when (HEA-232): name with its
   verplicht/optioneel pill, performer, date, evidence, then the status and
   its checkbox at the far right. Unlike .check-row these rows carry a fill,
   as the mockup draws them: five values per row need a boundary to read as
   one record. Every row repeats the same columns so they align down the
   list. */
.check-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.check-grid__row {
  display: grid;
  grid-template-columns: 13rem 13rem 10rem minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 1.25rem;
  /* Every row reserves the height the tallest needs. The evidence column is
     the row's only flexible one, so it is the first to wrap as the viewport
     narrows, which would otherwise leave one row taller than its neighbours.
     The reserve belongs on the row and not on the evidence cell: a
     min-height there is inherited by the clamped value, which grows to match
     it and takes the row with it. */
  min-height: 4.2rem;
  padding: 0.6rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.check-grid__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.check-grid__value,
/* The value is clamped to two lines, so no row's evidence can push past the
   height every row reserves (.check-grid__row). Clamping loses nothing here:
   the identity row's evidence repeats the Identificatie card higher up the
   same page, and the full string stays in the element's title. */
.check-grid__evidence {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 0;
}

.check-grid__value {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.check-grid__evidence .field {
  font-weight: 400;
}

.check-grid__caption {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
}

.check-grid__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.check-grid__tick {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.check-grid__errors {
  grid-column: 1 / -1;
}

@media (max-width: 60rem) {
  .check-grid__row {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .check-grid__status {
    justify-content: flex-start;
  }
}

/* A table that keeps its own width on a narrow screen and scrolls sideways inside this box,
   instead of pushing the page wide. */
.table-scroll {
  overflow-x: auto;
}

/* The box is a tab stop, so the keyboard can scroll it; the outline sits inside, where the
   box's own clipping cannot cut it. */
.table-scroll:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* A list's table frame reads as a card: the frame carries the border and the radius, so a table
   wider than the window is cut at the card's edge, not at a missing border. What the table
   partial puts under the table (a legend, the pagination) sits inside it and gets the card's
   inner padding. */
.table-scroll--card {
  margin-top: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.table-scroll--card .data-table {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table-scroll--card .data-table ~ * {
  padding-inline: 1rem;
}

/* The line above a table that says it scrolls sideways. components/_scroll_hint.html shows it
   exactly while the frame's table is wider than the frame. */
.table-scroll-hint,
.invitation-table__hint {
  margin: 0.75rem 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.table-scroll-hint[hidden] {
  display: none;
}

/* A table whose rows are all two lines high. The columns have fixed shares of the width (set per
   table), a cell holds at most two .cell-line lines or one .cell-clamp text of two lines, and
   whatever is longer ends in an ellipsis. Content never sets a row's height, so no row stands
   taller than the next. */
.data-table--two-line {
  table-layout: fixed;
}

.data-table--two-line th,
.data-table--two-line td {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.data-table--two-line th:first-child,
.data-table--two-line td:first-child {
  padding-left: 0.75rem;
}

/* A cell's height is its content box: two lines of 1.6rem. A line is that high so a .badge
   (1.525rem with its border) fits it without pushing the row. */
.data-table--two-line td {
  height: 3.2rem;
  line-height: 1.6rem;
}

/* The table's last row has no rule under it; it takes that pixel back, so it is as high as the
   others. */
.data-table--two-line tbody tr:last-child td {
  height: calc(3.2rem + 1px);
}

/* A column's share (set per table on its th) is the whole cell, padding included. */
.data-table--two-line th {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-line {
  display: block;
  height: 1.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-line--sub {
  color: var(--color-muted);
}

/* A second line with nothing on it takes no room: the first line then stands in the middle of
   the row, level with the cells that hold one line. */
.cell-line:empty {
  display: none;
}

/* A pill hangs from the top of its line: on the baseline it would be cut off at the bottom. */
.cell-line > .badge {
  vertical-align: top;
  margin-top: 0.0375rem;
}

/* An e-mail address: it breaks where its markup allows (a <wbr> after the "@"). Only a piece
   longer than the whole line breaks inside itself, so it is never cut off. */
.cell-clamp--address {
  overflow-wrap: anywhere;
}

.cell-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: 3.2rem;
  overflow: hidden;
}

.data-table--two-line .row-actions--stacked {
  gap: 0;
}

.data-table--two-line .row-actions--stacked .action-link {
  height: 1.6rem;
  line-height: 1.6rem;
}

/* Below tablet width the column spans stop making sense; every field goes
   full width. Must come after the span modifiers to win on source order. */
@media (max-width: 60rem) {
  .field-grid > *,
  .section-grid > * {
    grid-column: 1 / -1;
  }
}