/* Geolyser Ingest - Stil nach dem Geolyser-MapApp-Design-System (DESIGN.md).
   Tokens aus §2 (Dark = Default, Light überschreibt), Knöpfe nach §4,
   Topbar §5.4, Formulare §5.5, Tabellen §5.7. Nur definierte Tokens! */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  /* 2.1 Brand */
  --c-dark: #181B1D; --c-dark-soft: #1f2426; --c-light: #FFFFFF;
  --c-primary: #007FB4; --c-primary-hi: #00A0D2; --c-cyan: #3BBDE8; --c-cyan-soft: #9BD9F5;
  --c-primary-dk: #00608D; --c-primary-xdk: #004161;
  --c-error: #ff5c65; --c-error-bg: rgba(255, 92, 101, .08); --c-warn: #ffc04a;
  /* 2.2 Signal */
  --c-signal: #02FE89; --c-signal-dim: rgba(2, 254, 137, .18); --c-signal-dk: #00c76a;
  /* 2.3 Flächen/Text/Border (Dark) */
  --bg: #181B1D; --bg-elevated: #20262a; --bg-panel: #1c2126; --bg-card: rgba(255, 255, 255, .03);
  --border: rgba(155, 217, 245, .10); --border-hi: rgba(59, 189, 232, .35);
  --fg: #eef3f6; --muted: #8a979e; --muted-hi: #b8c3c9;
  --input-bg: #0d1214; --input-bg-ro: #0a0d0f;
  --topbar-bg: rgba(24, 27, 29, .7);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-lift: 0 6px 18px rgba(0, 127, 180, .18);
  --body-gradient: radial-gradient(1100px 560px at 8% -12%, rgba(0, 127, 180, .20), transparent 60%),
                   radial-gradient(900px 520px at 108% 4%, rgba(2, 254, 137, .07), transparent 60%);
  /* 2.4 Geometrie/Fonts */
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --topbar-h: 56px;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --c-signal: #00b368; --c-signal-dim: rgba(0, 179, 104, .14); --c-signal-dk: #009458;
  --bg: #e3ecf4; --bg-elevated: #ffffff; --bg-panel: #eaf1f8; --bg-card: #eaf1f8;
  --border: #c1ced9; --border-hi: #8fa6b8;
  --fg: #161b1e; --muted: #566168; --muted-hi: #2a3438;
  --input-bg: #ffffff; --input-bg-ro: #e8eef4;
  --topbar-bg: rgba(255, 255, 255, .85);
  --shadow-card: 0 8px 24px rgba(40, 70, 100, .14), 0 1px 3px rgba(40, 70, 100, .10);
  --shadow-lift: 0 6px 18px rgba(0, 127, 180, .15);
  --body-gradient: radial-gradient(1100px 560px at 8% -12%, rgba(0, 127, 180, .10), transparent 60%),
                   radial-gradient(900px 520px at 108% 4%, rgba(0, 179, 104, .06), transparent 60%);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); background-image: var(--body-gradient); background-attachment: fixed;
  color: var(--fg); font: 15px/1.4 var(--font-ui); min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, .wordmark { font-family: var(--font-display); font-weight: 600; }
a { color: var(--c-primary-hi); }

/* §4 Knöpfe */
.primary, .ghost { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius);
  padding: 8px 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .12s, border-color .12s, color .12s; font-size: 14px; line-height: 1.2; }
.primary { background: var(--c-primary); color: var(--c-light); border-color: var(--c-primary-dk); }
.primary:hover { background: var(--c-primary-hi); }
.primary:disabled { background: var(--c-primary-dk); }
.ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--fg); }
.ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); }
:root[data-theme="light"] .ghost { background: rgba(0, 0, 0, .04); border-color: var(--border); }
:root[data-theme="light"] .ghost:hover { background: rgba(0, 0, 0, .10); border-color: var(--border-hi); }
.ghost.danger { color: var(--c-error); border-color: var(--c-error); background: transparent; }
.ghost.danger:hover { background: var(--c-error-bg); }
.btn-amber { background: rgba(201, 138, 0, .15); color: #c98a00; border-color: rgba(201, 138, 0, .55); }
.btn-amber:hover { background: rgba(201, 138, 0, .28); border-color: rgba(201, 138, 0, .80); }
:root:not([data-theme="light"]) .btn-amber { color: #f5c869; }
.btn-cyan { background: rgba(59, 189, 232, .15); color: #1d8fb8; border-color: rgba(59, 189, 232, .55); }
.btn-cyan:hover { background: rgba(59, 189, 232, .28); border-color: rgba(59, 189, 232, .80); }
:root:not([data-theme="light"]) .btn-cyan { color: #6ed6f4; }
button:disabled { cursor: not-allowed; opacity: .55; }
.icon-btn { padding: 6px; line-height: 0; width: 36px; height: 36px; justify-content: center; }
.icon-btn svg { width: 18px; height: 18px; }

/* Theme-Toggle: zeigt das ZIEL-Theme (Sonne im Dark, Mond im Light) */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* §5.5 Felder */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: .8em; color: var(--muted); }
input[type=text], input[type=password], input[type=number], select {
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 14px; color: var(--fg); min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--border-hi); box-shadow: 0 0 0 3px rgba(0, 127, 180, .18); }
input[type=checkbox] { accent-color: var(--c-primary); width: 17px; height: 17px; }

/* §5.4 Topbar */
.topbar { position: sticky; top: 0; z-index: 10; height: var(--topbar-h); display: flex; align-items: center;
  gap: 18px; padding: 0 20px; background: var(--topbar-bg); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.wordmark { font-size: 17px; letter-spacing: .2px; }
.wordmark span { color: var(--c-primary-hi); }
.spacer { flex: 1; }

/* Karten / Panels (Tokens wie .modal-card) */
.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden; }

/* Badges / Pillen */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75em; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.b-ok { background: var(--c-signal-dim); color: var(--c-signal-dk); border-color: var(--c-signal-dim); }
:root:not([data-theme="light"]) .b-ok { color: var(--c-signal); }
.b-still, .b-fehler { background: var(--c-error-bg); color: var(--c-error); border-color: rgba(255, 92, 101, .35); }
.b-nie, .b-aus { background: var(--bg-card); color: var(--muted); border-color: var(--border); }
.b-warn { background: rgba(201, 138, 0, .15); color: #c98a00; border-color: rgba(201, 138, 0, .45); }
:root:not([data-theme="light"]) .b-warn { color: #f5c869; }

/* §5.7 Tabellen */
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted-hi); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; background: var(--bg-elevated); }
tbody tr:hover td, tr.row:hover td { background: var(--bg-card); }
tr:last-child td { border-bottom: 0; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* Toast (§5.2 .geolyser-toast) */
.geolyser-toast { position: fixed; left: 50%; top: 68px; transform: translate(-50%, -8px); z-index: 50;
  background: var(--bg-elevated); color: var(--fg); border: 1px solid var(--border); border-left: 4px solid var(--c-primary);
  border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-card); opacity: 0; pointer-events: none;
  transition: .18s; max-width: min(92vw, 520px); font-size: 14px; }
.geolyser-toast.show { opacity: 1; transform: translate(-50%, 0); }
.geolyser-toast.error { border-left-color: #ef4444; }
.geolyser-toast.success { border-left-color: #10B981; }

/* Zeitreihen-Diagramm (static/chart.js). Eine Reihe je Diagramm, Markenfarbe,
   im Dark Mode --c-primary-hi (Farbprüfung: beide Modi bestanden). */
.tchart { position: relative; }
.tchart svg { display: block; overflow: visible; }
.tc-grid line { stroke: var(--border); stroke-width: 1; }
.tc-label { fill: var(--muted); font-size: 11px; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.tc-line { fill: none; stroke: var(--c-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tc-dot { fill: var(--c-primary); stroke: var(--bg-elevated); stroke-width: 2; }
:root:not([data-theme="light"]) .tc-line { stroke: var(--c-primary-hi); }
:root:not([data-theme="light"]) .tc-dot { fill: var(--c-primary-hi); }
.tc-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tc-empty { fill: var(--muted); font-size: 13px; font-family: var(--font-ui); }
.tc-tip { position: absolute; pointer-events: none; z-index: 2; display: grid; gap: 1px; white-space: nowrap;
  background: var(--bg-elevated); border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  padding: 5px 9px; box-shadow: var(--shadow-card); font-size: 12.5px; }
.tc-tip[hidden] { display: none; }
.tc-tip strong { color: var(--fg); font-size: 13.5px; }
.tc-tip span { color: var(--muted); }
.tchart rect:focus { outline: none; }
.tchart rect:focus-visible { outline: 2px solid var(--border-hi); }