.canvas-panel--app {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  overflow-y: auto;
  padding: 32px 24px;
}
.app-panel {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
/* Planner ใช้เต็มความกว้างที่มี — ต่างจากแท็บอื่นที่เป็นฟอร์ม/การ์ดอ่านสบายที่ 960px
   เพราะเนื้อหาหลักคือตารางแผนงาน + Gantt ที่กว้างตามธรรมชาติ (ตารางอย่างเดียวก็ ~700px
   เหลือให้กราฟไม่ถึง 250px ถ้าถูกบีบไว้ที่ 960) กติกา min-width:1280px ของ shell ยังคุมพื้นล่างอยู่ */
#planner-app { max-width: none; }
.fp-header h1 { font-size: 24px; margin: 0 0 6px; }
.fp-header p { color: var(--color-text-secondary); margin: 0 0 12px; font-size: 14px; }
.fp-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-pill { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.fp-card { background: #fff; border: 1px solid var(--color-border-soft, var(--color-border-default)); border-radius: var(--radius-card, 10px); padding: 18px 20px; box-shadow: var(--shadow-card, none); }
.fp-card h2 { font-family: 'Sora', 'Sarabun', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
.fp-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fp-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-secondary); font-weight: 600; margin-bottom: 12px; }
.fp-card input, .fp-card select, .fp-card textarea {
  font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; color: var(--color-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fp-card input:focus, .fp-card select:focus, .fp-card textarea:focus,
.modal-card input:focus, .modal-card select:focus {
  outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring, 0 0 0 3px hsla(218, 75%, 50%, 0.22));
}
.fp-card textarea { min-height: 56px; resize: vertical; }
/* Structure Planner (Phase 3) — swimlane sequence + QA/QC zone cards */
.st-sequence { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.st-swimlane { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-swimlane__label { flex: 0 0 90px; font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.st-swimlane__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-swimlane__arrow { color: var(--color-text-secondary); font-size: 13px; }
.st-chip {
  display: flex; align-items: center; gap: 8px; border: none; border-radius: 10px;
  padding: 8px 12px; cursor: pointer; text-align: left; font-family: inherit;
}
.st-chip__icon { font-size: 16px; }
.st-chip__body { display: flex; flex-direction: column; gap: 2px; }
.st-chip__title { font-size: 12px; font-weight: 700; }
.st-chip__sub { font-size: 11px; opacity: 0.85; }
.st-zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.st-zone-card {
  border: 1px solid var(--color-border-default); border-radius: 10px; padding: 12px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; background: #fff;
}
.st-zone-card__title { font-size: 13px; font-weight: 700; }
.st-zone-card__bar { height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.st-zone-card__bar span { display: block; height: 100%; background: var(--color-primary); }
.st-zone-card__status { font-size: 12px; color: var(--color-text-secondary); }
.st-checklist-stage { margin-bottom: 14px; }
.st-checklist-stage__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-secondary); margin-bottom: 6px; }
.st-checklist-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-bottom: 6px; cursor: pointer; }
.st-checklist-item input { margin-top: 3px; }

.fp-btn-primary {
  background: var(--color-primary); color: var(--color-on-primary); border: none; border-radius: var(--radius-control, 8px);
  padding: 10px 18px; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.fp-btn-primary:hover { background: var(--color-primary-pressed); box-shadow: 0 2px 6px hsla(218, 75%, 40%, 0.28); }
.fp-btn-primary:active { background: var(--color-primary-active); transform: translateY(1px); box-shadow: none; }
.fp-btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px hsla(218, 75%, 50%, 0.22)); }
.fp-btn-secondary {
  background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-control, 8px);
  padding: 10px 18px; font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fp-btn-secondary:hover { background: var(--color-surface-row-hover, var(--color-border-default)); border-color: var(--color-text-disabled); }
.fp-btn-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px hsla(218, 75%, 50%, 0.22)); }
.fp-empty { color: var(--color-text-disabled); font-size: 13px; text-align: center; padding: 24px; }

/* Project switcher (topbar) */
.topbar__project-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar__project-select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border-panel);
  background: var(--color-panel-header);
  color: var(--color-text-on-dark);
  max-width: 240px;
}
.topbar__project-select option.topbar__project-option--demo {
  color: #c9962c;
  font-style: italic;
}
.topbar__project-new-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-panel);
  background: transparent;
  color: var(--color-text-on-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.topbar__project-new-btn:hover { background: var(--color-border-panel); }

/* New Project modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--color-panel-bg, #fff);
  color: var(--color-text-primary);
  border-radius: var(--radius-card, 12px);
  padding: 20px 24px;
  width: 560px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.modal-card h2 { margin: 0 0 14px; font-size: 16px; }
.modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-secondary); font-weight: 600; margin-bottom: 12px; }
.modal-card input, .modal-card select {
  font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; color: var(--color-text-primary);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* Readiness Check */
.rc-list { display: flex; flex-direction: column; gap: 10px; }
.rc-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rc-status-badge { border: none; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.rc-item-type { font-size: 11px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.rc-delete { margin-left: auto; border: none; background: none; color: var(--color-text-disabled); cursor: pointer; font-size: 14px; }
.rc-delete:hover { color: #ef4444; }
.rc-item h3 { font-size: 14px; margin: 0 0 4px; }
.rc-detail, .rc-recommend { font-size: 13px; margin: 4px 0 0; color: var(--color-text-secondary); }
.rc-recommend { color: var(--color-primary); }
.rc-nav-link {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rc-nav-link:hover { text-decoration: underline; }

/* ฟอร์มเพิ่มรายการเอง — ยุบไว้ท้ายหน้า (auto-generated checks คือพระเอกของแท็บนี้) */
.rc-add-details { margin-top: 16px; }
.rc-add-details > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-text-secondary);
  padding: 10px 14px; border: 1px dashed var(--color-border-default); border-radius: 8px;
  list-style-position: inside; user-select: none;
}
.rc-add-details > summary:hover { color: var(--color-primary); border-color: var(--color-primary); }
.rc-add-details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rc-add-details__hint { font-weight: 400; color: var(--color-text-disabled); }
.rc-add-card { border-top-left-radius: 0; margin-top: 0; }

:root {
  --rh-danger: #e24b4a;
  --rh-warning: #ba7517;
  --rh-success: #1d9e75;
  --rh-text-primary: var(--color-text-primary, #1f2937);
  --rh-text-secondary: var(--color-text-secondary, #4b5563);
  --rh-text-muted: var(--color-text-disabled, #6b7280);
  --rh-surface-1: var(--color-surface-row, #f8fafc);
}

/* Resource Hub */
.rh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rh-table th, .rh-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border-soft, var(--color-border-default)); text-align: left; }
.rh-table th { font-size: 11px; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 0.5px; background: var(--color-surface-row); }
.rh-table tbody tr:hover { background: var(--color-surface-row-hover); }
.rh-table td.rh-num { text-align: right; font-variant-numeric: tabular-nums; }
.rh-delete { border: none; background: none; color: var(--color-text-disabled); cursor: pointer; }
.rh-delete:hover { color: #ef4444; }
.rh-total-row td { font-weight: 700; border-top: 2px solid var(--color-border-default); }

.rh-labor-shell { display: flex; flex-direction: column; gap: 14px; }
.rh-labor-topbar { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.rh-labor-topbar strong { font-size: 15px; color: var(--rh-text-primary); }
.rh-labor-topbar p { margin: 4px 0 0; font-size: 12px; color: var(--rh-text-secondary); }
.rh-labor-summary-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.rh-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.rh-pill--danger { background: rgba(226, 75, 74, 0.12); color: var(--rh-danger); }
.rh-pill--warning { background: rgba(186, 117, 23, 0.12); color: var(--rh-warning); }
.rh-pill--success { background: rgba(29, 158, 117, 0.12); color: var(--rh-success); }
.rh-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rh-stat-card { padding: 14px 16px; border-radius: var(--radius-card, 10px); border: 1px solid var(--color-border-soft, var(--color-border-default)); background: var(--color-panel-bg, #fff); box-shadow: var(--shadow-card, none); }
.rh-stat-card--warning { border-left: 4px solid var(--rh-warning); }
.rh-stat-card--success { border-left: 4px solid var(--rh-success); }
.rh-stat-card--danger { border-left: 4px solid var(--rh-danger); }
.rh-stat-card--info { border-left: 4px solid var(--color-primary, #2563eb); }
.rh-stat-label { font-size: 11px; color: var(--rh-text-muted); margin-bottom: 6px; }
.rh-stat-value { font-size: 16px; font-weight: 700; color: var(--rh-text-primary); }
.rh-labor-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 14px; }
.rh-labor-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.rh-labor-table th { padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--rh-text-muted); border-bottom: 0.5px solid var(--color-border-default); background: var(--rh-surface-1); text-align: left; }
.rh-labor-table td { padding: 9px 10px; border-bottom: 0.5px solid var(--color-border-default); vertical-align: middle; }
.rh-labor-table tr:last-child td { border-bottom: none; }
.rh-trade-name { font-weight: 600; font-size: 13px; color: var(--rh-text-primary); }
.rh-trade-tasks { font-size: 11px; color: var(--rh-text-muted); margin-top: 2px; }
.rh-delta { font-size: 12px; font-weight: 600; }
.rh-delta--danger { color: var(--rh-danger); }
.rh-delta--success { color: var(--rh-success); }
.rh-delta--muted { color: var(--rh-text-muted); }
.rh-bar-wrap { width: 100%; background: var(--rh-surface-1); border-radius: 4px; height: 8px; overflow: hidden; }
.rh-bar-fill { height: 8px; border-radius: 4px; transition: width 0.3s; }
.rh-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
.rh-chip--danger { background: rgba(226, 75, 74, 0.12); color: var(--rh-danger); }
.rh-chip--warning { background: rgba(186, 117, 23, 0.12); color: var(--rh-warning); }
.rh-chip--success { background: rgba(29, 158, 117, 0.12); color: var(--rh-success); }
.rh-crew-input { border: 0.5px solid var(--color-border-default); border-radius: var(--radius, 6px); padding: 6px 8px; min-width: 72px; width: auto; max-width: 100%; font-size: 12px; text-align: center; background: var(--color-panel-bg, #fff); color: var(--rh-text-primary); }
.rh-crew-input:focus { outline: none; box-shadow: 0 0 0 2px var(--color-primary, #2563eb); }
.rh-alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: var(--radius, 6px); font-size: 12px; margin-bottom: 6px; border: 1px solid var(--color-border-default); background: var(--rh-surface-1); }
.rh-alert-item--danger { border-color: rgba(226, 75, 74, 0.25); background: rgba(226, 75, 74, 0.08); }
.rh-alert-item--warning { border-color: rgba(186, 117, 23, 0.25); background: rgba(186, 117, 23, 0.08); }
.rh-alert-title { font-weight: 600; color: var(--rh-text-primary); margin-bottom: 2px; }
.rh-alert-body { color: var(--rh-text-secondary); font-size: 12px; }
.rh-alert-action { font-size: 11px; color: var(--color-primary, #2563eb); cursor: pointer; margin-top: 4px; display: inline-block; }
.rh-week-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; align-items: end; height: 92px; }
.rh-week-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rh-week-bar-wrap { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 70px; gap: 1px; }
.rh-week-seg { border-radius: 2px; min-height: 2px; }
.rh-week-label { font-size: 10px; color: var(--rh-text-muted); text-align: center; }
.rh-table-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px; border-top: 0.5px solid var(--color-border-default); font-size: 12px; color: var(--rh-text-secondary); }

/* Planner — grouping toggle + reactive date diff chip */
.pl-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pl-card-header__hint { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-secondary); margin-top: 2px; }
.pl-grouping-toggle { display: flex; gap: 6px; }
.pl-grouping-btn { padding: 6px 12px; font-size: 12px; }
.pl-grouping-btn--active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pl-view-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.pl-view-btn { padding: 8px 14px; font-size: 13px; }
.pl-view-btn--active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pl-group { margin-top: 14px; }
.pl-group:first-of-type { margin-top: 0; }
.pl-group__title { font-size: 13px; margin: 0 0 6px; color: var(--color-text-secondary); }
.pl-group__count { font-weight: 400; color: var(--color-text-disabled); }
.pl-diff-chip {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Planner — overall progress (EVM) in header */
.pl-progress-overall { margin-top: 14px; max-width: 520px; }
.pl-progress-overall__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; }
.pl-progress-overall__head strong { font-size: 16px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.pl-progress-overall__bar { height: 10px; border-radius: 999px; background: var(--color-border-default); overflow: hidden; }
.pl-progress-overall__bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), #10b981); border-radius: 999px; transition: width .3s ease; }

/* Planner — ตารางแผนงาน + Gantt แบบ Microsoft Project (ดู js/planner/planner-grid.js)
   ครึ่งซ้าย = ตารางที่พิมพ์แก้ได้ ครึ่งขวา = แท่งงานบนแกนเวลาพิกเซลคงที่ต่อวัน (GANTT_DAY_PX)
   ความกว้างคอลัมน์มาจาก JS (inline grid-template-columns) เพื่อให้หัวตารางกับแถวใช้ชุดเดียวกันเป๊ะ
   ตารางถูกปักหมุดด้วย position:sticky ระหว่างเลื่อนซ้าย-ขวา */
.gantt2 { width: 100%; font-size: 13px; overflow-x: auto; padding-bottom: 4px; }
.gantt2__axis-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border-default); width: max-content; min-width: 100%; position: sticky; top: 0; z-index: 6; background: #fff; }
.gantt2__corner { display: grid; align-items: stretch; flex: 0 0 auto; font-weight: 700; color: var(--color-text-secondary); font-size: 11px; letter-spacing: .3px; position: sticky; left: 0; z-index: 7; background: #fff; border-right: 2px solid var(--color-border-default); }
.gantt2__cell--head { position: relative; display: flex; align-items: center; padding: 0 6px; overflow: hidden; border-left: 1px solid var(--color-border-default); }
.gantt2__cell--head:first-child { border-left: 0; }
.gantt2__headlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ตัวลากปรับความกว้างคอลัมน์ — พื้นที่จับกว้างกว่าเส้นที่เห็น จะได้ลากติดง่าย */
.gantt2__resizer { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 1; }
.gantt2__resizer::after { content: ''; position: absolute; top: 6px; bottom: 6px; left: 4px; width: 1px; background: transparent; }
.gantt2__resizer:hover::after, body.gantt2-resizing .gantt2__resizer::after { background: var(--color-primary); }
/* เส้นแบ่งตาราง↔กราฟ — มองเห็นตลอดเวลา (ไม่ใช่โผล่ตอน hover) เพราะเป็นตัวควบคุมหลัก
   ของการแบ่งพื้นที่ ผู้ใช้ต้องรู้ว่ามีอยู่โดยไม่ต้องเดา */
.gantt2__resizer--split { right: -5px; width: 11px; }
.gantt2__resizer--split::before { content: '⁞'; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--color-text-secondary); }
.gantt2__resizer--split::after { background: var(--color-border-default); left: 5px; top: 2px; bottom: 2px; width: 2px; }
.gantt2__resizer--split:hover::after { background: var(--color-primary); }
body.gantt2-resizing { cursor: col-resize; user-select: none; }
.gantt2__axis { position: relative; flex: 0 0 auto; height: 38px; }
.gantt2__tick { position: absolute; top: 3px; transform: translateX(-2px); font-size: 12px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; padding-left: 4px; border-left: 1px solid var(--color-border-default); height: 32px; }
/* เลขวันที่ทุกวัน (แถวล่างของแกน) — ตอบว่า "วันที่เท่าไหร่/สัปดาห์ไหน" โดยไม่ต้องนับเอง */
.gantt2__daytick { position: absolute; bottom: 3px; transform: translateX(2px); font-size: 10px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; height: 13px; line-height: 13px; }
.gantt2__daytick--weekend { color: var(--color-text-disabled); font-weight: 700; }
.gantt2__rows { display: flex; flex-direction: column; width: max-content; min-width: 100%; position: relative; }
.gantt2__row { display: flex; align-items: stretch; min-height: 30px; border-bottom: 1px solid var(--color-surface-row); width: max-content; min-width: 100%; }
.gantt2__row:hover { background: var(--color-surface-row-hover); }
.gantt2__row:hover .gantt2__rowlabel { background: var(--color-surface-row-hover); }
/* z-index: 5 — ต้องสูงกว่าทั้งแท่งงาน (1) และชั้นเส้น "วันนี้" (2) ไม่งั้นเส้นเวลาจะลากทับ
   ตารางที่ปักหมุดอยู่ซ้ายมือ เห็นเป็นกราฟชนตาราง */
.gantt2__rowlabel { flex: 0 0 auto; display: grid; align-items: stretch; overflow: hidden; position: sticky; left: 0; z-index: 5; background: #fff; border-right: 2px solid var(--color-border-default); }
.gantt2__lane { position: relative; flex: 0 0 auto; cursor: pointer; }

/* เซลล์ในตาราง — input แบบสเปรดชีต: กลืนไปกับพื้น ขอบโผล่ตอนชี้/โฟกัส */
.gantt2__cell { display: flex; align-items: center; padding: 0 6px; overflow: hidden; border-left: 1px solid var(--color-surface-row); font-size: 12px; }
.gantt2__cell--id { justify-content: flex-end; gap: 2px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.gantt2__cell--act { justify-content: center; padding: 0; }
.gantt2__crit { font-size: 10px; }
.gantt2__crit--level { cursor: pointer; }
/* คอลัมน์ ES/EF/LS/LF/FF/TF (Resource Hub overhaul 2026-09-27) — แสดงอย่างเดียว ไม่ใช่ input */
.gantt2__cell--readonly { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; justify-content: flex-end; }
.gantt2__cell--floatwarn { color: #ef4444; font-weight: 700; } /* float <= 0.1 วัน — สีเดียวกับ 🔥 critical badge */
.gantt2__rowbtn { border: 0; background: transparent; cursor: pointer; color: var(--color-text-secondary); font-size: 13px; line-height: 1; padding: 4px; }
.gantt2__rowbtn:hover { color: var(--color-primary); }
.gantt2__cell-input {
  width: 100%; min-width: 0; height: 100%; padding: 0 5px; margin: 0;
  border: 1px solid transparent; border-left-color: var(--color-surface-row); border-radius: 0;
  background: transparent; font: inherit; font-size: 12px; color: var(--color-text-primary);
}
.gantt2__cell-input:hover { background: rgba(100, 116, 139, 0.06); }
.gantt2__cell-input:focus { outline: 0; border-color: var(--color-primary); background: #fff; position: relative; z-index: 1; }
.gantt2__cell-input[type="date"] { font-size: 11px; padding: 0 2px; }
/* ตัวเลขชิดขวา และ "ซ่อนลูกศร spinner" — ลูกศรกินความกว้างช่องไปหลายพิกเซลจนเลข 2-3 หลัก
   (เช่น 100 ในคอลัมน์ %) ถูกตัดหาย เอาออกแล้วเลขเต็มช่องเสมอ ยังพิมพ์/กดลูกศรคีย์บอร์ดได้ปกติ */
.gantt2__cell-input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.gantt2__cell-input[type="number"]::-webkit-outer-spin-button,
.gantt2__cell-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* แถบเครื่องมือเหนือกริด — ย่อตาราง / ซูมแกนเวลา / คืนความกว้างคอลัมน์ */
.gantt2__toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.gantt2__tool { font-size: 12px; padding: 4px 10px; line-height: 1.4; }
.gantt2__tool[disabled] { opacity: .45; cursor: not-allowed; }
.gantt2__zoom { display: inline-flex; align-items: center; gap: 6px; }
.gantt2__zoom-label { font-size: 11px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; min-width: 62px; text-align: center; }

/* แถบท้ายกริด — หมายเหตุว่าอะไรจะถูกคำนวณทับตอน Calculate Project */
.gantt2__foot { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.gantt2__note { font-size: 11px; color: var(--color-text-secondary); line-height: 1.5; }

/* ชั้น overlay เส้น/แถบอ้างอิงเวลา — วาดชุดเดียวซ้อนหลังทุกแถว (ของเดิมวาดซ้ำในทุก lane
   ทำให้จำนวน DOM node เป็น O(แถว × วัน)) วางท้าย .gantt2__rows เพื่อให้อยู่เหนือสีพื้นแถว
   แต่ยังต่ำกว่าแท่งงาน (z-index: 1) */
.gantt2__overlay { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
/* เส้น "วันนี้" ต้องลากทับแท่งงาน จึงแยกเป็นชั้นบน (แท่งงานอยู่ที่ z-index: 1) */
.gantt2__overlay--top { z-index: 2; }
/* เส้น/แถบอ้างอิงเวลาเพิ่มเติม — ช่วยให้เห็นชัดว่าตำแหน่งบนกราฟอยู่ช่วงเดือน/วันไหน โทนกลาง ไม่ใช้สีจากปาเล็ตต์ประเภทงาน */
.gantt2__monthband { position: absolute; top: 0; bottom: 0; background: rgba(100, 116, 139, 0.07); pointer-events: none; }
.gantt2__weekendband { position: absolute; top: 0; bottom: 0; background: rgba(100, 116, 139, 0.06); pointer-events: none; }
.gantt2__monthline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--color-border-default); pointer-events: none; }
.gantt2__dayline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(148, 163, 184, 0.18); pointer-events: none; }
.gantt2__band { position: absolute; top: 0; bottom: 0; background: #ef4444; opacity: 0.14; pointer-events: none; }
.gantt2__today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #3b82f6; pointer-events: none; z-index: 2; }
/* แท่งงาน — ทรงแบบ MS Project: สี่เหลี่ยมมุมคม ขอบเข้ม เตี้ย (10px) และความคืบหน้า
   เป็นแถบดำบางพาดกลางแท่ง ไม่ใช่การถมสีทั้งแท่งอย่างที่ทำมาก่อนหน้านี้ */
.gantt2__bar { position: absolute; top: 50%; transform: translateY(-50%); height: 11px; border: 1px solid; border-radius: 1px; z-index: 1; min-width: 3px; cursor: grab; }
/* แถบสรุป — ทรงเดียวกับ MS Project: แท่งบางสีเข้มพร้อมหางสามเหลี่ยมสองข้าง
   จงใจใช้ class คนละตัวกับ .gantt2__bar เพราะ pl_initDragHandlers() ผูก listener กับ
   .gantt2__bar เท่านั้น แถบสรุปจึงลากไม่ได้โดยโครงสร้าง ไม่ต้องพึ่ง guard ในโค้ด */
.gantt2__sbar { position: absolute; top: 50%; transform: translateY(-50%); height: 6px; background: #1f1f1f; z-index: 1; min-width: 3px; }
.gantt2__sbar::before, .gantt2__sbar::after { content: ''; position: absolute; top: 100%; border-top: 5px solid #1f1f1f; }
.gantt2__sbar::before { left: 0; border-right: 5px solid transparent; }
.gantt2__sbar::after { right: 0; border-left: 5px solid transparent; }
.gantt2__sbar--critical { background: #a00; }
.gantt2__sbar--critical::before, .gantt2__sbar--critical::after { border-top-color: #a00; }
.gantt2__sbar-fill { display: block; height: 100%; background: #8a8a8a; }
.gantt2__bar-fill { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 3px; background: #1f1f1f; }
.gantt2__bar--critical { border-color: #c00 !important; box-shadow: inset 0 0 0 1px #c00; }
.gantt2__bar--rain::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(59,130,246,.35) 3px, rgba(59,130,246,.35) 6px); pointer-events: none; }

/* Structure Detail — real timeline (%-based, deliberately NOT px-per-day like .gantt2* above).
   User feedback (2026-08-10): the old per-row overflow-x:auto lane required scrolling each row
   independently to compare dates — not a real Gantt chart. This is an OVERVIEW across foundation→
   structure (a handful of stages per floor), not a granular day-by-day zoom like Planner's, so the
   whole sequence fitting on screen at once (no scroll) is the right convention here — every bar
   is positioned as a % of the shared project date range, so all rows always stay visually aligned
   without needing pixel math to match across rows. Reuses .gantt2*'s color/line vocabulary
   (today-line, month gridlines) for visual consistency with Planner's own Gantt. See
   structure-detail-index.js's renderTimelineBody(). */
.sd-gantt { width: 100%; font-size: 13px; }
.sd-gantt__header { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border-default); }
.sd-gantt__label-spacer { width: 200px; flex: 0 0 200px; }
.sd-gantt__axis { position: relative; flex: 1 1 auto; min-width: 0; height: 26px; }
.sd-gantt__tick { position: absolute; top: 3px; transform: translateX(-2px); font-size: 11px; font-weight: 700; color: var(--color-text-secondary); white-space: nowrap; padding-left: 5px; border-left: 1px solid var(--color-border-default); height: 18px; }
.sd-gantt__status-spacer { width: 140px; flex: 0 0 140px; }
.sd-gantt__chevron-spacer { width: 20px; flex: 0 0 20px; }
.sd-gantt__body { position: relative; }
.sd-gantt__gridlines { position: absolute; top: 0; bottom: 0; left: 200px; right: 160px; pointer-events: none; }
.sd-gantt__gridline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(148, 163, 184, 0.18); }
.sd-gantt__todayline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #3b82f6; z-index: 2; }
.sd-gantt__row { display: flex; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--color-surface-row); cursor: pointer; }
.sd-gantt__row:hover { background: var(--color-surface-row-hover); }
.sd-gantt__row--open { background: #eff6ff; }
.sd-gantt__label { width: 200px; flex: 0 0 200px; padding-right: 8px; min-width: 0; }
.sd-gantt__label-title { font-size: 13px; font-weight: 700; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-gantt__label-sub { font-size: 11px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-gantt__lane { position: relative; flex: 1 1 auto; min-width: 0; height: 26px; }
.sd-gantt__bar { position: absolute; top: 50%; transform: translateY(-50%); height: 16px; border-radius: 4px; min-width: 6px; z-index: 1; }
.sd-gantt__status { width: 140px; flex: 0 0 140px; text-align: right; padding-left: 8px; }
.sd-gantt__chevron { width: 20px; flex: 0 0 20px; text-align: center; color: var(--color-text-disabled); font-size: 15px; line-height: 1; transition: transform .15s ease, color .15s ease; }
.sd-gantt__row:hover .sd-gantt__chevron { color: var(--color-primary, #3b82f6); transform: translateX(3px); }

/* Structure Detail — drill-down side panel (user feedback 2026-08-10: panel read as cramped/
   plain next to the timeline card — one long flat scroll with no visual grouping). Redesigned
   as a header + a stack of clearly-separated sections (icon + title, subtle tinted background),
   instead of raw h3/border-top dividers, so QA/QC · ความเสี่ยง · 3D · เหล็กเสริม read as distinct
   cards rather than one undifferentiated block. See structure-detail-drilldown.js's
   renderDrilldown(). */
.sdd-panel__head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border-default); }
.sdd-panel__phase { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-secondary); }
.sdd-panel__title { margin: 4px 0 6px; font-size: 19px; }
.sdd-panel__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); }
.sdd-panel__meta strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.sdd-section { background: var(--color-surface-row, #f8fafc); border: 1px solid var(--color-border-default); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.sdd-section:last-child { margin-bottom: 0; }
.sdd-section__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 10px; }

/* Planner — task detail modal */
.pl-detail { width: 520px; }
.pl-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pl-detail__head h2 { margin: 4px 0 0; font-size: 18px; }
.pl-detail__progress { margin-bottom: 16px; }
.pl-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.pl-detail__cell { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-surface-row); font-size: 13px; }
.pl-detail__k { color: var(--color-text-secondary); }
.pl-detail__v { color: var(--color-text-primary); font-weight: 600; text-align: right; }

/* Phase Pipeline — header ใน Planner → Phase view */
.pl-phase-pipeline { padding: 2px 0 4px; }
.pl-phase-pipeline__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin-bottom: 12px; }
.pl-phase-pipeline__track { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.pl-phase-node { flex: 0 0 188px; min-width: 160px; background: #fff; border: 1px solid var(--color-border-default); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.pl-phase-node__badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; width: fit-content; }
.pl-phase-node__icon { font-size: 26px; line-height: 1; margin-top: 4px; }
.pl-phase-node__num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); }
.pl-phase-node__title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.pl-phase-node__sub { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; }
.pl-phase-node__extra { margin-top: auto; padding-top: 6px; }
.pl-phase-arrow { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--color-text-disabled); }
a.pl-phase-node--link { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
a.pl-phase-node--link:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); transform: translateY(-2px); border-color: #3b82f6; }

.pl-journey { display: grid; gap: 16px; }
.pl-journey__hero { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.pl-journey__hero h2 { margin: 0 0 6px; }
.pl-journey__hero p { margin: 0; color: var(--color-text-secondary); max-width: 520px; }
.pl-journey__hero-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 480px); }
.pl-journey__metric { background: var(--color-surface); border: 1px solid var(--color-border-default); border-radius: 10px; padding: 12px; }
.pl-journey__metric span { display: block; color: var(--color-text-secondary); font-size: 12px; }
.pl-journey__metric strong { display: block; margin-top: 6px; font-size: 16px; }
.pl-journey__hero { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.pl-journey__hero-right { display: grid; gap: 12px; min-width: 240px; }
.pl-journey__status-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-journey__badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pl-journey__badge--done { background: #d1fae5; color: #065f46; }
.pl-journey__badge--risk { background: #fde68a; color: #78350f; }
.pl-journey__badge--upcoming { background: #dbeafe; color: #1e40af; }
.pl-journey__status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pl-journey__status-card { background: var(--color-surface); border: 1px solid var(--color-border-default); border-radius: 10px; padding: 14px; }
.pl-journey__status-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.pl-journey__status-value { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.pl-journey__status-note { font-size: 12px; color: var(--color-text-secondary); }
.pl-journey__path-wrap { overflow-x: auto; padding-top: 10px; }
.pl-journey__path { position: relative; display: flex; align-items: center; gap: 12px; padding: 28px 0; min-width: 980px; }
.pl-journey__path::before { content: ''; position: absolute; inset: 50% auto auto 0; right: 0; height: 1px; background: rgba(148, 163, 184, 0.24); transform: translateY(-50%); }
.pl-journey__node { position: relative; flex: 0 0 220px; min-width: 220px; padding: 18px 18px; background: #fff; border: 1px solid var(--color-border-default); border-radius: 20px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06); display: grid; gap: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pl-journey__node:hover { transform: translateY(-2px); box-shadow: 0 22px 56px rgba(15, 23, 42, 0.12); }
.pl-journey__node--critical { border-color: #ef4444; }
.pl-journey__node-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 16px; background: #eef2ff; color: #3730a3; }
.pl-journey__node-body { display: grid; gap: 10px; }
.pl-journey__node-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pl-journey__node-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.04); flex-shrink: 0; }
.pl-journey__node-status { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pl-journey__node-label { font-weight: 700; margin: 0; line-height: 1.3; font-size: 14px; }
.pl-journey__node-meta { font-size: 12px; color: var(--color-text-secondary); }
.pl-journey__node-status-text { display: none; }
.pl-journey__node-title { font-weight: 700; line-height: 1.3; margin: 0; font-size: 14px; }
.pl-journey__status--running { background: #dbeafe; color: #1e40af; }
.pl-journey__status--waiting { background: #f8fafc; color: #334155; }
.pl-journey__status--done { background: #d1fae5; color: #046c4e; }
.pl-journey__status--delayed { background: #fde8d1; color: #9a3412; }
.pl-journey__node-arrow { width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border-default); color: var(--color-text-disabled); font-size: 18px; }
.pl-journey__phases h3 { margin: 0 0 10px; }
.pl-journey__phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pl-journey__phase-card { background: #fff; border: 1px solid var(--color-border-default); border-radius: 14px; padding: 16px; }
.pl-journey__phase-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 10px; }
.pl-journey__phase-value { font-size: 15px; font-weight: 700; }

.fp-gantt { width: 100%; overflow-x: auto; }
.fp-gantt__svg { width: 100%; min-width: 480px; height: auto; display: block; }
.fp-gantt__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--color-text-secondary); }
.fp-gantt__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.fp-gantt__swatch { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.fp-gantt__swatch--line { width: 14px; height: 0; border-top: 2px dashed #3b82f6; background: none; border-radius: 0; }

/* BBS — Bar Bending Schedule (grouped tables) */
.bbs-group { margin-top: 18px; }
.bbs-group:first-of-type { margin-top: 0; }
.bbs-group__title { font-size: 14px; margin: 0 0 8px; color: var(--color-text-primary); }
.bbs-group__sub { font-weight: 400; font-size: 12px; color: var(--color-text-secondary); }

/* Overview */
/* Status hero — the page's single thesis: is this project okay right now? */
#overview-app h2 { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -0.01em; }

/* .ov-table / .ov-num / .ov-conf-badge below are still live — reused by
   Material Catalog (material-catalog.js, material-suppliers-admin.js) and
   BOQ Summary (boq-preset-ui.js, boq-summary.js), not the Overview page. */
.ov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov-table th, .ov-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border-soft, var(--color-border-default)); text-align: left; }
.ov-table th { font-size: 11px; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 0.5px; background: var(--color-surface-row); }
.ov-table tbody tr { transition: background 0.12s ease; }
.ov-table tbody tr:hover { background: var(--color-surface-row-hover); }
.ov-table td.ov-num { text-align: right; font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.ov-conf-badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }

/* Planner — inline progress + actual-cost mini inputs */
.pl-mini {
  width: 58px; font-family: inherit; font-size: 12px; text-align: right;
  padding: 4px 6px; border: 1px solid var(--color-border-default); border-radius: 6px;
  color: var(--color-text-primary);
}
/* .pl-progress / .pl-progress__bar ถูกแทนที่ด้วย .gantt2__pct* (renderProgressCell) แล้ว —
   ช่อง % ในตารางแก้ไขด้านล่างใช้ markup ชุดเดียวกับกริดซ้ายของ Gantt เพื่อให้ปุ่มลัดมีครบทั้งสองที่ */

/* Planner task-detail — duration formula breakdown */
.pl-detail__formula {
  background: hsl(218, 60%, 97%);
  border: 1px solid hsl(218, 50%, 88%);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.pl-detail__formula-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: hsl(218, 45%, 45%); margin-bottom: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pl-detail__formula-link {
  font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: normal;
  background: none; border: none; color: hsl(218, 60%, 45%); cursor: pointer; padding: 0;
}
.pl-detail__formula-link:hover { text-decoration: underline; }
.pl-detail__formula-eq {
  font-size: 12px; color: var(--color-text-secondary, #6b7280); margin-bottom: 4px;
}
.pl-detail__formula-calc {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--color-text-primary, #1f2937);
  line-height: 1.6;
}
.pl-detail__formula-buf { color: hsl(28, 80%, 42%); font-family: 'Sarabun', sans-serif; }

/* Planner task-detail — supervisor / resources-used / assigned-workers */
.pl-detail__supervisor { margin-bottom: 14px; }
.pl-detail__supervisor input { width: 100%; box-sizing: border-box; }
.pl-detail__section { margin-top: 14px; }
.pl-detail__section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--color-text-secondary, #6b7280); margin-bottom: 6px;
}
.pl-detail__worker-pill {
  display: inline-block; background: hsl(218, 60%, 96%); color: hsl(218, 45%, 40%);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; margin: 0 6px 6px 0;
}

/* Critical Path Analysis */
.pl-critical-summary {
  background: linear-gradient(135deg, #fef3c7 0%, #fef08a 100%);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  padding: 16px;
}
.pl-critical-summary__header {
  margin-bottom: 12px;
}
.pl-critical-summary__header h3 {
  margin: 0;
  font-size: 14px;
  color: #78350f;
}
.pl-critical-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.pl-critical-summary__item {
  background: rgba(255, 255, 255, 0.7);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #fbbf24;
}
.pl-critical-summary__label {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
}
.pl-critical-summary__value {
  font-size: 18px;
  font-weight: 800;
  color: #1f2937;
  display: block;
  margin-bottom: 2px;
}
.pl-critical-summary__note {
  font-size: 11px;
  color: #6b7280;
  display: block;
}
.pl-critical-summary__warning {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #f97316;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: #7c2d12;
  margin-top: 12px;
}
.pl-critical-summary__warning strong {
  color: #ea580c;
}

/* Dependency Graph Flow */
.pl-dependency-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
  margin: 12px 0;
}
.pl-flow-node {
  flex-shrink: 0;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
  min-width: 80px;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
  border: 2px solid #1e40af;
}
.pl-flow-node__name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}
.pl-flow-node__dur {
  font-size: 13px;
  font-weight: 800;
}
.pl-flow-arrow {
  flex-shrink: 0;
  color: #3b82f6;
  font-size: 18px;
  font-weight: 700;
}

/* Gantt drag-to-reschedule */
.gantt2__bar--dragging {
  outline: 2px solid #ef4444;
  outline-offset: 1px;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  z-index: 10 !important;
}
.gantt2__lane { cursor: grab; }
.gantt2__lane:active { cursor: grabbing; }
.gantt2__bar { transition: transform 0.1s ease-out; }

/* Drag helper tooltip */
.pl-drag-helper {
  background: #1f2937;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Enhanced critical path highlighting in Gantt */
.gantt2__bar--critical {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
  filter: brightness(1.05);
}
.gantt2__bar--critical.gantt2__bar--rain {
  border-color: #f97316 !important;
}

/* Task row highlighting for critical path */
tr.pl-critical-row {
  background: rgba(239, 68, 68, 0.05);
}
tr.pl-critical-row:hover {
  background: rgba(239, 68, 68, 0.1);
}
tr.pl-critical-row td {
  border-bottom-color: rgba(239, 68, 68, 0.2);
}

/* ──────────────────────────────────────── */
/* Material Breakdown UI (BOQ Decomposition) */
/* ──────────────────────────────────────── */

.boq-item-row {
  display: flex;
  gap: 12px;
  padding: 10px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  align-items: center;
}
.boq-item-row:hover {
  background: rgba(0, 0, 0, 0.02);
}
.boq-item-row .expand-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  flex: 0 0 16px;
  text-align: center;
  color: var(--color-text-secondary);
}
.boq-item-row.expanded .expand-icon {
  transform: rotate(90deg);
}

.boq-material-breakdown {
  background: #fafafa;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.boq-material-breakdown.hidden {
  display: none;
}

/* Cost breakdown bar — materials vs labor */
.cost-bar {
  display: flex;
  height: 24px;
  gap: 2px;
  border-radius: 4px;
  overflow: hidden;
  background: #e5e7eb;
}
.cost-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
}
.cost-segment.materials {
  background: #10b981;
  flex: var(--materials-pct, 60%);
}
.cost-segment.labor {
  background: #f59e0b;
  flex: var(--labor-pct, 30%);
}
.cost-segment.overhead {
  background: #6b7280;
  flex: var(--overhead-pct, 10%);
}

/* Material requirement table */
.material-req-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.material-req-table thead {
  background: #f3f4f6;
  border-bottom: 1px solid var(--color-border-default);
}
.material-req-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.material-req-table tbody tr {
  border-bottom: 1px solid var(--color-border-default);
}
.material-req-table tbody tr:last-child {
  border-bottom: none;
}
.material-req-table td {
  padding: 10px;
  color: var(--color-text-primary);
}
.material-req-table td.font-mono {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  text-align: right;
}
.material-req-table td.req-name {
  font-weight: 500;
}
.material-req-table td.editable {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 8px;
}
.material-req-table td.editable:hover {
  background: #fef3c7;
}

/* Price source badge */
.price-source-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-weight: 500;
  white-space: nowrap;
}
.price-source-badge.cgd_2569 {
  background: #d1fae5;
  color: #065f46;
}
.price-source-badge.cgd_2026 {
  background: #d1fae5;
  color: #065f46;
}
.price-source-badge.catalog {
  background: #dbeafe;
  color: #0c4a6e;
}
.price-source-badge.project_override {
  background: #fef3c7;
  color: #92400e;
}
.price-source-badge.manual {
  background: #f3f4f6;
  color: #374151;
}
.price-source-badge.missing {
  background: #fee2e2;
  color: #7f1d1d;
}

/* Transport cost input */
.transport-row {
  display: grid;
  grid-template-columns: auto 80px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
}
.transport-row label {
  font-weight: 600;
  font-size: 12px;
}
.transport-row input {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  padding: 6px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  font-size: 12px;
}
.transport-cost-display {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-weight: 600;
  font-size: 13px;
}

/* BBS Upload & Validation */
.bbs-upload-wrapper {
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid var(--color-border-default);
}

.bbs-upload-area {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bbs-upload-area:hover {
  border-color: var(--color-primary);
  background: #eff6ff;
}

.bbs-file-info {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 8px;
}

.bbs-preview-image {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bbs-cell-edit {
  background: #fafafa;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  display: inline-block;
}

.bbs-cell-edit:hover {
  background: #fffacd;
  border-color: #ccc;
}

.bbs-cell-edit[contenteditable="true"] {
  background: #fffacd;
  border: 1px solid #fcd34d;
  outline: none;
}

.fp-btn-micro {
  padding: 4px 8px;
  font-size: 11px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.fp-success {
  background: #d1fae5;
  color: #065f46;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #10b981;
  font-size: 13px;
}

.fp-error {
  background: #fee2e2;
  color: #7f1d1d;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #ef4444;
  font-size: 13px;
}

/* Product picker modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.hidden {
  display: none;
}
.modal-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 24px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-card h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.modal-card > div {
  margin-bottom: 16px;
}
.picker-products-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.picker-product-card {
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
}
.picker-product-card:hover {
  background: #f9fafb;
  border-color: var(--color-primary);
}
.picker-product-card.selected {
  background: #eff6ff;
  border-color: var(--color-primary);
}
.picker-product-card .brand {
  font-weight: 600;
  font-size: 12px;
}
.picker-product-card .price {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.picker-manual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
}
.picker-manual label {
  font-size: 12px;
  font-weight: 600;
}
.picker-manual input {
  padding: 6px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  font-size: 12px;
}
.picker-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.picker-actions button {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.btn-select-product {
  padding: 6px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
}
.btn-select-product:hover {
  background: #f9fafb;
  border-color: var(--color-primary);
}

/* ──────────────────────────────────────────────
   Site Investigation — Phase 1
   ────────────────────────────────────────────── */

/* Collapsible module card */
.si-module {
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  overflow: hidden;
}
.si-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.si-module-header::-webkit-details-marker { display: none; }
.si-module-header::before {
  content: '▶';
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-right: 2px;
  transition: transform 0.15s;
}
.si-module[open] > .si-module-header::before { transform: rotate(90deg); }
.si-module-header:hover { background: var(--color-surface-row, #f8fafc); }

.si-module-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.si-module-title { flex: 1; }
.si-module-title strong { display: block; font-size: 14px; }
.si-module-title small { color: var(--color-text-secondary); font-size: 12px; }

/* Status badges */
.si-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; flex-shrink: 0; }
.si-status--pending { background: #f1f5f9; color: #64748b; }
.si-status--done    { background: #f0fdf4; color: #16a34a; }

/* Module body */
.si-module-body { padding: 0 18px 18px; border-top: 1px solid var(--color-border-default); }
.si-module-actions { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.si-module-error { color: #ef4444; font-size: 12px; margin-top: 8px; padding: 8px 12px; background: #fef2f2; border-radius: 6px; }

/* Form */
.si-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.si-law-note { font-size: 11px; color: var(--color-text-secondary); margin: 8px 0 0; font-style: italic; }

/* Soil boring-log upload (AI auto-fill) */

/* Soil layer table */
.si-soil-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 14px; }
.si-soil-table th { padding: 6px 8px; background: var(--color-surface-row, #f8fafc); font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-default); text-align: left; }
.si-soil-table td { padding: 4px 6px; border-bottom: 1px solid var(--color-border-default); }
.si-soil-input { width: 100%; font-size: 12px; padding: 5px 7px; border: 1px solid var(--color-border-default); border-radius: 5px; font-family: inherit; }
.si-soil-input--sm { width: 60px; }
.si-soil-del { border: none; background: none; color: #ef4444; cursor: pointer; font-size: 12px; padding: 2px 5px; }
.si-add-row-btn { margin-top: 8px; font-size: 12px; padding: 6px 12px; }

/* Advanced (optional) lab data + auto soil classification */
.si-soil-advanced { margin-top: 14px; border: 1px solid var(--color-border-default); border-radius: 8px; padding: 8px 12px; }
.si-soil-advanced summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); padding: 4px 0; }
.si-soil-advanced-row { display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 6px; align-items: end; padding: 8px 0; border-top: 1px solid var(--color-border-default); font-size: 11px; }
.si-soil-advanced-row:first-of-type { border-top: none; }
.si-soil-advanced-row label { display: flex; flex-direction: column; gap: 2px; color: var(--color-text-secondary); }
.si-soil-advanced-idx { font-weight: 700; align-self: center; }
.si-soil-advanced-pi { align-self: center; color: var(--color-text-secondary); }
.si-classify-block { margin-top: 14px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 10px 14px; }
.si-classify-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 6px; }
.si-classify-row { display: flex; gap: 12px; align-items: baseline; font-size: 12px; padding: 3px 0; flex-wrap: wrap; }
/* ป้ายกำกับของ si-classify-row ให้กว้างคงที่ เพื่อให้ค่าที่ตามมาเรียงตรงกันเป็นคอลัมน์
   (บล็อกผลคำนวณสดของโมดูลอุทกวิทยามีหลายบรรทัด อ่านยากถ้าป้ายกว้างไม่เท่ากัน) */
.si-classify-row > strong:first-child { flex: 0 0 180px; color: var(--color-text-secondary); font-weight: 700; }
.si-classify-row > span { flex: 1 1 260px; min-width: 0; }
/* ตารางอ้างอิงภายใน si-classify-block (ความทนฝนของคอนกรีต) ต้องเลื่อนแนวนอนได้
   บนจอแคบแทนที่จะดันทั้งแผงให้ล้น */
.si-classify-block .si-util-table { margin-top: 6px; background: #fff; border-radius: 6px; overflow: hidden; }
.si-classify-block .si-util-table td { vertical-align: top; }
@media (max-width: 700px) {
  .si-classify-row > strong:first-child { flex-basis: 100%; }
  .si-classify-block { overflow-x: auto; }
}

/* Utility checkboxes (legacy — kept in case any old markup still references it) */
.si-util-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.si-util-check { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 7px; }
.si-util-check:hover { background: var(--color-surface-row, #f8fafc); }
.si-util-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-primary); flex-shrink: 0; }

/* Utility Intelligence System — repeatable utility line-item table */
.si-util-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 14px; }
.si-util-table th { padding: 6px 8px; background: var(--color-surface-row, #f8fafc); font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-default); text-align: left; }
.si-util-table td { padding: 4px 6px; border-bottom: 1px solid var(--color-border-default); }
.si-util-table select { width: 100%; font-size: 12px; padding: 5px 7px; border: 1px solid var(--color-border-default); border-radius: 5px; font-family: inherit; }

/* Site Constraints — structured hazard checklist */
.si-hazard-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 14px; }
.si-hazard-row { display: grid; grid-template-columns: 140px 120px 1fr; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 7px; }
.si-hazard-label { font-size: 13px; }
.si-hazard-row select, .si-hazard-row input[type="text"] { font-size: 12px; padding: 5px 7px; border: 1px solid var(--color-border-default); border-radius: 5px; font-family: inherit; }

/* AI result display */
.si-result { background: #f8fafc; border: 1px solid var(--color-border-default); border-radius: 8px; padding: 14px 16px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.si-result-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.si-result-row--warn { background: #fef3c7; border-radius: 6px; padding: 6px 8px; }
.si-result-row--note { color: var(--color-text-secondary); font-size: 11px; font-style: italic; }

/* Short "headline stat" tiles for values that are numbers/short phrases —
   used by Building Law (OSR%/setback/height) so they read as scannable
   facts instead of being crammed into a label:value row next to long
   citation text. */
.si-law-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.si-law-stat { background: #fff; border: 1px solid var(--color-border-default); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.si-law-stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 0.3px; }
.si-law-stat strong { font-size: 15px; }

/* Full-width paragraph block for a value that's inherently a sentence/summary
   (not a short fact) — gives it proper line-height instead of squeezing it
   into a label:value row (mirrors the .si-output-card treatment used by the
   final report). */
.si-result-block { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid var(--color-border-default); border-radius: 8px; }
.si-result-block-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 0.3px; }
.si-result-block-text { margin: 0; font-size: 13px; line-height: 1.6; }

/* Simple 3D site-context viewport (js/site/site-3d.js) — background comes from the
   Three.js renderer's own scene.background, this just reserves/clips the box. */
.si-3d-viewport { width: 100%; height: 320px; border-radius: 8px; overflow: hidden; margin-top: 4px; }

/* Collapsible disclaimer/caveat — keeps long caveat paragraphs out of the
   main scan path until the user wants to read them (mirrors .si-soil-advanced). */
.si-disclaimer { margin-top: 6px; border-radius: 6px; padding: 6px 10px; }
.si-disclaimer summary { cursor: pointer; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }
.si-disclaimer p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); }
.si-disclaimer .si-result-list { margin-top: 6px; }
.si-disclaimer--warn { background: #fef2f2; border: 1px solid #fecaca; }
.si-disclaimer--info { background: #f8fafc; border: 1px solid var(--color-border-default); }
.si-disclaimer--warn summary { color: #991b1b; }
.si-disclaimer--warn p { color: #991b1b; }
.si-result-label { min-width: 120px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 0.3px; padding-top: 2px; flex-shrink: 0; }
.si-result-note { font-size: 12px; color: var(--color-text-secondary); }
.si-result-list { margin: 0; padding-left: 16px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }

/* Inline badge */
.si-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.si-badge--critical { box-shadow: 0 0 0 1px #99181840; }

/* Generate Report button */
.si-generate-wrap { text-align: center; padding: 24px 0 8px; }
.si-generate-hint { color: var(--color-text-secondary); font-size: 13px; margin: 0 0 12px; }
.si-generate-btn {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.si-generate-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4); }
.si-generate-btn:disabled { opacity: 0.6; transform: none; cursor: wait; }

/* Final report */
.si-report { background: #fff; border: 2px solid #2563eb; border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.si-report-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.si-report-header h3 { margin: 0; font-size: 16px; }
.si-report-risk { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; flex-shrink: 0; }
.si-report-section { border-top: 1px solid var(--color-border-default); padding-top: 12px; }
.si-report-section--warn { background: #fffbeb; border-radius: 8px; padding: 10px 12px; border: none; }
.si-report-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--color-text-primary, #1e293b); margin-bottom: 10px; }
.si-report-step { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.si-report-section p { margin: 0; font-size: 13px; line-height: 1.6; }
.si-report-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.si-report-list--rec { list-style: none; padding-left: 0; }
.si-report-list--rec li::before { content: ''; }

/* Output cards — replaces a flat stacked row list with distinct, scannable
   boxes (icon + name, bold value, muted purpose) for the report's phase_outputs
   and next_phase_inputs facts. */
.si-output-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
.si-output-card { background: #f8fafc; border: 1px solid var(--color-border-default); border-left: 3px solid #2563eb; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.si-output-card--next { border-left-color: #16a34a; }
.si-output-card-head { display: flex; align-items: center; gap: 6px; }
.si-output-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
.si-output-name { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); letter-spacing: 0.3px; }
.si-output-value { font-size: 14px; font-weight: 700; color: var(--color-text-primary, #1e293b); line-height: 1.4; }
.si-output-purpose { font-size: 11.5px; color: var(--color-text-secondary); font-style: italic; line-height: 1.4; }

@media (max-width: 720px) {
  .si-form-grid { grid-template-columns: 1fr 1fr; }
  .si-util-grid { grid-template-columns: 1fr 1fr; }
  .si-hazard-row { grid-template-columns: 1fr; }
  .si-result-label { min-width: 90px; }
}

/* ──────────────────────────────────────────────
   Foundation Design — Phase 2
   ────────────────────────────────────────────── */

/* Phase 1 data pull card */
.fd-phase1-card { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 14px 16px; }
.fd-phase1-card--empty { background: #fffbeb; border-color: #fcd34d; }
.fd-phase1-card--empty p { margin: 6px 0 0; font-size: 13px; color: #92400e; }
.fd-phase1-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fd-phase1-item { display: flex; flex-direction: column; gap: 2px; }
.fd-phase1-label { font-size: 10px; text-transform: uppercase; color: #3b82f6; font-weight: 700; letter-spacing: 0.3px; }
.fd-phase1-value { font-size: 13px; font-weight: 600; }

/* Foundation schedule table */
.fd-schedule-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 14px; }
.fd-schedule-table th { background: #eff6ff; padding: 7px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #1d4ed8; text-align: left; border-bottom: 2px solid #bfdbfe; white-space: nowrap; }
.fd-schedule-table td { padding: 6px 10px; border-bottom: 1px solid var(--color-border-default); vertical-align: middle; }
.fd-schedule-table tbody tr:nth-child(even) { background: var(--color-surface-row, #f8fafc); }
.fd-schedule-table tr:last-child td { font-weight: 700; background: #f0f9ff; border-top: 2px solid #bfdbfe; }

@media (max-width: 720px) {
  .fd-phase1-grid { grid-template-columns: 1fr 1fr; }
  .fd-schedule-table { font-size: 11px; }
}

/* ── Standards panel (standards-panel.js) ── */
.std-list { display: flex; flex-direction: column; gap: 8px; }
.std-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 11px 13px; background: var(--color-surface-row); border: 1px solid var(--color-border-default); border-radius: 7px; }
.std-row--override { border-color: #9333ea; }
.std-row__main { display: flex; flex-direction: column; }
.std-row__label { font-weight: 600; font-size: 14px; }
.std-row__clause { font-size: 12px; color: var(--color-text-secondary); }
.std-row__value { display: flex; align-items: center; gap: 6px; }
.std-row__input { width: 82px; padding: 5px 8px; font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; text-align: right; border: 1px solid var(--color-border-default); border-radius: 5px; }
.std-row__unit { font-size: 12px; color: var(--color-text-secondary); min-width: 26px; }
.std-row__src { display: flex; align-items: center; gap: 8px; }
.std-row__badge { font-size: 11.5px; color: var(--color-text-secondary); background: #fff;
  border: 1px solid var(--color-border-default); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.std-row__badge--manual { color: #9333ea; border-color: #9333ea; }
.std-row__reset { font-size: 11.5px; background: none; border: 0; color: var(--color-primary); cursor: pointer; }

/* ── Work Package board (planner-work-packages.js) ── */
.wp2-banner { background: hsl(38, 80%, 94%); color: #92400e; font-size: 13px;
  padding: 10px 13px; border-radius: 6px; margin-bottom: 14px; }
.wp2-banner--standards { background: hsl(262, 60%, 95%); color: #6b21a8; }
.wp2-banner--standards a { color: inherit; font-weight: 600; text-decoration: underline; }
.wp2-floor { margin-bottom: 22px; }
.wp2-floor__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.wp2-floor__name { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.wp2-floor__rule { flex: 1; height: 1px; background: var(--color-border-default); }
.wp2-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.wp2 { background: #fff; border: 1px solid var(--color-border-default); border-radius: 8px;
  padding: 14px 15px; display: flex; flex-direction: column; gap: 11px; }
.wp2__title { font-size: 15px; font-weight: 600; margin: 0; }
.wp2__rail { display: flex; flex-direction: column; gap: 5px; }
.wp2-chip { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px;
  width: 100%; text-align: left; padding: 7px 11px; border: 1px solid var(--color-border-default);
  border-radius: 6px; background: var(--color-surface-row); font-family: inherit; font-size: 13px;
  cursor: pointer; overflow: hidden; }
.wp2-chip:hover { border-color: var(--color-primary); }
.wp2-chip__fill { position: absolute; inset: 0 auto 0 0; background: hsl(218, 75%, 95%); pointer-events: none; }
.wp2-chip > span:not(.wp2-chip__fill) { position: relative; }
.wp2-chip__count { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--color-text-secondary); }
.wp2-chip--done { border-color: #10b981; }
.wp2-chip--done .wp2-chip__fill { background: hsl(163, 60%, 94%); }
.wp2__facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--color-text-secondary);
  padding-top: 10px; border-top: 1px solid var(--color-surface-row); }
.wp2__facts b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.wp2__foot { font-size: 12.5px; color: var(--color-text-disabled); font-family: 'JetBrains Mono', monospace; }

/* ── "สัปดาห์นี้" strip (planner-work-packages.js, Task 16) — read-only summary above the board ── */
.wp2-week { background: var(--color-surface-row); border: 1px solid var(--color-border-default);
  border-radius: 8px; padding: 13px 15px; margin-bottom: 18px; }
.wp2-week__head { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-secondary); margin-bottom: 9px; }
.wp2-week__rows { display: flex; flex-direction: column; gap: 6px; }
.wp2-week__row { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--color-border-default); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.wp2-week__label { font-weight: 600; }
.wp2-week__material { color: var(--color-text-secondary); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.wp2-week__due { font-size: 12px; color: #b45309; white-space: nowrap; }

/* ── Tick modal (planner-work-packages.js) — steppers 36px so they stay tappable on a phone ── */
.wp2-tick { background: #fff; border-radius: 10px; padding: 18px 20px; width: 100%; max-width: 430px; max-height: 88vh; overflow-y: auto; }
.wp2-tick__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wp2-tick__head h2 { font-size: 17px; margin: 0; }
.wp2-tick__x { border: 0; background: none; font-size: 21px; cursor: pointer; color: var(--color-text-secondary); }
.wp2-tick__sub { font-size: 12.5px; color: var(--color-text-secondary); margin: 2px 0 12px; }
.wp2-tick__error:empty { display: none; }
.wp2-tick__error { background: hsl(4, 70%, 96%); color: #b91c1c; font-size: 13px; padding: 9px 11px; border-radius: 6px; margin: 0 0 13px; }
.wp2-tick__marks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wp2-tick__mark { border: 1.5px solid var(--color-border-default); background: #fff; color: var(--color-text-secondary);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-family: 'JetBrains Mono', monospace; cursor: pointer; }
.wp2-tick__mark--on { border-color: #10b981; background: hsl(163, 60%, 94%); color: #047857; font-weight: 600; }
.wp2-tick__checks { display: flex; flex-direction: column; gap: 2px; margin-bottom: 15px; }
.wp2-tick__check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid transparent;
  border-radius: 6px; background: var(--color-surface-row); font-family: inherit; font-size: 13.5px; text-align: left; cursor: pointer; width: 100%; }
.wp2-tick__box { flex: 0 0 auto; width: 17px; height: 17px; border: 1.5px solid var(--color-text-disabled);
  border-radius: 4px; display: grid; place-items: center; font-size: 11px; color: transparent; margin-top: 2px; }
.wp2-tick__check--on .wp2-tick__box { background: #10b981; border-color: #10b981; color: #fff; }
.wp2-tick__rows { display: flex; flex-direction: column; gap: 7px; }
.wp2-tick__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 9px 11px; background: var(--color-surface-row); border-radius: 6px; }
.wp2-tick__meta { font-size: 12px; color: var(--color-text-disabled); }
.wp2-tick__stepper { display: flex; align-items: center; gap: 4px; }
.wp2-tick__step { width: 36px; height: 36px; border: 1px solid var(--color-border-default); background: #fff;
  border-radius: 6px; font-size: 17px; cursor: pointer; }
.wp2-tick__step:disabled { opacity: .35; cursor: not-allowed; }
.wp2-tick__val { min-width: 62px; text-align: center; font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }

/* ── 3D structure viewer (planner-3d-*.js) — ORPHANED, kept for the class names other
   surfaces still reuse (.st3-note) ── */
.st3-viewport { background: var(--color-canvas-dark); border-radius: 8px; overflow: hidden; position: relative; min-height: 420px; }
.st3-viewport canvas { display: block; width: 100%; height: auto; cursor: grab; }
.st3-viewport canvas:active { cursor: grabbing; }
.st3-note { font-size: 11.5px; color: var(--color-text-disabled); margin-top: 8px; line-height: 1.5; }

/* ── structure-showcase-3d.js host divs (Structure Detail's "โมเดล 3 มิติ" sub-tab) ── */
.sd-showcase { background: var(--color-canvas-dark); border-radius: 8px; overflow: hidden; position: relative; min-height: 480px; }
.sd-showcase canvas { display: block; width: 100%; height: auto; cursor: grab; }
.sd-showcase canvas:active { cursor: grabbing; }

.st3__modes { display: flex; gap: 6px; margin-bottom: 12px; }
.st3__mode { padding: 7px 15px; font-family: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--color-border-default); background: #fff; color: var(--color-text-secondary); border-radius: 6px;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.st3__mode--on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
.st3__body { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 34%); gap: 14px; align-items: start; }
.st3__floors { display: flex; flex-direction: column; gap: 4px; }
.st3__floor { width: 46px; padding: 9px 0; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  cursor: pointer; border: 1px solid var(--color-border-default); background: #fff;
  color: var(--color-text-secondary); border-radius: 6px;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.st3__floor--on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }
.st3__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--color-text-secondary); }
.st3__key { display: flex; align-items: center; gap: 6px; }
.st3__key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.st3__rail { background: var(--color-surface-row); border: 1px solid var(--color-border-default);
  border-radius: 8px; padding: 13px 14px; min-height: 200px; }
@media (max-width: 900px) { .st3__body { grid-template-columns: 1fr; } .st3__floors { flex-direction: row; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .st3__mode, .st3__floor { transition: none !important; } }

/* ── spec card with provenance (planner-3d-view.js specCardHTML) ── */
.st3-spec__title { font-size: 15px; margin: 0; }
.st3-spec__sub { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 12px; }
.st3-spec__row { display: grid; grid-template-columns: 88px 1fr; gap: 4px 10px; padding: 6px 0;
  border-bottom: 1px solid var(--color-border-default); font-size: 13px; }
.st3-spec__k { color: var(--color-text-secondary); }
.st3-spec__v { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.st3-spec__src { grid-column: 2; font-size: 11px; color: var(--color-text-disabled); }
.st3-spec__unknown { margin-top: 11px; padding: 9px 11px; border-radius: 6px;
  background: hsl(38, 80%, 94%); color: #92400e; font-size: 12.5px; }
.st3-spec__unknown p { margin: 0 0 4px; }
.st3-spec__hold { margin-top: 12px; padding: 9px 11px; border-radius: 6px;
  background: hsl(4, 70%, 96%); color: #b91c1c; font-size: 12.5px; }

.st3-cats { display: flex; flex-direction: column; gap: 6px; }
.st3-cat { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  width: 100%; text-align: left; padding: 10px 12px; font-family: inherit; font-size: 13.5px;
  background: #fff; border: 1px solid var(--color-border-default); border-radius: 7px; cursor: pointer; }
.st3-cat--now { border-color: #ef4444; }
.st3-cat--locked { opacity: .55; cursor: default; }
.st3-cat__name { font-weight: 600; }
.st3-cat__pct { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.st3-cat__tag { grid-column: 1 / -1; font-size: 11px; color: var(--color-text-secondary); }
.st3-cat--now .st3-cat__tag { color: #b91c1c; font-weight: 700; }
.st3-spec__inspect { margin-top: 13px; width: 100%; }
.st3-spec__divider { border: none; border-top: 1px solid var(--color-border-default); margin: 14px 0; }
.st3-joint .st3-spec__sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.st3-joint .st3-cat__tag { grid-column: auto; padding: 3px 8px; border-radius: 5px; background: var(--color-surface-row); border: 1px solid var(--color-border-default); }

/* ── BOQ Pricing Workbench ─────────────────────────────── */
.boqw-seq { width: 48px; color: #64748b; font-family: 'IBM Plex Mono', monospace; }
.boqw-formula-cell { text-align: center; }
.boqw-formula-btn {
  background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 4px;
  border-radius: 4px; opacity: .65;
}
.boqw-formula-btn:hover { opacity: 1; background: hsl(218, 60%, 95%); }
.boqw-muted { color: #94a3b8; }
.boqw-diff-up { color: #dc2626; font-size: 12px; }
.boqw-diff-dn { color: #16a34a; font-size: 12px; }
.boqw-unmatched td { background: #fffbeb; }

.boqw-waterfall { position: sticky; top: 0; z-index: 9; background: #fff; border-bottom: 2px solid #1a4080; padding: 14px 24px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 8px #0001; }
.boqw-wf-step { text-align: center; padding: 0 8px; }
.boqw-wf-step .lbl { font-size: 11px; color: #64748b; }
.boqw-wf-step .val { font-size: 16px; font-weight: 600; }
.boqw-wf-op { color: #64748b; }
.boqw-wf-final { margin-left: auto; background: #1a4080; color: #fff; border-radius: 8px; padding: 8px 18px; text-align: center; }
.boqw-wf-final .lbl { font-size: 11px; opacity: .8; }
.boqw-wf-final .val { font-size: 20px; font-weight: 700; }
.boqw-presetbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; margin: 16px 0; }

/* มุมมองตารางสรุปต้นทุน — แถวปุ่มในกล่องชุดราคา (boq-preset-ui.js renderViewFormatBar) */
.boqw-viewbar { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
.boqw-view-btn { border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: #334155; font-family: inherit; transition: border-color .15s, color .15s; }
.boqw-view-btn:hover { border-color: #2066DF; color: #2066DF; }
.boqw-view-btn--active { background: #2066DF; border-color: #2066DF; color: #fff; }
.boqw-view-btn--active:hover { color: #fff; }
.boqw-pareto-top td { background: #fffbeb; }
.boqw-pareto-divider td { background: #1a4080; color: #fff; font-size: 12px; padding: 6px 12px; text-align: center; }
.boqw-hint { font-size: 12.5px; }
.boqw-chip { border-radius: 99px; padding: 3px 12px; font-size: 12px; font-weight: 600; }
.boqw-chip-ok { background: #dcfce7; color: #16a34a; }
.boqw-chip-warn { background: #fef3c7; color: #b45309; }
.boqw-right { margin-left: auto; text-decoration: none; }
.boqw-rollup { padding: 14px 16px; }
.boqw-row { display: flex; justify-content: space-between; padding: 5px 0; max-width: 640px; margin-left: auto; gap: 16px; }
.boqw-total { border-top: 2px solid #1a4080; font-size: 18px; font-weight: 700; margin-top: 6px; padding-top: 10px; }
.boqw-swap { color: #1a4080; cursor: pointer; text-decoration: underline; font-size: 12px; }
.boqw-note { font-size: 12px; color: #64748b; padding: 4px 24px; }
.boqw-toolbar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; flex-wrap: wrap; }
.boqw-selector { background: #fff; border-radius: 12px; padding: 20px 24px; max-width: 760px; width: 90%; max-height: 80vh; overflow-y: auto; }
.boqw-selector h3 { margin-bottom: 4px; }

.boqw-dv { display: flex; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.boqw-dv-card { flex: 1 1 300px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; }
.boqw-dv-missing { border-style: dashed; }
.boqw-dv-math { font-size: 12px; color: #64748b; line-height: 1.7; }
.boqw-dv-cost { font-size: 16px; font-weight: 700; margin-top: 6px; }
.boqw-trips { width: 56px; padding: 3px; border: 1px solid #e2e8f0; border-radius: 4px; text-align: center; }
.boqw-eta { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; font-size: 13px; }

/* Material Catalog v2 — "โครงการต้องใช้" requirements rail (Task 12) */
.mc-v2-req-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; cursor: pointer; font-family: inherit; }
.mc-v2-req-row.is-covered { background: #f0fdf4; border-color: #bbf7d0; }
.mc-v2-req-name { font-size: 13px; }
.mc-v2-req-qty { font-size: 12px; color: #64748b; font-family: 'IBM Plex Mono', monospace; }
.mc-v2-req-state { grid-column: 1 / -1; font-size: 11px; color: #64748b; }
.mc-v2-req-row.is-covered .mc-v2-req-state { color: #16a34a; }
.mc-v2-req-empty { font-size: 12px; color: #64748b; padding: 4px 0; }

/* ── Plan View (pv-) — near-fullscreen drawing viewer, Plan left / Elements right ── */
/* .canvas-panel--app (shared wrapper for most tabs) caps content at max-width:960px and
   centers it with auto margins — right for a padded form/table, wrong for a fullscreen
   viewer. Override both the flex alignment and the .app-panel sizing it fights against,
   or Plan View gets empty white gutters down both sides. */
#panel-planview { padding: 0; overflow: hidden; align-items: stretch !important; justify-content: stretch !important; }
#panel-planview .app-panel { height: 100%; width: 100%; max-width: none; margin: 0; }
/* Redesigned 2026-08-27 ตาม design/handoff/ — light tonal chrome
   (Anuphan, tonal layering + soft shadows แทนเส้น border, accent เดียวใช้น้อยๆ) ล้อมรอบ
   stage มืดหนึ่งเดียว (viewport แบบเขียนแบบ — กระดาษขาวต้องเด่นบนพื้นเข้ม) ทุก class/id
   ที่ JS อ่าน/เขียนคงเดิมทั้งหมด — restyle เท่านั้น */
.pv-root {
  --canvas: #FAFAF9; --tone: #F4F4F2; --tone-2: #EDEDEA; --surface: #FFFFFF;
  --ink: #191C24; --ink-2: #565B68; --ink-3: #9A9EA9;
  --accent: #2066DF; --accent-hover: #1B58C4; --accent-press: #16418F; --accent-tint: #EDF3FE;
  --ok: #12A150; --ok-tint: #E9F6EE;
  --warn: #DB8A00; --warn-tint: #FCF3E3;
  --risk: #E5484D; --risk-tint: #FDEDEE;
  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -10px rgba(16,24,40,.12);
  --sh-3: 0 12px 32px -8px rgba(16,24,40,.18), 0 4px 12px rgba(16,24,40,.06), 0 0 0 1px rgba(16,24,40,.04);
  --r-1: 8px; --r-2: 12px; --r-full: 999px;
  --font: 'Anuphan', 'Sarabun', sans-serif; --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.2,.8,.2,1); --ease-glide: cubic-bezier(.3,.7,0,1);
  --t-hover: 120ms; --t-pop: 180ms; --t-slide: 250ms;
  display: flex; flex-direction: column; height: 100%;
  background: var(--canvas); color: var(--ink); font-family: var(--font);
}
@keyframes pv-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .pv-root, .pv-root * { animation-duration: 80ms !important; transition-duration: 80ms !important; }
}
.pv-root ::-webkit-scrollbar { width: 6px; height: 6px; }
.pv-root ::-webkit-scrollbar-track { background: transparent; }
.pv-root ::-webkit-scrollbar-thumb { background: var(--tone-2); border-radius: var(--r-full); }

.pv-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface); box-shadow: var(--sh-1); position: relative; z-index: 6; flex: 0 0 auto; }
.pv-toolbar__name { font-size: 13px; font-weight: 600; color: var(--ink); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-toolbar__spacer { flex: 1; }
.pv-toolbar__page { font-size: 12px; min-width: 90px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pv-btn { height: 28px; display: inline-flex; align-items: center; gap: 5px; background: var(--surface); color: var(--ink); border: none; box-shadow: var(--sh-1), inset 0 0 0 1px rgba(16,24,40,.06); border-radius: var(--r-1); padding: 0 12px; cursor: pointer; font-family: var(--font); font-size: 12.5px; font-weight: 500; transition: background var(--t-hover) ease, box-shadow var(--t-hover) ease, transform var(--t-hover) ease; }
.pv-btn:hover { background: var(--tone); }
.pv-btn:active { transform: translateY(1px); }
.pv-btn:disabled { background: var(--tone); color: var(--ink-3); box-shadow: none; cursor: default; transform: none; }
.pv-btn--primary { background: var(--accent); box-shadow: 0 1px 2px rgba(32,102,223,.35); color: #fff; font-weight: 600; }
.pv-btn--primary:hover { background: var(--accent-hover); }
.pv-btn--primary:active { background: var(--accent-press); }

.pv-body { display: flex; flex: 1 1 auto; min-height: 0; }

/* Plan — ชิดซ้าย, กว้างปรับได้ผ่าน .pv-divider */
.pv-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pv-pagebar { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; overflow-x: auto; padding: 7px 14px; background: var(--tone); }
.pv-pagebar__group { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pv-pagebar__group-label { font-size: 10px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; white-space: nowrap; }
.pv-pagechip { flex: 0 0 auto; min-width: 26px; height: 24px; padding: 0 7px; background: var(--surface); color: var(--ink-2); border: none; box-shadow: var(--sh-1); border-radius: var(--r-full); cursor: pointer; font-size: 11.5px; font-family: var(--mono); font-variant-numeric: tabular-nums; transition: background var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.pv-pagechip:hover { color: var(--ink); box-shadow: var(--sh-2); }
.pv-pagechip--active { background: var(--accent); color: #FFFFFF; box-shadow: 0 1px 2px rgba(32,102,223,.35); }
.pv-pagechip__count { display: inline-block; margin-left: 4px; font-size: 9px; opacity: .7; }

.pv-stage { position: relative; flex: 1 1 auto; overflow: auto; display: grid; place-items: center; padding: 16px; cursor: grab; min-height: 0;
  background: var(--ink);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 22px 22px; }
.pv-stage:active { cursor: grabbing; }
.pv-stage canvas, .pv-stage img { box-shadow: 0 12px 44px rgba(0,0,0,.5); background: #fff; max-width: none; }
/* Wraps the rendered page (canvas/img) + the overlay box layer at exactly the same size —
   .ovl's position:absolute;inset:0 needs this as its positioned ancestor, or box percentages
   (left/top/width/height) resolve against the wrong element and drift off the drawing entirely. */
.pv-canvas-wrap { position: relative; display: inline-block; line-height: 0; }
.pv-canvas-wrap .ovl { position: absolute; inset: 0; }

/* เส้นแบ่งลากปรับสัดส่วน */
.pv-divider { flex: 0 0 6px; background: var(--tone-2); cursor: col-resize; position: relative; transition: background var(--t-hover) ease; }
.pv-divider:hover, .pv-divider:active { background: var(--accent); }

/* Elements — ชิดขวา, แสดงตลอด (ไม่ใช่ drawer พับได้) */
.pv-elements { display: flex; flex-direction: column; min-width: 220px; overflow: hidden; background: var(--surface); }
.pv-elements__header { flex: 0 0 auto; padding: 13px 14px 11px; animation: pvHeaderFlash .5s ease-out; }
.pv-elements__title { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.pv-elements__summary { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.pv-elements__body { flex: 1 1 auto; overflow-y: auto; padding: 0 14px 14px; }
.pv-elements__note { font-size: 12px; color: var(--warn); background: var(--warn-tint); border-radius: var(--r-1); padding: 8px 10px; margin: 10px 0; line-height: 1.55; }

/* คอลัมน์ไม่ห่อบรรทัด — ตารางยาวเกินความกว้างพาเนลให้เลื่อนแนวนอนแทน ไม่บีบตัวหนังสือ */
.pv-table-scroll { overflow-x: auto; }
.pv-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 12.5px; }
.pv-table th, .pv-table td { padding: 6px 8px; text-align: left; white-space: nowrap; }
.pv-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.pv-table th { font-family: var(--font); color: var(--ink-3); font-weight: 600; font-size: 11px; }
.pv-table tbody tr:nth-child(even) { background: var(--tone); }
.pv-table__row { cursor: pointer; transition: background var(--t-hover) ease; }
.pv-table__row:hover { background: var(--accent-tint); }
.pv-table__verify { text-align: center; }
.pv-verify-badge { display: inline-block; font-family: var(--font); color: var(--ink-3); }
.pv-verify-badge--yes { color: var(--ok); font-weight: 700; }
.pv-verify-badge--no { color: var(--ink-3); }

.pv-empty { display: grid; place-items: center; align-content: center; gap: 8px; height: 100%; text-align: center; padding: 24px; animation: pv-fade-up 400ms var(--ease) both; }
.pv-empty__icon { font-size: 26px; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-tint); display: grid; place-items: center; margin-bottom: 4px; }
.pv-empty__title { font-size: 16px; font-weight: 700; color: var(--ink); }
.pv-empty__text { font-size: 13px; color: var(--ink-2); max-width: 460px; line-height: 1.65; }

@keyframes pvHeaderFlash {
  from { background: var(--accent-tint, #EDF3FE); }
  to { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-elements__header { animation: none; }
}

/* ── Planner combined view: ภาพรวม 3D + แผน (.plm*) ─────────────────────────
   ซ้าย = โมเดล 3 มิติ (.st3 เดิม, rail ในตัวแคบลง) · ขวา = ไทม์ไลน์ย่อ + ธงงวด ·
   แถวล่างเต็มความกว้าง = time scrubber + KPI. เดสก์ท็อปเท่านั้น (แอปขั้นต่ำ 1280px) */
.plm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 38%); gap: 16px; }
.plm__left { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.plm__right { min-width: 0; }
.plm__scrub { grid-column: 1 / -1; }
.plm .st3__body { grid-template-columns: auto minmax(0, 1fr) minmax(200px, 30%); }
/* .plm__showcase — host div for structure-showcase-3d.js's <canvas> ('gantt' mode, no orbit) */
.plm__showcase { background: var(--color-canvas-dark); border-radius: 8px; overflow: hidden; position: relative; min-height: 420px; }
.plm__showcase canvas { display: block; width: 100%; height: auto; }

/* สลับพื้นที่ .plm__left ระหว่างโมเดล 3D กับกราฟ S-curve (King's call, 2026-08-31 —
   เดิมสองบล็อกแยกกันคนละที่บนหน้า) .plm-showcase-tab--active ตาม convention เดียวกับ
   .pl-view-btn--active/.pl-grouping-btn--active ที่มีอยู่แล้วในไฟล์นี้ */
.plm-showcase-tabs { display: flex; gap: 8px; }
.plm-showcase-tab { padding: 6px 12px; font-size: 12px; border: 1px solid var(--color-border-default); border-radius: 999px; background: #fff; color: var(--color-text-secondary); cursor: pointer; }
.plm-showcase-tab--active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
/* .sc/.sc__plot/.sc-chart เองมี width:100%/height:auto อยู่แล้ว (css/s-curve.css) —
   ต้องแค่ให้กรอบนี้มีขนาดใกล้เคียง .plm__showcase (420px) ไม่ต้องตั้ง width ซ้ำ */
.plm__scurve-host { min-height: 420px; display: flex; align-items: center; background: #fff; border: 1px solid var(--color-border, #e2e6e9); border-radius: 8px; padding: 8px; }
.plm__scurve-host > .sc { width: 100%; }

/* mini gantt — ความสูงจริงมาจาก syncMiniGanttHeight() ใน planner-index.js (ResizeObserver
   วัด .plm__left จริงแล้วเซ็ต inline height ทับ) เพราะความสูงฝั่งซ้ายไม่คงที่ (โมเดล 3D สูงตาม
   clientWidth×0.58 ของ structure-showcase-3d.js) — แต่ต้องมี max-height + overflow:hidden
   เป็นเพดานไว้ที่นี่ด้วยเสมอ ไม่งั้นตอนเฟรมแรกก่อน JS/ResizeObserver ทำงานทัน (หรือกรณีที่
   #plm-right ถูกสร้างใหม่จาก refreshAfterEdit() แล้ว sync ยังไม่ไล่ทัน) เนื้อหารายการงานที่
   ไม่มีเพดานจะดันให้ auto-sized grid track ของ .plm ทั้งแถวพองตามจำนวนงาน (ไม่ใช่ตามฝั่งซ้าย)
   — เพดานนี้กันบวมไว้ก่อนเสมอ ไม่ว่า JS จะมาทันหรือไม่ */
.plm-mini { --plm-label: 118px; position: relative; border: 1px solid var(--color-border, #e2e6e9); border-radius: 10px; padding: 8px 10px 10px; background: #fff; display: flex; flex-direction: column; min-height: 420px; max-height: 85vh; overflow: hidden; }
.plm-mini__flagrow, .plm-mini__axisrow { display: grid; grid-template-columns: var(--plm-label) 1fr; flex-shrink: 0; }
.plm-mini__flaglane, .plm-mini__axislane { grid-column: 2; position: relative; height: 20px; }
.plm-mini__axislane { height: 16px; border-bottom: 1px solid #e2e6e9; margin-bottom: 4px; }
.plm-mini__tick { position: absolute; top: 0; font-size: 10px; color: #6b7378; transform: translateX(-2px); white-space: nowrap; }
.plm-mini__rows { position: relative; flex: 1; min-height: 0; overflow-y: auto; }
.plm-mini__wphead { font-size: 11px; font-weight: 700; color: #475569; margin: 6px 0 2px; }
.plm-mini__row { display: grid; grid-template-columns: var(--plm-label) 1fr; align-items: center; height: 18px; border-radius: 4px; cursor: pointer; }
.plm-mini__row:hover { background: #f1f5f9; }
.plm-mini__row--hl { background: #fef3c7; outline: 1px solid #f59e0b; }
.plm-mini__rowlabel { font-size: 11px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.plm-mini__lane { position: relative; height: 12px; }
.plm-mini__bar { position: absolute; top: 0; height: 12px; border-radius: 3px; overflow: hidden; min-width: 3px; }
.plm-mini__bar i { display: block; height: 100%; }
.plm-mini__bar--critical { outline: 1.5px solid #ef4444; outline-offset: -1px; }
/* cursor/todayline อยู่ใน __rows ซึ่งกว้างรวมคอลัมน์ label — JS ตั้ง left เป็น
   calc(var(--plm-label) + (100% - var(--plm-label)) × fraction) ให้ตรงแนว lane */
.plm-mini__cursor, .plm-mini__todayline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #f59e0b; pointer-events: none; z-index: 2; }
.plm-mini__cursor { border-left-color: #f59e0b; }
.plm-mini__todayline { border-left: 1.5px dashed #3b82f6; opacity: .6; }
.plm-mini__noflag { font-size: 11px; color: #94a3b8; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ธงงวดงาน */
.plm-flag { position: absolute; top: 0; transform: translateX(-50%); background: none; border: 0; padding: 0 3px; font-size: 13px; line-height: 18px; cursor: pointer; }
.plm-flag--upcoming { color: #94a3b8; }
.plm-flag--due { color: #f59e0b; }
.plm-flag--overdue { color: #ef4444; }
.plm-flag--paid { color: #10b981; }
.plm-flag:hover { transform: translateX(-50%) scale(1.35); }

/* scrubber */
.plm-scrubbar { border-top: 1px dashed #e2e6e9; padding-top: 10px; }
.plm-scrubbar__row { display: flex; align-items: center; gap: 10px; }
.plm-scrubbar__date { font-size: 13px; font-weight: 700; color: #1d4ed8; min-width: 96px; }
.plm-scrubbar__row input[type="range"] { flex: 1; accent-color: #f59e0b; }
.plm-scrubbar__btn { white-space: nowrap; }
.plm-scrubbar__kpi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* popover แก้งวด */
#plm-ms-popover { position: absolute; top: 26px; right: 8px; z-index: 30; }
.plm-pop { width: 280px; background: #fff; border: 1px solid #e2e6e9; border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); padding: 12px; }
.plm-pop__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.plm-pop label { display: block; font-size: 11px; color: #475569; margin-bottom: 6px; }
.plm-pop label input { display: block; width: 100%; box-sizing: border-box; margin-top: 2px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; }
.plm-pop__warn { font-size: 11px; color: #b45309; margin: 4px 0; }
.plm-pop__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* รายการงาน 5 ขั้นในราง 3 มิติ (st3-tasks) — รางใช้พื้นสว่าง (--color-surface-row)
   จึงต้องใช้โทนตัวอักษรเข้ม ห้ามใช้สีอ่อนแบบ viewport มืด */
.st3-tasks { margin-top: 10px; border-top: 1px dashed var(--color-border-default); padding-top: 8px; }
.st3-tasks__title { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 6px; }
.st3-task { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px; }
.st3-task__name { color: var(--color-text-primary, #1e293b); font-weight: 600; flex: 0 0 auto; }
.st3-task__dates { color: var(--color-text-secondary, #64748b); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st3-task__edit { flex: 0 0 auto; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 11px; padding: 1px 8px; cursor: pointer; }
.st3-task__edit:hover { background: #dbeafe; }

/* modal แก้ไขงาน (editable detail) */
.pl-detail { width: 640px; max-width: 92vw; }
.pl-detail__input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; }
.pl-detail__input:focus { outline: 2px solid #93c5fd; border-color: #3b82f6; }
.pl-detail__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* ── Planner tab: full canvas width ─────────────────────────────────────────
   เหตุเดียวกับ #panel-planview ด้านบน — .canvas-panel--app (wrapper กลางของแท็บส่วนใหญ่)
   cap เนื้อหาที่ 960px + จัดกลางด้วย auto margin ซึ่งถูกต้องกับฟอร์ม/ตาราง แต่บีบมุมมองรวม
   "ภาพรวม 3D + แผน" (โมเดล 3 มิติ + ไทม์ไลน์คู่กัน) เหลือช่องแคบกลางจอ — Planner ทั้งแท็บ
   ได้ประโยชน์จากความกว้างเต็ม (Gantt ในโหมด Timeline ด้วย) จึงปลดทั้งแท็บ ไม่ใช่เฉพาะโหมดรวม */
#panel-planner { align-items: stretch !important; }
#panel-planner .app-panel { width: 100%; max-width: none; }

/* แถบคำแนะนำการใช้กล้อง 3 มิติ + ปุ่มกลับมุมมองรวม */
.st3__viewhint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.st3__reset { white-space: nowrap; font-size: 11px; padding: 3px 10px; }

/* หัวเรื่องย่อของมุมมองรวม 3D — ปุ่ม Planner + view toggle ในแถวเดียว,
   สรุปโครงการโผล่เป็น popover ตอน hover และปักกางในหน้าได้ด้วยการคลิก */
.fp-header--compact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; padding: 0 0 10px; }
.fp-header--compact h1 { display: none; }
.plm-head__title { font-size: 17px; font-weight: 800; color: #1e293b; background: #fff; border: 1px solid #e2e6e9; border-radius: 10px; padding: 7px 14px; cursor: pointer; }
.plm-head__title:hover { border-color: #93c5fd; }
.pl-view-toggle--inline { margin: 0; }
.plm-head__detail { display: none; }
.plm-head:hover .plm-head__detail:not(.plm-head__detail--pin) {
  display: block; position: absolute; top: calc(100% - 2px); left: 0; z-index: 60;
  background: #fff; border: 1px solid #e2e6e9; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16); padding: 12px 16px; min-width: 560px;
}
.plm-head__detail--pin { display: block; width: 100%; }

/* scrubber ย้ายขึ้นบน — เส้นคั่นอยู่ใต้แถบแทน */
.plm .plm-scrubbar { border-top: 0; border-bottom: 1px dashed #e2e6e9; padding-top: 0; padding-bottom: 8px; }

/* รางรายละเอียด (สเปค/จุดต่อ) ยาวได้ไม่จำกัด — จำกัดความสูงเท่าๆ viewport 3D แล้วให้เลื่อนในตัวเอง
   ไม่งั้นการ์ดจุดต่อหลายชิ้นดันทั้งหน้ายาวจน 3D กับไทม์ไลน์หลุดจากกัน */
.plm .st3__rail { max-height: 620px; overflow-y: auto; padding-right: 4px; }

/* รางเมื่อเลือกชิ้นงานในโมเดล 3 มิติ (Planner) — ระบุตัวชิ้น + สถานะ ไม่มีสเปคโครงสร้าง
   (รายละเอียดหน้าตัด/เหล็ก/QA-QC ย้ายไป Structure Detail ของ Ton แล้ว)
   พื้นรางสว่าง จึงใช้โทนตัวอักษรเข้มชุดเดียวกับการ์ดอื่นในราง */
.st3-pick { padding: 2px 0 8px; border-bottom: 1px dashed var(--color-border-default); margin-bottom: 8px; }
.st3-pick__back { background: none; border: 0; color: #1d4ed8; font-size: 11px; cursor: pointer; padding: 0 0 6px; }
.st3-pick__back:hover { text-decoration: underline; }
.st3-pick__title { font-size: 15px; font-weight: 700; color: var(--color-text-primary, #1e293b); margin: 0; }
.st3-pick__sub { font-size: 11px; color: var(--color-text-secondary, #64748b); margin: 2px 0 6px; }
.st3-pick__status { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.st3-pick__status--done { background: #dcfce7; color: #15803d; }
.st3-pick__status--active { background: #fef3c7; color: #b45309; }
.st3-pick__status--todo { background: #fee2e2; color: #b91c1c; }
.st3-pick__status--future { background: #e2e8f0; color: #475569; }

/* ── ตารางงานแบบกะทัดรัด (pl-group2 / pl-row2) — redesign 2026-08-09 ─────────
   แถวละงาน ~6 ช่อง แก้ inline เฉพาะ % เสร็จ + ใช้จริง ฿ ที่เหลือเข้าโมดัลผ่านปุ่มแก้ไข */
.pl-tfilter { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.pl-tfilter__q { flex: 1 1 220px; max-width: 340px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; }
.pl-tfilter__floor { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; background: #fff; }
.pl-tfilter__done { font-size: 12px; color: #475569; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.pl-tfilter__done input { margin: 0; }
.pl-tfilter__count { font-size: 12px; color: #94a3b8; margin-left: auto; }

.pl-group2 { border: 1px solid var(--color-border-default, #e2e6e9); border-radius: 10px; margin-bottom: 8px; background: #fff; }
.pl-group2__head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; user-select: none; }
.pl-group2__head::-webkit-details-marker { display: none; }
.pl-group2__caret { font-size: 11px; color: #94a3b8; transition: transform .15s; }
.pl-group2[open] .pl-group2__caret { transform: rotate(90deg); }
.pl-group2__name { font-weight: 700; font-size: 13px; color: #1e293b; }
.pl-group2__meta { font-size: 11px; color: #64748b; }
.pl-group2__bar { flex: 1; max-width: 160px; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-left: auto; }
.pl-group2__bar i { display: block; height: 100%; background: #10b981; }
.pl-group2__pct { font-size: 11px; color: #475569; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

.pl-row2 { display: grid; grid-template-columns: 22px minmax(0, 1fr) 215px 150px 110px auto auto;
  align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid #f1f5f9; }
.pl-row2:hover { background: #f8fafc; }
.pl-row2__icon { text-align: center; font-size: 13px; }
.pl-row2--done .pl-row2__icon { color: #10b981; }
.pl-row2--active .pl-row2__icon { color: #f59e0b; }
.pl-row2--wait .pl-row2__icon { color: #cbd5e1; }
.pl-row2--done .pl-row2__title { color: #64748b; }
.pl-row2__name { min-width: 0; cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pl-row2__name:hover .pl-row2__title { color: #1d4ed8; text-decoration: underline; }
.pl-row2__title { font-size: 13px; color: #1e293b; }
.pl-row2__tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pl-tag { font-style: normal; font-size: 10px; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.pl-tag--crit { color: #b91c1c; background: #fee2e2; }
.pl-tag--rain { color: #b45309; background: #fef3c7; }
.pl-tag--late { color: #fff; background: #ef4444; font-weight: 700; }
.pl-row2__dates { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row2__prog { display: flex; align-items: center; gap: 6px; }
.pl-row2__prog .pl-progress__bar { flex: 1; }
.pl-row2__cost { width: 100%; }
.pl-row2__edit { padding: 3px 12px; font-size: 12px; white-space: nowrap; }

.pl-addform__summary { font-weight: 700; font-size: 14px; color: #1d4ed8; cursor: pointer; list-style: none; }
.pl-addform__summary::-webkit-details-marker { display: none; }
.pl-addform[open] .pl-addform__summary { margin-bottom: 10px; }

/* ===== Drawing Overlay Workspace — Part 2 (overlay boxes, panel, impact strip) ===== */

.pv-rg {
  position: absolute; border-style: solid; border-radius: 2px;
  border-width: calc(2px * var(--pv-inv, 1));
  transition: background .1s, box-shadow .1s;
  pointer-events: auto;
}
.pv-rg:hover { background: rgba(32,102,223,.08); }
.pv-rg[data-src="text_layer"] { border-color: #22d3ee; background: rgba(34,211,238,.10); }
.pv-rg[data-src="ai_vision"]  { border-color: #fbbf24; background: rgba(251,191,36,.10); }
.pv-rg[data-src="user_drawn"] { border-color: #a78bfa; background: rgba(167,139,250,.14); }
/* box_source มี 5 ค่าจริงตาม schema.js:267 แต่เดิมมีสีแค่ 3 ค่าบน — demo_seed (ทุกกล่องใน
   โปรเจกต์เดโม house01) กับ raw_import (นำเข้าจากไฟล์ raw JSON) ไม่มีสีเลย ตกไปใช้สไตล์ตั้งต้น
   ไร้สี (แค่กรอบดำ ไม่มีพื้นหลัง) — อาการ "กรอบขาวดำ" ที่ King รายงาน */
.pv-rg[data-src="demo_seed"]  { border-color: #818cf8; background: rgba(129,140,248,.12); }
.pv-rg[data-src="raw_import"] { border-color: #34d399; background: rgba(52,211,153,.10); }
/* สถานะงานก่อสร้างจริง (จาก ElementProgress) — สีชุดเดียวกับสถานะชิ้นงานใน 3D/4D (เขียว=เสร็จ,
   เหลือง=กำลังทำ) ใช้ !important ให้ชนะสีที่มาของกล่อง (data-src) เสมอ เพราะเป็นข้อมูลที่มี
   ความหมายจริง (สร้างเสร็จ/กำลังทำจริง) คุ้มกว่าที่มาของกล่อง — st-todo (ยังไม่เริ่ม) เดิมก็ทับสี
   data-src ด้วยสีเทาแบนๆ เหมือนกัน แต่ "ยังไม่เริ่ม" ไม่ใช่ข้อมูลที่มีความหมายพอจะบังสีที่มาของ
   กล่องไป — ทำให้ทุกกล่องที่ยังไม่ติดตามความคืบหน้า (ส่วนใหญ่ของโปรเจกต์เดโม house01) กลายเป็น
   เทาล้วนหมด ทั้งที่สีที่มาของกล่อง (demo_seed/raw_import ฯลฯ) คือสิ่งที่มีประโยชน์ตอนตรวจแบบ
   จริงๆ (King รายงานว่า "ยังเป็นสีขาวดำ") — เอาสีของ st-todo ออก ปล่อยให้สี data-src โชว์แทน
   คง class st-todo ไว้ใน DOM เผื่อ logic อื่นในอนาคตต้องใช้ แค่ไม่ให้มันมีผลกับสีอีกต่อไป */
.pv-rg.st-done   { border-color: #10b981 !important; background: rgba(16,185,129,.14) !important; }
.pv-rg.st-active { border-color: #f59e0b !important; background: rgba(245,158,11,.16) !important; }
.pv-rg.st-done .pv-rg-tag   { background: rgba(6,95,70,.92); }
.pv-rg.st-active .pv-rg-tag { background: rgba(146,64,14,.92); }
.pv-rg.low { border-style: dashed; }
.pv-rg.sel {
  background: rgba(32,102,223,.24) !important; border-color: #60a5fa !important; border-style: solid !important;
  box-shadow: 0 0 0 calc(2px * var(--pv-inv,1)) rgba(96,165,250,.45), 0 0 calc(18px * var(--pv-inv,1)) rgba(96,165,250,.6);
  z-index: 20;
}
.pv-rg.dim { opacity: .18; }
.pv-rg.hidden { display: none; }
.pv-rg.flash { animation: pv-flash .85s ease-out; }
@keyframes pv-flash { 0%,100% { background: rgba(32,102,223,.24); } 30% { background: rgba(96,165,250,.75); } }
.pv-rg-tag {
  position: absolute; left: 0; bottom: 100%;
  transform: scale(var(--pv-inv,1)); transform-origin: 0 100%;
  background: rgba(15,23,42,.9); color: #fff; font-family: var(--mono, monospace); font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px; white-space: nowrap; pointer-events: none; margin-bottom: 2px;
}
.pv-rg.sel .pv-rg-tag { background: var(--accent, #2066DF); }
.pv-rg[data-src="user_drawn"] .pv-rg-tag::after { content: ' \270E'; }

.pv-hnd {
  position: absolute; background: #fff; border: 1.5px solid var(--accent, #2066DF); border-radius: 2px;
  width: calc(9px * var(--pv-inv,1)); height: calc(9px * var(--pv-inv,1));
}
.pv-hnd.nw { left: 0; top: 0; transform: translate(-50%,-50%); cursor: nwse-resize; }
.pv-hnd.ne { right: 0; top: 0; transform: translate(50%,-50%); cursor: nesw-resize; }
.pv-hnd.sw { left: 0; bottom: 0; transform: translate(-50%,50%); cursor: nesw-resize; }
.pv-hnd.se { right: 0; bottom: 0; transform: translate(50%,50%); cursor: nwse-resize; }
.pv-hnd.n { left: 50%; top: 0; transform: translate(-50%,-50%); cursor: ns-resize; }
.pv-hnd.s { left: 50%; bottom: 0; transform: translate(-50%,50%); cursor: ns-resize; }
.pv-hnd.w { left: 0; top: 50%; transform: translate(-50%,-50%); cursor: ew-resize; }
.pv-hnd.e { right: 0; top: 50%; transform: translate(50%,-50%); cursor: ew-resize; }
.pv-draft { position: absolute; border: 2px dashed #a78bfa; background: rgba(167,139,250,.2); pointer-events: none; border-radius: 2px; }

/* HUD ลอยบน stage มืด — glass สีหมึก (ไม่ใช่ surface สว่าง เพราะลอยเหนือกระดาษ/พื้นเข้ม) */
.pv-stage-hint {
  position: absolute; left: 12px; bottom: 12px; background: rgba(25,28,36,.85); color: #C7CBD4;
  font-size: 11px; padding: 6px 11px; border-radius: var(--r-1, 8px); pointer-events: none; backdrop-filter: blur(8px);
  z-index: 15; animation: pv-fade-up 400ms var(--ease, ease-out) both;
}
.pv-stage-hint kbd { font-family: var(--mono, monospace); background: rgba(255,255,255,.13); border-radius: 3px; padding: 1px 4px; font-size: 10px; }

.pv-legend {
  position: absolute; right: 12px; bottom: 12px; background: rgba(25,28,36,.85);
  border-radius: var(--r-1, 8px); padding: 9px 12px; backdrop-filter: blur(8px); pointer-events: none; z-index: 15;
  animation: pv-fade-up 400ms var(--ease, ease-out) both;
}
.pv-legend-t { font-size: 10px; color: #9A9EA9; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; font-weight: 700; }
.pv-legend-r { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #E4E6EA; margin-top: 3px; }
.pv-legend-sw { width: 14px; height: 10px; border-radius: 2px; border: 2px solid; display: inline-block; }

/* แถบเครื่องมือ workspace (แถวใต้ pagebar) + แถบ layer ในพาเนลขวา */
.pv-toolbar2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-ws-toolbar { padding: 7px 12px; background: var(--surface); box-shadow: var(--sh-1); position: relative; z-index: 5; flex: 0 0 auto; }
.pv-tool-group { display: flex; gap: 3px; background: var(--tone); padding: 3px; border-radius: calc(var(--r-1, 8px) + 3px); }
.pv-tool {
  padding: 4px 11px; border-radius: var(--r-1, 8px); font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 5px;
  color: var(--ink-2, #565B68); border: none; background: transparent; cursor: pointer; font-family: inherit;
  transition: background var(--t-hover, 120ms) ease, color var(--t-hover, 120ms) ease, box-shadow var(--t-hover, 120ms) ease;
}
.pv-tool:hover { color: var(--ink, #191C24); }
.pv-tool.active { background: var(--accent, #2066DF); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(32,102,223,.35); }
.pv-tb-sep { width: 1px; height: 20px; background: var(--tone-2, #EDEDEA); margin: 0 4px; }
.pv-layer-toggle {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-full, 999px);
  border: none; background: var(--surface, #fff); box-shadow: var(--sh-1); color: var(--ink, #191C24); cursor: pointer; font-family: inherit;
  transition: background var(--t-hover, 120ms) ease, color var(--t-hover, 120ms) ease, box-shadow var(--t-hover, 120ms) ease;
}
.pv-layer-toggle.off { background: var(--tone, #F4F4F2); box-shadow: none; color: var(--ink-3, #9A9EA9); }
.pv-layer-toggle .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.pv-layer-toggle.off .sw { opacity: .25; }

/* โครงพาเนลขวาของ workspace — หัว + แถบ layer + รายการการ์ด (แยกชั้นด้วยโทนสี ไม่ใช่เส้น) */
.pv-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-layerbar { padding: 0 14px 10px; }
.pv-el-cards { flex: 1 1 auto; overflow-y: auto; }

/* การ์ด element — ไร้เส้นขอบ: เงา --sh-1 พัก / หัวการ์ดเป็นขั้นโทนสี / เลือกแล้ว = วงแหวน accent */
.pv-el2 { border-radius: var(--r-2, 12px); margin-bottom: 9px; overflow: hidden; background: var(--surface, #fff); box-shadow: var(--sh-1); transition: box-shadow var(--t-hover, 120ms) ease; }
.pv-el2:hover { box-shadow: var(--sh-2); }
.pv-el2.sel { box-shadow: var(--sh-2), 0 0 0 2px var(--accent, #2066DF); }
.pv-enter .pv-el2 { animation: pv-fade-up 380ms var(--ease, ease-out) both; }
.pv-enter .pv-el2:nth-child(2) { animation-delay: 40ms; }
.pv-enter .pv-el2:nth-child(3) { animation-delay: 80ms; }
.pv-enter .pv-el2:nth-child(4) { animation-delay: 120ms; }
.pv-enter .pv-el2:nth-child(5) { animation-delay: 160ms; }
.pv-enter .pv-el2:nth-child(6) { animation-delay: 200ms; }
.pv-enter .pv-el2:nth-child(n+7) { animation-delay: 240ms; }
.pv-el2-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; background: var(--tone, #F4F4F2); transition: background var(--t-hover, 120ms) ease; }
.pv-el2-head:hover { background: var(--tone-2, #EDEDEA); }
.pv-el2.sel .pv-el2-head, .pv-el2.sel .pv-el2-head:hover { background: var(--accent-tint, #EDF3FE); }
.pv-el2-mark { font-family: var(--mono, monospace); font-weight: 700; font-size: 14px; color: var(--ink, #191C24); }
.pv-el2-type { font-size: 11.5px; color: var(--ink-2, #565B68); }
.pv-el2-headr { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.pv-el2-body { padding: 11px 12px 13px; display: none; }
.pv-el2.open .pv-el2-body { display: block; }
.pv-sec-t { font-size: 10.5px; font-weight: 700; color: var(--ink-3, #9A9EA9); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
.pv-inst-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }

/* สถานะ = tint pill + จุดสีทึบ (ตาม moodboard — ไม่ใช้ outline chip) */
.pv-conf { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full, 999px); }
.pv-conf.hi { background: var(--ok-tint, #E9F6EE); color: var(--ok, #12A150); }
.pv-conf.mid { background: var(--warn-tint, #FCF3E3); color: var(--warn, #DB8A00); }
.pv-conf.lo { background: var(--risk-tint, #FDEDEE); color: var(--risk, #E5484D); }
.pv-vbadge { font-size: 10.5px; font-weight: 700; color: var(--ok, #12A150); background: var(--ok-tint, #E9F6EE); border-radius: var(--r-full, 999px); padding: 2px 8px; display: flex; align-items: center; gap: 3px; }

.pv-prm { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.pv-prm-k { color: var(--ink-2, #565B68); flex: 0 0 92px; }
.pv-prm-v { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-weight: 500; flex: 1; }
.pv-prm-v.empty { color: var(--ink-3, #9A9EA9); font-family: var(--font, sans-serif); font-style: italic; font-weight: 400; }
.pv-prm input { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-size: 12.5px; border: none; background: transparent; border-radius: 6px; padding: 2px 6px; width: 100%; color: var(--ink, #191C24); font-weight: 500; transition: background var(--t-hover, 120ms) ease, box-shadow var(--t-hover, 120ms) ease; }
.pv-prm input:hover { background: var(--tone, #F4F4F2); }
.pv-prm input:focus { outline: none; background: var(--surface, #fff); box-shadow: 0 0 0 2px var(--accent, #2066DF); }
.pv-prov { font-size: 10px; padding: 1px 7px; border-radius: var(--r-full, 999px); white-space: nowrap; font-weight: 600; }
.pv-prov.ai { background: var(--accent-tint, #EDF3FE); color: var(--accent-press, #16418F); }
.pv-prov.def { background: var(--warn-tint, #FCF3E3); color: var(--warn, #DB8A00); }
.pv-prov.miss { background: var(--risk-tint, #FDEDEE); color: var(--risk, #E5484D); }
.pv-prov.user { background: #EDE9FE; color: #6D28D9; }

.pv-xnote { margin-top: 9px; font-size: 11px; color: var(--ink-2, #565B68); background: var(--tone, #F4F4F2); border-radius: var(--r-1, 8px); padding: 7px 10px; line-height: 1.55; }

.pv-inst { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-1, 8px); font-size: 12px; cursor: pointer; transition: background var(--t-hover, 120ms) ease; }
.pv-inst:hover { background: var(--tone, #F4F4F2); }
.pv-inst.sel { background: var(--accent-tint, #EDF3FE); }
.pv-inst-n { font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--ink, #191C24); color: #fff; flex: 0 0 17px; transition: background var(--t-hover, 120ms) ease; }
.pv-inst.sel .pv-inst-n { background: var(--accent, #2066DF); }
.pv-inst-grid { font-family: var(--mono, monospace); color: var(--ink-2, #565B68); flex: 0 0 62px; font-size: 11.5px; }
.pv-inst-len { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-weight: 600; flex: 1; color: var(--ink, #191C24); }
.pv-inst-len small { color: var(--ink-3, #9A9EA9); font-weight: 400; }
.pv-inst-src { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; display: inline-block; }
.pv-inst-del { opacity: 0; color: var(--risk, #E5484D); font-size: 14px; line-height: 1; padding: 0 2px; background: none; border: none; cursor: pointer; transition: opacity var(--t-hover, 120ms) ease; }
.pv-inst:hover .pv-inst-del { opacity: .65; }
.pv-inst-del:hover { opacity: 1 !important; }

.pv-relabel { margin-top: 10px; padding: 10px 11px; background: var(--accent-tint, #EDF3FE); border-radius: var(--r-1, 8px); }
.pv-relabel-t { font-size: 10.5px; font-weight: 700; color: var(--accent-press, #16418F); margin-bottom: 7px; }
.pv-relabel-row { display: flex; gap: 6px; align-items: center; }
.pv-relabel-select { flex: 1; height: 28px; padding: 0 8px; border: none; box-shadow: var(--sh-1); border-radius: var(--r-1, 8px); font-family: inherit; font-size: 12.5px; background: var(--surface, #fff); color: var(--ink, #191C24); }
.pv-relabel-select:focus { outline: none; box-shadow: var(--sh-1), 0 0 0 2px var(--accent, #2066DF); }
.pv-relabel .pv-prm input { background: var(--surface, #fff); box-shadow: var(--sh-1); }
.pv-relabel .pv-prm input:focus { box-shadow: var(--sh-1), 0 0 0 2px var(--accent, #2066DF); }
.pv-el2-actions { display: flex; gap: 6px; margin-top: 13px; }
.pv-el2-actions .pv-btn { flex: 1; justify-content: center; }

/* Small/semantic .pv-btn modifiers for the workspace panel (single-dash naming kept —
   workspace-panel.js already emits these class names). */
.pv-btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.pv-btn-primary { background: var(--accent, #2066DF); box-shadow: 0 1px 2px rgba(32,102,223,.35); color: #fff; font-weight: 600; }
.pv-btn-primary:hover { background: var(--accent-hover, #1B58C4); }
.pv-btn-ok { background: var(--ok, #12A150); box-shadow: 0 1px 2px rgba(18,161,80,.35); color: #fff; font-weight: 600; }
.pv-btn-ok:hover { background: #0E8A44; }

.pv-impact2 { flex: 0 0 auto; background: var(--tone, #F4F4F2); padding: 10px 14px 11px; }
.pv-impact2-t { font-size: 10.5px; font-weight: 700; color: var(--ink-3, #9A9EA9); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.pv-impact2-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; animation: pv-fade-up 250ms var(--ease, ease-out) both; }
.pv-impact2-row .m { font-family: var(--mono, monospace); font-weight: 700; flex: 0 0 42px; color: var(--ink, #191C24); }
.pv-impact2-row .c { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; color: var(--ink-2, #565B68); }
.pv-impact2-note { font-size: 11px; color: var(--ink-2, #565B68); margin-top: 6px; }
.pv-delta { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11.5px; margin-left: auto; padding: 1px 8px; border-radius: var(--r-full, 999px); }
.pv-delta.up { background: var(--ok-tint, #E9F6EE); color: var(--ok, #12A150); }
.pv-delta.down { background: var(--risk-tint, #FDEDEE); color: var(--risk, #E5484D); }
.pv-impact2-none { font-size: 11.5px; color: var(--ink-3, #9A9EA9); font-style: italic; }

.pv-toast2 {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink, #191C24); color: #fff; padding: 10px 18px; border-radius: var(--r-2, 12px); font-size: 13px; z-index: 90;
  opacity: 0; transition: 280ms var(--ease, cubic-bezier(.2,.8,.2,1)); box-shadow: var(--sh-3, 0 10px 30px rgba(0,0,0,.3));
  display: flex; align-items: center; gap: 9px; pointer-events: none;
}
.pv-toast2.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.pv-stage.pv-tool-draw { cursor: crosshair; }

/* ── Plan View popover (เพิ่มองค์อาคารใหม่ / assign กล่องที่วาดใหม่) — แทน prompt()/alert() เดิม.
   ต่อท้าย document.body (นอก .pv-root) ดังนั้นทุก var() ต้องมี fallback ตาม convention ของบล็อกนี้ ── */
.pv-pop {
  position: fixed; z-index: 120; width: 272px;
  background: var(--surface, #FFFFFF); border-radius: var(--r-2, 12px);
  box-shadow: 0 12px 32px -8px rgba(16,24,40,.18), 0 4px 12px rgba(16,24,40,.06), 0 0 0 1px rgba(16,24,40,.06);
  padding: 13px 14px 12px; font-family: 'Anuphan', 'Sarabun', sans-serif; color: var(--ink, #191C24);
  animation: pv-fade-up 180ms cubic-bezier(.2,.8,.2,1) both;
}
.pv-pop-t { font-family: 'Sora', 'Anuphan', sans-serif; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.pv-pop-row { margin-bottom: 9px; }
.pv-pop-lbl { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3, #9A9EA9); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.pv-pop-input, .pv-pop-select {
  width: 100%; box-sizing: border-box; padding: 7px 9px; font-family: inherit; font-size: 13px;
  border: 1px solid #CBD5E1; border-radius: var(--r-1, 8px); background: #fff; color: inherit; outline: none;
}
.pv-pop-input { font-family: 'JetBrains Mono', monospace; }
.pv-pop-input:focus, .pv-pop-select:focus { border-color: var(--accent, #2066DF); box-shadow: 0 0 0 3px rgba(32,102,223,.15); }
.pv-pop-select { margin-bottom: 7px; }
.pv-typepick { display: flex; flex-wrap: wrap; gap: 5px; }
.pv-typepill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 12px; font-family: inherit;
  border: 1px solid #E2E8F0; border-radius: var(--r-full, 999px); background: var(--tone, #F4F4F2);
  color: var(--ink-2, #565B68); cursor: pointer; transition: 120ms ease;
}
.pv-typepill:hover { border-color: #CBD5E1; }
.pv-typepill.on { background: var(--accent-tint, #EDF3FE); border-color: var(--accent, #2066DF); color: var(--ink, #191C24); font-weight: 600; }
.pv-typepill .sw { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.pv-pop-err { font-size: 11.5px; color: var(--risk, #E5484D); background: var(--risk-tint, #FDEDEE); border-radius: var(--r-1, 8px); padding: 5px 8px; margin-bottom: 8px; }
.pv-pop-btns { display: flex; gap: 6px; margin-top: 10px; }
.pv-pop-btns .pv-btn { flex: 1; justify-content: center; text-align: center; }
.pv-pop-hint { font-size: 10.5px; color: var(--ink-3, #9A9EA9); margin-top: 8px; line-height: 1.5; }
.pv-pop-link {
  display: inline-block; border: none; background: none; padding: 2px 0; margin-top: 2px;
  font-family: inherit; font-size: 11.5px; color: var(--accent, #2066DF); cursor: pointer;
}
.pv-pop-link:hover { text-decoration: underline; }
.pv-pop-mode[hidden] { display: none; }

/* หัวพาเนล "องค์อาคารในหน้านี้" — บรรทัดนับราย "หน้า" (หน้า N · X element · Y กล่อง) */
.pv-panel-head__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv-panel-count { font-size: 10.5px; color: var(--ink-3, #9A9EA9); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
/* Structure Detail 4D — ตาราง BBS ของชิ้นที่คลิก (Task 6, feature/bbs-structure-detail) */
.sd4d-bbs-card { margin-top: 10px; }
.sd4d-bbs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sd4d-bbs-table th, .sd4d-bbs-table td {
  padding: 5px 7px; border-top: 1px solid var(--color-border, #e2e8f0);
  text-align: left; vertical-align: middle;
}
.sd4d-bbs-table th { background: #f8fafc; font-weight: 600; white-space: nowrap; }
.sd4d-bbs-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd4d-bbs-svg svg { display: block; max-width: 110px; }
.sd4d-bbs-assumed {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; font-size: 10px;
}
.sd4d-bbs-borrowed {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: #ffedd5; border: 1px solid #f97316; color: #9a3412; font-size: 10px;
}

/* ── ประมาณการต้นทุนโครงการ (Resource Hub, 2026-08-28) ────────────────────────
   แถว equipment/contingency ที่ computeResources() สร้างมาตลอดแต่ไม่มีหน้าไหนแสดง
   แยกจาก KPI "งบทรัพยากรรวม" โดยตั้งใจ เพราะ KPI นับเครื่องจักรจากการจองจริง
   ส่วนตารางนี้เป็นประมาณการจากสูตร — รวมกันจะเป็นการนับสองครั้ง */
.rh-ce h3 { margin: 0 0 10px; font-size: 15px; }
.rh-ce .rh-table td { padding: 6px 8px; }
.rh-ce__sub td { border-top: 1px solid var(--color-border, #e2e8f0); font-weight: 600; }
.rh-ce__note { color: #94a3b8; font-size: 11px; font-weight: 400; }
.rh-ce__foot { margin: 8px 0 0; font-size: 11px; line-height: 1.7; color: #64748b; }

/* Readiness Check — สถานะความสมเหตุสมผลของตัวเลข หนึ่งบรรทัด (2026-08-29) */
.rc-plaus { margin-bottom: 12px; }
.rc-plaus__h { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.rc-plaus__sub { color: #6b7280; font-size: 12.5px; line-height: 1.6; }