html {
    scrollbar-gutter: stable;
}

body {
    padding-right: 0 !important;
    overflow-y: auto !important;
}

.offcanvas-backdrop {
    width: 100% !important;
}

/* =========================================
       DOMYŚLNE STYLE (DESKTOP >= 1024px) 
       (Nienaruszone zachowanie oryginału)
       ========================================= */
#offcanvasDetails {
    width: 50% !important;
}

#filterForm .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

    #filterForm .filter-row > * {
        flex-shrink: 0;
    }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

    .page-header h2 {
        font-size: clamp(1rem, 4vw, 1.5rem);
        margin: 0;
    }

.btn-add-text {
    display: inline;
}

/* =========================================
       TABLETY (poniżej 1024px)
       ========================================= */
@media (max-width: 1023.98px) {
    #offcanvasDetails {
        width: 70% !important; /* Szerszy panel na tabletach */
    }
    /* Upewnienie się, że tabela nie zepsuje layoutu - pozwala na poziomy scroll na urządzeniach dotykowych */
    #tableContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================
       MNIEJSZE TABLETY / POZIOME TELEFONY (poniżej 768px)
       ========================================= */
@media (max-width: 767.98px) {
    #offcanvasDetails {
        width: 100% !important; /* Pełny ekran offcanvas na telefonie */
    }

    .btn-add-text {
        display: inline-block; /* Zostawiamy samą ikonę plusa, by oszczędzić miejsce */
    }
}

/* =========================================
       SMARTFONY PIONOWO (poniżej 576px)
       ========================================= */
@media (max-width: 575.98px) {
    #filterForm .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

        #filterForm .filter-row > * {
            width: 100%;
        }

    #customDates .d-flex {
        flex-direction: column;
        gap: 6px !important;
    }
    /* Wymuszenie pełnej szerokości, nadpisując sztywne style inline z HTML */
    #customDates input[type="date"],
    #periodSelect {
        width: 100% !important;
    }

    .filter-buttons {
        display: flex;
        gap: 8px;
        width: 100%;
    }

        .filter-buttons .btn-sm {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
}

/* =========================================
       PRZEŁĄCZNIK "EKWIWALENT" (Tak / Nie)
       ========================================= */
.ekw-switch {
    position: relative;
    display: inline-block;
    margin: 0;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
}

    .ekw-switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.ekw-switch-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 62px;
    height: 26px;
    border-radius: 13px;
    background: #ced4da;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .2s ease;
}

    /* Gałka */
    .ekw-switch-track::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
        transition: transform .2s ease;
    }

.ekw-switch-on,
.ekw-switch-off {
    position: absolute;
    color: #fff;
    transition: opacity .2s ease;
}

.ekw-switch-on {
    left: 9px;
    opacity: 0;
}

.ekw-switch-off {
    right: 9px;
    color: #495057;
}

.ekw-switch input:checked + .ekw-switch-track {
    background: #198754;
}

    .ekw-switch input:checked + .ekw-switch-track::after {
        transform: translateX(36px);
    }

    .ekw-switch input:checked + .ekw-switch-track .ekw-switch-on {
        opacity: 1;
    }

    .ekw-switch input:checked + .ekw-switch-track .ekw-switch-off {
        opacity: 0;
    }

.ekw-switch input:focus-visible + .ekw-switch-track {
    outline: 2px solid #86b7fe;
    outline-offset: 2px;
}

.ekw-switch input:disabled + .ekw-switch-track {
    opacity: .6;
    cursor: wait;
}

/* Wyrównanie wysokości z polem Lokalizacja w formularzu */
.akcja-modal-form .ekw-switch {
    padding: 6px 0;
}

    .modal-osp-custom {
        max-width: 85vw; /* Zajmie dokładnie 85% szerokości ekranu */
    }