/* === teamgeist Standalone-Seiten (ohne _layout/main) ===
   Für Seiten, die NICHT durchs Haupt-Layout laufen: Login/Auth, Lead-Intake,
   Feedback-Survey, Fehlerseiten, Admin-Solo-Seiten, Klassifizierungs-Share.

   Lade-Reihenfolge (views/_components/standalone-head.ejs bzw.
   views/_layout/assets.js → renderStandaloneCssLinks):
     design-tokens.css  → Fonts, Farben, Body-Defaults, Inputs, Headings
     components.css     → .btn/.btn-primary, .card, .badge, .table-responsive
     standalone.css     → NUR Seitengerüst + Solo-Bausteine (diese Datei)

   Keine Tokens hier definieren — alles kommt aus design-tokens.css.
   Neue Standalone-Seiten bauen auf diesen Klassen auf statt eigene
   <style>-Blöcke mit kopierten Werten anzulegen. */

/* ── Seitengerüst ─────────────────────────────────────────────────────────── */
body.tg-standalone {
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg-soft);
}

/* Zentrierte Karten-Seite (Login, TOTP, Passwort, Danke-Seiten) */
body.tg-standalone--center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background:
    radial-gradient(circle at 20% 20%, rgba(206, 33, 40, 0.10), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(206, 33, 40, 0.06), transparent 55%),
    var(--color-bg-soft);
}

/* Dokument-Seite mit begrenzter Breite (Admin-Solo, Listen, Formulare) */
.tg-solo-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-lg);
}
.tg-solo-page--narrow { max-width: 640px; }

/* ── Solo-Karte ──────────────────────────────────────────────────────────── */
.tg-solo-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
}
.tg-solo-card--wide { max-width: 640px; }
.tg-solo-card h1 {
  font-size: var(--font-size-xl);
  margin-bottom: 18px;
  color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold);
}

/* ── Brand-Kopf ("teamgeist Plattform") ──────────────────────────────────── */
.tg-solo-brand { text-align: center; margin-bottom: 28px; }
.tg-solo-brand-mark {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  letter-spacing: -0.5px;
}
.tg-solo-brand-mark i,
.tg-solo-brand-mark .tg-name {
  color: var(--color-accent);
  font-style: italic;
  text-transform: lowercase;
  font-weight: var(--font-weight-bold);
}
.tg-solo-brand-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ── Formularfelder ──────────────────────────────────────────────────────── */
/* Input/Select/Textarea-Optik + Focus-Ring kommen aus design-tokens.css. */
.tg-solo-field { margin-bottom: 14px; }
.tg-solo-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}
.tg-solo-field input,
.tg-solo-field select,
.tg-solo-field textarea { width: 100%; }

/* ── Hinweis-/Fehlerboxen ────────────────────────────────────────────────── */
.tg-solo-alert {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  color: var(--color-text);
}
.tg-solo-alert--error {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger-strong);
}
.tg-solo-alert--success {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-strong);
}
.tg-solo-alert--info {
  background: var(--color-info-soft);
  border-color: var(--color-info);
  color: var(--color-info-strong);
}
.tg-solo-alert--warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning-strong);
}

/* ── Trenner ("oder") ────────────────────────────────────────────────────── */
.tg-solo-or {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.tg-solo-or::before,
.tg-solo-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ── Fußzeile ────────────────────────────────────────────────────────────── */
.tg-solo-footer {
  margin-top: 22px;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  text-align: center;
}

/* ── Tabellen-Basis für Solo-Seiten ──────────────────────────────────────── */
/* design-tokens.css lässt nackte Tabellen bewusst ungestylt (Layout-Welt hat
   eigene Tabellen-Komponenten) — Solo-Seiten (DMS, OCR, BHB-Status) bekommen
   hier eine dezente Grundoptik. */
.tg-solo-page table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg);
  font-size: var(--font-size-sm);
}
.tg-solo-page th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  background: var(--color-bg-soft);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--font-weight-semibold);
}
.tg-solo-page td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-bg-alt);
  vertical-align: top;
}
.tg-solo-page tbody tr:hover { background: var(--color-neutral-50); }

/* ── Fehlerseite (views/error.ejs + views/_layout/error.ejs) ─────────────── */
.error-page {
  max-width: 480px;
  margin: 15vh auto 0;
  padding: var(--space-xl);
  text-align: center;
}
.error-page h1 { color: var(--color-accent); margin-bottom: var(--space-md); }
.error-page a { color: var(--color-accent); text-decoration: underline; }