/*
 * RespoVest — één stijl voor de inlog, het tegeloverzicht en het beheer.
 *
 * Geen framework en geen bouwstap: dit bestand wordt zoals het is uitgeserveerd.
 * Voor een handvol pagina's is dat sneller dan Tailwind erbij halen, en het
 * scheelt een node_modules in de container.
 *
 * Alle kleuren staan als variabele op :root en worden in de donkere variant
 * opnieuw gezet. Nergens een kleur die alleen binnen een media-query bestaat.
 */

/* ------------------------------------------------------------------ tokens --- */

:root {
  color-scheme: light dark;

  --grond:        #f2f2f7;   /* de systeemgrijzen van iOS */
  --vlak:         rgba(255, 255, 255, 0.72);
  --vlak-vast:    #ffffff;
  --rand:         rgba(0, 0, 0, 0.08);
  --rand-sterk:   rgba(0, 0, 0, 0.14);
  --tekst:        #1c1c1e;
  --tekst-zacht:  #6b6b70;
  --tekst-flauw:  #9a9aa0;
  --accent:       #0071e3;
  --accent-diep:  #0058b0;
  --accent-waas:  rgba(0, 113, 227, 0.14);
  --rood:         #d93b30;
  --groen:        #17864a;
  --oranje:       #b25a00;

  --schaduw-laag: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --schaduw-mid:  0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10);
  --schaduw-hoog: 0 8px 20px rgba(0,0,0,.10), 0 28px 60px rgba(0,0,0,.16);

  --rond:      14px;
  --rond-groot: 22px;
  --rond-tegel: 26px;

  /* De veer waar alles op beweegt. Eén curve voor de hele app houdt het rustig. */
  --veer: cubic-bezier(.22, 1, .36, 1);

  --breed: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --grond:       #000000;
    --vlak:        rgba(28, 28, 30, 0.72);
    --vlak-vast:   #1c1c1e;
    --rand:        rgba(255, 255, 255, 0.10);
    --rand-sterk:  rgba(255, 255, 255, 0.18);
    --tekst:       #f5f5f7;
    --tekst-zacht: #a1a1a6;
    --tekst-flauw: #6e6e73;
    --accent:      #0a84ff;
    --accent-diep: #409cff;
    --accent-waas: rgba(10, 132, 255, 0.20);
    --rood:        #ff6961;
    --groen:       #32d977;
    --oranje:      #ff9f0a;
    --schaduw-laag: 0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.34);
    --schaduw-mid:  0 2px 6px rgba(0,0,0,.36), 0 12px 32px rgba(0,0,0,.46);
    --schaduw-hoog: 0 8px 20px rgba(0,0,0,.44), 0 28px 60px rgba(0,0,0,.58);
  }
}

/* -------------------------------------------------------------------- basis --- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--grond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Twee heel zachte lichtvlekken achter de pagina. Geeft diepte zonder dat er
   een "achtergrondplaatje" op zit dat bij elke schermmaat anders uitpakt. */
body::before {
  content: "";
  position: fixed;
  inset: -30vh -10vw auto;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 22% 12%, rgba(0, 113, 227, .16), transparent 62%),
    radial-gradient(38vw 38vw at 82% 4%, rgba(175, 82, 222, .13), transparent 60%);
  filter: blur(18px);
}

h1, h2, h3 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               Inter, system-ui, sans-serif;
  font-weight: 640;
  letter-spacing: -0.021em;
  line-height: 1.15;
}
h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.zacht  { color: var(--tekst-zacht); }
.flauw  { color: var(--tekst-flauw); font-size: .875rem; }
.midden { text-align: center; }

/* ------------------------------------------------------------------ knoppen --- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  min-height: 46px;
  border: 0;
  border-radius: 980px;              /* pil, zoals de knoppen van Apple */
  font: inherit;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  transition: transform .22s var(--veer), background .18s ease, box-shadow .22s var(--veer), opacity .18s;
}
.knop:hover   { background: var(--accent-diep); transform: translateY(-1px); box-shadow: var(--schaduw-laag); }
.knop:active  { transform: translateY(0) scale(.985); }
.knop:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.knop.breed   { width: 100%; }

.knop.stil {
  color: var(--tekst);
  background: color-mix(in srgb, var(--tekst) 8%, transparent);
}
.knop.stil:hover { background: color-mix(in srgb, var(--tekst) 14%, transparent); }

.knop.gevaar { background: var(--rood); }
.knop.gevaar:hover { background: color-mix(in srgb, var(--rood) 82%, black); }

.knop.klein { padding: .45rem .9rem; min-height: 34px; font-size: .875rem; }

/* --------------------------------------------------------------- formulier --- */

.veld { margin-bottom: 1rem; text-align: left; }
.veld label {
  display: block;
  margin-bottom: .4rem;
  font-size: .8125rem;
  font-weight: 560;
  color: var(--tekst-zacht);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], select, textarea {
  width: 100%;
  padding: .78rem .95rem;
  font: inherit;
  color: var(--tekst);
  background: var(--vlak-vast);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--rond);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-waas);
}
input::placeholder { color: var(--tekst-flauw); }

/* Het codeveld: zes cijfers, ruim uit elkaar en in een vaste breedte. */
.codeveld {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 1.9rem;
  font-weight: 560;
  text-align: center;
  letter-spacing: .55em;
  text-indent: .55em;               /* compenseert de spatie ná het laatste cijfer */
  padding: .9rem .5rem;
}

/* ------------------------------------------------------------------ kaarten --- */

.kaart {
  background: var(--vlak);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--rand);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-mid);
}

/* --------------------------------------------------------------- inlogvel --- */

.inlogvel {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1.25rem;
}
.inlogkaart {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 2.25rem 2rem;
  text-align: center;
  animation: opkomen .5s var(--veer) both;
}
@keyframes opkomen {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.merk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  margin-bottom: 1.1rem;
  font-size: 1.7rem;
  border-radius: 19px;
  color: #fff;
  background: linear-gradient(145deg, #0a84ff, #5e5ce6 55%, #bf5af2);
  box-shadow: 0 8px 22px rgba(10, 132, 255, .34);
}

/* ----------------------------------------------------------------- meldingen --- */

.melding {
  display: none;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  font-size: .9rem;
  text-align: left;
  border-radius: var(--rond);
  border: 1px solid transparent;
}
.melding.zichtbaar { display: block; animation: opkomen .3s var(--veer) both; }
.melding.fout { color: var(--rood);   background: color-mix(in srgb, var(--rood) 12%, transparent);
                border-color: color-mix(in srgb, var(--rood) 28%, transparent); }
.melding.goed { color: var(--groen);  background: color-mix(in srgb, var(--groen) 12%, transparent);
                border-color: color-mix(in srgb, var(--groen) 28%, transparent); }
.melding.let  { color: var(--oranje); background: color-mix(in srgb, var(--oranje) 12%, transparent);
                border-color: color-mix(in srgb, var(--oranje) 30%, transparent); }

/* -------------------------------------------------------------------- balk --- */

.balk {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--grond) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rand);
}
.balk-inhoud {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--breed);
  margin: 0 auto;
  padding: .7rem 1.5rem;
}
.balk-merk {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 620; letter-spacing: -.015em; color: var(--tekst);
}
.balk-merk:hover { text-decoration: none; }
.balk-merk .vierkant {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px; font-size: .9rem;
  background: linear-gradient(145deg, #0a84ff, #5e5ce6 55%, #bf5af2);
  color: #fff;
}
.balk nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.balk nav a {
  padding: .4rem .8rem; border-radius: 980px;
  font-size: .9rem; font-weight: 520; color: var(--tekst-zacht);
  transition: background .16s ease, color .16s ease;
}
.balk nav a:hover  { background: color-mix(in srgb, var(--tekst) 8%, transparent);
                     color: var(--tekst); text-decoration: none; }
.balk nav a.hier   { background: var(--accent-waas); color: var(--accent); }

.blad { max-width: var(--breed); margin: 0 auto; padding: 2.25rem 1.5rem 4rem; }
.kop  { margin-bottom: 1.75rem; }
.kop p { margin: .35rem 0 0; color: var(--tekst-zacht); }

/* ------------------------------------------------------------------- tegels --- */

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 1.1rem;
}

.tegel {
  position: relative;
  display: block;
  padding: 1.4rem;
  color: var(--tekst);
  background: var(--vlak);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--rand);
  border-radius: var(--rond-tegel);
  box-shadow: var(--schaduw-laag);
  overflow: hidden;
  isolation: isolate;
  transition: transform .34s var(--veer), box-shadow .34s var(--veer), border-color .34s var(--veer);
  animation: tegelop .5s var(--veer) both;
  animation-delay: var(--vertraging, 0s);
}
.tegel:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: var(--schaduw-hoog);
  border-color: var(--rand-sterk);
  text-decoration: none;
}
.tegel:active { transform: translateY(-1px) scale(.997); }

@keyframes tegelop {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* De kleur van de app als heel zacht schijnsel achter de tegel. */
.tegel::before {
  content: "";
  position: absolute;
  inset: -40% 40% 55% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--van), transparent 72%);
  opacity: .20;
  transition: opacity .34s var(--veer), transform .34s var(--veer);
}
.tegel:hover::before { opacity: .34; transform: scale(1.15); }

.tegel-icoon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: .95rem;
  font-size: 1.5rem;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--van), var(--tot));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--van) 40%, transparent);
  transition: transform .34s var(--veer);
}
.tegel:hover .tegel-icoon { transform: scale(1.06) rotate(-2.5deg); }

.tegel h3 { margin-bottom: .25rem; }
.tegel p  { margin: 0; font-size: .875rem; color: var(--tekst-zacht); }

.tegel-pijl {
  position: absolute;
  top: 1.5rem; right: 1.4rem;
  color: var(--tekst-flauw);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .28s var(--veer), transform .28s var(--veer);
}
.tegel:hover .tegel-pijl { opacity: 1; transform: none; }

.tegel-merk {
  display: inline-block;
  margin-top: .7rem;
  padding: .1rem .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  background: color-mix(in srgb, var(--tekst) 8%, transparent);
  border-radius: 980px;
}

/* ----------------------------------------------------------- tegels kiezen --- */

/* Buiten de kies-modus bestaat een weggeklikte tegel domweg niet, en is er ook
   geen oogje of uitleg te zien. Zo blijft het hoofdscherm precies zo rustig als
   het bedoeld was. */
.tegel-doos { position: relative; }
body:not(.kiesmodus) .tegel-doos.is-verborgen { display: none; }
body:not(.kiesmodus) .tegel-oog,
body:not(.kiesmodus) .kiesuitleg { display: none; }

.kiesuitleg {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 1.1rem;
  font-size: .875rem;
}

/* In de kies-modus opent een tegel niet meer, dus hoort hij zich ook niet als
   een link te gedragen: geen hand, geen optillen bij hover. */
body.kiesmodus .tegel { cursor: pointer; }
body.kiesmodus .tegel:hover { transform: none; box-shadow: var(--schaduw-laag); }
body.kiesmodus .tegel-pijl { display: none; }
body.kiesmodus .tegel-doos.is-verborgen .tegel { opacity: .42; filter: grayscale(.7); }
body.kiesmodus .tegel-doos.bezig { opacity: .6; pointer-events: none; }

.tegel-oog {
  position: absolute;
  top: 1.4rem; right: 1.3rem;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  color: var(--tekst-zacht);
  background: color-mix(in srgb, var(--tekst) 8%, transparent);
  border: 1px solid var(--rand);
  border-radius: 980px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.tegel-doos:hover .tegel-oog { color: var(--tekst); }
.tegel-doos.is-verborgen .tegel-oog { color: var(--tekst-flauw); }

/* --------------------------------------------------------------------- leeg --- */

.leeg {
  padding: 3.5rem 2rem;
  text-align: center;
  color: var(--tekst-zacht);
}
.leeg .groot { font-size: 2.6rem; margin-bottom: .75rem; }

/* ------------------------------------------------------------------- tabel --- */

.tabelvak {
  overflow-x: auto;                  /* brede tabellen scrollen in zichzelf */
  border-radius: var(--rond-groot);
  border: 1px solid var(--rand);
  background: var(--vlak);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: var(--schaduw-laag);
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .7rem .85rem; text-align: left; white-space: nowrap; }
th {
  position: sticky; top: 0;
  font-size: .75rem; font-weight: 620; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tekst-zacht);
  background: color-mix(in srgb, var(--grond) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
}
tbody tr { border-top: 1px solid var(--rand); }
tbody tr:first-child { border-top: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--tekst) 3.5%, transparent); }
td.naamcel { white-space: normal; min-width: 190px; }
td.midden, th.midden { text-align: center; }

/* De matrix: de app-kolommen mogen smal zijn, de vinkjes gecentreerd.
   Geen hoofdletters hier — "AAT COMPANY OS" breekt dan over drie regels. */
th.appkolom {
  text-align: center;
  min-width: 104px;
  white-space: normal;
  font-size: .75rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: -.005em;
}
th.appkolom .icoontje { display: block; font-size: 1.1rem; margin-bottom: .2rem; }

/* Bij veel apps wordt de tabel breder dan het scherm en gaat hij schuiven.
   De naamkolom links en de knopkolom rechts blijven dan staan, zodat je altijd
   ziet wiens rij je omzet en de knop nooit half buiten beeld valt. */
th.vast-links, td.vast-links {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--vlak-vast);
  box-shadow: 1px 0 0 var(--rand);
}
th.vast-links { z-index: 4; background: color-mix(in srgb, var(--grond) 96%, transparent); }

th.vast-rechts, td.vast-rechts {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--vlak-vast);
  box-shadow: -1px 0 0 var(--rand);
}
th.vast-rechts { z-index: 4; background: color-mix(in srgb, var(--grond) 96%, transparent); }

/* De hover-kleur van de rij moet ook onder de vastgezette cellen door lopen,
   anders lijken die twee kolommen bij het aanwijzen los te staan. */
tbody tr:hover td.vast-links,
tbody tr:hover td.vast-rechts {
  background: color-mix(in srgb, var(--tekst) 3.5%, var(--vlak-vast));
}

/* --------------------------------------------------------------- schakelaar --- */

/* Vinkje in de matrix. Een echte checkbox eronder, zodat toetsenbord en
   schermlezer gewoon blijven werken. */
.schakel { position: relative; display: inline-block; width: 44px; height: 26px; vertical-align: middle; }
.schakel input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.schakel .baan {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--tekst) 18%, transparent);
  border-radius: 980px;
  transition: background .26s var(--veer);
}
.schakel .baan::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .26s var(--veer);
}
.schakel input:checked + .baan { background: var(--groen); }
.schakel input:checked + .baan::after { transform: translateX(18px); }
.schakel input:focus-visible + .baan { box-shadow: 0 0 0 4px var(--accent-waas); }
.schakel input:disabled + .baan { opacity: .4; }
.schakel.bezig .baan { opacity: .55; }

/* ------------------------------------------------------------------- merkje --- */

.merkje {
  display: inline-block;
  padding: .15rem .55rem;
  font-size: .75rem; font-weight: 560;
  border-radius: 980px;
  background: color-mix(in srgb, var(--tekst) 8%, transparent);
  color: var(--tekst-zacht);
}
.merkje.goed { background: color-mix(in srgb, var(--groen) 16%, transparent); color: var(--groen); }
.merkje.let  { background: color-mix(in srgb, var(--oranje) 16%, transparent); color: var(--oranje); }
.merkje.fout { background: color-mix(in srgb, var(--rood) 16%, transparent); color: var(--rood); }
.merkje.blauw{ background: var(--accent-waas); color: var(--accent); }

/* -------------------------------------------------------------------- rijen --- */

.rij { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rij.eind { justify-content: flex-end; }
.uitelkaar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.vak { padding: 1.5rem; margin-bottom: 1.5rem; }
.vak h2 { margin-bottom: .3rem; }

/* --------------------------------------------------------------- dialoogje --- */

dialog {
  width: min(460px, calc(100vw - 2.5rem));
  padding: 1.75rem;
  color: var(--tekst);
  background: var(--vlak-vast);
  border: 1px solid var(--rand);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-hoog);
}
dialog::backdrop { background: rgba(0,0,0,.42); backdrop-filter: blur(4px); }
dialog[open] { animation: opkomen .3s var(--veer) both; }

/* ------------------------------------------------------------------ qr-code --- */

.qrvak {
  display: inline-block;
  padding: 1rem;
  background: #fff;                  /* een QR moet wit blijven, ook in het donker */
  border-radius: var(--rond);
  box-shadow: var(--schaduw-laag);
}
.qrvak svg { display: block; width: 190px; height: 190px; }

.geheim {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
  letter-spacing: .08em;
  word-break: break-all;
  padding: .65rem .85rem;
  background: color-mix(in srgb, var(--tekst) 6%, transparent);
  border-radius: var(--rond);
}

.codelijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
  margin: 1rem 0;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}
.codelijst span {
  padding: .55rem;
  text-align: center;
  background: color-mix(in srgb, var(--tekst) 6%, transparent);
  border-radius: 10px;
}

/* ------------------------------------------------------------------ stappen --- */

.stappen { display: flex; gap: .4rem; justify-content: center; margin-bottom: 1.5rem; }
.stappen i {
  width: 26px; height: 4px; border-radius: 980px;
  background: color-mix(in srgb, var(--tekst) 14%, transparent);
  transition: background .3s var(--veer);
}
.stappen i.nu { background: var(--accent); }

/* ------------------------------------------------------------------ smaller --- */

@media (max-width: 640px) {
  .blad { padding: 1.5rem 1rem 3rem; }
  .balk-inhoud { padding: .6rem 1rem; }
  .inlogkaart { padding: 2rem 1.5rem 1.75rem; }
  .tegels { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
}

/* Wie beweging liever kwijt is, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}