/* =============================================================================
 * mgb-cleanup.css — Multigridbot Cleanup & Brand-Unification Layer
 *
 * Lädt ZULETZT, nach style.css / dashboard-v3.css / dark-mode.css / mobile-safety.css.
 * Fixt die Konsistenz-Probleme aus dem Design-Audit ohne die Legacy-Dateien
 * direkt anzufassen, sodass nichts kaputt geht.
 *
 * Nach der vollständigen Migration auf V3 sollte diese Datei in tokens.css
 * verschmolzen und das !important entfernt werden.
 *
 * Einbinden in base/base.html UND user/base_v3.html als LETZTER stylesheet-Link:
 *   <link rel="stylesheet" href="{{ url_for('static', filename='css/mgb-cleanup.css') }}?v=1">
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * 1. BRAND-FARBE: Legacy Cyan → Orange (Dark-Mode-Akzent)
 *
 * style.css setzt im Dark-Mode --accent auf #22d3ee. Wir überschreiben das
 * konsequent auf die Marken-Orange-Variante (etwas heller für Dark-Mode-Lesbarkeit).
 * --------------------------------------------------------------------------- */

[data-theme="dark"] {
  --accent:        #FB923C !important;
  --accent-hover:  #F97316 !important;
  --accent-light:  rgba(249, 115, 22, 0.15) !important;
  --accent-2:      #FDBA74 !important;
  --info:          #FB923C !important;
  --card-glow:     rgba(249, 115, 22, 0.10) !important;
  --nav-border:    rgba(249, 115, 22, 0.20) !important;
  --bg-gradient:   radial-gradient(1200px 600px at 80% -10%, rgba(249, 115, 22, 0.08), transparent 60%),
                   linear-gradient(180deg, #0f172a, #0b1321) !important;
}

[data-theme="dark"] .kpi-card:hover {
  border-color: rgba(249, 115, 22, 0.30) !important;
}
[data-theme="dark"] .kpi-icon {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05)) !important;
  color: #FB923C !important;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.10) !important;
}


/* -----------------------------------------------------------------------------
 * 2. PROFIT-FARBE: nicht mehr theme-abhängig flippen
 *
 * Status-Farben dürfen niemals Bedeutung wechseln. Profit = Grün, immer.
 * --------------------------------------------------------------------------- */

:root,
[data-theme="dark"],
[data-theme="light"] {
  --status-profit: #22C55E !important;
  --ok:            #22C55E !important;
  --success:       #22C55E !important;
  --status-active: var(--accent) !important;
}


/* -----------------------------------------------------------------------------
 * 3. DCA-FARBE: nicht mehr identisch mit Warning
 *
 * DCA bekommt dezentes Violett — distinkt zu Warning (#F59E0B) und zu Brand-Orange.
 * --------------------------------------------------------------------------- */

:root {
  --accent-dca:      #7C3AED;
  --accent-dca-soft: rgba(124, 58, 237, 0.12);
}

.bot-type-tab.dca-tab.active        { color: var(--accent-dca) !important; }
.bot-type-tab.dca-tab.active::after { background: var(--accent-dca) !important; }
.bot-type-tab.dca-tab.active .tab-count {
  background: var(--accent-dca) !important;
  color: white !important;
}


/* -----------------------------------------------------------------------------
 * 4. MODAL-CONFIRM-BUTTON: war farblos (= var(--card))
 * --------------------------------------------------------------------------- */

.modal-btn-confirm {
  background: linear-gradient(135deg, #F97316, #EA580C) !important;
  color: white !important;
}
.modal-btn-confirm:hover {
  background: linear-gradient(135deg, #FB923C, #F97316) !important;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35) !important;
}


/* -----------------------------------------------------------------------------
 * 5. FEEDBACK-WIDGET: Position fixen, nicht mit Bottom-Nav kollidieren
 * --------------------------------------------------------------------------- */

@media (max-width: 768px) {
  #feedback-widget {
    bottom: 84px !important;   /* über der Bottom-Nav (höhe ~64px + abstand) */
  }
}

#feedback-btn {
  background: linear-gradient(135deg, #F97316, #EA580C) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: white !important;
}


/* -----------------------------------------------------------------------------
 * 6. EXPERT-MODE-HEADER (bot_create.html): Cyan → Orange
 * --------------------------------------------------------------------------- */

.expert-header {
  background:
    radial-gradient(600px 300px at 50% 50%, rgba(249, 115, 22, 0.13), transparent 70%),
    linear-gradient(135deg, rgba(15, 20, 25, 0.9) 0%, rgba(30, 35, 48, 0.9) 100%) !important;
  border-color: rgba(249, 115, 22, 0.35) !important;
}
.expert-header::before { color: rgba(249, 115, 22, 0.05) !important; }
.expert-badge {
  background: rgba(249, 115, 22, 0.15) !important;
  border-color: rgba(249, 115, 22, 0.40) !important;
  color: #F97316 !important;
}


/* -----------------------------------------------------------------------------
 * 7. NAV-DROPDOWN-AKTIV-STATE: Cyan → Orange (base.html legacy)
 * --------------------------------------------------------------------------- */

.nav-dropdown-menu a.active {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.10) 0%, rgba(249, 115, 22, 0.05) 100%) !important;
  border-left-color: #F97316 !important;
  color: #F97316 !important;
}
.lang-option.active {
  background: rgba(249, 115, 22, 0.10) !important;
  color: #F97316 !important;
}


/* -----------------------------------------------------------------------------
 * 8. PLAN-BADGE „PRO": Lila → Brand-Orange (das Marken-Tier sollte die Marke tragen)
 * --------------------------------------------------------------------------- */

.plan-badge.plan-pro {
  background: linear-gradient(135deg, #FB923C, #EA580C) !important;
  color: white !important;
}
.plan-badge.plan-enterprise {
  background: linear-gradient(135deg, #1E293B, #0F172A) !important;
  color: #FDBA74 !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
}


/* -----------------------------------------------------------------------------
 * 9. NEWS-TICKER: Cyan → Orange
 * --------------------------------------------------------------------------- */

#news-ticker span,
.news-ticker-track span {
  color: #F97316 !important;
}


/* -----------------------------------------------------------------------------
 * 10. LOGIN-BUTTON: dashed-Border → solid
 * --------------------------------------------------------------------------- */

.btn.link {
  border-style: solid !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Risiko-Hinweis „ausblenden": gefülltes Marken-Orange (wie das PRO-Badge im
   Header) statt nur Orange-Outline. Scoped auf die ID, damit andere .btn.link
   (z.B. Login) unverändert bleiben. */
#mgb-td-dismiss {
  background: linear-gradient(135deg, var(--mgb-color-accent, #F97316), var(--mgb-color-accent-hover, #EA580C)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
  cursor: pointer;
}


/* -----------------------------------------------------------------------------
 * 11. EMOJI-FREIE NAV (Legacy-base.html, nur visuell — Markup bleibt unverändert)
 *
 * Versteckt die führenden Emojis in den alten Nav-Links via CSS-Pseudo-Element,
 * solange das Template noch existiert. Ist ein Übergangs-Hack — langfristig
 * sollten die Emojis aus base/base.html entfernt werden (siehe README).
 * --------------------------------------------------------------------------- */

/* keine Emoji-Ausblendung per CSS möglich ohne Text-Content-Replacement;
   stattdessen mind. ein Reset für die Schriftgröße, damit Emojis nicht zu groß werden: */
.main-nav a,
.nav-dropdown-toggle,
.nav-dropdown-menu a {
  font-variant-emoji: text;   /* Emojis nicht als Bild, sondern als Text */
}


/* -----------------------------------------------------------------------------
 * 12. FOCUS-RING: einheitlich Orange (war teilweise default-blau)
 * --------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid #F97316 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25) !important;
  border-radius: 4px;
}