/* 🌙 DARK MODE */

html.dark {
  --color-text: #bbc2cf;
  --color-text-secondary: #999;
  --color-text-hidden: #616161;

  --color-bg-header: #22272a;
  --color-bg-footer: #22272a;

  --color-bg: #22272a;
  --color-bg-wrap: #22272a;
  
  --color-bg-alt: #2c313a;       /* Boxen & Panels */ 
 
  --color-border: #4d525c;
  --shadow: 0 4px 12px rgba(255, 255, 255, 0.06);
  
  --color-bg-secondary: #2c313a; /* Source Block */

  --color-bg-tabbed-panel: #2c313a; /* optimal → analog zu Source Block */
  --color-bg-tabbed-panel-border: #4d525c;

  --color-link: #4aa3df;
  --color-link-hover: #3a7fb3;
  --color-link-active: #4aa3df;
  --color-link-visited: #4aa3df;

  --color-bg-panel-button: #2c313a;
  --color-bg-panel-button-hover: #323741;
  --color-bg-panel-button-active: #2c313a;

  --color-bg-location: #22272a;
  --color-bg-location-secondary: #2c313a;
  --color-bg-location-hover: #22272a;
 
  --color-bg-song: #22272a;
  --color-bg-song-secondary: #2c313a;
  --color-bg-song-hover: #22272a;

  --color-bg-table-card: #2c313a;
  --button-border-color: #8fa0ad;

 /* === Diverse Variablen (noch relativ unsortiert) === */
   
  --color-bg-transparent-light: rgba(34, 39, 42, 0.8);
  --color-bg-hover: #252c2d;
  --color-text-event-header: #98be65;
  
  --color-shadow: #111;

  --color-text-tooltip: #404040;
  --color-bg-tooltip: #bfbfbf;

  --color-bg-location: #22272a;
  --color-bg-hover-location: #262a32;

  /* Entries - eigenes Farbschema (Semantik geht vor Redundanz) */
  --entry-text-color: #ccc;
  --entry-text-color-dt: #ccc;
  --entry-text-color-dd: #999;
  --entry-bg: #2c313a;
  --entry-border: #4d525c;
  --entry-border-strong: #4d525c;
  --entry-title-border: #4d525c;

  --footer-label: #f5f5f5;
  --footer-link: #3f9fde;
  --footer-link-hover: #2a7ca8;

  --legend-bg: #2c313a;
  --legend-border: #3a3f4a;
  --legend-color: #999;
  --color-header-bg: #2c313a;

  --chart-axis-color: #ababab; /* Labels + Skalierung unten */
  --chart-tooltip-bg: #444;
  --chart-tooltip-text: #fff;
  --chart-tooltip-border: #777;
  --chart-border: #4d525c;  /* DIV außen */
}


/* ICONS - Responsive & External Link */
html.dark img[alt="Responsive Design Icon"] {
  filter: brightness(1.6) drop-shadow(0 0 4px rgba(255,255,255,0.4));
}
html.dark .ext {
  filter: invert(1) brightness(1.2) contrast(0.9)
          drop-shadow(0 0 3px rgba(255,255,255,0.25));
}


/* 🌙 DARK MODE Toggle Button */
html.dark #dark-toggle,
html.dark .dark-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.7rem;
  border: 1px solid #666;
  border-radius: var(--radius);
  font-size: 1rem;
  color: #eee;
  background-color: #2c313a;
  cursor: pointer;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.15s ease;
}

html.dark #dark-toggle:hover,
html.dark .dark-btn:hover {
  background: linear-gradient(180deg, #3a3f4a, #2c313a);
  border-color: var(--link-hover-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

html.dark #dark-toggle:focus-visible,
html.dark .dark-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(63, 159, 222, 0.25);
  border-color: var(--color-link);
}


/* ⚙️ DARK Floating Settings Panel Buttons */
html.dark .font-buttons button.active {
  background: var(--color-bg-panel-button-active);
  font-weight: 700;
  border-color: var(--color-link, #3f9fde); /* gleich wie Dark-Mode-Hover */
  box-shadow: 0 0 0 2px rgba(63, 159, 222, 0.25); /* sanfter Glow */
}


/* 🌙 DARK MODE - DONUT Charts */
html.dark .chart-wrapper.donut,
html.dark .setlist,
html.dark .custom-legend {
  background-color: transparent;
  border: none;
  box-shadow: none;
}


/* 🌙 DARK MODE - ERA Charts */
html.dark .chart-wrapper.era {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--chart-border);
  box-shadow: none;
}


/* 🌙 TABLE.php Dark Mode → nur table-controls */
html.dark #entries,
html.dark #era-filter {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  html.dark tbody tr {
    border: 1px solid rgba(255,255,255,0.10);
  }
}

/* DARK MODE - Suchfeld */
html.dark #search {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* DARK MODE - Suchergebnis-Zähler */
html.dark #search-count {
  background-color: var(--color-bg-transparent-light);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* DARK MODE - Highlight für Livesearch */
html.dark .highlight {
  color: #111;
  background: linear-gradient(135deg, #a88f1f, #d4b83a);
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.3),
              0 0 8px rgba(255, 185, 0, 0.2);
  animation: dark-highlight-pulse 3s ease-in-out infinite;
}

@keyframes dark-highlight-pulse {
  0%, 100% {
    background: linear-gradient(135deg, #a88f1f, #d4b83a);
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.3),
                0 0 8px rgba(255, 185, 0, 0.2);
  }
  50% {
    background: linear-gradient(135deg, #bfa321, #e6c53f);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4),
                0 0 12px rgba(255, 180, 0, 0.25);
  }
}


/* DARK MODE - Pagination Pfeile */
html.dark .arrow-btn {
  background: var(--color-bg-secondary);
  border: 1px solid #a0b0c0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  color: var(--color-text);
}

html.dark .arrow-btn:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: #b0c8d8;
}

html.dark .arrow-btn:disabled {
  background: var(--color-bg);
  border-color: #5a6675;
  color: #666;
  opacity: 0.5;
  cursor: not-allowed;
}

html.dark .arrow-btn svg {
  fill: var(--color-text);
}

html.dark .arrow-btn:disabled svg {
  fill: #666;
}


/* 🌙 DARK MODE - RESET BUTTON */
html.dark #reset-button {
  background: linear-gradient(180deg, #3a3f4a, #2c313a);
  color: var(--color-text);
  border: 1px solid var(--button-border-color);
}

html.dark #reset-button:hover {
  background: linear-gradient(180deg, #444b58, #2c313a);
  border-color: var(--link-hover-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

html.dark #reset-button .icon {
  filter: brightness(1.2);
}

html.dark #reset-button:hover .icon {
  transform: rotate(180deg);
}


html.dark .tabbed-list .count {
  color: var(--tab-accent-color);
}