/* Reddo - de schermen van een zaak die rondes rijdt: Vandaag, Verzoeken, Objecten, Historie.

   Eén eigenaar, één prefix: alles hier heet `r-ops-`, en niets hier raakt een regel van een ander
   scherm. De werklijst van een reparatiebedrijf ziet dit bestand daarom nooit terug in zijn berekende
   stijlen; hij wordt alleen geladen.

   Waarom ook geen volgorde-regel zoals bij components.css: er is hier niets dat bij gelijke
   specificiteit met een ander bestand botst. Het enige dat een bestaande klasse aanraakt is
   `.r-screen.r-ops` (specifieker dan `.r-screen`, dus plaats in de cascade doet er niet toe) en de
   viewer, via een klasse die alleen dit scherm erop zet.

   Geen eigen kleuren: alles komt uit tokens.css. De rode van fouten is dezelfde als op de werkkaart
   (`.r-card__sub--overdue`), want het palet kent geen rood.

   Dichter dan de werklijst, voor iemand die in een bestelbus zit en met één duim werkt: de kaart is
   kleiner, de knoppen zijn niet kleiner dan 48px. 390px eerst; op een breed scherm gaan de lijsten in twee
   kolommen en het scherm wordt breder. */

.r-screen.r-ops { max-width: 430px; }
@media (min-width: 760px) {
  .r-screen.r-ops { max-width: 880px; }
}

.r-ops [hidden] { display: none !important; }

/* ------------------------------------------------------------------ de vier weergaven --- */

.r-ops-tabs {
  display: flex; gap: 2px; margin: 0 0 14px;
  border-bottom: 1px solid var(--r-border);
}
.r-ops-tab {
  flex: 1 1 auto; min-height: 48px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.15;
  color: var(--r-muted); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  -webkit-tap-highlight-color: transparent;
}
.r-ops-tab:visited { color: var(--r-muted); }
.r-ops-tab[aria-current="page"] { color: var(--r-black); border-bottom-color: var(--r-black); }
@media (min-width: 760px) {
  .r-ops-tab { flex: 0 1 auto; padding: 0 22px; font-size: 14px; }
}

/* Het aantal openstaande verzoeken op de tab zelf. Oker is "bezig" in dit palet, en een verzoek is iets dat
   wacht op een handeling: dezelfde kleur, met zwarte tekst zoals elke okeren vlak. */
.r-ops-tab__badge {
  min-width: 20px; height: 20px; padding: 0 6px; flex: none;
  display: inline-grid; place-items: center; border-radius: 10px;
  background: var(--r-status-bezig); color: var(--r-black);
  font-family: var(--r-font-mono); font-size: 11px; font-weight: 600;
}

/* Wat nog moet vertrekken. Zand, zoals elke "nog bezig"-toestand, en rustig: offline is normaal. */
.r-ops-wacht {
  margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-radius-btn);
  background: var(--r-status-aangenomen); color: var(--r-black);
  font-size: 13px; font-weight: 600;
}

.r-ops-weergave { display: block; }

.r-ops-lijst { display: flex; flex-direction: column; gap: var(--r-gap-list); }
@media (min-width: 760px) {
  .r-ops-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.r-ops-sectie__kop {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px 8px 8px; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
}
.r-ops-sectie:first-child .r-ops-sectie__kop { margin-top: 4px; }
.r-ops-sectie__aantal { font-family: var(--r-font-mono); font-size: 12px; font-weight: 500; color: var(--r-faint); }

/* ----------------------------------------------------------------------- de ronde --- */

.r-ops-ronde {
  position: relative; overflow: hidden;
  background: var(--r-card); border: 1px solid var(--r-border); border-radius: var(--r-radius-card);
  padding: 12px var(--r-pad-card) 12px calc(var(--r-pad-card) + 4px);
}
.r-ops-ronde::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--r-strip-w); background: var(--strip, var(--r-border));
}
.r-ops-ronde__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* Het label is wat er op het ding staat en waar iedereen over praat: het grootste op de kaart. Lang afbreken
   op een woord, liever een tweede regel dan een afgekapt nummer. */
.r-ops-ronde__label {
  margin: 0; min-width: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.r-ops-ronde__locatie { margin: 4px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--r-muted); }
.r-ops-ronde__locatie li { overflow-wrap: anywhere; }
.r-ops-ronde__tijd {
  margin: 8px 0 0; font-family: var(--r-font-mono); font-size: 12px; color: var(--r-faint);
}
.r-ops-ronde__geenfoto { margin: 8px 0 0; font-size: 13px; color: var(--r-faint); }

.r-ops-pil {
  flex: none; padding: 5px 10px; border-radius: var(--r-radius-pill);
  font-family: var(--r-font-mono); font-size: 11px; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
}

/* Miniaturen: groot genoeg om te herkennen wat er staat en om te raken met een duim. Hoogstens drie op de
   kaart, de rest zit achter de laatste. */
.r-ops-fotos { display: flex; gap: 8px; margin-top: 10px; }
.r-ops-foto {
  position: relative; flex: none; width: 72px; height: 72px; padding: 0;
  border: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--r-paper); color: var(--r-faint); font: inherit; font-size: 11px;
}
.r-ops-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-ops-foto--leeg { display: grid; place-items: center; border: 1px dashed var(--r-border); }
.r-ops-foto__meer {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(26, 20, 17, .55); color: #fff;
  font-family: var(--r-font-mono); font-size: 15px; font-weight: 600;
}

/* De viewer heeft geen alleen-lezen stand. Voor een verzoek bekijk je alleen: weggooien en toevoegen
   horen daar niet, en een knop die niets doet is een belofte die niet wordt waargemaakt. */
.r-ops-pv--lezen .r-pv-trash,
.r-ops-pv--lezen .r-pv-add,
.r-ops-pv--lezen .r-pv-note { display: none; }

/* --------------------------------------------------------------------------- knoppen --- */

.r-ops-acties { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }

.r-ops-knop {
  font: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.2;
  min-height: 48px; padding: 0 18px; border-radius: var(--r-radius-btn); cursor: pointer;
  border: 1px solid transparent;
}
.r-ops-knop--hoofd { flex: 1 1 auto; background: var(--r-black); color: var(--r-paper); }
/* Secundair: kleiner van gewicht en breedte, maar het raakvlak blijft ruim. Afwijzen is een uitzondering en
   hoort niet even zwaar te wegen als de hoofdstap. */
.r-ops-knop--stil {
  flex: none; background: transparent; color: var(--r-muted);
  border-color: var(--r-border); font-size: 14px; font-weight: 600; padding: 0 16px;
}
.r-ops-knop--stil:hover { color: var(--r-black); border-color: var(--r-muted); }
/* Uitgeschakeld moet je kúnnen zien, naast een zichtbare reden: een title bestaat niet op touch. De inline
   kleur van een statusknop is specifieker dan deze regel, vandaar !important. */
.r-ops-knop:disabled {
  cursor: not-allowed; opacity: .55;
  background: var(--r-border) !important; color: var(--r-muted) !important;
  border-color: transparent;
}

/* ------------------------------------------------------------------ zoeken en formulier --- */

.r-ops-gereedschap { display: grid; gap: 10px; margin: 0 0 14px; }

/* 16px: onder die maat zoomt iOS in bij de eerste focus (zie `.r-addform__input`). */
.r-ops-invoer {
  width: 100%; min-height: 48px; font: inherit; font-size: 16px; padding: 11px 12px;
  border-radius: var(--r-radius-btn); border: 1px solid var(--r-border);
  background: var(--r-card); color: var(--r-black);
}

.r-ops-filter { display: flex; gap: 6px; }
.r-ops-filter__knop { flex: 1 1 0; min-height: 44px; padding: 0 8px; font-size: 13.5px; }
.r-ops-filter__knop[aria-pressed="true"] { background: var(--r-black); color: var(--r-paper); border-color: var(--r-black); }

.r-ops-formulier {
  display: grid; gap: 12px; margin: 0 0 14px; padding: 14px;
  background: var(--r-card); border: 1px solid var(--r-border); border-radius: var(--r-radius-card);
}
.r-ops-formulier__kop { margin: 0; font-size: 17px; font-weight: 700; }
.r-ops-veld { display: grid; gap: 6px; }
.r-ops-veld__label { font-size: 13.5px; font-weight: 600; }

.r-ops-hint { margin: 0; font-size: 12.5px; color: var(--r-muted); }
.r-ops-fout { margin: 0; font-size: 14px; font-weight: 600; color: #A8341F; }
.r-ops-melding {
  margin: 0 0 14px; padding: 10px 12px; font-size: 14px;
  background: var(--r-card); border: 1px solid var(--r-border);
  border-left: 4px solid var(--r-status-klaar); border-radius: var(--r-radius-btn);
}
.r-ops-melding__link { color: var(--r-black); font-weight: 700; }

.r-ops-leeg { margin: 0; padding: 10px 8px; font-size: 14px; color: var(--r-muted); }
.r-ops-leeg--groot {
  padding: 40px 16px; text-align: center;
  border: 1px dashed var(--r-border); border-radius: var(--r-radius-card);
}
.r-ops-leeg__kop { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--r-black); }

/* ------------------------------------------------------------------------- objecten --- */

.r-ops-object {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 10px var(--r-pad-card);
  background: var(--r-card); border: 1px solid var(--r-border); border-radius: var(--r-radius-card);
  color: var(--r-black); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.r-ops-object:visited { color: var(--r-black); }
.r-ops-object__tekst { display: grid; min-width: 0; }
.r-ops-object__label { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.r-ops-object__ref { font-size: 13px; color: var(--r-muted); overflow-wrap: anywhere; }
.r-ops-object__buiten, .r-ops-object__geen { flex: none; font-size: 13px; color: var(--r-faint); }
.r-ops-object__buiten { font-weight: 600; color: var(--r-muted); }

.r-ops-terug {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 4px 8px;
  font-size: 14px; font-weight: 600; color: var(--r-muted); text-decoration: none;
}
.r-ops-terug:visited { color: var(--r-muted); }

.r-ops-detail__kop { margin: 0; padding: 0 8px; }
.r-ops-detail__ref, .r-ops-detail__buiten { margin: 0 0 10px; font-size: 14px; color: var(--r-muted); }
.r-ops-detail__buiten { font-weight: 700; }

.r-ops-feiten {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; align-items: baseline;
  margin: 0 0 14px; padding: 12px var(--r-pad-card);
  background: var(--r-card); border: 1px solid var(--r-border); border-radius: var(--r-radius-card);
}
.r-ops-feiten dt { font-size: 13px; color: var(--r-muted); }
.r-ops-feiten dd { margin: 0; font-size: 14.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.r-ops-code {
  display: inline-block; padding: 3px 8px; border-radius: 6px;
  background: var(--r-paper); border: 1px solid var(--r-border);
  font-family: var(--r-font-mono); font-size: 14px; font-weight: 600; letter-spacing: .04em;
}

.r-ops-blok { display: grid; gap: 10px; margin: 0 0 16px; }
.r-ops-blok__kop { margin: 8px 8px 0; font-size: 14px; font-weight: 700; }
.r-ops-gevonden { display: grid; gap: 10px; }
.r-ops-gevonden__tekst { margin: 0; font-size: 15px; font-weight: 600; }

/* ------------------------------------------------------------------------- historie --- */

.r-ops-dag__kop {
  margin: 18px 8px 8px; font-size: 14px; font-weight: 700; color: var(--r-muted);
  letter-spacing: -.01em;
}
.r-ops-dag:first-child .r-ops-dag__kop { margin-top: 4px; }

/* De historie blijft op elk scherm één kolom: een rij die openklapt zou naast een dichte rij een gat achterlaten. */
@media (min-width: 760px) {
  .r-ops-historie .r-ops-lijst { grid-template-columns: minmax(0, 1fr); }
}

.r-ops-hrij {
  background: var(--r-card); border: 1px solid var(--r-border); border-radius: var(--r-radius-card);
  overflow: hidden;
}
.r-ops-hrij__kop {
  display: grid; gap: 3px; width: 100%; min-height: 56px; padding: 11px var(--r-pad-card);
  background: none; border: 0; font: inherit; color: var(--r-black); text-align: left; cursor: pointer;
}
.r-ops-hrij__bovenste { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.r-ops-hrij__label { min-width: 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.r-ops-hrij__locatie { font-size: 14px; color: var(--r-muted); overflow-wrap: anywhere; }
.r-ops-hrij__tijden { font-family: var(--r-font-mono); font-size: 12px; color: var(--r-muted); }
.r-ops-hrij--open .r-ops-hrij__kop { border-bottom: 1px solid var(--r-border); }

.r-ops-hrij__detail { display: grid; gap: 4px; padding: 12px var(--r-pad-card) 14px; }
.r-ops-hrij__detail .r-ops-feiten { margin: 0 0 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.r-ops-hrij__tussenkop { margin: 10px 0 2px; font-size: 13px; font-weight: 700; color: var(--r-muted); }

.r-ops-verloop { margin: 0; padding: 0; list-style: none; }
.r-ops-verloop__regel {
  padding: 7px 0; font-size: 14px; border-top: 1px solid var(--r-border); overflow-wrap: anywhere;
}
.r-ops-verloop__regel:first-child { border-top: 0; }
.r-ops-verloop__regel--wacht { color: var(--r-muted); font-style: italic; }
.r-ops-grens { margin: 8px 0 0; font-size: 12px; color: var(--r-faint); }

/* "Ongedaan maken" na afwijzen: onderaan het scherm, boven de rest, een paar seconden. Vast op het scherm en
   niet in de lijst, want de lijst wordt elke halve minuut opnieuw opgebouwd en de kaart is al weg. */
.r-ops-ongedaan {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 560px; margin: 0 auto; padding: 8px 8px 8px 16px;
  border-radius: var(--r-radius-btn); background: var(--r-black); color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.r-ops-ongedaan[hidden] { display: none; }
.r-ops-ongedaan__tekst { min-width: 0; overflow-wrap: anywhere; }
.r-ops-ongedaan__knop {
  flex: none; min-height: 48px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-radius-btn); background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}

/* Een link die eruitziet als een knop: dezelfde maat en hetzelfde raakvlak, zonder onderstreping. */
a.r-ops-knop { display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }

/* Onder de Historie: zegt dat er oudere rondes zijn, en laadt ze op aanvraag. */
.r-ops-meer { display: grid; gap: 8px; justify-items: start; margin: 12px 0 4px; }
.r-ops-meer__knop { align-self: stretch; }