/* 10-contract-flow.css: the contract flow's screens: step 1 Contractgegevens (its upload and
   banners), step 2 Vergelijken, step 3 Leverancierscontract and step 4 Ondertekening with its
   safety summary; the tariefperioden page's bar and the contract detail's addenda history.
   Loaded by base.html, one <link> per file in number order; a later file wins on source order. */

/* ===========================================================================
   Step 2 Leverancierscontract (HEA-416): templates/contracts/supplier_contract.html,
   against the S6 wireframe's 2fr/3fr split (span-5 + span-7 on the 12-column
   grid). The left cards stack in their column; the grid's gap spaces them.
   =========================================================================== */
.supplier-contract__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.supplier-contract__side > .form-section,
.supplier-contract__side > div > .form-section {
  margin-top: 0;
}

/* The tabs sit on the column's top edge, level with the first card. */
.supplier-contract__tabs {
  margin-top: 0;
}

.supplier-contract__gaps {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
}

/* Controle stays inside its card: fixed columns, tighter cells, the term column narrow. Its
   row headers read as the terms they are, not as more column heads: body text, on the row's
   own fill. */
.data-table.supplier-contract__terms {
  table-layout: fixed;
}

.supplier-contract__terms th,
.supplier-contract__terms td {
  padding: 0.75rem 0.75rem;
  overflow-wrap: break-word;
}

/* "Leverancierscontract" is the longest head; at this size it fits its column in one piece. */
.supplier-contract__terms thead th {
  font-size: 0.72rem;
  letter-spacing: 0;
  overflow-wrap: normal;
}

.supplier-contract__terms thead th:first-child {
  width: 26%;
}

.data-table.supplier-contract__terms tbody th {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
}

.data-table.supplier-contract__terms tbody tr:nth-child(even) th {
  background: var(--color-field);
}

.data-table.supplier-contract__terms tbody tr:last-child th {
  border-bottom: none;
  border-bottom-left-radius: calc(var(--radius) - 1px);
}

/* A marked term looks urgent, as the user asked at the design gate: the row on the warning
   fill, both values in the error colour, and the reason in a line under the table. */
.data-table.supplier-contract__terms tbody tr.supplier-contract__term--marked th,
.data-table.supplier-contract__terms tbody tr.supplier-contract__term--marked td {
  background: var(--color-warning-bg);
}

.data-table.supplier-contract__terms tbody tr.supplier-contract__term--marked td {
  color: var(--color-error);
  font-weight: 600;
}

.supplier-contract__term-reason {
  margin: 0.6rem 0 0;
  color: var(--color-error);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Links on the contract flow's cards in the brand's link colour, as the check rows have it. */
.supplier-contract__side a:not([class]),
#preview a:not([class]),
.sign-side a:not([class]),
.customer-card__file {
  color: var(--color-primary-hover);
  text-decoration: none;
}

.supplier-contract__side a:not([class]):hover,
#preview a:not([class]):hover,
.sign-side a:not([class]):hover,
a.customer-card__file:hover {
  text-decoration: underline;
}

/* "+ Variabele invoegen" on the free block's label row, right-aligned. */
.free-terms__label-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

/* The empty tab Klantcontract of an external KC: one centred card that sends to step 1. */
.supplier-contract__kc-empty {
  margin-top: 0;
  text-align: center;
  padding: 3rem 2rem;
}

.supplier-contract__kc-empty .section-note {
  margin: 0.5rem auto 1.25rem;
  max-width: 32rem;
}

.supplier-contract__signed {
  margin-top: 0;
}

/* Step 1's signed-copy upload: on one line at the fields' height (36px, as the select beside
   it): the filename, cut short with an ellipsis rather than wrapping, the date, then the
   trigger, which is exactly as tall as the fields. */
.customer-card__upload {
  align-items: center;
  gap: 0.75rem;
  min-height: 2.25rem;
  white-space: nowrap;
}

.customer-card__file {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-card__trigger {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 2.25rem;
  padding-block: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.supplier-contract__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.supplier-contract__bar .section-note {
  margin: 0;
}

/* Step 2's tabs with "Pdf bekijken" at the far end of their row (HEA-472). */
/* The row owns the rule under the tabs, so it runs under the "PDF bekijken" link too; the tabs
   sit one pixel over it, so the open tab's line covers the rule. */
.supplier-contract__tab-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
}

.supplier-contract__tab-row .supplier-contract__tabs {
  flex: 1 1 auto;
  border-bottom: 0;
  margin-bottom: -1px;
}

.supplier-contract__pdf-link {
  flex: none;
  font-size: 0.875rem;
}

.supplier-contract__bar-actions {
  display: flex;
  gap: 0.5rem;
  flex: none;
}

/* "Contract verouderd": the reason at the left, Corrigeren at the right, on one line. */
/* A div, so without a paragraph's own top margin: it would sit against the flow track. */
.supplier-contract__outdated {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.supplier-contract__outdated p {
  margin: 0.15rem 0 0;
}

/* "Verstuurde concepten" stays inside its card: tight cells, one line each. */
.data-table.supplier-contract__dispatches {
  margin-top: 0;
}

.supplier-contract__dispatches th,
.supplier-contract__dispatches td {
  padding: 0.6rem 0.75rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* A row of the card "Definitief vN": what it is at the left (a title over a muted line), its
   one action at the right. */
.supplier-contract__file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

.supplier-contract__file > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.875rem;
}

.supplier-contract__file strong {
  overflow-wrap: anywhere;
}

.supplier-contract__file .section-note {
  margin: 0;
}

.supplier-contract__file > .btn-quiet {
  flex: none;
}

/* ===========================================================================
   Step 3 Ondertekening (HEA-472): templates/contracts/signing.html, against
   wireframe 5 of 2026-09-28. One card per side: the order number, the
   contract with its state pills over a muted line, and the side's action at
   the right. Every card is as tall as the tallest, and every action is one
   control height (2.25rem), whatever it is. The tallest card has two muted lines and one
   line of what went wrong under them (HEA-198); the minimum height keeps room for all three,
   so a card with an error is not taller than its neighbour. The number and the action span
   the error line's row too: they sit on the card's centre with or without an error.
   =========================================================================== */
.sign-side {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0 1rem;
  align-items: center;
  align-content: center;
  min-height: 9rem;
  box-sizing: border-box;
}

/* Two notices above the confirmation's cards stand the cards' gap apart, not a banner's
   own smaller margin. */
.sign-notice + .sign-notice {
  margin-top: 1.25rem;
}

.sign-side__number {
  grid-area: 1 / 1 / span 2;
}

.sign-side__body {
  grid-area: 1 / 2;
}

.sign-side__action {
  grid-area: 1 / 3 / span 2;
}

/* The cards sit in a wrapper that reloads itself, so the order note is no card's sibling:
   it takes the cards' own gap here. */
#sign-cards + .info-banner {
  margin-top: 1.25rem;
}

/* A banner straight under the step track keeps the gap a card there has. */
#flow-track + .info-banner {
  margin-top: 1.25rem;
}

/* Step 2's comparison: its cards carry the gap to the card above, the grid adds none. */
#contract-compare .section-grid {
  margin-top: 0;
}

.sign-side__number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-bg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
}

.sign-side__body h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sign-side__body .section-note {
  margin: 0.25rem 0 0;
}

.sign-side__action .inline-form {
  margin: 0;
}

.sign-side__action,
.sign-side__upload {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.sign-side__action .section-note {
  margin: 0;
}

.sign-side__action .btn-quiet,
.sign-side__action .btn-dark {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 2.25rem;
  padding-block: 0;
  margin: 0;
}

.sign-side__errors {
  grid-row: 2;
  grid-column: 2 / -1;
  margin: 0.5rem 0 0;
}

/* The tariefperioden page's bar (HEA-195): one segment per rate period, its width the period's
   share of the term in days (flex-grow, set per segment). Three tones in turn, as the mockup
   draws them: the deck's pale blue, a pale green and the sand accent. */
.rate-bar__term {
  margin: 1.5rem 0 0.5rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.rate-bar {
  display: flex;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rate-bar__period {
  flex-basis: 0;
  min-width: 4.5rem;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

/* Step 3's banners sit in the card grid and keep the cards' rhythm: a banner takes a card's top
   margin and adds none below, so the error banner starts where the first card would and every
   block on the page is 40px from the next (rate change and renewal alike). */
.addendum-form .section-grid > .info-banner {
  margin: 1.25rem 0 0;
}

/* A row whose cells end on one line (the renewal's uncovered side): a labelled field's control and the action button beside it
   share their bottom edge, where centring would set the button against label and control. */
.field-grid--bottom {
  align-items: end;
}

.field-grid--bottom > .section-note {
  margin: 0;
}

/* A short period ends its label in an ellipsis; the period's title carries the full dates. */
.rate-bar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rate-bar__period:nth-child(3n + 1) {
  background: #dfe6ef;
}

.rate-bar__period:nth-child(3n + 2) {
  background: #e3ece0;
}

.rate-bar__note {
  margin: 0.5rem 0 1.5rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-style: italic;
}

/* The note under the tariefperioden table keeps the table's own 1rem rhythm. */
.rate-table + .section-note {
  margin-top: 0.75rem;
}

/* The addenda history on the contract detail: every row reserves two lines (an external
   addendum's note, a withdrawal's who-when-why), so a short row is not shorter than its
   neighbours; withdrawing is one row, the reason beside its button. */
.addenda-table td {
  height: 3.5rem;
}

/* The withdraw column keeps the reason and its button on one line: without a width the
   second line of the Wijziging column (note and document link, never wrapped) takes it, and the
   form wraps. Wide enough for the form, narrow enough that the table stays inside its card. */
.addenda-table__action {
  width: 16rem;
  min-width: 16rem;
}

/* The last row has no rule under it; it takes that pixel back, so it is as high as the others. */
.addenda-table tbody tr:last-child td {
  border-bottom: 1px solid transparent;
}

.addendum-withdraw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.addendum-withdraw input[type="text"] {
  flex: 1 1 8rem;
  min-width: 0;
}

.addendum-withdraw .field__errors {
  flex-basis: 100%;
  margin: 0;
}

.addendum-withdraw input[type="text"],
.addendum-withdraw .btn-quiet {
  box-sizing: border-box;
  height: 2.5rem;
  margin: 0;
}

.addenda-table .muted-inline {
  white-space: nowrap;
}

/* How an addendum ended (who, when, the reason) fills the withdraw column's two lines and no
   more: a long reason ends in an ellipsis and unfolds on a click, as the request history does
   (.document-table__history). Folded, the row keeps its height; the column keeps its width,
   so the table stays inside its card. */
.addenda-table__ended summary {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

.addenda-table__ended summary::-webkit-details-marker {
  display: none;
}

.addenda-table__ended summary::before {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.7rem;
  content: "\25B8";
}

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

.addenda-table__ended summary:hover .addenda-table__ended-text {
  text-decoration: underline;
}

.addenda-table .addenda-table__ended-text {
  display: -webkit-box;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}

.addenda-table__ended[open] .addenda-table__ended-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* A state pill keeps its words on one line, so no row grows a line for it. */
.addenda-table .badge {
  white-space: nowrap;
}

/* Step 2 of the contract flow, Vergelijken, when the klant's KC asks for no comparison (HEA-545):
   a dashed grey dot keeps the step's place on the track, so the numbers never jump. */
.wizard-track__step--skipped .wizard-track__dot {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-bg-accent);
  color: var(--color-muted);
}

/* Step 2's choice of supplier contract (HEA-545, group-c-ux wireframe): one outlined row per
   option, the chosen one in the primary colour. The radio stays visible: it is the control. Every
   row is as tall as a two-line one, so the rows line up whatever their note. The card's inset,
   radio and gap are tokens: the decisions under a card start where its title does from them. */
.choice-cards {
  --choice-inset: 1rem;
  --choice-radio: 13px;
  --choice-gap: 0.75rem;
  --choice-rule: 2px;
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The list of several options is a fieldset: `.form-section fieldset` would make it a block,
   and the gap would not apply. */
.form-section fieldset.choice-cards {
  display: grid;
}

/* A card that is a <label> drops the label's bottom margin: the grid gap spaces the cards. */
.choice-card {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--choice-gap);
  min-height: 3.75rem;
  box-sizing: border-box;
  padding: 0.75rem var(--choice-inset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}

.choice-card:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-card:has(input:disabled) {
  cursor: default;
}

.choice-card input {
  width: var(--choice-radio);
  height: var(--choice-radio);
  margin: 0.2rem 0 0;
  accent-color: var(--color-primary);
}

.choice-card__text {
  display: grid;
  gap: 0.15rem;
}

.choice-card__title {
  font-weight: 600;
}

.choice-card__note {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* The only option is no choice: a plain row, not a selected one, and not clickable. */
.choice-card--only {
  cursor: default;
}

/* A compared LC's decisions under its card (PO round ticket 9), card and decisions one
   .choice-option: only those of the chosen card show, so a click on another card swaps them
   without a request. A rule in the card's colour runs on from the card's bottom edge, at the
   radio, and the content starts where the card's title does (the card's 1px border, the radio
   and the gap, less the rule). 12px above the content, 20px to the next card. */
.choice-card__decisions {
  display: none;
  margin: 0 0 0.6rem var(--choice-inset);
  padding: 0.5rem 0 0.4rem calc(1px + var(--choice-radio) + var(--choice-gap) - var(--choice-rule));
  border-left: var(--choice-rule) solid var(--color-primary);
}

.choice-option:has(input:checked) > .choice-card__decisions,
.choice-option:has(.choice-card--only) > .choice-card__decisions {
  display: block;
}

/* The only option has no radio: its title starts at the card's inset, so does its content. */
.choice-option:has(.choice-card--only) > .choice-card__decisions {
  margin-left: 0;
  padding-left: calc(1px + var(--choice-inset) - var(--choice-rule));
  border-left-color: var(--color-border-strong);
}

.choice-card__decisions > .safety-summary__head:first-child {
  margin-top: 0.25rem;
}

.choice-card__decisions > .section-note {
  margin: 0.25rem 0 0;
}

/* "LC aanpassen" under the rejected points, its note beside it on one line; the same row holds
   the adjusting note and Annuleren above the comparison. */
.choice-card__adjust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0;
}

.choice-card__adjust .section-note {
  margin: 0;
}

/* The way to fix a card's red message: a link that reads as one, apart from the message. */
.sign-side__fix {
  margin-left: 0.25rem;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
}

/* ===========================================================================
   Step 4's safety summary (HEA-546): the KC terms the LC still contradicts, then those it took
   over, as two tables of one shape, the KC's words beside ours. No mockup: the sibling is
   step 3's Controle table (.supplier-contract__terms). The two passage columns share the
   width the topic and the risk pill leave, so the two tables' columns line up; a risk pill
   never wraps.
   =========================================================================== */
.safety-summary__head {
  margin: 1rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.safety-summary__table {
  table-layout: fixed;
}

.safety-summary__table th:nth-child(1) {
  width: 14rem;
}

.safety-summary__table th:nth-child(2) {
  width: 8rem;
}

.safety-summary__table .badge {
  white-space: nowrap;
}

/* Step 1's banners (copied from, frozen, form errors) sit under the track the way its cards do:
   1.25rem below the step labels, and the first card 1.25rem below them. */
.wizard-track + .info-banner,
#contract-form > .info-banner,
#template-form > .info-banner {
  margin: 1.25rem 0 0;
}