/* Gedeeld door alle pagina's: kleuren, bovenbalk, knoppen en het vraagvenster.
   Kleuren alleen hier definiëren; de pagina's gebruiken uitsluitend de variabelen. */

/* ---------------------------------------------------------------- kleuren

   Basiskleuren voor donker en licht. Bij thema "Sfeer" overschrijft gedeeld.js de basiskleuren en de drie
   gloedkleuren met een mengsel dat bij het huis past; ze zijn daarom als kleurvariabele geregistreerd, zodat een
   wisseling langzaam overvloeit. */
/* Eigen lettertype, zodat CoHomey er op elk apparaat hetzelfde uitziet: Atkinson Hyperlegible (Braille Institute, vrije
   licentie OFL, zie static/AtkinsonHyperlegible-OFL.txt), ontworpen voor leesbaarheid. Er zijn twee diktes; "600" in de
   stijlen valt daardoor op vet. De bestanden staan in static/ en komen van de eigen server, niet van een externe dienst. */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("/AtkinsonHyperlegible-Regular.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("/AtkinsonHyperlegible-Bold.woff2") format("woff2"); }
:root { --letter: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:root {
  --bg: #0f1216; --kaart: #181c22; --rand: #29303a; --tekst: #e9edf2; --zacht: #9fa7b3;
  --accent: #3fa7ff; --knop: #232934; --knop-hover: #2b3340; --knop-rand: #353d49;
  --primair: #1d4f7a; --primair-rand: #2c6ea6; --primair-tekst: #fff;
  --let-bg: #3f2e12; --let-rand: #8a5d1c; --let-tekst: #ffd08a;
  --actief-bg: #1b2a3a; --schaduw: rgba(0,0,0,.5);
  /* Kleur per onderwerp. Een kaart of tegel zet --k; tint, rand en balk volgen daaruit. */
  --k-vent: #3fa7ff; --k-ramen: #39c67a; --k-kelder: #ff8a3d; --k-tv: #a78bfa; --k-licht: #ffc53d;
  --k-warm: #ff6b57; --k-gordijn: #2dd4bf; --k-meet: #60a5fa; --k-flow: #f472b6; --k-kamer: #8a94a2;
  --gloed1: var(--k-vent); --gloed2: var(--k-tv); --gloed3: var(--k-kelder);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3f5f8; --kaart: #ffffff; --rand: #d5dbe3; --tekst: #16202b; --zacht: #505a67;
  --accent: #1f6fd1; --knop: #eef1f5; --knop-hover: #e1e6ed; --knop-rand: #c5cdd8;
  --primair: #1f6fd1; --primair-rand: #1a5fb3; --primair-tekst: #fff;
  --let-bg: #fff0d9; --let-rand: #e5b262; --let-tekst: #7a4700;
  --actief-bg: #e5effb; --schaduw: rgba(20,30,40,.15);
  --k-vent: #1f7fe0; --k-ramen: #169a55; --k-kelder: #e0661a; --k-tv: #7c5ce6; --k-licht: #d99a00;
  --k-warm: #e04a36; --k-gordijn: #0f9f8f; --k-meet: #2f7fe6; --k-flow: #d6409f; --k-kamer: #5a6574;
  color-scheme: light;
}
@property --bg { syntax: "<color>"; inherits: true; initial-value: #0f1216; }
@property --kaart { syntax: "<color>"; inherits: true; initial-value: #181c22; }
@property --rand { syntax: "<color>"; inherits: true; initial-value: #29303a; }
@property --knop { syntax: "<color>"; inherits: true; initial-value: #232934; }
@property --tekst { syntax: "<color>"; inherits: true; initial-value: #e9edf2; }
@property --zacht { syntax: "<color>"; inherits: true; initial-value: #9fa7b3; }
@property --gloed1 { syntax: "<color>"; inherits: true; initial-value: #3fa7ff; }
@property --gloed2 { syntax: "<color>"; inherits: true; initial-value: #a78bfa; }
@property --gloed3 { syntax: "<color>"; inherits: true; initial-value: #ff8a3d; }
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

/* ---------------------------------------------------------------- pagina */
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--tekst);
  font: 16px/1.4 var(--letter);
  background:
    radial-gradient(1100px 560px at 0% -10%, color-mix(in srgb, var(--gloed1) 16%, transparent), transparent 70%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--gloed2) 13%, transparent), transparent 70%),
    radial-gradient(1000px 640px at 50% 112%, color-mix(in srgb, var(--gloed3) 12%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
button, input, select { font: inherit; color: var(--tekst); }
/* Het weerbeeld (een canvas uit gedeeld.js) ligt achter de inhoud. */
.topbalk, main { position: relative; z-index: 1; }
section, .kelder, .vent, .tegel { box-shadow: 0 10px 30px -18px var(--schaduw); }

/* ---------------------------------------------------------------- bovenbalk

   Op elke pagina gelijk. Hoog genoeg voor de statusbalk van iPhone/iPad (als app geïnstalleerd schuift de pagina
   daaronder) en met een regel algemene informatie over het huis (.topinfo, gevuld door gedeeld.js). Op smalle
   schermen staat de paginakeuze op een eigen regel. */
.topbalk {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 64px;
  padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: var(--kaart); border-bottom: 1px solid var(--rand); color: var(--tekst);
  font: 14px/1.2 var(--letter);
  user-select: none; -webkit-user-select: none;
}
.topbalk .topnaam {
  font-weight: 700; font-size: 21px; white-space: nowrap; color: transparent;
  background: linear-gradient(90deg, var(--k-vent), var(--k-tv), var(--k-kelder)); -webkit-background-clip: text; background-clip: text;
}
.topbalk .topdeel { color: var(--zacht); font-size: 15px; white-space: nowrap; }
.topinfo { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1 1 auto; font-size: 15px; }
.topinfo span {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; white-space: nowrap;
  background: var(--knop); border: 1px solid var(--knop-rand); font-variant-numeric: tabular-nums;
}
.topinfo small { color: var(--zacht); font-size: 14px; }
.paginas {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--rand); border-radius: 10px;
}
.paginas a, .paginas .thema {
  color: var(--zacht); text-decoration: none; padding: 8px 14px; border-radius: 8px; white-space: nowrap;
  font: inherit; font-size: 15px; line-height: 1.2; background: none; border: 0; cursor: pointer;
}
.paginas a:hover, .paginas .thema:hover { color: var(--tekst); }
.paginas a.aan { background: var(--knop-hover); color: var(--tekst); }
@media (max-width: 760px) {
  .topbalk { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .paginas { margin-left: 0; width: 100%; justify-content: space-between; order: 3; }
  .paginas a, .paginas .thema { padding: 8px 4px; flex: 1 1 0; min-width: 0; text-align: center; font-size: 14px; }
  .topinfo { font-size: 14px; flex-wrap: nowrap; overflow-x: auto; flex-basis: 100%; scrollbar-width: none; }
  .topinfo::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------- bouwstenen */
.knop { padding: 10px 16px; border-radius: 8px; cursor: pointer; background: var(--knop); border: 1px solid var(--knop-rand); }
.knop:hover { background: var(--knop-hover); }
.knop.primair { background: var(--primair); border-color: var(--primair-rand); color: var(--primair-tekst); }
.knop.aan { background: var(--actief-bg); border-color: var(--accent); }
.melding { padding: 10px 14px; border-radius: 10px; background: var(--let-bg); border: 1px solid var(--let-rand); color: var(--let-tekst); }
.kleur {
  background: linear-gradient(135deg, color-mix(in srgb, var(--k) 17%, var(--kaart)), var(--kaart) 75%);
  border-color: color-mix(in srgb, var(--k) 38%, var(--rand));
}
.chip {
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .6em; margin-right: .5em; flex: none;
  background: color-mix(in srgb, var(--k) 24%, transparent); font-size: .95em; vertical-align: middle;
}
.voortgang { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--k) 18%, var(--knop)); overflow: hidden; }
.voortgang i { display: block; height: 100%; border-radius: 4px; background: var(--k); }

/* Leesbaarheid: toelichtende tekst is nooit kleiner dan 14 px en een alinea uitleg niet breder dan ongeveer 75 tekens.
   "Tekst groot" (per apparaat, knop Aa in de bovenbalk; bedoeld voor de wandtablet) vergroot de hele inhoud. */
p.uitleg { max-width: 75ch; }
html.groot main { zoom: 1.2; }
.paginas .letter { font: inherit; font-size: 15px; line-height: 1.2; background: none; border: 0; cursor: pointer; color: var(--zacht); padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
html.groot .paginas .letter { color: var(--tekst); font-weight: 600; }

/* Tabbladen van Beheer (ook boven de pagina Licht, die zich als tabblad van Beheer gedraagt). */
/* De rij blijft bovenaan staan bij het schuiven. Geen eigen vlakke achtergrond (die tekent zich als een blok af tegen
   het kleurverloop van de pagina): wat eronderdoor schuift wordt wazig gemaakt. */
.tabs { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; background: transparent;
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabs button { flex: 1 1 auto; white-space: nowrap; min-height: 42px; padding: 8px 10px; border-radius: 8px; text-align: center; cursor: pointer; background: var(--knop); border: 1px solid var(--knop-rand); color: var(--zacht); }
.tabs button.aan { background: color-mix(in srgb, var(--k) 26%, var(--kaart)); border-color: var(--k); color: var(--tekst); }

/* Formulieren (Beheer en Licht). Velden staan in een raster; elk veld beslaat vier rijen daarvan (naam, invoervak,
   uitleg, terug-knop). Daardoor staan in één rij alle namen en alle invoervakken op dezelfde hoogte, ook als een naam
   over twee regels loopt of er onder één veld uitleg verschijnt. Invoervakken en keuzelijsten zijn even hoog. */
.velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 14px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--zacht); min-width: 0; }
label.vink { flex-direction: row; align-items: center; gap: 8px; color: var(--tekst); }
.velden > label { padding-bottom: 12px; justify-content: flex-end; }
.velden > label.vink { justify-content: flex-start; align-self: end; min-height: 40px; }
@supports (grid-template-rows: subgrid) {
  .velden > label { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; justify-content: stretch; }
  .velden > label:not(.vink) { grid-template-columns: minmax(0, 1fr); align-items: end; }
  .velden > label:not(.vink) > :is(input, select) { margin-top: 4px; }
  .velden > label:not(.vink) > :is(.hulp, .terug) { margin-top: 4px; align-self: start; justify-self: start; }
  /* Een vinkje staat op de rij van de invoervakken: de lege eerste rij (::before) is de plek van de veldnaam. */
  .velden > label.vink { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; align-self: stretch; min-height: 0; }
  .velden > label.vink::before { content: ""; grid-column: 1 / -1; }
  .velden > label.vink > input { margin: 15px 0 11px; }
}
input:not([type=checkbox]):not([type=range]), select {
  box-sizing: border-box; height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--knop-rand);
  background: var(--knop); min-width: 0; width: 100%; font: inherit; color: var(--tekst);
}
input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

/* Instellingen (Beheer en Licht): de uitleg verschijnt bij het veld dat je aanraakt; een waarde die afwijkt van de
   standaard krijgt een gekleurde rand en een knopje om terug te gaan. */
label .hulp { display: none; font-size: 14px; line-height: 1.35; color: var(--zacht); }
label:focus-within .hulp { display: block; }
label.afwijkend > input, label.afwijkend > select { border-color: var(--accent); }
.terug { align-self: flex-start; padding: 3px 9px; font-size: 14px; border-radius: 6px; cursor: pointer; color: var(--zacht); background: none; border: 1px solid var(--knop-rand); }
.terug:hover { color: var(--tekst); background: var(--knop-hover); }
details.meer { margin-top: 10px; }
details.meer > summary { cursor: pointer; color: var(--zacht); font-size: 14px; padding: 6px 0; }
details.meer > .velden { margin-top: 6px; }

/* Vraagvenster (vervangt de ingebouwde browservensters, die in kiosk-apps soms stil worden onderdrukt). */
dialog.vraag {
  background: var(--kaart); color: var(--tekst); border: 1px solid var(--rand); border-radius: 12px;
  padding: 20px; max-width: min(440px, 90vw); font: 16px/1.4 var(--letter);
}
dialog.vraag::backdrop { background: rgba(0,0,0,.6); }
dialog.vraag p { margin: 0 0 14px; }
dialog.vraag input { width: 100%; margin-bottom: 14px; font: inherit; }
dialog.vraag .knoppen { display: flex; justify-content: flex-end; gap: 8px; }
dialog.vraag .knoppen button {
  font: inherit; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  color: var(--tekst); background: var(--knop); border: 1px solid var(--knop-rand);
}
dialog.vraag .knoppen .primair { background: var(--primair); border-color: var(--primair-rand); color: var(--primair-tekst); }