/* kaatvbo – bovenbalk (logo, modulenaam, gebruikersmenu) en de loginpagina.
   Bouwt voort op css/style.css (zelfde variabelen, knoppen en afrondingen; licht en donker).
   Staat in dit bestand (en niet in platform.css) omdat de loginpagina zonder login dezelfde bovenbalk toont. */

/* ---------- bovenbalk: kaatvbo-logo + modulenaam (.merk.kop-merk in .kop-binnen) ---------- */

.kop-merk { gap: 12px; }
.kop-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 6px; }
.kop-logo { display: block; height: 28px; width: auto; }
.kop-module {
  padding-left: 12px;
  border-left: 1.5px solid var(--lijn);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .kop-logo { height: 24px; }
  /* Met modulenaam ernaast: alleen het beeldmerk (de zeshoek) tonen, zodat naam en menu op één rij passen. */
  .kop-merk:has(.kop-module) .kop-logo { width: 24px; object-fit: cover; object-position: left center; }
  .kop-module { padding-left: 10px; }
}

/* ---------- gebruikersmenu (#gebruiker-menu in .kop-binnen) ---------- */

.gebruiker-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.gebruiker-menu:empty { display: none; }

.gm-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  min-width: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--lijn);
  border-radius: 9px;
  background: var(--oppervlak);
  color: var(--inkt);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.gm-knop:hover { border-color: var(--kobalt); color: var(--kobalt-tekst); }
.gm-knop[aria-current="page"] { background: var(--kobalt-zacht); border-color: color-mix(in srgb, var(--kobalt) 45%, transparent); color: var(--kobalt-tekst); }
.gm-knop:disabled { opacity: 0.6; cursor: progress; }

.gm-icoon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gm-knop[data-actie="favorieten"] .gm-icoon { color: var(--kobalt); }
.gm-knop[data-actie="favorieten"]:hover .gm-icoon { color: inherit; }

/* Tekst alleen op brede schermen; daaronder alleen iconen (de knoppen hebben een aria-label). */
@media (max-width: 979px) {
  .gm-knop { padding: 0; width: 38px; }
  .gm-tekst {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* Smal scherm: style.css zet het merk boven het zoekveld (kolom). Het menu komt rechts naast het merk
   op dezelfde rij, het zoekveld blijft eronder over de volle breedte. Negatieve marge zodat de rij
   niet hoger wordt dan met alleen het merk. */
@media (max-width: 640px) {
  .kop-binnen { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .kop-binnen > .merk { order: 0; flex: 1 1 auto; min-width: 0; }
  .kop-binnen > .gebruiker-menu { order: 1; margin-block: -6px; gap: 4px; }
  .kop-binnen > .zoek { order: 2; flex: 1 0 100%; }
  .gm-knop { width: 34px; min-width: 34px; height: 34px; border-radius: 8px; }
  .gm-icoon { width: 18px; height: 18px; }
}

/* ---------- loginpagina en 403-pagina ---------- */

.auth-pagina .kop-binnen { justify-content: space-between; }
@media (max-width: 640px) { .auth-pagina .kop-binnen { flex-wrap: nowrap; } }

.auth-midden {
  flex: 1;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 40px var(--gutter) 64px;
}

.auth-kaart {
  width: 100%;
  max-width: 420px;
  padding: 30px 28px 28px;
  background: var(--oppervlak);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  box-shadow: var(--schaduw);
}
@media (max-width: 420px) { .auth-kaart { padding: 24px 18px 22px; } }

.auth-titel { font-size: clamp(1.6rem, 5vw, 1.875rem); letter-spacing: -0.01em; }
.auth-tekst { margin-top: 10px; color: var(--gedempt); }
.auth-tekst strong { color: var(--inkt); overflow-wrap: anywhere; }

.auth-stap { margin-top: 22px; }
.auth-stap[hidden], .auth-melding[hidden] { display: none; }

.auth-melding {
  margin-top: 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--kobalt);
  background: var(--kobalt-zacht);
  border-radius: 0 8px 8px 0;
  font-size: 0.96875rem;
}
.auth-melding.fout {
  border-left-color: var(--waarschuwing);
  background: color-mix(in srgb, var(--waarschuwing) 12%, var(--oppervlak));
}
.auth-melding .auth-link { margin-top: 6px; }

.auth-knop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.auth-knop:disabled { opacity: 0.65; cursor: progress; }

.auth-knop-hoofd {
  margin-top: 12px;
  border: 0;
  background: var(--kobalt);
  color: #fff;
}
.auth-knop-hoofd:hover:not(:disabled) { background: var(--kobalt-donker); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-knop-hoofd { color: #0e1630; } }
:root[data-theme="dark"] .auth-knop-hoofd { color: #0e1630; }

.auth-knop-google {
  border: 1.5px solid var(--lijn);
  background: var(--oppervlak);
  color: var(--inkt);
}
.auth-knop-google:hover:not(:disabled) { border-color: var(--kobalt); }
.auth-knop-google svg { width: 20px; height: 20px; flex-shrink: 0; }

.auth-of {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--zacht);
  font-size: 0.9375rem;
}
.auth-of::before, .auth-of::after { content: ''; flex: 1; border-top: 1px solid var(--lijn); }

.auth-label { display: block; font-weight: 700; margin: 0 0 6px; }
#code-formulier .auth-label { margin-top: 16px; }

.auth-veld {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--lijn);
  border-radius: 12px;
  background: var(--oppervlak);
  color: var(--inkt);
  font: inherit;
  font-size: 1.0625rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-veld::placeholder { color: var(--zacht); opacity: 1; }
.auth-veld:focus {
  border-color: var(--kobalt);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kobalt) 18%, transparent);
}
.auth-veld[aria-invalid="true"] { border-color: var(--waarschuwing); }
.auth-veld-code {
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: calc(14px + 0.35em);
}

.auth-acties { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; }

.auth-link {
  display: inline-block;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--kobalt-tekst);
  font: inherit;
  font-size: 0.96875rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.auth-link:disabled { color: var(--zacht); text-decoration: none; cursor: default; }

.auth-voetnoot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--lijn); color: var(--zacht); font-size: 0.875rem; }