@charset "UTF-8";
/* ============================================================
   RoadSafe — งานช่วงถนน (Officer/Segment/*)
   ใช้กับ SegmentMap · SegmentCockpit · SegmentSubmit · ทุกคลาสขึ้นต้น rs-seg-
   สีทั้งหมดอ้าง token กลางจาก rs-tokens.css ห้ามใส่ค่าสีตรง ๆ
   ============================================================ */

/* ---------- สถานะสี เขียว/เหลือง/แดง/ไม่ทราบ ---------- */
.rs-seg-rag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  font-size: .9rem;
  color: var(--rs-on-primary, #fff);
  white-space: nowrap;
}
.rs-seg-rag::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.rs-seg-rag-lg { font-size: 1.15rem; padding: .5rem 1.25rem; }
.rs-seg-rag-sm { font-size: .75rem; padding: .15rem .6rem; }
.rs-seg-rag-green   { background: var(--rs-success, #178048); }
.rs-seg-rag-yellow  { background: var(--rs-warning, #f0a92a); color: var(--rs-text, #16265a); }
.rs-seg-rag-yellow::before { background: rgba(22, 38, 90, .55); }
.rs-seg-rag-red     { background: var(--rs-danger, #e23a2e); }
/* เข้มกว่า --rs-text-faint เดิม เพราะสีเทาอ่อนกลืนกับพื้นแผนที่จนแยกไม่ออก (คำขอพี่ 2026-09-05)
   ค่านี้ต้องตรงกับ RAG_COLOR.UNKNOWN ใน Assets/js/pages/segment-map.js */
.rs-seg-rag-unknown { background: var(--rs-seg-unknown, #46527f); }

/* ---------- โครงหน้า ---------- */
.rs-seg-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.rs-seg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font-size: .85rem;
  color: var(--rs-text-muted, #5c6683);
}
.rs-seg-legend .rs-seg-rag { font-size: .72rem; padding: .1rem .55rem; }

.rs-seg-map {
  height: min(62vh, 620px);
  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;
  margin-bottom: 1.25rem;
}
.rs-seg-map-mini { height: 280px; margin-bottom: 0; }
.rs-seg-map-status {
  font-size: .85rem;
  color: var(--rs-text-muted, #5c6683);
  margin-bottom: .5rem;
}

.rs-seg-card {
  background: var(--rs-surface, #fff);
  border: 1px solid var(--rs-border-soft, #e4e9f2);
  border-radius: var(--rs-radius-md, .875rem);
  box-shadow: var(--rs-shadow-sm, 0 2px 10px rgba(20, 34, 77, .06));
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.rs-seg-card h2, .rs-seg-card h3 {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--rs-text, #16265a);
  margin: 0 0 .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.rs-seg-card h2 .bi, .rs-seg-card h3 .bi { color: var(--rs-accent, #2f6fc0); }
.rs-seg-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.rs-seg-card-head h2, .rs-seg-card-head h3 { margin-bottom: 0; }

.rs-seg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.rs-seg-grid .rs-seg-card { margin-bottom: 0; }

/* ---------- หัว Cockpit ---------- */
.rs-seg-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: start;
}
.rs-seg-head-title {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rs-text, #16265a);
  margin: 0;
}
.rs-seg-head-code {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: .85rem;
  font-weight: 500;
  color: var(--rs-accent, #2f6fc0);
  letter-spacing: .02em;
}
.rs-seg-head-sub { color: var(--rs-text-muted, #5c6683); font-size: .9rem; margin-top: .25rem; }
.rs-seg-head-status { text-align: right; }
.rs-seg-score {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--rs-text, #16265a);
  line-height: 1.1;
  margin-top: .5rem;
}
.rs-seg-score small { font-size: .8rem; font-weight: 500; color: var(--rs-text-muted, #5c6683); display: block; }

.rs-seg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem 1rem;
  margin-top: 1rem;
}
.rs-seg-fact-label { font-size: .75rem; color: var(--rs-text-muted, #5c6683); text-transform: uppercase; letter-spacing: .04em; }
.rs-seg-fact-value { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-text, #16265a); }

.rs-seg-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- ป้ายเตือน ---------- */
.rs-seg-note {
  border-radius: var(--rs-radius-sm, .5rem);
  padding: .6rem .9rem;
  font-size: .85rem;
  margin-bottom: 1rem;
}
.rs-seg-note-warn { background: var(--rs-warning-soft, #fef3d9); color: var(--rs-text-body, #3a466a); border: 1px solid var(--rs-warning, #f0a92a); }
.rs-seg-note-info { background: var(--rs-accent-soft, #dbe6ff); color: var(--rs-text-body, #3a466a); border: 1px solid var(--rs-accent, #2f6fc0); }
.rs-seg-note-ok { background: var(--rs-success-soft, #e3f5ea); color: var(--rs-text-body, #3a466a); border: 1px solid var(--rs-success, #178048); }
.rs-seg-error {
  background: var(--rs-danger-soft, #fdefe2);
  border: 1px solid var(--rs-danger, #e23a2e);
  color: var(--rs-danger, #e23a2e);
  border-radius: var(--rs-radius-md, .875rem);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.rs-seg-synthetic {
  display: inline-block;
  font-size: .7rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--rs-surface-soft, #eef1f6);
  color: var(--rs-text-muted, #5c6683);
  border: 1px dashed var(--rs-border, #c3ccdd);
  margin-left: .35rem;
  vertical-align: middle;
}

/* ---------- คะแนนรายเฟส ---------- */
.rs-seg-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.rs-seg-phase {
  border: 1px solid var(--rs-border-soft, #e4e9f2);
  border-radius: var(--rs-radius-sm, .5rem);
  padding: .6rem .75rem;
  text-align: center;
}
.rs-seg-phase.is-bottleneck { border-color: var(--rs-highlight, #ef7a1f); background: var(--rs-danger-soft, #fdefe2); }
.rs-seg-phase-name { font-size: .75rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-phase-value { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 700; font-size: 1.2rem; color: var(--rs-text, #16265a); }
.rs-seg-phase-tag { font-size: .7rem; color: var(--rs-highlight, #ef7a1f); font-weight: 600; }

/* ---------- การ์ดรายหน่วยงาน ---------- */
.rs-seg-org { border-left: 5px solid var(--rs-accent, #2f6fc0); }
.rs-seg-org-meta { font-size: .8rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-crit-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.rs-seg-crit {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  /* จุดสีเสาหลักวางทับด้านซ้ายแทนการกินคอลัมน์ — ไม่เบียดพื้นที่ชื่อเกณฑ์ */
  position: relative;
  gap: .25rem .75rem;
  padding: .5rem 0 .5rem .75rem;
  border-top: 1px solid var(--rs-border-soft, #e4e9f2);
  font-size: .9rem;
}
.rs-seg-crit-code { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-accent, #2f6fc0); }
.rs-seg-crit-name { color: var(--rs-text, #16265a); }
.rs-seg-crit-desc { grid-column: 2 / span 2; font-size: .8rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-crit-value { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-text, #16265a); text-align: right; white-space: nowrap; }
.rs-seg-crit-date { grid-column: 2 / span 2; font-size: .75rem; color: var(--rs-text-faint, #9aa6c7); }
.rs-seg-missing { font-size: .85rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-missing code { font-size: .8rem; color: var(--rs-text-body, #3a466a); background: var(--rs-surface-soft, #eef1f6); padding: .05rem .35rem; border-radius: .25rem; }

/* ---------- รายการเรื่องแจ้ง / มาตรการ ---------- */
.rs-seg-list { list-style: none; margin: 0; padding: 0; }
.rs-seg-list li { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--rs-border-soft, #e4e9f2); font-size: .9rem; }
.rs-seg-list li:first-child { border-top: 0; }
.rs-seg-list .rs-seg-code { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-accent, #2f6fc0); text-decoration: none; }
.rs-seg-list .rs-seg-code:hover { text-decoration: underline; }
.rs-seg-list .rs-seg-date { margin-left: auto; font-size: .78rem; color: var(--rs-text-faint, #9aa6c7); }
.rs-seg-pill {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  color: var(--rs-on-primary, #fff);
  background: var(--rs-text-faint, #9aa6c7);
  white-space: nowrap;
}
.rs-seg-empty { color: var(--rs-text-muted, #5c6683); font-size: .9rem; padding: .5rem 0; }
.rs-seg-empty .bi { margin-right: .35rem; }

/* ---------- Timeline ---------- */
.rs-seg-timeline { list-style: none; margin: 0; padding: 0; }
.rs-seg-tl-item { position: relative; padding: 0 0 1rem 1.6rem; border-left: 2px solid var(--rs-border-soft, #e4e9f2); }
.rs-seg-tl-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.rs-seg-tl-dot {
  position: absolute; left: -8px; top: .25rem; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--rs-surface, #fff); background: var(--rs-accent, #2f6fc0);
}
.rs-seg-tl-SUBMISSION .rs-seg-tl-dot { background: var(--rs-accent, #2f6fc0); }
.rs-seg-tl-ASSESSMENT .rs-seg-tl-dot { background: var(--rs-primary, #16265a); }
.rs-seg-tl-STATUS_CHANGE .rs-seg-tl-dot { background: var(--rs-highlight, #ef7a1f); width: 18px; height: 18px; left: -10px; }
.rs-seg-tl-INTERVENTION .rs-seg-tl-dot { background: var(--rs-success, #178048); }
.rs-seg-tl-CITIZEN_REPORT .rs-seg-tl-dot { background: var(--rs-warning, #f0a92a); }
.rs-seg-tl-head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.rs-seg-tl-title { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-text, #16265a); font-size: .92rem; }
.rs-seg-tl-date { font-size: .78rem; color: var(--rs-text-faint, #9aa6c7); margin-left: auto; white-space: nowrap; }
.rs-seg-tl-detail { font-size: .85rem; color: var(--rs-text-body, #3a466a); }
.rs-seg-tl-meta { font-size: .78rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-tl-remark { font-size: .82rem; color: var(--rs-text-muted, #5c6683); font-style: italic; }

/* ---------- ตารางรายการบนหน้าแผนที่ ---------- */
.rs-seg-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rs-seg-table th { text-align: left; font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; font-size: .8rem; color: var(--rs-text-muted, #5c6683); padding: .6rem .75rem; border-bottom: 1px solid var(--rs-border, #c3ccdd); white-space: nowrap; }
.rs-seg-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--rs-border-soft, #e4e9f2); vertical-align: top; }
.rs-seg-table tr:hover td { background: var(--rs-surface-muted, #f6f8fc); }
.rs-seg-table .rs-seg-code { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-accent, #2f6fc0); text-decoration: none; }
.rs-seg-table .rs-seg-code:hover { text-decoration: underline; }
.rs-seg-table .rs-seg-sub { font-size: .78rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-table-scroll { overflow-x: auto; }
.rs-seg-num { text-align: right; white-space: nowrap; }

/* ---------- ฟอร์มส่งข้อมูล ---------- */
.rs-seg-form-crit { border-top: 1px solid var(--rs-border-soft, #e4e9f2); padding: 1rem 0; }
.rs-seg-form-crit:first-child { border-top: 0; padding-top: 0; }
.rs-seg-form-crit-head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.rs-seg-form-crit-head .rs-seg-crit-code { font-size: 1rem; }
.rs-seg-form-crit-head .rs-seg-crit-name { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; }
.rs-seg-form-crit-meta { font-size: .78rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-form-crit-desc { font-size: .85rem; color: var(--rs-text-body, #3a466a); margin: .25rem 0 .5rem; }
.rs-seg-form-existing { font-size: .8rem; color: var(--rs-accent, #2f6fc0); margin-bottom: .35rem; }
.rs-seg-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rs-seg-bars li { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; }
.rs-seg-bars input[type="radio"] { margin-top: .3rem; }
.rs-seg-bars label { cursor: pointer; color: var(--rs-text-body, #3a466a); }
.rs-seg-bars .rs-seg-bars-level { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-text, #16265a); margin-right: .25rem; }
.rs-seg-crisp { display: flex; gap: .5rem; align-items: center; }
.rs-seg-crisp .form-control { max-width: 200px; }
.rs-seg-crisp-unit { font-size: .85rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-form-common { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem 1rem; }
.rs-seg-form-label { display: block; font-size: .85rem; font-weight: 600; color: var(--rs-text, #16265a); margin-bottom: .25rem; }
.rs-seg-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- ทำให้เส้นช่วงถนนเด่นกว่าพื้นแผนที่ (คำขอพี่ 2026-09-05) ----------
   ใช้ CSS filter กับ tile ของ OSM เท่านั้น — ไม่ดึงแผนที่จากโดเมนอื่น (นโยบาย D-8) · เส้นถนนอยู่คนละ pane จึงไม่ถูกแตะ

   รอบแรกใช้ grayscale(.75) ทำให้แผนที่เกือบขาวดำ อ่านบริบทรอบถนนไม่ออก
   รอบนี้เปลี่ยนเป็น "ถอยฉากหลังให้จางลง" แทนการดูดสีทิ้ง — สวน แม่น้ำ อาคาร ยังเห็นเป็นสีอยู่
   แต่ค่าความเข้มต่ำลงจนเส้นสถานะเด่นกว่าชัดเจน */
.rs-seg-map {
  --rs-seg-unknown: #46527f;     /* สีช่วงถนนที่ยังไม่ประเมิน — ต้องตรงกับ segment-map.js */
}

.rs-seg-map.is-muted .leaflet-tile-pane {
  filter: saturate(.82) brightness(1.06) contrast(.86);
}

/* ขอบขาวบาง ๆ รอบเส้น ทำให้สีของเส้นแยกออกจากถนนบนพื้นแผนที่ได้ทุกโทน
   (หลักการเดียวกับ casing ในงานแผนที่ — ไม่ต้องวาดเส้นซ้อนสองชั้น) */
.rs-seg-map .leaflet-overlay-pane path {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95))
          drop-shadow(0 0 3px rgba(255, 255, 255, .6));
}

/* เส้นสีเหลืองกลืนกับถนนสายหลักของ OSM ที่เป็นเหลือง-ส้มอยู่แล้ว (คำขอพี่ 2026-09-05)
   ขอบขาวไม่ช่วย จึงเปลี่ยนเป็นขอบน้ำเงินเข้มของธีม ซ้อนสองชั้นให้ทึบพอเป็นเส้นขอบจริง */
.rs-seg-map .leaflet-overlay-pane path.rs-seg-line-yellow {
  filter: drop-shadow(0 0 1.2px var(--rs-primary, #16265a))
          drop-shadow(0 0 1.2px var(--rs-primary, #16265a))
          drop-shadow(0 0 2.5px rgba(22, 38, 90, .5));
}
.rs-seg-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--rs-text-muted, #5c6683);
  cursor: pointer;
  user-select: none;
}
.rs-seg-map-toggle input { accent-color: var(--rs-primary, #16265a); }

/* ---------- ป้ายรหัสช่วงถนนบนเส้น (คำขอพี่ 2026-09-05) ----------
   ผูกเป็น Leaflet tooltip แบบ permanent ทุกเส้น แล้วคุมการมองเห็นด้วยคลาสบนกล่องแผนที่
   · ไม่ติ๊ก "แสดงรหัส"           → ซ่อนทั้งหมด
   · ซูมระดับเมือง (< labelZoom)  → เห็นเฉพาะป้ายของช่วงที่หน่วยงานผู้ใช้รับผิดชอบ ไม่งั้น 100 ป้ายทับกันจนอ่านไม่ออก */
.leaflet-tooltip.rs-seg-label {
  padding: .05rem .4rem;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--rs-text, #16265a);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--rs-border, #c3ccdd);
  border-radius: 999px;
  box-shadow: var(--rs-shadow-sm, 0 2px 10px rgba(20, 34, 77, .06));
  pointer-events: none;
}
.leaflet-tooltip.rs-seg-label::before { display: none; }   /* ไม่เอาลูกศรของ tooltip */
.leaflet-tooltip.rs-seg-label.is-mine {
  font-size: .78rem;
  color: #fff;
  background: var(--rs-primary, #16265a);
  border-color: var(--rs-primary, #16265a);
}
.rs-seg-map:not(.has-labels) .rs-seg-label { display: none; }
.rs-seg-map.is-zoomed-out .rs-seg-label:not(.is-mine) { display: none; }

/* ---------- ลิงก์ Street View ---------- */
.rs-seg-sv { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.rs-seg-sv-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem;
  border: 1px solid var(--rs-border, #c3ccdd); color: var(--rs-text-body, #3a466a); text-decoration: none;
  background: var(--rs-surface, #fff);
}
.rs-seg-sv-link:hover { border-color: var(--rs-accent, #2f6fc0); color: var(--rs-accent, #2f6fc0); }
.rs-seg-popup .rs-seg-sv { margin-top: .4rem; }
.rs-seg-popup .rs-seg-sv-link { font-size: .75rem; padding: .15rem .5rem; }

/* ---------- popup บนแผนที่ ---------- */
.rs-seg-popup { font-family: var(--rs-font-body, 'Sarabun', sans-serif); min-width: 220px; }
.rs-seg-popup-title { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-text, #16265a); }
.rs-seg-popup-sub { font-size: .82rem; color: var(--rs-text-muted, #5c6683); margin: .15rem 0 .4rem; }
.rs-seg-popup-link { display: inline-block; margin-top: .4rem; font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 500; font-size: .85rem; color: var(--rs-accent, #2f6fc0); text-decoration: none; }
.rs-seg-popup-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  /* minmax(0, 1fr) ไม่ใช่ 1fr — เพราะ 1fr มีขั้นต่ำเป็น min-content
     ข้อความในหัวการ์ดมีโทเคนยาวที่ตัดบรรทัดไม่ได้ (เช่น seg_SegmentScreening.FromLandmark/ToLandmark)
     ทำให้คอลัมน์ขยายเกินจอและหน้าเลื่อนแนวนอน 27 px ที่จอ 375 px — แก้ 2026-09-13 ขั้น 10 */
  .rs-seg-head { grid-template-columns: minmax(0, 1fr); }
  .rs-seg-head > * { min-width: 0; }
  .rs-seg-head-title,
  .rs-seg-head-sub { overflow-wrap: anywhere; }
  .rs-seg-head-status { text-align: left; }
  .rs-seg-phases { grid-template-columns: 1fr; }
  .rs-seg-map { height: 55vh; }
}

/* ============================================================
   ข้อมูลจากแต่ละหน่วยงาน — สองมุมมองบนข้อมูลชุดเดียวกัน (คำขอพี่ 2026-09-05)
   รองรับหน่วยงานจำนวนมาก และใช้สี/ไอคอนบอกว่าเกณฑ์ไหนอยู่กลุ่มเดียวกัน
   ============================================================ */

/* ---- สีประจำเสาหลัก Safe System ----
   เลี่ยงเขียว/เหลือง/แดง เพราะสามสีนั้นสงวนไว้ให้สถานะ RAG
   และเลี่ยงน้ำเงินเข้ม #46527f ที่ใช้กับช่วงถนนที่ยังไม่ประเมินบนแผนที่ */
[data-pillar="SAFE_ROAD_USE"]   { --rs-pillar: #2f6fc0; }   /* ผู้ใช้รถใช้ถนน */
[data-pillar="SAFE_VEHICLES"]   { --rs-pillar: #7a54a8; }   /* ยานพาหนะ */
[data-pillar="SAFE_ROADS"]      { --rs-pillar: #b06a1f; }   /* ถนนและสภาพแวดล้อม */
[data-pillar="SAFE_SPEEDS"]     { --rs-pillar: #0f8f8f; }   /* ความเร็ว */
[data-pillar="POST_CRASH_CARE"] { --rs-pillar: #c2407a; }   /* การดูแลหลังเกิดเหตุ */

/* ---- ปุ่มสลับมุมมอง ---- */
.rs-seg-viewswitch {
  display: inline-flex;
  gap: .15rem;
  padding: .2rem;
  background: var(--rs-surface-soft, #eef1f6);
  border-radius: 999px;
}

.rs-seg-viewswitch button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: .82rem;
  color: var(--rs-text-muted, #5c6683);
  cursor: pointer;
  white-space: nowrap;
}

.rs-seg-viewswitch button:hover { color: var(--rs-primary, #16265a); }

.rs-seg-viewswitch button.is-active {
  background: var(--rs-surface, #fff);
  color: var(--rs-primary, #16265a);
  font-weight: 600;
  box-shadow: var(--rs-shadow-sm, 0 2px 10px rgba(20, 34, 77, .06));
}

.rs-seg-viewswitch button:focus-visible {
  outline: 2px solid var(--rs-accent, #2f6fc0);
  outline-offset: 1px;
}

/* ---- แถบสรุปหน่วยงานที่ส่งข้อมูล — ห่อบรรทัดได้ไม่จำกัดจำนวนหน่วย ---- */
.rs-seg-orgbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .85rem 0 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--rs-border-soft, #e4e9f2);
}

.rs-seg-orgbar-label {
  font-size: .8rem;
  color: var(--rs-text-muted, #5c6683);
  margin-right: .2rem;
}

.rs-seg-orgchip,
.rs-seg-orgval {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--rs-text-body, #3a466a);
  background: var(--rs-surface, #fff);
  border: 1px solid var(--rs-border-soft, #e4e9f2);
  /* เส้นซ้ายหนาใช้สีหน่วยงานจาก AccentColorHex ในข้อมูลหลัก */
  box-shadow: inset 3px 0 0 var(--rs-org, #5c6683);
  padding-left: .7rem;
}

.rs-seg-orgchip b,
.rs-seg-orgval b {
  font-weight: 600;
  color: var(--rs-text, #16265a);
}

.rs-seg-orgdot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--rs-org, #5c6683);
  flex-shrink: 0;
}

.rs-seg-orgval.is-auto {
  box-shadow: none;
  border-style: dashed;
  color: var(--rs-text-muted, #5c6683);
  padding-left: .6rem;
}

.rs-seg-orgval.is-none {
  box-shadow: none;
  border: none;
  background: transparent;
  color: var(--rs-text-faint, #9aa6c7);
  font-style: italic;
  padding-left: 0;
}

.rs-seg-synth-dot {
  font-style: normal;
  color: var(--rs-highlight, #ef7a1f);
  font-weight: 700;
}

/* ---- กลุ่มเสาหลัก ---- */
.rs-seg-pillar {
  border: 1px solid var(--rs-border-soft, #e4e9f2);
  border-left: 4px solid var(--rs-pillar, #5c6683);
  border-radius: var(--rs-radius-md, .875rem);
  padding: .75rem .9rem;
  margin-bottom: .75rem;
  background: var(--rs-surface, #fff);
}

.rs-seg-pillar:last-child { margin-bottom: 0; }

.rs-seg-pillar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
}

.rs-seg-pillar-icon {
  color: var(--rs-pillar, #5c6683);
  font-size: 1.05rem;
}

.rs-seg-pillar-head h3 {
  margin: 0;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: .96rem;
  font-weight: 600;
  color: var(--rs-text, #16265a);
}

.rs-seg-pillar-meta {
  font-size: .78rem;
  color: var(--rs-text-muted, #5c6683);
}

.rs-seg-pillar-warn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  color: #8a4b00;
  background: var(--rs-warning-soft, #fef3d9);
}

/* ---- แถวเกณฑ์ในกลุ่ม ---- */
.rs-seg-prows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.rs-seg-prow {
  padding: .45rem .5rem;
  border-radius: var(--rs-radius-sm, .5rem);
}

.rs-seg-prow + .rs-seg-prow { border-top: 1px solid var(--rs-border-soft, #e4e9f2); }

.rs-seg-prow.is-empty { opacity: .72; }

.rs-seg-prow.is-diff { background: var(--rs-warning-soft, #fef3d9); }

.rs-seg-prow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: .3rem;
}

.rs-seg-prow-name {
  font-size: .88rem;
  color: var(--rs-text, #16265a);
  font-weight: 500;
}

.rs-seg-phasetag {
  font-size: .7rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  color: var(--rs-text-muted, #5c6683);
  background: var(--rs-surface-soft, #eef1f6);
}

.rs-seg-prow-values {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.rs-seg-prow-diff {
  margin-top: .35rem;
  font-size: .76rem;
  color: #8a4b00;
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ---- จุดสีเสาหลักในการ์ดรายหน่วยงาน — เชื่อมสองมุมมองด้วยสีเดียวกัน ---- */
.rs-seg-pilldot {
  position: absolute;
  left: 0;
  top: .95rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--rs-pillar, #9aa6c7);
}

@media (max-width: 576px) {
  .rs-seg-viewswitch button { padding: .35rem .6rem; }
  .rs-seg-pillar-warn { margin-left: 0; }
}

/* ============================================================
   ตัวช่วยระยะห่าง — แทน inline style ที่เคยเขียนในหน้า .aspx
   เพิ่ม 2026-09-13 (ขั้น 10 · เกณฑ์ตรวจรับ "ไม่มี Inline CSS ที่ไม่จำเป็น")
   ============================================================ */
.rs-seg-toolbar.is-tight { margin-bottom: .35rem; }
.rs-seg-map-status.is-flush { margin: 0; }
.rs-seg-org-meta.is-note { margin: .75rem 0 0; }
.rs-seg-view.is-flush-bottom { margin-bottom: 0; }
.rs-seg-form-common.is-spaced { margin-top: .75rem; }

.rs-seg-form-crit-meta.is-inline {
  display: flex;
  gap: .4rem;
  align-items: center;
}

/* ============================================================
   ตัวกรองบนแผนที่ Segment (2026-09-16)
   กรองแผนที่และตารางพร้อมกัน — เส้นที่ถูกกรองจะถูกถอดออกจาก layer ส่วนแถวใช้ .is-filtered-out
   จอกว้าง: กางอยู่เสมอ ปุ่ม "ตัวกรอง" ซ่อน · จอแคบ: ยุบไว้ กดปุ่มจึงกาง (แถบเครื่องมือด้านบนเต็มแล้วที่ 375 px)
   ============================================================ */
.rs-seg-filters {
  margin-bottom: .75rem;
}

/* ช่องค้นหาอยู่นอกส่วนที่ยุบได้ — ใช้บ่อยที่สุด ต้องกดได้ทันทีทุกขนาดจอ */
.rs-seg-filter-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.rs-seg-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 34rem;
}
.rs-seg-search > .bi-search {
  position: absolute;
  left: .65rem;
  font-size: .9rem;
  color: var(--rs-text-faint, #9aa6c7);
  pointer-events: none;
}
.rs-seg-search input {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: .88rem;
  color: var(--rs-text, #16265a);
  background: var(--rs-surface, #fff);
  border: 1px solid var(--rs-border, #c3ccdd);
  border-radius: 999px;
  padding: .42rem 2rem .42rem 2.1rem;
}
.rs-seg-search input:focus {
  outline: none;
  border-color: var(--rs-accent, #2f6fc0);
  box-shadow: 0 0 0 3px var(--rs-accent-soft, #dbe6ff);
}
/* ซ่อนปุ่มกากบาทของเบราว์เซอร์เอง แล้วใช้ปุ่มของเราที่วางตำแหน่งได้แน่นอนกว่า */
.rs-seg-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.rs-seg-search-clear {
  position: absolute;
  right: .45rem;
  width: 1.35rem;
  height: 1.35rem;
  line-height: 1;
  font-size: 1rem;
  border: none;
  border-radius: 50%;
  background: var(--rs-surface-soft, #eef1f6);
  color: var(--rs-text-muted, #5c6683);
  cursor: pointer;
}
.rs-seg-search-clear:hover { background: var(--rs-border-soft, #e4e9f2); }

.rs-seg-filter-toggle {
  display: none;
  align-items: center;
  gap: .4rem;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: .85rem;
  color: var(--rs-text, #16265a);
  background: var(--rs-surface, #fff);
  border: 1px solid var(--rs-border, #c3ccdd);
  border-radius: 999px;
  padding: .35rem .85rem;
  cursor: pointer;
  /* ห้ามตัดบรรทัด — ที่ 375 px คำว่า "ตัวกรอง" เคยแตกเป็นสองบรรทัด ปุ่มสูงผิดรูป
     ช่องค้นหาข้าง ๆ ยืดหดได้อยู่แล้ว (flex: 1 1 18rem + min-width: 0) จึงให้ปุ่มคงขนาดไว้ */
  white-space: nowrap;
  flex: 0 0 auto;
}
.rs-seg-filter-badge {
  display: none;
  min-width: 1.25rem;
  text-align: center;
  font-size: .7rem;
  line-height: 1.25rem;
  border-radius: 999px;
  background: var(--rs-primary, #16265a);
  color: #fff;
}
.rs-seg-filter-badge.is-shown { display: inline-block; }

.rs-seg-filter-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem .9rem;
}

.rs-seg-filter-field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  /* min-width: 0 กัน select ดันคอลัมน์จนหน้าเลื่อนแนวนอน — ปัญหาเดียวกับตัวกรองหน้าผู้ดูแลที่แก้ไปในขั้น 10 */
  min-width: 0;
  flex: 1 1 13rem;
  max-width: 100%;
  font-size: .78rem;
  color: var(--rs-text-muted, #5c6683);
}
.rs-seg-filter-field select {
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: .85rem;
  color: var(--rs-text, #16265a);
  background: var(--rs-surface, #fff);
  border: 1px solid var(--rs-border, #c3ccdd);
  border-radius: var(--rs-radius-sm, .5rem);
  padding: .35rem .5rem;
}

.rs-seg-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: .82rem;
  color: var(--rs-accent, #2f6fc0);
  background: none;
  border: none;
  padding: .35rem .25rem;
  cursor: pointer;
}
.rs-seg-filter-clear:disabled { color: var(--rs-text-faint, #9aa6c7); cursor: default; }
.rs-seg-filter-clear:not(:disabled):hover { text-decoration: underline; }

/* แถวที่ไม่ผ่านตัวกรอง — ซ่อนแทนการลบ เพื่อให้กลับมาได้ทันทีโดยไม่ต้องโหลดหน้าใหม่ */
.rs-seg-table tbody tr.is-filtered-out { display: none; }

.rs-seg-filter-empty { display: none; }
.rs-seg-filter-empty.is-shown { display: block; }

/* ============================================================
   ชั้นข้อมูลเรื่องแจ้งจากประชาชนบนแผนที่ (2026-09-16)
   หมุดวาดด้วย L.circleMarker จาก JS (สีมาจาก mst_ReportStatus.DisplayColorHex ของแต่ละสถานะ)
   CSS ตรงนี้คุมเฉพาะคำอธิบายสัญลักษณ์ · ตัวนับ · และเนื้อใน popup
   ============================================================ */
.rs-seg-rep-count {
  font-size: .78rem;
  color: var(--rs-text-faint, #9aa6c7);
}

.rs-seg-rep-key {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--rs-text-muted, #5c6683);
}
/* จุดตัวอย่างหน้าคำอธิบาย — ต้องสื่อความต่างแบบเดียวกับหมุดจริง: ยังไม่ปิด = ทึบ + ขอบเข้ม · ปิดแล้ว = จาง เล็กกว่า */
.rs-seg-rep-key::before {
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--rs-text-faint, #9aa6c7);
  border: 1px solid #fff;
  opacity: .45;
}
.rs-seg-rep-key.is-open::before {
  width: .95rem;
  height: .95rem;
  background: var(--rs-accent, #2f6fc0);
  border: 2px solid var(--rs-primary, #16265a);
  opacity: 1;
}

.rs-seg-rep-status {
  display: inline-block;
  font-size: .72rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--rs-surface-soft, #eef1f6);
  color: var(--rs-text-muted, #5c6683);
}
.rs-seg-rep-status.is-open {
  background: var(--rs-primary, #16265a);
  color: #fff;
}

.rs-seg-rep-note {
  font-size: .78rem;
  color: var(--rs-text-muted, #5c6683);
  margin: .35rem 0 .2rem;
}
/* ใช้ --rs-primary ไม่ใช่สีเตือน — ข้อความนี้อธิบายกติกา ไม่ใช่การแจ้งเตือนว่ามีอะไรผิดพลาด
   (ไม่มีโทเคน --rs-warning-text ในระบบ อย่าอ้างชื่อที่ไม่มีจริงแล้วพึ่ง fallback) */
.rs-seg-rep-note.is-open { color: var(--rs-primary, #16265a); font-weight: 500; }

@media (max-width: 768px) {
  .rs-seg-filter-toggle { display: inline-flex; }
  .rs-seg-filter-body { display: none; }
  .rs-seg-filters.is-open .rs-seg-filter-body { display: flex; margin-top: .6rem; }
  .rs-seg-filter-field { flex: 1 1 100%; }
}

/* ============================================================
   การ์ด SP2 ความเร็วใช้จริง (TomTom · schema v0.11.0 · เอกสารออกแบบระยะ 2–3 §4 · 2026-09-27)
   ใช้โทเคนเดิมเท่านั้น · ขาไป = --rs-accent · ขากลับ = --rs-highlight (ไม่ใช้เขียว/เหลือง/แดงที่สงวนให้ RAG)
   ============================================================ */
.rs-seg-speed-badge {
  display: inline-block;
  font-family: var(--rs-font-body, 'Sarabun', sans-serif);
  font-size: .75rem;
  font-weight: 500;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: var(--rs-accent-soft, #dbe6ff);
  color: var(--rs-accent, #2f6fc0);
  vertical-align: middle;
}
.rs-seg-speed-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}
.rs-seg-speed-tile {
  border: 1px solid var(--rs-border-soft, #e4e9f2);
  border-radius: var(--rs-radius-sm, .5rem);
  background: var(--rs-surface-muted, #f6f8fc);
  padding: .7rem .9rem;
  min-width: 0;
}
.rs-seg-speed-tile.is-ref { background: var(--rs-surface, #fff); }
.rs-seg-speed-value {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--rs-text, #16265a);
  font-variant-numeric: tabular-nums;
}
.rs-seg-speed-value small { font-size: .85rem; font-weight: 500; color: var(--rs-text-muted, #5c6683); }
.rs-seg-speed-def { font-family: var(--rs-font-heading, 'Prompt', sans-serif); font-weight: 600; color: var(--rs-text, #16265a); margin: .25rem 0; }
.rs-seg-speed-sub { font-size: .8rem; color: var(--rs-text-muted, #5c6683); margin-top: .2rem; }

.rs-seg-speed-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.rs-seg-speed-chart { margin: 0; min-width: 0; }
.rs-seg-speed-chart figcaption {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  font-size: .9rem;
  color: var(--rs-text, #16265a);
  margin-bottom: .35rem;
}
.rs-seg-speed-svg { width: 100%; height: auto; display: block; }
.rs-seg-speed-svg .grid { stroke: var(--rs-border-soft, #e4e9f2); stroke-width: 1; }
.rs-seg-speed-svg .axis { fill: var(--rs-text-faint, #9aa6c7); font-size: 11px; }
.rs-seg-speed-svg .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.rs-seg-speed-svg .line.fwd, .rs-seg-speed-svg .dot.fwd { stroke: var(--rs-accent, #2f6fc0); }
.rs-seg-speed-svg .line.bwd, .rs-seg-speed-svg .dot.bwd { stroke: var(--rs-highlight, #ef7a1f); }
.rs-seg-speed-svg .line.free { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .7; }
.rs-seg-speed-svg .dot { fill: var(--rs-surface, #fff); stroke-width: 2; }
/* ไม่มีคำอธิบายเส้น (กราฟยังว่างทั้งคู่) — เว้นระยะก่อนกล่องคำเตือนเอง */
.rs-seg-speed-charts + .rs-seg-note { margin-top: 1rem; }
.rs-seg-speed-nochart {
  border: 1px dashed var(--rs-border, #c3ccdd);
  border-radius: var(--rs-radius-sm, .5rem);
  background: var(--rs-surface-soft, #eef1f6);
  color: var(--rs-text-muted, #5c6683);
  font-size: .85rem;
  padding: 1.25rem 1rem;
  text-align: center;
}
.rs-seg-speed-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .78rem; color: var(--rs-text-muted, #5c6683); margin: .5rem 0 1rem; }
.rs-seg-speed-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.rs-seg-speed-legend i { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--rs-accent, #2f6fc0); }
.rs-seg-speed-legend i.is-bwd { border-top-color: var(--rs-highlight, #ef7a1f); }
.rs-seg-speed-legend i.is-free { border-top: 2px dashed var(--rs-text-muted, #5c6683); }

.rs-seg-speed-notes ul { list-style: none; margin: 0; padding: 0; }
.rs-seg-speed-notes li { margin: .15rem 0; overflow-wrap: anywhere; }
.rs-seg-speed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .25rem; }
.rs-seg-speed-foot { font-size: .75rem; color: var(--rs-text-faint, #9aa6c7); text-align: right; margin-top: .75rem; }

@media (max-width: 576px) {
  .rs-seg-speed-value { font-size: 1.6rem; }
  .rs-seg-speed-foot { text-align: left; }
}

/* ตารางแผนที่ + popup: ค่าความเร็วใช้จริง (2026-09-27) */
.rs-seg-speed-cell { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rs-accent, #2f6fc0); font-weight: 600; cursor: help; }
.rs-seg-popup-speed { color: var(--rs-accent, #2f6fc0); font-weight: 500; margin-top: .3rem; }

/* ปุ่มไปหน้าประมวลผลความเสี่ยง (เฉพาะแอดมินกลาง) — 2026-10-01 */
.rs-seg-run-link { margin-left: auto; font-size: .85rem; padding: .3rem .8rem; }

/* สถานะค่าที่ส่งของหน่วยงาน (รอยืนยัน / ตีกลับ) บนหน้าส่งข้อมูล — 2026-10-01 */
.rs-sub-status { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rs-sub-status li { padding: .45rem .7rem; border-radius: .5rem; border-left: 4px solid var(--rs-warning, #f0a92a); background: var(--rs-surface-soft, #eef1f6); font-size: .88rem; }
.rs-sub-status li.is-rejected { border-left-color: var(--rs-danger, #e23a2e); }
.rs-sub-reason { color: var(--rs-danger, #e23a2e); font-size: .85rem; }

/* ประเภทข้อมูลรายค่าในฟอร์มส่งข้อมูล (schema v0.12.0) — 2026-10-01 */
.rs-seg-kind { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .55rem; }
.rs-seg-kind-label { font-size: .8rem; color: var(--rs-text-muted, #5c6683); }
.rs-seg-kind-select { width: auto; max-width: 100%; min-width: 0; font-size: .85rem; }
.rs-seg-kind-tag { font-style: normal; font-size: .72rem; margin-left: .3rem; padding: 0 .35rem; border-radius: .4rem;
  background: var(--rs-warning-soft, #fef3d9); color: #6b4a00; }

/* ---------- ตรวจหน่วยและช่วงค่าทันที (ฟอร์มส่งค่า Crisp · 3.5.3 ข้อ 2) ---------- */
.rs-seg-crisp-check { flex-basis: 100%; font-size: .82rem; min-height: 0; }
.rs-seg-crisp-check:empty { display: none; }
.rs-seg-crisp-check.is-ok { color: var(--rs-success, #178048); }
.rs-seg-crisp-check.is-warn { color: #8a6100; background: var(--rs-warning-soft, #fef3d9); border-radius: .35rem; padding: .2rem .5rem; }
.rs-seg-crisp-check.is-error { color: #a12a20; background: #fde2e1; border-radius: .35rem; padding: .2rem .5rem; }
.rs-seg-crisp { flex-wrap: wrap; }