/* =========================================================================
   27 Moments portaal, de opmaak van het onderdeel overzicht

   Sinds september 2026 draagt het overzicht ook "jullie dag": de namen, de
   locatie en de momenten met hun datum en plek, rechtstreeks te bewerken
   (docs/vereenvoudiging-2026-09.md). De formulieren lenen .veld uit
   portaal.css; alleen de schikking staat hier.
   ========================================================================= */

.ov-takenlijst { margin: 16px 0 14px; }
.ov-takenlijst .rij { flex-wrap: wrap; row-gap: 4px; }
.ov-sitelink { font-size: 13.5px; color: #8a857e; margin-top: 4px; }
.ov-waarschuwing { font-size: 13px; color: #8a6d2f; background: #f8f2e2; border: 1px solid #ecdcb8; border-radius: 10px; padding: 9px 12px; margin: 10px 0 0; }
.ov-waarschuwing .m27-btn { margin-top: 8px; }
.kaart--paars h2:only-child { margin-bottom: 0; }
a.rij { color: inherit; text-decoration: none; padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; border-radius: 10px; transition: background-color .15s ease; }
a.rij:hover { background: #f7f5f1; }
a.rij:hover .ov-waarde { color: var(--m27-paars); }
a.rij:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.ov-waarde { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.ov-waarde svg { width: 15px; height: 15px; flex: none; color: #b8b2a9; }

/* ---------------------------------------------------------- jullie dag */

.ov-dag { margin-bottom: 12px; }
.ov-dag__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ov-dag__kop h3 { margin-bottom: 2px; }
.ov-dag__kop .uitleg { margin: 0; }
.ov-kopje { font-size: var(--m27-fs-label); letter-spacing: var(--m27-ls-label); text-transform: uppercase; color: var(--m27-paars); margin: 20px 0 2px; font-weight: 600; }

.ov-moment { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #efece6; }
.ov-moment:last-child { border-bottom: 0; }
.ov-moment strong { display: block; font-weight: 600; }
.ov-moment span { display: block; font-size: 13px; color: #8a857e; }
.ov-moment__wat strong { overflow-wrap: anywhere; }
.ov-moment__knop { background: none; border: 0; padding: 4px 0; color: var(--m27-paars); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ov-moment__knop:hover { color: var(--m27-tekst); }
.ov-moment[hidden] { display: none; }

.ov-moment-form, #ov-koppel-form { margin: 8px 0 12px; padding: 14px 16px 6px; background: #faf8f4; border-radius: var(--m27-radius-kaart); }
#ov-koppel-form[hidden] { display: none; }
.ov-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.ov-form .veld { margin-bottom: 10px; }
.ov-form .ov-veld--breed { grid-column: 1 / -1; }
.ov-form__knoppen { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 8px; }
/* De knop draagt m27-btn m27-btn--small m27-btn--outline-red (zie
   overzicht.js) en haalt zijn rood dus uit --m27-rood, net als elke andere
   Verwijderen in het portaal. Hier staat alleen nog waar hij hangt: rechts in
   de actierij, los van Bewaren en Annuleren. */
.ov-weg { margin-left: auto; }
.ov-nieuw { margin-top: 12px; }
.ov-hint { margin: 14px 0 0; font-size: 13px; }

/* Op telefoon is elk tikdoel met tekst 48px hoog (docs/portaal-standaard.md;
   de uitzondering van 44px geldt alleen voor een icoonknop in een dichte
   lijstrij, en dit zijn alle vijf tekstknoppen). Het gaat om de knoppen van
   de momentenkaart: Wijzigen per moment, + Moment, en Bewaren, Annuleren en
   Verwijderen in het formulier. Op een desktop houden ze hun eigen maat,
   want daar wijst een muis. */
@media (max-width: 768px) {
  .ov-moment__knop,
  .ov-dag .m27-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .ov-moment { grid-template-columns: minmax(0, 1fr) auto; }
  .ov-moment__wat { grid-column: 1 / -1; }
  /* Wijzigen hoort naast de datum, in de kolom die daarvoor klaarstaat.
     Zonder deze twee regels valt hij op een DERDE regel over de volle
     breedte en blijft de kolom auto leeg: .ov-moment__wat hierboven spant
     over allebei de kolommen, dus schuift de automatische plaatsing de knop
     voorbij rij twee. */
  .ov-moment__knop { grid-column: 2; grid-row: 1; }
  .ov-form { grid-template-columns: minmax(0, 1fr); }
  .ov-dag__kop { flex-direction: column; }
}