/* ==========================================================================
   PLIK USER.CSS - FIBERO
   ========================================================================== */

/* --- 1. NAGŁÓWEK (BANNER) --- */
.header {
    position: relative !important;
    background-image: url('/images/header_fibero.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 220px; /* Wysokość bannera - dostosuj wg uznania */
    border-bottom: 5px solid #e67e22; /* Pomarańczowy akcent Fibero na dole */
    display: flex;
    flex-direction: column;
}

/* --- 2. LOGO --- */
.navbar-brand img {
    /* Ścieżka do Twojego nowego logo bez tła */
    content: url('/images/logo5.png') !important;
    max-height: 70px !important;
    width: auto;
    margin-top: 20px;
    margin-left: 20px;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.03);
}

/* --- 3. KONTENER MENU (TOPBAR) NA DOLE --- */
.container-topbar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10;
    padding-bottom: 8px !important; /* Odstęp od dolnej krawędzi bannera */
}

.container-topbar .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    margin-right: 30px !important; /* Odległość od prawej krawędzi */
    gap: 4px !important; /* Odstęp między buttonami */
}

/* --- 4. PRZYCISKI MENU (WYGLĄD) --- */
.container-topbar .mod-menu li {
    margin: 0 !important;
    padding: 0 !important;
    width: 115px; /* Stała szerokość */
    text-align: center;
    
    /* Stały szary gradient (wygląd techniczny) */
    background: linear-gradient(to bottom, #f0f0f0 0%, #bdc3c7 100%) !important;
    
    border-radius: 4px !important;
    border: 1px solid #95a5a6 !important; /* Cienki outline */
    transition: all 0.3s ease-in-out;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); /* Efekt 3D */
}

/* --- 5. PODŚWIETLENIE (HOVER) I AKTYWNA STRONA - PRZYCIEMNIONE --- */
.container-topbar .mod-menu li:hover,
.container-topbar .mod-menu li.active,
.container-topbar .mod-menu li.current {
    /* Ciemniejsza, bardziej oliwkowa/techniczna zieleń */
    background: linear-gradient(to bottom, #abc4aa 0%, #8da38c 100%) !important;
    
    /* Ciemniejszy outline pasujący do tła */
    border: 1px solid #7d8f7c !important;
    
    /* Nieco mocniejszy cień, żeby button "osiadł" wizualnie */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* --- 6. LINKI W MENU --- */
.container-topbar .mod-menu li a {
    display: block !important;
    padding: 8px 0 !important; /* Wyższe przyciski */
    
    color: #000000 !important; 
    font-weight: 800 !important; /* BOLD */
    font-size: 1rem;
    text-decoration: none !important;
    text-transform: uppercase; /* Wielkie litery */
}

/* Zachowanie czarnego koloru na zielonym tle */
.container-topbar .mod-menu li:hover a,
.container-topbar .mod-menu li.active a {
    color: #000000 !important;
}

/* --- 7. RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 768px) {
    .header {
        min-height: 180px;
    }
    .container-topbar .mod-menu {
        justify-content: center !important;
        margin-right: 0 !important;
        flex-wrap: wrap;
    }
    .container-topbar .mod-menu li {
        width: 100px;
    }
}
cia */
    width: 100% !important;
}lewej --- */
.sidebar-left ul.mod-menu {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}
/* --- 1. Usuwanie ramek i tła z lewego menu (Zostaje bez zmian) --- */
.sidebar-left, 
.sidebar-left .card, 
.sidebar-left .card-body,
.sidebar-left .module-inner {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
}

/* --- 2. PRZYWRÓCENIE PIERWOTNEJ SZEROKOŚCI --- */
/* Usuwamy sztywne flex: 0 0 % i pozwalamy szablonowi Cassiopeia działać naturalnie */
@media (min-width: 992px) {
    .sidebar-left {
        flex: unset !important; 
        max-width: unset !important;
        width: auto !important;
    }

    .main-content {
        flex: unset !important; 
        max-width: unset !important;
        width: auto !important;
    }
}

/* --- 3. Dopasowanie listy menu do naturalnej szerokości --- */
.sidebar-left ul.mod-menu {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-left ul.mod-menu li a {
    display: block !important;
    padding: 10px 0 !important; /* Komfortowy odstęp między linkami */
}

/* --- ZWĘŻENIE CAŁEGO LEFT-SIDEBAR --- */

@media (min-width: 992px) {
    /* Ustawiamy lewą kolumnę na wąską */
    .grid-child.sidebar-left {
        flex: 0 0 20% !important; /* Tutaj regulujesz szerokość (było ok 30%) */
        max-width: 20% !important;
    }

    /* Rozszerzamy środek, żeby wypełnił lukę */
    .grid-child.main-content {
        flex: 0 0 80% !important; 
        max-width: 80% !important;
    }
}

/* --- DODATKOWE CZYSZCZENIE SIDEBARU --- */
.sidebar-left {
    padding-right: 15px !important; /* Odstęp od treści głównej */
}

.sidebar-left .card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Usunięcie zbędnych marginesów wewnątrz menu bocznego */
.sidebar-left .mod-menu {
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-left .mod-menu li a {
    padding: 5px 0 !important; /* Ścieśnienie pozycji menu pionowo */
    font-size: 0.9rem; /* Opcjonalnie: lekko mniejsza czcionka, by pasowała do wąskiego paska */
}