/* =====================================================================
   Elvyon Logging - Oberflaeche
   =====================================================================
   Von Hand geschrieben, kein Bauschritt, kein Framework.

   WARUM KEIN CSS-FRAMEWORK: Ein Framework waere eine Abhaengigkeit, die
   gepflegt, beobachtet und irgendwann ersetzt werden muss - fuer eine
   Verwaltungsoberflaeche mit acht Seiten. Diese Datei ist kleiner als
   jede Framework-Datei und jede Zeile darin ist erklaerbar.

   FARBEN: Der gesamte Bestand steht als Variablen ganz oben. Wer die
   Darstellung aendern will, aendert dort - nicht verstreut im Text.

   HELL UND DUNKEL: Die Oberflaeche folgt der Einstellung des
   Betriebssystems (prefers-color-scheme). Wer nachts arbeitet, bekommt
   die dunkle Fassung, ohne irgendwo etwas umstellen zu muessen.
   ===================================================================== */

:root {
  --grund:        #f6f7f9;
  --flaeche:      #ffffff;
  --flaeche-2:    #eef0f4;
  --rand:         #d5d9e0;
  --text:         #1b1f27;
  --text-leise:   #626b7a;
  --akzent:       #1f5fa8;
  --akzent-text:  #ffffff;
  --gut:          #1d7a45;
  --gut-grund:    #e6f5ec;
  --warnung:      #8a5a05;
  --warnung-grund:#fdf3e0;
  --fehler:       #a52222;
  --fehler-grund: #fceaea;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --einfarbig: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:        #14171c;
    --flaeche:      #1b1f26;
    --flaeche-2:    #232833;
    --rand:         #333a47;
    --text:         #e6e9ef;
    --text-leise:   #9aa3b2;
    --akzent:       #5a9bea;
    --akzent-text:  #0d1015;
    --gut:          #5fcf90;
    --gut-grund:    #16301f;
    --warnung:      #e0b361;
    --warnung-grund:#33280f;
    --fehler:       #ef7b7b;
    --fehler-grund: #351818;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .einfarbig { font-family: var(--einfarbig); font-size: 0.9em; }
pre { overflow-x: auto; }

/* --- Kopf und Fuss ------------------------------------------------ */

.kopf {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 0.6rem 1.5rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.marke { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.hauptnav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.hauptnav a { color: var(--text-leise); padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.hauptnav a.aktiv { color: var(--text); border-bottom-color: var(--akzent); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.benutzername { color: var(--text-leise); }

.fuss {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  padding: 1rem 1.5rem; margin-top: 3rem;
  border-top: 1px solid var(--rand);
  color: var(--text-leise); font-size: 0.85rem;
}

.inhalt { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
h4 { font-size: 0.9rem; margin: 1rem 0 0.35rem; color: var(--text-leise); }
section { margin-bottom: 2rem; }

.kopfzeile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kopfzeile h1 { margin-bottom: 0; margin-right: auto; }

/* --- Hinweise ------------------------------------------------------ */

.hinweis {
  padding: 0.75rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--rand); background: var(--flaeche-2);
  margin-bottom: 1rem;
}
.hinweis.gut     { background: var(--gut-grund);     border-color: var(--gut);     color: var(--gut); }
.hinweis.warnung { background: var(--warnung-grund); border-color: var(--warnung); color: var(--warnung); }
.hinweis.fehler  { background: var(--fehler-grund);  border-color: var(--fehler);  color: var(--fehler); }
.hinweis.merken  { background: var(--warnung-grund); border-color: var(--warnung); }
.hinweis.merken h2 { margin-top: 0; }
.hinweis.gross { padding: 1.25rem 1.5rem; }
.hinweis p:last-child { margin-bottom: 0; }

.hilfstext { color: var(--text-leise); font-size: 0.9rem; }
.hilfstext.klein, .klein { font-size: 0.82rem; }
.leise { color: var(--text-leise); }
.leer { color: var(--text-leise); font-style: italic; padding: 1rem 0; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.umbruch { word-break: break-all; }

/* --- Kacheln ------------------------------------------------------- */

.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kacheln.klein { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kachel {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.kachel.achtung   { border-color: var(--warnung); }
.kachel.stufe-fehler  { border-color: var(--fehler); }
.kachel.stufe-warnung { border-color: var(--warnung); }
.kachel-zahl { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.kachel-zahl.klein { font-size: 1.05rem; }
.kachel-text { font-size: 0.9rem; }
.kachel-zusatz { font-size: 0.78rem; color: var(--text-leise); }

.doppelt { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

/* --- Tabellen ------------------------------------------------------ */

.tabelle {
  width: 100%; border-collapse: collapse;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: hidden;
}
.tabelle th, .tabelle td {
  text-align: left; padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rand); vertical-align: top;
}
.tabelle.kompakt th, .tabelle.kompakt td { padding: 0.35rem 0.6rem; font-size: 0.88rem; }
.tabelle th { background: var(--flaeche-2); font-weight: 600; font-size: 0.85rem; }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle tbody tr:hover { background: var(--flaeche-2); }
.durchgestrichen td:first-child { text-decoration: line-through; }
.achtung-zeile { background: var(--warnung-grund); }

/* Der Log-Betrachter darf breiter sein als der Rest - die Meldung ist
   das Wichtigste auf der Seite. */
.tabelle.logs td:last-child { width: 55%; }
.logzeile details summary { cursor: pointer; }
.logzeile details .detail {
  margin-top: 0.5rem; padding: 0.6rem 0.8rem;
  background: var(--flaeche-2); border-radius: var(--radius);
}
pre.json { margin: 0; font-size: 0.8rem; max-height: 24rem; overflow: auto; }

/* --- Marken -------------------------------------------------------- */

.marke {
  display: inline-block; padding: 0.05rem 0.45rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  border: 1px solid currentColor; white-space: nowrap;
}
.marke-gut     { color: var(--gut); }
.marke-warten  { color: var(--akzent); }
.marke-warnung { color: var(--warnung); }
.marke-fehler  { color: var(--fehler); }
.marke-neutral { color: var(--text-leise); }
.stufe-fehler  { color: var(--fehler); }
.stufe-warnung { color: var(--warnung); }
.stufe-info    { color: var(--text-leise); }
.stufe-leise   { color: var(--text-leise); opacity: 0.75; }

/* --- Formulare und Knoepfe ----------------------------------------- */

.formular { display: flex; flex-direction: column; gap: 0.3rem; max-width: 30rem; }
.formular.breit { max-width: 46rem; }
.formular label, .filterleiste label { font-weight: 600; font-size: 0.85rem; margin-top: 0.6rem; }
.formular .hilfstext { margin: 0.1rem 0 0.4rem; }

input, select, textarea {
  font: inherit; padding: 0.45rem 0.55rem;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text);
}
input:focus, select:focus, textarea:focus, button:focus, a.knopf:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
input.schmal { width: 5.5rem; }
textarea { resize: vertical; }

fieldset { border: 1px solid var(--rand); border-radius: var(--radius); margin: 1rem 0; padding: 0.75rem 1rem; }
legend { font-weight: 600; font-size: 0.85rem; padding: 0 0.35rem; }
.kaestchen { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin: 0.25rem 0; }
.kaestchen input { width: auto; }

.knopf {
  display: inline-block; padding: 0.45rem 0.9rem;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche-2); color: var(--text);
  font: inherit; cursor: pointer; text-decoration: none;
}
.knopf:hover { text-decoration: none; border-color: var(--akzent); }
.knopf.haupt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.knopf.gefahr { color: var(--fehler); border-color: var(--fehler); }
.knopf.leise { color: var(--text-leise); }
.knopf.klein { padding: 0.2rem 0.5rem; font-size: 0.82rem; }
.knopf.gross { padding: 0.7rem 1.4rem; font-size: 1.05rem; }
.knopfreihe { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.inline { display: inline; }

.filterleiste {
  display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.filterleiste .feld { display: flex; flex-direction: column; gap: 0.2rem; }
.filterleiste .feld label { margin-top: 0; }
.filterleiste .feld.weit { flex: 1 1 22rem; }
.filterleiste .feld.weit input { width: 100%; }

.werkzeuge { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.werkzeug-block { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

/* --- Angabenlisten ------------------------------------------------- */

.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0; }
.angaben dt { color: var(--text-leise); font-size: 0.85rem; }
.angaben dd { margin: 0; }

.schritte { padding-left: 1.2rem; }
.schritte li { margin-bottom: 0.4rem; }

/* --- Einzelseiten -------------------------------------------------- */

.anmeldebereich { max-width: 26rem; margin: 3rem auto; }
.fehlerseite { text-align: center; padding: 3rem 1rem; }
.fehlernummer { font-size: 3rem; font-weight: 700; color: var(--text-leise); margin: 0; }
.blaettern { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }

/* --- Schmale Bildschirme ------------------------------------------- */

@media (max-width: 720px) {
  .inhalt { padding: 1rem; }
  .doppelt { grid-template-columns: 1fr; }
  .kopf { gap: 0.75rem; }
  .kopf-rechts { margin-left: 0; }
  /* Tabellen duerfen seitlich rollen, statt die Seite zu sprengen. */
  .tabelle { display: block; overflow-x: auto; white-space: nowrap; }
  .tabelle.logs td:last-child { white-space: normal; }
}