/* portaal.css · bovenop basis.css, die uit de generator komt.
   Alle kleuren en fonts komen uit tokens die portaal.js per zaak zet, dus hier
   staat geen enkele kleur van een specifieke zaak. */

:root {
  --pad: clamp(1rem, 4vw, 2rem);
  --measure: 62ch;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  --radius: 8px;
  --nav-h: 4.5rem;
}

/* Moet vóór alle display-regels staan: .inlog en .proof zetten zelf een display,
   en die zou anders van het hidden-attribuut winnen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
h1, h2, h3 { font-family: var(--font-display); }

/* ── Kop van de app ─────────────────────────────────────────────────────── */

.balk {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem var(--pad); background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.balk .zaak { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
.balk .zaak small {
  display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: .15rem;
}
.balk .rechts { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.icoonknop {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); font-size: 1rem; line-height: 1;
}
.icoonknop:hover { border-color: var(--accent); }

/* ── Schermen ───────────────────────────────────────────────────────────── */

/* basis.css geeft elke section een rand en ruime padding; een scherm is geen
   sectie van een pagina, dus die zetten we hier uit. */
/* :not(.hero) erbij omdat basis.css `section:not(.hero)` gebruikt en dat anders
   van een enkele klasse wint. */
.scherm:not(.hero) { display: none; border-bottom: 0;
  padding: clamp(1.1rem, 3.5vw, 2rem) var(--pad) 2rem; }
.scherm[data-open="ja"] { display: block; }
.scherm > h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); margin: 0 0 .35rem; letter-spacing: -.01em;
}
.scherm > .onder {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-soft); margin: 0 0 1.5rem;
}
.blok { max-width: 40rem; }
.blok + .blok { margin-top: 2.25rem; }
.blok > h3 {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .85rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule);
}

/* ── Samenvattingsregel ─────────────────────────────────────────────────── */

.telrij {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-items: baseline;
  background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: .85rem 1rem; margin: 0 0 1.25rem;
  font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft);
}
.telrij b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Afspraakkaarten ────────────────────────────────────────────────────── */

.kaarten { display: grid; gap: .75rem; }
.kaart {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 0 1rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .9rem 1rem;
}
.kaart .uur {
  font-family: var(--font-mono); font-size: 1.15rem; font-variant-numeric: tabular-nums;
  color: var(--accent); line-height: 1.2;
}
.kaart .uur small {
  display: block; font-size: .62rem; letter-spacing: .06em; color: var(--ink-soft);
  margin-top: .2rem; text-transform: uppercase;
}
.kaart .wie { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; }
.kaart .wat { font-size: .92rem; color: var(--ink-soft); margin: .15rem 0 0; }
.kaart .wat .prijs { color: var(--accent); font-family: var(--font-mono); font-size: .78rem; }
.kaart .knoprij { grid-column: 2; }
.kaart[data-status="geannuleerd"], .kaart[data-status="no_show"] { opacity: .55; }
.kaart[data-status="geannuleerd"] .wie { text-decoration: line-through; }
.kaart[data-status="afgerond"] .uur { color: var(--ink-soft); }

.merken { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; }
.merk {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem;
  border: 1px solid var(--rule); border-radius: 99px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.merk[data-soort="lori"] { color: var(--accent); border-color: var(--accent); }
.merk[data-soort="no_show"] { color: var(--ink); border-color: var(--ink); }
.merk a { text-decoration: none; }

.knoprij { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.mini {
  padding: .5rem .8rem; background: transparent; border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink); cursor: pointer;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
}
.mini:hover { border-color: var(--accent); color: var(--accent); }
.mini[data-soort="weg"]:hover { border-color: var(--ink); color: var(--ink); }
.mini[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }

.leeg {
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 1.75rem 1.25rem; text-align: center; color: var(--ink-soft);
}
.leeg p { margin: 0; }
.leeg p + p { margin-top: .6rem; }

/* ── Formulieren ────────────────────────────────────────────────────────── */

.velden select, .velden textarea, .velden input[type="date"], .velden input[type="time"] {
  width: 100%; padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink); font-family: var(--font-body); font-size: 1rem;
}
.velden textarea { min-height: 4.5rem; resize: vertical; }
.velden .hint { font-family: var(--font-mono); font-size: .64rem; color: var(--ink-soft); margin: .3rem 0 0; }
.velden .paar { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.schakelrij {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
}
.schakelrij:last-child { border-bottom: 0; }
.schakelrij .tekst { font-size: .95rem; }
.schakelrij .tekst small { display: block; color: var(--ink-soft); font-size: .78rem; margin-top: .15rem; }
.schakel {
  flex: none; width: 3.1rem; height: 1.75rem; border-radius: 99px; border: 1px solid var(--rule);
  background: var(--surface); position: relative; cursor: pointer; padding: 0;
}
.schakel::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.75rem - 6px); height: calc(1.75rem - 6px);
  border-radius: 50%; background: var(--ink-soft); transition: transform .16s ease, background .16s ease;
}
.schakel[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: var(--accent); }
.schakel[aria-pressed="true"]::after { transform: translateX(1.35rem); background: var(--accent); }

/* ── Uren per weekdag ───────────────────────────────────────────────────── */

.dagrij { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.dagrij:last-child { border-bottom: 0; }
.dagrij .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dagrij .naam { font-family: var(--font-display); font-size: 1.05rem; }
.dagrij .vakken { display: grid; gap: .5rem; margin-top: .7rem; }
.dagrij .vak { display: flex; align-items: center; gap: .5rem; }
.dagrij .vak input { flex: 1; min-width: 0; }
.dagrij .vak .streep { color: var(--ink-soft); }
.dagrij .dicht { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); margin-top: .5rem; }

/* ── Menu (het scherm "Meer") ───────────────────────────────────────────── */

.menu { display: grid; gap: .6rem; max-width: 34rem; }
.menu button {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink); cursor: pointer;
  font-family: var(--font-body); font-size: 1rem;
}
.menu button:hover { border-color: var(--accent); }
.menu button .pijl { margin-left: auto; color: var(--ink-soft); }
.menu button small { display: block; color: var(--ink-soft); font-size: .8rem; margin-top: .15rem; }

/* ── Onderbalk ──────────────────────────────────────────────────────────── */

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ground); border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav button {
  display: grid; gap: .2rem; place-items: center; padding: .7rem .25rem .8rem;
  background: none; border: 0; cursor: pointer; color: var(--ink-soft);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
}
.nav button .ic { font-size: 1.2rem; line-height: 1; }
.nav button[aria-current="true"] { color: var(--accent); }
.nav button.plus .ic { color: var(--accent); }

/* ── Melding, dialoog en laadtoestand ───────────────────────────────────── */

.melding {
  border-left: 3px solid var(--accent); background: var(--surface);
  padding: .7rem .9rem; border-radius: var(--radius); margin: 0 0 1rem;
  font-size: .92rem; color: var(--ink);
}
.melding[data-soort="fout"] { border-left-color: var(--ink); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 1rem); transform: translateX(-50%);
  z-index: 40; max-width: min(92vw, 26rem);
  background: var(--ink); color: var(--ground); padding: .8rem 1.1rem; border-radius: var(--radius);
  font-size: .9rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.toast[data-open="ja"] { opacity: 1; transform: translateX(-50%) translateY(-.25rem); }

.dialoog {
  position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--ink) 45%, transparent); padding: 1rem;
}
.dialoog[data-open="ja"] { display: flex; }
.dialoog .doos {
  background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.4rem 1.25rem 1.25rem; width: min(100%, 28rem);
}
.dialoog h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.dialoog p { margin: 0 0 1.25rem; color: var(--ink-soft); }
.dialoog .knoprij { margin: 0; }
@media (min-width: 40rem) { .dialoog { align-items: center; } }

.laden { display: flex; flex-wrap: wrap; gap: .5rem; }
.laden span {
  display: block; height: 2.4rem; width: 4.5rem; border: 1px solid var(--rule);
  border-radius: var(--radius); opacity: .4;
  animation: pulseer 1.1s ease-in-out infinite;
}
.laden span:nth-child(2) { animation-delay: .1s }
.laden span:nth-child(3) { animation-delay: .2s }
.laden span:nth-child(4) { animation-delay: .3s }
.laden span:nth-child(5) { animation-delay: .4s }
.laden span:nth-child(6) { animation-delay: .5s }
@keyframes pulseer { 0%, 100% { opacity: .4 } 50% { opacity: .15 } }

/* ── Inloggen ───────────────────────────────────────────────────────────── */

.inlog { min-height: 78vh; display: grid; place-items: center; padding: 2rem var(--pad); }
.inlog .doos { width: min(100%, 24rem); }
.inlog h1 { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem); margin: 0 0 .5rem; letter-spacing: -.02em; }
.inlog p { color: var(--ink-soft); margin: 0 0 1.5rem; }
.inlog .btn { width: 100%; justify-content: center; margin-top: .5rem; }
.inlog .kleine {
  font-family: var(--font-mono); font-size: .66rem; color: var(--ink-soft);
  margin-top: 1.25rem; line-height: 1.6;
}

/* ── Groter scherm: geen onderbalk maar een zijkolom ────────────────────── */

@media (min-width: 52rem) {
  body { padding-bottom: 0; }
  .romp { display: grid; grid-template-columns: 14rem 1fr; align-items: start; }
  .nav {
    position: sticky; top: 4.6rem; bottom: auto; grid-template-columns: 1fr;
    border-top: 0; border-right: 1px solid var(--rule); padding: 1rem .75rem;
    gap: .25rem; align-self: start;
  }
  .nav button { grid-template-columns: 1.5rem auto; justify-items: start; place-items: center start;
    gap: .75rem; padding: .7rem .8rem; border-radius: var(--radius); font-size: .68rem; }
  .nav button[aria-current="true"] { background: var(--surface); }
  .toast { bottom: 1.5rem; }
}

@media (pointer: coarse) {
  .mini, .icoonknop, .schakel { min-height: 44px; }
  .nav button { min-height: 56px; }
}

/* ── Voorbeeld van de mails ─────────────────────────────────────────────── */

.mailkeuze { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.mailkop {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .75rem .9rem; margin: 0 0 .75rem;
  font-family: var(--font-mono); font-size: .68rem; line-height: 1.7; color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.mailkop b { color: var(--ink); font-weight: 600; }
.mailkader {
  width: 100%; height: 30rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: #f4f2ee; display: block;
}
.mailnoot {
  font-family: var(--font-mono); font-size: .66rem; color: var(--ink-soft);
  margin: .85rem 0 0; line-height: 1.7; max-width: 44ch;
}