/* Beheer -> Objectieven & commissie (WQ-089, platform versie 1).
 * Nachtblauw: glas zonder filter op werkschermen, goud alleen voor de actieve keuze (gekozen blok, gekozen
 * pijl, primaire knop), status alleen als smalle linkerrand of kleine chip. Alle kleuren via tokens. */

.rg-scherm { display: flex; flex-direction: column; gap: 14px; }
.rg-subtabs { margin-bottom: 4px; }
.rg-uit { color: var(--tekst-uit); font-size: .88em; }
.rg-leeg { color: var(--tekst-zacht); padding: 18px 4px; }
.rg-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.rg-balk label { color: var(--tekst-zacht); display: inline-flex; align-items: center; gap: 6px; }
.rg-vink input { accent-color: var(--merk); }
.rg-invoer, .rg-naam { background: var(--vlak-dekkend-1); border: 1px solid var(--lijn); color: var(--tekst);
    border-radius: var(--rond-klein); padding: 6px 10px; }
.rg-naam { font-size: 1.1em; min-width: 260px; }
.rg-naam:focus-visible, .rg-invoer:focus-visible { outline: 2px solid var(--merk); outline-offset: 1px; }

/* chips en randen: status klein en semantisch */
.rg-chip { display: inline-block; font-size: .78em; padding: 1px 8px; border-radius: var(--rond-klein);
    border: 1px solid var(--lijn); color: var(--tekst-zacht); }
.rg-chip.rg-ok { color: var(--ok); border-color: var(--ok); }
.rg-chip.rg-fout { color: var(--fout); border-color: var(--fout); }
.rg-chip.rg-letop { color: var(--let-op); border-color: var(--let-op); }
.rg-fout-rand { border-left: 3px solid var(--fout); border-radius: 0; padding-left: 8px; }
.rg-ok-rand { border-left: 3px solid var(--ok); border-radius: 0; padding-left: 8px; color: var(--tekst-zacht); }
.rg-letop-rand { border-left: 3px solid var(--let-op); border-radius: 0; padding-left: 8px; }
.rg-afsl { border-left: 3px solid var(--lijn); padding: 4px 0 4px 10px; margin: 8px 0; }
.rg-afsl > summary { cursor: pointer; font-weight: 600; }
.rg-opmerking { white-space: pre-line; }
.rg-groepkader { fill: none; stroke: var(--lijn-sterk); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.rg-groepnaam { fill: var(--tekst-zacht); font-size: 12px; font-weight: 600; pointer-events: none; }
.rg-groepvak { border-left: 3px solid var(--lijn-sterk); padding: 2px 0 6px 10px; margin-bottom: 12px; }
.rg-eigen { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0 8px 10px;
            border-left: 3px solid var(--lijn); margin: 8px 0; }
.rg-eigen p { margin: 4px 0 0; }
.rg-eigen-blokken { display: flex; flex-direction: column; gap: 4px; max-height: 26vh; overflow-y: auto; }
.rg-eigen-vak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
.rg-eigen-vak input[type="text"] { flex: 1 1 220px; }

/* uitleg in het scherm */
.rg-uitleg { background: var(--glas-1); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 10px 14px;
    color: var(--tekst-zacht); line-height: 1.55; }
.rg-uitleg > summary { cursor: pointer; color: var(--tekst); font-weight: 600; }
.rg-uitleg > summary:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; }
.rg-uitleg-inhoud { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; font-size: .92em; }
.rg-uitleg-inhoud p { margin: 6px 0; }
.rg-uitleg-inhoud ul, .rg-uitleg-inhoud ol { margin: 4px 0 8px; padding-left: 20px; }
.rg-uitleg-inhoud li { margin: 3px 0; }
.rg-uitleg strong { color: var(--tekst); }
.rg-blokuitleg { border-left: 3px solid var(--lijn-sterk); border-radius: 0; padding: 2px 0 2px 10px; margin: 0 0 12px;
    color: var(--tekst-zacht); font-size: .9em; line-height: 1.5; }
.rg-blokuitleg p { margin: 0 0 6px; }
.rg-blokuitleg ul { margin: 0; padding-left: 18px; }
.rg-start { margin: 0 0 8px; padding-left: 20px; color: var(--tekst-zacht); line-height: 1.55; }

/* overzicht */
.rg-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rg-kaart { background: var(--glas-1); border: 1px solid var(--lijn); border-radius: var(--rond);
    box-shadow: var(--diepte-1); padding: 14px 16px; }
.rg-kaart-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rg-kaart-kop h3 { margin: 0; font-size: 1.05em; color: var(--tekst); }
.rg-resultaat { padding: 8px 0; border-top: 1px solid var(--lijn); }
.rg-resultaat-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--tekst-zacht); }
.rg-getal { min-width: 54px; font-variant-numeric: tabular-nums; }
.rg-personen { width: 100%; margin-top: 6px; font-size: .9em; color: var(--tekst-zacht); }
.rg-personen td { padding: 2px 0; }
.rg-personen td:last-child { text-align: right; }
.rg-melding { margin: 6px 0; color: var(--tekst-zacht); }
.rg-tabelvak { max-height: 60vh; overflow: auto; }
.rg-tabel { width: 100%; border-collapse: collapse; font-size: .9em; }
.rg-tabel th, .rg-tabel td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--lijn); }
.rg-tabel th { color: var(--tekst-uit); font-weight: 600; }

/* afspraken: lijst + editor */
.rg-afspraken { display: flex; flex-direction: column; gap: 8px; }
.rg-afspraken select { background: var(--vlak-dekkend-1); border: 1px solid var(--lijn); color: var(--tekst);
    border-radius: var(--rond-klein); padding: 5px 8px; min-width: 260px; }
.rg-zoom { display: inline-flex; gap: 4px; margin-left: 8px; }
.rg-editor { min-width: 0; }
.rg-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rg-palet { font-size: .88em; }
.rg-werk { display: grid; grid-template-columns: 1fr 320px; gap: 12px; align-items: start; }
.rg-canvasvak { overflow: auto; max-height: 70vh; background: var(--glas-1); border: 1px solid var(--lijn);
    border-radius: var(--rond); }
.rg-canvas { display: block; touch-action: none; user-select: none; }
.rg-paneel { background: var(--glas-2); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 12px 14px;
    box-shadow: var(--diepte-1); max-height: 70vh; overflow: auto; }
.rg-paneel h4 { margin: 0 0 8px; color: var(--tekst); }
.rg-paneel h5 { margin: 12px 0 6px; color: var(--tekst-zacht); font-weight: 600; }
.rg-veld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; color: var(--tekst-zacht); font-size: .9em; }
.rg-paneel select, .rg-paneel input { background: var(--vlak-dekkend-1); border: 1px solid var(--lijn); color: var(--tekst);
    border-radius: var(--rond-klein); padding: 5px 8px; min-width: 0; }
.rg-paneel select:focus-visible, .rg-paneel input:focus-visible { outline: 2px solid var(--merk); outline-offset: 1px; }
.rg-voorwaarde, .rg-rij { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.rg-voorwaarde select, .rg-voorwaarde input, .rg-rij select, .rg-rij input { flex: 1 1 90px; }
.rg-niveau { border-left: 3px solid var(--lijn-sterk); border-radius: 0; padding-left: 8px; margin-bottom: 10px; }
.rg-klein { padding: 2px 8px; }
.rg-weg { margin-top: 14px; }
.rg-onder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.rg-onder h4 { margin: 0 0 6px; color: var(--tekst-zacht); }
.rg-zin, .rg-fouten { margin: 0; padding-left: 18px; color: var(--tekst); line-height: 1.6; }
.rg-fouten { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 4px; }

/* het diagram */
.rg-blok { cursor: grab; outline: none; }
.rg-blok:active { cursor: grabbing; }
.rg-blokvlak { fill: var(--vlak-dekkend-2); stroke: var(--lijn-sterk); stroke-width: 1; }
.rg-blok:hover .rg-blokvlak { stroke: var(--tekst-uit); }
.rg-blok.is-gekozen .rg-blokvlak, .rg-blok:focus-visible .rg-blokvlak { stroke: var(--merk); stroke-width: 2; }
.rg-blokrand.rg-ok { fill: var(--ok); }
.rg-blokrand.rg-fout { fill: var(--fout); }
.rg-blokrand.rg-letop { fill: var(--let-op); }
.rg-blokrand.rg-uit { fill: var(--tekst-uit); }
.rg-foutstip { fill: var(--fout); }
.rg-groep { fill: var(--tekst-uit); font-size: 10px; }
.rg-titel { fill: var(--tekst); font-size: 13px; font-weight: 600; }
.rg-samen { fill: var(--tekst-zacht); font-size: 11px; }
.rg-waarde { fill: var(--info); font-size: 11px; }
.rg-poortnaam { fill: var(--tekst-uit); font-size: 9px; }
.rg-poort { fill: var(--vlak-dekkend-1); stroke: var(--tekst-zacht); stroke-width: 1.5; cursor: crosshair; }
.rg-poort:hover { stroke: var(--merk); }
.rg-pijl { fill: none; stroke: var(--tekst-uit); stroke-width: 1.6; color: var(--tekst-uit); pointer-events: none; }
.rg-pijl.is-gekozen { stroke: var(--merk); color: var(--merk); stroke-width: 2.2; }
.rg-pijl.is-tijdelijk { stroke: var(--merk); stroke-dasharray: 5 4; }
.rg-pijl-raak { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }

@media (max-width: 1100px) {
    .rg-werk, .rg-onder, .rg-uitleg-inhoud { grid-template-columns: 1fr; }
}