/* Reddo — de regel "Datum klaar" (ui/date-picker.ts).
 *
 * Eigen bestand met een eigen voorvoegsel `.r-dp-`. Er is geen bundler, dus alle CSS
 * is globaal: een klassenaam die ergens anders ook bestaat sloopt een ander scherm.
 * Alles hieronder begint daarom met .r-dp-, zonder uitzondering (CONTRACT.md §8).
 * Kleuren en maten komen uit tokens.css; dat bestand staat op slot.
 */

.r-dp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* De waarschuwing hieronder krijgt een eigen regel; zonder wrap duwt hij het veld
     en het kruisje het scherm uit. */
  flex-wrap: wrap;
  /* Vaste hoogte, ook als er alleen een pictogram staat: anders verspringt de kaart
     op het moment dat er een datum bij komt. */
  min-height: 34px;
}

/* Gedempt label, vette waarde — dezelfde verhouding als Aangeleverd erboven. Het
   label is de rustige helft; wat de vakman leest is de datum. */
.r-dp-label {
  /* 14px en niet 12,5px: `.r-meta__row` in components.css zet die maat en deze regel
     hangt tussen "Aangeleverd:" en "Klantcode:". Op 12,5px lijnden de kolommen wél
     uit maar was dit label zichtbaar kleiner dan zijn twee buren — dezelfde "uit de
     pas" als de breedte hieronder, alleen een andere maat.

     14 -> 16px meegegroeid toen de kaarttekst 15% groter werd; `.r-meta__row` staat nu op
     16px en dit label hangt er nog steeds tussenin. */
  font-size: 16px;
  color: var(--r-muted);
  flex: none;
  /* Volgt `.r-meta__label` in components.css, dat op `min-width: 104px` staat: deze
     regel hangt tussen "Aangeleverd:" en "Klantcode:" en die staan daar allebei op.
     Zonder dit begon de waarde 33px te vroeg en liep de kolom zichtbaar uit de pas.
     Het getal staat hier los omdat `tokens.css` op slot staat en er dus geen gedeelde
     maat voor is — wijzigt components.css, dan moet dit mee. */
  min-width: 104px;
}

/* Alleen zichtbaar na een poging die niet kon. Volle breedte, zodat hij onder de
   regel valt en niets verspringt; gedempt rood, dezelfde tint als "te laat" op de
   kaart — geen tweede signaalkleur erbij. */
.r-dp-warn {
  flex: 1 0 100%;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #A8341F;
}

.r-dp-warn[hidden] {
  display: none;
}

.r-dp-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 34px, gelijk aan het prullenbakje en het inklappen: met een duim mikken op een
     pictogram van 18px lukt niet. */
  min-height: 34px;
  min-width: 34px;
  justify-content: flex-start;
  padding: 0 4px;
  border-radius: var(--r-radius-btn);
  cursor: pointer;
  /* Een tik op de datum zette hem op een iPhone blauw in de tekstselectie — blauw
     komt in dit palet nergens voor en het zag eruit als een storing. De datum is
     hier geen tekst om te selecteren maar de knop om de kiezer te openen. */
  -webkit-user-select: none;
  user-select: none;
  /* Zelfde reden als bij .r-logo: de grijze vlek van iOS over een raakvlak van
     34px is groter dan het pictogram zelf. De kiezer die opengaat is de reactie. */
  -webkit-tap-highlight-color: transparent;
}

/* De input ligt doorzichtig over het hele veld. Niet display:none en niet 1px
   weggeklemd: dan kun je hem op touch niet openen en ziet een schermlezer hem niet.
   -webkit-appearance uit, anders houdt iOS ruimte vrij voor zijn eigen opmaak en
   wordt het raakvlak breder dan het pictogram. */
.r-dp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.r-dp-face {
  display: inline-flex;
  align-items: center;
  /* Gelijk aan `.r-meta__value`, om dezelfde reden als bij het label hierboven. Mee
     omhoog van 14 naar 16px toen de kaarttekst 15% groter werd. */
  font-size: 16px;
  font-weight: 700;
  color: var(--r-black);
  line-height: 1;
}

/* Nog geen datum: alleen het pictogram, in de gedempte kleur. Vol zwart zou het
   evenveel gewicht geven als een echte afspraak, en die is er nog niet. */
.r-dp-face--empty {
  color: var(--r-muted);
}

/* De focusring van de app (components.css) valt op de input zelf, en die is
   doorzichtig — opacity werkt ook op een outline, dus daar zie je niets van. Hier
   dus op het zichtbare deel, in dezelfde okerkleur als overal. */
.r-dp-input:focus-visible + .r-dp-face {
  outline: 2px solid var(--r-status-bezig);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Weghalen. Klein en gedempt, zoals het prullenbakje: het is terugnemen wat je net
   hebt ingevoerd, geen stap in het werk. */
.r-dp-clear {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  font: inherit;
  background: transparent;
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-btn);
  color: var(--r-faint);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* `hidden` alleen is niet genoeg: de display hierboven staat in een klassenregel en
   wint van het [hidden] van de browser. Dan blijft het kruisje staan bij een lege
   datum — precies de knop die er dan niet hoort te zijn. */
.r-dp-clear[hidden] {
  display: none;
}