/* ============================================================
   HET VOORBEELDSCHERM VAN DE APP

   Los bestand, want dit scherm staat op meerdere pagina's:
   op de homepage en op de Control Center-pagina. De klassen
   botsen met niets in core.css of home.css, dus je kunt dit
   bestand overal naast de andere stijl laden.
   ============================================================ */

:root {
  /* Alleen de waarden die dit bestand zelf nodig heeft, zodat het
     ook werkt op een pagina die product.css niet laadt. */
  --cc-roze:  #ff4f8b;  --cc-roze-diep: #e0356f;  --cc-roze-zacht: #fdeff4;
  --cc-geel:  #ffd23f;  --cc-geel-diep: #b9860b;  --cc-geel-zacht: #fff8e0;
  --cc-ink:   #16161a;  --cc-ink-2: #26262d;      --cc-ink-3: #33333d;
  --cc-paper: #ffffff;  --cc-backdrop: #ececef;   --cc-vlak-2: #f6f6f8;
  --cc-muted: #8b8b95;  --cc-label: #6c6c76;      --cc-lijn: #e7e7ec;
  --cc-alarm: #d92d20;  --cc-info: #2f6fed;
  --cc-schaduw: 0 22px 50px rgba(22, 22, 26, .28);
  --cc-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cc-display: "Geist", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Het voorbeeldscherm ----------

   Dit is het dashboard van de app, nagebouwd met dezelfde opmaak als
   control-center-core: de donkere zijbalk, de begroeting met de naam
   in roze, en de drie blokken met hun verspringende schaduw. Die
   kleur zegt iets, precies zoals in de app:

     geel  = hier begin je mee
     roze  = dit is vandaag
     zwart = achtergrondinformatie

   Alles staat een slag kleiner dan in het echt, want dit hangt in een
   hero van een halve schermbreedte en niet op een werkscherm.
   -------------------------------------------------------------- */

/* Ruimte vrijhouden voor het gele randje dat 9 pixels verspringt.
   Zonder deze marge loopt dat randje buiten de kolom en lijkt het
   venster niet in zijn vak te passen. */
.venster-om { position: relative; margin: 0 9px 9px 0; }
.venster {
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  background: var(--cc-backdrop);
  border: 2px solid var(--cc-ink);
  border-radius: 14px;
  box-shadow: var(--cc-schaduw);
  overflow: hidden;
}

/* ---------- De zijbalk ---------- */
.app-zij { background: var(--cc-ink); color: #fff; padding-bottom: 10px; }
.app-zij-kop { padding: 11px 10px; border-bottom: 1px solid var(--cc-ink-3); }
.app-logo { font-family: var(--cc-mono); font-size: .58rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.app-logo .haak { color: var(--cc-roze); }
.app-logo-sub { display: block; font-size: .4rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cc-geel); margin-top: 2px; }
.app-nav { padding: 9px 7px; display: grid; gap: 1px; }
.app-nav-kop { font-size: .4rem; letter-spacing: .16em; text-transform: uppercase; color: #6b6b7a; font-weight: 700; padding: 7px 8px 3px; }
.app-nav-link {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: 8px;
  color: #c9c9d2; font-size: .56rem;
}
.app-nav-link.actief { background: var(--cc-ink-2); color: #fff; font-weight: 700; }
.app-nav-link.actief::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; background: var(--cc-roze); border-radius: 999px;
}
.app-nav-stip { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; flex-shrink: 0; }
.app-nav-link.actief .app-nav-stip { opacity: 1; background: var(--cc-roze); }

/* ---------- Het werkvlak ---------- */
.app-vlak { padding: 13px 13px 15px; min-width: 0; }

.app-begroet { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.app-begroet h3 { font-family: var(--cc-display); font-size: .95rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.app-begroet h3 span { color: var(--cc-roze-diep); }
.app-begroet p { font-family: var(--cc-display); font-size: .58rem; font-weight: 400; color: var(--cc-label); margin-top: 4px; }
.app-plus {
  flex-shrink: 0; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--cc-roze); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1;
}

/* De blokken. De rand met het verspringende randje eronder is het
   merkteken; kaal is niet hetzelfde als rustig. */
.app-blok {
  background: var(--cc-paper);
  border: 2px solid var(--cc-ink);
  border-radius: 14px;
  padding: 10px 11px;
  margin: 0 6px calc(10px + 6px) 0;
}
.app-blok:last-of-type { margin-bottom: 6px; }
.blok-aandacht { box-shadow: 6px 6px 0 var(--cc-geel); }
.blok-vandaag  { box-shadow: 6px 6px 0 var(--cc-roze); }
.blok-week     { box-shadow: 6px 6px 0 var(--cc-ink); }

.app-blok-kop { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.app-blok-kop h4 { font-family: var(--cc-display); font-size: .72rem; font-weight: 700; letter-spacing: -.01em; }
.app-blok-kop h4 .haak { color: var(--cc-roze); font-family: var(--cc-mono); font-size: .7em; margin-right: 4px; vertical-align: 1px; }
.app-telling { font-family: var(--cc-mono); font-size: .5rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.app-blok-link { margin-left: auto; font-family: var(--cc-mono); font-size: .5rem; color: var(--cc-label); }

/* Een gele streep onder de kop van "Hier begin je mee", zodat het blok
   warm aanvoelt in plaats van alarmerend. */
.blok-aandacht .app-blok-kop { padding-bottom: 7px; border-bottom: 2px solid var(--cc-geel); }
.blok-aandacht .app-telling { background: var(--cc-geel); color: var(--cc-ink); }
.blok-vandaag .app-telling { background: var(--cc-roze-zacht); color: var(--cc-roze-diep); }

/* Aandacht nodig */
.app-aandacht { display: grid; gap: 1px; }
.app-aandacht li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; }
.app-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-muted); flex-shrink: 0; }
.niveau-alarm  .app-stip { background: var(--cc-alarm); }
.niveau-letop  .app-stip { background: var(--cc-geel-diep); }
.niveau-info   .app-stip { background: var(--cc-info); }
.app-aandacht span.tekst { flex: 1; min-width: 0; font-family: var(--cc-display); font-weight: 400; font-size: .58rem; line-height: 1.35; }
.app-pijl { color: var(--cc-muted); font-size: .55rem; flex-shrink: 0; }

/* Vandaag */
.app-dag li { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--cc-lijn); }
.app-dag li:last-child { border-bottom: 0; }
.app-vink { width: 15px; height: 15px; border: 2px solid var(--cc-muted); border-radius: 50%; flex-shrink: 0; }
.app-tijd { flex: 0 0 34px; font-family: var(--cc-mono); font-size: .5rem; color: var(--cc-muted); text-align: right; }
.app-dag-tekst { min-width: 0; display: grid; gap: 1px; }
.app-dag-titel { font-family: var(--cc-display); font-weight: 500; font-size: .58rem; line-height: 1.35; }
.app-dag-context { font-family: var(--cc-mono); font-size: .46rem; color: var(--cc-muted); }

/* Deze week */
.app-week li { display: flex; align-items: center; gap: 9px; padding: 4px 0; border-bottom: 1px solid var(--cc-lijn); }
.app-week li:last-child { border-bottom: 0; }
.app-week-dag { flex: 0 0 26px; display: grid; justify-items: center; font-family: var(--cc-mono); line-height: 1.1; }
.app-week-naam { font-size: .44rem; color: var(--cc-muted); }
.app-week-nr { font-size: .58rem; font-weight: 700; }
.app-week-inhoud { min-width: 0; display: grid; gap: 1px; }
.app-week-eerste { font-family: var(--cc-display); font-weight: 500; font-size: .56rem; }
.app-week-rest { font-family: var(--cc-mono); font-size: .44rem; color: var(--cc-muted); }

/* In het kort: de cijfers die overblijven, klein en onderaan. */
.app-kort { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 10px; border-top: 2px solid var(--cc-ink); }
.app-kort div { display: grid; gap: 1px; }
.app-kort b { font-family: var(--cc-display); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-kort span { font-family: var(--cc-mono); font-size: .46rem; color: var(--cc-muted); }

.venster-bij {
  font-size: .64rem; color: var(--cc-muted); letter-spacing: .04em;
  margin-top: 16px; text-align: right;
}


/* Op een telefoon gaat de zijbalk eraf, net als in de echte app, en
   krijgt het werkvlak de volle breedte. Anders blijft er voor de
   blokken nog geen 200 pixels over. Geldt op home en op /control-center. */
@media (max-width: 620px) {
  .venster-om .venster { grid-template-columns: minmax(0, 1fr); }
  .venster-om .app-zij { display: none; }
}