/* ==========================================================================
   Qcontrolz huisstijl
   https://qcontrolz.nl/huisstijl/huisstijl.css

   Eén bron voor alle openbare schermen van Qcontrolz: kleuren, lettertypen,
   de merkvlakken voor de zwevende lijnen, de loginlayout (links het blauwe
   merkvlak met logo en kop, rechts de loginkaart) en de startpagina (volledig
   blauw met witte blokken). De login van het Prijsbeheer en de startpagina van
   qcontrolz.nl gebruiken deze klassen zelf. Alles heeft het voorvoegsel
   `qc-` of `--qc-`; er staan hier geen regels op losse elementen, zodat dit
   bestand naast de eigen stijlen van een toepassing kan laden.

   Beschrijving en voorbeeld: https://qcontrolz.nl/huisstijl/LEESMIJ.md
   ========================================================================== */

/* ---------- Lettertypen ---------------------------------------------------
   Relatief aan dit bestand, dus altijd van qcontrolz.nl/fonts/ — ook als een
   ander project dit bestand laadt. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
}

/* ---------- Kleuren en maten ------------------------------------------- */

:root {
  --qc-merk: #0062a3;
  --qc-merk-diep: #004e8f;
  --qc-merk-licht: #2493ea;
  --qc-merk-nacht: #013659;
  --qc-merk-vlak: #e6eff9;
  --qc-accent: #f77800;
  --qc-accent-diep: #9a4a00;

  /* Zwevende lijnen */
  --qc-lijnen-punt: #4b6f8c;
  --qc-lijnen-lijn: #6b9fc7;
  --qc-lijnen-amber: #e8c07a;

  --qc-canvas: #eef3f8;
  --qc-vlak: #ffffff;
  --qc-lijn: #e2e8f0;
  --qc-inkt: #0f172a;
  --qc-inkt-zacht: #475569;
  --qc-inkt-zachter: #64748b;
  --qc-fout: #b3261e;
  --qc-fout-vlak: #fef2f2;

  --qc-letter: "Montserrat", ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;
  --qc-letter-cijfers: "Roboto", ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;

  --qc-radius-mini: 8px;
  --qc-radius-klein: 12px;
  --qc-radius-groot: 20px;
  --qc-schaduw: 0 18px 44px -22px rgb(15 23 42 / 0.38);
  --qc-ring: 0 0 0 3px rgb(0 98 163 / 0.28);
  --qc-soepel: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Merkvlakken ---------------------------------------------------
   De ondergrond voor de zwevende lijnen. Licht: bijna wit met een zweem
   blauwgrijs, van linksboven naar rechtsonder. Donker: het merkblauw met een
   warme gloed laag in de hoek. Zet op hetzelfde element
   data-zwevende-lijnen="licht" of ="donker". */

.qc-vlak-licht {
  background: linear-gradient(135deg, #fbfcfe 0%, #f1f5f9 48%, #e3ebf2 100%);
  color: var(--qc-inkt);
}

.qc-vlak-donker {
  background:
    radial-gradient(120% 90% at 8% 108%, rgb(247 120 0 / 0.34), transparent 62%),
    linear-gradient(158deg, var(--qc-merk-licht) -18%, var(--qc-merk) 34%, var(--qc-merk-nacht) 100%);
  color: #ffffff;
}

/* ---------- Logo ---------------------------------------------------------- */

.qc-logo {
  display: block;
  width: clamp(126px, 12vw, 154px);
  height: auto;
}

/* Het gekleurde logo op een donker vlak: op een wit plaatje. */
.qc-logovlak {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 11px 15px;
  border-radius: var(--qc-radius-klein);
  background: #ffffff;
  box-shadow:
    0 1px 2px rgb(1 33 56 / 0.22),
    0 10px 24px rgb(1 33 56 / 0.26);
}

/* ---------- Raster --------------------------------------------------------
   Het fijne raster over het blauwe merkvlak: textuur zonder afbeelding, die
   naar de onderrand toe uitdooft. Als los element in het vlak:
   <div class="qc-raster" aria-hidden="true"></div>. De inhoud van het vlak
   krijgt `position: relative`, zodat die boven het raster staat. */

.qc-raster {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgb(255 255 255 / 0.14) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.14) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(88% 72% at 74% 6%, #000 12%, transparent 82%);
  pointer-events: none;
}

/* ---------- Loginlayout ---------------------------------------------------
   De standaard voor elk loginscherm op qcontrolz.nl, gelijk aan de login van
   het Prijsbeheer. Twee vlakken naast elkaar: links het blauwe merkvlak
   (logo-kaart, productnaam, kop en uitleg onderaan) met de witte zwevende
   lijnen, rechts de lichte grond met de terug-link en de witte loginkaart.
   Onder 860px staat alles onder elkaar en krimpt het merkvlak tot een band met
   alleen het logo en de productnaam. Voorbeeld: /huisstijl/login-voorbeeld.html */

.qc-login,
.qc-login *,
.qc-start,
.qc-start * {
  box-sizing: border-box;
}

.qc-login {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--qc-canvas);
  font-family: var(--qc-letter);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--qc-inkt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links: zet er ook `qc-vlak-donker` en data-zwevende-lijnen="donker" op. */
.qc-login__merkvlak {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px clamp(28px, 4.5vw, 60px);
  overflow: hidden;
  color: #ffffff;
}

.qc-login__merk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Een haarlijn tussen het logo en de productnaam, zodat twee namen naast
   elkaar niet als één woordmerk lezen. */
.qc-login__merknaam {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  border-left: 1px solid rgb(255 255 255 / 0.26);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
}

.qc-login__merknaam small {
  font-family: var(--qc-letter-cijfers);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}

/* Kop en uitleg hangen onderaan, boven de voetregel. */
.qc-login__pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  max-width: 30ch;
}

.qc-login__leus {
  margin: 0;
  font-size: clamp(23px, 2.6vw, 29px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.qc-login__uitleg {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.8);
}

.qc-login__voet {
  position: relative;
  margin: 0;
  font-family: var(--qc-letter-cijfers);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.58);
}

/* Rechts: de lichte grond, zonder lijnen. De kaart staat links uitgelijnd in
   zijn helft, dicht bij het merkvlak. */
.qc-login__vlak {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
  padding: 32px clamp(24px, 5vw, 76px);
  background:
    radial-gradient(86% 62% at 12% 0%, var(--qc-vlak) 0%, transparent 68%),
    var(--qc-canvas);
}

.qc-login__terug {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 500;
  color: var(--qc-merk-diep);
  text-decoration: none;
  border-radius: var(--qc-radius-mini);
}

.qc-login__terug:hover {
  text-decoration: underline;
}

.qc-login__terug:focus-visible {
  outline: none;
  box-shadow: var(--qc-ring);
}

/* ---------- Loginkaart (ook de stijl van de blokken op de startpagina) --- */

.qc-loginkaart,
.qc-blok {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(392px, 100%);
  padding: clamp(24px, 3vw, 34px);
  background: var(--qc-vlak);
  border: 1px solid var(--qc-lijn);
  border-radius: var(--qc-radius-groot);
  box-shadow: var(--qc-schaduw);
  color: var(--qc-inkt);
}

.qc-loginkaart__kop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Het slot-icoon naast de titel (lucide "lock-keyhole", 17px). */
.qc-loginkaart__slot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--qc-radius-mini);
  background: var(--qc-merk-vlak);
  color: var(--qc-merk-diep);
}

.qc-loginkaart__titel {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--qc-inkt);
}

.qc-loginkaart__onder {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--qc-inkt-zachter);
}

.qc-loginkaart__veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--qc-inkt-zacht);
}

.qc-loginkaart__veld > label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--qc-inkt-zacht);
}

.qc-loginkaart__invoer {
  width: 100%;
  margin: 0;
  padding: 11px 13px;
  font: inherit;
  font-size: 14.5px;
  letter-spacing: inherit;
  color: var(--qc-inkt);
  background: var(--qc-vlak);
  border: 1px solid #cbd5e1;
  border-radius: var(--qc-radius-klein);
  transition:
    border-color 150ms var(--qc-soepel),
    box-shadow 150ms var(--qc-soepel);
}

.qc-loginkaart__invoer:focus-visible {
  outline: none;
  border-color: var(--qc-merk);
  box-shadow: var(--qc-ring);
}

/* Het wachtwoordveld met de oog-knop erin. */
.qc-loginkaart__geheim {
  position: relative;
  display: block;
}

.qc-loginkaart__geheim .qc-loginkaart__invoer {
  padding-right: 44px;
}

.qc-loginkaart__oog {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--qc-radius-mini);
  color: var(--qc-inkt-zachter);
  cursor: pointer;
  transition:
    color 120ms var(--qc-soepel),
    background-color 120ms var(--qc-soepel);
}

.qc-loginkaart__oog:hover:not(:disabled) {
  background: #f1f5f9;
  color: var(--qc-inkt);
}

.qc-loginkaart__oog:focus-visible {
  outline: none;
  box-shadow: var(--qc-ring);
}

.qc-loginkaart__oog:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.qc-loginkaart__hint {
  font-size: 12px;
  color: var(--qc-accent-diep);
}

.qc-loginkaart__fout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 15px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--qc-fout);
  background: var(--qc-fout-vlak);
  border: 1px solid rgb(195 55 42 / 0.28);
  border-radius: var(--qc-radius-klein);
}

.qc-loginkaart__fout code {
  font-family: var(--qc-letter-cijfers);
  font-weight: 600;
  white-space: nowrap;
}

/* De knop: volle breedte, merkblauw. Ook als link (<a>) te gebruiken. */
.qc-loginkaart__knop,
.qc-blok__knop {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  appearance: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: inherit;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: var(--qc-merk);
  border: 1px solid var(--qc-merk);
  border-radius: var(--qc-radius-klein);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  cursor: pointer;
  transition:
    background-color 150ms var(--qc-soepel),
    border-color 150ms var(--qc-soepel),
    transform 150ms var(--qc-soepel),
    box-shadow 150ms var(--qc-soepel);
}

.qc-loginkaart__knop:hover:not(:disabled),
.qc-blok__knop:hover {
  background: var(--qc-merk-diep);
  border-color: var(--qc-merk-diep);
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.04),
    0 10px 28px -16px rgb(15 23 42 / 0.3);
}

.qc-loginkaart__knop:active:not(:disabled),
.qc-blok__knop:active {
  transform: translateY(0);
  box-shadow: none;
}

.qc-loginkaart__knop:focus-visible,
.qc-blok__knop:focus-visible {
  outline: none;
  box-shadow: var(--qc-ring);
}

.qc-loginkaart__knop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* De voettekst onder de knop, met een scheidingslijn erboven. */
.qc-loginkaart__slotregel {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--qc-lijn);
  font-size: 12px;
  line-height: 1.55;
  color: var(--qc-inkt-zachter);
}

/* ---------- Startpagina ---------------------------------------------------
   Volledig blauw: het merkvlak van de login over de hele pagina (zet er ook
   `qc-vlak-donker` en data-zwevende-lijnen="donker" op, met een `qc-raster`
   erin), de logo-kaart linksboven en een wit blok per onderwerp in de stijl
   van de loginkaart. */

.qc-start {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px clamp(28px, 4.5vw, 60px) 32px;
  overflow: hidden;
  font-family: var(--qc-letter);
  font-size: 14.5px;
  line-height: 1.55;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

.qc-start__balk,
.qc-start__inhoud,
.qc-start__voet {
  position: relative;
}

.qc-start__inhoud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  margin: auto 0;
}

.qc-start__kop {
  text-align: center;
}

.qc-start__titel {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.qc-start__intro {
  margin: 12px 0 0;
  font-size: 17px;
  color: rgb(255 255 255 / 0.84);
}

.qc-start__blokken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  width: min(808px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qc-blok {
  width: auto;
}

/* In een blok staat alleen de titel naast het slot, dus op één lijn. */
.qc-blok .qc-loginkaart__kop {
  align-items: center;
}

.qc-blok__omschrijving {
  flex: 1;
  margin: 0;
  font-size: 14.5px;
  color: var(--qc-inkt-zacht);
}

.qc-start__voet {
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: rgb(255 255 255 / 0.72);
}

/* ---------- Opkomst ------------------------------------------------------
   Eén beweging bij het laden; uit bij prefers-reduced-motion. */

@keyframes qcOpkomst {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qc-login__merk,
.qc-login__pitch,
.qc-login__voet,
.qc-login__terug,
.qc-loginkaart,
.qc-start__kop,
.qc-blok {
  animation: qcOpkomst 420ms var(--qc-soepel) both;
}

.qc-login__merk {
  animation-delay: 40ms;
}
.qc-login__terug,
.qc-loginkaart,
.qc-blok {
  animation-delay: 90ms;
}
.qc-blok:nth-child(2) {
  animation-delay: 160ms;
}
.qc-login__pitch {
  animation-delay: 150ms;
}
.qc-login__voet {
  animation-delay: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  .qc-login__merk,
  .qc-login__pitch,
  .qc-login__voet,
  .qc-login__terug,
  .qc-loginkaart,
  .qc-start__kop,
  .qc-blok {
    animation: none;
  }

  .qc-loginkaart__knop,
  .qc-blok__knop {
    transition: none;
  }
}

/* ---------- Smal venster (onder 860px) ---------------------------------- */

@media (max-width: 859px) {
  .qc-login {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .qc-login__merkvlak {
    gap: 16px;
    padding: 24px clamp(16px, 3vw, 34px);
  }

  /* Logo, haarlijn en naam blijven op één regel, ook op 320px. */
  .qc-logovlak {
    padding: 9px 12px;
  }

  .qc-logo {
    width: 112px;
  }

  .qc-login__pitch,
  .qc-login__voet {
    display: none;
  }

  .qc-login__vlak {
    justify-content: flex-start;
    align-items: center;
    padding: 24px clamp(16px, 3vw, 34px) 48px;
  }

  .qc-login__terug {
    align-self: center;
    width: min(420px, 100%);
  }

  .qc-loginkaart {
    width: min(420px, 100%);
    box-shadow:
      0 1px 2px rgb(15 23 42 / 0.04),
      0 10px 28px -16px rgb(15 23 42 / 0.3);
  }

  .qc-start {
    gap: 24px;
    padding: 24px clamp(16px, 3vw, 34px);
  }

  .qc-start__inhoud {
    margin: 16px 0 auto;
    gap: 24px;
  }

  .qc-start__blokken {
    grid-template-columns: minmax(0, 1fr);
    width: min(420px, 100%);
  }
}