/* =============================================
   DARK MODE - NADPISANIA DLA WSZYSTKICH ELEMENTOW
   ============================================= */

/* Panel alertów - ciemniejsze tło */
[data-theme="dark"] #alerts-panel,
[data-theme="dark"] .alerts-panel {
    background: linear-gradient(135deg, #2d1f1f 0%, #3d2525 100%) !important;
    border-color: #5c3535 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] #alerts-panel h3,
[data-theme="dark"] .alerts-panel h3 {
    color: #ff8a8a !important;
}

[data-theme="dark"] #toggle-alerts {
    color: #ff8a8a !important;
}

[data-theme="dark"] .alert-item {
    background: #3d2525 !important;
    border-color: #5c3535 !important;
    color: #f5f5f5 !important;
}

[data-theme="dark"] .alert-item div {
    color: #e0e0e0 !important;
}

/* Wykresy - ciemne tło */
[data-theme="dark"] .chart-container,
[data-theme="dark"] .chart-scroll,
[data-theme="dark"] .chart-inner,
[data-theme="dark"] #monthly-scroll,
[data-theme="dark"] #monthly-inner {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Mapa - ciemniejszy filtr */
[data-theme="dark"] #map {
    filter: brightness(0.8) contrast(1.1) saturate(0.9);
}

[data-theme="dark"] .map-container {
    background: var(--card-bg) !important;
}

[data-theme="dark"] .leaflet-container {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .leaflet-control-zoom a {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .leaflet-control-attribution {
    background-color: rgba(26, 26, 26, 0.8) !important;
    color: var(--text-muted) !important;
}

/* Gas Quality - ciemne tła selektorów i parametrów */
[data-theme="dark"] .gq-controls,
[data-theme="dark"] .gq-params,
[data-theme="dark"] .gq-chart-container,
[data-theme="dark"] #gq-controls,
[data-theme="dark"] #gq-params,
[data-theme="dark"] .params-panel,
[data-theme="dark"] .controls-panel {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .gq-controls select,
[data-theme="dark"] .gq-controls input,
[data-theme="dark"] #gq-controls select,
[data-theme="dark"] #gq-controls input {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] .gq-controls label,
[data-theme="dark"] #gq-controls label,
[data-theme="dark"] .params-panel label {
    color: var(--text-color) !important;
}

[data-theme="dark"] .gq-controls button,
[data-theme="dark"] #gq-controls button {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Strony instalacji - ciemne tło wykresów */
[data-theme="dark"] .installation-chart-container,
[data-theme="dark"] .installation-stats,
[data-theme="dark"] .inst-chart-wrapper {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}

/* Stat boxy na stronach instalacji */
[data-theme="dark"] .stat-box {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .stat-title {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .stat-value {
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
    background: none !important;
}

/* Legendy wykresów */
[data-theme="dark"] .chart-legend,
[data-theme="dark"] .legend-item {
    color: var(--text-color) !important;
}

/* Tabele danych */
[data-theme="dark"] table,
[data-theme="dark"] tbody,
[data-theme="dark"] thead {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] th {
    background-color: var(--secondary-color) !important;
    color: var(--text-muted) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] td {
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
}

/* Hover wierszy w dark (fix 2026-07-23, zgłoszenie usera): NIE podmieniamy tła —
   !important nadpisywał pastelowe tła tabel serwisu, a wewnętrzny ciemny tekst
   (inline na spanach) zostawał → wiersz pod kursorem nieczytelny.
   brightness() przyciemnia DOWOLNE tło (pastel/karta) zachowując kontrast
   tekstu — wzorzec z benchmark.css:110. */
[data-theme="dark"] tr:hover {
    filter: brightness(0.9);
}

/* Scrollbary */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--secondary-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Popup instalacji */
[data-theme="dark"] #installation-popup,
[data-theme="dark"] .installation-popup {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] #popup-content {
    color: var(--text-color) !important;
}

/* Modalne okna */
[data-theme="dark"] #chart-modal>div,
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] #chart-modal-title {
    color: var(--primary-color) !important;
}

/* Przycisk zamknij */
[data-theme="dark"] #close-popup,
[data-theme="dark"] #close-chart-modal {
    background: #dc3545 !important;
    color: white !important;
}

/* Header */
[data-theme="dark"] .header {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--card-border);
}

/* Checkboxy i radio w Gas Quality */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: var(--primary-color);
}

/* Etykiety */
[data-theme="dark"] label {
    color: var(--text-color);
}

/* Spany z tekstem */
[data-theme="dark"] span {
    color: inherit;
}

/* PARAMETRY panel (dla Gas Quality) */
[data-theme="dark"] [class*="param"],
[data-theme="dark"] [id*="param"] {
    color: var(--text-color) !important;
}

/* F4.21 (2026-07-23): blok „wszystkie divs z białym tłem" USUNIĘTY — w pełni pokryty
   przez skonsolidowany blok „POPUPY Z INLINE STYLES" niżej (te same warianty white/#fff). */

/* =============================================
   POPUP WYKRESÓW (produktionssteder)
   ============================================= */
[data-theme="dark"] .popup,
[data-theme="dark"] .chart-popup,
[data-theme="dark"] [class*="popup"],
[data-theme="dark"] div[style*="position: fixed"][style*="background"],
[data-theme="dark"] div[style*="position:fixed"][style*="background"] {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* F4.21: blok „popup z białym tłem inline" USUNIĘTY — pokryty przez skonsolidowany
   blok „POPUPY Z INLINE STYLES" niżej (#ffffff łapie się przez wariant background:#fff). */

/* Nagłówki i teksty w popup */
[data-theme="dark"] .popup h3,
[data-theme="dark"] .popup h2,
[data-theme="dark"] .popup p,
[data-theme="dark"] .popup span,
[data-theme="dark"] .popup div {
    color: var(--text-color) !important;
}

/* Popup tła z użyciem rgba */
[data-theme="dark"] div[style*="background-color: rgba(0,0,0"] {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* =============================================
   GAS QUALITY - LISTA PARAMETRÓW (CZYTELNOŚĆ)
   ============================================= */

/* Panel parametrów - cały kontener */
[data-theme="dark"] .gq-left,
[data-theme="dark"] .gq-params-container,
[data-theme="dark"] .params-list,
[data-theme="dark"] #params-container,
[data-theme="dark"] [class*="params-"] {
    background-color: var(--card-bg) !important;
    color: #f5f5f5 !important;
}

/* Elementy listy parametrów - tekst ZAWSZE widoczny */
[data-theme="dark"] .gq-param-item,
[data-theme="dark"] .param-item,
[data-theme="dark"] .param-row,
[data-theme="dark"] [class*="param-item"],
[data-theme="dark"] [class*="param-row"] {
    color: #e8e8e8 !important;
}

/* Label przy checkboxach */
[data-theme="dark"] .gq-param-item label,
[data-theme="dark"] .param-item label,
[data-theme="dark"] .param-row label,
[data-theme="dark"] input[type="checkbox"]+label,
[data-theme="dark"] input[type="checkbox"]~span,
[data-theme="dark"] input[type="checkbox"]~label {
    color: #e8e8e8 !important;
    opacity: 1 !important;
}

/* Span z nazwą parametru */
[data-theme="dark"] .gq-left span,
[data-theme="dark"] .gq-params span,
[data-theme="dark"] .param-name,
[data-theme="dark"] [class*="param"] span {
    color: #e8e8e8 !important;
}

/* Hover na parametrach - jaśniejszy */
[data-theme="dark"] .gq-param-item:hover,
[data-theme="dark"] .param-item:hover,
[data-theme="dark"] .param-row:hover {
    background-color: var(--accent-light) !important;
    color: #ffffff !important;
}

/* Przyciski Alle/Ingen */
[data-theme="dark"] .gq-left button,
[data-theme="dark"] .params-buttons button,
[data-theme="dark"] button[onclick*="selectAll"],
[data-theme="dark"] button[onclick*="selectNone"] {
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}

/* Kontener wykresu Gas Quality */
[data-theme="dark"] .gq-right,
[data-theme="dark"] .gq-chart,
[data-theme="dark"] #gq-chart-container {
    background-color: var(--card-bg) !important;
}

/* Tytuł w Gas Quality */
[data-theme="dark"] .gq-title,
[data-theme="dark"] #gq-title {
    color: var(--text-color) !important;
}

/* Wszystkie inputy i selecty w Gas Quality */
[data-theme="dark"] .main-content select,
[data-theme="dark"] .main-content input[type="text"],
[data-theme="dark"] .main-content input[type="number"] {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--input-border) !important;
}

/* =============================================
   INSTALACJE - POPUP WYKRESU
   ============================================= */

/* Popup instalacji z inline styles */
[data-theme="dark"] div[style*="position: relative"][style*="background-color: white"],
[data-theme="dark"] div[style*="position:relative"][style*="background-color:white"],
[data-theme="dark"] div[style*="background-color: white"][style*="border-radius"] {
    /* F4.21: tokenizowane (było #1a1a1a/#f5f5f5) */
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Canvas na ciemnym tle ma ciemny tekst - napraw */
[data-theme="dark"] canvas {
    color-scheme: dark;
}

/* Inputs w popup */
[data-theme="dark"] .popup input,
[data-theme="dark"] .popup select {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--input-border) !important;
}

/* =============================================
   SERVICE TABLE - LEPSZE KOLORY
   ============================================= */
[data-theme="dark"] .service-table,
[data-theme="dark"] #service-container table {
    background-color: #1e1e1e !important;
}

[data-theme="dark"] .service-table td,
[data-theme="dark"] .service-table th,
[data-theme="dark"] #service-container td,
[data-theme="dark"] #service-container th {
    color: #e8e8e8 !important;
    border-color: #444 !important;
}

[data-theme="dark"] .service-table tr,
[data-theme="dark"] #service-container tr {
    background-color: #252525 !important;
}

[data-theme="dark"] .service-table tr:nth-child(even),
[data-theme="dark"] #service-container tr:nth-child(even) {
    background-color: #2d2d2d !important;
}

/* (usunięte 2026-07-23, fix hovera) — podmiana tła na hover niszczyła kontrast
   z inline-kolorami tekstu; globalny [data-theme="dark"] tr:hover wyżej robi
   teraz brightness() zamiast podmiany tła. */

/* =============================================
   TOP 10 - PRZYCISKI I KONTROLNIKI
   ============================================= */
[data-theme="dark"] .segmented-control span,
[data-theme="dark"] .segmented-control button,
[data-theme="dark"] .top10-controls button,
[data-theme="dark"] .top10-controls span {
    background-color: #2d2d2d !important;
    color: #c0c0c0 !important;
    border-color: #444 !important;
}

[data-theme="dark"] .segmented-control span.active,
[data-theme="dark"] .segmented-control button.active,
[data-theme="dark"] .top10-controls button.active {
    background-color: #2c5530 !important;
    color: #70d670 !important;
}

/* Zmniejsz jasność zielonych akcentów w Top10 */
[data-theme="dark"] .top10-controls [style*="background: #4CAF50"],
[data-theme="dark"] .top10-controls [style*="background:#4CAF50"],
[data-theme="dark"] .top10-controls [style*="background-color: #4CAF50"] {
    background-color: #2c5530 !important;
    color: #90d090 !important;
}

/* =============================================
   MONTH SELECTOR - STRZAŁKI I SLIDER
   ============================================= */
[data-theme="dark"] .month-selector,
[data-theme="dark"] .month-nav,
[data-theme="dark"] [class*="month-selector"] {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
}

[data-theme="dark"] .month-selector button,
[data-theme="dark"] .month-nav button,
[data-theme="dark"] .month-prev,
[data-theme="dark"] .month-next {
    background-color: #3a3a3a !important;
    color: #e8e8e8 !important;
    border-color: #555 !important;
}

[data-theme="dark"] .month-selector button:hover,
[data-theme="dark"] .month-nav button:hover {
    background-color: #4a4a4a !important;
}

/* Slider (legacy) */
[data-theme="dark"] input[type="range"] {
    background-color: #2d2d2d !important;
}

[data-theme="dark"] input[type="range"]::-webkit-slider-track {
    background: #3a3a3a !important;
}

[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
    background: #4CAF50 !important;
}

/* Chart scrollbar (dark) */
[data-theme="dark"] .chart-scrollbar-track {
    background: #2d2d2d;
}

[data-theme="dark"] .chart-scrollbar-thumb {
    background: #4CAF50;
}

/* =============================================
   STATUS HISTORY - WIĘKSZA CZCIONKA
   ============================================= */
[data-theme="dark"] .status-history-modal,
[data-theme="dark"] #status-history-modal,
[data-theme="dark"] [id*="history-modal"] {
    background-color: #1e1e1e !important;
}

[data-theme="dark"] .status-history-modal table,
[data-theme="dark"] #status-history-modal table {
    font-size: 14px !important;
}

[data-theme="dark"] .status-history-modal td,
[data-theme="dark"] .status-history-modal th,
[data-theme="dark"] #status-history-modal td,
[data-theme="dark"] #status-history-modal th {
    padding: 10px 15px !important;
    color: #e8e8e8 !important;
}

/* =============================================
   INSTALLATION PAGE - TOP BAR I WYKRES
   ============================================= */
[data-theme="dark"] .top-bar,
[data-theme="dark"] .page-title,
[data-theme="dark"] .installation-header {
    background-color: #1a1a1a !important;
    color: #e8e8e8 !important;
}

/* Legenda wykresu */
[data-theme="dark"] .chart-legend span,
[data-theme="dark"] .legend-label,
[data-theme="dark"] [class*="legend"] span {
    color: #d0d0d0 !important;
}

/* =============================================
   KAFELEK POGODY - CIEMNIEJSZY
   ============================================= */
[data-theme="dark"] .stat-box[onclick*="Weather"],
[data-theme="dark"] .stat-box[onclick*="weather"],
[data-theme="dark"] .stat-box[onclick*="Forecast"],
[data-theme="dark"] [onclick*="showWeatherForecast"] {
    background: linear-gradient(135deg, #1e3a3a 0%, #1a2a2a 100%) !important;
    border-color: #2a4a4a !important;
}

[data-theme="dark"] .stat-box[onclick*="showWeatherForecast"] .stat-value {
    color: #70c0c0 !important;
    -webkit-text-fill-color: #70c0c0 !important;
}

[data-theme="dark"] .stat-box[onclick*="showWeatherForecast"] .stat-trend {
    color: #60b0b0 !important;
}

/* =============================================
   POPUPY Z INLINE STYLES - CIEMNE TŁO
   ============================================= */
[data-theme="dark"] div[style*="background-color:white"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background-color: #fff"],
[data-theme="dark"] div[style*="background-color:#ffffff"],
[data-theme="dark"] div[style*="background-color: #ffffff"] {
    /* F4.21: JEDYNY blok inline-white po konsolidacji (3→1) + tokenizowany
       (było #1e1e1e/#e8e8e8). Łapie m.in. 4 statyczne modale index.php
       (hasło/alerty/benchmark/dokumenty) do czasu ich konwersji na .gf-modal-card. */
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Popup pogody */
[data-theme="dark"] #weather-modal,
[data-theme="dark"] #weather-modal>div {
    background-color: #1e1e1e !important;
    color: #e8e8e8 !important;
}

[data-theme="dark"] #weather-modal .ticker-title,
[data-theme="dark"] #weather-modal [style*="background: #e0f7fa"],
[data-theme="dark"] #weather-modal [style*="background:#e0f7fa"] {
    background: linear-gradient(135deg, #1e3a3a 0%, #2a4a4a 100%) !important;
    color: #70c0c0 !important;
}

[data-theme="dark"] #weather-modal thead,
[data-theme="dark"] #weather-modal [style*="background: #b2ebf2"] {
    background: #1e3a3a !important;
    color: #70c0c0 !important;
}

[data-theme="dark"] #weather-modal tbody tr {
    background-color: #252525 !important;
}

[data-theme="dark"] #weather-modal tbody tr:nth-child(even) {
    background-color: #2d2d2d !important;
}

/* =============================================
   SUBSTRATE HISTORY MODAL
   ============================================= */
[data-theme="dark"] #substrate-history-modal,
[data-theme="dark"] #substrate-history-modal>div {
    background-color: #1e1e1e !important;
    color: #e8e8e8 !important;
}

[data-theme="dark"] #substrate-history-modal table {
    background-color: #252525 !important;
}

[data-theme="dark"] #substrate-history-modal thead {
    background-color: #2c5530 !important;
}

[data-theme="dark"] #substrate-history-modal th {
    color: #90d090 !important;
}

[data-theme="dark"] #substrate-history-modal td {
    color: #e8e8e8 !important;
    border-color: #444 !important;
}

/* =============================================
   OGÓLNE MODALNE OKNA Z BIAŁYM TŁEM INLINE
   ============================================= */
[data-theme="dark"] [style*="position: fixed"][style*="background"][style*="rgba(0,0,0"],
[data-theme="dark"] [style*="position:fixed"][style*="background"][style*="rgba(0,0,0"] {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Wewnętrzne boxy modali */
[data-theme="dark"] [style*="position: fixed"]>div[style*="background"],
[data-theme="dark"] [style*="position:fixed"]>div[style*="background"] {
    /* F4.21: tokenizowane (było #1e1e1e/#e8e8e8) */
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Nagłówki w modalach */
[data-theme="dark"] [style*="position: fixed"] h2,
[data-theme="dark"] [style*="position: fixed"] h3,
[data-theme="dark"] [style*="position:fixed"] h2,
[data-theme="dark"] [style*="position:fixed"] h3 {
    color: #4CAF50 !important;
}

/* Tabele w modalach */
[data-theme="dark"] [style*="position: fixed"] table,
[data-theme="dark"] [style*="position:fixed"] table {
    background-color: #252525 !important;
}

[data-theme="dark"] [style*="position: fixed"] th,
[data-theme="dark"] [style*="position:fixed"] th {
    background-color: #1e3a1e !important;
    color: #90d090 !important;
}

[data-theme="dark"] [style*="position: fixed"] td,
[data-theme="dark"] [style*="position:fixed"] td {
    color: #e0e0e0 !important;
    background-color: #2a2a2a !important;
}

/* =============================================
   SERVICE TABLE - WIERSZE Z INLINE COLORS
   Zachowaj jasne tło, użyj ciemnego tekstu
   Inline style: style="background:rgb(...)"
   ============================================= */
/* Wszystkie td wewnątrz tr z inline background - ciemny tekst */
[data-theme="dark"] tr[style*="background:rgb"] td,
[data-theme="dark"] tr[style*="background: rgb"] td,
[data-theme="dark"] tr[style*="background:#"] td {
    color: #1a1a1a !important;
}

/* Także span/div wewnątrz tych komórek */
[data-theme="dark"] tr[style*="background:rgb"] td span,
[data-theme="dark"] tr[style*="background:rgb"] td div,
[data-theme="dark"] tr[style*="background: rgb"] td span,
[data-theme="dark"] tr[style*="background: rgb"] td div {
    color: #1a1a1a !important;
}

/* =============================================
   TOP 10 - NAWIGATOR MIESIĘCY (.gf-nav .gf-current)
   HTML: <div class="gf-current" id="m-cur">2024-12</div>
   ============================================= */
[data-theme="dark"] .gf-current,
[data-theme="dark"] #m-cur,
[data-theme="dark"] #y-cur {
    color: #ffffff !important;
}

/* Przyciski w nawigatorze */
[data-theme="dark"] .gf-nav .gf-btn,
[data-theme="dark"] .gf-nav button {
    color: #e0e0e0 !important;
    background-color: #333 !important;
    border-color: #555 !important;
}

/* =============================================
   CHART LEGEND - #legend-fixed (renderFixedLegend)
   HTML: <ul><li><span [color box]></span><span>[text]</span></li>...</ul>
   ============================================= */
/* Ciemny tekst na jasnym/białym pasku legendy */
[data-theme="dark"] #legend-fixed li>span:last-child,
[data-theme="dark"] #legend-fixed span:not([style*="background"]) {
    color: #1a1a1a !important;
}

/* Caly kontener legendy - zachowaj jasne tlo, ciemny tekst */
[data-theme="dark"] #legend-fixed {
    color: #1a1a1a !important;
}

[data-theme="dark"] #legend-fixed li {
    color: #1a1a1a !important;
}

/* =============================================
   MAP POPUP - LAYOUT (LISTA)
   Wymuszenie układu listy dla statystyk w popupie
   ============================================= */
#popup-content .stats-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
}

#popup-content .stat-box {
    width: 100% !important;
    min-height: auto !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    text-align: left !important;
}

#popup-content .stat-title {
    margin-bottom: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
}

#popup-content .stat-value {
    text-align: right !important;
    font-size: 16px !important;
}

/* =============================================
   MAP POPUP - SEKCJA ENGINE-STATUSES (status.js)
   Jasne tło z ciemnym tekstem (zachowujemy z poprzedniej zmiany)
   ============================================= */
[data-theme="dark"] .engine-statuses {
    background: #e8e8e8 !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .engine-statuses h3 {
    color: #006400 !important;
}

[data-theme="dark"] .engine-statuses span,
[data-theme="dark"] .engine-status-row span {
    color: #1a1a1a !important;
}

/* =============================================
   MAP POPUP - STATS-CONTAINER i STAT-BOX (map.js)
   Jasne tło z ciemnym tekstem dla widoczności
   ============================================= */
[data-theme="dark"] #popup-content .stats-container,
[data-theme="dark"] #popup-content .stat-box {
    background: #f0f0f0 !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] #popup-content .stat-title,
[data-theme="dark"] #popup-content .stat-value {
    color: #1a1a1a !important;
}

[data-theme="dark"] #popup-content p {
    color: var(--text-color) !important;
}

/* =============================================
   CHART DETAIL POPUP / MODAL (top10 klik w wykres)
   ============================================= */
[data-theme="dark"] .chart-detail-popup,
[data-theme="dark"] .chart-detail-modal,
[data-theme="dark"] #chart-detail-popup {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Tabela w popupie szczegółów wykresu */
[data-theme="dark"] .chart-detail-popup table,
[data-theme="dark"] .chart-detail-modal table,
[data-theme="dark"] #chart-detail-popup table {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .chart-detail-popup td,
[data-theme="dark"] .chart-detail-popup th,
[data-theme="dark"] .chart-detail-modal td,
[data-theme="dark"] .chart-detail-modal th {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}

/* =============================================
   FIX 2026-03-26: Dark mode — 6 poprawek
   ============================================= */

/* 1. Pasek pogodowy/tickery — bialy bg na ciemny */
[data-theme="dark"] .inline-ticker {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .ticker-node .node-name {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .ticker-node .node-val {
    color: #e0e0e0 !important;
}

/* 2. Ramka mapy — ciemniejsza (background nie background-color!) */
[data-theme="dark"] .map-container,
[data-theme="dark"] .map-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}

/* 3. Ramka wykresu miesięcznego — ciemniejsza */
[data-theme="dark"] .chart-card,
[data-theme="dark"] .monthly-chart-card,
[data-theme="dark"] #monthly-chart-container,
[data-theme="dark"] .dash-right .chart-container {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}

/* 4. Top10 popup — tekst kWh na stacked bar */
[data-theme="dark"] #chart-modal .stacked-total,
[data-theme="dark"] #chart-modal td,
[data-theme="dark"] #chart-modal th,
[data-theme="dark"] #chart-modal span {
    color: var(--text-color) !important;
}

[data-theme="dark"] #chart-modal table {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] #chart-modal tr:nth-child(even) {
    background-color: #252525 !important;
}

/* 5. Produktionssteder — tlo wykresu */
[data-theme="dark"] #prod-sites-container,
[data-theme="dark"] .prod-chart-container,
[data-theme="dark"] #comparison-chart-container,
[data-theme="dark"] [id*="prod-sites"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}

/* 6. Instalacja — tlo wykresu */
[data-theme="dark"] .installation-view,
[data-theme="dark"] .installation-chart-wrapper,
[data-theme="dark"] .inst-monthly-chart,
[data-theme="dark"] [id*="inst-chart"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
}