@charset "UTF-8";

/* ==============================================================
   SEKCJA 1: ORYGINALNE STYLE UKŁADU
============================================================== */
.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

@media (min-width: 1700px) {
    .col-xxl { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
    .col-xxl-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-xxl-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333%; }
    .col-xxl-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%; }
    .col-xxl-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
    .col-xxl-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; }
    .col-xxl-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667%; }
    .col-xxl-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
    .col-xxl-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333%; }
    .col-xxl-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; }
    .col-xxl-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
    .col-xxl-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333%; }
    .col-xxl-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667%; }
    .col-xxl-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .offset-xxl-0 { margin-left: 0; }
    .offset-xxl-1 { margin-left: 8.33333%; }
    .offset-xxl-2 { margin-left: 16.66667%; }
    .offset-xxl-3 { margin-left: 25%; }
    .offset-xxl-4 { margin-left: 33.33333%; }
    .offset-xxl-5 { margin-left: 41.66667%; }
    .offset-xxl-6 { margin-left: 50%; }
    .offset-xxl-7 { margin-left: 58.33333%; }
    .offset-xxl-8 { margin-left: 66.66667%; }
    .offset-xxl-9 { margin-left: 75%; }
    .offset-xxl-10 { margin-left: 83.33333%; }
    .offset-xxl-11 { margin-left: 91.66667%; }
}

/* ==============================================================
   SEKCJA 2: BREADCRUMB I RESZTA STYLÓW KOSMETYCZNYCH
============================================================== */
.breadcrumb { background: none !important; padding-left: 0px !important; }

@media (min-width: 992px) {
    .art-image-prev { float: left; max-height: 160px; max-width: 35%; margin-right: 1.5rem; }
}
.art-image-prev > img { border: 1px solid #ccc; }
.art-pdf-prev { border: 1px solid #ccc; }

.nowosc { background-image: url('/assets/img/nowosc.png'); background-repeat: no-repeat; background-size: 30%; background-position-x: right; }
.panel-front { box-shadow: 5px 5px 10px !important; }

#accordionSidebar .new:after { content: ""; display: block; position: absolute; width: 8px; height: 8px; background: red; top: 9px; left: 6px; border-radius: 50%; }
#accordionSidebar .toggled .new:after { top: 12px; left: 32px; }

/* LOADERY I TOOLTIPY */
#loader-wrapper {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f8f9fc; z-index: 1030;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
#loader-wrapper.active { opacity: 1; visibility: visible; }
#loader { text-align: center; margin-top: 5.5rem; margin-left: 220px; }
@media (max-width: 768px) { #loader { margin-left: 0; } }

.tooltip.show { opacity: 1; }
.tooltip-inner { background-color: #007D32; color: #FFFFFF; }
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before { border-top-color: #007D32; }
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before { border-right-color: #007D32; }
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: #007D32; }
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before { border-left-color: #007D32; }
.nav-item .nav-link i { text-align: center; width: 1.2rem; }

/* ==============================================================
   SEKCJA 3: NOWY UKŁAD LAYOUTU (FLEXBOX)
============================================================== */
/* Blokada głównego ekranu - tylko to gwarantuje, że żółta belka nigdy nie ucieknie */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

#wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* KONTENER GŁÓWNY */
#content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* To naprawia ucięte nazwisko: kontener nie wyjdzie poza ekran */
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ŻÓŁTA BELKA GÓRNA */
.navbar.topbar {
    flex-shrink: 0; /* Belka się nie kurczy */
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1040;
    padding-right: 2rem !important; /* Bezpieczny odstęp dla nazwiska */
}

/* OBSZAR PRZEWIJANIA (To co jest POD żółtą belką) */
#scrollable-area {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

#content {
    flex: 1 0 auto;
    margin-top: 0 !important;
    padding-top: 0rem;
}

footer.sticky-footer { flex-shrink: 0; padding: 1rem 0 !important; }

/* SZUFLADA / LEWE MENU */
.sidebar .nav-item .nav-link { text-align: left !important; padding: 0.4rem 1rem !important; width: 14rem !important; }
.sidebar .nav-item .nav-link span { font-size: 0.85rem !important; display: inline !important; }
.sidebar .nav-item .nav-link i { margin-right: 0.25rem !important; }
.sidebar .nav-item .nav-link[data-toggle="collapse"]::after { display: inline-block !important; }

.sidebar { -ms-overflow-style: none; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }

.sidebar .sidebar-heading {
    text-align: left !important;
}

@media (min-width: 992px) {
    .sidebar { width: 14rem !important; flex-shrink: 0; left: 0 !important; position: relative !important; z-index: 1050; }
    .sidebar.toggled { width: 14rem !important; overflow: visible !important; }
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed !important; top: 0; left: -16rem !important; z-index: 1050 !important;
        height: 100vh !important; width: 14rem !important; box-shadow: 2px 0 10px rgba(0,0,0,0.5) !important;
        transition: left 0.3s ease-in-out !important; overflow-y: auto !important; overflow-x: hidden !important;
    }
    .sidebar.show-mobile { left: 0 !important; }
}

/* ==============================================================
   SEKCJA 4: TABELA, WTYCZKA DOUBLE SCROLL I STICKY
============================================================== */
.table-red {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #000000;
    margin-bottom: 3px;
    min-width: 700px;
    border: none !important;
}

.table-red td {
    border-right: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    border-left: none !important;
    border-top: none !important;
    color: #858796 !important;
    vertical-align: baseline !important;
    padding: .3rem .75rem !important;
    font-size: 0.9rem !important;
}

.table-red tbody tr td:first-child { border-left: 1px solid #ccc !important; }
.table-red .table-spacer + tr td { border-top: 1px solid #ccc !important; }

.table-spacer td {
    height: 20px !important;
    padding: 0 !important;
    border: none !important;
    background: #fff !important;
    visibility: hidden !important;
}

/* Wymuszamy wewnętrzne przewijanie dla wtyczki DoubleScroll */
.table-responsive {
    /* To sprawia, że nagłówek staje dęba i DoubleScroll działa! */
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    margin-bottom: 0 !important;

    /* UKRYWANIE SUWAKA DLA FIREFOXA I EDGE/IE */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* UKRYWANIE SUWAKA DLA CHROME, SAFARI, OPERA */
.table-responsive::-webkit-scrollbar {
    display: none !important;
}

.table-red thead { background: none !important; }

.table-red thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important; /* Przykleja do góry kontenera .table-responsive */
    z-index: 10 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    vertical-align: bottom !important;
    padding: 0.75rem !important;

    background-image: linear-gradient(to right, #e23029, #d92a27, #be1622, #be1622, #be1622) !important;
    background-clip: padding-box !important;

    /* Gwarantuje, że tło nie pęknie przy przewijaniu */
    background-attachment: fixed !important;

    border-right: 1px solid #ffffff !important;
    border-top: 1px solid #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
}

.table-red thead th:first-child { border-left: 1px solid #ffffff !important; }

/* ==============================================================
   SEKCJA 5: MOBILE FULL WIDTH DLA PRZYCISKÓW (SMARTFONY < 576px)
============================================================== */
@media (max-width: 575.98px) {
    .mobile-full-width {
        flex-direction: column !important;
        align-items: stretch !important; /* Rozciąga dzieci do pełnej szerokości */
    }

    .mobile-full-width > div {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0.5rem; /* Odstęp w pionie między przyciskami */
    }

    .mobile-full-width > div:last-child {
        margin-bottom: 0; /* Brak odstępu pod ostatnim elementem */
    }

    /* Kluczowe: Wymuszenie szerokości na btn-group oraz btn */
    .mobile-full-width .btn-group,
    .mobile-full-width .btn {
        width: 100% !important;
        max-width: none !important; /* "Miażdży" inline style="width:200px" */
    }
}

/* ==============================================================
   RESPONSYWNA SZEROKOŚĆ GŁÓWNYCH PRZYCISKÓW AKCJI
============================================================== */
.btn-fixed-responsive {
    width: 100% !important;
    max-width: none !important;
}

@media (min-width: 576px) {
    .btn-fixed-responsive {
        width: 200px !important;
    }
}

/* ==============================================================
   SEKCJA 6: OPÓŹNIONY LOADER W TABELI
============================================================== */
.delayed-loader-content {
    opacity: 0; /* Domyślnie niewidoczne */
    animation: fadeinLoader 0.5s ease-in forwards;
    animation-delay: 2s; /* Czeka 2 sekundy przed startem animacji */
}

@keyframes fadeinLoader {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#scrollable-area {
    overflow-y: scroll !important;
}

.datepicker.datepicker-dropdown {
    z-index: 1060 !important;
}

#loader-wrapper-forms {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 1000;
    opacity: 0.5;
    visibility: hidden;
/ / !important;
}

/* Domyślnie ukrywamy awaryjny pasek nawigacji */
.ios-safe-navigation-bar {
    display: none;
}

/* Pokazujemy tylko na urządzeniach Apple w trybie standalone (PWA) */
@media (display-mode: standalone) {
    html.ios-device .ios-safe-navigation-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #28a745; /* Twój zielony kolor */
        color: #fff;
        padding: 10px 15px;
        position: sticky;
        top: 0;
        z-index: 9999;
    }
}