/*
 * Bemensing (referentie `schermen/Bemensing.html`).
 *
 * GEEN NIEUWE MATEN EN GEEN NIEUWE KLEUREN. §6.9: wat een scherm nodig heeft en
 * niet in de tokens staat, is een ontwerpvraag. De tekening gebruikt goud op .4
 * en wit op .14; de tokens kennen .35 en .16, en dat verschil is niet te zien.
 * Liever de bestaande waarde dan een token erbij die alleen hier gebruikt wordt.
 *
 * Alles wat gedeeld is, komt uit `components.css`: `.segs`/`.seg`, `.blk`/`.kv`,
 * `.banner`, `.route`, `.pill`. Hier staat alleen wat dit scherm eigen is - de
 * tijdas en wat erop ligt.
 *
 * DE PLAATSING KOMT UIT DE CSSOM. `--links` en `--breed` worden per element gezet
 * door `koppelBemensing`; het CSP staat geen stijlattribuut toe. Staat er geen
 * waarde, dan valt alles terug op 0% en ligt de balk links - zichtbaar fout, en
 * dat is beter dan onzichtbaar fout.
 */

.bem-context {
  font-size: var(--fs-support);
  color: var(--muted);
  margin-top: -2px;
}

/* ---- De tijdas ---------------------------------------------------------- */

/*
 * ÉÉN TIJDAS voor de strook en de balken (AANVULLING-3 §2, herzien).
 *
 * De as staat in dezelfde rij-indeling als een persoonsregel: een lege plek zo
 * breed als de naamkolom, en daarnaast de as. Zo valt 18:00 in de strook samen
 * met 18:00 in elke balk eronder - en dat is de vergelijking waarvoor dit scherm
 * bestaat. De naamkolom staat buiten de tijdas.
 */
.as-rij { align-items: flex-end; padding-bottom: 2px; }
.as { flex: 1; min-width: 0; }
.as-leeg { height: 1px; }

.uren {
  position: relative;
  height: 14px;
}
.uren > span {
  position: absolute;
  left: var(--links, 0%);
  transform: translateX(-50%);
  font-size: var(--fs-micro);
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}

/*
 * De strook zelf. Wat erin ligt is de bezetting, stuk voor stuk: waar niemand
 * staat ligt er niets, en dat is iets anders dan een stuk met de waarde nul.
 */
.spoor {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--white-a05);
  overflow: hidden;
}

.spoor > .sp {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--links, 0%);
  width: var(--breed, 0%);
  background: rgba(180, 142, 71, 0.5);
}

/* Te dun bemand tijdens openingstijd: oranje, de kleur van *let op* (§2). */
.spoor > .sp-dun {
  background: var(--warn-a65);
}

/*
 * De openingstijd als gestippelde randen: het is geen bezetting maar de grens
 * waarbinnen bezetting iets betekent.
 */
.sp-open {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--links, 0%);
  width: var(--breed, 100%);
  border-left: 1px dashed var(--white-a16);
  border-right: 1px dashed var(--white-a16);
}

.spoor-voet {
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  align-items: flex-start;
}
.spoor-open {
  font-size: var(--fs-micro);
  color: var(--ink-dim);
}
.spoor-dun {
  font-size: var(--fs-micro);
  color: var(--warn);
  font-weight: 600;
  text-align: right;
}

.bem-open-vraag {
  margin-top: 12px;
}

/* ---- Eén regel per persoon ---------------------------------------------- */

.mensen {
  margin-top: 10px;
}

.prij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.pnaam {
  width: 64px;
  flex: 0 0 auto;
  font-size: var(--fs-meta);
  color: var(--ink-act);
}
.pnaam > small {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-dim);
  margin-top: 1px;
}
/* Jij bent geen andere persoon maar wel het antwoord op "wanneer moet ik er zijn". */
.pnaam-ik {
  color: var(--ink);
  font-weight: 600;
}
.pnaam-ik > small { color: var(--gold); }
.pnaam-af { color: var(--gold); }
.pnaam-extern { color: var(--ink-dim); }

.pbalk {
  position: relative;
  flex: 1;
  height: 20px;
  border-radius: 6px;
  background: var(--white-a035);
}

.pbalk > b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--links, 0%);
  width: var(--breed, 0%);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(180, 142, 71, 0.55), rgba(180, 142, 71, 0.32));
  border: 1px solid var(--gold-a35);
  font-size: var(--fs-micro);
  color: var(--ink-nav);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  overflow: hidden;
  white-space: nowrap;
}

/* Vol goud: dat ben jij. */
.pbalk > b.pb-ik {
  background: linear-gradient(180deg, #c39c4c, #9d7a33);
  border-color: transparent;
  color: var(--on-gold);
}
/* Grijs: iemand zonder account (§2, de externe medewerker van november). */
.pbalk > b.pb-extern {
  background: var(--white-a07);
  border-color: var(--white-a16);
  color: var(--muted);
}
/* Gestippeld: afbouw hoort bij de dag maar niet bij de bezetting. */
.pbalk > b.pb-af {
  background: var(--white-a05);
  border: 1px dashed var(--gold-a35);
  color: var(--gold);
}

/* ---- Jouw eigen shift --------------------------------------------------- */

.mijn {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-a13), rgba(180, 142, 71, 0)), var(--surface);
  border: 1px solid var(--gold-a32);
}
.mijn-kop { justify-content: space-between; align-items: flex-start; }
.mijn-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.mijn-tijd {
  font-size: var(--fs-num-sum);
  margin-top: 5px;
}
.mijn-knop {
  height: 32px;
  padding: 0 14px;
  cursor: pointer;
  font-family: inherit;
}
.mijn-uitleg {
  font-size: var(--fs-meta);
  color: var(--muted-2);
  margin-top: 9px;
}

/* ---- De tijdvraag ------------------------------------------------------- */

/*
 * Verschijnt in het scherm zelf, waar hij over gaat, en verdwijnt zodra hij
 * beantwoord is. Hetzelfde patroon als de kaartenappvraag op het relatiescherm:
 * geen los scherm en geen `prompt()` van de browser.
 */
.tijdvraag {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--gold-a30);
}
.tijdvraag-kop {
  font-size: var(--fs-support);
  font-weight: 600;
}
.tijdvraag-velden {
  gap: 10px;
  margin-top: 10px;
}
.tijdvraag-veld {
  flex: 1;
  font-size: var(--fs-meta);
  color: var(--muted-2);
}
/*
 * De eigen tijdkiezer van het toestel. `color-scheme: dark` is wat het klokje
 * van iOS en Android donker maakt; zonder die regel staat er een wit vlak in een
 * donker scherm.
 */
.tijdvraag-veld > input {
  display: block;
  width: 100%;
  margin-top: 4px;
  min-height: var(--tap-min);
  padding: 0 10px;
  border-radius: var(--r-btn);
  border: 1px solid var(--white-a10);
  background: var(--white-a04);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  color-scheme: dark;
}
.tijdvraag-veld > input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.tijdvraag-knoppen {
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tijdvraag-knoppen > .btn { flex: 1; }
.tijdvraag-fout {
  margin-top: 9px;
  font-size: var(--fs-meta);
  color: var(--warn);
}

/* ---- De standen van een shift (BOUWOPDRACHT-8 par. 5.4) ----------------- */

.prij-stand { font-size: var(--fs-micro); vertical-align: middle; }
/* Afgezegd blijft staan (waarom viel er een gat?) maar telt niet mee. */
.prij-afgezegd { opacity: 0.45; }
.prij-afgezegd .pbalk b { text-decoration: line-through; }

/* K15: misschien of afgewezen is geen bemensing - de balk waarschuwt. */
.pbalk > b.pb-warn {
  background: var(--warn-a11);
  border: 1px solid var(--warn);
  color: var(--warn-text);
}