/* ====== Simpele, nette login ====== */

/* rustige achtergrond en basis-typografie (alleen op login dankzij conditional include) */
html, body { height: 100%; }
body {
  background: #f5f7fb;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* centreer mooi */
.min-h-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Kaart */
#auth-card{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;      /* licht grijs */
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.07) !important;
  width: min(92vw, 440px);
  padding: 24px !important;
  color: #111827;
}

/* Labels en kleine tekst */
#auth-card label,
#auth-card .text-gray-600,
#auth-card .text-gray-700{ color:#374151 !important; }

/* Links */
#auth-card a{ color:#6b7280; text-decoration:none; }
#auth-card a:hover{ color:#111827; text-decoration:underline; }

/* Inputs */
#auth-card input[type="email"],
#auth-card input[type="password"],
#auth-card input[type="text"]{
  width:100%;
  margin-top:.5rem;
  border:1px solid #d1d5db !important;
  background:#fff !important;
  color:#111827 !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#auth-card input::placeholder{ color:#9ca3af; }
#auth-card input:focus{
  border-color:#00BCCA !important;
  box-shadow:0 0 0 3px rgba(0,188,202,.20);
}

/* Checkbox */
#auth-card input[type="checkbox"]{
  width:16px; height:16px; border-radius:4px;
  border:1px solid #cbd5e1; background:#fff;
}
#auth-card input[type="checkbox"]:checked{
  background:#00BCCA; border-color:#00BCCA;
}

/* Primaire knop (Log in) � donker neutraal */
#auth-card button[type="submit"],
#auth-card .ms-4[type="submit"]{
  background:#111827 !important;
  border:0 !important;
  color:#fff !important;
  font-weight:600 !important;
  border-radius:10px !important;
  padding:10px 14px !important;
  transition:filter .15s ease, transform .05s ease;
}
#auth-card button[type="submit"]:hover{ filter:brightness(1.05); }
#auth-card button[type="submit"]:active{ transform:translateY(1px); }

/* Google knop � nette vaste stijl */
#auth-card a[href*="/auth/google"] button{
  all: unset;                 /* verwijder tailwind inline clash */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4285F4;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border: 0;
  box-shadow: 0 6px 16px rgba(66,133,244,.25);
  transition: filter .15s ease, transform .05s ease;
}
#auth-card a[href*="/auth/google"] button:hover{ filter:brightness(1.06); }
#auth-card a[href*="/auth/google"] button:active{ transform: translateY(1px); }
#auth-card a[href*="/auth/google"] svg{ width:18px; height:18px; }

/* kleine spacing-fixes */
#auth-card .mt-4{ margin-top: 1rem !important; }
#auth-card .mb-2{ margin-bottom: .5rem !important; }
#auth-card .ms-4{ margin-left: 1rem !important; }

#auth-card{
    margin-top: -350px!important;
}

/* --- Neutrale knoppen, gelijke hoogte --- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;
  font-size:14px;font-weight:600;line-height:1;color:#fff;gap:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);text-decoration:none}
.btn svg{width:18px;height:18px}

.btn--primary{background:#111827}
.btn--primary:hover{filter:brightness(1.05)}
.btn--google{background:#4285F4; color: white!important; text-decoration: none!important;}
.btn--google:hover{background:#357AE8}

/* voorkom oude regels die Google-knop breken */
#auth-card a[href*="/auth/google"] button{ all: initial; }

.login-form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.form-group input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
}

.form-group--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.helper-text {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #6b7280;
}

.alert {
  margin-top: 1rem;
  font-size: 0.875rem;
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #b91c1c;
}

.forgot-link {
  font-size: 0.8rem;
  text-decoration: underline;
}

.checkbox input {
  margin-right: 0.35rem;
}