/* Anpassen: Variablen in eurem eigenen CSS auf :root überschreiben, z. B. --gauth-accent */
/* Werte aus dem GNIW Corporate Design (brand/brand.css muss vorher geladen sein) */
:root {
  --gauth-surface: var(--gniw-lichtblau-20);
  --gauth-card: #ffffff;
  --gauth-ink: var(--gniw-schwarz);
  --gauth-muted: var(--gniw-schwarz-gedaempft);
  /* ANNAHME: Eingabefelder brauchen mehr Kontrast als Lichtblau 20 %, daher Tiefblau mit 35 % Deckkraft */
  --gauth-line: rgba(35, 47, 97, 0.35);
  --gauth-line-soft: var(--gniw-lichtblau-20);
  --gauth-accent: var(--gniw-tiefblau);
  --gauth-accent-ink: #ffffff;
  --gauth-danger: var(--gniw-status-rot);
  --gauth-ok: var(--gniw-tiefblau);
  --gauth-wait: var(--gniw-status-gelb);
  --gauth-radius: 6px;
}

/* Vor dem Login: Dashboard verbergen, nur die Login-Maske zeigen */
html.gauth-pending body > *:not(#gauth-root) { visibility: hidden !important; }
html.gauth-locked { overflow: hidden; }
[hidden] { display: none !important; }

.gauth, .gauth * { box-sizing: border-box; }
.gauth { font-family: var(--gniw-font-system); font-size: 0.9375rem; color: var(--gauth-ink); line-height: 1.55; text-align: left; }
/* Überschriften: Rubik SemiBold in Tiefblau */
.gauth h1, .gauth h2 { margin: 0 0 1rem; line-height: 1.25; font-family: var(--gniw-font-marke); font-weight: 600; color: var(--gniw-tiefblau); }
.gauth h1 { font-size: 1.5rem; }
.gauth h2 { font-size: 1.2rem; }

/* ---------- Login und Passwortwechsel ---------- */
#gauth-root {
  position: fixed; inset: 0; z-index: 10000; overflow-y: auto;
  background: var(--gauth-surface);
  display: flex; align-items: center; justify-content: center;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
}
.gauth-screen {
  width: 100%; max-width: 27rem; background: var(--gauth-card);
  padding: 2rem; border-radius: var(--gauth-radius);
}
/* Logo: Breite ≥ 35 mm, Schutzraum ≥ Logohöhe (hier ca. 29 px) nach allen Seiten */
.gauth-logo { display: block; width: 150px; height: auto; margin: 0 0 2rem; }
.gauth-product {
  margin: 0 0 1.75rem; font-family: var(--gniw-font-marke); font-size: clamp(1.6rem, 6vw, 2rem); font-weight: 600;
  line-height: 1.15; color: var(--gniw-tiefblau);
}
.gauth-lead { margin: 0 0 1.25rem; color: var(--gauth-muted); max-width: 34rem; }

/* ---------- Formulare ---------- */
.gauth-form { display: flex; flex-direction: column; }
.gauth-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.gauth-field label, .gauth-check label { font-size: 0.9rem; font-weight: 600; }
.gauth input[type="email"], .gauth input[type="password"], .gauth input[type="text"], .gauth select {
  font: inherit; color: inherit; width: 100%;
  padding: 0.6rem 0.7rem; border: 1px solid var(--gauth-line); border-radius: var(--gauth-radius);
  background: var(--gauth-card);
}
.gauth input:disabled, .gauth select:disabled { opacity: 0.6; }
.gauth-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.gauth-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--gauth-accent); }
.gauth-hint { margin: 0; font-size: 0.85rem; color: var(--gauth-muted); }
.gauth-error { margin: 0 0 1rem; min-height: 1.2em; color: var(--gauth-danger); font-size: 0.9rem; }
.gauth-error:empty { margin: 0; min-height: 0; }

/* ---------- Buttons ---------- */
.gauth button { font: inherit; cursor: pointer; border-radius: var(--gauth-radius); }
.gauth button:disabled { cursor: not-allowed; opacity: 0.55; }
.gauth-primary {
  padding: 0.65rem 1.1rem; border: 1px solid var(--gauth-accent);
  background: var(--gauth-accent); color: var(--gauth-accent-ink); font-weight: 600;
}
.gauth-ghost {
  padding: 0.4rem 0.7rem; border: 1px solid transparent; background: transparent; color: var(--gauth-accent);
}
.gauth-ghost:hover:not(:disabled) { border-color: var(--gauth-line); }
.gauth-danger { color: var(--gauth-danger); }
.gauth-danger-fill { background: var(--gauth-danger); border-color: var(--gauth-danger); }
.gauth-link {
  align-self: flex-start; margin-top: 1rem; padding: 0; border: 0; background: none;
  color: var(--gauth-muted); text-decoration: underline;
}
.gauth :focus-visible, .gauth-topbar :focus-visible { outline: 2px solid var(--gauth-accent); outline-offset: 2px; }

/* ---------- Topbar ---------- */
.gauth-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; font-family: var(--gniw-font-system); font-size: 0.9375rem; }
.gauth-topbar button { font: inherit; cursor: pointer; border-radius: var(--gauth-radius); }
.gauth-username { font-weight: 600; margin-right: 0.5rem; color: var(--gniw-schwarz); }
.gauth-floating {
  position: fixed; top: max(0.5rem, env(safe-area-inset-top)); right: 0.75rem; z-index: 9000;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem; background: var(--gauth-card);
  border: 1px solid var(--gauth-line); border-radius: var(--gauth-radius); color: var(--gauth-ink);
}
.gauth-floating .gauth-ghost, [data-auth-topbar] .gauth-ghost {
  padding: 0.35rem 0.6rem; border: 1px solid transparent; background: transparent; color: var(--gauth-accent);
}

/* ---------- Team & Rechte ---------- */
.gauth-panel {
  position: fixed; inset: 0; z-index: 9500; overflow-y: auto; background: #ffffff;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
}
.gauth-panel-inner { max-width: 72rem; margin: 0 auto; }
.gauth-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gauth-panel-head h1 { margin: 0; }
.gauth-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.gauth-status { margin: 0 0 0.75rem; color: var(--gauth-muted); min-height: 1.2em; }
.gauth-tablewrap { overflow-x: auto; background: var(--gauth-card); border: 1px solid var(--gauth-line-soft); border-radius: var(--gauth-radius); }
.gauth-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.gauth-table th { text-align: left; font-weight: 600; font-size: 0.85rem; color: var(--gniw-tiefblau); background: var(--gniw-lichtblau-20); padding: 0.7rem 0.9rem; white-space: nowrap; }
.gauth-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--gauth-line-soft); vertical-align: top; }
.gauth-table tr:last-child td { border-bottom: 0; }
.gauth-table tr.is-inactive td { color: var(--gauth-muted); }
.gauth-sub { display: block; font-size: 0.8rem; color: var(--gauth-muted); }
.gauth-badge { display: inline-block; font-size: 0.85rem; font-weight: 600; }
.gauth-badge.is-on { color: var(--gauth-ok); }
.gauth-badge.is-off { color: var(--gauth-danger); }
.gauth-badge.is-wait { color: var(--gauth-wait); }
.gauth-rowactions { white-space: nowrap; text-align: right; }
.gauth-empty { color: var(--gauth-muted); text-align: center; padding: 2rem; }
.gauth-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Dialoge ---------- */
.gauth-dialog {
  width: min(28rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--gauth-line);
  border-radius: var(--gauth-radius); background: var(--gauth-card);
}
.gauth-dialog::backdrop { background: rgba(35, 47, 97, 0.45); }
.gauth-dialog .gauth-actions { margin-top: 0.5rem; }
.gauth-secretrow { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.gauth-secret {
  flex: 1; padding: 0.6rem 0.7rem; font-size: 0.85rem; user-select: all;
  background: var(--gniw-lichtblau-20); border: 1px solid var(--gauth-line); border-radius: var(--gauth-radius);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .gauth-rowactions { white-space: normal; text-align: left; }
  .gauth-rowactions .gauth-ghost { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .gauth * { transition: none !important; } }