/* Gemeinsame Seiten-Chrome für die statischen Seiten (toolbox.html,
 * stromland.html) — Kopfbereich, Hauptnavigation, Seitengrund.
 *
 * Spiegelt bewusst 1:1 den React-Header (src/components/AppHeader.tsx):
 * gleiche Marke, gleiche Pillen-Navigation, gleiche Farben, gleicher Grund.
 * Wer hier etwas ändert, ändert es dort mit — gleiche Regel wie bei
 * streams.ts / streams.py (siehe CLAUDE.md).
 *
 * Bewusst NICHT hier drin: der Inhalt der Seiten. Die Rechner-Karten der
 * Toolbox und die Wind-/Solar-/Batterie-Farben von Stromland sind
 * fachliche Gestaltung und bleiben in den Seiten selbst.
 */

:root {
  /* qurix-Marke — identisch zu tailwind.config.js */
  --qx-green: #5AB787;
  --qx-green-dark: #4a9e74;
  --qx-navy: #1a1a2e;

  /* Seitengrund wie die React-Seiten (Tailwind gray-50) */
  --qx-page-bg: #f9fafb;
  --qx-surface: #ffffff;
  --qx-border: #e5e7eb;
  --qx-text: #374151;
  --qx-text-muted: #6b7280;
  --qx-text-faint: #9ca3af;

  --qx-font-sans: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.qx {
  margin: 0;
  background: var(--qx-page-bg);
  color: var(--qx-text);
  font-family: var(--qx-font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------- Kopfbereich ---------- */

.qx-header {
  background: var(--qx-surface);
  border-bottom: 1px solid var(--qx-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.qx-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.qx-logo { height: 36px; width: auto; display: block; flex: none; }
.qx-brand {
  border-left: 1px solid var(--qx-border);
  padding-left: 16px;
  min-width: 0;
}
.qx-brand h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--qx-navy);
  line-height: 1.25;
}
.qx-brand p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--qx-text-muted);
}

/* ---------- Hauptnavigation ---------- */

.qx-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.qx-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid;
  text-decoration: none;
  white-space: nowrap;
  background: var(--qx-surface);
  transition: background-color .12s, border-color .12s, color .12s;
}
.qx-nav a svg { width: 16px; height: 16px; flex: none; }
.qx-nav .qx-label { display: inline; }
@media (max-width: 640px) { .qx-nav .qx-label { display: none; } }

/* Werkzeug-Icon statt Produkt-Pille.
   Der Portal-Einstieg steht neben der Navigation, gehoert aber nicht in die
   Reihe der Produkte (Briefing, Radar, Schocks ...). Deshalb ohne Rahmen,
   ohne Flaeche und gedaempft — gleicher Auftritt wie das Zahnrad in der
   React-Kopfzeile (siehe AppHeader.tsx). */
.qx-nav a.qx-icon-link {
  border: none;
  background: none;
  padding: 8px;
  /* Etwas dunkler als zuvor: Mit sichtbarer Beschriftung muss der Text
     lesbar sein, nicht nur das Icon erkennbar. */
  color: #6b7280;
  gap: 6px;
  /* Abstand und Trennlinie zu den Produkt-Pillen links — gespiegelt zu
     AppHeader.tsx, wo die Werkzeuge rechts in einem eigenen Block mit
     `border-l` stehen (Andreas, 2026-10-20). Hier gibt es nur dieses
     eine Icon, deshalb hängt die Linie direkt am Element statt an einer
     Gruppe. */
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid #e5e7eb;
}
.qx-nav a.qx-icon-link:hover { color: #374151; background: none; }

/* Ruhezustand je Akzent — Werte identisch zu ACCENT_IDLE in navItems.ts */
.qx-nav a[data-accent="navy"]   { color:#334155; border-color:#e2e8f0; }
.qx-nav a[data-accent="navy"]:hover   { background:#f1f5f9; border-color:#cbd5e1; }
.qx-nav a[data-accent="green"]  { color:#047857; border-color:#a7f3d0; }
.qx-nav a[data-accent="green"]:hover  { background:#ecfdf5; border-color:#6ee7b7; }
.qx-nav a[data-accent="amber"]  { color:#b45309; border-color:#fde68a; }
.qx-nav a[data-accent="amber"]:hover  { background:#fffbeb; border-color:#fcd34d; }
.qx-nav a[data-accent="rose"]   { color:#be123c; border-color:#fecdd3; }
.qx-nav a[data-accent="rose"]:hover   { background:#fff1f2; border-color:#fda4af; }
.qx-nav a[data-accent="teal"]   { color:#0e7490; border-color:#a5f3fc; }
.qx-nav a[data-accent="teal"]:hover   { background:#ecfeff; border-color:#67e8f9; }
.qx-nav a[data-accent="violet"] { color:#6d28d9; border-color:#ddd6fe; }
.qx-nav a[data-accent="violet"]:hover { background:#f5f3ff; border-color:#c4b5fd; }

/* Aktive Seite — gefüllt, identisch zu ACCENT_ACTIVE in navItems.ts */
.qx-nav a[aria-current="page"] { color:#fff; }
.qx-nav a[aria-current="page"][data-accent="navy"]   { background:#334155; border-color:#334155; }
.qx-nav a[aria-current="page"][data-accent="green"]  { background:#059669; border-color:#059669; }
.qx-nav a[aria-current="page"][data-accent="amber"]  { background:#d97706; border-color:#d97706; }
.qx-nav a[aria-current="page"][data-accent="rose"]   { background:#e11d48; border-color:#e11d48; }
.qx-nav a[aria-current="page"][data-accent="teal"]   { background:#0e7490; border-color:#0e7490; }
.qx-nav a[aria-current="page"][data-accent="violet"] { background:#7c3aed; border-color:#7c3aed; }

/* ---------- Inhaltsbereich ---------- */

.qx-main { max-width: 1280px; margin: 0 auto; padding: 24px; }

/* ---------- Gemeinsame Inhalts-Primitive ----------
 *
 * Spiegeln die Tailwind-Klassen, die die React-Seiten benutzen, damit eine
 * Karte in der Toolbox genauso aussieht wie eine Karte auf /schocks:
 *   Karte      = bg-white border border-gray-200 rounded-xl
 *   Karten-Titel = text-sm font-bold text-qurix-navy uppercase tracking-wider
 *   Beschreibung = text-xs text-gray-500
 *   Kennzahl   = text-2xl font-bold text-qurix-navy tabular-nums
 * Bewusst ohne Schatten — die React-Karten haben keinen.
 */

:root {
  --qx-surface-muted: #f9fafb;   /* gray-50  */
  --qx-border-soft:  #f3f4f6;    /* gray-100 */
  --qx-radius: 12px;             /* rounded-xl */
  --qx-pos: #059669;             /* emerald-600 */
  --qx-neg: #e11d48;             /* rose-600    */
  --qx-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

.qx-card {
  background: var(--qx-surface);
  border: 1px solid var(--qx-border);
  border-radius: var(--qx-radius);
  overflow: hidden;
}
.qx-card-h { padding: 16px 18px 12px; }
.qx-card-h h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--qx-navy);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.3;
}
.qx-card-h .qx-desc {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--qx-text-muted);
  line-height: 1.45;
}
.qx-card-b { padding: 4px 18px 18px; }

.qx-field-label { font-size: 11px; color: var(--qx-text-muted); font-weight: 600; }
.qx-unit {
  font-size: 10.5px; font-weight: 500;
  color: var(--qx-text-faint); font-family: var(--qx-font-mono);
}
.qx-input {
  width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right;
  color: var(--qx-navy); background: var(--qx-surface-muted);
  border: 1px solid var(--qx-border); border-radius: 8px; padding: 8px 10px;
  transition: border-color .12s, background-color .12s;
}
.qx-input:focus {
  outline: none; border-color: var(--qx-green);
  background: var(--qx-surface); box-shadow: 0 0 0 1px var(--qx-green);
}

.qx-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--qx-surface-muted); border: 1px solid var(--qx-border-soft);
  border-radius: 8px; padding: 10px 12px;
}
.qx-stat .qx-stat-l { font-size: 12px; color: var(--qx-text-muted); font-weight: 600; }
.qx-stat .qx-stat-v {
  font-size: 20px; font-weight: 700; color: var(--qx-navy);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qx-stat.qx-hero { background: rgba(90, 183, 135, .10); border-color: rgba(90, 183, 135, .35); }
.qx-stat.qx-hero .qx-stat-v { font-size: 23px; }
.qx-pos { color: var(--qx-pos); }
.qx-neg { color: var(--qx-neg); }

.qx-note { font-size: 11.5px; color: var(--qx-text-faint); line-height: 1.5; }
.qx-note b { color: var(--qx-text-muted); }