/*! DOX — Dark Theme (v0.3.14-1 stable)
    Palette an Flaticon-Icons im Violett→Magenta-Verlauf angelehnt.
    Verfälscht KEINE Bilder/SVGs/Logos/Fonts (keine Filter/Blends).
    Dateipfad (wie bisher): api/static/css/themes/dark-theme.css
*/

/* -----------------------------------------------------------
   1) Design-Tokens für Dark-Theme (werden von general.css gelesen)
----------------------------------------------------------- */
[data-theme="dark"] {
  /* Hintergrund-Komposition
     – subtile radiale Akzente im Violett→Magenta-Spektrum */
  --bg:
    radial-gradient(1200px 520px at 10% -10%, rgba(139, 92, 246, 0.08), transparent 60%),
    radial-gradient(900px 420px at 92% 112%, rgba(225, 77, 202, 0.07), transparent 55%),
    linear-gradient(180deg, #0b0f17 0%, #0e131b 38%, #101722 100%);

  /* Flächen */
  --card: #121926;

  /* Typografie */
  --text:  #e6edf3;  /* Primär */
  --muted: #9aa9bd;  /* Sekundär */

  /* Linien/Divider */
  --border: #223046;

  /* Marken-/Interaktionsfarben (violett→magenta) */
  --primary:     #a78bfa; /* Link/Fokus (Violet 400) */
  --primary-600: #8b5cf6; /* aktiver Zustand (Violet 500–600) */

  /* Zusätzliche Verlaufstöne für Kompositionen (optional) */
  --brand-1: #8b5cf6; /* Violet */
  --brand-2: #e14dca; /* Magenta */
  --brand-gradient: linear-gradient(90deg, var(--brand-1), var(--brand-2));

  /* Chips/Pills */
  --chip: #172033;

  /* Schatten */
  --shadow: 0 12px 36px rgba(0,0,0,0.38), 0 4px 14px rgba(0,0,0,0.28);
}

/* -----------------------------------------------------------
   2) Medien NIEMALS farblich beeinflussen
----------------------------------------------------------- */
[data-theme="dark"] img,
[data-theme="dark"] svg,
[data-theme="dark"] picture,
[data-theme="dark"] video,
[data-theme="dark"] canvas {
  filter: none !important;
  mix-blend-mode: normal !important;
  color: inherit;
}

/* -----------------------------------------------------------
   3) Grundelemente, die general.css bereits adressiert
----------------------------------------------------------- */
[data-theme="dark"] a {
  color: var(--primary);
  text-decoration: none;
}
[data-theme="dark"] a:hover { color: #c4b5fd; }
[data-theme="dark"] a:active { color: #ddd6fe; }

[data-theme="dark"] .mini { color: var(--muted); }

[data-theme="dark"] .divider,
[data-theme="dark"] hr {
  border-color: var(--border);
}

/* Scroll-/Pane-Hintergründe */
[data-theme="dark"] .chat-body,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .pane {
  background: var(--card);
}

/* -----------------------------------------------------------
   4) Chat-Bubbles / Chips / Inputs ( Klassen aus general.css )
----------------------------------------------------------- */
[data-theme="dark"] .bubble {
  background: #0f172a;
  border: 1px solid var(--border);
  color: var(--text);
}

/* User-Bubble mit sehr dezenter Marken-Tönung (ohne Icon-Färbung) */
[data-theme="dark"] .msg.user .bubble {
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.10), rgba(225, 77, 202, 0.10));
  border-color: #2b2f5f;
}

[data-theme="dark"] .chip {
  background: var(--chip);
  border: 1px solid #2a3753;
  color: #e9ddff;
}

/* Inputs im dunklen Kontext */
[data-theme="dark"] .input {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .input::placeholder { color: #7f8ca0; }

/* Quellenliste */
[data-theme="dark"] .sources a { color: var(--primary); }
[data-theme="dark"] .sources a:hover { text-decoration: underline; }

/* Top-/Bottom-Links (z.B. in Bars) */
[data-theme="dark"] .top .link,
[data-theme="dark"] .bottom .link {
  color: var(--text);
}
[data-theme="dark"] .top .link:hover,
[data-theme="dark"] .bottom .link:hover {
  opacity: .9;
  text-decoration: none;
}

/* Hover-Lift für Karten/Paneele – ohne Farben zu ändern */
@media (hover: hover) {
  [data-theme="dark"] .pane:hover,
  [data-theme="dark"] .sidebar:hover,
  [data-theme="dark"] .card:hover {
    box-shadow: 0 14px 40px rgba(0,0,0,0.42), 0 6px 16px rgba(0,0,0,0.3);
  }
}

/* -----------------------------------------------------------
   5) Fokus sichtbar & barrierearm (violetter Focus-Ring)
----------------------------------------------------------- */
[data-theme="dark"] :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
  border-radius: 8px;
}

/* -----------------------------------------------------------
   6) Optionale Akzentflächen (falls genutzt)
   – dezente Verlaufskante im Marken-Spektrum
----------------------------------------------------------- */
[data-theme="dark"] .accent-surface {
  background: #121a2a;
  border: 1px solid var(--border);
  color: var(--text);
  position: relative;
}
[data-theme="dark"] .accent-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(139, 92, 246, 0.10) 0%,
              rgba(225, 77, 202, 0.06) 100%);
  border-radius: inherit;
}

/* -----------------------------------------------------------
   7) Druck: hell ausgeben, ohne Assets zu verändern
----------------------------------------------------------- */
@media print {
  [data-theme="dark"] {
    --bg: #ffffff;
    --card: #ffffff;
    --text: #000000;
    --muted: #333333;
    --border: #cccccc;
    --primary: #5b21b6;
    --primary-600: #4c1d95;
    --chip: #efefef;
    --shadow: none;
  }
}