/* Formulieren en knoppen, het slotscherm (slot.html) en het beheer (beheer.html, js/beheer/). De tabbalk van het beheer
   staat onderaan; het slotscherm heeft er geen. */

body[data-pagina="slot"] #slot, body[data-pagina="beheer"] #beheer { padding-bottom: 2rem; }

/* Het slotscherm: in het midden van het scherm */
.toegang-pagina {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
}
.toegang-pagina .kop-titel { font-size: clamp(1.9rem, 8vw, 3.2rem); }

/* De geheime knop: het ruitje in het ornament leidt naar /beheer */
.ornament > span { position: relative; }
.geheim { position: absolute; inset: -1rem; }
.geheim:focus-visible { outline-offset: -.6rem; }

/* Formulier */
.toegang {
  display: grid;
  gap: .75rem;
  width: min(100%, 22rem);
  margin: 1.4rem auto 0;
  text-align: center;
}
.veld {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit;
  font-size: 1.2rem;
  letter-spacing: .06em;
  text-align: center;
  color: var(--creme);
  background: rgb(7 9 11 / .65);
  border: 1px solid var(--lijn);
  border-radius: 2px;
  transition: border-color .2s, box-shadow .2s;
}
.veld:focus { outline: none; border-color: var(--goud-licht); box-shadow: 0 0 0 3px rgb(216 180 95 / .18); }

.knop {
  justify-self: center;
  padding: .85rem 1.6rem;
  font-family: var(--label);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--nacht);
  background: var(--metaal);
  border: 1px solid var(--goud-licht);
  box-shadow: 0 0 0 3px var(--nacht), 0 0 0 4px var(--lijn);
  transition: filter .2s, opacity .2s;
}
.knop:hover:not(:disabled) { filter: brightness(1.1); }
.knop:disabled { opacity: .45; cursor: default; }
.knop--stil {
  font-weight: 400;
  color: var(--goud-licht);
  background: none;
  border-color: var(--lijn);
  box-shadow: none;
}
.knop--stil:hover:not(:disabled) { background: var(--goud); color: var(--nacht); filter: none; }

.melding { min-height: 1.5em; margin: 0; font-style: italic; color: #e7a1a9; }
.melding:empty { min-height: 0; }
.melding.goed { color: var(--jade); }
.uitleg { margin: 0; font-size: 1rem; font-style: italic; color: var(--creme-zacht); }

/* Het beheer */
.beheer p { margin: 0; }
.aangemeld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 1rem;
  color: var(--creme-zacht);
}
.aangemeld strong { color: var(--goud-licht); font-weight: 600; }
.aangemeld .knop { padding: .55rem 1rem; font-size: .66rem; }
.beheer-onderdeel .toegang { margin-top: 1.2rem; }
.slot-stand { display: grid; gap: .9rem; text-align: center; }
.slot-stand strong { color: var(--goud-licht); font-weight: 600; }
.slot-stand[data-slot="dicht"] { border-color: rgb(176 50 68 / .5); }

/* Na het aanmelden: pagina's met een tabbalk onderaan (js/beheer.js). "Uitnodiging" is langer dan de woorden van de
   app, dus iets kleinere letters dan daar. */
body.beheer-binnen .beheer { padding-bottom: calc(var(--tabbalk-h) + var(--onder) + 1.5rem); }
html:has(body.beheer-binnen) { scroll-padding-bottom: calc(var(--tabbalk-h) + var(--onder) + 1rem); } /* een veld met focus niet achter de balk */
.beheer-pagina { outline: none; }
.beheer-tabs .tab { font-size: .58rem; letter-spacing: .12em; }
@media (max-width: 22.5rem) { .beheer-tabs .tab { font-size: .54rem; letter-spacing: .06em; } }

/* De startpagina: per pagina een tegel met de stand */
.beheer-tegels { display: grid; gap: .7rem; }
.beheer-tegel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  color: var(--creme);
  text-decoration: none;
  transition: border-color .2s;
}
.beheer-tegel:hover, .beheer-tegel:focus-visible { border-color: var(--lijn); }
.beheer-tegel svg { width: 1.9rem; height: 1.9rem; margin-top: .2rem; color: var(--goud); }
.beheer-tegel-tekst { display: grid; gap: .1rem; min-width: 0; }
.beheer-tegel .label { font-size: .62rem; }
.beheer-tegel-titel { font-family: var(--deco); font-weight: 400; font-size: 1.35rem; letter-spacing: .05em; color: var(--goud-licht); }
.beheer-tegel-titel::after { content: " ›"; color: var(--goud); }
.beheer-tegel-wat { font-size: .95rem; font-style: italic; color: var(--creme-vaag); }
.beheer-tegel-stand { display: grid; margin-top: .3rem; font-size: 1.02rem; color: var(--creme-zacht); overflow-wrap: anywhere; }
.beheer-tegel-stand:empty { display: none; }

.terug { margin-top: 2.6rem !important; text-align: center; font-family: var(--label); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
.terug a { text-decoration: none; }