/* Restaurant Pilot – Dashboard.
   Bewusst handgeschrieben und knapp: Für Formulare und eine Freigabe-Liste
   braucht es kein CSS-Framework, und der Pilot soll ohne Build-Schritt laufen
   (Briefing 2a). */

:root {
  --grund: #f7f6f3;
  --karte: #ffffff;
  --linie: #ddd8d0;
  --text: #26241f;
  --gedaempft: #6b665d;
  --akzent: #2f5d50;
  --akzent-hell: #e8f0ed;
  /* Die drei Zustände der Freigabe-Liste – siehe ExtractionResult-Docstring */
  --bereit: #2f7a4f;        /* buchungsreif */
  --bereit-hell: #e6f4ec;
  --rueckfrage: #b4531a;    /* Felder fehlen */
  --rueckfrage-hell: #fbeee4;
  --bestaetigen: #8a6d1f;   /* Felder da, aber unsicher */
  --bestaetigen-hell: #fbf4e0;
  --abgelehnt: #8a2f2f;
  --abgelehnt-hell: #f7e8e8;
  /* Kategorien aus der Klassifikation (Phasenplan-Schritt 10) */
  --anfrage: #2b5f8a;          /* Vorfeld-Anfrage */
  --anfrage-hell: #e4eef6;
  --bestehende: #6b3fa0;       /* Aenderung / Storno: betrifft eine Buchung */
  --bestehende-hell: #efe8f8;
  --aussortiert: #6b665d;      /* von der Maschine verworfen */
  --aussortiert-hell: #eeece8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--grund);
}

a { color: var(--akzent); }

/* --- Kopf und Navigation ------------------------------------------------ */

.kopf {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.4rem;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 700; text-decoration: none; color: var(--text); }
.kopf nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.kopf nav a {
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  color: var(--gedaempft);
}
.kopf nav a:hover { background: var(--akzent-hell); color: var(--akzent); }
.kopf nav a.aktiv { background: var(--akzent); color: #fff; }
.kopf-rechts { display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; }
.betrieb { font-weight: 600; }
.rolle { color: var(--gedaempft); }

.inhalt { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.4rem 3rem; }
.fuss {
  max-width: 1100px; margin: 0 auto; padding: 0 1.4rem 2rem;
  color: var(--gedaempft); font-size: 0.8rem;
}

h1 { font-size: 1.5rem; margin: 0 0 0.3rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; }
.unterzeile { color: var(--gedaempft); margin: 0 0 1.5rem; }

/* --- Karten, Formulare -------------------------------------------------- */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.2rem;
}

form label { display: block; margin: 0.7rem 0; font-size: 0.9rem; color: var(--gedaempft); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=time], input[type=date], select, textarea {
  display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linie); border-radius: 5px;
  font: inherit; font-size: 0.95rem; color: var(--text); background: #fff;
}
textarea { min-height: 5rem; resize: vertical; }
.feld-reihe { display: flex; gap: 1rem; flex-wrap: wrap; }
.feld-reihe > label { flex: 1 1 12rem; }
.kontrollkaestchen { display: flex; align-items: center; gap: 0.5rem; }
.kontrollkaestchen input { width: auto; margin: 0; }

.knopf {
  display: inline-block; padding: 0.5rem 1.1rem;
  background: var(--akzent); color: #fff; border: 0; border-radius: 5px;
  font: inherit; cursor: pointer; text-decoration: none;
}
.knopf:hover { filter: brightness(1.1); }
.knopf-schlicht {
  padding: 0.35rem 0.8rem; background: transparent; color: var(--gedaempft);
  border: 1px solid var(--linie); border-radius: 5px; font: inherit; cursor: pointer;
}
.knopf-schlicht:hover { background: var(--grund); }
.knopf-gefahr { background: var(--abgelehnt); }
.knopf-reihe { display: flex; gap: 0.6rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }

/* --- Meldungen ---------------------------------------------------------- */

.meldung { padding: 0.6rem 0.9rem; border-radius: 6px; margin: 0.8rem 0; font-size: 0.9rem; }
.erfolg { background: var(--bereit-hell); color: var(--bereit); border: 1px solid var(--bereit); }
.fehler { background: var(--abgelehnt-hell); color: var(--abgelehnt); border: 1px solid var(--abgelehnt); }
.warnung { background: var(--bestaetigen-hell); color: var(--bestaetigen); border: 1px solid var(--bestaetigen); }
.warnung ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.warnung li { margin: 0.3rem 0; }

/* --- Tabellen und Listen ------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linie); }
th { color: var(--gedaempft); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }

/* --- Die drei Zustände der Freigabe (ExtractionResult-Dreiteilung) ------- */

.zustand {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.zustand-pending_approval { background: var(--bereit-hell); color: var(--bereit); }
.zustand-needs_clarification { background: var(--rueckfrage-hell); color: var(--rueckfrage); }
.zustand-needs_confirmation { background: var(--bestaetigen-hell); color: var(--bestaetigen); }
.zustand-inquiry { background: var(--anfrage-hell); color: var(--anfrage); }
.zustand-modification { background: var(--bestehende-hell); color: var(--bestehende); }
.zustand-cancellation { background: var(--bestehende-hell); color: var(--bestehende); }
.zustand-filtered_out { background: var(--aussortiert-hell); color: var(--aussortiert); }
.zustand-send_failed { background: var(--abgelehnt-hell); color: var(--abgelehnt); font-weight: 700; }
.zustand-approved { background: var(--akzent-hell); color: var(--akzent); }
.zustand-rejected { background: var(--abgelehnt-hell); color: var(--abgelehnt); }
.zustand-booked { background: var(--bereit); color: #fff; }

.gruppe-marke {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px;
  background: #ece6f5; color: #5b3fa0; font-size: 0.75rem; font-weight: 600;
}

.zustands-kacheln { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.zustands-kacheln .kachel { flex: 1 1 10rem; }
.kachel {
  flex: 1 1 12rem; padding: 0.9rem 1rem; border-radius: 8px;
  border: 1px solid var(--linie); background: var(--karte); text-decoration: none; color: inherit;
}
.kachel .zahl { font-size: 1.7rem; font-weight: 700; display: block; }
.kachel .titel { font-size: 0.85rem; color: var(--gedaempft); }
.kachel.bereit { border-left: 4px solid var(--bereit); }
.kachel.rueckfrage { border-left: 4px solid var(--rueckfrage); }
.kachel.bestaetigen { border-left: 4px solid var(--bestaetigen); }
.kachel.anfrage { border-left: 4px solid var(--anfrage); }
.kachel.aenderung { border-left: 4px solid var(--bestehende); }
.kachel.storno { border-left: 4px solid var(--bestehende); }
.kachel.gescheitert { border-left: 4px solid var(--abgelehnt); }
.kachel.aktiv { outline: 2px solid var(--akzent); }

/* --- Detailansicht ------------------------------------------------------ */

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 800px) { .zweispaltig { grid-template-columns: 1fr; } }

.mailtext {
  white-space: pre-wrap; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem; background: var(--grund); padding: 0.9rem;
  border-radius: 6px; border: 1px solid var(--linie); max-height: 30rem; overflow: auto;
}

.feldliste { list-style: none; padding: 0; margin: 0; }
.feldliste li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--linie);
}
.feldliste li:last-child { border-bottom: 0; }
.feldliste .bezeichnung { color: var(--gedaempft); font-size: 0.85rem; }
.feldliste .wert { font-weight: 600; text-align: right; }
.feldliste li.fehlt { background: var(--rueckfrage-hell); }
.feldliste li.fehlt .wert { color: var(--rueckfrage); font-weight: 700; }
.feldliste li.unsicher { background: var(--bestaetigen-hell); }
.feldliste li.unsicher .wert { color: var(--bestaetigen); }
.marke-klein {
  font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.4rem;
  border-radius: 4px; margin-left: 0.4rem; vertical-align: middle;
}
.marke-fehlt { background: var(--rueckfrage); color: #fff; }
.marke-unsicher { background: var(--bestaetigen); color: #fff; }
.ungefaehr { color: var(--bestaetigen); font-weight: 700; }

.legende { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--gedaempft); margin-bottom: 1rem; }
.legende span::before {
  content: ""; display: inline-block; width: 0.7rem; height: 0.7rem;
  border-radius: 3px; margin-right: 0.35rem; vertical-align: middle;
}
.legende .l-bereit::before { background: var(--bereit); }
.legende .l-rueckfrage::before { background: var(--rueckfrage); }
.legende .l-bestaetigen::before { background: var(--bestaetigen); }
.legende .l-anfrage::before { background: var(--anfrage); }
.legende .l-bestehende::before { background: var(--bestehende); }

.leer { padding: 2.5rem; text-align: center; color: var(--gedaempft); }

/* --- Login -------------------------------------------------------------- */

.login-seite { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 10px;
  padding: 2rem; width: min(24rem, 92vw);
}
.login-karte h1 { margin-bottom: 0.2rem; }
.login-karte .hinweis { color: var(--gedaempft); font-size: 0.9rem; margin-top: 0; }
.login-karte .knopf { width: 100%; margin-top: 1rem; }