/* ──────────────────────────────────────────────────────────────
   Login-look voor de HUB (leerkrachten/team), in lijn met de mooiere
   leerling-login. Op zichzelf staand: raakt account.css (hub-tegels,
   tabellen, overige accountpagina's) niet. Fonts komen uit /fonts/fonts.css.
   ────────────────────────────────────────────────────────────── */

:root {
  --sk-bg:        #eef0ef;   /* koel grijs (als de landing), geen warm crème-zand */
  --sk-primary:   #222222;
  --sk-secondary: #444444;
  --sk-blue:      #4a6fa5;
  --sk-sand:      #fcfcfc;
  --sk-border:    #e6e1d5;
  --sk-radius:    6px;
  --paper-grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
  /* PCH-letterkleuren, gelijk aan het leerling-logo */
  --neon-groen:   #4cd636;
  --neon-roze:    #f23ccf;
  --neon-blauw:   #3cd0d6;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Source Sans 3', Arial, sans-serif;
  background: var(--sk-bg);
  color: var(--sk-primary);
  font-size: 15px;
  line-height: 1.5;
}

/* Kale, verticaal gecentreerde pagina (net als de leerling-login) */
.kale-pagina { padding: 0; }
main {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
}

/* ── PCH HUB-logo (tekst/CSS, geen afbeelding) ── */
.mw-logo-groot { text-align: center; margin: 0 0 24px; }
.mw-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  font-size: 34px;
}
.mw-logo-pch span { margin-right: 3px; }
.mw-logo-pch .l-p { color: var(--neon-groen); }
.mw-logo-pch .l-c { color: var(--neon-roze); }
.mw-logo-pch .l-h { color: var(--neon-blauw); }
/* "HUB" in effen donker, net als het woord "Maatwerk" bij de leerling-login. */
.mw-logo-woord { margin-left: 9px; letter-spacing: 1px; color: var(--sk-primary); }

/* ── Kaart ── */
.kaart {
  background-color: var(--sk-sand);
  background-image: var(--paper-grain);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--sk-primary);
  margin-bottom: 2px;
}
.sub { color: var(--sk-secondary); margin-bottom: 4px; }

/* ── Formulier ── */
label {
  display: block;
  margin: 14px 0 4px;
  font-weight: 600;
  font-size: 14px;
  color: var(--sk-secondary);
}
input[type=email],
input[type=password],
input[type=text] {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--sk-border);
  border-radius: var(--sk-radius);
  background: #fff;
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size: 15px;
  color: var(--sk-primary);
  transition: border-color .15s;
}
input:focus { outline: none; border-color: var(--sk-blue); }

button {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 18px;
  background: var(--sk-blue);
  color: #fff;
  border: none;
  border-radius: var(--sk-radius);
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
button:hover { background: var(--sk-primary); }

/* ── Meldingen ── */
.melding-fout {
  background: #fbeaea;
  border: 1px solid #e2b3b3;
  color: #7a2222;
  padding: 10px 16px;
  border-radius: var(--sk-radius);
  margin-bottom: 16px;
  font-size: 14px;
}
.melding-ok {
  background: #eaf4ec;
  border: 1px solid #b6d9bd;
  color: #1e4d28;
  padding: 10px 16px;
  border-radius: var(--sk-radius);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.melding-letop {
  background: #fcf4e2;
  border: 1px solid #ecdaae;
  color: #8a6d2f;
  padding: 10px 16px;
  border-radius: var(--sk-radius);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* Link-als-knop (bijv. "Wachtwoord instellen" na setup) */
.knop {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 18px;
  background: var(--sk-blue);
  color: #fff;
  border: none;
  border-radius: var(--sk-radius);
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.knop:hover { background: var(--sk-primary); }

code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  background: #f0eee7;
  border: 1px solid var(--sk-border);
  border-radius: 4px;
  padding: 1px 5px;
  word-break: break-all;
}

/* ── Onderregel (wachtwoord vergeten) ── */
.onder {
  text-align: center;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--sk-border);
  font-size: 0.88rem;
}
.onder a { color: var(--sk-secondary); text-decoration: none; }
.onder a:hover { text-decoration: underline; }