/* KCC Acquisitie, richting 1 "De Centrale".
   Het dashboard als moderne telefooncentrale-werkpost: donkere console
   bovenin met drie lijntoetsen, licht werkvlak, forse tactiele knoppen.
   Signatuur: het lijnlampje, de teller als lampvenster dat op de
   actieve lijn oplicht (statisch, geen puls). */

/* Fonts (Chivo + Chivo Mono) laden via <link> met preconnect in de templates,
   niet via @import: dat blokkeert het renderen van een dagelijks werkscherm. */

:root {
  --groen-diep: #06231d;
  --groen-console: #0b3d31;
  --groen-rand: #2a6f58;
  --mint: #1fce8f;
  --groen-knop: #17c183;
  --groen-knop-rand: #0e7a54;
  --salie: #f0f4f2;
  --inkt: #14181d;
  --grijsgroen: #4c565f;
  --kaart-rand: #d9e2de;
  --stil: #e9efec;
  --stil-rand: #b9c7c1;
  --rood: #d92d34;
  --rood-licht: #fdecec;
  --lamp-uit: #041712;
  --lamp-uit-tekst: #7f9c92;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  background: var(--salie);
  color: var(--inkt);
  font-size: 17px;
  line-height: 1.5;
}

/* ============ Console: de topbalk ============ */

.topbalk {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--groen-diep);
  background-image: linear-gradient(180deg, #0a352b, var(--groen-diep) 85%);
  color: #fff;
  padding: 16px 24px;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--mint);
}

.merk {
  font-family: "Figtree", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.topbalk nav {
  display: flex;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}

/* Lijntoetsen: elke tab is een lijn op de centrale */
.topbalk nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #d7e6df;
  text-decoration: none;
  font-family: "Figtree", "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 12px 18px;
  background: var(--groen-console);
  border: 1px solid var(--groen-rand);
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.1s ease;
}

.topbalk nav a:hover {
  border-color: var(--mint);
  color: #fff;
}

.topbalk nav a:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* De actieve lijn staat vergrendeld ingedrukt */
.topbalk nav a.actief {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  border-color: var(--mint);
  color: #fff;
}

/* Signatuur: het lijnlampje. De teller als lampvenster in de toets;
   dof glas op rustende lijnen, mint verlicht op de actieve lijn. */
.teller {
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 14px;
  min-width: 30px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--lamp-uit);
  color: var(--lamp-uit-tekst);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

.topbalk nav a.actief .teller {
  background: var(--mint);
  color: var(--groen-diep);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5),
              0 0 12px rgba(31, 206, 143, 0.55);
}

/* Hulpknop: rond lampje naast Uitloggen */
.hulp {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--groen-console);
  border: 1px solid var(--groen-rand);
  color: #d7e6df;
  text-decoration: none;
  font-family: "Figtree", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  font-size: 18px;
}

.hulp:hover, .hulp-actief {
  border-color: var(--mint);
  color: #fff;
}

.uitloggen {
  color: #8fb0a4;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

.uitloggen:hover { color: #fff; }

/* ============ Werkvlak ============ */

main {
  max-width: 880px;
  margin: 28px auto 90px;
  padding: 0 18px;
}

.kaart {
  background: #fff;
  border: 1px solid var(--kaart-rand);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 0 rgba(6, 35, 29, 0.06);
}

.kaart-kop {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.kaart-kop h2 {
  font-family: "Figtree", "Hanken Grotesk", sans-serif;
  font-size: clamp(26px, 4.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.plaats {
  color: var(--grijsgroen);
  font-size: 16px;
}

/* Het bewijsstuk: de vacature als gemarkeerd blok, zelfde tinten als de
   hint-pil in de mail, met een groene bewijslat links. */
.aanleiding-bron {
  margin: 10px 0;
  padding: 10px 14px;
  background: #e3f5ee;
  border: 1px solid #b5e3d1;
  border-left: 5px solid var(--groen-knop);
  border-radius: 8px;
}

.aanleiding-bron a {
  color: #0b4a3f;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.sinds { color: #a24a12; font-weight: 700; }

.signalen {
  margin: 10px 0 10px 22px;
  color: var(--grijsgroen);
}

.signalen li::marker { color: var(--groen-knop); }

.status-regel {
  color: var(--grijsgroen);
  margin: 4px 0;
}

/* Bellijst: de lijn staat open, groen randsignaal links */
.kaart-bellen { border-left: 6px solid var(--groen-knop); }

.tijdvak-pil {
  font-family: "Chivo Mono", ui-monospace, monospace;
  background: var(--mint);
  color: var(--groen-diep);
  font-weight: 700;
  font-size: 15px;
  padding: 5px 13px;
  border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5),
              0 0 10px rgba(31, 206, 143, 0.35);
}

/* Afgehandeld: gedempt met expliciete kleuren, geen opacity (die drukt
   de tekst onder AA-contrast). */
.kaart-klaar {
  background: #f7faf8;
  border-color: #e2e8e5;
}
.kaart-klaar h2, .kaart-klaar .status-regel { color: var(--grijsgroen); }

.sectiekop {
  margin: 36px 0 14px;
  padding-top: 20px;
  border-top: 2px solid var(--kaart-rand);
  font-family: "Figtree", "Hanken Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--grijsgroen);
}

.leeg {
  text-align: center;
  color: var(--grijsgroen);
  padding: 70px 0;
  font-size: 19px;
}

.melding.fout {
  background: var(--rood-licht);
  border: 2px solid var(--rood);
  color: #a12227;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-weight: 700;
}

/* ============ Uitlegpagina ============ */

.uitleg-kop {
  font-family: "Figtree", "Hanken Grotesk", sans-serif;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 10px;
}

.uitleg-tekst { line-height: 1.6; }

.uitleg-lijst { display: grid; gap: 6px 18px; grid-template-columns: max-content 1fr; align-items: start; }
.uitleg-lijst dt { margin: 6px 0; }
.uitleg-lijst dd { margin: 6px 0 14px; line-height: 1.6; }

/* De knop-voorbeelden op de uitlegpagina zijn plaatjes, geen echte knoppen */
.uitleg-knop { cursor: default; pointer-events: none; box-shadow: none; display: inline-block; }

@media (max-width: 680px) {
  .uitleg-lijst { grid-template-columns: 1fr; }
  .uitleg-lijst dd { margin-top: 0; }
}

/* ============ Formulieren ============ */

.bewerkvorm {
  margin: 16px 0;
  display: grid;
  gap: 12px;
}

.bewerkvorm label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--grijsgroen);
}

.bewerkvorm input,
.bewerkvorm textarea {
  width: 100%;
  font-size: 17px;
  color: var(--inkt);
  padding: 12px;
  border: 2px solid #a9bab3;
  border-radius: 9px;
  margin-top: 5px;
  font-family: inherit;
  background: #fff;
}

.bewerkvorm input:hover,
.bewerkvorm textarea:hover { border-color: var(--groen-rand); }

.bewerkvorm .rij {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.bewerkvorm .rij label {
  flex: 1;
  min-width: 200px;
}

/* ============ Toetsen: tactiel, fors, met indruk-fysica ============ */

button,
.knop-stil,
.knop-groen,
.knop-gevaar {
  font-family: "Figtree", "Hanken Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 10px;
  border: 1px solid var(--stil-rand);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  background: var(--stil);
  color: var(--inkt);
  box-shadow: 0 3px 0 var(--stil-rand);
  transition: transform 0.06s ease, box-shadow 0.06s ease, background-color 0.1s ease;
}

button:hover,
.knop-stil:hover { background: #f4f7f5; }

button:active,
.knop-stil:active,
.knop-groen:active,
.knop-gevaar:active {
  transform: translateY(3px);
  box-shadow: none;
}

.knop-groen {
  background: var(--groen-knop);
  color: var(--groen-diep);
  border: 1px solid var(--groen-knop-rand);
  box-shadow: 0 3px 0 var(--groen-knop-rand);
}

.knop-groen:hover { background: var(--mint); }

.knop-gevaar {
  background: #fff;
  border: 2px solid var(--rood);
  color: var(--rood);
  padding: 12px 21px;
  box-shadow: 0 3px 0 #e5b3b5;
}

.knop-gevaar:hover { background: var(--rood-licht); }

.acties {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

.acties form { margin: 0; }

/* ============ Focus, altijd zichtbaar ============ */

:focus-visible {
  outline: 3px solid var(--groen-diep);
  outline-offset: 2px;
}

/* Mint-focus alleen op de donkere console; op de witte loginkaart geldt
   de donkergroene outline (mint op wit haalt de 3:1 niet). */
.topbalk :focus-visible {
  outline-color: var(--mint);
}

.bewerkvorm input:focus-visible,
.bewerkvorm textarea:focus-visible {
  outline: 3px solid var(--groen-diep);
  outline-offset: 0;
  border-color: var(--groen-diep);
}

/* ============ Login: de nachtstand van de centrale ============ */

.loginpagina {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--groen-diep);
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.4px 1.4px at 30% 62%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.3px 1.3px at 90% 58%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 18% 88%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(55% 45% at 50% -5%, rgba(31, 206, 143, 0.3), transparent 70%),
    linear-gradient(170deg, #0b3d31, var(--groen-diep) 75%);
}

.loginkaart {
  background: #fff;
  padding: 40px;
  border-radius: 18px;
  display: grid;
  gap: 16px;
  width: min(380px, 92vw);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.loginkaart .merk {
  color: var(--groen-diep);
  text-align: center;
  font-size: 18px;
}

.loginkaart input {
  font-size: 18px;
  padding: 14px;
  border: 2px solid #a9bab3;
  border-radius: 9px;
  font-family: inherit;
}

.loginkaart button {
  background: var(--groen-knop);
  color: var(--groen-diep);
  font-size: 18px;
  border: 1px solid var(--groen-knop-rand);
  box-shadow: 0 3px 0 var(--groen-knop-rand);
}

.loginkaart button:hover { background: var(--mint); }

.fout { color: var(--rood); font-weight: 700; }

/* ============ Mobiel ============ */

@media (max-width: 680px) {
  .topbalk { padding: 12px 14px; gap: 12px; }
  .topbalk nav { order: 3; width: 100%; flex: none; }
  .topbalk nav a {
    flex: 1;
    justify-content: center;
    padding: 12px 8px;
    font-size: 15px;
    gap: 7px;
  }
  main { margin-top: 20px; }
  .kaart { padding: 18px 16px; }
  .acties { gap: 8px; }
  button, .knop-stil, .knop-groen, .knop-gevaar {
    font-size: 16px;
    padding: 12px 16px;
  }
}

/* ============ Rust voor wie dat wil ============ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  /* Ook het indruk-verspringen uit; de schaduwwissel toont de klik al. */
  .topbalk nav a:active,
  button:active, .knop-stil:active, .knop-groen:active, .knop-gevaar:active {
    transform: none;
  }
}