/* =========================================
   DARK MODE – DESIGN SYSTEM (FIXED)
========================================= */

html.dark {

  /* =========================
     SURFACES – NEUTRAL (NO BLUE)
  ========================= */

  --bg-app:        #0e1013;   /* fast schwarz, leicht warm */
  --bg-shell:      #14161a;   /* Navbar */
  --bg-card:       #1a1d22;   /* Cards */
  --bg-card-soft:  #1f2329;   /* Table header / secondary */
  --bg-input:      #16191e;   /* Inputs */

  /* =========================
     TEXT – CLEAN & READABLE
  ========================= */

  --text-main:     #e7e9ee;   /* fast weiß, nicht blau */
  --text-muted:   #a1a7b3;   /* neutral grau */
  --text-faint:   #6f7684;

  /* =========================
     BORDERS
  ========================= */

  --border-soft:   rgba(255,255,255,0.06);
  --border-hard:   rgba(255,255,255,0.12);

  /* =========================
     SHADOW (SUBTLE)
  ========================= */

  --shadow-card:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 8px 24px rgba(0,0,0,0.45);

  /* =========================
     ACCENTS (LESS SATURATED)
  ========================= */

  --accent-blue:   #4f7cff;   /* softer, weniger neon */
  --accent-red:    #e05252;
}


/* =========================================
   GLOBAL BASE
========================================= */

html.dark {
  background: linear-gradient(180deg, #0b0f14, #090c11);
  color: var(--text-main);
}

/* =========================================
   NAVBAR (FIXED SELECTOR)
========================================= */

html.dark .top-nav {
  background: linear-gradient(180deg, var(--bg-shell), var(--bg-app));
  border-bottom: 1px solid var(--border-soft);
}

html.dark .nav-link {
  color: var(--text-muted);
}

html.dark .nav-link.is-active {
  color: var(--text-main);
  border-bottom: 2px solid var(--accent-blue);
}

/* Icons in Navbar */
html.dark .nav-icon {
  color: var(--text-muted);
}

html.dark .nav-icon:hover {
  color: var(--text-main);
  background: rgba(255,255,255,0.06);
}

/* =========================================
   CARDS (GLOBAL)
========================================= */

html.dark .card,
html.dark .wide-card,
html.dark .chart-box,
html.dark .table-card,
html.dark .settings-card,
html.dark .session-header-card,
html.dark .exercise-card,
html.dark .training-right,
html.dark .workout-card,
html.dark .chip-card,
html.dark .dashboard-card,
html.dark .content-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: none; /* Shadow im Darkmode bewusst AUS */
  color: var(--text-main);
}

/* Card Titles */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark .chart-title,
html.dark .history-title {
  color: var(--text-main);
}

/* =========================================
   TEXT (NICHT ALLES GRAU!)
========================================= */

/* normaler Text */
html.dark p,
html.dark label,
html.dark small {
  color: var(--text-muted);
}

/* wichtige Inhalte */
html.dark strong,
html.dark td,
html.dark th,
html.dark .wc-name,
html.dark .stat-value,
html.dark .chip-value-big {
  color: var(--text-main);
}

/* Meta / Secondary */
html.dark .wc-date,
html.dark .chip-title,
html.dark .chip-value-label,
html.dark .stat-label {
  color: var(--text-muted);
}

/* =========================================
   TABLES (FIXED CONTRAST)
========================================= */

html.dark table {
  background: var(--bg-card);
  color: var(--text-main);
}

html.dark thead th {
  background: var(--bg-card-soft);
  color: var(--text-main); /* WICHTIG: nicht muted */
  border-bottom: 1px solid var(--border-soft);
}

html.dark tbody tr {
  border-bottom: 1px solid var(--border-soft);
}

html.dark tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

/* =========================================
   INPUTS
========================================= */

html.dark input,
html.dark textarea,
html.dark select {
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--text-faint);
}

/* Focus */
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue) inset;
}