/* Kamer-dashboard — Samsung SM-T220 (8,7", 1340x800, traag): geen blur, geen zware schaduwen, weinig animatie. */
:root {
  --bg: #14182a; --vak: #1e2440; --rand: #2b3358; --tekst: #f4f1ea; --zacht: #a9b0cf;
  --accent: #ffc94d; --kind: #ffc94d;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body.theo { --kind: #4da3ff; }
body.emilia { --kind: #ffc94d; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--tekst); overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* ---------------- dag ---------------- */
#dag {
  height: 100%; padding: 14px 16px; display: grid; gap: 12px;
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  grid-template-areas:
    "kop kop kop"
    "licht weer agenda"
    "licht weer aftel";
}
.kop { grid-area: kop; display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px; }
.klok { display: flex; align-items: baseline; gap: 14px; }
#tijd { font-size: 58px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
#datum { font-size: 22px; color: var(--zacht); }
.hallo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 26px; font-weight: 700; color: var(--kind); }
.hallo small { font-size: 18px; font-weight: 600; color: var(--tekst); opacity: .85; }
.hallo small:empty { display: none; }

.vak { background: var(--vak); border: 2px solid var(--rand); border-radius: 22px; padding: 14px 16px; overflow: hidden; min-height: 0; }
.vak h2 { font-size: 19px; font-weight: 700; color: var(--zacht); margin-bottom: 10px; }
#v-licht { grid-area: licht; display: flex; flex-direction: column; gap: 12px; }
#v-weer { grid-area: weer; display: flex; flex-direction: column; gap: 10px; }
#v-weer h3 { font-size: 16px; color: var(--zacht); font-weight: 600; margin-top: auto; }
#v-agenda { grid-area: agenda; }
#v-aftel { grid-area: aftel; }

/* licht */
.schakel {
  display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 20px; border-radius: 20px;
  background: #2a3157; font-size: 30px; font-weight: 800; min-height: 96px;
}
.schakel .bol { width: 58px; height: 58px; border-radius: 50%; background: #3a4170; flex: none; transition: background .3s; }
.schakel.aan { background: #3b3a2a; }
.schakel.aan .bol { background: var(--lamp, #ffd36b); box-shadow: 0 0 26px 6px var(--lamp, #ffd36b); }
#dimmer, #wielDim { -webkit-appearance: none; appearance: none; width: 100%; height: 46px; border-radius: 23px; background: linear-gradient(90deg, #2a3157, var(--lamp, #ffd36b)); outline: none; flex: none; }
#dimmer::-webkit-slider-thumb, #wielDim::-webkit-slider-thumb { -webkit-appearance: none; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 5px solid #ffc94d; }
#dimmer:disabled { opacity: .35; }
.kleuren { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 72px; gap: 10px; flex: none; }
.uren { margin-top: auto; flex: none; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; background: #262d50; border-radius: 16px; padding: 12px 14px; font-size: 19px; color: var(--zacht); line-height: 1.5; text-align: center; }
.uren b { color: var(--tekst); }
.uren small { font-size: 15px; flex-basis: 100%; }
.kleuren button { min-height: 72px; border-radius: 18px; background: #2a3157; font-size: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.kleuren button small { font-size: 14px; color: var(--zacht); font-weight: 600; }
.kleuren button.k { background: var(--k); }
.kleuren button:active, .schakel:active { transform: scale(.96); }
.kleuren button.gekozen { outline: 4px solid #fff; outline-offset: -4px; }
.fout { color: #ff9b9b; font-size: 16px; }

/* weer */
.nu { display: flex; align-items: center; gap: 12px; }
.strook li { background: #262d50; border-radius: 14px; padding: 6px 0; }
.nu svg { width: 64px; height: 64px; }
.nu .t { font-size: 50px; font-weight: 800; }
.nu .lbl { font-size: 18px; color: var(--zacht); }
.strook { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.strook li { font-size: 16px; color: var(--zacht); }
.strook svg { width: 34px; height: 34px; display: block; margin: 2px auto; }
.strook b { display: block; color: var(--tekst); font-size: 19px; }
.strook .p { color: #6aa8ff; font-size: 14px; min-height: 17px; display: block; }
.aandoen { display: flex; gap: 8px; flex-wrap: wrap; }
.aandoen span { background: #2a3157; border-radius: 14px; padding: 7px 12px; font-size: 19px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* temperatuur */
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.twee div { background: #262d50; border-radius: 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 8px 0; }
.twee small { font-size: 18px; color: var(--zacht); }
.twee b { font-size: 40px; font-weight: 800; }

/* agenda */
#agenda { list-style: none; display: flex; flex-direction: column; gap: 8px; }
#agenda li { display: flex; gap: 12px; align-items: center; background: #262d50; border-left: 6px solid var(--kind); border-radius: 12px; padding: 9px 12px; font-size: 21px; font-weight: 700; }
#agenda li .t { flex: 1; line-height: 1.2; overflow-wrap: anywhere; }
#agenda li.later { font-size: 19px; padding: 7px 12px; }
#agenda li .u { font-size: 18px; color: var(--zacht); min-width: 58px; font-variant-numeric: tabular-nums; }
#agenda li.vak-dag { border-left-color: #2fd17a; }
#agenda li.voorbij { opacity: .45; }
#agenda .leeg { background: none; border: 0; color: var(--zacht); font-weight: 500; font-size: 19px; padding: 4px 0; }
#agenda .dag { background: none; border: 0; padding: 4px 0 0; font-size: 15px; color: var(--zacht); text-transform: uppercase; letter-spacing: .5px; }

/* aftellen */
#aftel { list-style: none; display: flex; flex-direction: column; gap: 7px; }
#aftel li { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; }
#aftel li .e { font-size: 26px; width: 34px; text-align: center; }
#aftel li .n { flex: 1; min-width: 0; line-height: 1.15; overflow-wrap: anywhere; }
#aftel li .d { flex: none; min-width: 74px; display: flex; flex-direction: column; align-items: center; line-height: 1; background: #2a3157; border-radius: 12px; padding: 4px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#aftel li .d b { font-size: 22px; }
#aftel li .d small { font-size: 12px; font-weight: 600; color: var(--zacht); margin-top: 2px; }
#aftel li.eigen .d small, #aftel li.vandaag .d small { color: inherit; }
#aftel li.eigen .d { background: var(--kind); color: #14182a; }
#aftel li.vandaag .d { background: #ff6fb3; color: #fff; }

/* staand (tablet rechtop) */
@media (orientation: portrait) {
  #dag { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "kop kop" "licht licht" "weer agenda" "weer aftel"; }
  #v-licht { flex-direction: row; flex-wrap: wrap; }
  .schakel { width: auto; flex: 1 1 45%; }
  #dimmer { flex: 1 1 45%; align-self: center; }
  .kleuren { flex: 1 1 100%; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 72px; }
}

/* ---------------- nacht ---------------- */
#nacht { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
#nacht .hemel svg { width: 230px; height: 230px; display: block; }
#nacht .nklok { font-size: 96px; font-weight: 300; color: #3c4366; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
#nacht .nzin { font-size: 28px; color: #3c4366; text-align: center; }
#nacht.ochtend { background: #2a1a05; }
#nacht.ochtend .nklok, #nacht.ochtend .nzin { color: #ffcf6b; }
#nacht .nlamp { position: absolute; right: 22px; bottom: 22px; width: 76px; height: 76px; border-radius: 50%; background: #0d0f18; font-size: 34px; opacity: .55; }
#nacht .maan { animation: ademen 8s ease-in-out infinite; }
@keyframes ademen { 50% { opacity: .55; } }

/* ---------------- slot ---------------- */
#slot { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; font-size: 30px; font-weight: 700; padding: 40px; }
#slot div { font-size: 90px; }
#slot small { font-size: 20px; color: var(--zacht); font-weight: 400; }
[hidden] { display: none !important; }

/* knop 'alle kleuren' = mini-kleurenwiel */
.kleuren .wielknop { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); position: relative; }
.kleuren .wielknop small { position: absolute; bottom: 5px; left: 0; right: 0; color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000, 0 0 4px #000; }

/* kleurenwiel-scherm */
#wiel { position: fixed; inset: 0; background: rgba(8, 10, 20, .86); display: flex; align-items: center; justify-content: center; z-index: 5; }
.wielvak { background: var(--vak); border: 2px solid var(--rand); border-radius: 26px; padding: 26px; display: flex; gap: 30px; align-items: center; }
.schijf { position: relative; width: min(56vh, 46vw); height: min(56vh, 46vw); border-radius: 50%; touch-action: none; flex: none;
  background: radial-gradient(closest-side, #fff 6%, rgba(255,255,255,0) 100%), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.stip { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 5px solid #fff; left: 50%; top: 50%; pointer-events: none; box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.wielrechts { display: flex; flex-direction: column; gap: 12px; width: 280px; }
.wielrechts h2 { font-size: 26px; }
.wielrechts small { font-size: 16px; color: var(--zacht); font-weight: 600; margin-top: 6px; }
.wit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wit button { height: 62px; border-radius: 16px; }
.wit button:active, .klaarknop:active { transform: scale(.95); }
.klaarknop { margin-top: 10px; background: var(--kind); color: #14182a; font-size: 24px; font-weight: 800; border-radius: 18px; padding: 16px; }

/* Leesavontuur */
.lees { flex: none; display: block; text-decoration: none; color: inherit; background: #262d50; border-radius: 16px; padding: 10px 14px; }
.lees .lkop { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--zacht); }
.lees .ster { color: #ffd75e; }
.lees .boek { display: flex; align-items: center; gap: 10px; margin: 6px 0 6px; font-size: 19px; font-weight: 700; }
.lees .be { font-size: 24px; }
.lees .bn { flex: 1; line-height: 1.15; }
.lees .bh { font-size: 16px; color: var(--zacht); }
.lees .balk { height: 10px; border-radius: 5px; background: #1a1f38; overflow: hidden; }
.lees .balk i { display: block; height: 100%; background: var(--kind); border-radius: 5px; }
.lees .lvoet { font-size: 14px; color: var(--zacht); margin-top: 6px; }

/* zon op/onder + meenemen */
.zon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 18px; color: var(--zacht); background: #262d50; border-radius: 16px; padding: 10px 14px; }
.zon span { flex: 1; white-space: nowrap; }
.zon b { color: var(--tekst); }
.zon em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--tekst); flex: none; }
.zon:empty { display: none; }
.klaar { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
#v-weer .klaar h3 { margin-top: 0; }
.aandoen.mee span { background: #3a2f55; }
.aandoen.mee:empty { display: none; }

@media (orientation: portrait) {
  .wielvak { flex-direction: column; padding: 22px; }
  .schijf { width: 70vw; height: 70vw; }
  .wielrechts { width: 70vw; }
  .kleuren { grid-template-columns: repeat(8, 1fr); }
  #v-licht h2 { flex-basis: 100%; margin-bottom: 0; }
  .lees { flex: 1 1 45%; }
  .uren { flex: 1 1 45%; margin-top: 0; }
}