/* Reddo - inloggen, "Mijn status", en de naam van de onderneming die achteraf gevraagd wordt.

   Geknipt uit components.css. Drie schermen die alleen aan het begin van een sessie
   voorkomen en verder nergens: bij elkaar zetten maakt zichtbaar dat ze samen een pad zijn. */

/* --- Naam van de onderneming, achteraf gevraagd (Track E, punt 5).
   Een uitnodiging bovenin de werklijst, geen slagboom: zandkleur i.p.v. een
   waarschuwingskleur, want er is niets mis — er ontbreekt alleen nog iets. --- */
.r-namebar-slot:empty { display: none; }
.r-namebar {
  background: var(--r-card); border: 1px solid var(--r-border);
  border-left: var(--r-strip-w) solid var(--r-status-aangenomen);
  border-radius: var(--r-radius-card); padding: 12px 14px; margin-bottom: 10px;
}
.r-namebar__label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.r-namebar__row { display: flex; gap: 8px; }
/* 16px is geen smaak maar een iOS-regel: Safari zoomt automatisch in zodra je een
   invoerveld met een kleiner lettertype aanraakt. Dat is precies wat er gebeurde bij het
   invullen van de bedrijfsnaam — het scherm sprong "een beetje ingezoomd" en bleef daarna
   verschoven staan. Onder de 16px komt hier dus geen enkel veld waar je in kunt tikken. */
.r-namebar__input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px;
  padding: 10px 12px; border-radius: var(--r-radius-btn);
  border: 1px solid var(--r-border); background: var(--r-paper); color: var(--r-black);
}
.r-namebar__save {
  flex: none; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 10px 16px; border: 0; border-radius: var(--r-radius-btn);
  background: var(--r-black); color: var(--r-paper);
}
.r-namebar__save:disabled { opacity: .45; cursor: not-allowed; }
.r-namebar__error {
  margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #A8341F; line-height: 1.45;
}
.r-namebar__error[hidden] { display: none; }

/* Modal bij de tweede foto. "Later" staat er volwaardig naast: het werk is al
   opgeslagen, dus wegklikken mag niets kosten. */
.r-modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(26, 20, 17, .55);
  display: grid; place-items: center; padding: 20px;
}
.r-modal__box {
  background: var(--r-card); border-radius: var(--r-radius-card-lg);
  padding: 20px; width: 100%; max-width: 380px;
  box-shadow: 0 18px 50px rgba(26, 20, 17, .28);
}
.r-modal__title { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.02em; }
.r-modal__body { font-size: 13.5px; color: var(--r-muted); line-height: 1.5; margin: 0 0 14px; }
/* In de modal staat het veld alleen, niet naast een knop: dan moet het ook de
   volle breedte pakken in plaats van de flex-basis uit de werklijstregel. */
.r-modal .r-namebar__input { width: 100%; box-sizing: border-box; }
.r-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.r-modal__later {
  font: inherit; font-size: 14px; cursor: pointer; padding: 10px 14px;
  border: 1px solid var(--r-border); border-radius: var(--r-radius-btn);
  background: transparent; color: var(--r-muted);
}
.r-modal__save {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 10px 18px; border: 0; border-radius: var(--r-radius-btn);
  background: var(--r-black); color: var(--r-paper);
}
.r-modal__save:disabled { opacity: .45; cursor: not-allowed; }

/* --- Inloggen (D4) en "Mijn status" (D5). Twee stappen: eerst de zaak
   aanwijzen, dan de code. Delen de picker-stijlen hieronder. --- */
.r-lookup { display: flex; flex-direction: column; }
.r-lookup__step { display: flex; flex-direction: column; }
.r-lookup__chosen {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--r-card); border: 1px solid var(--r-border);
  border-left: var(--r-strip-w) solid var(--r-status-klaar);
  border-radius: var(--r-radius-card); padding: 12px 14px; margin-bottom: 12px;
}
.r-lookup__chosenname { font-size: 15px; font-weight: 700; }
.r-lookup__change {
  flex: none; font: inherit; font-size: 12px; cursor: pointer;
  background: none; border: 0; padding: 0;
  color: var(--r-muted); text-decoration: underline;
}
/* Codeveld: cijfers uit elkaar, zodat je ziet hoeveel je er hebt getikt. */
.r-addform__input--code {
  font-family: var(--r-font-mono); font-size: 20px; font-weight: 600;
  letter-spacing: .3em; text-align: center;
}
.r-lookup__lost {
  font-size: 12.5px; color: var(--r-faint); line-height: 1.5;
  margin: 14px 0 0; display: block;
}

/* Bedrijfskiezer bij het koppelen: zoekresultaten als aantikbare regels. */
.r-picker {
  border: 1px solid var(--r-border); border-radius: var(--r-radius-btn);
  overflow: hidden; margin-bottom: 8px;
}
.r-picker[hidden] { display: none; }
.r-picker__item {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--r-border);
  background: var(--r-card); color: var(--r-black);
}
.r-picker__item:last-child { border-bottom: 0; }
.r-picker__item:hover { background: var(--r-paper); }
.r-picker__name { font-size: 14px; font-weight: 600; }
.r-picker__meta { font-size: 12px; color: var(--r-muted); }
.r-picker__empty { padding: 10px 12px; font-size: 13px; color: var(--r-muted); }

/* Printen: alleen de flyers, zonder chrome eromheen. */
@media print {
  .r-topbar, .r-screenhead, .r-adminlock,
  .r-adminpanel .r-addform, .r-adminpanel__hint, .r-netstatus { display: none; }
  .r-adminpanel { border: 0; padding: 0; }
  .r-flyer { break-inside: avoid; }
}