/* Unit HKA — Modern navigation v1. Scoped overrides of the existing navigation. */
body.hka-modern-nav{
  --hka-nav-width: 276px;
  --hka-nav-space: 292px;
  --hka-navy: #153748;
  --hka-teal: #174875;
  --hka-muted: #77878e;
  --hka-line: #e7edef;
}
body.hka-modern-nav.hka-nav-collapsed{ --hka-nav-width: 76px; --hka-nav-space: 92px; }
body.hka-modern-nav #bwsUnifiedMenu{
  position: fixed !important;
  inset: 16px auto 16px 16px !important;
  width: var(--hka-nav-width) !important;
  height: auto !important;
  z-index: 1800 !important;
  display: block !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: width .18s ease;
}
#bwsUnifiedMenu .hka-nav-drawer{
  display: flex;
  flex-direction: column;
  width: 100%; height: 100%; min-height: 0;
  box-sizing: border-box;
  padding: 18px 12px 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(214, 227, 230, .92);
  border-radius: 20px;
  box-shadow: 0 8px 36px rgba(24, 63, 77, .12);
}
#bwsUnifiedMenu .hka-nav-brand{ display: flex; align-items: center; gap: 11px; padding: 0 4px 19px; flex-shrink: 0; }
#bwsUnifiedMenu .hka-brand-symbol{ display: grid; place-items: center; flex: 0 0 38px; height: 44px; color: #fff; background: var(--hka-primary); border-radius: 12px; }
#bwsUnifiedMenu .hka-brand-symbol svg{ width: 25px; height: 25px; }
#bwsUnifiedMenu .hka-brand-copy{ flex: 1; min-width: 0; }
#bwsUnifiedMenu .hka-brand-copy strong{ display: block; color: var(--hka-navy); font-size: 15px; font-weight: 750; letter-spacing: -.35px; line-height: 1.25; }
#bwsUnifiedMenu .hka-brand-copy strong span{ display: block; font-size: 12px; font-weight: 550; letter-spacing: 0; margin-top: 1px; }
#bwsUnifiedMenu .hka-brand-copy small{ display: block; margin-top: 5px; font-size: 9px; color: #607782; letter-spacing: .2px; }
#bwsUnifiedMenu :is(.hka-nav-collapse,.hka-nav-close,.hka-search-clear){ display: grid; place-items: center; width: 27px; height: 30px; padding: 5px; flex-shrink: 0; border: 1px solid #e7edef; border-radius: 8px; background: #fff; color: #6d828b; cursor: pointer; }
#bwsUnifiedMenu :is(.hka-nav-collapse,.hka-nav-close,.hka-search-clear) svg{ width: 16px; height: 16px; }
#bwsUnifiedMenu .hka-nav-close{ display: none; }
#bwsUnifiedMenu .hka-feature-search{ display: flex; align-items: center; gap: 8px; padding: 0 10px; flex-shrink: 0; min-height: 39px; margin-bottom: 10px; border: 1px solid #e5ecee; border-radius: 9px; background: #f6f9fa; }
#bwsUnifiedMenu .hka-feature-search > svg{ flex: 0 0 15px; width: 15px; height: 15px; color: #8b9a9f; }
#bwsUnifiedMenu .hka-feature-search input{ width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; box-shadow: none; color: #264b5a; font: 500 12px/1.3 Inter, sans-serif; }
#bwsUnifiedMenu .hka-feature-search input::placeholder{ color: #607782; }
#bwsUnifiedMenu .hka-feature-search input::-webkit-search-cancel-button{ display: none; }
#bwsUnifiedMenu .hka-feature-search:focus-within{ border-color: var(--hka-primary); box-shadow: 0 0 0 3px #17487514; }
#bwsUnifiedMenu .hka-feature-search kbd{ white-space: nowrap; flex-shrink: 0; color: #607782; font: 9px/1.3 Inter, sans-serif; border: 1px solid #e0e7e9; border-radius: 4px; padding: 2px 3px; }
#bwsUnifiedMenu .hka-search-clear{ border: 0; background: none; width: 19px; height: 22px; padding: 2px; }
#bwsUnifiedMenu #bwsPublicSearchButton.hka-map-search{ display: flex !important; align-items: center; justify-content: flex-start; gap: 10px; width: 100% !important; min-height: 40px; height: auto !important; margin: 0 0 3px; padding: 10px 12px; flex-shrink: 0; color: var(--hka-primary); background: #edf2f8; border: 1px solid #d5e0ed; border-radius: 10px; box-shadow: none; font-size: 11px; font-weight: 650; cursor: pointer; }
#bwsUnifiedMenu #bwsPublicSearchButton svg{ flex: 0 0 17px; width: 17px; height: 17px; }
#bwsUnifiedMenu .hka-map-search-label{ white-space: nowrap; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items{
  position: static !important;
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 3px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  padding: 0 1px 10px;
  scrollbar-width: thin;
  scrollbar-color: #d7e1ed transparent;
}
#bwsUnifiedMenu .hka-group-title{ padding: 14px 11px 5px; margin: 0; color: #607782; font: 650 9px/1.2 Inter, sans-serif; text-transform: uppercase; letter-spacing: 1.25px; flex-shrink: 0; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature{
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  gap: 11px;
  width: 100% !important;
  height: auto !important;
  min-height: 47px;
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 11px;
  text-align: left;
  color: #4d6570;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  filter: none;
  transition: background .13s, color .13s;
}
#bwsUnifiedMenu .hka-feature > :not(.hka-feature-icon):not(.hka-feature-copy){ display: none !important; }
#bwsUnifiedMenu .hka-feature .hka-feature-icon{ display: grid !important; place-items: center; width: 21px; height: 23px; flex: 0 0 21px; color: #6b8993; }
#bwsUnifiedMenu .hka-feature-icon svg{ display: block; width: 20px; height: 20px; }
#bwsUnifiedMenu .hka-feature .hka-feature-copy{ display: flex !important; flex-direction: column; gap: 4px; min-width: 0; }
#bwsUnifiedMenu .hka-feature .hka-feature-label{ display: block !important; font: 600 13px/1.2 Inter, sans-serif !important; letter-spacing: -.1px; color: inherit; }
#bwsUnifiedMenu .hka-feature .hka-feature-hint{ display: block !important; font: 400 10px/1.2 Inter, sans-serif !important; color: #607782; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature:hover{ color: var(--hka-navy); background: #f0f7f5; border-color: transparent; box-shadow: none; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature.hka-is-active{ color: var(--hka-navy); background: #e8f4ef; border-color: #d7e3ef; }
#bwsUnifiedMenu .hka-feature.hka-is-active .hka-feature-icon{ color: var(--hka-primary); }
#bwsUnifiedMenu .hka-feature.hka-is-active::before{ content: ''; position: absolute; top: 13px; bottom: 13px; left: -1px; width: 3px; border-radius: 3px; background: var(--hka-gold); }
#bwsUnifiedMenu .hka-feature.menu-auth-locked{ opacity: .72; }
#bwsUnifiedMenu .hka-feature.menu-auth-locked::after{ top: 4px; right: 5px; background: #cbd8dd; box-shadow: none; font-size: 7px; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items button:is([hidden],.menu-auth-denied,[aria-hidden="true"],[data-hka-filtered="true"],[data-hka-access-hidden="true"]),
#bwsUnifiedMenu [hidden]{ display: none !important; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature:disabled{ cursor: not-allowed; opacity: .5; }
#bwsUnifiedMenu .hka-search-empty{ margin: 20px 12px; color: #72858e; font-size: 12px; line-height: 1.6; }
#bwsUnifiedMenu .hka-nav-footer{ display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 13px 6px 1px; flex-shrink: 0; border-top: 1px solid #edf1f2; }
#bwsUnifiedMenu .hka-footer-mark{ display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; color: #65868d; background: #edf3f4; border-radius: 9px; font-size: 8px; font-weight: 750; }
#bwsUnifiedMenu .hka-footer-copy{ color: #4f6b76; font: 550 9px/1.3 Inter, sans-serif; }
#bwsUnifiedMenu .hka-footer-copy small{ display: block; margin-top: 4px; color: #607782; font-size: 8px; font-weight: 400; }
#bwsUnifiedMenu .bws-menu-logout-dock{ width: 100%; }
#bwsUnifiedMenu .bws-menu-logout-dock button{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 32px; padding: 7px 12px; border: 1px solid #f2deda; border-radius: 8px; background: #fff8f6; color: #aa6153; box-shadow: none; cursor: pointer; font-size: 11px; }
#bwsUnifiedMenu .bws-menu-logout-dock button svg{ width: 15px; height: 15px; }
#bwsUnifiedMenu .hka-logout-label{ font: 550 10px/1.2 Inter, sans-serif; }
body.hka-modern-nav #bwsUnifiedMenuToggle{ display: none !important; }
#bwsUnifiedMenu :is(button,input):focus-visible{ outline: 3px solid #9bbcdf !important; outline-offset: 2px; }
#bwsUnifiedMenu .hka-nav-backdrop{ display: none; }

@media (min-width: 1025px) {
  body.hka-modern-nav .app-header{ top: 16px !important; left: calc(var(--hka-nav-space) + 16px) !important; right: 18px !important; max-width: none !important; width: auto !important; gap: 12px; }
  body.hka-modern-nav .brand-card{ padding: 12px 16px !important; border-radius: 14px !important; background: #ffffffed; border-color: #e0e9eb; box-shadow: 0 4px 20px #1a404812; }
  body.hka-modern-nav .brand-card h1{ font-size: 15px !important; color: #1d4555 !important; }
  body.hka-modern-nav .brand-logo{ width: 35px !important; height: 35px !important; }
  body.hka-modern-nav .map-legend-card{ box-shadow: 0 4px 20px #1a404810; border-radius: 12px; }
  body.hka-modern-nav .summary-stack{ left: calc(var(--hka-nav-space) + 18px) !important; }
  body.hka-modern-nav #map > .leaflet-control-container .leaflet-top.leaflet-left{ left: calc(var(--hka-nav-space) + 4px); top: 90px; }
  body.hka-modern-nav :is(.quick-search,.data-range-panel,#exportDataPanel,#spiPanel){ left: calc(var(--hka-nav-space) + 18px) !important; max-width: calc(100vw - var(--hka-nav-space) - 38px) !important; }
  #bwsUnifiedMenu.hka-is-collapsed .hka-nav-drawer{ padding: 16px 9px 12px; }
  #bwsUnifiedMenu.hka-is-collapsed .hka-nav-brand{ flex-direction: column; gap: 12px; padding: 0 0 14px; }
  #bwsUnifiedMenu.hka-is-collapsed .hka-nav-collapse{ width: 27px; height: 24px; }
  #bwsUnifiedMenu.hka-is-collapsed .hka-nav-collapse svg{ transform: rotate(180deg); }
  #bwsUnifiedMenu.hka-is-collapsed :is(.hka-brand-copy,.hka-feature-search,.hka-map-search-label,.hka-feature-copy,.hka-footer-copy,.hka-logout-label){ display: none !important; }
  #bwsUnifiedMenu.hka-is-collapsed .hka-group-title{ height: 14px; font-size: 0; padding: 0; margin: 6px 12px 0; border-top: 1px solid #e8eff0; }
  body.hka-modern-nav #bwsUnifiedMenu.hka-is-collapsed .hka-feature{ justify-content: center; min-height: 43px; padding: 9px; gap: 0; }
  #bwsUnifiedMenu.hka-is-collapsed #bwsPublicSearchButton.hka-map-search{ justify-content: center; padding: 10px; }
  #bwsUnifiedMenu.hka-is-collapsed .hka-nav-footer{ justify-content: center; padding-inline: 0; }
}

@media (max-width: 1024px) {
  body.hka-modern-nav #bwsUnifiedMenu{ inset: 0 auto auto 0 !important; width: 0 !important; height: 0 !important; z-index: 260000 !important; }
  body.hka-modern-nav #bwsUnifiedMenu .hka-nav-drawer{ position: fixed; top: 10px; bottom: 10px; left: 10px; width: min(310px, calc(100vw - 34px)); height: auto; max-height: calc(100dvh - 20px); padding-top: max(18px, env(safe-area-inset-top)); transform: translateX(calc(-100% - 20px)); visibility: hidden; transition: transform .2s ease, visibility .2s; border-radius: 17px; z-index: 2; }
  body.hka-modern-nav #bwsUnifiedMenu.is-open .hka-nav-drawer{ transform: none; visibility: visible; }
  #bwsUnifiedMenu .hka-nav-backdrop:not([hidden]){ display: block; position: fixed; inset: 0; width: 100vw; height: 100dvh; padding: 0; margin: 0; border: 0; border-radius: 0; background: #11364770; backdrop-filter: blur(3px); z-index: 1; }
  #bwsUnifiedMenu .hka-nav-collapse{ display: none; }
  #bwsUnifiedMenu .hka-nav-close{ display: grid; }
  body.hka-modern-nav #bwsUnifiedMenuToggle{ display: flex !important; align-items: center; justify-content: center; gap: 8px; position: fixed !important; top: calc(max(10px, env(safe-area-inset-top)) + 4px) !important; left: 12px !important; right: auto !important; bottom: auto !important; height: 40px !important; width: 112px !important; min-width: 0 !important; padding: 9px 12px; background: #fff !important; color: var(--hka-navy) !important; border: 1px solid #d7e3ef !important; border-radius: 11px !important; box-shadow: 0 4px 16px #173d491a !important; opacity: 1; filter: none; z-index: 0; }
  body.hka-modern-nav #bwsUnifiedMenu.is-open #bwsUnifiedMenuToggle{ visibility: hidden; }
  #bwsUnifiedMenuToggle svg{ width: 17px !important; height: 17px !important; }
  #bwsUnifiedMenuToggle .hka-launch-label{ font: 650 11px/1.2 Inter, sans-serif; white-space: nowrap; }
  body.hka-modern-nav #bwsUnifiedMenu > #bwsPublicSearchButton.hka-map-search{ position: fixed !important; top: calc(max(10px, env(safe-area-inset-top)) + 4px) !important; left: 134px !important; width: 40px !important; height: 40px !important; min-height: 40px; padding: 10px; margin: 0; justify-content: center; box-shadow: 0 4px 16px #173d491a; background: #fff; z-index: 0; }
  #bwsUnifiedMenu > #bwsPublicSearchButton .hka-map-search-label{ display: none; }
  body.hka-modern-nav .app-header{ top: calc(max(10px, env(safe-area-inset-top)) + 4px) !important; left: 184px !important; right: 12px !important; width: auto !important; max-width: none !important; align-items: flex-end; }
  body.hka-modern-nav .brand-card{ padding: 9px 11px !important; min-width: 0 !important; max-width: 100%; border-radius: 11px !important; gap: 7px; }
  body.hka-modern-nav .brand-card h1{ color: #225267 !important; font-size: 11px !important; line-height: 1.25; }
  body.hka-modern-nav .brand-logo{ width: 23px !important; height: 23px !important; min-width: 23px !important; }
  body.hka-modern-nav .legend-stack{ max-width: 100%; }
  body.hka-modern-nav .map-legend-card{ border-radius: 10px; }
  body.hka-modern-nav .summary-stack{ top: 124px !important; }
  body.hka-modern-nav #map > .leaflet-control-container .leaflet-top.leaflet-left{ top: 120px; }
}
@media (max-width: 480px) {
  body.hka-modern-nav .app-header .legend-stack{ position: fixed; left: 12px; right: 12px; top: 65px; max-width: none; }
  body.hka-modern-nav .map-legend-card{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 12px; padding: 8px 10px; }
  body.hka-modern-nav .map-legend-item{ font-size: 8px; }
}
@media (max-width: 380px) {
  body.hka-modern-nav .app-header .brand-logo{ display: none !important; }
  body.hka-modern-nav .app-header .brand-card h1{ font-size: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.hka-modern-nav #bwsUnifiedMenu,
#bwsUnifiedMenu *,
#bwsUnifiedMenu *::before{ transition: none !important; animation: none !important; }
}

/* Professional interface 2.0 — shared presentation, original feature state. */
body.hka-modern-nav{
  --hka-navy: #173342;
  --hka-teal: #174875;
  --hka-muted: #526975;
  --hka-line: #dce5e9;
  --hka-surface: #fff;
  --hka-soft: #f5f8fa;
  --hka-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hka-shadow: 0 12px 40px #17334216;
  font-family: var(--hka-font);
}

/* A locked feature disappears for guests; the login entry remains available. */
body.hka-modern-nav:not(.hka-session-authenticated) .menu-auth-locked:not(#bwsUnifiedMenuToggle):not(.menu-auth-button):not(.menu-auth-responsive-button),
body.hka-modern-nav:not(.hka-session-authenticated) [data-bws-menu="rating_curve"],
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items button[data-hka-group-collapsed="true"],
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items button:is([hidden],.menu-auth-denied,[data-hka-access-hidden="true"],[data-hka-filtered="true"]){
  display: none !important;
}
body.hka-modern-nav #bwsUnifiedMenuToggle.menu-auth-locked::after,
body.hka-modern-nav :is(.menu-auth-button,.menu-auth-responsive-button)::after{ content: none !important; }
#bwsUnifiedMenu .hka-nav-drawer{ border-radius: 16px; box-shadow: var(--hka-shadow); }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-group-title{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: auto; min-height: 32px; margin: 10px 0 3px; padding: 8px 10px;
  border: 0; border-radius: 7px; background: transparent; color: var(--hka-muted);
  box-shadow: none; font: 650 10px/1.4 var(--hka-font); text-align: left;
  text-transform: uppercase; letter-spacing: .8px; cursor: pointer; flex-shrink: 0;
}
#bwsUnifiedMenu .hka-group-chevron{ display: grid; place-items: center; }
#bwsUnifiedMenu .hka-group-chevron svg{ width: 13px; height: 13px; transform: rotate(-90deg); }
#bwsUnifiedMenu .hka-group-title[aria-expanded="false"] .hka-group-chevron svg{ transform: rotate(180deg); }
body.hka-modern-nav #bwsUnifiedMenu .hka-group-title:hover{ background: var(--hka-soft); color: var(--hka-navy); }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature{ border-radius: 8px; min-height: 49px; }
#bwsUnifiedMenu .hka-feature .hka-feature-hint{ line-height: 1.4 !important; }
#bwsUnifiedMenu .hka-login-button{
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  min-height: 40px; padding: 9px 12px; border: 1px solid var(--hka-teal); border-radius: 9px;
  color: white; background: var(--hka-teal); font: 600 13px/1.3 var(--hka-font); cursor: pointer;
}
#bwsUnifiedMenu .hka-login-button svg{ width: 18px; height: 18px; flex-shrink: 0; }
#bwsUnifiedMenu .hka-login-button:hover{ background: #123957; }
body.hka-modern-nav #bwsUnifiedMenu [hidden]{ display: none !important; }

/* The same header treatment applies to the map workspace. */
body.hka-modern-nav.hka-modern-nav .app-header{
  color: var(--hka-navy) !important; background: #fffffffa !important;
  border: 1px solid var(--hka-line) !important; border-radius: 14px !important;
  box-shadow: 0 4px 22px #1733420d !important; backdrop-filter: none;
  padding: 9px 12px !important; min-height: 58px !important;
}
body.hka-modern-nav.hka-modern-nav .brand-card{ padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.hka-modern-nav.hka-modern-nav .brand-card h1{ color: var(--hka-navy) !important; font-weight: 650 !important; }
body.hka-modern-nav :is(.bws-v3-brand-subtitle,.bws-v3-brand-kicker){ color: var(--hka-muted); }
body.hka-modern-nav.hka-modern-nav .map-legend-card{ color: var(--hka-muted) !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.hka-modern-nav.hka-modern-nav .map-legend-item{ color: var(--hka-muted) !important; background: var(--hka-soft) !important; border-color: var(--hka-line) !important; }

/* No display/visibility override here: modules continue to own open/close. */
body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.bws-terrain-panel,.bws-lc-panel,.bws-rain-panel,.menu-auth-dialog,.telemetry-dashboard-panel,.das-multi-export-panel){
  box-sizing: border-box; font-family: var(--hka-font) !important;
  color: var(--hka-navy); background: var(--hka-surface) !important;
  border: 1px solid var(--hka-line) !important; border-radius: 16px !important;
  box-shadow: var(--hka-shadow) !important; scrollbar-width: thin;
  scrollbar-color: #c5d4da transparent;
}
body.hka-modern-nav.hka-modern-nav :is(.dependable-flow-panel,.export-data-panel,.spi-panel)::before{ background: var(--hka-teal) !important; height: 3px; }
body.hka-modern-nav.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.flood-scenario-head,.bws-terrain-head,.bws-lc-head,.bws-rain-head,.coord-tool-header,.data-tools-head,.bws-hydro-head,.bws-rc-head,.bws-dm-head,.bws-dem-workspace-header,.telemetry-dashboard-panel > header){
  color: var(--hka-navy) !important; background: #fff !important;
  border-bottom: 1px solid var(--hka-line) !important; box-shadow: none !important;
  padding: 18px 20px !important; gap: 12px; backdrop-filter: none;
}
body.hka-modern-nav.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.flood-scenario-head,.bws-terrain-head,.bws-lc-head,.bws-rain-head,.coord-tool-header,.data-tools-head,.bws-hydro-head,.bws-rc-head,.bws-dm-head,.bws-dem-workspace-header,.telemetry-dashboard-panel > header) :is(h2,h3,h4){ margin: 0; color: var(--hka-navy) !important; font: 650 18px/1.35 var(--hka-font) !important; letter-spacing: -.3px; }
body.hka-modern-nav :is(.export-header-subtitle,.bws-v3-panel-description,.dfa-header p,.na-title p,.data-tools-head p,.bws-rc-head p,.flood-scenario-head p,.bws-terrain-head p,.bws-lc-head p){ color: var(--hka-muted) !important; font-size: 12px !important; line-height: 1.6; opacity: 1; }
body.hka-modern-nav :is(.bws-v3-panel-kicker){ color: var(--hka-teal) !important; letter-spacing: 1px; font-size: 10px !important; }
body.hka-modern-nav :is(.dfa-title-icon,.na-title-icon,.bws-hydro-title-mark,.data-tools-head-icon){
  color: var(--hka-teal) !important; background: #edf2f8 !important; border: 1px solid #d5e0ed !important;
  box-shadow: none !important; border-radius: 10px !important;
}
body.hka-modern-nav :is(.bws-hydro-body,.data-tools-body,.bws-rc-body,.bws-dm-body,.na-body,.flood-scenario-body){ background: var(--hka-soft) !important; padding: 18px !important; }

/* Submenus are compact, scrollable tabs, with a clear selected state. */
body.hka-modern-nav.hka-modern-nav :is(.bws-availability-tabs,.bws-hydro-tabs,.bws-sync-category-tabs,.data-tools-tabs,.export-product-tabs,.rain-dual-v184-tabs){
  display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
  padding: 10px 12px !important; overflow-x: auto !important; overflow-y: hidden;
  min-width: 0; max-width: 100%; background: #f8fafb !important;
  border: 0 !important; border-bottom: 1px solid var(--hka-line) !important;
  scrollbar-width: thin; flex-shrink: 0;
}
body.hka-modern-nav.hka-modern-nav :is(.bws-availability-tabs,.bws-hydro-tabs,.bws-sync-category-tabs,.data-tools-tabs,.export-product-tabs,.rain-dual-v184-tabs) > button{
  flex: 0 0 auto; min-height: 38px; height: auto; padding: 9px 14px !important;
  border: 1px solid transparent !important; border-radius: 8px !important;
  color: var(--hka-muted) !important; background: transparent !important;
  box-shadow: none !important; font: 600 12px/1.4 var(--hka-font) !important;
  white-space: nowrap; cursor: pointer;
}
body.hka-modern-nav.hka-modern-nav :is(.bws-availability-tabs,.bws-hydro-tabs,.bws-sync-category-tabs,.data-tools-tabs,.export-product-tabs,.rain-dual-v184-tabs) > button:is(.active,.is-active,.is-selected,[aria-selected="true"],[aria-pressed="true"]){
  color: #173f6b !important; background: #edf2f8 !important; border-color: #d5e0ed !important;
}
body.hka-modern-nav.hka-modern-nav :is(.export-mode-card,.coord-format-button,.flood-mode-button){
  border: 1px solid var(--hka-line) !important; border-radius: 10px !important;
  color: var(--hka-navy); background: #fff !important; box-shadow: none !important;
  padding: 12px 14px !important; line-height: 1.5; text-align: left;
}
body.hka-modern-nav.hka-modern-nav :is(.export-mode-card,.coord-format-button,.flood-mode-button):is(.active,.is-active,.is-selected,[aria-selected="true"],[aria-pressed="true"]){ border-color: #99b4d0 !important; color: #173f6b !important; background: #edf2f8 !important; }

/* Cards and field groups share a quiet surface; data/status colours stay intact. */
body.hka-modern-nav.hka-modern-nav :is(.dt-card,.dfa-section,.na-section,.bws-sync-card,.bws-rc-card,.bws-hydro-chart-card,.data-range-chart-card,.export-data-section,.station-data-export-card,.station-coordinate-export-card,.coord-step-card,.bws-spatial-server-card,.bws-terrain-manual-card,.bws-region-dem-card,.bws-rc-controls,.bws-rain-grid-card){ background: #fff !important; border: 1px solid var(--hka-line) !important; border-radius: 12px !important; box-shadow: none !important; }
body.hka-modern-nav :is(.dt-card h3,.dfa-section-head b,.na-section-head b,.export-data-section-title,.bws-sync-card-title,.bws-rc-card h3){ color: var(--hka-navy) !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.5; }
body.hka-modern-nav :is(.na-section-head,.bws-sync-card-head){ background: #fff !important; border-bottom-color: var(--hka-line); }
body.hka-modern-nav :is(.dfa-field > span,.na-field > span,.bws-rc-field,.menu-auth-field,.flood-field,.bws-layer-field,.coord-field > span){ color: var(--hka-muted) !important; font: 600 12px/1.5 var(--hka-font) !important; text-transform: none; letter-spacing: 0; }

/* Inputs: exclude hidden, checkbox, radio, colour, range, and button inputs. */
body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.bws-terrain-panel,.bws-lc-panel,.bws-rain-panel,.menu-auth-dialog) :is(input:not([type]), input[type="text"], input[type="number"], input[type="search"], input[type="password"], input[type="email"], input[type="date"], input[type="month"], input[type="datetime-local"], select, textarea){
  box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 40px;
  border: 1px solid var(--hka-line) !important; border-radius: 8px !important;
  color: var(--hka-navy) !important; background: #fff !important;
  padding: 9px 11px; box-shadow: none; font: 400 13px/1.5 var(--hka-font) !important;
}
body.hka-modern-nav.hka-modern-nav .menu-auth-password-wrap input{ padding-right: 76px; }
body.hka-modern-nav :is(input[type="checkbox"],input[type="radio"],input[type="range"]){ accent-color: var(--hka-teal); }
body.hka-modern-nav :is(.dt-dropzone){ border: 1px dashed #a6bbd2 !important; border-radius: 12px !important; background: var(--hka-soft) !important; padding: 24px 18px; }

/* Primary, secondary, destructive, and close controls keep distinct meanings. */
body.hka-modern-nav.hka-modern-nav :is(.dt-btn,.dfa-btn,.na-btn,.bws-rc-btn,.bws-dm-btn,.bws-rc-mini,.bws-spatial-icon-button,.bws-station-target-button,.coord-add-button,.coord-clear-button,.spi-reset-button,.spi-export-button,.bws-sync-toolbar-actions button,.bws-hydro-chart-actions button,.export-download-actions button,.bws-terrain-actions button,.bws-rain-actions button,.bws-lc-actions button,.bws-spatial-actions button,.flood-action-row button,.flood-layer-actions button,.dfa-actions button){
  min-height: 38px; padding: 9px 13px; border: 1px solid var(--hka-line) !important;
  border-radius: 8px !important; box-shadow: none !important;
  color: var(--hka-muted); background: #fff !important; font: 600 12px/1.35 var(--hka-font) !important;
  cursor: pointer;
}
body.hka-modern-nav.hka-modern-nav :is(.dt-btn.primary,.dfa-btn.primary,.flood-run,.na-btn.primary,.bws-rc-btn.primary,.bws-dm-btn.primary,.spi-run-button,.spi-map-export-button,.menu-auth-submit,.bws-hydro-primary){ border: 1px solid var(--hka-teal) !important; border-radius: 8px !important; background: var(--hka-teal) !important; color: #fff !important; box-shadow: none !important; font-weight: 600 !important; }
body.hka-modern-nav.hka-modern-nav :is(.dt-btn.danger,.na-btn.danger,.bws-dm-btn.danger,.coord-clear-button,.upload-clear-button,.menu-auth-logout){ color: #a13b35 !important; background: #fff5f3 !important; border: 1px solid #ebc9c5 !important; box-shadow: none !important; }
body.hka-modern-nav.hka-modern-nav :is(.spi-close-button,.dfa-close,.na-close,.flood-scenario-close,.bws-panel-close,.data-tools-close,.bws-hydro-close,.bws-rc-close,.bws-dm-close,.menu-auth-close,.telemetry-dashboard-refresh){
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 6px;
  color: #4e6571 !important; background: #f4f7f9 !important;
  border: 1px solid var(--hka-line) !important; border-radius: 8px !important; box-shadow: none !important;
}
body.hka-modern-nav :is(.dt-actions,.dfa-actions,.na-actions,.bws-rc-actions,.bws-spatial-actions,.export-download-actions,.bws-terrain-actions,.bws-rain-actions){ gap: 8px; flex-wrap: wrap; }
body.hka-modern-nav :is(button,input,select,textarea,summary,a):focus-visible{ outline: 3px solid #9bbcdf !important; outline-offset: 2px !important; }
body.hka-modern-nav button:disabled{ cursor: not-allowed; }

/* Tables: consistent density, numeric alignment, original semantic cell colours. */
body.hka-modern-nav :is(.dt-table-wrap,.dfa-table-wrap,.na-table-wrap,.bws-dm-table-wrap,.rain-dual-v184-table-wrap,.spi-cluster-area-table-wrap,.bws-v190-table-wrap){ overflow: auto; border: 1px solid var(--hka-line) !important; border-radius: 10px !important; scrollbar-width: thin; }
body.hka-modern-nav :is(.dt-table,.dfa-table,.na-table,.rain-dual-v184-table,.spi-result-table,.spi-cluster-area-table,.bws-v190-table,.bws-dm-table-wrap table){ font: 400 12px/1.55 var(--hka-font); border-collapse: collapse; font-variant-numeric: tabular-nums; }
body.hka-modern-nav.hka-modern-nav :is(.dt-table,.dfa-table,.na-table,.rain-dual-v184-table,.spi-result-table,.spi-cluster-area-table,.bws-v190-table,.bws-dm-table-wrap table) th{ color: #395562 !important; background: #f1f5f7 !important; padding: 11px 12px; border-bottom: 1px solid #d4e0e5; font-size: 11px; font-weight: 650; }
body.hka-modern-nav :is(.dt-table,.dfa-table,.na-table,.rain-dual-v184-table,.spi-result-table,.spi-cluster-area-table,.bws-v190-table,.bws-dm-table-wrap table) td{ padding: 10px 12px; border-bottom: 1px solid #e7edf0; }
body.hka-modern-nav :is(.dt-table,.dfa-table,.na-table,.bws-dm-table-wrap table) tbody tr:hover{ background: #f5f7fa; }
body.hka-modern-nav :is(.bws-hydro-overlay,.data-tools-backdrop,.bws-rc-modal,.bws-dm-modal,.menu-auth-backdrop){ background: #102b3a80; backdrop-filter: blur(4px); }
body.hka-modern-nav .menu-auth-dialog{ padding: 28px; }
body.hka-modern-nav .menu-auth-dialog h2{ font-size: 24px; font-weight: 650; letter-spacing: -.5px; }
body.hka-modern-nav .menu-auth-password-toggle{ background: #edf5f2; color: var(--hka-teal); }

@media (min-width: 1025px) {
  body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel){
    left: calc(var(--hka-nav-space) + 18px) !important; right: auto !important;
    max-width: calc(100vw - var(--hka-nav-space) - 38px) !important; z-index: 11000 !important;
  }
  body.hka-modern-nav #bwsUnifiedMenu.hka-is-collapsed .hka-group-title{ min-height: 10px; height: 10px; padding: 0; margin: 10px 0 4px; border-top: 1px solid var(--hka-line); pointer-events: none; }
  #bwsUnifiedMenu.hka-is-collapsed :is(.hka-group-label,.hka-group-chevron,.hka-login-button span){ display: none !important; }
}
@media (max-width: 1024px) {
  body.hka-modern-nav.hka-modern-nav .app-header{ min-height: 40px !important; padding: 7px 9px !important; border-radius: 10px !important; }
  body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel){
    left: max(10px, env(safe-area-inset-left)) !important; right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important; width: auto !important;
    max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 84px) !important;
    border-radius: 14px !important; z-index: 11000 !important;
  }
  body.hka-modern-nav.hka-modern-nav :is(.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog){ max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 24px) !important; min-height: 0 !important; border-radius: 14px !important; }
  body.hka-modern-nav :is(.bws-rc-controls,.bws-sync-toolbar){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hka-modern-nav :is(.bws-rc-actions,.bws-sync-toolbar-actions){ grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  body.hka-modern-nav.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.data-tools-head,.bws-hydro-head,.bws-rc-head,.bws-dm-head){ padding: 14px !important; gap: 9px; }
  body.hka-modern-nav :is(.bws-hydro-body,.data-tools-body,.bws-rc-body,.bws-dm-body,.na-body,.flood-scenario-body){ padding: 12px !important; }
  body.hka-modern-nav :is(.bws-rc-controls,.bws-rc-grid){ grid-template-columns: minmax(0, 1fr); }
  body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.menu-auth-dialog) :is(input:not([type]), input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], select, textarea){ font-size: 16px !important; }
  body.hka-modern-nav.hka-modern-nav .app-header .map-legend-card{ padding: 8px 10px !important; border: 1px solid var(--hka-line) !important; background: #fff !important; box-shadow: 0 4px 16px #1733420d !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.hka-modern-nav :is(.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.menu-auth-dialog,.telemetry-dashboard-panel,.dependable-flow-panel){ animation: none !important; transition: none !important; }
}
/* Shared component layout must never expose a hidden tab or protected control. */
body.hka-modern-nav.hka-modern-nav [hidden]{ display: none !important; }

/* Original BWS logo and name-only navigation. */
body.hka-modern-nav #bwsUnifiedMenu,
body.hka-modern-nav #bwsUnifiedMenu :is(.hka-nav-brand,.bws-menu-items,.hka-nav-footer){
  background: transparent !important;
  background-image: none !important;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-drawer{
  background: #fff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1;
  border-color: var(--hka-line);
  box-shadow: 0 8px 28px rgba(23, 51, 66, .08);
}
body.hka-modern-nav #bwsUnifiedMenu :is(.hka-brand-copy,.hka-feature-hint,.hka-footer-mark,.hka-footer-copy){ display: none !important; }
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-brand{
  justify-content: space-between; gap: 12px; padding-bottom: 16px;
}
#bwsUnifiedMenu .hka-brand-logo{
  display: block; width: 44px; height: 44px; flex: 0 0 44px;
  object-fit: contain; border: 0; border-radius: 0; background: transparent;
}
#bwsUnifiedMenu .hka-logo-fallback{ color: var(--hka-navy); font: 600 12px/1.4 var(--hka-font); }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature{
  min-height: 42px; padding: 10px 11px; background: transparent !important;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-feature .hka-feature-copy{ gap: 0; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature .hka-feature-label{ color: #173342; line-height: 1.4 !important; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature:hover{ background: rgba(17, 111, 104, .09) !important; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature.hka-is-active{ background: rgba(17, 111, 104, .14) !important; border-color: rgba(17, 111, 104, .15); }
body.hka-modern-nav #bwsUnifiedMenu .hka-group-title{ color: #3b5663; }
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-footer{ border-top: 0; padding-top: 8px; }

/* Keep the original legend DOM and its interactions, hide other header items. */
body.hka-modern-nav.hka-modern-nav .app-header > :not(.legend-stack){ display: none !important; }
body.hka-modern-nav.hka-modern-nav .app-header,
body.hka-modern-nav.hka-modern-nav .app-header :is(.legend-stack,.map-legend-card,.map-legend-item){
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}
body.hka-modern-nav.hka-modern-nav .app-header{
  top: 16px !important; left: calc(var(--hka-nav-space) + 18px) !important; right: 18px !important;
  min-height: 0 !important; width: auto !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important; justify-content: flex-end !important;
}
body.hka-modern-nav.hka-modern-nav .app-header .legend-stack{
  position: static !important; flex: 0 1 auto !important; padding: 0 !important;
  margin: 0 !important; width: auto !important; max-width: 100% !important;
  justify-content: flex-end !important;
}
body.hka-modern-nav.hka-modern-nav .app-header .map-legend-card{
  display: flex !important; flex-wrap: wrap !important; align-items: center;
  justify-content: flex-end !important; gap: 9px 16px !important;
  width: auto !important; padding: 0 !important; margin: 0 !important;
}
body.hka-modern-nav.hka-modern-nav .app-header .map-legend-item{
  min-height: 0 !important; padding: 2px 0 !important; color: #173342 !important;
  font: 600 11px/1.4 var(--hka-font) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}
body.hka-modern-nav.hka-modern-nav .app-header::before,
body.hka-modern-nav.hka-modern-nav .app-header::after,
body.hka-modern-nav.hka-modern-nav .app-header .legend-stack::before,
body.hka-modern-nav.hka-modern-nav .app-header .legend-stack::after,
body.hka-modern-nav.hka-modern-nav .app-header .map-legend-card::before,
body.hka-modern-nav.hka-modern-nav .app-header .map-legend-card::after{ content: none !important; }
@media (min-width: 1025px) {
  #bwsUnifiedMenu.hka-is-collapsed .hka-brand-logo{ width: 36px; height: 36px; flex-basis: 36px; }
  #bwsUnifiedMenu.hka-is-collapsed .hka-logo-fallback{ font-size: 9px; text-align: center; }
}
@media (max-width: 1024px) {
  body.hka-modern-nav.hka-modern-nav .app-header{
    top: calc(max(10px, env(safe-area-inset-top)) + 56px) !important;
    left: 12px !important; right: 12px !important;
    min-height: 0 !important; padding: 0 !important; justify-content: flex-start !important;
  }
  body.hka-modern-nav.hka-modern-nav .app-header :is(.legend-stack,.map-legend-card){ justify-content: flex-start !important; }
  body.hka-modern-nav.hka-modern-nav .app-header .map-legend-card{ gap: 7px 12px !important; }
}
@media (max-width: 480px) {
  body.hka-modern-nav .summary-stack{ top: 145px !important; }
  body.hka-modern-nav #map > .leaflet-control-container .leaflet-top.leaflet-left{ top: 145px; }
}

/* Upload and coordinate sections share one close control, always reachable. */
body.hka-modern-nav #coordPanel .hka-upload-panel-actions{
  position: sticky; top: 0; z-index: 30; display: flex; justify-content: flex-end;
  margin: 0 0 6px; padding: 4px 0; background: #fff;
}
body.hka-modern-nav #coordPanel .hka-upload-close{
  position: static !important; inset: auto !important; transform: none !important;
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  min-width: 36px; padding: 7px; border: 1px solid #dce5e9; border-radius: 8px;
  color: var(--hka-muted); background: #f4f7f9; cursor: pointer; font-size: 22px;
  pointer-events: auto !important;
}
#coordPanel .hka-upload-close svg{ width: 18px; height: 18px; }

/* Revisi 3.0 — 0% transparency: solid menu, compact feature workflows. */
body.hka-modern-nav{
  --hka-surface: #fff;
  --hka-soft: #f5f7fa;
  --hka-line: #e0e7ee;
  --hka-navy: #183447;
  --hka-muted: #607184;
  --hka-teal: #174875;
  --hka-shadow: 0 12px 36px #12263b14;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-drawer{
  background: #fff !important; opacity: 1 !important;
  border: 1px solid var(--hka-line); border-radius: 16px;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 28px #12263b12;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-group-title{
  min-height: 32px; padding: 10px 10px 5px; margin-top: 4px;
  color: #69788a; font-size: 10px; letter-spacing: .7px;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-feature .hka-feature-label{ font-size: 13px; font-weight: 550; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature{
  min-height: 42px; border: 1px solid transparent; border-radius: 8px;
}
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature:hover{ background: #f0f5f8 !important; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature.hka-is-active{
  color: #173f6b !important; background: #edf2f8 !important; border-color: #d5e0ed;
}
#bwsUnifiedMenu .hka-feature.hka-is-active .hka-feature-label{ color: #173f6b !important; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature-icon{ width: 22px; height: 22px; background: none; border: 0; }
body.hka-modern-nav #bwsUnifiedMenu [data-hka-group-heading="workspace"]{ display: none !important; }
body.hka-modern-nav #bwsUnifiedMenu [data-hka-group="workspace"]{ margin-top: 12px !important; }

/* Titles and field labels only; status messages, units and model warnings remain. */
body.hka-modern-nav.hka-modern-nav :is(.bws-v3-panel-kicker,.bws-v3-panel-description,.bws-dem-workspace-kicker,.export-header-subtitle,.dfa-header p,.na-title p,.data-tools-head p,.bws-rc-head p,.flood-scenario-head p,.coord-tool-header p,.bws-terrain-head p,.bws-lc-head p,.bws-rain-head p,.dfa-section-head > em,.na-section-head small,.coord-step-heading small,.bws-dem-map-tools > summary > small,.dfa-title-icon,.na-title-icon,.bws-hydro-title-mark,.data-tools-head-icon,.coord-tool-logo,.bws-terrain-badge){ display: none !important; }
body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.menu-auth-dialog,.telemetry-dashboard-panel,.bws-dem-workspace-shell,.bws-lc-panel,.bws-rain-panel){ background: #fff !important; border-radius: 14px !important; border-color: var(--hka-line) !important; }
body.hka-modern-nav.hka-modern-nav :is(.dependable-flow-panel,.export-data-panel,.spi-panel)::before{ content: none !important; }
body.hka-modern-nav.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.flood-scenario-head,.data-tools-head,.bws-hydro-head,.bws-rc-head,.bws-dm-head,.bws-dem-workspace-header,.telemetry-dashboard-panel > header){ padding: 16px 20px !important; min-height: 60px; border-radius: 0; }
body.hka-modern-nav.hka-modern-nav :is(.bws-hydro-body,.data-tools-body,.bws-rc-body,.bws-dm-body,.na-body,.flood-scenario-body){ background: #fff !important; padding: 16px 20px !important; min-width: 0; }
body.hka-modern-nav.hka-modern-nav :is(.dfa-section,.na-section,.bws-rc-card,.bws-rc-controls,.bws-hydro-chart-card,.data-range-chart-card,.export-data-section,.coord-step-card,.bws-terrain-manual-card,.bws-region-dem-card,.bws-georef-upload,.na-step){
  border: 1px solid var(--hka-line) !important; border-radius: 10px !important;
  background: #fff !important; box-shadow: none !important; margin: 0 0 16px;
}
body.hka-modern-nav.hka-modern-nav :is(.dfa-section-head,.na-section-head,.coord-step-heading){
  background: var(--hka-soft) !important; color: var(--hka-muted) !important; border-bottom: 1px solid var(--hka-line);
  padding: 12px 14px !important; min-height: 0;
}
body.hka-modern-nav :is(.dfa-section-head > div > span,.na-section-head > span,.coord-step-number){ display: none !important; }
body.hka-modern-nav.hka-modern-nav :is(.dfa-grid-main,.dfa-params,.na-grid,.coord-grid,.bws-hydro-controls,.flood-form-grid,.bws-georef-upload-grid,.bws-region-dem-grid){
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important;
}
body.hka-modern-nav :is(.dfa-span-4,.na-span-2,.bws-terrain-span-2,.bws-hydro-source-checks){ grid-column: 1 / -1; }
body.hka-modern-nav.hka-modern-nav :is(.dfa-field,.na-field,.bws-rc-field,.flood-field,.coord-field,.bws-terrain-field,.export-file-field,.spi-control-group){
  min-width: 0; gap: 7px; color: var(--hka-muted); font-size: 12px; font-weight: 550;
}
body.hka-modern-nav.hka-modern-nav :is(.hka-workflow-ready,.coord-panel,.data-range-panel,.quick-search,.menu-auth-dialog) :is(
  input[type="text"], input[type="search"], input[type="number"], input[type="date"],
  input[type="password"], input:not([type]), select, textarea
){ box-sizing: border-box; width: 100%; min-width: 0; min-height: 42px; padding: 10px 12px !important;
  background: #fff !important; color: var(--hka-navy); border: 1px solid var(--hka-line) !important;
  border-radius: 8px !important; box-shadow: none !important; font: 400 13px/1.45 var(--hka-font); }
body.hka-modern-nav.hka-modern-nav :is(input,select,textarea):focus-visible{
  outline: 3px solid #a6c4e1; outline-offset: 1px;
}
body.hka-modern-nav :is(input[type="checkbox"],input[type="radio"],input[type="range"]){ accent-color: var(--hka-primary); }
body.hka-modern-nav.hka-modern-nav :is(.hka-step-actions,.na-actions,.bws-rc-actions,.bws-rc-export,.bws-sync-toolbar-actions,.flood-action-row,.flood-layer-actions,.bws-terrain-manual-actions,.bws-region-dem-actions,.bws-georef-upload-actions,.station-export-selection-actions,.export-data-actions){ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.hka-modern-nav.hka-modern-nav :is(.hka-step-actions,.na-actions,.bws-rc-actions,.bws-rc-export,.bws-sync-toolbar-actions,.flood-action-row,.flood-layer-actions,.bws-terrain-manual-actions,.bws-region-dem-actions,.bws-georef-upload-actions,.station-export-selection-actions,.export-data-actions) > button,
body.hka-modern-nav.hka-modern-nav .hka-named-tool{
  box-sizing: border-box; min-height: 40px; width: auto; padding: 10px 14px !important;
  border: 1px solid var(--hka-line) !important; border-radius: 8px !important;
  background: #fff !important; color: var(--hka-muted) !important; box-shadow: none !important;
  font: 600 12px/1.4 var(--hka-font); cursor: pointer;
}
body.hka-modern-nav.hka-modern-nav :is(.hka-step-actions,.na-actions,.flood-action-row,.bws-terrain-manual-actions,.bws-georef-upload-actions) > button:is(.primary,.flood-run,.bws-terrain-primary,#spiRunButton){ background: var(--hka-primary) !important; border-color: var(--hka-primary) !important; color: #fff !important; }
body.hka-modern-nav button:disabled{ cursor: not-allowed; }
body.hka-modern-nav .hka-step-actions{ padding: 12px 0; }

/* Only these owned wrappers control workflow visibility; child hidden state is untouched. */
body.hka-modern-nav .hka-workflow-ready{ min-width: 0; }
body.hka-modern-nav .hka-workflow-tabs{
  position: sticky; top: 0; z-index: 8; display: flex; gap: 5px; flex: 0 0 auto;
  padding: 7px; margin: 0 0 18px; max-width: 100%; min-width: 0;
  overflow-x: auto; background: #f0f4f7; border: 1px solid var(--hka-line); border-radius: 10px;
  scrollbar-width: thin;
}
body.hka-modern-nav .hka-workflow-tab{
  flex: 1 0 auto; min-height: 40px; padding: 9px 16px; border: 1px solid transparent;
  background: none; color: #536779; border-radius: 7px; white-space: nowrap;
  font: 600 13px/1.45 var(--hka-font); cursor: pointer;
}
body.hka-modern-nav .hka-workflow-tab[aria-selected="true"]{
  background: #fff; color: #173f6b; border-color: #dce6ec; box-shadow: 0 2px 4px #152b3d08;
}
body.hka-modern-nav .hka-workflow-tab:disabled{ color: #83909e; background: none; opacity: .75; }
body.hka-modern-nav .hka-workflow-content{ display: block; min-width: 0; }
body.hka-modern-nav .hka-workflow-pane{ min-width: 0; padding: 0; margin: 0; outline-offset: 3px; }
body.hka-modern-nav .hka-workflow-pane > :last-child{ margin-bottom: 0; }
body.hka-modern-nav .hka-form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
body.hka-modern-nav .hka-form-grid > :only-child{ grid-column: 1 / -1; }
body.hka-modern-nav .hka-form-grid :is(.spi-control-group,.bws-rc-field){ display: flex; flex-direction: column; align-items: stretch; }
body.hka-modern-nav .hka-tab-section > summary{ display: none !important; }
body.hka-modern-nav .hka-advanced{ margin-top: 14px; border-top: 1px solid var(--hka-line); padding-top: 12px; }
body.hka-modern-nav .hka-advanced > summary{ color: #536779; font-size: 12px; font-weight: 600; cursor: pointer; }
body.hka-modern-nav .hka-advanced > .hka-form-grid{ margin-top: 14px; }
body.hka-modern-nav #dependableFlowPanel > .hka-workflow-tabs,
body.hka-modern-nav #spiPanel > .hka-workflow-tabs,
body.hka-modern-nav #exportDataPanel > .hka-workflow-tabs{ margin: 16px 18px; }
body.hka-modern-nav :is(#dependableFlowPanel,#spiPanel,#exportDataPanel) > .hka-workflow-content{ padding: 0 18px 20px; }
body.hka-modern-nav .hka-workflow-pane :is(.bws-rc-output,.bws-hydro-chart-card){ width: auto; min-width: 0; }
body.hka-modern-nav.hka-modern-nav .bws-hydro-analysis-view.hka-workflow-ready{ display: block; }

/* Data Center: quick tools have names; downloads and map layers use separate tabs. */
body.hka-modern-nav.hka-modern-nav .hka-data-center-ready :is(.export-mode-selector,#manualShpToolIconButton){ display: none !important; }
body.hka-modern-nav .hka-data-tools{ display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px 0; }
body.hka-modern-nav.hka-modern-nav .hka-named-tool{ display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
body.hka-modern-nav .hka-named-tool svg{ width: 17px; height: 17px; flex: 0 0 17px; }
body.hka-modern-nav.hka-modern-nav .hka-data-center-ready .export-product-tabs{ margin: 0 0 16px !important; padding: 0 0 10px !important; background: #fff !important; }
body.hka-modern-nav.hka-modern-nav .hka-data-center-ready .export-product-tab{ padding: 8px 12px !important; }
body.hka-modern-nav.hka-modern-nav :is(.bws-availability-tabs,.bws-hydro-tabs,.bws-sync-category-tabs,.bws-dem-download-mode,.flood-scenario-mode,.coord-format-switch){
  gap: 6px; background: var(--hka-soft) !important; box-shadow: none !important;
}
body.hka-modern-nav.hka-modern-nav :is(.bws-sync-cards){ gap: 12px; }
body.hka-modern-nav.hka-modern-nav .bws-sync-card{ box-shadow: none !important; border-radius: 10px !important; }
body.hka-modern-nav .bws-sync-list-tools{ display: grid; gap: 12px; margin: 12px 0; }

/* Monitoring uses a compact, searchable list without changing row click handlers. */
body.hka-modern-nav .hka-list-search{ padding: 12px 16px; }
body.hka-modern-nav .hka-list-search input{ box-sizing: border-box; width: 100%; min-height: 40px; padding: 10px 12px; border: 1px solid var(--hka-line); border-radius: 8px; background: #fff; color: var(--hka-navy); font: 400 13px/1.4 var(--hka-font); }
body.hka-modern-nav .hka-list-empty{ padding: 22px 16px; text-align: center; color: var(--hka-muted); font-size: 13px; }
body.hka-modern-nav [data-hka-list-filtered="true"]{ display: none !important; }
body.hka-modern-nav.hka-modern-nav .bws-availability-row{
  margin: 0 !important; padding: 14px 16px !important; border: 0 !important;
  border-bottom: 1px solid #e8eef3 !important; border-radius: 0 !important; box-shadow: none !important;
}
body.hka-modern-nav .bws-availability-row:hover{ background: var(--hka-soft) !important; }
body.hka-modern-nav .data-range-years{ font-variant-numeric: tabular-nums; color: var(--hka-muted); font-size: 12px; }
body.hka-modern-nav.hka-modern-nav .hka-telemetry-close{ display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid #dce5ec; border-radius: 8px; color: var(--hka-muted); background: var(--hka-soft); font: 24px/1 var(--hka-font); cursor: pointer; }
body.hka-modern-nav.hka-modern-nav .telemetry-dashboard-panel > header{ gap: 8px; }
body.hka-modern-nav .telemetry-dashboard-panel > header h2{ flex: 1; }
body.hka-modern-nav.hka-modern-nav .telemetry-dashboard-panel{ max-height: min(70dvh, 680px); }
body.hka-modern-nav.hka-modern-nav .telemetry-dashboard-list{ max-height: calc(min(70dvh, 680px) - 132px); }
body.hka-modern-nav.hka-modern-nav .telemetry-dashboard-row{ border-radius: 10px !important; box-shadow: none !important; }

/* DEM has Area → Model → Upload → Unduh, preserving the separate 3D viewer. */
body.hka-modern-nav.hka-modern-nav .bws-dem-workspace-shell{ box-shadow: var(--hka-shadow); font-family: var(--hka-font); overflow: hidden; }
body.hka-modern-nav.hka-modern-nav .bws-dem-workspace-content{ padding: 16px 20px; background: #fff; }
body.hka-modern-nav.hka-modern-nav #bwsTerrainPanel{ margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.hka-modern-nav #bwsTerrainPanel > .bws-terrain-head{ display: none !important; }
body.hka-modern-nav.hka-modern-nav :is(.bws-terrain-manual-card,.bws-region-dem-card,.bws-georef-upload){ padding: 14px; }
body.hka-modern-nav .bws-terrain-status{ margin: 10px 0 14px; line-height: 1.5; }
body.hka-modern-nav.hka-modern-nav #coordPanel .coord-tool-header{ padding: 8px 0 14px !important; border: 0 !important; }
body.hka-modern-nav.hka-modern-nav #coordPanel .coord-step-card{ padding: 14px; }
body.hka-modern-nav #coordPanel .hka-upload-panel-actions{ border-bottom: 1px solid var(--hka-line); margin-bottom: 14px; }
body.hka-modern-nav.hka-modern-nav .menu-auth-dialog{ max-width: 420px; padding: 28px; }
body.hka-modern-nav.hka-modern-nav :is(.dt-table,.dfa-table,.na-table,.spi-result-table,.bws-dm-table-wrap table) th{
  background: #f5f7fa !important; color: #536779 !important; font-size: 11px; font-weight: 600;
}

@media (min-width: 1025px) {
  body.hka-modern-nav.hka-modern-nav :is(#dependableFlowPanel,#waterBalanceEnginePanel,#demAnalysisPanel,#spiPanel){
    width: 860px !important;
  }
}
@media (max-width: 700px) {
  body.hka-modern-nav .hka-form-grid,
body.hka-modern-nav.hka-modern-nav :is(.dfa-grid-main,.dfa-params,.na-grid,.coord-grid,.bws-hydro-controls,.flood-form-grid,.bws-georef-upload-grid,.bws-region-dem-grid){
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.hka-modern-nav .hka-workflow-tab{ flex: 1 0 auto; min-height: 44px; padding: 9px 12px; font-size: 12px; }
  body.hka-modern-nav .hka-workflow-tabs{ margin-bottom: 14px; padding: 5px; }
  body.hka-modern-nav.hka-modern-nav :is(.bws-hydro-body,.bws-rc-body,.na-body,.flood-scenario-body,.bws-dem-workspace-content){ padding: 12px !important; }
  body.hka-modern-nav.hka-modern-nav :is(.hka-workflow-ready,.coord-panel,.hka-list-search) :is(input,select,textarea){ font-size: 16px !important; }
  body.hka-modern-nav.hka-modern-nav :is(.dfa-span-2,.dfa-span-4,.na-span-2,.bws-terrain-span-2){ grid-column: 1 / -1 !important; }
  body.hka-modern-nav .hka-data-tools{ padding: 12px 12px 0; }
  body.hka-modern-nav :is(#dependableFlowPanel,#spiPanel,#exportDataPanel) > .hka-workflow-tabs{ margin: 12px; }
  body.hka-modern-nav :is(#dependableFlowPanel,#spiPanel,#exportDataPanel) > .hka-workflow-content{ padding: 0 12px 16px; }
}
body.hka-modern-nav.hka-modern-nav [hidden],
body.hka-modern-nav.hka-modern-nav .hka-workflow-pane[hidden]{ display: none !important; }

/* Revisi 4.0 — navy, white and gold; opaque navigation and archive detail. */
body.hka-modern-nav{
  --hka-navy: #163652; --hka-teal: #174875; --hka-muted: #596d82;
  --hka-line: #dce4ed; --hka-soft: #f3f6fa; --hka-surface: #fff;
  --hka-gold: #d7ad4b; --hka-shadow: 0 12px 36px #172f4817;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-drawer{
  background: #102e50 !important; background-image: none !important; opacity: 1 !important;
  border: 1px solid #102e50 !important; border-top: 4px solid var(--hka-gold) !important;
  border-radius: 12px; box-shadow: 0 12px 32px #112b4929;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-brand{
  justify-content: flex-start; gap: 10px; padding: 2px 3px 18px; margin-bottom: 14px;
  border-bottom: 1px solid #35516d;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-brand-logo{
  box-sizing: border-box; width: 44px; height: 44px; padding: 4px;
  border-radius: 7px; background: #fff; flex: 0 0 44px;
}
#bwsUnifiedMenu .hka-brand-name{ min-width: 0; flex: 1; color: #fff; }
#bwsUnifiedMenu .hka-brand-name strong{ display: block; font: 700 14px/1.35 var(--hka-font); letter-spacing: .2px; color: #fff; }
#bwsUnifiedMenu .hka-brand-name > span{ display: block; font: 500 12px/1.45 var(--hka-font); color: #dce6f2; white-space: nowrap; }
body.hka-modern-nav #bwsUnifiedMenu .hka-logo-fallback{ color: #fff; font-size: 10px; max-width: 44px; text-align: center; }
body.hka-modern-nav #bwsUnifiedMenu :is(.hka-nav-collapse,.hka-nav-close){ color: #dce6f2; background: #1d4065; border-color: #3c5c7b; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature-search{ background: #1b3c60; border-color: #3c5c7b; border-radius: 7px; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature-search :is(input,svg,kbd,button){ color: #e1ebf5; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature-search input::placeholder{ color: #c4d4e5; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature-search kbd{ border-color: #53708c; }
body.hka-modern-nav #bwsUnifiedMenu #bwsPublicSearchButton.hka-map-search{
  background: #23486f !important; border: 1px solid #466587; color: #f3f7fc;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-group-title{ color: #b7c9dd; letter-spacing: .9px; }
body.hka-modern-nav #bwsUnifiedMenu .hka-group-title:hover{ color: #fff; background: #1b3c60; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items{ scrollbar-color: #57728c transparent; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature{
  color: #d4e0ec !important; background: transparent !important;
  border: 1px solid transparent; border-left-width: 3px; border-radius: 7px;
}
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature .hka-feature-label{ color: #e4ecf5 !important; font-weight: 500; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature .hka-feature-icon{ color: #bfcee0 !important; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature:hover{ background: #1b3c60 !important; }
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature.hka-is-active{
  background: #284d75 !important; border-color: #284d75; border-left-color: var(--hka-gold);
}
body.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature.hka-is-active :is(.hka-feature-icon,.hka-feature-label){ color: #fff !important; }
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-footer{ border-top: 1px solid #35516d; margin-top: 6px; padding-top: 12px; }
body.hka-modern-nav #bwsUnifiedMenu .hka-login-button{ color: #102e50; background: #fff; border-color: #fff; border-radius: 7px; }
body.hka-modern-nav #bwsUnifiedMenu [data-bws-menu-logout]{ color: #e4edf6 !important; background: #1b3c60 !important; border-color: #35516d !important; }
body.hka-modern-nav #bwsUnifiedMenuToggle{ background: #102e50 !important; color: #fff !important; border: 1px solid var(--hka-gold) !important; }

/* Shared controls across data, analyses, upload, 3D, settings and sign-in. */
body.hka-modern-nav.hka-modern-nav :is(.hka-workflow-tabs,.bws-availability-tabs,.bws-hydro-tabs,.bws-sync-category-tabs,.data-tools-tabs,.export-product-tabs,.bws-dem-download-mode,.flood-scenario-mode,.coord-format-switch){ background: var(--hka-soft) !important; }
body.hka-modern-nav.hka-modern-nav :is(.hka-workflow-tabs,.bws-availability-tabs,.bws-hydro-tabs,.bws-sync-category-tabs,.data-tools-tabs,.export-product-tabs,.bws-dem-download-mode,.flood-scenario-mode,.coord-format-switch) > button{
  color: var(--hka-muted) !important; border-radius: 6px !important; box-shadow: none !important;
}
body.hka-modern-nav.hka-modern-nav :is(.hka-workflow-tabs,.bws-availability-tabs,.bws-hydro-tabs,.bws-sync-category-tabs,.data-tools-tabs,.export-product-tabs,.bws-dem-download-mode,.flood-scenario-mode,.coord-format-switch) > button:is(.active,.is-active,.is-selected,[aria-selected="true"],[aria-pressed="true"]){ color: var(--hka-navy) !important; background: #fff !important; border-color: var(--hka-line) !important; box-shadow: inset 0 -2px var(--hka-gold) !important; }
body.hka-modern-nav.hka-modern-nav :is(.hka-workflow-ready,.data-range-panel,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.coord-panel,.bws-terrain-panel,.bws-lc-panel,.bws-rain-panel,.menu-auth-dialog) :is(button.primary,button.bws-hydro-primary,button.na-btn.primary,button.bws-terrain-primary,button.bws-rc-btn.primary,button.dt-btn.primary,button.flood-run,#spiRunButton,.menu-auth-submit){ color: #fff !important; background: var(--hka-primary) !important; border-color: var(--hka-primary) !important; box-shadow: none !important; }
body.hka-modern-nav.hka-modern-nav :is(input,select,textarea):focus-visible{ outline-color: #9bbcdf !important; }
body.hka-modern-nav :is(input[type="checkbox"],input[type="radio"],input[type="range"]){ accent-color: var(--hka-primary); }
body.hka-modern-nav.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.flood-scenario-head,.bws-hydro-head,.bws-rc-head,.bws-dm-head,.bws-dem-workspace-header,.telemetry-dashboard-panel > header) :is(h2,h3,h4){ color: var(--hka-navy) !important; font-weight: 650 !important; }
body.hka-modern-nav.hka-modern-nav :is(.dfa-section-head,.na-section-head,.coord-step-heading,.bws-terrain-manual-head,.bws-region-dem-head,.bws-georef-upload-head){ background: var(--hka-soft) !important; color: var(--hka-muted) !important; }
body.hka-modern-nav.hka-modern-nav :is(.dt-table,.dfa-table,.na-table,.spi-result-table,.bws-dm-table-wrap table) th{ background: var(--hka-hover) !important; color: var(--hka-muted) !important; }
body.hka-modern-nav.hka-modern-nav :is(.menu-auth-dialog,.bws-sync-card,.bws-rc-card,.bws-dm-card,.bws-terrain-manual-card,.bws-region-dem-card){ border-color: var(--hka-line) !important; }
body.hka-modern-nav .bws-availability-row:hover{ background: var(--hka-hover) !important; }
body.hka-modern-nav .bws-availability-row::after{ content: '›'; color: var(--hka-muted); font-size: 23px; margin-left: 10px; }
body.hka-modern-nav .bws-availability-row .data-range-name-wrap{ flex: 1; min-width: 0; }

/* Station → year → 12 months. Real status is text as well as colour. */
body.hka-modern-nav.hka-modern-nav .data-range-panel.hka-availability-detail-open{ width: 820px !important; }
body.hka-modern-nav.hka-modern-nav .hka-availability-detail-open > :is(.bws-availability-tabs,.hka-list-search,#dataRangeList,.hka-list-empty){ display: none !important; }
body.hka-modern-nav.hka-modern-nav .hka-availability-detail-open #bwsOpenHydrologyData{ display: none !important; }
body.hka-modern-nav .hka-coverage-detail{ padding: 16px 20px 22px; font: 400 13px/1.5 var(--hka-font); color: var(--hka-navy); }
body.hka-modern-nav .hka-coverage-toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
body.hka-modern-nav .hka-coverage-detail button{ min-height: 38px; padding: 8px 12px; border: 1px solid var(--hka-line); border-radius: 7px; background: #fff; color: var(--hka-navy); font: 600 12px/1.4 var(--hka-font); cursor: pointer; }
body.hka-modern-nav .hka-coverage-detail button:hover{ background: var(--hka-hover); }
body.hka-modern-nav .hka-coverage-detail button:disabled{ color: #718296; cursor: wait; opacity: .7; }
body.hka-modern-nav .hka-coverage-type{ color: var(--hka-muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .7px; }
body.hka-modern-nav .hka-coverage-heading h3{ margin: 4px 0 6px; color: var(--hka-navy); font: 650 22px/1.3 var(--hka-font); letter-spacing: -.35px; }
body.hka-modern-nav .hka-coverage-period{ font-size: 11px; color: var(--hka-muted); }
body.hka-modern-nav .hka-coverage-controls{ display: flex; gap: 12px; align-items: flex-end; margin: 20px 0 14px; flex-wrap: wrap; }
body.hka-modern-nav .hka-coverage-controls label{ flex: 1; min-width: 180px; display: grid; gap: 6px; color: var(--hka-muted); font-size: 12px; }
body.hka-modern-nav.hka-modern-nav .hka-coverage-controls select{ min-height: 40px; width: 100%; border: 1px solid var(--hka-line) !important; border-radius: 7px !important; background: #fff !important; color: var(--hka-navy) !important; }
body.hka-modern-nav .hka-coverage-status{ padding: 12px 14px; margin: 12px 0; border-radius: 8px; background: var(--hka-hover); color: var(--hka-muted); }
body.hka-modern-nav .hka-coverage-key{ display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0 0 14px; color: var(--hka-muted); font-size: 10px; }
body.hka-modern-nav .hka-coverage-key > span{ display: inline-flex; gap: 5px; align-items: center; }
body.hka-modern-nav .hka-coverage-key i{ display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
body.hka-modern-nav .hka-coverage-key [data-tone="complete"]{ background: var(--hka-primary); }
body.hka-modern-nav .hka-coverage-key [data-tone="partial"]{ background: var(--hka-warning); }
body.hka-modern-nav .hka-coverage-key [data-tone="empty"]{ background: #adb8c4; }
body.hka-modern-nav .hka-coverage-years{ display: grid; gap: 10px; }
body.hka-modern-nav .hka-year-row{ border: 1px solid var(--hka-line); border-radius: 10px; overflow: hidden; background: #fff; }
body.hka-modern-nav .hka-year-row > summary{ display: flex; align-items: center; gap: 14px; list-style: none; cursor: pointer; padding: 14px 16px; min-height: 34px; background: var(--hka-soft); }
body.hka-modern-nav .hka-year-row > summary::-webkit-details-marker{ display: none; }
body.hka-modern-nav .hka-year-row > summary::after{ content: '›'; display: inline-block; color: var(--hka-muted); font-size: 23px; transform: rotate(0); }
body.hka-modern-nav .hka-year-row[open] > summary::after{ transform: rotate(90deg); }
body.hka-modern-nav .hka-year-row[open] > summary{ border-bottom: 1px solid var(--hka-line); background: var(--hka-hover); }
body.hka-modern-nav .hka-year-name{ flex: 1; font-size: 17px; font-weight: 650; color: var(--hka-navy); font-variant-numeric: tabular-nums; }
body.hka-modern-nav .hka-year-metric{ display: flex; align-items: center; gap: 16px; font-variant-numeric: tabular-nums; }
body.hka-modern-nav .hka-year-percent{ font-size: 16px; color: var(--hka-navy); }
body.hka-modern-nav .hka-year-count{ min-width: 104px; color: var(--hka-muted); font-size: 11px; text-align: right; }
body.hka-modern-nav .hka-year-row[data-coverage-state="partial"] .hka-year-percent{ color: var(--hka-warning-text); }
body.hka-modern-nav .hka-year-row:is([data-coverage-state="empty"],[data-coverage-state="future"]) .hka-year-percent{ color: var(--hka-muted); }
body.hka-modern-nav .hka-year-body{ padding: 14px; }
body.hka-modern-nav .hka-month-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
body.hka-modern-nav .hka-month-cell{ border: 1px solid var(--hka-line); border-radius: 7px; padding: 12px 10px; background: #fff; min-width: 0; }
body.hka-modern-nav .hka-month-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: var(--hka-muted); font-variant-numeric: tabular-nums; }
body.hka-modern-nav .hka-month-head b{ font-size: 11px; font-weight: 600; }
body.hka-modern-nav .hka-month-head strong{ font-size: 15px; font-weight: 650; color: var(--hka-navy); }
body.hka-modern-nav .hka-month-meter{ height: 4px; overflow: hidden; margin: 10px 0 7px; border-radius: 3px; background: #e8eef4; }
body.hka-modern-nav .hka-month-meter > span{ display: block; height: 100%; border-radius: 3px; background: var(--hka-primary); }
body.hka-modern-nav .hka-month-count{ font-size: 10px; color: var(--hka-muted); font-variant-numeric: tabular-nums; }
body.hka-modern-nav .hka-month-cell[data-tone="partial"]{ border-color: var(--hka-warning-line); }
body.hka-modern-nav .hka-month-cell[data-tone="partial"] .hka-month-meter > span{ background: var(--hka-warning); }
body.hka-modern-nav .hka-month-cell[data-tone="partial"] strong{ color: var(--hka-warning-text); }
body.hka-modern-nav .hka-month-cell[data-tone="future"]{ background: var(--hka-soft); }
body.hka-modern-nav .hka-month-cell:is([data-tone="empty"],[data-tone="future"]) strong{ color: var(--hka-muted); }
body.hka-modern-nav .hka-coverage-warning{ color: #8f4637; background: #fff5f1; padding: 10px 12px; margin: 10px 0; border-radius: 7px; font-size: 12px; }
body.hka-modern-nav .hka-coverage-loading{ padding: 14px; color: var(--hka-muted); }
body.hka-modern-nav .hka-year-row[aria-busy="true"] > summary{ cursor: progress; }
@media (min-width: 1025px) {
  body.hka-modern-nav #bwsUnifiedMenu.hka-is-collapsed .hka-brand-name{ display: none; }
}
@media (max-width: 700px) {
  body.hka-modern-nav.hka-modern-nav .data-range-panel.hka-availability-detail-open{ width: auto !important; }
  body.hka-modern-nav .hka-coverage-detail{ padding: 14px 12px; }
  body.hka-modern-nav .hka-month-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.hka-modern-nav .hka-year-metric{ flex-direction: column; align-items: flex-end; gap: 2px; }
  body.hka-modern-nav .hka-year-count{ min-width: 0; }
  body.hka-modern-nav .hka-year-body{ padding: 10px; }
  body.hka-modern-nav .hka-coverage-controls label{ min-width: 100%; }
  body.hka-modern-nav.hka-modern-nav .hka-coverage-controls select{ font-size: 16px !important; }
}
body.hka-modern-nav.hka-modern-nav [hidden]{ display: none !important; }

/* Revisi 4.1 — county headings reuse the professional palette. */
body.hka-modern-nav #dataRangeList{ display: grid; gap: 12px; }
body.hka-modern-nav .hka-county-group{ min-width: 0; border: 1px solid var(--hka-line); border-radius: 9px; overflow: hidden; background: #fff; }
body.hka-modern-nav .hka-county-heading{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 14px; background: var(--hka-hover); border-bottom: 1px solid var(--hka-line); }
body.hka-modern-nav .hka-county-heading h3{ margin: 0; font: 650 13px/1.4 var(--hka-font); color: var(--hka-navy); }
body.hka-modern-nav .hka-county-count{ flex-shrink: 0; font: 500 10px/1.4 var(--hka-font); color: var(--hka-muted); font-variant-numeric: tabular-nums; }
body.hka-modern-nav .hka-county-rows{ display: grid; min-width: 0; }
body.hka-modern-nav.hka-modern-nav .hka-county-rows > .bws-availability-row{ border: 0 !important; border-bottom: 1px solid var(--hka-line) !important; border-radius: 0 !important; margin: 0; min-width: 0; }
body.hka-modern-nav .hka-county-rows > .bws-availability-row:last-child{ border-bottom: 0 !important; }
body.hka-modern-nav #bwsHydroEntity optgroup{ color: var(--hka-navy); font-weight: 650; background: var(--hka-soft); }
body.hka-modern-nav #bwsHydroEntity option{ color: var(--hka-navy); font-weight: 400; background: #fff; }
body.hka-modern-nav #bwsHydroSyncCards{ grid-template-columns: minmax(0, 1fr) !important; }
body.hka-modern-nav #bwsHydroSyncCards .hka-county-rows{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
body.hka-modern-nav #bwsHydroSyncCards .bws-sync-card{ margin: 0 !important; }
@media (max-width: 700px) {
  body.hka-modern-nav #bwsHydroSyncCards .hka-county-rows{ grid-template-columns: minmax(0, 1fr); padding: 10px; }
}

/* Revisi 4.2 — native county disclosures and a station picker. */
body.hka-modern-nav .hka-county-group > .hka-county-heading{
  list-style: none; cursor: pointer; user-select: none; min-height: 22px; border-bottom: 0;
}
body.hka-modern-nav .hka-county-heading::-webkit-details-marker{ display: none; }
body.hka-modern-nav .hka-county-heading h3{ flex: 1; min-width: 0; }
body.hka-modern-nav .hka-county-heading::after{
  content: '›'; flex: 0 0 auto; color: var(--hka-muted); font-size: 21px; line-height: 1; transform: rotate(0);
}
body.hka-modern-nav .hka-county-group[open] > .hka-county-heading{ border-bottom: 1px solid var(--hka-line); }
body.hka-modern-nav .hka-county-group[open] > .hka-county-heading::after{ transform: rotate(90deg); }
body.hka-modern-nav .hka-county-group > .hka-county-heading:hover{ background: var(--hka-hover); }
body.hka-modern-nav.hka-modern-nav .hka-county-group:not([open]) > .hka-county-rows{ display: none !important; }
body.hka-modern-nav.hka-modern-nav .hka-native-station-field{ display: none !important; }
body.hka-modern-nav .hka-county-picker{ grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
body.hka-modern-nav .hka-county-picker > legend{ padding: 0; margin: 0 0 7px; font: 600 12px/1.5 var(--hka-font); color: var(--hka-muted); }
body.hka-modern-nav .hka-selected-station{ color: var(--hka-navy); font: 650 14px/1.5 var(--hka-font); margin-bottom: 10px; }
body.hka-modern-nav .hka-county-picker-list{ display: grid; gap: 8px; max-height: 290px; overflow: auto; padding: 2px; scrollbar-width: thin; }
body.hka-modern-nav .hka-county-picker .hka-county-group{ flex-shrink: 0; }
body.hka-modern-nav .hka-county-station{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  min-height: 40px; margin: 0; width: 100%; padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--hka-line); border-radius: 0; box-shadow: none;
  color: var(--hka-muted); background: #fff; font: 500 12px/1.4 var(--hka-font); cursor: pointer;
}
body.hka-modern-nav .hka-county-station:last-child{ border-bottom: 0; }
body.hka-modern-nav .hka-county-station:hover{ background: var(--hka-soft); }
body.hka-modern-nav .hka-county-station[aria-pressed="true"]{ color: var(--hka-navy); background: var(--hka-hover); font-weight: 650; }
body.hka-modern-nav .hka-county-station[aria-pressed="true"]::after{ content: '✓'; color: var(--hka-primary); }
body.hka-modern-nav .hka-county-station:disabled{ cursor: not-allowed; opacity: .55; }

/* Revisi 4.2 — one badge per year, real daily completeness. */
body.hka-modern-nav.hka-modern-nav .bws-availability-row.hka-year-overview-row{ display: block !important; position: relative; padding: 13px 14px !important; }
body.hka-modern-nav.hka-modern-nav .bws-availability-row:is([hidden],[data-hka-list-filtered="true"]){ display: none !important; }
body.hka-modern-nav .hka-year-overview-row .data-range-name-wrap{ display: flex; padding-right: 18px; }
body.hka-modern-nav .hka-year-overview-row::after{ position: absolute; top: 10px; right: 14px; }
body.hka-modern-nav.hka-modern-nav .hka-year-overview-row .data-range-years{ display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 6px; width: 100%; max-width: none; margin: 10px 0 0; white-space: normal; }
body.hka-modern-nav .hka-year-badge{ display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--hka-line); border-radius: 6px; color: var(--hka-muted); background: var(--hka-soft); font-variant-numeric: tabular-nums; }
body.hka-modern-nav .hka-year-badge b{ font: 650 11px/1.3 var(--hka-font); color: inherit; }
body.hka-modern-nav .hka-year-badge small{ font: 550 10px/1.3 var(--hka-font); color: inherit; }
body.hka-modern-nav .hka-year-badge[data-state="complete"]{ background: var(--hka-success-bg); border-color: var(--hka-success-line); color: var(--hka-success-text); }
body.hka-modern-nav .hka-year-badge[data-state="partial"]{ background: var(--hka-warning-bg); border-color: var(--hka-warning-line); color: var(--hka-warning-text); }
body.hka-modern-nav .hka-year-badge[data-state="error"]{ border-style: dashed; color: #8b4b3b; background: #fff4ef; }
body.hka-modern-nav .hka-year-overview-status{ font-size: 11px; color: var(--hka-muted); }
body.hka-modern-nav .hka-overview-key{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 12px 18px 0; font: 500 11px/1.4 var(--hka-font); color: var(--hka-muted); }
body.hka-modern-nav .hka-overview-key span{ display: inline-flex; align-items: center; gap: 6px; }
body.hka-modern-nav .hka-overview-key span::before{ content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--hka-success); }
body.hka-modern-nav .hka-overview-key [data-state="partial"]::before{ background: var(--hka-warning); }
body.hka-modern-nav.hka-modern-nav .hka-availability-detail-open > .hka-overview-key{ display: none !important; }
body.hka-modern-nav .hka-coverage-key [data-tone="complete"],
body.hka-modern-nav .hka-month-cell[data-tone="complete"] .hka-month-meter > span{ background: var(--hka-success); }
body.hka-modern-nav .hka-month-cell[data-tone="complete"]{ border-color: var(--hka-success-line); background: var(--hka-success-bg); }
body.hka-modern-nav .hka-month-cell[data-tone="complete"] strong,
body.hka-modern-nav .hka-year-row[data-coverage-state="complete"] .hka-year-percent{ color: var(--hka-success-text); }

/* Revisi 4.2 — shared colour tokens for every interface. */
body.hka-modern-nav{
  --hka-navy: #173b60; --hka-primary: #174875; --hka-teal: var(--hka-primary);
  --hka-muted: #60778e; --hka-line: #dce4ed; --hka-soft: #f3f6fa; --hka-hover: #eef3f9;
  --hka-surface: #fff; --hka-gold: #d7ad4b; --hka-focus: #9bbcdf;
  --hka-success: #2b8749; --hka-success-text: #166534;
  --hka-success-bg: #e9f7ee; --hka-success-line: #abd7bb;
  --hka-warning: #d5a529; --hka-warning-text: #785709;
  --hka-warning-bg: #fff7d6; --hka-warning-line: #e6cc76;
  --hka-danger: #a13b35; --hka-danger-bg: #fff5f3; --hka-danger-line: #ebc9c5;
  --primary: var(--hka-primary); --primary-dark: var(--hka-navy); --primary-soft: var(--hka-hover);
  --surface: var(--hka-surface); --surface-solid: var(--hka-surface);
  --text-main: var(--hka-navy); --text-muted: var(--hka-muted); --border: var(--hka-line);
  --bws-hydro-navy: var(--hka-navy); --bws-hydro-teal: var(--hka-primary);
  --bws-hydro-teal-dark: var(--hka-navy); --bws-hydro-surface: var(--hka-surface);
  --bws-hydro-soft: var(--hka-soft); --bws-hydro-line: var(--hka-line);
  --bws-hydro-text: var(--hka-navy); --bws-hydro-muted: var(--hka-muted);
  --menu-auth-navy: var(--hka-navy); --menu-auth-blue: var(--hka-primary);
  --menu-auth-cyan: var(--hka-primary); --menu-auth-danger: var(--hka-danger);
  --bws-theme-bg: var(--hka-soft); --bws-theme-surface: var(--hka-surface);
  --bws-theme-surface-2: var(--hka-soft); --bws-theme-surface-3: var(--hka-hover);
  --bws-theme-text: var(--hka-navy); --bws-theme-muted: var(--hka-muted);
  --bws-theme-border: var(--hka-line); --bws-theme-primary: var(--hka-primary);
  --bws-theme-primary-strong: var(--hka-navy); --bws-theme-accent: var(--hka-gold);
  --bws-theme-header-start: var(--hka-navy); --bws-theme-header-end: var(--hka-navy);
  --bws-theme-on-primary: #fff; --bws-theme-focus: var(--hka-focus);
  --bws-theme-soft-primary: var(--hka-hover); --bws-theme-soft-accent: var(--hka-warning-bg);
  --bws-theme-table-head: var(--hka-soft); --bws-theme-input-bg: var(--hka-surface);
  --bws-v3-navy-950: #102e50; --bws-v3-navy-900: var(--hka-navy); --bws-v3-navy-800: var(--hka-navy);
  --bws-v3-blue-700: var(--hka-primary); --bws-v3-blue-600: var(--hka-primary);
  --bws-v3-cyan-600: var(--hka-primary); --bws-v3-teal-600: var(--hka-primary);
  --bws-v3-ink: var(--hka-navy); --bws-v3-muted: var(--hka-muted);
  --bws-v3-line: var(--hka-line); --bws-v3-line-strong: var(--hka-line);
  --bws-v3-canvas: var(--hka-soft); --bws-v3-surface: var(--hka-surface); --bws-v3-surface-soft: var(--hka-soft);
}
body.hka-modern-nav.hka-modern-nav :where(.hka-workflow-ready,.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.bws-dem-workspace-shell,.bws-terrain-panel,.bws-lc-panel,.bws-rain-panel,.menu-auth-dialog,.telemetry-dashboard-panel,.das-multi-export-panel) :is(h2,h3,h4,legend){ color: var(--hka-navy) !important; }
body.hka-modern-nav.hka-modern-nav :where(.hka-workflow-ready,.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.bws-dem-workspace-shell,.bws-terrain-panel,.bws-lc-panel,.bws-rain-panel,.menu-auth-dialog,.telemetry-dashboard-panel,.das-multi-export-panel) :is(th,thead td){ background: var(--hka-soft) !important; color: var(--hka-navy) !important; border-color: var(--hka-line) !important; }
body.hka-modern-nav.hka-modern-nav :where(.hka-workflow-ready,.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.bws-dem-workspace-shell,.bws-terrain-panel,.bws-lc-panel,.bws-rain-panel,.menu-auth-dialog,.telemetry-dashboard-panel,.das-multi-export-panel) :is(td,tbody){ border-color: var(--hka-line) !important; }
body.hka-modern-nav.hka-modern-nav :where(.hka-workflow-ready,.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.bws-dem-workspace-shell,.bws-terrain-panel,.bws-lc-panel,.bws-rain-panel,.menu-auth-dialog,.telemetry-dashboard-panel,.das-multi-export-panel) button{ color: var(--hka-navy); background-color: var(--hka-surface); border-color: var(--hka-line); }
body.hka-modern-nav.hka-modern-nav :where(.hka-workflow-ready,.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.bws-dem-workspace-shell,.bws-terrain-panel,.bws-lc-panel,.bws-rain-panel,.menu-auth-dialog,.telemetry-dashboard-panel,.das-multi-export-panel) :is(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], select, textarea){ color: var(--hka-navy) !important; background: var(--hka-surface) !important; border-color: var(--hka-line) !important; }
body.hka-modern-nav.hka-modern-nav :is(.bws-sync-run,.bws-sync-run-all,.bws-hydro-primary,.menu-auth-submit,.spi-run-button,.flood-run){
  color: #fff !important; background: var(--hka-primary) !important; border-color: var(--hka-primary) !important; box-shadow: none !important;
}
body.hka-modern-nav.hka-modern-nav .menu-auth-button{
  color: var(--hka-navy) !important; background: #fff !important; border-color: var(--hka-line) !important; box-shadow: none !important;
}
body.hka-modern-nav.hka-modern-nav .menu-auth-button.is-authenticated{ background: var(--hka-primary) !important; color: #fff !important; }
body.hka-modern-nav.hka-modern-nav :is(.bws-hydro-source-checks,.bws-sync-summary,.bws-sync-list-tools,.bws-rain-grid-summary){
  color: var(--hka-navy) !important; background: var(--hka-soft) !important; border-color: var(--hka-line) !important;
}
body.hka-modern-nav.hka-modern-nav :is(.bws-hydro-chart-types,.bws-dem-download-mode,.flood-scenario-mode,.coord-format-switch) > button{
  color: var(--hka-muted) !important; background: var(--hka-soft) !important; border-color: var(--hka-line) !important;
}
body.hka-modern-nav.hka-modern-nav :is(.bws-hydro-chart-types,.bws-dem-download-mode,.flood-scenario-mode,.coord-format-switch) > button:is(.active,.is-active,[aria-pressed="true"],[aria-selected="true"]){
  color: var(--hka-navy) !important; background: #fff !important; border-color: var(--hka-line) !important; box-shadow: inset 0 -2px var(--hka-gold) !important;
}
body.hka-modern-nav.hka-modern-nav :is(.dt-btn.danger,.na-btn.danger,.bws-dm-btn.danger,.coord-clear-button,.upload-clear-button,.menu-auth-logout){
  color: var(--hka-danger) !important; background: var(--hka-danger-bg) !important; border-color: var(--hka-danger-line) !important;
}
body.hka-modern-nav.hka-modern-nav :is(input,select,textarea,button,summary):focus-visible{ outline-color: var(--hka-focus) !important; }
body.hka-modern-nav .hka-month-cell[data-tone="partial"]{ background: var(--hka-warning-bg); }
body.hka-modern-nav .hka-year-row[data-coverage-state="complete"] > summary{ background: var(--hka-success-bg); }
body.hka-modern-nav .hka-year-row[data-coverage-state="partial"] > summary{ background: var(--hka-warning-bg); }

/* Revisi 4.4 — one aligned set of map tools, using the shared palette. */
body.hka-modern-nav{
  --hka-map-tool-size: 44px; --hka-map-tool-step: 52px;
  --hka-map-tool-right: max(18px, env(safe-area-inset-right, 0px));
  --hka-map-tool-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 18px));
}
body.hka-modern-nav .hka-main-map .leaflet-control-zoom{ display: none !important; }
body.hka-modern-nav .hka-main-map .bws-user-location-control{
  position: fixed !important; right: var(--hka-map-tool-right) !important;
  bottom: calc(var(--hka-map-tool-bottom) + var(--hka-map-tool-step)) !important;
  top: auto !important; left: auto !important; margin: 0 !important;
}
body.hka-modern-nav .hka-map-tools{
  position: fixed; right: var(--hka-map-tool-right); bottom: var(--hka-map-tool-bottom);
  margin: 0; z-index: 1050; pointer-events: auto;
}
body.hka-modern-nav.hka-modern-nav :is(#telemetryDashboardToggle,#bwsUserLocationButton,#hkaDirectionToggle,#hkaDisplayToggle,.hka-main-map .leaflet-control-layers-toggle){
  box-sizing: border-box; display: grid !important; place-items: center; width: var(--hka-map-tool-size) !important;
  height: var(--hka-map-tool-size) !important; min-width: 0; min-height: 0; margin: 0; padding: 11px !important;
  border: 1px solid var(--hka-line) !important; border-radius: 11px !important;
  background: var(--hka-surface) !important; background-image: none !important;
  color: var(--hka-primary) !important; box-shadow: 0 4px 16px #102e501a !important;
  text-decoration: none; cursor: pointer; transform: none !important; opacity: 1; backdrop-filter: none;
}
body.hka-modern-nav.hka-modern-nav :is(#telemetryDashboardToggle,#bwsUserLocationButton,#hkaDirectionToggle,#hkaDisplayToggle,.hka-main-map .leaflet-control-layers-toggle) svg{
  width: 21px; height: 21px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
body.hka-modern-nav.hka-modern-nav :is(#telemetryDashboardToggle,#bwsUserLocationButton,#hkaDirectionToggle,#hkaDisplayToggle,.hka-main-map .leaflet-control-layers-toggle):hover{ background: var(--hka-hover) !important; }
body.hka-modern-nav.hka-modern-nav :is(#telemetryDashboardToggle[aria-expanded="true"],#bwsUserLocationButton.is-active,#hkaDirectionToggle[aria-pressed="true"],#hkaDisplayToggle[aria-expanded="true"],.hka-main-map .leaflet-control-layers-toggle[aria-expanded="true"]){
  background: var(--hka-primary) !important; border-color: var(--hka-primary) !important; color: #fff !important;
  box-shadow: inset 0 -3px var(--hka-gold), 0 4px 16px #102e501a !important;
}
body.hka-modern-nav.hka-modern-nav #bwsUserLocationButton.is-error{ color: var(--hka-danger) !important; background: var(--hka-danger-bg) !important; border-color: var(--hka-danger-line) !important; }
body.hka-modern-nav #bwsUserLocationButton .bws-location-status-dot{ display: none; }
body.hka-modern-nav #hkaDirectionToggle:disabled{ opacity: .5; cursor: wait; }
body.hka-modern-nav #hkaDirectionToggle.is-loading svg{ animation: hka-direction-spin 1.4s linear infinite; }
body.hka-modern-nav.hka-modern-nav :is(#telemetryDashboardToggle,#bwsUserLocationButton,#hkaDirectionToggle,#hkaDisplayToggle,.hka-main-map .leaflet-control-layers-toggle):focus-visible{ outline: 3px solid var(--hka-focus) !important; outline-offset: 3px; }
body.hka-modern-nav.hka-modern-nav :is(#telemetryDashboardToggle,#bwsUserLocationButton,#hkaDirectionToggle,#hkaDisplayToggle,.hka-main-map .leaflet-control-layers-toggle):is([hidden],.menu-auth-denied,[aria-hidden="true"]){ display: none !important; }
body.hka-modern-nav.hka-modern-nav #telemetryDashboardShell{
  position: fixed !important; top: auto !important; left: auto !important;
  right: var(--hka-map-tool-right) !important;
  bottom: calc(var(--hka-map-tool-bottom) + 3 * var(--hka-map-tool-step)) !important;
  width: var(--hka-map-tool-size); height: var(--hka-map-tool-size); z-index: 1650;
}
body.hka-modern-nav.hka-modern-nav #telemetryDashboardPanel{
  position: absolute; right: calc(var(--hka-map-tool-size) + 12px); bottom: 0; top: auto;
  width: min(396px, calc(100vw - 96px)); max-height: min(65dvh, calc(100dvh - 212px));
  margin: 0; border: 1px solid var(--hka-line) !important; border-radius: 12px !important;
  box-shadow: var(--hka-shadow) !important; transform-origin: bottom right;
}
body.hka-modern-nav #telemetryDashboardPanel .telemetry-dashboard-list{ max-height: min(56dvh, calc(100dvh - 270px)); }
body.hka-modern-nav.hka-modern-nav .hka-main-map .leaflet-control-layers{
  position: fixed !important; right: var(--hka-map-tool-right) !important;
  bottom: calc(var(--hka-map-tool-bottom) + 2 * var(--hka-map-tool-step)) !important;
  top: auto !important; left: auto !important; box-sizing: border-box;
  width: var(--hka-map-tool-size); min-height: var(--hka-map-tool-size); height: auto;
  max-width: calc(100vw - 32px); margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; pointer-events: none;
}
body.hka-modern-nav .hka-main-map .leaflet-control-layers-toggle{ pointer-events: auto; }
body.hka-modern-nav.hka-modern-nav .hka-main-map .leaflet-control-layers-expanded{ width: min(352px, calc(100vw - 32px)); }
body.hka-modern-nav .hka-main-map .leaflet-control-layers-expanded .leaflet-control-layers-toggle{ position: absolute; bottom: 0; right: 0; }
body.hka-modern-nav.hka-modern-nav .hka-main-map .leaflet-control-layers-expanded .leaflet-control-layers-list{
  box-sizing: border-box; margin-right: calc(var(--hka-map-tool-size) + 12px); padding: 14px;
  max-height: min(65dvh, calc(100dvh - 180px)); height: auto !important; overflow: auto; pointer-events: auto;
  background: var(--hka-surface); color: var(--hka-navy); border: 1px solid var(--hka-line);
  border-radius: 12px; box-shadow: var(--hka-shadow); font: 500 12px/1.6 var(--hka-font);
}
body.hka-modern-nav .hka-main-map .leaflet-control-layers-expanded::after{ content: ''; position: absolute; right: var(--hka-map-tool-size); bottom: 0; width: 12px; height: var(--hka-map-tool-size); pointer-events: auto; }
body.hka-modern-nav .hka-main-map .leaflet-control-layers-list label{ margin: 3px 0; color: var(--hka-navy); }
/* Remove automatic location captions, but retain actionable GPS error messages. */
body.hka-modern-nav .bws-user-location-notice:not(.is-error),
body.hka-modern-nav .bws-location-leaflet-popup{ display: none !important; }
body.hka-modern-nav .bws-user-location-marker-pulse{ background: #17487526; }
body.hka-modern-nav .bws-user-location-marker-dot{ background: var(--hka-primary); box-shadow: 0 2px 9px #102e5030; }
body.hka-modern-nav .hka-location-arrow{
  position: absolute; inset: -2px; display: none; place-items: center;
  color: var(--hka-primary); transform: rotate(var(--hka-device-heading, 0deg));
  filter: drop-shadow(0 2px 3px #102e5030); pointer-events: none;
}
body.hka-modern-nav .hka-location-arrow svg{ width: 34px; height: 34px; fill: var(--hka-primary); stroke: #fff; stroke-width: 1.7; }
body.hka-modern-nav .hka-has-heading .hka-location-arrow{ display: grid; }
body.hka-modern-nav .hka-has-heading .bws-user-location-marker-dot{ opacity: 0; }
body.hka-modern-nav .hka-heading-course .hka-location-arrow svg{ fill: var(--hka-surface); stroke: var(--hka-primary); }
body.hka-modern-nav .hka-main-map.hka-direction-picking,
body.hka-modern-nav .hka-main-map.hka-direction-picking .leaflet-interactive{ cursor: crosshair !important; }
body.hka-modern-nav.hka-modern-nav .hka-direction-popup .leaflet-popup-content-wrapper{ padding: 0; border: 1px solid var(--hka-line); border-radius: 12px; color: var(--hka-navy); background: var(--hka-surface); box-shadow: var(--hka-shadow); }
body.hka-modern-nav .hka-direction-popup .leaflet-popup-content{ margin: 0 !important; min-width: 226px; width: 252px !important; max-width: calc(100vw - 52px); }
body.hka-modern-nav .hka-direction-popup .leaflet-popup-tip{ background: var(--hka-surface); }
body.hka-modern-nav .hka-direction-panel{ padding: 14px; box-sizing: border-box; font: 500 12px/1.5 var(--hka-font); max-height: min(390px, calc(100dvh - 100px)); overflow: auto; }
body.hka-modern-nav .hka-direction-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 9px; }
body.hka-modern-nav .hka-direction-head strong{ font-size: 14px; color: var(--hka-navy); }
body.hka-modern-nav .hka-direction-panel button{ min-height: 32px; border: 1px solid var(--hka-line); border-radius: 6px; background: var(--hka-surface); color: var(--hka-primary); padding: 6px 10px; font: 600 11px/1.4 var(--hka-font); cursor: pointer; }
body.hka-modern-nav .hka-direction-panel button:hover{ background: var(--hka-hover); }
body.hka-modern-nav .hka-direction-head .hka-direction-off{ width: 32px; padding: 0; font-size: 20px; }
body.hka-modern-nav .hka-direction-target{ font-weight: 600; color: var(--hka-navy); overflow-wrap: anywhere; margin-bottom: 10px; }
body.hka-modern-nav .hka-direction-actions{ display: flex; gap: 6px; }
body.hka-modern-nav .hka-direction-actions [aria-pressed="true"]{ color: #fff; background: var(--hka-primary); border-color: var(--hka-primary); }
body.hka-modern-nav .hka-direction-options{ display: flex; gap: 14px; margin: 12px 0 6px; }
body.hka-modern-nav .hka-direction-options label{ display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
body.hka-modern-nav .hka-direction-options input{ margin: 0; accent-color: var(--hka-primary); }
body.hka-modern-nav .hka-direction-metrics{ margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
body.hka-modern-nav .hka-direction-metrics > div{ display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hka-line); }
body.hka-modern-nav .hka-direction-metrics dt{ color: var(--hka-muted); }
body.hka-modern-nav .hka-direction-metrics dd{ margin: 0; text-align: right; font-weight: 650; color: var(--hka-navy); }
body.hka-modern-nav .hka-direction-status{ color: var(--hka-warning-text); background: var(--hka-warning-bg); margin-top: 8px; padding: 6px 8px; border-radius: 5px; font-size: 11px; }
body.hka-modern-nav .hka-direction-compass{ margin-top: 10px; width: 100%; }
body.hka-modern-nav.hka-modern-nav .hka-direction-panel [hidden]{ display: none !important; }
@media (max-width: 700px) {
  body.hka-modern-nav{ --hka-map-tool-right: max(12px, env(safe-area-inset-right, 0px)); --hka-map-tool-bottom: max(26px, calc(env(safe-area-inset-bottom, 0px) + 12px)); }
  body.hka-modern-nav.hka-modern-nav #telemetryDashboardPanel{ right: calc(var(--hka-map-tool-size) + 8px); width: calc(100vw - 80px); }
}
@media (max-height: 540px) {
  body.hka-modern-nav.hka-modern-nav #telemetryDashboardPanel{ bottom: -104px; max-height: calc(100dvh - 100px); }
  body.hka-modern-nav #telemetryDashboardPanel .telemetry-dashboard-list{ max-height: calc(100dvh - 162px); }
  body.hka-modern-nav .hka-direction-panel{ max-height: 220px; }
}
@keyframes hka-direction-spin { to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.hka-modern-nav #hkaDirectionToggle.is-loading svg{ animation: none; } }
body.hka-modern-nav.hka-modern-nav #telemetryDashboardToggle{ position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }

/* Revisi 4.5 — professional lobby and videotron presentation. */
body.hka-display-active{ overflow:hidden !important; }
body.hka-display-active > :not(#hkaDisplayRoot):not(#hkaFfewsRoot):not(script):not(style){ visibility:hidden !important; pointer-events:none !important; }
#hkaDisplayRoot{
  --display-ink:#102e50; --display-deep:#091d34; --display-line:#294564; --display-gold:#dfb653; --display-photo-height:clamp(84px,12vh,180px); --display-photo-width:clamp(280px,26vw,670px); --display-photo-gap:clamp(10px,1vw,26px);
  position:fixed; inset:0; z-index:2147483000; width:100vw; height:100vh; height:100dvh;
  display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto var(--display-photo-height);
  padding:clamp(16px,2.1vw,64px); padding-bottom:max(clamp(16px,2.1vw,64px),env(safe-area-inset-bottom));
  gap:clamp(10px,1.3vh,22px); box-sizing:border-box; overflow:hidden;
  background:var(--display-deep); color:#f6f9fc; font:500 clamp(12px,1.05vw,30px)/1.4 var(--hka-font,system-ui,sans-serif);
  font-variant-numeric:tabular-nums; text-align:left; isolation:isolate;
}
#hkaDisplayRoot *,
#hkaDisplayRoot *::before,
#hkaDisplayRoot *::after{ box-sizing:border-box; }
#hkaDisplayRoot[hidden],
#hkaDisplayRoot [hidden]{ display:none !important; }
#hkaDisplayRoot :is(h1,h2,h3,p){ margin:0; font-family:inherit; color:inherit; }
#hkaDisplayRoot button,
#hkaDisplayRoot select{ font:600 13px/1.4 var(--hka-font,system-ui,sans-serif); text-transform:none; letter-spacing:normal; box-shadow:none; }
#hkaDisplayRoot button{ cursor:pointer; }
#hkaDisplayRoot button:focus-visible,
#hkaDisplayRoot select:focus-visible{ outline:3px solid var(--display-gold) !important; outline-offset:3px; }
#hkaDisplayRoot .hka-display-header{ grid-row:1; display:flex; justify-content:space-between; align-items:center; gap:32px; padding-bottom:clamp(12px,1.5vh,26px); border-bottom:1px solid var(--display-line); }
#hkaDisplayRoot .hka-display-brand{ display:flex; gap:clamp(12px,1.2vw,32px); align-items:center; }
#hkaDisplayRoot .hka-display-brand img{ width:clamp(46px,4.4vw,150px); height:clamp(46px,4.4vw,150px); object-fit:contain; border:0; background:#fff; border-radius:10px; padding:6px; }
#hkaDisplayRoot .hka-display-brand strong{ display:block; font-size:clamp(20px,2vw,64px); letter-spacing:.065em; font-weight:750; line-height:1.12; }
#hkaDisplayRoot .hka-display-brand span{ display:block; color:#b7cadf; font-size:clamp(10px,.95vw,28px); letter-spacing:.065em; margin-top:7px; }
#hkaDisplayRoot .hka-display-clock{ text-align:right; flex-shrink:0; }
#hkaDisplayRoot .hka-display-clock strong{ display:block; font-size:clamp(23px,2.25vw,78px); font-weight:650; line-height:1.1; }
#hkaDisplayRoot .hka-display-clock span{ display:block; margin-top:7px; font-size:clamp(11px,1vw,28px); color:#b7cadf; }
#hkaDisplayRoot .hka-display-strip{ grid-row:2; display:flex; align-items:center; gap:clamp(12px,1.2vw,32px); min-height:clamp(32px,4vh,65px); }
#hkaDisplayRoot .hka-display-strip h1{ font-size:clamp(20px,1.7vw,52px); font-weight:650; }
#hkaDisplayRoot .hka-display-range{ color:#a5bad0; border-left:1px solid #476079; padding-left:1.2em; font-size:.9em; }
#hkaDisplayRoot .hka-display-connection{ margin-left:auto; white-space:nowrap; font-size:clamp(10px,.8vw,24px); letter-spacing:.07em; color:#a8e8d0; display:flex; align-items:center; gap:8px; }
#hkaDisplayRoot .hka-display-connection::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
#hkaDisplayRoot .hka-display-connection.is-warning{ color:#ffda85; }
#hkaDisplayRoot .hka-display-alert{ grid-row:3; padding:9px 14px; border:1px solid #9c762f; background:#483814; color:#ffdf9b; border-radius:6px; }
#hkaDisplayRoot .hka-display-stage{ grid-row:4; min-width:0; min-height:0; overflow:auto; }
#hkaDisplayRoot .hka-display-footer{ grid-row:5; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:clamp(34px,4vh,64px); font-size:clamp(10px,.85vw,24px); color:#a5bad0; }
#hkaDisplayRoot .hka-display-chapters{ display:flex; gap:8px; }
#hkaDisplayRoot .hka-display-chapters button{ border:0; background:transparent; color:#adbed0; padding:.55em .85em; border-radius:5px; font-size:clamp(10px,.82vw,24px); }
#hkaDisplayRoot .hka-display-chapters button[aria-pressed="true"]{ background:#203c59; color:#f1d28d; }
#hkaDisplayRoot .hka-display-page{ color:#fff; font-weight:600; min-width:3em; text-align:right; }
#hkaDisplayRoot .hka-display-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); height:100%; gap:clamp(12px,1.2vw,32px); }
#hkaDisplayRoot .hka-display-station{ min-width:0; min-height:0; display:flex; flex-direction:column; padding:clamp(14px,1.45vw,38px); border-radius:10px; background:#f7f9fc; color:var(--display-ink); border-top:4px solid var(--display-gold); overflow:auto; }
#hkaDisplayRoot .hka-display-station-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:6px; margin-bottom:clamp(8px,1vh,20px); font-size:clamp(10px,.8vw,23px); color:#4a6078; }
#hkaDisplayRoot .hka-display-station-meta > span:first-child{ max-width:64%; }
#hkaDisplayRoot .hka-display-badge{ display:inline-flex; align-items:center; gap:5px; font-size:clamp(9px,.7vw,19px); color:#286b55; white-space:nowrap; }
#hkaDisplayRoot .hka-display-badge::before{ content:''; width:.5em; height:.5em; border-radius:50%; background:currentColor; }
#hkaDisplayRoot .hka-display-badge.is-offline,
#hkaDisplayRoot .hka-display-badge.is-stale{ color:#98671b; }
#hkaDisplayRoot .hka-display-badge.is-unknown{ color:#627284; }
#hkaDisplayRoot .hka-display-station h3{ font-size:clamp(18px,1.4vw,48px); line-height:1.2; font-weight:650; overflow-wrap:anywhere; }
#hkaDisplayRoot .hka-display-values{ flex:1; display:grid; grid-template-columns:1.2fr 1fr; align-content:center; gap:14px; padding:clamp(12px,1.4vh,26px) 0; }
#hkaDisplayRoot .hka-display-metric{ min-width:0; }
#hkaDisplayRoot .hka-display-metric > span{ display:block; font-size:clamp(11px,.82vw,26px); color:#506981; margin-bottom:.35em; }
#hkaDisplayRoot .hka-display-metric strong{ display:inline; font-size:clamp(24px,3.5vmin,100px); line-height:1.04; font-weight:700; letter-spacing:-.035em; overflow-wrap:anywhere; }
#hkaDisplayRoot .hka-display-metric small{ display:inline-block; margin-left:.4em; font-size:clamp(12px,1vw,30px); color:#506981; }
#hkaDisplayRoot .hka-display-metric.is-primary strong{ font-size:clamp(34px,5.3vmin,150px); color:#173f69; }
#hkaDisplayRoot .hka-display-station footer{ display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:space-between; border-top:1px solid #dce4ed; padding-top:10px; font-size:clamp(9px,.72vw,21px); color:#506981; }
#hkaDisplayRoot .hka-display-water-status{ width:100%; font-weight:600; }
#hkaDisplayRoot .hka-display-grid.is-climate{ grid-template-columns:1fr; }
#hkaDisplayRoot .hka-display-station.is-climate .hka-display-values{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vh,48px); }
#hkaDisplayRoot .hka-display-station.is-climate h3{ font-size:clamp(26px,2.3vw,72px); }
#hkaDisplayRoot .hka-display-station.is-climate .hka-display-metric{ border-left:2px solid #d4dee9; padding-left:clamp(14px,2vw,44px); }
#hkaDisplayRoot .hka-display-station.is-climate .hka-display-metric strong{ font-size:clamp(36px,6.5vmin,168px); }
#hkaDisplayRoot .hka-display-overview{ height:100%; display:grid; grid-template-columns:1.05fr 2fr; gap:clamp(16px,1.8vw,44px); }
#hkaDisplayRoot .hka-display-hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:clamp(20px,2.7vw,64px); border:1px solid #34516e; border-radius:12px; background:radial-gradient(ellipse at 0 0,#214d77,transparent 75%),#112f4e; }
#hkaDisplayRoot .hka-display-hero::after{ content:''; position:absolute; width:65%; aspect-ratio:1; right:-35%; top:14%; border:1px solid #436587; border-radius:50%; box-shadow:0 0 0 22px #204363,0 0 0 23px #34597a,0 0 0 44px #1c3e5c,0 0 0 45px #2b5070; opacity:.38; pointer-events:none; }
#hkaDisplayRoot .hka-display-eyebrow{ display:block; font-size:clamp(10px,.9vw,26px); letter-spacing:.15em; color:#edcd86; margin-bottom:1em; }
#hkaDisplayRoot .hka-display-hero h2{ white-space:pre-line; font-size:clamp(30px,3.6vw,108px); line-height:1.12; font-weight:550; letter-spacing:-.03em; }
#hkaDisplayRoot .hka-display-hero-number{ position:relative; font-size:clamp(86px,14vmin,390px); line-height:1.05; font-weight:600; letter-spacing:-.06em; margin-top:auto; padding-top:3vh; }
#hkaDisplayRoot .hka-display-hero-label{ font-size:clamp(16px,1.35vw,44px); color:#bdd1e5; }
#hkaDisplayRoot .hka-display-network-bar{ margin-top:clamp(18px,3vh,54px); width:100%; height:7px; border-radius:6px; background:#3b5066; overflow:hidden; }
#hkaDisplayRoot .hka-display-network-bar i{ display:block; height:100%; background:#dfb653; }
#hkaDisplayRoot .hka-display-network-count{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; color:#c3d2e1; font-size:clamp(10px,.9vw,27px); }
#hkaDisplayRoot .hka-display-overview-groups{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1vw,28px); }
#hkaDisplayRoot .hka-display-type-card{ min-width:0; display:flex; flex-direction:column; padding:clamp(16px,1.6vw,46px); background:#f7f9fc; color:var(--display-ink); border-radius:10px; border-top:4px solid var(--display-gold); }
#hkaDisplayRoot .hka-display-type-card header{ padding-bottom:2.5vh; border-bottom:1px solid #dce4ed; }
#hkaDisplayRoot .hka-display-type-card h3{ font-size:clamp(17px,1.45vw,45px); line-height:1.25; font-weight:650; margin-bottom:.4em; }
#hkaDisplayRoot .hka-display-type-card header > span{ font-size:clamp(12px,.9vw,26px); color:#526b81; }
#hkaDisplayRoot .hka-display-type-card .hka-display-metric{ margin:auto 0 2vh; padding-top:2vh; }
#hkaDisplayRoot .hka-display-type-card .hka-display-metric strong{ font-size:clamp(30px,4.7vmin,144px); }
#hkaDisplayRoot .hka-display-featured-name{ display:block; font-size:clamp(15px,1.12vw,34px); font-weight:650; line-height:1.3; overflow-wrap:anywhere; }
#hkaDisplayRoot .hka-display-type-card time{ display:block; margin-top:12px; font-size:clamp(10px,.8vw,24px); color:#526b81; }
#hkaDisplayRoot .hka-display-type-count{ margin-top:auto; padding-top:3vh; font-size:clamp(11px,.88vw,26px); color:#526b81; }
#hkaDisplayRoot .hka-display-empty{ display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100%; text-align:center; border:1px solid var(--display-line); border-radius:12px; padding:40px; }
#hkaDisplayRoot .hka-display-empty h2{ font-size:clamp(30px,4vw,120px); }
#hkaDisplayRoot .hka-display-empty p{ margin-top:18px; color:#bdccdc; }
#hkaDisplayRoot .hka-display-tools{ position:absolute; left:50%; bottom:max(28px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:2; display:flex; align-items:flex-end; flex-wrap:wrap; justify-content:center; gap:8px; max-width:calc(100% - 32px); width:max-content; padding:14px; border:1px solid #486582; border-radius:12px; background:#0d253feb; box-shadow:0 12px 48px #030c19aa; backdrop-filter:blur(16px); opacity:1; transition:opacity .2s; }
#hkaDisplayRoot .hka-display-tools button,
#hkaDisplayRoot .hka-display-tools select{ min-height:38px; padding:8px 11px; border:1px solid #54708b; border-radius:6px; color:#e7f0f9; background:#173753; }
#hkaDisplayRoot .hka-display-tools select{ max-width:204px; }
#hkaDisplayRoot .hka-display-tools button.is-accent{ background:var(--display-gold); color:#122f4d; border-color:var(--display-gold); }
#hkaDisplayRoot .hka-display-tools button:disabled{ opacity:.45; cursor:wait; }
#hkaDisplayRoot .hka-display-select{ display:grid; gap:5px; font-size:10px; color:#c4d4e4; }
#hkaDisplayRoot.controls-hidden .hka-display-tools{ opacity:0; pointer-events:none; }
#hkaDisplayRoot.controls-hidden{ cursor:none; }
#hkaDisplayRoot .hka-display-hint{ position:absolute; left:50%; bottom:120px; transform:translateX(-50%); padding:10px 18px; color:#f7d990; background:#183650; border:1px solid #53708c; border-radius:7px; font-size:14px; z-index:3; }
#hkaDisplayRoot[data-mode="videotron"]{ padding:clamp(20px,3vw,90px); gap:clamp(14px,1.8vh,34px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-brand strong{ font-size:clamp(26px,2.5vw,84px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station{ background:#153553; border:1px solid #355979; border-top:5px solid var(--display-gold); color:#fff; padding:clamp(24px,2.5vw,72px); border-radius:8px; }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station h3{ font-size:clamp(27px,2.2vw,74px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station :is(.hka-display-station-meta,.hka-display-metric > span,.hka-display-metric small,footer){ color:#bbd0e4; }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-badge.is-online{ color:#abebd3; }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-badge:is(.is-offline,.is-stale){ color:#ffe099; }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-badge.is-unknown{ color:#b6c8db; }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-values{ grid-template-columns:1fr; gap:4vh; }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-metric.is-primary strong{ color:#ffe09c; font-size:clamp(64px,11vmin,290px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-metric strong{ font-size:clamp(32px,5vmin,148px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-metric > span{ font-size:clamp(16px,1.2vw,38px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station.is-climate .hka-display-values{ grid-template-columns:repeat(3,minmax(0,1fr)); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station.is-climate .hka-display-metric strong{ color:#ffe09c; font-size:clamp(48px,8vmin,220px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station.is-climate .hka-display-metric{ border-left-color:#436785; }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station footer{ border-color:#436785; font-size:clamp(11px,.9vw,26px); }
@media (max-width:1100px) {
  #hkaDisplayRoot .hka-display-footer{ flex-wrap:wrap; gap:8px; }
  #hkaDisplayRoot .hka-display-overview{ grid-template-columns:.85fr 1.7fr; }
  #hkaDisplayRoot .hka-display-overview-groups{ grid-template-columns:1fr; }
  #hkaDisplayRoot .hka-display-type-card{ display:grid; grid-template-columns:1.3fr 1fr; gap:6px 18px; padding:14px; }
  #hkaDisplayRoot .hka-display-type-card header{ padding:0; border:0; }
  #hkaDisplayRoot .hka-display-type-card .hka-display-metric{ grid-column:2; grid-row:1 / span 3; margin:0; padding:0; align-self:center; text-align:right; }
  #hkaDisplayRoot .hka-display-type-card :is(time,.hka-display-type-count){ margin:0; padding:0; }
  #hkaDisplayRoot .hka-display-type-count{ display:none; }
}
@media (max-aspect-ratio:1/1) {
  #hkaDisplayRoot .hka-display-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #hkaDisplayRoot[data-mode="videotron"] .hka-display-grid{ grid-template-columns:1fr; }
  #hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-values{ grid-template-columns:1fr 1fr; }
  #hkaDisplayRoot .hka-display-overview{ grid-template-columns:1fr; grid-template-rows:.9fr 1.1fr; }
  #hkaDisplayRoot .hka-display-hero{ padding:24px; display:grid; grid-template-columns:1fr 1fr; }
  #hkaDisplayRoot .hka-display-hero-number{ grid-column:2; grid-row:1 / span 3; text-align:right; margin:0; padding:0; }
  #hkaDisplayRoot .hka-display-hero-label{ text-align:right; grid-column:2; }
  #hkaDisplayRoot .hka-display-network-bar,
#hkaDisplayRoot .hka-display-network-count{ grid-column:1 / -1; }
}
@media (max-width:640px) {
  #hkaDisplayRoot{ padding:14px; gap:9px; }
  #hkaDisplayRoot .hka-display-header{ gap:8px; padding-bottom:10px; }
  #hkaDisplayRoot .hka-display-brand{ gap:8px; }
  #hkaDisplayRoot .hka-display-brand img{ width:36px; height:36px; padding:4px; }
  #hkaDisplayRoot .hka-display-brand strong{ font-size:16px; }
  #hkaDisplayRoot .hka-display-brand span{ font-size:8px; max-width:165px; }
  #hkaDisplayRoot .hka-display-clock strong{ font-size:16px; }
  #hkaDisplayRoot .hka-display-clock span{ font-size:8px; }
  #hkaDisplayRoot .hka-display-strip{ flex-wrap:wrap; gap:6px 12px; }
  #hkaDisplayRoot .hka-display-strip h1{ font-size:17px; }
  #hkaDisplayRoot .hka-display-connection{ font-size:8px; }
  #hkaDisplayRoot .hka-display-grid{ gap:8px; }
  #hkaDisplayRoot .hka-display-station{ padding:10px; }
  #hkaDisplayRoot .hka-display-station-meta{ flex-wrap:wrap; font-size:9px; }
  #hkaDisplayRoot .hka-display-station h3{ font-size:15px; }
  #hkaDisplayRoot .hka-display-values{ gap:8px; padding:10px 0; }
  #hkaDisplayRoot .hka-display-metric.is-primary strong{ font-size:28px; }
  #hkaDisplayRoot .hka-display-metric strong{ font-size:22px; }
  #hkaDisplayRoot .hka-display-metric > span{ font-size:9px; }
  #hkaDisplayRoot .hka-display-metric small{ font-size:9px; }
  #hkaDisplayRoot .hka-display-station.is-climate .hka-display-values,
#hkaDisplayRoot[data-mode="videotron"] .hka-display-station.is-climate .hka-display-values{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #hkaDisplayRoot .hka-display-chapters{ gap:0; }
  #hkaDisplayRoot .hka-display-chapters button{ font-size:9px; padding:6px; }
  #hkaDisplayRoot .hka-display-tools{ padding:10px; gap:6px; bottom:16px; }
  #hkaDisplayRoot .hka-display-tools select{ max-width:150px; }
  #hkaDisplayRoot .hka-display-tools :is(select,button){ font-size:11px; }
}
@media (max-height:620px) and (min-aspect-ratio:1/1) {
  #hkaDisplayRoot{ padding:12px 22px; gap:8px; }
  #hkaDisplayRoot .hka-display-header{ padding-bottom:8px; }
  #hkaDisplayRoot .hka-display-brand img{ width:42px; height:42px; }
  #hkaDisplayRoot .hka-display-brand strong,
#hkaDisplayRoot .hka-display-clock strong{ font-size:24px; }
  #hkaDisplayRoot .hka-display-brand span,
#hkaDisplayRoot .hka-display-clock span{ margin-top:3px; font-size:10px; }
  #hkaDisplayRoot .hka-display-station{ padding:10px 16px; }
  #hkaDisplayRoot .hka-display-values{ padding:8px 0; }
  #hkaDisplayRoot .hka-display-station-meta{ margin-bottom:6px; }
  #hkaDisplayRoot .hka-display-hero-number{ font-size:80px; padding-top:10px; }
  #hkaDisplayRoot .hka-display-hero h2{ font-size:34px; }
  #hkaDisplayRoot .hka-display-network-bar{ margin-top:14px; }
}
@media (prefers-reduced-motion:reduce) {
  #hkaDisplayRoot .hka-display-tools{ transition:none; }
}

/* Revisi 4.7 — station photographs replace the countdown bar. */
#hkaDisplayRoot .hka-display-photos{
  grid-row:6; min-width:0; height:var(--display-photo-height); overflow:hidden;
  position:relative; border-top:1px solid var(--display-line); padding-top:10px;
  --photo-card-height:calc(var(--display-photo-height) - 11px);
  mask-image:linear-gradient(90deg,transparent,#000 1.2%,#000 98.8%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.2%,#000 98.8%,transparent);
}
#hkaDisplayRoot .hka-display-photos:focus-visible{ outline:2px solid var(--display-gold); outline-offset:3px; }
#hkaDisplayRoot .hka-display-photo-track{ display:flex; width:max-content; height:100%; animation:hka-display-photos-run 80s linear infinite; }
#hkaDisplayRoot .hka-display-photo-group{ display:flex; flex-shrink:0; gap:var(--display-photo-gap); padding-right:var(--display-photo-gap); height:100%; }
#hkaDisplayRoot .hka-display-photo-card{
  display:grid; grid-template-columns:46% minmax(0,1fr); align-items:stretch;
  width:var(--display-photo-width); height:var(--photo-card-height); flex:0 0 var(--display-photo-width);
  margin:0; overflow:hidden; border:1px solid #335574; border-radius:8px; background:#153553;
}
#hkaDisplayRoot .hka-display-photo-media{ min-width:0; position:relative; overflow:hidden; background:linear-gradient(145deg,#1c456a,#0e2946); }
#hkaDisplayRoot .hka-display-photo-media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; border:0; margin:0; padding:0; }
#hkaDisplayRoot .hka-display-photo-card figcaption{ display:flex; align-items:center; min-width:0; padding:clamp(12px,1.1vw,28px); color:#f6f9fc; font-size:clamp(13px,1.13vw,32px); line-height:1.3; font-weight:650; overflow-wrap:anywhere; border-left:2px solid var(--display-gold); }
#hkaDisplayRoot .hka-display-photo-card figcaption span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
#hkaDisplayRoot .hka-display-photo-fallback{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:10px; text-align:center; color:#b2c9df; font-size:clamp(9px,.75vw,19px); }
#hkaDisplayRoot .hka-display-photo-fallback::before{ content:''; display:block; width:27px; height:21px; border:1px solid #688aa7; border-radius:3px; background:linear-gradient(145deg,transparent 45%,#688aa7 46%,#688aa7 50%,transparent 51%),linear-gradient(40deg,transparent 50%,#688aa7 51%,#688aa7 55%,transparent 56%); opacity:.7; }
#hkaDisplayRoot .hka-display-photo-empty{ height:100%; display:grid; place-items:center; color:#a5bad0; font-size:.85em; }
#hkaDisplayRoot.photos-paused .hka-display-photo-track,
#hkaDisplayRoot .hka-display-photos:focus-within .hka-display-photo-track,
#hkaDisplayRoot .hka-display-photos:hover .hka-display-photo-track{ animation-play-state:paused; }
#hkaDisplayRoot .hka-display-photos.is-single{ mask-image:none; -webkit-mask-image:none; }
#hkaDisplayRoot .hka-display-photos.is-single .hka-display-photo-track{ animation:none; }
#hkaDisplayRoot .hka-display-photos.is-single .is-copy{ display:none; }
#hkaDisplayRoot .hka-display-tools{ bottom:calc(var(--display-photo-height) + clamp(16px,2.1vw,64px) + 16px); max-height:calc(100% - var(--display-photo-height) - 44px); overflow:auto; }
#hkaDisplayRoot .hka-display-hint{ bottom:calc(var(--display-photo-height) + 165px); }
#hkaDisplayRoot[data-mode="videotron"]{ --display-photo-width:clamp(320px,29vw,850px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-photo-card figcaption{ font-size:clamp(15px,1.4vw,40px); }
#hkaDisplayRoot[data-mode="videotron"] .hka-display-tools{ bottom:calc(var(--display-photo-height) + clamp(20px,3vw,90px) + 16px); }
@keyframes hka-display-photos-run { to{ transform:translateX(-50%); } }
@media (max-height:800px) and (min-aspect-ratio:1/1) {
  #hkaDisplayRoot{ --display-photo-height:84px; --display-photo-width:300px; gap:8px; }
  #hkaDisplayRoot .hka-display-station{ padding:10px 14px; }
  #hkaDisplayRoot .hka-display-station-meta{ margin-bottom:6px; }
  #hkaDisplayRoot .hka-display-station h3{ font-size:17px; }
  #hkaDisplayRoot .hka-display-values{ padding:6px 0; gap:8px; }
  #hkaDisplayRoot .hka-display-metric.is-primary strong{ font-size:34px; }
  #hkaDisplayRoot .hka-display-station footer{ padding-top:6px; }
  #hkaDisplayRoot .hka-display-hero{ padding:18px; }
  #hkaDisplayRoot .hka-display-hero-number{ font-size:76px; padding-top:12px; }
  #hkaDisplayRoot .hka-display-hero h2{ font-size:34px; }
  #hkaDisplayRoot .hka-display-network-bar{ margin-top:16px; }
  #hkaDisplayRoot[data-mode="videotron"]{ padding:18px 28px; gap:10px; --display-photo-width:330px; }
  #hkaDisplayRoot[data-mode="videotron"] .hka-display-station{ padding:16px; }
  #hkaDisplayRoot[data-mode="videotron"] .hka-display-station h3{ font-size:24px; }
  #hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-values{ gap:12px; }
  #hkaDisplayRoot[data-mode="videotron"] .hka-display-station .hka-display-metric.is-primary strong{ font-size:clamp(48px,8vmin,64px); }
  #hkaDisplayRoot[data-mode="videotron"] .hka-display-tools{ bottom:calc(var(--display-photo-height) + 34px); }
}
@media (max-width:640px) {
  #hkaDisplayRoot,
#hkaDisplayRoot[data-mode="videotron"]{ --display-photo-height:80px; --display-photo-width:250px; }
  #hkaDisplayRoot .hka-display-photo-card figcaption{ font-size:13px; padding:10px; }
  #hkaDisplayRoot .hka-display-tools{ bottom:calc(var(--display-photo-height) + 26px); }
}
@media (prefers-reduced-motion:reduce) {
  #hkaDisplayRoot .hka-display-photos{ overflow-x:auto; mask-image:none; -webkit-mask-image:none; }
  #hkaDisplayRoot .hka-display-photo-track{ animation:none; transform:none; }
  #hkaDisplayRoot .hka-display-photos .is-copy{ display:none; }
}

/* Revisi 4.6 — public Display control above Telemetry. */
.hka-display-map-control{
  position:fixed; right:var(--hka-map-tool-right,18px);
  bottom:calc(var(--hka-map-tool-bottom,28px) + 4 * var(--hka-map-tool-step,52px));
  width:var(--hka-map-tool-size,44px); height:var(--hka-map-tool-size,44px);
  margin:0; z-index:1700; pointer-events:auto;
}
#hkaDisplayToggle{
  box-sizing:border-box; display:grid; place-items:center; padding:11px; margin:0;
  width:var(--hka-map-tool-size,44px); height:var(--hka-map-tool-size,44px);
  border:1px solid var(--hka-line,#dce4ed); border-radius:11px;
  background:var(--hka-surface,#fff); color:var(--hka-primary,#174875);
  box-shadow:0 4px 16px #102e501a; cursor:pointer;
}
#hkaDisplayToggle svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#hkaDisplayToggle:hover{ background:var(--hka-hover,#eef3f8); }
#hkaDisplayToggle:focus-visible{ outline:3px solid var(--hka-focus,#9bbcdf); outline-offset:3px; }

/* Revisi 4.8 — satellite place-label preference, matching the map controls. */
body.hka-modern-nav .hka-main-map .hka-satellite-label-option{ margin:7px 0; padding:8px 4px; border-top:1px solid var(--hka-line,#dce4ed); color:var(--hka-navy,#102e50); }
body.hka-modern-nav .hka-main-map .hka-satellite-label-option[hidden]{ display:none !important; }
body.hka-modern-nav .hka-main-map .hka-satellite-label-option label{ display:flex !important; align-items:center; gap:9px; min-height:30px; margin:0; font:600 12px/1.4 var(--hka-font,system-ui,sans-serif); cursor:pointer; }
body.hka-modern-nav .hka-main-map .hka-satellite-label-option input{ width:16px; height:16px; margin:0; accent-color:var(--hka-primary,#174875); cursor:pointer; }
body.hka-modern-nav .hka-main-map .hka-satellite-label-option input:focus-visible{ outline:2px solid var(--hka-focus,#9bbcdf); outline-offset:3px; }

/* Revisi 4.9 — road routing in the existing Direction popup. */
body.hka-modern-nav .hka-direction-popup .leaflet-popup-content{ width: 286px !important; }
body.hka-modern-nav .hka-direction-panel{ max-height: min(460px, calc(100dvh - 100px)); }
body.hka-modern-nav .hka-route-mode{ display: block; margin: 0 0 10px; }
body.hka-modern-nav .hka-route-mode select{
  box-sizing: border-box; width: 100%; min-height: 36px; padding: 7px 10px;
  color: var(--hka-navy); background: var(--hka-hover); border: 1px solid var(--hka-line);
  border-radius: 7px; font: 600 12px/1.5 var(--hka-font); cursor: pointer;
}
body.hka-modern-nav .hka-direction-panel :is(button,select,a):focus-visible{ outline: 3px solid var(--hka-focus); outline-offset: 2px; }
body.hka-modern-nav .hka-route-refresh{ margin-top: 10px; width: 100%; }
body.hka-modern-nav .hka-direction-panel button:disabled{ opacity: .55; cursor: default; }
body.hka-modern-nav .hka-route-attribution{ margin-top: 10px; font: 500 10px/1.6 var(--hka-font); color: var(--hka-muted); }
body.hka-modern-nav .hka-route-attribution a{ color: var(--hka-primary); text-decoration: underline; text-underline-offset: 2px; }
@media (max-height: 540px) { body.hka-modern-nav .hka-direction-panel{ max-height: 240px; } }

/* Revisi 4.10 — compact Direction popup, with the active route unchanged. */
body.hka-modern-nav .hka-direction-head{ gap: 8px; }
body.hka-modern-nav .hka-direction-head > strong{ flex: 0 0 auto; }
body.hka-modern-nav .hka-direction-head-actions{ display: flex; flex: 0 0 auto; gap: 4px; margin-left: auto; }
body.hka-modern-nav .hka-direction-head .hka-direction-minimize{ display: grid; place-items: center; width: 32px; padding: 0; }
body.hka-modern-nav .hka-direction-minimize svg{ display: block; width: 17px; height: 17px; }
body.hka-modern-nav .hka-direction-compact-distance{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 11px/1.5 var(--hka-font); font-variant-numeric: tabular-nums; color: var(--hka-primary);
}
body.hka-modern-nav .hka-direction-popup.hka-direction-is-minimized .leaflet-popup-content{ width: 240px !important; }
body.hka-modern-nav .hka-direction-panel.is-minimized{ padding: 10px; }
body.hka-modern-nav .hka-direction-panel.is-minimized .hka-direction-head{ margin-bottom: 0; }
body.hka-modern-nav .hka-direction-panel.is-minimized .hka-route-attribution{ margin-top: 4px; }

/* Revisi 4.11 — FFEWS display; shared navy, white and gold government palette. */
#hkaFfewsRoot{
  --ff-navy:#102e50; --ff-gold:#dfb653; --ff-line:#dce5ee; --ff-muted:#536b81;
  position:fixed; inset:0; z-index:2147483000; display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto; width:100vw; height:100vh; height:100dvh;
  background:#f1f5f8; color:var(--ff-navy); font:500 clamp(11px,.85vw,24px)/1.4 var(--hka-font,system-ui,sans-serif);
  font-variant-numeric:tabular-nums; text-align:left; isolation:isolate; overflow:hidden;
}
#hkaFfewsRoot *,
#hkaFfewsRoot *::before,
#hkaFfewsRoot *::after{ box-sizing:border-box; }
#hkaFfewsRoot[hidden],
#hkaFfewsRoot [hidden]{ display:none!important; }
#hkaFfewsRoot :is(h1,h2,h3,p){ margin:0; font-family:inherit; color:inherit; }
#hkaFfewsRoot :is(button,select,input){ font:inherit; text-transform:none; letter-spacing:normal; box-shadow:none; }
#hkaFfewsRoot :is(button,select){ min-height:36px; padding:8px 12px; border:1px solid #c7d5e2; border-radius:6px; background:white; color:var(--ff-navy); cursor:pointer; }
#hkaFfewsRoot :is(button,select,input):focus-visible{ outline:3px solid #c99124!important; outline-offset:3px; }
#hkaFfewsRoot button:disabled{ opacity:.5; cursor:wait; }
#hkaFfewsRoot .ff-header{ padding:clamp(16px,1.7vw,48px) clamp(20px,2vw,56px); background:var(--ff-navy); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:3px solid var(--ff-gold); }
#hkaFfewsRoot .ff-brand{ display:flex; gap:clamp(12px,1vw,30px); align-items:center; min-width:0; }
#hkaFfewsRoot .ff-brand img{ width:clamp(42px,3.5vw,108px); height:clamp(42px,3.5vw,108px); object-fit:contain; padding:5px; background:#fff; border-radius:6px; }
#hkaFfewsRoot .ff-brand strong{ display:block; font-size:clamp(14px,1.15vw,36px); font-weight:650; }
#hkaFfewsRoot .ff-brand span{ display:block; color:#b9cce0; letter-spacing:.1em; font-size:.75em; margin-top:5px; }
#hkaFfewsRoot .ff-title{ display:flex; gap:16px; align-items:center; }
#hkaFfewsRoot .ff-title h1{ font-size:clamp(28px,2.8vw,80px); font-weight:650; line-height:1; letter-spacing:.02em; }
#hkaFfewsRoot .ff-title span{ color:#efd59c; font-size:.8em; letter-spacing:.16em; border-left:1px solid #58718a; padding-left:16px; max-width:9em; }
#hkaFfewsRoot .ff-clock{ text-align:right; }
#hkaFfewsRoot .ff-clock strong{ display:block; font-size:clamp(18px,1.7vw,48px); font-weight:550; line-height:1.2; }
#hkaFfewsRoot .ff-clock span{ display:block; color:#b9cce0; margin-top:5px; font-size:.85em; }
#hkaFfewsRoot .ff-strip{ display:flex; align-items:center; gap:24px; padding:12px clamp(20px,2vw,56px); background:#fff; border-bottom:1px solid var(--ff-line); }
#hkaFfewsRoot .ff-strip > :last-child{ margin-left:auto; color:var(--ff-muted); }
#hkaFfewsRoot .ff-strip strong{ font-weight:600; }
#hkaFfewsRoot .ff-connection{ font-size:.75em; letter-spacing:.08em; color:#47657e; display:flex; align-items:center; gap:8px; }
#hkaFfewsRoot .ff-connection::before{ content:''; width:7px; height:7px; background:currentColor; border-radius:50%; }
#hkaFfewsRoot .ff-main{ display:grid; grid-template-columns:minmax(238px,21fr) minmax(260px,53fr) minmax(270px,26fr); gap:clamp(12px,1.3vw,30px); padding:clamp(14px,1.4vw,38px); min-height:0; }
#hkaFfewsRoot .ff-rail{ display:grid; grid-template-rows:auto repeat(5,minmax(110px,1fr)); gap:clamp(8px,.8vw,20px); min-height:0; overflow:auto; padding:3px; }
#hkaFfewsRoot .ff-rail h2{ font-size:.85em; font-weight:600; color:var(--ff-muted); margin:0 0 4px 1px; }
#hkaFfewsRoot .ff-card{ display:grid; grid-template-columns:24px 1fr auto; gap:3px 8px; align-content:center; text-align:left; min-width:0; padding:clamp(10px,1vw,26px); border:1px solid var(--ff-line); border-radius:9px; border-left:3px solid #94a5b7; background:#fff; }
#hkaFfewsRoot .ff-card[aria-pressed="true"]{ border-color:#416b8b; border-left-color:var(--ff-navy); box-shadow:0 0 0 1px #416b8b; }
#hkaFfewsRoot .ff-card[data-state="trigger"]{ border-left-color:#b33c3e; background:#fff8f7; }
#hkaFfewsRoot .ff-card[data-state="below"]{ border-left-color:#27796f; }
#hkaFfewsRoot .ff-card-number{ color:#8796a7; font-size:.75em; padding-top:3px; }
#hkaFfewsRoot .ff-card > strong{ grid-column:2/4; font-size:1.13em; font-weight:650; }
#hkaFfewsRoot .ff-card-status{ grid-column:2/4; color:var(--ff-muted); font-size:.76em; overflow-wrap:anywhere; }
#hkaFfewsRoot .ff-card[data-state="trigger"] .ff-card-status{ color:#a02d30; font-weight:650; }
#hkaFfewsRoot .ff-card[data-state="below"] .ff-card-status{ color:#226a62; }
#hkaFfewsRoot .ff-card-amount{ grid-column:2/4; display:flex; align-items:baseline; gap:6px; margin:2px 0; }
#hkaFfewsRoot .ff-card-amount b{ font-size:clamp(24px,2vw,64px); font-weight:600; line-height:1.1; }
#hkaFfewsRoot .ff-card-amount small{ font-size:.7em; color:var(--ff-muted); }
#hkaFfewsRoot .ff-card-source{ grid-column:2/4; font-size:.73em; color:var(--ff-muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
#hkaFfewsRoot .ff-card-time{ grid-column:2/4; font-size:.67em; color:#6c7d8f; }
#hkaFfewsRoot .ff-map-panel{ position:relative; min-height:0; border:1px solid var(--ff-line); border-radius:10px; background:#e9eff1; overflow:hidden; display:flex; flex-direction:column; }
#hkaFfewsRoot .ff-map{ flex:1; min-height:0; z-index:0; }
#hkaFfewsRoot .ff-map-head{ padding:clamp(12px,1vw,26px) clamp(14px,1.3vw,32px); background:#fff; border-bottom:1px solid var(--ff-line); }
#hkaFfewsRoot .ff-map-head h2{ font-size:1.15em; font-weight:650; }
#hkaFfewsRoot .ff-map-head span{ display:block; margin-top:3px; font-size:.8em; color:var(--ff-muted); }
#hkaFfewsRoot .ff-map-tools{ position:absolute; top:clamp(78px,6vw,170px); right:14px; z-index:5; }
#hkaFfewsRoot .ff-map-tools button{ font-size:.75em; background:#fff; border:1px solid #bacbd8; }
#hkaFfewsRoot .ff-map-vector{ display:grid; place-items:center; background-color:#edf2f3; background-image:linear-gradient(#cfdbdf55 1px,transparent 1px),linear-gradient(90deg,#cfdbdf55 1px,transparent 1px); background-size:48px 48px; }
#hkaFfewsRoot .ff-map-vector > svg{ width:100%; height:100%; max-height:100%; min-height:0; overflow:visible; }
#hkaFfewsRoot .ff-map-label{ cursor:pointer; }
#hkaFfewsRoot .ff-map-label text{ fill:#163f5f; font:600 15px system-ui; paint-order:stroke; stroke:#f8fbfc; stroke-width:5px; stroke-linejoin:round; }
#hkaFfewsRoot .ff-map-label:focus{ outline:none; }
#hkaFfewsRoot .ff-map-label:focus-visible text{ stroke:#f4cb6e; }
#hkaFfewsRoot .ff-map-north{ fill:#365972; font:600 17px system-ui; }
#hkaFfewsRoot .ff-map-foot{ padding:10px 14px; background:white; display:grid; gap:4px; font-size:.7em; border-top:1px solid var(--ff-line); color:var(--ff-muted); }
#hkaFfewsRoot .ff-map-foot strong{ color:#57677a; font-weight:600; }
#hkaFfewsRoot .ff-legend{ position:absolute; bottom:90px; left:14px; z-index:5; border:1px solid #cbd8e3; background:#fffffff2; border-radius:6px; padding:10px 12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.7em; max-width:calc(100% - 28px); }
#hkaFfewsRoot .ff-legend strong{ width:100%; font-weight:600; }
#hkaFfewsRoot .ff-legend > span{ display:flex; gap:5px; align-items:center; white-space:nowrap; }
#hkaFfewsRoot .ff-legend i{ width:10px; height:10px; border-radius:2px; background:#38bdf8; }
#hkaFfewsRoot .ff-legend .medium{ background:#2563eb; }
#hkaFfewsRoot .ff-legend .deep{ background:#dc2626; }
#hkaFfewsRoot .ff-detail{ background:#fff; border:1px solid var(--ff-line); border-radius:10px; padding:clamp(16px,1.5vw,38px); display:flex; flex-direction:column; gap:clamp(12px,1.6vh,32px); min-height:0; overflow:auto; }
#hkaFfewsRoot .ff-eyebrow{ display:block; font-size:.68em; letter-spacing:.1em; color:#6b7f92; font-weight:600; }
#hkaFfewsRoot .ff-detail h2{ font-size:clamp(22px,1.8vw,58px); font-weight:600; margin:5px 0 10px; line-height:1.12; }
#hkaFfewsRoot .ff-status{ display:inline-block; font-size:.75em; padding:5px 9px; color:#526777; background:#edf2f6; border-radius:4px; }
#hkaFfewsRoot .ff-status[data-state="trigger"]{ color:#a32e32; background:#fce9e7; }
#hkaFfewsRoot .ff-status[data-state="below"]{ color:#216b5e; background:#e9f4ef; }
#hkaFfewsRoot .ff-rain-hero > span:first-child{ display:block; color:var(--ff-muted); font-size:.87em; }
#hkaFfewsRoot .ff-rain-hero strong{ display:inline-block; font-size:clamp(54px,5.2vw,148px); line-height:1.15; letter-spacing:-.06em; font-weight:550; }
#hkaFfewsRoot .ff-rain-hero small{ margin-left:8px; color:var(--ff-muted); font-size:1.2em; }
#hkaFfewsRoot .ff-threshold{ display:block; font-size:.75em; color:#87652b; border-top:1px solid #eee1c3; padding-top:8px; }
#hkaFfewsRoot .ff-metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ff-line); border-bottom:1px solid var(--ff-line); padding:12px 0; gap:10px; }
#hkaFfewsRoot .ff-metric > span{ display:block; font-size:.67em; color:var(--ff-muted); margin-bottom:6px; }
#hkaFfewsRoot .ff-metric strong{ display:inline; font-size:clamp(18px,1.6vw,46px); font-weight:600; line-height:1.2; }
#hkaFfewsRoot .ff-metric small{ display:inline-block; margin-left:4px; color:var(--ff-muted); font-size:.65em; }
#hkaFfewsRoot .ff-chart-panel h3{ font-size:.83em; font-weight:600; margin-bottom:7px; }
#hkaFfewsRoot .ff-chart svg{ display:block; width:100%; height:auto; max-height:clamp(100px,13vh,260px); }
#hkaFfewsRoot .ff-chart svg text{ font:10px system-ui; fill:#6b7f92; }
#hkaFfewsRoot .ff-chart small{ display:block; font-size:.63em; color:var(--ff-muted); margin-top:4px; }
#hkaFfewsRoot .ff-empty{ display:flex; align-items:center; justify-content:center; padding:22px 6px; color:var(--ff-muted); border:1px dashed var(--ff-line); border-radius:5px; font-size:.78em; }
#hkaFfewsRoot .ff-model-panel{ background:#f1f5f8; padding:12px 14px; border-radius:6px; border-left:3px solid #b2c1cf; margin-top:auto; }
#hkaFfewsRoot .ff-model-panel strong{ display:block; font-size:.95em; font-weight:600; margin:6px 0; }
#hkaFfewsRoot .ff-model-panel strong[data-state="ready"]{ color:#1b7181; }
#hkaFfewsRoot .ff-model-panel > span:not(.ff-eyebrow){ display:block; font-size:.74em; color:var(--ff-muted); margin-top:3px; }
#hkaFfewsRoot .ff-source{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; font-size:.7em; color:var(--ff-muted); }
#hkaFfewsRoot .ff-source strong{ font-weight:600; }
#hkaFfewsRoot .ff-footer{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px clamp(18px,1.7vw,40px); border-top:1px solid var(--ff-line); background:#fff; }
#hkaFfewsRoot .ff-footer > span{ font-size:.78em; color:var(--ff-muted); }
#hkaFfewsRoot .ff-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#hkaFfewsRoot .ff-tools :is(button,select){ font-size:.8em; }
#hkaFfewsRoot .ff-accent{ border-color:var(--ff-navy); background:var(--ff-navy); color:#fff; }
#hkaFfewsRoot .ff-settings{ position:absolute; bottom:72px; right:20px; z-index:900; width:320px; max-width:calc(100vw - 40px); padding:22px; border-radius:9px; background:#fff; border:1px solid #b4c6d7; box-shadow:0 12px 45px #102e5033; font-size:13px; }
#hkaFfewsRoot .ff-settings h2{ font-size:18px; margin-bottom:16px; }
#hkaFfewsRoot .ff-settings label{ display:grid; gap:5px; margin-bottom:12px; }
#hkaFfewsRoot .ff-settings input{ width:100%; padding:10px; border:1px solid #b5c5d4; border-radius:5px; color:var(--ff-navy); background:white; }
#hkaFfewsRoot .ff-settings p{ font-size:11px; line-height:1.5; color:var(--ff-muted); margin:14px 0; }
#hkaFfewsRoot .ff-settings button{ margin-right:7px; }
#hkaFfewsRoot .ff-settings-status{ display:block; color:#a02d30; margin-bottom:10px; }
#hkaFfewsRoot .ff-hint{ position:absolute; bottom:80px; left:50%; transform:translateX(-50%); padding:12px 16px; background:#102e50; color:#fff; border:1px solid var(--ff-gold); z-index:901; border-radius:6px; }
@media(min-width:2100px) { #hkaFfewsRoot :is(button,select){min-height:50px;} #hkaFfewsRoot .ff-legend{bottom:160px;padding:20px;} }
@media(max-height:820px) and (min-width:1101px) { #hkaFfewsRoot .ff-header{padding-top:12px;padding-bottom:12px;} #hkaFfewsRoot .ff-main{padding:10px;gap:10px;} #hkaFfewsRoot .ff-rail{gap:6px;grid-template-rows:auto repeat(5,minmax(94px,1fr));} #hkaFfewsRoot .ff-card{padding:8px 10px;} #hkaFfewsRoot .ff-detail{padding:14px;gap:10px;} #hkaFfewsRoot .ff-chart svg{max-height:88px;} #hkaFfewsRoot .ff-rain-hero strong{font-size:48px;} }
@media(max-width:1100px) { #hkaFfewsRoot{overflow:auto;grid-template-rows:auto auto 1fr auto;} #hkaFfewsRoot .ff-main{grid-template-columns:230px minmax(0,1fr);min-height:740px;} #hkaFfewsRoot .ff-rail{grid-row:1/3;} #hkaFfewsRoot .ff-map-panel{min-height:440px;} #hkaFfewsRoot .ff-detail{display:grid;grid-template-columns:1fr 1fr;gap:14px;overflow:visible;} #hkaFfewsRoot .ff-detail-head{grid-row:1;} #hkaFfewsRoot .ff-rain-hero{grid-row:1;} #hkaFfewsRoot .ff-metrics{grid-column:1/3;} #hkaFfewsRoot .ff-source{grid-column:1/3;} #hkaFfewsRoot .ff-footer{flex-wrap:wrap;} #hkaFfewsRoot .ff-title span{display:none;} }
@media(max-width:640px) { #hkaFfewsRoot .ff-header{flex-wrap:wrap;padding:14px;gap:14px;} #hkaFfewsRoot .ff-title h1{font-size:24px;} #hkaFfewsRoot .ff-brand{flex:1;} #hkaFfewsRoot .ff-brand strong{font-size:12px;} #hkaFfewsRoot .ff-brand img{width:36px;height:36px;} #hkaFfewsRoot .ff-clock{width:100%;display:flex;justify-content:space-between;align-items:center;} #hkaFfewsRoot .ff-clock strong{font-size:16px;} #hkaFfewsRoot .ff-strip{gap:8px 14px;flex-wrap:wrap;padding:10px 14px;} #hkaFfewsRoot .ff-strip>:last-child{margin-left:0;} #hkaFfewsRoot .ff-main{display:flex;flex-direction:column;min-height:unset;padding:10px;gap:12px;} #hkaFfewsRoot .ff-rail{display:flex;overflow:auto;padding:3px;gap:8px;min-height:146px;} #hkaFfewsRoot .ff-rail h2{display:none;} #hkaFfewsRoot .ff-card{min-width:200px;} #hkaFfewsRoot .ff-map-panel{height:480px;min-height:480px;} #hkaFfewsRoot .ff-map-head{padding:12px 14px;} #hkaFfewsRoot .ff-detail{padding:18px;} #hkaFfewsRoot .ff-footer{padding:12px;gap:10px;} #hkaFfewsRoot .ff-tools{gap:6px;width:100%;} #hkaFfewsRoot .ff-tools :is(button,select){flex:1;font-size:11px;padding:8px;} #hkaFfewsRoot .ff-settings{position:fixed;bottom:90px;} }
@media(prefers-reduced-motion:reduce) { #hkaFfewsRoot *{scroll-behavior:auto!important;transition:none!important;} }

/* Revisi 4.12 — SPI export picker */
#hkaSpiExportDialog{position:fixed;inset:0;z-index:100100;display:grid;place-items:center;padding:20px;background:#102e5080;font:14px/1.5 system-ui,sans-serif;color:#102e50;}
#hkaSpiExportDialog>section{width:min(540px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border:1px solid #dce4ed;border-radius:14px;box-shadow:0 18px 64px #102e5033;padding:24px;}
#hkaSpiExportDialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px;}
#hkaSpiExportDialog h2{font-size:20px;margin:0;color:#102e50;}
#hkaSpiExportDialog label{display:block;font-weight:600;margin-bottom:8px;}
#hkaSpiExportDialog select{width:100%;max-width:100%;min-height:44px;background:#f3f6fa;border:1px solid #c6d3e0;border-radius:8px;padding:10px;font:inherit;color:inherit;}
#hkaSpiExportDialog button{min-height:44px;padding:10px 16px;border:1px solid #dce4ed;border-radius:8px;background:#f3f6fa;color:#173b60;font:600 13px/1.4 system-ui;cursor:pointer;}
#hkaSpiExportDialog header button{width:44px;padding:0;background:#fff;font-size:24px;}
#hkaSpiExportDialog button.hka-spi-export-primary{background:#173b60;border-color:#173b60;color:#fff;}
#hkaSpiExportDialog button:disabled{opacity:.5;cursor:default;}
#hkaSpiExportDialog :focus-visible{outline:3px solid #d7ad4b;outline-offset:3px;}
#hkaSpiExportDialog .hka-spi-export-status{min-height:44px;color:#52677c;overflow-wrap:anywhere;margin:16px 0;}
#hkaSpiExportDialog footer{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
@media(max-width:480px){#hkaSpiExportDialog{padding:12px;}#hkaSpiExportDialog>section{padding:18px;}}

/* Revisi 4.13 — availability export */
body.hka-modern-nav #hkaCoverageExportButton{width:auto!important;min-width:96px!important;padding:0 12px!important;font-size:12px!important;white-space:nowrap;}
#hkaCoverageExport{position:fixed;inset:0;z-index:100110;display:grid;place-items:center;background:#102e5080;padding:20px;color:#102e50;font:14px/1.5 system-ui,sans-serif;}
#hkaCoverageExport>section{width:min(560px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border:1px solid #dce4ed;border-radius:14px;box-shadow:0 18px 64px #102e5033;padding:24px;}
#hkaCoverageExport header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px;}
#hkaCoverageExport h2{margin:0;font-size:20px;color:#102e50;}
#hkaCoverageExport label{display:grid;gap:7px;font-weight:600;min-width:0;}
#hkaCoverageExport .hka-coverage-export-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#hkaCoverageExport .hka-coverage-export-fields>label:last-child{grid-column:1/-1;}
#hkaCoverageExport .hka-coverage-export-range{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
#hkaCoverageExport [hidden]{display:none!important;}
#hkaCoverageExport :is(select,input){box-sizing:border-box;width:100%;min-height:44px;border:1px solid #c6d3e0;border-radius:8px;background:#f3f6fa;padding:10px;color:inherit;font:inherit;}
#hkaCoverageExport button{min-height:44px;padding:10px 16px;border:1px solid #dce4ed;border-radius:8px;background:#f3f6fa;color:#173b60;font:600 13px/1.4 system-ui;cursor:pointer;}
#hkaCoverageExport header button{width:44px;padding:0;background:#fff;font-size:24px;}
#hkaCoverageExport button.hka-coverage-export-primary{color:#fff;background:#173b60;border-color:#173b60;}
#hkaCoverageExport :disabled{opacity:.55;cursor:default;}
#hkaCoverageExport :focus-visible{outline:3px solid #d7ad4b;outline-offset:3px;}
#hkaCoverageExport .hka-coverage-export-status{min-height:42px;margin:18px 0 12px;color:#52677c;overflow-wrap:anywhere;}
#hkaCoverageExport progress{width:100%;height:9px;accent-color:#173b60;margin-bottom:14px;}
#hkaCoverageExport footer{display:flex;justify-content:flex-end;}
@media(max-width:480px){#hkaCoverageExport{padding:12px;}#hkaCoverageExport>section{padding:18px;}#hkaCoverageExport .hka-coverage-export-fields{grid-template-columns:1fr;}}

/* Revisi 4.14 — reserved control rail and bounded panel layout. */
body.hka-modern-nav .hka-display-map-control{
  display: flex; flex-direction: column; gap: calc(var(--hka-map-tool-step) - var(--hka-map-tool-size));
  height: auto; width: var(--hka-map-tool-size); margin: 0;
}
body.hka-modern-nav :is(#hkaDisplayToggle,#hkaFfewsToggle){
  box-sizing: border-box; display: grid; place-items: center; flex: 0 0 var(--hka-map-tool-size);
  width: var(--hka-map-tool-size); height: var(--hka-map-tool-size); padding: 11px; margin: 0;
  border: 1px solid var(--hka-line); border-radius: 11px; color: var(--hka-primary); background: var(--hka-surface);
  box-shadow: 0 4px 16px #102e501a; cursor: pointer;
}
body.hka-modern-nav :is(#hkaDisplayToggle,#hkaFfewsToggle) svg{ width: 21px; height: 21px; }
body.hka-modern-nav :is(#hkaDisplayToggle,#hkaFfewsToggle):hover{ background: var(--hka-hover); }
body.hka-modern-nav :is(#hkaDisplayToggle,#hkaFfewsToggle):focus-visible{ outline: 3px solid var(--hka-focus); outline-offset: 2px; }
body.hka-modern-nav .hka-panel-parked{ display: none !important; }
body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search){
  min-width: 0 !important; max-height: calc(100dvh - 90px) !important; overflow-y: auto; overscroll-behavior: contain;
}
body.hka-modern-nav :is(.hka-county-rows,.telemetry-dashboard-list,.hka-nav-drawer,.hka-workflow-content){ overscroll-behavior: contain; }
body.hka-modern-nav :is(.bws-hydro-overlay,.data-tools-backdrop,.bws-rc-modal,.bws-dm-modal,.menu-auth-backdrop,.hka-nav-backdrop){
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.hka-modern-nav.hka-modern-nav #telemetryDashboardPanel{
  position: fixed; top: max(68px, env(safe-area-inset-top)); bottom: max(26px, env(safe-area-inset-bottom));
  right: calc(var(--hka-map-tool-right) + var(--hka-map-tool-size) + 12px); height: auto;
  max-height: calc(100dvh - 94px); display: flex; flex-direction: column;
}
body.hka-modern-nav #telemetryDashboardPanel .telemetry-dashboard-list{ min-height: 0; max-height: none; flex: 1; overflow: auto; }
@media (min-width: 1025px) {
  body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search){
    max-width: calc(100vw - var(--hka-nav-space) - 110px) !important;
  }
}
@media (max-width: 1024px) {
  body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search){
    top: max(68px, calc(env(safe-area-inset-top) + 58px)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: calc(var(--hka-map-tool-right) + var(--hka-map-tool-size) + 8px) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important; width: auto !important;
    max-width: none !important; max-height: calc(100dvh - 84px) !important;
  }
  body.hka-modern-nav.hka-modern-nav #telemetryDashboardPanel{
    left: max(10px, env(safe-area-inset-left)); right: calc(var(--hka-map-tool-right) + var(--hka-map-tool-size) + 8px); width: auto;
  }
}
@media (max-height: 540px) {
  body.hka-modern-nav{ --hka-map-tool-size: 40px; --hka-map-tool-step: 46px; --hka-map-tool-bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  body.hka-modern-nav :is(.hka-feature,.telemetry-dashboard-panel,.hka-workflow-pane,.hka-nav-drawer){ transition: none !important; }
}

/* Revisi 4.15 */
body.hka-modern-nav .menu-auth-password-toggle{ width:36px; min-width:36px; padding:7px; display:grid; place-items:center; color:var(--hka-navy,#17324f); background:#edf2f7; }
body.hka-modern-nav .menu-auth-password-toggle svg{ width:20px; height:20px; pointer-events:none; }
body.hka-modern-nav .menu-auth-password-wrap input{ padding-right:50px; }
.hka-observation-export{ position:fixed; inset:0; z-index:40000; display:grid; place-items:center; padding:20px; background:rgba(13,32,51,.46); }
.hka-observation-export > section{ width:min(620px,100%); max-height:calc(100dvh - 40px); overflow:auto; background:#fff; border:1px solid #dbe3eb; border-radius:18px; box-shadow:0 24px 72px rgba(13,32,51,.24); color:#17324f; font-family:inherit; }
.hka-observation-export header{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid #e4eaf0; }
.hka-observation-export h2{ margin:0; font-size:19px; }
.hka-observation-export header button{ border:0; border-radius:10px; width:36px; height:36px; font-size:25px; color:#17324f; background:#edf2f7; cursor:pointer; }
.hka-observation-fields{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; padding:24px; }
.hka-observation-fields label{ display:flex; flex-direction:column; gap:8px; min-width:0; font-size:12px; font-weight:700; }
.hka-observation-fields label[hidden]{ display:none; }
.hka-observation-fields label:has(#hkaObservationStation){ grid-column:1/-1; }
.hka-observation-fields select,
.hka-observation-fields input{ width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:9px; min-height:42px; padding:9px 11px; background:#fff; color:#17324f; font:inherit; font-size:13px; }
.hka-observation-export footer{ padding:16px 24px; display:flex; justify-content:flex-end; border-top:1px solid #e4eaf0; }
.hka-observation-export footer button{ padding:11px 24px; border:0; border-radius:9px; background:#173f64; color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.hka-observation-export button:disabled{ opacity:.5; cursor:wait; }
.hka-observation-export [role=status]{ margin:0 24px 16px; font-size:12px; }
.hka-observation-export progress{ margin:0 24px 16px; width:calc(100% - 48px); accent-color:#173f64; }
.hka-observation-export :focus-visible{ outline:3px solid #d9ae42; outline-offset:2px; }
@media(max-width:520px) { .hka-observation-export{padding:12px;} .hka-observation-fields{grid-template-columns:1fr; padding:18px;} .hka-observation-export > section{max-height:calc(100dvh - 24px);} }

/* Revisi 4.16 — admin controls, one palette and viewport-aware workspaces. */
:root{
  --hka-vv-width: 100vw; --hka-vv-height: 100vh; --hka-vv-height: 100dvh;
  --hka-vv-left: 0px; --hka-vv-top: 0px;
  --hka-edge-top: max(12px, env(safe-area-inset-top, 0px));
  --hka-edge-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --hka-edge-left: max(12px, env(safe-area-inset-left, 0px));
  --hka-edge-right: max(12px, env(safe-area-inset-right, 0px));
}
/* Hidden before scripts and while the session is unresolved. */
html:not([data-hka-admin="true"]) body.hka-modern-nav.hka-modern-nav :is(#hkaDisplayMapControl,#hkaDisplayToggle,#hkaFfewsToggle,#hkaDirectionToggle,#bwsUserLocationButton,.hka-map-tools,.bws-user-location-control),
html:not([data-hka-admin="true"]) :is(#hkaDisplayRoot,#hkaFfewsRoot),
html body.hka-modern-nav.hka-modern-nav :is(#hkaDisplayMapControl,#hkaDisplayToggle,#hkaFfewsToggle,.hka-map-tools,.bws-user-location-control)[hidden]{ display: none !important; }
html:not([data-hka-admin="true"]) .bws-user-location-control{ display: none !important; }
body.hka-modern-nav{
  --hka-navy: #142f4c; --hka-primary: #1c4b72; --hka-teal: #1c4b72;
  --hka-muted: #586b80; --hka-line: #dce4ec; --hka-soft: #f3f6fa;
  --hka-hover: #eaf0f7; --hka-surface: #ffffff; --hka-gold: #c69c43;
  --hka-focus: #8caed0; --hka-shadow: 0 16px 48px #122e4b1a, 0 2px 8px #122e4b0a;
  --hka-panel-left: calc(var(--hka-nav-space) + 16px);
  --hka-panel-right: calc(var(--hka-map-tool-right) + var(--hka-map-tool-size) + 16px);
  --hka-panel-top: var(--hka-edge-top);
  color: var(--hka-navy); font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu{
  top: calc(var(--hka-vv-top) + var(--hka-edge-top)) !important;
  bottom: auto !important; left: calc(var(--hka-vv-left) + var(--hka-edge-left)) !important;
  height: calc(var(--hka-vv-height) - var(--hka-edge-top) - var(--hka-edge-bottom)) !important;
}
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-drawer{ border-color: var(--hka-line); border-radius: 16px; background: #fff !important; box-shadow: var(--hka-shadow); }
body.hka-modern-nav #bwsUnifiedMenu .hka-nav-brand{ padding-bottom: 16px; }
body.hka-modern-nav #bwsUnifiedMenu .hka-brand-copy strong{ font-size: 14px; letter-spacing: -.2px; }
body.hka-modern-nav #bwsUnifiedMenu .hka-group-title{ font-size: 10px; letter-spacing: .65px; color: var(--hka-muted); }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature{ min-height: 44px; border-radius: 9px; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature .hka-feature-label{ font-size: 13px; font-weight: 550; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature:is(.is-active,[aria-expanded="true"],[aria-pressed="true"]){ background: var(--hka-hover) !important; color: var(--hka-primary) !important; box-shadow: inset 3px 0 var(--hka-primary) !important; }
body.hka-modern-nav #bwsUnifiedMenu .hka-feature-search{ border-radius: 10px; background: var(--hka-soft); }

/* Side panels occupy only the visible viewport; content scrolls inside them. */
html body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,#telemetryDashboardPanel){
  position: fixed !important; box-sizing: border-box !important;
  top: calc(var(--hka-vv-top) + var(--hka-panel-top)) !important;
  left: calc(var(--hka-vv-left) + var(--hka-panel-left)) !important;
  right: auto !important; bottom: auto !important; margin: 0 !important;
  width: min(var(--hka-panel-width, 880px), calc(var(--hka-vv-width) - var(--hka-panel-left) - var(--hka-panel-right))) !important;
  max-width: calc(var(--hka-vv-width) - var(--hka-panel-left) - var(--hka-panel-right)) !important;
  height: auto !important; min-width: 0 !important; min-height: 0 !important;
  max-height: calc(var(--hka-vv-height) - var(--hka-panel-top) - var(--hka-edge-bottom)) !important;
  overflow: auto !important; overscroll-behavior: contain; scrollbar-width: thin;
  border: 1px solid var(--hka-line) !important; border-radius: 16px !important;
  background: var(--hka-surface) !important; color: var(--hka-navy) !important;
  box-shadow: var(--hka-shadow) !important; z-index: 270000 !important;
  transform: none !important; scroll-padding-block: 76px 16px;
}
body.hka-modern-nav :is(.quick-search,#telemetryDashboardPanel){ --hka-panel-width: 440px; }
body.hka-modern-nav .data-range-panel{ --hka-panel-width: 960px; }
html body.hka-modern-nav.hka-modern-nav #telemetryDashboardPanel{
  left: calc(var(--hka-vv-left) + var(--hka-vv-width) - var(--hka-panel-right) - min(440px, var(--hka-vv-width) - var(--hka-panel-left) - var(--hka-panel-right))) !important;
}
body.hka-modern-nav #telemetryDashboardPanel .telemetry-dashboard-list{ flex: 0 0 auto; max-height: none; overflow: visible; }
body.hka-modern-nav :is(.data-range-list,.hka-workflow-content){ min-width: 0; min-height: 0; }

/* Dialog roots and their cards share bounds, including export and login. */
html body.hka-modern-nav :is(.bws-hydro-overlay,.data-tools-backdrop,.bws-rc-modal,.bws-dm-modal,#bwsDemWorkspace,#hkaCoverageExport,#hkaSpiExportDialog,#hkaObservationExport){
  position: fixed !important; box-sizing: border-box !important;
  inset: auto !important; top: var(--hka-vv-top) !important; left: var(--hka-vv-left) !important;
  width: var(--hka-vv-width) !important; height: var(--hka-vv-height) !important;
  max-width: none !important; max-height: none !important; min-height: 0 !important;
  padding: var(--hka-edge-top) var(--hka-edge-right) var(--hka-edge-bottom) var(--hka-edge-left) !important;
  overflow: auto !important; overscroll-behavior: contain; z-index: 2147482700 !important;
  background: #142f4c66 !important; align-items: safe center; justify-items: center;
}
html body.hka-modern-nav.hka-modern-nav :is(.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.menu-auth-dialog,.bws-dem-workspace-shell,#hkaCoverageExport > section,#hkaSpiExportDialog > section,#hkaObservationExport > section){
  box-sizing: border-box !important; min-width: 0 !important; min-height: 0 !important;
  max-width: 100% !important;
  max-height: calc(var(--hka-vv-height) - var(--hka-edge-top) - var(--hka-edge-bottom)) !important;
  overflow: auto !important; overscroll-behavior: contain; scrollbar-width: thin;
  border: 1px solid var(--hka-line) !important; border-radius: 16px !important;
  background: #fff !important; box-shadow: var(--hka-shadow) !important; color: var(--hka-navy) !important;
  scroll-padding-block: 76px 16px;
}
body.hka-modern-nav :is(.data-tools-dialog,.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.bws-dem-workspace-shell) > *{ min-width: 0; }
body.hka-modern-nav :is(.bws-hydro-body,.data-tools-body,.bws-rc-body,.bws-dm-body,.bws-dem-workspace-content){ min-height: 0; min-width: 0; overscroll-behavior: contain; }
html body.hka-modern-nav.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.flood-scenario-header,.coord-panel-header,.data-tools-head,.bws-hydro-head,.bws-rc-head,.bws-dm-head,.bws-dem-workspace-header,.telemetry-dashboard-header,#hkaObservationExport header,#hkaCoverageExport header,#hkaSpiExportDialog header){
  position: sticky; top: 0; z-index: 31; flex-shrink: 0; min-width: 0;
  padding: 18px 20px !important; gap: 12px; color: var(--hka-navy) !important;
  background: #fff !important; border-bottom: 1px solid var(--hka-line) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.bws-hydro-head) :is(h2,h3,strong){ overflow-wrap: anywhere; }
html body.hka-modern-nav.hka-modern-nav :is(.spi-close-button,.dfa-close,.na-close,.flood-scenario-close,.bws-panel-close,.data-tools-close,.bws-hydro-close,.bws-rc-close,.bws-dm-close,.menu-auth-close,#bwsDemWorkspaceClose,.hka-upload-close){ flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; border-radius: 10px !important; }
body.hka-modern-nav :is(.hka-workflow-tabs,.bws-hydro-tabs,.bws-hydro-chart-types){ max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
body.hka-modern-nav :is(.hka-workflow-tabs,.bws-hydro-tabs) > button{ flex-shrink: 0; min-height: 42px; }
body.hka-modern-nav :is(.bws-rc-controls,.bws-sync-toolbar,.hka-coverage-export-fields,.hka-observation-fields) > *{ min-width: 0; }
body.hka-modern-nav :is(.bws-hydro-dialog,.bws-rc-dialog,.data-tools-dialog,.export-data-panel,.spi-panel,.hka-observation-export) :is(input,select,textarea){ box-sizing: border-box; max-width: 100%; }

/* Public map tools close the unused gaps when admin tools are hidden. */
html:not([data-hka-admin="true"]) body.hka-modern-nav.hka-modern-nav .hka-main-map .leaflet-control-layers{ bottom: var(--hka-map-tool-bottom) !important; }
html:not([data-hka-admin="true"]) body.hka-modern-nav.hka-modern-nav #telemetryDashboardShell{ bottom: calc(var(--hka-map-tool-bottom) + var(--hka-map-tool-step)) !important; }
body.hka-modern-nav.hka-modern-nav .hka-main-map .leaflet-control-layers-expanded .leaflet-control-layers-list{
  max-height: calc(var(--hka-vv-height) - var(--hka-edge-top) - var(--hka-map-tool-bottom) - 3 * var(--hka-map-tool-step)) !important;
}
html:not([data-hka-admin="true"]) body.hka-modern-nav.hka-modern-nav .hka-main-map .leaflet-control-layers-expanded .leaflet-control-layers-list{
  max-height: calc(var(--hka-vv-height) - var(--hka-edge-top) - var(--hka-map-tool-bottom)) !important;
}
html body.hka-modern-nav :is(#hkaDisplayRoot,#hkaFfewsRoot){
  top: var(--hka-vv-top); left: var(--hka-vv-left); right: auto; bottom: auto;
  width: var(--hka-vv-width); height: var(--hka-vv-height); min-height: 0;
  box-sizing: border-box; overscroll-behavior: contain;
}
html body.hka-modern-nav #hkaFfewsRoot .ff-settings{ max-height: calc(var(--hka-vv-height) - 32px); overflow: auto; }

@media (max-width: 1024px) {
  body.hka-modern-nav{ --hka-panel-left: var(--hka-edge-left); --hka-panel-right: var(--hka-edge-right); }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu{ height: 0 !important; width: 0 !important; }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-nav-drawer{
    top: calc(var(--hka-vv-top) + var(--hka-edge-top)); bottom: auto;
    left: calc(var(--hka-vv-left) + var(--hka-edge-left));
    width: min(320px, calc(var(--hka-vv-width) - var(--hka-edge-left) - var(--hka-edge-right)));
    height: calc(var(--hka-vv-height) - var(--hka-edge-top) - var(--hka-edge-bottom));
    max-height: none;
  }
  body.hka-modern-nav .hka-nav-backdrop:not([hidden]){ width: var(--hka-vv-width); height: var(--hka-vv-height); top: var(--hka-vv-top); left: var(--hka-vv-left); }
  html body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,.quick-search,#telemetryDashboardPanel){ width: calc(var(--hka-vv-width) - var(--hka-edge-left) - var(--hka-edge-right)) !important; }
  html body.hka-modern-nav.hka-modern-nav #telemetryDashboardPanel{ left: calc(var(--hka-vv-left) + var(--hka-edge-left)) !important; }
  body.hka-modern-nav :is(.bws-hydro-dialog,.bws-rc-dialog,.bws-dm-dialog,.data-tools-dialog,.bws-dem-workspace-shell){ width: 100% !important; }
}
/* The visual viewport may shrink without a CSS media-query change (zoom/keyboard). */
html[data-hka-compact="true"] body.hka-modern-nav{ --hka-panel-left: var(--hka-edge-left); --hka-panel-right: var(--hka-edge-right); }
html[data-hka-short="true"]{ --hka-edge-top: max(6px, env(safe-area-inset-top, 0px)); --hka-edge-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px), (max-height: 460px) {
  html body.hka-modern-nav.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.flood-scenario-header,.data-tools-head,.bws-hydro-head,.bws-rc-head,.bws-dm-head,.bws-dem-workspace-header,#hkaObservationExport header){ padding: 12px 14px !important; gap: 8px; }
  body.hka-modern-nav :is(.hka-observation-fields,.hka-coverage-export-fields,.bws-rc-controls,.bws-sync-toolbar){ grid-template-columns: minmax(0, 1fr) !important; }
  body.hka-modern-nav :is(.hka-observation-fields,.hka-coverage-export-fields,.bws-rc-controls,.bws-sync-toolbar) > *{ grid-column: auto !important; }
  html body.hka-modern-nav.hka-modern-nav :is(input:not([type]), input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea){ font-size: 16px !important; }
  body.hka-modern-nav :is(.data-range-panel,.export-data-panel,.data-tools-dialog,.menu-auth-dialog,.bws-hydro-dialog,.hka-observation-export) :is(button,select){ min-height: 42px; }
  html body.hka-modern-nav :is(#hkaDisplayRoot,#hkaFfewsRoot){ overflow: auto; }
  html body.hka-modern-nav #hkaDisplayRoot .hka-display-tools{ position: sticky; bottom: 0; left: auto; transform: none; width: auto; max-width: 100%; margin: 12px 0 0; opacity: 1; visibility: visible; pointer-events: auto; }
  html body.hka-modern-nav #hkaDisplayRoot .hka-display-stage{ min-height: 240px; }
  html body.hka-modern-nav #hkaFfewsRoot{ grid-template-rows: auto auto minmax(480px, 1fr) auto; }
  html body.hka-modern-nav #hkaFfewsRoot .ff-tools{ flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  body.hka-modern-nav :is(.hka-feature,.hka-nav-drawer,.data-range-panel,.export-data-panel,.spi-panel){ animation: none !important; transition: none !important; }
}

/* Revisi 4.17 — login hit targets and readable blue navigation. */
/* The backdrop is a child of the modal, not the dialog's viewport root. */
html body.hka-modern-nav.hka-modern-nav .menu-auth-modal{
  position: fixed !important; inset: auto !important;
  top: var(--hka-vv-top) !important; left: var(--hka-vv-left) !important;
  width: var(--hka-vv-width) !important; height: var(--hka-vv-height) !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  box-sizing: border-box !important;
  padding: var(--hka-edge-top) var(--hka-edge-right) var(--hka-edge-bottom) var(--hka-edge-left) !important;
  isolation: isolate; z-index: 2147482800 !important; overflow: auto !important;
  overscroll-behavior: contain; align-items: safe center; justify-items: center;
  background: transparent !important;
}
html body.hka-modern-nav.hka-modern-nav .menu-auth-modal[hidden]{ display: none !important; }
html body.hka-modern-nav.hka-modern-nav .menu-auth-backdrop{
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  box-sizing: border-box !important; width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  border-radius: 0 !important; overflow: hidden !important; transform: none !important;
  background: #142f4c66 !important; box-shadow: none !important; pointer-events: auto;
}
html body.hka-modern-nav.hka-modern-nav .menu-auth-dialog{
  position: relative !important; z-index: 1 !important; pointer-events: auto;
  width: min(420px, 100%) !important; margin: 0 !important;
  scroll-padding-block: 16px;
}
html body.hka-modern-nav.hka-modern-nav .menu-auth-dialog :is(h2,.menu-auth-field,input){ color: var(--hka-primary) !important; }

/* Keep the legacy 20px icon-span rule out of navigation labels. */
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu :is(.hka-feature-copy,.hka-feature-label,.hka-group-label,.hka-brand-name,.hka-brand-name strong,.hka-brand-name > span,.hka-login-button span,.hka-logout-label){
  writing-mode: horizontal-tb !important; text-orientation: mixed;
  word-break: normal !important; overflow-wrap: normal !important; hyphens: none;
  letter-spacing: normal !important; text-transform: none !important; text-align: left;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature{
  flex-direction: row !important; align-items: center !important; gap: 12px !important;
  color: var(--hka-primary) !important; background: transparent !important;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature-copy{
  flex: 1 1 0%; width: auto !important; min-width: 0 !important; max-width: 100%; align-items: stretch;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature .hka-feature-label{
  width: auto !important; height: auto !important; min-width: 0 !important;
  font: 600 14px/1.45 var(--hka-font) !important; white-space: normal !important;
  color: var(--hka-primary) !important;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature .hka-feature-icon{
  flex: 0 0 22px !important; width: 22px !important; height: 22px !important;
  color: var(--hka-primary) !important;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature:is(:hover,:focus-visible){ background: var(--hka-hover) !important; }
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature.hka-is-active{
  color: var(--hka-primary) !important; background: var(--hka-hover) !important;
  border-color: var(--hka-line) !important; box-shadow: inset 3px 0 var(--hka-primary) !important;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature.hka-is-active :is(.hka-feature-label,.hka-feature-icon){ color: var(--hka-primary) !important; }
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-group-title{ color: var(--hka-primary) !important; background: transparent !important; }
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-group-label{
  flex: 1 1 auto; min-width: 0; white-space: normal !important;
  font: 650 11px/1.4 var(--hka-font) !important; color: var(--hka-primary) !important;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu :is(.hka-brand-name,.hka-brand-name strong,.hka-brand-name > span,.hka-logo-fallback){ color: var(--hka-primary) !important; }
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu :is(.hka-nav-collapse,.hka-nav-close,.hka-feature-search,.hka-login-button){
  color: var(--hka-primary) !important; background: var(--hka-soft) !important; border-color: var(--hka-line) !important;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature-search :is(input,svg,kbd,button){ color: var(--hka-primary) !important; }
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature-search input::placeholder{ color: #526b84 !important; }
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu :is(#bwsPublicSearchButton.hka-map-search,[data-bws-menu-logout]){
  color: var(--hka-primary) !important; background: var(--hka-soft) !important; border-color: var(--hka-line) !important;
}
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-nav-footer{ border-color: var(--hka-line) !important; }
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu :is(.hka-login-button span,.hka-logout-label){ font: 600 13px/1.4 var(--hka-font) !important; }
html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenuToggle{ color: var(--hka-primary) !important; background: #fff !important; border-color: var(--hka-line) !important; }
html body.hka-modern-nav.hka-modern-nav :is(.hka-workflow-tabs,.bws-availability-tabs,.bws-hydro-tabs,.bws-sync-category-tabs,.data-tools-tabs,.export-product-tabs,.bws-dem-download-mode,.flood-scenario-mode,.coord-format-switch) > button{
  color: var(--hka-primary) !important; line-height: 1.45 !important;
  word-break: normal !important; letter-spacing: normal !important;
}
@media (max-width: 1024px) {
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-nav-drawer{ padding: 14px 12px 12px; }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-nav-brand{
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px;
    align-items: center; gap: 10px; padding: 0 2px 14px;
  }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-brand-name{ width: auto; min-width: 0; }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-brand-name strong{ font-size: 14px; line-height: 1.4; }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-brand-name > span{ font-size: 12px; line-height: 1.4; white-space: normal; }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-nav-close{ width: 40px; height: 40px; }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-feature-search kbd{ display: none; }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .bws-menu-items{
    box-sizing: border-box; width: 100% !important; min-width: 0 !important;
    max-width: 100% !important; grid-template-columns: none !important;
  }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .bws-menu-items .hka-feature{
    box-sizing: border-box; width: 100% !important; height: auto !important;
    min-height: 46px; padding: 10px 12px !important; justify-content: flex-start !important;
  }
  html body.hka-modern-nav.hka-modern-nav #bwsUnifiedMenu .hka-group-title{
    box-sizing: border-box; height: auto; min-height: 34px; padding: 8px 12px;
  }
  html body.hka-modern-nav.hka-modern-nav :is(.hka-workflow-tabs,.bws-hydro-tabs,.data-tools-tabs,.export-product-tabs) > button{
    flex: 0 0 auto !important; min-height: 42px; font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* Revisi 4.18 — hidden before navigation initialization, bounded mobile panels. */
html:not([data-hka-admin="true"]) :is(#hkaDisplayMapControl,#hkaDisplayToggle,#hkaFfewsToggle,#hkaDirectionToggle,#bwsUserLocationButton,.hka-map-tools,.bws-user-location-control){
  display: none !important;
}
/* The telemetry panel belongs to this stacking context, so raise its parent. */
html body.hka-modern-nav.hka-modern-nav[data-hka-active-panel="telemetry"] #telemetryDashboardShell{
  z-index: 270000 !important;
}
html body.hka-modern-nav.hka-modern-nav :is(#telemetryDashboardPanel > header,.hka-search-header){
  position: sticky; top: 0; left: 0; z-index: 32; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; min-height: 60px; flex-shrink: 0;
  margin: 0; padding: 12px 16px; color: var(--hka-primary); background: #fff;
  border-bottom: 1px solid var(--hka-line);
}
html body.hka-modern-nav.hka-modern-nav :is(#telemetryDashboardPanel > header,.hka-search-header) h2{
  flex: 1 1 auto; min-width: 0; margin: 0; color: var(--hka-primary) !important;
  font: 650 16px/1.4 var(--hka-font) !important; overflow-wrap: normal;
}
html body.hka-modern-nav.hka-modern-nav :is(.hka-workspace-close,.hka-telemetry-close){
  box-sizing: border-box; display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 8px;
  border: 1px solid var(--hka-line) !important; border-radius: 10px !important;
  color: var(--hka-primary) !important; background: var(--hka-soft) !important;
  font: 500 24px/1 var(--hka-font); cursor: pointer; box-shadow: none !important;
}
.hka-workspace-close svg{ width: 22px; height: 22px; pointer-events: none; }
html body.hka-modern-nav.hka-modern-nav .data-range-header{
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto 40px;
  grid-template-areas: "title actions close"; align-items: center; left: 0;
}
body.hka-modern-nav .data-range-header > h2{ grid-area: title; min-width: 0; margin: 0; }
body.hka-modern-nav .data-range-header > .data-range-actions{
  grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0;
}
body.hka-modern-nav .data-range-header > .hka-workspace-close{ grid-area: close; }
body.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.flood-scenario-header,.data-tools-head,.bws-hydro-head,.bws-rc-head,.bws-dm-head){ left: 0; }
body.hka-modern-nav :is(.dt-table-wrap,.dfa-table-wrap,.na-table-wrap,.bws-dm-table-wrap,.spi-cluster-area-table-wrap){ max-width: 100%; min-width: 0; overscroll-behavior-inline: contain; }
@media (max-width: 1024px) {
  html body.hka-modern-nav.hka-modern-nav :is(.data-range-panel,.export-data-panel,.spi-panel,.dependable-flow-panel,.neraca-air-panel,.flood-scenario-panel,.coord-panel,#telemetryDashboardPanel){
    height: calc(var(--hka-vv-height) - var(--hka-edge-top) - var(--hka-edge-bottom)) !important;
    min-height: 0 !important; border-radius: 14px !important;
  }
  /* A single vertical workspace scroll keeps the full list reachable. */
  html body.hka-modern-nav.hka-modern-nav .data-range-panel .data-range-list{
    max-height: none !important; min-width: 0; overflow: visible !important;
  }
  html body.hka-modern-nav.hka-modern-nav .data-range-header{
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "title close" "actions actions";
  }
  body.hka-modern-nav .data-range-actions > button{ max-width: 100%; white-space: normal; }
  html body.hka-modern-nav.hka-modern-nav :is(.hka-form-grid,.bws-hydro-controls){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body.hka-modern-nav.hka-modern-nav :is(.hka-form-grid,.bws-hydro-controls) > *{ min-width: 0; max-width: 100%; }
}
@media (max-width: 520px) {
  html body.hka-modern-nav.hka-modern-nav :is(.hka-form-grid,.bws-hydro-controls){ grid-template-columns: minmax(0, 1fr); }
}
/* Short landscape screens and a keyboard need compact, reachable header actions. */
html[data-hka-short="true"] body.hka-modern-nav.hka-modern-nav :is(.data-range-header,.export-data-header,.spi-header,.dfa-header,.na-header,.bws-hydro-head,.data-tools-head,#telemetryDashboardPanel > header,.hka-search-header){
  padding: 8px 12px !important; min-height: 52px; gap: 8px;
}
html[data-hka-short="true"] body.hka-modern-nav .data-range-actions{
  flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; max-width: 100%;
}
html[data-hka-short="true"] body.hka-modern-nav .data-range-actions > button{ flex: 0 0 auto; max-width: none; white-space: nowrap; }
html body.hka-modern-nav.hka-modern-nav .hka-direction-popup .leaflet-popup-content{
  width: min(286px, calc(var(--hka-vv-width) - 36px)) !important; min-width: 0 !important;
  max-width: calc(var(--hka-vv-width) - 36px) !important;
}
html body.hka-modern-nav.hka-modern-nav .hka-direction-panel{
  max-height: min(460px, calc(var(--hka-vv-height) - 100px));
}

/* Revisi 4.19 — rainfall frequency workspace. */
.hka-design-rain{
  position: fixed; z-index: 280001; box-sizing: border-box;
  top: var(--hka-vv-top, 0px); left: var(--hka-vv-left, 0px);
  width: var(--hka-vv-width, 100vw); height: var(--hka-vv-height, 100dvh);
  display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #102b4866; color: var(--hka-primary, #173b63); font: 14px/1.5 var(--hka-font, system-ui);
}
.hka-design-rain *,
.hka-design-rain *::before,
.hka-design-rain *::after{ box-sizing: border-box; }
.hka-design-rain [hidden]{ display: none !important; }
.hka-rain-card{
  width: min(1120px, 100%); height: 100%; max-height: 920px; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border: 1px solid var(--hka-line, #dbe5ee); border-radius: 18px; box-shadow: 0 20px 70px #102b4833;
}
.hka-rain-card > header,
.hka-rain-card > footer{
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  background: #fff; border-bottom: 1px solid var(--hka-line, #dbe5ee);
}
.hka-rain-card > footer{ justify-content: flex-end; border-top: 1px solid var(--hka-line, #dbe5ee); border-bottom: 0; }
.hka-rain-card h2{ flex: 1; min-width: 0; margin: 0; font: 650 20px/1.3 var(--hka-font, system-ui); color: var(--hka-primary, #173b63); }
.hka-rain-card h3{ margin: 0; font: 650 16px/1.4 var(--hka-font, system-ui); color: var(--hka-primary, #173b63); }
.hka-rain-body{ flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 22px; scrollbar-gutter: stable; }
.hka-rain-card button,
.hka-rain-card input,
.hka-rain-card select{ font: inherit; color: var(--hka-primary, #173b63); }
.hka-rain-card button{
  min-height: 42px; padding: 9px 16px; border: 1px solid var(--hka-line, #dbe5ee); border-radius: 10px;
  background: var(--hka-soft, #f0f5fa); cursor: pointer; line-height: 1.4;
}
.hka-rain-card button:hover{ background: var(--hka-hover, #e5edf7); }
.hka-rain-card button:disabled{ opacity: .5; cursor: default; }
.hka-rain-card :is(button,input,select,summary):focus-visible{ outline: 3px solid #468cd5; outline-offset: 2px; }
.hka-rain-card button.hka-rain-primary{ background: var(--hka-primary, #173b63); color: #fff; border-color: var(--hka-primary, #173b63); }
.hka-rain-card button.hka-rain-close{ flex: 0 0 42px; display: grid; place-items: center; width: 42px; padding: 8px; }
.hka-rain-fields{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin: 0 0 20px; }
.hka-rain-fields label{ display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; font-weight: 550; }
.hka-rain-fields label > span{ font-size: 12px; color: #4a647e; }
.hka-rain-card :is(select,input[type=number]){ width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--hka-line, #dbe5ee); border-radius: 9px; padding: 10px; background: #fff; }
.hka-rain-actions{ display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.hka-rain-status{ padding: 12px 14px; margin: 0 0 16px; background: #fff7e5; border: 1px solid #f0d6a2; border-radius: 10px; color: #765512; }
.hka-rain-body > progress{ display: block; width: 100%; height: 7px; margin: 12px 0 20px; accent-color: var(--hka-primary, #173b63); }
.hka-rain-summary{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hka-rain-summary:empty{ display: none; }
.hka-rain-summary > div{ display: flex; flex-direction: column; gap: 5px; padding: 16px; border: 1px solid var(--hka-line, #dbe5ee); border-radius: 12px; background: var(--hka-soft, #f0f5fa); }
.hka-rain-summary span{ font-size: 12px; color: #506981; }
.hka-rain-summary strong{ font-size: 21px; line-height: 1.3; font-weight: 650; }
.hka-rain-result-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 12px; }
.hka-rain-result-head select{ width: auto; max-width: 240px; }
.hka-rain-chart{ padding: 12px 0; margin: 0 0 14px; }
.hka-rain-chart > svg{ display: block; width: 100%; height: auto; }
.hka-rain-legend{ display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; font-size: 12px; }
.hka-rain-legend span{ display: inline-flex; align-items: center; gap: 7px; }
.hka-rain-legend span::before{ content: ''; width: 20px; height: 3px; background: var(--rain-line); border-radius: 2px; }
.hka-rain-table-wrap{ max-width: 100%; overflow: auto; border: 1px solid var(--hka-line, #dbe5ee); border-radius: 10px; overscroll-behavior-inline: contain; }
.hka-rain-card table{ width: 100%; border-collapse: collapse; font-size: 12px; margin: 0; }
.hka-rain-card th{ background: var(--hka-soft, #f0f5fa); text-align: left; font-weight: 650; white-space: normal; }
.hka-rain-card :is(th,td){ padding: 11px 12px; border-bottom: 1px solid var(--hka-line, #dbe5ee); vertical-align: middle; font-variant-numeric: tabular-nums; }
.hka-rain-card td{ white-space: nowrap; }
.hka-rain-card tbody tr:last-child td{ border-bottom: 0; }
.hka-rain-card input[type=checkbox]{ width: 20px; height: 20px; accent-color: var(--hka-primary, #173b63); }
.hka-rain-card details{ margin-top: 20px; }
.hka-rain-card summary{ cursor: pointer; padding: 10px 0; font-weight: 650; }
.hka-rain-badge{ display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.hka-rain-badge.is-complete{ color: #216948; background: #e6f4ec; }
.hka-rain-badge.is-incomplete{ color: #78591c; background: #fff2d5; }
@media (max-width: 760px) {
  .hka-design-rain{ padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .hka-rain-card{ border-radius: 13px; max-height: none; }
  .hka-rain-card > header,
.hka-rain-card > footer{ padding: 10px 14px; }
  .hka-rain-card h2{ font-size: 18px; }
  .hka-rain-body{ padding: 15px; scrollbar-gutter: auto; }
  .hka-rain-fields,
.hka-rain-summary{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hka-rain-result-head{ flex-direction: column; align-items: stretch; gap: 10px; }
  .hka-rain-result-head select{ max-width: none; width: 100%; }
  .hka-rain-summary strong{ font-size: 18px; }
  .hka-rain-card table{ min-width: 590px; }
}
@media (max-width: 440px) { .hka-rain-fields{ grid-template-columns: minmax(0, 1fr); } .hka-rain-actions > button{ flex: 1; } }
html[data-hka-short=true] .hka-rain-card > header,
html[data-hka-short=true] .hka-rain-card > footer{ padding: 5px 12px; }