/**
 * CHART RESPONSIVE - Mechanizmy responsywności i embed dla wykresów
 * Wersja 1.0 - 2026-01-02
 */

/* ============================================
   RESPONSIVE CHART CONTAINER
   ============================================ */

/* Wrapper z opcjonalnym overflow dla przewijania */
.chart-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling na iOS */
}

/* Główny kontener wykresu */
.chart-container {
  min-width: 550px; /* Minimalna szerokość aby wykres był czytelny */
  max-width: 100%;
  margin: 0 auto;
}

/* Pełna szerokość - dostosuje się do rodzica */
.chart-container.chart-fullwidth {
  width: 100%;
  min-width: 100%;
}

/* Stała szerokość - zachowuje 550px */
.chart-container.chart-fixed {
  width: 550px;
  min-width: 550px;
  max-width: 550px;
}

/* Responsywna - skaluje się ale z min/max */
.chart-container.chart-responsive {
  width: 100%;
  min-width: 320px;
  max-width: 1200px;
}

/* ============================================
   EMBED MODES
   ============================================ */

/* Embed z przewijaniem poziomym */
.chart-embed-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.chart-embed-scroll .chart-container {
  width: auto;
  min-width: 550px;
}

/* Embed ze skalowaniem (może być mniej czytelny) */
.chart-embed-scale {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.chart-embed-scale .chart-container {
  width: 100%;
  min-width: 100%;
  transform-origin: top left;
}

/* Automatyczne skalowanie dla małych ekranów */
@media (max-width: 600px) {
  .chart-embed-scale .chart-container {
    transform: scale(0.9);
  }
}

@media (max-width: 480px) {
  .chart-embed-scale .chart-container {
    transform: scale(0.75);
  }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

/* Stylizacja scrollbara dla webkit (Chrome, Safari, Edge) */
.chart-responsive-wrapper::-webkit-scrollbar,
.chart-embed-scroll::-webkit-scrollbar {
  height: 8px;
}

.chart-responsive-wrapper::-webkit-scrollbar-track,
.chart-embed-scroll::-webkit-scrollbar-track {
  background: var(--chart-bg-bars, #F2F2F2);
  border-radius: 4px;
}

.chart-responsive-wrapper::-webkit-scrollbar-thumb,
.chart-embed-scroll::-webkit-scrollbar-thumb {
  background: var(--chart-border-main, #AAA);
  border-radius: 4px;
}

.chart-responsive-wrapper::-webkit-scrollbar-thumb:hover,
.chart-embed-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--chart-text-tertiary, #888);
}

/* ============================================
   IFRAME EMBED SUPPORT
   ============================================ */

/* Style dla gdy wykres jest w iframe */
body.chart-iframe {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.chart-iframe .chart-container {
  margin: 0;
}

/* Ukryj nawigację i elementy UI w iframe */
body.chart-iframe #header,
body.chart-iframe #powrot,
body.chart-iframe #logout,
body.chart-iframe .links {
  display: none !important;
}

/* ============================================
   WIDTH CLASSES (dla parametru URL)
   ============================================ */

.chart-w-320 { width: 320px; min-width: 320px; max-width: 320px; }
.chart-w-480 { width: 480px; min-width: 480px; max-width: 480px; }
.chart-w-550 { width: 550px; min-width: 550px; max-width: 550px; } /* Domyślna */
.chart-w-600 { width: 600px; min-width: 600px; max-width: 600px; }
.chart-w-750 { width: 750px; min-width: 750px; max-width: 750px; }
.chart-w-800 { width: 800px; min-width: 800px; max-width: 800px; }
.chart-w-1000 { width: 1000px; min-width: 1000px; max-width: 1000px; }
.chart-w-1200 { width: 1200px; min-width: 1200px; max-width: 1200px; }

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
  /* Na mobile domyślnie włącz scrolling */
  .chart-container:not(.chart-fullwidth) {
    min-width: 550px;
  }
  
  body:not(.chart-embed-scale) {
    overflow-x: auto;
  }
  
  /* Mniejsze fonty dla lepszej czytelności */
  div.ramka {
    font-size: 11px;
  }
  
  span.tytul {
    font-size: 16px !important;
  }
  
  td.nazwa {
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  /* Bardzo małe ekrany - jeszcze mniejsze fonty */
  div.ramka {
    font-size: 10px;
  }
  
  span.tytul {
    font-size: 14px !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .chart-container {
    width: 100%;
    max-width: none;
    page-break-inside: avoid;
  }
  
  .chart-responsive-wrapper,
  .chart-embed-scroll {
    overflow: visible;
  }
  
  #header, #powrot, #logout, .links, button {
    display: none !important;
  }
}

/* ============================================
   HELPER INDICATORS (opcjonalne - do debugowania)
   ============================================ */

.chart-container[data-width]::after {
  content: "Width: " attr(data-width);
  position: fixed;
  bottom: 25px;
  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; */
}