/* Donna - mobile-first, licht en donker via het systeem. */

:root {
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #1c1917;
  --muted: #78716c;
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --line: #e7e5e4;
  --danger: #b91c1c;
  --warn: #b45309;
  /* Achtergrond van je eigen tekstballon: herkenbaar de accentkleur, maar licht
     genoeg om er gewone tekst op te lezen. */
  --accent-soft: #d7efec;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131211;
    --card: #1e1c1a;
    --ink: #e7e5e4;
    --muted: #a8a29e;
    --accent: #14b8a6;
    --accent-ink: #06201d;
    --line: #2e2b28;
    --danger: #f87171;
    --warn: #fbbf24;
    --accent-soft: #17332f;
  }
}

* { box-sizing: border-box; }

/* Moet vóór alles gaan: een eigen 'display'-regel wint van het hidden-attribuut
   van de browser, en dan blijft een verborgen element gewoon in beeld staan. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* 1.4 in plaats van 1.5: dit zijn korte regels, geen lopende tekst. De
     lettergrootte blijft 16px - kleiner maken zou het wel compacter maar
     ook echt slechter leesbaar maken. */
  font: 16px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(0.5rem + env(safe-area-inset-top)) 0.9rem 0.35rem;
}

header h1 { margin: 0; font-size: 1.25rem; letter-spacing: 0.02em; }

.header-actions { display: flex; gap: 0.4rem; }

#refresh, #bell {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1.1rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
#bell.on { background: var(--accent); border-color: var(--accent); }
#refresh:active { opacity: 0.6; }

nav#tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.6rem 0.35rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
}

nav#tabs a {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0.25rem;
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
nav#tabs a.active { color: var(--accent); border-bottom: 2px solid var(--accent); }

main {
  /* Volle breedte: op een opengevouwen telefoon liet 40rem het halve scherm
     ongebruikt. Titels zijn kort, dus lange regels leveren hier geen
     leesprobleem op zoals bij lopende tekst. */
  padding: 0.75rem 0.9rem;
  max-width: none;
}

h2 { font-size: 0.95rem; color: var(--muted); margin: 0.9rem 0 0.35rem; }
h2:first-child { margin-top: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.3rem;
}

.task { display: flex; align-items: flex-start; gap: 0.5rem; }
.task .title { flex: 1; }
.task .meta { color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
.task .meta .overdue { color: var(--danger); font-weight: 600; }
.task.prio-high .title .line::before { content: "! "; color: var(--warn); font-weight: 700; }

.task .actions { display: flex; gap: 0.35rem; }

button.small {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 0.5rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.95rem;
  cursor: pointer;
}
button.small.done { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* Agenda en taken moeten zonder lezen uit elkaar te houden zijn: het ene is een
   tijdlijn waar je niets aan kunt veranderen, het andere een lijst waar je
   dingen van afvinkt.

   De agenda krijgt daarom een tijdbalk in accentkleur en een streep links; de
   taken houden hun ronde kaart met knoppen. */
.event {
  display: flex;
  gap: 0.7rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 0.6rem 0.6rem 0;
  padding-left: 0.5rem;
}

.event .when {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 6.5ch;
}

/* Taken juist géén streep links, wel duidelijk een kaart om aan te tikken. */
.task { border-left: 1px solid var(--line); }

.quiet { color: var(--muted); font-style: italic; }

pre.briefing {
  white-space: pre-wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.75rem;
  font: inherit;
}

form.stack { display: grid; gap: 0.6rem; }
form.stack label { font-size: 0.85rem; color: var(--muted); display: grid; gap: 0.25rem; }

input, select, textarea {
  width: 100%;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 0.5rem;
  padding: 0.65rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.overlay form {
  width: 100%;
  max-width: 20rem;
  display: grid;
  gap: 0.75rem;
  text-align: center;
}

.error { color: var(--danger); min-height: 1.2em; margin: 0; }

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  max-width: 90%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Praatveld: het hoofdgebruik, dus bovenaan en groot genoeg voor een duim. */
.talk { margin-bottom: 1rem; }
.talk-row { display: flex; gap: 0.5rem; }
.talk-row input { flex: 1; }
.talk-row button { padding: 0.55rem 0.9rem; }
.answer:empty { display: none; }
.answer { white-space: pre-wrap; margin: 0.5rem 0 0; }

/* Het verzetten-blad. Komt van onderen op, zoals een telefoon dat hoort te doen. */
.sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  z-index: 10;
}

.sheet-body {
  background: var(--card);
  border-radius: 1rem 1rem 0 0;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 100%;
  display: grid;
  gap: 0.75rem;
}

.sheet-body h3 { margin: 0; font-size: 1rem; }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sheet-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.sheet-actions .primary { padding: 0.55rem 1.2rem; }

/* Tikken op een taak opent het bewerkblad. */
.task .title.editable { cursor: pointer; }
.task .title.editable:active { opacity: 0.6; }

/* Het bewerkblad heeft meer velden dan er passen op een klein scherm. */
.sheet-body.scroll { max-height: 85vh; overflow-y: auto; }
.sheet-body textarea { resize: vertical; }

/* Meegelezen agenda's: wel leesbaar, duidelijk niet van jou. */
/* Vast: wel jouw tijd, dus dezelfde streep, maar rustiger dan een afspraak die
   vandaag bijzonder is. */
.card.event.routine { border-left-color: var(--muted); }
.card.event.routine .when { color: var(--muted); }

/* Meegelezen agenda's: dezelfde vorm als je eigen afspraken, maar gedempt en
   gestippeld - het is wel een tijdlijn, alleen niet de jouwe. */
.card.event.info {
  opacity: 0.72;
  border-left-style: dashed;
  border-left-color: var(--muted);
}
.card.event.info .when { color: var(--muted); font-weight: 400; }

/* ------------------------------------------------------------------ praten */

.chat { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: 0.5rem; }

.daymark {
  align-self: center;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: lowercase;
  margin: 0.6rem 0 0.2rem;
}

.bubble {
  max-width: 85%;
  border-radius: 0.7rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
}

/* Jij rechts, Donna links - de gewone afspraak, zodat je zonder lezen ziet wie
   wat zei. */
.bubble.elwin { align-self: flex-end; background: var(--accent-soft); }
.bubble.donna { align-self: flex-start; background: var(--card); }
.bubble.mislukt { border-color: var(--warn); }
.bubble.wachten { opacity: 0.6; }

/* De briefing en de terugblik zijn opgemaakte tekst met eigen regelafbrekingen;
   die moeten blijven staan. */
.bubble .said { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .when { color: var(--muted); font-size: 0.7rem; margin-top: 0.15rem; }

button.small.wide { width: 100%; margin-bottom: 0.4rem; }

/* Het invoerveld blijft onderin plakken, zodat je niet eerst het hele gesprek
   door hoeft te scrollen om iets te kunnen zeggen. */
.talk.chat-input {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
}

/* Waar je bent: opvallend genoeg om te zien, rustig genoeg om geen afspraak te
   lijken. */
.context {
  margin: 0.2rem 0 0.6rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--accent);
  background: var(--card);
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.9rem;
}

/* Taken gegroepeerd per categorie: een duidelijke scheidingslijn tussen de
   blokken, zodat de levensgebieden niet in elkaar overlopen zoals bij een
   gewone lijst met alleen een kleiner lettertje als scheiding. */
.category-group + .category-group {
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

/* Op "Vandaag" valt een categorie-groep al onder "Blijven liggen"/"Gepland" -
   dus h3, kleiner dan de gewone h2, maar met dezelfde scheidingslijn erboven. */
.category-group h3 {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.7rem 0 0.3rem;
  font-weight: 600;
}
.category-group:first-child h3 { margin-top: 0; }

/* Nieuwe taak, onderaan de lijst en ingeklapt. */
.nieuw { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.nieuw > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  padding: 0.3rem 0;
  list-style: none;
}
.nieuw > summary::before { content: "+ "; }
.nieuw[open] > summary::before { content: "\2212 "; }
.nieuw > summary::-webkit-details-marker { display: none; }
.nieuw > form { margin-top: 0.5rem; }

/* Sprint: per dag een kopje, zoals de categorie-groepen op "Vandaag". */
.sprint-dag h3 {
  font-size: 0.85rem;
  margin: 0.8rem 0 0.3rem;
  font-weight: 600;
}
.sprint-dag h3 .vrij { color: var(--muted); font-weight: 400; }
.sprint-dag h3 .te-veel { color: var(--warn); }
.sprint-dag.voorbij h3 { color: var(--danger); }
.sprint-dag > .quiet { margin: 0 0 0.3rem; font-size: 0.85rem; }

/* Backlog: categorie en zoeken naast elkaar; het zoekveld krijgt de ruimte. */
.zoekregel { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.zoekregel select { width: auto; flex: 0 1 45%; min-width: 0; }
.zoekregel .zoek { flex: 1 1 auto; min-width: 0; }

/* Gewoontes: een regel per gewoonte met de telling rechts, en per dag knopjes. */
.gewoonte { display: flex; align-items: center; gap: 0.5rem; }
.gewoonte .naam { flex: 1; }
.gewoonte .telling { color: var(--muted); font-variant-numeric: tabular-nums; }
.gewoonte-chips { margin: 0.1rem 0 0.4rem; gap: 0.35rem; }
.gewoonte-chips .chip { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
.gewoonte-chips .chip.aan {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Zoekveld in de backlog op de sprinttab, onder de uitklapkop. */
.sprint-zoek { margin: 0.4rem 0 0.5rem; }

/* Sprint: dagdeel-kopjes, de agenda per dag, en aan/uit-knopjes overal. */
.dagdeel { font-size: 0.75rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin: 0.35rem 0 0.15rem; }
.dag-agenda { margin: 0 0 0.35rem; font-size: 0.85rem; }
.dag-agenda > summary { cursor: pointer; color: var(--muted); padding: 0.15rem 0; }
.agenda-regel { display: flex; gap: 0.6rem; padding: 0.1rem 0 0.1rem 0.4rem;
  border-left: 2px solid var(--accent); margin: 0.1rem 0; }
.agenda-regel .when { color: var(--accent); font-variant-numeric: tabular-nums; min-width: 3.6rem; }
.agenda-regel.vast { border-left-color: var(--line); color: var(--muted); }
.agenda-regel.vast .when { color: var(--muted); }
.chip.aan { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }