/* Datei: assets/css/login.css */
/* =============== Variablen & Basisfarben (wie einkauf.css) =============== */
:root {
  --ph-blue: #003c88;
  --ph-blue-600: #0b274d;
  --ph-pill: #eaf2ff;
  --ph-pill-strong: #d6e5fb;
  --ph-border: #b4c8e0;
  --ph-bg: #f7faff;
  --ph-danger: #9b1c1c;
}

/* =============== Global / Mobile first =============== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ph-blue-600);
  background: var(--ph-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* UA-Styles neutralisieren */
input, button {
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
  box-shadow: none !important;
  outline: none;
  border-radius: 0;
  color-scheme: light; /* verhindert Auto-Dark-Inset */
}

/* =============== Login-Box (Card) =============== */
.login-box {
  width: 320px;
  background: #fff;
  border: 1px solid var(--ph-border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.login-box h1 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  color: var(--ph-blue);
}

/* =============== Alerts =============== */
.alert {
  padding: 10px 12px;
  border-radius: 12px;
  margin: 8px 0 12px;
  border: 1px solid var(--ph-border);
  background: var(--ph-pill);
  color: var(--ph-blue-600);
  font-size: .95rem;
}
.alert.error { border-color:#d99a9a; background:#fdeeee; color:#6b0000; }

/* =============== Form =============== */
.form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-weight: 700;
  font-size: .95rem;
  color: var(--ph-blue-600);
}

.form-group input {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ph-border);
  border-radius: 14px;
  font-size: 1rem;
  background: #fff;
  color: #111;
  transition: border .15s ease, box-shadow .15s ease;
}
.form-group input:focus {
  border-color: var(--ph-blue);
  box-shadow: 0 0 0 3px rgba(0,60,136,0.2);
}

/* =============== Button (wie auf anderen Seiten) =============== */
.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
  background: var(--ph-blue);
  color: #fff;
}
.btn:hover,
.btn:focus { background: #002b66; }
.btn:active { transform: translateY(1px); }

/* Sekundäre Links (z. B. „Passwort vergessen?“) */
.form-footer {
  margin-top: 10px;
  text-align: center;
  font-size: .95rem;
}
.form-footer a {
  color: var(--ph-blue);
  font-weight: 700;
  text-decoration: none;
}
.form-footer a:hover { text-decoration: underline; }

/* =============== Tablet/Desktop leichte Skalierung =============== */
@media (min-width: 480px) {
  .login-box { width: 360px; padding: 20px; }
  .login-box h1 { font-size: 1.35rem; }
}

/* =============== Dark Mode =============== */
@media (prefers-color-scheme: dark) {
  :root {
    --ph-blue: #8fbaff;
    --ph-blue-600: #d7e6ff;
    --ph-pill: #0e223e;
    --ph-pill-strong: #1a2d4b;
    --ph-border: #2d4a74;
    --ph-bg: #0a172b;
  }
  body { background: var(--ph-bg); color: var(--ph-blue-600); }

  .login-box {
    background: #0f213b;
    border-color: var(--ph-border);
    box-shadow: none;
  }
  .login-box h1 { color: var(--ph-blue); }

  .alert { background: var(--ph-pill); border-color: var(--ph-border); color: var(--ph-blue-600); }
  .alert.error { background:#3a1a1a; border-color:#6b2a2a; color:#ffcece; }

  .form-group label { color: var(--ph-blue-600); }
  .form-group input {
    background: #0f213b;
    color: #eaf2ff;
    border-color: var(--ph-border);
    box-shadow: none !important;
    color-scheme: light;
  }
  .form-group input:focus { box-shadow: 0 0 0 3px rgba(143,186,255,0.25); }

  .btn { background: #295ea6; }
  .btn:hover,
  .btn:focus { background: #1c4276; }

  .form-footer a { color: var(--ph-blue); }
}

/* =============== WebKit Autofill Fix =============== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111;
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 9999s ease-out 0s;
}
@media (prefers-color-scheme: dark) {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: #eaf2ff;
    box-shadow: 0 0 0 1000px #0f213b inset !important;
  }
}