/* Tjali's Satebar: beheerpagina. Groot, duidelijk en goed te bedienen met één duim. */
body { font-size: 1.0625rem; }
.smal { max-width: 40rem; margin: 0 auto; padding: 1.25rem 1rem 6rem; }
.breed { width: 100%; }
.blok { background: var(--vlak); border: 2px solid var(--lijn); border-radius: 20px; padding: 1.25rem; }
.optioneel { font-weight: 400; color: var(--zacht); }
.linkknop {
  display: block; margin: 1rem auto 0; padding: 0.5rem; min-height: 44px;
  background: none; border: 0; color: var(--ink); font: 600 1rem var(--f-tekst);
  text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.linkknop--rood { color: var(--accent); }

.demo-balk {
  margin: 0; padding: 0.6rem 1rem; text-align: center;
  background: var(--kunyit); color: var(--kecap); font-weight: 700; font-size: 0.92rem;
  border-bottom: 2px solid var(--kecap);
}

/* Inloggen */
.inlog-kop { text-align: center; margin: 1.5rem 0 1.5rem; }
.inlog-kop img { margin: 0 auto 0.5rem; }
.inlog-kop h1 { font-size: 2.6rem; color: var(--accent); }
.inlog-kop p { color: var(--zacht); margin: 0.4rem 0 0; }

/* Kopbalk met tabs */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 10; background: var(--bg);
}
.b-kop { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--bg); border-bottom: 2px solid var(--lijn); }
.b-kop__binnen { max-width: 40rem; margin: 0 auto; padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.5rem; }
.b-kop__titel { display: flex; align-items: center; gap: 0.45rem; font-family: var(--f-kop); font-size: 1.5rem; color: var(--accent); margin-right: auto; }
.tabs { max-width: 40rem; margin: 0 auto; padding: 0 1rem; display: flex; gap: 0.5rem; }
.tabs button {
  flex: 1; min-height: 48px; background: none; border: 0; border-bottom: 4px solid transparent;
  font: 800 1.05rem var(--f-tekst); color: var(--zacht); cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sambal); }

/* Lijsten */
.groep-kop { font-family: var(--f-kop); font-size: 1.5rem; text-transform: lowercase; margin: 2rem 0 0.75rem; }
.groep-kop--vandaag { color: var(--accent); }
.kaartjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.kaart { background: var(--vlak); border: 2px solid var(--lijn); border-radius: 16px; padding: 1rem; }
.kaart__titel { font-weight: 800; font-size: 1.15rem; display: block; overflow-wrap: anywhere; }
.kaart__sub { display: block; color: var(--zacht); font-size: 0.95rem; overflow-wrap: anywhere; }
.kaart__tijd { font-variant-numeric: tabular-nums; font-weight: 700; }
.kaart__acties { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.leeg { text-align: center; color: var(--zacht); padding: 2.5rem 1rem; }

/* Gerecht-kaartjes */
.gerecht-kaart { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 0.75rem; align-items: start; }
.gerecht-kaart--weg { opacity: 0.6; }
.prijs { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kaart .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.gerecht-kaart .kaart__acties { grid-column: 1 / -1; align-items: center; margin-top: 0.25rem; }
.schakel { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; font-weight: 700; cursor: pointer; margin-right: auto; }
.schakel input { appearance: none; -webkit-appearance: none; width: 3.1rem; height: 1.8rem; border-radius: 999px; background: var(--chip); border: 2px solid var(--lijn); position: relative; cursor: pointer; flex: none; margin: 0; }
.schakel input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--vlak); border: 2px solid var(--lijn); transition: transform 0.15s; }
.schakel input:checked { background: var(--sambal); }
.schakel input:checked::after { transform: translateX(1.25rem); }
.pijl { width: 44px; min-height: 44px; padding: 0; font-size: 1.15rem; }

/* Dialogen */
dialog {
  width: min(36rem, calc(100% - 1.5rem)); max-height: calc(100% - 1.5rem); padding: 0;
  border: 3px solid var(--lijn); border-radius: 22px; background: var(--bg); color: var(--ink);
  box-shadow: 6px 6px 0 var(--schaduw);
}
dialog::backdrop { background: rgba(51, 32, 31, 0.55); }
dialog form { padding: 1.25rem; }
dialog h2 { font-size: 1.9rem; text-transform: lowercase; margin-bottom: 1rem; color: var(--accent); }
.d-knoppen { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem; flex-wrap: wrap; }
.d-knoppen .knop { flex: 1 1 8rem; }
.vinkjes { border: 0; padding: 0; margin: 0 0 1rem; }
.vinkjes #g-labels { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

/* Melding onderin */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem); transform: translateX(-50%);
  z-index: 20; max-width: calc(100% - 2rem);
  background: var(--kecap); color: var(--santen); font-weight: 700;
  padding: 0.8rem 1.2rem; border-radius: 999px; border: 2px solid var(--santen);
  box-shadow: 3px 3px 0 var(--schaduw);
}
.toast--fout { background: var(--sambal); color: #FFFFFF; }

/* Post maken */
.stap-kop { font-family: var(--f-kop); font-size: 1.5rem; text-transform: lowercase; margin: 1.75rem 0 0.75rem; }
#p-post > .stap-kop:first-child { margin-top: 0.5rem; }
.keuzes { display: grid; gap: 0.6rem; }
.keuzes--2 { grid-template-columns: 1fr 1fr; }
.formaat { margin-top: 0.6rem; }
.keuze {
  min-height: 52px; padding: 0.5rem; border-radius: 14px; cursor: pointer;
  font: 800 1rem var(--f-tekst); color: var(--ink); background: var(--vlak);
  border: 2px solid var(--lijn);
}
.keuze span { font-weight: 600; color: var(--zacht); }
.keuze[aria-pressed="true"] { background: var(--sambal); color: #FFFFFF; border-color: var(--kecap); box-shadow: 3px 3px 0 var(--schaduw); }
.keuze[aria-pressed="true"] span { color: #FFFFFF; opacity: 0.85; }
.foto-knoppen { position: relative; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.foto-knoppen label.knop { cursor: pointer; }
#post-foto:focus-visible + .knop { outline: 3px solid var(--accent); outline-offset: 3px; }
.voorbeeld { display: flex; justify-content: center; }
#post-canvas {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--lijn); border-radius: 14px; touch-action: none; background: var(--vlak);
}
#post-canvas.sleepbaar { cursor: grab; }
.zoom { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; font-weight: 700; }
.zoom input { flex: 1; accent-color: var(--sambal); min-height: 44px; }
#p-post .hulp { color: var(--zacht); font-size: 0.9rem; margin: 0.5rem 0 0; }
.post-acties { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
#post-fout { margin-top: 1rem; }
#post-foto { left: 0; top: 0; }
.keuze--breed { grid-column: 1 / -1; }

/* Poppetje kiezen */
.poppetjes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.pop-keuze {
  aspect-ratio: 2 / 3; padding: 0.25rem; cursor: pointer;
  background: var(--vlak); border: 2px solid var(--lijn); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font: 800 0.85rem var(--f-tekst); color: var(--ink);
}
.pop-keuze img { width: 100%; height: 100%; object-fit: contain; }
.pop-keuze[aria-pressed="true"] { border-color: var(--sambal); box-shadow: 0 0 0 3px var(--sambal); }
#pop-instellingen { margin-top: 0.5rem; }
.pop-keuze--breed { grid-column: span 2; aspect-ratio: auto; }

/* Categoriekopjes met knoppen */
.cat-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin: 2rem 0 0.75rem; }
.cat-kop .groep-kop { margin: 0; }
.cat-acties { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.leeg--klein { padding: 0.5rem 0 1rem; text-align: left; }