/* WRS GEMPA — unified dark visual system v1.11.2
   Presentation-only refresh: no API, feed, notification transport, or polling changes. */
:root {
  color-scheme: dark !important;
  --wrs-bg-deep: #050b14;
  --wrs-bg: #07111f;
  --wrs-panel: rgba(10, 25, 40, .97);
  --wrs-panel-raised: rgba(15, 35, 53, .98);
  --wrs-line: rgba(91, 181, 218, .23);
  --wrs-line-strong: rgba(66, 202, 242, .52);
  --wrs-text: #eef7ff;
  --wrs-text-muted: #a1b6ca;
  --wrs-cyan: #65def7;
  --wrs-blue: #329de0;
  --wrs-red: #ff8594;
}
html, body {
  color-scheme: dark !important;
  background: var(--wrs-bg-deep) !important;
  color: var(--wrs-text) !important;
}
html[data-wrs-theme="light"] {
  color-scheme: dark !important;
  background: var(--wrs-bg-deep) !important;
  color: var(--wrs-text) !important;
}
html[data-wrs-theme="light"] body,
html[data-wrs-theme="light"] .mobile-page,
html[data-wrs-theme="light"] .mobile-more-controls,
html[data-wrs-theme="light"] .notification-center-panel,
html[data-wrs-theme="light"] .notification-center-item,
html[data-wrs-theme="light"] .notification-center-dialog {
  background-color: var(--wrs-bg) !important;
  color: var(--wrs-text) !important;
}
button, input, select, textarea { color-scheme: dark !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--wrs-cyan) !important;
  outline-offset: 2px !important;
}
#map { background: #081725 !important; }
.leaflet-control-attribution {
  background: rgba(4, 12, 21, .78) !important;
  color: #a7c4d8 !important;
  border: 1px solid rgba(103, 191, 222, .15) !important;
  border-radius: 7px 0 0 0 !important;
}
.leaflet-control-attribution a { color: #7bdff8 !important; }

/* Main map overlays and controls */
.glass-panel {
  color: var(--wrs-text) !important;
  background: linear-gradient(155deg, rgba(8, 24, 39, .96), rgba(5, 15, 27, .96)) !important;
  border: 1px solid var(--wrs-line) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.035) !important;
}
.panel-header {
  color: #e7f7ff !important;
  background: linear-gradient(100deg, rgba(19, 55, 79, .96), rgba(10, 27, 43, .96)) !important;
  border-bottom: 1px solid rgba(105, 189, 222, .18) !important;
}
.rt-mag {
  background: linear-gradient(145deg, #153950, #0b2133) !important;
  border: 1px solid rgba(86, 193, 235, .6) !important;
  box-shadow: inset 0 0 22px rgba(35, 161, 222, .10) !important;
  color: #79e7ff !important;
}
.world-clock-panel {
  background: linear-gradient(145deg, rgba(8, 32, 49, .98), rgba(7, 21, 35, .98)) !important;
  border: 1px solid rgba(77, 198, 229, .3) !important;
  border-radius: 14px !important;
}
.v-toolbar .tb-btn {
  background: linear-gradient(145deg, rgba(10, 25, 41, .98), rgba(5, 14, 25, .98)) !important;
  border: 1px solid rgba(107, 158, 194, .23) !important;
  color: #e7f5ff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}
.v-toolbar .tb-btn:hover, .v-toolbar .tb-btn:focus-visible {
  border-color: var(--wrs-line-strong) !important;
  color: var(--wrs-cyan) !important;
}
.basemap-menu {
  padding: 7px !important;
  border: 1px solid var(--wrs-line) !important;
  border-radius: 15px !important;
  background: rgba(5, 16, 28, .97) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.44) !important;
  backdrop-filter: blur(18px) !important;
}
.basemap-menu .bm-opt {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #afc5d8 !important;
  text-align: left !important;
  padding: 10px 13px !important;
}
.basemap-menu .bm-opt.active {
  background: rgba(34, 152, 205, .2) !important;
  border-color: rgba(91, 210, 243, .31) !important;
  color: #e9fbff !important;
}

/* Four-screen mobile shell: Peta, Detail, Notifikasi, Lainnya */
@media (max-width: 1200px) {
  .mobile-page {
    background:
      radial-gradient(ellipse at 50% -10%, rgba(22, 75, 111, .20), transparent 43%),
      linear-gradient(180deg, #07111f 0%, #050c15 100%) !important;
    color: var(--wrs-text) !important;
  }
  .mobile-page-title {
    padding: calc(18px + env(safe-area-inset-top, 0px)) 4px 16px !important;
    color: #f2f8ff !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
  }
  .mobile-page-title span { color: #f2f8ff !important; }
  .mobile-page-title small {
    display: block !important;
    margin-top: 7px !important;
    color: #91abc4 !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }
  .mobile-page-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 13px;
    border-radius: 4px;
    background: linear-gradient(90deg, #59dcf8, rgba(49,157,224,.12));
  }
  .mobile-bottom-nav {
    height: calc(72px + env(safe-area-inset-bottom,0px)) !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom,0px)) !important;
    gap: 5px !important;
    background: linear-gradient(180deg, rgba(8, 20, 33, .98), rgba(4, 11, 19, .99)) !important;
    border-top: 1px solid rgba(95, 183, 220, .2) !important;
    box-shadow: 0 -12px 34px rgba(0,0,0,.23) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
  }
  .mobile-bottom-nav button {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #829bb5 !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    box-shadow: none !important;
  }
  .mobile-bottom-nav button.active {
    color: #7de4ff !important;
    background: linear-gradient(145deg, rgba(24, 71, 99, .62), rgba(9, 34, 53, .52)) !important;
    border-color: rgba(83, 201, 237, .22) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.045), 0 4px 15px rgba(0,0,0,.15) !important;
  }
  .mobile-bottom-nav .nav-symbol svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
  }
  #mobilePageInfo, #mobilePageLegend, #mobilePageAlerts {
    padding: calc(10px + env(safe-area-inset-top,0px)) 16px calc(92px + env(safe-area-inset-bottom,0px)) !important;
    background:
      radial-gradient(ellipse at 90% 0%, rgba(18, 75, 112, .16), transparent 34%),
      linear-gradient(180deg, #07111f 0%, #050c15 100%) !important;
  }
  .mobile-more-controls {
    gap: 12px !important;
    margin: 0 0 18px !important;
    padding: 13px !important;
    border-radius: 20px !important;
    border: 1px solid var(--wrs-line) !important;
    background: linear-gradient(145deg, rgba(11, 29, 46, .97), rgba(6, 17, 29, .99)) !important;
    color: var(--wrs-text) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
  }
  #mobileMoreControls h2 { color: #82e6ff !important; }
  #mobileMoreControls .more-caption { color: #96aec5 !important; }

  .wrs-diagnostic-card, .wrs-notification-history-card {
    margin: 0 0 12px !important;
    padding: 15px !important;
    border-radius: 17px !important;
    border: 1px solid var(--wrs-line) !important;
    background: linear-gradient(145deg, rgba(12, 31, 48, .98), rgba(6, 17, 29, .99)) !important;
    color: #eaf5ff !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.2) !important;
  }
  .wrs-diagnostic-card h3, .wrs-notification-history-card h3 { color: #eef8ff !important; }
  .wrs-push-filter-kicker { color: #68d8f3 !important; letter-spacing: .12em !important; }
  .wrs-push-filter-desc, .wrs-diagnostic-footnote { color: #98aec3 !important; }

  .wrs-alert-intro {
    margin: 8px 0 14px !important;
    padding: 14px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(80, 188, 222, .24) !important;
    background: linear-gradient(145deg, rgba(14, 39, 58, .98), rgba(7, 22, 36, .98)) !important;
    color: #eaf8ff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  }
  .wrs-alert-intro strong { color: #e4f8ff !important; font-size: 13px !important; }
  .wrs-alert-intro small { color: #9cb8cb !important; font-size: 12px !important; }
  .wrs-alert-intro button {
    width: 42px !important; height: 42px !important; flex: 0 0 42px !important;
    border: 1px solid rgba(100, 206, 239, .25) !important;
    border-radius: 12px !important;
    background: rgba(20, 61, 83, .8) !important;
    color: #79e5ff !important;
  }
  .wrs-alert-section-title {
    margin: 20px 0 10px !important;
    color: #74dff9 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .11em !important;
  }
  .wrs-alert-list, .wrs-alert-news { display: grid !important; gap: 12px !important; }
  .wrs-alert-card, .wrs-alert-news-card, .wrs-news-card {
    min-width: 0 !important;
    padding: 15px !important;
    border: 1px solid rgba(245, 184, 83, .28) !important;
    border-radius: 18px !important;
    background: linear-gradient(150deg, rgba(37, 34, 27, .97), rgba(17, 23, 32, .99)) !important;
    color: #f3ead7 !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.19) !important;
  }
  .wrs-alert-card.severe, .wrs-alert-card.high, .wrs-alert-card.critical {
    border-color: rgba(255, 117, 129, .36) !important;
    background: linear-gradient(150deg, rgba(51, 27, 35, .98), rgba(17, 20, 31, .99)) !important;
  }
  .wrs-alert-card h3, .wrs-alert-news-card h3, .wrs-news-card h3 {
    color: #fff1d9 !important; font-size: 16px !important; line-height: 1.35 !important;
  }
  .wrs-alert-card p, .wrs-alert-news-card p, .wrs-news-card p {
    color: #d7d2c6 !important; font-size: 13px !important; line-height: 1.65 !important;
  }
  .wrs-alert-card time { color: #bdad8d !important; font-size: 10px !important; }
  .wrs-alert-badge {
    border-radius: 8px !important; padding: 5px 8px !important;
    color: #ffd688 !important; background: rgba(130, 88, 25, .18) !important;
  }
  .wrs-alert-area { color: #e0d5bd !important; line-height: 1.55 !important; }
  .wrs-alert-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 7px !important; }
  .wrs-alert-actions button, .wrs-alert-news-card button, .wrs-news-card button {
    min-width: 0 !important; min-height: 39px !important; padding: 7px 5px !important;
    border: 1px solid rgba(94, 198, 231, .29) !important; border-radius: 11px !important;
    background: linear-gradient(145deg, rgba(16, 54, 76, .92), rgba(8, 29, 46, .98)) !important;
    color: #8de8ff !important; font-size: 11px !important; font-weight: 750 !important;
  }
}

/* Notification center: explicit dark colors prevent inherited white cards/low-contrast text. */
.notification-center-tabs {
  border: 1px solid rgba(89, 184, 222, .24) !important;
  border-radius: 16px !important;
  padding: 5px !important;
  background: rgba(5, 16, 28, .97) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.15) !important;
}
.notification-center-tab {
  min-height: 43px !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #8fa9c2 !important;
}
.notification-center-tab.is-active {
  background: linear-gradient(135deg, rgba(28, 126, 169, .42), rgba(16, 59, 86, .78)) !important;
  color: #effbff !important;
  box-shadow: inset 0 0 0 1px rgba(93, 211, 244, .32), 0 4px 12px rgba(0,0,0,.18) !important;
}
.notification-center-panel, [data-nc-panel] {
  color: var(--wrs-text) !important;
  background: transparent !important;
}
.notification-center-push-head h3 { color: #f0f8ff !important; font-size: 20px !important; }
.notification-center-push-head p { color: #9db2c7 !important; }
.notification-center-actions button, .notification-center-filter button, .notification-center-read-all {
  min-height: 38px !important;
  border: 1px solid rgba(94, 182, 219, .24) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(15, 41, 60, .96), rgba(7, 24, 39, .98)) !important;
  color: #aeeaff !important;
}
.notification-center-actions button.danger {
  border-color: rgba(252, 111, 121, .32) !important;
  background: rgba(83, 26, 36, .44) !important;
  color: #ffb0b9 !important;
}
.notification-center-filter { background: rgba(5, 16, 28, .8) !important; border-color: rgba(89,184,222,.2) !important; }
.notification-center-filter button.is-active {
  background: rgba(22, 112, 151, .44) !important;
  border-color: rgba(102, 216, 244, .36) !important;
  color: #effbff !important;
}
.notification-center-status { color: #9bb1c6 !important; line-height: 1.5 !important; }
.notification-center-list { gap: 10px !important; }
.notification-center-item {
  padding: 14px !important;
  border: 1px solid rgba(92, 161, 197, .25) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #0c1e2f 0%, #071523 100%) !important;
  color: #eaf5ff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025) !important;
}
.notification-center-item.is-unread {
  border-color: rgba(77, 204, 238, .52) !important;
  background: linear-gradient(145deg, #10283b 0%, #081827 100%) !important;
  box-shadow: inset 3px 0 #46c9ed, 0 10px 25px rgba(0,0,0,.2) !important;
}
.notification-center-item-title strong { color: #f0f8ff !important; line-height: 1.4 !important; }
.notification-center-item time { color: #9db2c5 !important; font-size: 10px !important; }
.notification-center-item-body {
  color: #c0d0df !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 4 !important;
}
.notification-center-tags { margin-top: 8px !important; gap: 6px !important; }
.notification-center-tag {
  background: rgba(20, 71, 94, .52) !important;
  border: 1px solid rgba(96, 177, 211, .22) !important;
  color: #a9e2f6 !important;
  font-size: 10px !important;
}
.notification-center-item-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 7px !important; }
.notification-center-item-actions button {
  min-width: 0 !important; min-height: 39px !important; padding: 7px 5px !important;
  border: 1px solid rgba(91, 183, 218, .27) !important;
  border-radius: 10px !important;
  background: rgba(15, 45, 64, .9) !important;
  color: #afeaff !important;
  font-size: 11px !important;
}
.notification-center-item-actions button.delete {
  border-color: rgba(246, 110, 122, .26) !important;
  background: rgba(81, 26, 36, .42) !important;
  color: #ffadb4 !important;
}
.notification-center-empty {
  padding: 28px 18px !important;
  border: 1px dashed rgba(99, 177, 211, .28) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(10, 27, 43, .8), rgba(6, 17, 29, .8)) !important;
  color: #a3b9cd !important;
}
.notification-center-empty strong { color: #eef8ff !important; }
.notification-center-empty span { color: #9cb2c7 !important; line-height: 1.6 !important; }
.notification-center-modal {
  background: rgba(1, 7, 13, .82) !important;
  backdrop-filter: blur(12px) !important;
}
.notification-center-dialog {
  border: 1px solid rgba(89, 183, 222, .28) !important;
  border-radius: 22px 22px 15px 15px !important;
  background: #091725 !important;
  color: #eef8ff !important;
}
.notification-center-dialog-head, .notification-center-dialog-foot { background: #07131f !important; border-color: rgba(99,173,207,.18) !important; }
.notification-center-dialog-head h3 { color: #f0f8ff !important; }
.notification-center-dialog-head small { color: #91aac1 !important; }
.notification-center-detail-cell { background: #10273a !important; border-color: rgba(103,184,218,.2) !important; }
.notification-center-detail-cell span { color: #91aac0 !important; }
.notification-center-detail-cell strong { color: #f0f8ff !important; }
.notification-center-detail-text { color: #c8d9e7 !important; font-size: 13px !important; line-height: 1.7 !important; }
.notification-center-dialog-foot button { background: #103149 !important; color: #b9edff !important; min-height: 44px !important; }
.notification-center-dialog-foot .danger { background: #3b202a !important; color: #ffb2b9 !important; }
@media (max-width: 420px) {
  .notification-center-item-top { flex-direction: column !important; gap: 5px !important; }
  .notification-center-item time { white-space: normal !important; }
  .notification-center-item-actions button { font-size: 10px !important; }
  .wrs-alert-actions { gap: 5px !important; }
}