/* VYRA — Editorportaal
   De app is licht en rustig; het portaal volgt diezelfde lijn, met de donkere
   zijbalk als enige merkmoment. Lime is het accent, nooit de achtergrond van
   een heel vlak. */

@font-face {
  font-family: Archivo;
  src: url("fonts/Archivo.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: IBMPlexMono;
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: IBMPlexMono;
  src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #0B0C0E;
  --surface: #16181B;
  --steel: #83888E;
  --lime: #E5FB52;
  --canvas: #F2F2F0;
  --wit: #FFFFFF;
  --rand: #E5E5E1;
  --tekst: #14161A;
  --gedempt: #60656B;
  --subtiel: #9AA0A6;
  --rood: #C23B32;
  --rood-vlak: #FDF3F2;
  --rood-rand: #F3D6D3;
  --ui: Archivo, "Segoe UI", -apple-system, system-ui, sans-serif;
  --mono: IBMPlexMono, ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

/* Moet vóór alles gaan. De browser verbergt een element met `hidden` via
 * `[hidden] { display: none }`, maar dat is een attribuutselector — en die
 * verliest van elke class-regel met een eigen `display`. Zonder deze regel
 * bleef `.inlogscherm` (grid) en `.portaal` (flex) gewoon staan, ook na
 * `hidden = true`: je logde in, maar het scherm wisselde niet. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--ui);
  color: var(--tekst);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.woordmerk {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--lime);
}

/* ── Inloggen ─────────────────────────────────────────────────────────── */

.inlogscherm {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--ink);
  padding: 24px;
}

.inlogkaart {
  width: 100%;
  max-width: 380px;
}

.inlogkaart h1 {
  margin: 22px 0 4px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #F1F0EA;
}

.inlogkaart .onder {
  margin: 0 0 26px;
  color: var(--steel);
  font-size: 14px;
}

.veld { display: block; margin-bottom: 14px; }

.veld > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

.veld input {
  width: 100%;
  padding: 12px 13px;
  border-radius: 9px;
  border: 1px solid #2A2D31;
  background: var(--surface);
  color: #F1F0EA;
  font-size: 15px;
}

.veld input:focus { outline: 2px solid var(--lime); outline-offset: 1px; }

.veld-licht > span { color: var(--gedempt); }

.veld-licht input {
  background: var(--wit);
  border: 1px solid var(--rand);
  color: var(--tekst);
}

/* ── Zijbalk ──────────────────────────────────────────────────────────── */

.portaal { display: flex; min-height: 100vh; }

.zijbalk {
  width: 255px;
  flex: 0 0 255px;
  background: var(--ink);
  padding: 26px 18px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.zijmerk { margin: 0 8px 30px; font-size: 21px; }

.menu { display: flex; flex-direction: column; gap: 4px; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #D6D8DA;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.menu-item svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-item:hover { background: #16181B; }

.menu-item.is-actief { background: #191C20; color: var(--lime); }

.gebruiker { margin-top: auto; position: relative; }

.gebruiker-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #24272B;
  border-radius: 10px;
  background: var(--surface);
  color: #F1F0EA;
  font-size: 15px;
  font-weight: 600;
}

.stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  flex: 0 0 8px;
}

.gebruiker-chip .chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  fill: none;
  stroke: var(--steel);
  stroke-width: 2;
  stroke-linecap: round;
}

.gebruiker-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid #24272B;
  border-radius: 10px;
  padding: 6px;
}

.gebruiker-menu button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #F1F0EA;
  font-size: 14px;
  text-align: left;
}

.gebruiker-menu button:hover { background: #22262A; }

/* ── Hoofdgebied ──────────────────────────────────────────────────────── */

.hoofd { flex: 1; padding: 26px 32px 60px; min-width: 0; }

.scherm-kop { margin-bottom: 18px; }
.scherm-kop h1 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.scherm-kop .onder { margin: 5px 0 0; color: var(--gedempt); font-size: 14px; }

.tabbalk { display: flex; gap: 10px; margin-bottom: 20px; }

.tab {
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gedempt);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tab.is-actief { background: var(--ink); color: var(--wit); }

.kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 24px 26px;
}

.kaart-kop {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.kop-verderop { margin-top: 30px; }

.kaart-onder { margin: 4px 0 18px; color: var(--gedempt); font-size: 14px; }

.leeg { color: var(--subtiel); font-size: 15px; padding: 10px 0 4px; }

.labelklein {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gedempt);
}

.waarde { margin: 5px 0 20px; font-size: 15px; font-weight: 600; }

/* ── Werk: de klussen ─────────────────────────────────────────────────── */

.lijst { display: flex; flex-direction: column; gap: 14px; }

.klus {
  border: 1px solid var(--rand);
  border-radius: 11px;
  padding: 18px 20px;
}

.klus-kop { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }

.klus-titel { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.klus-meta { margin: 4px 0 0; font-family: var(--mono); font-size: 12px; color: var(--gedempt); }

.klok {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  background: #F4F4F2;
  color: var(--gedempt);
  white-space: nowrap;
}

.klok.krap { background: #FFF6E0; color: #9A6B00; }
.klok.over { background: var(--rood-vlak); color: var(--rood); }

.shots { margin: 16px 0 0; border-top: 1px solid var(--rand); }

.shot {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rand);
}

.shot-nr {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gedempt);
  flex: 0 0 92px;
  padding-top: 2px;
}

.shot-tekst { flex: 1; min-width: 0; }
.shot-beeld { margin: 0; font-size: 14px; }
.shot-zegt { margin: 4px 0 0; font-size: 14px; font-style: italic; color: var(--gedempt); }

.shot-download {
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 2px solid var(--lime);
  white-space: nowrap;
  padding-bottom: 1px;
}

.shot-download.ontbreekt { color: var(--rood); border-bottom-color: var(--rood-rand); }

.aanlever { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.bestandsveld {
  flex: 1;
  min-width: 220px;
  padding: 11px 13px;
  border: 1px dashed var(--rand);
  border-radius: 9px;
  font-size: 14px;
  background: #FAFAF9;
}

.voortgang {
  height: 4px;
  border-radius: 999px;
  background: var(--rand);
  overflow: hidden;
  margin-top: 12px;
}

.voortgang > i { display: block; height: 100%; background: var(--lime); width: 0; transition: width 0.2s; }

.paginering { display: flex; justify-content: flex-end; gap: 6px; margin-top: 18px; }

.paginering button {
  min-width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: #F4F4F2;
  color: var(--gedempt);
  font-size: 13px;
  font-weight: 600;
}

.paginering button.is-actief { background: var(--ink); color: var(--wit); }
.paginering button:disabled { opacity: 0.4; cursor: default; }

/* ── Aanbod ───────────────────────────────────────────────────────────── */

.rij-kop { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.rij-kop-tweede { margin-top: 34px; }
.rij-tekst { min-width: 0; }
.rij-titel { margin: 0; font-size: 15px; font-weight: 800; }
.rij-onder { margin: 2px 0 0; color: var(--gedempt); font-size: 14px; }

.merkje {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.merkje-ink { background: var(--ink); color: var(--wit); }
.merkje-lime { background: var(--lime); color: var(--ink); }

.filters { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.filter {
  padding: 7px 13px;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--wit);
  color: var(--gedempt);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.filter.is-actief { background: var(--lime); border-color: var(--lime); color: var(--ink); }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.raster-eerste { grid-template-columns: minmax(250px, 300px); }

.klusje {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.klusje-beeld {
  aspect-ratio: 1 / 1;
  background: var(--ink);
  display: grid;
  place-items: center;
}

.klusje-beeld svg { width: 46%; height: 46%; fill: none; stroke: var(--lime); stroke-width: 1.4; }

.klusje-body { padding: 16px 16px 18px; text-align: center; }

.klusje-titel { margin: 0 0 3px; font-size: 16px; font-weight: 700; }

.klusje-sub { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; color: var(--subtiel); }

.klusje-stats { display: flex; justify-content: space-around; gap: 8px; margin-bottom: 15px; }

.klusje-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.klusje-stat svg { width: 19px; height: 19px; fill: none; stroke: var(--tekst); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.klusje-stat span { font-family: var(--mono); font-size: 11px; font-style: italic; color: var(--gedempt); }

/* ── Inkomsten ────────────────────────────────────────────────────────── */

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }

.tegel {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 20px 22px;
}

.tegel span { display: block; font-size: 14px; color: var(--gedempt); margin-bottom: 8px; }
.tegel strong { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }

.melding {
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 22px;
}

.melding-lime { background: #F7FDD6; border: 1px solid #E2F09A; color: #4A5211; }

.tabel-omhulsel { overflow-x: auto; }

.tabel { width: 100%; border-collapse: collapse; min-width: 560px; }

.tabel th {
  background: var(--lime);
  color: var(--ink);
  text-align: left;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.tabel th:first-child { border-radius: 8px 0 0 8px; }
.tabel th:last-child { border-radius: 0 8px 8px 0; }

.tabel td { padding: 14px; border-bottom: 1px solid var(--rand); font-size: 14px; }

.tabel td.leeg { text-align: center; color: var(--subtiel); padding: 26px 14px; }

.vinkje {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  background: #F4F4F2;
  color: var(--gedempt);
}

.vinkje.klaar { background: #EDF7E4; color: #3D6B21; }
.vinkje.bezig { background: #FFF6E0; color: #9A6B00; }

/* ── Profiel ──────────────────────────────────────────────────────────── */

.statrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 16px 0 6px; }

.stat { border: 1px solid var(--rand); border-radius: 10px; padding: 15px 17px; }
.stat span { display: block; font-size: 13px; color: var(--gedempt); margin-bottom: 5px; }
.stat strong { font-size: 21px; font-weight: 800; }

.knoprij { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ── Knoppen en meldingen ─────────────────────────────────────────────── */

.knop {
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.knop:disabled { opacity: 0.5; cursor: default; }
.knop-ink { background: var(--ink); color: var(--wit); }
.knop-lime { background: var(--lime); color: var(--ink); }
.knop-leeg { background: transparent; border: 1px solid var(--rand); color: var(--tekst); }
.knop-klein { padding: 9px 18px; font-size: 13px; }
.breed { width: 100%; }

.foutmelding {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--rood-vlak);
  border: 1px solid var(--rood-rand);
  color: var(--rood);
  font-size: 13px;
}

.foutmelding.goed { background: #F7FDD6; border-color: #E2F09A; color: #4A5211; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--wit);
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 50;
  max-width: 90vw;
}

/* ── Smalle schermen ──────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .portaal { flex-direction: column; }
  .zijbalk { width: 100%; flex: none; height: auto; position: static; padding: 16px; }
  .zijmerk { margin-bottom: 16px; }
  .menu { flex-direction: row; overflow-x: auto; }
  .menu-item { width: auto; white-space: nowrap; }
  .gebruiker { margin-top: 14px; }
  .gebruiker-menu { bottom: auto; top: calc(100% + 8px); }
  .hoofd { padding: 20px 16px 50px; }
}

/* Voor wie je monteert. Staat los boven de technische regel, want dat is het
   eerste wat een editor wil weten. */
.klus-voor {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gedempt);
}