/* De fotomodal (photo-viewer.ts).
 *
 * Alle CSS in deze app is globaal — geen bundler — en dit bestand wordt ná
 * components.css geladen. Daarom begint hier élke klasse met .r-pv- : namen als
 * .r-thumb, .r-photo en .r-count bestaan al, en bij een botsing zou dit bestand
 * winnen en het scherm van iemand anders slopen.
 *
 * Twee klassen komen bewust uit components.css: .r-thumb--sending en de
 * @keyframes r-breathe. Die staan op slot in het contract; een tweede animatie
 * die "ongeveer hetzelfde" doet loopt na één wijziging uiteen.
 */

/* z-index 60. De ladder eronder: topbar 10, dropdown 20, netstatus 40, modal 50. */
.r-pv-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* Doorschijnend, en dat is een correctie. Dit was een dekkend zwart scherm — je tikte
     op een foto en de hele app was weg. Dat leest als "ben ik nu in mijn camera?" in
     plaats van als "ik bekijk een foto uit mijn lijst". De werklijst hóórt zichtbaar te
     blijven: dan weet je waar je bent en hoe je terugkomt. Zelfde gedachte als .r-modal,
     die op .55 staat. */
  background: rgba(26, 20, 17, 0.72);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.r-pv-overlay:focus { outline: none; }

/* Volledig scherm: dezelfde modal, maar dan wel alles. */
.r-pv-overlay--vol { background: var(--r-black); }
.r-pv-overlay--vol .r-pv-stage { flex: 1; height: auto; min-height: 0; }

/* ── de foto ──────────────────────────────────────────────────────────────── */

/* Ongeveer de helft van het scherm, niet alles. Wie hem echt groot wil, tikt op de knop
   rechtsboven — dan pas gaat hij naar de volle hoogte. Dat is een keuze van de kijker en
   niet iets dat we hem opdringen zodra hij per ongeluk een foto aanraakt. */
.r-pv-stage {
  position: relative;
  flex: 0 0 auto;
  height: 52vh;
  /* Zonder dit weigert een flex-kind te krimpen en loopt een staande foto het
     scherm uit in plaats van te schalen. */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* Het kader is zo groot als de foto zelf en niet groter — anders zou het randje
   van .r-thumb--sending om het halve scherm heen staan in plaats van om de foto. */
.r-pv-frame {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  border-radius: 10px;
}
.r-pv-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

/* Laadt de foto niet, dan is dit scherm zwart en niets meer. Dan liever een regel
   die zegt wat er aan de hand is dan een leeg vlak waarvan je denkt dat de app stuk is. */
.r-pv-broken {
  max-width: 260px;
  padding: 22px 18px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--r-faint);
  border: 1px dashed rgba(250, 247, 242, .28);
  border-radius: 12px;
}

/* ── pijltjes ─────────────────────────────────────────────────────────────── */

/* Licht en laag contrast, zonder rand: het zijn aanwijzingen, geen knoppen die om
   aandacht vragen. Ze liggen over de foto heen zodat de foto zelf zo groot mogelijk blijft. */
.r-pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 10px 6px;
  cursor: pointer;
  color: var(--r-paper);
  opacity: .55;
  /* Ook op een klein scherm een doel dat je met een duim raakt. */
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  /* Zonder dit ligt de knop onder de foto en vangt de foto de tik. */
  z-index: 1;
}
.r-pv-nav:hover { opacity: .9; }
/* Aan het eind van de reeks: nog wel te zien dat er een pijltje is, maar duidelijk
   dood. Weghalen zou de balk laten verspringen bij elke foto. */
.r-pv-nav:disabled { opacity: .15; cursor: default; }
.r-pv-nav--prev { left: 2px; }
.r-pv-nav--next { right: 2px; }
.r-pv-nav[hidden] { display: none; }

.r-pv-close {
  background: none;
  border: 0;
  padding: 12px;
  cursor: pointer;
  color: var(--r-paper);
  opacity: .7;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}
.r-pv-close:hover { opacity: 1; }

/* ── de balk onderaan ─────────────────────────────────────────────────────── */

.r-pv-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 14px;
}

.r-pv-thumbs {
  order: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  /* Vijf miniaturen passen op 390px; deze regel is er voor het geval de maat ooit
     omhoog gaat, zodat ze dan schuiven in plaats van de balk uit elkaar te duwen. */
  min-width: 0;
}
.r-pv-thumb {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(250, 247, 242, .1);
  /* Waar je níét bent, is gedempt. Dat is genoeg onderscheid; een rand om alle vier
     de andere maakt de balk onrustiger dan de foto. */
  opacity: .5;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--r-faint);
}
.r-pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-pv-thumb--current {
  opacity: 1;
  outline: 2px solid var(--r-paper);
  outline-offset: 1px;
}
.r-pv-thumb--empty { border: 1px dashed rgba(250, 247, 242, .3); }

.r-pv-add {
  order: 1;
  flex: none;
  margin-left: 2px;
  background: none;
  border: 1px solid rgba(250, 247, 242, .35);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  color: var(--r-paper);
  display: grid;
  place-items: center;
}
/* Vol. Zichtbaar laten staan en uitzetten, niet verbergen: een plusje dat weg is
   leest als "foto's toevoegen bestaat niet meer". De reden staat er los bij, want
   een title-tooltip bestaat niet op touch. */
.r-pv-add:disabled { opacity: .4; cursor: not-allowed; }

.r-pv-trash {
  order: 2;
  flex: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--r-paper);
  opacity: .8;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}
.r-pv-trash:disabled { opacity: .35; cursor: default; }

/* Eigen regel onder de miniaturen, zodat de prullenbak rechts blijft staan. */
.r-pv-note {
  order: 3;
  flex: 1 0 100%;
  font-size: 12.5px;
  color: var(--r-faint);
}

/* ── weggooien, in twee stappen ───────────────────────────────────────────── */

.r-pv-warn {
  flex: 1 0 100%;
  font-size: 12.5px;
  color: var(--r-faint);
}
.r-pv-yes, .r-pv-no {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-radius-btn);
  padding: 8px 14px;
}
/* Zelfde rood als het weggooien van een klus op de kaart en als "te laat".
   Geen nieuw signaalrood. */
.r-pv-yes { background: #A8341F; color: #fff; border: 1px solid #A8341F; }
.r-pv-no {
  background: transparent;
  color: var(--r-paper);
  border: 1px solid rgba(250, 247, 242, .35);
}


/* Knoppenrij rechtsboven: groter/kleiner en sluiten, naast elkaar.
   Absoluut gepositioneerd, want de overlay centreert zijn kinderen verticaal sinds de
   foto nog maar de halve hoogte vult — zonder dit zweefde de sluitknop bovenaan het
   scherm en stond "Groter" er los onder. */
.r-pv-topbar {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 6px);
  right: calc(env(safe-area-inset-right) + 8px);
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
}
.r-pv-full {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--r-paper); background: rgba(250, 247, 242, .14);
  border: 1px solid rgba(250, 247, 242, .28); border-radius: var(--r-radius-btn);
  padding: 7px 12px;
}
.r-pv-full:hover { background: rgba(250, 247, 242, .24); }