/* ============================================================
   RoadSafe — หน้าแผนที่ความเสี่ยง (Public/RiskMap.aspx)
   ============================================================ */

.rs-riskmap-page {
  max-width: var(--rs-content-max, 1440px);
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

.rs-riskmap-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: .75rem;
  margin-bottom: 1rem;
}

.rs-riskmap-header h1 {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--rs-text, #16265a);
  margin: 0;
}

.rs-riskmap-header .rs-btn-report-sm {
  background: var(--rs-highlight, #ef7a1f);
  border: none;
  color: #fff;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  padding: .5rem 1.1rem;
  border-radius: var(--rs-radius-sm, .5rem);
}

.rs-riskmap-header .rs-btn-report-sm:hover {
  background: var(--rs-highlight-hover, #d96a12);
  color: #fff;
}

.rs-riskmap-status {
  font-family: var(--rs-font-body, 'Sarabun', sans-serif);
  font-size: .875rem;
  color: var(--rs-text-muted, #5c6683);
  margin-bottom: .75rem;
}

/* แถบเครื่องมือเหนือแผนที่ — สวิตช์ใช้คลาส .rs-seg-map-toggle จาก segment.css เพื่อให้หน้าตาเดียวกับหน้าเจ้าหน้าที่ */
.rs-riskmap-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  margin-bottom: .6rem;
  font-size: .85rem;
  color: var(--rs-text-muted, #5c6683);
}

.rs-riskmap-legend {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.rs-riskmap-swatch {
  display: inline-block;
  width: 1.6rem;
  height: .4rem;
  border-radius: 999px;
  background: var(--rs-seg-unknown, #46527f);   /* สีกลางเดียวกับที่ MapTools ใช้วาดเส้น */
}

.rs-riskmap-box {
  height: min(70vh, 640px);
  border-radius: var(--rs-radius-lg, 1.25rem);
  border: 1px solid var(--rs-border, #c3ccdd);
  box-shadow: var(--rs-shadow-sm, 0 2px 10px rgba(20, 34, 77, .06));
  overflow: hidden;
}

/* ---- popup บนแผนที่ ---- */
.rs-map-popup { font-family: var(--rs-font-body, 'Sarabun', sans-serif); }

.rs-map-popup-type {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  color: var(--rs-text, #16265a);
  margin-bottom: .2rem;
}

.rs-map-popup-road,
.rs-map-popup-status,
.rs-map-popup-date {
  font-size: .85rem;
  color: var(--rs-text-muted, #5c6683);
}

.rs-map-popup-link {
  display: inline-block;
  margin-top: .45rem;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 500;
  font-size: .85rem;
  color: var(--rs-accent, #2f6fc0);
  text-decoration: none;
}

.rs-map-popup-link:hover { text-decoration: underline; }

@media (max-width: 576px) {
  .rs-riskmap-box { height: 68vh; }
}