:root {
    --bg: #f7f3ff;
    --card-bg: #ffffff;
    --accent: #c26bff;
    --accent-soft: #f2ddff;
    --accent-dark: #8b3dd1;
    --text: #222222;
    --text-soft: #777777;
    --danger: #ff4d4f;
    --success: #4caf50;
    --shadow-soft: 0 3px 5px rgba(0,0,0,0.08);
    --radius-big: 22px;
    --radius-med: 16px;
  }
  
  /* Nachtmodus */
  body.night {
    --bg: #0b0b16;
    --card-bg: #171725;
    --accent: #9f7bff;
    --accent-soft: #26233b;
    --accent-dark: #d3b4ff;
    --text: #f5f5ff;
    --text-soft: #a9a9c9;
    background: radial-gradient(circle at top, #202040 0, #050510 55%);
  }

  /* Kid themes (accent kleuren)
     ⚠️ Belangrijk: in NIGHT mode willen we NIET dat een kid theme
     een super-lichte --accent-soft forceert (dat maakt tekst/sterren onleesbaar).
     Daarom: kid themes wijzigen overdag alles, maar in night alleen accent kleuren.
  */

  /* Day mode */
  body:not(.night).kid-pink {
    --accent: #ff4fa3;
    --accent-soft: #ffe2f1;
    --accent-dark: #c02676;
  }
  body:not(.night).kid-purple {
    --accent: #8c4bff;
    --accent-soft: #efe7ff;
    --accent-dark: #5a21c9;
  }
  body:not(.night).kid-mint {
    --accent: #20c997;
    --accent-soft: #dcfff4;
    --accent-dark: #0f8d67;
  }
  body:not(.night).kid-rainbow {
    --accent: #ff4fa3;
    --accent-soft: #e9f2ff;
    --accent-dark: #3b66ff;
  }

  /* Night mode: laat --accent-soft uit body.night staan (donker), maar geef wel kid accent */
  body.night.kid-pink {
    --accent: #ff4fa3;
    --accent-dark: #ff93c7;
  }
  body.night.kid-purple {
    --accent: #8c4bff;
    --accent-dark: #d3b4ff;
  }
  body.night.kid-mint {
    --accent: #20c997;
    --accent-dark: #7ff0d1;
  }
  body.night.kid-rainbow {
    --accent: #ff4fa3;
    --accent-dark: #7aa0ff;
  }
  
  *,
  *::before,
  *::after { box-sizing: border-box; }
  
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
  }
  
  /* ====== LAYOUT ====== */
  
  .app {
    max-width: 1200px;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  header {
    padding: 10px 14px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #titleArea {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer; /* voor long-press admin */
  }
  
  #titleArea h1 {
    margin: 0;
    font-size: 1.6rem;
  }
  
  .subtitle {
    font-size: 0.85rem;
    color: var(--text-soft);
  }
  
  /* Profiel & punten rechtsboven */
  
  .profile-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  #profilePic {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }
  
  #profilePic span {
    font-weight: 700;
    font-size: 1.1rem;
  }
  
  #profilePic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .points-pill {
    padding: 4px 10px;
    background: var(--accent-soft);
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
  }
  
  .points-pill strong { font-size: 1rem; }
  
  /* Tabs */
  
  .tabs {
    display: flex;
    gap: 6px;
    padding: 0 10px 8px;
  }
  
  .tabs button {
    flex: 1;
    border: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform .08s ease, filter .12s ease, background .12s ease;
  }
  
  .tabs button:active { transform: scale(0.98); }
  
  .tabs button.active {
    background: var(--accent);
    color: #fff;
  }
  
  /* Content */
  
  main {
    flex: 1;
    padding: 0 8px 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .page {
    flex: 1;
    display: none;
    overflow: hidden;
  }
  
  .page.visible { display: block; }
  
  /* ====== DAG + AGENDA ====== */
  
  .day {
    background: var(--card-bg);
    margin: 8px;
    padding: 10px 12px 12px;
    border-radius: var(--radius-big);
    box-shadow: var(--shadow-soft);
    height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .day h2 {
    margin: 0 0 6px;
    font-size: 1.5rem;
  }
  
  /* Top: pictogrammen links, klokken rechts */
  
  .day-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
    /* geen vaste hoogte: anders ontstaat er lege ruimte wanneer de rechterkolom hoger is */
    min-height: 0;
  }

  /* =====================
     Day layout (main + side)
     - in landscape: side (klok/wc) mag NIET de hoogte van main bepalen
  ===================== */
  .day-layout { position: relative; }
  .day-main { min-width: 0; }
  .day-side { margin-top: 0; }

  body.is-landscape .day-layout {
    position: relative;
  }
  body.is-landscape .day-side {
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 40vw;
  }
  body.is-landscape .day-main {
    padding-right: 390px; /* ruimte voor de side */
  }

  /* op kleinere landscapes (telefoon) side onder main */
  body.is-landscape.narrow .day-side,
  body.is-landscape.is-phone .day-side {
    position: static;
    width: auto;
    max-width: none;
  }
  body.is-landscape.narrow .day-main,
  body.is-landscape.is-phone .day-main {
    padding-right: 0;
  }
  
  /* Agenda-iconen (vandaag) */
  
  .agenda-icons {
    flex: 1 1 55%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .item {
    flex: 0 0 80px;
    text-align: center;
    cursor: pointer;
  }
  
  .item img {
    width: 70px;
    height: 70px;
  }
  
  /* Kleine klok bij pictogram */
  
  .mini-clock {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    margin: 4px auto 2px;
    position: relative;
    background: #ffffff;
  }
  
  body.night .mini-clock { background: #1b1b28; }
  
  .mini-center {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-dark);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .mini-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotate(0deg);
    border-radius: 999px;
  }
  
  .mini-hand.hour {
    width: 3px;
    height: 14px;
    background: var(--accent-dark);
  }
  
  .mini-hand.minute {
    width: 2px;
    height: 18px;
    background: var(--accent-dark);
  }
  
  .mini-time {
    font-size: 0.75rem;
    margin-top: 1px;
  }
  
  /* ====== KINDER-CANVAS-KLOKKEN ====== */
  
  /* Rechter kolom met beide klokken naast elkaar */
  .clocks-wrap {
    flex: 0 0 40%;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  
  /* Rij met grote (live) en kleine (leer) klok */
  .clock-row {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
  }
  
  /* canvassen; grootte bepaalt weergave */
  .kid-clock { width: 150px; height: 150px; }
  .kid-clock-small { width: 110px; height: 110px; }
  
  .clock-digital {
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 600;
  }
  
  .next-event {
    font-size: 0.85rem;
    margin-top: 2px;
    text-align: center;
  }

  /* ====== TOILET BOX (🚽 + 👖) ====== */
  .toilet-box{
    margin-top: 8px;
    width: 360px;
    max-width: 92%;
    min-height: 90px;
    padding: 12px;
    border-radius: var(--radius-med);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.night .toilet-box{
    background: rgba(0,0,0,0.18);
    border-color: rgba(255,255,255,0.08);
  }

  .toilet-stats{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 18px;
    font-weight: 700;
  }
  .toilet-stat{ opacity: 0.95; }

  .toilet-actions{
    display:flex;
    gap: 10px;
    justify-content:center;
    flex-wrap: wrap;
  }

  .toilet-btn{
    border: none;
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: transform .08s ease;
  }

  .toilet-btn:active{ transform: scale(0.98); }

  .toilet-btn-ok{
    background: rgba(76, 175, 80, 0.22);
    border: 2px solid rgba(76, 175, 80, 0.35);
    color: var(--text);
  }

  .toilet-btn-acc{
    background: rgba(244, 67, 54, 0.18);
    border: 2px solid rgba(244, 67, 54, 0.30);
    color: var(--text);
  }
  
  /* ====== TAAKJES ====== */
  
  .tasks-section-title {
    margin-top: 6px;
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 600;
  }
  
  .tasks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
  }
  
  .task {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-med);
    background: var(--accent-soft);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.2s ease;
  }
  
  .task img { width: 60px; height: 60px; }
  
  .task:active { transform: scale(0.98); }
  
  .task.just-completed {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(76,175,80,0.7);
  }
  
  .task.completed {
    opacity: 0.45;
    filter: grayscale(0.4);
  }
  
  /* ====== MORGEN-BALK ====== */
  
  .tomorrow-bar {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: var(--radius-med);
    background: var(--accent-soft);
  }
  .actions {
    display: flex;
    gap: 16px;
    width: 100%;
  }
  
  .actions .btn {
    flex: 1;               /* even breed */
    padding: 18px 0;       /* groter */
    font-size: 18px;
    border-radius: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  
  .btn.wc {
    background: #1f7a3f;
    color: white;
  }
  
  .btn.ongeluk {
    background: #8b1e1e;
    color: white;
  }