/* Definicje kolorów */
:root {
    --primary-red: #d0021b;
    --secondary-blue: #0b1a30;
    --light-bg: #f8f9fa;
    --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
}

body {
    font-family: var(--font-family);
    color: #212529;
    line-height: 1.6;
    /* Usunięcie domyślnego tła body, aby widoczne było tło z kontenera */
    background-color: transparent; 
}

/* --- SYSTEM PŁYNNEGO TŁA (CROSS-FADE) --- */

#background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Pod wszystkim */
    background-color: #0b1a30; /* Kolor bazowy */
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    opacity: 0; /* Domyślnie niewidoczne */
    transition: opacity 1.5s ease-in-out; /* Bardzo płynne przejście 1.5s */
}

.bg-layer.active {
    opacity: 1; /* Widoczne gdy ma klasę active */
}

/* Maska na całe tło */
.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 26, 48, 0.85); /* Ciemny granat, 85% krycia */
    pointer-events: none;
}

/* Klasy pomocnicze dla białych/jasnych sekcji, które mają PRZYKRYWAĆ tło */
.bg-white, .bg-light {
    background-color: white !important; /* Wymuszenie bieli */
}
/* Klasa z-2 zapewnia, że sekcja jest nad tłem fixed */
.z-2 { z-index: 2; position: relative; }


/* --- NAWIGACJA I MENU --- */

.navbar {
    background-color: rgba(11, 26, 48, 0.98) !important; /* Prawie pełne krycie dla czytelności */
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem;
}
.navbar-brand, .nav-link { color: white !important; font-weight: 700; }
.nav-link:hover { color: var(--primary-red) !important; }
.logo-icon { background-color: white; max-height: 40px; width: auto; }

/* --- POPRAWKA MOBILNA (HAMBURGER I MENU) --- */

/* 1. Wymuszenie białego koloru obramowania przycisku hamburgera */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* 2. Wymuszenie białej ikony (trzech kresek) w hamburgerze */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* 3. Stylizacja rozwiniętego menu na telefonie */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--secondary-blue); /* Pełny granat pod menu */
        padding: 15px;
        margin-top: 10px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.1);
    }
    
    .nav-link {
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Linie oddzielające */
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
}

/* --- KONIEC POPRAWEK NAWIGACJI --- */


/* KARTA TREŚCI */
.content-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Reszta stylów */
.header-section { padding: 150px 0 100px; position: relative; z-index: 2; }

.section-title {
    color: var(--secondary-blue);
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--primary-red);
    display: inline-block;
}
.section-title.text-white { color: white !important; }
.section-title.border-white { border-bottom-color: white !important; }

.chart-subtitle { color: var(--primary-red); font-weight: 600; font-size: 1.25rem; }

.kpi-card {
    background-color: white;
    border-top: 5px solid var(--primary-red);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.08);
}
.kpi-card h2 { font-size: 2.5rem; color: var(--secondary-blue); margin-bottom: 0; }

.info-box { background-color: var(--light-bg); border: 1px solid #ddd; }

.chart-container { position: relative; width: 100%; margin: 20px 0; min-height: 350px; }
.chart-container canvas { height: 100% !important; width: 100% !important; }

.image-container { overflow: hidden; border-radius: 0.5rem; border: 3px solid var(--secondary-blue); }
.image-container img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
.image-container:hover img { transform: scale(1.03); }

.partner-logo { max-height: 80px; margin: 20px 30px; transition: transform 0.3s; filter: grayscale(100%); opacity: 0.8; }
.partner-logo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }

.footer-section { position: relative; z-index: 2; }