/* Amazon-Repricer – Arbeitsoberflaeche. Dicht, klar, ohne Schnoerkel.
   Helles und dunkles Schema ueber prefers-color-scheme. Kein CDN. */

:root {
  --bg: #f5f6f8;
  --fg: #1b1e23;
  --muted: #5b6470;
  --panel: #ffffff;
  --border: #d4d9e0;
  --accent: #1a5fb4;
  --accent-fg: #ffffff;
  --ok-bg: #d8efd8;
  --ok-border: #2e7d32;
  --ok-fg: #1d4d20;
  --err-bg: #fbe2e2;
  --err-border: #b3261e;
  --err-fg: #7a1712;
  --warn-bg: #fdf3d7;
  --warn-fg: #6b5410;
  --row-alt: #f0f2f5;
  --input-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d;
    --fg: #e4e7eb;
    --muted: #9aa3af;
    --panel: #1f232a;
    --border: #3a414b;
    --accent: #6ba4e7;
    --accent-fg: #10233c;
    --ok-bg: #1d3320;
    --ok-border: #4caf50;
    --ok-fg: #a5d6a7;
    --err-bg: #3d1c1a;
    --err-border: #ef5350;
    --err-fg: #f2b8b5;
    --warn-bg: #3a320f;
    --warn-fg: #e6cc7a;
    --row-alt: #23272f;
    --input-bg: #14171c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 system-ui, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

main { max-width: 1280px; margin: 0 auto; padding: 12px 16px 48px; }

h1 { font-size: 20px; margin: 14px 0 10px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
h3 { font-size: 14px; margin: 14px 0 6px; }

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

/* ---- Status-Banner ------------------------------------------------------ */

.banner {
  padding: 8px 16px;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid transparent;
}
.banner-dry { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.banner-live { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-border); }

/* ---- Navigation --------------------------------------------------------- */

nav {
  display: flex;
  gap: 4px;
  padding: 6px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
nav a {
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--fg);
}
nav a:hover { background: var(--row-alt); }
nav a.aktiv { background: var(--accent); color: var(--accent-fg); }

.nav-benutzer { margin-left: auto; padding: 5px 0; color: var(--muted); font-size: 13px; }
.nav-benutzer a { color: var(--accent); }

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

.login-box { max-width: 420px; margin: 48px auto 0; }
.login-box input[type=text], .login-box input[type=password] { width: 100%; }

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

.flash { padding: 8px 12px; border-radius: 4px; margin: 10px 0; border: 1px solid; }
.flash.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.flash.err { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-border); }

.feld-fehler { color: var(--err-border); font-size: 12px; display: block; margin-top: 2px; }
input.fehlerhaft, select.fehlerhaft { border-color: var(--err-border); }

/* ---- Kennzahlen (Dashboard) -------------------------------------------- */

.kacheln { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.kachel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 16px;
  min-width: 170px;
}
.kachel .wert { font-size: 26px; font-weight: 700; }
.kachel .label { color: var(--muted); font-size: 12px; }

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

.tabelle-scroll { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 13px;
}
th, td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { background: var(--row-alt); white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--row-alt); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font-family: Consolas, monospace; font-size: 12px; }

.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  background: var(--row-alt);
  border: 1px solid var(--border);
  margin-right: 2px;
}
.badge.gruen { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.badge.rot { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-border); }

/* ---- Formulare ---------------------------------------------------------- */

form.inline { display: inline; }

fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  margin: 0 0 14px;
  padding: 8px 12px 12px;
}
legend { font-weight: 700; padding: 0 6px; }

label { display: inline-block; margin: 4px 0 2px; }
label.check { margin-right: 14px; }

input[type=text], input[type=number], input[type=time], input[type=password], select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
}
input.zahl { width: 90px; text-align: right; }
input.kurz { width: 70px; }

.formzeile { margin: 6px 0; }
.formgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 4px 18px;
}
.formgrid > div { min-width: 0; }
.hinweis { color: var(--muted); font-size: 12px; }

button, input[type=submit] {
  padding: 5px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
}
button.sekundaer { background: var(--panel); color: var(--accent); }
button.gefahr { background: var(--err-border); border-color: var(--err-border); color: #fff; }

/* ---- Werkzeugleisten / Paging ------------------------------------------ */

.werkzeuge {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.paging { margin: 10px 0; display: flex; gap: 12px; align-items: center; }
.paging .muted { color: var(--muted); }

/* ---- Entscheidungs-Log -------------------------------------------------- */

.entscheidung {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  margin: 0 0 14px;
}
.entscheidung > header {
  padding: 6px 10px;
  background: var(--row-alt);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
}
.entscheidung > header .zeit { color: var(--muted); }
.entscheidung table { border: 0; }

.stufe { font-weight: 700; white-space: nowrap; }

/* Erklaer-Tooltips: gepunktete Unterstreichung + Hilfe-Cursor signalisieren,
   dass beim Ueberfahren eine Erklaerung erscheint (title-Attribut). */
th[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.kachel[title], .badge[title], td[title], label[title] { cursor: help; }

/* Hilfe-Seite: Begriff/Erklaerung-Liste. */
.hilfe-liste dt {
  font-weight: 700;
  margin-top: 12px;
}
.hilfe-liste dd {
  margin: 2px 0 0 0;
  color: var(--muted);
  max-width: 70ch;
}