/* ============================================================
   paneel.css — alles wat het paneel laat zien vóórdat (of naast dat)
   de gewone wand (app.css) er is: koppelscherm, onboarding-liveweergave,
   de kijker-melding, de offline-indicator en het scherm-uit-doek.

   Staat los van app.css: die laadt erna en gaat over de wand zelf.
   Kleuren en letters volgen het paneel-thema uit themes.css (Space
   Grotesk + Instrument Sans, avondpalet), maar met een terugval, want
   dit scherm moet ook werken als app.css nog niet geladen is.

   Alle lagen staan buiten .app, dus --sc zetten we hier zelf (zie de
   valkuil bij .assistent en .sheet in CLAUDE.md). Staand paneel is
   1080×1920; op een liggend scherm rekent --sc met de korte zijde, zodat
   het koppelscherm ook daar past. Geen slagschaduwen: die tekent de
   Android-WebView niet schoon (CLAUDE.md 13g).
   ============================================================ */

#paneel-overlay,
.paneel-zwart,
.paneel-offline{
  --sc: calc(min(100vw, 100vh, 1080px) / 1080);
  --p-bg: #07090E;
  --p-panel: #12151D;
  --p-tekst: #EEF1F6;
  --p-muted: #96A0B2;
  --p-dim: #525B6B;
  --p-accent: #4CD2F2;
  --p-ok: #2BC48F;
  --p-warn: #F0BE4A;
  --p-lijn: rgba(255,255,255,.08);
  --p-display: var(--font-display, 'Space Grotesk'), 'Space Grotesk', system-ui, sans-serif;
  --p-body: var(--font-body, 'Instrument Sans'), 'Instrument Sans', system-ui, sans-serif;
  font-family: var(--p-body);
  color: var(--p-tekst);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
#paneel-overlay *, .paneel-zwart *, .paneel-offline *{ box-sizing: border-box; }

/* Het hoofdscherm van het paneel: koppelen, onboarding, kijker-melding.
   Boven alles van app.css (hoogste daar is 55). */
#paneel-overlay{
  position: fixed; inset: 0; z-index: 900;
  background: var(--p-bg);
  overflow: hidden;
  display: none;
}
#paneel-overlay.aan{ display: block; }

/* ---------- Koppelscherm ---------- */
.pk{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(36 * var(--sc));
  padding: calc(80 * var(--sc)) calc(72 * var(--sc));
  text-align: center;
  animation: pk-in .6s ease both;
}
@keyframes pk-in{ from{ opacity: 0; transform: translateY(calc(12 * var(--sc))); } to{ opacity: 1; transform: none; } }

.pk-merk{
  display: flex; align-items: center; gap: calc(18 * var(--sc));
  font-family: var(--p-display); font-weight: 700;
  font-size: calc(44 * var(--sc)); letter-spacing: -.01em;
}
.pk-merk i{
  width: calc(56 * var(--sc)); height: calc(56 * var(--sc)); border-radius: 30%;
  background: linear-gradient(135deg, var(--p-ok), var(--p-accent));
  display: inline-block; position: relative;
}
.pk-merk i::after{
  content: ''; position: absolute; inset: 30%;
  border: calc(5 * var(--sc)) solid #07090E; border-radius: 50%;
  border-right-color: transparent; transform: rotate(-45deg);
}

.pk-kop{
  font-family: var(--p-display); font-weight: 600;
  font-size: calc(58 * var(--sc)); line-height: 1.12; letter-spacing: -.015em;
  max-width: 14ch; margin: 0;
}
.pk-sub{
  font-size: calc(30 * var(--sc)); color: var(--p-muted); margin: 0;
  max-width: 26ch; line-height: 1.35;
}

.pk-qr{
  width: calc(560 * var(--sc)); height: calc(560 * var(--sc));
  background: #fff; border-radius: calc(28 * var(--sc));
  padding: calc(24 * var(--sc));
  display: flex; align-items: center; justify-content: center;
}
.pk-qr svg{ width: 100%; height: 100%; display: block; }

.pk-code{
  font-family: var(--p-display); font-weight: 700;
  font-size: calc(112 * var(--sc)); letter-spacing: .22em; line-height: 1;
  padding: calc(18 * var(--sc)) calc(36 * var(--sc)) calc(18 * var(--sc)) calc(52 * var(--sc));
  border: calc(3 * var(--sc)) solid var(--p-lijn); border-radius: calc(28 * var(--sc));
  background: var(--p-panel);
  font-variant-numeric: tabular-nums;
}
.pk-code.leeg{ color: var(--p-dim); letter-spacing: .1em; font-size: calc(40 * var(--sc)); padding: calc(28 * var(--sc)) calc(40 * var(--sc)); }
.pk-typ{
  font-size: calc(26 * var(--sc)); color: var(--p-muted); margin: 0; line-height: 1.4;
}
.pk-typ b{ color: var(--p-tekst); font-weight: 600; }
.pk-voet{
  position: absolute; bottom: calc(40 * var(--sc)); left: 0; right: 0;
  font-size: calc(22 * var(--sc)); color: var(--p-dim); text-align: center;
}
.pk-voet.fout{ color: var(--p-warn); }

/* Liggend scherm: QR links, tekst en code rechts. */
@media (orientation: landscape){
  .pk{ flex-direction: row; gap: calc(80 * var(--sc)); text-align: left; padding: calc(60 * var(--sc)) calc(90 * var(--sc)); }
  .pk-tekst{ display: flex; flex-direction: column; gap: calc(28 * var(--sc)); align-items: flex-start; }
  .pk-qr{ flex: none; width: calc(620 * var(--sc)); height: calc(620 * var(--sc)); }
  .pk-code{ font-size: calc(96 * var(--sc)); }
}
@media (orientation: portrait){
  /* Staand: merk, kop, QR, code, typ-hint — van boven naar beneden. De QR
     staat in de DOM vooraan (voor de liggende indeling), dus hier op volgorde. */
  .pk-tekst{ display: contents; }
  .pk-merk{ order: 1; } .pk-kop{ order: 2; } .pk-qr{ order: 3; } .pk-code{ order: 4; } .pk-typ{ order: 5; }
}

/* ---------- Onboarding-liveweergave ---------- */
.po{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(96 * var(--sc)) calc(80 * var(--sc)) calc(80 * var(--sc));
  gap: calc(40 * var(--sc));
}
.po-stap{
  font-size: calc(28 * var(--sc)); color: var(--p-accent);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  min-height: 1.4em;
}
.po-naam{
  font-family: var(--p-display); font-weight: 700;
  font-size: calc(120 * var(--sc)); line-height: 1.02; letter-spacing: -.02em;
  margin: 0; overflow-wrap: anywhere;
  transition: opacity .5s ease, transform .5s ease;
}
.po-naam.wacht{ color: var(--p-dim); font-weight: 500; font-size: calc(72 * var(--sc)); }
.po-naam.nieuw{ animation: po-pop .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes po-pop{ from{ opacity: 0; transform: translateY(calc(18 * var(--sc))) scale(.96); } to{ opacity: 1; transform: none; } }

.po-zin{
  font-size: calc(40 * var(--sc)); color: var(--p-muted); line-height: 1.3;
  margin: 0; min-height: 2.6em; max-width: 22ch;
  transition: opacity .35s ease;
}
.po-zin.wissel{ opacity: 0; }

.po-leden{
  display: flex; flex-wrap: wrap; gap: calc(28 * var(--sc)); min-height: calc(140 * var(--sc));
  align-items: flex-start;
}
.po-lid{
  display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--sc));
  width: calc(150 * var(--sc));
  animation: po-pop .6s cubic-bezier(.2,.9,.3,1.2) both;
}
.po-lid i{
  width: calc(124 * var(--sc)); height: calc(124 * var(--sc)); border-radius: 50%;
  background: var(--kl, #5E8CFF);
  outline: calc(4 * var(--sc)) solid color-mix(in srgb, var(--kl, #5E8CFF) 55%, transparent);
  outline-offset: calc(6 * var(--sc));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(56 * var(--sc)); font-style: normal; overflow: hidden;
  color: #fff; font-family: var(--p-display); font-weight: 700;
}
.po-lid i img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.po-lid span{ font-size: calc(26 * var(--sc)); color: var(--p-tekst); text-align: center; overflow-wrap: anywhere; }

.po-agenda{ display: flex; flex-direction: column; gap: calc(14 * var(--sc)); margin-top: auto; }
.po-agenda:empty{ display: none; }
.po-afspraak{
  display: grid; grid-template-columns: calc(190 * var(--sc)) 1fr; align-items: center;
  gap: calc(24 * var(--sc));
  background: var(--p-panel); border: 1px solid var(--p-lijn);
  border-radius: calc(22 * var(--sc)); padding: calc(20 * var(--sc)) calc(28 * var(--sc));
  animation: po-pop .5s ease both;
}
.po-afspraak b{ font-family: var(--p-display); font-size: calc(30 * var(--sc)); font-weight: 600; color: var(--p-accent); font-variant-numeric: tabular-nums; }
.po-afspraak b small{ display: block; font-size: calc(22 * var(--sc)); color: var(--p-muted); font-weight: 500; }
.po-afspraak span{ font-size: calc(32 * var(--sc)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Klaar!-moment: korte schermvullende groet, dan herladen. */
.po-klaar{
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(20 * var(--sc));
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--p-ok) 26%, var(--p-bg)), var(--p-bg) 70%);
  animation: pk-in .5s ease both;
}
.po-klaar b{ font-family: var(--p-display); font-size: calc(140 * var(--sc)); font-weight: 700; letter-spacing: -.02em; animation: po-pop .8s cubic-bezier(.2,.9,.3,1.25) both; }
.po-klaar span{ font-size: calc(36 * var(--sc)); color: var(--p-muted); }
.po-klaar i{
  width: calc(160 * var(--sc)); height: calc(160 * var(--sc)); border-radius: 50%;
  background: var(--p-ok); position: relative; margin-bottom: calc(20 * var(--sc));
  animation: po-pop .6s cubic-bezier(.2,.9,.3,1.3) both;
}
.po-klaar i::after{
  content: ''; position: absolute; left: 30%; top: 26%; width: 22%; height: 44%;
  border: calc(12 * var(--sc)) solid #06231A; border-top: 0; border-left: 0; transform: rotate(45deg);
}

@media (orientation: landscape){
  .po{ padding: calc(60 * var(--sc)) calc(90 * var(--sc)); }
  .po-naam{ font-size: calc(96 * var(--sc)); }
  .po-agenda{ display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- Kijker-melding (laptop opent de wand-URL) ---------- */
.pkijker{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(60 * var(--sc));
  background: rgba(7, 9, 14, .78);
}
.pkijker div{
  max-width: calc(760 * var(--sc)); background: var(--p-panel); border: 1px solid var(--p-lijn);
  border-radius: calc(28 * var(--sc)); padding: calc(44 * var(--sc)) calc(52 * var(--sc));
  font-size: calc(30 * var(--sc)); line-height: 1.45;
}
.pkijker h2{ font-family: var(--p-display); font-size: calc(40 * var(--sc)); margin: 0 0 .5em; }
.pkijker p{ margin: 0 0 .8em; color: var(--p-muted); }
.pkijker p:last-child{ margin: 0; }
.pkijker code{ font-family: ui-monospace, Menlo, monospace; color: var(--p-tekst); background: rgba(255,255,255,.06); padding: .1em .4em; border-radius: .3em; }

/* ---------- Scherm uit ---------- */
.paneel-zwart{
  position: fixed; inset: 0; z-index: 1000;
  background: #000; display: none;
  touch-action: none; cursor: none;
}
.paneel-zwart.aan{ display: block; }

/* ---------- Offline-indicator ----------
   Klein wolkje met een streep erdoor, rechtsonder. Alleen zichtbaar als
   het paneel op zijn cache draait; zegt verder niets en vraagt niets. */
.paneel-offline{
  position: fixed; right: calc(22 * var(--sc)); bottom: calc(22 * var(--sc)); z-index: 950;
  width: calc(44 * var(--sc)); height: calc(44 * var(--sc));
  opacity: 0; pointer-events: none; transition: opacity .6s ease;
  color: var(--p-muted);
}
.paneel-offline.aan{ opacity: .7; }
.paneel-offline svg{ width: 100%; height: 100%; display: block; }