/**
 * CHART THEMES - System motywów dla generatora wykresów
 * Wersja 1.0 - 2026-01-02
 * 
 * Propozycje gradientów:
 * v1: czerwony #CD0504 → #891414, szary #757575 → #979696
 * v2: czerwony #C30504 → #CD0504, szary #757575 → #979696
 * v3: #EB5F5E, czerwony #C30504 → #CD0504, szary #757575 → #979696
 */

/* ============================================
   LIGHT THEME (DEFAULT)
   ============================================ */

:root,
body[data-theme="light"],
body[data-theme="light-hardware"],
body[data-theme="light-all"] {
  
  /* === Kolory podstawowe === */
  --chart-bg-main: #FFFFFF;
  --chart-bg-secondary: #F2F2F2;
  --chart-bg-bars: #F2F2F2;
  
  /* === Teksty === */
  --chart-text-primary: #333333;
  --chart-text-secondary: #555555;
  --chart-text-tertiary: #888888;
  --chart-text-muted: #666666;
  --chart-text-scale: #777777;
  --chart-text-info: #888888;
  --chart-text-bright: #444444;
  
  /* === Akcenty i podświetlenia === */
  --chart-accent-primary: #F60;
  --chart-accent-hover: #FA3;
  --chart-accent-shadow: #F70;
  --chart-accent-orange: #F46B1D;
  
  /* === Ramki i separatory === */
  --chart-border-main: #AAA;
  --chart-border-light: #999;
  --chart-border-bars: #AAA;
  --chart-border-grid: #AAA;
  
  /* === Cienie === */
  --chart-shadow-light: #888;
  --chart-shadow-medium: #999;
  --chart-shadow-dark: #AAA;
  --chart-shadow-darker: #444;
  --chart-shadow-foto: #444;
  
  /* === Gradienty - Wersja 1 (domyślna) === */
  --chart-gradient-red-start: #CD0504;
  --chart-gradient-red-end: #891414;
  --chart-gradient-gray-start: #757575;
  --chart-gradient-gray-end: #979696;
  
  /* Gradient overlay dla słupków */
  --chart-gradient-overlay-start: rgba(0, 0, 0, 0.3);
  --chart-gradient-overlay-end: rgba(175, 175, 175, 0.3);
  
  /* === Kolory słupków === */
  --chart-bar-big: #CCC;
  --chart-bar-small: #999;
  
  /* === Przezroczystości === */
  --chart-opacity-watermark: 0.85;
  --chart-opacity-foto-bg: 1;
  --chart-opacity-opis: 0.75;
  
  /* === Tło i UI === */
  --chart-bg-body: #DDD;
  --chart-bg-white-space: #FFF;
  --chart-bg-wybor: white;
  --chart-bg-button: #444;
  --chart-bg-button-hover: #777;
  --chart-text-button: #EEE;
  --chart-text-button-hover: #FFF;
}

/* ============================================
   DARK THEME
   ============================================ */

body[data-theme="dark"],
body[data-theme="dark-hardware"],
body[data-theme="dark-all"] {
  
  /* === Kolory podstawowe === */
  --chart-bg-main: #1E1E1E;
  --chart-bg-secondary: #2A2A2A;
  --chart-bg-bars: #2A2A2A;
  
  /* === Teksty === */
  --chart-text-primary: #D4D4D4;
  --chart-text-secondary: #B8B8B8;
  --chart-text-tertiary: #939393;
  --chart-text-muted: #A0A0A0;
  --chart-text-scale: #8A8A8A;
  --chart-text-info: #939393;
  --chart-text-bright: #E0E0E0;
  
  /* === Akcenty i podświetlenia === */
  --chart-accent-primary: #F60;
  --chart-accent-hover: #FA3;
  --chart-accent-shadow: #F70;
  --chart-accent-orange: #F46B1D;
  
  /* === Ramki i separatory === */
  --chart-border-main: #3C3C3C;
  --chart-border-light: #444444;
  --chart-border-bars: #3C3C3C;
  --chart-border-grid: #3C3C3C;
  
  /* === Cienie === */
  --chart-shadow-light: #000000;
  --chart-shadow-medium: #0A0A0A;
  --chart-shadow-dark: #1A1A1A;
  --chart-shadow-darker: #000000;
  --chart-shadow-foto: #000000;
  
  /* === Gradienty - Wersja 1 (dostosowana do dark) === */
  --chart-gradient-red-start: #CD0504;
  --chart-gradient-red-end: #891414;
  --chart-gradient-gray-start: #606060;
  --chart-gradient-gray-end: #808080;
  
  /* Gradient overlay dla słupków - odwrócony dla dark mode */
  --chart-gradient-overlay-start: rgba(255, 255, 255, 0.1);
  --chart-gradient-overlay-end: rgba(100, 100, 100, 0.1);
  
  /* === Kolory słupków === */
  --chart-bar-big: #4A4A4A;
  --chart-bar-small: #5A5A5A;
  
  /* === Przezroczystości === */
  --chart-opacity-watermark: 0.6;
  --chart-opacity-foto-bg: 1;
  --chart-opacity-opis: 0.85;
  
  /* === Tło i UI === */
  --chart-bg-body: #161616;
  --chart-bg-white-space: #1E1E1E;
  --chart-bg-wybor: #252525;
  --chart-bg-button: #3A3A3A;
  --chart-bg-button-hover: #4A4A4A;
  --chart-text-button: #D4D4D4;
  --chart-text-button-hover: #FFFFFF;
}

/* ============================================
   WARIANTY GRADIENTÓW
   (zakomentowane - do aktywacji przez admina)
   ============================================ */

/* 
body[data-chart-gradient="v2"] {
  --chart-gradient-red-start: #C30504;
  --chart-gradient-red-end: #CD0504;
  --chart-gradient-gray-start: #757575;
  --chart-gradient-gray-end: #979696;
}

body[data-chart-gradient="v3"] {
  --chart-gradient-red-start: #C30504;
  --chart-gradient-red-end: #CD0504;
  --chart-gradient-gray-start: #757575;
  --chart-gradient-gray-end: #979696;
  --chart-accent-primary: #EB5F5E;
}
*/

/* ============================================
   HELPER CLASSES
   ============================================ */

/* Wymuszenie konkretnego motywu na iframe */
.chart-force-light {
  color-scheme: light;
}

.chart-force-dark {
  color-scheme: dark;
}

/* Debugowanie - pokazuje aktywny motyw */
body[data-theme]::before {
  content: "Theme: " attr(data-theme);
  position: fixed;
  bottom: 5px;
  left: 5px;
  font-size: 10px;
  color: var(--chart-text-tertiary);
  background: var(--chart-bg-main);
  padding: 2px 5px;
  border-radius: 3px;
  z-index: 10000;
  opacity: 0.5;
  pointer-events: none;
  display: none; /* Włącz dla debugowania: display: block; */
}