:root { 
    --sidebar-width-full: 250px; 
    --sidebar-width-slim: 70px;  
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #dee6f8; 
    min-height: 100vh; 
}

.dopisek { 
    font-size: 0.9em; 
    color: #172a4bdb; 
}

/* =========================================
   1. GŁÓWNY UKŁAD (WRAPPER I CONTENT)
   ========================================= */
#wrapper { 
    min-height: 100vh; 
    display: flex; 
    overflow: visible; 
}

/* Domyślnie dla urządzeń mobilnych (wąskie ekrany) */
#content-wrapper {
    margin-left: 0; 
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Wyjątek dla tabletów i desktopów (od 768px wzwyż) - tutaj działa Twoje menu */
@media (min-width: 768px) {
    #content-wrapper {
        margin-left: var(--sidebar-width-slim); 
        width: calc(100% - var(--sidebar-width-slim));
    }
}

/* =========================================
   2. MENU BOCZNE (SIDEBAR) - NAKŁADKA
   ========================================= */
.sidebar { 
    width: var(--sidebar-width-slim); 
    background: linear-gradient(180deg, #172a4b 10%, #172a4b 100%); 
    z-index: 1050; 
    /* FIXED to klucz: wyciąga menu z układu, więc jego rozwijanie nie rusza reszty strony */
    position: fixed; 
    top: 0;
    left: 0;
    height: 100vh; 
    overflow-x: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* WYSUNIĘCIE NAKŁADKI PO NAJECHANIU */
.sidebar:hover {
    width: var(--sidebar-width-full);
    box-shadow: 10px 0 15px rgba(0,0,0,0.3);
}

.sidebarMobil {
    background: linear-gradient(180deg, #172a4b 10%, #172a4b 100%); 
}

/* Wygląd linków w menu bocznym */
.sidebar .nav-link {
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 0.2rem 0.8rem;
    width: var(--sidebar-width-full);
    color: #9ddaeb;
    font-size: 0.85rem;
}

.sidebar .nav-link:focus, 
.sidebar .nav-link:hover {
    color: #fcb519;
}

.sidebar .nav-link i {
    min-width: 45px;
    font-size: 1.25rem;
    text-align: center;
}

/* Ukrywanie tekstu */
.sidebar .nav-link span {
    opacity: 0;
    margin-left: 10px;
    transition: opacity 0.2s ease-in-out;
}

.sidebar:hover .nav-link span {
    opacity: 1;
}

/* Logo */
.sidebar .sidebar-brand-icon img {
    width: 40px;
    height: auto;
    transition: transform 0.3s;
}

/* --- ANIMACJE MENU OFFCANVAS --- */

/* Stan początkowy (elementy ukryte i przesunięte w lewo o 30px) */
.offcanvas-anim {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Stan końcowy (uruchamiany automatycznie, gdy Bootstrap otworzy menu) */
.offcanvas.show .offcanvas-anim {
    opacity: 1;
    transform: translateX(0);
}

/* Kaskadowe opóźnienia (każdy link wjeżdża chwilę po poprzednim) */
.offcanvas.show .delay-1 { transition-delay: 0.1s; }
.offcanvas.show .delay-2 { transition-delay: 0.2s; }
.offcanvas.show .delay-3 { transition-delay: 0.3s; }
.offcanvas.show .delay-4 { transition-delay: 0.4s; }
.offcanvas.show .delay-5 { transition-delay: 0.5s; }
.offcanvas.show .delay-6 { transition-delay: 0.6s; }
/* Jeśli masz więcej linków, po prostu dodaj kolejne klasy delay-7, delay-8 itd. */

/* =========================================
   3. GÓRNE MENU (TOPBAR)
   ========================================= */
.navbar {
    padding: 0 0;
	background-color: rgb(237 242 250 / 90%); 
	box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1); 
	border-bottom: .1rem solid #fcb519
}

.topbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* =========================================
   4. ELEMENTY UI I KARTY
   ========================================= */
.card { 
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
    background-color: rgb(237 242 250 / 100%);
}

.rotate-n-15 { transform: rotate(-15deg); }

#pion_hr_wer {
    width: 410px;
    border-left: .2rem solid #fff !important;
    height: calc(5.375rem - 4rem);
    margin: auto 0rem;
    color: #fff;
    padding: 0 0 0 10px;
    background-color: #C81A2F;
}

#wersja {
    background-color: rgb(252 181 25);
}

/* =========================================
   5. PRZYCISK POWROTU NA GÓRĘ
   ========================================= */
html {
    scroll-behavior: auto !important;
}

.btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    z-index: 1050;
    background-color: rgb(23 42 75 / 65%);
    border-color: rgb(23 42 75 / 70%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-back-to-top:hover {
    background-color: #fcb519;
    border-color: #fcb519;
    transform: translateY(-5px);
}

.btn-back-to-top i {
    font-size: 1.2rem;
    color: white;
}

/* =========================================
   6. CIEMNY MOTYW (DARK MODE)
   ========================================= */
[data-bs-theme="dark"] body { background-color: #13151a; }
[data-bs-theme="dark"] .bg-white { background-color: #1e2128 !important; }
[data-bs-theme="dark"] .text-dark { color: #e1e1e1 !important; }