/* Final shared responsive layer. Loaded after page-specific styles. */

@media (max-width: 767.98px) {
  /* Touch zoom is the primary phone interaction in the map editor. Keep the
     fullscreen action in the common right rail, but remove the redundant
     plus/minus pair so it cannot crowd the layer, locate and search tools. */
  html body.page-edit_map .leaflet-control-zoom > .leaflet-control-zoom-in,
  html body.page-edit_map .leaflet-control-zoom > .leaflet-control-zoom-out {
    display: none !important;
  }

  html body.page-edit_map .leaflet-control-zoom > .leaflet-control-zoom-fullscreen.fullscreen-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: none !important;
    color: #d9e4f3 !important;
  }

  html body.page-edit_map .leaflet-control-zoom > .leaflet-control-zoom-fullscreen.fullscreen-icon::before {
    content: "\F0293" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Material Design Icons" !important;
    font-size: 1.15rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  html body .status-bs-table-shell,
  html body table.status-bs-table-cards,
  html body table.status-bs-table-cards > tbody {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* R61: edit_flags is the reference for every local admin list on phones. */
  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 .75rem !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid #dce3eb !important;
    border-left: .24rem solid #0d6efd !important;
    border-radius: .82rem !important;
    background: #fff !important;
    box-shadow: 0 .22rem .72rem rgba(24, 35, 52, .075) !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td:not(.status-bs-table-primary):not(.status-bs-table-actions):not(.status-bs-table-select):not([data-mobile-hidden="true"]) {
    display: block !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: .7rem .8rem !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: #fff !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td:not([data-mobile-span="full"]):not(.status-bs-table-primary):not(.status-bs-table-actions):not(.status-bs-table-select):nth-child(odd) {
    border-right: 1px solid #edf0f3 !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td[data-mobile-empty="hide"][data-mobile-empty="hide"]:has(.status-shared-event-list:empty) {
    display: none !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td::before {
    display: block !important;
    align-self: start !important;
    min-width: 0 !important;
    margin-bottom: .24rem !important;
    color: #687386 !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
    text-transform: uppercase !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td.status-bs-table-primary::before,
  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td.status-bs-table-actions::before,
  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td.status-bs-table-select::before {
    display: none !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td:not(.status-bs-table-primary):not(.status-bs-table-actions):not(.status-bs-table-select):not([data-mobile-hidden="true"]) > .status-bs-table-cell-content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td.status-bs-table-primary {
    grid-column: 1 / -1 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.5rem !important;
    padding: .8rem 3.65rem .8rem .8rem !important;
    border: 0 !important;
    border-bottom: 1px solid #e6eaf0 !important;
    white-space: normal !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row:has(> td.status-bs-table-select) > td.status-bs-table-primary {
    padding-left: 3rem !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td.status-bs-table-select {
    position: absolute !important;
    z-index: 4 !important;
    top: 1rem !important;
    right: auto !important;
    left: .9rem !important;
    display: flex !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: 1.25rem !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td.status-bs-table-select input {
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin: 0 !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td.status-bs-table-actions {
    position: absolute !important;
    z-index: 12 !important;
    top: .55rem !important;
    right: .65rem !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td[data-mobile-span="full"] {
    grid-column: 1 / -1 !important;
  }

  html body table.status-bs-table-cards .status-bs-table-actions .btn,
  html body table.status-bs-table-cards .status-bs-table-actions button {
    display: inline-flex !important;
    width: 2.65rem !important;
    min-width: 2.65rem !important;
    height: 2.65rem !important;
    min-height: 2.65rem !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  html body table.status-bs-table-cards .status-bs-table-actions .dropdown-menu {
    min-width: min(15rem, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: min(22rem, calc(100dvh - 5rem)) !important;
    overflow-y: auto !important;
    z-index: 21050 !important;
  }

  html body table.status-bs-table-cards .status-bs-table-actions .dropdown-menu[x-placement^="top"] {
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + .3rem) !important;
    left: auto !important;
    transform: none !important;
  }

  html body table.status-bs-table-cards .status-bs-table-actions .dropdown-menu[x-placement^="bottom"] {
    top: calc(100% + .3rem) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  html body table.status-bs-table-cards .badge,
  html body table.status-bs-table-cards .status-layer-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    align-items: center !important;
    margin: .08rem .18rem .08rem 0 !important;
    white-space: normal !important;
  }

  html body .status-modal-fixed-footer {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: .5rem !important;
  }

  html body .status-modal-fixed-footer > .btn,
  html body .status-modal-fixed-footer > button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* Keep quick navigation as the stable app-level navigation even while the
   hamburger panel is open. The panel and its backdrop stop above the measured
   bottom bar, so safe-area padding and every quick-navigation target remain
   visible and clickable in portrait and landscape. */
@media (max-width: 991.98px) {
  html body.status-menu-open {
    --status-mobile-menu-bottom-space: calc(var(--status-safe-bottom, 0px) + .65rem);
  }

  html body.status-menu-open.status-has-mobile-nav {
    --status-mobile-menu-bottom-space: calc(var(--status-mobile-nav-actual-height, var(--status-map-nav-height, 54px)) + .65rem);
  }

  html body.status-menu-open.status-has-mobile-nav .status-mobile-nav,
  html body.status-menu-open.status-has-mobile-nav.page-map.status-map-ui-v40 .status-mobile-nav {
    display: grid !important;
    z-index: 20180 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  html body.status-menu-open .status-navbar {
    z-index: 20160 !important;
  }

  html body.status-menu-open .status-mobile-menu-backdrop {
    position: fixed;
    z-index: 20130;
    top: var(--status-navbar-actual-height, var(--status-navbar-height, 56px));
    right: 0;
    bottom: var(--status-safe-bottom, 0px);
    left: 0;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    cursor: default;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html body.status-menu-open.status-has-mobile-nav .status-mobile-menu-backdrop {
    bottom: var(--status-mobile-nav-actual-height, var(--status-map-nav-height, 54px));
  }

  html body .status-mobile-menu-backdrop[hidden] {
    display: none !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel.show,
  html body.status-menu-open > .status-mobile-menu-panel.collapsing {
    position: fixed !important;
    z-index: 20170 !important;
    top: var(--status-navbar-actual-height, var(--status-navbar-height, 56px)) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: calc(var(--status-viewport-height, 100dvh) - var(--status-navbar-actual-height, var(--status-navbar-height, 56px)) - var(--status-mobile-menu-bottom-space, .65rem)) !important;
    margin: 0 !important;
    padding: .5rem .75rem calc(.75rem + var(--status-safe-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 0 !important;
    background: #343a40 !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .navbar-nav .nav-link {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    padding: .65rem .75rem;
    color: rgba(255, 255, 255, .5) !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .navbar-nav .nav-item.show > .nav-link,
  html body.status-menu-open > .status-mobile-menu-panel .navbar-nav .nav-link.show {
    color: rgba(255, 255, 255, .75) !important;
    border-radius: .25rem;
    background: rgba(255, 255, 255, .12) !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu {
    position: static !important;
    inset: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(28rem, calc(var(--status-viewport-height, 100dvh) - var(--status-navbar-actual-height, var(--status-navbar-height, 56px)) - var(--status-mobile-menu-bottom-space, .65rem) - 4.35rem));
    margin: .25rem 0 0 !important;
    padding: .5rem 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    transform: none !important;
    border: 0 !important;
    border-radius: .25rem !important;
    color: #212529 !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: none !important;
    scrollbar-color: rgba(108, 117, 125, .7) transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-header {
    color: #6c757d !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-divider {
    border-top-color: #e9ecef !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    padding: .25rem 1.5rem;
    color: #212529 !important;
    background: transparent !important;
    white-space: normal;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item:hover,
  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item:focus-visible {
    color: #16181b !important;
    background: #f8f9fa !important;
  }

  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item.active,
  html body.status-menu-open > .status-mobile-menu-panel .dropdown-menu .dropdown-item:active {
    color: #fff !important;
    background: #52606d !important;
  }

  html body.page-map.status-map-ui-v40.status-menu-open.status-compact-landscape > .status-mobile-menu-panel.show,
  html body.page-map.status-map-ui-v40.status-menu-open.status-compact-landscape > .status-mobile-menu-panel.collapsing {
    top: calc(max(6px, var(--status-safe-top, 0px)) + var(--status-map-control-size, 40px) + var(--status-map-control-gap, 6px)) !important;
  }

  html body.page-map.status-map-ui-v40.status-menu-open.status-compact-landscape .status-mobile-menu-backdrop {
    top: calc(max(6px, var(--status-safe-top, 0px)) + var(--status-map-control-size, 40px) + var(--status-map-control-gap, 6px));
  }
}

/* The public Flags view already renders purpose-built mobile cards. Keep the
   desktop Bootstrap table for wider viewports and never squeeze faction names
   into narrow table columns on phones. */
@media (max-width: 767.98px) {
  html body.page-flaglist .status-flags-table-wrap.status-bs-table-shell {
    display: none !important;
  }

  html body.page-flaglist .status-flags-mobile-cards {
    display: grid !important;
    gap: .7rem !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: .65rem !important;
  }

  html body.page-flaglist .status-flag-card-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  html body.page-flaglist .status-flag-main,
  html body.page-flaglist .status-flag-owner {
    min-width: 0 !important;
  }

  html body.page-flaglist .status-flag-faction-chip {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: .38rem !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body.page-flaglist .status-flag-faction-chip > span:last-child {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* Final admin-card precedence. Page-specific CSS may be loaded before this
   shared layer in fixtures and cached production shells, so hidden columns,
   selection affordances and mobile action sheets are asserted here too. */
@media (max-width: 767.98px) {
  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td[data-mobile-hidden="true"] {
    display: none !important;
  }

  html body.page-flagboxes .status-flagboxes-table > tbody > tr.status-bs-table-row > td:nth-child(5),
  html body.page-edit_gps .status-gps-table > tbody > tr.status-bs-table-row > td:nth-child(6) {
    display: none !important;
  }

  html body.page-flagboxes .status-flagboxes-table > tbody > tr.status-bs-table-row > td.status-bs-table-primary,
  html body.page-edit_gps .status-gps-table > tbody > tr.status-bs-table-row > td.status-bs-table-primary {
    padding-right: 3.15rem !important;
    padding-left: 3.15rem !important;
  }

  html body.page-flagboxes .status-flagboxes-table > tbody > tr.status-bs-table-row > td.status-bs-table-select,
  html body.page-edit_gps .status-gps-table > tbody > tr.status-bs-table-row > td.status-bs-table-select {
    top: .62rem !important;
    left: .62rem !important;
    display: flex !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d7dee8 !important;
    border-radius: .58rem !important;
    background: #f7f9fc !important;
  }

  html body.page-flagboxes .status-flagboxes-table > tbody > tr.status-bs-table-row > td.status-bs-table-actions,
  html body.page-edit_gps .status-gps-table > tbody > tr.status-bs-table-row > td.status-bs-table-actions {
    top: .62rem !important;
    right: .62rem !important;
    width: 2.65rem !important;
    height: 2.65rem !important;
    min-height: 2.65rem !important;
  }

  html body.page-flagboxes .status-flagboxes-table > tbody > tr.status-bs-table-row > td.status-bs-table-primary::before,
  html body.page-flagboxes .status-flagboxes-table > tbody > tr.status-bs-table-row > td.status-bs-table-select::before,
  html body.page-flagboxes .status-flagboxes-table > tbody > tr.status-bs-table-row > td.status-bs-table-actions::before,
  html body.page-edit_gps .status-gps-table > tbody > tr.status-bs-table-row > td.status-bs-table-primary::before,
  html body.page-edit_gps .status-gps-table > tbody > tr.status-bs-table-row > td.status-bs-table-select::before,
  html body.page-edit_gps .status-gps-table > tbody > tr.status-bs-table-row > td.status-bs-table-actions::before {
    display: none !important;
    content: none !important;
  }

  html body table.status-bs-table-cards .status-bs-table-actions .status-action-menu.show {
    position: fixed !important;
    z-index: 22050 !important;
    top: auto !important;
    right: max(.65rem, env(safe-area-inset-right)) !important;
    bottom: max(.65rem, env(safe-area-inset-bottom)) !important;
    left: max(.65rem, env(safe-area-inset-left)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(65dvh, 32rem) !important;
    padding: .5rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    border-radius: .9rem !important;
    box-shadow: 0 1.1rem 3rem rgba(15, 23, 42, .3) !important;
  }

  /* A fixed menu still participates in the stacking context created by its
     card action cell. Raise the active card and cell so a later row's three-dot
     button cannot paint on top of the bottom sheet. */
  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row:has(.status-action-menu.show) {
    z-index: 22040 !important;
  }

  html body table.status-bs-table-cards .status-bs-table-actions:has(.status-action-menu.show) {
    z-index: 22060 !important;
  }

  html body table.status-bs-table-cards .status-bs-table-actions .status-action-menu .dropdown-item,
  html body table.status-bs-table-cards .status-bs-table-actions .status-action-menu .dropdown-item-text {
    display: grid !important;
    grid-template-columns: 1.55rem minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: .65rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
}

/* Public-map legend: keep every object filter in one compact, horizontally
   scrollable toolbar. The row owns horizontal gestures so they never leak to
   the Leaflet map beneath the modal. */
@media (max-width: 991.98px) {
  html body.page-map #layers.status-layers-modal .status-layers-header {
    min-height: 3.35rem;
    padding: max(.65rem, var(--status-safe-top, 0px)) max(.75rem, var(--status-safe-right, 0px)) .65rem max(.75rem, var(--status-safe-left, 0px)) !important;
    background: #111827 !important;
    color: #f8fafc !important;
  }

  html body.page-map #layers.status-layers-modal .status-layers-title {
    min-width: 0;
    margin: 0 !important;
    color: inherit !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  html body.page-map #layers.status-layers-modal .status-layers-header .close {
    display: inline-flex !important;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    margin: -.35rem -.45rem -.35rem .5rem !important;
    padding: 0 !important;
    border-radius: .65rem !important;
    color: #f8fafc !important;
    line-height: 1 !important;
    opacity: .9 !important;
  }

  html body.page-map #layers.status-layers-modal .status-layers-header .close:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .55) !important;
    outline-offset: 1px;
  }

  html body.page-map #layers.status-layers-modal .modal-body {
    padding: .65rem max(.65rem, var(--status-safe-right, 0px)) max(.75rem, var(--status-safe-bottom, 0px)) max(.65rem, var(--status-safe-left, 0px)) !important;
    background: #f8fafc !important;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .4rem !important;
    margin: 0 0 .55rem !important;
    padding: .1rem .15rem .35rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: .15rem;
    scroll-snap-type: x proximity;
    scrollbar-color: rgba(71, 85, 105, .5) transparent;
    scrollbar-width: thin;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar::-webkit-scrollbar {
    height: 4px;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(71, 85, 105, .5);
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar > .list-inline-item {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn {
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .35rem !important;
    margin: 0 !important;
    padding: .4rem .65rem !important;
    border: 1px solid rgba(15, 23, 42, .2) !important;
    border-radius: .65rem !important;
    background: #334155 !important;
    box-shadow: 0 .12rem .3rem rgba(15, 23, 42, .14) !important;
    color: #f8fafc !important;
    font-size: .84rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    touch-action: manipulation;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn[aria-pressed="true"] {
    border-color: #0b5ed7 !important;
    background: #0d6efd !important;
    box-shadow: 0 .15rem .38rem rgba(13, 110, 253, .28) !important;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn:hover:not(:disabled),
  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn:focus-visible:not(:disabled) {
    border-color: #60a5fa !important;
    background: #1e40af !important;
    color: #fff !important;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28) !important;
    outline-offset: 2px;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn:active:not(:disabled) {
    transform: translateY(1px);
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn:disabled {
    border-color: rgba(100, 116, 139, .3) !important;
    background: #64748b !important;
    box-shadow: none !important;
    opacity: .48 !important;
    cursor: not-allowed !important;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn .material-icons,
  html body.page-map #layers.status-layers-modal .status-layers-filterbar .filter-btn .mdi {
    display: inline-flex !important;
    flex: 0 0 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
    align-items: center;
    justify-content: center;
    color: currentColor !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }

  html body.page-map #layers.status-layers-modal .status-layers-filterbar .status-filter-count {
    display: inline-flex !important;
    min-width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    padding: 0 .28rem !important;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .18) !important;
    color: inherit !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  html body.page-map #layers.status-layers-modal #livesearch {
    flex: 0 0 auto !important;
    min-height: 2.75rem !important;
    margin: 0 !important;
    padding: .55rem .75rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: .65rem !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #0f172a !important;
    text-align: left !important;
  }

  html body.page-map #layers.status-layers-modal #livesearch:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .16) !important;
  }

  html body.page-map #layers.status-layers-modal #legendlist {
    margin-top: .55rem !important;
    border-color: #dbe3ee !important;
    border-radius: .65rem !important;
  }
}

/* Public map: one dark translucent control family. */
body.page-map.status-map-ui-v40 {
  --status-map-control-surface: rgba(15, 23, 42, .72);
  --status-map-control-hover: rgba(37, 99, 235, .86);
  --status-map-control-border: rgba(148, 163, 184, .34);
  --status-map-control-text: #f8fafc;
  --status-map-icon-color: #f8fafc;
  --status-map-control-shadow: 0 .22rem .72rem rgba(2, 6, 23, .28);
  --status-map-control-filter: blur(12px) saturate(125%);
  --status-map-nav-surface: rgba(15, 23, 42, .70);
}

/* The action menu uses MDI glyphs while the legacy rules targeted only the
   Material Icons font. Give the two download actions explicit icon slots so
   global Leaflet icon colours cannot turn them white on the light menu. */
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item {
  min-height: 2.85rem !important;
  gap: .65rem !important;
  border-radius: .55rem !important;
  color: #0f172a !important;
  transition: background-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item > .status-map-action-icon {
  position: relative;
  display: inline-flex !important;
  flex: 0 0 1.8rem !important;
  width: 1.8rem !important;
  min-width: 1.8rem !important;
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: .5rem;
  font-family: "Material Design Icons" !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item > .status-map-action-icon::before {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-offline-button > .status-map-action-icon {
  background: #dcfce7 !important;
  color: #166534 !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-image-button > .status-map-action-icon {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item:hover:not(:disabled),
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item:focus-visible:not(:disabled) {
  background: #eef2ff !important;
  color: #0f172a !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 3px rgba(37, 99, 235, .28) !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item:active:not(:disabled) {
  background: #dbeafe !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .28) !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item:disabled,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item[aria-disabled="true"] {
  background: transparent !important;
  color: #64748b !important;
  cursor: wait !important;
  opacity: .68 !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item:disabled > .status-map-action-icon,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item[aria-disabled="true"] > .status-map-action-icon {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item.status-map-utility-busy::after {
  content: none !important;
  display: none !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item.status-map-utility-busy > .status-map-action-icon::before {
  visibility: hidden !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-action-item.status-map-utility-busy > .status-map-action-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: .95rem;
  height: .95rem;
  margin: -.475rem 0 0 -.475rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: statusControlSpin .9s linear infinite;
}

/* Leaflet's panes and controls are separate stacking contexts. Keep every
   clickable control above tiles, vectors, markers and popups while leaving
   the fixed application bars above the map editor surface. */
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-top,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-bottom {
  z-index: 20040 !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

html body.page-map.status-map-ui-v40 .status-navbar {
  border-bottom-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .70) !important;
  box-shadow: 0 .2rem .8rem rgba(2, 6, 23, .22) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-zoom.leaflet-bar,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-layers-toggle,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-locate > a,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-fullscreen > a,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .easy-button-container > button,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-actions-trigger,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .geocoder-control-input {
  border-color: var(--status-map-control-border) !important;
  background-color: var(--status-map-control-surface) !important;
  box-shadow: var(--status-map-control-shadow) !important;
  color: var(--status-map-control-text) !important;
  backdrop-filter: var(--status-map-control-filter) !important;
  -webkit-backdrop-filter: var(--status-map-control-filter) !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom > a,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom > button {
  background: transparent !important;
  color: var(--status-map-control-text) !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom > a:hover,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom > a:focus-visible,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-layers-toggle:hover,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate > a:hover,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-fullscreen > a:hover,
html body.page-map.status-map-ui-v40 #image-map .geocoder-control-input:hover,
html body.page-map.status-map-ui-v40 #image-map .geocoder-control-input:focus-visible {
  background-color: var(--status-map-control-hover) !important;
  color: #fff !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .geocoder-control,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .geocoder-control.leaflet-bar {
  overflow: visible !important;
  border: 0 !important;
  border-radius: var(--status-map-control-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.page-map.status-map-ui-v40 #image-map .geocoder-control::before,
html body.page-map.status-map-ui-v40 #image-map .geocoder-control::after {
  content: none !important;
  display: none !important;
}

html body.page-map.status-map-ui-v40 #image-map .geocoder-control-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: 0 !important;
}

/* The older map sheet has state-specific light backgrounds with greater
   selector weight. Override those exact closed-control states so every public
   map control really uses the same surface, including touch browsers. */
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded) > a.leaflet-control-layers-toggle,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container.leaflet-touch .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded) > a.leaflet-control-layers-toggle,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .geocoder-control:not(.geocoder-control-expanded) > input.geocoder-control-input {
  border-color: var(--status-map-control-border) !important;
  background-color: var(--status-map-control-surface) !important;
  box-shadow: var(--status-map-control-shadow) !important;
  color: var(--status-map-control-text) !important;
  backdrop-filter: var(--status-map-control-filter) !important;
  -webkit-backdrop-filter: var(--status-map-control-filter) !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .geocoder-control:not(.geocoder-control-expanded) > input.geocoder-control-input {
  background-image: none !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-locate > a > .mdi,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-fullscreen > a > .mdi,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .geocoder-control > .status-geocoder-mdi-icon,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .geocoder-control > .status-geocoder-mdi-icon::before,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .easy-button-container .mdi,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .easy-button-container .mdi::before,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .status-map-actions-trigger .mdi,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .status-map-actions-trigger .mdi::before {
  color: var(--status-map-control-text) !important;
  fill: currentColor !important;
  -webkit-text-fill-color: var(--status-map-control-text) !important;
}

/* Fullscreen and Layers ship as dark PNG backgrounds. Render them with the
   same MDI font as the other controls so their colour follows the theme. The
   full selector intentionally outranks the older app stylesheet that restored
   the PNG and caused black fragments to show through the light MDI glyph. */
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-layers-toggle {
  background-image: none !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon {
  color: var(--status-map-control-text) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--status-map-control-text) !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon::before,
html body.page-map.status-map-ui-v40 #image-map .leaflet-control-layers-toggle::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Material Design Icons" !important;
  font-size: var(--status-map-icon-size) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon::before {
  content: "\F0293" !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon:hover,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon:focus,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon:focus-visible {
  background: var(--status-map-control-hover) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px rgba(147, 197, 253, .72) !important;
  outline: 0 !important;
  -webkit-text-fill-color: #fff !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon[aria-pressed="true"] {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 100px rgba(37, 99, 235, .94), inset 0 0 0 1px rgba(191, 219, 254, .8) !important;
  -webkit-text-fill-color: #fff !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon[aria-pressed="true"]::before {
  content: "\F0294" !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon.leaflet-disabled,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon[aria-disabled="true"] {
  background: rgba(15, 23, 42, .42) !important;
  color: rgba(226, 232, 240, .58) !important;
  box-shadow: none !important;
  cursor: default !important;
  opacity: .5 !important;
  pointer-events: none !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .58) !important;
}

html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon.leaflet-disabled::before,
html body.page-map.status-map-ui-v40 #image-map.leaflet-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a.leaflet-control-zoom-fullscreen.fullscreen-icon[aria-disabled="true"]::before {
  color: rgba(226, 232, 240, .58) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .58) !important;
}

html body.page-map.status-map-ui-v40 #image-map .leaflet-control-layers-toggle::before {
  content: "\F0328" !important;
}

html body.page-map.status-map-ui-v40 .status-floating-dock {
  position: fixed !important;
  z-index: 20060 !important;
  right: max(10px, var(--status-safe-right, 0px)) !important;
  bottom: calc(var(--status-mobile-nav-actual-height, var(--status-map-nav-height)) + 8px) !important;
}

html body.page-map.status-map-ui-v40 #status-connectivity,
html body.page-map.status-map-ui-v40 .status-floating-dock > #status-connectivity {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  html body.page-map.status-map-ui-v40 #container {
    position: fixed !important;
    z-index: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
  }

  html body.page-map.status-map-ui-v40 .status-navbar {
    position: fixed !important;
    z-index: 20120 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .22) !important;
    background: rgba(15, 23, 42, .70) !important;
    box-shadow: 0 .2rem .8rem rgba(2, 6, 23, .24) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  }

  html body.page-map.status-map-ui-v40 .status-mobile-nav {
    border-top: 1px solid rgba(148, 163, 184, .24) !important;
    background: rgba(15, 23, 42, .70) !important;
    box-shadow: 0 -.2rem .8rem rgba(2, 6, 23, .24) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  }

  html body.page-map.status-map-ui-v40 .status-mobile-nav-item,
  html body.page-map.status-map-ui-v40 .status-mobile-nav-item:hover,
  html body.page-map.status-map-ui-v40 .status-mobile-nav-item:focus-visible {
    color: rgba(248, 250, 252, .78) !important;
    background: transparent !important;
  }

  html body.page-map.status-map-ui-v40 .status-mobile-nav-item.active,
  html body.page-map.status-map-ui-v40 .status-mobile-nav-item.active:hover,
  html body.page-map.status-map-ui-v40 .status-mobile-nav-item.active:focus-visible {
    color: #fff !important;
    background: rgba(37, 99, 235, .72) !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-top {
    top: calc(var(--status-navbar-actual-height, 56px) + 5px) !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-bottom {
    bottom: calc(var(--status-mobile-nav-actual-height, var(--status-map-nav-height)) - 10px) !important;
  }
}

/* Public map place search: keep the closed control, expanded field, results
   and asynchronous states in the same translucent dark control family. */
html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded {
  width: min(20rem, calc(100vw - var(--status-safe-left, 0px) - var(--status-safe-right, 0px) - 5rem)) !important;
  max-width: calc(100vw - var(--status-safe-left, 0px) - var(--status-safe-right, 0px) - 5rem) !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded > input.geocoder-control-input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 calc(var(--status-map-control-size) + .25rem) 0 .8rem !important;
  border: 1px solid var(--status-map-control-border) !important;
  border-radius: var(--status-map-control-radius) !important;
  background: rgba(15, 23, 42, .94) !important;
  box-shadow: var(--status-map-control-shadow) !important;
  color: #f8fafc !important;
  caret-color: #93c5fd !important;
  font-size: 1rem !important;
  line-height: normal !important;
  -webkit-text-fill-color: #f8fafc !important;
  color-scheme: dark;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded > input.geocoder-control-input::placeholder {
  color: rgba(226, 232, 240, .72) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .72) !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded > input.geocoder-control-input:hover {
  border-color: rgba(147, 197, 253, .64) !important;
  background: rgba(15, 23, 42, .97) !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded > input.geocoder-control-input:focus,
html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded > input.geocoder-control-input:focus-visible {
  border-color: #60a5fa !important;
  background: rgba(15, 23, 42, .98) !important;
  box-shadow: 0 0 0 .18rem rgba(59, 130, 246, .34), var(--status-map-control-shadow) !important;
  outline: 0 !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded > .status-geocoder-mdi-icon,
html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded > .status-geocoder-mdi-icon::before {
  color: #bfdbfe !important;
  -webkit-text-fill-color: #bfdbfe !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder > input.geocoder-control-loading + .status-geocoder-mdi-icon::before {
  visibility: hidden !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder > input.geocoder-control-loading + .status-geocoder-mdi-icon::after {
  content: "" !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
  border: 2px solid rgba(191, 219, 254, .4) !important;
  border-top-color: #bfdbfe !important;
  border-radius: 50% !important;
  animation: statusControlSpin .75s linear infinite !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder > .geocoder-control-suggestions {
  box-sizing: border-box !important;
  top: calc(var(--status-map-control-size) + .38rem) !important;
  right: 0 !important;
  left: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: min(22rem, var(--status-geocoder-results-max-height, 45vh)) !important;
  margin: 0 !important;
  padding: .28rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid rgba(148, 163, 184, .36) !important;
  border-radius: .72rem !important;
  background: rgba(15, 23, 42, .97) !important;
  box-shadow: 0 .65rem 1.5rem rgba(2, 6, 23, .4) !important;
  color: #e2e8f0 !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  scrollbar-color: rgba(148, 163, 184, .72) transparent;
  scrollbar-width: thin;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.status-geocoder-showing-state > .geocoder-control-suggestions,
html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.status-geocoder-showing-results > .geocoder-control-suggestions {
  display: block !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-header {
  margin: 0 !important;
  padding: .48rem .62rem .34rem !important;
  border: 0 !important;
  background: transparent !important;
  color: #93c5fd !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion {
  display: block !important;
  min-height: 2.7rem !important;
  margin: 0 !important;
  padding: .62rem .7rem !important;
  border: 0 !important;
  border-radius: .5rem !important;
  background: transparent !important;
  color: #e2e8f0 !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion small {
  color: #94a3b8 !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion:hover {
  background: rgba(30, 64, 175, .64) !important;
  color: #fff !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion:active {
  background: rgba(37, 99, 235, .92) !important;
  color: #fff !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion:focus-visible,
html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion.geocoder-control-selected {
  background: #2563eb !important;
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .72) !important;
  color: #fff !important;
  outline: 0 !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion:hover small,
html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion:active small,
html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .geocoder-control-suggestion.geocoder-control-selected small {
  color: #dbeafe !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .status-geocoder-state {
  display: flex !important;
  min-height: 3.15rem !important;
  align-items: center !important;
  gap: .58rem !important;
  margin: 0 !important;
  padding: .7rem !important;
  border: 0 !important;
  border-radius: .52rem !important;
  background: rgba(30, 41, 59, .72) !important;
  color: #cbd5e1 !important;
  font-size: .88rem !important;
  line-height: 1.35 !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .status-geocoder-state[hidden] {
  display: none !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .status-geocoder-state-icon {
  display: inline-flex !important;
  flex: 0 0 1.35rem !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  align-items: center !important;
  justify-content: center !important;
  color: #93c5fd !important;
  font-size: 1.15rem !important;
  -webkit-text-fill-color: #93c5fd !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .status-geocoder-state-loading .status-geocoder-state-icon {
  animation: statusControlSpin .8s linear infinite !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .status-geocoder-state-no-results {
  background: rgba(30, 41, 59, .82) !important;
  color: #cbd5e1 !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .status-geocoder-state-error {
  background: rgba(127, 29, 29, .44) !important;
  color: #fecaca !important;
}

html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder .status-geocoder-state-error .status-geocoder-state-icon {
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
}

@media (max-width: 767.98px) {
  html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded {
    width: min(19rem, calc(100vw - var(--status-safe-left, 0px) - var(--status-safe-right, 0px) - 4.5rem)) !important;
    max-width: calc(100vw - var(--status-safe-left, 0px) - var(--status-safe-right, 0px) - 4.5rem) !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .status-public-geocoder.geocoder-control-expanded > input.geocoder-control-input {
    font-size: 16px !important;
  }
}

/* Public map bottom metadata. The offset is measured from the rendered quick
   navigation (including its safe-area padding) by status-map-bottom-controls.
   This final rule deliberately replaces older fixed and negative offsets. */
@media (max-width: 767.98px), (max-width: 991.98px) and (orientation: landscape) {
  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-bottom {
    bottom: calc(var(--status-map-bottom-controls-offset, calc(var(--status-map-nav-height, 54px) + var(--status-safe-bottom, env(safe-area-inset-bottom, 0px)))) + .38rem) !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-bottom .leaflet-control {
    margin-bottom: 0 !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-scale {
    max-width: 5.75rem !important;
    margin-left: max(.35rem, var(--status-safe-left, env(safe-area-inset-left, 0px))) !important;
    pointer-events: none !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-scale-line {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 5.75rem !important;
    padding: .08rem .3rem .12rem !important;
    border-color: rgba(248, 250, 252, .88) !important;
    border-top: 0 !important;
    border-radius: 0 0 .3rem .3rem !important;
    background: rgba(15, 23, 42, .76) !important;
    box-shadow: 0 .12rem .38rem rgba(2, 6, 23, .25) !important;
    color: #f8fafc !important;
    font-size: .64rem !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 1px rgba(2, 6, 23, .45) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-attribution {
    box-sizing: border-box !important;
    max-width: calc(100vw - var(--status-safe-left, env(safe-area-inset-left, 0px)) - var(--status-safe-right, env(safe-area-inset-right, 0px)) - 7.35rem) !important;
    margin-right: var(--status-safe-right, env(safe-area-inset-right, 0px)) !important;
    padding: .18rem .34rem !important;
    overflow: visible !important;
    border: 1px solid rgba(148, 163, 184, .3) !important;
    border-radius: .38rem 0 0 0 !important;
    background: rgba(15, 23, 42, .78) !important;
    box-shadow: 0 .12rem .38rem rgba(2, 6, 23, .25) !important;
    color: #e2e8f0 !important;
    font-size: .62rem !important;
    line-height: 1.22 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-attribution a {
    display: inline-block !important;
    padding: .06rem .1rem !important;
    border-radius: .2rem !important;
    color: #bfdbfe !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    touch-action: manipulation !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-attribution a:hover,
  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-attribution a:active,
  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-attribution a:focus-visible {
    background: rgba(37, 99, 235, .72) !important;
    color: #fff !important;
    outline: 1px solid rgba(191, 219, 254, .72) !important;
    outline-offset: 1px !important;
  }
}

@media (max-width: 991.98px) and (orientation: landscape) {
  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-bottom {
    bottom: calc(var(--status-map-bottom-controls-offset, var(--status-safe-bottom, env(safe-area-inset-bottom, 0px))) + .3rem) !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-bottom .leaflet-control {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 991.98px) {
  html body.page-map.status-map-ui-v40.status-map-fullscreen-active #image-map .leaflet-control-container .leaflet-bottom,
  html body.page-map.status-map-ui-v40 #image-map:fullscreen .leaflet-control-container .leaflet-bottom,
  html body.page-map.status-map-ui-v40 #image-map.leaflet-pseudo-fullscreen .leaflet-control-container .leaflet-bottom {
    bottom: calc(var(--status-map-bottom-controls-offset, var(--status-safe-bottom, env(safe-area-inset-bottom, 0px))) + .3rem) !important;
  }
}

/* Public detail modals share the screen with the persistent quick navigation.
   Bootstrap normally sizes a scrollable modal against the whole viewport, so
   its last 64 px would remain underneath that navigation. Limit the modal
   viewport itself to the measured free area; the existing scrollable dialog
   then keeps its header visible and scrolls only the body. */
@media (max-width: 767.98px) {
  html body.status-has-mobile-nav:not(.status-admin-mode) .status-app-modal {
    --status-public-modal-nav-clearance: var(
      --status-mobile-nav-actual-height,
      calc(var(--status-mobile-nav-height, 64px) + var(--status-safe-bottom, 0px))
    );
    bottom: var(--status-public-modal-nav-clearance) !important;
    height: auto !important;
    max-height: none !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  html body.status-has-mobile-nav:not(.status-admin-mode) .status-app-modal .modal-dialog {
    max-height: calc(100% - 1rem) !important;
  }

  html body.status-has-mobile-nav:not(.status-admin-mode) .status-app-modal .modal-dialog-scrollable {
    height: calc(100% - 1rem) !important;
  }

  html body.status-has-mobile-nav:not(.status-admin-mode) .status-app-modal .modal-content {
    max-height: 100% !important;
  }
}