/*
 * De module Contracten en partijen, bovenop dossier.css.
 *
 * Beslisstrook, tabbladen, velden en bronlabels komen uit dossier.css: dit is
 * dezelfde kamer in hetzelfde gebouw. Hier staat alleen wat deze module extra
 * heeft — de statuswoorden van een contract, de storingskaarten, de stukken en
 * de historie. Die laatste twee horen in elk record thuis en verhuizen naar
 * dossier.css zodra een tweede module ze gebruikt.
 */

/* Een datum of naam in de strook is langer dan een getal; kleiner, zodat hij op één regel past. */
.beslis__getal--tekst {
  font-size: 1.375rem;
}

/*
 * De statuswoorden van een contract. Altijd een woord erbij; de kleur
 * komt uit de statustabel van de huisstijl.
 */
.demo-status--besluit {
  color: var(--status-verlopen-text);
  border-color: var(--status-verlopen-dot);
  background-color: var(--status-verlopen-bg);
}

.demo-status--loopt {
  color: var(--status-ok-text);
  border-color: var(--status-ok-dot);
  background-color: var(--status-ok-bg);
}

.demo-status--onvolledig {
  color: var(--status-aandacht-text);
  border-color: var(--status-aandacht-dot);
  background-color: var(--status-aandacht-bg);
}

.demo-status--opgezegd {
  color: var(--colour-base);
  border-color: var(--colour-base);
  background-color: var(--colour-surface);
}

.demo-status--afgelopen {
  color: var(--colour-text-muted);
  border-color: var(--colour-line);
  background-color: var(--colour-fond);
}

.beslis .demo-status {
  font-size: 1rem;
}

/* De lijst: de naam als link, de partij en de termijn eronder in grijs. */
.contract-link {
  font-weight: 700;
}

.contract-termijn {
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

/* Het bedrag houdt afstand tot de kolom ernaast; de status breekt nooit af. */
.contracten-tabel td.demo-bedrag,
.contracten-tabel th.demo-bedrag {
  padding-right: var(--space-m);
}

.contracten-tabel td:nth-child(6) {
  white-space: nowrap;
}

/* Bij storing bellen: groot nummer, klikbaar op een telefoon. */
.storingkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.storingkaart {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--colour-line);
  border-left: 4px solid var(--colour-base);
  border-radius: var(--radius-card);
  background-color: var(--colour-surface);
}

.storingkaart p {
  margin: 0;
  max-width: none;
}

.storingkaart__voor {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

.storingkaart__nummer {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Stukken: naam links, vindplaats rechts. */
.stukken {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stuk {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--colour-line);
}

.stuk__naam {
  font-weight: 600;
}

.stuk__waar {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

/* De historie: datum, wat er gebeurde, en wie het vastlegde. */
.historie {
  margin: 0;
  padding: 0;
  list-style: none;
}

.historie__regel {
  display: grid;
  gap: 0 var(--space-m);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--colour-line);
}

.historie__regel p {
  margin: 0;
  max-width: none;
}

.historie__datum {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.historie__wie {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

@media (min-width: 48em) {
  .historie__regel {
    grid-template-columns: 11rem 1fr auto;
  }
}

.record-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.record-acties .button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* De kerngegevens van een record: vier panelen, op een breed scherm op één rij. */
.beslisstrook--vier {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Een kleine knop in een tabelrij, zoals "Weghalen" bij een contactpersoon. */
.partij-weg {
  min-height: auto;
  padding: 0.2em 0.7em;
  font-size: 0.875rem;
}

/*
 * Een knop boven de kaarten ("Contract toevoegen") staat op een eigen regel
 * over de hele breedte, in plaats van als kaart mee te rekken in het raster.
 * De lijsten lopen ook over de hele breedte: een tabel met zes kolommen past
 * niet in een halve kaart.
 */
.dossier-inhoud > .record-acties,
.dossier-inhoud > .beslisstrook {
  grid-column: 1 / -1;
  margin: 0;
}

/* Een vinkje met de tekst ernaast, in plaats van een veld eronder. */
.inrichten__vink {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-weight: 700;
}

.inrichten__vink input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

/* Uitgaven: de facturen die niet kloppen met het contract. */
.factuur-bevindingen {
  margin: 0;
  padding: 0;
  list-style: none;
}

.factuur-bevindingen li {
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--colour-line);
}

.factuur-bevindingen li:last-child {
  border-bottom: 0;
}

/* Bedragen en aandelen in de spendanalyse: rechts, met lucht ertussen. */
.spend-tabel td.demo-bedrag {
  padding-left: var(--space-m);
  text-align: right;
  white-space: nowrap;
}

/* Een formulier met een tabel (facturen inlezen) krijgt de volle breedte. */
.inrichten__formulier:has(> .demo-tabelhouder) {
  max-width: none;
}

.inrichten__formulier > .demo-tabelhouder {
  min-width: 0;
}