/* =============================================================
   org-chart.css — โครงสร้างองค์กร (pages/about/structure.php)
   Desktop: D3.js tree layout (SVG) แนวตั้ง บน→ล่าง เปิดครบทุกชั้น
            พร้อม zoom + pan (d3.zoom()) ช่วยนำทางเมื่อต้นไม้ใหญ่
   Mobile:  indented text list ธรรมดา ไม่มี SVG แสดงทุกชั้น — คงเดิม
   ============================================================= */

.org-chart-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8a9ab5;
  margin-bottom: 12px;
}

/* ── Desktop: D3 SVG wrap ── */
.org-chart-wrap {
  position: relative;
  height: 460px;
  background: #fff;
  border: 1px solid #e2e8f5;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
}

.org-chart-wrap svg {
  cursor: grab;
}

.org-chart-wrap svg:active {
  cursor: grabbing;
}

.org-zoom-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.org-zoom-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f5;
  border-radius: 8px;
  background: #fff;
  color: #6b7897;
  cursor: pointer;
  font-size: 15px;
}

.org-zoom-btn:hover {
  background: #f5f9ff;
  color: #378ADD;
  border-color: #b5d4f4;
}

/* การ์ด: render เป็น HTML ผ่าน <foreignObject> แทน SVG <text> เดิม — ให้ browser
   ทำ word-wrap ให้เองตามจริง ไม่ต้องคำนวณความกว้างตัวอักษรเอง (เคยเป็นสาเหตุตัดคำผิดจุด
   เมื่อ font จริงกว้างกว่าที่ประมาณการไว้) พื้นหลังการ์ด hard-code เป็นสีขาวเสมอ (ไม่มีให้ปรับแต่ง),
   กรอบ+ชื่อใช้สีจาก org_levels.bg_color — เซ็ต inline style ต่อ node ใน structure.php */
.org-fo-card {
  background: #fff;
  border: 2.2px solid;
  border-radius: 10px;
  padding: 8px 10px;
  box-sizing: border-box;
  text-align: center;
  font-family: inherit;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.org-fo-name {
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.35;
  /* สี เซ็ต inline ต่อ node จาก org_levels.bg_color ใน structure.php, fallback #1f2a44 ถ้าไม่มีสี */
}

.org-fo-sub {
  font-size: 9.5px;
  color: #6b7897;
  line-height: 1.35;
  margin-top: 2px;
}

/* บรรทัดที่ 4 เป็นต้นไป (รายละเอียดเพิ่มเติม) — เล็กกว่า .org-fo-sub (position_title/position_level)
   เพื่อให้เห็นความแตกต่างระดับความสำคัญของข้อมูล */
.org-fo-extra {
  font-size: 8.5px;
  color: #8a9ab5;
  line-height: 1.35;
  margin-top: 2px;
}

.org-fo-person {
  font-size: 10.5px;
  color: #378ADD;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 2px;
}

/* ── List-mode (ฝ่าย/งาน) — desktop, render เป็น HTML ผ่าน foreignObject เช่นกัน ──
   กรอบ text block เดียว ต่อท้าย node กอง (parent) แทนการ์ดแยก
   หัวข้อฝ่าย = ตัวหนา+ขีดเส้นใต้, งานย่อย = bullet เยื้องขวา */
/* stroke สีจริงเซ็ต inline ต่อ node ตาม bg_color ใน structure.php (ให้ตรงสีกับ node นั้นๆ)
   ที่นี่เป็นแค่ fallback width/opacity เผื่อ inline ไม่มาถึง */
.org-svg-list-connector {
  stroke: #c5d8f0;
  stroke-width: 1.4;
  stroke-opacity: 0.55;
}

/* border-color เซ็ต inline ต่อ node ตาม bg_color (เดียวกับกรอบการ์ด/เส้นโยง) ใน structure.php
   ที่นี่เป็นแค่ width/fallback เผื่อ inline ไม่มาถึง */
.org-fo-listblock {
  background: #fff;
  border: 1.4px solid #e2e8f5;
  border-radius: 6px;
  padding: 10px 12px;
  box-sizing: border-box;
  font-family: inherit;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.org-fo-list-header {
  font-weight: 600;
  font-size: 10.5px;
  color: #1f2a44;
  text-decoration: underline;
  line-height: 1.4;
  margin-top: 6px;
}
.org-fo-list-header:first-child { margin-top: 0; }

.org-fo-list-item {
  font-size: 9.5px;
  color: #6b7897;
  line-height: 1.4;
}

/* ── Mobile: indented text list — คงเดิมไม่เปลี่ยน ── */
.org-mob-list {
  display: none;
  overflow-x: hidden;
}

.org-mob-item {
  position: relative;
  padding: 10px 0 10px 14px;
  border-left: 1px solid #e2e8f5;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.org-mob-item[style*="margin-left:0"] {
  border-left: none;
  padding-left: 0;
}

.org-mob-name {
  font-weight: 600;
  font-size: 13.5px;
  color: #1f2a44;
  overflow-wrap: break-word;
  word-break: break-word;
}

.org-mob-sub {
  font-size: 12px;
  color: #6b7897;
  margin-top: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.org-mob-extra {
  font-size: 10.5px;
  color: #6b7897;
  margin-top: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.org-mob-person {
  font-size: 12.5px;
  color: #378ADD;
  font-weight: 500;
  margin-top: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.org-empty {
  padding: 24px 16px;
  text-align: center;
  color: #8a9ab5;
  font-size: 13px;
}

/* ── List-mode (ฝ่าย/งาน) — mobile ──
   ฝ่าย = หัวข้อขีดเส้นใต้, งาน = bullet ย่อยเยื้องขวา (มี "- " นำหน้าใน JS) */
.org-mob-list-header {
  font-weight: 600;
  font-size: 12.5px;
  color: #1f2a44;
  text-decoration: underline;
  margin-top: 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.org-mob-list-item {
  font-size: 11.5px;
  color: #6b7897;
  padding: 2px 0 2px 6px;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 767px) {
  .org-chart-wrap { display: none; }
  .org-mob-list   { display: block; }
}