/* Eén bestand, geen framework. Mobiel eerst; vanaf 900px wordt de balk een zijbalk. */

:root {
  --achter: #12141a;
  --vlak: #1b1e27;
  --rand: #2b2f3b;
  --tekst: #e8eaf0;
  --zacht: #9aa1b2;
  --accent: #6aa5ff;
  --rood: #ff6b6b;
  --straal: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--achter);
  color: var(--tekst);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1rem; margin: 1.6rem 0 .5rem; color: var(--zacht); font-weight: 600; }
.onderkop { font-size: .9rem; font-weight: 400; color: var(--zacht); margin-left: .5rem; }

.inhoud { padding: 1rem 16px 6rem; max-width: 720px; }
.smal .inhoud { padding-top: 4rem; max-width: 420px; margin: 0 auto; }

.hint, .leeg { color: var(--zacht); margin: .3rem 0 .8rem; }
.fout { color: var(--rood); }

/* Knoppen. Minstens 44px hoog op een telefoon; 16px tekst zodat iOS niet inzoomt. */
.knop {
  display: inline-block; min-height: 44px; padding: 0 14px;
  background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: var(--straal);
  font: inherit; cursor: pointer; line-height: 42px; text-align: center;
}
.knop:hover { border-color: var(--accent); text-decoration: none; }
.knop.primair { background: var(--accent); border-color: var(--accent); color: #0b1020; font-weight: 600; }
.knop.klein { min-height: 34px; line-height: 32px; padding: 0 10px; font-size: .85rem; }
.knop.gevaar:hover { border-color: var(--rood); color: var(--rood); }

/* Invoerbalk */
.toevoegen { display: flex; gap: 8px; margin-bottom: 1rem; }
.toevoegen input[type=text] { flex: 1; min-width: 0; }
input[type=text] {
  min-height: 44px; padding: 0 12px; font: inherit;
  background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: var(--straal);
}
input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: 0; }

/* Taken */
.taken { list-style: none; margin: 0; padding: 0; }
.taak {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--rand);
}
.vink, .taak form { margin: 0; }
.rondje {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--zacht); background: none; cursor: pointer; padding: 0;
}
.rondje:hover { border-color: var(--accent); }
.gedaan .rondje { background: var(--accent); border-color: var(--accent); }
.gedaan .titel { text-decoration: line-through; color: var(--zacht); }
.wat { flex: 1; min-width: 0; }
.titel { display: block; overflow-wrap: anywhere; }
.onder { display: block; font-size: .8rem; color: var(--zacht); }
.onder:empty { display: none; }
.onder span + span::before { content: " · "; }
.onder .deadline { color: var(--zacht); }
.onder .deadline.rood { color: var(--rood); font-weight: 600; }

.kaart { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--straal); padding: 12px 16px; margin: 1rem 0; }
.kaart.nieuw { border-color: var(--accent); }
.kaart input[type=text] { width: 100%; font-family: ui-monospace, Consolas, monospace; }
.bijlage { border-bottom: 1px solid var(--rand); padding: 6px 0; }
.bijlagekop { display: flex; gap: 12px; align-items: center; }
.bijlagekop a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bijlagekop form { margin: 0; }
.bijlage details { margin: 6px 0; }
.bijlage summary { cursor: pointer; color: var(--zacht); font-size: .85rem; }
pre.notities { max-height: 420px; overflow: auto; font: .85rem/1.45 ui-monospace, Consolas, monospace; }
input[type=file] { flex: 1; min-width: 0; color: var(--zacht); font: inherit; }
.titel { color: var(--tekst); }
a.titel:hover { color: var(--accent); }
.notities { white-space: pre-wrap; overflow-wrap: anywhere; }

.formulier { display: grid; gap: 14px; margin-top: 1rem; }
.formulier label { display: grid; gap: 4px; font-size: .85rem; color: var(--zacht); }
.formulier .drie { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.formulier .hint { margin: 0; font-size: .75rem; }
input[type=date], input[type=number], textarea {
  min-height: 44px; padding: 8px 12px; font: inherit; width: 100%;
  background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: var(--straal);
}
input[type=date], input[type=number] { padding: 0 12px; }
textarea { resize: vertical; }
.formulier input[type=text] { width: 100%; }
.knoppenrij { display: flex; gap: 10px; flex-wrap: wrap; }
.knoppenrij form { margin: 0; }
code { background: var(--vlak); padding: 1px 5px; border-radius: 4px; }

/* flex: none, anders krimpen de knoppen tot de breedte van één knop. */
.knoppen { display: flex; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 599px) {
  .taak { flex-wrap: wrap; }
  .knoppen { flex: 1 1 100%; justify-content: flex-start; padding-left: 36px; }
}

.onderaan { margin-top: 2.5rem; display: flex; gap: 10px; align-items: center; }

/* Navigatie: onderaan op een telefoon, zijbalk vanaf 900px */
.balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; gap: 4px; align-items: center; overflow-x: auto;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--vlak); border-top: 1px solid var(--rand);
}
.balk a { padding: 10px 12px; color: var(--tekst); border-radius: var(--straal); white-space: nowrap; }
.balk a.aan { background: var(--achter); color: var(--accent); }
.balk .merk, .balk .koptje, .balk .nieuwproject, .balk .uit { display: none; }
.balk .groep { display: contents; }
.bolletje {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  background: var(--accent); color: #0b1020; border-radius: 10px;
  font-size: .75rem; font-weight: 700; text-align: center;
}

@media (min-width: 900px) {
  body { display: grid; grid-template-columns: 240px 1fr; }
  .balk {
    position: sticky; top: 0; height: 100vh; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 20px 12px; overflow-y: auto;
    border-top: 0; border-right: 1px solid var(--rand);
  }
  .balk .merk { display: block; font-weight: 700; font-size: 1.1rem; padding: 0 12px 14px; }
  .balk .groep { display: block; margin-top: 18px; }
  .balk .koptje { display: block; margin: 0 0 4px; padding: 0 12px; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); }
  .balk .groep a { display: block; }
  .balk .nieuwproject { display: block; margin: 6px 0 0; }
  .balk .nieuwproject input { width: 100%; min-height: 36px; font-size: .9rem; }
  .balk .uit { display: block; margin-top: auto; }
  .inhoud { padding: 32px 40px 80px; }
}