/**
 * BULL | SIG — Portal-Angleichung v1.0
 * Ablage: portal/css/portal-theme.css
 *
 * Legt sich ueber die bestehenden Portal-Stile und bringt sie auf die
 * Marken-Grundlage. Die alte Datei bleibt unangetastet — hier werden
 * nur die Variablen umgebogen, auf denen das Portal ohnehin aufbaut.
 *
 * WICHTIG: NACH dem eigenen <style>-Block einbinden, sonst greift nichts:
 *   <link rel="stylesheet" href="/css/bullsig.css">
 *   <link rel="stylesheet" href="/css/portal-theme.css">
 *
 * Was sich aendert:
 *   · Dunkel ist Standard (vorher hell)
 *   · Gold #C9A84C -> #c5a358, gleiche Toene wie Startseite und Kaufseite
 *   · Schriften lokal statt von Google
 *   · Buttons, Karten und Eingaben im Stil der uebrigen Seiten
 */

/* ═════════════════════════════════════════════════════════════
   1 · DUNKEL IST STANDARD
   Das Portal setzt :root auf Hell. Wir kehren das um: ohne
   data-theme gilt Dunkel, data-theme="light" schaltet auf Hell.
   ═════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  --bg:             #050505;
  --surface:        #0e0e0e;
  --border:         #1e1e22;
  --text:           #f3f3f4;
  --sub:            #8a8a91;
  --muted:          #cfcfd4;
  --input-bg:       #0a0a0b;
  --card-bg:        #111113;
  --hover-bg:       #16161a;
  --sidebar-active: #16161a;
  --gold:           #c5a358;
}

[data-theme="light"] {
  --bg:             #fafafa;
  --surface:        #ffffff;
  --border:         #e5e5e5;
  --text:           #1a1a1a;
  --sub:            #888888;
  --muted:          #3a3a3a;
  --input-bg:       #ffffff;
  --card-bg:        #f5f5f5;
  --hover-bg:       #f0f0f0;
  --sidebar-active: #ffffff;
  --gold:           #9d7d3a;
}


/* ═════════════════════════════════════════════════════════════
   2 · SCHRIFTEN
   ═════════════════════════════════════════════════════════════ */

html, body,
input, select, textarea, button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.brand-title,
.main h1,
h1, h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

.brand-title { letter-spacing: 0.14em !important; }

.brand-tagline,
.info-card .lbl,
th {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
  font-weight: 300 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}


/* ═════════════════════════════════════════════════════════════
   3 · FLÄCHEN UND RAHMEN
   ═════════════════════════════════════════════════════════════ */

body { background: var(--bg); color: var(--text); }

/* Damit der Umschalter oben rechts sitzt */
.login-wrap { position: relative; }

.card,
.main,
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.sidebar-tab {
  color: var(--sub);
  border-radius: 3px;
}
.sidebar-tab:hover { background: var(--hover-bg); color: var(--text); }
.sidebar-tab.active {
  background: var(--hover-bg);
  color: var(--text);
  border-color: var(--gold);
}

.tab-bar { border-bottom: 1px solid var(--border); }
.tab-bar button { color: var(--sub); font-weight: 400; }
.tab-bar button.active { color: var(--text); border-bottom-color: var(--gold); }


/* ═════════════════════════════════════════════════════════════
   4 · SCHALTFLÄCHEN — Gold statt Schwarz, wie auf den anderen Seiten
   ═════════════════════════════════════════════════════════════ */

button.submit,
.btn-primary {
  background: var(--gold) !important;
  color: #14120c !important;
  border: 1px solid var(--gold) !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: 0.3s;
}
button.submit:hover,
.btn-primary:hover {
  background: transparent !important;
  color: var(--gold) !important;
  box-shadow: 0 0 34px rgba(197, 163, 88, 0.22);
}

.btn-secondary,
.btn-logout {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
}
.btn-secondary:hover,
.btn-logout:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

.btn-gold {
  background: var(--gold) !important;
  color: #14120c !important;
  border: 1px solid var(--gold) !important;
}

.btn-danger {
  background: transparent !important;
  color: #f28b8b !important;
  border: 1px solid rgba(192, 64, 64, 0.4) !important;
}

.btn { border-radius: 3px; }


/* ═════════════════════════════════════════════════════════════
   5 · EINGABEN
   ═════════════════════════════════════════════════════════════ */

input[type="email"], input[type="text"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  color: var(--text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--sub); }

label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
}


/* ═════════════════════════════════════════════════════════════
   6 · HINWEISE UND ABZEICHEN
   ═════════════════════════════════════════════════════════════ */

.alert, .error, .info { border-radius: 3px; }

.alert.ok, .info {
  background: rgba(45, 139, 92, 0.15) !important;
  border: 1px solid rgba(45, 139, 92, 0.35) !important;
  color: #4ade80 !important;
}
.alert.err, .error {
  background: rgba(192, 64, 64, 0.15) !important;
  border: 1px solid rgba(192, 64, 64, 0.35) !important;
  color: #f28b8b !important;
}
.alert.info {
  background: rgba(197, 163, 88, 0.12) !important;
  border: 1px solid rgba(197, 163, 88, 0.35) !important;
  color: var(--gold) !important;
}

[data-theme="light"] .alert.ok, [data-theme="light"] .info {
  background: #e8f5ee !important; border-color: #bfd6c8 !important; color: #1f7a4d !important;
}
[data-theme="light"] .alert.err, [data-theme="light"] .error {
  background: #fdeded !important; border-color: #e5bbbb !important; color: #a03030 !important;
}
[data-theme="light"] .alert.info {
  background: #fdf6e3 !important; border-color: #e8d9a8 !important; color: #8a6a1a !important;
}

.badge { border-radius: 10px; font-weight: 400; font-size: 10px; letter-spacing: 0.06em; }
.badge.ok   { background: rgba(45,139,92,0.15);  color: #4ade80; }
.badge.warn { background: rgba(197,163,88,0.12); color: var(--gold); }
.badge.bad  { background: rgba(192,64,64,0.15);  color: #f28b8b; }
.badge.gold { background: rgba(197,163,88,0.12); color: var(--gold); border: 1px solid rgba(197,163,88,0.35); }

[data-theme="light"] .badge.ok   { background:#dcfce7; color:#166534; }
[data-theme="light"] .badge.warn { background:#fef9c3; color:#854d0e; }
[data-theme="light"] .badge.bad  { background:#fee2e2; color:#991b1b; }
[data-theme="light"] .badge.gold { background:#fbf8f0; color:#9c7b1b; border-color:#f0e5c5; }


/* ═════════════════════════════════════════════════════════════
   7 · TABELLEN
   ═════════════════════════════════════════════════════════════ */

th {
  font-size: 10px !important;
  color: var(--sub) !important;
  border-bottom: 1px solid var(--border) !important;
}
td { border-bottom: 1px solid var(--border) !important; color: var(--muted); }
tr:hover td { background: var(--hover-bg); }


/* ═════════════════════════════════════════════════════════════
   8 · RISIKO-BANNER — im Hell-Modus war er dunkel, das war falsch
   ═════════════════════════════════════════════════════════════ */

.risk-banner {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}
.risk-banner-text { color: var(--sub) !important; }
.risk-banner-text strong { color: var(--gold) !important; }


/* ═════════════════════════════════════════════════════════════
   9 · HELLE INLINE-FARBEN AUS app.js ABFANGEN
   app.js schreibt viele Farben direkt ins Markup. Im dunklen
   Modus faengt der bestehende Block in portal.html das ab —
   diese Regeln ergaenzen, was dort fehlt.
   ═════════════════════════════════════════════════════════════ */

:root [style*="background:#F5F8FF"],
:root [style*="background:#DCE3F0"],
[data-theme="dark"] [style*="background:#F5F8FF"] {
  background: rgba(58, 96, 144, 0.12) !important;
  border-color: rgba(58, 96, 144, 0.3) !important;
  color: var(--text) !important;
}

:root [style*="color:#9d7d3a"],
:root [style*="color:#8B6914"],
[data-theme="dark"] [style*="color:#8B6914"] { color: var(--gold) !important; }

:root [style*="border-left:3px solid #A03030"] { border-left-color: #f28b8b !important; }

/* Die Hell-Variante braucht keine Umschreibung — dort passen die
   Originalfarben aus app.js. */
[data-theme="light"] [style*="background:#FFF"],
[data-theme="light"] [style*="background:#FAFAFA"],
[data-theme="light"] [style*="background:#F5F5F5"] { background: unset; }