/* Load.Live 1.7.0-s18 — crewplekken per dag (M21): raster functie × dag, bron per plek, voorstellen, suggesties met redenen,
 * vaste crewgroepen. Kleuren uit ll.css: --ok = bevestigd, --let = gevraagd, --tally = open (in te vullen). */
.cp { margin-bottom: 18px; }
.cp-kop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.cp-kop h2 { margin: 2px 0; font-size: 18px; }
.cp-kop .acties { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-raster { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 520px; }
.cp-raster th { text-align: left; font-weight: 500; padding: 4px 6px; vertical-align: top; }
.cp-raster thead th .sub { display: block; font-size: 12px; }
.cp-raster tbody th { white-space: nowrap; }
.cp-cel { border-radius: 10px; padding: 6px 8px; font-size: 13px; vertical-align: top; min-width: 9em; }
.cp-cel > span:first-child, .cp-celknop { display: block; }
.cp-celknop { all: unset; cursor: pointer; display: block; width: 100%; }
.cp-celknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.cp-ok { background: var(--ok-zacht); color: var(--ok); }
.cp-gevraagd { background: var(--let-zacht); color: var(--let); }
.cp-open { background: var(--tally-zacht); color: var(--tally-tekst, var(--tally)); font-weight: 600; }
.cp-weg { background: var(--rack-2); color: var(--zacht, #8a9a97); text-decoration: line-through; }   /* geweigerd = grijs (rood enkel voor fout/conflict) */
.cp-niet { background: transparent; color: var(--zacht, #8a9a97); border: 1px dashed var(--lijn); text-align: center; }
.cp-tag { display: inline-block; font-size: 11px; border: 1px solid currentColor; border-radius: 6px; padding: 0 4px; margin: 3px 4px 0 0; }
.cp-w { display: inline-block; font-size: 11px; border-radius: var(--r-pil, 999px); padding: 0 6px; margin: 3px 4px 0 0; }
.cp-w-let { background: var(--let-zacht); color: var(--let); }
.cp-w-fout { background: var(--tally); color: #fff; }
.cp-bron { display: inline-block; font-size: 11px; border-radius: var(--r-pil, 999px); padding: 0 7px; margin-left: 4px; border: 1px solid var(--lijn-sterk); white-space: nowrap; font-weight: 400; }
.cp-bron-offerte { border-color: var(--accent); color: var(--accent); }
.cp-bron-hand { border-style: dashed; }
.cp-voorstellen h3 { font-size: 14px; margin: 8px 0 6px; }
.cp-voorstellen ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.cp-voorstel { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--lijn); border-left: 3px solid var(--accent); border-radius: 10px; padding: 8px 12px; background: var(--rack); }
.cp-voorstel.voorlopig { border-left-color: var(--let); border-style: dashed; }
.cp-voorstel .sub { display: block; }
.cp-voorstel .acties { display: flex; gap: 6px; align-items: flex-start; }
.cp-regels { margin: 4px 0 0; padding-left: 16px; font-size: 13px; }
.cp-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; font-size: 12px; }
.cp-blokje { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.cp-sugg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cp-sugg > li { border: 1px solid var(--lijn); border-radius: 12px; padding: 8px 12px; }
.cp-sugg > li.rood { border-color: var(--tally); }
.cp-sugg-kop { display: flex; align-items: center; gap: 8px; }
.cp-sugg-kop > div { flex: 1; display: grid; }
.cp-redenen { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.cp-reden { font-size: 12px; border-radius: var(--r-pil, 999px); padding: 1px 8px; background: var(--rack-2); }
.cp-reden-ok { background: var(--ok-zacht); color: var(--ok); }
.cp-reden-let { background: var(--let-zacht); color: var(--let); }
.cp-reden-fout { background: var(--tally); color: #fff; }
.cp-groepen { list-style: none; padding: 0; display: grid; gap: 6px; }
.cp-groep-form { border: 1px solid var(--lijn); border-radius: 12px; padding: 10px 12px; margin-top: 12px; display: grid; gap: 8px; }
.cp-leden { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.cp-leden .link { margin-left: 8px; }
.plek-aan { color: var(--accent); }
.pv-concept { border-style: dashed; }
@media (max-width: 600px) { .cp-raster { min-width: 0; } .cp-cel { min-width: 6em; } }