/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module relatiekaart: alleen de indeling van de eigen schermen (klassen m-relatiekaart-), PrimaPress 2.0
 * (pakket W5-ui). Kleur, letter, randen, afronding en schaduw komen uit de componenten van app.css (kaart, tabel,
 * zoeklijst, feitenbalk, stappen, meldingen, merkjes, leeg en fout) en de tokens van de laag betekenis
 * (DESIGNSYSTEEM.md 8.4); hier geen kleurcode en geen maat van een letter. */

/* Het blok Relatiekaart in het Relatie invoervenster: twee velden naast elkaar (straat en huisnummer, postcode en plaats) */
.m-relatiekaart-kop .raster { margin-top: var(--pp-r-1); }
.m-relatiekaart-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7em); gap: var(--pp-r-2); align-items: center; }
.m-relatiekaart-twee-pc { grid-template-columns: minmax(0, 7em) minmax(0, 1fr); }
.m-relatiekaart-twee-knop { grid-template-columns: minmax(0, 9em) auto; justify-content: start; }
.m-relatiekaart-twee input { width: 100%; min-width: 0; }
.m-relatiekaart-meldingen { display: grid; gap: var(--pp-r-2); margin: var(--pp-r-1) 0 var(--pp-r-2); }
.m-relatiekaart-meldingen:empty { display: none; }
.m-relatiekaart-meldingen > * { margin: 0; }

/* De tabbladen van de kaart */
.m-relatiekaart-paneel .raster { margin-bottom: var(--pp-r-2); }
.m-relatiekaart-staffel { display: flex; flex-wrap: wrap; gap: var(--pp-r-2); align-items: center; margin: var(--pp-r-2) 0; }
.m-relatiekaart-nummermelding { display: inline-flex; align-items: center; gap: var(--pp-r-1); white-space: nowrap; }
.m-relatiekaart-nummermelding .icoon { flex: none; }
/* het tabblad Portaal: de naam van de klantgroep krijgt de ruimte, de rest blijft smal */
table.m-relatiekaart-portaaltabel td:first-child { min-width: 14em; overflow-wrap: normal; }
table.m-relatiekaart-portaaltabel td:nth-child(n+2):nth-child(-n+4) { white-space: nowrap; }
/* het logboek: tijd, wie en wat op een regel, de details breken af */
table.m-relatiekaart-log td:nth-child(-n+3) { white-space: nowrap; overflow-wrap: normal; }

/* Relaties importeren: de volgorde (stappen), de feiten, de invoermap als tabel en de twee bestanden naast elkaar */
.m-relatiekaart-stappen { overflow-x: auto; }
.m-relatiekaart-stappen .stappen { margin: 0 0 var(--pp-r-4); }
/* op een telefoon schuiven de stappen opzij in plaats van over elkaar te lopen */
@media (max-width: 760px) {
  .m-relatiekaart-stappen .stappen li { flex: 0 0 auto; }
}
.m-relatiekaart-feiten .feitenbalk { margin-bottom: var(--pp-r-4); }
table.m-relatiekaart-invoer td { vertical-align: top; }
.m-relatiekaart-bestand { min-width: 0; }
.m-relatiekaart-bestandnaam { font-weight: var(--pp-gewicht-half); overflow-wrap: anywhere; }
.m-relatiekaart-blok { display: block; margin-top: var(--pp-r-1); }
.m-relatiekaart-soortcel { display: grid; gap: var(--pp-r-1); min-width: 11em; }
.m-relatiekaart-soortcel select { width: 100%; }
.m-relatiekaart-uploads { margin-top: var(--pp-r-4); }
.m-relatiekaart-upload .inhoud > .tabknoppen { margin: var(--pp-r-2) 0 0; }
.m-relatiekaart-upload p, .m-relatiekaart-invoer td { overflow-wrap: anywhere; }
.m-relatiekaart-kiezer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-r-2); min-width: 0; }
.m-relatiekaart-kiezer .m-relatiekaart-bestandnaam { font-weight: var(--pp-gewicht); }
.m-relatiekaart-rapportkaart { margin-top: var(--pp-r-4); }
.m-relatiekaart-rapport > div > * + * { margin-top: var(--pp-r-3); }
.m-relatiekaart-rapport fieldset { margin-top: var(--pp-r-2); }
.m-relatiekaart-rapport p, .m-relatiekaart-rapport li { overflow-wrap: anywhere; }
.m-relatiekaart-lijst { margin-top: var(--pp-r-2); }
.m-relatiekaart-lijst ul { margin: var(--pp-r-1) 0 0; padding-left: var(--pp-r-5); max-height: 220px; overflow-y: auto; }