/* Radar Nieba 0.1.38 — stabilny mobile frontend */

:root {
    --rn-mobile-bar-h: 58px;
    --rn-mobile-gap: 8px;
    --rn-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --rn-mobile-safe-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 900px) {
    /* 0.2.336: nie pokazuj półgotowego paska zanim zakończy się mobile boot. */
    html.rn-mobile-boot #rnMobileBar {
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /*
     * Faza startowa mobile. Klasa jest ustawiana synchronicznie w <head>,
     * zanim przeglądarka narysuje stary desktopowy sidebar. Dzięki temu
     * nie ma mignięcia panelu, który chwilę później staje się szufladą.
     */
    html.rn-mobile-boot .sidebar,
    html.rn-mobile-boot .mobile-toggle,
    html.rn-mobile-boot #rnLeftDockToggle,
    html.rn-mobile-boot #rnRightDockToggle {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html.rn-mobile-boot #map {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        opacity: 0 !important;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
        -webkit-text-size-adjust: 100%;
    }

    body.rn-mobile-ui {
        touch-action: manipulation;
    }

    /* Mapa jest zawsze pełnoekranowa. Panele nakładają się na nią jako szuflady. */
    body.rn-mobile-ui #map {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
    }

    /* Stary przycisk hamburgera i desktopowe uchwyty nie są potrzebne na mobile. */
    body.rn-mobile-ui .mobile-toggle,
    body.rn-mobile-ui #rnLeftDockToggle,
    body.rn-mobile-ui #rnRightDockToggle {
        display: none !important;
    }

    /* Tło pod otwartą szufladą. */
    #rnMobileBackdrop {
        position: fixed;
        inset: 0;
        z-index: 1140;
        background: rgba(2, 8, 15, .56);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
    }

    #rnMobileBackdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Oba desktopowe doki stają się dolnymi szufladami. */
    body.rn-mobile-ui .rn-side-dock {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: calc(var(--rn-mobile-bar-h) + var(--rn-mobile-safe-bottom) + 7px) !important;
        width: auto !important;
        height: min(78dvh, 690px) !important;
        max-height: calc(100dvh - var(--rn-mobile-bar-h) - var(--rn-mobile-safe-bottom) - 22px) !important;
        z-index: 1200 !important;
        overflow: hidden !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 20px !important;
        background: rgba(8, 17, 26, .985) !important;
        box-shadow: 0 18px 60px rgba(0,0,0,.48) !important;
        transform: translateY(0) !important;
        transition: transform .22s ease, opacity .18s ease !important;
        opacity: 1;
    }

    body.rn-mobile-ui .rn-side-dock.closed {
        transform: translateY(calc(100% + 90px)) !important;
        opacity: .985;
        pointer-events: none;
    }

    body.rn-mobile-ui .rn-side-dock::before {
        content: "";
        position: absolute;
        z-index: 5;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: 99px;
        background: rgba(255,255,255,.22);
        pointer-events: none;
    }

    body.rn-mobile-ui #rnLeftDock .rn-layout-radar-panel,
    body.rn-mobile-ui #rnRightDock #rnNewsPanel {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 20px !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
    }

    body.rn-mobile-ui #rnLeftDock .rn-layout-radar-panel {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 10px !important;
        background: transparent !important;
    }

    body.rn-mobile-ui #rnRightDock #rnNewsPanel {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 10px !important;
        background: transparent !important;
    }

    /* Lewy panel — bardziej zwarty, ale wygodny dotykowo. */
    body.rn-mobile-ui .sidebar-head {
        padding: 14px 15px 11px !important;
    }

    body.rn-mobile-ui .sidebar-head h1 {
        font-size: 19px !important;
    }

    body.rn-mobile-ui .sidebar-head p {
        margin-top: 3px !important;
        font-size: 11px !important;
    }

    body.rn-mobile-ui .cards {
        padding: 9px 10px !important;
        gap: 7px !important;
    }

    body.rn-mobile-ui .card {
        min-height: 58px;
        padding: 8px 9px !important;
    }

    body.rn-mobile-ui .card-value {
        font-size: 19px !important;
    }

    body.rn-mobile-ui .card-label {
        font-size: 10px !important;
    }

    body.rn-mobile-ui .section-title {
        padding: 7px 12px !important;
    }

    body.rn-mobile-ui .threat-list {
        min-height: 130px;
        padding: 0 7px 8px !important;
        -webkit-overflow-scrolling: touch;
    }

    body.rn-mobile-ui .threat-item {
        min-height: 52px;
        padding: 8px 9px !important;
    }

    body.rn-mobile-ui .rn-aircraft-tools {
        margin: 0 10px 8px !important;
        padding: 8px !important;
    }

    body.rn-mobile-ui .rn-aircraft-tools input,
    body.rn-mobile-ui .rn-aircraft-tools button,
    body.rn-mobile-ui .rn-aircraft-mode-switch button {
        min-height: 40px;
        font-size: 12px;
    }

    body.rn-mobile-ui .rn-search-results {
        max-height: 130px;
    }

    body.rn-mobile-ui .rn-nearest {
        margin: 0 10px 8px !important;
    }

    body.rn-mobile-ui .live-status {
        margin: 8px 10px !important;
        padding: 8px 10px !important;
    }

    body.rn-mobile-ui .sidebar-footer {
        padding: 8px 11px calc(9px + var(--rn-mobile-safe-bottom)) !important;
        font-size: 9px !important;
    }

    /* Doniesienia — pełna wysokość szuflady i większe cele dotykowe. */
    body.rn-mobile-ui #rnRightDock .rn-news-header {
        padding: 14px 14px 10px !important;
    }

    body.rn-mobile-ui #rnRightDock .rn-news-header strong {
        font-size: 15px !important;
    }

    body.rn-mobile-ui #rnRightDock .rn-news-tabs {
        padding: 7px 10px !important;
    }

    body.rn-mobile-ui #rnRightDock .rn-news-tabs button {
        min-height: 40px;
        font-size: 10px !important;
    }

    body.rn-mobile-ui #rnRightDock .rn-news-list,
    body.rn-mobile-ui #rnRightDock .rn-dorsz-facebook-pane {
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    body.rn-mobile-ui #rnRightDock .rn-news-item {
        padding: 12px 14px !important;
    }

    body.rn-mobile-ui #rnRightDock .rn-news-title {
        font-size: 12px !important;
        line-height: 1.42 !important;
    }

    body.rn-mobile-ui .rn-dorsz-facebook-frame iframe {
        min-height: 420px !important;
    }

    /* Dolny pasek nawigacyjny mobile. */
    #rnMobileBar {
        position: fixed;
        z-index: 1300;
        left: 8px;
        right: 8px;
        bottom: calc(7px + var(--rn-mobile-safe-bottom));
        height: var(--rn-mobile-bar-h);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
        padding: 5px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 17px;
        background: rgba(8, 17, 26, .94);
        box-shadow: 0 10px 30px rgba(0,0,0,.34);
        backdrop-filter: blur(12px);
    }

    #rnMobileBar button {
        min-width: 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #9cafbd;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 6px;
        font: 700 11px/1 Arial,sans-serif;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #rnMobileBar button .rn-mobile-icon {
        font-size: 17px;
        line-height: 1;
    }

    #rnMobileBar button.active {
        background: rgba(37, 112, 169, .24);
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(80, 164, 222, .28);
    }

    /* Leaflet — mapa ma być czytelna i nieoblepiona kontrolkami. */
    body.rn-mobile-ui .leaflet-control-zoom {
        display: none !important;
    }

    body.rn-mobile-ui .leaflet-top.leaflet-right {
        top: calc(8px + var(--rn-mobile-safe-top));
        right: 8px;
        z-index: 1310 !important;
    }

    body.rn-mobile-ui .leaflet-control-layers {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 0 !important;
        max-height: 58dvh;
        overflow: auto;
        border-radius: 10px !important;
    }

    body.rn-mobile-ui .leaflet-control-layers-toggle {
        width: 42px !important;
        height: 42px !important;
        background-size: 23px 23px !important;
    }

    body.rn-mobile-ui .leaflet-control-layers-expanded {
        max-width: calc(100vw - 28px);
        padding: 10px 12px !important;
        font-size: 13px;
    }

    body.rn-mobile-ui .leaflet-bottom {
        bottom: calc(var(--rn-mobile-bar-h) + var(--rn-mobile-safe-bottom) + 10px) !important;
    }

    body.rn-mobile-ui .leaflet-control-attribution {
        max-width: 72vw;
        padding: 2px 4px !important;
        font-size: 7px !important;
        line-height: 1.15 !important;
        opacity: .74;
    }

    /* Stara legenda Leaflet została zastąpiona wspólną Legendą mapy. */
    body.rn-mobile-ui .rn-airspace-legend {
        display: none !important;
    }

    /* 0.2.32: górny rząd = logo + warstwy; alert zawsze znajduje się poniżej. */
    body.rn-mobile-ui .rn-airspace-banner {
        position: fixed !important;
        z-index: 1295 !important;
        top: calc(62px + var(--rn-mobile-safe-top)) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        transform: none !important;
        max-height: calc(46dvh - 54px);
        overflow: auto;
        border-radius: 11px !important;
    }

    body.rn-mobile-ui .rn-airspace-banner-inner {
        padding: 8px 9px !important;
        gap: 8px !important;
    }

    body.rn-mobile-ui .rn-airspace-banner-icon {
        width: 23px !important;
        height: 23px !important;
        flex-basis: 23px !important;
    }

    body.rn-mobile-ui .rn-airspace-banner-title {
        font-size: 12px !important;
    }

    body.rn-mobile-ui .rn-airspace-banner-sub {
        font-size: 10px !important;
    }

    body.rn-mobile-ui .rn-airspace-passive-status {
        position: fixed !important;
        top: calc(62px + var(--rn-mobile-safe-top)) !important;
        left: 8px !important;
        right: 8px !important;
        max-width: none !important;
        width: auto !important;
        transform: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Historia jako czytelny bottom-sheet nad paskiem. */
    body.rn-mobile-ui .rn-airspace-history {
        position: fixed !important;
        z-index: 1260 !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: calc(var(--rn-mobile-bar-h) + var(--rn-mobile-safe-bottom) + 7px) !important;
        width: auto !important;
        max-height: 62dvh !important;
        transform: none !important;
        border-radius: 18px !important;
        box-shadow: 0 18px 60px rgba(0,0,0,.46) !important;
    }

    body.rn-mobile-ui .rn-airspace-history-head {
        padding: 13px 14px !important;
    }

    body.rn-mobile-ui .rn-airspace-history-title {
        font-size: 13px !important;
    }

    body.rn-mobile-ui .rn-airspace-history-close {
        width: 36px;
        height: 36px;
        font-size: 22px !important;
    }

    /* RCB i starsze statusy nad dolnym paskiem. */
    body.rn-mobile-ui .rn-rcb-air-banner {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(var(--rn-mobile-bar-h) + var(--rn-mobile-safe-bottom) + 12px) !important;
        width: auto !important;
        max-width: none !important;
    }

    body.rn-mobile-ui .rn-history-status {
        position: fixed !important;
        right: 8px !important;
        bottom: calc(var(--rn-mobile-bar-h) + var(--rn-mobile-safe-bottom) + 12px) !important;
    }

    /* Popupy Leaflet dopasowane do szerokości telefonu. */
    body.rn-mobile-ui .leaflet-popup-content-wrapper {
        width: min(calc(100vw - 20px), 340px) !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    body.rn-mobile-ui .leaflet-popup-content {
        width: min(calc(100vw - 52px), 308px) !important;
        min-width: min(calc(100vw - 52px), 308px) !important;
        max-width: calc(100vw - 52px) !important;
        margin: 12px 13px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    body.rn-mobile-ui .rn-airspace-popup {
        width: min(calc(100vw - 52px), 308px) !important;
        min-width: min(calc(100vw - 52px), 308px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    body.rn-mobile-ui .rn-airspace-popup-grid {
        grid-template-columns: 74px minmax(0, 1fr) !important;
    }

    /* Nieco mniejsze etykiety miejsc na małym ekranie. */
    body.rn-mobile-ui .rn-polish-place {
        font-size: 9px !important;
        line-height: 12px !important;
        padding: 1px 3px !important;
    }

    body.rn-mobile-ui .rn-polish-place-major {
        font-size: 10px !important;
        line-height: 13px !important;
    }
}


/* 0.1.38: nie pokazujemy już równoległej, starej legendy przestrzeni. */
.rn-airspace-legend {
    display: none !important;
}


/* Bardzo małe ekrany. */
@media (max-width: 390px) {
    #rnMobileBar button {
        gap: 4px;
        font-size: 10px;
        padding: 0 3px;
    }

    #rnMobileBar button .rn-mobile-icon {
        font-size: 16px;
    }

    body.rn-mobile-ui .rn-side-dock {
        left: 5px !important;
        right: 5px !important;
        height: 80dvh !important;
    }

    body.rn-mobile-ui .cards {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Telefon w poziomie — szuflada nie może zabrać całej wysokości mapy. */
@media (max-width: 900px) and (max-height: 520px) {
    body.rn-mobile-ui .rn-side-dock {
        height: calc(100dvh - var(--rn-mobile-bar-h) - var(--rn-mobile-safe-bottom) - 16px) !important;
    }

    body.rn-mobile-ui .sidebar-head p,
    body.rn-mobile-ui .sidebar-footer {
        display: none !important;
    }

    body.rn-mobile-ui .cards {
        grid-template-columns: repeat(4, 1fr) !important;
        padding: 7px 9px !important;
    }

    body.rn-mobile-ui .card {
        min-height: 50px;
    }
}

/* Radar Nieba 0.1.58 — Historia i Komunikaty mają różne role wizualne */
@media (max-width: 900px) {
    #rnMobileBar button[data-rn-mobile="history"] .rn-mobile-icon-history {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(129,140,248,.34);
        border-radius: 50%;
        color: #a5b4fc;
        font-size: 15px;
        font-weight: 800;
    }

    #rnMobileBar button[data-rn-mobile="news"] .rn-mobile-icon-news {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(245,158,11,.38);
        border-radius: 50%;
        color: #fbbf24;
        font-size: 13px;
        font-weight: 900;
    }

    #rnMobileBar button[data-rn-mobile="history"].active {
        background: rgba(79,70,229,.22);
        color: #eef2ff;
        box-shadow: inset 0 0 0 1px rgba(129,140,248,.28);
    }

    #rnMobileBar button[data-rn-mobile="news"].active {
        background: rgba(180,83,9,.20);
        color: #fff7ed;
        box-shadow: inset 0 0 0 1px rgba(245,158,11,.27);
    }

    /* Historia jest archiwum: wyższy, pełniejszy arkusz z osią czasu. */
    body.rn-mobile-ui .rn-airspace-history {
        left: 0 !important;
        right: 0 !important;
        top: calc(60px + var(--rn-mobile-safe-top)) !important;
        bottom: calc(var(--rn-mobile-bar-h) + var(--rn-mobile-safe-bottom) + 7px) !important;
        width: auto !important;
        max-height: none !important;
        transform: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-color: rgba(129,140,248,.24) !important;
        border-radius: 22px 22px 0 0 !important;
        background: rgba(11,15,29,.985) !important;
        box-shadow: 0 -12px 42px rgba(0,0,0,.38) !important;
    }

    body.rn-mobile-ui .rn-airspace-history-head {
        padding: 14px 15px 12px !important;
        border-bottom: 1px solid rgba(129,140,248,.13) !important;
        background: rgba(17,20,39,.985) !important;
    }

    body.rn-mobile-ui .rn-airspace-history-heading {
        padding-right: 8px;
    }

    body.rn-mobile-ui .rn-airspace-history-kicker {
        color: #a5b4fc !important;
        font-size: 8px !important;
        letter-spacing: .13em !important;
    }

    body.rn-mobile-ui .rn-airspace-history-title {
        margin-top: 3px !important;
        font-size: 16px !important;
        line-height: 1.15 !important;
    }

    body.rn-mobile-ui .rn-airspace-history-subtitle {
        margin-top: 4px !important;
        color: #92a0b5 !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    body.rn-mobile-ui .rn-airspace-history-tabs {
        gap: 7px !important;
        padding: 10px 14px 2px !important;
    }

    body.rn-mobile-ui .rn-airspace-history-tab {
        min-height: 38px;
        border-color: rgba(129,140,248,.16) !important;
        background: rgba(129,140,248,.045) !important;
        font-size: 10px !important;
    }

    body.rn-mobile-ui .rn-airspace-history-tab.is-active {
        border-color: rgba(129,140,248,.48) !important;
        background: rgba(79,70,229,.19) !important;
        color: #e0e7ff !important;
    }

    body.rn-mobile-ui .rn-airspace-history-current {
        margin: 10px 14px 5px !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
    }

    body.rn-mobile-ui .rn-airspace-history-section-title {
        padding: 11px 14px 2px !important;
        color: #a5b4fc !important;
        letter-spacing: .08em !important;
    }

    body.rn-mobile-ui .rn-airspace-history-list {
        padding: 5px 14px 18px !important;
        -webkit-overflow-scrolling: touch;
    }

    body.rn-mobile-ui .rn-airspace-history-row {
        padding: 11px 0 12px 22px !important;
    }

    body.rn-mobile-ui .rn-airspace-history-row::after {
        background: rgba(129,140,248,.24) !important;
    }

    body.rn-mobile-ui .rn-airspace-history-row::before {
        box-shadow: 0 0 0 4px rgba(11,15,29,.98) !important;
    }
}


/* Radar Nieba 0.2.37 — mobile: jedna naturalnie przewijana zakładka RADAR. */
@media (max-width: 900px) {
    body.rn-mobile-ui #rnLeftDock .rn-layout-radar-panel {
        min-height: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* Elementy panelu budują jedną kolumnę o rzeczywistej wysokości. */
    body.rn-mobile-ui #rnLeftDock .rn-layout-radar-panel > * {
        flex-shrink: 0;
    }

    /* Lista nie tworzy już drugiego, zagnieżdżonego scrolla. */
    body.rn-mobile-ui #rnLeftDock .rn-layout-radar-panel .threat-list {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto;
    }
}