/* Shared map layout, controls, and UI affordances. Used by /map, /radar/bom/*, /forecast. Page-specific rules stay in map.css, radar.css, forecast.css. Load order: map_shared.css FIRST, then page CSS. */

#position_controls {
    position: absolute;
    left:10px;
    bottom:10px;
    z-index:4;
}
#speed_controls {
    position: absolute;
    right:10px;
    bottom:10px;
    z-index:4;
}

.mapboxgl-ctrl-scale {
    background-color: hsla(0,0%,100%, 0.5);
}

/* ********************* */
.animator-buttons {
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:100;
}

.animator-controls {
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
}
.animator-control {
    width:20px;
    height:20px;
    padding:2px;
    margin:3px 5px;
    border-radius:3px;
    cursor: pointer;
}

.animator-control img {
    width:100%;
    height:100%;
    display:block;
}

.animator-control-selected {
    border-left: solid 1px #888;
    border-top: solid 1px #888;
    border-right: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    background-color:#C8C8C8;
}

#animator_control_current.animator-control-selected {
    background: #4CAF50 !important;
}
#animator_control_current.animator-control-selected img {
    filter: brightness(0) invert(1);
}
#animator_control_current.animator-control-tracking {
    background: #1a73e8 !important;
}
#animator_control_current.animator-control-tracking img {
    filter: brightness(0) invert(1);
}
#animator_control_current.animator-control-idle {
    background: #9E9E9E !important;
}
#animator_control_current.animator-control-idle img {
    filter: brightness(0) invert(1);
}

#animator_control_stop {
    display:none;
}
#animation_interval_slider,#animation_position_slider {
    margin: 0;
    font-size: 15px;
    width:160px;
}
#animation_interval_slider {
}

#map_spinner {
    position:absolute;
    left:13px;
    top:176px;
    z-index:4;
    font-size: 24px;
    --indicator-color: blue;
    --track-width: 4px;
    --track-color: white;
    --speed: 10s;
}

@media (max-width: 768px) {
    #map_spinner {
	width:24px;
	height:24px;
    }
}

#current_info {
    width:100%;
    position:absolute;
    left:0;
    bottom:40px;
    z-index:3;
    min-height:10px;
    color: rgba(17,24,39,1.0);
    font-size: 12px;
    line-height: 1rem;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    padding: 10px 5px;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;


}
#current_info div {
    background-color: rgba(255,255,255,0.8);
    padding: 0;
    text-align:center;
    margin: 5px 5px 0 5px;
    padding:3px 0;
    border-radius:3px;
}
@media (max-width: 540px) {
    #current_info div {
	padding: 0.1rem 0.1rem 0 0.1rem;
	margin: 0 0.1rem 0.25rem 0.1rem;
	font-size: 10px;
    }
    #current_info {
	justify-content: center;
    }
    #local_ts, #utc_ts {
	min-width: 180px;
    }
    #relative_ts {
	min-width: 70px;
    }
    #frame_number {
	min-width: 40px;
    }
}

/* Adjust current_info positioning on mobile - will be set by JS */
@media (max-width: 1080px) {
    #current_info {
	/* Bottom position will be set by JavaScript based on sidebar height */
	padding: 5px 5px;
    }

    #current_info div {
	font-size: 9px;
	padding: 2px 4px;
	margin: 2px 2px;
    }
}

#frame_info {
    min-width:60px;
}
#relative_ts {
    min-width:90px;
}
#local_ts {
    min-width:250px;
}
#utc_ts {
    min-width:250px;
}

.configure-header {
    font-size: 0.95rem;
    font-weight: 600;
    color: #002965;
    padding: 0 0 8px 0;
    text-align: center;
}

/* Mobile info elements - hidden by default, shown on mobile */
#mobile_info_button,
#mobile_info_popover,
#mobile_info_backdrop {
    display: none;
}

#mobile_sidebar_tab {
    display: none;
}

.map-control-section {
    border-bottom: 1px solid #E5E7EB;
    padding: 12px 12px;
    background: transparent;
}

#map_container {
    --desktop-sidebar-width: 450px;
    --fullscreen-tab-width: 30px;
    --mobile-sidebar-handle-height: 52px;
    --mobile-sidebar-pwa-clearance: 12px;
}

#sidebar {
    width: var(--desktop-sidebar-width);
    overflow-y: auto;
    background-color: #FFFFFF;
    border-left: 1px solid #D6DFEB;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

#sidebar {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(0);
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

#map_wrapper {
    width: 100%;
    margin-right: var(--desktop-sidebar-width);
}

#map {
    background-color: #C3D9EB;
}

#desktop_map_controls {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    gap: 8px;
}

.desktop-map-button {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(17, 24, 39, 0.22);
    background: rgba(255, 255, 255, 0.8);
    color: #101010;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.desktop-map-button:hover {
    background: #FFFFFF;
    border-color: rgba(17, 24, 39, 0.38);
}

.desktop-map-button[aria-pressed="true"] {
    background: #FFFFFF;
    border-color: rgba(17, 24, 39, 0.44);
    color: #111111;
}

.desktop-map-button-icon {
    width: 12px;
    height: 12px;
    display: block;
    pointer-events: none;
    filter: grayscale(1) brightness(0);
    opacity: 0.82;
}

.desktop-map-button-close {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border-color: rgba(17, 24, 39, 0.34);
    background: #FFFFFF;
    color: #111111;
}

.desktop-map-button-close .desktop-map-button-icon {
    width: 10px;
    height: 10px;
    opacity: 0.85;
}

.desktop-map-button.desktop-map-button-close[aria-pressed="true"] {
    background: #FFFFFF;
    border-color: rgba(17, 24, 39, 0.48);
    color: #111111;
}

#fullscreen_panels_tabs {
    display: none;
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 8;
    gap: 6px;
    flex-direction: column;
    align-items: flex-end;
}

.fullscreen-panel-tab {
    width: var(--fullscreen-tab-width);
    min-width: var(--fullscreen-tab-width);
    height: 28px;
    border: 1px solid rgba(17, 24, 39, 0.22);
    border-radius: 6px 0 0 6px;
    background: rgba(255, 255, 255, 0.8);
    color: #101010;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.fullscreen-panel-tab[aria-pressed="true"] {
    background: #FFFFFF;
    border-color: rgba(17, 24, 39, 0.44);
    color: #101010;
}

.fullscreen-panel-tab .tab-arrow-wrap {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-panel-tab .tab-arrow-icon {
    width: 18px;
    height: 18px;
    display: block;
    filter: grayscale(1) brightness(0);
    opacity: 0.86;
}

.fullscreen-panel-tab .tab-icon-wrap {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-panel-tab .tab-icon {
    width: 12px;
    height: 12px;
    display: block;
    filter: grayscale(1) brightness(0);
    opacity: 0.82;
}

.fullscreen-panel-tab.tab-collapsed {
    width: auto;
    min-width: 46px;
    padding: 0 6px;
    justify-content: center;
}

.fullscreen-panel-tab.tab-open {
    width: var(--fullscreen-tab-width);
    min-width: var(--fullscreen-tab-width);
    justify-content: center;
}

#fullscreen_brand_logo {
    display: none;
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 8;
}

#fullscreen_brand_logo .logo-div {
    margin: 0;
    width: 72px;
    height: 72px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#desktop_sidebar_tab {
    display: none;
    position: absolute;
    top: 50%;
    right: var(--desktop-sidebar-width);
    transform: translateY(-50%);
    z-index: 9;
    width: 24px;
    height: 88px;
    border: 1px solid rgba(17, 24, 39, 0.22);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: rgba(255, 255, 255, 0.86);
    color: #111111;
    cursor: pointer;
    line-height: 0;
    padding: 0;
    transition: right 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    align-items: center;
    justify-content: center;
}

#desktop_sidebar_tab:hover {
    background: #FFFFFF;
    border-color: #9CA3AF;
}

#desktop_sidebar_tab .sidebar-tab-icon {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
    filter: grayscale(1) brightness(0);
    opacity: 0.84;
}

/* Mobile: Fixed at bottom with semi-transparent background */
@media (max-width: 1080px) {
    /* Bottom-sheet: extend the sidebar background down to the viewport edge
       (through the iPhone home-indicator safe area) and push content up with
       padding. Without padding-bottom the map would show through the curvy-bit
       strip when the sheet is open; the old `bottom: max(0, env(...))` rule
       left exactly that gap. box-sizing: border-box keeps the padding inside
       max-height so the sheet doesn't exceed 50vh. */
    #sidebar {
	position: fixed;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-height: 50vh;
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
	z-index: 5;
	background-color: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 0;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
	transition: max-height 0.2s ease, box-shadow 0.2s ease;
    }

    /* Mobile drawer handle — inset-button pattern. The <button> itself is
       full-width (bigger touch target) but visually contains a centered
       rounded "pill button" (::before) with crisp border, gradient, and
       lift shadow — the bounded shape is what makes it read as a button.
       Icon sits on top of the button shape. */
    #mobile_sidebar_tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--mobile-sidebar-handle-height);
	min-height: var(--mobile-sidebar-handle-height);
	flex-shrink: 0;
	border: none;
	border-top: 1px solid #CBD5E1;
	background-color: #F1F5F9;
	cursor: pointer;
	padding: 0;
    }

    /* The visible button shape — bounded rectangle, rounded, gradient,
       border, lift shadow. This is what the eye reads as "button". */
    #mobile_sidebar_tab::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140px;
	height: 36px;
	border-radius: 10px;
	background: linear-gradient(to bottom, #edf8ff 0%, #dde8ef 50%, #cdd8df 100%);
	border: 1px solid #94A3B8;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18),
	            inset 0 1px 0 rgba(255, 255, 255, 0.7);
	pointer-events: none;
	transition: transform 0.08s ease, box-shadow 0.08s ease;
    }

    #mobile_sidebar_tab:hover::before {
	background: linear-gradient(to bottom, #f4faff 0%, #e4eef5 50%, #d3dee5 100%);
    }

    /* Pressed state — inset shadow + slight compression to give haptic feel */
    #mobile_sidebar_tab:active::before {
	background: linear-gradient(to bottom, #cdd8df 0%, #dde8ef 50%, #edf8ff 100%);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
	transform: translate(-50%, -50%) translateY(1px);
    }

    #mobile_sidebar_tab .mobile-sidebar-tab-icon {
	position: relative;
	width: 22px;
	height: 22px;
	display: block;
	/* Tint SVG to brand blue (#002965). Filter stack from codepen.io/sosuke/pen/Pjoqqp. */
	filter: invert(11%) sepia(85%) saturate(2914%) hue-rotate(217deg) brightness(96%) contrast(106%);
	opacity: 1;
	pointer-events: none;
    }

    /* When mobile sidebar is collapsed, hide sidebar content but leave the
       handle + any mobile ad (and its "Remove Ads" link) visible. Ads are
       revenue-bearing and need to stay onscreen even with controls collapsed;
       everything else (map_data, info button, page-specific content) is
       hidden. `height: auto !important` overrides any inline height set by
       per-page resize logic (e.g. radar.js resizeInterface sets
       infoDiv.style.height on every resize) so the sidebar collapses to
       just its visible children. max-height: none removes the 50vh cap so
       a tall ad doesn't get clipped.

       The `bottom: 0` + `padding-bottom: env(...)` + `box-sizing: border-box`
       pattern now lives on the base `#sidebar` rule (see above), so the
       background always extends through the iPhone home-indicator safe area
       ("curvy bits"). The rules below are still needed in the collapsed +
       PWA case to (a) enforce a visible min-height, (b) make the handle
       absolute-positioned so it can extend into the safe area, and
       (c) keep overflow visible while sizing shrinks to just the handle. */
    /* Symmetric breathing room above + below the mobile ad so it doesn't
       sit flush against the map edge on top or the handle/next element on
       bottom. Only applies when the ad is inside the sidebar (as on /map
       and /radar/bom/*). */
    #sidebar > #mobile_inline_ad {
	padding: 4px 0;
    }

    #map_container.mobile-sidebar-collapsed #sidebar > *:not(#mobile_sidebar_tab):not(#mobile_inline_ad):not(.remove-ads) {
	display: none !important;
    }
    #map_container.mobile-sidebar-collapsed #sidebar {
	height: auto !important;
	max-height: none !important;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
	border-top: 1px solid #E5E7EB;
    }

    #map_container.mobile-sidebar-collapsed #mobile_sidebar_tab {
	margin-top: 0;
	position: relative;
	z-index: 2;
	border-top: 1px solid #DDD;
    }

    /* PWA + collapsed: extend the sidebar background into the home-indicator
       safe area ("curvy bits") so the handle feels anchored to the bottom of
       the screen rather than floating. `bottom: 0` + `padding-bottom: env(...)`
       puts the border box flush to the viewport bottom while keeping any in-flow
       content (ads, remove-ads link) above the safe area. `min-height` gives the
       collapsed sidebar visible extent even when no ad is present (e.g. /forecast
       has no #mobile_inline_ad, so without this it would collapse to 0px and the
       handle would float alone over the map). The handle stays position:absolute
       so it can extend into the safe area; `min(clearance, env)` preserves the
       exact viewport position the previous formula produced. */
    #map_container.pwa-mode.mobile-sidebar-collapsed #sidebar {
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
	min-height: calc(var(--mobile-sidebar-handle-height) + min(var(--mobile-sidebar-pwa-clearance), env(safe-area-inset-bottom)));
	box-sizing: border-box;
	overflow: visible;
    }

    #map_container.pwa-mode.mobile-sidebar-collapsed #mobile_sidebar_tab {
	position: absolute;
	left: 0;
	right: 0;
	bottom: min(var(--mobile-sidebar-pwa-clearance), env(safe-area-inset-bottom));
	height: var(--mobile-sidebar-handle-height);
	padding: 0;
	box-sizing: border-box;
    }

    #desktop_sidebar_tab {
	display: none !important;
    }

    #fullscreen_panels_tabs {
	display: none !important;
    }

    #fullscreen_brand_logo {
	display: none !important;
    }

    #map_wrapper {
	height: 100vh;
	width: 100%;
	background-color:#FFF;
    }

    #map {
	height: 100%;
	width: 100%;
    }

    /* Hide title section on mobile */
    #sidebar .map-control-section:first-child {
	display: none;
    }

    /* Hide section headers on mobile */
    #sidebar .configure-header {
	display: none;
    }

    /* Hide explanatory text paragraphs on mobile */
    #sidebar .map-control-section p {
	display: none;
    }

    /* Reduce padding on control sections and remove borders */
    .map-control-section {
	border: none !important;
	border-bottom: none !important;
	padding: 2px 5px;
	margin: 0;
    }

    /* Make radio controls more compact */
    .neo-radio {
	font-size: 13px;
    }

    .neo-radio label {
	padding: 4px 8px;
	margin: 2px;
    }

    .neo-radio input[type="radio"] {
	margin: 0 3px 0 0;
    }

    #sidebar form {
	margin: 0;
    }

    /* Reduce timestamp info min-widths on mobile */
    #local_ts, #utc_ts {
	min-width: 140px !important;
	font-size: 9px;
    }

    #relative_ts {
	min-width: 50px !important;
    }

    #frame_number, #frame_info {
	min-width: 35px !important;
    }

    .animator-control {
	width:12px;
	height:12px;
	padding:1px;
	margin:1px 2px;
	border-radius:2px;
    }

input[type="range"]::-webkit-slider-thumb {
     width: 12px;
    height: 12px;
    margin-top: -2px;
}

/* Firefox thumb */
input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
}

}

/* Desktop: Side-by-side layout */
@media (min-width: 1081px) {
    #map_container {
	display: flex;
	flex-wrap: nowrap;
	position: relative;
    }

    #map_wrapper {
	flex: 1 1 auto;
	width: auto;
    }

    #desktop_map_controls {
	display: flex;
    }

    #desktop_sidebar_tab {
	display: flex;
    }

    #map_container.sidebar-collapsed #sidebar {
	transform: translateX(100%);
	opacity: 0;
	pointer-events: none;
	box-shadow: none;
	border-left: none;
    }

    #map_container.sidebar-collapsed #map_wrapper {
	margin-right: 0;
    }

    #map_container.sidebar-collapsed #desktop_sidebar_tab {
	right: 0;
    }

    body.map-focus-mode #header {
	display: none;
    }

    #map_container.map-focus-mode {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: #0B1F36;
    }

    #map_container.map-focus-mode #map_wrapper {
	margin-right: 0 !important;
	width: 100% !important;
    }

    #map_container.map-focus-mode #sidebar {
	transform: translateX(100%);
	opacity: 0;
	pointer-events: none;
	box-shadow: none;
	border-left: none;
    }

    #map_container.map-focus-mode #position_controls,
    #map_container.map-focus-mode #speed_controls {
	left: auto;
	right: calc(12px + var(--fullscreen-tab-width) + 8px);
	opacity: 0;
	transform: translateX(14px);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
    }

    #map_container.map-focus-mode #position_controls {
	bottom: 12px;
    }

    #map_container.map-focus-mode #speed_controls {
	bottom: 12px;
    }

    #map_container.map-focus-mode #current_info {
	left: auto;
	right: calc(12px + var(--fullscreen-tab-width) + 8px);
	bottom: 12px;
	width: auto;
	max-width: calc(100vw - 160px);
	justify-content: flex-end;
	padding: 0;
	opacity: 0;
	transform: translateX(14px);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
    }

    #map_container.map-focus-mode #current_info div {
	margin-top: 0;
	margin-left: 6px;
	margin-bottom: 0;
    }

    #map_container.map-focus-mode.focus-controls-visible #position_controls,
    #map_container.map-focus-mode.focus-controls-visible #speed_controls,
    #map_container.map-focus-mode.focus-timestamps-visible #current_info {
	opacity: 1;
	transform: none;
	pointer-events: auto;
    }

    #map_container.map-focus-mode #desktop_map_controls {
	top: 16px;
	right: 16px;
    }

    #map_container.map-focus-mode #desktop_sidebar_tab {
	display: flex;
	right: 0;
	z-index: 1201;
    }

    #map_container.map-focus-mode:not(.sidebar-collapsed) #desktop_sidebar_tab {
	right: var(--desktop-sidebar-width);
    }

    #map_container.map-focus-mode:not(.sidebar-collapsed) #sidebar {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
	z-index: 1201;
    }

    #map_container.map-focus-mode #fullscreen_panels_tabs {
	display: flex;
    }

    #map_container.map-focus-mode #fullscreen_brand_logo {
	display: block;
    }

    /* Hide mobile info button on desktop */
    #mobile_info_button,
    #mobile_info_popover,
    #mobile_info_backdrop {
	display: none !important;
    }
}

.map-marker-location {
    background-image: url(/images/fa/solid/circle-dashed.svg);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(100%) drop-shadow(0 0 2px #000);
}

/* Layers Container Styling */
.layers-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.layers-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.terrain-layer-row .neo {
    width: auto !important;
    flex: 0 0 auto !important;
}

.terrain-layer-row > div {
    justify-content: flex-start !important;
    flex-wrap: wrap;
}

.terrain-layer-row .neo input[type=checkbox] + label {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 7px 9px;
}

/* Exaggeration slider drops to its own row (full width) when the terrain
   checkboxes don't leave enough room — otherwise the slider overflows the
   sidebar on pages with narrower sidebars like /forecast (370px). */
.terrain-layer-row #terrain_exaggeration_container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 100%;
    max-width: none;
    margin-top: 4px;
}

.terrain-layer-row #terrain_exaggeration {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 120px;
}

.layers-label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
    min-width: 70px;
    text-align: right;
}

/* Mobile: Allow wrapping to multiple lines */
@media (max-width: 768px) {
    .layers-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }

    .layers-row {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }

    .layers-label {
        display: none;
    }

    .base-layer-row {
        flex-basis: 100%;
    }

    .overlay-layer-row {
        flex-basis: 100%;
    }

    .map-features-row {
        flex-basis: 100%;
    }

    .terrain-layer-row > div {
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }

    .terrain-layer-row #terrain_exaggeration_container {
        flex: 1 1 100%;
        max-width: none;
    }
}