/* Licht — stylesheet
   Eén opvallend element: de dimmer, die oplicht in de kleur van gloeilampenlicht.
   De rest blijft rustig en donker, zodat je 's avonds niet verblind wordt. */

:root {
  --dusk: #1B1E26;
  --panel: #232733;
  --panel-hi: #2D3241;
  --line: #373D4D;
  --text: #EEE9DF;
  --muted: #9AA0AD;
  --light: #FFC56B;
  --light-deep: #EE9340;
  --on-light: #2A1A06;
  --danger: #F2786A;
  --ok: #8FD6A8;

  --r-card: 20px;
  --r-control: 14px;
  --r-pill: 999px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--dusk);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2 { margin: 0 0 .5rem; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 .75rem; }
a { color: var(--light); }
strong { font-weight: 600; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }

:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kop en voet ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1rem .5rem;
}

.brand {
  color: var(--text);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.brand::before {
  content: '';
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--light);
  box-shadow: 0 0 12px 3px rgba(255, 197, 107, .45);
}

.nav { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.nav a, .linklike {
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: .25rem 0;
  font: inherit;
  cursor: pointer;
}
.nav a:hover, .linklike:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav-form { margin: 0; }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: .5rem 1rem 2rem;
}

.foot {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  color: var(--muted);
  font-size: .8rem;
}

/* ---------- Kamers ---------- */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .25rem 0 1rem;
}
.summary { margin: 0; color: var(--muted); }

.rooms {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .rooms { grid-template-columns: 1fr 1fr; }
}

.room {
  --b: 0;     /* gloed: 0 als de kamer uit is */
  --pos: 50;  /* stand van de dimmer */
  position: relative;
  display: grid;
  gap: .9rem;
  padding: 1.1rem;
  border-radius: var(--r-card);
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(255, 197, 107, calc(var(--b) * 0.0022)), transparent 65%),
    var(--panel);
  border: 1px solid var(--line);
  transition: background .4s ease, border-color .4s ease;
}
.room.is-on { border-color: rgba(255, 197, 107, calc(0.15 + var(--b) * 0.003)); }

.room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.room-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.room-state {
  display: block;
  font-size: .9rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: .1rem;
}
.room.is-on .room-state { color: var(--light); }

/* Schakelaar */
.switch {
  flex: none;
  position: relative;
  width: 56px;
  height: 34px;
  border-radius: var(--r-pill);
  border: 0;
  background: var(--panel-hi);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: background .25s ease;
}
.switch .knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .25s ease, background .25s ease;
}
.switch[aria-checked="true"] { background: var(--light); box-shadow: 0 0 18px rgba(255, 197, 107, .35); }
.switch[aria-checked="true"] .knob { transform: translateX(22px); background: var(--on-light); }

/* Dimmer: het opvallende element */
.dim { display: block; }
.dim input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  border-radius: var(--r-control);
  cursor: pointer;
  touch-action: pan-y;
  background: linear-gradient(90deg,
    #3A4050 0%,
    #454C5E calc(var(--pos) * 1%),
    var(--panel-hi) calc(var(--pos) * 1%));
  box-shadow: inset 0 0 0 1px var(--line);
}
.room.is-on .dim input[type="range"] {
  background: linear-gradient(90deg,
    var(--light-deep) 0%,
    var(--light) calc(var(--pos) * 1%),
    var(--panel-hi) calc(var(--pos) * 1%));
  box-shadow: 0 0 calc(var(--b) * 0.35px) rgba(255, 197, 107, .35);
}
.dim input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 52px; }
.dim input[type="range"]::-moz-range-track { background: transparent; height: 52px; }
.dim input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 34px;
  margin-top: 9px;
  border-radius: 3px;
  background: var(--text);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.dim input[type="range"]::-moz-range-thumb {
  width: 6px;
  height: 34px;
  border: 0;
  border-radius: 3px;
  background: var(--text);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* Scènes */
.scenes {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -1.1rem;
  padding: 0 1.1rem 2px;
}
.scenes::-webkit-scrollbar { display: none; }
.scene {
  flex: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: var(--r-pill);
  padding: .45rem .9rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
}
.scene:hover { border-color: var(--muted); }
.scene.is-active {
  background: var(--light);
  border-color: var(--light);
  color: var(--on-light);
  font-weight: 600;
}

/* Meldingen */
.notice {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border-radius: var(--r-control);
  background: rgba(242, 120, 106, .12);
  border: 1px solid rgba(242, 120, 106, .4);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  padding: .75rem 1rem;
  border-radius: var(--r-control);
  background: #3B2A2A;
  border: 1px solid rgba(242, 120, 106, .5);
  color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  z-index: 10;
}

.skeleton {
  height: 170px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--line);
  opacity: .6;
}

/* ---------- Pagina's (login, account, beheer) ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.panel-narrow { max-width: 420px; margin: 2rem auto 1rem; }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .9rem; color: var(--muted); }
.field input[type="text"],
.field input[type="password"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--dusk);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: .75rem .9rem;
}
.field input:focus { border-color: var(--light); outline: none; }

/* Checkbox bewust apart: geen globale input- of label-regels */
.check {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: none;
  accent-color: var(--light);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--light); color: var(--on-light); }
.btn-quiet { background: var(--panel-hi); color: var(--text); border-color: var(--line); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(242, 120, 106, .5); }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.actions form { margin: 0; }

.flash {
  padding: .75rem 1rem;
  border-radius: var(--r-control);
  margin: 0 0 1rem;
}
.flash-ok { background: rgba(143, 214, 168, .12); border: 1px solid rgba(143, 214, 168, .4); }
.flash-error { background: rgba(242, 120, 106, .12); border: 1px solid rgba(242, 120, 106, .4); }

.users { list-style: none; margin: 0; padding: 0; }
.user { padding: .9rem 0; border-top: 1px solid var(--line); }
.user:first-child { border-top: 0; padding-top: 0; }
.user-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.user .muted { margin: .15rem 0 0; }
.tag {
  font-size: .78rem;
  padding: .1rem .55rem;
  border-radius: var(--r-pill);
  background: var(--panel-hi);
  color: var(--muted);
}
.tag-me { color: var(--light); }
.user-tools { margin-top: .5rem; }
.user-tools summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.user-tools[open] summary { margin-bottom: .75rem; }
.form-inline { gap: .6rem; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.checks li { display: flex; gap: .6rem; }
.checks .mark { width: 1.2rem; font-weight: 700; }
.checks .ok .mark { color: var(--ok); }
.checks .nok .mark { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}