/* Full-viewport community map. All rules are app-only; landing styles are untouched. */
/* Color only regular basemap tiles, never markers, controls, photos or satellite imagery. */
.main-app .map-tiles-regular { filter: var(--regular-map-filter, none); }
:root[data-theme="dark"] {
    --regular-map-filter: invert(1) hue-rotate(180deg) brightness(.95) saturate(.7) contrast(.78);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --regular-map-filter: invert(1) hue-rotate(180deg) brightness(.95) saturate(.7) contrast(.78);
    }
}
/* Hide the scrollbar, not scrolling, so the centered nav never shifts by its width. */
html:has(body.main-app) { scrollbar-width: none; scrollbar-gutter: auto; }
html:has(body.main-app)::-webkit-scrollbar,
body.main-app::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.main-app {
    scrollbar-width: none;
    padding-bottom: 0;
}
.main-app:not(.app-map-view) .app-shell {
    padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px));
}
body.main-app.app-map-view { height: 100dvh; overflow: hidden; padding: 0; }
.main-app.app-map-view .app-shell { width: 100%; height: 100dvh; min-height: 0; padding: 0; }
.main-app.app-map-view .app-shell::after { display: none; }
.main-app.app-map-view .app-topbar,
.main-app.app-map-view .app-footer { display: none; }
.main-app.app-map-view .app-container {
    width: 100%; max-width: none; height: 100%; margin: 0; padding: 0;
}
.main-app.app-map-view .app-view {
    width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
    animation: none; transform: none;
}
.main-app .map-page {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    background: #b3c7c8;
}
.main-app .map-page #communityMap {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
    border: 0; border-radius: 0; box-shadow: none; z-index: 0;
}
.main-app .map-heading {
    position: absolute; z-index: 800;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: calc(14px + env(safe-area-inset-left, 0px));
    display: flex; align-items: center; gap: 11px;
    padding: 10px 15px; border: 1px solid rgba(255,255,255,.4); border-radius: 18px;
    background: rgba(16,24,25,.78); color: #f3f6f7;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 6px 22px rgba(0,0,0,.14);
    max-width: calc(100% - 80px); box-sizing: border-box;
}
.main-app .map-heading > div { min-width: 0; }
.main-app .map-heading h1 { margin: 0; font-family: "RajBold", sans-serif; font-size: 22px; line-height: 1; }
.main-app .map-heading p { margin: 4px 0 0; font-size: 12px; line-height: 1.25; color: #d4e9e8; }
.main-app .map-heading .map-home { display: flex; align-items: center; }
.main-app .map-heading img { width: 32px; height: 32px; object-fit: contain; }
.main-app .map-heading a:focus-visible { outline: 2px solid #78e2e3; outline-offset: 4px; border-radius: 4px; }
.main-app .map-page .map-status {
    position: absolute; z-index: 800;
    bottom: calc(105px + env(safe-area-inset-bottom, 0px));
    left: 50%; transform: translateX(-50%);
    width: min(380px, calc(100% - 32px)); max-width: none;
    padding: 13px 17px; border: 1px solid rgba(255,255,255,.34); border-radius: 18px;
    background: rgba(16,24,25,.86); color: #f3f6f7; font-size: 15px; line-height: 1.35;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 6px 22px rgba(0,0,0,.14);
    box-sizing: border-box;
}
.main-app .map-page .map-status[hidden],
.main-app .map-status [hidden] { display: none; }
.main-app .map-status p { margin: 0; }
.main-app .map-status a { display: inline-flex; gap: 9px; align-items: center; margin-top: 9px; color: #78e2e3; }
.main-app .map-status button { margin-top: 9px; }
.main-app .map-page .leaflet-top.leaflet-right {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
}
.main-app .map-page .leaflet-control-zoom { margin: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 12px; overflow: hidden; }
.main-app .map-page .leaflet-control-zoom a { background: rgba(16,24,25,.88); color: #fff; border-color: rgba(255,255,255,.18); }
.main-app .map-page .leaflet-control-zoom a:hover { background: #263b3d; }
.main-app .map-page .leaflet-control-attribution { font-size: 10px; }
.main-app .map-tile-alert { max-width: min(320px, calc(100vw - 40px)); margin-bottom: 125px; }
.main-app .map-tile-alert[hidden] { display: none; }
.main-app .map-page .leaflet-bottom.leaflet-right {
    bottom: calc(5px + env(safe-area-inset-bottom, 0px)); right: env(safe-area-inset-right, 0px);
}
@media (max-height: 480px) {
    .main-app .map-page .map-status {
        left: 14px; bottom: auto; top: 88px; transform: none;
        width: min(280px, calc(100% - 100px)); padding: 9px 13px; font-size: 13px;
    }
}