/* --- 1. ZMIENNE I MOTYWY KOLORYSTYCZNE --- */

/* Domyślny motyw: Jasny */
:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --accent-color: #0066cc;
    --card-bg: #f8f9fa;
    --border-color: #cccccc;
}

/* Motyw: Ciemny (Dark Mode) */
[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --accent-color: #4da6ff;
    --card-bg: #1e1e1e;
    --border-color: #444444;
}

/* Motyw: Wysoki kontrast */
[data-theme="contrast"] {
    --bg-color: #000000;
    --text-color: #ffff00;
    --accent-color: #00ffff;
    --card-bg: #000000;
    --border-color: #ffff00;
}

/* --- 2. BAZOWE STYLE I RESPONSYWNOŚĆ --- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Zabezpieczenie obrazków i mediów przed wychodzeniem poza ekran */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

select, input, button {
    transition: all 0.2s ease-in-out;
    font-family: inherit;
}

/* --- 3. UKŁAD RESPONSYWNY (Grid / Flex) --- */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-layout {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- 4. STYL PRZEŁĄCZNIKA TRYBÓW --- */

.theme-switcher {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background: var(--card-bg);
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: fit-content;
    margin-bottom: 1rem;
}

.theme-switcher button {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
}

.theme-switcher button:hover,
.theme-switcher button.active {
    background: var(--accent-color);
    color: #ffffff;
    border-color: var(--accent-color);
}

/* --- 5. MOBILNE MENU (HAMBURGER) --- */

#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

#mobile-menu.open {
    max-height: 400px;
}

/* --- 6. GRUNTOWANE DOSTOSOWANIE ELEMENTÓW WEWNĘTRZNYCH (DARK & CONTRAST) --- */

/* --- MOTYW: CIEMNY (Dark Mode) --- */
[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #f1f5f9;      /* Zmienione na bardzo jasny, niemal biały dla lepszej widoczności */
    --accent-color: #38bdf8;
    --card-bg: #1e293b;         /* Nieco głębszy, bardziej wyraźny odcieniem szaro-niebieski */
    --border-color: #334155;
}

[data-theme="dark"] body {
    color: var(--text-color);
}

/* Wymuszenie czytelnego koloru tekstów i pełnego tła dla elementów kart */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] [class*="bg-slate-"] {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Poprawa widoczności wszystkich typów tekstów i etykiet w trybie ciemnym */
[data-theme="dark"] p, 
[data-theme="dark"] span, 
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] small,
[data-theme="dark"] div,
[data-theme="dark"] [class*="text-slate-"] {
    color: var(--text-color) !important;
}

[data-theme="dark"] [class*="border-slate-"] {
    border-color: var(--border-color) !important;
}

/* Specjalne podbicie widoczności dla dymków podpowiedzi / wskazówek (np. żółte ikony z tekstem) */
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] [class*="bg-amber-"] {
    background-color: #1e293b !important;
    border-color: #f59e0b !important;
    color: #fef3c7 !important;
}


/* Tryb Wysoki Kontrast */
[data-theme="contrast"] body {
    background-color: #000000 !important;
    color: #ffff00 !important;
}

[data-theme="contrast"] .bg-white,
[data-theme="contrast"] .bg-slate-50,
[data-theme="contrast"] .bg-slate-100,
[data-theme="contrast"] [class*="bg-"] {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

[data-theme="contrast"] p, 
[data-theme="contrast"] span, 
[data-theme="contrast"] h1, 
[data-theme="contrast"] h2, 
[data-theme="contrast"] h3, 
[data-theme="contrast"] h4, 
[data-theme="contrast"] label,
[data-theme="contrast"] td,
[data-theme="contrast"] th,
[data-theme="contrast"] a,
[data-theme="contrast"] [class*="text-"] {
    color: #ffff00 !important;
}

[data-theme="contrast"] [class*="border-"] {
    border-color: #ffff00 !important;
}

/* Pola formularzy, checkboxy i selecty */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] select {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="contrast"] input[type="checkbox"],
[data-theme="contrast"] select {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

/* --- NAPRAWA WIDOCZNOŚCI SUWAKÓW (RANGE INPUT) W TRYBACH --- */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

/* Tor suwaka (ścieżka) w trybie domyślnym (jasnym) */
input[type="range"]::-webkit-slider-runnable-track {
    background: #cbd5e1;
    height: 6px;
    border-radius: 3px;
}
input[type="range"]::-moz-range-track {
    background: #cbd5e1;
    height: 6px;
    border-radius: 3px;
}

/* Uchwyt suwaka */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--accent-color, #0066cc);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-top: -5px; /* Centrowanie względem toru */
}
input[type="range"]::-moz-range-thumb {
    background: var(--accent-color, #0066cc);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: none;
}

/* Tor suwaka w TRYBIE CIEMNYM */
[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
    background: #475569 !important; /* Wyraźny, szary tor */
}
[data-theme="dark"] input[type="range"]::-moz-range-track {
    background: #475569 !important;
}
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
    background: #38bdf8 !important; /* Jasnoniebieski uchwyt */
}
[data-theme="dark"] input[type="range"]::-moz-range-thumb {
    background: #38bdf8 !important;
}

/* Tor suwaka w TRYBIE KONTRASTOWYM */
[data-theme="contrast"] input[type="range"]::-webkit-slider-runnable-track {
    background: #ffff00 !important; /* Żółty tor */
    height: 8px;
}
[data-theme="contrast"] input[type="range"]::-moz-range-track {
    background: #ffff00 !important;
    height: 8px;
}
[data-theme="contrast"] input[type="range"]::-webkit-slider-thumb {
    background: #00ffff !important; /* Cyjanowy uchwyt dla kontrastu */
    border: 2px solid #ffff00;
    height: 20px;
    width: 20px;
    margin-top: -6px;
}
[data-theme="contrast"] input[type="range"]::-moz-range-thumb {
    background: #00ffff !important;
    border: 2px solid #ffff00;
    height: 20px;
    width: 20px;
}

/* --- 7. DODATKOWE POPRAWKI: HAMBURGER NA LEWEJ I RESPONSYWNOŚĆ OKINEK --- */

header, .navbar, .top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
}

/* Przeniesienie przycisku hamburgera na lewą stronę */
.hamburger-btn, #hamburger-toggle, .menu-toggle {
    order: -1;
    margin-right: auto;
}

/* Zabezpieczenie kart i okienek przed wychodzeniem poza ekran na mobile */
.card, .box, [class*="card-"], .container > div {
    width: 100%;
    max-width: 100%;
}

/* Responsywność tabel (zestawień porównawczych) */
table, .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

@media (min-width: 768px) {
    table, .table-responsive {
        display: table;
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .container {
        padding: 0.5rem;
    }
    .card, .bg-white, [class*="bg-"] {
        padding: 0.85rem !important;
    }
}
/* --- RESPONSYWNOŚĆ TABEL: UKŁAD PIONOWY NA TELEFONACH --- */
@media (max-width: 767px) {
    /* Ukrywamy standardowe nagłówki tabeli, jeśli chcemy budować widok kafelkowy */
    .table-responsive table thead,
    table.comparison-table thead {
        display: none;
    }

    /* Każdy wiersz staje się osobną "kartą" wewnątrz tabeli */
    .table-responsive table tr,
    table.comparison-table tr {
        display: block;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 1rem;
        padding: 0.75rem;
    }

    /* Każda komórka staje się osobną linią z opisem */
    .table-responsive table td,
    table.comparison-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.5rem 0.25rem;
        border-bottom: 1px solid var(--border-color);
        white-space: normal !important;
    }

    .table-responsive table td:last-child,
    table.comparison-table td:last-child {
        border-bottom: none;
    }

    /* Dodanie etykiet (opcjonalnie, jeśli generujesz je w JS/HTML) lub poprawa czytelności */
    .table-responsive table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--text-color);
        opacity: 0.7;
        margin-right: 1rem;
    }
}
/* --- LIKVIDACJA POZIOMEGO SCROLLA W TABELACH --- */
@media (max-width: 767px) {
    .table-responsive, table {
        width: 100% !important;
        overflow-x: visible !important; /* Wyłącza suwak, wymusza zawinięcie */
    }

    /* Zmniejszenie marginesów i paddingów w głównych kontenerach kart, żeby zyskać miejsce */
    main .rounded-2xl {
        padding: 1rem !important;
    }

    /* Skalowanie czcionek w tabeli na mobile */
    table th, table td {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.2rem !important;
    }
}
/* --- DODATEK: FORMULARZ WYBORU DAT W PORÓWNANIU KURSÓW --- */
.date-selection-form input[type="date"] {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .date-selection-form input[type="date"] {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="contrast"] .date-selection-form input[type="date"] {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}
/* --- DODATEK: LINIE W TABELI KURSÓW WALUT --- */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th, 
.comparison-table td {
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.comparison-table th {
    background-color: var(--card-bg);
    border-bottom: 2px solid var(--accent-color);
}

.comparison-table tr:hover {
    background-color: var(--card-bg);
}