/* WRS GEMPA UI polish: fixed page headers, contained scrolling and cleaner mobile controls. */

/* WRS GEMPA UI hotfix 2 — short headers and restore visible mini/ShakeMaps.
   The :not(#mobilePageMap) legacy selector has an ID-level specificity, so these
   selectors deliberately use the active page state to override its 58px top inset. */
@media (max-width: 1200px) {
  #mobilePageDetail.active:not(#mobilePageMap),
  #mobilePageAlerts.active:not(#mobilePageMap) {
    padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
  }

  #mobilePageDetail.active:not(#mobilePageMap) > .mobile-page-title,
  #mobilePageAlerts.active:not(#mobilePageMap) > .mobile-page-title {
    flex: 0 0 auto !important;
    padding: 5px 4px 8px !important;
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
  }
  #mobilePageDetail.active:not(#mobilePageMap) > .mobile-page-title small,
  #mobilePageAlerts.active:not(#mobilePageMap) > .mobile-page-title small {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
  }
  #mobilePageDetail.active:not(#mobilePageMap) > .mobile-page-title::after,
  #mobilePageAlerts.active:not(#mobilePageMap) > .mobile-page-title::after {
    margin-top: 7px !important;
    height: 2px !important;
    width: 42px !important;
  }

  /* Restore the small locator map, whose Leaflet container had no reliable height
     once the detail card moved into its own scroll area. */
  #mobilePageDetail.active:not(#mobilePageMap) #rightPanel #miniFocus.rp-mini-map {
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    margin: 8px 10px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    contain: layout paint !important;
  }

  /* Keep ShakeMap readable and within the detail scroll container. */
  #mobilePageDetail.active:not(#mobilePageMap) #rightPanel #shakemapBox:not(.hidden) {
    display: block !important;
    width: auto !important;
    margin: 10px 10px 12px !important;
    overflow: visible !important;
  }
  #mobilePageDetail.active:not(#mobilePageMap) #rightPanel #shakemapBox:not(.hidden) .rp-shakemap-h {
    position: relative !important;
    display: block !important;
    padding: 8px 10px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  #mobilePageDetail.active:not(#mobilePageMap) #rightPanel #shakemapBox:not(.hidden) #shakemapImg {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 180px !important;
    object-fit: contain !important;
    background: #0a1525 !important;
  }
}

@media (max-width: 1200px) {
  /* The bell belongs to the live-monitoring utility rail, not over every page's content. */
  #mobileNotificationBtn { display: none !important; }
  body[data-mobile-page="map"] #mobileNotificationBtn {
    display: grid !important;
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 64px !important;
    z-index: 70 !important;
  }

  /* Replace the cramped dark three-line rail with a clear, touch-friendly control. */
  #vToolbar.is-collapsed {
    width: 54px !important;
    min-width: 54px !important;
    padding: 4px !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #vToolbar .tb-rail-toggle {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(109, 217, 244, .32) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(9, 34, 52, .96), rgba(4, 15, 27, .96)) !important;
    color: #b9f2ff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  #vToolbar .tb-rail-toggle svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  #vToolbar .tb-rail-toggle:active { transform: scale(.95) !important; }

  /* Detail page has a fixed title; only the actual earthquake detail card scrolls. */
  #mobilePageDetail {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: none !important;
  }
  #mobilePageDetail.active {
    display: flex !important;
  }
  #mobilePageDetail > .mobile-page-title {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 4px 14px !important;
    background: linear-gradient(180deg, #07111f 0%, rgba(7,17,31,.98) 88%, rgba(7,17,31,0) 100%) !important;
  }
  #mobilePageDetail #rightPanel {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 14px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }
  #mobilePageDetail #rightPanel .rp-sheet-handle { display: none !important; }

  /* Notification content scrolls underneath its own stationary title, without sticky tabs
     floating on top of the BMKG warning text. */
  #mobilePageAlerts {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mobilePageAlerts.active { display: flex !important; }
  #mobilePageAlerts > .mobile-page-title {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 4px 14px !important;
    background: linear-gradient(180deg, #07111f 0%, rgba(7,17,31,.98) 88%, rgba(7,17,31,0) 100%) !important;
  }
  #mobilePageAlerts .notification-center-scroll {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 0 12px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }
  #mobilePageAlerts .notification-center-tabs {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    margin: 0 0 12px !important;
  }
  #mobilePageAlerts .notification-center-panel { min-width: 0 !important; }
  #mobilePageAlerts .notification-center-push-head h3 { font-size: 18px !important; }
}
@media (max-width: 480px) {
  #mobilePageDetail > .mobile-page-title,
  #mobilePageAlerts > .mobile-page-title {
    padding-bottom: 12px !important;
  }
  #mobilePageDetail > .mobile-page-title span,
  #mobilePageAlerts > .mobile-page-title span { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
  #vToolbar .tb-rail-toggle { transition: none !important; }
}