/* ============================================================
   JARVIS Legacy Styles — Phase 4A.1
   Vollständige Migration aus server.js inline <style> Block.

   Alle Farb-Properties verwenden CSS-Variablen mit Fallback-Werten,
   damit Dark Mode korrekt funktioniert.

   Status-Badges und Workflow-Badges behalten ihre Direkt-Farben
   (component-spezifisch; Migration erfolgt in Phase 4B).

   NICHT ÄNDERN ohne explizite Freigabe.
   ============================================================ */

/* ============================================================
   GLOBALE BASIS
   padding: 0 — Abstände kommen jetzt von .app-main (app-shell.css).
   ============================================================ */
body {
  font-family: Arial, sans-serif;
  background: var(--color-bg-canvas, #f4f6f8);
  margin: 0;
  padding: 0;
  color: var(--color-text-primary, #222);
}

h1 {
  margin-top: 0;
}

/* ============================================================
   LAYOUT
   (Alte nav/nav-a Stile entfernt — Phase 4B AppShell ersetzt
    die horizontale Navigation; Stile in navigation.css)
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.card {
  background: var(--color-bg-surface, white);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

/* ============================================================
   FORMULARELEMENTE
   ============================================================ */
input,
select,
textarea {
  width: 100%;
  padding: 10px;
  margin: 6px 0 12px;
  border: 1px solid var(--color-border-default, #ccc);
  border-radius: 8px;
  box-sizing: border-box;
  background: var(--color-bg-surface, white);
  color: var(--color-text-primary, #222);
}

button {
  background: #111;
  color: white;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}

/* ============================================================
   TABELLEN
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  border-bottom: 1px solid var(--color-border-default, #eee);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

/* ============================================================
   BADGE
   ============================================================ */
.badge {
  display: inline-block;
  background: #eef;
  padding: 4px 8px;
  border-radius: 999px;
}

/* ============================================================
   STATUS-BADGES
   Bewusst mit Direkt-Farben — Dark Mode Migration in Phase 4B.
   ============================================================ */
.status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
}

.status-draft      { background: #e5e7eb; color: #374151; }
.status-queued     { background: #fef3c7; color: #92400e; }
.status-submitted,
.status-processing { background: #dbeafe; color: #1d4ed8; }
.status-review     { background: #ffedd5; color: #c2410c; }
.status-completed  { background: #dcfce7; color: #166534; }
.status-failed,
.status-cancelled  { background: #fee2e2; color: #991b1b; }

/* ============================================================
   WORKFLOW-BADGES
   ============================================================ */
.workflow {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
}

.workflow-green  { background: #dcfce7; color: #166534; }
.workflow-yellow { background: #fef3c7; color: #92400e; }
.workflow-red    { background: #fee2e2; color: #991b1b; }

/* ============================================================
   FORTSCHRITTSBALKEN
   ============================================================ */
.progress {
  width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 4px;
}

.progress-bar {
  height: 100%;
  background: #111;
}

/* ============================================================
   AKTIONS-HILFSKLASSEN
   ============================================================ */
.actions form {
  display: inline;
}

.danger {
  background: #991b1b;
}

/* ============================================================
   HILFSKLASSEN
   ============================================================ */
.warn {
  background: #fff3cd;
  border: 1px solid #ffe08a;
  padding: 12px;
  border-radius: 10px;
}

.metric {
  font-size: 28px;
  font-weight: bold;
}

.small {
  color: var(--color-text-secondary, #666);
  font-size: 13px;
}

/* ============================================================
   LOGIN-SEITE
   Zentrierte Card für den Anmeldebereich.
   ============================================================ */
.login-card {
  max-width: 420px;
  margin: 60px auto;
  background: var(--color-bg-surface, white);
  border-radius: 14px;
  padding: 25px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}

.login-card input {
  padding: 12px;
  margin: 8px 0 15px;
}

.login-card button {
  width: 100%;
  padding: 12px;
}

.login-card .warn {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
}