html,
body {
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
}


/* =============================
   DOKI
   ============================= */

.rn-side-dock {
    position:fixed;
    top:0;
    bottom:0;

    z-index:1000;

    background:
        rgba(10,19,28,.985);

    transition:
        transform .20s ease;

    overflow:hidden;
}


.rn-left-dock {
    left:0;
    width:340px;

    border-right:
        1px solid
        rgba(255,255,255,.10);
}


.rn-right-dock {
    right:0;
    width:380px;

    border-left:
        1px solid
        rgba(255,255,255,.10);
}


.rn-left-dock.closed {
    transform:
        translateX(-100%);
}


.rn-right-dock.closed {
    transform:
        translateX(100%);
}


/* =============================
   LEWY PANEL
   ============================= */

#rnLeftDock
.rn-layout-radar-panel {

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    width:100% !important;
    max-width:none !important;

    height:100vh !important;
    max-height:none !important;

    margin:0 !important;

    border-radius:0 !important;

    box-sizing:border-box;

    overflow-y:auto;

    box-shadow:none !important;
}


/* =============================
   NEWSY
   ============================= */

#rnRightDock
#rnNewsPanel {

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    width:100% !important;

    height:100vh !important;
    max-height:none !important;

    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
        rgba(10,19,28,.98);

    backdrop-filter:none;

    display:flex;
    flex-direction:column;
}


#rnRightDock
.rn-news-list {
    flex:1 1 auto;

    min-height:0;

    overflow-y:auto;
}


#rnRightDock
.rn-news-header {
    padding:
        17px 16px
        14px;
}


#rnRightDock
.rn-news-header strong {
    font-size:16px;
}


#rnRightDock
.rn-news-item {
    padding:
        12px 15px;
}


#rnRightDock
.rn-news-title {
    font-size:12px;
    line-height:1.42;
}


/*
 * W prawym doku nie potrzebujemy
 * starego przycisku zwijania v18,
 * bo cały dok ma własny przełącznik.
 */
#rnRightDock
#rnNewsToggle {
    display:none;
}


/* =============================
   PRZYCISKI CHOWANIA
   ============================= */

#rnLeftDockToggle,
#rnRightDockToggle {

    position:fixed;

    top:50%;

    transform:
        translateY(-50%);

    z-index:1100;

    width:27px;
    height:58px;

    border:
        1px solid
        rgba(255,255,255,.13);

    background:
        rgba(10,19,28,.96);

    color:#aebdca;

    font-size:25px;

    cursor:pointer;

    transition:
        left .20s ease,
        right .20s ease,
        background .15s ease,
        color .15s ease;
}


#rnLeftDockToggle {
    border-radius:
        0 8px 8px 0;
}


#rnRightDockToggle {
    border-radius:
        8px 0 0 8px;
}


#rnLeftDockToggle:hover,
#rnRightDockToggle:hover {
    color:#fff;

    background:
        rgba(19,34,47,.98);
}


/* =============================
   RESPONSIVE
   ============================= */

@media (
    max-width: 1049px
) {

    .rn-right-dock {
        width:
            min(
                380px,
                88vw
            );
    }

}


@media (
    max-width: 759px
) {

    .rn-left-dock {
        width:
            min(
                340px,
                88vw
            );
    }

}

/* Startowy rozmiar mapy na desktopie — bez widocznego przesunięcia */
#map {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 340px;
    right: 380px;
    width: auto !important;
    height: 100vh !important;
}