/* === START OF FILE components/scanner/scanner-layout-mobile-overlay.css === */
/* Aus views/scanner.js ausgelagerte Scanner-Styles. */

@media (max-width: 767px) {
    body:has(#scanner-map-layout:not(.scanner-filter-collapsed)) {
        overflow: hidden !important;
    }
    #scanner-static-workspace {
        min-height: calc(100svh - 64px) !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem) !important;
    }
    #scanner-static-workspace .scanner-sections-strip {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(92px, .85fr) !important;
        gap: .45rem !important;
        height: auto !important;
        min-height: 54px !important;
        overflow: visible !important;
        padding: .45rem !important;
        margin: 0 -.35rem .35rem -.35rem !important;
        background: rgba(2, 6, 23, .96) !important;
        border-color: rgba(30, 41, 59, .7) !important;
        backdrop-filter: blur(12px);
    }
    #scanner-static-workspace .scanner-sections-strip > span:first-child {
        display: none !important;
    }
    #scanner-static-workspace .scanner-tab-btn,
    #scanner-mobile-filter-tab-btn {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        padding: .55rem .45rem !important;
        border-radius: 1rem !important;
        font-size: 9px !important;
        letter-spacing: .14em !important;
        white-space: nowrap !important;
    }
    #scanner-static-workspace .scanner-tab-btn span,
    #scanner-mobile-filter-tab-btn span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #scanner-mobile-filter-tab-btn {
        display: flex !important;
        border-color: rgba(245, 158, 11, .75) !important;
        color: rgb(253, 186, 116) !important;
        background: linear-gradient(135deg, rgba(120, 53, 15, .72), rgba(15, 23, 42, .92)) !important;
        box-shadow: inset 0 0 18px rgba(245, 158, 11, .16), 0 0 0 1px rgba(245, 158, 11, .08) !important;
    }
    #scanner-map-layout:not(.scanner-filter-collapsed) #scanner-mobile-filter-tab-btn,
    #scanner-mobile-filter-tab-btn.border-cyan-500\/60 {
        border-color: rgba(34, 211, 238, .78) !important;
        color: rgb(103, 232, 249) !important;
        background: linear-gradient(135deg, rgba(8, 47, 73, .88), rgba(15, 23, 42, .96)) !important;
    }
    #scanner-tab-map {
        height: calc(100svh - 132px) !important;
        min-height: 390px !important;
        overflow: hidden !important;
    }
    #scanner-map-layout,
    #scanner-map-layout.scanner-filter-collapsed {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #scanner-map-layout > main,
    #box-radar,
    #content-radar,
    #box-radar .flex-1.w-full.relative.z-10 {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #scanner-map-layout > aside {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100svh !important;
        max-height: 100svh !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        padding: calc(env(safe-area-inset-top, 0px) + .65rem) .65rem calc(env(safe-area-inset-bottom, 0px) + .65rem) !important;
        background: rgba(2, 6, 23, .985) !important;
        backdrop-filter: blur(16px) !important;
    }
    #scanner-map-layout.scanner-filter-collapsed > aside {
        transform: translateY(102%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #scanner-mobile-filter-sheet-head {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        z-index: 5 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        margin: 0 0 .65rem 0 !important;
        border-radius: 1rem !important;
        border: 1px solid rgba(34, 211, 238, .38) !important;
        background: rgba(15, 23, 42, .98) !important;
        box-shadow: 0 12px 35px rgba(0,0,0,.55) !important;
        padding: .75rem .8rem !important;
    }
    #scanner-map-layout.scanner-filter-collapsed #scanner-mobile-filter-sheet-head {
        display: none !important;
    }
    #scanner-filter-sidebar-toggle-inline {
        display: none !important;
    }
    #box-radar-filters {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #content-radar-filters {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        padding: .1rem .1rem 6rem .1rem !important;
        scrollbar-width: thin;
    }
    #radar-filters {
        overflow: visible !important;
        min-height: 0 !important;
    }
    #radar-section-search,
    .radar-flyout-section {
        background: rgba(15, 23, 42, .78) !important;
        border: 1px solid rgba(51, 65, 85, .55) !important;
        border-radius: 1rem !important;
    }
    #radar-filter-quick-buttons {
        grid-template-columns: 1fr !important;
        gap: .65rem !important;
        border: 0 !important;
        background: transparent !important;
        padding: .65rem 0 !important;
    }
    #radar-filter-quick-buttons button {
        min-height: 58px !important;
        border-radius: 1rem !important;
        background: rgba(15, 23, 42, .9) !important;
        font-size: 10px !important;
        letter-spacing: .16em !important;
    }
    #radar-filter-quick-buttons .active-filter-flyout {
        border-color: rgba(34, 211, 238, .72) !important;
        color: rgb(103, 232, 249) !important;
        background: rgba(8, 47, 73, .74) !important;
    }
    #radar-filter-flyout {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: .35rem 0 1rem 0 !important;
    }
    #radar-filter-flyout .radar-flyout-section {
        padding: .85rem !important;
    }
    #scanner-sector-dock-panel {
        z-index: 45000 !important;
    }
}

/* Einheitliche gelbe Scrollleisten fuer Schatzkarten-Filter */
#scanner-map-layout > aside,
#content-radar-filters,
#radar-filter-flyout,
#scanner-filter-profiles-menu,
#content-radar-filters .radar-flyout-section {
    scrollbar-width: thin !important;
    scrollbar-color: #fbbf24 rgba(15,23,42,.55) !important;
}
#scanner-map-layout > aside::-webkit-scrollbar,
#content-radar-filters::-webkit-scrollbar,
#radar-filter-flyout::-webkit-scrollbar,
#scanner-filter-profiles-menu::-webkit-scrollbar,
#content-radar-filters .radar-flyout-section::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
#scanner-map-layout > aside::-webkit-scrollbar-track,
#content-radar-filters::-webkit-scrollbar-track,
#radar-filter-flyout::-webkit-scrollbar-track,
#scanner-filter-profiles-menu::-webkit-scrollbar-track,
#content-radar-filters .radar-flyout-section::-webkit-scrollbar-track {
    background: rgba(15,23,42,.55) !important;
    border-radius: 999px !important;
}
#scanner-map-layout > aside::-webkit-scrollbar-thumb,
#content-radar-filters::-webkit-scrollbar-thumb,
#radar-filter-flyout::-webkit-scrollbar-thumb,
#scanner-filter-profiles-menu::-webkit-scrollbar-thumb,
#content-radar-filters .radar-flyout-section::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fbbf24, #f59e0b) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(15,23,42,.65) !important;
    box-shadow: 0 0 12px rgba(251,191,36,.25) !important;
}
#scanner-map-layout > aside::-webkit-scrollbar-thumb:hover,
#content-radar-filters::-webkit-scrollbar-thumb:hover,
#radar-filter-flyout::-webkit-scrollbar-thumb:hover,
#scanner-filter-profiles-menu::-webkit-scrollbar-thumb:hover,
#content-radar-filters .radar-flyout-section::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fde68a, #f59e0b) !important;
}



/* 2026-06-28: Mobile Tab-Buttons und Legende final ausrichten */
@media (max-width: 767px) {
    #scanner-static-workspace .scanner-sections-strip {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: .55rem !important;
        overflow: visible !important;
        padding: .55rem !important;
        border-radius: 1.05rem !important;
    }
    #scanner-static-workspace .scanner-sections-strip > span:first-child,
    #scanner-static-workspace .scanner-sections-strip > span.hidden {
        display: none !important;
    }
    #scanner-static-workspace .scanner-sections-strip .scanner-tab-btn,
    #scanner-mobile-filter-tab-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;
        height: 54px !important;
        justify-content: center !important;
        gap: .45rem !important;
        padding: .65rem .35rem !important;
        border-radius: 1rem !important;
        font-size: 9.5px !important;
        letter-spacing: .13em !important;
    }
    #scanner-static-workspace .scanner-sections-strip .scanner-tab-btn i,
    #scanner-mobile-filter-tab-btn i {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 auto !important;
    }
    #scanner-static-workspace .scanner-sections-strip .scanner-tab-btn span,
    #scanner-mobile-filter-tab-btn span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #scanner-mobile-filter-tab-btn {
        display: flex !important;
        border-color: rgba(245,158,11,.72) !important;
        background: linear-gradient(135deg, rgba(120,53,15,.92), rgba(2,6,23,.88)) !important;
        color: #fde68a !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(245,158,11,.14) !important;
    }
    #scanner-mobile-filter-tab-btn.border-cyan-500\/60,
    #scanner-mobile-filter-tab-btn.bg-cyan-500\/15 {
        border-color: rgba(34,211,238,.75) !important;
        background: linear-gradient(135deg, rgba(8,145,178,.26), rgba(2,6,23,.9)) !important;
        color: #67e8f9 !important;
    }
    #box-radar .absolute.inset-0,
    #box-radar .absolute.inset-0.sm\:inset-4 {
        bottom: 4.25rem !important;
    }
    #radar-legend {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: .28rem .42rem !important;
        left: .45rem !important;
        right: .45rem !important;
        bottom: .35rem !important;
        max-width: calc(100vw - .9rem) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: unset !important;
        justify-content: stretch !important;
        padding: .42rem .5rem !important;
        border-radius: .85rem !important;
    }
    #radar-legend > div {
        min-width: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        gap: .25rem !important;
    }
    #radar-legend > div > span:first-child {
        width: .58rem !important;
        height: .58rem !important;
        min-width: .58rem !important;
        margin-right: .18rem !important;
    }
    #radar-legend > div > span:last-child {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 7px !important;
        letter-spacing: .06em !important;
    }
}

@media (max-width: 420px) {
    #box-radar .absolute.inset-0,
    #box-radar .absolute.inset-0.sm\:inset-4 {
        bottom: 5.15rem !important;
    }
    #radar-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* 2026-06-28: Mobile Karte kompakt + Legende im Fluss */
@media (max-width: 767px) {
    #scanner-tab-map {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    #scanner-map-layout,
    #scanner-map-layout.scanner-filter-collapsed,
    #scanner-map-layout > main,
    #box-radar,
    #content-radar {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #box-radar .flex-1.w-full.relative.z-10 {
        position: relative !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    #box-radar .absolute.inset-0,
    #box-radar .absolute.inset-0.sm\:inset-4 {
        inset: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: .75rem !important;
    }
    #galaxy-map-viewport {
        height: 100% !important;
        max-height: none !important;
    }
    #radar-legend {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: .55rem 0 0 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .38rem .55rem !important;
        overflow: visible !important;
        white-space: normal !important;
        padding: .55rem .65rem !important;
        background: rgba(2,6,23,.86) !important;
        border: 1px solid rgba(30,41,59,.65) !important;
        border-radius: .8rem !important;
    }
    #radar-legend > div {
        min-width: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        gap: .32rem !important;
    }
    #radar-legend > div > span:first-child {
        width: .62rem !important;
        height: .62rem !important;
        min-width: .62rem !important;
    }
    #radar-legend > div > span:last-child {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: 7.5px !important;
        letter-spacing: .045em !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 380px) {
    #radar-legend {
        gap: .34rem .4rem !important;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }
    #radar-legend > div > span:last-child {
        font-size: 7px !important;
        letter-spacing: .025em !important;
    }
}


/* 2026-06-28: Mobile Hauptmenü-Layer-Fix
   Die Schatzkarten-Tab-Leiste darf das geöffnete App-Hauptmenü nicht überlagern. */
@media (max-width: 767px) {
    #scanner-static-workspace .scanner-sections-strip {
        z-index: 5 !important;
        isolation: auto !important;
    }
    #scanner-mobile-filter-tab-btn,
    #scanner-static-workspace .scanner-tab-btn {
        position: relative !important;
        z-index: 1 !important;
    }
    #scanner-map-layout:not(.scanner-filter-collapsed) > aside {
        z-index: 99999 !important;
    }
}

/* === END OF FILE components/scanner/scanner-layout-mobile-overlay.css === */