/* Load.Live 1.0 — module crew (stap 2). Overgenomen uit mockups/stap2/stap2.css (goedgekeurde voorbeelden), elke regel
   binnen .cw zodat andere modules er geen last van hebben. Enkel tokens (geen vaste kleuren), geen inline stijl. */
/* ---------- algemeen ---------- */
.cw .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.cw .sub .ic, .cw p .ic { margin-right: 4px; }
.cw .zacht { color: var(--zacht); }
.cw .ok-tekst { color: var(--ok); }
.cw .rechts { text-align: right; white-space: nowrap; }
.cw .stapel { display: grid; gap: 14px; align-content: start; }
.cw .blok-sub { display: block; font-size: 13px; }
.cw .doorstreept { text-decoration: line-through; color: var(--zacht); }
.cw .av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: var(--rack-2); color: var(--tekst); font: 500 11.5px/1 var(--mono); letter-spacing: .04em; border: 1px solid var(--lijn); }
.cw .av.open { background: transparent; border: 1px dashed var(--lijn-sterk); }
.cw .av.weg { opacity: .5; }
.cw .persoon { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cw .persoon .rijlink { min-height: 0; }
/* signalen: altijd icoon + tekst, kleur is extra */
.cw .sig { display: inline-flex; align-items: flex-start; gap: 5px; font-size: 13px; line-height: 1.35; color: var(--zacht); }
.cw .sig .ic { width: 15px; height: 15px; margin-top: 1px; }
.cw .sig.let { color: var(--let); }
.cw .sig.fout { color: var(--tally-tekst); }
.cw .sig.ok { color: var(--ok); }
.cw .signalenrij { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cw .signalenrij.kol { flex-direction: column; gap: 3px; }
.cw .sigleg { list-style: none; padding: 0; margin: 14px 0 0; }
/* extra statussen */
.cw .status.open { color: var(--tally-tekst); border-color: var(--tally); border-style: dashed; }
.cw .status.weg { color: var(--zacht); border-color: var(--lijn-sterk); text-decoration: line-through; }
/* ---------- projecttabs ---------- */
.cw .tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--lijn); margin: 0 0 24px; }
.cw .tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; color: var(--zacht); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cw .tabs a:hover { color: var(--tekst); }
.cw .tabs a[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--tally); font-weight: 600; }
.cw .tabs .n { font: 500 12px/1 var(--mono); color: var(--zacht); }
.cw .kengetal b.tally { color: var(--tally-tekst); }
.cw .kengetal b.let { color: var(--let); }
/* ---------- jobdag kiezen + bezetting ---------- */
.cw .dagkeuze { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.cw .dagknop { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--r); background: transparent; cursor: pointer; min-height: 44px; }
.cw .dagknop b { font-weight: 600; font-size: 15.5px; }
.cw .dagknop[aria-pressed="true"] { background: var(--rack-2); border-color: var(--tekst); }
.cw .dagknop[aria-pressed="true"] .label { color: var(--tally-tekst); }
.cw .dagknop-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cw .dagknop-voet .mono { font-size: 13px; color: var(--zacht); }
.cw .bezetting { display: inline-flex; gap: 3px; flex-wrap: wrap; vertical-align: middle; }
.cw .bezetting span { width: 10px; height: 10px; border-radius: 1px; background: var(--lijn-sterk); }
.cw .bezetting .ok { background: var(--ok); }
.cw .bezetting .let { background: var(--let); }
.cw .bezetting .open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tally); }
.cw .bezetting .weg { background: var(--tally); }
.cw .dagkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; padding: 20px; margin: 16px 0 16px; background: var(--rack); border: 1px solid var(--lijn); border-left: 3px solid var(--tally); border-radius: var(--r); }
.cw .dagkop .label { margin: 0 0 4px; }
.cw .dagtitel { font: 600 20px/1.25 var(--body); margin: 0 0 4px; }
.cw .dagkop .sub { margin: 0 0 12px; }
.cw .dagkop-r { display: grid; gap: 12px; justify-items: end; }
.cw .bezettingregel { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--zacht); }
.cw .bezettingregel b { color: var(--tekst); }
.cw .let-melding { border-left-color: var(--let); }
.cw .let-melding .ic { color: var(--let); }
.cw .melding a { color: var(--tekst); }
/* ---------- slotstabel ---------- */
.cw .slots td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.cw .slots .c-pers { width: 290px; }
.cw .slots .c-uur { width: 124px; }
.cw .slots .c-st { width: 136px; }
.cw .slots .c-act { width: 200px; }
.cw .slots .mono { font-size: 13.5px; }
.cw .fgroep th { background: var(--rack-2); padding: 8px 14px; text-align: left; font: 600 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--tekst); border-bottom: 1px solid var(--lijn); }
.cw .fgroep th > * { vertical-align: middle; }
.cw .fgroep .mono { margin-left: 10px; font-size: 12.5px; font-weight: 500; }
.cw .fgroep .fslot { float: right; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; text-decoration: none; min-height: 24px; }
.cw .fgroep .fslot .ic { width: 14px; height: 14px; }
.cw tbody + tbody .fgroep th { border-top: 1px solid var(--lijn-sterk); }
.cw .open-slot td { background: color-mix(in srgb, var(--tally) 5%, transparent); }
.cw .geweigerd-slot td { background: color-mix(in srgb, var(--tally) 5%, transparent); }
.cw .slots .icoonknop { width: 34px; height: 34px; }
/* ---------- dialoog: kandidaten ---------- */
.cw .dlg.xbreed { width: min(1080px, calc(100vw - 32px)); }
.cw .dlg-kop .label { margin: 0 0 6px; }
.cw .dlg-intro { margin: -6px 0 0; font-size: 14.5px; }
.cw .dlg-intro b { color: var(--tekst); font-weight: 600; }
.cw .dlg-balk { margin: 0; }
.cw .dlg-balk input[type=search] { max-width: 260px; }
.cw .klein-vink { min-height: 36px; padding-top: 7px; font-size: 14px; margin-left: auto; }
.cw .klein-vink input { width: 18px; height: 18px; }
.cw .kandidaten td, .cw .aanbodlijst td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.cw .c-kies { width: 44px; }
.cw .c-kpers { width: 250px; }
.cw .c-besch { width: 124px; }
.cw .c-tar { width: 100px; }
.cw .c-afs { width: 80px; }
.cw .c-kact { width: 140px; }
.cw .kandidaten input[type=radio], .cw .aanbodlijst input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--tally); margin: 0; }
.cw .kgroep th { background: var(--rack-2); padding: 7px 14px; }
.cw .kgroep .mono { margin-left: 6px; color: var(--tekst); }
.cw tr.gekozen td { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.cw tr.gekozen td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.cw tr.nietinzet td { color: var(--zacht); }
.cw tr.nietinzet .rijlink { color: var(--zacht); font-weight: 500; }
.cw .beschik { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cw .beschik::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cw .beschik.ok { color: var(--ok); }
.cw .beschik.let { color: var(--let); }
.cw .beschik.weg { color: var(--zacht); }
.cw .beschik.weg::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.cw .voet-info { margin: 0; display: flex; align-items: center; gap: 6px; }
.cw .dlg .voet { align-items: center; }
/* ---------- dialoog: aanbieden ---------- */
.cw .slotkeuze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cw .slotkaart, .cw .keuzeblok { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--lijn-sterk); border-radius: var(--r); cursor: pointer; }
.cw .slotkaart input, .cw .keuzeblok input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tally); flex: none; }
.cw .slotkaart > span, .cw .keuzeblok > span { display: grid; gap: 2px; }
.cw .slotkaart:has(input:checked), .cw .keuzeblok:has(input:checked) { border-color: var(--tekst); background: var(--rack-2); }
.cw .slotkaart .mono { font-size: 13px; }
.cw .keuzeblokken { display: grid; gap: 8px; }
.cw .aanbodlijst { max-height: none; }
.cw legend .sub { font-weight: 400; margin-left: 8px; }
.cw .rij.smal { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.cw .samenvatting { border: 1px solid var(--lijn-sterk); border-left: 3px solid var(--ok); border-radius: var(--r); padding: 14px 16px; background: var(--ground); }
.cw .samenvatting .label { margin: 0 0 6px; }
.cw .samenvatting ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14.5px; }
.cw .samenvatting b { font-weight: 600; }
@media (max-width: 960px) {
.cw .dagkeuze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw .dagkop-r { justify-items: start; }
.cw .slotkeuze { grid-template-columns: 1fr; }
}
/* ---------- crewbord ---------- */
.cw .smalselect { width: auto; min-width: 170px; }
.cw .bordwrap { overflow-x: auto; }
.cw .bord { table-layout: fixed; font-size: 13.5px; }
.cw .bord .c-naam { width: 190px; }
.cw .bord .c-uren { width: 76px; }
.cw .bord th, .cw .bord td { border-left: 1px solid var(--lijn); }
.cw .bord th:first-child { border-left: 0; }
.cw .bord thead th { padding: 10px 8px; }
.cw .bord thead th.weekend { color: var(--tekst); }
.cw .bord tbody th[scope=row] { padding: 8px 10px; text-align: left; font: 400 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--tekst); white-space: normal; background: var(--rack); }
.cw .bord tbody th .rijlink { font-size: 14px; }
.cw .bord .av { width: 26px; height: 26px; font-size: 10.5px; }
.cw .bord .persoon { gap: 8px; }
.cw .bord td { padding: 5px; vertical-align: top; }
.cw .bord td.uren { padding: 10px 8px; vertical-align: middle; font-size: 13.5px; }
.cw .bord td.te-veel { color: var(--let); }
.cw .bord td.te-veel .sig { display: flex; white-space: nowrap; justify-content: flex-end; font-size: 11.5px; margin-top: 2px; }
.cw .bord td.te-veel .sig .ic { width: 12px; height: 12px; }
.cw .dienst { display: grid; gap: 1px; padding: 5px 6px 5px 7px; border: 1px solid var(--lijn); border-left: 3px solid var(--ok); border-radius: var(--r-klein); background: var(--ground); text-decoration: none; color: inherit; font-size: 12.5px; line-height: 1.3; min-width: 0; }
.cw .dienst + .dienst { margin-top: 4px; }
.cw .dienst:hover { border-color: var(--lijn-sterk); }
.cw .dienst b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw .dienst .mono { font-size: 11.5px; color: var(--zacht); }
.cw .dienst .sub { font-size: 11.5px; }
.cw .dienst .sub:empty { display: none; }
.cw .dienst .sig { font-size: 11.5px; margin-top: 1px; }
.cw .dienst .sig .ic { width: 12px; height: 12px; }
.cw .dienst.let { border-left-color: var(--let); border-style: dashed solid dashed solid; border-left-style: solid; }
.cw .dienst.conflict { border-left-color: var(--let); background: var(--let-zacht); }
.cw .afw { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--rack-2) 7px 13px); color: var(--zacht); vertical-align: middle !important; }
.cw .afw span { display: inline-flex; align-items: center; gap: 6px; background: var(--ground); padding: 3px 8px; border-radius: var(--r-klein); margin: 0 4px; font-size: 13px; }
.cw .openslots th[scope=row] { font-weight: 600 !important; }
.cw .openslots th .tally .ic { vertical-align: -3px; }
.cw .openslots td, .cw .openslots th { background: color-mix(in srgb, var(--tally) 6%, var(--rack)) !important; border-bottom: 1px solid var(--lijn-sterk); }
.cw .openteller { display: block; color: var(--tally-tekst); font: 600 12.5px/1.4 var(--mono); margin-bottom: 2px; }
.cw .openslot { display: block; font-size: 12px; color: var(--zacht); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw .openslot .mono { color: var(--tekst); font-size: 11.5px; }
.cw .bgroep th { background: var(--rack-2) !important; padding: 7px 10px !important; font: 500 11px/1.3 var(--mono) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--zacht) !important; text-align: left; }
.cw .bgroep .mono { margin-left: 8px; letter-spacing: .04em; text-transform: none; }
.cw .bordleg li { display: inline-flex; align-items: center; gap: 6px; }
.cw .legblok { width: 18px; height: 12px; border: 1px solid var(--lijn); border-left: 3px solid var(--ok); border-radius: var(--r-klein); background: var(--ground); }
.cw .legblok.let { border-left-color: var(--let); border-style: dashed solid dashed solid; border-left-style: solid; }
.cw .legblok.conflict { border-left-color: var(--let); background: var(--let-zacht); }
.cw .legblok.afwleg { border-left: 1px solid var(--lijn); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--lijn-sterk) 3px 5px); }
/* ---------- call sheet A4 (kaal, licht) ---------- */
.cw .werkbalk { max-width: 900px; margin: 0 auto; padding: 24px 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cw .werkbalk .terug { gap: 6px; }
.cw .werkbalk .terug .ic, .cw .terug .ic { width: 16px; height: 16px; }
.cw .blad { max-width: 900px; margin: 0 auto 56px; background: var(--rack); border: 1px solid var(--lijn); box-shadow: var(--schaduw); padding: 44px 52px 28px; display: grid; gap: 22px; font-size: 14px; line-height: 1.45; }
.cw .blad h2 { display: flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1.5px solid var(--tekst); }
.cw .blad h2 .sub { margin-left: auto; font: 400 12.5px/1 var(--body); letter-spacing: 0; text-transform: none; }
.cw .blad h2 .ic { width: 15px; height: 15px; }
.cw .blad p { margin: 0; }
.cw .blad-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--lijn-sterk); }
.cw .blad-merk { display: grid; gap: 4px; }
.cw .blad-merk .woordmerk { height: 26px; }
.cw .blad-merk .sub { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.cw .blad-firma { display: grid; text-align: right; font-size: 13px; color: var(--zacht); }
.cw .blad-firma b { color: var(--tekst); font-size: 15px; }
.cw .blad-firma .mono { font-size: 11.5px; margin-top: 4px; }
.cw .blad-titel h1 { font: 400 44px/1 var(--display); letter-spacing: .03em; margin: 4px 0 6px; }
.cw .blad-titel .label { margin: 0; }
.cw .blad-titel p:last-child { color: var(--zacht); }
.cw .ct-groot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border: 1.5px solid var(--tekst); border-radius: var(--r-klein); }
.cw .ct-groot div { padding: 10px 14px; display: grid; gap: 2px; }
.cw .ct-groot div + div { border-left: 1px solid var(--lijn-sterk); }
.cw .ct-groot dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.cw .ct-groot dd { margin: 0; font: 500 26px/1.1 var(--mono); }
.cw .ct-groot .hl { background: var(--tally-zacht); }
.cw .ct-groot .hl dt { color: var(--tally-tekst); }
.cw .blad-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.cw .blad-dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 5px 12px; margin: 8px 0 0; }
.cw .blad-dl dt { color: var(--zacht); }
.cw .blad-dl dd { margin: 0; }
.cw .blad-tabel { font-size: 13px; }
.cw .blad-tabel th { background: transparent; padding: 5px 8px 5px 0; font-size: 10.5px; }
.cw .blad-tabel td { padding: 5px 8px 5px 0; vertical-align: middle; }
.cw .blad-tabel .status { font-size: 10px; padding: 3px 6px; }
.cw .blad-tabel tr.open-r td { color: var(--tally-tekst); }
.cw .matlijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cw .matlijst li { display: grid; grid-template-columns: 1fr auto 44px; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.cw .matlijst .sub { font-size: 12px; }
.cw .matlijst b { text-align: right; }
.cw .tekort-regel { margin-top: 10px !important; color: var(--tally-tekst); font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: flex-start; }
.cw .tekort-regel .ic { margin-top: 1px; }
.cw .nood { border: 1.5px solid var(--tally); border-radius: var(--r-klein); padding: 12px 16px; }
.cw .nood h2 { border-bottom-color: var(--tally); color: var(--tally-tekst); }
.cw .nood ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 26px; }
.cw .blad-voet { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--lijn-sterk); font-size: 11.5px; color: var(--zacht); }
@media print {
.cw .werkbalk, .cw .mock-label { display: none !important; }
.cw .blad { box-shadow: none; border: 0; padding: 0; margin: 0; max-width: none; }
}
/* ---------- call sheet / shift op gsm ---------- */
.cw .ct-gsm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 14px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); }
.cw .ct-gsm div { padding: 10px 10px; display: grid; gap: 2px; }
.cw .ct-gsm div + div { border-left: 1px solid var(--lijn); }
.cw .ct-gsm dt { font: 500 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
.cw .ct-gsm dd { margin: 0; font: 500 19px/1.1 var(--mono); }
.cw .ct-gsm .hl { background: var(--tally-zacht); }
.cw .ct-gsm .hl dt { color: var(--tally-tekst); }
.cw .gsm-knoppen { display: grid; gap: 8px; margin-bottom: 16px; }
.cw .gsm-knoppen .knop { width: 100%; }
.cw .gsm-blok { margin-bottom: 12px; gap: 8px; }
.cw .gsm-blok .kaartkop { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.cw .gsm-blok .kaartkop .sub { margin-left: auto; font-weight: 400; }
.cw .gsm-blok p { margin: 0; }
.cw .gsm-blok .adres { font-size: 16px; font-weight: 600; }
.cw .gsm-crew { list-style: none; margin: 0; padding: 0; }
.cw .gsm-crew li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--lijn); }
.cw .gsm-crew li > span { display: grid; }
.cw .gsm-crew .sub { font-size: 13px; }
.cw .kaart.nood { border: 1px solid var(--tally); }
.cw .kaart.nood .kaartkop { color: var(--tally-tekst); }
/* ---------- crew-app (gsm) ---------- */
.cw .sectie.eerste { margin-top: 8px; }
.cw .sectie h2 { display: flex; align-items: center; gap: 8px; }
.cw .telbol { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--tally); color: var(--knop-tekst); font: 600 12px/1 var(--mono); }
.cw .aanbod { background: var(--rack); border: 1px solid var(--lijn-sterk); border-left: 3px solid var(--tally); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; margin-bottom: 12px; }
.cw .aanbod .label { margin: 0; color: var(--tally-tekst); }
.cw .aanbod h3 { margin: 0; font: 600 17px/1.3 var(--body); }
.cw .feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; }
.cw .feiten li { display: flex; gap: 8px; align-items: flex-start; }
.cw .feiten .ic { margin-top: 3px; color: var(--zacht); }
.cw .bericht { margin: 2px 0 0; padding: 8px 10px; background: var(--ground); border-radius: var(--r-klein); font-size: 14px; }
.cw .wijze { margin: 0; display: flex; align-items: center; gap: 6px; }
.cw .wijze .ic { margin: 0; }
.cw .aanbodknoppen { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 4px; }
.cw .callsheetlink { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; margin-top: 4px; min-height: 32px; }
.cw .apptabs { position: sticky; bottom: 0; z-index: 10; margin: 28px calc(-1 * clamp(16px, 4vw, 48px)) -72px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ground); border-top: 1px solid var(--lijn-sterk); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
.cw .apptabs a { position: relative; display: grid; justify-items: center; gap: 3px; min-height: 52px; padding-top: 6px; text-decoration: none; color: var(--zacht); font-size: 11.5px; font-weight: 500; }
.cw .apptabs a .ic { width: 22px; height: 22px; }
.cw .apptabs a[aria-current="page"] { color: var(--tekst); }
.cw .apptabs a[aria-current="page"]::before { content: ''; position: absolute; top: -7px; left: 30%; right: 30%; height: 2px; background: var(--tally); }
.cw .apptabs .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 999px; background: var(--tally); color: var(--knop-tekst); font: 600 10px/16px var(--mono); text-align: center; }
.cw .jouwcall { display: grid; gap: 2px; padding: 14px 16px; margin-bottom: 12px; border: 1.5px solid var(--tally); border-radius: var(--r); background: var(--tally-zacht); }
.cw .jouwcall .label { color: var(--tally-tekst); }
.cw .jouwcall b { font: 500 44px/1 var(--mono); }
.cw .ct-gsm.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cw .twee-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cw .kop-pagina p .status { margin-left: 4px; margin-right: 0; }
/* maandkalender */
.cw .maandkop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cw .maandkop h2 { margin: 0; font: 400 26px/1 var(--display); letter-spacing: .04em; }
.cw .maand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cw .mkop { text-align: center; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); padding: 6px 0; }
.cw .mdag { position: relative; aspect-ratio: 1 / 1.05; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: var(--rack); display: grid; place-items: center; font: 500 15px/1 var(--mono); cursor: pointer; padding: 0; }
.cw .mdag.we { background: var(--ground); }
.cw .mdag.buiten { border-color: transparent; background: transparent; color: var(--lijn-sterk); cursor: default; }
.cw .mdag.voorbij { color: var(--zacht); }
.cw .mdag.vandaag { border-color: var(--tally); border-width: 1.5px; }
.cw .mdag.vandaag span { color: var(--tally-tekst); }
.cw .mdag.onb, .cw .mdag.vak, .cw .mdag.onbd { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--lijn-sterk) 5px 8px); color: var(--zacht); }
.cw .mdag.vak { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--let-zacht) 5px 8px), var(--let-zacht); border-color: color-mix(in srgb, var(--let) 50%, transparent); color: var(--let); }
.cw .mdag.onbd { background: linear-gradient(to bottom, transparent 50%, var(--lijn-sterk) 50%); }
.cw .mdag.werk { border-color: var(--ok); }
.cw .mdag.m-aanbod { border-color: var(--let); border-style: dashed; }   /* niet .aanbod: die klasse is de aanbodkaart (marge en rand) */
.cw .punt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.cw .punt.let { background: var(--let); }
.cw .mdag .punt { position: absolute; bottom: 6px; left: 50%; margin-left: -3.5px; }
.cw .mleg { margin: 12px 0 16px; font-size: 13px; }
.cw .mleg li { display: inline-flex; align-items: center; gap: 6px; }
.cw .mstaal { width: 16px; height: 16px; border-radius: var(--r-klein); border: 1px solid var(--lijn); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--lijn-sterk) 3px 5px); }
.cw .mstaal.vak { background: var(--let-zacht); border-color: var(--let); }
.cw .besch-lijst .job time { font-size: 12.5px; }
.cw .job.voorbij { opacity: .6; }
.cw .voetnoot .ic { margin-right: 4px; }
.cw .beschlijst { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); }
.cw .beschlijst li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; }
.cw .beschlijst li + li { border-top: 1px solid var(--lijn); }
.cw .beschlijst li > div { display: grid; gap: 1px; }
.cw .beschlijst .mono { font-size: 12.5px; }
.cw .beschlijst li.voorbij { opacity: .6; }
.cw .mdag { aspect-ratio: auto; height: 50px; }
/* In de app staat de tabbalk vast onderaan het scherm; in de volledige schermafdruk tonen we hem onderaan de inhoud. */
.cw .apptabs { position: static; }
.cw .gsm-crew li > span.persoon { display: flex; }
/* ---------- functie toevoegen ---------- */
.cw .vertrek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: end; padding: 14px; border: 1px dashed var(--lijn-sterk); border-radius: var(--r); }
.cw .vertrek p { margin: 0 0 6px; }
.cw .vertrek b { color: var(--tekst); }
.cw .klein-leg { font-size: 13px; margin-bottom: 8px; }
.cw .rechtenkeuze { font-size: 14px; }
.cw .rechtenkeuze th, .cw .rechtenkeuze td { padding: 3px 10px; vertical-align: middle; }
.cw .rechtenkeuze thead th { padding: 8px 10px; }
.cw .rechtenkeuze th[scope=row] { font: 500 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--tekst); white-space: nowrap; }
.cw .rechtenkeuze th[scope=row] .mono { display: inline-block; width: 40px; color: var(--zacht); font-size: 12.5px; }
.cw .rechtenkeuze .c { text-align: center; width: 64px; }
.cw .rechtenkeuze tr.gewijzigd th, .cw .rechtenkeuze tr.gewijzigd td { background: var(--tally-zacht); }
.cw .afwbol { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tally); margin-left: 8px; vertical-align: 2px; }
.cw .nivkeuze { position: relative; display: inline-block; cursor: pointer; }
.cw .nivkeuze input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cw .nivkeuze span { display: inline-grid; place-items: center; width: 40px; height: 32px; border-radius: var(--r-klein); font: 600 13.5px/1 var(--mono); color: var(--lijn-sterk); border: 1px solid transparent; }
.cw .nivkeuze:hover span { border-color: var(--lijn-sterk); color: var(--zacht); }
.cw .nivkeuze input:checked + span { border-color: var(--lijn-sterk); }
.cw .nivkeuze input:checked + .n-B { color: var(--tekst); background: color-mix(in srgb, var(--tekst) 12%, transparent); }
.cw .nivkeuze input:checked + .n-W { color: var(--ok); background: var(--ok-zacht); }
.cw .nivkeuze input:checked + .n-E { color: var(--let); background: var(--let-zacht); }
.cw .nivkeuze input:checked + .n-L { color: var(--tekst); background: var(--rack-2); }
.cw .nivkeuze input:checked + .n-geen { color: var(--tekst); background: var(--rack-2); }
.cw .nivkeuze input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.cw .attestkeuze { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.cw .attestkeuze .tag { gap: 4px; padding-right: 2px; min-height: 30px; font-size: 13.5px; }
.cw .tag.weg-tag { background: transparent; border: 1px dashed var(--lijn-sterk); color: var(--zacht); text-decoration: line-through; }
.cw .tagweg { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--zacht); cursor: pointer; border-radius: 50%; }
.cw .tagweg .ic { width: 13px; height: 13px; margin: 0; }
/* ---------- uitnodigen ---------- */
.cw .keuzeblok b .ic { margin-right: 4px; }
.cw .mailvoorbeeld { border: 1px solid var(--lijn); border-radius: var(--r); background: var(--ground); padding: 14px 16px; display: grid; gap: 10px; font-size: 14px; }
.cw .mailvoorbeeld .label, .cw .mailvoorbeeld p { margin: 0; }
.cw .mailvoorbeeld dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 3px 12px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); }
.cw .mailvoorbeeld dt { color: var(--zacht); }
.cw .mailvoorbeeld dd { margin: 0; }
.cw .linkrij { display: flex; gap: 8px; }
.cw .linkrij input { font-size: 13px; }
.cw .dlg-sub { margin: 4px 0 8px; font: 600 15px/1.3 var(--body); }
.cw table.compact td { padding: 7px 12px; vertical-align: middle; font-size: 14px; }
.cw table.compact .av { width: 26px; height: 26px; font-size: 10.5px; }
.cw .knop.klein.gevaar { color: var(--zacht); }

/* ================= aanvullingen voor de echte schermen ================= */
/* dialogen */
.dlg.cw.xbreed { width: min(1080px, calc(100vw - 32px)); }
.dlg.cw.xbreed.smaller { width: min(1000px, calc(100vw - 32px)); }
.dlg.cw.breed { width: min(900px, calc(100vw - 32px)); }
.cw .dlg-kop { align-items: flex-start; }
.cw .voet-info { flex: 1 1 280px; min-width: 0; }
.cw .redenvak { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--let); border-left-width: 3px; border-radius: var(--r); background: var(--let-zacht); }
.cw .redenvak[hidden] { display: none; }
.cw .links-knoppen { justify-content: flex-start; margin-top: 0; }
.cw .slotkaart.uit, .cw .keuzeblok.uit { opacity: .6; cursor: default; }
.cw .kieslijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cw .kiesknop { width: 100%; justify-content: space-between; min-height: 56px; white-space: normal; text-align: left; font-weight: 500; }
.cw .kiesknop > span:first-child { display: grid; gap: 2px; }
.cw .attestnieuw { display: inline-flex; gap: 6px; align-items: center; }
.cw .attestnieuw input { min-height: 36px; width: 220px; padding: 6px 10px; font-size: 14px; }
.cw .rechtenkeuze th[scope=row] { white-space: normal; }
.cw .mailvoorbeeld[hidden] { display: none; }
.cw .mailvoorbeeld .bericht { background: var(--rack); }

/* crew-tab: uren en overuren */
.cw .slots td .overuren { font-size: 12px; color: var(--zacht); margin-top: 2px; }
.cw .dagkop .calltimes { margin-top: 2px; }
.cw .dagkop .acties .knop { text-decoration: none; }

/* crewbord */
.cw.bordscherm .kop-pagina .acties { align-items: center; }
.cw .bord th.vandaag { color: var(--tally-tekst); }
.cw .openslot { background: none; border: 0; padding: 0; text-align: left; width: 100%; cursor: pointer; font: inherit; font-size: 12px; }
.cw .openslot:hover { color: var(--tekst); text-decoration: underline; }
.cw .klein-sig { font-size: 11.5px; margin: 4px 0 0 2px; }
.cw .klein-sig .ic { width: 12px; height: 12px; }
.cw .meldingen { border-left-color: var(--ok); }
.cw .meldingen h2 { display: flex; gap: 8px; align-items: center; }
.cw .meldingen .lijst { margin: 4px 0 6px; }
.cw .compact-bord { font-size: 12px; }
.cw .compact-bord thead th { padding: 8px 2px; text-align: center; font-size: 10.5px; }
.cw .compact-bord .c-naam { width: 170px; }
.cw .compact-bord td { padding: 3px 2px; }
.cw .dienst.mini { padding: 3px 2px 3px 4px; text-align: center; }
.cw .dienst.mini b { font-size: 11px; }
.cw .maandbord .bord { min-width: 1100px; }
.cw .bordwrap .bord { min-width: 900px; }

/* call sheet: A4 op papier (altijd licht, ook in het donkere thema) */
.cw .callsheetscherm { max-width: 900px; margin: 0 auto; }
.cw .blad { --ground: #F2F1EC; --rack: #FBFAF7; --rack-2: #E8E7E1; --lijn: rgba(12,24,22,.13); --lijn-sterk: rgba(12,24,22,.26);
  --tekst: #0C1816; --zacht: #4F6964; --tally-tekst: #B8261B; --tally-zacht: rgba(255,74,61,.12); --ok: #177F71; --let: #8A5A08; --let-zacht: rgba(138,90,8,.12);
  color: var(--tekst); color-scheme: light; }
.cw .blad .status { background: transparent; }
.cw .blad-merk .woordmerk { height: 26px; color: var(--tekst); }
.cw .ct-groot.ct-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cw .ct-groot.ct-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cw .ct-groot.ct-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cw .ct-groot.ct-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw .ct-groot.ct-1 { grid-template-columns: minmax(0, 1fr); }
.cw .ct-extra { margin-top: -12px !important; }
.cw .blad-tabel { width: 100%; }
.cw .callsheet-gsm { display: none; }
.cw .ct-gsm.ct-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cw .ct-gsm.ct-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw .gsm-knoppen .knop { text-decoration: none; }
.cw .nood a { color: inherit; text-decoration: none; }
@media (max-width: 720px) {
  .cw.callsheetscherm .blad, .cw.callsheetscherm .werkbalk { display: none; }
  .cw.callsheetscherm .callsheet-gsm { display: block; }
  .cw .blad-raster { grid-template-columns: 1fr; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  main { padding: 0 !important; }
  .toasts, .crewtabs { display: none !important; }
  .cw.callsheetscherm { max-width: none; }
  .cw.callsheetscherm .werkbalk, .cw.callsheetscherm .callsheet-gsm { display: none !important; }
  .cw.callsheetscherm .blad { display: grid !important; box-shadow: none; border: 0; padding: 0; margin: 0; max-width: none; }
  .cw .blad section, .cw .blad-tabel tr { break-inside: avoid; }
}

/* crew-app: tabbalk onderaan, enkel voor crewleden met enkel E-rechten (op gsm over de volle breedte, op een groot scherm naast het menu) */
.crewtabs { display: none; }
@media (min-width: 961px) { .crewtabs { left: 248px !important; } .crewtabs a { font-size: 13px !important; } }
@media all {
  body.crewapp main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .crewtabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ground); border-top: 1px solid var(--lijn-sterk); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
  .crewtabs a { position: relative; display: grid; justify-items: center; gap: 3px; min-height: 52px; padding-top: 6px; text-decoration: none; color: var(--zacht); font-size: 11.5px; font-weight: 500; }
  .crewtabs a .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .crewtabs a[aria-current="page"] { color: var(--tekst); }
  .crewtabs a[aria-current="page"]::before { content: ''; position: absolute; top: -7px; left: 30%; right: 30%; height: 2px; background: var(--tally); }
  .crewtabs .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 999px; background: var(--tally); color: var(--knop-tekst); font: 600 10px/16px var(--mono); text-align: center; }
}
.cw .aanbod.reserve { border-left-color: var(--lijn-sterk); }
.cw .aanbod.reserve .label { color: var(--zacht); }
.cw .berichten { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); }
.cw .berichten li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
.cw .berichten li + li { border-top: 1px solid var(--lijn); }
.cw .berichten li > div { display: grid; gap: 2px; min-width: 0; }
.cw .berichten li.nieuw { box-shadow: inset 3px 0 0 var(--tally); }
.cw .crewapp-scherm .kop-pagina p .status { margin-left: 4px; }
.cw .crewapp-scherm { max-width: 720px; }
.cw .maandkop .icoonknop { text-decoration: none; }
.cw .mdag { color: var(--tekst); }
.cw .mdag.voorbij span { color: var(--zacht); }
.cw .mdag[hidden] { display: none; }

/* functies en rechten: functienaam klikbaar */
.rijlink.functienaam { font: 600 14px/1.25 var(--body); min-height: 0; text-align: left; }
.functie-extra { display: block; font-weight: 400; }

/* publieke uitnodigingspagina (zonder app) */
.cw .uitnodigvak { width: min(460px, 100%); }
.cw .uitnodigvak h2 { font: 400 30px/1 var(--display); letter-spacing: .03em; margin: 4px 0 0; }
.cw .uitnodigvak p { margin: 0; }
.cw .uitnodigvak .knop { width: 100%; text-decoration: none; }
/* voet van grote dialogen blijft zichtbaar tijdens het scrollen */
.dlg.cw .voet { position: sticky; bottom: -22px; margin: 0 -22px -22px; padding: 12px 22px 16px; background: var(--rack); z-index: 2; }
/* vertrek magazijn de dag ervoor: uur groot, dag klein eronder */
.cw .ct-groot dd .ct-dag, .cw .ct-gsm dd .ct-dag { display: block; margin-top: 3px; font: 500 11px/1.2 var(--mono); letter-spacing: .02em; color: var(--zacht); white-space: nowrap; }
.cw .ct-groot dd, .cw .ct-gsm dd { white-space: nowrap; }
.cw .ct-groot div, .cw .ct-gsm div { align-content: start; }

/* ================================================================= crew 2 (1.1.1) */
/* uren (CRW-05): status per shift, lijst "Uren goedkeuren" */
.cw .status.af { color: var(--tally-tekst); border-color: var(--tally); }
.cw .status.klein-st { font-size: 10px; padding: 3px 6px; vertical-align: 1px; }
.cw .urenregel { margin-top: 3px; }
.cw .urenregel .link { font-size: 13px; }
.cw .let-tekst { color: var(--let); }
.cw .rij.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cw .urenbalk { justify-content: space-between; align-items: end; }
.cw .urenbalk .periode { min-width: min(340px, 100%); margin: 0; }
.cw .urenkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.cw .urenkop h2 { margin: 0; font-size: 17px; }
.cw .urenkop .acties { display: flex; flex-wrap: wrap; gap: 6px; }
.cw .urenkop p { margin: 0; }
.cw .urengroep + .urengroep { margin-top: 26px; }
.cw .urentabel td { vertical-align: top; }
.cw .urenlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cw .urenlijst .vink { align-items: flex-start; }
.cw .breedknop { width: 100%; }
/* rangorde (CRW-03) */
.cw .rangnr { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; border: 1px solid var(--lijn-sterk); font-size: 12px; color: var(--tekst); flex: none; }
.cw .ranglijst { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r); }
.cw .ranglijst li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 44px; }
.cw .ranglijst li + li { border-top: 1px solid var(--lijn); }
.cw .ranglijst .rangnaam { flex: 1; min-width: 0; }
.cw .rangknoppen { display: inline-flex; gap: 2px; }
.cw .rangknoppen [data-op] .ic, .cw .rangknoppen [data-neer] .ic { transform: rotate(90deg); }
/* self-billing en shiftfacturen (CRW-07, FIN-04) */
.cw .sfkaart { border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); padding: 18px 20px; }
.cw .sfkaart + .sfkaart { margin-top: 20px; }
.cw .sfkaart h3 { margin: 18px 0 8px; }
.cw .koppeling p { margin: 0; }
.cw .koppeling .melding { margin: 0; }
.cw .koppeling .rij { margin-top: 10px; align-items: end; }
.cw .sblijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cw .sblijst li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--lijn); border-left: 3px solid var(--let); border-radius: var(--r-klein); }
.cw .sfvoet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.cw .sfvoet p { margin: 0; }
.cw .gefact { margin-top: 14px; }
.cw .gefact summary { cursor: pointer; color: var(--zacht); min-height: 32px; }
.cw .gefact ul { margin: 6px 0 0; padding-left: 18px; }
.cw .sbvoorstel { margin-top: 14px; }
.cw .sbvoorstel tfoot th, .cw .sbvoorstel tfoot td, .dlg.cw tfoot th, .dlg.cw tfoot td { border-top: 1px solid var(--lijn); font-weight: 500; text-align: right; }
/* agenda over accounts heen (PLN-07): shifts bij een ander bedrijf, enkel lezen */
.blok.extern { border-style: dashed; border-left-style: solid; background: transparent; }
.job.extern time { color: var(--zacht); }
@media (max-width: 720px) {
  .cw .rij.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cw .sfkaart { padding: 14px; }
  .cw .sfvoet .knop { width: 100%; }
  .cw .urenbalk .periode { min-width: 100%; }
}
.cw .urenkop h2 .mono { white-space: nowrap; }
/* uren op gsm: elke shift als kaartje (labels uit data-l) */
@media (max-width: 720px) {
  .cw .urentabel thead { display: none; }
  .cw .urentabel, .cw .urentabel tbody, .cw .urentabel tr, .cw .urentabel td { display: block; width: 100%; }
  .cw .urentabel tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--lijn); }
  .cw .urentabel td { padding: 0 !important; border: 0 !important; text-align: left !important; }
  .cw .urentabel td:first-child, .cw .urentabel td:last-child { grid-column: 1 / -1; }
  .cw .urentabel td[data-l]::before { content: attr(data-l); display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
  .cw .urentabel td:last-child { display: flex; gap: 6px; }
  .cw .urentabel td:last-child .knop { flex: 1; }
  .cw .urengroep .tabelwrap { overflow: visible; }
}
.cw .slots .c-uur { width: 190px; }
.cw .slots .urenregel .mono { white-space: nowrap; }
.cw .rangplus { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.cw .rangplus .veld { flex: 1 1 240px; margin: 0; }
.cw .rangknoppen .icoonknop[disabled] { opacity: .35; cursor: default; }
.cw .rij.drie input { min-width: 0; width: 100%; }
@media (max-width: 560px) {
  .cw .rij.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================= 1.1.2 fixA — audit 2 en 3 */
/* audit 2 nr. 3 en 4: de inhoud van een crewdialoog (grid-items) mag nooit breder worden dan de dialoog; tabellen scrollen in hun .tabelwrap */
.dlg.cw form > * { min-width: 0; }
.dlg.cw .voet .rechts { flex-wrap: wrap; justify-content: flex-end; }
.cw .sbvoorstel, .cw .aanbodlijst { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .dlg.cw .voet .knop { flex: 1 1 auto; }
  .dlg.cw .voet .rechts { width: 100%; }
}
/* A11Y-06: niet-gekozen rechtenniveaus leesbaar (≥ 4,5:1); het gekozen niveau blijft benadrukt via achtergrond en rand */
.cw .nivkeuze span { color: var(--zacht); }
.cw .nivkeuze:hover span { color: var(--tekst); }
/* A11Y-09: open-slotknoppen op het crewbord minstens 24 px hoog, met ruimte ertussen */
.cw .openslot { min-height: 24px; padding: 3px 0; line-height: 1.5; }
.cw .openslot + .openslot { margin-top: 2px; }
/* A11Y-10: teller op de tally-kleur altijd in donkere tekst (5,5:1 in beide thema's) */
.cw .telbol, .cw .apptabs .badge, .crewtabs .badge { color: #0C1816; }
/* A11Y-11: gedimde slotkaarten geven informatie, dus geen opacity op de tekst; enkel het vinkje en de rand gedimd */
.cw .slotkaart.uit, .cw .keuzeblok.uit { opacity: 1; color: var(--zacht); border-style: dashed; }
.cw .slotkaart.uit input, .cw .keuzeblok.uit input { opacity: .5; }
/* audit 2 nr. 20: subregel van de rangorde op een eigen regel, scheidingstekens blijven bij het volgende woord */
.cw .ranglijst .rangsub { display: block; }
/* A4-21: afgelopen shift in de crew-app */
.cw .job.afgelopen time { color: var(--zacht); }