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

@media (max-width: 767.98px) {
  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;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 .75rem !important;
    padding: .78rem .82rem !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) {
    display: grid !important;
    grid-template-columns: minmax(6.25rem, 34%) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: .35rem .65rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: .58rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html body table.status-bs-table-cards > tbody > tr.status-bs-table-row > td::before {
    align-self: start !important;
    min-width: 0 !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:not(.status-bs-table-primary):not(.status-bs-table-actions):not(.status-bs-table-select) > .status-bs-table-cell-content {
    grid-column: 2 !important;
    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 {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.7rem !important;
    padding: .08rem 3.15rem .7rem 0 !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: 1.85rem !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: .96rem !important;
    right: auto !important;
    left: .78rem !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: .48rem !important;
    right: .48rem !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;
  }

  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;
  }
}

/* Public map: one dark translucent control family. */
body.page-map.status-map-ui-v40 {
  --status-map-control-surface: rgba(15, 23, 42, .84);
  --status-map-control-hover: rgba(37, 99, 235, .92);
  --status-map-control-border: rgba(148, 163, 184, .34);
  --status-map-control-text: #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, .82);
}

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 {
  color: var(--status-map-control-text) !important;
  -webkit-text-fill-color: var(--status-map-control-text) !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, .80) !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, .82) !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, .76) !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;
  }
}
