/* De stijl van het inlogscherm van RecruFone.
 *
 * Alles staat achter de wortelklasse .rf-login, die de pagina zelf zet
 * (app/login/recrufone-login.tsx). Zonder die klasse doet dit bestand niets, en
 * dat is de hele reden dat het een eigen stylesheet is: /login is één route voor
 * twee merken, en een regel die per ongeluk buiten de wortel valt verschuift het
 * inlogscherm van Bellen zonder dat iemand het merkt.
 * app/(app)/_stijl/recrufone-scope.test.ts bewaakt dat, voor dit bestand en voor
 * portaal.css ernaast.
 *
 * WAAROM NAAST portaal.css EN NIET ERIN. Het portaal is 100 KB stijl voor een
 * schil met een zijbalk, een topbalk en twintig schermen. Het inlogscherm is een
 * kaart op een donker vlak, en het is het enige scherm dat iemand ziet vóórdat
 * hij klant is: dat mag niet wachten op de stylesheet van het hele portaal.
 * Andersom hoort het portaal de donkere paginaregels hieronder niet te kennen.
 *
 * WAAROM IN public/ EN NIET ALS css-import. Dezelfde reden als bij portaal.css:
 * Next bundelt een css-import van een component in de css van de route waar hij
 * onder hangt, en /login is de route van allebei de merken. Bellen zou deze
 * regels dan meeladen. Als bestand in public/ hangt hij aan één `<link>` in de
 * RecruFone-tak, met de inhoud als versie erachter (loginCssHref in
 * app/(app)/_stijl/stylesheet.ts).
 *
 * De keerzijde is dezelfde: er gaat geen build-stap overheen, dus hier staan
 * alleen eigenschappen die elke browser van de laatste jaren zonder voorvoegsel
 * kent.
 */

/* --- De letter ------------------------------------------------------------ */

/* DM Sans staat niet hier maar in fonts.css ernaast, dat dit scherm als tweede
 * `<link>` meebrengt (zie recrufone-login.tsx). De @font-face stond tot
 * 9 september 2026 in dit bestand én in portaal.css, en dat mocht zolang het er
 * twee waren; met de aanmeldroute erbij zijn het er drie en is dat de plek waar
 * een verschil ontstaat dat niemand zoekt. Zie de kop van fonts.css. */

/* --- Het donkere vlak ----------------------------------------------------- */

.rf-login {
  --rf-font: "RecruFone DM Sans", ui-sans-serif, system-ui, sans-serif;
  --rf-ink: #15171c;
  --rf-muted: #72767f;
  --rf-line: #e7e8ed;
  --rf-blue: #4d65d8;
  --rf-focus: #7898ee;
  /* De diepe kleur van de site (#08090b) en de zijbalk (#101113) liggen dicht
     bij elkaar; hiertussenin oogt het rustigst naast een witte kaart. */
  --rf-diep: #080b11;
  /* De koele gloed van de site, één keer en zacht: dit is een inlogscherm en
     geen hero. */
  --rf-gloed: #16323b;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background:
    radial-gradient(ellipse 120% 62% at 50% -18%, var(--rf-gloed) 0%, transparent 58%),
    var(--rf-diep);
  color: #f7f8fb;
  font-family: var(--rf-font);
  font-size: 14px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* De root-layout zet de body op wit. Zonder deze regel schijnt dat wit door bij
   het doorveren aan de boven- of onderkant, en op een telefoon is dat precies
   het eerste wat je ziet. Dezelfde aanpak als op de site (site.css), en om
   dezelfde reden buiten de wortel: de body kán geen afstammeling van de wortel
   zijn. `:has(.rf-login)` houdt hem wél bij dit ene scherm. */
body:has(.rf-login) {
  background: #080b11;
  color-scheme: dark;
}

.rf-login *,
.rf-login *::before,
.rf-login *::after {
  box-sizing: border-box;
}

.rf-login :is(button, input) {
  font: inherit;
  color: inherit;
}
.rf-login button {
  cursor: pointer;
  background: none;
  border: 0;
}
.rf-login button:disabled {
  cursor: default;
}
.rf-login a {
  color: inherit;
  text-decoration: none;
}
.rf-login :is(a, button, input):focus-visible {
  outline: 3px solid var(--rf-focus);
  outline-offset: 3px;
}

/* --- De kop: woordmerk en ondertitel -------------------------------------- */

.rf-login .rf-login-kolom {
  width: 100%;
  max-width: 400px;
}

.rf-login .rf-login-kop {
  margin-bottom: 26px;
}

/* Het witte woordmerk, op de hoogte van een regel en niet op zijn eigen maat:
   het bestand is 1489 breed omdat het ook in de zijbalk en in een mail moet
   kunnen. `height` en `width: auto` houden de verhouding, en de maten op de img
   in de HTML houden de plek vrij zodat de tekst eronder niet verspringt. */
.rf-login .rf-login-merk {
  display: inline-block;
  position: relative;
}
/* Het woordmerk is 31 pixels hoog (op een telefoon 27) en dat is de link ook.
   Hoger tekenen zou de ondertitel eronder wegduwen, dus groeit alleen het
   raakvlak: een onzichtbare rand eromheen brengt het op 45. */
.rf-login .rf-login-merk::after {
  content: "";
  position: absolute;
  inset: -9px -6px;
}
.rf-login .rf-login-merk img {
  display: block;
  height: 31px;
  width: auto;
}

.rf-login .rf-login-onder {
  margin: 13px 0 0;
  max-width: 330px;
  color: #a4a8b1;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* --- De witte kaart ------------------------------------------------------- */

.rf-login .rf-login-kaart {
  background: #fff;
  color: var(--rf-ink);
  border: 1px solid var(--rf-line);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow:
    0 1px 2px #00000030,
    0 22px 48px -18px #00000075;
}

/* Binnen de kaart is de focusring blauw op wit; de ring van de pagina hierboven
   staat op een donker vlak en zou hier verdrinken in de rand. */
.rf-login .rf-login-kaart :is(a, button, input):focus-visible {
  outline: 3px solid var(--rf-focus);
  outline-offset: 2px;
}

.rf-login .rf-login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* De regel voor wie via de nummerkiezer binnenkwam: hij meldt zich niet aan,
   hij maakt een account bij een nummer dat al klaarstaat. */
.rf-login .rf-login-intro {
  margin: 0;
  color: var(--rf-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* --- Het veld ------------------------------------------------------------- */

/* Een label om het veld heen, zodat de klik op de tekst het veld aanspringt en
   een schermlezer de twee als één ding voorleest. `for` staat er ook op; dat is
   dubbel maar niet schadelijk, en het houdt de koppeling zichtbaar in de HTML. */
.rf-login .rf-login-veld {
  display: block;
}
.rf-login .rf-login-veld > span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 550;
  color: var(--rf-ink);
}
.rf-login .rf-login-veld input {
  width: 100%;
  background: #fff;
  border: 1px solid #dfe1e7;
  border-radius: 10px;
  padding: 11px 13px;
  /* 16px en niet kleiner, ook op een groot scherm: een iPhone zoomt in op een
     veld met een kleinere letter zodra je erin tikt, en dan staat het halve
     scherm scheef. Dit is het enige veld op de pagina, dus die ene maat mag. */
  font-size: 16px;
  color: var(--rf-ink);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.rf-login .rf-login-veld input::placeholder {
  color: #a3a7b2;
}
.rf-login .rf-login-veld input:hover {
  border-color: #cfd3dc;
}
/* De blauwe ring van het portaal, hier als schaduw en niet als outline.
   Een tekstveld matcht in elke browser ook met de muis op :focus-visible, dus
   de harde ring van hierboven zou hier altíjd staan, ook bij het aanklikken.
   Deze zachte ring is even goed te zien (4px, en de rand verkleurt mee) en
   hoort bij de vorm van het veld; hij vervangt de outline dus, en dat mag
   alleen omdat er iets voor in de plaats komt. */
.rf-login .rf-login-veld input:focus {
  outline: none;
  border-color: var(--rf-blue);
  box-shadow: 0 0 0 4px #4d65d83b;
}

/* --- De knop -------------------------------------------------------------- */

.rf-login .rf-login-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--rf-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition:
    background 0.15s,
    transform 0.15s;
}
.rf-login .rf-login-knop:hover:not(:disabled) {
  background: #32353c;
}
.rf-login .rf-login-knop:active:not(:disabled) {
  transform: translateY(1px);
}
.rf-login .rf-login-knop:disabled {
  opacity: 0.45;
}

/* --- De regels onder de knop ---------------------------------------------- */

.rf-login .rf-login-onderregel,
.rf-login .rf-login-juridisch {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
}
.rf-login .rf-login-onderregel {
  color: var(--rf-muted);
}
.rf-login .rf-login-juridisch {
  color: #9195a1;
}
.rf-login .rf-login-juridisch a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rf-login .rf-login-juridisch a:hover {
  color: var(--rf-ink);
}

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

/* Dezelfde twee tinten als de badges van het portaal: warning voor een link die
   verlopen is (er is niets stuk, vraag een nieuwe aan) en de foutkleur voor een
   verzending die echt misging. */
.rf-login .rf-login-melding {
  margin: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.rf-login .rf-login-let-op {
  background: #fff4e6;
  border: 1px solid #f4dcba;
  color: #8a5a1a;
}
/* Duidelijk roder dan de melding hierboven. Ze kunnen tegelijk in beeld staan
   (een verlopen link, en daarna een verzending die misgaat), en twee banden die
   op elkaar lijken lees je als één melding die twee keer staat. */
.rf-login .rf-login-mis {
  background: #fdecec;
  border: 1px solid #f2cccc;
  color: #a33a33;
}

/* --- De staat "verzonden" ------------------------------------------------- */

.rf-login .rf-login-klaar {
  text-align: center;
}
/* De mint van het portaal, het enige accent op dit scherm. */
.rf-login .rf-login-vink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #aaf4dc;
  color: #14513c;
}
.rf-login .rf-login-titel {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rf-ink);
}
.rf-login .rf-login-uitleg {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rf-muted);
}
.rf-login .rf-login-uitleg strong {
  font-weight: 600;
  color: var(--rf-ink);
}
.rf-login .rf-login-tekstknop {
  /* De ruimte boven de knop zat in de marge en zit nu grotendeels in de
     binnenmarge: dezelfde witruimte, maar nu telt hij mee voor de duim. Zonder
     dat is de regel 29 pixels hoog. */
  margin-top: 10px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 550;
  color: var(--rf-blue);
}
.rf-login .rf-login-tekstknop:hover {
  color: #3a4fb5;
}

/* --- Terug naar de website ------------------------------------------------ */

.rf-login .rf-login-terug {
  /* Krappere marge dan de 22 die hier stond: de link eronder brengt zijn eigen
     hoogte mee, en samen komt het op dezelfde afstand tot de kaart. */
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
  color: #8b909b;
}
/* Eén regel van 17 pixels is te weinig om op te mikken. Onder de kaart is ruimte
   zat, dus mag de link zelf 44 hoog zijn. */
.rf-login .rf-login-terug a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
}
.rf-login .rf-login-terug a:hover {
  color: #f7f8fb;
}

/* --- Op een telefoon ------------------------------------------------------ */

/* Bovenaan in plaats van in het midden: op een klein scherm met het toetsenbord
   open is "gecentreerd" een kaart die halverwege het beeld hangt. */
@media (max-width: 520px) {
  .rf-login {
    align-items: flex-start;
    padding: 40px 18px 32px;
  }
  .rf-login .rf-login-merk img {
    height: 27px;
  }
  .rf-login .rf-login-onder {
    font-size: 13px;
  }
  .rf-login .rf-login-kaart {
    padding: 22px 18px;
    border-radius: 14px;
  }
}

/* Wie zijn systeem op minder beweging heeft staan, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  .rf-login :is(.rf-login-knop, .rf-login-veld input) {
    transition: none;
  }
  .rf-login .rf-login-knop:active:not(:disabled) {
    transform: none;
  }
}

/* --- Het uitnodigingsscherm ----------------------------------------------- */

/* Dezelfde kaart op hetzelfde donkere vlak, maar zonder formulier: een collega
   die op de link in zijn uitnodigingsmail klikt (app/uitnodiging/bevestigen).
   Alles wat dat scherm nodig heeft staat hierboven al; dit zijn de twee plekken
   waar de ruimte anders valt, omdat er geen `.rf-login-form` met zijn gap
   omheen staat.

   De klassen dragen hun eigen naam en niet die van het formulier: de melding
   "je werkt nu in een ander bedrijf" en de regel "hoor je hier niet bij" staan
   alleen op dat scherm, en een marge op .rf-login-let-op zou de melding over een
   verlopen inloglink een regel laten opschuiven. */
.rf-login .rf-uitnodiging-let {
  margin-top: 14px;
}
.rf-login .rf-uitnodiging-slot {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  color: var(--rf-muted);
}
.rf-login .rf-uitnodiging-knop {
  margin-top: 18px;
}