/* Structuurzoeker – gebruikersmenu in de kopbalk en de loginpagina.
   Bouwt voort op css/style.css (zelfde variabelen, knoppen en afrondingen; licht en donker). */

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

.gebruiker-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.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; }